fix:

apps/web-ele/src/utils/dicts.ts

@@ -37,6 +37,7 @@ export const taskLevelOptions = [
 ];
 
 export const taskStatusOptions: any = [
+  { label: '已取消', value: -1, color: 'primary' },
   { label: '已取消', value: 0, color: 'primary' },
   { label: '待处理', value: 1, color: 'warning' },
   { label: '超期未处理', value: 2, color: 'danger' },

apps/web-ele/src/views/schedule/detail/components/check.vue

@@ -1,7 +1,15 @@
 <script lang="ts" setup>
 import { onMounted, ref, watch } from 'vue';
 
-import { ElImage, ElTabPane, ElTabs, ElTag } from 'element-plus';
+import { QuestionFilled } from '@element-plus/icons-vue';
+import {
+  ElButton,
+  ElDialog,
+  ElIcon,
+  ElImage,
+  ElTabPane,
+  ElTabs,
+} from 'element-plus';
 
 import {
   getCheckSubItemsByTaskId,
@@ -25,17 +33,44 @@ const activeArea = ref<any>('');
 // 获取当前区域的数据
 const currentCheckList: any = ref([]);
 
+// 当前选中的检查项
+const currentCheckItem = ref<any>({});
+
+// 统计数据
+const statics = ref({
+  score: 0,
+  totalScore: 0,
+  totalItems: 0,
+  photoCount: 0,
+});
+
+// 弹窗显示状态
+const popupShow = ref({
+  centerShow: false,
+});
+
+// 弹窗内容
+const toastHtml = ref('');
+
 // 切换区域时更新数据
 const handleAreaChange = (area: any) => {
   activeArea.value = area;
-  currentCheckList.value =
-    checkSubItems.value.find((item: any) => item.id === area)?.items || [];
+  const currentItem = checkSubItems.value.find((item: any) => item.id === area);
+  currentCheckList.value = currentItem?.items || [];
+  currentCheckItem.value = currentItem || {};
+};
+
+// 处理说明按钮点击
+const helpClick = (item: any) => {
+  toastHtml.value = item.checkDescription;
+  popupShow.value.centerShow = true;
 };
 
-// // 处理说明按钮点击
-// const handleExplain = (item: CheckItem) => {
-//   console.log('查看说明:', item);
-// };
+// 关闭说明弹窗
+const helpClose = () => {
+  toastHtml.value = '';
+  popupShow.value.centerShow = false;
+};
 
 const checkSubItems: any = ref([]);
 
@@ -44,40 +79,85 @@ const init = () => {
   Promise.all([
     getChecktItemsByTaskId({
       checkId: props.taskDetail.id,
+      pageSize: 1000,
     }),
     getCheckSubItemsByTaskId({
       checkId: props.taskDetail.id,
+      pageSize: 1000,
     }),
   ]).then(([checkItemsRes, checkSubItemsRes]) => {
     // 处理检查项数据
     checkSubItems.value = checkSubItemsRes.rows || [];
+
+    // 初始化统计数据
+    statics.value = {
+      score: 0,
+      totalScore: 0,
+      totalItems: 0,
+      photoCount: 0,
+    };
+
     checkSubItems.value.forEach((item: any) => {
+      // 初始化每个区域的统计数据
+      item.statics = {
+        score: 0,
+        totalScore: 0,
+        totalItems: 0,
+        photoCount: 0,
+      };
+
+      // 过滤检查项
       item.items =
         checkItemsRes.rows?.filter(
           (subItem: any) => subItem.subItemId === item.id,
         ) || [];
-    });
-    // 更新检查项数据
-    activeArea.value = checkSubItems.value[0].id;
-    currentCheckList.value = checkSubItems.value[0].items || [];
-  });
-};
 
-const getPhotos = (item: any): Array<{ isExample: boolean; url: string }> => {
-  const list: Array<{ isExample: boolean; url: string }> = (
-    item.exampleImageUrl || []
-  ).map((url: string) => ({
-    url,
-    isExample: true,
-  }));
-  (item.photoUrl || []).forEach((url: string) => {
-    list.push({
-      url,
-      isExample: false,
+      // 处理每个检查项
+      item.items.forEach((task: any) => {
+        // 计算得分
+        if (task.checkResult === 2) {
+          item.statics.score += task.score || 0;
+          item.statics.totalScore += (task.limitScore || 0).length;
+        }
+
+        // 计算异常数
+        if (task.result === 2) {
+          item.statics.totalItems += 1;
+        }
+
+        // 计算无拍照数
+        if (
+          task.hasPhoto > 0 &&
+          (!task.photoUrl || task.photoUrl.length === 0)
+        ) {
+          item.statics.photoCount += 1;
+        }
+
+        // 确保score和photoUrl字段存在
+        task.score = task.score || null;
+
+        // 处理photoUrl格式
+        if (task.photoUrl && Array.isArray(task.photoUrl)) {
+          task.photoUrl = task.photoUrl.map((url: any) =>
+            typeof url === 'string' ? { url } : url,
+          );
+        }
+      });
+
+      // 累加总统计数据
+      statics.value.score += item.statics.score;
+      statics.value.totalScore += item.statics.totalScore;
+      statics.value.totalItems += item.statics.totalItems;
+      statics.value.photoCount += item.statics.photoCount;
     });
-  });
 
-  return list;
+    // 更新检查项数据
+    if (checkSubItems.value.length > 0) {
+      activeArea.value = checkSubItems.value[0].id;
+      currentCheckList.value = checkSubItems.value[0].items || [];
+      currentCheckItem.value = checkSubItems.value[0] || {};
+    }
+  });
 };
 
 // 监听taskDetail.id变化
@@ -85,8 +165,6 @@ watch(
   () => props.taskDetail.id,
   (newId) => {
     if (newId) {
-      // 初始化检查项数据
-      // checkItems.value = props.taskDetail.checkItems || [];
       init();
     }
   },
@@ -99,150 +177,440 @@ onMounted(() => {
 
 <template>
   <div class="check-list-container">
-    <!-- <ElCard class="check-list-card"> -->
-    <!-- 顶部统计 -->
-    <div class="mb-6 flex items-center justify-between">
-      <div class="flex items-center space-x-4">
-        <span class="text-sm text-gray-500">得分:</span>
-        <span class="text-lg font-bold text-gray-800">
-          {{ taskDetail.score }}
-        </span>
-        <span class="text-sm text-gray-500">无拍照数:</span>
-        <span class="text-lg font-bold text-gray-800">
-          {{ taskDetail.noPhotoNumber }}
-        </span>
-        <span class="text-sm text-gray-500">异常总数:</span>
-        <span class="text-lg font-bold text-gray-800">
-          {{ taskDetail.abnormalNumber }}
-        </span>
+    <!-- 顶部固定区域 -->
+    <div class="fixed-area">
+      <!-- 头部信息 -->
+      <div class="head-info">
+        <div class="head-info-stats">
+          <div class="head-info-stat-item">
+            <div class="stat-item-num">
+              {{ statics.photoCount || 0 }}
+            </div>
+            <div class="stat-item-text">无拍照</div>
+          </div>
+          <div class="head-info-stat-item">
+            <div class="stat-item-Middle">
+              <div class="stat-item-num">
+                {{ statics.totalItems || 0 }}
+              </div>
+              <div class="stat-item-text">异常总数</div>
+            </div>
+          </div>
+          <div class="head-info-stat-item">
+            <div class="stat-item-num">
+              {{ statics.score || 0 }} / {{ statics.totalScore || 0 }}
+            </div>
+            <div class="stat-item-text">总得分</div>
+          </div>
+        </div>
       </div>
-      <!-- <ElButton type="primary" size="small"> 上传 </ElButton> -->
+      <!-- 区域切换Tabs -->
+      <ElTabs v-model="activeArea" @tab-change="handleAreaChange" class="mb-6">
+        <ElTabPane
+          v-for="(item, index) in checkSubItems"
+          :label="item.name"
+          :name="item.id"
+          :key="item.id"
+        />
+      </ElTabs>
     </div>
 
-    <!-- 区域切换Tabs -->
-    <ElTabs v-model="activeArea" @tab-change="handleAreaChange" class="mb-6">
-      <ElTabPane
-        v-for="item in checkSubItems"
-        :label="item.name"
-        :name="item.id"
-        :key="item.id"
-      />
-    </ElTabs>
-
     <!-- 检查项列表 -->
-    <div class="check-items">
-      <div
-        v-for="(item, index) in currentCheckList"
-        :key="item.id"
-        class="mb-6"
-      >
-        <!-- 子检查项 -->
-        <div class="space-y-4">
-          <div class="mb-4 rounded-lg border p-4">
-            <div class="mb-2 flex items-start">
-              <div class="mr-2 text-sm font-medium">{{ +index + 1 }}.</div>
-              <ElTag
-                :type="item.result === '1' ? 'success' : 'danger'"
+    <div class="task-container">
+      <div class="task-top-left">
+        <text>
+          异常数
+          <text style="color: #31373d; font-weight: 600">
+            {{ currentCheckItem?.statics?.totalItems || 0 }}
+          </text>
+        </text>
+        <text style="color: #31373d; font-weight: 600"> | </text>
+        <text>
+          得分
+          <text style="color: #31373d; font-weight: 600">
+            {{ currentCheckItem?.statics?.score || 0 }} /
+            {{ currentCheckItem?.statics?.totalScore || 0 }}
+          </text>
+        </text>
+      </div>
+      <div class="tasks">
+        <div
+          v-for="(item, index) in currentCheckList"
+          :key="item.id"
+          class="task-item"
+        >
+          <!-- 任务描述 -->
+          <div class="task-description">
+            <text class="task-number">{{ +index + 1 }}.</text>
+            <text class="task-text">
+              {{ item.tagName ? `【${item.tagName.replace(/,/g, '|')}】` : '' }}
+              {{ item.itemName }}
+              <ElButton
+                v-if="item.checkDescription"
+                type="text"
                 size="small"
-                class="mr-2"
+                @click="helpClick(item)"
+                style="margin-left: 8px; padding: 0"
               >
-                {{ item.result === '1' ? '正常' : '异常' }}
-              </ElTag>
-              <div class="flex-1">
-                <div class="text-sm font-medium">{{ item.itemName }}</div>
-                <div
-                  v-if="item.hasPhoto === 2"
-                  class="mt-1 text-xs text-gray-500"
-                >
-                  {{ '必拍' }}
-                </div>
-              </div>
-            </div>
+                <ElIcon class="is-loading"><QuestionFilled /></ElIcon>
+              </ElButton>
+            </text>
+          </div>
 
-            <!-- 图片展示 -->
-            <div v-if="item.hasPhoto > 0" class="mt-3 flex flex-wrap gap-2">
+          <!-- 操作说明-图片示例 -->
+          <div
+            v-if="item.exampleImageUrl && item.exampleImageUrl.length > 0"
+            class="task-instructions-example"
+          >
+            <div v-if="item.photoPrompt" class="task-instructions">
+              <text class="instructions-text">
+                {{ `拍照：${item.photoPrompt}` }}
+              </text>
+            </div>
+            <div class="example-images">
               <div
-                v-for="(img, imgIndex) in getPhotos(item)"
-                :key="imgIndex"
-                class="relative"
+                v-for="(example, idx) in item.exampleImageUrl"
+                :key="idx"
+                class="example-image"
               >
                 <ElImage
-                  :src="img.url"
-                  :preview-src-list="
-                    (getPhotos(item) || []).map((photo) => photo.url)
-                  "
-                  class="check-image"
+                  :src="example"
+                  :preview-src-list="item.exampleImageUrl"
                   fit="cover"
                 />
-                <ElTag
-                  :type="img.isExample ? 'info' : 'success'"
-                  size="small"
-                  class="absolute right-0 top-0 z-10"
-                  style="
-                    background-color: rgba(255, 255, 255, 0.3);
-                    border: none;
-                    color: white;
-                  "
-                >
-                  {{ img.isExample ? '示例' : '拍照' }}
-                </ElTag>
+                <text class="example-text">示例</text>
               </div>
             </div>
+          </div>
 
-            <div v-else>
-              <div class="text-xs text-gray-500">
-                {{ item.inputItem || '暂无' }}
-              </div>
+          <!-- 已上传图片 -->
+          <div
+            v-if="item.photoUrl && item.photoUrl.length > 0"
+            class="uploaded-images"
+          >
+            <div
+              v-for="(image, idx) in item.photoUrl"
+              :key="idx"
+              class="uploaded-image"
+            >
+              <ElImage
+                :src="typeof image === 'string' ? image : image.url"
+                :preview-src-list="
+                  item.photoUrl.map((img: any) =>
+                    typeof img === 'string' ? img : img.url,
+                  )
+                "
+                fit="cover"
+              />
+            </div>
+          </div>
+
+          <!-- 几号枪 -->
+          <div v-if="item.inputItem" class="whichGun">
+            <text class="whichGun-text">{{ item.inputItem }}</text>
+          </div>
+
+          <!-- 状态 -->
+          <div class="task-status">
+            <div>
+              <text class="status-text">
+                整体：{{
+                  item.result === 1
+                    ? '正常'
+                    : item.result === 2
+                      ? '异常'
+                      : item.result === 3
+                        ? '不适用'
+                        : '-'
+                }}
+              </text>
             </div>
+          </div>
 
-            <!-- 评分信息 -->
-            <!-- <div class="flex items-center mt-3 text-sm">
-                <div class="mr-4">
-                  <span class="text-gray-500">得分:</span>
-                  <span class="font-medium ml-1">{{ subItem.score }}</span>
-                </div>
-                <div>
-                  <span class="text-gray-500">总分:</span>
-                  <span class="font-medium ml-1">{{ subItem.totalScore }}</span>
-                </div>
-              </div> -->
+          <!-- 异常描述 -->
+          <div v-if="item.formOperationIssue?.id" class="anomalyDescription">
+            <div class="anomalyDescription-title">异常描述：</div>
+            <div class="anomalyDescription-content">
+              {{ item.formOperationIssue?.problemDescription || '' }}
+            </div>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- 底部导航 -->
-    <!-- <div class="flex justify-center items-center mt-8 space-x-4">
-        <ElButton type="primary" size="small">上一个</ElButton>
-        <ElButton type="primary" size="small">下一个</ElButton>
-      </div> -->
-    <!-- </ElCard> -->
+    <!-- 说明弹窗 -->
+    <ElDialog v-model="popupShow.centerShow" title="说明" width="600px" center>
+      <div v-html="toastHtml" class="popup-content"></div>
+      <template #footer>
+        <span class="dialog-footer">
+          <ElButton @click="helpClose">我知道了</ElButton>
+        </span>
+      </template>
+    </ElDialog>
   </div>
 </template>
 
 <style scoped lang="scss">
 .check-list-container {
-  width: 100%;
-}
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  overflow: hidden;
 
-.check-list-card {
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
+  .fixed-area {
+    flex-shrink: 0;
+    background-color: #fff;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
 
-.check-items {
-  /* 移除滚动条限制，让内容根据数据高度自适应 */
-}
+  .head-info {
+    width: 100%;
+    padding: 20px 32px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
 
-.check-image {
-  width: 80px;
-  height: 60px;
-  border-radius: 4px;
-  cursor: pointer;
-}
+    .head-info-title {
+      font-size: 24px;
+      font-weight: 500;
+      color: #31373d;
+    }
+
+    .head-info-stats {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      padding: 10px 0;
+
+      .head-info-stat-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .stat-item-Middle {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          border-left: 1px solid #edeef2;
+          border-right: 1px solid #edeef2;
+          padding: 10px 0;
+        }
+
+        .stat-item-num {
+          font-size: 28px;
+          color: #31373d;
+          font-weight: 400;
+        }
+
+        .stat-item-text {
+          font-size: 16px;
+          color: #4e5969;
+          font-weight: 400;
+          margin-top: 4px;
+        }
+      }
+    }
+  }
+
+  .task-container {
+    flex: 1;
+    overflow-y: auto;
+
+    .task-top-left {
+      margin-left: 30px;
+      width: 250px;
+      height: 48px;
+      background-color: #e8f3ff;
+      border-radius: 12px;
+      margin-top: 20px;
+      margin-bottom: 30px;
+      padding: 10px;
+      box-sizing: border-box;
+      color: #4e5969;
+      font-size: 16px;
+      font-weight: 400;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      text {
+        color: #4e5969;
+        font-size: 16px;
+        font-weight: 400;
+
+        text[style*='font-weight: 600'] {
+          color: #31373d;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+
+  .tasks {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .task-item {
+      width: 90%;
+      max-width: 800px;
+      margin-bottom: 30px;
+
+      .task-description {
+        display: flex;
+        margin-bottom: 16px;
+
+        .task-number {
+          font-size: 20px;
+          color: #31373d;
+          margin-right: 8px;
+          font-weight: 500;
+        }
+
+        .task-text {
+          font-size: 18px;
+          font-weight: 400;
+          color: #31373d;
+          line-height: 28px;
+        }
+      }
+
+      .task-instructions-example {
+        width: 100%;
+        background-color: #f5f5f5;
+        padding: 10px;
+        box-sizing: border-box;
+        border-radius: 8px;
+
+        .task-instructions {
+          margin-bottom: 16px;
+
+          .instructions-text {
+            font-size: 16px;
+            color: #4e5969;
+            line-height: 24px;
+          }
+        }
+
+        .example-images {
+          display: flex;
+          gap: 16px;
+          margin-bottom: 16px;
+
+          .example-image {
+            width: 140px;
+            height: 100px;
+            position: relative;
+
+            :deep(.el-image) {
+              width: 100%;
+              height: 100%;
+              border-radius: 8px;
+            }
+
+            .example-text {
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              background-color: rgba(0, 0, 0, 0.5);
+              color: white;
+              font-size: 14px;
+              text-align: center;
+              padding: 4px 0;
+              border-radius: 0 0 8px 8px;
+            }
+          }
+        }
+      }
+
+      .whichGun {
+        width: 100%;
+        height: 60px;
+        background-color: #f5f5f5;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding-left: 10px;
+        padding-right: 10px;
+        box-sizing: border-box;
+        margin-bottom: 10px;
+        border-radius: 8px;
+
+        .whichGun-text {
+          font-size: 16px;
+          color: #4e5969;
+          font-weight: 400;
+        }
+      }
+
+      .task-status {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 10px;
+
+        .status-text {
+          font-size: 16px;
+          font-weight: 400;
+          color: #31373d;
+        }
+      }
+
+      .anomalyDescription {
+        width: 100%;
+        border-bottom: 1px solid #eeeeee;
+        font-size: 16px;
+        padding-bottom: 20px;
+
+        .anomalyDescription-title {
+          font-weight: 500;
+          color: #31373d;
+          margin-bottom: 8px;
+        }
+
+        .anomalyDescription-content {
+          font-weight: 400;
+          color: #4e5969;
+          line-height: 24px;
+        }
+      }
+
+      .uploaded-images {
+        width: 100%;
+        display: flex;
+        gap: 16px;
+        margin-bottom: 16px;
+        overflow-x: auto;
+        padding-bottom: 10px;
+
+        .uploaded-image {
+          flex-shrink: 0;
+          width: 120px;
+          height: 80px;
+
+          :deep(.el-image) {
+            width: 100%;
+            height: 100%;
+            border-radius: 8px;
+          }
+        }
+      }
+    }
+  }
 
-.check-image:hover {
-  opacity: 0.8;
-  transition: opacity 0.3s ease;
+  .popup-content {
+    font-size: 16px;
+    font-weight: 400;
+    color: #343a45;
+    line-height: 24px;
+  }
 }
 </style>

apps/web-ele/src/views/schedule/detail/index.vue

@@ -618,13 +618,13 @@ const handlePlannedTimeClick = () => {
               </ElTag>
               <ElTag
                 :type="
-                  statusConfig[`${taskInfo?.status > 0 || 0}`]?.color || 'info'
+                  statusConfig[`${taskInfo?.status || -1}`]?.color || 'info'
                 "
                 size="small"
                 effect="dark"
               >
                 {{
-                  statusConfig[`${taskInfo.status > 0 || 0}`]?.label ||
+                  statusConfig[`${taskInfo?.status || -1}`]?.label ||
                   taskInfo.status
                 }}
                 <!-- {{ taskInfo.status }} -->