feat：报表导出 新增报表查看（可查看多个设备属性）

@@ -10,7 +10,7 @@
       :showOkBtn="false"
     >
       <div class="wrapper">
-        <div class="inner item" v-for="(item, index) in chartData" :key="index">
+        <div class="inner item" v-for="(item, index) in initChartData" :key="index">
           <p style="display: none">{{ item }}</p>
           <div :id="`chart${index}`" :style="{ height, width }"></div>
         </div>
@@ -22,6 +22,8 @@
   import { ref, PropType, nextTick } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import * as echarts from 'echarts';
+  import { exportViewChartApi } from '/@/api/export/exportManager';
+  import moment from 'moment';
 
   defineProps({
     width: {
@@ -34,72 +36,120 @@
     },
   });
   defineEmits(['register']);
-
   const heightNum = ref(800);
-  const chartData = ref([1, 2, 3, 4]);
-  const [register] = useModalInner((data) => {
-    console.log(data);
-    //TODO待服务端返回值
-    nextTick(() => {
-      chartData.value.forEach((_, index) => {
-        let myChart = echarts.init(document.getElementById(`chart${index}`) as HTMLElement);
-        let myOption = {
-          title: {
-            text: '报表趋势图',
-            subtext: `图${index + 1}`,
-            left: 'left',
-          },
-          tooltip: {
-            trigger: 'axis',
-          },
-          legend: {
-            data: ['CO', 'CO2', 'Temp'],
-            top: '20px',
-          },
-          toolbox: {},
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true,
-          },
-          xAxis: {
-            type: 'category',
-            data: ['1', '2', '3', '4', '5', '6', '7'],
-            boundaryGap: false,
-          },
-          yAxis: {
-            type: 'value',
-            boundaryGap: false,
-          },
-          series: [
-            {
-              name: 'CO',
-              type: 'line',
-              stack: 'Total',
-              data: [150, 230, 224, 218, 135, 147, 260],
-            },
-            {
-              name: 'CO2',
-              type: 'line',
-              stack: 'Total',
-              data: [15, 23, 22, 28, 15, 17, 20],
-            },
+  const getItem: any = ref([]);
+  const initChartData: any = ref([]);
+  //生成随机颜色
+  let getRandomColor = function () {
+    return (
+      'rgb(' +
+      Math.round(Math.random() * 255) +
+      ',' +
+      Math.round(Math.random() * 255) +
+      ',' +
+      Math.round(Math.random() * 10) +
+      ')'
+    );
+  };
+  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 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: 'Temp',
+              name: item.attr,
               type: 'line',
-              stack: 'Total',
-              data: [15, 23, 22, 28, 15, 17, 20],
+              data: seriesData,
+              lineStyle: {
+                color: getRandomColor(),
+              },
             },
           ],
         };
-        myChart.setOption(myOption);
-        //自适应
-        window.addEventListener('resize', () => {
-          myChart.resize();
+      });
+      nextTick(() => {
+        initChartData.value.forEach((item, index) => {
+          let myChart = echarts.init(document.getElementById(`chart${index}`) as HTMLElement);
+          let myOption = {
+            title: {
+              text: `${item.attr}趋势图`,
+              subtext: `${item.attr}`,
+              left: 'left',
+            },
+            tooltip: {
+              trigger: 'axis',
+            },
+            legend: {
+              data: item.lengendData,
+              top: '20px',
+            },
+            toolbox: {},
+            grid: {
+              left: '3%',
+              right: '4%',
+              bottom: '3%',
+              containLabel: true,
+            },
+            dataZoom: [
+              {
+                type: 'slider',
+                show: true,
+                start: 0,
+                end: 30,
+                xAxisIndex: [0],
+              },
+            ],
+            xAxis: {
+              type: 'category',
+              data: item.xAxisData,
+              boundaryGap: false,
+              axisPointer: { type: 'shadow' },
+              axisLabel: {
+                color: '#333',
+                //  让x轴文字方向为竖向
+                interval: 0,
+                rotate: 90,
+                // formatter: function (value) {
+                //   return value.split('').join('\n');
+                // },
+              },
+            },
+            yAxis: {
+              type: 'value',
+              boundaryGap: false,
+            },
+            series: item.seriesData,
+          };
+          myChart.setOption(myOption);
+          //自适应
+          window.addEventListener('resize', () => {
+            myChart.resize();
+          });
         });
       });
-    });
+    } finally {
+      setModalProps({ loading: false });
+    }
   });
 </script>
 <style lang="less" scoped>