meilan-web/src/views/blockingData/blockingDataScreen/components/ModuleTwo.vue

<template>
  <module-container title="查堵人员分析">
    <div class="module-two-content">
      <div class="top-row">
        <div class="table-card">
          <div class="card-title">查堵-主管分管榜</div>
          <div class="rank-table">
            <div v-for="(item, index) in rankData1" :key="index" class="rank-row">
              <span class="rank-number" :class="'rank-' + (index + 1)">NO.{{ index + 1 }}</span>
              <span class="rank-name">{{ item.name }}</span>
              <span class="rank-value">{{ item.value }}</span>
            </div>
          </div>
        </div>
        <div class="table-card">
          <div class="card-title">查堵-班组排行</div>
          <div class="rank-table">
            <div v-for="(item, index) in rankData2" :key="index" class="rank-row">
              <span class="rank-number" :class="'rank-' + (index + 1)">NO.{{ index + 1 }}</span>
              <span class="rank-name">{{ item.name }}</span>
              <span class="rank-value">{{ item.value }}</span>
            </div>
          </div>
        </div>
        <div class="table-card">
          <div class="card-title">查堵-人员榜</div>
          <div class="rank-table">
            <div v-for="(item, index) in rankData3" :key="index" class="rank-row">
              <span class="rank-number" :class="'rank-' + (index + 1)">NO.{{ index + 1 }}</span>
              <span class="rank-name">{{ item.name }}</span>
              <span class="rank-value">{{ item.value }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="middle-row">
        <div class="chart-card">
          <div class="card-title">查堵-物品位置分布</div>
          <div ref="chart1" class="echarts"></div>
        </div>
        <div class="chart-card">
          <div class="card-title">查堵-原因分类</div>
          <div ref="chart2" class="echarts"></div>
        </div>
      </div>
      
      <div class="bottom-row">
        <div class="chart-card">
          <div class="card-title">查堵-开机人员年限分布</div>
          <div ref="chart3" class="echarts"></div>
        </div>
        <div class="chart-card">
          <div class="card-title">查堵-开机人员性别比例</div>
          <div ref="chart4" class="echarts"></div>
        </div>
        <div class="chart-card">
          <div class="card-title">查堵-图像难易程度比例</div>
          <div ref="chart5" class="echarts"></div>
        </div>
      </div>
      
      <div class="extra-row">
        <div class="chart-card">
          <div class="card-title">大队开机人员查堵分布</div>
          <div ref="chart6" class="echarts"></div>
        </div>
        <div class="chart-card">
          <div class="card-title">大队开机人员查堵分布</div>
          <div ref="chart7" class="echarts"></div>
        </div>
      </div>
    </div>
  </module-container>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import * as echarts from 'echarts'
import ModuleContainer from './ModuleContainer.vue'
import { useEcharts } from '@/hooks/chart.js'

const chart1 = ref(null)
const chart2 = ref(null)
const chart3 = ref(null)
const chart4 = ref(null)
const chart5 = ref(null)
const chart6 = ref(null)
const chart7 = ref(null)

const { setOption: setOption1 } = useEcharts(chart1)
const { setOption: setOption2 } = useEcharts(chart2)
const { setOption: setOption3 } = useEcharts(chart3)
const { setOption: setOption4 } = useEcharts(chart4)
const { setOption: setOption5 } = useEcharts(chart5)
const { setOption: setOption6 } = useEcharts(chart6)
const { setOption: setOption7 } = useEcharts(chart7)

const rankData1 = reactive([
  { name: '李主管', value: 110 },
  { name: '李海峰', value: 102 },
  { name: '李华波', value: 94 },
  { name: '方星星', value: 80 },
  { name: '郭仁昌', value: 69 },
  { name: '陈晓明', value: 67 },
  { name: '万国', value: 62 },
  { name: '杨高星', value: 60 },
  { name: '符昌国', value: 59 },
  { name: '李星国', value: 57 },
  { name: '周良志', value: 56 },
  { name: '杨旭', value: 53 }
])

const rankData2 = reactive([
  { name: '李智辉', value: 44 },
  { name: '林明玉', value: 42 },
  { name: '吴帮文', value: 40 },
  { name: '杨玉艳', value: 37 },
  { name: '符玉玲', value: 37 },
  { name: '黄登', value: 36 },
  { name: '梁品俊', value: 35 },
  { name: '陈勤丽', value: 35 },
  { name: '潘政生', value: 34 },
  { name: '周民伦', value: 34 },
  { name: '王明星', value: 33 },
  { name: '林文海', value: 33 }
])

const rankData3 = reactive([
  { name: '梁翠兰', value: 21 },
  { name: '陈秀强', value: 20 },
  { name: '李国', value: 19 },
  { name: '梁其佐', value: 18 },
  { name: '王名标', value: 18 },
  { name: '李书帆', value: 17 },
  { name: '李亚峰', value: 17 },
  { name: '杨燕钰', value: 16 },
  { name: '刘燕萍', value: 16 },
  { name: '庄伟', value: 16 },
  { name: '黄富伦', value: 15 },
  { name: '唐甸宇', value: 15 }
])

const pieOption = (data, colors, isRing = false) => ({
  color: colors,
  series: [{
    type: 'pie',
    radius: isRing ? ['50%', '70%'] : '60%',
    center: ['50%', '55%'],
    data: data,
    label: {
      show: true,
      formatter: '{b}\n{c}%',
      fontSize: 10
    }
  }]
})

const barOption = (data, colors) => ({
  grid: { left: '15%', top: '10%', right: '5%', bottom: '10%', containLabel: true },
  xAxis: { type: 'value', axisLabel: { fontSize: 9 } },
  yAxis: { type: 'category', data: data.map(d => d.name), axisLabel: { fontSize: 9 } },
  series: [{
    type: 'bar',
    data: data.map(d => d.value),
    itemStyle: {
      color: (params) => colors[params.dataIndex % colors.length]
    },
    barWidth: 15
  }]
})

const stackBarOption = (data, colors) => ({
  grid: { left: '15%', top: '10%', right: '5%', bottom: '15%', containLabel: true },
  xAxis: { type: 'category', data: ['安检二大队', '安检三大队', '安检一大队'], axisLabel: { fontSize: 9 } },
  yAxis: { type: 'value', axisLabel: { fontSize: 9 } },
  legend: { top: 0, right: 10, textStyle: { fontSize: 9 } },
  series: data.map((d, i) => ({
    name: d.name,
    type: 'bar',
    stack: 'total',
    data: d.data,
    itemStyle: { color: colors[i] },
    barWidth: 25
  }))
})

onMounted(() => {
  setOption1(pieOption([
    { name: '包上', value: 10 },
    { name: '包中', value: 15 },
    { name: '包下', value: 12 },
    { name: '左上', value: 18 },
    { name: '左中', value: 20 },
    { name: '左下', value: 15 },
    { name: '右下', value: 10 }
  ], ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6', '#64748b']))
  setOption2(pieOption([
    { name: '未注意到部位以及未仔细判图', value: 25 },
    { name: '图像特征难以发现', value: 20 },
    { name: '判图难度较大', value: 18 },
    { name: '图像中判清物品', value: 15 },
    { name: '判图不清，未能有效识别物品', value: 12 },
    { name: '其他', value: 10 }
  ], ['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#64748b'], true))
  setOption3(barOption([
    { name: '6年及以上', value: 77 },
    { name: '4-6年', value: 25 },
    { name: '3年', value: 18 },
    { name: '2年', value: 30 },
    { name: '1年', value: 69 },
    { name: '1年以下', value: 12 }
  ], ['#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe', '#dbeafe', '#eff6ff']))
  setOption4(pieOption([
    { name: '男', value: 63 },
    { name: '女', value: 37 }
  ], ['#3b82f6', '#ec4899']))
  setOption5(pieOption([
    { name: '简单', value: 52 },
    { name: '难', value: 30 },
    { name: '未评判', value: 12 },
    { name: '空白', value: 6 }
  ], ['#93c5fd', '#3b82f6', '#64748b', '#e2e8f0']))
  setOption6(stackBarOption([
    { name: '6年及以上人数', data: [30, 25, 22] },
    { name: '4-6年人数', data: [15, 20, 18] },
    { name: '3年人数', data: [10, 12, 15] },
    { name: '2年人数', data: [12, 15, 13] },
    { name: '1年人数', data: [25, 30, 28] },
    { name: '不足1年人数', data: [5, 8, 10] }
  ], ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6']))
  setOption7(stackBarOption([
    { name: '安检一大队', data: [135, 120] },
    { name: '安检二大队', data: [90, 110] },
    { name: '安检三大队', data: [70, 130] }
  ], ['#3b82f6', '#22c55e', '#f97316']))
})
</script>

<style lang="less" scoped>
.module-two-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.top-row,
.middle-row,
.bottom-row,
.extra-row {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.table-card {
  flex: 1;
  background: #fff;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.chart-card {
  flex: 1;
  background: #fff;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  min-height: 120px;
}

.card-title {
  font-size: 11px;
  color: #333;
  margin-bottom: 5px;
  text-align: center;
  font-weight: 500;
}

.rank-table {
  flex: 1;
  overflow-y: auto;
}

.rank-row {
  display: flex;
  align-items: center;
  padding: 4px 6px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 11px;
}

.rank-row:last-child {
  border-bottom: none;
}

.rank-number {
  width: 45px;
  font-weight: bold;
  margin-right: 8px;
}

.rank-1 {
  color: #eab308;
}

.rank-2 {
  color: #94a3b8;
}

.rank-3 {
  color: #f97316;
}

.rank-name {
  flex: 1;
  color: #333;
}

.rank-value {
  color: #666;
}

.echarts {
  flex: 1;
  width: 100%;
  min-height: 100px;
}
</style>