Merge branch 'ww' into 'main'

fix: report export show report trend device not found data but not destory chart

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

@@ -46,6 +46,9 @@ export const formSchema: FormSchema[] = [
     ifShow: ({ model }) => {
       return model[PackageField.URL];
     },
+    componentProps: {
+      maxLength: 255,
+    },
   },
   {
     field: PackageField.CHECK_SUM_ALG,

@@ -30,7 +30,7 @@
                 <Select
                   class="min-w-25"
                   v-model:value="item.active"
-                  @change="(value) => handleChangeChars(value, item.device)"
+                  @change="(value) => handleChangeChars(value, item.device, item)"
                   placeholder="请选择设备属性"
                 >
                   <Select.Option v-for="attr in item.attributes" :key="attr" :value="attr">
@@ -38,10 +38,10 @@
                   </Select.Option>
                 </Select>
               </div>
-              <div>
-                <Empty v-show="item.emptyFlag" />
+              <div class="w-full h-full flex justify-center items-center">
+                <Empty v-show="item.notFoundData" description="暂无数据" class="text-dark-50" />
                 <div
-                  v-show="!item.emptyFlag"
+                  v-show="!item.notFoundData"
                   :id="`chart-${item.device}`"
                   style="width: 100%; height: 400px"
                 ></div>
@@ -57,7 +57,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { ref, PropType, nextTick, shallowReactive, onMounted, onUnmounted } from 'vue';
+  import { ref, PropType, nextTick, shallowReactive, onMounted, onUnmounted, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import * as echarts from 'echarts';
   import { exportViewChartApi } from '/@/api/export/exportManager';
@@ -70,6 +70,15 @@
     val: { ts: number; value: string }[];
   }
 
+  interface ChartInstance {
+    device: string;
+    name: string;
+    attributes: string[];
+    active?: string;
+    notFoundData?: boolean;
+    loading?: boolean;
+  }
+
   defineProps({
     width: {
       type: String as PropType<string>,
@@ -85,11 +94,7 @@
 
   let currentRecord: ExecuteReportRecord = {} as unknown as ExecuteReportRecord;
 
-  const chartInstance = ref<
-    { device: string; name: string; attributes: string[]; active?: string; emptyFlag?: boolean }[]
-  >([]);
-
-  const notFoundData = ref(false);
+  const chartInstance = ref<ChartInstance[]>([]);
 
   const chartsInstance = shallowReactive<{ [key: string]: echarts.ECharts }>({});
   //生成随机颜色
@@ -125,13 +130,14 @@
           },
         } as echarts.EChartsOption;
       }) || ([] as echarts.EChartsOption[]);
+
     const chartOption = {
-      xAxisData: chartDataConfig.at(0)?.xAxis?.map(function (str) {
-        return str.replace(' ', '\n');
-      }),
+      xAxisData: (chartDataConfig.at(0)?.xAxis as string[])?.map((str) => str.replace(' ', '\n')),
       series: [chartDataConfig.at(0)?.series],
+      legend: {
+        data: Object.keys(result),
+      },
     };
-
     return chartOption;
   };
 
@@ -145,9 +151,11 @@
           ...item,
           active: item.attributes.at(0),
         }));
-        for (const item of deviceInfo) {
+        for (const item of unref(chartInstance)) {
           const { attributes, device } = item;
+
           const keys = attributes.length ? attributes.at(0) : '';
+
           const sendParams = {
             ...data.record.executeCondition.executeCondition,
             ...{
@@ -156,7 +164,7 @@
           };
 
           const result = await exportViewChartApi(device, sendParams);
-          validateHasData(result);
+          item.notFoundData = validateHasData(result);
           const { xAxisData, series } = getChartsOption(result as unknown as ResponsData);
 
           await nextTick();
@@ -179,7 +187,7 @@
               },
             },
             legend: {
-              data: attributes,
+              // data: attributes,
               top: '20px',
             },
             toolbox: {},
@@ -247,7 +255,7 @@
     }
   );
   const loading = ref(false);
-  const renderCharts = async (device: string, keys: string) => {
+  const renderCharts = async (device: string, keys: string, item: ChartInstance) => {
     const sendParams = {
       ...currentRecord.executeCondition.executeCondition,
       ...{
@@ -257,16 +265,8 @@
     try {
       loading.value = true;
       const result = await exportViewChartApi(device, sendParams);
-      chartInstance.value.forEach((f) => {
-        if (f.device === device) {
-          if (Object.keys(result).length === 0) {
-            f.emptyFlag = true;
-          } else {
-            f.emptyFlag = false;
-          }
-        }
-      });
-      validateHasData(result);
+
+      item.notFoundData = validateHasData(result);
       const { xAxisData, series } = getChartsOption(result as unknown as ResponsData);
 
       chartsInstance[device].setOption({
@@ -280,15 +280,15 @@
   };
 
   const validateHasData = (record: Recordable) => {
-    notFoundData.value = true;
-    const { val = [], attr } = (record as unknown as ResponsData) || {};
-    if (!attr || !val.length) {
-      notFoundData.value = false;
+    // const { val = [], attr } = (record as unknown as ResponsData) || {};
+    if (!Object.keys(record).length) {
+      return true;
     }
+    return false;
   };
 
-  const handleChangeChars = (value: string, device: string) => {
-    renderCharts(device, value);
+  const handleChangeChars = (value: string, device: string, item: ChartInstance) => {
+    renderCharts(device, value, item);
   };
 
   const resize = () => {