meilan-web/src/views/blockingData/blockingDataScreen/index.vue

<template>
  <div class="blocking-data-screen">
    <div class="screen-header">
      <div class="header-title">盛世鹰眸质控系统【查堵】（安检站）</div>
    </div>

    <div class="filter-section">
      <div class="filter-row">
        <div class="filter-item">
          <span class="filter-label">日期：</span>
          <el-date-picker v-model="filterParams.dateRange" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime"
            style="width: 280px" />
        </div>

        <div class="filter-item">
          <span class="filter-label">分管主管：</span>
          <el-select v-model="filterParams.supervisor" placeholder="请选择主管" filterable clearable style="width: 200px">
            <el-option v-for="item in supervisorOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>

        <div class="filter-item">
          <span class="filter-label">分管班组长：</span>
          <el-select v-model="filterParams.teamLeader" placeholder="请选择班组长" filterable clearable style="width: 200px">
            <el-option v-for="item in teamLeaderOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="filter-item">
          <span class="filter-label">区域：</span>
          <el-select v-model="filterParams.area" placeholder="请选择区域" clearable style="width: 200px">
            <el-option label="整体" value="整体" />
            <el-option label="T1" value="T1" />
            <el-option label="T2" value="T2" />
          </el-select>
        </div>

        <div class="filter-item">
          <span class="filter-label">漏检物品：</span>
          <el-select v-model="filterParams.missedItem" placeholder="请选择漏检物品" clearable style="width: 200px">
            <el-option v-for="item in missedItemOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="filter-item">
          <span class="filter-label">分大队：</span>
          <el-select v-model="filterParams.brigade" placeholder="请选择大队" clearable style="width: 200px">
            <el-option label="全站" value="全站" />
            <el-option label="安检一大队" value="安检一大队" />
            <el-option label="安检二大队" value="安检二大队" />
            <el-option label="安检三大队" value="安检三大队" />
          </el-select>
        </div>
        <div class="filter-actions">
          <el-button type="primary" @click="handleFilter">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </div>
      </div>


    </div>

    <div class="screen-content">
      <div class="grid-layout">
        <div class="grid-item">
          <module-one />
        </div>
        <div class="grid-item">
          <module-two />
        </div>
        <div class="grid-item">
          <module-three />
        </div>
        <div class="grid-item">
          <module-four />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { listDept } from '@/api/system/dept'
import ModuleOne from './components/ModuleOne.vue'
import ModuleTwo from './components/ModuleTwo.vue'
import ModuleThree from './components/ModuleThree.vue'
import ModuleFour from './components/ModuleFour.vue'

// 默认时间设置
const defaultTime = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 1, 1, 23, 59, 59)
]

// 筛选参数
const filterParams = reactive({
  dateRange: [],
  supervisor: '',
  teamLeader: '',
  area: '',
  missedItem: '',
  brigade: ''
})

// 选项数据
const supervisorOptions = ref([])
const teamLeaderOptions = ref([])
const missedItemOptions = ref([
  { label: '物品A', value: '1' },
  { label: '物品B', value: '2' },
  { label: '物品C', value: '3' }
])

// 获取所有用户数据并筛选主管和班组长
const fetchUserData = async () => {
  try {
    listDept({}).then(response => {
      const deptList = response.data || []
     
      teamLeaderOptions.value = deptList.filter(item => item.deptType === 'TEAMS').map(item => ({
        value: item.deptId,
        label: item.deptName
      }))
      supervisorOptions.value = deptList.filter(item => item.deptType === 'MANAGER').map(item => ({
        value: item.deptId,
        label: item.deptName
      }))
    })
  } catch (error) {
    console.error('获取用户数据失败:', error)
  }
}

// 设置默认日期范围（从年初1月1日到现在）
const setDefaultDateRange = () => {
  const now = new Date()
  const startOfYear = new Date(now.getFullYear(), 0, 1, 0, 0, 0)
  const endOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59)

  filterParams.dateRange = [startOfYear, endOfToday]
}

// 处理筛选
const handleFilter = () => {
  console.log('筛选参数:', filterParams)
  // 这里可以调用API或更新图表数据
}

// 重置筛选
const resetFilter = () => {
  Object.assign(filterParams, {
    dateRange: [],
    supervisor: '',
    teamLeader: '',
    area: '',
    missedItem: '',
    brigade: ''
  })
  setDefaultDateRange()
}

// 组件挂载时设置默认日期和获取用户数据
onMounted(() => {
  setDefaultDateRange()
  fetchUserData()
})
</script>

<style lang="less" scoped>
.blocking-data-screen {
  width: 100%;
  height: 100vh;

  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.screen-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;

  // border-bottom: 2px solid rgba(112, 207, 231, 0.5);
}

.header-title {
  font-size: 24px;
  font-weight: bold;
  color: black;
  // text-shadow: 0 0 10px rgba(112, 207, 231, 0.5);
}

.filter-section {
  // background: #f8f9fa;
  padding: 20px 30px;
  border-bottom: 1px solid #e8e8e8;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;

  &:last-child {
    margin-bottom: 0;
  }
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
  white-space: nowrap;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.screen-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.grid-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  height: 100%;
}

.grid-item {
  width: 100%;
}
</style>