补丁

.history/songhua-ui/src/views/index1/index_20240525104852.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          // 去除百度地图版权说明 && logo
+          debugger
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          HTMLCollections.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>

.history/songhua-ui/src/views/index1/index_20240525104908.vue

@@ -0,0 +1,264 @@
+<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',
+          };
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          HTMLCollections.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>

.history/songhua-ui/src/views/index1/index_20240525104933.vue

@@ -0,0 +1,266 @@
+<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',
+          };
+          // 去除百度地图版权说明 && logo
+          setTimeout(() => {
+            const HTMLCollections = document.querySelectorAll('.anchorBL')
+            HTMLCollections.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>

.history/songhua-ui/src/views/index1/index_20240525105134.vue

@@ -0,0 +1,267 @@
+<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',
+          };
+          debugger
+          // 去除百度地图版权说明 && logo
+          setTimeout(() => {
+            const HTMLCollections = document.querySelectorAll('.anchorBL')
+            HTMLCollections.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>

.history/songhua-ui/src/views/index1/index_20240525105225.vue

@@ -0,0 +1,266 @@
+<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);
+  },
+  async created() {
+    await this.handler();
+    // 去除百度地图版权说明 && logo
+    setTimeout(() => {
+      const HTMLCollections = document.querySelectorAll('.anchorBL')
+      HTMLCollections.forEach((e,idx) => {
+        HTMLCollections[idx].style.display = 'none'
+      })
+    })
+    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',
+          };
+          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>

.history/songhua-ui/src/views/index1/index_20240525105307.vue

@@ -0,0 +1,266 @@
+<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);
+  },
+  async created() {
+    await this.handler();
+    // 去除百度地图版权说明 && logo
+    setTimeout(() => {
+      const HTMLCollections = document.querySelectorAll('.anchorBL')
+      HTMLCollections.forEach((e,idx) => {
+        HTMLCollections[idx].style.display = 'none !important'
+      })
+    })
+    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',
+          };
+          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>

.history/songhua-ui/src/views/index1/index_20240525105335.vue

@@ -0,0 +1,266 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          setTimeout(() => {
+            const HTMLCollections = document.querySelectorAll('.anchorBL')
+            HTMLCollections.forEach((e,idx) => {
+              HTMLCollections[idx].style.display = 'none !important'
+            })
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525105351.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          HTMLCollections.forEach((e,idx) => {
+            debugger
+            HTMLCollections[idx].style.display = 'none !important'
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525105423.vue

@@ -0,0 +1,264 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          HTMLCollections.forEach((e,idx) => {
+            e.style.display = 'none !important'
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525105509.vue

@@ -0,0 +1,264 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          HTMLCollections.forEach((e,idx) => {
+            e.style.visibility = 'hidden !important'
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525105531.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          HTMLCollections.forEach((e,idx) => {
+            console.log(e.style)
+            e.style.visibility = 'hidden !important'
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525105550.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          HTMLCollections.forEach((e,idx) => {
+            console.log(e.style.display)
+            e.style.visibility = 'hidden !important'
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525105619.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          HTMLCollections.forEach((e,idx) => {
+            e.style.display = 'none !important'
+            console.log(e.style.display)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525105631.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          HTMLCollections.forEach((e,idx) => {
+            e.style.display = 'none !important'
+            console.log(e)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525105720.vue

@@ -0,0 +1,266 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          HTMLCollections.forEach((e,idx) => {
+            e.hide()
+            e.style.display = 'none !important'
+            console.log(e)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525105817.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          HTMLCollections.forEach((e,idx) => {
+            e.style.display = 'none !important'
+            console.log(e.style)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525105844.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          HTMLCollections.forEach((e,idx) => {
+            e.style.top = '-9999px !important'
+            console.log(e.style)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525105906.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          HTMLCollections.forEach((e,idx) => {
+            e.style.top = '-9999px !important'
+            console.log(e.style.top)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525105913.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          HTMLCollections.forEach((e,idx) => {
+            e.style.top = '-9999px !important'
+            console.log(e.style)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525105925.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          HTMLCollections.forEach((e,idx) => {
+            e.style.top = '-9999px !important'
+            console.log(e.height)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525105938.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          HTMLCollections.forEach((e,idx) => {
+            e.style.height = '0px !important'
+            console.log(e.height)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525110146.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('#map')
+          HTMLCollections.forEach((e,idx) => {
+            MAP.removeChild(e)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525110158.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('map')
+          HTMLCollections.forEach((e,idx) => {
+            MAP.removeChild(e)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525110215.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('map')
+          HTMLCollections.forEach((e,idx) => {
+            MAP.removeChild(e)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525110219.vue

@@ -0,0 +1,266 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('map')
+          
+          HTMLCollections.forEach((e,idx) => {
+            MAP.removeChild(e)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525110223.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('#map')
+          HTMLCollections.forEach((e,idx) => {
+            MAP.removeChild(e)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525110230.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('map')
+          HTMLCollections.forEach((e,idx) => {
+            MAP.removeChild(e)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525110317.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('#map')
+          HTMLCollections.forEach((e,idx) => {
+            MAP.removeChild(e)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525110337.vue

@@ -0,0 +1,265 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('map')
+          HTMLCollections.forEach((e,idx) => {
+            MAP.removeChild(e)
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525110410.vue

@@ -0,0 +1,268 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('map')
+          setInterval(() => {
+            HTMLCollections.forEach((e,idx) => {
+            MAP.removeChild(e)
+          })
+          },2000)
+          
+          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>

.history/songhua-ui/src/views/index1/index_20240525110423.vue

@@ -0,0 +1,268 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('map')
+          setInterval(() => {
+            HTMLCollections.forEach((e,idx) => {
+            MAP.removeChild(e)
+          })
+          },1000)
+          
+          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>

.history/songhua-ui/src/views/index1/index_20240525110428.vue

@@ -0,0 +1,268 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('map')
+          setInterval(() => {
+            HTMLCollections.forEach((e,idx) => {
+            MAP.removeChild(e)
+          })
+          },200)
+          
+          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>

.history/songhua-ui/src/views/index1/index_20240525110433.vue

@@ -0,0 +1,268 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('map')
+          setInterval(() => {
+            HTMLCollections.forEach((e,idx) => {
+            MAP.removeChild(e)
+          })
+          })
+          
+          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>

.history/songhua-ui/src/views/index1/index_20240525110442.vue

@@ -0,0 +1,267 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('map')
+          setInterval(() => {
+            HTMLCollections.forEach((e,idx) => {
+              MAP.removeChild(e)
+            })
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525110518.vue

@@ -0,0 +1,268 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('map')
+          setInterval(() => {
+            debugger
+            HTMLCollections.forEach((e,idx) => {
+              MAP.removeChild(e)
+            })
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525110647.vue

@@ -0,0 +1,267 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('map')
+          setInterval(() => {
+            HTMLCollections.forEach((e,idx) => {
+              MAP.removeChild(e)
+            })
+          })
+          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>

.history/songhua-ui/src/views/index1/index_20240525110706.vue

@@ -0,0 +1,267 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('map')
+          setTimeout(() => {
+            HTMLCollections.forEach((e,idx) => {
+              MAP.removeChild(e)
+            })
+          },5000)
+          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>

.history/songhua-ui/src/views/index1/index_20240525110928.vue

@@ -0,0 +1,267 @@
+<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',
+          };
+          that.map.setMapStyle(mapStyle);
+          // 去除百度地图版权说明 && logo
+          const HTMLCollections = document.querySelectorAll('.anchorBL')
+          const MAP = document.getElementById('map')
+          setTimeout(() => {
+            HTMLCollections.forEach((e,idx) => {
+              MAP.removeChild(e)
+            })
+          },5000)
+          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;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240525110955.vue

@@ -0,0 +1,259 @@
+<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',
+          };
+          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;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index1/index_20240525111006.vue

@@ -0,0 +1,259 @@
+<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',
+          };
+          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;
+}
+// ::v-deep .anchorBL{
+//   display: none !important;
+// }
+// ::v-deep .BMap_cpyCtrl{
+//   display: none !important;
+// }
+</style>

.history/songhua-ui/src/views/index1/index_20240525111011.vue

@@ -0,0 +1,259 @@
+<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',
+          };
+          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;
+}
+::v-deep .anchorBL{
+  display: none !important;
+}
+::v-deep .BMap_cpyCtrl{
+  display: none !important;
+}
+</style>

.history/songhua-ui/src/views/index_20240525101016.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="image-container">
+    <video
+      src="../assets/video/bg.mp4"
+      style="width: 100%; object-fit:fill;"
+      autoplay
+      loop
+      muted
+      >
+    </video>
+    <div style="width: 100%;height: 100%;position: absolute;display: flex;padding: 13% 0 0 6%;">
+      <div class="image-wrapper">
+        <img src="@/assets/images/yc.png" alt="Image 1" />
+        <button class="btn" style="background-color: #486DC7;" @click="shipHandler">游船系统</button>
+      </div>
+      <div class="image-wrapper">
+        <img src="@/assets/images/pw.png" alt="Image 2" />
+        <button class="btn" style="background-color: #486DC7;" @click="ticketHandler">票务系统</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Index",
+  data() {
+    return {};
+  },
+  methods: {
+    shipHandler() {
+      window.open("http://localhost/songhuaIndex1");
+    },
+    ticketHandler(){
+      window.open("http://dsj.1230t.com/");
+    },
+  },
+  mounted(){
+    const video = document.getElementById('video')
+    video.play()
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.image-container {
+  display: flex;
+  justify-content: space-between;
+  background: url('../assets/images/bg.jpg') 0 0 no-repeat;
+  background-size:100% 100% ;
+  align-items: center;
+  height: 827px;
+}
+
+.image-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 150px;
+}
+
+.image-wrapper img {
+  width: 500px;
+  height: auto;
+}
+
+.btn {
+  margin-top: 10px;
+  position: relative;
+  padding: 10px 20px;
+  border-radius: 7px;
+  border: 1px solid rgb(61, 106, 255);
+  font-size: 14px;
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 2px;
+  background: transparent;
+  color: #fff;
+  overflow: hidden;
+  box-shadow: 0 0 0 0 transparent;
+  -webkit-transition: all 0.2s ease-in;
+  -moz-transition: all 0.2s ease-in;
+  transition: all 0.2s ease-in;
+}
+.btn:hover {
+  background: rgb(61, 106, 255);
+  box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
+  -webkit-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.btn:hover::before {
+  -webkit-animation: sh02 0.5s 0s linear;
+  -moz-animation: sh02 0.5s 0s linear;
+  animation: sh02 0.5s 0s linear;
+}
+
+.btn::before {
+  content: '';
+  display: block;
+  width: 0px;
+  height: 86%;
+  position: absolute;
+  top: 7%;
+  left: 0%;
+  opacity: 0;
+  background: #fff;
+  box-shadow: 0 0 50px 30px #fff;
+  -webkit-transform: skewX(-20deg);
+  -moz-transform: skewX(-20deg);
+  -ms-transform: skewX(-20deg);
+  -o-transform: skewX(-20deg);
+  transform: skewX(-20deg);
+}
+
+@keyframes sh02 {
+  from {
+    opacity: 0;
+    left: 0%;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    left: 100%;
+  }
+}
+
+.btn:active {
+  box-shadow: 0 0 0 0 transparent;
+  -webkit-transition: box-shadow 0.2s ease-in;
+  -moz-transition: box-shadow 0.2s ease-in;
+  transition: box-shadow 0.2s ease-in;
+}
+</style>
+

.history/songhua-ui/vue.config_20240525104658.js

@@ -0,0 +1,130 @@
+'use strict'
+const path = require('path')
+
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
+
+const CompressionPlugin = require('compression-webpack-plugin')
+
+const name = process.env.VUE_APP_TITLE || '松花湖景区通融合平台' // 网页标题
+
+const port = process.env.port || process.env.npm_config_port || 80 // 端口
+
+// vue.config.js 配置说明
+//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
+// 这里只列一部分，具体配置参考文档
+module.exports = {
+  // 部署生产环境和开发环境下的URL。
+  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
+  // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
+  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
+  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
+  outputDir: 'dist',
+  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
+  assetsDir: 'static',
+  // 是否开启eslint保存检测，有效值：ture | false | 'error'
+  lintOnSave: process.env.NODE_ENV === 'development',
+  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
+  productionSourceMap: false,
+  // webpack-dev-server 相关配置
+  devServer: {
+    host: '0.0.0.0',
+    port: port,
+    open: true,
+    proxy: {
+      // detail: https://cli.vuejs.org/config/#devserver-proxy
+      [process.env.VUE_APP_BASE_API]: {
+        target: `http://192.168.4.27:10001`,
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_API]: ''
+        }
+      }
+    },
+    disableHostCheck: true
+  },
+  css: {
+    loaderOptions: {
+      sass: {
+        sassOptions: { outputStyle: "expanded" }
+      }
+    }
+  },
+  configureWebpack: {
+    name: name,
+    resolve: {
+      alias: {
+        '@': resolve('src')
+      }
+    },
+    plugins: [
+      // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
+      new CompressionPlugin({
+        cache: false,                                  // 不启用文件缓存
+        test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i,  // 压缩文件格式
+        filename: '[path][base].gz[query]',            // 压缩后的文件名
+        algorithm: 'gzip',                             // 使用gzip压缩
+        minRatio: 0.8,                                 // 压缩比例，小于 80% 的文件不会被压缩
+        deleteOriginalAssets: false                    // 压缩后删除原文件
+      })
+    ],
+  },
+  chainWebpack(config) {
+    config.plugins.delete('preload') // TODO: need test
+    config.plugins.delete('prefetch') // TODO: need test
+
+    // set svg-sprite-loader
+    config.module
+      .rule('svg')
+      .exclude.add(resolve('src/assets/icons'))
+      .end()
+    config.module
+      .rule('icons')
+      .test(/\.svg$/)
+      .include.add(resolve('src/assets/icons'))
+      .end()
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
+      .options({
+        symbolId: 'icon-[name]'
+      })
+      .end()
+
+    config.when(process.env.NODE_ENV !== 'development', config => {
+          config
+            .plugin('ScriptExtHtmlWebpackPlugin')
+            .after('html')
+            .use('script-ext-html-webpack-plugin', [{
+            // `runtime` must same as runtimeChunk name. default is `runtime`
+              inline: /runtime\..*\.js$/
+            }])
+            .end()
+
+          config.optimization.splitChunks({
+            chunks: 'all',
+            cacheGroups: {
+              libs: {
+                name: 'chunk-libs',
+                test: /[\\/]node_modules[\\/]/,
+                priority: 10,
+                chunks: 'initial' // only package third parties that are initially dependent
+              },
+              elementUI: {
+                name: 'chunk-elementUI', // split elementUI into a single package
+                test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
+                priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app
+              },
+              commons: {
+                name: 'chunk-commons',
+                test: resolve('src/components'), // can customize your rules
+                minChunks: 3, //  minimum common number
+                priority: 5,
+                reuseExistingChunk: true
+              }
+            }
+          })
+          config.optimization.runtimeChunk('single')
+    })
+  }
+}

songhua-ui/src/views/index1/index.vue

@@ -135,11 +135,6 @@ export default {
           let mapStyle = {
             style: 'midnight',
           };
-          // 去除百度地图版权说明 && logo
-          const HTMLCollections = document.querySelectorAll('.anchorBL')
-          HTMLCollections.forEach((e,idx) => {
-            HTMLCollections[idx].style.display = 'none'
-          })
           that.map.setMapStyle(mapStyle);
           for (let i = 0; i < dataList.length; i++) {
             let pointArray = [];
@@ -255,10 +250,10 @@ export default {
 .parkinglot{
   background: rgba(0, 0, 0, 0.5) !important;
 }
-.anchorBL{
+::v-deep .anchorBL{
   display: none !important;
 }
-.BMap_cpyCtrl{
+::v-deep .BMap_cpyCtrl{
   display: none !important;
 }
 </style>