2025-06-02 20:25:19 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div class="homeBox">
|
2025-12-04 00:18:18 +08:00
|
|
|
|
<GdMap :minZoom="6.6" :maxZoom="6.6"></GdMap>
|
2025-06-02 20:25:19 +08:00
|
|
|
|
<!-- 头部 -->
|
2025-09-28 15:53:38 +08:00
|
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
|
<Head></Head>
|
|
|
|
|
|
<!-- 左边 内容-->
|
|
|
|
|
|
<div class="home-aside asideL">
|
2025-12-05 16:19:36 +08:00
|
|
|
|
<div class="asideL-bottom">
|
|
|
|
|
|
<div class="common-title">检查站卡口统计</div>
|
2025-06-02 20:25:19 +08:00
|
|
|
|
<div class="comom-cnt">
|
2025-12-05 16:19:36 +08:00
|
|
|
|
<Checkpoint />
|
2025-06-02 20:25:19 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-12-05 16:19:36 +08:00
|
|
|
|
<div class="asideL-top">
|
|
|
|
|
|
<div class="common-title">数据采集</div>
|
2025-06-02 20:25:19 +08:00
|
|
|
|
<div class="comom-cnt">
|
2025-12-05 16:19:36 +08:00
|
|
|
|
<Collection></Collection>
|
2025-06-02 20:25:19 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="asideL-bottom">
|
2025-12-05 16:19:36 +08:00
|
|
|
|
<div class="common-title">值班备勤</div>
|
2025-06-02 20:25:19 +08:00
|
|
|
|
<div class="comom-cnt">
|
2025-12-05 16:19:36 +08:00
|
|
|
|
<BeOnDuty></BeOnDuty>
|
2025-06-02 20:25:19 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-12-05 16:19:36 +08:00
|
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
|
</div>
|
2025-12-04 00:18:18 +08:00
|
|
|
|
<!-- <Warning></Warning> -->
|
2025-10-09 21:32:38 +08:00
|
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
|
<!-- 右边 内容-->
|
|
|
|
|
|
<div class="home-aside asideR">
|
|
|
|
|
|
<div class="asideL-top">
|
2025-12-05 16:19:36 +08:00
|
|
|
|
<div class="common-title">人员预警</div>
|
2025-06-02 20:25:19 +08:00
|
|
|
|
<div class="comom-cnt">
|
2025-12-05 16:19:36 +08:00
|
|
|
|
<PeoWarning />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="asideL-top">
|
|
|
|
|
|
<div class="common-title">车辆预警</div>
|
|
|
|
|
|
<div class="comom-cnt">
|
|
|
|
|
|
<CarWarning />
|
2025-06-02 20:25:19 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="asideL-bottom">
|
|
|
|
|
|
<div class="common-title">预警统计分析</div>
|
|
|
|
|
|
<div class="comom-cnt">
|
|
|
|
|
|
<WanringAnyse></WanringAnyse>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<Entrance v-if="showEntrance" :JczData="JczData" />
|
2025-12-04 00:18:18 +08:00
|
|
|
|
|
2025-09-28 15:53:38 +08:00
|
|
|
|
<PopupWindows />
|
2025-06-02 20:25:19 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
|
import GdMap from "@/components/GdMap/index.vue";
|
|
|
|
|
|
import Head from "./layout/head.vue";
|
|
|
|
|
|
import Collection from "./components/collection.vue";
|
|
|
|
|
|
import CarWarning from "./components/CarWarning.vue";
|
|
|
|
|
|
import PeoWarning from "./components/PeoWarning.vue";
|
|
|
|
|
|
import BeOnDuty from "./components/beonDuty.vue";
|
2025-12-05 16:19:36 +08:00
|
|
|
|
import Checkpoint from "./components/Checkpoint.vue";
|
2025-06-02 20:25:19 +08:00
|
|
|
|
import Entrance from "./components/entrance.vue";
|
|
|
|
|
|
import WanringAnyse from "./components/wanringAnyse.vue";
|
2025-09-28 15:53:38 +08:00
|
|
|
|
import { jczgetJczList, sxtGetList } from "@/api/mosty-jcz";
|
|
|
|
|
|
import { ysSxtGetList } from '@/api/yszx.js'
|
2025-06-02 20:25:19 +08:00
|
|
|
|
import emitter from "@/utils/eventBus.js";
|
2025-09-28 15:53:38 +08:00
|
|
|
|
import PopupWindows from "@/components/popupWindows/index.vue";
|
2025-12-04 00:18:18 +08:00
|
|
|
|
import { bm, arrowhead, centralPoint } from '@/components/GdMap/xzqh.js'
|
|
|
|
|
|
import { ref, onMounted, reactive } from "vue";
|
|
|
|
|
|
import { getItem } from "@/utils/storage";
|
2025-06-02 20:25:19 +08:00
|
|
|
|
|
|
|
|
|
|
//获取所有检查站
|
|
|
|
|
|
const getjczgetJczList = () => {
|
|
|
|
|
|
jczgetJczList({}).then((res) => {
|
2025-12-04 00:18:18 +08:00
|
|
|
|
const gajcz = res.filter(item => item.zqlx == '1' && item.jd && item.wd)
|
|
|
|
|
|
const jcz = res.filter(item => item.zqlx == '2' && item.jd && item.wd)
|
2025-06-02 20:25:19 +08:00
|
|
|
|
const icon = require("@/assets/images/z.png");
|
2025-12-04 00:18:18 +08:00
|
|
|
|
const iconjcz = require("@/assets/point/sp.png");
|
|
|
|
|
|
emitter.emit("addPointArea", { coords: gajcz, icon, flag: "jczMap_hm" });
|
|
|
|
|
|
emitter.emit("addPointArea", { coords: jcz, icon: iconjcz, flag: "jczMap_hm" });
|
2025-06-02 20:25:19 +08:00
|
|
|
|
});
|
|
|
|
|
|
};
|
2025-12-04 00:18:18 +08:00
|
|
|
|
const makerCenter = () => {
|
|
|
|
|
|
const dw = require("@/assets/point/dingwei.png")
|
|
|
|
|
|
const coords = centralPoint.map(item => {
|
|
|
|
|
|
return { jd: item.point[0], wd: item.point[1], jzMc: item.name }
|
|
|
|
|
|
})
|
|
|
|
|
|
emitter.emit("addPointArea", { coords, icon: dw, flag: "hm", size: '14px', showTitle: true, offset: [0, -25] });
|
|
|
|
|
|
}
|
2025-06-02 20:25:19 +08:00
|
|
|
|
getjczgetJczList();
|
|
|
|
|
|
const JczData = ref();
|
|
|
|
|
|
const showEntrance = ref(false);
|
|
|
|
|
|
onMounted(() => {
|
2025-12-04 00:18:18 +08:00
|
|
|
|
getDepId()
|
|
|
|
|
|
makerCenter()
|
2025-06-02 20:25:19 +08:00
|
|
|
|
emitter.on("showJcz", (res) => {
|
|
|
|
|
|
if (res) {
|
2025-12-04 00:18:18 +08:00
|
|
|
|
// const promes = {
|
|
|
|
|
|
// jczid: res.id,
|
|
|
|
|
|
// }
|
2025-06-02 20:25:19 +08:00
|
|
|
|
showEntrance.value = true;
|
|
|
|
|
|
JczData.value = res;
|
2025-12-04 00:18:18 +08:00
|
|
|
|
// emitter.emit("deletePointArea", "jczMap_Gzy");
|
|
|
|
|
|
// sxtGetList(promes).then(resData => {
|
|
|
|
|
|
// emitter.emit("addPointArea", {
|
|
|
|
|
|
// coords: resData,
|
|
|
|
|
|
// icon: require("@/assets/point/sp.png"),
|
|
|
|
|
|
// flag: "jczMap_Gzy"
|
|
|
|
|
|
// });
|
|
|
|
|
|
// })
|
2025-06-02 20:25:19 +08:00
|
|
|
|
} else {
|
|
|
|
|
|
showEntrance.value = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
2025-12-04 00:18:18 +08:00
|
|
|
|
|
|
|
|
|
|
const keyIndex = ref()
|
|
|
|
|
|
const changeXzqh = (val, trg) => {
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
// 先移除已有的边界
|
|
|
|
|
|
// 如果传入的是多个区域数据（二维数组）
|
|
|
|
|
|
const features = val.map((area, index) => ({
|
|
|
|
|
|
geometry: {
|
|
|
|
|
|
type: "Polygon",
|
|
|
|
|
|
coordinates: [area] // 确保格式正确
|
|
|
|
|
|
},
|
|
|
|
|
|
properties: {
|
|
|
|
|
|
},
|
|
|
|
|
|
type: "Feature"
|
|
|
|
|
|
}))
|
|
|
|
|
|
// 循环为每个区域创建单独的多边形，这样可以设置不同的样式
|
|
|
|
|
|
features.forEach((feature, index) => {
|
|
|
|
|
|
emitter.emit('setBoundarys', {
|
|
|
|
|
|
data: {
|
|
|
|
|
|
type: "FeatureCollection",
|
|
|
|
|
|
features: [feature]
|
|
|
|
|
|
},
|
|
|
|
|
|
color: '#cf1010',
|
|
|
|
|
|
fillColor: 'rgba(255, 255, 255, 0)',
|
|
|
|
|
|
borderColor: index == keyIndex.value ? '#ff00ff' : 'red'
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
getMapData()
|
|
|
|
|
|
}, 3000)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const getDepId = () => {
|
|
|
|
|
|
const deptId = getItem('deptId')
|
|
|
|
|
|
const deptLevel = deptId[0].deptLevel ? deptId[0].deptLevel : null
|
|
|
|
|
|
const deptCode = deptId[0].deptCode ? deptId[0].deptCode : null
|
|
|
|
|
|
// if (deptLevel.startsWith('2')) {
|
|
|
|
|
|
const keyData = []
|
|
|
|
|
|
for (const key in bm) {
|
|
|
|
|
|
keyData.push(key)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const data = Object.values(bm).map(item => item);
|
|
|
|
|
|
|
|
|
|
|
|
// } else {
|
|
|
|
|
|
switch (deptCode) {
|
|
|
|
|
|
case '54040200000'://巴宜区
|
|
|
|
|
|
keyIndex.value = keyData.indexOf('542621')
|
|
|
|
|
|
// changeXzqh(bm[542621])
|
|
|
|
|
|
break;
|
|
|
|
|
|
case '54042400000'://波密县
|
|
|
|
|
|
keyIndex.value = keyData.indexOf('542625')
|
|
|
|
|
|
// changeXzqh(bm[542625])
|
|
|
|
|
|
break;
|
|
|
|
|
|
case '54042500000'://察隅县
|
|
|
|
|
|
keyIndex.value = keyData.indexOf('542626')
|
|
|
|
|
|
// changeXzqh(bm[542626])
|
|
|
|
|
|
break;
|
|
|
|
|
|
case '54042100000'://工布江达县
|
|
|
|
|
|
keyIndex.value = keyData.indexOf('542622')
|
|
|
|
|
|
// changeXzqh(bm[542622])
|
|
|
|
|
|
break;
|
|
|
|
|
|
case '54042600000'://朗县
|
|
|
|
|
|
keyIndex.value = keyData.indexOf('542627')
|
|
|
|
|
|
// changeXzqh(bm[542627])
|
|
|
|
|
|
break;
|
|
|
|
|
|
case '54042200000'://米林县
|
|
|
|
|
|
keyIndex.value = keyData.indexOf('542623')
|
|
|
|
|
|
// changeXzqh(bm[542623])
|
|
|
|
|
|
break;
|
|
|
|
|
|
case '54042300000'://墨脱县
|
|
|
|
|
|
keyIndex.value = keyData.indexOf('542624')
|
|
|
|
|
|
// changeXzqh(bm[542624])
|
|
|
|
|
|
break;
|
|
|
|
|
|
default:
|
|
|
|
|
|
const data = Object.values(bm).map(item => item);
|
|
|
|
|
|
changeXzqh(data, true)
|
|
|
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
|
|
|
changeXzqh(data, true)
|
|
|
|
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
}
|
|
|
|
|
|
// 箭头
|
|
|
|
|
|
const getMapData = () => {
|
|
|
|
|
|
let jtData = []
|
|
|
|
|
|
for (const key in arrowhead) {
|
|
|
|
|
|
jtData.push({
|
|
|
|
|
|
position: [arrowhead[key].zb],
|
|
|
|
|
|
text: arrowhead[key].name,
|
|
|
|
|
|
pyl: arrowhead[key].pyl,
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
// 修复后的多边形绘制代码
|
|
|
|
|
|
for (let i = 0; i < jtData.length; i++) {
|
|
|
|
|
|
console.log("正在绘制第", i, "个多边形");
|
|
|
|
|
|
emitter.emit("echoPlane", {
|
|
|
|
|
|
flag: `polygon${i}`,
|
|
|
|
|
|
type: "polygon",
|
|
|
|
|
|
coords: [jtData[i]], // 保持使用第一个数据点进行测试
|
|
|
|
|
|
fontSize: "20px",
|
|
|
|
|
|
fontColor: '#000',
|
|
|
|
|
|
isclear: false, // 暂时设为false，避免清除之前的绘制
|
|
|
|
|
|
id: i,
|
|
|
|
|
|
pyl: jtData[i].pyl
|
|
|
|
|
|
|
2025-07-21 17:47:27 +08:00
|
|
|
|
});
|
2025-12-04 00:18:18 +08:00
|
|
|
|
}
|
2025-07-21 17:47:27 +08:00
|
|
|
|
}
|
2025-12-04 00:18:18 +08:00
|
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
.homeBox {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
position: relative;
|
2025-09-28 15:53:38 +08:00
|
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
|
.home-aside {
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
z-index: 3;
|
|
|
|
|
|
width: 442px;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
height: calc(100vh - 67px);
|
|
|
|
|
|
top: 65px;
|
|
|
|
|
|
background: #0e1b29;
|
|
|
|
|
|
}
|
2025-09-28 15:53:38 +08:00
|
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
|
// 左边
|
|
|
|
|
|
.asideL {
|
|
|
|
|
|
left: 0;
|
2025-09-28 15:53:38 +08:00
|
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
|
.asideL-top {
|
|
|
|
|
|
height: 480px;
|
|
|
|
|
|
background: url("~@/assets/images/border_L_T.png") no-repeat center center;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
}
|
2025-09-28 15:53:38 +08:00
|
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
|
.asideL-bottom {
|
|
|
|
|
|
height: calc((100% - 505px) / 2);
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
background: url("~@/assets/images/border_R_T.png") no-repeat center center;
|
|
|
|
|
|
// background: url("~@/assets/images/border_L_T.png") no-repeat center center;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-09-28 15:53:38 +08:00
|
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
|
// 右边
|
|
|
|
|
|
.asideR {
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
padding-right: 10px;
|
|
|
|
|
|
box-sizing: border-box;
|
2025-09-28 15:53:38 +08:00
|
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
|
.asideL-top {
|
2025-12-05 16:19:36 +08:00
|
|
|
|
height: 20%;
|
2025-06-02 20:25:19 +08:00
|
|
|
|
background: url("~@/assets/images/border_R_T.png") no-repeat center center;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
}
|
2025-09-28 15:53:38 +08:00
|
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
|
.asideL-bottom {
|
|
|
|
|
|
height: 60%;
|
|
|
|
|
|
background: url("~@/assets/images/border_R_B.png") no-repeat center center;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-12-04 00:18:18 +08:00
|
|
|
|
|
|
|
|
|
|
.asideB {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 50px;
|
|
|
|
|
|
z-index: 11;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
height: 100px;
|
|
|
|
|
|
width: 50%;
|
|
|
|
|
|
padding: 0 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
|
// 公用
|
|
|
|
|
|
.common-title {
|
|
|
|
|
|
padding: 0 54px;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
|
font-family: "YSBTH";
|
|
|
|
|
|
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
|
|
}
|
2025-09-28 15:53:38 +08:00
|
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
|
.comom-cnt {
|
|
|
|
|
|
height: calc(100% - 30px);
|
|
|
|
|
|
padding: 4px 20px;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-12-04 00:18:18 +08:00
|
|
|
|
|
|
|
|
|
|
|
2025-06-02 20:25:19 +08:00
|
|
|
|
</style>
|
