chongqing-app/src/pages/qualityControlAnalysisReport/components/qualityControl.vue

<template>
  <view class="quality-control mobile-section">
    <!-- 质控活动标题 -->
    <view class="section-title">
      <text class="title-text">质控活动</text>
    </view>

    <!-- 任务计划安排统计 -->
    <view class="task-planning" v-show="!isTeamType && !isUserType && !isDepartmentType">
      <view class="planning-header">
        <text class="header-text">任务计划安排统计</text>
      </view>

      <!-- 统计卡片 -->
      <view class="stat-cards">
        <view class="stat-card">
          <view class="stat-title">专项任务</view>
          <view class="stat-count">
            <text class="count-number">{{ specialTask && specialTask.count ? specialTask.count : 0 }}</text>
            <text class="count-unit">次</text>
          </view>
          <view class="stat-trend">
            <text>同比</text>
            <text :class="specialTask && specialTask.yearOnYearTrend ? specialTask.yearOnYearTrend : 'trend-neutral'">{{
              specialTask && specialTask.yearOnYear ? specialTask.yearOnYear : '0%' }}</text>
            <template v-if="queryForm.dateRangeQueryType !== 'YEAR'">
              <text>，环比</text>
              <text
                :class="specialTask && specialTask.chainRatioTrend ? specialTask.chainRatioTrend : 'trend-neutral'">{{
                  specialTask && specialTask.chainRatio ? specialTask.chainRatio : '0%' }}</text>
            </template>
          </view>
        </view>

        <view class="stat-card">
          <view class="stat-title">日常任务</view>
          <view class="stat-count">
            <text class="count-number">{{ dailyTask && dailyTask.count ? dailyTask.count : 0 }}</text>
            <text class="count-unit">次</text>
          </view>
          <view class="stat-trend">
            <text>同比</text>
            <text :class="dailyTask && dailyTask.yearOnYearTrend ? dailyTask.yearOnYearTrend : 'trend-neutral'">{{
              dailyTask &&
                dailyTask.yearOnYear ? dailyTask.yearOnYear : '0%' }}</text>
            <template v-if="queryForm.dateRangeQueryType !== 'YEAR'">
              <text>，环比</text>
              <text :class="dailyTask && dailyTask.chainRatioTrend ? dailyTask.chainRatioTrend : 'trend-neutral'">{{
                dailyTask && dailyTask.chainRatio ? dailyTask.chainRatio : '0%' }}</text>
            </template>
          </view>
        </view>
      </view>

      <!-- 图表区域 -->
      <view class="chart-container">
        <view ref="planScheduleChartRef" class="echarts-chart"></view>
      </view>
    </view>

    <!-- 问题发现统计 -->
    <view class="problem-discovery">
      <view class="discovery-header">
        <text class="header-text">问题发现统计</text>
      </view>

      <!-- 描述卡片 -->
      <view class="describe-card" v-if="checkProblemDiscovery && checkProblemDiscovery.desc">
        <view class="describe-content">
          {{ checkProblemDiscovery.desc }}
        </view>
      </view>

      <!-- 图表区域 -->
      <view class="chart-container">
        <view ref="problemDiscoveryChartRef" class="echarts-chart"></view>
      </view>
    </view>

    <!-- 问题分布统计 -->
    <view class="problem-distribution">
      <view class="distribution-header">
        <text class="header-text">问题分布统计</text>
      </view>

      <!-- 描述卡片 -->
      <view class="describe-card" v-if="checkProblemDistribution && checkProblemDistribution.desc">
        <view class="describe-content">
          {{ checkProblemDistribution.desc }}
        </view>
      </view>

      <!-- 图表区域 -->
      <view class="chart-container">
        <view ref="problemDistributionChartRef" class="echarts-chart"></view>
      </view>
    </view>

    <!-- 问题整改统计 -->
    <view class="problem-rectification">
      <view class="rectification-header">
        <text class="header-text">问题整改统计</text>
      </view>

      <!-- 描述卡片 -->
      <view class="describe-card" v-if="checkProblemCorrection && checkProblemCorrection.desc">
        <view class="describe-content">
          {{ checkProblemCorrection.desc }}
        </view>
      </view>

      <!-- 图表区域 -->
      <view class="chart-container">
        <view ref="problemRectificationChartRef" class="echarts-chart"></view>
      </view>
    </view>
  </view>
</template>

<script>
import * as echarts from 'echarts'
import { getAnalysisReport } from '@/api/qualityControlAnalysisReport/qualityControlAnalysisReport'

export default {
  name: 'QualityControl',
  props: {
    queryForm: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // API返回的数据
      checkTask: {},
      checkProblemDiscovery: {},
      checkProblemDistribution: {},
      checkProblemCorrection: {},

      // 专项任务和日常任务数据
      specialTask: {
        count: 0,
        yearOnYear: '',
        yearOnYearTrend: 'trend-neutral',
        chainRatio: '',
        chainRatioTrend: 'trend-neutral'
      },
      dailyTask: {
        count: 0,
        yearOnYear: '',
        yearOnYearTrend: 'trend-neutral',
        chainRatio: '',
        chainRatioTrend: 'trend-neutral'
      },

      loading: false,
      // 图表实例
      planScheduleChart: null,
      problemDiscoveryChart: null,
      problemDistributionChart: null,
      problemRectificationChart: null
    }
  },

  computed: {
    // 计算属性：检查是否为TEAM类型
    isTeamType() {
      const roles = this.$store.state?.user?.roles || []
      // 如果是班组长且选择了班组视图，则视为班组类型
      if (roles.includes('xiaozuzhang') && this.queryForm.scopedType === 'TEAMS') {
        return true
      }
      return roles.includes('xiaozuzhang')
    },

    // 计算属性：检查是否为USER类型
    isUserType() {
      const roles = this.$store.state?.user?.roles || []
      // 如果是班组长且选择了个人视图，则视为用户类型
      if (roles.includes('xiaozuzhang') && this.queryForm.scopedType === 'USER') {
        return true
      }
      return roles.includes('SecurityCheck')
    },
    isBrigadeType() {
      const roles = this.$store.state?.user?.roles || []
      return roles.includes('bumenjingli') || roles.includes('xingzheng')
    },

    // 计算属性：检查是否为DEPARTMENT类型
    isDepartmentType() {
      const roles = this.$store.state?.user?.roles || []
      return roles.includes('banzuzhang')
    }
  },

  mounted() {
    this.loadData()
    this.$nextTick(() => {
      this.initCharts()
    })
  },

  beforeDestroy() {
    this.disposeCharts()
  },

  watch: {
    queryForm: {
      handler() {
        this.loadData()
      },
      deep: true
    },

  },

  methods: {
    // 解析desc数据并更新专项任务和日常任务数据
    parseTaskData(desc) {
      if (!desc) return

      // 解析desc格式："专项任务:发布7次,同比上升0.00%,环比上升133.33%;\n日常任务:发布2次,同比上升0.00%,环比下降33.33%"
      const lines = desc.split(';')

      lines.forEach(line => {
        if (line.includes('专项任务')) {
          const countMatch = line.match(/发布(\d+)次/)
          const yearOnYearMatch = line.match(/同比(上升|下降|持平)([\d.-]+)%/)
          const chainRatioMatch = line.match(/环比(上升|下降|持平)([\d.-]+)%/)

          if (countMatch) {

            this.specialTask.count = parseInt(countMatch[1])
          }
          if (yearOnYearMatch) {
            const trendDirection = yearOnYearMatch[1]
            const trendValue = yearOnYearMatch[2]
            let trendType = 'trend-neutral'
            let displayValue = trendValue

            // 处理趋势值为"--"的情况
            if (trendValue === '--') {
              trendType = 'trend-neutral'
              displayValue = '--'
            } else {
              // 正常数值处理
              const value = parseFloat(trendValue)
              if (trendDirection === '上升') {
                trendType = 'trend-up'
                displayValue = '+' + trendValue
              } else if (trendDirection === '下降') {
                trendType = 'trend-down'
                displayValue = '-' + trendValue
              } else if (trendDirection === '持平') {
                trendType = 'trend-neutral'
                displayValue = trendValue
              }
            }

            this.specialTask.yearOnYearTrend = trendType
            this.specialTask.yearOnYear = displayValue + '%'
          }
          if (chainRatioMatch) {
            const trendDirection = chainRatioMatch[1]
            const trendValue = chainRatioMatch[2]
            let trendType = 'trend-neutral'
            let displayValue = trendValue

            // 处理趋势值为"--"的情况
            if (trendValue === '--') {
              trendType = 'trend-neutral'
              displayValue = '--'
            } else {
              // 正常数值处理
              const value = parseFloat(trendValue)
              if (trendDirection === '上升') {
                trendType = 'trend-up'
                displayValue = '+' + trendValue
              } else if (trendDirection === '下降') {
                trendType = 'trend-down'
                displayValue = '-' + trendValue
              } else if (trendDirection === '持平') {
                trendType = 'trend-neutral'
                displayValue = trendValue
              }
            }

            this.specialTask.chainRatioTrend = trendType
            this.specialTask.chainRatio = displayValue + '%'
          }
        } else if (line.includes('日常任务')) {
          const countMatch = line.match(/发布(\d+)次/)
          const yearOnYearMatch = line.match(/同比(上升|下降|持平)([\d.-]+)%/)
          const chainRatioMatch = line.match(/环比(上升|下降|持平)([\d.-]+)%/)

          if (countMatch) {
            this.dailyTask.count = parseInt(countMatch[1])
          }
          if (yearOnYearMatch) {
            const trendDirection = yearOnYearMatch[1]
            const trendValue = yearOnYearMatch[2]
            let trendType = 'trend-neutral'
            let displayValue = trendValue

            // 处理趋势值为"--"的情况
            if (trendValue === '--') {
              trendType = 'trend-neutral'
              displayValue = '--'
            } else {
              // 正常数值处理
              const value = parseFloat(trendValue)
              if (trendDirection === '上升') {
                trendType = 'trend-up'
                displayValue = '+' + trendValue
              } else if (trendDirection === '下降') {
                trendType = 'trend-down'
                displayValue = '-' + trendValue
              } else if (trendDirection === '持平') {
                trendType = 'trend-neutral'
                displayValue = trendValue
              }
            }

            this.dailyTask.yearOnYearTrend = trendType
            this.dailyTask.yearOnYear = displayValue + '%'
          }
          if (chainRatioMatch) {
            const trendDirection = chainRatioMatch[1]
            const trendValue = chainRatioMatch[2]
            let trendType = 'trend-neutral'
            let displayValue = trendValue

            // 处理趋势值为"--"的情况
            if (trendValue === '--') {
              trendType = 'trend-neutral'
              displayValue = '--'
            } else {
              // 正常数值处理
              const value = parseFloat(trendValue)
              if (trendDirection === '上升') {
                trendType = 'trend-up'
                displayValue = '+' + trendValue
              } else if (trendDirection === '下降') {
                trendType = 'trend-down'
                displayValue = '-' + trendValue
              } else if (trendDirection === '持平') {
                trendType = 'trend-neutral'
                displayValue = trendValue
              }
            }

            this.dailyTask.chainRatioTrend = trendType
            this.dailyTask.chainRatio = displayValue + '%'
          }
        }
      })
    },

    // 初始化所有图表
    initCharts() {
      this.initPlanScheduleChart()
      this.initProblemDiscoveryChart()
      this.initProblemDistributionChart()
      this.initProblemRectificationChart()
    },

    // 销毁所有图表
    disposeCharts() {
      if (this.planScheduleChart) {
        this.planScheduleChart.dispose()
        this.planScheduleChart = null
      }
      if (this.problemDiscoveryChart) {
        this.problemDiscoveryChart.dispose()
        this.problemDiscoveryChart = null
      }
      if (this.problemDistributionChart) {
        this.problemDistributionChart.dispose()
        this.problemDistributionChart = null
      }
      if (this.problemRectificationChart) {
        this.problemRectificationChart.dispose()
        this.problemRectificationChart = null
      }
    },

    // 创建ECharts实例（适配uni-app环境）
    createEChartsInstance(chartRef, options) {
      if (!chartRef) return null

      // 获取DOM元素
      const chartDom = chartRef.$el || chartRef
      if (!chartDom) return null

      // 创建ECharts实例
      const chartInstance = echarts.init(chartDom)

      // 设置初始选项
      if (options) {
        chartInstance.setOption(options)
      }

      return chartInstance
    },

    // 初始化任务计划安排图表（柱状图）
    initPlanScheduleChart() {
      const options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            let result = `${params[0].axisValue}<br/>`
            params.forEach(param => {
              result += `${param.seriesName}: <span style="color:${param.color};font-weight:bold">${param.data}</span>次<br/>`
            })
            return result
          }
        },
        legend: {
          data: ['专项任务', '日常任务']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          name: '次数',
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0'
            }
          }
        },
        series: [
          {
            name: '专项任务',
            type: 'bar',
            barWidth: '20%',
            itemStyle: {
              color: '#1890ff'
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{c}次'
            },
            data: []
          },
          {
            name: '日常任务',
            type: 'bar',
            barWidth: '20%',
            itemStyle: {
              color: '#52c41a'
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{c}次'
            },
            data: []
          }
        ]
      }

      this.planScheduleChart = this.createEChartsInstance(this.$refs.planScheduleChartRef, options)
    },

    // 初始化问题发现统计图表
    initProblemDiscoveryChart() {
      const options = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['问题数量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value',
          name: '问题数量',
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            fontSize: 12,
            margin: 8
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0'
            }
          }
        },
        series: [
          {
            name: '问题数量',
            type: 'line',
            smooth: true,
            data: [],
            itemStyle: {
              color: '#fa541c'
            }
          },

        ]
      }

      this.problemDiscoveryChart = this.createEChartsInstance(this.$refs.problemDiscoveryChartRef, options)
    },

    // 初始化问题分布统计图表
    initProblemDistributionChart() {
      const options = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'top',
          show: false
        },
        series: [
          {
            name: '问题分布',
            type: 'pie',
            radius: '50%',
            data: [],
            label: {
              show: true,
              formatter: '{b}: {c}个',
              fontSize: 12
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      this.problemDistributionChart = this.createEChartsInstance(this.$refs.problemDistributionChartRef, options)
    },

    // 初始化问题整改统计图表
    initProblemRectificationChart() {
      const options = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['按期已完成', '超期已完成', '按期整改中', '超期整改中', '其他'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '40%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            rotate: 45, // 倾斜45度
            interval: 0, // 显示所有标签
            fontSize: 12,
            margin: 10
          }
        },
        yAxis: {
          type: 'value',
          name: '问题数量',
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0'
            }
          }
        },
        series: [
          {
            name: '按期已完成',
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              color: '#4ECDC4'
            },
            label: {
              show: false,
              position: 'top',
              formatter: '{c}个'
            },
            data: []
          },
          {
            name: '超期已完成',
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              color: '#FF6B6B'
            },
            label: {
              show: false,
              position: 'top',
              formatter: '{c}个'
            },
            data: []
          },
          {
            name: '按期整改中',
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              color: '#FFD166'
            },
            label: {
              show: false,
              position: 'top',
              formatter: '{c}个'
            },
            data: []
          },
          {
            name: '超期整改中',
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              color: '#9B59B6'
            },
            label: {
              show: false,
              position: 'top',
              formatter: '{c}个'
            },
            data: []
          },
          {
            name: '其他',
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              color: '#95A5A6'
            },
            label: {
              show: false,
              position: 'top',
              formatter: '{c}个'
            },
            data: []
          }
        ]
      }

      this.problemRectificationChart = this.createEChartsInstance(this.$refs.problemRectificationChartRef, options)
    },

    // 加载数据
    async loadData() {
      if (this.loading) return

      this.loading = true
      try {
        let params = {
          ...this.queryForm,
          userId: this.queryForm.scopedType == 'USER' ? this.queryForm.scopedId : "",
          deptId: ["DEPARTMENT", "TEAMS", "MANAGER", "BRIGADE"].includes(this.queryForm.scopedType) ? this.queryForm.scopedId : ""
        }



        // 加载质控活动分析数据
        const analysisResponse = await getAnalysisReport(params)

        if (analysisResponse.code === 200) {
          // 解构赋值API返回的数据
          const { checkTaskDto, checkProblemDiscoveryDto, checkProblemDistributionDto, checkProblemCorrectionDto } = analysisResponse.data || {}

          // 赋值到响应式数据
          this.checkTask = checkTaskDto || {}
          this.checkProblemDiscovery = checkProblemDiscoveryDto || {}
          this.checkProblemDistribution = checkProblemDistributionDto || {}
          this.checkProblemCorrection = checkProblemCorrectionDto || {}

          // 如果checkTaskDto中有desc字段，解析并更新任务数据
          if (checkTaskDto && checkTaskDto.desc) {
            this.parseTaskData(checkTaskDto.desc)
          }

          // 更新图表和统计信息
          this.updateChartsWithData()
        }

        // 检查是否为团队或用户类型
        this.checkDeptType()

      } catch (error) {
        console.error('加载质控活动数据失败:', error)

      } finally {
        this.loading = false
      }
    },

    // 处理分析数据（已废弃，使用真实API数据）
    processAnalysisData(data) {
      // 此方法已不再使用，保留以兼容旧代码
    },

    // 处理分类数据（已废弃，使用真实API数据）
    processCategoryData(data) {
      // 此方法已不再使用，保留以兼容旧代码
    },

    // 检查部门类型（已废弃，使用computed属性替代）
    checkDeptType() {
      // 此方法已废弃，角色判断现在通过computed属性实现
    },



    // 更新任务计划安排图表数据
    updatePlanScheduleChart() {
      if (this.checkTask && this.checkTask.checkTaskItemDtoList && this.planScheduleChart) {
        const taskList = this.checkTask.checkTaskItemDtoList

        // 提取横坐标数据（desc字段）
        const xAxisData = [...new Set(taskList.map(item => item.desc))]

        // 提取专项任务数据
        const specialTaskData = taskList.filter(item => item.typeDesc === '专项任务').map(item => item.count)

        // 提取日常任务数据
        const dailyTaskData = taskList.filter(item => item.typeDesc === '日常任务').map(item => item.count)

        // 更新图表配置
        const newOptions = {
          xAxis: {
            data: xAxisData
          },
          series: [
            {
              data: specialTaskData
            },
            {
              data: dailyTaskData
            }
          ]
        }

        this.planScheduleChart.setOption(newOptions)
      }
    },

    // 更新问题发现统计图表数据
    updateProblemDiscoveryChart() {
      if (this.checkProblemDiscovery && this.checkProblemDiscovery.checkProblemDiscoveryItemDtoList && this.problemDiscoveryChart) {
        const discoveryList = this.checkProblemDiscovery.checkProblemDiscoveryItemDtoList

        // 提取横坐标数据（desc或name字段）
        const xAxisData = discoveryList.map(item => item.desc || item.name)

        // 提取问题数量数据
        const problemData = discoveryList.map(item => item.count || 0)

        // 更新图表配置
        const newOptions = {
          xAxis: {
            data: xAxisData
          },
          series: [
            {
              data: problemData
            }
          ]
        }

        this.problemDiscoveryChart.setOption(newOptions)
      }
    },

    // 更新问题分布统计图表数据
    updateProblemDistributionChart() {
      if (this.checkProblemDistribution && this.checkProblemDistribution.checkProblemDistributionItemDtoList && this.problemDistributionChart) {
        const distributionList = this.checkProblemDistribution.checkProblemDistributionItemDtoList

        // 提取饼图数据
        const pieData = distributionList.map(item => ({
          value: item.total || 0,
          name: item.desc || item.name
        }))

        // 更新图表配置
        const newOptions = {
          series: [
            {
              data: pieData
            }
          ]
        }

        this.problemDistributionChart.setOption(newOptions)
      }
    },

    // 更新问题整改统计图表数据
    updateProblemRectificationChart() {
      if (this.checkProblemCorrection && this.checkProblemCorrection.checkProblemCorrectionItemDtoList && this.problemRectificationChart) {
        const rectificationList = this.checkProblemCorrection.checkProblemCorrectionItemDtoList

        // 提取横坐标数据（主管名称）
        const xAxisData = rectificationList.map(item => item.deptName || '未知主管')

        // 提取各个数据系列
        const onTimeCompletedData = rectificationList.map(item => item.onTimeCompletedCount || 0)
        const overTimeCompletedData = rectificationList.map(item => item.overTimeCompletedCount || 0)
        const onTimeUnfinishedData = rectificationList.map(item => item.onTimeUnfinishedCount || 0)
        const overTimeUnfinishedData = rectificationList.map(item => item.overTimeUnfinishedCount || 0)
        const otherData = rectificationList.map(item => item.otherCount || 0)

        // 更新图表配置
        const newOptions = {
          xAxis: {
            data: xAxisData
          },
          series: [
            {
              data: onTimeCompletedData
            },
            {
              data: overTimeCompletedData
            },
            {
              data: onTimeUnfinishedData
            },
            {
              data: overTimeUnfinishedData
            },
            {
              data: otherData
            }
          ]
        }

        this.problemRectificationChart.setOption(newOptions)
      }
    },

    // 根据实际数据更新图表
    updateChartsWithData() {
      // 更新任务计划安排图表
      this.updatePlanScheduleChart()

      // 更新问题发现统计图表
      this.updateProblemDiscoveryChart()

      // 更新问题分布统计图表
      this.updateProblemDistributionChart()

      // 更新问题整改统计图表
      this.updateProblemRectificationChart()
    }
  }
}
</script>

<style lang="scss" scoped>
.quality-control {
  // padding: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
}

.section-title {
  margin-bottom: 24rpx;

  .title-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

.task-planning,
.problem-discovery,
.problem-distribution,
.problem-rectification {
  border: 1px solid #e8e8e8;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 32rpx;
}

.planning-header,
.discovery-header,
.distribution-header,
.rectification-header {
  margin-bottom: 16rpx;

  .header-text {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
  }
}

.stat-cards {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.stat-card {
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
  flex: 1;

  .stat-title {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 12rpx;
  }

  .stat-count {
    display: flex;
    align-items: baseline;
    margin-bottom: 12rpx;

    .count-number {
      font-size: 32rpx;
      font-weight: bold;
      color: #1890ff;
      margin-right: 8rpx;
    }

    .count-unit {
      font-size: 24rpx;
      color: #999;
    }
  }

  .stat-trend {
    font-size: 24rpx;
    color: #666;

    .trend-up {
      color: #f5222d;
    }

    .trend-down {
      color: #52c41a;
    }

    .trend-neutral {
      color: #999;
    }
  }
}

.describe-card {
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;

  .describe-content {
    font-size: 26rpx;
    line-height: 1.5;
    color: #666;
  }
}

.chart-container {
  // background: #f8f9fa;
  border-radius: 12rpx;
  // padding: 40rpx 20rpx;
  text-align: center;
  height: 400rpx;

  .echarts-chart {
    width: 100% !important;
    height: 100% !important;
    min-height: 400rpx;
    display: block;
  }

  .chart-placeholder {
    .placeholder-text {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.trend-up {
  color: #f5222d;
}

.trend-down {
  color: #52c41a;
}

.trend-neutral {
  color: #999;
}
</style>