fix：工作站，工区修改

src/api/xj/hisense/ramp.js

@@ -0,0 +1,62 @@
+/*
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2025-02-13 09:11:50
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2025-02-14 14:39:30
+ * @FilePath: \znxjxt-ui\src\api\xj\hisense\ramp.js
+ * @Description: 海信-互通立交
+ */
+import request from "@/utils/request";
+
+// 获取列表数据
+export function getList(query) {
+  return request({
+    url: "/hxramp/page",
+    method: "get",
+    params: query,
+  });
+}
+
+// 新增数据
+export function add(data) {
+  return request({
+    url: "/hxramp",
+    method: "post",
+    data,
+  });
+}
+
+// 更新数据
+export function updata(data) {
+  return request({
+    url: "/hxramp",
+    method: "put",
+    data,
+  });
+}
+
+// 删除数据
+export function delData(id) {
+  return request({
+    url: `/hxramp/${id}`,
+    method: "delete",
+  });
+}
+
+// 获取匝道下拉数据
+export function getDropDown(params) {
+  return request({
+    url: "/hxramp/dropDown",
+    method: "get",
+    params,
+  });
+}
+
+// 获取互通立交下拉数据
+export function getCrossDropDown(params) {
+  return request({
+    url: "/hxCross/dropDown",
+    method: "get",
+    params,
+  });
+}

src/api/xj/hisense/task-area.js

@@ -0,0 +1,53 @@
+/*
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2025-02-13 09:11:50
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2025-02-14 15:35:33
+ * @FilePath: \znxjxt-ui\src\api\xj\hisense\inter-change.js
+ * @Description: 海信-工作站
+ */
+import request from "@/utils/request";
+
+// 获取列表数据
+export function getList(query) {
+  return request({
+    url: "/hxtaskarea/page",
+    method: "get",
+    params: query,
+  });
+}
+
+// 新增数据
+export function add(data) {
+  return request({
+    url: "/hxtaskarea",
+    method: "post",
+    data,
+  });
+}
+
+// 更新数据
+export function updata(data) {
+  return request({
+    url: "/hxtaskarea",
+    method: "put",
+    data,
+  });
+}
+
+// 删除数据
+export function delData(id) {
+  return request({
+    url: `/hxtaskarea/${id}`,
+    method: "delete",
+  });
+}
+
+// 获取互通立交下拉数据
+export function getDropDown(params) {
+  return request({
+    url: "/hxtaskarea/dropDown",
+    method: "get",
+    params,
+  });
+}

src/api/xj/hisense/work-station.js

@@ -0,0 +1,53 @@
+/*
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2025-02-13 09:11:50
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2025-02-14 15:35:33
+ * @FilePath: \znxjxt-ui\src\api\xj\hisense\inter-change.js
+ * @Description: 海信-工作站
+ */
+import request from "@/utils/request";
+
+// 获取列表数据
+export function getList(query) {
+  return request({
+    url: "/hxworkstation/page",
+    method: "get",
+    params: query,
+  });
+}
+
+// 新增数据
+export function add(data) {
+  return request({
+    url: "/hxworkstation",
+    method: "post",
+    data,
+  });
+}
+
+// 更新数据
+export function updata(data) {
+  return request({
+    url: "/hxworkstation",
+    method: "put",
+    data,
+  });
+}
+
+// 删除数据
+export function delData(id) {
+  return request({
+    url: `/hxworkstation/${id}`,
+    method: "delete",
+  });
+}
+
+// 获取互通立交下拉数据
+export function getDropDown(params) {
+  return request({
+    url: "/hxworkstation/dropDown",
+    method: "get",
+    params,
+  });
+}

src/views/xj/hisense/inter-change/components/add-inter.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2025-02-12 16:44:44
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-02-14 10:13:56
+ * @LastEditTime: 2025-02-17 11:35:07
  * @FilePath: \znxjxt-ui\src\views\xj\hisense\inter-change\components\add-inter.vue
  * @Description: 海信-互通立交-新增/编辑
 -->
@@ -78,7 +78,7 @@ export default {
         code: [{ required: true, message: "请填写code", trigger: "blur" }],
         stake: [{ required: true, message: "请填写桩号", trigger: "blur" }, {
           pattern: /^(0|[1-9]\d*)(\.\d{1,3})?$/,
-          message: "请输入非负数",
+          messaxge: "请输入非负数",
         },],
       }
     }
@@ -87,7 +87,7 @@ export default {
     dialogItem: {
       handler(val) {
         if (val) {
-          this.addInterForm = val
+          this.addInterForm = JSON.parse(JSON.stringify(val))
         }
       }, immediate: true, deep: true
     }

src/views/xj/hisense/inter-change/index.vue

@@ -2,15 +2,15 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2025-02-12 13:49:47
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-02-14 10:21:09
+ * @LastEditTime: 2025-02-17 13:14:23
  * @FilePath: \znxjxt-ui\src\views\xj\hisense\inter-change\index.vue
  * @Description: 海信-互通立交
 -->
 <template>
   <div class="content">
     <el-form :model="interForm" ref="interForm" size="small" :inline="true" label-width="7rem">
-      <el-form-item label="互通立交名称" prop="segmentId">
+      <el-form-item label="互通立交名称" prop="name">
-        <el-select v-model="interForm.segmentId" placeholder="请输入互通立交名称" filterable remote clearable reserve-keyword
+        <el-select v-model="interForm.name" placeholder="请输入互通立交名称" filterable remote clearable reserve-keyword
           :filter-method="handleRemoteMethod" @change="handleRemoteMethod">
           <el-option v-for="(item, index) in segmentList" :key="`enterprise-name-${index}`" :label="item.label"
             :value="item.label"></el-option> </el-select>
@@ -85,8 +85,7 @@ export default {
     return {
       // 搜索绑定菜单
       interForm: {
-        segmentId: "",
+        name: "",
-        defectType: "",
       },
       searchForm: {},
       // 路段下拉数据
@@ -129,7 +128,7 @@ export default {
      * @return {*}
      */
     handleRemoteMethod(str) {
-      this.interForm.segmentId = str;
+      this.interForm.name = str;
       this.getDownList();
     },
     /**
@@ -138,7 +137,7 @@ export default {
      * @return {*}
      */
     getDownList() {
-      getDropDown({ name: this.interForm.segmentId }).then(({ code, data }) => {
+      getDropDown({ name: this.interForm.name }).then(({ code, data }) => {
         if (code === 200) {
           this.segmentList = data
         }
@@ -162,7 +161,7 @@ export default {
      */
     resetQuery() {
       this.interForm = {
-        segmentId: "",
+        name: "",
         defectType: "",
       }
       this.searchForm = {}
@@ -267,6 +266,7 @@ export default {
     addCancel() {
       this.addVisible = false;
       this.dialogItem = {};
+      this.getTableData();
     }
   },
 }

src/views/xj/hisense/ramp/components/add-ramp.vue

@@ -0,0 +1,196 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2025-02-12 16:44:44
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2025-02-14 14:49:00
+ * @FilePath: \znxjxt-ui\src\views\xj\hisense\inter-change\components\add-inter.vue
+ * @Description: 海信-匝道-新增/编辑
+-->
+<template>
+  <div class="dialog-content">
+    <el-form class="addForm" ref="addInterForm" :model="addInterForm" :rules="rules" label-width="8rem">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="匝道名称：" prop="name">
+            <el-input v-model="addInterForm.name" placeholder="请填写名称" style="width: 100%" clearable>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="匝道Id：" prop="rampId">
+            <el-input v-model="addInterForm.rampId" placeholder="请填写code" style="width: 100%" clearable>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="code：" prop="code">
+            <el-input v-model="addInterForm.code" placeholder="请填写code" style="width: 100%" clearable>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="起始桩号：" prop="startStake">
+            <el-input v-model="addInterForm.startStake" placeholder="请填写桩号" style="width: 100%" clearable>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="互通立交：" prop="crossName">
+            <el-select v-model="addInterForm.crossName" placeholder="请选择互通立交" style="width: 100%" filterable remote
+              clearable reserve-keyword :filter-method="handleRemoteMethod" @change="changeCross">
+              <el-option v-for="(item, index) in segmentList" :key="`enterprise-name-${index}`" :label="item.label"
+                :value="item.label"></el-option> </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { add, updata, getCrossDropDown } from '@/api/xj/hisense/ramp'
+
+export default {
+  name: "AddRamp",
+  props: {
+    // 接收父组件传过来的数据
+    dialogItem: {
+      type: Object,
+      default: () => { },
+    },
+  },
+  data() {
+    return {
+      // 互通立交下拉数据
+      segmentList: [],
+      // 新增表单
+      addInterForm: {
+        name: "",
+        rampId: "",
+        code: "",
+        startStake: "",
+        crossName: "",
+        crossId: ""
+      },
+      // 表单校验规则
+      rules: {
+        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
+        rampId: [{ required: true, message: "请填写互通立交id", trigger: "blur" }],
+        code: [{ required: false, message: "请填写code", trigger: "blur" }],
+        startStake: [{ required: false, message: "请填写桩号", trigger: "blur" }, {
+          pattern: /^\d+$/,
+          message: "请输入非负整数",
+        },],
+        crossName: [{ required: false, message: "请选择互通立交", trigger: "change" }]
+      }
+    }
+  },
+  watch: {
+    dialogItem: {
+      handler(val) {
+        if (val) {
+          this.addInterForm = JSON.parse(JSON.stringify(val))
+        }
+      }, immediate: true, deep: true
+    }
+  },
+  mounted() {
+    this.getDownList()
+  },
+  methods: {
+    /**
+     * @description: 模糊搜索
+     * @param {*} str 模糊搜索字段
+     * @return {*}
+     */
+    handleRemoteMethod(str) {
+      this.addInterForm.crossName = str;
+      this.getDownList();
+    },
+
+    /**
+   * @description: 获取下拉数据
+   * @param {*}
+   * @return {*}
+   */
+    getDownList() {
+      getCrossDropDown({ name: this.addInterForm.crossName }).then(({ code, data }) => {
+        if (code === 200) {
+          this.segmentList = data
+        }
+      })
+    },
+
+    /**
+     * @description: 获取下拉数据
+     * @param {*}
+     * @return {*}
+     */
+    changeCross(value) {
+      this.addInterForm.crossId = this.segmentList.filter(item => item.label === value)[0].value
+    },
+
+    /**
+     * @description: 点击确定事件
+     * @return {*}
+     */
+    submitForm() {
+      this.$refs.addInterForm.validate((valid) => {
+        if (valid) {
+          const data = {
+            ...this.addInterForm,
+          };
+          if (this.addInterForm.id) {
+            updata(data).then(({ code }) => {
+              if (code === 200) {
+                this.$modal.msgSuccess("更新成功");
+                this.$emit("cancel");
+              }
+            });
+          } else {
+            add(data).then(({ code }) => {
+              if (code === 200) {
+                this.$modal.msgSuccess("新增成功");
+                this.$emit("cancel");
+              }
+            });
+          }
+        }
+      });
+    },
+
+    /**
+     * @description: 点击取消事件
+     * @return {*}
+     */
+    cancel() {
+      this.$emit("cancel");
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-content {
+  width: 100%;
+  // height: 20rem;
+}
+
+/* 页脚 */
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/views/xj/hisense/ramp/index.vue

@@ -2,24 +2,273 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2025-02-12 13:59:35
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-02-12 13:59:54
+ * @LastEditTime: 2025-02-14 13:46:04
  * @FilePath: \znxjxt-ui\src\views\xj\hisense\ramp\index.vue
  * @Description: 海信-匝道
 -->
 <template>
-  <div class="content">海信匝道</div>
+  <div class="content">
+    <el-form :model="interForm" ref="interForm" size="small" :inline="true" label-width="7rem">
+      <el-form-item label="匝道名称" prop="name">
+        <el-select v-model="interForm.name" placeholder="请输入互通立交名称" filterable remote clearable reserve-keyword
+          :filter-method="handleRemoteMethod" @change="handleRemoteMethod">
+          <el-option v-for="(item, index) in segmentList" :key="`enterprise-name-${index}`" :label="item.label"
+            :value="item.label"></el-option> </el-select>
+      </el-form-item>
+      <!-- <el-form-item label="病害类型" prop="defectType">
+        <el-select v-model="interForm.defectType" placeholder="请选择病害" clearable>
+          <el-option v-for="item in tableDefect" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item> -->
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
+        </el-button>
+      </el-col>
+      <!-- <el-col :span="1.5">
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
+          @click="handleDelete(null)">删除
+        </el-button>
+      </el-col> -->
+    </el-row>
+    <!-- 表格 -->
+    <el-table ref="setupTable" :data="interList" v-loading="loading" @selection-change="handleSelectionChange"
+      style="width: 100%">
+      <!-- <el-table-column type="selection" width="55" align="center" /> -->
+      <el-table-column type="index" label="序号"> </el-table-column>
+      <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column label="匝道Id(海信)" align="center" prop="rampId">
+      </el-table-column>
+      <el-table-column label="起始桩号" align="center" prop="startStake" />
+      <el-table-column label="code" align="center" prop="code" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑
+          </el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <div class="pagination-part">
+      <el-pagination background :current-page.sync="pagination.pageNum" @current-change="handleCurrentChange"
+        :page-sizes="[10, 20, 30, 40]" :page-size.sync="pagination.pageSize" @size-change="handleSizeChange"
+        layout="total, sizes, prev, pager, next, jumper" :total="tableTotal">
+      </el-pagination>
+    </div>
+
+    <!-- 新增弹窗 -->
+    <el-dialog :title="title" :visible.sync="addVisible" width="50rem" append-to-body :close-on-click-modal="false"
+      destroy-on-close>
+      <add-ramp v-if="addVisible" :tableDefect="tableDefect" :segmentList="segmentList" :dialogItem="dialogItem"
+        @cancel="addCancel"></add-ramp>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import { getList, getDropDown, delData } from "@/api/xj/hisense/ramp"
+import AddRamp from "./components/add-ramp.vue"
+
 export default {
   name: "Ramp",
+  components: {
+    AddRamp,
+  },
   data() {
     return {
+      // 搜索绑定菜单
+      interForm: {
+        name: "",
+        defectType: "",
+      },
+      searchForm: {},
+      // 路段下拉数据
+      segmentList: [],
+      // 病害下拉数据
+      tableDefect: [],
+
+      // 列表数据
+      interList: [],
+      // 列表加载状态
+      loading: false,
+      // 列表勾选框数据
+      checkIds: [],
+      // 非多个禁用
+      multiple: true,
+      // 分页-列表总数
+      tableTotal: 0,
+      // 分页-页数页码
+      pagination: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+
+      // 弹窗标题
+      title: "新增",
+      // 新增弹窗显隐控制
+      addVisible: false,
+      // 传弹窗数据
+      dialogItem: {},
     }
   },
   mounted() {
+    this.getTableData()
+    this.getDownList()
   },
   methods: {
+    /**
+     * @description: 模糊搜索
+     * @param {*} str 模糊搜索字段
+     * @return {*}
+     */
+    handleRemoteMethod(str) {
+      this.interForm.name = str;
+      this.getDownList();
+    },
+    /**
+     * @description: 获取下拉数据
+     * @param {*}
+     * @return {*}
+     */
+    getDownList() {
+      getDropDown({ name: this.interForm.name }).then(({ code, data }) => {
+        if (code === 200) {
+          this.segmentList = data
+        }
+      })
+    },
+    /**
+     * @description: 点击搜索
+     * @param {*}
+     * @return {*}
+     */
+    handleQuery() {
+      this.searchForm = JSON.parse(JSON.stringify(this.interForm));
+      this.pagination.pageNum = 1;
+      this.getTableData();
+    },
+
+    /**
+     * @description: 点击重置
+     * @param {*}
+     * @return {*}
+     */
+    resetQuery() {
+      this.interForm = {
+        name: "",
+        defectType: "",
+      }
+      this.searchForm = {}
+    },
+
+    /**
+     * @description: 点击新增事件
+     * @param {*}
+     * @return {*}
+     */
+    handleAdd() {
+      this.addVisible = true;
+      this.dialogItem = {};
+    },
+
+    /**
+     * @description: 获取列表数据
+     * @param {*}
+     * @return {*}
+     */
+    getTableData() {
+      const dataItem = {
+        ...this.searchForm,
+        ...this.pagination,
+      }
+      getList(dataItem).then(({ rows, code, total }) => {
+        if (code === 200) {
+          this.interList = rows;
+          this.tableTotal = total;
+        }
+      })
+    },
+    /**
+ * @description: 列表选择改变事件
+ * @param {*}
+ * @return {*}
+ */
+    handleSelectionChange(selection) {
+      this.checkIds = selection.map((item) => item.id);
+      this.multiple = !selection.length;
+    },
+
+    /**
+     * @description: 点击编辑事件
+     * @param {*}
+     * @return {*}
+     */
+    handleUpdate(value) {
+      this.addVisible = true;
+      this.dialogItem = value;
+    },
+
+    /**
+     * @description: 点击删除事件
+     * @param {*}
+     * @return {*}
+     */
+    handleDelete(row) {
+      // const checkIds = row ? row.id : this.checkIds;
+      // if (!checkIds.length) {
+      //   this.$modal.msgWarning("请选择要删除的记录");
+      //   return;
+      // }
+      this.$modal
+        .confirm(`是否确认删除选中的1条记录？`)
+        .then(() => {
+          return delData(row.id);
+        })
+        .then(() => {
+          this.getTableData();
+          // this.$refs.defectTable.clearSelection();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => { });
+    },
+
+    /**
+     * @description: 切换分页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleCurrentChange(arg) {
+      this.pagination.pageNum = arg;
+      this.getTableData();
+    },
+
+    /**
+     * @description: 切换每条/页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleSizeChange(arg) {
+      this.pagination.pageSize = arg;
+      this.getTableData();
+    },
+
+    /**
+   * @description: 关闭弹窗事件
+   * @param {*}
+   * @return {*}
+   */
+    addCancel() {
+      this.addVisible = false;
+      this.dialogItem = {};
+      this.getTableData();
+    }
   },
 }
 </script>
@@ -31,4 +280,12 @@ export default {
   padding: 1rem;
   overflow-y: auto;
 }
+
+/* 分页样式 */
+.pagination-part {
+  width: 100%;
+  display: flex;
+  padding-top: 1rem;
+  justify-content: flex-end;
+}
 </style>

src/views/xj/hisense/task-area/components/add-area.vue

@@ -0,0 +1,249 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2025-02-12 16:44:44
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2025-02-17 13:42:25
+ * @FilePath: \znxjxt-ui\src\views\xj\hisense\inter-change\components\add-inter.vue
+ * @Description: 海信-工区-新增/编辑
+-->
+<template>
+  <div class="dialog-content">
+    <el-form class="addForm" ref="addInterForm" :model="addInterForm" :rules="rules" label-width="11rem">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="工区名称：" prop="taskAreaName">
+            <el-input v-model="addInterForm.taskAreaName" placeholder="请填写名称" style="width: 100%" clearable>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="工区code：" prop="taskAreaCode">
+            <el-input v-model="addInterForm.taskAreaCode" placeholder="请填写code" style="width: 100%" clearable>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="matBaseTaskAreaId：" prop="matBaseTaskAreaId">
+            <el-input v-model="addInterForm.matBaseTaskAreaId" placeholder="请填写matBaseTaskAreaId" style="width: 100%"
+              clearable>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="parRoadCode：" prop="parRoadCode">
+            <el-input v-model="addInterForm.parRoadCode" placeholder="请填写桩号" style="width: 100%" clearable>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="工区位置">
+        <fssm-map ref="diseaseMap" @map-click="getMapClick" class="no-hand-cursor"></fssm-map>
+      </el-form-item>
+    </el-form>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { add, updata } from '@/api/xj/hisense/task-area'
+// 地图
+import FssmMap from "@/components/map/fssm-map.vue";
+import { Feature } from "ol";
+import { Point } from "ol/geom";
+import { Style } from "ol/style";
+import * as styleExports from "ol/style";
+import VectorLayer from "ol/layer/Vector";
+import { Vector as VectorSource } from "ol/source";
+
+export default {
+  name: "AddArea",
+  components: {
+    FssmMap
+  },
+  props: {
+    // 接收父组件传过来的数据
+    dialogItem: {
+      type: Object,
+      default: () => { },
+    },
+  },
+  data() {
+    return {
+      // 新增表单
+      addInterForm: {
+        taskAreaName: "",
+        taskAreaCode: "",
+        matBaseTaskAreaId: "",
+        parRoadCode: "",
+      },
+      // 表单校验规则
+      rules: {
+        taskAreaName: [{ required: true, message: "请填写名称", trigger: "blur" }],
+        taskAreaCode: [{ required: true, message: "请填写工区code", trigger: "blur" }],
+        matBaseTaskAreaId: [{ required: true, message: "请填写matBaseTaskAreaId", trigger: "blur" }],
+        parRoadCode: [{ required: true, message: "请填写parRoadCode", trigger: "blur" },
+          // {
+          //   pattern: /^(0|[1-9]\d*)(\.\d{1,3})?$/,
+          //   message: "请输入非负数",
+          // },
+        ],
+      },
+      //图层对象
+      markLayerPoints: null,
+      // 新增/编辑打点数组
+      markers: [],
+    }
+  },
+  watch: {
+    dialogItem: {
+      handler(val) {
+        if (val) {
+          this.addInterForm = JSON.parse(JSON.stringify(val))
+          if (val.lngLat) {
+            this.markers = val.lngLat.split(',').map(Number)
+            this.$nextTick(() => {
+              const map = this.$refs.diseaseMap.instance.get("map");
+              map.getView().setCenter(this.markers);
+            });
+            this.drawMapPoint();
+          }
+        }
+      }, immediate: true, deep: true
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    /**
+     * @description: 传回来的地图点击事件获取点位数据
+     * @param {*} e
+     * @return {*}
+     */
+    getMapClick(e) {
+      const map = this.$refs.diseaseMap.instance.get("map");
+      map.removeLayer(this.markLayerPoints);
+      const { coordinate } = e;
+      this.markers = coordinate;
+      this.drawMapPoint();
+    },
+
+
+    /**
+     * @description: 绘制地图点位
+     * @param {*} val
+     * @return {*}
+     */
+    drawMapPoint() {
+      const features = [];
+      const point = new Point(this.markers); // 修改坐标格式
+      const feature = new Feature({
+        geometry: point,
+        type: "icon", //  自己设置一个标识
+      });
+      feature.setStyle([
+        new Style({
+          image: new styleExports.Circle({
+            //点样式
+            radius: 6,
+            stroke: new styleExports.Stroke({
+              color: "#9a9c9e",
+              width: 4,
+            }),
+            fill: new styleExports.Fill({
+              color: "blue",
+            }),
+          }),
+        }),
+      ]);
+      features.push(feature);
+      //设置地图的数据源
+      const pointSource = new VectorSource({
+        features,
+      });
+      this.markLayerPoints = new VectorLayer({
+        source: pointSource,
+        properties: {
+          type: "point",
+        },
+      });
+      this.$nextTick(() => {
+        const map = this.$refs.diseaseMap.instance.get("map");
+        map.addLayer(this.markLayerPoints);
+      });
+    },
+
+    /**
+     * @description: 点击确定事件
+     * @return {*}
+     */
+    submitForm() {
+      this.$refs.addInterForm.validate((valid) => {
+        if (valid) {
+          // 验证点位
+          // if (this.markers.length < 1) {
+          //   this.$modal.msgWarning("请选择工区位置");
+          //   return false;
+          // }
+          const data = {
+            ...this.addInterForm,
+            lngLat: this.markers.length > 0 ? this.markers.flat().join(",") : "",
+          };
+          if (this.addInterForm.id) {
+            updata(data).then(({ code }) => {
+              if (code === 200) {
+                this.$modal.msgSuccess("更新成功");
+                this.$emit("cancel");
+              }
+            });
+          } else {
+            add(data).then(({ code }) => {
+              if (code === 200) {
+                this.$modal.msgSuccess("新增成功");
+                this.$emit("cancel");
+              }
+            });
+          }
+        }
+      });
+    },
+
+    /**
+     * @description: 点击取消事件
+     * @return {*}
+     */
+    cancel() {
+      this.$emit("cancel");
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-content {
+  width: 100%;
+  // height: 20rem;
+}
+
+/* 新增地图框样式 */
+.no-hand-cursor {
+  cursor: default !important;
+  width: 100%;
+  height: 20rem;
+}
+
+/* 页脚 */
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/views/xj/hisense/task-area/index.vue

@@ -2,24 +2,271 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2025-02-12 14:17:20
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-02-12 14:17:26
+ * @LastEditTime: 2025-02-17 10:50:51
  * @FilePath: \znxjxt-ui\src\views\xj\hisense\task-area\index.vue
- * @Description: 海信-工作区
+ * @Description: 海信-工区
 -->
 <template>
-  <div class="content">海信工作区</div>
+  <div class="content">
+    <el-form :model="interForm" ref="interForm" size="small" :inline="true" label-width="7rem">
+      <el-form-item label="工区名称" prop="name">
+        <el-select v-model="interForm.name" placeholder="请输入工区名称" filterable remote clearable reserve-keyword
+          :filter-method="handleRemoteMethod" @change="handleRemoteMethod">
+          <el-option v-for="(item, index) in segmentList" :key="`enterprise-name-${index}`" :label="item.label"
+            :value="item.label"></el-option> </el-select>
+      </el-form-item>
+      <!-- <el-form-item label="病害类型" prop="defectType">
+        <el-select v-model="interForm.defectType" placeholder="请选择病害" clearable>
+          <el-option v-for="item in tableDefect" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item> -->
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
+        </el-button>
+      </el-col>
+      <!-- <el-col :span="1.5">
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
+          @click="handleDelete(null)">删除
+        </el-button>
+      </el-col> -->
+    </el-row>
+    <!-- 表格 -->
+    <el-table ref="setupTable" :data="interList" v-loading="loading" @selection-change="handleSelectionChange"
+      style="width: 100%">
+      <!-- <el-table-column type="selection" width="55" align="center" /> -->
+      <el-table-column type="index" label="序号"> </el-table-column>
+      <el-table-column label="工区名称" align="center" prop="taskAreaName" />
+      <el-table-column label="工区code" align="center" prop="taskAreaCode">
+      </el-table-column>
+      <el-table-column label="matBaseTaskAreaId" align="center" prop="matBaseTaskAreaId">
+      </el-table-column>
+      <el-table-column label="parRoadCode" align="center" prop="parRoadCode">
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑
+          </el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <div class="pagination-part">
+      <el-pagination background :current-page.sync="pagination.pageNum" @current-change="handleCurrentChange"
+        :page-sizes="[10, 20, 30, 40]" :page-size.sync="pagination.pageSize" @size-change="handleSizeChange"
+        layout="total, sizes, prev, pager, next, jumper" :total="tableTotal">
+      </el-pagination>
+    </div>
+
+    <!-- 新增弹窗 -->
+    <el-dialog :title="title" :visible.sync="addVisible" width="50rem" append-to-body :close-on-click-modal="false"
+      destroy-on-close>
+      <add-area v-if="addVisible" :segmentList="segmentList" :dialogItem="dialogItem" @cancel="addCancel"></add-area>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import { getList, getDropDown, delData } from "@/api/xj/hisense/task-area"
+import AddArea from "./components/add-area.vue"
+
 export default {
   name: "TaskArea",
+  components: {
+    AddArea,
+  },
   data() {
     return {
+      // 搜索绑定菜单
+      interForm: {
+        name: "",
+      },
+      searchForm: {},
+      // 路段下拉数据
+      segmentList: [],
+
+      // 列表数据
+      interList: [],
+      // 列表加载状态
+      loading: false,
+      // 列表勾选框数据
+      checkIds: [],
+      // 非多个禁用
+      multiple: true,
+      // 分页-列表总数
+      tableTotal: 0,
+      // 分页-页数页码
+      pagination: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+
+      // 弹窗标题
+      title: "新增",
+      // 新增弹窗显隐控制
+      addVisible: false,
+      // 传弹窗数据
+      dialogItem: {},
     }
   },
   mounted() {
+    this.getTableData()
+    this.getDownList()
   },
   methods: {
+    /**
+     * @description: 模糊搜索
+     * @param {*} str 模糊搜索字段
+     * @return {*}
+     */
+    handleRemoteMethod(str) {
+      this.interForm.name = str;
+      this.getDownList();
+    },
+    /**
+     * @description: 获取下拉数据
+     * @param {*}
+     * @return {*}
+     */
+    getDownList() {
+      getDropDown({ name: this.interForm.name }).then(({ code, data }) => {
+        if (code === 200) {
+          this.segmentList = data
+        }
+      })
+    },
+    /**
+     * @description: 点击搜索
+     * @param {*}
+     * @return {*}
+     */
+    handleQuery() {
+      this.searchForm = JSON.parse(JSON.stringify(this.interForm));
+      this.pagination.pageNum = 1;
+      this.getTableData();
+    },
+
+    /**
+     * @description: 点击重置
+     * @param {*}
+     * @return {*}
+     */
+    resetQuery() {
+      this.interForm = {
+        name: "",
+        defectType: "",
+      }
+      this.searchForm = {}
+    },
+
+    /**
+     * @description: 点击新增事件
+     * @param {*}
+     * @return {*}
+     */
+    handleAdd() {
+      this.addVisible = true;
+      this.dialogItem = {};
+    },
+
+    /**
+     * @description: 获取列表数据
+     * @param {*}
+     * @return {*}
+     */
+    getTableData() {
+      const dataItem = {
+        ...this.searchForm,
+        ...this.pagination,
+      }
+      getList(dataItem).then(({ rows, code, total }) => {
+        if (code === 200) {
+          this.interList = rows;
+          this.tableTotal = total;
+        }
+      })
+    },
+    /**
+ * @description: 列表选择改变事件
+ * @param {*}
+ * @return {*}
+ */
+    handleSelectionChange(selection) {
+      this.checkIds = selection.map((item) => item.id);
+      this.multiple = !selection.length;
+    },
+
+    /**
+     * @description: 点击编辑事件
+     * @param {*}
+     * @return {*}
+     */
+    handleUpdate(value) {
+      this.addVisible = true;
+      this.dialogItem = value;
+    },
+
+    /**
+     * @description: 点击删除事件
+     * @param {*}
+     * @return {*}
+     */
+    handleDelete(row) {
+      // const checkIds = row ? row.id : this.checkIds;
+      // if (!checkIds.length) {
+      //   this.$modal.msgWarning("请选择要删除的记录");
+      //   return;
+      // }
+      this.$modal
+        .confirm(`是否确认删除选中的1条记录？`)
+        .then(() => {
+          return delData(row.id);
+        })
+        .then(() => {
+          this.getTableData();
+          // this.$refs.defectTable.clearSelection();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => { });
+    },
+
+    /**
+     * @description: 切换分页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleCurrentChange(arg) {
+      this.pagination.pageNum = arg;
+      this.getTableData();
+    },
+
+    /**
+     * @description: 切换每条/页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleSizeChange(arg) {
+      this.pagination.pageSize = arg;
+      this.getTableData();
+    },
+
+    /**
+   * @description: 关闭弹窗事件
+   * @param {*}
+   * @return {*}
+   */
+    addCancel() {
+      this.addVisible = false;
+      this.dialogItem = {};
+      this.getTableData();
+    }
   },
 }
 </script>
@@ -31,4 +278,12 @@ export default {
   padding: 1rem;
   overflow-y: auto;
 }
+
+/* 分页样式 */
+.pagination-part {
+  width: 100%;
+  display: flex;
+  padding-top: 1rem;
+  justify-content: flex-end;
+}
 </style>

src/views/xj/hisense/work-station/components/add-station.vue

@@ -0,0 +1,149 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2025-02-12 16:44:44
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2025-02-14 16:26:01
+ * @FilePath: \znxjxt-ui\src\views\xj\hisense\inter-change\components\add-inter.vue
+ * @Description: 海信-互通立交-新增/编辑
+-->
+<template>
+  <div class="dialog-content">
+    <el-form class="addForm" ref="addInterForm" :model="addInterForm" :rules="rules" label-width="8rem">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="工作站名称：" prop="workStationName">
+            <el-input v-model="addInterForm.workStationName" placeholder="请填写名称" style="width: 100%" clearable>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="工作站Id：" prop="workStationId">
+            <el-input v-model="addInterForm.workStationId" placeholder="请填写code" style="width: 100%" clearable>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="道路id：" prop="roadId">
+            <el-input v-model="addInterForm.roadId" placeholder="请填写道路id" style="width: 100%" clearable>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <!-- <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="桩号：" prop="stake">
+            <el-input v-model="addInterForm.stake" placeholder="请填写桩号" style="width: 100%" clearable>
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row> -->
+    </el-form>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { add, updata } from '@/api/xj/hisense/work-station'
+
+export default {
+  name: "AddStation",
+  props: {
+    // 接收父组件传过来的数据
+    dialogItem: {
+      type: Object,
+      default: () => { },
+    },
+  },
+  data() {
+    return {
+      // 新增表单
+      addInterForm: {
+        workStationName: "",
+        workStationId: "",
+        roadId: "",
+        stake: "",
+      },
+      // 表单校验规则
+      rules: {
+        workStationName: [{ required: true, message: "请填写名称", trigger: "blur" }],
+        workStationId: [{ required: true, message: "请填写工作站id", trigger: "blur" }],
+        roadId: [{ required: true, message: "请填写code", trigger: "blur" }],
+        stake: [{ required: true, message: "请填写桩号", trigger: "blur" }, {
+          pattern: /^(0|[1-9]\d*)(\.\d{1,3})?$/,
+          message: "请输入非负数",
+        },],
+      }
+    }
+  },
+  watch: {
+    dialogItem: {
+      handler(val) {
+        if (val) {
+          this.addInterForm = JSON.parse(JSON.stringify(val))
+        }
+      }, immediate: true, deep: true
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    /**
+     * @description: 点击确定事件
+     * @return {*}
+     */
+    submitForm() {
+      this.$refs.addInterForm.validate((valid) => {
+        if (valid) {
+          const data = {
+            ...this.addInterForm,
+          };
+          if (this.addInterForm.id) {
+            updata(data).then(({ code }) => {
+              if (code === 200) {
+                this.$modal.msgSuccess("更新成功");
+                this.$emit("cancel");
+              }
+            });
+          } else {
+            add(data).then(({ code }) => {
+              if (code === 200) {
+                this.$modal.msgSuccess("新增成功");
+                this.$emit("cancel");
+              }
+            });
+          }
+        }
+      });
+    },
+
+    /**
+     * @description: 点击取消事件
+     * @return {*}
+     */
+    cancel() {
+      this.$emit("cancel");
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-content {
+  width: 100%;
+  // height: 20rem;
+}
+
+/* 页脚 */
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/views/xj/hisense/work-station/index.vue

@@ -2,25 +2,269 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2025-02-12 14:09:49
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-02-12 14:10:04
+ * @LastEditTime: 2025-02-17 13:14:02
  * @FilePath: \znxjxt-ui\src\views\xj\hisense\work-station\index.vue
  * @Description: 海信-工作站
 -->
-
 <template>
-  <div class="content">海信工作站</div>
+  <div class="content">
+    <el-form :model="interForm" ref="interForm" size="small" :inline="true" label-width="7rem">
+      <el-form-item label="工作站名称" prop="name">
+        <el-select v-model="interForm.name" placeholder="请输入工作站名称" filterable remote clearable reserve-keyword
+          :filter-method="handleRemoteMethod" @change="handleRemoteMethod">
+          <el-option v-for="(item, index) in segmentList" :key="`enterprise-name-${index}`" :label="item.label"
+            :value="item.label"></el-option> </el-select>
+      </el-form-item>
+      <!-- <el-form-item label="病害类型" prop="defectType">
+        <el-select v-model="interForm.defectType" placeholder="请选择病害" clearable>
+          <el-option v-for="item in tableDefect" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item> -->
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
+        </el-button>
+      </el-col>
+      <!-- <el-col :span="1.5">
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
+          @click="handleDelete(null)">删除
+        </el-button>
+      </el-col> -->
+    </el-row>
+    <!-- 表格 -->
+    <el-table ref="setupTable" :data="interList" v-loading="loading" @selection-change="handleSelectionChange"
+      style="width: 100%">
+      <!-- <el-table-column type="selection" width="55" align="center" /> -->
+      <el-table-column type="index" label="序号"> </el-table-column>
+      <el-table-column label="工作站名称" align="center" prop="workStationName" />
+      <el-table-column label="工作站Id(海信)" align="center" prop="workStationId">
+      </el-table-column>
+      <el-table-column label="道路id" align="center" prop="roadId" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑
+          </el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <div class="pagination-part">
+      <el-pagination background :current-page.sync="pagination.pageNum" @current-change="handleCurrentChange"
+        :page-sizes="[10, 20, 30, 40]" :page-size.sync="pagination.pageSize" @size-change="handleSizeChange"
+        layout="total, sizes, prev, pager, next, jumper" :total="tableTotal">
+      </el-pagination>
+    </div>
+
+    <!-- 新增弹窗 -->
+    <el-dialog :title="title" :visible.sync="addVisible" width="50rem" append-to-body :close-on-click-modal="false"
+      destroy-on-close>
+      <add-station v-if="addVisible" :segmentList="segmentList" :dialogItem="dialogItem"
+        @cancel="addCancel"></add-station>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import { getList, getDropDown, delData } from "@/api/xj/hisense/work-station"
+import AddStation from "./components/add-station.vue"
+
 export default {
   name: "WorkStation",
+  components: {
+    AddStation,
+  },
   data() {
     return {
+      // 搜索绑定菜单
+      interForm: {
+        name: "",
+      },
+      searchForm: {},
+      // 路段下拉数据
+      segmentList: [],
+
+      // 列表数据
+      interList: [],
+      // 列表加载状态
+      loading: false,
+      // 列表勾选框数据
+      checkIds: [],
+      // 非多个禁用
+      multiple: true,
+      // 分页-列表总数
+      tableTotal: 0,
+      // 分页-页数页码
+      pagination: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+
+      // 弹窗标题
+      title: "新增",
+      // 新增弹窗显隐控制
+      addVisible: false,
+      // 传弹窗数据
+      dialogItem: {},
     }
   },
   mounted() {
+    this.getTableData()
+    this.getDownList()
   },
   methods: {
+    /**
+     * @description: 模糊搜索
+     * @param {*} str 模糊搜索字段
+     * @return {*}
+     */
+    handleRemoteMethod(str) {
+      this.interForm.name = str;
+      this.getDownList();
+    },
+    /**
+     * @description: 获取下拉数据
+     * @param {*}
+     * @return {*}
+     */
+    getDownList() {
+      getDropDown({ name: this.interForm.name }).then(({ code, data }) => {
+        if (code === 200) {
+          this.segmentList = data
+        }
+      })
+    },
+    /**
+     * @description: 点击搜索
+     * @param {*}
+     * @return {*}
+     */
+    handleQuery() {
+      this.searchForm = JSON.parse(JSON.stringify(this.interForm));
+      this.pagination.pageNum = 1;
+      this.getTableData();
+    },
+
+    /**
+     * @description: 点击重置
+     * @param {*}
+     * @return {*}
+     */
+    resetQuery() {
+      this.interForm = {
+        name: "",
+        defectType: "",
+      }
+      this.searchForm = {}
+    },
+
+    /**
+     * @description: 点击新增事件
+     * @param {*}
+     * @return {*}
+     */
+    handleAdd() {
+      this.addVisible = true;
+      this.dialogItem = {};
+    },
+
+    /**
+     * @description: 获取列表数据
+     * @param {*}
+     * @return {*}
+     */
+    getTableData() {
+      const dataItem = {
+        ...this.searchForm,
+        ...this.pagination,
+      }
+      getList(dataItem).then(({ rows, code, total }) => {
+        if (code === 200) {
+          this.interList = rows;
+          this.tableTotal = total;
+        }
+      })
+    },
+    /**
+ * @description: 列表选择改变事件
+ * @param {*}
+ * @return {*}
+ */
+    handleSelectionChange(selection) {
+      this.checkIds = selection.map((item) => item.id);
+      this.multiple = !selection.length;
+    },
+
+    /**
+     * @description: 点击编辑事件
+     * @param {*}
+     * @return {*}
+     */
+    handleUpdate(value) {
+      this.addVisible = true;
+      this.dialogItem = value;
+    },
+
+    /**
+     * @description: 点击删除事件
+     * @param {*}
+     * @return {*}
+     */
+    handleDelete(row) {
+      // const checkIds = row ? row.id : this.checkIds;
+      // if (!checkIds.length) {
+      //   this.$modal.msgWarning("请选择要删除的记录");
+      //   return;
+      // }
+      this.$modal
+        .confirm(`是否确认删除选中的1条记录？`)
+        .then(() => {
+          return delData(row.id);
+        })
+        .then(() => {
+          this.getTableData();
+          // this.$refs.defectTable.clearSelection();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => { });
+    },
+
+    /**
+     * @description: 切换分页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleCurrentChange(arg) {
+      this.pagination.pageNum = arg;
+      this.getTableData();
+    },
+
+    /**
+     * @description: 切换每条/页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleSizeChange(arg) {
+      this.pagination.pageSize = arg;
+      this.getTableData();
+    },
+
+    /**
+   * @description: 关闭弹窗事件
+   * @param {*}
+   * @return {*}
+   */
+    addCancel() {
+      this.addVisible = false;
+      this.dialogItem = {};
+      this.getTableData();
+    }
   },
 }
 </script>
@@ -32,4 +276,12 @@ export default {
   padding: 1rem;
   overflow-y: auto;
 }
+
+/* 分页样式 */
+.pagination-part {
+  width: 100%;
+  display: flex;
+  padding-top: 1rem;
+  justify-content: flex-end;
+}
 </style>

src/views/xj/inspection/disease-management/index.vue

@@ -9,51 +9,22 @@
 <template>
   <div class="app-container">
     <!-- 搜索表单 -->
-    <el-form
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
-      :model="queryParams"
-      ref="queryForm"
-      size="small"
-      :inline="true"
-      v-show="showSearch"
-      label-width="100px"
-    >
       <el-form-item label="道路名称" prop="segmentId">
-        <el-select
+        <el-select v-model="queryParams.segmentId" placeholder="请选择路段" filterable clearable>
-          v-model="queryParams.segmentId"
+          <el-option v-for="item in segmentList" :key="item.value" :label="item.label" :value="item.value" />
-          placeholder="请选择路段"
-          filterable
-          clearable
-        >
-          <el-option
-            v-for="item in segmentList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
         </el-select>
       </el-form-item>
       <el-form-item label="采集时间" prop="dateTime">
-        <el-date-picker
+        <el-date-picker v-model="dateTime" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
-          v-model="dateTime"
+          format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable />
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          format="yyyy-MM-dd"
-          value-format="yyyy-MM-dd"
-          clearable
-        />
       </el-form-item>
       <el-form-item label="病害类型" prop="paramsDefectType">
-        <el-cascader
+        <el-cascader v-model="paramsDefectType" :options="tableDefect" :props="{
-          v-model="paramsDefectType"
-          :options="tableDefect"
-          :props="{
           checkStrictly: true,
           emitPath: true,
           children: 'subTypes',
-          }"
+        }" clearable></el-cascader>
-          clearable
-        ></el-cascader>
       </el-form-item>
       <!-- <el-form-item label="病害状态" prop="state">
         <el-select
@@ -70,167 +41,78 @@
         </el-select>
       </el-form-item> -->
       <el-form-item label="上下行" prop="inspectDirection">
-        <el-select
+        <el-select v-model="queryParams.inspectDirection" placeholder="请选择" clearable>
-          v-model="queryParams.inspectDirection"
-          placeholder="请选择"
-          clearable
-        >
           <el-option label="上行" value="0" />
           <el-option label="下行" value="1" />
         </el-select>
       </el-form-item>
       <el-form-item label="公里桩" prop="stakeRange">
-        <el-input
+        <el-input v-model="queryParams.stakeStart" placeholder="起始公里桩" style="width: 10rem" clearable />
-          v-model="queryParams.stakeStart"
-          placeholder="起始公里桩"
-          style="width: 10rem"
-          clearable
-        />
         <span style="margin: 0 5px">-</span>
-        <el-input
+        <el-input v-model="queryParams.stakeEnd" placeholder="终止公里桩" style="width: 10rem" clearable />
-          v-model="queryParams.stakeEnd"
+        <el-tooltip class="item" effect="dark" content="格式为K0000+000" placement="top">
-          placeholder="终止公里桩"
-          style="width: 10rem"
-          clearable
-        />
-        <el-tooltip
-          class="item"
-          effect="dark"
-          content="格式为K0000+000"
-          placement="top"
-        >
           <i class="el-icon-info"></i>
         </el-tooltip>
       </el-form-item>
       <el-form-item label="病害id" prop="id">
-        <el-input
+        <el-input v-model="queryParams.id" placeholder="请填写病害id" clearable />
-          v-model="queryParams.id"
-          placeholder="请填写病害id"
-          clearable
-        />
       </el-form-item>
       <el-form-item label="病害长度" prop="lengthRange">
-        <el-input-number
+        <el-input-number v-model="queryParams.minLen" controls-position="right" placeholder="最小长度"
-          v-model="queryParams.minLen"
+          :min="0"></el-input-number>
-          controls-position="right"
-          placeholder="最小长度"
-          :min="0"
-        ></el-input-number>
         <span style="margin: 0 5px">-</span>
-        <el-input-number
+        <el-input-number v-model="queryParams.maxLen" controls-position="right" placeholder="最大长度"
-          v-model="queryParams.maxLen"
+          :min="0"></el-input-number>
-          controls-position="right"
-          placeholder="最大长度"
-          :min="0"
-        ></el-input-number>
       </el-form-item>
       <el-form-item label="快照id" prop="snapshotId">
-        <el-input
+        <el-input v-model="queryParams.snapshotId" placeholder="请填写快照id" clearable />
-          v-model="queryParams.snapshotId"
-          placeholder="请填写快照id"
-          clearable
-        />
       </el-form-item>
       <el-form-item label="病害面积" prop="areaRange">
-        <el-input-number
+        <el-input-number v-model="queryParams.minArea" controls-position="right" placeholder="最小面积"
-          v-model="queryParams.minArea"
+          :min="0"></el-input-number>
-          controls-position="right"
-          placeholder="最小面积"
-          :min="0"
-        ></el-input-number>
         <span style="margin: 0 5px">-</span>
-        <el-input-number
+        <el-input-number v-model="queryParams.maxArea" controls-position="right" placeholder="最大面积"
-          v-model="queryParams.maxArea"
+          :min="0"></el-input-number>
-          controls-position="right"
-          placeholder="最大面积"
-          :min="0"
-        ></el-input-number>
       </el-form-item>
       <el-form-item label="巡检任务" prop="taskId">
-        <el-select
+        <el-select v-model="queryParams.taskId" placeholder="请选择巡检任务" filterable clearable>
-          v-model="queryParams.taskId"
+          <el-option v-for="item in taskList" :key="item.value" :label="item.label" :value="item.value" />
-          placeholder="请选择巡检任务"
-          filterable
-          clearable
-        >
-          <el-option
-            v-for="item in taskList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
         </el-select>
       </el-form-item>
       <el-form-item label="是否已确认" prop="dataStatus">
-        <el-select
+        <el-select v-model="queryParams.dataStatus" placeholder="请选择" clearable>
-          v-model="queryParams.dataStatus"
-          placeholder="请选择"
-          clearable
-        >
           <el-option label="确认" value="2" />
           <el-option label="未确认" value="1" />
           <el-option label="不是病害" value="3" />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          type="primary"
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          icon="el-icon-search"
-          size="mini"
-          @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-          >重置</el-button
-        >
       </el-form-item>
     </el-form>
 
     <!-- 操作按钮 -->
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-          type="primary"
+          v-hasPermi="['xj:defect:add']">新增
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['xj:defect:add']"
-          >新增
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete('')"
-          type="danger"
+          v-hasPermi="['xj:defect:remove']">删除
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete('')"
-          v-hasPermi="['xj:defect:remove']"
-          >删除
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="success" plain icon="el-icon-top-right" size="mini" @click="handleExport">导出
-          type="success"
-          plain
-          icon="el-icon-top-right"
-          size="mini"
-          @click="handleExport"
-          >导出
         </el-button>
       </el-col>
     </el-row>
 
     <!-- 数据表格 -->
-    <el-table
+    <el-table ref="defectTable" v-loading="loading" :data="defectList" @selection-change="handleSelectionChange"
-      ref="defectTable"
+      style="width: 100%">
-      v-loading="loading"
-      :data="defectList"
-      @selection-change="handleSelectionChange"
-      style="width: 100%"
-    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="路段名称" align="center" prop="segmentName" />
       <el-table-column label="采集时间" align="center" prop="createdTime">
@@ -260,17 +142,12 @@
       <el-table-column label="结束桩号" align="center" prop="stakeEnd" />
       <el-table-column label="病害图片" align="center" prop="media">
         <template slot-scope="scope">
-          <img
+          <img @click="showScreenImg(scope.row)" height="50" :src="scope.row.mediaUrl" />
-            @click="showScreenImg(scope.row)"
-            height="50"
-            :src="scope.row.mediaUrl"
-          />
         </template>
       </el-table-column>
       <el-table-column label="病害长度" align="center" prop="targetLen">
         <template slot-scope="scope">
-          {{ scope.row.targetLen * 1 <= 0 ? "" : `${scope.row.targetLen}米` }}
+          {{ scope.row.targetLen * 1 <= 0 ? "" : `${scope.row.targetLen}米` }} </template>
-        </template>
       </el-table-column>
       <el-table-column label="病害面积" align="center" prop="targetArea" />
       <el-table-column label="道路方向" align="center" prop="inspectDirection">
@@ -280,130 +157,58 @@
           }}</span>
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
-        label="操作"
-        align="center"
-        width="180"
-        class-name="small-padding fixed-width"
-      >
         <template slot-scope="scope">
-          <el-button
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="viewDefect(scope.row)">查看
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="viewDefect(scope.row)"
-            >查看
           </el-button>
-          <el-button
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-            size="mini"
+            v-hasPermi="['xj:defect:edit']">修改
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['xj:defect:edit']"
-            >修改
           </el-button>
-          <el-button
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-            size="mini"
+            v-hasPermi="['xj:defect:remove']">删除
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['xj:defect:remove']"
-            >删除
           </el-button>
-          <el-button
+          <el-button size="mini" type="text" icon="el-icon-bangzhu" @click="mergeDefect(scope.row)"
-            size="mini"
+            v-hasPermi="['xj:defect:edit']">合并
-            type="text"
-            icon="el-icon-bangzhu"
-            @click="mergeDefect(scope.row)"
-            v-hasPermi="['xj:defect:edit']"
-            >合并
           </el-button>
-          <el-button
+          <el-button size="mini" type="text" icon="el-icon-copy-document" v-if="scope.row.id !== scope.row.snapshotId"
-            size="mini"
+            @click="splitDefect(scope.row)" v-hasPermi="['xj:defect:edit']">拆分
-            type="text"
-            icon="el-icon-copy-document"
-            v-if="scope.row.id !== scope.row.snapshotId"
-            @click="splitDefect(scope.row)"
-            v-hasPermi="['xj:defect:edit']"
-            >拆分
           </el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <!-- 分页组件 -->
-    <pagination
+    <pagination v-show="total > 0" :total="total" :page.sync="pagination.page" :limit.sync="pagination.size"
-      v-show="total > 0"
+      @pagination="getList" />
-      :total="total"
-      :page.sync="pagination.page"
-      :limit.sync="pagination.size"
-      @pagination="getList"
-    />
 
     <!-- 添加或修改缺陷对话框 -->
-    <el-dialog
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60rem" append-to-body
-      :title="dialogTitle"
+      :close-on-click-modal="false" destroy-on-close @close="cancel">
-      :visible.sync="dialogVisible"
-      width="60rem"
-      append-to-body
-      :close-on-click-modal="false"
-      destroy-on-close
-      @close="cancel"
-    >
       <template v-if="dialogVisible">
-        <el-form
+        <el-form class="addForm" ref="defectForm" :model="form" :rules="rules" label-width="100px">
-          class="addForm"
-          ref="defectForm"
-          :model="form"
-          :rules="rules"
-          label-width="100px"
-        >
           <el-row :gutter="24">
             <el-col :span="dialogTitle === '添加缺陷' ? 12 : 24">
               <el-form-item label="路段" prop="segmentId">
-                <el-select
+                <el-select v-model="form.segmentId" placeholder="请选择路段" clearable>
-                  v-model="form.segmentId"
+                  <el-option v-for="item in segmentList" :key="item.value" :label="item.label" :value="item.value" />
-                  placeholder="请选择路段"
-                  clearable
-                >
-                  <el-option
-                    v-for="item in segmentList"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="12" v-if="dialogTitle === '添加缺陷'">
               <el-form-item label="病害类型" prop="defectType">
-                <el-cascader
+                <el-cascader v-model="form.defectType" :options="tableDefect" :props="{
-                  v-model="form.defectType"
-                  :options="tableDefect"
-                  :props="{
                   checkStrictly: false,
                   emitPath: false,
                   children: 'subTypes',
-                  }"
+                }" clearable></el-cascader>
-                  clearable
-                ></el-cascader>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row :gutter="24">
             <el-col :span="24" v-if="dialogTitle != '添加缺陷'">
               <el-form-item label="校验状态" prop="dataStatus">
-                <el-select
+                <el-select v-model="form.dataStatus" placeholder="请选择校验状态" clearable>
-                  v-model="form.dataStatus"
+                  <el-option v-for="item in states" :key="item.value" :label="item.label" :value="item.value" />
-                  placeholder="请选择校验状态"
-                  clearable
-                >
-                  <el-option
-                    v-for="item in states"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -427,51 +232,31 @@
           <el-row :gutter="24">
             <el-col :span="12">
               <el-form-item label="开始桩号" prop="stakeStart">
-                <el-input
+                <el-input v-model="form.stakeStart" placeholder="请输入开始桩号" />
-                  v-model="form.stakeStart"
-                  placeholder="请输入开始桩号"
-                />
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="结束桩号" prop="stakeEnd">
-                <el-input
+                <el-input v-model="form.stakeEnd" placeholder="请输入结束桩号" />
-                  v-model="form.stakeEnd"
-                  placeholder="请输入结束桩号"
-                />
               </el-form-item>
             </el-col>
           </el-row>
           <el-row :gutter="24">
             <el-col :span="12">
               <el-form-item label="病害长度">
-                <el-input-number
+                <el-input-number v-model="form.targetLen" :min="0" placeholder="请输入病害长度" style="width: 100%" />
-                  v-model="form.targetLen"
-                  :min="0"
-                  placeholder="请输入病害长度"
-                  style="width: 100%"
-                />
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="病害面积">
-                <el-input-number
+                <el-input-number v-model="form.targetArea" :min="0" placeholder="请输入病害面积" style="width: 100%" />
-                  v-model="form.targetArea"
-                  :min="0"
-                  placeholder="请输入病害面积"
-                  style="width: 100%"
-                />
               </el-form-item>
             </el-col>
           </el-row>
           <el-row :gutter="24">
             <el-col :span="12">
               <el-form-item label="上下行" prop="inspectDirection">
-                <el-select
+                <el-select v-model="form.inspectDirection" placeholder="请选择上下行" clearable>
-                  v-model="form.inspectDirection"
-                  placeholder="请选择上下行"
-                  clearable
-                >
                   <el-option label="上行" value="0" />
                   <el-option label="下行" value="1" />
                 </el-select>
@@ -479,35 +264,15 @@
             </el-col>
           </el-row>
           <el-form-item label="病害位置">
-            <fssm-map
+            <fssm-map ref="diseaseMap" @map-click="getMapClick" class="no-hand-cursor"></fssm-map>
-              ref="diseaseMap"
-              @map-click="getMapClick"
-              class="no-hand-cursor"
-            ></fssm-map>
           </el-form-item>
           <el-form-item label="上传病害图片">
-            <el-upload
+            <el-upload ref="upload" accept=".jpg, .png" :action="upload.url" :headers="upload.headers"
-              ref="upload"
+              :file-list="upload.fileList" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
-              accept=".jpg, .png"
+              :auto-upload="false" list-type="picture">
-              :action="upload.url"
+              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
-              :headers="upload.headers"
+              <el-button style="margin-left: 1rem" size="small" type="success" :loading="upload.isUploading"
-              :file-list="upload.fileList"
+                @click="submitUpload">上传到服务器</el-button>
-              :on-progress="handleFileUploadProgress"
-              :on-success="handleFileSuccess"
-              :auto-upload="false"
-              list-type="picture"
-            >
-              <el-button slot="trigger" size="small" type="primary"
-                >选取文件</el-button
-              >
-              <el-button
-                style="margin-left: 1rem"
-                size="small"
-                type="success"
-                :loading="upload.isUploading"
-                @click="submitUpload"
-                >上传到服务器</el-button
-              >
               <div slot="tip" class="el-upload__tip">
                 只能上传jpg/png文件，且不超过500kb
               </div>
@@ -522,31 +287,16 @@
     </el-dialog>
 
     <!-- 查看病害详细信息对话框 -->
-    <el-dialog
+    <el-dialog title="查看病害详细信息" :visible.sync="openViewDialog" width="55rem" append-to-body destroy-on-close
-      title="查看病害详细信息"
+      @close="cancel">
-      :visible.sync="openViewDialog"
-      width="55rem"
-      append-to-body
-      destroy-on-close
-      @close="cancel"
-    >
       <template v-if="openViewDialog">
         <div>
           <!-- 上半部分 -->
           <div style="display: flex; flex-direction: column; height: 50%">
             <!-- 下拉选择框 -->
             <div>
-              <el-select
+              <el-select v-model="viewCheck" @change="changeView" placeholder="请选择">
-                v-model="viewCheck"
+                <el-option v-for="item in viewOptions" :key="item.value" :label="item.label" :value="item.value">
-                @change="changeView"
-                placeholder="请选择"
-              >
-                <el-option
-                  v-for="item in viewOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
                 </el-option>
               </el-select>
             </div>
@@ -563,9 +313,7 @@
                 <p>病害类型：{{ viewForm.defectTypeName }}</p>
                 <p>
                   病害长度：{{
-                    viewForm.targetLen * 1 < 0 ? "" : `${viewForm.targetLen}米`
+                    viewForm.targetLen * 1 < 0 ? "" : `${viewForm.targetLen}米` }} </p>
-                  }}
-                </p>
                     <p>病害id：{{ viewForm.id }}</p>
                     <p>快照id：{{ viewForm.snapshotId }}</p>
               </div>
@@ -573,10 +321,7 @@
               <!-- 右侧图片展示 -->
               <div style="width: 50%; padding: 10px">
                 <el-carousel class="view-carousel" height="15rem">
-                  <el-carousel-item
+                  <el-carousel-item v-for="(img, index) in viewForm.media" :key="index">
-                    v-for="(img, index) in viewForm.media"
-                    :key="index"
-                  >
                     <img :src="img.img" alt="病害图片" />
                   </el-carousel-item>
                 </el-carousel>
@@ -586,10 +331,7 @@
 
           <!-- 下半部分显示天地图 -->
           <!-- <div id="viewMap" style="height: 300px; margin-top: 20px"></div> -->
-          <fssm-map
+          <fssm-map style="height: 300px; margin-top: 20px" ref="diseaseMap"></fssm-map>
-            style="height: 300px; margin-top: 20px"
-            ref="diseaseMap"
-          ></fssm-map>
         </div>
 
         <div slot="footer" class="dialog-footer">
@@ -599,45 +341,18 @@
     </el-dialog>
 
     <!-- 合并病害弹窗 -->
-    <el-dialog
+    <el-dialog title="合并病害" :visible.sync="mergeVisibleDialog" width="75rem" append-to-body destroy-on-close
-      title="合并病害"
+      @close="mergeCancel">
-      :visible.sync="mergeVisibleDialog"
+      <merge-dialog :segmentList="segmentList" :tableDefect="tableDefect" :defectStatus="defectStatus"
-      width="75rem"
+        :mergeItem="mergeItem" @mergeCancel="mergeCancel"></merge-dialog>
-      append-to-body
-      destroy-on-close
-      @close="mergeCancel"
-    >
-      <merge-dialog
-        :segmentList="segmentList"
-        :tableDefect="tableDefect"
-        :defectStatus="defectStatus"
-        :mergeItem="mergeItem"
-        @mergeCancel="mergeCancel"
-      ></merge-dialog>
     </el-dialog>
 
     <!-- 查看图片大图 -->
-    <el-dialog
+    <el-dialog title="查看图片" :visible.sync="showImageDialog" width="85rem" append-to-body destroy-on-close
-      title="查看图片"
+      @close="imgCancel">
-      :visible.sync="showImageDialog"
-      width="85rem"
-      append-to-body
-      destroy-on-close
-      @close="imgCancel"
-    >
       <div class="image-container" ref="imageContainer">
-        <img
+        <img :src="currentImageItem.mediaUrl" alt="Main Image" ref="mainImage" @load="updateRects" />
-          :src="currentImageItem.mediaUrl"
+        <div v-for="(rect, index) in rects" :key="index" class="rect-overlay" :style="getRectStyle(rect)"></div>
-          alt="Main Image"
-          ref="mainImage"
-          @load="updateRects"
-        />
-        <div
-          v-for="(rect, index) in rects"
-          :key="index"
-          class="rect-overlay"
-          :style="getRectStyle(rect)"
-        ></div>
         <div class="rect-image">
           采集时间:
           {{ new Date(currentImageItem.createdTime).toLocaleString() }}
@@ -646,11 +361,7 @@
           病害类型：
           {{ currentImageItem.defectTypeName || "暂无数据" }}
           病害面积：{{ currentImageItem.targetArea }}平方米 病害长度：{{
-            currentImageItem.targetLen * 1 <= 0
+            currentImageItem.targetLen * 1 <= 0 ? "暂无数据" : `${currentImageItem.targetLen}米` }} </div>
-              ? "暂无数据"
-              : `${currentImageItem.targetLen}米`
-          }}
-        </div>
         </div>
     </el-dialog>
   </div>
@@ -828,6 +539,8 @@ export default {
       states: [],
       // 病害状态下拉选项
       defectStatus: [],
+      // 图层打点对象
+      markLayerPoints: null,
       // 新增/编辑打点数组
       markers: [],
       // 查看弹窗选择绑定
@@ -1318,7 +1031,7 @@ export default {
           this.getList();
           this.$modal.msgSuccess("删除成功");
         })
-        .catch(() => {});
+        .catch(() => { });
     },
 
     /**
@@ -1382,7 +1095,7 @@ export default {
           this.getList();
           this.$modal.msgSuccess("拆分成功");
         })
-        .catch(() => {});
+        .catch(() => { });
     },
 
     /**
@@ -1567,13 +1280,16 @@ export default {
 .fixed-width {
   width: 120px;
 }
+
 /* 新增弹窗/编辑弹窗 */
 .addForm {
+
   .el-select,
   .el-cascader {
     width: 100%;
   }
 }
+
 /* 新增地图框样式 */
 .no-hand-cursor {
   cursor: default !important;