feat: implement TextComponent && DigitalDashboardComponent echo real data

@@ -14,12 +14,14 @@ VITE_PUBLIC_PATH = /
 # VITE_PROXY = [["/api","http://101.133.234.90:8080/api"]]
 # VITE_PROXY = [["/api","http://101.133.234.90:8080/api"]]
 # 线上测试环境
 # 线上测试环境
 # VITE_PROXY = [["/api","http://localhost:8080/api"],["/thingskit-drawio","http://localhost:3000/"]]
 # VITE_PROXY = [["/api","http://localhost:8080/api"],["/thingskit-drawio","http://localhost:3000/"]]
-VITE_PROXY = [["/api","https://dev.thingskit.com/api"],["/thingskit-drawio","http://localhost:3000/"]]
+# VITE_PROXY = [["/api","https://dev.thingskit.com/api"],["/thingskit-drawio","http://localhost:3000/"]]
+VITE_PROXY = [["/api","http://121.37.251.8:8080/api"],["/thingskit-drawio","http://localhost:3000/"]]
 # VITE_PROXY = [["/api","http://192.168.10.106:8080/api"],["/thingskit-drawio","http://192.168.10.106:8080/api"]]
 # VITE_PROXY = [["/api","http://192.168.10.106:8080/api"],["/thingskit-drawio","http://192.168.10.106:8080/api"]]
 
 
 # 实时数据的ws地址
 # 实时数据的ws地址
 # VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=
 # VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=
-VITE_WEB_SOCKET = ws://44.99.141.212:8080/api/ws/plugins/telemetry?token=
+# VITE_WEB_SOCKET = ws://44.99.141.212:8080/api/ws/plugins/telemetry?token=
+VITE_WEB_SOCKET = ws://121.37.251.8:8080/api/ws/plugins/telemetry?token=
 
 
 # Delete console
 # Delete console
 VITE_DROP_CONSOLE = true
 VITE_DROP_CONSOLE = true
@@ -37,5 +39,5 @@ VITE_GLOB_API_URL_PREFIX=/yt
 VITE_GLOB_CONFIGURATION = /thingskit-drawio
 VITE_GLOB_CONFIGURATION = /thingskit-drawio
 
 
 # Content Security Policy
 # Content Security Policy
-VITE_CONTENT_SECURITY_POLICY = true
+VITE_CONTENT_SECURITY_POLICY = false
 
 

@@ -6,6 +6,7 @@
   ],
   ],
   "commentTranslate.targetLanguage": "en",
   "commentTranslate.targetLanguage": "en",
   "cSpell.words": [
   "cSpell.words": [
+    "Cmds",
     "unref"
     "unref"
   ]
   ]
 }
 }

@@ -62,6 +62,8 @@ export interface ComponentInfo {
   gradientInfo: GradientInfo[];
   gradientInfo: GradientInfo[];
   iconColor: string;
   iconColor: string;
   icon: string;
   icon: string;
+  value?: string | number;
+  updateTime?: number;
 }
 }
 
 
 export interface DataSource {
 export interface DataSource {

@@ -122,7 +122,7 @@
   }>();
   }>();
   const activeKey = ref('1');
   const activeKey = ref('1');
   let entityId = null;
   let entityId = null;
-  // 图表tab切换选项卡
+  // 图表tab切换选项卡 1965 1280 1861 836
   const tabListTitle = [
   const tabListTitle = [
     {
     {
       key: '1',
       key: '1',

@@ -51,6 +51,7 @@
       option && unref(chartRef)?.setOption(option);
       option && unref(chartRef)?.setOption(option);
     });
     });
   }
   }
+
   const getRadio = computed(() => {
   const getRadio = computed(() => {
     const { radio } = props.radio;
     const { radio } = props.radio;
     return radio;
     return radio;
@@ -93,10 +94,12 @@
       >
       >
         <Tooltip
         <Tooltip
           placement="topLeft"
           placement="topLeft"
-          :title="props.value.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT)"
+          :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
         >
         >
           <span class="mr-2">更新时间:</span>
           <span class="mr-2">更新时间:</span>
-          <span> {{ props.value.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT) }}</span>
+          <span>
+            {{ dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT) }}
+          </span>
         </Tooltip>
         </Tooltip>
       </div>
       </div>
     </div>
     </div>

@@ -17,20 +17,21 @@
   }>();
   }>();
 
 
   const integerPart = computed(() => {
   const integerPart = computed(() => {
-    const { value = 0 } = props.value;
+    let { value = 0 } = props.value;
     const { max = 5 } = props.layout;
     const { max = 5 } = props.layout;
-    let _value = value?.toFixed(2).split('.')[0];
+    if (isNaN(value)) value = 0;
+    let _value = Number(value).toFixed(2).split('.')[0];
     if (_value.length < max) _value = _value.padStart(5, '0');
     if (_value.length < max) _value = _value.padStart(5, '0');
-
     if (_value.length > max) _value = ''.padStart(5, '9');
     if (_value.length > max) _value = ''.padStart(5, '9');
 
 
     return _value;
     return _value;
   });
   });
 
 
   const decimalPart = computed(() => {
   const decimalPart = computed(() => {
-    const { value = 0 } = props.value;
+    let { value = 0 } = props.value;
     const { keepNumber = 2 } = props.layout;
     const { keepNumber = 2 } = props.layout;
-    let _value = value?.toFixed(2).split('.')[1];
+    if (isNaN(value)) value = 0;
+    let _value = Number(value)?.toFixed(2).split('.')[1];
     if (_value.length < keepNumber) _value = _value.padStart(5, '0');
     if (_value.length < keepNumber) _value = _value.padStart(5, '0');
 
 
     if (_value.length > keepNumber) _value = ''.padStart(5, '0');
     if (_value.length > keepNumber) _value = ''.padStart(5, '0');
@@ -91,10 +92,12 @@
       >
       >
         <Tooltip
         <Tooltip
           placement="topLeft"
           placement="topLeft"
-          :title="props.value.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT)"
+          :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
         >
         >
           <span class="mr-1">更新时间:</span>
           <span class="mr-1">更新时间:</span>
-          <span>{{ props.value.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT) }}</span>
+          <span>
+            {{ dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT) }}
+          </span>
         </Tooltip>
         </Tooltip>
       </div>
       </div>
     </div>
     </div>

@@ -288,9 +288,9 @@ export const transformDashboardComponentConfig = (
     value: {
     value: {
       id: buildUUID(),
       id: buildUUID(),
       name: dataSourceRecord.attributeRename || dataSourceRecord.attribute,
       name: dataSourceRecord.attributeRename || dataSourceRecord.attribute,
-      // value: record.va
+      value: dataSourceRecord.componentInfo.value,
       unit: dataSourceRecord.componentInfo.unit,
       unit: dataSourceRecord.componentInfo.unit,
-      updateTime: record.updateTime || record.createTime,
+      updateTime: dataSourceRecord.componentInfo.updateTime,
       fontColor: dataSourceRecord.componentInfo.fontColor,
       fontColor: dataSourceRecord.componentInfo.fontColor,
       gradientInfo: dataSourceRecord.componentInfo.gradientInfo,
       gradientInfo: dataSourceRecord.componentInfo.gradientInfo,
     },
     },

@@ -90,14 +90,14 @@
     <div v-if="getShowUpdate" class="text-center text-xs text-gray-400 truncate">
     <div v-if="getShowUpdate" class="text-center text-xs text-gray-400 truncate">
       <Tooltip
       <Tooltip
         placement="topLeft"
         placement="topLeft"
-        :title="props.value.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT)"
+        :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
       >
       >
         <span>更新时间:</span>
         <span>更新时间:</span>
         <span
         <span
           :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
           :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
           class="truncate"
           class="truncate"
         >
         >
-          {{ props.value.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT) }}
+          {{ dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT) }}
         </span>
         </span>
       </Tooltip>
       </Tooltip>
     </div>
     </div>

@@ -88,10 +88,10 @@ export const transformTextComponentConfig = (
     } as TextComponentLayout,
     } as TextComponentLayout,
     value: {
     value: {
       name: dataSourceRecord.attributeRename || dataSourceRecord.attribute,
       name: dataSourceRecord.attributeRename || dataSourceRecord.attribute,
-      // value: record.va
+      value: dataSourceRecord.componentInfo.value,
       icon: dataSourceRecord.componentInfo.icon,
       icon: dataSourceRecord.componentInfo.icon,
       unit: dataSourceRecord.componentInfo.unit,
       unit: dataSourceRecord.componentInfo.unit,
-      updateTime: record.updateTime || record.createTime,
+      updateTime: dataSourceRecord.componentInfo.updateTime,
       fontColor: dataSourceRecord.componentInfo.fontColor,
       fontColor: dataSourceRecord.componentInfo.fontColor,
       iconColor: dataSourceRecord.componentInfo.iconColor,
       iconColor: dataSourceRecord.componentInfo.iconColor,
     } as TextComponentValue,
     } as TextComponentValue,

@@ -23,6 +23,7 @@
   import { DataBoardLayoutInfo } from '../types/type';
   import { DataBoardLayoutInfo } from '../types/type';
   import { WidgetComponentType } from './config/visualOptions';
   import { WidgetComponentType } from './config/visualOptions';
   import Authority from '/@/components/Authority/src/Authority.vue';
   import Authority from '/@/components/Authority/src/Authority.vue';
+  import { useSocketConnect } from '../hook/useSocketConnect';
 
 
   const ROUTE = useRoute();
   const ROUTE = useRoute();
 
 
@@ -43,9 +44,6 @@
   const GirdLayoutColNum = 24;
   const GirdLayoutColNum = 24;
   const GridLayoutMargin = 10;
   const GridLayoutMargin = 10;
 
 
-  const defaultWidth = 6;
-  const defaultHeight = 6;
-
   const handleBack = () => {
   const handleBack = () => {
     ROUTER.go(-1);
     ROUTER.go(-1);
   };
   };
@@ -164,6 +162,8 @@
     } catch (error) {}
     } catch (error) {}
   };
   };
 
 
+  const { beginSendMessage } = useSocketConnect(dataBoardList);
+
   const getDataBoardComponent = async () => {
   const getDataBoardComponent = async () => {
     try {
     try {
       // dataBoardList.value = [];
       // dataBoardList.value = [];
@@ -178,8 +178,8 @@
         }
         }
         return {
         return {
           i: item.id,
           i: item.id,
-          w: layout.w || defaultWidth,
-          h: layout.h || defaultHeight,
+          w: layout.w || DEFAULT_WIDGET_WIDTH,
+          h: layout.h || DEFAULT_WIDGET_HEIGHT,
           x: layout.x || 0,
           x: layout.x || 0,
           y: layout.y || 0,
           y: layout.y || 0,
           record: {
           record: {
@@ -189,6 +189,7 @@
           },
           },
         };
         };
       });
       });
+      beginSendMessage();
     } catch (error) {}
     } catch (error) {}
   };
   };
 
 

+import { useWebSocket } from '@vueuse/core';
+import { Ref, unref } from 'vue';
+import { DataBoardLayoutInfo } from '../types/type';
+import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
+import { getAuthCache } from '/@/utils/auth';
+
+interface SocketMessage {
+  tsSubCmds: SocketMessageItem[];
+}
+
+interface SocketMessageItem {
+  entityType: string;
+  entityId: string;
+  scope: string;
+  cmdId: number;
+  keys: string;
+}
+
+interface CmdMapping {
+  componentId: string;
+  deviceId: string;
+  recordIndex: number;
+  dataSourceIndex: number;
+  attribute: string;
+}
+
+interface ResponseMessage {
+  subscriptionId: number;
+  errorCode: number;
+  errorMsg: Nullable<string>;
+  data: {
+    [key: string]: [[number, string]];
+  };
+  latestValues: {
+    [key: string]: number;
+  };
+}
+
+const generateMessage = (deviceId: string, cmdId: number, attr: string): SocketMessageItem => {
+  return {
+    entityType: 'DEVICE',
+    entityId: deviceId,
+    scope: 'LATEST_TELEMETRY',
+    cmdId,
+    keys: attr,
+  };
+};
+
+export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
+  const token = getAuthCache(JWT_TOKEN_KEY);
+
+  const cmdIdMapping = new Map<number, CmdMapping>();
+
+  const waitSendQueue: string[] = [];
+
+  const config = {
+    server: `${import.meta.env.VITE_WEB_SOCKET}${token}`,
+  };
+
+  const getNeedUpdateValueById = (componentId: string, deviceId: string) => {};
+
+  const getNeedUpdateValueByIndex = (recordIndex: number, dataSourceIndex: number) => {
+    return unref(dataSourceRef)[recordIndex].record.dataSource[dataSourceIndex];
+  };
+
+  const { close, send, open, status } = useWebSocket(config.server, {
+    onConnected() {
+      if (waitSendQueue.length) {
+        waitSendQueue.forEach((string) => {
+          send(string);
+        });
+        waitSendQueue.length = 0;
+      }
+    },
+    onMessage(ws, message) {
+      try {
+        const res: ResponseMessage = JSON.parse(message.data);
+        const { subscriptionId, data = {} } = res;
+        const mappingRecord = cmdIdMapping.get(subscriptionId);
+        if (!mappingRecord) return;
+        const { attribute, recordIndex, dataSourceIndex } = mappingRecord;
+        const [[timespan, value]] = data[attribute];
+        const record = getNeedUpdateValueByIndex(recordIndex, dataSourceIndex);
+        record.componentInfo.value = value;
+        record.componentInfo.updateTime = timespan;
+      } catch (error) {
+        throw Error(error as string);
+      }
+    },
+    onDisconnected() {
+      close();
+    },
+  });
+
+  const setCmdId = (cmdId: number, record: CmdMapping) => {
+    cmdIdMapping.set(cmdId, record);
+  };
+
+  const transformSocketMessageItem = () => {
+    const messageList: SocketMessageItem[] = [];
+    console.log(dataSourceRef);
+    unref(dataSourceRef).forEach((record, recordIndex) => {
+      const componentId = record.record.id;
+      record.record.dataSource.forEach((dataSource, dataSourceIndex) => {
+        const { deviceId, attribute } = dataSource;
+        const cmdId = recordIndex * dataSourceIndex + recordIndex;
+        setCmdId(cmdId, {
+          componentId,
+          deviceId,
+          recordIndex,
+          dataSourceIndex,
+          attribute,
+        });
+
+        messageList.push(generateMessage(deviceId, cmdId, attribute));
+      });
+    });
+    return {
+      tsSubCmds: messageList,
+    } as SocketMessage;
+  };
+
+  const beginSendMessage = () => {
+    // close();
+    cmdIdMapping.clear();
+
+    // open();
+    const messageList = transformSocketMessageItem();
+
+    if (unref(status) !== 'OPEN') {
+      waitSendQueue.push(JSON.stringify(messageList));
+      return;
+    }
+    send(JSON.stringify(messageList));
+  };
+
+  return {
+    close,
+    send,
+    open,
+    beginSendMessage,
+  };
+}