From 069da66fbe2748d51b1f3bc63f9ae00e660083c6 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期一, 04 十一月 2024 14:45:18 +0800
Subject: [PATCH] 场景报告模块（暂存）

---
 src/views/fysp/data-product/components/CompProblemTable.vue |  132 ++++++++++++++++++++++++++++++++++++-------
 1 files changed, 109 insertions(+), 23 deletions(-)

diff --git a/src/views/fysp/data-product/components/CompProblemTable.vue b/src/views/fysp/data-product/components/CompProblemTable.vue
index 0d3d6df..3f145ce 100644
--- a/src/views/fysp/data-product/components/CompProblemTable.vue
+++ b/src/views/fysp/data-product/components/CompProblemTable.vue
@@ -2,56 +2,100 @@
   <table>
     <tbody>
       <tr>
-        <td>{{ title }}</td>
+        <td colspan="2">{{ title }}</td>
       </tr>
       <tr>
-        <td>
+        <td style="position: relative">
           <el-image
             class="image"
             :src="seletcedProblemPic"
-            :preview-src-list="[seletcedProblemPic]"
+            :preview-src-list="seletcedProblemPic ? [seletcedProblemPic] : []"
             :initial-index="0"
             fit="cover"
             lazy
-          />
+          >
+            <template #error v-if="!seletcedProblemPic">
+              <div class="image-slot">
+                <el-text>闂鍥剧墖鏈笂浼�</el-text>
+              </div>
+            </template>
+          </el-image>
+          <el-button
+            class="pop-button"
+            size="small"
+            @click="proDialog = true"
+            >{{ btnName }}</el-button
+          >
         </td>
-        <td>
+        <td style="position: relative">
           <el-image
             class="image"
-            :src="seletcedChangePic"
-            :preview-src-list="[seletcedChangePic]"
+            :src="seletcedChangePic ? seletcedChangePic : unchangeImg"
+            :preview-src-list="seletcedChangePic ? [seletcedChangePic] : []"
             :initial-index="0"
             fit="cover"
             lazy
           />
+          <el-button
+            class="pop-button"
+            size="small"
+            @click="changeDialog = true"
+            >{{ btnName }}</el-button
+          >
         </td>
       </tr>
       <tr>
         <td>
-          <el-row justify="space-between" align="middle">
-            <div>浣嶇疆锛歿{ problem.location }}</div>
-            <div>鎻忚堪锛歿{ problem.problemname }}</div>
-            <el-button size="small" @click="$emit('change')">{{
-              btnName
-            }}</el-button>
-          </el-row>
+          <div>浣嶇疆锛歿{ problem.location }}</div>
+          <div>
+            鎻忚堪锛�
+            <el-input
+              size="small"
+              v-model="problemDes"
+              placeholder="闂鎻忚堪"
+              style="width: 150px"
+            />
+          </div>
         </td>
         <td>
-          <el-row justify="space-between" align="middle">
-            <div>浣嶇疆锛歿{ problem.location }}</div>
-            <div>鎻忚堪锛歿{ problem.problemname }}</div>
-            <el-button size="small" @click="$emit('change')">{{
-              btnName
-            }}</el-button>
-          </el-row>
+          <div>浣嶇疆锛歿{ problem.location }}</div>
+          <div>
+            鎻忚堪锛�
+            <el-input
+              size="small"
+              v-model="changeDes"
+              placeholder="鏁存敼鎻忚堪"
+              style="width: 150px"
+            />
+          </div>
         </td>
       </tr>
     </tbody>
   </table>
+  <CompProblemPicSelect
+    v-if="pics.length > 0"
+    v-model:dialog-visible="proDialog"
+    mode="problem"
+    :pics="pics[0].path"
+    :defaultFile="[{ url: seletcedProblemPic }]"
+    @submit="handleProPicSelect"
+  ></CompProblemPicSelect>
+  <CompProblemPicSelect
+    v-if="pics.length > 1"
+    v-model:dialog-visible="changeDialog"
+    mode="change"
+    :pics="pics[1].path"
+    :defaultFile="[{ url: seletcedChangePic }]"
+    @submit="handleChangePicSelect"
+  ></CompProblemPicSelect>
 </template>
 <script setup>
-import { ref, watch } from 'vue';
-import ProCheckProxy from '@/views/check/ProCheckProxy';
+import { ref, watch, computed } from 'vue';
+import dayjs from 'dayjs';
+import ProCheckProxy from '@/views/fysp/check/ProCheckProxy';
+import unchangeImg from '@/assets/image/unchange.png';
+
+import CompProblemPicSelect from './CompProblemPicSelect.vue';
 
 const props = defineProps({
   problem: {
@@ -59,14 +103,27 @@
     default: () => {
       return {};
     }
+  },
+  btnName: {
+    type: String,
+    default: '淇敼'
   }
 });
 
 const emit = defineEmits(['change']);
 
 const pics = ref([]);
+const proDialog = ref(false);
 const seletcedProblemPic = ref();
+const changeDialog = ref(false);
 const seletcedChangePic = ref();
+const problemDes = ref('');
+const changeDes = ref('鏈暣鏀�');
+
+const title = computed(() => {
+  const time = dayjs(props.problem.time).format('M鏈�');
+  return `${time}鐜板満闂鍙婃暣鏀瑰浘鐗嘸;
+});
 
 function getPics() {
   pics.value = ProCheckProxy.proPics(props.problem);
@@ -78,11 +135,25 @@
   }
 }
 
+function handleProPicSelect(imgList) {
+  if (imgList && imgList.length > 0) {
+    seletcedProblemPic.value = imgList[0].url;
+  }
+}
+
+function handleChangePicSelect(imgList) {
+  if (imgList && imgList.length > 0) {
+    seletcedChangePic.value = imgList[0].url;
+  }
+}
+
 watch(
   () => props.problem,
   (nV, oV) => {
     if (nV != oV) {
       getPics();
+      problemDes.value = nV.problemname;
+      changeDes.value = nV.ischanged ? '宸叉暣鏀�' : '鏈暣鏀�';
     }
   },
   { immediate: true }
@@ -113,4 +184,19 @@
   border-style: solid;
   border-color: #666666; */
 }
+
+.pop-button {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: var(--el-fill-color-light);
+}
 </style>

--
Gitblit v1.9.3