DSDSWeb/src/views/sublibrary/physicalDataSearchCTD.vue

<template>

  <div class="shuju">
    <div class="header">
      <div class="header_con">
        <div class="header1">
          <div class="time">
            <!-- <p>{{ date }}&nbsp;&nbsp;{{ week }}</p> -->
          </div>
          <div class="login">
            <p>个人中心</p>
            <div class="log1">
              <img src="../../../static/images/index/logo1.png" alt="">
              <p>中国科技云通行证登录</p>
              <p>注册</p>
            </div>
            <p>English</p>
          </div>
        </div>
        <div class="header2">
          <div class="logo">
            <img src="../../../static/images/index/logo2.png" alt="" @click="turnPage('home')">
          </div>
          <div class="nav">
            <ul>
              <li>
                <router-link to="/container/physicalIndex">首页</router-link>
              </li>
              <li>
                <router-link to="" @click.native="turnPage('physicalDataDelivery')">数据汇交</router-link>
              </li>
              <li>
                <router-link to="" @click.native="jumpTo('http://120.48.105.88:8081/source')">数据检索</router-link>
              </li>
              <li>
                <router-link to="">数据应用</router-link>
              </li>
              <li>
                <router-link to="/container/news">新闻动态</router-link>

              </li>
              <li>
                <router-link to="">联系我们</router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <img class="di" src="../../../static/images/index/banner.jpg" alt="">
    </div>

    <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-img="img" :is-line="line" />
      </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 {
      img: true,
      date: '',
      week: '',
      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'
        }
      ]
    }
  },
  mounted() {
    this.getTime2()
  },
  methods: {
    turnDeatilPage() {
      this.$router.push({ name: 'dataDetail' })
    },
    turnPage(val, a) {
      if (!a) {
        this.$router.push({ name: val })
      } else {
        window.open(val, '_blank')
      }
    },
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1)
    },
    tosearch(e) {
      this.input = e
    },
    /** 跳转到子网地址 */
    jumpTo(url) {
      window.open(url, '_blank')
    },
    getTime2() {
      setInterval(this.getTime, 1000)
    },
    getTime() {
      var today = new Date()
      var y = today.getFullYear() + '.'
      var month = today.getMonth() + 1 + '.'
      var t = today.getDate() + ''
      var h = ''
      var m = ''
      var s = ''
      if (today.getHours() < 10) {
        h = '0' + today.getHours() + ':'
      } else {
        h = today.getHours() + ':'
      }
      if (today.getMinutes() < 10) {
        m = '0' + today.getMinutes() + ':'
      } else {
        m = today.getMinutes() + ':'
      }
      if (today.getSeconds() < 10) {
        s = '0' + today.getSeconds()
      } else {
        s = today.getSeconds()
      }
      var day = today.getDay()
      var weeks = new Array(
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      )
      var week = weeks[day]
      // this.date_time = "<span>"+y+month+t+"</span><b>"+h+m+s+"</b>"
      this.time = h + m + s
      this.date = y + month + t
      this.week = week
    },
    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">

</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>