sl-sfy-safety/src/views/disaster/disaster-control/src/components/DisasterInfo.vue

<template>
  <div class="disaster-information" :class="{ 'disaster-information--rectification': rectification }">
    <div class="disaster-information__title">
      <div class="disaster-information--line"></div>
      <span>受灾信息</span>
    </div>
    <div class="disaster-information__content">
      <section class="disaster-information__content--loss">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="disaster-information__content--item">
              <span class="label">受灾物品：</span>
              <el-tooltip
                :content="LossReportItemFormData?.affectedItems"
                placement="top-start"
                effect="light"
                :popper-class="[
                  'custom-tooltip',
                  LossReportItemFormData?.affectedItems.length > 20 ? '' : 'custom-tooltip--opacity0',
                ]"
              >
                <span class="value">{{ LossReportItemFormData?.affectedItems }}</span>
              </el-tooltip>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="disaster-information__content--item">
              <span class="label">地点：</span>
              <el-tooltip
                :content="`${LossReportItemFormData?.buildingNo} ${LossReportItemFormData?.floorNo} ${LossReportItemFormData?.roomNo}`"
                placement="top-start"
                effect="light"
                :popper-class="[
                  'custom-tooltip',
                  `${LossReportItemFormData?.buildingNo} ${LossReportItemFormData?.floorNo} ${LossReportItemFormData?.roomNo}`
                    .length > 20
                    ? ''
                    : 'custom-tooltip--opacity0',
                ]"
              >
                <span class="value">
                  {{ LossReportItemFormData?.buildingNo }}
                  {{ LossReportItemFormData?.floorNo }}
                  {{ LossReportItemFormData?.roomNo }}
                </span>
              </el-tooltip>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="disaster-information__content--item">
              <span class="label">上报时间：</span>
              <span class="value">{{ LossReportItemFormData?.updatedAt }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="disaster-information__content--item">
              <span class="label">影响安全评估：</span>
              <span class="value">{{ getSafetyLevel(LossReportItemFormData?.safetyLevel) }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="disaster-information__content--item">
              <span class="label">是否影响正常工作：</span>
              <span class="value">
                {{ LossReportItemFormData?.isAffectWork === 1 ? '是' : '否' }}
              </span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="disaster-information__content--item" v-if="LossReportItemFormData?.estimatedLoss">
              <span class="label">损失金额评估：</span>
              <el-tooltip
                :content="LossReportItemFormData?.estimatedLoss"
                placement="top-start"
                effect="light"
                :popper-class="[
                  'custom-tooltip',
                  LossReportItemFormData?.estimatedLoss.length > 20 ? '' : 'custom-tooltip--opacity0',
                ]"
              >
                <span class="value">
                  {{ LossReportItemFormData?.estimatedLoss }}
                  <span v-if="LossReportItemFormData?.estimatedLoss.length < 20">元</span>
                </span>
              </el-tooltip>
              <span style="color: rgba(0, 0, 0, 0.65)" v-if="LossReportItemFormData?.estimatedLoss.length > 20">元</span>
            </div>
          </el-col>
        </el-row>
        <div class="disaster-information__content--item">
          <span class="label">损失描述：</span>
          <el-tooltip
            :content="LossReportItemFormData?.description"
            placement="top-start"
            effect="light"
            :popper-class="[
              'custom-tooltip',
              LossReportItemFormData?.description.length > 50 ? '' : 'custom-tooltip--opacity0',
            ]"
          >
            <span class="value">{{ LossReportItemFormData?.description }}</span>
          </el-tooltip>
        </div>
        <div
          class="disaster-information__content--item"
          v-if="LossReportItemFormData?.images && JSON.parse(LossReportItemFormData?.images).length"
        >
          <span class="label">受灾图片：</span>
          <div class="image-container">
            <el-image
              v-for="(image, index) in JSON.parse(LossReportItemFormData?.images)"
              :key="index"
              :src="image"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="JSON.parse(LossReportItemFormData?.images)"
              show-progress
              :initial-index="index"
              fit="cover"
            />
          </div>
        </div>
        <div class="disaster-information__content--item" v-if="LossReportItemFormData?.remark">
          <span class="label">备注：</span>
          <el-tooltip
            :content="LossReportItemFormData?.remark"
            placement="top-start"
            effect="light"
            :popper-class="[
              'custom-tooltip',
              LossReportItemFormData?.remark.length > 50 ? '' : 'custom-tooltip--opacity0',
            ]"
          >
            <span class="value">{{ LossReportItemFormData?.remark }}</span>
          </el-tooltip>
        </div>
      </section>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { useDisasterControlHook } from '../hook';
  import type { disasterReportRecordDetailListResponse, LossRecordListDetail } from '@/types/disaster-control';

  defineProps<{
    LossReportItemFormData: disasterReportRecordDetailListResponse | LossRecordListDetail;
    rectification?: boolean;
  }>();

  const { getSafetyLevel, getSafetyLevelDict } = useDisasterControlHook();
  onMounted(() => {
    getSafetyLevelDict();
  });
</script>

<style lang="scss" scoped>
  @use '../style/view-item.scss' as *;
  .disaster-information--rectification {
    background-color: $white-color;
    padding: 10px;
    border-radius: 4px;
  }
</style>