黔西南大屏

packages/bigscreen/dv/AppQxnDv.vue

@@ -122,7 +122,7 @@
             </div>
           </div>
           <div class="wrapper" style="position: relative;">
-            <DvMap style="width: 100%; height: 376px;"></DvMap>
+            <DvMap :instance="instance" style="width: 100%; height: 376px;"></DvMap>
             <div class="total-info">
               <div class="total-info__item">
                 <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon3.png">
@@ -623,7 +623,7 @@
     methods: {
       init (gridId) {
         this.gridId = ''
-        this.gridParentId = gridId
+        this.gridParentId = gridId || 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A'
         this.instance.post(`/wxgridinfo/tree`, null, {
           params: {
             gridParentId: gridId || '',
@@ -638,6 +638,12 @@
             }
           }
         })
+
+        this.getInfo()
+      },
+
+      getInfo () {
+
       },
 
       Hex2RGBA(color, alpha = 1) {
@@ -944,6 +950,7 @@
           padding: 30px 14px 14px;
           background-image: linear-gradient(0deg, rgba(40, 182, 253, 0.08) 1%, rgba(0, 102, 154, 0.2) 100%);
           border-radius: 6px;
+          box-shadow: inset 0 -1px 0 0 transparent;
           transition: all ease 0.3s;
 
           &:hover {

packages/bigscreen/dv/components/DvMap.vue

@@ -6,37 +6,37 @@
         <div class="info-mask"></div>
         <div class="info-content">
           <div class="info-title">
-            <h2>兴仁公安局</h2>
+            <h2>{{ title }}</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>
+              <span>{{ info['派出所数量'] }}</span>
             </div>
             <div class="info-wrapper__item">
               <label>居民群：</label>
-              <span>派出所</span>
+              <span>{{ info['群数量'] }}</span>
             </div>
             <div class="info-wrapper__item">
               <label>成员人数：</label>
-              <span>派出所</span>
+              <span>{{ info['成员总数'] }}</span>
             </div>
             <div class="info-wrapper__item">
               <label>群人数：</label>
-              <span>派出所</span>
+              <span>{{ info['群成员数量'] }}</span>
             </div>
             <div class="info-wrapper__item">
               <label>激活比例：</label>
-              <span>派出所</span>
+              <span>{{ rate }}</span>
             </div>
             <div class="info-wrapper__item">
               <label>好友人数：</label>
-              <span>派出所</span>
+              <span>{{ info['派出所数量'] }}</span>
             </div>
             <div class="info-wrapper__item">
               <label>群主人数：</label>
-              <span>派出所</span>
+              <span>{{ info['群主人数'] }}</span>
             </div>
           </div>
         </div>
@@ -47,45 +47,36 @@
 
 <script>
 import * as echarts from 'echarts'
-import http from "dui/lib/js/request";
 
 export default {
   name: 'AiDvMap',
+
+  props: {
+    instance: Function
+  },
+
   data() {
     return {
+      info: {},
       timer: null,
+      title: '',
       v: `AiDvMap-${new Date().getTime()}`,
       chart: null,
       isShowInfo: false,
       geoJSON: require('./geoJSon/qxnGeoJSON.json')
     }
   },
-  directives: {
-    resize: {
-      bind(el, binding) {
-        let width = ''
-        let height = ''
 
-        function isReize() {
-          const style = document.defaultView.getComputedStyle(el)
-          if (width !== style.width || height !== style.height) {
-            binding.value({
-              width: style.width,
-              height: style.height
-            })
-          }
-          width = style.width
-          height = style.height
+  computed: {
+    rate () {
+      if (!this.info['已激活']) {
+        return '0%'
       }
 
-        el.__vueSetInterval__ = setInterval(isReize, 300)
+      return (this.info['已激活'] / this.info['成员总数']).toFixed(2) * 100 + '%'
+    }
   },
 
-      unbind(el) {
-        clearInterval(el.__vueSetInterval__)
-      }
-    }
-  },
   mounted() {
     this.$nextTick(() => {
       this.initChart()
@@ -93,16 +84,8 @@ export default {
   },
 
   methods: {
-    onDomResize() {
-      this.$nextTick(() => {
-        this.chart.resize()
-      })
-    },
-
     initChart() {
       this.chart = echarts.init(document.querySelector(`.${this.v}`))
-      // this.getData().then(res => {
-      //   if (res.code === 0) {
       echarts.registerMap('黔西南', this.geoJSON)
 
       let option = {
@@ -274,9 +257,23 @@ export default {
       }
       this.chart.setOption(option)
       this.chart.on('click', e => {
-            this.isShowInfo = true
+        this.getInfo(e.name)
+      })
+    },
+
+    getInfo (name) {
+      this.title = `${name}公安局`
+      this.instance.post(`/wxgridinfo/comprehensiveOverviewMap`, null, {
+        params: {
+          gridName: `${name}公安局`,
+          corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.info = res.data
+          this.isShowInfo = true
+        }
       })
-      // })
     },
 
     convertData(data) {
@@ -296,12 +293,6 @@ export default {
         lng: z * Math.cos(theta) + 0.0065,
         lat: z * Math.sin(theta) + 0.006
       }
-    },
-
-    getData() {
-      return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(`https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=522300_full`)}`, null, {
-
-      })
     }
   }
 }