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

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,
+  });
+}

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,
+  });
+};

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 {
+import { Draw, Modify, Select, Snap } from "ol/interaction";
-  Draw,
-  Modify,
-  Select,
-  Snap,
-  defaults as defaultInteractions,
-} 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: () => [],
     },
@@ -460,7 +454,7 @@ export default {
         });
         modify.on("modifyend", (e) => {
           console.log(11111111);
-          
+
           e.features.forEach((feature) => {
             this.drawMarkers = feature.getGeometry().getCoordinates().flat();
             this.$emit("endEoordinate", this.drawMarkers);
@@ -635,7 +629,7 @@ export default {
      * @description: 删除绘制线段功能
      * @return {*}
      */
-    deleteLinedraw(){
+    deleteLinedraw() {
       const map = this.instance.get("map");
       map.removeInteraction(this.drawLine);
       this.drawLineLayer.getSource().clear();

src/views/big-screen/components/img-dialog.vue

@@ -153,25 +153,12 @@
                 {{ item.stakeStart || "暂无数据" }} 终止桩号:
                 {{ item.stakeEnd || "暂无数据" }}
                 病害类型:
-                {{ item.type || "暂无数据" }} 病害面积：{{ item.area }}平方米
+                {{ item.type || "暂无数据" }}
-                病害长度{{ item.length }}米</el-checkbox
+                <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"

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) {
@@ -600,8 +609,11 @@ 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";
@@ -889,8 +945,12 @@ export default {
         return "#E64548";
       }
     },
-
+    
-    /* 地图下方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 = "";

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 }) => {
-          this.$emit("cancel");
+            if (code === 200) {
+              this.$message.success("生成成功");
+              this.$emit("cancel");
+            } else {
+              this.$message.error(data);
+            }
+          });
         }
       });
     },

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>管理处道路养护工程师：{{ viewData.creator || "" }}</span>
-        <span>制表人：</span>
+        <span>制表人：{{ viewData.creator || "" }}</span>
-        <span>养护单位项目负责人：</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: [
+      viewData: {},
-        "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 硬路肩有垃圾",
-      ],
     };
   },
-  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>
 

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
+          <el-table-column label="路段名称" align="center" prop="segmentName" />
-            width="200"
+          <el-table-column label="采集时间" align="center" prop="createdTime">
-            label="时间"
-            align="center"
-            prop="segmentName"
-          >
             <template slot-scope="scope">
-              <span class="table-index">asd</span>
+              <span>{{
-              {{ scope.row.segmentName }}
+                new Date(scope.row.createdTime).toLocaleString()
+              }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="消息内容" align="center" prop="stakeStart" />
+          <el-table-column
-          <el-table-column label="车牌号" align="center" prop="stakeEnd" />
+            label="病害类型"
-          <el-table-column label="设备id" align="center" prop="stakeEnd" />
+            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: "",
+        stakeStart: undefined,
-        stakeEnd: "",
+        stakeEnd: undefined,
         // 病害长度
-        minLen: "",
+        minLen: undefined,
-        maxLen: "",
+        maxLen: undefined,
         // 病害面积
-        minArea: "",
+        minArea: undefined,
-        maxArea: "",
+        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: "已完成", status: "1" },
-        { title: "未生成", value: "2", status: "2" },
+        { 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.searchForm = JSON.parse(JSON.stringify(this.noticeForm));
+      this.$refs.noticeForm.validate((valid) => {
-      this.pagination.page = 1;
+        if (valid) {
-      this.getList();
+          this.searchForm = JSON.parse(JSON.stringify(this.noticeForm));
+          this.pagination.page = 1;
+          this.getList();
+        }
+      });
     },
 
     /**
@@ -405,14 +516,14 @@ export default {
         // 上下行
         inspectDirection: "",
         // 公里桩
-        stakeStart: "",
+        stakeStart: undefined,
-        stakeEnd: "",
+        stakeEnd: undefined,
         // 病害长度
-        minLen: "",
+        minLen: undefined,
-        maxLen: "",
+        maxLen: undefined,
         // 病害面积
-        minArea: "",
+        minArea: undefined,
-        maxArea: "",
+        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(() => {
+      getMaintenanceNoticeList(data)
-        this.noticeList = [{ id: "1", segmentName: "sSSSSSS" }];
+        .then(({ code, rows, total }) => {
-        this.loading = false;
+          if (code === 200) {
-      }, 100);
+            this.noticeList = rows;
+            this.tableTotal = total;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
 
     /**
@@ -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>

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">

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-form-item label="病害id" prop="id">
-        <el-select
+        <el-input
-          v-model="queryParams.warningFlag"
+          v-model="queryParams.id"
-          placeholder="请选择"
+          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">

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",
+              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",
+              // projection: "EPSG:4326",
             }),
           }),
-          new TileLayer({
+          // 添加GeoJSON图层
-            source: new XYZ({
+          new VectorLayer({
-              url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=cva_c&tk=1eb44fae5b9dc454442b322e9a41d233",
+            source: new VectorSource({
-              projection: "EPSG:4326",
+              // url: "http://localhost:8080/defectfile/output.geojson", // GeoJSON文件路径
+              url: "", // GeoJSON文件路径
+              format: new GeoJSON(),
+            }),
+            style: new Style({
+              stroke: new Stroke({
+                color: "#ff0000",
+                width: 2,
+              }),
             }),
           }),
         ],
@@ -211,7 +220,7 @@ export default {
       map.on("click", (e) => {
         this.mapClick(e);
       });
-      //   map.on("click", (e) => {
+      // map.on("click", (e) => {
       // 清除point层
       // const pointSource = map
       //   .getAllLayers()

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
+      <el-table-column label="消息类型" align="center" prop="messageTypeName" />
-        width="200"
-        label="时间"
-        align="center"
-        prop="segmentName"
-      >
-      </el-table-column>
-      <el-table-column label="消息类型" align="center" prop="stakeStart" />
       <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();