manage-client 3.1.26 → 3.1.27

package/src/components/daping/WuHaiMap.vue

@@ -0,0 +1,418 @@
+<template>
+    <div style="height: 55%">
+      <div :id="idname"></div>
+    </div>
+</template>
+
+<script>
+  import {HttpResetClass} from "vue-client";
+  import whmap from "../../../static/wuhai.json";
+
+  export default {
+    name: 'echart-map',
+    props: {
+      mode: String,
+      idname: String
+    },
+    data () {
+      return {
+        mapdata: [
+          {name: 'wuhai', value: whmap}
+        ],
+        list: [],
+        xc: '',
+        timer: '',
+        datas: [],
+        maps:[]
+      }
+    },
+
+    mounted () {
+      this.drawChinaMap()
+    },
+    methods: {
+      drawChinaMap (mapjson) {
+        var chart = this.$echarts.init(document.getElementById(this.idname))
+        this.xc = chart
+        var scale = this.$parent.$parent.$parent.scale
+        var geoCoordMap = {}
+        this.$echarts.registerMap(mapjson.name, mapjson.value)
+        chart.showLoading()
+        var mapFeatures = this.$echarts.getMap(mapjson.name).geoJson.features
+        chart.hideLoading()
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.cp
+
+        })
+        var convertData = function (data) {
+          var res = []
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name]
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value)
+              })
+            }
+          }
+          return res
+        }
+        var colormode = ''
+        if (this.mode == '0') {
+          colormode = '#e7c83c'
+        }
+        if (this.mode == '1') {
+          colormode = '#66f2de'
+        }
+        let data = this.datas
+        console.log('*/*/*/*/*/*/*/**/*/*/*****/*', data)
+        //   [
+        //
+        //   {
+        //     name: '海南区',
+        //     value: datas2.value,
+        //     minyong: datas2.minyong,
+        //     feiminyong: datas2.feiminyong
+        //   },
+        //   {
+        //     name: '海勃湾区',
+        //     value: datas1.value,
+        //     minyong: datas1.minyong,
+        //     feiminyong: datas1.feiminyong
+        //   },
+        //   {
+        //     name: '乌达区',
+        //     value: datas3.value,
+        //     minyong: datas3.minyong,
+        //     feiminyong: datas3.feiminyong
+        //   }
+        // ]
+        let col = ['#2a4096', '#1285de', '#27459b', '#284ba5', '#225bb2', '#2353a8', '#244ca3', '#1775cd', '#1e64bc', '#05a0fc', '#108de7', '#1b6dc3']
+        let colors = []
+        for (let i = 0; i < data.length; i++) {
+          let jo = {
+            name: data[i].name,
+            itemStyle: {
+              areaColor: col[i],
+              // color: '#02363f'
+              color: col[i]
+            }
+          }
+          colors.push(jo)
+        }
+        let option = {
+          title: {
+            text: '',
+            subtext: '',
+            x: 'center'
+          },
+          tooltip: {
+            show: true,
+            alwaysShowContent: false,
+            backgroundColor: 'rgba(2, 59, 63, 0.7)',
+            borderColor: 'rgba(98, 194, 186, 0.45)',
+            borderWidth: 1,
+            padding: 10 * scale,
+            textStyle: {
+              fontSize: 18 * scale
+            },
+            hideDelay: 100 * scale,
+            triggerOn: 'mousemove',
+            enterable: true,
+            position: function (point, params, dom, rect, size) {
+              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
+              let x = point[0] //
+              let y = point[1]
+              let viewWidth = size.viewSize[0]
+              let viewHeight = size.viewSize[1]
+              let boxWidth = size.contentSize[0]
+              let boxHeight = size.contentSize[1]
+              let posX = 0 //x坐标位置
+              let posY = 0 //y坐标位置
+
+              if (x < boxWidth) { //左边放不开
+                posX = 5
+              } else { //左边放的下
+                posX = x - boxWidth
+              }
+
+              if (y < boxHeight) { //上边放不开
+                posY = 5
+              } else { //上边放得下
+                posY = y - boxHeight
+              }
+
+              return [posX - 10, posY - 10]
+
+            },
+            extraCssText: 'width: auto;height:auto;',
+            formatter: function (params, ticket, callback) {
+              return '<div style=\'text-align: center;height: 1px;margin-bottom: 5px;color:#14ffff;font-weight: normal\'>' + data[params.dataIndex].name + '</div><br/><span>'
+                + '<span style="font-weight: normal">总用户 &nbsp;&nbsp;</span><span style="color:#e1e52a;font-weight: bolder">' + data[params.dataIndex].value + '</span><br/>'
+                + '<span style="font-weight: normal">民用 &nbsp;&nbsp;</span><span style="color:#e1e52a;font-weight: bolder">' + data[params.dataIndex].minyong + '</span><br/>'
+                + '<span style="font-weight: normal">非民用&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;</span><span style="color:#e1e52a; font-weight: bolder">' + data[params.dataIndex].feiminyong + '</span>'
+            }
+          },
+          dataRange: {
+            min: 0,
+            max: 2500,
+            left: 'left',
+            top: 'bottom',
+            text: ['高', '低'],
+            calculable: true,
+            show: false
+            // inRange: {
+            //   color: [
+            //     // "#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"
+            //     // "#ff002d"
+            //     // "#ffc188",
+            //     // "#479fd2",
+            //     // "#fba853",
+            //     // "#48c7c0",
+            //     // "#fa8737",
+            //     // "#4bbdd6",
+            //     // "#ff6f5b",
+            //     // "#F4D5B1",
+            //     // "#ADE1E3",
+            //     // "#F4B387",
+            //     // "#F0F3F4"
+            //   ]
+            // }
+          },
+
+          series: [
+            {
+              type: 'effectScatter',
+              coordinateSystem: 'geo',
+              data: this.maps,
+              //   [
+              //   {"name": "海勃湾区","value": [106.817762, 39.673527]},
+              //   {"name": "海南区","value": [106.884789, 39.44153]},
+              //   {"name": "乌达区","value": [106.722711, 39.502288]}
+              // ],
+              rippleEffect: {
+                period: 10, // 动画时间，值越小速度越快
+                color: "#fff",
+                brushType: 'stroke', // 波纹绘制方式 stroke, fill
+                scale: 3 // 波纹圆环最大限制，值越大波纹越大
+              },
+              hoverAnimation: true,
+              itemStyle: {
+                color: '#e5925e',// 中心点颜色
+                shadowBlur: 10,
+                shadowColor: '#e5925e'// 波纹颜色
+              }
+            }
+          ]
+        }
+        if (this.mode == '0') {
+          option.geo = {  //地图设置
+            show: true,
+            map: mapjson.name,
+            label: {
+              normal: {
+                show: true,
+                textStyle: {
+                  color: '#fff'
+                }
+              },
+              emphasis: {
+                textStyle: {
+                  color: '#fff'
+                }
+              }
+            },
+            selectedMode: 'single',
+            roam: false,
+
+            emphasis: {   //高亮区域样式
+              label: {
+                normal: {
+                  show: true,
+                  textStyle: {
+                    color: '#fff'
+                  }
+                },
+                emphasis: {
+                  textStyle: {
+                    color: '#fff'
+                  }
+                }
+              },
+              itemStyle: {
+                areaColor: '#ffff2c'
+              }
+            },
+            itemStyle: {
+              normal: {
+                borderColor: '#666666',
+                borderWidth: 1,
+                areaColor: {
+                  type: 'radial',
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.8,
+                  colorStops: [{
+                    offset: 0,
+                    color: '#02363f' // 0% 处的颜色
+                  }, {
+                    offset: 1,
+                    color: '#02363f'
+                  }],
+                  globalCoord: false // 缺省为 false
+                },
+                shadowBlur: 0
+              }
+            },
+            regions: colors
+          }
+        }
+        if (this.mode == '1') {
+          option.geo = {  //地图设置
+            show: true,
+            map: mapjson.name,
+            label: {
+              normal: {
+                show: true,
+                textStyle: {
+                  color: '#fff'
+                }
+              },
+              emphasis: {
+                textStyle: {
+                  color: '#fff'
+                }
+              }
+            },
+            selectedMode: 'single',
+            roam: false,
+
+            emphasis: {   //高亮区域样式
+              label: {
+                show: false
+              },
+              itemStyle: {
+                areaColor: '#62fff7'
+              }
+            },
+            // itemStyle: {
+            //   normal: {
+            //     borderWidth:0
+            //   }
+            //   },
+            itemStyle: {
+              normal: {
+                borderColor: '#21e3dc',
+                borderWidth: 1,
+                areaColor: {
+                  type: 'radial',
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.8,
+                  colorStops: [{
+                    offset: 0,
+                    color: '#02363f' // 0% 处的颜色
+                  }, {
+                    offset: 1,
+                    color: '#02363f'
+                  }],
+                  globalCoord: false // 缺省为 false
+                },
+                // shadowColor: '#21e3dc',
+                // // shadowColor: 'rgba(255, 255, 255, 1)',
+                // shadowOffsetX: -1,
+                // shadowOffsetY: 1,
+                shadowBlur: 0
+              }
+              // emphasis: {
+              //   areaColor: '#389BB7',
+              //   borderWidth: 0
+              // }
+            }
+            // regions: colors
+          }
+        }
+        chart.setOption(option)
+        let index = -1
+        // var timer = setInterval(function () {
+        //   // 隐藏提示框
+        //   chart.dispatchAction({
+        //     type: 'hideTip',
+        //     seriesIndex: 0,
+        //     dataIndex: index
+        //   })
+        //   // 显示提示框
+        //   chart.dispatchAction({
+        //     type: 'showTip',
+        //     seriesIndex: 0,
+        //     dataIndex: index + 1
+        //   })
+        //   // 取消高亮指定的数据图形
+        //   chart.dispatchAction({
+        //     type: 'downplay',
+        //     seriesIndex: 0,
+        //     dataIndex: index
+        //   })
+        //   // 高亮指定的数据图形
+        //   chart.dispatchAction({
+        //     type: 'highlight',
+        //     seriesIndex: 0,
+        //     dataIndex: index + 1
+        //   })
+        //   index++
+        //   if (index > data.length) {
+        //     index = -1
+        //   }
+        // }, 2000)
+      }
+    },
+    beforeDestroy () {
+      //清除定时器
+      // clearInterval(this.timer)
+    },
+    ready () {
+      this.maps = whmap.features.map(item => {
+        return {
+          name: item.properties.name,
+          value: item.properties.center
+        }
+      })
+      console.log('fsfsdfasf', this.maps)
+      let http = new HttpResetClass()
+      http.load('post', '/rs/sql/getUserSumByDep',
+        {data:{}},
+        {rejectMsg: null, resolveMsg: null}
+        ).then((res)=>{
+
+
+          let data1 = res.data.filter(item => item.name == this.maps[0])
+          let data2 = res.data.filter(item => item.name == this.maps[1])
+          let data3 = res.data.filter(item => item.name == this.maps[2])
+          this.datas = []
+          this.datas.push(data1.length > 0 ? data1 : {
+            name: this.maps[0],
+            value: 0,
+            minyong: 0,
+            feiminyong: 0
+          })
+        this.datas.push(data2.length > 0 ? data2 : {
+          name: this.maps[1],
+          value: 0,
+          minyong: 0,
+          feiminyong: 0
+        })
+        this.datas.push(data3.length > 0 ? data3 : {
+          name: this.maps[2],
+          value: 0,
+          minyong: 0,
+          feiminyong: 0
+        })
+      })
+      this.list.push(this.mapdata[0].name)
+      this.drawChinaMap(this.mapdata[0])
+    }
+  }
+</script>