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

<template>
  <div class="operation-data">
    <div class="row">
      <ChannelCheckChart :chartsData="chartsData" />
    </div>
    <div class="row">
      <div class="col">
        <SeizedInfo :chartsData="chartsData"/>
      </div>
      <div class="col">
        <SeizedItems :chartsData="chartsData" />
      </div>
    </div>
    <div class="row">
      <div class="col">
        <SeizedNumAll :chartsData="chartsData"/>
      </div>
      <div class="col">
        <SeizedNum :chartsData="chartsData" />
      </div>
    </div>
    <div class="row">
      <SeizedWorkArea :chartsData="chartsData" />
    </div>
    <div class="row">
      <div class="col">
        <EventItems :chartsData="chartsData"  />
      </div>
      <div class="col">
        <EventType :chartsData="chartsData"  />
      </div>
      <div class="col">
        <EventWorkArea :chartsData="chartsData"  />
      </div>
    </div>
    <div class="row">
      <div class="col">
        <TestItems :chartsData="chartsData"  />
      </div>
      <div class="col">
        <TestResult :chartsData="chartsData"  />
      </div>
      <div class="col">
        <TestArea :chartsData="chartsData"  />
      </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 { realtimeInterceptionItem, supervisionProblemPosition } from '@/api/portraitManagement/portraitManagement';

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

const chartsData = ref([
  {
    num: 370,
    num1: 330,
    num2: 120,
    num3: 470,
    num4: 570,
    rate: 30,
    name: '打火机'
  },
  {
    num: 330,
    num1: 430,
    num2: 420,
    num3: 430,
    num4: 150,
    rate: 60,
    name: '火柴'
  },
  {
    num: 410,
    num1: 310,
    num2: 220,
    num3: 370,
    num4: 510,
    rate: 35,
    name: '刀具'
  },
  {
    num: 570,
    num1: 440,
    num2: 420,
    num3: 410,
    num4: 470,
    rate: 80,
    name: '充电宝'
  },
  {
    num: 340,
    num1: 330,
    num2: 620,
    num3: 370,
    num4: 170,
    rate: 60,
    name: '烟火'
  },
])

const supervisionData = ref([])
const interceptionData = 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 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 = () => {
  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;
    margin-bottom: 15px;
    .col {
      flex: 1;
      height: 100%;
      :deep(.info-card) {
        height: 100%;
      }
    }
  }
}
</style>