From fc70a46bf84cda4fbe53332f4abd84cf1227fe95 Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期二, 11 十一月 2025 10:14:25 +0800
Subject: [PATCH] 新增气象极值
---
src/views/monitorData/weather/weatherValueCount/index.vue | 361 +++++++++++++++++++++++++++++++++++++++++++++++++++
src/types/monitorData.d.ts | 6
src/views/monitorData/weather/weatherData/index.vue | 0
src/api/monitorData/weatherData/index.ts | 19 ++
4 files changed, 386 insertions(+), 0 deletions(-)
diff --git a/src/api/monitorData/weatherData/index.ts b/src/api/monitorData/weatherData/index.ts
index fd2dbe1..b0ffb6f 100644
--- a/src/api/monitorData/weatherData/index.ts
+++ b/src/api/monitorData/weatherData/index.ts
@@ -21,5 +21,24 @@
});
},
+ //气象历史数据-分页
+ getWeatherHistoryPage: (data: object) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + `/gasMonitorData/gasAtmosphere/stats`,
+ method: 'post',
+ data: data
+ });
+ },
+ //气象极值
+ getWeatherExtremum: (data: object) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + `/gasMonitorData/gasAtmosphere/extremum`,
+ method: 'post',
+ data: data
+ });
+ },
+
+
+
};
}
diff --git a/src/types/monitorData.d.ts b/src/types/monitorData.d.ts
index 7d983d8..824600c 100644
--- a/src/types/monitorData.d.ts
+++ b/src/types/monitorData.d.ts
@@ -97,8 +97,14 @@
searchParams: {
time: Array<any>;
weatherType: string;
+ dateType?: number | string,
+ date?: number | string
}
};
weatherTypeList: Array<any>;
+ dateTypeList?: Array<any>;
+ max?: number,
+ min?: number,
+ avg?:number
}
}
diff --git a/src/views/monitorData/weatherData/index.vue b/src/views/monitorData/weather/weatherData/index.vue
similarity index 100%
rename from src/views/monitorData/weatherData/index.vue
rename to src/views/monitorData/weather/weatherData/index.vue
diff --git a/src/views/monitorData/weather/weatherValueCount/index.vue b/src/views/monitorData/weather/weatherValueCount/index.vue
new file mode 100644
index 0000000..d844137
--- /dev/null
+++ b/src/views/monitorData/weather/weatherValueCount/index.vue
@@ -0,0 +1,361 @@
+<template>
+ <div class="system-gas-container">
+ <el-card shadow="hover">
+<!-- //极值-->
+ <div class="system-menu-search mb15" style="display: flex;align-items: ">
+ <el-form :inline="true" style="display: flex;align-items: flex-start;flex-wrap: wrap" >
+ <el-form-item label="日期类型：" >
+ <el-select
+ v-model="state.tableData.listQuery.searchParams.dateType"
+ class="w100"
+ style="max-width: 180px"
+ size="default"
+ @change="changeDateType"
+ >
+ <el-option v-for="item in state.tableData.dateTypeList" :key="item.label" :label="item.value" :value="item.label"></el-option>
+ </el-select>
+
+ </el-form-item>
+ <el-form-item label="日期：" >
+ <el-date-picker
+ :disabled="!state.tableData.listQuery.searchParams.dateType"
+ v-model="state.tableData.listQuery.searchParams.date"
+ :type="state.tableData.listQuery.searchParams.dateType == 1 ? 'date' :state.tableData.listQuery.searchParams.dateType == 2?'month':state.tableData.listQuery.searchParams.dateType?'year':'date'"
+ :value-format="state.tableData.listQuery.searchParams.dateType == 1 ? 'YYYY-MM-DD' :state.tableData.listQuery.searchParams.dateType == 2?'YYYY-MM':state.tableData.listQuery.searchParams.dateType?'YYYY':'YYYY-MM-DD'"
+ />
+ </el-form-item>
+ <el-form-item label="气象类型：">
+ <el-select
+ v-model="state.tableData.listQuery.searchParams.weatherType"
+ class="w100"
+ style="max-width: 180px"
+ size="default"
+ >
+ <el-option v-for="item in state.tableData.weatherTypeList" :key="item.label" :label="item.value" :value="item.label"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-button size="default" type="primary" class="ml10" @click="searchExtremum()">
+ <el-icon>
+ <ele-Search />
+ </el-icon>
+ 查询极值
+ </el-button>
+ <el-button size="default" class="ml10" @click="resetExtremum()">
+ <el-icon>
+ <RefreshLeft />
+ </el-icon>
+ 重置
+ </el-button>
+ </el-form>
+ </div>
+ <div class="extremum">
+ <div style="display: flex;align-items: center;justify-content:center;margin-top: 35px;">
+ <div class="numStyle">
+ <span>最大值</span>
+ <span>{{state.tableData.max}}</span>
+ </div>
+ <div class="numStyle">
+ <span>最小值</span>
+ <span>{{state.tableData.min}}</span>
+ </div>
+ <div class="numStyle">
+ <span>平均值</span>
+ <span>{{state.tableData.avg}}</span>
+ </div>
+ </div>
+ </div>
+<!-- //历史-->
+ <div class="system-menu-search mb15">
+ <el-form :inline="true" style="display: flex;align-items: flex-start;flex-wrap: wrap" >
+ <el-form-item label="日期：" >
+ <el-date-picker
+ v-model="state.tableData.listQuery.searchParams.time"
+ type="datetimerange"
+ format="YYYY-MM-DD HH:mm:ss"
+ range-separator="~"
+ start-placeholder="开始时间"
+ end-placeholder="结束时间"
+
+ />
+ <!-- @change = "chooseTime"-->
+ </el-form-item>
+
+ <el-button size="default" type="primary" class="ml10" @click="search()">
+ <el-icon>
+ <ele-Search />
+ </el-icon>
+ 查询历史
+ </el-button>
+ <el-button size="default" class="ml10" @click="reset()">
+ <el-icon>
+ <RefreshLeft />
+ </el-icon>
+ 重置
+ </el-button>
+ </el-form>
+ </div>
+ <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' />
+ <el-table-column align="center" prop="max" label="最大值"/>
+ <el-table-column align="center" prop="min" label="最小值"/>
+ <el-table-column align="center" prop="avg" label="平均值"/>
+ </el-table>
+ <br />
+ <el-pagination
+ @size-change="onHandleSizeChange"
+ @current-change="onHandleCurrentChange"
+ class="page-position"
+ :pager-count="5"
+ :page-sizes="[10, 20, 30]"
+ v-model:current-page="state.tableData.listQuery.pageIndex"
+ background
+ v-model:page-size="state.tableData.listQuery.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="state.tableData.total">
+ </el-pagination>
+ <br />
+ <br />
+ </el-card>
+ </div>
+</template>
+
+<script setup lang="ts">
+import {reactive, ref, onMounted, shallowRef} from "vue";
+import * as echarts from "echarts";
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {TableWeatherState} from "/@/types/monitorData";
+import moment from "moment/moment";
+import {weatherDataApi } from "/@/api/monitorData/weatherData";
+
+const state = reactive<TableWeatherState>({
+ tableData: {
+ data: [],
+ total: 0,
+ loading: false,
+ listQuery: {
+ pageIndex: 1,
+ pageSize: 10,
+ searchParams:{
+ time: [],
+ weatherType: 'temp',
+ dateType: '',
+ date:''
+ }
+ },
+ dateTypeList:[
+ {
+ label: 3,
+ value: '年'
+ },
+ {
+ label: 2,
+ value: '月'
+ },
+ {
+ label: 1,
+ value: '日'
+ },
+
+ ],
+ weatherTypeList: [
+ {
+ label: 'temp',
+ value: '温度'
+ },
+ {
+ label: 'humidity',
+ value: '湿度'
+ },
+ {
+ label: 'windDirection',
+ value: '风向'
+ },
+ {
+ label: 'windSpeed',
+ value: '风速'
+ },
+ {
+ label: 'pressure',
+ value: '压力'
+ }
+ ],
+ max: 0,
+ min: 0,
+ avg:0
+ }
+});
+const loading = ref(false);
+const picLoading = ref(false);
+const weatherName = ref('温度');
+const dataZoomEnd = ref();
+const xData = ref([]);
+const yData = ref([]);
+const myChart = shallowRef(null)
+const weatherChart = ref("eChartweatherN" + Date .now() + Math .random())
+
+const chooseTime = (val: any) => {
+ console.log("val",val)
+ 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) {
+ return false;
+ } else {
+ if (datadiff > time) {
+ ElMessage({
+ type: 'error',
+ message: '查询时间范围7天内',
+ })
+ getNowTime();
+ return false;
+ } else {
+ console.log('七天内数据')
+ }
+ }
+}
+
+onMounted(
+ () => {
+ getNowTime();
+ initInfoData();
+ }
+);
+const getNowTime = () => {
+ let isDate = new Date()
+ 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} ` + moment().format('HH:mm:ss')
+ state.tableData.listQuery.searchParams.time = [sTime ,eTime];
+}
+const initInfoData = async () => {
+ loading.value = true
+ //表格
+ const pageParam = {
+ pageIndex: state.tableData.listQuery.pageIndex,
+ pageSize: state.tableData.listQuery.pageSize,
+ searchParams: {
+ 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'),
+ type: state.tableData.listQuery.searchParams.weatherType
+ }
+ }
+ let res = await weatherDataApi().getWeatherHistoryPage(pageParam);
+ if(res.data.code == 100) {
+ state.tableData.data = res.data.data;
+ state.tableData.total = res.data.total == null ? 0 :res.data.total;
+ state.tableData.listQuery.pageIndex = res.data.pageIndex;
+ state.tableData.listQuery.pageSize = res.data.pageSize;
+ loading.value = false;
+ }else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+};
+
+const changeWeather = (val: any) => {
+ console.log("vall",val)
+ let chooseObj = state.tableData.weatherTypeList.find(item => item.label === val);
+ weatherName.value = chooseObj.value;
+}
+const onHandleSizeChange = (val: number) => {
+ state.tableData.listQuery.pageSize = val;
+ initInfoData();
+};
+// 分页改变
+const onHandleCurrentChange = (val: number) => {
+ state.tableData.listQuery.pageIndex = val;
+ initInfoData();
+};
+
+const search = () => {
+ initInfoData();
+ changeWeather(state.tableData.listQuery.searchParams.weatherType);
+}
+const reset = () => {
+ getNowTime();
+ state.tableData.listQuery.searchParams.weatherType = state.tableData.weatherTypeList[0].label;
+ weatherName.value = "温度";
+ state.tableData.listQuery.pageIndex = 1;
+ initInfoData();
+}
+
+const changeDateType = () => {
+ state.tableData.listQuery.searchParams.date = ''
+}
+const resetExtremum = () => {
+ state.tableData.max = 0
+ state.tableData.min = 0
+ state.tableData.avg = 0
+ state.tableData.listQuery.searchParams.dateType = ''
+ state.tableData.listQuery.searchParams.date = ''
+}
+const searchExtremum = async () => {
+ const pageParam = {
+ dateType: state.tableData.listQuery.searchParams.dateType,
+ date: state.tableData.listQuery.searchParams.date,
+ type: state.tableData.listQuery.searchParams.weatherType
+ }
+ let res = await weatherDataApi().getWeatherExtremum(pageParam);
+ if(res.data.code == 100) {
+ if(!res.data.data.max || !res.data.data.min || !res.data.data.avg){
+ ElMessage({
+ type: 'warning',
+ message: '暂无数据'
+ });
+ state.tableData.max = 0
+ state.tableData.min = 0
+ state.tableData.avg = 0
+ return
+ }
+ state.tableData.max = res.data.data.max ?res.data.data.max:0
+ state.tableData.min = res.data.data.min ?res.data.data.min:0
+ state.tableData.avg = res.data.data.avg ? res.data.data.avg:0
+ }else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+}
+</script>
+<style scoped lang="scss">
+.yellow{
+ width: 80px;
+ height: 30px;
+ background-color: rgb(255,223,37);
+ line-height: 30px;
+ color: white;
+ box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
+ padding: 3px
+}
+.red{
+ width: 80px;
+ height: 30px;
+ background-color: rgb(239,90,161);
+ line-height: 30px;
+ color: white;
+ box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
+ padding: 3px
+}
+.extremum{
+ margin-bottom: 40px;
+ border: rgba(211,209,209,0.5) 1px solid;
+ height: 180px;
+ box-shadow: 4px 2px 6px rgba(0, 0, 0, 0.1);
+}
+.numStyle{
+ width: 20%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-size: 30px;
+ font-weight: 600;
+ line-height: 45px;
+}
+</style>
--
Gitblit v1.9.2