简柏林 / thingskit-front · Commits

Commit 5698810fff81ede90b6d420f16c156468370f5e3

Authored by xp.Huang
2 parents 5a7dd462 48104d8d

Merge remote-tracking branch 'origin/main_dev' into main_dev

Inline Side-by-side
Showing 75 changed files with 615 additions and 348 deletions
@@ -51,6 +51,7 @@ export interface ModelOfMatterParams { @@ -51,6 +51,7 @@ export interface ModelOfMatterParams {
51 callType?: string; 51 callType?: string;
52 eventType?: string; 52 eventType?: string;
53 accessMode?: string; 53 accessMode?: string;
  54 + extensionDesc?: Recordable;
54 } 55 }
55 56
56 export interface GetModelTslParams { 57 export interface GetModelTslParams {
@@ -39,6 +39,8 @@ import CustomMinMaxInput from './externalCompns/components/CustomMinMaxInput.vue @@ -39,6 +39,8 @@ import CustomMinMaxInput from './externalCompns/components/CustomMinMaxInput.vue
39 import StructForm from './externalCompns/components/StructForm/StructForm.vue'; 39 import StructForm from './externalCompns/components/StructForm/StructForm.vue';
40 import ApiSelectScrollLoad from './components/ApiSelectScrollLoad.vue'; 40 import ApiSelectScrollLoad from './components/ApiSelectScrollLoad.vue';
41 import InputGroup from './components/InputGroup.vue'; 41 import InputGroup from './components/InputGroup.vue';
  42 +import RegisterAddressInput from '/@/views/task/center/components/PollCommandInput/RegisterAddressInput.vue';
  43 +import ExtendDesc from '/@/components/Form/src/externalCompns/components/ExtendDesc/index.vue';
42 44
43 const componentMap = new Map<ComponentType, Component>(); 45 const componentMap = new Map<ComponentType, Component>();
44 46
@@ -85,6 +87,8 @@ componentMap.set('CustomMinMaxInput', CustomMinMaxInput); @@ -85,6 +87,8 @@ componentMap.set('CustomMinMaxInput', CustomMinMaxInput);
85 componentMap.set('StructForm', StructForm); 87 componentMap.set('StructForm', StructForm);
86 componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad); 88 componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad);
87 componentMap.set('InputGroup', InputGroup); 89 componentMap.set('InputGroup', InputGroup);
  90 +componentMap.set('RegisterAddressInput', RegisterAddressInput);
  91 +componentMap.set('ExtendDesc', ExtendDesc);
88 92
89 export function add(compName: ComponentType, component: Component) { 93 export function add(compName: ComponentType, component: Component) {
90 componentMap.set(compName, component); 94 componentMap.set(compName, component);
  1 +<script lang="ts" setup>
  2 + import { Button } from 'ant-design-vue';
  3 + import { nextTick, ref, watch } from 'vue';
  4 + import { BasicForm, useForm } from '/@/components/Form';
  5 + import { BasicModal } from '/@/components/Modal';
  6 +
  7 + const show = ref(false);
  8 +
  9 + const props = withDefaults(
  10 + defineProps<{
  11 + value?: object;
  12 + disabled?: boolean;
  13 + }>(),
  14 + {
  15 + value: () => ({}),
  16 + }
  17 + );
  18 +
  19 + const emit = defineEmits(['update:value']);
  20 +
  21 + const [registerForm, { setFieldsValue, getFieldsValue, setProps }] = useForm({
  22 + schemas: [
  23 + {
  24 + field: 'registerAddress',
  25 + component: 'Input',
  26 + label: '寄存器地址',
  27 + componentProps: {
  28 + placeholder: '请输入寄存器地址',
  29 + },
  30 + },
  31 + ],
  32 + showActionButtonGroup: false,
  33 + });
  34 +
  35 + const handleClick = async () => {
  36 + show.value = true;
  37 + await nextTick();
  38 + setProps({ disabled: props.disabled });
  39 + setFieldsValue(props.value);
  40 + };
  41 +
  42 + const handleSubmit = () => {
  43 + const value = getFieldsValue();
  44 + emit('update:value', value);
  45 + show.value = false;
  46 + };
  47 +
  48 + watch(
  49 + () => props.value,
  50 + (value) => {
  51 + setFieldsValue(value);
  52 + }
  53 + );
  54 +</script>
  55 +
  56 +<template>
  57 + <section>
  58 + <Button type="link" @click="handleClick">新增扩展描述</Button>
  59 + <BasicModal title="扩展描述" v-model:visible="show" @ok="handleSubmit">
  60 + <BasicForm @register="registerForm" />
  61 + </BasicModal>
  62 + </section>
  63 +</template>
@@ -28,7 +28,7 @@ export const validateJSON = (_rule, value = [] as ModelOfMatterParams[], _callba @@ -28,7 +28,7 @@ export const validateJSON = (_rule, value = [] as ModelOfMatterParams[], _callba
28 return Promise.reject('JSON对象不能为空'); 28 return Promise.reject('JSON对象不能为空');
29 }; 29 };
30 30
31 -export const formSchemas = (hasStructForm: boolean): FormSchema[] => { 31 +export const formSchemas = (hasStructForm: boolean, isTcp = false): FormSchema[] => {
32 return [ 32 return [
33 { 33 {
34 field: FormField.FUNCTION_NAME, 34 field: FormField.FUNCTION_NAME,
@@ -276,6 +276,27 @@ export const formSchemas = (hasStructForm: boolean): FormSchema[] => { @@ -276,6 +276,27 @@ export const formSchemas = (hasStructForm: boolean): FormSchema[] => {
276 ifShow: ({ values }) => values[FormField.TYPE] === DataTypeEnum.IS_STRING, 276 ifShow: ({ values }) => values[FormField.TYPE] === DataTypeEnum.IS_STRING,
277 }, 277 },
278 { 278 {
  279 + field: FormField.EXTENSION_DESC,
  280 + component: 'ExtendDesc',
  281 + label: '扩展描述',
  282 + valueField: 'value',
  283 + changeEvent: 'update:value',
  284 + rules: [
  285 + {
  286 + message: '请输入扩展描述',
  287 + required: true,
  288 + validator(_rule, value, _callback) {
  289 + if (!value?.['registerAddress']) return Promise.reject('请输入寄存器地址');
  290 + return Promise.resolve();
  291 + },
  292 + },
  293 + ],
  294 + ifShow: isTcp,
  295 + colProps: {
  296 + span: 16,
  297 + },
  298 + },
  299 + {
279 field: FormField.ACCESS_MODE, 300 field: FormField.ACCESS_MODE,
280 component: 'ApiRadioGroup', 301 component: 'ApiRadioGroup',
281 label: '读写类型', 302 label: '读写类型',
@@ -129,4 +129,5 @@ export type ComponentType = @@ -129,4 +129,5 @@ export type ComponentType =
129 | 'RegisterAddressInput' 129 | 'RegisterAddressInput'
130 | 'ControlGroup' 130 | 'ControlGroup'
131 | 'JSONEditor' 131 | 'JSONEditor'
132 - | 'OrgTreeSelect'; 132 + | 'OrgTreeSelect'
  133 + | 'ExtendDesc';
@@ -67,7 +67,7 @@ export function useAlarmNotify(params: UseAlarmNotifyParams = {}) { @@ -67,7 +67,7 @@ export function useAlarmNotify(params: UseAlarmNotifyParams = {}) {
67 67
68 if (items.length) { 68 if (items.length) {
69 const first = items.at(0)!; 69 const first = items.at(0)!;
70 - const { deviceName, id, severity } = first; 70 + const { deviceName, id, severity, type } = first;
71 71
72 let key: Nullable<string> = `open-notify-${id}`; 72 let key: Nullable<string> = `open-notify-${id}`;
73 73
@@ -82,6 +82,10 @@ export function useAlarmNotify(params: UseAlarmNotifyParams = {}) { @@ -82,6 +82,10 @@ export function useAlarmNotify(params: UseAlarmNotifyParams = {}) {
82 h('span', { style: { marginRight: '5px' } }, '设备:'), 82 h('span', { style: { marginRight: '5px' } }, '设备:'),
83 h('span', {}, `[${deviceName}]`), 83 h('span', {}, `[${deviceName}]`),
84 ]), 84 ]),
  85 + h('div', { style: { marginRight: '5px' } }, [
  86 + h('span', { style: { marginRight: '5px' } }, '告警场景:'),
  87 + h('span', {}, `[${type}]`),
  88 + ]),
85 h('div', { style: { marginTop: '5px' } }, [ 89 h('div', { style: { marginTop: '5px' } }, [
86 h('span', { style: { marginRight: '5px' } }, '告警状态:'), 90 h('span', { style: { marginRight: '5px' } }, '告警状态:'),
87 h(Tag, { color }, () => `${alarmNotifyStatusMean}`), 91 h(Tag, { color }, () => `${alarmNotifyStatusMean}`),
@@ -109,6 +109,15 @@ @@ -109,6 +109,15 @@
109 unref(DeviceStep1Ref)?.resetFields(); 109 unref(DeviceStep1Ref)?.resetFields();
110 unref(DeviceStep2Ref)?.resetFieldsValueAndStatus(); 110 unref(DeviceStep2Ref)?.resetFieldsValueAndStatus();
111 } 111 }
  112 + //验证设备名称不能超过255长度
  113 + const MAX_NAME_LENGTH = 255;
  114 + const validateNameLength = (name: string) => {
  115 + if (String(name).length > MAX_NAME_LENGTH) {
  116 + const errorText = `设备名称长度不能超过${MAX_NAME_LENGTH}`;
  117 + createMessage.error(errorText);
  118 + throw Error(errorText);
  119 + }
  120 + };
112 // 提交 121 // 提交
113 const msg = computed(() => (unref(isUpdate) ? '更新设备成功' : '新增设备成功')); 122 const msg = computed(() => (unref(isUpdate) ? '更新设备成功' : '新增设备成功'));
114 async function handleOk() { 123 async function handleOk() {
@@ -150,6 +159,7 @@ @@ -150,6 +159,7 @@
150 ...DeviceStep1Ref.value?.positionState, 159 ...DeviceStep1Ref.value?.positionState,
151 }, 160 },
152 }; 161 };
  162 + validateNameLength(stepRecord.name);
153 await createOrEditDevice(editData); 163 await createOrEditDevice(editData);
154 } else { 164 } else {
155 const stepRecord = unref(stepState); 165 const stepRecord = unref(stepState);
@@ -178,6 +188,7 @@ @@ -178,6 +188,7 @@
178 : null, 188 : null,
179 }, 189 },
180 }; 190 };
  191 + validateNameLength(stepRecord.name);
181 await createOrEditDevice(createData); 192 await createOrEditDevice(createData);
182 } 193 }
183 createMessage.success(unref(msg)); 194 createMessage.success(unref(msg));
@@ -30,6 +30,7 @@ @@ -30,6 +30,7 @@
30 <Attribute 30 <Attribute
31 v-if="activeKey === FunctionType.PROPERTIES" 31 v-if="activeKey === FunctionType.PROPERTIES"
32 :openModalMode="openModalMode" 32 :openModalMode="openModalMode"
  33 + :transportType="record.transportType"
33 ref="AttrRef" 34 ref="AttrRef"
34 /> 35 />
35 <Service 36 <Service
@@ -13,12 +13,13 @@ @@ -13,12 +13,13 @@
13 import { isArray } from 'lodash'; 13 import { isArray } from 'lodash';
14 import { OpenModelMode } from '../types'; 14 import { OpenModelMode } from '../types';
15 import { formSchemas } from '/@/components/Form/src/externalCompns/components/StructForm/config'; 15 import { formSchemas } from '/@/components/Form/src/externalCompns/components/StructForm/config';
  16 + import { TransportTypeEnum } from '../../../../components/TransportDescript/const';
16 17
17 - defineProps<{ openModalMode: OpenModelMode }>(); 18 + const props = defineProps<{ openModalMode: OpenModelMode; transportType: string }>();
18 19
19 const [register, { validate, resetFields, setFieldsValue, setProps }] = useForm({ 20 const [register, { validate, resetFields, setFieldsValue, setProps }] = useForm({
20 labelWidth: 100, 21 labelWidth: 100,
21 - schemas: formSchemas(false), 22 + schemas: formSchemas(false, props.transportType === TransportTypeEnum.TCP),
22 actionColOptions: { 23 actionColOptions: {
23 span: 14, 24 span: 14,
24 }, 25 },
@@ -37,13 +38,13 @@ @@ -37,13 +38,13 @@
37 const { functionName, remark, identifier, accessMode } = _values; 38 const { functionName, remark, identifier, accessMode } = _values;
38 const structJSON = transfromToStructJSON(_values); 39 const structJSON = transfromToStructJSON(_values);
39 const dataType = excludeIdInStructJSON(structJSON.dataType!); 40 const dataType = excludeIdInStructJSON(structJSON.dataType!);
40 -  
41 const value = { 41 const value = {
42 functionName, 42 functionName,
43 functionType: FunctionType.PROPERTIES, 43 functionType: FunctionType.PROPERTIES,
44 remark, 44 remark,
45 identifier, 45 identifier,
46 accessMode, 46 accessMode,
  47 + extensionDesc: _values.extensionDesc,
47 functionJson: { 48 functionJson: {
48 dataType: dataType, 49 dataType: dataType,
49 }, 50 },
@@ -67,7 +68,6 @@ @@ -67,7 +68,6 @@
67 ...dataType, 68 ...dataType,
68 ...(isArray(specs) ? specs : { ...specs }), 69 ...(isArray(specs) ? specs : { ...specs }),
69 }; 70 };
70 -  
71 setFieldsValue(value); 71 setFieldsValue(value);
72 }; 72 };
73 73
@@ -24,7 +24,8 @@ export enum FormField { @@ -24,7 +24,8 @@ export enum FormField {
24 EVENT_TYPE = 'eventType', 24 EVENT_TYPE = 'eventType',
25 SERVICE_COMMAND = 'serviceCommand', 25 SERVICE_COMMAND = 'serviceCommand',
26 ACCESS_MODE = 'accessMode', 26 ACCESS_MODE = 'accessMode',
27 - 27 + REGISTER_ADDRESS = 'registerAddress',
  28 + EXTENSION_DESC = 'extensionDesc',
28 STRUCT = 'struct', 29 STRUCT = 'struct',
29 } 30 }
30 31
@@ -107,7 +107,6 @@ @@ -107,7 +107,6 @@
107 v-else 107 v-else
108 v-model:value="scriptForm.output" 108 v-model:value="scriptForm.output"
109 placeholder="输出参数为服务端返回的内容" 109 placeholder="输出参数为服务端返回的内容"
110 - :maxlength="255"  
111 /> 110 />
112 </a-form-item> 111 </a-form-item>
113 </a-form> 112 </a-form>
@@ -48,6 +48,11 @@ export const aceEditorOptions = { @@ -48,6 +48,11 @@ export const aceEditorOptions = {
48 enableEmmet: true, 48 enableEmmet: true,
49 }; 49 };
50 50
  51 +const scriptTypeInfo = {
  52 + TRANSPORT_TCP_UP: '上行数据解析',
  53 + TRANSPORT_TCP_AUTH: '设备鉴权',
  54 +};
  55 +
51 // 表格配置 56 // 表格配置
52 export const columns: BasicColumn[] = [ 57 export const columns: BasicColumn[] = [
53 { 58 {
@@ -68,6 +73,14 @@ export const columns: BasicColumn[] = [ @@ -68,6 +73,14 @@ export const columns: BasicColumn[] = [
68 slots: { customRender: 'convertJs' }, 73 slots: { customRender: 'convertJs' },
69 }, 74 },
70 { 75 {
  76 + title: '脚本类型',
  77 + dataIndex: 'scriptType',
  78 + width: 120,
  79 + format: (values) => {
  80 + return scriptTypeInfo[values];
  81 + },
  82 + },
  83 + {
71 title: '备注', 84 title: '备注',
72 dataIndex: 'description', 85 dataIndex: 'description',
73 width: 120, 86 width: 120,
@@ -138,7 +138,7 @@ export const formSchema: FormSchema[] = [ @@ -138,7 +138,7 @@ export const formSchema: FormSchema[] = [
138 component: 'Input', 138 component: 'Input',
139 required: true, 139 required: true,
140 componentProps: { 140 componentProps: {
141 - maxLength: 255, 141 + maxLength: 100,
142 }, 142 },
143 }, 143 },
144 144
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 import { ComponentType, ColEx } from '/@/components/Form/src/types/index'; 3 import { ComponentType, ColEx } from '/@/components/Form/src/types/index';
4 import { computed } from '@vue/reactivity'; 4 import { computed } from '@vue/reactivity';
5 import { isFunction } from '/@/utils/is'; 5 import { isFunction } from '/@/utils/is';
6 - import { unref } from 'vue'; 6 + import { toRaw, unref } from 'vue';
7 import { watch } from 'vue'; 7 import { watch } from 'vue';
8 import { nextTick } from 'vue'; 8 import { nextTick } from 'vue';
9 import { ref } from 'vue'; 9 import { ref } from 'vue';
@@ -48,17 +48,13 @@ @@ -48,17 +48,13 @@
48 } 48 }
49 ); 49 );
50 50
51 - const getProps = computed(() => {  
52 - return props;  
53 - });  
54 -  
55 const batchSetValue = (value: any): ValueItemType[] => { 51 const batchSetValue = (value: any): ValueItemType[] => {
56 - const { length } = unref(getProps); 52 + const { length } = props;
57 return Array.from({ length }, () => ({ value })); 53 return Array.from({ length }, () => ({ value }));
58 }; 54 };
59 55
60 const getTotalControlItem = computed(() => { 56 const getTotalControlItem = computed(() => {
61 - const { totalControlProps, component, showTotalControl } = unref(getProps); 57 + const { totalControlProps, component, showTotalControl } = props;
62 return { 58 return {
63 ...totalControlProps, 59 ...totalControlProps,
64 field: FormFieldsEnum.TOTAL_CONTROL, 60 field: FormFieldsEnum.TOTAL_CONTROL,
@@ -72,12 +68,12 @@ @@ -72,12 +68,12 @@
72 } as FormSchema; 68 } as FormSchema;
73 }); 69 });
74 70
75 - const getSchemas = computed(() => {  
76 - const { itemProps, itemLabel, length, component } = unref(getProps); 71 + const getSchemas = () => {
  72 + const { itemProps, itemLabel, length, component } = props;
77 let label = isFunction(itemLabel) ? itemLabel : (index: number) => `#${index}`; 73 let label = isFunction(itemLabel) ? itemLabel : (index: number) => `#${index}`;
78 let _itemProps = isFunction(itemProps) ? itemProps : () => ({}); 74 let _itemProps = isFunction(itemProps) ? itemProps : () => ({});
79 const schemas = Array.from( 75 const schemas = Array.from(
80 - { length }, 76 + { length: props.length },
81 (_item, index) => 77 (_item, index) =>
82 ({ 78 ({
83 ..._itemProps(index), 79 ..._itemProps(index),
@@ -93,14 +89,14 @@ @@ -93,14 +89,14 @@
93 } as FormSchema) 89 } as FormSchema)
94 ); 90 );
95 91
96 - length && schemas.unshift(unref(getTotalControlItem)); 92 + length && schemas.unshift(toRaw(getTotalControlItem.value));
97 93
98 return schemas; 94 return schemas;
99 - }); 95 + };
100 96
101 const [registerForm, { getFieldsValue, setProps, setFieldsValue }] = useForm({ 97 const [registerForm, { getFieldsValue, setProps, setFieldsValue }] = useForm({
102 showActionButtonGroup: false, 98 showActionButtonGroup: false,
103 - schemas: unref(getSchemas), 99 + schemas: toRaw(unref(getSchemas())),
104 // baseColProps, 100 // baseColProps,
105 baseColProps: props.itemColProps, 101 baseColProps: props.itemColProps,
106 }); 102 });
@@ -111,19 +107,16 @@ @@ -111,19 +107,16 @@
111 return; 107 return;
112 } 108 }
113 const allValue = getFieldsValue(); 109 const allValue = getFieldsValue();
114 - const sortKeyList = Array.from({ length: unref(getProps).length }, (_v, key) => key); 110 + const sortKeyList = Array.from({ length: props.length }, (_v, key) => key);
115 const res = sortKeyList.map((item) => ({ value: allValue[item] } as ValueItemType)); 111 const res = sortKeyList.map((item) => ({ value: allValue[item] } as ValueItemType));
116 112
117 emit(EmitEventEnum.UPDATE_VALUE, res); 113 emit(EmitEventEnum.UPDATE_VALUE, res);
118 }; 114 };
119 115
120 const transformValue = (value: ValueItemType[]) => { 116 const transformValue = (value: ValueItemType[]) => {
121 - const { length } = unref(getProps); 117 + const { length } = props;
122 if (value.length !== length) { 118 if (value.length !== length) {
123 - value = Array.from(  
124 - { length: unref(getProps).length },  
125 - () => ({ value: null } as ValueItemType)  
126 - ); 119 + value = Array.from({ length: props.length }, () => ({ value: null } as ValueItemType));
127 } 120 }
128 return value.reduce((prev, next, index) => ({ ...prev, [index]: next.value }), {}); 121 return value.reduce((prev, next, index) => ({ ...prev, [index]: next.value }), {});
129 }; 122 };
@@ -153,13 +146,11 @@ @@ -153,13 +146,11 @@
153 146
154 watch( 147 watch(
155 () => [props.length, props.component], 148 () => [props.length, props.component],
156 - (target) => {  
157 - if (target !== undefined || target !== null) {  
158 - setProps({  
159 - schemas: unref(getSchemas),  
160 - });  
161 - handleUpdateValue();  
162 - } 149 + () => {
  150 + setProps({
  151 + schemas: toRaw(unref(getSchemas())),
  152 + });
  153 + handleUpdateValue();
163 } 154 }
164 ); 155 );
165 156
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { InputGroup, InputNumber, Select, Input } from 'ant-design-vue'; 2 import { InputGroup, InputNumber, Select, Input } from 'ant-design-vue';
3 - import { unref } from 'vue'; 3 + import { unref, watch } from 'vue';
4 import { computed } from 'vue'; 4 import { computed } from 'vue';
5 import { ref } from 'vue'; 5 import { ref } from 'vue';
6 6
@@ -13,10 +13,11 @@ @@ -13,10 +13,11 @@
13 13
14 const DEC_MAX_VALUE = parseInt('0xffff', 16); 14 const DEC_MAX_VALUE = parseInt('0xffff', 16);
15 15
16 - withDefaults( 16 + const props = withDefaults(
17 defineProps<{ 17 defineProps<{
18 value?: number | string; 18 value?: number | string;
19 inputProps?: Recordable; 19 inputProps?: Recordable;
  20 + disabled?: boolean;
20 }>(), 21 }>(),
21 { 22 {
22 value: 0, 23 value: 0,
@@ -31,7 +32,7 @@ @@ -31,7 +32,7 @@
31 32
32 const type = ref(AddressTypeEnum.DEC); 33 const type = ref(AddressTypeEnum.DEC);
33 34
34 - const inputValue = ref<number | string>(0); 35 + const inputValue = ref<number | string>(props.value);
35 36
36 const getHexValue = computed(() => { 37 const getHexValue = computed(() => {
37 return parseInt(unref(inputValue) || 0, 16); 38 return parseInt(unref(inputValue) || 0, 16);
@@ -61,6 +62,14 @@ @@ -61,6 +62,14 @@
61 inputValue.value = syncValue; 62 inputValue.value = syncValue;
62 emit('update:value', toDEC(syncValue)); 63 emit('update:value', toDEC(syncValue));
63 }; 64 };
  65 +
  66 + const stop = watch(
  67 + () => props.value,
  68 + (value) => {
  69 + inputValue.value = value;
  70 + stop();
  71 + }
  72 + );
64 </script> 73 </script>
65 74
66 <template> 75 <template>
@@ -69,6 +78,7 @@ @@ -69,6 +78,7 @@
69 v-model:value="type" 78 v-model:value="type"
70 :options="addressTypeOptions" 79 :options="addressTypeOptions"
71 @change="handleChange" 80 @change="handleChange"
  81 + :disabled="disabled"
72 class="bg-gray-200 max-w-20" 82 class="bg-gray-200 max-w-20"
73 /> 83 />
74 <InputNumber 84 <InputNumber
@@ -76,6 +86,7 @@ @@ -76,6 +86,7 @@
76 v-model:value="inputValue" 86 v-model:value="inputValue"
77 :step="1" 87 :step="1"
78 class="flex-1" 88 class="flex-1"
  89 + :disabled="disabled"
79 v-bind="inputProps" 90 v-bind="inputProps"
80 @change="handleEmit" 91 @change="handleEmit"
81 /> 92 />
@@ -178,7 +178,7 @@ export const formSchemas: FormSchema[] = [ @@ -178,7 +178,7 @@ export const formSchemas: FormSchema[] = [
178 changeEvent: 'update:value', 178 changeEvent: 'update:value',
179 ifShow: ({ model }) => showCoilValue(model[FormFieldsEnum.METHOD]), 179 ifShow: ({ model }) => showCoilValue(model[FormFieldsEnum.METHOD]),
180 defaultValue: '0', 180 defaultValue: '0',
181 - rules: [{ required: true, message: '请输入线圈值' }], 181 + rules: [{ required: true, message: '请输入线圈值', type: 'number' }],
182 componentProps: { 182 componentProps: {
183 placeholder: '请输入线圈值', 183 placeholder: '请输入线圈值',
184 }, 184 },
@@ -191,7 +191,7 @@ export const formSchemas: FormSchema[] = [ @@ -191,7 +191,7 @@ export const formSchemas: FormSchema[] = [
191 changeEvent: 'update:value', 191 changeEvent: 'update:value',
192 ifShow: ({ model }) => showRegisterValue(model[FormFieldsEnum.METHOD]), 192 ifShow: ({ model }) => showRegisterValue(model[FormFieldsEnum.METHOD]),
193 defaultValue: '0', 193 defaultValue: '0',
194 - rules: [{ required: true, message: '请输入寄存器值' }], 194 + rules: [{ required: true, message: '请输入寄存器值', type: 'number' }],
195 componentProps: { 195 componentProps: {
196 placeholder: '请输入寄存器值', 196 placeholder: '请输入寄存器值',
197 }, 197 },
@@ -41,7 +41,7 @@ export const composeModbusModalData = (record: ModbusCommandValueType): GenModbu @@ -41,7 +41,7 @@ export const composeModbusModalData = (record: ModbusCommandValueType): GenModbu
41 return { 41 return {
42 crc, 42 crc,
43 deviceCode, 43 deviceCode,
44 - method, 44 + method: Number(method).toString(16).padStart(2, '0'),
45 registerAddr, 45 registerAddr,
46 ...registerInfo(record), 46 ...registerInfo(record),
47 }; 47 };
@@ -15,6 +15,7 @@ export const option: PublicPresetOptions = { @@ -15,6 +15,7 @@ export const option: PublicPresetOptions = {
15 [ComponentConfigFieldEnum.OPEN_COLOR]: '#00F43D', 15 [ComponentConfigFieldEnum.OPEN_COLOR]: '#00F43D',
16 [ComponentConfigFieldEnum.CLOSE_COLOR]: '#FF0000', 16 [ComponentConfigFieldEnum.CLOSE_COLOR]: '#FF0000',
17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true, 17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
  18 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
18 }; 19 };
19 20
20 export default class Config extends PublicConfigClass implements CreateComponentType { 21 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -30,6 +30,12 @@ @@ -30,6 +30,12 @@
30 component: 'Checkbox', 30 component: 'Checkbox',
31 defaultValue: option.showDeviceName, 31 defaultValue: option.showDeviceName,
32 }, 32 },
  33 + {
  34 + field: ComponentConfigFieldEnum.SHOW_TIME,
  35 + label: '显示时间',
  36 + component: 'Checkbox',
  37 + defaultValue: option.showTime,
  38 + },
33 ], 39 ],
34 showActionButtonGroup: false, 40 showActionButtonGroup: false,
35 labelWidth: 120, 41 labelWidth: 120,
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 import { ReceiveAlarmDataCmdsMessageType } from '../../../hook/socket/useSocket.type'; 10 import { ReceiveAlarmDataCmdsMessageType } from '../../../hook/socket/useSocket.type';
11 import { useDataBoardContext } from '/@/views/visual/palette/hooks/useDataBoardContext'; 11 import { useDataBoardContext } from '/@/views/visual/palette/hooks/useDataBoardContext';
12 import { useAlarmContext } from '/@/views/visual/palette/hooks/useAlarmTime'; 12 import { useAlarmContext } from '/@/views/visual/palette/hooks/useAlarmTime';
  13 + import { getMessage } from '../config';
13 14
14 interface IStatus { 15 interface IStatus {
15 text: string; 16 text: string;
@@ -20,6 +21,7 @@ @@ -20,6 +21,7 @@
20 id: string; 21 id: string;
21 deviceName: string; 22 deviceName: string;
22 showDeviceName: boolean; 23 showDeviceName: boolean;
  24 + showTime: boolean;
23 status: IStatus; 25 status: IStatus;
24 time: number; 26 time: number;
25 } 27 }
@@ -51,7 +53,7 @@ @@ -51,7 +53,7 @@
51 const getDesign = computed(() => { 53 const getDesign = computed(() => {
52 const { persetOption = {}, option } = props.config; 54 const { persetOption = {}, option } = props.config;
53 const { dataSource } = option; 55 const { dataSource } = option;
54 - const { showDeviceName: presetShowDeviceName } = persetOption; 56 + const { showDeviceName: presetShowDeviceName, showTime: persetShowTime } = persetOption;
55 57
56 return { 58 return {
57 dataSource: dataSource?.map((item) => { 59 dataSource: dataSource?.map((item) => {
@@ -60,6 +62,7 @@ @@ -60,6 +62,7 @@
60 id: deviceId, 62 id: deviceId,
61 deviceName: deviceRename || deviceName, 63 deviceName: deviceRename || deviceName,
62 showDeviceName: componentInfo.showDeviceName ?? presetShowDeviceName, 64 showDeviceName: componentInfo.showDeviceName ?? presetShowDeviceName,
  65 + showTime: componentInfo.showTime ?? persetShowTime,
63 }; 66 };
64 }), 67 }),
65 }; 68 };
@@ -71,67 +74,6 @@ @@ -71,67 +74,6 @@
71 }, 4000); 74 }, 4000);
72 }; 75 };
73 76
74 - // 发送websocket的格式  
75 - const getMessage = (cmdId: number) => {  
76 - const message = {  
77 - alarmDataCmds: [  
78 - {  
79 - query: {  
80 - entityFilter: {  
81 - type: 'entityList',  
82 - resolveMultiple: true,  
83 - entityType: 'DEVICE',  
84 - entityList: unref(getDesign).dataSource?.map((item) => item.id),  
85 - },  
86 - pageLink: {  
87 - page: 0,  
88 - pageSize: unref(alarmForm)?.pageSize,  
89 - textSearch: null,  
90 - searchPropagatedAlarms: false,  
91 - statusList: [],  
92 - severityList: [],  
93 - typeList: [],  
94 - sortOrder: {  
95 - key: {  
96 - key: 'createdTime',  
97 - type: 'ALARM_FIELD',  
98 - },  
99 - direction: 'DESC',  
100 - },  
101 - timeWindow: unref(alarmForm)?.time,  
102 - },  
103 - alarmFields: [  
104 - {  
105 - type: 'ALARM_FIELD',  
106 - key: 'createdTime',  
107 - },  
108 - {  
109 - type: 'ALARM_FIELD',  
110 - key: 'originator',  
111 - },  
112 - {  
113 - type: 'ALARM_FIELD',  
114 - key: 'type',  
115 - },  
116 - {  
117 - type: 'ALARM_FIELD',  
118 - key: 'severity',  
119 - },  
120 - {  
121 - type: 'ALARM_FIELD',  
122 - key: 'status',  
123 - },  
124 - ],  
125 - entityFields: [],  
126 - latestValues: [],  
127 - },  
128 - cmdId,  
129 - },  
130 - ],  
131 - };  
132 - return message;  
133 - };  
134 -  
135 const alarmStatusList = ref<IAlarmStatusList[]>([ 77 const alarmStatusList = ref<IAlarmStatusList[]>([
136 { 78 {
137 id: '1', 79 id: '1',
@@ -139,6 +81,7 @@ @@ -139,6 +81,7 @@
139 status: { text: '紧急', color: 'alarm_state_major' }, 81 status: { text: '紧急', color: 'alarm_state_major' },
140 time: 1689574726, 82 time: 1689574726,
141 showDeviceName: true, 83 showDeviceName: true,
  84 + showTime: true,
142 }, 85 },
143 ]); 86 ]);
144 87
@@ -147,14 +90,15 @@ @@ -147,14 +90,15 @@
147 watch( 90 watch(
148 () => alarmForm?.value, 91 () => alarmForm?.value,
149 () => { 92 () => {
150 - send?.(JSON.stringify(getMessage(unref(currentCmdId)))); 93 + send?.(JSON.stringify(getMessage(unref(currentCmdId), unref(getDesign), unref(alarmForm))));
151 }, 94 },
152 { immediate: false } 95 { immediate: false }
153 ); 96 );
154 97
155 const transformMessage = (cmdId: number) => { 98 const transformMessage = (cmdId: number) => {
  99 + if (props.config.option.mode == 'SELECT_PREVIEW') return;
156 currentCmdId.value = cmdId; 100 currentCmdId.value = cmdId;
157 - send?.(JSON.stringify(getMessage(cmdId))); 101 + send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm))));
158 }; 102 };
159 103
160 const getReduce = (data) => { 104 const getReduce = (data) => {
@@ -185,6 +129,7 @@ @@ -185,6 +129,7 @@
185 id: item.id, 129 id: item.id,
186 deviceName: item.deviceName, 130 deviceName: item.deviceName,
187 showDeviceName: item.showDeviceName, 131 showDeviceName: item.showDeviceName,
  132 + showTime: item.showTime,
188 status: { text: '', color: '' }, 133 status: { text: '', color: '' },
189 time: 0, 134 time: 0,
190 }; 135 };
@@ -215,23 +160,20 @@ @@ -215,23 +160,20 @@
215 160
216 <template> 161 <template>
217 <main :style="getScale" class="w-full h-full flex justify-center items-center"> 162 <main :style="getScale" class="w-full h-full flex justify-center items-center">
218 - <!-- <DeviceName :config="config" class="text-center" /> -->  
219 - <div  
220 - v-for="item in alarmStatusList"  
221 - :key="item.id"  
222 - class="flex flex-col justify-center items-center"  
223 - >  
224 - <div class="text-gray-500 text-sm truncate"  
225 - >{{  
226 - item.status.text  
227 - ? item.showDeviceName  
228 - ? item.deviceName + '-'  
229 - : ''  
230 - : '当前设备未发现告警'  
231 - }}{{ item.status.text }}</div  
232 - >  
233 - <div :class="item.status.color"></div>  
234 - <UpdateTime :time="item.time" /> 163 + <div v-for="item in alarmStatusList" :key="item.id" class="flex flex-col items-center">
  164 + <div class="flex justify-center items-center flex-col">
  165 + <div class="text-gray-500 text-sm truncate"
  166 + >{{
  167 + item.status.text
  168 + ? item.showDeviceName
  169 + ? item.deviceName + '-'
  170 + : ''
  171 + : '当前设备未发现告警'
  172 + }}{{ item.status.text }}</div
  173 + >
  174 + <div :class="item.status.color"></div>
  175 + </div>
  176 + <UpdateTime v-show="item.showTime" :time="item.time" />
235 </div> 177 </div>
236 </main> 178 </main>
237 </template> 179 </template>
@@ -2,16 +2,16 @@ import { FormSchema } from '/@/components/Form'; @@ -2,16 +2,16 @@ import { FormSchema } from '/@/components/Form';
2 import { DataSourceField } from '../../../config/common.config'; 2 import { DataSourceField } from '../../../config/common.config';
3 import { DeviceTypeEnum } from '/@/api/device/model/deviceModel'; 3 import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
4 import { findDictItemByCode } from '/@/api/system/dict'; 4 import { findDictItemByCode } from '/@/api/system/dict';
5 -import { getDeviceProfile } from '/@/api/alarm/position';  
6 -import { useSelectWidgetMode } from '/@/views/visual/dataSourceBindPanel/useContext';  
7 -import { DataActionModeEnum } from '/@/enums/toolEnum';  
8 -import { unref } from 'vue'; 5 +// import { getDeviceProfile } from '/@/api/alarm/position';
  6 +// import { useSelectWidgetMode } from '/@/views/visual/dataSourceBindPanel/useContext';
  7 +// import { DataActionModeEnum } from '/@/enums/toolEnum';
  8 +// import { unref } from 'vue';
9 import { getMeetTheConditionsDevice } from '/@/api/dataBoard'; 9 import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
10 import { MasterDeviceList } from '/@/api/dataBoard/model'; 10 import { MasterDeviceList } from '/@/api/dataBoard/model';
11 11
12 export const formSchemas = (): FormSchema[] => { 12 export const formSchemas = (): FormSchema[] => {
13 - const mode = useSelectWidgetMode();  
14 - const isUpdate = unref(mode) === DataActionModeEnum.UPDATE; 13 + // const mode = useSelectWidgetMode();
  14 + // const isUpdate = unref(mode) === DataActionModeEnum.UPDATE;
15 return [ 15 return [
16 { 16 {
17 field: DataSourceField.DEVICE_NAME, 17 field: DataSourceField.DEVICE_NAME,
@@ -49,41 +49,41 @@ export const formSchemas = (): FormSchema[] => { @@ -49,41 +49,41 @@ export const formSchemas = (): FormSchema[] => {
49 }; 49 };
50 }, 50 },
51 }, 51 },
52 - {  
53 - field: DataSourceField.DEVICE_PROFILE_ID,  
54 - component: 'ApiSelect',  
55 - label: '产品',  
56 - colProps: { span: 8 },  
57 - rules: [{ required: true, message: '产品为必填项' }],  
58 - componentProps: ({ formActionType, formModel }) => {  
59 - const { setFieldsValue } = formActionType;  
60 - const deviceType = formModel[DataSourceField.DEVICE_TYPE];  
61 - return {  
62 - api: async () => {  
63 - if (!deviceType) return [];  
64 - const list = await getDeviceProfile(deviceType);  
65 - if (isUpdate) {  
66 - const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];  
67 - const record = list.find((item) => item.id === deviceProfileId);  
68 - setFieldsValue({ [DataSourceField.TRANSPORT_TYPE]: record?.transportType });  
69 - }  
70 - return list;  
71 - },  
72 - labelField: 'name',  
73 - valueField: 'id',  
74 - placeholder: '请选择产品',  
75 - onChange: (_, option = {} as Record<'transportType', string>) => {  
76 - setFieldsValue({  
77 - [DataSourceField.DEVICE_ID]: null,  
78 - [DataSourceField.ATTRIBUTE]: null,  
79 - [DataSourceField.ATTRIBUTE_NAME]: null,  
80 - [DataSourceField.TRANSPORT_TYPE]: option[DataSourceField.TRANSPORT_TYPE],  
81 - });  
82 - },  
83 - getPopupContainer: () => document.body,  
84 - };  
85 - },  
86 - }, 52 + // {
  53 + // field: DataSourceField.DEVICE_PROFILE_ID,
  54 + // component: 'ApiSelect',
  55 + // label: '产品',
  56 + // colProps: { span: 8 },
  57 + // rules: [{ required: true, message: '产品为必填项' }],
  58 + // componentProps: ({ formActionType, formModel }) => {
  59 + // const { setFieldsValue } = formActionType;
  60 + // const deviceType = formModel[DataSourceField.DEVICE_TYPE];
  61 + // return {
  62 + // api: async () => {
  63 + // if (!deviceType) return [];
  64 + // const list = await getDeviceProfile(deviceType);
  65 + // if (isUpdate) {
  66 + // const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
  67 + // const record = list.find((item) => item.id === deviceProfileId);
  68 + // setFieldsValue({ [DataSourceField.TRANSPORT_TYPE]: record?.transportType });
  69 + // }
  70 + // return list;
  71 + // },
  72 + // labelField: 'name',
  73 + // valueField: 'id',
  74 + // placeholder: '请选择产品',
  75 + // onChange: (_, option = {} as Record<'transportType', string>) => {
  76 + // setFieldsValue({
  77 + // [DataSourceField.DEVICE_ID]: null,
  78 + // [DataSourceField.ATTRIBUTE]: null,
  79 + // [DataSourceField.ATTRIBUTE_NAME]: null,
  80 + // [DataSourceField.TRANSPORT_TYPE]: option[DataSourceField.TRANSPORT_TYPE],
  81 + // });
  82 + // },
  83 + // getPopupContainer: () => document.body,
  84 + // };
  85 + // },
  86 + // },
87 { 87 {
88 field: DataSourceField.ORIGINATION_ID, 88 field: DataSourceField.ORIGINATION_ID,
89 component: 'OrgTreeSelect', 89 component: 'OrgTreeSelect',
@@ -131,6 +131,7 @@ export const formSchemas = (): FormSchema[] => { @@ -131,6 +131,7 @@ export const formSchemas = (): FormSchema[] => {
131 deviceProfileId, 131 deviceProfileId,
132 deviceType, 132 deviceType,
133 }); 133 });
  134 + console.log(data, 'data');
134 if (data) 135 if (data)
135 return data.map((item) => ({ 136 return data.map((item) => ({
136 ...item, 137 ...item,
@@ -128,66 +128,6 @@ @@ -128,66 +128,6 @@
128 }; 128 };
129 }); 129 });
130 130
131 - // const getMessage = (cmdId: number) => {  
132 - // const message = {  
133 - // alarmDataCmds: [  
134 - // {  
135 - // query: {  
136 - // entityFilter: {  
137 - // type: 'entityList',  
138 - // resolveMultiple: true,  
139 - // entityType: 'DEVICE',  
140 - // entityList: unref(getDesign).dataSource?.map((item) => item.id),  
141 - // },  
142 - // pageLink: {  
143 - // page: 0,  
144 - // pageSize: unref(alarmForm)?.pageSize,  
145 - // textSearch: null,  
146 - // searchPropagatedAlarms: false,  
147 - // statusList: [],  
148 - // severityList: [],  
149 - // typeList: [],  
150 - // sortOrder: {  
151 - // key: {  
152 - // key: 'createdTime',  
153 - // type: 'ALARM_FIELD',  
154 - // },  
155 - // direction: 'DESC',  
156 - // },  
157 - // timeWindow: unref(alarmForm)?.time,  
158 - // },  
159 - // alarmFields: [  
160 - // {  
161 - // type: 'ALARM_FIELD',  
162 - // key: 'createdTime',  
163 - // },  
164 - // {  
165 - // type: 'ALARM_FIELD',  
166 - // key: 'originator',  
167 - // },  
168 - // {  
169 - // type: 'ALARM_FIELD',  
170 - // key: 'type',  
171 - // },  
172 - // {  
173 - // type: 'ALARM_FIELD',  
174 - // key: 'severity',  
175 - // },  
176 - // {  
177 - // type: 'ALARM_FIELD',  
178 - // key: 'status',  
179 - // },  
180 - // ],  
181 - // entityFields: [],  
182 - // latestValues: [],  
183 - // },  
184 - // cmdId,  
185 - // },  
186 - // ],  
187 - // };  
188 - // return message;  
189 - // };  
190 -  
191 const { alarmForm } = useAlarmContext(); 131 const { alarmForm } = useAlarmContext();
192 132
193 watch( 133 watch(
@@ -199,8 +139,8 @@ @@ -199,8 +139,8 @@
199 ); 139 );
200 140
201 const transformMessage = (cmdId: number) => { 141 const transformMessage = (cmdId: number) => {
  142 + if (props.config.option.mode == 'SELECT_PREVIEW') return;
202 currentCmdId.value = cmdId; 143 currentCmdId.value = cmdId;
203 -  
204 send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm)))); 144 send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm))));
205 }; 145 };
206 146
@@ -44,7 +44,6 @@ @@ -44,7 +44,6 @@
44 ]); 44 ]);
45 45
46 const getDesign = computed(() => { 46 const getDesign = computed(() => {
47 - console.log(props.config.option, 'option');  
48 const { persetOption = {}, option } = props.config; 47 const { persetOption = {}, option } = props.config;
49 const { dataSource = [] } = option || {}; 48 const { dataSource = [] } = option || {};
50 const { 49 const {
@@ -75,7 +74,6 @@ @@ -75,7 +74,6 @@
75 74
76 const { loading, sendCommand } = useSendCommand(); 75 const { loading, sendCommand } = useSendCommand();
77 const handleChange = async (index: number, checked: Boolean) => { 76 const handleChange = async (index: number, checked: Boolean) => {
78 - console.log(props.config.option);  
79 const { heightPx, itemHeightRatio, itemWidthRatio, mode, widthPx, dataSource } = 77 const { heightPx, itemHeightRatio, itemWidthRatio, mode, widthPx, dataSource } =
80 props.config.option; 78 props.config.option;
81 79
@@ -87,7 +85,6 @@ @@ -87,7 +85,6 @@
87 mode, 85 mode,
88 widthPx, 86 widthPx,
89 } as DataSource; 87 } as DataSource;
90 - console.log(data, 'data', checked);  
91 88
92 const flag = await sendCommand(data, checked); 89 const flag = await sendCommand(data, checked);
93 if (!flag) controlList.value[index].checked = !checked; 90 if (!flag) controlList.value[index].checked = !checked;
@@ -105,10 +102,7 @@ @@ -105,10 +102,7 @@
105 ); 102 );
106 103
107 const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => { 104 const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => {
108 - console.log(unref(getDesign).dataSource, 'dataSource');  
109 -  
110 - forEachGroupMessage(message, deviceId, attribute, (attribute, value, time) => {  
111 - console.log(attribute, value, time); 105 + forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
112 controlList.value.forEach((item) => { 106 controlList.value.forEach((item) => {
113 if (item.id === deviceId && item.attribute === attribute) { 107 if (item.id === deviceId && item.attribute === attribute) {
114 item.checked = Boolean(getNumberValue(value)); 108 item.checked = Boolean(getNumberValue(value));
@@ -13,7 +13,7 @@ export const option: PublicPresetOptions = { @@ -13,7 +13,7 @@ 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.FONT_COLOR]: '#fff', 15 [ComponentConfigFieldEnum.FONT_COLOR]: '#fff',
16 - [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 16 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
17 [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: { 17 [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: {
18 [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb', 18 [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb',
19 [ComponentConfigFieldEnum.WAVE_FIRST]: '#4579e2', 19 [ComponentConfigFieldEnum.WAVE_FIRST]: '#4579e2',
@@ -55,6 +55,12 @@ @@ -55,6 +55,12 @@
55 component: 'Checkbox', 55 component: 'Checkbox',
56 defaultValue: option.showDeviceName, 56 defaultValue: option.showDeviceName,
57 }, 57 },
  58 + {
  59 + field: ComponentConfigFieldEnum.SHOW_TIME,
  60 + label: '显示时间',
  61 + component: 'Checkbox',
  62 + defaultValue: option.showDeviceName,
  63 + },
58 ], 64 ],
59 showActionButtonGroup: false, 65 showActionButtonGroup: false,
60 labelWidth: 120, 66 labelWidth: 120,
@@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('CircleFlowmeter'); @@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('CircleFlowmeter');
5 5
6 export const CircleFlowmeterConfig: ConfigType = { 6 export const CircleFlowmeterConfig: ConfigType = {
7 ...componentKeys, 7 ...componentKeys,
8 - title: '流量计2', 8 + title: '计量计2',
9 package: PackagesCategoryEnum.FLOWMETER, 9 package: PackagesCategoryEnum.FLOWMETER,
10 }; 10 };
@@ -20,12 +20,13 @@ @@ -20,12 +20,13 @@
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 } = componentInfo || {}; 23 + const { flowmeterConfig, unit, fontColor, showTime } = 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 } = persetOption || {}; 30 } = persetOption || {};
30 const { 31 const {
31 backgroundColor: presetBackgroundColor, 32 backgroundColor: presetBackgroundColor,
@@ -41,6 +42,7 @@ @@ -41,6 +42,7 @@
41 unit: unit ?? persetUnit, 42 unit: unit ?? persetUnit,
42 fontColor: fontColor ?? presetFontColor, 43 fontColor: fontColor ?? presetFontColor,
43 attribute: attributeRename || attributeName || attribute, 44 attribute: attributeRename || attributeName || attribute,
  45 + showTime: showTime ?? persetShowTime,
44 }; 46 };
45 }); 47 });
46 48
@@ -76,7 +78,10 @@ @@ -76,7 +78,10 @@
76 </script> 78 </script>
77 79
78 <template> 80 <template>
79 - <main class="w-full h-full flex flex-col justify-center items-center relative"> 81 + <main
  82 + class="w-full h-full flex flex-col justify-center items-center relative"
  83 + :class="!getDesign.showTime && 'p-5'"
  84 + >
80 <DeviceName :config="config" /> 85 <DeviceName :config="config" />
81 <svg 86 <svg
82 class="waves-rect" 87 class="waves-rect"
@@ -121,7 +126,7 @@ @@ -121,7 +126,7 @@
121 <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{ 126 <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
122 getDesign.attribute || '属性' 127 getDesign.attribute || '属性'
123 }}</div> 128 }}</div>
124 - <UpdateTime :time="time" /> 129 + <UpdateTime v-show="getDesign.showTime" :time="time" />
125 </main> 130 </main>
126 </template> 131 </template>
127 132
@@ -11,6 +11,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum'; @@ -11,6 +11,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
11 11
12 export const option: PublicPresetOptions = { 12 export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 13 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  14 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
14 [ComponentConfigFieldEnum.UNIT]: 'm', 15 [ComponentConfigFieldEnum.UNIT]: 'm',
15 [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: { 16 [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: {
16 [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb', 17 [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb',
@@ -55,6 +55,12 @@ @@ -55,6 +55,12 @@
55 component: 'Checkbox', 55 component: 'Checkbox',
56 defaultValue: option.showDeviceName, 56 defaultValue: option.showDeviceName,
57 }, 57 },
  58 + {
  59 + field: ComponentConfigFieldEnum.SHOW_TIME,
  60 + label: '显示时间',
  61 + component: 'Checkbox',
  62 + defaultValue: option.showTime,
  63 + },
58 ], 64 ],
59 showActionButtonGroup: false, 65 showActionButtonGroup: false,
60 labelWidth: 120, 66 labelWidth: 120,
@@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('RectFlowmeter'); @@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('RectFlowmeter');
5 5
6 export const RectFlowmeteConfig: ConfigType = { 6 export const RectFlowmeteConfig: ConfigType = {
7 ...componentKeys, 7 ...componentKeys,
8 - title: '流量计1', 8 + title: '计量计1',
9 package: PackagesCategoryEnum.FLOWMETER, 9 package: PackagesCategoryEnum.FLOWMETER,
10 }; 10 };
@@ -20,12 +20,13 @@ @@ -20,12 +20,13 @@
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 } = componentInfo || {}; 23 + const { flowmeterConfig, unit, fontColor, showTime } = 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 } = persetOption || {}; 30 } = persetOption || {};
30 const { 31 const {
31 backgroundColor: presetBackgroundColor, 32 backgroundColor: presetBackgroundColor,
@@ -41,6 +42,7 @@ @@ -41,6 +42,7 @@
41 unit: unit ?? persetUnit, 42 unit: unit ?? persetUnit,
42 fontColor: fontColor ?? presetFontColor, 43 fontColor: fontColor ?? presetFontColor,
43 attribute: attributeRename || attributeName || attribute, 44 attribute: attributeRename || attributeName || attribute,
  45 + showTime: showTime ?? persetShowTime,
44 }; 46 };
45 }); 47 });
46 48
@@ -66,7 +68,10 @@ @@ -66,7 +68,10 @@
66 </script> 68 </script>
67 69
68 <template> 70 <template>
69 - <main class="w-full h-full flex flex-col justify-center items-center relative"> 71 + <main
  72 + class="w-full h-full flex flex-col justify-center items-center relative"
  73 + :class="!getDesign.showTime && 'p-5'"
  74 + >
70 <DeviceName :config="config" /> 75 <DeviceName :config="config" />
71 <svg 76 <svg
72 class="waves-rect" 77 class="waves-rect"
@@ -114,7 +119,7 @@ @@ -114,7 +119,7 @@
114 <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{ 119 <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
115 getDesign.attribute || '属性' 120 getDesign.attribute || '属性'
116 }}</div> 121 }}</div>
117 - <UpdateTime :time="time" /> 122 + <UpdateTime v-show="getDesign.showTime" :time="time" />
118 </main> 123 </main>
119 </template> 124 </template>
120 125
@@ -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.FONT_COLOR]: '#', 13 [ComponentConfigFieldEnum.FONT_COLOR]: '#',
14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  15 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
15 }; 16 };
16 17
17 export default class Config extends PublicConfigClass implements CreateComponentType { 18 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -19,6 +19,11 @@ @@ -19,6 +19,11 @@
19 label: '显示设备名称', 19 label: '显示设备名称',
20 component: 'Checkbox', 20 component: 'Checkbox',
21 }, 21 },
  22 + {
  23 + field: ComponentConfigFieldEnum.SHOW_TIME,
  24 + label: '显示时间',
  25 + component: 'Checkbox',
  26 + },
22 ], 27 ],
23 showActionButtonGroup: false, 28 showActionButtonGroup: false,
24 labelWidth: 120, 29 labelWidth: 120,
@@ -37,12 +37,13 @@ @@ -37,12 +37,13 @@
37 37
38 const getDesign = computed(() => { 38 const getDesign = computed(() => {
39 const { persetOption, option } = props.config; 39 const { persetOption, option } = props.config;
40 - const { fontColor: presetFontColor } = persetOption || {}; 40 + const { fontColor: presetFontColor, showTime: persetShowTime } = persetOption || {};
41 const { componentInfo, attribute, attributeName, attributeRename } = option || {}; 41 const { componentInfo, attribute, attributeName, attributeRename } = option || {};
42 - const { fontColor } = componentInfo || {}; 42 + const { fontColor, showTime } = componentInfo || {};
43 return { 43 return {
44 fontColor: fontColor ?? presetFontColor, 44 fontColor: fontColor ?? presetFontColor,
45 attribute: attributeRename || attributeName || attribute, 45 attribute: attributeRename || attributeName || attribute,
  46 + showTime: showTime ?? persetShowTime,
46 }; 47 };
47 }); 48 });
48 49
@@ -59,7 +60,10 @@ @@ -59,7 +60,10 @@
59 </script> 60 </script>
60 61
61 <template> 62 <template>
62 - <main class="w-full h-full flex flex-col justify-center items-center relative"> 63 + <main
  64 + class="w-full h-full flex flex-col justify-center items-center relative"
  65 + :class="!getDesign.showTime && 'p-5'"
  66 + >
63 <DeviceName :config="config" /> 67 <DeviceName :config="config" />
64 <svg class="flowmeter-thermometer" viewBox="0 0 200 250" xmlns="http://www.w3.org/2000/svg"> 68 <svg class="flowmeter-thermometer" viewBox="0 0 200 250" xmlns="http://www.w3.org/2000/svg">
65 <defs> 69 <defs>
@@ -256,7 +260,7 @@ @@ -256,7 +260,7 @@
256 <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{ 260 <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
257 getDesign.attribute || '属性' 261 getDesign.attribute || '属性'
258 }}</div> 262 }}</div>
259 - <UpdateTime :time="time" /> 263 + <UpdateTime v-show="getDesign.showTime" :time="time" />
260 </main> 264 </main>
261 </template> 265 </template>
262 266
@@ -13,6 +13,7 @@ export const option: PublicPresetOptions = { @@ -13,6 +13,7 @@ export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.FONT_COLOR]: '#000', 13 [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
14 [ComponentConfigFieldEnum.UNIT]: 'kw/h', 14 [ComponentConfigFieldEnum.UNIT]: 'kw/h',
15 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 15 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  16 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
16 }; 17 };
17 18
18 export default class Config extends PublicConfigClass implements CreateComponentType { 19 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -28,6 +28,12 @@ @@ -28,6 +28,12 @@
28 component: 'Checkbox', 28 component: 'Checkbox',
29 defaultValue: option.showDeviceName, 29 defaultValue: option.showDeviceName,
30 }, 30 },
  31 + {
  32 + field: ComponentConfigFieldEnum.SHOW_TIME,
  33 + label: '显示时间',
  34 + component: 'Checkbox',
  35 + defaultValue: option.showDeviceName,
  36 + },
31 ], 37 ],
32 showActionButtonGroup: false, 38 showActionButtonGroup: false,
33 labelWidth: 120, 39 labelWidth: 120,
@@ -48,12 +48,17 @@ @@ -48,12 +48,17 @@
48 const getDesign = computed(() => { 48 const getDesign = computed(() => {
49 const { option, persetOption } = props.config; 49 const { option, persetOption } = props.config;
50 const { componentInfo, attribute, attributeRename, attributeName } = option; 50 const { componentInfo, attribute, attributeRename, attributeName } = option;
51 - const { fontColor: presetFontColor, unit: presetUnit } = persetOption || {};  
52 - const { unit, fontColor } = componentInfo || {}; 51 + const {
  52 + fontColor: presetFontColor,
  53 + unit: presetUnit,
  54 + showTime: persetShowTime,
  55 + } = persetOption || {};
  56 + const { unit, fontColor, showTime } = componentInfo || {};
53 return { 57 return {
54 unit: unit ?? presetUnit, 58 unit: unit ?? presetUnit,
55 fontColor: fontColor ?? presetFontColor, 59 fontColor: fontColor ?? presetFontColor,
56 attribute: attributeRename || attributeName || attribute, 60 attribute: attributeRename || attributeName || attribute,
  61 + showTime: showTime ?? persetShowTime,
57 }; 62 };
58 }); 63 });
59 64
@@ -71,7 +76,10 @@ @@ -71,7 +76,10 @@
71 </script> 76 </script>
72 77
73 <template> 78 <template>
74 - <main class="w-full h-full flex flex-col justify-center items-center"> 79 + <main
  80 + class="w-full h-full flex flex-col justify-center items-center"
  81 + :class="!getDesign.showTime && 'p-5'"
  82 + >
75 <div class="flex flex-col w-full h-full"> 83 <div class="flex flex-col w-full h-full">
76 <DeviceName class="text-center" :config="config" /> 84 <DeviceName class="text-center" :config="config" />
77 85
@@ -134,7 +142,7 @@ @@ -134,7 +142,7 @@
134 <span>{{ getDesign.attribute || '电表' }}</span> 142 <span>{{ getDesign.attribute || '电表' }}</span>
135 </div> 143 </div>
136 144
137 - <UpdateTime :time="time" /> 145 + <UpdateTime v-show="getDesign.showTime" :time="time" />
138 </div> 146 </div>
139 </main> 147 </main>
140 </template> 148 </template>
@@ -22,6 +22,7 @@ export enum GradientColor { @@ -22,6 +22,7 @@ export enum GradientColor {
22 export const option: PublicPresetOptions = { 22 export const option: PublicPresetOptions = {
23 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347', 23 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
24 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 24 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  25 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
25 [ComponentConfigFieldEnum.UNIT]: '℃', 26 [ComponentConfigFieldEnum.UNIT]: '℃',
26 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6', 27 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
27 [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5', 28 [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5',
@@ -22,18 +22,18 @@ @@ -22,18 +22,18 @@
22 defaultValue: option.fontColor, 22 defaultValue: option.fontColor,
23 }, 23 },
24 { 24 {
25 - field: ComponentConfigFieldEnum.UNIT,  
26 - label: '数值单位',  
27 - component: 'Input',  
28 - defaultValue: option.unit,  
29 - },  
30 - {  
31 field: ComponentConfigFieldEnum.POINTER_COLOR, 25 field: ComponentConfigFieldEnum.POINTER_COLOR,
32 label: '指针颜色', 26 label: '指针颜色',
33 component: 'ColorPicker', 27 component: 'ColorPicker',
34 changeEvent: 'update:value', 28 changeEvent: 'update:value',
35 defaultValue: option.pointerColor, 29 defaultValue: option.pointerColor,
36 }, 30 },
  31 + {
  32 + field: ComponentConfigFieldEnum.UNIT,
  33 + label: '数值单位',
  34 + component: 'Input',
  35 + defaultValue: option.unit,
  36 + },
37 // { 37 // {
38 // field: ComponentConfigFieldEnum.INSTRUMENT_PANEL_WIDTH, 38 // field: ComponentConfigFieldEnum.INSTRUMENT_PANEL_WIDTH,
39 // label: '仪表盘宽度', 39 // label: '仪表盘宽度',
@@ -48,6 +48,13 @@ @@ -48,6 +48,13 @@
48 defaultValue: option.showDeviceName, 48 defaultValue: option.showDeviceName,
49 }, 49 },
50 { 50 {
  51 + field: ComponentConfigFieldEnum.SHOW_TIME,
  52 + label: '显示时间',
  53 + component: 'Checkbox',
  54 + defaultValue: option.showTime,
  55 + },
  56 +
  57 + {
51 field: ComponentConfigFieldEnum.FIRST_PHASE_COLOR, 58 field: ComponentConfigFieldEnum.FIRST_PHASE_COLOR,
52 label: '起始颜色', 59 label: '起始颜色',
53 component: 'ColorPicker', 60 component: 'ColorPicker',
@@ -88,13 +95,14 @@ @@ -88,13 +95,14 @@
88 fontColor: item[ComponentConfigFieldEnum.FONT_COLOR], 95 fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
89 unit: item[ComponentConfigFieldEnum.UNIT], 96 unit: item[ComponentConfigFieldEnum.UNIT],
90 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME], 97 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
  98 + showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
91 pointerColor: item[ComponentConfigFieldEnum.POINTER_COLOR], 99 pointerColor: item[ComponentConfigFieldEnum.POINTER_COLOR],
92 } as ComponentInfo; 100 } as ComponentInfo;
93 }; 101 };
94 102
95 const setFormValues = (data: Recordable) => { 103 const setFormValues = (data: Recordable) => {
96 // return setFieldsValue(data); 104 // return setFieldsValue(data);
97 - const { gradientInfo, unit, fontColor, showDeviceName, pointerColor } = data; 105 + const { gradientInfo, unit, fontColor, showDeviceName, pointerColor, showTime } = data;
98 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST); 106 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
99 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND); 107 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
100 108
@@ -102,6 +110,7 @@ @@ -102,6 +110,7 @@
102 [ComponentConfigFieldEnum.UNIT]: unit, 110 [ComponentConfigFieldEnum.UNIT]: unit,
103 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor, 111 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
104 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, 112 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
  113 + [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
105 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0, 114 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0,
106 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color, 115 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
107 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1, 116 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,
@@ -30,8 +30,9 @@ @@ -30,8 +30,9 @@
30 pointerColor: presetPointerColor, 30 pointerColor: presetPointerColor,
31 instrumentPanelColor: presetInstrumentPanelColor, 31 instrumentPanelColor: presetInstrumentPanelColor,
32 gradientInfo: presetGradientInfo, 32 gradientInfo: presetGradientInfo,
  33 + showTime: persetShowTime,
33 } = persetOption || {}; 34 } = persetOption || {};
34 - const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo } = 35 + const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo, showTime } =
35 componentInfo || {}; 36 componentInfo || {};
36 return { 37 return {
37 unit: unit ?? presetUnit, 38 unit: unit ?? presetUnit,
@@ -40,6 +41,7 @@ @@ -40,6 +41,7 @@
40 pointerColor: pointerColor ?? presetPointerColor, 41 pointerColor: pointerColor ?? presetPointerColor,
41 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor, 42 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
42 gradientInfo: gradientInfo ?? presetGradientInfo, 43 gradientInfo: gradientInfo ?? presetGradientInfo,
  44 + showTime: showTime ?? persetShowTime,
43 }; 45 };
44 }); 46 });
45 47
@@ -204,12 +206,15 @@ @@ -204,12 +206,15 @@
204 </script> 206 </script>
205 207
206 <template> 208 <template>
207 - <main class="w-full h-full flex flex-col justify-center items-center"> 209 + <main
  210 + class="w-full h-full flex flex-col justify-center items-center"
  211 + :class="!getDesign.showTime && 'p-5'"
  212 + >
208 <DeviceName :config="config" /> 213 <DeviceName :config="config" />
209 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 214 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
210 <div class="text-gray-500 text-xs text-center truncate">{{ 215 <div class="text-gray-500 text-xs text-center truncate">{{
211 getDesign.attribute || '湿度' 216 getDesign.attribute || '湿度'
212 }}</div> 217 }}</div>
213 - <UpdateTime :time="time" /> 218 + <UpdateTime v-if="getDesign.showTime" :time="time" />
214 </main> 219 </main>
215 </template> 220 </template>
@@ -20,6 +20,7 @@ export enum GradientColor { @@ -20,6 +20,7 @@ export enum GradientColor {
20 export const option: PublicPresetOptions = { 20 export const option: PublicPresetOptions = {
21 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347', 21 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
22 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 22 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  23 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
23 [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: false, 24 [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: false,
24 [ComponentConfigFieldEnum.UNIT]: '℃', 25 [ComponentConfigFieldEnum.UNIT]: '℃',
25 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6', 26 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
@@ -22,18 +22,6 @@ @@ -22,18 +22,6 @@
22 defaultValue: option.fontColor, 22 defaultValue: option.fontColor,
23 }, 23 },
24 { 24 {
25 - field: ComponentConfigFieldEnum.UNIT,  
26 - label: '数值单位',  
27 - component: 'Input',  
28 - defaultValue: option.unit,  
29 - },  
30 - {  
31 - field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,  
32 - label: '显示设备名称',  
33 - component: 'Checkbox',  
34 - defaultValue: option.showDeviceName,  
35 - },  
36 - {  
37 field: ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE, 25 field: ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE,
38 label: '显示进度条圆形', 26 label: '显示进度条圆形',
39 component: 'Checkbox', 27 component: 'Checkbox',
@@ -53,6 +41,24 @@ @@ -53,6 +41,24 @@
53 changeEvent: 'update:value', 41 changeEvent: 'update:value',
54 defaultValue: GradientColor.SECOND, 42 defaultValue: GradientColor.SECOND,
55 }, 43 },
  44 + {
  45 + field: ComponentConfigFieldEnum.UNIT,
  46 + label: '数值单位',
  47 + component: 'Input',
  48 + defaultValue: option.unit,
  49 + },
  50 + {
  51 + field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
  52 + label: '显示设备名称',
  53 + component: 'Checkbox',
  54 + defaultValue: option.showDeviceName,
  55 + },
  56 + {
  57 + field: ComponentConfigFieldEnum.SHOW_TIME,
  58 + label: '显示时间',
  59 + component: 'Checkbox',
  60 + defaultValue: option.showTime,
  61 + },
56 ], 62 ],
57 showActionButtonGroup: false, 63 showActionButtonGroup: false,
58 labelWidth: 120, 64 labelWidth: 120,
@@ -80,13 +86,14 @@ @@ -80,13 +86,14 @@
80 fontColor: item[ComponentConfigFieldEnum.FONT_COLOR], 86 fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
81 unit: item[ComponentConfigFieldEnum.UNIT], 87 unit: item[ComponentConfigFieldEnum.UNIT],
82 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME], 88 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
  89 + showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
83 progressBarCircle: item[ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE], 90 progressBarCircle: item[ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE],
84 } as ComponentInfo; 91 } as ComponentInfo;
85 }; 92 };
86 93
87 const setFormValues = (data: Recordable) => { 94 const setFormValues = (data: Recordable) => {
88 // return setFieldsValue(data); 95 // return setFieldsValue(data);
89 - const { gradientInfo, unit, fontColor, showDeviceName, progressBarCircle } = data; 96 + const { gradientInfo, unit, fontColor, showDeviceName, progressBarCircle, showTime } = data;
90 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST); 97 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
91 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND); 98 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
92 99
@@ -94,6 +101,7 @@ @@ -94,6 +101,7 @@
94 [ComponentConfigFieldEnum.UNIT]: unit, 101 [ComponentConfigFieldEnum.UNIT]: unit,
95 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor, 102 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
96 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, 103 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
  104 + [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
97 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0, 105 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0,
98 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color, 106 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
99 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1, 107 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,
@@ -31,9 +31,17 @@ @@ -31,9 +31,17 @@
31 instrumentPanelColor: presetInstrumentPanelColor, 31 instrumentPanelColor: presetInstrumentPanelColor,
32 progressBarCircle: presetProgressBarCircle, 32 progressBarCircle: presetProgressBarCircle,
33 gradientInfo: presetGradientInfo, 33 gradientInfo: presetGradientInfo,
  34 + showTime: persetShowTime,
34 } = persetOption || {}; 35 } = persetOption || {};
35 - const { unit, fontColor, pointerColor, gradientInfo, progressBarCircle, instrumentPanelColor } =  
36 - componentInfo || {}; 36 + const {
  37 + unit,
  38 + fontColor,
  39 + pointerColor,
  40 + gradientInfo,
  41 + progressBarCircle,
  42 + instrumentPanelColor,
  43 + showTime,
  44 + } = componentInfo || {};
37 return { 45 return {
38 unit: unit ?? presetUnit, 46 unit: unit ?? presetUnit,
39 fontColor: fontColor ?? presetFontColor, 47 fontColor: fontColor ?? presetFontColor,
@@ -42,6 +50,7 @@ @@ -42,6 +50,7 @@
42 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor, 50 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
43 progressBarCircle: progressBarCircle ?? presetProgressBarCircle, 51 progressBarCircle: progressBarCircle ?? presetProgressBarCircle,
44 gradientInfo: gradientInfo ?? presetGradientInfo, 52 gradientInfo: gradientInfo ?? presetGradientInfo,
  53 + showTime: showTime ?? persetShowTime,
45 }; 54 };
46 }); 55 });
47 56
@@ -206,12 +215,15 @@ @@ -206,12 +215,15 @@
206 </script> 215 </script>
207 216
208 <template> 217 <template>
209 - <main class="w-full h-full flex flex-col justify-center items-center"> 218 + <main
  219 + class="w-full h-full flex flex-col justify-center items-center"
  220 + :class="!getDesign.showTime && 'p-5'"
  221 + >
210 <DeviceName :config="config" /> 222 <DeviceName :config="config" />
211 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 223 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
212 <div class="text-gray-500 text-xs text-center truncate">{{ 224 <div class="text-gray-500 text-xs text-center truncate">{{
213 getDesign.attribute || '湿度' 225 getDesign.attribute || '湿度'
214 }}</div> 226 }}</div>
215 - <UpdateTime :time="time" /> 227 + <UpdateTime v-if="getDesign.showTime" :time="time" />
216 </main> 228 </main>
217 </template> 229 </template>
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 import { unref, ref, onMounted, computed, nextTick } from 'vue'; 3 import { unref, ref, onMounted, computed, nextTick } from 'vue';
4 import { ComponentPropsConfigType } from '../../../index.type'; 4 import { ComponentPropsConfigType } from '../../../index.type';
5 import { option } from './config'; 5 import { option } from './config';
6 - import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 + // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
7 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 7 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
8 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale'; 8 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
9 import { useReceiveMessage } from '../../../hook/useReceiveMessage'; 9 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
@@ -19,7 +19,7 @@ @@ -19,7 +19,7 @@
19 19
20 const chartInstance = ref<Nullable<ECharts>>(null); 20 const chartInstance = ref<Nullable<ECharts>>(null);
21 21
22 - const time = ref<Nullable<number>>(null); 22 + // const time = ref<Nullable<number>>(null);
23 23
24 const getDesign = computed(() => { 24 const getDesign = computed(() => {
25 const { option, persetOption } = props.config; 25 const { option, persetOption } = props.config;
@@ -276,11 +276,11 @@ @@ -276,11 +276,11 @@
276 const { forEachGroupMessage } = useReceiveMessage(); 276 const { forEachGroupMessage } = useReceiveMessage();
277 const { getNumberValue } = useReceiveValue(); 277 const { getNumberValue } = useReceiveValue();
278 const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => { 278 const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
279 - forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => { 279 + forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
280 series.value.forEach((item) => { 280 series.value.forEach((item) => {
281 if (item.id === deviceId && item.attribute === attribute) { 281 if (item.id === deviceId && item.attribute === attribute) {
282 item.value = getNumberValue(value); 282 item.value = getNumberValue(value);
283 - time.value = timespan; 283 + // time.value = timespan;
284 } 284 }
285 }); 285 });
286 }); 286 });
@@ -334,6 +334,6 @@ @@ -334,6 +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 - <UpdateTime :time="time" /> 337 + <!-- <UpdateTime :time="time" /> -->
338 </main> 338 </main>
339 </template> 339 </template>
@@ -20,7 +20,8 @@ export enum GradientColor { @@ -20,7 +20,8 @@ export enum GradientColor {
20 export const option: PublicPresetOptions = { 20 export const option: PublicPresetOptions = {
21 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347', 21 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
22 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 22 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
23 - [ComponentConfigFieldEnum.UNIT]: '℃', 23 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
  24 + [ComponentConfigFieldEnum.UNIT]: 'kw',
24 }; 25 };
25 26
26 export default class Config extends PublicConfigClass implements CreateComponentType { 27 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -26,6 +26,12 @@ @@ -26,6 +26,12 @@
26 component: 'Checkbox', 26 component: 'Checkbox',
27 defaultValue: option.showDeviceName, 27 defaultValue: option.showDeviceName,
28 }, 28 },
  29 + {
  30 + field: ComponentConfigFieldEnum.SHOW_TIME,
  31 + label: '显示时间',
  32 + component: 'Checkbox',
  33 + defaultValue: option.showTime,
  34 + },
29 ], 35 ],
30 showActionButtonGroup: false, 36 showActionButtonGroup: false,
31 labelWidth: 120, 37 labelWidth: 120,
@@ -41,17 +47,19 @@ @@ -41,17 +47,19 @@
41 fontColor: item[ComponentConfigFieldEnum.FONT_COLOR], 47 fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
42 unit: item[ComponentConfigFieldEnum.UNIT], 48 unit: item[ComponentConfigFieldEnum.UNIT],
43 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME], 49 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
  50 + showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
44 } as ComponentInfo; 51 } as ComponentInfo;
45 }; 52 };
46 53
47 const setFormValues = (data: Recordable) => { 54 const setFormValues = (data: Recordable) => {
48 // return setFieldsValue(data); 55 // return setFieldsValue(data);
49 - const { unit, fontColor, showDeviceName } = data; 56 + const { unit, fontColor, showDeviceName, showTime } = data;
50 57
51 const value = { 58 const value = {
52 [ComponentConfigFieldEnum.UNIT]: unit, 59 [ComponentConfigFieldEnum.UNIT]: unit,
53 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor, 60 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
54 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, 61 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
  62 + [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
55 }; 63 };
56 return setFieldsValue(value); 64 return setFieldsValue(value);
57 }; 65 };
@@ -29,8 +29,9 @@ @@ -29,8 +29,9 @@
29 pointerColor: presetPointerColor, 29 pointerColor: presetPointerColor,
30 instrumentPanelColor: presetInstrumentPanelColor, 30 instrumentPanelColor: presetInstrumentPanelColor,
31 gradientInfo: presetGradientInfo, 31 gradientInfo: presetGradientInfo,
  32 + showTime: persetShowTime,
32 } = persetOption || {}; 33 } = persetOption || {};
33 - const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo } = 34 + const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo, showTime } =
34 componentInfo || {}; 35 componentInfo || {};
35 return { 36 return {
36 unit: unit ?? presetUnit, 37 unit: unit ?? presetUnit,
@@ -39,6 +40,7 @@ @@ -39,6 +40,7 @@
39 pointerColor: pointerColor ?? presetPointerColor, 40 pointerColor: pointerColor ?? presetPointerColor,
40 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor, 41 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
41 gradientInfo: gradientInfo ?? presetGradientInfo, 42 gradientInfo: gradientInfo ?? presetGradientInfo,
  43 + showTime: showTime ?? persetShowTime,
42 }; 44 };
43 }); 45 });
44 46
@@ -189,12 +191,15 @@ @@ -189,12 +191,15 @@
189 </script> 191 </script>
190 192
191 <template> 193 <template>
192 - <main class="w-full h-full flex flex-col justify-center items-center"> 194 + <main
  195 + class="w-full h-full flex flex-col justify-center items-center"
  196 + :class="!getDesign.showTime && 'p-5'"
  197 + >
193 <DeviceName :config="config" /> 198 <DeviceName :config="config" />
194 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 199 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
195 <div class="text-gray-500 text-xs text-center truncate">{{ 200 <div class="text-gray-500 text-xs text-center truncate">{{
196 - getDesign.attribute || '湿度' 201 + getDesign.attribute || '速度'
197 }}</div> 202 }}</div>
198 - <UpdateTime :time="time" /> 203 + <UpdateTime v-if="getDesign.showTime" :time="time" />
199 </main> 204 </main>
200 </template> 205 </template>
@@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '../../../enum'; @@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '../../../enum';
12 export const option: PublicPresetOptions = { 12 export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347', 13 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  15 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
15 [ComponentConfigFieldEnum.UNIT]: '℃', 16 [ComponentConfigFieldEnum.UNIT]: '℃',
16 }; 17 };
17 18
@@ -25,6 +25,12 @@ @@ -25,6 +25,12 @@
25 component: 'Checkbox', 25 component: 'Checkbox',
26 defaultValue: option.showDeviceName, 26 defaultValue: option.showDeviceName,
27 }, 27 },
  28 + {
  29 + field: ComponentConfigFieldEnum.SHOW_TIME,
  30 + label: '显示时间',
  31 + component: 'Checkbox',
  32 + defaultValue: option.showTime,
  33 + },
28 ], 34 ],
29 showActionButtonGroup: false, 35 showActionButtonGroup: false,
30 labelWidth: 120, 36 labelWidth: 120,
@@ -27,12 +27,17 @@ @@ -27,12 +27,17 @@
27 const getDesign = computed(() => { 27 const getDesign = computed(() => {
28 const { option, persetOption } = props.config; 28 const { option, persetOption } = props.config;
29 const { componentInfo, attribute, attributeRename, attributeName } = option; 29 const { componentInfo, attribute, attributeRename, attributeName } = option;
30 - const { fontColor: presetFontColor, unit: presetUnit } = persetOption || {};  
31 - const { unit, fontColor } = componentInfo || {}; 30 + const {
  31 + fontColor: presetFontColor,
  32 + unit: presetUnit,
  33 + showTime: persetShowTime,
  34 + } = persetOption || {};
  35 + const { unit, fontColor, showTime } = componentInfo || {};
32 return { 36 return {
33 unit: unit ?? presetUnit, 37 unit: unit ?? presetUnit,
34 fontColor: fontColor ?? presetFontColor, 38 fontColor: fontColor ?? presetFontColor,
35 attribute: attributeRename || attributeName || attribute, 39 attribute: attributeRename || attributeName || attribute,
  40 + showTime: persetShowTime || showTime,
36 }; 41 };
37 }); 42 });
38 43
@@ -222,12 +227,15 @@ @@ -222,12 +227,15 @@
222 </script> 227 </script>
223 228
224 <template> 229 <template>
225 - <main class="w-full h-full flex flex-col justify-center items-center"> 230 + <main
  231 + class="w-full h-full flex flex-col justify-center items-center"
  232 + :class="!getDesign.showTime && 'p-5'"
  233 + >
226 <DeviceName :config="config" /> 234 <DeviceName :config="config" />
227 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 235 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
228 <div class="text-gray-500 text-xs text-center truncate">{{ 236 <div class="text-gray-500 text-xs text-center truncate">{{
229 getDesign.attribute || '温度' 237 getDesign.attribute || '温度'
230 }}</div> 238 }}</div>
231 - <UpdateTime :time="time" /> 239 + <UpdateTime v-show="getDesign.showTime" :time="time" />
232 </main> 240 </main>
233 </template> 241 </template>
@@ -29,6 +29,7 @@ export const option: PublicPresetOptions = { @@ -29,6 +29,7 @@ export const option: PublicPresetOptions = {
29 ], 29 ],
30 [ComponentConfigFieldEnum.UNIT]: 'km/h', 30 [ComponentConfigFieldEnum.UNIT]: 'km/h',
31 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 31 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  32 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
32 }; 33 };
33 34
34 export default class Config extends PublicConfigClass implements CreateComponentType { 35 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -81,6 +81,12 @@ @@ -81,6 +81,12 @@
81 component: 'Checkbox', 81 component: 'Checkbox',
82 defaultValue: option.showDeviceName, 82 defaultValue: option.showDeviceName,
83 }, 83 },
  84 + {
  85 + field: ComponentConfigFieldEnum.SHOW_TIME,
  86 + label: '显示时间',
  87 + component: 'Checkbox',
  88 + defaultValue: option.showTime,
  89 + },
84 ], 90 ],
85 showActionButtonGroup: false, 91 showActionButtonGroup: false,
86 labelWidth: 120, 92 labelWidth: 120,
@@ -112,11 +118,12 @@ @@ -112,11 +118,12 @@
112 fontColor: value[ComponentConfigFieldEnum.FONT_COLOR], 118 fontColor: value[ComponentConfigFieldEnum.FONT_COLOR],
113 unit: value[ComponentConfigFieldEnum.UNIT], 119 unit: value[ComponentConfigFieldEnum.UNIT],
114 showDeviceName: value[ComponentConfigFieldEnum.SHOW_DEVICE_NAME], 120 showDeviceName: value[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
  121 + showTime: value[ComponentConfigFieldEnum.SHOW_TIME],
115 } as ComponentInfo; 122 } as ComponentInfo;
116 }; 123 };
117 124
118 const setFormValues = (data: ComponentInfo) => { 125 const setFormValues = (data: ComponentInfo) => {
119 - const { gradientInfo, unit, fontColor, showDeviceName } = data; 126 + const { gradientInfo, unit, fontColor, showDeviceName, showTime } = data;
120 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST); 127 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
121 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND); 128 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
122 const thirdRecord = gradientInfo.find((item) => item.key === Gradient.THIRD); 129 const thirdRecord = gradientInfo.find((item) => item.key === Gradient.THIRD);
@@ -124,6 +131,7 @@ @@ -124,6 +131,7 @@
124 [ComponentConfigFieldEnum.UNIT]: unit, 131 [ComponentConfigFieldEnum.UNIT]: unit,
125 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor, 132 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
126 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, 133 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
  134 + [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
127 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value, 135 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value,
128 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color, 136 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
129 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value, 137 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value,
@@ -36,14 +36,16 @@ @@ -36,14 +36,16 @@
36 fontColor: presetFontColor, 36 fontColor: presetFontColor,
37 unit: presetUnit, 37 unit: presetUnit,
38 gradientInfo: presetGradientInfo, 38 gradientInfo: presetGradientInfo,
  39 + showTime: persetShowTime,
39 } = persetOption || {}; 40 } = persetOption || {};
40 41
41 - const { unit, fontColor, gradientInfo } = componentInfo || {}; 42 + const { unit, fontColor, gradientInfo, showTime } = componentInfo || {};
42 return { 43 return {
43 unit: unit ?? presetUnit, 44 unit: unit ?? presetUnit,
44 fontColor: fontColor ?? presetFontColor, 45 fontColor: fontColor ?? presetFontColor,
45 gradientInfo: gradientInfo ?? presetGradientInfo, 46 gradientInfo: gradientInfo ?? presetGradientInfo,
46 attribute: attributeRename || attributeName || attribute, 47 attribute: attributeRename || attributeName || attribute,
  48 + showTime: showTime || persetShowTime,
47 }; 49 };
48 }); 50 });
49 51
@@ -205,12 +207,15 @@ @@ -205,12 +207,15 @@
205 </script> 207 </script>
206 208
207 <template> 209 <template>
208 - <main class="w-full h-full flex flex-col justify-center items-center"> 210 + <main
  211 + class="w-full h-full flex flex-col justify-center items-center"
  212 + :class="!getDesign.showTime && 'p-5'"
  213 + >
209 <DeviceName :config="config" /> 214 <DeviceName :config="config" />
210 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 215 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
211 <div class="text-center text-gray-500 text-xs truncate"> 216 <div class="text-center text-gray-500 text-xs truncate">
212 {{ getDesign.attribute || '速度' }} 217 {{ getDesign.attribute || '速度' }}
213 </div> 218 </div>
214 - <UpdateTime :time="time" /> 219 + <UpdateTime v-show="getDesign.showTime" :time="time" />
215 </main> 220 </main>
216 </template> 221 </template>
@@ -13,6 +13,7 @@ export const option: PublicPresetOptions = { @@ -13,6 +13,7 @@ export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.OPEN_COLOR]: '#30f230', 13 [ComponentConfigFieldEnum.OPEN_COLOR]: '#30f230',
14 [ComponentConfigFieldEnum.CLOSE_COLOR]: '#eeeeee', 14 [ComponentConfigFieldEnum.CLOSE_COLOR]: '#eeeeee',
15 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true, 15 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
  16 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
16 }; 17 };
17 18
18 export default class Config extends PublicConfigClass implements CreateComponentType { 19 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -25,10 +25,10 @@ @@ -25,10 +25,10 @@
25 }, 25 },
26 }, 26 },
27 { 27 {
28 - field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,  
29 - label: '显示设备名称', 28 + field: ComponentConfigFieldEnum.SHOW_TIME,
  29 + label: '显示时间',
30 component: 'Checkbox', 30 component: 'Checkbox',
31 - defaultValue: option.showDeviceName, 31 + defaultValue: option.showTime,
32 }, 32 },
33 ], 33 ],
34 showActionButtonGroup: false, 34 showActionButtonGroup: false,
@@ -24,15 +24,17 @@ @@ -24,15 +24,17 @@
24 openColor: persetOpenColor, 24 openColor: persetOpenColor,
25 closeColor: persetCloseColor, 25 closeColor: persetCloseColor,
26 showDeviceName: persetShowDeviceName, 26 showDeviceName: persetShowDeviceName,
  27 + showTime: persetShowTime,
27 } = persetOption || {}; 28 } = persetOption || {};
28 const { componentInfo, attribute, attributeName, attributeRename } = option; 29 const { componentInfo, attribute, attributeName, attributeRename } = option;
29 30
30 - const { openColor, closeColor, showDeviceName } = componentInfo || {}; 31 + const { openColor, closeColor, showDeviceName, showTime } = componentInfo || {};
31 return { 32 return {
32 openColor: openColor ?? persetOpenColor, 33 openColor: openColor ?? persetOpenColor,
33 closeColor: closeColor ?? persetCloseColor, 34 closeColor: closeColor ?? persetCloseColor,
34 showDeviceName: showDeviceName ?? persetShowDeviceName, 35 showDeviceName: showDeviceName ?? persetShowDeviceName,
35 attribute: attributeRename || attributeName || attribute, 36 attribute: attributeRename || attributeName || attribute,
  37 + showTime: showTime ?? persetShowTime,
36 }; 38 };
37 }); 39 });
38 40
@@ -60,10 +62,14 @@ @@ -60,10 +62,14 @@
60 </script> 62 </script>
61 63
62 <template> 64 <template>
63 - <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center"> 65 + <main
  66 + :style="getScale"
  67 + class="w-full h-full flex flex-col justify-center items-center"
  68 + :class="!getDesign.showTime && 'p-5'"
  69 + >
64 <DeviceName :config="config" class="text-center" /> 70 <DeviceName :config="config" class="text-center" />
65 71
66 - <div class="flex-1 flex justify-center items-center flex-col"> 72 + <div class="flex-1 flex justify-center items-center flex-col" :style="getScale">
67 <div 73 <div
68 :style="{ 74 :style="{
69 '--open-color': getDesign.openColor, 75 '--open-color': getDesign.openColor,
@@ -73,7 +79,7 @@ @@ -73,7 +79,7 @@
73 ></div> 79 ></div>
74 <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute }}</div> 80 <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute }}</div>
75 </div> 81 </div>
76 - <UpdateTime :time="time" /> 82 + <UpdateTime v-if="getDesign.showTime" :time="time" />
77 </main> 83 </main>
78 </template> 84 </template>
79 <style lang="less" scoped> 85 <style lang="less" scoped>
@@ -15,6 +15,7 @@ export const option: PublicPresetOptions = { @@ -15,6 +15,7 @@ export const option: PublicPresetOptions = {
15 [ComponentConfigFieldEnum.ICON_CLOSE]: 'dianyuandianya', 15 [ComponentConfigFieldEnum.ICON_CLOSE]: 'dianyuandianya',
16 [ComponentConfigFieldEnum.ICON_COLOR_CLOSE]: '#CCCCCC', 16 [ComponentConfigFieldEnum.ICON_COLOR_CLOSE]: '#CCCCCC',
17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  18 + [ComponentConfigFieldEnum.SHOW_TIME]: false,
18 }; 19 };
19 20
20 export default class Config extends PublicConfigClass implements CreateComponentType { 21 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -52,6 +52,12 @@ @@ -52,6 +52,12 @@
52 component: 'Checkbox', 52 component: 'Checkbox',
53 defaultValue: option.showDeviceName, 53 defaultValue: option.showDeviceName,
54 }, 54 },
  55 + {
  56 + field: ComponentConfigFieldEnum.SHOW_TIME,
  57 + label: '显示设备名称',
  58 + component: 'Checkbox',
  59 + defaultValue: option.showTime,
  60 + },
55 ], 61 ],
56 showActionButtonGroup: false, 62 showActionButtonGroup: false,
57 labelWidth: 120, 63 labelWidth: 120,
@@ -25,11 +25,12 @@ @@ -25,11 +25,12 @@
25 fontColor: persetFontColor, 25 fontColor: persetFontColor,
26 iconClose: persetIconCLose, 26 iconClose: persetIconCLose,
27 iconColorClose: persetIconColorClose, 27 iconColorClose: persetIconColorClose,
  28 + showTime: persetShowTime,
28 } = persetOption; 29 } = persetOption;
29 30
30 const { componentInfo, attributeRename } = option; 31 const { componentInfo, attributeRename } = option;
31 32
32 - const { icon, iconColor, fontColor, unit, iconClose, iconColorClose, attributeName } = 33 + const { icon, iconColor, fontColor, unit, iconClose, iconColorClose, attributeName, showTime } =
33 componentInfo || {}; 34 componentInfo || {};
34 return { 35 return {
35 iconColor: iconColor || persetIconColor, 36 iconColor: iconColor || persetIconColor,
@@ -39,6 +40,7 @@ @@ -39,6 +40,7 @@
39 attribute: attributeRename || attributeName, 40 attribute: attributeRename || attributeName,
40 iconClose: iconClose || persetIconCLose, 41 iconClose: iconClose || persetIconCLose,
41 iconColorClose: iconColorClose || persetIconColorClose, 42 iconColorClose: iconColorClose || persetIconColorClose,
  43 + showTime: showTime ?? persetShowTime,
42 }; 44 };
43 }); 45 });
44 46
@@ -67,6 +69,6 @@ @@ -67,6 +69,6 @@
67 /> 69 />
68 <div class="text-gray-500 text-sm truncate m-2">{{ getDesign.attribute || '温度' }}</div> 70 <div class="text-gray-500 text-sm truncate m-2">{{ getDesign.attribute || '温度' }}</div>
69 </div> 71 </div>
70 - <UpdateTime :time="time" /> 72 + <UpdateTime v-show="getDesign.showTime" :time="time" />
71 </main> 73 </main>
72 </template> 74 </template>
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue'; 3 import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
4 import { ComponentPropsConfigType } from '../../../index.type'; 4 import { ComponentPropsConfigType } from '../../../index.type';
5 import { option } from './config'; 5 import { option } from './config';
6 - import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 + // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
7 import { useComponentScale } from '../../../hook/useComponentScale'; 7 import { useComponentScale } from '../../../hook/useComponentScale';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 import { useReceiveMessage } from '../../../hook/useReceiveMessage'; 9 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
@@ -180,6 +180,6 @@ @@ -180,6 +180,6 @@
180 <main class="w-full h-full flex flex-col justify-center items-center"> 180 <main class="w-full h-full flex flex-col justify-center items-center">
181 <DeviceName :config="config" /> 181 <DeviceName :config="config" />
182 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 182 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
183 - <UpdateTime :time="time" /> 183 + <!-- <UpdateTime :time="time" /> -->
184 </main> 184 </main>
185 </template> 185 </template>
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue'; 3 import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
4 import { ComponentPropsConfigType } from '../../../index.type'; 4 import { ComponentPropsConfigType } from '../../../index.type';
5 import { option } from './config'; 5 import { option } from './config';
6 - import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 + // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
7 import { useComponentScale } from '../../../hook/useComponentScale'; 7 import { useComponentScale } from '../../../hook/useComponentScale';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 import { useReceiveMessage } from '../../../hook/useReceiveMessage'; 9 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
@@ -181,6 +181,6 @@ @@ -181,6 +181,6 @@
181 <main class="w-full h-full flex flex-col justify-center items-center"> 181 <main class="w-full h-full flex flex-col justify-center items-center">
182 <DeviceName :config="config" /> 182 <DeviceName :config="config" />
183 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 183 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
184 - <UpdateTime :time="time" /> 184 + <!-- <UpdateTime :time="time" /> -->
185 </main> 185 </main>
186 </template> 186 </template>
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 import { unref, ref, onMounted, nextTick, toRaw, computed } from 'vue'; 3 import { unref, ref, onMounted, nextTick, toRaw, computed } from 'vue';
4 import { ComponentPropsConfigType } from '../../../index.type'; 4 import { ComponentPropsConfigType } from '../../../index.type';
5 import { option } from './config'; 5 import { option } from './config';
6 - import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 + // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
7 import { useComponentScale } from '../../../hook/useComponentScale'; 7 import { useComponentScale } from '../../../hook/useComponentScale';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 import { useIntervalFn } from '@vueuse/core'; 9 import { useIntervalFn } from '@vueuse/core';
@@ -21,10 +21,10 @@ @@ -21,10 +21,10 @@
21 const chartRefEl = ref<Nullable<HTMLDivElement>>(null); 21 const chartRefEl = ref<Nullable<HTMLDivElement>>(null);
22 22
23 const chartInstance = ref<Nullable<ECharts>>(null); 23 const chartInstance = ref<Nullable<ECharts>>(null);
24 - const time = ref<Nullable<number>>(null); 24 + // const time = ref<Nullable<number>>(null);
25 25
26 const updateInterval = ref<number>(1000); //默认每秒更新一次 26 const updateInterval = ref<number>(1000); //默认每秒更新一次
27 - const maxDataPoints = ref<number>(10); //默认每秒显示10个数据点 27 + const maxDataPoints = ref<number>(30); //默认每秒显示10个数据点
28 28
29 const chartData = ref<{ time: string | number; value: number }[]>([]); 29 const chartData = ref<{ time: string | number; value: number }[]>([]);
30 const legendData = ref<string[]>(['温度']); 30 const legendData = ref<string[]>(['温度']);
@@ -51,7 +51,7 @@ @@ -51,7 +51,7 @@
51 grid: { 51 grid: {
52 top: '30%', 52 top: '30%',
53 left: '6%', 53 left: '6%',
54 - right: '16%', 54 + right: '10%',
55 bottom: '1%', 55 bottom: '1%',
56 containLabel: true, 56 containLabel: true,
57 }, 57 },
@@ -91,7 +91,6 @@ @@ -91,7 +91,6 @@
91 return { 91 return {
92 dataSource: dataSource?.map((item) => { 92 dataSource: dataSource?.map((item) => {
93 const { unit, showDeviceName, fontColor } = item.componentInfo || {}; 93 const { unit, showDeviceName, fontColor } = item.componentInfo || {};
94 - console.log(item, 'item');  
95 const { attribute, attributeRename, deviceId, attributeName, deviceName, deviceRename } = 94 const { attribute, attributeRename, deviceId, attributeName, deviceName, deviceRename } =
96 item; 95 item;
97 return { 96 return {
@@ -203,6 +202,6 @@ @@ -203,6 +202,6 @@
203 <main class="w-full h-full flex flex-col justify-center items-center"> 202 <main class="w-full h-full flex flex-col justify-center items-center">
204 <DeviceName :config="config" /> 203 <DeviceName :config="config" />
205 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 204 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
206 - <UpdateTime :time="time" /> 205 + <!-- <UpdateTime :time="time" /> -->
207 </main> 206 </main>
208 </template> 207 </template>
@@ -3,7 +3,6 @@ @@ -3,7 +3,6 @@
3 import { ComponentPropsConfigType } from '../../../index.type'; 3 import { ComponentPropsConfigType } from '../../../index.type';
4 import { Progress } from 'ant-design-vue'; 4 import { Progress } from 'ant-design-vue';
5 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 5 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
6 - import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';  
7 import { useReceiveMessage } from '../../../hook/useReceiveMessage'; 6 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
8 import { buildUUID } from '/@/utils/uuid'; 7 import { buildUUID } from '/@/utils/uuid';
9 import { useReceiveValue } from '../../../hook/useReceiveValue'; 8 import { useReceiveValue } from '../../../hook/useReceiveValue';
@@ -127,7 +126,7 @@ @@ -127,7 +126,7 @@
127 <Progress :strokeColor="item.backgroundColor" :percent="item.value" :showInfo="false" /> 126 <Progress :strokeColor="item.backgroundColor" :percent="item.value" :showInfo="false" />
128 </div> 127 </div>
129 </div> 128 </div>
130 - <UpdateTime :time="time" /> 129 + <!-- <UpdateTime :time="time" /> -->
131 </main> 130 </main>
132 </template> 131 </template>
133 <style lang="less" scoped> 132 <style lang="less" scoped>
@@ -3,7 +3,6 @@ @@ -3,7 +3,6 @@
3 import { option } from './config'; 3 import { option } from './config';
4 import { ref, unref } from 'vue'; 4 import { ref, unref } from 'vue';
5 import { SvgIcon } from '/@/components/Icon'; 5 import { SvgIcon } from '/@/components/Icon';
6 - import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';  
7 import { computed } from 'vue'; 6 import { computed } from 'vue';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 7 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 import { useReceiveMessage } from '../../../hook/useReceiveMessage'; 8 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
@@ -118,6 +117,6 @@ @@ -118,6 +117,6 @@
118 <span>{{ item.unit }} </span> 117 <span>{{ item.unit }} </span>
119 </h1> 118 </h1>
120 </div> 119 </div>
121 - <UpdateTime :time="time" /> 120 + <!-- <UpdateTime :time="time" /> -->
122 </main> 121 </main>
123 </template> 122 </template>
@@ -19,6 +19,7 @@ export enum ComponentConfigFieldEnum { @@ -19,6 +19,7 @@ export enum ComponentConfigFieldEnum {
19 SECOND_PHASE_VALUE = 'secondPhaseValue', 19 SECOND_PHASE_VALUE = 'secondPhaseValue',
20 THIRD_PHASE_VALUE = 'thirdPhaseValue', 20 THIRD_PHASE_VALUE = 'thirdPhaseValue',
21 SHOW_DEVICE_NAME = 'showDeviceName', 21 SHOW_DEVICE_NAME = 'showDeviceName',
  22 + SHOW_TIME = 'showTime',
22 GRADIENT_INFO = 'gradientInfo', 23 GRADIENT_INFO = 'gradientInfo',
23 24
24 FLOWMETER_CONFIG = 'flowmeterConfig', 25 FLOWMETER_CONFIG = 'flowmeterConfig',
@@ -219,7 +219,7 @@ class Subscriber { @@ -219,7 +219,7 @@ class Subscriber {
219 throw error; 219 throw error;
220 } 220 }
221 } 221 }
222 - return; 222 + // return;
223 } 223 }
224 224
225 for (const item of subscriptionGroup) { 225 for (const item of subscriptionGroup) {
@@ -19,7 +19,7 @@ export enum PackagesCategoryNameEnum { @@ -19,7 +19,7 @@ export enum PackagesCategoryNameEnum {
19 // PICTURE = '图片组件', 19 // PICTURE = '图片组件',
20 CONTROL = '控制组件', 20 CONTROL = '控制组件',
21 MAP = '地图组件', 21 MAP = '地图组件',
22 - FLOWMETER = '流量计', 22 + FLOWMETER = '计量计',
23 STATISTICS = '统计', 23 STATISTICS = '统计',
24 ALARM = '告警', 24 ALARM = '告警',
25 OTHER = '其他', 25 OTHER = '其他',
@@ -91,7 +91,11 @@ @@ -91,7 +91,11 @@
91 91
92 const isAlarm = computed(() => { 92 const isAlarm = computed(() => {
93 const frontId = props.sourceInfo.frontId; 93 const frontId = props.sourceInfo.frontId;
94 - if (frontId == 'DeviceAlarm' || frontId == 'DeviceAlarmHistory') { 94 + if (
  95 + frontId == 'DeviceAlarm' ||
  96 + frontId == 'DeviceAlarmHistory' ||
  97 + frontId == 'StatisticsComponent7'
  98 + ) {
95 return true; 99 return true;
96 } else { 100 } else {
97 return false; 101 return false;
@@ -20,7 +20,7 @@ export enum SchemaFiled { @@ -20,7 +20,7 @@ export enum SchemaFiled {
20 LIMIT = 'limit', 20 LIMIT = 'limit',
21 AGG = 'agg', 21 AGG = 'agg',
22 ORDER_BY = 'orderBy', 22 ORDER_BY = 'orderBy',
23 - PAGE_SIZe = 'pageSize', 23 + PAGE_SIZE = 'pageSize',
24 } 24 }
25 25
26 export enum AggregateDataEnum { 26 export enum AggregateDataEnum {
@@ -60,7 +60,7 @@ export const formSchema = (): FormSchema[] => { @@ -60,7 +60,7 @@ export const formSchema = (): FormSchema[] => {
60 }, 60 },
61 61
62 { 62 {
63 - field: SchemaFiled.PAGE_SIZe, 63 + field: SchemaFiled.PAGE_SIZE,
64 label: '分页条数', 64 label: '分页条数',
65 component: 'InputNumber', 65 component: 'InputNumber',
66 defaultValue: 20, 66 defaultValue: 20,
1 -export { default as alarmTimeModal } from './index.vue'; 1 +export { default as AlarmTimeModal } from './index.vue';
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { ref, unref } from 'vue'; 2 import { ref, unref } from 'vue';
3 - import { formSchema, SchemaFiled } from './config'; 3 + import { AggregateDataEnum, formSchema, QueryWay, SchemaFiled } from './config';
4 import { useForm } from '/@/components/Form'; 4 import { useForm } from '/@/components/Form';
5 import { useModalInner } from '/@/components/Modal'; 5 import { useModalInner } from '/@/components/Modal';
6 import { useGridLayout } from '/@/hooks/component/useGridLayout'; 6 import { useGridLayout } from '/@/hooks/component/useGridLayout';
@@ -8,13 +8,81 @@ @@ -8,13 +8,81 @@
8 import { BasicForm } from '/@/components/Form'; 8 import { BasicForm } from '/@/components/Form';
9 import { BasicModal } from '/@/components/Modal'; 9 import { BasicModal } from '/@/components/Modal';
10 import { nextTick } from 'vue'; 10 import { nextTick } from 'vue';
  11 + import {
  12 + getPacketIntervalByRange,
  13 + getPacketIntervalByValue,
  14 + } from '/@/views/device/localtion/cpns/TimePeriodForm/helper';
11 15
12 - const emit = defineEmits(['register', 'getAlarmForm']); 16 + const emit = defineEmits(['register', 'getAlarmForm', 'getHistoryForm']);
13 // const emit = defineEmits<{ 17 // const emit = defineEmits<{
14 // (event: 'getAlarmForm', data: WidgetDataType): void; 18 // (event: 'getAlarmForm', data: WidgetDataType): void;
15 // }>(); 19 // }>();
16 20
17 - const [registerModal, { closeModal }] = useModalInner(); 21 + const fontId = ref('');
  22 + const [registerModal, { closeModal }] = useModalInner(async (data) => {
  23 + fontId.value = unref(data).record.frontId;
  24 + method.updateSchema([
  25 + {
  26 + field: SchemaFiled.PAGE_SIZE,
  27 + ifShow: unref(fontId) !== 'StatisticsComponent7',
  28 + },
  29 + ]);
  30 + if (unref(fontId) !== 'StatisticsComponent7') return;
  31 + await nextTick();
  32 + method.appendSchemaByField(
  33 + {
  34 + field: SchemaFiled.AGG,
  35 + label: '数据聚合功能',
  36 + component: 'Select',
  37 + defaultValue: AggregateDataEnum.NONE,
  38 + componentProps: {
  39 + getPopupContainer: () => document.body,
  40 + options: [
  41 + { label: '最小值', value: AggregateDataEnum.MIN },
  42 + { label: '最大值', value: AggregateDataEnum.MAX },
  43 + { label: '平均值', value: AggregateDataEnum.AVG },
  44 + { label: '求和', value: AggregateDataEnum.SUM },
  45 + { label: '计数', value: AggregateDataEnum.COUNT },
  46 + { label: '空', value: AggregateDataEnum.NONE },
  47 + ],
  48 + },
  49 + },
  50 + SchemaFiled.DATE_RANGE
  51 + );
  52 + method.appendSchemaByField(
  53 + {
  54 + field: SchemaFiled.INTERVAL,
  55 + label: '分组间隔',
  56 + component: 'Select',
  57 + dynamicRules: ({ model }) => {
  58 + return [
  59 + {
  60 + required: model[SchemaFiled.AGG] !== AggregateDataEnum.NONE,
  61 + message: '分组间隔为必填项',
  62 + type: 'number',
  63 + },
  64 + ];
  65 + },
  66 + ifShow({ values }) {
  67 + return values[SchemaFiled.AGG] !== AggregateDataEnum.NONE;
  68 + },
  69 + componentProps({ formModel, formActionType }) {
  70 + const options =
  71 + formModel[SchemaFiled.WAY] === QueryWay.LATEST
  72 + ? getPacketIntervalByValue(formModel[SchemaFiled.START_TS])
  73 + : getPacketIntervalByRange(formModel[SchemaFiled.DATE_RANGE]);
  74 + if (formModel[SchemaFiled.AGG] !== AggregateDataEnum.NONE) {
  75 + formActionType.setFieldsValue({ [SchemaFiled.LIMIT]: null });
  76 + }
  77 + return {
  78 + options,
  79 + getPopupContainer: () => document.body,
  80 + };
  81 + },
  82 + },
  83 + SchemaFiled.AGG
  84 + );
  85 + });
18 86
19 const [register, method] = useForm({ 87 const [register, method] = useForm({
20 schemas: formSchema(), 88 schemas: formSchema(),
@@ -33,21 +101,14 @@ @@ -33,21 +101,14 @@
33 const handleCancel = () => { 101 const handleCancel = () => {
34 // destory() 102 // destory()
35 }; 103 };
36 - const alarmForm = ref({ time: 2592000000, pageSize: 10 }); //默认30天  
37 const handleSubmit = async () => { 104 const handleSubmit = async () => {
38 - const { way, pageSize, startTs, endTs } = method.getFieldsValue();  
39 - if (way == 'timePeriod') {  
40 - alarmForm.value = {  
41 - time: new Date(endTs).getTime() - new Date(startTs).getTime(),  
42 - pageSize,  
43 - }; 105 + const values = method.getFieldsValue();
  106 + if (unref(fontId) == 'StatisticsComponent7') {
  107 + emit('getHistoryForm', values);
44 } else { 108 } else {
45 - alarmForm.value = {  
46 - time: startTs,  
47 - pageSize,  
48 - }; 109 + emit('getAlarmForm', values);
49 } 110 }
50 - emit('getAlarmForm', unref(alarmForm)); 111 +
51 await nextTick(); 112 await nextTick();
52 closeModal(); 113 closeModal();
53 }; 114 };
  1 +import { Ref, inject, provide } from 'vue';
  2 +
  3 +const SymbolKey = Symbol('history-info');
  4 +interface IHistory {
  5 + [key: string]: string;
  6 +}
  7 +
  8 +export interface HistoryContextType {
  9 + historyForm: Ref<IHistory> | any;
  10 + getHistoryForm: (value: any) => void;
  11 +}
  12 +
  13 +export const createHistoryContext = (options: HistoryContextType) => {
  14 + provide(SymbolKey, options);
  15 +};
  16 +
  17 +export const useHistoryContext = () => {
  18 + return inject<HistoryContextType>(SymbolKey) || ({} as Partial<HistoryContextType>);
  19 +};
@@ -25,13 +25,14 @@ @@ -25,13 +25,14 @@
25 import { ModalParamsType } from '/#/utils'; 25 import { ModalParamsType } from '/#/utils';
26 import { DataActionModeEnum } from '/@/enums/toolEnum'; 26 import { DataActionModeEnum } from '/@/enums/toolEnum';
27 import { HistoryTrendModal } from './components/HistoryTrendModal'; 27 import { HistoryTrendModal } from './components/HistoryTrendModal';
28 - import { alarmTimeModal } from './components/alarmTimeModal'; 28 + import { AlarmTimeModal } from './components/AlarmTimeModal';
29 import { watch } from 'vue'; 29 import { watch } from 'vue';
30 import { useRootSetting } from '/@/hooks/setting/useRootSetting'; 30 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
31 import { ThemeEnum } from '/@/enums/appEnum'; 31 import { ThemeEnum } from '/@/enums/appEnum';
32 import { createDataBoardContext } from './hooks/useDataBoardContext'; 32 import { createDataBoardContext } from './hooks/useDataBoardContext';
33 import { useSocket } from '/@/views/visual/packages/hook/socket/useSocket'; 33 import { useSocket } from '/@/views/visual/packages/hook/socket/useSocket';
34 import { createAlarmContext } from './hooks/useAlarmTime'; 34 import { createAlarmContext } from './hooks/useAlarmTime';
  35 + import { createHistoryContext } from './hooks/useHistoryForm';
35 36
36 const props = defineProps<{ 37 const props = defineProps<{
37 value?: Recordable; 38 value?: Recordable;
@@ -85,15 +86,46 @@ @@ -85,15 +86,46 @@
85 time: 2592000000, 86 time: 2592000000,
86 pageSize: 10, 87 pageSize: 10,
87 }); 88 });
88 - const getAlarmForm = (value) => {  
89 - alarmForm.value = {  
90 - time: value.time,  
91 - pageSize: value.pageSize,  
92 - };  
93 - };  
94 89
  90 + //告警发送数据
  91 + const getAlarmForm = (values) => {
  92 + const { way, pageSize, startTs, endTs } = values;
  93 + if (way == 'timePeriod')
  94 + alarmForm.value = {
  95 + time: new Date(endTs).getTime() - new Date(startTs).getTime(),
  96 + pageSize,
  97 + };
  98 + else
  99 + alarmForm.value = {
  100 + time: startTs,
  101 + pageSize,
  102 + };
  103 + };
95 createAlarmContext({ alarmForm: alarmForm, getAlarmForm }); 104 createAlarmContext({ alarmForm: alarmForm, getAlarmForm });
96 105
  106 + // 历史数据发送
  107 + const historyForm = ref({
  108 + startTs: 2592000000,
  109 + endTs: undefined,
  110 + agg: 'NONE',
  111 + limit: null,
  112 + interval: undefined,
  113 + way: 'latest',
  114 + });
  115 + const getHistoryForm = (values) => {
  116 + const { startTs, endTs, agg, limit, interval, way } = values;
  117 + historyForm.value = {
  118 + startTs,
  119 + endTs,
  120 + agg,
  121 + limit,
  122 + interval,
  123 + way,
  124 + };
  125 + console.log(values);
  126 + };
  127 + createHistoryContext({ historyForm: historyForm, getHistoryForm });
  128 +
97 const { send, close } = useSocket(dataSource); 129 const { send, close } = useSocket(dataSource);
98 130
99 createDataBoardContext({ send, close }); 131 createDataBoardContext({ send, close });
@@ -188,7 +220,11 @@ @@ -188,7 +220,11 @@
188 <HistoryTrendModal @register="registerTrendModal" /> 220 <HistoryTrendModal @register="registerTrendModal" />
189 221
190 <!-- 告警选择时间 --> 222 <!-- 告警选择时间 -->
191 - <alarmTimeModal @register="registerAlarmModal" @getAlarmForm="getAlarmForm" /> 223 + <AlarmTimeModal
  224 + @register="registerAlarmModal"
  225 + @getAlarmForm="getAlarmForm"
  226 + @getHistoryForm="getHistoryForm"
  227 + />
192 </section> 228 </section>
193 </template> 229 </template>
194 230
@@ -53,6 +53,7 @@ export interface ComponentInfo { @@ -53,6 +53,7 @@ export interface ComponentInfo {
53 icon: string; 53 icon: string;
54 iconColor: string; 54 iconColor: string;
55 showDeviceName: boolean; 55 showDeviceName: boolean;
  56 + showTime?: boolean;
56 gradientInfo: ComponentInfoGradientInfoType[]; 57 gradientInfo: ComponentInfoGradientInfoType[];
57 flowmeterConfig: FlowmeterConfigType; 58 flowmeterConfig: FlowmeterConfigType;
58 pointerColor?: string; 59 pointerColor?: string;
@@ -85,7 +85,7 @@ @@ -85,7 +85,7 @@
85 class="mt-4" 85 class="mt-4"
86 v-for="temp in item.items" 86 v-for="temp in item.items"
87 :key="temp.key" 87 :key="temp.key"
88 - @click="handleSelected(temp)" 88 + @click.capture="handleSelected(temp)"
89 :class="temp.key === props.checked?.componentKey ? '!border-2 !border-blue-500' : ''" 89 :class="temp.key === props.checked?.componentKey ? '!border-2 !border-blue-500' : ''"
90 > 90 >
91 <component :is="componentMap.get(temp.key)" v-bind="getBindConfig(temp.key)" /> 91 <component :is="componentMap.get(temp.key)" v-bind="getBindConfig(temp.key)" />