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