From 328febf368f1494b4b5b647f3eab5f4ad38eb072 Mon Sep 17 00:00:00 2001
From: zhouwenxuan <1175765986@qq.com>
Date: 星期四, 12 十月 2023 16:54:27 +0800
Subject: [PATCH] 日报接口、图表优化
---
src/views/monitorData/daily/index.vue | 112 ++++++++++++++-------
src/api/monitorData/daily/index.ts | 15 +++
src/views/monitorData/gasData/index.vue | 50 +++++++--
src/views/monitorData/fluxData/index.vue | 36 ++++++-
src/views/monitorData/weatherData/index.vue | 40 ++++++-
5 files changed, 188 insertions(+), 65 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/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 c420e6e..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="区域名称"/>
@@ -106,6 +106,7 @@
},
});
+const loading = ref(false);
const myChart = shallowRef(null)
const chooseTime = (val:any) => {
@@ -165,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 ? 5 : 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({
@@ -178,6 +186,7 @@
});
}
+ loading.value = true;
//表格
const pageParam = {
pageIndex: state.tableData.listQuery.pageIndex,
@@ -195,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',
@@ -335,6 +345,20 @@
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: [
{
type: 'category',
diff --git a/src/views/monitorData/gasData/index.vue b/src/views/monitorData/gasData/index.vue
index 552db39..043df7a 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="风速"/>
@@ -112,6 +112,7 @@
}
}
}
+const loading = ref(false);
const dataZoomEnd = ref();
const xData = ref([]);
const yData = ref([]);
@@ -140,14 +141,22 @@
}
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;
+ markLines.value = 110;
+
+ }else {
+ xData.value = [];
+ yData.value = [];
+ markLines.value = 0;
+ dataZoomEnd.value = 100;
+ }
initCharts();
}else {
ElMessage({
@@ -156,6 +165,7 @@
});
}
+ loading.value = true;
//表格
const pageParam = {
pageIndex: state.tableData.listQuery.pageIndex,
@@ -172,6 +182,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',
@@ -204,6 +215,7 @@
initInfoData();
};
const search = () => {
+ state.tableData.listQuery.pageIndex = 1;
initInfoData();
console.log("vla",state.tableData.listQuery.searchParams)
}
@@ -238,6 +250,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,
@@ -249,10 +275,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中位数
@@ -278,7 +304,7 @@
// 使用刚指定的配置项和数据显示图表。
myChart.value.setOption(option,true);
//自适应宽度
- window.addEventListener('resize', function () {
+ window.addEventListener('resize',function () {
myChart.value.resize();
})
}
diff --git a/src/views/monitorData/weatherData/index.vue b/src/views/monitorData/weatherData/index.vue
index b76f938..9e92ed5 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' />
@@ -108,6 +108,7 @@
]
}
});
+const loading = ref(false);
const weatherName = ref('温度');
const dataZoomEnd = ref();
const xData = ref([]);
@@ -161,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({
@@ -176,6 +184,7 @@
});
}
+ loading.value = true;
//表格
const pageParam = {
pageIndex: state.tableData.listQuery.pageIndex,
@@ -192,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',
@@ -250,6 +260,20 @@
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: [
{
data: yData.value,
--
Gitblit v1.9.2