1452 lines
41 KiB
Vue
1452 lines
41 KiB
Vue
<template>
|
||
<div class="index">
|
||
<div class="banner">
|
||
<img src="../../static/images/banner_index.jpg" alt="">
|
||
<div class="banner_con">
|
||
<div class="banner_top">
|
||
<p>
|
||
面向数据样品贡献方需求，构建用户体验良好的数据样品目录信息平台。
|
||
</p>
|
||
<p>
|
||
提供便捷安全的数据录入，统计分析和可视化检索工具，服务数据样品贡献者、资助机构和管理机构。
|
||
</p>
|
||
</div>
|
||
<div class="banner_bot">
|
||
<div class="bot_left">
|
||
<div class="left1">
|
||
<p>建立深海所海洋地球科学数据样品信息目录</p>
|
||
</div>
|
||
<div class="left2">
|
||
<div class="left2_1">
|
||
<p>{{ statistics.DataTotal }}</p>
|
||
<span>数据样品数</span>
|
||
</div>
|
||
<div class="left2_1">
|
||
<p>{{ statistics.DatasetTotal }}</p>
|
||
<span>数据集个数</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bot_right">
|
||
<div class="right1">
|
||
<p>依托两器、两船等各类海洋科考平台、设备开展航次科考</p>
|
||
</div>
|
||
<div class="right2">
|
||
<div class="right2_1">
|
||
<p>{{ statistics.VoyageTotal }}</p>
|
||
<span>航次个数</span>
|
||
</div>
|
||
<div class="right2_1">
|
||
<p>{{ statistics.DayTotal }}</p>
|
||
<span>航次天数</span>
|
||
</div>
|
||
<div class="right2_1">
|
||
<p>{{ statistics.ShenHaiTotal }}</p>
|
||
<span>“深海勇士”号潜次数</span>
|
||
</div>
|
||
<div class="right2_1">
|
||
<p>{{ statistics.FenDouTotal }}</p>
|
||
<span>“奋斗者”号潜次数</span>
|
||
</div>
|
||
<div class="right2_1">
|
||
<p>{{ statistics.MileageTotal }}</p>
|
||
<span>航行里程</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="guiji">
|
||
<div class="guiji_1">
|
||
<img src="../../static/images/guiji.png" alt="">
|
||
</div>
|
||
<div class="guiji_2">
|
||
<div id="cesiumContainer" ref="cesiumContainer"
|
||
onmouseleave="document.getElementById('mouseWheelTip').style.display = 'none'"
|
||
style="height: 100%;width:100%;">
|
||
<div class="son" style="display: none;">弹框插槽</div>
|
||
<div id="mouseWheelTip" style="display: none;">地图缩放：按下 Ctrl + 鼠标滚轮</div>
|
||
<el-popover
|
||
placement="left-start"
|
||
title="航次列表"
|
||
width="300"
|
||
trigger="hover"
|
||
>
|
||
<div class="contour-line">
|
||
<span>等深线：</span>
|
||
<el-button
|
||
size="mini"
|
||
v-for="depth in depthOptions"
|
||
:key="depth"
|
||
:type="selectedDepths.includes(depth) ? 'primary' : ''"
|
||
@click="toggleDepth(depth)"
|
||
>
|
||
{{ depth }}米
|
||
</el-button>
|
||
</div>
|
||
<el-table
|
||
ref="multipleTable"
|
||
:data="voyageList"
|
||
@selection-change="handleSelectionChange"
|
||
@row-click="handleRowClick"
|
||
highlight-current-row
|
||
:current-row-key="currentVoyage"
|
||
>
|
||
<el-table-column type="selection" width="50" />
|
||
<el-table-column property="voyage_name" label="航次" />
|
||
</el-table>
|
||
<div class="right-top" slot="reference">
|
||
<img class="boat" src="../../static/images/boat_icon.png" alt="">
|
||
</div>
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-box"></div>
|
||
|
||
<div class="dongtai">
|
||
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<div class="dongtai_top">
|
||
<img src="../../static/images/shuju3.png" alt="">
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="dongtai_top">
|
||
<img src="../../static/images/shuju4.png" alt="">
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="dongtai_bot">
|
||
<ul>
|
||
<li v-for="(item, index) in dataUpdateList" :key="index" @click="turnDetailPage(item)">
|
||
<div class="date">
|
||
<p>{{ item.voyage_end_date.slice(8, 10) }}</p>
|
||
<span class="text-ellipsis--3-lines">{{ item.voyage_end_date.slice(0, 7) }}</span>
|
||
</div>
|
||
<div class="des">
|
||
<p>{{ item.voyage_name }}</p>
|
||
<span class="text-ellipsis--3-lines">{{ item.voyage_remark }}</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<ul>
|
||
<li v-for="(item, index) in sampleDataUpdateList" :key="index">
|
||
<div class="date">
|
||
<p>{{ item.create_time.slice(8, 10) }}</p>
|
||
<span class="text-ellipsis--3-lines">{{ item.create_time.slice(0, 7) }}</span>
|
||
</div>
|
||
<div class="des">
|
||
<p>{{ item.dataset_name }}</p>
|
||
<span class="text-ellipsis--3-lines">{{ item.job_type }}</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="shuju" style="padding-bottom: 1px;">
|
||
<!-- <div class="shuju1">-->
|
||
<!-- <div class="shuju1_top">-->
|
||
<!-- <img src="../../static/images/shuju.png" alt="">-->
|
||
<!-- </div>-->
|
||
<!-- <div class="shuju1_con">-->
|
||
<!-- <ul>-->
|
||
<!-- <li @click="turnPage('physicalIndex')">-->
|
||
<!-- <img src="../../static/images/diqiu.png" alt="">-->
|
||
<!-- <p>海洋地球物理与物理海洋</p>-->
|
||
<!-- <p class="sourceData">数据集：<span>-</span> 个 体量：<span>-</span> GB</p>-->
|
||
<!-- </li>-->
|
||
<!-- <li @click="turnPage('biologyIndex')">-->
|
||
<!-- <img src="../../static/images/yangpin.png" alt="">-->
|
||
<!-- <p>海洋生物样品信息（待开发）</p>-->
|
||
<!-- <p class="sourceData">数据集：<span>-</span> 个 体量：<span>-</span> GB</p>-->
|
||
<!-- </li>-->
|
||
<!-- <li>-->
|
||
<!-- <img src="../../static/images/dizhi.png" alt="">-->
|
||
<!-- <p>海洋地质与地球化学（待开发）</p>-->
|
||
<!-- <p class="sourceData">数据集：<span>-</span> 个 体量：<span>-</span> GB</p>-->
|
||
<!-- </li>-->
|
||
<!-- <li>-->
|
||
<!-- <img src="../../static/images/dongwu.png" alt="">-->
|
||
<!-- <p>哺乳动物与海洋声学（待开发）</p>-->
|
||
<!-- <p class="sourceData">数据集：<span>-</span> 个 体量：<span>-</span> GB</p>-->
|
||
<!-- </li>-->
|
||
<!-- <li @click="turnPage('phoneVideoIndex')">-->
|
||
<!-- <img src="../../static/images/shipin.png" alt="">-->
|
||
<!-- <p>深海视频音像图元（待开发）</p>-->
|
||
<!-- <p class="sourceData">数据集：<span>-</span> 个 体量：<span>-</span> GB</p>-->
|
||
<!-- </li>-->
|
||
<!-- </ul>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<div class="shuju2">
|
||
<div class="shuju2_top cursor" @click="turnPage('physicalDataSearchCTD')">
|
||
<img src="../../static/images/shuju1.png" alt="">
|
||
</div>
|
||
<div class="shuju2_con">
|
||
<div class="swiper-visualization wow fadeInUp">
|
||
<div class="swiper-visualization-box">
|
||
<swiper ref="visualizationSwiper" :options="swiperOptions">
|
||
<swiper-slide v-for="(item, index) in visualizationList" :key="index">
|
||
<div class="pic">
|
||
<img :src="item.pic" alt="">
|
||
</div>
|
||
<div class="txt">
|
||
<p>0{{ index + 1 }}</p>
|
||
<div class="txt1">
|
||
<p>{{ item.title }}</p>
|
||
<span>{{ item.des }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="mask" />
|
||
</swiper-slide>
|
||
</swiper>
|
||
<div class="swiper-arrow swiper-prev" />
|
||
<div class="swiper-arrow swiper-next" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="gongju">-->
|
||
<!-- <div class="gongju_top">-->
|
||
<!-- <img src="../../static/images/shuju5.png" alt="">-->
|
||
<!-- </div>-->
|
||
<!-- <div class="gongju_con">-->
|
||
<!-- <ul>-->
|
||
<!-- <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
|
||
<!-- <img src="../../static/images/mofang.png" alt="">-->
|
||
<!-- <p>blast基因分析工具</p>-->
|
||
<!-- </li>-->
|
||
<!-- <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
|
||
<!-- <img src="../../static/images/mofang.png" alt="">-->
|
||
<!-- <p>温盐深分析工具</p>-->
|
||
<!-- </li>-->
|
||
<!-- <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
|
||
<!-- <img src="../../static/images/mofang.png" alt="">-->
|
||
<!-- <p>影像数据物种智能识别</p>-->
|
||
<!-- </li>-->
|
||
<!-- <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
|
||
<!-- <img src="../../static/images/mofang.png" alt="">-->
|
||
<!-- <p>海洋物理生态耦合模式分析</p>-->
|
||
<!-- </li>-->
|
||
<!-- </ul>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<Footer />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Footer from '../components/public/Footer'
|
||
import { getVoyage, statisticsNums } from '../api/home'
|
||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||
import 'swiper/swiper-bundle.css'
|
||
import { sampleDatasetList, voyageRegList } from '@/api/dataTransfer'
|
||
import {
|
||
modifyCesiumMouseWheel, setImageryViewModels
|
||
} from '@/utils/common'
|
||
|
||
const Cesium = window.Cesium
|
||
|
||
export default {
|
||
name: 'Index',
|
||
components: {
|
||
swiper,
|
||
swiperSlide,
|
||
Footer
|
||
},
|
||
data() {
|
||
return {
|
||
statistics: {},
|
||
movementTimer: null,
|
||
iconImgW: require('../../static/images/14-w.png'),
|
||
map: null,
|
||
visualizationList: [
|
||
{
|
||
pic: require('../../static/images/shuju2_bg2.png'),
|
||
title: '专业数据分析',
|
||
des: '载人深潜温盐深数据',
|
||
routerName: ''
|
||
},
|
||
{
|
||
pic: require('../../static/images/shuju2_bg.png'),
|
||
title: '服务资助航次',
|
||
des: '深海技术创新中心共享航次',
|
||
routerName: ''
|
||
},
|
||
{
|
||
pic: require('../../static/images/shuju2_bg3.png'),
|
||
title: '构建应急搜寻处置快速响应能力',
|
||
des: '应急搜捞应用',
|
||
routerName: 'SalvageHome'
|
||
}
|
||
],
|
||
swiperOptions: {
|
||
loop: true,
|
||
loopAdditionalSlides: 3,
|
||
initialSlide: 1,
|
||
spaceBetween: 35,
|
||
navigation: {
|
||
nextEl: '.swiper-visualization .swiper-next',
|
||
prevEl: '.swiper-visualization .swiper-prev'
|
||
},
|
||
breakpoints: {
|
||
768: {
|
||
spaceBetween: 10
|
||
}
|
||
}
|
||
},
|
||
voyageList: [], // 航次列表数据
|
||
currentVoyage: null, // 当前选中的航次名称
|
||
highlightLayer: null, // 存储当前高亮图层实例
|
||
dataUpdateList: [],
|
||
sampleDataUpdateList: [],
|
||
viewer: null,
|
||
// 地图图层基础地址
|
||
CesiumHostAddr: '',
|
||
// 保存自定义底图
|
||
imageryViewModels: [],
|
||
multipleSelection: [], // 当前选中的航次数组
|
||
trackLayerMap: {}, // 存储每个航次对应的轨迹图层实例 { voyage_name: layerInstance }
|
||
depthOptions: [4500, 6000], // 可扩展更多深度值
|
||
selectedDepths: [], // 存储当前选中的深度值
|
||
contourLayerMap: {}, // 改为对象形式，以深度值作为key存储对应的图层实例
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
swiper() {
|
||
return this.$refs.visualizationSwiper.swiper
|
||
}
|
||
},
|
||
created() {
|
||
this.CesiumHostAddr = process.env.NODE_ENV === 'development' ? 'http://124.222.8.13:9801/' : `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`
|
||
this.getVoyageList()
|
||
this.getStatisticsNums()
|
||
this.dataUpdate()
|
||
this.sampleDataUpdate()
|
||
},
|
||
mounted() {
|
||
this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
||
this.initCesium()
|
||
},
|
||
methods: {
|
||
// 查询航次列表
|
||
getVoyageList() {
|
||
getVoyage({
|
||
start: 0,
|
||
limit: 10
|
||
}).then(res => {
|
||
this.voyageList = res.page.records
|
||
this.$nextTick(() => {
|
||
// 默认全选当前页
|
||
this.$refs.multipleTable.toggleAllSelection()
|
||
})
|
||
})
|
||
},
|
||
|
||
// 初始化cesium
|
||
initCesium() {
|
||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
|
||
this.viewer = new Cesium.Viewer('cesiumContainer', {
|
||
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)
|
||
});
|
||
|
||
// 改写 Cesium 原生鼠标滚轮事件，地图缩放改为按下 Ctrl + 鼠标滚轮
|
||
modifyCesiumMouseWheel(this.viewer);
|
||
|
||
// // 增加海岸线
|
||
// 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)
|
||
},
|
||
// 行点击事件处理
|
||
handleRowClick(row, column, event) {
|
||
// 如果点击的是当前已选中的行，则取消选择
|
||
if (this.currentVoyage === row.voyage_name) {
|
||
this.clearHighlight();
|
||
return;
|
||
}
|
||
|
||
// 设置新的当前选中航次
|
||
this.currentVoyage = row.voyage_name;
|
||
|
||
// 先移除可能存在的旧高亮图层
|
||
if (this.highlightLayer) {
|
||
this.viewer.imageryLayers.remove(this.highlightLayer);
|
||
this.highlightLayer = null;
|
||
}
|
||
|
||
// 加载新高亮图层
|
||
this.addHighlightLayer(row.voyage_name);
|
||
},
|
||
|
||
// 添加高亮图层
|
||
addHighlightLayer(voyageName) {
|
||
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);
|
||
},
|
||
|
||
// 清除高亮
|
||
clearHighlight() {
|
||
// 移除地图上的高亮图层
|
||
if (this.highlightLayer) {
|
||
this.viewer.imageryLayers.remove(this.highlightLayer);
|
||
this.highlightLayer = null;
|
||
}
|
||
|
||
// 清除表格高亮
|
||
this.currentVoyage = null;
|
||
|
||
// 如果需要清除行高亮，可以调用El-Table的方法
|
||
this.$refs.multipleTable.setCurrentRow(null);
|
||
},
|
||
// 处理表格选择项变化
|
||
handleSelectionChange(val) {
|
||
// 获取新旧选中的航次名称数组
|
||
const newVoyages = val.map(item => item.voyage_name);
|
||
const oldVoyages = this.multipleSelection.map(item => item.voyage_name);
|
||
|
||
// 找出需要新增的航次（在新数组不在旧数组）
|
||
const voyagesToAdd = newVoyages.filter(voyage => !oldVoyages.includes(voyage));
|
||
// 找出需要移除的航次（在旧数组不在新数组）
|
||
const voyagesToRemove = oldVoyages.filter(voyage => !newVoyages.includes(voyage));
|
||
|
||
// 移除不再需要的轨迹图层
|
||
voyagesToRemove.forEach(voyage => {
|
||
this.removeSingleLineImg(voyage);
|
||
});
|
||
|
||
// 添加新选择的轨迹图层
|
||
voyagesToAdd.forEach(voyage => {
|
||
// 从val中找出对应航次的完整数据项
|
||
const correspondingItem = val.find(item => item.voyage_name === voyage);
|
||
if (correspondingItem) {
|
||
this.addSingleLineImg(correspondingItem);
|
||
}
|
||
});
|
||
|
||
// 更新当前选中项
|
||
this.multipleSelection = val;
|
||
},
|
||
// 添加单个航次的轨迹图层
|
||
addSingleLineImg(item) {
|
||
const voyageName = item.voyage_name;
|
||
|
||
// 检查该航次图层是否已存在，避免重复添加
|
||
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; // 以航次名为键存储图层实例
|
||
},
|
||
|
||
// 移除单个航次的轨迹图层
|
||
removeSingleLineImg(voyageName) {
|
||
const layerInstance = this.trackLayerMap[voyageName];
|
||
if (layerInstance) {
|
||
// 从Cesium的imageryLayers中移除该图层
|
||
this.viewer.imageryLayers.remove(layerInstance);
|
||
// 删除映射表中对该图层的引用
|
||
delete this.trackLayerMap[voyageName];
|
||
} else {
|
||
console.warn(`未找到航次 ${voyageName} 的轨迹图层`);
|
||
}
|
||
},
|
||
toggleDepth(depth) {
|
||
// **方案1: 如果要求同时只能有一个按钮被选中**
|
||
// this.selectedDepths = [depth]; // 数组只保留当前点击的深度
|
||
|
||
// **方案2: 允许同时多个按钮被选中，点击切换自身状态**
|
||
const index = this.selectedDepths.indexOf(depth);
|
||
if (index > -1) {
|
||
this.selectedDepths.splice(index, 1); // 如果已选中，则移除
|
||
this.removeSingleContourLine(depth); // 移除指定深度的单条等深线
|
||
} else {
|
||
this.selectedDepths.push(depth); // 如果未选中，则添加
|
||
this.addSingleContourLine(depth); // 添加指定深度的单条等深线
|
||
}
|
||
},
|
||
// 添加单条指定深度的等深线
|
||
addSingleContourLine(deep) {
|
||
// 先检查该深度的图层是否已存在，避免重复创建
|
||
if (this.contourLayerMap[deep]) {
|
||
// 图层已存在，只需将其设置为显示（如果需要控制显示隐藏的话）
|
||
console.warn(`等深线 ${deep} 米图层已存在`);
|
||
return;
|
||
}
|
||
|
||
const contour = new Cesium.WebMapTileServiceImageryProvider({
|
||
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/ougp:contour${deep}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
|
||
layer: `ougp:contour${deep}`,
|
||
style: 'default',
|
||
format: 'image/png',
|
||
tileMatrixSetID: 'EPSG:4326',
|
||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||
});
|
||
|
||
// 添加图层并存储引用
|
||
const layerInstance = this.viewer.imageryLayers.addImageryProvider(contour);
|
||
this.contourLayerMap[deep] = layerInstance; // 以深度值为键存储图层实例
|
||
},
|
||
|
||
// 移除单条指定深度的等深线
|
||
removeSingleContourLine(deep) {
|
||
// 根据深度值从映射表中获取对应的图层实例
|
||
const layerInstance = this.contourLayerMap[deep];
|
||
if (layerInstance) {
|
||
// 从Cesium的imageryLayers中移除该图层
|
||
this.viewer.imageryLayers.remove(layerInstance);
|
||
// 删除映射表中对该图层的引用
|
||
delete this.contourLayerMap[deep];
|
||
} else {
|
||
console.warn(`未找到 ${deep} 米等深线图层`);
|
||
}
|
||
},
|
||
// 统计数据
|
||
getStatisticsNums() {
|
||
statisticsNums().then(res => {
|
||
this.statistics = res.map
|
||
})
|
||
},
|
||
// 数据更新动态
|
||
dataUpdate() {
|
||
voyageRegList({
|
||
start: 0,
|
||
limit: 3,
|
||
group: 10,
|
||
order: 'voyage_end_date',
|
||
type: 'DESC'
|
||
}).then(res => {
|
||
this.dataUpdateList = res.page.records
|
||
})
|
||
},
|
||
// 跳转到航次详情页
|
||
turnDetailPage(item) {
|
||
this.$router.push({
|
||
name: 'dataDetail',
|
||
query: {
|
||
voyage_name: item.voyage_name
|
||
}
|
||
})
|
||
},
|
||
// 样品数据引用动态
|
||
sampleDataUpdate() {
|
||
sampleDatasetList({
|
||
start: 0,
|
||
limit: 3,
|
||
group: 10,
|
||
}).then(res => {
|
||
console.log(res)
|
||
this.sampleDataUpdateList = res.page.records
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.index {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #ecf2f4;
|
||
|
||
.banner {
|
||
width: 100%;
|
||
height: 700px;
|
||
position: relative;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.banner_con {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 35%;
|
||
z-index: 999;
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.banner_top {
|
||
margin-bottom: 6%;
|
||
width: 80%;
|
||
height: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
p {
|
||
font-size: 21px;
|
||
color: #fff;
|
||
line-height: 36px;
|
||
}
|
||
}
|
||
|
||
.banner_bot {
|
||
width: 80%;
|
||
height: 150px;
|
||
border-radius: 10px;
|
||
background: rgba($color: #fff, $alpha: 0.3);
|
||
box-sizing: border-box;
|
||
padding: 25px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.bot_left {
|
||
width: 35%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-right: 1px solid rgba($color: #fff, $alpha: 0.3);
|
||
|
||
.left1 {
|
||
width: 100%;
|
||
height: 100%;
|
||
text-align: center;
|
||
|
||
p {
|
||
font-size: 16px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.left2 {
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.left2_1 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 40%;
|
||
height: auto;
|
||
|
||
p {
|
||
font-size: 34px;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
line-height: 40px;
|
||
font-family: DIN-Bold;
|
||
}
|
||
|
||
span {
|
||
margin-top: 8px;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bot_right {
|
||
width: 62%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.right1 {
|
||
width: 100%;
|
||
height: 100%;
|
||
text-align: center;
|
||
|
||
p {
|
||
font-size: 16px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.right2 {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
|
||
.right2_1 {
|
||
width: 20%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
p {
|
||
font-size: 34px;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
line-height: 40px;
|
||
font-family: DIN-Bold;
|
||
}
|
||
|
||
span {
|
||
margin-top: 8px;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.guiji {
|
||
width: 100%;
|
||
height: auto;
|
||
margin: 50px 0;
|
||
margin-bottom: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
.guiji_1 {
|
||
margin-bottom: 20px;
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
img {
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
.guiji_2 {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 800px;
|
||
display: flex;
|
||
/* 导航列表居中显示 */
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.daohang {
|
||
position: absolute;
|
||
top: 20px;
|
||
max-width: 50%;
|
||
height: 60px;
|
||
background: rgba($color: #000, $alpha: 0.7);
|
||
border-radius: 10px;
|
||
z-index: 8888;
|
||
overflow: hidden;
|
||
|
||
ul {
|
||
width: 100%;
|
||
height: 60px;
|
||
box-sizing: border-box;
|
||
padding-left: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
overflow: auto;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
/* 滚动槽 */
|
||
&::-webkit-scrollbar-track {
|
||
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
|
||
border-radius: 10px;
|
||
background: #010e32;
|
||
}
|
||
|
||
/* 滚动条滑块 */
|
||
&::-webkit-scrollbar-thumb {
|
||
border-radius: 10px;
|
||
/* background:rgba(0,0,0,0.3); */
|
||
background: #203e86;
|
||
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
li {
|
||
// margin-right: 20px;
|
||
width: 120px;
|
||
height: 50px;
|
||
white-space: nowrap;
|
||
|
||
&.active {
|
||
a {
|
||
background: #0a84c1;
|
||
}
|
||
}
|
||
|
||
a {
|
||
display: block;
|
||
line-height: 40px;
|
||
margin-top: 5px;
|
||
height: 40px;
|
||
font-size: 15px;
|
||
color: #fff;
|
||
padding: 0 15px;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.cover {
|
||
width: 100%;
|
||
height: 800px;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 3000;
|
||
background-color: pink;
|
||
}
|
||
}
|
||
|
||
.shuju {
|
||
padding-bottom: 170px;
|
||
padding-top: 70px;
|
||
width: 100%;
|
||
height: auto;
|
||
background: url(../../static/images/secBg.jpg) center no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.shuju1 {
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 70px;
|
||
|
||
.shuju1_top {
|
||
margin-bottom: 50px;
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
img {
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
.shuju1_con {
|
||
width: 85%;
|
||
height: 390px;
|
||
|
||
ul {
|
||
width: 100%;
|
||
height: 390px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
li {
|
||
position: relative;
|
||
width: 18%;
|
||
height: 340px;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.35s;
|
||
|
||
&::after {
|
||
display: none;
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba($color: #0a84c1, $alpha: 0.5);
|
||
}
|
||
|
||
&:hover {
|
||
height: 390px;
|
||
|
||
&::after {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
&:first-child {
|
||
background: url(../../static/images/diqiu_bg.png) center no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
background: url(../../static/images/diqiu_bg1.png) center no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
background: url(../../static/images/dizhi_bg.png) center no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
&:nth-child(4) {
|
||
background: url(../../static/images/dongwu_bg.png) center no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
&:nth-child(5) {
|
||
background: url(../../static/images/shipin_bg.png) center no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
img {
|
||
position: relative;
|
||
z-index: 99;
|
||
width: auto;
|
||
height: auto;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
p {
|
||
position: relative;
|
||
z-index: 99;
|
||
width: 70%;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
text-align: center;
|
||
}
|
||
|
||
.sourceData {
|
||
padding-top: 55px;
|
||
width: 96%;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shuju2 {
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 70px;
|
||
|
||
.shuju2_top {
|
||
margin-bottom: 50px;
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
img {
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
.shuju2_con {
|
||
width: 100%;
|
||
height: auto;
|
||
position: relative;
|
||
|
||
.swiper-visualization {
|
||
overflow: hidden;
|
||
padding: 40px 0;
|
||
|
||
.swiper-visualization-box {
|
||
position: relative;
|
||
width: 883px;
|
||
margin: 0 auto;
|
||
|
||
.swiper-arrow {
|
||
position: absolute;
|
||
width: 62px;
|
||
height: 62px;
|
||
top: 224px;
|
||
background-repeat: no-repeat;
|
||
// border: 2px solid #ffffff;
|
||
background-position: center;
|
||
z-index: 2;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.swiper-prev {
|
||
left: -50px;
|
||
background-image: url(../../static/images/arrow-left.png);
|
||
}
|
||
|
||
.swiper-next {
|
||
right: -50px;
|
||
background-image: url(../../static/images/arrow-right.png);
|
||
}
|
||
|
||
.swiper-container {
|
||
overflow: visible;
|
||
|
||
.swiper-slide {
|
||
position: relative;
|
||
opacity: 0.6;
|
||
transform: scale(0.9);
|
||
|
||
.pic {
|
||
display: block;
|
||
position: relative;
|
||
padding-top: 55.28%;
|
||
border: 2px solid #ffffff;
|
||
box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.22);
|
||
|
||
img {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
}
|
||
|
||
.txt {
|
||
position: absolute;
|
||
top: 5%;
|
||
left: 5%;
|
||
z-index: 10;
|
||
font-weight: bold;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: baseline;
|
||
font-size: 22px;
|
||
padding: 52px 0 40px;
|
||
opacity: 0.3;
|
||
|
||
p {
|
||
font-size: 60px;
|
||
color: #fff;
|
||
}
|
||
|
||
.txt1 {
|
||
margin-top: 50px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
p {
|
||
font-size: 36px;
|
||
color: #fff;
|
||
}
|
||
|
||
span {
|
||
font-size: 28px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mask {
|
||
position: absolute;
|
||
width: 1083px;
|
||
height: 186px;
|
||
bottom: -40px;
|
||
left: -109px;
|
||
right: 0;
|
||
// background: url(~@/assets/images/daoying.png) no-repeat center /
|
||
// cover;
|
||
// opacity: 0;
|
||
}
|
||
}
|
||
|
||
.swiper-slide-active {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
|
||
.txt,
|
||
.mask {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bg-box {
|
||
margin-top: -450px;
|
||
background: url(../../static/images/secBg.jpg) center no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 700px;
|
||
}
|
||
|
||
.dongtai {
|
||
margin-top: -180px;
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
//background-color: #ccc;
|
||
|
||
.el-row {
|
||
width: 92%;
|
||
}
|
||
|
||
.dongtai_top {
|
||
width: 100%;
|
||
height: auto;
|
||
margin-bottom: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
img {
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
.dongtai_bot {
|
||
width: 85%;
|
||
height: auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
ul {
|
||
width: 45%;
|
||
height: auto;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
li {
|
||
margin-bottom: 35px;
|
||
width: 100%;
|
||
height: 170px;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
box-sizing: border-box;
|
||
padding: 25px;
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0 0 5px #ccc;
|
||
cursor: pointer;
|
||
transition: all 0.35s;
|
||
|
||
&:hover {
|
||
box-shadow: 0 10px 15px #ccc;
|
||
|
||
.date {
|
||
background: #13a1f0;
|
||
|
||
p {
|
||
color: #fff;
|
||
}
|
||
|
||
span {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.des {
|
||
p {
|
||
color: #13a1f0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.date {
|
||
margin-right: 30px;
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #ebeff5;
|
||
|
||
p {
|
||
font-size: 32px;
|
||
color: #02203c;
|
||
line-height: 35px;
|
||
font-family: DIN-Bold;
|
||
}
|
||
|
||
span {
|
||
color: #02203c;
|
||
font-size: 16px;
|
||
font-family: DIN-Bold;
|
||
}
|
||
}
|
||
|
||
.des {
|
||
width: 85%;
|
||
height: 100px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
|
||
p {
|
||
font-size: 18px;
|
||
color: #212121;
|
||
font-weight: bold;
|
||
}
|
||
|
||
span {
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.gongju {
|
||
margin-top: 60px;
|
||
margin-bottom: 70px;
|
||
height: auto;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.gongju_top {
|
||
margin-bottom: 30px;
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
img {
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
.gongju_con {
|
||
width: 85%;
|
||
height: 240px;
|
||
|
||
ul {
|
||
width: 100%;
|
||
height: 240px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
li {
|
||
cursor: pointer;
|
||
width: 23%;
|
||
height: 240px;
|
||
border-radius: 5px;
|
||
background: url(../../static/images/sanBg.png) center no-repeat;
|
||
background-size: 100% 100%;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
img {
|
||
width: auto;
|
||
height: auto;
|
||
display: block;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
p {
|
||
font-size: 18px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
.BMap_cpyCtrl {
|
||
display: none;
|
||
}
|
||
|
||
.son {
|
||
position: absolute;
|
||
left: 1450px;
|
||
top: 418px;
|
||
background-color: #062f59c7;
|
||
color: rgb(253, 253, 253);
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
border: 1px solid #7ba9cacf;
|
||
font-size: 12px;
|
||
z-index: 1000;
|
||
}
|
||
|
||
#mouseWheelTip {
|
||
position: absolute;
|
||
left: 5px;
|
||
bottom: 5px;
|
||
z-index: 100;
|
||
color: #fff;
|
||
}
|
||
|
||
.cesium-viewer-bottom {
|
||
display: none !important;
|
||
}
|
||
|
||
#map {
|
||
position: relative;
|
||
}
|
||
|
||
.right-top {
|
||
width: 30px;
|
||
height: 30px;
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 20px;
|
||
z-index: 1000;
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
padding: 8px;
|
||
}
|
||
|
||
.boat {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.text-ellipsis--3-lines {
|
||
/* 限制显示的行数 */
|
||
-webkit-line-clamp: 3;
|
||
/* 将对象作为弹性伸缩盒子模型显示（必要） */
|
||
display: -webkit-box;
|
||
/* 设置或检索伸缩盒对象的子元素的排列方式为垂直（必要） */
|
||
-webkit-box-orient: vertical;
|
||
/* 隐藏超出容器的内容 */
|
||
overflow: hidden;
|
||
/* 文本溢出时显示省略号 */
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 增强当前行高亮效果 */
|
||
.el-table__body tr.current-row>td {
|
||
background-color: #ecf5ff !important;
|
||
color: #409eff;
|
||
}
|
||
|
||
/* 鼠标悬停效果 */
|
||
.el-table__body tr:hover>td {
|
||
background-color: #f5f7fa !important;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|