Libt
/
multiple-police-situations
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

同步 离线地图和在线地图 页面的代码、保持风格一致

This commit is contained in:
TimSpan 2024-10-25 11:03:29 +08:00
parent 0645598eb3
commit 5e752e5ab9
7 changed files with 502 additions and 373 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/url.ts Normal file
View File

@ -0,0 +1 @@
export const reqUrl = ' https://www.hndyjqrh.cn'

19
src/utils/throttle.ts Normal file
View File

@ -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)));
}
};
};

25
src/views/index.vue
View File

@ -11,7 +11,8 @@
</li> </li>
<li> <li>
<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" /> <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>
<li> <li>
<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" /> <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
@ -58,12 +59,12 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useUserStore } from '@/stores/modules/userStore' import {useUserStore} from '@/stores/modules/userStore'
import { useWebSocket } from '@vueuse/core' import {useWebSocket} from '@vueuse/core'
import { wsUrl } from '@/utils/webSocket' import {wsUrl} from '@/utils/webSocket'
import { ref, reactive, watch, onMounted } from 'vue' import {ref, reactive, watch, onMounted} from 'vue'
import api from '@/axios' import api from '@/axios'
import { useRouter } from 'vue-router' import {useRouter} from 'vue-router'
const router = useRouter() const router = useRouter()
const isshow = ref(true) const isshow = ref(true)
const loginname = localStorage.getItem('loginname') const loginname = localStorage.getItem('loginname')
@ -87,14 +88,14 @@ watch(
isshow.value = false isshow.value = false
} }
}, },
{ immediate: true } {immediate: true}
) )
let istab = ref('6') let istab = ref('6')
const sendStationList = (rollCall_websocket: any, stationTempArr: any) => { const sendStationList = (rollCall_websocket: any, stationTempArr: any) => {
var getIot = { var getIot = {
msgcode: 102, msgcode: 102,
msgname: 'station-sensor-list', msgname: 'station-sensor-list',
message: stationTempArr, message: stationTempArr
} }
var msg = JSON.stringify(getIot) var msg = JSON.stringify(getIot)
rollCall_websocket.send(msg) rollCall_websocket.send(msg)
@ -102,20 +103,20 @@ const sendStationList = (rollCall_websocket: any, stationTempArr: any) => {
const stationHashList = ref([]) const stationHashList = ref([])
const stationWebsocket = () => { const stationWebsocket = () => {
//心跳检测 建立链接 断开重连 //心跳检测 建立链接 断开重连
const { data, ws } = useWebSocket(wsUrl('/ClientWebSocket'), { const {data, ws} = useWebSocket(wsUrl('/ClientWebSocket'), {
heartbeat: { heartbeat: {
message: 'ping', message: 'ping',
interval: 1000 * 10, interval: 1000 * 10,
pongTimeout: 1000 * 10, pongTimeout: 1000 * 10
}, },
autoReconnect: true, autoReconnect: true
}) })
ws.value.onopen = () => { ws.value.onopen = () => {
console.log('链接打开') console.log('链接打开')
var messageObj = { var messageObj = {
msgcode: 100, msgcode: 100,
msgname: 'session', msgname: 'session',
message: useUserStore().getToken, message: useUserStore().getToken
} }
var msg = JSON.stringify(messageObj) var msg = JSON.stringify(messageObj)
ws.value.send(msg) ws.value.send(msg)

10
src/views/login.vue
View File

@ -24,6 +24,7 @@
</template> </template>
<!-- --> <!-- -->
<script setup lang="ts"> <script setup lang="ts">
import {reqUrl} from '@/url'
import {JsonResult} from '@/axios' import {JsonResult} from '@/axios'
import api from '@/axios' import api from '@/axios'
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
@ -105,10 +106,13 @@ const login = async () => {
localStorage.setItem('totaldata', JSON.stringify(res.data)) 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) fetch(url)
.then((response) => { .then((response) => {
console.log(response)
var status = response['status'] var status = response['status']
if (status == 500) { if (status == 500) {
return new Promise((resovle) => { return new Promise((resovle) => {
@ -120,6 +124,8 @@ const login = async () => {
} }
}) })
.then((data: any) => { .then((data: any) => {
console.log(data)
localStorage.setItem('mapdata', data) localStorage.setItem('mapdata', data)
router.push('/index/indexmin').then(() => { router.push('/index/indexmin').then(() => {
notification.success({ notification.success({

681
src/views/page/index.vue
View File

@ -1,15 +1,8 @@
<template> <template>
<div class="indexx" :id="state.id"> <a-layout class="layout">
<Transition name="slide-fade"> <!-- 左侧区域 -->
<div class="left-cont" :style="{width: show3 ? '412px' : '0px', border: show3 ? '10px solid #f2f3f5' : '0px'}"> <a-layout-sider :collapsed="collapsed.left" width="22%">
<el-button @click="show3 = !show3" style="position: absolute; top: 0px; right: -38px" id="toggle-sidebar" type="info" circle> <div class="left-cont">
<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> <h2 class="title" v-show="show3">资源数量</h2>
<div class="elBtns" v-show="show3"> <div class="elBtns" v-show="show3">
<div @click="qhzty('6')" :class="{active: isActive == '6'}">全部</div> <div @click="qhzty('6')" :class="{active: isActive == '6'}">全部</div>
@ -68,18 +61,37 @@
</a-tree> </a-tree>
</div> </div>
</div> </div>
</Transition> </a-layout-sider>
<!-- 中间地图区域 -->
<Transition name="slide-fade1"> <a-layout-content>
<div class="right-cont" :style="{width: show4 ? '412px' : '0px', border: show4 ? '10px solid #f2f3f5' : '0px'}"> <div :id="state.id" class="indexx">
<el-button @click="show4 = !show4" style="position: absolute; top: 0px; left: -38px" id="toggle-sidebar1" type="info" circle> <!-- 左边缩进按钮 -->
<el-icon v-if="show4"> <div class="left-close-icon">
<d-arrow-right /> <el-button @click="collapsed.left = !collapsed.left" style="position: absolute; top: 0px; right: -38px" id="toggle-sidebar" type="info" circle>
</el-icon> <el-icon v-if="!collapsed.left">
<el-icon v-else> <d-arrow-left />
<d-arrow-left /> </el-icon>
</el-icon> <el-icon v-else>
</el-button> <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> <h2 class="title">系统数据</h2>
<div class="panelBox"> <div class="panelBox">
<div> <div>
@ -120,12 +132,12 @@
<span>警情【{{ jinqing.length }}】</span> <span>警情【{{ jinqing.length }}】</span>
</div> </div>
<div @click="qhzty2('3')" :class="{active1: isActive1 == '3'}"> <div @click="qhzty2('3')" :class="{active1: isActive1 == '3'}">
<span>AI预警【{{ AIyujing.length }}】</span> <span>AI预警【{{ aiCount }}】</span>
</div> </div>
</div> </div>
<ul class="dataList" v-show="isActive1 == '1'"> <ul class="dataList" v-show="isActive1 == '1'">
<div v-if="jinbao.length > 0"> <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> <p>
<el-icon> <LocationFilled /> </el-icon>{{ item.address }} <el-icon> <LocationFilled /> </el-icon>{{ item.address }}
</p> </p>
@ -144,7 +156,7 @@
</ul> </ul>
<ul class="dataList" v-show="isActive1 == '2'"> <ul class="dataList" v-show="isActive1 == '2'">
<div v-if="jinqing.length > 0"> <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> <p>
<el-icon> <LocationFilled /> </el-icon>{{ item.address }} <el-icon> <LocationFilled /> </el-icon>{{ item.address }}
</p> </p>
@ -161,9 +173,9 @@
<el-empty v-else description="暂无数据"></el-empty> <el-empty v-else description="暂无数据"></el-empty>
</ul> </ul>
<ul class="dataList" v-show="isActive1 == '3'"> <ul class="dataList" v-show="isActive1 == '3'" @scroll="handleScroll">
<div v-if="AIyujing.length > 0"> <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> <p>
<el-icon> <LocationFilled /> </el-icon>{{ item.address }} <el-icon> <LocationFilled /> </el-icon>{{ item.address }}
</p> </p>
@ -179,12 +191,14 @@
</div> </div>
<el-empty v-else description="暂无数据"></el-empty> <el-empty v-else description="暂无数据"></el-empty>
<a-spin v-show="showLoading" :indicator="indicator" />
</ul> </ul>
</div> </div>
</div> </div>
</Transition> </a-layout-sider>
<!-- 固定弹窗 -->
<div v-show="dialogTableVisible" class="dialogTableVisibleClass"> <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'}"> <el-popover :visible="visible" :show-arrow="false" placement="left" :width="400" :popper-style="{background: '#06325F', border: '1px solid #60626654'}">
<template #reference> <template #reference>
<el-icon @click="clickKz(infoData)" style="top: -6px" size="16px" color="#409EFC"> <el-icon @click="clickKz(infoData)" style="top: -6px" size="16px" color="#409EFC">
@ -229,110 +243,111 @@
</ul> </ul>
</div> </div>
</el-popover> </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 /> <close-bold />
</el-icon> </el-icon>
<ul> <ul>
<li style="margin-bottom: 20px"> <li style="margin-bottom: 20px">
<span id="" style="color: #b3c2d0"> 事件类型: </span> <span id="" class="c_b3c2d0"> 事件类型: </span>
<span id="" style="color: #01d8e2; margin-left: 10px"> <span id="" class="p10c">
{{ infoData.alarmCode }} {{ infoData.alarmCode }}
</span> </span>
</li> </li>
<li style="margin-bottom: 20px"> <li style="margin-bottom: 20px">
<span id="" style="color: #b3c2d0"> 上报时间: </span> <span id="" class="c_b3c2d0"> 上报时间: </span>
<span id="" style="color: #01d8e2; margin-left: 10px"> <span id="" class="p10c">
{{ infoData.timestamp }} {{ infoData.timestamp }}
</span> </span>
</li> </li>
<li style="margin-bottom: 20px"> <li style="margin-bottom: 20px">
<span id="" style="color: #b3c2d0"> 上报地点: </span> <span id="" class="c_b3c2d0"> 上报地点: </span>
<span id="" style="color: #01d8e2; margin-left: 10px"> <span id="" class="p10c">
{{ infoData.address }} {{ infoData.address }}
</span> </span>
</li> </li>
<li style="margin-bottom: 20px"> <li style="margin-bottom: 20px">
<span id="" style="color: #b3c2d0"> 上报来源: </span> <span id="" class="c_b3c2d0"> 上报来源: </span>
<span id="" style="color: #01d8e2; margin-left: 10px"> <span id="" class="p10c">
{{ infoData.alarmSource }} {{ infoData.alarmSource }}
</span> </span>
</li> </li>
<li style="margin-bottom: 20px"> <li style="margin-bottom: 20px">
<span id="" style="color: #b3c2d0"> 核验状态: </span> <span id="" class="c_b3c2d0"> 核验状态: </span>
<span id="" style="color: #01d8e2; margin-left: 10px"> <span id="" class="p10c">
{{ totypecn(infoData.fakeState) }} {{ totypecn(infoData.fakeState) }}
</span> </span>
</li> </li>
<li style="margin-bottom: 20px"> <li style="margin-bottom: 20px">
<span id="" style="color: #b3c2d0"> 转发模式: </span> <span id="" class="c_b3c2d0"> 转发模式: </span>
<span id="" style="color: #01d8e2; margin-left: 10px"> <span id="" class="p10c">
{{ infoData.reportMode == '1' ? '自动转发' : infoData.reportMode == '2' ? '核验转发' : '' }} {{ infoData.reportMode == '1' ? '自动转发' : infoData.reportMode == '2' ? '核验转发' : '' }}
</span> </span>
</li> </li>
<li style="margin-bottom: 20px"> <li style="margin-bottom: 20px">
<span id="" style="color: #b3c2d0"> 描述信息: </span> <span id="" class="c_b3c2d0"> 描述信息: </span>
<span id="" style="color: #01d8e2; margin-left: 10px"> <span id="" class="p10c">
{{ infoData.description }} {{ infoData.description }}
</span> </span>
</li> </li>
<li style="margin-bottom: 20px"> <li style="margin-bottom: 20px">
<span id="" style="color: #b3c2d0"> 设备类型: </span> <span id="" class="c_b3c2d0"> 设备类型: </span>
<span id="" style="color: #01d8e2; margin-left: 10px"> <span id="" class="p10c">
{{ infoData.deviceType }} {{ infoData.deviceType }}
</span> </span>
</li> </li>
<li style="margin-bottom: 20px"> <li style="margin-bottom: 20px">
<span id="" style="color: #b3c2d0"> 警报类型: </span> <span id="" class="c_b3c2d0"> 警报类型: </span>
<span id="" style="color: #01d8e2; margin-left: 10px"> <span id="" class="p10c">
{{ infoData.alarmCode }} {{ infoData.alarmCode }}
</span> </span>
</li> </li>
<li style="margin-bottom: 20px; display: flex"> <li style="margin-bottom: 20px; display: flex">
<div style="flex: 1"> <div style="flex: 1">
<span id="" style="color: #b3c2d0"> 联系人1: </span> <span id="" class="c_b3c2d0"> 联系人1: </span>
<span id="" style="color: #01d8e2; margin-left: 10px"> <span id="" class="p10c">
{{ infoData.user1Name }} {{ infoData.user1Name }}
</span> </span>
</div> </div>
<div style="flex: 1"> <div style="flex: 1">
<span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span> <span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span>
<span id="" style="color: #01d8e2; margin-left: 10px"> <span id="" class="p10c">
{{ infoData.user1Phone }} {{ infoData.user1Phone }}
</span> </span>
</div> </div>
</li> </li>
<li style="margin-bottom: 20px; display: flex"> <li style="margin-bottom: 20px; display: flex">
<div style="flex: 1"> <div style="flex: 1">
<span id="" style="color: #b3c2d0"> 联系人2: </span> <span id="" class="c_b3c2d0"> 联系人2: </span>
<span id="" style="color: #01d8e2; margin-left: 10px"> <span id="" class="p10c">
{{ infoData.user2Name }} {{ infoData.user2Name }}
</span> </span>
</div> </div>
<div style="flex: 1"> <div style="flex: 1">
<span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span> <span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span>
<span id="" style="color: #01d8e2; margin-left: 10px"> <span id="" class="p10c">
{{ infoData.user2Phone }} {{ infoData.user2Phone }}
</span> </span>
</div> </div>
</li> </li>
<li style="margin-bottom: 20px; display: flex"> <li style="margin-bottom: 20px; display: flex">
<div style="flex: 1"> <div style="flex: 1">
<span id="" style="color: #b3c2d0"> 联系人3: </span> <span id="" class="c_b3c2d0"> 联系人3: </span>
<span id="" style="color: #01d8e2; margin-left: 10px"> <span id="" class="p10c">
{{ infoData.user3Name }} {{ infoData.user3Name }}
</span> </span>
</div> </div>
<div style="flex: 1"> <div style="flex: 1">
<span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span> <span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span>
<span id="" style="color: #01d8e2; margin-left: 10px"> <span id="" class="p10c">
{{ infoData.user3Phone }} {{ infoData.user3Phone }}
</span> </span>
</div> </div>
</li> </li>
<li style="margin-bottom: 20px"> <li style="margin-bottom: 20px">
<span id="" style="color: #b3c2d0"> 处置状态: </span> <span id="" class="c_b3c2d0"> 处置状态: </span>
<span id="" style="color: #01d8e2; margin-left: 10px"> <span id="" class="p10c">
{{ infoData.state == 'new' ? '新事件' : infoData.state == 'processing' ? '处置中' : infoData.state == 'processed' ? '处置完成' : infoData.state == 'close' ? '关闭' : '' }} {{ infoData.state == 'new' ? '新事件' : infoData.state == 'processing' ? '处置中' : infoData.state == 'processed' ? '处置完成' : infoData.state == 'close' ? '关闭' : '' }}
</span> </span>
</li> </li>
@ -367,16 +382,17 @@
<div v-if="showIframe" class="iframe-container"> <div v-if="showIframe" class="iframe-container">
<iframe :src="videoUrl" frameborder="0"></iframe> <iframe :src="videoUrl" frameborder="0"></iframe>
</div> </div>
</div> </a-layout>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {JsonResult} from '@/axios' import {JsonResult} from '@/axios'
import {cloneDeep} from 'lodash' // import {cloneDeep} from 'lodash'
import type {TreeProps} from 'ant-design-vue' import type {TreeProps} from 'ant-design-vue'
import {Search} from '@element-plus/icons-vue' // import {Search} from '@element-plus/icons-vue'
import {createMqttData} from '@/utils/createMqttData' // import {createMqttData} from '@/utils/createMqttData'
import {sendMqtt} from '@/utils/sendMqtt' // import {sendMqtt} from '@/utils/sendMqtt'
import {wsUrl} from '@/utils/webSocket' // import {wsUrl} from '@/utils/webSocket'
// import type {CascaderProps} from 'ant-design-vue'
import * as _ from 'lodash' import * as _ from 'lodash'
import api from '@/axios' import api from '@/axios'
import {useUserStore} from '@/stores/modules/userStore' import {useUserStore} from '@/stores/modules/userStore'
@ -388,53 +404,47 @@ import image2 from './imag/anbao.png'
import image3 from './imag/she.png' import image3 from './imag/she.png'
import image4 from './imag/dsds.png' import image4 from './imag/dsds.png'
import closeimag from './imag/infoClose.png' import closeimag from './imag/infoClose.png'
import {Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick} from 'vue' import {Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick, h} from 'vue'
import type {CascaderProps} from 'ant-design-vue'
import type {ShowSearchType} from 'ant-design-vue/es/cascader' import type {ShowSearchType} from 'ant-design-vue/es/cascader'
const value = ref<string[]>([]) const value = ref<string[]>([])
const options = ref<any[]>([]) 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) => { const filter: ShowSearchType['filter'] = (inputValue, path) => {
return path.some((option) => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1) return path.some((option) => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
} }
const cascaderChange = (value: any, selectedOptions: any): void => { const cascaderChange = (value: any, selectedOptions: any): void => {
let title = selectedOptions.slice(-1)[0]?.title let title = selectedOptions.slice(-1)[0]?.title
expandedKeys.value = value expandedKeys.value = value
// scrollToMatchedNode(title) //此功能还有bug：滑动会带着父元素一起滑动 scrollToMatchedNode(title)
} }
interface anyType { interface anyType {
[key: string]: any [key: string]: any
} }
const showIframe = ref(false) const showIframe = ref(false)
const videoUrl = ref('') const videoUrl = ref('')
const {proxy} = getCurrentInstance() as any const {proxy} = getCurrentInstance() as any
const day = proxy.day 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 expandedKeys = ref([])
const selectedKeys = ref([]) const selectedKeys = ref([])
const checkedKeys = ref([]) const checkedKeys = ref([])
const dialogTableVisible = ref(false) const dialogTableVisible = ref(false)
const visible = ref(false) const visible = ref(false)
const visibleb = ref(false)
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
const activeName = ref('first')
const router = useRouter() const router = useRouter()
const env = ref(import.meta.env.VITE_APP_BASE_API)
const handleClick = () => {}
const show3 = ref(true) const show3 = ref(true)
const show4 = ref(true)
const gbht = () => {
visible.value = false
}
const isActive1 = ref('1') const isActive1 = ref('1')
const qhzty2 = (data: any) => { const qhzty2 = (data: any) => {
isActive1.value = data isActive1.value = data
@ -565,9 +575,7 @@ const qhzty = (data: any) => {
break break
} }
} }
const fieldNames: TreeProps['fieldNames'] = {
key: 'code'
}
const loading = ref(false) const loading = ref(false)
//四级组织树获取 //四级组织树获取
const scrollContainer = ref() const scrollContainer = ref()
@ -585,8 +593,7 @@ const scrollToMatchedNode = (searchValue: string) => {
matchedNode.push(element) matchedNode.push(element)
} }
}) })
// const parent = matchedNode[0].parentElement
// parent.style.overflow = 'hidden'
if (matchedNode.length === 1) { if (matchedNode.length === 1) {
matchedNode[0].scrollIntoView({behavior: 'smooth', block: 'center'}) matchedNode[0].scrollIntoView({behavior: 'smooth', block: 'center'})
} }
@ -607,67 +614,67 @@ const checkKeyExists = (nodes: any, key: string): boolean => {
}) })
} }
// 展开指定 树节点 // 展开指定 树节点
const scrollToKey = (key: string) => { // const scrollToKey = (key: string) => {
console.log('scrollToKey', key) // console.log('scrollToKey', key)
const exists = checkKeyExists(treedataall.value, key) // const exists = checkKeyExists(treedataall.value, key)
if (!exists) { // if (!exists) {
console.error(`Key ${key} not found in the tree.`) // console.error(`Key ${key} not found in the tree.`)
return // return
} // }
// 调用 scrollTo 方法 // // 调用 scrollTo 方法
nextTick(() => { // nextTick(() => {
treeRef.value.scrollTo({ // treeRef.value.scrollTo({
key, // key,
align: 'top', // 可选 top, bottom, auto // align: 'top', // 可选 top, bottom, auto
offset: 0 // 可选偏移量 // offset: 0 // 可选偏移量
}) // })
}) // })
} // }
// 搜索 树结构 // 搜索 树结构
const onSearch = () => { // const onSearch = () => {
let keysToExpand: any[] // let keysToExpand: any[]
keysToExpand = [] // keysToExpand = []
let keysToSelect: any[] // let keysToSelect: any[]
keysToSelect = [] // keysToSelect = []
const findKeys = (nodes: any, parentKeyPath: any[]) => { // const findKeys = (nodes: any, parentKeyPath: any[]) => {
nodes.forEach((node: any) => { // nodes.forEach((node: any) => {
const nodeId = node.code // const nodeId = node.code
const currentPath = [...parentKeyPath, nodeId] // const currentPath = [...parentKeyPath, nodeId]
if (node.title.includes(searchValue.value)) { // if (node.title.includes(searchValue.value)) {
console.log('node______', node) // console.log('node______', node)
keysToSelect.push(nodeId) // keysToSelect.push(nodeId)
currentPath.forEach((key) => keysToExpand.push(key)) // currentPath.forEach((key) => keysToExpand.push(key))
} // }
if (node.children && node.children.length > 0) { // if (node.children && node.children.length > 0) {
findKeys(node.children, currentPath) // 递归处理子节点，传递当前路径 // findKeys(node.children, currentPath) // 递归处理子节点，传递当前路径
} // }
}) // })
} // }
findKeys(treedataall.value, []) // findKeys(treedataall.value, [])
console.log('Expanded Keys:', Array.from(keysToExpand)) // console.log('Expanded Keys:', Array.from(keysToExpand))
console.log('Selected Keys:', keysToSelect) // console.log('Selected Keys:', keysToSelect)
if (keysToSelect.length === 0) { // if (keysToSelect.length === 0) {
ElMessage.warning(`未搜索到${searchValue.value}`) // ElMessage.warning(`未搜索到${searchValue.value}`)
} // }
expandedKeys.value = [...new Set(keysToExpand)] // expandedKeys.value = [...new Set(keysToExpand)]
selectedKeys.value = keysToSelect // selectedKeys.value = keysToSelect
if (selectedKeys.value.length > 0) { // if (selectedKeys.value.length > 0) {
console.log('selectedKeys.value', selectedKeys.value) // console.log('selectedKeys.value', selectedKeys.value)
scrollToMatchedNode(searchValue.value) // scrollToMatchedNode(searchValue.value)
// scrollToKey(selectedKeys.value[0]) // // scrollToKey(selectedKeys.value[0])
} // }
} // }
const refreshTreeData = () => { // const refreshTreeData = () => {
treedataall.value = [...treedataall.value] // treedataall.value = [...treedataall.value]
} // }
const gettree4 = (data: any) => { const gettree4 = (data: any) => {
loading.value = true loading.value = true
api 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) => { const close = (info: any) => {
api api
@ -731,37 +723,12 @@ const close = (info: any) => {
}) })
getdayline() getdayline()
dialogTableVisible.value = false dialogTableVisible.value = false
//删除此条数据
// listData
// getRealTimeAlarmSituation()
} else { } else {
ElMessage.error('关闭失败') 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) => { const totypecn = (data: any) => {
if (data == '0') { if (data == '0') {
return '未核验' return '未核验'
@ -792,10 +759,7 @@ const toCn = (data: any) => {
return '修改状态' return '修改状态'
} }
} }
const num = ref(100)
const handleChange = (value: number) => {
// console.log(value)
}
const cz = (infoData: any, upstatuslist: any) => { 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)}}) 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.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)}}) 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.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 ingrssddata = ref()
const clickKz = (dat2a: any) => { const clickKz = (dat2a: any) => {
api api
@ -830,7 +786,7 @@ const clickKz = (dat2a: any) => {
} }
onMounted(() => { onMounted(() => {
// await nextTick() getAiCount()
gettotal() gettotal()
initMap() initMap()
gettree4('') gettree4('')
@ -999,23 +955,54 @@ const getjingqing = () => {
} }
}) })
} }
const showLoading = ref<boolean>(false)
//获取当日ai预警 //获取当日ai预警
const AIyujing = ref<any[]>([]) const AIyujing = ref<any[]>([])
const getAi = () => { const aiCount = ref<number>(0)
let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'] const getAiCount = () => {
api api.post('/multialarm/ai/alarm/count/today').then((res: JsonResult<any>) => {
.post('/multialarm/ai/alarm/getlist/today', { if (res.code == 0) {
name: localStorage.getItem('loginname'), aiCount.value = res.data.count
city: city == '湖南省' ? null : city }
}) })
.then((res) => {
if (res.code == 0) {
// console.log('查询当日预警', res)
AIyujing.value = res.data as any[]
} else {
}
})
} }
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极其下属区县的报警数量统计 //获取一个city极其下属区县的报警数量统计
const total = ref<anyType>({}) const total = ref<anyType>({})
const gettotal = () => { 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) => { ;(window as any).addrt = (a: any) => {
console.log('播放_______________', a) console.log('播放_______________', a)
@ -1453,8 +1438,41 @@ const initMap = () => {
</script> </script>
<style scoped lang="scss"> <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 { .scrollContainer {
margin: 10px 20px; margin-top: 10px;
height: 70%; height: 70%;
overflow: auto; overflow: auto;
// position: absolute; // position: absolute;
@ -1649,7 +1667,7 @@ const initMap = () => {
box-sizing: border-box; box-sizing: border-box;
width: 420px; width: 420px;
height: 91%; height: 91%;
overflow: auto; overflow-y: scroll;
margin: 0 auto; margin: 0 auto;
padding: 0 15px; padding: 0 15px;
} }
@ -1734,58 +1752,43 @@ const initMap = () => {
font-weight: 600; 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%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; background-color: #fff;
// position: absolute !important; z-index: 999;
// border: 10px solid #f2f3f5;
.left-cont { .titleLeftBg {
box-sizing: border-box; width: 100%;
// width: 412px; line-height: 32px;
height: 100%; color: #616161;
// background-color: rgb(9 45 84 / 80%); text-indent: 30px;
background-color: #fff; font-size: 16px;
z-index: 999; font-family: ysbth;
// border: 10px solid #f2f3f5; font-weight: 600;
// 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 { .gttex {
@ -1990,6 +1993,7 @@ const initMap = () => {
.mapPopInfo { .mapPopInfo {
width: 450px; width: 450px;
// color: white !important;
} }
.mapPopInfo-top { .mapPopInfo-top {
@ -2057,10 +2061,151 @@ iframe {
top: 115px; top: 115px;
right: 448px; right: 448px;
background: rgb(21, 42, 95); background: rgb(21, 42, 95);
z-index: 99; z-index: 999;
width: 349px; width: 349px;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
// padding-top: 20px; // 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> </style>

9
src/views/page/indexMim.vue
View File

@ -177,6 +177,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {reqUrl} from '@/url'
import effectScatterData from '@/utils/effectScatterData' import effectScatterData from '@/utils/effectScatterData'
import linesData from '@/utils/linesData' import linesData from '@/utils/linesData'
import 'echarts-gl' import 'echarts-gl'
@ -267,8 +268,8 @@ const hy = () => {
maskColor: 'rgba(255, 255, 255, 0.2)', maskColor: 'rgba(255, 255, 255, 0.2)',
zlevel: 0 zlevel: 0
}) })
// const url = 'https://www.hndyjqrh.cn:8083/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson' const url = `${reqUrl}/api/multialarm/pic/download?creator=geo&file=${fhcode}.geojson`
const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
fetch(url) fetch(url)
.then((response) => { .then((response) => {
var status = response['status'] var status = response['status']
@ -887,9 +888,7 @@ const initMapdt = (data: any, podat: any, name: any) => {
getaiyuji(x.name, '', '') getaiyuji(x.name, '', '')
getdayline(x.name, '', '') getdayline(x.name, '', '')
getAi(x.name, '', '') getAi(x.name, '', '')
//item.code const url = `${reqUrl}/api/multialarm/pic/download?creator=geo&file=${item.code}.geojson`
// 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'
fetch(url) fetch(url)
.then((response) => { .then((response) => {
var status = response['status'] var status = response['status']

130
src/views/page/offLineMap.vue
View File

@ -132,7 +132,7 @@
<span>警情【{{ jinqing.length }}】</span> <span>警情【{{ jinqing.length }}】</span>
</div> </div>
<div @click="qhzty2('3')" :class="{active1: isActive1 == '3'}"> <div @click="qhzty2('3')" :class="{active1: isActive1 == '3'}">
<span>AI预警【{{ AIyujing.length }}】</span> <span>AI预警【{{ aiCount }}】</span>
</div> </div>
</div> </div>
<ul class="dataList" v-show="isActive1 == '1'"> <ul class="dataList" v-show="isActive1 == '1'">
@ -173,7 +173,7 @@
<el-empty v-else description="暂无数据"></el-empty> <el-empty v-else description="暂无数据"></el-empty>
</ul> </ul>
<ul class="dataList" v-show="isActive1 == '3'"> <ul @scroll="handleScroll" class="dataList" v-show="isActive1 == '3'">
<div v-if="AIyujing.length > 0"> <div v-if="AIyujing.length > 0">
<li style="cursor: pointer" 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> <p>
@ -714,6 +714,7 @@ onMounted(() => {
gettree4('') gettree4('')
getAi() getAi()
getjingqing() getjingqing()
getAiCount()
}) })
let deviceInfoWindow = ref<any>(null) let deviceInfoWindow = ref<any>(null)
const treedata = () => { const treedata = () => {
@ -913,22 +914,48 @@ const getjingqing = () => {
}) })
} }
//获取当日ai预警 //获取当日ai预警
const AIyujing = ref<any[]>([]) const aiCount = ref<number>(0)
const getAi = () => { const getAiCount = () => {
let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'] api.post('/multialarm/ai/alarm/count/today').then((res: JsonResult<any>) => {
api if (res.code == 0) {
.post('/multialarm/ai/alarm/getlist/today', { aiCount.value = res.data.count
name: localStorage.getItem('loginname'), }
city: city == '湖南省' ? null : city })
})
.then((res) => {
if (res.code == 0) {
// console.log('查询当日预警', res)
AIyujing.value = res.data as any[]
} else {
}
})
} }
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极其下属区县的报警数量统计 //获取一个city极其下属区县的报警数量统计
const total = ref<anyType>({}) const total = ref<anyType>({})
const gettotal = () => { const gettotal = () => {
@ -2102,73 +2129,4 @@ iframe {
:deep(.warnEventInfoWindow > p > img) { :deep(.warnEventInfoWindow > p > img) {
width: 100%; 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> </style>