提交图表问题

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

@@ -6,6 +6,7 @@
       <h3 class="section-title">{{ props.slogan }}</h3>
       <div class="divider-line"></div>
     </div>
+    <!-- 标题文本 -->
     <div class="hot-title">
       <div class="hot-title-text">{{ props.title }}</div>
       <div class="hot-title-enlarge">
@@ -56,6 +57,7 @@ const props = defineProps({
 
 
 })
+console.log(props.data, '热力图数据')
 console.log(props.legendName[0], 'props.legendName')
 
 const componentProps = ref({})

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

@@ -20,8 +20,8 @@
         </svg>
       </div>
     </div>
-    <!-- 核心数据指标 -->
-    <div class="container">
+    <!-- 核心数据指标 判断一个图表中是否有多个曲线-->
+    <!-- <div class="container" v-if="!props.lineArray">
       <div class="flex-box flex-left">
         <instantCurve :idName="`instant-left-${props.allIdName}`" :data="props.data[0]"
           :legendName="props.legendName[0]" :propsDate="componentProps"></instantCurve>
@@ -30,7 +30,15 @@
         <instantCurve :idName="`instant-right-${props.allIdName}`" :data="props.data[1]" color="#6ffcba"
           :legendName="props.legendName[1]" :isShowDetail="true"></instantCurve>
       </div>
+    </div> -->
+    <div class="container" v-if="props.lineArray">
+      <div>5555</div>
+      <div class="flex-box">
+        <instantCurve :lineArray="props.lineArray" :data="props.data" :legendName="props.legendName"
+          :propsDate="componentProps" :color="colorList"></instantCurve>
+      </div>
     </div>
+
   </div>
 </template>
 
@@ -58,11 +66,16 @@ const props = defineProps({
   zoomHeight: {
     type: String,
     default: null
+  },
+  lineArray: {
+    type: Boolean,
+    default: false
   }
 });
-
-
-console.log('瞬时值曲线', props.data)
+const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜色设置
+setTimeout(() => {
+  console.log('瞬时值曲线', props.lineArray)
+}, 2000);
 
 const componentProps = ref({})
 </script>

src/pages/header/component/screenConfigCase.vue

 <template>
+  <!-- 大屏配置-模版列表 -->
   <div class="templateCase_right_content">
+    <!-- 模版名称修改 -->
     <div class="templateCase_right_content_header">
       <div class="templateCase_right_content_header_item">
-        <!-- <span>模板名称</span> -->
         <input ref="inputRef" class="templateName" v-model="templateName" :disabled="!isEdit"></input>
         <img src="@/assets/images/headers/case_header.png" alt="" title="编辑"
           style="width: 20px; height: 20px;cursor: pointer;" @click="handleEdit">

src/pages/header/component/screenConfigeDialog.vue

@@ -44,7 +44,6 @@
           <div class="equipment-content">
             <!-- 下拉选择器区域 -->
             <div class="selector-container">
-
               <div class="selector-item">
                 <label class="selector-label">{{ keliSelector.label }}</label>
                 <div class="custom-select">
@@ -80,24 +79,25 @@
                 </div>
               </div>
             </div>
+            <!-- 弹框中展示两种 -->
             <div class="content-item" style="height: 480px;">
 
               <!-- <KeepAlive> -->
               <component :is="currentComponent1" :data="[capacityData, trafficData]" :title="titles[0]" slogan="容量/流量"
-                :legendName="['链路层容量', '用户实际流量']">
+                :legendName="['链路层容量', '用户实际流量']" :lineArray="true">
               </component>
               <!-- </KeepAlive> -->
 
 
               <!-- <KeepAlive> -->
               <component :is="currentComponent2" :data="[availabilityData, actualAvailabilityData]" :title="titles[1]"
-                slogan="可用性" :legendName="['规划可用性', '实际可用性']">
+                slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="false">
               </component>
               <!-- </KeepAlive> -->
 
               <!-- <KeepAlive> -->
               <component :is="currentComponent3" :data="[delayData, lossRateData]" :title="titles[2]" slogan="网络时延/丢包"
-                :legendName="['搜星时延', '丢包率']">
+                :legendName="['搜星时延', '丢包率']" :lineArray="true">
               </component>
               <!-- </KeepAlive> -->
 
@@ -256,6 +256,8 @@ const handleDelete = () => {
     })
     return
   }
+  console.log(currentSettingConfig.value, '删除信息', templateCaseList.value);
+
   ElMessageBox.confirm(
     `您确定删除 [${currentSettingConfig.value.templateName}] ?`,
     'Warning',
@@ -266,6 +268,15 @@ const handleDelete = () => {
     }
   )
     .then(async () => {
+      //判断是新加的模版还是接口返回的模版
+      if (currentSettingConfig.value.templateAdd) {
+        templateCaseList.value = templateCaseList.value.filter(it => it.templateId != currentSettingConfig.value.templateId)
+        ElMessage({
+          type: 'success',
+          message: '删除成功',
+        })
+        return
+      }
       const ret = await templateDel({
         templateId: currentSettingConfig.value.templateId // 模板id 
       })
@@ -432,7 +443,7 @@ const childrenOnChange = (item) => {
 }
 
 watch(() => keliSelector.value.value, keliOnChange)
-
+// 模版列表--确认
 const handleApply = async () => {
   let ret = null
   Loading.show()
@@ -692,7 +703,7 @@ const calculateConfig = (selectedTemplate = currentSettingConfig.value) => {
 }
 
 .logo_right {
-  width: 70%;
+  width: 80%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -774,6 +785,7 @@ const calculateConfig = (selectedTemplate = currentSettingConfig.value) => {
   border-radius: 8px;
   padding: 5px 15px;
 }
+
 .equipment-content {
   height: 600px;
 }
@@ -1096,4 +1108,13 @@ const calculateConfig = (selectedTemplate = currentSettingConfig.value) => {
 .select-dropdown::-webkit-scrollbar-thumb:hover {
   background: #64748b;
 }
+
+/* 下拉框禁止和正常的文字颜色 */
+:deep(.custom-select .el-select__wrapper) .el-select__placeholder {
+  color: #ffffff;
+}
+
+:deep(.custom-select .el-select__wrapper.is-disabled) .el-select__placeholder {
+  color: #cccccc91 !important;
+}
 </style>
\ No newline at end of file

src/pages/header/index.vue

@@ -57,8 +57,8 @@
       </div>
     </div>
 
-    <el-dialog v-model="screenConfigeDialogVisible" :destroy-on-close="false" :modal="false" :show-close="false"
-      :before-close="handleScreenConfigeClose"
+    <el-dialog v-model="screenConfigeDialogVisible" :destroy-on-close="false" modal-class="dialogModel" :modal="true"
+      :show-close="false" :before-close="handleScreenConfigeClose"
       style="background-color: rgba(0, 0, 0,0);padding: 0;margin: 0;z-index: 999;">
       <screenConfige @handleScreenConfigeClose="handleScreenConfigeClose"></screenConfige>
       <!-- <div style="width: 100px;height: 100px;background-color: blueviolet;"></div> -->
@@ -586,6 +586,31 @@ const initChartData = async () => {
   color: rgba(255, 255, 255, 0.8);
 }
 
+/* 弹框遮罩层 */
+:deep().dialogModel {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+:deep().dashboard-container {
+  border: 1px solid #cccccc2a;
+}
+
+:deep().dashboard-container::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  /* 透明边框 */
+  border-image: linear-gradient(to right, #263347, #3e73cc, #263347) 1;
+  /* 渐变边框 */
+  z-index: -1;
+  /* 确保伪元素在内容之下 */
+}
+
 /* 响应式设计 */
 @media (max-width: 1440px) {
   .platform-title {