[Pref 0000] 优化关联分析交互逻辑

src/views/analysis/warningAnalysis/connectAnalysis/AnalysisChart.vue

@@ -76,7 +76,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive } from 'vue';
+  import { ref } from 'vue';
   import dayjs from 'dayjs';
   import { Select, SelectOption, Row, Col, DatePicker, Button, message } from 'ant-design-vue';
   import MineCascader from '@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
@@ -131,7 +131,7 @@
   const dateRange = ref([dayjs().add(-props.dateForm, 'day'), dayjs()]); // 默认时间范围（近1天）
   // const mineStore = useMineDepartmentStore();
   const checkList = ref<any[]>(filters.length ? filters : props.checkboxOptions.map((e) => e.value)); //当前选中要进行显示的选项
-  const echartData = reactive({
+  const echartData = ref({
     xData: [] as any,
     yData: [] as any,
     flag: true,
@@ -162,12 +162,13 @@
   // 生成折线图核心逻辑
   async function generateChart() {
     if (!goafId.value) {
+      echartData.value = { xData: [], yData: [], flag: true };
       return message.info('请先选择煤矿及老空区');
     }
 
     loading.value = true;
-    echartData.yData.length = 0;
-    echartData.flag = false;
+    echartData.value.yData = [];
+    echartData.value.flag = false;
 
     const startTime = dateRange.value[0].format('YYYY-MM-DD HH:mm:ss');
     const endTime = dateRange.value[1].format('YYYY-MM-DD HH:mm:ss');
@@ -187,15 +188,18 @@
     if (res) {
       const data = res.records || [];
       if (data.length) {
-        echartData.xData = data.map((e) => e.createTime);
+        echartData.value.xData = data.map((e) => e.createTime);
         if (checkList.value.length) {
           checkList.value.forEach((el) => {
-            echartData.yData.push({
+            echartData.value.yData.push({
               label: el,
               value: data,
             });
           });
         }
+      } else {
+        // API 返回空数据时清空图表
+        echartData.value = { xData: [], yData: [], flag: true };
       }
     }
   }

src/views/analysis/warningAnalysis/connectAnalysis/components/echart-content.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, nextTick, watchEffect } from 'vue';
+  import { ref, nextTick, watch } from 'vue';
 
   import * as echarts from 'echarts';
 
@@ -235,12 +235,13 @@
     });
   }
 
-  watchEffect(() => {
-    console.log('dbeug rr', props.echartData);
-    if (props.echartData.xData.length || props.echartData.yData.length) {
-      props.echartData && getOption(props.echartData);
-    }
-  });
+  watch(
+    () => props.echartData,
+    (val) => {
+      val && getOption(val);
+    },
+    { deep: true, immediate: true }
+  );
 </script>
 
 <style lang="less" scoped>