chongqing-web/src/views/portraitManagement/teamProfile/component/runData.vue

<template>
  <div class="operation-data">
    <div class="row">
      <ChannelCheckChart :chartsData="channelCheckData" />
    </div>
    <div class="row">
      <div class="col">
        <SeizedInfo :chartsData="countSeizureInfoItemData" />
      </div>
      <div class="col">
        <SeizedItems :chartsData="countSeizeSubjectCategoryQuantityData" />
      </div>
    </div>
    <div class="row">
      <div class="col">
        <SeizedNumAll :chartsData="countSeizureTotalQuantityData" />
      </div>
      <div class="col">
        <SeizedNum :chartsData="countSeizureSingleQuantityData" />
      </div>
    </div>
    <div class="row">
      <SeizedWorkArea :chartsData="countSeizeAreaQuantityData" />
    </div>
    <div class="row">
      <div class="col">
        <EventItems :chartsData="countSeizureStatsItemData" />
      </div>
      <div class="col">
        <EventType :chartsData="countSeizureStatsTypeData" />
      </div>
      <div class="col">
        <EventWorkArea :chartsData="countSeizureStatsPostData" />
      </div>
    </div>
    <div class="row">
      <div class="col">
        <TestItems :chartsData="securityTestItemClassificationData" />
      </div>
      <div class="col">
        <TestResult :chartsData="securityTestPassingStatusData" />
      </div>
      <div class="col">
        <TestArea :chartsData="securityTestRegionData" />
      </div>
    </div>
    <div class="row">
      <div class="col">
        <SupervisionDistribution :chartsData="supervisionData" />
      </div>
      <div class="col">
        <InterceptionDistribution :chartsData="interceptionData" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { watch } from 'vue'
import ChannelCheckChart from '../../components/ChannelCheckChart.vue';
import SeizedInfo from '../../components/SeizedInfo.vue';
import SeizedItems from '../../components/SeizedItems.vue';
import SeizedNumAll from '../../components/SeizedNumAll.vue';
import SeizedNum from '../../components/SeizedNum.vue';
import SeizedWorkArea from '../../components/SeizedWorkArea.vue';
import EventItems from '../../components/EventItems.vue';
import EventType from '../../components/EventType.vue';
import EventWorkArea from '../../components/EventWorkArea.vue';
import TestItems from '../../components/TestItems.vue';
import TestResult from '../../components/TestResult.vue';
import TestArea from '../../components/TestArea.vue';
import SupervisionDistribution from '../../components/SupervisionDistribution.vue';
import InterceptionDistribution from '../../components/InterceptionDistribution.vue';
import {
  countLanePeakThroughput,
  countStationHourlyThroughput,
  countSeizureInfoItem,
  countSeizeSubjectCategoryQuantity,
  countSeizureTotalQuantity,
  countSeizureSingleQuantity,
  countSeizeAreaQuantity,
  countSeizureStatsItem,
  countSeizureStatsType,
  countSeizureStatsPost,
  securityTestItemClassification,
  securityTestPassingStatus,
  securityTestRegion,
  realtimeInterceptionItem,
  supervisionProblemPosition,
} from '@/api/portraitManagement/portraitManagement';

const props = defineProps({
  queryParams: {
    type: Object,
    default: () => ({})
  }
})


const channelCheckData = ref([])
const invokerCountLanePeakThroughput = () => {
  countLanePeakThroughput(props.queryParams).then(res => {
    if (res.code === 200 && res.data) {
      channelCheckData.value = res.data || []
    }
    
  })
}

const countSeizureInfoItemData = ref({ totalSeizeNum: 0, itemList: [] })
const invokerCountSeizureInfoItem = () => {
  countSeizureInfoItem(props.queryParams).then(res => {
    if (res.code === 200 && res.data) {
      countSeizureInfoItemData.value = res.data || { totalSeizeNum: 0, itemList: [] }
    }
  })
}

const countSeizeSubjectCategoryQuantityData = ref([])
const invokerCountSeizeSubjectCategoryQuantity = () => {
  countSeizeSubjectCategoryQuantity(props.queryParams).then(res => {
    if (res.code === 200 && res.data) {
      countSeizeSubjectCategoryQuantityData.value = res.data || []
    }
  })
}

const countSeizureTotalQuantityData = ref([])
const invokerCountSeizureTotalQuantity = () => {
  countSeizureTotalQuantity(props.queryParams).then(res => {
    if (res.code === 200 && res.data) {
      countSeizureTotalQuantityData.value = res.data || []
    }
  })
}

const countSeizureSingleQuantityData = ref([])
const invokerCountSeizureSingleQuantity = () => {
  countSeizureSingleQuantity(props.queryParams).then(res => {
    if (res.code === 200 && res.data) {
      countSeizureSingleQuantityData.value = res.data || []
    }
  })
}

const countSeizeAreaQuantityData = ref([])
const invokerCountSeizeAreaQuantity = () => {
  countSeizeAreaQuantity(props.queryParams).then(res => {
    if (res.code === 200 && res.data) {
      countSeizeAreaQuantityData.value = res.data || []
    }
  })
}

const countSeizureStatsItemData = ref([])
const invokerCountSeizureStatsItem = () => {
  countSeizureStatsItem(props.queryParams).then(res => {
    if (res.code === 200 && res.data) {
      countSeizureStatsItemData.value = res.data || []
    }
  })
}
const countSeizureStatsTypeData = ref([])
const invokerCountSeizureStatsType = () => {
  countSeizureStatsType(props.queryParams).then(res => {
    if (res.code === 200 && res.data) {
      countSeizureStatsTypeData.value = res.data || []
    }
  })
}
const countSeizureStatsPostData = ref([])
const invokerCountSeizureStatsPost = () => {
  countSeizureStatsPost(props.queryParams).then(res => {
    if (res.code === 200 && res.data) {
      countSeizureStatsPostData.value = res.data || []
    }
  })
}

const securityTestItemClassificationData = ref([])
const invokerSecurityTestItemClassification = () => {
  securityTestItemClassification(props.queryParams).then(res => {
    if (res.code === 200 && res.data) {
      securityTestItemClassificationData.value = res.data || []
    }
  })
}

const securityTestPassingStatusData = ref([])
const invokerSecurityTestPassingStatus = () => {
  securityTestPassingStatus(props.queryParams).then(res => {
    if (res.code === 200 && res.data) {
      securityTestPassingStatusData.value = res.data || []
    }
  })
}
const securityTestRegionData = ref([])
const invokerSecurityTestRegion = () => {
  securityTestRegion(props.queryParams).then(res => {
    if (res.code === 200 && res.data) {
      securityTestRegionData.value = res.data || []
    }
  })
}



const supervisionData = ref([])
const fetchSupervisionData = async () => {
  try {
    const res = await supervisionProblemPosition(props.queryParams)
    if (res.code === 200 && res.data) {
      supervisionData.value = res.data.map(item => ({
        num: item.total,
        name: item.name
      }))
    }
  } catch (error) {
    console.error('获取各岗位监察问题分布数据失败', error)
  }
}

const interceptionData = ref([])
const fetchInterceptionData = async () => {
  try {
    const res = await realtimeInterceptionItem(props.queryParams)
    if (res.code === 200 && res.data) {
      interceptionData.value = res.data.map(item => ({
        num: item.total,
        name: item.name
      }))
    }
  } catch (error) {
    console.error('获取实时质控拦截物品分布数据失败', error)
  }
}

const fetchData = () => {

  invokerCountLanePeakThroughput()
  invokerCountSeizureInfoItem()
  invokerCountSeizeSubjectCategoryQuantity()
  invokerCountSeizureTotalQuantity()
  invokerCountSeizureSingleQuantity()
  invokerCountSeizeAreaQuantity()
  invokerCountSeizureStatsItem()
  invokerCountSeizureStatsType()
  invokerCountSeizureStatsPost()
  invokerSecurityTestItemClassification()
  invokerSecurityTestPassingStatus()
  invokerSecurityTestRegion()
  fetchSupervisionData()
  fetchInterceptionData()
}
watch(() => props.queryParams, () => {
  fetchData()
}, { deep: true, immediate: true })


</script>

<style lang="scss" scoped>
.operation-data {
  padding: 20px;

  .row {
    display: flex;
    column-gap: 15px;
    height: 360px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 15px;

    .col {
      flex: 1;
      height: 100%;
      min-width: 0px;

      :deep(.info-card) {
        height: 100%;
      }
    }
  }
}
</style>