灾害评估

src/types/components.d.ts

@@ -25,6 +25,7 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRow: typeof import('element-plus/es')['ElRow']

src/views/emergencyCommandMap/RightSection/disasterAssessment.vue

@@ -0,0 +1,282 @@
+<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: 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;
+  flex-direction: column;
+  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>

src/views/emergencyCommandMap/RightSection/index.vue

@@ -13,12 +13,12 @@
         </div>
         <div class="task-text gradient-text">启动预案</div>
       </div>
-      <div class="task-item" @click="openGroupChat">
-        <div class="icon">
-          <div class="icon3"></div>
-        </div>
-        <div class="task-text gradient-text">粤政易群聊</div>
-      </div>
+<!--      <div class="task-item" @click="openGroupChat">-->
+<!--        <div class="icon">-->
+<!--          <div class="icon3"></div>-->
+<!--        </div>-->
+<!--        <div class="task-text gradient-text">粤政易群聊</div>-->
+<!--      </div>-->
       <div class="task-item" @click="openRenWuDengJi">
         <div class="icon">
           <div class="icon4"></div>
@@ -37,6 +37,12 @@
         </div>
         <div class="task-text gradient-text">值班管理</div>
       </div>
+      <div class="task-item" @click="disasterAssessment">
+        <div class="icon">
+          <div class="icon3"></div>
+        </div>
+        <div class="task-text gradient-text">灾害评估</div>
+      </div>
     </div>
     <RightTop :event-id="eventId" />
     <PublicOpinionSupervision />
@@ -47,6 +53,7 @@
     <RenWuDengJi v-if="renWuDengJiState.show" v-model:show="renWuDengJiState.show" :event-id="eventId" />
     <dutyManagement v-if="dutyManagementState.show" v-model:show="dutyManagementState.show" :event-id="eventId" />
     <knowledgeWarehouse v-if="knowledgeWarehouseState.show" v-model:show="knowledgeWarehouseState.show" :event-id="eventId" />
+    <DisasterAssessment v-if="disasterAssessmentState.show" v-model:show="disasterAssessmentState.show" :event-id="eventId" />
     <Dialog v-model="showTip" title="提示" type="xs">
       <div style="display: flex; justify-content: center; align-items: center; font-size: 44px;">功能建设中……</div>
     </Dialog>
@@ -66,6 +73,7 @@ import PublicOpinionSupervision from '@/views/emergencyCommandMap/RightSection/P
 import RenWuDengJi from '@/views/emergencyCommandMap/RightSection/RenWuDengJi.vue';
 import dutyManagement from './dutyManagement.vue';
 import knowledgeWarehouse from './knowledgeWarehouse.vue';
+import DisasterAssessment from '@/views/emergencyCommandMap/RightSection/disasterAssessment.vue';
 
 const route = useRoute();
 let eventId = ref('');
@@ -89,6 +97,14 @@ const openKnowledgeWarehouse = () => {
   knowledgeWarehouseState.show = true;
 };
 
+const disasterAssessmentState = reactive({
+  show: false
+});
+// 打开灾害评估弹窗
+const disasterAssessment = () => {
+  disasterAssessmentState.show = true;
+};
+
 // 创建任务登记弹窗的状态管理
 const renWuDengJiState = reactive({
   show: false