5#国日报汇总

src/api/pms/fiveconstructiondailyreport/index.ts

@@ -14,7 +14,7 @@ export const FiveIotProjectDailyReportApi = {
     return await request.put({ url: '/pms/iot-five-daily-report/update', data })
   },
 
-  // 日报汇总列表
+  // 日报汇总统计卡片
   getIotProjectDailyReportSummary: async (params) => {
     return await request.get({ url: 'pms/iot-five-daily-report/totalWorkload', params })
   }

src/views/pms/fiveDailyReportSummary/index.vue

@@ -1,57 +1,41 @@
-<script setup lang="ts">
+<script setup>
 import dayjs from 'dayjs'
 import CountTo from '@/components/count-to1.vue'
 import { FiveIotProjectDailyReportApi } from '@/api/pms/fiveconstructiondailyreport'
-import { useUserStore } from '@/store/modules/user'
 import { rangeShortcuts } from '@/utils/formatTime'
 import { useDebounceFn } from '@vueuse/core'
 import ConstructionDailyReportTable from '../constructionDailyReport/components/ConstructionDailyReportTable.vue'
-import type {
-  ConstructionDailyReportQuery,
-  ConstructionDailyReportRow
-} from '../constructionDailyReport/components/report-config'
 
 defineOptions({ name: 'FiveDailyReportSummary' })
 
-type SummaryCardKey = 'dailyWorkingLayers' | 'dailyFuel' | 'dailySandVolume' | 'dailyLiquidVolume' | 'utilizationRate'
-
-interface SummaryCard {
-  key: SummaryCardKey
-  label: string
-  unit: string
-  icon: string
-  decimals?: number
-}
-
 const router = useRouter()
 const route = useRoute()
-const userStore = useUserStore()
-const deptId = userStore.getUser.deptId
+const defaultDeptId = 388
 
-const summaryCards: SummaryCard[] = [
+const summaryCards = [
   {
-    key: 'dailyWorkingLayers',
+    key: 'cumulativeWorkingLayers',
     label: '压裂',
     unit: '层',
     icon: 'i-material-symbols-layers-outline-rounded',
     decimals: 0
   },
   {
-    key: 'dailyFuel',
+    key: 'totalDailyFuel',
     label: '油耗',
     unit: 'L',
     icon: 'i-material-symbols-local-gas-station-outline-rounded',
     decimals: 0
   },
   {
-    key: 'dailySandVolume',
+    key: 'cumulativeMixSand',
     label: '加砂',
     unit: '方',
     icon: 'i-material-symbols-grain-outline-rounded',
     decimals: 0
   },
   {
-    key: 'dailyLiquidVolume',
+    key: 'cumulativeLiquidVolume',
     label: '注液',
     unit: '方',
     icon: 'i-material-symbols-water-drop-outline-rounded',
@@ -66,18 +50,10 @@ const summaryCards: SummaryCard[] = [
   }
 ]
 
-const cardMockData = ref<Record<SummaryCardKey, number>>({
-  dailyWorkingLayers: 128,
-  dailyFuel: 18650,
-  dailySandVolume: 920,
-  dailyLiquidVolume: 4830,
-  utilizationRate: 87.36
-})
-
-const initQuery = (): ConstructionDailyReportQuery => ({
+const createDefaultQuery = () => ({
   pageNo: 1,
   pageSize: 10,
-  deptId,
+  deptId: defaultDeptId,
   projectName: '',
   wellName: '',
   createTime: [
@@ -85,16 +61,24 @@ const initQuery = (): ConstructionDailyReportQuery => ({
   ]
 })
 
-const query = ref<ConstructionDailyReportQuery>(initQuery())
-const list = ref<ConstructionDailyReportRow[]>([])
+const query = ref(createDefaultQuery())
+const list = ref([])
 const total = ref(0)
 const loading = ref(false)
+const summaryLoading = ref(false)
 const currentDeptName = ref('5号国')
+const cardStatistics = ref({
+  cumulativeWorkingLayers: 0,
+  totalDailyFuel: 0,
+  cumulativeMixSand: 0,
+  cumulativeLiquidVolume: 0,
+  utilizationRate: 0
+})
 
 const loadList = useDebounceFn(async () => {
   loading.value = true
   try {
-    const data = await FiveIotProjectDailyReportApi.getIotProjectDailyReportPage(query.value as any)
+    const data = await FiveIotProjectDailyReportApi.getIotProjectDailyReportPage(query.value)
     list.value = data?.list ?? []
     total.value = data?.total ?? 0
   } finally {
@@ -102,6 +86,25 @@ const loadList = useDebounceFn(async () => {
   }
 }, 200)
 
+const loadSummary = useDebounceFn(async () => {
+  summaryLoading.value = true
+  try {
+    const data = await FiveIotProjectDailyReportApi.getIotProjectDailyReportSummary({
+      deptId: query.value.deptId
+    })
+
+    cardStatistics.value = {
+      cumulativeWorkingLayers: data?.cumulativeWorkingLayers || 0,
+      totalDailyFuel: data?.totalDailyFuel || 0,
+      cumulativeMixSand: data?.cumulativeMixSand || 0,
+      cumulativeLiquidVolume: data?.cumulativeLiquidVolume || 0,
+      utilizationRate: Number(data?.utilizationRate || 0)
+    }
+  } finally {
+    summaryLoading.value = false
+  }
+}, 200)
+
 function handleQuery(resetPage = true) {
   if (resetPage) {
     query.value.pageNo = 1
@@ -110,27 +113,29 @@ function handleQuery(resetPage = true) {
 }
 
 function resetQuery() {
-  query.value = initQuery()
+  query.value = createDefaultQuery()
   currentDeptName.value = '5号国'
+  loadSummary()
   handleQuery()
 }
 
-function handleDeptNodeClick(node: { name?: string }) {
+function handleDeptNodeClick(node) {
   currentDeptName.value = node?.name || '5号国'
+  loadSummary()
   handleQuery()
 }
 
-function handleSizeChange(value: number) {
+function handleSizeChange(value) {
   query.value.pageSize = value
-  handleQuery()
+  handleQuery(false)
 }
 
-function handleCurrentChange(value: number) {
+function handleCurrentChange(value) {
   query.value.pageNo = value
   loadList()
 }
 
-function openReport(row: ConstructionDailyReportRow) {
+function openReport(row) {
   if (!row.id) return
 
   router.push({
@@ -145,7 +150,7 @@ function syncQueryFromRoute() {
   const createTime = route.query.createTime
 
   if (Array.isArray(createTime)) {
-    const values = createTime.filter((item): item is string => typeof item === 'string')
+    const values = createTime.filter((item) => typeof item === 'string')
     if (values.length === 2) {
       query.value.createTime = values
     }
@@ -161,7 +166,6 @@ syncQueryFromRoute()
 
 watch(
   [
-    () => query.value.deptId,
     () => query.value.projectName,
     () => query.value.wellName,
     () => query.value.createTime?.[0],
@@ -171,6 +175,15 @@ watch(
   { immediate: true }
 )
 
+watch(
+  () => query.value.deptId,
+  () => {
+    loadSummary()
+    handleQuery()
+  },
+  { immediate: true }
+)
+
 watch(
   () => route.query.createTime,
   () => {
@@ -185,12 +198,12 @@ watch(
     <DeptTreeSelect
       v-model="query.deptId"
       :top-id="388"
-      :deptId="deptId"
+      :deptId="defaultDeptId"
       :show-title="false"
       class="row-span-3"
       @node-click="handleDeptNodeClick" />
 
-    <div class="grid grid-cols-5 gap-4">
+    <div class="grid grid-cols-5 gap-4" v-loading="summaryLoading">
       <article
         v-for="card in summaryCards"
         :key="card.key"
@@ -201,7 +214,7 @@ watch(
           <count-to
             class="summary-card__value"
             :start-val="0"
-            :end-val="cardMockData[card.key]"
+            :end-val="cardStatistics[card.key]"
             :decimals="card.decimals || 0">
             <span class="summary-card__placeholder">--</span>
           </count-to>
@@ -254,7 +267,6 @@ watch(
     <div class="summary-content min-h-0">
       <div class="summary-content__header">
         <h3 class="summary-content__title">{{ currentDeptName }}日报汇总</h3>
-        <span class="summary-content__tip">统计卡片当前为模拟数据，表格为实际日报数据</span>
       </div>
 
       <ConstructionDailyReportTable
@@ -371,12 +383,6 @@ watch(
   color: var(--el-text-color-primary);
 }
 
-.summary-content__tip {
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--el-text-color-regular);
-}
-
 @media (max-width: 1600px) {
   .summary-card__value {
     font-size: 24px;