BJ_web_developers / dyitoc

  <template>
      <div>
        <ul class="title-wrap">
          <li>
            <img src="../assets/img/parkingtotal.svg">
            <div>
              <p>{{parkingtotal|formatNum}}</p>
              <p>停车场总数</p>
            </div>
          </li>
          <li>
            <img src="../assets/img/membertotal.svg">
            <div>
              <p>{{membertotal|formatNum}}</p>
              <p>会员总数</p>
            </div>
          </li>
          <li>
            <img src="../assets/img/incometotal.svg">
            <div>
              <p>{{incometotal|formatNum}}</p>
              <p>今日收入总数</p>
            </div>
          </li>
          <li>
            <img src="../assets/img/ordertotal.svg">
            <div>
              <p>{{ordertotal|formatNum}}</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.name" :class="{'current-active':index===currentIndex}" @click="currentPark(item, index)">{{ item.name }}</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的方式导入图片文件

  export default {
    name: 'mapsection',
    data() {
      return {
        parkingtotal: '7338',
        membertotal: '738',
        incometotal: '1156738',

        ordertotal: '6738',
        parkList: [
          {name:'西局街道办事处12321312312312',id:'1'},
          {name:'西局街道办事处',id:'2'},
          {name:'西局街道办事处',id:'3'},
          {name:'西局街道办事处',id:'4'},
          {name:'西局街道办事处',id:'5'},
          {name:'西局街道办事处',id:'6'},
          {name:'西局街道办事处',id:'7'},
          {name:'西局街道办事处',id:'8'},
          {name:'西局街道办事处',id:'9'},
          {name:'西局街道办事处',id:'10'},
          {name:'西局街道办事处',id:'11'},
          {name:'西局街道办事处',id:'12'},
  
        ],
        currentIndex:0
      }
    },

    created() {
  
    },

    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.722579',MapPointY:'40.878675',status:1,free:40,total:800},
          {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.818675',status:2,free:300,total:500}

        ]
      }
      this.baiduMap(data)

    },
    methods: {
      currentPark(item, index) {
        console.log(item)
        this.currentIndex = index

        let data = {
          nurseryInfo: [

            {Name:'万达停车场11111',MapPointX:'111.742579',MapPointY:'40.818675',status:2,free:300,total:500},
            {Name:'万达停车场22222',MapPointX:'111.722579',MapPointY:'40.878675',status:0,free:30,total:1000},
            {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.818675',status:1,free:40,total:800}

          ]
        }
        this.baiduMap(data)

      },

      baiduMap (data) {

        var map = new BMap.Map('allmap')
        var point = new BMap.Point(111.742579, 40.818675)
        map.centerAndZoom(point, 12)

        // var marker = new BMap.Marker(point)  // 创建标注
        // map.addOverlay(marker)              // 将标注添加到地图中

        map.clearOverlays();
        var i = 0;
        var points = [];
        for (var item in data.nurseryInfo) {
          (function (x) {

            var itemthat = item;

            //创建标注
            var pt = new BMap.Point(data.nurseryInfo[item].MapPointX, data.nurseryInfo[item].MapPointY);
            points[i] = pt;

            if(data.nurseryInfo[item].status === 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.nurseryInfo[item].status === 1){
              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});
            }

            console.log(data)

            map.addOverlay(marker);

            var myLabel;

            marker.addEventListener("mouseover", function (e) {

              console.log(e)

                myLabel = new BMap.Label(

                  `<div class="dislog-wrap">

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

                    <ul class="dislog-body">

                      <li><div>${data.nurseryInfo[itemthat].free}</div><div>空闲</div></li>
                      <li><div>/</div><div></div></li>
                      <li><div>${data.nurseryInfo[itemthat].total}</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"

                }
              );

              map.addOverlay(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,.6);

        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: 120px;

      max-height: 124px;

      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>