src/views/task/modal/ImgDetailModal.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { difference } from 'lodash-es'
 import { chunk, clone } from 'lodash-es'
+import { hideDownload } from '@/utils/image'
 import {
   computed,
   defineEmits,
@@ -19,6 +20,7 @@ import {
 } from '@/api/task/task'
 import { getAllfieldList, getfieldList } from '@/api/home/filter'
 import { useKeydown } from '@/hooks/event/useKeydown'
+import { formatToDateHMS } from '@/utils/dateUtil'
 
 const props = defineProps({
   reviewType: {
@@ -27,6 +29,7 @@ const props = defineProps({
     require: true,
   },
 })
+const imageRef = ref<ComponentElRef | null>()
 const show = ref(false)
 const detailobj=ref(null)
 const taskDetailInfo = ref<any>({})
@@ -39,7 +42,13 @@ async function showModal(item:any,packid,imgid){
     detailobj.value=item
     show.value=true
 }
+function previewHandler(event: MouseEvent) {
+  event.stopImmediatePropagation()
+  event.stopPropagation()
 
+  if (imageRef.value && (imageRef.value as any).src)
+    (imageRef.value as any).mergedOnClick()
+}
 async function getTableData() {
   const useInfo = userStore.getUserInfo
   const listData = []
@@ -124,6 +133,7 @@ defineExpose({
 
 <template>
   <n-modal v-model:show="show" transform-origin="center">
+    
     <n-card
       class="cardstyle"
       :bordered="false"
@@ -131,8 +141,12 @@ defineExpose({
       role="dialog"
       aria-modal="true"
     >
+     <div class="topline"></div>
+      <div class="bottomline" ></div>
       <div class="wrapper">
-          <div class="wrapper-title" style="color: #333">任务ID:{{detailobj.fromTaskName}}</div><div @click="closeModal" class="close">X</div>
+          <div class="wrapper-title" style="color: #333;font-size:20px">任务ID:{{detailobj.fromTaskName}}</div>
+          <div @click="closeModal" class="close">    
+             <SvgIcon size="20" class="icon" name="close-none-border"  /></div>
       </div>
       <div style="display:flex;margin-top:25px">
         <div
@@ -144,6 +158,33 @@ defineExpose({
         
         "
       >
+       <div class="preview" style="z-index: 5" @click="previewHandler">
+              <SvgIcon size="16" name="zoom-out" />
+            </div>
+        <div class="big-mark" />
+           <div class="time">
+          <div class="time-item">
+            <SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" />
+
+            <span>{{ detailobj?.photoDateTimestamp ?? "- -" }}</span>
+          </div>
+          <div class="time-item time-item2">
+            <SvgIcon class="svg-time" color="#FFF" size="16" name="submit-time" />
+
+            <span>{{
+             detailobj?.submitDateTimestamp
+                ? formatToDateHMS(Number(detailobj.submitDateTimestamp))
+                : "- -"
+            }}</span>
+          </div>
+        </div>
+          <div style="display: none">
+          <n-image
+            ref="imageRef"
+            :img-props="{ onClick: hideDownload }"
+            :src="detailobj?.imgUrl"
+          />
+        </div>
       </div>
        <div
         class="right"
@@ -157,10 +198,10 @@ defineExpose({
                   white-space: nowrap;
                   overflow: hidden;
                   text-overflow: ellipsis;
-                  
+                     padding-left: 10px;
                 "
               >
-                <n-ellipsis style="font-size:22px">
+                <n-ellipsis style="font-size:22px;font-weight:550">
                   {{ detailobj.fromTaskName }}
                 </n-ellipsis>
               </div>
@@ -194,7 +235,7 @@ defineExpose({
                 </div>
               </div>
               <n-divider class="divider-line" />
-              <div :style="{ width: '100%' }">
+              <div :style="{ width: '90%',marginLeft:'16px',marginTop:'-6px' }">
            <div
                   v-for="(item, index) in taskTableData"
                   :key="index"
@@ -209,6 +250,8 @@ defineExpose({
                         width: '100px',
                         borderRight: '2px solid',
                         marginTop: '4px',
+                      color:'#333333',
+                       fontWeight: 'bold',
                       }"
                     >
                       {{ item[0].label }}
@@ -219,6 +262,8 @@ defineExpose({
                         fontSize: '16px',
                         textOverflow: 'ellipsis',
                         paddingTop: '2px',
+                         color:'#333333' ,
+                         fontWeight: 'bold',
                       }"
                     >
                       {{ item[0].value }}
@@ -249,15 +294,101 @@ defineExpose({
       </div>
          <n-divider class="divider-line" />
          <div class="btnlist"> 
-    <n-button type="info" @click="passfun"> 通过  </n-button>
-    <n-button type="error" @click="nopassfun">  不通过</n-button>  
-     <n-button @click="closeModal">取消</n-button>
+    <n-button type="info" @click="passfun"
+        style="  
+     width:72px;
+     height:38px; "
+     v-if="!(detailobj?.historyStates == 2|| detailobj?.historyStates == 3)" >
+      通过 
+     </n-button>
+    <n-button type="error" @click="nopassfun"
+    style="  
+     width:72px;
+     height:38px; 
+     background-color: #FF4E4F;"
+     v-if="!(detailobj?.historyStates == 2|| detailobj?.historyStates == 3)">
+       不通过
+       </n-button>  
+     <n-button @click="closeModal" style="  
+     width:72px;
+     height:38px; 
+      position: absolute;
+    right: 36px;">取消</n-button>
     </div>
     </n-card>
   </n-modal>
 </template>
 
 <style lang="less" scoped>
+.topline{
+      background: #E0DFDF;
+    height: 0.5px;
+    width: 1200px;
+    margin-left: -40px;
+    position: absolute;
+    top: 85px;
+}
+.bottomline{
+     background: #E0DFDF;
+    height: 1px;
+    width: 1200px;
+    margin-left: -40px;
+    position: absolute;
+    bottom: 73px;
+}
+ .big-mark {
+        width: 100%;
+        height: 210px;
+        background: linear-gradient(
+          180deg,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 0) 29%,
+          rgba(3, 0, 0, 0.73)
+        );
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        z-index: 0;
+        border-radius: 0 0 8px 8px;
+      }
+   .time {
+        position: absolute;
+        z-index: 3;
+        left: 16px;
+        bottom: 16px;
+        .time-item {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          font-family: PingFang SC, PingFang SC-Medium;
+          font-weight: 500;
+          color: #ffffff;
+          margin-bottom: 4px;
+        }
+
+        .time-item2 {
+          margin-bottom: 0;
+        }
+
+        .svg-time {
+          margin-right: 5px;
+        }
+      }
+       .preview {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        z-index: 3;
+        width: 30px;
+        height: 30px;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 6px;
+        backdrop-filter: blur(10px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
 .close{
         position: absolute;
     right: 40px;
@@ -267,7 +398,7 @@ defineExpose({
 .wrapper {
   display: flex;
   flex-direction: column;
-  border-bottom: 1px solid #e8e8e8;
+ // border-bottom: 1px solid #e8e8e8;
   padding-bottom: 32px;
 
   &-title {
@@ -328,8 +459,15 @@ defineExpose({
 .right{
     width: 30%;
 //flex:0.4;
-margin-left: 16px;
-height: 463px;
+  margin-left: 16px;
+  height: 463px;
+  background: #FAFAFA;
+  border-radius: 8px;
+::v-deep(.n-divider .n-divider__line){
+  background-color: #E8E8E8 !important;
+
+ 
+}
 .viewlabel {
   margin-top: 10px;
   font-size: 14px;
@@ -352,8 +490,10 @@ height: 463px;
   max-width: 650px;
 }
 .tags {
+      padding-left: 22px;
     display: flex;
     margin-top: 8px;
+        margin-bottom: -12px;
   }
 
   .tag {
@@ -398,9 +538,10 @@ height: 463px;
 }
 
 .btnlist{
-    width: 220px;
+       width: 165px;
     display: flex;
     float: right;
+    margin-right: 90px;
     justify-content: space-between;
 }