|
|
@@ -0,0 +1,651 @@
|
|
|
+<template>
|
|
|
+ <Dialog v-model="show" type="xl" title="前方通信" hide-footer>
|
|
|
+ <div class="communication-container">
|
|
|
+ <div class="tabs">
|
|
|
+ <div v-for="(item, index) in menu" :key="index" :class="activeIndex === index ? 'tab tab_active' : 'tab'" @click="activeIndex = index">
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--视频会商-->
|
|
|
+ <div v-show="activeIndex === 0" class="content">
|
|
|
+ <div class="left-content">
|
|
|
+ <div class="search-box">
|
|
|
+ <el-input v-model="queryParams.label" class="custom-input" placeholder="组织架构搜索" style="width: 600px" @keyup.enter="getTree">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon class="el-input__icon"><search /></el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams2.value2"
|
|
|
+ class="custom-select select-box"
|
|
|
+ placeholder="全部"
|
|
|
+ popper-class="custom-select-popper"
|
|
|
+ :teleported="false"
|
|
|
+ >
|
|
|
+ <el-option v-for="level in options" :key="level.value" :label="level.name" :value="level.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-input v-model="queryParams2.name" class="custom-input" placeholder="设备搜索" @keyup.enter="handleNodeClick(false)">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon class="el-input__icon"><search /></el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="tree-container">
|
|
|
+ <div class="tree-box">
|
|
|
+ <div style="overflow-y: auto; height: 100%">
|
|
|
+ <el-tree :data="treeData" accordion @node-click="handleNodeClick" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="user-box">
|
|
|
+ <div class="user-table">
|
|
|
+ <div class="tr">
|
|
|
+ <div class="td2">
|
|
|
+ <div :class="getCheckedClass()" @click="handleChecked"></div>
|
|
|
+ </div>
|
|
|
+ <div class="td">设备</div>
|
|
|
+ <!-- div class="td3">姓名职务</div -->
|
|
|
+ </div>
|
|
|
+ <div class="table-content">
|
|
|
+ <div v-for="(item, index) in userList" :key="index" class="tr2">
|
|
|
+ <div class="td2">
|
|
|
+ <div :class="item.checked ? 'common-checked-active' : 'common-checked'" @click="handleChecked2(item)"></div>
|
|
|
+ </div>
|
|
|
+ <div class="td">{{ item.name }}</div>
|
|
|
+ <!-- div class="td3">
|
|
|
+ {{ item.duty }}
|
|
|
+ <div class="phone-icon"></div>
|
|
|
+ </div-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="select-box2">
|
|
|
+ <div class="select-header">
|
|
|
+ <div class="left-item">
|
|
|
+ <div>已选择：</div>
|
|
|
+ <div class="text">{{ selectList.length }}</div>
|
|
|
+ <div>个</div>
|
|
|
+ </div>
|
|
|
+ <div class="clear-btn" @click="clearSelect">清空</div>
|
|
|
+ </div>
|
|
|
+ <div class="select-content">
|
|
|
+ <div v-for="(item, index) in selectList" :key="index" class="box-item">
|
|
|
+ <div class="line">
|
|
|
+ <div class="text1">{{ item.name }}</div>
|
|
|
+ <div class="text2">{{ item.duty }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="line" style="margin-top: 20px">
|
|
|
+ <div class="text2">{{ item.dept }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="close-btn" @click="deleteItem(item)"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn-box">
|
|
|
+ <div class="btn" @click="showJoinMeetingDialog">
|
|
|
+ <div class="icon1"></div>
|
|
|
+ <div class="text">会议号入会</div>
|
|
|
+ </div>
|
|
|
+ <div class="btn" @click="handleOpenCall">
|
|
|
+ <div class="icon2"></div>
|
|
|
+ <div class="text">电话呼叫</div>
|
|
|
+ </div>
|
|
|
+ <div class="btn" @click="handleOpenMeeting">
|
|
|
+ <div class="icon3"></div>
|
|
|
+ <div class="text">发起会议</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Drone v-show="activeIndex === 1"></Drone>
|
|
|
+
|
|
|
+ <IndividualEquipment v-show="activeIndex === 2"></IndividualEquipment>
|
|
|
+
|
|
|
+ <Dialog v-if="showJoinMeeting" custom-show type="xs" height="760px" title="加入会议" @confirm="handleJoinMeeting" @close="closeDialog">
|
|
|
+ <el-form ref="formRef" :model="meetingForm" :rules="rules">
|
|
|
+ <el-form-item label="会议号" label-width="200px" prop="roomcode">
|
|
|
+ <el-input v-model="meetingForm.roomcode" class="custom-input2" clearable placeholder="请输入会议号" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="账号" label-width="200px" prop="username">
|
|
|
+ <el-input v-model="meetingForm.username" class="custom-input2" clearable placeholder="请输入设备账号" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="密码" label-width="200px" prop="userpass">
|
|
|
+ <el-input v-model="meetingForm.userpass" type="password" class="custom-input2" clearable placeholder="请输入设备密码" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </Dialog>
|
|
|
+
|
|
|
+ <Dialog
|
|
|
+ v-if="showOpenMeeting"
|
|
|
+ custom-show
|
|
|
+ type="xs"
|
|
|
+ height="660px"
|
|
|
+ :title="type === '0' ? '发起会议' : '电话呼叫'"
|
|
|
+ @confirm="handleStartCall"
|
|
|
+ @close="closeOpenDialog"
|
|
|
+ >
|
|
|
+ <el-form ref="form2Ref" :model="openMeetingForm" :rules="rules2">
|
|
|
+ <el-form-item label="账号" label-width="200px" prop="username">
|
|
|
+ <el-input v-model="openMeetingForm.username" class="custom-input2" clearable placeholder="请输入设备账号" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="密码" label-width="200px" prop="userpass">
|
|
|
+ <el-input v-model="openMeetingForm.userpass" type="password" class="custom-input2" clearable placeholder="请输入设备密码" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </Dialog>
|
|
|
+ </div>
|
|
|
+ </Dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { Search } from '@element-plus/icons-vue';
|
|
|
+import { getStartMiniParam, getStartMiniWithNoParam, getAvconDeviceTree, getAvconDeviceList } from '@/api/emergencyCommandMap/communication';
|
|
|
+import { deepClone } from '@/utils';
|
|
|
+import Drone from './Drone.vue';
|
|
|
+import IndividualEquipment from './IndividualEquipment.vue';
|
|
|
+
|
|
|
+const proxy = getCurrentInstance()?.proxy;
|
|
|
+
|
|
|
+let activeIndex = ref(0);
|
|
|
+const options = ref([{ name: '全部', value: '全部' }]);
|
|
|
+const menu = ref([{ name: '视频会商' }, { name: '无人机' }, { name: '单兵设备' }]);
|
|
|
+const treeData = ref([]);
|
|
|
+const userList = ref([]);
|
|
|
+const queryParams = reactive({
|
|
|
+ label: ''
|
|
|
+});
|
|
|
+const queryParams2 = reactive({
|
|
|
+ name: '',
|
|
|
+ value2: ''
|
|
|
+});
|
|
|
+const getTree = () => {
|
|
|
+ getAvconDeviceTree(queryParams).then((res) => {
|
|
|
+ treeData.value = res.data;
|
|
|
+ });
|
|
|
+};
|
|
|
+const selectList = ref([]);
|
|
|
+const getCheckedClass = () => {
|
|
|
+ let res = 'common-checked';
|
|
|
+ const len = userList.value.length;
|
|
|
+ let len2 = 0;
|
|
|
+ userList.value.forEach((item) => {
|
|
|
+ const index = selectList.value.findIndex((item2) => item2.id === item.id);
|
|
|
+ if (index > -1) {
|
|
|
+ len2++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (len2 > 0 && len2 === len) {
|
|
|
+ res = 'common-checked-active';
|
|
|
+ } else if (len2 > 0) {
|
|
|
+ res = 'common-checked-half';
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+};
|
|
|
+let clickNodeId = ref('');
|
|
|
+const handleNodeClick = (item) => {
|
|
|
+ if (!!item) {
|
|
|
+ clickNodeId.value = item.id;
|
|
|
+ }
|
|
|
+ const id = item ? item.id : !!clickNodeId.value ? clickNodeId.value : treeData.value[0].id;
|
|
|
+ console.log('handleNodeClick', id);
|
|
|
+ getAvconDeviceList(id, queryParams2).then((res) => {
|
|
|
+ res.data.forEach((item) => {
|
|
|
+ const index = selectList.value.findIndex((item2) => item2.id === item.id);
|
|
|
+ item.checked = index > -1;
|
|
|
+ });
|
|
|
+ userList.value = res.data;
|
|
|
+ });
|
|
|
+};
|
|
|
+// 全选、全取消
|
|
|
+const handleChecked = () => {
|
|
|
+ const checkedClass = getCheckedClass();
|
|
|
+ let flag = true;
|
|
|
+ if (checkedClass === 'common-checked-active') {
|
|
|
+ flag = false;
|
|
|
+ }
|
|
|
+ userList.value.forEach((item) => {
|
|
|
+ item.checked = flag;
|
|
|
+ changeSelectList(item);
|
|
|
+ });
|
|
|
+};
|
|
|
+// 单个选中、取消选中
|
|
|
+const handleChecked2 = (item) => {
|
|
|
+ item.checked = !item.checked;
|
|
|
+ changeSelectList(item);
|
|
|
+};
|
|
|
+// 清空
|
|
|
+const clearSelect = () => {
|
|
|
+ userList.value.forEach((item) => {
|
|
|
+ if (item.checked) {
|
|
|
+ item.checked = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ selectList.value = [];
|
|
|
+};
|
|
|
+const changeSelectList = (item) => {
|
|
|
+ const index = selectList.value.findIndex((item2) => item2.id === item.id);
|
|
|
+ if (item.checked) {
|
|
|
+ if (index === -1) {
|
|
|
+ selectList.value.push(deepClone(item));
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (index > -1) {
|
|
|
+ selectList.value.splice(index, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+// 清空指定项
|
|
|
+const deleteItem = (item) => {
|
|
|
+ for (let i = 0; i < userList.value.length; i++) {
|
|
|
+ if (item.id === userList.value[i].id) {
|
|
|
+ userList.value[i].checked = false;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ item.checked = false;
|
|
|
+ changeSelectList(item);
|
|
|
+};
|
|
|
+
|
|
|
+let formRef = ref();
|
|
|
+let showJoinMeeting = ref(false);
|
|
|
+let meetingForm = reactive({
|
|
|
+ roomcode: '',
|
|
|
+ username: '',
|
|
|
+ userpass: ''
|
|
|
+});
|
|
|
+const rules = reactive({
|
|
|
+ roomcode: [{ required: true, message: '会议号不能为空', trigger: 'blur' }],
|
|
|
+ username: [{ required: true, message: '会议账号不能为空', trigger: 'blur' }],
|
|
|
+ userpass: [{ required: true, message: '会议密码不能为空', trigger: 'blur' }]
|
|
|
+});
|
|
|
+// 0 会议 1 电话
|
|
|
+let type = ref('0');
|
|
|
+// 点击会议号入会
|
|
|
+const showJoinMeetingDialog = () => {
|
|
|
+ type.value = '0';
|
|
|
+ showJoinMeeting.value = true;
|
|
|
+};
|
|
|
+const closeDialog = () => {
|
|
|
+ showJoinMeeting.value = false;
|
|
|
+ meetingForm.roomcode = '';
|
|
|
+};
|
|
|
+///////////////////
|
|
|
+let form2Ref = ref();
|
|
|
+let showOpenMeeting = ref(false);
|
|
|
+let openMeetingForm = reactive({
|
|
|
+ username: '',
|
|
|
+ userpass: ''
|
|
|
+});
|
|
|
+const rules2 = reactive({
|
|
|
+ username: [{ required: true, message: '会议账号不能为空', trigger: 'blur' }],
|
|
|
+ userpass: [{ required: true, message: '会议密码不能为空', trigger: 'blur' }]
|
|
|
+});
|
|
|
+const handleOpenMeeting = () => {
|
|
|
+ type.value = '1';
|
|
|
+ showOpenMeeting.value = true;
|
|
|
+};
|
|
|
+const closeOpenDialog = () => {
|
|
|
+ showOpenMeeting.value = false;
|
|
|
+};
|
|
|
+const handleOpenCall = () => {
|
|
|
+ showOpenMeeting.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+// 会议号入会
|
|
|
+const handleJoinMeeting = () => {
|
|
|
+ formRef.value?.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ const screenWidth = window.screen.width * window.devicePixelRatio;
|
|
|
+ const screenHeight = window.screen.height * window.devicePixelRatio;
|
|
|
+ const data = {
|
|
|
+ userid: meetingForm.username, // 空表示后台获取当前用户对应融合通信dev_id
|
|
|
+ password: meetingForm.userpass || '123',
|
|
|
+ roomcode: meetingForm.roomcode, // 会议号
|
|
|
+ windowpos: { 'x': 0, 'y': 0, 'width': screenWidth, 'height': screenHeight, 'top': true }
|
|
|
+ };
|
|
|
+ getStartMiniWithNoParam(data).then((res) => {
|
|
|
+ // 创建一个a标签元素
|
|
|
+ const a = document.createElement('a');
|
|
|
+ // 设置a标签的href属性
|
|
|
+ a.href = res.data;
|
|
|
+ // 触发点击事件
|
|
|
+ a.click();
|
|
|
+
|
|
|
+ // 保存账号和密码
|
|
|
+ localStorage.setItem('meeting_username', meetingForm.username);
|
|
|
+ localStorage.setItem('meeting_userpass', meetingForm.userpass);
|
|
|
+ });
|
|
|
+ closeDialog();
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 电话呼叫
|
|
|
+const handleStartCall = () => {
|
|
|
+ form2Ref.value?.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let dev_list = [];
|
|
|
+ userList.value.forEach((item) => {
|
|
|
+ if (item.checked && item.mobile != '') {
|
|
|
+ dev_list.push({ id: item.mobile, avtype: type.value === '0' ? 'av' : 'a' }); // a 音频 v 视频 默认 av
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (dev_list.length == 0) {
|
|
|
+ proxy?.$modal.msgError('请勾选人员');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const screenWidth = window.screen.width * window.devicePixelRatio;
|
|
|
+ const screenHeight = window.screen.height * window.devicePixelRatio;
|
|
|
+ const data = {
|
|
|
+ userid: openMeetingForm.username, // 空表示后台获取当前用户对应融合通信dev_id
|
|
|
+ password: openMeetingForm.userpass,
|
|
|
+ windowpos: { 'x': 0, 'y': 0, 'width': screenWidth, 'height': screenHeight, 'top': true },
|
|
|
+ members: {
|
|
|
+ num: dev_list.length + 2, // 配置多少个座位，一般就是邀请人多少个就多少个
|
|
|
+ 'dev-list': dev_list
|
|
|
+ }
|
|
|
+ };
|
|
|
+ getStartMiniParam(data).then((res) => {
|
|
|
+ // 创建一个a标签元素
|
|
|
+ const a = document.createElement('a');
|
|
|
+ // 设置a标签的href属性
|
|
|
+ a.href = res.data;
|
|
|
+ // 触发点击事件
|
|
|
+ a.click();
|
|
|
+
|
|
|
+ // 保存账号和密码
|
|
|
+ localStorage.setItem('meeting_username', openMeetingForm.username);
|
|
|
+ localStorage.setItem('meeting_userpass', openMeetingForm.userpass);
|
|
|
+ });
|
|
|
+ closeOpenDialog();
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ const meeting_username = localStorage.getItem('meeting_username') || '';
|
|
|
+ const meeting_userpass = localStorage.getItem('meeting_userpass') || '';
|
|
|
+ meetingForm.username = meeting_username;
|
|
|
+ meetingForm.userpass = meeting_userpass;
|
|
|
+ openMeetingForm.username = meeting_username;
|
|
|
+ openMeetingForm.userpass = meeting_userpass;
|
|
|
+
|
|
|
+ getTree();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.communication-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ padding-top: 0px;
|
|
|
+ padding-left: 20px;
|
|
|
+ animation-name: slideLeft;
|
|
|
+ animation-duration: 2s;
|
|
|
+ .tabs {
|
|
|
+ display: flex;
|
|
|
+ .tab {
|
|
|
+ font-size: 44px;
|
|
|
+ font-family: YouSheBiaoTiHei;
|
|
|
+ text-align: center;
|
|
|
+ color: #b6bbcc;
|
|
|
+ width: 317px;
|
|
|
+ height: 78px;
|
|
|
+ line-height: 85px;
|
|
|
+ background: url('@/assets/images/emergencyCommandMap/communication/tab.png') no-repeat;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ color: #ffffff;
|
|
|
+ background: url('@/assets/images/emergencyCommandMap/communication/tabActive.png') no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab_active {
|
|
|
+ color: #ffffff;
|
|
|
+ background: url('@/assets/images/emergencyCommandMap/communication/tabActive.png') no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 12px;
|
|
|
+ .left-content {
|
|
|
+ .search-box {
|
|
|
+ display: flex;
|
|
|
+ .custom-input {
|
|
|
+ width: 888px;
|
|
|
+ }
|
|
|
+ .select-box {
|
|
|
+ width: 276px !important;
|
|
|
+ height: 56px;
|
|
|
+ line-height: 56px;
|
|
|
+ margin: 0 10px;
|
|
|
+ color: #83a3be;
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+ .custom-select-popper {
|
|
|
+ .el-scrollbar {
|
|
|
+ .el-select-dropdown__item {
|
|
|
+ color: #b1cae0;
|
|
|
+ font-size: 32px;
|
|
|
+ height: 56px;
|
|
|
+ line-height: 56px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ background: transparent;
|
|
|
+ color: #83a3be;
|
|
|
+ font-size: 32px;
|
|
|
+ outline: none;
|
|
|
+ appearance: none;
|
|
|
+ height: 100%;
|
|
|
+ border: none;
|
|
|
+ &::placeholder {
|
|
|
+ color: #83a3be;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tree-container {
|
|
|
+ margin-top: 15px;
|
|
|
+ display: flex;
|
|
|
+ .tree-box {
|
|
|
+ width: 888px;
|
|
|
+ height: 754px;
|
|
|
+ background: url('@/assets/images/emergencyCommandMap/communication/treeBg.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 15px 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ :deep(.el-tree) {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #fbffff;
|
|
|
+ font-size: 38px;
|
|
|
+ .el-tree-node__content {
|
|
|
+ height: auto;
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ white-space: normal;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ .el-tree-node__expand-icon {
|
|
|
+ color: #297cfc;
|
|
|
+ font-size: 23px;
|
|
|
+ }
|
|
|
+ .el-tree-node:focus > .el-tree-node__content,
|
|
|
+ .el-tree-node__content:hover {
|
|
|
+ background-color: transparent !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .user-box {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 888px;
|
|
|
+ height: 754px;
|
|
|
+ background: url('@/assets/images/emergencyCommandMap/communication/treeBg.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ .user-table {
|
|
|
+ padding: 15px 8px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: 38px;
|
|
|
+ color: #fbffff;
|
|
|
+ .tr {
|
|
|
+ background-color: #102e76;
|
|
|
+ }
|
|
|
+ .tr,
|
|
|
+ .tr2 {
|
|
|
+ display: flex;
|
|
|
+ padding: 6px 0;
|
|
|
+ .td {
|
|
|
+ flex: 2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .td2 {
|
|
|
+ width: 65px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .td3 {
|
|
|
+ flex: 3;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-content {
|
|
|
+ height: 275px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .tr2 {
|
|
|
+ margin-top: 10px;
|
|
|
+ background-color: #122868;
|
|
|
+ }
|
|
|
+ .phone-icon {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 62px;
|
|
|
+ height: 63px;
|
|
|
+ background: url('@/assets/images/emergencyCommandMap/communication/phone.png') no-repeat;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .select-box2 {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 988px;
|
|
|
+ height: 854px;
|
|
|
+ background: url('@/assets/images/emergencyCommandMap/communication/peopleBg.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ .select-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ color: #fbffff;
|
|
|
+ font-size: 32px;
|
|
|
+ border-bottom: 1px solid #247dff;
|
|
|
+ padding: 20px;
|
|
|
+ .left-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .text {
|
|
|
+ margin: 0 10px;
|
|
|
+ color: #00e8ff;
|
|
|
+ font-family: 'BEBAS-1';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .clear-btn {
|
|
|
+ color: #00e8ff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .select-content {
|
|
|
+ height: 360px;
|
|
|
+ overflow-y: auto;
|
|
|
+ .box-item {
|
|
|
+ border-bottom: 1px solid #247dff;
|
|
|
+ padding: 20px;
|
|
|
+ position: relative;
|
|
|
+ .line {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 38px;
|
|
|
+ display: flex;
|
|
|
+ .text1 {
|
|
|
+ margin-right: 35px;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ color: #a7ccdf;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .close-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 50px;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 29px;
|
|
|
+ height: 29px;
|
|
|
+ background: url('@/assets/images/emergencyCommandMap/communication/close.png') no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-box {
|
|
|
+ flex: 1;
|
|
|
+ height: 421px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .btn {
|
|
|
+ width: 461px;
|
|
|
+ height: 336px;
|
|
|
+ background: url('@/assets/images/emergencyCommandMap/communication/btn.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ .icon1,
|
|
|
+ .icon2,
|
|
|
+ .icon3 {
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .icon1 {
|
|
|
+ width: 64px;
|
|
|
+ height: 67px;
|
|
|
+ background: url('@/assets/images/emergencyCommandMap/communication/icon1.png') no-repeat;
|
|
|
+ }
|
|
|
+ .icon2 {
|
|
|
+ width: 64px;
|
|
|
+ height: 65px;
|
|
|
+ background: url('@/assets/images/emergencyCommandMap/communication/icon2.png') no-repeat;
|
|
|
+ }
|
|
|
+ .icon3 {
|
|
|
+ width: 64px;
|
|
|
+ height: 63px;
|
|
|
+ background: url('@/assets/images/emergencyCommandMap/communication/icon3.png') no-repeat;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 38px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ position: absolute;
|
|
|
+ top: 6px;
|
|
|
+ left: 141px;
|
|
|
+ font-size: 60px;
|
|
|
+}
|
|
|
+</style>
|
zhangyihao