From 595934eecd1d448390c93972c68058b3a33c91df Mon Sep 17 00:00:00 2001
From: Crunchy <3114200645@qq.com>
Date: 星期五, 20 十二月 2024 16:50:23 +0800
Subject: [PATCH] 数据历史数据查询
---
src/views/equipment/mqtt-show/index.vue | 125 ++++++++++++++++++++++++++++++++++-------
1 files changed, 104 insertions(+), 21 deletions(-)
diff --git a/src/views/equipment/mqtt-show/index.vue b/src/views/equipment/mqtt-show/index.vue
index 6e95491..fc50651 100644
--- a/src/views/equipment/mqtt-show/index.vue
+++ b/src/views/equipment/mqtt-show/index.vue
@@ -6,7 +6,7 @@
<el-select
v-model="deviceId"
placeholder="璇烽�夋嫨"
- @change="getMqttLists"
+ @change="getMqttListsSelect"
>
<el-option
v-for="item in options"
@@ -28,6 +28,28 @@
}}</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>
@@ -44,9 +66,8 @@
style="height: 40vh; padding-top: 0.4em;"
:span="12"
><largeAreaChart
- ref="largeAreaChartRef"
- v-if="largeAreaChartList.length > 0"
- :key="k"
+ :ref="'largeAreaChartRef' + k"
+ :key="new Date()"
:yAxisMonth="v.yAxisMonth"
:seriesData="v.listData"
:otherData="v"
@@ -68,40 +89,95 @@
data() {
return {
largeAreaChartList: [],
- cities: ['1 鍒嗛挓', '3 鍒嗛挓', '5 鍒嗛挓', '10 鍒嗛挓'],
- checkboxGroup3: '1 鍒嗛挓',
+ cities: ['10 鍒嗛挓', '30 鍒嗛挓', '60 鍒嗛挓'],
+ checkboxGroup3: '10 鍒嗛挓',
options: [],
deviceId: '',
- timer: ''
+ timer: '',
+ datePicker: [],
+ choiceDate: null,
+ pickerOptions: {
+ onPick: ({ maxDate, minDate }) => {
+ // 鎶婇�夋嫨鐨勭涓�涓棩鏈熻祴鍊肩粰涓�涓彉閲忋��
+ this.choiceDate = minDate.getTime()
+ // 濡備綍浣犻�夋嫨浜嗕袱涓棩鏈熶簡锛屽氨鎶婇偅涓彉閲忕疆绌�
+ if (maxDate) this.choiceDate = ''
+ },
+ 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()
+ }
+ }
+ }
}
},
+ // 鍒濆鍖栬皟鐢� 鏌ヨ璁惧 鎶樼嚎鍥炬暟鎹�
async created() {
await this.getDeviceIdFun()
- this.getMqttLists()
- },
- mounted() {
this.destroyTimerAgainStart()
},
+ // 鍏抽棴椤甸潰閿�姣佸畾鏃跺櫒
beforeDestroy() {
- console.log(`output->閿�姣佷簡瀹氭椂鍣╜)
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 = Object.assign({
+ const obj = {
deviceId: this.deviceId,
collectionTime: this.checkboxGroup3.split(' ')[0]
- })
- this.largeAreaChartList = []
- await mqttList(obj).then((res) => {
- let data = res.data.data
- data.forEach((i) => {
+ }
+ if (this.datePicker) {
+ obj.startTime = this.datePicker[0]
+ obj.endTime = this.datePicker[1]
+ }
+ // 璋冪敤鏁版嵁鎺ュ彛
+ await mqttList(obj).then(async (res) => {
+ const data = res.data.data
+ await data.forEach((i, k) => {
i.listData = []
i.yAxisMonth = []
if (i.listMqttTableData.length > 0) {
@@ -115,13 +191,20 @@
})
this.largeAreaChartList = data
})
+ // 澶勭悊鏁版嵁锛岄�傞厤鎶樼嚎鍥炬牸寮�
+ await this.largeAreaChartList.forEach((i, k) => {
+ this.$refs['largeAreaChartRef' + k][0].refreshData(
+ i.listData,
+ i.yAxisMonth
+ )
+ })
},
+ // 寮�鍚畾鏃跺櫒
destroyTimerAgainStart() {
+ this.largeAreaChartList = []
clearInterval(this.timer)
- this.timer = setInterval(
- this.getMqttLists,
- 1000 * 60 * this.checkboxGroup3.split(' ')[0]
- )
+ this.timer = setInterval(this.getMqttLists, 1000 * 30)
+ this.getMqttLists()
}
}
}
--
Gitblit v1.9.3