feat: :sparkles: 线形图表多图渲染

src/views/admin/components/ComboCharts.vue

@@ -58,23 +58,24 @@ async function getPieChartData(params: AreaChartParams) {
  */
 const lineStatus = ref(false);
 const lineMessage = ref("加载中...");
-const lineChartData = ref<AreaLineData>();
-let curveDataKey = ref("");
 const curveData = ref<number[][]>();
+const swStatus = ref(false);
+const klStatus = ref(false);
+const zzlStatus = ref(false);
 const swCurveData = ref<number[][]>();
 const klCurveData = ref<number[][]>();
 const zzlCurveData = ref<number[][]>();
 async function getLineChartData(params: AreaChartParams) {
   lineStatus.value = false;
+  let tempData: AreaLineData;
   getAreaBoardLines(params)
     .then(({data}) => {
-      lineChartData.value = data;
+      tempData = data;
       // 曲线图
       curveData.value = [];
-      curveData.value?.push(lineChartData.value?.curve || []);
-      curveData.value?.push(lineChartData.value?.num || []);
+      curveData.value?.push(tempData?.curve || []);
+      curveData.value?.push(tempData?.num || []);
       lineStatus.value = true;
-      lineChartData.value = undefined;
     })
     .catch((error) => {
       lineStatus.value = false;
@@ -82,17 +83,26 @@ async function getLineChartData(params: AreaChartParams) {
       console.log(error.message);
     });
 }
-async function getLineChartDataSub(result: Ref<number[][] | undefined>, params: AreaChartParams) {
+async function getLineChartDataSub(
+  result: Ref<number[][] | undefined>,
+  params: AreaChartParams,
+  status: Ref<Boolean>,
+  device_id: number
+) {
   let tempData: AreaLineData;
-  getAreaBoardLines(params)
+  let _params: AreaChartParams = JSON.parse(JSON.stringify(params));
+  _params.device_id = device_id;
+  getAreaBoardLines(_params)
     .then(({data}) => {
       tempData = data;
       result.value = [];
       result.value?.push(tempData?.curve || []);
       result.value?.push(tempData?.num || []);
+      status.value = true;
     })
     .catch((error) => {
       result.value = [[], []];
+      status.value = true;
       console.log(error.message);
     });
 }
@@ -121,16 +131,12 @@ watchEffect(() => {
   // 折线图数据
   dataParams.device_id = 0;
   getLineChartData(dataParams);
-  curveDataKey.value = curveData.toString();
-  dataParams.device_id = 1;
-  getLineChartDataSub(swCurveData, dataParams);
-  curveDataKey.value += swCurveData.toString();
-  dataParams.device_id = 6;
-  getLineChartDataSub(klCurveData, dataParams);
-  curveDataKey.value += klCurveData.toString();
-  dataParams.device_id = 7;
-  getLineChartDataSub(zzlCurveData, dataParams);
-  curveDataKey.value += zzlCurveData.toString();
+  swStatus.value = false;
+  klStatus.value = false;
+  zzlStatus.value = false;
+  getLineChartDataSub(swCurveData, dataParams, swStatus, 1);
+  getLineChartDataSub(klCurveData, dataParams, klStatus, 6);
+  getLineChartDataSub(zzlCurveData, dataParams, zzlStatus, 7);
 });
 </script>
 
@@ -227,10 +233,10 @@ watchEffect(() => {
       <el-col :xs="24" :span="16">
         <div class="charts-item">
           <p class="title">样本每次训练专注力评分均值整体变化曲线</p>
-          <template v-if="lineStatus">
+          <template v-if="lineStatus && swStatus && klStatus && zzlStatus">
             <line-chart
               id="lineChart1"
-              :key="curveDataKey"
+              :key="curveData.toString()"
               :dataSets="curveData || [[], []]"
               :dataSW="swCurveData || [[], []]"
               :dataKL="klCurveData || [[], []]"