From ce1140cb4a99467578b9fd45d157668de065e655 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E7=BE=8E=E5=B9=B3?= <1102247926@qq.com>
Date: Thu, 16 Oct 2025 16:06:35 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=B5=E5=AD=90=E5=9B=B4=E6=A0=8F=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/ZDYH/ElectricArea.vue           | 417 ++++++++++++++++++
 1 file changed, 417 insertions(+)
 create mode 100644 ZcInfoQueryView/src/views/ZDYH/ElectricArea.vue

diff --git a/ZcInfoQueryView/src/views/ZDYH/ElectricArea.vue b/ZcInfoQueryView/src/views/ZDYH/ElectricArea.vue
new file mode 100644
index 00000000..2a84ebd6
--- /dev/null
+++ b/ZcInfoQueryView/src/views/ZDYH/ElectricArea.vue
@@ -0,0 +1,417 @@
+<!-- 电子围栏 -->
+<template>
+    <div class="home-E" v-loading.fullscreen.lock="dateLoading">
+        <div style="width:600px;position: fixed;z-index:2;height: 900px">
+            <el-collapse v-model="activeNames" style="width: 600px;height: 900px" :expand-icon-position="position">
+                <el-collapse-item title="" name="1" style="height:900px">
+                    <template #title>
+                        <span style="font-size: 16px;font-weight: bold;padding-left: 10px;">内蒙古各支队设备使用情况</span>
+                    </template>
+                    <template #default>
+                        <el-row style="width: 580px;padding-left:10px;padding-right:10px;height: 100px;padding-top: 10px;">
+                            <el-col :span="11" style="background-color:#7ec4ef ">
+                                <div style="align-content: center;color: green;width: 100%;height: 100%;">
+                                   <div style="font-size: 20px;color: greenyellow;width: 65%;height: 50%;padding-left: 35%;" >
+                                      {{equipmentTotal}}
+                                   </div>
+                                   <div style="font-size: 15px;color: gray;width: 75%;height: 30%;padding-left: 30%">电子围栏总数</div>
+                                </div>
+                            </el-col>
+                              <el-col :span="2">
+                             </el-col>
+                            <el-col :span="11" style="background-color:#7ec4ef ">
+                              <div style="align-content: center;color: greenyellow;width: 100%;height: 100%;">
+                                <div style="font-size: 20px;color: greenyellow;width: 65%;height: 50%;padding-left: 35%;" >
+                                  {{watchKiloMeters}}
+                                </div>
+                                <div style="font-size: 15px;color: gray;width: 75%;height: 30%;padding-left: 30%">监控公里总数(KM)</div>
+                              </div>
+                            </el-col>
+
+                        </el-row>
+                         <el-row style="width: 580px;height: 50px;margin-top:7px ">
+                            <el-col :span="24">
+                              <el-input style="width:530px;height:40px;padding-left: 10px;font-size: 13px " v-model="searchForm.equipmentname" placeholder="请输入组织名称" clearable>
+                              </el-input>
+                              <el-button  :icon="Search" style="height:40px;padding-left: 15px " @click="handleSearch"></el-button>
+                            </el-col>
+                         </el-row>
+                         <el-row style="width: 600px;height:670px">
+                           <el-col :span="24">
+                             <div style="height:670px;width:100%;position:relative;border-width: 0">
+                                 <el-table :data="tableData" width="100%"  class="table_el"
+                                           border
+                                           style="height: 100%;position: relative;"
+                                           :header-cell-style="{height:'70px'}"
+                                           :row-style="{height:'60px'}"
+                                           v-loading="fullscreenLoading">
+                                   <el-table-column  type="index" label="序号" align="center" width="80px"   />
+                                   <el-table-column  prop="equipmentname" label="所属组织" :show-overflow-tooltip="true"  width="300px"  resizable align="center"/>
+                                   <el-table-column  prop="equipmentid" label="设备编号"   width="100px" :show-overflow-tooltip="true" resizable align="center" />
+                                   <el-table-column  prop="monitormileage" label="监控公里数KM"     width="120px"  :show-overflow-tooltip="true"    resizable align="center" />
+                                 </el-table>
+                             </div>
+                           </el-col>
+                         </el-row>
+                    </template>
+
+                </el-collapse-item>
+            </el-collapse>
+        </div>
+        <div id="mapDivE" :style="mapStyle"></div>
+    </div>
+
+  <div v-if="dialogVisible"
+       style="background-color: #fff;position:absolute;width: 30%;height:40%;bottom: 2%;right: 0.5%;z-index:2;">
+    <div>
+      <div style="font-size: 14px;padding: 2% 2%;display: flex;">
+        <div style="width: 90%;">围栏信息</div>
+        <div><el-button @click="dialogVisible = false" :icon="Close" circle /></div>
+      </div>
+      <el-col style="margin-left: 2%;" :span="24">
+        <el-descriptions :column="1" >
+          <el-descriptions-item label="设备编号:">{{
+              formLabelAlign.equipmentid }}</el-descriptions-item>
+          <el-descriptions-item label="所在部门:">{{
+              formLabelAlign.departmentname }}</el-descriptions-item>
+          <el-descriptions-item label="监控公里数:">{{
+              formLabelAlign.monitormileage }}Km</el-descriptions-item>
+          <el-descriptions-item label="桩号:">{{
+              formLabelAlign.pilenumber }}</el-descriptions-item>
+          <el-descriptions-item label="经度:">{{
+              formLabelAlign.lng }}</el-descriptions-item>
+          <el-descriptions-item label="纬度:">{{formLabelAlign.lat}}</el-descriptions-item>
+        </el-descriptions>
+      </el-col>
+      <el-row style="margin-left: 2%;">
+        <el-col class="pilaoDetil" :span="7">
+          <div style="font-size: 18px;margin-top: 5px;"> {{ formLabelAlign.highwayspeedlimit }}</div>
+          <div style="font-size: 14px;"> 高速限速km/h</div>
+        </el-col>
+
+        <el-col class="pilaoDetil" :span="7">
+          <div style="font-size: 18px;margin-top: 5px;"> {{ formLabelAlign.lowspeedlimit }}</div>
+          <div style="font-size: 14px;"> 低速限速km/h</div>
+        </el-col>
+        <el-col class="pilaoDetil" :span="7">
+          <div style="font-size: 18px;margin-top: 5px;"> {{ formLabelAlign.ispark==1?'可以停车':'不可以停车' }}</div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+
+<script setup lang="ts">
+import { Close, View,Search } from '@element-plus/icons-vue';
+import {onMounted, reactive, ref, nextTick, computed} from 'vue';
+
+import { getTotal,getTotalList,getList } from "@/util/api/ZDYH/api";
+import type { FormItemProps, FormProps } from 'element-plus'
+//地图
+const map = ref(null);
+
+const activeNames = ['1']; // 默认展开所有项
+
+const equipmentTotal=ref<number>(0);//电子围栏总数
+const watchKiloMeters=ref(0);//监控公里数
+const fullscreenLoading=ref(false);//表格加载
+const tableData=ref([]);//表格数据
+
+//地图信息弹窗框
+const mapStyle = ref('');
+//地图数据
+const piLaoList = ref([]);
+const drawer = ref(false);
+
+const dateLoading = ref(false);
+const modalShow = ref(false);
+function handleSearch(){
+  getTotalListInit();
+}
+//表格查询条件
+const searchForm = reactive({
+  equipmentname:""
+});
+const dialogVisible=ref(false)
+onMounted(() => {
+  //  dateLoading.value = true;
+    getTotalInit();
+    getTotalListInit();
+    getListInit();
+
+});
+
+const labelPosition = ref<FormProps['labelPosition']>('left')
+const itemLabelPosition = ref<FormItemProps['labelPosition']>('')
+const formLabelAlign = reactive({
+  equipmentid: '',
+  departmentname: '',
+  monitormileage: '',
+  pilenumber: '',
+  lng: '',
+  lat: '',
+  highwayspeedlimit: '',
+  lowspeedlimit: '',
+  ispark: ''
+})
+function getTotalInit(){
+  let params={};
+  getTotal(params).then(res=>{
+    equipmentTotal.value=res[0].totalCount;
+    watchKiloMeters.value=res[0].monitormileage;
+  })
+}
+function getTotalListInit(){
+  fullscreenLoading.value=true;
+  getTotalList(searchForm).then(res=>{
+    tableData.value=res ;
+    fullscreenLoading.value=false;
+  })
+}
+function getListInit() {
+  let params={};
+  getList(params).then(res => {
+    piLaoList.value=res.datalist;
+        mapStyle.value = "width:100%;height:" + document.documentElement.clientHeight*0.97 + "px;z-index: 1;";
+        nextTick(() => {
+            initMap();
+        });
+    })
+}
+
+function initMap() {
+    let styleOption = Object.assign(
+        {},
+        HDmap.MapStyle.SM_WMTS_VEC_WHITE,
+        { glyphs: "./resource/hdmap/fonts/{fontstack}/{range}.pbf" }
+    )
+    map.value = new HDmap.map({
+        container: 'mapDivE',
+        center: [109.80282489244144, 43.72225716089292],
+        zoom: 5,
+        minZoom: 4, //最小缩放
+        maxZoom: 15, //最大缩放
+        styleURL: styleOption
+        // styleURL: HDmap.MapStyle.SM_WMTS_VEC_WHITE //加载超图蓝色底图
+    })
+    map.value.map2d.on("style.load", (event) => {
+        addPonit();
+    });
+    map.value.map2d.on('click',(e)=>{
+      // 增加偏差容错
+      let rect = [
+        [e.point.x - 1, e.point.y - 1],
+        [e.point.x + 1, e.point.y + 1],
+      ];
+      let features = map.value.map2d.queryRenderedFeatures(rect, {
+        layers: ['deptFill'], //你的图层名称，支持传入多个图层
+      });
+      let data = features[0].properties;
+      nextTick(()=>{
+        formLabelAlign.lat = data.lat;
+        formLabelAlign.lng = data.lng;
+        formLabelAlign.equipmentid = data.equipmentid;
+        formLabelAlign.departmentname = data.departmentname;
+        formLabelAlign.monitormileage = data.monitormileage;
+        formLabelAlign.pilenumber = data.pilenumber;
+        formLabelAlign.highwayspeedlimit = data.highwayspeedlimit;
+        formLabelAlign.lowspeedlimit = data.lowspeedlimit;
+        formLabelAlign.ispark = data.ispark;
+        dialogVisible.value=true;
+      })
+      let matchFill = ["match", ["get", "gid"]];
+      let matchPoint = ["match", ["get", "gid"]];
+      map.value.map2d.setZoom(10);
+        matchFill.push(data.pilenumber);
+        matchFill.push(`red`);
+
+        matchPoint.push(data.pilenumber.pilenumber + "_line1");
+        matchPoint.push(`red`);
+
+        matchPoint.push(data.pilenumber.pilenumber + "_line2");
+        matchPoint.push(`red`);
+
+        matchPoint.push(data.pilenumber.pilenumber + "_line3");
+        matchPoint.push(`red`);
+
+        matchPoint.push(data.pilenumber.pilenumber + "_line4");
+        matchPoint.push(`red`);
+
+      matchFill.push(`rgba(93,174,255,0.4)`);
+      matchPoint.push(`#0000CD`);
+      //部门区域高亮展示
+      map.value.map2d.setPaintProperty(
+          "deptFill",
+          "fill-color",
+          matchFill
+      );
+      //部门区域高亮展示
+      map.value.map2d.setPaintProperty(
+          "trackLine",
+          "line-color",
+          matchPoint
+      );
+    });
+
+}
+
+
+function addPonit() {
+    // 加载部门点位信息
+    // 标记线
+    // 设置线的样式
+    //设置中心点位
+    map.value.map2d.setCenter([109.80282489244144, 43.72225716089292]);
+    map.value.map2d.setZoom(5);
+    let attributes: {
+        paint: {
+            "line-color": "#409EFF", // 线段颜色
+            "line-width": 20, // 线段宽度
+        }
+    };
+        let deptFill = [];
+        let deptLinePoint = [];
+        for (let point of piLaoList.value) {
+                    deptFill.push({
+                        "type": "Feature",
+                        "properties": {
+                            "gid": point.pilenumber, //唯一标识，用于设置样式使用
+                            "fenceid":point.fenceid,
+                            "equipmentid":point.equipmentid,
+                            "departmentname":point.departmentname,
+                            "monitormileage":point.monitormileage,
+                            "pilenumber":point.pilenumber,
+                            "lng":point.lng,
+                            "lat":point.lat,
+                            "highwayspeedlimit":point.highwayspeedlimit,
+                            "lowspeedlimit":point.lowspeedlimit,
+                            "ispark":point.ispark,
+                        },
+                        "geometry": {
+                            "type": "Polygon",
+                            "coordinates": [
+                                [
+                                    //[point.beginLeftLng, point.beginLeftLat],
+                                    [parseFloat(point.beginRightLng) - 0.01, parseFloat(point.beginRightLat) - 0.01],
+                                    [parseFloat(point.beginLeftLng) - 0.01, parseFloat(point.beginLeftLat) - 0.01],
+                                    [parseFloat(point.endLeftLng) - 0.01, parseFloat(point.endLeftLat) - 0.01],
+                                    [parseFloat(point.endRightLon) - 0.01, parseFloat(point.endRightLat) - 0.01],
+                                    [parseFloat(point.beginRightLng) - 0.01, parseFloat(point.beginRightLat) - 0.01],
+                                    //[parseFloat(point.lng)-0.01, parseFloat(point.lat)-0.01],
+                                ]
+                            ]
+                        }
+                    });
+                    // //放入四条线
+                    deptLinePoint.push({
+                        "type": "Feature",
+                        "properties": {
+                            "gid": point.pilenumber + "_line1", //唯一标识，用于设置样式使用
+                        },
+                        "geometry": {
+                            "type": "LineString",
+                            "coordinates": [[parseFloat(point.beginLeftLng) - 0.01, parseFloat(point.beginLeftLat) - 0.01], [parseFloat(point.beginRightLng) - 0.01, parseFloat(point.beginRightLat) - 0.01]]
+                        }
+                    }, {
+                        "type": "Feature",
+                        "properties": {
+                            "gid": point.pilenumber + "_line2", //唯一标识，用于设置样式使用
+                        },
+                        "geometry": {
+                            "type": "LineString",
+                            "coordinates": [[parseFloat(point.endLeftLng) - 0.01, parseFloat(point.endLeftLat) - 0.01], [parseFloat(point.endRightLon) - 0.01, parseFloat(point.endRightLat) - 0.01]]
+                        }
+                    }, {
+                        "type": "Feature",
+                        "properties": {
+                            "gid": point.pilenumber + "_line3", //唯一标识，用于设置样式使用
+                        },
+                        "geometry": {
+                            "type": "LineString",
+                            "coordinates": [[parseFloat(point.beginLeftLng) - 0.01, parseFloat(point.beginLeftLat) - 0.01], [parseFloat(point.endLeftLng) - 0.01, parseFloat(point.endLeftLat) - 0.01]]
+                        }
+                    }, {
+                        "type": "Feature",
+                        "properties": {
+                            "gid": point.pilenumber + "_line4", //唯一标识，用于设置样式使用
+                        },
+                        "geometry": {
+                            "type": "LineString",
+                            "coordinates": [[parseFloat(point.beginRightLng) - 0.01, parseFloat(point.beginRightLat) - 0.01], [parseFloat(point.endRightLon) - 0.01, parseFloat(point.endRightLat) - 0.01]]
+                        }
+                    });
+        }
+        //此值作为layerName图层标识
+        let _lineLayerName = 'trackLine'
+        map.value.removeLayer(_lineLayerName)
+        //把图层标识添加进layerNames
+        //layerNames.value.push(_lineLayerName);
+        map.value.addFeatureLine(_lineLayerName, deptLinePoint, attributes);
+        //设置线的样式和颜色
+        map.value.map2d.setPaintProperty(
+            'trackLine', // 你的图层名字
+            "line-color",
+            "#0000CD"
+        );
+        map.value.map2d.setPaintProperty(
+            'trackLine', // 你的图层名字
+            "line-width",
+            6
+        );
+        map.value.map2d.setPaintProperty(
+            'trackLine', // 你的图层名字
+            "line-opacity",
+            0.8
+        );
+
+        //此值作为layerName图层标识
+        _lineLayerName = 'deptFill'
+        map.value.removeLayer("deptFill")
+        //把图层标识添加进layerNames
+        //layerNames.value.push(_lineLayerName);
+        map.value.addFeatureFill(_lineLayerName, deptFill, attributes);
+        //设置线的样式和颜色
+        map.value.map2d.setPaintProperty(
+            'deptFill', // 你的图层名字
+            "fill-outline-color",
+            "#0000CD"
+        );
+}
+</script>
+
+
+
+<style scoped>
+html,
+body,
+#mapDivE {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+.el-collapse-item__wrap{
+  height:572px;
+}
+.home-E {
+    height: 100%;
+    width: 100%;
+}
+.pilaoDetil {
+  border-radius: 5%;
+  text-align: center;
+  background-color: rgb(217, 236, 255);
+  height: 70px;
+  margin: 5px 5px;
+}
+::v-deep .el-collapse-item__wrap {
+    width: 600px !important;
+}
+::v-deep .el-collapse-item__content {
+  padding-bottom:0px !important;
+}
+::v-deep.el-drawer__header {
+    padding: 0px !important;
+}
+</style>