Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev

front/src/views/home/mapTest/index.vue

@@ -1,67 +1,65 @@
 <template>
   <home-header></home-header>
-  <div class="survey-left">
+  <div class="survey-left" @click="hidePop()">
     <div ref="cityMap" class="city-map-content-echarts"></div>
-    <div class="mask">
-      <div class="box xha">
-        <div class="top">
-          <span>西海岸</span>
-          <span>
-            跳转至该站点
-            <i></i>
-          </span>
-        </div>
-        <div class="bottom">
-          <div class="item">
-            <span>基础设施</span>
-            <i></i>
-            <span>35282</span>
-          </div>
-          <div class="item">
-            <span>数据资源</span>
-            <i></i>
-            <span>11</span>
-          </div>
-          <div class="item">
-            <span>应用资源</span>
-            <i></i>
-            <span>23</span>
-          </div>
-          <div class="item">
-            <span>组件服务</span>
-            <i></i>
-            <span>8</span>
-          </div>
-        </div>
-        <div class="zx"></div>
+    <div class="box xha" v-show="xhaFlag">
+      <div class="top">
+        <span>西海岸</span>
+        <span>
+          跳转至该站点
+          <i></i>
+        </span>
       </div>
-      <div class="box lsq">
-        <div class="top">
-          <span>崂山区</span>
-          <span>
-            跳转至该站点
-            <i></i>
-          </span>
+      <div class="bottom">
+        <div class="item">
+          <span>基础设施</span>
+          <i></i>
+          <span>35282</span>
         </div>
-        <div class="bottom">
-          <div class="item">
-            <span>基础设施</span>
-            <i></i>
-            <span>13000</span>
-          </div>
-          <div class="item">
-            <span>数据资源</span>
-            <i></i>
-            <span>860</span>
-          </div>
-          <div class="item">
-            <span>应用资源</span>
-            <i></i>
-            <span>30</span>
-          </div>
+        <div class="item">
+          <span>数据资源</span>
+          <i></i>
+          <span>11</span>
+        </div>
+        <div class="item">
+          <span>应用资源</span>
+          <i></i>
+          <span>23</span>
+        </div>
+        <div class="item">
+          <span>组件服务</span>
+          <i></i>
+          <span>8</span>
         </div>
-        <div class="zx"></div>
       </div>
+      <div class="zx"></div>
+    </div>
+    <div class="box lsq" v-show="lsqFlag">
+      <div class="top">
+        <span>崂山区</span>
+        <span>
+          跳转至该站点
+          <i></i>
+        </span>
+      </div>
+      <div class="bottom">
+        <div class="item">
+          <span>基础设施</span>
+          <i></i>
+          <span>13000</span>
+        </div>
+        <div class="item">
+          <span>数据资源</span>
+          <i></i>
+          <span>860</span>
+        </div>
+        <div class="item">
+          <span>应用资源</span>
+          <i></i>
+          <span>30</span>
+        </div>
+      </div>
+      <div class="zx"></div>
     </div>
   </div>
   <ability-to-recommend-bottom></ability-to-recommend-bottom>
@@ -73,6 +71,8 @@
   import geoJson from '/public/static/echartsMapJson/qingdao.json'
   // const loadedDataUrl = '/public/static/echartsMapJson/qingdao.json'
   const echarts = require('echarts')
+  const xhaFlag = ref(false)
+  const lsqFlag = ref(false)
   const areaMenuList = ref([
     // 全市概况
     // {
@@ -180,14 +180,6 @@
     const imgActive = new Image()
     imgActive.src = '/src/assets/home/map-piece-active.png'
     option = {
-      // visualMap: {
-      //   show: false,
-      //   max: 100,
-      //   seriesIndex: 1,
-      //   inRange: {
-      //     color: ['#000000', 'yellow', 'pink'],
-      //   },
-      // },
       visualMap: {
         //图例值控制
         min: 0,
@@ -238,6 +230,7 @@
             },
           ],
           z: 2,
+          silent: true,
         },
       ],
       series: [
@@ -598,6 +591,11 @@
     console.log('echarts配置==================>', option)
     myChart.setOption(option)
   }
+  const hidePop = () => {
+    console.log('取消弹窗')
+    xhaFlag.value = false
+    lsqFlag.value = false
+  }
   onMounted(() => {
     initMap()
     myChart.on('mouseover', function () {
@@ -605,6 +603,22 @@
         type: 'downplay',
       })
     })
+    myChart.on('click', function (params) {
+      console.log(params)
+      params.event.event.stopPropagation()
+      switch (params.name) {
+        case '西海岸':
+          xhaFlag.value = !xhaFlag.value
+          lsqFlag.value = false
+          break
+        case '崂山区':
+          lsqFlag.value = !lsqFlag.value
+          xhaFlag.value = false
+          break
+        default:
+          break
+      }
+    })
   })
 </script>
 <style lang="less" scoped>
@@ -622,95 +636,89 @@
       height: 7rem;
       margin: 0rem auto;
     }
-    .mask {
+
+    .box {
       position: absolute;
-      z-index: 1000;
-      width: 19.2rem;
-      height: 7rem;
-      margin: 0rem auto;
-      .box {
-        position: absolute;
-        width: 3.18rem;
-        height: 1.36rem;
-        padding: 0.1rem 0.35rem 0;
-        background: url('~@/assets/home/box_bg.png') no-repeat;
-        background-size: 100%;
-        .top {
+      width: 3.18rem;
+      height: 1.36rem;
+      padding: 0.1rem 0.35rem 0;
+      background: url('~@/assets/home/box_bg.png') no-repeat;
+      background-size: 100%;
+      .top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid rgba(161, 160, 161, 0.637);
+        span:nth-of-type(1) {
+          font-size: 0.18rem;
+        }
+        span:nth-of-type(2) {
+          cursor: pointer;
+          i {
+            display: inline-block;
+            width: 0.1rem;
+            height: 0.1rem;
+            background: url('~@/assets/home/tz.png') no-repeat;
+            background-size: 100%;
+          }
+        }
+      }
+      .bottom {
+        display: flex;
+        justify-content: space-around;
+        margin-top: 0.1rem;
+        .item {
           display: flex;
-          justify-content: space-between;
+          flex-direction: column;
+          justify-content: center;
           align-items: center;
-          border-bottom: 1px solid rgba(161, 160, 161, 0.637);
-          span:nth-of-type(1) {
-            font-size: 0.18rem;
-          }
-          span:nth-of-type(2) {
-            cursor: pointer;
-            i {
-              display: inline-block;
-              width: 0.1rem;
-              height: 0.1rem;
-              background: url('~@/assets/home/tz.png') no-repeat;
-              background-size: 100%;
-            }
+          i {
+            display: inline-block;
+            width: 0.18rem;
+            height: 0.18rem;
+            margin: 0.02rem 0;
           }
         }
-        .bottom {
-          display: flex;
-          justify-content: space-around;
-          margin-top: 0.1rem;
-          .item {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            i {
-              display: inline-block;
-              width: 0.18rem;
-              height: 0.18rem;
-              margin: 0.02rem 0;
-            }
-          }
-          .item:nth-of-type(1) > i {
-            background: url('~@/assets/home/map_jcss.png') no-repeat center;
-            background-size: contain;
-          }
-          .item:nth-of-type(2) > i {
-            background: url('~@/assets/home/map_sjzy.png') no-repeat center;
-            background-size: contain;
-          }
-          .item:nth-of-type(3) > i {
-            background: url('~@/assets/home/map_yyzy.png') no-repeat center;
-            background-size: contain;
-          }
-          .item:nth-of-type(4) > i {
-            background: url('~@/assets/home/map_zjfw.png') no-repeat center;
-            background-size: contain;
-          }
+        .item:nth-of-type(1) > i {
+          background: url('~@/assets/home/map_jcss.png') no-repeat center;
+          background-size: contain;
         }
-        .zx {
-          width: 1.5rem;
-          height: 0.66rem;
-          background: url('~@/assets/home/zx.png') no-repeat;
-          background-size: 100%;
-          position: relative;
-          top: -0.9rem;
-          left: -1.84rem;
+        .item:nth-of-type(2) > i {
+          background: url('~@/assets/home/map_sjzy.png') no-repeat center;
+          background-size: contain;
+        }
+        .item:nth-of-type(3) > i {
+          background: url('~@/assets/home/map_yyzy.png') no-repeat center;
+          background-size: contain;
+        }
+        .item:nth-of-type(4) > i {
+          background: url('~@/assets/home/map_zjfw.png') no-repeat center;
+          background-size: contain;
         }
       }
-      .xha {
-        top: 5.45rem;
-        left: 3.5rem;
-        background: url('~@/assets/home/box_bg2.png') no-repeat;
-        .zx {
-          background: url('~@/assets/home/zx2.png') no-repeat;
-          top: -0.9rem;
-          left: 2.82rem;
-        }
+      .zx {
+        width: 1.5rem;
+        height: 0.66rem;
+        background: url('~@/assets/home/zx.png') no-repeat;
+        background-size: 100%;
+        position: relative;
+        top: -0.9rem;
+        left: -1.84rem;
       }
-      .lsq {
-        top: 3.7rem;
-        left: 11.95rem;
+    }
+    .xha {
+      top: 5.45rem;
+      left: 3.5rem;
+      background: url('~@/assets/home/box_bg2.png') no-repeat;
+      .zx {
+        background: url('~@/assets/home/zx2.png') no-repeat;
+        top: -0.9rem;
+        left: 2.82rem;
       }
     }
+    .lsq {
+      top: 3.7rem;
+      left: 11.95rem;
+    }
   }
 </style>