From 65fe950aa5b41293a22fd85eadc68a7a19ea1b5a Mon Sep 17 00:00:00 2001 From: wally <18603454788@163.com> Date: Thu, 11 Nov 2021 15:48:22 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=B7=BB=E5=8A=A0=E5=AE=9E?= =?UTF-8?q?=E6=97=B6=E6=95=B0=E6=8D=AE=E6=9F=A5=E7=9C=8B=E3=80=81=E6=8C=89?= =?UTF-8?q?=E6=97=B6=E9=97=B4=E5=80=92=E5=BA=8F=E7=AD=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config/config.js | 3 + src/routers/index.js | 17 ++- src/views/data-history.vue | 8 +- src/views/data-realtime.vue | 171 +++++++++++++++++++++++++++++ src/views/data-report.vue | 10 +- src/views/device-list.vue | 27 +++-- src/views/statistical-realtime.vue | 19 ++-- 7 files changed, 225 insertions(+), 30 deletions(-) create mode 100644 src/views/data-realtime.vue diff --git a/src/config/config.js b/src/config/config.js index ac6781e..addb974 100644 --- a/src/config/config.js +++ b/src/config/config.js @@ -89,3 +89,6 @@ export const PEND_TYPE = { text: '下发成功', }, }; + +// 实时查询数据的轮询时间 +export const REALTIME_DATA_INTERVAL = 15000; diff --git a/src/routers/index.js b/src/routers/index.js index 34d838b..bdbdbf4 100644 --- a/src/routers/index.js +++ b/src/routers/index.js @@ -34,16 +34,25 @@ export const routes = [ name: 'device-create', meta: { title: '设备添加', - icon: 'el-icon-plus', + icon: 'el-icon-first-aid-kit', }, component: () => import('@/views/device-create.vue'), }, + { + path: '/corrosion/data-realtime', + name: 'data-realtime', + meta: { + title: '实时数据查看', + icon: 'el-icon-odometer', + }, + component: () => import('@/views/data-realtime.vue'), + }, { path: '/corrosion/statistical-realtime', name: 'statistical-realtime', meta: { title: '实时数据统计', - icon: 'el-icon-time', + icon: 'el-icon-data-analysis', }, component: () => import('@/views/statistical-realtime.vue'), }, @@ -52,7 +61,7 @@ export const routes = [ name: 'data-report', meta: { title: '上报数据查看', - icon: 'el-icon-document-copy', + icon: 'el-icon-stopwatch', }, component: () => import('@/views/data-report.vue'), }, @@ -79,7 +88,7 @@ export const routes = [ name: 'commands', meta: { title: '历史数据指令下发状态', - icon: 'el-icon-document-copy', + icon: 'el-icon-moon-night', }, component: () => import('@/views/commands.vue'), }, diff --git a/src/views/data-history.vue b/src/views/data-history.vue index 3260834..677091f 100644 --- a/src/views/data-history.vue +++ b/src/views/data-history.vue @@ -38,6 +38,7 @@ const getData = async () => { page: page.value.page, size: page.value.size, type: 1, + sort: -1, }; const resData = await getHistory(params); data.value = resData.data; @@ -163,11 +164,16 @@ function formatTime(time) { - + + + + +import { computed, onMounted, onUnmounted, ref } from 'vue'; +import { useStore } from 'vuex'; +import SearchBar from 'components/search-bar.vue'; +import { getDatas } from 'apis'; +import { ElMessage } from 'element-plus'; +import dayjs from 'dayjs'; +import { REALTIME_DATA_INTERVAL } from '@/config/config'; + +const page = ref({ + page: 1, + size: 50, +}); +let timer = null; +let apiTimer = null; +const store = useStore(); +const token = computed(() => store.getters['user/token']); +const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id +const contentHeight = ref(600); +const loadingSearch = ref(false); +const data = ref(null); + +// 获取设备完整信息列表 +const getData = async () => { + try { + if (token && token.value) { + if (!currentDeviceId.value) { + return ElMessage.error('请选择站点'); + } + + const date = [dayjs().startOf('day').format('x'), dayjs().endOf('day').format('x')]; + const params = { + deviceId: currentDeviceId.value, + date, + page: page.value.page, + size: page.value.size, + type: 1, + sort: -1, + }; + + loadingSearch.value = true; + const resData = await getDatas(params); + loadingSearch.value = false; + + data.value = resData.data; + page.value = resData.page; + timer && clearTimeout(timer); + timer = null; + + // 定时轮询请求新数据 + if (!apiTimer) { + apiTimer = setInterval(() => { + getData(); + }, REALTIME_DATA_INTERVAL); + } + } else { + timer = setTimeout(() => { + getData(); + }, 20); + } + } catch (error) { + ElMessage.error(error.message || '获取数据失败'); + console.log('error: ', error); + } +}; + +// 设置表格高度 +onMounted(() => { + const winHeight = document.documentElement.clientHeight; + contentHeight.value = winHeight - 170; + currentDeviceId.value && getData(); +}); + +onUnmounted(() => { + apiTimer && clearInterval(apiTimer); + apiTimer = null; +}); + +/** + * 当前 码变化 + * 更新page 重新 取数据 + * @param {number} e 的页码 + */ +const onCurrentPageChange = e => { + page.value.page = e; + getData(); +}; + +const onSizeChange = e => { + page.value.size = e; + getData(); +}; + +// 下一页 +const onNext = e => { + page.value.page = e + 1; + getData(); +}; + +// 上一页 +const onPrev = e => { + page.value.page = e - 1; + getData(); +}; + +/** + * 格式化时间 + * @param {number} time 时间戳 + * @returns {string} + */ +function formatTime(time) { + return dayjs(new Date(time)).format('YYYY-MM-DD HH:mm:ss'); +} + + + diff --git a/src/views/data-report.vue b/src/views/data-report.vue index 2f23b22..c60864d 100644 --- a/src/views/data-report.vue +++ b/src/views/data-report.vue @@ -38,6 +38,7 @@ const getData = async () => { page: page.value.page, size: page.value.size, type: 1, + sort: -1, }; loadingSearch.value = true; @@ -121,14 +122,19 @@ function formatTime(time) { - + - + + + + diff --git a/src/views/device-list.vue b/src/views/device-list.vue index ee280dd..12047dc 100644 --- a/src/views/device-list.vue +++ b/src/views/device-list.vue @@ -29,7 +29,7 @@ - +