ssh_visualization/.history/songhua-ui/src/views/index1/index_20240525093445.vue

<template>
  <div class="body shh_body">
    <div class="header">
      <h1 class="header_title">松花湖景区通</h1>
      <span class="time">{{ currentTime }}</span>
    </div>
    <div id="parkCar" class="shh_part parkinglot">
      <div class="shh_part_div" v-for="(item,index) in parkingLots" :key="index">
        <img :src="getImgUrl(item.parkId)"/>
        <div class="shh_txt">
          <h1>{{ getParkingLotName(item.parkId) }}</h1>
          <table style="width: 100%;color: white;border-collapse: collapse;">
            <tr>
              <td>总车位数：{{ item.allSpaceNumber }}</td>
            </tr>
            <tr>
              <td>剩余车位：{{ item.remainSpaceNumber }}</td>
              <td style="padding: 0 25px;">已用车位：{{ item.useSpaceNumber }}</td>
            </tr>
            <tr>
              <td>当天出场车辆：{{ item.outParkCount }}</td>
              <td style="padding: 0 25px;">当前在场车辆：{{ item.inParkCount }}</td>
            </tr>
            <tr>
              <td>当天线下支付金额：{{ item.totalOutMoney }}</td>
              <td style="padding: 0 25px;">当天网络支付金额：{{ item.totalPreMoney }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="selectDate">
      <div class="_moreMenu">
        <ul id="myList" class="listContain">
        </ul>
      </div>
    </div>
    <!--游船视图页面-->
    <div id="map"></div>
  </div>

</template>
<script>

import {getGpsByDid, getShipRoute} from "@/api/ship/shipMapping";
import {getParkData} from "@/api/park/parkLot";


export default {
  name: "songhuaIndex",
  data() {
    return {
      dataSource: [],
      parkingLots: [],
      map: [],
      currentTime: ''
    }
  },
  mounted() {
    // 初始加载时间
    this.getCurrentTime();
    // 每秒刷新时间
    setInterval(() => {
      this.getCurrentTime();
    }, 1000);

    setInterval(() => {
      this.fetchParkingLots();
    }, 1000 * 60 * 2);
  },
  created() {
    this.handler();
    this.fetchParkingLots();
  },
  methods: {
    getCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const date = now.getDate();
      const day = now.getDay();
      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const hour = now.getHours();
      const minute = now.getMinutes();
      const second = now.getSeconds();

      const formattedMonth = month < 10 ? `0${month}` : month;
      const formattedDate = date < 10 ? `0${date}` : date;
      const formattedHour = hour < 10 ? `0${hour}` : hour;
      const formattedMinute = minute < 10 ? `0${minute}` : minute;
      const formattedSecond = second < 10 ? `0${second}` : second;

      this.currentTime = `${year}年${formattedMonth}月${formattedDate}日 ${weekDays[day]} ${formattedHour}:${formattedMinute}:${formattedSecond}`;
    },
    fetchParkingLots() {
      getParkData().then(response => {
        this.parkingLots = response.data;
      })
    },
    getImgUrl(parkId) {
      switch (parkId) {
        case "15305":
          return require("@/assets/images/shh_part" + 1 + ".png");
        case "15338":
          return require("@/assets/images/shh_part" + 2 + ".png");
        // 可以继续添加其他停车场的情况
        // default:
        //   return "未知停车场";
      }
    },
    getParkingLotName(parkId) {
      // 在这里根据 parkId 返回停车场名称
      switch (parkId) {
        case "15305":
          return "一号松花湖停车场";
        case "15338":
          return "二号松花湖停车场";
        // 可以继续添加其他停车场的情况
        // default:
        //   return "未知停车场";
      }
    },

    //地图
    handler() {
      getShipRoute().then(res => {
        let that = this
        if (res.code == 200) {
          that.dataSource = res.data
          let ul;
          let dataList = that.dataSource
          that.map = new BMap.Map('map'); // 创建Map实例
          that.map.centerAndZoom(new BMap.Point(126.85912, 43.671033), 13); // 初始化地图,设置中心点坐标和地图级别
          that.map.enableScrollWheelZoom(true);
          let mapStyle = {
            style: 'midnight',
          };
          // document.querySelector('.anchorBL').style.display = 'none';
          const HTMLCollections = document.querySelectorAll('.anchorBL')
          HTMLCollections[0].style.display = 'none';
          // [0,0].forEach((e,idx) => {
          //   HTMLCollections[idx].style.display = 'none'
          // })
          that.map.setMapStyle(mapStyle);
          for (let i = 0; i < dataList.length; i++) {
            let pointArray = [];
            for (let j = 0; j < dataList[i].polylinePath.length; j++) {
              pointArray.push(new BMap.Point(dataList[i].polylinePath[j].lng, dataList[i].polylinePath[j].lat))
            }
            // 创建小船图标
            var myIcon = new BMap.Icon(require("@/assets/images/ship.png"), new BMap.Size(52, 26));
            var marker = new BMap.Marker(new BMap.Point(dataList[i].polylinePath[0].lng, dataList[i].polylinePath[0].lat), {icon: myIcon}); // 创建点
            var opts = {
              width: 100,     // 信息窗口宽度
              height: 80,     // 信息窗口高度
              title: "游船信息", // 信息窗口标题
            }
            // marker添加点击事件
            marker.addEventListener('mouseover', function () {
              this.map.openInfoWindow(new BMap.InfoWindow("游船名称:" + dataList[i].shipName + "</br>" + "游船型号:" + dataList[i].shipType + "</br>" + "驱动类型:" + dataList[i].propulsion + "</br>", opts), new BMap.Point(dataList[i].polylinePath[0].lng, dataList[i].polylinePath[0].lat));
            });
            marker.addEventListener('mouseout', function () {
              this.map.closeInfoWindow();
            });
            this.map.addOverlay(marker);
          }
          ul = document.getElementById('myList');
          // 循环数组中的每个项目
          dataList.concat(dataList).forEach(function (item) {
            // 创建一个新的li元素
            var li = document.createElement('li');
            // 设置li元素的内容
            li.textContent = item.shipName;
            li.style.transform = 'translateX(22px)';
            li.style.cursor = 'pointer';
            // 添加点击事件处理程序
            li.addEventListener('click',  (e) => {
              // 重置状态
              const liSets = document.getElementById('myList').getElementsByTagName('li')
              const length = liSets.length;
              for (var i = 0; i < length; i++) {
                liSets[i].style.color = '#3CDFFF';
              }
              // 在这里添加你想执行的点击事件代码
              that.selectGpsByDid(item.registrationNumber)
              console.log(e.target)
              e.target.style.color = '#fff'
              // 可以进行其他操作，如触发其他函数或改变元素样式等
            });
            // 将li元素添加到ul中
            ul.appendChild(li);
          });
        } else {
          that.$modal.msgError("查询失败");
        }
      })
    },
    selectGpsByDid(val) {
      this.map.clearOverlays();
      let marker;
      let polyline;
      let opts;
      getGpsByDid(val).then(res => {
        if (res.code == 200) {
          let dataList = res.data
          for (let i = 0; i < dataList.length; i++) {
            let pointArray = [];
            for (let j = 0; j < dataList[i].polylinePath.length; j++) {
              pointArray.push(new BMap.Point(dataList[i].polylinePath[j].lng, dataList[i].polylinePath[j].lat))
            }
            polyline = new BMap.Polyline(pointArray, {
              strokeColor: dataList[i].color,
              strokeWeight: 5,
              strokeOpacity: 0.5
            });//创建折线
            // 创建小船图标
            var myIcon = new BMap.Icon(require("@/assets/images/ship.png"), new BMap.Size(52, 26));
            marker = new BMap.Marker(new BMap.Point(dataList[i].polylinePath[0].lng, dataList[i].polylinePath[0].lat), {icon: myIcon}); // 创建点
            opts = {
              width: 100,     // 信息窗口宽度
              height: 80,     // 信息窗口高度
              title: "游船信息", // 信息窗口标题
            }
            // marker添加点击事件
            marker.addEventListener('mouseover', function () {
              this.map.openInfoWindow(new BMap.InfoWindow("游船名称:" + dataList[i].shipName + "</br>" + "游船型号:" + dataList[i].shipType + "</br>" + "驱动类型:" + dataList[i].propulsion + "</br>", opts), new BMap.Point(dataList[i].polylinePath[0].lng, dataList[i].polylinePath[0].lat));
            });
            marker.addEventListener('mouseout', function () {
              this.map.closeInfoWindow();
            });
            this.map.addOverlay(polyline);
            this.map.addOverlay(marker);
          }
        } else {
          this.$modal.msgError("查询失败");
        }
      })
    }
  },

}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/shh_body.scss";
@import "@/assets/styles/shh_index.scss";

.listContain{
  height: 465px;
  overflow: hidden;
  overflow-y: scroll;
}
.listContain::-webkit-scrollbar{
  display: none;
}
.parkinglot{
  background: rgba(0, 0, 0, 0.5) !important;
}
.anchorBL{
  display: none !important;
}
.BMap_cpyCtrl{
  display: none !important;
}
</style>