DSDSWeb/src/views/dataDetail.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>