From 723cb7f801f7e5a4406198a53680db14c938f500 Mon Sep 17 00:00:00 2001
From: panyuyi <panyuyi@datametatech.com>
Date: Wed, 24 Jan 2024 18:18:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .prettierignore                               |  10 +
 prettierrc.conf.js                            |  19 +
 src/api/dike/index.js                         |   9 +
 src/assets/styles/index.scss                  |   1 +
 src/assets/styles/space.scss                  |  71 ++++
 .../enginerring/inspectionRecords/index.vue   | 104 +++--
 .../enginerring/patrolManage/index.vue        | 178 +++++++++
 .../maintenancePlan/DetailsDialog.vue         | 354 +++++++++++++++++-
 .../maintenance/maintenancePlan/index.vue     |  32 +-
 .../planManagement/index.vue                  |  50 ++-
 10 files changed, 771 insertions(+), 57 deletions(-)
 create mode 100644 .prettierignore
 create mode 100644 prettierrc.conf.js
 create mode 100644 src/assets/styles/space.scss
 create mode 100644 src/views/dike/runManage/enginerring/patrolManage/index.vue

diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..15cf071
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,10 @@
+/node_modules/**
+/dist/
+/dist*
+/public/*
+/docs/*
+/vite.config.ts
+/src/types/env.d.ts
+/docs/**/*
+/plop/**/*
+CHANGELOG
diff --git a/prettierrc.conf.js b/prettierrc.conf.js
new file mode 100644
index 0000000..b46239f
--- /dev/null
+++ b/prettierrc.conf.js
@@ -0,0 +1,19 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  vueIndentScriptAndStyle: false,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  bracketSpacing: true,
+  trailingComma: 'none',
+  jsxSingleQuote: false,
+  arrowParens: 'always',
+  insertPragma: false,
+  requirePragma: false,
+  proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'auto',
+  rangeStart: 0
+}
diff --git a/src/api/dike/index.js b/src/api/dike/index.js
index 14c387d..7d6ad7f 100644
--- a/src/api/dike/index.js
+++ b/src/api/dike/index.js
@@ -1,6 +1,15 @@
 // 堤防相关接口
 import request from '@/utils/request'
 
+// 获取巡查堤防列表
+export function getDikeProjectList(data) {
+  return request({
+    url: `/run/df/project/list`,
+    method: 'post',
+    data
+  })
+}
+
 // 巡查记录-巡查记录详情
 export function getDikePatrolDetails(id) {
   return request({
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 33f9d38..a422b06 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -4,6 +4,7 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './btn.scss';
+@import './space.scss';
 
 body {
   height: 100%;
diff --git a/src/assets/styles/space.scss b/src/assets/styles/space.scss
new file mode 100644
index 0000000..75d6f49
--- /dev/null
+++ b/src/assets/styles/space.scss
@@ -0,0 +1,71 @@
+/**
+  懒得弄windcss，手写一些常用的
+*/
+
+/***** margin ******/
+@for $i from 1 through 32 {
+  .m-#{$i}{
+    margin: #{$i}px;
+  }
+  .ml-#{$i}{
+    margin-left: #{$i}px;
+  }
+  .mr-#{$i}{
+    margin-right: #{$i}px;
+  }
+  .mt-#{$i}{
+    margin-top: #{$i}px;
+  }
+  .mb-#{$i}{
+    margin-bottom: #{$i}px;
+  }
+  .\!m-#{$i}{
+    margin: #{$i}px !important;
+  }
+  .\!ml-#{$i}{
+    margin-left: #{$i}px !important;
+  }
+  .\!mr-#{$i}{
+    margin-right: #{$i}px !important;
+  }
+  .\!mt-#{$i}{
+    margin-top: #{$i}px !important;
+  }
+  .\!mb-#{$i}{
+    margin-bottom: #{$i}px !important;
+  }
+}
+
+/***** padding ******/
+@for $i from 1 through 32 {
+  .p-#{$i}{
+    margin: #{$i}px;
+  }
+  .pl-#{$i}{
+    padding-left: #{$i}px;
+  }
+  .pr-#{$i}{
+    padding-right: #{$i}px;
+  }
+  .pt-#{$i}{
+    padding-top: #{$i}px;
+  }
+  .pb-#{$i}{
+    padding-bottom: #{$i}px;
+  }
+  .\!p-#{$i}{
+    margin: #{$i}px !important;
+  }
+  .\!pl-#{$i}{
+    padding-left: #{$i}px !important;
+  }
+  .\!pr-#{$i}{
+    padding-right: #{$i}px !important;
+  }
+  .\!pt-#{$i}{
+    padding-top: #{$i}px !important;
+  }
+  .\!pb-#{$i}{
+    padding-bottom: #{$i}px !important;
+  }
+}
diff --git a/src/views/dike/runManage/enginerring/inspectionRecords/index.vue b/src/views/dike/runManage/enginerring/inspectionRecords/index.vue
index 534eeca..437d9a1 100644
--- a/src/views/dike/runManage/enginerring/inspectionRecords/index.vue
+++ b/src/views/dike/runManage/enginerring/inspectionRecords/index.vue
@@ -1,77 +1,91 @@
 <!-- 巡查记录-堤防 -->
 <script>
-import { postDFInspectionRecordsList, } from '@/api/management'
+import { postDFInspectionRecordsList } from "@/api/management";
 export default {
-  name: 'InspectionItems',
+  name: "InspectionItems",
   data() {
     return {
-      searchInput: '',
+      searchInput: "",
       tableData: [], // 检查列表
       pageData: {
         pageNum: 1, // 当前页
         pageSize: 10, // 请求数量
         pageSizes: [10, 20, 50, 100],
-        total: 0 // 总数量
+        total: 0, // 总数量
       },
-    }
+    };
   },
   methods: {
     // 路线设置
     routeSetting(row) {
       this.$router.push({
-        path: 'patrolRouteSettings',
-        query: { name: row.name, editor: false, id: row.id }
-      })
+        path: "patrolRouteSettings",
+        query: { name: row.name, editor: false, id: row.id },
+      });
     },
     getTableData(search) {
       postDFInspectionRecordsList({
         data: {
           timeView: {
-            timeField: "create_time"
-          }
+            timeField: "create_time",
+          },
         },
         params: {
-          sort:'desc',
-          orderBy: 'create_time'
+          sort: "desc",
+          orderBy: "create_time",
         },
         cv: {
           name: "name",
           type: "like",
-          value: search
+          value: search,
         },
         pageSize: this.pageData.pageSize,
-        pageNum: this.pageData.pageNum
+        pageNum: this.pageData.pageNum,
       }).then((res) => {
         if (res) {
-          this.tableData = res.records
-          this.pageData.total = res.total
+          this.tableData = res.records;
+          this.pageData.total = res.total;
         }
-        console.log('🚀列表数据🚀', res)
-      })
+        console.log("🚀列表数据🚀", res);
+      });
     },
     // 重置搜索
     resetSearch() {
-      this.searchInput = ''
-      this.getTableData()
-    }
+      this.searchInput = "";
+      this.getTableData();
+    },
   },
   mounted() {
     // 获取列表数据
-    this.getTableData()
+    this.getTableData();
+
+    // 获取一级数据
+    this.getDicts("df_xs_c_classfy").then((res) => {
+      if (res?.data && Array.isArray(res.data)) {
+        console.log("df_xs_c_classfy >>>>>  ", res.data);
+      }
+    });
   },
-}
+};
 </script>
 
 <template>
   <div class="slider-right">
-    <div class="top-title">
-      基础信息管理
-    </div>
+    <div class="top-title">基础信息管理</div>
     <div class="table-box">
       <div class="top-search">
         <span>巡检记录：</span>
-        <el-input class="search-input" v-model="searchInput" placeholder="请输入巡检记录" />
-        <el-button class="search-btn" type="success" @click="getTableData(searchInput)">搜索</el-button>
+        <el-input
+          class="search-input"
+          v-model="searchInput"
+          placeholder="请输入巡检记录"
+        />
+        <el-button
+          class="search-btn"
+          type="success"
+          @click="getTableData(searchInput)"
+          >搜索</el-button
+        >
         <el-button @click="resetSearch()">重置</el-button>
       </div>
       <el-table class="table" height="665" :data="tableData" border>
@@ -79,27 +93,41 @@ export default {
         <el-table-column prop="name" align="center" label="巡检记录" />
         <el-table-column align="center" label="有无异常">
           <template slot-scope="scope">
-            <div v-if="scope.row.status != 0" style="display: flex; justify-content: center; flex-wrap: wrap;">
+            <div
+              v-if="scope.row.status != 0"
+              style="display: flex; justify-content: center; flex-wrap: wrap"
+            >
               <div v-if="scope.row.parts" class="normal">正常</div>
-              <div v-else v-for="item in scope.row.parts" class="abnormal">{{ item }}</div>
+              <div v-else v-for="item in scope.row.parts" class="abnormal">
+                {{ item }}
+              </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column prop="operatorName" align="center" label="巡查人员" />
         <el-table-column prop="status" align="center" label="状态">
           <template slot-scope="scope">
-            <span>{{ scope.row.status === 0 ? '检查中' : '已完成' }}</span>
+            <span>{{ scope.row.status === 0 ? "检查中" : "已完成" }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="address" align="center" label="操作">
           <template slot-scope="scope">
-            <el-button @click="routeSetting(scope.row)" type="text" size="small">巡查轨迹</el-button>
+            <el-button @click="routeSetting(scope.row)" 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
+        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>
   </div>
@@ -130,7 +158,6 @@ export default {
       width: 300px;
       margin-right: 10px;
     }
-
   }
 
   .search-btn {
@@ -145,12 +172,9 @@ export default {
     &:active {
       background-color: #2b8070;
     }
-
-    ;
   }
 
   .table {
-
     .normal {
       width: 40px;
       border-radius: 5px;
@@ -168,4 +192,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dike/runManage/enginerring/patrolManage/index.vue b/src/views/dike/runManage/enginerring/patrolManage/index.vue
new file mode 100644
index 0000000..d86f54c
--- /dev/null
+++ b/src/views/dike/runManage/enginerring/patrolManage/index.vue
@@ -0,0 +1,178 @@
+<!-- 巡查管理页 -->
+<template>
+  <div class="patrol-manage-page page">
+    <div class="top-title">堤防巡查管理</div>
+    <div class="table-box">
+      <div class="top-search">
+        <span>堤防名称：</span>
+        <el-input
+          class="search-input"
+          v-model="searchInput"
+          placeholder="请输入堤防名称"
+        />
+        <span>堤防类型：</span>
+        <el-select v-model="dikeType" placeholder="请选择">
+          <el-option
+            v-for="item in dikeTypeList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <el-button
+          class="!ml-10"
+          type="success"
+          @click="getTableData(searchInput)"
+          >搜索</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="name" align="center" label="堤防名称" />
+        <el-table-column prop="name" align="center" label="堤防代码" />
+        <el-table-column prop="name" align="center" label="管理单位" />
+        <el-table-column prop="name" align="center" label="行政主管部门" />
+        <el-table-column prop="name" align="center" label="最近巡查时间" />
+        <el-table-column prop="operate" align="center" label="操作">
+          <template slot-scope="scope">
+            <el-button
+              style="margin-right: 16px"
+              @click="handleSet(scope.row)"
+              type="text"
+              size="small"
+              >巡查配置</el-button
+            >
+            <el-button @click="handleGoPlan(scope.row)" type="text" size="small"
+              >计划管理</el-button
+            >
+            <el-button
+              @click="handleGoRecord(scope.row)"
+              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>
+  </div>
+</template>
+<script>
+import { getDikeProjectList } from "@/api/dike";
+
+export default {
+  data() {
+    return {
+      pageData: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+      },
+      searchInput: "",
+      dikeTypeList: [
+        {
+          label: "全部",
+          value: "",
+        },
+      ], // 堤防类型列表
+      dikeType: "",
+      tableData: [
+        {
+          dikeId: "123123",
+          dikeName: "test",
+        },
+      ],
+    };
+  },
+  created() {},
+  mounted() {
+    this.getDikeTypeListData();
+    this.getTableData();
+  },
+  methods: {
+    // 获取堤防类型数据
+    getDikeTypeListData() {},
+    // 获取列表信息
+    getTableData() {
+      getDikeProjectList({
+        pageNum: this.pageData.pageNum,
+        pageSize: this.pageData.pageSize,
+        type: this.dikeType || "",
+      }).then((res) => {
+        console.log("res >>>>>  ", res);
+      });
+    },
+    // 重置搜索条件
+    resetSearch() {
+      this.searchInput = "";
+      this.dikeType = "";
+      this.getTableData();
+    },
+    handleGoPlan(row) {
+      this.$router.push({
+        path: "inspectionPlan",
+        query: {
+          id: row.dikeId,
+        },
+      });
+    },
+    handleGoRecord(row) {
+      this.$router.push({
+        path: "inspectionRecords",
+        query: {
+          id: row.dikeId,
+        },
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.patrol-manage-page {
+  width: 100%;
+  min-height: calc(100vh - 56px);
+  padding-left: 24px;
+  .top-title {
+    height: 40px;
+    background-color: white;
+    display: flex;
+    padding-left: 16px;
+    align-items: center;
+    font-weight: 600;
+  }
+
+  .table-box {
+    width: 100%;
+    min-height: calc(100vh - 56px - 64px);
+    margin-top: 24px;
+    padding: 16px;
+    background-color: white;
+
+    .top-search {
+      margin-bottom: 8px;
+
+      .search-input {
+        width: 202px;
+        margin-right: 10px;
+      }
+    }
+
+    .table {
+      height: calc(680px - 34px);
+    }
+  }
+}
+</style>
diff --git a/src/views/dike/runManage/maintenance/maintenancePlan/DetailsDialog.vue b/src/views/dike/runManage/maintenance/maintenancePlan/DetailsDialog.vue
index 795cf7b..7abb52f 100644
--- a/src/views/dike/runManage/maintenance/maintenancePlan/DetailsDialog.vue
+++ b/src/views/dike/runManage/maintenance/maintenancePlan/DetailsDialog.vue
@@ -1,23 +1,367 @@
 <template>
 <div class='dike-detail-page'>
-  <el-dialog v-model="show" :visible.sync="dialogVisible" title="堤防详情" width="720px">
-    <div>弹窗内容</div>
+  <el-dialog :visible.sync="showDialog" title="堤防详情" width="960px">
+    <div class="title">工程基础信息</div>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>堤防名称：</span>
+        <span>这是什么名称啊啊啊啊啊</span>
+      </el-col>
+      <el-col :span="8">
+        <span>堤防编码：</span>
+        <span>44011111000009</span>
+      </el-col>
+      <el-col :span="8">
+        <span>起点所在行政区划：</span>
+        <span>广东省广州市白云区</span>
+      </el-col>
+    </el-row>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>终点所在行政区划：</span>
+        <span>广州市白云区</span>
+      </el-col>
+      <el-col :span="8">
+        <span>空间位置：</span>
+        <el-button type="primary" link>打开地图</el-button>
+      </el-col>
+      <el-col :span="8">
+        <span>起点桩号：</span>
+        <span>沉香沙0+000</span>
+      </el-col>
+    </el-row>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>终点桩号：</span>
+        <span>沉香沙3+212</span>
+      </el-col>
+      <el-col :span="8">
+        <span>堤防类型：</span>
+        <span>江河堤</span>
+      </el-col>
+      <el-col :span="8">
+        <span>是否为蓄滞洪区堤防：</span>
+        <span>否</span>
+      </el-col>
+    </el-row>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>堤防跨界情况：</span>
+        <span>未跨县</span>
+      </el-col>
+      <el-col :span="8">
+        <span>所在河流：</span>
+        <span>珠江西航道支1</span>
+      </el-col>
+      <el-col :span="8">
+        <span>河流岸别：</span>
+        <span>左岸</span>
+      </el-col>
+    </el-row>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>堤防型式：</span>
+        <span>土石混合堤</span>
+      </el-col>
+      <el-col :span="8">
+        <span>最近达标加固完工状态：</span>
+        <span>已开展达标加固</span>
+      </el-col>
+      <el-col :span="8">
+        <span>最近达标加固完工时间：</span>
+        <span>2021-11-12</span>
+      </el-col>
+    </el-row>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>建成时间：</span>
+        <span>-</span>
+      </el-col>
+      <el-col :span="8">
+        <span>工程任务：</span>
+        <span>防洪</span>
+      </el-col>
+      <el-col :span="8">
+        <span>堤防级别：</span>
+        <span>4级</span>
+      </el-col>
+    </el-row>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>设计防洪(潮)标准[重现期]：</span>
+        <span>20</span>
+      </el-col>
+      <el-col :span="8">
+        <span>规划防洪(潮)标准[重现期]：</span>
+        <span>20</span>
+      </el-col>
+      <el-col :span="8">
+        <span>堤防长度(m)：</span>
+        <span>3631</span>
+      </el-col>
+    </el-row>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>达标长度(m)：</span>
+        <span>-</span>
+      </el-col>
+      <el-col :span="8">
+        <span>保护人口(单位:万人)：</span>
+        <span>0</span>
+      </el-col>
+      <el-col :span="8">
+        <span>保护农田(单位:万亩)：</span>
+        <span>否</span>
+      </el-col>
+    </el-row>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>重要基础设施：</span>
+        <span></span>
+      </el-col>
+      <!-- <el-col :span="8">
+        <span></span>
+        <span></span>
+      </el-col>
+      <el-col :span="8">
+        <span></span>
+        <span></span>
+      </el-col> -->
+    </el-row>
+    <div class="title mt-20">工程管理情况</div>
+    <div class="tile-line mt-10">
+      <span class="pl-2 pr-2">工程管理单位</span>
+    </div>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>工程管理单位：</span>
+        <span>广州市珠江前后航道流域实物中心</span>
+      </el-col>
+      <el-col :span="8">
+        <span>工程管理单位性质：</span>
+        <span>事业</span>
+      </el-col>
+      <el-col :span="8">
+        <span>工程管理单位权属：</span>
+        <span>市级管理</span>
+      </el-col>
+    </el-row>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>工程管理单位责任人：</span>
+        <span>胡细凤</span>
+      </el-col>
+      <el-col :span="8">
+        <span>工程管理单位负责人职务：</span>
+        <span>主任</span>
+      </el-col>
+      <el-col :span="8">
+        <span>工程管理单位责任人电话：</span>
+        <span>13609037391</span>
+      </el-col>
+    </el-row>
+    <div class="tile-line mt-10">
+      <span class="pl-2 pr-2">水行政主管部门</span>
+    </div>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>水行政主管部门：</span>
+        <span>广州市水务局</span>
+      </el-col>
+      <el-col :span="8">
+        <span>水行政主管部门性质：</span>
+        <span>机关</span>
+      </el-col>
+      <el-col :span="8">
+        <span>水行政主管部门负责人：</span>
+        <span>何矩文</span>
+      </el-col>
+    </el-row>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>水行政主管部门责任人职务：</span>
+        <span>二级调研员</span>
+      </el-col>
+      <el-col :span="8">
+        <span>水行政主管部门责任人电话：</span>
+        <span>13800000000</span>
+      </el-col>
+      <el-col :span="8">
+        <span>行业归口管理部门：水利部门</span>
+        <span>13609037391</span>
+      </el-col>
+    </el-row>
+    <div class="tile-line mt-10">
+      <span class="pl-2 pr-2">防汛行政责任人</span>
+    </div>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>防汛行政责任人：</span>
+        <span>周军</span>
+      </el-col>
+      <el-col :span="8">
+        <span>防汛行政责任人职务：</span>
+        <span>白云区副区长</span>
+      </el-col>
+      <el-col :span="8">
+        <span>防汛行政责任人手机号码：</span>
+        <span>13580325008</span>
+      </el-col>
+    </el-row>
+    <div class="tile-line mt-10">
+      <span class="pl-2 pr-2">划界确权</span>
+    </div>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>管理范围划界：</span>
+        <span>完成划定</span>
+      </el-col>
+      <el-col :span="8">
+        <span>完成时间：</span>
+        <span>2021-07</span>
+      </el-col>
+      <el-col :span="8">
+        <span></span>
+        <span></span>
+      </el-col>
+    </el-row>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="24">
+        <span>上传证明材料：</span>
+        <span>xxxxxxx报告.pdf</span>
+      </el-col>
+    </el-row>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>管理范围确权：</span>
+        <span>尚未开展</span>
+      </el-col>
+      <el-col :span="8">
+        <span>保护范围划界：</span>
+        <span>完成划定</span>
+      </el-col>
+      <el-col :span="8">
+        <span>完成时间：</span>
+        <span>2021-07</span>
+      </el-col>
+    </el-row>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="24">
+        <span>上传证明材料：</span>
+        <span>尚未开展</span>
+      </el-col>
+    </el-row>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="24">
+        <span>工程图片：</span>
+        <span></span>
+      </el-col>
+    </el-row>
+    <div class="tile-line mt-10">
+      <span class="pl-2 pr-2">监控类型</span>
+    </div>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>监控类型：</span>
+        <span>无监控</span>
+      </el-col>
+    </el-row>
+    <div class="title mt-20">工程管理情况</div>
+    <el-row class="mt-12" :gutter="10">
+      <el-col :span="8">
+        <span>监控类型：</span>
+        <span>无监控</span>
+      </el-col>
+    </el-row>
   </el-dialog>
 </div>
 </template>
 <script>
+import {
+  listDikeInfo,
+  getDikeInfo,
+  delDikeInfo,
+  addDikeInfo,
+  updateDikeInfo,
+  exportDikeInfo,
+} from "@/api/yg/dikeInfo";
+
 export default {
   props:{
-    show:''
+    value:Boolean,
+    id: String
   },
   data(){
-    return {}
+    return {
+      detailsData: null,
+    }
+  },
+  computed:{
+    showDialog: {
+      get(){
+        return this.value
+      },
+      set(val){
+        this.$emit('input',val)
+      }
+    }
+  },
+  watch:{
+    value(newVal, old){
+      if(newVal){
+        this.initData()
+      }
+    }
+  },
+  methods:{
+    initData(){
+      if(this.id){
+        getDikeInfo(this.id).then(res=>{
+          this.detailsData = res
+        })
+      }
+    }
   },
   created(){},
-  methods:{}
+  mounted(){
+
+  },
 }
 </script>
 <style scoped lang='less'>
 .dike-detail-page{
+  .title{
+    position: relative;
+    font-size: 14px;
+    font-weight: 700;
+    padding-left: 20px;
+    &::before{
+      position: absolute;
+      left: 0;
+      top: 0;
+      content: " ";
+      background: #31a08e;
+      width: 4px;
+      height: 14px;
+    }
+  }
+  .tile-line{
+    display: flex;
+    align-items: center;
+    &::before{
+      flex: 1;
+      content: " ";
+      width: auto;
+      height: 1px;
+      background: #999;
+    }
+    &::after{
+      flex: 1;
+      content: " ";
+      width: auto;
+      height: 1px;
+      background: #999;
+    }
+  }
 }
 </style>
diff --git a/src/views/dike/runManage/maintenance/maintenancePlan/index.vue b/src/views/dike/runManage/maintenance/maintenancePlan/index.vue
index 55951e5..79ea970 100644
--- a/src/views/dike/runManage/maintenance/maintenancePlan/index.vue
+++ b/src/views/dike/runManage/maintenance/maintenancePlan/index.vue
@@ -6,13 +6,20 @@ import { putDFMaintenancePlan, deleteDFMaintenancePlan,
 import {
   listDikeInfo
 } from "@/api/yg/dikeInfo";
+import DetailsDialog from './DetailsDialog.vue';
+
 export default {
   name: 'InspectionItems',
+  components: { DetailsDialog },
   data() {
     return {
       searchInput: '',
       dialogVisible: false,
       prohibitEditing: false,
+      dikeDetailsDialog: {
+        show: false,
+        id: ''
+      },
       dikeLevel: [
         {
           id: 1,
@@ -44,7 +51,7 @@ export default {
           label: '五级及以下',
           value: 6
         },
-      ], // 堤防级别列表
+      ], // 堤防列表
       embankmentList: [
 
       ], // 堤防名称列表
@@ -233,9 +240,18 @@ export default {
         this.embankmentList = res?.records || []
       })
     },
+    handleChangeDike(value){
+      this.ruleForm.name = this.ruleForm.dikeCode
+      let res = this.embankmentList.find(v=> v.dikeCode === value)
+      this.dikeDetailsDialog.id = res?.id || ''
+    },
     // 打开堤防详情
-    handleOpenDetails(dikeCode){
-      if(dikeCode){}
+    handleOpenDetails(){
+      if(this.dikeDetailsDialog.id){
+        this.dikeDetailsDialog.show = true
+      } else {
+        this.$message.warning('缺少id')
+      }
     },
     // 打开堤防地图
     handleOpenMap(dikeCode){
@@ -307,12 +323,12 @@ export default {
       </div>
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
         <el-form-item label-width="120px" label="堤防名称" prop="dikeCode">
-          <el-select v-model="ruleForm.dikeCode" placeholder="请选择" @change="ruleForm.name = ruleForm.dikeCode"
+          <el-select v-model="ruleForm.dikeCode" placeholder="请选择" @change="handleChangeDike"
             :disabled="prohibitEditing">
-            <el-option v-for="item in embankmentList" :label="item.embankmentName" :value="item.embankmentCode" :key="item.id"></el-option>
+            <el-option v-for="item in embankmentList" :label="item.dikeName" :value="item.dikeCode" :key="item.id"></el-option>
           </el-select>
-          <el-button :disabled="true" class="ml-6" type="success" size="small" @click="handleOpenDetails(ruleForm.dikeCode)">详情</el-button>
-          <el-button :disabled="true" class="ml-6" type="success" size="small" @click="handleOpenMap(ruleForm.dikeCode)">打开地图</el-button>
+          <el-button :disabled="!ruleForm.dikeCode" class="ml-6" type="success" size="small" @click="handleOpenDetails">详情</el-button>
+          <el-button :disabled="!ruleForm.dikeCode" class="ml-6" type="success" size="small" @click="handleOpenMap">打开地图</el-button>
         </el-form-item>
         <div style="display: flex;">
           <el-form-item label-width="120px" label="维养计划名称" prop="name">
@@ -351,6 +367,8 @@ export default {
         <el-button v-if="!prohibitEditing" size="mini" type="primary" @click="submitForm('ruleForm')">保存</el-button>
       </div>
     </el-dialog>
+
+    <DetailsDialog v-model="dikeDetailsDialog.show" :id="dikeDetailsDialog.id"></DetailsDialog>
   </div>
 </template>
 
diff --git a/src/views/dike/runManage/pestAnimalControl/planManagement/index.vue b/src/views/dike/runManage/pestAnimalControl/planManagement/index.vue
index 7ec32d6..e003d50 100644
--- a/src/views/dike/runManage/pestAnimalControl/planManagement/index.vue
+++ b/src/views/dike/runManage/pestAnimalControl/planManagement/index.vue
@@ -1,6 +1,12 @@
 <!-- 害堤动物防护计划管理-堤防 -->
 <script>
-import { putDFMaintenancePlan, deleteDFMaintenancePlan, postDFNewPreventionControlPlan, postDFPreventionControlPlanList, getDFMaintenancePlan, listUser, getDicts } from '@/api/management'
+import { putDFMaintenancePlan, deleteDFMaintenancePlan,
+   postDFNewPreventionControlPlan, postDFPreventionControlPlanList,
+   getDFMaintenancePlan, listUser, getDicts } from '@/api/management'
+import {
+  listDikeInfo
+} from "@/api/yg/dikeInfo"
+
 export default {
   name: 'InspectionItems',
   data() {
@@ -14,6 +20,7 @@ export default {
       personnelList: [], // 人员列表
       patrolType: [], // 提醒周期类型
       workMonth: [], // 工作月份
+      embankmentList: [], //堤防列表
       dikeLevel: [], // 堤防级别列表
       controlType: [], // 防治类型
       tableData: [], // 检查列表
@@ -259,10 +266,38 @@ export default {
     handleOpenMap(){},
     // 打开详情
     handleOpenDetail(){},
+    // 获取堤防列表信息
+    getEmbData(){
+      listDikeInfo({
+        pageNum: 1,
+        pageSize: 20,
+        ids: null,
+        data: {
+          embankmentName: null,
+          endStationNumber: null,
+          embankmentType: null,
+        },
+        // 排序方式
+        params: {
+          // 按哪个字段排序
+          orderBy: "create_time",
+          // desc降序，升序asc
+          sort: "desc",
+        },
+      }).then(res=> {
+        this.embankmentList = res?.records || []
+      })
+    },
+    handleChangeDike(value){
+      this.ruleForm.name = this.ruleForm.dikeCode
+      // let res = this.embankmentList.find(v=> v.dikeCode === value)
+      // this.dikeDetailsDialog.id = res?.id || ''
+    },
   },
   mounted() {
     // 获取列表数据
     // this.getTableData()
+    this.getEmbData()
     getDicts('embankment_level').then((res) => {
       this.dikeLevel = res.data
     })
@@ -325,6 +360,7 @@ export default {
         :total="pageData.total" @size-change="getTableData()">
       </el-pagination>
     </div>
+    <!-- 弹窗 -->
     <el-dialog title="新增/编辑防治计划" @close="" :visible.sync="dialogVisible" width="720px">
       <div style="display: flex; margin-bottom: 16px;">
         <div style="width: 5px; height: 16px; background-color: #31a08e; margin-right: 8px;"></div>
@@ -332,9 +368,13 @@ export default {
       </div>
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
         <el-form-item label-width="120px" label="堤防名称" prop="dikeCode">
-          <el-input style="width: 202px;" v-model="ruleForm.dikeCode" placeholder="请输入" :disabled="prohibitEditing" />
-          <el-button button class="search-btn" type="success" size="small" @click="handleOpenDetail">详情</el-button>
-          <el-button button class="search-btn" type="success" size="small" @click="handleOpenMap">打开地图</el-button>
+          <!-- <el-input style="width: 202px;" v-model="ruleForm.dikeCode" placeholder="请输入" :disabled="prohibitEditing" /> -->
+          <el-select v-model="ruleForm.dikeCode" placeholder="请选择" @change="handleChangeDike"
+            :disabled="prohibitEditing">
+            <el-option v-for="item in embankmentList" :label="item.dikeName" :value="item.dikeCode" :key="item.id"></el-option>
+          </el-select>
+          <el-button :disabled="!ruleForm.dikeCode" class="!m-6" type="success" size="small" @click="handleOpenDetail">详情</el-button>
+          <el-button :disabled="!ruleForm.dikeCode" class="!ml-6" type="success" size="small" @click="handleOpenMap">打开地图</el-button>
         </el-form-item>
         <div style="display: flex;">
           <el-form-item label-width="120px" label="防治计划名称" prop="name">
@@ -505,4 +545,4 @@ export default {
   margin-right: 10px;
   margin-bottom: -4px;
 }
-</style>
\ No newline at end of file
+</style>