首页航线绘制完成

config/dev.env.js

@@ -17,7 +17,7 @@ module.exports = merge(prodEnv, {
   // VUE_APP_API_URL: '"http://10.10.150.237/"'
 
   VUE_APP_BASE_API: '"/api"',
-  VUE_APP_BASE_APIURL: '"http://10.0.90.70/api"',
+  VUE_APP_BASE_APIURL: '"http://ds.hzzxq.com/api"',
   VUE_APP_FULL_API: '"http://10.10.151.5:5555"',
   VUE_APP_BASE_API_FRONT: '"http://10.10.150.128:8080/satellitePub/pub/index.html"',
   VUE_APP_FILE_API: '"http://10.10.151.5:5555/archives"',

src/api/dataSearch.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 获取航次列表
+export function getDataSearch(query) {
+  return request({
+    url: '/search/page.htm',
+    method: 'get',
+    params: query
+  })
+}

src/api/home.js

@@ -58,7 +58,7 @@ export function saveVisits(data) {
 export function getVoyage() {
   return request({
     url: '/voyage/reg/page.htm',
-    method: 'post'
+    method: 'get'
   })
 }
 
@@ -70,10 +70,10 @@ export function getVoyage() {
 //     type: 'application/x-www-form-urlencoded'
 //   })
 // }
-export function getVoyageLine(voyage_id) {
+export function getVoyageLine(query) {
   return request({
-    url: '/voyage/navigation/list.htm?voyage_id=' + voyage_id,
+    url: '/voyage/navigation/list.htm',
     method: 'get',
-    type: 'application/x-www-form-urlencoded'
+    params: query
   })
 }

src/style/style.scss

@@ -38,7 +38,7 @@ header{
     background:black;
     // background-image: url(../static/images/banner@2x.png);
     overflow: hidden;
-    
+
   }
   #video-background {
     min-width: 100%;
@@ -59,7 +59,7 @@ header{
             img{
                 height:83px;
                 float: left;
-                
+
             }
             span{
                 font-size: 30px;
@@ -117,9 +117,9 @@ header{
           height: auto;
         }
     }
-  
+
     nav {
-    
+
         float: left;
         height: 66px;
         position: relative;
@@ -146,7 +146,7 @@ header{
         height: 100%;
         line-height: 90px;
         // padding-top:23px;
-        text-align: center; 
+        text-align: center;
     }
 
     nav ul ul li {
@@ -182,7 +182,7 @@ header{
         /* make this equal to the line-height of the links (specified below) */
         width: 180px;
         text-align: left;
-    
+
     }
     nav>ul li>ul>li>a{
         padding-left:10px;
@@ -338,7 +338,7 @@ header{
       height:10px;
       margin-left:7px;
     }
-    
+
     .introd{
       background: white;
       margin-top:40px;
@@ -356,17 +356,17 @@ header{
         }
       }
     }
-  
 
-    
+
+
     .news_t{
       .content_t{
         background: white;
         padding:30px;
-      } 
+      }
       .news{
         margin-bottom:24px;
-        
+
         li{
           padding-bottom:30px;
           .fl{
@@ -389,7 +389,7 @@ header{
               color:#767676;
               padding-bottom:48px;
               line-height: 20px;
-  
+
             }
             & p:nth-of-type(3){
               color:#a5a5a5;
@@ -399,7 +399,7 @@ header{
         ul li:nth-of-type(3){
           padding-bottom:0;
         }
-       
+
       }
       .quicklook{
         .content_t>div{
@@ -433,8 +433,8 @@ header{
           }
         }
       }
-     
+
-     
+
     }
     .inst{
       // background:url(../static/images/inst.png) no-repeat center;
@@ -463,16 +463,16 @@ header{
 
 
     }
-    
+
     .left50{
         border-left:8px solid #1f2023;
     }
 
-   
+
 
     .aboutasos{
       line-height: 20px;
-    
+
         .imgBox{
             width:100%;
             float: left;
@@ -508,7 +508,7 @@ header{
         .title{
           padding:0 4px;
         }
-       
+
         li{ overflow: hidden;
             height: auto;
             // list-style-type:disc;
@@ -516,7 +516,7 @@ header{
             padding-right:20px;
             margin-left:10px;
             border-bottom:1px solid rgb(81, 81, 81);
-        
+
         }
         li span:nth-of-type(1){
             float: left;
@@ -524,8 +524,8 @@ header{
         li span:nth-of-type(2){
             float: right;
         }
-    
+
-        
+
     }
     .PublishTrends ul li:nth-last-of-type(1){
         border-bottom:0
@@ -546,7 +546,7 @@ header{
         margin-bottom: 0px;
         // border-bottom:1px solid #ffffff;
       }
-    
+
         h3{
           color: #169bd5;
         }
@@ -554,7 +554,7 @@ header{
           position: relative;
           float: left;
           &:hover{
-            
+
           }
           .el-icon-paperclip{
             padding-right:2px;
@@ -613,7 +613,7 @@ header{
             i{
                 font-size: 15px;
             }
-            
+
         }
     }
 }
@@ -663,7 +663,7 @@ header{
           text-align: center;
       }
     }
-   
+
    .post-title{
        font-size: 24px;
        margin-top: 0;
@@ -706,7 +706,7 @@ header{
     height:100%;
     margin-right: 20px;
     padding-bottom: 9999px;
-    margin-bottom: -9999px; 
+    margin-bottom: -9999px;
 
     ul{
       padding:20px 0 10px 0;
@@ -715,7 +715,7 @@ header{
         padding:14px 20px;
         cursor: pointer;
       }
-      
+
     }
     .form{
       padding:20px 20px;
@@ -760,7 +760,7 @@ header{
           div{
             background-color: #898989;
             padding:10px 10px;
-            
+
           }
           padding:0;
           border:1px solid rgb(255, 255, 255);
@@ -769,7 +769,7 @@ header{
         }
       }
     }
-    
+
   }
   .content>div{
     min-height:500px;
@@ -790,7 +790,7 @@ header{
   img{
     width:22px;
     margin-bottom:-5px;
-    margin-right:10px;  
+    margin-right:10px;
   }
   p{
     padding-bottom:12px;
@@ -805,7 +805,7 @@ header{
 .footer {
     width: 100%;
     // background: #02144E;
-   
+
     overflow: hidden;
     .footer_main {
       overflow: hidden;
@@ -819,15 +819,15 @@ header{
     .footer_logo img {
       width: 76px;
     }
-  
+
     .footer_biao img {
       width: 76px;
     }
-  
+
     .company_erweima img {
       width: 100px;
     }
-  
+
     .footer_main div {
       float: left;
       font-size: 12px;
@@ -869,7 +869,7 @@ header{
 
   .footer_chat {
     width:23%;
-  } 
+  }
 }
 @media (min-width: 1200px){
     .footer_main div {
@@ -890,18 +890,18 @@ header{
       width:26%;
     }
 }
-  
+
 
 .theLatestSun{
   .el-select .el-input.is-focus .el-input__inner,.theLatestSun li .selectBtn .el-input__inner{
     color:white;
   }
-  
+
   ul{
     // display: flex;
     margin-left:10px;
   }
-  
+
   li{
     background-color: black;
     float:left;
@@ -937,7 +937,7 @@ header{
         color:white;
       }
     }
-    
+
   }
   ul li:nth-of-type(3n){
     margin-right:0
@@ -978,9 +978,9 @@ header{
       li{
         padding:0;
         display: flex;
-     
+
         // line-height: 40px;
-       
+
       }
       .orange span{
         background-color: #e6770f;
@@ -991,7 +991,7 @@ header{
         // line-height: 40px;
         display: inline-block;
         width:20px;
-        
+
       }
 
       .name{
@@ -1004,7 +1004,7 @@ header{
         // text-overflow: ellipsis;
       }
     }
-  } 
+  }
   .cme .box{
     background-color: #c7c7c7;
     margin:14px 0 10px 0;
@@ -1019,19 +1019,19 @@ header{
     padding:12px 0 10px 0;
     background-color: #c7c7c7;
     li{
-    
+
       padding:8px 26px;
       cursor: pointer;
-    
+
     }
     .no{
       width:30px;
       display: inline-block;
     }
-    
+
   }
-  
+
-}  
+}
 .Q1BrowseData{
   background-color: #2b2c30;
   margin-left:14px;
@@ -1106,7 +1106,7 @@ header{
   .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner{
     width:300px;
     }
-  
+
 }
 
 
@@ -1132,7 +1132,7 @@ header{
     // display: flex;
     margin-left:10px;
   }
-  
+
   li{
     background-color: black;
     float:left;
@@ -1161,7 +1161,7 @@ header{
         width:100%;
       }
     }
-    
+
   }
   ul li:nth-of-type(2n){
     margin-right:0
@@ -1182,7 +1182,7 @@ header{
   li{
     list-style-type: disc;
   }
- 
+
   .introduceIndex{
     padding-top: 20px;
     display: flex;
@@ -1199,7 +1199,7 @@ header{
       overflow: auto;
       background-color: #2b2c30;
       color:white;
-      
+
     }
     .el-tree-node__content:hover{
       background-color:#e6770f
@@ -1307,7 +1307,7 @@ header{
     padding-bottom: 20px;
     }
   }
-  
+
 }
 .container_a {
   padding-top: 90px;
@@ -1355,7 +1355,7 @@ header{
   }
 }
 @media (min-width: 992px){
-  
+
 
 }
 
@@ -1387,10 +1387,10 @@ header{
           height: 40px;
         }
 
-        .el-input {
+        //.el-input {
-          width: 50%;
+        //  width: 50%;
-          height: 40px;
+        //  height: 40px;
-        }
+        //}
         .el-button {
           width: 12%;
           font-size: 20px;

src/views/dataSearch.vue

@@ -1,85 +1,116 @@
 <template>
   <div class="shuju">
     <div class="shuju_con">
-      <div v-show="showa == false" class="left">
+      <div v-show="show == false" class="left">
         <div class="left1">
           <div class="xiala">
-            <el-select v-model="value" placeholder="平台类型">
+            <el-select v-model="searchTypeValue" placeholder="">
               <el-option
-                v-for="item in options"
+                v-for="(item, index) in searchType"
-                :key="item.value"
+                :key="index"
-                :label="item.label"
+                :label="item"
-                :value="item.value"
+                :value="item"
               />
             </el-select>
           </div>
-          <el-input v-model="type_b" placeholder="" />
+          <el-input v-model="searchValue" placeholder="" />
           <el-button
             class="sousuo"
             type="primary"
             icon="el-icon-search"
+            @click="getList"
           />
           <el-button
             class="caidan"
             type="default"
             icon="el-icon-s-operation"
-            @click="openList(0,'列表')"
+            @click="openDialog"
           />
         </div>
-        <div class="left2">
-          <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type" @close="handleClose(tag)" @click="tosearch(tag.name)">
-            {{ tag.name }}
-          </el-tag>
-        </div>
         <div class="left3">
-          <p>搜索结果</p>
+          <el-radio-group v-model="radio">
-          <div class="left3_1">
+            <el-radio label="数据样品集">数据样品集</el-radio>
-            <el-radio-group v-model="radio">
+            <el-radio label="航次">航次</el-radio>
-              <el-radio :label="3">数据样品</el-radio>
+          </el-radio-group>
-              <el-radio :label="6">航次</el-radio>
-            </el-radio-group>
-          </div>
-          <div class="left3_2">
-            <span>排序:</span>
-            <el-select v-model="value1" placeholder="航次名称">
-              <el-option
-                v-for="item in options1"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </div>
         </div>
-        <div class="left4">
+        <div class="left4" v-if="radio == '数据样品集'">
-          <div v-for="(item,index) in detail" :key="index" class="left4_1" @click="turnDeatilPage(item)">
+          <div v-for="(item,index) in dataList" :key="index" class="left4_1" @click="turnDeatilPage(item)">
             <div class="left4_top">
-              <p>{{ item.title }}</p>
+              <p>{{ item.dataset_name }} <span class="mileage">{{item.file_total}}</span></p>
-              <span>{{ item.year }}</span>
+              <span class="org">{{ item.create_time }}</span>
             </div>
             <div class="left4_list">
               <div class="list1">
                 <p>航次：</p>
-                <span>{{ item.hangci }}</span>
+                <span>{{ item.voyage_name }}</span>
               </div>
               <div class="list1">
-                <p>平台：</p>
+                <p>平台类型：</p>
-                <span>{{ item.pingtai }}</span>
+                <span>{{ item.platform_type }}</span>
               </div>
 
               <div class="list1">
-                <p>设备：</p>
+                <p>平台名称：</p>
-                <span>{{ item.shebei }}</span>
+                <span>{{ item.platform_name }}</span>
               </div>
 
               <div class="list1">
-                <p>数据样品：</p>
+                <p>潜次序号：</p>
-                <span>{{ item.shuju }}</span>
+                <span>{{ item.diving_sn }}</span>
               </div>
 
+              <div class="list1">
+                <p>设备类型：</p>
+                <span>{{ item.equipment_type }}</span>
+              </div>
+
+              <div class="list1">
+                <p>数据样品类型：</p>
+                <span>{{ item.data_type }}</span>
+              </div>
+
+              <div class="list1">
+                <p>作业类型：</p>
+                <span>{{ item.job_type }}</span>
+              </div>
+
+            </div>
+          </div>
+        </div>
+        <div class="left4" v-if="radio == '航次'">
+          <div v-for="(item,index) in dataList" :key="index" class="left4_1" @click="turnDeatilPage(item)">
+            <div class="left4_top">
+              <p>{{ item.voyage_name }} <span class="mileage">{{item.voyage_mileage}}海里</span></p>
+              <span class="org">{{ item.funding_org }}</span>
+            </div>
+            <div class="left4_list">
+              <div class="list1">
+                <p>科考船舶：</p>
+                <span>{{ item.ship_name }}</span>
+              </div>
               <div class="list1">
                 <p>航次首席：</p>
-                <span>{{ item.shouxi }}</span>
+                <span>{{ item.voyage_officer }}</span>
+              </div>
+
+              <div class="list1">
+                <p>离港日期：</p>
+                <span>{{ item.voyage_start_date.slice(0,10) }}</span>
+              </div>
+
+              <div class="list1">
+                <p>返港日期：</p>
+                <span>{{ item.voyage_end_date.slice(0,10) }}</span>
+              </div>
+
+              <div class="list1">
+                <p>项目编号：</p>
+                <span>{{ item.funding_code }}</span>
+              </div>
+
+              <div class="list1">
+                <p>是否涉密：</p>
+                <span>{{ item.serect_status == 'Active' ? '是' : '否' }}</span>
               </div>
 
             </div>
@@ -89,247 +120,211 @@
           <img src="../../static/images/arrow_nav.png" alt="" @click="shousuo">
         </div>
       </div>
-      <div v-show="showa" class="arrow_r" @click="toshow">
+      <div v-show="show" class="arrow_r" @click="toshow">
         <img src="../../static/images/arrow_nav1.png" alt="">
       </div>
       <div class="right">
-        <GMRT :is-line="line" />
+        <div id="cesiumContainerData" style="height: 100%;width:100%;" />
-        <!-- <baidu-map
-          :center="center"
-          :zoom="zoom"
-          map-type="BMAP_SATELLITE_MAP"
-          style="width: 100%; height: 100%"
-          @ready="handler"
-        >
-          <bm-marker
-            v-for="(item, index) in list"
-            :key="index"
-            :position="item.dingwei"
-            :dragging="true"
-            :icon="item.pic"
-            @click="totap(item)"
-          >
-            <bm-label
-              :content="item.content"
-              :offset="{ width: -35, height: 30 }"
-            />
-          </bm-marker>
-        </baidu-map> -->
       </div>
     </div>
+<!--  航次名称弹窗-->
     <el-dialog
-      :title="dialogTitle"
+      title="请选择航次"
-      :visible.sync="showListDialog"
+      :visible.sync="dialog1"
-      :close-on-click-modal="false"
-      :height="300"
-      :append-to-body="true"
       width="800px"
-    >
+      :before-close="handleClose1">
-      <list-dialog v-if="showListDialog" :choose-data="chooseData" @handleClose="closeListForm" @handleConfirm="confirmListForm" />
+      <el-table ref="tableData" stripe border :data="tableData1" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" height="600px">
+        <el-table-column type="index" width="50"/>
+        <el-table-column prop="voyage_name" label="航次名称" />
+        <el-table-column prop="ship_name" label="科考船舶" />
+        <el-table-column prop="voyage_start_date" label="离岗日期" />
+        <el-table-column prop="voyage_end_date" label="返岗日期" />
+        <el-table-column prop="voyage_officer" label="首席" />
+        <el-table-column prop="description" label="参航人数" />
+        <el-table-column prop="funding_org" label="资助机构" />
+        <el-table-column prop="funding_code" label="资助编号" />
+      </el-table>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import ListDialog from './listDialog.vue'
+import { getDataSearch } from '../api/dataSearch'
-import GMRT from './GMRT.vue'
+const Cesium = window.Cesium
 export default {
   name: 'Shuju',
-  components: {
-    ListDialog,
-    GMRT
-  },
   data() {
     return {
-      line: true,
+      show: false,
-      showListDialog: false,
+      viewer: null,
-      chooseData: '',
+      color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE],
-      dialogTitle: '',
+      searchType: ['航次名称', '平台类型', '平台名称', '设备类型', '数据样品类型', '数据集名称', '航次首席'],
-      type_b: '',
+      searchTypeValue: '航次名称',
-      showa: false,
+      radio: '航次',
-      center: { lng: 118.962643, lat: 35.618913 },
+      dataList: [],
-      zoom: 3,
+      searchValue: '',
-      list: [
+      dialog1: false,
-        {
+      queryData1: {
-          dingwei: {
+        pageSize: 20,
-            lng: 119.054629,
+        pageNum: 1
-            lat: 36.373917
+      },
-          },
+      tableData1: [],
-          content: 'DY31-II-W1306-BC',
+    }
-          pic: {
+  },
-            url: 'http://shipin.hey17.com/dingwei1.png',
+  created() {
-            size: { width: 16, height: 21 }
+  },
-          }
+  mounted() {
-        },
+    this.initCesium()
-        {
+  },
-          dingwei: {
+  watch: {
-            lng: 119.919302,
+    radio() {
-            lat: 34.226755
+      this.getList()
-          },
-          content: 'DY31-II-W1306-BC',
-          pic: {
-            url: 'http://shipin.hey17.com/dingwei1.png',
-            size: { width: 16, height: 21 }
-          }
-        },
-        {
-          dingwei: {
-            lng: 119.560555,
-            lat: 34.421374
-          },
-          content: 'DY31-II-W1306-BC',
-          pic: {
-            url: 'http://shipin.hey17.com/dingwei1.png',
-            size: { width: 16, height: 21 }
-          }
-        },
-        {
-          dingwei: {
-            lng: 116.442213,
-            lat: 35.556921
-          },
-          content: 'DY31-II-W1306-BC',
-          pic: {
-            url: 'http://shipin.hey17.com/dingwei1.png',
-            size: { width: 16, height: 21 }
-          }
-        }
-      ],
-      radio: 3,
-      options: [
-        {
-          value: '选项1',
-          label: '类型1'
-        },
-        {
-          value: '选项2',
-          label: '类型2'
-        },
-        {
-          value: '选项3',
-          label: '类型3'
-        },
-        {
-          value: '选项4',
-          label: '类型4'
-        },
-        {
-          value: '选项5',
-          label: '类型5'
-        }
-      ],
-      value: '',
-      options1: [
-        {
-          value: '选项1',
-          label: '航次1'
-        },
-        {
-          value: '选项2',
-          label: '航次2'
-        },
-        {
-          value: '选项3',
-          label: '航次3'
-        },
-        {
-          value: '选项4',
-          label: '航次4'
-        },
-        {
-          value: '选项5',
-          label: '航次5'
-        }
-      ],
-      value1: '',
-      tags: [
-        { name: '探索一号', type: 'info' },
-        { name: '船载CTD', type: 'info' }
-      ],
-      detail: [
-        {
-          title: '岩石SY510-TXS-YS-01',
-          year: '2012',
-          hangci: 'TS-14',
-          pingtai: '着陆器',
-          shebei: '机械手',
-          shuju: '岩石',
-          shouxi: 'MERY'
-        },
-        {
-          title: '岩石SY510-TXS-YS-01',
-          year: '2012',
-          hangci: 'TS-14',
-          pingtai: '着陆器',
-          shebei: '机械手',
-          shuju: '岩石',
-          shouxi: 'MERY'
-        },
-        {
-          title: '岩石SY510-TXS-YS-01',
-          year: '2012',
-          hangci: 'TS-14',
-          pingtai: '着陆器',
-          shebei: '机械手',
-          shuju: '岩石',
-          shouxi: 'MERY'
-        }
-      ]
     }
   },
   methods: {
+    // 获取左侧航次列表
+    getList() {
+      this.dataList = []
+      const params = {
+        search_type: this.searchTypeValue,
+        return_type: this.radio,
+        search_value: this.searchValue,
+        limit: 20,
+        start: 0,
+        group: 10
+      }
+      getDataSearch(params).then(res => {
+        console.log(res)
+        this.dataList = res.page.records
+      })
+    },
+    // 初始化cesium
+    initCesium() {
+      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
+      this.viewer = new Cesium.Viewer('cesiumContainerData', {
+        sceneMode: Cesium.SceneMode.SCENE2D,
+        shadows: false,
+        timeline: false,
+        baseLayerPicker: false,
+        fullscreenButton: false,
+        selectionIndicator: false,
+        homeButton: false,
+        animation: false,
+        infoBox: false,
+        geocoder: false,
+        navigationHelpButton: false
+      })
+      this.viewer._cesiumWidget._creditContainer.style.display = 'none'
+      this.viewer.scene.sun.show = false
+      this.viewer.scene.moon.show = false
+      this.viewer.scene.fog.enabled = false
+      this.viewer.scene.skyAtmosphere.show = false
+      this.viewer.scene.sun.show = false
+      this.viewer.scene.skyBox.show = false
+      this.viewer.scene.globe.enableLighting = false
+      this.viewer.shadowMap.darkness = 0.8
+      this.viewer.scene._sunBloom = false
+      this.viewer.scene.globe.showGroundAtmosphere = false
+      // 叠加叠加影像服务
+      // const earthMap = new Cesium.WebMapTileServiceImageryProvider(
+      //   {
+      //     url: 'http://124.16.219.154:8080/geoserver/gwc/service/wmts/rest/ne:gmrt_20231018/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg',
+      //     layer: 'ne:gmrt_20231018',
+      //     style: 'default',
+      //     tileMatrixSetID: 'EPSG:4326',
+      //     format: 'image/jpeg',
+      //     tilingScheme: new Cesium.GeographicTilingScheme()
+      //   }
+      // )
+      // this.viewer.imageryLayers.addImageryProvider(earthMap)
+      // 增加海岸线  /geoserver/gwc/service/wmts/rest/ne:GSHHS_f_L1/EPSG:4326/EPSG:4326:{z}/{y}/{x}?format=image/png
+      // const coastline = new Cesium.WebMapTileServiceImageryProvider(
+      //   {
+      //     url: 'http://124.16.219.154:8080/geoserver/gwc/service/wmts/rest/ne:GSHHS_f_L1/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
+      //     layer: 'ne:GSHHS_f_L1',
+      //     style: 'default',
+      //     tileMatrixSetID: 'EPSG:4326',
+      //     format: 'image/png',
+      //     tilingScheme: new Cesium.GeographicTilingScheme()
+      //   }
+      // )
+      // this.viewer.imageryLayers.addImageryProvider(coastline)
+      // 沉船摄影拼接图 /geoserver/gwc/service/wmts/rest/ne:No1ShipWreck_UP/EPSG:4326/EPSG:4326:{z}/{y}/{x}?format=image/png
+      // const shipline = new Cesium.WebMapTileServiceImageryProvider(
+      //   {
+      //     url: 'http://124.16.219.154:8080/geoserver/gwc/service/wmts/rest/ne:No1ShipWreck_UP/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
+      //     layer: 'ne:No1ShipWreck_UP',
+      //     style: 'default',
+      //     tileMatrixSetID: 'EPSG:4326',
+      //     format: 'image/png',
+      //     tilingScheme: new Cesium.GeographicTilingScheme()
+      //   }
+      // )
+      // this.viewer.imageryLayers.addImageryProvider(shipline)
+    },
+    /* cesium 绘制线 */
+    drawLine(index, id, degreeArr) {
+      this.viewer.entities.add({
+        id: id,
+        polyline: { //polyline折线实体
+          positions: Cesium.Cartesian3.fromDegreesArray(degreeArr),//位置
+          width: 5,//折线宽度
+          cusColor: this.color[index],
+          material: new Cesium.PolylineArrowMaterialProperty(
+            this.color[index]
+            //Cesium.Color.BLUE
+            // glowPower : 0.2,//发光的强度，值为线宽的百分比(0-1.0)
+            // color:Cesium.Color.BLUE //发光的颜色
+          ),//材质
+          clampToGround: true, //地表层高度模式,
+          zIndex: 1000
+        }
+      })
+      this.viewer.camera.setView({
+        // 指定相机位置
+        destination: Cesium.Cartesian3.fromDegrees(degreeArr[0], degreeArr[1])
+      })
+      this.autoZoom()
+    },
+    // 创建点位
+    setPoint(id, degree, color) {
+      this.viewer.entities.add({
+        id: id,
+        position: Cesium.Cartesian3.fromDegrees(degree),
+        point: {
+          pixelSize: 20, // 点像素大小
+          color: color
+        }
+      })
+      // this.viewer.zoomTo(point)
+    },
+    // 清除所有实体
+    clearAll() {
+      this.viewer.entities.removeAll()
+    },
+    // 自动跳转到实体位置
+    autoZoom(){
+      this.viewer.zoomTo(this.viewer.entities)
+    },
     turnDeatilPage() {
       this.$router.push({ name: 'dataDetail' })
     },
-    handleClose(tag) {
-      this.tags.splice(this.tags.indexOf(tag), 1)
-    },
-    tosearch(e) {
-      this.input = e
-    },
-    openList(value, title) {
-      this.dialogTitle = title
-      this.showListDialog = true
-    },
-    // 关闭列表
-    closeListForm() {
-      this.showListDialog = false
-      // this.init()
-    },
-    // 保存列表
-    confirmListForm(val) {
-      this.showListDialog = false
-      if (val) {
-        this.type_b = val
-      }
-      // this.init()
-    },
-    handler({ BMap, map }) {
-      console.log(BMap, map)
-      this.center.lng = 116.404
-      this.center.lat = 39.915
-      this.zoom = 6
-    },
-    totap(e) {
-      console.log(e)
-      e.pic.url = 'http://shipin.hey17.com/dingwei_a.png'
-      e.pic.size.width = 22
-      e.pic.size.height = 28
-      for (var i = 0; i < this.list.length; i++) {
-        if (this.list[i] != e) {
-          this.list[i].pic.url = 'http://shipin.hey17.com/dingwei1.png'
-          this.list[i].pic.size.width = 16
-          this.list[i].pic.size.height = 21
-        }
-      }
-    },
-
     shousuo() {
-      this.showa = true
+      this.show = true
     },
     toshow() {
-      this.showa = false
+      this.show = false
-    }
+    },
+    // 打开搜素弹窗
+    openDialog() {
+      if (this.searchTypeValue == '航次名称') {
+        this.dialog1 = true
+      }
+    },
+    // 航次名称弹窗
+    handleClose1() {
+      this.dialog1 = false
+    },
   }
 }
 </script>
@@ -346,11 +341,11 @@ export default {
     justify-content: center;
     .left {
       position: relative;
-      width: 30%;
+      width: 570px;
       height: 100%;
       background: #fff;
       box-sizing: border-box;
-      padding: 50px;
+      padding: 50px 30px;
       display: flex;
       flex-direction: column;
       .left1 {
@@ -359,13 +354,9 @@ export default {
         display: flex;
         align-items: center;
         .xiala {
-          width: 25%;
+          width: 80%;
-          height: 40px;
-        }
-
-        .el-input {
-          width: 50%;
           height: 40px;
+          margin-right: 15px;
         }
         .el-button {
           width: 12%;
@@ -390,50 +381,26 @@ export default {
         }
       }
       .left3 {
-        padding-bottom: 10px;
+        padding: 10px 0;
         width: 100%;
         margin-top: 10px;
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        justify-content: center;
         border-bottom: 1px solid #e5e5e5;
-        p {
-          font-size: 16px;
-          color: #333;
-        }
-        .left3_1 {
-          width: 40%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          .el-radio-group{
-            display: flex;
-            align-items: center;
-          }
-        }
-        .left3_2 {
-          width: 30%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          span {
-            font-size: 15px;
-            white-space: nowrap;
-          }
-          .el-select {
-            margin-left: 5px;
-            width: 100px;
-            .el-input {
-              .el-input__inner {
-                border: none;
-              }
-            }
-          }
-        }
       }
       .left4{
         width: 100%;
-        height: auto;
+        height: 700px;
+        overflow-y: scroll;
+        &::-webkit-scrollbar {
+          width: 5px; /* 保持一个最小的宽度 */
+          background-color: transparent; /* 透明背景 */
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background-color: transparent; /* 滚动条滑块也设置为透明 */
+        }
         .left4_1{
           padding:20px 0;
           width: 100%;
@@ -456,10 +423,16 @@ export default {
               font-size: 16px;
               color: #212121;
               font-weight: bold;
+              display: flex;
+              justify-content: space-between;
+              .mileage {
+                font-size: 12px;
+                color: #909fa7;
+              }
             }
-            span{
+            .org {
-              font-size: 16px;
+              font-size: 12px;
-              color: #666;
+              color: #999999;
             }
           }
           .left4_list{
@@ -473,11 +446,11 @@ export default {
               align-items: center;
               margin-bottom: 10px;
               p{
-                font-size: 16px;
+                font-size: 14px;
                 color: #999;
               }
               span{
-                font-size: 16px;
+                font-size: 14px;
                 color: #212121;
               }
             }

src/views/home.vue

@@ -67,18 +67,18 @@
         <div class="daohang">
           <ul>
             <li>
-              <a href="###" @click="onLine">All</a>
+              <a href="###" @click="onAll">All</a>
             </li>
             <li>
               <a href="###" @click="clearAll">clear</a>
             </li>
             <li
-              v-for="(item, index) in didian"
+              v-for="(item, index) in voyageList"
               :key="index"
               :class="chooseIndex == index ? 'active' : ''"
-              @click="toChoose(index)"
+              @click="toChoose(index, item)"
             >
-              <a href="###">{{ item.name }}</a>
+              <a href="###">{{ item.voyage_name }}</a>
             </li>
           </ul>
         </div>
@@ -213,7 +213,7 @@
 </template>
 
 <script>
-import { getVoyage } from '../api/home'
+import { getVoyage, getVoyageLine } from '../api/home'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/swiper-bundle.css'
 const Cesium = window.Cesium
@@ -261,21 +261,8 @@ export default {
           }
         }
       },
-      chooseIndex: 0,
+      chooseIndex: -1,
-      didian: [
+      voyageList: [],
-        { name: 'TS2-17' },
-        { name: 'TS2-18' },
-        { name: 'TS2-19' },
-        { name: 'TS2-20' },
-        { name: 'TS2-21' },
-        { name: 'TS2-22' },
-        { name: 'TS2-23' },
-        { name: 'TS2-24' },
-        { name: 'TS2-25' },
-        { name: 'TS2-26' },
-        { name: 'TS2-27' },
-        { name: 'TS2-28' }
-      ],
       newsList: [
         {
           title:
@@ -320,7 +307,8 @@ export default {
           date: '2023-03'
         }
       ],
-      viewer: null
+      viewer: null,
+      color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE]
     }
   },
 
@@ -339,7 +327,22 @@ export default {
     // 查询航次列表
     getVoyageList() {
       getVoyage().then(res => {
-        console.log(res)
+        const voyageList = res.page.records
+        voyageList.map(item => {
+          // 获取航次坐标点
+          getVoyageLine({
+            voyage_id: item.tsy_id
+          }).then(res2 => {
+            // 格式化坐标点
+            const points = []
+            res2.array.forEach(point => {
+              points.push(Number(point.nav_lon), Number(point.nav_lat))
+            })
+            // 将坐标点添加到航次列表中
+            item.points = points
+          })
+        })
+        this.voyageList = voyageList
       })
     },
     // 初始化cesium
@@ -406,20 +409,16 @@ export default {
       // )
       // this.viewer.imageryLayers.addImageryProvider(shipline)
     },
-    onLine() {
-      this.drawLine('sss1', [130,30,129,31], Cesium.Color.WHEAT)
-      this.drawLine('sss2', [130,28,129,30], Cesium.Color.BLUE)
-    },
     /* cesium 绘制线 */
-    drawLine(id, degreeArr, color) {
+    drawLine(index, id, degreeArr) {
       this.viewer.entities.add({
         id: id,
         polyline: { //polyline折线实体
           positions: Cesium.Cartesian3.fromDegreesArray(degreeArr),//位置
           width: 5,//折线宽度
-          cusColor:color,
+          cusColor: this.color[index],
           material: new Cesium.PolylineArrowMaterialProperty(
-            color
+            this.color[index]
             //Cesium.Color.BLUE
             // glowPower : 0.2,//发光的强度，值为线宽的百分比(0-1.0)
             // color:Cesium.Color.BLUE //发光的颜色
@@ -454,9 +453,19 @@ export default {
     autoZoom(){
       this.viewer.zoomTo(this.viewer.entities)
     },
+    // 全部轨迹
+    onAll() {
+      this.clearAll()
+      this.chooseIndex = -1
+      this.voyageList.forEach((item, index) => {
+        this.drawLine(index, item.tsy_id, item.points)
+      })
+    },
     // 选择轨迹
-    toChoose(i) {
+    toChoose(i, item) {
+      this.clearAll()
       this.chooseIndex = i
+      this.drawLine(i, item.tsy_id, item.points)
     },
     // 页面跳转
     turnPage(val, a) {