From ae52f9a7cca3ebe8803f720e5891a696714347db Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 04 十一月 2025 13:04:16 +0800
Subject: [PATCH] 基础数据产品-整改清单中，新增按照任意时段和区县进行统计的功能
---
src/views/fysp/data-product/components/CompProblemTable.vue | 160 +++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 137 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..0d6d3d8 100644
--- a/src/views/fysp/data-product/components/CompProblemTable.vue
+++ b/src/views/fysp/data-product/components/CompProblemTable.vue
@@ -2,56 +2,102 @@
<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"
+ title="闂鍥剧墖"
+ v-model:dialog-visible="proDialog"
+ mode="problem"
+ :pics="pics[0].path"
+ :defaultFile="[{ url: seletcedProblemPic }]"
+ @submit="handleProPicSelect"
+ ></CompProblemPicSelect>
+ <CompProblemPicSelect
+ v-if="pics.length > 1"
+ title="鏁存敼鍥剧墖"
+ 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 +105,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,15 +137,55 @@
}
}
+function handleProPicSelect(imgList) {
+ if (imgList && imgList.length > 0) {
+ seletcedProblemPic.value = imgList[0].url;
+ onChange();
+ }
+}
+
+function handleChangePicSelect(imgList) {
+ if (imgList && imgList.length > 0) {
+ seletcedChangePic.value = imgList[0].url;
+ onChange();
+ }
+}
+
+function onChange() {
+ const value = {
+ proPic: seletcedProblemPic.value,
+ changePic: seletcedChangePic.value ? seletcedChangePic.value : unchangeImg,
+ location: props.problem.location,
+ problemDes,
+ changeDes
+ };
+ emit('change', value);
+}
+
watch(
() => props.problem,
(nV, oV) => {
if (nV != oV) {
getPics();
+ problemDes.value = nV.problemname;
+ changeDes.value = nV.ischanged ? '宸叉暣鏀�' : '鏈暣鏀�';
+
+ onChange();
}
},
{ immediate: true }
);
+
+watch(problemDes, (nV, oV) => {
+ if (nV != oV) {
+ onChange();
+ }
+});
+watch(changeDes, (nV, oV) => {
+ if (nV != oV) {
+ onChange();
+ }
+});
</script>
<style scoped>
.image {
@@ -113,4 +212,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