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 +++++++------
package.json | 179 ++++++++++++------------
src/views/monitorData/fluxData/index.vue | 92 ++++++------
src/types/monitorData.d.ts | 2
src/views/monitorData/weatherData/index.vue | 34 +---
5 files changed, 203 insertions(+), 201 deletions(-)
diff --git a/package.json b/package.json
index 90518f1..aa83b8d 100644
--- a/package.json
+++ b/package.json
@@ -1,91 +1,92 @@
{
- "name": "vue-next-admin",
- "version": "2.1.1",
- "description": "vue3 vite next admin template",
- "author": "lyt_20201208",
- "license": "MIT",
- "scripts": {
- "dev": "vite --force",
- "build": "vite build",
- "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
- },
- "dependencies": {
- "@amap/amap-jsapi-loader": "^1.0.1",
- "@element-plus/icons-vue": "^2.0.6",
- "@kjgl77/datav-vue3": "^1.6.1",
- "@wangeditor/editor": "^5.1.14",
- "axios": "^0.27.2",
- "countup.js": "^2.2.0",
- "cropperjs": "^1.5.12",
- "echarts": "^5.3.3",
- "echarts-gl": "^2.0.9",
- "echarts-wordcloud": "^2.0.0",
- "element-plus": "^2.2.9",
- "js-base64": "^3.7.2",
- "js-cookie": "^3.0.1",
- "json-bigint": "^1.0.0",
- "jsplumb": "^2.15.6",
- "mitt": "^3.0.0",
- "nprogress": "^0.2.0",
- "pinia": "^2.0.14",
- "pinia-plugin-persistedstate": "^2.1.1",
- "print-js": "^1.6.0",
- "qrcodejs2-fixes": "^0.0.2",
- "screenfull": "^6.0.1",
- "sortablejs": "^1.15.0",
- "splitpanes": "^3.1.1",
- "vue": "^3.2.36",
- "vue-clipboard3": "^2.0.0",
- "vue-grid-layout": "^3.0.0-beta1",
- "vue-i18n": "^9.1.10",
- "vue-router": "^4.0.15",
- "wangeditor": "^4.7.15",
- "xlsx": "^0.18.5"
- },
- "devDependencies": {
- "@types/json-bigint": "^1.0.1",
- "@types/node": "^17.0.39",
- "@types/nprogress": "^0.2.0",
- "@types/sortablejs": "^1.13.0",
- "@typescript-eslint/eslint-plugin": "^5.27.0",
- "@typescript-eslint/parser": "^5.27.0",
- "@vitejs/plugin-vue": "^2.3.3",
- "@vue/compiler-sfc": "^3.2.36",
- "amfe-flexible": "^2.2.1",
- "dotenv": "^16.0.1",
- "eslint": "^8.17.0",
- "eslint-plugin-vue": "^9.1.0",
- "postcss-pxtorem": "^6.0.0",
- "prettier": "^2.6.2",
- "sass": "^1.52.2",
- "sass-loader": "^13.0.0",
- "typescript": "^4.7.3",
- "vite": "^2.9.9",
- "vue-eslint-parser": "^9.0.2"
- },
- "browserslist": [
- "> 1%",
- "last 2 versions",
- "not dead"
- ],
- "bugs": {
- "url": "https://gitee.com/lyt-top/vue-next-admin/issues"
- },
- "engines": {
- "node": ">=12.0.0",
- "npm": ">= 6.0.0"
- },
- "keywords": [
- "vue",
- "vue3",
- "vuejs/vue-next",
- "element-ui",
- "element-plus",
- "vue-next-admin",
- "next-admin"
- ],
- "repository": {
- "type": "git",
- "url": "https://gitee.com/lyt-top/vue-next-admin.git"
- }
+ "name": "vue-next-admin",
+ "version": "2.1.1",
+ "description": "vue3 vite next admin template",
+ "author": "lyt_20201208",
+ "license": "MIT",
+ "scripts": {
+ "dev": "vite --force",
+ "build": "vite build",
+ "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
+ },
+ "dependencies": {
+ "@amap/amap-jsapi-loader": "^1.0.1",
+ "@element-plus/icons-vue": "^2.0.6",
+ "@kjgl77/datav-vue3": "^1.6.1",
+ "@wangeditor/editor": "^5.1.14",
+ "axios": "^0.27.2",
+ "countup.js": "^2.2.0",
+ "cropperjs": "^1.5.12",
+ "echarts": "^5.3.3",
+ "echarts-gl": "^2.0.9",
+ "echarts-wordcloud": "^2.0.0",
+ "element-plus": "^2.2.9",
+ "js-base64": "^3.7.2",
+ "js-cookie": "^3.0.1",
+ "json-bigint": "^1.0.0",
+ "jsplumb": "^2.15.6",
+ "mitt": "^3.0.0",
+ "moment": "^2.29.4",
+ "nprogress": "^0.2.0",
+ "pinia": "^2.0.14",
+ "pinia-plugin-persistedstate": "^2.1.1",
+ "print-js": "^1.6.0",
+ "qrcodejs2-fixes": "^0.0.2",
+ "screenfull": "^6.0.1",
+ "sortablejs": "^1.15.0",
+ "splitpanes": "^3.1.1",
+ "vue": "^3.2.36",
+ "vue-clipboard3": "^2.0.0",
+ "vue-grid-layout": "^3.0.0-beta1",
+ "vue-i18n": "^9.1.10",
+ "vue-router": "^4.0.15",
+ "wangeditor": "^4.7.15",
+ "xlsx": "^0.18.5"
+ },
+ "devDependencies": {
+ "@types/json-bigint": "^1.0.1",
+ "@types/node": "^17.0.39",
+ "@types/nprogress": "^0.2.0",
+ "@types/sortablejs": "^1.13.0",
+ "@typescript-eslint/eslint-plugin": "^5.27.0",
+ "@typescript-eslint/parser": "^5.27.0",
+ "@vitejs/plugin-vue": "^2.3.3",
+ "@vue/compiler-sfc": "^3.2.36",
+ "amfe-flexible": "^2.2.1",
+ "dotenv": "^16.0.1",
+ "eslint": "^8.17.0",
+ "eslint-plugin-vue": "^9.1.0",
+ "postcss-pxtorem": "^6.0.0",
+ "prettier": "^2.6.2",
+ "sass": "^1.52.2",
+ "sass-loader": "^13.0.0",
+ "typescript": "^4.7.3",
+ "vite": "^2.9.9",
+ "vue-eslint-parser": "^9.0.2"
+ },
+ "browserslist": [
+ "> 1%",
+ "last 2 versions",
+ "not dead"
+ ],
+ "bugs": {
+ "url": "https://gitee.com/lyt-top/vue-next-admin/issues"
+ },
+ "engines": {
+ "node": ">=12.0.0",
+ "npm": ">= 6.0.0"
+ },
+ "keywords": [
+ "vue",
+ "vue3",
+ "vuejs/vue-next",
+ "element-ui",
+ "element-plus",
+ "vue-next-admin",
+ "next-admin"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://gitee.com/lyt-top/vue-next-admin.git"
+ }
}
diff --git a/src/types/monitorData.d.ts b/src/types/monitorData.d.ts
index d49cb4c..a0219f5 100644
--- a/src/types/monitorData.d.ts
+++ b/src/types/monitorData.d.ts
@@ -35,6 +35,8 @@
pageIndex: number;
pageSize: number;
searchParams:{
+ startTime: string;
+ endTime: string;
time: Array<any>;
gas: string;
}
diff --git a/src/views/monitorData/fluxData/index.vue b/src/views/monitorData/fluxData/index.vue
index 8eda26d..f36da95 100644
--- a/src/views/monitorData/fluxData/index.vue
+++ b/src/views/monitorData/fluxData/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.areaList" :key="item.label" :label="item.value" :value="item.label"></el-option>
+ <el-option v-for="item in state.tableData.areaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="气体：">
@@ -32,7 +31,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()">
@@ -83,8 +82,10 @@
import * as echarts from "echarts";
import { ElMessage, ElMessageBox } from 'element-plus'
import {TableFluxState} from "/@/types/monitorData";
+import moment from "moment/moment";
+import { gasManageApi } from "/@/api/basicDataManage/gasManage";
+import {areaManageApi} from "/@/api/basicDataManage/areaManage";
-const infoRef = ref();
const state = reactive<TableFluxState>({
tableData: {
data: [],
@@ -99,26 +100,8 @@
area: ''
}
},
- gasList: [
- {
- label: '1',
- value: '甲醛'
- },
- {
- label: '2',
- value: '甲烷'
- }
- ],
- areaList: [
- {
- label: '1',
- value: '1号区域'
- },
- {
- label: '2',
- value: '2号区域'
- }
- ],
+ gasList: [],
+ areaList: [],
}
});
@@ -151,6 +134,8 @@
onMounted(
() => {
getNowTime();
+ getArea();
+ getAllGas();
initCharts();
}
@@ -161,13 +146,47 @@
let sTime = `${isDate.getFullYear()}-${isDate.getMonth() + 1}-${isDate.getDate()}`
let eTime = `${isDate.getFullYear()}-${isDate.getMonth() + 1}-${isDate.getDate()}`
sTime = `${sTime} 00:00:30`
- eTime = `${eTime} 23:59:59`
+ eTime = `${eTime} ` + moment().format('HH:mm:ss')
state.tableData.listQuery.searchParams.time = [sTime ,eTime];
- console.log("time",state.tableData.listQuery.searchParams.time)
}
const initInfoData = () => {
+ 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("数据列表")
};
+
+const getArea = async () => {
+ const param = {
+ pageIndex: 1,
+ pageSize: 999,
+ searchParams:{
+ name: ''
+ }
+ }
+ let res = await areaManageApi().getAreaPage(param);
+ if(res.data.code == 100) {
+ state.tableData.areaList = res.data.data;
+ }else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+}
+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();
@@ -177,31 +196,16 @@
state.tableData.listQuery.pageIndex = val;
initInfoData();
};
-const del = (val: any) => {
- ElMessageBox.confirm(
- '确定删除此条数据？',
- '提示',
- {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning',
- }
- )
- .then(() => {
- ElMessage({
- type: 'success',
- message: '删除成功',
- })
- })
-};
-
const search = () => {
+ initInfoData();
console.log("22",state.tableData.listQuery.searchParams)
}
const reset = () => {
state.tableData.listQuery.searchParams.time = [];
state.tableData.listQuery.searchParams.area = '';
state.tableData.listQuery.searchParams.gas = '';
+ state.tableData.listQuery.pageIndex = 1;
+ initInfoData();
}
const labelOption = {
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);
diff --git a/src/views/monitorData/weatherData/index.vue b/src/views/monitorData/weatherData/index.vue
index f8f4ad4..eda444c 100644
--- a/src/views/monitorData/weatherData/index.vue
+++ b/src/views/monitorData/weatherData/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="结束时间"
@@ -72,6 +71,7 @@
import * as echarts from "echarts";
import { ElMessage, ElMessageBox } from 'element-plus'
import {TableWeatherState} from "/@/types/monitorData";
+import moment from "moment/moment";
const infoRef = ref();
const state = reactive<TableWeatherState>({
@@ -138,6 +138,7 @@
() => {
getNowTime();
initCharts();
+ initInfoData()
}
);
const getNowTime = () => {
@@ -145,11 +146,14 @@
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`
+ eTime = `${eTime} ` + moment().format('HH:mm:ss')
state.tableData.listQuery.searchParams.time = [sTime ,eTime];
- console.log("time",state.tableData.listQuery.searchParams.time)
}
const initInfoData = () => {
+ 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("数据列表")
};
const onHandleSizeChange = (val: number) => {
@@ -161,34 +165,16 @@
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 = () => {
console.log("vla",state.tableData.listQuery.searchParams)
+ initInfoData();
}
const reset = () => {
state.tableData.listQuery.searchParams.time = [];
-
state.tableData.listQuery.searchParams.weatherType = '';
+ state.tableData.listQuery.pageIndex = 1;
+ initInfoData();
}
const initCharts = () => {
--
Gitblit v1.9.2