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

解决 安保力量 index页面 代码所有 ts 爆红 

解决 安保力量 index页面 代码所有 ts 爆红
This commit is contained in:
TimSpan 2024-08-06 14:41:11 +08:00
parent 51fa1e3069
commit 0868169ffd
4 changed files with 69 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
analyze.html
View File

File diff suppressed because one or more lines are too long

14
public/cw_/index.html
View File

@ -77,18 +77,22 @@
var id = getParams("id"); var id = getParams("id");
var title = getParams("title"); var title = getParams("title");
let requestBody = { let requestBody = {
pointId: id pointId: id,
useTLS: 0
} }
console.log(window.location, locationUrl, id, title); // console.log(window.location, locationUrl, id, title);
try { try {
let url = 'http://175.6.124.250:8083/multialarm/video/preview' if (window.location.host === 'www.hndyjqrh.cn') {
requestBody.useTLS = 1
}
// requestBody.useTLS = 1
let url = ' https://www.hndyjqrh.cn/api/multialarm/video/preview'
axios({ axios({
method: 'post', method: 'post',
url, url,
data: { ...requestBody } data: { ...requestBody }
}).then(res => { }).then(res => {
console.log(res); // console.log(res);
var PLAYURL = res.data.data.videoUrl var PLAYURL = res.data.data.videoUrl
self.player.play(PLAYURL, true, ""); self.player.play(PLAYURL, true, "");

5
src/views/index.vue
View File

@ -229,6 +229,7 @@ const confirmEvent = () => {
// background: #142738; // background: #142738;
background: #fff; background: #fff;
color: #fff; color: #fff;
position: relative;
// background-image: url(@/assets/images/community_container.jpg); // background-image: url(@/assets/images/community_container.jpg);
// background-size: 100% 100%; // background-size: 100% 100%;
// background-repeat: no-repeat; // background-repeat: no-repeat;
@ -236,6 +237,8 @@ const confirmEvent = () => {
.community_top { .community_top {
width: 100%; width: 100%;
height: 77px; height: 77px;
// position: absolute;
// top: 0;
// background:#4880FF; // background:#4880FF;
background: #07315e; background: #07315e;
background-image: url(@/views/page/imag/titleBg1.png); background-image: url(@/views/page/imag/titleBg1.png);
@ -296,6 +299,8 @@ const confirmEvent = () => {
width: 100%; width: 100%;
height: calc(100% - 68px); height: calc(100% - 68px);
overflow: hidden; overflow: hidden;
position: absolute;
// top: 0;
// height: 100%; // height: 100%;
// margin: 10px 50px 30px 50px; // margin: 10px 50px 30px 50px;
// position: absolute; // position: absolute;

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

@ -45,7 +45,7 @@
<!-- <button @click="refreshTreeData">刷新</button> --> <!-- <button @click="refreshTreeData">刷新</button> -->
<!-- height: 75%; --> <!-- height: 75%; -->
<div ref="scrollContainer" v-loading="loading" style="padding: 0px 20px; height: 70%; overflow: auto"> <div ref="scrollContainer" v-loading="loading" style="margin: 10px 20px; height: 70%; overflow: auto">
<!-- —————————————————————————————重要的事情说三遍： key 值必须唯一 ————————————————————————————— --> <!-- —————————————————————————————重要的事情说三遍： key 值必须唯一 ————————————————————————————— -->
<!-- —————————————————————————————重要的事情说三遍： key 值必须唯一 ————————————————————————————— --> <!-- —————————————————————————————重要的事情说三遍： key 值必须唯一 ————————————————————————————— -->
<!-- —————————————————————————————重要的事情说三遍： key 值必须唯一 ————————————————————————————— --> <!-- —————————————————————————————重要的事情说三遍： key 值必须唯一 ————————————————————————————— -->
@ -197,7 +197,7 @@
</div> </div>
</Transition> </Transition>
<div v-show="dialogTableVisible" style="position: fixed; top: 115px; right: 448px; background: rgb(21, 42, 95); z-index: 99; width: 349px; padding: 10px; border-radius: 5px; padding-top: 20px"> <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">
@ -383,6 +383,7 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
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'
@ -416,7 +417,7 @@ const cascaderChange = (value: any, selectedOptions: any): void => {
// selectedKeys.value.push(value.slice(-1)[0]) // selectedKeys.value.push(value.slice(-1)[0])
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) //此功能还有bug：滑动会带着父元素一起滑动
} }
const showIframe = ref(false) const showIframe = ref(false)
@ -492,7 +493,7 @@ const jiesuo = (data: any) => {
start: day().format('YYYY-MM-DD HH:mm:ss'), start: day().format('YYYY-MM-DD HH:mm:ss'),
before: 1, before: 1,
}) })
.then((res) => { .then((res: JsonResult<any>) => {
if (res.code == 0) { if (res.code == 0) {
infoData.value.lockState = res.data[listindex.value]['lockState'] infoData.value.lockState = res.data[listindex.value]['lockState']
} }
@ -524,7 +525,7 @@ const lock = (data: any) => {
start: day().format('YYYY-MM-DD HH:mm:ss'), start: day().format('YYYY-MM-DD HH:mm:ss'),
before: 1, before: 1,
}) })
.then((res) => { .then((res: JsonResult<any>) => {
if (res.code == 0) { if (res.code == 0) {
infoData.value.lockState = res.data[listindex.value]['lockState'] infoData.value.lockState = res.data[listindex.value]['lockState']
} }
@ -604,8 +605,6 @@ const scrollToMatchedNode = (searchValue: string) => {
} }
}) })
// const parent = matchedNode[0].parentElement // const parent = matchedNode[0].parentElement
// // 禁用滚动
// parent.style.overflow = 'hidden' // 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' })
@ -706,17 +705,11 @@ const gettree4 = (data: any) => {
name: localStorage.getItem('loginname'), name: localStorage.getItem('loginname'),
hylxdm: data, hylxdm: data,
}) })
.then((res1) => { .then((res1: JsonResult<any>) => {
res1.data.forEach((ele: any) => { res1.data.forEach((ele: any) => {
// 给 getlist 数据添加 code ele.code = ele.pointId //为什么是pointId，因为key需要唯一
// ele.code = ele.stationId
ele.code = ele.pointId
}) })
let data = [res.data] let data = [res.data]
// console.log('data_____________', data)
data.forEach((tree) => { data.forEach((tree) => {
console.log(tree) console.log(tree)
printLeafs(tree, res1.data) printLeafs(tree, res1.data)
@ -873,7 +866,7 @@ const treedata = () => {
name: localStorage.getItem('loginname'), name: localStorage.getItem('loginname'),
hylxdm: '', hylxdm: '',
}) })
.then((res1) => { .then((res1: JsonResult<any>) => {
api api
.post('/multialarm/client/alarm_point/getlist', { .post('/multialarm/client/alarm_point/getlist', {
name: localStorage.getItem('loginname'), name: localStorage.getItem('loginname'),
@ -881,11 +874,8 @@ const treedata = () => {
pageindex: 0, pageindex: 0,
pagesize: res1.data.count, pagesize: res1.data.count,
}) })
.then((res) => { .then((res: JsonResult<any>) => {
var gridSize = 60 var points: any[] = []
// console.log('总数', res)
// var points: any[]
var points = []
res.data.map((x: any) => { res.data.map((x: any) => {
const marker = new AMap.Marker({ const marker = new AMap.Marker({
@ -899,12 +889,12 @@ const treedata = () => {
title: '', title: '',
}) })
marker.on('click', function () { marker.on('click', function () {
deviceInfoWindow = new AMap.InfoWindow({ deviceInfoWindow.value = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体 isCustom: true, //使用自定义窗体
content: createSubstanceInfowindow2(x, '1'), content: createSubstanceInfowindow2(x, '1'),
offset: new AMap.Pixel(5, -13), offset: new AMap.Pixel(5, -13),
}) })
deviceInfoWindow.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude]) deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
}) })
state.map.add(marker) state.map.add(marker)
points.push(marker) points.push(marker)
@ -957,7 +947,7 @@ const getdayline = () => {
start: day().format('YYYY-MM-DD HH:mm:ss'), start: day().format('YYYY-MM-DD HH:mm:ss'),
before: 1, before: 1,
}) })
.then((res) => { .then((res: JsonResult<any>) => {
if (res.code == 0) { if (res.code == 0) {
// console.log('当日报警列表', res) // console.log('当日报警列表', res)
jinbao.value = res.data jinbao.value = res.data
@ -975,12 +965,12 @@ const getdayline = () => {
title: '', title: '',
}) })
marker.on('click', function () { marker.on('click', function () {
deviceInfoWindow = new AMap.InfoWindow({ deviceInfoWindow.value = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体 isCustom: true, //使用自定义窗体
content: createSubstanceInfowindow(x, '1'), content: createSubstanceInfowindow(x, '1'),
offset: new AMap.Pixel(5, -13), offset: new AMap.Pixel(5, -13),
}) })
deviceInfoWindow.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude]) deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
}) })
state.map.add(marker) state.map.add(marker)
} else { } else {
@ -998,12 +988,12 @@ const getdayline = () => {
title: '', title: '',
}) })
marker.on('click', function () { marker.on('click', function () {
deviceInfoWindow = new AMap.InfoWindow({ deviceInfoWindow.value = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体 isCustom: true, //使用自定义窗体
content: createSubstanceInfowindow1(x, '1'), content: createSubstanceInfowindow1(x, '1'),
offset: new AMap.Pixel(5, -13), offset: new AMap.Pixel(5, -13),
}) })
deviceInfoWindow.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude]) deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
}) })
state.map.add(marker) state.map.add(marker)
} }
@ -1032,7 +1022,7 @@ const getjingqing = () => {
}) })
} }
//获取当日ai预警 //获取当日ai预警
const AIyujing = ref([]) const AIyujing = ref<any[]>([])
const getAi = () => { const getAi = () => {
let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'] let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']
api api
@ -1043,7 +1033,7 @@ const getAi = () => {
.then((res) => { .then((res) => {
if (res.code == 0) { if (res.code == 0) {
// console.log('查询当日预警', res) // console.log('查询当日预警', res)
AIyujing.value = res.data AIyujing.value = res.data as any[]
} else { } else {
} }
}) })
@ -1065,17 +1055,18 @@ const gettotal = () => {
}) })
} }
// //
let deviceInfoWindow = ref(null) let deviceInfoWindow = ref<any>()
const selectA = (selectedKeys: any, e: any) => { const selectA = (selectedKeys: any, e: any) => {
console.log('selectedKeys', selectedKeys, e) console.log('selectedKeys', selectedKeys, e)
if (selectedKeys[0].length >= 13) { 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] let targetLangLat = [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude]
deviceInfoWindow = new AMap.InfoWindow({
deviceInfoWindow.value = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体 isCustom: true, //使用自定义窗体
content: createSubstanceInfowindow2(e.selectedNodes[0], '1'), content: createSubstanceInfowindow2(e.selectedNodes[0], '1'),
offset: new AMap.Pixel(5, -13), offset: new AMap.Pixel(5, -13),
}) })
deviceInfoWindow.open(state.map, [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude]) 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) state.map.setZoomAndCenter(205, targetLangLat)
} }
@ -1095,7 +1086,7 @@ const createSubstanceInfowindow = (obj: any, type: any) => {
var closeX = document.createElement('img') var closeX = document.createElement('img')
closeX.src = closeimag closeX.src = closeimag
closeX.onclick = () => { closeX.onclick = () => {
deviceInfoWindow.close() deviceInfoWindow.value.close()
} }
var popMian = document.createElement('div') var popMian = document.createElement('div')
@ -1126,7 +1117,7 @@ const createSubstanceInfowindow1 = (obj: any, type: any) => {
var closeX = document.createElement('img') var closeX = document.createElement('img')
closeX.src = closeimag closeX.src = closeimag
closeX.onclick = () => { closeX.onclick = () => {
deviceInfoWindow.close() deviceInfoWindow.value.close()
} }
var popMian = document.createElement('div') var popMian = document.createElement('div')
@ -1157,7 +1148,7 @@ const createSubstanceInfowindow2 = (obj: any, type: any) => {
var closeX = document.createElement('img') var closeX = document.createElement('img')
closeX.src = closeimag closeX.src = closeimag
closeX.onclick = () => { closeX.onclick = () => {
deviceInfoWindow.close() deviceInfoWindow.value.close()
} }
var popMian = document.createElement('div') var popMian = document.createElement('div')
@ -1240,7 +1231,8 @@ const pointCode = ref()
// window.open(routeData.href, '_blank') // window.open(routeData.href, '_blank')
var url = `/cw_/index.html?id=${a.pointId}&title=${a.title}` var url = `/cw_/index.html?id=${a.pointId}&title=${a.title}`
const newWindow = window.open(url, '', 'width=' + 1920 + ',height=' + 1080 + ",top=0,left=0,status='no',location='no',resizable='no',toolbar='no'") 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 { } else {
// 手持设备的播放 // 手持设备的播放
@ -1377,7 +1369,7 @@ const getRealTimeAlarmSituation = () => {
start: day(day().format('YYYY-MM-DD')).format('YYYY-MM-DD HH:mm:ss'), start: day(day().format('YYYY-MM-DD')).format('YYYY-MM-DD HH:mm:ss'),
end: day().format('YYYY-MM-DD HH:mm:ss'), end: day().format('YYYY-MM-DD HH:mm:ss'),
}) })
.then((res) => { .then((res: JsonResult<any>) => {
// console.log('实时警情', res) // console.log('实时警情', res)
if (res.code == 0) { if (res.code == 0) {
listData.value = res.data.reverse() listData.value = res.data.reverse()
@ -1396,12 +1388,12 @@ const getRealTimeAlarmSituation = () => {
title: '', title: '',
}) })
marker.on('click', function () { marker.on('click', function () {
deviceInfoWindow = new AMap.InfoWindow({ deviceInfoWindow.value = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体 isCustom: true, //使用自定义窗体
content: createSubstanceInfowindow1(x, '1'), content: createSubstanceInfowindow1(x, '1'),
offset: new AMap.Pixel(5, -13), offset: new AMap.Pixel(5, -13),
}) })
deviceInfoWindow.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude]) deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
}) })
state.map.add(marker) state.map.add(marker)
}) })
@ -1409,7 +1401,7 @@ const getRealTimeAlarmSituation = () => {
}) })
} }
const infoData = ref({}) const infoData = ref<any>({})
const upstatuslist = ref([]) const upstatuslist = ref([])
const listindex = ref() const listindex = ref()
const toinfo = (item: any, index: number) => { const toinfo = (item: any, index: number) => {
@ -1436,7 +1428,7 @@ const toinfo = (item: any, index: number) => {
}) })
.then((res) => { .then((res) => {
if (res.code == 0) { if (res.code == 0) {
upstatuslist.value = res.data upstatuslist.value = res.data as any[]
} }
}) })
}) })
@ -1448,7 +1440,7 @@ const toinfo = (item: any, index: number) => {
.then((res) => { .then((res) => {
// console.log('PPres1', res) // console.log('PPres1', res)
if (res.code == 0) { if (res.code == 0) {
upstatuslist.value = res.data upstatuslist.value = res.data as any[]
} }
}) })
} }
@ -1673,10 +1665,12 @@ const initMap = () => {
} }
.dataList { .dataList {
box-sizing: border-box;
width: 420px; width: 420px;
height: 91%; height: 91%;
overflow: auto; overflow: auto;
margin: 0 auto; margin: 0 auto;
padding: 0 15px;
} }
.dataList li { .dataList li {
@ -1762,6 +1756,8 @@ const initMap = () => {
.indexx { .indexx {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden;
// position: absolute;
.left-cont { .left-cont {
box-sizing: border-box; box-sizing: border-box;
@ -1770,12 +1766,13 @@ const initMap = () => {
// background-color: rgb(9 45 84 / 80%); // background-color: rgb(9 45 84 / 80%);
background-color: #fff; background-color: #fff;
z-index: 999; z-index: 999;
border: 10px solid #f2f3f5; // border: 10px solid #f2f3f5;
// border-top: 12px solid #f2f3f5; // border-top: 12px solid #f2f3f5;
// border-right: 12px solid #f2f3f5; // border-right: 12px solid #f2f3f5;
position: absolute; position: absolute;
top: 0; // top: 0;
left: 0; // left: 0;
overflow: hidden;
.titleLeftBg { .titleLeftBg {
width: 100%; width: 100%;
@ -2074,4 +2071,15 @@ iframe {
width: 100%; width: 100%;
height: 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> </style>