306 lines
8.7 KiB
Vue
306 lines
8.7 KiB
Vue
<template>
|
||
<div class="news dataDetail">
|
||
<div class="banner">
|
||
<img src="../../static/images/bannerny.jpg" alt="">
|
||
</div>
|
||
<div class="con">
|
||
<div class="wp">
|
||
<div class="mbx">
|
||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||
<el-breadcrumb-item
|
||
:to="{ name: 'dataSearch' }"
|
||
>数据检索</el-breadcrumb-item>
|
||
<el-breadcrumb-item>航次详细信息</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</div>
|
||
<div>
|
||
<div class="detail_a">
|
||
<div style="width: 100%;">
|
||
<div class="detail_b">
|
||
<h3>{{ info.voyage_name }}</h3>
|
||
<p class="tit_a">{{ info.voyage_remark }}</p>
|
||
<h4>航次信息：</h4>
|
||
<div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="4">
|
||
<label>科考船舶：</label><span>{{ info.ship_name }}</span>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<label>资助机构：</label><span>{{ info.funding_org }}</span>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="4">
|
||
<label>离港日期：</label><span>{{ info.voyage_start_date }}</span>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<label>返港日期：</label><span>{{ info.voyage_end_date }}</span>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="4">
|
||
<label>航次首席：</label><span>{{ info.voyage_officer }}</span>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
<div class="zhuti">
|
||
<div class="left">
|
||
<div
|
||
class="left1"
|
||
v-for="(item,index) in listTab"
|
||
:key="index"
|
||
:class="currentTab == item.label ? 'active' : ''"
|
||
@click="selectTab(item)"
|
||
>
|
||
<img v-if="currentTab == item.label" src="../../static/images/arrow.png" alt="">
|
||
<img v-else src="../../static/images/arrow_a.png" alt="">
|
||
<p>{{ item.label }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="list">
|
||
<!-- 数据样品类型-->
|
||
<el-table v-if="currentTab == '数据样品类型'" stripe :data="datasetArray" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'left' }" :cell-style="{ textAlign: 'left' }">
|
||
<el-table-column prop="dataset_name" label="数据集名称"/>
|
||
<el-table-column prop="platform_type" label="平台类型" />
|
||
<el-table-column prop="equipment_type" label="设备类型" />
|
||
<el-table-column prop="data_type" label="数据样品类型" />
|
||
<el-table-column prop="job_type" label="作业类型" />
|
||
</el-table>
|
||
<!-- 设备类型-->
|
||
<el-table v-if="currentTab == '设备类型'" stripe :data="equipmentArray" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'left' }" :cell-style="{ textAlign: 'left' }">
|
||
<el-table-column prop="equipment_type" label="设备类型" />
|
||
<el-table-column prop="equipment_alias" label="简称" />
|
||
<el-table-column prop="equipment_total" label="频次" />
|
||
</el-table>
|
||
<!-- 参航人员-->
|
||
<el-table v-if="currentTab == '参航人员'" stripe :data="memberArray" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'left' }" :cell-style="{ textAlign: 'left' }">
|
||
<el-table-column prop="member_name" label="参航人员" />
|
||
<el-table-column prop="member_unit" label="单位" />
|
||
<el-table-column prop="member_birthday" label="出生日期" />
|
||
<el-table-column prop="member_dept" label="岗位" />
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { regInfo } from '@/api/dataSearch'
|
||
|
||
export default {
|
||
name: 'DataDetail',
|
||
components: {
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
title: 'SY510-TXS-YS-01',
|
||
listTab: [
|
||
{
|
||
label: '数据样品类型',
|
||
value: '1'
|
||
},
|
||
{
|
||
label: '设备类型',
|
||
value: '1'
|
||
},{
|
||
label: '参航人员',
|
||
value: '1'
|
||
}
|
||
],
|
||
currentTab: '数据样品类型',
|
||
voyageName: '',
|
||
// 航次信息
|
||
info: {},
|
||
datasetArray: [],
|
||
equipmentArray: [],
|
||
memberArray: [],
|
||
platformArray: []
|
||
}
|
||
},
|
||
created() {
|
||
this.voyageName = this.$route.query.voyage_name
|
||
this.getInfo()
|
||
},
|
||
methods: {
|
||
selectTab(item) {
|
||
this.currentTab = item.label
|
||
},
|
||
// 获取航次详情
|
||
getInfo() {
|
||
regInfo({voyage_name: this.voyageName}).then(res => {
|
||
console.log(res)
|
||
this.info = res.map.voyage
|
||
this.datasetArray = res.map.DatasetArray
|
||
this.equipmentArray = res.map.EquipmentArray
|
||
this.memberArray = res.map.MemberArray
|
||
this.platformArray = res.map.PlatformArray
|
||
})
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
<style>
|
||
.dataDetail .el-checkbox{
|
||
display: block;
|
||
}
|
||
.dataDetail .el-checkbox-group .el-checkbox__input{
|
||
margin-top:-57px;
|
||
}
|
||
.dataDetail .el-checkbox-group>label{
|
||
margin:10px 0px 20px 0;
|
||
}
|
||
</style>
|
||
|
||
<style scoped lang="scss">
|
||
.data_s{
|
||
padding:10px 0 10px 0;
|
||
span{
|
||
padding:0 100px 0 10px;
|
||
}
|
||
}
|
||
.detail_a{
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.detail_b{
|
||
// width: 100%;
|
||
background: #fff;
|
||
padding:30px;
|
||
border-radius: 10px;
|
||
p{
|
||
margin:20px 0;
|
||
}
|
||
h4{
|
||
margin:20px 0;
|
||
|
||
}
|
||
|
||
}
|
||
.news {
|
||
width: 100%;
|
||
height: 100%;
|
||
.banner {
|
||
width: 100%;
|
||
height: 300px;
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.con{
|
||
width: 100%;
|
||
height: auto;
|
||
padding-bottom: 80px;
|
||
background: url(../../static/images/news/bg.png) center no-repeat;
|
||
background-size: 100% 100%;
|
||
.wp{
|
||
max-width: 1600px;
|
||
margin:-150px auto 0 auto;
|
||
width:96%;
|
||
height: auto;
|
||
.mbx{
|
||
width: 100%;
|
||
height: auto;
|
||
margin-bottom: 55px;
|
||
}
|
||
.zhuti{
|
||
margin-top:20px;
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
// background: #ebf1f7;
|
||
.left{
|
||
width: 290px;
|
||
height: 420px;
|
||
box-sizing: border-box;
|
||
padding: 25px;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
.left1{
|
||
width: 100%;
|
||
height: 60px;
|
||
background: #f0f4fa;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0 20px;
|
||
margin-bottom: 15px;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
&.active{
|
||
background: #13a1f0;
|
||
p{
|
||
color: #fff;
|
||
}
|
||
}
|
||
&:hover{
|
||
background: #13a1f0;
|
||
p{
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
&:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
img{
|
||
width: 13px;
|
||
height: 20px;
|
||
margin-right: 20px;
|
||
}
|
||
p{
|
||
font-size: 18px;
|
||
color: #212121;
|
||
}
|
||
}
|
||
}
|
||
.list{
|
||
width: 80%;
|
||
height: auto;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 25px;
|
||
border-radius: 10px;
|
||
a{
|
||
color: #277ace;
|
||
}
|
||
.fenye{
|
||
margin-top: 40px;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style>
|
||
.news .el-breadcrumb__item{
|
||
font-size: 18px;
|
||
color: #fff;
|
||
float: none;
|
||
}
|
||
.news .el-breadcrumb__inner{
|
||
font-size: 18px;
|
||
color: #fff !important;
|
||
}
|
||
</style>
|