medical-mall/components/analytics/AnalyticsUserGenderSection.uvue

<template>
  <view class="gender-card">
    <view class="card-header">
      <text class="title">用户性别比例</text>
    </view>

    <view class="card-content">
      <view class="chart-container">
        <EChartsView :option="chartOption" class="donut-chart" />
        <view class="center-text">
          <text class="total-label">总用户数</text>
          <text class="total-value">{{ totalUsers }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
import supa, { ensureSupabaseReady } from '@/components/supadb/aksupainstance.uts'
import { ref, watchEffect } from 'vue'

type GenderRow = {
  name: string
  value: number
}

const props = defineProps<{
  startDate: string
  endDate: string
}>()

const totalUsers = ref<number>(0)
const chartOption = ref<any>({})

function toPlainObject(obj: any): any {
  if (obj == null) return null
  if (typeof obj !== 'object') return obj
  if (Array.isArray(obj)) {
    return obj.map((item) => toPlainObject(item))
  }
  const plain: any = {}
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      const value = obj[key]
      if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
        continue
      }
      if (value != null && typeof value === 'object' && !Array.isArray(value)) {
        let isSimple = true
        for (const k in value) {
          if (typeof value[k] === 'object' && value[k] !== null) {
            isSimple = false
            break
          }
        }
        plain[key] = isSimple ? { ...value } : toPlainObject(value)
      } else {
        plain[key] = value
      }
    }
  }
  return plain
}

function initChartFromRows(rows: Array<GenderRow>) {
  const normalized: any = { '未知': 0, '男': 0, '女': 0 }
  for (let i = 0; i < rows.length; i++) {
    const name = `${rows[i].name}`
    const value = Number(rows[i].value) || 0
    if (name === '男' || name === '女') {
      normalized[name] = value
    } else {
      normalized['未知'] += value
    }
  }

  totalUsers.value = normalized['未知'] + normalized['男'] + normalized['女']

  const data = [
    { value: normalized['未知'], name: '未知', itemStyle: { color: '#999999' } },
    { value: normalized['男'], name: '男', itemStyle: { color: '#3b82f6' } },
    { value: normalized['女'], name: '女', itemStyle: { color: '#f97316' } }
  ]

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      top: '0%',
      left: 'center',
      icon: 'rect',
      itemWidth: 15,
      itemHeight: 15,
      textStyle: {
        fontSize: 12,
        color: '#666'
      }
    },
    series: [
      {
        name: '性别比例',
        type: 'pie',
        radius: ['50%', '75%'],
        center: ['50%', '60%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false
          }
        },
        labelLine: {
          show: false
        },
        data
      }
    ]
  }

  chartOption.value = toPlainObject(option)
}

async function loadData() {
  try {
    if (!props.startDate || !props.endDate) {
      totalUsers.value = 0
      initChartFromRows([])
      return
    }

    await ensureSupabaseReady()

    const p = new UTSJSONObject()
    p.set('p_start_date', props.startDate)
    p.set('p_end_date', props.endDate)

    const res: any = await supa.rpc('rpc_analytics_user_gender_distribution', p)
    const rows: Array<any> = Array.isArray(res.data) ? (res.data as Array<any>) : []

    console.log('[AnalyticsUserGenderSection] props', props.startDate, props.endDate)
    console.log('[AnalyticsUserGenderSection] rpc rows', rows)

    initChartFromRows(rows as Array<GenderRow>)
  } catch (e) {
    console.error('AnalyticsUserGenderSection loadData failed', e)
    totalUsers.value = 0
    initChartFromRows([])
  }
}

watchEffect(() => {
  const s = props.startDate
  const e = props.endDate
  if (s && e) {
    loadData()
  } else {
    totalUsers.value = 0
    initChartFromRows([])
  }
})
</script>

<style scoped lang="scss">
.gender-card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  height: 521px;
}

.card-header {
  margin-bottom: 20px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.card-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.donut-chart {
  width: 100%;
  height: 100%;
}

.center-text {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.total-label {
  font-size: 14px;
  color: #999;
  margin-bottom: 4px;
}

.total-value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}
</style>