Merge branch 'fix/modifyTCP-add-field' into 'main_dev'

脚本管理tcp转换脚本添加脚本类型字段

See merge request yunteng/thingskit-front!740

@@ -48,6 +48,11 @@ export const aceEditorOptions = {
   enableEmmet: true,
 };
 
+const scriptTypeInfo = {
+  TRANSPORT_TCP_UP: '上行数据解析',
+  TRANSPORT_TCP_AUTH: '设备鉴权',
+};
+
 // 表格配置
 export const columns: BasicColumn[] = [
   {
@@ -68,6 +73,14 @@ export const columns: BasicColumn[] = [
     slots: { customRender: 'convertJs' },
   },
   {
+    title: '脚本类型',
+    dataIndex: 'scriptType',
+    width: 120,
+    format: (values) => {
+      return scriptTypeInfo[values];
+    },
+  },
+  {
     title: '备注',
     dataIndex: 'description',
     width: 120,

@@ -213,6 +213,7 @@
           </Tooltip>
           <Tooltip title="删除">
             <DeleteOutlined
+              v-show="dataSource.length > 1"
               @click="handleDelete(item)"
               class="cursor-pointer text-lg !leading-32px"
             />

@@ -15,6 +15,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.OPEN_COLOR]: '#00F43D',
   [ComponentConfigFieldEnum.CLOSE_COLOR]: '#FF0000',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -30,6 +30,12 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -10,6 +10,7 @@
   import { ReceiveAlarmDataCmdsMessageType } from '../../../hook/socket/useSocket.type';
   import { useDataBoardContext } from '/@/views/visual/palette/hooks/useDataBoardContext';
   import { useAlarmContext } from '/@/views/visual/palette/hooks/useAlarmTime';
+  import { getMessage } from '../config';
 
   interface IStatus {
     text: string;
@@ -20,6 +21,7 @@
     id: string;
     deviceName: string;
     showDeviceName: boolean;
+    showTime: boolean;
     status: IStatus;
     time: number;
   }
@@ -51,7 +53,7 @@
   const getDesign = computed(() => {
     const { persetOption = {}, option } = props.config;
     const { dataSource } = option;
-    const { showDeviceName: presetShowDeviceName } = persetOption;
+    const { showDeviceName: presetShowDeviceName, showTime: persetShowTime } = persetOption;
 
     return {
       dataSource: dataSource?.map((item) => {
@@ -60,6 +62,7 @@
           id: deviceId,
           deviceName: deviceRename || deviceName,
           showDeviceName: componentInfo.showDeviceName ?? presetShowDeviceName,
+          showTime: componentInfo.showTime ?? persetShowTime,
         };
       }),
     };
@@ -71,67 +74,6 @@
     }, 4000);
   };
 
-  // 发送websocket的格式
-  const getMessage = (cmdId: number) => {
-    const message = {
-      alarmDataCmds: [
-        {
-          query: {
-            entityFilter: {
-              type: 'entityList',
-              resolveMultiple: true,
-              entityType: 'DEVICE',
-              entityList: unref(getDesign).dataSource?.map((item) => item.id),
-            },
-            pageLink: {
-              page: 0,
-              pageSize: unref(alarmForm)?.pageSize,
-              textSearch: null,
-              searchPropagatedAlarms: false,
-              statusList: [],
-              severityList: [],
-              typeList: [],
-              sortOrder: {
-                key: {
-                  key: 'createdTime',
-                  type: 'ALARM_FIELD',
-                },
-                direction: 'DESC',
-              },
-              timeWindow: unref(alarmForm)?.time,
-            },
-            alarmFields: [
-              {
-                type: 'ALARM_FIELD',
-                key: 'createdTime',
-              },
-              {
-                type: 'ALARM_FIELD',
-                key: 'originator',
-              },
-              {
-                type: 'ALARM_FIELD',
-                key: 'type',
-              },
-              {
-                type: 'ALARM_FIELD',
-                key: 'severity',
-              },
-              {
-                type: 'ALARM_FIELD',
-                key: 'status',
-              },
-            ],
-            entityFields: [],
-            latestValues: [],
-          },
-          cmdId,
-        },
-      ],
-    };
-    return message;
-  };
-
   const alarmStatusList = ref<IAlarmStatusList[]>([
     {
       id: '1',
@@ -139,6 +81,7 @@
       status: { text: '紧急', color: 'alarm_state_major' },
       time: 1689574726,
       showDeviceName: true,
+      showTime: true,
     },
   ]);
 
@@ -147,14 +90,14 @@
   watch(
     () => alarmForm?.value,
     () => {
-      send?.(JSON.stringify(getMessage(unref(currentCmdId))));
+      send?.(JSON.stringify(getMessage(unref(currentCmdId), unref(getDesign), unref(alarmForm))));
     },
     { immediate: false }
   );
 
   const transformMessage = (cmdId: number) => {
     currentCmdId.value = cmdId;
-    send?.(JSON.stringify(getMessage(cmdId)));
+    send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm))));
   };
 
   const getReduce = (data) => {
@@ -185,6 +128,7 @@
         id: item.id,
         deviceName: item.deviceName,
         showDeviceName: item.showDeviceName,
+        showTime: item.showTime,
         status: { text: '', color: '' },
         time: 0,
       };
@@ -215,23 +159,20 @@
 
 <template>
   <main :style="getScale" class="w-full h-full flex justify-center items-center">
-    <!-- <DeviceName :config="config" class="text-center" /> -->
-    <div
-      v-for="item in alarmStatusList"
-      :key="item.id"
-      class="flex flex-col justify-center items-center"
-    >
-      <div class="text-gray-500 text-sm truncate"
-        >{{
-          item.status.text
-            ? item.showDeviceName
-              ? item.deviceName + '-'
-              : ''
-            : '当前设备未发现告警'
-        }}{{ item.status.text }}</div
-      >
-      <div :class="item.status.color"></div>
-      <UpdateTime :time="item.time" />
+    <div v-for="item in alarmStatusList" :key="item.id" class="flex flex-col items-center">
+      <div class="flex justify-center items-center flex-col">
+        <div class="text-gray-500 text-sm truncate"
+          >{{
+            item.status.text
+              ? item.showDeviceName
+                ? item.deviceName + '-'
+                : ''
+              : '当前设备未发现告警'
+          }}{{ item.status.text }}</div
+        >
+        <div :class="item.status.color"></div>
+      </div>
+      <UpdateTime v-show="item.showTime" :time="item.time" />
     </div>
   </main>
 </template>

@@ -2,16 +2,16 @@ import { FormSchema } from '/@/components/Form';
 import { DataSourceField } from '../../../config/common.config';
 import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
 import { findDictItemByCode } from '/@/api/system/dict';
-import { getDeviceProfile } from '/@/api/alarm/position';
-import { useSelectWidgetMode } from '/@/views/visual/dataSourceBindPanel/useContext';
-import { DataActionModeEnum } from '/@/enums/toolEnum';
-import { unref } from 'vue';
+// import { getDeviceProfile } from '/@/api/alarm/position';
+// import { useSelectWidgetMode } from '/@/views/visual/dataSourceBindPanel/useContext';
+// import { DataActionModeEnum } from '/@/enums/toolEnum';
+// import { unref } from 'vue';
 import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
 import { MasterDeviceList } from '/@/api/dataBoard/model';
 
 export const formSchemas = (): FormSchema[] => {
-  const mode = useSelectWidgetMode();
-  const isUpdate = unref(mode) === DataActionModeEnum.UPDATE;
+  // const mode = useSelectWidgetMode();
+  // const isUpdate = unref(mode) === DataActionModeEnum.UPDATE;
   return [
     {
       field: DataSourceField.DEVICE_NAME,
@@ -49,41 +49,41 @@ export const formSchemas = (): FormSchema[] => {
         };
       },
     },
-    {
-      field: DataSourceField.DEVICE_PROFILE_ID,
-      component: 'ApiSelect',
-      label: '产品',
-      colProps: { span: 8 },
-      rules: [{ required: true, message: '产品为必填项' }],
-      componentProps: ({ formActionType, formModel }) => {
-        const { setFieldsValue } = formActionType;
-        const deviceType = formModel[DataSourceField.DEVICE_TYPE];
-        return {
-          api: async () => {
-            if (!deviceType) return [];
-            const list = await getDeviceProfile(deviceType);
-            if (isUpdate) {
-              const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
-              const record = list.find((item) => item.id === deviceProfileId);
-              setFieldsValue({ [DataSourceField.TRANSPORT_TYPE]: record?.transportType });
-            }
-            return list;
-          },
-          labelField: 'name',
-          valueField: 'id',
-          placeholder: '请选择产品',
-          onChange: (_, option = {} as Record<'transportType', string>) => {
-            setFieldsValue({
-              [DataSourceField.DEVICE_ID]: null,
-              [DataSourceField.ATTRIBUTE]: null,
-              [DataSourceField.ATTRIBUTE_NAME]: null,
-              [DataSourceField.TRANSPORT_TYPE]: option[DataSourceField.TRANSPORT_TYPE],
-            });
-          },
-          getPopupContainer: () => document.body,
-        };
-      },
-    },
+    // {
+    //   field: DataSourceField.DEVICE_PROFILE_ID,
+    //   component: 'ApiSelect',
+    //   label: '产品',
+    //   colProps: { span: 8 },
+    //   rules: [{ required: true, message: '产品为必填项' }],
+    //   componentProps: ({ formActionType, formModel }) => {
+    //     const { setFieldsValue } = formActionType;
+    //     const deviceType = formModel[DataSourceField.DEVICE_TYPE];
+    //     return {
+    //       api: async () => {
+    //         if (!deviceType) return [];
+    //         const list = await getDeviceProfile(deviceType);
+    //         if (isUpdate) {
+    //           const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
+    //           const record = list.find((item) => item.id === deviceProfileId);
+    //           setFieldsValue({ [DataSourceField.TRANSPORT_TYPE]: record?.transportType });
+    //         }
+    //         return list;
+    //       },
+    //       labelField: 'name',
+    //       valueField: 'id',
+    //       placeholder: '请选择产品',
+    //       onChange: (_, option = {} as Record<'transportType', string>) => {
+    //         setFieldsValue({
+    //           [DataSourceField.DEVICE_ID]: null,
+    //           [DataSourceField.ATTRIBUTE]: null,
+    //           [DataSourceField.ATTRIBUTE_NAME]: null,
+    //           [DataSourceField.TRANSPORT_TYPE]: option[DataSourceField.TRANSPORT_TYPE],
+    //         });
+    //       },
+    //       getPopupContainer: () => document.body,
+    //     };
+    //   },
+    // },
     {
       field: DataSourceField.ORIGINATION_ID,
       component: 'OrgTreeSelect',
@@ -131,6 +131,7 @@ export const formSchemas = (): FormSchema[] => {
                   deviceProfileId,
                   deviceType,
                 });
+                console.log(data, 'data');
                 if (data)
                   return data.map((item) => ({
                     ...item,

@@ -128,66 +128,6 @@
     };
   });
 
-  // const getMessage = (cmdId: number) => {
-  //   const message = {
-  //     alarmDataCmds: [
-  //       {
-  //         query: {
-  //           entityFilter: {
-  //             type: 'entityList',
-  //             resolveMultiple: true,
-  //             entityType: 'DEVICE',
-  //             entityList: unref(getDesign).dataSource?.map((item) => item.id),
-  //           },
-  //           pageLink: {
-  //             page: 0,
-  //             pageSize: unref(alarmForm)?.pageSize,
-  //             textSearch: null,
-  //             searchPropagatedAlarms: false,
-  //             statusList: [],
-  //             severityList: [],
-  //             typeList: [],
-  //             sortOrder: {
-  //               key: {
-  //                 key: 'createdTime',
-  //                 type: 'ALARM_FIELD',
-  //               },
-  //               direction: 'DESC',
-  //             },
-  //             timeWindow: unref(alarmForm)?.time,
-  //           },
-  //           alarmFields: [
-  //             {
-  //               type: 'ALARM_FIELD',
-  //               key: 'createdTime',
-  //             },
-  //             {
-  //               type: 'ALARM_FIELD',
-  //               key: 'originator',
-  //             },
-  //             {
-  //               type: 'ALARM_FIELD',
-  //               key: 'type',
-  //             },
-  //             {
-  //               type: 'ALARM_FIELD',
-  //               key: 'severity',
-  //             },
-  //             {
-  //               type: 'ALARM_FIELD',
-  //               key: 'status',
-  //             },
-  //           ],
-  //           entityFields: [],
-  //           latestValues: [],
-  //         },
-  //         cmdId,
-  //       },
-  //     ],
-  //   };
-  //   return message;
-  // };
-
   const { alarmForm } = useAlarmContext();
 
   watch(

@@ -44,7 +44,6 @@
   ]);
 
   const getDesign = computed(() => {
-    console.log(props.config.option, 'option');
     const { persetOption = {}, option } = props.config;
     const { dataSource = [] } = option || {};
     const {
@@ -75,7 +74,6 @@
 
   const { loading, sendCommand } = useSendCommand();
   const handleChange = async (index: number, checked: Boolean) => {
-    console.log(props.config.option);
     const { heightPx, itemHeightRatio, itemWidthRatio, mode, widthPx, dataSource } =
       props.config.option;
 
@@ -87,7 +85,6 @@
       mode,
       widthPx,
     } as DataSource;
-    console.log(data, 'data', checked);
 
     const flag = await sendCommand(data, checked);
     if (!flag) controlList.value[index].checked = !checked;
@@ -105,10 +102,7 @@
   );
 
   const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => {
-    console.log(unref(getDesign).dataSource, 'dataSource');
-
-    forEachGroupMessage(message, deviceId, attribute, (attribute, value, time) => {
-      console.log(attribute, value, time);
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
       controlList.value.forEach((item) => {
         if (item.id === deviceId && item.attribute === attribute) {
           item.checked = Boolean(getNumberValue(value));

@@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('CircleFlowmeter');
 
 export const CircleFlowmeterConfig: ConfigType = {
   ...componentKeys,
-  title: '流量计2',
+  title: '计量计2',
   package: PackagesCategoryEnum.FLOWMETER,
 };

@@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('RectFlowmeter');
 
 export const RectFlowmeteConfig: ConfigType = {
   ...componentKeys,
-  title: '流量计1',
+  title: '计量计1',
   package: PackagesCategoryEnum.FLOWMETER,
 };

@@ -22,6 +22,7 @@ export enum GradientColor {
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
   [ComponentConfigFieldEnum.UNIT]: '℃',
   [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
   [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5',

@@ -22,18 +22,18 @@
         defaultValue: option.fontColor,
       },
       {
-        field: ComponentConfigFieldEnum.UNIT,
-        label: '数值单位',
-        component: 'Input',
-        defaultValue: option.unit,
-      },
-      {
         field: ComponentConfigFieldEnum.POINTER_COLOR,
         label: '指针颜色',
         component: 'ColorPicker',
         changeEvent: 'update:value',
         defaultValue: option.pointerColor,
       },
+      {
+        field: ComponentConfigFieldEnum.UNIT,
+        label: '数值单位',
+        component: 'Input',
+        defaultValue: option.unit,
+      },
       // {
       //   field: ComponentConfigFieldEnum.INSTRUMENT_PANEL_WIDTH,
       //   label: '仪表盘宽度',
@@ -48,6 +48,13 @@
         defaultValue: option.showDeviceName,
       },
       {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
+
+      {
         field: ComponentConfigFieldEnum.FIRST_PHASE_COLOR,
         label: '起始颜色',
         component: 'ColorPicker',
@@ -88,13 +95,14 @@
       fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
       unit: item[ComponentConfigFieldEnum.UNIT],
       showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
+      showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
       pointerColor: item[ComponentConfigFieldEnum.POINTER_COLOR],
     } as ComponentInfo;
   };
 
   const setFormValues = (data: Recordable) => {
     // return setFieldsValue(data);
-    const { gradientInfo, unit, fontColor, showDeviceName, pointerColor } = data;
+    const { gradientInfo, unit, fontColor, showDeviceName, pointerColor, showTime } = data;
     const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
     const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
 
@@ -102,6 +110,7 @@
       [ComponentConfigFieldEnum.UNIT]: unit,
       [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
       [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
+      [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
       [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0,
       [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
       [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,

@@ -30,8 +30,9 @@
       pointerColor: presetPointerColor,
       instrumentPanelColor: presetInstrumentPanelColor,
       gradientInfo: presetGradientInfo,
+      showTime: persetShowTime,
     } = persetOption || {};
-    const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo } =
+    const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo, showTime } =
       componentInfo || {};
     return {
       unit: unit ?? presetUnit,
@@ -40,6 +41,7 @@
       pointerColor: pointerColor ?? presetPointerColor,
       instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
       gradientInfo: gradientInfo ?? presetGradientInfo,
+      showTime: showTime ?? persetShowTime,
     };
   });
 
@@ -204,12 +206,15 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" />
     <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
     <div class="text-gray-500 text-xs text-center truncate">{{
       getDesign.attribute || '湿度'
     }}</div>
-    <UpdateTime :time="time" />
+    <UpdateTime v-if="getDesign.showTime" :time="time" />
   </main>
 </template>

@@ -20,6 +20,7 @@ export enum GradientColor {
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
   [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: false,
   [ComponentConfigFieldEnum.UNIT]: '℃',
   [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',

@@ -22,18 +22,6 @@
         defaultValue: option.fontColor,
       },
       {
-        field: ComponentConfigFieldEnum.UNIT,
-        label: '数值单位',
-        component: 'Input',
-        defaultValue: option.unit,
-      },
-      {
-        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
-        label: '显示设备名称',
-        component: 'Checkbox',
-        defaultValue: option.showDeviceName,
-      },
-      {
         field: ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE,
         label: '显示进度条圆形',
         component: 'Checkbox',
@@ -53,6 +41,24 @@
         changeEvent: 'update:value',
         defaultValue: GradientColor.SECOND,
       },
+      {
+        field: ComponentConfigFieldEnum.UNIT,
+        label: '数值单位',
+        component: 'Input',
+        defaultValue: option.unit,
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,
@@ -80,13 +86,14 @@
       fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
       unit: item[ComponentConfigFieldEnum.UNIT],
       showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
+      showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
       progressBarCircle: item[ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE],
     } as ComponentInfo;
   };
 
   const setFormValues = (data: Recordable) => {
     // return setFieldsValue(data);
-    const { gradientInfo, unit, fontColor, showDeviceName, progressBarCircle } = data;
+    const { gradientInfo, unit, fontColor, showDeviceName, progressBarCircle, showTime } = data;
     const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
     const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
 
@@ -94,6 +101,7 @@
       [ComponentConfigFieldEnum.UNIT]: unit,
       [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
       [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
+      [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
       [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0,
       [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
       [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,

@@ -31,9 +31,17 @@
       instrumentPanelColor: presetInstrumentPanelColor,
       progressBarCircle: presetProgressBarCircle,
       gradientInfo: presetGradientInfo,
+      showTime: persetShowTime,
     } = persetOption || {};
-    const { unit, fontColor, pointerColor, gradientInfo, progressBarCircle, instrumentPanelColor } =
-      componentInfo || {};
+    const {
+      unit,
+      fontColor,
+      pointerColor,
+      gradientInfo,
+      progressBarCircle,
+      instrumentPanelColor,
+      showTime,
+    } = componentInfo || {};
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
@@ -42,6 +50,7 @@
       instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
       progressBarCircle: progressBarCircle ?? presetProgressBarCircle,
       gradientInfo: gradientInfo ?? presetGradientInfo,
+      showTime: showTime ?? persetShowTime,
     };
   });
 
@@ -206,12 +215,15 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" />
     <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
     <div class="text-gray-500 text-xs text-center truncate">{{
       getDesign.attribute || '湿度'
     }}</div>
-    <UpdateTime :time="time" />
+    <UpdateTime v-if="getDesign.showTime" :time="time" />
   </main>
 </template>

@@ -3,7 +3,7 @@
   import { unref, ref, onMounted, computed, nextTick } from 'vue';
   import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
-  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
@@ -19,7 +19,7 @@
 
   const chartInstance = ref<Nullable<ECharts>>(null);
 
-  const time = ref<Nullable<number>>(null);
+  // const time = ref<Nullable<number>>(null);
 
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
@@ -276,11 +276,11 @@
   const { forEachGroupMessage } = useReceiveMessage();
   const { getNumberValue } = useReceiveValue();
   const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
-    forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
       series.value.forEach((item) => {
         if (item.id === deviceId && item.attribute === attribute) {
           item.value = getNumberValue(value);
-          time.value = timespan;
+          // time.value = timespan;
         }
       });
     });
@@ -334,6 +334,6 @@
   <main class="w-full h-full flex flex-col justify-center items-center">
     <DeviceName :config="config" />
     <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
-    <UpdateTime :time="time" />
+    <!-- <UpdateTime :time="time" /> -->
   </main>
 </template>

@@ -20,7 +20,8 @@ export enum GradientColor {
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
-  [ComponentConfigFieldEnum.UNIT]: '℃',
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
+  [ComponentConfigFieldEnum.UNIT]: 'kw',
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -26,6 +26,12 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,
@@ -41,17 +47,19 @@
       fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
       unit: item[ComponentConfigFieldEnum.UNIT],
       showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
+      showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
     } as ComponentInfo;
   };
 
   const setFormValues = (data: Recordable) => {
     // return setFieldsValue(data);
-    const { unit, fontColor, showDeviceName } = data;
+    const { unit, fontColor, showDeviceName, showTime } = data;
 
     const value = {
       [ComponentConfigFieldEnum.UNIT]: unit,
       [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
       [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
+      [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
     };
     return setFieldsValue(value);
   };

@@ -29,8 +29,9 @@
       pointerColor: presetPointerColor,
       instrumentPanelColor: presetInstrumentPanelColor,
       gradientInfo: presetGradientInfo,
+      showTime: persetShowTime,
     } = persetOption || {};
-    const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo } =
+    const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo, showTime } =
       componentInfo || {};
     return {
       unit: unit ?? presetUnit,
@@ -39,6 +40,7 @@
       pointerColor: pointerColor ?? presetPointerColor,
       instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
       gradientInfo: gradientInfo ?? presetGradientInfo,
+      showTime: showTime ?? persetShowTime,
     };
   });
 
@@ -189,12 +191,15 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" />
     <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
     <div class="text-gray-500 text-xs text-center truncate">{{
-      getDesign.attribute || '湿度'
+      getDesign.attribute || '速度'
     }}</div>
-    <UpdateTime :time="time" />
+    <UpdateTime v-if="getDesign.showTime" :time="time" />
   </main>
 </template>

@@ -13,6 +13,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.OPEN_COLOR]: '#30f230',
   [ComponentConfigFieldEnum.CLOSE_COLOR]: '#eeeeee',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -25,10 +25,10 @@
         },
       },
       {
-        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
-        label: '显示设备名称',
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
         component: 'Checkbox',
-        defaultValue: option.showDeviceName,
+        defaultValue: option.showTime,
       },
     ],
     showActionButtonGroup: false,

@@ -24,15 +24,17 @@
       openColor: persetOpenColor,
       closeColor: persetCloseColor,
       showDeviceName: persetShowDeviceName,
+      showTime: persetShowTime,
     } = persetOption || {};
     const { componentInfo, attribute, attributeName, attributeRename } = option;
 
-    const { openColor, closeColor, showDeviceName } = componentInfo || {};
+    const { openColor, closeColor, showDeviceName, showTime } = componentInfo || {};
     return {
       openColor: openColor ?? persetOpenColor,
       closeColor: closeColor ?? persetCloseColor,
       showDeviceName: showDeviceName ?? persetShowDeviceName,
       attribute: attributeRename || attributeName || attribute,
+      showTime: showTime ?? persetShowTime,
     };
   });
 
@@ -60,10 +62,14 @@
 </script>
 
 <template>
-  <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
+  <main
+    :style="getScale"
+    class="w-full h-full flex flex-col justify-center items-center"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" class="text-center" />
 
-    <div class="flex-1 flex justify-center items-center flex-col">
+    <div class="flex-1 flex justify-center items-center flex-col" :style="getScale">
       <div
         :style="{
           '--open-color': getDesign.openColor,
@@ -73,7 +79,7 @@
       ></div>
       <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute }}</div>
     </div>
-    <UpdateTime :time="time" />
+    <UpdateTime v-if="getDesign.showTime" :time="time" />
   </main>
 </template>
 <style lang="less" scoped>

@@ -15,6 +15,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.ICON_CLOSE]: 'dianyuandianya',
   [ComponentConfigFieldEnum.ICON_COLOR_CLOSE]: '#CCCCCC',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -52,6 +52,12 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -25,11 +25,12 @@
       fontColor: persetFontColor,
       iconClose: persetIconCLose,
       iconColorClose: persetIconColorClose,
+      showTime: persetShowTime,
     } = persetOption;
 
     const { componentInfo, attributeRename } = option;
 
-    const { icon, iconColor, fontColor, unit, iconClose, iconColorClose, attributeName } =
+    const { icon, iconColor, fontColor, unit, iconClose, iconColorClose, attributeName, showTime } =
       componentInfo || {};
     return {
       iconColor: iconColor || persetIconColor,
@@ -39,6 +40,7 @@
       attribute: attributeRename || attributeName,
       iconClose: iconClose || persetIconCLose,
       iconColorClose: iconColorClose || persetIconColorClose,
+      showTime: showTime ?? persetShowTime,
     };
   });
 
@@ -67,6 +69,6 @@
       />
       <div class="text-gray-500 text-sm truncate m-2">{{ getDesign.attribute || '温度' }}</div>
     </div>
-    <UpdateTime :time="time" />
+    <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>
 </template>

@@ -3,7 +3,7 @@
   import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
   import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
-  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
@@ -180,6 +180,6 @@
   <main class="w-full h-full flex flex-col justify-center items-center">
     <DeviceName :config="config" />
     <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
-    <UpdateTime :time="time" />
+    <!-- <UpdateTime :time="time" /> -->
   </main>
 </template>

@@ -3,7 +3,7 @@
   import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
   import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
-  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
@@ -181,6 +181,6 @@
   <main class="w-full h-full flex flex-col justify-center items-center">
     <DeviceName :config="config" />
     <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
-    <UpdateTime :time="time" />
+    <!-- <UpdateTime :time="time" /> -->
   </main>
 </template>

@@ -3,7 +3,7 @@
   import { unref, ref, onMounted, nextTick, toRaw, computed } from 'vue';
   import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
-  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useIntervalFn } from '@vueuse/core';
@@ -21,7 +21,7 @@
   const chartRefEl = ref<Nullable<HTMLDivElement>>(null);
 
   const chartInstance = ref<Nullable<ECharts>>(null);
-  const time = ref<Nullable<number>>(null);
+  // const time = ref<Nullable<number>>(null);
 
   const updateInterval = ref<number>(1000); //默认每秒更新一次
   const maxDataPoints = ref<number>(10); //默认每秒显示10个数据点
@@ -91,7 +91,6 @@
     return {
       dataSource: dataSource?.map((item) => {
         const { unit, showDeviceName, fontColor } = item.componentInfo || {};
-        console.log(item, 'item');
         const { attribute, attributeRename, deviceId, attributeName, deviceName, deviceRename } =
           item;
         return {
@@ -203,6 +202,6 @@
   <main class="w-full h-full flex flex-col justify-center items-center">
     <DeviceName :config="config" />
     <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
-    <UpdateTime :time="time" />
+    <!-- <UpdateTime :time="time" /> -->
   </main>
 </template>

@@ -3,7 +3,6 @@
   import { ComponentPropsConfigType } from '../../../index.type';
   import { Progress } from 'ant-design-vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
-  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
   import { buildUUID } from '/@/utils/uuid';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
@@ -127,7 +126,7 @@
         <Progress :strokeColor="item.backgroundColor" :percent="item.value" :showInfo="false" />
       </div>
     </div>
-    <UpdateTime :time="time" />
+    <!-- <UpdateTime :time="time" /> -->
   </main>
 </template>
 <style lang="less" scoped>

@@ -3,7 +3,6 @@
   import { option } from './config';
   import { ref, unref } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
-  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { computed } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
@@ -118,6 +117,6 @@
         <span>{{ item.unit }} </span>
       </h1>
     </div>
-    <UpdateTime :time="time" />
+    <!-- <UpdateTime :time="time" /> -->
   </main>
 </template>

@@ -19,6 +19,7 @@ export enum ComponentConfigFieldEnum {
   SECOND_PHASE_VALUE = 'secondPhaseValue',
   THIRD_PHASE_VALUE = 'thirdPhaseValue',
   SHOW_DEVICE_NAME = 'showDeviceName',
+  SHOW_TIME = 'showTime',
   GRADIENT_INFO = 'gradientInfo',
 
   FLOWMETER_CONFIG = 'flowmeterConfig',

@@ -19,7 +19,7 @@ export enum PackagesCategoryNameEnum {
   // PICTURE = '图片组件',
   CONTROL = '控制组件',
   MAP = '地图组件',
-  FLOWMETER = '流量计',
+  FLOWMETER = '计量计',
   STATISTICS = '统计',
   ALARM = '告警',
   OTHER = '其他',

@@ -53,6 +53,7 @@ export interface ComponentInfo {
   icon: string;
   iconColor: string;
   showDeviceName: boolean;
+  showTime?: boolean;
   gradientInfo: ComponentInfoGradientInfoType[];
   flowmeterConfig: FlowmeterConfigType;
   pointerColor?: string;

@@ -85,7 +85,7 @@
             class="mt-4"
             v-for="temp in item.items"
             :key="temp.key"
-            @click="handleSelected(temp)"
+            @click.capture="handleSelected(temp)"
             :class="temp.key === props.checked?.componentKey ? '!border-2 !border-blue-500' : ''"
           >
             <component :is="componentMap.get(temp.key)" v-bind="getBindConfig(temp.key)" />