BJ_web_developers / dyitoc

  <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.allNum

      })
      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) {

        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(false);

          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(false);

          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)=> {

                map.removeOverlay(myLabel);

                var that = this;

                let tmpHtml = '';

                for(let i=0;i<JSON.parse(data[itemthat].plRate).length;i++){
                  //console.log(data[itemthat].plRate)
                  tmpHtml += "<li>"+JSON.parse(data[itemthat].plRate)[i].standard+"</li>"
                }
  
                // label = null
                // map.removeOverlay(myLabel);

                myLabel = new BMap.Label(

                  `<div class="dislog-wrap">

                    <div class="dialog-header" title="${data[itemthat].plAddress}">${data[itemthat].plName}</div>

                    <div class="dialog-address" title="${data[itemthat].plAddress}">${data[itemthat].plAddress}</div>
                    <ul class="dislog-body">
                      <li><div>${data[itemthat].freeBrethNum}</div><div>空闲</div></li>
                      <li></li>
                      <li><div>${data[itemthat].plBerthNum}</div><div>总数</div></li>
                    </ul>
                    <div class="dislog-footer">收费标准</div>
                    <ul class="dislog-footer-main">

                      ${tmpHtml}

                    </ul>
                  </div>`,

                  {

                    offset: new BMap.Size(-225, -55),   //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>