图表模版数据回显问题

src/pages/all/components/instant/index.vue

@@ -55,18 +55,19 @@
     <!-- 核心数据指标 判断一个图表中是否有多个曲线-->
     <div class="container" v-if="!props.lineArray">
       <div class="flex-box flex-left">
+        <!-- <div>{{ props.data[0] }}-----</div> -->
         <instantCurve :idName="`instant-left-${props.allIdName}`" :data="props.data[0]"
-          :legendName="props.legendName[0]" :propsDate="componentProps"></instantCurve>
+          :legendName="props.legendName[0]" :propsDate="componentProps" :istemplate="props.istemplate"></instantCurve>
       </div>
       <div class="flex-box flex-right">
         <instantCurve :idName="`instant-right-${props.allIdName}`" :data="props.data[1]" color="#6ffcba"
-          :legendName="props.legendName[1]" :isShowDetail="true"></instantCurve>
+          :legendName="props.legendName[1]" :isShowDetail="true" :istemplate="props.istemplate"></instantCurve>
       </div>
     </div>
     <div class="container" v-if="props.lineArray">
       <div class="flex-box">
         <instantCurve :lineArray="props.lineArray" :data="props.data" :legendName="props.legendName"
-          :propsDate="componentProps" :color="colorList"></instantCurve>
+          :propsDate="componentProps" :color="colorList" :istemplate="props.istemplate"></instantCurve>
       </div>
     </div>
     <el-dialog v-model="bigStatus" :modal='true' :show-close="true" modal-class="dialogModel" :modal-penetrable='true'
@@ -150,6 +151,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  istemplate: {//判断是不是配置曲线还是右边显示曲线
+    type: Boolean,
+    default: false
+  }
 
 });
 const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜色设置

src/pages/all/components/instant/instantCurve.vue

@@ -52,6 +52,10 @@ const props = defineProps({
   lineArray: {
     type: Boolean,
     default: false
+  },
+  istemplate: {//判断是配置模版还是右侧正常显示
+    type: Boolean,
+    default: false
   }
 })
 watch(() => props.data, (newVal) => {
@@ -62,13 +66,13 @@ const dataX = computed(() => {
   if (props.lineArray) {//代表x轴有多个
     let arrx = []
     props.data.forEach(it => {
-      arrx.push(it.length > 0 ? it.map(item => item.x.split(' ')[1]?.slice(0, 8)) : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])
+      arrx.push(it.length > 0 ? it.map(item => item.x.split(' ')[1]?.slice(0, 8)) : props.istemplate ? ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] : [])
     })
     // console.log(arrx, 'x轴信息');
     return arrx
     // return props.data.length > 0 ? props.data.map(item => item.x.split(' ')[1].slice(0, 8)) : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
   } else {
-    return props.data.length > 0 ? props.data.map(item => item.x.split(' ')[1]?.slice(0, 8)) : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+    return props.data.length > 0 ? props.data.map(item => item.x.split(' ')[1]?.slice(0, 8)) : props.istemplate ? ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] : [];
   }
 
 })
@@ -82,7 +86,7 @@ const dataY = computed(() => {
           item.y = item.y.dropRate
         })
       }
-      arry.push(it.length > 0 ? it.map(item => item.y) : [12, 13, 5, 103, 19, 3, 18])
+      arry.push(it.length > 0 ? it.map(item => item.y) : props.istemplate ? [12, 13, 5, 103, 19, 3, 18] : [])
     })
     return arry
   } else {
@@ -91,7 +95,7 @@ const dataY = computed(() => {
         item.y = item.y.dropRate
       })
     }
-    return props.data.length > 0 ? props.data.map(item => item.y) : [12, 13, 5, 103, 19, 3, 18]
+    return props.data.length > 0 ? props.data.map(item => item.y) : props.istemplate ? [12, 13, 5, 103, 19, 3, 18] : []
   }
 
 })

src/pages/header/component/screenConfigeDialog.vue

@@ -84,20 +84,20 @@
 
               <!-- <KeepAlive> -->
               <component :is="currentComponent1" :data="[capacityData, trafficData]" :title="titles[0]" slogan="容量/流量"
-                :legendName="['链路层容量', '用户实际流量']" :lineArray="true">
+                :legendName="['链路层容量', '用户实际流量']" :lineArray="true" :istemplate="true">
               </component>
               <!-- </KeepAlive> -->
 
 
               <!-- <KeepAlive> -->
               <component :is="currentComponent2" :data="[availabilityData, actualAvailabilityData]" :title="titles[1]"
-                slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="true">
+                slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="true" :istemplate="true">
               </component>
               <!-- </KeepAlive> -->
 
               <!-- <KeepAlive> -->
               <component :is="currentComponent3" :data="[delayData, lossRateData]" :title="titles[2]" slogan="网络时延/丢包"
-                :legendName="['搜星时延', '丢包率']" :lineArray="false">
+                :legendName="['搜星时延', '丢包率']" :lineArray="false" :istemplate="true">
               </component>
               <!-- </KeepAlive> -->
 
@@ -160,9 +160,8 @@ import {
 } from '@/api/Zodiac';
 import useAppStore from '@/store/module/app'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { component } from 'vxe-pc-ui';
-
 
+// istemplate---弹框配置模版时要有模版数据,正常右边显示时没数据时不显示模版数据
 let currentComponent1 = ref(markRaw(hotMapComponent))   //容量流量  热力图
 let currentComponent2 = ref(markRaw(cdf))  //可用性 CDF曲线  
 let currentComponent3 = ref(markRaw(instant))  //let  瞬时值曲线组件   //前面那个人写的好乱更屎一样，我服了，在这里偷偷吐槽一下嘿嘿