2065 lines
60 KiB
Vue
2065 lines
60 KiB
Vue
<template>
|
||
<div class="indexx" :id="state.id">
|
||
<Transition name="slide-fade">
|
||
<div class="left-cont" :style="{ width: show3 ? '412px' : '0px', border: show3 ? '10px solid #f2f3f5' : '0px' }">
|
||
<el-button @click="show3 = !show3" style="position: absolute; top: 0px; right: -38px" id="toggle-sidebar" type="info" circle>
|
||
<el-icon v-if="show3">
|
||
<d-arrow-left />
|
||
</el-icon>
|
||
<el-icon v-else>
|
||
<d-arrow-right />
|
||
</el-icon>
|
||
</el-button>
|
||
<h2 class="title" v-show="show3">资源数量</h2>
|
||
<div class="elBtns" v-show="show3">
|
||
<div @click="qhzty('6')" :class="{ active: isActive == '6' }">全部</div>
|
||
<div @click="qhzty('1')" :class="{ active: isActive == '1' }">党政机关</div>
|
||
<div @click="qhzty('2')" :class="{ active: isActive == '2' }">经融机构</div>
|
||
<br />
|
||
<div @click="qhzty('4')" :class="{ active: isActive == '4' }">中小学</div>
|
||
<div @click="qhzty('3')" :class="{ active: isActive == '3' }">医疗单位</div>
|
||
<div @click="qhzty('5')" :class="{ active: isActive == '5' }">其他</div>
|
||
</div>
|
||
|
||
<div class="searchBox">
|
||
<a-cascader
|
||
@change="cascaderChange"
|
||
style="width: 100%"
|
||
v-if="options.length > 0"
|
||
:fieldNames="{ value: 'code', label: 'title', children: 'children' }"
|
||
v-model:value="value"
|
||
:options="options"
|
||
:show-search="{ filter }"
|
||
placeholder="请输入搜索关键词"
|
||
/>
|
||
</div>
|
||
|
||
<div ref="scrollContainer" v-loading="loading" class="scrollContainer">
|
||
<!-- —————————————————————————————重要的事情说三遍： key 值必须唯一 ————————————————————————————— -->
|
||
<a-tree
|
||
:fieldNames="{ key: 'code', title: 'title', children: 'children' }"
|
||
v-if="treedataall.length > 0"
|
||
ref="treeRef"
|
||
:show-icon="true"
|
||
:default-expand-all="false"
|
||
v-model:expandedKeys="expandedKeys"
|
||
v-model:selectedKeys="selectedKeys"
|
||
v-model:checkedKeys="checkedKeys"
|
||
:tree-data="treedataall"
|
||
@select="selectA"
|
||
>
|
||
<template #title="{ title }">
|
||
{{ title }}
|
||
</template>
|
||
<template #icon="{ level, deviceType, title }">
|
||
<img v-if="title == '湖南省'" style="" src="./indeximag/shu/一级.png" alt="" />
|
||
<img v-if="level == '1'" style="" src="./indeximag/shu/一级.png" alt="" />
|
||
<img v-if="level == '2'" style="" src="./indeximag/shu/二级.png" alt="" />
|
||
<img v-if="level == '3'" style="" src="./indeximag/shu/sds.png" alt="" />
|
||
<img v-if="level == '4'" style="" src="./indeximag/shu/三级.png" alt="" />
|
||
|
||
<img v-if="deviceType == '01'" style="" src="./indeximag/shu/防区报警.png" alt="" />
|
||
<img v-else-if="deviceType == '02'" style="" src="./indeximag/shu/对讲报警.png" alt="" />
|
||
<img v-else-if="deviceType == '03'" style="" src="./indeximag/shu/一键报警.png" alt="" />
|
||
<img v-else-if="deviceType == '04'" style="" src="./indeximag/shu/安保单兵.png" alt="" />
|
||
<img v-else-if="deviceType == '05'" style="" src="./indeximag/shu/AI设备.png" alt="" />
|
||
<img v-else-if="deviceType == '00'" style="" src="./indeximag/shu/视频监控.png" alt="" />
|
||
</template>
|
||
</a-tree>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
|
||
<Transition name="slide-fade1">
|
||
<div class="right-cont" :style="{ width: show4 ? '412px' : '0px', border: show4 ? '10px solid #f2f3f5' : '0px' }">
|
||
<el-button @click="show4 = !show4" style="position: absolute; top: 0px; left: -38px" id="toggle-sidebar1" type="info" circle>
|
||
<el-icon v-if="show4">
|
||
<d-arrow-right />
|
||
</el-icon>
|
||
<el-icon v-else>
|
||
<d-arrow-left />
|
||
</el-icon>
|
||
</el-button>
|
||
<h2 class="title">系统数据</h2>
|
||
<div class="panelBox">
|
||
<div>
|
||
<p>
|
||
<el-icon>
|
||
<WarnTriangleFilled />
|
||
</el-icon>
|
||
</p>
|
||
<span>报警</span>
|
||
<b>{{ total.alarmCount }}</b>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<el-icon>
|
||
<BellFilled />
|
||
</el-icon>
|
||
</p>
|
||
<span>警情</span>
|
||
<b>{{ total.caseCount }}</b>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<el-icon>
|
||
<VideoCameraFilled />
|
||
</el-icon>
|
||
</p>
|
||
<span>AI预警</span>
|
||
<b>{{ total.aiCount }}</b>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="jqBox" style="height: 80%">
|
||
<div class="tabs">
|
||
<div @click="qhzty2('1')" :class="{ active1: isActive1 == '1' }">
|
||
<span>报警【{{ jinbao.length }}】</span>
|
||
</div>
|
||
<div @click="qhzty2('2')" :class="{ active1: isActive1 == '2' }">
|
||
<span>警情【{{ jinqing.length }}】</span>
|
||
</div>
|
||
<div @click="qhzty2('3')" :class="{ active1: isActive1 == '3' }">
|
||
<span>AI预警【{{ AIyujing.length }}】</span>
|
||
</div>
|
||
</div>
|
||
<ul class="dataList" v-show="isActive1 == '1'">
|
||
<div v-if="jinbao.length > 0">
|
||
<li v-for="(item, index) in jinbao" :key="index" @click="toinfo(item, index)">
|
||
<p>
|
||
<el-icon> <LocationFilled /> </el-icon>{{ item.address }}
|
||
</p>
|
||
<p>
|
||
<el-icon> <Clock /> </el-icon>{{ item.timestamp }}
|
||
</p>
|
||
<p>
|
||
<el-icon> <PhoneFilled /> </el-icon>{{ item.user1Phone }}
|
||
</p>
|
||
<p>设备号：{{ item.deviceId }}</p>
|
||
<p>平台来源：{{ item.alarmSource }}</p>
|
||
</li>
|
||
</div>
|
||
|
||
<el-empty v-else description="暂无数据"></el-empty>
|
||
</ul>
|
||
<ul class="dataList" v-show="isActive1 == '2'">
|
||
<div v-if="jinqing.length > 0">
|
||
<li v-for="(item, index) in jinqing" :key="index" @click="toinfo(item, index)">
|
||
<p>
|
||
<el-icon> <LocationFilled /> </el-icon>{{ item.address }}
|
||
</p>
|
||
<p>
|
||
<el-icon> <Clock /> </el-icon>{{ item.timestamp }}
|
||
</p>
|
||
<p>
|
||
<el-icon> <PhoneFilled /> </el-icon>{{ item.user1Phone }}
|
||
</p>
|
||
<p>设备号：{{ item.alarmSource }}</p>
|
||
<p>平台来源：{{ item.station }}</p>
|
||
</li>
|
||
</div>
|
||
|
||
<el-empty v-else description="暂无数据"></el-empty>
|
||
</ul>
|
||
<ul class="dataList" v-show="isActive1 == '3'">
|
||
<div v-if="AIyujing.length > 0">
|
||
<li v-for="(item, index) in AIyujing" :key="index" @click="toinfo(item, index)">
|
||
<p>
|
||
<el-icon> <LocationFilled /> </el-icon>{{ item.address }}
|
||
</p>
|
||
<p>
|
||
<el-icon> <Clock /> </el-icon>{{ item.timestamp }}
|
||
</p>
|
||
<p>
|
||
<el-icon> <PhoneFilled /> </el-icon>{{ item.user1Phone }}
|
||
</p>
|
||
<p>设备号：{{ item.deviceId }}</p>
|
||
<p>平台来源：{{ item.alarmSource }}</p>
|
||
</li>
|
||
</div>
|
||
|
||
<el-empty v-else description="暂无数据"></el-empty>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
|
||
<div v-show="dialogTableVisible" class="dialogTableVisibleClass">
|
||
<el-popover :visible="visible" :show-arrow="false" placement="left" :width="400" :popper-style="{ background: '#06325F', border: '1px solid #60626654' }">
|
||
<template #reference>
|
||
<el-icon @click="clickKz(infoData)" style="top: -6px" size="16px" color="#409EFC">
|
||
<DArrowLeft />
|
||
</el-icon>
|
||
</template>
|
||
<el-icon size="16px" style="margin-left: 350px" color="#409EFC" @click="visible = false">
|
||
<DArrowRight />
|
||
</el-icon>
|
||
<div>
|
||
<p style="color: rgb(179, 194, 208)">视频点位:</p>
|
||
<ul v-if="ingrssddata">
|
||
<li style="text-align: center; color: #fff" v-if="ingrssddata.ipcList.length < 1">暂无数据</li>
|
||
<li v-else style="margin-left: 20px; margin-top: 10px; color: rgb(1, 216, 226)" v-for="(item, index) in ingrssddata.ipcList" :key="index">{{ item.title }}</li>
|
||
</ul>
|
||
</div>
|
||
<div style="margin-top: 10px">
|
||
<p style="color: rgb(179, 194, 208)">安保点位:</p>
|
||
<ul v-if="ingrssddata">
|
||
<li style="text-align: center; color: #fff" v-if="ingrssddata.mobileList.length < 1">暂无数据</li>
|
||
<li style="margin-left: 20px; margin-top: 10px; color: rgb(1, 216, 226)" v-for="(item, index) in ingrssddata.mobileList" :key="index">{{ item.title }}</li>
|
||
</ul>
|
||
</div>
|
||
<div style="margin-top: 10px">
|
||
<p style="color: rgb(179, 194, 208)">文件列表:</p>
|
||
<ul v-if="ingrssddata">
|
||
<li style="text-align: center; color: #fff" v-if="ingrssddata.fileList.length < 1">暂无数据</li>
|
||
<li style="display: inline-block; margin-right: 5px" v-for="(item, index) in ingrssddata.fileList" :key="index">
|
||
<el-image
|
||
style="width: 150px; height: 150px"
|
||
v-if="item.type == 'image'"
|
||
:src="item.url"
|
||
:zoom-rate="1.2"
|
||
:max-scale="7"
|
||
:min-scale="0.2"
|
||
:preview-src-list="[item.url]"
|
||
:initial-index="4"
|
||
fit="cover"
|
||
/>
|
||
<video width="150" height="150" v-if="item.type == 'video'" :src="item.url" autoplay="autoplay" controls></video>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</el-popover>
|
||
<el-icon @click="closee" style="position: absolute; left: 327px; top: 4px" size="23">
|
||
<close-bold />
|
||
</el-icon>
|
||
|
||
<ul>
|
||
<li style="margin-bottom: 20px">
|
||
<span id="" style="color: #b3c2d0"> 事件类型: </span>
|
||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||
{{ infoData.alarmCode }}
|
||
</span>
|
||
</li>
|
||
<li style="margin-bottom: 20px">
|
||
<span id="" style="color: #b3c2d0"> 上报时间: </span>
|
||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||
{{ infoData.timestamp }}
|
||
</span>
|
||
</li>
|
||
<li style="margin-bottom: 20px">
|
||
<span id="" style="color: #b3c2d0"> 上报地点: </span>
|
||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||
{{ infoData.address }}
|
||
</span>
|
||
</li>
|
||
<li style="margin-bottom: 20px">
|
||
<span id="" style="color: #b3c2d0"> 上报来源: </span>
|
||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||
{{ infoData.alarmSource }}
|
||
</span>
|
||
</li>
|
||
<li style="margin-bottom: 20px">
|
||
<span id="" style="color: #b3c2d0"> 核验状态: </span>
|
||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||
{{ totypecn(infoData.fakeState) }}
|
||
</span>
|
||
</li>
|
||
<li style="margin-bottom: 20px">
|
||
<span id="" style="color: #b3c2d0"> 转发模式: </span>
|
||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||
{{ infoData.reportMode == '1' ? '自动转发' : infoData.reportMode == '2' ? '核验转发' : '' }}
|
||
</span>
|
||
</li>
|
||
<li style="margin-bottom: 20px">
|
||
<span id="" style="color: #b3c2d0"> 描述信息: </span>
|
||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||
{{ infoData.description }}
|
||
</span>
|
||
</li>
|
||
<li style="margin-bottom: 20px">
|
||
<span id="" style="color: #b3c2d0"> 设备类型: </span>
|
||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||
{{ infoData.deviceType }}
|
||
</span>
|
||
</li>
|
||
<li style="margin-bottom: 20px">
|
||
<span id="" style="color: #b3c2d0"> 警报类型: </span>
|
||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||
{{ infoData.alarmCode }}
|
||
</span>
|
||
</li>
|
||
<li style="margin-bottom: 20px; display: flex">
|
||
<div style="flex: 1">
|
||
<span id="" style="color: #b3c2d0"> 联系人1: </span>
|
||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||
{{ infoData.user1Name }}
|
||
</span>
|
||
</div>
|
||
<div style="flex: 1">
|
||
<span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span>
|
||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||
{{ infoData.user1Phone }}
|
||
</span>
|
||
</div>
|
||
</li>
|
||
<li style="margin-bottom: 20px; display: flex">
|
||
<div style="flex: 1">
|
||
<span id="" style="color: #b3c2d0"> 联系人2: </span>
|
||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||
{{ infoData.user2Name }}
|
||
</span>
|
||
</div>
|
||
<div style="flex: 1">
|
||
<span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span>
|
||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||
{{ infoData.user2Phone }}
|
||
</span>
|
||
</div>
|
||
</li>
|
||
<li style="margin-bottom: 20px; display: flex">
|
||
<div style="flex: 1">
|
||
<span id="" style="color: #b3c2d0"> 联系人3: </span>
|
||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||
{{ infoData.user3Name }}
|
||
</span>
|
||
</div>
|
||
<div style="flex: 1">
|
||
<span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span>
|
||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||
{{ infoData.user3Phone }}
|
||
</span>
|
||
</div>
|
||
</li>
|
||
<li style="margin-bottom: 20px">
|
||
<span id="" style="color: #b3c2d0"> 处置状态: </span>
|
||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||
{{ infoData.state == 'new' ? '新事件' : infoData.state == 'processing' ? '处置中' : infoData.state == 'processed' ? '处置完成' : infoData.state == 'close' ? '关闭' : '' }}
|
||
</span>
|
||
</li>
|
||
<li style="margin-bottom: 20px">
|
||
<span id="" style="color: #01d8e2">
|
||
<div style="display: inline-block; margin-left: 3px">
|
||
<el-button @click="cz(infoData, upstatuslist)" type="primary" size="small">处置</el-button>
|
||
</div>
|
||
<div style="display: inline-block; margin-left: 3px" v-if="infoData.lockState == 'lock'">
|
||
<el-button @click="jiesuo(infoData)" type="info" size="small">解锁</el-button>
|
||
</div>
|
||
|
||
<div style="display: inline-block; margin-left: 3px" v-else>
|
||
<el-button @click="lock(infoData)" type="warning" size="small">锁定</el-button>
|
||
</div>
|
||
<div style="display: inline-block; margin-left: 3px">
|
||
<el-button type="danger" size="small" @click="close(infoData)">关闭</el-button>
|
||
</div>
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
<div style="width: 100%; border-top: 1px solid #fff; margin-top: 10px"></div>
|
||
<a-timeline style="color: #beceda; overflow-y: auto; height: 248px; padding-top: 10px">
|
||
<a-timeline-item v-for="(item, index) in upstatuslist" :key="index">
|
||
<p>{{ toCn(item.operation) }}</p>
|
||
<p>时间:{{ item.timestamp }}</p>
|
||
<p>操作者: {{ item.operatorType }}</p>
|
||
</a-timeline-item>
|
||
</a-timeline>
|
||
</div>
|
||
|
||
<div v-if="showIframe" class="iframe-container">
|
||
<iframe :src="videoUrl" frameborder="0"></iframe>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { JsonResult } from '@/axios'
|
||
import { cloneDeep } from 'lodash'
|
||
import type { TreeProps } from 'ant-design-vue'
|
||
import { Search } from '@element-plus/icons-vue'
|
||
import { createMqttData } from '@/utils/createMqttData'
|
||
import { sendMqtt } from '@/utils/sendMqtt'
|
||
import { wsUrl } from '@/utils/webSocket'
|
||
import * as _ from 'lodash'
|
||
import api from '@/axios'
|
||
import { useUserStore } from '@/stores/modules/userStore'
|
||
import { ElMessage } from 'element-plus'
|
||
import no from './imag/no.png'
|
||
import yes from './imag/yes.png'
|
||
import image1 from './imag/an.png'
|
||
import image2 from './imag/anbao.png'
|
||
import image3 from './imag/she.png'
|
||
import image4 from './imag/dsds.png'
|
||
import closeimag from './imag/infoClose.png'
|
||
import { Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick } from 'vue'
|
||
import type { CascaderProps } from 'ant-design-vue'
|
||
import type { ShowSearchType } from 'ant-design-vue/es/cascader'
|
||
const value = ref<string[]>([])
|
||
const options = ref<any[]>([])
|
||
const filter: ShowSearchType['filter'] = (inputValue, path) => {
|
||
return path.some((option) => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
|
||
}
|
||
const cascaderChange = (value: any, selectedOptions: any): void => {
|
||
let title = selectedOptions.slice(-1)[0]?.title
|
||
expandedKeys.value = value
|
||
// scrollToMatchedNode(title) //此功能还有bug：滑动会带着父元素一起滑动
|
||
}
|
||
|
||
const showIframe = ref(false)
|
||
const videoUrl = ref('')
|
||
|
||
const { proxy } = getCurrentInstance() as any
|
||
const day = proxy.day
|
||
const size = ref('')
|
||
const lodash = proxy.lodash
|
||
|
||
const zoom = ref('12')
|
||
const center = ref([121.59996, 31.197646])
|
||
let map: any
|
||
const expandedKeys = ref([])
|
||
const selectedKeys = ref([])
|
||
const checkedKeys = ref([])
|
||
|
||
const dialogTableVisible = ref(false)
|
||
|
||
const visible = ref(false)
|
||
const visibleb = ref(false)
|
||
import { useRouter } from 'vue-router'
|
||
|
||
const activeName = ref('first')
|
||
const router = useRouter()
|
||
const env = ref(import.meta.env.VITE_APP_BASE_API)
|
||
const handleClick = () => {}
|
||
const show3 = ref(true)
|
||
const show4 = ref(true)
|
||
const gbht = () => {
|
||
visible.value = false
|
||
}
|
||
|
||
const isActive1 = ref('1')
|
||
const qhzty2 = (data: any) => {
|
||
isActive1.value = data
|
||
}
|
||
|
||
watch(
|
||
() => useUserStore().getsoketData,
|
||
(newValue: any) => {
|
||
// console.log('newValue', newValue)
|
||
if (newValue != undefined) {
|
||
jinbao.value.push(newValue)
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
)
|
||
//
|
||
const closee = () => {
|
||
dialogTableVisible.value = false
|
||
visible.value = false
|
||
}
|
||
//解锁
|
||
const jiesuo = (data: any) => {
|
||
api
|
||
.post('/multialarm/client/alarm_event/unlock', {
|
||
eventId: data.multiAlarmId,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
ElMessage({
|
||
message: '解锁成功',
|
||
type: 'success',
|
||
})
|
||
getdayline()
|
||
let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']
|
||
api
|
||
.post('multialarm/client/sensor/alarm_event/getlist/today', {
|
||
name: localStorage.getItem('loginname'),
|
||
city: city == '湖南省' ? null : city,
|
||
start: day().format('YYYY-MM-DD HH:mm:ss'),
|
||
before: 1,
|
||
})
|
||
.then((res: JsonResult<any>) => {
|
||
if (res.code == 0) {
|
||
infoData.value.lockState = res.data[listindex.value]['lockState']
|
||
}
|
||
})
|
||
} else {
|
||
ElMessage.error('解锁失败')
|
||
}
|
||
})
|
||
}
|
||
//锁定
|
||
const lock = (data: any) => {
|
||
api
|
||
.post('/multialarm/client/alarm_event/lock', {
|
||
eventId: data.multiAlarmId,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
ElMessage({
|
||
message: '锁定成功',
|
||
type: 'success',
|
||
})
|
||
// console.log('listindex',listindex.value,jinbao.value)
|
||
getdayline()
|
||
let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']
|
||
api
|
||
.post('multialarm/client/sensor/alarm_event/getlist/today', {
|
||
name: localStorage.getItem('loginname'),
|
||
city: city == '湖南省' ? null : city,
|
||
start: day().format('YYYY-MM-DD HH:mm:ss'),
|
||
before: 1,
|
||
})
|
||
.then((res: JsonResult<any>) => {
|
||
if (res.code == 0) {
|
||
infoData.value.lockState = res.data[listindex.value]['lockState']
|
||
}
|
||
})
|
||
} else {
|
||
ElMessage.error('锁定失败')
|
||
}
|
||
})
|
||
}
|
||
|
||
const printLeafs = (tree: any, jirearr: any) => {
|
||
if (tree.children === null) {
|
||
if (tree.hasOwnProperty('stationId')) {
|
||
tree.code = tree?.stationId
|
||
}
|
||
tree.children = []
|
||
jirearr.forEach((x: any) => {
|
||
if (tree.stationId == x.stationId) {
|
||
tree.children.push(x)
|
||
//加入报警的
|
||
}
|
||
// 添加测试数据：往文艺路 下面的 长沙市芙蓉高级中学 添加 育英小学的数据
|
||
// if (tree.stationId === 'eead2a15-d6ca-433d-ba44-998f87c6092f' && x.stationId === '917ae0e4-d2cb-434b-a859-b6eb8abda036') {
|
||
// tree.children.push(x)
|
||
// }
|
||
})
|
||
} else {
|
||
tree.children.forEach((child: any) => {
|
||
printLeafs(child, jirearr)
|
||
})
|
||
}
|
||
}
|
||
const isActive = ref('6')
|
||
const qhzty = (data: any) => {
|
||
isActive.value = data
|
||
switch (data) {
|
||
case '1':
|
||
gettree4('001')
|
||
break
|
||
case '2':
|
||
gettree4('006')
|
||
break
|
||
case '3':
|
||
gettree4('002')
|
||
break
|
||
case '4':
|
||
gettree4('004')
|
||
break
|
||
case '5':
|
||
gettree4('009')
|
||
break
|
||
case '6':
|
||
gettree4('')
|
||
break
|
||
}
|
||
}
|
||
const fieldNames: TreeProps['fieldNames'] = {
|
||
key: 'code',
|
||
}
|
||
const loading = ref(false)
|
||
//四级组织树获取
|
||
const scrollContainer = ref()
|
||
// 定位树节点
|
||
const scrollToMatchedNode = (searchValue: string) => {
|
||
nextTick(() => {
|
||
try {
|
||
// console.log(treeRef.value) //这是一个proxy对象，并不是根元素
|
||
const treeEl = scrollContainer.value.querySelector('.ant-tree')
|
||
const titleElements = treeEl.querySelectorAll('.ant-tree-title')
|
||
const matchedNode: HTMLElement[] = []
|
||
|
||
titleElements.forEach((element: any) => {
|
||
if (element.textContent.trim() === searchValue) {
|
||
matchedNode.push(element)
|
||
}
|
||
})
|
||
// const parent = matchedNode[0].parentElement
|
||
// parent.style.overflow = 'hidden'
|
||
if (matchedNode.length === 1) {
|
||
matchedNode[0].scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||
}
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
})
|
||
}
|
||
const treedataall = ref([])
|
||
const searchValue = ref('') //搜索
|
||
const treeRef = ref() // 创建一个 ref 用来引用 a-tree 组件
|
||
// checkKeyExists___验证 key 方法
|
||
const checkKeyExists = (nodes: any, key: string): boolean => {
|
||
return nodes.some((node: any) => {
|
||
if (node.code === key) return true
|
||
if (node.children) return checkKeyExists(node.children, key)
|
||
return false
|
||
})
|
||
}
|
||
// 展开指定 树节点
|
||
const scrollToKey = (key: string) => {
|
||
console.log('scrollToKey', key)
|
||
const exists = checkKeyExists(treedataall.value, key)
|
||
if (!exists) {
|
||
console.error(`Key ${key} not found in the tree.`)
|
||
return
|
||
}
|
||
// 调用 scrollTo 方法
|
||
nextTick(() => {
|
||
treeRef.value.scrollTo({
|
||
key,
|
||
align: 'top', // 可选 top, bottom, auto
|
||
offset: 0, // 可选偏移量
|
||
})
|
||
})
|
||
}
|
||
// 搜索 树结构
|
||
const onSearch = () => {
|
||
let keysToExpand: any[]
|
||
keysToExpand = []
|
||
let keysToSelect: any[]
|
||
keysToSelect = []
|
||
|
||
const findKeys = (nodes: any, parentKeyPath: any[]) => {
|
||
nodes.forEach((node: any) => {
|
||
const nodeId = node.code
|
||
const currentPath = [...parentKeyPath, nodeId]
|
||
|
||
if (node.title.includes(searchValue.value)) {
|
||
console.log('node______', node)
|
||
|
||
keysToSelect.push(nodeId)
|
||
currentPath.forEach((key) => keysToExpand.push(key))
|
||
}
|
||
|
||
if (node.children && node.children.length > 0) {
|
||
findKeys(node.children, currentPath) // 递归处理子节点，传递当前路径
|
||
}
|
||
})
|
||
}
|
||
|
||
findKeys(treedataall.value, [])
|
||
|
||
console.log('Expanded Keys:', Array.from(keysToExpand))
|
||
console.log('Selected Keys:', keysToSelect)
|
||
if (keysToSelect.length === 0) {
|
||
ElMessage.warning(`未搜索到${searchValue.value}`)
|
||
}
|
||
|
||
expandedKeys.value = [...new Set(keysToExpand)]
|
||
selectedKeys.value = keysToSelect
|
||
if (selectedKeys.value.length > 0) {
|
||
console.log('selectedKeys.value', selectedKeys.value)
|
||
|
||
scrollToMatchedNode(searchValue.value)
|
||
// scrollToKey(selectedKeys.value[0])
|
||
}
|
||
}
|
||
const refreshTreeData = () => {
|
||
treedataall.value = [...treedataall.value]
|
||
}
|
||
const gettree4 = (data: any) => {
|
||
loading.value = true
|
||
api
|
||
.post('/common/client/user/org/tree4', {
|
||
name: localStorage.getItem('loginname'),
|
||
industry: data,
|
||
})
|
||
.then((res: JsonResult<any>) => {
|
||
if (res.code == 0) {
|
||
api
|
||
.post('/multialarm/client/alarm_point/getlist', {
|
||
name: localStorage.getItem('loginname'),
|
||
hylxdm: data,
|
||
})
|
||
.then((res1: JsonResult<any>) => {
|
||
res1.data.forEach((ele: any) => {
|
||
ele.code = ele.pointId //为什么是pointId，因为key需要唯一
|
||
})
|
||
let data = [res.data]
|
||
data.forEach((tree) => {
|
||
console.log('tree______', tree)
|
||
tree.children.reverse() // 长沙市排在前
|
||
printLeafs(tree, res1.data)
|
||
})
|
||
treedataall.value = [...data]
|
||
options.value = [...data]
|
||
loading.value = false
|
||
})
|
||
} else {
|
||
ElMessage.error('获取树数据失败')
|
||
}
|
||
})
|
||
}
|
||
const onLoadData: TreeProps['loadData'] = (treeNode) => {
|
||
return new Promise<void>((resolve) => {
|
||
if (treeNode.dataRef.children) {
|
||
resolve()
|
||
return
|
||
}
|
||
setTimeout(() => {
|
||
treeNode.dataRef.children = [
|
||
{ title: 'Child Node', key: `${treeNode.eventKey}-0` },
|
||
{ title: 'Child Node', key: `${treeNode.eventKey}-1` },
|
||
]
|
||
treedataall.value = [...treedataall.value]
|
||
resolve()
|
||
}, 1000)
|
||
})
|
||
}
|
||
//关闭
|
||
const close = (info: any) => {
|
||
api
|
||
.post('/multialarm/client/alarm_event/close', {
|
||
eventId: info.multiAlarmId,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
ElMessage({
|
||
message: '关闭成功',
|
||
type: 'success',
|
||
})
|
||
getdayline()
|
||
dialogTableVisible.value = false
|
||
//删除此条数据
|
||
// listData
|
||
// getRealTimeAlarmSituation()
|
||
} else {
|
||
ElMessage.error('关闭失败')
|
||
}
|
||
})
|
||
}
|
||
|
||
const gridData = [
|
||
{
|
||
date: '2016-05-02',
|
||
name: 'Jack',
|
||
address: 'New York City',
|
||
},
|
||
{
|
||
date: '2016-05-04',
|
||
name: 'Jack',
|
||
address: 'New York City',
|
||
},
|
||
{
|
||
date: '2016-05-01',
|
||
name: 'Jack',
|
||
address: 'New York City',
|
||
},
|
||
{
|
||
date: '2016-05-03',
|
||
name: 'Jack',
|
||
address: 'New York City',
|
||
},
|
||
]
|
||
const totypecn = (data: any) => {
|
||
if (data == '0') {
|
||
return '未核验'
|
||
} else if (data == '1') {
|
||
return '核验为假'
|
||
} else if (data == '2') {
|
||
return '核验为真'
|
||
}
|
||
}
|
||
const toCn = (data: any) => {
|
||
if (data == 'report') {
|
||
return '信息上报'
|
||
} else if (data == 'modify.userinfo') {
|
||
return '修改联系人信息'
|
||
} else if (data == 'modify.type') {
|
||
return '修改警报类型'
|
||
} else if (data == 'modify.fake') {
|
||
return '修改警报核验结果'
|
||
} else if (data == 'modify.description') {
|
||
return '修改警情描述'
|
||
} else if (data == 'file.add') {
|
||
return '添加文件'
|
||
} else if (data == 'Lock') {
|
||
return '警情信息锁定'
|
||
} else if (data == 'unLocKk') {
|
||
return '警情信息解锁'
|
||
} else if (data == 'change.state') {
|
||
return '修改状态'
|
||
}
|
||
}
|
||
const num = ref(100)
|
||
const handleChange = (value: number) => {
|
||
// console.log(value)
|
||
}
|
||
const cz = (infoData: any, upstatuslist: any) => {
|
||
let routeData = router.resolve({ path: '/index/communitymanage', query: { multiAlarmId: infoData.multiAlarmId, data: JSON.stringify(infoData), upstatuslist: JSON.stringify(upstatuslist) } })
|
||
window.open(routeData.href, '_blank')
|
||
}
|
||
;(window as any).cz2 = (infoData: any, upstatuslist: any) => {
|
||
let routeData = router.resolve({ path: '/index/communitymanage', query: { multiAlarmId: infoData.multiAlarmId, data: JSON.stringify(infoData), upstatuslist: JSON.stringify(upstatuslist) } })
|
||
window.open(routeData.href, '_blank')
|
||
}
|
||
const sendStationList = (rollCall_websocket: any, stationTempArr: any) => {
|
||
var getIot = {
|
||
msgcode: 102,
|
||
msgname: 'station-sensor-list',
|
||
message: stationTempArr,
|
||
}
|
||
var msg = JSON.stringify(getIot)
|
||
rollCall_websocket.send(msg)
|
||
}
|
||
const ingrssddata = ref()
|
||
const clickKz = (dat2a: any) => {
|
||
api
|
||
.post('/multialarm/client/alarm_event/get_all_resource', {
|
||
range: 1000,
|
||
multiAlarmId: dat2a.multiAlarmId,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
// console.log('ress', res)
|
||
ingrssddata.value = res.data
|
||
}
|
||
})
|
||
visible.value = true
|
||
}
|
||
|
||
onMounted(() => {
|
||
// await nextTick()
|
||
gettotal()
|
||
initMap()
|
||
gettree4('')
|
||
getAi()
|
||
getjingqing()
|
||
})
|
||
//
|
||
const treedata = () => {
|
||
api
|
||
.post('/multialarm/client/alarm_point/count', {
|
||
name: localStorage.getItem('loginname'),
|
||
hylxdm: '',
|
||
})
|
||
.then((res1: JsonResult<any>) => {
|
||
api
|
||
.post('/multialarm/client/alarm_point/getlist', {
|
||
name: localStorage.getItem('loginname'),
|
||
hylxdm: '',
|
||
pageindex: 0,
|
||
pagesize: res1.data.count,
|
||
})
|
||
.then((res: JsonResult<any>) => {
|
||
var points: any[] = []
|
||
|
||
res.data.map((x: any) => {
|
||
const marker = new AMap.Marker({
|
||
position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude),
|
||
offset: new AMap.Pixel(-15, -15),
|
||
icon: new AMap.Icon({
|
||
image: x.deviceType == '00' ? image3 : x.deviceType == '03' ? image1 : x.deviceType == '04' ? image2 : '',
|
||
size: new AMap.Size(40, 46.5),
|
||
imageSize: new AMap.Size(30, 30), //图标大小
|
||
}),
|
||
title: '',
|
||
})
|
||
marker.on('click', function () {
|
||
deviceInfoWindow.value = new AMap.InfoWindow({
|
||
isCustom: true, //使用自定义窗体
|
||
content: createSubstanceInfowindow2(x, '1'),
|
||
offset: new AMap.Pixel(5, -13),
|
||
})
|
||
deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
|
||
})
|
||
state.map.add(marker)
|
||
points.push(marker)
|
||
})
|
||
var count = points.length
|
||
// 聚合点样式
|
||
var _renderClusterMarker = function (context: any) {
|
||
var factor = Math.pow(context.count / count, 1 / 18)
|
||
var div = document.createElement('div')
|
||
var Hue = 180 - factor * 180
|
||
var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)'
|
||
var fontColor = 'hsla(' + Hue + ',100%,20%,1)'
|
||
var borderColor = 'hsla(' + Hue + ',100%,40%,1)'
|
||
var shadowColor = 'hsla(' + Hue + ',100%,50%,1)'
|
||
div.style.backgroundColor = bgColor
|
||
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 2)
|
||
div.style.width = div.style.height = size + 'px'
|
||
div.style.border = 'solid 1px ' + borderColor
|
||
div.style.borderRadius = size / 2 + 'px'
|
||
div.style.boxShadow = '0 0 1px ' + shadowColor
|
||
div.innerHTML = context.count
|
||
div.style.lineHeight = size + 'px'
|
||
div.style.color = fontColor
|
||
div.style.fontSize = '14px'
|
||
div.style.textAlign = 'center'
|
||
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
|
||
context.marker.setContent(div)
|
||
}
|
||
var cluster = new AMap.MarkerClusterer(state.map, points, {
|
||
gridSize: 80,
|
||
maxZoom: 12,
|
||
renderClusterMarker: _renderClusterMarker,
|
||
})
|
||
state.map.plugin(['AMap.MarkerClusterer'], () => {
|
||
let zoom = state.map.getZoom()
|
||
console.log('当前地图的缩放级别是：' + zoom)
|
||
cluster
|
||
})
|
||
})
|
||
})
|
||
}
|
||
//当日报警列表
|
||
const jinbao = ref([])
|
||
const getdayline = () => {
|
||
let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']
|
||
api
|
||
.post('multialarm/client/sensor/alarm_event/getlist/today', {
|
||
name: localStorage.getItem('loginname'),
|
||
city: city == '湖南省' ? null : city,
|
||
start: day().format('YYYY-MM-DD HH:mm:ss'),
|
||
before: 1,
|
||
})
|
||
.then((res: JsonResult<any>) => {
|
||
if (res.code == 0) {
|
||
// console.log('当日报警列表', res)
|
||
jinbao.value = res.data
|
||
if (res.data.length > 0) {
|
||
res.data.map((x: any) => {
|
||
if (x.state == 'close') {
|
||
const marker = new AMap.Marker({
|
||
position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude),
|
||
offset: new AMap.Pixel(-10, -10),
|
||
icon: new AMap.Icon({
|
||
image: yes,
|
||
size: new AMap.Size(40, 46.5),
|
||
imageSize: new AMap.Size(40, 46.5), //图标大小
|
||
}),
|
||
title: '',
|
||
})
|
||
marker.on('click', function () {
|
||
deviceInfoWindow.value = new AMap.InfoWindow({
|
||
isCustom: true, //使用自定义窗体
|
||
content: createSubstanceInfowindow(x, '1'),
|
||
offset: new AMap.Pixel(5, -13),
|
||
})
|
||
deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
|
||
})
|
||
state.map.add(marker)
|
||
} else {
|
||
const marker = new AMap.Marker({
|
||
position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude),
|
||
offset: new AMap.Pixel(-20, -10),
|
||
content: `<div class="indexMarkerImg">
|
||
<img style="width:30px;height:30px;left:9px;top:7px" src='${no}'>
|
||
<div class="markerClass">
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
</div>
|
||
</div>`,
|
||
title: '',
|
||
})
|
||
marker.on('click', function () {
|
||
deviceInfoWindow.value = new AMap.InfoWindow({
|
||
isCustom: true, //使用自定义窗体
|
||
content: createSubstanceInfowindow1(x, '1'),
|
||
offset: new AMap.Pixel(5, -13),
|
||
})
|
||
deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
|
||
})
|
||
state.map.add(marker)
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
}
|
||
})
|
||
}
|
||
//当日警情列表
|
||
const jinqing = ref([])
|
||
const getjingqing = () => {
|
||
let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']
|
||
api
|
||
.post('multialarm/client/sensor/alarm_event/getlist/today', {
|
||
name: localStorage.getItem('loginname'),
|
||
city: city == '湖南省' ? null : city,
|
||
fakeState: '2',
|
||
start: day().format('YYYY-MM-DD HH:mm:ss'),
|
||
before: 1,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
} else {
|
||
}
|
||
})
|
||
}
|
||
//获取当日ai预警
|
||
const AIyujing = ref<any[]>([])
|
||
const getAi = () => {
|
||
let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']
|
||
api
|
||
.post('/multialarm/ai/alarm/getlist/today', {
|
||
name: localStorage.getItem('loginname'),
|
||
city: city == '湖南省' ? null : city,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
// console.log('查询当日预警', res)
|
||
AIyujing.value = res.data as any[]
|
||
} else {
|
||
}
|
||
})
|
||
}
|
||
//获取一个city极其下属区县的报警数量统计
|
||
const total = ref({})
|
||
const gettotal = () => {
|
||
let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']
|
||
api
|
||
.post('multialarm/system/alarm/total', {
|
||
city: city == '湖南省' ? null : city,
|
||
state: 'close',
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
// console.log('??', res)
|
||
total.value = res.data
|
||
}
|
||
})
|
||
}
|
||
//
|
||
let deviceInfoWindow = ref<any>()
|
||
const selectA = (selectedKeys: any, e: any) => {
|
||
console.log('selectedKeys', selectedKeys, e)
|
||
if (selectedKeys[0].length >= 13) {
|
||
let targetLangLat = [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude]
|
||
|
||
deviceInfoWindow.value = new AMap.InfoWindow({
|
||
isCustom: true, //使用自定义窗体
|
||
content: createSubstanceInfowindow2(e.selectedNodes[0], '1'),
|
||
offset: new AMap.Pixel(5, -13),
|
||
})
|
||
deviceInfoWindow.value.open(state.map, [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude])
|
||
|
||
state.map.setZoomAndCenter(205, targetLangLat)
|
||
}
|
||
}
|
||
|
||
const createSubstanceInfowindow = (obj: any, type: any) => {
|
||
//定义顶部标题
|
||
var mdinfoTop = document.createElement('div')
|
||
mdinfoTop.className = 'mapPopInfo'
|
||
|
||
var userinfotop = document.createElement('div')
|
||
userinfotop.className = 'mapPopInfo-top'
|
||
|
||
var userinfoSpan = document.createElement('span')
|
||
userinfoSpan.innerHTML = `<span>${obj['title']}</span>`
|
||
|
||
var closeX = document.createElement('img')
|
||
closeX.src = closeimag
|
||
closeX.onclick = () => {
|
||
deviceInfoWindow.value.close()
|
||
}
|
||
|
||
var popMian = document.createElement('div')
|
||
popMian.className = 'mapPopInfo-main'
|
||
popMian.innerHTML = `<div>
|
||
${getSubstanceInfoWindowContent(obj, type)}
|
||
</div>`
|
||
|
||
userinfotop.append(userinfoSpan)
|
||
userinfotop.append(closeX)
|
||
|
||
mdinfoTop.append(userinfotop)
|
||
mdinfoTop.append(popMian)
|
||
|
||
return mdinfoTop
|
||
}
|
||
const createSubstanceInfowindow1 = (obj: any, type: any) => {
|
||
//定义顶部标题
|
||
var mdinfoTop = document.createElement('div')
|
||
mdinfoTop.className = 'mapPopInfo'
|
||
|
||
var userinfotop = document.createElement('div')
|
||
userinfotop.className = 'mapPopInfo-top'
|
||
|
||
var userinfoSpan = document.createElement('span')
|
||
userinfoSpan.innerHTML = `<span>${obj['city']}-${obj['district']}-${obj['town']}</span>`
|
||
|
||
var closeX = document.createElement('img')
|
||
closeX.src = closeimag
|
||
closeX.onclick = () => {
|
||
deviceInfoWindow.value.close()
|
||
}
|
||
|
||
var popMian = document.createElement('div')
|
||
popMian.className = 'mapPopInfo-main'
|
||
popMian.innerHTML = `<div>
|
||
${getSubstanceInfoWindowContent(obj, type)}
|
||
</div>`
|
||
|
||
userinfotop.append(userinfoSpan)
|
||
userinfotop.append(closeX)
|
||
|
||
mdinfoTop.append(userinfotop)
|
||
mdinfoTop.append(popMian)
|
||
|
||
return mdinfoTop
|
||
}
|
||
const createSubstanceInfowindow2 = (obj: any, type: any) => {
|
||
//定义顶部标题
|
||
var mdinfoTop = document.createElement('div')
|
||
mdinfoTop.className = 'mapPopInfo'
|
||
|
||
var userinfotop = document.createElement('div')
|
||
userinfotop.className = 'mapPopInfo-top'
|
||
|
||
var userinfoSpan = document.createElement('span')
|
||
userinfoSpan.innerHTML = `<span>${obj['city']}-${obj['district']}-${obj['town']}</span>`
|
||
|
||
var closeX = document.createElement('img')
|
||
closeX.src = closeimag
|
||
closeX.onclick = () => {
|
||
deviceInfoWindow.value.close()
|
||
}
|
||
|
||
var popMian = document.createElement('div')
|
||
popMian.className = 'mapPopInfo-main'
|
||
popMian.innerHTML = `<div>
|
||
${getSubstanceInfoWindowContent2(obj, type)}
|
||
</div>`
|
||
|
||
userinfotop.append(userinfoSpan)
|
||
userinfotop.append(closeX)
|
||
|
||
mdinfoTop.append(userinfotop)
|
||
mdinfoTop.append(popMian)
|
||
|
||
return mdinfoTop
|
||
}
|
||
|
||
const getSubstanceInfoWindowContent2 = (obj: any, type: any) => {
|
||
console.log('🚀 ~ getSubstanceInfoWindowContent2 ~ obj, type:', obj, type)
|
||
var station = obj['station']
|
||
var nickname = ''
|
||
if (obj.deviceType == '04' || obj.deviceType == '00') {
|
||
return `
|
||
<p>
|
||
<span>归属单位：</span>
|
||
<span>${obj['dwmc'] == undefined || null ? '--' : obj['dwmc']}</span>
|
||
<span>名称：</span>
|
||
<span>${obj['title'] == undefined || null ? '--' : obj['title']}</span>
|
||
</p>
|
||
<p>
|
||
<span>联系人：</span>
|
||
<span>${obj['user2Name'] == undefined || null ? '--' : obj['user2Name']}</span>
|
||
<span>电话：</span>
|
||
<span>${obj['user2Phone'] == undefined || null ? '--' : obj['user2Phone']}</span>
|
||
</p>
|
||
<p>
|
||
<span>地址:</span>
|
||
<span>${obj['pointAddress'] == undefined || null ? '--' : obj['pointAddress']}</span>
|
||
</p>
|
||
<p>
|
||
<button onclick='addrt(${JSON.stringify(obj)})' style="color='#fff'" type="button">播放视频</button>
|
||
</p>
|
||
`
|
||
} else {
|
||
return `
|
||
<p>
|
||
<span>归属单位：</span>
|
||
<span>${obj['dwmc'] == undefined || null ? '--' : obj['dwmc']}</span>
|
||
<span>名称：</span>
|
||
<span>${obj['title'] == undefined || null ? '--' : obj['title']}</span>
|
||
</p>
|
||
<p>
|
||
<span>联系人：</span>
|
||
<span>${obj['user2Name'] == undefined || null ? '--' : obj['user2Name']}</span>
|
||
<span>电话：</span>
|
||
<span>${obj['user2Phone'] == undefined || null ? '--' : obj['user2Phone']}</span>
|
||
</p>
|
||
<p>
|
||
<span>地址:</span>
|
||
<span>${obj['pointAddress'] == undefined || null ? '--' : obj['pointAddress']}</span>
|
||
</p>
|
||
`
|
||
}
|
||
}
|
||
const dialogVisible = ref(false)
|
||
const pointCode = ref()
|
||
|
||
;(window as any).addrt = (a: any) => {
|
||
console.log('播放_______________', a)
|
||
if (a.deviceType == '00') {
|
||
if (a.alarmType == 'isc') {
|
||
try {
|
||
let routeData = router.resolve({ path: '/index/hkplay', query: { pointId: a.pointId } })
|
||
window.open(routeData.href, '_blank')
|
||
} catch (error) {}
|
||
}
|
||
|
||
if (a.alarmType == 'ipc') {
|
||
// let routeData = router.resolve({ path: '/index/cwPlay', query: { pointId: a.pointId } })
|
||
// window.open(routeData.href, '_blank')
|
||
|
||
var url = `/cw_/index.html?id=${a.pointId}&title=${a.title}`
|
||
window.open(url, '_blank')
|
||
// const newWindow = window.open(url, '', 'width=' + 1920 + ',height=' + 1080 + ",top=0,left=0,status='no',location='no',resizable='no',toolbar='no'")
|
||
}
|
||
} else {
|
||
// 手持设备的播放
|
||
var width = 1280
|
||
var height = 760
|
||
let deviceID = a.deviceId
|
||
let timeID_: ReturnType<typeof setTimeout>
|
||
function preview() {
|
||
api.post('/multialarm/video/preview', { pointId: a.pointId }).then((res) => {
|
||
console.log('🚀 ~ /multialarm/video/preview:', res)
|
||
if (res.code === 0) {
|
||
keep()
|
||
timeID_ = setInterval(() => {
|
||
console.log(111111)
|
||
keep()
|
||
}, 60000)
|
||
}
|
||
})
|
||
}
|
||
function keep() {
|
||
api.post('/multialarm/video/keep', { pointId: a.pointId }).then((res) => {
|
||
console.log('🚀 ~ /multialarm/video/keep:', res)
|
||
})
|
||
}
|
||
function close() {
|
||
api.post('/multialarm/video/close', { pointId: a.pointId }).then((res) => {
|
||
console.log('🚀 ~ /multialarm/video/close:', res)
|
||
})
|
||
}
|
||
var url = `/rtc/moveDeviceVideoOne.html?id=${deviceID}`
|
||
const newWindow = window.open(url, '', 'width=' + width + ',height=' + height + ",top=0,left=0,status='no',location='no',resizable='no',toolbar='no'")
|
||
preview()
|
||
const onWindowClosed = () => {
|
||
console.log('timerID, timeID', timerID, timeID_)
|
||
close()
|
||
clearInterval(timeID_)
|
||
clearInterval(timerID)
|
||
console.log('新窗口已关闭____成功')
|
||
}
|
||
let timerID: ReturnType<typeof setTimeout>
|
||
if (newWindow) {
|
||
timerID = setInterval(() => {
|
||
if (newWindow.closed) {
|
||
onWindowClosed()
|
||
clearInterval(timerID)
|
||
}
|
||
}, 500)
|
||
}
|
||
}
|
||
}
|
||
|
||
const getSubstanceInfoWindowContent = (obj: any, type: any) => {
|
||
// console.log('obj', obj, type)
|
||
var station = obj['station']
|
||
var nickname = ''
|
||
if (type == '1' || type == '3') {
|
||
return `
|
||
<p>
|
||
<span>设备号：</span>
|
||
<span>${obj['alarmSource'] == undefined || null ? '--' : obj['alarmSource']}</span>
|
||
<span>名称：</span>
|
||
<span>${obj['alarmTarget'] == undefined || null ? '--' : obj['alarmTarget']}</span>
|
||
</p>
|
||
<p>
|
||
<span>联系人：</span>
|
||
<span>${obj['user1Name'] == undefined || null ? '--' : obj['user1Name']}</span>
|
||
<span>电话：</span>
|
||
<span>${obj['user1Phone'] == undefined || null ? '--' : obj['user1Phone']}</span>
|
||
</p>
|
||
<p>
|
||
<span>地址:</span>
|
||
<span>${obj['address'] == undefined || null ? '--' : obj['address']}</span>
|
||
</p>
|
||
<p>
|
||
<span>时间:</span>
|
||
<span>${obj['timestamp'] == undefined || null ? '--' : obj['timestamp']}</span>
|
||
</p>
|
||
<p>
|
||
<button onclick='cz2(${JSON.stringify(obj)},${JSON.stringify(upstatuslist)})' style="color='#fff'" type="button">处置</button>
|
||
</p>
|
||
`
|
||
} else {
|
||
return `
|
||
<div style="display:flex">
|
||
<div style="width:50%;">
|
||
<span>第一联系人：</span>
|
||
<span>${obj['userName'] == undefined || obj['userName'] == null || obj['userName'] == ' ' ? '--' : obj['userName']}</span>
|
||
</div>
|
||
<div style="width:50%;">
|
||
<span>电话：</span>
|
||
<span>${obj['userPhone'] == undefined || obj['userPhone'] == null || obj['userPhone'] == ' ' ? '--' : obj['userPhone']}</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;margin-top:10px">
|
||
<div style="width:50%;">
|
||
<span>第二联系人：</span>
|
||
<span>${obj['user2Name'] == undefined || obj['user2Name'] == null || obj['user2Name'] == ' ' ? '--' : obj['user2Name']}</span>
|
||
</div>
|
||
<div style="width:50%;">
|
||
<span>电话：</span>
|
||
<span>${obj['user2Phone'] == undefined || obj['user2Phone'] == null || obj['user2Phone'] == ' ' ? '--' : obj['user2Phone']}</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;margin-top:10px">
|
||
<div style="width:50%;">
|
||
<span>第三联系人：</span>
|
||
<span>${obj['user3Name'] == undefined || obj['user3Name'] == null || obj['user3Name'] == ' ' ? '--' : obj['user3Name']}</span>
|
||
</div>
|
||
<div style="width:50%;">
|
||
<span>电话：</span>
|
||
<span>${obj['user3Phone'] == undefined || obj['user3Phone'] == null || obj['user3Phone'] == ' ' ? '--' : obj['user3Phone']}</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;margin-top:10px">
|
||
<div style="width:50%;">
|
||
<span>区域码:</span>
|
||
<span>${obj['subCode'] == undefined || obj['subCode'] == null || obj['subCode'] == ' ' ? '--' : obj['subCode']}</span>
|
||
</div>
|
||
</div>
|
||
`
|
||
}
|
||
}
|
||
|
||
//实时警情
|
||
const listData = ref([])
|
||
const getRealTimeAlarmSituation = () => {
|
||
let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']
|
||
api
|
||
.post('/multialarm/client/alarm_event/getlist_diff', {
|
||
pagesize: 1000,
|
||
pageindex: 0,
|
||
city: city == '湖南省' ? null : city,
|
||
state: 'close',
|
||
start: day(day().format('YYYY-MM-DD')).format('YYYY-MM-DD HH:mm:ss'),
|
||
end: day().format('YYYY-MM-DD HH:mm:ss'),
|
||
})
|
||
.then((res: JsonResult<any>) => {
|
||
// console.log('实时警情', res)
|
||
if (res.code == 0) {
|
||
listData.value = res.data.reverse()
|
||
res.data.map((x: any) => {
|
||
const marker = new AMap.Marker({
|
||
position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude),
|
||
offset: new AMap.Pixel(-10, -10),
|
||
content: `<div class="indexMarkerImg">
|
||
<img style="width:30px;height:60px;left:9px;top:7px" src='${image4}'>
|
||
<div class="markerClass">
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
</div>
|
||
</div>`,
|
||
title: '',
|
||
})
|
||
marker.on('click', function () {
|
||
deviceInfoWindow.value = new AMap.InfoWindow({
|
||
isCustom: true, //使用自定义窗体
|
||
content: createSubstanceInfowindow1(x, '1'),
|
||
offset: new AMap.Pixel(5, -13),
|
||
})
|
||
deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
|
||
})
|
||
state.map.add(marker)
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
const infoData = ref<any>({})
|
||
const upstatuslist = ref([])
|
||
const listindex = ref()
|
||
const toinfo = (item: any, index: number) => {
|
||
listindex.value = index
|
||
// dialogTableVisible.value = false;
|
||
nextTick(() => {
|
||
infoData.value = item
|
||
if (item.state == 'new') {
|
||
//新事件转成处理中/firectrl/client/sensor/alarm_event/changestate
|
||
api
|
||
.post('/multialarm/client/alarm_event/changestate', {
|
||
eventId: item.multiAlarmId,
|
||
newState: 'processing',
|
||
device: 'web',
|
||
devictype: 'platform',
|
||
operator: localStorage.getItem('loginname'),
|
||
operatortype: '指挥中心',
|
||
})
|
||
.then((res) => {
|
||
getRealTimeAlarmSituation() //跟新实时警情列表
|
||
api
|
||
.post('/multialarm/client/alarm_event/getlog', {
|
||
eventId: item.multiAlarmId,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
upstatuslist.value = res.data as any[]
|
||
}
|
||
})
|
||
})
|
||
} else {
|
||
api
|
||
.post('/multialarm/client/alarm_event/getlog', {
|
||
eventId: item.multiAlarmId,
|
||
})
|
||
.then((res) => {
|
||
// console.log('PPres1', res)
|
||
if (res.code == 0) {
|
||
upstatuslist.value = res.data as any[]
|
||
}
|
||
})
|
||
}
|
||
|
||
//跳转地图marke
|
||
let targetLangLat = [item.longitude, item.latitude]
|
||
state.map.panTo(targetLangLat)
|
||
state.map.setZoomAndCenter(15, targetLangLat)
|
||
dialogTableVisible.value = true
|
||
})
|
||
}
|
||
//
|
||
|
||
var state = {
|
||
id: 'indexx',
|
||
map: null as any,
|
||
}
|
||
|
||
const initMap = () => {
|
||
let latitude = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['latitude']
|
||
let longitude = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['longitude']
|
||
|
||
state.map = new AMap.Map(state.id, {
|
||
// center: [113.015117, 28.209425],
|
||
center: [longitude, latitude],
|
||
zoom: 12,
|
||
})
|
||
treedata()
|
||
getdayline()
|
||
// stationWebsocket();
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.scrollContainer {
|
||
margin: 10px 20px;
|
||
height: 70%;
|
||
overflow: auto;
|
||
// position: absolute;
|
||
}
|
||
.slide-fade-enter-active {
|
||
transition: all 0.3s linear;
|
||
}
|
||
|
||
.slide-fade-leave-active {
|
||
transition: all 0.5s linear;
|
||
}
|
||
|
||
.slide-fade-enter-from,
|
||
.slide-fade-leave-to {
|
||
transform: translateX(-412px);
|
||
// opacity: 0;
|
||
}
|
||
|
||
.slide-fade1-enter-active {
|
||
transition: all 0.3s linear;
|
||
}
|
||
|
||
.slide-fade1-leave-active {
|
||
transition: all 0.5s linear;
|
||
}
|
||
|
||
.slide-fade1-enter-from,
|
||
.slide-fade1-leave-to {
|
||
transform: translateX(-412px);
|
||
// opacity: 0;
|
||
}
|
||
|
||
.title {
|
||
font-size: 16px;
|
||
color: #000;
|
||
line-height: 36px;
|
||
padding: 10px 15px;
|
||
}
|
||
|
||
.elBtns {
|
||
padding: 0 0 10px 15px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.elBtns div {
|
||
width: 94px;
|
||
height: 26px;
|
||
line-height: 26px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
background: #f2f3f5;
|
||
color: #666;
|
||
border-radius: 13px;
|
||
margin: 0 30px 8px 0;
|
||
float: left;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.elBtns .active {
|
||
background: #1e85fe;
|
||
color: #fff;
|
||
}
|
||
|
||
.searchBox {
|
||
// margin: 0 0 10px 15px;
|
||
margin: 0 15px;
|
||
}
|
||
|
||
.panelBox {
|
||
width: 100%;
|
||
height: 100px;
|
||
padding: 0 15px 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.panelBox div {
|
||
width: 120px;
|
||
height: 100px;
|
||
border-radius: 15px;
|
||
background: #f6f6fb;
|
||
overflow: hidden;
|
||
margin-right: 10px;
|
||
float: left;
|
||
}
|
||
|
||
.panelBox div img {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
margin: 12px 0 0 8px;
|
||
float: left;
|
||
}
|
||
|
||
.panelBox div p {
|
||
width: 40px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
text-align: center;
|
||
margin: 12px 0 0 8px;
|
||
float: left;
|
||
}
|
||
|
||
.panelBox div:first-child p i {
|
||
font-size: 26px;
|
||
color: #f3a562;
|
||
position: relative;
|
||
top: 6px;
|
||
}
|
||
|
||
.panelBox div:nth-child(2) p i {
|
||
font-size: 22px;
|
||
color: #ef5465;
|
||
position: relative;
|
||
top: 4px;
|
||
}
|
||
|
||
.panelBox div:nth-child(3) p i {
|
||
font-size: 22px;
|
||
color: #588ff6;
|
||
position: relative;
|
||
top: 4px;
|
||
}
|
||
|
||
.panelBox div span {
|
||
// width: 70px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
font-size: 14px;
|
||
color: #343b45;
|
||
padding-left: 15px;
|
||
margin: 12px 0 0;
|
||
float: left;
|
||
}
|
||
|
||
.panelBox div b {
|
||
width: 120px;
|
||
line-height: 40px;
|
||
height: 40px;
|
||
text-align: center;
|
||
font-size: 20px;
|
||
font-weight: normal;
|
||
color: #f3a562;
|
||
float: left;
|
||
}
|
||
|
||
.panelBox div:nth-child(3) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.panelBox div:nth-child(2) b {
|
||
color: #ef5465;
|
||
}
|
||
|
||
.panelBox div:nth-child(3) b {
|
||
color: #588ff6;
|
||
}
|
||
|
||
.tabs {
|
||
width: 370px;
|
||
height: 40px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
}
|
||
|
||
.tabs div {
|
||
flex: 1;
|
||
border-bottom: 3px solid #e8e8ed;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tabs div span {
|
||
width: 100%;
|
||
height: 38px;
|
||
line-height: 38px;
|
||
display: inline-block;
|
||
text-align: center;
|
||
color: #818282;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.tabs div.active1 {
|
||
border-bottom: 3px solid #70aafc;
|
||
}
|
||
|
||
.tabs div.active1 span {
|
||
color: #333;
|
||
}
|
||
|
||
.dataList {
|
||
box-sizing: border-box;
|
||
width: 420px;
|
||
height: 91%;
|
||
overflow: auto;
|
||
margin: 0 auto;
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.dataList li {
|
||
width: 100%;
|
||
min-height: 120px;
|
||
border-bottom: 1px solid #e8e9ed;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.dataList li p {
|
||
width: 50%;
|
||
font-size: 14px;
|
||
color: #818282;
|
||
line-height: 32px;
|
||
float: left;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.dataList li p:first-child {
|
||
width: 100%;
|
||
font-size: 16px;
|
||
color: #333;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.dataList li p:first-child i,
|
||
.dataList li p:nth-child(2) i {
|
||
font-size: 26px;
|
||
color: #a1c7fe;
|
||
margin-right: 5px;
|
||
position: relative;
|
||
top: 8px;
|
||
}
|
||
|
||
.dataList li p:nth-child(2) i {
|
||
font-size: 18px;
|
||
color: #818282;
|
||
margin-right: 15px;
|
||
position: relative;
|
||
top: 4px;
|
||
left: 5px;
|
||
}
|
||
|
||
.dataList li p:nth-child(3) i {
|
||
font-size: 18px;
|
||
color: #5798f5;
|
||
margin-right: 5px;
|
||
top: 4px;
|
||
}
|
||
|
||
.dataList li p:nth-child(4) {
|
||
padding-left: 35px;
|
||
}
|
||
|
||
.tiops::-webkit-scrollbar {
|
||
width: 5px;
|
||
}
|
||
|
||
.tiops::-webkit-scrollbar-track {
|
||
background: #fff;
|
||
}
|
||
|
||
.tiops::-webkit-scrollbar-thumb {
|
||
background-color: #616161;
|
||
/* 设置滚动条滑块颜色 */
|
||
}
|
||
|
||
.seamless-warp {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.titleLeftBg {
|
||
width: 100%;
|
||
line-height: 32px;
|
||
color: #fff;
|
||
text-indent: 30px;
|
||
font-size: 16px;
|
||
font-family: ysbth;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.indexx {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
// position: absolute !important;
|
||
|
||
.left-cont {
|
||
box-sizing: border-box;
|
||
// width: 412px;
|
||
height: 100%;
|
||
// background-color: rgb(9 45 84 / 80%);
|
||
background-color: #fff;
|
||
z-index: 999;
|
||
// border: 10px solid #f2f3f5;
|
||
// border-top: 12px solid #f2f3f5;
|
||
// border-right: 12px solid #f2f3f5;
|
||
position: absolute;
|
||
// top: 0;
|
||
// left: 0;
|
||
overflow: hidden;
|
||
|
||
.titleLeftBg {
|
||
width: 100%;
|
||
line-height: 32px;
|
||
color: #fff;
|
||
text-indent: 30px;
|
||
font-size: 16px;
|
||
font-family: ysbth;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.right-cont {
|
||
width: 412px;
|
||
height: 100%;
|
||
background-color: #fff;
|
||
z-index: 999;
|
||
position: absolute;
|
||
right: 0;
|
||
border: 10px solid #f2f3f5;
|
||
// border-top: 12px solid #f2f3f5;
|
||
// border-left: 12px solid #f2f3f5;
|
||
|
||
.titleLeftBg {
|
||
width: 100%;
|
||
line-height: 32px;
|
||
color: #616161;
|
||
text-indent: 30px;
|
||
font-size: 16px;
|
||
font-family: ysbth;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.gttex {
|
||
color: #cde0f3;
|
||
font-size: 16px;
|
||
font-style: italic;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.gttext {
|
||
font-size: 22px;
|
||
color: #fff;
|
||
margin-right: 6px;
|
||
font-weight: bold;
|
||
font-family: pmzd;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
}
|
||
|
||
.pt {
|
||
color: #a9c0cf;
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
|
||
.intab {
|
||
width: 100%;
|
||
height: 38px;
|
||
line-height: 35px;
|
||
padding-left: 20px;
|
||
background-image: url(@/assets/images/ipeak/g.png);
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
color: #d2e9fa;
|
||
}
|
||
|
||
.intabF {
|
||
width: 100%;
|
||
height: 38px;
|
||
line-height: 35px;
|
||
padding-left: 20px;
|
||
background-image: url(@/assets/images/ipeak/h.png);
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
color: #d2e9fa;
|
||
}
|
||
|
||
.titibgo {
|
||
width: 100%;
|
||
background: #fff;
|
||
color: #616161;
|
||
}
|
||
|
||
.titibgoa {
|
||
width: 100%;
|
||
background: #ccc;
|
||
color: #616161;
|
||
}
|
||
|
||
.titlrob {
|
||
width: 100%;
|
||
line-height: 24px;
|
||
background: #f9fafc;
|
||
color: #868686;
|
||
background-position-x: -12px;
|
||
}
|
||
|
||
:deep(.el-card) {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
:deep(.el-card__header) {
|
||
padding: 1px;
|
||
}
|
||
|
||
:deep(.el-timeline-item__content) {
|
||
color: #fff;
|
||
}
|
||
|
||
:deep(.el-input-number__decrease, .el-input-number__increase) {
|
||
background: transparent !important;
|
||
color: #fff;
|
||
}
|
||
|
||
:deep(.el-dialog__title) {
|
||
color: #fff;
|
||
}
|
||
|
||
:deep(.el-dialog) {
|
||
--el-dialog-bg-color: #06325f;
|
||
}
|
||
|
||
:deep(.el-dialog__headerbtn .el-dialog__close) {
|
||
// color: #32DCFB;
|
||
}
|
||
|
||
:deep(.el-dialog__header) {
|
||
border-bottom: 1px solid #ccc;
|
||
margin-right: 0px;
|
||
margin-left: 0px;
|
||
}
|
||
|
||
:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-tree) {
|
||
background: transparent;
|
||
}
|
||
|
||
:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-select:not(.ant-select-customize-input) .ant-select-selector) {
|
||
border-color: #0465bb !important;
|
||
background: none;
|
||
color: #fff;
|
||
}
|
||
|
||
:deep(.el-select .el-input .el-select__caret) {
|
||
color: #ccc;
|
||
}
|
||
|
||
:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-btn-primary) {
|
||
background-color: transparent;
|
||
color: rgba(0, 0, 0, 0.88);
|
||
}
|
||
|
||
:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-btn.ant-btn-sm) {
|
||
border: 1px solid #ccc;
|
||
}
|
||
|
||
:deep(.el-tree) {
|
||
background: transparent;
|
||
color: #fff;
|
||
--el-tree-node-hover-bg-color: #1079b1;
|
||
}
|
||
|
||
:deep(.el-tree-node__expand-icon) {
|
||
color: #0586c6;
|
||
}
|
||
|
||
:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-timeline .ant-timeline-item-head-blue) {
|
||
color: #2cb7c7;
|
||
border-color: #2cb7c7;
|
||
}
|
||
|
||
:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-timeline .ant-timeline-item-head) {
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
|
||
:deep(:where(.css-dev-only-do-not-override-19iuou).ant-timeline .ant-timeline-item-tail) {
|
||
border-inline-start: 2px solid #1677ff;
|
||
inset-inline-start: 4px;
|
||
}
|
||
|
||
:deep(.el-checkbox__inner) {
|
||
background-color: transparent;
|
||
}
|
||
|
||
:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-tree .ant-tree-checkbox .ant-tree-checkbox-inner) {
|
||
background-color: transparent;
|
||
}
|
||
|
||
:deep(.ant-tree-iconEle) {
|
||
display: flex !important;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
:deep(
|
||
:where(.css-dev-only-do-not-override-1qb1s0s).ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected,
|
||
:where(.css-dev-only-do-not-override-1qb1s0s).ant-tree .ant-tree-checkbox + span.ant-tree-node-selected
|
||
) {
|
||
background-color: transparent;
|
||
}
|
||
|
||
:deep(.ant-tree-node-content-wrapper) {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
:deep(.ant-tree .ant-tree-list-holder-inner) {
|
||
/* background: #cccccc2b; */
|
||
background: #fff;
|
||
color: rgba(0, 0, 0, 0.88);
|
||
}
|
||
|
||
:deep(.ant-tree .ant-tree-treenode) {
|
||
margin: 3px 0;
|
||
}
|
||
|
||
:deep(.ant-tree .ant-tree-checkbox) {
|
||
margin-inline-end: 0;
|
||
margin-block-start: 0;
|
||
}
|
||
|
||
.tree_font {
|
||
padding: 4px 8px 4px 4px;
|
||
background: #115e99;
|
||
border: 1px solid #169be5;
|
||
border-radius: 4px;
|
||
font-style: italic;
|
||
font-size: 14px;
|
||
margin-left: 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mapPopInfo {
|
||
width: 450px;
|
||
}
|
||
|
||
.mapPopInfo-top {
|
||
height: 33px;
|
||
line-height: 33px;
|
||
background: linear-gradient(to right, #0d6295, #0872b1, #0872b18c);
|
||
padding: 0 15px;
|
||
border: solid 2px #2d94b5;
|
||
border-bottom: solid 1px #54bbda;
|
||
}
|
||
|
||
.mapPopInfo-top > img {
|
||
float: right;
|
||
margin: 3px 0;
|
||
}
|
||
|
||
.mapPopInfo-top > span > span {
|
||
float: left;
|
||
width: 330px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.mapPopInfo-main {
|
||
padding: 15px;
|
||
background: #13213bab;
|
||
box-shadow: inset 1px 1px 14px 2px #32689e;
|
||
border: solid 2px #2d94b5;
|
||
border-top: 0;
|
||
}
|
||
|
||
.mapPopInfo-main > div > p {
|
||
line-height: 30px;
|
||
}
|
||
|
||
.mapPopInfo-main > div > p > span:nth-child(3) {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.mapPopInfo-main > div > p > button {
|
||
height: 26px;
|
||
line-height: 26px;
|
||
background: #2081c1;
|
||
color: #fff;
|
||
border: 1px solid #2081c1;
|
||
box-shadow: 0 0 3px 3px #244b68;
|
||
}
|
||
.iframe-container {
|
||
width: 80%;
|
||
height: 80%;
|
||
position: fixed;
|
||
top: 10%;
|
||
left: 10%;
|
||
border: 1px solid #ccc;
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||
background: #fff;
|
||
}
|
||
iframe {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.dialogTableVisibleClass {
|
||
position: fixed;
|
||
top: 115px;
|
||
right: 448px;
|
||
background: rgb(21, 42, 95);
|
||
z-index: 99;
|
||
width: 349px;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
// padding-top: 20px;
|
||
}
|
||
</style>
|