Merge branch 'd-ww' into 'main'

fix: report export trend charts not render multiple device charts

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

@@ -7,3 +7,43 @@ export type ExportParam = {
   orderFiled: string;
   orderType: string;
 };
+export interface ExecuteCondition2 {
+  interval: number;
+  limit: number;
+  agg: string;
+  orderBy: string;
+  useStrictDataTypes: boolean;
+  startTs: number;
+  endTs: number;
+  queryMode: number;
+}
+
+export interface ExecuteAttribute {
+  device: string;
+  name: string;
+  attributes: string[];
+}
+
+export interface ExecuteCondition {
+  executeCondition: ExecuteCondition2;
+  executeAttributes: ExecuteAttribute[];
+}
+
+export interface ExecuteReportRecord {
+  id: string;
+  creator: string;
+  createTime: string;
+  updateTime: string;
+  enabled: boolean;
+  tenantId: string;
+  reportConfigName: string;
+  organizationName: string;
+  organizationId: string;
+  dataCompare: number;
+  executeWay: number;
+  executeStatus: number;
+  executeTime: string;
+  reportPath: string;
+  executeCondition: ExecuteCondition;
+  jobId: string;
+}

@@ -7,38 +7,63 @@
       :height="heightNum"
       @register="register"
       title="报表趋势图"
+      :minHeight="500"
       :showOkBtn="false"
     >
-      <div :class="[initChartData.length % 2 !== 0 ? '' : 'wrapper']">
-        <div
-          v-if="initChartData.length > 0"
-          :class="[initChartData.length % 2 !== 0 ? '' : 'chart-style']"
-        >
+      <div :class="[chartInstance.length % 2 !== 0 ? '' : 'wrapper']">
+        <Spin :spinning="loading">
           <div
-            :class="[
-              initChartData.length % 2 !== 0 ? '' : 'inner',
-              initChartData.length % 2 !== 0 ? '' : 'item',
-            ]"
-            v-for="(item, index) in initChartData"
-            :key="index"
+            v-if="chartInstance.length > 0"
+            :class="[chartInstance.length % 2 !== 0 ? '' : 'chart-style']"
           >
-            <p style="display: none">{{ item }}</p>
-            <div :id="`chart${index}`" :style="{ height, width }"></div>
+            <div
+              :class="[
+                chartInstance.length % 2 !== 0 ? '' : 'inner',
+                chartInstance.length % 2 !== 0 ? '' : 'item',
+              ]"
+              v-for="item in chartInstance"
+              :key="item.device"
+            >
+              <p class="text-black text-lg">{{ item.name }}</p>
+              <div class="flex text-black items-center">
+                <div class="mr-4 text-sm">属性:</div>
+                <Select
+                  class="min-w-25"
+                  v-model:value="item.active"
+                  @change="(value) => handleChangeChars(value, item.device)"
+                  placeholder="请选择设备属性"
+                >
+                  <Select.Option v-for="attr in item.attributes" :key="attr" :value="attr">
+                    {{ attr }}
+                  </Select.Option>
+                </Select>
+              </div>
+              <div>
+                <div :id="`chart-${item.device}`" :style="{ height, width }"></div>
+              </div>
+            </div>
           </div>
-        </div>
-        <div v-else style="display: flex; justify-content: center; align-items: center">
-          <div style="position: relative; left: 0rem; top: 3rem">暂无数据</div>
-        </div>
+          <div v-else style="display: flex; justify-content: center; align-items: center">
+            <div style="position: relative; left: 0rem; top: 3rem">暂无数据</div>
+          </div>
+        </Spin>
       </div>
     </BasicModal>
   </div>
 </template>
 <script setup lang="ts">
-  import { ref, PropType, nextTick } from 'vue';
+  import { ref, PropType, nextTick, shallowReactive, onMounted, onUnmounted } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import * as echarts from 'echarts';
   import { exportViewChartApi } from '/@/api/export/exportManager';
   import moment from 'moment';
+  import { ExecuteReportRecord } from '/@/api/export/model/exportModel';
+  import { Select, Spin } from 'ant-design-vue';
+
+  interface ResponsData {
+    attr: string;
+    val: { ts: number; value: string }[];
+  }
 
   defineProps({
     width: {
@@ -52,8 +77,14 @@
   });
   defineEmits(['register']);
   const heightNum = ref(800);
-  const getItem: any = ref([]);
-  const initChartData: any = ref([]);
+
+  let currentRecord: ExecuteReportRecord = {};
+
+  const chartInstance = ref<
+    { device: string; name: string; attributes: string[]; active?: string }[]
+  >([]);
+
+  const chartsInstance = shallowReactive<{ [key: string]: echarts.ECharts }>({});
   //生成随机颜色
   let getRandomColor = function () {
     return (
@@ -66,55 +97,72 @@
       ')'
     );
   };
-  const [register, { setModalProps }] = useModalInner(async (data) => {
-    setModalProps({ loading: true });
-    try {
-      const entityId = data.record.executeCondition?.executeAttributes.map((m) => m?.device);
-      let key = data.record.executeCondition?.executeAttributes.map((m) => m?.attributes);
-      let params: any = {};
-      params = {
-        ...data.record.executeCondition?.executeCondition,
-        ...{
-          keys: key.length !== 0 ? key.join(',') : '',
-        },
-      };
-      const result = await exportViewChartApi(entityId[0], params);
-      getItem.value = Object.entries(result).map((item) => {
-        const [attr, val] = item;
-        return { attr, val };
-      });
-      //服务端返回值
-      initChartData.value = getItem.value.map((item): any => {
+
+  const getChartsOption = (result: ResponsData) => {
+    const generateInfo = Object.entries(result).map((item) => {
+      const [attr, val] = item;
+      return { attr, val } as { attr: string; val: { ts: number; value: string }[] };
+    });
+    const chartDataConfig =
+      generateInfo.map((item) => {
         const seriesData = item.val.map((m1) => Number(m1.value));
         return {
-          attr: item.attr,
-          lengendData: [item.attr],
-          xAxisData: item.val.map((m) => moment(m.ts).format('YYYY-MM-DD HH:mm:ss')),
-          seriesData: [
-            {
-              name: item.attr,
-              type: 'line',
-              data: seriesData,
-              lineStyle: {
-                color: getRandomColor(),
-              },
+          xAxis: item.val.map((m) => moment(m.ts).format('YYYY-MM-DD HH:mm:ss')),
+          series: {
+            name: item.attr,
+            type: 'line',
+            data: seriesData,
+            lineStyle: {
+              color: getRandomColor(),
             },
-          ],
-        };
-      });
-      nextTick(() => {
-        initChartData.value.forEach((item, index) => {
-          let myChart = echarts.init(document.getElementById(`chart${index}`) as HTMLElement);
-          let myOption = {
+          },
+        } as echarts.EChartsOption;
+      }) || ([] as echarts.EChartsOption[]);
+    const chartOption = {
+      xAxisData: chartDataConfig.at(0)?.xAxis,
+      series: [chartDataConfig.at(0)?.series],
+    };
+
+    return chartOption;
+  };
+
+  const [register, { setModalProps }] = useModalInner(
+    async (data: { record: ExecuteReportRecord }) => {
+      setModalProps({ loading: true });
+      try {
+        currentRecord = data.record;
+        const deviceInfo = data.record.executeCondition.executeAttributes || [];
+        chartInstance.value = deviceInfo.map((item) => ({
+          ...item,
+          active: item.attributes.at(0),
+        }));
+        for (const item of deviceInfo) {
+          const { attributes, device } = item;
+          const keys = attributes.length ? attributes.at(0) : '';
+          const sendParams = {
+            ...data.record.executeCondition.executeCondition,
+            ...{
+              keys,
+            },
+          };
+
+          const result = await exportViewChartApi(device, sendParams);
+          const { xAxisData, series } = getChartsOption(result as unknown as ResponsData);
+
+          await nextTick();
+          chartsInstance[device] = echarts.init(
+            document.getElementById(`chart-${device}`) as HTMLElement
+          );
+
+          const chartOption = {
             title: {
-              text: `${item.attr}趋势图`,
               left: 'center',
             },
             tooltip: {
               trigger: 'axis',
             },
             legend: {
-              data: item.lengendData,
+              data: attributes,
               top: '20px',
             },
             toolbox: {},
@@ -136,11 +184,11 @@
             ],
             xAxis: {
               type: 'category',
-              data: item.xAxisData,
+              data: xAxisData,
               boundaryGap: false,
               axisPointer: { type: 'shadow' },
               axisLabel: {
-                interval: 0, 
+                interval: 0,
                 rotate: 65,
                 textStyle: {
                   color: '#000',
@@ -159,18 +207,60 @@
               type: 'value',
               boundaryGap: false,
             },
-            series: item.seriesData,
+            series,
           };
-          myChart.setOption(myOption);
+          chartsInstance[device].setOption(chartOption);
           //自适应
-          window.addEventListener('resize', () => {
-            myChart.resize();
-          });
-        });
-      });
+          // window.addEventListener('resize', () => {
+          //   chartsInstance[device].resize();
+          // });
+        }
+      } catch (error) {
+        throw error;
+      } finally {
+        setModalProps({ loading: false });
+      }
+    }
+  );
+  const loading = ref(false);
+  const renderCharts = async (device: string, keys: string) => {
+    const sendParams = {
+      ...currentRecord.executeCondition.executeCondition,
+      ...{
+        keys,
+      },
+    };
+    try {
+      loading.value = true;
+      const result = await exportViewChartApi(device, sendParams);
+      const { xAxisData, series } = getChartsOption(result as unknown as ResponsData);
+
+      chartsInstance[device].setOption({
+        series,
+        xAxis: { data: xAxisData },
+      } as echarts.EChartsOption);
+    } catch (error) {
     } finally {
-      setModalProps({ loading: false });
+      loading.value = false;
     }
+  };
+
+  const handleChangeChars = (value: string, device: string) => {
+    renderCharts(device, value);
+  };
+
+  const resize = () => {
+    Object.keys(chartsInstance).forEach((key) => {
+      chartsInstance[key].resize();
+    });
+  };
+
+  onMounted(() => {
+    window.addEventListener('resize', resize);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', resize);
   });
 </script>
 <style lang="less" scoped>