zc

src/api/screen.js

@@ -283,3 +283,12 @@ export function iotBigViewSpeakerPlayText(params) {
     params
   })
 }
+
+// 化学品库存动态统计
+export function getChemicalStockSummary() {
+  return request({
+    url: '/chemical/stock/stockSummary',
+    method: 'get'
+  })
+}
+

src/components/AlarmInfo.vue

@@ -33,12 +33,11 @@
           class="warn-item"
         >
           <div class="warn-item-head">
-            <span class="warn-lab">&#x1F6A8; {{ item.lab }}（{{ item.room }}）- {{ item.unit }}</span>
+            <span class="warn-cat" :class="item.category === '应急预警' ? 'emergency' : 'violation'"><span>{{item.category === '应急预警' ? '🚨️️ ':'☣️ '}}</span>{{ item.category }}</span>
+            <span class="warn-lab">{{ item.lab }}</span>
             <span class="warn-time">{{ item.time }}</span>
           </div>
-          <div class="warn-detail">
-            异常指标：<span class="warn-metric-val">{{ item.metric }} {{ item.val }}</span>
-          </div>
+          <div class="warn-detail">{{ item.content }}</div>
         </div>
       </div>
     </div>
@@ -48,7 +47,6 @@
 <script>
 import { getRiskWarning } from '@/api/screen'
 
-const LEVEL_LABELS = { 1: '低风险', 2: '中风险', 3: '较高风险', 4: '高风险' }
 
 export default {
   name: 'AlarmInfo',
@@ -83,14 +81,16 @@ export default {
       try {
         const res = await getRiskWarning()
         if (res.code === 200) {
-          this.totalCount = res.data.monthAlarmCount
-          this.warningList = (res.data.eventList || []).map(e => ({
-            lab:    e.subName,
-            room:   '',
-            unit:   '',
-            metric: e.eventName,
-            val:    LEVEL_LABELS[e.riskPlanLevel] || '',
-            time:   e.eventStartTime ? e.eventStartTime.replace('T', ' ') : ''
+          const d = res.data
+          this.totalCount     = d.monthAlarmCount
+          this.emergencyCount = d.emergencyCount
+          this.violationCount = d.violationCount
+          this.warningList = (d.eventList || []).map(e => ({
+            lab:      e.labInfo || e.subName,
+            category: e.category || '',
+            content:  e.content || e.eventName,
+            time:     e.eventStartTime ? e.eventStartTime.replace('T', ' ') : '',
+            active:   e.eventStatus
           }))
         }
       } catch (e) {
@@ -296,6 +296,27 @@ export default {
   gap: 15px;
 }
 
+.warn-cat {
+  font-size: 22px;
+  font-weight: 600;
+  padding: 2px 12px;
+  border-radius: 6px;
+  white-space: nowrap;
+  flex-shrink: 0;
+
+  &.emergency {
+    background: rgba(239,68,68,0.15);
+    color: #ef4444;
+    border: 1px solid rgba(239,68,68,0.35);
+  }
+
+  &.violation {
+    background: rgba(168,85,247,0.15);
+    color: #a855f7;
+    border: 1px solid rgba(168,85,247,0.35);
+  }
+}
+
 .warn-lab {
   font-size: 28px;
   font-weight: 600;

src/components/ChemicalsStats.vue

@@ -82,6 +82,7 @@
 
 <script>
 import * as echarts from 'echarts'
+import { getChemicalStockSummary } from '@/api/screen'
 
 const C = 2 * Math.PI * 24 // circumference r=24 ~150.8
 
@@ -89,12 +90,14 @@ export default {
   name: 'ChemicalsStats',
   data() {
     return {
-      totalAmount: 1229,
-      ctrlAmount: 269,
-      freeAmount: 960,
-      ctrlCategories: 5,
-      freeCategories: 5,
-      chart: null
+      totalAmount: 0,
+      ctrlAmount: 0,
+      freeAmount: 0,
+      ctrlCategories: 0,
+      freeCategories: 0,
+      totalUnit: 'L',
+      chart: null,
+      pollTimer: null
     }
   },
   computed: {
@@ -114,13 +117,33 @@ export default {
     }
   },
   mounted() {
-    this.$nextTick(() => this.initChart())
+    this.fetchData()
+    this.pollTimer = setInterval(this.fetchData, 5 * 60 * 1000)
   },
   beforeDestroy() {
+    if (this.pollTimer) clearInterval(this.pollTimer)
     if (this.chart) this.chart.dispose()
     window.removeEventListener('resize', this.handleResize)
   },
   methods: {
+    async fetchData() {
+      try {
+        const res = await getChemicalStockSummary()
+        if (res.code === 200) {
+          const d = res.data
+          this.totalAmount       = d.totalSurplus
+          this.totalUnit         = d.totalUnit || 'L'
+          this.ctrlAmount        = d.controlledSurplus
+          this.freeAmount        = d.uncontrolledSurplus
+          this.ctrlCategories    = d.controlledCategoryCount
+          this.freeCategories    = d.uncontrolledCategoryCount
+        }
+      } catch (e) {
+        // 保持默认值
+      }
+      if (this.chart) { this.chart.dispose(); this.chart = null }
+      this.$nextTick(() => this.initChart())
+    },
     initChart() {
       this.chart = echarts.init(this.$refs.chemPieChart, null, { renderer: 'canvas', devicePixelRatio: 2 })
       this.chart.setOption({

src/components/EnvMonitorStats.vue

@@ -88,7 +88,7 @@ export default {
             { icon: '⚗️', value: d.terminalCount, name: '化学品智能终端' },
             { icon: '🌡️', value: d.sensorCount,   name: '传感器' },
             { icon: '📷', value: d.cameraCount,   name: '智慧摄像头' },
-            { icon: '📡', value: d.otherCount,    name: '其他智能设备' }
+            { icon: '📡', value: d.iotCount,    name: '其他智能设备' }
           ]
         }
       } catch (e) {

src/components/EquipmentStats.vue

@@ -161,7 +161,9 @@ export default {
           itemGap: 22,
           textStyle: { color: '#a8cce8', fontSize: 22 },
           formatter: function(name) {
-            return name + ' ' + countMap[name] + '台'
+            const total = Object.values(countMap).reduce((a, b) => a + b, 0) || 1
+            const pct = Math.round(countMap[name] / total * 100)
+            return name + '  ' + countMap[name] + '台  ' + pct + '%'
           },
           rich: {
             nm: { fontSize: 22, color: '#a8cce8', width: 90 },
@@ -184,8 +186,8 @@ export default {
             color: '#a8cce8'
           },
           labelLine: {
-            length: 10,
-            length2: 10,
+            length: 20,
+            length2: 40,
             lineStyle: { color: 'rgba(30,144,255,0.4)', width: 2 }
           },
           data: ringData,
@@ -231,8 +233,8 @@ export default {
         series: [{
           type: 'pie', radius: ['36%', '62%'], center: ['38%', '52%'],
           itemStyle: { borderRadius: 5, borderColor: 'rgba(3,14,31,0.5)', borderWidth: 2 },
-          label: { show: true, formatter: '{b}\n{c}台', fontSize: 20, color: '#a8cce8', lineHeight: 30 },
-          labelLine: { length: 24, length2: 40, lineStyle: { color: 'rgba(30,144,255,0.4)', width: 2 } },
+          label: { show: true, formatter: params => `${params.name}\n${params.value}台\n${params.percent}%`, fontSize: 20, color: '#a8cce8', lineHeight: 30 },
+          labelLine: { length: 30, length2: 50, lineStyle: { color: 'rgba(30,144,255,0.4)', width: 2 } },
           data: pieData,
           emphasis: { scale: true, scaleSize: 6, itemStyle: { shadowBlur: 25, shadowColor: 'rgba(30,144,255,0.6)' } }
         }]