diff --git a/src/components/data-search-bar.vue b/src/components/data-search-bar.vue index e9fbebe..d3ffac5 100644 --- a/src/components/data-search-bar.vue +++ b/src/components/data-search-bar.vue @@ -6,7 +6,7 @@ - + store.state.device.devices); -// 日期格式转换 -const timeChange = time => { - const d = new Date(time); - const y = d.getFullYear(); - let m = d.getMonth() + 1; - m = m < 10 ? `0${m}` : m; - return `${y}-${m}`; +/** + * 格式化日期 + * @param {Date} date 选择的日期 + */ +const formatDate = date => { + const year = date.getFullYear(); + const month = date.getMonth() + 1; + const day = date.getDate(); + return `${year}-${month}-${day}`; }; const onSubmit = () => { @@ -50,8 +52,8 @@ const onSubmit = () => { const options = { ...searchDevice }; let date = []; if (options.value1) { - const start = timeChange([...options.value1][0]); - const end = timeChange([...options.value1][1]); + const start = formatDate([...options.value1][0]); + const end = formatDate([...options.value1][1]); date = [start, end]; } const params = { deviceId: options.device, date }; diff --git a/src/components/realtime-data.vue b/src/components/realtime-data.vue index 7bf4e1b..f749ac6 100644 --- a/src/components/realtime-data.vue +++ b/src/components/realtime-data.vue @@ -22,9 +22,13 @@ onMounted(() => { // 设置图表 const setDate = data => { noData.value = false; + if (bar) { - bar.destroy(); + console.log('重新加载'); + bar.changeData(data); + return; } + bar = new Line('realtimeContainer', { data, padding: 'auto', diff --git a/src/components/search-bar.vue b/src/components/search-bar.vue index d615e19..816731f 100644 --- a/src/components/search-bar.vue +++ b/src/components/search-bar.vue @@ -13,9 +13,11 @@ diff --git a/src/views/statistical-history.vue b/src/views/statistical-history.vue index 7763a79..ff26912 100644 --- a/src/views/statistical-history.vue +++ b/src/views/statistical-history.vue @@ -8,28 +8,55 @@ import SearchBar from 'components/search-bar-data.vue'; import HistoryData from 'components/history-data.vue'; import { computed, ref } from 'vue'; import { useStore } from 'vuex'; -import { getHistories } from 'apis/index'; const childRef = ref(null); let timer = null; -const page = ref({ page: 2, size: 10 }); -const data = ref(null); -const search = ref({}); const store = useStore(); const token = computed(() => store.getters['user/token']); +const realtimeData = computed(() => store.state.statistics.realtimeData); -// 实时数据统计 -const getDate = async () => { +/** + * 格式化日期 + * @param {Date} date 选择的日期 + */ +const formatDate = date => { + const year = date.getFullYear(); + const month = date.getMonth() + 1; + const day = date.getDate(); + return `${year}-${month}-${day}`; +}; + +/** + * 历史数据统计 + * @param {*} deviceId // 站点 设备id + * @param {*} date // 年月时间段 + * @param {*} sort // 1 -> 按时间正序 -1->按时间倒序 + * @param {*} page // 第几页 + * @param {*} size // 每页多少条 + * @param {*} type // 0查全部 + */ +const getDate = async options => { try { if (token) { - const params = { search: { ...search.value }, page: { page: page.value.page, size: page.value.size } }; - const resData = await getHistories(params); - data.value = resData.data; - page.value = resData.page; + let date = []; + const startTime = new Date(new Date(new Date().toLocaleDateString()).getTime()); + const start = formatDate(startTime); + const end = formatDate(new Date()); + date = [start, end]; + + const params = { + deviceId: options && options.deviceId ? options.deviceId : '', + date: options && options.date && options.date.length ? options.date : date, + sort: 1, + page: 1, + size: 10, + type: 0, + }; + await store.dispatch('statistics/getRealtimeData', params); timer && clearTimeout(timer); timer = null; - childRef.value.changeDate(data.value); + childRef.value.changeDate(realtimeData.value); } else { timer = setTimeout(() => { getDate(); diff --git a/src/views/statistical-realtime.vue b/src/views/statistical-realtime.vue index 5011b4b..6f8ab23 100644 --- a/src/views/statistical-realtime.vue +++ b/src/views/statistical-realtime.vue @@ -1,41 +1,78 @@