统计调整

src/views/pms/stat/rhkb.vue

@@ -170,17 +170,12 @@ import {
 import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 import { useElementSize } from '@vueuse/core'
-import { IotStatisticsSummaryRespVO } from '@/api/iot/statistics'
 import { IotStatApi } from '@/api/pms/stat'
 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，拆一拆组件
-
 /** IoT 首页 */
 defineOptions({ name: 'IotRhStat' })
-
-// TODO @super：使用下 Echart 组件，参考 yudao-ui-admin-vue3/src/views/mall/home/components/TradeTrendCard.vue 等
 echarts.use([
   TooltipComponent,
   LegendComponent,
@@ -220,23 +215,6 @@ const materialChartRef = ref() // 设备数量统计的图表
 const zqlChartRef = ref() // 注气量统计的图表
 const todayZqlRef = ref() // 注气量统计的图表
 
-// 基础统计数据
-// TODO @super：初始为 -1，然后界面展示先是加载中？试试用 cursor 改哈
-const statsData = ref<IotStatisticsSummaryRespVO>({
-  productCategoryCount: 0,
-  productCount: 0,
-  deviceCount: 0,
-  deviceMessageCount: 0,
-  productCategoryTodayCount: 0,
-  productTodayCount: 0,
-  deviceTodayCount: 0,
-  deviceMessageTodayCount: 0,
-  deviceOnlineCount: 0,
-  deviceOfflineCount: 0,
-  deviceInactiveCount: 0,
-  productCategoryDeviceCounts: {}
-})
-
 const device = ref({
   total: undefined,
   today: undefined
@@ -297,9 +275,9 @@ const getStats = () => {
     typeData.value = res
     initDeviceStatusCharts()
   })
-  IotStatApi.getSafeCount().then((res) => {
-    safe.value = res
-  })
+  // IotStatApi.getSafeCount().then((res) => {
+  //   safe.value = res
+  // })
   IotStatApi.getMaterial().then((res) => {
     materialData.value = res
     initMaterials()
@@ -335,9 +313,10 @@ const getStats = () => {
     fill.value = res.totalList[0] || []
   })
 }
-
+let materialInstance = null
 const initMaterials = () => {
-  echarts.init(materialChartRef.value).setOption({
+  if (!materialChartRef.value) return
+  const option = {
     tooltip: {
       trigger: 'item'
     },
@@ -375,7 +354,14 @@ const initMaterials = () => {
         data: materialData.value
       }
     ]
-  })
+  }
+  // 初始化图表
+  materialInstance = echarts.init(materialChartRef.value)
+  materialInstance.setOption(option)
+
+  // 窗口缩放监听
+  window.addEventListener('resize', handleMaterialResize)
+  handleMaterialResize()
 }
 let zqlTodayInstance = null
 const initTodayZqlChart = async () => {
@@ -446,8 +432,8 @@ const initTodayZqlChart = async () => {
   zqlTodayInstance.setOption(option)
 
   // 窗口缩放监听
-  window.addEventListener('resize', handleResize)
-  handleResize()
+  window.addEventListener('resize', handleZqlTodayResize)
+  handleZqlTodayResize()
 }
 
 /** 初始化图表 */
@@ -493,19 +479,6 @@ const initDeviceStatusCharts = () => {
 const chartContainer = ref(null)
 let chartInstance = null
 
-// 生成过去12个月份的标签 (格式: YYYY-MM)
-const generateMonthLabels = () => {
-  const months = []
-  const date = new Date()
-  for (let i = 11; i >= 0; i--) {
-    const tempDate = new Date(date.getFullYear(), date.getMonth() - i, 1)
-    const year = tempDate.getFullYear()
-    const month = String(tempDate.getMonth() + 1).padStart(2, '0')
-    months.push(`${year}-${month}`)
-  }
-  return months
-}
-
 // 模拟数据获取
 const fetchChartData = async () => {
   // 模拟异步请求
@@ -591,6 +564,22 @@ const handleResize = () => {
   chartInstance?.resize()
 }
 
+// 自适应调整
+const handleTopResize = () => {
+  topInstance?.resize()
+}
+const handleQxResize = () => {
+  qxInstance?.resize()
+}
+const handleZqlResize = () => {
+  zqlInstance?.resize()
+}
+const handleZqlTodayResize = () => {
+  zqlTodayInstance?.resize()
+}
+const handleMaterialResize = () => {
+  materialInstance?.resize()
+}
 const topContainer = ref(null)
 let topInstance = null
 // 响应式容器尺寸
@@ -691,10 +680,6 @@ watch(
   { deep: true }
 )
 
-const activeDom = ref(null)
-let activeInstance = null
-
-const activeData = ref([])
 const qxRef = ref(null)
 let qxInstance = null
 let zqlInstance = null
@@ -731,12 +716,6 @@ const initZqlChart = () => {
         formatter: (value) => value.split('-').join('/') // 显示为 2023/01
       }
     },
-    // yAxis: {
-    //   type: 'value',
-    //   axisLabel: {
-    //     formatter: '{value}'
-    //   }
-    // },
     yAxis: [
       {
         type: 'value',
@@ -782,6 +761,9 @@ const initZqlChart = () => {
   }
 
   zqlInstance.setOption(option)
+  // 窗口缩放监听
+  window.addEventListener('resize', handleZqlResize)
+  handleZqlResize()
 }
 
 const initQxChart = () => {
@@ -816,12 +798,6 @@ const initQxChart = () => {
         formatter: (value) => value.split('-').join('/') // 显示为 2023/01
       }
     },
-    // yAxis: {
-    //   type: 'value',
-    //   axisLabel: {
-    //     formatter: '{value}'
-    //   }
-    // },
     yAxis: [
       {
         type: 'value',
@@ -842,23 +818,6 @@ const initQxChart = () => {
       }
     ],
 
-    // series: orderSevenData.value.series.map((item, index) => ({
-    //   name: item.name,
-    //   type: 'line',
-    //   smooth: true,
-    //   symbol: 'circle',
-    //   symbolSize: 8,
-    //   itemStyle: {
-    //     color: ['#5470c6', '#f1d209', '#e14f0f','#09a134'][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
-    // }))
     series: orderSevenData.value.series.map((item, index) => {
       // 假设前两条曲线使用左侧 Y 轴，后两条曲线使用右侧 Y 轴
       const yAxisIndex = index < 2 ? 0 : 1
@@ -884,11 +843,16 @@ const initQxChart = () => {
   }
 
   qxInstance.setOption(option)
+  // 窗口缩放监听
+  window.addEventListener('resize', handleQxResize)
+  handleQxResize()
 }
 
 // 响应式调整
 const resizeQxChart = () => qxInstance?.resize()
-
+const resizeZqlChart = () => zqlInstance?.resize()
+const resizeZqlTodayChart = () => zqlTodayInstance?.resize()
+const resizeMaterialChart = () => materialInstance?.resize()
 /** 初始化 */
 onMounted(() => {
   getStats()
@@ -907,6 +871,12 @@ onBeforeUnmount(() => {
   window.removeEventListener('resize', handleResize)
   qxInstance?.dispose()
   window.removeEventListener('resize', resizeQxChart)
+  zqlInstance?.dispose()
+  window.removeEventListener('resize', resizeZqlChart)
+  zqlTodayInstance?.dispose()
+  window.removeEventListener('resize', resizeZqlTodayChart)
+  materialInstance?.dispose()
+  window.removeEventListener('resize', resizeMaterialChart)
 })
 </script>
 

src/views/pms/stat/rykb.vue

@@ -219,7 +219,7 @@ const queryParams = reactive({
 })
 const backendData = ref([])
 const statusChartRef = ref() // 设备数量统计的图表
-const materialChartRef = ref() // 设备数量统计的图表
+// const materialChartRef = ref() // 设备数量统计的图表
 const drillingWorkloadChartRef = ref()
 const repairWorkloadChartRef = ref()
 // 基础统计数据
@@ -341,10 +341,10 @@ const getStats =  () => {
   IotStatApi.getSafeCount().then((res) => {
     safe.value = res
   })
-  IotStatApi.getMaterial().then((res) => {
-    materialData.value = res
-    initMaterials()
-  })
+  // IotStatApi.getMaterial().then((res) => {
+  //   materialData.value = res
+  //   initMaterials()
+  // })
 
   IotStatApi.getOrderSeven('ry').then((res) => {
     orderSevenData.value = res
@@ -445,48 +445,48 @@ const initRepairWorkloadChart = () => {
   chart.setOption(option)
 }
 
-const initMaterials = () => {
-
-  echarts.init(materialChartRef.value).setOption({
-    tooltip: {
-      trigger: 'item'
-    },
-    legend: {
-      // top: '5%',
-      // right: '10%',
-      // align: 'left',
-      // orient: 'vertical',
-      // icon: 'circle'
-      orient: 'horizontal',  // 水平排列图例项
-      bottom: '0%',         // 放置在底部
-      icon: 'circle'
-    },
-    series: [
-      {
-        name: '',
-        type: 'pie',
-        radius: ['50%', '80%'],
-        avoidLabelOverlap: false,
-        center: ['50%', '44%'],
-        label: {
-          show: false,
-          position: 'outside'
-        },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: 15,
-            fontWeight: 'bold'
-          }
-        },
-        labelLine: {
-          show: false
-        },
-        data: materialData.value
-      }
-    ]
-  })
-}
+// const initMaterials = () => {
+//
+//   echarts.init(materialChartRef.value).setOption({
+//     tooltip: {
+//       trigger: 'item'
+//     },
+//     legend: {
+//       // top: '5%',
+//       // right: '10%',
+//       // align: 'left',
+//       // orient: 'vertical',
+//       // icon: 'circle'
+//       orient: 'horizontal',  // 水平排列图例项
+//       bottom: '0%',         // 放置在底部
+//       icon: 'circle'
+//     },
+//     series: [
+//       {
+//         name: '',
+//         type: 'pie',
+//         radius: ['50%', '80%'],
+//         avoidLabelOverlap: false,
+//         center: ['50%', '44%'],
+//         label: {
+//           show: false,
+//           position: 'outside'
+//         },
+//         emphasis: {
+//           label: {
+//             show: true,
+//             fontSize: 15,
+//             fontWeight: 'bold'
+//           }
+//         },
+//         labelLine: {
+//           show: false
+//         },
+//         data: materialData.value
+//       }
+//     ]
+//   })
+// }
 
 /** 初始化图表 */
 const initDeviceStatusCharts = () => {