DSDSWeb/src/views/EBrowseData.vue

<template>
  <div class="EBrowseData">
    <div class="echartBox">
      <div id="lineEchart" style="width:100%;height:500px;padding-top:60px;" />
      <div class="date">
        <span>{{ dateRange }}</span>
      </div>
    </div>
    <div class="mes ofhd">
      <div class="type">
        <h3>Search results:</h3>
        <ul>
          <li v-for="(item,index) in list" :key="index" :class="currentIndex==index?'orange':''" @click="searchMessage(index,'index','list')">
            <span class="no">{{ index+1 }}</span>
            <span class="name">{{ item.fileName }}</span>
          </li>
        </ul>
      </div>
      <div class="cme">

        <p>
          {{ currentMes.fileName }}
        </p>
        <!-- <div>
          hxi_event_2022213_lev10_20220101_133000_512x5
        </div> -->
        <div class="box">
          <ul>
            <li>
              Start:{{ currentMes.dataStartTime }}
            </li>
            <li>
              End:{{ currentMes.dataEndTime }}
            </li>
            <li>
              Location:{{ currentMes.location }}
            </li>
            <li>
              Instrument:{{ currentMes.instrument }}
            </li>
          </ul>
          <div>
            <el-button type="primary" @click="routerTurn('SearchData')">DATA</el-button>
          </div>

        </div>

      </div>
    </div>

  </div>
</template>
<script>
// import { getLatestNews, urlConfig, countTotal, getTreeData } from '@/api/home'
// import {
//   validateSpecialChart
// } from '@/utils/validate' // get token from cookie
export default {
  name: 'EBrowseData',
  components: {},
  props: {
    list: {
      type: Array,
      required: true
    },
    searchMes: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      currentIndex: -1,
      dateRange: '',
      dataSource: [
        {
          name: 'CACT CME'
        },
        {
          name: 'E Browse Data'
        },
        {
          name: 'CACT CME'
        },
        {
          name: 'E Browse Data'
        },
        {
          name: 'CACT CME'
        },
        {
          name: 'E Browse Data'
        },
        {
          name: 'CACT CME'
        },
        {
          name: 'E Browse Data'
        }

      ],
      chooseDate: '',
      currentMes: {
        fileName: '',
        dataStartTime: '',
        dataEndTime: '',
        location: '',
        instrument: ''
      }
    }
  },
  watch: {
    'list': {
      handler: function() {
        this.init()
        this.dateRange = this.searchMes.stringStartTime + '--' + this.searchMes.stringEndTime
      },
      deep: true
      // immediate: true
    }
  },
  mounted() {

  },
  methods: {
    // 获取最新动态列表
    async init() {
      this.currentIndex = -1
      for (const i in this.currentMes) {
        this.currentMes[i] = ''
      }
      const _this = this
      // const data = [[13, 40], [23, 89], [20, 80]]; const array = []
      const data = []; let array = []
      this.list.map(item => {
        array = []
        array.push(item.ra)
        array.push(item.dec)
        data.push(array)
      })

      var myChart = this.$echarts.init(document.getElementById('lineEchart', 'dark'))
      var option
      option = {
        dataZoom: [
          {
            type: 'inside', // 无滑动条内置缩放   type: 'slider', //缩放滑动条
            show: true, // 开启
            yAxisIndex: [0], // Y轴滑动
            //  xAxisIndex: [0],//X轴滑动
            start: 1, // 初始化时，滑动条宽度开始标度
            end: 50 // 初始化时，滑动条宽度结束标度
          }
          //       {
          //     type: 'slider'
          // },
          // {
          //     type: 'inside'
          // }
        ],
        xAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              color: 'white'
            }
          }
        },
        yAxis: {
          type: 'value',
          scale: true,
          name: '',
          max: 1000,
          min: -100,
          boundaryGap: [0.2, 0.2],
          axisLabel: {
            show: true,
            textStyle: {
              color: 'white'
            }
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              realtime: false,
              yAxisIndex: 'none'
            },
            restore: {}
          }
        },
        series: [{
          symbolSize: 20,
          data,
          type: 'scatter'
        }]
      }
      myChart.setOption(option)
      myChart.on('click', function(e) {
        console.log(e.dataIndex, 'index')// 这里根据param填写你的跳转逻辑
        _this.searchMessage(e.dataIndex, 'index')
        // e.color = 'red'
        // e.event.target.style.fill = 'red'
        // console.log(e.color)
      })
    },
    searchMessage(index, type, type1) {
      if (type1 == 'list') {
        this.currentIndex = index
      }
      console.log('this.searchMes', this.searchMes)
      if (type == 'index') {
        this.currentMes.fileName = this.list[index].fileName
        this.currentMes.dataStartTime = this.list[index].dataStartTime
        this.currentMes.dataEndTime = this.list[index].dataEndTime
        this.currentMes.location = this.list[index].ra + ',' + this.list[index].dec
        this.currentMes.instrument = this.list[index].instrument
      }
    },

    handleClick() {

    },
    turnDataSearch(value) {
      this.$router.push({ name: value, query: { searchKey: this[value] }})
    },
    handleNodeClick(data) {
      if (data.datasetId) {
        this.$router.push({ name: 'dataSetDetail', query: { datasetId: data.datasetId }})
      }
    },
    routerTurn(name) {
      this.$router.push({ name: name })
    }
  }
}
</script>
<style scoped>
.cme{
  width:100%;
}
.cme>p{
  min-height: 65px;
  width:100%;
  word-break: break-all;
  word-wrap: break-word;

  font-size: 18px;
  margin-bottom: 6px;
  display: inline-block;
  vertical-align: middle;
}
</style>