From e6c8860ead63be692c7de5ff8f408ebddece6b29 Mon Sep 17 00:00:00 2001
From: SunTao <328867980@qq.com>
Date: Mon, 4 Nov 2024 10:38:06 +0800
Subject: [PATCH] =?UTF-8?q?=E7=97=85=E5=AE=B3=E7=A1=AE=E8=AE=A4=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/xj/confirmation.js                    |  43 ++
 .../components/image-dialog.vue               | 519 +++++++++++++++
 .../confirmation-management/index.vue         | 626 ++++++++++++++++++
 .../inspection/disease-management/index.vue   | 203 ++++--
 .../xj/inspection/road-management/index.vue   | 147 +++-
 .../inspection/traffic-management/index.vue   | 140 +++-
 6 files changed, 1618 insertions(+), 60 deletions(-)
 create mode 100644 src/api/xj/confirmation.js
 create mode 100644 src/views/xj/inspection/confirmation-management/components/image-dialog.vue
 create mode 100644 src/views/xj/inspection/confirmation-management/index.vue

diff --git a/src/api/xj/confirmation.js b/src/api/xj/confirmation.js
new file mode 100644
index 0000000..a4cc4c3
--- /dev/null
+++ b/src/api/xj/confirmation.js
@@ -0,0 +1,43 @@
+/*
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-01 16:31:49
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-01 16:33:52
+ * @FilePath: \znxjxt-ui\src\api\xj\confirmation.js
+ * @Description: 巡检信息-病害确认
+ */
+import request from "@/utils/request";
+
+// 查询列表病害类型
+export function getDefectList(params) {
+  return request({
+    url: "/metadata/defectType",
+    method: "get",
+    params,
+  });
+}
+
+// 路段下拉数据
+export function getSegment() {
+  return request({
+    url: "/api/v2/segment/selectList",
+    method: "post",
+  });
+}
+
+// 病害状态下拉类型
+export function getDefectStatus() {
+  return request({
+    url: "/metadata/defectState",
+    method: "get",
+  });
+}
+
+// 查询病害日志列表
+export function listDefect(query) {
+  return request({
+    url: "/xj/defect/list",
+    method: "get",
+    params: query,
+  });
+}
diff --git a/src/views/xj/inspection/confirmation-management/components/image-dialog.vue b/src/views/xj/inspection/confirmation-management/components/image-dialog.vue
new file mode 100644
index 0000000..24dde1c
--- /dev/null
+++ b/src/views/xj/inspection/confirmation-management/components/image-dialog.vue
@@ -0,0 +1,519 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-01 17:25:06
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-04 10:30:58
+ * @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\image-dialog.vue
+ * @Description: 病害确认-影像模式弹窗
+-->
+
+<template>
+  <div class="content">
+    <div class="image-content">
+      <!-- 图片展示 -->
+      <div class="sidebar" ref="sidebar" @scroll="handleScroll">
+        <img
+          v-for="(item, index) in defectData"
+          :key="item.id"
+          :src="item.media[0].img"
+          :alt="'Image ' + (index + 1)"
+          @click="showImage(index)"
+          :class="{ selected: currentIndex === index }"
+        />
+      </div>
+      <!-- 右侧区域 -->
+      <div class="main-content">
+        <div class="image-form">
+          <el-form
+            :model="imgForm"
+            ref="imgForm"
+            size="small"
+            :inline="true"
+            label-width="5rem"
+          >
+            <el-row :gutter="24">
+              <el-col :span="7">
+                <el-form-item label="路段名称">
+                  <el-select
+                    v-model="imgForm.segmentId"
+                    placeholder="请选择路段名称"
+                    :style="{ width: '10rem' }"
+                    clearable
+                  >
+                    <el-option
+                      v-for="item in roadTypeList"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item label="病害类型">
+                  <el-select
+                    v-model="imgForm.defectType"
+                    placeholder="请选择路段名称"
+                    :style="{ width: '10rem' }"
+                    clearable
+                  >
+                    <el-option
+                      v-for="item in defectTypeList"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="10">
+                <el-form-item label="公里桩">
+                  <el-input
+                    v-model="imgForm.stakeStart"
+                    placeholder="起始公里桩"
+                    style="width: 7rem"
+                    clearable
+                  />
+                  <span style="margin: 0 5px">-</span>
+                  <el-input
+                    v-model="imgForm.stakeEnd"
+                    placeholder="终止公里桩"
+                    style="width: 7rem"
+                    clearable
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="24">
+              <el-col :span="6">
+                <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-col>
+            </el-row>
+          </el-form>
+        </div>
+        <div class="image-view">
+          <div class="view-content">
+            <img
+              src="currentImage"
+              alt="Main Image"
+              ref="mainImage"
+              @load="updateRects"
+            />
+            <div
+              v-for="(rect, index) in rects"
+              :key="index"
+              class="rect-overlay"
+              :style="getRectStyle(rect)"
+            ></div>
+          </div>
+          <div class="view-info">
+            采集时间: {{ new Date(rectsItem.createdTime).toLocaleString()
+            }}<br />
+            起始桩号: {{ rectsItem.stakeStart || "暂无数据" }} 终止桩号:
+            {{ rectsItem.stakeEnd || "暂无数据" }}<br />
+            路产状态: {{ filterState(rectsItem.state) }}
+          </div>
+        </div>
+        <div class="image-bottom">
+          <img
+            v-for="(mediaItem, index) in currentThumbnails"
+            :key="'thumb-' + index"
+            :src="mediaItem.img"
+            :alt="'Thumb ' + (index + 1)"
+            @click="showThumbnailImage(index)"
+            :class="{ selected: selectedThumbnail === index }"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <el-button type="success" size="mini" @click="changeDefect('1')"
+        >是病害(Y)</el-button
+      >
+      <el-button type="warning" size="mini" @click="changeDefect('2')"
+        >不是病害(N)</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDefectStatus } from "@/api/xj/disease";
+import { defeaseList, getSegment, getItemTypes } from "@/api/xj/screen/index";
+export default {
+  name: "ImageDialog",
+  props: {},
+  data() {
+    return {
+      // 左侧图片数据
+      defectData: [],
+      // 表单绑定
+      imgForm: {
+        // 路段名称
+        segmentId: "",
+        // 病害类型
+        defectType: "",
+      },
+      // 路段下拉数据
+      roadTypeList: [],
+      // 病害类型下拉数据
+      defectTypeList: [],
+      // 病害状态下拉选项
+      defectStatus: [],
+      // 分页绑定
+      params: {
+        page: 1,
+        size: 10,
+      },
+      // 图片病害位置信息
+      rects: [],
+      // 图片下方数据
+      rectsItem: {},
+    };
+  },
+  computed: {
+    currentImage() {
+      const thumbnails = this.currentThumbnails;
+      return (
+        thumbnails[this.selectedThumbnail]?.img || thumbnails[0]?.img || ""
+      );
+    },
+    currentThumbnails() {
+      return this.defectData[this.currentIndex]?.media || [];
+    },
+  },
+  created() {
+    this.getSegmentList();
+    this.getDefectType();
+    this.getDefectStatusList();
+  },
+  mounted() {
+    this.getList();
+    this.showImage(0);
+    window.addEventListener("keydown", this.handleKeydown);
+    window.addEventListener("resize", this.updateRects);
+  },
+  methods: {
+    /* 获取路段下拉数据 */
+    getSegmentList() {
+      getSegment().then(({ code, data }) => {
+        if (code === 200) {
+          this.roadTypeList = data;
+        }
+      });
+    },
+    /* 获取病害类型下拉数据 */
+    getDefectType() {
+      getItemTypes({ type: "defect" }).then(({ code, data }) => {
+        if (code === 200) {
+          this.defectTypeList = data;
+        }
+      });
+    },
+    /* 查询病害状态下拉数据 */
+    getDefectStatusList() {
+      getDefectStatus().then(({ data, code }) => {
+        if (code === 200) {
+          this.defectStatus = data;
+        }
+      });
+    },
+    /* 过滤列表病害状态 */
+    filterState(value) {
+      let a = null;
+      [a] = this.defectStatus.filter((item) => {
+        return item.value === value;
+      });
+      if (a) {
+        return a.label;
+      }
+    },
+    /* 获取左侧图片列表 */
+    getList() {
+      this.loading = true;
+      const data = {
+        ...this.imgForm,
+        ...this.params,
+      };
+      defeaseList(data)
+        .then((response) => {
+          this.defectData.push(...response.data);
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    /* 点击搜索事件 */
+    handleQuery() {
+      const stakeReg = /^K\d{4}\+\d{3}$/;
+      if (this.imgForm.stakeStart) {
+        if (stakeReg.test(this.imgForm.stakeStart)) {
+          this.defectData = [];
+          this.params = {
+            page: 1,
+            size: 10,
+          };
+          this.getList();
+          this.showImage(0);
+        } else {
+          this.$modal.msgWarning("请按照'K0000+000'格式填写公里桩进行修改");
+        }
+      } else if (this.imgForm.stakeEnd) {
+        if (stakeReg.test(this.imgForm.stakeEnd)) {
+          this.defectData = [];
+          this.params = {
+            page: 1,
+            size: 10,
+          };
+          this.getList();
+          this.showImage(0);
+        } else {
+          this.$modal.msgWarning("请按照'K0000+000'格式填写公里桩进行修改");
+        }
+      } else {
+        this.defectData = [];
+        this.params = {
+          page: 1,
+          size: 10,
+        };
+        this.getList();
+        this.showImage(0);
+      }
+    },
+    /* 重置事件 */
+    resetQuery() {
+      this.defectData = [];
+      this.imgForm = {
+        segmentId: "",
+        defectType: "",
+        stakeStart: "",
+        stakeEnd: "",
+      };
+      this.params = {
+        page: 1,
+        size: 10,
+      };
+      this.getList();
+      this.showImage(0);
+    },
+    /* 左侧点击图片事件 */
+    showImage(index) {
+      this.currentIndex = index;
+      this.selectedThumbnail = 0; // Reset to the first thumbnail when changing the main item
+      this.scrollToCurrentImage();
+      this.$nextTick(() => {
+        this.updateRects();
+      });
+    },
+    scrollToCurrentImage() {
+      const sidebarImages = this.$refs.sidebar.querySelectorAll("img");
+      const currentImageElement = sidebarImages[this.currentIndex];
+      if (currentImageElement) {
+        currentImageElement.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+        });
+      }
+    },
+    /* 图片位置信息获取 */
+    updateRects() {
+      this.rects = [];
+      this.rectsItem = {};
+      if (this.defectData.length > 0) {
+        const image = this.$refs.mainImage;
+        const rects =
+          this.defectData[this.currentIndex]?.media[
+            this.selectedThumbnail
+          ]?.rect
+            ?.split(",")
+            .map(Number) || [];
+        this.rects = [
+          {
+            left: rects[0],
+            top: rects[1],
+            width: rects[2],
+            height: rects[3],
+          },
+        ];
+        this.rectsItem = this.defectData[this.currentIndex];
+      }
+    },
+    /* 图片红框位置 */
+    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",
+      };
+    },
+    /* 滚动触发事件 */
+    handleScroll() {
+      // 滚动高度+容器高度  滚动区域高度
+      const sidebar = this.$refs.sidebar;
+      if (
+        sidebar.scrollTop + sidebar.clientHeight >= sidebar.scrollHeight - 1 &&
+        !this.loading
+      ) {
+        this.loadMoreImages();
+      }
+    },
+    /* 加载更多图片方法 */
+    loadMoreImages() {
+      this.params.size += 10;
+      this.getList();
+    },
+    /* 是病害/不是病害点击事件 */
+    changeDefect(value) {},
+    /* 键盘事件 */
+    handleKeydown(event) {
+      console.log(event.keyCode, "fff");
+
+      if (event.key === "ArrowUp") {
+        if (this.currentIndex > 0) {
+          this.currentIndex--;
+          this.selectedThumbnail = 0; // Reset when changing main images via keyboard
+          this.scrollToCurrentImage();
+          this.updateRects();
+        }
+      } else if (event.key === "ArrowDown") {
+        if (this.currentIndex <= this.defectData.length - 1) {
+          this.currentIndex === this.defectData.length - 1
+            ? this.currentIndex
+            : this.currentIndex++;
+          this.selectedThumbnail = 0; // Reset when changing main images via keyboard
+          this.scrollToCurrentImage();
+          this.updateRects();
+        } else {
+          this.loadMoreImages();
+        }
+      } else if (event.keyCode === 89) {
+        // 确认病害
+        this.changeDefect("1");
+      } else if (event.keyCode === 78) {
+        // 不是病害
+        this.changeDefect("2");
+      }
+    },
+  },
+  beforeDestroy() {
+    window.removeEventListener("keydown", this.handleKeydown);
+    window.removeEventListener("resize", this.updateRects);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 45rem;
+}
+
+.image-content {
+  width: 100%;
+  height: 95%;
+  display: flex;
+  flex-direction: row;
+
+  .sidebar {
+    width: 20rem;
+    padding: 10px;
+    overflow-y: auto;
+  }
+
+  .main-content {
+    width: calc(100% - 20rem);
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+// form表单
+.image-form {
+  height: 15%;
+  width: 100%;
+  background-color: aqua;
+}
+
+// 图片大图预览
+.image-view {
+  height: 70%;
+  width: 100%;
+  background-color: aquamarine;
+
+  .view-content {
+    width: 100%;
+    height: 80%;
+  }
+
+  .view-info {
+    width: 100%;
+    height: 20%;
+    display: flex;
+    justify-content: center;
+  }
+}
+
+// 图片小图预览
+.image-bottom {
+  width: 100%;
+  height: 15%;
+  display: flex;
+  justify-content: center;
+  overflow-x: auto;
+  padding: 10px;
+  gap: 10px;
+  background-color: beige;
+
+  img {
+    width: 7rem;
+    height: 4rem;
+    cursor: pointer;
+    border-radius: 3px;
+    transition: transform 0.2s, border 0.2s;
+    box-sizing: border-box;
+  }
+
+  img.selected {
+    border: 3px solid #00aaff;
+  }
+}
+
+.footer {
+  width: 100%;
+  height: 5%;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/xj/inspection/confirmation-management/index.vue b/src/views/xj/inspection/confirmation-management/index.vue
new file mode 100644
index 0000000..a45b055
--- /dev/null
+++ b/src/views/xj/inspection/confirmation-management/index.vue
@@ -0,0 +1,626 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-01 13:17:41
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-04 09:40:36
+ * @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\index.vue
+ * @Description: 巡检信息-病害确认
+-->
+
+<template>
+  <div class="confirmation-content">
+    <!-- 搜索表单 -->
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      label-width="100px"
+    >
+      <el-form-item label="道路名称" prop="segmentName">
+        <el-select
+          v-model="queryParams.segmentName"
+          placeholder="请选择路段"
+          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
+          v-model="dateTime"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="病害类型" prop="defectType">
+        <el-select
+          v-model="queryParams.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 label="病害状态" prop="state">
+        <el-select
+          v-model="queryParams.state"
+          placeholder="请选择病害状态"
+          clearable
+        >
+          <el-option
+            v-for="item in defectStatus"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="上下行" prop="inspectDirection">
+        <el-select
+          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
+          v-model="queryParams.stakeStart"
+          placeholder="起始公里桩"
+          style="width: 10rem"
+          clearable
+        />
+        <span style="margin: 0 5px">-</span>
+        <el-input
+          v-model="queryParams.stakeEnd"
+          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="预警标识" 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="lengthRange">
+        <el-input-number
+          v-model="queryParams.minLen"
+          controls-position="right"
+          placeholder="最小长度"
+          :min="0"
+        ></el-input-number>
+        <span style="margin: 0 5px">-</span>
+        <el-input-number
+          v-model="queryParams.maxLen"
+          controls-position="right"
+          placeholder="最大长度"
+          :min="0"
+        ></el-input-number>
+      </el-form-item>
+      <el-form-item label="病害面积" prop="areaRange">
+        <el-input-number
+          v-model="queryParams.minArea"
+          controls-position="right"
+          placeholder="最小面积"
+          :min="0"
+        ></el-input-number>
+        <span style="margin: 0 5px">-</span>
+        <el-input-number
+          v-model="queryParams.maxArea"
+          controls-position="right"
+          placeholder="最大面积"
+          :min="0"
+        ></el-input-number>
+      </el-form-item>
+      <el-form-item label="病害id" prop="id">
+        <el-input
+          v-model="queryParams.id"
+          placeholder="请填写病害id"
+          style="width: 10rem"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="快照id" prop="snapshotId">
+        <el-input
+          v-model="queryParams.snapshotId"
+          placeholder="请填写快照id"
+          style="width: 10rem"
+          clearable
+        />
+      </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="success"
+          plain
+          icon="el-icon-check"
+          size="mini"
+          :disabled="multiple"
+          @click="handleConfirm()"
+          >是病害
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-close"
+          size="mini"
+          :disabled="multiple"
+          @click="handleNegative()"
+          >不是病害
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-picture-outline"
+          size="mini"
+          @click="handleBatch()"
+          >影像模式
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <!-- 数据表格 -->
+    <el-table
+      ref="defectTable"
+      v-loading="loading"
+      :data="confirmationtList"
+      @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">
+        <template slot-scope="scope">
+          <span>{{ new Date(scope.row.createdTime).toLocaleString() }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="病害类型" align="center" prop="defectType">
+        <template slot-scope="scope">
+          <span>{{ filterDefect(scope.row.defectType) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="病害状态" align="center" prop="state">
+        <template slot-scope="scope">
+          <span>{{ filterState(scope.row.state) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="校验状态" align="center" prop="dataStatus">
+        <template slot-scope="scope">
+          <span>{{
+            scope.row.dataStatus
+              ? scope.row.dataStatus === 1
+                ? "未校验"
+                : "已校验"
+              : ""
+          }}</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="病害图片" 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" />
+      <el-table-column label="病害面积" align="center" prop="targetArea" />
+      <el-table-column label="预警标识" align="center" prop="warningFlag">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.warningFlag === 1 ? 'danger' : 'success'">
+            {{ scope.row.warningFlag === 1 ? "是" : "否" }}
+          </el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <div class="pagination-part">
+      <el-pagination
+        background
+        :current-page.sync="pagination.page"
+        @current-change="handleCurrentChange"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size.sync="pagination.size"
+        @size-change="handleSizeChange"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="tableTotal"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 查看图片大图 -->
+    <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>
+
+    <!-- 影像模式弹窗 -->
+    <el-dialog
+      title="影像模式"
+      :visible.sync="showCheckImg"
+      width="85rem"
+      append-to-body
+      destroy-on-close
+      @close="checkCancel"
+    >
+      <image-dialog></image-dialog>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getDefectList,
+  getSegment,
+  getDefectStatus,
+  listDefect,
+} from "@/api/xj/confirmation";
+import imageDialog from "./components/image-dialog.vue";
+export default {
+  components: { imageDialog },
+  name: "ConfirmationManagement",
+  data() {
+    return {
+      // 搜索表单参数
+      queryParams: {
+        segmentName: "",
+        defectType: "",
+        state: "",
+        inspectDirection: "",
+        stakeStart: "",
+        stakeEnd: "",
+        warningFlag: null,
+        minLen: undefined,
+        maxLen: undefined,
+        minArea: undefined,
+        maxArea: undefined,
+        id: "",
+        snapshotId: "",
+      },
+      // 查询接收表单参数
+      searchForm: {},
+      // 采集时间绑定
+      dateTime: [],
+      // 列表病害状态数据
+      tableDefect: [],
+      // 路段下拉选项
+      segmentList: [],
+      // 病害状态下拉选项
+      defectStatus: [],
+      // 列表数据绑定
+      confirmationtList: [],
+      // 非多个禁用
+      multiple: true,
+      // 选择框选中数据
+      checkIds: [],
+      // 表格数据加载状态
+      loading: false,
+      // 分页-页数页码
+      pagination: {
+        page: 1,
+        size: 10,
+      },
+      // 分页-列表总数据
+      tableTotal: 0,
+      // 查看图片大图弹窗显隐控制
+      showImageDialog: false,
+      // 查看大图片路径
+      currentImageItem: "",
+      // 图片病害位置信息
+      rects: [],
+      // 影像模式弹窗显影控制
+      showCheckImg: false,
+    };
+  },
+  created() {
+    this.getTableDefect();
+    this.getSegmentList();
+    this.getDefectStatusList();
+    this.getTableList();
+    this.getTableDefect();
+  },
+  methods: {
+    /* 获取列表病害类型对应数据 */
+    getTableDefect() {
+      getDefectList().then(({ code, data }) => {
+        if (code === 200) {
+          this.tableDefect = data;
+        }
+      });
+    },
+
+    /* 获取路段下拉数据 */
+    getSegmentList() {
+      getSegment().then(({ code, data }) => {
+        if (code === 200) {
+          this.segmentList = data;
+        }
+      });
+    },
+
+    /* 查询病害状态下拉数据 */
+    getDefectStatusList() {
+      getDefectStatus().then(({ data, code }) => {
+        if (code === 200) {
+          this.defectStatus = data;
+        }
+      });
+    },
+
+    /* 过滤列表病害类型 */
+    filterDefect(value) {
+      let a = null;
+      [a] = this.tableDefect.filter((item) => {
+        return item.value === value;
+      });
+      if (a) {
+        return a.label;
+      }
+    },
+
+    /* 过滤列表病害状态 */
+    filterState(value) {
+      let a = null;
+      [a] = this.defectStatus.filter((item) => {
+        return item.value === value;
+      });
+      if (a) {
+        return a.label;
+      }
+    },
+
+    /* 获取列表行数据 */
+    getTableList() {
+      // 处理日期范围
+      const params = {
+        ...this.searchForm,
+        ...this.pagination,
+        startTime: this.dateTime ? this.dateTime[0] : "",
+        endTime: this.dateTime ? this.dateTime[1] : "",
+      };
+      listDefect(params)
+        .then(({ code, rows, total }) => {
+          if (code === 200) {
+            this.confirmationtList = rows;
+            this.tableTotal = total;
+            this.loading = false;
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+
+    /* 点击搜索事件 */
+    handleQuery() {
+      const phonereg = /^K\d{4}\+\d{3}$/;
+      if (this.queryParams.stakeStart) {
+        if (phonereg.test(this.queryParams.stakeStart)) {
+          this.pagination.page = 1;
+          this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
+          this.getTableList();
+        } else {
+          this.$modal.msgWarning("请按照格式填写公里桩进行修改");
+        }
+      } else if (this.queryParams.stakeEnd) {
+        if (phonereg.test(this.queryParams.stakeEnd)) {
+          this.pagination.page = 1;
+          this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
+          this.getTableList();
+        } else {
+          this.$modal.msgWarning("请按照格式填写公里桩进行修改");
+        }
+      } else {
+        this.pagination.page = 1;
+        this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
+        this.getTableList();
+      }
+    },
+
+    /* 点击重置事件 */
+    resetQuery() {},
+
+    /* 多选框选中数据 */
+    handleSelectionChange(selection) {
+      this.checkIds = selection.map((item) => item.id);
+      this.multiple = !selection.length;
+    },
+
+    /* 是病害 */
+    handleConfirm() {},
+
+    /* 不是病害 */
+    handleNegative() {},
+
+    /* 影像模式 */
+    handleBatch() {
+      this.showCheckImg = true;
+    },
+
+    /* 切换分页 */
+    handleCurrentChange(arg) {
+      this.pagination.page = arg;
+      this.getTableList();
+    },
+
+    /* 切换每条/页 */
+    handleSizeChange(arg) {
+      this.pagination.size = arg;
+      this.getTableList();
+    },
+
+    /* 打开查看图片弹窗 */
+    showScreenImg(item) {
+      this.currentImageItem = item;
+      this.showImageDialog = true;
+    },
+
+    /* 图片位置信息获取 */
+    updateRects() {
+      this.rects = [];
+      this.rectsItem = {};
+      const image = this.$refs.mainImage;
+      const rects = this.currentImageItem?.rect?.split(",").map(Number) || [];
+      this.rects = [
+        {
+          left: rects[0],
+          top: rects[1],
+          width: rects[2],
+          height: rects[3],
+        },
+      ];
+      // this.rectsItem = this.defectData[this.currentIndex];
+    },
+
+    /* 图片红框位置 */
+    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",
+      };
+    },
+
+    /* 关闭查看图片弹窗 */
+    imgCancel() {
+      this.showImageDialog = false;
+    },
+
+    /* 关闭影像模式弹窗 */
+    checkCancel() {
+      this.showCheckImg = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.confirmation-content {
+  padding: 20px;
+}
+
+.mb8 {
+  margin-bottom: 8px;
+}
+
+/* 分页样式 */
+.pagination-part {
+  width: 100%;
+  display: flex;
+  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>
\ No newline at end of file
diff --git a/src/views/xj/inspection/disease-management/index.vue b/src/views/xj/inspection/disease-management/index.vue
index ad8a3e6..804be99 100644
--- a/src/views/xj/inspection/disease-management/index.vue
+++ b/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: 2024-10-29 10:32:48
+ * @LastEditTime: 2024-11-01 16:00:00
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management .vue
  * @Description: 巡检信息管理-病害管理
 -->
@@ -128,6 +128,13 @@
           :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"
@@ -143,6 +150,14 @@
           :min="0"
         ></el-input-number>
       </el-form-item>
+
+      <el-form-item label="快照id" prop="snapshotId">
+        <el-input
+          v-model="queryParams.snapshotId"
+          placeholder="请填写快照id"
+          clearable
+        />
+      </el-form-item>
       <el-form-item>
         <el-button
           type="primary"
@@ -247,10 +262,10 @@
       <el-table-column label="结束桩号" align="center" prop="stakeEnd" />
       <el-table-column label="病害图片" align="center" prop="media">
         <template slot-scope="scope">
-          <el-image
-            style="height: 3rem"
-            :src="scope.row.media[0].img"
-            :preview-src-list="[scope.row.media[0].img]"
+          <img
+            @click="showScreenImg(scope.row)"
+            height="50"
+            :src="scope.row.mediaUrl"
           />
         </template>
       </el-table-column>
@@ -523,6 +538,31 @@
         <el-button @click="closeDialog">关闭</el-button>
       </div>
     </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>
 
@@ -582,8 +622,8 @@ export default {
         maxLen: undefined,
         minArea: undefined,
         maxArea: undefined,
-        minDistance: null,
-        maxDistance: null,
+        id: "",
+        snapshotId: "",
       },
       dateTime: [],
       // 新增/编辑表单参数
@@ -678,6 +718,12 @@ export default {
       viewForm: {},
       // 地图中心点
       centerPoint: [123.30297096718999, 41.87942945541742],
+      // 查看图片大图弹窗显隐控制
+      showImageDialog: false,
+      // 查看大图片路径
+      currentImageItem: "",
+      // 图片病害位置信息
+      rects: [],
     };
   },
   created() {
@@ -689,43 +735,6 @@ export default {
     this.getDefectStatusList();
   },
   methods: {
-    // 转换为按分类、子分类的label和value格式
-    transformToDeepCategorizedLabelValue(data) {
-      const result = {};
-
-      data.items.forEach((item) => {
-        Object.entries(item).forEach(([categoryKey, categoryValue]) => {
-          if (!result[categoryKey]) {
-            result[categoryKey] = {};
-          }
-          categoryValue.forEach((subCategory) => {
-            Object.entries(subCategory).forEach(
-              ([subCategoryKey, subCategoryValue]) => {
-                if (!result[categoryKey][subCategoryKey]) {
-                  result[categoryKey][subCategoryKey] = [];
-                }
-                // 处理嵌套的对象，将其转换为 label 和 value
-                if (typeof subCategoryValue === "object") {
-                  Object.entries(subCategoryValue).forEach(([key, value]) => {
-                    result[categoryKey][subCategoryKey].push({
-                      label: value,
-                      value: key,
-                    });
-                  });
-                } else {
-                  result[categoryKey][subCategoryKey].push({
-                    label: subCategoryValue,
-                    value: subCategoryKey,
-                  });
-                }
-              }
-            );
-          });
-        });
-      });
-
-      return result;
-    },
     /* 获取路段下拉数据 */
     getSegmentList() {
       getSegment().then(({ code, data }) => {
@@ -734,6 +743,7 @@ export default {
         }
       });
     },
+
     /* 获取列表病害类型对应数据 */
     getTableDefect() {
       getDefectList().then(({ code, data }) => {
@@ -742,6 +752,7 @@ export default {
         }
       });
     },
+
     /* 过滤列表病害类型 */
     filterDefect(value) {
       let a = null;
@@ -752,6 +763,7 @@ export default {
         return a.label;
       }
     },
+
     /* 过滤列表病害状态 */
     filterState(value) {
       let a = null;
@@ -762,6 +774,7 @@ export default {
         return a.label;
       }
     },
+
     /* 获取病害类型下拉数据 */
     getdefectTypes() {
       getDefectTypes().then((response) => {
@@ -774,6 +787,7 @@ export default {
         });
       });
     },
+
     /* 查询校验状态下拉数据 */
     getStates() {
       getStatesList().then(({ code, data }) => {
@@ -782,6 +796,7 @@ export default {
         }
       });
     },
+
     /* 查询病害状态下拉数据 */
     getDefectStatusList() {
       getDefectStatus().then(({ data, code }) => {
@@ -790,6 +805,7 @@ export default {
         }
       });
     },
+
     /** 查询缺陷列表 */
     getList() {
       // 处理日期范围
@@ -808,6 +824,7 @@ export default {
           this.loading = false;
         });
     },
+
     /* 新增/编辑弹窗取消按钮 */
     cancel() {
       this.dialogVisible = false;
@@ -832,10 +849,12 @@ export default {
       }
       // this.resetFormData();
     },
+
     /* 重置表单方法 */
     resetForm(formName) {
       this.$refs[formName].resetFields();
     },
+
     /* 表单重置事件 */
     resetQuery() {
       this.resetForm("queryForm");
@@ -854,9 +873,12 @@ export default {
         maxLen: undefined,
         minArea: undefined,
         maxArea: undefined,
+        id: "",
+        snapshotId: "",
       };
       (this.dateTime = []), this.getList();
     },
+
     /** 点击搜索按钮操作 */
     handleQuery() {
       const phonereg = /^K\d{4}\+\d{3}$/;
@@ -879,12 +901,14 @@ export default {
         this.getList();
       }
     },
+
     /* 多选框选中数据 */
     handleSelectionChange(selection) {
       this.ids = selection.map((item) => item.id);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
+
     /** 新增按钮操作 */
     handleAdd() {
       this.dialogVisible = true;
@@ -893,6 +917,7 @@ export default {
         this.initMap("addMap");
       });
     },
+
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.dialogVisible = true;
@@ -919,6 +944,7 @@ export default {
         };
       });
     },
+
     /* 批量确认操作 */
     handleUpdateBatch() {
       if (this.ids.length > 0) {
@@ -933,14 +959,17 @@ export default {
         this.$modal.msgWarning("请选择一条记录进行修改");
       }
     },
+
     /* 文件提交处理 */
     submitUpload() {
       this.$refs.upload.submit();
     },
+
     /* 文件上传中处理 */
     handleFileUploadProgress(event, file, fileList) {
       this.upload.isUploading = true;
     },
+
     /* 文件上传成功处理 */
     handleFileSuccess(response, file, fileList) {
       this.upload.fileList = fileList.map((item) => {
@@ -951,6 +980,7 @@ export default {
       });
       this.upload.isUploading = false;
     },
+
     /** 提交按钮 */
     submitForm() {
       this.$refs["defectForm"].validate((valid) => {
@@ -1008,6 +1038,7 @@ export default {
         }
       });
     },
+
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row ? [row.id] : this.ids;
@@ -1026,6 +1057,7 @@ export default {
         })
         .catch(() => {});
     },
+
     /** 导出按钮操作 */
     handleExport() {
       this.download(
@@ -1036,6 +1068,7 @@ export default {
         `defect_${new Date().getTime()}.xlsx`
       );
     },
+
     /** 重置表单数据 */
     resetFormData() {
       this.form = {
@@ -1053,6 +1086,7 @@ export default {
       };
       this.resetForm("defectForm");
     },
+
     /* 点击行列表查看事件 */
     viewDefect(defect) {
       // this.loadDefect(defect.id);
@@ -1075,6 +1109,7 @@ export default {
         this.map.removeEventListener("click", this.onMapClick);
       });
     },
+
     /* 初始化天地图 */
     initMap(ele) {
       // if (this.map) {
@@ -1090,6 +1125,7 @@ export default {
       // 添加单击事件
       this.map.on("click", this.onMapClick);
     },
+
     /* 新增/编辑地图单击事件 */
     onMapClick(e) {
       const marker = new T.Marker(e.lnglat);
@@ -1103,11 +1139,67 @@ export default {
         this.markers.push(e.lnglat);
       }
     },
+
     /* 关闭查看对话框 */
     closeDialog() {
       this.centerPoint = [123.30297096718999, 41.87942945541742];
       this.openViewDialog = false;
     },
+
+    /* 打开查看图片弹窗 */
+    showScreenImg(item) {
+      this.currentImageItem = item;
+      this.showImageDialog = true;
+    },
+
+    /* 图片位置信息获取 */
+    updateRects() {
+      this.rects = [];
+      this.rectsItem = {};
+      const image = this.$refs.mainImage;
+      const rects = this.currentImageItem?.rect?.split(",").map(Number) || [];
+      this.rects = [
+        {
+          left: rects[0],
+          top: rects[1],
+          width: rects[2],
+          height: rects[3],
+        },
+      ];
+      // this.rectsItem = this.defectData[this.currentIndex];
+    },
+
+    /* 图片红框位置 */
+    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",
+      };
+    },
+
+    /* 关闭查看图片弹窗 */
+    imgCancel() {
+      this.showImageDialog = false;
+    },
   },
 };
 </script>
@@ -1160,4 +1252,27 @@ export default {
     max-width: 25rem;
   }
 }
+
+/* 查看大图弹窗 */
+.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>
diff --git a/src/views/xj/inspection/road-management/index.vue b/src/views/xj/inspection/road-management/index.vue
index f432e13..4d149e7 100644
--- a/src/views/xj/inspection/road-management/index.vue
+++ b/src/views/xj/inspection/road-management/index.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-11 15:14:16
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-25 09:28:22
+ * @LastEditTime: 2024-11-01 15:59:48
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\index.vue
  * @Description: 巡检信息-路产管理
 -->
@@ -42,9 +42,9 @@
           clearable
         />
       </el-form-item>
-      <el-form-item label="路产类型" prop="defectType">
+      <el-form-item label="路产类型" prop="equipmentType">
         <el-select
-          v-model="queryParams.defectType"
+          v-model="queryParams.equipmentType"
           placeholder="请选择路产类型"
           clearable
         >
@@ -240,10 +240,10 @@
       <el-table-column label="结束桩号" align="center" prop="stakeEnd" />
       <el-table-column label="路产图片" align="center" prop="media">
         <template slot-scope="scope">
-          <el-image
-            style="height: 3rem"
-            :src="scope.row.media[0].img"
-            :preview-src-list="[scope.row.media[0].img]"
+          <img
+            @click="showScreenImg(scope.row)"
+            height="50"
+            :src="scope.row.mediaUrl"
           />
         </template>
       </el-table-column>
@@ -343,6 +343,31 @@
         :roadType="roadType"
       ></road-view>
     </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>
   
@@ -367,7 +392,7 @@ export default {
         // 道路名称
         segmentName: "",
         // 路产类型
-        defectType: "",
+        equipmentType: "",
         // 校验状态
         dataStatus: "",
         // 巡检任务
@@ -423,6 +448,12 @@ export default {
       addVisible: false,
       // 查看弹窗显隐控制
       viewVisible: false,
+      // 查看图片大图弹窗显隐控制
+      showImageDialog: false,
+      // 查看大图片路径
+      currentImageItem: "",
+      // 图片病害位置信息
+      rects: [],
     };
   },
   created() {
@@ -440,6 +471,7 @@ export default {
         }
       });
     },
+
     /* 获取路产类型下拉数据 */
     getRoadTypeList() {
       getRoadType().then(({ code, data }) => {
@@ -448,6 +480,7 @@ export default {
         }
       });
     },
+
     /* 路产状态下拉数据 */
     getDefectStatusList() {
       getDefectStatus().then(({ data, code }) => {
@@ -456,6 +489,7 @@ export default {
         }
       });
     },
+
     /* 点击搜索事件 */
     handleQuery() {
       const phonereg = /^K\d{4}\+\d{3}$/;
@@ -481,12 +515,13 @@ export default {
         this.getRoadList();
       }
     },
+
     /* 点击重置事件 */
     resetQuery() {
       this.searchForm = {};
-      this.queryForm = {
+      this.queryParams = {
         segmentName: "",
-        defectType: "",
+        equipmentType: "",
         dataStatus: "",
         inspectDirection: "",
         defectType3: "",
@@ -498,6 +533,7 @@ export default {
       this.dateTime = [];
       this.getRoadList();
     },
+
     /* 获取列表数据 */
     getRoadList() {
       const params = {
@@ -513,6 +549,7 @@ export default {
         }
       });
     },
+
     /* 过滤列表路产类型 */
     filterDefect(value) {
       let a = null;
@@ -523,6 +560,7 @@ export default {
         return a.label;
       }
     },
+
     /* 过滤路产状态 */
     filterState(value) {
       let a = null;
@@ -533,6 +571,7 @@ export default {
         return a.label;
       }
     },
+
     /* 点击新增事件 */
     handleAdd() {
       this.addVisible = true;
@@ -541,6 +580,7 @@ export default {
         title: "添加路产",
       };
     },
+
     /* 点击删除事件 */
     handleDelete(row) {
       const checkIds = row ? [row.id] : this.checkIds;
@@ -560,8 +600,10 @@ export default {
         })
         .catch(() => {});
     },
+
     /* 点击导出事件 */
     handleExport() {},
+
     /* 批量确认事件 */
     handleUpdateBatch() {
       if (this.checkIds.length > 0) {
@@ -576,12 +618,14 @@ export default {
         this.$modal.msgWarning("请选择一条记录进行修改");
       }
     },
+
     /* 列表选择改变事件 */
     handleSelectionChange(selection) {
       this.checkIds = selection.map((item) => item.id);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
+
     /* 列表-点击修改事件 */
     handleUpdate(item) {
       this.addVisible = true;
@@ -591,6 +635,7 @@ export default {
         ...item,
       };
     },
+
     /* 列表-点击查看事件 */
     viewDefect(item) {
       this.viewVisible = true;
@@ -599,16 +644,19 @@ export default {
         ...item,
       };
     },
+
     /* 切换分页 */
     handleCurrentChange(arg) {
       this.pagination.page = arg;
       this.getRoadList();
     },
+
     /* 切换每条/页 */
     handleSizeChange(arg) {
       this.pagination.size = arg;
       this.getRoadList();
     },
+
     /* 关闭新增/编辑弹窗 */
     addCancel() {
       this.addVisible = false;
@@ -616,11 +664,67 @@ export default {
       this.addTitle = "";
       this.getRoadList();
     },
+
     /* 关闭查看弹窗 */
     viewCancel() {
       this.viewVisible = false;
       this.dialogItem = { title: "添加路产" };
     },
+    
+    /* 打开查看图片弹窗 */
+    showScreenImg(item) {
+      this.currentImageItem = item;
+      this.showImageDialog = true;
+    },
+
+    /* 图片位置信息获取 */
+    updateRects() {
+      this.rects = [];
+      this.rectsItem = {};
+      const image = this.$refs.mainImage;
+      const rects = this.currentImageItem?.rect?.split(",").map(Number) || [];
+      this.rects = [
+        {
+          left: rects[0],
+          top: rects[1],
+          width: rects[2],
+          height: rects[3],
+        },
+      ];
+      // this.rectsItem = this.defectData[this.currentIndex];
+    },
+
+    /* 图片红框位置 */
+    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",
+      };
+    },
+
+    /* 关闭查看图片弹窗 */
+    imgCancel() {
+      this.showImageDialog = false;
+    },
   },
 };
 </script>
@@ -682,4 +786,27 @@ export default {
     max-width: 25rem;
   }
 }
+
+/* 查看大图弹窗 */
+.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>
diff --git a/src/views/xj/inspection/traffic-management/index.vue b/src/views/xj/inspection/traffic-management/index.vue
index 5d53845..755cf2d 100644
--- a/src/views/xj/inspection/traffic-management/index.vue
+++ b/src/views/xj/inspection/traffic-management/index.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-12 14:52:23
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-25 13:02:28
+ * @LastEditTime: 2024-11-01 16:11:11
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\traffic-management\index.vue
  * @Description: 巡检管理-交安事件
 -->
@@ -229,10 +229,10 @@
       <el-table-column label="结束桩号" align="center" prop="stakeEnd" />
       <el-table-column label="事件图片" align="center" prop="media">
         <template slot-scope="scope">
-          <el-image
-            style="height: 3rem"
-            :src="scope.row.media[0].img"
-            :preview-src-list="[scope.row.media[0].img]"
+          <img
+            @click="showScreenImg(scope.row)"
+            height="50"
+            :src="scope.row.mediaUrl"
           />
         </template>
       </el-table-column>
@@ -328,6 +328,31 @@
         :eventType="eventType"
       ></event-view>
     </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>
     
@@ -411,6 +436,12 @@ export default {
       addVisible: false,
       // 查看弹窗显隐控制
       viewVisible: false,
+      // 查看图片大图弹窗显隐控制
+      showImageDialog: false,
+      // 查看大图片路径
+      currentImageItem: "",
+      // 图片病害位置信息
+      rects: [],
     };
   },
   created() {
@@ -429,6 +460,7 @@ export default {
         }
       });
     },
+
     /* 获取事件类型下拉数据 */
     getEventTypeList() {
       getEventType().then(({ code, data }) => {
@@ -437,6 +469,7 @@ export default {
         }
       });
     },
+
     /* 事件状态下拉数据 */
     getDefectStatusList() {
       getDefectStatus().then(({ data, code }) => {
@@ -445,6 +478,7 @@ export default {
         }
       });
     },
+
     /* 获取路产类型下拉数据 */
     getRoadTypeList() {
       getRoadType().then(({ code, data }) => {
@@ -453,6 +487,7 @@ export default {
         }
       });
     },
+
     /* 点击搜索事件 */
     handleQuery() {
       const phonereg = /^K\d{4}\+\d{3}$/;
@@ -478,6 +513,7 @@ export default {
         this.getRoadList();
       }
     },
+
     /* 点击重置事件 */
     resetQuery() {
       this.searchForm = {};
@@ -495,6 +531,7 @@ export default {
       this.dateTime = [];
       this.getRoadList();
     },
+
     /* 获取列表数据 */
     getRoadList() {
       const params = {
@@ -510,6 +547,7 @@ export default {
         }
       });
     },
+
     /* 过滤列表事件类型 */
     filterDefect(value) {
       let a = null;
@@ -520,6 +558,7 @@ export default {
         return a.label;
       }
     },
+
     /* 过滤事件状态 */
     filterState(value) {
       let a = null;
@@ -530,6 +569,7 @@ export default {
         return a.label;
       }
     },
+
     /* 点击新增事件 */
     handleAdd() {
       this.addVisible = true;
@@ -538,6 +578,7 @@ export default {
         title: "添加事件",
       };
     },
+
     /* 点击删除事件 */
     handleDelete(row) {
       const checkIds = row ? [row.id] : this.checkIds;
@@ -557,8 +598,10 @@ export default {
         })
         .catch(() => {});
     },
+
     /* 点击导出事件 */
     handleExport() {},
+
     /* 批量确认事件 */
     handleUpdateBatch() {
       if (this.checkIds.length > 0) {
@@ -573,12 +616,14 @@ export default {
         this.$modal.msgWarning("请选择一条记录进行修改");
       }
     },
+
     /* 列表选择改变事件 */
     handleSelectionChange(selection) {
       this.checkIds = selection.map((item) => item.id);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
+
     /* 列表-点击修改事件 */
     handleUpdate(item) {
       this.addVisible = true;
@@ -588,6 +633,7 @@ export default {
         ...item,
       };
     },
+
     /* 列表-点击查看事件 */
     viewDefect(item) {
       this.viewVisible = true;
@@ -596,16 +642,19 @@ export default {
         ...item,
       };
     },
+
     /* 切换分页 */
     handleCurrentChange(arg) {
       this.pagination.page = arg;
       this.getRoadList();
     },
+
     /* 切换每条/页 */
     handleSizeChange(arg) {
       this.pagination.size = arg;
       this.getRoadList();
     },
+
     /* 关闭新增/编辑弹窗 */
     addCancel() {
       this.addVisible = false;
@@ -613,16 +662,72 @@ export default {
       this.addTitle = "";
       this.getRoadList();
     },
+
     /* 关闭查看弹窗 */
     viewCancel() {
       this.viewVisible = false;
       this.dialogItem = { title: "添加事件" };
     },
+    
+    /* 打开查看图片弹窗 */
+    showScreenImg(item) {
+      this.currentImageItem = item;
+      this.showImageDialog = true;
+    },
+
+    /* 图片位置信息获取 */
+    updateRects() {
+      this.rects = [];
+      this.rectsItem = {};
+      const image = this.$refs.mainImage;
+      const rects = this.currentImageItem?.rect?.split(",").map(Number) || [];
+      this.rects = [
+        {
+          left: rects[0],
+          top: rects[1],
+          width: rects[2],
+          height: rects[3],
+        },
+      ];
+      // this.rectsItem = this.defectData[this.currentIndex];
+    },
+
+    /* 图片红框位置 */
+    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",
+      };
+    },
+
+    /* 关闭查看图片弹窗 */
+    imgCancel() {
+      this.showImageDialog = false;
+    },
   },
 };
 </script>
     
-    <style lang="scss" scoped>
+<style lang="scss" scoped>
 .app-container {
   padding: 20px;
 }
@@ -679,5 +784,28 @@ export default {
     max-width: 25rem;
   }
 }
+
+/* 查看大图弹窗 */
+.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>
   
\ No newline at end of file