From 2f1757035ee2bd23eb44e2d2712103f871569e83 Mon Sep 17 00:00:00 2001 From: zth <1205836521@qq.com> Date: Thu, 27 Mar 2025 02:21:13 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=90=8C=E6=AD=A5=E5=92=8C?= =?UTF-8?q?=E5=BC=B9=E6=A1=86=E6=A0=B7=E5=BC=8F=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/dike/index.ts | 9 + src/views/Main/Dike/components/BaseInfo.vue | 94 ++-- .../Main/Dike/components/fileManagement.vue | 28 +- .../Dike/components/floodControlMaterials.vue | 478 +++++++++++++++--- .../Main/Dike/components/safetyAppraisal.vue | 352 +++++++++++-- .../Main/Sluice/components/fileManagement.vue | 19 +- .../components/floodControlMaterials.vue | 392 +++++++++++--- .../Sluice/components/safetyAppraisal.vue | 295 +++++++++-- src/views/Main/index.vue | 4 +- vite.config.ts | 2 +- 10 files changed, 1377 insertions(+), 296 deletions(-) diff --git a/src/api/dike/index.ts b/src/api/dike/index.ts index bf86a16..7439443 100644 --- a/src/api/dike/index.ts +++ b/src/api/dike/index.ts @@ -101,6 +101,15 @@ export function listDagl(query:any) { }) } +export function getFileStream(query:any) { + return request({ + url: '/common/download', + method: 'get', + params: query, + responseType: "blob" + }) +} + // 查询水文特征详细 export function getSwtz(id: any) { diff --git a/src/views/Main/Dike/components/BaseInfo.vue b/src/views/Main/Dike/components/BaseInfo.vue index 766e63a..7e88999 100644 --- a/src/views/Main/Dike/components/BaseInfo.vue +++ b/src/views/Main/Dike/components/BaseInfo.vue @@ -9,7 +9,7 @@ border :labelStyle="{ 'text-align': 'left', - width: '120px', + width: '200px', height: '50px', }" :contentStyle="{ minWidth: '180px' }" @@ -142,14 +142,15 @@ - + @@ -157,252 +158,253 @@ label="堤防横断面代码" align="center" prop="bntrCode" - min-width="120" + min-width="200" /> - + @@ -570,7 +572,7 @@ watch( .sy-descriptions { .sy-descriptions__label { text-align: left; - min-width: 120px; + min-width: 200px; height: 50px; } .sy-descriptions__content { diff --git a/src/views/Main/Dike/components/fileManagement.vue b/src/views/Main/Dike/components/fileManagement.vue index 0580249..638b2d5 100644 --- a/src/views/Main/Dike/components/fileManagement.vue +++ b/src/views/Main/Dike/components/fileManagement.vue @@ -28,7 +28,7 @@
- + @@ -36,24 +36,22 @@ - - - +
@@ -61,7 +59,6 @@ v-model="dialogVisible" title="档案详情" width="50%" - :before-close="handleDialogClose" >
@@ -80,7 +77,6 @@ {{ item.name }}
@@ -103,7 +99,7 @@ @@ -214,13 +331,24 @@ onMounted(() => { .left-options { display: flex; align-items: center; + flex-wrap: wrap; + gap: 15px; - .option-label { - margin-right: 8px; + .search-item { + display: flex; + align-items: center; + + .option-label { + padding: 15px; + white-space: nowrap; + } } } .right-options { + display: flex; + align-items: center; + .add-button { background-color: #4cd964; border-color: #4cd964; @@ -241,4 +369,230 @@ onMounted(() => { } } } + +/* 详情对话框样式 */ +.detail-container { + padding: 10px; + + .detail-item { + margin-bottom: 15px; + display: flex; + + .detail-label { + width: 100px; + font-weight: 500; + color: #606266; + } + + .detail-value { + flex: 1; + color: #333; + } + } +} + +.dialog-footer { + text-align: right; + margin-top: 20px; +} + +.dialog-fade-enter-active, +.dialog-fade-leave-active { + transition: opacity 0.3s ease, transform 0.3s ease; +} + +.dialog-fade-enter-from, +.dialog-fade-leave-to { + opacity: 0; + transform: scale(0.9); +} + +.modern-dialog-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(4px); + display: flex; + justify-content: center; + align-items: center; + z-index: 2000; +} + +.modern-dialog-container { + width: 550px; + max-width: 90%; + background: #fff; + border-radius: 12px; + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); + overflow: hidden; + display: flex; + flex-direction: column; + animation: dialog-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); +} + +@keyframes dialog-slide-in { + 0% { + opacity: 0; + transform: translateY(30px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.modern-dialog-header { + padding: 20px 24px; + display: flex; + justify-content: space-between; + align-items: center; + background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); + color: #fff; + + .modern-dialog-title { + display: flex; + align-items: center; + + .title-icon { + margin-right: 12px; + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.2); + } + + h3 { + margin: 0; + font-size: 18px; + font-weight: 600; + } + } + + .modern-dialog-close { + background: transparent; + border: none; + cursor: pointer; + color: #fff; + width: 32px; + height: 22px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: background-color 0.2s; + + &:hover { + background-color: rgba(255, 255, 255, 0.2); + } + } +} + +.modern-dialog-content { + padding: 24px; + flex: 1; + overflow-y: auto; + + .detail-card { + background: #f8f9fa; + border-radius: 8px; + padding: 20px; + } + + .detail-item { + display: flex; + align-items: flex-start; + margin-bottom: 5px; + padding-bottom: 5px; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); + transition: transform 0.2s, box-shadow 0.2s; + + &:last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; + } + + &:hover { + transform: translateX(5px); + } + + .detail-icon { + flex-shrink: 0; + width: 40px; + height: 40px; + border-radius: 8px; + background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); + display: flex; + align-items: center; + justify-content: center; + color: white; + margin-right: 16px; + } + + .detail-content { + flex: 1; + display: flex; + flex-direction: column; + } + + .detail-label { + font-size: 14px; + color: #666; + margin-bottom: 6px; + } + + .detail-value { + font-size: 16px; + font-weight: 500; + color: #333; + } + + &.conclusion-item { + .conclusion-value { + font-size: 16px; + font-weight: 500; + color: #333; + padding: 12px; + background: #fff; + border-radius: 6px; + border-left: 4px solid #0acccc; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + } + } + } +} + +.modern-dialog-footer { + padding: 16px 24px; + display: flex; + justify-content: flex-end; + background: #f8f9fa; + border-top: 1px solid #e9ecef; + + .close-button { + background: linear-gradient(135deg, #2C7EF8 0%, #2C5EF8 100%); + border: none; + color: white; + padding: 10px 24px; + border-radius: 6px; + font-weight: 500; + cursor: pointer; + transition: transform 0.15s, box-shadow 0.15s; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(44, 126, 248, 0.3); + } + + &:active { + transform: translateY(0); + } + } +} diff --git a/src/views/Main/Dike/components/safetyAppraisal.vue b/src/views/Main/Dike/components/safetyAppraisal.vue index 25b93dd..5f08f67 100644 --- a/src/views/Main/Dike/components/safetyAppraisal.vue +++ b/src/views/Main/Dike/components/safetyAppraisal.vue @@ -33,36 +33,68 @@
- -
-
- 安全评定时间： - {{ currentRow.identifyTime || '--' }} -
-
- 安全评的单位： - {{ currentRow.safetyEvaluationUnit || '--' }} -
-
- 评价单位资质： - {{ currentRow.unitQualification || '--' }} -
-
- 安全评价结论： - {{ currentRow.mainIssues || '--' }} -
-
- - + + @@ -74,7 +106,7 @@ import {listAqjdxx, listJyjl} from "~/api/dike"; const props = defineProps({ resCode: { type: String as PropType, - default: '', + default: 'HP017440705000067X', }, }); @@ -85,33 +117,34 @@ const identifyTime = ref(null); // Search parameters const searchDate = ref([]); -// View function -// const handleView = (row: any) => { -// console.log('View row:', row); -// }; - -// Fetch data based on resCode changes -watch( - () => props.resCode, - (newVal) => { - if (newVal) { - fetchSafetyData(); - } - }, - { immediate: true } -); - +// Watch for resCode changes +// watch( +// () => props.resCode, +// (newVal) => { +// if (newVal) { +// fetchSafetyData(); +// } +// }, +// { immediate: true } +// ); // Fetch safety appraisal data -const fetchSafetyData = async () => { +// const fetchSafetyData = async () => { +// +// }; -}; +// Current row data for dialog const currentRow = reactive({ identifyTime: '', safetyEvaluationUnit: '', unitQualification: '', mainIssues: '' }); + +// Dialog visibility +const dialogVisible = ref(false); + +// Handle viewing a row const handleView = (row: any) => { console.log('View row:', row); // Copy row data to currentRow @@ -120,26 +153,33 @@ const handleView = (row: any) => { currentRow.unitQualification = row.unitQualification || ''; currentRow.mainIssues = row.mainIssues || ''; - // Show dialog + // Show dialog with animation dialogVisible.value = true; }; +// Handle dialog overlay click +const handleOverlayClick = (e: MouseEvent) => { + dialogVisible.value = false; +}; + +// Reset filter const resetFilter = () => { identifyTime.value = null; initSafe(); }; -const dialogVisible = ref(false); + +// Initialize safety data function initSafe() { console.log("Selected date:", identifyTime.value); // Build request data object const requestData: any = { - dfrwId: props.resCode + dikeCode: props.resCode }; // Only add identifyTime if it has a value if (identifyTime.value) { - requestData.identifyTime = identifyTime.value; + requestData.identifyTime= identifyTime.value; } listAqjdxx({ page: 1, @@ -152,7 +192,6 @@ function initSafe() { }); } - onMounted(() => { initSafe(); }); @@ -162,7 +201,7 @@ onMounted(() => { .safety-appraisal-container { padding: 16px; height: 100%; - color: #333; // 设置字体颜色为深灰色 + color: #333; .top-options { display: flex; @@ -195,8 +234,8 @@ onMounted(() => { .table-container { .custom-table { - .el-table__cell { - color: #333; // 设置表格内容字体颜色为深灰色 + .el-table__cell { + color: #333; } } @@ -205,4 +244,205 @@ onMounted(() => { } } } + +/* 惊艳的弹窗样式 */ +.dialog-fade-enter-active, +.dialog-fade-leave-active { + transition: opacity 0.3s ease, transform 0.3s ease; +} + +.dialog-fade-enter-from, +.dialog-fade-leave-to { + opacity: 0; + transform: scale(0.9); +} + +.modern-dialog-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(4px); + display: flex; + justify-content: center; + align-items: center; + z-index: 2000; +} + +.modern-dialog-container { + width: 550px; + max-width: 90%; + background: #fff; + border-radius: 12px; + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); + overflow: hidden; + display: flex; + flex-direction: column; + animation: dialog-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); +} + +@keyframes dialog-slide-in { + 0% { + opacity: 0; + transform: translateY(30px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.modern-dialog-header { + padding: 20px 24px; + display: flex; + justify-content: space-between; + align-items: center; + background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); + color: #fff; + + .modern-dialog-title { + display: flex; + align-items: center; + + .title-icon { + margin-right: 12px; + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.2); + } + + h3 { + margin: 0; + font-size: 18px; + font-weight: 600; + } + } + + .modern-dialog-close { + background: transparent; + border: none; + cursor: pointer; + color: #fff; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: background-color 0.2s; + + &:hover { + background-color: rgba(255, 255, 255, 0.2); + } + } +} + +.modern-dialog-content { + padding: 24px; + flex: 1; + overflow-y: auto; + + .detail-card { + background: #f8f9fa; + border-radius: 8px; + padding: 20px; + } + + .detail-item { + display: flex; + align-items: flex-start; + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); + transition: transform 0.2s, box-shadow 0.2s; + + &:last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; + } + + &:hover { + transform: translateX(5px); + } + + .detail-icon { + flex-shrink: 0; + width: 40px; + height: 40px; + border-radius: 8px; + background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); + display: flex; + align-items: center; + justify-content: center; + color: white; + margin-right: 16px; + } + + .detail-content { + flex: 1; + display: flex; + flex-direction: column; + } + + .detail-label { + font-size: 14px; + color: #666; + margin-bottom: 6px; + } + + .detail-value { + font-size: 16px; + font-weight: 500; + color: #333; + } + + &.conclusion-item { + .conclusion-value { + font-size: 16px; + font-weight: 500; + color: #333; + padding: 12px; + background: #fff; + border-radius: 6px; + border-left: 4px solid #0acccc; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + } + } + } +} + +.modern-dialog-footer { + padding: 16px 24px; + display: flex; + justify-content: flex-end; + background: #f8f9fa; + border-top: 1px solid #e9ecef; + + .close-button { + background: linear-gradient(135deg, #2C7EF8 0%, #2C5EF8 100%); + border: none; + color: white; + padding: 10px 24px; + border-radius: 6px; + font-weight: 500; + cursor: pointer; + transition: transform 0.15s, box-shadow 0.15s; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(44, 126, 248, 0.3); + } + + &:active { + transform: translateY(0); + } + } +} diff --git a/src/views/Main/Sluice/components/fileManagement.vue b/src/views/Main/Sluice/components/fileManagement.vue index 979ec71..a2c1561 100644 --- a/src/views/Main/Sluice/components/fileManagement.vue +++ b/src/views/Main/Sluice/components/fileManagement.vue @@ -28,7 +28,7 @@
- + @@ -43,17 +43,12 @@ {{ item.name }}
- - - + @@ -105,7 +100,15 @@ const searchDate = ref([]); const handleSearch = () => { initDagl(); }; - +const handleView = (row: any) => { + console.log('View row:', row); + // Copy row data to currentRow + currentRow.regulationsAttachment = row.regulationsAttachment || ''; + currentRow.planAttachment = row.planAttachment || ''; + + // Show dialog + dialogVisible.value = true; +}; // 重置函数 const handleReset = () => { selectedFileType.value = ''; diff --git a/src/views/Main/Sluice/components/floodControlMaterials.vue b/src/views/Main/Sluice/components/floodControlMaterials.vue index 50811f3..9bd4a98 100644 --- a/src/views/Main/Sluice/components/floodControlMaterials.vue +++ b/src/views/Main/Sluice/components/floodControlMaterials.vue @@ -5,12 +5,11 @@
采购时间
@@ -22,14 +21,7 @@ style="width: 200px" /> -
- 负责人姓名 - -
+
查询 @@ -42,10 +34,13 @@ - - + + + - + @@ -54,40 +49,95 @@
- -
-
- 物资名称： - {{ currentRow.materialName || '--' }} -
-
- 物资数量： - {{ currentRow.materialNumber || '--' }} -
-
- 物资类型： - {{ currentRow.materialType || '--' }} -
-
- 采购时间： - {{ currentRow.purchaseTime || '--' }} -
-
- 负责人： - {{ currentRow.responsiblePerson || '--' }} + + +
+
+
+
+
+ +
+

防汛物资详情

+
+ +
+ +
+
+
+ +
+ 物资名称 + {{ currentRow.materialName || '--' }} +
+
+ +
+ +
+ 负责人 + {{ currentRow.personName || '--' }} +
+
+ +
+ +
+ 负责人电话 + {{ currentRow.personPhone || '--' }} +
+
+ +
+ +
+ 负责人职务 +
{{ currentRow.personLevel || '--' }}
+
+
+
+ +
+ 物资数量 +
{{ currentRow.materialNumber || '--' }}
+
+
+
+ +
+ 采购时间 +
{{ currentRow.procurementTime || '--' }}
+
+
+
+ +
+ 物资种类 +
{{ projTypeFormat(currentRow.materialType) || '--' }}
+
+
+
+ +
+ 保质期 +
{{ currentRow.shelfLife || '--' }}
+
+
+
+
+ +
+ 关闭 +
+
-
- - + +
@@ -95,6 +145,8 @@ import { ref, onMounted, watch, reactive } from 'vue'; import type { PropType } from 'vue'; import {listFzwz} from "~/api/sluice"; +import {getDicts} from "~/api/common"; +import {getDictLabel} from "~/utils/dictUtils"; const props = defineProps({ resCode: { @@ -113,15 +165,23 @@ const responsiblePerson = ref(''); // Dialog visibility const dialogVisible = ref(false); - +const typesMaterials=ref([]) // Current row being viewed const currentRow = reactive({ materialName: '', materialNumber: '', + personLevel:'', + personPhone:'', + shelfLife:'', materialType: '', - purchaseTime: '', - responsiblePerson: '' + procurementTime: '', + personName: '' }); +function getType() { + getDicts("types_materials").then((res) => { + typesMaterials.value = res || []; + }); +} // View function const handleView = (row: any) => { @@ -131,9 +191,11 @@ const handleView = (row: any) => { currentRow.materialName = row.materialName || ''; currentRow.materialNumber = row.materialNumber || ''; currentRow.materialType = row.materialType || ''; - currentRow.purchaseTime = row.purchaseTime || ''; - currentRow.responsiblePerson = row.responsiblePerson || ''; - + currentRow.procurementTime = row.procurementTime || ''; + currentRow.personName = row.personName || ''; + currentRow.personPhone=row.personPhone||'', + currentRow.personLevel=row.personLevel||'', + currentRow.shelfLife=row.shelfLife||'' // Show dialog dialogVisible.value = true; }; @@ -142,7 +204,9 @@ const handleView = (row: any) => { const handleDialogClose = () => { dialogVisible.value = false; }; - +const handleOverlayClick = (e: MouseEvent) => { + dialogVisible.value = false; +}; // Search function const handleSearch = () => { initFxwz(); @@ -150,7 +214,7 @@ const handleSearch = () => { // Reset function const handleReset = () => { - dateRange.value = []; + procurementTime.value = null; materialName.value = ''; responsiblePerson.value = ''; initFxwz(); @@ -166,13 +230,16 @@ watch( }, { immediate: true } ); +const procurementTime=ref(null) function initFxwz() { // Prepare request data const requestData: any = { wagaCode: props.resCode, }; - + if (procurementTime.value){ + requestData.procurementTime=procurementTime.value; + } // Add search parameters if they exist if (materialName.value) { requestData.materialName = materialName.value; @@ -183,10 +250,6 @@ function initFxwz() { } // Add date range if selected - if (dateRange.value && dateRange.value.length === 2) { - requestData.startTime = dateRange.value[0]; - requestData.endTime = dateRange.value[1]; - } listFzwz({ page: 1, @@ -200,8 +263,13 @@ function initFxwz() { console.error("API error:", error); }); } +function projTypeFormat(key: string) { + if (!key) return '--'; + return getDictLabel(typesMaterials.value, key) || key; +} onMounted(() => { + getType() initFxwz(); }); @@ -227,7 +295,7 @@ onMounted(() => { align-items: center; .option-label { - margin-right: 8px; + padding: 15px; white-space: nowrap; } } @@ -283,4 +351,204 @@ onMounted(() => { text-align: right; margin-top: 20px; } + +.dialog-fade-enter-active, +.dialog-fade-leave-active { + transition: opacity 0.3s ease, transform 0.3s ease; +} + +.dialog-fade-enter-from, +.dialog-fade-leave-to { + opacity: 0; + transform: scale(0.9); +} + +.modern-dialog-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(4px); + display: flex; + justify-content: center; + align-items: center; + z-index: 2000; +} + +.modern-dialog-container { + width: 550px; + max-width: 90%; + background: #fff; + border-radius: 12px; + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); + overflow: hidden; + display: flex; + flex-direction: column; + animation: dialog-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); +} + +@keyframes dialog-slide-in { + 0% { + opacity: 0; + transform: translateY(30px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.modern-dialog-header { + padding: 20px 24px; + display: flex; + justify-content: space-between; + align-items: center; + background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); + color: #fff; + + .modern-dialog-title { + display: flex; + align-items: center; + + .title-icon { + margin-right: 12px; + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.2); + } + + h3 { + margin: 0; + font-size: 18px; + font-weight: 600; + } + } + + .modern-dialog-close { + background: transparent; + border: none; + cursor: pointer; + color: #fff; + width: 32px; + height: 22px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: background-color 0.2s; + + &:hover { + background-color: rgba(255, 255, 255, 0.2); + } + } +} + +.modern-dialog-content { + padding: 24px; + flex: 1; + overflow-y: auto; + + .detail-card { + background: #f8f9fa; + border-radius: 8px; + padding: 20px; + } + + .detail-item { + display: flex; + align-items: flex-start; + margin-bottom: 5px; + padding-bottom: 5px; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); + transition: transform 0.2s, box-shadow 0.2s; + + &:last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; + } + + &:hover { + transform: translateX(5px); + } + + .detail-icon { + flex-shrink: 0; + width: 40px; + height: 40px; + border-radius: 8px; + background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); + display: flex; + align-items: center; + justify-content: center; + color: white; + margin-right: 16px; + } + + .detail-content { + flex: 1; + display: flex; + flex-direction: column; + } + + .detail-label { + font-size: 14px; + color: #666; + margin-bottom: 6px; + } + + .detail-value { + font-size: 16px; + font-weight: 500; + color: #333; + } + + &.conclusion-item { + .conclusion-value { + font-size: 16px; + font-weight: 500; + color: #333; + padding: 12px; + background: #fff; + border-radius: 6px; + border-left: 4px solid #0acccc; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + } + } + } +} + +.modern-dialog-footer { + padding: 16px 24px; + display: flex; + justify-content: flex-end; + background: #f8f9fa; + border-top: 1px solid #e9ecef; + + .close-button { + background: linear-gradient(135deg, #2C7EF8 0%, #2C5EF8 100%); + border: none; + color: white; + padding: 10px 24px; + border-radius: 6px; + font-weight: 500; + cursor: pointer; + transition: transform 0.15s, box-shadow 0.15s; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(44, 126, 248, 0.3); + } + + &:active { + transform: translateY(0); + } + } +} diff --git a/src/views/Main/Sluice/components/safetyAppraisal.vue b/src/views/Main/Sluice/components/safetyAppraisal.vue index 5d71aa5..1d7c079 100644 --- a/src/views/Main/Sluice/components/safetyAppraisal.vue +++ b/src/views/Main/Sluice/components/safetyAppraisal.vue @@ -34,36 +34,67 @@ - -
-
- 安全评定时间： - {{ currentRow.identifyTime || '--' }} -
-
- 安全评的单位： - {{ currentRow.safetyEvaluationUnit || '--' }} -
-
- 评价单位资质： - {{ currentRow.unitQualification || '--' }} -
-
- 安全评价结论： - {{ currentRow.mainIssues || '--' }} -
-
- - + + @@ -76,7 +107,7 @@ import { isDate } from "lodash-es"; const props = defineProps({ resCode: { type: String as PropType, - default: '1900034196855689218', + default: '', } }); @@ -126,7 +157,7 @@ function initSafe() { // Build request data object const requestData: any = { - szrwId: props.resCode + wagaCode: props.resCode }; // Only add identifyTime if it has a value @@ -182,9 +213,9 @@ onMounted(() => { } .reset-button { - background-color: #666; - border-color: #666; - color: black; + background-color: #3a89fe; + border-color: #3a89fe; + color: white; } } } @@ -202,29 +233,203 @@ onMounted(() => { } } -/* 详情对话框样式 */ -.detail-container { - padding: 10px; +.dialog-fade-enter-active, +.dialog-fade-leave-active { + transition: opacity 0.3s ease, transform 0.3s ease; +} + +.dialog-fade-enter-from, +.dialog-fade-leave-to { + opacity: 0; + transform: scale(0.9); +} + +.modern-dialog-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(4px); + display: flex; + justify-content: center; + align-items: center; + z-index: 2000; +} + +.modern-dialog-container { + width: 550px; + max-width: 90%; + background: #fff; + border-radius: 12px; + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); + overflow: hidden; + display: flex; + flex-direction: column; + animation: dialog-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); +} + +@keyframes dialog-slide-in { + 0% { + opacity: 0; + transform: translateY(30px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.modern-dialog-header { + padding: 20px 24px; + display: flex; + justify-content: space-between; + align-items: center; + background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); + color: #fff; + + .modern-dialog-title { + display: flex; + align-items: center; + + .title-icon { + margin-right: 12px; + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.2); + } + + h3 { + margin: 0; + font-size: 18px; + font-weight: 600; + } + } + + .modern-dialog-close { + background: transparent; + border: none; + cursor: pointer; + color: #fff; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: background-color 0.2s; + + &:hover { + background-color: rgba(255, 255, 255, 0.2); + } + } +} + +.modern-dialog-content { + padding: 24px; + flex: 1; + overflow-y: auto; + + .detail-card { + background: #f8f9fa; + border-radius: 8px; + padding: 20px; + } .detail-item { - margin-bottom: 15px; display: flex; + align-items: flex-start; + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); + transition: transform 0.2s, box-shadow 0.2s; + + &:last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; + } + + &:hover { + transform: translateX(5px); + } + + .detail-icon { + flex-shrink: 0; + width: 40px; + height: 40px; + border-radius: 8px; + background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); + display: flex; + align-items: center; + justify-content: center; + color: white; + margin-right: 16px; + } + + .detail-content { + flex: 1; + display: flex; + flex-direction: column; + } .detail-label { - width: 120px; - font-weight: 500; - color: #606266; + font-size: 14px; + color: #666; + margin-bottom: 6px; } .detail-value { - flex: 1; + font-size: 16px; + font-weight: 500; color: #333; } + + &.conclusion-item { + .conclusion-value { + font-size: 16px; + font-weight: 500; + color: #333; + padding: 12px; + background: #fff; + border-radius: 6px; + border-left: 4px solid #0acccc; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + } + } } } -.dialog-footer { - text-align: right; - margin-top: 20px; +.modern-dialog-footer { + padding: 16px 24px; + display: flex; + justify-content: flex-end; + background: #f8f9fa; + border-top: 1px solid #e9ecef; + + .close-button { + background: linear-gradient(135deg, #2C7EF8 0%, #2C5EF8 100%); + border: none; + color: white; + padding: 10px 24px; + border-radius: 6px; + font-weight: 500; + cursor: pointer; + transition: transform 0.15s, box-shadow 0.15s; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(44, 126, 248, 0.3); + } + + &:active { + transform: translateY(0); + } + } } diff --git a/src/views/Main/index.vue b/src/views/Main/index.vue index 3667a04..14dae55 100644 --- a/src/views/Main/index.vue +++ b/src/views/Main/index.vue @@ -60,9 +60,9 @@ const showBottomPanel = ref(true); const showLayerTree = ref(false); const showReservoir = ref(false); // 水库详情弹窗 const reservoirData = ref({}); -const showSluice = ref(false); // 水闸详情弹窗 +const showSluice = ref(true); // 水闸详情弹窗 const sluiceData = ref({}); -const showDike = ref(true); // 堤防详情弹窗 +const showDike = ref(false); // 堤防详情弹窗 const dikeData = ref({}); function layerTreeChange(val: boolean) { showLayerTree.value = val; diff --git a/vite.config.ts b/vite.config.ts index c8c46f7..b6b94a7 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -92,7 +92,7 @@ export default defineConfig(({ mode }) => { rewrite: (path) => path.replace(/^\/api/, "/tianhui-admin-web"), }, "/api": { - target: "http://shuili.product.dev.com:30115/", // 'http://172.16.34.59:18083' + target: "http://127.0.0.1:18082", // 'http://172.16.34.59:18083' changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, "/tianhui-admin-web"), },