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 | 104 +++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 90 insertions(+), 14 deletions(-)
diff --git a/src/views/equipment/mqtt-show/index.vue b/src/views/equipment/mqtt-show/index.vue
index 692a69d..fc50651 100644
--- a/src/views/equipment/mqtt-show/index.vue
+++ b/src/views/equipment/mqtt-show/index.vue
@@ -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>
@@ -71,38 +93,90 @@
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]
- })
- await mqttList(obj).then( async (res) => {
- let data = res.data.data
+ }
+ 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 = []
@@ -117,17 +191,19 @@
})
this.largeAreaChartList = data
})
+ // 澶勭悊鏁版嵁锛岄�傞厤鎶樼嚎鍥炬牸寮�
await this.largeAreaChartList.forEach((i, k) => {
- this.$refs['largeAreaChartRef' + k][0].refreshData(i.listData, i.yAxisMonth)
+ this.$refs['largeAreaChartRef' + k][0].refreshData(
+ i.listData,
+ i.yAxisMonth
+ )
})
},
+ // 寮�鍚畾鏃跺櫒
destroyTimerAgainStart() {
this.largeAreaChartList = []
clearInterval(this.timer)
- this.timer = setInterval(
- this.getMqttLists,
- 1000 * 30
- )
+ this.timer = setInterval(this.getMqttLists, 1000 * 30)
this.getMqttLists()
}
}
--
Gitblit v1.9.3