[Mod 000000] 优化矿压页面样式

src/views/vent/monitorManager/betKy/index.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="title-text">{{ selectData.strinstallpos || selectData.strname }} </div>
   <div class="pressure-monitor">
+    <a-button
+      preIcon="ant-design:rollback-outlined"
+      type="text"
+      size="small"
+      style="position: absolute; left: 15px; top: 65px; color: #fff; z-index: 9999"
+      @click="getBack"
+    >
+      返回
+    </a-button>
     <div class="table-container">
       <MonitorTable
         ref="MonitorDataTable"
@@ -21,7 +30,7 @@
       </div>
       <div class="info-panel">
         <div class="legend-section">
-          <h3>状态说明</h3>
+          <h3 class="panel-title">状态说明</h3>
           <div class="legend-grid">
             <div v-for="(item, index) in legendData" :key="index" class="legend-item">
               <span class="color-indicator" :style="{ backgroundColor: item.color }"></span>
@@ -31,7 +40,7 @@
         </div>
 
         <div class="range-section">
-          <h3>数据范围</h3>
+          <h3 class="panel-title">数据范围</h3>
           <div class="range-grid">
             <div v-for="(item, idx) in dataRanges" :key="idx" class="range-item">
               <span class="color-indicator" :style="{ backgroundColor: item.color }"></span>
@@ -50,7 +59,11 @@
   import { list } from './main.api';
   import MonitorTable from '../comment/MonitorTable.vue';
   import { DoubleLeftOutlined } from '@ant-design/icons-vue';
+  import { useRouter } from 'vue-router';
+  import { usePermission } from '/@/hooks/web/usePermission';
 
+  const { hasPermission } = usePermission();
+  const router = useRouter();
   const chartEl = ref<HTMLElement>();
   const currentTime = computed(() => new Date().toLocaleString());
   const scroll = reactive({
@@ -625,7 +638,7 @@
           end: 20,
           xAxisIndex: [0],
           bottom: 10,
-          height: 20,
+          height: 10,
         },
       ],
       xAxis: {
@@ -667,15 +680,18 @@
       ],
       grid: {
         left: '10',
-        right: '10',
-        bottom: '10',
+        right: '15',
+        bottom: '20',
+        top: '50',
         containLabel: true,
       },
     };
     chart.setOption(option);
     window.addEventListener('resize', () => chart.resize());
   }
-
+  function getBack() {
+    router.push('/monitorChannel/monitor-alarm-home');
+  }
   onMounted(async () => {
     timer = null;
     await getDataSource(1);
@@ -714,7 +730,7 @@
 
   .table-container {
     width: 100%;
-    height: 270px;
+    height: 250px;
     border-radius: 8px;
     padding: 15px 20px;
     margin-top: 80px;
@@ -736,9 +752,9 @@
     }
     .chart-container {
       width: 100%;
-      height: 380px;
+      height: 400px;
       border-radius: 8px;
-      // padding: 5px;
+      padding: 5px;
     }
     .info-panel {
       display: grid;
@@ -760,12 +776,27 @@
   }
 
   h3 {
+    width: 100%;
     color: #fff;
     margin-top: 0;
     margin-bottom: 15px;
     font-size: 16px;
     padding-bottom: 8px;
     border-bottom: 1px solid var(--vent-btn-primary-border-color);
+    position: relative;
+    display: inline-block;
+    padding-left: 20px;
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 4px;
+      height: 12px;
+      top: 6px;
+      left: 10px;
+      background: #45d3fd;
+      border-radius: 4px;
+    }
   }
 
   .legend-grid,