aa

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import * as echarts from 'echarts'
 import { kanbanApi } from '@/api/pms/qhse/index'
-import { IotDangerApi } from '@/api/pms/qhse/index'
+import { IotDangerApi, IotMeasureCertApi, IotInstrumentApi } from '@/api/pms/qhse/index'
 import { useUserStore } from '@/store/modules/user'
 
 const userStore = useUserStore()
@@ -32,12 +32,6 @@ defineOptions({
   name: 'PmsQhseKanban'
 })
 
-type RiskZone = {
-  title: string
-  desc: string
-  color: string
-}
-
 type PermitStat = {
   label: string
   value: number
@@ -133,12 +127,12 @@ const permitStats: PermitStat[] = [
   { label: '作业场所', value: 15, color: '#8d8cff' }
 ]
 
-const qualificationWarnings = [
-  { label: '证件过期', value: '0人', accent: '#24364f' },
-  { label: '即将到期', value: '3人（需复审）', accent: '#e6ab00' }
-]
+const qualificationWarnings = ref([
+  { label: '证件过期', value: 0, accent: '#ff7a7a' },
+  { label: '即将到期', value: 0, accent: '#e6ab00' }
+])
 
-const bottomCards: BottomCard[] = [
+const bottomCards = ref([
   {
     title: '体系合规',
     icon: Files,
@@ -151,7 +145,7 @@ const bottomCards: BottomCard[] = [
     icon: Histogram,
     accent: '#4f8dff',
     glow: 'rgba(79, 141, 255, 0.2)',
-    lines: ['在用: 32台', '待检: 2台（重点关注）']
+    lines: ['在用: 0台', '待检: 0台（重点关注）']
   },
   {
     title: '应急演练',
@@ -172,9 +166,9 @@ const bottomCards: BottomCard[] = [
     icon: Flag,
     accent: '#28c98b',
     glow: 'rgba(40, 201, 139, 0.2)',
-    lines: ['危险暂存合规', '三废处置100%达标']
+    lines: ['危废暂存合规', '三废处置100%达标']
   }
-]
+])
 
 const targetWrapperStyle = computed(() => ({
   width: `${DESIGN_WIDTH * scale.value}px`,
@@ -222,6 +216,17 @@ async function getStatic() {
   })
 }
 
+let expired = ref(0)
+let warn = ref(0)
+async function getCertStatic() {
+  const res = await IotMeasureCertApi.getIotMeasureCertStatistics(userStore.user.deptId)
+  expired.value = res.expired
+  warn.value = res.warn
+
+  qualificationWarnings.value[0].value = expired.value
+  qualificationWarnings.value[1].value = warn.value
+}
+
 onMounted(() => {
   supportsZoom.value = typeof CSS !== 'undefined' && CSS.supports?.('zoom', '1') === true
   nextTick(updateScale)
@@ -250,6 +255,30 @@ onUnmounted(() => {
   destroySocChart()
 })
 
+// 仪器
+let total = ref(0)
+let instrumentExpired = ref(0)
+const getList = async () => {
+  try {
+    const data = await IotInstrumentApi.getInstrumentList({
+      pageNo: 1,
+      pageSize: 10,
+      deptId: userStore.user.deptId
+    })
+    total.value = data.total
+
+    const res = await IotInstrumentApi.getInstrumentStatistics(userStore.user.deptId)
+
+    instrumentExpired.value = res.expired
+
+    bottomCards.value[1].lines = [
+      `在用: ${total.value}台`,
+      `待检: ${instrumentExpired.value}台（重点关注）`
+    ]
+  } finally {
+  }
+}
+
 function getHazardChartOption(): echarts.EChartsOption {
   return {
     ...ANIMATION,
@@ -667,6 +696,13 @@ onMounted(async () => {
 
   try {
     getStatic()
+    getCertStatic()
+  } catch (error) {
+    console.log(error)
+  }
+
+  try {
+    await getList()
   } catch (error) {
     console.log(error)
   }
@@ -788,7 +824,16 @@ onMounted(async () => {
                       :key="item.label"
                       class="qualification-item">
                       <span class="qualification-item__label">{{ item.label }}：</span>
-                      <strong :style="{ color: item.accent }">{{ item.value }}</strong>
+                      <strong :style="{ color: item.accent }">
+                        <CountTo
+                          :duration="2600"
+                          :end-val="item.value"
+                          :start-val="0"
+                          :style="{ color: item.accent }" />
+
+                        <span v-if="item.label === '证件过期'" class="pl-2">人</span>
+                        <span v-else>人（需复审）</span>
+                      </strong>
                     </div>
                   </div>
                 </div>
@@ -818,7 +863,29 @@ onMounted(async () => {
                 <div class="bottom-card__title">{{ card.title }}</div>
               </div>
               <div class="bottom-card__content">
-                <p v-for="line in card.lines" :key="line">{{ line }}</p>
+                <template v-if="card.title !== '安全检测'">
+                  <p v-for="line in card.lines" :key="line">{{ line }}</p>
+                </template>
+                <template v-else>
+                  <p>
+                    <span>在用：</span>
+                    <CountTo
+                      :duration="2600"
+                      :end-val="total"
+                      :start-val="0"
+                      :style="{ color: card.accent }" />
+                    <span class="pl-2">台</span>
+                  </p>
+                  <p>
+                    <span>待检：</span>
+                    <CountTo
+                      :duration="2600"
+                      :end-val="instrumentExpired"
+                      :start-val="0"
+                      :style="{ color: '#ff7a7a' }" />
+                    <span class="pl-2">台(重点关注)</span>
+                  </p>
+                </template>
               </div>
             </article>
           </section>