feat: 添加监测数据接入界面

src/api/monitorDataPreview/index.js

@@ -0,0 +1,11 @@
+// 监测接入数据
+import request from '@/utils/request'
+
+// 获取监测数据
+export function getMonitorData(data) {
+  return request({
+    url: '/cz/monitor/page',
+    method: 'post',
+    data
+  })
+}

src/views/dike/runManage/waterRainReport/smartAnalyse/index.vue

@@ -1,8 +1,8 @@
 <!-- 水雨情智能分析页面 -->
 <template>
-  <div class="patrol-manage-page">
+  <div class="slider-right patrol-manage-page">
     <TopBackTitle title="水雨情智能分析"></TopBackTitle>
-    <div class="container">
+    <div class="container slider-right-body">
       <div class="title">智能分析</div>
       <div class="tabulation">
         <div class="aside">
@@ -441,6 +441,11 @@ export default {
 
       this.initYearData(row);
     },
+
+    resizeFunc() {
+      this.zoom = 1 / document.body.style.zoom;
+      this.handleRowChange(this.currentDike);
+    },
   },
 
   async mounted() {
@@ -448,18 +453,15 @@ export default {
     await this.getDikeStatisticalList();
     this.$refs.table.setCurrentRow(this.tableData[0]); //隐式触发了handleRowChange
 
-    window.onresize = () => {
-      this.zoom = 1 / document.body.style.zoom;
-      this.handleRowChange(this.currentDike);
-    };
+    window.addEventListener("resize", this.resizeFunc);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.resizeFunc);
   },
 };
 </script>
 <style scoped lang="scss">
 .patrol-manage-page {
-  width: 100%;
-  height: 100%;
-  padding-left: 24px;
   .top-title {
     height: 40px;
     background-color: white;
@@ -471,9 +473,8 @@ export default {
 
   .container {
     width: 100%;
-    height: calc(100% - 40px - 24px);
     margin-top: 24px;
-    padding: 24px;
+    padding: 16px;
     background-color: white;
 
     display: flex;
@@ -492,7 +493,7 @@ export default {
       border-left: 3px solid #31a08e;
     }
     .tabulation {
-      height: calc(100% - 24px);
+      height: calc(100% - 24px - 16px);
       display: flex;
       gap: 16px;
       flex: 1;

src/views/monitorDataPreview/horizontalDisplacement/index.vue

@@ -0,0 +1,97 @@
+<!-- 表面水平位移监测数据 -->
+<template>
+  <div class="rainfall-page slider-right">
+    <TopBackTitle :showBackBtn="false" />
+
+    <div class="slider-right-body" ref="tableBoxRef">
+      <el-table :height="tableHeight" :data="tableData" border>
+        <el-table-column type="index" align="center" label="序号" width="60" />
+        <el-table-column
+          prop="prjStcd"
+          align="center"
+          label="水利工程测站代码"
+        />
+        <el-table-column prop="mpcd" align="center" label="测点编号" />
+        <el-table-column prop="mstm" align="center" label="测量时间" />
+        <el-table-column prop="xhrds" align="center" label="X向水平位移(mm)" />
+        <el-table-column prop="yhrds" align="center" label="Y向水平位移(mm)" />
+        <el-table-column prop="colmt" align="center" label="采集方式" />
+        <el-table-column prop="createTime" align="center" label="入库时间" />
+        <el-table-column prop="collTime" align="center" label="采集时间" />
+        <el-table-column prop="gdwrDasc" align="center" label="数据来源" />
+      </el-table>
+      <el-pagination
+        background
+        class="pagination"
+        style="margin-top: 16px; margin-right: 16px; float: right"
+        :current-page="pageData.pageNum"
+        :page-sizes="pageData.pageSizes"
+        layout="total, prev, pager, next, sizes, jumper"
+        :total="pageData.total"
+        @size-change="(e) => handlePageSizeChange(e)"
+        @current-change="(e) => handleCurrentPageChange(e)"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import dayjs from "dayjs";
+import TopBackTitle from "@/components/TopBackTitle/index.vue";
+import { calcTableHeight } from "@/mixins/calcTableHeight";
+
+import { getMonitorData } from "@/api/monitorDataPreview";
+
+export default {
+  components: {
+    TopBackTitle,
+  },
+  mixins: [calcTableHeight],
+  data() {
+    return {
+      tableData: [], // 检查列表
+      pageData: {
+        pageNum: 1, // 当前页
+        pageSize: 10, // 请求数量
+        pageSizes: [10, 20, 50, 100],
+        total: 0, // 总数量
+      },
+    };
+  },
+  created() {
+    this.getTableData();
+  },
+  methods: {
+    handleCurrentPageChange(page) {
+      this.pageData.pageNum = page;
+      this.getTableData();
+    },
+    handlePageSizeChange(pageSize) {
+      this.pageData.pageSize = pageSize;
+      this.getTableData();
+    },
+
+    // 获取列表数据
+    getTableData() {
+      getMonitorData({
+        startTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+        endTime: dayjs(dayjs().subtract(1, "year")).format(
+          "YYYY-MM-DD HH:mm:ss"
+        ),
+        monitorType: "MS_DSM_SRHRDS",
+        pageSize: this.pageData.pageSize,
+        pageNum: this.pageData.pageNum,
+      }).then((res) => {
+        if (res) {
+          this.tableData = res.records;
+          this.pageData.total = res.total;
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.rainfall-page {
+}
+</style>

src/views/monitorDataPreview/rainfall/index.vue

@@ -0,0 +1,94 @@
+<!-- 降雨量监测 -->
+<template>
+  <div class="rainfall-page slider-right">
+    <TopBackTitle :showBackBtn="false" />
+
+    <div class="slider-right-body" ref="tableBoxRef">
+      <el-table :height="tableHeight" :data="tableData" border>
+        <el-table-column type="index" align="center" label="序号" width="60" />
+        <el-table-column prop="stcd" align="center" label="测站编码" />
+        <el-table-column prop="tm" align="center" label="时间" />
+        <el-table-column prop="intv" align="center" label="时段长(h)" />
+        <el-table-column prop="drp" align="center" label="时段降水量(mm)" />
+        <el-table-column prop="pdr" align="center" label="降水历时" />
+        <el-table-column prop="dyp" align="center" label="日降水量(mm)" />
+        <el-table-column prop="wth" align="center" label="天气状况" />
+        <el-table-column prop="colmt" align="center" label="采集方式" />
+        <el-table-column prop="createTime" align="center" label="入库时间" />
+        <el-table-column prop="collTime" align="center" label="采集时间" />
+      </el-table>
+      <el-pagination
+        background
+        class="pagination"
+        style="margin-top: 16px; margin-right: 16px; float: right"
+        :current-page="pageData.pageNum"
+        :page-sizes="pageData.pageSizes"
+        layout="total, prev, pager, next, sizes, jumper"
+        :total="pageData.total"
+        @size-change="(e) => handlePageSizeChange(e)"
+        @current-change="(e) => handleCurrentPageChange(e)"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import dayjs from "dayjs";
+import TopBackTitle from "@/components/TopBackTitle/index.vue";
+import { calcTableHeight } from "@/mixins/calcTableHeight";
+
+import { getMonitorData } from "@/api/monitorDataPreview";
+
+export default {
+  components: {
+    TopBackTitle,
+  },
+  mixins: [calcTableHeight],
+  data() {
+    return {
+      tableData: [], // 检查列表
+      pageData: {
+        pageNum: 1, // 当前页
+        pageSize: 10, // 请求数量
+        pageSizes: [10, 20, 50, 100],
+        total: 0, // 总数量
+      },
+    };
+  },
+  created() {
+    this.getTableData();
+  },
+  methods: {
+    handleCurrentPageChange(page) {
+      this.pageData.pageNum = page;
+      this.getTableData();
+    },
+    handlePageSizeChange(pageSize) {
+      this.pageData.pageSize = pageSize;
+      this.getTableData();
+    },
+
+    // 获取列表数据
+    getTableData() {
+      getMonitorData({
+        startTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+        endTime: dayjs(dayjs().subtract(1, "year")).format(
+          "YYYY-MM-DD HH:mm:ss"
+        ),
+        monitorType: "MS_HDM_OBP",
+        pageSize: this.pageData.pageSize,
+        pageNum: this.pageData.pageNum,
+      }).then((res) => {
+        if (res) {
+          this.tableData = res.records;
+          this.pageData.total = res.total;
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.rainfall-page {
+}
+</style>

src/views/monitorDataPreview/reservoirWater/index.vue

@@ -0,0 +1,101 @@
+<!-- 水库水情监测 -->
+<template>
+  <div class="rainfall-page slider-right">
+    <TopBackTitle :showBackBtn="false" />
+
+    <div class="slider-right-body" ref="tableBoxRef">
+      <el-table :height="tableHeight" :data="tableData" border>
+        <el-table-column type="index" align="center" label="序号" width="60" />
+        <el-table-column prop="stcd" align="center" label="测站编码" />
+        <el-table-column prop="tm" align="center" label="时间" />
+        <el-table-column prop="rz" align="center" label="库上水位(m)" />
+        <el-table-column prop="inq" align="center" label="入库流量(m³/s)" />
+        <el-table-column prop="w" align="center" label="蓄水位">
+          <template slot="header">
+            <span>蓄水位(10<sup>6</sup>m³)</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="blrz" align="center" label="库下水位(m)" />
+        <el-table-column prop="otq" align="center" label="出库流量(m³/s)" />
+        <el-table-column prop="rwchrcd" align="center" label="库水特征码" />
+        <el-table-column prop="rwptn" align="center" label="库水水势" />
+        <el-table-column prop="inqdr" align="center" label="入流时段长" />
+        <el-table-column prop="msqmt" align="center" label="测流方法" />
+        <el-table-column prop="collTime" align="center" label="采集时间" />
+      </el-table>
+      <el-pagination
+        background
+        class="pagination"
+        style="margin-top: 16px; margin-right: 16px; float: right"
+        :current-page="pageData.pageNum"
+        :page-sizes="pageData.pageSizes"
+        layout="total, prev, pager, next, sizes, jumper"
+        :total="pageData.total"
+        @size-change="(e) => handlePageSizeChange(e)"
+        @current-change="(e) => handleCurrentPageChange(e)"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import dayjs from "dayjs";
+
+import TopBackTitle from "@/components/TopBackTitle/index.vue";
+import { calcTableHeight } from "@/mixins/calcTableHeight";
+
+import { getMonitorData } from "@/api/monitorDataPreview";
+
+export default {
+  components: {
+    TopBackTitle,
+  },
+  mixins: [calcTableHeight],
+  data() {
+    return {
+      tableData: [], // 检查列表
+      pageData: {
+        pageNum: 1, // 当前页
+        pageSize: 10, // 请求数量
+        pageSizes: [10, 20, 50, 100],
+        total: 0, // 总数量
+      },
+    };
+  },
+  created() {
+    this.getTableData();
+  },
+  methods: {
+    handleCurrentPageChange(page) {
+      this.pageData.pageNum = page;
+      this.getTableData();
+    },
+    handlePageSizeChange(pageSize) {
+      this.pageData.pageSize = pageSize;
+      this.getTableData();
+    },
+
+    // 获取列表数据
+    getTableData() {
+      getMonitorData({
+        startTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+        endTime: dayjs(dayjs().subtract(1, "year")).format(
+          "YYYY-MM-DD HH:mm:ss"
+        ),
+        monitorType: "MS_HDM_RSVR",
+        pageSize: this.pageData.pageSize,
+        pageNum: this.pageData.pageNum,
+      }).then((res) => {
+        if (res) {
+          this.tableData = res.records;
+          this.pageData.total = res.total;
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.rainfall-page {
+}
+</style>

src/views/monitorDataPreview/riverwayWater/index.vue

@@ -0,0 +1,95 @@
+<!-- 河道水情监测 -->
+<template>
+  <div class="rainfall-page slider-right">
+    <TopBackTitle :showBackBtn="false" />
+
+    <div class="slider-right-body" ref="tableBoxRef">
+      <el-table :height="tableHeight" :data="tableData" border>
+        <el-table-column type="index" align="center" label="序号" width="60" />
+        <el-table-column prop="stcd" align="center" label="测站编码" />
+        <el-table-column prop="tm" align="center" label="时间" />
+        <el-table-column prop="z" align="center" label="水位" />
+        <el-table-column prop="q" align="center" label="流量" />
+        <el-table-column prop="xsa" align="center" label="断面过水面积" />
+        <el-table-column prop="xsavv" align="center" label="断面平均流速" />
+        <el-table-column prop="xsmxv" align="center" label="断面最大流速" />
+        <el-table-column prop="flwchrcd" align="center" label="喝水特征码" />
+        <el-table-column prop="wptn" align="center" label="水势" />
+        <el-table-column prop="collTime" align="center" label="采集时间" />
+      </el-table>
+      <el-pagination
+        background
+        class="pagination"
+        style="margin-top: 16px; margin-right: 16px; float: right"
+        :current-page="pageData.pageNum"
+        :page-sizes="pageData.pageSizes"
+        layout="total, prev, pager, next, sizes, jumper"
+        :total="pageData.total"
+        @size-change="(e) => handlePageSizeChange(e)"
+        @current-change="(e) => handleCurrentPageChange(e)"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import dayjs from "dayjs";
+
+import TopBackTitle from "@/components/TopBackTitle/index.vue";
+import { calcTableHeight } from "@/mixins/calcTableHeight";
+
+import { getMonitorData } from "@/api/monitorDataPreview";
+
+export default {
+  components: {
+    TopBackTitle,
+  },
+  mixins: [calcTableHeight],
+  data() {
+    return {
+      tableData: [], // 检查列表
+      pageData: {
+        pageNum: 1, // 当前页
+        pageSize: 10, // 请求数量
+        pageSizes: [10, 20, 50, 100],
+        total: 0, // 总数量
+      },
+    };
+  },
+  created() {
+    this.getTableData();
+  },
+  methods: {
+    handleCurrentPageChange(page) {
+      this.pageData.pageNum = page;
+      this.getTableData();
+    },
+    handlePageSizeChange(pageSize) {
+      this.pageData.pageSize = pageSize;
+      this.getTableData();
+    },
+
+    // 获取列表数据
+    getTableData() {
+      getMonitorData({
+        startTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+        endTime: dayjs(dayjs().subtract(1, "year")).format(
+          "YYYY-MM-DD HH:mm:ss"
+        ),
+        monitorType: "MS_HDM_RIVER",
+        pageSize: this.pageData.pageSize,
+        pageNum: this.pageData.pageNum,
+      }).then((res) => {
+        if (res) {
+          this.tableData = res.records;
+          this.pageData.total = res.total;
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.rainfall-page {
+}
+</style>

src/views/monitorDataPreview/verticalDisplacement/index.vue

@@ -0,0 +1,97 @@
+<!-- 降雨量监测 -->
+<template>
+  <div class="rainfall-page slider-right">
+    <TopBackTitle :showBackBtn="false" />
+
+    <div class="slider-right-body" ref="tableBoxRef">
+      <el-table :height="tableHeight" :data="tableData" border>
+        <el-table-column type="index" align="center" label="序号" width="60" />
+        <el-table-column
+          prop="prjStcd"
+          align="center"
+          label="水利工程测站代码"
+        />
+        <el-table-column prop="mpcd" align="center" label="测点编号" />
+        <el-table-column prop="mstm" align="center" label="测量时间" />
+        <el-table-column prop="vrds" align="center" label="垂直位移" />
+        <el-table-column prop="colmt" align="center" label="采集方式" />
+        <el-table-column prop="crateTime" align="center" label="入库时间" />
+        <el-table-column prop="collTime" align="center" label="采集时间" />
+        <el-table-column prop="gdwrDasc" align="center" label="数据来源" />
+      </el-table>
+      <el-pagination
+        background
+        class="pagination"
+        style="margin-top: 16px; margin-right: 16px; float: right"
+        :current-page="pageData.pageNum"
+        :page-sizes="pageData.pageSizes"
+        layout="total, prev, pager, next, sizes, jumper"
+        :total="pageData.total"
+        @size-change="(e) => handlePageSizeChange(e)"
+        @current-change="(e) => handleCurrentPageChange(e)"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import dayjs from "dayjs";
+
+import TopBackTitle from "@/components/TopBackTitle/index.vue";
+import { calcTableHeight } from "@/mixins/calcTableHeight";
+
+import { getMonitorData } from "@/api/monitorDataPreview";
+
+export default {
+  components: {
+    TopBackTitle,
+  },
+  mixins: [calcTableHeight],
+  data() {
+    return {
+      tableData: [], // 检查列表
+      pageData: {
+        pageNum: 1, // 当前页
+        pageSize: 10, // 请求数量
+        pageSizes: [10, 20, 50, 100],
+        total: 0, // 总数量
+      },
+    };
+  },
+  created() {
+    this.getTableData();
+  },
+  methods: {
+    handleCurrentPageChange(page) {
+      this.pageData.pageNum = page;
+      this.getTableData();
+    },
+    handlePageSizeChange(pageSize) {
+      this.pageData.pageSize = pageSize;
+      this.getTableData();
+    },
+
+    // 获取列表数据
+    getTableData() {
+      getMonitorData({
+        startTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+        endTime: dayjs(dayjs().subtract(1, "year")).format(
+          "YYYY-MM-DD HH:mm:ss"
+        ),
+        monitorType: "MS_DSM_SRVRDS",
+        pageSize: this.pageData.pageSize,
+        pageNum: this.pageData.pageNum,
+      }).then((res) => {
+        if (res) {
+          this.tableData = res.records;
+          this.pageData.total = res.total;
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.rainfall-page {
+}
+</style>

src/views/reservoir/index.vue

@@ -5,9 +5,59 @@
 </template>
 
 <script>
-import Layout from '@/layout'
+import Layout from "@/layout";
+
+// 一个x轴，1个或多个Y轴，N个数据
+const obj = {
+  // x轴展示刻度
+  xAxis: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+  // y轴单位名称
+  yAxis: [
+    // 第一个Y轴
+    {
+      name: "温度",
+      unit: "℃",
+      series: [
+        {
+          name: "水温1",
+          data: [20, 30, 40, 50, 60, 70, 80],
+        },
+        {
+          name: "水温2",
+          data: [30, 40, 50, 60, 70, 80, 90],
+        },
+      ],
+    },
+    // 第二个Y轴
+    {
+      name: "毫升",
+      unit: "ml",
+      series: [
+        {
+          name: "降雨量1",
+          data: [20, 30, 40, 50, 60, 70, 80],
+        },
+        {
+          name: "降雨量2",
+          data: [30, 40, 50, 60, 70, 80, 90],
+        },
+      ],
+    },
+  ],
+  // 固定刻度
+  markLine: [
+    {
+      name: "汛限水位(m)",
+      value: 50,
+    },
+    {
+      name: "校核洪水位(m)",
+      value: 40,
+    },
+  ],
+};
 
 export default {
-  components: {Layout}
-}
-</script>
+  components: { Layout },
+};
+</script>

src/views/reservoir/safeOperation/components/EngineSafe.vue

@@ -0,0 +1,237 @@
+<!-- 工程安全监测 -->
+<template>
+  <div class="real-time-monitor-page">
+    <div class="flex">
+      <div class="tree-box">
+        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
+        </el-input>
+        <el-tree
+          class="filter-tree"
+          :data="treeData"
+          :props="defaultProps"
+          default-expand-all
+          :filter-node-method="filterNode"
+          @node-click="handleClickTreeNode"
+          ref="tree"
+        >
+        </el-tree>
+      </div>
+      <div class="content-box">
+        <div class="flex items-center">
+          <el-select class="w-100" size="mini" v-model="dateRange">
+            <el-option label="近1月" value="0"></el-option>
+            <el-option label="近1日" value="1"></el-option>
+            <el-option label="近7日" value="2"></el-option>
+            <el-option label="近3月" value="3"></el-option>
+            <el-option label="近1年" value="4"></el-option>
+          </el-select>
+          <span class="ml-10 mr-6">开始日期</span>
+          <el-date-picker
+            size="mini"
+            class="w-120"
+            v-model="paramsData.startDate"
+            type="date"
+            :picker-options="{
+              disabledDate: filterStartDate,
+            }"
+            placeholder="选择日期"
+          >
+          </el-date-picker>
+          <span class="ml-10 mr-6">结束日期</span>
+          <el-date-picker
+            size="mini"
+            class="w-120"
+            v-model="paramsData.endDate"
+            type="date"
+            :picker-options="{
+              disabledDate: filterEndDate,
+            }"
+            placeholder="选择日期"
+          >
+          </el-date-picker>
+
+          <el-button
+            type="primary"
+            class="!ml-10"
+            @click="handleSearch"
+            size="mini"
+            >查询</el-button
+          >
+          <el-button @click="handleReset" size="mini">重置</el-button>
+        </div>
+        <div class="echarts-box mt-16">
+          <div class="title">统计图</div>
+          <div ref="echartsRef" class="echart-dom"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { initLineOptions, doubleYAxisOptions } from "../js/initEcharts";
+
+import {
+  getReservoirMonitorTreeData,
+  getReservoirRainDetailData,
+} from "@/api/reservoir";
+export default {
+  data() {
+    return {
+      dateRange: null,
+      resCode: null, // 水库编码
+      filterText: "",
+      myChart: null,
+      treeData: [
+        {
+          label: "xxx水库",
+          value: "xxxreservoir",
+          children: [
+            {
+              label: "xx环境量",
+              value: "xxxenv1",
+              children: [
+                {
+                  label: "xx雨量站",
+                  value: "xxxrain1",
+                  type: "1",
+                },
+                {
+                  label: "xx水位站",
+                  value: "xxxwater1",
+                  type: "2",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      paramsData: {
+        startDate: "",
+        endDate: "",
+      },
+    };
+  },
+  created() {},
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  mounted() {
+    this.initData();
+  },
+  methods: {
+    initData(code) {
+      console.log("请求数据 >>>>>> ", code);
+      this.resCode = code;
+      getReservoirMonitorTreeData(code).then((res) => {
+        this.treeData = res.data;
+      });
+      this.initChart();
+    },
+
+    filterStartDate(date) {
+      if (this.paramsData.endDate) {
+        return (
+          (date && date.valueOf() > this.paramsData.endDate) ||
+          date.valueOf() > Date.now()
+        );
+      }
+      return date && date.valueOf() > Date.now();
+    },
+    filterEndDate(date) {
+      if (this.paramsData.startDate) {
+        return (
+          (date && date.valueOf() < this.paramsData.startDate) ||
+          date.valueOf() > Date.now()
+        );
+      }
+      return date && date.valueOf() > Date.now();
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    initChart(data) {
+      // 渲染echarts
+      if (!this.$refs.echartsRef) {
+        return;
+      }
+      if (this.myChart) {
+        this.myChart.dispose();
+      }
+      let options = initLineOptions(data);
+      this.myChart = echarts.init(this.$refs.echartsRef);
+      options && this.myChart.setOption(options);
+    },
+    // 请求数据
+    handleSearch() {
+      this.initData();
+    },
+    handleReset() {
+      this.paramsData.startDate = "";
+      this.paramsData.endDate = "";
+    },
+    handleClickTreeNode(data, node) {
+      if (node.isLeaf && data.type) {
+        getReservoirRainDetailData({
+          resCode: this.resCode,
+          id: data.id,
+        }).then((res) => {
+          this.initChart(res.data, data.type);
+        });
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.real-time-monitor-page {
+  .tree-box {
+    flex-shrink: 0;
+    width: 240px;
+    border: 1px solid #f4f5f7;
+    border-radius: 2px;
+    background: #fff;
+    overflow: auto;
+    padding: 4px;
+  }
+  .content-box {
+    flex: 1;
+    margin-left: 4px;
+    border: 1px solid #f4f5f7;
+    padding: 4px;
+    .echarts-box {
+      flex: 1;
+      border: 1px solid #f4f5f7;
+      border-radius: 2px;
+      background: #fff;
+      .title {
+        height: 32px;
+        line-height: 32px;
+        padding-left: 12px;
+        border-bottom: 1px solid #f4f5f7;
+      }
+      .echart-dom {
+        width: 100%;
+        height: 360px;
+      }
+    }
+  }
+  .w-100 {
+    width: 100px;
+  }
+  .w-120 {
+    width: 128px;
+  }
+
+  .w-50 {
+    width: 50%;
+  }
+}
+</style>

src/views/reservoir/safeOperation/components/EnvirQuality.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="water-rain-comp">
+    <div class="mb-12 font-16 font-700">监测站名称安全站</div>
+    <div class="flex justify-between">
+      <div class="flex items-center">
+        <el-select class="w-150" size="mini" v-model="dateRange">
+          <el-option label="近1月" value="0"></el-option>
+          <el-option label="近1日" value="1"></el-option>
+          <el-option label="近7日" value="2"></el-option>
+          <el-option label="近3月" value="3"></el-option>
+          <el-option label="近1年" value="4"></el-option>
+        </el-select>
+        <span class="ml-10 mr-6">开始日期</span>
+        <el-date-picker
+          v-model="startDate"
+          class="w-150"
+          size="mini"
+          type="date"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+        ></el-date-picker>
+        <span class="ml-10 mr-6">结束日期</span>
+        <el-date-picker
+          v-model="endDate"
+          class="w-150"
+          size="mini"
+          type="date"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+        ></el-date-picker>
+      </div>
+
+      <div class="flex items-center">
+        <el-button type="primary" size="mini" @click="handleSearch"
+          >查询</el-button
+        >
+        <el-button size="mini" @click="handleReset">重置</el-button>
+      </div>
+    </div>
+    <div class="flex mt-10">
+      <div class="w-50">
+        <div class="mb-8">水情</div>
+        <div class="flex">
+          <div class="mr-10">
+            <div>当前水位</div>
+            <div>22 m</div>
+          </div>
+          <div class="mr-10">
+            <div>当前蓄水位</div>
+            <div>22 m³</div>
+          </div>
+          <div class="mr-10">
+            <div>最高库水位</div>
+            <div>22 m</div>
+          </div>
+          <div class="mr-10">
+            <div>最低库水位</div>
+            <div>17 m</div>
+          </div>
+          <div>
+            <div>平均库水位</div>
+            <div>20 m</div>
+          </div>
+        </div>
+      </div>
+      <div class="w-50">
+        <div class="mb-8">雨情</div>
+        <div class="flex">
+          <div class="mr-10">
+            <div>日降雨量</div>
+            <div>22 mm</div>
+          </div>
+          <div class="mr-10">
+            <div>最高日降雨量</div>
+            <div>22 mm</div>
+          </div>
+          <div>
+            <div>平均日降雨量</div>
+            <div>22 mm</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-10">环境量</div>
+    <div class="mt-8 w-full">
+      <div class="echart-box" ref="echartsRef"></div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+import { initLineOptions, doubleYAxisOptions } from "../js/initEcharts";
+export default {
+  data() {
+    return {
+      myChart: null,
+      dateRange: null,
+      startDate: null,
+      endDate: null,
+    };
+  },
+  created() {},
+  mounted() {
+    setTimeout(() => {
+      this.initChart();
+    }, 30);
+  },
+  methods: {
+    initData() {},
+    handleSearch() {},
+    handleReset() {},
+    initChart(data) {
+      // 渲染echarts
+      if (!this.$refs.echartsRef) {
+        return;
+      }
+      if (this.myChart) {
+        this.myChart.dispose();
+      }
+      let options = initLineOptions(data);
+      this.myChart = echarts.init(this.$refs.echartsRef);
+      options && this.myChart.setOption(options);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.water-rain-comp {
+  .echart-box {
+    width: 100%;
+    height: 300px;
+
+    border: 1px solid #ddd;
+  }
+}
+
+.w-150 {
+  width: 150px;
+}
+
+.w-50 {
+  width: 50%;
+}
+</style>

src/views/reservoir/safeOperation/components/MonitorWarning.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="monitor-warning">
+    <div class="flex justify-between mt-12">
+      <div class="flex items-center">
+        <el-select class="w-150" size="mini" v-model="dateRange">
+          <el-option label="近1月" value="0"></el-option>
+          <el-option label="近1日" value="1"></el-option>
+          <el-option label="近7日" value="2"></el-option>
+          <el-option label="近3月" value="3"></el-option>
+          <el-option label="近1年" value="4"></el-option>
+        </el-select>
+        <span class="ml-10 mr-6">开始日期</span>
+        <el-date-picker
+          class="w-150"
+          size="mini"
+          type="date"
+          v-model="startDate"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+        ></el-date-picker>
+        <span class="ml-10 mr-6">结束日期</span>
+        <el-date-picker
+          class="w-150"
+          size="mini"
+          type="date"
+          v-model="endDate"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+        ></el-date-picker>
+      </div>
+
+      <div class="flex items-center">
+        <el-button type="primary" size="mini" @click="handleSearch"
+          >查询</el-button
+        >
+        <el-button size="mini" @click="handleReset">重置</el-button>
+      </div>
+    </div>
+
+    <div class="mt-10">
+      <el-table :data="listData" border>
+        <el-table-column label="测站名称">
+          <template slot-scope="scope">
+            <span>{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="测站编码">
+          <template slot-scope="scope">
+            <span>{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="测站类型">
+          <template slot-scope="scope">
+            <span>{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="预警类型">
+          <template slot-scope="scope">
+            <span>{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="监测数据">
+          <template slot-scope="scope">
+            <span>{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="监测时间">
+          <template slot-scope="scope">
+            <span>{{ scope.row.time }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="预警值" width="100">
+          <template slot-scope="scope">
+            <span>{{ scope.row.value }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="预警时间">
+          <template slot-scope="scope">
+            <span>{{ scope.row.createTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini">告警处置</el-button>
+            <el-button type="text" size="mini">解除本次预警</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dateRange: null,
+      startDate: null,
+      endDate: null,
+      listData: [],
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped lang="scss">
+.monitor-warning {
+}
+</style>

src/views/reservoir/safeOperation/components/ProjectDetail.vue

@@ -1,26 +1,46 @@
 <template>
   <div class="project-detail-page">
     <el-tabs :tab-position="'left'" v-model="activeTab">
-      <el-tab-pane label="基础信息" name="1">
+      <el-tab-pane label="基础信息" name="1" lazy>
         <BaseInfo ref="baseInfoRef"></BaseInfo>
       </el-tab-pane>
-      <el-tab-pane label="实时监测" name="2">
+      <!-- <el-tab-pane label="实时监测" name="2">
         <RealTimeMonitor ref="realTimeMonitor"></RealTimeMonitor>
+      </el-tab-pane> -->
+      <el-tab-pane label="水雨情(代表站)" name="2" lazy>
+        <WaterRain ref="waterRainRef"></WaterRain>
+      </el-tab-pane>
+      <el-tab-pane label="环境量" name="3" lazy>
+        <EnvirQuality ref="envirQuality"></EnvirQuality>
+      </el-tab-pane>
+      <el-tab-pane label="工程安全监测" name="4" lazy>
+        <EngineSafe ref="engineSafe"></EngineSafe>
+      </el-tab-pane>
+      <el-tab-pane label="监测预警" name="5" lazy>
+        <MonitorWarning ref="monitorWarning"></MonitorWarning>
       </el-tab-pane>
-      <el-tab-pane :disabled="true" label="监测预警" name="3"
-        >监测预警未确定需求</el-tab-pane
-      >
     </el-tabs>
   </div>
 </template>
 <script>
 import BaseInfo from "./BaseInfo.vue";
 import RealTimeMonitor from "./RealTimeMonitor.vue";
+import WaterRain from "./WaterRain.vue";
+import EnvirQuality from "./EnvirQuality.vue";
+import EngineSafe from "./EngineSafe.vue";
+import MonitorWarning from "./MonitorWarning.vue";
 export default {
-  components: { BaseInfo, RealTimeMonitor },
+  components: {
+    BaseInfo,
+    WaterRain,
+    RealTimeMonitor,
+    EnvirQuality,
+    EngineSafe,
+    MonitorWarning,
+  },
   data() {
     return {
-      activeTab: "1",
+      activeTab: "4",
     };
   },
   created() {},

src/views/reservoir/safeOperation/components/RealTimeMonitor.vue

@@ -60,7 +60,7 @@
 </template>
 <script>
 import * as echarts from "echarts";
-import { initReverseLineOptions, doubleYAxisOptions } from "../js/initEcharts";
+import { initLineOptions, doubleYAxisOptions } from "../js/initEcharts";
 
 import {
   getReservoirMonitorTreeData,
@@ -155,7 +155,7 @@ export default {
           if (this.myChart) {
             this.myChart.dispose();
           }
-          let options = initReverseLineOptions(data);
+          let options = initLineOptions(data);
           this.myChart = echarts.init(this.$refs.echartsRef);
           options && this.myChart.setOption(options);
           break;

src/views/reservoir/safeOperation/components/WaterRain.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="water-rain-comp">
+    <div class="text-16">监测站名称(代表站)</div>
+    <div class="flex justify-between mt-12">
+      <div class="flex items-center">
+        <el-select class="w-150" size="mini" v-model="dateRange">
+          <el-option label="近1月" value="0"></el-option>
+          <el-option label="近1日" value="1"></el-option>
+          <el-option label="近7日" value="2"></el-option>
+          <el-option label="近3月" value="3"></el-option>
+          <el-option label="近1年" value="4"></el-option>
+        </el-select>
+        <span class="ml-10 mr-6">开始日期</span>
+        <el-date-picker
+          class="w-150"
+          size="mini"
+          type="date"
+          v-model="startDate"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+        ></el-date-picker>
+        <span class="ml-10 mr-6">结束日期</span>
+        <el-date-picker
+          class="w-150"
+          size="mini"
+          type="date"
+          v-model="endDate"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+        ></el-date-picker>
+      </div>
+
+      <div class="flex items-center">
+        <el-button type="primary" size="mini" @click="handleSearch"
+          >查询</el-button
+        >
+        <el-button size="mini" @click="handleReset">重置</el-button>
+      </div>
+    </div>
+    <div class="flex mt-10">
+      <div class="w-50">
+        <div class="mb-8">水情</div>
+        <div class="flex">
+          <div class="mr-10">
+            <div>当前水位</div>
+            <div>22 m</div>
+          </div>
+          <div class="mr-10">
+            <div>当前蓄水位</div>
+            <div>22 m³</div>
+          </div>
+          <div class="mr-10">
+            <div>最高库水位</div>
+            <div>22 m</div>
+          </div>
+          <div class="mr-10">
+            <div>最低库水位</div>
+            <div>17 m</div>
+          </div>
+          <div>
+            <div>平均库水位</div>
+            <div>20 m</div>
+          </div>
+        </div>
+      </div>
+      <div class="w-50">
+        <div class="mb-8">雨情</div>
+        <div class="flex">
+          <div class="mr-10">
+            <div>日降雨量</div>
+            <div>22 mm</div>
+          </div>
+          <div class="mr-10">
+            <div>最高日降雨量</div>
+            <div>22 mm</div>
+          </div>
+          <div>
+            <div>平均日降雨量</div>
+            <div>22 mm</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-10">水雨情</div>
+    <div class="mt-8 w-full">
+      <div class="echart-box" ref="echartsRef"></div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+import { initLineOptions, doubleYAxisOptions } from "../js/initEcharts";
+
+export default {
+  data() {
+    return {
+      dateRange: null,
+      startDate: null,
+      endDate: null,
+      myChart: null,
+    };
+  },
+  created() {},
+  mounted() {
+    setTimeout(() => {
+      this.initChart();
+    }, 30);
+  },
+  methods: {
+    initData() {},
+    handleSearch() {},
+    handleReset() {},
+    initChart(data) {
+      // 渲染echarts
+      if (!this.$refs.echartsRef) {
+        return;
+      }
+      if (this.myChart) {
+        this.myChart.dispose();
+      }
+      let options = doubleYAxisOptions(data);
+      this.myChart = echarts.init(this.$refs.echartsRef);
+      options && this.myChart.setOption(options);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.water-rain-comp {
+  .echart-box {
+    width: 100%;
+    height: 300px;
+
+    border: 1px solid #ddd;
+  }
+}
+
+.w-150 {
+  width: 150px;
+}
+
+.w-50 {
+  width: 50%;
+}
+</style>

src/views/reservoir/safeOperation/index.vue

@@ -94,7 +94,7 @@ export default {
   components: { ProjectDetail },
   data() {
     return {
-      showDialog: false,
+      showDialog: true,
       mapSceneType: 2, // 2: 2D, 3: 3D
       showTreeBox: false,
       defaultProps: {
@@ -295,7 +295,6 @@ export default {
 
     // 点击
     handleClickTree(data, node) {
-      console.log("data >>>>>  ", data, node);
       if (node.isLeaf && !data.children) {
         let resId = this.checkList.find((v) => v === data.id);
         if (resId) {

src/views/reservoir/safeOperation/js/initEcharts.js

@@ -1,5 +1,5 @@
-// 倒立柱状图，y轴inverse
-export const initReverseLineOptions = () => {
+// 单个xy轴折线图
+export const initLineOptions = () => {
   return {
     title: {
       // text: "统计",
@@ -9,10 +9,10 @@ export const initReverseLineOptions = () => {
       top: "2%",
     },
     grid: {
-      left: "10%",
-      right: "10%",
+      left: "5%",
+      right: "5%",
       bottom: "10%",
-      top: '10%',
+      top: '20%',
       containLabel: true,
     },
     tooltip: {
@@ -42,9 +42,9 @@ export const initReverseLineOptions = () => {
     yAxis: [
       {
         type: "value",
-        inverse: true,
+        // inverse: true,
         name: "降雨量(mm)",
-        nameLocation: 'start',
+        nameLocation: 'end',
       },
     ],
     series: [
@@ -60,17 +60,17 @@ export const initReverseLineOptions = () => {
   };
 };
 
-// 双y轴柱状图
+// 双y轴折线图
 export const doubleYAxisOptions = () => {
   return {
     title: {
       // text: "统计",
     },
     grid: {
-      left: "10%",
-      right: "10%",
+      left: "5%",
+      right: "5%",
       bottom: "10%",
-      top: '10%',
+      top: '20%',
       containLabel: true,
     },
     tooltip: {
@@ -81,13 +81,14 @@ export const doubleYAxisOptions = () => {
           backgroundColor: "#283b56",
         },
       },
+      formatter: '{b}<br />{a0}: {c0}mm<br />{a1}: {c1}℃'
     },
     xAxis:[
       {
         type: 'category',
-        name: '时间',
+        // name: '时间',
         nameLocation: 'middle',
-        nameGap: 30,  
+        nameGap: 30,
         data: ['00:00','02:00','04:00','06:00','08:00','10:00','12:00',
           '14:00','16:00','18:00','20:00','22:00'],
       }

src/views/sluice/runManage/waterRainReport/smartAnalyse/index.vue

@@ -1,8 +1,8 @@
 <!-- 水雨情智能分析页面 -->
 <template>
-  <div class="patrol-manage-page">
+  <div class="slider-right patrol-manage-page">
     <TopBackTitle title="水雨情智能分析"></TopBackTitle>
-    <div class="container">
+    <div class="container slider-right-body">
       <div class="title">智能分析</div>
       <div class="tabulation">
         <div class="aside">
@@ -433,6 +433,11 @@ export default {
 
       this.initYearData(row);
     },
+
+    resizeFunc() {
+      this.zoom = 1 / document.body.style.zoom;
+      this.handleRowChange(this.currentSluice);
+    },
   },
 
   async mounted() {
@@ -440,18 +445,16 @@ export default {
     await this.getSluiceStatisticalList();
     this.$refs.table.setCurrentRow(this.tableData[0]); //隐式触发了handleRowChange
 
-    window.onresize = () => {
-      this.zoom = 1 / document.body.style.zoom;
-      this.handleRowChange(this.currentSluice);
-    };
+    window.addEventListener("resize", this.resizeFunc);
+  },
+
+  beforeDestroy() {
+    window.removeEventListener("resize", this.resizeFunc);
   },
 };
 </script>
 <style scoped lang="scss">
 .patrol-manage-page {
-  width: 100%;
-  height: 100%;
-  padding-left: 24px;
   .top-title {
     height: 40px;
     background-color: white;
@@ -463,9 +466,8 @@ export default {
 
   .container {
     width: 100%;
-    height: calc(100% - 40px - 24px);
     margin-top: 24px;
-    padding: 24px;
+    padding: 16px;
     background-color: white;
 
     display: flex;
@@ -484,7 +486,7 @@ export default {
       border-left: 3px solid #31a08e;
     }
     .tabulation {
-      height: calc(100% - 24px);
+      height: calc(100% - 24px - 16px);
       display: flex;
       gap: 16px;
       flex: 1;