fix：修改病害图片标注，增加滚动图表

src/views/xj/inspection/diease-line/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2025-03-25 11:10:16
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-05-15 14:38:45
+ * @LastEditTime: 2025-05-15 17:11:29
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\diease-line\index.vue
  * @Description: 护拦板检测-首页-910001
 -->
@@ -30,6 +30,11 @@
           <el-input-number v-model="queryParams.maxHei" controls-position="right" placeholder="最大高度"
             :min="0"></el-input-number>
         </el-form-item>
+        <el-form-item label="护栏状态">
+          <el-select v-model="queryParams.status" placeholder="请选择护拦板高度状态" clearable>
+            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="">
           <el-button type="primary" size="mini" @click="handleQuery">筛选</el-button>
           <el-button size="mini" @click="handleCanel">重 置</el-button>
@@ -109,14 +114,21 @@ export default {
         // 终止公里桩
         stakeEnd: "",
         // 最小高度
-        minHei: "",
+        minHei: "0",
         // 最大高度
-        maxHei: "",
+        maxHei: "100",
+        // 状态
+        status:"0"
       },
       // 查询表单
       searchForm: {},
       // 巡检任务下拉
       taskList: [],
+      // 护拦板高度状态下拉
+      statusList: [
+        { label: "异常", value: "0" },
+        { label: "正常", value: "1" },
+      ],
       // 表单规则
       rules: {
         segmentId: [
@@ -354,8 +366,113 @@ export default {
               color: 'rgba(26, 119, 221, 1)'
             },
             data: this.yData
+          },
+          {
+            name: '基准线',
+            type: 'line',
+            showSymbol: false,
+            markLine: {
+              symbol: 'none',
+              lineStyle: {
+                type: 'dashed',
+                color: '#FF1D00',
+                width: 1
+              },
+              label: {
+                show: true,
+                position: 'insideEndTop', // 文字位置，可选值有 'start', 'end', 'center'
+                padding: [0, 0, 0, 0],
+                // 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'
+                fontWeight: 'normal' // 文字粗细
+              },
+              data: [
+                {
+                  yAxis: 20,
+                  lineStyle: { color: '#FF4D4D' },
+                  label: {
+                    color: '#FF4D4D',
+                    formatter: '下限值 '
+                  }
+                }
+              ]
+            }
+          },
+          {
+            name: '基准线',
+            type: 'line',
+            showSymbol: false,
+            markLine: {
+              symbol: 'none',
+              lineStyle: {
+                type: 'dashed',
+                color: '#FF1D00',
+                width: 1
+              },
+              label: {
+                show: true,
+                position: 'insideEndTop', // 文字位置，可选值有 'start', 'end', 'center'
+                padding: [0, 0, 0, 0],
+                // 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'
+                fontWeight: 'normal' // 文字粗细
+              },
+              data: [
+                {
+                  yAxis: 60,
+                  lineStyle: { color: '#FF4D4D' },
+                  label: {
+                    color: '#FF4D4D',
+                    formatter: '上限值 '
+                  }
+                }
+              ]
+            }
           }
-        ]
+        ],
+        dataZoom: [
+          {
+            // 设置滚动条的隐藏与显示
+            show: false,
+            // 设置滚动条类型
+            type: "slider",
+            // 设置背景颜色
+            backgroundColor: "rgba(225,225,225,0.2)",
+            // 设置选中范围的填充颜色
+            fillerColor: "#ccc",
+            // 设置边框颜色
+            borderColor: "rgba(225,225,225,0.2)",
+            // 是否显示detail，即拖拽时候显示详细数值信息
+            showDetail: false,
+            // 数据窗口范围的起始数值
+            startValue: 0,
+            // 数据窗口范围的结束数值（一页显示多少条数据）
+            endValue: 50,
+            // empty：当前数据窗口外的数据，被设置为空。
+            // 即不会影响其他轴的数据范围
+            filterMode: "empty",
+            // 设置滚动条宽度，相对于盒子宽度
+            width: "80%",
+            // 设置滚动条高度
+            height: 5,
+            // 设置滚动条显示位置
+            left: "center",
+            // 是否锁定选择区域（或叫做数据窗口）的大小
+            zoomLoxk: true,
+            // 控制手柄的尺寸
+            handleSize: 10,
+            // dataZoom-slider组件离容器下侧的距离
+            bottom: 0,
+          },
+          {
+            // 没有下面这块的话，只能拖动滚动条，
+            // 鼠标滚轮在区域内不能控制外部滚动条
+            type: "inside",
+            // 滚轮是否触发缩放
+            zoomOnMouseWheel: true,
+            // 鼠标滚轮触发滚动
+            moveOnMouseMove: true,
+            moveOnMouseWheel: true,
+          },
+        ],
       })
       window.addEventListener("resize", () => {
         chart.resize();

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

@@ -2,7 +2,7 @@
  * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
  * @Date: 2024-10-08 10:58:25
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-05-09 17:06:20
+ * @LastEditTime: 2025-05-15 16:37:41
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management\index.vue
  * @Description: 巡检信息管理-病害管理
 -->
@@ -288,14 +288,22 @@
       @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>
+        <template v-if="showRects">
+          <div v-for="(rect, index) in rects" :key="index" class="rect-overlay" :style="getRectStyle(rect)"></div>
+        </template>
         <div class="rect-image">
-          采集时间:
-          {{ new Date(currentImageItem.createdTime).toLocaleString() }}
-          起始桩号： {{ currentImageItem.stakeStart || "暂无数据" }} 终止桩号：
-          {{ currentImageItem.stakeEnd || "暂无数据" }}
-          病害类型：
-          {{ currentImageItem.defectTypeName || "暂无数据" }}</div>
+          <div>
+            采集时间:
+            {{ new Date(currentImageItem.createdTime).toLocaleString() }}
+            起始桩号： {{ currentImageItem.stakeStart || "暂无数据" }} 终止桩号：
+            {{ currentImageItem.stakeEnd || "暂无数据" }}
+            病害类型：
+            {{ currentImageItem.defectTypeName || "暂无数据" }}
+          </div>
+          <div>
+            <el-button @click="showRects = !showRects" size="mini">切换标注状态</el-button>
+          </div>
+        </div>
       </div>
     </el-dialog>
   </div>
@@ -485,6 +493,8 @@ export default {
       showImageDialog: false,
       // 查看大图片路径
       currentImageItem: {},
+      // 是否展示图片标注
+      showRects: true,
       // 图片病害位置信息
       rects: [],
       // 合并病害弹窗显隐控制
@@ -1070,7 +1080,6 @@ export default {
       getDetailsBySnapShotId(val).then(({ code, data }) => {
         if (code === 200) {
           this.viewForm = data;
-          console.log(data, "查看弹窗选择改变触发事件");
         }
       });
     },
@@ -1249,6 +1258,8 @@ export default {
 // 图片信息
 .rect-image {
   width: 90%;
+  display: flex;
+  justify-content: space-between;
   position: absolute;
   top: 0;
   font-size: 1.2rem;