530 lines
12 KiB
Vue
530 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<div class="shuju">
|
|||
|
|
<div class="shuju_con">
|
|||
|
|
<div v-show="showa == false" class="left">
|
|||
|
|
<div class="left1">
|
|||
|
|
<div class="xiala">
|
|||
|
|
<el-select v-model="value" placeholder="平台类型">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in options"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<el-input v-model="type_b" placeholder="" />
|
|||
|
|
<el-button
|
|||
|
|
class="sousuo"
|
|||
|
|
type="primary"
|
|||
|
|
icon="el-icon-search"
|
|||
|
|
/>
|
|||
|
|
<el-button
|
|||
|
|
class="caidan"
|
|||
|
|
type="default"
|
|||
|
|
icon="el-icon-s-operation"
|
|||
|
|
@click="openList(0,'列表')"
|
|||
|
|
/>
|
|||
|
|
</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>
|
|||
|
|
</div>
|
|||
|
|
<div class="left4">
|
|||
|
|
<div v-for="(item,index) in detail" :key="index" class="left4_1" @click="turnDeatilPage(item)">
|
|||
|
|
<div class="left4_top">
|
|||
|
|
<p>{{ item.title }}</p>
|
|||
|
|
<span>{{ item.year }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="left4_list">
|
|||
|
|
<div class="list1">
|
|||
|
|
<p>航次：</p>
|
|||
|
|
<span>{{ item.hangci }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list1">
|
|||
|
|
<p>平台：</p>
|
|||
|
|
<span>{{ item.pingtai }}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="list1">
|
|||
|
|
<p>设备：</p>
|
|||
|
|
<span>{{ item.shebei }}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="list1">
|
|||
|
|
<p>数据样品：</p>
|
|||
|
|
<span>{{ item.shuju }}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="list1">
|
|||
|
|
<p>航次首席：</p>
|
|||
|
|
<span>{{ item.shouxi }}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="arrow">
|
|||
|
|
<img src="../../static/images/arrow_nav.png" alt="" @click="shousuo">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-show="showa" 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>
|
|||
|
|
</div>
|
|||
|
|
<el-dialog
|
|||
|
|
:title="dialogTitle"
|
|||
|
|
:visible.sync="showListDialog"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
:height="300"
|
|||
|
|
:append-to-body="true"
|
|||
|
|
width="800px"
|
|||
|
|
>
|
|||
|
|
<list-dialog v-if="showListDialog" :choose-data="chooseData" @handleClose="closeListForm" @handleConfirm="confirmListForm" />
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import ListDialog from './listDialog.vue'
|
|||
|
|
import GMRT from './GMRT.vue'
|
|||
|
|
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'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
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
|
|||
|
|
},
|
|||
|
|
toshow() {
|
|||
|
|
this.showa = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.shuju {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
.shuju_con {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 995px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
.left {
|
|||
|
|
position: relative;
|
|||
|
|
width: 30%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: #fff;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 50px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
.left1 {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 40px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
.xiala {
|
|||
|
|
width: 25%;
|
|||
|
|
height: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-input {
|
|||
|
|
width: 50%;
|
|||
|
|
height: 40px;
|
|||
|
|
}
|
|||
|
|
.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-bottom: 10px;
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
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;
|
|||
|
|
.left4_1{
|
|||
|
|
padding:20px 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
border-bottom: 1px solid #e5e5e5;
|
|||
|
|
cursor: pointer;
|
|||
|
|
&: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;
|
|||
|
|
}
|
|||
|
|
span{
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.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: 16px;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
span{
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #212121;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.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%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</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>
|