新增气象极值

zhouwx

2025-11-11 fc70a46bf84cda4fbe53332f4abd84cf1227fe95

新增气象极值

 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
            });
        },



    };
}

 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
    }
}

 src/views/monitorData/weather/weatherData/index.vue

 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>