代码提交

src/api/swHome/index.ts

@@ -104,7 +104,8 @@ enum API {
   REGRESSION_LINEAR = `${BaseURL.url1}/param_update/linear_regression_scheme_param_update`,
   REGRESSION_LINEARDEL = `${BaseURL.url1}/param_delete/linear_regression_scheme_param_delete`,
   FORECAST_SCHEME_ADD = `${BaseURL.url1}/param_add/liner_forecast_scheme_add`,
-  MONITORING_STATION = `${BaseURL.url}/hydro_biz_api/Monitoring_Station`
+  MONITORING_STATION = `${BaseURL.url}/hydro_biz_api/Monitoring_Station`,
+  HISTORY_RAIN2 = `${BaseURL.url}/hydro_biz_api/history_rain_2`
 
 }
 // 阻止是否携带/api和yt
@@ -1125,4 +1126,15 @@ export const postMonitoringStation = (params) => {
     },
     BaseData
   );
+};
+
+// 新雨情历史查询
+export const gethistoryRain2 = (params) => {
+  return defHttp.post(
+    {
+      url: API.HISTORY_RAIN2,
+      params
+    },
+    BaseData
+  );
 };

src/views/dailyStatistics/rainfalls/index.vue

@@ -163,23 +163,6 @@
     return name;
   }
   async function getDataData() {
-    // await getRiverTree().then((res) => {
-    //   let arr = [];
-    //   for (const key in res.data.data_value.station) {
-    //     if (Object.prototype.hasOwnProperty.call(res.data.data_value.station, key)) {
-    //       const element = res.data.data_value.station[key];
-    //       element.forEach((element) => {
-    //         arr.push({
-    //           label: element.st_name,
-    //           value: element.stcd,
-    //         });
-    //       });
-    //     }
-    //   }
-    //   dataCenter.st_options = arr;
-    //   dataCenter.formData.station = [dataCenter.st_options[0].value];
-    //   queryData();
-    // });
     await postMonitoringStation({sensor_type:'H_rain'}).then((res) => {
       let arr = [];
       res.data.forEach(element => {

src/views/historyData/rain/index.vue

@@ -98,7 +98,7 @@ let dataCenter = reactive({
       label: '时段类型:',
       component: 'RadioGroup',
       colProps: { span: 7 },
-      defaultValue: 'H',
+      defaultValue: 'D',
       componentProps: {
         options: [
           { label: '实时', value: 'R' },
@@ -316,7 +316,7 @@ function setTitle(data) {
         title: elements,
         dataIndex: elements,
         key: elements,
-        width: elements.length*20,
+        width: elements.length*24,
         ellipsis: 'auto',
         customRender: ({ record, column, index, text }) => {
           // customRender的返回值要遵循vue-jsx语法,要加()和换行

src/views/historyData/rain/index2.vue

@@ -0,0 +1,445 @@
+<template>
+  <div>
+    <BasicTable :clickToRowSelect="false" @register="registerTable">
+      <!-- <template #toolbar>
+        <Authority>
+          <a-button type="primary"
+            @click="exportData(dataCenter.columns, dataCenter.exportdataSource, '标准气象站.xlsx')">导出</a-button>
+        </Authority>
+      </template> -->
+    </BasicTable>
+  </div>
+</template>
+<script lang="tsx" setup>
+import { defineComponent, ref, watch, onMounted, reactive } from 'vue';
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { ImpExcel, ExcelData, jsonToSheetXlsx } from '/@/components/Excel';
+import moment from 'moment';
+import {
+  getDataHistRainStatios,
+  gethistoryRain2
+} from '/@/api/swHome/index';
+import { getNowTime } from '/@/utils/fnUtils.ts';
+let dataCenter = reactive({
+  oneTitle: '',
+  showSchemasType: 'H',
+  nameArr: [],
+  modalTime: '',
+  Modal1Sendid: '',
+  showModal: false,
+  showModal1: false,
+  basicModalTitle: '降雨量',
+  cahrtsList: [],
+  timeData: {
+    time: [],
+  },
+  columns: [],
+  cahrtsData: [],
+  searchFormSchema: [
+    {
+      field: 'senid',
+      label: '监测站点:',
+      component: 'Select',
+      colProps: { span: 5 },
+      componentProps: {
+        options: [],
+        mode: 'multiple',
+        maxTagCount: 1
+      },
+    },
+    {
+      field: 'step_size',
+      label: '时段类型:',
+      component: 'RadioGroup',
+      colProps: { span: 7 },
+      defaultValue: 'H',
+      componentProps: {
+        options: [
+          { label: '实时', value: 'R' },
+          { label: '小时', value: 'H' },
+          { label: '日', value: 'D' },
+          { label: '月', value: 'M' },
+          { label: '年', value: 'Y' },
+        ],
+        // onChange: handleCustomerChange,
+      },
+    },
+    {
+      field: 'queryTime',
+      label: '查询时间:',
+      colProps: { span: 6 },
+      component: 'RangePicker',
+      componentProps: {
+        showTime: {
+          format: 'YYYY-MM-DD HH:mm:ss',
+        },
+      },
+      ifShow: () => {
+        return dataCenter.showSchemasType == 'H';
+      },
+    },
+    {
+      field: 'dayQueryTime',
+      label: '查询时间:',
+      colProps: { span: 6 },
+      component: 'RangePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        valueFormat: 'YYYY-MM-DD',
+      },
+      ifShow: () => {
+        return dataCenter.showSchemasType == 'D';
+      },
+    },
+    {
+      field: 'monthQueryTime',
+      label: '查询时间:',
+      colProps: { span: 6 },
+      component: 'RangePicker',
+      componentProps: {
+        format: 'YYYY-MM',
+        valueFormat: 'YYYY-MM',
+        mode: ['month', 'month'],
+        onPanelChange: monthPanelChange,
+        // open: monthPickShow.value,
+      },
+      ifShow: () => {
+        return dataCenter.showSchemasType == 'M';
+      },
+    },
+    {
+      field: 'yearQueryTime',
+      label: '查询时间:',
+      colProps: { span: 6 },
+      component: 'RangePicker',
+      componentProps: {
+        format: 'YYYY',
+        valueFormat: 'YYYY',
+        mode: ['year', 'year'],
+        onPanelChange: yearPanelChange,
+      },
+      ifShow: () => {
+        return dataCenter.showSchemasType == 'Y';
+      },
+    },
+  ],
+});
+const [registerTable, { reload, getRawDataSource, getForm, setLoading, setColumns, setTableData }] =
+  useTable({
+    title: '雨情历史查询',
+    // api: gethistoryRain2,
+    columns: dataCenter.columns,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    pagination: false,
+    loading: false,
+    immediate: false,
+    formConfig: {
+      labelWidth: 120,
+      schemas: dataCenter.searchFormSchema,
+      fieldMapToTime: [['queryTime', ['start_time', 'end_time'], 'YYYY-MM-DD HH:mm:ss']],
+      actionColOptions: {
+        span: 5,
+      },
+    },
+    beforeFetch: (params: any) => {
+      let senid;
+      if (params.senid) {
+        senid = params.senid;
+      } else {
+        senid = [];
+      }
+      let start_time = params.start_time;
+      let end_time = params.end_time;
+      //判断查询模式
+      if (dataCenter.showSchemasType == 'D') {
+        start_time = params.dayQueryTime[0];
+        end_time = params.dayQueryTime[1];
+      }
+      if (dataCenter.showSchemasType == 'M') {
+        start_time = moment(params.monthQueryTime[0]).format('YYYY-MM');
+        end_time = moment(params.monthQueryTime[1]).format('YYYY-MM');
+      }
+      if (dataCenter.showSchemasType == 'Y') {
+        start_time = moment(params.yearQueryTime[0]).format('YYYY');
+        end_time = moment(params.yearQueryTime[1]).format('YYYY');
+      }
+      return {
+        senid: senid,
+        step_size: params.step_size,
+        start_time: start_time,
+        end_time: end_time,
+      };
+    },
+    handleSearchInfoFn: (params) => {
+      getList(params)
+    },
+    afterFetch: (data) => {
+      processingData(data);
+    },
+    sortFn: (info) => {
+      if (info.order == 'descend') {
+        dataArr.sort((a, b) => {
+          if (a[info.field] < b[info.field]) return 1;
+          if (a[info.field] > b[info.field]) return -1;
+          return 0;
+        });
+      }
+      if (info.order == 'ascend') {
+        dataArr.sort((a, b) => {
+          if (a[info.field] < b[info.field]) return -1;
+          if (a[info.field] > b[info.field]) return 1;
+          return 0;
+        });
+      }
+      setTableData(dataArr);
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    rowKey: 'id',
+    fetchSetting: {
+      listField: 'data',
+    },
+  });
+// 月份选择
+function monthPanelChange(value) {
+  getForm().setFieldsValue({
+    monthQueryTime: [moment(value[0]).format('YYYY-MM'), moment(value[1]).format('YYYY-MM')],
+  });
+}
+// 年份选择
+function yearPanelChange(value) {
+  getForm().setFieldsValue({
+    yearQueryTime: [moment(value[0]).format('YYYY'), moment(value[1]).format('YYYY')],
+  });
+}
+let dataArr = []
+const processingData = (pageData) => {
+  // 处理头部数据
+  let columns = [
+    {
+      title: '站名',
+      dataIndex: 'name',
+      key: 'name',
+      width: 100,
+      align: 'center',
+    },
+  ];
+  let dataSource = [];
+  pageData.time.forEach((element) => {
+    let obj1 = {
+      title: element,
+      dataIndex: element,
+      key: element,
+      width: 160,
+      align: 'center',
+      sorter: true
+    }
+    if (element == '最小值') {
+      obj1.customCell = (record) => {
+        if (record) {
+          return {
+            style: {
+              background: 'rgba(15, 177, 94, 0.06)',
+            },
+          };
+        }
+      };
+      obj1.width = 100
+    }
+    if (element == '最大值') {
+      obj1.customCell = (record) => {
+        if (record) {
+          return {
+            style: {
+              background: 'rgba(255, 52, 52, 0.06)',
+            },
+          };
+        }
+      };
+      obj1.width = 100
+    }
+    if (element == '累积降雨量') {
+      obj1.customCell = (record) => {
+        if (record) {
+          return {
+            style: {
+              background: 'rgba(45, 116, 231, 0.06)',
+            },
+          };
+        }
+      };
+      obj1.width = 120
+    }
+    columns.push(obj1);
+  });
+  pageData.name.forEach((element) => {
+    dataSource.push({
+      name: element,
+    });
+  });
+  dataSource.forEach((element) => {
+    for (const key in pageData.value) {
+      if (Object.prototype.hasOwnProperty.call(pageData.value, key)) {
+        const item = pageData.value[key];
+        element[key] = item[element.name];
+      }
+    }
+  });
+  setTimeout(() => {
+    setColumns(columns);
+    dataArr = dataSource
+    setTableData(dataSource);
+  }, 100);
+}
+// 获取查询树状数据
+const getRiveTreeData = async () => {
+  await getDataHistRainStatios().then((res) => {
+    res.data.forEach((element) => {
+      element.label = element.sensor_name;
+      element.value = element.senid;
+    });
+    dataCenter.searchFormSchema[0].componentProps.options = res.data;
+  });
+}
+const getList = (form) => {
+  setLoading(true)
+  gethistoryRain2(form).then(res => {
+    processingData(res.data);
+    setLoading(false)
+  })
+}
+onMounted(async () => {
+  await getRiveTreeData();
+  // 设置默认前10个站点为查询字段
+  let senidList = dataCenter.searchFormSchema[0].componentProps.options
+  let senidArr = []
+  senidList.forEach((element, index) => {
+    if (index <= 9) {
+      senidArr.push(element.senid)
+    }
+  });
+  getForm().setFieldsValue({
+    queryTime: [getNowTime(2), getNowTime(1)],
+    senid: senidArr
+  });
+  setTimeout(() => {
+    getList(getForm().getFieldsValue())
+  }, 0);
+});
+</script>
+<style scoped lang="less">
+.form-box {
+  position: absolute;
+  z-index: 9;
+  width: 66.6666%;
+
+  .custom-input {
+    width: calc(100% - 100px);
+  }
+}
+
+.span-label {
+  width: 90px;
+  padding-right: 10px;
+  display: inline-block;
+  text-align: right;
+  line-height: 32px;
+}
+
+.marg-left {
+  margin-left: 10px;
+}
+
+.ant-table-striped-modal {
+  margin-top: 20px;
+}
+
+.box-basic {
+  height: calc(100% - 46px);
+  width: calc(100% - 28px);
+  position: absolute;
+  // min-height: 600px;
+}
+
+.moddal-box {
+  display: flex;
+  height: calc(100% - 32px);
+
+  .left-box {
+    width: 140px;
+    overflow: hidden;
+    height: 100%;
+    background-color: #f4f4f4;
+
+    ul {
+      padding: 10px;
+
+      li {
+        line-height: 40px;
+        padding-left: 10px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .center-box {
+    flex: 1;
+    overflow: hidden;
+    height: 100%;
+    margin-left: 20px;
+  }
+
+  .right-box {
+    width: 400px;
+    height: 100%;
+    overflow: auto;
+    margin-left: 20px;
+    position: relative;
+
+    ul {
+
+      // position: relative;
+      li {
+        display: flex;
+        line-height: 36px;
+
+        &>div {
+          // flex: 1;
+          text-align: center;
+        }
+
+        &>div:nth-child(1) {
+          min-width: 180px;
+        }
+
+        &>div:nth-child(2) {
+          flex: 1;
+        }
+
+        &>div:nth-child(3) {
+          flex: 1;
+        }
+      }
+
+      li:nth-child(1) {
+        position: absolute;
+        width: 100%;
+      }
+
+      li:nth-child(2) {
+        padding-top: 36px;
+      }
+    }
+  }
+}
+
+.top-search {
+  padding-bottom: 10px;
+}
+
+.active-tab {
+  background-color: #ccc;
+}
+</style>

src/views/realTime/rain/index.vue

@@ -18,7 +18,8 @@
       </template>
       <template #toolbar>
         <Authority>
-          <a-button type="primary" @click="exportData(dataCenter.exportColumns,dataCenter.exportdataSource,'雨情查询.xlsx')">导出</a-button>
+          <a-button type="primary"
+            @click="exportData(dataCenter.exportColumns, dataCenter.exportdataSource, '雨情查询.xlsx')">导出</a-button>
         </Authority>
       </template>
     </BasicTable>
@@ -30,7 +31,8 @@
           <a-range-picker :value="timeData.time" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
             :placeholder="['开始时间', '结束时间']" @change="onChange" :allowClear="true" />
           <a-button @click="getHistoryRain" class="marg-left" type="primary">查询</a-button>
-          <a-button class="right-position" type="primary" @click="exportData(tableDataModal.table_head,tableDataModal.table_value,basicModalTitle+'.xlsx')">导出</a-button>
+          <a-button class="right-position" type="primary"
+            @click="exportData(tableDataModal.table_head, tableDataModal.table_value, basicModalTitle + '.xlsx')">导出</a-button>
         </div>
         <a-table class="ant-table-striped ant-table-striped-modal" :dataSource="tableDataModal.table_value"
           :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)" bordered size="middle"
@@ -45,10 +47,11 @@ import { defineComponent, ref, watch, onMounted, reactive } from 'vue';
 import { BasicTable, useTable } from '/@/components/Table';
 import { BasicModal } from '/@/components/Modal/index';
 import { getRealRain, getRiverTree, historyRain } from '/@/api/swHome/index';
-import { getNowTime,exportData } from '/@/utils/fnUtils.ts';
+import { getNowTime, exportData } from '/@/utils/fnUtils.ts';
 import { Authority } from '../../../components/Authority/index';
 let columns = [];
 let searchFormSchema = [];
+let dataArr = []
 const [registerTable, { reload, setColumns, setTableData }] = useTable({
   // 表格头部
   title: '雨情查询',
@@ -60,6 +63,26 @@ const [registerTable, { reload, setColumns, setTableData }] = useTable({
   beforeFetch: (T) => {
     console.log(T);
   },
+  sortFn: (info) => {
+    console.log(info)
+    console.log(dataArr)
+    if (info.order == 'descend') {
+      
+      dataArr.sort((a, b) => {
+        if (a[info.field] < b[info.field]) return 1;
+        if (a[info.field] > b[info.field]) return -1;
+        return 0;
+      });
+    }
+    if (info.order == 'ascend') {
+      dataArr.sort((a, b) => {
+        if (a[info.field] < b[info.field]) return -1;
+        if (a[info.field] > b[info.field]) return 1;
+        return 0;
+      });
+    }
+    setTableData(dataArr);
+  },
   // 搜索表格
   formConfig: {
     labelWidth: 120,
@@ -207,16 +230,24 @@ function processingData(table_head) {
       element.key = key;
       element.dataIndex = key;
       element.ellipsis = true;
+
       if (element.title == '时间') {
         element.width = 200;
       }
+      if (element.title != '时间'
+        && element.title != '流域分区'
+        && element.title != '测站'
+        && element.title != '传感器ID') {
+        element.width = 200;
+        element.sorter = true
+      }
     }
   });
   return table_head;
 }
 let dataCenter = reactive({
-  exportdataSource:[],
-  exportColumns:[]
+  exportdataSource: [],
+  exportColumns: []
 })
 // 获取请求头
 async function getRealRainData() {
@@ -226,6 +257,7 @@ async function getRealRainData() {
     dataCenter.exportColumns = columns = processingData(table_head);
     setColumns(columns);
     setTableData(table_value);
+    dataArr = table_value
     optionArr.value = measuringStation(table_value);
   });
 }
@@ -273,9 +305,11 @@ onMounted(async () => {
 .vben-basic-table-form-container {
   padding: 0px;
 }
-.top-search{
+
+.top-search {
   position: relative;
-  .right-position{
+
+  .right-position {
     position: absolute;
     right: 0px;
     top: 0px;