feat(stat): 优化瑞恒看板注气统计和异常警示

- 合并当日和累计注气量看板并支持 Tab 切换
- 为注气量图表增加嵌入展示模式
- 在原累计看板位置增加异常警示
- 支持异常组件按公司切换接口及日报跳转
- 接入瑞恒生产异常统计接口

src/api/pms/stat/index.ts

@@ -198,6 +198,9 @@ export const IotStatApi = {
   getRyNptCount: async (params: any) => {
     return await request.get({ url: `/rq/stat/ry/device/nptCount`, params })
   },
+  getRhNptCount: async (params: any) => {
+    return await request.get({ url: `/rq/stat/rh/device/nptCount`, params })
+  },
   getRdNptCount: async (params: any) => {
     return await request.get({ url: `/rq/stat/rd/device/productionAbnormality`, params })
   },

src/views/pms/stat/rdkb/rd-exception-prompt.vue

@@ -6,6 +6,16 @@ import { IotStatApi } from '@/api/pms/stat'
 dayjs.extend(quarterOfYear)
 
 type TimeRange = 'day' | 'month' | 'quarter' | 'year'
+type Company = 'rd' | 'rh'
+
+const props = withDefaults(
+  defineProps<{
+    company?: Company
+  }>(),
+  {
+    company: 'rd'
+  }
+)
 
 type NptCountItem = {
   nptName: string
@@ -52,7 +62,7 @@ function getCreateTime(type: TimeRange) {
 
 function handleProductionClick(item: NptCountItem) {
   router.push({
-    name: 'IotRdDailyReport',
+    name: props.company === 'rh' ? 'IotRhDailyReport' : 'IotRdDailyReport',
     query: {
       nptName: item.nptName,
       createTime: getCreateTime(activeTimeRange.value)
@@ -63,7 +73,9 @@ function handleProductionClick(item: NptCountItem) {
 async function loadData() {
   loading.value = true
   try {
-    const res = await IotStatApi.getRdNptCount({
+    const loadNptCount =
+      props.company === 'rh' ? IotStatApi.getRhNptCount : IotStatApi.getRdNptCount
+    const res = await loadNptCount({
       createTime: getCreateTime(activeTimeRange.value)
     })
 

src/views/pms/stat/rhkb.vue

@@ -5,13 +5,13 @@ import rhsummary from './rhkb/rhsummary.vue'
 import deviceType from './rhkb/deviceType.vue'
 import deviceStatus from './rhkb/deviceStatus.vue'
 import operation from './rhkb/operation.vue'
-import todayGas from './rhkb/todayGas.vue'
-import historyGas from './rhkb/historyGas.vue'
+import gasStatistics from './rhkb/gasStatistics.vue'
 import deviceList from './rhkb/deviceList.vue'
 import rhsafeday from './rhkb/rhsafeday.vue'
 import assetValue from './rhkb/assetValue.vue'
 import equipmentRate from './rhkb/equipment-rate.vue'
 import inventorySituation from './rhkb/inventorySituation.vue'
+import exceptionPrompt from './rdkb/rd-exception-prompt.vue'
 
 defineOptions({
   name: 'IotRhStatt'
@@ -110,8 +110,8 @@ onUnmounted(() => {
               <deviceType class="kb-stage-card kb-stage-card--2" />
               <equipmentRate class="kb-stage-card kb-stage-card--3" />
               <rhsafeday class="kb-stage-card kb-stage-card--4" />
-              <todayGas class="kb-stage-card kb-stage-card--5" />
-              <historyGas class="kb-stage-card kb-stage-card--6" />
+              <gasStatistics class="kb-stage-card kb-stage-card--5" />
+              <exceptionPrompt company="rh" class="kb-stage-card kb-stage-card--6" />
               <assetValue class="kb-stage-card kb-stage-card--7" />
               <operation class="kb-stage-card kb-stage-card--8" />
               <inventorySituation class="kb-stage-card kb-stage-card--9" />

src/views/pms/stat/rhkb/gasStatistics.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import historyGas from './historyGas.vue'
+import todayGas from './todayGas.vue'
+
+type ActivePanel = 'today' | 'history'
+
+const activePanel = ref<ActivePanel>('today')
+
+const panelOptions: Array<{ label: string; value: ActivePanel }> = [
+  { label: '当日', value: 'today' },
+  { label: '累计', value: 'history' }
+]
+
+const activeTitle = computed(() =>
+  activePanel.value === 'today' ? '当日注气量统计' : '累计注气量统计'
+)
+</script>
+
+<template>
+  <div class="panel flex flex-col">
+    <div class="panel-title flex items-center justify-between">
+      <div class="kb-panel-title-text flex items-center">
+        <div class="icon-decorator">
+          <span></span>
+          <span></span>
+        </div>
+        {{ activeTitle }}
+      </div>
+      <el-segmented
+        v-model="activePanel"
+        :options="panelOptions"
+        size="small"
+        class="gas-statistics-switch" />
+    </div>
+    <div class="flex-1 min-h-0">
+      <todayGas v-if="activePanel === 'today'" embedded />
+      <historyGas v-else embedded />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import url('@/styles/kb.scss');
+
+.gas-statistics-switch {
+  --el-segmented-item-selected-color: #03409b;
+  --el-segmented-item-selected-bg-color: rgb(255 255 255 / 86%);
+  --el-segmented-bg-color: rgb(31 91 184 / 10%);
+  --el-segmented-item-hover-bg-color: rgb(255 255 255 / 56%);
+
+  min-height: calc(26px * var(--kb-scale, 1));
+  padding: calc(2px * var(--kb-scale, 1));
+  border: 1px solid rgb(31 91 184 / 12%);
+  transform: translateY(calc(-2px * var(--kb-scale, 1)));
+
+  :deep(.el-segmented__item) {
+    min-height: calc(22px * var(--kb-scale, 1));
+    padding: 0 calc(8px * var(--kb-scale, 1));
+    font-size: calc(13px * var(--kb-scale, 1));
+    font-weight: 600;
+    color: #29527f;
+  }
+}
+</style>

src/views/pms/stat/rhkb/historyGas.vue

@@ -13,6 +13,10 @@ import {
 } from '@/utils/kb'
 import { IotStatApi } from '@/api/pms/stat'
 
+defineProps<{
+  embedded?: boolean
+}>()
+
 const chartData = ref<ChartItem[]>([])
 
 const router = useRouter()
@@ -225,8 +229,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="panel flex flex-col">
-    <div class="panel-title">
+  <div :class="embedded ? 'h-full flex flex-col' : 'panel flex flex-col'">
+    <div v-if="!embedded" class="panel-title">
       <div class="icon-decorator">
         <span></span>
         <span></span>

src/views/pms/stat/rhkb/todayGas.vue

@@ -12,6 +12,10 @@ import {
 } from '@/utils/kb'
 import { IotStatApi } from '@/api/pms/stat'
 
+defineProps<{
+  embedded?: boolean
+}>()
+
 const chartData = ref<ChartData>({
   xAxis: [],
   series: []
@@ -237,8 +241,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="panel flex flex-col">
-    <div class="panel-title">
+  <div :class="embedded ? 'h-full flex flex-col' : 'panel flex flex-col'">
+    <div v-if="!embedded" class="panel-title">
       <div class="icon-decorator">
         <span></span>
         <span></span>