feat: 水位时间报表

ruoyi-ui/src/api/analysis/achievement.js

@@ -7,3 +7,11 @@ export function listAchievements(query) {
     data: query
   })
 }
+
+export function listWaterLevel(query) {
+  return request({
+    url: '/achievement/getWaterLevelList',
+    method: 'post',
+    data: query
+  })
+}

ruoyi-ui/src/utils/ruoyi.js

@@ -59,10 +59,10 @@ export function addDateRange(params, dateRange, propName) {
   search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
   dateRange = Array.isArray(dateRange) ? dateRange : [];
   if (typeof (propName) === 'undefined') {
-    search.params['beginTime'] = dateRange[0];
+    search.params['startTime'] = dateRange[0];
     search.params['endTime'] = dateRange[1];
   } else {
-    search.params['begin' + propName] = dateRange[0];
+    search.params['start' + propName] = dateRange[0];
     search.params['end' + propName] = dateRange[1];
   }
   return search;

ruoyi-ui/src/views/analysis/water-flow/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>1</div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style scoped>
+
+</style>

ruoyi-ui/src/views/analysis/water-time/chart.vue

@@ -0,0 +1,163 @@
+<template>
+  <div ref="chart" class="chart" :style="{height: '400px', width: '100%'}" />
+</template>
+
+<script>
+import { listWaterLevel } from '@/api/analysis/achievement'
+import * as echarts from "echarts";
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/utils/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    queryParams: Object,
+  },
+  data() {
+    return {
+      pagination: {
+        page: 1,
+        size: 10000,
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.chart = echarts.init(this.$refs.chart, 'macarons');
+      this.setOptions();
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    setOptions() {
+      const { queryParams } = this;
+      if (!queryParams.siteId) return;
+      const params = {
+        ...this.queryParams,
+        ...this.pagination,
+      };
+      listWaterLevel(params).then((res) => {
+        const chartData = res.data.records || [];
+        chartData.reverse()
+        const xAxisData = chartData.map(({ time }) => time);
+        const seriesData = chartData.map(({ avgWaterlevel }) => avgWaterlevel);
+        this.chart.setOption({
+          xAxis: {
+            name: '时间',
+            boundaryGap: false,
+            data: xAxisData,
+            type: 'category',
+            axisLine: {
+              lineStyle: {
+                color: '#FF8500'
+              }
+            },
+            axisTick: {
+              lineStyle: {
+                color: '#8D99A4'
+              }
+            },
+            axisLabel: {
+              color: '#54606C'
+            },
+            nameTextStyle: {
+              color: '#54606C'
+            }
+          },
+          yAxis: [
+            {
+              name: '水位（m）',
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#FF8500'
+                }
+              },
+              axisTick: {
+                show: true,
+                lineStyle: {
+                  color: '#8D99A4'
+                }
+              },
+              axisLabel: {
+                color: '#54606C'
+              },
+              nameTextStyle: {
+                color: '#54606C'
+              },
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            {
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#FF8500'
+                }
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                show: false,
+              },
+            },
+          ],
+          grid: {
+            left: 50,
+            right: 50,
+            bottom: 40,
+            top: 40,
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross'
+            },
+            padding: [5, 10]
+          },
+          series: [{
+            name: '水位',
+            itemStyle: {
+              normal: {
+                color: '#FF8500',
+                lineStyle: {
+                  color: '#FF8500',
+                  width: 2
+                }
+              }
+            },
+            areaStyle: {
+              color: '#FF8500',
+              opacity: 0.5
+            },
+            smooth: false,
+            type: 'line',
+            data: seriesData,
+            animations: false,
+          }]
+        })
+      })
+    }
+  },
+  watch: {
+    queryParams: {
+      handler() {
+        this.setOptions();
+      },
+      deep: true,
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

ruoyi-ui/src/views/analysis/water-time/index.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="hum-page-container">
+    <div class="hum-page-title">水位时间</div>
+    <div class="hum-page-section hum-page-section-search">
+      <div class="hum-page-search">
+        <el-form :model="queryParams" size="large" ref="queryForm" label-position="top">
+          <el-row :gutter="30">
+            <el-col :span="6">
+              <el-form-item label="选择站点">
+                <el-select v-model="queryParams.siteId" placeholder="请选择站点">
+                  <el-option
+                    v-for="item in siteList"
+                    :key="item.siteId"
+                    :label="item.siteName"
+                    :value="item.siteId">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="选择类型">
+                <el-select :value="queryParams.type" placeholder="请选择类型" @change="typeChangeHandler">
+                  <el-option
+                    v-for="item in typeOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="设站日期">
+                <el-date-picker
+                  v-model="dateRange"
+                  @change="dateRangeChangeHandler"
+                  value-format="yyyy-MM-dd hh:mm:ss"
+                  type="datetimerange"
+                  range-separator="-"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item class="hum-page-search-action">
+                <el-button type="primary" @click="handleQuery">查询</el-button>
+                <el-button @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+    <div class="hum-page-title" style="margin-top: 30px">
+      <span>数据图</span>
+      <div class="data-actions">
+        <el-radio-group v-model="mode" size="mini" class="data-actions-radio">
+          <el-radio-button label="chart">图标</el-radio-button>
+          <el-radio-button label="table">表格</el-radio-button>
+        </el-radio-group>
+        <el-button type="primary" size="mini">导出</el-button>
+      </div>
+    </div>
+    <div class="hum-page-section">
+      <Chart v-if="mode === 'chart'" :queryParams="queryParams" />
+      <Table v-if="mode === 'table'" :queryParams="queryParams" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { listSite } from "@/api/site/site";
+import { parseTime } from '@/utils/ruoyi'
+import Chart from './chart'
+import Table from './table'
+
+const initDateRangeByType = (type) => {
+  const start = new Date();
+  const end = new Date();
+  switch (type) {
+    case 1:
+      start.setHours(start.getHours() - 3);
+      return [parseTime(start), parseTime(end)];
+    case 2:
+      start.setHours(start.getHours() - 6);
+      return [parseTime(start), parseTime(end)];
+    case 3:
+      start.setHours(start.getHours() - 12);
+      return [parseTime(start), parseTime(end)];
+    case 4:
+      start.setHours(start.getHours() - 24);
+      return [parseTime(start), parseTime(end)];
+    case 5:
+      start.setMonth(start.getMonth() - 1);
+      return [parseTime(start), parseTime(end)];
+    case 6:
+      start.setMonth(start.getMonth() - 3);
+      return [parseTime(start), parseTime(end)];
+    case 7:
+      start.setFullYear(start.getFullYear() - 1);
+      return [parseTime(start), parseTime(end)];
+  }
+}
+
+export default {
+  components: {
+    Chart,
+    Table,
+  },
+  data() {
+    const dateRange = initDateRangeByType(1);
+    return {
+      siteList: [],
+      dateRange: dateRange,
+      queryParams: {
+        siteId: 0,
+        type: 1,
+        startTime: dateRange[0],
+        endTime: dateRange[1],
+      },
+      mode: 'chart',
+      loading: true,
+      typeOptions: [
+        { value: 1, label: '5分钟' },
+        { value: 2, label: '10分钟' },
+        { value: 3, label: '30分钟' },
+        { value: 4, label: '小时' },
+        { value: 5, label: '天' },
+        { value: 6, label: '周' },
+        { value: 7, label: '月' },
+      ]
+    }
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    handleQuery() {
+      this.getList()
+    },
+    resetQuery() {},
+    init() {
+      this.loading = true;
+      listSite({ page: 1, size: 1000 }).then(response => {
+          this.siteList = response.data.records || [];
+          if (this.siteList.length > 0) {
+            this.queryParams.siteId = this.siteList[0].siteId;
+          }
+        }
+      ).finally(() => {
+        this.loading = false;
+      });
+    },
+    dateRangeChangeHandler(dateRange) {
+      this.queryParams.startTime = dateRange[0];
+      this.queryParams.endTime = dateRange[1];
+    },
+    typeChangeHandler(type) {
+      const dateRange = initDateRangeByType(type);
+      this.dateRange = dateRange;
+      this.queryParams.type = type;
+      this.queryParams.startTime = dateRange[0];
+      this.queryParams.endTime = dateRange[1];
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hum-page-section-search {
+  padding-bottom: 0;
+}
+.hum-page-search {
+  border-bottom: 0;
+}
+.data-actions {
+  display: flex;
+  align-items: center;
+}
+.data-actions-radio {
+  margin-right: 20px;
+}
+.data-actions-radio /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+  color: #06A3B5;
+  background: #FFFFFF;
+  border: 1px solid #DCDFE6;
+  box-shadow: none;
+}
+</style>

ruoyi-ui/src/views/analysis/water-time/table.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <el-table v-loading="loading" :data="list" border>
+      <el-table-column label="时间" prop="time" />
+      <el-table-column label="水位" prop="avgWaterlevel" />
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="pagination.page"
+      :limit.sync="pagination.size"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listWaterLevel } from '@/api/analysis/achievement'
+
+export default {
+  props: {
+    queryParams: Object,
+  },
+  data() {
+    return {
+      total: 0,
+      list: [],
+      loading: false,
+      pagination: {
+        page: 1,
+        size: 10,
+      },
+    }
+  },
+  mounted() {
+    this.getList();
+  },
+  watch: {
+    queryParams: {
+      handler() {
+        this.getList();
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    getList() {
+      const { queryParams } = this;
+      if (!queryParams.siteId) return;
+      const params = {
+        ...this.queryParams,
+        ...this.pagination,
+      };
+      this.loading = true;
+      listWaterLevel(params).then(response => {
+          this.list = response.data.records;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

ruoyi-ui/src/views/site/plain-water/index.vue

@@ -117,7 +117,6 @@ export default {
         const { wlevelmax, wlevelmin } = res.data || {};
         this.plain.wlevelmax = wlevelmax;
         this.plain.wlevelmin = wlevelmin;
-        console.log(res);
       })
     },
     loadSection() {