DSDSWeb/src/views/dataSearch.vue

<template>
  <div class="shuju">
    <div class="shuju_con">
      <div v-show="show == false" class="left">
        <div class="tags">
          <span class="tag" v-if="menu1">航次名称：{{ menu1 }} <i class="el-icon-close" @click="menu1 = ''"></i></span>
          <span class="tag" v-if="menu2">平台类型：{{ menu2 }} <i class="el-icon-close" @click="menu2 = ''"></i></span>
          <span class="tag" v-if="menu3">设备类型：{{ menu3 }} <i class="el-icon-close" @click="menu3 = ''"></i></span>
          <span class="tag" v-if="menu4">数据样品类型：{{ menu4 }} <i class="el-icon-close" @click="menu4 = ''"></i></span>
        </div>
        <div class="left1">
          <div class="xiala">
            <el-select v-model="searchTypeValue" placeholder="">
              <el-option v-for="(item, index) in searchType" :key="index" :label="item.label" :value="item.label"
                :disabled="item.disabled" />
            </el-select>
          </div>
          <el-input v-model="searchValue" placeholder="" />
          <el-button class="sousuo" type="primary" icon="el-icon-search" @click="getSearch" />
          <el-button v-if="menuShow" class="caidan" type="default" icon="el-icon-s-operation" @click="handleMenu" />
        </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" :id="item.tsy_id" class="left4_1">
            <div class="left4_top">
              <p class="rule-text">编号规则:航次号_潜次号_设备类型_数据样品类型</p>
              <p @click="openList(item, 'list')"
                style="font-weight: 400;font-size: 14px;cursor: pointer;color: #409eff">{{ item.dataset_name }} <span
                  class="mileage">{{ item.file_total }}</span></p>
              <span class="org">{{ item.create_time }}</span>
            </div>
            <ul v-show="currenId == item.tsy_id && fold">
              <li :class="sample.tsy_id == currenSample ? 'bg-color' : ''" class="sample" :id="sample.tsy_id"
                v-for="(sample, i) in item.sampleArray" :key="i" @click.stop="onSample(sample)">{{ sample.sample_name }}
              </li>
            </ul>
            <div class="left4_list">
              <div class="list1">
                <p>航次：</p>
                <span class="hover-color" style="color: #409eff" @click="turnDeatilPage(item)">{{ 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 style="font-weight: bold">{{ 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" style="cursor: pointer" :id="item.tsy_id">
            <div class="left4_top">
              <p :style="currentVoyage === item.tsy_id ? 'color: #409eff' : ''">
                <span style="color: #409eff" @click="turnDeatilPage(item)">{{ item.voyage_name }}</span>
                <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 class="btns">
                <el-button v-if="!item.highlight" icon="el-icon-s-opportunity" circle
                  @click="addHighlightLayer(item.voyage_name, index)" />
                <el-button v-if="item.highlight" type="primary" icon="el-icon-s-opportunity" circle
                  @click="clearHighlight(item.voyage_name, index)" />
                <el-button v-if="!item.show" icon="el-icon-view" circle
                  @click="addSingleLineImg(item.voyage_name, index)" />
                <el-button v-if="item.show" type="primary" icon="el-icon-view" circle
                  @click="removeSingleLineImg(item.voyage_name, index)" />
                <!-- <el-button icon="el-icon-location-information" circle /> -->
              </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: 100vh;width:100%;" />
        <a @click="goHome"> <img class="logo" src="../../static/images/logo_map.png" alt="">
          <p class="goHome">返回首页</p>
        </a>
      </div>
    </div>
    <!--  航次名称弹窗-->
    <el-dialog title="请选择航次名称" :visible.sync="dialog1" width="1000px">
      <el-table ref="tableData1" border highlight-current-row @current-change="handleCurrentChange1" max-height="480"
        :data="tableData1" :header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }">
        <el-table-column type="index" label="#" width="50" />
        <el-table-column prop="name" label="航次名称" />
      </el-table>
    </el-dialog>
    <!--  平台类型弹窗-->
    <el-dialog title="请选择平台类型" :visible.sync="dialog2" width="1000px">
      <el-table ref="tableData2" border @current-change="handleCurrentChange2" :data="tableData2" max-height="480"
        :header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }">
        <el-table-column type="index" label="#" width="50" />
        <el-table-column prop="name" label="平台类型名称" />
        <el-table-column prop="value" label="英文类型名称" />
      </el-table>
    </el-dialog>
    <!--  设备类型弹窗-->
    <el-dialog title="请选择设备类型" :visible.sync="dialog3" width="1000px">
      <el-table ref="tableData3" border @current-change="handleCurrentChange3" :data="tableData3" max-height="480"
        :header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }">
        <el-table-column type="index" label="#" width="50" />
        <el-table-column prop="name" label="设备类型名称" />
        <el-table-column prop="value" label="英文名称" />
      </el-table>
    </el-dialog>
    <!--  数据样品类型弹窗-->
    <el-dialog title="请选择数据样品类型" :visible.sync="dialog4" width="1000px">
      <el-table ref="tableData4" border @current-change="handleCurrentChange4" :data="tableData4" max-height="480"
        :header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }">
        <el-table-column type="index" label="#" width="50" />
        <el-table-column prop="name" label="数据样品类型类型名称" />
        <el-table-column prop="value" label="英文名称" />
      </el-table>
    </el-dialog>
    <!--  航次信息弹窗-->
    <el-dialog title="航次信息" :visible.sync="dialog5" width="800px">
      <div class="detail_b">
        <h3 style="padding-bottom: 10px;">{{ voyageInfo.voyage_name }}</h3>
        <p>{{ voyageInfo.voyage_remark }}</p>
        <h4 style="padding: 20px 0 10px;">航次信息：</h4>
        <div>
          <el-row :gutter="20">
            <el-col :span="12">
              <label>科考船舶：</label><span>{{ voyageInfo.ship_name }}</span>
            </el-col>
            <el-col :span="12">
              <label>资助机构：</label><span>{{ voyageInfo.funding_org }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <label>离港日期：</label><span>{{ voyageInfo.voyage_start_date }}</span>
            </el-col>
            <el-col :span="12">
              <label>返港日期：</label><span>{{ voyageInfo.voyage_end_date }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <label>航次首席：</label><span>{{ voyageInfo.voyage_officer }}</span>
            </el-col>
          </el-row>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleVoyageDetail">查看航次详情</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMenu,
  getDataList,
  dataPoints,
  sampleLineList,
  sampleStationList
} from '../api/dataSearch'
import { getParamsList, getVoyageLine } from '../api/home'
import { regInfo } from '@/api/dataSearch'
import Cookies from 'js-cookie'
import {
  setImageryViewModels
} from '@/utils/common'
import Vue from 'vue'
import { loadVectorLayer } from '@/utils/vector-layer-utils'
import { ColorGenerator } from '@/utils/color-generator';
import { handleWheel } from "@/utils/mapbox-utils";

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: [
        {
          label: '航次名称',
          disabled: false
        },
        {
          label: '平台类型',
          disabled: false
        },
        {
          label: '平台名称'
        },
        {
          label: '设备类型',
          disabled: false
        },
        {
          label: '航次首席'
        },
        {
          label: '数据集名称'
        },
        {
          label: '数据样品类型',
          disabled: false
        },
      ],
      searchTypeValue: '航次名称',
      radio: '航次',
      dialog1: false,
      tableData1: [],
      total1: 0,
      dialog2: false,
      tableData2: [],
      total2: 0,
      dialog3: false,
      tableData3: [],
      total3: 0,
      dialog4: false,
      tableData4: [],
      total4: 0,
      menu1: '',
      menu2: '',
      menu3: '',
      menu4: '',
      dialog5: false,
      voyageInfo: {},
      dataList: [],
      searchValue: '',
      menuShow: true,
      currenId: null,
      fold: false,
      currenSample: null,
      previousEntityId: null,
      job: '',
      chooseStation: null,
      chooseLine: null,
      currentVoyage: null, // 当前选中的航次
      currentSample: null, // 当前选中的数据样品集合
      // 地图图层基础地址
      CesiumHostAddr: '',
      // 保存自定义底图
      imageryViewModels: [],
      // 保存轨迹图层
      trackLineLayers: [],
      // 记录已渲染的轨迹
      rendered: [],
      trackLayerMap: {}, // 存储每个航次对应的轨迹图层实例
      highlightLayer: null, // 存储当前高亮图层实例
    }
  },
  watch: {
    radio(val) {
      this.dataList = []
    },
    searchTypeValue(val) {
      if (val == '航次名称' || val == '平台类型' || val == '设备类型' || val == '数据样品类型') {
        this.menuShow = true
      } else {
        this.menuShow = false
      }
    },
    menu1(val) {
      if (val) {
        this.searchType[0].disabled = true
      } else {
        this.searchType[0].disabled = false
      }
    },
    menu2(val) {
      if (val) {
        this.searchType[1].disabled = true
      } else {
        this.searchType[1].disabled = false
      }
    },
    menu3(val) {
      if (val) {
        this.searchType[3].disabled = true
      } else {
        this.searchType[3].disabled = false
      }
    },
    menu4(val) {
      if (val) {
        this.searchType[4].disabled = true
      } else {
        this.searchType[4].disabled = false
      }
    },
  },
  mounted() {
    this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
    this.initMapbox()
    // this.initCesium()
  },
  methods: {
    // 获取菜单
    handleMenu() {
      this.dataList = []
      getMenu({
        start: 0,
        limit: 10000,
        search_type: this.searchTypeValue,
        return_type: this.radio,
        voyage_name: this.menu1,
        platform_type: this.menu2,
        equipment_type: this.menu3,
        data_type: this.menu4
      }).then(res => {
        if (this.searchTypeValue === '航次名称') {
          this.dialog1 = true
          this.tableData1 = res.page.records
        } else if (this.searchTypeValue === '平台类型') {
          this.dialog2 = true
          this.tableData2 = res.page.records
        } else if (this.searchTypeValue === '设备类型') {
          this.dialog3 = true
          this.tableData3 = res.page.records
        } else if (this.searchTypeValue === '数据样品类型') {
          this.dialog4 = true
          this.tableData4 = res.page.records
        }
      })
    },
    handleCurrentChange1(item) {
      this.menu1 = item.name
      this.tableData1 = []
      this.searchType[0].disabled = true
      const str = this.searchType.find(item => {
        return item.disabled !== true
      })
      this.searchTypeValue = str.label
      this.dialog1 = false
    },
    handleCurrentChange2(item) {
      this.menu2 = item.name
      this.tableData2 = []
      this.searchType[1].disabled = true
      const str = this.searchType.find(item => {
        return item.disabled !== true
      })
      this.searchTypeValue = str.label
      this.dialog2 = false
    },
    handleCurrentChange3(item) {
      this.menu3 = item.name
      this.tableData3 = []
      this.searchType[3].disabled = true
      const str = this.searchType.find(item => {
        return item.disabled !== true
      })
      this.searchTypeValue = str.label
      this.dialog3 = false
    },
    handleCurrentChange4(item) {
      this.menu4 = item.name
      this.tableData4 = []
      this.searchType[4].disabled = true
      const str = this.searchType.find(item => {
        return item.disabled !== true
      })
      this.searchTypeValue = str.label
      this.dialog4 = false
    },
    // 获取左侧航次列表
    getList() {
      this.dataList = []
      const params = {
        start: 0,
        limit: 10000,
        search_type: this.searchTypeValue,
        return_type: this.radio,
        voyage_name: this.menu1,
        platform_type: this.menu2,
        equipment_type: this.menu3,
        data_type: this.menu4,
        search_value: this.searchValue,
        FrameSessionId: Cookies.get('JSESSIONID')
      }
      getDataList(params).then(res => {
        const arr = res.page.records
        if (this.radio === '航次') {
          if (arr.length) {
            let i = 0;
            const colors = ColorGenerator.generateDivergingColors(arr.length);
            arr.forEach(item => {
              item.highlight = false
              item.show = true
              // this.addSingleLineImg(item.voyage_name, null)
              // 加载轨迹图层
              loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
              i++;
            })
          }
          this.dataList = arr
        }
        if (this.radio === '数据样品集') {
          try {
            this.getDataPoints(arr)
          }
          catch (err) {
            console.log(err);
          }
        }
      })
    },
    // 添加高亮图层
    addHighlightLayer(voyageName, i) {
      this.clearHighlight()
      const highlightLayer = new Cesium.WebMapTileServiceImageryProvider({
        url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${voyageName}-highlight/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
        layer: `dsds:${voyageName}-highlight`,
        style: 'default',
        format: 'image/png',
        tileMatrixSetID: 'EPSG:4326',
        tilingScheme: new Cesium.GeographicTilingScheme()
      });

      this.highlightLayer = this.viewer.imageryLayers.addImageryProvider(highlightLayer);
      this.dataList[i].highlight = true;
    },
    // 清除高亮
    clearHighlight(voyageName, i) {
      this.dataList.map(item => { item.highlight = false })
      // 移除地图上的高亮图层
      if (this.highlightLayer) {
        this.viewer.imageryLayers.remove(this.highlightLayer);
        this.highlightLayer = null;
      }
    },
    // 显示
    addSingleLineImg(voyageName, i) {
      if (i !== null) {
        this.dataList[i].show = true;
      }
      // 显示图层
      Vue.config.maps["dataSearch"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "visible");
      Vue.config.maps["dataSearch"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "visible");
      return;
      // 检查该航次图层是否已存在，避免重复添加
      if (this.trackLayerMap[voyageName]) {
        console.warn(`航次 ${voyageName} 的轨迹图层已存在`);
        return;
      }

      // 创建轨迹影像图层
      const trackLine = new Cesium.WebMapTileServiceImageryProvider({
        url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${voyageName}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
        layer: `dsds:${voyageName}`,
        style: 'default',
        format: 'image/png',
        tileMatrixSetID: 'EPSG:4326',
        tilingScheme: new Cesium.GeographicTilingScheme()
      });

      // 添加图层到Cesium并存储引用
      const layerInstance = this.viewer.imageryLayers.addImageryProvider(trackLine);
      this.trackLayerMap[voyageName] = layerInstance; // 以航次名为键存储图层实例
      if (i !== null) {
        this.dataList[i].show = true;
      }
    },

    // 隐藏
    removeSingleLineImg(voyageName, i) {
      if (i !== null) {
        this.dataList[i].show = false;
      }
      // 隐藏图层
      // let visibility = Vue.config.maps["dataSearch"].getLayoutProperty(`vector-${voyageName}-symbol`, "visibility");
      // visibility = visibility == "visible" ? "none" : "visible";
      Vue.config.maps["dataSearch"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "none");
      Vue.config.maps["dataSearch"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "none");
      return;

      const layerInstance = this.trackLayerMap[voyageName];
      if (layerInstance) {
        // 从Cesium的imageryLayers中移除该图层
        this.viewer.imageryLayers.remove(layerInstance);
        // 删除映射表中对该图层的引用
        delete this.trackLayerMap[voyageName];
        if (i !== null) {
          this.dataList[i].show = false;
        }
      } else {
        console.warn(`未找到航次 ${voyageName} 的轨迹图层`);
      }
    },
    // 测线业务相关图层
    sampleLineImage(item) {
      // 查询轨迹是否渲染过，避免重复渲染
      if (this.rendered.length) {
        const isRendered = this.rendered.find(ele => ele === item.sample_name)
        if (isRendered) return
      }
      if (!item.sample_name) return
      // 轨迹影像参数
      const trackLine = new Cesium.WebMapTileServiceImageryProvider(
        {
          url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.sample_name}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
          layer: `dsds:${item.sample_name}`,
          style: 'default',
          format: 'image/png',
          tileMatrixSetID: 'EPSG:4326',
          tilingScheme: new Cesium.GeographicTilingScheme()
        }
      )
      const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
      this.trackLineLayers.push(trackLineLayer)
      // 记录已渲染的轨迹，防止重复渲染
      this.rendered.push(item.sample_name)
    },
    // 潜水器轨迹图层
    divingImage(item) {
      // 查询轨迹是否渲染过，避免重复渲染
      if (this.rendered.length) {
        const isRendered = this.rendered.find(ele => ele === item.diving_sn)
        if (isRendered) return
      }
      if (!item.diving_sn) return
      // 轨迹影像参数
      const trackLine = new Cesium.WebMapTileServiceImageryProvider(
        {
          url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.diving_sn}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
          layer: `dsds:${item.diving_sn}`,
          style: 'default',
          format: 'image/png',
          tileMatrixSetID: 'EPSG:4326',
          tilingScheme: new Cesium.GeographicTilingScheme()
        }
      )
      const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
      this.trackLineLayers.push(trackLineLayer)
      // 记录已渲染的轨迹，防止重复渲染
      this.rendered.push(item.diving_sn)
    },
    // 清除所有轨迹图层
    clearAll() {
      // this.clearHighlight()
      if (this.trackLayerMap.length) {
        this.trackLayerMap.forEach(layer => {
          this.viewer.imageryLayers.remove(layer);
          this.trackLayerMap = []
        })
      }
    },
    // 搜素
    getSearch() {
      this.clearAll()
      this.getList()
    },
    // 获取数据样品集坐标点位
    getDataPoints(arr) {
      if (!arr.length) return false
      let i = 0;
      const colors = ColorGenerator.generateDivergingColors(arr.length);
      arr.forEach(item => {
        // this.addSingleLineImg(item.voyage_name, null)
        // 加载轨迹图层（因样品暂无轨迹数据，暂时不加载轨迹）
        // loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
        i++;
        // this.dataList[i].show = true;
        // this.divingImage(item)
      })
      const voyageList = arr
      voyageList.map(item => {
        if (item.job_type === '测线作业') {
          // 获取样品列表
          sampleLineList({
            dataset_id: item.tsy_id
          }).then(res => {
            item.sampleArray = res.array
            if (res.array.length) {
              let i = 0;
              const colors = ColorGenerator.generateDivergingColors(res.array.length);
              res.array.forEach(sample => {
                console.log(sample);
                // this.sampleLineImage(sample)
                // 加载轨迹图层（因样品暂无轨迹数据，暂时不加载轨迹）
                // loadVectorLayer(sample.sample_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
                i++;
              })
            }
          })
        }
        if (item.job_type === '站位作业') {
          // 获取样品列表
          sampleStationList({
            dataset_id: item.tsy_id
          }).then(res => {
            item.sampleArray = res.array
            // 格式化坐标点
            if (res.array.length) {
              let i = 0;
              const colors = ColorGenerator.generateDivergingColors(res.array.length);
              res.array.forEach(sample => {
                // this.sampleLineImage(sample)
                // 加载轨迹图层（因样品暂无轨迹数据，暂时不加载轨迹）
                // loadVectorLayer(sample.sample_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
                i++;
              })
            }
          })
        }
      })
      this.dataList = voyageList
      console.log(this.dataList)
    },

    // 初始化 mapbox
    initMapbox() {
      window.mapboxgl.accessToken = 'pk.eyJ1IjoicWRod2kiLCJhIjoiY2xiaXppcjEyMGNhMjNwbzVrcHl4d20zOSJ9.0ETMJM3-zllFh2GRrRVUZg'
      const map = new window.mapboxgl.Map({
        container: 'cesiumContainerData',
        // style: 'mapbox://styles/mapbox/standard',
        style: {
          "version": 8,
          "name": "default_style",
          // mapbox地图使用的图标
          "sprite": `${Vue.config.baseUrl}/oe/${Vue.config.wwwrootBaseUrl}/sprites/sprite`,
          // 使用官方标注字体（需联网）
          "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
          // 自部署标注字体（无需联网），glyphs 前有两个斜杠时，可能导致404
          // "glyphs": `${Vue.config.baseUrl}/oe/${Vue.config.wwwrootBaseUrl}/glyphs/{fontstack}/{range}.pbf`,
          "sources": {
            "影像地图": {
              "type": "raster",
              "tiles": [`${Vue.config.baseUrl}/geoserver/gwc/service/wmts/rest/ougp:world/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=image/jpeg`],
              "tileSize": 256,
              // "minzoom": 0,
              // "maxzoom": baseMapMaxZoom
            }
          },
          "layers": [
            {
              "id": "影像地图",
              "type": "raster",
              "source": "影像地图",
              "layout": { visibility: "visible" },
              // "minzoom": 0,
              // "maxzoom": baseMapMaxZoom
            }
          ]
        },
        config: {
          basemap: {
            theme: 'monochrome',
            lightPreset: 'night'
          }
        },
        zoom: 5,
        center: [113, 15.5],
        minZoom: 2,
        maxZoom: 29,
        trackResize: true,
        scrollZoom: false, // 禁用滚轮缩放
        // 地图默认字体
        localIdeographFontFamily: "Microsoft YoHei, 'Noto Sans', 'Noto Sans CJK SC', sans-serif",
        pitch: 0,
        bearing: 0,
        // maxBounds: [[-180, -90], [180, 90]],// Set the map's geographical boundaries.
        antialias: true,
        attributionControl: false,
        boxZoom: true,//如果为true，则启用了“缩放框”交互，按住shift并在地图上拖框放大
        preserveDrawingBuffer: false,//如果为true，地图的canvas可以使用导出到png，通过map.getCanvas().toDataURL()。默认为false，会提高地图性能。
        projection: 'equirectangular', // 设置投影方式，经纬度直投（解决缩放级别大于26时瓦片消失的问题）
      });
      Vue.config.maps["dataSearch"] = map;

      // 确保窗口大小改变时，地图能正确铺满容器
      window.addEventListener('resize', (event) => {
        map.resize();
        // // maps.forEach((key: string, value: any) => {
        // //     console.log(`${key}: ${value}`);
        // // });
        // for (let [key, value] of Object.entries(maps)) {
        //   // value.resize();
        // }
        // Object.values(maps).forEach((map) => {
        //   map.resize();
        // });
      });

      handleWheel("dataSearch");

      map.on('load', () => {
        // 加载海岸线
        loadVectorLayer("GSHHS_f_L1", ["line"], ["#5c71c3"], "visible", "dataSearch", 'ougp');
        // 加载等深线
        // loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "visible", "dataSearch", 'ougp');
        // loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "visible", "dataSearch", 'ougp');
      });
    },

    // 初始化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,
        // 设置自定义底图
        imageryProviderViewModels: this.imageryViewModels,
        // 关闭默认的地形底图
        terrainProviderViewModels: [],
        fullscreenButton: false,
        selectionIndicator: false,
        homeButton: false,
        sceneModePicker: 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
      this.viewer.scene.postProcessStages.fxaa.enabled = true

      // 单击 homeButton 返回初始位置
      // this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => {
      //   e.cancel = true;
      //   this.viewer.camera.flyTo({
      //     // 指定相机初始位置
      //     destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000),
      //     duration: 0.5
      //   });
      // });

      this.viewer.camera.setView({
        // 指定相机初始位置
        destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
      })

      // // 增加海岸线
      // const coastline = new Cesium.WebMapTileServiceImageryProvider(
      //   {
      //     url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:GSHHS_f_L1/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
      //     layer: 'ougp:GSHHS_f_L1',
      //     style: 'default',
      //     format: 'image/png',
      //     tileMatrixSetID: 'EPSG:4326',
      //     tilingScheme: new Cesium.GeographicTilingScheme()
      //   }
      // )
      // this.viewer.imageryLayers.addImageryProvider(coastline)
      // 沉船摄影拼接图
      const shipline = new Cesium.WebMapTileServiceImageryProvider(
        {
          url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:正射影像图_GM输出_20240516/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
          layer: 'ougp:正射影像图_GM输出_20240516',
          style: 'default',
          format: 'image/png',
          tileMatrixSetID: 'EPSG:4326',
          tilingScheme: new Cesium.GeographicTilingScheme()
        }
      )
      this.viewer.imageryLayers.addImageryProvider(shipline)
      // 增加6000米等深线
      const contour6000 = new Cesium.WebMapTileServiceImageryProvider(
        {
          url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:contour6000/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
          layer: 'ougp:contour6000',
          style: 'default',
          format: 'image/png',
          tileMatrixSetID: 'EPSG:4326',
          tilingScheme: new Cesium.GeographicTilingScheme()
        }
      )
      this.viewer.imageryLayers.addImageryProvider(contour6000)
    },
    turnDeatilPage(item) {
      this.dialog5 = true
      regInfo({ voyage_name: item.voyage_name }).then(res => {
        this.voyageInfo = res.map.voyage
      })
    },
    handleVoyageDetail() {
      const routeData = this.$router.resolve({
        name: 'dataDetail',
        query: {
          voyage_name: this.voyageInfo.voyage_name
        }
      })
      window.open(routeData.href, '_blank')
    },
    shousuo() {
      this.show = true
      // 等待布局变化完成后触发地图 resize
      setTimeout(() => {
        Vue.config.maps["dataSearch"].resize();
      }, 10);
    },
    toshow() {
      this.show = false
      // 等待布局变化完成后触发地图 resize
      setTimeout(() => {
        Vue.config.maps["dataSearch"].resize();
      }, 10);
    },
    // 展开数据样品列表
    openList(item, type) {
      if (type === 'list') {
        if (this.currenId == item.tsy_id) {
          this.fold = !this.fold
        } else {
          this.fold = true
          if (item.file_total) {
            this.currenId = item.tsy_id
            this.job = item.job_type
          }
        }
      } else {
        this.fold = true
        this.currenId = item.tsy_id
        this.job = item.job_type
        // this.scrollTo(item.tsy_id)
        setTimeout(() => {
          this.scrollTo(this.currenSample)
        }, 500)
      }
    },
    // 选中样品列表数据
    onSample(sample) {
      this.currenSample = sample.tsy_id
    },
    goHome() {
      this.$router.push({ name: 'home' })
    },
    scrollTo(sectionId) {
      const element = document.getElementById(sectionId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }
}
</script>

<style scoped lang="scss">
// #cesiumContainerData {
//   // position: absolute;
//   left: 0px;
//   top: 0px;
//   bottom: 0px;
//   right: 0px;
//   padding: 0px;
//   margin: 0px;
//   width: 100%;
//   height: 100vh;
// }

.shuju {
  width: 100%;
  height: 100%;

  .shuju_con {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .left {
      position: relative;
      width: 570px;
      height: 100vh;
      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: 100%;
        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: default;

          //&: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;
                float: right;
              }
            }

            .org {
              font-size: 12px;
              color: #999999;
            }
          }

          .sample {
            padding: 6px 12px;
            box-sizing: border-box;
            box-sizing: border-box;
            font-size: 14px;
            color: #555555;
            position: relative;
            cursor: pointer;

            &::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;
            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;
              }
            }
          }
        }

        .list {
          margin-top: 20px;
          border: 1px solid #e5e5e5;

          div {
            padding: 5px 10px;
            border-bottom: 1px solid #e5e5e5;
          }

          .list-value {
            cursor: pointer;
          }

          :last-child {
            border-bottom: none;
          }

        }
      }

      .tags {
        color: #333333;
        display: flex;
        flex-wrap: wrap;

        .tag {
          color: #333333;
          padding: 5px;
          background-color: rgb(249, 249, 249);
          margin: 0 15px 15px 0;
        }
      }

      .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%;
      position: relative;

      .logo {
        width: 60px;
        height: 60px;
        cursor: pointer;
        position: absolute;
        bottom: 25px;
        right: 20px;
      }

      .goHome {
        cursor: pointer;
        position: absolute;
        bottom: 0;
        right: 20px;
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
}

.hover-color:hover {
  color: #409eff !important;
  cursor: pointer;
}
</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;
}

.rule-text {
  font-size: 16px;
  color: #212121;
}
</style>