Revert "fix: 图片增加蒙层，图片文字阈值可拖拽"

This reverts commit 1cca2fc1d0.

src/views/task/content/Content.vue

@@ -1,108 +1,103 @@
 <script lang="ts" setup>
-import {
+import { computed, onMounted, onUnmounted, reactive, ref, unref, watch } from 'vue'
-  computed,
+import { chunk, clone } from 'lodash-es'
-  onMounted,
+import { useDialog, useMessage } from 'naive-ui'
-  onUnmounted,
+import { useRoute, useRouter } from 'vue-router'
-  reactive,
+import BatchModal from '../modal/BatchModal.vue'
-  ref,
+import CustomSettingModal from '../modal/CustomSettingModal.vue'
-  unref,
+import PictureTable from './PictureTable.vue'
-  watch,
+import TaskTable from './TaskTable.vue'
-} from "vue";
+import History from './History.vue'
-import { chunk, clone } from "lodash-es";
+import NotPassed from '@/components/Approval/NotPassed.vue'
-import { useDialog, useMessage } from "naive-ui";
+import { getAllfieldList, getfieldList } from '@/api/home/filter'
-import { useRoute, useRouter } from "vue-router";
+import { TASK_STATUS_OBJ } from '@/enums/index'
-import BatchModal from "../modal/BatchModal.vue";
-import CustomSettingModal from "../modal/CustomSettingModal.vue";
-import PictureTable from "./PictureTable.vue";
-import TaskTable from "./TaskTable.vue";
-import History from "./History.vue";
-import NotPassed from "@/components/Approval/NotPassed.vue";
-import { getAllfieldList, getfieldList } from "@/api/home/filter";
-import { TASK_STATUS_OBJ } from "@/enums/index";
 
 import {
   audit,
   dubiousfileyd,
   getSimilarityList,
   getTaskDetailInfo,
-} from "@/api/task/task";
+} from '@/api/task/task'
-import { useTask } from "@/store/modules/task";
+import { useTask } from '@/store/modules/task'
-import { useUser } from "@/store/modules/user";
+import { useUser } from '@/store/modules/user'
-import { isEmpty } from "@/utils";
+import { isEmpty } from '@/utils'
-import { formatToDateHMS } from "@/utils/dateUtil";
+import { formatToDateHMS } from '@/utils/dateUtil'
-import { hideDownload } from "@/utils/image";
+import { hideDownload } from '@/utils/image'
-
+
-const emit = defineEmits(["setAsideItemName"]);
+const emit = defineEmits(['setAsideItemName'])
-
+
-const router = useRouter();
+const router = useRouter()
-
+
-const batch = ref(false);
+const batch = ref(false)
-const selectItems = ref<any[]>([]);
+const selectItems = ref<any[]>([])
-const message = useMessage();
+const message = useMessage()
-const dialog = useDialog();
+const dialog = useDialog()
-const notPassModalRef = ref(null);
+const notPassModalRef = ref(null)
-const batchModalRef: any = ref(null);
+const batchModalRef: any = ref(null)
-const totalCount = ref(0);
+const totalCount = ref(0)
-const taskId: any = ref(""); // 任务id
+const taskId: any = ref('') // 任务id
-const packageId: any = ref(""); // 包id
+const packageId: any = ref('') // 包id
-const CustomSettingModalRef = ref(null);
+const CustomSettingModalRef = ref(null)
-const taskTableData = ref<any[]>([]);
+const taskTableData = ref<any[]>([])
-const route = useRoute();
+const route = useRoute()
-const isDetail = ref(false); // 是否是详情
+const isDetail = ref(false) // 是否是详情
 const sortBy: any = {
-  orderType: "desc",
+  orderType: 'desc',
-  orderName: "similarityScore",
+  orderName: 'similarityScore',
-};
+}
 
 function onCheckChange(checked: any, item: any) {
-  const index = selectItems.value.indexOf(item);
+  const index = selectItems.value.indexOf(item)
-  item.checked = checked;
+  item.checked = checked
 
-  if (index === -1 && checked) selectItems.value.push(item);
+  if (index === -1 && checked)
-  else selectItems.value.splice(index, 1);
+    selectItems.value.push(item)
+  else selectItems.value.splice(index, 1)
 }
 
 const showActions = computed(() => {
-  return selectItems.value.length > 0 && batch;
+  return selectItems.value.length > 0 && batch
-});
+})
 
 const taskpagination = reactive({
   pageNo: 1,
   pageSize: 30,
-});
+})
-const taskStore = useTask();
+const taskStore = useTask()
-const overTask = ref<any>(null);
+const overTask = ref<any>(null)
-const taskDetailInfo = ref<any>({});
+const taskDetailInfo = ref<any>({})
-const taskDetailPictureList = ref<any[]>([]);
+const taskDetailPictureList = ref<any[]>([])
-const userStore = useUser();
+const userStore = useUser()
-const imageRef = ref<ComponentElRef | null>();
+const imageRef = ref<ComponentElRef | null>()
-let processItems: any[] = [];
+let processItems: any[] = []
-const isFullScreen = ref(false);
+const isFullScreen = ref(false)
 
 const fullscreenStyles = computed<any>(() => ({
-  width: isFullScreen.value ? "100vw" : "",
+  width: isFullScreen.value ? '100vw' : '',
-  height: isFullScreen.value ? "100vh" : "",
+  height: isFullScreen.value ? '100vh' : '',
-  position: isFullScreen.value ? "fixed" : "",
+  position: isFullScreen.value ? 'fixed' : '',
-  top: isFullScreen.value ? "0" : "",
+  top: isFullScreen.value ? '0' : '',
-  left: isFullScreen.value ? "0" : "",
+  left: isFullScreen.value ? '0' : '',
-  zIndex: isFullScreen.value ? "100" : "",
+  zIndex: isFullScreen.value ? '100' : '',
-}));
+}))
 
 onMounted(() => {
-  window.addEventListener("keydown", handleKeydown);
+  window.addEventListener('keydown', handleKeydown)
   if (route.query.id) {
-    taskId.value = route.query.id;
+    taskId.value = route.query.id
-    packageId.value = route.query.packageid;
+    packageId.value = route.query.packageid
-    isDetail.value = true;
+    isDetail.value = true
-    getDetail();
+    getDetail()
   }
-});
+})
 
 // 键盘左右箭头快捷切换
 function handleKeydown(event) {
-  if (event.key === "ArrowLeft") backHandler();
+  if (event.key === 'ArrowLeft')
+    backHandler()
   // 在这里执行左箭头的逻辑
-  else if (event.key === "ArrowRight") forwardHandler();
+  else if (event.key === 'ArrowRight')
+    forwardHandler()
   // 在这里执行右箭头的逻辑
 }
 
@@ -110,26 +105,27 @@ function setBatch(value: boolean) {
   // if (totalCount.value === 0)
   //   return
 
-  batch.value = value;
+  batch.value = value
 
   if (value === false) {
-    taskDetailInfo.value.checked = false;
+    taskDetailInfo.value.checked = false
-    selectItems.value = [];
+    selectItems.value = []
     taskDetailPictureList.value.forEach((item) => {
-      item.checked = false;
+      item.checked = false
-    });
+    })
   }
 }
 
 // 从store里面获取任务id
 function currentTaskId() {
-  const index = taskStore.getCurrentIndex;
+  const index = taskStore.getCurrentIndex
-  return taskStore.getApprovalList[index]?.id || "";
+  return taskStore.getApprovalList[index]?.id || ''
 }
 
 // states:1未提交，2待审批，3通过，4不通过
 function validate(items: any[]) {
-  if (items.length === 0) return "至少选中一个任务";
+  if (items.length === 0)
+    return '至少选中一个任务'
 
   // const useInfo = userStore.getUserInfo
   // const username = useInfo.loginname
@@ -146,129 +142,131 @@ function validate(items: any[]) {
   //     return '审批人不一致'
   // }
 
-  return null;
+  return null
 }
 
 function approvalHandler(items?: any) {
-  let cloneItem: any;
+  let cloneItem: any
   if (batch.value) {
-    processItems = selectItems.value;
+    processItems = selectItems.value
-  } else if (overTask.value) {
+  }
-    cloneItem = clone(overTask.value);
+  else if (overTask.value) {
-    processItems = [cloneItem];
+    cloneItem = clone(overTask.value)
+    processItems = [cloneItem]
   }
 
   if (items !== undefined && !(items instanceof PointerEvent))
-    processItems = items;
+    processItems = items
 
-  const msg = validate(processItems);
+  const msg = validate(processItems)
 
   if (msg !== null) {
-    message.error(msg);
+    message.error(msg)
-    return;
+    return
   }
 
-  console.log(processItems);
+  console.log(processItems)
 
-  const list: any = [];
+  const list: any = []
   processItems.forEach((item) => {
     list.push({
       formId: item.id,
       taskId: item.taskId,
       taskName: item.fromTaskName,
-    });
+    })
-  });
+  })
 
   const param = {
     result: true,
-    comment: "",
+    comment: '',
-    disposeType: "",
+    disposeType: '',
-    disposeTypeId: "",
+    disposeTypeId: '',
-    failCauseId: "",
+    failCauseId: '',
-    failCauseName: "",
+    failCauseName: '',
     flowTaskInfoList: list,
-  };
+  }
 
   dialog.info({
-    title: "确认提示",
+    title: '确认提示',
-    content: "确认给该任务审批为【通过】吗?",
+    content: '确认给该任务审批为【通过】吗?',
-    positiveText: "确定",
+    positiveText: '确定',
-    negativeText: "取消",
+    negativeText: '取消',
     onPositiveClick: () => {
-      doAudit(param);
+      doAudit(param)
     },
     onNegativeClick: () => {},
-  });
+  })
 }
 
 function rejectHandler(items?: any) {
-  const modal = unref(notPassModalRef)! as any;
+  const modal = unref(notPassModalRef)! as any
-  modal.showModal(items);
+  modal.showModal(items)
 }
 
 function singleRejectHandler() {
-  const modal = unref(notPassModalRef)! as any;
+  const modal = unref(notPassModalRef)! as any
-  modal.showModal([taskDetailInfo.value]);
+  modal.showModal([taskDetailInfo.value])
 }
 
 function doAudit(param: any) {
   audit(param).then((res) => {
-    const { code } = res;
+    const { code } = res
-    if (code === "OK") {
+    if (code === 'OK') {
-      message.success(res.message);
+      message.success(res.message)
-      setBatch(false);
+      setBatch(false)
-      reloadList(param, "通过");
+      reloadList(param, '通过')
-      batchModalRef.value.reload();
+      batchModalRef.value.reload()
-    }
+    }
-  });
+  })
 }
 
 function showModal(modalRef: any) {
-  const modal = unref(modalRef)! as any;
+  const modal = unref(modalRef)! as any
-  modal.showModal(taskId.value);
+  modal.showModal(taskId.value)
 }
 
 function forwardHandler() {
-  taskStore.forward();
+  taskStore.forward()
 }
 
 function backHandler() {
-  taskStore.back();
+  taskStore.back()
 }
 
 async function handleDragEnd(event, item) {
   // 可以在这里添加拖拽结束后的逻辑
-  const flag = taskStore.getInFile;
+  const flag = taskStore.getInFile
   if (flag) {
-    const res = await dubiousfileyd({ pictureid: item.pictureId });
+    const res = await dubiousfileyd({ pictureid: item.pictureId })
-    if (res.code === "OK") {
+    if (res.code === 'OK') {
-      message.success("加入成功");
+      message.success('加入成功')
-      setBatch(false);
+      setBatch(false)
-      getTableData();
+      getTableData()
-      getImgList();
+      getImgList()
-    } else {
+    }
-      message.error(res.message);
+    else {
+      message.error(res.message)
     }
-    taskStore.setInFile(false);
+    taskStore.setInFile(false)
   }
 }
 
 async function getTableData() {
-  const useInfo = userStore.getUserInfo;
+  const useInfo = userStore.getUserInfo
-  const listData = [];
+  const listData = []
-  const reviewType = 3; // 类型
+  const reviewType = 3 // 类型
-  let res = await getAllfieldList(reviewType);
+  let res = await getAllfieldList(reviewType)
-  const fieldList = (res as any)?.data;
+  const fieldList = (res as any)?.data
-  res = await getfieldList(reviewType, useInfo.id);
+  res = await getfieldList(reviewType, useInfo.id)
-  const userFieldList = (res as any)?.data.userFieldFixed;
+  const userFieldList = (res as any)?.data.userFieldFixed
   const blueList = [
-    "拜访终端名称",
+    '拜访终端名称',
-    "定位信息",
+    '定位信息',
-    "拜访日期",
+    '拜访日期',
-    "定位距离",
+    '定位距离',
-    "拜访小结",
+    '拜访小结',
-    "拜访项目类别",
+    '拜访项目类别',
-  ];
+  ]
   fieldList.map((v) => {
     if (userFieldList.includes(v.name)) {
       const item = {
@@ -276,11 +274,11 @@ async function getTableData() {
         value: taskDetailInfo.value.ocrPicture[v.name],
         key: v.name,
         blue: blueList.includes(v.fieldDesc),
-      };
-      listData.push(item);
       }
-  });
+      listData.push(item)
-  taskTableData.value = chunk(listData, 2);
+    }
+  })
+  taskTableData.value = chunk(listData, 2)
 }
 
 async function getImgList() {
@@ -289,97 +287,98 @@ async function getImgList() {
       ...taskpagination,
       ...sortBy,
       pictureId: taskDetailInfo.value.ocrPicture.id,
-    });
+    })
-    taskDetailPictureList.value = data;
+    taskDetailPictureList.value = data
-    totalCount.value = total;
+    totalCount.value = total
-  } else {
+  }
-    taskDetailPictureList.value.length = 0;
+  else {
-    totalCount.value = 0;
+    taskDetailPictureList.value.length = 0
+    totalCount.value = 0
   }
 }
 
 function overTaskHandle() {
-  const item = taskDetailInfo.value;
+  const item = taskDetailInfo.value
   if (item?.userapprove?.statshis === 2 || item?.userapprove?.statshis == 3) {
-    overTask.value = null;
+    overTask.value = null
-    return;
+    return
   }
 
-  if (validate([item]) == null && batch.value === false) overTask.value = item;
+  if (validate([item]) == null && batch.value === false)
+    overTask.value = item
 }
 
 function leaveTaskHandler() {
-  overTask.value = null;
+  overTask.value = null
 }
 
 function showActionsModal() {
-  const modal = unref(CustomSettingModalRef)! as any;
+  const modal = unref(CustomSettingModalRef)! as any
-  modal.showModal();
+  modal.showModal()
 }
 
 onUnmounted(() => {
-  taskStore.reset();
+  taskStore.reset()
-  window.removeEventListener("keydown", handleKeydown);
+  window.removeEventListener('keydown', handleKeydown)
-});
+})
 
 function immersionHandler() {
   // taskStore.updateImmersion()
-  toggleFullScreen();
+  toggleFullScreen()
 }
 // 切换全屏状态
 function toggleFullScreen() {
-  isFullScreen.value = !isFullScreen.value;
+  isFullScreen.value = !isFullScreen.value
 }
 function previewHandler(event: MouseEvent) {
-  event.stopImmediatePropagation();
+  event.stopImmediatePropagation()
-  event.stopPropagation();
+  event.stopPropagation()
 
   if (imageRef.value && (imageRef.value as any).src)
-    (imageRef.value as any).mergedOnClick();
+    (imageRef.value as any).mergedOnClick()
 }
 
 watch(
   () => [taskStore.activeId],
   () => {
     if (!isEmpty(taskStore.getActiveId)) {
-      packageId.value = taskStore.getPackageid;
+      packageId.value = taskStore.getPackageid
-      taskId.value = taskStore.getActiveId;
+      taskId.value = taskStore.getActiveId
-      getDetail();
+      getDetail()
     }
-  }
+  },
-);
+)
 
 // 获取数据
 async function getDetail() {
-  taskDetailInfo.value = await getTaskDetailInfo(taskId.value, packageId.value);
+  taskDetailInfo.value = await getTaskDetailInfo(taskId.value, packageId.value)
-  setBatch(false);
+  setBatch(false)
-  getTableData();
+  getTableData()
-  getImgList();
+  getImgList()
 }
 
 function notPassSuccess(param) {
-  batchModalRef.value.reload();
+  batchModalRef.value.reload()
-  reloadList(param, "不通过");
+  reloadList(param, '不通过')
 }
 
 function reloadList(param, text) {
   // 修改左侧状态
-  const id = currentTaskId();
+  const id = currentTaskId()
-  const hasCurrentId = param.flowTaskInfoList.find(
+  const hasCurrentId = param.flowTaskInfoList.find(item => item.formId === id)
-    (item) => item.formId === id
-  );
 
-  if (hasCurrentId) emit("setAsideItemName", text);
+  if (hasCurrentId)
+    emit('setAsideItemName', text)
 
-  getDetail();
+  getDetail()
 }
 
 function goBack() {
-  router.back();
+  router.back()
 }
 
 function switchBatch() {
-  setBatch(!batch.value);
+  setBatch(!batch.value)
 }
 </script>
 
@@ -389,18 +388,8 @@ function switchBatch() {
       <div class="left">
         <span class="font">任务ID：{{ taskDetailInfo.fromtaskname }}</span>
         <template v-if="!isDetail">
-          <SvgIcon
+          <SvgIcon size="22" class="forward" name="arrow-left" @click="backHandler" />
-            size="22"
+          <SvgIcon size="22" class="back" name="arrow-right" @click="forwardHandler" />
-            class="forward"
-            name="arrow-left"
-            @click="backHandler"
-          />
-          <SvgIcon
-            size="22"
-            class="back"
-            name="arrow-right"
-            @click="forwardHandler"
-          />
         </template>
       </div>
       <div v-if="!isDetail" class="right">
@@ -435,20 +424,8 @@ function switchBatch() {
             </ul>
           </n-popover> -->
           <div class="icon-wrap">
-            <SvgIcon
+            <SvgIcon v-if="isFullScreen" size="20" name="power-off" style="cursor: pointer;" @click="immersionHandler" />
-              v-if="isFullScreen"
+            <SvgIcon v-else size="20" name="immersion-model" style="cursor: pointer;" @click="immersionHandler" />
-              size="20"
-              name="power-off"
-              style="cursor: pointer"
-              @click="immersionHandler"
-            />
-            <SvgIcon
-              v-else
-              size="20"
-              name="immersion-model"
-              style="cursor: pointer"
-              @click="immersionHandler"
-            />
           </div>
         </div>
         <div v-show="showActions" class="batch">
@@ -463,14 +440,14 @@ function switchBatch() {
             src="@/assets/images/task/btn-not-pass.png"
             alt=""
             @click.stop="rejectHandler(selectItems)"
-          />
+          >
           <SvgIcon size="24" name="vs" />
           <img
             class="btn-approval"
             src="@/assets/images/task/btn-pass.png"
             alt=""
             @click.stop="approvalHandler"
-          />
+          >
         </div>
       </div>
       <div v-else class="right">
@@ -523,27 +500,19 @@ function switchBatch() {
             class="img-status"
             src="@/assets/images/task/pass.png"
             alt=""
-          />
+          >
           <img
             v-show="taskDetailInfo?.userapprove?.statshis === 3"
             class="img-status"
             src="@/assets/images/task/not_pass.png"
             alt=""
-          />
+          >
         </div>
         <div class="mark">
-          <SvgIcon
+          <SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 0" size="128" name="jia" />
-            v-show="taskDetailInfo?.iztrueorfalse === 0"
-            size="128"
-            name="jia"
-          />
         </div>
         <div class="mark">
-          <SvgIcon
+          <SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 1" size="128" name="zhen" />
-            v-show="taskDetailInfo?.iztrueorfalse === 1"
-            size="128"
-            name="zhen"
-          />
         </div>
         <div class="big-mark" />
         <div class="preview" @click="previewHandler">
@@ -553,11 +522,7 @@ function switchBatch() {
           <n-grid x-gap="12" y-gap="10" :cols="12">
             <n-gi span="4" class="gi1">
               <span>
-                <img
+                <img class="icon-status" src="@/assets/images/task/status.png" alt="">
-                  class="icon-status"
-                  src="@/assets/images/task/status.png"
-                  alt=""
-                />
               </span>
             </n-gi>
             <n-gi span="8" class="gi2">
@@ -572,47 +537,23 @@ function switchBatch() {
                   class="icon-status"
                   src="@/assets/images/task/similarity.png"
                   alt=""
-                />
+                >
               </span>
             </n-gi>
             <n-gi span="8" class="gi2">
-              <span class="value num"
+              <span class="value num">{{ totalCount }}<span class="unit">张</span> </span>
-                >{{ totalCount }}<span class="unit">张</span>
-              </span>
               <span class="label">相似匹配</span>
             </n-gi>
           </n-grid>
         </div>
         <div class="time">
           <div class="time-item">
-            <SvgIcon
+            <SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" />
-              class="svg-time"
+            <span>{{ taskDetailInfo?.ocrPicture?.photoDateTimestamp ? formatToDateHMS(Number(taskDetailInfo.ocrPicture.photoDateTimestamp)) : '-' }}</span>
-              color="#FFF"
-              size="16"
-              name="camera-time"
-            />
-            <span>{{
-              taskDetailInfo?.ocrPicture?.photoDateTimestamp
-                ? formatToDateHMS(
-                    Number(taskDetailInfo.ocrPicture.photoDateTimestamp)
-                  )
-                : "-"
-            }}</span>
           </div>
           <div class="time-item time-item2">
-            <SvgIcon
+            <SvgIcon class="svg-time" color="#FFF" size="16" name="submit-time" />
-              class="svg-time"
+            <span>{{ taskDetailInfo?.ocrPicture?.submitDateTimestamp ? formatToDateHMS(Number(taskDetailInfo.ocrPicture.submitDateTimestamp)) : '-' }}</span>
-              color="#FFF"
-              size="16"
-              name="submit-time"
-            />
-            <span>{{
-              taskDetailInfo?.ocrPicture?.submitDateTimestamp
-                ? formatToDateHMS(
-                    Number(taskDetailInfo.ocrPicture.submitDateTimestamp)
-                  )
-                : "-"
-            }}</span>
           </div>
         </div>
         <div style="display: none">
@@ -636,23 +577,11 @@ function switchBatch() {
               />
             </div>
             <div class="list">
-              <div
+              <div v-for="item in taskDetailPictureList" :key="item.id" class="item">
-                v-for="item in taskDetailPictureList"
-                :key="item.id"
-                class="item"
-                draggable="true"
-                @dragend="
-                  (event) => {
-                    handleDragEnd(event, item);
-                  }
-                "
-              >
                 <div
                   draggable="true"
                   class="img-wrapper"
-                  :style="{
+                  :style="{ 'background-image': `url(${item.serverThumbnailUrl})` }"
-                    'background-image': `url(${item.serverThumbnailUrl})`,
-                  }"
                   @dragend="
                     (event) => {
                       handleDragEnd(event, item);
@@ -674,39 +603,21 @@ function switchBatch() {
                   class="tag-status"
                   src="@/assets/images/task/tag-pass.png"
                   alt=""
-                />
+                >
                 <img
                   v-if="item.historyStates === 3"
                   class="tag-status"
                   src="@/assets/images/task/tag-not-pass.png"
                   alt=""
-                />
+                >
                 <div class="time">
                   <div class="time-item">
-                    <SvgIcon
+                    <SvgIcon class="svg-time" color="#FFF" size="8" name="camera-time" />
-                      class="svg-time"
+                    <span>{{ item.photoDateTimestamp ? formatToDateHMS(Number(item.photoDateTimestamp)) : '-' }}</span>
-                      color="#FFF"
-                      size="8"
-                      name="camera-time"
-                    />
-                    <span>{{
-                      item.photoDateTimestamp
-                        ? formatToDateHMS(Number(item.photoDateTimestamp))
-                        : "-"
-                    }}</span>
                   </div>
                   <div class="time-item time-item2">
-                    <SvgIcon
+                    <SvgIcon class="svg-time" color="#FFF" size="8" name="submit-time" />
-                      class="svg-time"
+                    <span>{{ item.submitDateTimestamp ? formatToDateHMS(Number(item.submitDateTimestamp)) : '-' }}</span>
-                      color="#FFF"
-                      size="8"
-                      name="submit-time"
-                    />
-                    <span>{{
-                      item.submitDateTimestamp
-                        ? formatToDateHMS(Number(item.submitDateTimestamp))
-                        : "-"
-                    }}</span>
                   </div>
                 </div>
                 <div
@@ -738,7 +649,10 @@ function switchBatch() {
         <History :data="taskDetailInfo" />
       </n-tab-pane>
     </n-tabs>
-    <NotPassed ref="notPassModalRef" @success="notPassSuccess" />
+    <NotPassed
+      ref="notPassModalRef"
+      @success="notPassSuccess"
+    />
     <BatchModal
       ref="batchModalRef"
       @reject="rejectHandler"
@@ -926,7 +840,7 @@ function switchBatch() {
         z-index: 3;
         width: 30px;
         height: 30px;
-        background: rgba(255, 255, 255, 0.2);
+        background: rgba(255, 255, 255, 0.20);
         border-radius: 6px;
         backdrop-filter: blur(10px);
         display: flex;
@@ -935,7 +849,7 @@ function switchBatch() {
         cursor: pointer;
       }
 
-      .big-mark {
+      .big-mark{
         width: 100%;
         height: 151px;
         background: linear-gradient(
@@ -996,11 +910,7 @@ function switchBatch() {
         z-index: 3;
         left: 16px;
         bottom: 16px;
-        width: 185px;
+
-        height: 50px;
-        background: rgba(216, 216, 216, 0.4);
-        border-radius: 7px;
-        padding-left: 10px;
         .time-item {
           display: flex;
           align-items: center;
@@ -1116,9 +1026,6 @@ function switchBatch() {
           z-index: 3;
           left: 3px;
           bottom: 3px;
-          width: 98%;
-          background: rgba(216, 216, 216, 0.4);
-          border-radius: 7px;
           .time-item {
             display: flex;
             align-items: center;