You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.5 KiB
106 lines
3.5 KiB
<script lang="ts" setup> |
|
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' |
|
|
|
const { data, scheam } = useDeviceInfo() |
|
|
|
const { |
|
modelServiceList, |
|
selectedModelId, |
|
setSelectedModelId, |
|
} = useModelService(() => data.value?.productId) |
|
|
|
const { |
|
isLoading, |
|
deviceProperties, |
|
reloadReviceProperties, |
|
} = useDeviceProperties(() => selectedModelId.value, () => data.value?.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" /> |
|
</div> |
|
</div> |
|
</Card> |
|
</div> |
|
</template>
|
|
|