sql数据流，amdin业务逻辑接入

components/analytics/AnalyticsUserGenderSection.uvue

@@ -3,7 +3,7 @@
     <view class="card-header">
       <text class="title">用户性别比例</text>
     </view>
-    
+
     <view class="card-content">
       <view class="chart-container">
         <EChartsView :option="chartOption" class="donut-chart" />
@@ -16,102 +16,155 @@
   </view>
 </template>
 
-<script lang="uts">
+<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'
 
-export default {
-  components: {
-    EChartsView
-  },
-  data() {
-    return {
-      totalUsers: 525,
-      chartOption: {} as any
-    }
-  },
-  mounted() {
-    setTimeout(() => {
-      this.initChart()
-    }, 200)
-  },
-  methods: {
-    initChart() {
-      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: [
-              { value: 450, name: '未知', itemStyle: { color: '#999999' } },
-              { value: 50, name: '男', itemStyle: { color: '#3b82f6' } },
-              { value: 25, name: '女', itemStyle: { color: '#f97316' } }
-            ]
-          }
-        ]
+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
       }
-      this.chartOption = this.toPlainObject(option)
-    },
-    toPlainObject(obj: any): any {
-      if (obj == null) return null
-      if (typeof obj !== 'object') return obj
-      if (Array.isArray(obj)) {
-        return obj.map((item) => this.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 } : this.toPlainObject(value)
-          } else {
-            plain[key] = value
+      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
     }
   }
+  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">