|
|
@@ -0,0 +1,283 @@
|
|
|
+<template>
|
|
|
+ <Dialog custom-show type="lg" title="灾害评估" @close="closeDialog">
|
|
|
+ <!-- 表格组件 -->
|
|
|
+ <div class="common-table">
|
|
|
+ <div class="table-header">
|
|
|
+ <div class="td">行政区划</div>
|
|
|
+ <div class="td">受灾人数（人）</div>
|
|
|
+ <div class="td">失踪人数（人）</div>
|
|
|
+ <div class="td">死亡人数（人）</div>
|
|
|
+ <div class="td">紧急转移（人）</div>
|
|
|
+ <div class="td">直接经济损失（万元）</div>
|
|
|
+ </div>
|
|
|
+ <div v-for="(item, index) in fixedTableData" :key="index" class="tr">
|
|
|
+ <div class="td">
|
|
|
+ <div class="address-box">
|
|
|
+ <div class="address-text" :title="item.address">{{ item.address }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="td">
|
|
|
+ <div class="address-box">
|
|
|
+ <el-input-number v-if="isEditing" v-model="item.numone" class="custom-input" :min="0" />
|
|
|
+ <div v-else class="address-text">{{ item.numone }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="td">
|
|
|
+ <div class="address-box">
|
|
|
+ <el-input-number v-if="isEditing" v-model="item.numtwo" class="custom-input" :min="0" />
|
|
|
+ <div v-else class="address-text">{{ item.numtwo }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="td">
|
|
|
+ <div class="address-box">
|
|
|
+ <el-input-number v-if="isEditing" v-model="item.numthree" class="custom-input" :min="0" />
|
|
|
+ <div v-else class="address-text">{{ item.numthree }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="td">
|
|
|
+ <div class="address-box">
|
|
|
+ <el-input-number v-if="isEditing" v-model="item.numfour" class="custom-input" :min="0" />
|
|
|
+ <div v-else class="address-text">{{ item.numfour }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="td">
|
|
|
+ <div class="address-box">
|
|
|
+ <el-input-number v-if="isEditing" v-model="item.numfive" class="custom-input" :min="0" />
|
|
|
+ <div v-else class="address-text">{{ item.numfive }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 合计行 -->
|
|
|
+ <div class="tr total-row">
|
|
|
+ <div class="td">
|
|
|
+ <div class="address-box">
|
|
|
+ <div class="address-text">合计</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="td">
|
|
|
+ <div class="address-box">
|
|
|
+ <div class="address-text">{{ total.numone }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="td">
|
|
|
+ <div class="address-box">
|
|
|
+ <div class="address-text">{{ total.numtwo }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="td">
|
|
|
+ <div class="address-box">
|
|
|
+ <div class="address-text">{{ total.numthree }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="td">
|
|
|
+ <div class="address-box">
|
|
|
+ <div class="address-text">{{ total.numfour }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="td">
|
|
|
+ <div class="address-box">
|
|
|
+ <div class="address-text">{{ total.numfive }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="!isEditing" class="btn-box">
|
|
|
+ <div class="btn" @click="toggleEdit">
|
|
|
+ <div class="text">编辑</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="isEditing" style="display: flex">
|
|
|
+ <div class="btn-box">
|
|
|
+ <div class="btn" @click="saveEdit">
|
|
|
+ <div class="text">保存</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn-box">
|
|
|
+ <div class="btn" @click="cancelEdit">
|
|
|
+ <div class="text">取消</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { computed, ref } from 'vue';
|
|
|
+
|
|
|
+// 固定的行政区域列表
|
|
|
+const fixedRegions = ['茂名市', '茂南区', '电白区', '化州市', '高州市', '信宜市'];
|
|
|
+
|
|
|
+// 编辑状态
|
|
|
+const isEditing = ref(false);
|
|
|
+// 保存编辑前的原始数据
|
|
|
+const originalData = ref([]);
|
|
|
+
|
|
|
+// 原始数据
|
|
|
+const tableData = ref([]);
|
|
|
+
|
|
|
+// 固定区域的数据
|
|
|
+const fixedTableData = ref([]);
|
|
|
+
|
|
|
+// 合并固定区域和数据的函数
|
|
|
+const mergeDataWithFixedRegions = () => {
|
|
|
+ fixedTableData.value = fixedRegions.map((region) => {
|
|
|
+ // 查找是否有该区域的数据
|
|
|
+ const foundData = tableData.value.find((item) => item.address === region);
|
|
|
+
|
|
|
+ // 如果有数据则使用，否则使用默认值0
|
|
|
+ return (
|
|
|
+ foundData || {
|
|
|
+ address: region,
|
|
|
+ numone: 0,
|
|
|
+ numtwo: 0,
|
|
|
+ numthree: 0,
|
|
|
+ numfour: 0,
|
|
|
+ numfive: 0
|
|
|
+ }
|
|
|
+ );
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 计算合计值
|
|
|
+const total = computed(() => {
|
|
|
+ return {
|
|
|
+ numone: fixedTableData.value.reduce((sum, item) => sum + (Number(item.numone) || 0), 0),
|
|
|
+ numtwo: fixedTableData.value.reduce((sum, item) => sum + (Number(item.numtwo) || 0), 0),
|
|
|
+ numthree: fixedTableData.value.reduce((sum, item) => sum + (Number(item.numthree) || 0), 0),
|
|
|
+ numfour: fixedTableData.value.reduce((sum, item) => sum + (Number(item.numfour) || 0), 0),
|
|
|
+ numfive: fixedTableData.value.reduce((sum, item) => sum + (Number(item.numfive) || 0), 0)
|
|
|
+ };
|
|
|
+});
|
|
|
+
|
|
|
+// 切换编辑状态
|
|
|
+const toggleEdit = () => {
|
|
|
+ // 进入编辑时保存当前数据快照
|
|
|
+ originalData.value = JSON.parse(JSON.stringify(fixedTableData.value));
|
|
|
+ isEditing.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const saveEdit = () => {
|
|
|
+ isEditing.value = false;
|
|
|
+ // 保存数据到tableData
|
|
|
+ tableData.value = fixedTableData.value.filter(
|
|
|
+ (item) => item.numone !== 0 || item.numtwo !== 0 || item.numthree !== 0 || item.numfour !== 0 || item.numfive !== 0
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+const cancelEdit = () => {
|
|
|
+ // 恢复编辑前的数据
|
|
|
+ fixedTableData.value = JSON.parse(JSON.stringify(originalData.value));
|
|
|
+ isEditing.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+const emit = defineEmits(['update:show']);
|
|
|
+const closeDialog = () => {
|
|
|
+ emit('update:show', false);
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ tableData.value = [
|
|
|
+ {
|
|
|
+ address: '',
|
|
|
+ numone: 0,
|
|
|
+ numtwo: 0,
|
|
|
+ numthree: 0,
|
|
|
+ numfour: 0,
|
|
|
+ numfive: 0
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ mergeDataWithFixedRegions();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.common-table {
|
|
|
+ .total-row {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-header,
|
|
|
+ .tr {
|
|
|
+ display: flex;
|
|
|
+ height: 45px;
|
|
|
+ .td {
|
|
|
+ flex: 1;
|
|
|
+ padding: 3px;
|
|
|
+
|
|
|
+ .address-box {
|
|
|
+ .address-text {
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .edit-input {
|
|
|
+ width: 100%;
|
|
|
+ padding: 1px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 1px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ :deep(.el-input-number) {
|
|
|
+ width: 60%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.custom-input {
|
|
|
+ :deep(.el-input-number__increase) {
|
|
|
+ background-color: #ffffff;
|
|
|
+ width: 16px;
|
|
|
+ font-size: 8px;
|
|
|
+ }
|
|
|
+ :deep(.el-input-number__decrease) {
|
|
|
+ background-color: #ffffff;
|
|
|
+ width: 16px;
|
|
|
+ font-size: 8px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.btn-box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ .btn {
|
|
|
+ width: 114px;
|
|
|
+ height: 43px;
|
|
|
+ background: url('@/assets/images/emergencyCommandMap/communication/btn.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ .icon1,
|
|
|
+ .icon2,
|
|
|
+ .icon3 {
|
|
|
+ margin-top: 3px;
|
|
|
+ }
|
|
|
+ .icon1 {
|
|
|
+ width: 19px;
|
|
|
+ height: 20px;
|
|
|
+ background: url('@/assets/images/emergencyCommandMap/communication/icon1.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .icon2 {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background: url('@/assets/images/emergencyCommandMap/communication/icon2.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .icon3 {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background: url('@/assets/images/emergencyCommandMap/communication/icon3.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
