From 907a3504a77873a8e762adc2f684222c8946adec Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 10 八月 2022 21:18:54 +0800
Subject: [PATCH] 添加实时监控，调整树的滚动条
---
src/views/equipmentManagement/equipmentList/components/Content.vue | 120 ++++++++++++++++++++++++++++--------------------------------
1 files changed, 56 insertions(+), 64 deletions(-)
diff --git a/src/views/equipmentManagement/equipmentList/components/Content.vue b/src/views/equipmentManagement/equipmentList/components/Content.vue
index bb69fb1..ff5b853 100644
--- a/src/views/equipmentManagement/equipmentList/components/Content.vue
+++ b/src/views/equipmentManagement/equipmentList/components/Content.vue
@@ -1,62 +1,54 @@
<template>
<div class="whiteContent Content">
- <div class="title">璁惧鍦板浘</div>
+ <div class="title" v-show="false">璁惧鍦板浘</div>
<!-- 鍏ㄥ睆鎸夐挳 -->
<img
class="zoomOut iconfont"
src="/images/equipmentManagement/full.png"
@click="toggleZoom('Full')"
- v-if="!isFull"
+ v-show="false"
/>
<!-- 鍙栨秷鍏ㄥ睆鐨勬寜閽� -->
- <img
- class="zoomOut iconfont"
- src="/images/equipmentManagement/quit.png"
- @click="toggleZoom('')"
- v-else
- />
+ <img class="zoomOut iconfont" src="/images/equipmentManagement/quit.png" @click="toggleZoom('')" v-show="false" />
+
<!-- 鏅�氬湴鍥� -->
- <div id="map" v-if="!isFull"></div>
+ <div id="map" v-show="false"></div>
<!-- 鍏ㄥ睆鍦板浘 -->
- <div id="mapFull" v-else></div>
- <InfoCard
- @close="closeCard"
- v-if="isShowCard"
- :node="activeNode"
- ></InfoCard>
+ <div id="mapFull" v-show="false"></div>
+ <InfoCard @close="closeCard" v-if="isShowCard" :node="activeNode"></InfoCard>
<FormList v-if="!isFull"></FormList>
</div>
</template>
<script>
-import { findDevList } from "@/api/device";
-import AMapLoader from "@amap/amap-jsapi-loader";
-import InfoCard from "@/views/equipmentManagement/equipmentList/components/InfoCard";
-import FormList from "@/views/equipmentManagement/equipmentList/components/FormList";
+import { findDevList } from "@/api/device"
+import AMapLoader from "@amap/amap-jsapi-loader"
+import InfoCard from "@/views/equipmentManagement/equipmentList/components/InfoCard"
+import FormList from "@/views/equipmentManagement/equipmentList/components/FormList"
-import bus from "@/plugin/bus";
+import bus from "@/plugin/bus"
export default {
created() {
window._AMapSecurityConfig = {
- securityJsCode: "768ab79bdc4075aa082bc070c53bb3c4",
- };
+ securityJsCode: "768ab79bdc4075aa082bc070c53bb3c4"
+ }
},
mounted() {
- this.initMap("");
+ this.initMap("")
bus.$on("refleshNode", (node) => {
- this.nodes = node;
- this.initNode();
- });
+ this.nodes = node
+ this.initNode()
+ })
},
beforeDestroy() {
- bus.$off("refleshNode");
+ bus.$off("refleshNode")
},
components: {
InfoCard, //璁惧淇℃伅寮瑰眰
- FormList, //琛ㄦ牸
+ FormList //琛ㄦ牸
},
data() {
return {
@@ -69,8 +61,8 @@
center: [116.06157, 39.66157], //鍦板浘涓績
activeNode: null, //閫変腑鐨勫湴鍥捐妭鐐�
geocoder: {},
- myMaker: null,
- };
+ myMaker: null
+ }
},
methods: {
@@ -79,39 +71,39 @@
AMapLoader.load({
key: "69cd7e958683e8462beab5c08e6bc21b", // 鐢宠濂界殑Web绔紑鍙戣�匥ey锛岄娆¤皟鐢� load 鏃跺繀濉�
version: "2.0", // 鎸囧畾瑕佸姞杞界殑 JSAPI 鐨勭増鏈紝缂虹渷鏃堕粯璁や负 1.4.15
- plugins: ["AMap.Geocoder", "AMap.Geolocation"], // 闇�瑕佷娇鐢ㄧ殑鐨勬彃浠跺垪琛紝濡傛瘮渚嬪昂'AMap.Scale'绛�
+ plugins: ["AMap.Geocoder", "AMap.Geolocation"] // 闇�瑕佷娇鐢ㄧ殑鐨勬彃浠跺垪琛紝濡傛瘮渚嬪昂'AMap.Scale'绛�
})
.then((AMap) => {
- this.AMap = AMap;
+ this.AMap = AMap
this.map = new AMap.Map(`map${status}`, {
//璁剧疆鍦板浘瀹瑰櫒id
zoom: this.zoom, //鍒濆鍖栧湴鍥剧骇鍒�
- center: this.center, //鍒濆鍖栧湴鍥句腑蹇冪偣浣嶇疆
- });
+ center: this.center //鍒濆鍖栧湴鍥句腑蹇冪偣浣嶇疆
+ })
//鍒濆鍖栨煡璇㈠湴鐞嗕綅缃彃浠�
AMap.plugin("AMap.Geocoder", () => {
- this.geocoder = new AMap.Geocoder();
- });
+ this.geocoder = new AMap.Geocoder()
+ })
- this.initNode();
+ this.initNode()
})
.catch((e) => {
- console.log(e);
- });
+ console.log(e)
+ })
},
//鍒濆鍖栬妭鐐�
initNode() {
if (this.myMaker) {
- this.myMaker.destroy();
+ this.myMaker.destroy()
}
this.nodes.filter((item, index) => {
//鏌ヨ琛屾斂浣嶇疆
this.geocoder.getAddress([item.lon, item.lat], (status, result) => {
// 鑺傜偣鍧愭爣
- let position = new this.AMap.LngLat(item.lon, item.lat);
+ let position = new this.AMap.LngLat(item.lon, item.lat)
// 鑺傜偣鍦扮悊浣嶇疆
- item.province = result.regeocode.addressComponent.province;
+ item.province = result.regeocode.addressComponent.province
//淇℃伅妗哾om
let markerContent =
@@ -119,48 +111,48 @@
`<div class="nodeMarker" id="node${index}}">` +
'<img class="normal" src="/images/equipmentManagement/default.png">' +
'<img class="selected" src="/images/equipmentManagement/select.png">' +
- `<div class="box"> <div class="name">${item.devName}</div> <div class="property">IP鍦板潃: <span class="data">${item.devIp}</span> </div> <div class="property">璁惧浣嶇疆: <span class="data">${item.province}</span></div><div class="property">瀹夎鏃堕棿: <span class="data">${item.installTime}</span></div></div>`;
- ("</div>");
+ `<div class="box"> <div class="name">${item.devName}</div> <div class="property">IP鍦板潃: <span class="data">${item.devIp}</span> </div> <div class="property">璁惧浣嶇疆: <span class="data">${item.province}</span></div><div class="property">瀹夎鏃堕棿: <span class="data">${item.installTime}</span></div></div>`
+ ;("</div>")
let marker = new this.AMap.Marker({
position: position,
// 灏� html 浼犵粰 content
content: markerContent,
// 浠� icon 鐨� [center bottom] 涓哄師鐐�
- offset: new this.AMap.Pixel(-24, -24),
- });
+ offset: new this.AMap.Pixel(-24, -24)
+ })
//缁欒妭鐐规坊鍔犵殑鐩戝惉
marker.on("click", () => {
- this.activeNode = item;
- this.isShowCard = true;
- });
+ this.activeNode = item
+ this.isShowCard = true
+ })
- this.map.add(marker);
- this.myMaker = marker;
- });
- });
+ this.map.add(marker)
+ this.myMaker = marker
+ })
+ })
},
//鍏抽棴璁惧璇︽儏寮瑰眰
closeCard() {
- this.isShowCard = false;
+ this.isShowCard = false
},
//鍒囨崲鍏ㄥ睆鍦板浘
toggleZoom(status) {
//鑾峰彇褰撳墠鍦板浘绾у埆
- this.zoom = this.map.getZoom();
+ this.zoom = this.map.getZoom()
//鑾峰彇褰撳墠鍦板浘涓績浣嶇疆
- let data = this.map.getCenter();
- this.center = [data.lng, data.lat];
+ let data = this.map.getCenter()
+ this.center = [data.lng, data.lat]
if (status) {
- this.isFull = true;
+ this.isFull = true
} else {
- this.isFull = false;
+ this.isFull = false
}
- this.initMap(status);
- },
- },
-};
+ this.initMap(status)
+ }
+ }
+}
</script>
<style scoped lang="scss">
@@ -264,4 +256,4 @@
cursor: pointer;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0