manage-client 3.1.47 → 3.1.50

package/src/components/daping/WuHaiMap.vue

@@ -1,418 +1,420 @@
-<template>
-    <div style="height: 100%">
-      <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
-
-        //   [
-        //
-        //   {
-        //     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: 'click',
-            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
-        }
-      })
-      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].name)
-          let data2 = res.data.filter(item => item.name == this.maps[1].name)
-          let data3 = res.data.filter(item => item.name == this.maps[2].name)
-          this.datas = []
-          this.datas.push(data1.length > 0 ? data1 : {
-            name: this.maps[0].name,
-            value: 0,
-            minyong: 0,
-            feiminyong: 0
-          })
-        this.datas.push(data2.length > 0 ? data2 : {
-          name: this.maps[1].name,
-          value: 0,
-          minyong: 0,
-          feiminyong: 0
-        })
-        this.datas.push(data3.length > 0 ? data3 : {
-          name: this.maps[2].name,
-          value: 0,
-          minyong: 0,
-          feiminyong: 0
-        })
-        this.list.push(this.mapdata[0].name)
-        this.drawChinaMap(this.mapdata[0])
-      })
-
-    }
-  }
-</script>
+<template>
+    <div style="height: 100%">
+      <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
+
+        //   [
+        //
+        //   {
+        //     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: 'click',
+            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,
+            zoom: 3.2,
+            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,
+            zoom: 1.2,
+            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
+        }
+      })
+      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].name)
+          let data2 = res.data.filter(item => item.name == this.maps[1].name)
+          let data3 = res.data.filter(item => item.name == this.maps[2].name)
+          this.datas = []
+          this.datas.push(data1.length > 0 ? data1 : {
+            name: this.maps[0].name,
+            value: 0,
+            minyong: 0,
+            feiminyong: 0
+          })
+        this.datas.push(data2.length > 0 ? data2 : {
+          name: this.maps[1].name,
+          value: 0,
+          minyong: 0,
+          feiminyong: 0
+        })
+        this.datas.push(data3.length > 0 ? data3 : {
+          name: this.maps[2].name,
+          value: 0,
+          minyong: 0,
+          feiminyong: 0
+        })
+        this.list.push(this.mapdata[0].name)
+        this.drawChinaMap(this.mapdata[0])
+      })
+
+    }
+  }
+</script>