黔西南大屏

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;