986 lines
29 KiB
Vue
986 lines
29 KiB
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_list">
|
|
<div class="list1">
|
|
<p>航次：</p>
|
|
<span class="hover-color" @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 class="left4_top">
|
|
<p @click="openList(item, 'list')" style="font-weight: 400;font-size: 14px;cursor: pointer" :style="currentSample === item.tsy_id ? '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>
|
|
|
|
</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" @click="turnDeatilPage(item)">
|
|
<div class="left4_top">
|
|
<p :style="currentVoyage === item.tsy_id ? 'color: #409eff' : ''">{{ 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: 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>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getMenu,
|
|
getDataList,
|
|
dataPoints,
|
|
sampleLineList,
|
|
sampleStationList
|
|
} from '../api/dataSearch'
|
|
import { getParamsList, getVoyageLine } from '../api/home'
|
|
import Cookies from 'js-cookie'
|
|
import {
|
|
setImageryViewModels
|
|
} from '@/utils/common'
|
|
|
|
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: '',
|
|
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: []
|
|
}
|
|
},
|
|
created() {
|
|
this.getParams()
|
|
},
|
|
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
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
// 获取从参数列表
|
|
getParams() {
|
|
getParamsList().then(res => {
|
|
const arr = res.array
|
|
if (arr.length) {
|
|
arr.forEach(item => {
|
|
if (item.param_name === 'CesiumHostAddr') {
|
|
// this.CesiumHostAddr = item.param_value
|
|
this.CesiumHostAddr = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/tiles/`
|
|
this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
|
this.initCesium()
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 获取菜单
|
|
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 === '航次') {
|
|
this.dataList = arr
|
|
if (arr.length) {
|
|
arr.forEach(item => {
|
|
this.trackLineImage(item)
|
|
})
|
|
}
|
|
}
|
|
if (this.radio === '数据样品集') {
|
|
this.getDataPoints(arr)
|
|
}
|
|
})
|
|
},
|
|
// 航次导航图层
|
|
trackLineImage(item) {
|
|
// 查询轨迹是否渲染过，避免重复渲染
|
|
if (this.rendered.length) {
|
|
const isRendered = this.rendered.find(ele => ele === item.voyage_name)
|
|
if (isRendered) return
|
|
}
|
|
if (!item.voyage_name) return
|
|
// 轨迹影像参数
|
|
const trackLine = new Cesium.WebMapTileServiceImageryProvider(
|
|
{
|
|
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.voyage_name}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
|
|
layer: `dsds:${item.voyage_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.voyage_name)
|
|
},
|
|
// 测线业务相关图层
|
|
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() {
|
|
if (this.trackLineLayers.length) {
|
|
this.trackLineLayers.forEach(line => {
|
|
this.viewer.imageryLayers.remove(line)
|
|
})
|
|
}
|
|
this.rendered = []
|
|
},
|
|
// 搜素
|
|
getSearch() {
|
|
this.clearAll()
|
|
this.getList()
|
|
},
|
|
// 获取数据样品集坐标点位
|
|
getDataPoints(arr) {
|
|
if (!arr.length) return false
|
|
arr.forEach(item => {
|
|
this.trackLineImage(item)
|
|
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) {
|
|
res.array.forEach(sample => {
|
|
this.sampleLineImage(sample)
|
|
})
|
|
}
|
|
})
|
|
}
|
|
if (item.job_type === '站位作业') {
|
|
// 获取样品列表
|
|
sampleStationList({
|
|
dataset_id: item.tsy_id
|
|
}).then(res => {
|
|
item.sampleArray = res.array
|
|
// 格式化坐标点
|
|
if (res.array.length) {
|
|
res.array.forEach(sample => {
|
|
this.sampleLineImage(sample)
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
this.dataList = voyageList
|
|
},
|
|
|
|
// 初始化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.$router.push({
|
|
name: 'dataDetail',
|
|
query: {
|
|
voyage_name: item.voyage_name
|
|
}
|
|
})
|
|
},
|
|
shousuo() {
|
|
this.show = true
|
|
},
|
|
toshow() {
|
|
this.show = false
|
|
},
|
|
// 展开数据样品列表
|
|
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">
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
</style>
|