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

<template>
  <ChartsContainer title="人员在岗情况">
    <div ref="pie" style="height: 60%;"></div>
    <div ref="bar" style="height: 40%;"></div>
  </ChartsContainer>
</template>

<script setup>
import { computed } from 'vue';
import ChartsContainer from '../ChartsContainer.vue';
import { useECharts } from '@/hooks/useEcharts.js';

const pie = ref(null)
const bar = ref(null)
const props = defineProps({
  personnelCountInfo: {
    type: Object,
    default: () => ({
      allData: 0, // 全部通道
      openRate: 0, // 开放率
      openData: 0,  // 开放通道数
      closeData: 0, // 未开放通道数
      barGrounp: [ 'T2航站楼', 'T1航站楼' ],
      barOpenData: [ 0, 0 ],
      barCloseData: [ -0, -0 ],
      hasValidData: true
    })
  }
})



const setChartsOptions = computed(() => {
  return {
    graphic: [ {
      type: 'text',
      left: '52%',
      top: '40%',
      style: {
        text: '在岗率',
        font: 'bold 20px sans-serif',
        fill: '#fff'
      }
    }, {
      type: 'text',
      left: '54%',
      top: '50%',
      style: {
        text: (props.personnelCountInfo.openRate || 0) + '%',
        font: 'bold 22px sans-serif',
        fill: '#fff'
      }
    } ],
    legend: {
      data: [ "在岗", "空闲" ],
      left: "left",
      top: "center",
      orient: "vertical",
      textStyle: { color: "#fff" },
    },
    tooltip: {
      trigger: 'item'
    },
    series: [ {
      type: "pie",
      radius: [ "50%", "70%" ],
      center: [ "60%", "50%" ],
      label: {
        formatter: '{b}\n{c}',
        color: '#fff',
        fontSize: 14,
      },
      labelLine: {
        length: 3
      },
      data: [
        { value: props.personnelCountInfo.openData, name: "在岗", itemStyle: { color: "#408CFF" } },
        { value: props.personnelCountInfo.closeData, name: "空闲", itemStyle: { color: "#A7C8FF" } }
      ]
    } ],
    animation: false,
    grid: {
      top: 10,
      bottom: 50,
      left: 20,
      right: 20
    },
  }
})
const setChartsOptionsBar = computed(() => {
  return {
    grid: {
      top: 20,
      bottom: 20,
      left: 80,
      right: 20
    },
    legend: { show: false },
    xAxis: {
      type: 'value',
      position: 'bottom',
      axisLine: { show: true, lineStyle: { color: '#fff' } },
      axisTick: { show: false },
      axisLabel: { show: false },
      splitLine: { show: false },
      min: -props.personnelCountInfo.allData || -10,
      max: props.personnelCountInfo.allData || 10
    },
    yAxis: {
      type: 'category',
      data: props.personnelCountInfo.barGrounp,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        color: '#fff',
        fontSize: 14,
        margin: 10
      }
    },
    series: [
      {
        name: '在岗',
        type: 'bar',
        stack: 'total',
        barWidth: 20,
        itemStyle: { color: '#408CFF' },
        label: {
          show: true,
          position: 'left',
          color: '#fff',
          formatter: function (params) {
            return Math.abs(params.value)
          }
        },
        data: props.personnelCountInfo.barOpenData // T2航站楼开放70，T1航站楼开放30
      },
      {
        name: '空闲',
        type: 'bar',
        stack: 'total',
        barWidth: 20,
        itemStyle: { color: '#A7C8FF' },
        label: {
          show: true,
          position: 'right',
          color: '#fff',
          formatter: function (params) {
            return Math.abs(params.value)
          }
        },
        data: props.personnelCountInfo.barCloseData  // T2航站楼未开放30，T1航站楼未开放70
      }
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      formatter: function (params) {
        return params[ 0 ].name + '<br/>' +
          params[ 0 ].seriesName + ': ' + Math.abs(params[ 0 ].value) + '<br/>' +
          params[ 1 ].seriesName + ': ' + Math.abs(params[ 1 ].value);
      }
    }
  }
})

useECharts(pie, setChartsOptions);
useECharts(bar, setChartsOptionsBar);
</script>

<style lang="scss" scoped></style>