diff --git a/package.json b/package.json
index b89ea80..8fa91c9 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,9 @@
     "linq": "^4.0.3",
     "lodash": "^4.17.21",
     "md5.js": "^1.3.5",
+    "moment": "^2.29.2",
     "nprogress": "0.2.0",
+    "papaparse": "^5.5.3",
     "quill": "2.0.2",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
diff --git a/src/api/analysis/index.js b/src/api/analysis/index.js
new file mode 100644
index 0000000..f84c977
--- /dev/null
+++ b/src/api/analysis/index.js
@@ -0,0 +1,88 @@
+// 告警确认
+import request from '@/utils/request'
+
+// 巡视结果列表
+export function getPatrolData(query) {
+  return request({
+    url: '/patrol/statistics/listMulti',
+    method: 'get',
+    params: query
+  })
+}
+/**
+ * 获取设备列表
+ * @returns
+ */
+export function getDeviceTree(){
+  return request({
+    url:'/basedata/prodevmnt/device/treeAreaDeviceSelect',
+    method:'get'
+  })
+}
+
+// 获取数据趋势左侧的设备树
+export function treeAreaDeviceSelectFilterByMeter() {
+  return request({
+    url: '/basedata/prodevmnt/device/treeAreaDeviceSelectFilterByMeter',
+    method: 'get'
+  })
+}
+
+// ?deviceId=1&recognitionType=1&startTime=2020-12-1&endTime=2022-12-1
+/**
+ * 获取图表数据
+ * @param {*} query
+ * @returns
+ */
+export function getChartData(query){
+  return request({
+    url: '/patrol/statistics/chartsMulti',
+    method: 'get',
+    params: query
+  })
+}
+/**
+ * 同源/非同源数据对比 阈值
+ * @param {*} query
+ * @returns
+ */
+export function analysisData(query){
+  return request({
+    url: '/patrol/statistics/analyse',
+    method: 'post',
+    data: query
+  })
+}
+/**
+ * 5次表计任务对比分析
+ * @param {*} data
+ * @returns
+ */
+export function recordAnalysisData(data){
+  return request({
+    url: '/patrol/statistics/verifyNumber',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 获取自定义属性字典
+ * @returns
+ */
+ export function getExportProps(){
+  return request({
+    url:'/patrol/statistics/colMap',
+    methods:'get'
+  })
+}
+
+export function getPatrolPointName (params) {
+  return request({
+    url: '/patrol/task/getPatrolPointName',
+    methods: 'get',
+    params
+  })
+}
+
+
diff --git a/src/api/home/index.js b/src/api/home/index.js
new file mode 100644
index 0000000..5874624
--- /dev/null
+++ b/src/api/home/index.js
@@ -0,0 +1,116 @@
+// 首页
+import request from "@/utils/request";
+
+// 任务占比
+export function teskRationList(query) {
+  return request({
+    url: "/patrol/task/teskRationList",
+    method: "get",
+    params: query,
+  });
+}
+// 告警统计
+export function alarmList(query) {
+  return request({
+    url: "/basedata/eqpbook/alarmList",
+    method: "get",
+    params: query,
+  });
+}
+
+// 设备状态详情
+export function alarmDeviceList(query) {
+  return request({
+    url: "/basedata/eqpbook/alarmList/status",
+    method: "get",
+    params: query,
+  });
+}
+
+// 巡视告警详情
+export function alarmPatrolList(query) {
+  return request({
+    url: "/basedata/eqpbook/alarmList/alarm",
+    method: "get",
+    params: query,
+  });
+}
+
+// 巡视异常详情
+export function abnormalPatrolList(query) {
+  return request({
+    url: "/basedata/eqpbook/alarmList/abnormal",
+    method: "get",
+    params: query,
+  });
+}
+// 巡视异常
+export function getAbnormalPatrolList(query) {
+  return request({
+    url: "/patrol/analysis/list_exception",
+    method: "get",
+    params: query,
+  });
+}
+
+// 场站点位个数
+export function pointStatistics(query = {}) {
+  return request({
+    url: "/patrol/task/pointStatistics",
+    method: "get",
+    params: query,
+  });
+}
+
+// 缺陷统计
+export function defectList(query) {
+  return request({
+    url: "/patrol/task/defectList",
+    method: "get",
+    params: query,
+  });
+}
+// 设备数量
+export function deviceNumList(query) {
+  return request({
+    url: "/basedata/eqpbook/deviceNumList",
+    method: "get",
+    params: query,
+  });
+}
+
+// 环境参数
+export function evnList(query) {
+  return request({
+    url: "/basedata/montdata/evndata/evnList",
+    method: "get",
+    params: query,
+  });
+}
+
+// 阈值列表
+export function thresholdList(query) {
+  return request({
+    url: "/basedata/eqpbook/subtypeData",
+    method: "get",
+    params: query,
+  });
+}
+
+// 阈值修改
+export function thresholdUpdate(params) {
+  return request({
+    url: "/basedata/eqpbook/subtypeUpdate",
+    method: "post",
+    data: params,
+  });
+}
+
+// 阈值历史查看
+export function thresholdHistory(params) {
+  return request({
+    url: "/basedata/eqpbook/subtypeUpdateRecord",
+    method: "get",
+    params: params,
+  });
+}
diff --git a/src/api/inspectionDataManage/alarmConfirm.js b/src/api/inspectionDataManage/alarmConfirm.js
index de19664..bdff010 100644
--- a/src/api/inspectionDataManage/alarmConfirm.js
+++ b/src/api/inspectionDataManage/alarmConfirm.js
@@ -58,3 +58,7 @@ export function getAllAlgorithmList() {
     },
   });
 }
+
+export function getAlgTypeList() {
+  return getAllAlgorithmList();
+}
diff --git a/src/api/inspectionDataManage/inspectionArchive.js b/src/api/inspectionDataManage/inspectionArchive.js
index a6ec801..dd98b6a 100644
--- a/src/api/inspectionDataManage/inspectionArchive.js
+++ b/src/api/inspectionDataManage/inspectionArchive.js
@@ -47,3 +47,12 @@ export function partrolResultArchive (params) {
     params
   })
 }
+
+// 绍兴增加在任务列表中归档
+export function partrolResultArchiveAdd (params) {
+  return request({
+    url: '/patrol/resultmain/updateInfo_shaoxing',
+    method: 'post',
+    data: params
+  })
+}
diff --git a/src/api/modelDialog/modelDialog.js b/src/api/modelDialog/modelDialog.js
new file mode 100644
index 0000000..311f725
--- /dev/null
+++ b/src/api/modelDialog/modelDialog.js
@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+// 大模型对话
+export function semanticsModel (query) {
+  return request({
+    url: '/simulator/ir/semanticsModel',
+    method: 'post',
+    data: query
+  })
+}
\ No newline at end of file
diff --git a/src/api/screen/screen.js b/src/api/screen/screen.js
new file mode 100644
index 0000000..3154d9f
--- /dev/null
+++ b/src/api/screen/screen.js
@@ -0,0 +1,75 @@
+import request from "@/utils/request";
+
+//获取检修区域tree
+export function treeselect(query) {
+  return request({
+    url: "/basedata/area/treeselect",
+    method: "get",
+    params: query,
+  });
+}
+//获取监测设备列表
+export function getViewers(query) {
+  return request({
+    url: "/api/device/getViewers",
+    method: "get",
+    params: query,
+  });
+}
+//获取生产设备列表
+export function getDevices(query) {
+  return request({
+    url: "/basedata//prodevmnt/device/treeAreaDeviceSelect",
+    method: "get",
+    params: query,
+  });
+}
+//添加巡检任务
+export function taskAdd(data) {
+  return request({
+    url: "patrol/task/add",
+    method: "post",
+    data: data,
+  });
+}
+//任务详情中算法纠偏
+export function taskCorrection(data) {
+  return request({
+    url: "patrol/task/correction",
+    method: "post",
+    data: data,
+  });
+}
+//获取未处置的告警列表
+export function unexecuted(query) {
+  return request({
+    url: "patrol/analysis/unexecuted",
+    method: "get",
+    params: query,
+  });
+}
+
+//查询检测设备列表
+export function getTeskMessageByEqpbookId(query) {
+  return request({
+    url: "/basedata/eqpbook/getTeskMessageByEqpbookId",
+    method: "get",
+    params: query,
+  });
+}
+
+export function treeProMainDevicePatrolEquSelect(query) {
+  return request({
+    url: "/basedata/prodevmnt/device/treeProMainDevicePatrolEquSelect",
+    method: "post",
+    data: query,
+  });
+}
+//获取无人机
+export function getUavList(query) {
+  return request({
+    url: "/basedata/eqpbook/getUavList",
+    method: "get",
+    params: query,
+  });
+}
diff --git a/src/api/videosMonitor/index.js b/src/api/videosMonitor/index.js
new file mode 100644
index 0000000..279bc11
--- /dev/null
+++ b/src/api/videosMonitor/index.js
@@ -0,0 +1,322 @@
+import request from "@/utils/request";
+import { defectList } from "../home/index";
+
+/**
+ * 巡视设备树
+ * @param {*} data
+ * @returns
+ */
+export function getAreaEqubookTreeSelect(params) {
+  return request({
+    // url: '/basedata/eqpbook/getAreaEqubookTreeSelect',
+    url: "/basedata/eqpbook/getAreaEqubookTreeSelectForFilter",
+    method: "get",
+    params,
+  });
+}
+/**
+ * 巡视任务--任务展示--日
+ * @param {*} data
+ * @returns
+ */
+export function list(params) {
+  return request({
+    url: "/patrol/taskstatus/list",
+    method: "get",
+    params,
+  });
+}
+/**
+ * 巡视任务--任务展示--月、年
+ * @param {*} data
+ * @returns
+ */
+export function taskcount(params) {
+  return request({
+    url: "/patrol/taskstatus/taskcount",
+    method: "get",
+    params,
+  });
+}
+/**
+ * 任务列表
+ * @param {*} data
+ * @returns
+ */
+export function taskList(params) {
+  return request({
+    // url: '/patrol/task/list',
+    url: "/patrol/taskstatus/list",
+    method: "get",
+    params,
+  });
+}
+/**
+ * 任务列表
+ * @param {*} data
+ * @returns
+ */
+export function taskInfo(params) {
+  return request({
+    url: "/patrol/task/taskInfo",
+    method: "get",
+    params,
+  });
+}
+
+// 查询巡视类型列表
+export function listPatroltype(query) {
+  return request({
+    url: "/basedata/patrolpointmnt/patroltype/list",
+    method: "get",
+    params: query,
+  });
+}
+
+// 巡检区域
+export function listArea(query) {
+  return request({
+    url: "/basedata/area/list",
+    method: "get",
+    params: query,
+  });
+}
+// 生产设备树
+export function equipmentree(query) {
+  return request({
+    url: "/basedata/prodevmnt/device/getProDeviceTreeSelect",
+    method: "get",
+    params: query,
+  });
+}
+
+/**
+ * 任务基本信息
+ * @param {*} data
+ * @returns
+ */
+export function editTask(taskId) {
+  return request({
+    url: "/patrol/task/" + taskId,
+    method: "get",
+  });
+}
+
+/**
+ * 任务下发
+ * @param {*} data
+ * @returns
+ */
+export function taskStatusChange(params) {
+  return request({
+    url: "/patrol/taskstatus/taskStatusChange",
+    method: "get",
+    params,
+  });
+}
+/**
+ * 录像列表
+ * @param {*} data
+ * @returns
+ */
+export function recordList(params) {
+  return request({
+    url: "/patrol/videotape/record/list",
+    method: "get",
+    params,
+  });
+}
+/**
+ * 获取视频地址
+ * @param {*} data
+ * @returns
+ */
+export function reviewStart(params) {
+  return request({
+    url: "/patrol/videotape/review/start",
+    method: "get",
+    params,
+  });
+}
+/**
+ * 获取预置点列表
+ * @param {*} data
+ * @returns
+ */
+export function getDeviceList(deviceCode, channelCode) {
+  return request({
+    url: `/patrol/preset/listByEqIdAndChannelId`,
+    params: {
+      patroldeviceCode: deviceCode,
+      channelCode: channelCode,
+    },
+    method: "get",
+  });
+}
+/**
+ * 下发预置点任务
+ * @param {*} data
+ * @returns
+ */
+export function presetGoto(params) {
+  return request({
+    url: `/patrol/preset/goto`,
+    method: "get",
+    params,
+  });
+}
+/**
+ * 下发预置点任务
+ * @param {*} data
+ * @returns
+ */
+export function videotapeRecord(params) {
+  return request({
+    url: `/patrol/videotape/record`,
+    method: "get",
+    params,
+  });
+}
+/**
+ * 获取告警列表
+ * @param {*} data
+ * @returns
+ */
+export function patdevstadataList(params) {
+  return request({
+    url: `basedata/montdata/patdevstadata/list`,
+    method: "get",
+    params,
+  });
+}
+
+/**
+ * 任务点位分析列表
+ * @param {*} data
+ * @returns
+ */
+export function taskInfoList(params) {
+  return request({
+    url: `/patrol/task/taskInfo_v2`,
+    method: "get",
+    params,
+  });
+}
+
+/**
+ * 缺陷列表
+ * @param {*} data
+ * @returns
+ */
+export function analysisDefectList(params) {
+  return request({
+    url: `/patrol/analysis/list_v2`,
+    method: "get",
+    params,
+  });
+}
+
+/**
+ * 绍兴站合并缺陷列表（ai和缺陷）
+ * @param {*} data
+ * @returns
+ */
+ export function analysisDefectListShaoxing(params) {
+  return request({
+    url: `/patrol/analysis/list_v2_ex`,
+    method: "get",
+    params,
+  });
+}
+
+
+/**
+ * 点位列表列表
+ * @param {*} data
+ * @returns
+ */
+export function getDefectPointList(params = {}) {
+  return request({
+    url: `/patrol/analysis/summary/points`,
+    method: "get",
+    params,
+  });
+}
+
+/**
+ * 点位缺陷列表
+ * @param {*} data
+ * @returns
+ */
+export function getDefectAlarmList(params = {}) {
+  return request({
+    url: `/patrol/analysis/summary/alarm`,
+    method: "get",
+    params,
+  });
+}
+
+/**
+ * 获取区域列表
+ * @param {*} data
+ * @returns
+ */
+ export function areaList(params = {}) {
+  return request({
+    url: `/basedata/area/list`,
+    method: "get",
+    params,
+  });
+}
+
+/**
+ * 巡视任务--任务日历展示年
+ * @param {*} data
+ * @returns
+ */
+ export function calenderYear(params) {
+  return request({
+    url: "/patrol/calender/year",
+    method: "get",
+    params,
+  });
+}
+
+
+/**
+ * 巡视任务--任务日历展示月
+ * @param {*} data
+ * @returns
+ */
+ export function calenderMonth(params) {
+  return request({
+    url: "/patrol/calender/month",
+    method: "get",
+    params,
+  });
+}
+
+/**
+ * 巡视任务--任务日历展示日
+ * @param {*} data
+ * @returns
+ */
+ export function calenderDay(params) {
+  return request({
+    url: "/patrol/calender/day",
+    method: "get",
+    params,
+  });
+}
+/**
+ * 缺陷记录卡片的列表
+ * @param {*} data
+ * @returns
+ */
+ export function defectRecordList(params) {
+  return request({
+    url: `/patrol/analysis/defect/list`,
+    method: "get",
+    params,
+  });
+}
diff --git a/src/components/AsyncImageFrame/index.vue b/src/components/AsyncImageFrame/index.vue
new file mode 100644
index 0000000..7a0e2b1
--- /dev/null
+++ b/src/components/AsyncImageFrame/index.vue
@@ -0,0 +1,673 @@
+<template>
+  <div>
+    <!-- <div class="tool-actions">
+      <el-tooltip content="删除" placement="top">
+        <el-button
+          style="position: absolute; top: 22%; right: 79%; z-index: 999"
+          type="danger"
+          circle
+          @click="clearAll"
+          :disabled="regions.length === 0"
+        >
+          <i class="el-icon-delete"></i>
+        </el-button>
+      </el-tooltip>
+    </div>
+    <div class="tool-actions">
+      <el-tooltip content="保存" placement="top">
+        <el-button
+          style="position: absolute; top: 22%; right: 83%"
+          type="danger"
+          icon="el-icon-document-checked"
+          circle
+          @click="saveRegions"
+          :disabled="regions.length === 0"
+        />
+      </el-tooltip>
+    </div> -->
+    <div class="image-wrapper" ref="imageWrapper">
+      <el-image
+        ref="temperatureImage"
+        :fit="fit"
+        :preview-src-list="imageList"
+        :src="imgUrl"
+        @load="handleImageLoad"
+        @error="handleImageLoadError"
+        @dblclick="onClicked"
+        @mousemove="handleMouseMove"
+        @mouseleave="stopDrawingIfNeeded"
+        class="temperature-image"
+      >
+        <div slot="placeholder" class="image-slot">
+          加载中<span class="dot">...</span>
+        </div>
+
+        <div slot="error" class="image-slot">
+          {{ errorTips }}
+        </div>
+      </el-image>
+
+      <!-- 温度悬浮显示 -->
+      <div
+        v-if="hoverData"
+        class="temperature-display"
+        :style="{
+          left: hoverData.x + 'px',
+          top: hoverData.y + 'px',
+        }"
+      >
+        {{ hoverData.temperature }}°C
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { ftpImageViewUrl } from "@/utils/index";
+import { mapGetters } from "vuex";
+import { getConfigByKeys } from "@/api/system/config";
+import Papa from "papaparse";
+// 接口
+import {
+  selectBoxData,
+  clearBoxData,
+  addBoxData,
+  downloadCsv,
+} from "@/api/basedata/patrolpointmnt/patrolpointpreset.js";
+// "@/api/analysis/index";
+// 临时接口
+import axios from "axios";
+
+export default {
+  name: "AsyncImage",
+  components: {},
+  props: {
+    fit: {
+      type: String,
+      default: "scale-down",
+    },
+    srcList: {
+      type: Array,
+      default: () => [],
+    },
+    src: {
+      type: String,
+      default: "",
+    },
+    errorTips: {
+      type: String,
+      default: "加载失败",
+    },
+    supportPreview: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  async created() {},
+  data() {
+    return {
+      imgUrl: "",
+      imgName: "",
+      loading: false,
+      imageList: [],
+      config: null,
+      uploadDialogVisible: false,
+      originalImage: null,
+
+      // 温度数据相关
+      temperatureData: [],        // 存储从CSV读取的二维温度数据
+      tempRows: 0,               // CSV行数
+      tempCols: 0,               // CSV列数
+
+      // 图片尺寸相关
+      imageNaturalWidth: 0,      // 图片原始宽度
+      imageNaturalHeight: 0,     // 图片原始高度
+      displayWidth: 0,           // 图片显示宽度
+      displayHeight: 0,          // 图片显示高度
+      imageScale: 1,             // 图片缩放比例
+
+      // 鼠标悬浮相关
+      hoverData: null,           // 当前悬停位置的数据
+      hoverTemperatureData: [], //存续从CSV读取的温度数据用于鼠标悬浮
+
+      // 鼠标位置温度
+      currentTemp: null,
+      currentPos: { x: 0, y: 0 },
+      showTooltip: false,
+      tooltipPosition: { x: 0, y: 0 },
+
+      // 矩形绘制 - 已注释（但保留变量）
+      isDrawing: false,
+      startPos: { x: 0, y: 0 },
+      currentRect: { x: 0, y: 0, width: 0, height: 0 },
+
+      // 温度区域 - 已注释（但保留变量）
+      regions: [],
+      selectedRegion: null,
+
+      // 温度范围
+      maxGlobalTemp: 0,
+      minGlobalTemp: 0,
+      // 框的终点
+      secondX: 0,
+      secondY: 0,
+      showFrame: false, //返回不同坐标计算
+
+      maxTempPoints: [], // 存储每个区域的最高温点坐标
+    };
+  },
+  computed: {
+    ...mapGetters(["systemParams"]),
+    tooltipStyle() {
+      return {
+        left: `${this.tooltipPosition.x}px`,
+        top: `${this.tooltipPosition.y}px`,
+        position: "absolute",
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        color: "white",
+        padding: "5px 10px",
+        borderRadius: "4px",
+        fontSize: "14px",
+        pointerEvents: "none",
+        zIndex: 100,
+        whiteSpace: "nowrap",
+      };
+    },
+    legendGradient() {
+      return {
+        background: `linear-gradient(to top,
+          ${this.getColorForTemp(this.minGlobalTemp)} 0%,
+          ${this.getColorForTemp(
+            (this.minGlobalTemp + this.maxGlobalTemp) / 2
+          )} 50%,
+          ${this.getColorForTemp(this.maxGlobalTemp)} 100%)`,
+        height: "200px",
+        borderRadius: "4px",
+      };
+    },
+  },
+  // 悬浮
+  mounted() {
+    setTimeout(() => {
+      this.updateImageSize();
+    }, 500);
+    window.addEventListener("resize", this.updateImageSize);
+    this.showUploadDialog();
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.updateImageSize);
+  },
+  methods: {
+    // ==================== 图片事件处理 ====================
+    handleImageLoad(event) {
+      const img = event.target;
+      this.imageNaturalWidth = img.naturalWidth;
+      this.imageNaturalHeight = img.naturalHeight;
+
+      this.$nextTick(() => {
+        this.updateImageSize();
+      });
+
+      this.$emit('imgload', {
+        imgOriginalHeight: this.imageNaturalHeight,
+        imgOriginalWidth: this.imageNaturalWidth
+      });
+
+      // 去除拖动鼠标图片被拖走问题
+      img.draggable = false;
+      img.ondragstart = () => false;
+    },
+
+    handleImageLoadError() {
+      this.$emit('imgloaderror');
+    },
+
+    onClicked() {
+      this.$emit('click');
+    },
+
+    showUploadDialog() {
+      this.uploadDialogVisible = true;
+    },
+
+    // ==================== 鼠标交互 ====================
+    handleMouseMove(event) {
+      // 处理悬浮温度显示（使用最近邻插值）
+      this.handleHoverShow(event);
+    },
+
+    stopDrawingIfNeeded() {
+      this.showTooltip = false;
+    },
+
+    // ==================== 图片尺寸更新 ====================
+    updateImageSize() {
+      const imageEl = this.$refs.temperatureImage?.$el?.querySelector("img");
+      if (!imageEl) {
+        return;
+      }
+
+      this.originalImage = imageEl;
+      const naturalWidth = imageEl.naturalWidth;
+      const naturalHeight = imageEl.naturalHeight;
+      const displayWidth = imageEl.clientWidth;
+      const displayHeight = imageEl.clientHeight;
+
+      // 计算正确的缩放比例
+      this.imageScale = naturalWidth / displayWidth;
+
+      // console.log("图片尺寸更新:", {
+      //   实际尺寸: `${naturalWidth}×${naturalHeight}`,
+      //   显示尺寸: `${displayWidth}×${displayHeight}`,
+      //   缩放比例: this.imageScale,
+      // });
+
+      const container = this.$refs.imageWrapper;
+      this.containerRect = container.getBoundingClientRect();
+
+      if (this.$refs.temperatureImage) {
+        this.imageSize = {
+          width: naturalWidth,
+          height: naturalHeight,
+        };
+      }
+    },
+
+    // ==================== CSV加载和解析（分块处理，避免栈溢出） ====================
+    downloadAndParseCSV() {
+      const data = {
+        filePath: this.imgName,
+      };
+
+      downloadCsv(data)
+        .then((response) => {
+          const blob = response instanceof Blob ? response : new Blob([response]);
+          const reader = new FileReader();
+
+          reader.onload = (e) => {
+            try {
+              const csvText = e.target.result;
+              this.parseCSVInChunks(csvText);
+            } catch (error) {
+              // this.$message.error('读取CSV出错: ' + error.message);
+            }
+          };
+
+          reader.onerror = () => {
+            // this.$message.error('文件读取失败');
+          };
+
+          reader.readAsText(blob);
+        })
+        .catch((error) => {
+          // this.$message.error('下载CSV失败');
+        });
+    },
+
+    // 分块解析CSV，避免栈溢出
+    parseCSVInChunks(csvText) {
+      try {
+        const lines = csvText.split('\n');
+        const tempData = [];
+        let maxCols = 0;
+
+        const BATCH_SIZE = 1000;
+        let index = 0;
+
+        const processBatch = () => {
+          const endIndex = Math.min(index + BATCH_SIZE, lines.length);
+
+          for (let i = index; i < endIndex; i++) {
+            const line = lines[i].trim();
+            if (!line) continue;
+
+            const values = line.split(',').map(v => {
+              const num = parseFloat(v.trim());
+              return isNaN(num) ? null : num;
+            });
+
+            const validValues = values.filter(v => v !== null && isFinite(v));
+
+            if (validValues.length > 0) {
+              tempData.push(validValues);
+              if (validValues.length > maxCols) {
+                maxCols = validValues.length;
+              }
+            }
+          }
+
+          index = endIndex;
+
+          if (index < lines.length) {
+            setTimeout(processBatch, 0);
+          } else {
+            this.finalizeCSVData(tempData, maxCols);
+          }
+        };
+
+        processBatch();
+
+      } catch (error) {
+        // this.$message.error('解析CSV出错: ' + error.message);
+      }
+    },
+
+    // 最终处理CSV数据（修复栈溢出）
+    finalizeCSVData(tempData, maxCols) {
+      try {
+        if (tempData.length === 0) {
+          this.$message.warning('CSV温度数据为空');
+          return;
+        }
+
+        const normalizedData = [];
+        for (let i = 0; i < tempData.length; i++) {
+          const row = tempData[i];
+          if (row.length < maxCols) {
+            const lastVal = row[row.length - 1] || 0;
+            while (row.length < maxCols) {
+              row.push(lastVal);
+            }
+          }
+          normalizedData.push(row);
+        }
+
+        this.temperatureData = normalizedData;
+        this.tempRows = normalizedData.length;
+        this.tempCols = normalizedData[0]?.length || 0;
+
+        // 计算温度范围（使用循环避免栈溢出）
+        let minTemp = Infinity;
+        let maxTemp = -Infinity;
+        let count = 0;
+
+        const sampleLimit = Math.min(normalizedData.length, 500);
+        for (let i = 0; i < sampleLimit; i++) {
+          const row = normalizedData[i];
+          if (Array.isArray(row)) {
+            const rowLimit = Math.min(row.length, 500);
+            for (let j = 0; j < rowLimit; j++) {
+              const val = row[j];
+              if (typeof val === 'number' && !isNaN(val) && isFinite(val)) {
+                if (val < minTemp) minTemp = val;
+                if (val > maxTemp) maxTemp = val;
+                count++;
+              }
+            }
+          }
+        }
+
+        // console.log('温度范围:', {
+        //   min: count > 0 ? minTemp : 0,
+        //   max: count > 0 ? maxTemp : 0,
+        //   sampleCount: count
+        // });
+
+        // 为悬停显示准备数据（使用循环避免栈溢出）
+        const hoverData = [];
+        const rowLimit = Math.min(normalizedData.length, 100);
+        for (let i = 0; i < rowLimit; i++) {
+          const row = normalizedData[i];
+          if (Array.isArray(row)) {
+            const colLimit = Math.min(row.length, 100);
+            for (let j = 0; j < colLimit; j++) {
+              const val = row[j];
+              if (typeof val === 'number' && !isNaN(val) && isFinite(val)) {
+                hoverData.push(val);
+              }
+            }
+          }
+        }
+        this.hoverTemperatureData = hoverData;
+
+        // this.$message.success(`成功加载 ${this.tempRows}x${this.tempCols} 温度数据`);
+
+      } catch (error) {
+        // this.$message.error('处理CSV数据出错: ' + error.message);
+      }
+    },
+
+    // ==================== 最近邻插值（精确匹配温度矩阵原始值） ====================
+    nearestNeighborInterpolation(data, row, col, rows, cols) {
+      if (row < 0 || row > rows - 1 || col < 0 || col > cols - 1) {
+        return null;
+      }
+
+      const nearestRow = Math.round(row);
+      const nearestCol = Math.round(col);
+
+      const safeRow = Math.max(0, Math.min(nearestRow, rows - 1));
+      const safeCol = Math.max(0, Math.min(nearestCol, cols - 1));
+
+      const val = parseFloat(data[safeRow]?.[safeCol]);
+      return isNaN(val) ? null : val;
+    },
+
+    // ==================== 处理鼠标悬浮显示温度（使用最近邻插值） ====================
+    handleHoverShow(event) {
+      const imageEl = this.$refs.temperatureImage?.$el?.querySelector('img');
+      if (!imageEl) return;
+
+      if (!this.temperatureData || this.temperatureData.length === 0) {
+        this.hoverData = null;
+        return;
+      }
+
+      const rect = imageEl.getBoundingClientRect();
+
+      const mouseX = event.clientX - rect.left;
+      const mouseY = event.clientY - rect.top;
+
+      const normalizedX = mouseX / rect.width;
+      const normalizedY = mouseY / rect.height;
+
+      if (normalizedX < 0 || normalizedX > 1 || normalizedY < 0 || normalizedY > 1) {
+        this.hoverData = null;
+        return;
+      }
+
+      const rows = this.tempRows;
+      const cols = this.tempCols;
+
+      if (rows === 0 || cols === 0) {
+        this.hoverData = null;
+        return;
+      }
+
+      const floatRow = normalizedY * (rows - 1);
+      const floatCol = normalizedX * (cols - 1);
+
+      const temperature = this.nearestNeighborInterpolation(
+        this.temperatureData,
+        floatRow,
+        floatCol,
+        rows,
+        cols
+      );
+
+      if (temperature !== null && !isNaN(temperature) && isFinite(temperature)) {
+        let tooltipX = event.clientX - rect.left + 15;
+        let tooltipY = event.clientY - rect.top - 10;
+
+        if (tooltipX + 100 > rect.width) {
+          tooltipX = event.clientX - rect.left - 100;
+        }
+        if (tooltipY < 20) {
+          tooltipY = event.clientY - rect.top + 20;
+        }
+        if (tooltipY + 30 > rect.height) {
+          tooltipY = rect.height - 30;
+        }
+
+        this.hoverData = {
+          x: tooltipX,
+          y: tooltipY,
+          temperature: temperature.toFixed(1),
+        };
+      } else {
+        this.hoverData = null;
+      }
+    },
+
+    // ==================== 辅助函数 ====================
+    getRandomRegionColor() {
+      const colors = [
+        "#FF5722",
+        "#2196F3",
+        "#4CAF50",
+        "#FFC107",
+        "#9C27B0",
+        "#00BCD4",
+        "#8BC34A",
+        "#FF9800",
+        "#673AB7",
+        "#3F51B5",
+        "#009688",
+        "#CDDC39",
+      ];
+      return colors[Math.floor(Math.random() * colors.length)];
+    },
+
+    hexToRgba(hex, alpha) {
+      const r = parseInt(hex.slice(1, 3), 16);
+      const g = parseInt(hex.slice(3, 5), 16);
+      const b = parseInt(hex.slice(5, 7), 16);
+      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    },
+
+    // ==================== FTP和URL处理 ====================
+    async ftpImageViewUrl(url) {
+      if (url.startsWith('http://') || url.startsWith('https://')) {
+        return url;
+      }
+      if (!this.systemParams.ftpViewAddress) {
+        const systemParams = {};
+        await getConfigByKeys([
+          'EXTRANET_ADDRESS',
+          'EXTRANET_FTP_VIEW_ADDRESS',
+          'INTRANET_FTP_VIEW_ADDRESS',
+          'VIRTUAL_RTC_MEDIAURL',
+          'EXTRANET_MEDIA_URL',
+          'INTRANET_MEDIA_URL',
+          'VIRTUAL_FLV_MEDIAURL',
+          'INTRANET_FLV_MEDIA_URL',
+          'EXTRANET_FLV_MEDIA_URL',
+        ]).then((res) => {
+          res.data.forEach((x) => {
+            systemParams[x.configKey] = x.configValue;
+          });
+          systemParams.PREFIX = location.hostname === systemParams.EXTRANET_ADDRESS
+            ? 'EXTRANET'
+            : 'INTRANET';
+          systemParams.ftpViewAddress = systemParams[systemParams.PREFIX + '_FTP_VIEW_ADDRESS'];
+          systemParams.MEDIA_URL = systemParams[systemParams.PREFIX + '_MEDIA_URL'];
+          systemParams.FLV_MEDIA_URL = systemParams[systemParams.PREFIX + '_FLV_MEDIA_URL'];
+        });
+        return systemParams.ftpViewAddress + url;
+      } else {
+        return this.systemParams.ftpViewAddress + url;
+      }
+    },
+
+    async getUrls(val) {
+      this.imageList = [];
+      const urls = [];
+      for (let index = 0; index < val.length; index++) {
+        const element = val[index];
+        urls.push(await this.ftpImageViewUrl(element));
+      }
+      if (this.supportPreview) {
+        this.imageList = urls;
+      }
+    },
+  },
+  watch: {
+    srcList: {
+      handler(val) {
+        this.getUrls(val);
+      },
+      immediate: true,
+    },
+    src: {
+      async handler(val) {
+        if (val && val.length > 0) {
+          this.imgUrl = await this.ftpImageViewUrl(val);
+          // this.imgUrl = "http://192.168.1.116:18891/shaoxing/videoMonitor/app/htjc6/htjcImage//test/39357.jpg";
+          this.imgName = val;
+
+          if (this.srcList.length === 0) {
+            this.getUrls([val]);
+          }
+
+          this.$nextTick(() => {
+            this.downloadAndParseCSV();
+          });
+        } else {
+          this.imgUrl = "";
+        }
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  color: #ddd;
+}
+
+.image-wrapper {
+  position: relative;
+  border-radius: 4px;
+  overflow: hidden;
+  height: calc(66vh - 350px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.temperature-image {
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+  cursor: default;
+}
+
+.image-slot {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: #909399;
+  font-size: 14px;
+}
+
+.image-slot i {
+  font-size: 36px;
+  margin-bottom: 10px;
+}
+
+/* 温度悬浮显示 */
+.temperature-display {
+  position: absolute;
+  padding: 6px 12px;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  font-weight: bold;
+  font-size: 14px;
+  pointer-events: none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
+  transform: translateY(-100%);
+  z-index: 10;
+  white-space: nowrap;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+</style>
diff --git a/src/components/CardPagination/index.vue b/src/components/CardPagination/index.vue
index bdfa8bb..1ca3f45 100644
--- a/src/components/CardPagination/index.vue
+++ b/src/components/CardPagination/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div :class="{ hidden: hidden }" class="pagination-container">
+    <div class="pagination-total">共 {{ total }} 条</div>
     <el-pagination
       :background="background"
       :current-page.sync="currentPage"
@@ -17,108 +18,198 @@
 </template>
 
 <script>
-import { scrollTo } from "@/utils/scroll-to";
+import { scrollTo } from '@/utils/scroll-to'
 
 export default {
-  name: "CardPagination",
+  name: 'CardPagination',
   props: {
     total: {
       required: true,
-      type: Number,
+      type: Number
     },
     page: {
       type: Number,
-      default: 1,
+      default: 1
     },
     limit: {
       type: Number,
-      default: 20,
+      default: 20
     },
     pageSizes: {
       type: Array,
       default() {
-        return [10, 20, 30, 50];
-      },
+        return [10, 20, 30, 50]
+      }
     },
-    // 移动端页码按钮的数量端默认值5
+    // Page button count on small screens
     pagerCount: {
       type: Number,
-      default: document.body.clientWidth < 992 ? 5 : 7,
+      default: document.body.clientWidth < 992 ? 5 : 7
     },
     layout: {
       type: String,
-      default: "total, sizes, prev, pager, next, jumper",
+      default: 'sizes, prev, pager, next, jumper'
     },
     background: {
       type: Boolean,
-      default: true,
+      default: true
     },
     autoScroll: {
       type: Boolean,
-      default: true,
+      default: true
     },
     hidden: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
   data() {
-    return {};
+    return {}
   },
   computed: {
     currentPage: {
       get() {
-        return this.page;
+        return this.page
       },
       set(val) {
-        this.$emit("update:page", val);
-      },
+        this.$emit('update:page', val)
+      }
     },
     pageSize: {
       get() {
-        return this.limit;
+        return this.limit
       },
       set(val) {
-        this.$emit("update:limit", val);
-      },
-    },
+        this.$emit('update:limit', val)
+      }
+    }
   },
   methods: {
     handleSizeChange(val) {
       if (this.currentPage * val > this.total) {
-        this.currentPage = 1;
+        this.currentPage = 1
       }
-      this.$emit("pagination", { page: this.currentPage, limit: val });
+      this.$emit('pagination', { page: this.currentPage, limit: val })
       if (this.autoScroll) {
-        scrollTo(0, 800);
+        scrollTo(0, 800)
       }
     },
     handleCurrentChange(val) {
-      this.$emit("pagination", { page: val, limit: this.pageSize });
+      this.$emit('pagination', { page: val, limit: this.pageSize })
       if (this.autoScroll) {
-        scrollTo(0, 800);
+        scrollTo(0, 800)
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 .pagination-container {
-  background: #fff;
-  padding: 0px 20px !important;
-  margin-top: 5px;
-  margin-bottom: 0px;
-
-  ::v-deep .el-pagination span:not([class*="suffix"]),
-  ::v-deep .el-pagination button {
-    font-size: 14px;
-  }
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  min-height: 48px;
+  margin-top: 0;
+  padding: 10px 16px;
+  box-sizing: border-box;
+  color: #dcecff;
+  background: #0b1140 !important;
+  border-top: 1px solid rgba(79, 166, 255, 0.35);
+}
 
-  ::v-deep .el-pager li {
-    font-size: 14px;
-  }
+.pagination-total {
+  flex: 0 0 auto;
+  font-size: 14px;
+  line-height: 24px;
+  white-space: nowrap;
 }
+
+.pagination-container ::v-deep .el-pagination {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 0;
+  color: #dcecff;
+}
+
+.pagination-container ::v-deep .el-pagination span:not([class*="suffix"]),
+.pagination-container ::v-deep .el-pagination button,
+.pagination-container ::v-deep .el-pager li {
+  font-size: 14px;
+}
+
+.pagination-container ::v-deep .el-pagination .btn-prev,
+.pagination-container ::v-deep .el-pagination .btn-next,
+.pagination-container ::v-deep .el-pagination .el-pager li {
+  min-width: 32px;
+  height: 28px;
+  line-height: 26px;
+  margin: 0 3px;
+  border: 1px solid rgba(90, 170, 255, 0.45);
+  border-radius: 2px;
+  background: #10306d;
+  color: #ffffff;
+}
+
+.pagination-container ::v-deep .el-pagination .el-pager li.active {
+  background: #2f7efb;
+  border-color: #2f7efb;
+  color: #ffffff;
+}
+
+.pagination-container ::v-deep .el-pagination .btn-prev:hover,
+.pagination-container ::v-deep .el-pagination .btn-next:hover,
+.pagination-container ::v-deep .el-pagination .el-pager li:hover {
+  border-color: #64e7ff;
+  color: #64e7ff;
+}
+
+.pagination-container ::v-deep .el-pagination .btn-prev.is-disabled,
+.pagination-container ::v-deep .el-pagination .btn-next.is-disabled,
+.pagination-container ::v-deep .el-pagination .el-pager li.disabled {
+  background: #0b1f54;
+  border-color: rgba(90, 170, 255, 0.2);
+  color: rgba(255, 255, 255, 0.35);
+}
+
+.pagination-container ::v-deep .el-pagination .el-select .el-input {
+  width: 92px;
+}
+
+.pagination-container ::v-deep .el-pagination .el-input__inner {
+  height: 28px;
+  line-height: 28px;
+  background: #0f2b6f;
+  border: 1px solid rgba(80, 170, 255, 0.55);
+  color: #ffffff;
+}
+
+.pagination-container ::v-deep .el-pagination .el-input__icon {
+  line-height: 28px;
+  color: #7dd6ff;
+}
+
+.pagination-container ::v-deep .el-pagination__sizes,
+.pagination-container ::v-deep .el-pagination__jump,
+.pagination-container ::v-deep .el-pagination__total {
+  color: #dcecff;
+}
+
+.pagination-container ::v-deep .el-pagination__editor.el-input {
+  width: 48px;
+}
+
+.pagination-container ::v-deep .el-pagination__editor.el-input .el-input__inner {
+  width: 48px;
+  padding: 0 4px;
+}
+
 .pagination-container.hidden {
   display: none;
 }
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
index 91aeefe..1f33517 100644
--- a/src/layout/components/Sidebar/Item.vue
+++ b/src/layout/components/Sidebar/Item.vue
@@ -6,6 +6,8 @@ const navIconMap = {
   'Home': require('@/assets/images/nav/home.png'),
   '遥视任务管理': require('@/assets/images/nav/task.png'),
   '巡检任务管理': require('@/assets/images/nav/task.png'),
+  '巡检任务': require('@/assets/images/nav/task.png'),
+  '巡视任务': require('@/assets/images/nav/task.png'),
   '设备管理': require('@/assets/images/nav/device.png'),
   '点位管理': require('@/assets/images/nav/point.png'),
   '系统管理': require('@/assets/images/nav/system.png'),
@@ -63,3 +65,4 @@ export default {
   }
 }
 </script>
+
diff --git a/src/main.js b/src/main.js
index eceba66..fba491d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import Vue from 'vue'
 
 import Cookies from 'js-cookie'
 
@@ -7,6 +7,7 @@ import './assets/styles/element-variables.scss'
 
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/ruoyi.scss' // ruoyi css
+import './views/cards/assets/styles/index.scss'
 import App from './App'
 import store from './store'
 import router from './router'
@@ -30,7 +31,9 @@ import FileUpload from "@/components/FileUpload"
 // 图片上传组件
 import ImageUpload from "@/components/ImageUpload"
 // 图片预览组件
-import ImagePreview from "@/components/ImagePreview"
+import ImagePreview from '@/components/ImagePreview'
+// 寮傛鍥剧墖鐢绘缁勪欢
+import AsyncImageFrame from '@/components/AsyncImageFrame'
 // 字典标签组件
 import DictTag from '@/components/DictTag'
 // 头部标签组件
@@ -64,6 +67,7 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
+Vue.component('AsyncImageFrame', AsyncImageFrame)
 
 Vue.use(VideoPlayer)
 
@@ -95,3 +99,5 @@ new Vue({
   i18n,
   render: h => h(App)
 })
+
+
diff --git a/src/router/index.js b/src/router/index.js
index 71907b6..a27d6f3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -87,6 +87,20 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
+  },
+  {
+    path: '/task-summary',
+    component: Layout,
+    redirect: '/task-summary/inspectionTask',
+    meta: { title: '巡视任务', icon: 'task' },
+    children: [
+      {
+        path: 'inspectionTask',
+        component: () => import('@/views/cards/taskSummary/inspectionTask'),
+        name: 'InspectionTaskSummary',
+        meta: { title: '巡视任务', icon: 'task', activeMenu: '/task-summary' }
+      }
+    ]
   }
 ]
 
@@ -161,7 +175,7 @@ export const dynamicRoutes = [
         meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
       }
     ]
-  }
+  },
 ]
 
 // 防止连续点击多次路由报错
diff --git a/src/views/cards/assets/btn-next.png b/src/views/cards/assets/btn-next.png
new file mode 100644
index 0000000..59587c4
Binary files /dev/null and b/src/views/cards/assets/btn-next.png differ
diff --git a/src/views/cards/assets/btn-pre.png b/src/views/cards/assets/btn-pre.png
new file mode 100644
index 0000000..482ac5f
Binary files /dev/null and b/src/views/cards/assets/btn-pre.png differ
diff --git a/src/views/cards/assets/card_btn_border.png b/src/views/cards/assets/card_btn_border.png
new file mode 100644
index 0000000..21dea66
Binary files /dev/null and b/src/views/cards/assets/card_btn_border.png differ
diff --git a/src/views/cards/assets/icon-document.png b/src/views/cards/assets/icon-document.png
new file mode 100644
index 0000000..c9592b6
Binary files /dev/null and b/src/views/cards/assets/icon-document.png differ
diff --git a/src/views/cards/assets/icon-title-1.png b/src/views/cards/assets/icon-title-1.png
new file mode 100644
index 0000000..fa36c99
Binary files /dev/null and b/src/views/cards/assets/icon-title-1.png differ
diff --git a/src/views/cards/assets/icon-title-2.png b/src/views/cards/assets/icon-title-2.png
new file mode 100644
index 0000000..9c877c2
Binary files /dev/null and b/src/views/cards/assets/icon-title-2.png differ
diff --git a/src/views/cards/assets/image-btn-left-disable.png b/src/views/cards/assets/image-btn-left-disable.png
new file mode 100644
index 0000000..93e11e1
Binary files /dev/null and b/src/views/cards/assets/image-btn-left-disable.png differ
diff --git a/src/views/cards/assets/image-btn-left-hover.png b/src/views/cards/assets/image-btn-left-hover.png
new file mode 100644
index 0000000..0e7de0c
Binary files /dev/null and b/src/views/cards/assets/image-btn-left-hover.png differ
diff --git a/src/views/cards/assets/image-btn-left-normal.png b/src/views/cards/assets/image-btn-left-normal.png
new file mode 100644
index 0000000..dd798ac
Binary files /dev/null and b/src/views/cards/assets/image-btn-left-normal.png differ
diff --git a/src/views/cards/assets/image-btn-left-press.png b/src/views/cards/assets/image-btn-left-press.png
new file mode 100644
index 0000000..fd371cf
Binary files /dev/null and b/src/views/cards/assets/image-btn-left-press.png differ
diff --git a/src/views/cards/assets/image-btn-right-disable.png b/src/views/cards/assets/image-btn-right-disable.png
new file mode 100644
index 0000000..6658bf9
Binary files /dev/null and b/src/views/cards/assets/image-btn-right-disable.png differ
diff --git a/src/views/cards/assets/image-btn-right-hover.png b/src/views/cards/assets/image-btn-right-hover.png
new file mode 100644
index 0000000..9477a94
Binary files /dev/null and b/src/views/cards/assets/image-btn-right-hover.png differ
diff --git a/src/views/cards/assets/image-btn-right-normal.png b/src/views/cards/assets/image-btn-right-normal.png
new file mode 100644
index 0000000..cb1a915
Binary files /dev/null and b/src/views/cards/assets/image-btn-right-normal.png differ
diff --git a/src/views/cards/assets/image-btn-right-press.png b/src/views/cards/assets/image-btn-right-press.png
new file mode 100644
index 0000000..5d340aa
Binary files /dev/null and b/src/views/cards/assets/image-btn-right-press.png differ
diff --git a/src/views/cards/assets/model-img.png b/src/views/cards/assets/model-img.png
new file mode 100644
index 0000000..c59a02f
Binary files /dev/null and b/src/views/cards/assets/model-img.png differ
diff --git a/src/views/cards/assets/right-title.png b/src/views/cards/assets/right-title.png
new file mode 100644
index 0000000..3f7967b
Binary files /dev/null and b/src/views/cards/assets/right-title.png differ
diff --git a/src/views/cards/assets/styles/index.scss b/src/views/cards/assets/styles/index.scss
new file mode 100644
index 0000000..ec608a4
--- /dev/null
+++ b/src/views/cards/assets/styles/index.scss
@@ -0,0 +1,658 @@
+// 卡片
+.card-page {
+
+  background-color: #222F3D;
+
+  .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: #40486a;
+    border-color: #40486a;
+  }
+
+  .el-checkbox__input.is-checked+.el-checkbox__label {
+    color: #ffffff;
+  }
+
+  .el-descriptions {
+    .is-bordered .el-descriptions-item__cell {
+      border: 1px solid #40486a;
+    }
+  }
+
+  .el-table::before,
+  .el-table--group::after,
+  .el-table--border::after {
+    background-color: #40486a;
+  }
+
+  .el-table {
+    // 新页面中el-table的样式
+
+    border-color: #40486a;
+
+    .el-table__expanded-cell {
+      background-color: transparent;
+    }
+
+    th {
+      border-right-color: #40486a;
+      border-bottom-color: #40486a !important;
+
+      .cell {
+        font-size: 14px;
+        color: #c6d3ec;
+        font-weight: bold;
+        // font-size: 18px;
+      }
+    }
+
+    td {
+      border-right-color: #40486a;
+      border-bottom-color: #40486a;
+
+      .cell,
+      .cell div,
+      .cell span {
+        // font-size: 17px;
+        // color: #c6d3ec;
+        // color:#000
+      }
+    }
+
+    .el-table__header tr {
+      background-color: #101d29 !important; // 添加这一行来修改header的背景颜色
+    }
+
+    .el-table__row {
+      background-color: #172533 !important;
+    }
+
+    .el-table__row--striped .el-table__cell {
+      background-color: #202f3e !important;
+    }
+  }
+
+  .el-select,
+  .el-input {
+    .el-input__inner {
+      border-color: #40486a; // 修改el-select边框颜色
+      font-size: 14px;
+    }
+  }
+
+  .el-input.is-disabled .el-input__inner {
+    background-color: transparent;
+    color: #fff;
+}
+
+  .el-textarea {
+    .el-textarea__inner {
+      border-color: #40486a; // 修改el-select边框颜色
+      font-size: 14px;
+    }
+  }
+
+  .el-date-editor {
+    border: 1px solid #40486a;
+
+    .el-range-input {
+      font-size: 14px; // 修改字体大小
+      background: none;
+    }
+  }
+
+
+  .el-form {
+    .el-form-item__label {
+      // font-size: 18px;
+      color: #e7f5f6;
+    }
+
+    // .el-button--mini {
+
+    //   font-size: 18px;
+    // }
+
+    // .el-select,
+    // .el-input {
+    //   .el-input__inner {
+    //     font-size: 18px;
+    //   }
+    // }
+
+    // .el-textarea {
+    //   .el-textarea__inner {
+    //     font-size: 18px;
+    //   }
+    // }
+
+    // .el-date-editor {
+
+    //   .el-range-input {
+    //     font-size: 18px; // 修改字体大小
+    //   }
+    // }
+  }
+
+
+
+
+  .el-button:hover {
+    background: linear-gradient(0deg,
+        rgba(255, 255, 255, 0.1),
+        rgba(255, 255, 255, 0.1)),
+      #247382;
+  }
+
+  .el-button:focus {
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
+      #247382;
+  }
+
+  .el-button:disabled {
+    background: #247382;
+    opacity: 0.4;
+  }
+
+  .el-button {
+    background-color: #247382; // 修改按钮的背景颜色
+    border: none;
+  }
+
+  .el-pagination {
+
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      color: #c6d3ec;
+      opacity: 0.3;
+    }
+
+    .btn-prev,
+    .btn-next,
+    .el-pager li {
+      background-color: transparent;
+      color: #40e5f0;
+    }
+
+    .el-pager li:not(.disabled).active {
+      background-color: transparent;
+      color: #40e5f0;
+    }
+
+    .el-pager li:not(.disabled):hover {
+      color: #40e5f0;
+    }
+  }
+
+  .el-tree {
+    // background: #202F3E;
+    //   /* 分割线 */
+    // border: 1px solid #40486A;
+
+    .el-tree-node__content {
+      height: 36px;
+
+      .el-tree-node__label {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        color: #C6D3EC;
+      }
+
+    }
+
+    .el-tree-node__content:hover {
+      background: rgba(64, 229, 240, 0.15);
+      border-radius: 2px;
+    }
+
+    .el-tree-node:focus>.el-tree-node__content {
+      background: rgba(64, 229, 240, 0.15);
+      border-radius: 2px;
+    }
+
+    .el-tree-node.is-current>.el-tree-node__content {
+      background: rgba(64, 229, 240, 0.15);
+      border-radius: 2px;
+      border-right: #40E5F0 3px solid;
+    }
+  }
+
+  /* 设置滚动条的样式 */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  /* 滚动槽 */
+  ::-webkit-scrollbar-track {
+    box-shadow: inset006pxrgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+  }
+
+  /* 滚动条滑块 */
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: rgba(64, 229, 240, 0.15);
+    box-shadow: inset006pxrgba(0, 0, 0, 0.5);
+  }
+
+  /* 6,边角，两个滚动条交汇处 */
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+
+.card-select-dropdown {
+  background-color: #202f3e !important; // 修改弹窗的背景颜色
+  border-color: #40486a !important; // 修改弹窗的边框颜色
+
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    background: #172533;
+  }
+}
+
+/*日期选择器弹窗*/
+.card-date-editor {
+  border: 1px solid #40486a;
+  background-color: #202f3e;
+
+  .el-picker-panel__sidebar {
+    background-color: #202f3e;
+    border-right: 1px solid #40486a;
+
+    .el-picker-panel__shortcut {
+      color: #fff;
+    }
+
+    .el-picker-panel__shortcut:hover {
+      color: #62d0ff;
+    }
+  }
+
+  .el-picker-panel,
+  .el-select-dropdown,
+  .el-select .el-input__inner:focus,
+  .el-select .el-input.is-focus .el-input__inner {
+    border: 1px solid #40486a;
+  }
+
+  /* 年选择器样式 */
+  .el-year-table td .cell:hover {
+    color: #62d0ff;
+  }
+
+  .el-year-table td.today .cell {
+    color: #62d0ff;
+  }
+
+  .el-date-picker__header--bordered {
+    border-bottom: solid 1px #40486a;
+  }
+
+  .el-year-table td.current:not(.disabled) .cell {
+    color: #62d0ff;
+  }
+
+  .el-date-table td.disabled div,
+  .el-date-table td.disabled div span {
+    color: rgba(255, 255, 255, 0.3); // 修改禁止点击字体的颜色
+    background-color: transparent;
+  }
+
+  .normal.disabled div {
+    background-color: transparent !important;
+  }
+
+  .available.in-range.start-date div span,
+  .available.in-range.end-date div span {
+    background: #247382;
+    border-radius: 50%;
+    color: #fff;
+  }
+
+  .available.in-range div,
+  .available.in-range div:hover {
+    background: rgba(64, 229, 240, 0.8);
+  }
+
+  .el-date-table td.today span {
+    color: #62d0ff;
+    font-weight: bold;
+  }
+
+  .el-picker-panel__icon-btn:hover {
+    color: #40e5f0;
+  }
+
+  .el-date-range-picker__content.is-left {
+    border-right: 1px solid #40486a;
+  }
+
+  .el-date-table th {
+    border-bottom: solid 1px #40486a;
+  }
+
+
+
+
+
+  /* 年选择器样式 */
+  .el-year-table td .cell:hover {
+    color: #62d0ff;
+  }
+
+  .el-year-table td.today .cell {
+    color: #62d0ff;
+  }
+
+  .el-date-picker__header--bordered {
+    border-bottom: solid 1px #40486a;
+  }
+
+  .el-year-table td.current:not(.disabled) .cell {
+    color: #62d0ff;
+  }
+
+  .el-date-table td.disabled div,
+  .el-date-table td.disabled div span {
+    color: rgba(255, 255, 255, 0.3); // 修改禁止点击字体的颜色
+    background-color: transparent;
+  }
+
+  .normal.disabled div {
+    background-color: transparent !important;
+  }
+
+  .available.in-range.start-date div span,
+  .available.in-range.end-date div span {
+    background: #247382;
+    border-radius: 50%;
+    color: #fff;
+  }
+
+  .available.in-range div,
+  .available.in-range div:hover {
+    background: rgba(64, 229, 240, 0.8);
+  }
+
+  .el-year-table {
+    .available {
+      padding: 13px 3px;
+    }
+  }
+
+  /*月选择器样式*/
+  .el-month-table {
+    .current {
+      .cell {
+        color: #62D0FF;
+      }
+    }
+
+    td.current:not(.disabled) .cell {
+      color: #62D0FF;
+    }
+
+    td.today .cell {
+      color: #62D0FF;
+    }
+
+    td .cell:hover {
+      color: #62D0FF;
+    }
+
+    td {
+      padding: 6px 0px;
+    }
+  }
+
+  /*日期选择器*/
+  &.el-date-picker {
+    .el-date-picker__header {
+      margin: 0 10px;
+      margin-top: 10px;
+    }
+
+    .el-picker-panel__content {
+      margin-top: 0px;
+      margin-bottom: 10px;
+    }
+  }
+
+  .el-date-table {
+    td {
+      width: 25px;
+      height: 20px;
+      padding: 2px 0;
+
+      div {
+        height: 20px;
+        padding: 1px 0;
+      }
+
+      span {
+        height: 18px;
+        width: 18px;
+        line-height: 18px;
+      }
+    }
+
+    td.start-date div {
+      margin-left: 9px;
+    }
+
+    td.end-date div {
+      margin-right: 9px;
+    }
+  }
+
+}
+
+// 卡片内容文字颜色--主要
+.card-content-text-color {
+  color: #c6d3ec;
+}
+
+.card-dialog-height-auto {
+  height: auto;
+}
+
+.card-dialog {
+  .el-dialog__header {
+    background-color: #222F3D;
+    color: #fff;
+    border-bottom: #40486a 1px solid;
+    height: 63px;
+    padding: 17px 24px;
+
+
+    .el-dialog__headerbtn .el-dialog__close {
+      color: #fff;
+    }
+
+    .el-dialog__title {
+      color: #fff;
+      font-size: 20px;
+    }
+  }
+
+  .el-dialog__body {
+    background-color: #222F3D;
+    padding: 24px;
+    flex: 1;
+    // 添加后，垂直滚动才不至于超出
+    height: 0;
+  }
+
+  .el-dialog__footer {
+    border-top: #40486a 1px solid;
+    background-color: #222F3D;
+    height: 72px;
+    padding: 17px 24px;
+    color: #fff;
+
+    .card-dialog-cancel-btn {
+      background-color: rgba(64, 72, 106, 0.1) !important;
+      background-image: url('../card_btn_border.png');
+      background-repeat: no-repeat;
+      /* 防止背景图像重复 */
+      background-position: center center;
+      /* 将背景图像居中 */
+      height: 41px;
+      width: 77px;
+
+      &:hover {
+        background-image: url('../card_btn_border.png');
+        background-color: rgba(197, 201, 219, 0.2) !important;
+      }
+
+      &:focus {
+        background-image: url('../card_btn_border.png');
+        background-color: rgba(64, 72, 106, 0.05) !important;
+      }
+
+      &:disabled {
+        background-image: url('../card_btn_border.png');
+        background-color: rgba(68, 68, 68, 0.1) !important;
+      }
+    }
+
+    .card-dialog-sure-btn {
+      background-color: rgba(64, 229, 240, 0.1) !important;
+      background-image: url('../card_btn_border.png');
+      background-repeat: no-repeat;
+      /* 防止背景图像重复 */
+      background-position: center center;
+      /* 将背景图像居中 */
+      height: 41px;
+      width: 77px;
+
+      &:hover {
+        background-image: url('../card_btn_border.png');
+        background-color: rgba(64, 229, 240, 0.2) !important;
+      }
+
+      &:focus {
+        background-image: url('../card_btn_border.png');
+        background-color: rgba(64, 124, 240, 0.1) !important;
+      }
+
+      &:disabled {
+        background-image: url('../card_btn_border.png');
+        background-color: rgba(68, 68, 68, 0.1) !important;
+      }
+    }
+  }
+}
+
+.card-message-box {
+  border: none;
+  padding-bottom: 0;
+
+  .el-message-box__header {
+    background-color: #222F3D;
+    color: #fff;
+    border-bottom: #40486a 1px solid;
+    height: 63px;
+    padding: 17px 24px;
+
+
+    .el-message-box__headerbtn .el-message-box__close {
+      color: #fff;
+    }
+
+    .el-message-box__title {
+      color: #fff;
+      font-size: 20px;
+    }
+  }
+
+  .el-message-box__content {
+    background-color: #222F3D;
+    padding: 24px;
+  }
+
+  .el-message-box__btns {
+    border-top: #40486a 1px solid;
+    background-color: #222F3D;
+    height: 72px;
+    padding: 17px 24px;
+    color: #fff;
+
+    .el-button {
+      background-color: rgba(64, 72, 106, 0.1) !important;
+      background-image: url('../card_btn_border.png');
+      background-repeat: no-repeat;
+      /* 防止背景图像重复 */
+      background-position: center center;
+      /* 将背景图像居中 */
+      height: 41px;
+      width: 77px;
+
+      &:hover {
+        background-image: url('../card_btn_border.png');
+        background-color: rgba(197, 201, 219, 0.2) !important;
+      }
+
+      &:focus {
+        background-image: url('../card_btn_border.png');
+        background-color: rgba(64, 72, 106, 0.05) !important;
+      }
+
+      &:disabled {
+        background-image: url('../card_btn_border.png');
+        background-color: rgba(68, 68, 68, 0.1) !important;
+      }
+    }
+
+    .el-button--primary {
+      background-color: rgba(64, 229, 240, 0.1) !important;
+      background-image: url('../card_btn_border.png');
+      background-repeat: no-repeat;
+      /* 防止背景图像重复 */
+      background-position: center center;
+      /* 将背景图像居中 */
+      height: 41px;
+      width: 77px;
+
+      &:hover {
+        background-image: url('../card_btn_border.png');
+        background-color: rgba(64, 229, 240, 0.2) !important;
+      }
+
+      &:focus {
+        background-image: url('../card_btn_border.png');
+        background-color: rgba(64, 124, 240, 0.1) !important;
+      }
+
+      &:disabled {
+        background-image: url('../card_btn_border.png');
+        background-color: rgba(68, 68, 68, 0.1) !important;
+      }
+    }
+
+
+  }
+}
+
+.el-notification__title {
+  color: #fff;
+}
+
+.el-notification {
+  background-color: #40486a;
+  border-color: #005d6b;
+}
+
+
+.vue-treeselect {
+  .vue-treeselect__menu {
+    background-color: #202f3e;
+    border-color: #40486a;
+    border-top-color: transparent;
+  }
+  .vue-treeselect__option--highlight {
+    background: #172533;
+  }
+}
diff --git a/src/views/cards/assets/taskDetail.png b/src/views/cards/assets/taskDetail.png
new file mode 100644
index 0000000..e698bed
Binary files /dev/null and b/src/views/cards/assets/taskDetail.png differ
diff --git a/src/views/cards/common.js b/src/views/cards/common.js
new file mode 100644
index 0000000..d5464c5
--- /dev/null
+++ b/src/views/cards/common.js
@@ -0,0 +1,48 @@
+let messageId = 0;
+/**
+ * 调用卡片系统弹窗
+ * @param {*} zhan_name 站点名称
+ * @param {*} sourceCardId 源卡片id
+ * @param {*} targetCardId 目标卡片id
+ * @param {*} dialogTitle 弹窗标题
+ * @param {*} dialogIsDrag 弹窗是否可拖拽 默认 true
+ * @param {*} positionTop 弹窗上边距
+ * @param {*} positionLeft 弹窗左边距
+ * @param {*} contentWidth 弹窗内容宽度
+ * @param {*} contentHeight 弹窗内容高度
+ * @param {*} params 要传递给卡片的参数
+ */
+export function openDialog({
+  zhan_name = "",
+  sourceCardId,
+  targetCardId,
+  dialogTitle,
+  dialogIsDrag = true,
+  positionTop = "30",
+  positionLeft = "30",
+  contentWidth = "1856",
+  contentHeight = "896",
+  params = {},
+}) {
+  const id = "message_" + ++messageId;
+  var data = {
+    id,
+    sourceId: zhan_name + sourceCardId,
+    targetId: "main_frame_global_modal", // 基座系统弹窗ID
+    event: {
+      type: "SWITCH_GLOBAL_MODAL",
+      data: {
+        title: dialogTitle, // 弹窗标题
+        cardId: zhan_name + targetCardId,
+        isDrag: dialogIsDrag, // 弹窗是否可拖拽，默认为true可拖拽
+        positionTop, // 数字，弹窗上边距 positionTop
+        positionLeft, // 数字，弹窗左边距 positionLeft
+        contentWidth, // 数字，弹窗内容宽度
+        contentHeight, // 数字，弹窗内容高度
+        params, // 需要传递的参数
+      },
+    },
+    tm: new Date().getTime(), // 时间戳
+  };
+  window.parent.postMessage(JSON.stringify(data), "*");
+}
diff --git a/src/views/cards/components/CardPagination/index.vue b/src/views/cards/components/CardPagination/index.vue
new file mode 100644
index 0000000..1ca3f45
--- /dev/null
+++ b/src/views/cards/components/CardPagination/index.vue
@@ -0,0 +1,216 @@
+<template>
+  <div :class="{ hidden: hidden }" class="pagination-container">
+    <div class="pagination-total">共 {{ total }} 条</div>
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :pager-count="pagerCount"
+      :total="total"
+      v-bind="$attrs"
+      popper-class="card-select-dropdown"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to'
+
+export default {
+  name: 'CardPagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50]
+      }
+    },
+    // Page button count on small screens
+    pagerCount: {
+      type: Number,
+      default: document.body.clientWidth < 992 ? 5 : 7
+    },
+    layout: {
+      type: String,
+      default: 'sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      if (this.currentPage * val > this.total) {
+        this.currentPage = 1
+      }
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pagination-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  min-height: 48px;
+  margin-top: 0;
+  padding: 10px 16px;
+  box-sizing: border-box;
+  color: #dcecff;
+  background: #0b1140 !important;
+  border-top: 1px solid rgba(79, 166, 255, 0.35);
+}
+
+.pagination-total {
+  flex: 0 0 auto;
+  font-size: 14px;
+  line-height: 24px;
+  white-space: nowrap;
+}
+
+.pagination-container ::v-deep .el-pagination {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 0;
+  color: #dcecff;
+}
+
+.pagination-container ::v-deep .el-pagination span:not([class*="suffix"]),
+.pagination-container ::v-deep .el-pagination button,
+.pagination-container ::v-deep .el-pager li {
+  font-size: 14px;
+}
+
+.pagination-container ::v-deep .el-pagination .btn-prev,
+.pagination-container ::v-deep .el-pagination .btn-next,
+.pagination-container ::v-deep .el-pagination .el-pager li {
+  min-width: 32px;
+  height: 28px;
+  line-height: 26px;
+  margin: 0 3px;
+  border: 1px solid rgba(90, 170, 255, 0.45);
+  border-radius: 2px;
+  background: #10306d;
+  color: #ffffff;
+}
+
+.pagination-container ::v-deep .el-pagination .el-pager li.active {
+  background: #2f7efb;
+  border-color: #2f7efb;
+  color: #ffffff;
+}
+
+.pagination-container ::v-deep .el-pagination .btn-prev:hover,
+.pagination-container ::v-deep .el-pagination .btn-next:hover,
+.pagination-container ::v-deep .el-pagination .el-pager li:hover {
+  border-color: #64e7ff;
+  color: #64e7ff;
+}
+
+.pagination-container ::v-deep .el-pagination .btn-prev.is-disabled,
+.pagination-container ::v-deep .el-pagination .btn-next.is-disabled,
+.pagination-container ::v-deep .el-pagination .el-pager li.disabled {
+  background: #0b1f54;
+  border-color: rgba(90, 170, 255, 0.2);
+  color: rgba(255, 255, 255, 0.35);
+}
+
+.pagination-container ::v-deep .el-pagination .el-select .el-input {
+  width: 92px;
+}
+
+.pagination-container ::v-deep .el-pagination .el-input__inner {
+  height: 28px;
+  line-height: 28px;
+  background: #0f2b6f;
+  border: 1px solid rgba(80, 170, 255, 0.55);
+  color: #ffffff;
+}
+
+.pagination-container ::v-deep .el-pagination .el-input__icon {
+  line-height: 28px;
+  color: #7dd6ff;
+}
+
+.pagination-container ::v-deep .el-pagination__sizes,
+.pagination-container ::v-deep .el-pagination__jump,
+.pagination-container ::v-deep .el-pagination__total {
+  color: #dcecff;
+}
+
+.pagination-container ::v-deep .el-pagination__editor.el-input {
+  width: 48px;
+}
+
+.pagination-container ::v-deep .el-pagination__editor.el-input .el-input__inner {
+  width: 48px;
+  padding: 0 4px;
+}
+
+.pagination-container.hidden {
+  display: none;
+}
+</style>
diff --git a/src/views/cards/components/CardProgressBar.vue b/src/views/cards/components/CardProgressBar.vue
new file mode 100644
index 0000000..032bc3b
--- /dev/null
+++ b/src/views/cards/components/CardProgressBar.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="card-progress-container">
+    <div class="card-progress" :style="{ 'background': bgColor }">
+      <div class="card-progress-inner" :style="{
+        width: progress + '%',
+        background: color,
+      }"></div>
+      <div class="point-circle big-circle" :style="{
+        left: progress + '%',
+      }"></div>
+      <div class="point-circle small-circle" :style="{
+        left: progress + '%',
+      }"></div>
+    </div>
+    <div v-if="!hiddenText" class="progress-text" :style="{
+      fontSize: textSize + 'px',
+    }">
+      {{ progressText }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CardProgressBar",
+  props: {
+    progress: {
+      type: Number,
+      required: true,
+    },
+    color: {
+      type: String,
+      default: "#0042A6",
+    },
+    bgColor: {
+      type: String,
+      default: "#B0C5E9",
+    },
+
+    textSize: {
+      type: Number,
+      default: 14,
+    },
+    getText: {
+      type: Function,
+      default: (progress) => `${progress}%`,
+    },
+    hiddenText: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    progressText () {
+      return this.getText(this.progress);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.card-progress-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 18px;
+}
+
+.card-progress {
+  position: relative;
+  width: 100%;
+  /* overflow: hidden; */
+  flex: 1;
+  background-color: #B0C5E9;
+  height: 8px;
+  border-radius: 6px;
+}
+
+.card-progress-inner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 8px;
+  border-radius: 6px;
+}
+
+.point-circle {
+  position: absolute;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  /* margin-left: -5px; */
+}
+
+.small-circle {
+  background: #4677C3;
+  width: 12px;
+  height: 12px;
+  top: 50%;
+}
+
+.big-circle {
+  background: rgba(70, 119, 195, 0.25);
+  width: 18px;
+  height: 18px;
+  top: 50%;
+}
+
+.progress-text {
+  white-space: nowrap;
+  padding-left: 10px;
+}
+</style>
diff --git a/src/views/cards/components/ImagePreview/index.vue b/src/views/cards/components/ImagePreview/index.vue
new file mode 100644
index 0000000..0cbd3e8
--- /dev/null
+++ b/src/views/cards/components/ImagePreview/index.vue
@@ -0,0 +1,389 @@
+<template>
+  <div
+    class="flex-row card-page"
+    style="background: #090918"
+    v-loading="loading"
+  >
+    <div style="flex: 1; height: 100%; display: flex; flex-direction: column">
+      <div class="img-wrap">
+        <AsyncImage
+          style="width: 100%; height: 100%"
+          fit="contain"
+          :src="selectImgUrl"
+        ></AsyncImage>
+        <DrawShape
+          ref="drawShapeRef"
+          :brokenLineCount="1"
+          @drawComplete="
+            (shape) => {
+              handleDrawComplete(shape);
+            }
+          "
+        />
+
+        <!-- 上一个图片 -->
+        <el-button
+          v-if="bShowBackBtn"
+          @click="() => selectIndex--"
+          class="img-handle-btn img-handle-btn-left left-btn"
+        ></el-button>
+        <!-- 下一个图片 -->
+        <el-button
+          v-if="bShowNextBtn"
+          @click="() => selectIndex++"
+          class="img-handle-btn img-handle-btn-right right-btn"
+        ></el-button>
+      </div>
+
+      <!-- 开始测温 -->
+      <div
+        v-if="dataShowTemperatureTool && dataImageUrls.length > 0"
+        class="measure-temperature-btn"
+      >
+        <div>
+          <el-button @click="measureTemperature(ShapeEnum.point)" type="primary"
+            >点测温</el-button
+          >
+          <el-button
+            @click="measureTemperature(ShapeEnum.brokenline)"
+            type="primary"
+            >线测温</el-button
+          >
+          <el-button @click="measureTemperature(ShapeEnum.rect)" type="primary"
+            >区域测温</el-button
+          >
+          <el-button
+            v-if="measuring"
+            @click="cancelMeasureTemperature"
+            type="primary"
+            >取消测温</el-button
+          >
+        </div>
+        <div style="flex: 1; text-align: right">
+          <span style="padding-left: 10px"
+            >平均温度：{{
+              temperatureInfo.averageT ? temperatureInfo.averageT + "℃" : "-"
+            }}</span
+          >
+          <span style="padding-left: 10px"
+            >最大温度：{{
+              temperatureInfo.maxT ? temperatureInfo.maxT + "℃" : "-"
+            }}</span
+          >
+          <span style="padding-left: 10px"
+            >最小温度：{{
+              temperatureInfo.maxT ? temperatureInfo.minT + "℃" : "-"
+            }}</span
+          >
+          <span style="padding-left: 10px"
+            >环境温度：{{
+              temperatureInfo.weatherT ? temperatureInfo.weatherT + "℃" : "-"
+            }}</span
+          >
+        </div>
+      </div>
+    </div>
+
+    <div class="img-list-wrap" v-if="dataImageUrls.length > 1">
+      <ul ref="imgUlRef">
+        <li
+          v-for="(item, index) in dataImageUrls"
+          :key="index"
+          @click="onSelectImage(item, index)"
+        >
+          <div
+            :style="imgListItemStyle"
+            :class="{ 'img-list-item-selected': index === selectIndex }"
+          >
+            <AsyncImage
+              style="width: 100%; height: 100%"
+              fit="contain"
+              :src="item"
+            ></AsyncImage>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getTemperatureValue } from "@/api/device";
+import DrawShape, { ShapeEnum } from "@/components/Canvas/DrawShape.vue";
+// 图片列表item高度
+const IMG_LIST_ITEM_HEIGHT = 170;
+
+export default {
+  name: "ImagePreviewDialog",
+  components: { DrawShape },
+  props: {
+    // 是否显示弹窗
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示测温工具
+    showTemperatureTool: {
+      type: Boolean,
+      default: false,
+    },
+    // 图片地址列表
+    imageUrls: {
+      type: Array,
+      default: [],
+      require: false,
+    },
+    // 选择图片的位置
+    selectImgPosition: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      // 当前选择图片url
+      selectIndex: 0,
+      // 图片列表item样式，因为有自动滚动，为了使其高度便于统一修改，所以放在了js里
+      imgListItemStyle: {
+        width: "300px",
+        height: `${IMG_LIST_ITEM_HEIGHT}px`,
+        margin: "5px 0",
+      },
+      ShapeEnum: ShapeEnum,
+      // 是否正在测量
+      measuring: false,
+      temperatureInfo: {},
+      loading: false,
+      dataShowTemperatureTool: false,
+      dataImageUrls: [],
+    };
+  },
+  computed: {
+    selectImgUrl() {
+      // console.log('33',this.dataImageUrls.length > this.selectIndex
+      //   ? 'http://192.168.1.116:33333/'+this.dataImageUrls[this.selectIndex]
+      //   : "")
+      // return this.dataImageUrls.length > this.selectIndex
+      //   ? 'http://192.168.1.116:33333/'+this.dataImageUrls[this.selectIndex]
+      //   : "";
+
+      // 武汉巡视任务图片列表查看
+      return this.dataImageUrls.length > this.selectIndex
+        ? this.dataImageUrls[this.selectIndex]
+        : "";
+    },
+    // 是否显示下一页
+    bShowNextBtn() {
+      return this.selectIndex + 1 < this.dataImageUrls.length;
+    },
+    // 是否显示上一页
+    bShowBackBtn() {
+      return this.selectIndex > 0;
+    },
+  },
+  watch: {
+    visible(value) {
+      // 显示之前先复位状态
+      if (value) {
+        this.reset();
+      }
+    },
+    selectImgPosition() {
+      if (this.selectImgPosition < this.dataImageUrls.length) {
+        this.selectIndex = this.selectImgPosition;
+      }
+    },
+    selectIndex(newValue) {
+      // 滚动列表
+      if (this.$refs.imgUlRef) {
+        this.$refs.imgUlRef.scrollTo({
+          top: IMG_LIST_ITEM_HEIGHT * newValue,
+          behavior: "smooth",
+        });
+      }
+    },
+  },
+  created() {
+    this.dataImageUrls = this.imageUrls;
+    this.selectIndex = this.selectImgPosition;
+    this.dataShowTemperatureTool = this.showTemperatureTool;
+    // 没传值，则从缓存中取
+    if (!this.dataImageUrls || !this.dataImageUrls.length) {
+      const info = JSON.parse(sessionStorage.getItem("imageInfo"));
+      if (info.imageUrls) {
+        this.dataImageUrls = info.imageUrls;
+      }
+      if (info.selectImgPosition) {
+        this.selectIndex = info.selectImgPosition;
+      }
+      if (info.showTemperatureTool) {
+        this.dataShowTemperatureTool = info.showTemperatureTool;
+      }
+    }
+  },
+
+  methods: {
+    reset() {
+      this.selectIndex = 0;
+      this.hideMeasureBox();
+    },
+    // 选择图片
+    onSelectImage(item, index) {
+      this.selectIndex = index;
+    },
+    // 显示测温框
+    showMeasureBox() {
+      if (this.$refs.drawShapeRef) {
+        this.temperatureInfo = {};
+        this.measuring = true;
+        this.$refs.drawShapeRef.show();
+      }
+    },
+    // 显示测温框
+    hideMeasureBox() {
+      this.measuring = false;
+      this.temperatureInfo = {};
+      if (this.$refs.drawShapeRef) {
+        this.$refs.drawShapeRef.hide();
+      }
+    },
+    // 测温
+    measureTemperature(type) {
+      this.showMeasureBox();
+      this.$nextTick(() => {
+        this.$refs.drawShapeRef.init();
+        this.$refs.drawShapeRef.startDraw(type);
+      });
+    },
+    cancelMeasureTemperature() {
+      this.hideMeasureBox();
+    },
+    handleDrawComplete(shape) {
+      const info = shape.getData();
+      this.loading = true;
+      getTemperatureValue(info.data, info.type, this.selectImgUrl)
+        .then((res) => {
+          this.temperatureInfo = res.data;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.flex-row {
+  display: flex;
+  height: 100%;
+}
+
+.img-wrap {
+  flex: 1;
+  // height: 100%;
+  height: 0;
+  position: relative;
+
+  .img-handle-btn {
+    position: absolute;
+    top: 45%;
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 25px;
+    width: 96px;
+    height: 96px;
+    // border: rgba(255, 255, 255, 0.5) solid 2px;
+    // border-radius: 25px;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .img-handle-btn-left {
+    left: 15px;
+  }
+
+  .img-handle-btn-right {
+    right: 15px;
+  }
+}
+
+.measure-temperature-btn {
+  padding: 10px 0;
+  display: flex;
+}
+
+.img-list-wrap {
+  width: 300px;
+  height: 100%;
+  padding: 0 0 0 10px;
+
+  ul {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin: 0;
+    /* 解决火狐浏览器不隐藏滚动条的问题 */
+    scrollbar-width: none;
+
+    .img-list-item {
+      width: 300px;
+      height: 170px;
+      margin: 5px 0;
+    }
+
+    .img-list-item-selected {
+      border: 3px solid #40486a;
+    }
+  }
+}
+
+::v-deep .left-btn .is-disabled {
+  /* 禁用状态下移除 active 背景色 */
+  background-image: none;
+}
+
+.left-btn {
+  /* 设置默认状态的背景图片 */
+  background-image: url("../../assets/image-btn-left-normal.png");
+}
+
+.left-btn:disabled {
+  /* 设置禁用状态的背景图片 */
+  background-image: url("../../assets/image-btn-left-disable.png");
+}
+
+.left-btn:not(.is-disabled):active {
+  /* 设置按下状态的背景图片 */
+  background-image: url("../../assets/image-btn-left-press.png");
+}
+
+.left-btn:not(.is-disabled):hover {
+  /* 设置悬停状态的背景图片 */
+  background-image: url("../../assets/image-btn-left-hover.png");
+}
+
+.right-btn {
+  /* 设置默认状态的背景图片 */
+  background-image: url("../../assets/image-btn-right-normal.png");
+}
+
+.right-btn:disabled {
+  /* 设置禁用状态的背景图片 */
+  background-image: url("../../assets/image-btn-right-disable.png");
+}
+
+.right-btn:not(.is-disabled):active {
+  /* 设置按下状态的背景图片 */
+  background-image: url("../../assets/image-btn-right-press.png");
+}
+
+.right-btn:not(.is-disabled):hover {
+  /* 设置悬停状态的背景图片 */
+  background-image: url("../../assets/image-btn-right-hover.png");
+}
+</style>
diff --git a/src/views/cards/components/ImagePreviewZoom/index.vue b/src/views/cards/components/ImagePreviewZoom/index.vue
new file mode 100644
index 0000000..91bf7fb
--- /dev/null
+++ b/src/views/cards/components/ImagePreviewZoom/index.vue
@@ -0,0 +1,654 @@
+<template>
+  <div
+    class="flex-row card-page"
+    style="background: #090918"
+    v-loading="loading"
+  >
+    <div style="flex: 1; height: 100%; display: flex; flex-direction: column">
+      <div class="img-wrap">
+        <!-- 修改这部分：添加缩放容器和包装器 -->
+        <div class="zoom-container" ref="zoomContainer">
+          <div
+            class="zoom-wrapper"
+            ref="zoomWrapper"
+            :style="{
+              transform: `scale(${imageScale})`,
+              transformOrigin: '0 0',
+              position: 'absolute',
+              left: `${imagePosition.x}px`,
+              top: `${imagePosition.y}px`,
+              width: '100%',
+              height: '100%'
+            }"
+            @mousedown="startDrag($event)"
+            @touchstart="startTouchDrag($event)"
+          >
+            <AsyncImage
+              style="width: 100%; height: 100%"
+              fit="contain"
+              :src="selectImgUrl"
+              :supportPreview="false"
+            ></AsyncImage>
+          </div>
+        </div>
+
+        <DrawShape
+          ref="drawShapeRef"
+          :brokenLineCount="1"
+          @drawComplete="
+            (shape) => {
+              handleDrawComplete(shape);
+            }
+          "
+        />
+
+        <!-- 添加重置按钮 -->
+        <div class="zoom-controls">
+          <el-button
+            size="mini"
+            circle
+            @click="resetImage"
+            title="重置"
+          >
+            ↺
+          </el-button>
+        </div>
+
+        <!-- 上一个图片 -->
+        <el-button
+          v-if="bShowBackBtn"
+          @click="() => selectIndex--"
+          class="img-handle-btn img-handle-btn-left left-btn"
+        ></el-button>
+        <!-- 下一个图片 -->
+        <el-button
+          v-if="bShowNextBtn"
+          @click="() => selectIndex++"
+          class="img-handle-btn img-handle-btn-right right-btn"
+        ></el-button>
+      </div>
+
+      <!-- 开始测温 -->
+      <div
+        v-if="dataShowTemperatureTool && dataImageUrls.length > 0"
+        class="measure-temperature-btn"
+      >
+        <div>
+          <el-button @click="measureTemperature(ShapeEnum.point)" type="primary"
+            >点测温</el-button
+          >
+          <el-button
+            @click="measureTemperature(ShapeEnum.brokenline)"
+            type="primary"
+            >线测温</el-button
+          >
+          <el-button @click="measureTemperature(ShapeEnum.rect)" type="primary"
+            >区域测温</el-button
+          >
+          <el-button
+            v-if="measuring"
+            @click="cancelMeasureTemperature"
+            type="primary"
+            >取消测温</el-button
+          >
+        </div>
+        <div style="flex: 1; text-align: right">
+          <span style="padding-left: 10px"
+            >平均温度：{{
+              temperatureInfo.averageT ? temperatureInfo.averageT + "℃" : "-"
+            }}</span
+          >
+          <span style="padding-left: 10px"
+            >最大温度：{{
+              temperatureInfo.maxT ? temperatureInfo.maxT + "℃" : "-"
+            }}</span
+          >
+          <span style="padding-left: 10px"
+            >最小温度：{{
+              temperatureInfo.maxT ? temperatureInfo.minT + "℃" : "-"
+            }}</span
+          >
+          <span style="padding-left: 10px"
+            >环境温度：{{
+              temperatureInfo.weatherT ? temperatureInfo.weatherT + "℃" : "-"
+            }}</span
+          >
+        </div>
+      </div>
+    </div>
+
+    <div class="img-list-wrap" v-if="dataImageUrls.length > 1">
+      <ul ref="imgUlRef">
+        <li
+          v-for="(item, index) in dataImageUrls"
+          :key="index"
+          @click="onSelectImage(item, index)"
+        >
+          <div
+            :style="imgListItemStyle"
+            :class="{ 'img-list-item-selected': index === selectIndex }"
+          >
+            <AsyncImage
+              style="width: 100%; height: 100%"
+              fit="contain"
+              :src="item"
+            ></AsyncImage>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getTemperatureValue } from "@/api/device";
+import DrawShape, { ShapeEnum } from "@/components/Canvas/DrawShape.vue";
+// 图片列表item高度
+const IMG_LIST_ITEM_HEIGHT = 170;
+
+export default {
+  name: "ImagePreviewDialog",
+  components: { DrawShape },
+  props: {
+    // 是否显示弹窗
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示测温工具
+    showTemperatureTool: {
+      type: Boolean,
+      default: false,
+    },
+    // 图片地址列表
+    imageUrls: {
+      type: Array,
+      default: [],
+      require: false,
+    },
+    // 选择图片的位置
+    selectImgPosition: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      // 当前选择图片url
+      selectIndex: 0,
+      // 图片列表item样式，因为有自动滚动，为了使其高度便于统一修改，所以放在了js里
+      imgListItemStyle: {
+        width: "300px",
+        height: `${IMG_LIST_ITEM_HEIGHT}px`,
+        margin: "5px 0",
+      },
+      ShapeEnum: ShapeEnum,
+      // 是否正在测量
+      measuring: false,
+      temperatureInfo: {},
+      loading: false,
+      dataShowTemperatureTool: false,
+      dataImageUrls: [],
+
+      // 新增：缩放相关数据
+      imageScale: 1,
+      imagePosition: { x: 0, y: 0 },
+      isDragging: false,
+      dragStartPos: { x: 0, y: 0 },
+      dragStartImagePos: { x: 0, y: 0 },
+    };
+  },
+  computed: {
+    selectImgUrl() {
+      return this.dataImageUrls.length > this.selectIndex
+        ? this.dataImageUrls[this.selectIndex]
+        : "";
+    },
+    // 是否显示下一页
+    bShowNextBtn() {
+      return this.selectIndex + 1 < this.dataImageUrls.length;
+    },
+    // 是否显示上一页
+    bShowBackBtn() {
+      return this.selectIndex > 0;
+    },
+  },
+  watch: {
+    visible(value) {
+      // 显示之前先复位状态
+      if (value) {
+        this.reset();
+      }
+    },
+    selectImgPosition() {
+      if (this.selectImgPosition < this.dataImageUrls.length) {
+        this.selectIndex = this.selectImgPosition;
+        this.resetImage(); // 切换到新图片时重置缩放
+      }
+    },
+    selectIndex() {
+      // 滚动列表
+      if (this.$refs.imgUlRef) {
+        this.$refs.imgUlRef.scrollTo({
+          top: IMG_LIST_ITEM_HEIGHT * this.selectIndex,
+          behavior: "smooth",
+        });
+      }
+      // 切换图片时重置缩放
+      this.resetImage();
+    },
+  },
+  created() {
+    this.dataImageUrls = this.imageUrls;
+    this.selectIndex = this.selectImgPosition;
+    this.dataShowTemperatureTool = this.showTemperatureTool;
+    // 没传值，则从缓存中取
+    if (!this.dataImageUrls || !this.dataImageUrls.length) {
+      const info = JSON.parse(sessionStorage.getItem("imageInfo"));
+      if (info.imageUrls) {
+        this.dataImageUrls = info.imageUrls;
+      }
+      if (info.selectImgPosition) {
+        this.selectIndex = info.selectImgPosition;
+      }
+      if (info.showTemperatureTool) {
+        this.dataShowTemperatureTool = info.showTemperatureTool;
+      }
+    }
+  },
+
+  mounted() {
+    // 绑定事件
+    this.bindGlobalEvents();
+
+    // 添加滚轮事件监听
+    this.$nextTick(() => {
+      if (this.$refs.zoomContainer) {
+        this.$refs.zoomContainer.addEventListener('wheel', this.handleWheel, { passive: false });
+      }
+    });
+  },
+
+  beforeDestroy() {
+    // 移除事件
+    this.unbindGlobalEvents();
+
+    // 移除滚轮事件
+    if (this.$refs.zoomContainer) {
+      this.$refs.zoomContainer.removeEventListener('wheel', this.handleWheel);
+    }
+  },
+
+  methods: {
+    reset() {
+      this.selectIndex = 0;
+      this.hideMeasureBox();
+      this.resetImage(); // 重置缩放
+    },
+
+    // 选择图片
+    onSelectImage(item, index) {
+      this.selectIndex = index;
+    },
+
+    // 显示测温框
+    showMeasureBox() {
+      if (this.$refs.drawShapeRef) {
+        this.temperatureInfo = {};
+        this.measuring = true;
+        this.$refs.drawShapeRef.show();
+      }
+    },
+
+    // 显示测温框
+    hideMeasureBox() {
+      this.measuring = false;
+      this.temperatureInfo = {};
+      if (this.$refs.drawShapeRef) {
+        this.$refs.drawShapeRef.hide();
+      }
+    },
+
+    // 测温
+    measureTemperature(type) {
+      this.showMeasureBox();
+      this.$nextTick(() => {
+        this.$refs.drawShapeRef.init();
+        this.$refs.drawShapeRef.startDraw(type);
+      });
+    },
+
+    cancelMeasureTemperature() {
+      this.hideMeasureBox();
+    },
+
+    handleDrawComplete(shape) {
+      const info = shape.getData();
+      this.loading = true;
+      getTemperatureValue(info.data, info.type, this.selectImgUrl)
+        .then((res) => {
+          this.temperatureInfo = res.data;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+
+    // 新增：滚轮事件处理
+    handleWheel(event) {
+      event.preventDefault();
+      const delta = event.deltaY || event.detail || event.wheelDelta;
+      const direction = delta > 0 ? -1 : 1;
+      const scaleStep = 0.1;
+
+      const oldScale = this.imageScale;
+      let newScale = oldScale + direction * scaleStep;
+      newScale = Math.max(0.1, Math.min(5, newScale));
+
+      // 计算鼠标在容器中的位置
+      const container = event.currentTarget;
+      const containerRect = container.getBoundingClientRect();
+      const mouseX = event.clientX - containerRect.left;
+      const mouseY = event.clientY - containerRect.top;
+
+      // 当前图片位置
+      const currentPos = this.imagePosition;
+
+      // 计算缩放后的新位置
+      // 缩放比例变化
+      const scaleChange = newScale / oldScale;
+
+      // 调整位置使鼠标点保持在图片上的同一位置
+      this.imagePosition = {
+        x: currentPos.x - (mouseX - currentPos.x) * (scaleChange - 1),
+        y: currentPos.y - (mouseY - currentPos.y) * (scaleChange - 1)
+      };
+
+      this.imageScale = newScale;
+    },
+
+    // 开始鼠标拖拽
+    startDrag(event) {
+      if (event.button !== 0) return;
+
+      this.isDragging = true;
+      this.dragStartPos = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      this.dragStartImagePos = {
+        x: this.imagePosition.x,
+        y: this.imagePosition.y
+      };
+
+      // 添加拖拽样式
+      const wrapper = this.$refs.zoomWrapper;
+      if (wrapper) {
+        wrapper.classList.add('dragging');
+      }
+
+      // 防止文本选择
+      document.body.style.userSelect = 'none';
+      document.body.style.webkitUserSelect = 'none';
+
+      event.preventDefault();
+      event.stopPropagation();
+    },
+
+    // 开始触摸拖拽
+    startTouchDrag(event) {
+      if (event.touches.length !== 1) return;
+
+      this.isDragging = true;
+      this.dragStartPos = {
+        x: event.touches[0].clientX,
+        y: event.touches[0].clientY
+      };
+      this.dragStartImagePos = {
+        x: this.imagePosition.x,
+        y: this.imagePosition.y
+      };
+
+      const wrapper = this.$refs.zoomWrapper;
+      if (wrapper) {
+        wrapper.classList.add('dragging');
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+    },
+
+    // 处理拖拽移动
+    handleDragMove(event) {
+      if (!this.isDragging) return;
+
+      let clientX, clientY;
+
+      if (event.type === 'mousemove') {
+        clientX = event.clientX;
+        clientY = event.clientY;
+      } else if (event.type === 'touchmove' && event.touches.length === 1) {
+        clientX = event.touches[0].clientX;
+        clientY = event.touches[0].clientY;
+      } else {
+        return;
+      }
+
+      const deltaX = clientX - this.dragStartPos.x;
+      const deltaY = clientY - this.dragStartPos.y;
+
+      // 更新图片位置
+      this.imagePosition = {
+        x: this.dragStartImagePos.x + deltaX,
+        y: this.dragStartImagePos.y + deltaY
+      };
+
+      event.preventDefault();
+      event.stopPropagation();
+    },
+
+    // 结束拖拽
+    handleDragEnd(event) {
+      if (!this.isDragging) return;
+
+      // 移除拖拽样式
+      const wrapper = this.$refs.zoomWrapper;
+      if (wrapper) {
+        wrapper.classList.remove('dragging');
+      }
+
+      // 恢复文本选择
+      document.body.style.userSelect = '';
+      document.body.style.webkitUserSelect = '';
+
+      this.isDragging = false;
+    },
+
+    // 重置图片缩放和位置
+    resetImage() {
+      this.imageScale = 1;
+      this.imagePosition = { x: 0, y: 0 };
+    },
+
+    // 绑定全局事件
+    bindGlobalEvents() {
+      document.addEventListener('mousemove', this.handleDragMove);
+      document.addEventListener('mouseup', this.handleDragEnd);
+      document.addEventListener('touchmove', this.handleDragMove, { passive: false });
+      document.addEventListener('touchend', this.handleDragEnd);
+    },
+
+    // 移除全局事件
+    unbindGlobalEvents() {
+      document.removeEventListener('mousemove', this.handleDragMove);
+      document.removeEventListener('mouseup', this.handleDragEnd);
+      document.removeEventListener('touchmove', this.handleDragMove);
+      document.removeEventListener('touchend', this.handleDragEnd);
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.flex-row {
+  display: flex;
+  height: 100%;
+}
+
+.img-wrap {
+  flex: 1;
+  height: 0;
+  position: relative;
+
+  // 新增：缩放容器样式
+  .zoom-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  .zoom-wrapper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    cursor: grab;
+
+    &.dragging {
+      cursor: grabbing;
+    }
+
+    ::v-deep .el-image {
+      width: 100%;
+      height: 100%;
+      user-select: none;
+      -webkit-user-drag: none;
+      pointer-events: none; /* 防止图片干扰拖拽事件 */
+    }
+  }
+
+  // 新增：缩放控制按钮
+  .zoom-controls {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 10;
+
+    .el-button {
+      background: rgba(0, 0, 0, 0.6);
+      color: white;
+      border: none;
+      font-size: 16px;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.8);
+      }
+    }
+  }
+
+  .img-handle-btn {
+    position: absolute;
+    top: 45%;
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 25px;
+    width: 96px;
+    height: 96px;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    z-index: 11; // 确保在缩放控制之上
+  }
+
+  .img-handle-btn-left {
+    left: 15px;
+  }
+
+  .img-handle-btn-right {
+    right: 15px;
+  }
+}
+
+.measure-temperature-btn {
+  padding: 10px 0;
+  display: flex;
+}
+
+.img-list-wrap {
+  width: 300px;
+  height: 100%;
+  padding: 0 0 0 10px;
+
+  ul {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin: 0;
+    /* 解决火狐浏览器不隐藏滚动条的问题 */
+    scrollbar-width: none;
+
+    .img-list-item {
+      width: 300px;
+      height: 170px;
+      margin: 5px 0;
+    }
+
+    .img-list-item-selected {
+      border: 3px solid #40486a;
+    }
+  }
+}
+
+::v-deep .left-btn .is-disabled {
+  /* 禁用状态下移除 active 背景色 */
+  background-image: none;
+}
+
+.left-btn {
+  /* 设置默认状态的背景图片 */
+  background-image: url("../../assets/image-btn-left-normal.png");
+}
+
+.left-btn:disabled {
+  /* 设置禁用状态的背景图片 */
+  background-image: url("../../assets/image-btn-left-disable.png");
+}
+
+.left-btn:not(.is-disabled):active {
+  /* 设置按下状态的背景图片 */
+  background-image: url("../../assets/image-btn-left-press.png");
+}
+
+.left-btn:not(.is-disabled):hover {
+  /* 设置悬停状态的背景图片 */
+  background-image: url("../../assets/image-btn-left-hover.png");
+}
+
+.right-btn {
+  /* 设置默认状态的背景图片 */
+  background-image: url("../../assets/image-btn-right-normal.png");
+}
+
+.right-btn:disabled {
+  /* 设置禁用状态的背景图片 */
+  background-image: url("../../assets/image-btn-right-disable.png");
+}
+
+.right-btn:not(.is-disabled):active {
+  /* 设置按下状态的背景图片 */
+  background-image: url("../../assets/image-btn-right-press.png");
+}
+
+.right-btn:not(.is-disabled):hover {
+  /* 设置悬停状态的背景图片 */
+  background-image: url("../../assets/image-btn-right-hover.png");
+}
+</style>
diff --git a/src/views/cards/components/ImagePreviewZoomTemperature/index.vue b/src/views/cards/components/ImagePreviewZoomTemperature/index.vue
new file mode 100644
index 0000000..2892400
--- /dev/null
+++ b/src/views/cards/components/ImagePreviewZoomTemperature/index.vue
@@ -0,0 +1,1016 @@
+<template>
+  <div
+    class="flex-row card-page"
+    style="background: #090918"
+    v-loading="loading"
+  >
+    <div style="flex: 1; height: 100%; display: flex; flex-direction: column">
+      <div class="img-wrap">
+        <div
+          class="zoom-container"
+          ref="zoomContainer"
+          @mousemove="handleMouseMove"
+          @mouseleave="handleMouseLeave"
+          @wheel="handleWheel"
+        >
+          <div
+            class="zoom-wrapper"
+            ref="zoomWrapper"
+            :style="{
+              transform: `scale(${imageScale}) translate(${imagePosition.x / imageScale}px, ${imagePosition.y / imageScale}px)`,
+              transformOrigin: '0 0',
+              width: '100%',
+              height: '100%'
+            }"
+            @mousedown="startDrag($event)"
+            @touchstart="startTouchDrag($event)"
+          >
+          <!-- :src="'/shaoxing/videoMonitor/xunshiht/htjcImage/'+selectImgUrl"
+              src="http://192.168.1.116:18891/shaoxing/videoMonitor/app/htjc6/htjcImage//test/39357.jpg"
+
+          -->
+            <img
+              ref="previewImage"
+              :src="'/shaoxing/videoMonitor/xunshiht/htjcImage/'+selectImgUrl"
+              style="width: 100%; height: 100%; object-fit: contain"
+              @load="handleImageLoad"
+              @error="handleImageError"
+              draggable="false"
+            />
+          </div>
+        </div>
+
+        <!-- 重置按钮 -->
+        <div class="zoom-controls">
+          <el-button size="mini" circle @click="resetImage" title="重置">
+            ↺
+          </el-button>
+        </div>
+
+        <!-- 上一个/下一个图片按钮 -->
+        <el-button
+          v-if="bShowBackBtn"
+          @click="() => selectIndex--"
+          class="img-handle-btn img-handle-btn-left left-btn"
+        ></el-button>
+        <el-button
+          v-if="bShowNextBtn"
+          @click="() => selectIndex++"
+          class="img-handle-btn img-handle-btn-right right-btn"
+        ></el-button>
+
+        <!-- 温度悬浮层 -->
+        <div
+          v-if="dataShowTemperatureTool && hoverData"
+          class="temperature-display"
+          :style="{
+            left: hoverData.x + 'px',
+            top: hoverData.y + 'px'
+          }"
+        >
+          {{ hoverData.temperature }}°C
+        </div>
+      </div>
+    </div>
+
+    <div class="img-list-wrap" v-if="dataImageUrls.length > 1">
+      <ul ref="imgUlRef">
+        <li
+          v-for="(item, index) in dataImageUrls"
+          :key="index"
+          @click="onSelectImage(item, index)"
+        >
+          <div
+            :style="imgListItemStyle"
+            :class="{ 'img-list-item-selected': index === selectIndex }"
+          >
+            <img
+              :src="item"
+              style="width: 100%; height: 100%; object-fit: contain"
+              draggable="false"
+            />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getTemperatureValue } from "@/api/device";
+import { downloadCsv } from "@/api/basedata/patrolpointmnt/patrolpointpreset.js";
+import Papa from "papaparse";
+
+const IMG_LIST_ITEM_HEIGHT = 170;
+
+export default {
+  name: "ImagePreviewZoomTemperature",
+  components: {},
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    showTemperatureTool: {
+      type: Boolean,
+      default: false,
+    },
+    imageUrls: {
+      type: Array,
+      default: [],
+      require: false,
+    },
+    selectImgPosition: {
+      type: Number,
+      default: 0,
+    },
+    imageName: {
+      type: [String, Array],
+      default: "",
+    },
+  },
+  data() {
+    return {
+      selectIndex: 0,
+      imgListItemStyle: {
+        width: "300px",
+        height: `${IMG_LIST_ITEM_HEIGHT}px`,
+        margin: "5px 0",
+      },
+      temperatureInfo: {},
+      loading: false,
+      dataShowTemperatureTool: false,
+      dataImageUrls: [],
+      showDebugInfo: true,
+
+      // 缩放相关
+      imageScale: 1,
+      imagePosition: { x: 0, y: 0 },
+      isDragging: false,
+      dragStartPos: { x: 0, y: 0 },
+      dragStartImagePos: { x: 0, y: 0 },
+
+      // 动画相关
+      animationFrameId: null,
+
+      // 温度数据相关
+      temperatureData: [],
+      tempRows: 0,
+      tempCols: 0,
+      hoverData: null,
+      imageSize: { width: 0, height: 0 },
+      currentImageName: "",
+
+      lastMouseX: null,
+      lastMouseY: null,
+
+      // 图片实际内容显示区域（在 zoom-container 坐标系中）
+      imageContentRect: {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      },
+    };
+  },
+  computed: {
+    selectImgUrl() {
+      return this.dataImageUrls.length > this.selectIndex
+        ? this.dataImageUrls[this.selectIndex]
+        : "";
+    },
+    bShowNextBtn() {
+      return this.selectIndex + 1 < this.dataImageUrls.length;
+    },
+    bShowBackBtn() {
+      return this.selectIndex > 0;
+    },
+  },
+  watch: {
+    visible(value) {
+      if (value) {
+        this.reset();
+      }
+    },
+    selectImgPosition() {
+      if (this.selectImgPosition < this.dataImageUrls.length) {
+        this.selectIndex = this.selectImgPosition;
+        this.resetImage();
+        this.loadTemperatureDataForCurrentImage();
+      }
+    },
+    selectIndex() {
+      if (this.$refs.imgUlRef) {
+        this.$refs.imgUlRef.scrollTo({
+          top: IMG_LIST_ITEM_HEIGHT * this.selectIndex,
+          behavior: "smooth",
+        });
+      }
+      this.resetImage();
+      this.hoverData = null;
+
+      if (Array.isArray(this.imageName) && this.imageName.length > this.selectIndex) {
+        this.currentImageName = this.imageName[this.selectIndex];
+      } else if (typeof this.imageName === 'string') {
+        this.currentImageName = this.imageName;
+      }
+
+      this.loadTemperatureDataForCurrentImage();
+    },
+  },
+  created() {
+    this.dataImageUrls = this.imageUrls;
+    this.selectIndex = this.selectImgPosition;
+    this.dataShowTemperatureTool = this.showTemperatureTool;
+
+    if (Array.isArray(this.imageName) && this.imageName.length > this.selectIndex) {
+      this.currentImageName = this.imageName[this.selectIndex];
+    } else if (typeof this.imageName === 'string') {
+      this.currentImageName = this.imageName;
+    } else if (this.imageName) {
+      this.currentImageName = this.imageName;
+    }
+
+    if (!this.dataImageUrls || !this.dataImageUrls.length) {
+      const info = JSON.parse(sessionStorage.getItem("imageInfo"));
+      if (info && info.imageUrls) {
+        this.dataImageUrls = info.imageUrls;
+      }
+      if (info && info.selectImgPosition) {
+        this.selectIndex = info.selectImgPosition;
+      }
+      if (info && info.showTemperatureTool) {
+        this.dataShowTemperatureTool = info.showTemperatureTool;
+      }
+      if (info && info.imageName) {
+        this.currentImageName = info.imageName;
+      }
+    }
+
+    if (!this.currentImageName && this.selectImgUrl) {
+      this.extractImageNameFromUrl(this.selectImgUrl);
+    }
+
+    this.$nextTick(() => {
+      this.loadTemperatureDataForCurrentImage();
+      this.updateImageContentRect();
+    });
+  },
+  mounted() {
+    this.bindGlobalEvents();
+    window.addEventListener('resize', this.updateImageContentRect);
+    this.startAnimationLoop();
+  },
+  beforeDestroy() {
+    this.unbindGlobalEvents();
+    this.stopAnimationLoop();
+    window.removeEventListener('resize', this.updateImageContentRect);
+  },
+  methods: {
+    getDataWidth() {
+      return this.tempCols || 0;
+    },
+
+    getDataHeight() {
+      return this.tempRows || 0;
+    },
+
+    extractImageNameFromUrl(url) {
+      if (!url) return;
+      try {
+        const urlParts = url.split('/');
+        let fileName = urlParts[urlParts.length - 1];
+        if (fileName.includes('?')) {
+          fileName = fileName.split('?')[0];
+        }
+        this.currentImageName = fileName;
+        // console.log("提取的图片名称:", this.currentImageName);
+      } catch (error) {
+        // console.error("提取图片名称失败:", error);
+      }
+    },
+
+    reset() {
+      this.selectIndex = 0;
+      this.resetImage();
+      this.hoverData = null;
+    },
+
+    onSelectImage(item, index) {
+      this.selectIndex = index;
+    },
+
+    // 更新图片实际内容显示区域（在 zoom-container 坐标系中）
+    // 这个方法计算 object-fit: contain 后的图片内容区域
+    updateImageContentRect() {
+      const img = this.$refs.previewImage;
+      const container = this.$refs.zoomContainer;
+      if (!img || !container) return;
+
+      const containerRect = container.getBoundingClientRect();
+      const imgRect = img.getBoundingClientRect();
+
+      // 计算图片内容在 img 元素中的偏移和尺寸
+      // 由于 object-fit: contain，图片内容会居中显示在 img 元素内
+      const naturalWidth = this.imageSize.width || img.naturalWidth;
+      const naturalHeight = this.imageSize.height || img.naturalHeight;
+
+      if (!naturalWidth || !naturalHeight) return;
+
+      const imgDisplayWidth = imgRect.width;
+      const imgDisplayHeight = imgRect.height;
+
+      const imageAspect = naturalWidth / naturalHeight;
+      const containerAspect = imgDisplayWidth / imgDisplayHeight;
+
+      let contentWidth, contentHeight, contentX, contentY;
+
+      if (imageAspect > containerAspect) {
+        contentWidth = imgDisplayWidth;
+        contentHeight = imgDisplayWidth / imageAspect;
+        contentX = 0;
+        contentY = (imgDisplayHeight - contentHeight) / 2;
+      } else {
+        contentHeight = imgDisplayHeight;
+        contentWidth = imgDisplayHeight * imageAspect;
+        contentX = (imgDisplayWidth - contentWidth) / 2;
+        contentY = 0;
+      }
+
+      // 将坐标从视口坐标系转换到 zoom-container 坐标系
+      const containerLeft = containerRect.left;
+      const containerTop = containerRect.top;
+
+      // 图片内容在 zoom-container 坐标系中的位置
+      // imgRect 是变换后的位置，已经是相对于视口的
+      // 我们需要计算内容在容器中的位置
+      const contentLeftInViewport = imgRect.left + contentX;
+      const contentTopInViewport = imgRect.top + contentY;
+
+      this.imageContentRect = {
+        x: contentLeftInViewport - containerLeft,
+        y: contentTopInViewport - containerTop,
+        width: contentWidth,
+        height: contentHeight
+      };
+
+      // console.log('图片内容区域:', this.imageContentRect);
+    },
+
+    startAnimationLoop() {
+      const updateTemperature = () => {
+        if (this.dataShowTemperatureTool && this.lastMouseX && this.lastMouseY) {
+          this.calculateTemperatureAtPosition(this.lastMouseX, this.lastMouseY);
+        }
+        this.animationFrameId = requestAnimationFrame(updateTemperature);
+      };
+      this.animationFrameId = requestAnimationFrame(updateTemperature);
+    },
+
+    stopAnimationLoop() {
+      if (this.animationFrameId) {
+        cancelAnimationFrame(this.animationFrameId);
+        this.animationFrameId = null;
+      }
+    },
+
+    // ==================== 双线性插值 ====================
+    bilinearInterpolation(data, row, col, rows, cols) {
+      if (row < 0 || row > rows - 1 || col < 0 || col > cols - 1) {
+        return null;
+      }
+
+      const row0 = Math.floor(row);
+      const row1 = Math.min(row0 + 1, rows - 1);
+      const col0 = Math.floor(col);
+      const col1 = Math.min(col0 + 1, cols - 1);
+
+      const v00 = parseFloat(data[row0][col0]);
+      const v01 = parseFloat(data[row0][col1]);
+      const v10 = parseFloat(data[row1][col0]);
+      const v11 = parseFloat(data[row1][col1]);
+
+      if ([v00, v01, v10, v11].some(v => isNaN(v) || !isFinite(v))) {
+        const nearestRow = Math.round(row);
+        const nearestCol = Math.round(col);
+        const val = parseFloat(data[nearestRow]?.[nearestCol]);
+        return isNaN(val) ? null : val;
+      }
+
+      const rowWeight = row - row0;
+      const colWeight = col - col0;
+
+      const top = v00 * (1 - colWeight) + v01 * colWeight;
+      const bottom = v10 * (1 - colWeight) + v11 * colWeight;
+      const result = top * (1 - rowWeight) + bottom * rowWeight;
+
+      return result;
+    },
+
+    // 根据图片坐标实时计算温度值
+    getTemperatureAtImagePosition(imageX, imageY) {
+      if (!this.temperatureData || this.temperatureData.length === 0) {
+        return null;
+      }
+
+      const tempRows = this.tempRows;
+      const tempCols = this.tempCols;
+
+      if (tempRows === 0 || tempCols === 0) {
+        return null;
+      }
+
+      // 将图片坐标映射到温度数据坐标
+      const floatRow = (imageY / this.imageSize.height) * (tempRows - 1);
+      const floatCol = (imageX / this.imageSize.width) * (tempCols - 1);
+
+      // 使用双线性插值计算温度
+      const temp = this.bilinearInterpolation(
+        this.temperatureData,
+        floatRow,
+        floatCol,
+        tempRows,
+        tempCols
+      );
+
+      return temp;
+    },
+
+    // 获取鼠标在图片原始坐标系中的位置
+    getMouseOnImage(clientX, clientY) {
+      const containerRect = this.$refs.zoomContainer.getBoundingClientRect();
+
+      // 鼠标相对于容器的位置
+      const relativeX = clientX - containerRect.left;
+      const relativeY = clientY - containerRect.top;
+
+      // 获取图片内容显示区域
+      const contentRect = this.imageContentRect;
+      if (!contentRect || contentRect.width === 0 || contentRect.height === 0) {
+        return null;
+      }
+
+      // 检查鼠标是否在图片内容区域内
+      if (relativeX < contentRect.x || relativeX > contentRect.x + contentRect.width ||
+          relativeY < contentRect.y || relativeY > contentRect.y + contentRect.height) {
+        return null;
+      }
+
+      // 计算在图片内容区域内的相对位置（0-1范围）
+      let imageRelativeX = (relativeX - contentRect.x) / contentRect.width;
+      let imageRelativeY = (relativeY - contentRect.y) / contentRect.height;
+
+      // 限制范围
+      imageRelativeX = Math.max(0, Math.min(1, imageRelativeX));
+      imageRelativeY = Math.max(0, Math.min(1, imageRelativeY));
+
+      // 映射到图片原始坐标
+      return {
+        x: imageRelativeX * this.imageSize.width,
+        y: imageRelativeY * this.imageSize.height,
+        containerX: relativeX,
+        containerY: relativeY
+      };
+    },
+
+    calculateTemperatureAtPosition(clientX, clientY) {
+      if (!this.temperatureData || this.temperatureData.length === 0) {
+        if (this.hoverData) {
+          this.hoverData = null;
+        }
+        return;
+      }
+
+      // 获取鼠标在图片上的位置
+      const mousePos = this.getMouseOnImage(clientX, clientY);
+      if (!mousePos) {
+        if (this.hoverData) {
+          this.hoverData = null;
+        }
+        return;
+      }
+
+      const { x: imageX, y: imageY, containerX, containerY } = mousePos;
+
+      // 实时计算温度值
+      const temperature = this.getTemperatureAtImagePosition(imageX, imageY);
+
+      if (temperature !== null && !isNaN(temperature) && isFinite(temperature)) {
+        const containerRect = this.$refs.zoomContainer.getBoundingClientRect();
+        const offsetX = 10;
+        const offsetY = 10;
+
+        let hoverX = containerX + offsetX;
+        let hoverY = containerY + offsetY;
+
+        const tooltipWidth = 80;
+        const tooltipHeight = 30;
+
+        // 确保tooltip不超出容器边界
+        if (hoverX + tooltipWidth > containerRect.width) {
+          hoverX = containerX - tooltipWidth - offsetX;
+        }
+        if (hoverY + tooltipHeight > containerRect.height) {
+          hoverY = containerY - tooltipHeight - offsetY;
+        }
+        if (hoverX < 0) {
+          hoverX = offsetX;
+        }
+        if (hoverY < 0) {
+          hoverY = offsetY;
+        }
+
+        this.hoverData = {
+          x: hoverX,
+          y: hoverY,
+          temperature: temperature.toFixed(1),
+        };
+      } else if (this.hoverData) {
+        this.hoverData = null;
+      }
+    },
+
+    handleMouseMove(event) {
+      if (!this.dataShowTemperatureTool) return;
+
+      this.lastMouseX = event.clientX;
+      this.lastMouseY = event.clientY;
+      this.calculateTemperatureAtPosition(event.clientX, event.clientY);
+    },
+
+    handleMouseLeave() {
+      this.hoverData = null;
+      this.lastMouseX = null;
+      this.lastMouseY = null;
+    },
+
+    handleWheel(event) {
+      event.preventDefault();
+
+      const container = this.$refs.zoomContainer;
+      const containerRect = container.getBoundingClientRect();
+
+      // 鼠标相对于容器的位置
+      const mouseX = event.clientX - containerRect.left;
+      const mouseY = event.clientY - containerRect.top;
+
+      const delta = event.deltaY;
+      const direction = delta > 0 ? -1 : 1;
+      let newScale = this.imageScale + direction * 0.1;
+      newScale = Math.max(0.1, Math.min(5, newScale));
+
+      const oldScale = this.imageScale;
+      const scaleChange = newScale / oldScale;
+
+      // 以鼠标位置为中心缩放
+      this.imagePosition = {
+        x: this.imagePosition.x - (mouseX - this.imagePosition.x) * (scaleChange - 1),
+        y: this.imagePosition.y - (mouseY - this.imagePosition.y) * (scaleChange - 1)
+      };
+      this.imageScale = newScale;
+
+      // 缩放后更新图片内容区域
+      this.$nextTick(() => {
+        this.updateImageContentRect();
+        if (this.lastMouseX && this.lastMouseY) {
+          this.calculateTemperatureAtPosition(this.lastMouseX, this.lastMouseY);
+        }
+      });
+    },
+
+    startDrag(event) {
+      if (event.button !== 0) return;
+      this.isDragging = true;
+      this.dragStartPos = { x: event.clientX, y: event.clientY };
+      this.dragStartImagePos = { x: this.imagePosition.x, y: this.imagePosition.y };
+
+      const wrapper = this.$refs.zoomWrapper;
+      if (wrapper) wrapper.classList.add('dragging');
+
+      document.body.style.userSelect = 'none';
+      event.preventDefault();
+    },
+
+    startTouchDrag(event) {
+      if (event.touches.length !== 1) return;
+      this.isDragging = true;
+      this.dragStartPos = { x: event.touches[0].clientX, y: event.touches[0].clientY };
+      this.dragStartImagePos = { x: this.imagePosition.x, y: this.imagePosition.y };
+
+      const wrapper = this.$refs.zoomWrapper;
+      if (wrapper) wrapper.classList.add('dragging');
+
+      event.preventDefault();
+    },
+
+    handleDragMove(event) {
+      if (!this.isDragging) return;
+
+      let clientX, clientY;
+      if (event.type === 'mousemove') {
+        clientX = event.clientX;
+        clientY = event.clientY;
+      } else if (event.type === 'touchmove' && event.touches.length === 1) {
+        clientX = event.touches[0].clientX;
+        clientY = event.touches[0].clientY;
+      } else {
+        return;
+      }
+
+      const deltaX = clientX - this.dragStartPos.x;
+      const deltaY = clientY - this.dragStartPos.y;
+
+      // 拖拽时修改 imagePosition
+      this.imagePosition = {
+        x: this.dragStartImagePos.x + deltaX,
+        y: this.dragStartImagePos.y + deltaY
+      };
+
+      // 拖拽后更新图片内容区域
+      this.$nextTick(() => {
+        this.updateImageContentRect();
+        if (this.lastMouseX && this.lastMouseY) {
+          this.calculateTemperatureAtPosition(this.lastMouseX, this.lastMouseY);
+        }
+      });
+
+      event.preventDefault();
+    },
+
+    handleDragEnd() {
+      if (!this.isDragging) return;
+
+      const wrapper = this.$refs.zoomWrapper;
+      if (wrapper) wrapper.classList.remove('dragging');
+
+      document.body.style.userSelect = '';
+      this.isDragging = false;
+    },
+
+    resetImage() {
+      this.imageScale = 1;
+      this.imagePosition = { x: 0, y: 0 };
+      this.$nextTick(() => {
+        this.updateImageContentRect();
+      });
+    },
+
+    bindGlobalEvents() {
+      document.addEventListener('mousemove', this.handleDragMove);
+      document.addEventListener('mouseup', this.handleDragEnd);
+      document.addEventListener('touchmove', this.handleDragMove, { passive: false });
+      document.addEventListener('touchend', this.handleDragEnd);
+    },
+
+    unbindGlobalEvents() {
+      document.removeEventListener('mousemove', this.handleDragMove);
+      document.removeEventListener('mouseup', this.handleDragEnd);
+      document.removeEventListener('touchmove', this.handleDragMove);
+      document.removeEventListener('touchend', this.handleDragEnd);
+    },
+
+    handleImageLoad(e) {
+      const img = e.target;
+      if (img) {
+        this.imageSize = {
+          width: img.naturalWidth,
+          height: img.naturalHeight,
+        };
+        // console.log("图片加载完成，尺寸:", img.naturalWidth, "x", img.naturalHeight);
+
+        this.$nextTick(() => {
+          this.updateImageContentRect();
+        });
+
+        if (!this.currentImageName && this.selectImgUrl) {
+          this.extractImageNameFromUrl(this.selectImgUrl);
+          this.loadTemperatureDataForCurrentImage();
+        }
+      }
+    },
+
+    handleImageError(e) {
+      // console.error("图片加载失败:", this.selectImgUrl);
+    },
+
+    async loadTemperatureDataForCurrentImage() {
+      if (!this.dataShowTemperatureTool) {
+        // console.log("测温工具未启用");
+        return;
+      }
+
+      let imageName = this.currentImageName;
+      if (!imageName && this.selectImgUrl) {
+        this.extractImageNameFromUrl(this.selectImgUrl);
+        imageName = this.currentImageName;
+      }
+
+      if (!imageName) {
+        // console.warn("无法获取图片名称");
+        return;
+      }
+
+      try {
+        const data = { filePath: this.selectImgUrl};
+        const response = await downloadCsv(data);
+
+        const blob = response instanceof Blob ? response : new Blob([response]);
+        const reader = new FileReader();
+
+        reader.onload = (e) => {
+          try {
+            const csvText = e.target.result;
+            this.parseCSVInChunks(csvText);
+          } catch (error) {
+            // console.error("处理CSV数据出错:", error);
+          }
+        };
+
+        reader.readAsText(blob, "UTF-8");
+      } catch (error) {
+        // console.error("下载温度数据失败:", error);
+      }
+    },
+
+    parseCSVInChunks(csvText) {
+      try {
+        const lines = csvText.split('\n');
+        const tempData = [];
+        let maxCols = 0;
+
+        const BATCH_SIZE = 1000;
+        let index = 0;
+
+        const processBatch = () => {
+          const endIndex = Math.min(index + BATCH_SIZE, lines.length);
+
+          for (let i = index; i < endIndex; i++) {
+            const line = lines[i].trim();
+            if (!line) continue;
+
+            const values = line.split(',').map(v => {
+              const num = parseFloat(v.trim());
+              return isNaN(num) ? null : num;
+            });
+
+            const validValues = values.filter(v => v !== null && isFinite(v));
+
+            if (validValues.length > 0) {
+              tempData.push(validValues);
+              if (validValues.length > maxCols) {
+                maxCols = validValues.length;
+              }
+            }
+          }
+
+          index = endIndex;
+
+          if (index < lines.length) {
+            setTimeout(processBatch, 0);
+          } else {
+            this.finalizeCSVData(tempData, maxCols);
+          }
+        };
+
+        processBatch();
+
+      } catch (error) {
+        // console.error('解析CSV出错:', error);
+        // this.$message.error('解析CSV出错: ' + error.message);
+      }
+    },
+
+    finalizeCSVData(tempData, maxCols) {
+      try {
+        if (tempData.length === 0) {
+          this.$message.warning('CSV温度数据为空');
+          return;
+        }
+
+        const normalizedData = [];
+        for (let i = 0; i < tempData.length; i++) {
+          const row = tempData[i];
+          if (row.length < maxCols) {
+            const lastVal = row[row.length - 1] || 0;
+            while (row.length < maxCols) {
+              row.push(lastVal);
+            }
+          }
+          normalizedData.push(row);
+        }
+
+        this.temperatureData = normalizedData;
+        this.tempRows = normalizedData.length;
+        this.tempCols = normalizedData[0]?.length || 0;
+
+        let minTemp = Infinity;
+        let maxTemp = -Infinity;
+
+        for (let i = 0; i < normalizedData.length; i++) {
+          const row = normalizedData[i];
+          if (Array.isArray(row)) {
+            for (let j = 0; j < row.length; j++) {
+              const val = row[j];
+              if (typeof val === 'number' && !isNaN(val) && isFinite(val)) {
+                if (val < minTemp) minTemp = val;
+                if (val > maxTemp) maxTemp = val;
+              }
+            }
+          }
+        }
+
+
+        if (this.showDebugInfo) {
+          // this.$message.success(`温度数据已加载，范围: ${minTemp}~${maxTemp}°C`);
+        }
+
+      } catch (error) {
+        // this.$message.error('处理CSV数据出错: ' + error.message);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.flex-row {
+  display: flex;
+  height: 100%;
+}
+
+.img-wrap {
+  flex: 1;
+  height: 0;
+  position: relative;
+
+  .zoom-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  .zoom-wrapper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    cursor: grab;
+    will-change: transform;
+
+    &.dragging {
+      cursor: grabbing;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      user-select: none;
+      -webkit-user-drag: none;
+      pointer-events: none;
+    }
+  }
+
+  .zoom-controls {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 10;
+
+    .el-button {
+      background: rgba(0, 0, 0, 0.6);
+      color: white;
+      border: none;
+      font-size: 16px;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.8);
+      }
+    }
+  }
+
+  .temperature-display {
+    position: absolute;
+    padding: 4px 8px;
+    border-radius: 4px;
+    color: white;
+    font-weight: bold;
+    font-size: 12px;
+    pointer-events: none;
+    z-index: 10;
+    background-color: rgba(0, 0, 0, 0.85);
+    white-space: nowrap;
+    font-family: monospace;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .img-handle-btn {
+    position: absolute;
+    top: 45%;
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 25px;
+    width: 96px;
+    height: 96px;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    z-index: 11;
+  }
+
+  .img-handle-btn-left {
+    left: 15px;
+  }
+
+  .img-handle-btn-right {
+    right: 15px;
+  }
+}
+
+.measure-temperature-btn {
+  padding: 10px 0;
+  display: flex;
+}
+
+.img-list-wrap {
+  width: 300px;
+  height: 100%;
+  padding: 0 0 0 10px;
+
+  ul {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin: 0;
+    scrollbar-width: none;
+
+    li {
+      list-style: none;
+
+      div {
+        width: 300px;
+        height: 170px;
+        margin: 5px 0;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+    }
+
+    .img-list-item-selected {
+      border: 3px solid #40486a;
+    }
+  }
+}
+
+::v-deep .left-btn .is-disabled {
+  background-image: none;
+}
+
+.left-btn {
+  background-image: url("../../assets/image-btn-left-normal.png");
+}
+
+.left-btn:disabled {
+  background-image: url("../../assets/image-btn-left-disable.png");
+}
+
+.left-btn:not(.is-disabled):active {
+  background-image: url("../../assets/image-btn-left-press.png");
+}
+
+.left-btn:not(.is-disabled):hover {
+  background-image: url("../../assets/image-btn-left-hover.png");
+}
+
+.right-btn {
+  background-image: url("../../assets/image-btn-right-normal.png");
+}
+
+.right-btn:disabled {
+  background-image: url("../../assets/image-btn-right-disable.png");
+}
+
+.right-btn:not(.is-disabled):active {
+  background-image: url("../../assets/image-btn-right-press.png");
+}
+
+.right-btn:not(.is-disabled):hover {
+  background-image: url("../../assets/image-btn-right-hover.png");
+}
+.card-dialog .el-dialog__body{
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/cards/components/cardBox.vue b/src/views/cards/components/cardBox.vue
new file mode 100644
index 0000000..b49f1dc
--- /dev/null
+++ b/src/views/cards/components/cardBox.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="card-box-bg" :style="cardBoxStyle">
+    <div v-if="showTitle" class="card-box-title-box" :style="titleStyle">
+      <div class="card-box-title">
+        <div
+          v-if="showBackBtn"
+          style="display: inline-block; cursor: pointer"
+          @click="handleBack"
+        >
+          <i class="el-icon-back"></i>
+        </div>
+        {{ title }}
+      </div>
+
+      <div class="title-btns-slot">
+        <slot name="title-btns"></slot>
+      </div>
+    </div>
+
+    <div class="content" :class="{ 'content-border': !bgImgURL }">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CardBox",
+  props: {
+    // 背景图
+    bgImgURL: {
+      type: String,
+      default: "",
+    },
+    // 标题
+    title: {
+      type: String,
+      default: "",
+    },
+    // 不设置bgImgURL时使用
+    titleImgURL: {
+      type: String,
+      default: "",
+    },
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
+    showBackBtn: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {};
+  },
+
+  computed: {
+    cardBoxStyle() {
+      if (this.bgImgURL) {
+        return {
+          backgroundImage: "url(" + this.bgImgURL + ")",
+          backgroundSize: "cover",
+        };
+      } else {
+        return {};
+      }
+    },
+    titleStyle() {
+      if (this.titleImgURL) {
+        return {
+          backgroundImage: "url(" + this.titleImgURL + ")",
+          backgroundSize: "cover",
+        };
+      } else {
+        return {};
+      }
+    },
+  },
+
+  created() {},
+
+  beforeDestroy() {},
+
+  methods: {
+    handleBack() {
+      this.$emit("onBack");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.card-box-bg {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-box-title-box {
+  display: flex;
+  flex-direction: row;
+}
+
+.card-box-title {
+  color: #fff;
+  font-size: 22px;
+  font-weight: bold;
+  height: 40px;
+  line-height: 40px;
+  margin-left: 60px;
+  flex: 2;
+  z-index: 1;
+}
+
+.title-btns-slot {
+  flex: 1;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding-bottom: 2px;
+  padding-right: 5px;
+}
+
+.content-border {
+  /* 分割线 */
+  border: 1px solid #40486a;
+}
+
+.content {
+  flex: 1;
+  height: 0;
+  padding: 15px;
+}
+</style>
diff --git a/src/views/cards/components/model-dialog.vue b/src/views/cards/components/model-dialog.vue
new file mode 100644
index 0000000..e3c82c9
--- /dev/null
+++ b/src/views/cards/components/model-dialog.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="model-dialog-container" ref="modelDialogContainer">
+    <div class="model-dialog-title" @mousedown="startDrag">
+      模型信息查询
+      <i class="el-icon-close cloesIcon" @click="showModelDialog"></i>
+    </div>
+    <div class="model-dialog-content">
+      <div class="modelDialogContent" ref="modelDialogContent">
+        <!-- <div class="item" v-for="item in 100">11111111</div> -->
+        <!-- <div class="modelSend">
+          撒打算来到喀山水水水水水水水水水水水水水水水水水水水
+        </div>
+        <div class="modelReceive">
+          撒打算来到喀山水水水水水水水水水水水水水水水水水水水
+        </div> -->
+      </div>
+      <div class="input-box">
+        <el-input
+          class="input-box-input"
+          placeholder="请输入需要查询的内容"
+          v-model="modelName"
+          @keyup.enter="sendBtn"
+        ></el-input>
+        <el-button @click="sendBtn">发送</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { semanticsModel } from "@/api/modelDialog/modelDialog.js";
+import { set } from "nprogress";
+export default {
+  data() {
+    return {
+      modelName: "",
+      isDragging: false,
+      offset: { x: 0, y: 0 },
+    };
+  },
+  methods: {
+    sendBtn(event) {
+      if (event && !event.isTrusted) return;
+      if (!this.modelName.trim()) return;
+      // 创建新元素
+      let newDiv = document.createElement("div");
+      newDiv.className = "modelSend";
+      newDiv.textContent = this.modelName;
+      // 添加到 .modelDialogContent 容器中
+      let container = this.$refs.modelDialogContent;
+      container.appendChild(newDiv);
+      let inputStr = this.modelName;
+      this.modelName = "";
+      // 滚动到底部
+      container.scrollTop = container.scrollHeight;
+
+      // ajax.....
+      semanticsModel({ text: inputStr }).then((res) => {
+        console.log(res, "模型返回");
+        if (res.code == 200) {
+          let str = res.data;
+          console.log(str, "模型数据处理");
+          let receiveDiv = document.createElement("div");
+          receiveDiv.classList.add("modelReceive", "modelReceiveTyping");
+          receiveDiv.textContent = str;
+          // 添加到 .content 容器中
+          // this.$refs.modelDialogContent.appendChild(receiveDiv);
+          container.appendChild(receiveDiv);
+          container.scrollTop = container.scrollHeight;
+          // this.typeWriterWithAutoScroll(str, receiveDiv, 50);
+        }
+      });
+    },
+    // typeWriterWithAutoScroll(text, element, speed) {
+    //   let i = 0;
+    //   // 清空容器
+    //   element.html("");
+    //   function typing() {
+    //     if (i < text.length) {
+    //       // 添加新字符
+    //       element.append(text.charAt(i));
+    //       // 自动滚动到底部
+    //       $(".modelDialogContent").scrollTop(element[0].scrollHeight);
+    //       i++;
+    //       setTimeout(typing, speed);
+    //     } else {
+    //       // 完成时移除光标
+    //       element.find(".typewriter-cursor").remove();
+    //       element.classList.remove("modelReceiveTyping");
+    //     }
+    //   }
+    //   // 开始打字效果
+    //   typing();
+    // },
+    showModelDialog() {
+      console.log(111);
+      this.$emit("showModelDialog", false);
+    },
+    // 开始拖拽
+    startDrag(e) {
+      if (e.target !== e.currentTarget) return; // 防止点击子元素触发拖拽
+      this.isDragging = true;
+      const dialog = this.$refs.modelDialogContainer;
+      const rect = dialog.getBoundingClientRect();
+      this.offset = {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top,
+      };
+      document.addEventListener("mousemove", this.onDrag);
+      document.addEventListener("mouseup", this.endDrag);
+    },
+
+    // 拖拽中
+    onDrag(e) {
+      if (!this.isDragging) return;
+      const dialog = this.$refs.modelDialogContainer;
+      const x = e.clientX - this.offset.x;
+      const y = e.clientY - this.offset.y;
+      dialog.style.left = `${x}px`;
+      dialog.style.top = `${y}px`;
+    },
+
+    // 结束拖拽
+    endDrag() {
+      this.isDragging = false;
+      document.removeEventListener("mousemove", this.onDrag);
+      document.removeEventListener("mouseup", this.endDrag);
+    },
+
+    showModelDialog() {
+      this.$emit("showModelDialog", false);
+    },
+  },
+};
+</script>
+
+<style>
+.model-dialog-container {
+  width: 500px;
+  height: 600px;
+  background-color: #0a0919;
+  position: fixed;
+  top: 120px;
+  /* right: 20px; */
+  left: calc(100% - 520px); /* 替代 right */
+  z-index: 999999;
+  border-radius: 5px;
+  /* border: 1px solid #006686; */
+}
+.model-dialog-title {
+  height: 46px;
+  line-height: 37px;
+  /* padding: 5px; */
+  padding-left: 40px;
+  background-image: url("../assets/right-title.png");
+  background-size: 100% 46px;
+  position: relative;
+  cursor: move;
+}
+.model-dialog-content {
+  padding: 10px;
+  width: 100%;
+  height: calc(100% - 46px);
+}
+.modelDialogContent {
+  width: 100%;
+  height: 90%;
+  border: 1px solid #006686;
+  border-radius: 5px;
+  overflow-y: scroll;
+  padding: 5px;
+  /* background: red; */
+}
+.modelDialogContent div {
+  margin-bottom: 5px;
+}
+.input-box {
+  margin-top: 10px;
+  width: 100%;
+  /* height: 10%; */
+  /* border: 1px solid #006686; */
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.input-box-input {
+  width: 85%;
+}
+.modelSend {
+  width: 80%;
+  line-height: 24px;
+  background: #172533;
+  /* color: black; */
+  border-radius: 5px;
+  margin-left: 20%;
+  padding: 5px;
+  padding-right: 0px;
+}
+.modelReceive {
+  width: 80%;
+  line-height: 24px;
+  background: #1e4451;
+  border-radius: 5px;
+  padding: 5px;
+}
+.queryHint {
+  width: 80%;
+  line-height: 24px;
+  background: #1e4451;
+  border-radius: 5px;
+  padding: 5px;
+}
+.cloesIcon {
+  position: absolute;
+  right: 10px;
+  font-size: 30px;
+  top: 5px;
+  cursor: pointer;
+  z-index: 9999999;
+}
+</style>
diff --git a/src/views/cards/error_statistics/patrolAbnormalStatistics.vue b/src/views/cards/error_statistics/patrolAbnormalStatistics.vue
new file mode 100644
index 0000000..4067048
--- /dev/null
+++ b/src/views/cards/error_statistics/patrolAbnormalStatistics.vue
@@ -0,0 +1,300 @@
+<template>
+  <div class="card-page page-content">
+    <!-- <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      label-width="90px"
+    >
+      <el-form-item label="设备名称" prop="deviceName">
+        <el-input
+          v-model="queryParams.deviceName"
+          placeholder="设备名称"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="告警时间">
+        <el-date-picker
+          v-model="dateRange"
+          size="small"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          :unlink-panels="true"
+          :picker-options="dateRangePickerOptions"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :clearable="true"
+          popper-class="card-date-editor"
+        ></el-date-picker>
+      </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> -->
+    <div class="table-card" ref="tableCardRef">
+      <el-table
+        style="height: 100%"
+        class="card-table"
+        v-loading="loading"
+        :data="dataList"
+        :max-height="tableHeight"
+        border
+        stripe
+      >
+        <el-table-column label="序号" align="center" width="55" type="index" />
+        <el-table-column label="区域" align="center" prop="areaName" />
+        <el-table-column label="设备名称" align="center" prop="deviceName" />
+        <el-table-column label="相机名" align="center" prop="channelName" />
+        <el-table-column label="系统" align="center" prop="deviceSource" />
+        <!-- <el-table-column label="部件名称" align="center" prop="componentName" /> -->
+        <el-table-column label="点位名称" align="center" prop="pointName" />
+        <!--        <el-table-column label="间隔名称" align="center" prop="bayName" />-->
+        <!--        <el-table-column label="实物ID" align="center" prop="materialId" />-->
+        <el-table-column label="缺陷类型" align="center" prop="algName">
+        </el-table-column>
+        <!-- <el-table-column label="告警等级" align="center" prop="warnlevel" /> -->
+        <!-- 初筛异常 filter==1 -->
+        <el-table-column label="初筛基准图" align="center" v-if="filter == 1">
+          <template slot-scope="scope">
+            <AsyncImage
+              v-if="scope.row.imageNormalUrlPath"
+              class="table-img"
+              :src="scope.row.imageNormalUrlPath"
+              :supportPreview="false"
+              @click="onImagePreviewClicked(scope.row.imageNormalUrlPath)"
+            ></AsyncImage>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <!-- 初筛异常 filter==1 -->
+        <el-table-column label="初筛分析图" align="center"  v-if="filter == 1">
+          <template slot-scope="scope">
+            <AsyncImage
+              v-if="scope.row.imgAnalyse"
+              class="table-img"
+              :src="scope.row.imgAnalyse"
+              :supportPreview="false"
+              @click="onImagePreviewClicked(scope.row.imgAnalyse)"
+            ></AsyncImage>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+         <!-- AI异常 filter==0 -->
+        <el-table-column label="初筛图片" align="center" v-if="filter == 0">
+          <template slot-scope="scope">
+            <AsyncImage
+              v-if="scope.row.img"
+              class="table-img"
+              :src="scope.row.img"
+              :supportPreview="false"
+              @click="onImagePreviewClicked(scope.row.img)"
+            ></AsyncImage>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="视觉模型图片" align="center"  v-if="filter == 0">
+          <template slot-scope="scope">
+            <AsyncImage
+              v-if="scope.row.imgAnalyse"
+              class="table-img"
+              :src="scope.row.imgAnalyse"
+              :supportPreview="false"
+              @click="onImagePreviewClicked(scope.row.imgAnalyse)"
+            ></AsyncImage>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="时间" align="center" prop="patrolTime" />
+        <el-table-column label="描述" align="center" prop="desc" />
+      </el-table>
+
+      <CardPagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+    <el-dialog
+      title="图片预览"
+      :visible.sync="showPreviewImages"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      custom-class="card-dialog card-page"
+      width="70%"
+      append-to-body
+    >
+      <ImagePreview
+        v-if="showPreviewImages"
+        :imageUrls="showImgesUrls"
+        :selectImgPosition="previewImagePos"
+        :showTemperatureTool="false"
+      />
+    </el-dialog>
+  </div>
+</template>
+<script>
+import CardPagination from "../components/CardPagination/index.vue";
+import { getAbnormalPatrolList } from "@/api/home";
+import { getAllAlgorithmList } from "@/api/inspectionDataManage/alarmConfirm.js";
+import debounce from "lodash.debounce";
+import ImagePreview from "@/views/cards/components/ImagePreview/index.vue";
+// 巡视归档对比对话框
+export default {
+  name: "PatrolAbnormalStatistics",
+  components: { CardPagination, ImagePreview },
+  props: {
+    info: {
+      type: Object,
+      default: null,
+    },
+  },
+  dicts: [
+    "patrol_result_value_type",
+    "patrol_result_recognition_type",
+    "patrol_result_valid_type",
+  ],
+  data() {
+    return {
+      taskInfo: null,
+      // table 高度
+      tableHeight: null,
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 数据
+      dataList: [],
+      algorithmList: [],
+      //时间范围
+      dateRange: [],
+      dateRangePickerOptions: {
+        disabledDate(selectDate) {
+          return new Date().getTime() < selectDate.getTime();
+        },
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        deviceName: null,
+      },
+      showPreviewImages: false,
+      filter: "", //判断是初筛还是ai类型
+    };
+  },
+  computed: {},
+  created() {
+    if (!this.info) {
+      this.taskInfo = JSON.parse(sessionStorage.getItem("selectInfo"));
+      this.filter = this.taskInfo.defectType;
+    } else {
+      this.taskInfo = this.info;
+      this.filter = this.taskInfo.defectType;
+    }
+    // this.getAlgorithmList();
+    // 防抖
+    this.setTableHeight = debounce(this.setTableHeight, 300);
+    window.addEventListener("resize", this.setTableHeight);
+    this.getList();
+  },
+  mounted() {
+    this.setTableHeight();
+  },
+  destroyed() {
+    this.setTableHeight.cancel();
+    window.removeEventListener("resize", this.setTableHeight);
+  },
+  methods: {
+    getAlgorithmList() {
+      getAllAlgorithmList().then((res) => {
+        this.algorithmList = res.rows;
+      });
+    },
+    setTableHeight() {
+      this.tableHeight = this.$refs.tableCardRef.clientHeight - 40;
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    getList() {
+      this.loading = true;
+      const params = { ...this.queryParams };
+      params.filter = this.taskInfo.defectType;
+      params.taskPatrolledId = this.taskInfo.taskPatrolledId;
+      params.posType = this.taskInfo.posType;
+      // 拍摄时间筛选范围
+      if (this.dateRange && this.dateRange.length === 2) {
+        params.beginTime = this.dateRange[0];
+        params.endTime = this.dateRange[1];
+      }
+      getAbnormalPatrolList(params).then((response) => {
+        this.dataList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 获取缺陷类型字符串
+    getDefectTypeListStr(options, value) {
+      if (!value) return "";
+      const valueList = value.split(",");
+      const infoList = [];
+      for (let index = 0; index < valueList.length; index++) {
+        const element = valueList[index];
+        const tmp = options.find((item) => item.algSubtypeCode == element);
+        if (tmp) {
+          infoList.push(tmp.algSubtypeName);
+        }
+      }
+      return infoList.join("，");
+    },
+    // 图片预览
+    onImagePreviewClicked(imgUrl) {
+      if (!imgUrl) {
+        return;
+      }
+      this.previewImagePos = 0;
+      this.showImgesUrls = [imgUrl];
+      this.showPreviewImages = true;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-card {
+  flex: 1;
+  height: 0;
+
+  ::v-deep .el-card__body {
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/views/cards/taskSummary/inspectionTask.vue b/src/views/cards/taskSummary/inspectionTask.vue
new file mode 100644
index 0000000..111f46e
--- /dev/null
+++ b/src/views/cards/taskSummary/inspectionTask.vue
@@ -0,0 +1,1279 @@
+<template>
+  <CardBox
+    class="card-page"
+    :showTitle="false"
+  >
+    <div class="page-container">
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        :inline="true"
+        label-width="90px"
+      >
+        <el-form-item label="任务名称" prop="taskName">
+          <el-input
+            v-model="queryParams.taskName"
+            placeholder="请输入任务名称"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="区域名称" prop="areaTaskName">
+          <el-select
+            v-model="queryParams.areaTaskName"
+            filterable
+            clearable
+            placeholder="请选择区域"
+            @change="handleQuery"
+          >
+            <el-option
+              v-for="(item, index) in areaList"
+              :key="index"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="巡视时间">
+          <el-date-picker
+            v-model="dateRange"
+            size="small"
+            style="width: 240px"
+            value-format="yyyy-MM-dd"
+            type="daterange"
+            :picker-options="dateRangePickerOptions"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :clearable="true"
+            popper-class="card-date-editor"
+            :pickerOptions="pickerOptions"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            class="task-toolbar-btn"
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button
+            class="task-toolbar-btn"
+            icon="el-icon-refresh"
+            type="primary"
+            size="mini"
+            @click="resetQuery"
+            >重置</el-button
+          >
+          <el-button
+            class="task-toolbar-btn"
+            type="primary"
+            icon="el-icon-arrow-left"
+            size="mini"
+            @click="lastDayClicked"
+            >上一天</el-button
+          >
+          <el-button
+            class="task-toolbar-btn"
+            type="primary"
+            size="mini"
+            @click="nextDayClicked"
+            >下一天
+            <i class="el-icon-arrow-right"></i>
+          </el-button>
+          <!-- 添加批量归档按钮 -->
+          <el-button
+            class="task-toolbar-btn task-toolbar-btn-archive"
+            type="primary"
+            icon="el-icon-folder-add"
+            size="mini"
+            :disabled="selectedRows.length === 0"
+            @click="batchArchive"
+            style="margin-left: 10px"
+            >合并归档</el-button
+          >
+        </el-form-item>
+      </el-form>
+      <!-- 大模型ai -->
+      <div
+        class="model-dialog-img"
+        @click="modelShow"
+        v-if="modelDialogIcon"
+      ></div>
+      <div class="table-card" ref="tableCardRef">
+        <el-table
+          ref="multipleTable"
+          class="card-table"
+          v-loading="loading"
+          :data="dataList"
+          :height="tableHeight"
+          border
+          stripe
+          @selection-change="handleSelectionChange"
+        >
+          <!-- 添加复选框列 -->
+          <el-table-column
+            type="selection"
+            width="55"
+            align="center"
+            :selectable="selectable"
+          />
+          <el-table-column
+            label="序号"
+            type="index"
+            width="60"
+            align="center"
+          />
+          <el-table-column
+            label="任务名称"
+            align="left"
+            header-align="center"
+            prop="taskName"
+            min-width="180"
+          />
+          <el-table-column
+            label="执行时间"
+            align="center"
+            prop="startTime"
+            min-width="130"
+          />
+          <el-table-column
+            label="结束时间"
+            align="center"
+            prop="endTime"
+            min-width="130"
+          />
+          <el-table-column
+            prop="taskState"
+            label="任务状态"
+            min-width="100"
+            align="center"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <TaskStatus :type="getStatusText(scope.row.taskState).type"
+                >{{ getStatusText(scope.row.taskState).text }}
+              </TaskStatus>
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            prop="taskProgress"
+            label="采集完成度"
+            align="center"
+            show-overflow-tooltip
+            min-width="130"
+          >
+            <template slot-scope="scope">
+              <CardProgressBar :progress="parseFloat(scope.row.taskProgress)" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="taskEstimatedTime"
+            label="分析完成度"
+            align="center"
+            show-overflow-tooltip
+            min-width="130"
+          >
+            <template slot-scope="scope">
+              <CardProgressBar
+                :progress="parseFloat(scope.row.taskEstimatedTime)"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="详情" align="center" min-width="80">
+            <template slot-scope="scope">
+              <span class="table-action-link" @click="lookDetail(scope.row)">
+                <img
+                  src="../assets/taskDetail.png"
+                  style="width: 22px; height: 22px"
+                />
+              </span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="缺陷" align="center" min-width="80">
+            <template slot-scope="scope">
+              <template v-if="scope.row.taskProgress == 100">
+                <span
+                  v-if="scope.row.qxNum > 0"
+                  class="sb-btn table-action-link"
+                  @click="lookAiBug(scope.row)"
+                  >{{ scope.row.qxNum }}</span
+                >
+                <span v-else>0</span>
+              </template>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="巡检报告" align="center" min-width="100">
+            <template slot-scope="scope">
+              <span
+                v-if="scope.row.fileStatus == 1 && scope.row.lineId"
+                @click="lookBasicReport(scope.row)"
+              >
+                <img
+                  style="width: 22px; height: 22px"
+                  src="../assets/icon-document.png"
+                />
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" min-width="140">
+            <template slot-scope="scope">
+              <el-button
+                class="task-row-btn"
+                v-if="
+                  scope.row.fileStatus == 0 &&
+                  scope.row.taskState == 1 &&
+                  scope.row.algName !== 'correction'
+                "
+                size="mini"
+                type="primary"
+                @click="archiveInfo(scope.row)"
+                >归档
+              </el-button>
+              <el-button
+                class="task-row-btn"
+                v-if="scope.row.taskState == '2'"
+                type="primary"
+                size="mini"
+                @click="gotoTask('2', scope.row.lineId, scope.row)"
+                >暂停</el-button
+              >
+              <el-button
+                class="task-row-btn"
+                type="primary"
+                v-if="scope.row.taskState == '3'"
+                size="mini"
+                @click="gotoTask('3', scope.row.lineId, scope.row)"
+                >继续</el-button
+              >
+              <el-button
+                class="task-row-btn"
+                type="primary"
+                v-if="['2', '3', 2, 3].includes(scope.row.taskState)"
+                size="mini"
+                @click="gotoTask('4', scope.row.lineId, scope.row)"
+                >终止</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <CardPagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+    <el-dialog
+      title="巡视任务详情"
+      :visible.sync="showDetail"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      width="90%"
+      append-to-body
+      custom-class="card-dialog card-page card-dialog-height-auto task-detail-dialog"
+    >
+      <div class="task-detail-dialog-wrap">
+        <NewInspectionTaskDetail v-if="showDetail" :info="selectInfo" />
+      </div>
+    </el-dialog>
+    <el-dialog
+      title="缺陷详情"
+      :visible.sync="showDefectDetail"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      width="90%"
+      append-to-body
+      custom-class="card-dialog card-page card-dialog-height-auto defect-detail-dialog"
+    >
+      <div class="defect-detail-dialog-wrap">
+        <InspectionTaskDefectDetail
+          v-if="showDefectDetail"
+          :info="selectInfo"
+        />
+      </div>
+    </el-dialog>
+    <el-dialog
+      :title="defectType == 1 ? '初筛异常' : 'AI异常'"
+      :visible.sync="showAbnormal"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      width="90%"
+      append-to-body
+      custom-class="card-dialog card-page"
+    >
+      <PatrolAbnormalStatistics v-if="showAbnormal" :info="selectInfo" />
+    </el-dialog>
+    <!-- 单个归档 -->
+    <el-dialog
+      title="归档"
+      id="dialoga"
+      :visible.sync="showContrastEdit"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      append-to-body
+      custom-class="card-dialog card-page card-dialog-height-auto archive-dialog"
+      :lock-scroll="false"
+    >
+      <el-form
+        ref="contrastForm"
+        :model="contrastForm"
+        :rules="contrastRules"
+        label-width="100px"
+        label-position="top"
+      >
+        <el-form-item label="审核人" prop="checkPerson">
+          <el-select
+            v-model="contrastForm.checkPerson"
+            filterable
+            clearable
+            placeholder="请输入审核人"
+          >
+            <el-option
+              v-for="(item, index) in userList"
+              :key="index"
+              :label="item.nickName"
+              :value="item.nickName"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="巡视结论" prop="taskResult">
+          <el-input
+            style="resize: none"
+            type="textarea"
+            :rows="3"
+            v-model="contrastForm.taskResult"
+            placeholder="请输入巡视结论"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          class="card-dialog-cancel-btn"
+          @click="() => (showContrastEdit = false)"
+          >取 消</el-button
+        >
+        <el-button
+          type="primary"
+          class="card-dialog-sure-btn"
+          :loading="isArchiving"
+          :disable="isLock"
+          @click="handleArchiveClicked"
+          >确 定</el-button
+        >
+      </div>
+    </el-dialog>
+    <!-- 批量归档 -->
+    <el-dialog
+      title="批量归档"
+      id="dialogBatch"
+      :visible.sync="showBatchArchiveDialog"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      append-to-body
+      custom-class="card-dialog card-page card-dialog-height-auto archive-dialog"
+      :lock-scroll="false"
+    >
+      <el-form
+        ref="batchArchiveForm"
+        :model="batchArchiveForm"
+        :rules="batchArchiveRules"
+        label-width="100px"
+        label-position="top"
+      >
+        <el-form-item label="审核人" prop="checkPerson">
+          <el-select
+            v-model="batchArchiveForm.checkPerson"
+            filterable
+            clearable
+            placeholder="请输入审核人"
+          >
+            <el-option
+              v-for="(item, index) in userList"
+              :key="index"
+              :label="item.nickName"
+              :value="item.nickName"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="巡视结论" prop="taskResult">
+          <el-input
+            style="resize: none"
+            type="textarea"
+            :rows="3"
+            v-model="batchArchiveForm.taskResult"
+            placeholder="请输入巡视结论"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          class="card-dialog-cancel-btn"
+          @click="() => (showBatchArchiveDialog = false)"
+          >取 消</el-button
+        >
+        <el-button
+          type="primary"
+          class="card-dialog-sure-btn"
+          :loading="isBatchArchiving"
+          :disable="isBatchLock"
+          @click="handleBatchArchiveClicked"
+          >确 定</el-button
+        >
+      </div>
+    </el-dialog>
+    <modelDialog
+      v-if="modelDialogVisible"
+      @showModelDialog="showModelDialog"
+      ref="dialogContainer"
+    />
+  </CardBox>
+</template>
+<script>
+// 巡检任务
+import CardPagination from "../components/CardPagination/index.vue";
+import CardBox from "../components/cardBox.vue";
+import TaskStatus from "../task_statistics/task_status.vue";
+import CardProgressBar from "../components/CardProgressBar.vue";
+import NewInspectionTaskDetail from "./newInspectionTaskDetail.vue";
+import InspectionTaskDefectDetail from "./inspectionTaskDefectDetail.vue";
+import PatrolAbnormalStatistics from "@/views/cards/error_statistics/patrolAbnormalStatistics.vue";
+import debounce from "lodash.debounce";
+import moment from "moment";
+import { openDialog } from "../common.js";
+import { list, areaList, taskStatusChange } from "@/api/videosMonitor/index";
+import { listData } from "@/api/system/dict/data";
+import { listUser } from "@/api/system/user";
+import modelDialog from "../components/model-dialog.vue";
+import {
+  listPartrolResult,
+  partrolResultArchive,
+  partrolResultArchiveAdd,
+  reportExport,
+} from "@/api/inspectionDataManage/inspectionArchive";
+export default {
+  name: "inspectionTask",
+  components: {
+    CardPagination,
+    CardBox,
+    TaskStatus,
+    CardProgressBar,
+    NewInspectionTaskDetail,
+    InspectionTaskDefectDetail,
+    PatrolAbnormalStatistics,
+    modelDialog,
+  },
+  data() {
+    return {
+      timer: null, // 用于存储定时器的引用
+      // 遮罩层
+      loading: false,
+      // 总条数
+      total: 0,
+      // 数据
+      dataList: [],
+      // 选中的行数据
+      selectedRows: [],
+      // table 高度
+      tableHeight: null,
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "近三天",
+            onClick(picker) {
+              picker.$emit("pick", [
+                moment().subtract(3, "days").format("YYYY-MM-DD"),
+                moment().format("YYYY-MM-DD"),
+              ]);
+            },
+          },
+          {
+            text: "近六天",
+            onClick(picker) {
+              picker.$emit("pick", [
+                moment().subtract(6, "days").format("YYYY-MM-DD"),
+                moment().format("YYYY-MM-DD"),
+              ]);
+            },
+          },
+        ],
+      },
+      //时间范围
+      dateRange: [],
+      dateRangePickerOptions: {
+        disabledDate(selectDate) {
+          return new Date().getTime() < selectDate.getTime();
+        },
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        taskName: null,
+        areaTaskName: null,
+      },
+      showDetail: false,
+      selectInfo: {},
+      // 显示缺陷详情
+      showDefectDetail: false,
+      // 显示异常
+      showAbnormal: false,
+      // 1:初筛，0：AI
+      defectType: 1,
+      // 1:初筛，0：AI
+      reportType: 1,
+      // 显示模型对话
+      modelDialogVisible: false,
+      // 显示模型对话图标
+      modelDialogIcon: false,
+      // 显示单个归档
+      showContrastEdit: false,
+      isArchiving: false, // 正在归档
+      isLock: false,
+      contrastForm: {
+        checkPerson: null,
+        taskResult: null,
+        taskPatrolledId: null,
+      },
+      contrastRules: {
+        checkPerson: [
+          { required: true, message: "请输入审核人", trigger: "change" },
+        ],
+        taskResult: [
+          { required: true, message: "请输入巡视结论", trigger: "change" },
+        ],
+      },
+      // 批量归档相关
+      showBatchArchiveDialog: false,
+      isBatchArchiving: false,
+      isBatchLock: false,
+      batchArchiveForm: {
+        checkPerson: null,
+        taskResult: null,
+      },
+      batchArchiveRules: {
+        checkPerson: [
+          { required: true, message: "请输入审核人", trigger: "change" },
+        ],
+        taskResult: [
+          { required: true, message: "请输入巡视结论", trigger: "change" },
+        ],
+      },
+      userList: [],
+      areaList: [
+        { areaName: "换流变" },
+        { areaName: "直流场" },
+        { areaName: "调相机" },
+        { areaName: "GIS室" },
+        { areaName: "交流场" },
+        { areaName: "交流滤波器" },
+        { areaName: "站用变" },
+      ],
+    };
+  },
+  computed: {},
+  beforeDestroy() {
+    // 在组件销毁前清除定时器
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+  },
+  created() {
+    // 防抖
+    this.setTableHeight = debounce(this.setTableHeight, 300);
+    window.addEventListener("resize", this.setTableHeight);
+    this.timer = setInterval(this.getList, 10000);
+
+    // 设置默认日期范围
+    const today = moment().format("YYYY-MM-DD");
+
+    // 从 sessionStorage 恢复查询状态（优先级更高）
+    const savedState = sessionStorage.getItem("inspectionTaskState");
+    if (savedState) {
+      try {
+        const state = JSON.parse(savedState);
+        // 恢复分页参数
+        if (state.queryParams) {
+          this.queryParams = {
+            ...this.queryParams,
+            ...state.queryParams,
+          };
+        }
+        // 恢复日期范围
+        if (state.dateRange && state.dateRange.length === 2) {
+          this.dateRange = state.dateRange;
+        } else {
+          this.dateRange = [today, today];
+        }
+        // 清除sessionStorage，避免重复使用旧状态
+        sessionStorage.removeItem("inspectionTaskState");
+      } catch (e) {
+        console.error("恢复状态失败", e);
+        this.dateRange = [today, today];
+      }
+    } else {
+      // 从路由参数恢复（兼容旧版本）
+      const query = this.$route.query;
+      if (query && Object.keys(query).length > 0 && query.from !== "back") {
+        if (query.pageNum) this.queryParams.pageNum = parseInt(query.pageNum);
+        if (query.pageSize)
+          this.queryParams.pageSize = parseInt(query.pageSize);
+        if (query.taskName) this.queryParams.taskName = query.taskName;
+        if (query.areaTaskName)
+          this.queryParams.areaTaskName = query.areaTaskName;
+        if (query.beginTime && query.endTime) {
+          this.dateRange = [query.beginTime, query.endTime];
+        } else {
+          this.dateRange = [today, today];
+        }
+        // 清除URL参数，避免影响其他标签页
+        this.$router.replace({ query: { from: "back" } });
+      } else {
+        this.dateRange = [today, today];
+      }
+    }
+
+    this.getList();
+    // 获取区域
+
+    if (process.env.VUE_APP_MODEL_DIALOGUE == "true") {
+      this.modelDialogIcon = true;
+    }
+  },
+  mounted() {
+    this.setTableHeight();
+    setTimeout(() => {
+      this.getAreaList();
+    }, 1000);
+  },
+  destroyed() {
+    this.setTableHeight.cancel();
+    window.removeEventListener("resize", this.setTableHeight);
+  },
+  methods: {
+    // 获取区域列表
+    getAreaList() {
+      var data = { dictType: "sys_area_list" };
+      listData(data).then((res) => {
+        this.areaList = res.rows;
+      });
+    },
+    // 控制行是否可选 - 只有未归档且已执行的任务才能被勾选
+    selectable(row, index) {
+      // fileStatus == 0 表示未归档，taskState == 1 表示已执行
+      if (row.algName === "correction") {
+        return false;
+      }
+      return row.fileStatus == 0 && row.taskState == 1;
+    },
+    setTableHeight() {
+      this.tableHeight = this.$refs.tableCardRef.clientHeight - 40;
+    },
+    getList(showLoading = false) {
+      // 保存当前选中的任务ID
+      const selectedIds = this.selectedRows.map((row) => row.taskPatrolledId);
+
+      const params = { ...this.queryParams };
+      if (this.dateRange && this.dateRange.length > 1) {
+        params.beginTime = this.dateRange[0];
+        params.endTime = this.dateRange[1];
+      }
+      if (showLoading) {
+        this.loading = true;
+      }
+      list(params)
+        .then(({ rows, total }) => {
+          this.loading = false;
+          this.dataList = rows;
+          this.total = total;
+
+          // 数据更新后恢复选中状态
+          this.$nextTick(() => {
+            if (selectedIds.length > 0) {
+              this.dataList.forEach((row) => {
+                if (selectedIds.includes(row.taskPatrolledId)) {
+                  // 使用el-table的toggleRowSelection方法恢复选中
+                  this.$refs.multipleTable.toggleRowSelection(row, true);
+                }
+              });
+            }
+          });
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 20,
+      };
+      this.dateRange = [
+        moment().format("YYYY-MM-DD"),
+        moment().format("YYYY-MM-DD"),
+      ];
+      this.handleQuery();
+    },
+    // 处理选中行变化
+    handleSelectionChange(selection) {
+      this.selectedRows = selection;
+    },
+    // 批量归档
+    batchArchive() {
+      if (this.selectedRows.length === 0) {
+        this.$message.warning("请至少选择一条任务记录");
+        return;
+      }
+      const hasCorrection = this.selectedRows.some(
+        (row) => row.algName === "correction"
+      );
+      if (hasCorrection) {
+        this.$message.warning("纠偏任务不支持批量归档，请重新选择");
+        return;
+      }
+      // 重置表单
+      this.batchArchiveForm = {
+        checkPerson: null,
+        taskResult: null,
+      };
+      this.resetForm("batchArchiveForm");
+      this.showBatchArchiveDialog = true;
+      this.getUsrList();
+    },
+    // 批量归档提交
+    handleBatchArchiveClicked() {
+      this.$refs["batchArchiveForm"].validate((valid) => {
+        if (valid) {
+          // 获取所有选中的任务ID (使用 taskPatrolledId)
+          const taskPatrolledIds = this.selectedRows.map(
+            (row) => row.taskPatrolledId
+          );
+          const params = {
+            taskPatrolledIds: taskPatrolledIds,
+            checkPerson: this.batchArchiveForm.checkPerson,
+            taskResult: this.batchArchiveForm.taskResult,
+          };
+          this.isBatchArchiving = true;
+          this.isBatchLock = true;
+          partrolResultArchiveAdd(params)
+            .then((res) => {
+              this.$modal.msgSuccess("批量归档成功");
+              this.showBatchArchiveDialog = false;
+              // 清空选中状态
+              this.$refs.multipleTable.clearSelection();
+              this.getList(true);
+            })
+            .finally(() => {
+              this.isBatchArchiving = false;
+              this.isBatchLock = false;
+            });
+        }
+      });
+    },
+    // 详情
+    lookDetail(row) {
+      sessionStorage.setItem("selectInfo", JSON.stringify(row));
+      this.selectInfo = row;
+      this.showDetail = true;
+    },
+    // AI缺陷
+    lookAiBug(row) {
+      this.selectInfo = row;
+      this.showDefectDetail = true;
+    },
+    // 初筛异常
+    lookBasicAbnormal(row) {
+      this.defectType = 1;
+      row.defectType = 1;
+      sessionStorage.setItem("selectInfo", JSON.stringify(row));
+      // 开发
+      if (process.env.VUE_APP_DIALOG == "true") {
+        this.selectInfo = row;
+        this.showAbnormal = true;
+      } else {
+        openDialog({
+          sourceCardId: "shaoxing@videoMonitor-card-80",
+          targetCardId: "shaoxing@videoMonitor-card-75",
+          dialogTitle: "初筛异常",
+        });
+      }
+    },
+    // AI异常
+    lookAiAbnormal(row) {
+      this.defectType = 0;
+      row.defectType = 0;
+      sessionStorage.setItem("selectInfo", JSON.stringify(row));
+      // 开发
+      if (process.env.VUE_APP_DIALOG == "true") {
+        this.selectInfo = row;
+        this.showAbnormal = true;
+      } else {
+        openDialog({
+          sourceCardId: "shaoxing@videoMonitor-card-80",
+          targetCardId: "shaoxing@videoMonitor-card-75",
+          dialogTitle: "AI异常",
+        });
+      }
+    },
+    // 初筛缺陷
+    lookBasicBug(row) {
+      // 开发
+      if (process.env.VUE_APP_DIALOG == "true") {
+        this.selectInfo = row;
+        this.showDefectDetail = true;
+      } else {
+        openDialog({
+          sourceCardId: "shaoxing@videoMonitor-card-80",
+          targetCardId: "shaoxing@videoMonitor-card-82",
+          dialogTitle: "初筛缺陷详情",
+        });
+      }
+    },
+    // AI报告0
+    lookAiReport(row) {
+      sessionStorage.setItem("reportLineId", JSON.stringify(row.lineId));
+      sessionStorage.setItem("reportType", 0);
+      // 开发
+      if (process.env.VUE_APP_DIALOG == "true") {
+        this.$router.push(
+          {
+            path: "/card/patrolReportDetail",
+            query: {
+              lineId: row.lineId,
+              filter: 0,
+            },
+            query: { htmlType: "inspectionTask" }, // 确保这里传递了htmlType参数
+          }
+          // `/card/patrolReportDetail?lineId=${row.lineId}&filter=${0}`
+        );
+      } else {
+        openDialog({
+          sourceCardId: "shaoxing@videoMonitor-card-80",
+          targetCardId: "shaoxing@videoMonitor-card-38",
+          dialogTitle: "AI报告详情",
+        });
+      }
+    },
+    // 初筛报告1
+    lookBasicReport(row) {
+      // 添加安全检查 - 修复 null 值问题
+      if (!row || !row.lineId) {
+        console.warn("报告ID不存在，无法查看报告", row);
+        this.$message?.warning?.("报告信息不完整，无法查看");
+        return;
+      }
+
+      // 确保 lineId 不是 null 或 undefined
+      const lineId = row.lineId;
+
+      sessionStorage.setItem("reportLineId", JSON.stringify(lineId));
+      sessionStorage.setItem("reportType", 0);
+
+      // 保存当前页面的状态，用于返回时恢复
+      const currentState = {
+        queryParams: { ...this.queryParams },
+        dateRange:
+          this.dateRange && this.dateRange.length > 0
+            ? [...this.dateRange]
+            : [],
+        selectedRows: this.selectedRows.map((row) => row.taskPatrolledId),
+      };
+      sessionStorage.setItem(
+        "inspectionTaskState",
+        JSON.stringify(currentState)
+      );
+
+      // 开发
+      if (process.env.VUE_APP_DIALOG == "true") {
+        this.$router.push({
+          name: "patrolReportDetail",
+          query: {
+            lineId: lineId,
+            filter: 0,
+            fromPage: "inspectionTask",
+            fromComponent: "InspectionTask",
+          },
+        });
+      } else {
+        openDialog({
+          sourceCardId: "shaoxing@videoMonitor-card-80",
+          targetCardId: "shaoxing@videoMonitor-card-38",
+          dialogTitle: "初筛报告详情",
+        });
+      }
+    },
+    gotoTask(command, lineId, row) {
+      this.$confirm("确认操作吗？", {
+        title: "提示",
+        customClass: "card-page card-message-box",
+      }).then(() => {
+        taskStatusChange({
+          lineId,
+          command,
+        }).then(({ code }) => {
+          if (code == 200) {
+            const commandStatus = {
+              2: "3",
+              3: "2",
+            };
+            row.taskState = commandStatus[command];
+            this.$message.success("操作成功");
+            this.getList();
+          }
+        });
+      });
+    },
+    getStatusText(state) {
+      const statusEnum = {
+        1: "已执行",
+        2: "正在执行",
+        3: "暂停",
+        4: "终止",
+        5: "未执行",
+        6: "已超期",
+      };
+      const statusTypeEnum = {
+        1: "success", //已执行
+        2: "ongoing", //正在执行
+        3: "warning", //暂停
+        4: "info", //终止
+        5: "notrun", //未执行
+        6: "danger", //已超期
+      };
+      return {
+        text: statusEnum[state],
+        type: statusTypeEnum[state],
+      };
+    },
+    // 上一天
+    lastDayClicked() {
+      if (this.dateRange.length != 2) {
+        this.dateRange = [
+          moment().format("YYYY-MM-DD"),
+          moment().format("YYYY-MM-DD"),
+        ];
+      } else {
+        const dateStr = this.dateRange[0];
+        this.dateRange = [
+          moment(dateStr).subtract(1, "days").format("YYYY-MM-DD"),
+          moment(dateStr).subtract(1, "days").format("YYYY-MM-DD"),
+        ];
+      }
+      this.handleQuery();
+    },
+    // 下一天
+    nextDayClicked() {
+      if (this.dateRange.length != 2) {
+        this.dateRange = [
+          moment().format("YYYY-MM-DD"),
+          moment().format("YYYY-MM-DD"),
+        ];
+      } else {
+        const dateStr = this.dateRange[1];
+        this.dateRange = [
+          moment(dateStr).add(1, "days").format("YYYY-MM-DD"),
+          moment(dateStr).add(1, "days").format("YYYY-MM-DD"),
+        ];
+      }
+      this.handleQuery();
+    },
+
+    // 显示模型对话框
+    modelShow() {
+      this.modelDialogVisible = !this.modelDialogVisible;
+    },
+    showModelDialog() {
+      this.modelDialogVisible = false;
+    },
+    // 单个归档
+    archiveInfo(info) {
+      this.contrastForm = {
+        taskPatrolledId: info.taskPatrolledId,
+        checkPerson: null,
+        taskResult: null,
+      };
+      this.resetForm("contrastForm");
+      this.showContrastEdit = true;
+      this.getUsrList();
+    },
+    // 单个归档提交
+    handleArchiveClicked() {
+      this.$refs["contrastForm"].validate((valid) => {
+        if (valid) {
+          // 修改：将单个归档的ID包装成数组，与批量归档保持一致的结构
+          const params = {
+            taskPatrolledIds: [this.contrastForm.taskPatrolledId],
+            checkPerson: this.contrastForm.checkPerson,
+            taskResult: this.contrastForm.taskResult,
+          };
+          this.isArchiving = true;
+          this.isLock = true;
+          partrolResultArchiveAdd(params)
+            .then((res) => {
+              this.$modal.msgSuccess("归档成功");
+              this.showContrastEdit = false;
+              this.getList(true);
+            })
+            .finally(() => {
+              this.isArchiving = false;
+              this.isLock = false;
+            });
+        }
+      });
+    },
+    // 获取审核人员列表
+    getUsrList() {
+      listUser().then((res) => {
+        this.userList = res.rows;
+      });
+    },
+    // 重置表单
+    resetForm(formName) {
+      if (this.$refs[formName]) {
+        this.$refs[formName].resetFields();
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.card-page {
+  height: 100%;
+  overflow: hidden;
+}
+
+.query-card {
+  margin-bottom: 15px;
+
+  ::v-deep .el-form-item {
+    margin-bottom: 0;
+  }
+}
+
+.table-card {
+  flex: 1;
+  height: 0;
+  min-height: 0;
+  overflow: hidden;
+  // background: #dbe7fb;
+
+
+  ::v-deep .el-card__body {
+    height: 100%;
+  }
+}
+
+.sb-btn {
+  color: #0057d8 !important;
+  cursor: pointer;
+}
+.card-page .el-table td .cell {
+  color: #000000;
+}
+
+.table-action-link {
+  cursor: pointer;
+}
+
+.card-page ::v-deep .card-table,
+.card-page ::v-deep .el-table {
+  width: 100% !important;
+  background: transparent !important;
+  color: #000000;
+  border-color: rgba(64, 146, 255, 0.95) !important;
+}
+
+.card-page ::v-deep .el-table::before,
+.card-page ::v-deep .el-table::after,
+.card-page ::v-deep .el-table--border::after,
+.card-page ::v-deep .el-table--group::after {
+  background-color: rgba(64, 146, 255, 0.95) !important;
+}
+
+.card-page ::v-deep .el-table__header-wrapper,
+.card-page ::v-deep .el-table__fixed-header-wrapper,
+.card-page ::v-deep .el-table__body-wrapper,
+.card-page ::v-deep .el-table__fixed,
+.card-page ::v-deep .el-table__fixed-right {
+  background: #dbe7fb !important;
+}
+
+.card-page ::v-deep .el-table th.el-table__cell {
+  background: #06347f !important;
+  border-color: rgba(64, 146, 255, 0.95) !important;
+}
+
+.card-page ::v-deep .el-table th.el-table__cell .cell {
+  color: #ffffff !important;
+}
+
+.card-page ::v-deep .el-table td.el-table__cell {
+  background: transparent !important;
+  border-color: #c7d7f4 !important;
+  color: #000000 !important;
+}
+
+.card-page ::v-deep .el-table td.el-table__cell .cell {
+  color: #000000 !important;
+  font-weight: 500;
+}
+
+.card-page ::v-deep .el-table .progress-text {
+  color: #000000 !important;
+}
+
+.card-page ::v-deep .el-table__body tbody tr td:nth-child(2),
+.card-page ::v-deep .el-table__body tbody tr td:nth-child(2) .cell {
+  color: #000000 !important;
+  opacity: 1 !important;
+}
+
+.card-page ::v-deep .el-table .el-button--primary {
+  background: #1f8fff !important;
+  border-color: #1f8fff !important;
+  color: #ffffff !important;
+}
+
+.card-page ::v-deep .el-table .el-button--primary:hover,
+.card-page ::v-deep .el-table .el-button--primary:focus {
+  background: #006dff !important;
+  border-color: #006dff !important;
+  color: #ffffff !important;
+}
+
+.task-toolbar-btn,
+.card-page ::v-deep .el-table .task-row-btn {
+  border: 1px solid transparent !important;
+  background:
+    linear-gradient(#01016b, #01016b) padding-box,
+    linear-gradient(135deg, #3988ff, #0351c6) border-box !important;
+  color: #43c0ff !important;
+}
+
+.task-toolbar-btn:hover,
+.task-toolbar-btn:focus,
+.card-page ::v-deep .el-table .task-row-btn:hover,
+.card-page ::v-deep .el-table .task-row-btn:focus {
+  border: 1px solid transparent !important;
+  background:
+    linear-gradient(#01016b, #01016b) padding-box,
+    linear-gradient(135deg, #3988ff, #0351c6) border-box !important;
+  color: #43c0ff !important;
+  opacity: 0.9;
+}
+
+.task-toolbar-btn.is-disabled,
+.task-toolbar-btn.is-disabled:hover,
+.task-toolbar-btn.is-disabled:focus {
+  border: 1px solid transparent !important;
+  background:
+    linear-gradient(#01016b, #01016b) padding-box,
+    linear-gradient(135deg, #3988ff, #0351c6) border-box !important;
+  color: #43c0ff !important;
+  opacity: 0.45;
+}
+
+.card-page ::v-deep .el-table__row {
+  background: #e4edfc !important;
+}
+
+.card-page ::v-deep .el-table__row--striped td.el-table__cell {
+  background: #d7e4f8 !important;
+}
+
+.card-page ::v-deep .el-table__body tr:hover > td.el-table__cell {
+  background: #c5d9f6 !important;
+}
+
+.card-page ::v-deep .el-table__body-wrapper {
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.card-page ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.task-detail-dialog-wrap {
+  height: calc(100vh - 160px);
+  min-height: 640px;
+  overflow: hidden;
+}
+
+.defect-detail-dialog-wrap {
+  height: calc(100vh - 160px);
+  min-height: 640px;
+  overflow: hidden;
+}
+
+::v-deep .task-detail-dialog .el-dialog__body {
+  height: auto;
+  padding: 0;
+  overflow: hidden;
+}
+
+::v-deep .defect-detail-dialog .el-dialog__body {
+  height: auto;
+  padding: 0;
+  overflow: hidden;
+}
+
+::v-deep .archive-dialog {
+  min-height: 0;
+}
+
+::v-deep .archive-dialog .el-dialog__body {
+  height: auto;
+  min-height: 260px;
+  padding: 28px 24px 24px;
+  overflow: hidden;
+}
+.model-dialog-img {
+  width: 50px;
+  height: 50px;
+  // background: red;
+  position: absolute;
+  right: 10px;
+  border-radius: 50%;
+  cursor: pointer;
+  background-image: url("../assets/model-img.png");
+  background-size: 100%;
+}
+.el-select {
+  display: inline;
+  position: relative;
+}
+</style>
diff --git a/src/views/cards/taskSummary/inspectionTaskDefectDetail.vue b/src/views/cards/taskSummary/inspectionTaskDefectDetail.vue
new file mode 100644
index 0000000..e975b00
--- /dev/null
+++ b/src/views/cards/taskSummary/inspectionTaskDefectDetail.vue
@@ -0,0 +1,222 @@
+<template>
+  <!-- <CardBox
+    class="card-page page-content"
+    title="缺陷详情"
+    :titleImgURL="require('../assets/card_full_bg.png')"
+  > -->
+   <CardBox
+    class="card-page page-content">
+    <div class="page-container">
+      <div class="title-wrap">{{ taskInfo.taskName }}</div>
+      <div class="decfect-box">
+        <el-row>
+          <el-col
+            style="padding: 8px"
+            :span="4"
+            v-for="(item, index) in dataList"
+            :key="index"
+          >
+            <div
+              class="decfect-item"
+              :class="{
+                'decfect-item-alarm': item.resStatus == 1,
+                'decfect-item-following': item.resStatus == 3,
+                'decfect-item-cancel': item.resStatus == 2,
+              }"
+              @click="onItemClicked(item, index)"
+            >
+              <div class="img-title">{{ item.pointName }}</div>
+              <AsyncImage
+                class="img-box"
+                :src="item.imgAnalyse"
+                fit="contain"
+                :supportPreview="false"
+              ></AsyncImage>
+              <!-- 撤销的不显示 -->
+              <!-- <div v-if="item.resStatus != 2 && item.algType == 'switch'" class="desc-info">
+                {{ item.resValue }}
+              </div> -->
+              <div v-if="item.resStatus != 2" class="desc-info">
+                {{ item.desc }}
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <CardPagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+    <el-dialog
+      title="缺陷详情"
+      :visible.sync="showInfo"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      custom-class="card-dialog card-page card-dialog-height-auto defect-detail-image-dialog"
+      width="70%"
+      append-to-body
+      @close="getList"
+    >
+      <div class="defect-detail-image-dialog-wrap">
+        <InspectionTaskDefectDetailImage
+          :dataList="dataList"
+          :selectIndex="selectIndex"
+          :showHandleBtn="taskInfo != null && taskInfo.fileStatus != 1"
+        />
+      </div>
+    </el-dialog>
+  </CardBox>
+</template>
+<script>
+import CardBox from "../components/cardBox.vue";
+import CardPagination from "../components/CardPagination/index.vue";
+import debounce from "lodash.debounce";
+import InspectionTaskDefectDetailImage from "./inspectionTaskDefectDetailImage.vue";
+import { analysisDefectList, analysisDefectListShaoxing} from "@/api/videosMonitor/index";
+export default {
+  name: "InspectionTaskDefectDetail",
+  components: { CardBox, CardPagination, InspectionTaskDefectDetailImage },
+  props: {
+    info: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      taskInfo: null,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+      },
+      // 总条数
+      total: 0,
+      // 数据
+      dataList: [],
+      showInfo: false,
+      selectIndex: 0,
+    };
+  },
+  computed: {},
+  created() {
+    if (!this.info) {
+      this.taskInfo = JSON.parse(sessionStorage.getItem("selectInfo"));
+    } else {
+      this.taskInfo = this.info;
+    }
+    this.queryParams.taskPatrolledId = this.taskInfo.taskPatrolledId;
+    this.queryParams.filter = this.taskInfo.defectType;
+    this.getList();
+  },
+  beforeDestroy() {},
+  methods: {
+    // 获取列表
+    getList() {
+      analysisDefectListShaoxing(this.queryParams).then((res) => {
+        this.dataList = res.rows;
+        this.total = res.total;
+      });
+    },
+    onItemClicked(row, index) {
+      this.selectIndex = index;
+      this.showInfo = true;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page-content {
+  width: 100%;
+  height: 100%;
+}
+.page-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+::v-deep .card-box-title-box {
+  display: none !important;
+}
+.title-wrap {
+  text-align: center;
+  font-size: 18px;
+  color: #40e5f0;
+  padding: 0 0 10px;
+}
+.decfect-box {
+  height: 0;
+  flex: 1;
+  overflow-y: auto;
+  .decfect-item {
+    height: 213px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    background-color: #091318;
+    .img-title {
+      color: #b0bdd4;
+      padding: 8px 0 8px 8px;
+      display: flex;
+      align-items: center;
+    }
+    .img-title:before {
+      content: "";
+      width: 16px; /* 图标的宽度 */
+      height: 16px; /* 图标的高度 */
+      margin-right: 10px;
+      background-image: url("../assets/icon-title-1.png");
+      background-size: cover;
+    }
+
+    .img-box {
+      width: 100%;
+      height: 0;
+      flex: 1;
+    }
+
+    .desc-info {
+      background-color: #ff4a41;
+      color: #ffffff;
+      padding: 5px;
+      border-top-left-radius: 5px;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      font-size: 11px;
+      letter-spacing: 1px;
+    }
+  }
+
+  //告警
+  .decfect-item-alarm {
+    border: 2px solid #ff4a41;
+  }
+
+  //跟踪
+  .decfect-item-following {
+    border: 2px solid #ffa800;
+  }
+  //撤销
+  .decfect-item-cancel {
+    border: 2px solid #40e5f0;
+  }
+}
+
+.defect-detail-image-dialog-wrap {
+  height: calc(100vh - 180px);
+  min-height: 560px;
+  overflow: hidden;
+}
+
+::v-deep .defect-detail-image-dialog .el-dialog__body {
+  height: auto;
+  padding: 0;
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/cards/taskSummary/inspectionTaskDefectDetailImage.vue b/src/views/cards/taskSummary/inspectionTaskDefectDetailImage.vue
new file mode 100644
index 0000000..251dfe3
--- /dev/null
+++ b/src/views/cards/taskSummary/inspectionTaskDefectDetailImage.vue
@@ -0,0 +1,701 @@
+<template>
+  <div class="page-box">
+    <div
+      v-if="selectInfo"
+      class="decfect-box"
+      :class="{
+        'decfect-box-alarm': selectInfo.pointStatus == 5,
+        'decfect-box-following': selectInfo.pointStatus == 4,
+        'decfect-box-cancel': selectInfo.pointStatus == 3,
+      }"
+    >
+    <!-- 3-已撤销（忽略） 4-跟踪（告警） 5-确认（g告警 -->
+      <div class="img-title">{{ selectInfo.pointName }}</div>
+      <div class="img-box">
+        <div class="image-container">
+          <div class="zoom-container" ref="image1Container">
+            <div
+              class="zoom-wrapper"
+              ref="image1Wrapper"
+              :style="{
+                transform: `scale(${image1Scale})`,
+                transformOrigin: '0 0',
+                position: 'absolute',
+                left: `${image1Position.x}px`,
+                top: `${image1Position.y}px`,
+                width: '100%',
+                height: '100%',
+              }"
+              @mousedown="startDrag($event, 'image1')"
+              @touchstart="startTouchDrag($event, 'image1')"
+            >
+              <AsyncImage
+                class="img-wrap zoomable-image"
+                :src="selectInfo.imageNormalUrlPath"
+                fit="contain"
+                :supportPreview="false"
+              ></AsyncImage>
+            </div>
+          </div>
+          <div class="zoom-controls">
+            <el-button size="mini" circle @click="resetImage1" title="重置">
+              ↺
+            </el-button>
+          </div>
+        </div>
+
+        <div class="image-container">
+          <div class="zoom-container" ref="image2Container">
+            <div
+              class="zoom-wrapper"
+              ref="image2Wrapper"
+              :style="{
+                transform: `scale(${image2Scale})`,
+                transformOrigin: '0 0',
+                position: 'absolute',
+                left: `${image2Position.x}px`,
+                top: `${image2Position.y}px`,
+                width: '100%',
+                height: '100%',
+              }"
+              @mousedown="startDrag($event, 'image2')"
+              @touchstart="startTouchDrag($event, 'image2')"
+            >
+              <AsyncImage
+                class="img-wrap zoomable-image"
+                :src="selectInfo.imgAnalyse"
+                fit="contain"
+                :supportPreview="false"
+              ></AsyncImage>
+            </div>
+          </div>
+          <div class="zoom-controls">
+            <el-button size="mini" circle @click="resetImage2" title="重置">
+              ↺
+            </el-button>
+          </div>
+        </div>
+      </div>
+      <!-- 撤销的不显示 -->
+      <div v-if="selectInfo.pointStatus != 3" class="desc-info">
+        {{ selectInfo.desc }}
+      </div>
+    </div>
+    <div class="tool-box">
+      <!-- 原有的其他代码保持不变 -->
+      <div class="alg-box" v-if="selectInfo.pointStatus == 0 && showHandleBtn">
+        <div class="alg-wrap">
+          <el-radio-group v-model="selectAlgName" size="medium">
+            <el-radio-button
+              v-for="(item, index) in algList"
+              :key="index"
+              :label="item.algSubtypeName"
+            ></el-radio-button>
+          </el-radio-group>
+        </div>
+        <div class="suggest-wrap">
+          <span>建议：</span>
+          <el-input
+            style="flex: 1"
+            v-model="suggestion"
+            placeholder="请输入建议"
+          ></el-input>
+        </div>
+      </div>
+      <div class="tool-wrap">
+        <div class="pre-next-box">
+          <div class="pre-next-btn">
+            <el-image
+              v-if="showPreBtn"
+              class="img-wrap"
+              :src="require('../assets/btn-pre.png')"
+              fit="contain"
+              @click="preBtnClicked"
+            ></el-image>
+          </div>
+          <div class="pre-next-btn">
+            <el-image
+              v-if="showNextBtn"
+              class="img-wrap"
+              :src="require('../assets/btn-next.png')"
+              fit="contain"
+              @click="nextBtnClicked"
+            ></el-image>
+          </div>
+        </div>
+        <div
+          class="handle-box"
+          v-if="(selectInfo.pointStatus == 0 || selectInfo.pointStatus == 6) && showHandleBtn"
+        >
+          <el-button
+            class="handle-btn handle-btn-second"
+            type="primary"
+            @click="cancelAlarm"
+            >忽略</el-button
+          >
+          <el-button class="handle-btn" type="primary" @click="sureAlarm"
+            >确认</el-button
+          >
+          <el-button
+            class="handle-btn handle-btn-second"
+            type="primary"
+            @click="following"
+            >跟踪</el-button
+          >
+        </div>
+        <!-- <div v-else class="handle-box">
+          备注：{{ selectInfo.suggestion ? selectInfo.suggestion : "--" }}
+        </div> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  handleBatchAlarmConfirm,
+  getAlgTypeList,
+} from "@/api/inspectionDataManage/alarmConfirm";
+
+export default {
+  name: "InspectionTaskDefectDetailImage",
+  props: {
+    dataList: {
+      type: Array,
+      default: [],
+    },
+    selectIndex: {
+      type: Number,
+      default: 0,
+    },
+    showHandleBtn: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data() {
+    return {
+      pos: this.selectIndex,
+      selectAlgName: "",
+      suggestion: "",
+      algList: [],
+
+      image1Scale: 1,
+      image1Position: { x: 0, y: 0 },
+
+      image2Scale: 1,
+      image2Position: { x: 0, y: 0 },
+
+      isDragging: false,
+      currentDraggingImage: null,
+      dragStartPos: { x: 0, y: 0 },
+      dragStartImagePos: { x: 0, y: 0 },
+    };
+  },
+
+  watch: {
+    selectIndex() {
+      this.pos = this.selectIndex;
+      this.resetImageScalesAndPositions();
+    },
+  },
+
+  computed: {
+    selectInfo() {
+      if (this.pos < this.dataList.length) {
+        return this.dataList[this.pos];
+      }
+      return null;
+    },
+
+    showPreBtn() {
+      return this.pos > 0;
+    },
+
+    showNextBtn() {
+      return this.pos < this.dataList.length - 1;
+    },
+  },
+
+  created() {
+    getAlgTypeList().then((res) => {
+      res.rows.push({
+        algSubtypeName: "其他",
+      });
+      this.algList = res.rows.filter((item, index, self) => {
+        return (
+          self.findIndex((t) => t.algSubtypeName === item.algSubtypeName) ===
+          index
+        );
+      });
+    });
+  },
+
+  mounted() {
+    // 在mounted中绑定事件，确保DOM已加载
+    this.bindGlobalEvents();
+
+    // 为容器添加滚轮事件
+    this.$nextTick(() => {
+      if (this.$refs.image1Container) {
+        this.$refs.image1Container.addEventListener(
+          "wheel",
+          this.handleImage1Wheel,
+          { passive: false }
+        );
+      }
+      if (this.$refs.image2Container) {
+        this.$refs.image2Container.addEventListener(
+          "wheel",
+          this.handleImage2Wheel,
+          { passive: false }
+        );
+      }
+    });
+  },
+
+  beforeDestroy() {
+    this.unbindGlobalEvents();
+
+    // 移除滚轮事件
+    if (this.$refs.image1Container) {
+      this.$refs.image1Container.removeEventListener(
+        "wheel",
+        this.handleImage1Wheel
+      );
+    }
+    if (this.$refs.image2Container) {
+      this.$refs.image2Container.removeEventListener(
+        "wheel",
+        this.handleImage2Wheel
+      );
+    }
+  },
+
+  methods: {
+    preBtnClicked() {
+      this.pos = this.pos - 1 >= 0 ? this.pos - 1 : 0;
+      // 切换图片后重置缩放和位置
+      this.resetImageScalesAndPositions();
+    },
+
+    nextBtnClicked() {
+      this.pos =
+        this.pos + 1 < this.dataList.length - 1
+          ? this.pos + 1
+          : this.dataList.length - 1;
+      // 切换图片后重置缩放和位置
+      this.resetImageScalesAndPositions();
+    },
+    // 确认
+    sureAlarm() {
+      this.handleAlarm(5);
+    },
+    // 跟踪
+    following() {
+      this.handleAlarm(4);
+    },
+    // 忽略
+    cancelAlarm() {
+      this.handleAlarm(3);
+    },
+
+    handleAlarm(status) {
+      const suggestion = this.selectAlgName + "，" + this.suggestion;
+      const params = {
+        lineIds: this.selectInfo.lineId,
+        status,
+        suggestion,
+      };
+
+      handleBatchAlarmConfirm(params).then((res) => {
+        this.$modal.msgSuccess("操作成功");
+        this.$set(this.dataList, this.pos, {
+          ...this.dataList[this.pos],
+          pointStatus: status,
+          suggestion,
+        });
+        this.nextBtnClicked();
+        this.selectAlgName = "";
+        this.suggestion = "";
+      });
+    },
+
+    // 处理第一张图片的滚轮事件
+    handleImage1Wheel(event) {
+      event.preventDefault();
+      this.handleImageWheel(event, "image1Scale", "image1Position");
+    },
+
+    // 处理第二张图片的滚轮事件
+    handleImage2Wheel(event) {
+      event.preventDefault();
+      this.handleImageWheel(event, "image2Scale", "image2Position");
+    },
+
+    // 通用的图片滚轮处理函数
+    handleImageWheel(event, scaleProperty, positionProperty) {
+      const delta = event.deltaY || event.detail || event.wheelDelta;
+      const direction = delta > 0 ? -1 : 1;
+      const scaleStep = 0.1;
+
+      const oldScale = this[scaleProperty];
+      let newScale = oldScale + direction * scaleStep;
+      newScale = Math.max(0.1, Math.min(5, newScale));
+
+      // 计算鼠标在容器中的位置
+      const container = event.currentTarget;
+      const containerRect = container.getBoundingClientRect();
+      const mouseX = event.clientX - containerRect.left;
+      const mouseY = event.clientY - containerRect.top;
+
+      // 当前图片位置
+      const currentPos = this[positionProperty];
+
+      // 计算缩放后的新位置
+      // 缩放比例变化
+      const scaleChange = newScale / oldScale;
+
+      // 调整位置使鼠标点保持在图片上的同一位置
+      this[positionProperty] = {
+        x: currentPos.x - (mouseX - currentPos.x) * (scaleChange - 1),
+        y: currentPos.y - (mouseY - currentPos.y) * (scaleChange - 1),
+      };
+
+      this[scaleProperty] = newScale;
+    },
+
+    // 开始鼠标拖拽
+    startDrag(event, imageName) {
+      if (event.button !== 0) return;
+
+      this.isDragging = true;
+      this.currentDraggingImage = imageName;
+      this.dragStartPos = {
+        x: event.clientX,
+        y: event.clientY,
+      };
+      this.dragStartImagePos = {
+        x: this[`${imageName}Position`].x,
+        y: this[`${imageName}Position`].y,
+      };
+
+      // 添加拖拽样式
+      const wrapper = this.$refs[`${imageName}Wrapper`];
+      if (wrapper) {
+        wrapper.classList.add("dragging");
+      }
+
+      // 防止文本选择
+      document.body.style.userSelect = "none";
+      document.body.style.webkitUserSelect = "none";
+
+      event.preventDefault();
+      event.stopPropagation();
+    },
+
+    // 开始触摸拖拽
+    startTouchDrag(event, imageName) {
+      if (event.touches.length !== 1) return;
+
+      this.isDragging = true;
+      this.currentDraggingImage = imageName;
+      this.dragStartPos = {
+        x: event.touches[0].clientX,
+        y: event.touches[0].clientY,
+      };
+      this.dragStartImagePos = {
+        x: this[`${imageName}Position`].x,
+        y: this[`${imageName}Position`].y,
+      };
+
+      const wrapper = this.$refs[`${imageName}Wrapper`];
+      if (wrapper) {
+        wrapper.classList.add("dragging");
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+    },
+
+    // 处理拖拽移动
+    handleDragMove(event) {
+      if (!this.isDragging || !this.currentDraggingImage) return;
+
+      let clientX, clientY;
+
+      if (event.type === "mousemove") {
+        clientX = event.clientX;
+        clientY = event.clientY;
+      } else if (event.type === "touchmove" && event.touches.length === 1) {
+        clientX = event.touches[0].clientX;
+        clientY = event.touches[0].clientY;
+      } else {
+        return;
+      }
+
+      const deltaX = clientX - this.dragStartPos.x;
+      const deltaY = clientY - this.dragStartPos.y;
+
+      // 更新图片位置
+      this[`${this.currentDraggingImage}Position`] = {
+        x: this.dragStartImagePos.x + deltaX,
+        y: this.dragStartImagePos.y + deltaY,
+      };
+
+      event.preventDefault();
+      event.stopPropagation();
+    },
+
+    // 结束拖拽
+    handleDragEnd(event) {
+      if (!this.isDragging) return;
+
+      // 移除拖拽样式
+      if (this.currentDraggingImage) {
+        const wrapper = this.$refs[`${this.currentDraggingImage}Wrapper`];
+        if (wrapper) {
+          wrapper.classList.remove("dragging");
+        }
+      }
+
+      // 恢复文本选择
+      document.body.style.userSelect = "";
+      document.body.style.webkitUserSelect = "";
+
+      this.isDragging = false;
+      this.currentDraggingImage = null;
+    },
+
+    // 重置第一张图片的缩放和位置
+    resetImage1() {
+      this.image1Scale = 1;
+      this.image1Position = { x: 0, y: 0 };
+    },
+
+    // 重置第二张图片的缩放和位置
+    resetImage2() {
+      this.image2Scale = 1;
+      this.image2Position = { x: 0, y: 0 };
+    },
+
+    // 重置所有图片的缩放和位置
+    resetImageScalesAndPositions() {
+      this.resetImage1();
+      this.resetImage2();
+    },
+
+    // 绑定全局事件
+    bindGlobalEvents() {
+      document.addEventListener("mousemove", this.handleDragMove);
+      document.addEventListener("mouseup", this.handleDragEnd);
+      document.addEventListener("touchmove", this.handleDragMove, {
+        passive: false,
+      });
+      document.addEventListener("touchend", this.handleDragEnd);
+    },
+
+    // 移除全局事件
+    unbindGlobalEvents() {
+      document.removeEventListener("mousemove", this.handleDragMove);
+      document.removeEventListener("mouseup", this.handleDragEnd);
+      document.removeEventListener("touchmove", this.handleDragMove);
+      document.removeEventListener("touchend", this.handleDragEnd);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page-box {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.decfect-box {
+  flex: 1;
+  height: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background-color: #091318;
+
+  .img-title {
+    color: #ffffff;
+    padding: 8px 0 8px 8px;
+    display: flex;
+    font-weight: 500;
+    font-size: 13px;
+    align-items: center;
+  }
+  .img-title:before {
+    content: "";
+    width: 16px; /* 图标的宽度 */
+    height: 16px; /* 图标的高度 */
+    margin-right: 10px;
+    background-image: url("../assets/icon-title-1.png");
+    background-size: cover;
+  }
+
+  .img-box {
+    display: flex;
+    gap: 10px;
+    flex: 1;
+    height: 0;
+
+    .image-container {
+      flex: 1;
+      width: 0;
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+
+      .zoom-container {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+        cursor: grab;
+
+        &:active {
+          cursor: grabbing;
+        }
+      }
+
+      .zoom-wrapper {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        cursor: grab;
+
+        &.dragging {
+          cursor: grabbing;
+        }
+
+        .img-wrap {
+          width: 100%;
+          height: 100%;
+          user-select: none;
+          -webkit-user-drag: none;
+          pointer-events: none; /* 防止图片干扰拖拽事件 */
+        }
+      }
+
+      .zoom-controls {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        z-index: 10;
+
+        .el-button {
+          background: rgba(0, 0, 0, 0.6);
+          color: white;
+          border: none;
+          font-size: 16px;
+
+          &:hover {
+            background: rgba(0, 0, 0, 0.8);
+          }
+        }
+      }
+    }
+  }
+
+  .desc-info {
+    background-color: #ff4a41;
+    color: #ffffff;
+    padding: 5px;
+    border-top-left-radius: 5px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    font-size: 11px;
+    letter-spacing: 1px;
+    z-index: 10;
+    pointer-events: none;
+  }
+}
+
+/*告警*/
+.decfect-box-alarm {
+  border: 2px solid #ff4a41;
+}
+
+/*跟踪*/
+.decfect-box-following {
+  border: 2px solid #ffa800;
+}
+
+/*撤销*/
+.decfect-box-cancel {
+  border: 2px solid #40e5f0;
+}
+
+.tool-box {
+  height: 183px;
+  display: flex;
+  flex-direction: column;
+}
+
+.alg-box {
+  display: flex;
+  align-items: center;
+  align-items: center;
+  height: 80px;
+  gap: 15px;
+
+  .alg-wrap {
+    flex: 1;
+    width: 0;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  .suggest-wrap {
+    width: 280px;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.tool-wrap {
+  height: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+
+  .pre-next-box {
+    flex: 1;
+    display: flex;
+    gap: 83px;
+
+    .pre-next-btn {
+      width: 122px;
+      height: 90px;
+
+      .img-wrap {
+        width: 100%;
+        height: 100%;
+        user-select: none;
+      }
+    }
+  }
+
+  .handle-box {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+
+    .handle-btn {
+      width: 143px;
+      height: 55px;
+      font-size: 27px;
+    }
+
+    .handle-btn-second {
+      background-color: #575a68;
+    }
+  }
+}
+</style>
diff --git a/src/views/cards/taskSummary/newInspectionTaskDetail.vue b/src/views/cards/taskSummary/newInspectionTaskDetail.vue
new file mode 100644
index 0000000..47dacb5
--- /dev/null
+++ b/src/views/cards/taskSummary/newInspectionTaskDetail.vue
@@ -0,0 +1,1134 @@
+<template>
+  <!--任务详情 -->
+  <CardBox class="card-page page-content">
+    <div class="page-container">
+      <div class="page-left">
+        <div class="img-title">{{ selectPointInfo.pointName }}</div>
+        <div
+          class="img-box"
+          v-if="
+            selectPointInfo.imgType !== '1' && selectPointInfo.imgType !== 1
+          "
+        >
+          <!-- 增加正样本 -->
+          <div class="img-wrap-box" v-if="selectPointInfo.imageNormalUrlPath">
+            <div class="img-header-box" style="background-color: #0e3749">
+              <div class="img-header-left">正样本</div>
+            </div>
+            <AsyncImage
+              class="img-wrap"
+              fit="contain"
+              :src="selectPointInfo.imageNormalUrlPath"
+              :supportPreview="false"
+              @click="
+                onImagePreviewClicked(selectPointInfo.imageNormalUrlPath, false)
+              "
+            ></AsyncImage>
+          </div>
+          <!-- 结束 -->
+          <div class="img-wrap-box" v-if="selectPointInfo.img">
+            <div class="img-header-box">
+              <div class="img-header-left">初筛分析</div>
+              <div class="img-header-right">
+                {{
+                  `结果：${
+                    selectPointInfo.filterDesc
+                      ? selectPointInfo.filterDesc
+                      : "--"
+                  }`
+                }}
+              </div>
+            </div>
+            <AsyncImage
+              class="img-wrap"
+              fit="contain"
+              :src="selectPointInfo.img"
+              :supportPreview="false"
+              @click="onImagePreviewClicked(selectPointInfo.img, false)"
+            ></AsyncImage>
+          </div>
+          <div class="img-wrap-box" v-if="selectPointInfo.imgAnalyse">
+            <div class="img-header-box">
+              <div class="img-header-left">
+                {{
+                  selectPointInfo.algType == "meter" ? "表计识别" : "模型分析"
+                }}
+              </div>
+              <div class="img-header-right">
+                结果：{{ getAnalyResult(selectPointInfo) }}
+              </div>
+            </div>
+            <AsyncImage
+              class="img-wrap"
+              fit="contain"
+              :src="selectPointInfo.imgAnalyse"
+              :supportPreview="false"
+              @click="onImagePreviewClicked(selectPointInfo.imgAnalyse, false)"
+            ></AsyncImage>
+          </div>
+        </div>
+        <!-- 红外画框 -->
+        <div class="img-box" v-else>
+          <div class="img-wrap-box">
+            <div class="img-header-box">
+              <div class="img-header-left">红外测温</div>
+              <div class="img-header-right">
+                结果：{{ getAnalyResult(selectPointInfo) }}
+              </div>
+            </div>
+            <div
+              class="img-wrap"
+              v-if="selectPointInfo.filter == 0"
+              @dblclick="
+                onImagePreviewClicked(selectPointInfo.imgAnalyse, true)
+              "
+            >
+              <AsyncImageFrame
+                class="img-wrap"
+                fit="contain"
+                :src="selectPointInfo.imgAnalyse"
+                :supportPreview="false"
+              ></AsyncImageFrame>
+            </div>
+            <div
+              class="img-wrap"
+              v-else-if="selectPointInfo.filter == 1"
+              @dblclick="onImagePreviewClicked(selectPointInfo.img, true)"
+            >
+              <AsyncImageFrame
+                class="img-wrap"
+                fit="contain"
+                :src="selectPointInfo.img"
+                :supportPreview="false"
+              ></AsyncImageFrame>
+            </div>
+          </div>
+        </div>
+        <!-- 红外画框结束 -->
+        <div class="img-footer">
+          <div class="img-footer-time">
+            采集时间：{{ selectPointInfo.patrolTime }}
+          </div>
+        </div>
+      </div>
+      <div class="page-right">
+        <!-- 基本信息 - 标题和内容在同一行 -->
+        <div class="title-row">
+          <div class="title-wrap">基本信息</div>
+          <div class="info-items">
+            <div class="info-item">
+              <span class="info-label">任务名称：</span>
+              <span class="info-value">{{ baseInfo.taskName || "--" }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">任务类型：</span>
+              <span class="info-value">{{
+                baseInfo.patrolTypeText || "--"
+              }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">执行时间：</span>
+              <span class="info-value">{{ baseInfo.startTime || "--" }}</span>
+            </div>
+            <div class="info-item info-item-right">
+              <span class="info-label">耗时：</span>
+              <span class="info-value">{{ baseInfo.duration || "--" }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 结果信息区域 - 使用 taskInfo.summary 数据 -->
+        <div class="title-row">
+          <div class="title-wrap">结果信息</div>
+          <div class="info-items" v-if="hasSummaryData">
+            <div class="info-item">
+              <span class="info-label">基本总点位：</span>
+              <span class="info-value">{{ summaryData.totalPoint }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">已巡检：</span>
+              <span class="info-value">{{ summaryData.executedPoint }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">未巡检：</span>
+              <span class="info-value">{{ summaryData.unexecutedPoint }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="query-box">
+          <el-form
+            class="result-query-box"
+            :model="queryParams"
+            ref="queryForm"
+            :inline="true"
+          >
+            <el-form-item label="点位名称">
+              <!-- 使用 el-autocomplete 替代 el-select -->
+              <el-autocomplete
+                v-model="queryParams.pointName"
+                :fetch-suggestions="querySearch"
+                placeholder="请输入或选择点位名称"
+                size="small"
+                clearable
+                style="width: 300px"
+                popper-class="custom-autocomplete-popper"
+                @select="handleSelectPointName"
+                @input="handleInputPointName"
+                @clear="handleClearPointName"
+                @keyup.enter.native="handleSearchClick"
+                ref="pointNameAutocomplete"
+              >
+                <template slot-scope="{ item }">
+                  <span>{{ item.value }}</span>
+                </template>
+              </el-autocomplete>
+            </el-form-item>
+            <el-form-item label="点位状态">
+              <el-select
+                v-model="queryParams.pointStatus"
+                filterable
+                size="small"
+                clearable
+                placeholder="请选择状态"
+                style="width: 189px"
+                @change="handleSelectPointStatus"
+                @blur="handleBlurPointStatus"
+              >
+                <el-option
+                  v-for="(item, index) in searchSourceData.listPointStatus"
+                  :key="'pointStatus_' + index"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="异常置顶">
+              <el-switch
+                v-model="queryParams.abnormal"
+                active-color="#247382"
+                inactive-color="#101d29"
+                :active-value="1"
+                :inactive-value="0"
+                @change="handleQuery"
+                :loading="loading"
+              >
+              </el-switch>
+            </el-form-item>
+            <el-form-item label-width="90px" label="">
+              <el-button
+                type="primary"
+                icon="el-icon-search"
+                size="small"
+                @click="handleSearchClick"
+                :loading="loading"
+                >搜索</el-button
+              >
+              <el-button
+                class="detail-reset-btn"
+                icon="el-icon-refresh"
+                size="small"
+                @click="resetQuery"
+                >重置</el-button
+              >
+              <el-button
+                type="primary"
+                icon="el-icon-download"
+                size="small"
+                @click="exportData"
+                :loading="loading"
+                >导出</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <!-- 表格区域 - 点位名称、状态、纠偏三列 -->
+        <div class="table-card" ref="pointTableRef">
+          <el-table
+            class="card-table"
+            :data="pointDataList"
+            :height="tableHeight"
+            v-loading="loading"
+            @row-click="onPointTableRowClicked"
+            :row-class-name="setCurrentRowClassName"
+            border
+            :stripe="false"
+          >
+            <!-- 序号列 -->
+            <el-table-column
+              label="序号"
+              type="index"
+              width="50"
+              align="center"
+              :index="getIndex"
+            />
+            <!-- 点位名称列 -->
+            <el-table-column
+              label="点位名称"
+              align="center"
+              prop="pointName"
+              min-width="150"
+            >
+              <template slot-scope="scope">
+                <span>{{ scope.row.pointName || "--" }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="读数"
+              align="center"
+              prop="resValue"
+              v-if="baseInfo.algName != 'correction'"
+            >
+              <template slot-scope="scope">
+                <span v-if="scope.row.filterDesc == '图片异常'">--</span>
+                <span v-else>{{
+                  scope.row.algType &&
+                  (scope.row.algType.includes("infra") ||
+                    scope.row.algType === "meter" ||
+                    scope.row.algType === "gis_meter" ||
+                    scope.row.algType === "gis_meter2" ||
+                    scope.row.algType === "correction" ||
+                    scope.row.algType === "switch" ||
+                    scope.row.algType === "isolator" ||
+                    scope.row.algType === "xb")
+                    ? scope.row.resValue
+                    : "--"
+                }}</span>
+              </template>
+            </el-table-column>
+            <!-- 状态列 -->
+            <el-table-column
+              label="状态"
+              align="center"
+              prop="pointStatus"
+              min-width="120"
+            >
+              <template slot-scope="scope">
+                <div
+                  v-if="scope.row.pointStatus == 0"
+                  class="point-danger"
+                  style="color: #e93b3b"
+                >
+                  <span
+                    class="status-dot"
+                    style="background-color: #e93b3b"
+                  ></span>
+                  异常
+                </div>
+                <div
+                  v-else-if="scope.row.pointStatus == 1"
+                  class="point-success"
+                  style="color: #3CA600"
+                >
+                  <span
+                    class="status-dot"
+                    style="background-color: #3CA600"
+                  ></span>
+                  正常
+                </div>
+                <div
+                  v-else-if="scope.row.pointStatus == 2"
+                  class="point-danger"
+                  style="color: #e93b3b"
+                >
+                  <span
+                    class="status-dot"
+                    style="background-color: #e93b3b"
+                  ></span>
+                  待人工确认
+                </div>
+                <div
+                  v-else-if="scope.row.pointStatus == 3"
+                  class="point-success"
+                  style="color: #3CA600"
+                >
+                  <span
+                    class="status-dot"
+                    style="background-color: #3CA600"
+                  ></span>
+                  忽略
+                </div>
+                <div
+                  v-else-if="scope.row.pointStatus == 4"
+                  class="point-danger"
+                  style="color: #e93b3b"
+                >
+                  <span
+                    class="status-dot"
+                    style="background-color: #e93b3b"
+                  ></span>
+                  跟踪
+                </div>
+                <div
+                  v-else-if="scope.row.pointStatus == 5"
+                  class="point-danger"
+                  style="color: #e93b3b"
+                >
+                  <span
+                    class="status-dot"
+                    style="background-color: #e93b3b"
+                  ></span>
+                  确认
+                </div>
+                <div
+                  v-else-if="scope.row.pointStatus == 6"
+                  class="point-danger"
+                  style="color: #e93b3b"
+                >
+                  <span
+                    class="status-dot"
+                    style="background-color: #e93b3b"
+                  ></span>
+                  缺陷
+                </div>
+                <div v-else class="point-default" style="color: #7f8c9a">
+                  <span
+                    class="status-dot"
+                    style="background-color: #7f8c9a"
+                  ></span>
+                  --
+                </div>
+              </template>
+            </el-table-column>
+            <!-- 纠偏列 -->
+            <el-table-column
+              label="纠偏"
+              align="center"
+              width="120"
+              v-if="baseInfo.algName == 'correction'"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  v-if="
+                    scope.row.resStatus === 3 || scope.row.resStatus === '3'
+                  "
+                  size="small"
+                  type="primary"
+                  @click.stop="getCorrection(scope.row)"
+                  >纠偏</el-button
+                >
+                <AsyncImage
+                  v-else-if="
+                    scope.row.resStatus === 4 || scope.row.resStatus === '4'
+                  "
+                  class="table-img"
+                  :src="scope.row.originalValue"
+                  :supportPreview="false"
+                  @click="onImagePreviewClicked(scope.row.originalValue)"
+                ></AsyncImage>
+                <span v-else class="no-data">无需纠偏</span>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <CardPagination
+            v-show="pointTotal > 0"
+            :total="pointTotal"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getPointList"
+          />
+        </div>
+      </div>
+    </div>
+    <el-dialog
+      title="图片预览"
+      :visible.sync="showPreviewImages"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      custom-class="card-dialog card-page"
+      width="70%"
+      append-to-body
+    >
+      <!-- 根据 isInfrared 判断使用哪个预览组件 -->
+      <ImagePreviewZoomTemperature
+        v-if="showPreviewImages && isInfraredPreview"
+        :imageUrls="showImgesUrls"
+        :selectImgPosition="previewImagePos"
+        :showTemperatureTool="true"
+        :imageName="currentImageName"
+      />
+      <ImagePreviewZoom
+        v-else-if="showPreviewImages && !isInfraredPreview"
+        :imageUrls="showImgesUrls"
+        :selectImgPosition="previewImagePos"
+        :showTemperatureTool="false"
+      />
+    </el-dialog>
+  </CardBox>
+</template>
+
+<script>
+import CardBox from "../components/cardBox.vue";
+import CardPagination from "../components/CardPagination/index.vue";
+import debounce from "lodash.debounce";
+import { taskInfoList, taskInfoExport } from "@/api/videosMonitor/index";
+import { taskCorrection } from "@/api/screen/screen";
+import ImagePreviewZoom from "@/views/cards/components/ImagePreviewZoom/index.vue";
+import ImagePreviewZoomTemperature from "@/views/cards/components/ImagePreviewZoomTemperature/index.vue";
+import { getPatrolPointName } from "@/api/analysis/index";
+import moment from "moment";
+
+export default {
+  name: "InspectionTaskDetail",
+  components: {
+    CardBox,
+    CardPagination,
+    ImagePreviewZoom,
+    ImagePreviewZoomTemperature,
+  },
+  props: {
+    info: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      currentImageName: "",
+      isInfraredPreview: false,
+      searchSourceData: {
+        listPointName: [],
+        listPointStatus: [],
+      },
+      baseInfo: {
+        taskName: "",
+        patrolTypeText: "",
+        startTime: "",
+        duration: "",
+        algName: "",
+      },
+      taskInfo: null,
+      tableHeight: null,
+      pointDataList: [],
+      loading: true,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        pointName: null,
+        pointStatus: null,
+        abnormal: 0,
+        taskPatrolledId: null,
+        posType: null,
+        lineId: null,
+      },
+      pointTotal: 0,
+      showPreviewImages: false,
+      showImgesUrls: [],
+      previewImagePos: 0,
+      selectPointInfo: {},
+      summaryData: {
+        totalPoint: 0,
+        executedPoint: 0,
+        unexecutedPoint: 0,
+      },
+      hasSummaryData: false,
+    };
+  },
+  created() {
+    if (!this.info) {
+      this.taskInfo = JSON.parse(sessionStorage.getItem("selectInfo"));
+    } else {
+      this.taskInfo = this.info;
+    }
+
+    this.parseSummaryFromTaskInfo();
+
+    this.setTableHeight = debounce(this.setTableHeight, 300);
+    window.addEventListener("resize", this.setTableHeight);
+    this.queryParams.taskPatrolledId = this.taskInfo.taskPatrolledId;
+    this.queryParams.posType = this.taskInfo.posType;
+    this.queryParams.lineId = this.taskInfo.lineId;
+    this.getPointList();
+    this.initBaseInfo();
+  },
+  mounted() {
+    this.setTableHeight();
+    this.fnGetPatrolPointName();
+  },
+  destroyed() {
+    this.setTableHeight.cancel();
+    window.removeEventListener("resize", this.setTableHeight);
+  },
+  methods: {
+    parseSummaryFromTaskInfo() {
+      this.hasSummaryData = false;
+      this.summaryData = {
+        totalPoint: 0,
+        executedPoint: 0,
+        unexecutedPoint: 0,
+      };
+
+      if (this.taskInfo && this.taskInfo.summary) {
+        try {
+          let summaryObj;
+          if (typeof this.taskInfo.summary === "string") {
+            summaryObj = JSON.parse(this.taskInfo.summary);
+          } else {
+            summaryObj = this.taskInfo.summary;
+          }
+
+          if (summaryObj && typeof summaryObj === "object") {
+            const hasValidData =
+              summaryObj.totalPoint !== undefined ||
+              summaryObj.executedPoint !== undefined ||
+              summaryObj.unexecutedPoint !== undefined;
+
+            if (hasValidData) {
+              this.summaryData = {
+                totalPoint:
+                  summaryObj.totalPoint !== undefined
+                    ? summaryObj.totalPoint
+                    : 0,
+                executedPoint:
+                  summaryObj.executedPoint !== undefined
+                    ? summaryObj.executedPoint
+                    : 0,
+                unexecutedPoint:
+                  summaryObj.unexecutedPoint !== undefined
+                    ? summaryObj.unexecutedPoint
+                    : 0,
+              };
+              this.hasSummaryData = true;
+            }
+          }
+        } catch (error) {
+          console.error("解析 taskInfo.summary 失败：", error);
+          this.hasSummaryData = false;
+        }
+      }
+    },
+
+    calculateDuration(startTime, endTime) {
+      if (!startTime || !endTime) {
+        return "--";
+      }
+      try {
+        const start = moment(startTime);
+        const end = moment(endTime);
+        const durationMinutes = end.diff(start, "minutes");
+        if (durationMinutes < 0) {
+          return "--";
+        }
+        return `${durationMinutes}分钟`;
+      } catch (error) {
+        console.error("计算耗时出错:", error);
+        return "--";
+      }
+    },
+
+    initBaseInfo() {
+      let patrolTypeText = "";
+      const patrolType = Number(this.taskInfo.patrolType);
+      switch (patrolType) {
+        case 1:
+          patrolTypeText = "例行巡视";
+          break;
+        case 2:
+          patrolTypeText = "特殊巡视";
+          break;
+        case 3:
+          patrolTypeText = "专项巡视";
+          break;
+        case 4:
+          patrolTypeText = "自定义巡视";
+          break;
+        case 5:
+          patrolTypeText = "联动任务";
+          break;
+        case 6:
+          patrolTypeText = "静默任务";
+          break;
+        default:
+          patrolTypeText = "--";
+      }
+
+      const duration = this.calculateDuration(
+        this.taskInfo.startTime,
+        this.taskInfo.endTime
+      );
+
+      this.baseInfo = {
+        taskName: this.taskInfo.taskName || "--",
+        patrolTypeText: patrolTypeText,
+        startTime: this.taskInfo.startTime || "--",
+        duration: duration,
+        algName: this.taskInfo.algName,
+      };
+    },
+
+    // el-autocomplete 的查询方法
+    querySearch(queryString, cb) {
+      const list = this.searchSourceData.listPointName || [];
+
+      // 如果输入为空，返回所有建议
+      if (!queryString || queryString.trim() === '') {
+        const results = list.map(item => ({ value: item }));
+        cb(results);
+        return;
+      }
+
+      // 过滤匹配的建议
+      const results = list
+        .filter(item => item.toLowerCase().includes(queryString.toLowerCase()))
+        .map(item => ({ value: item }));
+
+      cb(results);
+    },
+
+    // 输入事件 - 用户输入时触发
+    handleInputPointName(value) {
+      // 直接更新 queryParams，允许用户自由编辑
+      if (value === null || value === undefined || value === '') {
+        this.queryParams.pointName = null;
+      } else {
+        this.queryParams.pointName = value;
+      }
+    },
+
+    // 选择事件 - 从下拉列表选择时触发
+    handleSelectPointName(item) {
+      // item 是选中的对象，包含 value 属性
+      const value = item && item.value ? item.value : item;
+
+      if (value && value.trim() !== '') {
+        this.queryParams.pointName = value;
+        console.log("选中的点位名称:", value);
+        // 执行查询
+        this.handleQuery();
+      }
+    },
+
+    // 清除事件
+    handleClearPointName() {
+      this.queryParams.pointName = null;
+      // 执行查询
+      this.$nextTick(() => {
+        this.handleQuery();
+      });
+    },
+
+    // 搜索按钮点击
+    handleSearchClick() {
+      // 直接使用 queryParams.pointName 的值
+      this.handleQuery();
+    },
+
+    handleSelectPointStatus(value) {
+      this.queryParams.pointStatus = value;
+      this.handleQuery();
+    },
+    handleBlurPointStatus() {
+      this.handleQuery();
+    },
+
+    setCurrentRowClassName({ row }) {
+      return row.lineId === this.selectPointInfo.lineId ? "current-row" : "";
+    },
+
+    fnGetPatrolPointName() {
+      const params = {
+        taskPatrolledId: this.queryParams.taskPatrolledId,
+        posType: this.queryParams.posType,
+        lineId: this.queryParams.lineId,
+      };
+      getPatrolPointName(params).then((res) => {
+        this.searchSourceData.listPointName = res.data?.listPointName || [];
+        this.searchSourceData.listPointStatus = res.data?.listPointStatus || [];
+      });
+    },
+
+    getIndex(index) {
+      return (
+        index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
+      );
+    },
+
+    getAnalyResult(info) {
+      const specialAlgTypes = [
+        "meter",
+        "infra 1800",
+        "infra yu3",
+        "infra_camera",
+        "infra_camera_reverse",
+        "infrared2",
+        "gis_meter",
+        "gis_meter2",
+      ];
+      const resValueStatuses = [1, 4, 5];
+      const status = Number(info.pointStatus);
+      if (info.algType === "switch") {
+        return info.resValue ? info.resValue : "--";
+      }
+      if (info.algType === "infrared") {
+        if (resValueStatuses.includes(status)) {
+          return info.resValue ? info.resValue : "--";
+        } else {
+           return info.filterDesc ? info.filterDesc : "--";
+        }
+      }
+
+      if (specialAlgTypes.includes(info.algType)) {
+        if (resValueStatuses.includes(status)) {
+          return info.resValue ? info.resValue : "--";
+        } else {
+          return info.desc ? info.desc : "--";
+        }
+      }
+
+      return info.desc ? info.desc : "--";
+    },
+
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getPointList();
+    },
+
+    resetQuery() {
+      this.queryParams.pointName = null;
+      this.queryParams.pointStatus = null;
+      this.fnGetPatrolPointName();
+      this.handleQuery();
+    },
+
+    exportData() {
+      this.download(
+        "patrol/task/taskInfoExport",
+        { ...this.queryParams },
+        `任务详情_${new Date().getTime()}.xlsx`
+      );
+    },
+
+    getPointList() {
+      this.loading = true;
+      taskInfoList(this.queryParams)
+        .then((res) => {
+          this.pointDataList = res.rows || [];
+          this.pointTotal = res.total || 0;
+          if (this.pointDataList.length > 0 && !this.selectPointInfo.lineId) {
+            this.selectPointInfo = this.pointDataList[0];
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+
+    getCorrection(row) {
+      this.loading = true;
+      const data = {
+        pointId: row.pointId,
+        lineId: row.lineId,
+        taskPatrolId: row.taskPatrolId,
+      };
+      taskCorrection(data)
+        .then(() => {
+          this.$modal.msgSuccess("纠偏成功");
+          this.getPointList();
+        })
+        .catch(() => {
+          this.$modal.msgError("纠偏失败");
+          this.loading = false;
+        });
+    },
+
+    onPointTableRowClicked(row) {
+      this.selectPointInfo = row;
+    },
+
+    setTableHeight() {
+      if (this.$refs.pointTableRef) {
+        this.tableHeight = this.$refs.pointTableRef.clientHeight - 40;
+      }
+    },
+
+    onImagePreviewClicked(imgUrl, isInfrared = false) {
+      if (!imgUrl) return;
+      this.previewImagePos = 0;
+      this.showImgesUrls = [imgUrl];
+      this.isInfraredPreview = isInfrared;
+      this.showPreviewImages = true;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page-content {
+  width: 100%;
+  height: 100%;
+}
+.page-container {
+  height: 100%;
+  display: flex;
+  gap: 15px;
+}
+::v-deep .card-box-title-box {
+  display: none !important;
+}
+.page-left {
+  flex: 1;
+  width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #091318;
+  padding: 0 15px;
+  .img-title {
+    font-family: PingFang SC;
+    font-weight: 500;
+    font-size: 15px;
+    color: #ffffff;
+    padding: 10px 0;
+    display: flex;
+    align-items: center;
+  }
+  .img-title:before {
+    content: "";
+    width: 16px;
+    height: 16px;
+    margin-right: 10px;
+    background-image: url("../assets/icon-title-1.png");
+    background-size: cover;
+  }
+  .img-box {
+    flex: 1;
+    height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    .img-wrap-box {
+      flex: 1;
+      height: 0;
+      display: flex;
+      flex-direction: column;
+      .img-header-box {
+        display: flex;
+        height: 35px;
+        align-items: center;
+        background-color: rgba(39, 129, 65, 0.7);
+        padding: 0 10px;
+        .img-header-left {
+          color: #fff;
+        }
+        .img-header-right {
+          flex: 1;
+          text-align: right;
+          color: #fff;
+        }
+      }
+      .img-wrap {
+        flex: 1;
+        height: 0;
+        background-color: #0b2e3e;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        ::v-deep .el-image__error {
+          background-color: #0b2e3e;
+        }
+      }
+    }
+  }
+  .img-footer {
+    padding: 10px 0;
+    color: #d5e3e5;
+    display: flex;
+    .img-footer-time {
+      flex: 1;
+    }
+  }
+}
+.page-right {
+  flex: 4;
+  width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .title-row {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 20px;
+    padding-bottom: 15px;
+    .title-wrap {
+      font-family: PingFang SC;
+      font-weight: bold;
+      font-size: 14px;
+      color: #40e5f0;
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+    }
+    .title-wrap:before {
+      content: "";
+      width: 16px;
+      height: 16px;
+      margin-right: 10px;
+      background-image: url("../assets/icon-title-2.png");
+      background-size: cover;
+    }
+    .info-items {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 24px;
+      flex: 1;
+      .info-item {
+        display: flex;
+        align-items: baseline;
+        .info-label {
+          color: #7f8c9a;
+          font-size: 14px;
+          margin-right: 8px;
+        }
+        .info-value {
+          color: #e1f5fe;
+          font-size: 14px;
+          font-weight: 500;
+        }
+      }
+      .info-item-right {
+        margin-left: auto;
+      }
+    }
+  }
+
+  .query-box {
+    margin-bottom: 15px;
+    .result-query-box {
+      ::v-deep .el-form-item {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.table-card {
+  flex: 1;
+  height: 0;
+  ::v-deep .el-card__body {
+    height: 100%;
+  }
+}
+
+.status-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+
+.point-danger,
+.point-success,
+.point-default {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.table-img {
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.no-data {
+  color: #7f8c9a;
+}
+
+// el-autocomplete 样式
+::v-deep .el-autocomplete {
+  width: 189px;
+
+  .el-input__inner {
+    background-color: #1a2530 !important;
+    border-color: #34495e !important;
+    color: #c6d3ec !important;
+
+    &::placeholder {
+      color: #7b8ca8 !important;
+    }
+  }
+
+  .el-input__suffix {
+    color: #c6d3ec !important;
+  }
+}
+
+::v-deep .current-row {
+  background-color: #124451 !important;
+  td {
+    background-color: #124451 !important;
+    border-color: #1a5969 !important;
+  }
+  &:hover td {
+    background-color: #165666 !important;
+  }
+}
+
+::v-deep .card-table {
+  .el-table__row.current-row {
+    color: #e1f5fe;
+    .cell {
+      color: #e1f5fe;
+    }
+  }
+}
+
+.detail-reset-btn,
+.detail-reset-btn:hover,
+.detail-reset-btn:focus {
+  border: 1px solid transparent !important;
+  background:
+    linear-gradient(#01016b, #01016b) padding-box,
+    linear-gradient(135deg, #3988ff, #0351c6) border-box !important;
+  color: #43c0ff !important;
+}
+</style>
+
+<!-- 全局样式：用于 el-autocomplete 下拉菜单 -->
+<style lang="scss">
+.custom-autocomplete-popper {
+  background-color: #222f3e !important;
+  border: 1px solid #34495e !important;
+  border-radius: 4px !important;
+
+  .el-scrollbar {
+    .el-scrollbar__view {
+      li {
+        background-color: #222f3e !important;
+        color: #c6d3ec !important;
+        font-size: 14px;
+        padding: 0 20px;
+        height: 34px;
+        line-height: 34px;
+
+        &:hover {
+          background-color: #2c3e50 !important;
+        }
+
+        &.highlighted {
+          background-color: #1a5969 !important;
+          color: #40e5f0 !important;
+        }
+      }
+    }
+  }
+
+  .popper__arrow {
+    border-bottom-color: #34495e !important;
+
+    &::after {
+      border-bottom-color: #222f3e !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/cards/task_statistics/task_status.vue b/src/views/cards/task_statistics/task_status.vue
new file mode 100644
index 0000000..66d5291
--- /dev/null
+++ b/src/views/cards/task_statistics/task_status.vue
@@ -0,0 +1,108 @@
+<template>
+  <div :class="['status_container', type]">
+    <div class="badge"></div>
+    <div class="text">
+      <slot> </slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  // "1": "success",//已执行
+  // "2": "",//正在执行 默认是正在执行
+  // "3": "warning",//暂停
+  // "4": "info",//终止
+  // "5": "notrun",//未执行
+  // "6": "danger"//已超期
+  props: {
+    type: [String],
+  },
+};
+</script>
+<style lang="scss" scoped>
+.status_container {
+  justify-content: center;
+  justify-items: center;
+  align-content: center;
+  align-items: center;
+  display: flex;
+
+  .badge {
+    margin-top: 1px;
+    margin-right: 5px;
+    width: 2px;
+    height: 2px;
+    background: #007df1;
+    border: 3px solid rgba(2, 139, 250, 0.2);
+    border-radius: 4px;
+  }
+
+  .text {
+    font-family: "PingFang SC";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    color: #007df1;
+  }
+
+  &.success {
+    .badge {
+      /* 绿色 */
+      background: #3ca600;
+      border-color: rgba(60, 166, 0, 0.2);
+    }
+
+    .text {
+      color: #3ca600;
+    }
+  }
+
+  &.warning {
+    .badge {
+      /* 警告色 */
+      background: #eba714;
+      border-color: rgba(235, 202, 53, 0.2);
+    }
+
+    .text {
+      color: #eba714;
+    }
+  }
+
+  &.info {
+    .badge {
+      /* 终止色 */
+      background: #999;
+      border-color: rgba(0, 0, 0, 0.2);
+    }
+
+    .text {
+      color: #999;
+    }
+  }
+
+  &.notrun {
+    .badge {
+      /* 正在执行 */
+      background: #929292;
+      border-color: rgba(138, 138, 138, 0.2);
+    }
+
+    .text {
+      color: #929292;
+    }
+  }
+
+  &.danger {
+    .badge {
+      /* 已超期 */
+      background: #ff5e5e;
+      border-color: rgba(255, 91, 91, 0.2);
+    }
+
+    .text {
+      color: #ff5e5e;
+    }
+  }
+}
+</style>