看板对接

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

@@ -1,6 +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 { useUserStore } from '@/store/modules/user'
 
 const userStore = useUserStore()
@@ -117,12 +118,12 @@ const hazardBars = ref([
   { label: '未整改', value: 0, color: '#ff981f' }
 ])
 
-const riskZones: RiskZone[] = [
-  { title: '高危风险区', desc: '危化库 / 试压区 / 配电房', color: '#ff4c49' },
-  { title: '中风险区', desc: '焊接 / 机加 / 吊装区', color: '#ff981f' },
-  { title: '低风险区', desc: '物料库 / 维修 / 装卸区', color: '#f2c11a' },
-  { title: '安全控制区', desc: '办公区 / 展厅 / 主通道', color: '#5794ff' }
-]
+const riskZones = ref([
+  { title: '', desc: '办公区 / 展厅 / 主通道', color: '#25b36a', value: 0 },
+  { title: '', desc: '物料库 / 维修 / 装卸区', color: '#3d7cff', value: 0 },
+  { title: '', desc: '焊接 / 机加 / 吊装区', color: '#ff9827', value: 0 },
+  { title: '', desc: '危化库 / 试压区 / 配电房', color: '#ff5b61', value: 0 }
+])
 
 const permitStats: PermitStat[] = [
   { label: '个人防护', value: 18, color: '#4f8dff' },
@@ -210,6 +211,17 @@ function updateScale() {
   })
 }
 
+const staticData = ref({})
+async function getStatic() {
+  const res = await IotDangerApi.getDangerStatistics(userStore.user.deptId)
+  staticData.value = res.classify
+
+  riskZones.value.forEach((zone, index: number) => {
+    zone.value = staticData.value[index].count
+    zone.title = `${staticData.value[index].classify}区`
+  })
+}
+
 onMounted(() => {
   supportsZoom.value = typeof CSS !== 'undefined' && CSS.supports?.('zoom', '1') === true
   nextTick(updateScale)
@@ -653,6 +665,12 @@ onMounted(async () => {
     console.log(error)
   }
 
+  try {
+    getStatic()
+  } catch (error) {
+    console.log(error)
+  }
+
   nextTick(() => {
     updateHazardChart()
     updateSafeDayChart()
@@ -714,6 +732,12 @@ onMounted(async () => {
                     <div class="risk-card__title">
                       <span class="risk-card__dot" :style="{ background: zone.color }"></span>
                       <span :style="{ color: zone.color }">{{ zone.title }}</span>
+                      <!-- <span class="risk-card__count">{{ zone.value }}</span> -->
+                      <CountTo
+                        :duration="2600"
+                        :end-val="zone.value"
+                        :start-val="0"
+                        :style="{ color: zone.color, fontSize: '28px' }" />
                     </div>
                     <div class="risk-card__desc">{{ zone.desc }}</div>
                   </article>
@@ -903,7 +927,7 @@ onMounted(async () => {
 }
 
 .safe-day-chart-panel {
-  height: 228px;
+  height: 218px;
   // margin-top: 18px;
 }