设置按钮的加载效果

zmc

2023-08-15 60076cbbe1da6cc8ed3a4ebb8f67e92ea9be9e4a

 src/test/TestSelect.vue

@@ -1,208 +1,99 @@
<!-- 自动从接口获取数据 生成仪表盘 -->

<script lang="ts">
import axios from 'axios';
import * as echarts from 'echarts';

<script>
import ExceptionTypeLineChart from '../sfc/ExceptionTypeLineChart.vue';
import dayjs from 'dayjs';
export default {
  components: {
    ExceptionTypeLineChart
  },
  data() {
    return {
      loading:false,
      smogData: [
        // {
        //     "time": "2023-06-24 13:23",
        //     "value": 0.04,
        //     "mnCode": "31011020175002"
        // },
        // {
        //     "time": "2023-06-24 00:42",
        //     "value": 0.04,
        //     "mnCode": "31011020175004"
        // },
        // {
        //     "time": "2023-05-24 20:39",
        //     "value": 0.06,
        //     "mnCode": "31011020175008"
        // },
        // {
        //     "time": "2023-06-24 13:38",
        //     "value": 0.66,
        //     "mnCode": "64480047078091"
        // },
        // {
        //     "time": "2023-05-24 20:39",
        //     "value": 0.8,
        //     "mnCode": "31011020175006"
        // },
        // {
        //     "time": "2023-06-24 13:38",
        //     "value": 0.69,
        //     "mnCode": "64480047078099"
        // },
        // {
        //     "time": "2023-05-24 20:39",
        //     "value": 0.8,
        //     "mnCode": "31011020175026"
        // },
        
    ],//从后端放回的值
      chartData: [], //从图像返回的值
      xAxis: [
        '2023-07-20 12:00:00',
        '2023-07-20 12:10:00',
        '2023-07-20 12:20:00',
        '2023-07-20 12:30:00',
        '2023-07-20 12:40:00'
      ],
      yAxis: [0.4, 0.9, 0.1, 1.5, 0.3]
    };
  },
  mounted() {
      this.loading = true
       //自动获取接口全部数据
      axios.get('https://fyami.com.cn/device/min/value/real_time', { params: { "page": 1, "per_page": 20 } }).then((result) => {
      this.smogData = result.data.data
      console.log(this.smogData);
      this.loading = false
    });
   
   
    this.descTenTime()
  },

  methods: {
  showMore(){
    this.smogData.forEach((device) => {
        const chartDom = document.querySelector(`#chart-${device.mnCode}`) //根据选择器获取元素，并且只返回元素中的第一个
        const chart = echarts.init(chartDom)

        this.chartData = {
        value: device.value,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#666'
          },
          formatter: function (value) {
            return value;
          }
        },
        detail: {
          formatter: function (value) {
            return value + 'mg/m³';
          },
          textStyle: {
            fontSize: 10,
            fontWeight: 'bold'
          },
          offsetCenter: [0, '30%']
        },
        title: {
          show: true,
          text: '设备油烟浓度',
          textStyle: {
            color: '#999',
            fontSize: 14
          },
          offsetCenter: [0, '-30%']
        },
        axisLine: {
          lineStyle: {
            width: 10,
            color: [
              [0.2, '#67e0e3'],
              [0.8, '#37a2da'],
              [1, '#fd666d']
            ]
          }
        },
        splitLine: {
          show: true,
          length: 10,
          lineStyle: {
            color: 'auto',
          }
        },
        axisTick: {
          show: true,
          length: 15,
          lineStyle: {
            color: 'auto',
          }
    findTimeInExceptionData(data,time){
     for(let i=0;i<data.length;i++){
      if(data[i]['mvDataTime'] == time) {
          return data[i]['mvFumeConcentration2']
        }
      };
        
        chart.setOption({
          tooltip: {
          formatter: '{a}: <br/> {c}mg/m³'
        },
        series: [
          {
            name: '油烟浓度',
            type: 'gauge',
            min: 0,
            max: 2,
            splitNumber: 10,
            axisLabel: this.chartData.axisLabel,
            detail: this.chartData.detail,
            data: [{ value: this.chartData.value, name: '' }],
            title: this.chartData.title,
            axisLine: this.chartData.axisLine,
            splitLine: this.chartData.splitLine,
            axisTick: this.chartData.axisTick
          }
        ]
      });
      })
  }
     }
      return -1
    },
           // 参数：加上前后区间的异常数据，时间字符串
    // 功能：判断data中是否有该日期时间，存在返回该时间对应的浓度值，否则返回-1

    // 参数:前区间的开始时间， 后区间的结束时间, 加上前后区间的总时间段的异常数据的对象数组
    // 功能：根据开始和结束时间,返回以10分钟为间隔的时间和对应的值
  keepContinuousByEachTenMinutes(intervalStarTime,intervalEndTime,headAndTailExceptionData){
      let xAxis = []
      let yAxis = []
      let obj = {}
      let current = intervalStarTime
      let tail = dayjs(intervalEndTime).add(10,'minute').format('YYYY-MM-DD HH:mm:ss')
      while(current != tail){
        let value = this.findTimeInExceptionData(headAndTailExceptionData,current)
        if(value!= -1){
          xAxis.push(current)
          yAxis.push(value)
        }else {
          xAxis.push(current)
          yAxis.push(null)
        }
        current = dayjs(current).add(10,'minute').format('YYYY-MM-DD HH:mm:ss')
      }
      obj['xAxis'] = xAxis
      obj['yAxis'] = yAxis
      return obj
    },
    test(){
      let data = [
      { mvDataTime: '2023-07-20 12:30:00', mvFumeConcentration2: '0.2' },
      { mvDataTime: '2023-07-20 12:40:00', mvFumeConcentration2: '0.3' },
      { mvDataTime: '2023-07-20 12:50:00', mvFumeConcentration2: '0.2' },
      { mvDataTime: '2023-07-20 13:10:00', mvFumeConcentration2: '0.9' },
    ];
let obj = this.keepContinuousByEachTenMinutes('2023-07-20 12:00:00','2023-07-20 13:50:00',data)
console.log(obj)
    },
    descTenTime(begin, end) {
      let time = [];
      if(begin == end){
        time.push(begin)
        return time
      }
      // 保留结果 00 10 20 30
      let temp = dayjs(begin).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss');
      while (temp != end) {
        time.push(temp);
        temp = dayjs(temp).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss');
      }
      // 加上异常的结束时间
      time.push(temp);
      return time;
    },
  }
};
</script>

<template>
  <div style="margin: 5px;">
    <span style="color: #b1b3b8;" >实时数据</span>
  </div>

  <hr style="margin-top: 10px;"/>

  <div >
    <el-button @click="showMore" style="margin-top: 20px;margin-left: 20px">展示</el-button>
    
  </div>
  <div v-loading="loading" > 
    <!-- 根据设备编号个数动态生成仪表盘 -->
    <el-row :gutter="20">
      <el-col :span="12" v-for="device in smogData" :key="device.mnCode">
        <div class="chart-container">
          <div class="chart-title">设备{{ device.mnCode }}</div>
          <div class="chart-content">
            <div :id="'chart-' + device.mnCode" class="chartClass"></div>
          </div>
          <div>
            <span>浓度值为：{{ device.value }}</span>
            <br/>
            产生时间:{{ device.time}}
          </div>
        </div>
        <!-- <br v-if="index % 4 == 0"/> -->
      </el-col>
    </el-row>
  <div>
    <ExceptionTypeLineChart
      :xData="xAxis"
      :yData="yAxis"
    ></ExceptionTypeLineChart>
  </div>
</template>

<style lang="scss" scoped></style>



<style lang="scss" scoped>
.chart-container {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 4px;
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
}

.chart-content {
  margin-top: 10px;
}

.chartClass {
  height: 300px;
}
</style>