2023-5-8 数采集完成

Crunchy

2024-05-08 976c6eb6ca0e425342aabe5397eaa4095708bffe

2023-5-8 数采集完成

 src/api/equipment/equipment.js

@@ -75,4 +75,19 @@
    url: '/mes/equipment/page/' + id,
    method: 'get'
  })
}

export function getDeviceId() {
  return request({
    url: '/mes/mqtt/getDeviceId',
    method: 'get'
  })
}

export function mqttList(query) {
  return request({
    url: '/mes/mqtt/mqttList',
    method: 'get',
    params: query
  })
}

 src/views/equipment/mqtt-show/components/largeAreaChart.vue

@@ -7,27 +7,21 @@
var myChart = null
var option = null

let base = +new Date(1968, 9, 3)
let oneDay = 24 * 3600 * 1000
let date = []
let data = [Math.random() * 300]
for (let i = 1; i < 20000; i++) {
  var now = new Date((base += oneDay))
  date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'))
  data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
}

export default {
  //   props: {
  //     yAxisMonth: {
  //       type: Array,
  //       default: []
  //     },
  //     seriesData: {
  //       type: Array,
  //       default: []
  //     }
  //   },
  props: {
    yAxisMonth: {
      type: Array,
      default: []
    },
    seriesData: {
      type: Array,
      default: []
    },
    otherData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      option: {
@@ -39,7 +33,7 @@
        },
        title: {
          left: '5%',
          text: 'Large Ara Chart'
          text: '设备名称：' + this.otherData.deviceName + '\\单位：' + (this.otherData.unit ? this.otherData.unit : '')
        },
        toolbox: {
          right: '5%',
@@ -57,7 +51,7 @@
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
          data: this.yAxisMonth
        },
        yAxis: {
          type: 'value',
@@ -76,7 +70,7 @@
        ],
        series: [
          {
            name: 'Fake Data',
            name: '参数',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
@@ -95,7 +89,7 @@
                }
              ])
            },
            data: data
            data: this.seriesData
          }
        ]
      }
@@ -109,15 +103,26 @@
  methods: {
    makeOption() {},
    initDrag() {
      myChart.setOption((option = this.option))
      myChart.setOption((option = this.option), true)

      option && myChart.setOption(option)
      // 页面发生变化tree也改变
      window.addEventListener('resize', () => {
        if (myChart) myChart.resize()
      })
    }
  }
  },
  // watch: {
  //   yAxisMonth: {
  //     handler(newVal) {
  //       console.log(`output->myChart`,myChart)
  //       setTimeout(()=>{
  //         myChart.setOption((option = this.option), true)
  //       },100)
        
  //     },
  //     deep: true
  //   }
  // }
}
</script>


 src/views/equipment/mqtt-show/index.vue

@@ -1,71 +1,130 @@
<template>
  <div>
    <div class="header_div">
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <el-row>
      <el-col
        v-for="(v, k) in index"
        :key="k"
        style="height: 40vh; padding-top: 0.4em;"
        :span="12"
        ><largeAreaChart
      /></el-col>
    </el-row>
    <basic-container>
      <el-form label-width="100px" :inline="true">
        <el-form-item label="设备：" required>
          <el-select
            v-model="deviceId"
            placeholder="请选择"
            @change="getMqttLists"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.name"
              :value="item.device_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间：">
          <el-radio-group
            v-model="checkboxGroup3"
            size="small"
            @change="destroyTimerAgainStart"
          >
            <el-radio-button v-for="city in cities" :label="city" :key="city">{{
              city
            }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </basic-container>
    <basic-container>
      <div
        v-if="!largeAreaChartList.length > 0"
        style="height: 75vh; padding-top: 0.4em; display: flex; align-items: center; justify-content: center;"
      >
        暂无数据
      </div>
      <el-row>
        <el-col
          v-for="(v, k) in largeAreaChartList"
          :key="k"
          style="height: 40vh; padding-top: 0.4em;"
          :span="12"
          ><largeAreaChart
            ref="largeAreaChartRef"
            v-if="largeAreaChartList.length > 0"
            :key="k"
            :yAxisMonth="v.yAxisMonth"
            :seriesData="v.listData"
            :otherData="v"
          />
        </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import largeAreaChart from './components/largeAreaChart.vue'
import { getDeviceId, mqttList } from '@/api/equipment/equipment'

export default {
  components: {
    largeAreaChart: largeAreaChart
  },
  data() {
    return {
      index: 7,
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: ''
      largeAreaChartList: [],
      cities: ['1 分钟', '3 分钟', '5 分钟', '10 分钟'],
      checkboxGroup3: '1 分钟',
      options: [],
      deviceId: '',
      timer: ''
    }
  },
  async created() {
    await this.getDeviceIdFun()
    this.getMqttLists()
  },
  mounted() {
    this.destroyTimerAgainStart()
  },
  beforeDestroy() {
    console.log(`output->销毁了定时器`)
    clearInterval(this.timer)
  },
  methods: {
    async getDeviceIdFun() {
      await getDeviceId().then((res) => {
        this.options = res.data.data
        this.deviceId = this.options[0].device_id
      })
    },
    async getMqttLists() {
      const obj = Object.assign({
        deviceId: this.deviceId,
        collectionTime: this.checkboxGroup3.split(' ')[0]
      })
      this.largeAreaChartList = []
      await mqttList(obj).then((res) => {
        let data = res.data.data
        data.forEach((i) => {
          i.listData = []
          i.yAxisMonth = []
          if (i.listMqttTableData.length > 0) {
            i.deviceId = i.listMqttTableData[0].deviceId
          }
          i.listMqttTableData.forEach((j) => {
            i.listData.push(j.value)
            i.yAxisMonth.push(j.collectionTime)
          })
          i.listMqttTableData = []
        })
        this.largeAreaChartList = data
      })
    },
    destroyTimerAgainStart() {
      clearInterval(this.timer)
      this.timer = setInterval(
        this.getMqttLists,
        1000 * 60 * this.checkboxGroup3.split(' ')[0]
      )
    }
  }
}
</script>

<style>
.header_div {
  height: 5em;
  width: 100%;
  display: flex;
  align-items: center;
  margin-left: 3em;
}
</style>
<style></style>