Commit 7fea2d087027fd4c1a2426a30b439506324272f4
Merge branch 'fix/DEFECT-1434' into 'main_dev'
fix:修改看板组件teambition上的问题 See merge request yunteng/thingskit-front!749
Showing
12 changed files
with
99 additions
and
31 deletions
| ... | ... | @@ -63,9 +63,9 @@ |
| 63 | 63 | icon: icon ?? persetIcon, |
| 64 | 64 | iconColor: iconColor ?? persetIconColor, |
| 65 | 65 | attribute: attribute, |
| 66 | - attributeName: attributeRename ?? attributeName, | |
| 66 | + attributeName: attributeRename || attributeName, | |
| 67 | 67 | showDeviceName, |
| 68 | - deviceName: deviceRename ?? deviceName, | |
| 68 | + deviceName: deviceRename || deviceName, | |
| 69 | 69 | id: deviceId, |
| 70 | 70 | }; |
| 71 | 71 | }), | ... | ... |
| ... | ... | @@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum'; |
| 12 | 12 | export const option: PublicPresetOptions = { |
| 13 | 13 | [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, |
| 14 | 14 | [ComponentConfigFieldEnum.UNIT]: 'm', |
| 15 | + [ComponentConfigFieldEnum.MAX_NUMBER]: 100, | |
| 15 | 16 | [ComponentConfigFieldEnum.FONT_COLOR]: '#fff', |
| 16 | 17 | [ComponentConfigFieldEnum.SHOW_TIME]: false, |
| 17 | 18 | [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: { | ... | ... |
| ... | ... | @@ -4,7 +4,7 @@ |
| 4 | 4 | import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type'; |
| 5 | 5 | import { option } from './config'; |
| 6 | 6 | import { ComponentInfo } from '/@/views/visual/palette/types'; |
| 7 | - import { toRaw } from 'vue'; | |
| 7 | + import { nextTick, toRaw } from 'vue'; | |
| 8 | 8 | |
| 9 | 9 | const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({ |
| 10 | 10 | schemas: [ |
| ... | ... | @@ -50,6 +50,27 @@ |
| 50 | 50 | defaultValue: option.unit, |
| 51 | 51 | }, |
| 52 | 52 | { |
| 53 | + field: ComponentConfigFieldEnum.MAX_NUMBER, | |
| 54 | + label: '最大值', | |
| 55 | + component: 'InputNumber', | |
| 56 | + defaultValue: 100, | |
| 57 | + componentProps: ({ formActionType }) => { | |
| 58 | + const { setFieldsValue } = formActionType; | |
| 59 | + return { | |
| 60 | + placeholder: '请输入最小值', | |
| 61 | + min: 100, | |
| 62 | + onChange: async (e) => { | |
| 63 | + if (!e) { | |
| 64 | + await nextTick(); | |
| 65 | + setFieldsValue({ | |
| 66 | + [ComponentConfigFieldEnum.MAX_NUMBER]: 100, | |
| 67 | + }); | |
| 68 | + } | |
| 69 | + }, | |
| 70 | + }; | |
| 71 | + }, | |
| 72 | + }, | |
| 73 | + { | |
| 53 | 74 | field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME, |
| 54 | 75 | label: '显示设备名称', |
| 55 | 76 | component: 'Checkbox', | ... | ... |
| ... | ... | @@ -20,13 +20,14 @@ |
| 20 | 20 | const getDesign = computed(() => { |
| 21 | 21 | const { option, persetOption } = props.config; |
| 22 | 22 | const { componentInfo, attribute, attributeName, attributeRename } = option; |
| 23 | - const { flowmeterConfig, unit, fontColor, showTime } = componentInfo || {}; | |
| 23 | + const { flowmeterConfig, unit, fontColor, showTime, maxNumber } = componentInfo || {}; | |
| 24 | 24 | const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {}; |
| 25 | 25 | const { |
| 26 | 26 | flowmeterConfig: presetFlowmeterConfig, |
| 27 | 27 | unit: persetUnit, |
| 28 | 28 | fontColor: presetFontColor, |
| 29 | 29 | showTime: persetShowTime, |
| 30 | + maxNumber: persetMaxNumber, | |
| 30 | 31 | } = persetOption || {}; |
| 31 | 32 | const { |
| 32 | 33 | backgroundColor: presetBackgroundColor, |
| ... | ... | @@ -43,6 +44,7 @@ |
| 43 | 44 | fontColor: fontColor ?? presetFontColor, |
| 44 | 45 | attribute: attributeRename || attributeName || attribute, |
| 45 | 46 | showTime: showTime ?? persetShowTime, |
| 47 | + maxNumber: maxNumber ?? persetMaxNumber, | |
| 46 | 48 | }; |
| 47 | 49 | }); |
| 48 | 50 | |
| ... | ... | @@ -58,12 +60,20 @@ |
| 58 | 60 | |
| 59 | 61 | const getWaveHeight = computed(() => { |
| 60 | 62 | const value = unref(currentValue); |
| 61 | - return value <= 0 ? 0 : -value - 15; | |
| 63 | + const size = ref(1); | |
| 64 | + if (unref(getDesign).maxNumber > 100) { | |
| 65 | + size.value = 100 / unref(getDesign).maxNumber; | |
| 66 | + } | |
| 67 | + return value * unref(size) <= 0 ? 0 : -(value * unref(size)) - 15; | |
| 62 | 68 | }); |
| 63 | 69 | |
| 64 | 70 | const getHeight = computed(() => { |
| 65 | 71 | const value = unref(currentValue); |
| 66 | - return value >= 100 ? 0 : 100 - value + 10; | |
| 72 | + const size = ref(1); | |
| 73 | + if (unref(getDesign).maxNumber > 100) { | |
| 74 | + size.value = 100 / unref(getDesign).maxNumber; | |
| 75 | + } | |
| 76 | + return value * unref(size) >= 100 ? 0 : 100 - value * unref(size) + 10; | |
| 67 | 77 | }); |
| 68 | 78 | |
| 69 | 79 | const updateFn: DataFetchUpdateFn = (message, attribute) => { | ... | ... |
| ... | ... | @@ -13,6 +13,7 @@ export const option: PublicPresetOptions = { |
| 13 | 13 | [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, |
| 14 | 14 | [ComponentConfigFieldEnum.SHOW_TIME]: false, |
| 15 | 15 | [ComponentConfigFieldEnum.UNIT]: 'm', |
| 16 | + [ComponentConfigFieldEnum.MAX_NUMBER]: 100, | |
| 16 | 17 | [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: { |
| 17 | 18 | [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb', |
| 18 | 19 | [ComponentConfigFieldEnum.WAVE_FIRST]: '#4579e2', | ... | ... |
| ... | ... | @@ -4,7 +4,7 @@ |
| 4 | 4 | import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type'; |
| 5 | 5 | import { option } from './config'; |
| 6 | 6 | import { ComponentInfo } from '/@/views/visual/palette/types'; |
| 7 | - import { toRaw } from 'vue'; | |
| 7 | + import { nextTick, toRaw } from 'vue'; | |
| 8 | 8 | |
| 9 | 9 | const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({ |
| 10 | 10 | schemas: [ |
| ... | ... | @@ -49,6 +49,33 @@ |
| 49 | 49 | component: 'Input', |
| 50 | 50 | defaultValue: option.unit, |
| 51 | 51 | }, |
| 52 | + // { | |
| 53 | + // field: ComponentConfigFieldEnum.MIN_NUMBER, | |
| 54 | + // label: '最小值', | |
| 55 | + // component: 'InputNumber', | |
| 56 | + // defaultValue: 0, | |
| 57 | + // }, | |
| 58 | + { | |
| 59 | + field: ComponentConfigFieldEnum.MAX_NUMBER, | |
| 60 | + label: '最大值', | |
| 61 | + component: 'InputNumber', | |
| 62 | + defaultValue: 100, | |
| 63 | + componentProps: ({ formActionType }) => { | |
| 64 | + const { setFieldsValue } = formActionType; | |
| 65 | + return { | |
| 66 | + placeholder: '请输入最小值', | |
| 67 | + min: 100, | |
| 68 | + onChange: async (e) => { | |
| 69 | + if (!e) { | |
| 70 | + await nextTick(); | |
| 71 | + setFieldsValue({ | |
| 72 | + [ComponentConfigFieldEnum.MAX_NUMBER]: 100, | |
| 73 | + }); | |
| 74 | + } | |
| 75 | + }, | |
| 76 | + }; | |
| 77 | + }, | |
| 78 | + }, | |
| 52 | 79 | { |
| 53 | 80 | field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME, |
| 54 | 81 | label: '显示设备名称', | ... | ... |
| ... | ... | @@ -20,13 +20,14 @@ |
| 20 | 20 | const getDesign = computed(() => { |
| 21 | 21 | const { option, persetOption } = props.config; |
| 22 | 22 | const { componentInfo, attribute, attributeName, attributeRename } = option; |
| 23 | - const { flowmeterConfig, unit, fontColor, showTime } = componentInfo || {}; | |
| 23 | + const { flowmeterConfig, unit, fontColor, showTime, maxNumber } = componentInfo || {}; | |
| 24 | 24 | const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {}; |
| 25 | 25 | const { |
| 26 | 26 | flowmeterConfig: presetFlowmeterConfig, |
| 27 | 27 | unit: persetUnit, |
| 28 | 28 | fontColor: presetFontColor, |
| 29 | 29 | showTime: persetShowTime, |
| 30 | + maxNumber: persetMaxNumber, | |
| 30 | 31 | } = persetOption || {}; |
| 31 | 32 | const { |
| 32 | 33 | backgroundColor: presetBackgroundColor, |
| ... | ... | @@ -43,17 +44,26 @@ |
| 43 | 44 | fontColor: fontColor ?? presetFontColor, |
| 44 | 45 | attribute: attributeRename || attributeName || attribute, |
| 45 | 46 | showTime: showTime ?? persetShowTime, |
| 47 | + maxNumber: maxNumber ?? persetMaxNumber, | |
| 46 | 48 | }; |
| 47 | 49 | }); |
| 48 | 50 | |
| 49 | 51 | const getWaveHeight = computed(() => { |
| 50 | 52 | const value = unref(currentValue); |
| 51 | - return value <= 0 ? 0 : -value - 15; | |
| 53 | + const size = ref(1); | |
| 54 | + if (unref(getDesign).maxNumber > 100) { | |
| 55 | + size.value = 100 / unref(getDesign).maxNumber; | |
| 56 | + } | |
| 57 | + return value * unref(size) <= 0 ? 0 : -(value * unref(size)) - 15; | |
| 52 | 58 | }); |
| 53 | 59 | |
| 54 | 60 | const getHeight = computed(() => { |
| 55 | 61 | const value = unref(currentValue); |
| 56 | - return value >= 100 ? 0 : 100 - value + 10; | |
| 62 | + const size = ref(1); | |
| 63 | + if (unref(getDesign).maxNumber > 100) { | |
| 64 | + size.value = 100 / unref(getDesign).maxNumber; | |
| 65 | + } | |
| 66 | + return value * unref(size) >= 100 ? 0 : 100 - value * unref(size) + 10; | |
| 57 | 67 | }); |
| 58 | 68 | |
| 59 | 69 | const updateFn: DataFetchUpdateFn = (message, attribute) => { | ... | ... |
| ... | ... | @@ -28,9 +28,9 @@ |
| 28 | 28 | showTime: persetShowTime, |
| 29 | 29 | } = persetOption; |
| 30 | 30 | |
| 31 | - const { componentInfo, attributeRename } = option; | |
| 31 | + const { componentInfo, attributeName, attributeRename } = option; | |
| 32 | 32 | |
| 33 | - const { icon, iconColor, fontColor, unit, iconClose, iconColorClose, attributeName, showTime } = | |
| 33 | + const { icon, iconColor, fontColor, unit, iconClose, iconColorClose, showTime } = | |
| 34 | 34 | componentInfo || {}; |
| 35 | 35 | return { |
| 36 | 36 | iconColor: iconColor || persetIconColor, | ... | ... |
| ... | ... | @@ -68,11 +68,10 @@ |
| 68 | 68 | unit: unit ?? presetUnit, |
| 69 | 69 | fontColor: fontColor ?? presetFontColor, |
| 70 | 70 | backgroundColor: backgroundColor ?? persetBackgroundColor, |
| 71 | - deviceName, | |
| 72 | - deviceRename, | |
| 71 | + deviceName: deviceRename || deviceName, | |
| 73 | 72 | attribute, |
| 74 | - attributeRename, | |
| 75 | - attributeName, | |
| 73 | + attributeName: attributeRename || attributeName, | |
| 74 | + | |
| 76 | 75 | id: deviceId, |
| 77 | 76 | } as PercentType; |
| 78 | 77 | }), |
| ... | ... | @@ -113,9 +112,9 @@ |
| 113 | 112 | <div class="flex justify-between"> |
| 114 | 113 | <div class="text-gray-500 text-sm truncate" :style="{ color: item.fontColor }"> |
| 115 | 114 | {{ |
| 116 | - `${item.deviceRename || item.deviceName} | |
| 115 | + `${item.deviceName} | |
| 117 | 116 | - |
| 118 | - ${item.attributeRename || item.attributeName || item.attribute || '温度'}` | |
| 117 | + ${item.attributeName || item.attribute || '温度'}` | |
| 119 | 118 | }} |
| 120 | 119 | </div> |
| 121 | 120 | <span class="text-lg" :style="{ color: item.fontColor }" | ... | ... |
| ... | ... | @@ -36,11 +36,9 @@ |
| 36 | 36 | fontColor: fontColor ?? persetFontColor, |
| 37 | 37 | icon: icon ?? persetIcon, |
| 38 | 38 | iconColor: iconColor ?? persetIconColor, |
| 39 | - attribute: attribute || attributeRename, | |
| 40 | - attributeRename, | |
| 41 | - deviceName, | |
| 42 | - attributeName, | |
| 43 | - deviceRename, | |
| 39 | + attribute, | |
| 40 | + deviceName: deviceRename || deviceName, | |
| 41 | + attributeName: attributeRename || attributeName, | |
| 44 | 42 | id: deviceId, |
| 45 | 43 | }; |
| 46 | 44 | }), |
| ... | ... | @@ -49,8 +47,8 @@ |
| 49 | 47 | const defaultSvgList = ref<any>([ |
| 50 | 48 | { |
| 51 | 49 | value: 26.2, |
| 52 | - deviceRename: '温湿度', | |
| 53 | - attributeRename: '温度', | |
| 50 | + deviceName: '温湿度', | |
| 51 | + attributeName: '温度', | |
| 54 | 52 | icon: 'zongfushe', |
| 55 | 53 | unit: '℃', |
| 56 | 54 | iconColor: '#367BFF', |
| ... | ... | @@ -58,8 +56,8 @@ |
| 58 | 56 | }, |
| 59 | 57 | { |
| 60 | 58 | value: 53.7, |
| 61 | - deviceRename: '温湿度', | |
| 62 | - attributeRename: '湿度', | |
| 59 | + deviceName: '温湿度', | |
| 60 | + attributeName: '湿度', | |
| 63 | 61 | icon: 'guangzhaoqiangdu', |
| 64 | 62 | unit: '℃', |
| 65 | 63 | iconColor: '#FFA000', |
| ... | ... | @@ -106,9 +104,7 @@ |
| 106 | 104 | /> |
| 107 | 105 | |
| 108 | 106 | <div class="text-gray-500 text-lg truncate ml-6">{{ |
| 109 | - item.deviceRename || | |
| 110 | - item.deviceName + '-' + (item.attributeRename || item.attributeName) || | |
| 111 | - '温度' | |
| 107 | + item.deviceName + '-' + item.attributeName || '温度' | |
| 112 | 108 | }}</div> |
| 113 | 109 | </div> |
| 114 | 110 | ... | ... |
| ... | ... | @@ -5,6 +5,7 @@ export enum ComponentConfigFieldEnum { |
| 5 | 5 | INSTRUMENT_PANEL_COLOR = 'instrumentPanelColor', |
| 6 | 6 | CONTROL_BAR_COLOR = 'controlBarColor', |
| 7 | 7 | // INSTRUMENT_PANEL_WIDTH = 'instrumentPanelWidth', |
| 8 | + LINE_COLOR = 'lineColor', | |
| 8 | 9 | |
| 9 | 10 | PROGRESS_BAR_CIRCLE = 'progressBarCircle', |
| 10 | 11 | |
| ... | ... | @@ -29,4 +30,6 @@ export enum ComponentConfigFieldEnum { |
| 29 | 30 | BACKGROUND_COLOR = 'backgroundColor', |
| 30 | 31 | OPEN_COLOR = 'openColor', |
| 31 | 32 | CLOSE_COLOR = 'closeColor', |
| 33 | + MIN_NUMBER = 'minNumber', | |
| 34 | + MAX_NUMBER = 'maxNumber', | |
| 32 | 35 | } | ... | ... |