Merge branch 'ww' into 'main'

fix: BUG in teambition

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

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="54px" height="54px" viewBox="0 0 54 54" 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(-322.000000, -326.000000)" fill="#377DFF">
+            <g id="1" transform="translate(302.000000, 234.000000)">
+                <g id="组件图标" transform="translate(20.000000, 92.000000)">
+                    <rect id="矩形" opacity="0.1" x="0" y="0" width="54" height="54" rx="22"></rect>
+                    <g id="组件" transform="translate(13.500000, 15.000000)" fill-rule="nonzero">
+                        <path d="M25.2323972,16.1837421 C25.0692247,16.1837421 24.9060522,16.2163766 24.7577136,16.2816456 L24.7517801,16.2846123 L24.7458465,16.2846123 L13.2377373,21.1886867 L1.72666139,16.2875791 L1.72072785,16.2875791 L1.7147943,16.2846123 C1.5664557,16.2223101 1.40921677,16.1867089 1.24011076,16.1867089 C0.554786392,16.1867089 0,16.7592959 0,17.4653877 C0,17.9994066 0.31744462,18.4533228 0.765427215,18.646163 L12.7482199,23.7519778 L12.760087,23.7549446 C13.0626978,23.8854826 13.4068434,23.8854826 13.7094541,23.7549446 L13.7153877,23.7519778 C13.7183544,23.7519778 13.7183544,23.7490111 13.7213212,23.7490111 L25.7041139,18.6431962 C26.1520965,18.450356 26.469553,17.9964399 26.469553,17.4624209 C26.4725079,16.7563291 25.9177215,16.1837421 25.2323972,16.1837421 Z M25.2323972,10.650712 C24.9980222,10.6447785 24.7577136,10.7456487 24.7577136,10.7456487 L13.2377373,15.6526899 L1.7147943,10.7456487 C1.7147943,10.7456487 1.40921677,10.650712 1.24011076,10.650712 C0.554786392,10.650712 0,11.2203323 0,11.9264241 C0,12.4574763 0.31744462,12.9143592 0.765427215,13.1042326 L12.7482199,18.2070807 C12.7511867,18.2070807 12.7511867,18.2100475 12.7541535,18.2100475 L12.7571203,18.2130142 C12.9054589,18.2753165 13.0626978,18.3109177 13.2318038,18.3109177 C13.4009098,18.3109177 13.5611155,18.2753165 13.7064873,18.2130142 L13.7124209,18.2100475 C13.7153877,18.2100475 13.7153877,18.2100475 13.7183544,18.2070807 L25.7011472,13.1042326 C26.1491297,12.9143592 26.4665744,12.4574763 26.469553,11.9264241 C26.4725079,11.2203323 25.9177215,10.650712 25.2323972,10.650712 L25.2323972,10.650712 Z M0.765427215,7.57120253 L12.7482199,12.6770174 C12.7511867,12.6770174 12.7511867,12.6770174 12.7541535,12.6799842 L12.7571203,12.6829509 C12.9054589,12.7452532 13.0626978,12.7778877 13.2318038,12.7778877 C13.3949763,12.7778877 13.555182,12.7452532 13.7064873,12.6829509 L13.7124209,12.6799842 L13.7183544,12.6770174 L25.7011472,7.5741693 C26.1491297,7.38132911 26.4665744,6.92741297 26.4695411,6.39636076 C26.4695411,5.86234177 26.1520965,5.40842563 25.7041139,5.21558544 L13.7213212,0.106803797 C13.7183544,0.106803797 13.7183544,0.106803797 13.7153877,0.103837025 L13.7094541,0.100870253 C13.4068434,-0.0296677215 13.0626978,-0.0296677215 12.760087,0.100870253 L12.7571203,0.103837025 L0.765427215,5.21261867 C0.31744462,5.40249209 0,5.859375 0,6.39339399 C0,6.9244462 0.31744462,7.37836234 0.765427215,7.57120253 Z" id="形状"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

@@ -89,6 +89,16 @@
     }
     }
   );
   );
 
 
+  watch(
+    () => props.radio,
+    () => {
+      const option = beforeUpdateFn(props.layout.componentType);
+      setTimeout(() => {
+        unref(chartRef)?.setOption((option(unref(getRadio)) as unknown as EChartsOption) || {});
+      });
+    }
+  );
+
   let timeout: Nullable<number> = null;
   let timeout: Nullable<number> = null;
 
 
   function handleRandomValue() {
   function handleRandomValue() {
@@ -101,6 +111,7 @@
     initChart();
     initChart();
     props.add && props.add(props.value.id, update);
     props.add && props.add(props.value.id, update);
     if (props.random) timeout = setInterval(handleRandomValue, 2000) as unknown as number;
     if (props.random) timeout = setInterval(handleRandomValue, 2000) as unknown as number;
+    console.log(unref(chartRef));
   });
   });
 
 
   onUnmounted(() => {
   onUnmounted(() => {

@@ -107,10 +107,9 @@ export const instrumentComponent1 = (params?: Partial<ComponentInfo>): EChartsOp
           lineHeight: 30,
           lineHeight: 30,
           borderRadius: 8,
           borderRadius: 8,
           offsetCenter: [0, '-15%'],
           offsetCenter: [0, '-15%'],
-          // fontSize: 16,
           fontSize: 14,
           fontSize: 14,
           fontWeight: 'bolder',
           fontWeight: 'bolder',
-          formatter: `{value} ${unit ?? '°C'}`,
+          formatter: `{value} ${unit ?? ''}`,
           color: params?.fontColor || 'inherit',
           color: params?.fontColor || 'inherit',
         },
         },
         data: [
         data: [
@@ -219,7 +218,7 @@ export const instrumentComponent2 = (params?: Partial<ComponentInfo>): EChartsOp
         },
         },
         detail: {
         detail: {
           valueAnimation: true,
           valueAnimation: true,
-          formatter: `{value} ${unit}`,
+          formatter: `{value} ${unit ?? ''}`,
           color: params?.fontColor || 'inherit',
           color: params?.fontColor || 'inherit',
           fontSize: 14,
           fontSize: 14,
         },
         },

@@ -46,12 +46,18 @@
     getAllDataSourceFieldValue: Fn<any, Recordable>;
     getAllDataSourceFieldValue: Fn<any, Recordable>;
   }>();
   }>();
 
 
+  const resetForm = () => {
+    isEdit.value = false;
+    frontId.value = '';
+    componentRecord.value = {} as unknown as DataBoardLayoutInfo;
+    componentDefaultConfig.value = {};
+  };
+
   const handleSubmit = () => {
   const handleSubmit = () => {
     const { getAllDataSourceFieldValue } = unref(basicConfigurationEl)!;
     const { getAllDataSourceFieldValue } = unref(basicConfigurationEl)!;
     const value = getAllDataSourceFieldValue();
     const value = getAllDataSourceFieldValue();
     unref(isEdit) ? handleUpdateComponent(value) : handleAddComponent(value);
     unref(isEdit) ? handleUpdateComponent(value) : handleAddComponent(value);
-    isEdit.value = false;
-    frontId.value = '';
+    resetForm();
   };
   };
 
 
   const handleAddComponent = async (value: Recordable) => {
   const handleAddComponent = async (value: Recordable) => {
@@ -111,6 +117,7 @@
     width="70%"
     width="70%"
     :destroy-on-close="true"
     :destroy-on-close="true"
     @ok="handleSubmit"
     @ok="handleSubmit"
+    @cancel="resetForm"
   >
   >
     <section>
     <section>
       <Tabs type="card">
       <Tabs type="card">

@@ -228,6 +228,12 @@
       // dataBoardList.value = [];
       // dataBoardList.value = [];
       loading.value = true;
       loading.value = true;
       const data = await getDataBoradDetail();
       const data = await getDataBoradDetail();
+
+      if (!data.data.componentData) {
+        dataBoardList.value = [];
+        console.log(unref(dataBoardList));
+        return;
+      }
       dataBoardList.value = data.data.componentData.map((item) => {
       dataBoardList.value = data.data.componentData.map((item) => {
         const index = data.data.componentLayout.findIndex((each) => item.id === each.id);
         const index = data.data.componentLayout.findIndex((each) => item.id === each.id);
         let layout;
         let layout;
@@ -350,9 +356,9 @@
       </template>
       </template>
       <template #extra>
       <template #extra>
         <Authority value="api:yt:data_component:add:post">
         <Authority value="api:yt:data_component:add:post">
-          <Button v-if="!getIsSharePage" type="primary" @click="handleOpenCreatePanel"
-            >创建组件</Button
-          >
+          <Button v-if="!getIsSharePage" type="primary" @click="handleOpenCreatePanel">
+            创建组件
+          </Button>
         </Authority>
         </Authority>
       </template>
       </template>
       <div>
       <div>

@@ -77,6 +77,7 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
         // console.log({ dataSource: unref(dataSourceRef), cmdIdMapping });
         // console.log({ dataSource: unref(dataSourceRef), cmdIdMapping });
         const res: ResponseMessage = JSON.parse(message.data);
         const res: ResponseMessage = JSON.parse(message.data);
         const { subscriptionId, data = {} } = res;
         const { subscriptionId, data = {} } = res;
+        if (!subscriptionId) return;
         const mappingRecord = cmdIdMapping.get(subscriptionId);
         const mappingRecord = cmdIdMapping.get(subscriptionId);
         if (!mappingRecord) return;
         if (!mappingRecord) return;
         const { attribute, recordIndex, dataSourceIndex } = mappingRecord;
         const { attribute, recordIndex, dataSourceIndex } = mappingRecord;
@@ -102,8 +103,14 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
     let index = 0;
     let index = 0;
     unref(dataSourceRef).forEach((record, recordIndex) => {
     unref(dataSourceRef).forEach((record, recordIndex) => {
       const componentId = record.record.id;
       const componentId = record.record.id;
-      record.record.dataSource.forEach((dataSource, dataSourceIndex) => {
+      for (
+        let dataSourceIndex = 0;
+        dataSourceIndex < record.record.dataSource.length;
+        dataSourceIndex++
+      ) {
+        const dataSource = record.record.dataSource[dataSourceIndex];
         const { deviceId, attribute, slaveDeviceId, gatewayDevice } = dataSource;
         const { deviceId, attribute, slaveDeviceId, gatewayDevice } = dataSource;
+        if (!attribute) continue;
         const cmdId = index;
         const cmdId = index;
         index++;
         index++;
         setCmdId(cmdId, {
         setCmdId(cmdId, {
@@ -117,7 +124,7 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
         messageList.push(
         messageList.push(
           generateMessage(gatewayDevice ? slaveDeviceId : deviceId, cmdId, attribute)
           generateMessage(gatewayDevice ? slaveDeviceId : deviceId, cmdId, attribute)
         );
         );
-      });
+      }
     });
     });
     return {
     return {
       tsSubCmds: messageList,
       tsSubCmds: messageList,

@@ -160,8 +160,8 @@
 
 
 <template>
 <template>
   <PageWrapper>
   <PageWrapper>
-    <div class="flex mb-6 items-center">
-      <div class="text-lg mr-6 font-bold">自定义看板</div>
+    <div class="flex mb-6 items-center bg-light-100 h-78px">
+      <div class="text-lg ml-30px mr-9px font-bold">自定义看板</div>
       <Authority value="api:yt:data_board:add:post">
       <Authority value="api:yt:data_board:add:post">
         <Button type="primary" @click="handleOpenDetailModal">创建看板</Button>
         <Button type="primary" @click="handleOpenDetailModal">创建看板</Button>
       </Authority>
       </Authority>
@@ -171,11 +171,14 @@
         ref="listEL"
         ref="listEL"
         :pagination="paginationProp"
         :pagination="paginationProp"
         :data-source="dataBoardList"
         :data-source="dataBoardList"
-        :grid="{ gutter: 5, column: 4, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 3 }"
+        :grid="{ gutter: 20, column: 4, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 3 }"
       >
       >
         <template #renderItem="{ item }">
         <template #renderItem="{ item }">
           <ListItem>
           <ListItem>
             <Card class="data-card cursor-pointer">
             <Card class="data-card cursor-pointer">
+              <template #title>
+                <div>{{ item.name }}</div>
+              </template>
               <template #extra>
               <template #extra>
                 <Dropdown
                 <Dropdown
                   v-if="dropMenuList.length"
                   v-if="dropMenuList.length"
@@ -188,17 +191,17 @@
               </template>
               </template>
               <!-- <template #cover>title</template> -->
               <!-- <template #cover>title</template> -->
               <section @click="handleViewBoard(item)">
               <section @click="handleViewBoard(item)">
-                <div class="flex justify-between items-center">
-                  <div>{{ item.name }}</div>
-                  <div class="flex content-center">
-                    <Statistic :value="item.componentNum">
+                <div class="flex data-card__info">
+                  <div>
+                    <div>组件数量</div>
+                    <Statistic style="font-size: 22px" :value="item.componentNum">
                       <template #suffix>
                       <template #suffix>
-                        <span class="text-sm">个组件</span>
+                        <span class="text-sm">个</span>
                       </template>
                       </template>
                     </Statistic>
                     </Statistic>
                   </div>
                   </div>
                 </div>
                 </div>
-                <div class="flex justify-between mt-4">
+                <div class="flex justify-between mt-4 text-sm" style="color: #999999">
                   <div>
                   <div>
                     <span>
                     <span>
                       {{ item.viewType === ViewType.PRIVATE_VIEW ? '私有看板' : '公共看板' }}
                       {{ item.viewType === ViewType.PRIVATE_VIEW ? '私有看板' : '公共看板' }}
@@ -221,13 +224,30 @@
   </PageWrapper>
   </PageWrapper>
 </template>
 </template>
 
 
-<style scoped>
+<style scoped lang="less">
   .data-card:deep(.ant-card-head) {
   .data-card:deep(.ant-card-head) {
+    padding: 20px;
+  }
+
+  .data-card:deep(.ant-card-head-title) {
     padding: 0;
     padding: 0;
-    height: 40px;
-    min-height: 40px;
   }
   }
   .data-card:deep(.ant-card-extra) {
   .data-card:deep(.ant-card-extra) {
-    padding: 8px;
+    padding: 0;
+  }
+  .data-card:deep(.ant-card-body) {
+    padding: 20px;
+  }
+
+  .data-card__info {
+    color: #666666;
+
+    &::before {
+      content: '';
+      width: 54px;
+      height: 54px;
+      margin-right: 16px;
+      background-image: url('/@/assets/svg/component.svg');
+    }
   }
   }
 </style>
 </style>

@@ -112,7 +112,7 @@
       const wrapRef = ref<HTMLDivElement | null>(null);
       const wrapRef = ref<HTMLDivElement | null>(null);
       const chartRef = ref<HTMLDivElement | null>(null);
       const chartRef = ref<HTMLDivElement | null>(null);
       const deviceAttrs = ref<string[]>([]);
       const deviceAttrs = ref<string[]>([]);
-      const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const { setOptions, getInstance, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
       const isNull = ref(true);
       const isNull = ref(true);
       const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
       const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
       const [registerDetailDrawer, { openDrawer }] = useDrawer();
       const [registerDetailDrawer, { openDrawer }] = useDrawer();
@@ -270,6 +270,7 @@
           // 发送请求
           // 发送请求
           loading.value = true;
           loading.value = true;
           const res = await getDeviceHistoryInfo(searchParams);
           const res = await getDeviceHistoryInfo(searchParams);
+          loading.value = false;
           // 判断数据对象是否为空
           // 判断数据对象是否为空
           if (!Object.keys(res).length) {
           if (!Object.keys(res).length) {
             isNull.value = false;
             isNull.value = false;
@@ -278,7 +279,6 @@
             isNull.value = true;
             isNull.value = true;
           }
           }
           setChartOptions(res, value.keys);
           setChartOptions(res, value.keys);
-          loading.value = false;
         },
         },
       });
       });
 
 
@@ -332,6 +332,7 @@
           startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
           startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
           endTs: Date.now(),
           endTs: Date.now(),
           agg: AggregateDataEnum.NONE,
           agg: AggregateDataEnum.NONE,
+          limit: 7,
         });
         });
 
 
         // 判断对象是否为空
         // 判断对象是否为空
@@ -371,6 +372,7 @@
             data: dataArray.filter((item1) => item1[2] === item),
             data: dataArray.filter((item1) => item1[2] === item),
           };
           };
         });
         });
+        resize();
         // 设置数据
         // 设置数据
         setOptions(eChartOptions(series, keys));
         setOptions(eChartOptions(series, keys));
       }
       }