松花湖备份1

songhua-ui/src/router/index.js

@@ -103,6 +103,14 @@ export const constantRoutes = [
       title: '松花湖'
     }
   },
+  {
+    path: '/songhuaIndex1',
+    name: 'songhuaIndex1',
+    component: () => import('@/views/index1/index'),
+    meta: {
+      title: '松花湖备份'
+    }
+  },
 ]
 
 // 动态路由，基于用户权限动态去加载

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

@@ -0,0 +1,121 @@
+<template>
+  <div class="body">
+    <div class="header">
+      <h1 class="header_title">松花湖景区通</h1>
+      <span class="time">2024年4月23日 星期二 上午 9:51:54</span>
+    </div>
+    <div class="borp">
+      <div style="display: block;">
+        停车场222222222222222
+      </div>
+      <div class="selectDate">
+        <div class="_moreMenu" style="display: block;top: 34px;width: 120px;margin-right: -20px">
+          <ul id="myList">
+          </ul>
+        </div>
+      </div>
+      <!--游船视图页面-->
+      <div id="map" style="margin-top: 50px; width: 800px; height: 800px"></div>
+    </div>
+  </div>
+</template>
+<script>
+
+import {getShipRoute} from "@/api/ship/shipMapping";
+
+
+export default {
+  name: "songhuaIndex",
+  data() {
+    return {
+      dataSource: [],
+      map: []
+    }
+  },
+  mounted() {
+  },
+  created() {
+    this.handler();
+  },
+  methods: {
+    //地图
+    handler() {
+      getShipRoute().then(res => {
+        if (res.code == 200) {
+          this.dataSource = res.data
+          this.map = new BMap.Map('map'); // 创建Map实例
+          this.map.centerAndZoom(new BMap.Point(126.607589, 43.802168), 11); // 初始化地图,设置中心点坐标和地图级别
+          this.map.enableScrollWheelZoom(true);
+          let mapStyle = {
+            style: 'midnight',
+          };
+          this.map.setMapStyle(mapStyle);
+          let marker;
+          let polyline;
+          let opts;
+          let ul;
+          let dataList = this.dataSource
+          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);
+
+          }
+          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元素添加到ul中
+            ul.appendChild(li);
+          });
+        } else {
+          this.$modal.msgError("查询失败");
+        }
+      })
+    },
+    tabClick() {
+      let that = this
+      setTimeout(that.taskJob(), 1000
+      )
+    },
+    taskJob() {
+      this.map.panTo(new BMap.Point(126.607581, 43.802168)); // 初始化地图,设置中心点坐标和地图级别
+    }
+  },
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/styles/shh_body.scss";
+@import "@/assets/styles/shh_index.scss";
+
+</style>