简柏林 / thingskit-front · Commits

Commit f8954a71e26489b71aaa933ae14438ae4febfabd

Authored by ww
1 parent 2eea791a

fix: 修复数据看板属性未使用物模型名称

Inline Side-by-side
Showing 24 changed files with 121 additions and 148 deletions
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 import { option } from './config'; 3 import { option } from './config';
4 import { useDataFetch } from '/@/views/visual/packages/hook/useSocket'; 4 import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
5 import { Spin } from 'ant-design-vue'; 5 import { Spin } from 'ant-design-vue';
6 - import { ref } from 'vue'; 6 + import { computed, ref } from 'vue';
7 import { useComponentScale } from '../../../hook/useComponentScale'; 7 import { useComponentScale } from '../../../hook/useComponentScale';
8 import { useSendCommand } from '../../../hook/useSendCommand'; 8 import { useSendCommand } from '../../../hook/useSendCommand';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
@@ -16,6 +16,14 @@ @@ -16,6 +16,14 @@
16 16
17 const currentValue = ref(false); 17 const currentValue = ref(false);
18 18
  19 + const getDesign = computed(() => {
  20 + const { option } = props.config;
  21 + const { attribute, attributeRename, attributeName } = option;
  22 + return {
  23 + attribute: attributeRename || attributeName || attribute,
  24 + };
  25 + });
  26 +
19 const { sendCommand, loading } = useSendCommand(); 27 const { sendCommand, loading } = useSendCommand();
20 const handleChange = async (event: Event) => { 28 const handleChange = async (event: Event) => {
21 const target = event.target as HTMLInputElement; 29 const target = event.target as HTMLInputElement;
@@ -52,7 +60,9 @@ @@ -52,7 +60,9 @@
52 <span class="on">ON</span> 60 <span class="on">ON</span>
53 <span class="off">OFF</span> 61 <span class="off">OFF</span>
54 </label> 62 </label>
55 - <div class="text-center mt-2 text-gray-700" :style="getScale"> 属性 </div> 63 + <div class="text-center mt-2 text-gray-700" :style="getScale">
  64 + {{ getDesign.attribute || '属性' }}
  65 + </div>
56 </Spin> 66 </Spin>
57 </main> 67 </main>
58 </main> 68 </main>
@@ -18,13 +18,13 @@ @@ -18,13 +18,13 @@
18 18
19 const getDesign = computed(() => { 19 const getDesign = computed(() => {
20 const { option, persetOption } = props.config; 20 const { option, persetOption } = props.config;
21 - const { componentInfo, attribute, attributeRename } = option; 21 + const { componentInfo, attribute, attributeRename, attributeName } = option;
22 const { icon: presetIcon, iconColor: presetIconColor } = persetOption || {}; 22 const { icon: presetIcon, iconColor: presetIconColor } = persetOption || {};
23 const { icon, iconColor } = componentInfo || {}; 23 const { icon, iconColor } = componentInfo || {};
24 return { 24 return {
25 icon: icon ?? presetIcon, 25 icon: icon ?? presetIcon,
26 iconColor: iconColor || presetIconColor, 26 iconColor: iconColor || presetIconColor,
27 - attribute: attributeRename || attribute, 27 + attribute: attributeRename || attributeName || attribute,
28 }; 28 };
29 }); 29 });
30 30
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 import { option } from './config'; 3 import { option } from './config';
4 import { useDataFetch } from '/@/views/visual/packages/hook/useSocket'; 4 import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
5 import { Spin } from 'ant-design-vue'; 5 import { Spin } from 'ant-design-vue';
6 - import { ref } from 'vue'; 6 + import { computed, ref } from 'vue';
7 import { useComponentScale } from '../../../hook/useComponentScale'; 7 import { useComponentScale } from '../../../hook/useComponentScale';
8 import { useSendCommand } from '../../../hook/useSendCommand'; 8 import { useSendCommand } from '../../../hook/useSendCommand';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
@@ -16,6 +16,14 @@ @@ -16,6 +16,14 @@
16 16
17 const currentValue = ref(false); 17 const currentValue = ref(false);
18 18
  19 + const getDesign = computed(() => {
  20 + const { option } = props.config;
  21 + const { attribute, attributeRename, attributeName } = option;
  22 + return {
  23 + attribute: attributeRename || attributeName || attribute,
  24 + };
  25 + });
  26 +
19 const { loading, sendCommand } = useSendCommand(); 27 const { loading, sendCommand } = useSendCommand();
20 const handleChange = async (event: Event) => { 28 const handleChange = async (event: Event) => {
21 const target = event.target as HTMLInputElement; 29 const target = event.target as HTMLInputElement;
@@ -51,7 +59,9 @@ @@ -51,7 +59,9 @@
51 </div> 59 </div>
52 </label> 60 </label>
53 </div> 61 </div>
54 - <div class="text-center mt-2 text-gray-500" :style="getScale">属性</div> 62 + <div class="text-center mt-2 text-gray-500" :style="getScale">{{
  63 + getDesign.attribute || '属性'
  64 + }}</div>
55 </Spin> 65 </Spin>
56 </main> 66 </main>
57 </main> 67 </main>
@@ -22,12 +22,12 @@ @@ -22,12 +22,12 @@
22 22
23 const getDesign = computed(() => { 23 const getDesign = computed(() => {
24 const { option, persetOption } = props.config; 24 const { option, persetOption } = props.config;
25 - const { componentInfo, attribute, attributeRename } = option; 25 + const { componentInfo, attribute, attributeRename, attributeName } = option;
26 const { controlBarColor: persetControlBarColor, fonColor: persetFontColor } = 26 const { controlBarColor: persetControlBarColor, fonColor: persetFontColor } =
27 persetOption || {}; 27 persetOption || {};
28 const { controlBarColor, fontColor } = componentInfo || {}; 28 const { controlBarColor, fontColor } = componentInfo || {};
29 return { 29 return {
30 - attribute: attributeRename || attribute, 30 + attribute: attributeRename || attributeName || attribute,
31 controlBarColor: controlBarColor ?? persetControlBarColor, 31 controlBarColor: controlBarColor ?? persetControlBarColor,
32 fontColor: fontColor ?? persetFontColor, 32 fontColor: fontColor ?? persetFontColor,
33 }; 33 };
@@ -87,7 +87,7 @@ @@ -87,7 +87,7 @@
87 :style="{ color: getDesign.fontColor }" 87 :style="{ color: getDesign.fontColor }"
88 class="mt-3 truncate font-bold text-xs text-center" 88 class="mt-3 truncate font-bold text-xs text-center"
89 > 89 >
90 - {{ getDesign.attribute || '设备1' }} 90 + {{ getDesign.attribute || '属性' }}
91 </span> 91 </span>
92 </div> 92 </div>
93 </Spin> 93 </Spin>
@@ -6,6 +6,7 @@ @@ -6,6 +6,7 @@
6 import { ref } from 'vue'; 6 import { ref } from 'vue';
7 import { unref } from 'vue'; 7 import { unref } from 'vue';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  9 + import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
9 10
10 const props = defineProps<{ 11 const props = defineProps<{
11 config: ComponentPropsConfigType<typeof option>; 12 config: ComponentPropsConfigType<typeof option>;
@@ -13,9 +14,11 @@ @@ -13,9 +14,11 @@
13 14
14 const currentValue = ref(25); 15 const currentValue = ref(25);
15 16
  17 + const time = ref<Nullable<number>>(null);
  18 +
16 const getDesign = computed(() => { 19 const getDesign = computed(() => {
17 const { option, persetOption } = props.config; 20 const { option, persetOption } = props.config;
18 - const { componentInfo } = option; 21 + const { componentInfo, attribute, attributeName, attributeRename } = option;
19 const { flowmeterConfig, unit, fontColor } = componentInfo || {}; 22 const { flowmeterConfig, unit, fontColor } = componentInfo || {};
20 const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {}; 23 const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
21 const { 24 const {
@@ -36,6 +39,7 @@ @@ -36,6 +39,7 @@
36 waveThird: waveThird ?? presetWaveThird, 39 waveThird: waveThird ?? presetWaveThird,
37 unit: unit ?? persetUnit, 40 unit: unit ?? persetUnit,
38 fontColor: fontColor ?? presetFontColor, 41 fontColor: fontColor ?? presetFontColor,
  42 + attribute: attributeRename || attributeName || attribute,
39 }; 43 };
40 }); 44 });
41 45
@@ -62,7 +66,8 @@ @@ -62,7 +66,8 @@
62 const updateFn: DataFetchUpdateFn = (message, attribute) => { 66 const updateFn: DataFetchUpdateFn = (message, attribute) => {
63 const { data = {} } = message; 67 const { data = {} } = message;
64 const [latest] = data[attribute] || []; 68 const [latest] = data[attribute] || [];
65 - const [_, value] = latest; 69 + const [timespan, value] = latest;
  70 + time.value = timespan;
66 currentValue.value = Number(value); 71 currentValue.value = Number(value);
67 }; 72 };
68 73
@@ -112,6 +117,10 @@ @@ -112,6 +117,10 @@
112 <div>{{ currentValue }}</div> 117 <div>{{ currentValue }}</div>
113 <div class="ml-1">{{ getDesign.unit }}</div> 118 <div class="ml-1">{{ getDesign.unit }}</div>
114 </div> 119 </div>
  120 + <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
  121 + getDesign.attribute || '属性'
  122 + }}</div>
  123 + <UpdateTime :time="time" />
115 </main> 124 </main>
116 </template> 125 </template>
117 126
@@ -6,6 +6,7 @@ @@ -6,6 +6,7 @@
6 import { ref } from 'vue'; 6 import { ref } from 'vue';
7 import { unref } from 'vue'; 7 import { unref } from 'vue';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  9 + import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
9 10
10 const props = defineProps<{ 11 const props = defineProps<{
11 config: ComponentPropsConfigType<typeof option>; 12 config: ComponentPropsConfigType<typeof option>;
@@ -13,9 +14,11 @@ @@ -13,9 +14,11 @@
13 14
14 const currentValue = ref(25); 15 const currentValue = ref(25);
15 16
  17 + const time = ref<Nullable<number>>(null);
  18 +
16 const getDesign = computed(() => { 19 const getDesign = computed(() => {
17 const { option, persetOption } = props.config; 20 const { option, persetOption } = props.config;
18 - const { componentInfo } = option; 21 + const { componentInfo, attribute, attributeName, attributeRename } = option;
19 const { flowmeterConfig, unit, fontColor } = componentInfo || {}; 22 const { flowmeterConfig, unit, fontColor } = componentInfo || {};
20 const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {}; 23 const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
21 const { 24 const {
@@ -36,6 +39,7 @@ @@ -36,6 +39,7 @@
36 waveThird: waveThird ?? presetWaveThird, 39 waveThird: waveThird ?? presetWaveThird,
37 unit: unit ?? persetUnit, 40 unit: unit ?? persetUnit,
38 fontColor: fontColor ?? presetFontColor, 41 fontColor: fontColor ?? presetFontColor,
  42 + attribute: attributeRename || attributeName || attribute,
39 }; 43 };
40 }); 44 });
41 45
@@ -52,7 +56,8 @@ @@ -52,7 +56,8 @@
52 const updateFn: DataFetchUpdateFn = (message, attribute) => { 56 const updateFn: DataFetchUpdateFn = (message, attribute) => {
53 const { data = {} } = message; 57 const { data = {} } = message;
54 const [latest] = data[attribute] || []; 58 const [latest] = data[attribute] || [];
55 - const [_, value] = latest; 59 + const [timespan, value] = latest;
  60 + time.value = timespan;
56 currentValue.value = Number(value); 61 currentValue.value = Number(value);
57 }; 62 };
58 63
@@ -105,6 +110,10 @@ @@ -105,6 +110,10 @@
105 <div>{{ currentValue }}</div> 110 <div>{{ currentValue }}</div>
106 <div class="ml-1">{{ getDesign.unit }}</div> 111 <div class="ml-1">{{ getDesign.unit }}</div>
107 </div> 112 </div>
  113 + <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
  114 + getDesign.attribute || '属性'
  115 + }}</div>
  116 + <UpdateTime :time="time" />
108 </main> 117 </main>
109 </template> 118 </template>
110 119
@@ -6,6 +6,7 @@ @@ -6,6 +6,7 @@
6 import { computed } from 'vue'; 6 import { computed } from 'vue';
7 import { unref } from 'vue'; 7 import { unref } from 'vue';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  9 + import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
9 10
10 const props = defineProps<{ 11 const props = defineProps<{
11 config: ComponentPropsConfigType<typeof option>; 12 config: ComponentPropsConfigType<typeof option>;
@@ -13,6 +14,8 @@ @@ -13,6 +14,8 @@
13 14
14 const currentValue = ref(50); 15 const currentValue = ref(50);
15 16
  17 + const time = ref<Nullable<number>>(null);
  18 +
16 const getValue = computed(() => { 19 const getValue = computed(() => {
17 const maxHeight = 190; 20 const maxHeight = 190;
18 const minHeight = 15; 21 const minHeight = 15;
@@ -34,17 +37,19 @@ @@ -34,17 +37,19 @@
34 const getDesign = computed(() => { 37 const getDesign = computed(() => {
35 const { persetOption, option } = props.config; 38 const { persetOption, option } = props.config;
36 const { fontColor: presetFontColor } = persetOption || {}; 39 const { fontColor: presetFontColor } = persetOption || {};
37 - const { componentInfo } = option || {}; 40 + const { componentInfo, attribute, attributeName, attributeRename } = option || {};
38 const { fontColor } = componentInfo || {}; 41 const { fontColor } = componentInfo || {};
39 return { 42 return {
40 fontColor: fontColor ?? presetFontColor, 43 fontColor: fontColor ?? presetFontColor,
  44 + attribute: attributeRename || attributeName || attribute,
41 }; 45 };
42 }); 46 });
43 47
44 const updateFn: DataFetchUpdateFn = (message, attribute) => { 48 const updateFn: DataFetchUpdateFn = (message, attribute) => {
45 const { data = {} } = message; 49 const { data = {} } = message;
46 const [latest] = data[attribute] || []; 50 const [latest] = data[attribute] || [];
47 - const [_, value] = latest; 51 + const [timespan, value] = latest;
  52 + time.value = timespan;
48 53
49 currentValue.value = Number(value); 54 currentValue.value = Number(value);
50 }; 55 };
@@ -247,6 +252,10 @@ @@ -247,6 +252,10 @@
247 <span>{{ '℃' }}</span> 252 <span>{{ '℃' }}</span>
248 </div> 253 </div>
249 </div> 254 </div>
  255 + <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
  256 + getDesign.attribute || '属性'
  257 + }}</div>
  258 + <UpdateTime :time="time" />
250 </main> 259 </main>
251 </template> 260 </template>
252 261
@@ -6,6 +6,7 @@ @@ -6,6 +6,7 @@
6 import { Space } from 'ant-design-vue'; 6 import { Space } from 'ant-design-vue';
7 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale'; 7 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
  9 + import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 10
10 const props = defineProps<{ 11 const props = defineProps<{
11 config: ComponentPropsConfigType<typeof option>; 12 config: ComponentPropsConfigType<typeof option>;
@@ -45,13 +46,13 @@ @@ -45,13 +46,13 @@
45 46
46 const getDesign = computed(() => { 47 const getDesign = computed(() => {
47 const { option, persetOption } = props.config; 48 const { option, persetOption } = props.config;
48 - const { componentInfo, attribute, attributeRename } = option; 49 + const { componentInfo, attribute, attributeRename, attributeName } = option;
49 const { fontColor: presetFontColor, unit: presetUnit } = persetOption || {}; 50 const { fontColor: presetFontColor, unit: presetUnit } = persetOption || {};
50 const { unit, fontColor } = componentInfo || {}; 51 const { unit, fontColor } = componentInfo || {};
51 return { 52 return {
52 unit: unit ?? presetUnit, 53 unit: unit ?? presetUnit,
53 fontColor: fontColor ?? presetFontColor, 54 fontColor: fontColor ?? presetFontColor,
54 - attribute: attributeRename || attribute, 55 + attribute: attributeRename || attributeName || attribute,
55 }; 56 };
56 }); 57 });
57 58
@@ -71,6 +72,8 @@ @@ -71,6 +72,8 @@
71 <template> 72 <template>
72 <main class="w-full h-full flex flex-col justify-center items-center"> 73 <main class="w-full h-full flex flex-col justify-center items-center">
73 <div class="flex flex-col w-full h-full"> 74 <div class="flex flex-col w-full h-full">
  75 + <DeviceName class="text-center" :config="config" />
  76 +
74 <div class="flex-1 flex justify-center items-center"> 77 <div class="flex-1 flex justify-center items-center">
75 <div class="flex px-4 items-center transform scale-75" :style="getScale"> 78 <div class="flex px-4 items-center transform scale-75" :style="getScale">
76 <Space 79 <Space
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 22
23 const getDesign = computed(() => { 23 const getDesign = computed(() => {
24 const { option, persetOption } = props.config; 24 const { option, persetOption } = props.config;
25 - const { componentInfo, attribute, attributeRename } = option; 25 + const { componentInfo, attribute, attributeRename, attributeName } = option;
26 const { 26 const {
27 fontColor: presetFontColor, 27 fontColor: presetFontColor,
28 unit: presetUnit, 28 unit: presetUnit,
@@ -35,7 +35,7 @@ @@ -35,7 +35,7 @@
35 return { 35 return {
36 unit: unit ?? presetUnit, 36 unit: unit ?? presetUnit,
37 fontColor: fontColor ?? presetFontColor, 37 fontColor: fontColor ?? presetFontColor,
38 - attribute: attributeRename || attribute, 38 + attribute: attributeRename || attributeName || attribute,
39 pointerColor: pointerColor ?? presetPointerColor, 39 pointerColor: pointerColor ?? presetPointerColor,
40 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor, 40 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
41 gradientInfo: gradientInfo ?? presetGradientInfo, 41 gradientInfo: gradientInfo ?? presetGradientInfo,
@@ -100,7 +100,6 @@ @@ -100,7 +100,6 @@
100 [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color, 100 [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
101 [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: progressBarCircle, 101 [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: progressBarCircle,
102 }; 102 };
103 - console.log(value, 'value');  
104 return setFieldsValue(value); 103 return setFieldsValue(value);
105 }; 104 };
106 105
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 22
23 const getDesign = computed(() => { 23 const getDesign = computed(() => {
24 const { option, persetOption } = props.config; 24 const { option, persetOption } = props.config;
25 - const { componentInfo, attribute, attributeRename } = option; 25 + const { componentInfo, attribute, attributeRename, attributeName } = option;
26 const { 26 const {
27 fontColor: presetFontColor, 27 fontColor: presetFontColor,
28 unit: presetUnit, 28 unit: presetUnit,
@@ -36,7 +36,7 @@ @@ -36,7 +36,7 @@
36 return { 36 return {
37 unit: unit ?? presetUnit, 37 unit: unit ?? presetUnit,
38 fontColor: fontColor ?? presetFontColor, 38 fontColor: fontColor ?? presetFontColor,
39 - attribute: attributeRename || attribute, 39 + attribute: attributeRename || attributeName || attribute,
40 pointerColor: pointerColor ?? presetPointerColor, 40 pointerColor: pointerColor ?? presetPointerColor,
41 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor, 41 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
42 progressBarCircle: progressBarCircle ?? presetProgressBarCircle, 42 progressBarCircle: progressBarCircle ?? presetProgressBarCircle,
@@ -32,7 +32,8 @@ @@ -32,7 +32,8 @@
32 return { 32 return {
33 dataSource: dataSource.map((item) => { 33 dataSource: dataSource.map((item) => {
34 const { unit, fontColor, showDeviceName } = item.componentInfo || {}; 34 const { unit, fontColor, showDeviceName } = item.componentInfo || {};
35 - const { deviceName, deviceRename, attribute, attributeRename, deviceId } = item; 35 + const { deviceName, deviceRename, attribute, attributeRename, deviceId, attributeName } =
  36 + item;
36 // return { 37 // return {
37 // unit: unit ?? persetUnit, 38 // unit: unit ?? persetUnit,
38 // fontColor: fontColor ?? persetFontColor, 39 // fontColor: fontColor ?? persetFontColor,
@@ -49,6 +50,7 @@ @@ -49,6 +50,7 @@
49 showDeviceName: showDeviceName ?? presetShowDeviceName, 50 showDeviceName: showDeviceName ?? presetShowDeviceName,
50 deviceName, 51 deviceName,
51 deviceRename, 52 deviceRename,
  53 + attributeName,
52 id: deviceId, 54 id: deviceId,
53 }; 55 };
54 }), 56 }),
@@ -151,10 +153,8 @@ @@ -151,10 +153,8 @@
151 const series = ref( 153 const series = ref(
152 unref(getDesign).dataSource.map((item, index) => ({ 154 unref(getDesign).dataSource.map((item, index) => ({
153 value: 30, 155 value: 30,
154 - name: `${  
155 - item.showDeviceName  
156 - ? (item.deviceRename || item.deviceName) + '-' + (item.attributeRename || item.attribute)  
157 - : '' 156 + name: `${item.showDeviceName ? `${item.deviceRename || item.deviceName}-` : ''}${
  157 + item.attributeRename || item.attributeName || item.attribute
158 }`, 158 }`,
159 attribute: item.attribute, 159 attribute: item.attribute,
160 id: item.id, 160 id: item.id,
@@ -334,9 +334,6 @@ @@ -334,9 +334,6 @@
334 <main class="w-full h-full flex flex-col justify-center items-center"> 334 <main class="w-full h-full flex flex-col justify-center items-center">
335 <DeviceName :config="config" /> 335 <DeviceName :config="config" />
336 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 336 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
337 - <!-- <div class="text-gray-500 text-xs text-center truncate">{{  
338 - getDesign.attribute || '湿度'  
339 - }}</div> -->  
340 <UpdateTime :time="time" /> 337 <UpdateTime :time="time" />
341 </main> 338 </main>
342 </template> 339 </template>
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 21
22 const getDesign = computed(() => { 22 const getDesign = computed(() => {
23 const { option, persetOption } = props.config; 23 const { option, persetOption } = props.config;
24 - const { componentInfo, attribute, attributeRename } = option; 24 + const { componentInfo, attribute, attributeRename, attributeName } = option;
25 const { 25 const {
26 fontColor: presetFontColor, 26 fontColor: presetFontColor,
27 unit: presetUnit, 27 unit: presetUnit,
@@ -34,7 +34,7 @@ @@ -34,7 +34,7 @@
34 return { 34 return {
35 unit: unit ?? presetUnit, 35 unit: unit ?? presetUnit,
36 fontColor: fontColor ?? presetFontColor, 36 fontColor: fontColor ?? presetFontColor,
37 - attribute: attributeRename || attribute, 37 + attribute: attributeRename || attributeName || attribute,
38 pointerColor: pointerColor ?? presetPointerColor, 38 pointerColor: pointerColor ?? presetPointerColor,
39 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor, 39 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
40 gradientInfo: gradientInfo ?? presetGradientInfo, 40 gradientInfo: gradientInfo ?? presetGradientInfo,
@@ -25,13 +25,13 @@ @@ -25,13 +25,13 @@
25 25
26 const getDesign = computed(() => { 26 const getDesign = computed(() => {
27 const { option, persetOption } = props.config; 27 const { option, persetOption } = props.config;
28 - const { componentInfo, attribute, attributeRename } = option; 28 + const { componentInfo, attribute, attributeRename, attributeName } = option;
29 const { fontColor: presetFontColor, unit: presetUnit } = persetOption || {}; 29 const { fontColor: presetFontColor, unit: presetUnit } = persetOption || {};
30 const { unit, fontColor } = componentInfo || {}; 30 const { unit, fontColor } = componentInfo || {};
31 return { 31 return {
32 unit: unit ?? presetUnit, 32 unit: unit ?? presetUnit,
33 fontColor: fontColor ?? presetFontColor, 33 fontColor: fontColor ?? presetFontColor,
34 - attribute: attributeRename || attribute, 34 + attribute: attributeRename || attributeName || attribute,
35 }; 35 };
36 }); 36 });
37 37
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 10 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
11 import { useIntervalFn } from '@vueuse/core'; 11 import { useIntervalFn } from '@vueuse/core';
12 import { nextTick } from 'vue'; 12 import { nextTick } from 'vue';
  13 + import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
13 14
14 const props = defineProps<{ 15 const props = defineProps<{
15 config: ComponentPropsConfigType<typeof option>; 16 config: ComponentPropsConfigType<typeof option>;
@@ -28,7 +29,7 @@ @@ -28,7 +29,7 @@
28 29
29 const getDesign = computed(() => { 30 const getDesign = computed(() => {
30 const { option, persetOption } = props.config; 31 const { option, persetOption } = props.config;
31 - const { componentInfo, attributeRename, attribute } = option; 32 + const { componentInfo, attributeRename, attribute, attributeName } = option;
32 33
33 const { 34 const {
34 fontColor: presetFontColor, 35 fontColor: presetFontColor,
@@ -41,7 +42,7 @@ @@ -41,7 +42,7 @@
41 unit: unit ?? presetUnit, 42 unit: unit ?? presetUnit,
42 fontColor: fontColor ?? presetFontColor, 43 fontColor: fontColor ?? presetFontColor,
43 gradientInfo: gradientInfo ?? presetGradientInfo, 44 gradientInfo: gradientInfo ?? presetGradientInfo,
44 - attribute: attributeRename || attribute, 45 + attribute: attributeRename || attributeName || attribute,
45 }; 46 };
46 }); 47 });
47 48
@@ -204,6 +205,7 @@ @@ -204,6 +205,7 @@
204 205
205 <template> 206 <template>
206 <main class="w-full h-full flex flex-col justify-center items-center"> 207 <main class="w-full h-full flex flex-col justify-center items-center">
  208 + <DeviceName :config="config" />
207 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 209 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
208 <div class="text-center text-gray-500 text-xs truncate"> 210 <div class="text-center text-gray-500 text-xs truncate">
209 {{ getDesign.attribute || '速度' }} 211 {{ getDesign.attribute || '速度' }}
@@ -24,13 +24,14 @@ @@ -24,13 +24,14 @@
24 closeColor: persetCloseColor, 24 closeColor: persetCloseColor,
25 showDeviceName: persetShowDeviceName, 25 showDeviceName: persetShowDeviceName,
26 } = persetOption || {}; 26 } = persetOption || {};
27 - const { componentInfo } = option; 27 + const { componentInfo, attribute, attributeName, attributeRename } = option;
28 28
29 const { openColor, closeColor, showDeviceName } = componentInfo || {}; 29 const { openColor, closeColor, showDeviceName } = componentInfo || {};
30 return { 30 return {
31 openColor: openColor ?? persetOpenColor, 31 openColor: openColor ?? persetOpenColor,
32 closeColor: closeColor ?? persetCloseColor, 32 closeColor: closeColor ?? persetCloseColor,
33 showDeviceName: showDeviceName ?? persetShowDeviceName, 33 showDeviceName: showDeviceName ?? persetShowDeviceName,
  34 + attribute: attributeRename || attributeName || attribute,
34 }; 35 };
35 }); 36 });
36 37
@@ -60,6 +61,7 @@ @@ -60,6 +61,7 @@
60 <template> 61 <template>
61 <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center"> 62 <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
62 <DeviceName :config="config" class="text-center" /> 63 <DeviceName :config="config" class="text-center" />
  64 +
63 <div 65 <div
64 :style="{ 66 :style="{
65 '--open-color': getDesign.openColor, 67 '--open-color': getDesign.openColor,
@@ -67,6 +69,7 @@ @@ -67,6 +69,7 @@
67 }" 69 }"
68 :class="isOpenClose ? 'switch_open' : 'switch_close'" 70 :class="isOpenClose ? 'switch_open' : 'switch_close'"
69 ></div> 71 ></div>
  72 + <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute }}</div>
70 <UpdateTime :time="time" /> 73 <UpdateTime :time="time" />
71 </main> 74 </main>
72 </template> 75 </template>
@@ -31,21 +31,14 @@ @@ -31,21 +31,14 @@
31 return { 31 return {
32 dataSource: dataSource?.map((item) => { 32 dataSource: dataSource?.map((item) => {
33 const { unit, fontColor, showDeviceName } = item.componentInfo || {}; 33 const { unit, fontColor, showDeviceName } = item.componentInfo || {};
34 - const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item;  
35 - // return {  
36 - // unit: unit ?? presetUnit,  
37 - // fontColor: fontColor ?? presetFontColor,  
38 - // attribute,  
39 - // attributeRename,  
40 - // deviceName,  
41 - // deviceRename,  
42 - // showDeviceName: showDeviceName ?? presetShowDeviceName,  
43 - // }; 34 + const { attribute, attributeName, attributeRename, deviceName, deviceRename, deviceId } =
  35 + item;
44 return { 36 return {
45 unit: unit ?? presetUnit, 37 unit: unit ?? presetUnit,
46 fontColor: fontColor ?? presetFontColor, 38 fontColor: fontColor ?? presetFontColor,
47 attribute, 39 attribute,
48 attributeRename, 40 attributeRename,
  41 + attributeName,
49 showDeviceName: showDeviceName ?? presetShowDeviceName, 42 showDeviceName: showDeviceName ?? presetShowDeviceName,
50 deviceName, 43 deviceName,
51 deviceRename, 44 deviceRename,
@@ -58,10 +51,8 @@ @@ -58,10 +51,8 @@
58 const series = ref( 51 const series = ref(
59 unref(getDesign).dataSource.map((item) => ({ 52 unref(getDesign).dataSource.map((item) => ({
60 value: 0, 53 value: 0,
61 - name: `${  
62 - item.showDeviceName  
63 - ? (item.deviceRename || item.deviceName) + '-' + (item.attributeRename || item.attribute)  
64 - : '' 54 + name: `${item.showDeviceName ? `${item.deviceRename || item.deviceName}-` : ''}${
  55 + item.attributeRename || item.attributeName || item.attribute
65 }`, 56 }`,
66 attribute: item.attribute, 57 attribute: item.attribute,
67 id: item.id, 58 id: item.id,
@@ -125,19 +116,9 @@ @@ -125,19 +116,9 @@
125 chartInstance.value.setOption(options()); 116 chartInstance.value.setOption(options());
126 }; 117 };
127 118
128 - // const randomFn = () => {  
129 - // useIntervalFn(() => {  
130 - // const value = (Math.random() * 100).toFixed(0);  
131 - // unref(chartInstance)?.setOption({  
132 - // series: [{ data: [{ value }] }, { data: [{ value }] }],  
133 - // } as EChartsOption);  
134 - // }, 3000);  
135 - // };  
136 -  
137 const updateChart = (data: SeriesOption['data']) => { 119 const updateChart = (data: SeriesOption['data']) => {
138 unref(chartInstance)?.setOption({ 120 unref(chartInstance)?.setOption({
139 series: [{ data }], 121 series: [{ data }],
140 - // color: unref(list).map((item) => item.title.color),  
141 } as EChartsOption); 122 } as EChartsOption);
142 }; 123 };
143 124
@@ -154,32 +135,12 @@ @@ -154,32 +135,12 @@
154 }); 135 });
155 136
156 updateChart(unref(series)); 137 updateChart(unref(series));
157 - // const { data = {} } = message;  
158 - // const { dataSource } = unref(getDesign);  
159 - // const series = dataSource.map((item) => {  
160 - // const { attribute, fontColor, unit, showDeviceName, deviceName, deviceRename } = item;  
161 - // const [latest] = data[attribute] || [];  
162 - // const [_timespan, value] = latest || [];  
163 -  
164 - // return {  
165 - // value,  
166 - // name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',  
167 - // itemStyle: { color: fontColor },  
168 - // tooltip: {  
169 - // valueFormatter(value) {  
170 - // return `${value} ${unit ?? ''}`;  
171 - // },  
172 - // },  
173 - // } as SeriesOption['data'];  
174 - // });  
175 - // updateChart(series);  
176 }; 138 };
177 139
178 useMultipleDataFetch(props, updateFn); 140 useMultipleDataFetch(props, updateFn);
179 141
180 onMounted(() => { 142 onMounted(() => {
181 initial(); 143 initial();
182 - // !props.config.option.uuid && randomFn();  
183 !props.config.option.uuid; 144 !props.config.option.uuid;
184 }); 145 });
185 146
@@ -32,16 +32,8 @@ @@ -32,16 +32,8 @@
32 return { 32 return {
33 dataSource: dataSource?.map((item) => { 33 dataSource: dataSource?.map((item) => {
34 const { unit, fontColor, showDeviceName } = item.componentInfo || {}; 34 const { unit, fontColor, showDeviceName } = item.componentInfo || {};
35 - const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item;  
36 - // return {  
37 - // unit: unit ?? presetUnit,  
38 - // fontColor: fontColor ?? presetFontColor,  
39 - // attribute,  
40 - // attributeRename,  
41 - // deviceName,  
42 - // deviceRename,  
43 - // showDeviceName: showDeviceName ?? presetShowDeviceName,  
44 - // }; 35 + const { attribute, attributeName, attributeRename, deviceName, deviceRename, deviceId } =
  36 + item;
45 return { 37 return {
46 unit: unit ?? presetUnit, 38 unit: unit ?? presetUnit,
47 fontColor: fontColor ?? presetFontColor, 39 fontColor: fontColor ?? presetFontColor,
@@ -50,6 +42,7 @@ @@ -50,6 +42,7 @@
50 showDeviceName: showDeviceName ?? presetShowDeviceName, 42 showDeviceName: showDeviceName ?? presetShowDeviceName,
51 deviceName, 43 deviceName,
52 deviceRename, 44 deviceRename,
  45 + attributeName,
53 id: deviceId, 46 id: deviceId,
54 }; 47 };
55 }), 48 }),
@@ -57,7 +50,6 @@ @@ -57,7 +50,6 @@
57 }); 50 });
58 51
59 const options = (): EChartsOption => { 52 const options = (): EChartsOption => {
60 - // getStageColor(gradientInfo);  
61 return { 53 return {
62 tooltip: { 54 tooltip: {
63 trigger: 'item', 55 trigger: 'item',
@@ -112,19 +104,9 @@ @@ -112,19 +104,9 @@
112 chartInstance.value.setOption(options()); 104 chartInstance.value.setOption(options());
113 }; 105 };
114 106
115 - // const randomFn = () => {  
116 - // useIntervalFn(() => {  
117 - // const value = (Math.random() * 100).toFixed(0);  
118 - // unref(chartInstance)?.setOption({  
119 - // series: [{ data: [{ value }] }, { data: [{ value }] }],  
120 - // } as EChartsOption);  
121 - // }, 3000);  
122 - // };  
123 -  
124 const updateChart = (data: SeriesOption['data']) => { 107 const updateChart = (data: SeriesOption['data']) => {
125 unref(chartInstance)?.setOption({ 108 unref(chartInstance)?.setOption({
126 series: [{ data }], 109 series: [{ data }],
127 - // color: unref(list).map((item) => item.title.color),  
128 } as EChartsOption); 110 } as EChartsOption);
129 }; 111 };
130 const { forEachGroupMessage } = useReceiveMessage(); 112 const { forEachGroupMessage } = useReceiveMessage();
@@ -133,10 +115,8 @@ @@ -133,10 +115,8 @@
133 const series = ref( 115 const series = ref(
134 unref(getDesign).dataSource.map((item) => ({ 116 unref(getDesign).dataSource.map((item) => ({
135 value: 0, 117 value: 0,
136 - name: `${  
137 - item.showDeviceName  
138 - ? (item.deviceRename || item.deviceName) + '-' + (item.attributeRename || item.attribute)  
139 - : '' 118 + name: `${item.showDeviceName ? `${item.deviceRename || item.deviceName}-` : ''}${
  119 + item.attributeRename || item.attributeName || item.attribute
140 }`, 120 }`,
141 itemStyle: { color: item.fontColor }, 121 itemStyle: { color: item.fontColor },
142 attribute: item.attribute, 122 attribute: item.attribute,
@@ -150,7 +130,6 @@ @@ -150,7 +130,6 @@
150 ); 130 );
151 131
152 const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => { 132 const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
153 - // console.log(unref(series), 'series', unref(getDesign).dataSource);  
154 forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => { 133 forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
155 series.value.forEach((item) => { 134 series.value.forEach((item) => {
156 if (item.id === deviceId && item.attribute === attribute) { 135 if (item.id === deviceId && item.attribute === attribute) {
@@ -179,7 +158,6 @@ @@ -179,7 +158,6 @@
179 158
180 onMounted(() => { 159 onMounted(() => {
181 initial(); 160 initial();
182 - // !props.config.option.uuid && randomFn();  
183 !props.config.option.uuid; 161 !props.config.option.uuid;
184 }); 162 });
185 163
@@ -3,7 +3,6 @@ @@ -3,7 +3,6 @@
3 import { option } from './config'; 3 import { option } from './config';
4 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale'; 4 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
5 import { useDataFetch } from '/@/views/visual/packages/hook/useSocket'; 5 import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
6 - import { computed } from 'vue';  
7 import { ref, onMounted, unref } from 'vue'; 6 import { ref, onMounted, unref } from 'vue';
8 import { useIntervalFn } from '@vueuse/core'; 7 import { useIntervalFn } from '@vueuse/core';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
@@ -15,23 +14,6 @@ @@ -15,23 +14,6 @@
15 14
16 const isOpenClose = ref<boolean>(true); 15 const isOpenClose = ref<boolean>(true);
17 16
18 - const getDesign = computed(() => {  
19 - const { persetOption = {}, option } = props.config;  
20 - const {  
21 - openColor: persetOpenColor,  
22 - closeColor: persetCloseColor,  
23 - showDeviceName: persetShowDeviceName,  
24 - } = persetOption || {};  
25 - const { componentInfo } = option;  
26 -  
27 - const { openColor, closeColor, showDeviceName } = componentInfo || {};  
28 - return {  
29 - openColor: openColor ?? persetOpenColor,  
30 - closeColor: closeColor ?? persetCloseColor,  
31 - showDeviceName: showDeviceName ?? persetShowDeviceName,  
32 - };  
33 - });  
34 -  
35 const randomFn = () => { 17 const randomFn = () => {
36 useIntervalFn(() => { 18 useIntervalFn(() => {
37 isOpenClose.value = !unref(isOpenClose); 19 isOpenClose.value = !unref(isOpenClose);
@@ -58,12 +40,10 @@ @@ -58,12 +40,10 @@
58 <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center"> 40 <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
59 <DeviceName :config="config" class="text-center" /> 41 <DeviceName :config="config" class="text-center" />
60 <div 42 <div
61 - :style="{  
62 - '--open-color': getDesign.openColor,  
63 - '--close-color': getDesign.closeColor,  
64 - }" 43 + style="--open-color: `${getDesign.openColor}`; --close-color: `${getDesign.closeColor}`"
65 :class="isOpenClose ? 'switch_open' : 'switch_close'" 44 :class="isOpenClose ? 'switch_open' : 'switch_close'"
66 - ></div> 45 + >
  46 + </div>
67 </main> 47 </main>
68 </template> 48 </template>
69 <style lang="less" scoped> 49 <style lang="less" scoped>
@@ -18,12 +18,12 @@ @@ -18,12 +18,12 @@
18 18
19 const { fontColor: persetFontColor } = persetOption; 19 const { fontColor: persetFontColor } = persetOption;
20 20
21 - const { componentInfo, attribute, attributeRename } = option; 21 + const { componentInfo, attribute, attributeRename, attributeName } = option;
22 22
23 const { fontColor } = componentInfo || {}; 23 const { fontColor } = componentInfo || {};
24 return { 24 return {
25 fontColor: fontColor || persetFontColor, 25 fontColor: fontColor || persetFontColor,
26 - attribute: attributeRename || attribute, 26 + attribute: attributeRename || attributeName || attribute,
27 }; 27 };
28 }); 28 });
29 29
@@ -46,7 +46,7 @@ @@ -46,7 +46,7 @@
46 <h1 class="my-4 font-bold text-xl !my-2 truncate" :style="{ color: getDesign.fontColor }"> 46 <h1 class="my-4 font-bold text-xl !my-2 truncate" :style="{ color: getDesign.fontColor }">
47 {{ currentValue || 0 }} 47 {{ currentValue || 0 }}
48 </h1> 48 </h1>
49 - <div class="text-gray-500 text-lg truncate">{{ getDesign.attribute || '温度' }}</div> 49 + <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div>
50 <!-- <div v-if="config.option.componentInfo.showDeviceName"> 50 <!-- <div v-if="config.option.componentInfo.showDeviceName">
51 {{ config.option.deviceRename || config.option.deviceName }} 51 {{ config.option.deviceRename || config.option.deviceName }}
52 </div> --> 52 </div> -->
@@ -20,13 +20,13 @@ @@ -20,13 +20,13 @@
20 20
21 const { fontColor: persetFontColor } = persetOption; 21 const { fontColor: persetFontColor } = persetOption;
22 22
23 - const { componentInfo, attribute, attributeRename } = option; 23 + const { componentInfo, attribute, attributeName, attributeRename } = option;
24 24
25 const { fontColor } = componentInfo || {}; 25 const { fontColor } = componentInfo || {};
26 26
27 return { 27 return {
28 fontColor: fontColor || persetFontColor, 28 fontColor: fontColor || persetFontColor,
29 - attribute: attributeRename || attribute, 29 + attribute: attributeRename || attributeName || attribute,
30 }; 30 };
31 }); 31 });
32 32
@@ -51,7 +51,7 @@ @@ -51,7 +51,7 @@
51 <h1 class="my-4 font-bold text-xl !my-2 truncate" :style="{ color: getDesign.fontColor }"> 51 <h1 class="my-4 font-bold text-xl !my-2 truncate" :style="{ color: getDesign.fontColor }">
52 {{ currentValue || 0 }} 52 {{ currentValue || 0 }}
53 </h1> 53 </h1>
54 - <div class="text-gray-500 text-lg truncate">{{ getDesign.attribute || '温度' }}</div> 54 + <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div>
55 </div> 55 </div>
56 <UpdateTime :time="time" /> 56 <UpdateTime :time="time" />
57 </main> 57 </main>
@@ -27,7 +27,7 @@ @@ -27,7 +27,7 @@
27 fontColor: persetFontColor, 27 fontColor: persetFontColor,
28 } = persetOption; 28 } = persetOption;
29 29
30 - const { componentInfo, attribute, attributeRename } = option; 30 + const { componentInfo, attribute, attributeRename, attributeName } = option;
31 31
32 const { icon, iconColor, fontColor, unit } = componentInfo || {}; 32 const { icon, iconColor, fontColor, unit } = componentInfo || {};
33 return { 33 return {
@@ -35,7 +35,7 @@ @@ -35,7 +35,7 @@
35 unit: unit ?? perseUnit, 35 unit: unit ?? perseUnit,
36 icon: icon || persetIcon, 36 icon: icon || persetIcon,
37 fontColor: fontColor || persetFontColor, 37 fontColor: fontColor || persetFontColor,
38 - attribute: attributeRename || attribute, 38 + attribute: attributeRename || attributeName || attribute,
39 }; 39 };
40 }); 40 });
41 41
@@ -66,7 +66,7 @@ @@ -66,7 +66,7 @@
66 <span> {{ currentValue || 0 }}</span> 66 <span> {{ currentValue || 0 }}</span>
67 <span>{{ getDesign.unit }} </span> 67 <span>{{ getDesign.unit }} </span>
68 </h1> 68 </h1>
69 - <div class="text-gray-500 text-lg truncate">{{ getDesign.attribute || '温度' }}</div> 69 + <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div>
70 </div> 70 </div>
71 <UpdateTime :time="time" /> 71 <UpdateTime :time="time" />
72 </main> 72 </main>
@@ -24,7 +24,7 @@ @@ -24,7 +24,7 @@
24 fontColor: persetFontColor, 24 fontColor: persetFontColor,
25 } = persetOption; 25 } = persetOption;
26 26
27 - const { componentInfo, attribute, attributeRename } = option; 27 + const { componentInfo, attribute, attributeRename, attributeName } = option;
28 28
29 const { icon, iconColor, fontColor, unit } = componentInfo || {}; 29 const { icon, iconColor, fontColor, unit } = componentInfo || {};
30 return { 30 return {
@@ -32,7 +32,7 @@ @@ -32,7 +32,7 @@
32 unit: unit ?? perseUnit, 32 unit: unit ?? perseUnit,
33 icon: icon || persetIcon, 33 icon: icon || persetIcon,
34 fontColor: fontColor || persetFontColor, 34 fontColor: fontColor || persetFontColor,
35 - attribute: attributeRename || attribute, 35 + attribute: attributeRename || attributeName || attribute,
36 }; 36 };
37 }); 37 });
38 38
@@ -62,7 +62,7 @@ @@ -62,7 +62,7 @@
62 <span>{{ currentValue || 0 }}</span> 62 <span>{{ currentValue || 0 }}</span>
63 <span>{{ getDesign.unit }}</span> 63 <span>{{ getDesign.unit }}</span>
64 </h1> 64 </h1>
65 - <div class="text-gray-500 text-lg truncate">{{ getDesign.attribute || '温度' }}</div> 65 + <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div>
66 </div> 66 </div>
67 </main> 67 </main>
68 </template> 68 </template>
@@ -30,6 +30,7 @@ @@ -30,6 +30,7 @@
30 attributeRename?: string; 30 attributeRename?: string;
31 deviceId?: string; 31 deviceId?: string;
32 deviceName?: string; 32 deviceName?: string;
  33 + attributeName?: string;
33 deviceRename?: string; 34 deviceRename?: string;
34 } 35 }
35 36
@@ -65,7 +66,8 @@ @@ -65,7 +66,8 @@
65 return { 66 return {
66 dataSource: dataSource.map((item) => { 67 dataSource: dataSource.map((item) => {
67 const { unit, fontColor, backgroundColor } = item.componentInfo || {}; 68 const { unit, fontColor, backgroundColor } = item.componentInfo || {};
68 - const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item; 69 + const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } =
  70 + item;
69 return { 71 return {
70 unit: unit ?? presetUnit, 72 unit: unit ?? presetUnit,
71 fontColor: fontColor ?? presetFontColor, 73 fontColor: fontColor ?? presetFontColor,
@@ -74,6 +76,7 @@ @@ -74,6 +76,7 @@
74 deviceRename, 76 deviceRename,
75 attribute, 77 attribute,
76 attributeRename, 78 attributeRename,
  79 + attributeName,
77 id: deviceId, 80 id: deviceId,
78 } as PercentType; 81 } as PercentType;
79 }), 82 }),
@@ -112,11 +115,11 @@ @@ -112,11 +115,11 @@
112 class="mt-2 flex flex-col ml-3 mr-3 items-stretch" 115 class="mt-2 flex flex-col ml-3 mr-3 items-stretch"
113 > 116 >
114 <div class="flex justify-between"> 117 <div class="flex justify-between">
115 - <div class="text-gray-500 text-lg truncate" :style="{ color: item.fontColor }"> 118 + <div class="text-gray-500 text-sm truncate" :style="{ color: item.fontColor }">
116 {{ 119 {{
117 - (item.deviceRename || item.deviceName) +  
118 - '-' +  
119 - (item.attributeRename || item.attribute) || '温度' 120 + `${item.deviceRename || item.deviceName}
  121 + -
  122 + ${item.attributeRename || item.attributeName || item.attribute || '温度'}`
120 }} 123 }}
121 </div> 124 </div>
122 <span class="text-lg" :style="{ color: item.fontColor }" 125 <span class="text-lg" :style="{ color: item.fontColor }"