油烟检测系统

zmc

2023-08-07 1e18f0bcee0358e13c0e2cb750d17cd7ef5bf4d6

 src/test/TestSelect.vue

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

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

export default {
  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: [], //从图像返回的值
    };
  },
  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
    });
   
   
  },

  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',
          }
        }
      };
        
        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
          }
        ]
      });
      })
  }

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

     }
}
</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>
   <el-button @click="store.increment()">增加</el-button>
   <div>count:{{ store.count }}</div>
  </div>
</template>




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

.chart-title {
  font-size: 16px;
  font-weight: 600;
}
</style> -->

.chart-content {
  margin-top: 10px;
}
<!-- <script setup>

.chartClass {
  height: 300px;
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
    }
  }
 
}
</style>
</script>