简柏林 / 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 +];
... ...