From 1cd62a4855fecdbbcb13452452452b34ea607dff Mon Sep 17 00:00:00 2001
From: panyuyi <panyuyi@datametatech.com>
Date: Sat, 9 Mar 2024 16:33:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=90=88=E5=B9=B6=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../waterRainReport/smartAnalyse/index.vue    | 234 +++++++++++-------
 vue.config.js                                 |   6 +-
 2 files changed, 151 insertions(+), 89 deletions(-)

diff --git a/src/views/dike/runManage/waterRainReport/smartAnalyse/index.vue b/src/views/dike/runManage/waterRainReport/smartAnalyse/index.vue
index 21044e8..88c7b6b 100644
--- a/src/views/dike/runManage/waterRainReport/smartAnalyse/index.vue
+++ b/src/views/dike/runManage/waterRainReport/smartAnalyse/index.vue
@@ -2,80 +2,68 @@
 <template>
   <div class="patrol-manage-page">
     <div class="top-title">水雨情智能分析</div>
-    <div class="table-box">
-      <div class="top-search">
-        <span>起/终点所在地：</span>
-        <el-cascader
-          :options="areasOptions"
-          v-model="paramsData.startArea"
-          :props="areasOptionProps"
-          placeholder="请选择"
-          clearable
-          size="small"
-        >
-        </el-cascader>
-        <span>-</span>
-        <el-cascader
-          :options="areasOptions"
-          v-model="paramsData.endArea"
-          :props="areasOptionProps"
-          placeholder="请选择"
-          clearable
-          size="small"
-        >
-        </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>
-        <el-table-column type="index" align="center" label="序号" width="80" />
-        <el-table-column prop="dikeName" align="center" label="堤防名称" />
-        <el-table-column prop="dikeGrad" align="center" label="堤防级别">
-          <template #default="{ row }">{{
-            getDikeGrad(row.dikeGrad)
-          }}</template>
-        </el-table-column>
-        <el-table-column prop="dikeType" align="center" label="堤防类别" />
-        <el-table-column prop="dikeLen" align="center" label="堤防长度" />
-        <el-table-column prop="project" align="center" label="起/终点所在地" />
-        <el-table-column
-          prop="engineeringManagementUnit"
-          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>
-      <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="getTableData()"
-      >
-      </el-pagination>
+    <div class="table-box font-14">
+      <el-row>
+        <el-col :span="10">
+          <div>
+            <span>所属流域: </span>
+            <el-select
+              class="w-180"
+              v-model="paramsData.basin"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in basinList"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              ></el-option>
+            </el-select>
+            <span class="ml-10">行政区划: </span>
+            <el-cascader
+              class="w-180"
+              :options="areasOptions"
+              v-model="paramsData.xzqh"
+              :props="areasOptionProps"
+              placeholder="请选择"
+              clearable
+              size="small"
+            >
+            </el-cascader>
+          </div>
+        </el-col>
+        <el-col :span="14">
+          <div class="flex justify-between">
+            <div class="statistic-item">
+              <div>10天内低于分洪水位次数（个）</div>
+              <div class="font-24 mt-10">3</div>
+            </div>
+            <div class="line"></div>
+            <div class="statistic-item">
+              <div>10天内低于分洪水位次数（个）</div>
+              <div class="font-24 mt-10">3</div>
+            </div>
+            <div class="line"></div>
+            <div class="statistic-item">
+              <div>10天内低于分洪水位次数（个）</div>
+              <div class="font-24 mt-10">3</div>
+            </div>
+            <div class="line"></div>
+            <div class="statistic-item">
+              <div>10天内低于分洪水位次数（个）</div>
+              <div class="font-24 mt-10">3</div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
 <script>
-import { getAreasData } from "@/api/areas/index";
 import { regionData, codeToText, TextToCode } from "element-china-area-data";
+import * as echarts from "echarts";
 
+import { getAreasData } from "@/api/areas/index";
 import { getDikeWaterRainProjectList } from "@/api/dike";
 
 export default {
@@ -92,16 +80,15 @@ export default {
         total: 0,
       },
       paramsData: {
-        startArea: "",
-        endArea: "",
-        dikeGrad: "",
-        dikeName: "",
+        basin: "",
+        xzqh: "",
       },
       areasOptions: [],
       searchDikeName: "",
       dikeTypeList: [], // 堤防类型列表
       dikeGradList: [], // 堤防级别列表
       tableData: [],
+      basinList: [], // 流域字典
     };
   },
   created() {
@@ -123,8 +110,8 @@ export default {
         pageNum: this.pageData.pageNum,
         pageSize: this.pageData.pageSize,
         data: {
-          dikeType: this.dikeType || "",
-          dikeName: this.searchDikeName || "",
+          basin: this.paramsData.basin || "",
+          xzqh: this.paramsData.xzqh,
         },
       }).then((res) => {
         if (res) {
@@ -133,6 +120,82 @@ export default {
         }
       });
     },
+    barInit() {
+      let chartDom = this.$refs.barEle;
+      let myChart = echarts.init(chartDom);
+      let option = {
+        title: {
+          // text: "World Population",
+        },
+        color: ["#38A0FF", "#4CCA73", "#FBD437"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        // legend: {
+        //   orient: "horizontal",
+        //   bottom: "2%",
+        //   icon: "circle",
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          top: "10%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            alignWithLabel: true,
+          },
+          data: this.barChartData.name,
+        },
+        yAxis: {
+          type: "value",
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            //网格线
+            show: true, //是否显示
+            lineStyle: {
+              //网格线样式
+              // color: "#0735a2", //网格线颜色
+              // width: 1, //网格线的加粗程度
+              type: "dashed", //网格线类型
+            },
+          },
+          minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
+          max: function (value) {
+            return value.max + Math.ceil(0.2 * value.max);
+          },
+          // boundaryGap: [0, 1],
+        },
+
+        series: [
+          {
+            name: "完成率（%）",
+            type: "bar",
+            data: [],
+            barMaxWidth: "10%",
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
     // 重置搜索条件
     resetSearch() {
       this.searchDikeName = "";
@@ -210,19 +273,20 @@ export default {
     margin-top: 24px;
     padding: 16px;
     background-color: white;
+  }
 
-    .top-search {
-      margin-bottom: 8px;
-
-      .search-input {
-        width: 202px;
-        margin-right: 10px;
-      }
-    }
+  .statistic-item {
+    padding: 20px;
+    border-radius: 4px;
+    background: linear-gradient(to bottom, #ffe4d2 0%, #fff7f1 100%);
+  }
+  .line {
+    width: 2px;
+    background: #fff;
+  }
 
-    .table {
-      height: calc(680px - 34px);
-    }
+  .w-180 {
+    width: 180px !important;
   }
 }
 </style>
diff --git a/vue.config.js b/vue.config.js
index cb74407..d52d8b5 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -51,20 +51,18 @@ module.exports = {
           ['^' + process.env.VUE_APP_BASE_API]: '/tianhui-admin-web'
         }
       },
-<<<<<<< HEAD
       "iserver":{
         target:"http://172.16.32.63:52111/iserver/services",
         changeOrigin: true,
         pathRewrite: {
           'iserver': ''
-=======
+        }
+      },
       '/mapserver': {
         target: 'http://172.16.32.63/tiles',
         changeOrigin: true,
         pathRewrite: {
           '^/mapserver': ''
->>>>>>> 3327f9ce18efb2fd5a86ec6c2abbf9811195d3e8
-        }
       }
     },
     disableHostCheck: true