✨ feat(瑞恒日报): 新增月看板并完善日月统计切换

src/api/pms/iotrhdailyreport/index.ts

@@ -69,6 +69,10 @@ export const IotRhDailyReportApi = {
     return await request.get({ url: `/pms/iot-rh-daily-report/polylineStatistics`, params })
   },
 
+  getIotRhDailyReportSummaryMonthPolyline: async (params: any) => {
+    return await request.get({ url: `/pms/iot-rh-daily-report/monthPolylineStatistics`, params })
+  },
+
   nptStatistics: async (params: any) => {
     return await request.get({ url: `/pms/iot-rh-daily-report/nptStatistics`, params })
   },

src/views/pms/iotrhdailyreport/components/DailyStatistics.vue

@@ -261,21 +261,28 @@ const getList = useDebounceFn(async () => {
   }
 }, 500)
 
-const tab = ref<'表格' | '看板'>('表格')
+type ViewTab = '表格' | '日看板' | '月看板'
+type ChartTab = Exclude<ViewTab, '表格'>
 
-const currentTab = ref<'表格' | '看板'>('表格')
+const tab = ref<ViewTab>('表格')
+
+const currentTab = ref<ViewTab>('表格')
 
 const direction = ref<'left' | 'right'>('right')
 
-const handleSelectTab = (val: '表格' | '看板') => {
+const isChartTab = (val: ViewTab): val is ChartTab => val !== '表格'
+
+const handleSelectTab = (val: ViewTab) => {
   if (tab.value === val && currentTab.value === val) return
 
   tab.value = val
-  direction.value = val === '看板' ? 'right' : 'left'
+  direction.value = val === '表格' ? 'left' : 'right'
   nextTick(() => {
     currentTab.value = val
-    setTimeout(() => {
-      if (val === '看板') scheduleChartRender()
+    if (!isChartTab(val)) return
+
+    getChart(val).then(() => {
+      scheduleChartRender()
     })
   })
 }
@@ -283,7 +290,7 @@ const handleSelectTab = (val: '表格' | '看板') => {
 watch(
   () => props.defaultView,
   (val) => {
-    handleSelectTab(val || '表格')
+    handleSelectTab(val === '看板' ? '日看板' : '表格')
   },
   { immediate: true }
 )
@@ -333,13 +340,21 @@ const chartData = ref<Record<ChartKey, number[]>>({
   utilizationRate: []
 })
 
-let chartLoading = ref(false)
+const chartLoading = ref(false)
+let chartRequestId = 0
 
-const getChart = useDebounceFn(async () => {
+const getChart = useDebounceFn(async (chartTab: ChartTab = '日看板') => {
+  const requestId = ++chartRequestId
   chartLoading.value = true
 
   try {
-    const res = await IotRhDailyReportApi.getIotRhDailyReportSummaryPolyline(props.query)
+    const getPolyline =
+      chartTab === '月看板'
+        ? IotRhDailyReportApi.getIotRhDailyReportSummaryMonthPolyline
+        : IotRhDailyReportApi.getIotRhDailyReportSummaryPolyline
+    const res = await getPolyline(props.query)
+
+    if (requestId !== chartRequestId) return
 
     chartData.value = {
       cumulativeFuelConsumption: res.map((item) => item.cumulativeFuelConsumption || 0),
@@ -356,7 +371,9 @@ const getChart = useDebounceFn(async () => {
     xAxisData.value = res.map((item) => item.reportDate || '')
     resetVisibleZoomRange()
   } finally {
-    chartLoading.value = false
+    if (requestId === chartRequestId) {
+      chartLoading.value = false
+    }
   }
 }, 500)
 
@@ -643,7 +660,7 @@ const scheduleChartRender = (attempt = 0) => {
   chartRenderRaf = requestAnimationFrame(() => {
     chartRenderRaf = 0
 
-    if (currentTab.value !== '看板') return
+    if (!isChartTab(currentTab.value)) return
 
     const chartEl = chartRef.value
 
@@ -668,8 +685,10 @@ onUnmounted(() => {
 })
 
 const handleQuery = () => {
-  getChart().then(() => {
-    if (currentTab.value === '看板') {
+  const chartTab = currentTab.value === '月看板' ? '月看板' : '日看板'
+
+  getChart(chartTab).then(() => {
+    if (isChartTab(currentTab.value)) {
       scheduleChartRender()
     }
   })
@@ -719,7 +738,7 @@ const exportChart = () => {
     let event = new MouseEvent('click')
 
     a.href = dataURL
-    a.download = `瑞恒日报统计数据.png`
+    a.download = `瑞恒${currentTab.value}统计数据.png`
     a.dispatchEvent(event)
   }
 }
@@ -731,7 +750,7 @@ const exportData = async () => {
 }
 
 const exportAll = async () => {
-  if (tab.value === '看板') exportChart()
+  if (isChartTab(tab.value)) exportChart()
   else exportData()
 }
 
@@ -821,9 +840,15 @@ const { ZmTable, ZmTableColumn } = useTableComponents()
           </el-button>
           <el-button
             size="default"
-            :type="tab === '看板' ? 'primary' : 'default'"
-            @click="handleSelectTab('看板')"
-            >看板
+            :type="tab === '日看板' ? 'primary' : 'default'"
+            @click="handleSelectTab('日看板')"
+            >日看板
+          </el-button>
+          <el-button
+            size="default"
+            :type="tab === '月看板' ? 'primary' : 'default'"
+            @click="handleSelectTab('月看板')"
+            >月看板
           </el-button>
         </el-button-group>
         <h3 class="text-xl font-medium">{{ `${props.deptName}-${tab}` }}</h3>