manage-client 3.2.83-aode → 3.2.83-jb

package/src/components/daping/WuHaiMap.vue

@@ -0,0 +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,
+            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>

package/src/components/daping/XianMap.vue

@@ -0,0 +1,275 @@
+
+<template>
+<div style="margin-top: -75%;">
+  <div id="idname" style="padding-top: 2%;
+    padding-left: 2%;
+    padding-right: 2%;">
+  </div>
+</div>
+
+
+
+</template>
+
+<script>
+
+import mapjson from 'src/components/qinhua/json/mapStyle.json'
+import {MP} from 'src/components/qinhua/js/BMap.js'
+
+export default {
+  name: 'xian-echart-map',
+  title:'xian-echart-map',
+
+  data() {
+    return {
+      mapdata:[
+        {name:'xian',value:require('src/components/qinhua/json/xian.json')}
+
+      ],
+      list:[],
+      xc:'',
+      timer:'',
+      geoCoordMap : {
+
+        '未央区':[108.953364,34.299687],
+        '太白立交':[108.927493,34.239545],
+        '狄寨塬':[109.145543,34.206836],
+        '耿镇':[109.108174,34.451585],
+        '高陵':[109.006904,34.498217],
+
+
+      },
+      data : [
+        {name: '未央区', value:333},
+        {name: '太白立交', value: 111},
+        {name: '狄寨塬', value: 222},
+        {name: '耿镇', value: 222},
+        {name: '高陵', value: 222},
+
+      ]
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+
+    convertData (data) {
+      var res = [];
+      for (var i = 0; i < this.data.length; i++) {
+        var geoCoord = this.geoCoordMap[this.data[i].name];
+        if (geoCoord) {
+          res.push({
+            name: this.data[i].name,
+            value: geoCoord.concat(this.data[i].value)
+          });
+        }
+      }
+      return res;
+    },
+    drawChinaMap() {
+      // this.$echarts.registerMap('xian', xian);
+
+
+      let mapChart =this.$echarts.init(document.getElementById("idname"));
+
+      console.log('画图~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~')
+      let option = {
+
+        tooltip : {
+          triggerOn: "mousemove",
+          trigger: 'item'
+        },
+        /*tooltip: {
+          show:true,
+          triggerOn: "mousemove",
+          trigger: 'item',
+          formatter: function(a, b) {
+            console.log('nnnnnnnnnnnnnnnnnnnn')
+            console.log(a.data)
+            console.log('bbbbbbbbbbbbbbbbbbbbb')
+            console.log(b)
+            return (
+
+              `${a['name']}   `
+            )
+          }
+        },*/
+        bmap: {
+          center: [108.951927,34.278213],
+          zoom: 10,
+          roam: false,
+          mapStyle: {
+            styleJson: [{
+              'featureType': 'water',
+              'elementType': 'all',
+              'stylers': {
+                'color': '#d1d1d1'
+              }
+            }, {
+              'featureType': 'land',
+              'elementType': 'all',
+              'stylers': {
+                'color': '#f3f3f3'
+              }
+            }, {
+              'featureType': 'railway',
+              'elementType': 'all',
+              'stylers': {
+                'visibility': 'off'
+              }
+            }, {
+              'featureType': 'highway',
+              'elementType': 'all',
+              'stylers': {
+                'color': '#fdfdfd'
+              }
+            }, {
+              'featureType': 'highway',
+              'elementType': 'labels',
+              'stylers': {
+                'visibility': 'off'
+              }
+            }, {
+              'featureType': 'arterial',
+              'elementType': 'geometry',
+              'stylers': {
+                'color': '#fefefe'
+              }
+            }, {
+              'featureType': 'arterial',
+              'elementType': 'geometry.fill',
+              'stylers': {
+                'color': '#fefefe'
+              }
+            }, {
+              'featureType': 'poi',
+              'elementType': 'all',
+              'stylers': {
+                'visibility': 'off'
+              }
+            }, {
+              'featureType': 'green',
+              'elementType': 'all',
+              'stylers': {
+                'visibility': 'off'
+              }
+            }, {
+              'featureType': 'subway',
+              'elementType': 'all',
+              'stylers': {
+                'visibility': 'off'
+              }
+            }, {
+              'featureType': 'manmade',
+              'elementType': 'all',
+              'stylers': {
+                'color': '#d1d1d1'
+              }
+            }, {
+              'featureType': 'local',
+              'elementType': 'all',
+              'stylers': {
+                'color': '#d1d1d1'
+              }
+            }, {
+              'featureType': 'arterial',
+              'elementType': 'labels',
+              'stylers': {
+                'visibility': 'off'
+              }
+            }, {
+              'featureType': 'boundary',
+              'elementType': 'all',
+              'stylers': {
+                'color': '#fefefe'
+              }
+            }, {
+              'featureType': 'building',
+              'elementType': 'all',
+              'stylers': {
+                'color': '#d1d1d1'
+              }
+            }, {
+              'featureType': 'label',
+              'elementType': 'labels.text.fill',
+              'stylers': {
+                'color': '#999999'
+              }
+            }]
+          }
+        },
+        series : [
+          {
+            name: '站点',
+            type: 'effectScatter',
+            coordinateSystem: 'bmap',
+            data: this.convertData(this.data.sort(function (a, b) {
+              return b.value - a.value;
+            }).slice(0, 6)),
+            symbolSize:10,
+            encode: {
+              value: 2
+            },
+            showEffectOn: 'render',
+            rippleEffect: {
+              brushType: 'stroke'
+            },
+            hoverAnimation: true,
+            label: {
+              formatter: '{b}',
+              position: 'right',
+              show: true
+            },
+            itemStyle: { //散点的样式
+              shadowBlur: 10,
+              shadowColor: '#FFE228',
+              color :'#FFE228',
+            },
+            zlevel: 1
+          }
+        ]
+
+      };
+
+      mapChart.setOption(option,true)
+      var bmap = mapChart.getModel().getComponent('bmap').getBMap();
+      // bmap.setMapStyleV2({ styleJson:  mapjson });
+      bmap.setMapStyle({ style:  'midnight' });
+
+
+
+    }
+
+  },
+  beforeDestroy() {
+    //清除定时器
+    clearInterval(this.timer);
+  },
+  props: ['show'],
+  watch: {
+    // 'show'(val) {
+    //   this.drawChinaMap()
+    // }
+  },
+  ready(){
+    // console.log('----------------------------------ready+this.show')
+    // console.log(this.show)
+    // this.$nextTick(() => {
+    //   MP('pUKyfRZf0LhEAQ2kdpUGOHx6i0uLVnwn').then(() => {
+    //     console.log('=============================')
+    //     this.drawChinaMap()
+    //   })
+    // })
+    /*setTimeout(() => {
+      this.drawChinaMap()
+    }, 5000)*/
+
+  }
+};
+</script>
+<style scoped>
+ .ec-extension-bmap{
+   margin-top: -330px;
+ }
+</style>

package/src/components/daping/js/AMap.js

@@ -0,0 +1,19 @@
+export default function MapLoader () {
+  return new Promise((resolve, reject) => {
+    if (window.AMap) {
+      resolve(window.AMap)
+    } else {
+      // 动态创建script标签
+      var script = document.createElement('script')
+      script.type = 'text/javascript'
+      script.async = true
+      script.src = 'https://webapi.amap.com/maps?v=1.4.9&callback=initAMap&key=Key&plugin=AMap.DistrictSearch,AMap.Circle,AMap.LngLat,AMap.Polyline,AMap.LngLat,AMap.Text,AMap.Geocoder';
+      // plugin后的是需要的插件
+      script.onerror = reject
+      document.head.appendChild(script)
+    }
+    window.initAMap = () => {
+      resolve(window.AMap)
+    }
+  })
+}