From 54ef36700435d541a1154503b14f25ad984f6f90 Mon Sep 17 00:00:00 2001
From: zhouwenxuan <1175765986@qq.com>
Date: 星期二, 05 九月 2023 13:21:29 +0800
Subject: [PATCH] 实时监控页面
---
src/views/monitorData/gasData/index.vue | 97 ++++++++++++++++++++++++++----------------------
1 files changed, 53 insertions(+), 44 deletions(-)
diff --git a/src/views/monitorData/gasData/index.vue b/src/views/monitorData/gasData/index.vue
index 992af73..c1804a3 100644
--- a/src/views/monitorData/gasData/index.vue
+++ b/src/views/monitorData/gasData/index.vue
@@ -8,7 +8,6 @@
v-model="state.tableData.listQuery.searchParams.time"
type="datetimerange"
format="YYYY-MM-DD HH:mm:ss"
- value-format="YYYY-MM-DD HH:mm:ss"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
@@ -22,7 +21,7 @@
style="max-width: 180px"
size="default"
>
- <el-option v-for="item in state.tableData.gasList" :key="item.label" :label="item.value" :value="item.label"></el-option>
+ <el-option v-for="item in state.tableData.gasList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-button size="default" type="primary" class="ml10" @click="search()">
@@ -72,8 +71,9 @@
import * as echarts from "echarts";
import { ElMessage, ElMessageBox } from 'element-plus'
import {TableGasState} from "/@/types/monitorData";
+import { gasManageApi } from "/@/api/basicDataManage/gasManage";
+import moment from "moment";
-const infoRef = ref();
const state = reactive<TableGasState>({
tableData: {
data: [],
@@ -83,27 +83,20 @@
pageIndex: 1,
pageSize: 10,
searchParams:{
+ startTime: '',
+ endTime: '',
time: [],
gas: ''
}
},
- gasList: [
- {
- label: '1',
- value: '甲醛'
- },
- {
- label: '2',
- value: '甲烷'
- }
- ]
+ gasList: []
}
});
const chooseTime = (val: any) => {
console.log("val",val)
- let sTime = Date.parse(new Date(val[0].replace(/-/g, "/")));
- let eTime = Date.parse(new Date(val[1].replace(/-/g, "/")));
+ let sTime = Date.parse(new Date(val[0]));
+ let eTime = Date.parse(new Date(val[1]));
const datadiff = eTime - sTime + 86400000;
const time = 7 * 24 * 60 * 60 * 1000;
if (sTime > eTime) {
@@ -117,14 +110,18 @@
state.tableData.listQuery.searchParams.time = [];
return false;
} else {
- console.log('七天内数据')
}
}
}
+const dataZoomEnd = ref();
+const xData = ref(['10:18:26', '10:18:56', '10:19:24', '10:19:54', '10:20:26', '10:20:56', '10:21:24']);
onMounted(
() => {
getNowTime();
+ getAllGas();
+ dataZoomEnd.value = xData.value.length > 25 ? 30 : 100; //x轴数量大于25，滑动框显示前30%标签，否则显示100%
+ console.log("dataZoomEnd",dataZoomEnd.value)
initCharts();
}
);
@@ -133,13 +130,29 @@
let sTime = `${isDate.getFullYear()}-${isDate.getMonth() + 1}-${isDate.getDate()}`
let eTime = `${isDate.getFullYear()}-${isDate.getMonth() + 1}-${isDate.getDate()}`
sTime = `${sTime} 00:00:00`
- eTime = `${eTime} 23:59:59`
- state.tableData.listQuery.searchParams.time = [sTime ,eTime];
- console.log("time",state.tableData.listQuery.searchParams.time)
+ eTime = `${eTime} ` + moment().format('HH:mm:ss')
+ state.tableData.listQuery.searchParams.time = [sTime,eTime];
}
const initInfoData = () => {
- console.log("数据列表")
+ const param = {
+ startTime: moment(state.tableData.listQuery.searchParams.time[0]).format('YYYY-MM-DD HH:mm:ss'),
+ endTime: moment(state.tableData.listQuery.searchParams.time[1]).format('YYYY-MM-DD HH:mm:ss')
+ }
+ console.log("数据列表",param)
};
+
+const getAllGas = async () => {
+ let res = await gasManageApi().getGas({});
+ if(res.data.code == 100) {
+ state.tableData.gasList = res.data.data;
+ }else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+};
+
const onHandleSizeChange = (val: number) => {
state.tableData.listQuery.pageSize = val;
initInfoData();
@@ -149,35 +162,18 @@
state.tableData.listQuery.pageIndex = val;
initInfoData();
};
-const openDialog = (type: string, value: any) => {
- infoRef.value.openDialog(type, value);
-};
-const del = (val: any) => {
- ElMessageBox.confirm(
- '确定删除此条数据？',
- '提示',
- {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning',
- }
- )
- .then(() => {
- ElMessage({
- type: 'success',
- message: '删除成功',
- })
- })
-};
-
const search = () => {
+ initInfoData();
console.log("vla",state.tableData.listQuery.searchParams)
}
const reset = () => {
state.tableData.listQuery.searchParams.time = [];
-
state.tableData.listQuery.searchParams.gas = '';
+ state.tableData.listQuery.pageIndex = 1;
+ initInfoData();
}
+
+
const initCharts = () => {
const myChart = echarts.init(document.getElementById('gasChart'));
@@ -192,7 +188,11 @@
xAxis: {
show: true,
type: 'category',
- data: ['10:18:26', '10:18:28', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ // axisLabel: {
+ // interval: 0,
+ // rotate: 45
+ // },
+ data: xData.value
},
yAxis: {
show: true,
@@ -219,7 +219,16 @@
},
}
- ]
+ ],
+ // dataZoom: [
+ // {
+ // type: 'slider',
+ // show: dataZoomEnd.value == 100 ? false : true,
+ // realtime: true,
+ // start: 0,
+ // end: dataZoomEnd.value
+ // },
+ // ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
--
Gitblit v1.9.2