简柏林 / thingskit-front · Commits

Commit 5111d9ba7d193a251c64ac8b3d582e22d874de19

Authored by ww
1 parent 7805b31c

fix: DEFECT-1350修复控制组件无法显示设备名称

Inline Side-by-side
Showing 7 changed files with 81 additions and 65 deletions
... ... @@ -7,9 +7,11 @@ import {
7 7 PublicPresetOptions,
8 8 } from '/@/views/visual/packages/index.type';
9 9 import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
  10 +import { ComponentConfigFieldEnum } from '../../../enum';
10 11
11 12 export const option: PublicPresetOptions = {
12   - componetDesign: false,
  13 + [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  14 + // [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
13 15 };
14 16
15 17 export default class Config extends PublicConfigClass implements CreateComponentType {
... ...
... ... @@ -2,22 +2,22 @@
2 2 import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
3 3 import { useForm, BasicForm } from '/@/components/Form';
4 4 import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
  5 + import { option } from './config';
5 6
6 7 const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
7 8 schemas: [
8   - {
9   - field: ComponentConfigFieldEnum.FONT_COLOR,
10   - label: '数值字体颜色',
11   - component: 'ColorPicker',
12   - changeEvent: 'update:value',
13   - componentProps: {
14   - defaultValue: '#FD7347',
15   - },
16   - },
  9 + // {
  10 + // field: ComponentConfigFieldEnum.FONT_COLOR,
  11 + // label: '数值字体颜色',
  12 + // component: 'ColorPicker',
  13 + // changeEvent: 'update:value',
  14 + // defaultValue: option.fontColor,
  15 + // },
17 16 {
18 17 field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
19 18 label: '显示设备名称',
20 19 component: 'Checkbox',
  20 + defaultValue: option.showDeviceName,
21 21 },
22 22 ],
23 23 showActionButtonGroup: false,
... ...
... ... @@ -6,6 +6,8 @@
6 6 import { ref } from 'vue';
7 7 import { useComponentScale } from '../../../hook/useComponentScale';
8 8 import { useSendCommand } from '../../../hook/useSendCommand';
  9 + import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  10 +
9 11 const props = defineProps<{
10 12 config: ComponentPropsConfigType<typeof option>;
11 13 }>();
... ... @@ -35,21 +37,24 @@
35 37 </script>
36 38
37 39 <template>
38   - <main class="w-full h-full flex flex-col justify-center items-center">
39   - <Spin :spinning="loading">
40   - <label class="sliding-switch" :style="getScale">
41   - <input
42   - type="checkbox"
43   - :value="currentValue"
44   - :checked="currentValue"
45   - @change="handleChange"
46   - />
47   - <span class="slider"></span>
48   - <span class="on">ON</span>
49   - <span class="off">OFF</span>
50   - </label>
51   - <div class="text-center mt-2 text-gray-700" :style="getScale"> 属性 </div>
52   - </Spin>
  40 + <main class="w-full h-full flex flex-col justify-center">
  41 + <DeviceName :config="config" class="text-center" />
  42 + <main class="w-full h-full flex flex-col justify-center items-center">
  43 + <Spin :spinning="loading">
  44 + <label class="sliding-switch" :style="getScale">
  45 + <input
  46 + type="checkbox"
  47 + :value="currentValue"
  48 + :checked="currentValue"
  49 + @change="handleChange"
  50 + />
  51 + <span class="slider"></span>
  52 + <span class="on">ON</span>
  53 + <span class="off">OFF</span>
  54 + </label>
  55 + <div class="text-center mt-2 text-gray-700" :style="getScale"> 属性 </div>
  56 + </Spin>
  57 + </main>
53 58 </main>
54 59 </template>
55 60
... ...
... ... @@ -8,6 +8,7 @@
8 8 import { useComponentScale } from '../../../hook/useComponentScale';
9 9 import { useSendCommand } from '../../../hook/useSendCommand';
10 10 import { unref } from 'vue';
  11 + import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
11 12
12 13 const props = defineProps<{
13 14 config: ComponentPropsConfigType<typeof option>;
... ... @@ -45,18 +46,21 @@
45 46 </script>
46 47
47 48 <template>
48   - <main class="w-full h-full flex justify-center items-center" :style="getScale">
49   - <div class="flex flex-col justify-center items-center mr-20">
50   - <SvgIcon
51   - :name="getDesign.icon"
52   - prefix="iconfont"
53   - :style="{ color: getDesign.iconColor }"
54   - :size="50"
55   - />
56   - <span class="mt-3 truncate text-gray-500 text-xs text-center">
57   - {{ getDesign.attribute || '属性' }}
58   - </span>
59   - </div>
60   - <Switch v-model:checked="checked" :loading="loading" @change="handleChange" />
  49 + <main class="w-full h-full flex flex-col justify-center">
  50 + <DeviceName :config="config" class="text-center" />
  51 + <main class="w-full h-full flex justify-center items-center" :style="getScale">
  52 + <div class="flex flex-col justify-center items-center mr-20">
  53 + <SvgIcon
  54 + :name="getDesign.icon"
  55 + prefix="iconfont"
  56 + :style="{ color: getDesign.iconColor }"
  57 + :size="50"
  58 + />
  59 + <span class="mt-3 truncate text-gray-500 text-xs text-center">
  60 + {{ getDesign.attribute || '属性' }}
  61 + </span>
  62 + </div>
  63 + <Switch v-model:checked="checked" :loading="loading" @change="handleChange" />
  64 + </main>
61 65 </main>
62 66 </template>
... ...
... ... @@ -7,9 +7,11 @@ import {
7 7 PublicPresetOptions,
8 8 } from '/@/views/visual/packages/index.type';
9 9 import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
  10 +import { ComponentConfigFieldEnum } from '../../../enum';
10 11
11 12 export const option: PublicPresetOptions = {
12   - componetDesign: false,
  13 + [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  14 + // [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
13 15 };
14 16
15 17 export default class Config extends PublicConfigClass implements CreateComponentType {
... ...
... ... @@ -2,22 +2,21 @@
2 2 import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
3 3 import { useForm, BasicForm } from '/@/components/Form';
4 4 import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
5   -
  5 + import { option } from './config';
6 6 const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
7 7 schemas: [
8   - {
9   - field: ComponentConfigFieldEnum.FONT_COLOR,
10   - label: '数值字体颜色',
11   - component: 'ColorPicker',
12   - changeEvent: 'update:value',
13   - componentProps: {
14   - defaultValue: '#FD7347',
15   - },
16   - },
  8 + // {
  9 + // field: ComponentConfigFieldEnum.FONT_COLOR,
  10 + // label: '数值字体颜色',
  11 + // component: 'ColorPicker',
  12 + // changeEvent: 'update:value',
  13 + // defaultValue: option.fontColor,
  14 + // },
17 15 {
18 16 field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
19 17 label: '显示设备名称',
20 18 component: 'Checkbox',
  19 + defaultValue: option.showDeviceName,
21 20 },
22 21 ],
23 22 showActionButtonGroup: false,
... ...
... ... @@ -6,6 +6,7 @@
6 6 import { ref } from 'vue';
7 7 import { useComponentScale } from '../../../hook/useComponentScale';
8 8 import { useSendCommand } from '../../../hook/useSendCommand';
  9 + import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 10
10 11 const props = defineProps<{
11 12 config: ComponentPropsConfigType<typeof option>;
... ... @@ -34,22 +35,25 @@
34 35 </script>
35 36
36 37 <template>
37   - <main class="w-full h-full flex flex-col justify-center items-center">
38   - <Spin :spinning="loading" class="w-full h-full">
39   - <div class="toggle-switch" :style="getScale">
40   - <label class="switch">
41   - <input type="checkbox" :checked="currentValue" @change="handleChange" />
42   - <div class="button">
43   - <div class="light"></div>
44   - <div class="dots"></div>
45   - <div class="characters"></div>
46   - <div class="shine"></div>
47   - <div class="shadow"></div>
48   - </div>
49   - </label>
50   - </div>
51   - <div class="text-center mt-2 text-gray-500" :style="getScale">属性</div>
52   - </Spin>
  38 + <main class="w-full h-full flex flex-col justify-center">
  39 + <DeviceName :config="config" class="text-center" />
  40 + <main class="w-full h-full flex flex-col justify-center items-center">
  41 + <Spin :spinning="loading" class="w-full h-full">
  42 + <div class="toggle-switch" :style="getScale">
  43 + <label class="switch">
  44 + <input type="checkbox" :checked="currentValue" @change="handleChange" />
  45 + <div class="button">
  46 + <div class="light"></div>
  47 + <div class="dots"></div>
  48 + <div class="characters"></div>
  49 + <div class="shine"></div>
  50 + <div class="shadow"></div>
  51 + </div>
  52 + </label>
  53 + </div>
  54 + <div class="text-center mt-2 text-gray-500" :style="getScale">属性</div>
  55 + </Spin>
  56 + </main>
53 57 </main>
54 58 </template>
55 59
... ...