添加瑞恒统计

src/api/pms/stat/index.ts

@@ -62,6 +62,12 @@ export const IotStatApi = {
   getMaintenanceStatus: async (params: any) => {
     return await request.get({ url: `/rq/stat/maintenance/status/`+params })
   },
+  getRhZql: async (params: any) => {
+    return await request.get({ url: `/rq/stat/rh/zql/`+params })
+  },
+  getRhZqlToday: async (params: any) => {
+    return await request.get({ url: `/rq/stat/rh/zql/today/`+params })
+  },
   getMaintenanceTodayStatus: async (params: any) => {
     return await request.get({ url: `/rq/stat/maintenance/today/status` })
   },

src/views/pms/stat/rhkb.vue

@@ -132,7 +132,28 @@
       </el-card>
     </el-col>
   </el-row>
-
+  <el-row :gutter="16" class="mb-1 mt-4">
+    <el-col :span="12">
+      <el-card class="chart-card" shadow="never">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <span class="text-base font-medium text-gray-600">累计注气量统计(m³)</span>
+          </div>
+        </template>
+        <div ref="zqlChartRef" class="h-[300px]"></div>
+      </el-card>
+    </el-col>
+    <el-col :span="12">
+      <el-card class="chart-card" shadow="never">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <span class="text-base font-medium text-gray-600">当日注气量统计(m³)</span>
+          </div>
+        </template>
+        <div ref="todayZqlRef" class="h-[300px]"></div>
+      </el-card>
+    </el-col>
+  </el-row>
   <!-- TODO 第四行：地图 -->
 </template>
 
@@ -149,15 +170,10 @@ import {
 import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 import { useElementSize } from '@vueuse/core'
-import {
-  IotStatisticsDeviceMessageSummaryRespVO,
-  IotStatisticsSummaryRespVO
-} from '@/api/iot/statistics'
-import { formatDate } from '@/utils/formatTime'
+import { IotStatisticsSummaryRespVO } from '@/api/iot/statistics'
 import { IotStatApi } from '@/api/pms/stat'
-import SummaryCard from "@/components/SummaryCard/index.vue";
-import {reactive, ref} from "vue";
-import {useUserStore} from "@/store/modules/user";
+import SummaryCard from '@/components/SummaryCard/index.vue'
+import { reactive, ref } from 'vue'
 
 // TODO @super：参考下 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/home/index.vue，拆一拆组件
 
@@ -201,6 +217,9 @@ const queryParams = reactive({
 const backendData = ref([])
 const statusChartRef = ref() // 设备数量统计的图表
 const materialChartRef = ref() // 设备数量统计的图表
+const zqlChartRef = ref() // 注气量统计的图表
+const todayZqlRef = ref() // 注气量统计的图表
+
 // 基础统计数据
 // TODO @super：初始为 -1，然后界面展示先是加载中？试试用 cursor 改哈
 const statsData = ref<IotStatisticsSummaryRespVO>({
@@ -246,15 +265,17 @@ const todayStatus = ref({
 const typeData = ref({})
 const materialData = ref({})
 const orderSevenData = ref({})
+const zqlData = ref({})
+const zqlTodayData = ref({})
 const safe = ref()
 /** 获取统计数据 */
-const getStats =  () => {
+const getStats = () => {
   initYwcbChart()
   // 获取基础统计数据
-  IotStatApi.getDeviceCount("rh").then((res) => {
+  IotStatApi.getDeviceCount('rh').then((res) => {
     device.value = res
   })
-  IotStatApi.getMaintainCount("rh").then((res) => {
+  IotStatApi.getMaintainCount('rh').then((res) => {
     maintain.value = res
   })
   IotStatApi.getMainWorkCount().then((res) => {
@@ -286,11 +307,18 @@ const getStats =  () => {
 
   IotStatApi.getOrderSeven('rh').then((res) => {
     orderSevenData.value = res
-    initQxChart();
+    initQxChart()
   })
-  IotStatApi.getMaintenanceStatus("rh").then((res) => {
+  IotStatApi.getMaintenanceStatus('rh').then((res) => {
     by.value = res
-
+  })
+  IotStatApi.getRhZql('rh').then((res) => {
+    zqlData.value = res
+    initZqlChart()
+  })
+  IotStatApi.getRhZqlToday('rh').then((res) => {
+    zqlTodayData.value = res
+    initTodayZqlChart()
   })
   const fillQueryParams = reactive({
     startTime: Date.now() - 7 * 24 * 60 * 60 * 1000, // 设置默认开始时间为 7 天前
@@ -299,7 +327,7 @@ const getStats =  () => {
     deptId: null, // 选中的部门ID
     status: null // 填写状态
   })
-  IotStatApi.getInspectStatuss(fillQueryParams,'rh').then((res) => {
+  IotStatApi.getInspectStatuss(fillQueryParams, 'rh').then((res) => {
     inspectt.value = res
   })
   fillQueryParams.deptId = '157'
@@ -309,7 +337,6 @@ const getStats =  () => {
 }
 
 const initMaterials = () => {
-
   echarts.init(materialChartRef.value).setOption({
     tooltip: {
       trigger: 'item'
@@ -320,8 +347,8 @@ const initMaterials = () => {
       // align: 'left',
       // orient: 'vertical',
       // icon: 'circle'
-      orient: 'horizontal',  // 水平排列图例项
-      bottom: '0%',         // 放置在底部
+      orient: 'horizontal', // 水平排列图例项
+      bottom: '0%', // 放置在底部
       icon: 'circle'
     },
     series: [
@@ -350,6 +377,78 @@ const initMaterials = () => {
     ]
   })
 }
+let zqlTodayInstance = null
+const initTodayZqlChart = async () => {
+  if (!todayZqlRef.value) return
+
+  // 获取数据
+  // ECharts配置
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: (params) => {
+        return `${params[0].axisValue}<br/>
+                ${params[0].marker} ${params[0].seriesName}: ${params[0].value}`
+      }
+    },
+    legend: {
+      data: ['当日注气量'],
+      top: 25
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: zqlTodayData.value.xAxis,
+      axisLabel: {
+        formatter: (value) => value.split('-').join('/') // 显示为 2023/01
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        formatter: (value) => Math.floor(value).toString()
+      }
+    },
+    series: zqlTodayData.value.series.map((item, index) => {
+      // 假设前两条曲线使用左侧 Y 轴，后两条曲线使用右侧 Y 轴
+      const yAxisIndex = index < 2 ? 0 : 1
+      return {
+        name: item.name,
+        type: 'bar',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        itemStyle: {
+          color: [ '#91cc75'][index]
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(84,112,198,0.4)' },
+            { offset: 1, color: 'rgba(84,112,198,0.1)' }
+          ])
+        },
+        data: item.data,
+        yAxisIndex: yAxisIndex // 指定使用的 Y 轴
+      }
+    })
+  }
+
+  // 初始化图表
+  zqlTodayInstance = echarts.init(todayZqlRef.value)
+  zqlTodayInstance.setOption(option)
+
+  // 窗口缩放监听
+  window.addEventListener('resize', handleResize)
+  handleResize()
+}
 
 /** 初始化图表 */
 const initDeviceStatusCharts = () => {
@@ -359,8 +458,8 @@ const initDeviceStatusCharts = () => {
       trigger: 'item'
     },
     legend: {
-      orient: 'horizontal',  // 水平排列图例项
-      bottom: '0%',         // 放置在底部
+      orient: 'horizontal', // 水平排列图例项
+      bottom: '0%', // 放置在底部
       icon: 'circle'
     },
     series: [
@@ -388,8 +487,6 @@ const initDeviceStatusCharts = () => {
       }
     ]
   })
-
-
 }
 
 /** 初始化消息统计图表 */
@@ -415,8 +512,8 @@ const fetchChartData = async () => {
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve({
-        months: ['空压机','增压机','提纯撬'],
-        repairs: [10, 30, 90 ]
+        months: ['空压机', '增压机', '提纯撬'],
+        repairs: [10, 30, 90]
       })
     }, 300)
   })
@@ -453,7 +550,7 @@ const initYwcbChart = async () => {
     },
     xAxis: {
       type: 'category',
-      data: months,
+      data: zqlTodayData.value.xAxis,
       axisLabel: {
         rotate: 45,
         margin: 15
@@ -470,9 +567,7 @@ const initYwcbChart = async () => {
         name: '当日运维成本',
         type: 'bar',
         itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#f69606' },
-          ])
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#f69606' }])
         },
         emphasis: {
           focus: 'series'
@@ -500,18 +595,7 @@ const topContainer = ref(null)
 let topInstance = null
 // 响应式容器尺寸
 const { width, height } = useElementSize(topContainer)
-// 处理数据（排序+限制5条）
-const processedData = () => {
-  const data = IotStatApi.getDeviceTypeCount()
-  backendData.value = data
-  return [...backendData.value].sort((a, b) => a.value - b.value)
-}
 
-const fetchTop = () => {
-  IotStatApi.getDeviceTypeCount().then((res) => {
-    backendData.value = res
-  })
-}
 // 初始化图表配置
 const getTopOption = () => {
   // backendData.value = data
@@ -611,92 +695,93 @@ const activeDom = ref(null)
 let activeInstance = null
 
 const activeData = ref([])
-const initActiveChart = async () => {
-  if (!activeDom.value) return
-  activeData.value = await IotStatApi.getDeptCount()
-  activeInstance = echarts.init(activeDom.value)
+const qxRef = ref(null)
+let qxInstance = null
+let zqlInstance = null
 
+const initZqlChart = () => {
+  if (!zqlChartRef.value) return
+  zqlInstance = echarts.init(zqlChartRef.value)
+  debugger
   const option = {
     tooltip: {
       trigger: 'axis',
-      axisPointer: { type: 'shadow' }, //:ml-citation{ref="1,7" data="citationList"}
-      formatter: (params) => `
-        ${params[0].name}<br/>
-        ${params[0].marker} 总人数: ${params[0].value}<br/>
-        ${params[1].marker} 活跃人数: ${params[1].value}
-      `
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
     },
     legend: {
-      data: ['总人数', '活跃人数'],
+      data: zqlData.value.series.map((item) => item.name),
       top: 30
     },
     grid: {
       left: '3%',
       right: '4%',
       bottom: '3%',
-      containLabel: true //:ml-citation{ref="2,7" data="citationList"}
+      containLabel: true
     },
     xAxis: {
       type: 'category',
-      data: activeData.value.map((item) => item.department),
+      boundaryGap: false,
+      data: zqlData.value.xAxis,
       axisLabel: {
-        interval: 0,
-        rotate: 0 //:ml-citation{ref="5" data="citationList"}
-      }
-    },
-    yAxis: {
-      type: 'value',
-      name: '人数',
-      splitLine: {
-        show: true,
-        lineStyle: { type: 'dashed' }
+        formatter: (value) => value.split('-').join('/') // 显示为 2023/01
       }
     },
-    series: [
+    // yAxis: {
+    //   type: 'value',
+    //   axisLabel: {
+    //     formatter: '{value}'
+    //   }
+    // },
+    yAxis: [
       {
-        name: '总人数',
-        type: 'bar',
-        data: activeData.value.map((item) => item.total),
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#5470c6' },
-            { offset: 1, color: '#83bff6' }
-          ])
+        type: 'value',
+        axisLabel: {
+          formatter: '{value}'
         },
-        barWidth: 30
+        position: 'left' // 左侧 Y 轴
       },
       {
-        name: '活跃人数',
-        type: 'bar',
-        data: activeData.value.map((item) => item.active),
+        type: 'value',
+        axisLabel: {
+          formatter: '{value}'
+        },
+        position: 'right', // 右侧 Y 轴
+        splitLine: {
+          show: false // 隐藏右侧 Y 轴的分割线
+        }
+      }
+    ],
+
+    series: zqlData.value.series.map((item, index) => {
+      // 假设前两条曲线使用左侧 Y 轴，后两条曲线使用右侧 Y 轴
+      const yAxisIndex = index < 2 ? 0 : 1
+      return {
+        name: item.name,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 8,
         itemStyle: {
+          color: ['#5470c6', '#f1d209', '#e14f0f', '#91cc75'][index]
+        },
+        areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#91cc75' },
-            { offset: 1, color: '#e6f4d2' }
+            { offset: 0, color: 'rgba(84,112,198,0.4)' },
+            { offset: 1, color: 'rgba(84,112,198,0.1)' }
           ])
         },
-        barWidth: 30
+        data: item.data,
+        yAxisIndex: yAxisIndex // 指定使用的 Y 轴
       }
-    ]
+    })
   }
 
-  activeInstance.setOption(option)
-}
-
-const qxRef = ref(null)
-let qxInstance = null
-
-// 生成近12个月份 (包含当年和去年)
-const generateMonths = () => {
-  const months = []
-  const date = new Date()
-  date.setMonth(date.getMonth() + 1, 1) // 从下个月开始倒推
-
-  for (let i = 0; i < 12; i++) {
-    date.setMonth(date.getMonth() - 1)
-    months.push(`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}`)
-  }
-  return months.reverse()
+  zqlInstance.setOption(option)
 }
 
 const initQxChart = () => {
@@ -776,7 +861,7 @@ const initQxChart = () => {
     // }))
     series: orderSevenData.value.series.map((item, index) => {
       // 假设前两条曲线使用左侧 Y 轴，后两条曲线使用右侧 Y 轴
-      const yAxisIndex = index < 2 ? 0 : 1;
+      const yAxisIndex = index < 2 ? 0 : 1
       return {
         name: item.name,
         type: 'line',