pms-iot-vue/src/views/pms/device/DeviceInfo.vue

<template>
  <ContentWrap>
    <div style="display: flex; flex-direction: row; height: 12em; margin-top: 2px">
      <div style="flex: 1; height: 12em; margin-left: 20px">
        <el-image
          :key="index"
          :src="defaultPicUrl"
          style="width: 35em; height: 12em"
          @click="imagePreview(defaultPicUrl)"
          fit="contain"
        />
      </div>
      <div style="flex: 2; height: 12em; margin-top: 23px">
        <el-form ref="formRef" :disabled="false" :model="formData" label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item :label="t('iotDevice.yfCode')" prop="yfDeviceCode">
                {{ formData.yfDeviceCode }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="t('iotDevice.code')" prop="deviceCode">
                {{ formData.deviceCode }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="t('chooseMaintain.deviceName')" prop="deviceName">
                {{ formData.deviceName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="t('iotDevice.brand')" prop="brand">
                {{ formData.brandName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="t('iotDevice.dept')" prop="deptId">
                {{ formData.deptName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="t('info.deviceClass')" prop="assetClass">
                {{ formData.assetClassName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="t('monitor.status')" prop="deviceStatus">
                {{ getDictLabel(DICT_TYPE.PMS_DEVICE_STATUS, formData.deviceStatus) }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="t('devicePerson.assets')" prop="assetProperty">
                {{ getDictLabel(DICT_TYPE.PMS_ASSET_PROPERTY, formData.assetProperty) }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="t('deviceForm.model')" prop="model">
                {{ formData.model ? formData.model : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="t('devicePerson.rp')" prop="responsibleNames">
                {{ formData.responsibleNames ? formData.responsibleNames : '-' }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </ContentWrap>
  <ContentWrap v-loading="formLoading">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane :label="t('deviceInfo.basicInformation')" name="info">
        <el-form style="margin-top: 5px; margin-left: 35px; margin-right: 35px">
          <el-row style="border-bottom: 1px solid #dcdfe6">
            <el-col :span="6">
              <el-form-item :label="t('deviceInfo.mfg')" prop="manufacturerId">
                {{ formData.zzName }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('deviceInfo.pd')" prop="manDate">
                {{ formatDate(formData.manDate, 'YYYY-MM-DD') }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('deviceInfo.supplier')" prop="supplierId">
                {{ formData.supplierName ? formData.supplierName : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('deviceInfo.ni')" prop="nameplate">
                {{ formData.nameplate ? formData.nameplate : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('deviceInfo.warranty')" prop="expires">
                {{ formData.expires ? formatDate(formData.expires, 'YYYY-MM-DD') : '-' }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px; border-bottom: 1px solid #dcdfe6">
            <el-col :span="6">
              <el-form-item :label="t('deviceInfo.pp')" prop="plPrice">
                {{ formData.plPrice ? formData.plPrice : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('deviceInfo.pdate')" prop="plDate">
                {{ formData.plDate ? formatDate(formData.plDate, 'YYYY-MM-DD') : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('deviceInfo.dp')" prop="plYear">
                {{ formData.plYear ? formData.plYear : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('deviceInfo.ds')" prop="plStartDate">
                {{ formData.plStartDate ? formatDate(formData.plStartDate, 'YYYY-MM-DD') : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('deviceInfo.yd')" prop="plMonthed">
                {{ formData.plMonthed ? formData.plMonthed : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('deviceInfo.yy')" prop="plAmounted">
                {{ formData.plAmounted ? formData.plAmounted : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('deviceInfo.sy')" prop="remainAmount">
                {{ formData.remainAmount ? formData.remainAmount : '-' }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col v-for="field in list" :key="field.sort" :span="6">
              <el-form-item :label="field.name" :prop="field.identifier">
                {{ field.value }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="t('deviceInfo.fileLibrary')" name="file">
        <!--        <DeviceUpload ref="fileRef" v-if="loadedTabs.includes('1')" />-->
        <DeviceFile
          ref="fileRef"
          :deviceId="id"
          :deviceName="formData.deviceName"
          v-if="loadedTabs.includes('1')"
        />
      </el-tab-pane>
      <el-tab-pane :label="t('deviceInfo.deviceBOM')" name="bom">
        <BomList
          ref="bomRef"
          v-model:activeName="activeName"
          :deviceId="id"
          :deviceCategoryName="formData.assetClassName"
          v-if="loadedTabs.includes('2')"
        />
      </el-tab-pane>
      <el-tab-pane :label="t('deviceInfo.operationRecords')" name="record">
        <RecordList
          ref="recordRef"
          v-model:activeName="activeName"
          :deviceId="id"
          v-if="loadedTabs.includes('3')"
        />
      </el-tab-pane>
      <el-tab-pane :label="t('deviceInfo.faultRecords')" name="failure">
        <FailureList
          ref="failureRef"
          v-model:activeName="activeName"
          :deviceId="id"
          v-if="loadedTabs.includes('4')"
        />
      </el-tab-pane>
      <el-tab-pane :label="t('deviceInfo.repairRecords')" name="maintain">
        <MaintainList
          ref="maintainRef"
          v-model:activeName="activeName"
          :deviceId="id"
          v-if="loadedTabs.includes('5')"
        />
      </el-tab-pane>
      <el-tab-pane :label="t('deviceInfo.maintenanceRecords')" name="maintenance">
        <MaintenanceList
          ref="maintenanceRef"
          v-model:activeName="activeName"
          :deviceId="id"
          v-if="loadedTabs.includes('6')"
        />
      </el-tab-pane>
      <el-tab-pane :label="t('deviceInfo.inspectionRecords')" name="inspect">
        <InspectList
          ref="inspectRef"
          v-model:activeName="activeName"
          :deviceId="id"
          v-if="loadedTabs.includes('7')"
        />
      </el-tab-pane>
      <el-tab-pane :label="t('deviceInfo.transferRecords')" name="allot">
        <AllotLogList
          ref="allotRef"
          v-model:activeName="activeName"
          :deviceId="id"
          v-if="loadedTabs.includes('8')"
        />
      </el-tab-pane>
      <el-tab-pane :label="t('deviceInfo.statusChangeRecords')" name="status">
        <DeviceStatusLogList
          ref="statusRef"
          v-model:activeName="activeName"
          :deviceId="id"
          v-if="loadedTabs.includes('9')"
        />
      </el-tab-pane>
      <el-tab-pane :label="t('deviceInfo.RPAdjustmentRecords')" name="person">
        <PersonList
          ref="personRef"
          v-model:activeName="activeName"
          :deviceId="id"
          v-if="loadedTabs.includes('10')"
        />
      </el-tab-pane>

      <!-- 关联设备 -->
      <el-tab-pane :label="t('deviceInfo.associationDevice')" name="association">
        <AssociationDevices
          ref="personRef"
          v-model:activeName="activeName"
          :deviceId="id"
          v-if="loadedTabs.includes('11')"
        />
      </el-tab-pane>
    </el-tabs>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { IotDeviceApi, IotDeviceVO } from '@/api/pms/device'
import { DICT_TYPE, getDictLabel } from '@/utils/dict'
import { formatDate } from '../../../utils/formatTime'
import DeviceUpload from '@/views/pms/device/DeviceUpload.vue'
import BomInfo from '@/views/pms/device/bom/BomInfo.vue'
import DeviceFile from '@/views/pms/device/DeviceFile.vue'
import BomList from '@/views/pms/device/bom/BomList.vue'
import FailureList from '@/views/pms/device/FailureList.vue'
import MaintainList from '@/views/pms/device/MaintainList.vue'
import InspectList from '@/views/pms/device/InspectList.vue'
import MaintenanceList from '@/views/pms/device/maintenance/MaintenanceList.vue'
import AllotLogList from '@/views/pms/device/allotlog/AllotLogList.vue'
import DeviceStatusLogList from '@/views/pms/device/statuslog/DeviceStatusLogList.vue'
import PersonList from '@/views/pms/device/personlog/PersonList.vue'
import RecordList from '@/views/pms/device/record/RecordList.vue'
import AssociationDevices from '@/views/pms/device/completeSet/AssociationDevices.vue'
import { createImageViewer } from '@/components/ImageViewer'
import { ref, onMounted } from 'vue'

const defaultPicUrl = ref(
  import.meta.env.VITE_BASE_URL + '/admin-api/infra/file/29/get/IntegratedSolution.png'
) // 默认设备图片

defineOptions({ name: 'DeviceDetailInfo' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { params } = useRoute() // 查询参数
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const activeName = ref('info') // Tag 激活的窗口
const list = ref([])
const id = params.id
const fileRef = ref() // 搜索的表单
// SPU 表单数据
const formData = ref({
  id: undefined,
  code: undefined,
  name: undefined,
  classification: undefined,
  type: undefined,
  nature: undefined,
  creditCode: undefined,
  tin: undefined,
  corporation: undefined,
  incorporationDate: undefined,
  address: undefined,
  bizScope: undefined,
  registeredCapital: undefined,
  annualTurnove: undefined,
  size: undefined,
  status: undefined,
  remark: undefined,
  deptName: undefined
})
const pics = ref([])
const imgSrc = ref('')
const loadedTabs = ref(['info']) // 记录已加载的标签

/** 获得详情 */
const getDetail = async () => {
  if (id) {
    formLoading.value = true
    try {
      const res = (await IotDeviceApi.getIotDevice(id)) as IotDeviceVO
      formData.value = res
      pics.value.push(res.picUrl)
      if (res) {
        if (res.templateJson) {
          list.value = JSON.parse(res.templateJson)
        }
      }
      if (formData.value.picUrl) {
        defaultPicUrl.value = formData.value.picUrl
      }
    } finally {
      formLoading.value = false
    }
  }
}

const imagePreview = (imgUrl: string) => {
  createImageViewer({
    urlList: [imgUrl]
  })
}

const handleTabClick = (tab) => {
  if (!loadedTabs.value.includes(tab.index)) {
    // 这里可以添加每个标签对应的加载逻辑，如果有的话
    loadedTabs.value.push(tab.index)
  }
}

/** 初始化 */
onMounted(async () => {
  await getDetail()
})
</script>
<style scoped></style>