style: 修改院区安全态势-生产安全模块样式

src/views/institute-safety/components/CardProductionSafety.vue

@@ -18,11 +18,11 @@
 
 <style scoped lang="scss">
   .responsibility-implementation {
-    margin: 12px 0 24px 0;
+    margin: 8px 0 20px 0;
   }
   .education-training,
   .risk-identification,
   .danger-investigation {
-    margin-bottom: 24px;
+    margin-bottom: 20px;
   }
 </style>

src/views/institute-safety/components/production-safety/DangerInvestigation.vue

@@ -4,6 +4,10 @@
       <span class="line"></span>
       <span class="text">隐患的排查与治理</span>
     </div>
+    <div class="safe-check-count">
+      <span class="safe-check-count-title">安全生产检查</span>
+      <span class="safe-check-count-value">{{ safeCheckCount }}</span>
+    </div>
     <div class="danger-investigation__content">
       <div class="content-item" :class="item.type" v-for="item in itemList" :key="item.name">
         <span class="name">{{ item.name }}</span>
@@ -17,6 +21,7 @@
   import { computed, onMounted, ref } from 'vue';
   import { getDangerInvestigation } from '@/api/institute-safety';
 
+  const safeCheckCount = ref<number>(0);
   const hiddenDangerCount = ref<number>(0);
   const rectificationCount = ref<number>(0);
   const closedCount = ref<number>(0);
@@ -29,6 +34,7 @@
 
   onMounted(() => {
     getDangerInvestigation().then((res) => {
+      safeCheckCount.value = res.safeCheckCount;
       hiddenDangerCount.value = res.totalCount;
       rectificationCount.value = res.rectifyingCount;
       closedCount.value = res.closedLoopCount;
@@ -57,6 +63,33 @@
     }
   }
 
+  .safe-check-count {
+    width: 310px;
+    height: 48px;
+    background: linear-gradient(90deg, #ebf3ff 0%, #fafcff 100%);
+    border-radius: 4px;
+    margin: 16px 10px 8px 10px;
+    padding: 13px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .safe-check-count-title {
+      font-weight: 500;
+      font-size: 16px;
+      color: #333333;
+      line-height: 22px;
+    }
+
+    .safe-check-count-value {
+      font-family: DINAlternate;
+      font-weight: 600;
+      font-size: 22px;
+      color: #333333;
+      line-height: 26px;
+    }
+  }
+
   .danger-investigation__content {
     display: flex;
     align-items: center;
@@ -66,12 +99,12 @@
 
     .content-item {
       width: 96px;
-      height: 92px;
+      height: 72px;
       border-radius: 0px 4px 4px 0px;
-      padding: 19px 22px;
+      padding: 12px 20px;
       display: flex;
       flex-direction: column;
-      gap: 8px;
+      gap: 2px;
 
       .name {
         font-weight: 400;

src/views/institute-safety/components/production-safety/EducationTraining.vue

@@ -63,10 +63,10 @@
 
     .content-item {
       width: 150px;
-      height: 76px;
+      height: 72px;
       background: linear-gradient(180deg, #eaefff 0%, #ffffff 100%);
       border-radius: 4px;
-      padding: 14px 12px;
+      padding: 12px 16px;
       display: flex;
       flex-direction: column;
       gap: 2px;

src/views/institute-safety/components/production-safety/ResponsibilityImplementation.vue

@@ -39,9 +39,10 @@
     getResponsibilityImplementation().then((res) => {
       signingRate.value = Number(res.rate.replace('%', ''));
       signingList.value = [
-        { name: '所/中心', num: res.firstDeptSign + res.secondDeptSign },
+        { name: '所/中心/职能部门', num: res.firstDeptSign },
         { name: '科室', num: res.unitSign },
         { name: '员工', num: res.employeeSign },
+        { name: '所/中心级部门', num: res.secondDeptSign },
         { name: '常驻供应商', num: res.supplierSign },
       ];
     });
@@ -71,14 +72,14 @@
 
   .responsibility-implementation__content {
     width: 310px;
-    height: 160px;
+    height: 212px;
     margin: 0 10px;
     background: linear-gradient(90deg, #ebf3ff 0%, #fafcff 100%);
     border-radius: 4px;
     padding-top: 14px;
 
     .content-title {
-      margin: 0 12px;
+      margin: 0 16px;
       font-weight: 500;
       font-size: 16px;
       color: #333333;
@@ -86,7 +87,7 @@
     }
 
     .signing-rate {
-      margin: 20px 16px;
+      margin: 16px 16px 20px 16px;
       font-weight: 400;
       font-size: 14px;
       color: #333333;
@@ -95,7 +96,7 @@
       justify-content: space-between;
 
       .signing-rate-value {
-        width: 160px;
+        width: 180px;
         height: 6px;
         background: #d8d8d8;
         border-radius: 4px;
@@ -114,13 +115,15 @@
 
       .signing-rate-unit {
         font-weight: 600;
+        font-family: DINAlternate;
       }
     }
 
     .signing-nums {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+      display: grid;
+      grid-template-columns: 120px 70px 70px;
+      grid-auto-flow: row;
+      grid-gap: 9px 12px;
       margin: 0 16px;
 
       .signing-nums__item {

src/views/institute-safety/components/production-safety/RiskIdentification.vue

@@ -5,19 +5,9 @@
       <span class="text">风险的识别与管控</span>
     </div>
     <div class="risk-identification__content">
-      <div class="check-count">
-        <span class="name">安全生产检查</span>
-        <span class="value">{{ checkCount }}</span>
-      </div>
-      <div class="check-result">
-        <div class="check-result__item">
-          <span class="item-name">今日危险作业数</span>
-          <span class="item-value">{{ hazardousWorkCount }}</span>
-        </div>
-        <div class="check-result__item">
-          <span class="item-name">今日施工作业数</span>
-          <span class="item-value">{{ constructionWorkCount }}</span>
-        </div>
+      <div class="content-item" v-for="item in riskIdentificationContent" :key="item.name">
+        <span class="name">{{ item.name }}</span>
+        <span class="value">{{ item.value }}</span>
       </div>
     </div>
   </div>
@@ -27,15 +17,19 @@
   import { onMounted, ref } from 'vue';
   import { getRiskIdentification } from '@/api/institute-safety';
 
-  const checkCount = ref<number>(0);
-  const hazardousWorkCount = ref<number>(0);
-  const constructionWorkCount = ref<number>(0);
+  interface RiskIdentificationContent {
+    name: string;
+    value: number;
+  }
+
+  const riskIdentificationContent = ref<RiskIdentificationContent[]>([]);
 
   onMounted(() => {
     getRiskIdentification().then((res) => {
-      // checkCount.value = res.safeCheckCount;
-      hazardousWorkCount.value = res.dangerNum;
-      constructionWorkCount.value = res.constructionNum;
+      riskIdentificationContent.value = [
+        { name: '今日危险作业数', value: res.dangerNum },
+        { name: '今日施工作业数', value: res.constructionNum },
+      ];
     });
   });
 </script>
@@ -62,60 +56,34 @@
   }
 
   .risk-identification__content {
-    width: 310px;
-    height: 140px;
-    background: linear-gradient(90deg, #ebf3ff 0%, #fafcff 100%);
-    border-radius: 4px;
-    margin: 0 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
 
-    .check-count {
+    .content-item {
+      width: 150px;
+      height: 72px;
+      background: linear-gradient(180deg, #eaefff 0%, #ffffff 100%);
+      border-radius: 4px;
+      padding: 12px 16px;
       display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 14px 26px 14px 12px;
-      border-bottom: 1px solid rgba(#979797, 0.11);
+      flex-direction: column;
+      gap: 2px;
 
       .name {
-        font-weight: 500;
-        font-size: 16px;
-        color: #333333;
-        line-height: 22px;
+        font-weight: 400;
+        font-size: 14px;
+        color: #666666;
+        line-height: 20px;
       }
 
       .value {
         font-family: DINAlternate;
         font-weight: 600;
-        font-size: 16px;
+        font-size: 22px;
         color: #333333;
-        line-height: 19px;
-      }
-    }
-
-    .check-result {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 20px 16px 19px 16px;
-
-      .check-result__item {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-
-        .item-name {
-          font-weight: 400;
-          font-size: 14px;
-          color: #666666;
-          line-height: 20px;
-        }
-
-        .item-value {
-          font-family: DINAlternate;
-          font-weight: 600;
-          font-size: 22px;
-          color: #333333;
-          line-height: 26px;
-        }
+        line-height: 26px;
       }
     }
   }