From 1fe240406526b9b6256664559d3d2bec9250135c Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期五, 21 十月 2022 18:38:53 +0800
Subject: [PATCH] 设备管理小样
---
src/views/equipmentManagement/equipmentList/components/Content.vue | 260 +++++++++++++++++++++++++++-------------------------
1 files changed, 135 insertions(+), 125 deletions(-)
diff --git a/src/views/equipmentManagement/equipmentList/components/Content.vue b/src/views/equipmentManagement/equipmentList/components/Content.vue
index bb69fb1..ebc46aa 100644
--- a/src/views/equipmentManagement/equipmentList/components/Content.vue
+++ b/src/views/equipmentManagement/equipmentList/components/Content.vue
@@ -1,62 +1,57 @@
<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
- />
- <!-- 鏅�氬湴鍥� -->
- <div id="map" v-if="!isFull"></div>
+ <img class="zoomOut iconfont" src="/images/equipmentManagement/quit.png" @click="toggleZoom('')" v-show="false" />
+
+ <!-- 鏅�氬湴鍥� v-show="false" -->
+ <div class="map-box">
+ <div class="map-txt">璁惧鍦板浘</div>
+ <div id="map"></div>
+ </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 +64,8 @@
center: [116.06157, 39.66157], //鍦板浘涓績
activeNode: null, //閫変腑鐨勫湴鍥捐妭鐐�
geocoder: {},
- myMaker: null,
- };
+ myMaker: null
+ }
},
methods: {
@@ -79,39 +74,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,57 +114,57 @@
`<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">
.whiteContent {
position: relative;
box-sizing: border-box;
- padding: 20px;
+ // padding: 20px;
width: 1280px;
- background-color: #fff;
+ // background-color: #34405a;
margin: 0 auto;
.title {
@@ -177,68 +172,83 @@
font-weight: bold;
font-size: 16px;
}
+ .map-box {
+ background-color: #1f2a3e;
+ border-radius: 18px;
+ // width: 100%;
+ padding: 24px;
+ margin-bottom: 24px;
+ .map-txt {
+ font-family: PingFang SC Heavy;
+ font-size: 16px;
+ font-weight: normal;
+ line-height: 24px;
+ letter-spacing: 0px;
+ color: #ffffff;
+ margin-bottom: 16px;
+ }
+ #map,
+ #mapFull {
+ width: 1232px;
+ height: 496px;
+ border-radius: 8px;
- #map,
- #mapFull {
- width: 100%;
- height: 500px;
- border-radius: 8px;
-
- ::v-deep .nodeMarker {
- position: relative;
- .selected {
- display: none;
- }
-
- .box {
- box-sizing: border-box;
- display: none;
- position: absolute;
- padding: 20px 10px;
- top: 40px;
- left: -100px;
- width: 247px;
- height: 160px;
- background-color: rgba($color: #fff, $alpha: 0.8);
- filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
-
- .name {
- margin-bottom: 14px;
- font-weight: bold;
- font-size: 16px;
- }
-
- .property {
- margin-bottom: 12px;
- font-size: 14px;
- color: #999;
-
- span {
- margin-left: 5px;
- color: #3d3d3d;
- font-weight: 700;
- }
-
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
-
- &:hover {
- .normal {
+ ::v-deep .nodeMarker {
+ position: relative;
+ .selected {
display: none;
}
- .selected {
- position: relative;
- top: -16px;
- left: -16px;
- display: inline-block;
+ .box {
+ box-sizing: border-box;
+ display: none;
+ position: absolute;
+ padding: 20px 10px;
+ top: 40px;
+ left: -100px;
+ width: 247px;
+ height: 160px;
+ background-color: rgba($color: #fff, $alpha: 0.8);
+ filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
+
+ .name {
+ margin-bottom: 14px;
+ font-weight: bold;
+ font-size: 16px;
+ }
+
+ .property {
+ margin-bottom: 12px;
+ font-size: 14px;
+ color: #999;
+
+ span {
+ margin-left: 5px;
+ color: #3d3d3d;
+ font-weight: 700;
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
}
- .box {
- display: inline-block;
+ &:hover {
+ .normal {
+ display: none;
+ }
+
+ .selected {
+ position: relative;
+ top: -16px;
+ left: -16px;
+ display: inline-block;
+ }
+
+ .box {
+ display: inline-block;
+ }
}
}
}
@@ -250,8 +260,8 @@
.InfoCard {
position: absolute;
- top: 58px;
- right: 26px;
+ top: 68px;
+ right: 28px;
z-index: 2;
}
@@ -264,4 +274,4 @@
cursor: pointer;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0