|
|
|
|
<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>
|
|
|
|
|
|
