From 67ddfbd2db13529c8923838d4dc7ed4cf105b0fe Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期五, 20 十月 2023 15:41:51 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/monitorData/daily/index.vue | 112 ++++++++++++------
src/api/monitorData/daily/index.ts | 15 ++
src/views/monitorData/gasData/index.vue | 72 +++++++++---
src/views/monitorData/fluxData/index.vue | 56 +++++++--
src/types/monitorData.d.ts | 4
src/views/monitorData/weatherData/index.vue | 57 +++++++--
6 files changed, 228 insertions(+), 88 deletions(-)
diff --git a/src/api/monitorData/daily/index.ts b/src/api/monitorData/daily/index.ts
new file mode 100644
index 0000000..946f4fe
--- /dev/null
+++ b/src/api/monitorData/daily/index.ts
@@ -0,0 +1,15 @@
+import request from '/@/utils/request';
+
+export function dailyApi() {
+ return {
+
+ //日报查询
+ getDaily: (data: object) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + `/dailyReport/page`,
+ method: 'post',
+ data: data
+ });
+ },
+ };
+}
diff --git a/src/types/monitorData.d.ts b/src/types/monitorData.d.ts
index aef6fa0..e888c41 100644
--- a/src/types/monitorData.d.ts
+++ b/src/types/monitorData.d.ts
@@ -70,7 +70,7 @@
};
gasList: Array<any>;
areaList: Array<any>;
- }
+ },
}
export interface TableWeatherRow {
@@ -97,4 +97,4 @@
};
weatherTypeList: Array<any>;
}
-}
\ No newline at end of file
+}
diff --git a/src/views/monitorData/daily/index.vue b/src/views/monitorData/daily/index.vue
index 4e313d6..df56e75 100644
--- a/src/views/monitorData/daily/index.vue
+++ b/src/views/monitorData/daily/index.vue
@@ -26,14 +26,8 @@
</el-form>
</div>
<el-table :data="state.tableData.data" style="width: 100%">
- <el-table-column align="center" prop="date" label="日期"/>
- <el-table-column align="center" label="文件名称">
- <template #default="scope">
- <div v-for="(item, index) in scope.row.file" :key="index">
- {{ item.filename}}
- </div>
- </template>
- </el-table-column>
+ <el-table-column align="center" prop="gmtCreate" label="日期"/>
+ <el-table-column align="center" prop="name" label="文件名称"/>
<el-table-column label="操作" show-overflow-tooltip width="140">
<template #default="scope">
<el-button size="small" text type="primary" @click="downLoad(scope.row)">下载</el-button>
@@ -60,11 +54,13 @@
</template>
<script setup lang="ts">
-import {reactive, ref} from "vue";
+import {onMounted, reactive, ref} from "vue";
import { TableDailytState } from "/@/types/monitorData";
import axios from "axios";
import Cookies from "js-cookie";
import { ElMessage } from 'element-plus'
+import {dailyApi} from "/@/api/monitorData/daily";
+import moment from "moment/moment";
const state = reactive<TableDailytState>({
tableData: {
@@ -93,9 +89,38 @@
}
});
-const initDailyData = () => {
- console.log("数据列表")
+onMounted(
+ () => {
+ getNowTime();
+ initDailyData()
+ }
+);
+
+const initDailyData = async () => {
+ const param = {
+ pageIndex: state.tableData.listQuery.pageIndex,
+ pageSize: state.tableData.listQuery.pageSize,
+ searchParams: {
+ year: state.tableData.listQuery.searchParams.time.substring(0,4),
+ month: state.tableData.listQuery.searchParams.time.substring(5,7)
+ }
+ }
+ let res = await dailyApi().getDaily(param);
+ if(res.data.code == 100) {
+ state.tableData.data = res.data.data;
+ state.tableData.total = res.data.total;
+ state.tableData.listQuery.pageIndex = res.data.pageIndex;
+ state.tableData.listQuery.pageSize = res.data.pageSize;
+ }
+
+ console.log("数据列表",res)
};
+const getNowTime = () => {
+ let isDate = new Date()
+ const year = isDate.getFullYear();
+ const month = isDate.getMonth() + 1;
+ state.tableData.listQuery.searchParams.time = (year + "-" + (month >= 10 ? month : "0" + month)).toString();
+}
const onHandleSizeChange = (val: number) => {
state.tableData.listQuery.pageSize = val;
initDailyData();
@@ -106,39 +131,48 @@
initDailyData();
};
const downLoad = (file: any) => {
- // axios.get(process.env.VITE_API_URL + file.fileUrl, {
- // headers: {
- // 'Content-Type': 'application/json',
- // 'Authorization': Cookies.get('token'),
- // },
- // responseType: 'blob'
- // }).then(res => {
- // if (res) {
- // const link = document.createElement('a')
- // let blob = new Blob([res.data], {
- // type: res.data.type
- // })
- // link.style.display = "none";
- // link.href = URL.createObjectURL(blob); // 创建URL
- // link.setAttribute("download", file.fileName);
- // document.body.appendChild(link);
- // link.click();
- // document.body.removeChild(link);
- // } else {
- // ElMessage({
- // message: '获取文件失败',
- // type: 'error',
- // })
- // }
- // })
+ console.log("file",file)
+ axios.get(import.meta.env.VITE_API_URL + file.fileUrl, {
+ headers: {
+ 'Content-Type': 'application/json',
+ 'tk': `${Cookies.get('token')}`,
+ 'uid':`${Cookies.get('uid')}`
+ },
+ responseType: 'blob'
+ }).then(res => {
+ if (res) {
+ const link = document.createElement('a')
+ let blob = new Blob([res.data], {
+ type: res.data.type
+ })
+ link.style.display = "none";
+ link.href = URL.createObjectURL(blob); // 创建URL
+ link.setAttribute("download", file.name);
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ ElMessage({
+ message: '下载成功',
+ type: 'success',
+ })
+ } else {
+ ElMessage({
+ message: '获取文件失败',
+ type: 'error',
+ })
+ }
+ })
}
const search = () => {
- console.log("xxxx",state.tableData.listQuery.searchParams)
+ state.tableData.listQuery.pageIndex = 1;
+ initDailyData();
+ console.log("vla",state.tableData.listQuery.searchParams)
}
const reset = () => {
- state.tableData.listQuery.searchParams.time = '';
+ getNowTime();
+ initDailyData();
}
</script>
<style scoped lang="scss">
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/monitorData/fluxData/index.vue b/src/views/monitorData/fluxData/index.vue
index d50c5d2..107a490 100644
--- a/src/views/monitorData/fluxData/index.vue
+++ b/src/views/monitorData/fluxData/index.vue
@@ -49,7 +49,7 @@
</el-form>
</div>
<div id="gasChart" style="height: 500px;width: auto"></div>
- <el-table :data="state.tableData.data" style="width: 100%">
+ <el-table :data="state.tableData.data" style="width: 100%" v-loading="loading">
<el-table-column type="index" label="序号" width="80" />
<el-table-column align="center" prop="time" label="采集时间"/>
<el-table-column align="center" prop="regionName" label="区域名称"/>
@@ -78,7 +78,7 @@
</template>
<script setup lang="ts">
-import {reactive, ref,onMounted} from "vue";
+import {reactive, ref, onMounted, shallowRef} from "vue";
import * as echarts from "echarts";
import { ElMessage, ElMessageBox } from 'element-plus'
import {TableFluxState} from "/@/types/monitorData";
@@ -103,8 +103,11 @@
},
gasList: [],
areaList: [],
- }
+ },
});
+
+const loading = ref(false);
+const myChart = shallowRef(null)
const chooseTime = (val:any) => {
console.log("val",val)
@@ -154,7 +157,7 @@
const yData = ref([]);
const areaChart = ref([]as any);
const initInfoData = async () => {
- //折线图
+ //柱状图
const chartParam = {
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'),
@@ -163,11 +166,18 @@
}
let resChart = await fluxDataApi().getFluxLineChart(chartParam);
if(resChart.data.code == 100) {
- yData.value = mapArray(resChart.data.data);
- areaChart.value = yData.value.map((item: any) => {
- return item.name
- });
- dataZoomEnd.value = xData.value.length > 25 ? 2 : 100;
+ if(resChart.data.data) {
+ yData.value = mapArray(resChart.data.data);
+ areaChart.value = yData.value.map((item: any) => {
+ return item.name
+ });
+ dataZoomEnd.value = xData.value.length > 25 ? 5 : 100;
+ }else {
+ yData.value = [];
+ xData.value = [];
+ dataZoomEnd.value = 100;
+ }
+
initCharts();
}else {
ElMessage({
@@ -176,6 +186,7 @@
});
}
+ loading.value = true;
//表格
const pageParam = {
pageIndex: state.tableData.listQuery.pageIndex,
@@ -193,6 +204,7 @@
state.tableData.total = res.data.total;
state.tableData.listQuery.pageIndex = res.data.pageIndex;
state.tableData.listQuery.pageSize = res.data.pageSize;
+ loading.value = false;
}else {
ElMessage({
type: 'warning',
@@ -214,7 +226,6 @@
let finalResult = []as any;
target.map((item: any) => {
let key = item.regionName;
- //如果有这个key，就push一个对象
if (obj[key]) {
obj[key].push(item);
} else {
@@ -306,7 +317,10 @@
const initCharts = () => {
- const myChart = echarts.init(document.getElementById('gasChart'));
+ if (myChart.value != null && myChart.value != "" && myChart.value != undefined) {
+ myChart.value.dispose();
+ }
+ myChart.value = echarts.init(document.getElementById('gasChart'));
// 指定图表的配置项和数据
const option = {
tooltip: {
@@ -329,6 +343,20 @@
magicType: { show: true, type: ['line', 'bar', 'stack'] },
restore: { show: true },
saveAsImage: { show: true }
+ }
+ },
+ graphic: {
+ type: 'text', // 类型：文本
+ left: 'center',
+ top: 'middle',
+ silent: true, // 不响应事件
+ invisible: yData.value.length > 0, // 有数据就隐藏
+ style: {
+ fill: '#9d9d9d',
+ fontWeight: 'bold',
+ text: '暂无数据',
+ fontFamily: 'Microsoft YaHei',
+ fontSize: '22px'
}
},
xAxis: [
@@ -362,10 +390,10 @@
]
};
// 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option,true);
+ myChart.value.setOption(option,true);
//自适应宽度
window.addEventListener('resize', function () {
- myChart.resize();
+ myChart.value.resize();
})
}
</script>
@@ -388,4 +416,4 @@
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
padding: 3px
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/monitorData/gasData/index.vue b/src/views/monitorData/gasData/index.vue
index dd84cc0..3bc9b1d 100644
--- a/src/views/monitorData/gasData/index.vue
+++ b/src/views/monitorData/gasData/index.vue
@@ -39,7 +39,7 @@
</el-form>
</div>
<div id="gasChart" style="height: 500px;width: auto"></div>
- <el-table :data="state.tableData.data" style="width: 100%;margin-top: 20px">
+ <el-table :data="state.tableData.data" style="width: 100%;margin-top: 20px" v-loading="loading">
<el-table-column type="index" label="序号" width="80" />
<el-table-column align="center" prop="time" label="采集时间"/>
<el-table-column align="center" prop="windSpeed" label="风速"/>
@@ -67,7 +67,7 @@
</template>
<script setup lang="ts">
-import {reactive, ref,onMounted} from "vue";
+import {reactive, ref, onMounted, shallowRef} from "vue";
import * as echarts from "echarts";
import { ElMessage, ElMessageBox } from 'element-plus'
import {TableGasState} from "/@/types/monitorData";
@@ -112,10 +112,12 @@
}
}
}
+const loading = ref(false);
const dataZoomEnd = ref();
const xData = ref([]);
const yData = ref([]);
const markLines = ref(0);
+const myChart = shallowRef(null)
onMounted(
() => {
getNowTime();
@@ -139,14 +141,20 @@
}
let resChart = await gasDataApi().getGasLineChart(chartParam);
if(resChart.data.code == 100) {
- xData.value = resChart.data.data.map((item: any) => {
- return item.time;
- })
- yData.value = resChart.data.data.map((item: any) => {
- return item.gasValue;
- })
- dataZoomEnd.value = xData.value.length > 25 ? 30 : 100;
- markLines.value = 110;
+ if (resChart.data.data) {
+ xData.value = resChart.data.data.map((item: any) => {
+ return item.time;
+ })
+ yData.value = resChart.data.data.map((item: any) => {
+ return item.gasValue;
+ })
+ dataZoomEnd.value = xData.value.length > 25 ? 30 : 100;
+ }else {
+ xData.value = [];
+ yData.value = [];
+ markLines.value = 0;
+ dataZoomEnd.value = 100;
+ }
initCharts();
}else {
ElMessage({
@@ -155,6 +163,7 @@
});
}
+ loading.value = true;
//表格
const pageParam = {
pageIndex: state.tableData.listQuery.pageIndex,
@@ -171,6 +180,7 @@
state.tableData.total = res.data.total;
state.tableData.listQuery.pageIndex = res.data.pageIndex;
state.tableData.listQuery.pageSize = res.data.pageSize;
+ loading.value = false;
}else {
ElMessage({
type: 'warning',
@@ -183,7 +193,10 @@
let res = await gasManageApi().getGas({});
if(res.data.code == 100) {
state.tableData.gasList = res.data.data;
+ console.log("气体",state.tableData.gasList)
+ //默认选择第一个气体
state.tableData.listQuery.searchParams.gas = state.tableData.gasList[0].id;
+ markLines.value = state.tableData.gasList[0].threshold;
initInfoData();
}else {
ElMessage({
@@ -203,18 +216,27 @@
initInfoData();
};
const search = () => {
+ state.tableData.listQuery.pageIndex = 1;
+ const gasObj = state.tableData.gasList.filter(item => {
+ return item.id == state.tableData.listQuery.searchParams.gas
+ });
+ markLines.value = gasObj[0].threshold;
+
initInfoData();
- console.log("vla",state.tableData.listQuery.searchParams)
}
const reset = () => {
getNowTime();
state.tableData.listQuery.searchParams.gas = state.tableData.gasList[0].id;
+ markLines.value = state.tableData.gasList[0].threshold;
state.tableData.listQuery.pageIndex = 1;
initInfoData();
}
const initCharts = () => {
- const myChart = echarts.init(document.getElementById('gasChart'));
+ if (myChart.value != null && myChart.value != "" && myChart.value != undefined) {
+ myChart.value.dispose();
+ }
+ myChart.value = echarts.init(document.getElementById('gasChart'));
// 指定图表的配置项和数据
const option = {
tooltip: {
@@ -234,6 +256,20 @@
max: Math.max(markLines.value,...yData.value),
min: Math.min(markLines.value,...yData.value)
},
+ graphic: {
+ type: 'text', // 类型：文本
+ left: 'center',
+ top: 'middle',
+ silent: true, // 不响应事件
+ invisible: yData.value.length > 0, // 有数据就隐藏
+ style: {
+ fill: '#9d9d9d',
+ fontWeight: 'bold',
+ text: '暂无数据',
+ fontFamily: 'Microsoft YaHei',
+ fontSize: '25px'
+ }
+ },
series: [
{
data: yData.value,
@@ -245,10 +281,10 @@
position: 'end', // 表现内容展示的位置
color: 'red' // 展示内容颜色
},
- yAxis: markLines.value,
+ yAxis: markLines.value == 0 ? '':markLines.value ,
lineStyle: {
color: "red",
- width: 1, // 0 的时候可以隐藏线
+ width: markLines.value == 0 ? 0: 1, // 0 的时候可以隐藏线
type: "solid" // 实线，不写默认虚线
}
},],//type: 'average', 平均值, min最小值, max 最大值, median中位数
@@ -272,10 +308,10 @@
]
};
// 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option,true);
+ myChart.value.setOption(option,true);
//自适应宽度
- window.addEventListener('resize', function () {
- myChart.resize();
+ window.addEventListener('resize',function () {
+ myChart.value.resize();
})
}
</script>
@@ -298,4 +334,4 @@
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
padding: 3px
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/monitorData/weatherData/index.vue b/src/views/monitorData/weatherData/index.vue
index 4a90727..85cb432 100644
--- a/src/views/monitorData/weatherData/index.vue
+++ b/src/views/monitorData/weatherData/index.vue
@@ -39,7 +39,7 @@
</el-form>
</div>
<div id="gasChart" style="height: 500px;width: auto"></div>
- <el-table :data="state.tableData.data" style="width: 100%;margin-top: 20px">
+ <el-table :data="state.tableData.data" style="width: 100%;margin-top: 20px" v-loading="loading">
<el-table-column type="index" label="序号" width="80" />
<el-table-column align="center" prop="time" label="采集时间"/>
<el-table-column align="center" prop="value" :label='weatherName' />
@@ -64,7 +64,7 @@
</template>
<script setup lang="ts">
-import {reactive, ref,onMounted} from "vue";
+import {reactive, ref, onMounted, shallowRef} from "vue";
import * as echarts from "echarts";
import { ElMessage, ElMessageBox } from 'element-plus'
import {TableWeatherState} from "/@/types/monitorData";
@@ -108,10 +108,12 @@
]
}
});
+const loading = ref(false);
const weatherName = ref('温度');
const dataZoomEnd = ref();
const xData = ref([]);
const yData = ref([]);
+const myChart = shallowRef(null)
const chooseTime = (val: any) => {
console.log("val",val)
@@ -160,13 +162,20 @@
}
let resChart = await weatherDataApi().getWeatherLineChart(chartParam);
if(resChart.data.code == 100) {
- xData.value = resChart.data.data.map((item: any) => {
- return item.time;
- })
- yData.value = resChart.data.data.map((item: any) => {
- return item.value;
- })
- dataZoomEnd.value = xData.value.length > 25 ? 5 : 100;
+ if(resChart.data.data) {
+ xData.value = resChart.data.data.map((item: any) => {
+ return item.time;
+ })
+ yData.value = resChart.data.data.map((item: any) => {
+ return item.value;
+ })
+ dataZoomEnd.value = xData.value.length > 25 ? 5 : 100;
+ }else {
+ xData.value = [];
+ yData.value = [];
+ dataZoomEnd.value = 100;
+ }
+
initCharts();
}else {
ElMessage({
@@ -175,6 +184,7 @@
});
}
+ loading.value = true;
//表格
const pageParam = {
pageIndex: state.tableData.listQuery.pageIndex,
@@ -191,6 +201,7 @@
state.tableData.total = res.data.total;
state.tableData.listQuery.pageIndex = res.data.pageIndex;
state.tableData.listQuery.pageSize = res.data.pageSize;
+ loading.value = false;
}else {
ElMessage({
type: 'warning',
@@ -215,9 +226,8 @@
};
const search = () => {
- console.log("vla",state.tableData.listQuery.searchParams)
- changeWeather(state.tableData.listQuery.searchParams.weatherType);
initInfoData();
+ changeWeather(state.tableData.listQuery.searchParams.weatherType);
}
const reset = () => {
getNowTime();
@@ -228,7 +238,10 @@
}
const initCharts = () => {
- const myChart = echarts.init(document.getElementById('gasChart'));
+ if (myChart.value != null && myChart.value != "" && myChart.value != undefined) {
+ myChart.value.dispose();
+ }
+ myChart.value = echarts.init(document.getElementById('gasChart'));
// 指定图表的配置项和数据
const option = {
tooltip: {
@@ -245,6 +258,20 @@
yAxis: {
show: true,
type: 'value'
+ },
+ graphic: {
+ type: 'text', // 类型：文本
+ left: 'center',
+ top: 'middle',
+ silent: true, // 不响应事件
+ invisible: yData.value.length > 0, // 有数据就隐藏
+ style: {
+ fill: '#9d9d9d',
+ fontWeight: 'bold',
+ text: '暂无数据',
+ fontFamily: 'Microsoft YaHei',
+ fontSize: '25px'
+ }
},
series: [
{
@@ -269,10 +296,10 @@
]
};
// 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option,true);
+ myChart.value.setOption(option,true);
//自适应宽度
window.addEventListener('resize', function () {
- myChart.resize();
+ myChart.value.resize();
})
}
</script>
@@ -295,4 +322,4 @@
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
padding: 3px
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.2