large_screen/src/components/monitor/detailedView.vue

<template>
  <div>
    <div style="margin: 15px;text-align: right">
      <span class="bottom_01" :style="{backgroundColor:chooseColor==='30'? '#2b85e4':''}"
            @click="chooseDate('30')">实时</span>
      <span class="bottom_01" :style="{backgroundColor:chooseColor==='1'? '#2b85e4':''}"
            @click="chooseDate('1')">近1天</span>
      <span class="bottom_01" :style="{backgroundColor:chooseColor==='10'? '#2b85e4':''}"
            @click="chooseDate('10')">近10天</span>
      <span class="bottom_01" :style="{backgroundColor:chooseColor==='20'? '#2b85e4':''}"
            @click="chooseDate('20')">近20天</span>
    </div>
    <div id="transactionFlowView" style="height:180px;width: 100%;margin-bottom: 10px;"></div>
  </div>
</template>

<script>
export default {
  name: "detailedView",
  data() {
    return {
      begin:        this.formatDate(new Date()),	//是	string	开始时间
      end:          this.formatDate(new Date()),  //是	string	截止日期
      timer:        '',
      monitorId:    '',
      chooseColor:  '30',
      viewNum:      [],
      viewData:     [],
      type:         'second',
      days:         ''
    }
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    formatDate(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return d;
    },
    chooseDate(data) {
      // 选中先清除定时器
      clearInterval(this.timer);
      // startDate，endDate
      switch (data) {
        case '1':
          this.type = 'hour';
          this.end = this.formatDate(new Date());
          this.begin = this.formatDate(new Date());
          break
        case '10':
          this.end = this.formatDate(new Date());
          this.begin = this.formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 11));
          this.days='10'
          this.type = 'day';
          break
        case '20':
          this.end = this.formatDate(new Date());
          this.begin = this.formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 21));
          this.days='20'
          this.type = 'day';
          break
        case '30':
          this.end = this.formatDate(new Date());
          this.begin = this.formatDate(new Date());
          this.type = 'second'
          break
      }
      this.chooseColor = data;

        if(this.type === 'second'){
          clearInterval(this.timer);
          // 如果选中的type是为实时的话，每1s执行一次
          this.timer = setInterval(() => {
            this.getTableData();
          }, 1000)
        }else {
          this.getTableData();
        }
    },
    getTableData() {
      let _data = {
        monitorId:    this.monitorId,   //是	string	区域测点ID
        begin:        this.begin,	      //是	string	开始时间
        end:          this.end,         //是	string	截止日期
        type:         this.type,
        days:         this.days
      };
      this.$get("index/monitors/measuring/record/monitors", _data).then(res => {
        if (res.code === 200) {
          this.viewData = res.data.keys || [];
          this.viewNum = res.data.values || [];
          this.showIview()
        } else {
          console.error(res.msg);
        }
      });
    },
    parentHandleclick(e) {
      this.monitorId = e.monitorId
      clearInterval(this.timer);
      if(this.type === 'second'){
        clearInterval(this.timer);
        this.timer = setInterval(() => {
          // 选中second实时，定时调用getTableData()方法,显示数据
          this.getTableData();
        }, 1000)
      }else {
        // 选中其他，静态显示
        this.getTableData();
      }
    },
    showIview() {
      let myChart = this.$echarts.init(
        // echarts绑定到指定id元素上
          document.getElementById("transactionFlowView"), 'dark'
      );
      myChart.setOption(
          {
            darkMode: true,
            backgroundColor: '#100C2A',
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '5%',
              top:'15%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {
                  show: false,
                }
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.viewData,
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '测点监测值',
                type: 'line',
                stack: 'Total',
                data: this.viewNum
              },
            ]
          },
          true
      );
      myChart.resize();
    }
  }
}
</script>

<style scoped>
.bottom_01 {
  padding: 5px 10px;
  border: #2d8cf0 1px solid;
  margin: 5px 10px;
  border-radius: 10px;
}
</style>