<template>
|
<div class="device">
|
<div class="left-top">
|
<span>监测设备</span>
|
</div>
|
<div class="left-content device-content">
|
<div style="margin-left: 5px">
|
<span style="color: white">重点沟：</span>
|
<el-select
|
v-model="selectValue"
|
placeholder="Select"
|
size="large"
|
style="width: 240px"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
<el-tree
|
:data="deviceTree"
|
node-key="deviceId"
|
:props="treeProps"
|
@node-click="handleTreeNodeClick"
|
class="device-tree"
|
>
|
<template #default="{ node, data }">
|
<span v-if="!data.children" class="device-tree-item">
|
<!-- <div class="device-item-icon"></div> -->
|
<span class="device-item-text">{{ node.label }}</span>
|
</span>
|
<span v-else class="device-tree-category">
|
{{ node.label }} ({{ data.children.length }})
|
</span>
|
</template>
|
</el-tree>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed, onMounted } from "vue";
|
import { createPoint, removeEntities } from "@/utils/map";
|
import { deviceDictList, getDictName } from "@/constant/dict.js";
|
import { getDeviceData } from "@/api/index";
|
|
const selectValue = ref("孙胡沟");
|
|
const options = ref([
|
{
|
value: "孙胡沟",
|
label: "孙胡沟",
|
},
|
{
|
value: "鱼水洞后沟",
|
label: "鱼水洞后沟",
|
},
|
{
|
value: "于家西沟",
|
label: "于家西沟",
|
},
|
{
|
value: "北河沟",
|
label: "北河沟",
|
},
|
{
|
value: "龙泉峪村",
|
label: "龙泉峪村",
|
},
|
]);
|
|
const devicetList = ref([
|
{
|
deviceCode: "01303A9016",
|
deviceId: "1821067850122498049",
|
deviceName: "孙胡沟(墒情)",
|
dictDeviceType: "14372958380",
|
latitude: 40.56476666,
|
longitude: 116.5955361,
|
},
|
{
|
deviceCode: "303A9016",
|
deviceId: "1821067878870257666",
|
deviceName: "孙胡沟(墒情)",
|
dictDeviceType: "1437295822",
|
latitude: 40.56476666,
|
longitude: 116.5955361,
|
},
|
{
|
deviceCode: "1101161102180100010063",
|
deviceId: "1554360510040182786",
|
deviceName: "怀柔区琉璃庙镇孙胡沟尹家西沟雨量计0063",
|
dictDeviceType: "1437295810",
|
latitude: 40.556589,
|
longitude: 116.579459,
|
},
|
{
|
deviceCode: "1101161102180100194030",
|
deviceId: "1554361328692826114",
|
deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟编码器4030",
|
dictDeviceType: "1437295815",
|
latitude: 40.554272,
|
longitude: 116.592583,
|
},
|
{
|
deviceCode: "1101161102180100031041",
|
deviceId: "1554360448702681089",
|
deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟次声仪1041",
|
dictDeviceType: "1437295832",
|
latitude: 40.553236,
|
longitude: 116.592304,
|
},
|
{
|
deviceCode: "1101161102180100022007",
|
deviceId: "1554360273959587842",
|
deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟含水率2007",
|
dictDeviceType: "1437295822",
|
latitude: 40.545821,
|
longitude: 116.586354,
|
},
|
{
|
deviceCode: "1101161102180100225406",
|
deviceId: "1554360478494822402",
|
deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟流速仪5406",
|
dictDeviceType: "1437295821",
|
latitude: 40.554368,
|
longitude: 116.592989,
|
},
|
{
|
deviceCode: "1101161102180100055006",
|
deviceId: "1554360276627165185",
|
deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟泥位计5006",
|
dictDeviceType: "1437295811",
|
latitude: 40.554398,
|
longitude: 116.592929,
|
},
|
{
|
deviceCode: "1101161102180100010064",
|
deviceId: "1554360452670492674",
|
deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟雨量计0064",
|
dictDeviceType: "1437295810",
|
latitude: 40.545741,
|
longitude: 116.586304,
|
},
|
{
|
deviceCode: "1101161102180100183030",
|
deviceId: "1554360533087883265",
|
deviceName: "怀柔区琉璃庙镇孙胡沟村上台子河东南沟摄像头3030",
|
dictDeviceType: "1437295825",
|
latitude: 40.554272,
|
longitude: 116.592583,
|
},
|
{
|
deviceCode: "1101161102180100194031",
|
deviceId: "1554361328877375489",
|
deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟编码器4031",
|
dictDeviceType: "1437295815",
|
latitude: 40.554035,
|
longitude: 116.59786,
|
},
|
{
|
deviceCode: "1101161102180100055007",
|
deviceId: "1554360509775941634",
|
deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟泥位计5007",
|
dictDeviceType: "1437295811",
|
latitude: 40.554729,
|
longitude: 116.598165,
|
},
|
{
|
deviceCode: "1101161102180100031042",
|
deviceId: "1554360448916590593",
|
deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟次声仪1042",
|
dictDeviceType: "1437295832",
|
latitude: 40.549398,
|
longitude: 116.600387,
|
},
|
{
|
deviceCode: "1101161102180100225407",
|
deviceId: "1554360478658400257",
|
deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟流速仪5407",
|
dictDeviceType: "1437295821",
|
latitude: 40.55481,
|
longitude: 116.598025,
|
},
|
{
|
deviceCode: "1101161102180100022008",
|
deviceId: "1554360274165108737",
|
deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟含水率2008",
|
dictDeviceType: "1437295822",
|
latitude: 40.544645,
|
longitude: 116.596511,
|
},
|
{
|
deviceCode: "1101161102180100183031",
|
deviceId: "1554360533255655426",
|
deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟摄像头3031",
|
dictDeviceType: "1437295825",
|
latitude: 40.554035,
|
longitude: 116.59786,
|
},
|
{
|
deviceCode: "1101161102180100010065",
|
deviceId: "1554360452888596482",
|
deviceName: "怀柔区琉璃庙镇孙胡沟椴树底下东沟雨量计0065",
|
dictDeviceType: "1437295810",
|
latitude: 40.543104,
|
longitude: 116.59585,
|
},
|
{
|
deviceCode: "1101161102180100031040",
|
deviceId: "1554360448383913986",
|
deviceName: "怀柔区琉璃庙镇孙胡沟村于家西沟次声仪1040",
|
dictDeviceType: "1437295832",
|
latitude: 40.563822,
|
longitude: 116.592648,
|
},
|
{
|
deviceCode: "1101161102180100010062",
|
deviceId: "1554360452519497730",
|
deviceName: "怀柔区琉璃庙镇孙胡沟村于家西沟雨量计0062",
|
dictDeviceType: "1437295810",
|
latitude: 40.558778,
|
longitude: 116.586892,
|
},
|
{
|
deviceCode: "1101160042160100010005",
|
deviceId: "1554360582698110977",
|
deviceName: "怀柔区雁栖镇北湾村北林大石门沟雨量计0005",
|
dictDeviceType: "1437295810",
|
latitude: 40.533623,
|
longitude: 116.602406,
|
},
|
]);
|
|
const treeProps = {
|
label: "deviceName",
|
children: "children",
|
};
|
|
// 计算属性：将设备列表转换为树形结构
|
// 计算属性：将设备列表转换为树形结构
|
const deviceTree = computed(() => {
|
const typeMap = {};
|
|
// 先按设备类型分组
|
devicetList.value.forEach((device) => {
|
const typeName = getDictName(deviceDictList, device.dictDeviceType);
|
|
if (!typeName) {
|
console.warn("未找到设备类型:", device);
|
return;
|
}
|
|
if (!typeMap[typeName]) {
|
typeMap[typeName] = [];
|
}
|
// 直接使用原始的设备名称，不进行任何替换操作
|
typeMap[typeName].push({
|
...device,
|
deviceName: device.deviceName.trim(), // 只去除首尾空格
|
});
|
});
|
|
// 转换为树形结构
|
return Object.keys(typeMap).map((typeName) => ({
|
deviceName: typeName,
|
children: typeMap[typeName],
|
}));
|
});
|
function handleTreeNodeClick(data) {
|
// 只有设备节点才处理点击事件
|
if (!data.children) {
|
const entity = viewer.entities.getById(data.deviceId);
|
if (entity) {
|
viewer.flyTo(entity, {
|
offset: {
|
heading: Cesium.Math.toRadians(0),
|
pitch: Cesium.Math.toRadians(-45),
|
range: 5000,
|
},
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.device {
|
position: absolute;
|
width: 345px;
|
top: 100px;
|
left: 30px;
|
bottom: 55px;
|
z-index: 99;
|
}
|
|
.device-content {
|
padding: 10px;
|
box-sizing: border-box;
|
overflow-y: auto;
|
height: calc(100% - 70px);
|
}
|
|
.device-tree {
|
height: calc(100% - 50px);
|
background: transparent;
|
color: white;
|
margin-top: 10px;
|
width: 100%;
|
overflow-x: auto;
|
|
:deep(.el-tree-node__content) {
|
height: 30px;
|
margin: 5px 0;
|
}
|
|
:deep(.el-tree-node__expand-icon) {
|
color: white;
|
}
|
|
:deep(.el-tree-node:focus > .el-tree-node__content) {
|
background-color: rgba(38, 124, 124, 0.3);
|
}
|
}
|
|
.device-tree-item {
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
}
|
|
.device-tree-category {
|
font-weight: bold;
|
color: #fff;
|
}
|
|
.device-item-icon {
|
background: url("@/assets/img/menu/locationicon.png") no-repeat;
|
background-position: 5px 5px;
|
width: 30px;
|
height: 30px;
|
margin-right: 5px;
|
}
|
|
.device-item-text {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
// 保持原有的选择器样式
|
:deep(.el-select__placeholder) {
|
color: white;
|
}
|
:deep(.el-select-dropdown__item.hover),
|
:deep(.el-select-dropdown__item:hover) {
|
color: white !important;
|
background-color: rgb(38, 124, 124, 0.5);
|
}
|
:deep(.el-tree-node__content) {
|
padding-left: 0px !important ;
|
}
|
</style>
|
