BJ_web_developers / cityOperationCenter

  <template>
    <div class="app-chinaMapBox theme-map">
      <div class="mapTitle eleVerHorCenter-flex">
        <div class="cellBox">
          <table class="parkTotalTb">
            <tr>
              <td><div class="parkTotalImg"></div></td>
              <td><div class="infoBox"><div><countTo :startVal='parkParams.startVal' :endVal='parkParams.endVal' :duration='animationTime'></countTo></div><div>停车场总数</div></div> </td>
            </tr>
          </table>
        </div>
        <div class="cellBox">
          <table class="parkTotalTb">
            <tr>
              <td><div class="memberTotalImg"></div></td>

              <td><div class="infoBox"><div><countTo :startVal='memberParams.startVal' :endVal='getParkingTotal' :duration='animationTime'></countTo></div><div>会员总数</div></div> </td>

            </tr>
          </table>
        </div>
        <div class="cellBox">
          <table class="parkTotalTb">
            <tr>
              <td><div class="dayTotalImg"></div></td>

              <td><div class="infoBox"><div><countTo :startVal='dayParams.startVal' :endVal='getOrderTotal' :duration='animationTime'></countTo></div><div>今日订单数</div></div> </td>

            </tr>
          </table>
        </div>
      </div>
      <div class="mapChart"> </div>
    </div>
  </template>
  <script>
    import echarts from 'echarts'
    import countTo from 'vue-count-to';//通过设置：endVall 和 ：startVall 会自动判断计数和倒数，:duration='3000'是指完成动画的时间。

    import {mapGetters} from 'vuex' //use commit

    export default {
      name: "chinaMap",
      components: { countTo },
      data() {
        return {
          animationTime:5000,//动画时间
          parkParams:{//parkTotal:738,//停车场总数
            startVal:0,

            endVal: 0

          },
          memberParams:{//memberTotal:738,//会员总数
            startVal:0,
            endVal: 7200
          },
          dayParams:{//dayTotal:10000,//今日订单数
            startVal:0,
            endVal: 1000
          },
          mapChart: {},

          mapData:[],

          coordinateData:{}

        }
      },

      computed: {

        ...mapGetters(['getParkingTotal','getOrderTotal'])

      },

      mounted() {

        this.axios.post('urban/intelligence/park/queryParkNumStatisticByOrgIds',{
          orgIds: [10003,10005]
        }).then((response)=>{
          let  data = response.data.data
          this.parkParams.endVal=data
        }).catch((response)=>{
          console.log(response);
        })
        this.axios.post('urban/intelligence/berth/queryBerthStatisticForOrgId',{
          orgIds: [10003,10005]
        }).then((response)=>{
          let  data = response.data.data
          console.log(data)

          //let mapData = [];
          for (let i=0;i<data.length;i++){

            this.mapData.push({
              name:data[i].orgName,
              value:data[i].allBerthNum
            })
            //this.coordinateData.data[i].orgName = [data[i].lonId,data[i].orgId]

            // this.coordinateData.push({
            //   key: data[i].orgName,value:[data[i].lonId,data[i].latId]
            // })
            this.coordinateData[data[i].orgName] = [data[i].lonId,data[i].latId]

          }

          //'双流': [103.912493, 30.586969]
          console.log(this.coordinateData)

          this.mapChart= this.createPie();
          window.addEventListener('resize', function() {
            this.mapChart.resize()
          }.bind(this));

        }).catch((response)=>{
          console.log(response);
        })
  

      },
      methods: {
        /*
         * china地图
         * */
        createPie(){
          let mapChart = echarts.init(document.querySelector('.app-chinaMapBox .mapChart'));
          const series=this._getSeries();
          const option= {
            grid: {
              top: '0%',left: '0%',
              right: '0%',bottom: '3%'
            },
            tooltip: {
              trigger: 'item',
              backgroundColor: 'rgba(6, 75, 140, 0)',
              borderColor: '#FFFFCC',
              showDelay: 0,
              hideDelay: 0,
              enterable: true,
              transitionDuration: 0,
              //extraCssText: 'z-index:100',
              formatter: function(params, ticket, callback) {
                if (params.seriesType != "lines") {
                  //console.log(params)
                  //根据业务自己拓展要显示的内容
                  var res = "";
                  var name = params.name;
                  var value = params.value;
                  var numStyle='color:#02C202; font-size: 16px; font-family: display-free;line-height:25px;font-weight:bold;';
                  res = "<div style='padding:5px;height:16px;line-height:16px;background:rgba(43, 140, 209, 0.96)'>" + name + "</div>" ;
                  res +="<div style='padding:5px;height:25px;background:rgba(6, 75, 140, 0.9);'>"+"泊位总数："+"<span style='"+numStyle+"'>"+ value[2] +"</span></div>";
                  return res;
                }
              }
            },
            dataRange: {
              calculable: false,
              color: ['#FFAB00'],
              textStyle: {color: '#fff' },
              show: false,
            },
            geo: {
              map: 'china',
              label: {
                normal: {show: false },
                emphasis: {show: false}
              },
              center: [104.94296,37.433088],
              roam: true,zoom:1.3,
              scaleLimit:{ min:1.1,max:5 },
              itemStyle: {
                normal: {
                  areaColor: '#020e33',borderColor: '#404a59'
                },
                emphasis: { areaColor: '#04294A'}
              },
  
            },
            series: series
          }
          mapChart.setOption(option);
          return mapChart;
        },
        //设置 series
        _getSeries(){

          //this.coordinateData;
          const geoCoordMap = this.coordinateData;

          const dataFrom = '无锡';

          // const data = [
          //   {name: '赤峰',value: 95},
          //   {name: '双流',value: 70},
          //   {name: '北京',value: 70},
          //   {name: '丹阳', value: 30}
          // ];
          const data = this.mapData;
          console.log(data)

          let tmpSeries=[{
            //name: '无锡',
            type: 'lines',
            zlevel: 1,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.2, //0-1
              color: '#fff',
              //shadowBlur: 3,
              symbolSize: 2
            },
            lineStyle: {
              normal: {
                color: '#a6c84c',
                width: 0,
                curveness: 0.2
              }
            },
            data: data.map(function(dataItem) {
              return {
                fromName: dataFrom,
                toName: dataItem.name,
                coords: [
                  geoCoordMap[dataFrom],
                  geoCoordMap[dataItem.name]
                ]
              }
            })
          },
            {
              //name: '无锡',
              type: 'lines',
              //zlevel: 2,
              symbol: 'none',//['none', 'pin'],
              symbolSize: 8,
              effect: {
                show: true,
                period: 6,
                trailLength: 0,
                color: '#fff',
              },
              lineStyle: {
                normal: {
                  color: '#FFAB00', //线颜色
                  width: 1,
                  opacity: 0.6,
                  curveness: 0.2
                }
              },
              data: data.map(function(dataItem) {
                return {
                  fromName: dataFrom,
                  toName: dataItem.name,
                  coords: [
                    geoCoordMap[dataFrom],
                    geoCoordMap[dataItem.name]
                  ]
                }
              })
            },
            {
              name: '城市',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              //zlevel: 2,
              rippleEffect: {
                scale: 5,
                brushType: 'stroke'
              },
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  color: '#FFFFFF',
                  formatter: '{b}'
                }
              },
              //光圈大小
              symbolSize: function(val) {
                return 10;
              },
              itemStyle: {
                normal: {
                  color: '#a6c84c'
                }
              },
              data: data.map(function(dataItem) {
                return {
                  name: dataItem.name,
                  value: geoCoordMap[dataItem.name].concat([dataItem.value])
                };
              })
            },
            {
              name: '无锡',
              type: 'scatter',
              coordinateSystem: 'geo',
              label: {
                normal: {
                  show: true,
                  position: 'bottom',
                  formatter: '{b}',
                  textStyle: {
                    color: "#ED3D06"
                  }
                },
                emphasis: {
                  show: true
                }
              },
              symbol: 'circle',
              symbolSize: 5,
              data: [{
                name: dataFrom,
                value: geoCoordMap[dataFrom].concat([100]),
              }],
            }
          ];
          return tmpSeries;
        },
  
        //测试被父组件调用
        setParkTotal(){
          this.parkParams.startVal=this.parkParams.endVal;
          this.parkParams.endVal=105;
          console.log("停车场总数:root");
        }
      }
    }
  </script>
  
  <style scoped  lang="scss">
    .app-chinaMapBox{
      position: relative;
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
    .mapChart{
      position: relative;
      width: 100%;
      height: 100%;
      /*margin-top: 5%;*/
      /*margin-bottom: 5px;*/
      /*height: -webkit-calc(100% - (5% + 5px));*/
      /*height: -moz-calc(100% - (5% + 5px));*/
      /*height: calc(100% - (5% + 5px));*/
      /*top:0;left: 0;*/
      /*bottom: 0;*/
      /*right:0;*/
      /*z-index: -1;*/
    }
    .cellBox{
      width: 33.333%;text-align: center;
    }
    .mapTitle{
      position: absolute;
      top: 0;
      width: 100%;
      height: 70px;
      background-color:RGBA(0, 45, 140, .7);
      z-index: 5;
    }
    .parkTotalImg{
      background: url(../../images/map/parkTotal.svg) no-repeat;
      background-size: 100% 100%;
      width: 45px;height: 45px;
    }
    .memberTotalImg{
      background: url(../../images/map/memberTotal.svg) no-repeat;
      background-size: 100% 100%;
      width: 45px;height: 45px;
    }
    .dayTotalImg{
      background: url(../../images/map/dayTotal.svg) no-repeat;
      background-size: 100% 100%;
      width: 45px;height: 45px;
    }
    .parkTotalTb{
      display: inline-block;
      margin-top:2px;
    }
    .infoBox{
      margin-left: 5px;
      text-align: left;
    }
    /*数字:738*/
    .infoBox>div:first-child{
      font-size: 24px;
    }
    /*文字：会员总数*/
    .infoBox>div:last-child{
      color: #00CFFE;font-size: 14px;
    }
  
    }
  </style>