src/views/mapsection.vue

<template>
    <div>
      <ul class="title-wrap">
        <li>
          <img src="../assets/img/parkingtotal.svg">
          <div>
            <p> <countTo :startVal='startVal' :endVal='parkingtotal' :duration='durationTime'></countTo></p>
            <p>停车场总数</p>
          </div>
        </li>
        <li>
          <img src="../assets/img/membertotal.svg">
          <div>
            <p><countTo :startVal='startVal' :endVal='membertotal' :duration='durationTime'></countTo></p>
            <p>会员总数</p>
          </div>
        </li>
        <li>
          <img src="../assets/img/incometotal.svg">
          <div>
            <p><countTo :startVal='startVal' :endVal='incometotal' :duration='durationTime'></countTo></p>
            <p>今日收入总数</p>
          </div>
        </li>
        <li>
          <img src="../assets/img/ordertotal.svg">
          <div>
            <p>
              <countTo :startVal='startVal' :endVal='getOrderNum' :duration='durationTime'></countTo>
            </p>
            <p>今日订单数</p>
          </div>
        </li>
      </ul>
      <div class="allmap" id="allmap"></div>
      <ul class="type-wrap">
        <li>紧张</li>
        <li>正常</li>
        <li>空闲</li>
      </ul>
      <div class="park-wrap" ref="parkwrap">
          <ul class="content" ref="">
            <li v-for="(item, index) in parkList" :key="index" :title="item.areaName" :class="{'current-active':index===currentIndex}" @click="currentPark(item.id, index)">{{ item.areaName }}</li>
          </ul>
      </div>
      <div class="flexfm" ></div>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
import busyCar from '../assets/img/busy-status.png'; //以import的方式导入图片文件
import normalCar from '../assets/img/normal-status.png'; //以import的方式导入图片文件
import idleCar from '../assets/img/idle-status.png'; //以import的方式导入图片文件
import countTo from 'vue-count-to'
import { parkAddress, memberAddress, incomeAddress, serviceAddress, parkListAddress } from '../api/api'
import { mapGetters } from 'vuex'
export default {
  name: 'mapsection',
  components: { countTo },
  data() {
    return {
      durationTime:3000,
      startVal: 0,
      parkingtotal: 0,
      membertotal: 0,
      incometotal: 0,
      ordertotal: '6738',
      parkList: [],
      currentIndex:0,
      firstItem:''
    }
  },
  computed: {
    ...mapGetters(['getOrderNum'])
  },
  created() {
    parkAddress({
      orgIds: this.GLOBAL.paramsvariables
    }).then((response)=>{
      const data = response.data.data
      this.parkingtotal = data
    })
    memberAddress({
      orgIds: this.GLOBAL.paramsvariables
    }).then((response)=>{
      const data = response.data.data
      this.membertotal = data.registerNum
    })
    incomeAddress({
      orgIds: this.GLOBAL.paramsvariables
    }).then((response)=>{
      const data = response.data.data
      this.incometotal = Math.round(data.totalPay/100)
    })
    serviceAddress({
      orgId: '10003'
    }).then((response)=>{
      const data = response.data.data
      console.log(data)
      const newData = data.filter(item => item.areaName.indexOf('测试') < 0)
      this.parkList = newData
      console.log(newData)
      this.firstItem = newData[0].id
      this.currentPark(this.firstItem,0)
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.parkwrap,{
        scrollbars:true,//显示滚动条（默认是false不显示）
        mouseWheel:true,//支持鼠标触发区域滚动
        bounce:true,//取消达到边界的缓冲效果
      })
    })
    // let data = {
    //   nurseryInfo: [
    //     {Name:'万达停车场1',MapPointX:'111.742579',MapPointY:'40.818675',status:0,free:30,total:1000},
    //     {Name:'万达停车场2',MapPointX:'111.622579',MapPointY:'40.878675',status:1,free:40,total:800},
    //     {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.778675',status:2,free:300,total:500}
    //   ]
    // }
    // this.baiduMap(data)
  },
  methods: {
    currentPark(item, index) {
      this.currentIndex = index
      let nurseryInfo = []
      parkListAddress({
        blockIds: [item]
      }).then((response)=>{
        const data = response.data.data
        console.log(response)
        nurseryInfo = data
        this.baiduMap(nurseryInfo)
      })
    },
    baiduMap (data) {
      console.log(data.length)
      if(data.length === 0){
        var map = new BMap.Map('allmap', {enableMapClick: false})
        var point = new BMap.Point(111.742579, 40.878675)
        map.centerAndZoom(point, 14)
        var mapStyle={  style : "midnight" }
        map.enableScrollWheelZoom(true);
        map.setMapStyle(mapStyle);
        // var marker = new BMap.Marker(point)  // 创建标注
        // map.addOverlay(marker)              // 将标注添加到地图中
        map.clearOverlays();
      }else{
        var map = new BMap.Map('allmap', {enableMapClick: false})
        var point = new BMap.Point(data[0].lonId, data[0].latId)
        map.centerAndZoom(point, 15)
        var mapStyle={  style : "midnight" }
        map.enableScrollWheelZoom(true);
        map.setMapStyle(mapStyle);
        // var marker = new BMap.Marker(point)  // 创建标注
        // map.addOverlay(marker)              // 将标注添加到地图中
        map.clearOverlays();
        var i = 0;
        var points = [];
        for (var item in data) {
          (function (x) {
            var itemthat = item;
            //创建标注
            var pt = new BMap.Point(data[item].lonId, data[item].latId);
            points[i] = pt;
            if(data[item].freeBrethNum/data[item].plBerthNum == 0){
              var myIcon = new BMap.Icon(busyCar,
                new BMap.Size(29, 40), {
                  offset: new BMap.Size(10, 40),
                  textColor: '#fff'
                });
              var marker = new BMap.Marker(pt,{icon:myIcon});
            } else if(data[item].freeBrethNum/data[item].plBerthNum <= 0.3){
              var myIcon = new BMap.Icon(normalCar,
                new BMap.Size(29, 40), {
                  offset: new BMap.Size(10, 40),
                  textColor: '#fff'
                });
              var marker = new BMap.Marker(pt,{icon:myIcon});
            } else {
              var myIcon = new BMap.Icon(idleCar,
                new BMap.Size(29, 40), {
                  offset: new BMap.Size(10, 40),
                  textColor: '#fff'
                });
              var marker = new BMap.Marker(pt,{icon:myIcon});
            }
            var myIcon = new BMap.Icon(busyCar,
              new BMap.Size(29, 40), {
                offset: new BMap.Size(10, 40),
                textColor: '#fff'
              });
            marker.setTop(true,27000000);
            map.addOverlay(marker);
            var myLabel;
            marker.addEventListener("mouseover", (e)=> {
              var that = this;
              myLabel = new BMap.Label(
                `<div class="dislog-wrap">
                <div class="dialog-header" title="${data[itemthat].plAddress}">${data[itemthat].plAddress}</div>
                <ul class="dislog-body">
                  <li><div>${data[itemthat].freeBrethNum}</div><div>空闲</div></li>
                  <li><div>/</div><div></div></li>
                  <li><div>${data[itemthat].plBerthNum}</div><div>总数</div></li>
                </ul>
              </div>`,
                {
                  offset: new BMap.Size(25, -35),   //label的偏移量，为了让label的中心显示在点上
                  position: pt
                });
              myLabel.setStyle({
                  // color: "#0f0",
                  // fontSize: "12px",
                  padding: "0",
                  // whiteSpace: "normal",
                  backgroundColor: "",
                  border: "0px",
                  zIndex: "1000"
                }
              );
              marker.setLabel(myLabel)
              marker.setTop(true,27000000);
            });
            marker.addEventListener("mouseout", function (e) {
              map.removeOverlay(myLabel);
            });
            i++;
          })(i);
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .allmap{
    position: absolute;
    top:80px;
    left: 0;
    right: 0;
    bottom: 0;
    .parkpop-content{
      background-color: black;
    }
  }
  .title-wrap{
    display: flex;
    padding-top: 17px;
    padding-bottom: 18px;
    background:rgba(0,45,140,.9);
      li{
      flex: 1;
      height: 45px;
      text-align: center;
      overflow: hidden;
      font-size: 0;
        img{
          display: inline-block;
          width: 45px;
          height: 45px;
          margin-right: 14px;
        }
        div{
          display: inline-block;
          vertical-align: top;
          text-align: left;
          max-width: 100px;
          overflow: hidden;
          p{
            &:nth-of-type(1){
              font-size:24px;
              font-weight:500;
              color:rgba(255,255,255,1);
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            &:nth-of-type(2){
              font-size:14px;
              font-weight:bold;
              color:rgba(0,207,254,.7);
              margin-top: 7px;
            }
          }
        }
    }
  }
  .type-wrap{
    padding-left: 10px;
    position: absolute;
    left: 11px;
    bottom: 11px;
    background-color: rgba(10,52,140,.8);
    li{
      float: left;
      height: 20px;
      line-height: 20px;
      margin-right: 10px;
      padding-left: 12px;
      font-size: 12px;
      color:rgba(255,255,255,.7);
      background-repeat: no-repeat;
      background-position: 0 center;
      &:nth-of-type(1){
        background-image: url("../assets/img/busy-type.png");
      }
      &:nth-of-type(2){
        background-image: url("../assets/img/nomal-type.png");
      }
      &:nth-of-type(3){
        background-image: url("../assets/img/idle-type.png");
      }
    }
  }
  .park-wrap{
    width: 200px;
    max-height: 164px;
    position: absolute;
    right: 11px;
    bottom: 11px;
    background-color: #0D3689;
    font-size: 12px;
    overflow: hidden;
    .content{
      height:100%;
      li{
        padding-left: 26px;
        height: 20px;
        line-height: 20px;
        color:rgba(255,255,255,.7);
        background-image:url("../assets/img/office-icon.png");
        background-repeat: no-repeat;
        background-position: 9px center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
      }
      .current-active{
        color:rgba(255,255,255,1);
        background-image:url("../assets/img/officeactive-icon.png");
      }
    }
  }
</style>