<script lang="ts" setup> import { toRef } from 'vue' import { Card, Empty } from 'ant-design-vue' import { FieldTimeOutlined, SyncOutlined } from '@ant-design/icons-vue' import { useDeviceInfo } from './composables/useDeviceInfo' import { useDeviceProperties } from './composables/useDeviceProperties' import { Description } from '@/components/Description' import { useModelService } from '@/views/product/components/composables/useModelService' import { usePermission } from '@/hooks/web/usePermission' import { ProductTabEnums } from '@/views/product/data' import type { Device } from '@/api/device-manage/device/types' const props = defineProps<{ data?: Device }>() const { scheam } = useDeviceInfo(toRef(props, 'data')) const { modelServiceList, selectedModelId, setSelectedModelId, } = useModelService(() => props.data?.productId) const { isLoading, deviceProperties, reloadReviceProperties, } = useDeviceProperties(() => selectedModelId.value, () => props.data?.deviceSn) const { hasPermission } = usePermission() </script> <template> <div> <Description :schema="scheam" :data="data" :column="2" :label-style="{ width: '130px' }" /> <Card v-if="hasPermission('device_report_view')" mt="15px"> <div flex="~ items-center justify-between"> <div font-bold> 最新上报数据 </div> <div flex="~ items-center"> <span v-if="deviceProperties?.updateTime" text="gray-400 center" mr="12px"> 更新时间: {{ deviceProperties.updateTime }} </span> <a-button size="small" @click="reloadReviceProperties"> <SyncOutlined /> 刷新 </a-button> </div> </div> <div v-loading="isLoading" flex="~ gap-12px" mt="12px"> <div w="20%" border="0 r-1 solid gray-50"> <div v-for="item in modelServiceList" :key="item.id" flex="~ items-center justify-between" class="box-border h-60px cursor-pointer pl-10px hover:bg-gray-100" border="0 b-1 solid gray-50" :class="selectedModelId === item.id ? 'bg-gray-100' : ''" @click="setSelectedModelId(item.id)" > <div> <div truncate> {{ item.serviceId }} </div> <div mt="5px" text="12px gray-500" truncate :title="item.description"> {{ item.description }} </div> </div> </div> </div> <div v-if="deviceProperties?.properties" w-0 flex-1 grid="~ cols-4 rows-[160px] auto-rows-[160px] gap-12px" > <div v-for="item in deviceProperties.properties" :key="item.identifier" p="15px" box-border rounded shadow="hover:lg" transition="shadow" flex="~ col justify-between" style="background: linear-gradient(to right, rgba(243, 244, 246, 1), rgba(209, 216, 224, 1));" > <div> <div font-500 text="16px"> {{ item.name }} </div> <div text="gray-500"> {{ item.identifier }} </div> </div> <div text="22px center"> "{{ item.unit || 'null' }}" </div> <div text="right gray-500 hover:gray-800"> <span v-if="hasPermission('device_report_history')" class="cursor-pointer"> <FieldTimeOutlined /> 历史 </span> </div> </div> </div> <div v-else text="center" flex-1> <Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" /> <a-button size="small" @click="$router.push(`/product/detail/${data?.productId}/${ProductTabEnums.Model}/${selectedModelId}`)"> 点击添加属性 </a-button> </div> </div> </Card> </div> </template>