From 300a480751c63fa970e3879965ff64c5bbfb4eac Mon Sep 17 00:00:00 2001
From: Crunchy <3114200645@qq.com>
Date: 星期一, 13 一月 2025 14:04:32 +0800
Subject: [PATCH] 数采改为3秒刷新，无感刷新
---
src/views/equipment/mqtt-show/index.vue | 239 +++++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 188 insertions(+), 51 deletions(-)
diff --git a/src/views/equipment/mqtt-show/index.vue b/src/views/equipment/mqtt-show/index.vue
index 8d3a4fe..b4af695 100644
--- a/src/views/equipment/mqtt-show/index.vue
+++ b/src/views/equipment/mqtt-show/index.vue
@@ -1,71 +1,208 @@
<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="getMqttListsSelect"
+ >
+ <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-item label="鍘嗗彶鏌ヨ锛�">
+ <el-tooltip
+ class="item"
+ effect="dark"
+ content="娉ㄦ剰锛氬巻鍙叉椂闂翠负绌轰細鍒锋柊鏁版嵁锛屼笉涓虹┖鍒欎笉浼氬埛鏂版暟鎹紒"
+ placement="top"
+ >
+ <el-date-picker
+ v-model="datePicker"
+ size="small"
+ :picker-options="pickerOptions"
+ format="yyyy-MM-dd HH:mm:ss"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ @change="datePickerHistory"
+ type="datetimerange"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ :default-time="['12:00:00']"
+ >
+ </el-date-picker>
+ </el-tooltip>
+ </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"
+ :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: '榛勯噾绯�'
+ largeAreaChartList: [],
+ cities: ['10 鍒嗛挓', '30 鍒嗛挓', '60 鍒嗛挓'],
+ checkboxGroup3: '10 鍒嗛挓',
+ options: [],
+ deviceId: '',
+ timer: '',
+ datePicker: [],
+ choiceDate: null,
+ pickerOptions: {
+ onPick: ({ maxDate, minDate }) => {
+ // 鎶婇�夋嫨鐨勭涓�涓棩鏈熻祴鍊肩粰涓�涓彉閲忋��
+ this.choiceDate = minDate.getTime()
+ // 濡備綍浣犻�夋嫨浜嗕袱涓棩鏈熶簡锛屽氨鎶婇偅涓彉閲忕疆绌�
+ if (maxDate) this.choiceDate = ''
},
- {
- value: '閫夐」2',
- label: '鍙岀毊濂�'
- },
- {
- value: '閫夐」3',
- label: '铓典粩鐓�'
- },
- {
- value: '閫夐」4',
- label: '榫欓』闈�'
- },
- {
- value: '閫夐」5',
- label: '鍖椾含鐑ら腑'
+ disabledDate: (time) => {
+ // 濡備綍閫夋嫨浜嗕竴涓棩鏈�
+ if (this.choiceDate) {
+ // 7澶╃殑鏃堕棿鎴�
+ const one = 7 * 24 * 3600 * 1000
+ // 褰撳墠鏃ユ湡 - one = 7澶╀箣鍓�
+ const minTime = this.choiceDate - one
+ // 褰撳墠鏃ユ湡 + one = 7澶╀箣鍚�
+ const maxTime = this.choiceDate + one
+ return (
+ time.getTime() < minTime ||
+ time.getTime() > maxTime ||
+ // 闄愬埗涓嶈兘閫夋嫨浠婂ぉ鍙婁互鍚�
+ time.getTime() > Date.now()
+ )
+ } else {
+ // 濡傛灉娌℃湁閫夋嫨鏃ユ湡锛屽氨瑕侀檺鍒朵笉鑳介�夋嫨浠婂ぉ鍙婁互鍚�
+ return time.getTime() > Date.now()
+ }
}
- ],
- value: ''
+ }
+ }
+ },
+ // 鍒濆鍖栬皟鐢� 鏌ヨ璁惧 鎶樼嚎鍥炬暟鎹�
+ async created() {
+ await this.getDeviceIdFun()
+ this.destroyTimerAgainStart()
+ },
+ // 鍏抽棴椤甸潰閿�姣佸畾鏃跺櫒
+ beforeDestroy() {
+ clearInterval(this.timer)
+ },
+ watch: {
+ datePicker(newVal) {
+ // 瀛樺湪鏃堕棿 閿�姣佸畾鏃跺櫒
+ if (newVal) {
+ clearInterval(this.timer)
+ } else {
+ this.destroyTimerAgainStart()
+ }
+ }
+ },
+ methods: {
+ // 閫夋嫨鏃堕棿鍚庤皟鐢�
+ datePickerHistory() {
+ if (this.datePicker) {
+ this.getMqttLists()
+ }
+ },
+ // 閫夋嫨璁惧鍚庤皟鐢ㄥ埛鏂版帴鍙�
+ getMqttListsSelect() {
+ this.largeAreaChartList = []
+ this.getMqttLists()
+ },
+ // 鑾峰彇璁惧涓嬫媺妗�
+ async getDeviceIdFun() {
+ await getDeviceId().then((res) => {
+ this.options = res.data.data
+ this.deviceId = this.options[0].device_id
+ })
+ },
+ // 鑾峰彇鎶樼嚎鍥炬暟鎹�
+ async getMqttLists() {
+ const obj = {
+ deviceId: this.deviceId,
+ collectionTime: this.checkboxGroup3.split(' ')[0]
+ }
+ if (this.datePicker) {
+ obj.startTime = this.datePicker[0]
+ obj.endTime = this.datePicker[1]
+ }
+ // 璋冪敤鏁版嵁鎺ュ彛
+ const res = await mqttList(obj)
+ const data = res.data.data
+ for (const i of data) {
+ i.listData = []
+ i.yAxisMonth = []
+ if (i.listMqttTableData.length > 0) {
+ i.deviceId = i.listMqttTableData[0].deviceId
+ }
+ for (const j of i.listMqttTableData) {
+ i.listData.push(j.value)
+ i.yAxisMonth.push(j.collectionTime)
+ }
+ i.listMqttTableData = []
+ }
+ this.largeAreaChartList = data
+ // 澶勭悊鏁版嵁锛岄�傞厤鎶樼嚎鍥炬牸寮�
+ for (const [k, i] of this.largeAreaChartList.entries()) {
+ this.$refs.largeAreaChartRef[k].refreshData(i.listData, i.yAxisMonth)
+ }
+ },
+ // 寮�鍚畾鏃跺櫒
+ destroyTimerAgainStart() {
+ this.largeAreaChartList = []
+ clearInterval(this.timer)
+ this.timer = setInterval(this.getMqttLists, 1000 * 3)
+ this.getMqttLists()
}
}
}
</script>
-<style>
-.header_div {
- height: 5em;
- width: 100%;
- display: flex;
- align-items: center;
- margin-left: 3em;
-}
-</style>
+<style></style>
--
Gitblit v1.9.3