Jelajahi Sumber

[Mod 0000]首页左上方按钮调整

wangkeyi 1 bulan lalu
induk
melakukan
0299a2e59a

TEMPAT SAMPAH
src/assets/images/sealedGoaf/home-button-left.png


TEMPAT SAMPAH
src/assets/images/sealedGoaf/home-button-right.png


+ 27 - 7
src/layouts/default/feature/SystemSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="prefixCls" :style="{ width: `${vertical ? buttonWidth : buttonWidth * 2 + 10}px` }">
+  <div :class="prefixCls" :style="{ width: `${vertical ? buttonWidth : buttonWidth * 2 + 20}px` }">
     <a-button
       :class="{ 'select-button': true, primary: isBaseHome }"
       :style="{ width: `${buttonWidth}px` }"
@@ -33,7 +33,7 @@
     }>(),
     {
       vertical: false,
-      buttonWidth: 195,
+      buttonWidth: 210,
     }
   );
 
@@ -78,16 +78,36 @@
     z-index: @layout-basic-z-index;
 
     .select-button {
-      height: @multiple-height;
+      width: 190px !important;
+      height: @multiple-height + 10px;
+      background-image: url(/src/assets/images/sealedGoaf/home-button-left.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      border: none;
+      background-color: unset;
+
+      :deep(span) {
+        color: black;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 100%;
+      };
+
     }
 
     .primary {
-      border-color: @primary-color;
-      background-color: @primary-color;
-      color: @white;
+      // border-color: @primary-color;
+      // background-color: @primary-color;
+      // color: @white;
     }
     .select-button:nth-child(1) {
-      margin-right: 10px;
+      margin: 0 10px 0 5px;
+      :deep(span){
+        color: #0070ff;
+      }
+    }
+    .select-button:nth-child(2) {
+      background-image: url(/src/assets/images/sealedGoaf/home-button-right.png);
     }
   }
 

+ 9 - 9
src/views/dashboard/SealedGoaf/configurable.data.sealedGoaf.ts

@@ -60,9 +60,9 @@ export const testConfigSealedGoaf: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:400px;height:170px;',
+      size: 'width:400px;height:190px;',
       version: '原版',
-      position: 'top:70px;left:25px;',
+      position: 'top:90px;left:25px;',
     },
   },
   // 2. 当日生产状态
@@ -173,7 +173,7 @@ export const testConfigSealedGoaf: Config[] = [
     showStyle: {
       size: 'width:400px;height:210px;',
       version: '原版',
-      position: 'top:250px;left:25px;',
+      position: 'top:280px;left:25px;',
     },
   },
   // 5. 密闭情况总览 更名为 矿井情况总览
@@ -276,9 +276,9 @@ export const testConfigSealedGoaf: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:400px;height:420px;',
+      size: 'width:400px;height:400px;',
       version: '原版',
-      position: 'top:470px;left:25px;',
+      position: 'top:490px;left:25px;',
     },
   },
   // 4. 当日报警情况统计
@@ -767,7 +767,7 @@ export const testConfigSealedMine: Config[] = [
     showStyle: {
       size: 'width:400px;height:230px;',
       version: '原版',
-      position: 'top:100px;left:25px;',
+      position: 'top:140px;left:25px;',
     },
   },
 
@@ -866,7 +866,7 @@ export const testConfigSealedMine: Config[] = [
     showStyle: {
       size: 'width:400px;height:270px;',
       version: '原版',
-      position: 'top:310px;left:25px;',
+      position: 'top:350px;left:25px;',
     },
   },
   // 3.预警信息列表
@@ -932,9 +932,9 @@ export const testConfigSealedMine: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:400px;height:300px;',
+      size: 'width:400px;height:260px;',
       version: '原版',
-      position: 'top:560px;left:25px;',
+      position: 'top:600px;left:25px;',
     },
   },
   // 4.  密闭内墙详情展示

+ 38 - 18
src/views/dashboard/SealedGoaf/index.vue

@@ -10,13 +10,16 @@
 
     <template v-if="appStore.getSimpleMapParams.isLeaf">
       <div class="company-title">
-        <span class="title-text">
-          <!-- {{ departName }}  -->
-          <!-- 先注释掉,写死name -->
-          XX集团神木XX矿业有限公司
-        </span>
+        <div class="company-title-content">
+          <span class="title-text">
+            {{ departName }} 
+          </span>
+        </div>
       </div>
     </template>
+    <template v-else>
+      <div class="button-border"></div>
+    </template>
     <!-- 渲染所有模块 -->
     <ModulePrimary
       v-for="cfg in cfgs"
@@ -54,7 +57,7 @@
   const { data, updateData } = useInitPage(title);
   const appStore = useAppStore();
   const mineStore = useMineDepartmentStore();
-  // let departName = '';
+  const departName = ref('');
 
   const cfgs = computed(() => configs.value);
   const { configs } = useInitConfigs();
@@ -240,7 +243,7 @@
 
         const depart = mineStore.findDepartById(params.deptId, mineStore.getDepartTree);
         if (depart) {
-          // departName = depart.departName;
+          departName.value = depart.departName;
           // console.log('自动填充矿区名称:', depart.departName);
         }
       } else {
@@ -279,32 +282,49 @@
     .custom-system-select {
       z-index: @layout-header-fixed-z-index;
       position: absolute;
-      top: 15px;
+      top: 25px;
       left: 25px;
       pointer-events: all;
     }
   }
   .custom-system-select-mine{
-    top: 50px !important;
+    top: 70px !important;
+  }
+  .button-border {
+    position: absolute;
+    width: 405px;
+    height: 60px;
+    left: 22px;
+    top: 15px;
+    border: 2px dashed #0070ff;
+    border-radius: 5px;
   }
   .company-title {
     position: absolute;
-    background-image: url(/src/assets/images/sealedGoaf/title-bg.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 420px;
-    height: 52px;
-    left: 16px;
-    padding: 14px 20px;
+    width: 405px;
+    height: 110px;
+    left: 22px;
+    top: 15px;
+    border: 2px dashed #0070ff;
+    border-radius: 5px;
+    // padding: 14px 20px;
+    
+    .company-title-content { 
+      width: 100%;
+      height: 52px;  
+      background-image: url(/src/assets/images/sealedGoaf/title-bg.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    } 
 
     .title-text {
-      /* 子元素负责文本溢出处理 */
       display: block;
       width: 100%;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      text-align: center; /* 根据需求调整对齐方式 */
+      text-align: center;
+      line-height: 52px;
     }
   }