fix: 物联网首页

src/api/common/index.ts

@@ -0,0 +1,14 @@
+
+import { TransportEnum } from '@/enum/common'
+import request from '@/service/request'
+
+/**
+ * 此函数获取传输地址列表。
+ * @returns `getTransport` 函数返回一个解析为对象数组的 Promise。数组中的每个对象都有对应于“TransportEnum”值的键和代表地址的字符串的值。
+ */
+export const getTransport = () => {
+  return request<Record<TransportEnum, string>>({
+    url: '/transport/address',
+    method: 'GET'
+  })
+}

src/components/TablePro/index.vue

@@ -1,27 +1,49 @@
 <template>
-  <a-row>
     <a-table
       style="width: 100%;"
       v-bind="{...props}"
-      :dataSource="state.data"
+      :data-source="state.data"
       :loading="state.loading"
-      :pagination="state.pagination"
+      :pagination="state.pagination.total <= 10 ? false : state.pagination"
       @change="handleTableChange"
-    />
-  </a-row>
+    >
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'action'">
+        <a-space>
+          <a-row>
+            <a-col v-for="item in column.list" :key="item.name" >
+              <a @click="handleAction(item, record)" >{{item.name}}</a>
+            </a-col>
+          </a-row>
+        </a-space>
+      </template>
+    </template>
+    </a-table>
 </template>
 
 <script lang="ts" setup >
+import { useCopy } from '@/hooks/dom'
+import { ColumnsType } from 'ant-design-vue/lib/vc-table/interface'
 import { TableProps } from 'ant-design-vue/lib/vc-table/Table'
 import { onMounted, reactive, watch } from 'vue'
 
+export interface ColumnsChildren {
+  name: '',
+  use: string,
+  icon: '',
+  bindKey: string
+}
+
 export interface TablePropPorps extends TableProps {
   request: (params: any) => any
-  params: any
+  params: any,
+  columns: ColumnsType & {children: ColumnsChildren}
 }
 
 const props = defineProps<TablePropPorps>()
 
+console.log('table pro props:', props.columns[2])
+
 const state = reactive({
   loading: false,
   data: [],
@@ -29,7 +51,8 @@ const state = reactive({
     current: 1,
     total: 0,
     pageSize: 10
-  }
+  },
+  actionColumn: []
 })
 
 const handleTableChange = (pag: { pageSize: number; current: number }) => {
@@ -44,10 +67,9 @@ const request = async () => {
   state.loading = true
   const data = await props.request(props.params)
   state.loading = false
-  console.log(data)
+  console.log('table pro data:', data)
   state.data = data
 }
-
 watch(
   () => props.request,
   () => request(),
@@ -57,6 +79,13 @@ watch(
   }
 )
 
+const handleAction = (column: ColumnsChildren, record: any) => {
+  switch (column.use) {
+    case 'copy':
+      useCopy(record[column.bindKey])
+  }
+}
+
 </script>
 
 <style>

src/controller/common/common.ts

@@ -0,0 +1,13 @@
+import { getTransport } from '@/api/common'
+import { TransportEnum } from '@/enum/common'
+export class CommonController {
+  static async getTransport () {
+    const { data } = await getTransport()
+    return Object.keys(data).map(key => {
+      return {
+        port: key,
+        address: data[key as TransportEnum]
+      }
+    })
+  }
+}

src/controller/index.ts

@@ -0,0 +1 @@
+export { CommonController } from './common/common'

src/controller/iot/model.ts

@@ -1,5 +1,5 @@
 import { opraModel } from '@/api/iot/model'
-class Model {
+class ModelController {
   static list () {
 
   }
@@ -22,4 +22,4 @@ class Model {
   }
 }
 
-export default Model
+export default ModelController

src/hooks/dom.ts

@@ -0,0 +1,15 @@
+import { message } from 'ant-design-vue'
+
+/**
+ * 此 TypeScript 函数创建一个临时输入元素，将其值设置为给定字符串，将值复制到剪贴板，然后删除输入元素。
+ * @param {string} content - content 参数是一个字符串，表示需要复制到剪贴板的文本。
+ */
+export const useCopy = (content: string) => {
+  const inputValue = document.createElement('input')
+  document.body.appendChild(inputValue)
+  inputValue.value = content
+  inputValue.select()
+  document.execCommand('copy')
+  message.success('复制成功')
+  document.body.removeChild(inputValue)
+}

src/layout/layout.vue

@@ -4,8 +4,8 @@
       <a-layout>
       <Sider :router="silders" />
 
-      <a-layout style="padding: 0 24px 24px; margin-top: 20px;">
-        <Breadcrumb />
+      <a-layout style="padding: 0 24px 24px; margin-top: 20px;overflow: hidden;overflow-y: scroll;padding-bottom: 40px;">
+        <!-- <Breadcrumb /> -->
         <RouterView></RouterView>
           <!-- <a-layout-content
           :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"

src/pages/Iot/dashboard/deviceAccess/index.vue

@@ -12,10 +12,37 @@
         </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 ModelController from '@/controller/iot/model'
+import { CommonController } from '@/controller/index'
 import { useStaticImg } from '@/utils/static'
 
 const staticImg = useStaticImg()
@@ -24,8 +51,67 @@ ModelController.page().then(r => {
   console.log(r)
 })
 
+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>

src/service/request.ts

@@ -1,3 +1,4 @@
+import { message } from 'ant-design-vue'
 import axios, { AxiosInstance } from 'axios'
 
 const instance = axios.create({
@@ -5,6 +6,21 @@ const instance = axios.create({
   timeout: 10000
 })
 
+/**
+ * 该函数捕获一个错误并返回一个被拒绝的承诺。
+ * @param {any} error - `error` 参数是 `any` 类型，这意味着它可以是任何数据类型。它用作 `catchErr` 函数的输入参数。
+ * @returns `catchErr` 函数返回一个被拒绝的 Promise，并传递了 `error` 参数作为拒绝的原因。
+ */
+const catchErr = (error: any) => {
+  if (error.code === 500) {
+    message.error(error.msg)
+  } else if (error.code === 400) {
+    message.error('参数出现错误')
+  }
+
+  return Promise.reject(error)
+}
+
 instance.interceptors.request.use(config => {
   return config
 }, function (error) {
@@ -12,10 +28,8 @@ instance.interceptors.request.use(config => {
 })
 
 instance.interceptors.response.use(function (response) {
-  return response
-}, function (error) {
-  return Promise.reject(error)
-})
+  return response.data
+}, error => catchErr(error))
 
 export default function request <T> (config: any) {
   return instance.request<AxiosInstance, SERVICE.Response<T>>(config)

src/type/common.d.ts

@@ -1,6 +1,16 @@
+
 declare namespace COMMON {
-  interface QueryParams {
-    page: number,
-    pageSize: number
-  }
+
+    namespace API {
+      interface QueryParams {
+        page: number,
+        pageSize: number
+      }
+
+      interface Transport {
+        name: TransportEnum,
+        value: string
+      }
+    }
+
 }