refactor(layout): 调整布局样式并优化轮播卡片组件

云

9 小时以前 1c829f9177eab675b22be4d20ef2761ed1bbb423

 src/views/reportAnalysis/dataDashboard/components/basic/center-bottom.vue

@@ -3,7 +3,10 @@
    <PanelHeader title="人员分布" />
    <div class="main-panel panel-item-customers">
      <div class="pie-chart-wrapper">
        <div class="pie-background" :style="{ backgroundImage: `url(${roseBorderImg})` }"></div>
        <div class="pie-center">
          <span class="pie-center-value">{{ totalStaff }}</span>
          <span class="pie-center-label">合计(人)</span>
        </div>
        <Echarts
          ref="echartsRef"
          :chartStyle="chartStyle"
@@ -12,8 +15,10 @@
          :tooltip="pieTooltip"
          :color="pieColors"
          :options="pieOptions"
          style="height: 320px"
        />
          style="height: 100%"
        >
          <div v-if="loaded && !pieDatas.length" class="chart-empty">暂无数据</div>
        </Echarts>
      </div>
    </div>
  </div>
@@ -24,128 +29,150 @@
import { deptStaffDistribution } from '@/api/viewIndex.js'
import PanelHeader from '../PanelHeader.vue'
import Echarts from '@/components/Echarts/echarts.vue'
import roseBorderImg from '@/assets/BI/玫瑰图边框.png'
import { BI, baseChartOptions, withTooltip } from '../../theme.js'

/**
 * @introduction 把数组中key值相同的那一项提取出来，组成一个对象
 * @param {参数类型} array 传入的数组 [{a:"1",b:"2"},{a:"2",b:"3"}]
 * @param {参数类型} key  属性名 a
 * @return {返回类型说明}
 */
function array2obj(array, key) {
  const resObj = {}
  for (let i = 0; i < array.length; i++) {
    resObj[array[i][key]] = array[i]
  }
  return resObj
}
const echartsRef = ref(null)
const pieDatas = ref([])
const loaded = ref(false)

const pieColors = BI.series

// 人员总数
const totalStaff = computed(() =>
  pieDatas.value.reduce((sum, d) => sum + (Number(d.value) || 0), 0)
)

const chartStyle = {
  width: '100%',
  height: '100%',
}

const echartsRef = ref(null)
const pieDatas = ref([])
const pieColors = ['#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF', '#43e8fc', '#27EBE7']
const pieObjData = computed(() => {
  const obj = {}
  pieDatas.value.forEach((d) => {
    obj[d.name] = d
  })
  return obj
})

const pieObjData = computed(() => array2obj(pieDatas.value, 'name'))

// 图例配置（右侧竖排）
const pieLegend = computed(() => {
  const data = pieDatas.value.map((d, idx) => ({
    name: d.name,
    icon: 'circle',
    textStyle: {
      fontSize: 18,
      fontSize: 14,
      color: pieColors[idx % pieColors.length],
    },
  }))

  return {
    show: data.length > 0,
    orient: 'vertical',
    top: 'center',
    left: '50%',
    itemGap: 30,
    data: data,
    formatter: function (name) {
    itemGap: 18,
    itemWidth: 8,
    itemHeight: 8,
    data,
    formatter(name) {
      const item = pieObjData.value[name]
      if (!item) return name
      return `{title|${name}}{value|${item.value}}{unit|人}{percent|${item.rate}}{unit|%}`
      const short = name.length > 6 ? `${name.slice(0, 6)}…` : name
      return `{title|${short}}{value|${item.value}}{unit|人}`
    },
    textStyle: {
      rich: {
        value: {
          color: '#43e8fc',
          fontSize: 18,
          fontWeight: 600,
          padding: [0, 10, 0, 30],
        title: {
          fontSize: 13,
          color: BI.text,
          width: 96,
          overflow: 'truncate',
        },
        unit: {
          color: '#82baff',
        value: {
          color: BI.textStrong,
          fontSize: 14,
          fontWeight: 600,
          padding: [0, 50, 0, 0],
          padding: [0, 0, 0, 10],
        },
        percent: {
          color: '#43e8fc',
          fontSize: 18,
          fontWeight: 600,
          padding: [0, 10, 0, 0],
        },
        title: {
          fontSize: 18,
          padding: [0, 0, 0, 0],
        unit: {
          color: BI.text,
          fontSize: 12,
        },
      },
    },
  }
})

const pieTooltip = {
// 提示框：人数 + 占比
const pieTooltip = withTooltip({
  trigger: 'item',
  formatter: '{a} <br/>{b} : {c} ({d}%)',
}
  confine: true,
  formatter(params) {
    const d = params.data || {}
    const val = Number(d.value || 0)
    return `${params.marker}<b>${d.name || ''}</b>&nbsp;&nbsp;${val} 人 · ${params.percent}%`
  },
})

// 双层环形饼图
const pieSeries = computed(() => [
  {
    name: '人员分布',
    type: 'pie',
    radius: '70%',
    radius: ['48%', '68%'],
    center: ['20%', '50%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderWidth:5,
      borderColor: BI.sliceBorder,
      borderWidth: 2,
      borderRadius: 4,
    },
    label: {
      show: false
      show: false,
    },
    minAngle: 15,
    minAngle: 8,
    data: pieDatas.value,
    animationType: 'scale',
    animationEasing: 'elasticOut',
    animationDelay: function () {
      return Math.random() * 200
  },
  {
    // 内圈轨道环
    type: 'pie',
    radius: ['40%', '43%'],
    center: ['20%', '50%'],
    silent: true,
    label: {
      show: false,
    },
    labelLine: {
      show: false,
    },
    itemStyle: {
      color: 'rgba(74, 108, 240, 0.22)',
    },
    data: [1],
  },
])

const pieOptions = {
  backgroundColor: 'transparent',
  textStyle: { color: '#B8C8E0' },
}
const pieOptions = baseChartOptions

const getDeptStaffDistribution = () => {
  deptStaffDistribution().then(res => {
    if (res.code === 200) {
      pieDatas.value = res.data.items.map(item => ({
  deptStaffDistribution()
    .then((res) => {
      const items = res.data?.items || []
      pieDatas.value = items.map((item) => ({
        name: item.name,
        value: parseInt(item.value),
        rate: item.rate
        value: Number(item.value) || 0,
        rate: item.rate,
      }))
    }
  }).catch(err => {
    console.error('获取部门人员分布数据失败:', err)
  })
    })
    .catch((err) => {
      console.error('获取部门人员分布数据失败:', err)
      pieDatas.value = []
    })
    .finally(() => {
      loaded.value = true
    })
}

onMounted(() => {
@@ -160,32 +187,60 @@
  gap: 20px;
}

/* 330 = 中栏剩余高度，保证左中右三栏底边对齐 */
.panel-item-customers {
  border: 1px solid #1a58b0;
  border: 1px solid var(--bi-panel-border);
  background: var(--bi-panel-bg);
  border-radius: 8px;
  padding: 18px;
  width: 100%;
  height: 370px;
  height: 330px;
}

.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  height: 276px;
  background: transparent;
}


.pie-background {
.pie-center {
  position: absolute;
  left: 50%;
  left: 20%;
  top: 50%;
  transform: translate(-113%, -50%);
  width: 360px;
  height: 360px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 2;
}

.pie-center-value {
  font-weight: 600;
  font-size: 22px;
  color: var(--bi-text-strong);
  font-variant-numeric: tabular-nums;
}

.pie-center-label {
  font-size: 12px;
  color: var(--bi-text);
}

.chart-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 276px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bi-text);
  font-size: 14px;
  letter-spacing: 1px;
  pointer-events: none;
}
</style>