fix：单据工单联调，订阅联调

2024-11-28 11:12:21 +08:00 · 2024-11-28 11:12:21 +08:00 · 669552cce1
commit 669552cce1
parent 5d316b5e3b
12 changed files with 643 additions and 205 deletions
--- a/src/api/xj/document.js
+++ b/src/api/xj/document.js
@ -1,3 +1,12 @@
+/*
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-27 10:58:33
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-27 10:58:33
+ * @FilePath: \znxjxt-ui\src\api\xj\document.js
+ * @Description: 养护通知单相关接口
+ */
+
 import request from "@/utils/request";

 // 路段下拉数据
@ -24,3 +33,30 @@ export function getDefectStatus() {
    method: "get",
  });
 }
+
+// 获取养护通知单列表
+export function getMaintenanceNoticeList(params) {
+  return request({
+    url: "/maintenance-notice/list",
+    method: "get",
+    params,
+  });
+}
+
+// 生成养护通知单
+export function addMaintenanceNotice(data) {
+  return request({
+    url: "/maintenance-notice/create",
+    method: "post",
+    data,
+  });
+}
+
+// 根据id查询养护通知单
+export function getMaintenanceNoticeById(params) {
+  return request({
+    url: `/maintenance-notice/getNoticeByDefectId`,
+    method: "get",
+    params,
+  });
+}
--- a/src/api/xj/subscription.js
+++ b/src/api/xj/subscription.js
@ -0,0 +1,44 @@
+/*
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-20 11:58:33
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-20 15:49:28
+ * @FilePath: \znxjxt-ui\src\api\xj\subscription.js
+ * @Description: 订阅中心相关接口
+ */
+
+import request from "@/utils/request";
+
+/**
+ * @description: 获取订阅列表
+ * @return {Promise<any>} 
+ */
+export const getSubscriptionList = (data) => {
+  return request({
+    url: "/subscriptions/list",
+    method: "get",
+    params: data,
+  });
+};
+
+/**
+ * @description: 订阅
+ */
+export const subscribe = (data) => {
+  return request({
+    url: "/subscriptions/add",
+    method: "post",
+    data,
+  });
+};
+
+/**
+ * @description: 取消订阅
+ */
+export const unsubscribe = (data) => {
+  return request({
+    url: "/subscriptions/remove",
+    method: "post",
+    data,
+  });
+};
--- a/src/components/map/fssm-map.vue
+++ b/src/components/map/fssm-map.vue
@ -52,13 +52,7 @@ import { Tile as TileLayer } from "ol/layer";
 import { defaults as defaultControls } from "ol/control";
 import VectorLayer from "ol/layer/Vector";
 import { Vector as VectorSource } from "ol/source";
-import {
-  Draw,
-  Modify,
-  Select,
-  Snap,
-  defaults as defaultInteractions,
-} from "ol/interaction";
+import { Draw, Modify, Select, Snap } from "ol/interaction";
 import * as styleExports from "ol/style";
 import { Polygon, LineString } from "ol/geom";

@ -117,7 +111,7 @@ export default {
      default: () => [],
    },
    // 接收传过来的绘制线段数组
-    editCoordinatesLine:{
+    editCoordinatesLine: {
      type: Array,
      default: () => [],
    },
@ -635,7 +629,7 @@ export default {
     * @description: 删除绘制线段功能
     * @return {*}
     */
-    deleteLinedraw(){
+    deleteLinedraw() {
      const map = this.instance.get("map");
      map.removeInteraction(this.drawLine);
      this.drawLineLayer.getSource().clear();
--- a/src/views/big-screen/components/img-dialog.vue
+++ b/src/views/big-screen/components/img-dialog.vue
@ -153,25 +153,12 @@
                {{ item.stakeStart || "暂无数据" }} 终止桩号:
                {{ item.stakeEnd || "暂无数据" }}
                病害类型:
-                {{ item.type || "暂无数据" }} 病害面积：{{ item.area }}平方米
-                病害长度{{ item.length }}米</el-checkbox
-              >
+                {{ item.type || "暂无数据" }}
+                <span v-if="bottomTipClick === '1'">
+                  病害面积：{{ item.area }}平方米 病害长度{{ item.length }}米
+                </span>
+              </el-checkbox>
            </el-checkbox-group>
-            <!-- <div
-              class="image-info"
-              v-for="(item, index) in rectItem"
-              :key="`image-info-${index}`"
-              :style="{ color: colorList[index] }"
-            >
-            
-              采集时间:
-              {{ new Date(item.createdTime).toLocaleString() }} 起始桩号:
-              {{ item.stakeStart || "暂无数据" }} 终止桩号:
-              {{ item.stakeEnd || "暂无数据" }}
-              病害类型:
-              {{ item.type || "暂无数据" }} 病害面积：{{ item.area }}平方米
-              病害长度{{ item.length }}米
-            </div> -->
          </div>
          <img
            :src="currentImage"
--- a/src/views/big-screen/index.vue
+++ b/src/views/big-screen/index.vue
@ -26,7 +26,7 @@
            placement="bottom-end"
            width="400"
            popper-class="screen-message-popover"
-            trigger="click"
+            trigger="hover"
          >
            <div class="screen-message-content">
              <div class="message-content">
@ -511,7 +511,10 @@ export default {
    // this.initWebSocket();
  },
  methods: {
-    /* 获取当前时间 */
+    /**
+     * @description: 获取当前时间
+     * @return {*}
+     */
    setTime() {
      this.timeFlag = setInterval(() => {
        const weekMap = [
@ -544,7 +547,10 @@ export default {
      }, 1000);
    },

-    /* 获取消息中心数据 */
+    /**
+     * @description: 获取消息中心数据
+     * @return {void} 
+     */
    getMessageList() {
      // getMessageList().then(({ code, data }) => {
      //   if (code === 200) {
@ -592,7 +598,10 @@ export default {
      this.$router.push("/inspection_warn/warning-center");
    },

-    /* 获取数据栏右上角选项数据 */
+    /**
+     * @description: 获取数据栏右上角选项数据
+     * @return {void} 
+     */
    getSelect() {
      selectTypeList().then(({ code, data }) => {
        if (code === 200) {
@ -601,7 +610,10 @@ export default {
      });
    },
    
-    /* 获取路段下拉数据 */
+    /**
+     * @description: 获取路段下拉数据
+     * @return {void} 
+     */
    getRoadList() {
      getRoadListTypes().then(({ code, data }) => {
        if (code === 200) {
@ -610,7 +622,10 @@ export default {
      });
    },

-    /* 获取图片背景左上角病害类型下拉 */
+    /**
+     * @description: 获取图片背景左上角病害类型下拉
+     * @return {void} 
+     */
    getDieaseTypeList() {
      getDefectTypes().then(({ code, data }) => {
        if (code === 200) {
@ -619,7 +634,10 @@ export default {
      });
    },

-    /* 获取图片背景下坐标数据 */
+    /**
+     * @description: 获取图片背景下坐标数据
+     * @return {void} 
+     */
    getMapCare(value) {
      const data = {
        classType: value ? value[0] : "",
@ -632,7 +650,10 @@ export default {
      });
    },

-    /* 点击病害日志详情打开弹窗进行地图打点 */
+    /**
+     * @description: 点击病害日志详情打开弹窗进行地图打点
+     * @return {void} 
+     */
    getimagePoint(item) {
      this.imgTitle = "查看";
      this.imageItem = item;
@ -650,20 +671,29 @@ export default {
      this.getCenterPiont();
    },

-    /* 关闭图片查看弹窗 */
+    /**
+     * @description: 关闭图片查看弹窗
+     * @return {void} 
+     */
    imgCancel() {
      this.imgTitle = "";
      this.imageItem = {};
      this.imgVisible = false;
    },

-    /* 关闭查看点位大图弹窗 */
+    /**
+     * @description: 关闭查看点位大图弹窗
+     * @return {void} 
+     */
    screenImgCancel() {
      this.$refs.roadMap.removeSelectClick();
      this.showImageDialog = false;
    },

-    /* 切换icon类型多选框事件 */
+    /**
+     * @description: 切换icon类型多选框事件
+     * @return {void} 
+     */
    handleChecked(value) {
      this.centerPiont = this.drawPointList.filter(
        (item) => value.indexOf(item.iconType) > -1
@ -676,7 +706,10 @@ export default {
      });
    },

-    /* 获取地图点位信息 */
+    /**
+     * @description: 获取地图点位信息
+     * @return {void} 
+     */
    getCenterPiont() {
      // 如果当前已经有打点坐标
      if (this.clusters) {
@ -719,7 +752,10 @@ export default {
      });
    },

-    /* 绘制地图点位 */
+    /**
+     * @description: 绘制地图点位
+     * @return {void} 
+     */
    drawPoint() {
      const features = [];
      this.centerPiont.forEach((element) => {
@ -815,7 +851,10 @@ export default {
      });
    },

-    /* 获取地图线段点位信息 */
+    /**
+     * @description: 获取地图线段点位信息
+     * @return {void} 
+     */
    getLinePoint() {
      if (!this.markLayerLines) {
        mapPciList().then(({ code, data }) => {
@ -827,7 +866,10 @@ export default {
      }
    },

-    /* 绘制地图线段 */
+    /**
+     * @description: 绘制地图线段
+     * @return {void} 
+     */
    drawLine() {
      const features = [];
      this.lineString.forEach((element) => {
@ -856,6 +898,16 @@ export default {
                color: "#ffffff",
              }),
            }),
+            // text: new Text({
+            //   text: "121454",
+            //   color: "#ffffff",
+            //   textAlign: "center", //位置
+            //   textBaseline: "middle",
+            //   offsetY: 0,
+            //   fill: new Fill({
+            //     color: "#ffffff",
+            //   }),
+            // }),
          }),
        ]);
        features.push(line);
@ -875,7 +927,11 @@ export default {
      });
    },

-    /* 地图线段颜色区分 */
+    /**
+     * @description: 地图线段颜色区分
+     * @param {number} value 
+     * @return {string} 
+     */
    getLineColor(value) {
      if (value > 92) {
        return "#0ABE67";
@ -890,7 +946,11 @@ export default {
      }
    },
    
-    /* 地图下方4图标类别切换点击事件 */
+    /**
+     * @description: 地图下方4图标类别切换点击事件
+     * @param {string} value 
+     * @return {void} 
+     */
    changeIconType(value) {
      if (this.bottomTipClick !== value) {
        this.bottomTipClick = value;
@ -908,7 +968,10 @@ export default {
      }
    },

-    /* 获取icon多选数据 */
+    /**
+     * @description: 获取icon多选数据
+     * @return {void} 
+     */
    getIconType() {
      this.mapLogeList = {};
      getItemTypes({
@ -927,7 +990,11 @@ export default {
      });
    },

-    /* 传回来的地图图层 */
+    /**
+     * @description: 传回来的地图图层
+     * @param {number} zoom 
+     * @return {void} 
+     */
    getZoom(zoom) {
      this.mapZoom = zoom;
      if (this.clusters && zoom * 1 > 15) {
@ -937,7 +1004,11 @@ export default {
      }
    },

-    /* 地图选中feature事件 */
+    /**
+     * @description: 地图选中feature事件
+     * @param {object} e 
+     * @return {void} 
+     */
    featureSelect(e) {
      const map = this.$refs.roadMap.instance.get("map");
      const selectedFeatures = e.selected;
@ -970,7 +1041,11 @@ export default {
      }
    },

-    /* 数据栏切换事件 */
+    /**
+     * @description: 数据栏切换事件
+     * @param {object} item 
+     * @return {void} 
+     */
    changeElement(item) {
      if (this.elementDiv !== item) {
        this.elementDiv = item.component;
@ -1137,12 +1212,18 @@ export default {
      }
    },

-    /* 跳转系统首页 */
+    /**
+     * @description: 跳转系统首页
+     * @return {void} 
+     */
    goIndex() {
      this.$router.push("/index");
    },

-    /* 图片位置信息获取 */
+    /**
+     * @description: 图片位置信息获取
+     * @return {void} 
+     */
    updateScreenRects() {
      1;
      this.screenRects = [];
@ -1158,7 +1239,14 @@ export default {
      ];
    },

-    /* 图片红框位置 */
+    /**
+     * @description: 图片红框位置
+     * @param {object} left 
+     * @param {object} top 
+     * @param {object} width 
+     * @param {object} height 
+     * @return {object} 
+     */
    getScreenRectStyle({ left, top, width, height }) {
      const image = this.$refs.mainImage;
      const container = this.$refs.imageContainer;
@ -1185,7 +1273,10 @@ export default {
      };
    },

-    /* 初始化websocket */
+    /**
+     * @description: 初始化websocket
+     * @return {void} 
+     */
    initWebSocket() {
      const url = `ws://192.168.1.188:8080/websocket?token=${getToken()}`;
      const data = { type: "carLocation", status: true };
@ -1202,7 +1293,10 @@ export default {
      );
    },

-    /* 发送消息 */
+    /**
+     * @description: 发送消息
+     * @return {void} 
+     */
    sendMsg() {
      sendMsg(5555); //value是发送的值
      // this.value = "";
--- a/src/views/xj/document/maintenance-notice/components/edit-dialog.vue
+++ b/src/views/xj/document/maintenance-notice/components/edit-dialog.vue
@ -19,7 +19,6 @@
        <el-col :span="24">
          <el-form-item label="道路名称:" prop="segmentId">
            <el-select
-              disabled
              v-model="editForm.segmentId"
              placeholder="请选择路段"
              clearable
@ -38,7 +37,6 @@
        <el-col :span="12">
          <el-form-item label="开始桩号:" prop="stakeStart">
            <el-input
-              disabled
              v-model="editForm.stakeStart"
              placeholder="请输入开始桩号"
            />
@ -47,7 +45,6 @@
        <el-col :span="12">
          <el-form-item label="结束桩号:" prop="stakeEnd">
            <el-input
-              disabled
              v-model="editForm.stakeEnd"
              placeholder="请输入结束桩号"
            />
@ -56,21 +53,21 @@
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
-          <el-form-item label="养护负责人:" prop="projectLeader">
+          <el-form-item label="养护负责人:" prop="receiver">
            <el-input
              clearable
-              v-model="editForm.projectLeader"
+              v-model="editForm.receiver"
              placeholder="请输入负责人名称"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
-        <el-form-item label="养护内容:" prop="content">
+        <el-form-item label="养护内容:" prop="taskDescription">
          <fssm-scroll style="max-height: 10rem">
            <div
              class="content-box"
-              v-for="(item, index) in editForm.content"
+              v-for="(item, index) in editForm.taskDescription"
              :key="`content-box-${index}`"
            >
              <el-col :span="21">
@ -78,7 +75,7 @@
                  type="textarea"
                  resize="none"
                  placeholder="请输入养护内容"
-                  v-model="editForm.content[index]"
+                  v-model="editForm.taskDescription[index]"
                />
              </el-col>
              <el-col :span="2">
@ -107,13 +104,26 @@

 <script>
 import FssmScroll from "@/components/scroll/fssm-scroll.vue";
+import { addMaintenanceNotice } from "@/api/xj/document";
 export default {
  name: "EditDialog",
  components: { FssmScroll },
+  props: {
+    dialogItem: {
+      type: Object,
+      default: () => {},
+    },
+    segmentList: {
+      type: Array,
+      default: () => [],
+    },
+  },
  data() {
    return {
      // 编辑表单
      editForm: {
+        // 病害id
+        defectId: "",
        // 道路名称
        segmentId: "",
        // 开始桩号
@ -121,18 +131,25 @@ export default {
        // 结束桩号
        stakeEnd: "",
        // 养护单位项目负责人
-        projectLeader: "",
+        receiver: "",
        // 养护内容
-        content: ["asdadasda", "asdasfddd"],
+        taskDescription: [""],
      },
-      // 路段列表
-      segmentList: [],
      // 表单验证规则
      rules: {
-        projectLeader: [
+        segmentId: [
+          { required: true, message: "请选择路段", trigger: "change" },
+        ],
+        stakeStart: [
+          { required: true, message: "请输入开始桩号", trigger: "blur" },
+        ],
+        stakeEnd: [
+          { required: true, message: "请输入结束桩号", trigger: "blur" },
+        ],
+        receiver: [
          { required: true, message: "请输入负责人名称", trigger: "blur" },
        ],
-        content: [
+        taskDescription: [
          {
            type: "array",
            required: true,
@ -146,19 +163,40 @@ export default {
      },
    };
  },
+  watch: {
+    dialogItem: {
+      handler(val) {
+        this.editForm = {
+          ...val,
+          id: null,
+          defectId: val.id,
+          createdTime: null,
+          taskDescription: [
+            `${val.createdTimeLocal}  ${val.roadName || ""}-${
+              val.segmentName || ""
+            } 主线 ${val.stakeStart || ""}-${val.stakeEnd || ""} 有${
+              val.defectTypeName
+            }`,
+          ],
+        };
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
  methods: {
    /**
     * @description: 添加养护内容
     */
    handleAddContent() {
-      this.editForm.content.push("");
+      this.editForm.taskDescription.push("");
    },

    /**
     * @description: 删除养护内容
     */
    handleDeleteContent(index) {
-      this.editForm.content.splice(index, 1);
+      this.editForm.taskDescription.splice(index, 1);
    },

    /**
@ -174,8 +212,14 @@ export default {
    submitForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
-          console.log(this.editForm);
+          addMaintenanceNotice(this.editForm).then(({ code, data }) => {
+            if (code === 200) {
+              this.$message.success("生成成功");
              this.$emit("cancel");
+            } else {
+              this.$message.error(data);
+            }
+          });
        }
      });
    },
--- a/src/views/xj/document/maintenance-notice/components/view-dialog.vue
+++ b/src/views/xj/document/maintenance-notice/components/view-dialog.vue
@ -9,28 +9,30 @@
 <template>
  <div class="view-content">
    <div class="view-title">高速公路道路养护作业通知单</div>
-    <div class="view-title-card">编号：</div>
+    <div class="view-title-card">编号：{{ viewData.noticeNo || "" }}</div>
    <div class="view-table">
      <div class="view-table-top">
        <div class="left-item">
          <div class="left-item-content">
            <div class="name">通知时间</div>
-            <div class="value">2024年-11月-20日10:32</div>
+            <div class="value">{{ viewData.issueDate || "" }}</div>
          </div>
          <div class="left-item-content">
            <div class="name">作业完成时间</div>
-            <div class="value">2024年-11月20日 18:00</div>
+            <div class="value">{{ viewData.handleTime || "" }}</div>
          </div>
        </div>
        <div class="left-item-title">地点</div>
        <div class="left-item">
          <div class="left-item-content">
            <div class="name">里程桩号</div>
-            <div class="value">2024年-11月-20日10:32</div>
+            <div class="value">
+              {{ viewData.stakeStart || "" }}{{ viewData.stakeEnd || "" }}
+            </div>
          </div>
          <div class="left-item-content">
            <div class="name">位置</div>
-            <div class="value">2024年-11月20日 18:00</div>
+            <div class="value">{{ viewData.segmentName }}</div>
          </div>
        </div>
      </div>
@ -43,7 +45,7 @@
        <fssm-scroll :showBar="false" style="max-height: 16rem">
          <div
            class="content-left-item"
-            v-for="(item, index) in tableContent"
+            v-for="(item, index) in viewData.taskDescription"
            :key="`content-left-item-${index}`"
          >
            <div class="name">{{ index + 1 }}</div>
@ -56,30 +58,55 @@
        </fssm-scroll>
      </div>
      <div class="view-table-bottom">
-        <span>管理处道路养护工程师：</span>
-        <span>制表人：</span>
-        <span>养护单位项目负责人：</span>
+        <span>管理处道路养护工程师：{{ viewData.creator || "" }}</span>
+        <span>制表人：{{ viewData.creator || "" }}</span>
+        <span>养护单位项目负责人：{{ viewData.receiver || "" }}</span>
      </div>
    </div>
  </div>
 </template>

 <script>
-import fssmScroll from "../../../../../components/scroll/fssm-scroll.vue";
+import { getMaintenanceNoticeById } from "@/api/xj/document";
+import fssmScroll from "@/components/scroll/fssm-scroll.vue";
 export default {
  components: { fssmScroll },
  name: "ViewDialog",
+  props: {
+    dialogItem: {
+      type: Object,
+      default: () => {},
+    },
+  },
  data() {
    return {
-      // 养护作业项目
-      tableContent: [
-        "2024年-11月-20日18:00沈吉高速-沈抚段主线K0+000-K45+000双向 LJ↑,LJ↓沈吉线 K0-45 硬路肩有垃圾",
-        "2024年-11月-20日18:00沈吉高速-沈抚段主线K0+000-K45+000双向 LJ↑,LJ↓沈吉线 K0-45 硬路肩有垃圾",
-        "2024年-11月-20日18:00沈吉高速-沈抚段主线K0+000-K45+000双向 LJ↑,LJ↓沈吉线 K0-45 硬路肩有垃圾",
-      ],
+      // 查看数据
+      viewData: {},
    };
  },
-  methods: {},
+  watch: {
+    dialogItem: {
+      handler(val) {
+        this.getNoticeById(val.id);
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    /**
+     * @description: 根据id查询养护通知单
+     * @param {*} id
+     * @return {*}
+     */
+     getNoticeById(id) {
+      getMaintenanceNoticeById({ id }).then(({ code, data }) => {
+        if (code === 200) {
+          this.viewData = data;
+        }
+      });
+    },
+  },
 };
 </script>

--- a/src/views/xj/document/maintenance-notice/index.vue
+++ b/src/views/xj/document/maintenance-notice/index.vue
@ -10,6 +10,7 @@
  <div class="content">
    <el-form
      :model="noticeForm"
+      :rules="noticeFormRules"
      ref="noticeForm"
      size="small"
      :inline="true"
@ -163,31 +164,57 @@
            v-if="item.status === '2'"
            style="color: #e6a23c"
            class="el-icon-info"
+          ></i>
+          <i
+            v-if="item.status === '3'"
+            style="color: #909399"
+            class="el-icon-warning"
          ></i
          >{{ item.title }}</span
        >
        <!-- 表格 -->
        <el-table
+          class="notice-table"
          ref="noticeTable"
          :data="noticeList"
          v-loading="loading"
          style="width: 100%"
        >
          <el-table-column type="index" label="序号"> </el-table-column>
-          <el-table-column
-            width="200"
-            label="时间"
-            align="center"
-            prop="segmentName"
-          >
+          <el-table-column label="路段名称" align="center" prop="segmentName" />
+          <el-table-column label="采集时间" align="center" prop="createdTime">
            <template slot-scope="scope">
-              <span class="table-index">asd</span>
-              {{ scope.row.segmentName }}
+              <span>{{
+                new Date(scope.row.createdTime).toLocaleString()
+              }}</span>
            </template>
          </el-table-column>
-          <el-table-column label="消息内容" align="center" prop="stakeStart" />
-          <el-table-column label="车牌号" align="center" prop="stakeEnd" />
-          <el-table-column label="设备id" align="center" prop="stakeEnd" />
+          <el-table-column
+            label="病害类型"
+            align="center"
+            prop="defectTypeName"
+          >
+          </el-table-column>
+          <el-table-column label="开始桩号" align="center" prop="stakeStart" />
+          <el-table-column label="结束桩号" align="center" prop="stakeEnd" />
+          <el-table-column label="病害图片" align="center" prop="media">
+            <template slot-scope="scope">
+              <img
+                @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}米`
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column label="病害面积" align="center" prop="targetArea" />
+          <el-table-column label="状态" align="center" prop="noticeStatus" />
          <el-table-column
            label="操作"
            align="center"
@ -195,7 +222,7 @@
          >
            <template slot-scope="scope">
              <el-button
-                v-if="activeName === '1'"
+                v-if="activeName === '已生成'"
                size="mini"
                type="text"
                icon="el-icon-view"
@ -204,16 +231,16 @@
                >查看
              </el-button>
              <el-button
-                v-if="activeName === '2'"
+                v-if="activeName === '未生成'"
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:defect:edit']"
-                >编辑
+                >生成工单
              </el-button>
              <el-button
-                v-if="activeName === '1'"
+                v-if="activeName === '已生成'"
                size="mini"
                type="text"
                icon="el-icon-delete"
@ -250,7 +277,12 @@
      destroy-on-close
      @close="editCancel"
    >
-      <edit-dialog v-if="editVisible" @cancel="editCancel" />
+      <edit-dialog
+        v-if="editVisible"
+        :segmentList="segmentList"
+        :dialogItem="dialogItem"
+        @cancel="editCancel"
+      />
    </el-dialog>

    <!-- 查看弹窗 -->
@ -263,7 +295,36 @@
      destroy-on-close
      @close="viewCancel"
    >
-      <view-dialog v-if="viewVisible" @cancel="viewCancel" />
+      <view-dialog
+        v-if="viewVisible"
+        :dialogItem="dialogItem"
+        @cancel="viewCancel"
+      />
+    </el-dialog>
+
+    <!-- 查看图片大图 -->
+    <el-dialog
+      title="查看图片"
+      :visible.sync="showImageDialog"
+      width="75rem"
+      append-to-body
+      destroy-on-close
+      @close="imgCancel"
+    >
+      <div class="image-container" ref="imageContainer">
+        <img
+          :src="currentImageItem.mediaUrl"
+          alt="Main Image"
+          ref="mainImage"
+          @load="updateRects"
+        />
+        <div
+          v-for="(rect, index) in rects"
+          :key="index"
+          class="rect-overlay"
+          :style="getRectStyle(rect)"
+        ></div>
+      </div>
    </el-dialog>
  </div>
 </template>
@ -271,7 +332,12 @@
 <script>
 import EditDialog from "./components/edit-dialog.vue";
 import ViewDialog from "./components/view-dialog.vue";
-import { getSegment, getDefectList, getDefectStatus } from "@/api/xj/document";
+import {
+  getSegment,
+  getDefectList,
+  getDefectStatus,
+  getMaintenanceNoticeList,
+} from "@/api/xj/document";
 export default {
  name: "MaintenanceNotice",
  components: {
@ -289,17 +355,48 @@ export default {
        // 上下行
        inspectDirection: "",
        // 公里桩
-        stakeStart: "",
-        stakeEnd: "",
+        stakeStart: undefined,
+        stakeEnd: undefined,
        // 病害长度
-        minLen: "",
-        maxLen: "",
+        minLen: undefined,
+        maxLen: undefined,
        // 病害面积
-        minArea: "",
-        maxArea: "",
+        minArea: undefined,
+        maxArea: undefined,
      },
      // 接口查询表单
      searchForm: {},
+      // 查询表单验证
+      noticeFormRules: {
+        stakeRange: [
+          {
+            required: false,
+            trigger: "blur",
+            validator: (rules, value, callback) => {
+              if (!this.noticeForm.stakeStart && !this.noticeForm.stakeEnd) {
+                callback();
+              }
+              // 验证公里桩格式 K1234+123
+              const pattern = /^K\d{4}\+\d{3}$/;
+              if (!pattern.test(this.noticeForm.stakeStart)) {
+                callback(new Error("起始公里桩格式错误"));
+                return;
+              }
+              if (!pattern.test(this.noticeForm.stakeEnd)) {
+                callback(new Error("终止公里桩格式错误"));
+                return;
+              }
+              callback();
+            },
+          },
+        ],
+        stakeStart: [
+          { required: true, pattern: /^K\d{4}\+\d{3}$/, trigger: "blur" },
+        ],
+        stakeEnd: [
+          { required: true, pattern: /^K\d{4}\+\d{3}$/, trigger: "blur" },
+        ],
+      },
      // 采集时间
      dateTime: [],
      // 病害类型
@ -311,11 +408,12 @@ export default {
      // 病害状态
      defectStatus: [],
      // 导航栏选择绑定
-      activeName: "1",
+      activeName: "已完成",
      // 导航栏列表
      editableTabs: [
-        { title: "已生成", value: "1",  status: "1" },
-        { title: "未生成", value: "2", status: "2" },
+        { title: "已完成", value: "已完成", status: "1" },
+        { title: "已生成", value: "已生成", status: "2" },
+        { title: "未生成", value: "未生成", status: "3" },
      ],

      // 表格加载状态
@ -331,10 +429,19 @@ export default {
        size: 10,
      },

+      // 编辑弹窗信息绑定
+      dialogItem: {},
      // 编辑弹窗显隐控制
      editVisible: false,
      // 查看弹窗显隐控制
      viewVisible: false,
+
+      // 查看图片大图弹窗显隐控制
+      showImageDialog: false,
+      // 查看大图片路径
+      currentImageItem: {},
+      // 图片病害位置信息
+      rects: [],
    };
  },
  created() {
@ -386,9 +493,13 @@ export default {
     * @return {*}
     */
    handleQuery() {
+      this.$refs.noticeForm.validate((valid) => {
+        if (valid) {
          this.searchForm = JSON.parse(JSON.stringify(this.noticeForm));
          this.pagination.page = 1;
          this.getList();
+        }
+      });
    },

    /**
@ -405,14 +516,14 @@ export default {
        // 上下行
        inspectDirection: "",
        // 公里桩
-        stakeStart: "",
-        stakeEnd: "",
+        stakeStart: undefined,
+        stakeEnd: undefined,
        // 病害长度
-        minLen: "",
-        maxLen: "",
+        minLen: undefined,
+        maxLen: undefined,
        // 病害面积
-        minArea: "",
-        maxArea: "",
+        minArea: undefined,
+        maxArea: undefined,
      };
      this.searchForm = {};
      this.pagination.page = 1;
@ -428,14 +539,20 @@ export default {
      const data = {
        ...this.searchForm,
        ...this.pagination,
-        activeName: this.activeName,
+        maintenanceStatus: this.activeName,
        startTime: this.dateTime ? this.dateTime[0] : "",
        endTime: this.dateTime ? this.dateTime[1] : "",
      };
-      setTimeout(() => {
-        this.noticeList = [{ id: "1", segmentName: "sSSSSSS" }];
+      getMaintenanceNoticeList(data)
+        .then(({ code, rows, total }) => {
+          if (code === 200) {
+            this.noticeList = rows;
+            this.tableTotal = total;
+          }
+        })
+        .finally(() => {
          this.loading = false;
-      }, 100);
+        });
    },

    /**
@ -444,6 +561,7 @@ export default {
     * @return {*}
     */
    handleView(row) {
+      this.dialogItem = row;
      this.viewVisible = true;
    },

@ -453,6 +571,7 @@ export default {
     * @return {*}
     */
    handleUpdate(row) {
+      this.dialogItem = row;
      this.editVisible = true;
    },

@ -501,6 +620,7 @@ export default {
     */
    editCancel() {
      this.editVisible = false;
+      this.dialogItem = {};
      this.getList();
    },

@ -510,8 +630,83 @@ export default {
     * @return {*}
     */
    viewCancel() {
+      this.dialogItem = {};
      this.viewVisible = false;
    },
+
+    /**
+     * @description: 打开查看图片弹窗
+     * @param {*} item
+     * @return {*}
+     */
+    showScreenImg(item) {
+      this.currentImageItem = item;
+      this.showImageDialog = true;
+    },
+
+    /**
+     * @description: 图片位置信息获取
+     * @param {*} val
+     * @return {*}
+     */
+    updateRects() {
+      this.rects = [];
+      this.rectsItem = {};
+      const rects = this.currentImageItem?.rect?.split(",").map(Number) || [];
+      this.rects = [
+        {
+          left: rects[0],
+          top: rects[1],
+          width: rects[2],
+          height: rects[3],
+        },
+      ];
+    },
+
+    /**
+     * @description: 图片红框位置
+     * @param {*} left
+     * @param {*} top
+     * @param {*} width
+     * @param {*} height
+     * @return {*}
+     */
+    getRectStyle({ left, top, width, height }) {
+      const image = this.$refs.mainImage;
+      const container = this.$refs.imageContainer;
+      if (!image || !container) return {};
+
+      const scaleX = container.clientWidth / image.naturalWidth;
+      const scaleY = container.clientHeight / image.naturalHeight;
+      const scale = Math.min(scaleX, scaleY);
+
+      const renderedWidth = image.naturalWidth * scale;
+      const renderedHeight = image.naturalHeight * scale;
+
+      const offsetX = (container.clientWidth - renderedWidth) / 2;
+      const offsetY = (container.clientHeight - renderedHeight) / 2;
+
+      return {
+        position: "absolute",
+        left: `${left * scale + offsetX}px`,
+        top: `${top * scale + offsetY}px`,
+        width: `${width * scale}px`,
+        height: `${height * scale}px`,
+        border: "2px solid #FF0000",
+        boxSizing: "border-box",
+      };
+    },
+
+    /**
+     * @description: 关闭查看图片弹窗
+     * @param {*} val
+     * @return {*}
+     */
+    imgCancel() {
+      this.showImageDialog = false;
+      this.currentImageItem = {};
+      this.rects = [];
+    },
  },
 };
 </script>
@ -521,6 +716,7 @@ export default {
  width: 100%;
  height: calc(100vh - 5.4rem);
  padding: 1rem;
+  overflow-y: auto;
 }

 /* 分页样式 */
@ -530,4 +726,27 @@ export default {
  padding-top: 1rem;
  justify-content: flex-end;
 }
+
+/* 查看大图弹窗 */
+.image-container {
+  position: relative;
+  width: 100%;
+  height: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.image-container img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.rect-overlay {
+  position: absolute;
+  pointer-events: none;
+  border: 2px solid red;
+}
 </style>
--- a/src/views/xj/inspection/confirmation-management/index.vue
+++ b/src/views/xj/inspection/confirmation-management/index.vue
@ -251,7 +251,11 @@
          />
        </template>
      </el-table-column>
-      <el-table-column label="病害长度" align="center" prop="targetLen" />
+      <el-table-column label="病害长度" align="center" prop="targetLen">
+        <template slot-scope="scope">
+          {{ scope.row.targetLen * 1 <= 0 ? "" : `${scope.row.targetLen}米` }}
+        </template>
+      </el-table-column>
      <el-table-column label="病害面积" align="center" prop="targetArea" />
      <el-table-column label="预警标识" align="center" prop="warningFlag">
        <template slot-scope="scope">
--- a/src/views/xj/inspection/disease-management/index.vue
+++ b/src/views/xj/inspection/disease-management/index.vue
@ -68,7 +68,7 @@
          />
        </el-select>
      </el-form-item>
-      <el-form-item label="上下行" prop="inspectDirection">
+      <!-- <el-form-item label="上下行" prop="inspectDirection">
        <el-select
          v-model="queryParams.inspectDirection"
          placeholder="请选择"
@ -77,6 +77,17 @@
          <el-option label="上行" value="0" />
          <el-option label="下行" value="1" />
        </el-select>
+      </el-form-item> -->
+
+      <el-form-item label="预警标识" prop="warningFlag">
+        <el-select
+          v-model="queryParams.warningFlag"
+          placeholder="请选择"
+          clearable
+        >
+          <el-option label="是" :value="1" />
+          <el-option label="否" :value="0" />
+        </el-select>
      </el-form-item>
      <el-form-item label="公里桩" prop="stakeRange">
        <el-input
@ -101,15 +112,12 @@
          <i class="el-icon-info"></i>
        </el-tooltip>
      </el-form-item>
-      <el-form-item label="预警标识" prop="warningFlag">
-        <el-select
-          v-model="queryParams.warningFlag"
-          placeholder="请选择"
+      <el-form-item label="病害id" prop="id">
+        <el-input
+          v-model="queryParams.id"
+          placeholder="请填写病害id"
          clearable
-        >
-          <el-option label="是" :value="1" />
-          <el-option label="否" :value="0" />
-        </el-select>
+        />
      </el-form-item>
      <el-form-item label="病害长度" prop="lengthRange">
        <el-input-number
@ -126,13 +134,6 @@
          :min="0"
        ></el-input-number>
      </el-form-item>
-      <el-form-item label="病害id" prop="id">
-        <el-input
-          v-model="queryParams.id"
-          placeholder="请填写病害id"
-          clearable
-        />
-      </el-form-item>
      <el-form-item label="病害面积" prop="areaRange">
        <el-input-number
          v-model="queryParams.minArea"
@ -210,39 +211,6 @@
          >删除
        </el-button>
      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:defect:export']"
-          >导出日常监测报告
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:defect:export']"
-          >导出特殊事件报告
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:defect:export']"
-          >导出养护评估报告
-        </el-button>
-      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="success"
@ -301,7 +269,11 @@
          />
        </template>
      </el-table-column>
-      <el-table-column label="病害长度" align="center" prop="targetLen" />
+      <el-table-column label="病害长度" align="center" prop="targetLen">
+        <template slot-scope="scope">
+          {{ scope.row.targetLen * 1 <= 0 ? "" : `${scope.row.targetLen}米` }}
+        </template>
+      </el-table-column>
      <el-table-column label="病害面积" align="center" prop="targetArea" />
      <el-table-column label="预警标识" align="center" prop="warningFlag">
        <template slot-scope="scope">
--- a/src/views/xj/parameter/index.vue
+++ b/src/views/xj/parameter/index.vue
@ -66,9 +66,10 @@ import { defaults as defaultControls } from "ol/control";
 import { Vector as VectorSource } from "ol/source";
 import logo from "@/assets/xc.png";
 import { Point } from "ol/geom";
-import { Style, Icon } from "ol/style";
+import { Style, Icon, Stroke } from "ol/style";
 import VectorLayer from "ol/layer/Vector";
 import { getMapInfo, updateMapInfo } from "@/api/xj/parameter";
+import GeoJSON from "ol/format/GeoJSON.js";

 export default {
  name: "Parameter",
@ -195,14 +196,22 @@ export default {
        layers: [
          new TileLayer({
            source: new XYZ({
-              url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=vec_c&tk=1eb44fae5b9dc454442b322e9a41d233",
-              projection: "EPSG:4326",
+              url: "https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
+              // projection: "EPSG:4326",
            }),
          }),
-          new TileLayer({
-            source: new XYZ({
-              url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=cva_c&tk=1eb44fae5b9dc454442b322e9a41d233",
-              projection: "EPSG:4326",
+          // 添加GeoJSON图层
+          new VectorLayer({
+            source: new VectorSource({
+              // url: "http://localhost:8080/defectfile/output.geojson", // GeoJSON文件路径
+              url: "", // GeoJSON文件路径
+              format: new GeoJSON(),
+            }),
+            style: new Style({
+              stroke: new Stroke({
+                color: "#ff0000",
+                width: 2,
+              }),
            }),
          }),
        ],
--- a/src/views/xj/subscription/subscription-center/index.vue
+++ b/src/views/xj/subscription/subscription-center/index.vue
@ -16,14 +16,7 @@
      style="width: 100%"
    >
      <el-table-column type="index" width="70" label="序号"> </el-table-column>
-      <el-table-column
-        width="200"
-        label="时间"
-        align="center"
-        prop="segmentName"
-      >
-      </el-table-column>
-      <el-table-column label="消息类型" align="center" prop="stakeStart" />
+      <el-table-column label="消息类型" align="center" prop="messageTypeName" />
      <el-table-column
        label="操作"
        align="center"
@ -31,6 +24,7 @@
      >
        <template slot-scope="scope">
          <el-button
+            v-if="scope.row.status === 1"
            size="mini"
            type="text"
            icon="el-icon-circle-check"
@ -39,6 +33,7 @@
            >订阅
          </el-button>
          <el-button
+            v-if="scope.row.status === 2"
            size="mini"
            type="text"
            icon="el-icon-circle-close"
@ -53,12 +48,17 @@
 </template>

 <script>
+import {
+  getSubscriptionList,
+  subscribe,
+  unsubscribe,
+} from "@/api/xj/subscription";
 export default {
  name: "SubscriptionCenter",
  data() {
    return {
      // 订阅列表
-      subscriptionList: [{ segmentName: "assssssssss" }],
+      subscriptionList: [],
      // 表格loading
      loading: false,
    };
@ -71,7 +71,11 @@ export default {
     * @description: 获取订阅列表
     */
    getList() {
-      this.subscriptionList = [{ segmentName: "ccccccccc" }];
+      getSubscriptionList().then(({ code, data }) => {
+        if (code === 200) {
+          this.subscriptionList = data;
+        }
+      });
    },

    /**
@ -79,9 +83,11 @@ export default {
     */
    handleConfirm(row) {
      this.$modal
-        .confirm(`是否确认订阅选中的${[row.id].length}条记录？`)
+        .confirm(`是否确认订阅选中的【${row.messageTypeName}】消息？`)
        .then(() => {
-          //   return deleteRoad([row.id]);
+          return subscribe({
+            messageType: row.messageType,
+          });
        })
        .then(() => {
          this.getList();
@ -95,9 +101,11 @@ export default {
     */
    handleCancel(row) {
      this.$modal
-        .confirm(`是否取消订阅选中的${[row.id].length}条记录？`)
+        .confirm(`是否取消订阅选中的【${row.messageTypeName}】消息？`)
        .then(() => {
-          //   return deleteRoad([row.id]);
+          return unsubscribe({
+            messageType: row.messageType,
+          });
        })
        .then(() => {
          this.getList();