Merge branch 'dev' of http://gogs.gzzzyd.com/xiaowenhua/vueDataV into dev

src/views/page2/cmap.vue

@@ -27,6 +27,7 @@ window.map = {}
 
 export default {
   components: {},
+  props: [`baseList`],
   data() {
     return {
       infoBoxData: undefined,
@@ -46,13 +47,14 @@ export default {
       let infoWindow
       // 在指定位置打开信息窗体
       function openInfo() {
-        const item = vm.infoBoxData
-        const { center } = item.properties
+        const data = vm.infoBoxData
+        const { center } = data.properties
+        const center2 = data.baseItem.area[0] || undefined
         infoWindow = new AMap.InfoWindow({
           content: vm.$refs.infoBox,
         })
 
-        infoWindow.open(map, center || map.getCenter())
+        infoWindow.open(window.map, center2 || window.map.getCenter())
       }
       window._AMapSecurityConfig = {
         securityJsCode: `a2017cdc059be6c03b430a3185098003`,
@@ -64,38 +66,51 @@ export default {
       })
         .then(async (AMap) => {
           function addPolygon(data) {
-            const path = data.geometry.coordinates
+            // const path = data.geometry.coordinates
+            const path = data.baseItem.area
+            console.log(
+              `datadata`,
+              path,
+              data.baseItem.area,
+              data.geometry.coordinates
+            )
             let polygon = new AMap.Polygon({
               path: path,
-              fillColor: `#ccebc5`,
-              strokeOpacity: 1,
-              fillOpacity: 0,
-              strokeColor: `#2b8cbe`,
-              strokeWeight: 4,
-              // strokeStyle: `dashed`,
-              strokeDasharray: [5, 5],
-              lineJoin: `round`,
-              lineCap: `round`,
+
+              strokeColor: `red`,
+              strokeWeight: 6,
+              strokeOpacity: 0.2,
+              fillOpacity: 0.4,
+              fillColor: `#00f`,
+              zIndex: 50,
+              bubble: true,
+              // fillColor: `#ccebc5`,
+              // strokeOpacity: 1,
+              // fillOpacity: 0,
+              // strokeColor: `#2b8cbe`,
+              // strokeWeight: 4,
+              // // strokeStyle: `dashed`,
+              // strokeDasharray: [5, 5],
+              // lineJoin: `round`,
+              // lineCap: `round`,
             })
             polygon.on(`mouseover`, (e) => {
-              // 如果缩放过大还变色, 万一人家是想看放大后的详细地点, 变色后反而不方便
-              if (window.map.getZoom() <= 11) {
-                vm.infoBoxData = data
-                openInfo()
-                polygon.setOptions({
-                  fillOpacity: 0.7,
-                  fillColor: `#7bccc4`,
-                })
-              }
+              console.log(`datadatadata`, data)
+              vm.infoBoxData = data
+              openInfo()
+              // polygon.setOptions({
+              //   fillOpacity: 0.7,
+              //   fillColor: `#7bccc4`,
+              // })
             })
             polygon.on(`click`, (e) => {
               console.log(`点击了`, data.properties)
             })
             polygon.on(`mouseout`, () => {
-              polygon.setOptions({
-                fillOpacity: 0,
-                fillColor: `#ccebc5`,
-              })
+              // polygon.setOptions({
+              //   fillOpacity: 0,
+              //   fillColor: `#ccebc5`,
+              // })
             })
             window.map.add(polygon)
           }
@@ -107,6 +122,7 @@ export default {
             viewMode: `3D`, // 是否为3D地图模式
             // zoom: 7, // 初始化地图级别
             zoom: 9.22, // 初始化地图级别
+            // zoom: 14, // 初始化地图级别
             // center: [107.943579, 30.131735], // 初始化地图中心点位置
             center: [108.597461, 28.047503], // 初始化地图中心点位置
             resizeEnable: true,
@@ -126,20 +142,20 @@ export default {
               //   zoom: 17,
               // }),
               // 天地图
-              // new AMap.TileLayer({
-              //   getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
-              //   zIndex: 20,
-              //   zoom: 17,
-              // }),
-              // new AMap.TileLayer({
-              //   getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
-              //   zIndex: 20,
-              //   zoom: 17,
-              // }),
+              new AMap.TileLayer({
+                getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
+                zIndex: 20,
+                zoom: 17,
+              }),
+              new AMap.TileLayer({
+                getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
+                zIndex: 20,
+                zoom: 17,
+              }),
             ],
             // zooms: [16, 20],
           })
-          window.map.setFeatures([`point`]) // 单一种类要素显示
+          window.map.setFitView()
           const baseList = await this.$http.get(`/api/base`)
           let list = mapOfTongren.features.map((item) => {
             const baseItem =

src/views/page2/index.vue

@@ -1,8 +1,11 @@
 <template>
   <div>
     <bgBox class="bgBox" bgType="g-bg2" :tabChange="tabChange" :tabIndex="1">
-      <leftBox class="lefBox animated fadeInLeft" />
-      <cmap />
+      <leftBox
+        class="lefBox animated fadeInLeft"
+        :listCb="(data) => (baseList = data)"
+      />
+      <cmap :baseList="baseList" />
       <HorizontalHistogram
         style="position: absolute; right: 50px; top: 115px; z-index: 10"
         v-if="isHorizontal"
@@ -54,6 +57,7 @@ export default {
   },
   data() {
     return {
+      baseList: [],
       max: 100,
       HorizontalArea: [],
       HorizontalArray: {

src/views/page2/leftBox.vue

@@ -25,6 +25,12 @@ import item from './item.vue'
 import boxTop from '@/components/boxTop/index.vue'
 
 export default {
+  props: {
+    listCb: {
+      type: Function,
+      default: () => [],
+    },
+  },
   data() {
     return {
       leftBox: {
@@ -54,6 +60,7 @@ export default {
           名称_like: this.leftBox.input || undefined,
         },
       })
+      this.$props.listCb(data)
       this.leftBox.list = []
       this.$nextTick(() => {
         this.leftBox.list = data

src/views/page3/index.vue

@@ -532,7 +532,7 @@ export default {
   }
   ::v-deep {
     .top {
-      display: none;
+      display: none !important;
     }
     *[aria-hidden='true'] {
       display: none;

src/views/page3/item.vue

@@ -1,10 +1,23 @@
 <template>
   <div class="list">
-    <div class="containerBox" v-for="(item, index) in list" :key="index">
+    <div
+      :class="[
+        `containerBox`,
+        {
+          online: item.状态 === `作业中`,
+        },
+      ]"
+      v-for="(item, index) in list"
+      :key="index"
+    >
       <div class="textBox">
         <p class="title">
           <span>{{ item.名称 }}</span>
-          <img :src="状态[item.状态]" alt="" />
+          <img
+            :src="状态[item.状态]"
+            :class="{ 'animated infinite flash s5': item.状态 === `故障` }"
+            alt=""
+          />
         </p>
         <p>设备IP：{{ item.ip || '' }}</p>
         <p>管理员：{{ item.管理人员 }}</p>
@@ -26,7 +39,12 @@ export default {
   name: `LayoutExample`,
   data() {
     return {
-      状态: { 故障, 关机, 运行中 },
+      状态: {
+        离线: 关机,
+        在线: 运行中,
+        作业中: 运行中,
+        故障,
+      },
     }
   },
   props: {
@@ -46,6 +64,14 @@ export default {
   height: 750px;
   overflow: auto;
   .containerBox {
+    &.online {
+      outline: 4px solid rgba(22, 248, 116, 0.5);
+      // border: 4px solid rgba(22, 248, 116, 0.5);
+      border-radius: 6px;
+    }
+    .s5 {
+      animation-duration: 4s;
+    }
     cursor: pointer;
     margin-bottom: 15px;
     display: flex;