meilan-web/src/views/dataBigScreen/dashboard/components/pageItems/WorkOutput.vue

<template>
  <ChartsContainer title="工作产出">
    <div class="content-row" v-if=" type ">
      <div class="content-row-list">
        <div class="content-row-item">
          <div>查获排名</div>
          <div>{{ rank.rank || 0 }} / {{ rank.rankCount || 0 }}</div>
        </div>
        <div class="content-row-item">
          <div>有效查获总数</div>
          <div>{{ rowTableItem.effectiveSeizureCount.totalCount }}</div>
        </div>
        <div class="content-row-item">
          <div>移交公安总数</div>
          <div>{{ rowTableItem.referToPoliceCount.count }}</div>
        </div>
        <div class="content-row-item">
          <div>故意隐匿总数</div>
          <div>{{ rowTableItem.willfulConcealmentCount.count }}</div>
        </div>
      </div>
    </div>
    <div v-else ref="content" style="height: 100%;">
      <el-table v-auto-scroll :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="deptName" label="统计维度" min-width="100" />
        <el-table-column prop="effectiveSeizureCount" label="有效查获总数" />
        <el-table-column prop="policeTotal" label="移交公安总数" min-width="100" />
        <el-table-column prop="concealTotal" label="故意隐匿总数" min-width="100" />
      </el-table>
    </div>
  </ChartsContainer>
</template>

<script setup>
import ChartsContainer from '../ChartsContainer.vue';
import { ref, watch } from 'vue';
import { getSiteStatistics, getModuleMetrics, getRankInfo } from '@/api/item/items'
import { useTimeOut } from '../pageItems/useTimeOut'
const props = defineProps({
  type: {
    type: String,
    default: '', // department | team
  },
})
const tableData = ref([])
const rowTableItem = ref({
  effectiveSeizureCount: {},
  referToPoliceCount: {},
  willfulConcealmentCount: {},
})
const rank = ref({})
const params = inject('provideParams')

// 封装API请求函数
const fetchData = () => {
  // 站点统计请求（当没有type时）
  if (!props.type && params.value.deptId) {
    getSiteStatistics({ deptId: params.value.deptId }).then(res => {
      tableData.value = res.data
    })
  }
  
  // 构建API参数
  let apiParams = {}
  if (props.type === 'personal') {
    apiParams = { userId: params.value.deptId }
  } else {
    apiParams = { deptId: params.value.deptId }
  }
  
  // 模块指标请求（当有type时）
  if (props.type && params.value.deptId) {
    getModuleMetrics({ ...apiParams, userTypeStr: props.type }).then(res => {
      let { moduleResults } = res.data
      if (!moduleResults || Object.keys(moduleResults).length === 0) {
        moduleResults = {
          item: {
            effectiveSeizureCount: {},
            referToPoliceCount: {},
            willfulConcealmentCount: {},
          }
        }
      }

      if (props.type === 'personal') {
        rowTableItem.value = {
          effectiveSeizureCount: {
            totalCount: moduleResults.item.effectiveSeizureCount
          },
          referToPoliceCount: {
            count: moduleResults.item.referToPoliceCount
          },
          willfulConcealmentCount: {
            count: moduleResults.item.willfulConcealmentCount
          },
        }
      } else {
        rowTableItem.value = moduleResults.item
      }
    })
    
    // 排名信息请求
    getRankInfo({ ...apiParams, level: 'station' }).then(res => {
      rank.value = res.data || {};
    })
  }
}

// 监听props.type变化
watch(() => props.type, () => {
  fetchData()
})

// 使用定时器调用fetchData
useTimeOut(() => {
  fetchData()
}, [ params ])


</script>

<style lang="scss" scoped>
.content-row {
  display: flex;
  flex-direction: column;
  height: 100%;

  .content-row-title {
    font-size: 14px;
    color: #77DBF4;
    height: 30px;
  }

  .content-row-list {
    display: flex;
    flex: 1;
    row-gap: 30px;
    column-gap: 30px;
    flex-wrap: wrap;
  }

  .content-row-item {
    width: calc(50% - 15px);
    height: calc(50% - 15px);
    background: url('../../../../../assets/images/cardBg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    color: #fff;
    font-size: 16px;
    border-radius: 5px;
    padding: 0 15px;
    font-weight: bold;

    &>div:nth-child(2) {
      font-size: 24px;
    }
  }
}
</style>