yjdp-web/src/views/emergencyCommandMap/RightSection/disasterAssessment.vue

<template>
  <Dialog custom-show type="lg" title="灾害评估" hide-footer @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="common-btn" @click="cancelEdit">
          <div class="text">取消</div>
        </div>
        <div class="common-btn-primary" @click="saveEdit">
          <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: 130px;
    .td {
      flex: 1;
      padding: 8px;

      .address-box {
        .address-text {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .edit-input {
          width: 100%;
          padding: 4px;
          border: 1px solid #ccc;
          border-radius: 4px;
          text-align: center;
        }
        :deep(.el-input-number) {
          width: 60%;
        }
      }
    }
  }
}
.custom-input {
  :deep(.el-input-number__increase) {
    background-color: #ffffff;
    width: 50px;
    font-size: 25px;
  }
  :deep(.el-input-number__decrease) {
    background-color: #ffffff;
    width: 50px;
    font-size: 25px;
  }
}
.btn-box {
  flex: 1;
  //height: 421px;
  display: flex;
  justify-content: center;
  align-items: center;
  .btn {
    width: 361px;
    height: 136px;
    background: url('@/assets/images/emergencyCommandMap/communication/btn.png') no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .icon1,
    .icon2,
    .icon3 {
      margin-right: 20px;
      margin-top: 10px;
    }
    .icon1 {
      width: 64px;
      height: 67px;
      background: url('@/assets/images/emergencyCommandMap/communication/icon1.png') no-repeat;
    }
    .icon2 {
      width: 64px;
      height: 65px;
      background: url('@/assets/images/emergencyCommandMap/communication/icon2.png') no-repeat;
    }
    .icon3 {
      width: 64px;
      height: 63px;
      background: url('@/assets/images/emergencyCommandMap/communication/icon3.png') no-repeat;
    }
    .text {
      color: #fff;
      font-size: 38px;
    }
  }
}
</style>