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) {
-
+
{{ formatTime(+scope.row.time) }}
+
+
+ {{ formatTime(+scope.row.createdAt) }}
+
+
+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');
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ formatTime(+scope.row.time) }}
+
+
+
+
+ {{ formatTime(+scope.row.createdAt) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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) {
-
+
-
+
{{ formatTime(+scope.row.time) }}
+
+
+ {{ formatTime(+scope.row.createdAt) }}
+
+
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 @@
-
+
@@ -37,15 +37,24 @@
+
+
+
-
+
-
-
+
+
-
+
+
+
+
+
+
+
@@ -85,7 +94,7 @@ import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import SearchBar from 'components/search-bar.vue';
import DeviceEdit from 'components/device-edit.vue';
-import { deleteDevice } from 'apis/index';
+import { deleteDevice } from 'apis';
import { ElMessage } from 'element-plus';
let timer = null;
@@ -132,11 +141,7 @@ onMounted(() => {
*/
function onSearch(page, size = 50) {
const deviceId = currentDeviceId.value;
- const params = {
- deviceId,
- page,
- size,
- };
+ const params = { deviceId, page, size };
store.dispatch('device/getDevicesAll', params);
}
diff --git a/src/views/statistical-realtime.vue b/src/views/statistical-realtime.vue
index 7ebc265..1b1a99d 100644
--- a/src/views/statistical-realtime.vue
+++ b/src/views/statistical-realtime.vue
@@ -1,5 +1,5 @@
-
+
@@ -9,6 +9,7 @@ import RealtimeData from 'components/realtime-data.vue';
import { computed, ref, onUnmounted } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
+import { REALTIME_DATA_INTERVAL } from '@/config/config';
const childRef = ref(null);
let timer = null;
@@ -20,14 +21,8 @@ const currentDeviceId = computed(() => store.state.device.currentDeviceId); //
/**
* 实时数据统计
- * @param {*} deviceId // 站点 设备id
- * @param {*} date // 年月时间段
- * @param {*} sort // 1 -> 按时间正序 -1->按时间倒序
- * @param {*} page // 第几页
- * @param {*} size // 每页多少条
- * @param {*} type // 0查全部
*/
-const getDate = async () => {
+const getData = async () => {
try {
if (token && token.value) {
const start = +dayjs().startOf('day').format('x');
@@ -45,12 +40,12 @@ const getDate = async () => {
// 定时轮询请求新数据
if (!apiTimer) {
apiTimer = setInterval(() => {
- getDate();
- }, 5000);
+ getData();
+ }, REALTIME_DATA_INTERVAL);
}
} else {
timer = setTimeout(() => {
- getDate();
+ getData();
}, 20);
}
} catch (error) {
@@ -58,7 +53,7 @@ const getDate = async () => {
}
};
-getDate();
+getData();
onUnmounted(() => {
apiTimer && clearInterval(apiTimer);