xiaodou-ai-admin/src/pages/Iot/dashboard/deviceAccess/index.vue

<template>
    <a-card
      title="功能介绍"
    >
      <a-row :gutter="[8, 8]" justify="space-between" >
        <a-col :xs='24' :sm="24" :md='16' :lg="16" :xl="14" >
          在物联网平台中，某一类具有相同能力或特征的设备的合集被称为一款产品。
          如果您希望使用平台查看设备上报的数据信息，并对设备进行管理控制，就需要开发产品模型(Profile)。定义Profile，使平台理解该款设备支持的属性、命令等信息。根据产品的接入协议、数据格式等可能还需要您定义其他相关的内容 了解更多
        </a-col>
        <a-col :xs='24' :sm="24" :md='8' :lg="8" :xl="8" >
          <img style="width: 100%" :src="staticImg.productIntroduction" alt="">
        </a-col>
      </a-row>
    </a-card>

    <!-- 协议 -->
    <a-card
      style="margin-top: 20px"
    >
      <table-pro
        :request="CommonController.getTransport"
        :columns="columns"

      />
    </a-card>

    <!-- 资源 -->
    <a-card title="资源概览" style="margin-top: 20px">
      <a-row :gutter="[8, 8]" justify="space-between" >
        <a-col
          v-for="item in sourceList"
          :key="item.name"
          class="product-item"
          :xs='24' :sm="24" :md='7' :lg="7" :xl="7"
        >
          <span>{{item.name}}</span>
          <span>{{item.value}}</span>
        </a-col>
      </a-row>
    </a-card>
</template>

<script setup lang="ts" >
import { CommonController } from '@/controller/index'
import { useStaticImg } from '@/utils/static'

const staticImg = useStaticImg()

const columns = [
  {
    title: '接入协议(端口号)',
    dataIndex: 'port',
    key: 'port'
  },
  {
    title: '接入地址',
    dataIndex: 'address',
    key: 'address'
  },
  {
    title: '操作',
    key: 'action',
    list: [
      {
        name: '复制',
        use: 'copy',
        bindKey: 'address'
      }
    ]
  }
]

const sourceList = [
  {
    name: '产品数',
    value: 13
  },
  {
    name: '联动规则',
    value: 26
  },
  {
    name: '转发规则',
    value: 7
  },
  {
    name: '设备总数',
    value: 99
  },
  {
    name: '在线设备总数',
    value: 23
  },
  {
    name: '激活设备总数',
    value: 88
  }
]

</script>

<style>
.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(16,103,238,.04);
  height: 40px;
  padding: 0 18px !important;
  box-sizing: border-box;
}
</style>