aa

src/api/pms/qhse/index.ts

@@ -456,6 +456,10 @@ export const QHSEPtwApi = {
 export const kanbanApi = {
   getKanban: async () => {
     return await request.get({ url: `/rq/qhse/stat/number` })
+  },
+  // 安全生产天数
+  getSafeDay: async (id) => {
+    return await request.get({ url: `rq/qhse-safe-day/get/dept/company?deptId=${id}` })
   }
 }
 

src/views/pms/qhse/kanban/index.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import * as echarts from 'echarts'
 import { kanbanApi } from '@/api/pms/qhse/index'
+import { useUserStore } from '@/store/modules/user'
+
+const userStore = useUserStore()
 import {
   AlarmClock,
   Checked,
@@ -110,10 +113,10 @@ const hazardBars = ref([
   { label: '未整改', value: 0, color: '#ff981f' }
 ])
 
-const incidentStats = [
+const incidentStats = ref([
   { label: '安全事故', value: '0起', accent: '#2ac7c9' },
   { label: '安全生产天数', value: '3起', accent: '#f2c11a' }
-]
+])
 
 const riskZones: RiskZone[] = [
   { title: '高危风险区', desc: '危化库 / 试压区 / 配电房', color: '#ff4c49' },
@@ -345,6 +348,11 @@ function initHazardChart() {
   hazardChart.setOption(getHazardChartOption(), true)
 }
 
+function updateHazardChart() {
+  if (!hazardChart) return
+  hazardChart.setOption(getHazardChartOption(), true)
+}
+
 function resizeHazardChart() {
   hazardChart?.resize()
 }
@@ -478,30 +486,48 @@ const getKanban = async () => {
   return data
 }
 
+function formatPercent(numerator: number, denominator: number) {
+  if (!denominator || Number.isNaN(denominator)) {
+    return '0%'
+  }
+
+  return `${((numerator / denominator) * 100).toFixed(1)}%`
+}
+
 const summaryPanel = ref<any>(null)
+let safeDay = ref<any>(null)
 onMounted(async () => {
   summaryPanel.value = await getKanban()
+
   summaryCards.value[0].value = summaryPanel.value.danger
   summaryCards.value[1].value = summaryPanel.value.monthHazard
-  summaryCards.value[2].value =
-    (
-      ((summaryPanel.value.totalHazard - summaryPanel.value.todoHazard) /
-        summaryPanel.value.totalHazard) *
-      100
-    ).toFixed(1) + '%'
+  summaryCards.value[2].value = formatPercent(
+    summaryPanel.value.totalHazard - summaryPanel.value.todoHazard,
+    summaryPanel.value.totalHazard
+  )
   summaryCards.value[3].value = summaryPanel.value.ptwCount
-  summaryCards.value[4].value =
-    (
-      ((summaryPanel.value.totdalCert - summaryPanel.value.expiredCert) /
-        summaryPanel.value.totdalCert) *
-      100
-    ).toFixed(1) + '%'
+  summaryCards.value[4].value = formatPercent(
+    summaryPanel.value.totdalCert - summaryPanel.value.expiredCert,
+    summaryPanel.value.totdalCert
+  )
 
   summaryCards.value[4].note = `Warn: ${summaryPanel.value.warnCert}`
 
   hazardBars.value[0].value = summaryPanel.value.totalHazard
   hazardBars.value[1].value = summaryPanel.value.totalHazard - summaryPanel.value.todoHazard
   hazardBars.value[2].value = summaryPanel.value.todoHazard
+
+  incidentStats.value[0].value = `${summaryPanel.value.accident}起`
+
+  try {
+    safeDay.value = await kanbanApi.getSafeDay(userStore.getUser.deptId)
+  } catch (error) {
+    console.log(error)
+  }
+
+  nextTick(() => {
+    updateHazardChart()
+  })
 })
 </script>
 
@@ -548,6 +574,23 @@ onMounted(async () => {
           </section>
 
           <div class="board-main">
+            <div class="center-column">
+              <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">
+                    <div class="risk-card__title">
+                      <span class="risk-card__dot" :style="{ background: zone.color }"></span>
+                      <span :style="{ color: zone.color }">{{ zone.title }}</span>
+                    </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">
@@ -560,7 +603,7 @@ onMounted(async () => {
               <section class="panel board-panel kb-stage-card kb-stage-card--3">
                 <div class="panel-title">
                   <span class="icon-decorator"><span></span><span></span></span>
-                  事故事件趋势（近12月）
+                  安全生产天数
                 </div>
                 <div class="incident-panel">
                   <div class="incident-graphic">
@@ -580,24 +623,6 @@ onMounted(async () => {
               </section>
             </div>
 
-            <div class="center-column">
-              <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">
-                    <div class="risk-card__title">
-                      <span class="risk-card__dot" :style="{ background: zone.color }"></span>
-                      <span :style="{ color: zone.color }">{{ zone.title }}</span>
-                    </div>
-                    <div class="risk-card__desc">{{ zone.desc }}</div>
-                  </article>
-                </div>
-              </section>
-            </div>
-
             <div class="right-column">
               <section class="panel board-panel kb-stage-card kb-stage-card--5">
                 <div class="panel-title">