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

<template>
  <module-container title="模块二 查堵人员分析">
    <div class="module-brigade-content">
      <div class="chart-row">
        <div class="chart-item">
          <div class="chart-title">查堵-主管排行榜</div>
          <rank-list :rank-data="rankData1" title="查堵-主管排行榜" />
        </div>
        <div class="chart-item">
          <div class="chart-title">查堵-班组长排行榜</div>
          <rank-list :rank-data="rankData2" title="查堵-班组长排行榜" />
        </div>
        <div class="chart-item">
          <div class="chart-title">查堵-员工排行榜</div>
          <rank-list :rank-data="rankData3" title="查堵-员工排行榜" />
        </div>
      </div>
      
      <div class="chart-row">
        <div class="chart-item">
          <div class="chart-title">查堵男女比例</div>
          <div ref="chart4" class="echarts"></div>
        </div>
        <div class="chart-item">
          <div class="chart-title">查堵人员证书级别分布</div>
          <div ref="chart5" class="echarts"></div>
        </div>
        <div class="chart-item">
          <div class="chart-title">证书级别人员基数</div>
          <div ref="chart6" class="echarts"></div>
        </div>
      </div>
      
      <div class="chart-row">
        <div class="chart-item">
          <div class="chart-title">查堵物品位置</div>
          <div ref="chart7" class="echarts"></div>
        </div>
        <div class="chart-item">
          <div class="chart-title">查堵-困难图像数</div>
          <div class="number-display">
            <div class="number-value">819</div>
            <div class="number-unit">幅</div>
          </div>
        </div>
        <div class="chart-item">
          <div class="chart-title">查堵-简单图像数</div>
          <div class="number-display">
            <div class="number-value">819</div>
            <div class="number-unit">幅</div>
          </div>
        </div>
      </div>
      
      <div class="chart-row">
        <div class="chart-item">
          <div class="chart-title">查堵-主管分管次数</div>
          <div ref="chart10" class="echarts"></div>
        </div>
        <div class="chart-item">
          <div class="chart-title">查堵原因分类</div>
          <div ref="chart11" class="echarts"></div>
        </div>
      </div>
      
      <div class="chart-row">
        <div class="chart-item">
          <div class="chart-title">查堵人员开机年限分布</div>
          <div ref="chart12" class="echarts"></div>
        </div>
        <div class="chart-item">
          <div class="chart-title">大队开机年限人员分布</div>
          <div ref="chart13" 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 RankList from './RankList.vue'
import { useEcharts } from '@/hooks/chart.js'

const chart4 = ref(null)
const chart5 = ref(null)
const chart6 = ref(null)
const chart7 = ref(null)
const chart10 = ref(null)
const chart11 = ref(null)
const chart12 = ref(null)
const chart13 = ref(null)

const { setOption: setOption4 } = useEcharts(chart4)
const { setOption: setOption5 } = useEcharts(chart5)
const { setOption: setOption6 } = useEcharts(chart6)
const { setOption: setOption7 } = useEcharts(chart7)
const { setOption: setOption10 } = useEcharts(chart10)
const { setOption: setOption11 } = useEcharts(chart11)
const { setOption: setOption12 } = useEcharts(chart12)
const { setOption: setOption13 } = useEcharts(chart13)

const rankData1 = reactive([
  { name: '李鑫锋', value: 102 },
  { name: '李学玲', value: 94 },
  { name: '郑杰', value: 80 },
  { name: '郭仁吉', value: 69 },
  { name: '计沐', value: 67 },
  { name: '方园', value: 62 },
  { name: '符鑫日', value: 59 }
])

const rankData2 = reactive([
  { name: '李雪琦', value: 44 },
  { name: '林瑞玉', value: 42 },
  { name: '吴明文', value: 40 },
  { name: '吕吕俊', value: 36 },
  { name: '潘任', value: 31 },
  { name: '吴亚琪', value: 30 }
])

const rankData3 = reactive([
  { name: '梁其松', value: 18 },
  { name: '王名顺', value: 18 },
  { name: '陈艳丽', value: 16 },
  { name: '刘振华', value: 16 },
  { name: '黄建成', value: 15 },
  { name: '简句学', value: 15 },
  { name: '郭可奇', value: 14 }
])

const pieChartOption = (data, colors) => ({
  color: colors,
  series: [{
    type: 'pie',
    radius: ['40%', '65%'],
    center: ['50%', '55%'],
    data: data,
    label: { show: true, formatter: '{b}\n{c}%', fontSize: 10 }
  }]
})

const donutChartOption = (data, colors) => ({
  color: colors,
  series: [{
    type: 'pie',
    radius: ['30%', '55%'],
    center: ['50%', '55%'],
    data: data,
    label: { show: true, formatter: '{b}', fontSize: 10, position: 'outside' }
  }]
})

const multiBarChartOption = (data, color) => ({
  grid: { left: '15%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
  xAxis: { type: 'category', data: data.map(d => d.name), axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
  yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
  series: [{ type: 'bar', data: data.map(d => d.value), itemStyle: { color: color }, barWidth: 20 }]
})

onMounted(() => {
  setOption4(pieChartOption([
    { name: '女', value: 52.26 },
    { name: '男', value: 47.74 }
  ], ['#ec4899', '#3b82f6']))

  setOption5(pieChartOption([
    { name: '高级', value: 49.81 },
    { name: '中级', value: 50.19 }
  ], ['#22c55e', '#3b82f6']))

  setOption6(pieChartOption([
    { name: '高级证书', value: 1.59 },
    { name: '中级证书', value: 98.41 }
  ], ['#22c55e', '#3b82f6']))

  setOption7(donutChartOption([
    { name: '中下', value: 6.35 },
    { name: '中间', value: 11.85 },
    { name: '右下', value: 7.74 },
    { name: '右上', value: 7.56 },
    { name: '左中', value: 7.26 },
    { name: '左上', value: 6.61 },
    { name: '左上', value: 11.16 },
    { name: '右下', value: 6.45 },
    { name: '右上', value: 12.42 },
    { name: '中下', value: 7.41 },
    { name: '右上', value: 6.11 },
    { name: '左上', value: 10.24 }
  ], ['#8b5cf6', '#ec4899', '#f97316', '#22c55e', '#3b82f6', '#14b8a6', '#ef4444', '#fbbf24', '#6366f1', '#06b6d4', '#84cc16', '#e11d48']))

  setOption10(donutChartOption([
    { name: '赵德峰', value: 12.46 },
    { name: '刘佳', value: 7.94 },
    { name: '郑晓华', value: 7.94 },
    { name: '谢金艳', value: 7.82 },
    { name: '潘仁芳', value: 7.33 },
    { name: '张庆林', value: 7.2 },
    { name: '陈颖', value: 7.2 },
    { name: '李学芬', value: 7.2 },
    { name: '李俊峰', value: 7.08 },
    { name: '周雪梅', value: 7.08 },
    { name: '刘旭', value: 6.46 },
    { name: '李丽', value: 6.46 },
    { name: '任静', value: 6.46 },
    { name: '张静', value: 6.46 }
  ], ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6', '#ef4444', '#fbbf24', '#6366f1', '#06b6d4', '#84cc16', '#e11d48', '#a855f7', '#f59e0b']))

  setOption11(pieChartOption([
    { name: '问题判断不清，未按规范检查导致漏检', value: 23.20 },
    { name: '未按规范检查导致漏检', value: 7.04 },
    { name: '判断不清，漏检', value: 6.48 },
    { name: '未能辨别危险品', value: 5.92 },
    { name: '未能辨别危险品', value: 5.92 },
    { name: '未能辨别危险品', value: 2.88 },
    { name: '简单漏检未能认真判断', value: 21.23 },
    { name: '未能辨别危险品', value: 27.34 }
  ], ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6', '#ef4444', '#fbbf24']))

  setOption12(pieChartOption([
    { name: '5年及5年以上', value: 30.71 },
    { name: '4年人员数', value: 18.68 },
    { name: '3年人员数', value: 22.47 },
    { name: '2年人员数', value: 14.75 },
    { name: '1年人员数', value: 6.76 },
    { name: '不足1年人员数', value: 6.63 }
  ], ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6']))

  setOption13(multiBarChartOption([
    { name: '安检一大队', value: 104 },
    { name: '安检二大队', value: 39 },
    { name: '安检三大队', value: 14 },
    { name: '安检四大队', value: 13 },
    { name: '安检五大队', value: 12 }
  ], '#3b82f6'))
})
</script>

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

.chart-row {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

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

.chart-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
  text-align: left;
  font-weight: 500;
}

.echarts {
  flex: 1;
  width: 100%;
  min-height: 0;
}

.number-display {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.number-value {
  font-size: 48px;
  font-weight: bold;
  color: #3b82f6;
}

.number-unit {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}
</style>