简柏林 / thingskit-front · Commits

Commit 7880b7235b3c111c3051ba10f316295c03cc993b

Authored by ww
1 parent dbb85690

pref: use ModeSwitchButton replace old component

Inline Side-by-side
Showing 11 changed files with 182 additions and 233 deletions
1 1 <script lang="ts" setup>
2 2 import { RadioButton, RadioGroup, Tooltip } from 'ant-design-vue';
3   - import { AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons-vue';
4   - import { Mode } from './const';
5   - const props = defineProps<{
6   - value: Mode;
7   - }>();
  3 + import { TABLE_CARD_MODE_LIST } from './const';
  4 + import { ModeList } from './types';
  5 + import Icon from '../Icon';
  6 + const props = withDefaults(
  7 + defineProps<{
  8 + value: string;
  9 + mode?: ModeList[];
  10 + }>(),
  11 + {
  12 + mode: () => TABLE_CARD_MODE_LIST,
  13 + }
  14 + );
8 15
9 16 const emit = defineEmits(['change']);
10 17
... ... @@ -16,15 +23,12 @@
16 23
17 24 <template>
18 25 <RadioGroup :value="props.value" button-style="solid" @change="handleChange">
19   - <Tooltip title="卡片模式">
20   - <RadioButton class="cursor-pointer" :value="Mode.CARD">
21   - <AppstoreOutlined />
22   - </RadioButton>
23   - </Tooltip>
24   - <Tooltip title="列表模式">
25   - <RadioButton class="cursor-pointer" :value="Mode.TABLE">
26   - <UnorderedListOutlined />
27   - </RadioButton>
28   - </Tooltip>
  26 + <template v-for="item in $props.mode" :key="item.value">
  27 + <Tooltip :title="item.label">
  28 + <RadioButton class="cursor-pointer" :value="item.value">
  29 + <Icon :icon="item.icon" />
  30 + </RadioButton>
  31 + </Tooltip>
  32 + </template>
29 33 </RadioGroup>
30 34 </template>
... ...
1   -export const enum Mode {
  1 +import { ModeList } from './types';
  2 +
  3 +export enum EnumTableCardMode {
2 4 CARD = 'CARD',
3 5 TABLE = 'TABLE',
4 6 }
  7 +
  8 +export enum EnumTableChartMode {
  9 + TABLE = 'TABLE',
  10 + CHART = 'CHART',
  11 +}
  12 +
  13 +export const TABLE_CARD_MODE_LIST: ModeList[] = [
  14 + {
  15 + label: '卡片模式',
  16 + value: EnumTableCardMode.CARD,
  17 + icon: 'ant-design:appstore-outlined',
  18 + },
  19 + {
  20 + label: '列表模式',
  21 + value: EnumTableCardMode.TABLE,
  22 + icon: 'ant-design:unordered-list-outlined',
  23 + },
  24 +];
  25 +
  26 +export const TABLE_CHART_MODE_LIST: ModeList[] = [
  27 + {
  28 + label: '图表模式',
  29 + value: EnumTableChartMode.CHART,
  30 + icon: 'ant-design:line-chart-outlined',
  31 + },
  32 + {
  33 + label: '列表模式',
  34 + value: EnumTableChartMode.TABLE,
  35 + icon: 'ant-design:unordered-list-outlined',
  36 + },
  37 +];
... ...
1 1 export { default as ModeSwitchButton } from './ModeSwitchButton.vue';
2 2 export { default as CardLayoutButton } from './CardLayoutButton.vue';
3   -export { Mode } from './const';
  3 +export {
  4 + EnumTableCardMode,
  5 + EnumTableChartMode,
  6 + TABLE_CARD_MODE_LIST,
  7 + TABLE_CHART_MODE_LIST,
  8 +} from './const';
  9 +export type { ModeList } from './types';
... ...
  1 +import { ExtractPropTypes } from 'vue';
  2 +import Icon from '../Icon';
  3 +
  4 +export interface ModeList {
  5 + value: string;
  6 + label: string;
  7 + icon?: string;
  8 + iconProps?: ExtractPropTypes<typeof Icon>;
  9 +}
... ...
1 1 <script lang="ts" setup>
2 2 import { computed, nextTick, onMounted, onUnmounted, Ref, ref, unref } from 'vue';
3 3 import { getDeviceHistoryInfo } from '/@/api/alarm/position';
4   - import { Empty, Spin, Tooltip, Button } from 'ant-design-vue';
  4 + import { Empty, Spin } from 'ant-design-vue';
5 5 import { useECharts } from '/@/hooks/web/useECharts';
6 6 import { AggregateDataEnum, selectDeviceAttrSchema } from '/@/views/device/localtion/config.data';
7 7 import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm';
... ... @@ -13,8 +13,12 @@
13 13 import { useHistoryData } from '../../hook/useHistoryData';
14 14 import { formatToDateTime } from '/@/utils/dateUtil';
15 15 import { useTable, BasicTable } from '/@/components/Table';
16   - import { LineChartOutlined, BarsOutlined } from '@ant-design/icons-vue';
17 16 import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
  17 + import {
  18 + ModeSwitchButton,
  19 + TABLE_CHART_MODE_LIST,
  20 + EnumTableChartMode,
  21 + } from '/@/components/Widget';
18 22
19 23 interface DeviceDetail {
20 24 tbDeviceId: string;
... ... @@ -26,12 +30,7 @@
26 30 attr?: string;
27 31 }>();
28 32
29   - enum Mode {
30   - TABLE = 'table',
31   - CHART = 'chart',
32   - }
33   -
34   - const mode = ref<Mode>(Mode.CHART);
  33 + const mode = ref<EnumTableChartMode>(EnumTableChartMode.CHART);
35 34
36 35 const chartRef = ref();
37 36
... ... @@ -151,9 +150,9 @@
151 150 attrInfo?.detail.dataType.type as unknown as DataTypeEnum
152 151 )
153 152 ) {
154   - mode.value = Mode.TABLE;
  153 + mode.value = EnumTableChartMode.TABLE;
155 154 } else {
156   - mode.value = Mode.CHART;
  155 + mode.value = EnumTableChartMode.CHART;
157 156 }
158 157 }
159 158 } catch (error) {}
... ... @@ -200,7 +199,7 @@
200 199 setOptions(setChartOptions(res, selectedKeys));
201 200 };
202 201
203   - const switchMode = (flag: Mode) => {
  202 + const switchMode = (flag: EnumTableChartMode) => {
204 203 mode.value = flag;
205 204 };
206 205
... ... @@ -221,55 +220,32 @@
221 220 </section>
222 221 <section class="bg-white p-3">
223 222 <Spin :spinning="loading" :absolute="true">
224   - <div v-show="mode === Mode.CHART" class="flex h-70px items-center justify-end p-2">
225   - <Tooltip title="图表模式">
226   - <Button
227   - :class="[mode === Mode.CHART && '!bg-blue-500 svg:text-light-50']"
228   - class="!p-2 !children:flex flex justify-center items-center border-r-0"
229   - @click="switchMode(Mode.CHART)"
230   - >
231   - <LineChartOutlined />
232   - </Button>
233   - </Tooltip>
234   -
235   - <Tooltip title="列表模式">
236   - <Button
237   - class="!p-2 !children:flex flex justify-center items-center"
238   - @click="switchMode(Mode.TABLE)"
239   - >
240   - <BarsOutlined />
241   - </Button>
242   - </Tooltip>
  223 + <div
  224 + v-show="mode === EnumTableChartMode.CHART"
  225 + class="flex h-70px items-center justify-end p-2"
  226 + >
  227 + <ModeSwitchButton
  228 + v-model:value="mode"
  229 + :mode="TABLE_CHART_MODE_LIST"
  230 + @change="switchMode"
  231 + />
243 232 </div>
244 233 <div
245   - v-show="isNull && mode === Mode.CHART"
  234 + v-show="isNull && mode === EnumTableChartMode.CHART"
246 235 ref="chartRef"
247 236 :style="{ height: '400px', width: '100%' }"
248 237 >
249 238 </div>
250   - <Empty v-show="!isNull && mode === Mode.CHART" />
  239 + <Empty v-show="!isNull && mode === EnumTableChartMode.CHART" />
251 240
252   - <BasicTable v-show="mode === Mode.TABLE" @register="registerTable">
  241 + <BasicTable v-show="mode === EnumTableChartMode.TABLE" @register="registerTable">
253 242 <template #toolbar>
254   - <div v-show="mode === Mode.TABLE" class="flex h-70px items-center justify-end p-2">
255   - <Tooltip title="图表模式">
256   - <Button
257   - class="!p-2 !children:flex flex justify-center items-center border-r-0"
258   - @click="switchMode(Mode.CHART)"
259   - >
260   - <LineChartOutlined />
261   - </Button>
262   - </Tooltip>
263   -
264   - <Tooltip title="列表模式">
265   - <Button
266   - :class="[mode === Mode.TABLE && '!bg-blue-500 svg:text-light-50']"
267   - class="!p-2 !children:flex flex justify-center items-center"
268   - @click="switchMode(Mode.TABLE)"
269   - >
270   - <BarsOutlined />
271   - </Button>
272   - </Tooltip>
  243 + <div class="flex h-70px items-center justify-end p-2">
  244 + <ModeSwitchButton
  245 + v-model:value="mode"
  246 + :mode="TABLE_CHART_MODE_LIST"
  247 + @change="switchMode"
  248 + />
273 249 </div>
274 250 </template>
275 251 </BasicTable>
... ...
1 1 <script lang="ts" setup>
2 2 import { nextTick, onUnmounted, reactive, ref, unref } from 'vue';
3   - import { List, Button, Tooltip, Card } from 'ant-design-vue';
  3 + import { List, Button, Card } from 'ant-design-vue';
4 4 import { PageWrapper } from '/@/components/Page';
5   - import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons-vue';
6 5 import { BasicTable, useTable } from '/@/components/Table';
7 6 import { realTimeDataColumns } from '../../config/detail.config';
8 7 import { useWebSocket } from '@vueuse/core';
... ... @@ -20,6 +19,7 @@
20 19 import { isArray, isObject } from '/@/utils/is';
21 20 import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
22 21 import { useGlobSetting } from '/@/hooks/setting';
  22 + import { ModeSwitchButton, EnumTableCardMode } from '/@/components/Widget';
23 23
24 24 interface ReceiveMessage {
25 25 data: {
... ... @@ -112,14 +112,9 @@
112 112
113 113 const [registerModal, { openModal }] = useModal();
114 114
115   - enum Mode {
116   - TABLE = 'table',
117   - CARD = 'card',
118   - }
119   -
120   - const mode = ref<Mode>(Mode.CARD);
  115 + const mode = ref<EnumTableCardMode>(EnumTableCardMode.CARD);
121 116
122   - const switchMode = async (value: Mode) => {
  117 + const switchMode = async (value: EnumTableCardMode) => {
123 118 mode.value = value;
124 119 await nextTick();
125 120 setTableData(socketInfo.dataSource);
... ... @@ -210,28 +205,14 @@
210 205 </div>
211 206 </section>
212 207 <section class="bg-light-50">
213   - <div v-show="mode === Mode.CARD" class="flex h-70px items-center justify-end p-2">
214   - <Tooltip title="卡片模式">
215   - <Button
216   - :class="[mode === Mode.CARD && '!bg-blue-500 svg:text-light-50']"
217   - class="!p-2 !children:flex flex justify-center items-center border-r-0"
218   - @click="switchMode(Mode.CARD)"
219   - >
220   - <AppstoreOutlined />
221   - </Button>
222   - </Tooltip>
223   -
224   - <Tooltip title="列表模式">
225   - <Button
226   - class="!p-2 !children:flex flex justify-center items-center"
227   - @click="switchMode(Mode.TABLE)"
228   - >
229   - <BarsOutlined />
230   - </Button>
231   - </Tooltip>
  208 + <div
  209 + v-show="mode === EnumTableCardMode.CARD"
  210 + class="flex h-70px items-center justify-end p-2"
  211 + >
  212 + <ModeSwitchButton v-model:value="mode" @change="switchMode" />
232 213 </div>
233 214 <List
234   - v-if="mode === Mode.CARD"
  215 + v-if="mode === EnumTableCardMode.CARD"
235 216 class="list-mode !px-2"
236 217 :data-source="socketInfo.dataSource"
237 218 :grid="grid"
... ... @@ -260,27 +241,13 @@
260 241 </List>
261 242 </section>
262 243
263   - <BasicTable v-if="mode === Mode.TABLE" @register="registerTable">
  244 + <BasicTable v-if="mode === EnumTableCardMode.TABLE" @register="registerTable">
264 245 <template #toolbar>
265   - <div v-show="mode === Mode.TABLE" class="flex h-70px items-center justify-end p-2">
266   - <Tooltip title="卡片模式">
267   - <Button
268   - class="!p-2 !children:flex flex justify-center items-center border-r-0"
269   - @click="switchMode(Mode.CARD)"
270   - >
271   - <AppstoreOutlined />
272   - </Button>
273   - </Tooltip>
274   -
275   - <Tooltip title="列表模式">
276   - <Button
277   - :class="[mode === Mode.TABLE && '!bg-blue-500 svg:text-light-50']"
278   - class="!p-2 !children:flex flex justify-center items-center"
279   - @click="switchMode(Mode.TABLE)"
280   - >
281   - <BarsOutlined />
282   - </Button>
283   - </Tooltip>
  246 + <div
  247 + v-show="mode === EnumTableCardMode.TABLE"
  248 + class="flex h-70px items-center justify-end p-2"
  249 + >
  250 + <ModeSwitchButton v-model:value="mode" @change="switchMode" />
284 251 </div>
285 252 </template>
286 253 </BasicTable>
... ...
... ... @@ -50,28 +50,18 @@
50 50 <TimePeriodForm @register="timePeriodRegister" />
51 51 <section>
52 52 <Spin :spinning="loading">
53   - <div v-show="mode === Mode.CHART" class="flex h-70px items-center justify-end p-2">
54   - <Tooltip title="图表模式">
55   - <Button
56   - :class="[mode === Mode.CHART && '!bg-blue-500 svg:text-light-50']"
57   - class="!p-2 !children:flex flex justify-center items-center border-r-0"
58   - @click="switchMode(Mode.CHART)"
59   - >
60   - <LineChartOutlined />
61   - </Button>
62   - </Tooltip>
63   -
64   - <Tooltip title="列表模式">
65   - <Button
66   - class="!p-2 !children:flex flex justify-center items-center"
67   - @click="switchMode(Mode.TABLE)"
68   - >
69   - <BarsOutlined />
70   - </Button>
71   - </Tooltip>
  53 + <div
  54 + v-show="mode === EnumTableChartMode.CHART"
  55 + class="flex h-70px items-center justify-end p-2"
  56 + >
  57 + <ModeSwitchButton
  58 + v-model:value="mode"
  59 + :mode="TABLE_CHART_MODE_LIST"
  60 + @change="switchMode"
  61 + />
72 62 </div>
73 63 <div
74   - v-show="isNull && mode === Mode.CHART"
  64 + v-show="isNull && mode === EnumTableChartMode.CHART"
75 65 ref="chartRef"
76 66 :style="{ height: '400px', width }"
77 67 >
... ... @@ -79,30 +69,17 @@
79 69 <Empty
80 70 :style="{ height: '550px', width }"
81 71 class="flex flex-col justify-center items-center"
82   - v-show="!isNull && mode === Mode.CHART"
  72 + v-show="!isNull && mode === EnumTableChartMode.CHART"
83 73 />
84 74
85   - <BasicTable v-show="mode === Mode.TABLE" @register="registerAttrTable">
  75 + <BasicTable v-show="mode === EnumTableChartMode.TABLE" @register="registerAttrTable">
86 76 <template #toolbar>
87   - <div v-show="mode === Mode.TABLE" class="flex h-70px items-center justify-end p-2">
88   - <Tooltip title="图表模式">
89   - <Button
90   - class="!p-2 !children:flex flex justify-center items-center border-r-0"
91   - @click="switchMode(Mode.CHART)"
92   - >
93   - <LineChartOutlined />
94   - </Button>
95   - </Tooltip>
96   -
97   - <Tooltip title="列表模式">
98   - <Button
99   - :class="[mode === Mode.TABLE && '!bg-blue-500 svg:text-light-50']"
100   - class="!p-2 !children:flex flex justify-center items-center"
101   - @click="switchMode(Mode.TABLE)"
102   - >
103   - <BarsOutlined />
104   - </Button>
105   - </Tooltip>
  77 + <div class="flex h-70px items-center justify-end p-2">
  78 + <ModeSwitchButton
  79 + v-model:value="mode"
  80 + :mode="TABLE_CHART_MODE_LIST"
  81 + @change="switchMode"
  82 + />
106 83 </div>
107 84 </template>
108 85 </BasicTable>
... ... @@ -134,7 +111,7 @@
134 111 import { formSchema, columns } from './config.data';
135 112 import { BasicTable, useTable } from '/@/components/Table';
136 113 import { devicePage } from '/@/api/alarm/contact/alarmContact';
137   - import { Tag, Empty, Spin, Tooltip, Button } from 'ant-design-vue';
  114 + import { Tag, Empty, Spin } from 'ant-design-vue';
138 115 import { DeviceState } from '/@/api/device/model/deviceModel';
139 116 import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
140 117 import { useModal, BasicModal } from '/@/components/Modal';
... ... @@ -157,8 +134,12 @@
157 134 import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
158 135 import { useAsyncQueue } from './useAsyncQueue';
159 136 import { useHistoryData } from '../list/hook/useHistoryData';
160   - import { LineChartOutlined, BarsOutlined } from '@ant-design/icons-vue';
161 137 import { formatToDateTime } from '/@/utils/dateUtil';
  138 + import {
  139 + TABLE_CHART_MODE_LIST,
  140 + EnumTableChartMode,
  141 + ModeSwitchButton,
  142 + } from '/@/components/Widget';
162 143
163 144 interface DeviceInfo {
164 145 alarmStatus: 0 | 1;
... ... @@ -183,10 +164,7 @@
183 164 DeviceDetailDrawer,
184 165 TimePeriodForm,
185 166 Spin,
186   - Tooltip,
187   - Button,
188   - LineChartOutlined,
189   - BarsOutlined,
  167 + ModeSwitchButton,
190 168 },
191 169 props: {
192 170 width: {
... ... @@ -199,12 +177,7 @@
199 177 },
200 178 },
201 179 setup() {
202   - enum Mode {
203   - TABLE = 'table',
204   - CHART = 'chart',
205   - }
206   -
207   - const mode = ref<Mode>(Mode.CHART);
  180 + const mode = ref<EnumTableChartMode>(EnumTableChartMode.CHART);
208 181 let entityId = '';
209 182 let globalRecord: any = {};
210 183 const wrapRef = ref<HTMLDivElement | null>(null);
... ... @@ -571,13 +544,14 @@
571 544 openGatewayDetailDrawer(true, data);
572 545 };
573 546
574   - const switchMode = (flag: Mode) => {
  547 + const switchMode = (flag: EnumTableChartMode) => {
575 548 mode.value = flag;
576 549 };
577 550
578 551 return {
579 552 mode,
580   - Mode,
  553 + EnumTableChartMode,
  554 + TABLE_CHART_MODE_LIST,
581 555 wrapRef,
582 556 registerTable,
583 557 deviceRowClick,
... ...
... ... @@ -4,7 +4,7 @@
4 4 import { List, Button, Tooltip, Card, PaginationProps, Image } from 'ant-design-vue';
5 5 import { ReloadOutlined, EyeOutlined, FormOutlined, MoreOutlined } from '@ant-design/icons-vue';
6 6 import { computed, onMounted, reactive, ref, unref } from 'vue';
7   - import { CardLayoutButton, Mode, ModeSwitchButton } from '/@/components/Widget';
  7 + import { CardLayoutButton, EnumTableCardMode, ModeSwitchButton } from '/@/components/Widget';
8 8 import { Authority } from '/@/components/Authority';
9 9 import {
10 10 deviceConfigDelete,
... ... @@ -94,7 +94,7 @@
94 94 }
95 95 };
96 96
97   - const handleModeChange = (mode: Mode) => {
  97 + const handleModeChange = (mode: EnumTableCardMode) => {
98 98 emit('changeMode', mode);
99 99 };
100 100
... ...
... ... @@ -118,10 +118,10 @@
118 118 import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
119 119 import { Popconfirm } from 'ant-design-vue';
120 120 import DeviceProfileDrawer from './DeviceProfileDrawer.vue';
121   - import { Mode, ModeSwitchButton } from '/@/components/Widget';
  121 + import { EnumTableCardMode, ModeSwitchButton } from '/@/components/Widget';
122 122
123 123 defineProps<{
124   - mode: Mode;
  124 + mode: EnumTableCardMode;
125 125 }>();
126 126
127 127 const emit = defineEmits(['changeMode']);
... ... @@ -310,7 +310,7 @@
310 310 disabled.value = true;
311 311 };
312 312
313   - const handleModeChange = (value: Mode) => {
  313 + const handleModeChange = (value: EnumTableCardMode) => {
314 314 emit('changeMode', value);
315 315 };
316 316 </script>
... ...
... ... @@ -2,17 +2,21 @@
2 2 import { ref } from 'vue';
3 3 import TableMode from './TableMode.vue';
4 4 import CardMode from './CardMode.vue';
5   - import { Mode } from '/@/components/Widget';
6   - const mode = ref(Mode.CARD);
  5 + import { EnumTableCardMode } from '/@/components/Widget';
  6 + const mode = ref(EnumTableCardMode.CARD);
7 7
8   - const handleChangeMode = (flag: Mode) => {
  8 + const handleChangeMode = (flag: EnumTableCardMode) => {
9 9 mode.value = flag;
10 10 };
11 11 </script>
12 12
13 13 <template>
14 14 <section>
15   - <CardMode v-if="mode === Mode.CARD" :mode="mode" @change-mode="handleChangeMode" />
16   - <TableMode v-if="mode === Mode.TABLE" :mode="mode" @change-mode="handleChangeMode" />
  15 + <CardMode v-if="mode === EnumTableCardMode.CARD" :mode="mode" @change-mode="handleChangeMode" />
  16 + <TableMode
  17 + v-if="mode === EnumTableCardMode.TABLE"
  18 + :mode="mode"
  19 + @change-mode="handleChangeMode"
  20 + />
17 21 </section>
18 22 </template>
... ...
1 1 <script lang="ts" setup>
2 2 import { computed, nextTick, Ref, ref, unref } from 'vue';
3 3 import { getDeviceHistoryInfo } from '/@/api/alarm/position';
4   - import { Empty, Tooltip, Button, Spin } from 'ant-design-vue';
  4 + import { Empty, Spin } from 'ant-design-vue';
5 5 import { useECharts } from '/@/hooks/web/useECharts';
6 6 import { AggregateDataEnum } from '/@/views/device/localtion/config.data';
7 7 import { useGridLayout } from '/@/hooks/component/useGridLayout';
... ... @@ -14,19 +14,18 @@
14 14 import { getAllDeviceByOrg } from '/@/api/dataBoard';
15 15 import { useHistoryData } from '/@/views/device/list/hook/useHistoryData';
16 16 import { BasicTable, useTable } from '/@/components/Table';
17   - import { LineChartOutlined, BarsOutlined } from '@ant-design/icons-vue';
18 17 import { formatToDateTime } from '/@/utils/dateUtil';
  18 + import {
  19 + ModeSwitchButton,
  20 + TABLE_CHART_MODE_LIST,
  21 + EnumTableChartMode,
  22 + } from '/@/components/Widget';
19 23
20 24 type DeviceOption = Record<'label' | 'value' | 'organizationId', string>;
21 25
22 26 defineEmits(['register']);
23 27
24   - enum Mode {
25   - TABLE = 'table',
26   - CHART = 'chart',
27   - }
28   -
29   - const mode = ref<Mode>(Mode.CHART);
  28 + const mode = ref<EnumTableChartMode>(EnumTableChartMode.CHART);
30 29
31 30 const chartRef = ref();
32 31
... ... @@ -245,7 +244,7 @@
245 244 destory();
246 245 };
247 246
248   - const switchMode = (flag: Mode) => {
  247 + const switchMode = (flag: EnumTableChartMode) => {
249 248 mode.value = flag;
250 249 };
251 250 </script>
... ... @@ -269,61 +268,38 @@
269 268 </section>
270 269 <section class="bg-white p-3" style="min-height: 350px">
271 270 <Spin :spinning="loading" :absolute="true">
272   - <div v-show="mode === Mode.CHART" class="flex h-70px items-center justify-end p-2">
273   - <Tooltip title="图表模式">
274   - <Button
275   - :class="[mode === Mode.CHART && '!bg-blue-500 svg:text-light-50']"
276   - class="!p-2 !children:flex flex justify-center items-center border-r-0"
277   - @click="switchMode(Mode.CHART)"
278   - >
279   - <LineChartOutlined />
280   - </Button>
281   - </Tooltip>
282   -
283   - <Tooltip title="列表模式">
284   - <Button
285   - class="!p-2 !children:flex flex justify-center items-center"
286   - @click="switchMode(Mode.TABLE)"
287   - >
288   - <BarsOutlined />
289   - </Button>
290   - </Tooltip>
  271 + <div
  272 + v-show="mode === EnumTableChartMode.CHART"
  273 + class="flex h-70px items-center justify-end p-2"
  274 + >
  275 + <ModeSwitchButton
  276 + v-model:value="mode"
  277 + :mode="TABLE_CHART_MODE_LIST"
  278 + @change="switchMode"
  279 + />
291 280 </div>
292 281
293 282 <div
294   - v-show="isNull && mode === Mode.CHART"
  283 + v-show="isNull && mode === EnumTableChartMode.CHART"
295 284 ref="chartRef"
296 285 :style="{ height: '350px', width: '100%' }"
297 286 >
298 287 </div>
299 288 <Empty
300   - v-if="mode === Mode.CHART"
  289 + v-if="mode === EnumTableChartMode.CHART"
301 290 class="h-350px flex flex-col justify-center items-center"
302 291 description="暂无数据，请选择设备查询"
303 292 v-show="!isNull"
304 293 />
305 294
306   - <BasicTable v-show="mode === Mode.TABLE" @register="registerTable">
  295 + <BasicTable v-show="mode === EnumTableChartMode.TABLE" @register="registerTable">
307 296 <template #toolbar>
308   - <div v-show="mode === Mode.TABLE" class="flex h-70px items-center justify-end p-2">
309   - <Tooltip title="图表模式">
310   - <Button
311   - class="!p-2 !children:flex flex justify-center items-center border-r-0"
312   - @click="switchMode(Mode.CHART)"
313   - >
314   - <LineChartOutlined />
315   - </Button>
316   - </Tooltip>
317   -
318   - <Tooltip title="列表模式">
319   - <Button
320   - :class="[mode === Mode.TABLE && '!bg-blue-500 svg:text-light-50']"
321   - class="!p-2 !children:flex flex justify-center items-center"
322   - @click="switchMode(Mode.TABLE)"
323   - >
324   - <BarsOutlined />
325   - </Button>
326   - </Tooltip>
  297 + <div class="flex h-70px items-center justify-end p-2">
  298 + <ModeSwitchButton
  299 + v-model:value="mode"
  300 + :mode="TABLE_CHART_MODE_LIST"
  301 + @change="switchMode"
  302 + />
327 303 </div>
328 304 </template>
329 305 </BasicTable>
... ...