bxztApp/packages/screen/src/views/EquipmentManagement/detailDialog.vue

<template>
  <div>
    <el-drawer v-model="visible" size="700px" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="drawer-header">
          <el-icon class="el-icon--close" @click="close">
            <Close />
          </el-icon>
          <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
        </div>
      </template>
      <div v-if="equipment" class="drawer-content">
        <!-- 基础信息 -->
        <div class="info-box">
          <div class="info-title-block">
            <span class="title-text">基础信息</span>
          </div>
          <div class="info-content-block flex">
            <div class="left-wrapper">
              <div class="info-item-list-wrapper">
                <div class="info-item" v-for="(item, index) in showDataConfig['基础信息']" :key="index">
                  <div class="label">{{ item.label }}</div>
                  <div class="value">{{ equipment[item.name] }}</div>
                </div>
              </div>
            </div>
            <div class="right-wrapper">
              <div>
                <el-tag v-if="equipment.sbzt === '完好'" type="success" size="small">完好</el-tag>
                <el-tag v-if="equipment.sbzt === '损坏'" type="danger" size="small">损坏</el-tag>
                <el-tag v-if="equipment.sbzt === '报废'" type="danger" size="small">报废</el-tag>
              </div>
              <div class="photo-block">
                <el-image v-if="defaultPhoto" style="width: 100%; height: 100%" :src="defaultPhoto" :zoom-rate="1.2"
                  :max-scale="7" :min-scale="0.2" :preview-src-list="photos" show-progress :initial-index="4"
                  fit="cover" />
                <div v-else class="no-photo">
                  <span>暂无图片</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 设备位置 -->
        <DetailInfoBox class="detail-info-box" :data="equipment" :title="'设备位置'" :dataConfig="showDataConfig['设备位置']" />

        <!-- 设备管理情况 -->
        <DetailInfoBox class="detail-info-box" :data="equipment" :title="'设备管理情况'"
          :dataConfig="showDataConfig['设备管理情况']" />
      </div>

      <!-- 设备情况 -->
      <template v-for="(item, index) in statusList">
        <DetailInfoBox class="detail-info-box" :data="item" :title="index == 0 ? '设备情况' : ''"
          :dataConfig="showDataConfig['设备情况']" />
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Close } from '@element-plus/icons-vue'
import DetailInfoBox from '@/component/DetailInfoBox/DetailInfoBox.vue'
import { formatDate } from '../../../../shared/utils'

const visible = ref(false)
const title = ref('设备详情')
const equipment = ref(null)
const statusList = ref([])
const defaultPhoto = ref('')
const photos = ref([])
const showDialog = (data) => {
  equipment.value = data.equipment || {}
  statusList.value = data.statusList || []
  photos.value = data.photos?.length ? data.photos.map((item) => item.photoUrl) : []
  defaultPhoto.value = photos.value && photos.value[0] || null
  visible.value = true
}

const showDataConfig = ref({
  '基础信息':
    [{
      "label": "设备名称",
      "name": "sbmc"
    }, {
      "label": "设备大类",
      "name": "sbdl"
    }, {
      "label": "设备类型",
      "name": "sblx"
    }, {
      "label": "设备编号",
      "name": "sbbh"
    }, {
      "label": "设备型号",
      "name": "sbxh"
    }, {
      "label": "生产商",
      "name": "sccj"
    }, {
      "label": "所属服务站",
      "name": "yhzmc"
    }, {
      "label": "上传人",
      "name": "czy"
    }, {
      "label": "上传时间",
      "name": "tjsj"
    }, {
      "label": "备注",
      "name": "remark"
    }],
  "设备位置": [{ "label": "设备位置", "name": "sbwz" }, { "label": "设备经度", "name": "jd" }, { "label": "设备纬度", "name": "wd" }],
  "设备管理情况": [
    { "label": "设备管理人员", "name": "glry" },
    { "label": "操作员", "name": "czy" },
    {
      "label": "购置日期", "name": "gzrq", 
      "value": (item) => {
        return formatDate(item.gzrq)
      }
    },
    { "label": "购买费用（万元）", "name": "gmfy" },
    { "label": "应急设备", "name": "sfyjsb" },
    { "label": "纳入市级补助范围", "name": "sfnrsjbz" },
    { "label": "辐射范围", "name": "fsfw" }
  ],
  "设备情况": [
    {
      "label": (item) => {
        if (item.equipmentStatus == '正常') return '设备状态'
        if (item.equipmentStatus == '损坏') return '损坏原因'
        if (item.equipmentStatus == '报废') return '报废原因'
      },
      "value": (item) => {
        if (item.equipmentStatus == '正常') return '正常'
        if (item.equipmentStatus == '损坏') return item.statusDesc
        if (item.equipmentStatus == '报废') return item.statusDesc
      }
    },
    {
      "label": "上报时间",
      "value": (item) => {
        return formatDate(item.reportTime)
      }
    },
    {
      "label": "上报人",
      "name": "userName"
    }
  ]
})

defineExpose({
  showDialog
})

</script>

<style lang="scss" scoped>
.drawer-header {
  display: flex;
  align-items: center;

  .el-icon--close {
    font-size: 20px;
    margin-right: 10px;
    cursor: pointer;
  }
}

.info-box {
  width: 100%;

  .info-title-block {
    margin: 10px 0;

    .title-text {
      font-size: 16px;
      font-weight: 600;
    }
  }

  .info-content-block {
    width: 100%;
    padding: 15px;
    background-color: #fff;
    border-radius: 6px;

    .info-item-list-wrapper {
      display: grid;
      width: 100%;
      row-gap: 15px;

      .info-item {
        display: flex;
        align-items: center;
        width: 100%;

        .label {
          display: flex;
          align-items: center;
          font-size: 14px;
          margin-right: 10px;
          line-height: 14px;
          white-space: nowrap;

          &::after {
            content: ":"
          }
        }

        .value {
          line-height: 14px;
          font-size: 14px;
          white-space: nowrap;
        }

      }
    }


  }

  .info-content-block.flex {
    display: flex;
    justify-content: space-between;

    .right-wrapper {
      display: flex;
      gap: 30px;

      .photo-block {
        width: 150px;
        height: 167px;

        .no-photo {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #f5f5f5;
          border-radius: 6px;
          color: #999;
        }
      }
    }
  }
}

:deep(.detail-info-box) {
  .info-item-list-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

:deep(.el-drawer__header) {
  margin-bottom: 20px;
}

:deep(.el-drawer__body) {
  padding: 15px;
  background-color: rgb(242, 242, 242);
}
</style>