Преглед на файлове

看板调整左侧和中间布局

yanghao преди 1 седмица
родител
ревизия
ca152e8cab
променени са 1 файла, в които са добавени 46 реда и са изтрити 32 реда
  1. 46 32
      src/views/pms/qhse/kanban/index.vue

+ 46 - 32
src/views/pms/qhse/kanban/index.vue

@@ -212,7 +212,7 @@ const bottomCards = ref([
     icon: Histogram,
     accent: '#4f8dff',
     glow: 'rgba(79, 141, 255, 0.2)',
-    lines: ['在用: 0台', '待检: 0(重点关注)']
+    lines: ['在用: 0台', '待检: 0(重点关注)']
   },
   {
     title: '应急演练',
@@ -315,7 +315,7 @@ async function getInstrumentOverview() {
 
   bottomCards.value[1].lines = [
     `在用: ${total.value}台`,
-    `待检: ${instrumentExpired.value}(重点关注)`
+    `待检: ${instrumentExpired.value}(重点关注)`
   ]
 }
 
@@ -888,7 +888,7 @@ onUnmounted(() => {
               <section class="panel board-panel board-panel--center kb-stage-card kb-stage-card--4">
                 <div class="panel-title panel-title--center">
                   <span class="icon-decorator"><span></span><span></span></span>
-                  安全风险四色动态分布
+                  风险管控及隐患排查
                 </div>
                 <div class="risk-grid">
                   <article v-for="zone in riskZones" :key="zone.title" class="risk-card">
@@ -899,27 +899,29 @@ onUnmounted(() => {
                         :duration="2600"
                         :end-val="zone.value"
                         :start-val="0"
-                        :style="{ color: zone.color, fontSize: '28px' }" />
+                        :style="{ color: zone.color, fontSize: '22px' }" />
                     </div>
                     <div class="risk-card__desc">{{ zone.desc }}</div>
                   </article>
                 </div>
-              </section>
-            </div>
 
-            <div class="left-column">
-              <section class="panel board-panel kb-stage-card kb-stage-card--2">
-                <div class="panel-title">
-                  <span class="icon-decorator"><span></span><span></span></span>
-                  隐患排查治理统计
+                <div class="risk-hazard-block">
+                  <div class="panel-title risk-hazard-block__title">
+                    <span class="icon-decorator"><span></span><span></span></span>
+                    隐患排查治理统计
+                  </div>
+                  <div
+                    ref="hazardChartRef"
+                    class="chart-panel chart-panel--echart risk-hazard-block__chart"></div>
                 </div>
-                <div ref="hazardChartRef" class="chart-panel chart-panel--echart"></div>
               </section>
+            </div>
 
+            <div class="left-column">
               <section class="panel board-panel kb-stage-card kb-stage-card--3">
-                <div class="panel-title">
+                <div class="panel-title panel-title--center">
                   <span class="icon-decorator"><span></span><span></span></span>
-                  安全生产天数
+                  结果指标
                 </div>
                 <div ref="safeDayChartRef" class="safe-day-chart-panel"></div>
               </section>
@@ -929,7 +931,7 @@ onUnmounted(() => {
               <section class="panel board-panel kb-stage-card kb-stage-card--5">
                 <div class="panel-title">
                   <span class="icon-decorator"><span></span><span></span></span>
-                  SOC卡类型
+                  行为安全与风险预警
                 </div>
                 <div ref="socChartRef" class="soc-chart-panel"></div>
               </section>
@@ -1139,7 +1141,7 @@ onUnmounted(() => {
 }
 
 .board-body {
-  padding: 18px 18px 24px;
+  padding: 5px 18px 24px;
 }
 
 .summary-toolbar {
@@ -1216,15 +1218,15 @@ onUnmounted(() => {
 }
 
 .summary-panel {
-  padding: 0 10px 22px;
-  height: 210px;
+  padding: 0 10px 10px;
+  height: 200px;
 }
 
 .summary-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 24px;
-  margin-top: 20px;
+  margin-top: 10px;
 }
 
 .summary-tile {
@@ -1316,15 +1318,27 @@ onUnmounted(() => {
 
 .risk-grid {
   display: grid;
-  padding: 30px;
-  margin-top: 34px;
+  padding: 10px 24px 12px;
+  // margin-top: 18px;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 26px 28px;
+  gap: 10px 18px;
+}
+
+.risk-hazard-block {
+  padding: 0 24px 5px;
+}
+
+.risk-hazard-block__title {
+  margin-top: 0;
+}
+
+.risk-hazard-block__chart {
+  margin-top: 12px;
 }
 
 .risk-card {
-  min-height: 182px;
-  padding: 34px 24px;
+  min-height: 124px;
+  padding: 20px 18px;
   background: linear-gradient(180deg, rgb(255 255 255 / 42%) 0%, rgb(220 232 250 / 28%) 100%);
   border: 1px solid rgb(255 255 255 / 58%);
   border-radius: 18px;
@@ -1335,25 +1349,25 @@ onUnmounted(() => {
 
 .risk-card__title {
   display: flex;
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 800;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
 }
 
 .risk-card__dot {
-  width: 18px;
-  height: 18px;
+  width: 14px;
+  height: 14px;
   border-radius: 999px;
-  box-shadow: 0 0 0 6px rgb(255 255 255 / 35%);
+  box-shadow: 0 0 0 4px rgb(255 255 255 / 35%);
 }
 
 .risk-card__desc {
-  margin-top: 36px;
-  font-size: 17px;
+  margin-top: 18px;
+  font-size: 13px;
   font-weight: 600;
   color: #6f819a;
-  line-height: 1.55;
+  line-height: 1.35;
 }
 
 .qualification-panel {