黔西南大屏

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() {
+  computed: {
-          const style = document.defaultView.getComputedStyle(el)
+    rate () {
-          if (width !== style.width || height !== style.height) {
+      if (!this.info['已激活']) {
-            binding.value({
+        return '0%'
-              width: style.width,
-              height: style.height
-            })
-          }
-          width = style.width
-          height = style.height
-        }
-
-        el.__vueSetInterval__ = setInterval(isReize, 300)
-      },
-
-      unbind(el) {
-        clearInterval(el.__vueSetInterval__)
       }
+
+      return (this.info['已激活'] / this.info['成员总数']).toFixed(2) * 100 + '%'
     }
   },
+
   mounted() {
     this.$nextTick(() => {
       this.initChart()
@@ -93,190 +84,196 @@ export default {
   },
 
   methods: {
-    onDomResize() {
+    initChart() {
-      this.$nextTick(() => {
+      this.chart = echarts.init(document.querySelector(`.${this.v}`))
-        this.chart.resize()
+      echarts.registerMap('黔西南', this.geoJSON)
+
+      let option = {
+        geo: [
+          {
+            map: "黔西南",
+            aspectScale: 1,
+            zoom: 0.65,
+            layoutCenter: ["50%", "50%"],
+            layoutSize: "180%",
+            show: true,
+            roam: false,
+            emphasis: {
+              show: true,
+              label: {
+                textStyle: {
+                  color: "#FFFFFF"
+                },
+              },
+              itemStyle: {
+                // areaColor: '#fff'
+              }
+            },
+            label: {
+              normal: {
+                show: true,
+                color: '#fff',
+                fontSize: '14'
+              }
+            },
+            itemStyle: {
+              normal: {
+                borderColor: "rgba(2, 254, 255, 0.7)",
+                borderWidth: 2,
+                shadowColor: "rgba(2, 254, 255, 0.1)",
+                shadowOffsetY: 10,
+                shadowBlur: 120,
+                areaColor: "#0f7295",
+              },
+            }
+          },
+          // 重影
+          {
+            type: "map",
+            map: "黔西南",
+            zlevel: -1,
+            aspectScale: 1,
+            zoom: 0.65,
+            layoutCenter: ["50%", "51%"],
+            layoutSize: "180%",
+            roam: false,
+            silent: true,
+            itemStyle: {
+              normal: {
+                borderWidth: 1,
+                // borderColor:"rgba(17, 149, 216,0.6)",
+                borderColor: "rgba(2, 254, 255, 0.3)",
+                shadowColor: "rgba(2, 254, 255, 0.3)",
+                shadowOffsetY: 5,
+                shadowBlur: 15,
+                areaColor: "rgba(5,21,35,0.1)",
+              },
+            },
+          },
+          {
+            type: "map",
+            map: "黔西南",
+            zlevel: -2,
+            aspectScale: 1,
+            zoom: 0.65,
+            layoutCenter: ["50%", "52%"],
+            layoutSize: "180%",
+            roam: false,
+            silent: true,
+            itemStyle: {
+              normal: {
+                borderWidth: 1,
+                // borderColor: "rgba(57, 132, 188,0.4)",
+                borderColor: "rgba(2, 254, 255, 0.2)",
+                shadowColor: "rgba(2, 254, 255, 0.24)",
+                shadowOffsetY: 5,
+                shadowBlur: 15,
+                areaColor: "transpercent",
+              },
+            },
+          },
+          {
+            type: "map",
+            map: "黔西南",
+            zlevel: -3,
+            aspectScale: 1,
+            zoom: 0.65,
+            layoutCenter: ["50%", "53%"],
+            layoutSize: "180%",
+            roam: false,
+            silent: true,
+            itemStyle: {
+              normal: {
+                borderWidth: 1,
+                // borderColor: "rgba(11, 43, 97,0.8)",
+                borderColor: "rgba(2, 254, 255, 0.1)",
+                shadowColor: "rgba(2, 254, 255, 0.1)",
+                shadowOffsetY: 15,
+                shadowBlur: 10,
+                areaColor: "transpercent",
+              },
+            },
+          }
+        ],
+        series: [
+          {
+            type: 'scatter',
+            map: "黔西南",
+            coordinateSystem: 'geo',
+            z: 3,
+            zlevel: 3,
+            // symbol: 'none',
+            symbolSize: 16,
+            rippleEffect: {
+              period: 2,
+              scale: 4,
+              brushType: 'fill'
+            },
+            label: {
+                show: false
+            },
+            roam: false,
+            itemStyle: {
+              normal: {
+                areaColor: '#000',
+                borderColor: '#a18a3a',
+                borderWidth: 1
+              },
+              emphasis: {
+                show: false,
+                areaColor: null
+              }
+            },
+            // label: {
+            //   show: true,
+            //   formatter: e => {
+            //     const name = e.data[3]
+            //     const value = e.data[2]
+            //     return `{a|${name}}\n{b|${value}}`
+            //   },
+            //   fontSize: 16,
+            //   rich: {
+            //     a: {
+            //       width: '100%',
+            //       color: '#fff',
+            //       lineHeight: 20,
+            //       fontSize: 16
+            //     },
+            //     b: {
+            //       backgroundColor: {
+            //         // image: require('@/assets/images/point.png')
+            //       },
+            //       color: '#fff',
+            //       height: 56,
+            //       align: 'center',
+            //       width: 50,
+            //       fontSize: 16
+            //     }
+            //   }
+            // },
+            data: []
+          }
+        ]
+      }
+      this.chart.setOption(option)
+      this.chart.on('click', e => {
+        this.getInfo(e.name)
       })
     },
 
-    initChart() {
+    getInfo (name) {
-      this.chart = echarts.init(document.querySelector(`.${this.v}`))
+      this.title = `${name}公安局`
-      // this.getData().then(res => {
+      this.instance.post(`/wxgridinfo/comprehensiveOverviewMap`, null, {
-      //   if (res.code === 0) {
+        params: {
-          echarts.registerMap('黔西南', this.geoJSON)
+          gridName: `${name}公安局`,
-
+          corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
-          let option = {
+        }
-            geo: [
+      }).then(res => {
-              {
+        if (res.code === 0) {
-                map: "黔西南",
+          this.info = res.data
-                aspectScale: 1,
+          this.isShowInfo = true
-                zoom: 0.65,
+        }
-                layoutCenter: ["50%", "50%"],
+      })
-                layoutSize: "180%",
-                show: true,
-                roam: false,
-                emphasis: {
-                  show: true,
-                  label: {
-                    textStyle: {
-                      color: "#FFFFFF"
-                    },
-                  },
-                  itemStyle: {
-                    // areaColor: '#fff'
-                  }
-                },
-                label: {
-                  normal: {
-                    show: true,
-                    color: '#fff',
-                    fontSize: '14'
-                  }
-                },
-                itemStyle: {
-                  normal: {
-                    borderColor: "rgba(2, 254, 255, 0.7)",
-                    borderWidth: 2,
-                    shadowColor: "rgba(2, 254, 255, 0.1)",
-                    shadowOffsetY: 10,
-                    shadowBlur: 120,
-                    areaColor: "#0f7295",
-                  },
-                }
-              },
-              // 重影
-              {
-                type: "map",
-                map: "黔西南",
-                zlevel: -1,
-                aspectScale: 1,
-                zoom: 0.65,
-                layoutCenter: ["50%", "51%"],
-                layoutSize: "180%",
-                roam: false,
-                silent: true,
-                itemStyle: {
-                  normal: {
-                    borderWidth: 1,
-                    // borderColor:"rgba(17, 149, 216,0.6)",
-                    borderColor: "rgba(2, 254, 255, 0.3)",
-                    shadowColor: "rgba(2, 254, 255, 0.3)",
-                    shadowOffsetY: 5,
-                    shadowBlur: 15,
-                    areaColor: "rgba(5,21,35,0.1)",
-                  },
-                },
-              },
-              {
-                type: "map",
-                map: "黔西南",
-                zlevel: -2,
-                aspectScale: 1,
-                zoom: 0.65,
-                layoutCenter: ["50%", "52%"],
-                layoutSize: "180%",
-                roam: false,
-                silent: true,
-                itemStyle: {
-                  normal: {
-                    borderWidth: 1,
-                    // borderColor: "rgba(57, 132, 188,0.4)",
-                    borderColor: "rgba(2, 254, 255, 0.2)",
-                    shadowColor: "rgba(2, 254, 255, 0.24)",
-                    shadowOffsetY: 5,
-                    shadowBlur: 15,
-                    areaColor: "transpercent",
-                  },
-                },
-              },
-              {
-                type: "map",
-                map: "黔西南",
-                zlevel: -3,
-                aspectScale: 1,
-                zoom: 0.65,
-                layoutCenter: ["50%", "53%"],
-                layoutSize: "180%",
-                roam: false,
-                silent: true,
-                itemStyle: {
-                  normal: {
-                    borderWidth: 1,
-                    // borderColor: "rgba(11, 43, 97,0.8)",
-                    borderColor: "rgba(2, 254, 255, 0.1)",
-                    shadowColor: "rgba(2, 254, 255, 0.1)",
-                    shadowOffsetY: 15,
-                    shadowBlur: 10,
-                    areaColor: "transpercent",
-                  },
-                },
-              }
-            ],
-            series: [
-              {
-                type: 'scatter',
-                map: "黔西南",
-                coordinateSystem: 'geo',
-                z: 3,
-                zlevel: 3,
-                // symbol: 'none',
-                symbolSize: 16,
-                rippleEffect: {
-                  period: 2,
-                  scale: 4,
-                  brushType: 'fill'
-                },
-                label: {
-                    show: false
-                },
-                roam: false,
-                itemStyle: {
-                  normal: {
-                    areaColor: '#000',
-                    borderColor: '#a18a3a',
-                    borderWidth: 1
-                  },
-                  emphasis: {
-                    show: false,
-                    areaColor: null
-                  }
-                },
-                // label: {
-                //   show: true,
-                //   formatter: e => {
-                //     const name = e.data[3]
-                //     const value = e.data[2]
-                //     return `{a|${name}}\n{b|${value}}`
-                //   },
-                //   fontSize: 16,
-                //   rich: {
-                //     a: {
-                //       width: '100%',
-                //       color: '#fff',
-                //       lineHeight: 20,
-                //       fontSize: 16
-                //     },
-                //     b: {
-                //       backgroundColor: {
-                //         // image: require('@/assets/images/point.png')
-                //       },
-                //       color: '#fff',
-                //       height: 56,
-                //       align: 'center',
-                //       width: 50,
-                //       fontSize: 16
-                //     }
-                //   }
-                // },
-                data: []
-              }
-            ]
-          }
-          this.chart.setOption(option)
-          this.chart.on('click', e => {
-            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, {
-
-      })
     }
   }
 }