油烟检测系统

zmc

2023-08-07 1e18f0bcee0358e13c0e2cb750d17cd7ef5bf4d6

 src/test/TestNoData.vue

@@ -1,149 +1,34 @@
<script >
import {store} from '../utils/status.js'
import {useCount} from '../utils/status1.js'
  export default {
    data() {
      return{
        store,

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

  <hr style="margin-top: 10px;"/>
  <div v-loading="loading">
    <el-row :gutter="20">
      <el-col :span="8" v-for="device in devices" :key="device.id">
        <div class="dashboard">
          <div class="dashboard-title">设备编号为：{{ device.mnCode }}</div>
          <div ref="charts" class="echarts"></div>
          <div>
            <div class="data">当前数值：{{ device.value }}</div>
            <div class="data">产生时间：{{ device.time }}</div>
            <div class="status" :class="{'exceed': device.value > 1}"> {{ device.value >= 1 ? '超标' : '' }}</div>
            <div class="status1" :class="{'exceed1': device.value < 1}"> {{ device.value < 1 ? '未超标' : '' }}</div>
        </div>
        </div>
        
        
      </el-col>
    </el-row>
    加载
  </div>
  </div>
</template>

<script>

import * as echarts from 'echarts'
import axios from 'axios'

export default {
  data() {
    return {
      devices: [],
      loading:false, //加载中
    }
  },
  methods: {
    fetchData() {
      const params = {
        params: {
          page: 1,
          per_page: 10
        }
        localCount:0
      }
      axios.get('https://fyami.com.cn/device/min/value/real_time', params)
        .then(response => {
          this.devices = response.data.data
        })
        .catch(error => {
          console.error(error)
        })
    },
    updateCharts() {
      for (let i = 0; i < this.devices.length; i++) {
        const device = this.devices[i]
        const chart = echarts.init(this.$refs.charts[i])
        
        const option = {
        title: {
          // text: '实时数据'
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}'
        },
        series: [
          {
            name: '实时数据',
            type: 'gauge',
            detail: { formatter: '{value}' },
            data: [{ 
              value: device.value, 
              name: '油烟浓度' ,
              itemStyle: {
                color:device.value >= 1?'red' :'green'
              }
            }],
            max:2
          }
        ]
      }
        
        chart.setOption(option)
      }
      console.log('调用了！');
    }
  },
  mounted() {
    this.fetchData()
    this.loading = true
    setInterval(() => {
      this.updateCharts()
    }, 30000)    //每分钟（30秒）调用一次
    this.loading = false
  },
  created() {
    // 监听窗口大小变化，动态调整仪表盘布局
    window.addEventListener('resize', this.updateCharts)
  },
  beforeUnmount() {
    // 移除窗口大小变化的监听
    window.removeEventListener('resize', this.updateCharts)
  }
    mounted(){
      this.localCount = useCount()
    },
    methods: {

     }
}
</script>

<style scoped>
.dashboard {
  margin-bottom: 20px;
}
<template>
  <div>
    <el-button @click="store.increment()">增加</el-button>
    <div>count:{{ store.count }}</div>

.dashboard-title {
  font-size: 20px;
  text-align: center;
  padding: 10px 0;
  background-color: #f5f7fa;
}
    <!-- <div>{{ globalCount.value }}</div> -->
    <div>{{ localCount.localCount }}</div>

.echarts {
  height: 300px;
}
  </div>
</template>

/* 超标 文字效果*/
.status {
    font-size: 18px;
    color: #FF4D4F;
    font-weight: bold;
  }
  
  .exceed {
    color: #FF4D4F;
  }
  
/* 未超标 */
  .status1 {
    font-size: 18px;
    color: #1de01d;
    font-weight: bold;
  }
  
  .exceed1 {
    color:  #1de01d;
  }
</style>
<style lang="scss" scoped>

</style>