fix: pictureComponent can not show image

ww
1 parent 68e49550
Showing 3 changed files with 49 additions and 10 deletions
src/views/data/board/components/PictureComponent/PictureComponent.vue
src/views/data/board/components/PictureComponent/pictureComponent.config.ts
src/views/data/board/detail/index.vue
--- a/src/views/data/board/components/PictureComponent/PictureComponent.vue
View file @04b6bc4
+++ b/src/views/data/board/components/PictureComponent/PictureComponent.vue
View file @04b6bc4
 <script lang="ts" setup>
-  import { computed } from 'vue';
-  import { Tooltip, Image } from 'ant-design-vue';
+  import { computed, ref, watch } from 'vue';
+  import { Tooltip, Image as AntImage } from 'ant-design-vue';
   import {
     DEFAULT_DATE_FORMAT,
     DEFAULT_RADIO_RECORD,
@@ -19,6 +19,8 @@
   const fallback =
     'data:image/png;base64,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';
+  const getImagBase64 = ref(fallback);
+
   const getRadio = computed(() => {
     const { radio } = props.radio || DEFAULT_RADIO_RECORD;
     return radio;
@@ -26,29 +28,56 @@
   const getWidth = computed(() => {
     const marign = 5;
-    const offsetHight = 62 + 62;
-    const { width = 140, height = 140 } = props.radio || {};
-    console.log({ scalcWidth: width > height ? height - marign : width - marign, width, height });
+    const offsetHight = 62 + (props.radio ? 62 : 0);
+    const { width = 240, height = 200 } = props.radio || {};
     return width > height - offsetHight ? height - offsetHight - marign : width - marign;
   });
+
+  watch(
+    () => props.value?.value,
+    () => {
+      if (props.value?.value) {
+        getBase64Image(props.value.value);
+      }
+    }
+  );
+
+  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;
+      image = null;
+      canvas = null;
+    };
+    image.setAttribute('crossOrigin', 'Anonymous');
+    image.src = url;
+  };
 </script>
 <template>
   <section
     class="w-full h-full flex flex-col justify-center items-center justify-between widget-picture"
   >
-    <Image :width="getWidth" :src="props?.value?.value || ''" :fallback="fallback" />
+    <AntImage :width="getWidth" :src="getImagBase64" :fallback="fallback" />
+    <!-- <Image :style="{ width: `${getWidth}px` }" :src="getImagBase64" /> -->
     <div
       class="w-full text-center truncate p-5"
       :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }"
     >
       <Tooltip
         placement="top"
-        :title="props?.value?.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT)"
+        :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
       >
         <span>更新时间:</span>
         <span class="truncate">
-          {{ props?.value?.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT) }}
+          {{ dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT) }}
         </span>
       </Tooltip>
     </div>
--- a/src/views/data/board/components/PictureComponent/pictureComponent.config.ts
View file @04b6bc4
+++ b/src/views/data/board/components/PictureComponent/pictureComponent.config.ts
View file @04b6bc4
@@ -14,5 +14,11 @@ export const transformPictureConfig = (
   record: DataComponentRecord,
   dataSourceRecord: DataSource
 ) => {
-  return {};
+  const componentInfo = dataSourceRecord.componentInfo;
+  return {
+    value: {
+      value: componentInfo.value,
+      updateTime: componentInfo.updateTime,
+    } as PictureComponentValue,
+  };
 };
--- a/src/views/data/board/detail/index.vue
View file @04b6bc4
+++ b/src/views/data/board/detail/index.vue
View file @04b6bc4
@@ -228,7 +228,7 @@
   const loading = ref(false);
   const getDataBoardComponent = async () => {
     try {
-      // dataBoardList.value = [];
+      dataBoardList.value = [];
       loading.value = true;
       const data = await getDataBoradDetail();
@@ -327,6 +327,10 @@
       layoutInfo.push({
         id: _id,
+        // x: (unref(layoutInfo).length * 2) % (GirdLayoutColNum || 24),
+        // y: unref(layoutInfo).length + (GirdLayoutColNum || 24),
+        // w: record?.w || DEFAULT_WIDGET_WIDTH,
+        // h: record?.h || DEFAULT_WIDGET_HEIGHT,
         h: record?.h,
         w: record?.w,
         x: record?.x,