简柏林 / thingskit-front · Commits

Commit 6976eda5dcd73b2e34b9584abc0c843e86786419

Authored by fengwotao
1 parent a2194ff7

feat:优化产品Topic

Inline Side-by-side
Showing 2 changed files with 212 additions and 213 deletions
1 -<script lang="ts" setup>  
2 - import { BasicTable, useTable } from '/@/components/Table';  
3 - import { list, topicTableColumn } from './topic';  
4 - import { unref } from 'vue';  
5 - import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';  
6 - import { useMessage } from '/@/hooks/web/useMessage';  
7 -  
8 - const { createMessage } = useMessage();  
9 - const [register] = useTable({  
10 - title: 'Topic',  
11 - showIndexColumn: false,  
12 - dataSource: list,  
13 - columns: topicTableColumn,  
14 - bordered: true,  
15 - showTableSetting: true,  
16 - });  
17 - const handeleCopy = (e) => {  
18 - const { isSuccessRef } = useCopyToClipboard(JSON.parse(JSON.stringify(unref(e), null, 2)));  
19 - unref(isSuccessRef);  
20 - createMessage.success('复制成功！');  
21 - };  
22 -</script>  
23 -  
24 -<template>  
25 - <!-- <section class="bg-gray-100 p-4 dark:bg-dark-900 w-full h-full"> -->  
26 - <div>  
27 - <BasicTable @register="register">  
28 - <template #function="{ record }">  
29 - <a-tooltip :title="record.function">  
30 - <a-button type="text" class="" @click="handeleCopy(record.function)">  
31 - <span>{{ record.function.slice(0, 13) }}</span>  
32 - </a-button>  
33 - </a-tooltip>  
34 - </template>  
35 - <template #release="{ record }">  
36 - <a-tooltip :title="record.release">  
37 - <a-button type="text" class="" @click="handeleCopy(record.release)">  
38 - <span>{{ record.release.slice(0, 30) }}</span>  
39 - </a-button>  
40 - </a-tooltip>  
41 - </template>  
42 - <template #subscribe="{ record }">  
43 - <a-tooltip :title="record.subscribe">  
44 - <a-button type="text" class="" @click="handeleCopy(record.subscribe)">  
45 - <span>{{ record.subscribe.slice(0, 30) }}</span>  
46 - </a-button>  
47 - </a-tooltip>  
48 - </template>  
49 - <template #platform="{ record }">  
50 - <a-tooltip :title="record.platform">  
51 - <a-button type="text" style="margin-left: -10px" @click="handeleCopy(record.platform)">  
52 - <span>{{ record.platform }}</span>  
53 - </a-button>  
54 - </a-tooltip>  
55 - </template>  
56 - <template #device="{ record }">  
57 - <a-tooltip :title="record.device">  
58 - <a-button type="text" style="margin-left: -10px" @click="handeleCopy(record.device)">  
59 - <span>{{ record.device }}</span>  
60 - </a-button>  
61 - </a-tooltip>  
62 - </template>  
63 - </BasicTable>  
64 - </div>  
65 - <!-- </section> -->  
66 -</template>  
67 -<style scoped>  
68 - :deep(.ant-table-body) {  
69 - overflow: hidden !important;  
70 - }  
71 -</style> 1 +<script lang="ts" setup>
  2 + import { BasicTable, useTable } from '/@/components/Table';
  3 + import { list, topicTableColumn } from './topic';
  4 +
  5 + const [register] = useTable({
  6 + showIndexColumn: false,
  7 + dataSource: list,
  8 + columns: topicTableColumn,
  9 + bordered: true,
  10 + showTableSetting: false,
  11 + pagination: { pageSize: 11, total: 11 },
  12 + });
  13 +</script>
  14 +
  15 +<template>
  16 + <div>
  17 + <BasicTable @register="register" />
  18 + </div>
  19 +</template>
  20 +<style scoped>
  21 + :deep(.ant-table-body) {
  22 + overflow: hidden !important;
  23 + }
  24 +</style>
1 -import { BasicColumn } from '/@/components/Table/src/types/table';  
2 -  
3 -export const topicTableColumn: BasicColumn[] = [  
4 - {  
5 - title: '设备类型',  
6 - dataIndex: 'deviceType',  
7 - width: 40,  
8 - customRender: ({ text, index }: { text: any; index: number }) => {  
9 - const obj: any = {  
10 - children: text,  
11 - attrs: {},  
12 - };  
13 - if (index === 0) {  
14 - obj.attrs.rowSpan = 6;  
15 - }  
16 - if (index > 0 && index < 6) {  
17 - obj.attrs.rowSpan = 0;  
18 - }  
19 - if (index > 6) {  
20 - obj.attrs.rowSpan = 0;  
21 - }  
22 - if (index === 6) {  
23 - obj.attrs.rowSpan = 4;  
24 - }  
25 - return obj;  
26 - },  
27 - },  
28 - {  
29 - title: '功能',  
30 - dataIndex: 'function',  
31 - width: 80,  
32 - slots: { customRender: 'function' },  
33 - },  
34 - {  
35 - title: '发布主题',  
36 - dataIndex: 'release',  
37 - width: 80,  
38 - slots: { customRender: 'release' },  
39 - },  
40 - {  
41 - title: '订阅主题',  
42 - dataIndex: 'subscribe',  
43 - width: 80,  
44 - slots: { customRender: 'subscribe' },  
45 - },  
46 - {  
47 - title: '平台',  
48 - dataIndex: 'platform',  
49 - width: 50,  
50 - slots: { customRender: 'platform' },  
51 - },  
52 - {  
53 - title: '设备',  
54 - dataIndex: 'device',  
55 - width: 50,  
56 - slots: { customRender: 'device' },  
57 - },  
58 -];  
59 -  
60 -export const list = [  
61 - {  
62 - deviceType: '网关/直连设备',  
63 - function: '网关/直连设备遥测',  
64 - release: 'v1/devices/me/telemetry',  
65 - subscribe: 'v1/devices/me/telemetry',  
66 - platform: '订阅',  
67 - device: '发布',  
68 - },  
69 - {  
70 - deviceType: '网关/直连设备',  
71 - function: '服务端命令下发到设备端',  
72 - release: 'v1/devices/me/rpc/request/$request_id',  
73 - subscribe: 'v1/devices/me/rpc/request/+',  
74 - platform: '发布',  
75 - device: '订阅',  
76 - },  
77 - {  
78 - deviceType: '网关/直连设备',  
79 - function: '设备端响应命令到服务端',  
80 - release: 'v1/devices/me/rpc/response/$request_id',  
81 - subscribe: 'v1/devices/me/rpc/response/+',  
82 - platform: '订阅',  
83 - device: '发布',  
84 - },  
85 - {  
86 - deviceType: '网关/直连设备',  
87 - function: '直连设备属性上报',  
88 - release: 'v1/devices/me/attributes',  
89 - subscribe: 'v1/devices/me/attributes',  
90 - platform: '订阅',  
91 - device: '发布',  
92 - },  
93 -  
94 - {  
95 - deviceType: '网关/直连设备',  
96 - function: '设备端请求服务端共享属性及客户端属性',  
97 - release: 'v1/devices/me/attributes/response/$request_id',  
98 - subscribe: 'v1/devices/me/attributes/response/+',  
99 - platform: '订阅',  
100 - device: '发布',  
101 - },  
102 - {  
103 - deviceType: '网关/直连设备',  
104 - function: '服务端响应共享属性集客户端属性给设备端',  
105 - release: 'v1/devices/me/attributes/response/$request_id',  
106 - subscribe: 'v1/devices/me/attributes/response/+',  
107 - platform: '发布',  
108 - device: '订阅',  
109 - },  
110 - {  
111 - deviceType: '网关子设备',  
112 - function: '设备端请求服务端子设备共享属性及客户端属性',  
113 - release: 'v1/gateway/attributes/request',  
114 - subscribe: 'v1/gateway/attributes/request',  
115 - platform: '订阅',  
116 - device: '发布',  
117 - },  
118 - {  
119 - deviceType: '网关子设备',  
120 - function: '服务端响应子设备共享属性及客户端属性给设备端',  
121 - release: 'v1/gateway/attributes/response',  
122 - subscribe: 'v1/gateway/attributes/response',  
123 - platform: '发布',  
124 - device: '订阅',  
125 - },  
126 - {  
127 - deviceType: '网关子设备',  
128 - function: '设备端上报子设备客户端属性',  
129 - release: 'v1/gateway/attributes',  
130 - subscribe: 'v1/gateway/attributes',  
131 - platform: '订阅',  
132 - device: '发布',  
133 - },  
134 - {  
135 - deviceType: '网关子设备',  
136 - function: '网关子设备遥测',  
137 - release: 'v1/gateway/telemetry',  
138 - subscribe: 'v1/gateway/telemetry',  
139 - platform: '订阅',  
140 - device: '发布',  
141 - },  
142 -]; 1 +import { BasicColumn } from '/@/components/Table/src/types/table';
  2 +import { h, unref } from 'vue';
  3 +import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  4 +import { useMessage } from '/@/hooks/web/useMessage';
  5 +const { createMessage } = useMessage();
  6 +
  7 +const handeleCopy = (e) => {
  8 + const { isSuccessRef } = useCopyToClipboard(JSON.parse(JSON.stringify(unref(e), null, 2)));
  9 + unref(isSuccessRef);
  10 + createMessage.success('复制成功！');
  11 +};
  12 +
  13 +export const topicTableColumn: BasicColumn[] = [
  14 + {
  15 + title: '设备类型',
  16 + dataIndex: 'deviceType',
  17 + width: 40,
  18 + align: 'left',
  19 + customRender: ({ text, index }: { text: any; index: number }) => {
  20 + const obj: any = {
  21 + children: text,
  22 + attrs: {},
  23 + };
  24 + if (text !== '网关/直连/网关子设备') {
  25 + if (index === 0) {
  26 + obj.attrs.rowSpan = 6;
  27 + }
  28 + if (index > 0 && index < 6) {
  29 + obj.attrs.rowSpan = 0;
  30 + }
  31 + if (index > 6) {
  32 + obj.attrs.rowSpan = 0;
  33 + }
  34 + if (index === 6) {
  35 + obj.attrs.rowSpan = 4;
  36 + }
  37 + return obj;
  38 + } else {
  39 + return obj;
  40 + }
  41 + },
  42 + },
  43 + {
  44 + title: '功能',
  45 + dataIndex: 'function',
  46 + width: 80,
  47 + align: 'left',
  48 + slots: { customRender: 'function' },
  49 + },
  50 + {
  51 + title: '发布主题',
  52 + dataIndex: 'release',
  53 + width: 80,
  54 + align: 'left',
  55 + customRender: ({ text }: { text: any }) => {
  56 + return h(
  57 + 'span',
  58 + {
  59 + onClick: () => {
  60 + handeleCopy(text);
  61 + },
  62 + },
  63 + text
  64 + );
  65 + },
  66 + },
  67 + {
  68 + title: '订阅主题',
  69 + dataIndex: 'subscribe',
  70 + width: 80,
  71 + align: 'left',
  72 + customRender: ({ text }: { text: any }) => {
  73 + return h(
  74 + 'span',
  75 + {
  76 + onClick: () => {
  77 + handeleCopy(text);
  78 + },
  79 + },
  80 + text
  81 + );
  82 + },
  83 + },
  84 + {
  85 + title: '平台',
  86 + dataIndex: 'platform',
  87 + width: 30,
  88 + slots: { customRender: 'platform' },
  89 + },
  90 + {
  91 + title: '设备',
  92 + dataIndex: 'device',
  93 + width: 30,
  94 + slots: { customRender: 'device' },
  95 + },
  96 +];
  97 +
  98 +export const list = [
  99 + {
  100 + deviceType: '网关/直连设备',
  101 + function: '网关/直连设备遥测',
  102 + release: 'v1/devices/me/telemetry',
  103 + subscribe: 'v1/devices/me/telemetry',
  104 + platform: '订阅',
  105 + device: '发布',
  106 + },
  107 + {
  108 + deviceType: '网关/直连设备',
  109 + function: '服务端命令下发到设备端',
  110 + release: 'v1/devices/me/rpc/request/$request_id',
  111 + subscribe: 'v1/devices/me/rpc/request/+',
  112 + platform: '发布',
  113 + device: '订阅',
  114 + },
  115 + {
  116 + deviceType: '网关/直连设备',
  117 + function: '设备端响应命令到服务端',
  118 + release: 'v1/devices/me/rpc/response/$request_id',
  119 + subscribe: 'v1/devices/me/rpc/response/+',
  120 + platform: '订阅',
  121 + device: '发布',
  122 + },
  123 + {
  124 + deviceType: '网关/直连设备',
  125 + function: '直连设备属性上报',
  126 + release: 'v1/devices/me/attributes',
  127 + subscribe: 'v1/devices/me/attributes',
  128 + platform: '订阅',
  129 + device: '发布',
  130 + },
  131 +
  132 + {
  133 + deviceType: '网关/直连设备',
  134 + function: '设备端请求服务端共享属性及客户端属性',
  135 + release: 'v1/devices/me/attributes/response/$request_id',
  136 + subscribe: 'v1/devices/me/attributes/response/+',
  137 + platform: '订阅',
  138 + device: '发布',
  139 + },
  140 + {
  141 + deviceType: '网关/直连设备',
  142 + function: '服务端响应共享属性集客户端属性给设备端',
  143 + release: 'v1/devices/me/attributes/response/$request_id',
  144 + subscribe: 'v1/devices/me/attributes/response/+',
  145 + platform: '发布',
  146 + device: '订阅',
  147 + },
  148 + {
  149 + deviceType: '网关子设备',
  150 + function: '设备端请求服务端子设备共享属性及客户端属性',
  151 + release: 'v1/gateway/attributes/request',
  152 + subscribe: 'v1/gateway/attributes/request',
  153 + platform: '订阅',
  154 + device: '发布',
  155 + },
  156 + {
  157 + deviceType: '网关子设备',
  158 + function: '服务端响应子设备共享属性及客户端属性给设备端',
  159 + release: 'v1/gateway/attributes/response',
  160 + subscribe: 'v1/gateway/attributes/response',
  161 + platform: '发布',
  162 + device: '订阅',
  163 + },
  164 + {
  165 + deviceType: '网关子设备',
  166 + function: '设备端上报子设备客户端属性',
  167 + release: 'v1/gateway/attributes',
  168 + subscribe: 'v1/gateway/attributes',
  169 + platform: '订阅',
  170 + device: '发布',
  171 + },
  172 + {
  173 + deviceType: '网关子设备',
  174 + function: '网关子设备遥测',
  175 + release: 'v1/gateway/telemetry',
  176 + subscribe: 'v1/gateway/telemetry',
  177 + platform: '订阅',
  178 + device: '发布',
  179 + },
  180 + {
  181 + deviceType: '网关/直连/网关子设备',
  182 + function: '事件上报',
  183 + release: 'v1/devices/event/${deviceId}/${identifier}/{$eventType}',
  184 + subscribe: 'v1/devices/event/${deviceId}/${identifier}/{$eventType}',
  185 + platform: '订阅',
  186 + device: '发布',
  187 + },
  188 +];