tjy-uniapp/src/pages/deviceExam/deviceExamDetail.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '设备详情',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="detail-container">
    <!-- 导航栏 -->
    <NavBar title="设备详情" />

    <!-- Tab 栏 -->
    <view class="tab-bar">
      <view
        v-for="(tab, index) in tabList"
        :key="tab.id"
        class="tab-item"
        :class="{ 'tab-item-active': currentTab === index }"
        @click="switchTab(index)"
      >
        <text class="tab-text">{{ tab.value }}</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="scroll-content" scroll-y>
      <!-- 基本信息 -->
      <view v-if="currentTab === 0" class="tab-content">
        <component
          :is="BaseInfoComponent"
          v-if="dataSource"
          :data-source="dataSource"
          use-online="1"
          :can-edit="false"
        />
      </view>

      <!-- 设备信息 -->
      <view v-if="currentTab === 1" class="tab-content">
        <component
          :is="EquipmentInfoComponent"
          v-if="equipmentData"
          :equipment-data="equipmentData"
          use-online="1"
          :can-edit="false"
        />
      </view>

      <!-- 历史报告 -->
      <view v-if="currentTab === 2" class="tab-content">
        <HistoryReport :equip-id="id" use-online="1" />
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { EquipmentType } from '@/utils/dictMap'
import { getEquipContainerById, getDeptListApi } from '@/api/index'
import { useConfigStore } from '@/store/config'
import { EquipFuncName, requestFunc } from '@/api/ApiRouter/equipment'
import ContainerBaseInfo from '@/pages/equipment/detail/components/ContainerBaseInfo.vue'
import BoilerBaseInfo from '@/pages/equipment/detail/components/BoilerBaseInfo.vue'
import PipeBaseInfo from '@/pages/equipment/detail/components/PipeBaseInfo.vue'
import ContainerEquipmentInfo from '@/pages/equipment/detail/components/ContainerEquipmentInfo.vue'
import BoilerEquipmentInfo from '@/pages/equipment/detail/components/BoilerEquipmentInfo.vue'
import PipeEquipmentInfo from '@/pages/equipment/detail/components/PipeEquipmentInfo.vue'
import HistoryReport from '@/pages/equipment/detail/components/HistoryReport.vue'
import NavBar from '@/components/NavBar/NavBar.vue'

interface TabItem {
  value: string
  id: string
}

const storedEquipType = useConfigStore().equipType

let equipType: EquipmentType = storedEquipType

const BaseInfoComponent = computed(() => {
  switch (equipType) {
    case EquipmentType.BOILER:
      return BoilerBaseInfo
    case EquipmentType.PIPE:
      return PipeBaseInfo
    case EquipmentType.CONTAINER:
      return ContainerBaseInfo
    default:
      return ContainerBaseInfo
  }
})

const EquipmentInfoComponent = computed(() => {
  switch (equipType) {
    case EquipmentType.BOILER:
      return BoilerEquipmentInfo
    case EquipmentType.PIPE:
      return PipeEquipmentInfo
    case EquipmentType.CONTAINER:
      return ContainerEquipmentInfo
    default:
      return ContainerEquipmentInfo
  }
})

const currentTab = ref(0)
const equipmentData = ref<any>({})
const taskOrder = ref<any>({})
const dataSource = ref<any>(null)

const tabList: TabItem[] = [
  { value: '基本信息', id: 'baseInfo' },
  { value: '设备信息', id: 'equipmentInfo' },
  { value: '历史报告', id: 'historyReport' },
]

let id = ''
let pageType = 'baseInfo'

onLoad((options: any) => {
  id = options.id || ''
  pageType = options.pageType || 'baseInfo'
  equipType = options.equipType || storedEquipType
  const initIndex = tabList.findIndex((item) => item.id === pageType)
  if (initIndex >= 0) {
    currentTab.value = initIndex
  }
})

// 切换 Tab
const switchTab = (index: number) => {
  currentTab.value = index
}

// 获取设备详情
const getEquipmentDetail = async () => {
  try {
    uni.showLoading({ title: '加载中...' })
    const result: any = await requestFunc(EquipFuncName.EquipDetail, equipType, { id })

    if (result?.data) {
      taskOrder.value = result.data

      let deptName = result.data.deptName

      if (result.data.deptId && !result.data.deptName) {
        try {
          const deptResult: any = await getDeptListApi({})
          if (deptResult?.code === 0 && deptResult?.data && Array.isArray(deptResult.data)) {
            const deptData = deptResult.data.find((dept: any) => dept.id === result.data.deptId)
            if (deptData?.name) {
              deptName = deptData.name
            }
          }
        } catch (error) {
          console.error('获取部门名称失败:', error)
        }
      }

      equipmentData.value = {
        ...result.data,
        deptName: deptName || result.data.deptName,
      }

      dataSource.value = {
        taskOrder: result.data,
        equipment: equipmentData.value,
      }
    }
  } catch (error) {
    console.error('获取设备详情失败:', error)
    uni.showToast({ title: '加载失败', icon: 'error' })
  } finally {
    uni.hideLoading()
  }
}

// 返回
const goBack = () => {
  uni.navigateBack()
}

onMounted(() => {
  if (id) {
    getEquipmentDetail()
  }
})
</script>

<style lang="scss" scoped>
.detail-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.navigate-view {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.navigate-left {
  display: flex;
  align-items: center;
}

.back-icon {
  width: 20px;
  height: 20px;
}

.navigate-title {
  font-size: 17px;
  font-weight: 500;
  color: #333;
}

.navigate-right {
  width: 20px;
}

.tab-bar {
  display: flex;
  flex-direction: row;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.tab-item {
  flex: 1;
  padding: 15px 0;
  text-align: center;
  border-bottom: 2px solid transparent;
}

.tab-item-active {
  border-bottom-color: rgb(47, 142, 255);
}

.tab-text {
  font-size: 15px;
  color: #666;
}

.tab-item-active .tab-text {
  font-weight: 500;
  color: rgb(47, 142, 255);
}

.scroll-content {
  flex: 1;
  padding: 10px;
}

.tab-content {
  min-height: 100%;
}

.section {
  margin-bottom: 10px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 5px;
}

.section-header {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.info-list {
  padding: 0 15px;
}

.info-item {
  display: flex;
  flex-direction: row;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  flex-shrink: 0;
  width: 100px;
  font-size: 14px;
  color: #666;
}

.info-value {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.empty-text {
  font-size: 14px;
  color: #999;
}
</style>