You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1957 lines
58 KiB
1957 lines
58 KiB
<template> |
|
<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> |
|
<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> |
|
</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> |
|
<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" v-infinite-scroll="load" :infinite-scroll-disabled="isSroll"> |
|
<div class="list_item" :class="activeDevice == item.id ? 'dev_act' : item.isSelect == 1 ? 'sele_devi' : !item.online ? '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" :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 && !isIntercom && item.online">邀请</div> |
|
<div class="dev_btn del_btn" v-show="activeDevice == item.id" @click="deleteUser(item)">删除</div> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
<div class="btn_box" v-show="activeTit == 1" @click="addUser"> |
|
<img src="~@/assets/image/add_btn.png" alt="">添加用户 |
|
</div> |
|
<div class="tree_box" v-show="activeTit == 2"> |
|
<el-tree ref="tree" :data="treeData" node-key="id" :props="defaultProps" @node-click="handleNodeClick" |
|
:default-checked-keys="selectTreeNode" :default-expanded-keys="defaultExpandIds" :load="loadNode" |
|
lazy > |
|
<!-- @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" --> |
|
<!-- selectTreeNode.map(item => item == data.groupNum) ? 'select_node_item' : --> |
|
<span class="custom-tree-node" @mouseenter="enterNode(node,data)" @mouseleave="leaveNode" |
|
:class="[activeNode == data.groupNum ? '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.groupNum ? 'active_level_second' : ''" /> |
|
<span :class="node.level == 1 ? 'first_span' : node.level == 2 ? 'second_span' : ''">{{ data.groupName }}</span> |
|
<span v-if="node.level == 1 && !isGroup" @click.stop="inviteGroup(data)" class="btn_level">邀请</span> |
|
<!-- <span v-if="activeNode == data.groupNum" 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="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="'video' + item.id"> |
|
<!-- <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> --> |
|
</video> |
|
</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-col :span="8"><div class="bottom_item"></div></el-col> --> |
|
</el-row> |
|
</div> |
|
<div class="group_cen" v-show="inviteList.length == 1 || isGroup"> |
|
<video id="video1" class="group_video"> |
|
<p>Your browser doesn't support HTML5 video.</p> |
|
<!-- <div class="group_tit">{{inviteList.length == 1 ? inviteList[0].name : ''}}</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> --> |
|
</video> |
|
<!-- <video id="video2" style="background-color: black;"> |
|
<p>Your browser doesn't support HTML5 video.</p> |
|
</video> --> |
|
</div> |
|
<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"> |
|
<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 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> |
|
<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 @click="deletePhone(item)" v-show="activePhone == item.id && inviteList.length !== 1 && activeTit == 1" 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> |
|
<el-dialog |
|
title="添加用户" |
|
:visible.sync="dialogVisible" |
|
width="80%" |
|
custom-class="user_dialog" |
|
:close-on-click-modal="false" |
|
:close-on-press-escape="false"> |
|
<el-table |
|
:data="userData" |
|
:key="index" |
|
border |
|
max-height="424" |
|
style=" |
|
margin:0 auto; |
|
margin-bottom: 0.3rem; |
|
width: 100%; |
|
" |
|
header-cell-style="background-color:#fafafa;font-size:12px;color:black" |
|
> |
|
<el-table-column width="63px" fixed> |
|
<template slot="header"> |
|
<el-button |
|
circle |
|
size="small" |
|
type="primary" |
|
icon="el-icon-plus" |
|
@click="addPeople()" |
|
/> |
|
</template> |
|
<template slot-scope="scope"> |
|
<el-button |
|
circle |
|
size="small" |
|
type="danger" |
|
icon="el-icon-delete" |
|
@click="removePeople(scope.$index, scope.row,scope)" |
|
/> |
|
</template> |
|
</el-table-column> |
|
<el-table-column fixed prop="" label="账号" width="286" align="center"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
v-model="scope.row.employeeId" |
|
clearable |
|
placeholder="账号" |
|
size="medium" |
|
style="width: 90%; margin-left: 5%" |
|
/> |
|
</template> |
|
</el-table-column> |
|
<el-table-column width="260" align="center" prop="" label="密码"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
v-model="scope.row.password" |
|
clearable |
|
placeholder="密码" |
|
size="medium" |
|
style="width: 90%; margin-left: 5%" |
|
/> |
|
</template> |
|
</el-table-column> |
|
<el-table-column width="120" align="center" prop="" label="等级"> |
|
<template slot-scope="scope"> |
|
<el-select |
|
style="width: 90%" |
|
v-model="scope.row.employeeLevel" |
|
clearable |
|
filterable |
|
placeholder="请选择等级" |
|
size="medium" |
|
> |
|
<el-option |
|
v-for="(item, index) in levelList" |
|
:key="index" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select> |
|
</template> |
|
</el-table-column> |
|
<el-table-column width="286" align="center" prop="" label="调度组"> |
|
<template slot-scope="scope"> |
|
<el-select |
|
style="width: 90%" |
|
v-model="scope.row.groupNum" |
|
clearable |
|
filterable |
|
multiple |
|
placeholder="请选择调度组" |
|
size="medium" |
|
> |
|
<el-option |
|
v-for="(item, index) in groupList" |
|
:key="index" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select> |
|
</template> |
|
</el-table-column> |
|
<el-table-column width="286" align="center" prop="" label="名称"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
v-model="scope.row.name" |
|
clearable |
|
placeholder="名称" |
|
size="medium" |
|
style="width: 90%; margin-left: 5%" |
|
/> |
|
</template> |
|
</el-table-column> |
|
<el-table-column width="200" align="center" prop="" label="类型"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
v-model="scope.row.type" |
|
clearable |
|
readonly |
|
placeholder="类型" |
|
size="medium" |
|
style="width: 90%; margin-left: 5%" |
|
/> |
|
</template> |
|
</el-table-column> |
|
<el-table-column width="150" align="center" prop="" label="是否录音"> |
|
<template slot-scope="scope"> |
|
<!-- <el-select |
|
style="width: 90%" |
|
v-model="scope.row.isRecord" |
|
clearable |
|
filterable |
|
placeholder="请选择是否录音" |
|
size="medium" |
|
> |
|
<el-option label="是" :value="1" /> |
|
<el-option label="否" :value="0" /> |
|
</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="150" align="center" prop="" label="是否录像"> |
|
<template slot-scope="scope"> |
|
<!-- <el-select |
|
style="width: 90%" |
|
v-model="scope.row.isVideo" |
|
clearable |
|
filterable |
|
placeholder="请选择是否录像" |
|
size="medium" |
|
> |
|
<el-option label="是" :value="1" /> |
|
<el-option label="否" :value="0" /> |
|
</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="经度"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
v-model="scope.row.longitude" |
|
clearable |
|
readonly |
|
placeholder="经度" |
|
size="medium" |
|
style="width: 90%; margin-left: 5%" |
|
/> |
|
</template> |
|
</el-table-column> |
|
<el-table-column width="286" align="center" prop="" label="纬度"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
v-model="scope.row.latitude" |
|
clearable |
|
readonly |
|
placeholder="纬度" |
|
size="medium" |
|
style="width: 90%; margin-left: 5%" |
|
/> |
|
</template> |
|
</el-table-column> |
|
<el-table-column width="286" align="center" prop="" label="备注"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
v-model="scope.row.remark" |
|
clearable |
|
readonly |
|
placeholder="备注" |
|
size="medium" |
|
style="width: 90%; margin-left: 5%" |
|
/> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="dialogVisible = false">取 消</el-button> |
|
<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,getAllUser,getGroupUser,getOnline} from "@/api/dispatch/dispatch" |
|
// import { client, regist , isRegisted, mylog,unRegist } from "../../util/dispatch" |
|
|
|
export default { |
|
name: "alarmCenter", |
|
data() { |
|
return{ |
|
activeTit:1, |
|
name:'', |
|
dialogCall:false, |
|
activeDevice:'', |
|
activeNode:'', |
|
selectTreeNode:[], |
|
activePhone:'', |
|
dialogVisible:false, |
|
deviceData:[], |
|
isSroll:false, |
|
isMetting:false, |
|
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:'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:'011', |
|
label: '调度组名称1', |
|
children: [ |
|
{ |
|
id:'012', |
|
label: '终端设备名称1（3001）', |
|
}, |
|
{ |
|
id:'013', |
|
label: '终端设备名称2（3002）', |
|
}, |
|
{ |
|
id:'014', |
|
label: '终端设备名称3（3003）', |
|
}, |
|
{ |
|
id:'015', |
|
label: '终端设备名称4（3004）', |
|
}, |
|
] |
|
}], |
|
inviteList:[ |
|
// {id:'001',name:'终端设备名称1（1001）',isSelect:1}, |
|
], |
|
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'}, |
|
], |
|
timer:null, |
|
time:'', |
|
date:'', |
|
userData:[ |
|
{employeeId:'',password:'123456',employeeLevel:10,groupNum:null,name:'',type:'智能终端',isRecord:0, |
|
isVideo:0,longitude:null,latitude:null,remark:''}, |
|
], |
|
levelList:[ |
|
{label:'1级',value:1}, |
|
{label:'2级',value:2}, |
|
{label:'3级',value:3}, |
|
{label:'4级',value:4}, |
|
{label:'5级',value:5}, |
|
{label:'6级',value:6}, |
|
{label:'7级',value:7}, |
|
{label:'8级',value:8}, |
|
{label:'9级',value:9}, |
|
{label:'10级',value:10}, |
|
], |
|
groupList:[], |
|
defaultProps:{ |
|
label:'groupName', |
|
id:'groupNum' |
|
}, |
|
listData:[ |
|
{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:0, |
|
callItem:null, |
|
_intercom:null, |
|
_conf:null, |
|
_call:null, |
|
isIntercom:false,//通讯录是否发起对讲 |
|
isGroup:false, //是否已经邀请了群组 |
|
defaultExpandIds: [], // 这里存放要默认展开的节点 id |
|
_incomingCall:null, |
|
_call1:null, |
|
_call2:null |
|
|
|
|
|
} |
|
}, |
|
computed: { |
|
}, |
|
mounted() { |
|
this.init(); |
|
|
|
}, |
|
created(){ |
|
|
|
|
|
// else{ |
|
// unRegist() |
|
// } |
|
this.treeData.map(item =>{ |
|
this.defaultExpandIds.push(item.id) |
|
}) |
|
this.getTime(); |
|
// this.load() |
|
this.getGroupData() |
|
// this.getUserData() |
|
}, |
|
methods: { |
|
init() { |
|
console.log('init111') |
|
|
|
// client._eventEmitter.on("1", (para) => { |
|
// mylog("sessionStateChange: " + para); |
|
// }); |
|
|
|
client.userOnlineStateChange.on((para) => { |
|
var stateStr; |
|
switch (para.state) { |
|
case 0: |
|
stateStr = "online"; |
|
break; |
|
case 1: |
|
stateStr = "offline"; |
|
break; |
|
default: |
|
break; |
|
} mylog("userOnlineStateChanged user: " + para.number + ", state: " + stateStr) |
|
}); |
|
|
|
client.userCallStateChange.on((para) => { |
|
// mylog("userCallStateChange: " + JSON.stringify(para)) |
|
}); |
|
|
|
client.incomingCall.on((para) => { |
|
mylog("incoming call number: " + para.call.number); |
|
this._incomingCall = para.call; |
|
}); |
|
|
|
client.receiveConferenceInvite.on((para) => { |
|
mylog("receiveConferenceInvite: "); |
|
_conf = para.conference; |
|
}); |
|
setTimeout(() =>{ |
|
if(!isRegisted()) { |
|
regist(); |
|
} |
|
},2000) |
|
}, |
|
// 获取所有调度组 |
|
getGroupData(){ |
|
getGroupList().then(res =>{ |
|
console.log(res) |
|
this.treeData = res.data.list |
|
}) |
|
}, |
|
// getUserData(){ |
|
// this.listData = [] |
|
// // getAllUser().then(res =>{ |
|
// // console.log('所有人员====>',res) |
|
// // this.listData = res.data.page.dataList |
|
// // console.log(this.listData) |
|
// // }) |
|
// }, |
|
fn(str) { |
|
let num = null; |
|
str >= 10 ? (num = str) : (num = "0" + str); |
|
return num; |
|
}, |
|
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); |
|
}, |
|
// 邀请人员 |
|
inviteUser(row){ |
|
console.log('inviteList ===>',this.inviteList) |
|
if(this.inviteList.length == 0){ |
|
this.dialogCall = true; //打开邀请方式弹窗 |
|
this.callItem = row; //当前邀请人员 |
|
}else{ |
|
this.$confirm('确定要邀请该用户吗?', '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning' |
|
}).then(() => { |
|
row.isSelect = 1; |
|
this.isMetting = true; //更改为会议状态 |
|
this.deviceData.find(item => item.id == row.id).isSelect = 1; |
|
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(isVideo,position) { |
|
// this.$nextTick(() =>{ |
|
// var targetNumber = this.callItem.name; |
|
// console.log('targetNumber ===>',targetNumber,document.getElementById('video1')) |
|
// var mediaControl; |
|
// if (position == 1) { |
|
// mediaControl = document.getElementById('video1'); |
|
// } else if (position == 2) { |
|
// mediaControl = document.getElementById('video1'); |
|
// } |
|
// console.log('targetNumber ===>',targetNumber,'mediaControl ===>',mediaControl,'isVideo ===>',isVideo) |
|
|
|
// client.makeCall(targetNumber, mediaControl, isVideo).then((call) => { |
|
// if (position == 1) { |
|
// this._call1 = call; |
|
// } else if (position == 2) { |
|
// this._call2 = call; |
|
// } |
|
|
|
// call.callStateChange.on(onCallStateChange); |
|
|
|
// var state = convertCallstate(call.state); |
|
// mylog("call success callState: " + state); |
|
// } |
|
// ).catch((reason) => { |
|
// mylog("call fail"); |
|
// mylog(JSON.stringify(reason)); |
|
// }); |
|
// }) |
|
|
|
console.log('isRegisted ====>',isRegisted()) |
|
// let mediaControl = null; |
|
var mediaControl; |
|
if (position == 1) { |
|
mediaControl = document.getElementById('video1'); |
|
} else if (position == 2) { |
|
mediaControl = document.getElementById('video1'); |
|
} |
|
console.log(this.callItem) |
|
// this.$nextTick(() =>{ |
|
if(this.inviteList.length == 1){ //如果只邀请一人时，进行呼叫 |
|
console.log('进入循环') |
|
this.isMetting = false; |
|
mediaControl = video1; //获取媒体控件 |
|
client.makeCall(this.callItem.name, mediaControl, isVideo).then((call) => { //发起呼叫 |
|
console.log('call ===>',call) |
|
this._call = call |
|
this.deviceData.find(item => item.id == this.callItem.id).isSelect = 1; |
|
this.inviteList.push(this.callItem); |
|
|
|
}).catch((reason) => { |
|
console.log("call fail"); |
|
console.log(JSON.stringify(reason)); |
|
this.$message.error('呼叫失败') |
|
}); |
|
}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.dialogCall = false; |
|
console.log('callItem ===>',this.callItem) |
|
this.makecall(false,1) |
|
}, |
|
// 视频呼叫 |
|
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(true,2) |
|
}, |
|
|
|
// 结束会议 |
|
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(){ |
|
// console.log('循环进入') |
|
this.current++ |
|
getOnline().then(res =>{ |
|
// console.log('res ===>',res) |
|
let onlineData = res.data.Onlines |
|
getAllUser({curPage:this.current, pageRows:10}).then(res =>{ |
|
// console.log('所有人员====>',res) |
|
this.isSroll = false; |
|
this.listData = res.data.page.dataList |
|
this.deviceData = this.deviceData.concat(this.listData); |
|
this.deviceData.map(item =>{ |
|
item.online = false |
|
onlineData.map(item1 =>{ |
|
if(item.employeeId == item1.employeeID){ |
|
item.online = true |
|
} |
|
}) |
|
}) |
|
console.log('deviceData ===>',this.deviceData) |
|
this.deviceData.sort((a, b) => b.online-a.online) |
|
if(this.listData.length == 0){ |
|
this.isSroll = true; |
|
this.current = 0 |
|
} |
|
}) |
|
}) |
|
|
|
|
|
// let arr = [] |
|
// let endIndex = this.startIndex + 10; |
|
// this.isSroll = true; |
|
// this.deviceData = this.deviceData.concat(this.listData.slice(this.startIndex, endIndex)); |
|
// arr =JSON.parse(JSON.stringify(this.listData)).slice(this.startIndex, endIndex) |
|
// this.startIndex = endIndex; |
|
// if(arr.length = 0){ |
|
// this.isSroll = false; |
|
// this.startIndex = 0 |
|
// } |
|
}, |
|
// 删除用户 |
|
deleteUser(item){ |
|
this.$confirm('确定要删除该用户吗?', '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning' |
|
}).then(() => { |
|
deleteUser({intemployeeId:item.id}).then(res =>{ |
|
if(res.state == 200){ |
|
this.$message({ |
|
type: 'success', |
|
message: '删除成功!' |
|
}); |
|
} |
|
}) |
|
|
|
}).catch(() => { |
|
// this.$message({ |
|
// type: 'info', |
|
// message: '已取消删除' |
|
// }); |
|
}); |
|
|
|
}, |
|
// 通话记录请出 |
|
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(){ |
|
this.dialogVisible = true; |
|
this.$nextTick(() =>{ |
|
this.$el.querySelector('.el-table__body-wrapper').scrollLeft = 0; |
|
this.userData = [ |
|
{employeeId:'',password:'123456',employeeLevel:10,groupNum:null,name:'',type:'智能终端',isRecord:0, |
|
isVideo:0,longitude:null,latitude:null,remark:''}, |
|
]; |
|
}) |
|
}, |
|
// 弹窗添加人员 |
|
addPeople(){ |
|
let tmp = this.userData.find(item => item.employeeId == '') |
|
if(tmp){ |
|
this.$message({ |
|
message:'请填写账号', |
|
type:'warning' |
|
}) |
|
}else{ |
|
this.userData.push( |
|
{employeeId:'',password:'123456',employeeLevel:10,groupNum:'',name:'',type:'智能终端',isRecord:0, |
|
isVideo:0,longitude:null,latitude:null,remark:''}, |
|
); |
|
} |
|
|
|
}, |
|
// 删除人员 |
|
removePeople(index, row,val) { |
|
console.log(val) |
|
// if (row.id !== undefined) { |
|
// this.$message({ |
|
// message: "编辑或者追加时无法删除", |
|
// type: "warning", |
|
// }); |
|
// } else { |
|
if (index > 0 || this.userData.length > 1) { |
|
this.userData.splice(index, 1); |
|
} else { |
|
this.$message({ |
|
message: "至少要填写一行", |
|
type: "warning", |
|
}); |
|
} |
|
// } |
|
}, |
|
userSubmit(){ |
|
let paramsData = [] |
|
let tmp = this.userData.find(item => item.employeeId == ''); |
|
if(tmp){ |
|
this.$message.error('请填写账号'); |
|
}else{ |
|
paramsData = JSON.parse(JSON.stringify(this.userData)); |
|
paramsData.map(item =>{ |
|
item.type = '6.0'; |
|
item.name = item.name == '' ? item.employeeId : item.name |
|
}) |
|
console.log(paramsData) |
|
addUser(JSON.stringify(paramsData)).then(res =>{ |
|
console.log(res) |
|
if(res.code == 200){ |
|
this.$message.success('添加成功！') |
|
this.deviceData = []; |
|
this.current = 1; |
|
this.load() |
|
} |
|
}) |
|
} |
|
}, |
|
// 切换标题 通讯录/调度组 |
|
changeTitle(item){ |
|
console.log('item ===>',item) |
|
if(item == 1){ |
|
this.current = 0; |
|
this.isSroll = false |
|
this.load() |
|
}else if(item == 2){ |
|
this.getGroupData() |
|
} |
|
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.groupNum) |
|
if(tmp){ |
|
return |
|
} |
|
this.activeNode = data.groupNum |
|
} |
|
}, |
|
// 鼠标移出树节点 |
|
leaveNode(){ |
|
this.activeNode = '' |
|
}, |
|
//鼠标进入通话记录 |
|
itemHover(item){ |
|
this.activePhone = item.id |
|
}, |
|
//鼠标移出通话记录 |
|
leavePhone(){ |
|
this.activePhone = '' |
|
}, |
|
// // 点击树节点 |
|
// handleNodeClick(data,node,resolve){ |
|
// console.log('点击节点 ===>',data,node) |
|
|
|
// }, |
|
loadNode(node,resolve){ |
|
let arr = [] |
|
console.log('node ===>',node) |
|
getGroupUser({ |
|
curPage:1, |
|
pageRows:100, |
|
groupNum:node.data.groupNum, |
|
groupName:node.data.groupName |
|
}).then(res =>{ |
|
getOnline().then(res1 =>{ |
|
res1.data.Onlines.map(item1 =>{ |
|
res.data.page.dataList.map(item =>{ |
|
if(item1.employeeID == item.employeeID){ |
|
item.online = true |
|
} |
|
arr.push({groupNum:item.id,groupName:item.name,online:item.online}) |
|
}) |
|
}) |
|
}) |
|
console.log('arr ===>',arr) |
|
return resolve(arr) |
|
}) |
|
} |
|
}, |
|
}; |
|
</script> |
|
|
|
<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.06rem; |
|
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; |
|
width: 2.3rem; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
|
|
&.act_dev_name{ |
|
width: 1.5rem; |
|
} |
|
} |
|
.dev_btn_box{ |
|
width: 0.85rem; |
|
height: 0.35rem; |
|
position: absolute; |
|
right: 0.05rem; |
|
display: flex; |
|
align-items: center; |
|
justify-content: end; |
|
|
|
.dev_btn{ |
|
font-size: 14px; |
|
font-family: Microsoft YaHei; |
|
font-weight: 400; |
|
float: right; |
|
width: 0.4rem; |
|
height: 0.25rem; |
|
// margin-right: 0.5rem; |
|
// margin-top: 0.045rem; |
|
background: #176CE8; |
|
border-radius: 2px; |
|
color: #fff; |
|
text-align: center; |
|
line-height: 0.25rem; |
|
|
|
&.del_btn{ |
|
background: #D83030; |
|
margin-left: 0.05rem; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.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; |
|
cursor: pointer; |
|
|
|
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; |
|
margin-left: -0.12rem; |
|
} |
|
.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.06rem; |
|
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; |
|
} |
|
|
|
.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; |
|
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.35rem; |
|
height: 7.35rem; |
|
margin: 0 auto; |
|
overflow-y: auto; |
|
overflow-x: hidden; |
|
|
|
.el-col{ |
|
margin-bottom: 0; |
|
} |
|
|
|
.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; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.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; |
|
margin: 0 auto; |
|
|
|
.group_video{ |
|
width: 100%; |
|
height: 100%; |
|
|
|
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; |
|
img{ |
|
cursor: pointer; |
|
} |
|
|
|
.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: 7.6rem; |
|
margin: 0 auto; |
|
display: flex; |
|
flex-direction: column; |
|
overflow-y: auto; |
|
overflow-x: hidden; |
|
|
|
.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: 99%; |
|
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; |
|
} |
|
} |
|
} |
|
|
|
|
|
} |
|
|
|
.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; |
|
} |
|
} |
|
} |
|
} |
|
</style> |
|
|
|
<style lang="scss"> |
|
.user_dialog{ |
|
// background: red; |
|
|
|
.el-dialog__header{ |
|
display: flex; |
|
} |
|
|
|
.dialog-footer{ |
|
height: 0.45rem; |
|
display: flex; |
|
justify-content: end; |
|
} |
|
} |
|
|
|
.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; |
|
} |
|
.el-message .el-icon-error{ |
|
font-size: 0.16rem; |
|
} |
|
.el-message .el-icon-success{ |
|
font-size: 0.16rem; |
|
} |
|
</style> |
|
|
|
|