2025-04-12 14:54:02 +08:00
|
|
|
<template>
|
|
|
|
|
<div class="homeBox">
|
|
|
|
|
<!-- 头部 -->
|
2025-10-26 12:25:50 +08:00
|
|
|
|
2025-04-12 14:54:02 +08:00
|
|
|
<Head></Head>
|
2025-04-16 09:33:29 +08:00
|
|
|
<!-- 左边 -->
|
|
|
|
|
<div class="home-aside asideL">
|
2025-05-20 16:06:20 +08:00
|
|
|
<div class="asideL-top">
|
2025-10-26 12:25:50 +08:00
|
|
|
|
2025-05-20 16:06:20 +08:00
|
|
|
<DbCount></DbCount>
|
2025-04-15 14:38:12 +08:00
|
|
|
</div>
|
2025-05-20 16:06:20 +08:00
|
|
|
<div class="asideL-Bottom">
|
2025-08-01 17:16:03 +08:00
|
|
|
<div class="commom-aside">
|
|
|
|
|
<QbsbCount></QbsbCount>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="commom-aside">
|
|
|
|
|
<QblyType></QblyType>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="commom-aside">
|
2025-10-26 12:25:50 +08:00
|
|
|
<!-- <GroupWarning /> -->
|
|
|
|
|
<TextType></TextType>
|
|
|
|
|
<!-- <QbfkCount></QbfkCount> -->
|
2025-08-01 17:16:03 +08:00
|
|
|
</div>
|
2025-04-15 14:38:12 +08:00
|
|
|
</div>
|
2025-05-20 16:06:20 +08:00
|
|
|
</div>
|
|
|
|
|
<!-- 右边 -->
|
|
|
|
|
<div class="home-aside asideR">
|
2025-08-01 17:16:03 +08:00
|
|
|
<div class="commom-aside-big">
|
2025-10-26 12:25:50 +08:00
|
|
|
<Calendar />
|
2025-08-01 17:16:03 +08:00
|
|
|
</div>
|
|
|
|
|
<div class="commom-aside-big">
|
2025-10-26 12:25:50 +08:00
|
|
|
<Experience />
|
|
|
|
|
|
2025-08-01 17:16:03 +08:00
|
|
|
</div>
|
|
|
|
|
<div class="commom-aside-small">
|
2025-10-26 12:25:50 +08:00
|
|
|
<SituationAssessment />
|
2025-08-01 17:16:03 +08:00
|
|
|
</div>
|
2025-05-20 16:06:20 +08:00
|
|
|
</div>
|
|
|
|
|
<!-- 中间 -->
|
2025-08-01 17:16:03 +08:00
|
|
|
<div class="home-center">
|
2025-10-26 12:25:50 +08:00
|
|
|
<div class="middle-top">
|
|
|
|
|
<Yszs />
|
|
|
|
|
</div>
|
2025-08-01 17:16:03 +08:00
|
|
|
<div class="flex middle-bottom mt10">
|
2025-10-26 12:25:50 +08:00
|
|
|
<div style="width: 100%;border: 1px sienna;position: relative">
|
|
|
|
|
<GdMap></GdMap>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-1" style="width: 340px;position: absolute;z-index: 100;right: 0;">
|
|
|
|
|
<DeployControl />
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="mr10" style="width: 30%;"><DeployControl /></div> -->
|
|
|
|
|
<!-- <div class="flex-1" style="flex: 1;"><ZdryWarning /></div> -->
|
2025-08-01 17:16:03 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-05-20 16:06:20 +08:00
|
|
|
<!-- 底部 -->
|
|
|
|
|
<div class="home-foot-t">
|
|
|
|
|
<Bkcz></Bkcz>
|
|
|
|
|
</div>
|
2025-04-12 14:54:02 +08:00
|
|
|
</div>
|
2025-07-14 17:31:24 +08:00
|
|
|
<!-- 左边弹窗 -->
|
2025-07-14 18:15:09 +08:00
|
|
|
<LeftDialog></LeftDialog>
|
2025-08-16 16:54:03 +08:00
|
|
|
|
2025-04-12 14:54:02 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
2025-10-26 12:25:50 +08:00
|
|
|
import { ref, getCurrentInstance, reactive, onMounted } from 'vue'
|
2025-07-14 18:15:09 +08:00
|
|
|
import LeftDialog from './dialog/leftDialog'
|
2025-04-22 16:39:00 +08:00
|
|
|
import GdMap from "@/components/GdMap/index.vue";
|
2025-04-12 14:54:02 +08:00
|
|
|
import Head from './layout/head.vue'
|
2025-04-15 14:38:12 +08:00
|
|
|
import DbCount from './model/dbCount.vue'
|
|
|
|
|
import QbsbCount from './model/qbsbCount.vue'
|
|
|
|
|
import QblyType from './model/qblyType.vue'
|
2025-10-26 12:25:50 +08:00
|
|
|
import TextType from './model/textType.vue'
|
2025-04-15 14:38:12 +08:00
|
|
|
import Bkcz from './model/bkcz.vue'
|
2025-08-01 17:16:03 +08:00
|
|
|
import GroupWarning from './model/groupWarning.vue'
|
2025-04-15 14:38:12 +08:00
|
|
|
import Yszs from './model/yszs.vue'
|
2025-08-01 17:16:03 +08:00
|
|
|
import DeployControl from './model/deployControl.vue';
|
|
|
|
|
import SituationAssessment from './model/situationAssessment.vue'
|
|
|
|
|
import Experience from './model/experience.vue'
|
2025-10-26 12:25:50 +08:00
|
|
|
import Calendar from './model/calendar.vue'
|
|
|
|
|
|
|
|
|
|
import { getItem, setItem} from "@/utils/storage";
|
|
|
|
|
import emitter from "@/utils/eventBus.js";
|
|
|
|
|
import { bm ,centralPoint} from '@/views/backOfficeSystem/IntelligentControl/DeploymentArea/xzqh.js'
|
|
|
|
|
import SwitchSysDialog from '@/components/SwitchSysDialog.vue'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const changeXzqh = (val,trg) => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
// 先移除已有的边界
|
|
|
|
|
emitter.emit('removeBj')
|
|
|
|
|
if (trg) {
|
|
|
|
|
console.log("多个");
|
|
|
|
|
// 如果传入的是多个区域数据（二维数组）
|
|
|
|
|
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)',
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
} else {
|
2025-08-16 16:54:03 +08:00
|
|
|
|
2025-10-26 12:25:50 +08:00
|
|
|
// 保持原来的逻辑，处理单个区域
|
|
|
|
|
emitter.emit('setBoundarys', {
|
|
|
|
|
data: {
|
|
|
|
|
type: "FeatureCollection",
|
|
|
|
|
features: [
|
|
|
|
|
{
|
|
|
|
|
geometry: {
|
|
|
|
|
type: "Polygon",
|
|
|
|
|
coordinates: [val] // 使用正确的GeoJSON格式
|
|
|
|
|
},
|
|
|
|
|
properties: {},
|
|
|
|
|
type: "Feature"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
color: '#cf1010',
|
|
|
|
|
fillColor: 'rgba(255, 255, 255,0)',
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}, 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 data = Object.values(bm).map(item => item);
|
|
|
|
|
changeXzqh(data,true)
|
|
|
|
|
} else {
|
|
|
|
|
switch (deptCode) {
|
|
|
|
|
case '54040200000'://巴宜区
|
|
|
|
|
changeXzqh(bm[542621])
|
|
|
|
|
break;
|
|
|
|
|
case '54042400000'://波密县
|
|
|
|
|
changeXzqh(bm[542625])
|
|
|
|
|
break;
|
|
|
|
|
case '54042500000'://察隅县
|
|
|
|
|
changeXzqh(bm[542626])
|
|
|
|
|
break;
|
|
|
|
|
case '54042100000'://工布江达县
|
|
|
|
|
changeXzqh(bm[542622])
|
|
|
|
|
break;
|
|
|
|
|
case '54042600000'://朗县
|
|
|
|
|
changeXzqh(bm[542627])
|
|
|
|
|
break;
|
|
|
|
|
case '54042200000'://米林县
|
|
|
|
|
changeXzqh(bm[542623])
|
|
|
|
|
break;
|
|
|
|
|
case '54042300000'://墨脱县
|
|
|
|
|
changeXzqh(bm[542624])
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
const data = Object.values(bm).map(item => item);
|
|
|
|
|
changeXzqh(data,true)
|
|
|
|
|
break;
|
|
|
|
|
}
|
2025-08-16 16:54:03 +08:00
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-10-26 12:25:50 +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] });
|
|
|
|
|
}
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getDepId()
|
|
|
|
|
makerCenter()
|
|
|
|
|
})
|
2025-08-16 16:54:03 +08:00
|
|
|
|
|
|
|
|
|
2025-04-12 14:54:02 +08:00
|
|
|
</script>
|
|
|
|
|
|
2025-04-15 14:38:12 +08:00
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@import "@/assets/css/homeScreen.scss";
|
2025-08-01 17:16:03 +08:00
|
|
|
|
2025-08-16 16:54:03 +08:00
|
|
|
.fxq {
|
|
|
|
|
border-radius: 35px;
|
|
|
|
|
width: 35px;
|
|
|
|
|
transition: transform 0.5s ease, width 0.5s ease;
|
|
|
|
|
background-color: rgb(1, 127, 245);
|
|
|
|
|
transform-origin: left center;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 35px;
|
|
|
|
|
height: 35px;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
line-height: 35px;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
height: 35px;
|
|
|
|
|
line-height: 35px;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
margin-left: 9.5px;
|
|
|
|
|
width: 16px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
margin-top: -3px;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
height: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fxq2 {
|
|
|
|
|
background-color: #9d88f9;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fxq1:hover {
|
|
|
|
|
width: 120px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fxq2:hover {
|
|
|
|
|
width: 120px;
|
|
|
|
|
|
|
|
|
|
// background-color: red;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fxq3:hover {
|
|
|
|
|
width: 120px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .badge-top-left .el-badge__content {
|
|
|
|
|
top: 0;
|
|
|
|
|
right: auto;
|
|
|
|
|
left: -10px;
|
|
|
|
|
transform: translateY(-50%) translateX(-50%);
|
2025-04-14 19:48:42 +08:00
|
|
|
}
|
2025-10-26 12:25:50 +08:00
|
|
|
|
|
|
|
|
.badge-content {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
max-height: 200px;
|
|
|
|
|
/* 默认展开的最大高度 */
|
|
|
|
|
min-height: 45px;
|
|
|
|
|
/* 确保收缩时有足够空间显示第一个图标 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.badge-content:not(.expanded) {
|
|
|
|
|
max-height: 45px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 收缩时只显示第一个图标，隐藏其他内容 */
|
|
|
|
|
.badge-content:not(.expanded)> :not(:first-child) {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
max-height: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.badge-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
2025-08-01 17:16:03 +08:00
|
|
|
</style>
|
