Merge branch 'ww' into 'main'

fix: BUG in teambition

See merge request huang/yun-teng-iot-front!303

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="20px" viewBox="0 0 18 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>趋势</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="看板详情" transform="translate(-749.000000, -288.000000)" fill="#9D9D9E" fill-rule="nonzero">
+            <g id="1" transform="translate(302.000000, 266.000000)">
+                <g id="趋势" transform="translate(447.000000, 21.428571)">
+                    <path d="M1.42498406,15.6605947 C1.06725816,15.6605947 0.777264031,15.3706006 0.777264031,15.0128747 L0.777264031,10.7877471 C0.777264031,10.4300212 1.06725816,10.1400271 1.42498406,10.1400271 C1.78270995,10.1400271 2.07270408,10.4300212 2.07270408,10.7877471 L2.07270408,15.0128747 C2.07270408,15.3706006 1.78270995,15.6605947 1.42498406,15.6605947 L1.42498406,15.6605947 Z M6.34765625,15.6605947 C5.98993036,15.6605947 5.69993622,15.3706006 5.69993622,15.0128747 L5.69993622,8.88504464 C5.69993622,8.52731875 5.98993036,8.23732462 6.34765625,8.23732462 C6.70538214,8.23732462 6.99537628,8.52731875 6.99537628,8.88504464 L6.99537628,15.0128747 C6.99537628,15.3706006 6.70538214,15.6605947 6.34765625,15.6605947 Z M11.2703284,15.6605947 C10.9126026,15.6605947 10.6226084,15.3706006 10.6226084,15.0128747 L10.6226084,10.7357302 C10.6226084,10.3780043 10.9126026,10.0880102 11.2703284,10.0880102 C11.6280543,10.0880102 11.9180485,10.3780043 11.9180485,10.7357302 L11.9180485,15.0128747 C11.9180485,15.3706006 11.6280543,15.6605947 11.2703284,15.6605947 Z M16.1930006,15.6605947 C15.8352747,15.6605947 15.5452806,15.3706006 15.5452806,15.0128747 L15.5452806,7.99756856 C15.5452806,7.63984267 15.8352747,7.34984853 16.1930006,7.34984853 C16.5507265,7.34984853 16.8407207,7.63984267 16.8407207,7.99756856 L16.8407207,15.0128747 C16.8407207,15.3706006 16.5507265,15.6605947 16.1930006,15.6605947 L16.1930006,15.6605947 Z M1.42558195,7.79249068 C1.14131205,7.79273594 0.890103495,7.60760136 0.806175765,7.33600317 C0.722248035,7.06440498 0.825217689,6.76982427 1.06006856,6.60965402 L6.29563935,3.03902264 C6.53586252,2.87501724 6.85596642,2.89131996 7.07828444,3.07888233 L10.1126036,5.63907047 L15.6612723,1.15186543 C15.8543438,0.995657909 16.119732,0.963597347 16.3444479,1.06933353 C16.5691638,1.17506971 16.7136371,1.39998352 16.7163584,1.64831792 L16.7506802,4.73883929 C16.7526044,4.91060989 16.6862357,5.0761226 16.5661395,5.19894737 C16.4460434,5.32177213 16.2820632,5.39184191 16.1102918,5.39373406 L16.1033163,5.39373406 C15.7484514,5.39364664 15.4597264,5.10803197 15.4557956,4.75318878 L15.4358658,2.99936224 L10.5112006,6.98274075 C10.269667,7.17802156 9.92353022,7.17442642 9.68610491,6.97417092 L6.61910077,4.38647959 L1.78989955,7.6798868 C1.68260289,7.75331921 1.55560074,7.79257315 1.42558195,7.79249068 Z" id="形状"></path>
+                    <path d="M16.0686384,2.30321269 L12.7309869,2.30321269 C12.373261,2.30321269 12.0832669,2.01321856 12.0832669,1.65549267 C12.0832669,1.29776677 12.373261,1.00777264 12.7309869,1.00777264 L16.0686384,1.00777264 C16.4263643,1.00777264 16.7163584,1.29776677 16.7163584,1.65549267 C16.7163584,2.01321856 16.4263643,2.30321269 16.0686384,2.30321269 L16.0686384,2.30321269 Z M17.1083785,18.0434072 L0.652901786,18.0434072 C0.295175893,18.0434072 0.0051817602,17.7534131 0.0051817602,17.3956872 C0.0051817602,17.0379613 0.295175893,16.7479672 0.652901786,16.7479672 L17.1083785,16.7479672 C17.4661044,16.7479672 17.7560985,17.0379613 17.7560985,17.3956872 C17.7560985,17.7534131 17.4661044,18.0434072 17.1083785,18.0434072 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

@@ -126,15 +126,15 @@
   <div class="flex flex-col w-full h-full min-w-3 min-h-3">
     <div :id="getControlsWidgetId()" class="widget-charts w-full h-full flex-auto"></div>
     <div>
-      <div class="text-center" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">{{
-        props.value.name
-      }}</div>
+      <div class="text-center" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">
+        {{ props.value.name }}
+      </div>
       <div
-        class="text-xs text-center text-gray-400 truncate"
-        :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
+        class="text-xs text-center truncate p-5"
+        :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }"
       >
         <Tooltip
-          placement="topLeft"
+          placement="top"
           :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
         >
           <span class="mr-2">更新时间:</span>

@@ -64,6 +64,11 @@
     changeValue.value = newValue;
   };
 
+  const getScale = computed(() => {
+    const { width } = props.radio || DEFAULT_RADIO_RECORD;
+    return width / 360 > 1 ? 1 : width / 360;
+  });
+
   onMounted(() => {
     if (props.random)
       timeout = setInterval(handleRandom, DEFAULT_ANIMATION_INTERVAL) as unknown as number;
@@ -79,33 +84,64 @@
   <section class="w-full h-full">
     <div class="flex flex-col w-full h-full">
       <div class="flex-1 flex justify-center items-center">
-        <div class="flex flex-col">
-          <Space justify="end" class="justify-end" :size="getRadio * 15">
+        <div class="flex px-4 items-center" :style="{ transform: `scale(${getScale})` }">
+          <Space
+            justify="end"
+            class="justify-end"
+            :size="4"
+            :style="{
+              backgroundColor: '#585357',
+              padding: fontSize({ radio: getRadio, basic: 10 }),
+            }"
+          >
             <div
               v-for="number in integerPart"
               :key="number"
-              class="border border-gray-400 p-2"
+              class="digital-wrapper__int"
               :style="{
                 color: getPropsValue.fontColor,
-                fontSize: fontSize({ radio: getRadio, basic: 20 }),
+                fontSize: fontSize({ radio: getRadio, basic: 20, max: 20 }),
+                padding: fontSize({ radio: getRadio, basic: 5 }),
               }"
             >
-              {{ number }}
+              <div class="digital-text__int p-1 text-light-50"> {{ number }}</div>
             </div>
           </Space>
-          <Space justify="end" class="justify-end mt-2" :size="getRadio * 15">
+          <div
+            class="m-0.5 rounded-1/2"
+            style="background-color: #333; width: 6px; height: 6px; align-self: flex-end"
+          >
+          </div>
+          <Space
+            justify="end"
+            class="justify-end"
+            :size="4"
+            :style="{
+              backgroundColor: '#b74940',
+              padding: fontSize({ radio: getRadio, basic: 10 }),
+            }"
+          >
             <div
               v-for="number in decimalPart"
               :key="number"
-              class="border border-gray-400 p-1"
+              class="digital-wrapper__float"
               :style="{
                 color: getPropsValue.fontColor,
-                fontSize: fontSize({ radio: getRadio, basic: 18 }),
+                fontSize: fontSize({ radio: getRadio, basic: 20, max: 20 }),
+                padding: fontSize({ radio: getRadio, basic: 5 }),
               }"
             >
-              {{ number }}
+              <div class="digital-text__float p-1 text-light-50">
+                {{ number }}
+              </div>
             </div>
           </Space>
+          <div
+            class="px-1"
+            :style="{ fontSize: fontSize({ radio: getRadio, basic: 18, max: 18 }) }"
+          >
+            {{ getPropsValue.unit }}
+          </div>
         </div>
       </div>
 
@@ -114,14 +150,13 @@
         :style="{ fontSize: fontSize({ radio: getRadio, basic: 18 }) }"
       >
         <span>{{ props.value.name || '电表' }}</span>
-        <span class="px-1">({{ getPropsValue.unit }})</span>
       </div>
       <div
-        class="text-center mt-1 text-gray-400 text-xs truncate"
-        :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
+        class="text-center text-xs truncate p-5"
+        :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }"
       >
         <Tooltip
-          placement="topLeft"
+          placement="top"
           :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
         >
           <span class="mr-1">更新时间:</span>
@@ -134,3 +169,35 @@
     <div></div>
   </section>
 </template>
+
+<style scoped lang="less">
+  .digital-wrapper__int {
+    border-radius: 1px;
+    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
+    background: url('/@/assets/images/digital-wrapper-bg-int.png') 0px -1px no-repeat;
+    padding: 5px;
+    background-size: 100% 100%;
+  }
+  .digital-text_int {
+    display: inline-block;
+    overflow-wrap: break-word;
+    color: rgba(255, 255, 255, 1);
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  .digital-wrapper__float {
+    border-radius: 1px;
+    box-shadow: inset 0px 1px 3px 0px rgba(112, 22, 15, 1);
+    background: url('/@/assets/images/digital-wrapper-bg-float.png') 0px -1px no-repeat;
+    padding: 5px;
+    background-size: 100% 100%;
+  }
+  .digital-text_float {
+    display: inline-block;
+    overflow-wrap: break-word;
+    color: rgba(255, 255, 255, 1);
+    white-space: nowrap;
+    text-align: center;
+  }
+</style>

@@ -104,9 +104,9 @@ export const instrumentComponent1 = (params?: Partial<ComponentInfo>): EChartsOp
         detail: {
           valueAnimation: true,
           width: '60%',
-          lineHeight: 30,
+          lineHeight: 10,
           borderRadius: 8,
-          offsetCenter: [0, '-15%'],
+          offsetCenter: [0, '30%'],
           fontSize: 14,
           fontWeight: 'bolder',
           formatter: `{value} ${unit ?? ''}`,
@@ -220,6 +220,7 @@ export const instrumentComponent2 = (params?: Partial<ComponentInfo>): EChartsOp
           valueAnimation: true,
           formatter: `{value} ${unit ?? ''}`,
           color: params?.fontColor || 'inherit',
+          offsetCenter: [0, '70%'],
           fontSize: 14,
         },
         data: [
@@ -254,7 +255,8 @@ export const update_instrument_1_font = (radio: number) => {
 };
 
 export const update_instrument_2_font = (radio: number) => {
-  const axisLabelFontSize = fontSize({ radio, basic: 10, max: 18 });
+  const axisLabelFontSize = fontSize({ radio, basic: 10, max: 16 });
+  const detailFontSize = fontSize({ radio, basic: 12 });
   return {
     series: [
       {
@@ -262,31 +264,35 @@ export const update_instrument_2_font = (radio: number) => {
           fontSize: axisLabelFontSize,
         },
         detail: {
-          fontSize: axisLabelFontSize,
+          fontSize: detailFontSize,
         },
       },
     ],
   } as EChartsOption;
 };
 
-export const update_instrument_1_value = (value) => {
+const handleValue = (value: any) => {
+  return Number(value).toFixed(2);
+};
+
+export const update_instrument_1_value = (value: number) => {
   return {
     series: [
       {
-        data: [{ value }],
+        data: [{ value: handleValue(value) }],
       },
       {
-        data: [{ value }],
+        data: [{ value: handleValue(value) }],
       },
     ],
   } as EChartsOption;
 };
 
-export const update_instrument_2_value = (value) => {
+export const update_instrument_2_value = (value: number) => {
   return {
     series: [
       {
-        data: [{ value }],
+        data: [{ value: handleValue(value) }],
       },
     ],
   } as EChartsOption;

 <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,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==';
 
+  const getImagBase64 = ref(fallback);
+
   const getRadio = computed(() => {
     const { radio } = props.radio || DEFAULT_RADIO_RECORD;
     return radio;
@@ -26,27 +28,56 @@
 
   const getWidth = computed(() => {
     const marign = 5;
-    const { width = 180 } = props.radio || {};
-    return width - marign;
+    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 text-gray-400 truncate"
-      :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
+      class="w-full text-center truncate p-5"
+      :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }"
     >
       <Tooltip
-        placement="topLeft"
-        :title="props?.value?.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT)"
+        placement="top"
+        :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>

@@ -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,
+  };
 };

@@ -71,30 +71,33 @@
               }"
             />
           </div>
-          <div class="truncate" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">{{
-            props.value.name
-          }}</div>
+          <div class="flex justify-center">
+            <Statistic
+              :value="props.value.value || 0"
+              class="truncate"
+              :value-style="{
+                fontSize: fontSize({ radio: getRadio, basic: 24, min: 16 }),
+                color: props.value.fontColor,
+              }"
+            />
+          </div>
+          <div :style="{ color: '#666', fontSize: fontSize({ radio: getRadio, basic: 16 }) }">
+            <!-- {{ getShowUnit ? props.value.unit : '' }} -->
+            {{ props.value.name }}
+          </div>
+          <!-- <div class="truncate" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">
+            {{ props.value.name }}
+          </div> -->
         </div>
       </div>
-      <div class="w-1/2 flex justify-center">
-        <Statistic
-          :value="props.value.value || 0"
-          :suffix="getShowUnit ? props.value.unit : ''"
-          class="truncate"
-          :value-style="{
-            fontSize: fontSize({ radio: getRadio, basic: 16 }),
-            color: props.value.fontColor,
-          }"
-        />
-      </div>
     </div>
-    <div v-if="getShowUpdate" class="text-center text-xs text-gray-400 truncate">
+    <div v-if="getShowUpdate" class="text-center text-xs truncate p-5" style="color: #999">
       <Tooltip
-        placement="topLeft"
+        placement="top"
         :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
       >
         <div
-          :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
+          :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 14 }) }"
           class="truncate"
         >
           <span class="mr-1">更新时间:</span>

@@ -64,7 +64,7 @@ export const TextComponentDefaultConfig: Partial<ComponentInfo> = {
 
 export const textComponentConfig: TextComponentDefault[] = [
   TextComponent1Config,
-  TextComponent2Config,
+  // TextComponent2Config,
   TextComponent3Config,
   TextComponent4Config,
   TextComponent5Config,

@@ -54,7 +54,7 @@
 </script>
 
 <template>
-  <div class="flex justify-between w-full">
+  <div class="flex justify-between w-full p-5">
     <div class="flex" :style="{ width: `calc(100% - 60px)` }">
       <div
         v-for="(item, index) in props.record"
@@ -62,15 +62,15 @@
         :style="{ width: `${100 / props.record.length}%` }"
         :key="index"
       >
-        <Tooltip :title="item.deviceName" placement="topLeft">
+        <Tooltip :title="item.deviceName" placement="top">
           <span>
-            <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" />
+            <!-- <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" /> -->
             <span>{{ item.deviceRename || item.deviceName }}</span>
           </span>
         </Tooltip>
       </div>
     </div>
-    <div class="flex items-center w-10">
+    <div class="flex items-center gap-5">
       <slot name="moreAction"></slot>
       <Dropdown
         v-if="dropMenuList.length"
@@ -79,7 +79,10 @@
         @menu-event="handleMenuEvent"
       >
         <Tooltip title="更多">
-          <MoreOutlined v-if="!getIsSharePage" class="transform rotate-90 cursor-pointer" />
+          <MoreOutlined
+            v-if="!getIsSharePage"
+            class="transform rotate-90 cursor-pointer w-4.5 h-4.5 text-lg"
+          />
         </Tooltip>
       </Dropdown>
     </div>

-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-    <!-- <link rel="stylesheet" type="text/css" href="./common.css" />
-    <link rel="stylesheet" type="text/css" href="./index.css" /> -->
-    <style>
-      body * {
-        box-sizing: border-box;
-        flex-shrink: 0;
-      }
-      body {
-        font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial,
-          PingFang SC-Light, Microsoft YaHei;
-      }
-      input {
-        background-color: transparent;
-        border: 0;
-      }
-      button {
-        margin: 0;
-        padding: 0;
-        border: 1px solid transparent;
-        outline: none;
-        background-color: transparent;
-      }
-
-      button:active {
-        opacity: 0.6;
-      }
-      .flex-col {
-        display: flex;
-        flex-direction: column;
-      }
-      .flex-row {
-        display: flex;
-        flex-direction: row;
-      }
-      .justify-start {
-        display: flex;
-        justify-content: flex-start;
-      }
-      .justify-center {
-        display: flex;
-        justify-content: center;
-      }
-
-      .justify-end {
-        display: flex;
-        justify-content: flex-end;
-      }
-      .justify-evenly {
-        display: flex;
-        justify-content: space-evenly;
-      }
-      .justify-around {
-        display: flex;
-        justify-content: space-around;
-      }
-      .justify-between {
-        display: flex;
-        justify-content: space-between;
-      }
-      .align-start {
-        display: flex;
-        align-items: flex-start;
-      }
-      .align-center {
-        display: flex;
-        align-items: center;
-      }
-      .align-end {
-        display: flex;
-        align-items: flex-end;
-      }
-    </style>
-    <style>
-      .page {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-      }
-
-      .image_1 {
-        width: 1920px;
-        height: 960px;
-      }
-
-      .section_1 {
-        height: 972px;
-        background-color: rgba(240, 242, 245, 1);
-        width: 1638px;
-        position: absolute;
-        left: 282px;
-        top: 108px;
-      }
-
-      .box_1 {
-        width: 1598px;
-        height: 796px;
-        margin: 20px 0 0 20px;
-      }
-
-      .box_2 {
-        height: 78px;
-        border-radius: 3px;
-        background-color: rgba(255, 255, 255, 1);
-        width: 1598px;
-      }
-
-      .box_3 {
-        width: 208px;
-        height: 25px;
-        margin: 27px 0 0 20px;
-      }
-
-      .thumbnail_1 {
-        width: 20px;
-        height: 19px;
-        margin-top: 4px;
-      }
-
-      .text_1 {
-        width: 80px;
-        height: 25px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(51, 51, 51, 1);
-        font-size: 18px;
-        font-family: PingFangSC-Semibold;
-        white-space: nowrap;
-        line-height: 25px;
-        text-align: left;
-        margin-left: 12px;
-      }
-
-      .text_2 {
-        width: 72px;
-        height: 25px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(255, 255, 255, 1);
-        font-size: 18px;
-        font-family: PingFangSC-Regular;
-        white-space: nowrap;
-        line-height: 25px;
-        text-align: left;
-        margin-left: 24px;
-      }
-
-      .text-wrapper_1 {
-        width: 107px;
-        height: 20px;
-        overflow-wrap: break-word;
-        text-align: left;
-        white-space: nowrap;
-        margin-top: 20px;
-        font-size: 0;
-      }
-
-      .text_3 {
-        font-size: 14px;
-        font-family: PingFangSC-Regular;
-        color: rgba(102, 102, 102, 1);
-        line-height: 20px;
-      }
-
-      .text_4 {
-        font-size: 14px;
-        font-family: PingFangSC-Regular;
-        color: rgba(55, 125, 255, 1);
-        line-height: 20px;
-      }
-
-      .box_4 {
-        width: 1597px;
-        height: 319px;
-        margin-top: 20px;
-      }
-
-      .group_1 {
-        height: 319px;
-        border-radius: 3px;
-        background-color: rgba(255, 255, 255, 1);
-        width: 519px;
-        position: relative;
-        justify-content: flex-center;
-      }
-
-      .group_2 {
-        width: 480px;
-        height: 22px;
-        margin: 20px 0 0 20px;
-      }
-
-      .text_5 {
-        width: 116px;
-        height: 22px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(51, 51, 51, 1);
-        font-size: 16px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 22px;
-        text-align: left;
-      }
-
-      .block_1 {
-        width: 17px;
-        height: 15px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng61e21a4ecb6a4c3e09659c9ed2eef4056c7aa9553190d0490d78d97726e898df) -1px
-          0px no-repeat;
-        background-size: 17px 16px;
-        margin: 3px 0 0 312px;
-      }
-
-      .block_2 {
-        width: 4px;
-        height: 4px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7fbe2300f4a054a715c64dbc28a72022345b6e8c29d87ba5be6e58b9222e6888)
-          0px 0px no-repeat;
-        background-size: 4px 4px;
-        margin: 10px 0 0 20px;
-      }
-
-      .block_3 {
-        width: 4px;
-        height: 4px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6bbeb27f239784515cbdbc576c0480e4f9218af9c9e465da945579af452e11a3)
-          0px 0px no-repeat;
-        background-size: 4px 4px;
-        margin: 10px 0 0 2px;
-      }
-
-      .block_4 {
-        width: 4px;
-        height: 4px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng788c665bd82de9347efef08b24329265e7db13cb2ec04e9b336304cb6383bab2) -1px
-          0px no-repeat;
-        background-size: 4px 4px;
-        margin: 10px 0 0 1px;
-      }
-
-      .group_3 {
-        width: 50px;
-        height: 50px;
-        margin: 60px 0 0 235px;
-      }
-
-      .box_5 {
-        width: 50px;
-        height: 50px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng90c6d301b6ba3ed6900f8b58d1970285c1f71afde72e8b0306f787be649088ae)
-          0px 0px no-repeat;
-        background-size: 51px 50px;
-      }
-
-      .text-wrapper_2 {
-        width: 49px;
-        height: 33px;
-        margin: 12px 0 0 235px;
-      }
-
-      .text_6 {
-        width: 49px;
-        height: 33px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(51, 51, 51, 1);
-        font-size: 24px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 33px;
-        text-align: center;
-      }
-
-      .text-wrapper_3 {
-        width: 32px;
-        height: 22px;
-        margin-left: 244px;
-      }
-
-      .text_7 {
-        width: 32px;
-        height: 22px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(102, 102, 102, 1);
-        font-size: 16px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 22px;
-        text-align: center;
-      }
-
-      .text-wrapper_4 {
-        width: 213px;
-        height: 20px;
-        margin: 60px 0 20px 153px;
-      }
-
-      .text_8 {
-        width: 213px;
-        height: 20px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(153, 153, 153, 1);
-        font-size: 14px;
-        font-family: PingFangSC-Regular;
-        white-space: nowrap;
-        line-height: 20px;
-        text-align: left;
-      }
-
-      .group_4 {
-        position: absolute;
-        left: 448px;
-        top: 23px;
-        width: 18px;
-        height: 18px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0cbcb409c7bbb5544db0b197f5910ab50a6e5df351202723fcde68db454dc5e6)
-          0px 0px no-repeat;
-        background-size: 18px 18px;
-      }
-
-      .group_5 {
-        height: 319px;
-        border-radius: 3px;
-        background-color: rgba(255, 255, 255, 1);
-        margin-left: 20px;
-        width: 519px;
-        justify-content: flex-center;
-      }
-
-      .group_6 {
-        width: 480px;
-        height: 22px;
-        margin: 20px 0 0 20px;
-      }
-
-      .text_9 {
-        width: 118px;
-        height: 22px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(51, 51, 51, 1);
-        font-size: 16px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 22px;
-        text-align: left;
-      }
-
-      .thumbnail_2 {
-        width: 18px;
-        height: 18px;
-        margin: 3px 0 0 309px;
-      }
-
-      .block_5 {
-        width: 4px;
-        height: 4px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7fbe2300f4a054a715c64dbc28a72022345b6e8c29d87ba5be6e58b9222e6888)
-          0px 0px no-repeat;
-        background-size: 4px 4px;
-        margin: 10px 0 0 20px;
-      }
-
-      .block_6 {
-        width: 4px;
-        height: 4px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6bbeb27f239784515cbdbc576c0480e4f9218af9c9e465da945579af452e11a3)
-          0px 0px no-repeat;
-        background-size: 4px 4px;
-        margin: 10px 0 0 2px;
-      }
-
-      .block_7 {
-        width: 4px;
-        height: 4px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng788c665bd82de9347efef08b24329265e7db13cb2ec04e9b336304cb6383bab2) -1px
-          0px no-repeat;
-        background-size: 4px 4px;
-        margin: 10px 0 0 1px;
-      }
-
-      .image-wrapper_1 {
-        width: 53px;
-        height: 50px;
-        margin: 60px 0 0 233px;
-      }
-
-      .image_2 {
-        width: 53px;
-        height: 50px;
-      }
-
-      .text-wrapper_5 {
-        width: 53px;
-        height: 33px;
-        margin: 12px 0 0 233px;
-      }
-
-      .text_10 {
-        width: 53px;
-        height: 33px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(51, 51, 51, 1);
-        font-size: 24px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 33px;
-        text-align: center;
-      }
-
-      .text-wrapper_6 {
-        width: 66px;
-        height: 22px;
-        margin-left: 227px;
-      }
-
-      .text_11 {
-        width: 66px;
-        height: 22px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(102, 102, 102, 1);
-        font-size: 16px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 22px;
-        text-align: center;
-      }
-
-      .text-wrapper_7 {
-        width: 213px;
-        height: 20px;
-        margin: 60px 0 20px 153px;
-      }
-
-      .text_12 {
-        width: 213px;
-        height: 20px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(153, 153, 153, 1);
-        font-size: 14px;
-        font-family: PingFangSC-Regular;
-        white-space: nowrap;
-        line-height: 20px;
-        text-align: left;
-      }
-
-      .group_7 {
-        height: 319px;
-        border-radius: 3px;
-        background-color: rgba(255, 255, 255, 1);
-        margin-left: 20px;
-        width: 519px;
-        justify-content: flex-center;
-      }
-
-      .group_8 {
-        width: 480px;
-        height: 22px;
-        margin: 20px 0 0 20px;
-      }
-
-      .text_13 {
-        width: 180px;
-        height: 22px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(51, 51, 51, 1);
-        font-size: 16px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 22px;
-        text-align: left;
-      }
-
-      .thumbnail_3 {
-        width: 18px;
-        height: 18px;
-        margin: 3px 0 0 247px;
-      }
-
-      .group_9 {
-        width: 4px;
-        height: 4px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7fbe2300f4a054a715c64dbc28a72022345b6e8c29d87ba5be6e58b9222e6888)
-          0px 0px no-repeat;
-        background-size: 4px 4px;
-        margin: 10px 0 0 20px;
-      }
-
-      .group_10 {
-        width: 4px;
-        height: 4px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6bbeb27f239784515cbdbc576c0480e4f9218af9c9e465da945579af452e11a3)
-          0px 0px no-repeat;
-        background-size: 4px 4px;
-        margin: 10px 0 0 2px;
-      }
-
-      .group_11 {
-        width: 4px;
-        height: 4px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng788c665bd82de9347efef08b24329265e7db13cb2ec04e9b336304cb6383bab2) -1px
-          0px no-repeat;
-        background-size: 4px 4px;
-        margin: 10px 0 0 1px;
-      }
-
-      .group_12 {
-        width: 52px;
-        height: 50px;
-        margin: 60px 0 0 234px;
-      }
-
-      .group_13 {
-        width: 52px;
-        height: 50px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2a8b4bc257a393d46c08a8d61148cae372cdba88e38494116f9a9f58e70b0bfd)
-          0px 0px no-repeat;
-        background-size: 53px 50px;
-      }
-
-      .text-wrapper_8 {
-        width: 29px;
-        height: 33px;
-        margin: 12px 0 0 245px;
-      }
-
-      .text_14 {
-        width: 29px;
-        height: 33px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(51, 51, 51, 1);
-        font-size: 24px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 33px;
-        text-align: center;
-      }
-
-      .text-wrapper_9 {
-        width: 96px;
-        height: 22px;
-        margin-left: 212px;
-      }
-
-      .text_15 {
-        width: 96px;
-        height: 22px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(102, 102, 102, 1);
-        font-size: 16px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 22px;
-        text-align: center;
-      }
-
-      .text-wrapper_10 {
-        width: 213px;
-        height: 20px;
-        margin: 60px 0 20px 153px;
-      }
-
-      .text_16 {
-        width: 213px;
-        height: 20px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(153, 153, 153, 1);
-        font-size: 14px;
-        font-family: PingFangSC-Regular;
-        white-space: nowrap;
-        line-height: 20px;
-        text-align: left;
-      }
-
-      .box_6 {
-        width: 1597px;
-        height: 319px;
-        margin-top: 20px;
-      }
-
-      .box_7 {
-        height: 319px;
-        border-radius: 3px;
-        background-color: rgba(255, 255, 255, 1);
-        width: 1058px;
-        justify-content: flex-center;
-      }
-
-      .group_14 {
-        width: 1019px;
-        height: 22px;
-        margin: 20px 0 0 20px;
-      }
-
-      .text_17 {
-        width: 116px;
-        height: 22px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(51, 51, 51, 1);
-        font-size: 16px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 22px;
-        text-align: left;
-      }
-
-      .text_18 {
-        width: 118px;
-        height: 22px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(51, 51, 51, 1);
-        font-size: 16px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 22px;
-        text-align: left;
-        margin-left: 423px;
-      }
-
-      .thumbnail_4 {
-        width: 18px;
-        height: 18px;
-        margin: 3px 0 0 309px;
-      }
-
-      .group_15 {
-        width: 4px;
-        height: 4px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7fbe2300f4a054a715c64dbc28a72022345b6e8c29d87ba5be6e58b9222e6888)
-          0px 0px no-repeat;
-        background-size: 4px 4px;
-        margin: 10px 0 0 20px;
-      }
-
-      .group_16 {
-        width: 4px;
-        height: 4px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6bbeb27f239784515cbdbc576c0480e4f9218af9c9e465da945579af452e11a3)
-          0px 0px no-repeat;
-        background-size: 4px 4px;
-        margin: 10px 0 0 2px;
-      }
-
-      .group_17 {
-        width: 4px;
-        height: 4px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng788c665bd82de9347efef08b24329265e7db13cb2ec04e9b336304cb6383bab2) -1px
-          0px no-repeat;
-        background-size: 4px 4px;
-        margin: 10px 0 0 1px;
-      }
-
-      .group_18 {
-        width: 590px;
-        height: 95px;
-        margin: 60px 0 0 235px;
-      }
-
-      .group_18 {
-        width: 590px;
-        height: 95px;
-      }
-
-      .box_8 {
-        width: 50px;
-        height: 95px;
-      }
-
-      .box_8 {
-        width: 50px;
-        height: 95px;
-      }
-
-      .box_9 {
-        width: 50px;
-        height: 50px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng90c6d301b6ba3ed6900f8b58d1970285c1f71afde72e8b0306f787be649088ae)
-          0px 0px no-repeat;
-        background-size: 51px 50px;
-      }
-
-      .text_19 {
-        width: 49px;
-        height: 33px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(51, 51, 51, 1);
-        font-size: 24px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 33px;
-        text-align: center;
-        margin-top: 12px;
-      }
-
-      .box_10 {
-        width: 53px;
-        height: 95px;
-      }
-
-      .box_10 {
-        width: 53px;
-        height: 95px;
-      }
-
-      .image_3 {
-        width: 53px;
-        height: 50px;
-      }
-
-      .text_20 {
-        width: 53px;
-        height: 33px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(51, 51, 51, 1);
-        font-size: 24px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 33px;
-        text-align: center;
-        margin-top: 12px;
-      }
-
-      .text-wrapper_11 {
-        width: 588px;
-        height: 22px;
-        margin-left: 244px;
-      }
-
-      .text_21 {
-        width: 32px;
-        height: 22px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(102, 102, 102, 1);
-        font-size: 16px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 22px;
-        text-align: center;
-      }
-
-      .text_22 {
-        width: 66px;
-        height: 22px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(102, 102, 102, 1);
-        font-size: 16px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 22px;
-        text-align: center;
-      }
-
-      .text-wrapper_12 {
-        width: 752px;
-        height: 20px;
-        margin: 60px 0 20px 153px;
-      }
-
-      .text_23 {
-        width: 213px;
-        height: 20px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(153, 153, 153, 1);
-        font-size: 14px;
-        font-family: PingFangSC-Regular;
-        white-space: nowrap;
-        line-height: 20px;
-        text-align: left;
-      }
-
-      .text_24 {
-        width: 213px;
-        height: 20px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(153, 153, 153, 1);
-        font-size: 14px;
-        font-family: PingFangSC-Regular;
-        white-space: nowrap;
-        line-height: 20px;
-        text-align: left;
-      }
-
-      .box_11 {
-        height: 319px;
-        border-radius: 3px;
-        background-color: rgba(255, 255, 255, 1);
-        width: 519px;
-        justify-content: flex-center;
-      }
-
-      .section_2 {
-        width: 480px;
-        height: 22px;
-        margin: 20px 0 0 20px;
-      }
-
-      .text_25 {
-        width: 68px;
-        height: 22px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(51, 51, 51, 1);
-        font-size: 16px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 22px;
-        text-align: left;
-      }
-
-      .thumbnail_5 {
-        width: 18px;
-        height: 18px;
-        margin: 3px 0 0 359px;
-      }
-
-      .block_8 {
-        width: 4px;
-        height: 4px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7fbe2300f4a054a715c64dbc28a72022345b6e8c29d87ba5be6e58b9222e6888)
-          0px 0px no-repeat;
-        background-size: 4px 4px;
-        margin: 10px 0 0 20px;
-      }
-
-      .block_9 {
-        width: 4px;
-        height: 4px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6bbeb27f239784515cbdbc576c0480e4f9218af9c9e465da945579af452e11a3)
-          0px 0px no-repeat;
-        background-size: 4px 4px;
-        margin: 10px 0 0 2px;
-      }
-
-      .block_10 {
-        width: 4px;
-        height: 4px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng788c665bd82de9347efef08b24329265e7db13cb2ec04e9b336304cb6383bab2) -1px
-          0px no-repeat;
-        background-size: 4px 4px;
-        margin: 10px 0 0 1px;
-      }
-
-      .section_3 {
-        width: 374px;
-        height: 67px;
-        margin: 58px 0 0 73px;
-      }
-
-      .box_12 {
-        height: 67px;
-        background-color: rgba(88, 83, 87, 1);
-        width: 210px;
-      }
-
-      .box_13 {
-        width: 186px;
-        height: 50px;
-        margin: 9px 0 0 12px;
-      }
-
-      .text-wrapper_13 {
-        height: 50px;
-        border-radius: 1px;
-        box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngeb43fd189a34f107a87016160a0bb4a06b7227a89dd0e8872666398c06e106f0)
-          0px -1px no-repeat;
-        background-size: 35px 51px;
-        width: 34px;
-      }
-
-      .text_26 {
-        width: 21px;
-        height: 48px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(255, 255, 255, 1);
-        font-size: 34px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 48px;
-        text-align: center;
-        margin: 1px 0 0 6px;
-      }
-
-      .text-wrapper_14 {
-        height: 50px;
-        border-radius: 1px;
-        box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngeb43fd189a34f107a87016160a0bb4a06b7227a89dd0e8872666398c06e106f0)
-          0px -1px no-repeat;
-        background-size: 35px 51px;
-        margin-left: 4px;
-        width: 34px;
-      }
-
-      .text_27 {
-        width: 21px;
-        height: 48px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(255, 255, 255, 1);
-        font-size: 34px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 48px;
-        text-align: center;
-        margin: 1px 0 0 6px;
-      }
-
-      .text-wrapper_15 {
-        height: 50px;
-        border-radius: 1px;
-        box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2d347ae288939c4a28ddfa3b9f27c8fc682791a470f3b2106c28f1bdb6ab4ace)
-          0px 0px no-repeat;
-        background-size: 35px 51px;
-        margin-left: 4px;
-        width: 34px;
-      }
-
-      .text_28 {
-        width: 21px;
-        height: 48px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(255, 255, 255, 1);
-        font-size: 34px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 48px;
-        text-align: center;
-        margin: 1px 0 0 6px;
-      }
-
-      .text-wrapper_16 {
-        height: 50px;
-        border-radius: 1px;
-        box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2d347ae288939c4a28ddfa3b9f27c8fc682791a470f3b2106c28f1bdb6ab4ace)
-          0px 0px no-repeat;
-        background-size: 35px 51px;
-        margin-left: 4px;
-        width: 34px;
-      }
-
-      .text_29 {
-        width: 21px;
-        height: 48px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(255, 255, 255, 1);
-        font-size: 34px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 48px;
-        text-align: center;
-        margin: 1px 0 0 6px;
-      }
-
-      .text-wrapper_17 {
-        height: 50px;
-        border-radius: 1px;
-        box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2d347ae288939c4a28ddfa3b9f27c8fc682791a470f3b2106c28f1bdb6ab4ace)
-          0px 0px no-repeat;
-        background-size: 35px 51px;
-        margin-left: 4px;
-        width: 34px;
-      }
-
-      .text_30 {
-        width: 21px;
-        height: 48px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(255, 255, 255, 1);
-        font-size: 34px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 48px;
-        text-align: center;
-        margin: 1px 0 0 6px;
-      }
-
-      .box_14 {
-        width: 6px;
-        height: 6px;
-        background-color: rgba(51, 51, 51, 1);
-        border-radius: 50%;
-        margin: 60px 0 0 2px;
-      }
-
-      .box_15 {
-        height: 67px;
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng82651a6dc918e308532b3fe2dc1839fae8d05c8efa7578d83cb239444ce9f549)
-          0px 0px no-repeat;
-        background-size: 97px 67px;
-        margin-left: 2px;
-        width: 96px;
-      }
-
-      .box_16 {
-        width: 72px;
-        height: 50px;
-        margin: 9px 0 0 12px;
-      }
-
-      .text-wrapper_18 {
-        height: 50px;
-        border-radius: 1px;
-        box-shadow: inset 0px 1px 3px 0px rgba(112, 22, 15, 1);
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng245035e9da82a72a23044b1c0c3b0bbb68a44b2232ab4d286959d67553e1f40c)
-          0px -1px no-repeat;
-        background-size: 35px 51px;
-        width: 34px;
-      }
-
-      .text_31 {
-        width: 21px;
-        height: 48px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(255, 255, 255, 1);
-        font-size: 34px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 48px;
-        text-align: center;
-        margin: 1px 0 0 6px;
-      }
-
-      .text-wrapper_19 {
-        height: 50px;
-        border-radius: 1px;
-        box-shadow: inset 0px 1px 3px 0px rgba(112, 22, 15, 1);
-        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng245035e9da82a72a23044b1c0c3b0bbb68a44b2232ab4d286959d67553e1f40c)
-          0px -1px no-repeat;
-        background-size: 35px 51px;
-        width: 34px;
-      }
-
-      .text_32 {
-        width: 21px;
-        height: 48px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(255, 255, 255, 1);
-        font-size: 34px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 48px;
-        text-align: center;
-        margin: 1px 0 0 6px;
-      }
-
-      .text_33 {
-        width: 50px;
-        height: 37px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(51, 51, 51, 1);
-        font-size: 26px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 37px;
-        text-align: center;
-        margin: 15px 0 0 8px;
-      }
-
-      .text-wrapper_20 {
-        width: 32px;
-        height: 22px;
-        margin: 30px 0 0 244px;
-      }
-
-      .text_34 {
-        width: 32px;
-        height: 22px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(102, 102, 102, 1);
-        font-size: 16px;
-        font-family: PingFangSC-Medium;
-        white-space: nowrap;
-        line-height: 22px;
-        text-align: center;
-      }
-
-      .text-wrapper_21 {
-        width: 213px;
-        height: 20px;
-        margin: 60px 0 20px 153px;
-      }
-
-      .text_35 {
-        width: 213px;
-        height: 20px;
-        display: inline-block;
-        overflow-wrap: break-word;
-        color: rgba(153, 153, 153, 1);
-        font-size: 14px;
-        font-family: PingFangSC-Regular;
-        white-space: nowrap;
-        line-height: 20px;
-        text-align: left;
-      }
-
-      .section_4 {
-        position: absolute;
-        left: 0;
-        top: 875px;
-        width: 282px;
-        height: 205px;
-        background-color: rgba(255, 255, 255, 1);
-      }
-    </style>
-  </head>
-  <body>
-      <div class="section_3 flex-row">
-        <div class="box_12 flex-col">
-          <div class="box_13 flex-row justify-between">
-            <div class="text-wrapper_13 flex-col">
-              <span class="text_26">0</span>
-            </div>
-            <div class="text-wrapper_14 flex-col">
-              <span class="text_27">0</span>
-            </div>
-            <div class="text-wrapper_15 flex-col">
-              <span class="text_28">2</span>
-            </div>
-            <div class="text-wrapper_16 flex-col">
-              <span class="text_29">6</span>
-            </div>
-            <div class="text-wrapper_17 flex-col">
-              <span class="text_30">3</span>
-            </div>
-          </div>
-        </div>
-        <div class="box_14 flex-col"></div>
-        <div class="box_15 flex-col">
-          <div class="box_16 flex-row justify-between">
-            <div class="text-wrapper_18 flex-col">
-              <span class="text_31">0</span>
-            </div>
-            <div class="text-wrapper_19 flex-col">
-              <span class="text_32">5</span>
-            </div>
-          </div>
-        </div>
-        <span class="text_33">kwh</span>
-      </div>  
-  </body>
-</html>

@@ -59,6 +59,9 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
+    background-color: #fff;
+    border-radius: 3px;
+    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
   }
   .widget-content {
     display: flex;

@@ -20,10 +20,10 @@
 
 <template>
   <Card
-    :style="{ borderColor: props.controlId === props.checkedId ? '#1a74e8' : '#dcdfe6' }"
+    :style="{ borderColor: props.controlId === props.checkedId ? '#3079FF' : '#fff' }"
     hoverable
     bordered
-    class="w-60 h-60 widget-select !bg-light-50 cursor-pointer"
+    class="w-60 h-60 border-2 widget-select !bg-light-50 cursor-pointer"
     @click="handleClick"
   >
     <div class="widget-container">
@@ -36,6 +36,10 @@
 </template>
 
 <style scoped>
+  .widget-select {
+    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
+    border-width: 2px;
+  }
   .widget-select:deep(.ant-card-body) {
     /* height: 240px; */
     width: 240px;
@@ -48,7 +52,7 @@
   }
 
   .widget-select:deep(.ant-card-meta) {
-    border-top: 1px solid #dcdfe6;
+    border-top: 1px solid #f0f0f0;
     width: 100%;
     height: 40px;
     text-align: center;

@@ -8,8 +8,8 @@ export interface RadioRecord {
 export const DEFAULT_ANIMATION_INTERVAL = 2000;
 
 export const DEFAULT_RADIO_RECORD: RadioRecord = {
-  width: 300,
-  height: 300,
+  width: 200,
+  height: 140,
   isLess: false,
   radio: 1,
 };

 <script lang="ts" setup>
   import { Button, PageHeader, Empty, Spin, Tooltip } from 'ant-design-vue';
-  import { LineChartOutlined, RollbackOutlined } from '@ant-design/icons-vue';
   import { GridItem, GridLayout } from 'vue3-grid-layout';
   import { nextTick, onMounted, ref } from 'vue';
   import WidgetWrapper from '../components/WidgetWrapper/WidgetWrapper.vue';
@@ -39,6 +38,8 @@
   import { useSocketConnect } from '../hook/useSocketConnect';
   import { buildUUID } from '/@/utils/uuid';
   import HistoryTrendModal from './components/HistoryTrendModal.vue';
+  import trendIcon from '/@/assets/svg/trend.svg';
+  import backIcon from '/@/assets/images/back.png';
 
   const ROUTE = useRoute();
 
@@ -71,7 +72,7 @@
   const resizable = ref(!unref(getIsSharePage));
 
   const GirdLayoutColNum = 24;
-  const GridLayoutMargin = 10;
+  const GridLayoutMargin = 20;
 
   const handleBack = () => {
     if (unref(getIsSharePage)) return;
@@ -227,7 +228,7 @@
   const loading = ref(false);
   const getDataBoardComponent = async () => {
     try {
-      // dataBoardList.value = [];
+      dataBoardList.value = [];
       loading.value = true;
       const data = await getDataBoradDetail();
 
@@ -326,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,
@@ -347,7 +352,6 @@
       if (!dataBoardId) return;
       await deleteDataComponent({ dataBoardId, ids: [id] });
       createMessage.success('删除成功');
-      await handleSaveLayoutInfo();
       await getDataBoardComponent();
     } catch (error) {
       // createMessage.error('删除失败');
@@ -366,12 +370,17 @@
 </script>
 
 <template>
-  <section class="bg-light-50 flex flex-col overflow-hidden h-full w-full">
+  <section class="flex flex-col overflow-hidden h-full w-full board-detail">
     <PageHeader>
       <template #title>
         <div class="flex items-center">
-          <RollbackOutlined v-if="!getIsSharePage" class="mr-3" @click="handleBack" />
-          <span>{{ getDataBoardName }}</span>
+          <img
+            :src="backIcon"
+            v-if="!getIsSharePage"
+            class="mr-3 cursor-pointer"
+            @click="handleBack"
+          />
+          <span class="text-lg" color="#333">{{ getDataBoardName }}</span>
         </div>
       </template>
       <template #extra>
@@ -382,7 +391,7 @@
         </Authority>
       </template>
       <div>
-        <span class="mr-3 text-gray-400">已创建组件:</span>
+        <span class="mr-3 text-sm" style="color: #666">已创建组件:</span>
         <span style="color: #409eff"> {{ dataBoardList.length }}个</span>
       </div>
     </PageHeader>
@@ -429,10 +438,16 @@
                 >
                   <template #moreAction>
                     <Tooltip title="趋势">
-                      <LineChartOutlined
+                      <!-- <LineChartOutlined
                         v-if="!getIsSharePage"
                         class="cursor-pointer mx-1"
                         @click="handleOpenHistroyDataModal(item.record.dataSource)"
+                      /> -->
+                      <img
+                        :src="trendIcon"
+                        v-if="!getIsSharePage"
+                        class="cursor-pointer w-4.5 h-4.5"
+                        @click="handleOpenHistroyDataModal(item.record.dataSource)"
                       />
                     </Tooltip>
                   </template>
@@ -464,10 +479,11 @@
   </section>
 </template>
 
-<style>
+<style lang="less" scoped>
   .vue-grid-item:not(.vue-grid-placeholder) {
-    background: #fcfcfc;
-    border: 1px solid black;
+    background: #fff;
+    border: none !important;
+    /* border: 1px solid black; */
   }
   .vue-grid-item .resizing {
     opacity: 0.9;
@@ -513,15 +529,35 @@
     cursor: pointer;
   }
 
-  .container {
-    display: grid;
-    grid-template-columns: 3;
-    grid-row: 3;
-  }
+  // .container {
+  //   display: grid;
+  //   grid-template-columns: 3;
+  //   grid-row: 3;
+  // }
 
   .grid-item-layout {
     overflow: hidden;
     border: 1px solid #eee !important;
     background-color: #fcfcfc !important;
   }
+
+  .board-detail:deep(.ant-page-header) {
+    padding: 20px 20px 0 20px;
+  }
+
+  .board-detail:deep(.ant-page-header-heading) {
+    height: 78px;
+    padding: 0 20px 0 20px;
+    box-sizing: border-box;
+    background-color: #fff;
+  }
+
+  .board-detail:deep(.ant-page-header-heading-extra) {
+    margin: 0;
+    line-height: 78px;
+  }
+
+  .board-detail:deep(.ant-page-header-content) {
+    padding-top: 20px;
+  }
 </style>

@@ -3,6 +3,7 @@ import { Ref, unref } from 'vue';
 import { DataBoardLayoutInfo } from '../types/type';
 import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
 import { getAuthCache } from '/@/utils/auth';
+import { isNullAndUnDef } from '/@/utils/is';
 
 interface SocketMessage {
   tsSubCmds: SocketMessageItem[];
@@ -74,10 +75,9 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
     },
     onMessage(_ws, message) {
       try {
-        // console.log({ dataSource: unref(dataSourceRef), cmdIdMapping });
         const res: ResponseMessage = JSON.parse(message.data);
         const { subscriptionId, data = {} } = res;
-        if (!subscriptionId) return;
+        if (isNullAndUnDef(subscriptionId)) return;
         const mappingRecord = cmdIdMapping.get(subscriptionId);
         if (!mappingRecord) return;
         const { attribute, recordIndex, dataSourceIndex } = mappingRecord;
@@ -132,17 +132,20 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
   };
 
   const beginSendMessage = () => {
-    // close();
+    close();
     cmdIdMapping.clear();
 
-    // open();
-    const messageList = transformSocketMessageItem();
+    // TODO current need use setTimeout delay 1 second to reconnect
+    setTimeout(() => {
+      open();
+      const messageList = transformSocketMessageItem();
 
-    if (unref(status) !== 'OPEN') {
-      waitSendQueue.push(JSON.stringify(messageList));
-      return;
-    }
-    send(JSON.stringify(messageList));
+      if (unref(status) !== 'OPEN') {
+        waitSendQueue.push(JSON.stringify(messageList));
+        return;
+      }
+      send(JSON.stringify(messageList));
+    }, 1000);
   };
 
   return {

@@ -30,7 +30,7 @@
   const dataBoardList = ref<DataBoardRecord[]>([]);
   //分页相关
   const page = ref(1);
-  const pageSize = ref(36);
+  const pageSize = ref(10);
   const total = ref(0);
   const paginationProp = ref({
     showSizeChanger: false,
@@ -46,9 +46,11 @@
   function pageChange(p, pz) {
     page.value = p;
     pageSize.value = pz;
+    getDatasource();
   }
   function pageSizeChange(_current, size) {
     pageSize.value = size;
+    getDatasource();
   }
 
   const createShareUrl = (boardId: string, tenantId: string, name: string) => {
@@ -147,9 +149,14 @@
     const listContainerHeight =
       clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
     const listContainerEl = (unref(listEL).$el as HTMLElement).querySelector(
-      '.ant-spin-nested-loading'
+      '.ant-spin-container'
     ) as HTMLElement;
-    listContainerEl && (listContainerEl.style.minHeight = listContainerHeight + 'px');
+    listContainerEl &&
+      // (listContainerEl.style.minHeight = listContainerHeight + 'px') &&
+      // (listContainerEl.style.maxHeight = listContainerHeight + 'px') &&
+      (listContainerEl.style.height = listContainerHeight + 'px') &&
+      (listContainerEl.style.overflowY = 'auto') &&
+      (listContainerEl.style.overflowX = 'hidden');
   };
 
   onMounted(() => {