地图样式暂存

device-manager-ui/admin/src/components/Map.vue

@@ -8,12 +8,14 @@
       :amap-manager="amapManager"
       :center="center"
       :zoom="zoom"
-      :plugin="plugin"
       :events="events"
       class="amap-demo"
     >
+      <!-- :plugin="plugin" -->
       <div class="tuli"><slot name="leftTop"></slot></div>
-
+      <div class="rightlist" >
+        <slot name="rightList"></slot>
+      </div>
       <!-- <el-amap-search-box :on-search-result="onSearchResult" :events='searchEvents'/> -->
 
       <!--marker  -->
@@ -26,6 +28,12 @@
         :contentRender="contentRender"
         :extData="marker"
       >
+       <div class="marker-using-slot" style="positon:relative">
+          <img style="width:36px;height:50px" src="../assets/images/red.png" />
+          <div style="color:#ffffff;position: absolute;top: 8px;left: 50%;
+          transform: translate(-50%);" v-if="marker.extData.chang">
+          {{marker.extData.chang}}</div>
+       </div>
       </el-amap-marker>
 
       <!--信息窗体-->
@@ -139,12 +147,12 @@ export default {
     },
   },
   created() {
-    this.refresh(this.markersData);
+    // this.refresh(this.markersData);
   },
   methods: {
     formatterDate,
     contentRender(h, params) {
-      return <img src={require("../assets/images/d.png")} />;
+      return <img style="width:36px;height:50px" src={require("../assets/images/red.png")} />;
     },
     getDeviceDetial() {
       this.$emit("choose", this.info, (val) => {
@@ -152,29 +160,52 @@ export default {
       });
     },
     refresh(data) {
-      // console.log("刷新数据", data);
+      console.log("刷新数据", data);
       this.markersData = data;
-      this.markersData.map((item) => {
-        this.setMarker(item);
+      this.markersData.map((item,index) => {
+        this.setMarker(item,index);
+      });
+    },
+    // 刷新第一层数据
+    refreshOne(data){
+      this.markersData = data;
+      this.markersData.map((item,index) => {
+        this.setMarkerOne(item,index);
       });
     },
-
     relocate(center) {
       this.center = [center.lng, center.lat];
       this.zoom = 10;
       //重新定位中心点
     },
-
-    setMarker(item) {
+    setMarkerOne(item,index){
       if (!item.lng && !item.lat) return;
       let markerLabel = {
-        label: { content: item.siteName, offset: [20, 38] },
+        // label: { content: item.siteName, offset: [20, 38] },
+        label: {offset: [10, 10]},
         position: [item.lng, item.lat],
-        //icon: require("@/assets/images/marker-blue.png"),
         extData: item,
         events: {
           click: (e) => {
-            // console.log("getExtData", e.target.getExtData());
+            this.refresh(this.markersData)
+            // 还要放大，还要变成选中第一个站点的位置
+            this.relocate(e.lnglat)
+          },
+        },
+      };
+      this.markers.push(markerLabel);
+    },
+    setMarker(item,index) {
+      if (!item.lng && !item.lat) return;
+      let markerLabel = {
+        // label: { content: item.siteName, offset: [20, 38] },
+        label: {offset: [10, 10]},
+        position: [item.lng, item.lat],
+        extData: item,
+        events: {
+          click: (e) => {
+            this.relocate(e.lnglat)
+            console.log("getExtData", e.target.getExtData());
             let exData = e.target.getExtData();
             this.info = exData.extData;
             this.window.position = exData.position;
@@ -235,70 +266,8 @@ export default {
       zoom: 6,
       center: [104.007767, 30.568308],
       marker: {},
-      //   events: {
-      //     init: (e) => {
-      //       this.geocoder = new AMap.Geocoder();
-      //       console.log("markersData", this.markersData);
-      //       // this.markersData.map((item) => {
-      //       //   this.setMarker(item.lng, item.lat, item.address);
-      //       // });
-      //     },
-      //     click: (e) => {
-      //       console.log(e);
-      //       self.window.position = [e.lnglat.lng, e.lnglat.lat];
-
-      //       self.window.content=` <el-card :body-style="{ padding: '0px' }">
-      //   <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
-      //   <div style="padding: 14px;">
-      //     <span>好吃的汉堡</span>
-      //     <div class="bottom clearfix">
-      //       <time class="time">{{ currentDate }}</time>
-      //       <el-button type="text" class="button">操作按钮</el-button>
-      //     </div>
-      //   </div>
-      // </el-card>`
-
-      //       console.log(self.window)
-
-      //       self.$nextTick(() => {
-      //         self.window.visible = true; //点击点坐标，出现信息窗体
-      //       });
-
-      //       //更新窗体数据，
-
-      //       // that.windows.forEach((window) => {
-      //       //   window.visible = false; //关闭窗体
-      //       // });
-      //       // that.window = that.windows[index];
-      //       // that.$nextTick(() => {
-      //       //   that.window.visible = true; //点击点坐标，出现信息窗体
-      //       // });
-
-      //       alert(e.target.getExtData());
-      //       // this.visiblepop = true;
-      //       // let resp=this.$emit("choose", e.target.getExtData().siteId);
-
-      //       //console.log("resp",resp)
-      //       // const { lat, lng } = e.lnglat;
-      //       // this.geocoder.getAddress([lng, lat], (status, result) => {
-      //       //   if (status === "complete" && result.info === "OK") {
-      //       //     const address = result.regeocode.formattedAddress;
-      //       //     this.setMarker(lng, lat, address);
-      //       //     this.center = [lng, lat];
-      //       //   }
-      //       // });
-      //     },
-      //  },
       // 一些工具插件
       plugin: [
-        // {
-        //   pName: "Geocoder",
-        //   events: {
-        //     init(o) {
-        //       //console.log("一些工具插件--地址"+o.getAddress())
-        //     },
-        //   },
-        // },
         {
           // 定位
           pName: "Geolocation",
@@ -325,24 +294,6 @@ export default {
           // 单位按钮
           showButton: false,
         },
-        // {
-        //   // 工具栏
-        //   pName: "ToolBar",
-        //   events: {
-        //     init(instance) {
-        //       //console.log("工具栏:"+instance);
-        //     },
-        //   },
-        // },
-        // {
-        //   // 鹰眼
-        //   pName: "OverView",
-        //   events: {
-        //     init(instance) {
-        //       //console.log("鹰眼:"+instance);
-        //     },
-        //   },
-        // },
         {
           // 地图类型
           pName: "MapType",
@@ -369,6 +320,14 @@ export default {
 </script>
 
 <style  lang="less">
+.rightlist{
+  width: 320px;
+  top: 20px;
+  right: 34px;
+  position: absolute;
+  float: left;
+  background-color: rgba(255, 255, 255, 0.7);
+}
 .tuli {
   width: 300px;
   top: 20px;

device-manager-ui/admin/src/views/sitestat/maplist.vue

@@ -27,8 +27,44 @@
             >
             </el-tree>
           </el-scrollbar>
-        </el-card> </el-row
-    ></Map>
+        </el-card> 
+      </el-row>
+
+      <el-row :gutter="20" slot="rightList" class="mytree">
+        <el-card>
+          <div>
+            <span><b class="cardTitle">部署列表</b></span>
+            <div class="deployall">
+              <div class="statistics">
+                <div class="sbzs item">
+                  <div>1</div>
+                  <div class="wz">设备总数(台)</div>
+                </div>
+                <div class="zx item">
+                  <div>0</div>
+                  <div class="wz">在线(台)</div>
+                </div>
+                <div class="lx item">
+                  <div>1</div>
+                  <div class="wz">离线(台)</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="deploylist">
+            <div v-for="i in 10" :key="i" class="deployitem">
+              <div class="title">绵阳市政府服务中心</div>
+              <div class="are">绵阳市政府服务中心绵阳市政府服务中心绵阳市政府服务中心绵阳市政府服务中心</div>
+              <div class="data">
+                <div class="sbzs dataitem">设备总数：<span>111台</span></div>
+                <div class="zx dataitem">在线：<span>111台</span></div>
+                <div class="lx dataitem">离线：<span>111台</span></div>
+              </div>
+            </div>
+          </div>
+        </el-card> 
+      </el-row>
+    </Map>
     <dialog-show ref="dialogform" @ok="getData" />
   </div>
 </template>
@@ -50,11 +86,18 @@ export default {
     this.pageInfo.list = "/sitestat/list";
     this.$get("/sitestat/maplist", {}).then(({ data }) => {
       this.originData = data;
-      this.$refs.map.refresh(this.originData);
+      // this.$refs.map.refresh(this.originData);
     });
 
     this.$get("/sitestat/siteTree", {}).then(({ data }) => {
       this.areaData = data.siteTree;
+      this.areaData.map(item=>{
+        item.lng = item.longitude
+        item.lat = item.latitude
+        item.chang = item.children.length+1
+      })
+      console.log(this.areaData);
+      this.$refs.map.refreshOne(this.areaData);
     });
   },
   methods: {
@@ -202,6 +245,94 @@ export default {
 </style>
 
 <style lang="scss" scoped>
+.deploylist::-webkit-scrollbar{
+  width: 0;
+}
+.deploylist{
+  padding: 0 4px;
+  max-height: 550px;
+  overflow: auto;
+  .deployitem{
+    padding: 10px 0;
+    color: #223333;
+    border-bottom: 1px solid gainsboro;
+    .data{
+      display: flex;
+      font-size: 12px;
+      font-weight: 500;
+      color: #999999;
+      margin:4px 0 ;
+      .dataitem{
+        margin-right: 16px;
+      }
+      .sbzs>span{
+        color: #223333;
+      }
+      .zx>span{
+        color: #0064e9;
+      }
+      .zx{
+        position: relative;
+      }
+      .zx::before{
+        content: '';
+        position: absolute;
+        width:4px;
+        height: 4px;
+        background: #0064e9;
+        border-radius: 50%;
+        top:6px;
+        left: -6px;
+      }
+      .lx>span{
+        color: #fa4d4c;
+      }
+    }
+    .title{
+      font-size: 14px;
+      font-weight: 600;
+      padding: 4px 0;
+    }
+    .are{
+      font-size: 12px;
+    }
+  }
+}
+.deployall{
+  margin-top: 20px;
+  .statistics{
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #ededed;
+    padding-bottom: 10px;
+    font-size: 8px;
+    .item{
+      width: 120px;
+      height: 60px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      color: #fff;
+      padding-bottom: 6px;
+      .wz{
+        margin-left: 14px;
+      }
+    }
+    .sbzs{
+      background: url("../../assets/images/sbzs.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    .zx{
+      background: url("../../assets/images/zx.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    .lx{
+      background: url("../../assets/images/lx.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
 .cardTitle {
   font-size: 16px;
   color: rgb(20, 134, 248);

device-manager-ui/admin/yarn.lock

@@ -1295,6 +1295,11 @@
   resolved "https://registry.nlark.com/@soda/get-current-script/download/@soda/get-current-script-1.0.2.tgz"
   integrity sha1-pTUV2yXYA4N0OBtzryC7Ty5QjYc=
 
+"@tweenjs/tween.js@^18.6.4":
+  version "18.6.4"
+  resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-18.6.4.tgz#40a3d0a93647124872dec8e0fd1bd5926695b6ca"
+  integrity sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ==
+
 "@types/glob@^7.1.1":
   version "7.1.4"
   resolved "https://registry.nlark.com/@types/glob/download/@types/glob-7.1.4.tgz"
@@ -9076,10 +9081,15 @@ thread-loader@^2.1.3:
     loader-utils "^1.1.0"
     neo-async "^2.6.0"
 
-three@^0.152.2:
-  version "0.152.2"
-  resolved "https://registry.npmmirror.com/three/-/three-0.152.2.tgz#2ee0f2c504d31a4bc29b45495c12bded9fda7bfc"
-  integrity sha512-Ff9zIpSfkkqcBcpdiFo2f35vA9ZucO+N8TNacJOqaEE6DrB0eufItVMib8bK8Pcju/ZNT6a7blE1GhTpkdsILw==
+three-css2drender@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/three-css2drender/-/three-css2drender-1.0.0.tgz#2065e64c9d117033c08bfdc957a78edfe4b6ed1b"
+  integrity sha512-redDCSBDvgxiJIm6EDT8WO5WJTVg5gUEy/vjtAgJa/zX4peEUnZ8K+mXo6v94EudbnuI5h48/hQo9NExf04ENg==
+
+three@^0.149.0:
+  version "0.149.0"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.149.0.tgz#a9cf78b17d02f063ffe6dfca1e300eff2eab2927"
+  integrity sha512-tohpUxPDht0qExRLDTM8sjRLc5d9STURNrdnK3w9A+V4pxaTBfKWWT/IqtiLfg23Vfc3Z+ImNfvRw1/0CtxrkQ==
 
 throttle-debounce@^1.0.1:
   version "1.1.0"