1037 lines
32 KiB
Vue
1037 lines
32 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-sample-wrap" v-if="radio == '数据样品集'">
|
||
<p class="rule-text">编号规则：航次编号_平台类型_设备类型_数据样品类型</p>
|
||
<div class="left4">
|
||
<div v-for="(item, index) in dataList" :key="index" :id="item.tsy_id" class="left4_1">
|
||
<div class="left4_top">
|
||
<p @click="openList(item, 'list')"
|
||
style="font-weight: 400;font-size: 14px;cursor: pointer;color: #409eff">{{ item.dataset_name }} <span
|
||
class="mileage sample-file-total">{{ 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, item.job_type)">{{
|
||
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 list1--block">
|
||
<p>设备类型：</p>
|
||
<span>{{ item.equipment_type }}</span>
|
||
</div>
|
||
|
||
<div class="list1 list1--block">
|
||
<p>数据样品类型：</p>
|
||
<span style="font-weight: bold">{{ item.data_type }}</span>
|
||
</div>
|
||
|
||
</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="dataSearchMap" 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 Vue from 'vue'
|
||
import { setMapLayoutProperty, loadVectorLayer, showHighlightSampleInfo, lineWidthExpression } from '@/utils/vector-layer-utils'
|
||
import { ColorGenerator } from '@/utils/color-generator';
|
||
import { initMapbox, triggerLayerClick } from "@/utils/mapbox-utils";
|
||
|
||
export default {
|
||
name: 'Shuju',
|
||
data() {
|
||
return {
|
||
show: false,
|
||
viewer: null,
|
||
filter: null,
|
||
searchType: [
|
||
{
|
||
label: '航次编号',
|
||
disabled: false
|
||
},
|
||
{
|
||
label: '平台类型',
|
||
disabled: false
|
||
},
|
||
{
|
||
label: '平台名称'
|
||
},
|
||
{
|
||
label: '设备类型',
|
||
disabled: false
|
||
},
|
||
{
|
||
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, // 当前选中的数据样品集合
|
||
// 保存自定义底图
|
||
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[5].disabled = true
|
||
} else {
|
||
this.searchType[5].disabled = false
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
initMapbox("dataSearchMap", {
|
||
tileKey: "world_horizon_1",
|
||
zoom: 3,
|
||
center: [122, 15],
|
||
minZoom: 2,
|
||
maxZoom: 29,
|
||
coastlineOn: false,
|
||
contourOn: false
|
||
});
|
||
},
|
||
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[5].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 => {
|
||
// 先隐藏所有图层，再根据筛选结果显示对应图层
|
||
setMapLayoutProperty('dataSearchMap', 'none')
|
||
|
||
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
|
||
// 加载轨迹图层
|
||
loadVectorLayer({ layerId: Vue.config.layers[item.voyage_name], features: ["line", "symbol"], colors: [colors[i], colors[i]], visibility: "visible", mapId: "dataSearchMap", workspace: "dsds" });
|
||
i++;
|
||
})
|
||
}
|
||
this.dataList = arr
|
||
}
|
||
if (this.radio === '数据样品集') {
|
||
try {
|
||
this.getDataPoints(arr)
|
||
}
|
||
catch (err) {
|
||
console.log(err);
|
||
}
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 数据样品集：仅保留潜次序号以 FDZ、SY 开头的记录
|
||
* @param {Array<Object>} list 搜索结果列表
|
||
* @returns {Array<Object>}
|
||
*/
|
||
filterSampleListByDivingSn(list) {
|
||
const allowedPrefixes = ['FDZ', 'SY']
|
||
return list.filter(item => {
|
||
const divingSn = String(item.diving_sn || '').trim().toUpperCase()
|
||
return allowedPrefixes.some(prefix => divingSn.startsWith(prefix))
|
||
})
|
||
},
|
||
// 添加高亮图层
|
||
addHighlightLayer(voyageName, i) {
|
||
Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${Vue.config.layers[voyageName]}-line`, "line-width", 4);
|
||
this.dataList[i].highlight = true;
|
||
},
|
||
// 清除高亮
|
||
clearHighlight(voyageName, i) {
|
||
Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${Vue.config.layers[voyageName]}-line`, "line-width", lineWidthExpression);
|
||
this.dataList[i].highlight = false;
|
||
},
|
||
// 显示
|
||
addSingleLineImg(voyageName, i) {
|
||
if (i !== null) {
|
||
this.dataList[i].show = true;
|
||
}
|
||
// 显示图层
|
||
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${Vue.config.layers[voyageName]}-symbol`, "visibility", "visible");
|
||
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${Vue.config.layers[voyageName]}-line`, "visibility", "visible");
|
||
},
|
||
|
||
// 隐藏
|
||
removeSingleLineImg(voyageName, i) {
|
||
if (i !== null) {
|
||
this.dataList[i].show = false;
|
||
}
|
||
// 隐藏图层
|
||
// let visibility = Vue.config.maps["dataSearchMap"].getLayoutProperty(`vector-${voyageName}-symbol`, "visibility");
|
||
// visibility = visibility == "visible" ? "none" : "visible";
|
||
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${Vue.config.layers[voyageName]}-symbol`, "visibility", "none");
|
||
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${Vue.config.layers[voyageName]}-line`, "visibility", "none");
|
||
},
|
||
// 清除所有轨迹图层
|
||
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) {
|
||
const filteredArr = this.filterSampleListByDivingSn(arr)
|
||
if (!filteredArr.length) {
|
||
this.dataList = []
|
||
return false
|
||
}
|
||
let i = 0;
|
||
const colors = ColorGenerator.generateDivergingColors(filteredArr.length);
|
||
filteredArr.forEach(item => {
|
||
// 加载测线/站位所在航次的轨迹
|
||
// loadVectorLayer({layerId:item.voyage_name, features:["line", "symbol"], colors:[colors[i], colors[i]], visibility:"visible", mapId:"dataSearchMap", workspace:"dsds"});
|
||
// 添加测线/站位图层
|
||
if (item.job_type == "测线作业") {
|
||
loadVectorLayer({ layerId: `${Vue.config.layers["sample_line_" + item.dataset_name]}`, features: ["line"], colors: ["#FFFFFF", "#FFFFFF"], visibility: "visible", mapId: "dataSearchMap", workspace: "dsds", textField: "sample_name", callbackOnClick: this.setHightItem });
|
||
} else {
|
||
loadVectorLayer({ layerId: `${Vue.config.layers["sample_station_" + item.dataset_name]}`, features: ["symbol"], colors: ["#FFFFFF", "#FFFFFF"], visibility: "visible", mapId: "dataSearchMap", workspace: "dsds", textField: "sample_name", callbackOnClick: this.setHightItem });
|
||
}
|
||
i++;
|
||
})
|
||
const voyageList = filteredArr
|
||
voyageList.map(item => {
|
||
if (item.job_type === '测线作业') {
|
||
// 获取样品列表
|
||
sampleLineList({
|
||
dataset_id: item.tsy_id
|
||
}).then(res => {
|
||
item.sampleArray = res.array
|
||
})
|
||
}
|
||
if (item.job_type === '站位作业') {
|
||
// 获取样品列表
|
||
sampleStationList({
|
||
dataset_id: item.tsy_id
|
||
}).then(res => {
|
||
item.sampleArray = res.array
|
||
})
|
||
}
|
||
})
|
||
this.dataList = voyageList
|
||
},
|
||
|
||
setHightItem(item) {
|
||
// 单击地图上的样品后，在左侧列表中高亮对应项
|
||
this.currenSample = item.properties.tsy_id;
|
||
// this.currenId = item.properties.tsy_id;
|
||
console.log("clicked item:", item);
|
||
},
|
||
|
||
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["dataSearchMap"].resize();
|
||
}, 10);
|
||
},
|
||
toshow() {
|
||
this.show = false
|
||
// 等待布局变化完成后触发地图 resize
|
||
setTimeout(() => {
|
||
Vue.config.maps["dataSearchMap"].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, job_type) {
|
||
this.currenSample = sample.tsy_id
|
||
if (job_type == "测线作业" && (!sample.start_lon || !sample.start_lat || !sample.end_lon || !sample.end_lat) || job_type == "站位作业" && (!sample.sampling_lon || !sample.sampling_lat)) {
|
||
alert('该样品无坐标信息，无法定位！');
|
||
return;
|
||
}
|
||
let lon = 0;
|
||
let lat = 0;
|
||
if (job_type == "测线作业") {
|
||
// lon = Number(sample.start_lon);
|
||
// lat = Number(sample.start_lat);
|
||
lon = (Number(sample.start_lon) + Number(sample.end_lon)) / 2;
|
||
lat = (Number(sample.start_lat) + Number(sample.end_lat)) / 2;
|
||
}
|
||
if (job_type == "站位作业") {
|
||
lon = Number(sample.sampling_lon);
|
||
lat = Number(sample.sampling_lat);
|
||
}
|
||
Vue.config.maps["dataSearchMap"].setZoom(10);
|
||
Vue.config.maps["dataSearchMap"].flyTo({
|
||
center: [lon, lat],
|
||
speed: 10
|
||
});
|
||
let layerId = `vector-${job_type == "测线作业" ? "sample_line" : "sample_station"}_${sample.dataset_name}-${job_type == "测线作业" ? "line" : "symbol"}`;
|
||
let sourceLayerId = `${job_type == "测线作业" ? "sample_line" : "sample_station"}_${sample.dataset_name}`;
|
||
// triggerLayerClick("dataSearchMap", sourceLayerId, layerId, [lon, lat], { "sample_name": sample.sample_name });
|
||
// 单击样品时，同步在地图上显示样品信息弹窗
|
||
showHighlightSampleInfo({ mapId: "dataSearchMap", job_type, sample, layerId, sourceLayerId });
|
||
// 将选中的图层移动到最顶层，传入 undefined 作为第二个参数即可
|
||
Vue.config.maps["dataSearchMap"].moveLayer(layerId, undefined);
|
||
|
||
// vector-sample_station_TS-46-1_FDZ377_Slurp_SWYP-symbol、vector-sample_line_TS2-29-1_SY612_GQXJ_PJZP-line
|
||
// highlightFeaturesByProperty("dataSearchMap", `${job_type == "测线作业" ? "sample_line" : "sample_station"}_${sample.dataset_name}`, layerId, "sample_name", sample.sample_name);
|
||
},
|
||
goHome() {
|
||
this.$router.push({ name: 'home' })
|
||
},
|
||
scrollTo(sectionId) {
|
||
const element = document.getElementById(sectionId);
|
||
if (element) {
|
||
element.scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
// #dataSearchMap {
|
||
// // 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;
|
||
flex-shrink: 0;
|
||
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;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
}
|
||
|
||
/**
|
||
* 数据样品集：编号说明固定在滚动区外，仅列表在 .left4 内滚动
|
||
*/
|
||
.left4-sample-wrap {
|
||
width: 100%;
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
>.rule-text {
|
||
flex-shrink: 0;
|
||
margin-top: 12px;
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
color: #999;
|
||
white-space: nowrap;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
>.left4 {
|
||
flex: 1;
|
||
min-height: 0;
|
||
|
||
/** 数据样品集：文件数量紧跟数据集名称，字号加大 */
|
||
.left4_1 .left4_top p .sample-file-total {
|
||
float: none;
|
||
margin-left: 100px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
vertical-align: baseline;
|
||
}
|
||
}
|
||
|
||
/** 数据样品集：设备类型、数据样品类型各占一整行 */
|
||
.left4_list .list1--block {
|
||
width: 100%;
|
||
flex-basis: 100%;
|
||
}
|
||
}
|
||
|
||
/** 筛选结果列表：占满左侧剩余高度并独立滚动 */
|
||
.left4 {
|
||
width: 100%;
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: #c0c4cc #f0f0f0;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-track {
|
||
background: #f0f0f0;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
background-color: #c0c4cc;
|
||
border-radius: 3px;
|
||
|
||
&:hover {
|
||
background-color: #909399;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
flex-shrink: 0;
|
||
|
||
.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>
|