338 lines
9.6 KiB
Vue
338 lines
9.6 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 class="">
|
|||
|
|
<div class="detail_b">
|
|||
|
|
<h3>{{ obj.name }}</h3>
|
|||
|
|
<p class="tit_a">
|
|||
|
|
数据样品信息简述：数据样品SY510-TXS-YS-01为2021年第23个航次，第1次载人潜器下潜中采集到的若干珊瑚礁石样品，样品数据包含原始数据、后处理数据、成果数据。
|
|||
|
|
数据样品SY510-TXS-YS-01为2021年第23个航次，第1次载人潜器下潜中采集到的若干珊瑚礁石样品，样品数据包含原始数据、后处理数据、成果数据。
|
|||
|
|
|
|||
|
|
</p>
|
|||
|
|
<h4>
|
|||
|
|
数据样品元数据信息：
|
|||
|
|
</h4>
|
|||
|
|
<div>
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="4">
|
|||
|
|
<label>航次：</label><span>TS-14 </span>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="5">
|
|||
|
|
<label>平台：</label><span>着陆器</span>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="4">
|
|||
|
|
<label>设备：</label><span>机械手</span>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="5">
|
|||
|
|
<label>机械手：</label><span>岩石</span>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="4">
|
|||
|
|
<label>航次首席：</label><span>MERY</span>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="zhuti">
|
|||
|
|
<div class="left">
|
|||
|
|
<div class="left1" :class="show ? 'active' : ''">
|
|||
|
|
<img v-if="!show" src="../../static/images/arrow.png" alt="">
|
|||
|
|
<img v-else src="../../static/images/arrow_a.png" alt="">
|
|||
|
|
<p>数据文件</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="left1" :class="show1 ? 'active' : ''">
|
|||
|
|
<img v-if="!show1" src="../../static/images/arrow.png" alt="">
|
|||
|
|
<img v-else src="../../static/images/arrow_a.png" alt="">
|
|||
|
|
<p>文档报告</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="left1" :class="show2 ? 'active' : ''">
|
|||
|
|
<img v-if="!show2" src="../../static/images/arrow.png" alt="">
|
|||
|
|
<img v-else src="../../static/images/arrow_a.png" alt="">
|
|||
|
|
<p>数据来源信息</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="left1" :class="show2 ? 'active' : ''">
|
|||
|
|
<img v-if="!show2" src="../../static/images/arrow.png" alt="">
|
|||
|
|
<img v-else src="../../static/images/arrow_a.png" alt="">
|
|||
|
|
<p>数据引用信息</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="left1" :class="show2 ? 'active' : ''">
|
|||
|
|
<img v-if="!show2" src="../../static/images/arrow.png" alt="">
|
|||
|
|
<img v-else src="../../static/images/arrow_a.png" alt="">
|
|||
|
|
<p>XML元数据文件</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="list">
|
|||
|
|
<el-row type="flex" justify="space-between">
|
|||
|
|
<el-col :span="20">
|
|||
|
|
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
|
|||
|
|
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="4">
|
|||
|
|
<el-button type="primary" @click="download">下载所选文件</el-button>
|
|||
|
|
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div style="margin: 15px 0;" />
|
|||
|
|
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
|||
|
|
|
|||
|
|
<el-checkbox v-for="item in cities" :key="item.name" :label="item.name">
|
|||
|
|
<div>
|
|||
|
|
<span>{{ item.name }}</span>
|
|||
|
|
<div class="data_s">
|
|||
|
|
<label for="">Size:</label><span>{{ item.size }}</span>
|
|||
|
|
<label for="">Format:</label><span>{{ item.format }}</span>
|
|||
|
|
|
|||
|
|
<a href="http://120.48.105.88:8081/dataDetails/296c1ff351224b3d8a4b856592c0fb67" target="_blank">详情</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</el-checkbox>
|
|||
|
|
|
|||
|
|
</el-checkbox-group>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div>
|
|||
|
|
|
|||
|
|
</div> -->
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'DataDetail',
|
|||
|
|
components: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
checkAll: false,
|
|||
|
|
checkedCities: [],
|
|||
|
|
cities: [
|
|||
|
|
{
|
|||
|
|
name: 'SY510-TXS-YS-01_clip1.grd',
|
|||
|
|
size: '12',
|
|||
|
|
format: 'NetCDF'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'SY510-TXS-YS-01_clip2.grd',
|
|||
|
|
size: '12',
|
|||
|
|
format: 'NetCDF'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'SY510-TXS-YS-01_clip3.grd',
|
|||
|
|
size: '12',
|
|||
|
|
format: 'NetCDF'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'SY510-TXS-YS-01_clip4.grd',
|
|||
|
|
size: '12',
|
|||
|
|
format: 'NetCDF'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
isIndeterminate: true,
|
|||
|
|
obj: {
|
|||
|
|
name: '数据样品SY510-TXS-YS-01'
|
|||
|
|
},
|
|||
|
|
show: false,
|
|||
|
|
show1: true,
|
|||
|
|
show2: false
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
download() {
|
|||
|
|
//
|
|||
|
|
},
|
|||
|
|
handleCheckAllChange(val) {
|
|||
|
|
debugger
|
|||
|
|
const data = this.cities.map(item => item.name)
|
|||
|
|
this.checkedCities = val ? data : []
|
|||
|
|
this.isIndeterminate = false
|
|||
|
|
},
|
|||
|
|
handleCheckedCitiesChange(value) {
|
|||
|
|
const checkedCount = value.length
|
|||
|
|
this.checkAll = checkedCount === this.cities.length
|
|||
|
|
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</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>
|