Merge branch 'release-sy-v1.0.0' of http://gitlab.datameta.com/project/water/shuili-vue into release-sy-v1.0.0

package.json

@@ -49,7 +49,7 @@
     "d3": "^5.0.0",
     "d3-flextree": "^2.1.2",
     "dayjs": "^1.11.10",
-    "echarts": "4.2.1",
+    "echarts": "^5.5.0",
     "element-china-area-data": "^6.1.0",
     "element-ui": "^2.15.6",
     "file-saver": "2.0.1",
@@ -82,6 +82,7 @@
     "vue-awesome-swiper": "^3.1.3",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.4.9",
+    "vue-echarts": "^6.6.9",
     "vue-pdf": "^4.3.0",
     "vue-router": "3.0.2",
     "vue-simple-uploader": "^0.7.6",

src/api/sluice/analysis.js

@@ -0,0 +1,42 @@
+import request from '@/utils/request';
+
+// 获取水闸统计列表
+export function getSluiceStatisticalListApi(data) {
+  return request({
+    url: `/run/sz/project/yq/statistics`,
+    method: 'post',
+    data
+  });
+}
+
+// 统计超出的指标
+export function getSluiceExceedApi(wagaCode) {
+  return request({
+    url: `/run/sz/yq/statistics/exceed-index`,
+    method: 'post',
+    data:{
+        wagaCode,
+    }
+  });
+}
+// 获取降雨量和过水闸流量
+export function getRainfallAndGateFlowApi(wagaCode) {
+  return request({
+    url: `/run/sz/yq/statistics/get-ten-days-rainfall`,
+    method: 'post',
+    data:{
+        wagaCode,
+    }
+  });
+}
+
+// 统计超出的指标
+export function getWaterLevelInfoApi(wagaCode) {
+  return request({
+    url: `/run/sz/yq/statistics/get-ten-days-water-regime`,
+    method: 'post',
+    data:{
+        wagaCode,
+    }
+  });
+}

src/api/sluice/index.js

@@ -1,5 +1,6 @@
 // 水闸相关接口
 import request from '@/utils/request'
+export * from './analysis';
 
 // 获取巡查水闸列表
 export function getRunProjectList(data) {

src/main.js

@@ -52,7 +52,10 @@ import {downloadFile,showFile} from '@/api/common'
 import Viewer from 'v-viewer'
 import 'viewerjs/dist/viewer.css'
 
+
 import echarts from 'echarts'
+// import v_echarts from 'vue-echarts'
+
 Vue.prototype.$echarts = echarts
 
 import { regionData, codeToText, TextToCode } from "element-china-area-data";
@@ -113,7 +116,8 @@ Vue.prototype.$timePick = function (date) {
 }
 Vue.use(Viewer);
 
-
+// 全局挂载echarts
+// Vue.component('v-chart',v_echarts);
 // 全局组件挂载
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)

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

@@ -2,164 +2,139 @@
 <template>
   <div class="patrol-manage-page">
     <div class="top-title">水雨情智能分析</div>
-    <div class="table-box">
+    <div class="container">
-      <div class="top-search">
+      <div class="title">智能分析</div>
-        <span>起/终点所在地：</span>
+      <div class="tabulation">
-        <el-cascader
+        <div class="aside">
-          :options="areasOptions"
+          <div class="aside-header">
-          v-model="paramsData.startArea"
+            <span>水闸</span>
-          :props="areasOptionProps"
+            <div class="tabel-search">
-          placeholder="请选择"
+              <el-select v-model="basin" placeholder="所属流域" size="mini">
-          clearable
+                <el-option v-for="item in basinOptions" :key="item.value" :label="item.label" :value="item.value">
-          size="small"
+                </el-option>
-        >
+              </el-select>
-        </el-cascader>
+
-        <span>-</span>
               <el-cascader
-          :options="areasOptions"
+                :options="regionOptions"
-          v-model="paramsData.endArea"
+                v-model="region"
                 :props="areasOptionProps"
-          placeholder="请选择"
+                placeholder="行政区划"
                 clearable
-          size="small"
+                size="mini"
+                @change="handleRegionChange"
               >
               </el-cascader>
-
-        <span class="ml-12">堤防名称：</span>
-        <el-input
-          class="search-input"
-          v-model="searchDikeName"
-          placeholder="请输入"
-        ></el-input>
-        <el-button class="!ml-10" type="success" @click="getTableData()"
-          >搜索</el-button
-        >
-        <el-button @click="resetSearch()">重置</el-button>
             </div>
-      <el-table class="mt-16" height="625" :data="tableData" border>
+          </div>
-        <el-table-column type="index" align="center" label="序号" width="80" />
+          <div class="aside-body">
-        <el-table-column prop="dikeName" align="center" label="堤防名称" />
+            <el-table
-        <el-table-column prop="dikeGrad" align="center" label="堤防级别">
+              :data="tableData"
-          <template #default="{ row }">{{
+              border
-            getDikeGrad(row.dikeGrad)
+              style="width: 100%"
-          }}</template>
+              highlight-current-row
-        </el-table-column>
+              @current-change="handleRowChange"
-        <el-table-column prop="dikeType" align="center" label="堤防类别" />
+            >
-        <el-table-column prop="dikeLen" align="center" label="堤防长度" />
+              <el-table-column prop="date" label="闸名"> </el-table-column>
-        <el-table-column prop="project" align="center" label="起/终点所在地" />
+              <el-table-column prop="name" label="水位/m"> </el-table-column>
-        <el-table-column
+              <el-table-column prop="address" label="距离警戒水位/m"> </el-table-column>
-          prop="engineeringManagementUnit"
+              <el-table-column prop="address" label="排雨量/mm"> </el-table-column>
-          align="center"
-          label="工程管理单位"
-        />
-        <el-table-column prop="operate" align="center" label="操作">
-          <template slot-scope="scope">
-            <!-- <el-button type="text" size="small">处置</el-button> -->
-          </template>
-        </el-table-column>
             </el-table>
+          </div>
+          <div class="aside-footer">
+            <span
+              >共 <em class="em">{{ pageConfig.total }}</em> 条信息</span
+            >
             <el-pagination
               background
-        class="pagination"
+              layout="prev, pager, next"
-        style="margin-top: 16px; margin-right: 16px; float: right"
+              :page-size="pageConfig.pageSize"
-        :current-page="pageData.pageNum"
+              :current-page="pageConfig.pageNum"
-        :page-sizes="pageData.pageSizes"
+              :total="pageConfig.total"
-        layout="total, prev, pager, next, sizes, jumper"
+              :pager-count="5"
-        :total="pageData.total"
+              @current-change="getSluiceStatisticalList"
-        @size-change="getTableData()"
             >
             </el-pagination>
           </div>
         </div>
+        <div class="analysis">
+          <div class="top">
+            <div class="card">
+              <span>10天内低于分洪水位次数(个)</span>
+              <span class="data">{{ analysisData.belowPeakCount }}</span>
+            </div>
+            <div class="card">
+              <span>10天内高于警戒水位次数(个)</span>
+              <span class="data">{{ analysisData.exceedWarningCount }}</span>
+            </div>
+            <div class="card">
+              <span>24小时内降雨量超过50mm/h次数(个)</span>
+              <span class="data">{{ analysisData.exceedRainfallCount }}</span>
+            </div>
+            <div class="card">
+              <span>10天内当天总过闸流量高于100m³次数(个)</span>
+              <span class="data">{{ analysisData.exceedGateFlowCount }}</span>
+            </div>
+          </div>
+          <div class="statistical-chart"></div>
+          <div class="statistical-chart"></div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-import { getAreasData } from "@/api/areas/index";
+import {
-import { regionData, codeToText, TextToCode } from "element-china-area-data";
+  getSluiceStatisticalListApi,
-
+  getSluiceExceedApi,
-import { getDikeWaterRainProjectList } from "@/api/dike";
+  getRainfallAndGateFlowApi,
-
+  getWaterLevelInfoApi
+} from '@/api/sluice/index.js';
+import { getAreasData } from '@/api/areas/index.js';
 export default {
   data() {
     return {
-      dialogVisible: false,
+      basin: '', // 流域
+      region: '', // 行政区划
+      basinOptions: [], // 流域选项
+      regionOptions: [], // 行政区划选项
       areasOptionProps: {
         emitPath: false,
-        checkStrictly: true, //选择任意一级
+        checkStrictly: true //选择任意一级
       },
-      pageData: {
+      tableData: [],
-        pageNum: 1,
+
+      pageConfig: {
         pageSize: 10,
-        total: 0,
+        pageNum: 1,
-      },
+        total: 100
-      paramsData: {
-        startArea: "",
-        endArea: "",
-        dikeGrad: "",
-        dikeName: "",
       },
-      areasOptions: [],
+      analysisData: {
-      searchDikeName: "",
+        belowPeakCount: 0, // 低于分洪水位次数
-      dikeTypeList: [], // 堤防类型列表
+        exceedWarningCount: 0, // 高于警戒水位次数
-      dikeGradList: [], // 堤防级别列表
+        exceedRainfallCount: 0, // 降雨量超过50mm/h次数
-      tableData: [],
+        exceedGateFlowCount: 0 // 当天总过闸流量高于100m³次数
+      }
     };
   },
-  created() {
+
-    this.getDicts("embankment_level").then((response) => {
-      this.dikeGradList = response.data;
-    });
-    this.getDicts("embankment_type").then((response) => {
-      this.dikeTypeList = response.data;
-    });
-  },
-  mounted() {
-    this.getTableData();
-    this.getTreeData();
-  },
   methods: {
-    // 获取列表信息
+    // 获取水闸统计列表
-    getTableData() {
+    getSluiceStatisticalList() {
-      getDikeWaterRainProjectList({
+      const params = {
-        pageNum: this.pageData.pageNum,
+        pageSize: this.pageConfig.pageSize,
-        pageSize: this.pageData.pageSize,
+        pageNum: this.pageConfig.pageNum,
         data: {
-          dikeType: this.dikeType || "",
+          basin: this.basin,
-          dikeName: this.searchDikeName || "",
+          adcd: this.region //区域筛选
-        },
-      }).then((res) => {
-        if (res) {
-          this.tableData = res.records;
-          this.pageData.total = res.total;
         }
+      };
+      getSluiceStatisticalListApi(params).then((res) => {
+        this.tableData = res.data;
+        this.pageConfig.total = res.total;
       });
     },
-    // 重置搜索条件
+    // 获取行政区划选项数据
-    resetSearch() {
+    getAreasOptions() {
-      this.searchDikeName = "";
-      this.getTableData();
-    },
-    // 水雨情监测
-    handleGoReport(row) {
-      this.$router.push({
-        path: "inspectionPlan",
-        query: {
-          dikeCode: row.dikeCode,
-          dikeName: row.dikeName,
-        },
-      });
-    },
-    // 智能分析
-    handleGoAnalyse(row) {
-      this.$router.push({
-        path: "inspectionRecords",
-        query: {
-          dikeCode: row.dikeCode,
-          dikeName: row.dikeName,
-        },
-      });
-    },
-    // 获取地区树数据
-    getTreeData() {
       getAreasData().then((items) => {
         if (items?.data) {
           let res = [];
@@ -168,7 +143,7 @@ export default {
               if (i.parentid === pid) {
                 const newItem = {
                   label: i.name,
-                  value: i.id,
+                  value: i.id
                 };
                 if (i.layer != 3) newItem.children = [];
                 res.push(newItem);
@@ -177,17 +152,44 @@ export default {
             }
           };
           getChildren(res, items.data[0].parentid);
-          this.areasOptions = res;
+          this.regionOptions = res;
         }
       });
     },
-    getDikeGrad(key) {
+    // 流域改变
-      return (
+    handleRegionChange() {
-        this.dikeGradList?.filter((v) => v.dictValue === key)?.[0]?.dictLabel ||
+      this.pageConfig.pageNum = 1;
-        key
+      this.getSluiceStatisticalList();
-      );
     },
+    // 选择一个水闸数据行
+    handleRowChange(row) {
+      getSluiceExceedApi(440607000036).then((res) => {
+        if (!res.success) return;
+        const data = res.data;
+        this.analysisData = {
+          belowPeakCount: data.belowPeakCount, // 低于分洪水位次数
+          exceedWarningCount: data.exceedWarningCount, // 高于警戒水位次数
+          exceedRainfallCount: data.exceedRainfallCount, // 降雨量超过50mm/h次数
+          exceedGateFlowCount: data.exceedGateFlowCount // 当天总过闸流量高于100m³次数
+        };
+      });
+      getRainfallAndGateFlowApi(440607000036).then((res) => {
+        if (!res.success) return;
+        const data = res.data.rainfallAndGateFlowMap; //{2024-03-04:{rainfall: '0.0', gateFlow: '0.0'}......}
+      });
+
+      getWaterLevelInfoApi(440607000036).then((res) => {
+        if (!res.success) return;
+        const data = res.data.waterLevelMap; // {2024-03-04:{waterLevel: '0.0', floodLevel: '12', warningLevel: '38'}.....}
+      });
+    }
   },
+
+  mounted() {
+    this.getSluiceStatisticalList();
+    this.getAreasOptions();
+    this.handleRowChange();
+  }
 };
 </script>
 <style scoped lang="scss">
@@ -204,24 +206,129 @@ export default {
     font-weight: 600;
   }
 
-  .table-box {
+  .container {
     width: 100%;
     min-height: calc(100vh - 56px - 64px);
     margin-top: 24px;
-    padding: 16px;
+    padding: 24px;
     background-color: white;
 
-    .top-search {
+    display: flex;
-      margin-bottom: 8px;
+    flex-direction: column;
+    gap: 16px;
+    flex-grow: 1;
+    .title {
+      color: rgba(0, 0, 0, 0.9);
+      font-family: Source Han Sans;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      letter-spacing: 0em;
 
-      .search-input {
+      padding-left: 12px;
-        width: 202px;
+      border-left: 3px solid #31a08e;
-        margin-right: 10px;
     }
+    .tabulation {
+      display: flex;
+      gap: 16px;
+      flex: 1;
+      align-items: stretch;
+      .aside {
+        display: flex;
+        flex-direction: column;
+        flex: 560;
+        .aside-header {
+          height: 56px;
+          border-radius: 8px 8px 0px 0px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 12px 16px;
+          .tabel-search {
+            height: 32px;
+            display: flex;
+            gap: 16px;
+            align-items: center;
           }
+        }
+        .aside-body {
+          flex: 1;
+        }
+        .aside-footer {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          span {
+            font-family: 思源黑体;
+            font-weight: 400;
+            font-size: 14;
+            color: rgba(0, 0, 0, 0.4);
+            .em {
+              color: rgba(0, 0, 0, 0.6);
+              font-weight: 500;
+              font-size: 14;
+              text-decoration: underline;
+            }
+          }
+        }
+      }
+      .analysis {
+        flex: 1008;
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        align-items: stretch;
+        padding-bottom: 20px;
+        .top {
+          height: 126px;
+          display: flex;
+          gap: 16px;
+          .card {
+            position: relative;
+            flex: 1;
+            box-sizing: border-box;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+            background: linear-gradient(180deg, #eafffc 0%, rgba(222, 255, 250, 0) 100%), #ffffff;
+            border-radius: 8px;
+            border: 1px solid #9fd3ca;
 
-    .table {
+            display: flex;
-      height: calc(680px - 34px);
+            flex-direction: column;
+            gap: 8px;
+            padding: 16px 24px;
+
+            font-family: 思源黑体;
+            font-size: 16px;
+            font-weight: 350;
+            line-height: 24px;
+            letter-spacing: 0em;
+            color: rgba(0, 0, 0, 0.9);
+
+            .data {
+              font-family: 思源黑体;
+              font-size: 32px;
+              font-weight: 500;
+              line-height: normal;
+              letter-spacing: 0em;
+              color: #31a08e;
+            }
+
+            img {
+              position: absolute;
+              bottom: 5px;
+              right: -5px;
+              width: 74px;
+              height: 74px;
+            }
+          }
+        }
+        .statistical-chart {
+          flex: 1;
+          padding: 24px;
+          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+          border: 1px solid #e5e5e5;
+        }
+      }
     }
   }
 }