From 0eda5773d5a5b8c7c895de614d660c53f38149c0 Mon Sep 17 00:00:00 2001
From: jinna <jn517618@163.com>
Date: Wed, 26 Jul 2023 11:37:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=BE=A4=E7=BB=84=E5=AF=B9?=
 =?UTF-8?q?=E8=AE=B2=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dispatch/index.vue | 479 ++++++++++++++++++++++++++++++-----
 1 file changed, 414 insertions(+), 65 deletions(-)

diff --git a/src/views/dispatch/index.vue b/src/views/dispatch/index.vue
index 69e8a3b..76f3bb7 100644
--- a/src/views/dispatch/index.vue
+++ b/src/views/dispatch/index.vue
@@ -58,7 +58,7 @@
             </div>
             <div class="device_name" :class="activeDevice == item.id ? 'act_dev_name' : ''">{{item.name}}</div>
             <div class="dev_btn_box">
-              <div class="dev_btn" @click="inviteUser(item)" v-show="activeDevice == item.id">邀请</div>
+              <div class="dev_btn" @click="inviteUser(item)" v-show="activeDevice == item.id && !isIntercom">邀请</div>
               <div class="dev_btn del_btn" v-show="activeDevice == item.id" @click="deleteUser(item)">删除</div>
             </div>
             
@@ -68,17 +68,19 @@
           <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">
+          <el-tree ref="tree" :data="treeData" node-key="id" :props="defaultProps" @node-click="handleNodeClick" 
+          :default-checked-keys="selectTreeNode" :default-expanded-keys="defaultExpandIds"    >
+          <!-- @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" -->
             <!-- 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' :  ''" 
+             :class="[activeNode == data.id ? 'active_node_item' :  '',node.level == 1 ? 'first_node' : '']" 
             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 v-if="node.level == 1 &&  !isGroup" @click.stop="inviteGroup(data)" class="btn_level">邀请</span>
+              <!-- <span v-if="activeNode == data.id" class="btn_level">邀请</span> -->
             </span>
           </el-tree>
 
@@ -88,11 +90,11 @@
         <div class="cen_tit">
           <img src="~@/assets/image/voice_tit.png" alt="">
         </div>
-        <div class="bottom_cen" v-show="inviteList.length > 1">
+        <div class="bottom_cen" v-show="inviteList.length > 1 && !isGroup">
          
           <el-row :gutter="20">
             <el-col :span="8" v-for="item in inviteList" :key="item.id">
-              <video class="bottom_item" id="item.id">
+              <video class="bottom_item" :id="'video' + item.id">
                 <!-- <div class="item_tit">终端设备名称——调度组1</div>
                 <div class="voice_con">
                   <img src="~@/assets/image/voice_bag.png" alt="">
@@ -110,7 +112,7 @@
             <el-col :span="8"><div class="bottom_item"></div></el-col> -->
           </el-row>
         </div>
-        <div class="group_cen" v-show="inviteList.length == 1">
+        <div class="group_cen" v-show="inviteList.length == 1 || isGroup">
           <video class="group_video" src="" id="video">
             <!-- <div class="group_tit">{{inviteList.length == 1 ? inviteList[0].name : ''}}</div>
             <div class="group_voice">
@@ -122,11 +124,15 @@
             </div> -->
           </video>
         </div>
-        <div class="bot_cen">
-          <img v-show="inviteList.length > 1" src="~@/assets/image/over.png" alt="">
-          <img v-show="inviteList.length > 1" class="exit" src="~@/assets/image/exit_voice.png" alt="">
-          <img v-show="inviteList.length == 1" src="~@/assets/image/finish.png" alt="">
-          <img v-show="inviteList.length == 1" class="exit" src="~@/assets/image/exit_speak.png" alt="">
+        <div class="bot_cen" v-show="activeTit == 1">
+          <img v-show="(inviteList.length > 1 && !isIntercom) || (inviteList.length == 1 && isMetting)" @click="overMeeting" src="~@/assets/image/over.png" alt="">
+          <img v-show="(inviteList.length > 1 && !isIntercom) || (inviteList.length == 1 && isMetting)" @click="exitMeeting" class="exit" src="~@/assets/image/exit_voice.png" alt="">
+          <img v-show="(inviteList.length == 1 && isIntercom) || (inviteList.length == 1 && !isMetting)" @click="overTalk" src="~@/assets/image/finish.png" alt="">
+          <img v-show="(inviteList.length == 1 && isIntercom) || (inviteList.length == 1 && !isMetting)" @click="exitTalk" class="exit" src="~@/assets/image/exit_speak.png" alt="">
+        </div>
+        <div class="bot_cen" v-show="activeTit == 2">
+          <img v-show="inviteList.length !== 0"  @click="overTalk" src="~@/assets/image/finish.png" alt="">
+          <img v-show="inviteList.length !== 0"  @click="exitTalk" class="exit" src="~@/assets/image/exit_speak.png" alt="">
         </div>
       </div>
       <div class="right_con">
@@ -136,7 +142,7 @@
         <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' : ''"
+            <div class="phone_item" v-for="item in inviteList" :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>
@@ -145,10 +151,10 @@
                 <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 @click="deletePhone(item)" v-show="activePhone == item.id && inviteList.length !== 1 && activeTit == 1" class="item_btn">请出</div>
             </div>
           </div>
-          <div class="miss_tit">
+          <!-- <div class="miss_tit">
             <span class="point"></span> 未接通话
           </div>
           <div class="miss_list">
@@ -156,7 +162,7 @@
               <div class="miss_time">00:12:56</div>
               <div class="miss_name">终端设备名称——调度组1</div>
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
@@ -165,7 +171,8 @@
       :visible.sync="dialogVisible"
       width="80%"
       custom-class="user_dialog"
-      :before-close="handleClose">
+      :close-on-click-modal="false"
+      :close-on-press-escape="false">
        <el-table
             :data="userData"
             :key="index"
@@ -209,7 +216,7 @@
                 />
               </template>
             </el-table-column>
-            <el-table-column  width="286" align="center" prop="" label="密码">
+            <el-table-column  width="260" align="center" prop="" label="密码">
               <template slot-scope="scope">
                 <el-input
                   v-model="scope.row.password"
@@ -246,6 +253,7 @@
                   v-model="scope.row.groupNum"
                   clearable
                   filterable
+                  multiple 
                   placeholder="请选择调度组"
                   size="medium"
                 >
@@ -269,7 +277,7 @@
                 />
               </template>
             </el-table-column>
-            <el-table-column  width="286" align="center" prop="" label="类型">
+            <el-table-column  width="200" align="center" prop="" label="类型">
               <template slot-scope="scope">
                 <el-input
                   v-model="scope.row.type"
@@ -281,9 +289,9 @@
                 />
               </template>
             </el-table-column>
-            <el-table-column  width="286" align="center" prop="" label="是否录音">
+            <el-table-column  width="150" align="center" prop="" label="是否录音">
               <template slot-scope="scope">
-                <el-select
+                <!-- <el-select
                   style="width: 90%"
                   v-model="scope.row.isRecord"
                   clearable
@@ -293,12 +301,19 @@
                 >
                   <el-option label="是" :value="1" />
                   <el-option label="否" :value="0" />
-                </el-select>
+                </el-select> -->
+                <el-switch
+                  v-model="scope.row.isRecord"
+                  active-text="是"
+                  inactive-text="否"
+                  :active-value="1"
+                  :inactive-value="0">
+                </el-switch>
               </template>
             </el-table-column>
-            <el-table-column  width="286" align="center" prop="" label="是否录像">
+            <el-table-column  width="150" align="center" prop="" label="是否录像">
               <template slot-scope="scope">
-                <el-select
+                <!-- <el-select
                   style="width: 90%"
                   v-model="scope.row.isVideo"
                   clearable
@@ -308,7 +323,14 @@
                 >
                   <el-option label="是" :value="1" />
                   <el-option label="否" :value="0" />
-                </el-select>
+                </el-select> -->
+                <el-switch
+                  v-model="scope.row.isVideo"
+                  active-text="是"
+                  inactive-text="否"
+                  :active-value="1"
+                  :inactive-value="0">
+                </el-switch>
               </template>
             </el-table-column>
             <el-table-column  width="286" align="center" prop="" label="经度">
@@ -353,24 +375,41 @@
         <el-button type="primary" @click="userSubmit">确 定</el-button>
       </span>
     </el-dialog>
+    <el-dialog
+      title="请确认以哪种方式邀请该人员："
+      :visible.sync="dialogCall"
+      custom-class="call_dialog"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      width="30%">
+      <div class="call_btn_box">
+         <el-button @click="clickIntercom">对 讲</el-button>
+        <el-button style="margin-left:0.5rem;" @click="audioCall">音频呼叫</el-button>
+        <el-button style="margin-left:0.5rem;" type="primary" @click="videoCall">视频呼叫</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import {getGroupList,deleteUser,addUser} from "@/api/dispatch/dispatch"
+import { client, isRegisted, mylog } from "../../util/dispatch"
+
 export default {
   name: "alarmCenter",
   data() {
     return{
       activeTit:1,
       name:'',
+      dialogCall:false,
       activeDevice:'',
       activeNode:'',
-      selectTreeNode:['002','009'],
+      selectTreeNode:[],
       activePhone:'',
       dialogVisible:false,
       deviceData:[],
       isSroll:false,
+      isMetting:false,
       treeData: [{
           id:'001',
           label: '调度组名称1',
@@ -466,33 +505,40 @@ export default {
       groupList:[],
      
       listData:[
-        {id:'001',name:'终端设备名称1（1001）',isSelect:0},
-        {id:'002',name:'终端设备名称2（1002）',isSelect:0},
-        {id:'003',name:'终端设备名称3（1003）',isSelect:0},
-        {id:'004',name:'终端设备名称4（1004）',isSelect:0},
-        {id:'005',name:'终端设备名称5（1005）',isSelect:0},
-        {id:'006',name:'终端设备名称6（1006）',isSelect:0},
-        {id:'007',name:'终端设备名称7（1007）',isSelect:0},
-        {id:'008',name:'终端设备名称8（1008）',isSelect:0},
-        {id:'009',name:'终端设备名称9（1009）',isSelect:0},
-        {id:'010',name:'终端设备名称10（1010）',isSelect:0},
-        {id:'011',name:'终端设备名称11（1011）',isSelect:0},
-        {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},
-        {id:'016',name:'终端设备名称16（1016）',isSelect:0},
-        {id:'017',name:'终端设备名称17（1017）',isSelect:0},
-        {id:'018',name:'终端设备名称18（1018）',isSelect:0},
-        {id:'019',name:'终端设备名称19（1019）',isSelect:0},
-        {id:'020',name:'终端设备名称20（1020）',isSelect:0},
-        {id:'021',name:'终端设备名称21（1021）',isSelect:0},
-        {id:'022',name:'终端设备名称22（1022）',isSelect:0},
-        {id:'023',name:'终端设备名称23（1023）',isSelect:0},
-        {id:'024',name:'终端设备名称24（1024）',isSelect:0},
+        {id:'1001',name:'终端设备名称1（1001）',isSelect:0},
+        {id:'1002',name:'终端设备名称2（1002）',isSelect:0},
+        {id:'1003',name:'终端设备名称3（1003）',isSelect:0},
+        {id:'1004',name:'终端设备名称4（1004）',isSelect:0},
+        {id:'1005',name:'终端设备名称5（1005）',isSelect:0},
+        {id:'1006',name:'终端设备名称6（1006）',isSelect:0},
+        {id:'1007',name:'终端设备名称7（1007）',isSelect:0},
+        {id:'1008',name:'终端设备名称8（1008）',isSelect:0},
+        {id:'1009',name:'终端设备名称9（1009）',isSelect:0},
+        {id:'1010',name:'终端设备名称10（1010）',isSelect:0},
+        {id:'1011',name:'终端设备名称11（1011）',isSelect:0},
+        {id:'1012',name:'终端设备名称12（1012）',isSelect:0},
+        {id:'1013',name:'终端设备名称13（1013）',isSelect:0},
+        {id:'1014',name:'终端设备名称14（1014）',isSelect:0},
+        {id:'1015',name:'终端设备名称15（1015）',isSelect:0},
+        {id:'1016',name:'终端设备名称16（1016）',isSelect:0},
+        {id:'1017',name:'终端设备名称17（1017）',isSelect:0},
+        {id:'1018',name:'终端设备名称18（1018）',isSelect:0},
+        {id:'1019',name:'终端设备名称19（1019）',isSelect:0},
+        {id:'1020',name:'终端设备名称20（1020）',isSelect:0},
+        {id:'1021',name:'终端设备名称21（1021）',isSelect:0},
+        {id:'1022',name:'终端设备名称22（1022）',isSelect:0},
+        {id:'1023',name:'终端设备名称23（1023）',isSelect:0},
+        {id:'1024',name:'终端设备名称24（1024）',isSelect:0},
       ],
       startIndex:0,
       current:1,
+      callItem:null,
+      _intercom:null,
+      _conf:null,
+      _call:null,
+      isIntercom:false,//通讯录是否发起对讲
+      isGroup:false, //是否已经邀请了群组
+      defaultExpandIds: [] // 这里存放要默认展开的节点 id
     }
   },
   computed: {
@@ -500,6 +546,9 @@ export default {
   mounted() {
   },
   created(){
+    this.treeData.map(item =>{
+      this.defaultExpandIds.push(item.id)
+    })
     this.getTime();
     // this.load()
     this.getGroupData()
@@ -533,21 +582,231 @@ export default {
     },
     // 邀请人员
     inviteUser(row){
-      
-      this.$confirm('确定要邀请该用户吗?', '提示', {
+      if(this.inviteList.length == 0){
+        this.dialogCall = true; //打开邀请方式弹窗
+        this.callItem = row; //当前邀请人员
+      }else{
+        this.$confirm('确定要邀请该用户吗?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
-          row.isSelect = 1
+          row.isSelect = 1;
+          this.isMetting = true; //更改为会议状态
           this.deviceData.find(item => item.id == row.id).isSelect = 1;
-          this.inviteList.push(row)
-        }).catch(() => {
-          // this.$message({
-          //   type: 'info',
-          //   message: '已取消删除'
-          // });          
-        });
+          this.inviteList.push(row);
+          this.callItem = row;
+          this.makeCall()
+        })
+      }
+    },
+
+    // 邀请群组
+    inviteGroup(row){
+      console.log(row)
+      this.$confirm('确定要邀请该群组吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.isGroup = true;
+        row.children.map(item => {
+          this.selectTreeNode.push(item.id)
+          this.inviteList.push({
+            id:item.id,
+            name:item.label
+          })
+        })
+       
+        this.$nextTick(() => {
+          let audio = document.getElementById('video') //获取媒体控件
+          this.$refs.tree.setCheckedKeys(this.selectTreeNode); //把当前选择的key设置到el-tree中
+          client.startIntercom(row.id, audio).then((conf) => { //发起群组对讲
+                this._intercom = conf;
+                setListener();
+                mylog("startintercom success");
+            }).catch((error) => {
+                mylog("startIntercom fail: " + JSON.stringify(error));
+            })
+        })
+        
+      })
+      
+    },
+    
+     /** 呼叫 */
+    makeCall(obj, isVideo) {
+      let mediaControl = null;
+      this.$nextTick(() =>{
+        if(this.inviteList.length == 1){ //如果只邀请一人时，进行呼叫
+          this.isMetting = false;
+           mediaControl = document.getElementById('video'); //获取媒体控件
+           client.makeCall(this.callItem.id, mediaControl, isVideo).then((call) => { //发起呼叫
+            this._call = call
+           
+          }).catch((reason) => {
+            mylog("call fail");
+            mylog(JSON.stringify(reason));
+          });
+        }else if(this.inviteList.length == 2){ //邀请一人后，在邀请别人时，更改状态为会议
+          this.isMetting = true;
+          // mediaControl = document.getElementById('video' + this.callItem.id);
+          
+          this._call.addMember(this.callItem.id); //呼叫邀请人员加入
+           this.setCallEventListener(call); //呼叫监听
+            var state = this.convertCallstate(call.state);
+            mylog("call success callState: " + state);
+         
+        }else{ //邀请成员超过两人时，状态已更改为会议，使用会议邀请成员
+          this._conf.add(this.callItem.id); //会议邀请人员
+        }
+        
+      })
+      
+    },
+     //呼叫监听
+    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;
+    },
+    // 对讲
+    clickIntercom(){
+      this.$nextTick(() =>{
+        this.isIntercom = true;
+        this.isMetting = false
+        this.dialogCall = false;
+        this.callItem.isSelect = 1;
+        this.deviceData.find(item => item.id == this.callItem.id).isSelect = 1;
+        this.inviteList.push(this.callItem);
+        let audio = document.getElementById('video') //获取媒体控件
+        client.startTempIntercom([this.callItem.id],audio,"").then((conf) => { //发起临时对讲
+          this._intercom = conf;
+          setListener();
+          mylog("startintercom success:" + conf.groupNumber);
+        }).catch((error)=>{
+          mylog("startIntercomfail:" + JSON.stringify(error));
+        })
+      })
+      
+    },
+    // 音频呼叫
+    audioCall(){
+      this.isIntercom = false;
+      this.callItem.isSelect = 1;
+      this.deviceData.find(item => item.id == this.callItem.id).isSelect = 1;
+      this.inviteList.push(this.callItem);
+      this.dialogCall = false;
+      this.makeCall(this.callItem,true)
+    },
+    // 视频呼叫
+    videoCall(){
+      this.callItem.isSelect = 1;
+      this.isIntercom = false;
+      this.deviceData.find(item => item.id == this.callItem.id).isSelect = 1;
+      this.inviteList.push(this.callItem);
+      this.dialogCall = false;
+      this.makeCall(this.callItem,false)
+    },
+
+    // 结束会议
+    overMeeting(){
+      this.deviceData.map(item => item.isSelect = 0);
+      this.inviteList = [];
+      this._conf.end() //结束会议
+    },
+    // 退出会议
+    exitMeeting(){
+      this.deviceData.map(item => item.isSelect = 0);
+      this.inviteList = [];
+      this._conf.exit() //退出会议
+    },
+    // 结束对讲
+    overTalk(){
+      console.log(this.isIntercom,this.isGroup)
+      if(this.isIntercom){ //通讯录对讲
+        this.deviceData.map(item => item.isSelect = 0);
+        this.inviteList = [];
+        this.isIntercom = false;
+        this._intercom.end()
+      }else if(this.isGroup){ //群组对讲
+        this.inviteList = [];
+        this.isGroup = false;
+        this.selectTreeNode = [];
+        this.$refs.tree.setCheckedKeys(this.selectTreeNode);
+        this._intercom.end()
+      }else{ //通讯录呼叫
+        this.deviceData.map(item => item.isSelect = 0);
+        this.inviteList = [];
+        this._call.hangup();
+      }
+      
+    },
+    // 退出对讲
+    exitTalk(){
+      if(this.isIntercom){ //通讯录对讲
+        this.deviceData.map(item => item.isSelect = 0);
+        this.inviteList = [];
+        this.isIntercom = false;
+        this._intercom.exit();
+      }else if(this.isGroup){ //群组对讲
+        this.inviteList = [];
+        this.selectTreeNode = [];
+        this.isGroup = false;
+        this.$refs.tree.setCheckedKeys(this.selectTreeNode);
+        this._intercom.exit()
+      }else{ //通讯录呼叫
+        this.deviceData.map(item => item.isSelect = 0);
+        this.inviteList = [];
+        this._call.hangup(); //挂断呼叫
+      }
+      
     },
     // 无限滚动列表
     load(){
@@ -594,6 +853,27 @@ export default {
           // });          
         });
       
+    },
+    // 通话记录请出
+    deletePhone(row){
+      this.$confirm('确定要请出该用户吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log(this.isMetting)
+        if(this.inviteList.length >= 2){
+          this.inviteList = this.inviteList.filter(item => item.id !== row.id);
+          this.deviceData.find(item => item.id == row.id).isSelect = 0;
+          this._conf.remove(row.id)
+        }else{
+           this.inviteList = this.inviteList.filter(item => item.id !== row.id);
+          this.deviceData.find(item => item.id == row.id).isSelect = 0;
+          this._call.hangup() //挂断呼叫
+        }
+      })
+      
+      
     },
     // 批量添加用户
     addUser(){
@@ -936,7 +1216,7 @@ export default {
             right: 0.05rem;
             display: flex;
             align-items: center;
-            justify-content: space-between;
+            justify-content: end;
           
             .dev_btn{
               font-size: 14px;
@@ -955,6 +1235,7 @@ export default {
 
               &.del_btn{
                 background: #D83030;
+                margin-left: 0.05rem;
               }
             }
           }
@@ -1076,11 +1357,19 @@ export default {
           .custom-tree-node{
             opacity: 0.4;
           }
+
+          .first_node{
+            opacity: 1;
+          }
         }
         /deep/.el-tree-node.is-current>.el-tree-node__content{
           background: transparent;
         }
 
+        /deep/ .el-tree-node:focus>.el-tree-node__content {
+          background-color: transparent;
+        }
+
         /deep/ .custom-tree-node{
           width: 100%;
           height: 0.35rem;
@@ -1145,9 +1434,15 @@ export default {
       }
 
       .bottom_cen{
-        width: 11.2rem;
+        width: 11.35rem;
         height: 7.35rem;
         margin: 0 auto;
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        .el-col{
+          margin-bottom: 0;
+        }
 
         .bottom_item{
           width: 3.6rem;
@@ -1184,6 +1479,20 @@ export default {
           }
         }
       }
+
+      .bottom_cen::-webkit-scrollbar{
+        width: 0.05rem;
+        height: 7.35rem;
+        background: rgba(23, 108, 232,0.4);
+        border-radius:0.03rem;
+      }
+      .bottom_cen::-webkit-scrollbar-thumb{ 
+        display:block; 
+        margin:0 auto; 
+        width: 0.05rem;
+        background: rgba(108, 205, 255,0.6);
+        border-radius: 0.03rem;
+      }
       .group_cen{
         width: 11.2rem;
         height: 7.35rem;
@@ -1228,12 +1537,16 @@ export default {
         
       }
 
+
       .bot_cen{
         width: 100%;
         height: 0.44rem;
         margin-top: 0.3rem;
         display: flex;
         justify-content: end;
+        img{
+          cursor: pointer;
+        }
 
         .exit{
           margin: 0 0.3rem;
@@ -1253,10 +1566,12 @@ export default {
 
       .phone_box{
         width: 2.8rem;
-        height: 3rem;
+        height: 7.6rem;
         margin: 0 auto;
         display: flex;
         flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
 
         .phone_tit{
           font-size: 0.18rem;
@@ -1285,7 +1600,7 @@ export default {
           
           
           .phone_item{
-            width: 100%;
+            width: 99%;
             height: 0.35rem;
             margin-bottom: 0.15rem;
             cursor: pointer;
@@ -1412,6 +1727,20 @@ export default {
 
         
       }
+
+      .phone_box::-webkit-scrollbar{
+        width: 0.05rem;
+        height: 7.35rem;
+        background: rgba(23, 108, 232,0.4);
+        border-radius:0.03rem;
+      }
+      .phone_box::-webkit-scrollbar-thumb{ 
+        display:block; 
+        margin:0 auto; 
+        width: 0.05rem;
+        background: rgba(108, 205, 255,0.6);
+        border-radius: 0.03rem;
+      }
     }
   }
 }
@@ -1432,6 +1761,26 @@ export default {
     }
   }
 
+  .call_dialog{
+    .el-dialog__header{
+      display: flex;
+    }
+
+    .dialog-footer{
+      height: 0.45rem;
+      display: flex;
+      justify-content: end;
+    }
+
+    .call_btn_box{
+      width: 100%;
+      height: 1rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
   .el-message .el-icon-warning{
     font-size: 0.16rem;
   }