You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.9 KiB
61 lines
1.9 KiB
<template>
|
|
<DataSearchBar @search="getDate" />
|
|
<IntegralElectric ref="child1" class="mt-4" />
|
|
<TotalCorrosion ref="child2" class="mt-4" />
|
|
<MoistTime ref="child3" class="mt-4" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import DataSearchBar from 'components/data-search-bar.vue';
|
|
import IntegralElectric from 'components/integral-electric.vue';
|
|
import TotalCorrosion from 'components/total-corrosion.vue';
|
|
import MoistTime from 'components/moist-time.vue';
|
|
import { computed, ref } from 'vue';
|
|
import { useStore } from 'vuex';
|
|
|
|
const child1 = ref(null);
|
|
const child2 = ref(null);
|
|
const child3 = ref(null);
|
|
|
|
let timer = null;
|
|
const store = useStore();
|
|
const token = computed(() => store.getters['user/token']);
|
|
const electricData = computed(() => store.state.statistics.electricData);
|
|
const corrosionData = computed(() => store.state.statistics.corrosionData);
|
|
const moistTimeData = computed(() => store.state.statistics.moistTimeData);
|
|
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
|
|
|
|
// 获取月累计数据
|
|
/**
|
|
* 获取月累计数据
|
|
* @param {*} deviceId // 站点 设备id
|
|
* @param {*} date // 年月时间段
|
|
* @param {*} sort // 1 -> 按时间正序 -1->按时间倒序
|
|
*/
|
|
const getDate = async options => {
|
|
try {
|
|
if (token) {
|
|
const params = {
|
|
deviceId: currentDeviceId.value,
|
|
date: options && options.date && options.date.length ? options.date : [],
|
|
sort: 1,
|
|
};
|
|
await store.dispatch('statistics/getMonthsDate', params);
|
|
timer && clearTimeout(timer);
|
|
timer = null;
|
|
// 渲染图表
|
|
child1.value.setDate(electricData.value);
|
|
child2.value.setDate(corrosionData.value);
|
|
child3.value.setDate(moistTimeData.value);
|
|
} else {
|
|
timer = setTimeout(() => {
|
|
getDate();
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.log('error: ', error);
|
|
}
|
|
};
|
|
|
|
getDate();
|
|
</script>
|
|
|