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: [
          {MapPointX:'111.742579',MapPointY:'40.818675',status:0},
          {MapPointX:'111.722579',MapPointY:'40.878675',status:1},
          {MapPointX:'111.782579',MapPointY:'40.818675',status:2}
        ]
      }
      this.baiduMap(data)

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

        let data = {
          nurseryInfo: [
            {Name:'万达停车场1',MapPointX:'111.742579',MapPointY:'40.818675',status:2},
            {Name:'万达停车场2',MapPointX:'111.722579',MapPointY:'40.878675',status:0},
            {Name:'万达停车场3',MapPointX:'111.782579',MapPointY:'40.818675',status:1}
          ]
        }
        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 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});
            }
  

            map.addOverlay(marker);

            var myLabel;
            marker.addEventListener("mouseover", function (e) {
                myLabel = new BMap.Label(

                '<div class="parkpop-content" style="font-size: 20px;">12321312</div>',

                {
                  offset: new BMap.Size(30, -85),   //label的偏移量，为了让label的中心显示在点上
                  position: point
                });
  
              myLabel.setStyle({

                  // color: "#0f0",

                  fontSize: "12px",

                  // padding: "5px",
                  // whiteSpace: "normal",
                  // backgroundColor: "#f00",
                  // border: "0px",
                  // zIndex: "1000"

                }
              );
              console.log('1')
              map.addOverlay(myLabel);
            });

            // marker.addEventListener("mouseout", function () {
            //   map.removeOverlay(myLabel);
            // })

            // //创建信息窗口
            // var opts = {
            //   width: 400,     // 信息窗口宽度
            //   height: 120,     // 信息窗口高度
            //   title: "<strong style=\"font-size:16px;font-weight:bold\">" + data.nurseryInfo[item].Name + "</strong>", // 信息窗口标题
            //   enableMessage: true, //设置允许信息窗发送短息
            //   message: ""
            // }
            // var showInfo = "地址：" + data.nurseryInfo[item].Addresss + "<br/>" + "描述：" + data.nurseryInfo[item].BasicFacts + "<br/>面积：" + data.nurseryInfo[item].HouseArea + "<br/>地块个数:" + data.nurseryInfo[item].nurseryBlockCount;
            // var infoWindow = new BMap.InfoWindow(showInfo, opts);  // 创建信息窗口对象

            // marker.addEventListener("mouseover", function (e) {
            //   console.log('1')

            //   //map.centerAndZoom(pt, 12);
            //   marker.openInfoWindow(infoWindow, pt); //开启信息窗口
            // });

            // marker.addEventListener("mouseout", function () {
            //   marker.closeInfoWindow();
            // })
            // console.log('1')

            // map.addOverlay(marker);

            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>