admin-web-template/src/views/device-manage/device/components/DeviceInfo.vue

<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>