<template>
    <div>
        <div class="header-container">
        <div class="title-wrapper">
            <div class="title-bar"></div>
            <h3 class="title-text">本次评分</h3>
        </div>
    </div>
    <Row>
        <Col span="8">
            <Card style="width:90%;">
                <div class="statistics-bar-top-i" @click="toPage('/special/peopleInfo3')">
                <div class="i-top">严重精神病患者</div>
                <div class="i-center-i">{{ scoreData.mentalPatient.total }}人</div>
                </div>
                <div style="width: 100%;height: 300px; margin-top: 20px;" ref="main" >
                    <div style="width: 100%;height: 100%; margin-top: 20px;" id="pie1"></div>
                </div>
            </Card>
        </Col>
        <Col span="8">
            <Card style="width:90%">
         <div class="statistics-bar-top-ii" @click="toPage('/special/personMinor')">
          <div class="i-top-ii">重点未成年人</div>
          <div class="i-center-ii">{{ scoreData.minors.total }}人</div>
        </div>
        <div style="width: 100%;height: 300px; margin-top: 20px;" ref="main" >
            <div style="width: 100%;height: 100%; margin-top: 20px;" id="pie2"></div>
        </div>
        </Card>
        </Col>
        <Col span="8">
            <Card style="width:90%">
        <div class="statistics-bar-top-iii" @click="toPage('/special/peopleInfo2')">
          <div class="i-top-iii">刑满释放人员</div>
          <div class="i-center-iii">{{ scoreData.released.total }}人</div>
        </div>
        <div style="width: 100%;height: 300px; margin-top: 20px;" ref="main" >
             <div style="width: 100%;height: 100%; margin-top: 20px;" id="pie3"></div>
        </div>
        </Card>
        </Col>
    </Row>
    <div class="header-container">
        <div class="title-wrapper">
            <div class="title-bar"></div>
            <h3 class="title-text">回访临期预警</h3>
        </div>
    </div>
    <div>
        <Card>
            <Row>
                <Col span="3">
                  <div>
                    <div class="flexc" style="padding-left: 16px;">
                      <div class="dot-css1"></div>
                      <div style="margin-left: 10px;">
                        <h3 style="font-size: 14px;">回访计划总数</h3>
                      </div>
                    </div>
                      <h3 style="font-weight: bold; font-size: 24px; margin-left: 40px;">{{ overdueWarningData.summary.total }}</h3>
                  </div>
                </Col>
                <Col span="3">
                 <div>
                    <div class="flexc" style="padding-left: 16px;">
                      <div class="dot-css1"></div>
                      <div style="margin-left: 10px;">
                        <h3 style="font-size: 14px;">已办数量</h3>
                      </div>
                    </div>
                      <h3 style="font-weight: bold; font-size: 24px; margin-left: 30px;">{{ overdueWarningData.summary.completed }}</h3>
                  </div>
                </Col>
                <Col span="3">
                 <div>
                    <div class="flexc" style="padding-left: 16px;">
                      <div class="dot-css1"></div>
                      <div style="margin-left: 10px;">
                        <h3 style="font-size: 14px;">正常待办数量</h3>
                      </div>
                    </div>
                      <h3 style="font-weight: bold; font-size: 24px; margin-left: 30px;">{{ overdueWarningData.summary.uncompleted }}</h3>
                  </div>
                </Col>
                <Col span="3">
                 <div>
                    <div class="flexc" style="padding-left: 16px;">
                      <div class="dot-css1"></div>
                      <div style="margin-left: 10px;">
                        <h3 style="font-size: 14px;">临期待办数量</h3>
                      </div>
                    </div>
                      <h3 style="font-weight: bold; font-size: 24px; margin-left: 30px;">{{ overdueWarningData.summary.nearOverdue }}</h3>
                  </div>
                </Col>
                <Col span="3">
                 <div>
                    <div class="flexc" style="padding-left: 16px;">
                      <div class="dot-css1"></div>
                      <div style="margin-left: 10px;">
                        <h3 style="font-size: 14px;">超期未办数量</h3>
                      </div>
                    </div>
                      <h3 style="font-weight: bold; font-size: 24px; margin-left: 30px;">{{ overdueWarningData.summary.overdue }}</h3>
                  </div>
                </Col>
            </Row>
            <Row>
                <Col span="8">
                    <div class="statistics-bar-top-i">
                        <div class="i-top">严重精神病患者</div>
                        <div class="i-center-i">{{ overdueWarningData.mentalPatient.total }}人</div>
                        <div>
                            <Row>
                                <Col span="12">
                                  <div style="margin-left: 20px; cursor: pointer;" @click="toVisitRecord('psmd', 'completed')">已办：{{ overdueWarningData.mentalPatient.completed }}</div>
                                </Col>
                                <Col span="12">
                                  <div style="cursor: pointer;" @click="toVisitRecord('psmd', 'uncompleted')">正常待办：{{ overdueWarningData.mentalPatient.uncompleted }}</div>
                                </Col>
                            </Row>
                            <Row style="margin-top: 8px;">
                                <Col span="12">
                                  <div style="margin-left: 20px; cursor: pointer;" @click="toVisitRecord('psmd', 'nearOverdue')">临期待办：{{ overdueWarningData.mentalPatient.nearOverdue }}</div>
                                </Col>
                                <Col span="12">
                                  <div style="cursor: pointer;" @click="toVisitRecord('psmd', 'overdue')">超期未办：{{ overdueWarningData.mentalPatient.overdue }}</div>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </Col>
                <Col span="8">
                    <div class="statistics-bar-top-iii">
                        <div class="i-top-iii">刑满释放人员</div>
                        <div class="i-center-iii">{{ overdueWarningData.released.total }}人</div>
                        <div>
                            <Row>
                                <Col span="12">
                                  <div style="margin-left: 20px; cursor: pointer;" @click="toVisitRecord('rucs', 'completed')">已办：{{ overdueWarningData.released.completed }}</div>
                                </Col>
                                <Col span="12">
                                  <div style="cursor: pointer;" @click="toVisitRecord('rucs', 'uncompleted')">正常待办：{{ overdueWarningData.released.uncompleted }}</div>
                                </Col>
                            </Row>
                            <Row style="margin-top: 8px;">
                                <Col span="12">
                                  <div style="margin-left: 20px; cursor: pointer;" @click="toVisitRecord('rucs', 'nearOverdue')">临期待办：{{ overdueWarningData.released.nearOverdue }}</div>
                                </Col>
                                <Col span="12">
                                  <div style="cursor: pointer;" @click="toVisitRecord('rucs', 'overdue')">超期未办：{{ overdueWarningData.released.overdue }}</div>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </Col>
                <Col span="8">
                    <div class="statistics-bar-top-ii">
                        <div class="i-top-ii">重点未成年人</div>
                        <div class="i-center-ii">{{ overdueWarningData.minors.total }}人</div>
                        <div>
                            <Row>
                                <Col span="12">
                                  <div style="margin-left: 20px; cursor: pointer;" @click="toVisitRecord('km', 'completed')">已办：{{ overdueWarningData.minors.completed }}</div>
                                </Col>
                                <Col span="12">
                                  <div style="cursor: pointer;" @click="toVisitRecord('km', 'uncompleted')">正常待办：{{ overdueWarningData.minors.uncompleted }}</div>
                                </Col>
                            </Row>
                            <Row style="margin-top: 8px;">
                                <Col span="12">
                                  <div style="margin-left: 20px; cursor: pointer;" @click="toVisitRecord('km', 'nearOverdue')">临期待办：{{ overdueWarningData.minors.nearOverdue }}</div>
                                </Col>
                                <Col span="12">
                                  <div style="cursor: pointer;" @click="toVisitRecord('km', 'overdue')">超期未办：{{ overdueWarningData.minors.overdue }}</div>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </Col>
            </Row>
        </Card>
    </div>
    <div class="header-container">
        <div class="title-wrapper">
            <div class="title-bar"></div>
            <h3 class="title-text">评分临期预警</h3>
        </div>
    </div>
    <div>
        <Card>
            <Row>
                <Col span="3">
                  <div>
                    <div class="flexc" style="padding-left: 16px;">
                      <div class="dot-css"></div>
                      <div style="margin-left: 10px;">
                        <h3 style="font-size: 14px;">评分总数</h3>
                      </div>
                    </div>
                      <h3 style="font-weight: bold; font-size: 24px; margin-left: 40px;">{{ ratingWarningData.summary.total }}</h3>
                  </div>
                </Col>
                <Col span="3">
                 <div>
                    <div class="flexc" style="padding-left: 16px;">
                      <div class="dot-css"></div>
                      <div style="margin-left: 10px;">
                        <h3 style="font-size: 14px;">已评数量</h3>
                      </div>
                    </div>
                      <h3 style="font-weight: bold; font-size: 24px; margin-left: 30px;">{{ ratingWarningData.summary.completed }}</h3>
                  </div>
                </Col>
                <Col span="3">
                 <div>
                    <div class="flexc" style="padding-left: 16px;">
                      <div class="dot-css"></div>
                      <div style="margin-left: 10px;">
                        <h3 style="font-size: 14px;">正常待评数量</h3>
                      </div>
                    </div>
                      <h3 style="font-weight: bold; font-size: 24px; margin-left: 30px;">{{ ratingWarningData.summary.uncompleted }}</h3>
                  </div>
                </Col>
                <Col span="3">
                 <div>
                    <div class="flexc" style="padding-left: 16px;">
                      <div class="dot-css"></div>
                      <div style="margin-left: 10px;">
                        <h3 style="font-size: 14px;">临期待评数量</h3>
                      </div>
                    </div>
                      <h3 style="font-weight: bold; font-size: 24px; margin-left: 30px;">{{ ratingWarningData.summary.nearOverdue }}</h3>
                  </div>
                </Col>
                <Col span="3">
                 <div>
                    <div class="flexc" style="padding-left: 16px;">
                      <div class="dot-css"></div>
                      <div style="margin-left: 10px;">
                        <h3 style="font-size: 14px;">超期未评数量</h3>
                      </div>
                    </div>
                      <h3 style="font-weight: bold; font-size: 24px; margin-left: 30px;">{{ ratingWarningData.summary.overdue }}</h3>
                  </div>
                </Col>
            </Row>
            <Row>
                <Col span="8">
                    <div class="statistics-bar-top-i">
                        <div class="i-top">严重精神病患者</div>
                        <div class="i-center-i">{{ ratingWarningData.mentalPatient.total }}人</div>
                        <div>
                            <Row>
                                <Col span="12">
                                  <div style="margin-left: 20px; cursor: pointer;" @click="toRatingPage('/special/peopleInfo3', 'completed')">已评：{{ ratingWarningData.mentalPatient.completed }}</div>
                                </Col>
                                <Col span="12">
                                  <div style="cursor: pointer;" @click="toRatingPage('/special/peopleInfo3', 'uncompleted')">正常待评：{{ ratingWarningData.mentalPatient.uncompleted }}</div>
                                </Col>
                            </Row>
                            <Row style="margin-top: 8px;">
                                <Col span="12">
                                  <div style="margin-left: 20px; cursor: pointer;" @click="toRatingPage('/special/peopleInfo3', 'nearOverdue')">临期待评：{{ ratingWarningData.mentalPatient.nearOverdue }}</div>
                                </Col>
                                <Col span="12">
                                  <div style="cursor: pointer;" @click="toRatingPage('/special/peopleInfo3', 'overdue')">超期未评：{{ ratingWarningData.mentalPatient.overdue }}</div>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </Col>
                <Col span="8">
                    <div class="statistics-bar-top-iii">
                        <div class="i-top-iii">刑满释放人员</div>
                        <div class="i-center-iii">{{ ratingWarningData.released.total }}人</div>
                        <div>
                            <Row>
                                <Col span="12">
                                  <div style="margin-left: 20px; cursor: pointer;" @click="toRatingPage('/special/peopleInfo2', 'completed')">已评：{{ ratingWarningData.released.completed }}</div>
                                </Col>
                                <Col span="12">
                                  <div style="cursor: pointer;" @click="toRatingPage('/special/peopleInfo2', 'uncompleted')">正常待评：{{ ratingWarningData.released.uncompleted }}</div>
                                </Col>
                            </Row>
                            <Row style="margin-top: 8px;">
                                <Col span="12">
                                  <div style="margin-left: 20px; cursor: pointer;" @click="toRatingPage('/special/peopleInfo2', 'nearOverdue')">临期待评：{{ ratingWarningData.released.nearOverdue }}</div>
                                </Col>
                                <Col span="12">
                                  <div style="cursor: pointer;" @click="toRatingPage('/special/peopleInfo2', 'overdue')">超期未评：{{ ratingWarningData.released.overdue }}</div>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </Col>
                <Col span="8">
                    <div class="statistics-bar-top-ii">
                        <div class="i-top-ii">重点未成年人</div>
                        <div class="i-center-ii">{{ ratingWarningData.minors.total }}人</div>
                        <div>
                            <Row>
                                <Col span="12">
                                  <div style="margin-left: 20px; cursor: pointer;" @click="toRatingPage('/special/personMinor', 'completed')">已评：{{ ratingWarningData.minors.completed }}</div>
                                </Col>
                                <Col span="12">
                                  <div style="cursor: pointer;" @click="toRatingPage('/special/personMinor', 'uncompleted')">正常待评：{{ ratingWarningData.minors.uncompleted }}</div>
                                </Col>
                            </Row>
                            <Row style="margin-top: 8px;">
                                <Col span="12">
                                  <div style="margin-left: 20px; cursor: pointer;" @click="toRatingPage('/special/personMinor', 'nearOverdue')">临期待评：{{ ratingWarningData.minors.nearOverdue }}</div>
                                </Col>
                                <Col span="12">
                                  <div style="cursor: pointer;" @click="toRatingPage('/special/personMinor', 'overdue')">超期未评：{{ ratingWarningData.minors.overdue }}</div>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </Col>
            </Row>
        </Card>
    </div>
    <!-- <div class="statistics-bar-top"></div> -->
    </div>
</template>

<script>
import { getScoreStatistics, getOverdueWarningStatistics, getRatingStatistics } from '@/api/key-person'
export default {
  data () {
    return {
      width: '',
      width1: '',
      width2: '',
      myChart: null,
      statusChartPie: null,
      statusChartPie1: null,
      statusChartPie2: null,
      datas: [
        /// /////////////////////////////////////
        [
          { name: 'A类', value: 0, num: 0 },
          { name: 'B类', value: 0, num: 0 },
          { name: 'C类', value: 0, num: 0 }
        ]
      ],
      // 本次评分数据
      scoreData: {
        mentalPatient: { total: 0, categories: [] },
        minors: { total: 0, categories: [] },
        released: { total: 0, categories: [] }
      },
      // 临期预警数据
      overdueWarningData: {
        summary: {
          total: 0,
          completed: 0,
          uncompleted: 0,
          nearOverdue: 0,
          overdue: 0
        },
        mentalPatient: {
          total: 0,
          completed: 0,
          uncompleted: 0,
          nearOverdue: 0,
          overdue: 0
        },
        released: {
          total: 0,
          completed: 0,
          uncompleted: 0,
          nearOverdue: 0,
          overdue: 0
        },
        minors: {
          total: 0,
          completed: 0,
          uncompleted: 0,
          nearOverdue: 0,
          overdue: 0
        }
      },
      // 评分临期预警数据
      ratingWarningData: {
        summary: {
          total: 0,
          completed: 0,
          uncompleted: 0,
          nearOverdue: 0,
          overdue: 0
        },
        mentalPatient: {
          total: 0,
          completed: 0,
          uncompleted: 0,
          nearOverdue: 0,
          overdue: 0
        },
        released: {
          total: 0,
          completed: 0,
          uncompleted: 0,
          nearOverdue: 0,
          overdue: 0
        },
        minors: {
          total: 0,
          completed: 0,
          uncompleted: 0,
          nearOverdue: 0,
          overdue: 0
        }
      }
    }
  },
  methods: {
    // 获取本次评分统计数据
    getScoreStatisticsData () {
      getScoreStatistics().then(ret => {
        if (ret.data.errcode === 0) {
          // 只有在成功获取数据时才更新
          this.scoreData = ret.data.data
          // 更新数据后重新渲染图表
          this.$nextTick(() => {
            this.getPie1()
            this.getPie2()
            this.getPie3()
          })
        } else {
          // 请求失败，显示错误提示，保持初始数据不变
          this.$Message.error(ret.data.errmsg || '获取数据失败')
        }
      }).catch(err => {
        // 网络错误或其他异常，显示错误提示，保持初始数据不变
        console.error('获取评分统计数据失败:', err)
        this.$Message.error('获取数据失败，请稍后重试')
      })
    },
    // 获取临期预警统计数据
    getOverdueWarningData () {
      getOverdueWarningStatistics().then(ret => {
        if (ret.data.errcode === 0) {
          // 只有在成功获取数据时才更新
          this.overdueWarningData = ret.data.data
        } else {
          // 请求失败，显示错误提示，保持初始数据不变
          this.$Message.error(ret.data.errmsg || '获取临期预警数据失败')
        }
      }).catch(err => {
        // 网络错误或其他异常，显示错误提示，保持初始数据不变
        console.error('获取临期预警数据失败:', err)
        this.$Message.error('获取临期预警数据失败，请稍后重试')
      })
    },
    // 获取评分临期预警统计数据
    getRatingWarningData () {
      getRatingStatistics().then(ret => {
        if (ret.data.errcode === 0) {
          // 只有在成功获取数据时才更新
          this.ratingWarningData = ret.data.data
        } else {
          // 请求失败，显示错误提示，保持初始数据不变
          this.$Message.error(ret.data.errmsg || '获取评分临期预警数据失败')
        }
      }).catch(err => {
        // 网络错误或其他异常，显示错误提示，保持初始数据不变
        console.error('获取评分临期预警数据失败:', err)
        this.$Message.error('获取评分临期预警数据失败，请稍后重试')
      })
    },
    getPie1 () {
      // 基于准备好的dom，初始化echarts实例
      this.width = this.$refs.main.offsetWidth
      this.statusChartPie = this.$echarts.init(document.getElementById('pie1'))

      // 使用接口返回的数据
      const chartData = this.scoreData.mentalPatient.categories.length > 0
        ? [this.scoreData.mentalPatient.categories]
        : this.datas

      // 指定图表的配置项和数据
      var option = {
        legend: {
          top: 'bottom'
        },
        title: {
        //   text: '阅读书籍分布',
        //   left: 'center',
        //   textStyle: {
        //     color: '#999',
        //     fontWeight: 'normal',
        //     fontSize: 14
        //   }
        },
        color: ['#ff9c9c', '#ffe757', '#65c1ff'],
        series: chartData.map(function (data, idx) {
          var top = idx * 33.3
          console.log('data', data)
          return {
            type: 'pie',
            radius: [60, 90],
            top: top + '%',
            height: '100%',
            left: 'center',
            width: 120 + '%',
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}\n{num|{c} 人}\n{count|占比{d}%}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                name: {
                  fontSize: 15,
                  color: '#6b7399'
                },
                count: {
                  fontSize: 13,
                  color: '#a3a9bf'
                },
                num: {
                  fontSize: 13,
                  color: '#a3a9bf'
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 2
              const points = params.labelLinePoints
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width
              return {
                labelLinePoints: points
              }
            },
            data: data
          }
        })
      }
      // 使用刚指定的配置项和数据显示图表。
      this.statusChartPie.setOption(option)

      // 添加点击事件
      this.statusChartPie.off('click') // 先移除之前的点击事件
      this.statusChartPie.on('click', (params) => {
        // 点击图表时跳转到列表页,并传递风险等级参数
        // A类、B类、C类对应的风险等级值需要根据实际业务确定
        let riskLevel = ''
        if (params.name === 'A类') {
          riskLevel = 'A'
        } else if (params.name === 'B类') {
          riskLevel = 'B'
        } else if (params.name === 'C类') {
          riskLevel = 'C'
        }

        // 跳转到列表页并传递参数
        this.$router.push({
          path: '/special/peopleInfo3',
          query: {
            riskLevel: riskLevel
          }
        })
      })
    },
    getPie2 () {
      // 基于准备好的dom，初始化echarts实例
      this.width1 = this.$refs.main.offsetWidth
      this.statusChartPie1 = this.$echarts.init(document.getElementById('pie2'))

      // 使用接口返回的数据
      const chartData = this.scoreData.minors.categories.length > 0
        ? [this.scoreData.minors.categories]
        : this.datas

      // 指定图表的配置项和数据
      var option = {
        legend: {
          top: 'bottom'
        },
        title: {
        //   text: '阅读书籍分布',
        //   left: 'center',
        //   textStyle: {
        //     color: '#999',
        //     fontWeight: 'normal',
        //     fontSize: 14
        //   }
        },
        color: ['#ff9c9c', '#ffe757', '#65c1ff'],
        series: chartData.map(function (data, idx) {
          var top = idx * 33.3
          console.log('data', data)
          return {
            type: 'pie',
            radius: [60, 90],
            top: top + '%',
            height: '100%',
            left: 'center',
            width: 120 + '%',
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}\n{num|{c} 人}\n{count|占比{d}%}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                name: {
                  fontSize: 15,
                  color: '#6b7399'
                },
                count: {
                  fontSize: 13,
                  color: '#a3a9bf'
                },
                num: {
                  fontSize: 13,
                  color: '#a3a9bf'
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 2
              const points = params.labelLinePoints
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width
              return {
                labelLinePoints: points
              }
            },
            data: data
          }
        })
      }
      // 使用刚指定的配置项和数据显示图表。
      this.statusChartPie1.setOption(option)

      // 添加点击事件
      this.statusChartPie1.off('click') // 先移除之前的点击事件
      this.statusChartPie1.on('click', (params) => {
        // 点击图表时跳转到列表页,并传递风险等级参数
        // A类、B类、C类对应的风险等级值需要根据实际业务确定
        let riskLevel = ''
        if (params.name === 'A类') {
          riskLevel = 'A'
        } else if (params.name === 'B类') {
          riskLevel = 'B'
        } else if (params.name === 'C类') {
          riskLevel = 'C'
        }

        // 跳转到列表页并传递参数
        this.$router.push({
          path: '/special/personMinor',
          query: {
            riskLevel: riskLevel
          }
        })
      })
    },
    getPie3 () {
      // 基于准备好的dom，初始化echarts实例
      this.width2 = this.$refs.main.offsetWidth
      this.statusChartPie2 = this.$echarts.init(document.getElementById('pie3'))

      // 使用接口返回的数据
      const chartData = this.scoreData.released.categories.length > 0
        ? [this.scoreData.released.categories]
        : this.datas

      // 指定图表的配置项和数据
      var option = {
        legend: {
          top: 'bottom'
        },
        title: {
        //   text: '阅读书籍分布',
        //   left: 'center',
        //   textStyle: {
        //     color: '#999',
        //     fontWeight: 'normal',
        //     fontSize: 14
        //   }
        },
        color: ['#ff9c9c', '#ffe757', '#65c1ff'],
        series: chartData.map(function (data, idx) {
          var top = idx * 33.3
          console.log('data', data)
          return {
            type: 'pie',
            radius: [60, 90],
            top: top + '%',
            height: '100%',
            left: 'center',
            width: 120 + '%',
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}\n{num|{c} 人}\n{count|占比{d}%}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                name: {
                  fontSize: 15,
                  color: '#6b7399'
                },
                count: {
                  fontSize: 13,
                  color: '#a3a9bf'
                },
                num: {
                  fontSize: 13,
                  color: '#a3a9bf'
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 2
              const points = params.labelLinePoints
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width
              return {
                labelLinePoints: points
              }
            },
            data: data
          }
        })
      }
      // 使用刚指定的配置项和数据显示图表。
      this.statusChartPie2.setOption(option)

      // 添加点击事件
      this.statusChartPie2.off('click') // 先移除之前的点击事件
      this.statusChartPie2.on('click', (params) => {
        // 点击图表时跳转到列表页,并传递风险等级参数
        // A类、B类、C类对应的风险等级值需要根据实际业务确定
        let riskLevel = ''
        if (params.name === 'A类') {
          riskLevel = 'A'
        } else if (params.name === 'B类') {
          riskLevel = 'B'
        } else if (params.name === 'C类') {
          riskLevel = 'C'
        }

        // 跳转到列表页并传递参数
        this.$router.push({
          path: '/special/peopleInfo2',
          query: {
            riskLevel: riskLevel
          }
        })
      })
    },
    toPage (path) {
      this.$router.push(path)
    },
    toPageWithRatingStatus (path) {
      // 跳转到列表页面并传递评分状态为待评(0)
      this.$router.push({
        path: path,
        query: {
          doStatus: '0' // 待评
        }
      })
    },
    toVisitRecord (personType, statusType) {
      // 根据人员类型确定路由路径
      const routeMap = {
        'rucs': '/keyPerson/keyPersonVisitRecordRucs', // 刑满释放人员
        'psmd': '/keyPerson/keyPersonVisitRecordPsmd', // 严重精神障碍患者
        'km': '/keyPerson/keyPersonVisitRecordKm' // 重点未成年人
      }

      // 根据状态类型确定查询参数
      let query = {}
      switch (statusType) {
        case 'completed':
          // 已办：do_status=1
          query = { do_status: '1' }
          break
        case 'uncompleted':
          // 待办：do_status=0
          query = { do_status: '0' }
          break
        case 'nearOverdue':
          // 临期待办：do_status=0&is_overdue=1
          query = { do_status: '0', is_overdue: '1' }
          break
        case 'overdue':
          // 超期未办：do_status=2
          query = { do_status: '2' }
          break
      }

      // 跳转到对应页面
      this.$router.push({
        path: routeMap[personType],
        query: query
      })
    },
    toRatingPage (path, statusType) {
      // 根据状态类型确定查询参数（评分页面使用doStatus参数）
      let query = {}
      switch (statusType) {
        case 'completed':
          // 已办：doStatus=1
          query = { doStatus: '1' }
          break
        case 'uncompleted':
          // 待办：doStatus=0
          query = { doStatus: '0', isOverdue: '0' }
          break
        case 'nearOverdue':
          // 临期待办：doStatus=0&isOverdue=1
          query = { doStatus: '0', isOverdue: '1' }
          break
        case 'overdue':
          // 超期未办：doStatus=2
          query = { doStatus: '2' }
          break
      }

      // 跳转到评分列表页面
      this.$router.push({
        path: path,
        query: query
      })
    }
  },
  mounted () {
    // this.severUserInfo = this.$store.state.user.severUserInfo
    // 先渲染初始图表（显示0数据）
    this.$nextTick(() => {
      this.getPie1()
      this.getPie2()
      this.getPie3()
    })
    // 然后请求数据，成功后会自动更新
    this.getScoreStatisticsData()
    // 获取临期预警数据
    this.getOverdueWarningData()
    // 获取评分临期预警数据
    this.getRatingWarningData()
  }
}
</script>

<style scoped>
.header-container {
  margin-bottom: 16px; /* 可选：调整与下方内容的间距 */
  margin-top: 10px;
}

.flexc {
  display: flex;
  align-content: center;
  align-self: center;
  align-items: center;
}

.title-wrapper {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.title-bar {
  width: 4px;
  height: 16px;
  background-color: #2d8cf0; /* iView 主色调蓝色 */
  margin-right: 8px; /* 调整与文字的间距 */
}
.title-text {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #17233d; /* iView 标题文字颜色 */
}
.statistics-bar-top {
  display: flex;
}
.i-top {
  color: #b63636;
  text-align: center;
  font-size: 24px;
  font-face: "Montserrat";
  font-weight: 400;
  letter-spacing: 0;
  position: relative;
}

.i-top-ii {
  color: #ba6807;
  text-align: center;
  font-size: 24px;
  font-face: "Montserrat";
  font-weight: 400;
  letter-spacing: 0;
  position: relative;
}

.i-top-iii {
  color: #237bb5;
  text-align: center;
  font-size: 24px;
  font-face: "Montserrat";
  font-weight: 400;
  letter-spacing: 0;
  position: relative;
}

.i-center-i {
  text-align: center;
  margin-top: 14px;
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 14px;
  font-size: 24px;
  /* text-align: left; */
  color: #b63636;
}

.i-center-ii {
  text-align: center;
  margin-top: 14px;
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 14px;
  font-size: 24px;
  /* text-align: left; */
  color: #ba6807;
}

.i-center-iii {
  text-align: center;
  margin-top: 14px;
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 14px;
  font-size: 24px;
  /* text-align: left; */
  color: #237bb5;
}
.statistics-bar-top-i {
  display: flex;
  /* width: calc(66% - 8px); */
  width: 95%;
  padding: 10px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #ffc8c8, #ffecec);
  /* linear-gradient(246.01deg, #ff8181 0%, #fff 100%); */
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.statistics-bar-top-ii {
  display: flex;
  /* width: calc(20% - 8px); */
  width: 95%;
  background: linear-gradient(236.56deg, #ffed83 0%, #fffbe6 100%);
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 8px;
  padding: 10px;
}

.statistics-bar-top-iii {
  display: flex;
  /* width: calc(14%); */
  width: 95%;
  background: linear-gradient(207.31deg, #99d6ff 0%, #def2ff 100%);
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 8px;
  padding: 10px;
}

.dot-css {
  display: flex;
  align-content: center;
  align-self: center;
  align-items: center;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #209eff;
}

.dot-css1 {
  display: flex;
  align-content: center;
  align-self: center;
  align-items: center;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #ff9c9c;
}
</style>
