GY_ceshi_web/src/views/encoder/index.vue

<template>
  <div class="bg-box">
    <!-- 搜索栏 -->
    <div class="bg-card" style="margin-bottom: 18px;">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="出院日期" style="margin-bottom: 0">
          <el-date-picker v-model="formInline.start_time" type="date" placeholder="出院开始日期" value-format="yyyyMMdd" />
        </el-form-item>
        <span style="margin-right: 10px; line-height: 40px; color: #7E8BAB;">至</span>
        <el-form-item label="" style="margin-bottom: 0">
          <el-date-picker v-model="formInline.end_time" type="date" placeholder="出院结束日期" value-format="yyyyMMdd" />
        </el-form-item>
        <el-form-item style="margin-bottom: 0">
          <el-button type="primary" class="bg185DA6" @click="onGobalSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 汇总统计 -->
    <div class="bg-card" style="margin-bottom: 24px; padding">
      <CardTitle title="汇总统计">
        <el-image
          class="title_arrow"
          :class="{'arrow_top': !tongji_show}"
          :src="require('../../assets/images/arrow-down.png')"
          fit="contain"
          @click="onToggleTongjiShow">
        </el-image>
      </CardTitle>
      <el-collapse-transition>
        <div v-show="tongji_show">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="tongji-item">
                    <div class="title">首页总例数</div>
                    <div class="middle">日均例数：<span>{{ tongjiData.dayAvg }}</span></div>
                    <div class="count">{{ tongjiData.blSum }}</div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="tongji-item nth2">
                    <div class="title">缺陷总例数</div>
                    <div class="middle">缺陷占比：<span>{{ tongjiData.averageError }}%</span></div>
                    <div class="count">{{ tongjiData.qxSum }}</div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="tongji-item">
                    <div class="title">平均得分</div>
                    <div class="middle">最低分：<span>{{ tongjiData.minScore }}</span></div>
                    <div class="count">{{ tongjiData.averageScore }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="8">
                <el-col :span="5">
                  <div class="level-item">
                    <div class="level-text">
                      <span class="level">优</span>
                      <span class="count">{{ tongjiData.you_sum }}</span>
                    </div>
                    <div class="text-right level-percent">
                      <span>占比{{ tongjiData.you_ratio }}%</span>
                    </div>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="level-item">
                    <div class="level-text">
                      <span class="level">良</span>
                      <span class="count">{{ tongjiData.liang_sum }}</span>
                  </div>
                    <div class="text-right level-percent">
                      <span>占比{{ tongjiData.liang_ratio }}%</span>
                  </div>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="level-item">
                    <div class="level-text">
                      <span class="level">中</span>
                      <span class="count">{{ tongjiData.zhong_sum }}</span>
                  </div>
                    <div class="text-right level-percent">
                      <span>占比{{ tongjiData.zhong_ratio }}%</span>
                  </div>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="level-item">
                    <div class="level-text">
                      <span class="level">差</span>
                      <span class="count">{{ tongjiData.cha_sum }}</span>
                  </div>
                    <div class="text-right level-percent">
                      <span>占比{{ tongjiData.cha_ratio }}%</span>
                  </div>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="level-item" style="background: #fff;">
                    <el-popover placement="top-start" title="" width="245" trigger="hover">
                      <div slot v-html="levelText"></div>
                      <div slot="reference" class="text-center" style="color: #D38D14; font-size: 16px;">
                        <i class="el-icon-warning-outline"></i>
                        等级计算说明
                      </div>
                    </el-popover>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <div id="tongji_pie"></div>
            </el-col>
          </el-row>
        </div>
      </el-collapse-transition>
    </div>
    <!-- 缺陷详情 -->
    <div class="bg-card" style="margin-bottom: 24px; padding">
      <CardTitle title="缺陷详情">
        <el-image
          class="title_arrow"
          :class="{'arrow_top': !quxian_show}"
          :src="require('../../assets/images/arrow-down.png')"
          fit="contain"
          @click="onToggleQuexianShow">
        </el-image>
      </CardTitle>
      <el-collapse-transition>
        <div v-show="quxian_show">
          <el-row :gutter="20">
            <el-col :span="16">
              <div class="mb20">
                <el-radio-group v-model="qxxqData.radio" text-color="#185DA6" fill="#ffffff" @change="handleRadioChange">
                  <el-radio-button :label="1">缺陷问题（前十）</el-radio-button>
                  <el-radio-button :label="2">缺陷问题</el-radio-button>
                </el-radio-group>
              </div>
              <!-- 搜索栏 -->
              <el-form :inline="true" :model="qxxqData" class="demo-form-inline mb20">
                <el-form-item label="缺陷分类" style="margin-bottom: 0">
                  <el-select v-model="qxxqData.type" clearable filterable placeholder="全部">
                    <el-option label="患者基本信息" :value="0"></el-option>
                    <el-option label="诊疗信息" :value="1"></el-option>
                    <el-option label="费用信息" :value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="出院科室" style="margin-bottom: 0">
                  <el-select v-model="qxxqData.dep_id" clearable filterable placeholder="全部">
                    <el-option v-for="(item, index) in departmentList" :label="item.name" :value="item.id" :key="index"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item style="margin-bottom: 0">
                  <el-button type="primary" class="bg185DA6" @click="onQuexianSearch">查询</el-button>
                </el-form-item>
              </el-form>
              <!-- 表格 -->
              <el-table
                :data="tableData"
                class="mb20"
                style="width: 100%">
                <el-table-column
                  type="index"
                  label="序号"
                  width="80"
                  align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 + (paginationData.page - 1) * paginationData.size }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="desc"
                  label="缺陷描述"
                  align="center"
                  show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span class="c_FF786F">{{ scope.row.desc }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="field"
                  label="缺陷字段"
                  width="140"
                  align="center"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  prop="level"
                  label="缺陷分级"
                  width="140"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="count"
                  label="缺陷数量"
                  width="140"
                  align="center">
                  <template slot-scope="scope">
                    <span class="link" @click="toPage(scope.row)">{{ scope.row.count }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <div class="text-right" v-if="qxxqData.radio === 2">
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="paginationData.page"
                  :page-size="paginationData.size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="paginationData.total">
                </el-pagination>
              </div>
            </el-col>
            <el-col :span="8">
              <div id="qxxq_pie"></div>
            </el-col>
          </el-row>
        </div>
      </el-collapse-transition>
    </div>
    <!-- 医师排名 -->
    <div class="bg-card" style="margin-bottom: 24px; padding">
      <CardTitle title="医师排名">
        <el-image
          class="title_arrow"
          :class="{'arrow_top': !doctor_show}"
          :src="require('../../assets/images/arrow-down.png')"
          fit="contain"
          @click="onToggleDoctorShow">
        </el-image>
        <slot>
          <el-button type="primary" class="export-btn" icon="el-icon-download" size="small" style="float: right;" @click="onBmyDoctorExport">下载</el-button>
        </slot>
      </CardTitle>
      <el-collapse-transition>
        <div v-show="doctor_show">
          <el-row :gutter="40">
            <el-col :span="12">
              <el-table
                :data="doctor_tableData"
                class="mb20"
                style="width: 100%">
                <el-table-column
                  type="index"
                  label="序号"
                  width="80"
                  align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 + (paginationDataDoctor.page - 1) * paginationDataDoctor.size }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="docker_name"
                  label="医师姓名"
                  align="center"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  prop="bl_sum"
                  label="病历总数"
                  align="center">
                  <template slot-scope="scope">
                    <span class="link2" @click="toPageDoctor(scope.row)">{{ scope.row.bl_sum }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="kf_score"
                  label="总扣分"
                  align="center">
                  <template slot-scope="scope">
                    <span class="link2" @click="toPageDoctorKf(scope.row)">{{ -scope.row.kf_score }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="avg_score"
                  label="平均得分"
                  align="center">
                </el-table-column>
              </el-table>
              <el-pagination
                background
                @size-change="handleDoctorSizeChange"
                @current-change="handleDoctorCurrentChange"
                :current-page="paginationDataDoctor.page"
                :page-size="paginationDataDoctor.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="paginationDataDoctor.total">
              </el-pagination>
            </el-col>
            <el-col :span="12">
              <DoctorRankVue v-if="doctor_rank.length" :data="doctor_rank" />
            </el-col>
          </el-row>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
import DoctorRankVue from './components/index/DoctorRank.vue'
import { bmyDoctorRanking } from '@/api/excel'
  export default {
    components: {
      DoctorRankVue
    },
    data() {
      return {
        levelText: '优：≥97分；</br>' + '良：90~96分且不出现A类错误；</br>' + '中：75~89分且不出现A类错误；</br>' + '差：＜75分。',
        formInline: {
          start_time: '',
          end_time: '',
        },
        tongjiData: {
          blSum: 0,
          dayAvg: 0,
          qxSum: 0,
          averageError: 0,
          averageScore: 0,
          minScore: 0,
          you_sum: 0,
          liang_sum: 0,
          zhong_sum: 0,
          cha_sum: 0,
          you_ratio: 0,
          liang_ratio: 0,
          zhong_ratio: 0,
          cha_ratio: 0,
          jbxx: 0,
          zlxx: 0,
          fyxx: 0,
          qtxx: 0
        },
        tongji_show: true,
        tongjiDom: null,
        // 缺陷详情
        quxian_show: true,
        qxxqData: {
          radio: 1,
          dep_id: '',
          level: ''
        },
        tableData: [],
        paginationData: {
          page: 1,
          size: 10,
          total: 0
        },
        departmentList: [],
        // 医师排名
        doctor_show: true,
        paginationDataDoctor: {
          page: 1,
          size: 10,
          total: 0
        },
        // doctor_tableData: [],
        doctor_tableData: [
          {
            "docker_name": "杜晓峰",
            "bl_sum": 28,
            "qx_sum": 22,
            "sum_score": 2800,
            "df_score": 2158,
            "kf_score": 642,
            "proportion": "77.07",
            "avg_score": 88
          },
          {
            "docker_name": "杜晓峰",
            "bl_sum": 28,
            "qx_sum": 22,
            "sum_score": 2800,
            "df_score": 2158,
            "kf_score": 642,
            "proportion": "77.07",
            "avg_score": 88
          },
          {
            "docker_name": "杜晓峰",
            "bl_sum": 28,
            "qx_sum": 22,
            "sum_score": 2800,
            "df_score": 2158,
            "kf_score": 642,
            "proportion": "77.07",
            "avg_score": 88
          },
          {
            "docker_name": "杜晓峰",
            "bl_sum": 28,
            "qx_sum": 22,
            "sum_score": 2800,
            "df_score": 2158,
            "kf_score": 642,
            "proportion": "77.07",
            "avg_score": 88
          },
          {
            "docker_name": "杜晓峰",
            "bl_sum": 28,
            "qx_sum": 22,
            "sum_score": 2800,
            "df_score": 2158,
            "kf_score": 642,
            "proportion": "77.07",
            "avg_score": 88
          },
          {
            "docker_name": "杜晓峰",
            "bl_sum": 28,
            "qx_sum": 22,
            "sum_score": 2800,
            "df_score": 2158,
            "kf_score": 642,
            "proportion": "77.07",
            "avg_score": 88
          },
          {
            "docker_name": "杜晓峰",
            "bl_sum": 28,
            "qx_sum": 22,
            "sum_score": 2800,
            "df_score": 2158,
            "kf_score": 642,
            "proportion": "77.07",
            "avg_score": 88
          },
          {
            "docker_name": "杜晓峰",
            "bl_sum": 28,
            "qx_sum": 22,
            "sum_score": 2800,
            "df_score": 2158,
            "kf_score": 642,
            "proportion": "77.07",
            "avg_score": 88
          },
          {
            "docker_name": "杜晓峰",
            "bl_sum": 28,
            "qx_sum": 22,
            "sum_score": 2800,
            "df_score": 2158,
            "kf_score": 642,
            "proportion": "77.07",
            "avg_score": 88
          },
          {
            "docker_name": "杜晓峰",
            "bl_sum": 28,
            "qx_sum": 22,
            "sum_score": 2800,
            "df_score": 2158,
            "kf_score": 642,
            "proportion": "77.07",
            "avg_score": 88
          }
        ],
        doctor_rank: []
      }
    },
    async mounted() {
      this.doctor_rank = JSON.parse(JSON.stringify(this.doctor_tableData)).slice(0, 10)
      const year = new Date().getFullYear()
      const month = new Date().getMonth() + 1 > 10 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1
      const day = new Date().getDay() < 10 ? `0${new Date().getDay()}` : new Date().getDay()
      this.$set(this.formInline, 'start_time', `${year}0101`)
      this.$set(this.formInline, 'end_time', `${year}${month}${day}`)
      this.getDepartmentData()
      await this.getTongjiData()
      this.tongjiPie()
      this.qxxqPie()
      this.getQuexianData()
      this.getDoctorRank()
    },
    methods: {
      // 缺陷详情列表
      toPage(row) {
        const { start_time, end_time } = this.formInline
        this.$router.push({ name: 'EncoderErrors', query: { rule_id: row.error_rule, start_time, end_time }})
      },
      // 全局筛选
      async onGobalSearch() {
        await this.getTongjiData()
        this.tongjiPieUpdate()
        this.qxxqPieUpdate()
        this.getQuexianData()
        this.getDoctorRank()
      },
      // 获取缺陷数据
      getQuexianData() {
        const { dep_id, level } = this.qxxqData
        const { page, size } = this.paginationData
        const params = {
          dep_id,
          level,
          page,
          page_size: size,
          ...this.formInline
        }
        this.$axios_new.post('/api/bmy/qualityData', params).then(res => {
          const { count } = res.data
          if (count < 10) {
            for(let i=0; i<10 - count-1; i++) {
              res.data.data.push({
                error_rule: '',
                count: '',
                eror_zb: '',
                category: '',
                down: '',
                desc: '',
                level: '',
                type: ''
              })
            }

          }
          this.tableData = res.data.data
          this.paginationData.total = res.data.count
        })
      },
      // 获取部门集合
      getDepartmentData() {
        this.$axios.post('/get_omr_department_list').then(res => {
          this.departmentList = res.data;
        });
      },
      // 获取统计信息
      async getTongjiData() {
        // await this.$axios_new.post('/api/bmy/qualityStatistics', this.formInline).then(res => {
        //   this.tongjiData = res.data
        // })
        this.tongjiData = {
          "blSum": 1,
          "dayAvg": 1,
          "qxSum": 1,
          "averageError": "100.00",
          "averageScore": "99.00",
          "minScore": 99,
          "you_sum": 1,
          "liang_sum": 0,
          "zhong_sum": 0,
          "cha_sum": 0,
          "you_ratio": "100.00",
          "liang_ratio": "0.00",
          "zhong_ratio": "0.00",
          "cha_ratio": "0.00",
          "jbxx": 7,
          "zlxx": 1,
          "fyxx": 0
        }
      },
      onToggleTongjiShow() {
        this.tongji_show = !this.tongji_show
      },
      onToggleQuexianShow() {
        this.quxian_show = !this.quxian_show
      },
      // 统计环图
      tongjiPie() {
        this.tongjiDom = this.$echarts.init(
          document.getElementById('tongji_pie')
        )
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '30%',
            left: 'right',
            orient: 'vertical',
            align: 'left',
            itemGap: 30
          },
          color: ['#5087EC', '#FF786F'],
          series: [
            {
              type: 'pie',
              center: ['42%', '50%'],
              radius: ['60%', '80%'],
              avoidLabelOverlap: true,
              startAngle: 180,
              label: {
                show: true,
                formatter: '{b}: {c}'
              },
              labelLine: {
                show: true,
                length2: 40,
                minTurnAngle: 120,
                showAbove: true
              },
              data: [
                { value: this.tongjiData.blSum, name: '首页总病例' },
                { value: this.tongjiData.qxSum, name: '缺陷总例数' }
              ]
            }
          ]
        }
        this.tongjiDom.setOption(option)
        // 窗口大小改变 重新渲染
        window.addEventListener('resize', () => {
          this.tongjiDom.resize()
        })
      },
      tongjiPieUpdate() {
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'right',
            orient: 'vertical',
            align: 'left'
          },
          color: ['#5087EC', '#FF786F'],
          series: [
            {
              type: 'pie',
              radius: ['60%', '80%'],
              avoidLabelOverlap: true,
              label: {
                show: true,
                formatter: '{b}: {c}'
              },
              labelLine: {
                show: true
              },
              data: [
                { value: this.tongjiData.blSum, name: '首页总病例' },
                { value: this.tongjiData.qxSum, name: '缺陷总例数' },
              ]
            }
          ]
        }
        this.tongjiDom.setOption(option)
      },
      // 缺陷环图
      qxxqPie() {
        this.tongjiDom = this.$echarts.init(
          document.getElementById('qxxq_pie')
        )
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            width: '300',
            top: '10%',
            left: 'center',
            align: 'left',
            formatter: (name) => {
              return `{a|${name}} `
            },
            textStyle: {
              rich: {
                a: {
                  width: 100
                }
              }
            }
          },
          color: ['#FF8279', '#FF9F98', '#FFBEB9', '#FFD9D6'],
          series: [
            {
              type: 'pie',
              top: '20%',
              radius: ['55%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                formatter: '{b}: {c}'
              },
              labelLine: {
                show: true
              },
              data: [
                { value: this.tongjiData.jbxx || 0, name: '患者基本信息' },
                { value: this.tongjiData.zlxx || 0, name: '诊疗信息' },
                { value: this.tongjiData.fyxx || 0, name: '费用信息' },
                { value: this.tongjiData.qtxx || 0, name: '其他信息' }
              ]
            }
          ]
        }
        this.tongjiDom.setOption(option)
        // 窗口大小改变 重新渲染
        window.addEventListener('resize', () => {
          this.tongjiDom.resize()
        })
      },
      qxxqPieUpdate() {
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '10%',
            left: 'center',
            align: 'left'
          },
          color: ['#FF8279', '#FF9F98', '#FFBEB9', '#FFD9D6'],
          series: [
            {
              type: 'pie',
              top: '20%',
              radius: ['55%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                formatter: '{b}: {c}'
              },
              labelLine: {
                show: true
              },
              data: [
                { value: this.tongjiData.jbxx || 0, name: '患者基本信息' },
                { value: this.tongjiData.zlxx || 0, name: '诊疗信息' },
                { value: this.tongjiData.fyxx || 0, name: '费用信息' },
                { value: this.tongjiData.qtxx || 0, name: '其他信息' }
              ]
            }
          ]
        }
        this.tongjiDom.setOption(option)
      },
      // 分页
      handleSizeChange(val) {
        this.paginationData.page = 1
        this.paginationData.size = val
        this.getQuexianData()
        
      },
      handleCurrentChange(val) {
        this.paginationData.page = val
        this.getQuexianData()
      },
      // tag 修改
      handleRadioChange(val) {
        if (val === 1) {
          this.paginationData.page = 1
          this.paginationData.size = 10
        }
        this.getQuexianData()
      },
      // 缺陷搜索
      onQuexianSearch() {
        this.paginationData.page = 1
        this.getQuexianData()
      },
      // 医师排名
      onToggleDoctorShow() {
        this.doctor_show = !this.doctor_show
      },
      // 分页
      handleDoctorSizeChange(val) {
        this.paginationDataDoctor.page = 1
        this.paginationDataDoctor.size = val
        this.getDoctorRank()
      },
      handleDoctorCurrentChange(val) {
        this.paginationDataDoctor.page = val
        this.getDoctorRank()
      },
      // 医师排名
      getDoctorRank() {
        const { page, size } = this.paginationDataDoctor
        const params = {
          page,
          page_size: size,
          ...this.formInline,
          is_export: 0
        }
        this.$axios_new.post('/api/bmy/doctorRanking', params).then(res => {
          const { count } = res.data
          if (count < 10) {
            for(let i=0; i<10 - count-1; i++) {
              res.data.list.push({
                "docker_name": "",
                "bl_sum": '',
                "qx_sum": '',
                "sum_score": '',
                "df_score": '',
                "kf_score": '',
                "proportion": ""
              })
            }
          }
          this.doctor_tableData = res.data.list
          this.paginationDataDoctor.total = res.data.count
          this.doctor_rank = JSON.parse(JSON.stringify(res.data.list)).slice(0, 10)
        })
      },
      // 导出
      onBmyDoctorExport() {
        const params = {
          is_export: 1,
          ...this.formInline
        }
        bmyDoctorRanking(params).then(res => {
          const content = res.data; // 后台返回二进制数据
          const blob = new Blob([content]);
          const fileName = `编码员-医师排名.csv`;
          if ('download' in document.createElement('a')) {
            // 非IE下载
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
        });
      },
      // 医生病历总数
      toPageDoctor(row) {
        const { start_time, end_time } = this.formInline
        this.$router.push({ name: 'DoctorBl', query: { doctor_name: row.docker_name, start_time, end_time }})
      },
      // 医生病历扣分
      toPageDoctorKf(row) {
        const { start_time, end_time } = this.formInline
        this.$router.push({ name: 'DoctorBlKf', query: { doctor_name: row.docker_name, start_time, end_time }})
      },
    }
  }
</script>

<style lang="scss" scoped>
::v-deep .el-radio-button__inner  {
  border-color: #DCDFE6 !important;
  font-weight: 500;
  &:hover {
    color: #606266;
  }
}
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
  box-shadow: #DCDFE6 -1px 0px 0px 0px !important;
}
.tongji-item {
  height: 114px;
  background: #5087EC;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 25px 18px 0;
  box-sizing: border-box;
  position: relative;
  &.nth2 {
    background: #FF786F;
  }
  .title {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 22px;
    margin-bottom: 20px;
  }
  .middle {
    text-align: right;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 22px;
    position: absolute;
    top: 45px;
    right: 18px;
  }
  .count {
    font-size: 24px;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 28px;
  }
}
.level-item {
  height: 75px;
  background: #EAF4FF;
  border-radius: 4px;
  padding: 0 11px;
  box-sizing: border-box;
  overflow: hidden;
  span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 75px;
    vertical-align: middle;
  }
  .level {
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 75px;
  }
  .count {
    font-size: 24px;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #38A1F2;
    line-height: 75px;
    margin-left: 5px;
  }
  .level-text {
    float: left;
    box-sizing: border-box;
  }
  .level-percent {
    float: right;
    box-sizing: border-box;
  }
}
.title_arrow {
  width: 10px;
  height: 11px;
  margin-left: 5px;
  cursor: pointer;
  &.arrow_top {
    transform: rotate(180deg);
  }
}
#tongji_pie {
  height: 200px;
}
#qxxq_pie {
  height: 600px;
  margin-top: 68px;
}
</style>