fix: 修改看板管理新增组件界面没有回复默认问题

@@ -230,6 +230,11 @@
     } catch (error) {
       throw error;
     } finally {
+      activeKey.value = TabKeyEnum.BASIC;
+      selectWidgetKeys.value = {
+        componentKey: TextComponent1Config.key,
+        categoryKey: PackagesCategoryEnum.TEXT,
+      };
       loading.value = false;
     }
   };

@@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('HumidityComponent');
 
 export const HumidityComponentConfig: ConfigType = {
   ...componentKeys,
-  title: '湿度仪表盘',
+  title: '仪表盘1',
   package: PackagesCategoryEnum.INSTRUMENT,
 };

@@ -80,16 +80,6 @@
                 x2: 1,
                 y2: 0,
                 colorStops: instrumentPanelColor,
-                // colorStops: [
-                //   {
-                //     offset: 0,
-                //     color: '#07ffd6',
-                //   },
-                //   {
-                //     offset: 1,
-                //     color: '#5eff10',
-                //   },
-                // ],
                 global: false,
               },
             },
@@ -100,10 +90,6 @@
               width: unref(getRatio) ? 30 * unref(getRatio) : 30,
             },
           },
-          // itemStyle: {
-          //   // color: instrumentPanelColor,
-          //   color: new graphic.LinearGradient(0, 1, 0, 0, instrumentPanelColor),
-          // },
           axisTick: {
             show: false,
           },

@@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('HumidityComponent1');
 
 export const HumidityComponent1Config: ConfigType = {
   ...componentKeys,
-  title: '湿度仪表盘',
+  title: '仪表盘2',
   package: PackagesCategoryEnum.INSTRUMENT,
 };

@@ -53,18 +53,19 @@
           },
           progress: {
             show: true,
-            width: 30,
+            width: unref(getRatio) ? 24 * unref(getRatio) : 24,
           },
           pointer: {
             show: false,
           },
           axisLine: {
             lineStyle: {
-              width: 30,
+              width: unref(getRatio) ? 24 * unref(getRatio) : 24,
             },
           },
           axisTick: {
-            distance: -35,
+            distance: unref(getRatio) ? -35 * unref(getRatio) : -35,
+            length: unref(getRatio) ? 8 * unref(getRatio) : 8,
             splitNumber: 5,
             lineStyle: {
               width: 2,
@@ -72,8 +73,8 @@
             },
           },
           splitLine: {
-            distance: -40,
-            length: 10,
+            distance: unref(getRatio) ? -40 * unref(getRatio) : -40,
+            length: unref(getRatio) ? 12 * unref(getRatio) : 12,
             lineStyle: {
               width: 3,
               color: '#999',
@@ -94,8 +95,8 @@
             width: '60%',
             lineHeight: 10,
             borderRadius: 8,
-            offsetCenter: [0, '30%'],
-            fontSize: 14,
+            offsetCenter: [0, '40%'],
+            fontSize: unref(getRatio) ? 14 * unref(getRatio) : 14,
             fontWeight: 'bolder',
             formatter: `{value} ${unit ?? ''}`,
             color: fontColor || 'inherit',
@@ -186,10 +187,37 @@
 
   const resize = async () => {
     await nextTick();
+    unref(chartInstance)?.setOption({
+      series: [
+        {
+          detail: {
+            fontSize: 14 * unref(getRatio),
+          },
+          progress: {
+            width: 24 * unref(getRatio),
+          },
+          axisLine: {
+            lineStyle: {
+              width: 24 * unref(getRatio),
+            },
+          },
+          axisTick: {
+            distance: -35 * unref(getRatio),
+            length: 6 * unref(getRatio),
+          },
+          splitLine: {
+            // 分割线与轴线距离
+            distance: -40 * unref(getRatio),
+            length: 12 * unref(getRatio),
+          },
+        },
+      ],
+    });
     unref(chartInstance)?.resize();
   };
 
   useComponentScale(props, resize);
+  const { getRatio } = useComponentScale(props, resize);
 </script>
 
 <template>

+import { cloneDeep } from 'lodash-es';
+import { PictureConfig } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '../../../index.type';
+import { PublicConfigClass, componentInitConfig } from '../../../publicConfig';
+
+export const option: PublicPresetOptions = {
+  componetDesign: false,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = PictureConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(PictureConfig);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

+<script lang="ts" setup></script>
+
+<template><main></main></template>

+<script lang="ts" setup>
+  // import { computed } from 'vue';
+  import { commonDataSourceSchemas } from '../../../config/common.config';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  // const props = defineProps<{
+  //   values: PublicComponentDataSourceProps;
+  // }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  // const getBindValues = computed(() => {
+  //   return props.values.bindValue;
+  // });
+
+  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 { useComponentKeys } from '../../../hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '../../../index.type';
+
+const componentKeys = useComponentKeys('Picture');
+export const PictureConfig: ConfigType = {
+  ...componentKeys,
+  title: '图片组件',
+  package: PackagesCategoryEnum.OTHER,
+};

+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Image as AntImage } from 'ant-design-vue';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useDataFetch } from '../../../hook/useSocket';
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType;
+  }>();
+
+  const fallback =
+    'data:image/png;base64,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';
+
+  const time = ref<Nullable<number>>(null);
+
+  const url = ref<string>(fallback);
+
+  // const getImagBase64 = ref(fallback);
+
+  // const getBase64Image = (url: string) => {
+  //   let canvas: Nullable<HTMLCanvasElement> = document.createElement('canvas');
+  //   const ctx = canvas.getContext('2d');
+  //   let image: Nullable<HTMLImageElement> = new Image();
+
+  //   image.onload = function () {
+  //     canvas!.height = image!.height;
+  //     canvas!.width = image!.width;
+  //     ctx?.drawImage(image!, 0, 0);
+  //     const dataUrl = canvas!.toDataURL('image/png');
+  //     getImagBase64.value = dataUrl;
+  //     console.log(dataUrl);
+  //     image = null;
+  //     canvas = null;
+  //   };
+  //   image.setAttribute('crossOrigin', 'Anonymous');
+  //   image.src = url;
+  // };
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    const [timespan, value] = latest;
+    time.value = timespan;
+    url.value = `${value}?timespan=${timespan}`;
+  };
+
+  useDataFetch(props, updateFn);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col items-center">
+    <AntImage :src="url" :fallback="fallback" />
+    <UpdateTime :time="time" />
+  </main>
+</template>
+
+<style scoped lang="less">
+  :deep(.ant-image) {
+    @apply flex justify-center w-auto;
+
+    height: calc(100% - 56px);
+
+    img {
+      @apply w-auto h-full;
+    }
+  }
+</style>

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

@@ -48,6 +48,7 @@
     return {
       tooltip: {
         trigger: 'item',
+        confine: true,
       },
       legend: {
         top: '5%',

@@ -48,6 +48,7 @@
     return {
       tooltip: {
         trigger: 'item',
+        confine: true,
       },
       legend: {
         top: '5%',

@@ -16,7 +16,7 @@ export enum FetchComFlagTypeEnum {
 export enum PackagesCategoryNameEnum {
   TEXT = '文本组件',
   INSTRUMENT = '仪表组件',
-  PICTURE = '图片组件',
+  // PICTURE = '图片组件',
   CONTROL = '控制组件',
   MAP = '地图组件',
   FLOWMETER = '流量计',
@@ -30,7 +30,7 @@ export enum PackagesCategoryNameEnum {
 export enum PackagesCategoryEnum {
   TEXT = 'TEXT',
   INSTRUMENT = 'INSTRUMENT',
-  PICTURE = 'PICTURE',
+  // PICTURE = 'PICTURE',
   CONTROL = 'CONTROL',
   MAP = 'MAP',
   FLOWMETER = 'FLOWMETER',

@@ -3,7 +3,7 @@ import { FlowmeterList } from './components/Flowmeter';
 import { InstrumentList } from './components/Instrument';
 import { MapList } from './components/Map';
 import { OtherList } from './components/Other';
-import { PictureList } from './components/Picture';
+// import { PictureList } from './components/Picture';
 import { TextList } from './components/Text';
 import { STATISTICSList } from './components/Statistics';
 import { PackagesCategoryEnum, PackagesType } from './index.type';
@@ -11,7 +11,7 @@ import { PackagesCategoryEnum, PackagesType } from './index.type';
 export const packageList: PackagesType = {
   [PackagesCategoryEnum.TEXT]: TextList,
   [PackagesCategoryEnum.INSTRUMENT]: InstrumentList,
-  [PackagesCategoryEnum.PICTURE]: PictureList,
+  // [PackagesCategoryEnum.PICTURE]: PictureList,
   [PackagesCategoryEnum.CONTROL]: ControlList,
   [PackagesCategoryEnum.MAP]: MapList,
   [PackagesCategoryEnum.FLOWMETER]: FlowmeterList,