游船列表

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

@@ -110,6 +110,17 @@
             </div>
             <div class="regionIn_tab2 one" v-show="regionInShowOne">
               <div class="borp">
+                <div class="selectDate">
+                  <div class="_moreMenu" style="display: block;top: 34px;width: 120px;margin-right: -20px">
+                    <ul id="myList">
+<!--                      <li class="change">游船1</li>-->
+<!--                      <li>游船2</li>-->
+<!--                      <li>游船3</li>-->
+<!--                      <li>游船4</li>-->
+<!--                      <li>游船5</li>-->
+                    </ul>
+                  </div>
+                </div>
                 <!--游船视图页面-->
                     <div id="map" style="margin-top: 50px; width: 740px; height: 620px"></div>
 <!--                <baidu-map style="margin-top: 50px" :mapStyle="{style : 'midnight'}" class="region_tab2"-->
@@ -305,6 +316,7 @@ export default {
           let marker;
           let polyline;
           let opts;
+          let ul;
           let dataList = this.dataSource
           for (let i = 0; i < dataList.length; i++) {
             let pointArray = [];
@@ -332,22 +344,33 @@ export default {
             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("查询失败");
         }
       })
 
     },
-    selectShipRoute() {
-      getShipRoute().then(res => {
-        if (res.code == 200) {
-          this.dataSource = res.data
-          console.log("this.dataSource", this.dataSource)
-        } else {
-          this.$modal.msgError("查询失败");
-        }
-      })
-    },
+    // selectShipRoute() {
+    //   getShipRoute().then(res => {
+    //     if (res.code == 200) {
+    //       this.dataSource = res.data
+    //       console.log("this.dataSource", this.dataSource)
+    //     } else {
+    //       this.$modal.msgError("查询失败");
+    //     }
+    //   })
+    // },
 //https://echarts.apache.org/examples/zh/editor.html?c=line-stack
     chartRankOneMonthGet() {
       let option = {