Merge branch 'fix/DEFECT-1389' into 'main_dev'

Fix/修改看板管理未显示更新时间,物模型未显示名称

See merge request yunteng/thingskit-front!692

 <script lang="ts" setup>
-  import { computed, ref, watch } from 'vue';
+  import { computed, ref, toRaw, watch } from 'vue';
   import { BasicInfoForm } from './components/BasicInfoForm';
   import { ModalParamsType } from '/#/utils';
   import { BasicModal, useModalInner } from '/@/components/Modal';
@@ -134,12 +134,13 @@
           oldCategory !== category &&
           firstEnter;
 
-        firstEnter = true;
-
         dataSource.value = unref(dataSource).map((item) => ({
           ...item,
           ...(needReset ? { attribute: null } : {}),
-          componentInfo: { ...unref(getComponentConfig).persetOption, ...item.componentInfo },
+          componentInfo: {
+            ...toRaw(unref(getComponentConfig).persetOption),
+            ...(firstEnter ? {} : item.componentInfo),
+          },
         }));
 
         if ((window as any).requestIdleCallback as unknown as boolean) {
@@ -154,6 +155,8 @@
             setFormValues({ dataSource: unref(dataSource) } as WidgetDataType);
           }, 500);
         }
+
+        firstEnter = true;
       }
     }
   );

@@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('LateralNumericalControl');
 
 export const LateralNumericalControlConfig: ConfigType = {
   ...componentKeys,
-  title: '控制组件1',
+  title: '控制组件4',
   package: PackagesCategoryEnum.CONTROL,
 };

@@ -152,7 +152,9 @@
     unref(getDesign).dataSource.map((item, index) => ({
       value: 30,
       name: `${
-        item.showDeviceName ? item.deviceRename || item.deviceName + '-' + item.attribute : ''
+        item.showDeviceName
+          ? (item.deviceRename || item.deviceName) + '-' + (item.attributeRename || item.attribute)
+          : ''
       }`,
       attribute: item.attribute,
       id: item.id,
@@ -274,10 +276,11 @@
   const { forEachGroupMessage } = useReceiveMessage();
   const { getNumberValue } = useReceiveValue();
   const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
-    forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
       series.value.forEach((item) => {
         if (item.id === deviceId && item.attribute === attribute) {
           item.value = getNumberValue(value);
+          time.value = timespan;
         }
       });
     });

+import cloneDeep from 'lodash-es/cloneDeep';
+import { SwitchSignalLightConfig } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '/@/views/visual/packages/index.type';
+import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
+import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+
+export const option: PublicPresetOptions = {
+  [ComponentConfigFieldEnum.OPEN_COLOR]: '#30f230',
+  [ComponentConfigFieldEnum.CLOSE_COLOR]: '#eeeeee',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = SwitchSignalLightConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(SwitchSignalLightConfig);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

+<script lang="ts" setup>
+  import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import { option } from './config';
+
+  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: [
+      {
+        field: ComponentConfigFieldEnum.OPEN_COLOR,
+        label: 'ON颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        componentProps: {
+          defaultValue: option.openColor,
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.CLOSE_COLOR,
+        label: 'OFF颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        componentProps: {
+          defaultValue: option.closeColor,
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+    ],
+    showActionButtonGroup: false,
+    labelWidth: 120,
+    baseColProps: {
+      span: 12,
+    },
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (data: Recordable) => {
+    return setFieldsValue(data);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+<script lang="ts" setup>
+  import { commonDataSourceSchemas } from '../../../config/common.config';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (record: Recordable) => {
+    return setFieldsValue(record);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    validate,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+// import { ComponentEnum, ComponentNameEnum } from '../index.type';
+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('SwitchSignalLight');
+export const SwitchSignalLightConfig: ConfigType = {
+  ...componentKeys,
+  // title: ComponentNameEnum.TEXT_COMPONENT_1,
+  title: '开关量信号灯',
+  package: PackagesCategoryEnum.OTHER,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
+  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { computed } from 'vue';
+  import { ref, onMounted, unref } from 'vue';
+  import { useIntervalFn } from '@vueuse/core';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const isOpenClose = ref<boolean>(true);
+
+  const getDesign = computed(() => {
+    const { persetOption = {}, option } = props.config;
+    const {
+      openColor: persetOpenColor,
+      closeColor: persetCloseColor,
+      showDeviceName: persetShowDeviceName,
+    } = persetOption || {};
+    const { componentInfo } = option;
+
+    const { openColor, closeColor, showDeviceName } = componentInfo || {};
+    return {
+      openColor: openColor ?? persetOpenColor,
+      closeColor: closeColor ?? persetCloseColor,
+      showDeviceName: showDeviceName ?? persetShowDeviceName,
+    };
+  });
+
+  const randomFn = () => {
+    useIntervalFn(() => {
+      isOpenClose.value = !unref(isOpenClose);
+    }, 2000);
+  };
+  const { getNumberValue } = useReceiveValue();
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    const [_, value] = latest;
+    isOpenClose.value = Boolean(getNumberValue(value));
+  };
+
+  onMounted(() => {
+    !props.config.option.uuid && randomFn();
+  });
+
+  useDataFetch(props, updateFn);
+
+  const { getScale } = useComponentScale(props);
+</script>
+
+<template>
+  <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
+    <DeviceName :config="config" class="text-center" />
+    <div
+      :style="{
+        '--open-color': getDesign.openColor,
+        '--close-color': getDesign.closeColor,
+      }"
+      :class="isOpenClose ? 'switch_open' : 'switch_close'"
+    ></div>
+  </main>
+</template>
+<style lang="less" scoped>
+  .switch_open {
+    background: var(--open-color);
+    box-shadow: var(--open-color) 0 0 10px 3px;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin: 10px 0;
+  }
+
+  .switch_close {
+    background-color: var(--close-color);
+    box-shadow: none;
+    width: 42.023px;
+    height: 42.023px;
+    border-radius: 50%;
+    margin: 10px 0;
+  }
+</style>

 import { MonitorVideoConfig } from './MonitorVideo';
 import { PictureConfig } from './Picture';
+import { SwitchSignalLightConfig } from './SwitchSignalLight';
 
-export const OtherList = [MonitorVideoConfig, PictureConfig];
+export const OtherList = [MonitorVideoConfig, PictureConfig, SwitchSignalLightConfig];

@@ -19,7 +19,7 @@ export enum GradientColor {
 }
 export const option: PublicPresetOptions = {
   multipleDataSourceComponent: true,
-  [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#5470c6',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.UNIT]: '℃',
 };

@@ -59,12 +59,23 @@
     unref(getDesign).dataSource.map((item) => ({
       value: 0,
       name: `${
-        item.showDeviceName ? item.deviceRename || item.deviceName + '-' + item.attribute : ''
+        item.showDeviceName
+          ? (item.deviceRename || item.deviceName) + '-' + (item.attributeRename || item.attribute)
+          : ''
       }`,
       attribute: item.attribute,
       id: item.id,
+      itemStyle: {
+        color: item.fontColor,
+      },
+      tooltip: {
+        valueFormatter(value) {
+          return `${value} ${item.unit ?? ''}`;
+        },
+      },
     }))
   );
+  // console.log(unref(series), 'series');
 
   const options = (): EChartsOption => {
     // getStageColor(gradientInfo);
@@ -133,10 +144,11 @@
   const { forEachGroupMessage } = useReceiveMessage();
   const { getNumberValue } = useReceiveValue();
   const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
-    forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
       series.value.forEach((item) => {
         if (item.id === deviceId && item.attribute === attribute) {
           item.value = getNumberValue(value);
+          time.value = timespan;
         }
       });
     });

@@ -19,7 +19,7 @@ export enum GradientColor {
 }
 export const option: PublicPresetOptions = {
   multipleDataSourceComponent: true,
-  [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#5470c6',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.UNIT]: '℃',
 };

@@ -133,15 +133,10 @@
   const series = ref(
     unref(getDesign).dataSource.map((item) => ({
       value: 0,
-      // name: `${
-      //   item.showDeviceName
-      //     ? item.deviceRename
-      //       ? item.deviceRename
-      //       : item.deviceName + '-' + item.attribute
-      //     : ''
-      // }`,
       name: `${
-        item.showDeviceName ? item.deviceRename || item.deviceName + '-' + item.attribute : ''
+        item.showDeviceName
+          ? (item.deviceRename || item.deviceName) + '-' + (item.attributeRename || item.attribute)
+          : ''
       }`,
       itemStyle: { color: item.fontColor },
       attribute: item.attribute,
@@ -155,10 +150,12 @@
   );
 
   const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
-    forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
+    // console.log(unref(series), 'series', unref(getDesign).dataSource);
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
       series.value.forEach((item) => {
         if (item.id === deviceId && item.attribute === attribute) {
           item.value = getNumberValue(value);
+          time.value = timespan;
         }
       });
     });
@@ -175,7 +172,6 @@
         show: false,
       },
     };
-    // console.log([...toRaw(unref(series)), option], 'series');
     updateChart([...toRaw(unref(series)), option]);
   };
 

@@ -9,6 +9,7 @@
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { unref } from 'vue';
   import { onMounted } from 'vue';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
   import { buildUUID } from '/@/utils/uuid';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
@@ -17,6 +18,8 @@
     config: ComponentPropsConfigType<typeof option>;
   }>();
 
+  const time = ref<Nullable<number>>(null);
+
   interface PercentType {
     value?: number;
     fontColor: string;
@@ -49,15 +52,6 @@
       attribute: '3',
       id: buildUUID(),
     },
-    {
-      value: 49,
-      fontColor: '#2196F3',
-      backgroundColor: '#2196F3',
-      unit: '℃',
-      deviceName: '温度',
-      attribute: '2',
-      id: buildUUID(),
-    },
   ];
 
   const getDesign = computed(() => {
@@ -93,10 +87,11 @@
 
   const { getNumberValue } = useReceiveValue();
   const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
-    forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
       percentList.value.forEach((item) => {
         if (item.id === deviceId && item.attribute === attribute) {
           item.value = getNumberValue(value);
+          time.value = timespan;
         }
       });
     });
@@ -111,10 +106,18 @@
   <main class="w-full h-full flex flex-col justify-center">
     <DeviceName :config="config" />
 
-    <div v-for="item in percentList" :key="item.id" class="flex flex-col ml-3 mr-3 items-stretch">
+    <div
+      v-for="item in percentList"
+      :key="item.id"
+      class="mt-2 flex flex-col ml-3 mr-3 items-stretch"
+    >
       <div class="flex justify-between">
         <div class="text-gray-500 text-lg truncate" :style="{ color: item.fontColor }">
-          {{ item.deviceRename || item.deviceName + '-' + item.attribute || '温度' }}
+          {{
+            (item.deviceRename || item.deviceName) +
+              '-' +
+              (item.attributeRename || item.attribute) || '温度'
+          }}
         </div>
         <span class="text-lg" :style="{ color: item.fontColor }"
           >{{ item.value }} {{ item.unit }}</span
@@ -131,6 +134,7 @@
         /> -->
       </div>
     </div>
+    <UpdateTime :time="time" />
   </main>
 </template>
 <style lang="less" scoped>

@@ -5,6 +5,7 @@
   import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';
   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';
@@ -14,6 +15,8 @@
     config: ComponentPropsConfigType<typeof option>;
   }>();
 
+  const time = ref<Nullable<number>>(null);
+
   const getDesign = computed(() => {
     const { persetOption = {}, option } = props.config;
     const { dataSource = [] } = option || {};
@@ -78,23 +81,11 @@
 
   const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
     // console.log(unref(getDesign).dataSource, 'dataSource');
-    forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
-      // unref(getDesign).dataSource.forEach((item) => {
-      // if (item.id === deviceId && item.attribute === attribute) {
-      //   svgList.value = unref(getDesign).dataSource.map((item) => {
-      //     return {
-      //       value: getNumberValue(value),
-      //       name: item.deviceRename || item.deviceName,
-      //       icon: item.icon,
-      //       unit: item.unit,
-      //       fontColor: item.fontColor,
-      //       iconColor: item.iconColor,
-      //     };
-      //   });
-      // }
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
       updateSvgList.value.forEach((item) => {
         if (item.id === deviceId && item.attribute === attribute) {
           item.value = getNumberValue(value);
+          time.value = timespan;
         }
       });
       // });
@@ -139,7 +130,9 @@
         />
 
         <div class="text-gray-500 text-lg truncate ml-6">{{
-          item.deviceRename || item.deviceName || '温度'
+          item.deviceRename ||
+          item.deviceName + '-' + (item.attributeRename || item.attribute) ||
+          '温度'
         }}</div>
       </div>
 
@@ -148,5 +141,6 @@
         <span>{{ item.unit }} </span>
       </h1>
     </div>
+    <UpdateTime :time="time" />
   </main>
 </template>