pms-iot-vue/src/views/pms/iotrhdailyreport/summary.vue

<script setup lang="ts">
import dayjs from 'dayjs'
import { rangeShortcuts } from '@/utils/formatTime'
import { useUserStore } from '@/store/modules/user'
import DailyStatistics from './components/DailyStatistics.vue'
import NonProductionEfficiency from './components/NonProductionEfficiency.vue'

defineOptions({
  name: 'IotRhDailyReportSummary'
})

const deptId = useUserStore().getUser.deptId

interface Query {
  pageNo: number
  pageSize: number
  deptId: number
  contractName?: string
  taskName?: string
  createTime: string[]
}

const id = deptId

const createDefaultQuery = (): Query => ({
  pageNo: 1,
  pageSize: 10,
  deptId: deptId,
  contractName: '',
  taskName: '',
  createTime: [
    ...rangeShortcuts[1].value().map((item) => dayjs(item).format('YYYY-MM-DD HH:mm:ss'))
  ]
})

const query = ref<Query>(createDefaultQuery())
const activeTab = ref<'日报统计' | '非生产时效'>('日报统计')
const deptName = ref('瑞恒兴域')
const refreshKey = ref(0)

const handleDeptNodeClick = (node: any) => {
  deptName.value = node.name
  handleQuery()
}

const handleQuery = () => {
  query.value.pageNo = 1
  refreshKey.value += 1
}

const resetQuery = () => {
  query.value = createDefaultQuery()
  deptName.value = '瑞恒兴域'
  handleQuery()
}
</script>

<template>
  <div
    class="grid grid-cols-[auto_1fr] grid-rows-[62px_48px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
    <DeptTreeSelect
      :deptId="id"
      :top-id="157"
      v-model="query.deptId"
      @node-click="handleDeptNodeClick"
      class="row-span-3" />
    <el-form
      size="default"
      class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between">
      <div class="flex items-center gap-8">
        <el-form-item label="项目">
          <el-input
            v-model="query.contractName"
            placeholder="请输入项目"
            clearable
            @keyup.enter="handleQuery()"
            class="!w-240px" />
        </el-form-item>
        <el-form-item label="任务">
          <el-input
            v-model="query.taskName"
            placeholder="请输入任务"
            clearable
            @keyup.enter="handleQuery()"
            class="!w-240px" />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="query.createTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="rangeShortcuts"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-220px" />
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" @click="handleQuery()">
          <Icon icon="ep:search" class="mr-5px" /> 搜索
        </el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
      </el-form-item>
    </el-form>

    <el-button-group class="justify-self-start self-center">
      <el-button
        size="default"
        :type="activeTab === '日报统计' ? 'primary' : 'default'"
        @click="activeTab = '日报统计'">
        日报统计
      </el-button>
      <el-button
        size="default"
        :type="activeTab === '非生产时效' ? 'primary' : 'default'"
        @click="activeTab = '非生产时效'">
        非生产时效
      </el-button>
    </el-button-group>

    <DailyStatistics
      v-if="activeTab === '日报统计'"
      :query="query"
      :dept-name="deptName"
      :refresh-key="refreshKey" />
    <NonProductionEfficiency
      v-else
      :query="query"
      :dept-name="deptName"
      :refresh-key="refreshKey" />
  </div>
</template>

<style scoped>
:deep(.el-form-item) {
  margin-bottom: 0;
}
</style>