diff --git a/src/assets/image/add_btn.png b/src/assets/image/add_btn.png
new file mode 100644
index 0000000..4e8cfbd
Binary files /dev/null and b/src/assets/image/add_btn.png differ
diff --git a/src/assets/image/bag.png b/src/assets/image/bag.png
new file mode 100644
index 0000000..2d695e3
Binary files /dev/null and b/src/assets/image/bag.png differ
diff --git a/src/assets/image/cen_bag.png b/src/assets/image/cen_bag.png
new file mode 100644
index 0000000..74c12a8
Binary files /dev/null and b/src/assets/image/cen_bag.png differ
diff --git a/src/assets/image/device.png b/src/assets/image/device.png
new file mode 100644
index 0000000..1a0d049
Binary files /dev/null and b/src/assets/image/device.png differ
diff --git a/src/assets/image/device_act.png b/src/assets/image/device_act.png
new file mode 100644
index 0000000..e5e3adb
Binary files /dev/null and b/src/assets/image/device_act.png differ
diff --git a/src/assets/image/exit.png b/src/assets/image/exit.png
new file mode 100644
index 0000000..6ef2489
Binary files /dev/null and b/src/assets/image/exit.png differ
diff --git a/src/assets/image/exit_speak.png b/src/assets/image/exit_speak.png
new file mode 100644
index 0000000..ea3eea1
Binary files /dev/null and b/src/assets/image/exit_speak.png differ
diff --git a/src/assets/image/exit_voice.png b/src/assets/image/exit_voice.png
new file mode 100644
index 0000000..a7c4144
Binary files /dev/null and b/src/assets/image/exit_voice.png differ
diff --git a/src/assets/image/finish.png b/src/assets/image/finish.png
new file mode 100644
index 0000000..a690769
Binary files /dev/null and b/src/assets/image/finish.png differ
diff --git a/src/assets/image/group_act.png b/src/assets/image/group_act.png
new file mode 100644
index 0000000..5d7cac7
Binary files /dev/null and b/src/assets/image/group_act.png differ
diff --git a/src/assets/image/group_tit.png b/src/assets/image/group_tit.png
new file mode 100644
index 0000000..9a653d8
Binary files /dev/null and b/src/assets/image/group_tit.png differ
diff --git a/src/assets/image/hang.png b/src/assets/image/hang.png
new file mode 100644
index 0000000..9225f01
Binary files /dev/null and b/src/assets/image/hang.png differ
diff --git a/src/assets/image/head_photo.png b/src/assets/image/head_photo.png
new file mode 100644
index 0000000..7bd7573
Binary files /dev/null and b/src/assets/image/head_photo.png differ
diff --git a/src/assets/image/left_bag.png b/src/assets/image/left_bag.png
new file mode 100644
index 0000000..59d0b7d
Binary files /dev/null and b/src/assets/image/left_bag.png differ
diff --git a/src/assets/image/list_act.png b/src/assets/image/list_act.png
new file mode 100644
index 0000000..84a7794
Binary files /dev/null and b/src/assets/image/list_act.png differ
diff --git a/src/assets/image/list_tit.png b/src/assets/image/list_tit.png
new file mode 100644
index 0000000..a94a15f
Binary files /dev/null and b/src/assets/image/list_tit.png differ
diff --git a/src/assets/image/mute.png b/src/assets/image/mute.png
new file mode 100644
index 0000000..16ec63f
Binary files /dev/null and b/src/assets/image/mute.png differ
diff --git a/src/assets/image/over.png b/src/assets/image/over.png
new file mode 100644
index 0000000..12a9ad6
Binary files /dev/null and b/src/assets/image/over.png differ
diff --git a/src/assets/image/phone.png b/src/assets/image/phone.png
new file mode 100644
index 0000000..1a4ad0c
Binary files /dev/null and b/src/assets/image/phone.png differ
diff --git a/src/assets/image/phone_act.png b/src/assets/image/phone_act.png
new file mode 100644
index 0000000..a0f24d8
Binary files /dev/null and b/src/assets/image/phone_act.png differ
diff --git a/src/assets/image/phone_tit.png b/src/assets/image/phone_tit.png
new file mode 100644
index 0000000..75da7fe
Binary files /dev/null and b/src/assets/image/phone_tit.png differ
diff --git a/src/assets/image/right_bag.png b/src/assets/image/right_bag.png
new file mode 100644
index 0000000..92beb81
Binary files /dev/null and b/src/assets/image/right_bag.png differ
diff --git a/src/assets/image/spread_btn.png b/src/assets/image/spread_btn.png
new file mode 100644
index 0000000..7d37109
Binary files /dev/null and b/src/assets/image/spread_btn.png differ
diff --git a/src/assets/image/title.png b/src/assets/image/title.png
new file mode 100644
index 0000000..4cff00f
Binary files /dev/null and b/src/assets/image/title.png differ
diff --git a/src/assets/image/top.png b/src/assets/image/top.png
new file mode 100644
index 0000000..422819d
Binary files /dev/null and b/src/assets/image/top.png differ
diff --git a/src/assets/image/tree.png b/src/assets/image/tree.png
new file mode 100644
index 0000000..ea6166c
Binary files /dev/null and b/src/assets/image/tree.png differ
diff --git a/src/assets/image/voice_bag.png b/src/assets/image/voice_bag.png
new file mode 100644
index 0000000..7c4b8d1
Binary files /dev/null and b/src/assets/image/voice_bag.png differ
diff --git a/src/assets/image/voice_tit.png b/src/assets/image/voice_tit.png
new file mode 100644
index 0000000..d53e6e0
Binary files /dev/null and b/src/assets/image/voice_tit.png differ
diff --git a/src/assets/image/weather.png b/src/assets/image/weather.png
new file mode 100644
index 0000000..419fee7
Binary files /dev/null and b/src/assets/image/weather.png differ
diff --git a/src/assets/js/rem.js b/src/assets/js/rem.js
new file mode 100644
index 0000000..c274420
--- /dev/null
+++ b/src/assets/js/rem.js
@@ -0,0 +1,18 @@
+(function (doc, win) {
+  var docEl = doc.documentElement,
+    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
+    recalc = function () {
+      var clientWidth = docEl.clientWidth;
+      if (!clientWidth) return;
+      if (location.href.indexOf("express") > -1) {
+        docEl.style.fontSize = "";
+      } else if (clientWidth >= 1920) {
+        docEl.style.fontSize = "100px"; //1rem  = 100px
+      } else {
+        docEl.style.fontSize = 100 * (clientWidth / 1920) + "px";
+      }
+    };
+  if (!doc.addEventListener) return;
+  win.addEventListener(resizeEvt, recalc, false);
+  doc.addEventListener("DOMContentLoaded", recalc, false);
+})(document, window);
diff --git a/src/views/dispatch/index-copy.vue b/src/views/dispatch/index-copy.vue
new file mode 100644
index 0000000..262949e
--- /dev/null
+++ b/src/views/dispatch/index-copy.vue
@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <div>{{ type == '1' ? '呼叫' : type == '2' ? '对讲' : '会议' }}</div>
+    <el-row :gutter="22">
+      <el-col :span="4">
+        <div>
+          <h3>通讯录</h3>
+        </div>
+        <el-tree :data="groupData" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"
+          :props="defaultProps">
+        </el-tree>
+      </el-col>
+      <el-col :span="16">
+        <el-row :gutter="12">
+          <el-col v-for="(item, index) in members" :key="item.number" :span="8">
+            <el-card shadow="always">
+              {{ item.number }} - {{ item.name }}
+              <video :id="'video' + item.number" style="background-color: black;"></video>
+              <div>
+                <el-button type="primary" plan size="mini" @click="makeCall(item, false)">音频呼叫</el-button>
+                <el-button type="primary" plan size="mini" @click="makeCall(item, true)">视频呼叫</el-button>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="4">
+        <div>
+          <h3>呼叫列表</h3>
+        </div>
+        <div>
+          <el-checkbox-group v-model="checkedMember">
+            <el-checkbox v-for="(item, index) in groupMembers" :label="item.number" :key="item.number + '' + index">{{
+              item.number }} - {{ item.name }}</el-checkbox>
+          </el-checkbox-group>
+        </div>
+        <!-- 其他操作 -->
+        <el-row :gutter="12">
+          <el-col :span="16">
+            <el-col :span="12">
+              <el-button>邀请进入</el-button>
+            </el-col>
+            <el-col :span="12">
+              <el-button>静音</el-button>
+            </el-col>
+          </el-col>
+          <el-col :span="8">
+            <el-col :span="24">
+              <el-button>移除会议</el-button>
+            </el-col>
+            <el-col :span="24">
+              <el-button>结束会议</el-button>
+            </el-col>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { client, isRegisted, mylog } from "../../util/dispatch"
+
+export default {
+  name: "alarmCenter",
+  data() {
+    return {
+      //分组成员
+      groupData: [{
+        id: 1,
+        label: '一级 1',
+        children: [{
+          id: 4,
+          label: '二级 1-1',
+        }]
+      }, {
+        id: 2,
+        label: '一级 2',
+        children: [{
+          id: 5,
+          label: '二级 2-1'
+        }, {
+          id: 6,
+          label: '二级 2-2'
+        }]
+      }, {
+        id: 3,
+        label: '一级 3',
+        children: [{
+          id: 7,
+          label: '二级 3-1'
+        }, {
+          id: 8,
+          label: '二级 3-2'
+        }]
+      }],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      //对话成员
+      members: [
+        { number: '1001', name: '张三' }
+      ],
+      groupMembers: [
+        { number: '1001', name: '张三' }, { number: '1002', name: '张三2' }, { number: '1003', name: '张三3' }
+      ],
+      checkedMember: [],
+      //通讯类型
+      type: '1',//1呼叫 2对讲 3会议
+      _conf: null,
+    };
+  },
+  computed: {
+    ...mapGetters(["userInfo"]),
+  },
+  mounted() {
+    console.log(isRegisted)
+  },
+  methods: {
+    /** 呼叫 */
+    makeCall(obj, isVideo) {
+      let mediaControl = document.getElementById('video' + obj.number);
+      client.makeCall(obj.number, mediaControl, isVideo).then((call) => {
+        this.setCallEventListener(call);
+        var state = this.convertCallstate(call.state);
+        mylog("call success callState: " + state);
+      }).catch((reason) => {
+        mylog("call fail");
+        mylog(JSON.stringify(reason));
+      });
+    },
+    //呼叫监听
+    setCallEventListener(call) {
+      call.callStateChange.on(this.onCallStateChange);
+      call.onBecomeConference.on((para) => {
+        mylog("当前单呼变成会议");
+        this._conf = para.changeToConference;
+        this._conf.stateChange.on((para) => {
+          console.log("_conf.stateChange" + JSON.stringify(para));
+        })
+      });
+    },
+    //状态change监听
+    onCallStateChange(param) {
+      var state = convertCallstate(param.state);
+      mylog("call callStateChange, number: " + param.sender.number + ", state: " + state + ", isVideo: " + param.sender.isVideo);
+    },
+    //监听状态转义
+    convertCallstate(state) {
+      var stateStr;
+      switch (state) {
+        case 1:
+          stateStr = "init";
+          break;
+        case 2:
+          stateStr = "normal";
+          break;
+        case 3:
+          stateStr = "callout";
+          break;
+        case 4:
+          stateStr = "incoming";
+          break;
+        case 5:
+          stateStr = "ringing";
+          break;
+        case 6:
+          stateStr = "connected";
+          break;
+        case 7:
+          stateStr = "terminal";
+          break;
+        case 8:
+          stateStr = "hold";
+          break;
+        case 9:
+          stateStr = "unhold";
+          break;
+        default:
+          break;
+      }
+      return stateStr;
+    }
+  },
+};
+</script>
+
+<style></style>
+
diff --git a/src/views/dispatch/index.vue b/src/views/dispatch/index.vue
index 262949e..f1e5a16 100644
--- a/src/views/dispatch/index.vue
+++ b/src/views/dispatch/index.vue
@@ -1,191 +1,1010 @@
 <template>
-  <div>
-    <div>{{ type == '1' ? '呼叫' : type == '2' ? '对讲' : '会议' }}</div>
-    <el-row :gutter="22">
-      <el-col :span="4">
-        <div>
-          <h3>通讯录</h3>
+  <div class="voice_box">
+    <div class="top_header">
+      <div class="left">
+        <div class="top_title"></div>
+      </div>
+      <div class="right">
+        <div class="top_right">
+          <div class="date_box">{{date}}</div>
+          <div class="weather_box">
+            <img src="~@/assets/image/weather.png" alt="">
+          </div>
+          <div class="weather_txt">23℃</div>
+          <div class="weather_txt time_txt">{{time}}</div>
         </div>
-        <el-tree :data="groupData" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"
-          :props="defaultProps">
-        </el-tree>
-      </el-col>
-      <el-col :span="16">
-        <el-row :gutter="12">
-          <el-col v-for="(item, index) in members" :key="item.number" :span="8">
-            <el-card shadow="always">
-              {{ item.number }} - {{ item.name }}
-              <video :id="'video' + item.number" style="background-color: black;"></video>
-              <div>
-                <el-button type="primary" plan size="mini" @click="makeCall(item, false)">音频呼叫</el-button>
-                <el-button type="primary" plan size="mini" @click="makeCall(item, true)">视频呼叫</el-button>
-              </div>
-            </el-card>
-          </el-col>
-        </el-row>
-      </el-col>
-      <el-col :span="4">
-        <div>
-          <h3>呼叫列表</h3>
+        <div class="bottom_right">
+          <div class="user_box">
+            <img src="~@/assets/image/head_photo.png" alt="">
+            <span class="name_txt">admin</span>
+          </div>
+          <div class="user_box">
+            <img src="~@/assets/image/exit.png" alt="">
+            <span class="exit_txt">退出</span>
+          </div>
         </div>
-        <div>
-          <el-checkbox-group v-model="checkedMember">
-            <el-checkbox v-for="(item, index) in groupMembers" :label="item.number" :key="item.number + '' + index">{{
-              item.number }} - {{ item.name }}</el-checkbox>
-          </el-checkbox-group>
+      </div>
+    </div>
+    <div class="bot_con">
+      <div class="left_con">
+        <div class="title_box">
+          <div class="tit_box" @click="changeTitle(1)">
+            <img v-show="activeTit == 1" src="~@/assets/image/list_act.png" alt="">
+            <img v-show="activeTit == 2" class="list_img" src="~@/assets/image/list_tit.png" alt="">
+            <div v-show="activeTit == 1" class="bot_bor"></div>
+          </div>
+          <div class="tit_box" @click="changeTitle(2)">
+            <img v-show="activeTit == 1" class="group_img" src="~@/assets/image/group_tit.png" alt="">
+            <img v-show="activeTit == 2" class="group_act" src="~@/assets/image/group_act.png" alt="">
+            <div v-show="activeTit == 2" class="bot_bor"></div>
+          </div>
         </div>
-        <!-- 其他操作 -->
-        <el-row :gutter="12">
-          <el-col :span="16">
-            <el-col :span="12">
-              <el-button>邀请进入</el-button>
-            </el-col>
-            <el-col :span="12">
-              <el-button>静音</el-button>
-            </el-col>
-          </el-col>
-          <el-col :span="8">
-            <el-col :span="24">
-              <el-button>移除会议</el-button>
-            </el-col>
-            <el-col :span="24">
-              <el-button>结束会议</el-button>
+        <div class="search_box">
+           <el-input
+              v-model="name"
+              clearable
+              placeholder="搜索关键字"
+              suffix-icon="el-icon-search"
+              @clear="searchHandle(1)"
+            ></el-input>
+        </div>
+        <div class="list_box" v-show="activeTit == 1">
+          <div class="list_item" :class="activeDevice == item.id ? 'dev_act' : item.isSelect == 1 ? 'sele_devi' : ''"
+          v-for="item in deviceData" :key="item.id" @mouseenter="enterDevice(item)" @mouseleave="leaveDevice">
+            <div class="left_bor" v-show="activeDevice == item.id"></div>
+            <div class="dev_img">
+              <img v-show="activeDevice !== item.id" src="~@/assets/image/device.png" alt="">
+              <img v-show="activeDevice == item.id" src="~@/assets/image/device_act.png" alt="">
+            </div>
+            <div class="device_name">{{item.name}}</div>
+            <div class="dev_btn" v-show="activeDevice == item.id">邀请</div>
+          </div>
+        </div>
+        <div class="btn_box" v-show="activeTit == 1">
+          <img src="~@/assets/image/add_btn.png" alt="">添加用户
+        </div>
+        <div class="tree_box" v-show="activeTit == 2">
+          <el-tree :data="treeData" node-key="id" :props="defaultProps" @node-click="handleNodeClick" :default-checked-keys="selectTreeNode">
+            <!-- selectTreeNode.map(item => item == data.id) ? 'select_node_item' : -->
+            <span class="custom-tree-node" @mouseenter="enterNode(node,data)" @mouseleave="leaveNode"
+             :class="activeNode == data.id ? 'active_node_item' :  ''" 
+            slot-scope="{ node, data }" >
+              <i v-if="node.level == 1" class="spread_node"></i>
+              <i v-if="node.level == 1" class="level_first" />
+              <i v-else-if="node.level == 2" class="level_second" :class="activeNode == data.id ? 'active_level_second' : ''" />
+              <span :class="node.level == 1 ? 'first_span' : node.level == 2 ? 'second_span' : ''">{{ data.label }}</span>
+              <span v-if="node.level == 1" class="btn_level">邀请</span>
+              <span v-if="activeNode == data.id" class="btn_level">邀请</span>
+            </span>
+          </el-tree>
+
+        </div>
+      </div>
+      <div class="cen_con">
+        <div class="cen_tit">
+          <img src="~@/assets/image/voice_tit.png" alt="">
+        </div>
+        <div class="bottom_cen" v-show="activeTit == 1">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <div class="bottom_item">
+                <div class="item_tit">终端设备名称——调度组1</div>
+                <div class="voice_con">
+                  <img src="~@/assets/image/voice_bag.png" alt="">
+                </div>
+                <div class="voice_btn">
+                  <img src="~@/assets/image/mute.png" alt="">
+                  <img class="hang_btn" src="~@/assets/image/hang.png" alt="">
+                </div>
+              </div>
             </el-col>
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
+            <el-col :span="8"><div class="bottom_item"></div></el-col>
+            <el-col :span="8"><div class="bottom_item"></div></el-col>
+            <el-col :span="8"><div class="bottom_item"></div></el-col>
+            <el-col :span="8"><div class="bottom_item"></div></el-col>
+            <el-col :span="8"><div class="bottom_item"></div></el-col>
+          </el-row>
+        </div>
+        <div class="group_cen" v-show="activeTit == 2">
+          <div class="group_tit">终端设备名称——调度组1</div>
+          <div class="group_voice">
+            <img src="~@/assets/image/voice_bag.png" alt="">
+          </div>
+          <div class="voice_btn">
+            <img src="~@/assets/image/mute.png" alt="">
+            <img class="hang_btn" src="~@/assets/image/hang.png" alt="">
+          </div>
+        </div>
+        <div class="bot_cen">
+          <img v-show="activeTit == 1" src="~@/assets/image/over.png" alt="">
+          <img v-show="activeTit == 1" class="exit" src="~@/assets/image/exit_voice.png" alt="">
+          <img v-show="activeTit == 2" src="~@/assets/image/finish.png" alt="">
+          <img v-show="activeTit == 2" class="exit" src="~@/assets/image/exit_speak.png" alt="">
+        </div>
+      </div>
+      <div class="right_con">
+        <div class="right_tit">
+          <img src="~@/assets/image/phone_tit.png" alt="">
+        </div>
+        <div class="phone_box">
+          <div class="phone_tit"><span class="point"></span> 当前通话</div>
+          <div class="phone_list">
+            <div class="phone_item" v-for="item in phoneList" :key="item.id" :class="activePhone == item.id ? 'active_phone' : ''"
+             @mouseenter="itemHover(item)" @mouseleave="leavePhone">
+              <div v-show="activePhone == item.id" class="left_item"></div>
+              <div class="time_box">{{item.time}}</div>
+              <div class="center_txt">
+                <img v-show="activePhone !== item.id" class="img" src="~@/assets/image/phone.png" alt="">
+                <img v-show="activePhone == item.id" class="img" src="~@/assets/image/phone_act.png" alt="">
+                <div>{{item.name}}</div>
+              </div>
+              <div v-show="activePhone == item.id" class="item_btn">请出</div>
+            </div>
+          </div>
+          <div class="miss_tit">
+            <span class="point"></span> 未接通话
+          </div>
+          <div class="miss_list">
+            <div class="miss_item">
+              <div class="miss_time">00:12:56</div>
+              <div class="miss_name">终端设备名称——调度组1</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-import { client, isRegisted, mylog } from "../../util/dispatch"
-
 export default {
   name: "alarmCenter",
   data() {
-    return {
-      //分组成员
-      groupData: [{
-        id: 1,
-        label: '一级 1',
-        children: [{
-          id: 4,
-          label: '二级 1-1',
-        }]
-      }, {
-        id: 2,
-        label: '一级 2',
-        children: [{
-          id: 5,
-          label: '二级 2-1'
+    return{
+      activeTit:1,
+      name:'',
+      activeDevice:'',
+      activeNode:'',
+      selectTreeNode:['002','009'],
+      activePhone:'',
+      deviceData:[
+        {id:'001',name:'终端设备名称1（1001）',isSelect:0},
+        {id:'002',name:'终端设备名称2（1002）',isSelect:1},
+        {id:'003',name:'终端设备名称3（1003）',isSelect:0},
+        {id:'004',name:'终端设备名称4（1004）',isSelect:0},
+        {id:'005',name:'终端设备名称5（1005）',isSelect:1},
+        {id:'006',name:'终端设备名称6（1006）',isSelect:0},
+        {id:'007',name:'终端设备名称7（1007）',isSelect:0},
+        {id:'008',name:'终端设备名称8（1008）',isSelect:1},
+        {id:'009',name:'终端设备名称9（1009）',isSelect:0},
+        {id:'010',name:'终端设备名称10（1010）',isSelect:0},
+        {id:'011',name:'终端设备名称11（1011）',isSelect:1},
+        {id:'012',name:'终端设备名称12（1012）',isSelect:0},
+        {id:'013',name:'终端设备名称13（1013）',isSelect:0},
+        {id:'014',name:'终端设备名称14（1014）',isSelect:0},
+        {id:'015',name:'终端设备名称15（1015）',isSelect:0},
+      ],
+      treeData: [{
+          id:'001',
+          label: '调度组名称1',
+          children: [
+            {
+              id:'002',
+              label: '终端设备名称1（1001）',
+            },
+            {
+              id:'003',
+              label: '终端设备名称2（1002）',
+            },
+            {
+              id:'004',
+              label: '终端设备名称3（1003）',
+            },
+            {
+              id:'005',
+              label: '终端设备名称4（1004）',
+            },
+          ]
         }, {
-          id: 6,
-          label: '二级 2-2'
-        }]
-      }, {
-        id: 3,
-        label: '一级 3',
-        children: [{
-          id: 7,
-          label: '二级 3-1'
+          id:'006',
+          label: '调度组名称2',
+          children: [
+            {
+              id:'007',
+              label: '终端设备名称1（2001）',
+            },
+            {
+              id:'008',
+              label: '终端设备名称2（2002）',
+            },
+            {
+              id:'009',
+              label: '终端设备名称3（2003）',
+            },
+            {
+              id:'010',
+              label: '终端设备名称4（2004）',
+            },
+          ]
         }, {
-          id: 8,
-          label: '二级 3-2'
-        }]
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      },
-      //对话成员
-      members: [
-        { number: '1001', name: '张三' }
-      ],
-      groupMembers: [
-        { number: '1001', name: '张三' }, { number: '1002', name: '张三2' }, { number: '1003', name: '张三3' }
+          id:'011',
+          label: '调度组名称1',
+          children: [
+            {
+              id:'012',
+              label: '终端设备名称1（3001）',
+            },
+            {
+              id:'013',
+              label: '终端设备名称2（3002）',
+            },
+            {
+              id:'014',
+              label: '终端设备名称3（3003）',
+            },
+            {
+              id:'015',
+              label: '终端设备名称4（3004）',
+            },
+          ]
+        }],
+      phoneList:[
+        {id:1,time:'00:12:23',name:'终端设备名称——调度组1'},
+        {id:2,time:'00:16:23',name:'终端设备名称——调度组2'},
+        {id:3,time:'00:01:23',name:'终端设备名称——调度组2'},
+        {id:4,time:'00:11:23',name:'终端设备名称——调度组2'},
       ],
-      checkedMember: [],
-      //通讯类型
-      type: '1',//1呼叫 2对讲 3会议
-      _conf: null,
-    };
+      timer:null,
+      time:'',
+      date:''
+    }
   },
   computed: {
-    ...mapGetters(["userInfo"]),
   },
   mounted() {
-    console.log(isRegisted)
+  },
+  created(){
+    this.getTime()
   },
   methods: {
-    /** 呼叫 */
-    makeCall(obj, isVideo) {
-      let mediaControl = document.getElementById('video' + obj.number);
-      client.makeCall(obj.number, mediaControl, isVideo).then((call) => {
-        this.setCallEventListener(call);
-        var state = this.convertCallstate(call.state);
-        mylog("call success callState: " + state);
-      }).catch((reason) => {
-        mylog("call fail");
-        mylog(JSON.stringify(reason));
-      });
+    fn(str) {
+      let num = null;
+      str >= 10 ? (num = str) : (num = "0" + str);
+      return num;
     },
-    //呼叫监听
-    setCallEventListener(call) {
-      call.callStateChange.on(this.onCallStateChange);
-      call.onBecomeConference.on((para) => {
-        mylog("当前单呼变成会议");
-        this._conf = para.changeToConference;
-        this._conf.stateChange.on((para) => {
-          console.log("_conf.stateChange" + JSON.stringify(para));
-        })
-      });
+    getTime() {
+      //获取当前时间
+      this.timer = setInterval(() => {
+        var date = new Date();
+        var year = date.getFullYear(); //当前年份
+        var month = date.getMonth(); //当前月份
+        var data = date.getDate(); //天
+        var hours = date.getHours(); //小时
+        var minute = date.getMinutes(); //分
+        var second = date.getSeconds(); //秒
+        this.day = date.getDay(); //获取当前星期几
+        this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second);
+        this.date = year + "/" + (month + 1) + "/" + data;
+      }, 1000);
     },
-    //状态change监听
-    onCallStateChange(param) {
-      var state = convertCallstate(param.state);
-      mylog("call callStateChange, number: " + param.sender.number + ", state: " + state + ", isVideo: " + param.sender.isVideo);
+    // 切换标题  通讯录/调度组
+    changeTitle(item){
+      this.activeTit = item
+    },
+    //选择设备
+    enterDevice(item){
+      if(item.isSelect == 1){
+        return
+      }
+      this.activeDevice = item.id
+    },
+    // 鼠标移出设备
+    leaveDevice(){
+      this.activeDevice = ''
+    },
+    // 鼠标进入树节点
+    enterNode(node,data){
+       if(node.level == 1){
+        return;
+      }else{
+        let tmp = this.selectTreeNode.find(item => item == data.id)
+        if(tmp){
+          return
+        }
+        this.activeNode = data.id
+      }
+    },
+    // 鼠标移出树节点
+    leaveNode(){
+      this.activeNode = ''
+    },
+    //鼠标进入通话记录
+    itemHover(item){
+      this.activePhone = item.id
+    },
+    //鼠标移出通话记录
+    leavePhone(){
+      this.activePhone = ''
+    },
+    // 点击树节点
+    handleNodeClick(data,node){
+     
     },
-    //监听状态转义
-    convertCallstate(state) {
-      var stateStr;
-      switch (state) {
-        case 1:
-          stateStr = "init";
-          break;
-        case 2:
-          stateStr = "normal";
-          break;
-        case 3:
-          stateStr = "callout";
-          break;
-        case 4:
-          stateStr = "incoming";
-          break;
-        case 5:
-          stateStr = "ringing";
-          break;
-        case 6:
-          stateStr = "connected";
-          break;
-        case 7:
-          stateStr = "terminal";
-          break;
-        case 8:
-          stateStr = "hold";
-          break;
-        case 9:
-          stateStr = "unhold";
-          break;
-        default:
-          break;
-      }
-      return stateStr;
-    }
   },
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.voice_box{
+  width: 19.2rem;
+  height: 10.8rem;
+  background: url("~@/assets/image/bag.png")  no-repeat;
+  position: absolute;
+
+  .top_header{
+    width: 100%;
+    height:1.2rem;
+    background: url("~@/assets/image/top.png")  no-repeat;
+    display: flex;
+    justify-content: space-between;
+
+    .left{
+      width: 50%;
+      .top_title{
+        background: url('~@/assets/image/title.png') no-repeat;
+        width: 4.22rem;
+        height: 0.6rem;
+        margin: 0.2rem 0 0 0.76rem;
+      }
+    }
+    .right{
+      width: 50%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .top_right{
+        width: 100%;
+        height: 50%;
+        display: flex;
+        color: #DCE3F1;
+        justify-content: flex-end;
+        padding-top: 0.28rem;
+        font-family: Microsoft YaHei;
+
+
+        .date_box{
+          font-size: 0.16rem;
+          font-family: Microsoft YaHei;
+          margin: 0.02rem 0.23rem 0 0;
+        }
+        .weather_box{
+          width: 0.66rem;
+          height: 0.44rem;
+          display: flex;
+          margin-top: -0.15rem;
+
+          img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .weather_txt{
+          font-size: 0.2rem;
+        }
+
+        .time_txt{
+          margin: 0 0.21rem 0 0.33rem;
+        }
+      }
+      .bottom_right{
+        width: 100%;
+        height: 50%;
+        display: flex;
+        justify-content: flex-end;
+        align-items: flex-end;
+
+        .user_box{
+          font-family: Microsoft YaHei;
+          color: #D6EFFF;
+          font-size: 0.16rem;
+          display: flex;
+          align-items: center;
+          height: 0.4rem;
+
+          .name_txt{
+            margin: 0 0.33rem 0 0.14rem;
+          }
+
+          .exit_txt{
+            margin: 0 0.24rem 0 0.09rem;
+          }
+        }
+      }
+    }
+  }
+
+  .bot_con{
+    width: 100%;
+    height: 9.24rem;
+    margin-top: 0.15rem;
+    display: flex;
+
+    .left_con{
+      width: 3.38rem;
+      height: 100%;
+      background: url("~@/assets/image/left_bag.png") no-repeat;
+      margin-left: 0.2rem;
+
+      .title_box{
+        display: flex;
+        margin-top: 0.33rem;
+        justify-content: space-around;
+
+        .tit_box{
+          height: 0.5rem;
+          display: flex;
+          align-items: center;
+          position: relative;
+          cursor: pointer;
+
+          .list_img{
+            height: 0.15rem;
+          }
+
+          .group_img{
+            height: 0.18rem;
+          }
+          .group_act{
+            height: 0.34rem;
+          }
+          .bot_bor{
+            width: 0.25rem;
+            height: 0.03rem;
+            background: #6CCDFF;
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            transform: translateX(-50%);
+          }
+        }
+      }
+      .search_box{
+          width: 2.8rem;
+          height: 0.35rem;
+          display: flex;
+          margin: 0 auto;
+          margin-top: 0.23rem;
+
+          /deep/ .el-input--suffix .el-input__inner{
+            background: rgba(3, 17, 40,0.6) !important;
+            border: 1px solid #176CE8 !important;
+            border-radius: 2px !important;
+            color:  #D6EFFF;
+            // box-shadow: inset 0px 0px 0.01rem 0.02rem rgba(65, 167, 255, 0.5);
+          }
+          /deep/.el-input__inner::placeholder {
+            color:  rgba(214, 239, 255,0.6);
+          }
+          //图标的颜色
+          /deep/ .el-input__icon {
+            color: #41A7FF !important;
+          }
+        }
+      .list_box{
+        width: 92%;
+        height: 6.6rem;
+        margin: 0 auto;
+        margin-top: 0.33rem;
+        overflow: auto;
+
+        .list_item{
+          width: 2.8rem;
+          height: 0.35rem;
+          cursor: pointer;
+          margin: 0 auto;
+          color: #D6EFFF;
+          position: relative;
+          margin-bottom: 0.15rem;
+
+          &.dev_act{
+            background: rgba(3, 17, 40,0.6);
+            border: 1px solid #176CE8;
+            border-radius: 2px;
+          }
+
+          &.sele_devi{
+            opacity: 0.4;
+          }
+
+          .left_bor{
+            width: 0.03rem;
+            height: 0.35rem;
+            background: #6CCDFF;
+            position: absolute;
+            left: -0.08rem;
+          }
+
+          .dev_img{
+            display: flex;
+            float: left;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            margin: 0 0.06rem 0 0.16rem;
+            img{
+              width: 0.28rem;
+              height: 0.28rem;
+            }
+          }
+          .device_name{
+            float: left;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            line-height: 0.35rem;
+          }
+          .dev_btn{
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            float: right;
+            width: 0.5rem;
+            height: 0.25rem;
+            margin-right: 0.05rem;
+            margin-top: 0.045rem;
+            background: #176CE8;
+            border-radius: 2px;
+            color: #fff;
+            text-align: center;
+            line-height: 0.25rem;
+          }
+        }
+      }
+      .list_box::-webkit-scrollbar{
+        width: 0.05rem;
+        height: 6.87rem;
+        background: rgba(23, 108, 232,0.4);
+        border-radius:0.03rem;
+      }
+      .list_box::-webkit-scrollbar-thumb{ 
+        display:block; 
+        margin:0 auto; 
+        width: 0.05rem;
+        background: rgba(108, 205, 255,0.6);
+        border-radius: 0.03rem;
+      }
+
+      .btn_box{
+        width: 1rem;
+        height: 0.3rem;
+        background: rgba(23, 108, 232,0.8);
+        border-radius: 0.04rem;
+        color:#D6EFFF;
+        font-size: 0.14rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto;
+        margin-top: 0.25rem;
+
+        img{
+          margin-right: 0.1rem;
+        }
+      }
+
+      .tree_box{
+        width: 92%;
+        height: 6.6rem;
+        margin: 0 auto;
+        margin-top: 0.33rem;
+        overflow: auto;
+
+        .el-tree{
+          background: transparent;
+          font-size: 0.14rem;
+          color: #fff;
+
+          /deep/.el-tree-node__content{
+            width: 2.8rem;
+            margin: 0 auto;
+            height: 0.35rem;
+            margin-bottom: 0.15rem;
+            padding: 0 !important;
+          }
+
+        .spread_node{
+          background: url("~@/assets/image/spread_btn.png");
+          width: 0.18rem;
+          height: 0.18rem;
+          display: inline-block;
+          background-size: 100% 100%;
+          float: left;
+          margin-top: 0.085rem;
+        }
+        .level_first {
+          background: url("~@/assets/image/tree.png");
+          width: 0.28rem;
+          height: 0.28rem;
+          display: inline-block;
+          background-size: 100% 100%;
+          float: left;
+          margin-top: 0.035rem;
+          margin-right: 0.05rem;
+        }
+        .level_second {
+          background: url("~@/assets/image/device.png");
+          width: 0.28rem;
+          height: 0.28rem;
+          display: inline-block;
+          background-size: 100% 100%;
+          float: left;
+          margin-top: 0.02rem;
+          margin-left: 0.16rem;
+          margin-right: 0.06rem;
+        }
+        .first_span{
+          color: #41A7FF;
+          line-height: 0.35rem;
+        }
+
+        .second_span{
+          color: #D6EFFF;
+          line-height: 0.35rem;
+        }
+
+        .btn_level{
+          display: inline-block;
+          width: 0.3rem;
+          width: 0.5rem;
+          height: 0.25rem;
+          background: #176CE8;
+          border-radius: 0.02rem;
+          text-align: center;
+          float: right;
+          margin: 0.05rem;
+          line-height: 0.25rem;
+        }
+
+        /deep/.is-expanded{
+          .spread_node{
+            transform: rotate(90deg);
+          }
+        }
+        /deep/.is-checked{
+          .custom-tree-node{
+            opacity: 0.4;
+          }
+        }
+        /deep/.el-tree-node.is-current>.el-tree-node__content{
+          background: transparent;
+        }
+
+        /deep/ .custom-tree-node{
+          width: 100%;
+          height: 0.35rem;
+          margin-top: 0.03rem;
+        }
+
+        /deep/ .active_node_item{
+          background: rgba(3, 17, 40,0.6);
+          border: 1px solid #176CE8;
+          border-radius: 0.02rem;
+          .second_span{
+            color: #41A7FF;
+          }
+
+          .active_level_second{
+            background: url("~@/assets/image/device_act.png");
+          }
+        }
+
+        /deep/ .select_node_item{
+          opacity: 0.4;
+        }
+
+        /deep/ .el-tree-node__content:hover{
+          background: transparent;
+        }
+        /deep/.el-icon-caret-right:before{
+          content: none;
+        }
+        /deep/ .el-tree-node.is-current>.el-tree-node__content{
+          color: #fff;
+        }
+
+        }
+      }
+      .tree_box::-webkit-scrollbar{
+        width: 0.05rem;
+        height: 6.87rem;
+        background: rgba(23, 108, 232,0.4);
+        border-radius:0.03rem;
+      }
+      .tree_box::-webkit-scrollbar-thumb{ 
+        display:block; 
+        margin:0 auto; 
+        width: 0.05rem;
+        background: rgba(108, 205, 255,0.6);
+        border-radius: 0.03rem;
+      }
+    }
+    
+
+    .cen_con{
+      width: 11.68rem;
+      height: 100%;
+      background: url("~@/assets/image/cen_bag.png") no-repeat;
+      margin: 0 0.2rem;
+
+      .cen_tit{
+        height: 0.37rem;
+        display: flex;
+        margin: 0.33rem 0 0 0.2rem;
+      }
+
+      .bottom_cen{
+        width: 11.2rem;
+        height: 7.35rem;
+        margin: 0 auto;
+
+        .bottom_item{
+          width: 3.6rem;
+          height: 2.25rem;
+          background: #233449;
+          margin-top: 0.2rem;
+          display: flex;
+          flex-direction: column;
+
+          .item_tit{
+            width:100%;
+            margin: 0.2rem 0 0 0.2rem;
+            font-size: 0.14rem;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #D6EFFF;
+          }
+          .voice_con{
+            width: 100%;
+            height: 0.18rem;
+            display: flex;
+            justify-content: center;
+            margin-top: 0.8rem;
+          }
+
+          .voice_btn{
+            display: flex;
+            justify-content: end;
+            margin-top: 0.37rem;
+
+            .hang_btn{
+              margin: 0 0.18rem 0 0.1rem;
+            }
+          }
+        }
+      }
+      .group_cen{
+        width: 11.2rem;
+        height: 7.35rem;
+        margin: 0 auto;
+        background: #233449;
+        margin-top: 0.2rem;
+        display: flex;
+        flex-direction: column;
+
+        .group_tit{
+          width: 100%;
+          font-size: 0.14rem;
+          margin: 0.2rem 0 0 0.2rem;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #D6EFFF;
+        }
+
+        .group_voice{
+          width: 100%;
+          display: flex;
+          margin-top: 3.18rem;
+          justify-content: center;
+        }
+
+        .voice_btn{
+          display: flex;
+          justify-content: end;
+          margin-top: 3.07rem;
+
+          .hang_btn{
+            margin: 0 0.18rem 0 0.1rem;
+          }
+        }
+      }
+
+      .bot_cen{
+        width: 100%;
+        height: 0.44rem;
+        margin-top: 0.3rem;
+        display: flex;
+        justify-content: end;
+
+        .exit{
+          margin: 0 0.3rem;
+        }
+      }
+    }
+    .right_con{
+      width: 3.36rem;
+      height: 100%;
+      background: url("~@/assets/image/right_bag.png") no-repeat;
+
+      .right_tit{
+        display: flex;
+        margin-top: 0.43rem;
+        margin-left: 0.28rem;
+      }
+
+      .phone_box{
+        width: 2.8rem;
+        height: 3rem;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+
+        .phone_tit{
+          font-size: 0.18rem;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #3593F8;
+          display: flex;
+          align-items: center;
+          margin: 0.15rem 0 0 0.18rem;
+
+          .point{
+            width: 0.1rem;
+            height: 0.1rem;
+            display: inline-block;
+            background: #3593F8;
+            border-radius: 50%;
+            margin-right: 0.04rem;
+          }
+        }
+
+        .phone_list{
+          width: 100%;
+          margin-top: 0.16rem;
+          padding-bottom: 0.1rem;
+          border-bottom: 1px dashed #2C81DB;
+          
+          
+          .phone_item{
+            width: 100%;
+            height: 0.35rem;
+            margin-bottom: 0.15rem;
+            cursor: pointer;
+            position: relative;
+
+            
+
+            &.active_phone{
+              background: rgba(3, 17, 40,0.6);
+              border: 1px solid #176CE8;
+              border-radius: 0.02rem;
+            }
+
+            .time_box{
+              height: 100%;
+              float: left;
+              display: flex;
+              align-items: center;
+              font-size: 0.14rem;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #D6EFFF;
+              margin-left: 0.15rem;
+            }
+
+            .center_txt{
+              float: left;
+              height: 100%;
+              display: flex;
+              align-items: center;
+              font-size: 0.14rem;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #D6EFFF;
+
+              .img{
+                margin: 0 0.08rem 0 0.06rem;
+              }
+            }
+
+            .left_item{
+              width: 0.03rem;
+              height: 0.35rem;
+              background: #6CCDFF;
+              position: absolute;
+              left: -0.08rem;
+            }
+
+            .item_btn{
+              width: 0.5rem;
+              height: 0.25rem;
+              background: #D83030;
+              font-size: 0.14rem;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #FFFFFF;
+              position: absolute;
+              right: 0.05rem;
+              top: 50%;
+              transform: translateY(-50%);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              border-radius: 0.02rem;
+            }
+          }
+        }
+
+        .miss_tit{
+           font-size: 0.18rem;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #E8991D;
+          display: flex;
+          align-items: center;
+          margin: 0.3rem 0 0 0.18rem;
+
+          .point{
+            width: 0.1rem;
+            height: 0.1rem;
+            display: inline-block;
+            background: #E8991D;
+            border-radius: 50%;
+            margin-right: 0.04rem;
+          }
+        }
+
+        .miss_list{
+          width: 100%;
+          margin-top: 0.16rem;
+
+          .miss_item{
+            width: 100%;
+            height: 0.35rem;
+            margin-bottom: 0.15rem;
+            cursor: pointer;
+            opacity: 0.4;
+
+            .miss_time{
+              height: 100%;
+              float: left;
+              display: flex;
+              align-items: center;
+              font-size: 0.14rem;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #D6EFFF;
+              margin-left: 0.15rem;
+              margin-right: 0.2rem;
+            }
+
+            .miss_name{
+              float: left;
+              height: 100%;
+              display: flex;
+              align-items: center;
+              font-size: 0.14rem;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #D6EFFF;
+            }
+          }
+        }
+
+        
+      }
+    }
+  }
+}
+</style>