黔西南大屏

packages/bigscreen/dv/AppQxnDv.vue

@@ -113,8 +113,25 @@
               </div>
             </div>
           </div>
-          <div class="wrapper">
+          <div class="wrapper" style="position: relative;">
             <DvMap style="width: 100%; height: 356px;"></DvMap>
+            <div class="total-info">
+              <div class="total-info__item">
+                <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon3.png">
+                <span>民警人数</span>
+                <i>214</i>
+              </div>
+              <div class="total-info__item">
+                <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon2.png">
+                <span>辅警人数</span>
+                <i>214</i>
+              </div>
+              <div class="total-info__item">
+                <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon1.png">
+                <span>其他</span>
+                <i>214</i>
+              </div>
+            </div>
           </div>
           <div class="right-middle__middle">
             <div class="wrapper">
@@ -214,6 +231,7 @@
 
     data ()  {
       return {
+        isShowInfo: false,
         value: '',
         lineData: [
           {
@@ -374,7 +392,7 @@
           xAxis: {
             type: "category",
             axisTick: {show: false},
-            axisLine: {show: false},
+            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
             axisLabel: {color: '#8FABBF', fontSize: 12},
           },
           yAxis: {
@@ -445,6 +463,8 @@
         barChart: {
           xAxis: {
             type: "category",
+            axisTick: {show: false},
+            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
             axisLabel: {color: '#8FABBF', fontSize: 12},
           },
           yAxis: {
@@ -531,6 +551,12 @@
             right: '6%',
             bottom: '6%'
           },
+          yAxis: {
+            axisLine: {show: false},
+          },
+          xAxis: {
+            axisLine: {show: false},
+          },
           color: ['#59F7CA', '#62F2F8', '#F2B949', '#81C4E4', '#D8F2FD'],
           series: [
             {
@@ -549,7 +575,7 @@
                 normal: {
                   textStyle: {
                     color: '#9BB7D4',
-                    fontSize: 16
+                    fontSize: 14
                   }
                 }
               }
@@ -611,6 +637,43 @@
       margin-bottom: 12px;
     }
 
+    .total-info {
+      display: flex;
+      position: absolute;
+      flex-direction: column;
+      right: 11px;
+      top: 26px;
+      z-index: 11;
+
+      .total-info__item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 11px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        img {
+          width: 22px;
+          height: 22px;
+        }
+
+        span {
+          width: 60px;
+          margin: 0 16px 0 6px;
+          color: #C6D6E6;
+          font-size: 14px;
+        }
+
+        i {
+          font-style: normal;
+          font-size: 16px;
+          color: #fff;
+        }
+      }
+    }
+
     .AppQxnDv-title {
       display: flex;
       position: relative;
@@ -763,7 +826,6 @@
 
         .right-left__middle {
           display: flex;
-
           .left {
             width: 245px;
             margin-right: 12px;

packages/bigscreen/dv/AppQxnEventDv.vue

@@ -536,8 +536,8 @@
           xAxis: {
             type: "category",
             axisTick: {show: false},
-            axisLine: {show: false},
+            axisLabel: {color: '#8FABBF', fontSize: 12},
-            axisLabel: {color: '#8FABBF', fontSize: 12}
+            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } }
           },
           grid: {
             left: '0%',

packages/bigscreen/dv/components/DvMap.vue

@@ -1,6 +1,47 @@
 <template>
   <div class="AiDvMap" v-resize="onDomResize">
     <div class="chart-map" :class="v" style="width: 100%; height: 100%"></div>
+    <transition name="fade">
+      <div class="info" v-if="isShowInfo">
+        <div class="info-mask"></div>
+        <div class="info-content">
+          <div class="info-title">
+            <h2>兴仁公安局</h2>
+          </div>
+          <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/close.png" @click="isShowInfo = false" />
+          <div class="info-wrapper">
+            <div class="info-wrapper__item">
+              <label>下属单位：</label>
+              <span>派出所</span>
+            </div>
+            <div class="info-wrapper__item">
+              <label>居民群：</label>
+              <span>派出所</span>
+            </div>
+            <div class="info-wrapper__item">
+              <label>成员人数：</label>
+              <span>派出所</span>
+            </div>
+            <div class="info-wrapper__item">
+              <label>群人数：</label>
+              <span>派出所</span>
+            </div>
+            <div class="info-wrapper__item">
+              <label>激活比例：</label>
+              <span>派出所</span>
+            </div>
+            <div class="info-wrapper__item">
+              <label>好友人数：</label>
+              <span>派出所</span>
+            </div>
+            <div class="info-wrapper__item">
+              <label>群主人数：</label>
+              <span>派出所</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -14,7 +55,8 @@ export default {
     return {
       timer: null,
       v: `AiDvMap-${new Date().getTime()}`,
-      chart: null
+      chart: null,
+      isShowInfo: false
     }
   },
   directives: {
@@ -230,6 +272,9 @@ export default {
             ]
           }
           this.chart.setOption(option)
+          this.chart.on('click', e => {
+            this.isShowInfo = true
+          })
         }
       })
     },
@@ -261,11 +306,97 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.AiDvMap {
+  .AiDvMap {
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  justify-content: center;
+    justify-content: center;
-  width: 100%;
+    width: 100%;
-  height: 100%;
+    height: 100%;
-}
+
+    .info {
+      position: fixed;
+      left: 0;
+      top: 0;
+      z-index: 111;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+
+      .info-mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        background: rgba($color: #000000, $alpha: 0);
+      }
+
+      .info-content {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 11;
+        width: 378px;
+        height: 254px;
+        padding: 15px 22px 0;
+        background: url(https://cdn.cunwuyun.cn/dvcp/dv/qxn/info-bg.png);
+        background-size: 100% 100%;
+        transform: translate(-50%, -50%);
+
+        .info-wrapper {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          margin-top: 40px;
+
+          .info-wrapper__item {
+            display: flex;
+            width: 50%;
+            margin-bottom: 20px;
+
+            label {
+              width: 70px;
+              margin-right: 20px;
+              color: #fff;
+              text-align: right;
+              font-size: 14px;
+              font-weight: 500;
+            }
+
+            span {
+              flex: 1;
+              font-size: 14px;
+              color: #FF8533;
+            }
+          }
+        }
+
+        img {
+          position: absolute;
+          top: 30px;
+          right: 18px;
+          z-index: 1;
+          width: 24px;
+          height: 24px;
+          cursor: pointer;
+          transition: all ease 300;
+
+          &:hover {
+            opacity: 0.6;
+          }
+        }
+
+        .info-title {
+          display: flex;
+          align-items: center;
+
+          h2 {
+            font-size: 16px;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
 </style>