[Style 0000] 密闭监测系列页面样式优化及全局组件样式优化

src/components/Configurable/preset/BlastDelta.vue

@@ -24,7 +24,7 @@
         <div class="item-name" v-for="item in legendList" :key="item">{{ item.name }}</div>
       </div> -->
     </div>
-    <div class="line-legend">
+    <div class="line-legend" :style="legendStyle">
       <div class="legend-box" v-for="(item, index) in legendList" :key="index">
         <span class="legend-icon"></span>
         <span class="legend-label">{{ item.name }}</span>
@@ -78,6 +78,10 @@
       type: String,
       default: '#fff',
     },
+    legendStyle: {
+      type: Object,
+      default: () => ({ left: '50%', top: '20px' }),
+    },
   });
 
   // 响应式数据
@@ -359,6 +363,9 @@
     position: relative;
     width: 100%;
     height: 100%;
+    padding-left: 20px;
+    padding-bottom: 20px;
+    box-sizing: border-box;
 
     // .blast-title {
     //   position: absolute;
@@ -435,13 +442,13 @@
 
     .coords {
       position: absolute;
-      left: 50%;
-      top: 50%;
+      left: 20px;
+      bottom: 20px;
       width: 90%;
       height: 80%;
       border-left: 1px solid #006c9d;
       border-bottom: 1px solid #006c9d;
-      transform: translate(-45%, -46%);
+      // transform: translate(-45%, -46%);
 
       .coord-lineY {
         position: absolute;
@@ -453,7 +460,7 @@
 
       .coord-labelY {
         position: absolute;
-        left: -25px;
+        left: -20px;
         top: -5px;
         width: 20px;
         height: 100%;
@@ -472,7 +479,7 @@
         display: flex;
         justify-content: flex-end;
         position: absolute;
-        bottom: -25px;
+        bottom: -20px;
         left: -5px;
         width: 100%;
         height: 20px;

src/design/ant/index.less

@@ -81,6 +81,10 @@
   }
   .ant-modal-content {
     padding: 0;
+
+    .ant-modal-footer {
+      padding: 16px;
+    }
   }
 }
 

src/design/color.less

@@ -59,6 +59,7 @@ html {
 @header-light-bg-hover-color: #f6f6f6;
 @header-light-desc-color: #7c8087;
 @header-light-bottom-border-color: #eee;
+@header-static-bg-color: linear-gradient(90deg, #345991, #264471);
 // top-menu
 @top-menu-active-bg-color: var(--header-active-menu-bg-color);
 

src/design/public.less

@@ -116,6 +116,7 @@
   padding: 0 12px 6px 12px;
   margin: 16px;
   border: 1px solid @border-color-base;
+  border-radius: 4px;
 }
 
 .action-btn {

src/layouts/default/header/index.less

@@ -170,7 +170,8 @@
   }
 
   &--dark {
-    background-color: @header-dark-bg-color !important;
+    // background-color: @header-dark-bg-color !important;
+    background-image: @header-static-bg-color !important;
     // border-bottom: 1px solid @border-color-base;
     // update-begin--author:liaozhiyang---date:20250818---for：【issues/8709】LayoutContent样式多出1px
     // border-left: 1px solid @border-color-base;

src/layouts/default/index.vue

@@ -94,9 +94,11 @@
 
     &-main {
       width: 100%;
-      border-top-right-radius: 10px;
-      border-bottom-right-radius: 10px;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
       // background-color: #aaaaaa32;
+      // border: 1px solid @white;
+      box-shadow: inset 0 0 5px 0 @white;
       background: rgba(255, 255, 255, 0.2);
       backdrop-filter: blur(14px);
       // -webkit-backdrop-filter: blur(10px);

src/settings/designSetting.ts

@@ -37,7 +37,7 @@ export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
 
 // sider preset color
 export const SIDE_BAR_BG_COLOR_LIST: string[] = [
-  '#304156',
+  '#202d3d',
   // '#212121',
   '#009688',
   '#273352',

src/views/monitor/sealedMonitor/components/RealtimeDetailsModal.vue

@@ -31,13 +31,18 @@
     <!-- 图表区域 -->
     <div class="chart-area">
       <div class="chart-item">
-        <div class="chart-title">爆炸三角形</div>
+        <div class="chart-title pl-20px">爆炸三角形</div>
         <div class="chart-placeholder">
-          <BlastDelta :posMonitor="dataRef" :canvasSize="{ width: '95%', height: '95%' }" text-color="#000" />
+          <BlastDelta
+            :posMonitor="dataRef"
+            :canvas-size="{ width: 311, height: 149 }"
+            :legendStyle="{ left: '50%', top: '10px' }"
+            text-color="#000"
+          />
         </div>
       </div>
       <div class="chart-item">
-        <div class="chart-title">气体浓度曲线</div>
+        <div class="chart-title pl-20px">气体浓度曲线</div>
         <div class="chart-placeholder">
           <CustomChart
             :chart-data="{ chartData: dataArray }"
@@ -52,7 +57,7 @@
         </div>
       </div>
       <div class="chart-item">
-        <div class="chart-title">内外压力及压差曲线</div>
+        <div class="chart-title pl-20px">内外压力及压差曲线</div>
         <div class="chart-placeholder">
           <CustomChart
             :chart-data="{ chartData: dataArray }"
@@ -133,7 +138,7 @@
 
       function fetchDetailData() {
         const { mineCode, goafId } = dataRef.value;
-        getGoafData({ mineCode, goafId }).then((r) => {
+        getGoafData({ mineCodeList: mineCode, goafId }).then((r) => {
           dataRef.value = last(r);
           push(dataRef.value);
           // push(dataRef.value)
@@ -191,7 +196,7 @@
   .label {
     color: #666;
     margin-right: 8px;
-    min-width: 80px;
+    min-width: 90px;
     flex-shrink: 0; /* 标签宽度不收缩 */
   }
   .value {
@@ -201,9 +206,10 @@
     text-overflow: ellipsis;
   }
   .data-cards {
-    display: grid;
-    grid-template-columns: repeat(8, 1fr);
-    gap: 16px;
+    display: flex;
+    // grid-template-columns: repeat(8, 1fr);
+    // gap: 16px;
+    justify-content: space-evenly;
     margin-bottom: 20px;
     padding: 20px;
     border: 1px solid @border-color-base;
@@ -230,7 +236,7 @@
   .chart-area {
     display: flex;
     flex-wrap: wrap;
-    gap: 16px;
+    gap: 20px;
     padding: 20px;
     border: 1px solid @border-color-base;
     border-radius: 10px;
@@ -239,17 +245,26 @@
   }
   .chart-item {
     flex: 1;
-    min-width: 200px;
+    // flex-basis: 6;
+    // flex-shrink: 1;
+    // min-width: 200px;
+    &:first-child {
+      // flex-basis: 380px;
+      flex: 0 0 380px;
+      // flex-shrink: 0;
+      // flex-grow: 1;
+    }
   }
   .chart-title {
     font-size: 14px;
     font-weight: 500;
     margin-bottom: 8px;
-    color: #333;
+    font-weight: bold;
+    color: @text-color-call-out;
   }
   .chart-placeholder {
     width: 100%;
-    height: 150px;
+    height: 200px;
     border-radius: 4px;
     overflow: hidden;
   }

src/views/monitor/sealedMonitor/monitor.data.ts

@@ -178,7 +178,7 @@ export const modalDetailsData: {
     //   value: 'Ⅰ类容易自燃',
     // },
     {
-      label: '自然发火隐患等级',
+      label: '自然发火隐患',
       value: 'fireAlarm',
       tag: true,
     },
@@ -518,6 +518,6 @@ function getTagType(level: string) {
   }
 }
 export function tagCellRender(record: any) {
-  if (!record) return h(Tag, { bordered: false, color: 'default' }, '-');
-  return h(Tag, { bordered: false, color: getTagType(record.alarmLevel) }, record.alarmName);
+  if (!record) return h(Tag, { bordered: false, color: 'default' }, () => '-');
+  return h(Tag, { bordered: false, color: getTagType(record.alarmLevel) }, () => record.alarmName);
 }