首页航线绘制完成
This commit is contained in:
琪
parent
58a0ae87a2
commit
e136af6032
|
|
@ -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"',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 获取航次列表
|
||||
export function getDataSearch(query) {
|
||||
return request({
|
||||
url: '/search/page.htm',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ header{
|
|||
background:black;
|
||||
// background-image: url(../static/images/banner@2x.png);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
}
|
||||
#video-background {
|
||||
min-width: 100%;
|
||||
|
|
@ -59,7 +59,7 @@ header{
|
|||
img{
|
||||
height:83px;
|
||||
float: left;
|
||||
|
||||
|
||||
}
|
||||
span{
|
||||
font-size: 30px;
|
||||
|
|
@ -117,9 +117,9 @@ header{
|
|||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
nav {
|
||||
|
||||
|
||||
float: left;
|
||||
height: 66px;
|
||||
position: relative;
|
||||
|
|
@ -146,7 +146,7 @@ header{
|
|||
height: 100%;
|
||||
line-height: 90px;
|
||||
// padding-top:23px;
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav ul ul li {
|
||||
|
|
@ -182,7 +182,7 @@ header{
|
|||
/* make this equal to the line-height of the links (specified below) */
|
||||
width: 180px;
|
||||
text-align: left;
|
||||
|
||||
|
||||
}
|
||||
nav>ul li>ul>li>a{
|
||||
padding-left:10px;
|
||||
|
|
@ -338,7 +338,7 @@ header{
|
|||
height:10px;
|
||||
margin-left:7px;
|
||||
}
|
||||
|
||||
|
||||
.introd{
|
||||
background: white;
|
||||
margin-top:40px;
|
||||
|
|
@ -356,17 +356,17 @@ header{
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.news_t{
|
||||
.content_t{
|
||||
background: white;
|
||||
padding:30px;
|
||||
}
|
||||
}
|
||||
.news{
|
||||
margin-bottom:24px;
|
||||
|
||||
|
||||
li{
|
||||
padding-bottom:30px;
|
||||
.fl{
|
||||
|
|
@ -389,7 +389,7 @@ header{
|
|||
color:#767676;
|
||||
padding-bottom:48px;
|
||||
line-height: 20px;
|
||||
|
||||
|
||||
}
|
||||
& p:nth-of-type(3){
|
||||
color:#a5a5a5;
|
||||
|
|
@ -399,7 +399,7 @@ header{
|
|||
ul li:nth-of-type(3){
|
||||
padding-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.quicklook{
|
||||
.content_t>div{
|
||||
|
|
@ -433,8 +433,8 @@ header{
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
.inst{
|
||||
// background:url(../static/images/inst.png) no-repeat center;
|
||||
|
|
@ -463,16 +463,16 @@ header{
|
|||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.left50{
|
||||
border-left:8px solid #1f2023;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.aboutasos{
|
||||
line-height: 20px;
|
||||
|
||||
|
||||
.imgBox{
|
||||
width:100%;
|
||||
float: left;
|
||||
|
|
@ -508,7 +508,7 @@ header{
|
|||
.title{
|
||||
padding:0 4px;
|
||||
}
|
||||
|
||||
|
||||
li{ overflow: hidden;
|
||||
height: auto;
|
||||
// list-style-type:disc;
|
||||
|
|
@ -516,7 +516,7 @@ header{
|
|||
padding-right:20px;
|
||||
margin-left:10px;
|
||||
border-bottom:1px solid rgb(81, 81, 81);
|
||||
|
||||
|
||||
}
|
||||
li span:nth-of-type(1){
|
||||
float: left;
|
||||
|
|
@ -524,8 +524,8 @@ header{
|
|||
li span:nth-of-type(2){
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
.PublishTrends ul li:nth-last-of-type(1){
|
||||
border-bottom:0
|
||||
|
|
@ -546,7 +546,7 @@ header{
|
|||
margin-bottom: 0px;
|
||||
// border-bottom:1px solid #ffffff;
|
||||
}
|
||||
|
||||
|
||||
h3{
|
||||
color: #169bd5;
|
||||
}
|
||||
|
|
@ -554,7 +554,7 @@ header{
|
|||
position: relative;
|
||||
float: left;
|
||||
&:hover{
|
||||
|
||||
|
||||
}
|
||||
.el-icon-paperclip{
|
||||
padding-right:2px;
|
||||
|
|
@ -613,7 +613,7 @@ header{
|
|||
i{
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -663,7 +663,7 @@ header{
|
|||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.post-title{
|
||||
font-size: 24px;
|
||||
margin-top: 0;
|
||||
|
|
@ -706,7 +706,7 @@ header{
|
|||
height:100%;
|
||||
margin-right: 20px;
|
||||
padding-bottom: 9999px;
|
||||
margin-bottom: -9999px;
|
||||
margin-bottom: -9999px;
|
||||
|
||||
ul{
|
||||
padding:20px 0 10px 0;
|
||||
|
|
@ -715,7 +715,7 @@ header{
|
|||
padding:14px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.form{
|
||||
padding:20px 20px;
|
||||
|
|
@ -760,7 +760,7 @@ header{
|
|||
div{
|
||||
background-color: #898989;
|
||||
padding:10px 10px;
|
||||
|
||||
|
||||
}
|
||||
padding:0;
|
||||
border:1px solid rgb(255, 255, 255);
|
||||
|
|
@ -769,7 +769,7 @@ header{
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.content>div{
|
||||
min-height:500px;
|
||||
|
|
@ -790,7 +790,7 @@ header{
|
|||
img{
|
||||
width:22px;
|
||||
margin-bottom:-5px;
|
||||
margin-right:10px;
|
||||
margin-right:10px;
|
||||
}
|
||||
p{
|
||||
padding-bottom:12px;
|
||||
|
|
@ -805,7 +805,7 @@ header{
|
|||
.footer {
|
||||
width: 100%;
|
||||
// background: #02144E;
|
||||
|
||||
|
||||
overflow: hidden;
|
||||
.footer_main {
|
||||
overflow: hidden;
|
||||
|
|
@ -819,15 +819,15 @@ header{
|
|||
.footer_logo img {
|
||||
width: 76px;
|
||||
}
|
||||
|
||||
|
||||
.footer_biao img {
|
||||
width: 76px;
|
||||
}
|
||||
|
||||
|
||||
.company_erweima img {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
||||
.footer_main div {
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
|
|
@ -869,7 +869,7 @@ header{
|
|||
|
||||
.footer_chat {
|
||||
width:23%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px){
|
||||
.footer_main div {
|
||||
|
|
@ -890,18 +890,18 @@ header{
|
|||
width:26%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.theLatestSun{
|
||||
.el-select .el-input.is-focus .el-input__inner,.theLatestSun li .selectBtn .el-input__inner{
|
||||
color:white;
|
||||
}
|
||||
|
||||
|
||||
ul{
|
||||
// display: flex;
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
|
||||
li{
|
||||
background-color: black;
|
||||
float:left;
|
||||
|
|
@ -937,7 +937,7 @@ header{
|
|||
color:white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
ul li:nth-of-type(3n){
|
||||
margin-right:0
|
||||
|
|
@ -978,9 +978,9 @@ header{
|
|||
li{
|
||||
padding:0;
|
||||
display: flex;
|
||||
|
||||
|
||||
// line-height: 40px;
|
||||
|
||||
|
||||
}
|
||||
.orange span{
|
||||
background-color: #e6770f;
|
||||
|
|
@ -991,7 +991,7 @@ header{
|
|||
// line-height: 40px;
|
||||
display: inline-block;
|
||||
width:20px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.name{
|
||||
|
|
@ -1004,7 +1004,7 @@ header{
|
|||
// text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cme .box{
|
||||
background-color: #c7c7c7;
|
||||
margin:14px 0 10px 0;
|
||||
|
|
@ -1019,19 +1019,19 @@ header{
|
|||
padding:12px 0 10px 0;
|
||||
background-color: #c7c7c7;
|
||||
li{
|
||||
|
||||
|
||||
padding:8px 26px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
}
|
||||
.no{
|
||||
width:30px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.Q1BrowseData{
|
||||
background-color: #2b2c30;
|
||||
margin-left:14px;
|
||||
|
|
@ -1106,7 +1106,7 @@ header{
|
|||
.el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner{
|
||||
width:300px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1132,7 +1132,7 @@ header{
|
|||
// display: flex;
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
|
||||
li{
|
||||
background-color: black;
|
||||
float:left;
|
||||
|
|
@ -1161,7 +1161,7 @@ header{
|
|||
width:100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
ul li:nth-of-type(2n){
|
||||
margin-right:0
|
||||
|
|
@ -1182,7 +1182,7 @@ header{
|
|||
li{
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
|
||||
.introduceIndex{
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
|
|
@ -1199,7 +1199,7 @@ header{
|
|||
overflow: auto;
|
||||
background-color: #2b2c30;
|
||||
color:white;
|
||||
|
||||
|
||||
}
|
||||
.el-tree-node__content:hover{
|
||||
background-color:#e6770f
|
||||
|
|
@ -1307,7 +1307,7 @@ header{
|
|||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.container_a {
|
||||
padding-top: 90px;
|
||||
|
|
@ -1355,7 +1355,7 @@ header{
|
|||
}
|
||||
}
|
||||
@media (min-width: 992px){
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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-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>
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio label="数据样品集">数据样品集</el-radio>
|
||||
<el-radio label="航次">航次</el-radio>
|
||||
</el-radio-group>
|
||||
</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
|
||||
},
|
||||
content: 'DY31-II-W1306-BC',
|
||||
pic: {
|
||||
url: 'http://shipin.hey17.com/dingwei1.png',
|
||||
size: { width: 16, height: 21 }
|
||||
}
|
||||
},
|
||||
{
|
||||
dingwei: {
|
||||
lng: 119.919302,
|
||||
lat: 34.226755
|
||||
},
|
||||
content: 'DY31-II-W1306-BC',
|
||||
pic: {
|
||||
url: 'http://shipin.hey17.com/dingwei1.png',
|
||||
size: { width: 16, height: 21 }
|
||||
}
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
]
|
||||
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
|
||||
},
|
||||
tableData1: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
this.initCesium()
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue