分布图优化、换热站优化

package-lock.json

@@ -293,6 +293,11 @@
       "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
       "integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
     },
+    "@element-plus/icons": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons/-/icons-0.0.11.tgz",
+      "integrity": "sha512-iKQXSxXu131Ai+I9Ymtcof9WId7kaXvB1+WRfAfpQCW7UiAMYgdNDqb/u0hgTo2Yq3MwC4MWJnNuTBEpG8r7+A=="
+    },
     "@element-plus/icons-vue": {
       "version": "2.0.9",
       "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.0.9.tgz",
@@ -592,6 +597,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "npm:@sxzz/popperjs-es@2.11.7",
+      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+    },
     "@types/d3-timer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-2.0.1.tgz",
@@ -1147,6 +1157,11 @@
       "resolved": "https://registry.npmjs.org/contour_plot/-/contour_plot-0.0.1.tgz",
       "integrity": "sha512-Nil2HI76Xux6sVGORvhSS8v66m+/h5CwFkBJDO+U5vWaMdNC0yXNCsGDPbzPhvqOEU5koebhdEvD372LI+IyLw=="
     },
+    "core-js": {
+      "version": "3.26.1",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.26.1.tgz",
+      "integrity": "sha512-21491RRQVzUn0GGM9Z1Jrpr6PNPxPi+Za8OM9q4tksTSnlbXXGKK1nXNg/QvwFYettXvSX6zWKCtHHfjN4puyA=="
+    },
     "core-js-pure": {
       "version": "3.24.1",
       "resolved": "https://registry.npmmirror.com/core-js-pure/-/core-js-pure-3.24.1.tgz",
@@ -1361,13 +1376,6 @@
         "lodash-unified": "^1.0.2",
         "memoize-one": "^6.0.0",
         "normalize-wheel-es": "^1.2.0"
-      },
-      "dependencies": {
-        "@popperjs/core": {
-          "version": "npm:@sxzz/popperjs-es@2.11.7",
-          "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
-          "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
-        }
       }
     },
     "element-resize-detector": {
@@ -2507,6 +2515,11 @@
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+    },
     "normalize-wheel-es": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
@@ -2596,6 +2609,11 @@
         "p-limit": "^3.0.2"
       }
     },
+    "pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmmirror.com/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
@@ -2738,6 +2756,11 @@
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
       "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w=="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
@@ -3304,6 +3327,43 @@
         "@vue/devtools-api": "^6.1.4"
       }
     },
+    "vue3-cron": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmmirror.com/vue3-cron/-/vue3-cron-1.1.8.tgz",
+      "integrity": "sha512-r6SBXnIASHponz3vXuh9vVHYYsGEbtUljSzJAdAAEBkh5wtg0zj/yks8979cKPmQsU46p79c/sxOxUs5KCa/Lw==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "element-plus": "^1.0.2-beta.28",
+        "vue": "^3.0.0"
+      },
+      "dependencies": {
+        "async-validator": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-3.5.2.tgz",
+          "integrity": "sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ=="
+        },
+        "element-plus": {
+          "version": "1.0.2-beta.71",
+          "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-1.0.2-beta.71.tgz",
+          "integrity": "sha512-tlfbRORIav8gJcIpjZI5F6aJIVHIaDuGO6/vKu43lgYq4JS2JPNRTjvrSE2p4f5xLfaFNfOWjCS3sybXLfMg8g==",
+          "requires": {
+            "@element-plus/icons": "^0.0.11",
+            "@popperjs/core": "^2.4.4",
+            "async-validator": "^3.4.0",
+            "dayjs": "1.x",
+            "lodash": "^4.17.20",
+            "mitt": "^2.1.0",
+            "normalize-wheel": "^1.0.1",
+            "resize-observer-polyfill": "^1.5.1"
+          }
+        },
+        "mitt": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmmirror.com/mitt/-/mitt-2.1.0.tgz",
+          "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+        }
+      }
+    },
     "vue3-json-viewer": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/vue3-json-viewer/-/vue3-json-viewer-2.2.2.tgz",

src/api/loopSupervision/index.ts

@@ -0,0 +1,7 @@
+import { get, post, del, put } from '/@/utils/request';
+
+export default {
+  getLoopRegulation: (params: object) => get('/region/monitor/getLoopRegulation', params), // 环路监管
+  getAllHeatStation: (params: object) => get('/region/monitor/getAllHeatStation', params), // 分布图
+  getLoopRegulationDetail: (params: object) => get('/region/monitor/getLoopRegulationDetail', params), // 环路监管详情
+}

src/utils/map.ts

@@ -2,17 +2,14 @@
 let BMapGL = (window as any).BMapGL;
 
 export function setMarker(markers: any[], map: any) {
+  const points: any = []
   markers.forEach((item) => {
     const { lat, lnt: lng } = item;
     const point = new BMapGL.Point(lng, lat);
+    points.push(point)
 
     const marker = new BMapGL.Marker(point);
-    // const marker = new BMapGL.Marker(point, {
-    //   icon: new BMapGL.Icon("/imgs/station.svg", new BMapGL.Size(24, 24), {
-    //     // anchor: new BMapGL.Size(10, 25),
-    //     // imageOffset: new BMapGL.Size(0, 0 - 25),
-    //   }),
-    // });
+
     map.addOverlay(marker);
 
     marker.addEventListener("click", function () {
@@ -47,4 +44,5 @@ export function setMarker(markers: any[], map: any) {
       map.openInfoWindow(infoWindow, point); //开启信息窗口
     });
   });
+  return points
 }

src/views/heating/heatStation/heatingDistrict/heatingDistrictManage/index.vue

@@ -34,7 +34,7 @@
 		<el-card class="mt-3">
 			<div class="panel" :class="{ dark: isDark }">
 				<div class="left-panel">
-					<el-input v-model="filterText" size="default" placeholder="搜索区域" />
+					<!-- <el-input v-model="filterText" size="default" placeholder="搜索区域" /> -->
 					<el-tree :data="treeList" node-key="id" default-expand-all :props="{
 						children: 'children'
 					}" @node-click="onNodeClick" :expand-on-click-node="false">

src/views/heating/heatStation/loop/component/detail.vue

@@ -9,7 +9,7 @@
 					{{ ruleForm.code }}
 				</el-form-item>
 				<el-form-item label="所属换热站" prop="stationId">
-          {{ ruleForm.stationId }}
+          {{ ruleForm.stationInfo.name }}
 					<!-- <el-tree-select
 						v-model="ruleForm.stationId"
 						:data="treeData"

src/views/heating/monitor/loopSupervision/index.vue

@@ -4,22 +4,28 @@
       <div class="system-user-search mb15">
         <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
           <el-form-item label="" prop="">
-            <el-radio-group v-model="radioValue" size="default">
-              <el-radio-button label="换热站" v-auth="'heatStation'" />
-              <el-radio-button label="环路" v-auth="'loop'" />
+            <el-radio-group v-model="tableData.param.types" size="default">
+              <el-radio-button label="station" v-auth="'heatStation'">
+                换热站
+              </el-radio-button>
+              <el-radio-button label="loop" v-auth="'loop'">
+                环路
+              </el-radio-button>
             </el-radio-group>
           </el-form-item>
           <el-form-item label="环路名称" prop="name">
-            <el-select v-model="tableData.param.name" placeholder="环路名称" clearable size="default" style="width: 240px">
+            <el-input v-model="tableData.param.name" placeholder="环路名称" size="default"></el-input>
+            <!-- <el-select v-model="tableData.param.name" placeholder="环路名称" clearable size="default" style="width: 240px">
               <el-option label="已发布" :value="1" />
               <el-option label="未发布" :value="0" />
-            </el-select>
+            </el-select> -->
           </el-form-item>
-          <el-form-item label="环路编号" prop="name">
-            <el-select v-model="tableData.param.name" placeholder="环路编号" clearable size="default" style="width: 240px">
+          <el-form-item label="环路编号" prop="code">
+            <el-input v-model="tableData.param.code" placeholder="环路编号" size="default"></el-input>
+            <!-- <el-select v-model="tableData.param.name" placeholder="环路编号" clearable size="default" style="width: 240px">
               <el-option label="已发布" :value="1" />
               <el-option label="未发布" :value="0" />
-            </el-select>
+            </el-select> -->
           </el-form-item>
           <el-form-item>
             <el-button size="default" type="primary" class="ml10" v-auth="'query'" @click="typeList">
@@ -77,7 +83,7 @@
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 // import EditDic from './component/editPro.vue';
-import api from '/@/api/device';
+import api from '/@/api/loopSupervision';
 import { useRouter } from 'vue-router';
 
 // 定义接口来定义对象的类型
@@ -114,7 +120,6 @@ export default defineComponent({
     const queryRef = ref();
     const router = useRouter()
     const state = reactive({
-      radioValue: '换热站',
       ids: [],
       tableData: {
         data: [{ name: '换热站', key: '2022-10-25', value: 1 }],
@@ -123,8 +128,9 @@ export default defineComponent({
         param: {
           pageNum: 1,
           pageSize: 10,
-          status: '',
-          dateRange: [],
+          types: 'station', // 类型 station 换热站 loop环路
+          name: '',
+          code: '',
         },
       },
     });
@@ -134,7 +140,7 @@ export default defineComponent({
     };
     const typeList = () => {
       state.tableData.loading = true;
-      api.product.getList(state.tableData.param).then((res: any) => {
+      api.getLoopRegulation(state.tableData.param).then((res: any) => {
         state.tableData.data = res.product;
         state.tableData.total = res.total;
       }).finally(() => (state.tableData.loading = false));
@@ -176,7 +182,7 @@ export default defineComponent({
     };
     // 页面加载时
     onMounted(() => {
-      // initTableData();
+      initTableData();
     });
     /** 重置按钮操作 */
     const resetQuery = (formEl: FormInstance | undefined) => {

src/views/heating/monitor/map.vue

@@ -10,7 +10,35 @@
 			<el-checkbox label="二网供水压力" />
 			<el-checkbox label="二网回水压力" />
 		</el-checkbox-group>
-		<div class="map flex1 mt-2" ref="mapRef"></div>
+		<div class="flex1 mt-2" style="position: relative;">
+			<div class="map" ref="mapRef" style="height: 100%"></div>
+
+			<!-- 显示弹层区域 -->
+			<div class="view">
+				<div class="view-div" v-for="(item, index) in viewList" :key="index">
+					<div class="view-div-item">
+						<div class="label">环路名称：</div>
+						<div class="text">{{ item.name }}</div>
+					</div>
+					<div class="view-div-item">
+						<div class="label">所属换热站：</div>
+						<div class="text">SJIWW786</div>
+					</div>
+					<div class="view-div-item">
+						<div class="label">环路编号：</div>
+						<div class="text">**换热站1</div>
+					</div>
+					<div class="view-div-item">
+						<div class="label">一网供水温度：</div>
+						<div class="text"></div>
+					</div>
+					<div class="view-div-item">
+						<div class="label">一网回水温度：</div>
+						<div class="text">24℃</div>
+					</div>
+				</div>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -24,13 +52,15 @@ import { useStore } from '/@/store/index';
 const mapRef = ref();
 const checkList = ref([]);
 const store = useStore();
+const heatList = ref([]);
+const viewList = ref([]);
 
 let BMapGL = (window as any).BMapGL;
 let map: any = null;
 let getThemeConfig: any = null
+let points: any = []
 
 onMounted(() => {
-
 	// 获取布局配置信息
 	getThemeConfig = store.state.themeConfig.themeConfig;
 	map = new BMapGL.Map(mapRef.value, {
@@ -40,7 +70,7 @@ onMounted(() => {
 	map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件
 	map.addControl(new BMapGL.ZoomControl()); // 添加缩放控件
 
-	const testPt = new BMapGL.Point(104.5, 38);
+	const testPt = new BMapGL.Point(124.383044, 40.124296);
 	map.centerAndZoom(testPt, 5);
 	map.enableScrollWheelZoom();
 	if (getThemeConfig.isIsDark) {
@@ -51,12 +81,47 @@ onMounted(() => {
 
 	// 获取换热站列表
 	api.heatStation.getAll().then((res: any) => {
+		heatList.value = res
 		renderStation(res);
 	});
 	// 获取环路列表
 	api.loop.getList({ pageSize: 50, status: 1 }).then((res: any) => {
 		console.log(res);
 	});
+	// 地图缩放事件	
+	// map.addEventListener('zoomstart', (e: any) => {
+	// 	console.log('zoomstart', e)
+	// })
+	map.addEventListener('zoomend', (e: any) => {
+		// console.log('zoomend', e)
+		console.log('zoomend', map.getZoom())
+		let zoom = map.getZoom()
+		if (zoom > 20.5 && points.length) {
+			let arr: any = []
+			let viewArr: any = []
+			points.forEach((point: any) => {
+				if (map.getBounds().containsPoint(point)) {
+					arr.push(point)
+				}
+			})
+			console.log(arr)
+			arr.forEach((point: any) => {
+				let item = heatList.value.find((item: any) => (point.lat === item.lat && point.lng === item.lnt))
+				console.log(item)
+				viewArr.push(item)
+			})
+			viewList.value = viewArr
+		} else {
+			viewList.value = []
+		}
+	})
+	// 获取当前视图内的点
+	// map.getBounds().containsPoint({
+  //   "lng": 124.41798,
+  //   "lat": 40.149303
+	// })
+
+	// window._map = map
 });
 // 监听 vuex 中是否开启深色主题
 watch(
@@ -77,7 +142,11 @@ watch(
 	}
 );
 const renderStation = (list: any[]) => {
-	setMarker(list, map);
+	points = setMarker(list, map);
+	// 控制标点显示在最佳视野内
+	if (points && points.length) {
+		map.setViewport(points)
+	}
 };
 </script>
 
@@ -140,5 +209,29 @@ const renderStation = (list: any[]) => {
 }
 </style>
 <style scoped lang="scss">
-.page {}
+.view {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	z-index: 999;
+	display: flex;
+	&-div {
+		width: 200px;
+		padding: 10px;
+		background-color: #fff;
+		&:not(:first-child) {
+			margin-left: 10px;
+		}
+		&-item {
+			display: flex;
+			align-items: center;
+			.label {
+				width: 100px;
+			}
+			.text {
+				flex: 1;
+			}
+		}
+	}
+}
 </style>