同步 离线地图和在线地图 页面的代码、保持风格一致
This commit is contained in:
parent
0645598eb3
commit
5e752e5ab9
|
|
@ -0,0 +1 @@
|
|||
export const reqUrl = ' https://www.hndyjqrh.cn'
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
export const throttle = (func: (...args: any[]) => void, limit: number) => {
|
||||
let lastFunc: ReturnType<typeof setTimeout>;
|
||||
let lastRan: number | undefined;
|
||||
|
||||
return function (this: any, ...args: any[]) { // 为 this 添加类型注解
|
||||
if (!lastRan) {
|
||||
func.apply(this, args);
|
||||
lastRan = Date.now();
|
||||
} else {
|
||||
clearTimeout(lastFunc);
|
||||
lastFunc = setTimeout(() => {
|
||||
if (Date.now() - (lastRan as number) >= limit) {
|
||||
func.apply(this, args);
|
||||
lastRan = Date.now();
|
||||
}
|
||||
}, limit - (Date.now() - (lastRan as number)));
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
@ -11,7 +11,8 @@
|
|||
</li>
|
||||
<li>
|
||||
<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
|
||||
<router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold" to="/index/offlinemap">安保力量</router-link>
|
||||
<!-- <router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold" to="/index/offlinemap">安保力量</router-link> -->
|
||||
<router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold" to="/index/index">安保力量</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
|
||||
|
|
@ -58,12 +59,12 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from '@/stores/modules/userStore'
|
||||
import { useWebSocket } from '@vueuse/core'
|
||||
import { wsUrl } from '@/utils/webSocket'
|
||||
import { ref, reactive, watch, onMounted } from 'vue'
|
||||
import {useUserStore} from '@/stores/modules/userStore'
|
||||
import {useWebSocket} from '@vueuse/core'
|
||||
import {wsUrl} from '@/utils/webSocket'
|
||||
import {ref, reactive, watch, onMounted} from 'vue'
|
||||
import api from '@/axios'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {useRouter} from 'vue-router'
|
||||
const router = useRouter()
|
||||
const isshow = ref(true)
|
||||
const loginname = localStorage.getItem('loginname')
|
||||
|
|
@ -87,14 +88,14 @@ watch(
|
|||
isshow.value = false
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
{immediate: true}
|
||||
)
|
||||
let istab = ref('6')
|
||||
const sendStationList = (rollCall_websocket: any, stationTempArr: any) => {
|
||||
var getIot = {
|
||||
msgcode: 102,
|
||||
msgname: 'station-sensor-list',
|
||||
message: stationTempArr,
|
||||
message: stationTempArr
|
||||
}
|
||||
var msg = JSON.stringify(getIot)
|
||||
rollCall_websocket.send(msg)
|
||||
|
|
@ -102,20 +103,20 @@ const sendStationList = (rollCall_websocket: any, stationTempArr: any) => {
|
|||
const stationHashList = ref([])
|
||||
const stationWebsocket = () => {
|
||||
//心跳检测 建立链接 断开重连
|
||||
const { data, ws } = useWebSocket(wsUrl('/ClientWebSocket'), {
|
||||
const {data, ws} = useWebSocket(wsUrl('/ClientWebSocket'), {
|
||||
heartbeat: {
|
||||
message: 'ping',
|
||||
interval: 1000 * 10,
|
||||
pongTimeout: 1000 * 10,
|
||||
pongTimeout: 1000 * 10
|
||||
},
|
||||
autoReconnect: true,
|
||||
autoReconnect: true
|
||||
})
|
||||
ws.value.onopen = () => {
|
||||
console.log('链接打开')
|
||||
var messageObj = {
|
||||
msgcode: 100,
|
||||
msgname: 'session',
|
||||
message: useUserStore().getToken,
|
||||
message: useUserStore().getToken
|
||||
}
|
||||
var msg = JSON.stringify(messageObj)
|
||||
ws.value.send(msg)
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
</template>
|
||||
<!-- -->
|
||||
<script setup lang="ts">
|
||||
import {reqUrl} from '@/url'
|
||||
import {JsonResult} from '@/axios'
|
||||
import api from '@/axios'
|
||||
import {ElMessage} from 'element-plus'
|
||||
|
|
@ -105,10 +106,13 @@ const login = async () => {
|
|||
localStorage.setItem('totaldata', JSON.stringify(res.data))
|
||||
}
|
||||
})
|
||||
// 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=430000.geojson'
|
||||
const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + resp.data.geoCode + '.geojson'
|
||||
|
||||
const url = `${reqUrl}/api/multialarm/pic/download?creator=geo&file=${resp.data.geoCode}.geojson`
|
||||
|
||||
fetch(url)
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
|
||||
var status = response['status']
|
||||
if (status == 500) {
|
||||
return new Promise((resovle) => {
|
||||
|
|
@ -120,6 +124,8 @@ const login = async () => {
|
|||
}
|
||||
})
|
||||
.then((data: any) => {
|
||||
console.log(data)
|
||||
|
||||
localStorage.setItem('mapdata', data)
|
||||
router.push('/index/indexmin').then(() => {
|
||||
notification.success({
|
||||
|
|
|
|||
|
|
@ -1,15 +1,8 @@
|
|||
<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>
|
||||
<a-layout class="layout">
|
||||
<!-- 左侧区域 -->
|
||||
<a-layout-sider :collapsed="collapsed.left" width="22%">
|
||||
<div class="left-cont">
|
||||
<h2 class="title" v-show="show3">资源数量</h2>
|
||||
<div class="elBtns" v-show="show3">
|
||||
<div @click="qhzty('6')" :class="{active: isActive == '6'}">全部</div>
|
||||
|
|
@ -68,18 +61,37 @@
|
|||
</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>
|
||||
</a-layout-sider>
|
||||
<!-- 中间地图区域 -->
|
||||
<a-layout-content>
|
||||
<div :id="state.id" class="indexx">
|
||||
<!-- 左边缩进按钮 -->
|
||||
<div class="left-close-icon">
|
||||
<el-button @click="collapsed.left = !collapsed.left" style="position: absolute; top: 0px; right: -38px" id="toggle-sidebar" type="info" circle>
|
||||
<el-icon v-if="!collapsed.left">
|
||||
<d-arrow-left />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<d-arrow-right />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 右边缩进按钮 -->
|
||||
<div class="right-close-icon">
|
||||
<el-button @click="collapsed.right = !collapsed.right" style="position: absolute; top: 0px; left: -38px" id="toggle-sidebar" type="info" circle>
|
||||
<el-icon v-if="!collapsed.right">
|
||||
<d-arrow-right />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<d-arrow-left />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-layout-content>
|
||||
<!-- 右侧区域 -->
|
||||
<a-layout-sider :collapsed="collapsed.right" width="22%">
|
||||
<div class="right-cont">
|
||||
<h2 class="title">系统数据</h2>
|
||||
<div class="panelBox">
|
||||
<div>
|
||||
|
|
@ -120,12 +132,12 @@
|
|||
<span>警情【{{ jinqing.length }}】</span>
|
||||
</div>
|
||||
<div @click="qhzty2('3')" :class="{active1: isActive1 == '3'}">
|
||||
<span>AI预警【{{ AIyujing.length }}】</span>
|
||||
<span>AI预警【{{ aiCount }}】</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)">
|
||||
<li style="cursor: pointer" v-for="(item, index) in jinbao" :key="index" @click="toinfo(item, index)">
|
||||
<p>
|
||||
<el-icon> <LocationFilled /> </el-icon>{{ item.address }}
|
||||
</p>
|
||||
|
|
@ -144,7 +156,7 @@
|
|||
</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)">
|
||||
<li style="cursor: pointer" v-for="(item, index) in jinqing" :key="index" @click="toinfo(item, index)">
|
||||
<p>
|
||||
<el-icon> <LocationFilled /> </el-icon>{{ item.address }}
|
||||
</p>
|
||||
|
|
@ -161,9 +173,9 @@
|
|||
|
||||
<el-empty v-else description="暂无数据"></el-empty>
|
||||
</ul>
|
||||
<ul class="dataList" v-show="isActive1 == '3'">
|
||||
<ul class="dataList" v-show="isActive1 == '3'" @scroll="handleScroll">
|
||||
<div v-if="AIyujing.length > 0">
|
||||
<li v-for="(item, index) in AIyujing" :key="index" @click="toinfo(item, index)">
|
||||
<li style="cursor: pointer" v-for="(item, index) in AIyujing" :key="index" @click="toinfo(item, index)">
|
||||
<p>
|
||||
<el-icon> <LocationFilled /> </el-icon>{{ item.address }}
|
||||
</p>
|
||||
|
|
@ -179,12 +191,14 @@
|
|||
</div>
|
||||
|
||||
<el-empty v-else description="暂无数据"></el-empty>
|
||||
<a-spin v-show="showLoading" :indicator="indicator" />
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
</a-layout-sider>
|
||||
<!-- 固定弹窗 -->
|
||||
<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">
|
||||
|
|
@ -229,110 +243,111 @@
|
|||
</ul>
|
||||
</div>
|
||||
</el-popover>
|
||||
<el-icon @click="closee" style="position: absolute; left: 327px; top: 4px" size="23">
|
||||
<!-- 关闭固定弹窗按钮 -->
|
||||
<el-icon color="#fff" @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">
|
||||
<span id="" class="c_b3c2d0"> 事件类型: </span>
|
||||
<span id="" class="p10c">
|
||||
{{ infoData.alarmCode }}
|
||||
</span>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color: #b3c2d0"> 上报时间: </span>
|
||||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||||
<span id="" class="c_b3c2d0"> 上报时间: </span>
|
||||
<span id="" class="p10c">
|
||||
{{ infoData.timestamp }}
|
||||
</span>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color: #b3c2d0"> 上报地点: </span>
|
||||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||||
<span id="" class="c_b3c2d0"> 上报地点: </span>
|
||||
<span id="" class="p10c">
|
||||
{{ infoData.address }}
|
||||
</span>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color: #b3c2d0"> 上报来源: </span>
|
||||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||||
<span id="" class="c_b3c2d0"> 上报来源: </span>
|
||||
<span id="" class="p10c">
|
||||
{{ infoData.alarmSource }}
|
||||
</span>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color: #b3c2d0"> 核验状态: </span>
|
||||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||||
<span id="" class="c_b3c2d0"> 核验状态: </span>
|
||||
<span id="" class="p10c">
|
||||
{{ totypecn(infoData.fakeState) }}
|
||||
</span>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color: #b3c2d0"> 转发模式: </span>
|
||||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||||
<span id="" class="c_b3c2d0"> 转发模式: </span>
|
||||
<span id="" class="p10c">
|
||||
{{ 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">
|
||||
<span id="" class="c_b3c2d0"> 描述信息: </span>
|
||||
<span id="" class="p10c">
|
||||
{{ infoData.description }}
|
||||
</span>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color: #b3c2d0"> 设备类型: </span>
|
||||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||||
<span id="" class="c_b3c2d0"> 设备类型: </span>
|
||||
<span id="" class="p10c">
|
||||
{{ infoData.deviceType }}
|
||||
</span>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color: #b3c2d0"> 警报类型: </span>
|
||||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||||
<span id="" class="c_b3c2d0"> 警报类型: </span>
|
||||
<span id="" class="p10c">
|
||||
{{ 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">
|
||||
<span id="" class="c_b3c2d0"> 联系人1: </span>
|
||||
<span id="" class="p10c">
|
||||
{{ 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">
|
||||
<span id="" class="p10c">
|
||||
{{ 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">
|
||||
<span id="" class="c_b3c2d0"> 联系人2: </span>
|
||||
<span id="" class="p10c">
|
||||
{{ 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">
|
||||
<span id="" class="p10c">
|
||||
{{ 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">
|
||||
<span id="" class="c_b3c2d0"> 联系人3: </span>
|
||||
<span id="" class="p10c">
|
||||
{{ 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">
|
||||
<span id="" class="p10c">
|
||||
{{ infoData.user3Phone }}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color: #b3c2d0"> 处置状态: </span>
|
||||
<span id="" style="color: #01d8e2; margin-left: 10px">
|
||||
<span id="" class="c_b3c2d0"> 处置状态: </span>
|
||||
<span id="" class="p10c">
|
||||
{{ infoData.state == 'new' ? '新事件' : infoData.state == 'processing' ? '处置中' : infoData.state == 'processed' ? '处置完成' : infoData.state == 'close' ? '关闭' : '' }}
|
||||
</span>
|
||||
</li>
|
||||
|
|
@ -367,16 +382,17 @@
|
|||
<div v-if="showIframe" class="iframe-container">
|
||||
<iframe :src="videoUrl" frameborder="0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</a-layout>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {JsonResult} from '@/axios'
|
||||
import {cloneDeep} from 'lodash'
|
||||
// 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 {Search} from '@element-plus/icons-vue'
|
||||
// import {createMqttData} from '@/utils/createMqttData'
|
||||
// import {sendMqtt} from '@/utils/sendMqtt'
|
||||
// import {wsUrl} from '@/utils/webSocket'
|
||||
// import type {CascaderProps} from 'ant-design-vue'
|
||||
import * as _ from 'lodash'
|
||||
import api from '@/axios'
|
||||
import {useUserStore} from '@/stores/modules/userStore'
|
||||
|
|
@ -388,53 +404,47 @@ 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 {Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick, h} from 'vue'
|
||||
|
||||
import type {ShowSearchType} from 'ant-design-vue/es/cascader'
|
||||
const value = ref<string[]>([])
|
||||
const options = ref<any[]>([])
|
||||
|
||||
import {LoadingOutlined} from '@ant-design/icons-vue'
|
||||
|
||||
const indicator = h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '24px'
|
||||
},
|
||||
spin: true
|
||||
})
|
||||
const collapsed = ref({
|
||||
left: false,
|
||||
right: false
|
||||
})
|
||||
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：滑动会带着父元素一起滑动
|
||||
scrollToMatchedNode(title)
|
||||
}
|
||||
interface anyType {
|
||||
[key: string]: any
|
||||
}
|
||||
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
|
||||
|
|
@ -565,9 +575,7 @@ const qhzty = (data: any) => {
|
|||
break
|
||||
}
|
||||
}
|
||||
const fieldNames: TreeProps['fieldNames'] = {
|
||||
key: 'code'
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
//四级组织树获取
|
||||
const scrollContainer = ref()
|
||||
|
|
@ -585,8 +593,7 @@ const scrollToMatchedNode = (searchValue: string) => {
|
|||
matchedNode.push(element)
|
||||
}
|
||||
})
|
||||
// const parent = matchedNode[0].parentElement
|
||||
// parent.style.overflow = 'hidden'
|
||||
|
||||
if (matchedNode.length === 1) {
|
||||
matchedNode[0].scrollIntoView({behavior: 'smooth', block: 'center'})
|
||||
}
|
||||
|
|
@ -607,67 +614,67 @@ const checkKeyExists = (nodes: any, key: string): boolean => {
|
|||
})
|
||||
}
|
||||
// 展开指定 树节点
|
||||
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 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 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]
|
||||
// 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)
|
||||
// if (node.title.includes(searchValue.value)) {
|
||||
// console.log('node______', node)
|
||||
|
||||
keysToSelect.push(nodeId)
|
||||
currentPath.forEach((key) => keysToExpand.push(key))
|
||||
}
|
||||
// keysToSelect.push(nodeId)
|
||||
// currentPath.forEach((key) => keysToExpand.push(key))
|
||||
// }
|
||||
|
||||
if (node.children && node.children.length > 0) {
|
||||
findKeys(node.children, currentPath) // 递归处理子节点，传递当前路径
|
||||
}
|
||||
})
|
||||
}
|
||||
// if (node.children && node.children.length > 0) {
|
||||
// findKeys(node.children, currentPath) // 递归处理子节点，传递当前路径
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
findKeys(treedataall.value, [])
|
||||
// findKeys(treedataall.value, [])
|
||||
|
||||
console.log('Expanded Keys:', Array.from(keysToExpand))
|
||||
console.log('Selected Keys:', keysToSelect)
|
||||
if (keysToSelect.length === 0) {
|
||||
ElMessage.warning(`未搜索到${searchValue.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)
|
||||
// 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]
|
||||
}
|
||||
// scrollToMatchedNode(searchValue.value)
|
||||
// // scrollToKey(selectedKeys.value[0])
|
||||
// }
|
||||
// }
|
||||
// const refreshTreeData = () => {
|
||||
// treedataall.value = [...treedataall.value]
|
||||
// }
|
||||
const gettree4 = (data: any) => {
|
||||
loading.value = true
|
||||
api
|
||||
|
|
@ -701,22 +708,7 @@ const gettree4 = (data: any) => {
|
|||
}
|
||||
})
|
||||
}
|
||||
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
|
||||
|
|
@ -731,37 +723,12 @@ const close = (info: any) => {
|
|||
})
|
||||
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 '未核验'
|
||||
|
|
@ -792,10 +759,7 @@ const toCn = (data: any) => {
|
|||
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')
|
||||
|
|
@ -804,15 +768,7 @@ 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')
|
||||
}
|
||||
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
|
||||
|
|
@ -830,7 +786,7 @@ const clickKz = (dat2a: any) => {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
// await nextTick()
|
||||
getAiCount()
|
||||
gettotal()
|
||||
initMap()
|
||||
gettree4('')
|
||||
|
|
@ -999,23 +955,54 @@ const getjingqing = () => {
|
|||
}
|
||||
})
|
||||
}
|
||||
|
||||
const showLoading = ref<boolean>(false)
|
||||
//获取当日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 {
|
||||
}
|
||||
})
|
||||
const aiCount = ref<number>(0)
|
||||
const getAiCount = () => {
|
||||
api.post('/multialarm/ai/alarm/count/today').then((res: JsonResult<any>) => {
|
||||
if (res.code == 0) {
|
||||
aiCount.value = res.data.count
|
||||
}
|
||||
})
|
||||
}
|
||||
let pageIndex = ref<number>(0)
|
||||
const getAi = async () => {
|
||||
let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']
|
||||
const res: JsonResult<any> = await api.post('/multialarm/ai/alarm/getlist/today', {
|
||||
name: localStorage.getItem('loginname'),
|
||||
city: city == '湖南省' ? null : city,
|
||||
pagesize: 10,
|
||||
pageindex: pageIndex.value
|
||||
})
|
||||
if (res.code == 0) {
|
||||
AIyujing.value = [...AIyujing.value, ...res.data]
|
||||
showLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
import {throttle} from '@/utils/throttle'
|
||||
|
||||
let lastScrollTop = 0
|
||||
|
||||
const handleScroll = throttle(async (event: any) => {
|
||||
const {scrollTop, scrollHeight, clientHeight} = event.target
|
||||
if (scrollTop > lastScrollTop) {
|
||||
if (scrollTop + clientHeight >= scrollHeight - 10) {
|
||||
if (aiCount.value > AIyujing.value.length) {
|
||||
showLoading.value = true
|
||||
pageIndex.value++
|
||||
await getAi()
|
||||
// console.log(aiCount.value, AIyujing.value.length)
|
||||
}
|
||||
if (aiCount.value === AIyujing.value.length) return
|
||||
}
|
||||
}
|
||||
|
||||
lastScrollTop = scrollTop // 更新最后的滚动位置
|
||||
}, 200)
|
||||
|
||||
//获取一个city极其下属区县的报警数量统计
|
||||
const total = ref<anyType>({})
|
||||
const gettotal = () => {
|
||||
|
|
@ -1191,8 +1178,6 @@ const getSubstanceInfoWindowContent2 = (obj: any, type: any) => {
|
|||
`
|
||||
}
|
||||
}
|
||||
const dialogVisible = ref(false)
|
||||
const pointCode = ref()
|
||||
|
||||
;(window as any).addrt = (a: any) => {
|
||||
console.log('播放_______________', a)
|
||||
|
|
@ -1453,8 +1438,41 @@ const initMap = () => {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:where(.css-dev-only-do-not-override-19iuou).ant-layout {
|
||||
color: white;
|
||||
}
|
||||
.indexx {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.left-close-icon {
|
||||
z-index: 9999;
|
||||
position: absolute;
|
||||
margin-top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.right-close-icon {
|
||||
z-index: 9999;
|
||||
position: absolute;
|
||||
margin-top: 10px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.layout {
|
||||
height: 100%;
|
||||
}
|
||||
.c_b3c2d0 {
|
||||
color: #b3c2d0;
|
||||
}
|
||||
.p10c {
|
||||
color: #01d8e2;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.scrollContainer {
|
||||
margin: 10px 20px;
|
||||
margin-top: 10px;
|
||||
height: 70%;
|
||||
overflow: auto;
|
||||
// position: absolute;
|
||||
|
|
@ -1649,7 +1667,7 @@ const initMap = () => {
|
|||
box-sizing: border-box;
|
||||
width: 420px;
|
||||
height: 91%;
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
|
@ -1734,58 +1752,43 @@ const initMap = () => {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.indexx {
|
||||
// overflow: hidden;
|
||||
// position: absolute !important;
|
||||
|
||||
.left-cont {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
z-index: 999;
|
||||
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: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
// position: absolute !important;
|
||||
background-color: #fff;
|
||||
z-index: 999;
|
||||
// border: 10px solid #f2f3f5;
|
||||
|
||||
.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;
|
||||
}
|
||||
.titleLeftBg {
|
||||
width: 100%;
|
||||
line-height: 32px;
|
||||
color: #616161;
|
||||
text-indent: 30px;
|
||||
font-size: 16px;
|
||||
font-family: ysbth;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gttex {
|
||||
|
|
@ -1990,6 +1993,7 @@ const initMap = () => {
|
|||
|
||||
.mapPopInfo {
|
||||
width: 450px;
|
||||
// color: white !important;
|
||||
}
|
||||
|
||||
.mapPopInfo-top {
|
||||
|
|
@ -2057,10 +2061,151 @@ iframe {
|
|||
top: 115px;
|
||||
right: 448px;
|
||||
background: rgb(21, 42, 95);
|
||||
z-index: 99;
|
||||
z-index: 999;
|
||||
width: 349px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
// padding-top: 20px;
|
||||
}
|
||||
|
||||
// 弹窗样式修改
|
||||
:deep(.leaflet-popup-content-wrapper) {
|
||||
// background: #07315e !important;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
width: 500px;
|
||||
color: #fff !important;
|
||||
font-size: 14px;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
:deep(.leaflet-popup-content) {
|
||||
width: calc(100% - 40px) !important;
|
||||
}
|
||||
|
||||
:deep(.leaflet-popup-content > div) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.leaflet-popup-content .sb_bInfo) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.leaflet-popup-content p) {
|
||||
margin: 10px 0 !important;
|
||||
}
|
||||
|
||||
:deep(.sb_grade > div > div) {
|
||||
float: left;
|
||||
width: 16%;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
:deep(.sb_grade > div > div > p) {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
:deep(.schoolWindowInfo .sb_grade) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
:deep(.leaflet-popup-content-wrapper),
|
||||
:deep(.leaflet-popup-tip) {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
:deep(.leaflet-popup-close-button) {
|
||||
color: #fff !important;
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
font-size: 30px !important;
|
||||
}
|
||||
|
||||
:deep(.warnEventInfoWindow) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.warnEventInfoWindow > p) {
|
||||
float: left;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
:deep(.warnEventInfoWindow > div) {
|
||||
float: left;
|
||||
width: calc(100% - 130px);
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
:deep(.warnEventInfoWindow > p > img) {
|
||||
width: 100%;
|
||||
}
|
||||
// 弹窗样式修改
|
||||
|
||||
// :deep(.leaflet-popup-content-wrapper) {
|
||||
// background: #07315e !important;
|
||||
// width: 500px;
|
||||
// color: #fff !important;
|
||||
// font-size: 14px;
|
||||
// }
|
||||
|
||||
// :deep(.leaflet-popup-content) {
|
||||
// width: calc(100% - 40px) !important;
|
||||
// }
|
||||
|
||||
// :deep(.leaflet-popup-content > div) {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
// :deep(.leaflet-popup-content .sb_bInfo) {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
// :deep(.leaflet-popup-content p) {
|
||||
// margin: 10px 0 !important;
|
||||
// }
|
||||
|
||||
// :deep(.sb_grade > div > div) {
|
||||
// float: left;
|
||||
// width: 16%;
|
||||
// margin-top: 3px;
|
||||
// }
|
||||
|
||||
// :deep(.sb_grade > div > div > p) {
|
||||
// line-height: 20px;
|
||||
// }
|
||||
|
||||
// :deep(.schoolWindowInfo .sb_grade) {
|
||||
// margin-top: 10px;
|
||||
// }
|
||||
|
||||
// :deep(.leaflet-popup-content-wrapper),
|
||||
// :deep(.leaflet-popup-tip) {
|
||||
// background: #07315e !important;
|
||||
// }
|
||||
|
||||
// :deep(.leaflet-popup-close-button) {
|
||||
// color: #fff !important;
|
||||
// width: 30px !important;
|
||||
// height: 30px !important;
|
||||
// font-size: 30px !important;
|
||||
// }
|
||||
|
||||
// :deep(.warnEventInfoWindow) {
|
||||
// overflow: hidden;
|
||||
// }
|
||||
|
||||
// :deep(.warnEventInfoWindow > p) {
|
||||
// float: left;
|
||||
// width: 120px;
|
||||
// }
|
||||
|
||||
// :deep(.warnEventInfoWindow > div) {
|
||||
// float: left;
|
||||
// width: calc(100% - 130px);
|
||||
// margin-left: 10px;
|
||||
// }
|
||||
|
||||
// :deep(.warnEventInfoWindow > p > img) {
|
||||
// width: 100%;
|
||||
// }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -177,6 +177,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {reqUrl} from '@/url'
|
||||
import effectScatterData from '@/utils/effectScatterData'
|
||||
import linesData from '@/utils/linesData'
|
||||
import 'echarts-gl'
|
||||
|
|
@ -267,8 +268,8 @@ const hy = () => {
|
|||
maskColor: 'rgba(255, 255, 255, 0.2)',
|
||||
zlevel: 0
|
||||
})
|
||||
// const url = 'https://www.hndyjqrh.cn:8083/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
|
||||
const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
|
||||
const url = `${reqUrl}/api/multialarm/pic/download?creator=geo&file=${fhcode}.geojson`
|
||||
|
||||
fetch(url)
|
||||
.then((response) => {
|
||||
var status = response['status']
|
||||
|
|
@ -887,9 +888,7 @@ const initMapdt = (data: any, podat: any, name: any) => {
|
|||
getaiyuji(x.name, '', '')
|
||||
getdayline(x.name, '', '')
|
||||
getAi(x.name, '', '')
|
||||
//item.code
|
||||
// const url = 'https://www.hndyjqrh.cn:8083/multialarm/pic/download?creator=geo&file=' + item.code + '.geojson'
|
||||
const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + item.code + '.geojson'
|
||||
const url = `${reqUrl}/api/multialarm/pic/download?creator=geo&file=${item.code}.geojson`
|
||||
fetch(url)
|
||||
.then((response) => {
|
||||
var status = response['status']
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@
|
|||
<span>警情【{{ jinqing.length }}】</span>
|
||||
</div>
|
||||
<div @click="qhzty2('3')" :class="{active1: isActive1 == '3'}">
|
||||
<span>AI预警【{{ AIyujing.length }}】</span>
|
||||
<span>AI预警【{{ aiCount }}】</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="dataList" v-show="isActive1 == '1'">
|
||||
|
|
@ -173,7 +173,7 @@
|
|||
|
||||
<el-empty v-else description="暂无数据"></el-empty>
|
||||
</ul>
|
||||
<ul class="dataList" v-show="isActive1 == '3'">
|
||||
<ul @scroll="handleScroll" class="dataList" v-show="isActive1 == '3'">
|
||||
<div v-if="AIyujing.length > 0">
|
||||
<li style="cursor: pointer" v-for="(item, index) in AIyujing" :key="index" @click="toinfo(item, index)">
|
||||
<p>
|
||||
|
|
@ -714,6 +714,7 @@ onMounted(() => {
|
|||
gettree4('')
|
||||
getAi()
|
||||
getjingqing()
|
||||
getAiCount()
|
||||
})
|
||||
let deviceInfoWindow = ref<any>(null)
|
||||
const treedata = () => {
|
||||
|
|
@ -913,22 +914,48 @@ const getjingqing = () => {
|
|||
})
|
||||
}
|
||||
//获取当日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 {
|
||||
}
|
||||
})
|
||||
const aiCount = ref<number>(0)
|
||||
const getAiCount = () => {
|
||||
api.post('/multialarm/ai/alarm/count/today').then((res: JsonResult<any>) => {
|
||||
if (res.code == 0) {
|
||||
aiCount.value = res.data.count
|
||||
}
|
||||
})
|
||||
}
|
||||
let pageIndex = ref<number>(0)
|
||||
const AIyujing = ref<any[]>([])
|
||||
const getAi = async () => {
|
||||
let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']
|
||||
const res: JsonResult<any> = await api.post('/multialarm/ai/alarm/getlist/today', {
|
||||
name: localStorage.getItem('loginname'),
|
||||
city: city == '湖南省' ? null : city,
|
||||
pagesize: 10,
|
||||
pageindex: pageIndex.value
|
||||
})
|
||||
if (res.code == 0) {
|
||||
AIyujing.value = [...AIyujing.value, ...res.data]
|
||||
}
|
||||
}
|
||||
|
||||
import {throttle} from '@/utils/throttle'
|
||||
|
||||
let lastScrollTop = 0
|
||||
|
||||
const handleScroll = throttle(async (event: any) => {
|
||||
const {scrollTop, scrollHeight, clientHeight} = event.target
|
||||
if (scrollTop > lastScrollTop) {
|
||||
if (scrollTop + clientHeight >= scrollHeight - 10) {
|
||||
if (aiCount.value > AIyujing.value.length) {
|
||||
pageIndex.value++
|
||||
await getAi()
|
||||
}
|
||||
if (aiCount.value === AIyujing.value.length) return
|
||||
}
|
||||
}
|
||||
|
||||
lastScrollTop = scrollTop // 更新最后的滚动位置
|
||||
}, 200)
|
||||
|
||||
//获取一个city极其下属区县的报警数量统计
|
||||
const total = ref<anyType>({})
|
||||
const gettotal = () => {
|
||||
|
|
@ -2102,73 +2129,4 @@ iframe {
|
|||
:deep(.warnEventInfoWindow > p > img) {
|
||||
width: 100%;
|
||||
}
|
||||
// 弹窗样式修改
|
||||
|
||||
// :deep(.leaflet-popup-content-wrapper) {
|
||||
// background: #07315e !important;
|
||||
// width: 500px;
|
||||
// color: #fff !important;
|
||||
// font-size: 14px;
|
||||
// }
|
||||
|
||||
// :deep(.leaflet-popup-content) {
|
||||
// width: calc(100% - 40px) !important;
|
||||
// }
|
||||
|
||||
// :deep(.leaflet-popup-content > div) {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
// :deep(.leaflet-popup-content .sb_bInfo) {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
// :deep(.leaflet-popup-content p) {
|
||||
// margin: 10px 0 !important;
|
||||
// }
|
||||
|
||||
// :deep(.sb_grade > div > div) {
|
||||
// float: left;
|
||||
// width: 16%;
|
||||
// margin-top: 3px;
|
||||
// }
|
||||
|
||||
// :deep(.sb_grade > div > div > p) {
|
||||
// line-height: 20px;
|
||||
// }
|
||||
|
||||
// :deep(.schoolWindowInfo .sb_grade) {
|
||||
// margin-top: 10px;
|
||||
// }
|
||||
|
||||
// :deep(.leaflet-popup-content-wrapper),
|
||||
// :deep(.leaflet-popup-tip) {
|
||||
// background: #07315e !important;
|
||||
// }
|
||||
|
||||
// :deep(.leaflet-popup-close-button) {
|
||||
// color: #fff !important;
|
||||
// width: 30px !important;
|
||||
// height: 30px !important;
|
||||
// font-size: 30px !important;
|
||||
// }
|
||||
|
||||
// :deep(.warnEventInfoWindow) {
|
||||
// overflow: hidden;
|
||||
// }
|
||||
|
||||
// :deep(.warnEventInfoWindow > p) {
|
||||
// float: left;
|
||||
// width: 120px;
|
||||
// }
|
||||
|
||||
// :deep(.warnEventInfoWindow > div) {
|
||||
// float: left;
|
||||
// width: calc(100% - 130px);
|
||||
// margin-left: 10px;
|
||||
// }
|
||||
|
||||
// :deep(.warnEventInfoWindow > p > img) {
|
||||
// width: 100%;
|
||||
// }
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue