From a089404b021743e4cb9da1d08d287e6219685082 Mon Sep 17 00:00:00 2001
From: SunTao <328867980@qq.com>
Date: Fri, 6 Dec 2024 17:53:47 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=8F=90=E4=BA=A4=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E9=80=9A=E7=9F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/img-screen-dialog.vue          | 216 ++++++++++++++++++
 src/views/big-screen/index.vue                |   6 +-
 .../xj/inspection/task-management/index.vue   |   9 +-
 3 files changed, 226 insertions(+), 5 deletions(-)
 create mode 100644 src/views/big-screen/components/img-screen-dialog.vue

diff --git a/src/views/big-screen/components/img-screen-dialog.vue b/src/views/big-screen/components/img-screen-dialog.vue
new file mode 100644
index 0000000..79e28ef
--- /dev/null
+++ b/src/views/big-screen/components/img-screen-dialog.vue
@@ -0,0 +1,216 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-12-06 16:21:07
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-12-06 17:27:08
+ * @FilePath: \znxjxt-ui\src\views\big-screen\components\img-screen-dialog.vue
+ * @Description: 图片弹窗
+-->
+
+<template>
+  <div class="content">
+    <div class="left-list">
+      <div class="sidebar">
+        <infinite-loading
+          direction="top"
+          @infinite="infiniteHandlerTop"
+        ></infinite-loading>
+        <img
+          v-for="(item, index) in defectData"
+          :key="`${item.id}-${index}`"
+          :src="item.url"
+          :alt="'Image ' + (index + 1)"
+          @click="showImage(index)"
+          :class="{ selected: currentIndex === index }"
+        />
+        <infinite-loading
+          direction="bottom"
+          @infinite="infiniteHandler"
+        ></infinite-loading>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import InfiniteLoading from "vue-infinite-loading";
+import {
+  defeaseList,
+  getSegment,
+  getItemTypes,
+  getMediaIndex,
+} from "@/api/xj/screen/index";
+export default {
+  name: "ImgScreenDialog",
+  components: { InfiniteLoading },
+  props: {
+    bottomTipClick: {
+      type: String,
+      default: "",
+    },
+    imageItem: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      // 左侧图片数据
+      defectData: [],
+      // 当前展示的图片index
+      currentIndex: 0,
+      // 分页绑定
+      params: {
+        page: 1,
+        size: 10,
+      },
+    };
+  },
+  created() {
+    // this.getList();
+    // this.infiniteHandler();
+  },
+  methods: {
+    /**
+     * @description: 向上加载数据
+     * @param {*}
+     * @return {*}
+     */
+    infiniteHandlerTop($state) {
+      if (this.params.page >= 2) {
+        const data = {
+          classType: this.bottomTipClick,
+          ...this.imgForm,
+          ...this.params,
+        };
+        defeaseList(data)
+          .then(({ code, data }) => {
+            if (code === 200) {
+              this.params.page -= 1;
+              this.defectData.unshift(...data.aim);
+              $state.loaded();
+            } else {
+              $state.complete();
+            }
+          })
+          .finally(() => {
+            this.showImage(this.currentIndex);
+          });
+      }
+    },
+
+    /**
+     * @description: 向下加载更多图片
+     * @param {*}
+     * @return {*}
+     */
+    infiniteHandler($state) {
+      const data = {
+        classType: this.bottomTipClick,
+        ...this.imgForm,
+        ...this.params,
+      };
+      defeaseList(data)
+        .then(({ code, data }) => {
+          if (code === 200) {
+            this.params.page += 1;
+            this.defectData.push(...data.aim);
+            $state.loaded();
+          } else {
+            $state.complete();
+          }
+        })
+        .finally(() => {
+          this.showImage(this.currentIndex);
+        });
+    },
+
+    /**
+     * @description: 中间显示图片
+     * @param {*} index
+     * @return {*}
+     */
+    showImage(index) {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  // height: 54rem;
+  height: calc(100vh - 3rem);
+  display: flex;
+  flex-direction: row;
+  background-color: #2e3a46;
+}
+
+.left-list {
+  width: 16rem;
+  height: 100%;
+
+  .img-top {
+    width: 100%;
+    height: 2.5rem;
+    display: flex;
+    justify-content: center;
+
+    .img-top-div {
+      cursor: pointer;
+      width: 30%;
+      height: 90%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 1px solid #00aaff;
+      border-radius: 4px;
+      color: #ffffff;
+    }
+
+    .img-top-div-click {
+      background-color: rgb(69, 91, 140);
+    }
+  }
+
+  .sidebar {
+    width: 15.5rem;
+    height: calc(100% - 2.5rem);
+    // height: 815px;
+    background-color: #1f292e;
+    padding: 10px;
+    overflow-y: auto;
+  }
+
+  .sidebar::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .sidebar::-webkit-scrollbar-track {
+    background: #2e3a46;
+    border-radius: 10px;
+  }
+
+  .sidebar::-webkit-scrollbar-thumb {
+    background: #444c51;
+    border-radius: 10px;
+  }
+
+  .sidebar::-webkit-scrollbar-thumb:hover {
+    background: #00aaff;
+  }
+
+  .sidebar img {
+    width: 100%;
+    margin-bottom: 5px;
+    cursor: pointer;
+    border-radius: 3px;
+    transition: transform 0.2s, border 0.2s;
+    box-sizing: border-box;
+  }
+
+  .sidebar img.selected {
+    border: 3px solid #00aaff;
+    transform: scale(1.05);
+  }
+}
+</style>
diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue
index 9d883bb..84601a7 100644
--- a/src/views/big-screen/index.vue
+++ b/src/views/big-screen/index.vue
@@ -27,11 +27,11 @@
               <div class="message-content">
                 <fssm-scroll style="max-height: 12rem;">
                   <div class="message-item" v-for="(item, index) in messageList" :key="`message-item-${index}`">
-                    <div class="item-top" @click="handleMessageItemClick(item.status)">
+                    <div class="item-top" @click="handleMessageItemClick(item.notificationType)">
                       <div class="index">
                         <!-- <i v-if="item.title === '成功'" style="color: #67c23a" class="el-icon-success"></i> -->
-                        <i v-if="item.notificationType === 'WARNING'" style="color: #e6a23c" class="el-icon-info"></i>
-                        <i v-if="item.notificationType === 'REMIND'" style="color: #909399" class="el-icon-warning"></i>
+                        <i v-if="item.notificationType === 'REMIND'" style="color: #e6a23c" class="el-icon-info"></i>
+                        <i v-if="item.notificationType === 'WARNING'" style="color: #909399" class="el-icon-warning"></i>
                         <!-- <i v-if="item.title === '错误'" style="color: #f56c6c" class="el-icon-error"></i> -->
                       </div>
                       <div class="time">
diff --git a/src/views/xj/inspection/task-management/index.vue b/src/views/xj/inspection/task-management/index.vue
index f0c6293..10426b1 100644
--- a/src/views/xj/inspection/task-management/index.vue
+++ b/src/views/xj/inspection/task-management/index.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 09:48:43
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-06 09:20:27
+ * @LastEditTime: 2024-12-06 17:19:25
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\index.vue
  * @Description: 巡检管理-巡检任务
 -->
@@ -94,6 +94,10 @@
       <el-table-column label="巡检终点" align="center" prop="stakeEnd" />
       <el-table-column label="车牌号码" align="center" prop="plateNo">
       </el-table-column>
+      <el-table-column label="病害数" align="defectCount" prop="plateNo">
+      </el-table-column>
+      <el-table-column label="新增病害数" align="newDefectCount" prop="plateNo">
+      </el-table-column>
       <el-table-column label="任务id" align="center" prop="extId" />
       <el-table-column
         label="操作"
@@ -440,7 +444,8 @@ export default {
         .then((res) => {
           const link = document.createElement("a");
           const blob = new Blob([res], {
-            type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+            // type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+            type: "application/zip",
           });
           link.style.display = "none";
           link.href = URL.createObjectURL(blob);