fix: 0607需求

package.json

@@ -63,10 +63,7 @@
     "jspdf": "^2.5.1",
     "jsplumb": "^2.15.6",
     "jszip": "^3.0.0",
-    "less": "^4.1.1",
-    "less-loader": "^7.0.0",
     "node-jsencrypt": "^1.0.0",
-    "node-sass": "^6.0.1",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
@@ -113,7 +110,10 @@
     "eslint-plugin-vue": "6.2.2",
     "html-webpack-plugin": "3.2.0",
     "husky": "1.3.1",
+    "less": "^4.1.1",
+    "less-loader": "^7.0.0",
     "lint-staged": "8.1.5",
+    "node-sass": "^6.0.1",
     "plop": "2.3.0",
     "runjs": "4.3.2",
     "sass-loader": "^10.2.0",

public/index.html

@@ -7,15 +7,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <script src="./config.js"></script>
-    
+
     <!-- <link href="./lib/Cesium/Widgets/widgets.css" rel="stylesheet" /> -->
     <link href="./lib/sycim/sycim.min.css" rel="stylesheet" />
-    <script src="./lib/sycim/sycim.min.js"></script>
-    <script>
-      window.Cesium = sycim.Cesium;
-      sycim.config.baseUrl = "./lib/sycim/resources/";
-    </script>
-    <script src="./lib/SuperMap3D/SuperMap3D.js"></script>
+
     <title><%= webpackConfig.name %></title>
 
 	  <style>
@@ -214,5 +209,36 @@
 		    <div class="load_title">正在加载系统资源，请耐心等待</div>
         </div>
 	</div>
+  <script>
+    function downloadJs(url, callback){
+      var script = document.createElement('script');
+      script.type = 'text/javascript'
+      if(script.readyState){  //IE
+        script.onreadystatechange = function(){
+            if (script.readyState == "loaded" ||
+                script.readyState == "complete"){
+                script.onreadystatechange = null;
+                if(callback) callback();
+            }
+        };
+    } else {  //Others
+        script.onload = function(){
+          if(callback) callback();
+        };
+    }
+      script.src = url;
+      document.body.appendChild(script);
+    }
+    window.onload = function(){
+      console.log('window.onload')
+      downloadJs('./lib/sycim/sycim.min.js', () => {
+        setTimeout(() => {
+          window.Cesium = sycim.Cesium;
+          sycim.config.baseUrl = "./lib/sycim/resources/";
+          downloadJs('./lib/SuperMap3D/SuperMap3D.js');
+        }, 500);
+      });
+    }
+  </script>
   </body>
 </html>

src/App.vue

@@ -7,6 +7,9 @@
 <script>
 export default {
   name: "App",
+  mounted() {
+    console.log("mounted >>> ");
+  },
 };
 </script>
 <style lang="scss">

src/assets/styles/index.scss

@@ -149,7 +149,15 @@ aside {
   height: 100%;
   padding-left: 24px;
   font-size: 14px;
-  padding-bottom: 60px;
+  padding-bottom: 24px;
+  overflow: auto;
+  .slider-right-body{
+    width: 100%;
+    margin-top: 24px;
+    padding: 16px;
+    padding-bottom: 60px; // 预留给分页器的
+    background-color: #fff;
+  }
   .bottom-btns{
     width: 100%;
     position: absolute;

src/assets/styles/space.scss

@@ -94,3 +94,24 @@
 .font-700{
   font-weight: 700;
 }
+
+/** 常用宽度 **/
+.w-100{
+  width: 100px !important;
+}
+
+.w-200{
+  width: 200px !important;
+}
+
+.w-202{
+  width: 202px !important;
+}
+
+.w-240{
+  width: 240px !important;
+}
+
+.w-360{
+  width: 360px !important;
+}

src/components/TopBackTitle/index.vue

@@ -0,0 +1,57 @@
+<!-- 统一带返回按钮的标题 -->
+<template>
+  <div class="top-back-title">
+    <el-button
+      v-if="showBackBtn"
+      class="back-btn"
+      size="mini"
+      @click="$router.go(-1)"
+      icon="el-icon-back"
+    />
+    {{ title || $router.currentRoute.meta.title }}
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    showBackBtn: {
+      type: Boolean,
+      default: true,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped lang="scss">
+.top-back-title {
+  height: 50px;
+  background-color: white;
+  display: flex;
+  padding-left: 16px;
+  align-items: center;
+  font-weight: 600;
+
+  .back-btn {
+    width: 32px;
+    height: 32px;
+    margin-right: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    background-color: #f6f6f6;
+
+    &:hover {
+      background-color: #ebf7f5;
+    }
+  }
+}
+</style>

src/layout/components/AppMain.vue

@@ -33,8 +33,8 @@ export default {
 <style lang="scss" scoped>
 .app-main {
   /* 50= navbar  50  */
-  height: calc(100vh - 56px);
-  min-height: calc(100vh - 56px);
+  // min-height: calc(100vh - 56px);
+  height: 100%;
   width: 100%;
   position: relative;
   overflow: hidden;

src/layout/index.vue

@@ -161,6 +161,13 @@ export default {
   transition: width 0.28s;
 }
 
+.wp {
+  height: 100%;
+  .main-container {
+    height: 100%;
+  }
+}
+
 .hideSidebar .fixed-header {
   // width: calc(100% - 54px);
 }

src/main.js

@@ -6,10 +6,10 @@ import 'normalize.css/normalize.css' // a modern alternative to CSS resets
 import './base.css'
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
-import $ from 'jquery'
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/ruoyi.scss' // ruoyi css
 import '../theme/index.css'
+
 import App from './App'
 import store from './store'
 import router from './router'

src/mixins/commonPagination.js

@@ -0,0 +1,22 @@
+// 分页公共请求参数和方法
+export const paginationMixins = {
+  data(){
+    return {
+      pageData: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+      },
+    }
+  },
+  methods: {
+    handleCurrentPageChange(page) {
+      this.pageData.pageNum = page;
+      if(this.getTableData) this.getTableData();
+    },
+    handlePageSizeChange(pageSize) {
+      this.pageData.pageSize = pageSize;
+      if(this.getTableData) this.getTableData();
+    },
+  }
+}

src/utils/index.js

@@ -442,3 +442,27 @@ export function getCameraViewPoint(viewer) {
     roll: viewer.camera.roll
   };
 }
+
+// 动态js加载
+export function loadScript(url) {
+  return new Promise((r)=>{
+    const script = document.createElement('script');
+    script.type = 'text/javascript'
+    script.src = url
+    // IE
+    if(script.readyState){
+      script.onreadystatechange = () => {
+        if(script.readyState === 'loaded' || script.readyState === 'complete'){
+          script.onreadystatechange = null
+          r()
+        }
+      }
+    } else{
+      // 其他浏览器
+      script.onload = function () {
+        r()
+      }
+    }
+    document.head.appendChild(script)
+  })
+}

src/views/aiSupervision/layerManage/resource/LayerDetails.vue

@@ -17,13 +17,23 @@
         </div>
       </div>
       <div class="middle">
-        <el-button type="primary" plain @click="dialogFormVisible = true">添加图层</el-button>
+        <el-button type="primary" plain @click="dialogFormVisible = true"
+          >添加图层</el-button
+        >
         <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
           <el-tabs v-model="activeName" type="card">
             <el-tab-pane label="基础字段" name="1">
               <el-form :model="editDataInfoForm">
-                <el-form-item label="服务类型" style="font-size: 1rem" :label-width="'120px'">
-                  <el-select style="width: 80%" v-model="editDataInfoForm.serviceType" placeholder="请选择">
+                <el-form-item
+                  label="服务类型"
+                  style="font-size: 1rem"
+                  :label-width="'120px'"
+                >
+                  <el-select
+                    style="width: 80%"
+                    v-model="editDataInfoForm.serviceType"
+                    placeholder="请选择"
+                  >
                     <el-option
                       v-for="item in serviceTypeOptions"
                       :key="item.value"
@@ -33,14 +43,38 @@
                   </el-select>
                 </el-form-item>
 
-                <el-form-item label="服务名称" prop="serviceName" style="font-size: 1rem" :label-width="'120px'">
-                  <el-input v-model.trim="editDataInfoForm.serviceName" style="width: 80%"></el-input>
+                <el-form-item
+                  label="服务名称"
+                  prop="serviceName"
+                  style="font-size: 1rem"
+                  :label-width="'120px'"
+                >
+                  <el-input
+                    v-model.trim="editDataInfoForm.serviceName"
+                    style="width: 80%"
+                  ></el-input>
                 </el-form-item>
-                <el-form-item label="服务别名" prop="serviceNameAlias" style="font-size: 1rem" :label-width="'120px'">
-                  <el-input v-model.trim="editDataInfoForm.serviceNameAlias" style="width: 80%"></el-input>
+                <el-form-item
+                  label="服务别名"
+                  prop="serviceNameAlias"
+                  style="font-size: 1rem"
+                  :label-width="'120px'"
+                >
+                  <el-input
+                    v-model.trim="editDataInfoForm.serviceNameAlias"
+                    style="width: 80%"
+                  ></el-input>
                 </el-form-item>
-                <el-form-item label="服务地址" prop="serviceUrl" style="font-size: 1rem" :label-width="'120px'">
-                  <el-input v-model.trim="editDataInfoForm.serviceUrl" style="width: 80%"></el-input>
+                <el-form-item
+                  label="服务地址"
+                  prop="serviceUrl"
+                  style="font-size: 1rem"
+                  :label-width="'120px'"
+                >
+                  <el-input
+                    v-model.trim="editDataInfoForm.serviceUrl"
+                    style="width: 80%"
+                  ></el-input>
                 </el-form-item>
                 <el-form-item
                   v-if="editDataInfoForm.serviceType === '030300'"
@@ -49,7 +83,10 @@
                   style="font-size: 1rem"
                   :label-width="'120px'"
                 >
-                  <el-input v-model="editDataInfoForm.serviceIndex" style="width: 80%"></el-input>
+                  <el-input
+                    v-model="editDataInfoForm.serviceIndex"
+                    style="width: 80%"
+                  ></el-input>
                 </el-form-item>
                 <el-form-item
                   v-show="['030300'].includes(editDataInfoForm.serviceType)"
@@ -62,10 +99,16 @@
                       type="info"
                       effect="plain"
                       class="style-button"
-                      :class="{ 'style-button-none': editDataInfoForm.relationStyleName }"
+                      :class="{
+                        'style-button-none': editDataInfoForm.relationStyleName,
+                      }"
                       @click="handleLayerStyleTypeChange"
                     >
-                      {{ editDataInfoForm.relationStyleName ? editDataInfoForm.relationStyleName : '点击选择样式' }}
+                      {{
+                        editDataInfoForm.relationStyleName
+                          ? editDataInfoForm.relationStyleName
+                          : "点击选择样式"
+                      }}
                     </el-tag>
                     <el-button
                       style="margin-left: 15px"
@@ -88,24 +131,46 @@
             </el-tab-pane>
             <el-tab-pane label="扩展字段" name="2">
               <div class="fn-btns">
-                <el-button type="primary" class="btn" @click="addRow">添加</el-button>
-                <el-button type="danger" class="btn" @click="deleteRow">删除</el-button>
+                <el-button type="primary" class="btn" @click="addRow"
+                  >添加</el-button
+                >
+                <el-button type="danger" class="btn" @click="deleteRow"
+                  >删除</el-button
+                >
               </div>
-              <el-table max-height="400px" :data="extendTable" border @selection-change="handleSelectionChange">
-                <el-table-column type="selection" width="50" align="center"></el-table-column>
+              <el-table
+                max-height="400px"
+                :data="extendTable"
+                border
+                @selection-change="handleSelectionChange"
+              >
+                <el-table-column
+                  type="selection"
+                  width="50"
+                  align="center"
+                ></el-table-column>
                 <el-table-column prop="field" label="字段名称">
                   <template slot-scope="scope">
-                    <el-input v-model="scope.row.field" :disabled="!scope.row.isEdit"></el-input>
+                    <el-input
+                      v-model="scope.row.field"
+                      :disabled="!scope.row.isEdit"
+                    ></el-input>
                   </template>
                 </el-table-column>
                 <el-table-column prop="alias" label="别名">
                   <template slot-scope="scope">
-                    <el-input v-model="scope.row.alias" :disabled="!scope.row.isEdit"></el-input>
+                    <el-input
+                      v-model="scope.row.alias"
+                      :disabled="!scope.row.isEdit"
+                    ></el-input>
                   </template>
                 </el-table-column>
                 <el-table-column prop="value" label="字段值">
                   <template slot-scope="scope">
-                    <el-input v-model="scope.row.value" :disabled="!scope.row.isEdit"></el-input>
+                    <el-input
+                      v-model="scope.row.value"
+                      :disabled="!scope.row.isEdit"
+                    ></el-input>
                   </template>
                 </el-table-column>
                 <el-table-column label="操作" width="200">
@@ -149,23 +214,43 @@
             <el-tab-pane label="字段配置" v-if="showFieldExtend()" name="3">
               <div class="field-box">
                 <div class="field-filter">
-                  <el-input class="keyword-input" placeholder="请输入搜索字段" v-model="fieldValue" clearable>
+                  <el-input
+                    class="keyword-input"
+                    placeholder="请输入搜索字段"
+                    v-model="fieldValue"
+                    clearable
+                  >
                   </el-input>
                   <el-button class="search-btn">搜索</el-button>
                 </div>
               </div>
               <el-table max-height="400px" :data="fieldsTable" border>
-                <el-table-column type="index" width="50" align="center"></el-table-column>
-                <el-table-column prop="field" label="字段名称"> </el-table-column>
+                <el-table-column
+                  type="index"
+                  width="50"
+                  align="center"
+                ></el-table-column>
+                <el-table-column prop="field" label="字段名称">
+                </el-table-column>
                 <el-table-column prop="fieldName" label="字段别名">
                   <template slot-scope="scope">
                     <el-input v-model="scope.row.fieldName"></el-input>
                   </template>
                 </el-table-column>
-                <el-table-column prop="fieldType" label="字段类型"> </el-table-column>
-                <el-table-column prop="isShow" label="支持查询" width="80" align="center">
+                <el-table-column prop="fieldType" label="字段类型">
+                </el-table-column>
+                <el-table-column
+                  prop="isShow"
+                  label="支持查询"
+                  width="80"
+                  align="center"
+                >
                   <template slot-scope="scope">
-                    <el-checkbox v-model="scope.row.isShow" :true-label="1" :false-label="0"></el-checkbox>
+                    <el-checkbox
+                      v-model="scope.row.isShow"
+                      :true-label="1"
+                      :false-label="0"
+                    ></el-checkbox>
                   </template>
                 </el-table-column>
               </el-table>
@@ -174,11 +259,19 @@
 
           <div slot="footer" class="dialog-footer">
             <el-button @click="dialogFormVisible = false">取 消</el-button>
-            <el-button type="primary" @click="saveOrUpdateLayer">确 定</el-button>
+            <el-button type="primary" @click="saveOrUpdateLayer"
+              >确 定</el-button
+            >
           </div>
         </el-dialog>
         <div class="keyword-filter">
-          <el-input class="keyword-input" placeholder="请输入内容" v-model="keyword" clearable> </el-input>
+          <el-input
+            class="keyword-input"
+            placeholder="请输入内容"
+            v-model="keyword"
+            clearable
+          >
+          </el-input>
           <el-button class="search-btn">搜索</el-button>
         </div>
       </div>
@@ -186,19 +279,33 @@
         <el-table :data="tableData" stripe style="width: 100%">
           <el-table-column
             type="index"
-            :index="(index) => index + (pageOptions.pageNum - 1) * pageOptions.pageSize + 1"
+            :index="
+              (index) =>
+                index + (pageOptions.pageNum - 1) * pageOptions.pageSize + 1
+            "
             label="序号"
             width="50"
             header-align="center"
           ></el-table-column>
-          <el-table-column prop="id" label="图层资源目录编号" width="350"> </el-table-column>
-          <el-table-column prop="serviceName" label="图层资源目录名称"> </el-table-column>
+          <el-table-column prop="id" label="图层资源目录编号" width="350">
+          </el-table-column>
+          <el-table-column prop="serviceName" label="图层资源目录名称">
+          </el-table-column>
           <el-table-column prop="pubDate" label="创建时间"> </el-table-column>
           <el-table-column prop="createUser" label="创建人"> </el-table-column>
           <el-table-column label="操作">
             <template slot-scope="scope">
-              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
+              <el-button
+                size="mini"
+                @click="handleEdit(scope.$index, scope.row)"
+                >编辑</el-button
+              >
+              <el-button
+                size="mini"
+                type="danger"
+                @click="handleDelete(scope.row)"
+                >删除</el-button
+              >
             </template>
           </el-table-column>
         </el-table>
@@ -217,74 +324,74 @@
 </template>
 
 <script>
-import debounce from 'lodash/debounce';
-import styleListDialogVue from './styleListDialog.vue';
+import debounce from "lodash/debounce";
+import styleListDialogVue from "./styleListDialog.vue";
 import {
   saveOrUpdateLayerApi,
   getLayerListApi,
   deleteLayerApi,
   getDirectoryByIdApi,
-  queryServiceInfoApi
-} from '@/api/aiSupervision/layerConfigApi.js';
+  queryServiceInfoApi,
+} from "@/api/aiSupervision/layerConfigApi.js";
 export default {
   components: {
-    styleListDialogVue
+    styleListDialogVue,
   },
   data() {
     return {
       tableData: [],
       editDataInfoForm: {
-        id: '',
-        serviceType: '', //服务类型,wms/wmts/wfs/3d tiles/terrain
-        serviceUrl: '', //服务地址
-        serviceName: '', //服务名称
-        serviceNameAlias: '', //服务别名
-        serviceIndex: '', //服务索引
-        dirId: '',
-        dirNames: '',
-        tileSize: '256',
-        relationStyleId: '',
-        relationStyleName: ''
+        id: "",
+        serviceType: "", //服务类型,wms/wmts/wfs/3d tiles/terrain
+        serviceUrl: "", //服务地址
+        serviceName: "", //服务名称
+        serviceNameAlias: "", //服务别名
+        serviceIndex: "", //服务索引
+        dirId: "",
+        dirNames: "",
+        tileSize: "256",
+        relationStyleId: "",
+        relationStyleName: "",
       },
       directoryInfo: null, // 目录信息
-      dialogTitle: '添加图层',
+      dialogTitle: "添加图层",
       serviceTypeOptions: [
         {
-          value: '021102',
-          label: 'ArcGISRest图层'
+          value: "021102",
+          label: "ArcGISRest图层",
         },
         {
-          value: '081100',
-          label: 'SuperMapRest图层'
+          value: "081100",
+          label: "SuperMapRest图层",
         },
         {
-          value: '030300',
-          label: 'WFS200'
+          value: "030300",
+          label: "WFS200",
         },
         {
-          value: '080100',
-          label: 'S3M图层'
+          value: "080100",
+          label: "S3M图层",
         },
         {
-          value: '',
-          label: 'XYZ底图'
-        }
+          value: "",
+          label: "XYZ底图",
+        },
       ],
       pageOptions: {
         pageNum: 1,
         pageSize: 8,
-        total: 0
+        total: 0,
       },
       dialogFormVisible: false, //是否显示对话框
-      keyword: '',
+      keyword: "",
       styleDialogVisible: false, //是否显示样式选择对话框
-      activeName: '1',
+      activeName: "1",
       extendTable: [],
       multipleSelection: [],
       activeFields: [],
       fieldsTable: [],
       queryServiceUrlMap: new Map(),
-      fieldValue: ''
+      fieldValue: "",
     };
   },
   watch: {
@@ -299,7 +406,7 @@ export default {
         this.initData();
       }
     },
-    'editDataInfoForm.serviceUrl'(val) {
+    "editDataInfoForm.serviceUrl"(val) {
       if (val) {
         if (!this.queryServiceUrlMap.has(val)) {
           this.queryLayerByUrl(val);
@@ -309,7 +416,7 @@ export default {
       } else {
         this.fieldsTable = [];
       }
-    }
+    },
   },
   created() {
     // 使用 lodash 的 debounce 函数创建防抖版本
@@ -323,10 +430,14 @@ export default {
   },
   methods: {
     searchField() {
-      if (this.fieldValue === '') {
-        this.fieldsTable = this.queryServiceUrlMap.get(this.editDataInfoForm.serviceUrl);
+      if (this.fieldValue === "") {
+        this.fieldsTable = this.queryServiceUrlMap.get(
+          this.editDataInfoForm.serviceUrl
+        );
       } else {
-        this.fieldsTable = this.fieldsTable.filter((item) => item.field.includes(this.fieldValue));
+        this.fieldsTable = this.fieldsTable.filter((item) =>
+          item.field.includes(this.fieldValue)
+        );
       }
     },
     goBack() {
@@ -343,30 +454,34 @@ export default {
       this.editDataInfoForm.relationStyleName = row.relationStyleName;
       this.extendTable = (row.extendData && JSON.parse(row.extendData)) || [];
       this.activeFields = row?.fields?.map((item) => item.field) || [];
-      this.dialogTitle = '编辑图层';
+      this.dialogTitle = "编辑图层";
       this.dialogFormVisible = true;
     },
 
     handleDelete(row) {
-      this.$confirm('删除图层将同时删除该图层资源以及关联的图层数据，删除后将不可恢复，是否继续删除？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
+      this.$confirm(
+        "删除图层将同时删除该图层资源以及关联的图层数据，删除后将不可恢复，是否继续删除？",
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
         .then(async () => {
           const res = await deleteLayerApi(row.id);
           if (res.success) {
             this.getLayerList();
             this.$message({
-              type: 'success',
-              message: '删除成功!'
+              type: "success",
+              message: "删除成功!",
             });
           }
         })
         .catch(() => {
           this.$message({
-            type: 'info',
-            message: '已取消删除'
+            type: "info",
+            message: "已取消删除",
           });
         });
     },
@@ -377,12 +492,12 @@ export default {
         pageSize: this.pageOptions.pageSize,
         data: {
           serviceName: this.keyword,
-          dirId: this.directoryInfo.id
+          dirId: this.directoryInfo.id,
         },
         params: {
-          orderBy: 'pub_date',
-          sortBy: 'asc'
-        }
+          orderBy: "pub_date",
+          sortBy: "asc",
+        },
       };
       getLayerListApi(params).then((res) => {
         this.pageOptions.total = res.total;
@@ -393,17 +508,21 @@ export default {
       const reg = /^(\w|[\u4e00-\u9fa5]){3,30}$/g;
       if (!reg.test(this.editDataInfoForm.serviceName)) {
         this.$message({
-          type: 'info',
-          message: '格式有误，目录名称仅支持中文、数字、字母、下划线，最大长度不超过30'
+          type: "info",
+          message:
+            "格式有误，目录名称仅支持中文、数字、字母、下划线，最大长度不超过30",
         });
         return;
       }
       const params = {
         ...this.editDataInfoForm,
         extendData: JSON.stringify(this.extendTable),
-        fields: this.fieldsTable
+        fields: this.fieldsTable,
       };
-      this.queryServiceUrlMap.set(this.editDataInfoForm.serviceUrl, this.fieldsTable);
+      this.queryServiceUrlMap.set(
+        this.editDataInfoForm.serviceUrl,
+        this.fieldsTable
+      );
       await saveOrUpdateLayerApi(params);
       this.getLayerList();
       this.dialogFormVisible = false;
@@ -418,55 +537,57 @@ export default {
       this.editDataInfoForm.relationStyleName = val.name;
     },
     initData() {
-      this.editDataInfoForm.id = '';
-      this.editDataInfoForm.serviceUrl = '';
-      this.editDataInfoForm.serviceName = '';
-      this.editDataInfoForm.serviceNameAlias = '';
-      this.editDataInfoForm.serviceIndex = '';
-      this.editDataInfoForm.relationStyleId = '';
-      this.editDataInfoForm.relationStyleName = '';
+      this.editDataInfoForm.id = "";
+      this.editDataInfoForm.serviceUrl = "";
+      this.editDataInfoForm.serviceName = "";
+      this.editDataInfoForm.serviceNameAlias = "";
+      this.editDataInfoForm.serviceIndex = "";
+      this.editDataInfoForm.relationStyleId = "";
+      this.editDataInfoForm.relationStyleName = "";
 
       this.editDataInfoForm.serviceType = this.serviceTypeOptions[0].value;
       this.editDataInfoForm.dirId = this.directoryInfo.id;
       this.editDataInfoForm.dirNames = this.directoryInfo.name;
-      this.editDataInfoForm.tileSize = '256';
-      this.dialogTitle = '添加图层';
+      this.editDataInfoForm.tileSize = "256";
+      this.dialogTitle = "添加图层";
     },
     addRow() {
       const editRow = this.extendTable.find((item) => item.isEdit);
       if (editRow) {
         this.$message({
-          type: 'info',
-          message: '请先保存当前编辑行'
+          type: "info",
+          message: "请先保存当前编辑行",
         });
         return;
       }
       this.extendTable.push({
-        id: '',
-        field: '',
-        alias: '',
-        value: '',
-        isEdit: true
+        id: "",
+        field: "",
+        alias: "",
+        value: "",
+        isEdit: true,
       });
     },
     deleteRow(index) {
       this.$messageBox
-        .confirm('是否删除该行数据?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
+        .confirm("是否删除该行数据?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
         })
         .then(() => {
           if (index !== undefined) {
             this.extendTable.splice(index, 1);
           } else {
-            this.extendTable = this.extendTable.filter((item) => !this.multipleSelection.includes(item));
+            this.extendTable = this.extendTable.filter(
+              (item) => !this.multipleSelection.includes(item)
+            );
           }
         })
         .catch(() => {
           this.$message({
-            type: 'info',
-            message: '已取消删除'
+            type: "info",
+            message: "已取消删除",
           });
         });
     },
@@ -486,11 +607,13 @@ export default {
       }
       // 表格名字校验不重复
       const name = this.extendTable[index].field;
-      const isRepeat = this.extendTable.some((item, i) => item.field === name && i !== index);
+      const isRepeat = this.extendTable.some(
+        (item, i) => item.field === name && i !== index
+      );
       if (isRepeat) {
         this.$message({
-          type: 'info',
-          message: '字段名称重复，请重新输入'
+          type: "info",
+          message: "字段名称重复，请重新输入",
         });
         return;
       }
@@ -500,7 +623,9 @@ export default {
       this.multipleSelection = val;
     },
     showFieldExtend() {
-      return ['021102', '081100', '030300'].includes(this.editDataInfoForm.serviceType);
+      return ["021102", "081100", "030300"].includes(
+        this.editDataInfoForm.serviceType
+      );
     },
     queryLayerByUrl(url) {
       queryServiceInfoApi(url, {
@@ -508,7 +633,7 @@ export default {
         url: url,
         index: this.editDataInfoForm.serviceIndex,
         name: this.editDataInfoForm.serviceName,
-        alias: this.editDataInfoForm.serviceNameAlias
+        alias: this.editDataInfoForm.serviceNameAlias,
       }).then((res) => {
         this.fieldsTable =
           res?.fields?.map((item) => {
@@ -516,13 +641,13 @@ export default {
               field: item.name,
               fieldName: item.alias,
               fieldType: item.type,
-              isShow: this.activeFields.includes(item.name) ? 1 : 0
+              isShow: this.activeFields.includes(item.name) ? 1 : 0,
             };
           }) || [];
         this.queryServiceUrlMap.set(url, this.fieldsTable);
       });
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -622,7 +747,7 @@ header {
 .el-dialog {
   .field-box {
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
     .field-filter {
       width: 400px;
       margin-bottom: 16px;

src/views/dike/runManage/enginerring/inspectionItems/index.vue

@@ -5,9 +5,14 @@ import {
   postDFInspectionProjectList,
   deleteDFInspectionProject,
 } from "@/api/management";
+
+import TopBackTitle from "@/components/TopBackTitle/index.vue";
+
 export default {
   name: "InspectionItems",
-  components: {},
+  components: {
+    TopBackTitle,
+  },
   data() {
     return {
       searchInput: "",
@@ -135,7 +140,7 @@ export default {
 
 <template>
   <div class="slider-right">
-    <div class="top-title">{{ $router.currentRoute.meta.title }}</div>
+    <TopBackTitle :showBackBtn="false" />
     <div class="table-box">
       <div class="top-search">
         <span>巡视检查名称：</span>
@@ -167,7 +172,7 @@ export default {
           >添加</el-button
         >
       </div>
-      <el-table height="625" :data="tableData" border>
+      <el-table :data="tableData" border>
         <el-table-column type="index" align="center" label="序号" width="100">
         </el-table-column>
         <el-table-column prop="name" align="center" label="巡视检查名称">
@@ -252,9 +257,10 @@ export default {
 
 .table-box {
   width: 100%;
-  height: calc(100% - 50px);
+  // height: calc(100% - 50px);
   margin-top: 24px;
   padding: 16px;
+  padding-bottom: 60px;
   background-color: white;
 
   .top-search {

src/views/dike/runManage/enginerring/inspectionItems/inspectionItemDetails.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="slider-right">
-    <div class="top-title">{{ $router.currentRoute.meta.title }}</div>
+    <!-- <div class="top-title">{{ $router.currentRoute.meta.title }}</div> -->
+    <TopBackTitle></TopBackTitle>
     <div class="table-box">
       <div class="top-box">
         <span>巡视检查名称：</span>
@@ -197,8 +198,12 @@ import {
   getCheckingDictTree,
   getInspectionProjectDetails,
 } from "@/api/dike";
+import TopBackTitle from "@/components/TopBackTitle/index.vue";
 
 export default {
+  components: {
+    TopBackTitle,
+  },
   data() {
     return {
       xcTreeData: [],

src/views/dike/runManage/enginerring/inspectionPlan/components/planDetail.vue

@@ -0,0 +1,291 @@
+<template>
+  <div class="route-detail-page">
+    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
+      <div class="form-row-title">堤防选择</div>
+      <div class="flex items-start">
+        <el-form-item label="选择堤防" prop="dikeName">
+          <el-input
+            class="w-240"
+            size="small"
+            v-model="formData.dikeName"
+            placeholder="请输入名称"
+            maxlength="30"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="堤防类型" prop="dikeType">
+          <el-input
+            class="w-240"
+            size="small"
+            v-model="formData.dikeType"
+            :disabled="true"
+            placeholder=""
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="堤防巡查责任人" prop="userName">
+          <el-input
+            class="w-240"
+            size="small"
+            v-model="formData.userName"
+            :disabled="true"
+            placeholder=""
+          ></el-input>
+        </el-form-item>
+      </div>
+      <div class="form-row-title">巡查计划设置</div>
+      <div class="flex items-start">
+        <el-form-item label="巡查计划名称" prop="planName">
+          <el-input
+            class="w-240"
+            size="small"
+            v-model="formData.planName"
+            placeholder="请输入名称"
+            maxlength="50"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="巡查计划名类型" prop="planType">
+          <el-radio v-model="formData.planType" label="1">年度计划</el-radio>
+          <el-radio v-model="formData.planType" label="2">月度计划</el-radio>
+        </el-form-item>
+        <el-form-item label="巡查提醒" prop="remind">
+          <div class="">
+            <el-select
+              size="small"
+              class="w-100"
+              v-model="formData.remindType"
+              placeholder="请选择"
+              @change="handleChangeRemindType"
+            >
+              <el-option label="每月提醒" value="1"> </el-option>
+              <el-option label="每周提醒" value="2"> </el-option>
+              <el-option label="每日提醒" value="3"> </el-option>
+            </el-select>
+            <el-select
+              v-if="formData.remindType == '1'"
+              size="small"
+              v-model="formData.remindTime"
+              placeholder="请选择"
+            >
+              <el-option v-for="item in 31" :label="`${item}号`" :value="item">
+              </el-option>
+            </el-select>
+            <el-checkbox-group
+              v-else-if="formData.remindType == '2'"
+              size="small"
+              v-model="formData.remindDay"
+            >
+              <el-checkbox-button label="1">周一</el-checkbox-button>
+              <el-checkbox-button label="2">周二</el-checkbox-button>
+              <el-checkbox-button label="3">周三</el-checkbox-button>
+              <el-checkbox-button label="4">周四</el-checkbox-button>
+              <el-checkbox-button label="5">周五</el-checkbox-button>
+              <el-checkbox-button label="6">周六</el-checkbox-button>
+              <el-checkbox-button label="7">周日</el-checkbox-button>
+            </el-checkbox-group>
+            <el-time-picker
+              v-else-if="formData.remindType == '3'"
+              size="small"
+              v-model="formData.remindTime"
+              placeholder="选择时间"
+            >
+            </el-time-picker>
+          </div>
+        </el-form-item>
+      </div>
+      <div class="flex items-start">
+        <el-form-item label="附件上传" prop="fileList">
+          <el-upload
+            class=""
+            action="#"
+            accept=".docx,.doc,.pdf"
+            :limit="5"
+            :file-list="formData.fileList"
+          >
+            <el-button size="small" type="primary">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">
+              文件支持docx、doc、pdf，文件大小100M以内，文件数量不能超过5份
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="巡查频率" prop="frequency">
+          <el-input
+            class="w-100"
+            type="number"
+            size="small"
+            v-model="formData.frequency"
+            placeholder="请输入"
+            :max="999"
+            :min="0"
+          ></el-input>
+          <span class="ml-4">次/月</span>
+        </el-form-item>
+      </div>
+      <div
+        class="plan-list-item"
+        v-for="(item, index) in formData.planList"
+        :key="index"
+      >
+        <el-popconfirm
+          v-if="formData.planList.length > 1"
+          title="确定删除？"
+          @confirm="handleDelPlanItem(index)"
+        >
+          <img
+            slot="reference"
+            class="del-btn"
+            src="@/assets/common/icon-delete.png"
+          />
+        </el-popconfirm>
+        <div class="flex items-start">
+          <el-form-item label="计划周期(起止)" prop="planDateTimeArr">
+            <el-date-picker
+              size="small"
+              v-model="item.planDateTimeArr"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="巡查人员" prop="xcUsers">
+            <el-select size="small" v-model="item.xcUsers">
+              <!-- <el-option label="全部" value=""> </el-option> -->
+            </el-select>
+          </el-form-item>
+        </div>
+        <el-form-item label="巡查范围" prop="scScope">
+          <el-input
+            size="small"
+            type="textarea"
+            :rows="3"
+            v-model="item.scScope"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="巡查路线(推荐)" prop="scScope">
+          <el-input
+            size="small"
+            type="textarea"
+            :rows="3"
+            v-model="item.scScope"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="巡查重点检查部位和内容" prop="scScope">
+          <el-input
+            size="small"
+            type="textarea"
+            :rows="3"
+            v-model="item.scScope"
+          ></el-input>
+        </el-form-item>
+      </div>
+      <div
+        class="flex justify-center !mt-16"
+        v-if="formData.planList.length <= 50"
+      >
+        <el-button
+          class="w-240"
+          type="primary"
+          @click="handleAddNewPlan"
+          icon="el-icon-plus"
+          >添加新计划</el-button
+        >
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      formData: {
+        dikeName: "",
+        dikeCode: "",
+        dikeType: "",
+        operator: "",
+        planName: "",
+        planType: "",
+        remindType: "1",
+        remindTime: "",
+        remindDay: [],
+        fileList: [],
+        planList: [
+          {
+            planDateTimeArr: [],
+            xcUsers: [],
+            scScope: "",
+          },
+        ],
+      },
+      rules: {
+        dikeName: [
+          { required: true, message: "请选择堤防", trigger: "change" },
+        ],
+      },
+    };
+  },
+  created() {},
+  methods: {
+    handleChangeRemindType() {
+      this.formData.remindTime = "";
+      this.formData.remindDay = [];
+    },
+    handleAddNewPlan() {
+      this.formData.planList.push({
+        planDateTimeArr: [],
+        xcUsers: [],
+        scScope: "",
+      });
+    },
+    handleDelPlanItem(index) {
+      this.formData.planList.splice(index, 1);
+    },
+    submit() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          // submit form
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.route-detail-page {
+  width: 100%;
+  max-height: 800px;
+  overflow: auto;
+  .form-row-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    border-left: 4px solid #36b29e;
+    padding-left: 8px;
+  }
+  .w-100 {
+    width: 100px !important;
+  }
+  .w-240 {
+    width: 240px !important;
+  }
+
+  .plan-list-item {
+    position: relative;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    padding: 16px;
+    margin-top: 16px;
+  }
+
+  .del-btn {
+    position: absolute;
+    cursor: pointer;
+    z-index: 1;
+    width: 18px;
+    top: 8px;
+    right: 8px;
+    font-size: 18px;
+  }
+}
+</style>

src/views/dike/runManage/enginerring/inspectionPlan/index.vue

@@ -351,7 +351,7 @@ export default {
           >添加</el-button
         >
       </div>
-      <el-table height="625" :data="tableData" border>
+      <el-table :data="tableData" border>
         <el-table-column type="index" align="center" label="序号" width="100" />
         <el-table-column prop="name" align="center" label="计划名称" />
         <el-table-column align="center" label="巡查类型">
@@ -627,9 +627,10 @@ export default {
 }
 
 .table-box {
-  height: calc(100% - 50px - 24px);
+  // height: calc(100% - 50px - 24px);
   margin-top: 24px;
   padding: 16px;
+  padding-bottom: 60px;
   background-color: white;
 
   .top-search {

src/views/dike/runManage/enginerring/inspectionRecords/index.vue

@@ -104,7 +104,7 @@ export default {
         >
         <el-button @click="resetSearch()">重置</el-button>
       </div>
-      <el-table class="table" height="625" :data="tableData" border>
+      <el-table class="table" :data="tableData" border>
         <el-table-column type="index" align="center" label="序号" width="100" />
         <el-table-column prop="name" align="center" label="巡检记录" />
         <el-table-column align="center" label="有无异常">
@@ -165,9 +165,10 @@ export default {
 }
 
 .table-box {
-  height: calc(100% - 24px);
+  // height: calc(100% - 24px);
   margin-top: 24px;
   padding: 16px;
+  padding-bottom: 60px;
   background-color: white;
 
   .top-search {

src/views/dike/runManage/enginerring/inspectionRouteManage/components/RouteDetail.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="route-detail-page">
+    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
+      <div class="form-row-title">堤防选择</div>
+      <div class="flex items-start">
+        <el-form-item label="选择堤防" prop="dikeName">
+          <el-input
+            class="w-240"
+            size="small"
+            v-model="formData.dikeName"
+            placeholder="请输入名称"
+            maxlength="30"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="堤防类型" prop="dikeType">
+          <el-input
+            class="w-240"
+            size="small"
+            v-model="formData.dikeType"
+            :disabled="true"
+            placeholder=""
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="堤防巡查责任人" prop="userName">
+          <el-input
+            class="w-240"
+            size="small"
+            v-model="formData.userName"
+            :disabled="true"
+            placeholder=""
+          ></el-input>
+        </el-form-item>
+      </div>
+      <div class="form-row-title">巡查计划设置</div>
+      <div class="flex items-start">
+        <el-form-item label="巡查计划名称" prop="planName">
+          <el-input
+            class="w-240"
+            size="small"
+            v-model="formData.planName"
+            placeholder="请输入名称"
+            maxlength="50"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="巡查计划名类型" prop="planType">
+          <el-radio v-model="formData.planType" label="1">年度计划</el-radio>
+          <el-radio v-model="formData.planType" label="2">月度计划</el-radio>
+        </el-form-item>
+        <el-form-item label="巡查提醒" prop="remind">
+          <div class="">
+            <el-select
+              size="small"
+              class="w-100"
+              v-model="formData.remindType"
+              placeholder="请选择"
+              @change="handleChangeRemindType"
+            >
+              <el-option label="每月提醒" value="1"> </el-option>
+              <el-option label="每周提醒" value="2"> </el-option>
+              <el-option label="每日提醒" value="3"> </el-option>
+            </el-select>
+            <el-select
+              v-if="formData.remindType == '1'"
+              size="small"
+              v-model="formData.remindTime"
+              placeholder="请选择"
+            >
+              <el-option v-for="item in 31" :label="`${item}号`" :value="item">
+              </el-option>
+            </el-select>
+            <el-checkbox-group
+              v-else-if="formData.remindType == '2'"
+              size="small"
+              v-model="formData.remindDay"
+            >
+              <el-checkbox-button label="1">周一</el-checkbox-button>
+              <el-checkbox-button label="2">周二</el-checkbox-button>
+              <el-checkbox-button label="3">周三</el-checkbox-button>
+              <el-checkbox-button label="4">周四</el-checkbox-button>
+              <el-checkbox-button label="5">周五</el-checkbox-button>
+              <el-checkbox-button label="6">周六</el-checkbox-button>
+              <el-checkbox-button label="7">周日</el-checkbox-button>
+            </el-checkbox-group>
+            <el-time-picker
+              v-else-if="formData.remindType == '3'"
+              size="small"
+              v-model="formData.remindTime"
+              placeholder="选择时间"
+            >
+            </el-time-picker>
+          </div>
+        </el-form-item>
+      </div>
+      <div class="map-box">
+        <div id="routeCesiumContainer"></div>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+let viewer = undefined;
+
+export default {
+  data() {
+    return {
+      formData: {
+        dikeName: "",
+        dikeCode: "",
+        dikeType: "",
+        operator: "",
+        planName: "",
+        planType: "",
+        remindType: "1",
+        remindTime: "",
+        remindDay: [],
+      },
+      rules: {
+        dikeName: [
+          { required: true, message: "请选择堤防", trigger: "change" },
+        ],
+      },
+    };
+  },
+  created() {},
+  mounted() {
+    this.initMap();
+  },
+  methods: {
+    initMap() {
+      viewer = new sycim.Viewer("routeCesiumContainer");
+      window.viewer = viewer;
+      let baseLayer = sycim.ImageryLayerFactory.createImageryLayer(
+        sycim.ImageryType.ARCGIS,
+        {
+          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+        }
+      );
+      viewer.addBaseLayer(baseLayer);
+    },
+    handleChangeRemindType() {
+      this.formData.remindTime = "";
+      this.formData.remindDay = [];
+    },
+    handleAddNewPlan() {
+      this.formData.planList.push({
+        planDateTimeArr: [],
+        xcUsers: [],
+        scScope: "",
+      });
+    },
+    handleDelPlanItem(index) {
+      this.formData.planList.splice(index, 1);
+    },
+    submit() {
+      return new Promise((r, j) => {
+        this.$refs.formRef.validate((valid) => {
+          if (valid) {
+            // submit form
+            r();
+          } else {
+            j();
+          }
+        });
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.route-detail-page {
+  width: 100%;
+  max-height: 800px;
+  overflow: auto;
+  .form-row-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    border-left: 4px solid #36b29e;
+    padding-left: 8px;
+  }
+  .w-100 {
+    width: 100px !important;
+  }
+  .w-240 {
+    width: 240px !important;
+  }
+
+  .plan-list-item {
+    position: relative;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    padding: 16px;
+    margin-top: 16px;
+  }
+
+  .del-btn {
+    position: absolute;
+    cursor: pointer;
+    z-index: 1;
+    width: 18px;
+    top: 8px;
+    right: 8px;
+    font-size: 18px;
+  }
+
+  .map-box {
+    width: 100%;
+    height: 500px;
+    margin-top: 20px;
+    #routeCesiumContainer {
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+  }
+}
+</style>

src/views/dike/runManage/enginerring/inspectionRouteManage/index.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="slider-right inspection-route-manage">
+    <TopBackTitle :showBackBtn="false"></TopBackTitle>
+    <div class="slider-right-body">
+      <div class="top-search">
+        <span class="">行政区划</span>
+        <el-cascader
+          class="ml-10 w-202"
+          :options="areasOptions"
+          @change="handleChangeQuery"
+          v-model="paramsData.adcd"
+          :props="areasOptionProps"
+          placeholder="请选择行政区划"
+          clearable
+          size="small"
+        >
+        </el-cascader>
+        <span class="ml-10">堤防名称</span>
+        <el-input
+          class="w-202 ml-10"
+          v-model="paramsData.dikeName"
+          @change="handleChangeQuery"
+          placeholder="请输入名称"
+        />
+        <span class="ml-10">堤防类型</span>
+        <el-select
+          size=""
+          class="search-input ml-10"
+          @change="handleChangeQuery"
+          v-model="paramsData.dikeType"
+          filterable
+          placeholder="请选择"
+        >
+          <el-option label="全部" value=""> </el-option>
+          <el-option
+            v-for="item in projectTypeOptions"
+            :key="item.dictValue"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          >
+          </el-option>
+        </el-select>
+        <span class="ml-10">巡查路线名称</span>
+        <el-input
+          class="w-202 ml-10"
+          v-model="paramsData.xcName"
+          @change="handleChangeQuery"
+          placeholder="请输入名称"
+        />
+        <span class="ml-10">巡查类型</span>
+        <el-select
+          size=""
+          class="search-input ml-10"
+          @change="handleChangeQuery"
+          v-model="paramsData.xcType"
+          filterable
+          placeholder="请选择"
+        >
+          <el-option label="全部" value=""> </el-option>
+          <el-option
+            v-for="item in projectTypeOptions"
+            :key="item.dictValue"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          >
+          </el-option>
+        </el-select>
+        <span class="ml-10">巡查路线负责人类型</span>
+        <el-select
+          size=""
+          class="search-input ml-10"
+          @change="handleChangeQuery"
+          v-model="paramsData.dikeType"
+          filterable
+          placeholder="请选择"
+        >
+          <el-option label="全部" value=""> </el-option>
+          <el-option
+            v-for="item in projectTypeOptions"
+            :key="item.dictValue"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          >
+          </el-option>
+        </el-select>
+        <el-button
+          class="search-btn myml-12"
+          type="success"
+          @click="handleChangeQuery"
+          >查询</el-button
+        >
+        <el-button @click="handleResetQuery">重置</el-button>
+      </div>
+      <el-table class="table mt-12" :data="tableData" border>
+        <el-table-column type="index" align="center" label="序号" width="100" />
+        <el-table-column prop="name" align="center" label="巡检记录" />
+        <el-table-column align="center" label="有无异常"> </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>
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" 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="(e) => handlePageSizeChange(e)"
+        @current-change="(e) => handleCurrentPageChange(e)"
+      >
+      </el-pagination>
+    </div>
+
+    <el-dialog
+      title="新增/编辑计划"
+      :visible.sync="showDialog"
+      width="1280px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <RouteDetail ref="formRef"></RouteDetail>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handleSubmit">确 定</el-button>
+        <el-button @click="handleCancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import TopBackTitle from "@/components/TopBackTitle/index.vue";
+import { paginationMixins } from "@/mixins/commonPagination.js";
+import RouteDetail from "./components/RouteDetail.vue";
+
+export default {
+  components: {
+    TopBackTitle,
+    RouteDetail,
+  },
+  mixins: [paginationMixins],
+  data() {
+    return {
+      showDialog: true,
+      areasOptionProps: {
+        emitPath: false,
+        checkStrictly: true, //选择任意一级
+      },
+      searchInput: "",
+      areasOptions: [],
+      projectTypeOptions: [],
+      paramsData: {
+        adcd: "",
+        dikeName: "",
+        dikeType: "",
+        xcName: "",
+        xcType: "",
+      },
+      tableData: [],
+    };
+  },
+  created() {
+    this.getDicts("embankment_type").then((response) => {
+      this.projectTypeOptions = response.data;
+    });
+  },
+  mounted() {
+    this.getTableData();
+  },
+  methods: {
+    getTableData() {
+      console.log("getTableData 模拟请求........");
+    },
+    handleChangeQuery() {
+      this.getTableData();
+    },
+    handleResetQuery() {},
+    handleSubmit() {
+      this.$refs.formRef.submit().then(() => {
+        this.showDialog = false;
+      });
+    },
+    handleCancel() {
+      this.showDialog = false;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.inspection-route-manage {
+  .myml-12 {
+    margin-left: 12px !important;
+  }
+}
+</style>

src/views/dike/runManage/enginerring/patrolManage/index.vue

@@ -28,7 +28,7 @@
         >
         <el-button @click="resetSearch()">重置</el-button>
       </div>
-      <el-table class="mt-16" height="625" :data="tableData" border>
+      <el-table class="mt-16" :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="dikeCode" align="center" label="堤防代码" />
@@ -392,9 +392,10 @@ export default {
 
   .table-box {
     width: 100%;
-    min-height: calc(100vh - 56px - 64px);
+    // min-height: calc(100vh - 56px - 64px);
     margin-top: 24px;
     padding: 16px;
+    padding-bottom: 60px;
     background-color: white;
 
     .top-search {

src/views/dike/runManage/maintenance/maintenanceManage/index.vue

@@ -32,7 +32,7 @@
         >
         <el-button @click="resetSearch()">重置</el-button>
       </div>
-      <el-table class="mt-16" height="625" :data="tableData" border>
+      <el-table class="mt-16" :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="dikeCode" align="center" label="堤防代码" />
@@ -211,9 +211,10 @@ export default {
 
   .table-box {
     width: 100%;
-    min-height: calc(100vh - 56px - 64px);
+    // min-height: calc(100vh - 56px - 64px);
     margin-top: 24px;
     padding: 16px;
+    padding-bottom: 60px;
     background-color: white;
 
     .top-search {

src/views/dike/runManage/maintenance/maintenancePlan/index.vue

@@ -264,11 +264,13 @@ export default {
     },
     handleChangeDike(value) {
       let res = this.embankmentList.find((v) => v.dikeCode === value);
+      console.log("res >>>>>  ", res);
       this.baseInfoDialog.id = res?.id || "";
       this.baseInfoDialog.code = this.ruleForm.dikeCode;
     },
     // 打开堤防详情
     handleOpenDetails() {
+      console.log("this.baseInfoDialog >>>>>  ", this.baseInfoDialog);
       if (this.baseInfoDialog.id) {
         this.baseInfoDialog.show = true;
       } else {
@@ -317,7 +319,7 @@ export default {
         >
       </div>
 
-      <el-table class="table" :height="tableHeight" :data="tableData" border>
+      <el-table class="table" :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="dikeName" align="center" label="堤防名称" />
@@ -567,9 +569,10 @@ export default {
 }
 
 .table-box {
-  height: calc(100% - 16px);
+  // height: calc(100% - 16px);
   margin-top: 24px;
   padding: 16px;
+  padding-bottom: 60px;
   background-color: white;
 
   .top-search {

src/views/dike/runManage/maintenance/maintenanceRecords/index.vue

@@ -433,7 +433,7 @@ export default {
           >添加</el-button
         >
       </div>
-      <el-table class="table" :height="tableHeight" :data="tableData" border>
+      <el-table class="table" :data="tableData" border>
         <el-table-column type="index" align="center" label="序号" width="100" />
         <el-table-column prop="name" align="center" label="维养计划名称" />
         <el-table-column prop="before" align="center" label="维修养护前" />
@@ -770,9 +770,10 @@ export default {
 
 .table-box {
   width: 100%;
-  height: calc(100% - 16px);
+  // height: calc(100% - 16px);
   margin-top: 24px;
   padding: 16px;
+  padding-bottom: 60px;
   background-color: white;
 
   .top-search {

src/views/dike/runManage/pestAnimalControl/controlManage/index.vue

@@ -25,7 +25,7 @@
         >
         <el-button @click="resetSearch()">重置</el-button>
       </div>
-      <el-table class="mt-16" height="625" :data="tableData" border>
+      <el-table class="mt-16" :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="dikeCode" align="center" label="堤防代码" />
@@ -361,9 +361,10 @@ export default {
 
   .table-box {
     width: 100%;
-    min-height: calc(100vh - 56px - 64px);
+    // min-height: calc(100vh - 56px - 64px);
     margin-top: 24px;
     padding: 16px;
+    padding-bottom: 60px;
     background-color: white;
 
     .top-search {
@@ -374,10 +375,6 @@ export default {
         margin-right: 10px;
       }
     }
-
-    .table {
-      height: calc(680px - 34px);
-    }
   }
 }
 </style>

src/views/dike/runManage/pestAnimalControl/governanceRecords/index.vue

@@ -472,7 +472,7 @@ export default {
           >添加</el-button
         >
       </div>
-      <el-table class="table" height="640" :data="tableData" border>
+      <el-table class="table" :data="tableData" border>
         <el-table-column type="index" align="center" label="序号" width="100" />
         <el-table-column prop="name" align="center" sortable label="上报时间" />
         <el-table-column prop="location" align="center" label="施工地点">
@@ -1072,9 +1072,10 @@ export default {
 
   .table-box {
     width: 100%;
-    min-height: calc(100vh - 56px - 64px);
+    // min-height: calc(100vh - 56px - 64px);
     margin-top: 24px;
     padding: 16px;
+    padding-bottom: 60px;
     background-color: white;
 
     .top-search {

src/views/dike/runManage/pestAnimalControl/planManagement/index.vue

@@ -425,7 +425,7 @@ export default {
           >新增</el-button
         >
       </div>
-      <el-table class="table" height="612" :data="tableData" border>
+      <el-table class="table" :data="tableData" border>
         <el-table-column type="index" align="center" label="序号" width="100" />
         <el-table-column prop="name" align="center" label="防治计划名称" />
         <el-table-column prop="type" align="center" label="防治类型">
@@ -847,9 +847,10 @@ export default {
 
   .table-box {
     width: 100%;
-    min-height: calc(100vh - 56px - 64px - 28px);
+    // min-height: calc(100vh - 56px - 64px - 28px);
     margin-top: 24px;
     padding: 16px;
+    padding-bottom: 60px;
     background-color: white;
 
     .top-search {

src/views/dike/runManage/supervisionInspetion/methodsManage/details.vue

@@ -164,7 +164,7 @@ export default {
     margin-top: 20px;
     background-color: #fff;
     padding: 20px;
-    height: calc(100% - 56px);
+    height: calc(100% - 60px);
     .pdf-preview {
       height: calc(100% - 50px);
       margin-top: 20px;

src/views/dike/runManage/supervisionInspetion/methodsManage/index.vue

@@ -149,7 +149,7 @@ export default {
         v-hasPermi="['df:run:sup:meth:add']"
         >添加</el-button
       >
-      <el-table class="table" :height="tableHeight" :data="tableData" border>
+      <el-table class="table" :data="tableData" border>
         <el-table-column type="index" align="center" label="序号" width="60" />
         <el-table-column prop="name" align="center" label="名称" />
         <el-table-column
@@ -256,9 +256,10 @@ export default {
 
   .table-box {
     width: 100%;
-    min-height: calc(100vh - 56px - 64px);
+    // min-height: calc(100vh - 56px - 64px);
     margin-top: 24px;
     padding: 16px;
+    padding-bottom: 60px;
     background-color: white;
 
     .top-search {
@@ -269,10 +270,6 @@ export default {
         margin-right: 10px;
       }
     }
-
-    .table {
-      height: calc(680px - 34px);
-    }
   }
 
   .search-btn {

src/views/dike/runManage/supervisionInspetion/methodsManage/itemsList.vue

@@ -173,7 +173,7 @@ export default {
   .items-list-page {
     margin-top: 20px;
     background-color: #fff;
-    height: calc(100% - 56px);
+    height: calc(100% - 60px);
   }
   .input {
     width: 200px;

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

@@ -25,7 +25,7 @@
         >
         <el-button @click="resetSearch()">重置</el-button>
       </div>
-      <el-table class="mt-16" height="625" :data="tableData" border>
+      <el-table class="mt-16" :data="tableData" border>
         <el-table-column type="index" align="center" label="序号" width="80" />
         <el-table-column
           prop="createTime"
@@ -171,9 +171,10 @@ export default {
 
   .table-box {
     width: 100%;
-    min-height: calc(100vh - 56px - 64px);
+    // min-height: calc(100vh - 56px - 64px);
     margin-top: 24px;
     padding: 16px;
+    padding-bottom: 60px;
     background-color: white;
 
     .top-search {

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

@@ -35,7 +35,7 @@
         >
         <el-button @click="resetSearch()">重置</el-button>
       </div>
-      <el-table class="mt-16" height="625" :data="tableData" border>
+      <el-table class="mt-16" :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="堤防级别">
@@ -252,9 +252,10 @@ export default {
 
   .table-box {
     width: 100%;
-    min-height: calc(100vh - 56px - 64px);
+    // min-height: calc(100vh - 56px - 64px);
     margin-top: 24px;
     padding: 16px;
+    padding-bottom: 60px;
     background-color: white;
 
     .top-search {

src/views/sluice/runManage/maintenance/maintenanceManage/index.vue

@@ -32,7 +32,7 @@
         >
         <el-button @click="resetSearch()">重置</el-button>
       </div>
-      <el-table class="mt-16" height="625" :data="tableData" border>
+      <el-table class="mt-16" :data="tableData" border>
         <el-table-column type="index" align="center" label="序号" width="80" />
         <el-table-column prop="wagaName" align="center" label="水闸名称" />
         <el-table-column prop="wagaCode" align="center" label="水闸代码" />
@@ -193,9 +193,10 @@ export default {
 
   .table-box {
     width: 100%;
-    min-height: calc(100vh - 56px - 64px);
+    // min-height: calc(100vh - 56px - 64px);
     margin-top: 24px;
     padding: 16px;
+    padding-bottom: 60px;
     background-color: white;
 
     .top-search {
@@ -206,10 +207,6 @@ export default {
         margin-right: 10px;
       }
     }
-
-    .table {
-      height: calc(680px - 34px);
-    }
   }
 }
 </style>

src/views/sluice/runManage/maintenance/maintenancePlan/index.vue

@@ -276,7 +276,7 @@ export default {
         >
       </div>
 
-      <el-table class="table" height="625" :data="tableData" border>
+      <el-table class="table" :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="wagaName" align="center" label="水闸名称" />
@@ -528,9 +528,10 @@ export default {
 }
 
 .table-box {
-  height: calc(100% - 24px);
+  // height: calc(100% - 24px);
   margin-top: 24px;
   padding: 16px;
+  padding-bottom: 60px;
   background-color: white;
 
   .top-search {

src/views/sluice/runManage/maintenance/maintenanceRecords/index.vue

@@ -430,7 +430,7 @@ export default {
           >添加</el-button
         >
       </div>
-      <el-table class="table" height="615" :data="tableData" border>
+      <el-table class="table" :data="tableData" border>
         <el-table-column type="index" align="center" label="序号" width="100" />
         <el-table-column prop="name" align="center" label="维养计划名称" />
         <el-table-column prop="before" align="center" label="维修养护前" />
@@ -767,9 +767,10 @@ export default {
 
 .table-box {
   width: 100%;
-  height: calc(100% - 18px);
+  // height: calc(100% - 18px);
   margin-top: 24px;
   padding: 16px;
+  padding-bottom: 60px;
   background-color: white;
 
   .top-search {

src/views/sluice/runManage/supervisionInspetion/statisticAnalysis/index.vue

@@ -297,7 +297,7 @@ export default {
 
   .table-box {
     width: 100%;
-    min-height: calc(100vh - 56px - 64px);
+    // min-height: calc(100% - 60px);
     margin-top: 24px;
     background-color: white;
     .title-box {