数据检索航线绘制完成

config/prod.env.js

@@ -11,8 +11,10 @@ module.exports = {
   // VUE_APP_BASE_APIURL: '"http://120.48.105.88/api"', // 生产环境
   // VUE_APP_BASE_API: '"http://120.48.105.88/api"', // 生产环境
   // VUE_APP_BASE_APIURL: '"http://120.48.105.88/api"', // 生产环境
-  VUE_APP_BASE_API: '"/api"', // 生产环境
+  // VUE_APP_BASE_API: '"/api"', // 生产环境
-  VUE_APP_BASE_APIURL: '"http://1.95.42.191:8080/api"', // 生产环境
+  // VUE_APP_BASE_APIURL: '"http://1.95.42.191:8080/api"', // 生产环境
+  VUE_APP_BASE_API: '"/api"',
+  VUE_APP_BASE_APIURL: '"http://ds.hzzxq.com/api"',
   VUE_APP_FULL_API: '"http://10.10.151.3:5555"',
   VUE_APP_BASE_API_FRONT: '"http://10.10.150.128:8080/satellitePub/pub/index.html"',
   VUE_APP_CAS_LOGIN_FRONT: '"http://10.10.150.237/login?service=http://10.10.151.3:5555/api/login/cas?sign=asos_client"',

src/api/dataSearch.js

@@ -8,3 +8,66 @@ export function getDataSearch(query) {
     params: query
   })
 }
+
+// 获取航次名称列表
+export function voyageNameList(query) {
+  return request({
+    url: '/voyage/reg/page.htm',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取平台类型列表
+export function PlatformTypeList(query) {
+  return request({
+    url: '/dict/platform/page.htm',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取设备类型列表
+export function equipmentTypeList(query) {
+  return request({
+    url: '/dict/equipment/page.htm',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取数据样品类型列表
+export function dataTypeList(query) {
+  return request({
+    url: '/dict/data/page.htm',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取数据样品集点位
+export function dataPoints(query) {
+  return request({
+    url: '/sample/dataset/track/list.htm',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取数据样品测线列表
+export function sampleLineList(query) {
+  return request({
+    url: '/sample/line/list.htm',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取数据样品站位列表
+export function sampleStationList(query) {
+  return request({
+    url: '/sample/station/list.htm',
+    method: 'get',
+    params: query
+  })
+}

src/views/dataSearch.vue

@@ -18,9 +18,10 @@
             class="sousuo"
             type="primary"
             icon="el-icon-search"
-            @click="getList"
+            @click="getSearch"
           />
           <el-button
+            v-if="menuShow"
             class="caidan"
             type="default"
             icon="el-icon-s-operation"
@@ -34,11 +35,20 @@
           </el-radio-group>
         </div>
         <div class="left4" v-if="radio == '数据样品集'">
-          <div v-for="(item,index) in dataList" :key="index" class="left4_1" @click="turnDeatilPage(item)">
+          <div v-for="(item,index) in dataList" :key="index" class="left4_1" @click="openList(item)">
             <div class="left4_top">
               <p>{{ item.dataset_name }} <span class="mileage">{{item.file_total}}</span></p>
               <span class="org">{{ item.create_time }}</span>
             </div>
+            <ul v-if="currenId == item.tsy_id">
+              <li
+                :class="sample.tsy_id == currenSample ? 'bg-color' : ''"
+                class="sample"
+                v-for="(sample, i) in item.sampleArray"
+                :key="i"
+                @click="onSample(sample)"
+              >{{sample.sample_name}}</li>
+            </ul>
             <div class="left4_list">
               <div class="list1">
                 <p>航次：</p>
@@ -127,29 +137,138 @@
         <div id="cesiumContainerData" style="height: 100%;width:100%;" />
       </div>
     </div>
-<!--  航次名称弹窗-->
+    <!--  航次名称弹窗-->
     <el-dialog
       title="请选择航次"
       :visible.sync="dialog1"
-      width="800px"
+      width="1000px"
       :before-close="handleClose1">
-      <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 ref="tableData1" stripe border :data="tableData1" @selection-change="handleSelectionChange" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
-        <el-table-column type="index" width="50"/>
+        <el-table-column type="index" label="#" width="50"/>
+        <el-table-column type="selection" width="50" align="center" />
         <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_start_date" label="离岗日期">
-        <el-table-column prop="voyage_end_date" label="返岗日期" />
+          <template slot-scope="scope">
+            <span>{{ scope.row.voyage_start_date.slice(0,10) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="voyage_end_date" label="返岗日期">
+          <template slot-scope="scope">
+            <span>{{ scope.row.voyage_end_date.slice(0,10) }}</span>
+          </template>
+        </el-table-column>
         <el-table-column prop="voyage_officer" label="首席" />
-        <el-table-column prop="description" label="参航人数" />
+        <el-table-column prop="member_total" label="参航人数" />
         <el-table-column prop="funding_org" label="资助机构" />
         <el-table-column prop="funding_code" label="资助编号" />
       </el-table>
+      <div class="pagination-box">
+        <el-pagination
+          background
+          :page-sizes="[10, 20, 30]"
+          :page-size="params1.limit"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total1"
+          :current-page="pageNum1"
+          @size-change="handleSizeChange1"
+          @current-change="handleCurrentChange1"
+        />
+      </div>
+    </el-dialog>
+    <!--  平台类型弹窗-->
+    <el-dialog
+      title="请选择平台"
+      :visible.sync="dialog2"
+      width="1200px"
+      :before-close="handleClose2">
+      <el-table ref="tableData2" stripe border :data="tableData2" @selection-change="handleSelectionChange" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
+        <el-table-column type="index" label="#" width="50"/>
+        <el-table-column type="selection" width="50" align="center" />
+        <el-table-column prop="platform_name" label="平台类型名称" />
+        <el-table-column prop="platform_eng" label="英文类型名称" />
+        <el-table-column prop="platform_alias" label="别名" />
+        <el-table-column prop="platform_order" label="排序" width="50" />
+        <el-table-column prop="platform_group" label="分组" />
+        <el-table-column prop="create_time" label="创建时间" />
+      </el-table>
+      <div class="pagination-box">
+        <el-pagination
+          background
+          :page-sizes="[10, 20, 30]"
+          :page-size="params2.limit"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total2"
+          :current-page="pageNum2"
+          @size-change="handleSizeChange2"
+          @current-change="handleCurrentChange2"
+        />
+      </div>
+    </el-dialog>
+    <!--  设备类型弹窗-->
+    <el-dialog
+      title="请选择设备"
+      :visible.sync="dialog3"
+      width="1200px"
+      :before-close="handleClose3">
+      <el-table ref="tableData3" stripe border :data="tableData3" @selection-change="handleSelectionChange" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
+        <el-table-column type="index" label="#" width="50"/>
+        <el-table-column type="selection" width="50" align="center" />
+        <el-table-column prop="equipment_name" label="设备类型名称" width="300" />
+        <el-table-column prop="equipment_eng" label="英文名称" width="350" />
+        <el-table-column prop="equipment_alias" label="别名" width="100" />
+        <el-table-column prop="equipment_order" label="排序" width="50" />
+        <el-table-column prop="equipment_group" label="分组" />
+        <el-table-column prop="create_time" label="创建时间" width="160" />
+      </el-table>
+      <div class="pagination-box">
+        <el-pagination
+          background
+          :page-sizes="[10, 20, 30]"
+          :page-size="params3.limit"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total3"
+          :current-page="pageNum3"
+          @size-change="handleSizeChange3"
+          @current-change="handleCurrentChange3"
+        />
+      </div>
+    </el-dialog>
+    <!--  数据样品类型弹窗-->
+    <el-dialog
+      title="请选择数据样品类型"
+      :visible.sync="dialog4"
+      width="1200px"
+      :before-close="handleClose4">
+      <el-table ref="tableData4" stripe border :data="tableData4" @selection-change="handleSelectionChange" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
+        <el-table-column type="index" label="#" width="50"/>
+        <el-table-column type="selection" width="50" align="center" />
+        <el-table-column prop="data_name" label="数据样品类型类型名称" width="300" />
+        <el-table-column prop="data_eng" label="英文名称" width="350" />
+        <el-table-column prop="data_alias" label="别名" width="100" />
+        <el-table-column prop="data_order" label="排序" width="50" />
+        <el-table-column prop="data_group" label="分组" />
+        <el-table-column prop="create_time" label="创建时间" width="160" />
+      </el-table>
+      <div class="pagination-box">
+        <el-pagination
+          background
+          :page-sizes="[10, 20, 30]"
+          :page-size="params4.limit"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total4"
+          :current-page="pageNum4"
+          @size-change="handleSizeChange4"
+          @current-change="handleCurrentChange4"
+        />
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { getDataSearch } from '../api/dataSearch'
+import { getDataSearch, voyageNameList, PlatformTypeList, equipmentTypeList, dataTypeList, dataPoints, sampleLineList, sampleStationList } from '../api/dataSearch'
+import { getVoyageLine } from '../api/home'
 const Cesium = window.Cesium
 export default {
   name: 'Shuju',
@@ -164,11 +283,50 @@ export default {
       dataList: [],
       searchValue: '',
       dialog1: false,
-      queryData1: {
+      params1: {
-        pageSize: 20,
+        start: 0,
-        pageNum: 1
+        limit: 10,
+        group: 10
       },
+      pageNum1: 1,
       tableData1: [],
+      total1: 0,
+      dialog2: false,
+      params2: {
+        start: 0,
+        limit: 10,
+        group: 10
+      },
+      pageNum2: 1,
+      tableData2: [],
+      total2: 0,
+      dialog3: false,
+      params3: {
+        start: 0,
+        limit: 10,
+        group: 10
+      },
+      pageNum3: 1,
+      tableData3: [],
+      total3: 0,
+      dialog4: false,
+      params4: {
+        start: 0,
+        limit: 10,
+        group: 10
+      },
+      pageNum4: 1,
+      tableData4: [],
+      total4: 0,
+      // 多选选中的数据id
+      ids: [],
+      menuShow: true,
+      currenId: null,
+      currenSample: null,
+      previousEntityId: null,
+      job: '',
+      chooseStation: null,
+      chooseLine: null,
     }
   },
   created() {
@@ -177,13 +335,33 @@ export default {
     this.initCesium()
   },
   watch: {
-    radio() {
+    radio(val) {
-      this.getList()
+      const type = this.searchTypeValue
+      const isType = type == '航次名称' || type == '平台类型' || type == '设备类型' || type == '数据样品类型'
+      const isQuery = this.searchValue
+      const isIds = this.ids.length
+      if (isQuery) {
+        this.getList()
+      } else {
+        if (isType && isIds) {
+          this.getListIds()
+        } else {
+          this.dataList = []
+        }
+      }
+    },
+    searchTypeValue(val) {
+      if (val == '航次名称' || val == '平台类型' || val == '设备类型' || val == '数据样品类型') {
+        this.menuShow = true
+      } else {
+        this.menuShow = false
+      }
     }
   },
   methods: {
     // 获取左侧航次列表
     getList() {
+      this.clearAll()
       this.dataList = []
       const params = {
         search_type: this.searchTypeValue,
@@ -194,10 +372,90 @@ export default {
         group: 10
       }
       getDataSearch(params).then(res => {
-        console.log(res)
+        const arr = res.page.records
-        this.dataList = res.page.records
+        if (this.radio == '航次') {
+          this.getVoyagePoints(arr)
+        }
+        if (this.radio == '数据样品集') {
+          this.getDataPoints(arr)
+        }
       })
     },
+    // 搜素
+    getSearch() {
+      this.ids = []
+      if (this.searchValue) {
+        this.getList()
+      }
+    },
+    // 获取航次坐标点位
+    getVoyagePoints(arr) {
+      const voyageList = arr
+      voyageList.map((item, index) => {
+        // 获取航次坐标点
+        getVoyageLine({
+          voyage_id: item.tsy_id
+        }).then(res2 => {
+          // 格式化坐标点
+          const points = []
+          res2.array.forEach(point => {
+            points.push(Number(point.nav_lon), Number(point.nav_lat))
+          })
+          this.drawLine(index, item.tsy_id, points)
+          // 将坐标点添加到航次列表中
+          item.points = points
+        })
+      })
+      this.dataList = voyageList
+    },
+    // 获取数据样品集坐标点位
+    getDataPoints(arr) {
+      const voyageList = arr
+      voyageList.map((item, index) => {
+        if (item.job_type == '测线作业') {
+          // 获取样品列表
+          sampleLineList({
+            dataset_id: item.tsy_id
+          }).then(res => {
+            item.sampleArray = res.array
+            // 格式化坐标点
+            res.array.forEach(line => {
+              if (line.start_lon && line.start_lat && line.end_lon && line.end_lat) {
+                this.drawLine(index, line.tsy_id, [Number(line.start_lon), Number(line.start_lat), Number(line.end_lon), Number(line.end_lat)])
+              }
+            })
+          })
+        }
+        if (item.job_type == '站位作业') {
+          // 获取样品列表
+          sampleStationList({
+            dataset_id: item.tsy_id
+          }).then(res => {
+            item.sampleArray = res.array
+            // 格式化坐标点
+            res.array.forEach(point => {
+              this.setPoint(point.tsy_id, [Number(point.sampling_lon), Number(point.sampling_lat)])
+            })
+          })
+        }
+        // 获取数据样品集坐标点
+        dataPoints({
+          dataset_id: item.tsy_id
+        }).then(res => {
+          // 格式化坐标点
+          const points = []
+          res.array.forEach(point => {
+            points.push(Number(point.track_lon), Number(point.track_lat))
+          })
+          this.drawLine(index, item.tsy_id, points)
+          // 将坐标点添加到航次列表中
+          item.points = points
+        })
+      })
+      this.dataList = voyageList
+      console.log(this.dataList)
+    },
+
     // 初始化cesium
     initCesium() {
       Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
@@ -287,16 +545,24 @@ export default {
       this.autoZoom()
     },
     // 创建点位
-    setPoint(id, degree, color) {
+    setPoint(id, degree) {
       this.viewer.entities.add({
         id: id,
-        position: Cesium.Cartesian3.fromDegrees(degree),
+        position: Cesium.Cartesian3.fromDegrees(degree[0], degree[1]),
         point: {
-          pixelSize: 20, // 点像素大小
+          pixelSize: 8, // 点像素大小
-          color: color
+          color: Cesium.Color.GREEN
         }
       })
-      // this.viewer.zoomTo(point)
+      this.autoZoom()
+    },
+    // 删除单个实体
+    clearOne(id) {
+      const entityToRemove = this.viewer.entities.getById(id);
+      // 检查实体是否存在
+      if (Cesium.defined(entityToRemove)) {
+        this.viewer.entities.remove(entityToRemove)
+      }
     },
     // 清除所有实体
     clearAll() {
@@ -315,16 +581,191 @@ export default {
     toshow() {
       this.show = false
     },
+    // 通过ids获取左侧航次列表
+    getListIds() {
+      this.clearAll()
+      this.dataList = []
+      const params = {
+        search_type: this.searchTypeValue,
+        return_type: this.radio,
+        search_value: this.searchValue,
+        limit: 20,
+        start: 0,
+        group: 10,
+        ids: this.ids.toString()
+      }
+      getDataSearch(params).then(res => {
+        const arr = res.page.records
+        if (this.radio == '航次') {
+          this.getVoyagePoints(arr)
+        }
+        if (this.radio == '数据样品集') {
+          this.getDataPoints(arr)
+        }
+      })
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.tsy_id)
+    },
     // 打开搜素弹窗
     openDialog() {
+      this.ids = []
       if (this.searchTypeValue == '航次名称') {
         this.dialog1 = true
+        this.getVoyageNameList()
+      } else if (this.searchTypeValue == '平台类型') {
+        this.dialog2 = true
+        this.getPlatformTypeList()
+      } else if (this.searchTypeValue == '设备类型') {
+        this.dialog3 = true
+        this.getEquipmentTypeList()
+      } else if (this.searchTypeValue == '数据样品类型') {
+        this.dialog4 = true
+        this.getDataTypeList()
+      } else {
+        return false
       }
     },
     // 航次名称弹窗
     handleClose1() {
       this.dialog1 = false
+      if (this.ids.length) {
+        this.getListIds()
+      } else {
+        this.dataList = []
+      }
     },
+    // 获取航次名称列表
+    getVoyageNameList() {
+      voyageNameList(this.params1).then(res => {
+        this.tableData1 = res.page.records
+        this.total1 = Number(res.page.total)
+      })
+    },
+    handleCurrentChange1(val) {
+      this.pageNum1 = val
+      this.params1.start = val * this.params1.limit - this.params1.limit
+      this.getVoyageNameList()
+    },
+    handleSizeChange1(val) {
+      this.params1.limit = val
+      this.getVoyageNameList()
+    },
+    // 平台类型弹窗
+    handleClose2() {
+      this.dialog2 = false
+      if (this.ids.length) {
+        this.getListIds()
+      } else {
+        this.dataList = []
+      }
+    },
+    // 获取平台类型列表
+    getPlatformTypeList() {
+      PlatformTypeList(this.params2).then(res => {
+        this.tableData2 = res.page.records
+        this.total2 = Number(res.page.total)
+      })
+    },
+    handleCurrentChange2(val) {
+      this.pageNum2 = val
+      this.params2.start = val * this.params2.limit - this.params2.limit
+      this.getPlatformTypeList()
+    },
+    handleSizeChange2(val) {
+      this.params2.limit = val
+      this.getPlatformTypeList()
+    },
+    // 设备类型弹窗
+    handleClose3() {
+      this.dialog3 = false
+      if (this.ids.length) {
+        this.getListIds()
+      } else {
+        this.dataList = []
+      }
+    },
+    // 获取设备类型列表
+    getEquipmentTypeList() {
+      equipmentTypeList(this.params3).then(res => {
+        this.tableData3 = res.page.records
+        this.total3 = Number(res.page.total)
+      })
+    },
+    handleCurrentChange3(val) {
+      this.pageNum3 = val
+      this.params3.start = val * this.params3.limit - this.params3.limit
+      this.getEquipmentTypeList()
+    },
+    handleSizeChange3(val) {
+      this.params3.limit = val
+      this.getEquipmentTypeList()
+    },
+    // 数据样品类型弹窗
+    handleClose4() {
+      this.dialog4 = false
+      if (this.ids.length) {
+        this.getListIds()
+      } else {
+        this.dataList = []
+      }
+    },
+    // 获取设备类型列表
+    getDataTypeList() {
+      dataTypeList(this.params4).then(res => {
+        this.tableData4 = res.page.records
+        this.total4 = Number(res.page.total)
+      })
+    },
+    handleCurrentChange4(val) {
+      this.pageNum4 = val
+      this.params4.start = val * this.params4.limit - this.params4.limit
+      this.getDataTypeList()
+    },
+    handleSizeChange4(val) {
+      this.params4.limit = val
+      this.getDataTypeList()
+    },
+    // 展开数据样品列表
+    openList(item) {
+      if (item.file_total) {
+        this.currenId = item.tsy_id
+        this.job = item.job_type
+      }
+    },
+    // 选中样品列表数据
+    onSample(sample) {
+      this.currenSample = sample.tsy_id
+      if (this.job === '站位作业') {
+        this.resetCesium()
+        const station = this.viewer.entities.getById(sample.tsy_id)
+        if (station) {
+          station.point.pixelSize = 20
+          station.point.color = Cesium.Color.WHITE
+        }
+        this.chooseStation = station
+      } else {
+        this.resetCesium()
+        const line = this.viewer.entities.getById(sample.tsy_id)
+        if (line) {
+          line.polyline.width = 8
+          line.oldMaterial = line.polyline.material
+          line.polyline.material = Cesium.Color.GREEN
+        }
+        this.chooseLine = line
+      }
+    },
+    resetCesium() {
+      if (this.chooseStation) {
+        this.chooseStation.point.pixelSize = 5
+        this.chooseStation.point.color = Cesium.Color.RED
+      }
+      if (this.chooseLine) {
+        this.chooseLine.polyline.width = 5
+        this.chooseLine.polyline.material = this.chooseLine.oldMaterial
+      }
+    }
   }
 }
 </script>
@@ -435,6 +876,31 @@ export default {
               color: #999999;
             }
           }
+          .sample {
+            padding: 6px 12px;
+            box-sizing: border-box;
+            box-sizing: border-box;
+            font-size: 14px;
+            color: #555555;
+            position: relative;
+            &::before {
+              content: "";
+              display: block;
+              width: 8px;
+              height: 8px;
+              background-color: #B82C22;
+              position: absolute;
+              left: 0;
+              top: 12px;
+              border-radius: 50%;
+            }
+            //&:hover {
+            //  background-color: rgb(248,249,250);
+            //}
+          }
+          .bg-color {
+            background-color: rgb(93,156,236);
+          }
           .left4_list{
             width: 100%;
             display: flex;