松花湖景区通web端页面样式完善

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

@@ -0,0 +1,233 @@
+<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">
+      <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">
+        </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.forEach(function (item) {
+            // 创建一个新的li元素
+            var li = document.createElement('li');
+            // 设置li元素的内容
+            li.textContent = item.shipName;
+            li.style.transform = 'translateX(22px)';
+            // 添加点击事件处理程序
+            li.addEventListener('click', function () {
+              // 在这里添加你想执行的点击事件代码
+              that.selectGpsByDid(item.registrationNumber)
+              // 可以进行其他操作，如触发其他函数或改变元素样式等
+            });
+            // 将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";
+
+</style>

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

@@ -0,0 +1,233 @@
+<template>
+  <div class="body shh_body">
+    <div class="header">
+      <h1 class="header_title">松花湖景区通1</h1>
+      <span class="time">{{ currentTime }}</span>
+    </div>
+    <div id="parkCar" class="shh_part">
+      <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">
+        </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.forEach(function (item) {
+            // 创建一个新的li元素
+            var li = document.createElement('li');
+            // 设置li元素的内容
+            li.textContent = item.shipName;
+            li.style.transform = 'translateX(22px)';
+            // 添加点击事件处理程序
+            li.addEventListener('click', function () {
+              // 在这里添加你想执行的点击事件代码
+              that.selectGpsByDid(item.registrationNumber)
+              // 可以进行其他操作，如触发其他函数或改变元素样式等
+            });
+            // 将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";
+
+</style>

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

@@ -0,0 +1,233 @@
+<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">
+      <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">
+        </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.forEach(function (item) {
+            // 创建一个新的li元素
+            var li = document.createElement('li');
+            // 设置li元素的内容
+            li.textContent = item.shipName;
+            li.style.transform = 'translateX(22px)';
+            // 添加点击事件处理程序
+            li.addEventListener('click', function () {
+              // 在这里添加你想执行的点击事件代码
+              that.selectGpsByDid(item.registrationNumber)
+              // 可以进行其他操作，如触发其他函数或改变元素样式等
+            });
+            // 将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";
+
+</style>

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

@@ -0,0 +1,234 @@
+<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">
+      <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">
+        </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.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', function () {
+              // 在这里添加你想执行的点击事件代码
+              that.selectGpsByDid(item.registrationNumber)
+              // 可以进行其他操作，如触发其他函数或改变元素样式等
+            });
+            // 将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";
+
+</style>

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

@@ -0,0 +1,235 @@
+<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">
+      <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">
+        </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.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', function (e) {
+              // 在这里添加你想执行的点击事件代码
+              that.selectGpsByDid(item.registrationNumber)
+              e.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";
+
+</style>

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

@@ -0,0 +1,236 @@
+<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">
+      <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">
+        </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.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', function (e) {
+              // 在这里添加你想执行的点击事件代码
+              that.selectGpsByDid(item.registrationNumber)
+              console.log(e.style)
+              e.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";
+
+</style>

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

@@ -0,0 +1,236 @@
+<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">
+      <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">
+        </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.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', function (e) {
+              // 在这里添加你想执行的点击事件代码
+              that.selectGpsByDid(item.registrationNumber)
+              console.log(e.target)
+              e.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";
+
+</style>

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

@@ -0,0 +1,236 @@
+<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">
+      <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">
+        </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.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) => {
+              // 在这里添加你想执行的点击事件代码
+              that.selectGpsByDid(item.registrationNumber)
+              console.log(e.target)
+              e.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";
+
+</style>

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

@@ -0,0 +1,236 @@
+<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">
+      <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">
+        </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.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) => {
+              // 在这里添加你想执行的点击事件代码
+              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";
+
+</style>

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

@@ -0,0 +1,236 @@
+<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">
+      <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" style="height: 460px;overflow: hidden;overflow-y: scroll;">
+        </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.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) => {
+              // 在这里添加你想执行的点击事件代码
+              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";
+
+</style>

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

@@ -0,0 +1,236 @@
+<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">
+      <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" style="height: 460px;overflow: hidden;overflow-y: scroll;">
+        </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.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) => {
+              // 在这里添加你想执行的点击事件代码
+              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";
+
+</style>

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

@@ -0,0 +1,244 @@
+<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">
+      <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.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) => {
+              // 在这里添加你想执行的点击事件代码
+              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: 460px;
+  overflow: hidden;
+  overflow-y: scroll;
+}
+.listContain::-webkit-scrollbar{
+  display: none;
+}
+</style>

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

@@ -0,0 +1,244 @@
+<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">
+      <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) => {
+              // 在这里添加你想执行的点击事件代码
+              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: 460px;
+  overflow: hidden;
+  overflow-y: scroll;
+}
+.listContain::-webkit-scrollbar{
+  display: none;
+}
+</style>

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

@@ -0,0 +1,244 @@
+<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">
+      <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) => {
+              // 在这里添加你想执行的点击事件代码
+              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: 462px;
+  overflow: hidden;
+  overflow-y: scroll;
+}
+.listContain::-webkit-scrollbar{
+  display: none;
+}
+</style>

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

@@ -0,0 +1,244 @@
+<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">
+      <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) => {
+              // 在这里添加你想执行的点击事件代码
+              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;
+}
+</style>

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

@@ -0,0 +1,247 @@
+<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">
+      <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')
+              console.log(liSets)
+              // 在这里添加你想执行的点击事件代码
+              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;
+}
+</style>

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

@@ -0,0 +1,249 @@
+<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">
+      <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')
+              liSets.forEach(e => {
+                e.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;
+}
+</style>

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

@@ -0,0 +1,250 @@
+<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">
+      <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')
+              console.log(liSets)
+              liSets.forEach(e => {
+                e.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;
+}
+</style>

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

@@ -0,0 +1,250 @@
+<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">
+      <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')
+              console.log(liSets)
+              liSets.map(e => {
+                e.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;
+}
+</style>

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

@@ -0,0 +1,250 @@
+<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">
+      <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;
+}
+</style>

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

@@ -0,0 +1,253 @@
+<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);
+}
+</style>

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

@@ -0,0 +1,253 @@
+<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);
+}
+</style>

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

@@ -0,0 +1,253 @@
+<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);
+}
+</style>

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

@@ -0,0 +1,253 @@
+<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;
+}
+</style>

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

@@ -0,0 +1,253 @@
+<template>
+  <div class="body shh_body">
+    <div class="header">
+      <h1 class="header_title">松花湖景区通</h1>
+      <span class="time">{{ currentTime }}</span>
+    </div>
+    <div id="parkCar" class="parkinglot shh_part">
+      <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);
+}
+</style>

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

@@ -0,0 +1,253 @@
+<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;
+}
+</style>

.history/songhua-ui/vue.config_20240524154924.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

@@ -4,7 +4,7 @@
       <h1 class="header_title">松花湖景区通</h1>
       <span class="time">{{ currentTime }}</span>
     </div>
-    <div id="parkCar" class="shh_part">
+    <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">
@@ -31,7 +31,7 @@
     </div>
     <div class="selectDate">
       <div class="_moreMenu">
-        <ul id="myList">
+        <ul id="myList" class="listContain">
         </ul>
       </div>
     </div>
@@ -160,16 +160,25 @@ export default {
           }
           ul = document.getElementById('myList');
           // 循环数组中的每个项目
-          dataList.forEach(function (item) {
+          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', function () {
+            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中
@@ -230,4 +239,15 @@ export default {
 @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;
+}
 </style>

songhua-ui/vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:10001`,
+        target: `http://192.168.4.27:10001`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''