revisit
/
DSDSWeb
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

首页航线绘制完成

This commit is contained in:
琪 2024-07-13 18:00:03 +08:00
parent 58a0ae87a2
commit e136af6032
6 changed files with 395 additions and 403 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config/dev.env.js
View File

@ -17,7 +17,7 @@ module.exports = merge(prodEnv, {
// VUE_APP_API_URL: '"http://10.10.150.237/"'
VUE_APP_BASE_API: '"/api"',
VUE_APP_BASE_APIURL: '"http://10.0.90.70/api"',
VUE_APP_BASE_APIURL: '"http://ds.hzzxq.com/api"',
VUE_APP_FULL_API: '"http://10.10.151.5:5555"',
VUE_APP_BASE_API_FRONT: '"http://10.10.150.128:8080/satellitePub/pub/index.html"',
VUE_APP_FILE_API: '"http://10.10.151.5:5555/archives"',

10
src/api/dataSearch.js Normal file
View File

@ -0,0 +1,10 @@
import request from '@/utils/request'
// 获取航次列表
export function getDataSearch(query) {
return request({
url: '/search/page.htm',
method: 'get',
params: query
})
}

8
src/api/home.js
View File

@ -58,7 +58,7 @@ export function saveVisits(data) {
export function getVoyage() {
return request({
url: '/voyage/reg/page.htm',
method: 'post'
method: 'get'
})
}
@ -70,10 +70,10 @@ export function getVoyage() {
// type: 'application/x-www-form-urlencoded'
// })
// }
export function getVoyageLine(voyage_id) {
export function getVoyageLine(query) {
return request({
url: '/voyage/navigation/list.htm?voyage_id=' + voyage_id,
url: '/voyage/navigation/list.htm',
method: 'get',
type: 'application/x-www-form-urlencoded'
params: query
})
}

8
src/style/style.scss
View File

@ -1387,10 +1387,10 @@ header{
height: 40px;
}
.el-input {
width: 50%;
height: 40px;
}
//.el-input {
// width: 50%;
// height: 40px;
//}
.el-button {
width: 12%;
font-size: 20px;

573
src/views/dataSearch.vue
View File

@ -1,85 +1,116 @@
<template>
<div class="shuju">
<div class="shuju_con">
<div v-show="showa == false" class="left">
<div v-show="show == false" class="left">
<div class="left1">
<div class="xiala">
<el-select v-model="value" placeholder="平台类型">
<el-select v-model="searchTypeValue" placeholder="">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
v-for="(item, index) in searchType"
:key="index"
:label="item"
:value="item"
/>
</el-select>
</div>
<el-input v-model="type_b" placeholder="" />
<el-input v-model="searchValue" placeholder="" />
<el-button
class="sousuo"
type="primary"
icon="el-icon-search"
@click="getList"
/>
<el-button
class="caidan"
type="default"
icon="el-icon-s-operation"
@click="openList(0,'列表')"
@click="openDialog"
/>
</div>
<div class="left2">
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type" @close="handleClose(tag)" @click="tosearch(tag.name)">
{{ tag.name }}
</el-tag>
</div>
<div class="left3">
<p>搜索结果</p>
<div class="left3_1">
<el-radio-group v-model="radio">
<el-radio :label="3">数据样品</el-radio>
<el-radio :label="6">航次</el-radio>
<el-radio label="数据样品集">数据样品集</el-radio>
<el-radio label="航次">航次</el-radio>
</el-radio-group>
</div>
<div class="left3_2">
<span>排序:</span>
<el-select v-model="value1" placeholder="航次名称">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
<div class="left4">
<div v-for="(item,index) in detail" :key="index" class="left4_1" @click="turnDeatilPage(item)">
<div class="left4" v-if="radio == '数据样品集'">
<div v-for="(item,index) in dataList" :key="index" class="left4_1" @click="turnDeatilPage(item)">
<div class="left4_top">
<p>{{ item.title }}</p>
<span>{{ item.year }}</span>
<p>{{ item.dataset_name }} <span class="mileage">{{item.file_total}}</span></p>
<span class="org">{{ item.create_time }}</span>
</div>
<div class="left4_list">
<div class="list1">
<p>航次：</p>
<span>{{ item.hangci }}</span>
<span>{{ item.voyage_name }}</span>
</div>
<div class="list1">
<p>平台：</p>
<span>{{ item.pingtai }}</span>
<p>平台类型：</p>
<span>{{ item.platform_type }}</span>
</div>
<div class="list1">
<p>设备：</p>
<span>{{ item.shebei }}</span>
<p>平台名称：</p>
<span>{{ item.platform_name }}</span>
</div>
<div class="list1">
<p>数据样品：</p>
<span>{{ item.shuju }}</span>
<p>潜次序号：</p>
<span>{{ item.diving_sn }}</span>
</div>
<div class="list1">
<p>设备类型：</p>
<span>{{ item.equipment_type }}</span>
</div>
<div class="list1">
<p>数据样品类型：</p>
<span>{{ item.data_type }}</span>
</div>
<div class="list1">
<p>作业类型：</p>
<span>{{ item.job_type }}</span>
</div>
</div>
</div>
</div>
<div class="left4" v-if="radio == '航次'">
<div v-for="(item,index) in dataList" :key="index" class="left4_1" @click="turnDeatilPage(item)">
<div class="left4_top">
<p>{{ item.voyage_name }} <span class="mileage">{{item.voyage_mileage}}海里</span></p>
<span class="org">{{ item.funding_org }}</span>
</div>
<div class="left4_list">
<div class="list1">
<p>科考船舶：</p>
<span>{{ item.ship_name }}</span>
</div>
<div class="list1">
<p>航次首席：</p>
<span>{{ item.shouxi }}</span>
<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>
@ -89,247 +120,211 @@
<img src="../../static/images/arrow_nav.png" alt="" @click="shousuo">
</div>
</div>
<div v-show="showa" class="arrow_r" @click="toshow">
<div v-show="show" class="arrow_r" @click="toshow">
<img src="../../static/images/arrow_nav1.png" alt="">
</div>
<div class="right">
<GMRT :is-line="line" />
<!-- <baidu-map
:center="center"
:zoom="zoom"
map-type="BMAP_SATELLITE_MAP"
style="width: 100%; height: 100%"
@ready="handler"
>
<bm-marker
v-for="(item, index) in list"
:key="index"
:position="item.dingwei"
:dragging="true"
:icon="item.pic"
@click="totap(item)"
>
<bm-label
:content="item.content"
:offset="{ width: -35, height: 30 }"
/>
</bm-marker>
</baidu-map> -->
<div id="cesiumContainerData" style="height: 100%;width:100%;" />
</div>
</div>
<!-- 航次名称弹窗-->
<el-dialog
:title="dialogTitle"
:visible.sync="showListDialog"
:close-on-click-modal="false"
:height="300"
:append-to-body="true"
title="请选择航次"
:visible.sync="dialog1"
width="800px"
>
<list-dialog v-if="showListDialog" :choose-data="chooseData" @handleClose="closeListForm" @handleConfirm="confirmListForm" />
:before-close="handleClose1">
<el-table ref="tableData" stripe border :data="tableData1" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" height="600px">
<el-table-column type="index" width="50"/>
<el-table-column prop="voyage_name" label="航次名称" />
<el-table-column prop="ship_name" label="科考船舶" />
<el-table-column prop="voyage_start_date" label="离岗日期" />
<el-table-column prop="voyage_end_date" label="返岗日期" />
<el-table-column prop="voyage_officer" label="首席" />
<el-table-column prop="description" label="参航人数" />
<el-table-column prop="funding_org" label="资助机构" />
<el-table-column prop="funding_code" label="资助编号" />
</el-table>
</el-dialog>
</div>
</template>
<script>
import ListDialog from './listDialog.vue'
import GMRT from './GMRT.vue'
import { getDataSearch } from '../api/dataSearch'
const Cesium = window.Cesium
export default {
name: 'Shuju',
components: {
ListDialog,
GMRT
},
data() {
return {
line: true,
showListDialog: false,
chooseData: '',
dialogTitle: '',
type_b: '',
showa: false,
center: { lng: 118.962643, lat: 35.618913 },
zoom: 3,
list: [
{
dingwei: {
lng: 119.054629,
lat: 36.373917
show: false,
viewer: null,
color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE],
searchType: ['航次名称', '平台类型', '平台名称', '设备类型', '数据样品类型', '数据集名称', '航次首席'],
searchTypeValue: '航次名称',
radio: '航次',
dataList: [],
searchValue: '',
dialog1: false,
queryData1: {
pageSize: 20,
pageNum: 1
},
content: 'DY31-II-W1306-BC',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
tableData1: [],
}
},
{
dingwei: {
lng: 119.919302,
lat: 34.226755
created() {
},
content: 'DY31-II-W1306-BC',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
mounted() {
this.initCesium()
},
{
dingwei: {
lng: 119.560555,
lat: 34.421374
},
content: 'DY31-II-W1306-BC',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
},
{
dingwei: {
lng: 116.442213,
lat: 35.556921
},
content: 'DY31-II-W1306-BC',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
}
],
radio: 3,
options: [
{
value: '选项1',
label: '类型1'
},
{
value: '选项2',
label: '类型2'
},
{
value: '选项3',
label: '类型3'
},
{
value: '选项4',
label: '类型4'
},
{
value: '选项5',
label: '类型5'
}
],
value: '',
options1: [
{
value: '选项1',
label: '航次1'
},
{
value: '选项2',
label: '航次2'
},
{
value: '选项3',
label: '航次3'
},
{
value: '选项4',
label: '航次4'
},
{
value: '选项5',
label: '航次5'
}
],
value1: '',
tags: [
{ name: '探索一号', type: 'info' },
{ name: '船载CTD', type: 'info' }
],
detail: [
{
title: '岩石SY510-TXS-YS-01',
year: '2012',
hangci: 'TS-14',
pingtai: '着陆器',
shebei: '机械手',
shuju: '岩石',
shouxi: 'MERY'
},
{
title: '岩石SY510-TXS-YS-01',
year: '2012',
hangci: 'TS-14',
pingtai: '着陆器',
shebei: '机械手',
shuju: '岩石',
shouxi: 'MERY'
},
{
title: '岩石SY510-TXS-YS-01',
year: '2012',
hangci: 'TS-14',
pingtai: '着陆器',
shebei: '机械手',
shuju: '岩石',
shouxi: 'MERY'
}
]
watch: {
radio() {
this.getList()
}
},
methods: {
// 获取左侧航次列表
getList() {
this.dataList = []
const params = {
search_type: this.searchTypeValue,
return_type: this.radio,
search_value: this.searchValue,
limit: 20,
start: 0,
group: 10
}
getDataSearch(params).then(res => {
console.log(res)
this.dataList = res.page.records
})
},
// 初始化cesium
initCesium() {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
this.viewer = new Cesium.Viewer('cesiumContainerData', {
sceneMode: Cesium.SceneMode.SCENE2D,
shadows: false,
timeline: false,
baseLayerPicker: false,
fullscreenButton: false,
selectionIndicator: false,
homeButton: false,
animation: false,
infoBox: false,
geocoder: false,
navigationHelpButton: false
})
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
this.viewer.scene.sun.show = false
this.viewer.scene.moon.show = false
this.viewer.scene.fog.enabled = false
this.viewer.scene.skyAtmosphere.show = false
this.viewer.scene.sun.show = false
this.viewer.scene.skyBox.show = false
this.viewer.scene.globe.enableLighting = false
this.viewer.shadowMap.darkness = 0.8
this.viewer.scene._sunBloom = false
this.viewer.scene.globe.showGroundAtmosphere = false
// 叠加叠加影像服务
// const earthMap = new Cesium.WebMapTileServiceImageryProvider(
// {
// url: 'http://124.16.219.154:8080/geoserver/gwc/service/wmts/rest/ne:gmrt_20231018/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg',
// layer: 'ne:gmrt_20231018',
// style: 'default',
// tileMatrixSetID: 'EPSG:4326',
// format: 'image/jpeg',
// tilingScheme: new Cesium.GeographicTilingScheme()
// }
// )
// this.viewer.imageryLayers.addImageryProvider(earthMap)
// 增加海岸线 /geoserver/gwc/service/wmts/rest/ne:GSHHS_f_L1/EPSG:4326/EPSG:4326:{z}/{y}/{x}?format=image/png
// const coastline = new Cesium.WebMapTileServiceImageryProvider(
// {
// url: 'http://124.16.219.154:8080/geoserver/gwc/service/wmts/rest/ne:GSHHS_f_L1/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
// layer: 'ne:GSHHS_f_L1',
// style: 'default',
// tileMatrixSetID: 'EPSG:4326',
// format: 'image/png',
// tilingScheme: new Cesium.GeographicTilingScheme()
// }
// )
// this.viewer.imageryLayers.addImageryProvider(coastline)
// 沉船摄影拼接图 /geoserver/gwc/service/wmts/rest/ne:No1ShipWreck_UP/EPSG:4326/EPSG:4326:{z}/{y}/{x}?format=image/png
// const shipline = new Cesium.WebMapTileServiceImageryProvider(
// {
// url: 'http://124.16.219.154:8080/geoserver/gwc/service/wmts/rest/ne:No1ShipWreck_UP/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
// layer: 'ne:No1ShipWreck_UP',
// style: 'default',
// tileMatrixSetID: 'EPSG:4326',
// format: 'image/png',
// tilingScheme: new Cesium.GeographicTilingScheme()
// }
// )
// this.viewer.imageryLayers.addImageryProvider(shipline)
},
/* cesium 绘制线 */
drawLine(index, id, degreeArr) {
this.viewer.entities.add({
id: id,
polyline: { //polyline折线实体
positions: Cesium.Cartesian3.fromDegreesArray(degreeArr),//位置
width: 5,//折线宽度
cusColor: this.color[index],
material: new Cesium.PolylineArrowMaterialProperty(
this.color[index]
//Cesium.Color.BLUE
// glowPower : 0.2,//发光的强度，值为线宽的百分比(0-1.0)
// color:Cesium.Color.BLUE //发光的颜色
),//材质
clampToGround: true, //地表层高度模式,
zIndex: 1000
}
})
this.viewer.camera.setView({
// 指定相机位置
destination: Cesium.Cartesian3.fromDegrees(degreeArr[0], degreeArr[1])
})
this.autoZoom()
},
// 创建点位
setPoint(id, degree, color) {
this.viewer.entities.add({
id: id,
position: Cesium.Cartesian3.fromDegrees(degree),
point: {
pixelSize: 20, // 点像素大小
color: color
}
})
// this.viewer.zoomTo(point)
},
// 清除所有实体
clearAll() {
this.viewer.entities.removeAll()
},
// 自动跳转到实体位置
autoZoom(){
this.viewer.zoomTo(this.viewer.entities)
},
turnDeatilPage() {
this.$router.push({ name: 'dataDetail' })
},
handleClose(tag) {
this.tags.splice(this.tags.indexOf(tag), 1)
},
tosearch(e) {
this.input = e
},
openList(value, title) {
this.dialogTitle = title
this.showListDialog = true
},
// 关闭列表
closeListForm() {
this.showListDialog = false
// this.init()
},
// 保存列表
confirmListForm(val) {
this.showListDialog = false
if (val) {
this.type_b = val
}
// this.init()
},
handler({ BMap, map }) {
console.log(BMap, map)
this.center.lng = 116.404
this.center.lat = 39.915
this.zoom = 6
},
totap(e) {
console.log(e)
e.pic.url = 'http://shipin.hey17.com/dingwei_a.png'
e.pic.size.width = 22
e.pic.size.height = 28
for (var i = 0; i < this.list.length; i++) {
if (this.list[i] != e) {
this.list[i].pic.url = 'http://shipin.hey17.com/dingwei1.png'
this.list[i].pic.size.width = 16
this.list[i].pic.size.height = 21
}
}
},
shousuo() {
this.showa = true
this.show = true
},
toshow() {
this.showa = false
this.show = false
},
// 打开搜素弹窗
openDialog() {
if (this.searchTypeValue == '航次名称') {
this.dialog1 = true
}
},
// 航次名称弹窗
handleClose1() {
this.dialog1 = false
},
}
}
</script>
@ -346,11 +341,11 @@ export default {
justify-content: center;
.left {
position: relative;
width: 30%;
width: 570px;
height: 100%;
background: #fff;
box-sizing: border-box;
padding: 50px;
padding: 50px 30px;
display: flex;
flex-direction: column;
.left1 {
@ -359,13 +354,9 @@ export default {
display: flex;
align-items: center;
.xiala {
width: 25%;
height: 40px;
}
.el-input {
width: 50%;
width: 80%;
height: 40px;
margin-right: 15px;
}
.el-button {
width: 12%;
@ -390,50 +381,26 @@ export default {
}
}
.left3 {
padding-bottom: 10px;
padding: 10px 0;
width: 100%;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
justify-content: center;
border-bottom: 1px solid #e5e5e5;
p {
font-size: 16px;
color: #333;
}
.left3_1 {
width: 40%;
display: flex;
align-items: center;
justify-content: center;
.el-radio-group{
display: flex;
align-items: center;
}
}
.left3_2 {
width: 30%;
display: flex;
align-items: center;
justify-content: center;
span {
font-size: 15px;
white-space: nowrap;
}
.el-select {
margin-left: 5px;
width: 100px;
.el-input {
.el-input__inner {
border: none;
}
}
}
}
}
.left4{
width: 100%;
height: auto;
height: 700px;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 5px; /* 保持一个最小的宽度 */
background-color: transparent; /* 透明背景 */
}
&::-webkit-scrollbar-thumb {
background-color: transparent; /* 滚动条滑块也设置为透明 */
}
.left4_1{
padding:20px 0;
width: 100%;
@ -456,10 +423,16 @@ export default {
font-size: 16px;
color: #212121;
font-weight: bold;
display: flex;
justify-content: space-between;
.mileage {
font-size: 12px;
color: #909fa7;
}
span{
font-size: 16px;
color: #666;
}
.org {
font-size: 12px;
color: #999999;
}
}
.left4_list{
@ -473,11 +446,11 @@ export default {
align-items: center;
margin-bottom: 10px;
p{
font-size: 16px;
font-size: 14px;
color: #999;
}
span{
font-size: 16px;
font-size: 14px;
color: #212121;
}
}

69
src/views/home.vue
View File

@ -67,18 +67,18 @@
<div class="daohang">
<ul>
<li>
<a href="###" @click="onLine">All</a>
<a href="###" @click="onAll">All</a>
</li>
<li>
<a href="###" @click="clearAll">clear</a>
</li>
<li
v-for="(item, index) in didian"
v-for="(item, index) in voyageList"
:key="index"
:class="chooseIndex == index ? 'active' : ''"
@click="toChoose(index)"
@click="toChoose(index, item)"
>
<a href="###">{{ item.name }}</a>
<a href="###">{{ item.voyage_name }}</a>
</li>
</ul>
</div>
@ -213,7 +213,7 @@
</template>
<script>
import { getVoyage } from '../api/home'
import { getVoyage, getVoyageLine } from '../api/home'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
const Cesium = window.Cesium
@ -261,21 +261,8 @@ export default {
}
}
},
chooseIndex: 0,
didian: [
{ name: 'TS2-17' },
{ name: 'TS2-18' },
{ name: 'TS2-19' },
{ name: 'TS2-20' },
{ name: 'TS2-21' },
{ name: 'TS2-22' },
{ name: 'TS2-23' },
{ name: 'TS2-24' },
{ name: 'TS2-25' },
{ name: 'TS2-26' },
{ name: 'TS2-27' },
{ name: 'TS2-28' }
],
chooseIndex: -1,
voyageList: [],
newsList: [
{
title:
@ -320,7 +307,8 @@ export default {
date: '2023-03'
}
],
viewer: null
viewer: null,
color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE]
}
},
@ -339,7 +327,22 @@ export default {
// 查询航次列表
getVoyageList() {
getVoyage().then(res => {
console.log(res)
const voyageList = res.page.records
voyageList.map(item => {
// 获取航次坐标点
getVoyageLine({
voyage_id: item.tsy_id
}).then(res2 => {
// 格式化坐标点
const points = []
res2.array.forEach(point => {
points.push(Number(point.nav_lon), Number(point.nav_lat))
})
// 将坐标点添加到航次列表中
item.points = points
})
})
this.voyageList = voyageList
})
},
// 初始化cesium
@ -406,20 +409,16 @@ export default {
// )
// this.viewer.imageryLayers.addImageryProvider(shipline)
},
onLine() {
this.drawLine('sss1', [130,30,129,31], Cesium.Color.WHEAT)
this.drawLine('sss2', [130,28,129,30], Cesium.Color.BLUE)
},
/* cesium 绘制线 */
drawLine(id, degreeArr, color) {
drawLine(index, id, degreeArr) {
this.viewer.entities.add({
id: id,
polyline: { //polyline折线实体
positions: Cesium.Cartesian3.fromDegreesArray(degreeArr),//位置
width: 5,//折线宽度
cusColor:color,
cusColor: this.color[index],
material: new Cesium.PolylineArrowMaterialProperty(
color
this.color[index]
//Cesium.Color.BLUE
// glowPower : 0.2,//发光的强度，值为线宽的百分比(0-1.0)
// color:Cesium.Color.BLUE //发光的颜色
@ -454,9 +453,19 @@ export default {
autoZoom(){
this.viewer.zoomTo(this.viewer.entities)
},
// 全部轨迹
onAll() {
this.clearAll()
this.chooseIndex = -1
this.voyageList.forEach((item, index) => {
this.drawLine(index, item.tsy_id, item.points)
})
},
// 选择轨迹
toChoose(i) {
toChoose(i, item) {
this.clearAll()
this.chooseIndex = i
this.drawLine(i, item.tsy_id, item.points)
},
// 页面跳转
turnPage(val, a) {