feat: implement picture component

-<script lang="ts" setup>
-  import type { ECharts, EChartsOption } from 'echarts';
-  import type { PropType } from 'vue';
-  import { nextTick, onMounted, onUnmounted, ref, unref } from 'vue';
-  import { init } from 'echarts';
-
-  interface DataSource {
-    id: string | number;
-  }
-
-  const props = defineProps({
-    dataSource: {
-      type: Object as PropType<DataSource>,
-      required: true,
-    },
-    chartOption: {
-      type: Object as PropType<EChartsOption>,
-      // required: true,
-    },
-    add: {
-      type: Function,
-      required: true,
-    },
-  });
-
-  const getControlsWidgetId = () => `widget-chart-${props.dataSource.id}`;
-
-  const chartRef = ref<Nullable<ECharts>>(null);
-
-  function initChart() {
-    const chartDom = document.getElementById(getControlsWidgetId())!;
-    chartRef.value = init(chartDom);
-    const option: EChartsOption = props.chartOption || {
-      tooltip: {
-        trigger: 'item',
-        // confine: true,
-        extraCssText: 'position: fixed;',
-        position: (point, params, dom, rect, size) => {
-          const parentEl = (dom as HTMLDivElement).parentElement!;
-
-          const { top = 0, left = 0 } = parentEl.getBoundingClientRect()!;
-          return [left, top];
-        },
-      },
-      series: [
-        {
-          name: 'Access From',
-          type: 'pie',
-          radius: '50%',
-          data: [
-            { value: 1048, name: 'Search Engine' },
-            { value: 735, name: 'Direct' },
-            { value: 580, name: 'Email' },
-            { value: 484, name: 'Union Ads' },
-            { value: 300, name: 'Video Ads' },
-          ],
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)',
-            },
-          },
-        },
-      ],
-    };
-
-    nextTick(() => {
-      option && unref(chartRef)?.setOption(option);
-    });
-  }
-
-  function update() {
-    unref(chartRef)?.resize();
-  }
-
-  onMounted(() => {
-    initChart();
-    props.add(props.dataSource.id, update);
-  });
-
-  onUnmounted(() => {
-    unref(chartRef)?.clear();
-  });
-
-  defineExpose({ update });
-</script>
-
-<template>
-  <div :id="getControlsWidgetId()" class="widget-charts"></div>
-</template>
-
-<style scoped>
-  .widget-charts {
-    min-width: 10px;
-    min-height: 10px;
-    width: 100%;
-    height: 100%;
-  }
-
-  .widget-charts > div {
-    width: 100%;
-    height: 100%;
-  }
-</style>

+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { Tooltip, Image } from 'ant-design-vue';
+  import {
+    DEFAULT_DATE_FORMAT,
+    DEFAULT_RADIO_RECORD,
+    fontSize,
+    RadioRecord,
+  } from '../../detail/config/util';
+  import { PictureComponentLayout, PictureComponentValue } from './pictureComponent.config';
+  import { dateUtil } from '/@/utils/dateUtil';
+
+  const props = defineProps<{
+    layout: PictureComponentLayout;
+    value: PictureComponentValue;
+    radio: RadioRecord;
+  }>();
+
+  const fallback =
+    'data:image/png;base64,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';
+
+  const getRadio = computed(() => {
+    const { radio } = props.radio || DEFAULT_RADIO_RECORD;
+    console.log(props.radio);
+    return radio;
+  });
+
+  const getWidth = computed(() => {
+    const marign = 5;
+    const { width = 180 } = props.radio || {};
+    return width - 5;
+  });
+</script>
+
+<template>
+  <section class="w-full h-full flex flex-col justify-center items-center">
+    <Image :width="getWidth" :src="props?.value?.value || ''" :fallback="fallback" />
+    <div
+      class="w-full text-center text-gray-400 truncate"
+      :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
+    >
+      <Tooltip
+        placement="topLeft"
+        :title="props?.value?.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT)"
+      >
+        <span>更新时间:</span>
+        <span class="truncate">
+          {{ props?.value?.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT) }}
+        </span>
+      </Tooltip>
+    </div>
+  </section>
+</template>
+
+<style scoped></style>

+import PictureComponent from './PictureComponent.vue';
+
+import { PictureComponentType } from './pictureComponent.config';
+import { Component } from 'vue';
+
+interface PictureComponentList {
+  id: PictureComponentType;
+  component: Component;
+}
+// {
+//   id: 'instrument-component-1',
+//   layout: { chartOption: instrumentComponent1() },
+//   component: DashBoardComponent,
+//   value: { id: buildUUID() },
+// }
+const pictureComponentList: PictureComponentList[] = [
+  {
+    id: 'picture-component-1',
+    component: PictureComponent,
+  },
+];
+
+export { PictureComponent, pictureComponentList };

+import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
+
+export type PictureComponentType = 'picture-component-1';
+
+export interface PictureComponentLayout {}
+
+export interface PictureComponentValue {
+  value?: string;
+  updateTime?: string;
+}
+
+export const transformPictureConfig = (
+  config: PictureComponentLayout,
+  record: DataComponentRecord,
+  dataSourceRecord: DataSource
+) => {
+  return {};
+};

@@ -4,13 +4,15 @@
   import { FormActionType, useForm } from '/@/components/Form';
   import { basicSchema, dataSourceSchema } from '../config/basicConfiguration';
   import BasicForm from '/@/components/Form/src/BasicForm.vue';
-  import { reactive, ref, shallowReactive, unref, nextTick, watch } from 'vue';
+  import { ref, shallowReactive, unref, nextTick, watch } from 'vue';
   import VisualOptionsModal from './VisualOptionsModal.vue';
   import { useModal } from '/@/components/Modal';
   import { buildUUID } from '/@/utils/uuid';
   import type { ComponentInfo, DataSource } from '/@/api/dataBoard/model';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { DataBoardLayoutInfo } from '../../types/type';
+  import { FrontComponent } from '../config/help';
+  import { computed } from '@vue/reactivity';
 
   type DataSourceFormEL = { [key: string]: Nullable<FormActionType> };
 
@@ -133,6 +135,10 @@
     });
   };
 
+  const showSettingButton = computed(() => {
+    return props.frontId !== FrontComponent.PICTURE_COMPONENT_1;
+  });
+
   watch(
     () => props.record,
     () => {
@@ -183,6 +189,7 @@
         </Tooltip>
         <Tooltip title="设置">
           <SettingOutlined
+            v-show="showSettingButton"
             @click="handleSetting(item)"
             class="cursor-pointer text-lg !leading-30px"
           />

@@ -4,6 +4,7 @@
   import TextComponent from '../../components/TextComponent/TextComponent.vue';
   import { textComponentConfig } from '../../components/TextComponent/config';
   import { instrumentComponentConfig } from '../../components/InstrumentComponent';
+  import { pictureComponentList } from '../../components/PictureComponent';
   const props = defineProps<{
     value: string;
   }>();
@@ -35,7 +36,25 @@
           </template>
         </List>
       </Tabs.TabPane>
-      <Tabs.TabPane key="2" tab="仪表组件">
+      <Tabs.TabPane key="2" tab="图片组件">
+        <List
+          :grid="{ gutter: 10, column: 3, xs: 3, sm: 3, md: 3, lg: 3, xl: 3, xxl: 3 }"
+          :data-source="pictureComponentList"
+        >
+          <template #renderItem="{ item }">
+            <List.Item class="!flex !justify-center">
+              <VisualWidgetSelect
+                :checked-id="props.value"
+                :control-id="item.id"
+                @change="handleCheck"
+              >
+                <component :is="item.component" />
+              </VisualWidgetSelect>
+            </List.Item>
+          </template>
+        </List>
+      </Tabs.TabPane>
+      <Tabs.TabPane key="3" tab="仪表组件">
         <List
           :grid="{ gutter: 10, column: 3, xs: 3, sm: 3, md: 3, lg: 3, xl: 3, xxl: 3 }"
           :data-source="instrumentComponentConfig"

@@ -18,7 +18,7 @@ export const basicSchema: FormSchema[] = [
     },
   },
   {
-    field: 'remake',
+    field: 'remark',
     label: '组件备注',
     component: 'InputTextArea',
     componentProps: {

@@ -10,6 +10,8 @@ import {
 } from '../../components/TextComponent/config';
 import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
 import DashBoardComponent from '../../components/InstrumentComponent/DashBoardComponent.vue';
+import PictureComponent from '../../components/PictureComponent/PictureComponent.vue';
+import { transformPictureConfig } from '../../components/PictureComponent/pictureComponent.config';
 import { WidgetComponentType } from './visualOptions';
 import {
   DashboardComponentLayout,
@@ -27,6 +29,7 @@ export enum FrontComponent {
   INSTRUMENT_COMPONENT_1 = 'instrument-component-1',
   INSTRUMENT_COMPONENT_2 = 'instrument-component-2',
   DIGITAL_DASHBOARD_COMPONENT = 'digital-dashboard-component',
+  PICTURE_COMPONENT_1 = 'picture-component-1',
 }
 
 export interface ComponentConfig {
@@ -94,3 +97,9 @@ frontComponentMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, {
   ComponentConfig: {},
   transformConfig: transformDashboardComponentConfig,
 });
+
+frontComponentMap.set(FrontComponent.PICTURE_COMPONENT_1, {
+  Component: PictureComponent,
+  ComponentConfig: {},
+  transformConfig: transformPictureConfig,
+});

 import { InstrumentComponentType } from '../../components/InstrumentComponent/dashBoardComponent.config';
 import { DigitalDashBoardComponentType } from '../../components/InstrumentComponent/digitalDashBoard.config';
+import { PictureComponentType } from '../../components/PictureComponent/pictureComponent.config';
 import { TextComponentType } from '../../components/TextComponent/config';
 import { FormSchema } from '/@/components/Form';
 
 export type WidgetComponentType =
   | TextComponentType
   | InstrumentComponentType
-  | DigitalDashBoardComponentType;
+  | DigitalDashBoardComponentType
+  | PictureComponentType;
 
 export interface VisualOptionParams {
   [visualOptionField.FONT_COLOR]: string;