Showing
12 changed files
with
95 additions
and
27 deletions
| @@ -63,9 +63,9 @@ | @@ -63,9 +63,9 @@ | ||
| 63 | icon: icon ?? persetIcon, | 63 | icon: icon ?? persetIcon, |
| 64 | iconColor: iconColor ?? persetIconColor, | 64 | iconColor: iconColor ?? persetIconColor, |
| 65 | attribute: attribute, | 65 | attribute: attribute, |
| 66 | - attributeName: attributeRename ?? attributeName, | 66 | + attributeName: attributeRename || attributeName, |
| 67 | showDeviceName, | 67 | showDeviceName, |
| 68 | - deviceName: deviceRename ?? deviceName, | 68 | + deviceName: deviceRename || deviceName, |
| 69 | id: deviceId, | 69 | id: deviceId, |
| 70 | }; | 70 | }; |
| 71 | }), | 71 | }), |
| @@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum'; | @@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum'; | ||
| 12 | export const option: PublicPresetOptions = { | 12 | export const option: PublicPresetOptions = { |
| 13 | [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, | 13 | [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, |
| 14 | [ComponentConfigFieldEnum.UNIT]: 'm', | 14 | [ComponentConfigFieldEnum.UNIT]: 'm', |
| 15 | + [ComponentConfigFieldEnum.MAX_NUMBER]: 100, | ||
| 15 | [ComponentConfigFieldEnum.FONT_COLOR]: '#fff', | 16 | [ComponentConfigFieldEnum.FONT_COLOR]: '#fff', |
| 16 | [ComponentConfigFieldEnum.SHOW_TIME]: false, | 17 | [ComponentConfigFieldEnum.SHOW_TIME]: false, |
| 17 | [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: { | 18 | [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: { |
| @@ -4,7 +4,7 @@ | @@ -4,7 +4,7 @@ | ||
| 4 | import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type'; | 4 | import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type'; |
| 5 | import { option } from './config'; | 5 | import { option } from './config'; |
| 6 | import { ComponentInfo } from '/@/views/visual/palette/types'; | 6 | import { ComponentInfo } from '/@/views/visual/palette/types'; |
| 7 | - import { toRaw } from 'vue'; | 7 | + import { nextTick, toRaw } from 'vue'; |
| 8 | 8 | ||
| 9 | const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({ | 9 | const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({ |
| 10 | schemas: [ | 10 | schemas: [ |
| @@ -50,6 +50,27 @@ | @@ -50,6 +50,27 @@ | ||
| 50 | defaultValue: option.unit, | 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 | field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME, | 74 | field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME, |
| 54 | label: '显示设备名称', | 75 | label: '显示设备名称', |
| 55 | component: 'Checkbox', | 76 | component: 'Checkbox', |
| @@ -20,13 +20,14 @@ | @@ -20,13 +20,14 @@ | ||
| 20 | const getDesign = computed(() => { | 20 | const getDesign = computed(() => { |
| 21 | const { option, persetOption } = props.config; | 21 | const { option, persetOption } = props.config; |
| 22 | const { componentInfo, attribute, attributeName, attributeRename } = option; | 22 | const { componentInfo, attribute, attributeName, attributeRename } = option; |
| 23 | - const { flowmeterConfig, unit, fontColor, showTime } = componentInfo || {}; | 23 | + const { flowmeterConfig, unit, fontColor, showTime, maxNumber } = componentInfo || {}; |
| 24 | const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {}; | 24 | const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {}; |
| 25 | const { | 25 | const { |
| 26 | flowmeterConfig: presetFlowmeterConfig, | 26 | flowmeterConfig: presetFlowmeterConfig, |
| 27 | unit: persetUnit, | 27 | unit: persetUnit, |
| 28 | fontColor: presetFontColor, | 28 | fontColor: presetFontColor, |
| 29 | showTime: persetShowTime, | 29 | showTime: persetShowTime, |
| 30 | + maxNumber: persetMaxNumber, | ||
| 30 | } = persetOption || {}; | 31 | } = persetOption || {}; |
| 31 | const { | 32 | const { |
| 32 | backgroundColor: presetBackgroundColor, | 33 | backgroundColor: presetBackgroundColor, |
| @@ -43,6 +44,7 @@ | @@ -43,6 +44,7 @@ | ||
| 43 | fontColor: fontColor ?? presetFontColor, | 44 | fontColor: fontColor ?? presetFontColor, |
| 44 | attribute: attributeRename || attributeName || attribute, | 45 | attribute: attributeRename || attributeName || attribute, |
| 45 | showTime: showTime ?? persetShowTime, | 46 | showTime: showTime ?? persetShowTime, |
| 47 | + maxNumber: maxNumber ?? persetMaxNumber, | ||
| 46 | }; | 48 | }; |
| 47 | }); | 49 | }); |
| 48 | 50 | ||
| @@ -58,12 +60,20 @@ | @@ -58,12 +60,20 @@ | ||
| 58 | 60 | ||
| 59 | const getWaveHeight = computed(() => { | 61 | const getWaveHeight = computed(() => { |
| 60 | const value = unref(currentValue); | 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 | const getHeight = computed(() => { | 70 | const getHeight = computed(() => { |
| 65 | const value = unref(currentValue); | 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 | const updateFn: DataFetchUpdateFn = (message, attribute) => { | 79 | const updateFn: DataFetchUpdateFn = (message, attribute) => { |
| @@ -13,6 +13,7 @@ export const option: PublicPresetOptions = { | @@ -13,6 +13,7 @@ export const option: PublicPresetOptions = { | ||
| 13 | [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, | 13 | [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, |
| 14 | [ComponentConfigFieldEnum.SHOW_TIME]: false, | 14 | [ComponentConfigFieldEnum.SHOW_TIME]: false, |
| 15 | [ComponentConfigFieldEnum.UNIT]: 'm', | 15 | [ComponentConfigFieldEnum.UNIT]: 'm', |
| 16 | + [ComponentConfigFieldEnum.MAX_NUMBER]: 100, | ||
| 16 | [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: { | 17 | [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: { |
| 17 | [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb', | 18 | [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb', |
| 18 | [ComponentConfigFieldEnum.WAVE_FIRST]: '#4579e2', | 19 | [ComponentConfigFieldEnum.WAVE_FIRST]: '#4579e2', |
| @@ -4,7 +4,7 @@ | @@ -4,7 +4,7 @@ | ||
| 4 | import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type'; | 4 | import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type'; |
| 5 | import { option } from './config'; | 5 | import { option } from './config'; |
| 6 | import { ComponentInfo } from '/@/views/visual/palette/types'; | 6 | import { ComponentInfo } from '/@/views/visual/palette/types'; |
| 7 | - import { toRaw } from 'vue'; | 7 | + import { nextTick, toRaw } from 'vue'; |
| 8 | 8 | ||
| 9 | const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({ | 9 | const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({ |
| 10 | schemas: [ | 10 | schemas: [ |
| @@ -49,6 +49,33 @@ | @@ -49,6 +49,33 @@ | ||
| 49 | component: 'Input', | 49 | component: 'Input', |
| 50 | defaultValue: option.unit, | 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 | field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME, | 80 | field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME, |
| 54 | label: '显示设备名称', | 81 | label: '显示设备名称', |
| @@ -20,13 +20,14 @@ | @@ -20,13 +20,14 @@ | ||
| 20 | const getDesign = computed(() => { | 20 | const getDesign = computed(() => { |
| 21 | const { option, persetOption } = props.config; | 21 | const { option, persetOption } = props.config; |
| 22 | const { componentInfo, attribute, attributeName, attributeRename } = option; | 22 | const { componentInfo, attribute, attributeName, attributeRename } = option; |
| 23 | - const { flowmeterConfig, unit, fontColor, showTime } = componentInfo || {}; | 23 | + const { flowmeterConfig, unit, fontColor, showTime, maxNumber } = componentInfo || {}; |
| 24 | const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {}; | 24 | const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {}; |
| 25 | const { | 25 | const { |
| 26 | flowmeterConfig: presetFlowmeterConfig, | 26 | flowmeterConfig: presetFlowmeterConfig, |
| 27 | unit: persetUnit, | 27 | unit: persetUnit, |
| 28 | fontColor: presetFontColor, | 28 | fontColor: presetFontColor, |
| 29 | showTime: persetShowTime, | 29 | showTime: persetShowTime, |
| 30 | + maxNumber: persetMaxNumber, | ||
| 30 | } = persetOption || {}; | 31 | } = persetOption || {}; |
| 31 | const { | 32 | const { |
| 32 | backgroundColor: presetBackgroundColor, | 33 | backgroundColor: presetBackgroundColor, |
| @@ -43,17 +44,26 @@ | @@ -43,17 +44,26 @@ | ||
| 43 | fontColor: fontColor ?? presetFontColor, | 44 | fontColor: fontColor ?? presetFontColor, |
| 44 | attribute: attributeRename || attributeName || attribute, | 45 | attribute: attributeRename || attributeName || attribute, |
| 45 | showTime: showTime ?? persetShowTime, | 46 | showTime: showTime ?? persetShowTime, |
| 47 | + maxNumber: maxNumber ?? persetMaxNumber, | ||
| 46 | }; | 48 | }; |
| 47 | }); | 49 | }); |
| 48 | 50 | ||
| 49 | const getWaveHeight = computed(() => { | 51 | const getWaveHeight = computed(() => { |
| 50 | const value = unref(currentValue); | 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 | const getHeight = computed(() => { | 60 | const getHeight = computed(() => { |
| 55 | const value = unref(currentValue); | 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 | const updateFn: DataFetchUpdateFn = (message, attribute) => { | 69 | const updateFn: DataFetchUpdateFn = (message, attribute) => { |
| @@ -54,7 +54,7 @@ | @@ -54,7 +54,7 @@ | ||
| 54 | }, | 54 | }, |
| 55 | { | 55 | { |
| 56 | field: ComponentConfigFieldEnum.SHOW_TIME, | 56 | field: ComponentConfigFieldEnum.SHOW_TIME, |
| 57 | - label: '显示设备名称', | 57 | + label: '显示时间', |
| 58 | component: 'Checkbox', | 58 | component: 'Checkbox', |
| 59 | defaultValue: option.showTime, | 59 | defaultValue: option.showTime, |
| 60 | }, | 60 | }, |
| @@ -28,9 +28,9 @@ | @@ -28,9 +28,9 @@ | ||
| 28 | showTime: persetShowTime, | 28 | showTime: persetShowTime, |
| 29 | } = persetOption; | 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 | componentInfo || {}; | 34 | componentInfo || {}; |
| 35 | return { | 35 | return { |
| 36 | iconColor: iconColor || persetIconColor, | 36 | iconColor: iconColor || persetIconColor, |
| @@ -68,11 +68,10 @@ | @@ -68,11 +68,10 @@ | ||
| 68 | unit: unit ?? presetUnit, | 68 | unit: unit ?? presetUnit, |
| 69 | fontColor: fontColor ?? presetFontColor, | 69 | fontColor: fontColor ?? presetFontColor, |
| 70 | backgroundColor: backgroundColor ?? persetBackgroundColor, | 70 | backgroundColor: backgroundColor ?? persetBackgroundColor, |
| 71 | - deviceName, | ||
| 72 | - deviceRename, | 71 | + deviceName: deviceRename || deviceName, |
| 73 | attribute, | 72 | attribute, |
| 74 | - attributeRename, | ||
| 75 | - attributeName, | 73 | + attributeName: attributeRename || attributeName, |
| 74 | + | ||
| 76 | id: deviceId, | 75 | id: deviceId, |
| 77 | } as PercentType; | 76 | } as PercentType; |
| 78 | }), | 77 | }), |
| @@ -113,9 +112,9 @@ | @@ -113,9 +112,9 @@ | ||
| 113 | <div class="flex justify-between"> | 112 | <div class="flex justify-between"> |
| 114 | <div class="text-gray-500 text-sm truncate" :style="{ color: item.fontColor }"> | 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 | </div> | 119 | </div> |
| 121 | <span class="text-lg" :style="{ color: item.fontColor }" | 120 | <span class="text-lg" :style="{ color: item.fontColor }" |
| @@ -36,11 +36,9 @@ | @@ -36,11 +36,9 @@ | ||
| 36 | fontColor: fontColor ?? persetFontColor, | 36 | fontColor: fontColor ?? persetFontColor, |
| 37 | icon: icon ?? persetIcon, | 37 | icon: icon ?? persetIcon, |
| 38 | iconColor: iconColor ?? persetIconColor, | 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 | id: deviceId, | 42 | id: deviceId, |
| 45 | }; | 43 | }; |
| 46 | }), | 44 | }), |
| @@ -106,9 +104,7 @@ | @@ -106,9 +104,7 @@ | ||
| 106 | /> | 104 | /> |
| 107 | 105 | ||
| 108 | <div class="text-gray-500 text-lg truncate ml-6">{{ | 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 | }}</div> | 108 | }}</div> |
| 113 | </div> | 109 | </div> |
| 114 | 110 |
| @@ -5,6 +5,7 @@ export enum ComponentConfigFieldEnum { | @@ -5,6 +5,7 @@ export enum ComponentConfigFieldEnum { | ||
| 5 | INSTRUMENT_PANEL_COLOR = 'instrumentPanelColor', | 5 | INSTRUMENT_PANEL_COLOR = 'instrumentPanelColor', |
| 6 | CONTROL_BAR_COLOR = 'controlBarColor', | 6 | CONTROL_BAR_COLOR = 'controlBarColor', |
| 7 | // INSTRUMENT_PANEL_WIDTH = 'instrumentPanelWidth', | 7 | // INSTRUMENT_PANEL_WIDTH = 'instrumentPanelWidth', |
| 8 | + LINE_COLOR = 'lineColor', | ||
| 8 | 9 | ||
| 9 | PROGRESS_BAR_CIRCLE = 'progressBarCircle', | 10 | PROGRESS_BAR_CIRCLE = 'progressBarCircle', |
| 10 | 11 | ||
| @@ -29,4 +30,6 @@ export enum ComponentConfigFieldEnum { | @@ -29,4 +30,6 @@ export enum ComponentConfigFieldEnum { | ||
| 29 | BACKGROUND_COLOR = 'backgroundColor', | 30 | BACKGROUND_COLOR = 'backgroundColor', |
| 30 | OPEN_COLOR = 'openColor', | 31 | OPEN_COLOR = 'openColor', |
| 31 | CLOSE_COLOR = 'closeColor', | 32 | CLOSE_COLOR = 'closeColor', |
| 33 | + MIN_NUMBER = 'minNumber', | ||
| 34 | + MAX_NUMBER = 'maxNumber', | ||
| 32 | } | 35 | } |