DSDSWeb/src/views/dataSearch.vue

<template>
  <div class="shuju">
    <div class="shuju_con">
      <div v-show="show == false" class="left">
        <div class="left1">
          <div class="xiala">
            <el-select v-model="searchTypeValue" placeholder="">
              <el-option
                v-for="(item, index) in searchType"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </div>
          <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="openDialog"
          />
        </div>
        <div class="left3">
          <el-radio-group v-model="radio">
            <el-radio label="数据样品集">数据样品集</el-radio>
            <el-radio label="航次">航次</el-radio>
          </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 class="left4_top">
              <p>{{ item.dataset_name }} <span class="mileage">{{item.file_total}}</span></p>
              <span class="org">{{ item.create_time }}</span>
            </div>
            <div class="left4_list">
              <div class="list1">
                <p>航次：</p>
                <span>{{ item.voyage_name }}</span>
              </div>
              <div class="list1">
                <p>平台类型：</p>
                <span>{{ item.platform_type }}</span>
              </div>

              <div class="list1">
                <p>平台名称：</p>
                <span>{{ item.platform_name }}</span>
              </div>

              <div class="list1">
                <p>潜次序号：</p>
                <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.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>
          </div>
        </div>
        <div class="arrow">
          <img src="../../static/images/arrow_nav.png" alt="" @click="shousuo">
        </div>
      </div>
      <div v-show="show" class="arrow_r" @click="toshow">
        <img src="../../static/images/arrow_nav1.png" alt="">
      </div>
      <div class="right">
        <div id="cesiumContainerData" style="height: 100%;width:100%;" />
      </div>
    </div>
<!--  航次名称弹窗-->
    <el-dialog
      title="请选择航次"
      :visible.sync="dialog1"
      width="800px"
      :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-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 { getDataSearch } from '../api/dataSearch'
const Cesium = window.Cesium
export default {
  name: 'Shuju',
  data() {
    return {
      show: false,
      viewer: null,
      color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE],
      searchType: ['航次名称', '平台类型', '平台名称', '设备类型', '数据样品类型', '数据集名称', '航次首席'],
      searchTypeValue: '航次名称',
      radio: '航次',
      dataList: [],
      searchValue: '',
      dialog1: false,
      queryData1: {
        pageSize: 20,
        pageNum: 1
      },
      tableData1: [],
    }
  },
  created() {
  },
  mounted() {
    this.initCesium()
  },
  watch: {
    radio() {
      this.getList()
    }
  },
  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' })
    },
    shousuo() {
      this.show = true
    },
    toshow() {
      this.show = false
    },
    // 打开搜素弹窗
    openDialog() {
      if (this.searchTypeValue == '航次名称') {
        this.dialog1 = true
      }
    },
    // 航次名称弹窗
    handleClose1() {
      this.dialog1 = false
    },
  }
}
</script>

<style scoped lang="scss">
.shuju {
  width: 100%;
  height: 100%;
  .shuju_con {
    width: 100%;
    height: 995px;
    display: flex;
    align-items: center;
    justify-content: center;
    .left {
      position: relative;
      width: 570px;
      height: 100%;
      background: #fff;
      box-sizing: border-box;
      padding: 50px 30px;
      display: flex;
      flex-direction: column;
      .left1 {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        .xiala {
          width: 80%;
          height: 40px;
          margin-right: 15px;
        }
        .el-button {
          width: 12%;
          font-size: 20px;
          height: 40px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        .sousuo {
          margin-right: 1%;
        }
        .caidan {
          color: #999;
        }
      }
      .left2 {
        margin-top: 20px;
        .el-tag {
          margin-right: 10px;
        }
      }
      .left3 {
        padding: 10px 0;
        width: 100%;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #e5e5e5;
      }
      .left4{
        width: 100%;
        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%;
          height: auto;
          border-bottom: 1px solid #e5e5e5;
          cursor: pointer;
          &:hover{
            .left4_top{
              p{
                color: #409eff;
              }
            }
          }
          .left4_top{
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-bottom: 10px;
            p{
              font-size: 16px;
              color: #212121;
              font-weight: bold;
              display: flex;
              justify-content: space-between;
              .mileage {
                font-size: 12px;
                color: #909fa7;
              }
            }
            .org {
              font-size: 12px;
              color: #999999;
            }
          }
          .left4_list{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .list1{
              width: 50%;
              display: flex;
              align-items: center;
              margin-bottom: 10px;
              p{
                font-size: 14px;
                color: #999;
              }
              span{
                font-size: 14px;
                color: #212121;
              }
            }
          }
        }
      }
      .arrow{
        position: absolute;
        right: 0;
        top: 40%;
        z-index: 888;
        cursor: pointer;
      }
    }
    .arrow_r{
      position: absolute;
      top: 40%;
      left: 0;
      z-index: 888;
      cursor: pointer;
    }
    .right {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
<style>
.left3_1 .el-radio {
  margin-right: 15px;
}
.left3_1 .el-radio__label {
  font-size: 15px;
}
.el-input__inner::-webkit-input-placeholder {
  color: #333;
}
.left3_2 .el-input__inner {
  padding-left: 0;
  border: none;
  font-size: 15px;
}
.BMapLabel{
  border: none !important;
  color: #fff;
  background: none !important;
}
</style>