[Mod 0000]省局采空区密闭是检测首页样式调整

src/views/sealedGoafSys/home/configurable.data.sealedGoaf.ts

@@ -156,12 +156,12 @@ export const testConfigSealedGoaf: Config[] = [
       },
       chart: [
         {
-          type: 'pie_halo',
+          type: 'pie_drag',
           readFrom: '',
           legend: { show: false, formatter: '{b}:{c}\n{d}%' },
           xAxis: [{ show: false }],
           yAxis: [{ show: false, name: '风量', position: 'left' }],
-          series: [{ readFrom: 'piechart', xprop: 'label', yprop: 'valMock', label: '' }],
+          series: [{ readFrom: 'piechart', xprop: 'pos', yprop: 'val', label: '' }],
         },
       ],
       gallery: [],
@@ -170,9 +170,16 @@ export const testConfigSealedGoaf: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
+      mock: {
+        piechart: [
+          { pos: 'Ⅰ类容易自燃', val: 50 },
+          { pos: 'Ⅱ类自燃', val: 80 },
+          { pos: 'Ⅲ类不易自燃', val: 40 },
+        ],
+      },
     },
     showStyle: {
-      size: 'width:440px;height:270px;',
+      size: 'width:440px;height:210px;',
       version: '原版',
       position: 'top:370px;left:10px;',
       headerPosition: 'centerBottom',
@@ -206,17 +213,19 @@ export const testConfigSealedGoaf: Config[] = [
         items: [
           {
             name: 'board',
-            basis: '30%',
+            basis: '40%',
+            overflow: true,
           },
           {
             name: 'table',
-            basis: '70%',
+            basis: '60%',
+            overflow: true,
           },
         ],
       },
       board: [
         {
-          type: 'CKQMB1',
+          type: 'CKQMB0',
           readFrom: '',
           layout: 'val-top',
           items: [
@@ -326,9 +335,9 @@ export const testConfigSealedGoaf: Config[] = [
       },
     },
     showStyle: {
-      size: 'width:440px;height:350px;',
+      size: 'width:440px;height:290px;',
       version: '原版',
-      position: 'top:600px;left:10px;',
+      position: 'top:570px;left:10px;',
     },
   },
   // 5. 密闭情况总览
@@ -360,10 +369,12 @@ export const testConfigSealedGoaf: Config[] = [
           {
             name: 'board',
             basis: '30%',
+            overflow: true,
           },
           {
             name: 'table',
             basis: '70%',
+            overflow: true,
           },
         ],
       },
@@ -475,6 +486,20 @@ export const testConfigSealedGoaf: Config[] = [
             jgfx: '0',
             gfx: '0',
           },
+          {
+            index: '执法五处',
+            dfx: '50',
+            ybfx: '20',
+            jgfx: '0',
+            gfx: '0',
+          },
+          {
+            index: '执法六处',
+            dfx: '50',
+            ybfx: '20',
+            jgfx: '0',
+            gfx: '0',
+          },
         ],
       },
     },
@@ -513,10 +538,12 @@ export const testConfigSealedGoaf: Config[] = [
           {
             name: 'board',
             basis: '40%',
+            overflow: true,
           },
           {
             name: 'table',
             basis: '60%',
+            overflow: true,
           },
         ],
       },

src/views/sealedGoafSys/home/sealedGoaf.vue

@@ -1,6 +1,24 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="company-home">
+    <div class="title-select-area">
+      <a-select
+        class="title-select"
+        ref="select"
+        v-model:value="deviceId"
+        @change="handleDeviceChange"
+        popupClassName="drop"
+        :field-names="fieldNames"
+        :options="selectorOptions"
+        :dropdownStyle="{
+          width: '380px',
+          background: 'transparent',
+          borderBottom: '1px solid #ececec66',
+          backdropFilter: 'blur(50px)',
+          color: '#fff',
+        }"
+      />
+    </div>
     <!-- 渲染所有模块 -->
     <ModuleCommon
       v-for="cfg in cfgs"
@@ -28,6 +46,16 @@
   const cfgs = computed(() => configs.value);
   const { configs, fetchConfigs } = useInitConfigs();
 
+  const deviceId = ref('0'); // 当前选中设备ID
+  const fieldNames = { label: 'name', value: 'id' }; // 下拉框字段映射
+  const selectorOptions = ref([
+    { name: '采空区密闭分析', id: '0' },
+    { name: '采空区密闭监测', id: '1' },
+  ]);
+  // 切换设备事件
+  function handleDeviceChange(param) {
+    console.log('切换下拉框选项');
+  }
   onMounted(() => {
     fetchConfigs('sealed_goaf').then(() => {
       configs.value = testConfigSealedGoaf;
@@ -44,6 +72,9 @@
     font-family: 'douyuFont';
     src: url('/@/assets/font/douyuFont.otf');
   }
+  @select-single: ~'@{namespace}-select-single';
+  @select-selector: ~'@{namespace}-select-selector';
+  @selection-item: ~'@{namespace}--select-selection-item';
   .company-home {
     --image-module-title: url('/@/assets/images/sealedGoaf/views/home/module-title.png');
 
@@ -83,5 +114,25 @@
         background: none;
       }
     }
+    .title-select {
+      :deep(.@{select-selector}) {
+        width: 300px;
+        background-color: #2b6ff0;
+        box-shadow: none !important;
+        border: 1px solid #b3d8ff;
+        border-radius: 4px; /* 圆角 */
+        padding: 8px 12px; /* 内边距 */
+        font-size: 14px;
+        color: #333; /* 文字颜色 */
+
+        /* 交互样式 */
+        cursor: pointer;
+        width: auto;
+        :deep(.@{selection-item}) {
+          color: #fff !important;
+          font-size: 20px;
+        }
+      }
+    }
   }
 </style>

src/views/vent/deviceManager/configurationTable/types.ts

@@ -181,6 +181,7 @@ export interface ModuleDataBoard extends ReadFrom {
     | 'T'
     | 'U'
     | 'CKQMB'
+    | 'CKQMB0'
     | 'CKQMB1'
     | 'CKQMB2';
   /** 展示牌布局，决定是 label 部分在上方或是 value 在上方 */

src/views/vent/home/configurable/components/detail/MiniBoard.vue

@@ -523,6 +523,48 @@
     padding-bottom: 13px;
     font-family: 'Microsoft YaHei';
   }
+  .mini-board_CKQMB0 {
+    width: 100px;
+    height: 90px;
+    background-image: var(--image-board-bg-ckqmb1);
+    background-size: 100% 100%;
+    padding-top: 28px;
+  }
+
+  .mini-board__label_CKQMB0 {
+    color: #000000;
+    font-size: 14px;
+    font-family: 'Microsoft YaHei';
+  }
+  .mini-board__value_CKQMB0 {
+    color: #000000;
+    font-size: 22px;
+    font-family: 'Microsoft YaHei';
+    padding-bottom: 10px;
+  }
+  /* 1. 第一个容器：label和value为蓝色 */
+  .mini-board_CKQMB0:nth-child(1) .mini-board__label_CKQMB0,
+  .mini-board_CKQMB0:nth-child(1) .mini-board__value_CKQMB0 {
+    color: #1890ff;
+  }
+
+  /* 2. 第二个容器：label和value为黄色 */
+  .mini-board_CKQMB0:nth-child(2) .mini-board__label_CKQMB0,
+  .mini-board_CKQMB0:nth-child(2) .mini-board__value_CKQMB0 {
+    color: #36a64d;
+  }
+
+  /* 3. 第三个容器：label和value为橙色 */
+  .mini-board_CKQMB0:nth-child(3) .mini-board__label_CKQMB0,
+  .mini-board_CKQMB0:nth-child(3) .mini-board__value_CKQMB0 {
+    color: #a97523;
+  }
+
+  /* 4. 第四个容器：label和value为红色 */
+  .mini-board_CKQMB0:nth-child(4) .mini-board__label_CKQMB0,
+  .mini-board_CKQMB0:nth-child(4) .mini-board__value_CKQMB0 {
+    color: #d6666c;
+  }
   .mini-board_CKQMB1 {
     width: 100px;
     height: 90px;