设置按钮的加载效果

zmc

2023-08-15 60076cbbe1da6cc8ed3a4ebb8f67e92ea9be9e4a

 src/test/TestSelect.vue

@@ -1,60 +1,99 @@
<!-- <script >
import {store} from '../utils/status.js'
  export default {
    data() {
      return{
        store
      }
    },
    methods: {

<script>
import ExceptionTypeLineChart from '../sfc/ExceptionTypeLineChart.vue';
import dayjs from 'dayjs';
export default {
  components: {
    ExceptionTypeLineChart
  },
  data() {
    return {
      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.descTenTime()
  },
  methods: {
    findTimeInExceptionData(data,time){
     for(let i=0;i<data.length;i++){
      if(data[i]['mvDataTime'] == time) {
          return data[i]['mvFumeConcentration2']
        }
     }
}
      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>
   <el-button @click="store.increment()">增加</el-button>
   <div>count:{{ store.count }}</div>
    <ExceptionTypeLineChart
      :xData="xAxis"
      :yData="yAxis"
    ></ExceptionTypeLineChart>
  </div>
</template>

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

</style> -->

<!-- <script setup>

import { useMouse } from '../utils/status1.js'
const { x, y } = useMouse()

</script> -->

<template>
Mouse position is at: {{ x }}, {{ y }}
<div>{{ c }}</div>
<div>{{ d }}</div>
</template>

<script >
import { useMouse } from '../utils/status1.js'
export default {
  setup() {
    const { x, y } = useMouse()
    return { x, y }
  },
  data(){
    return{
      c:'好的',
      d:1
    }
  },
  watch:{
    x(){
      this.d = this.x
    }
  }
 
}
</script>