gdy_app_8/src/performance-07-19/view/navhome/resultAnalysis.vue

<template>
  <div style="height: 100%;" :class="{ bg_fff: skeletonLoad }">
    <van-nav-bar title="结果分析" left-text="返回" left-arrow @click-left="$route_back" />
    <VanSkeleton :skeLoad="skeletonLoad">
      <template>
        <header>
          <!--
            <div class="selector" @click="statementTIme">
              <span>{{ selectPftiText }}</span>
              <van-icon name="arrow-down" />
            </div>
          -->
          <div style="border-bottom: 1px solid #f1f1f1;" class="selector flex-box-ce flex-center-center" @click="openPanel()">
            <icon name="YMPicker_item_icon" style="margin-right: 6px;width: 0.3rem;height: 0.3rem;" class="fontColorC"></icon>
            <div>{{ dateParameter.year }}年</div>
            <div style="margin: 0 6px;">{{ dateParameter.name }}</div>
            <van-icon name="arrow-down" />
          </div>
        </header>

        <scroller ref="me_scroller" class="all">
          <div style="padding-bottom: 1.5rem;">

            <div class="statementFoot">
              <van-tabs v-model="active" @change="statementTabs">
                <van-tab v-for="(item, index) in statementVanTabs" :key="index" :title="item.name"></van-tab>
              </van-tabs>
              <!-- 等级分布 -->
              <div class="statmentAnalysePie" v-show="active == 0">
                <div style="width: 7.5rem; height: 5rem;" id="statmentAnalysePie" ref="statmentAnalysePie"></div>
                <div class="PiePropNum">
                  <div>总人数</div>
                  <div>{{ userTotal }}人</div>
                </div>
              </div>


              <!-- 正态分布 -->
              <div v-show="active == 1">
                <div class="statementHnum flex-box-ce flex-d-wrap flex-d-center">
                  <div class="Hnumvfor">
                    <span class="smHnLtit">总人数</span>
                    <br />
                    <span class="smHnLnum">{{ userTotal }}</span>
                    <br />
                    <span{{ userComplete }}人已完成</span>
                  </div>
                  <div v-for="(item, index) in scoreList" class="Hnumvfor" :key="index">
                    <span class="smHnLtit">{{ item.name }}</span>
                    <br />
                    <span class="smHnLnum">{{users.filter(user => user.scoreResult === item.name).length}}</span>
                    <br />
                  </div>
                </div>
               </div>

              <div>

              <div>

                  <!-- <van-search placeholder="请输入姓名" v-model="keyword" @input="keyVal()" /> -->
                  <div class="flex-box-ce">
                    <div class="selectItem flex-2 font-flex-word" @click="showDept = true">
                      <span>{{ deptName }}</span>
                      <van-icon name="arrow-down" />
                    </div>
                  </div>

                  <ol v-if="filterUsers && filterUsers.length > 0">
                    <li @click="openDetail(item)" v-for="(item, index) in filterUsers" :key="index" class="flex-ce-box flex-d-center statmentperson" :style="index != 0 ? 'border-top: 0.02rem solid #e6e6e6;' : ''">

                      <div class="flex-1 flex-box" style="align-items: center; justify-content: space-between;">
                        <div class="score-result" >{{ item.scoreResult }}</div>
                        <div class="flex-box-ce flex-1">
                          <userImage :id="item.employeeId" :user_name="item.employeeName" fontSize="0.15" width="0.63rem" height="0.63rem" style="margin-top:.08rem;"></userImage>
                          <div style="padding-left:.2rem;">
                            <span style="font-size:.3rem;">{{ item.employeeName }}</span>
                            <br />
                            <span class="font-flex-word" style="width: 3.8rem;display:inline-block;" v-if="item.dept_list && item.dept_list.length > 0">
                              <span style="font-size:.25rem;" v-for="(arr, att) in item.dept_list" :key="att">
                                {{ arr.dept_name }}
                                <span v-if="item.dept_list.length - att > 1">,</span>
                              </span>
                            </span>
                          </div>
                        </div>
                        <div style="display: flex; align-items: center; flex-direction: column;">
                          <div v-if="item.status == 0" class="review-status">进行中</div>
                          <div v-if="item.status == 1" class="review-status" style="background-color: #FF9600;">已结束</div>
                          <div style="display: flex; align-items: center; white-wrap: no-wrap; font-size:.26rem; text-align:center; overflow: hidden;">

                            <span>{{ item.score == undefined || item.score == null || item.score == ''  ? '-' : item.score }}</span>
                            &nbsp;/&nbsp;
                            <span style="color:#ffad67;">{{ item.level ? item.level : '--'}}</span>
                          </div>
                        </div>
                      </div>

                    </li>
                  </ol>
                  <noData v-else content="无考核记录"></noData>


                </div>

              </div>




            </div>

            <template>



            <div class="indicator-list-title">指标分析</div>

            <div class="indicator-list">
              <div class="indicator-item" v-for="(item, index) in tableData2" :key="index">
                <div class="indicator-item-info">
                  <div class="indicator-info-label">指标名称</div>
                  <div class="indicator-info-value">{{ item.title }}</div>
                </div>

                <div class="indicator-item-info">
                  <div class="indicator-info-label">目标</div>
                  <div class="indicator-info-value">{{ item.target }}</div>
                </div>

                <div class="indicator-item-info">
                  <div class="indicator-info-label">均值</div>
                  <div class="indicator-info-value">{{ item.avgResult }}</div>
                </div>

                <div class="indicator-item-info">
                  <div class="indicator-info-label">超出目标比例</div>
                  <div v-if="parseInt(item.standardResultRate) > 0" class="indicator-info-value color-green" >{{ item.standardResultRate }}</div>
                  <div v-else-if="parseInt(item.standardResultRate) < 0" class="indicator-info-value color-red" >{{ item.standardResultRate }}</div>
                  <div v-else="parseInt(item.standardResultRate) > 0" class="indicator-info-value color-gray" >{{ item.standardResultRate }}</div>
                </div>

                <div class="indicator-item-info">
                  <div class="indicator-info-label">达标数</div>
                  <div class="indicator-info-value">{{ item.standardCount }}</div>
                </div>

                <div class="indicator-item-info">
                  <div class="indicator-info-label">达标率</div>
                  <div v-if="parseInt(item.standardRate) > 0" class="indicator-info-value color-green" >{{ item.standardRate }}</div>
                  <div v-else-if="parseInt(item.standardRate) < 0" class="indicator-info-value color-red" >{{ item.standardRate }}</div>
                  <div v-else="parseInt(item.standardRate) > 0" class="indicator-info-value color-gray" >{{ item.standardRate }}</div>

                </div>

                <div class="indicator-item-info">
                  <div class="indicator-info-label">平均分</div>
                  <div class="indicator-info-value">{{ item.avgScore }}</div>
                </div>

              </div>
            </div>

            </template>
          </div>
        </scroller>
      </template>
    </VanSkeleton>



    <!-- 周期选择 -->
    <van-action-sheet v-model="pullonThePanel" :closeable="false">
      <div class="content">
        <van-picker ref="van_picker" show-toolbar :columns="cycleOptions" @cancel="pullonThePanel = false" value-key="name" @confirm="onConfirm" confirm-button-text="完成" />
      </div>
    </van-action-sheet>

    <!-- 部门搜索 -->
    <van-dialog v-model="showDept" width="300" confirm-button-text="确定" @confirm="handleConfirm" @cancel="handleCancel" :show-confirm-button="true" closeOnClickOverlay>
       <div style="height: 8rem; overflow: auto;" class="scroll-bar">
         <div class="dept-list">
           <div class="dept-item flex-box-ce" v-for="(item, index) in department_list" :key="index">
             <van-checkbox shape="square" v-model="item.select" style="margin-right: 0.16rem;"></van-checkbox>
             <div class="dept-item-name">{{ item.dept_name }}</div>
           </div>
         </div>
       </div>
    </van-dialog>

  </div>
</template>


<script>
import Vue from 'vue';
import VanSkeleton from '@/performance/components/public/VanSkeleton';
import { getBelongType, getColumns, cycleTypeArr} from '@/okr/utils/auth';
import { Picker, ActionSheet, Circle, Tab, Tabs, Skeleton, DropdownMenu, DropdownItem, Progress, Calendar } from 'vant';
import { _debounce } from '@/utils/auth';
import _ from "lodash"

Vue.use(Picker)
  .use(ActionSheet)
  .use(Circle)
  .use(Tab)
  .use(Tabs)
  .use(Skeleton)
  .use(DropdownMenu)
  .use(DropdownItem)
  .use(Progress)
  .use(Calendar);
export default {
  data() {
    return {
      skeletonLoad: true, //
      statementtabshow: false,
      statementperson: [],
      statementResult: [],
      allStatementResult: [],
      statementVanTabs: [{ name: '等级分布' }, { name: '正态分布' }],
      active: 0,
      detailInfo: null,
      startTime: "",
      endTime: "",
      deptIds: [],
      rank: "",
      rankList: [],
      deptList: [],
      scoreList: [],
      users: [], //考核人员列表
      filterUsers: [],
      tableData1: [], // 考核中的指标列表,
      tableData2: [], // 按单位/目标/聚合指标列表,
      filterTableData1: [],
      filterTableData2: [],
      distributionId: '',
      userTotal: 0,
      userComplete: 0,
      userIncomplete: 0,
      infos: [],
      cycleColumns: getColumns(),
      cycleTypeArr:cycleTypeArr(true),
      selectPftiTheEcho: [0, 0], // 选项回显
      dateParameter: {
        year: this.$moment().format('YYYY'),
        cycle_type: 0,
        dateId: 1,
        name: '全部周期'
      },


      selectPftiText: '', // 展示名字
      selectPftiTheEcho: [0, 0], // 选项回显
      pullonThePanel: false, // 选项面板
      selectPftiData: {}, // 当前选中项

      keyword: "",
      deptName: '全部部门',
      department_list: [],
      showDept: false,
      recordList: [],
      userInfo: this.$userInfo(),
      gradeLevels: [], // 全局等级配置

      cycleOptions: [
        { name: "月度", value: "4", id: "4", text: "月度", children: [] },
        { name: "季度", value: "3", id: "3", text: "季度", children: [] },
        { name: "半年度", value: "2", id: "2", text: "半年度", children: [] },
        { name: "年度", value: "1", id: "1", text: "年度", children: [] },
        { name: "自定义", value: "0", id: "0", text: "自定义", children: [] },
      ],

      isYou: true,
      params: {
        cycleType: 1,
        startDate: '',
        endDate: '',
        deptIds: '',
        year: 2025
      }
    };
  },


  components: { VanSkeleton },

  watch: {
    detailInfo(v) {
      console.log("-------------结果分析，初始化数据-------------")
      this.$nextTick(() => {
        this.initData();
      })
    }
  },


  methods: {

    openDetail(item){
      this.$router.push({ path: '/me', query: { reviewId: item.reviewId, employeeId: item.employeeId } });
    },

    async initData() {
      // this.activeName = '1'
      this.deptName = '全部部门'
      this.deptIds = [];
      this.department_list = [];
      this.users = [];
      this.filterUsers = [];
      this.tableData1 = [];
      this.tableData2 = [];
      this.filterTableData1 = [];
      this.filterTableData2 = [];
      let { indicators, startTime, endTime, distribution: { items }, users } = this.detailInfo
      console.log(this.detailInfo)
      this.startTime = startTime;
      this.endTime = endTime;
      this.scoreList = items;
      this.distributionId = this.scoreList[0].id
      this.users = users;
      this.tableData1 = indicators;
      this.tableData1.forEach(item => {
          this.users.forEach(user => {
              if (user.employeeId == item.employeeId) {
                item.departments = user.departments
              }
          })
          if (item.target && item.result) {
              item.difference = item.result - item.target
          } else {
              item.difference = '--'
          }
      })
      this.filterTableData1 = this.tableData1;
      if(this.tableData1 && this.tableData1.length > 0) {
        let groups = _.groupBy(this.tableData1, item => `${item.title}(_)${item.target === null || item.target === '' ? 'null' : item.target}(_)${item.unit === null || item.unit === '' ? 'null' : item.unit}`);
          Object.keys(groups).forEach(key => {
            let group = {
              title: '',
              target: '',
              unit: '',
              departments: [],
              userCount: 0,
              scoredCount: 0,
              standardCount: 0,
              failCount: 0,
              standardRate: '--',
              totalScore: 0,
              totalResult: 0,
              avgScore: 0,
              avgResult: 0,
              standardResultRate: '--'
            };
            groups[key].forEach(indicator => {
              group.title = indicator.title; // 指标名称
              group.target = indicator.target; // 目标
              group.unit = indicator.unit; // 单位
              group.departments = indicator.departments; // 单位
              let standardCount = indicator.difference !== '--' && indicator.difference >= 0 ? 1 : 0; //
              group.userCount += 1;
              group.scoredCount += indicator.score !== null ? 1 : 0;
              group.standardCount += standardCount;
              group.failCount += standardCount === 1 ? 0 : 1;
              if (indicator.score !== null) group.totalScore += indicator.score;
              if (indicator.result !== null) group.totalResult += indicator.result;
            });
            group.standardCount = group.standardCount;
            if (group.userCount > 0) {
              let rate = Math.floor(group.standardCount / group.userCount * 100 * 0.01);
              let avgScore = Math.floor(group.totalScore / group.userCount * 100 * 0.01);
              let avgResult = Math.floor(group.totalResult / group.userCount * 100 * 0.01);
              group.standardRate = rate > 0 ? `${rate}%` : '--';
              group.avgScore = avgScore !== 0 ? avgScore : '--';
              group.avgResult = avgResult !== 0 ? avgResult : '--';

              if (group.target !== null && group.avgResult !== '--') {
                  let standardResultRate = Math.floor((group.avgResult - group.target) / group.target * 100 * 0.01 * 100);
                  group.standardResultRate = standardResultRate !== 0 ? `${standardResultRate}%` : '--';
              }
            }
            this.tableData2.push(group);
            this.filterTableData2 = this.tableData2;
            console.log("this.tableData2")
            console.log(this.tableData2)
          })
      }


      this.userTotal = 0;
      this.userComplete = 0;
      this.userIncomplete = 0;
      let distribution = [];
      let userScores = []
      this.scoreList.forEach(item => {
          item.level = item.name;
          item.ratio = item.scale / 100
          distribution.push(item)
      })

      if (this.users && this.users.length > 0) {
          this.users.forEach(user => {
              this.userTotal++;
              this.userComplete += user.status === 1 ? 1 : 0;
              user.level = this.findGrade(user.score, this.gradeLevels);
              // this.rankList.push(user.level || '未评分')
              userScores.push(user.score)
          })
          this.infos = [
              { label: "总人数", num: this.userTotal },
              { label: "已完成", num: this.userComplete },
              { label: "未评分", num: this.userIncomplete },
          ]
          let scoreResult = this.assignLevels(userScores, distribution);
          this.users.forEach(item => {
            item.dept_list = this.$getEmployeeMapItem(item.employeeId).employee_detail.dept_list
            if(item.dept_list && item.dept_list.length > 0) {
              item.dept_list.forEach(dept => {
                dept.id = dept.dept_id
                item.select = false
                this.department_list.push(dept)
              })
            }
            scoreResult.forEach(result => {
                if (result.scores.includes(item.score)) {
                    item.scoreResult = result.level
                }
            })
          })

          // 按分数排序
          this.users = this.users.slice().sort((a, b) => b.score - a.score);

          // this.filterUsers = cloneDeep(this.users)
          this.filterUsers = this.users
          // this.getResult();
          let pieData = []

          if(this.users && this.users.length > 0) {
            pieData = this.gradeLevels.map(item => ({
              name: item.name + '   ' + this.users.filter(user => user.level === item.name).length + '人',
              value: this.users.filter(user => user.level === item.name).length
            }))

            this.statmentAnalysesPie(pieData)
          }
      }
    },

    statmentAnalysesPie(data) {
      let colors = ['rgb(38, 162, 255)', '#f36f2a', '#fecb09', '#00b6bd', '#e85d53', '#fecb09'];
      let legendDataLeng = data.length;
      if (legendDataLeng > colors.length) {
        let colorsLeng = colors.length;
        for (let i = 0; i <= legendDataLeng - colorsLeng; i++) {
          colors.push('rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')');
        }
      }

      //

      const chart = this.$refs.statmentAnalysePie;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
          legend: [
            {
              type: 'scroll',
              orient: 'vertical',
              icon: 'square',
              left: '55%',
              align: 'left',
              top: 'center',
              itemGap: 20,
              itemWidth: 5, // 图形宽度。
              itemHeight: 5, // 图形高度。
              // bottom:'50%',
              textStyle: {
                fontSize: 14,
                color: 'rgb(48, 49, 51)'
              }
              // data: Name
            }
          ],
          color: colors,
          emphasis: {
            scale: true,
            scaleSize: 10,
            label: {
              formatter: '总人数',
              show: true,
              fontSize: '20'
            }
          },
          series: [
            {
              type: 'pie',
              radius: ['43%', '53%'],
              center: ['30%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              data
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(() => {
          myChart.resize();
        }, 200);
      }
    },



    // 查找分数对应的等级
    findGrade(score, gradeLevels) {
      for (let i = 0; i < gradeLevels.length; i++) {
        if (score && score >= gradeLevels[i].min && score && score <= gradeLevels[i].max) {
            return gradeLevels[i].name; // 返回对应的等级描述
        } else if (score && score <= gradeLevels[0].min) {
            return gradeLevels[0].name; // 返回对应的等级描述
        } else if (score && score >= gradeLevels[gradeLevels.length - 1].max) {
            return gradeLevels[gradeLevels.length - 1].name; // 返回对应的等级描述
        }
      }
      return "未评级"; // 如果分数不在任何范围内
    },



    assignLevels(scores, levelConfigs) {
        // 降序排序并去重（假设分数不重复，可省略去重）
        const sortedScores = [...scores].sort((a, b) => b - a);
        const total = sortedScores.length;
        if (total === 0) return [];

        // 归一化处理比例
        const totalRatio = levelConfigs.reduce((sum, cfg) => sum + cfg.ratio, 0);
        const normalized = levelConfigs.map(cfg => cfg.ratio / totalRatio);

        // 计算每个等级的初始人数
        let counts = normalized.map(ratio => Math.floor(total * ratio));
        let remainder = total - counts.reduce((sum, c) => sum + c, 0);

        // 分配剩余人数，按优先级顺序
        let idx = 0;
        while (remainder > 0 && idx < counts.length) {
            counts[idx]++;
            remainder--;
            idx++;
        }

        // 构建结果：按人数切割数组
        let start = 0;
        return counts.map((count, i) => {
            const end = start + count;
            const levelScores = sortedScores.slice(start, end);
            start = end;
            return {
                level: levelConfigs[i].level,
                scores: levelScores
            };
        });
    },



    openPanel(){
      this.pullonThePanel = true;
      this.$nextTick(() => {
        this.theEchoVanPicker()
      })
    },

    // 考核包搜索
    onConfirm (data, list) { // 确认
      console.log(data)
      console.log(list)
      let cycle = this.cycleOptions[list[0]].value
      let time = this.cycleOptions[list[0]].children[list[1]].value
      this.getResultAnalyze(cycle, time)
      this.pullonThePanel = false
    },

    // 获取全局等级设置
    async getAllLevelSet() {
      let res = await this.$axiosUser('get', 'api/pro/per/user/base_config')
      let data = res.data.data;
      let levels = data.level_scope.levels;
      let gradeLevels = [];
      let max = 0;//最大值
      let colorList = ['#5F7294', '#08EEA1', '#f56c6c', '#0887EE', '#92EE08', '#f56c6c']
      if (levels && levels.length > 0) {
          levels.forEach((item, index) => {
              var obj;
              if (index == 0) {
                  obj = { name: item.name, max: Number(item.value), min: 0 };
              } else {
                  obj = { name: item.name, max: Number(item.value), min: max };//当不是第一个等级时，最小值为上一个的最大值
              }
              obj.color = colorList[index]
              max = item.value;
              gradeLevels.push(obj);
          })
          this.gradeLevels = gradeLevels
          console.log("this.gradeLevels")
          console.log(this.gradeLevels)
        }
    },

    // 获取结果分析数据
    getResultAnalyze(cycle, time) {
      let url = `/performance/statistics/cycle/${this.$userInfo().site_id}/${cycle}`
      this.$axiosUser("get", url, { value: `${time}` }).then(res => {
        console.log("获取结果分析数据")
        this.detailInfo = res.data.data
        this.skeletonLoad = false
        console.log(this.isYou)
      })
    },



    getData() {
      let url = `/performance/statistics/reviews/${this.userInfo.site_id}`;
      let params = {
        cycleType: 4,
        startDate: '',
        endDate: '',
        deptIds: '',
        cycleValue: 7,
        year: 2025
      }

      this.$axiosUser("get", url, params).then(res => {
        if (res.data.code == 1) {
          let recordList = res.data.data.list;
          if(recordList.length == 0) {
            this.isYou = false
            return false
          } else {
            this.isYou = true
            let theOf = this.theProgressOf;
            theOf.complete = recordList.filter(item => item.status == 1).length || 0 // 已完成人数
            theOf.theTotalNum = res.data.data.total; // 总人数
            let rate = (theOf.complete / theOf.theTotalNum) * 100; // 进度条百分比
            if(!isNaN(rate)){
              this.rate = rate; // 进度条百分比
            }
            recordList.forEach(item => {
              item.userInfo = this.$getEmployeeMapItem(item.employeeId);
              item.dept_list = this.$getEmployeeMapItem(item.employeeId).employee_detail.dept_list
            })

          }
          console.log("---------------------------------")
          console.log(recordList)
          this.recordList = recordList
          this.skeletonLoad = false
        }



      })

    },



    theEchoVanPicker() {
      // 回显
      this.$refs.van_picker.setIndexes(this.selectPftiTheEcho);
    },

    onCancel() {
      // 取消
      this.pullonThePanel = false;
    },



    statementTabs(key, tit) {
    },



    statementTIme() {
      this.pullonThePanel = true;
      this.$nextTick(() => {
        this.theEchoVanPicker();
      });
    },


    keyVal: _debounce(function() {
      if(!this.keyword) this.filterUsers = this.recordList
      // let filterUsers = []
      if(this.recordList && this.recordList.length > 0) {
        this.filterUsers = this.recordList.filter(item => item.employeeName.includes(this.keyword.trim()))
      }
    }),

    handleConfirm() {
      this.deptIds = this.department_list.filter(item => item.select).map(item => item.dept_id)
      if(this.deptIds && this.deptIds.length > 0) {
        this.deptName = ''
        this.department_list.filter(item => item.select).forEach(dept => {
          this.deptName += dept.dept_name + ","
        })
        this.deptName = this.deptName.substring(0, this.deptName.length - 1)
        this.filterUsers = this.users.filter((item) => {
          const departmentMatch = this.deptIds.length === 0 || this.deptIds.some((depId) => item.departments.some(dep => dep.id == depId));
          return departmentMatch;
        });
      }else {
        this.deptName = '全部部门'
      }
      this.showDept = false;
    },

    handleCancel() {
      this.showDept = false;
    },

    getColumnsInfo(cycle) {
      if (cycle < 0) {
        cycle = 0
        return
      }
      // this.loading = true
      // 周期种类 0-自定义 1-年度 2-半年度 3-季度 4-月度
      let url = `/performance/statistics/cycle/info/${this.$userInfo().site_id}/${cycle}`
      this.$axiosUser("get", url, {}).then(res => {
        console.log("获取周期数据")
        console.log(res)
          // this.loading = false;
          let { data: { data: { items, cycleType } } } = res
          let index = parseInt(4 - cycle)
          this.cycleOptions[index].children = items
          if (items && items.length > 0) {
              items.forEach(item => {
                  item.name = item.remark
                  item.text = item.remark
                  item.id = item.value
              })

              let cycle = this.cycleOptions[index].value
              let time = this.cycleOptions[index].children[[0]].value
              // if(!(this.detailInfo && this.detailInfo.users && this.detailInfo.users.length > 0)) {
              //   if(time) {
              //     this.getResultAnalyze(cycle, time)
              //   }
              // }

              // this.getColumnsInfo(parseInt(cycle) - 1) // 递归周期类型，获取考核数据，优先按月，季，半年度，年度来调用
          } else {
            this.cycleOptions[index].children = [
              {name: '', text: '', value: '', id: ''}
            ]
          }
      })
    },

  },

  mounted() {
    this.$nextTick(async () => {
      // 获取全局等级
      await this.getAllLevelSet();

      // 获取周期列表数据
      await this.getColumnsInfo(4);
      await this.getColumnsInfo(3);
      await this.getColumnsInfo(2);
      await this.getColumnsInfo(1);
      await this.getColumnsInfo(0);

      for(let i = 4; i >=0; i--) {
        console.log(i)
      }
      this.getResultAnalyze(4, '2025:5')
    })
  },

  created() {

  }
};
</script>

<style scoped lang="less">

  .color-red {
    padding: 0.05rem 0.2rem;
    box-sizing: border-box;
    background-color: #fef0f0;
    border: 0.02rem solid #fde2e2;
    color: #f56c6c !important;
  }

  .color-green {
    padding: 0.05rem 0.2rem;
    box-sizing: border-box;
    background-color: #f0f9eb;
    border: 0.02rem solid #e1f3d8;
    color: #67c23a !important;
  }

  .color-gray {
    padding: 0.05rem 0.2rem;
    box-sizing: border-box;
    background-color: #f4f4f5;
    border: 0.02rem solid #e9e9eb;
    color: #909399 !important;
  }

  .dept-list {
    padding: 0.2rem;
    box-sizing: border-box;
    .dept-item {
      box-sizing: border-box;
      padding-left: 0.3rem;
      margin-bottom: 0.2rem;
      &-name {
        font-size: 0.28rem;
        color: #89919F;
      }
    }
  }

  .statementHnum {
    padding: 0.2rem;
    padding-bottom: 0rem;
    .Hnumvfor {
      width: 22.8%;
      position: relative;
      background-color: #ECF5FF;
      border-radius: 3px;
      text-align: center;
      padding: 0.1rem 0.2rem;
      box-sizing: border-box;
      margin-bottom: 0.2rem;
      .smHnLnum {
        font-size: 0.42rem;
        color: #00a1ff;
      }
      .smHnLtit {
        font-size: 0.26rem;
        color: #8a8a8a;
      }
    }
  }

.selectItem {
  height: 0.8rem;
  line-height: 0.8rem;
  background-color: #fff;
  border-top: 0.02rem solid #f1f1f1;
  text-align: center;
  font-size: 0.28rem;
  i {
    margin: 0.23rem 0 0 0.1rem;
    color: #c3c3c3;
  }
}

header {
  .selector {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    background-color: #fff;
    text-align: center;
    font-size: 0.28rem;
    i {
      margin: 0 0 0 0.1rem;
      color: #c3c3c3;
    }
    span {
      max-width: 3.5rem;
      overflow: hidden;
    }
  }
}

.all {
  height: calc(100% - 1.92rem) !important;
  position: relative !important;
  background-color: #f5f7fa;
  .statementHead {
    width: 100%;
    text-align: center;
    // padding-top: 0.35rem;
    background-color: #fff;
    .statementpropnum {
      background-color: #f5f7fa;
      padding: 0.3rem 0 0.1rem;
      .propnumrel1 {
        /deep/ .van-progress__pivot {
          margin-left: -0.11rem;
        }
      }
      .propnumrel {
        position: relative;
        padding: 0 0.15rem;
        /deep/ .van-progress {
          border-radius: 0.5rem;
          .van-progress__portion {
            border-radius: 0.14rem;
            .van-progress__pivot {
              border-radius: 50%;
              min-width: 0.33rem !important;
              height: 0.33rem;
              right: 0;
              // margin-left: -.11rem;
            }
          }
        }
        .propnumcol {
          position: absolute;
          top: 0;
          right: 0.4rem;
          font-size: 0.25rem;
          color: #fff;
        }
        .numelzi {
          font-size: 0.26rem;
          margin: 0.25rem 0;
          .numelzh {
            color: #000000;
          }
          .numelzl {
            color: #0597ff;
            display: flex;
            align-items: center;
            justify-content: center;
            i {
              margin: 0.06rem 0 0 0.02rem;
            }
          }
        }
      }
    }
    .circle {
      margin-top: 0.7rem;
      .circletit {
        font-size: 0.24rem;
        color: #6f6f6f;
      }
      .circleclic {
        color: #4ba0f1;
        .circleclics1 {
          font-size: 0.42rem;
          display: inline-block;
          margin: 0.1rem 0;
        }
        .circleclics2 {
          font-size: 0.25rem;
          display: flex;
          justify-content: center;
          i {
            margin: 0.06rem 0 0 0.02rem;
          }
        }
      }
    }

    .statementHnum {
      padding: 0.2rem;
      padding-bottom: 0rem;
      .Hnumvfor {
        width: 22.8%;
        position: relative;
        background-color: #ECF5FF;
        border-radius: 3px;
        text-align: center;
        padding: 0.1rem 0.2rem;
        box-sizing: border-box;
        margin-bottom: 0.2rem;
        .smHnLnum {
          font-size: 0.42rem;
          color: #00a1ff;
        }
        .smHnLtit {
          font-size: 0.26rem;
          color: #8a8a8a;
        }
      }
    }
  }
  .statementFoot {
    background-color: #fff;
    margin-top: 0.2rem;
    .statmentperson {
      padding: 0.25rem 0.2rem;
      font-size: 0.32rem;
      box-sizing: border-box;
      .score-result {
        width: 0.4rem;
        height: 0.4rem;
        border: 0.02rem solid #409EFF;
        color: #409EFF;
        border-radius: 50%;
        font-size: 0.26rem;
        text-align: center;
        line-height: 0.4rem;
        margin-right: 0.1rem;
      }
    }
  }
}

.takI {
  font-size: 0.27rem;
  color: #f7b461;
  i {
    margin: 0.1rem 0.05rem 0 0;
  }
}

.statmentAnalysePie {
  position: relative;
  .PiePropNum {
    width: 1.5rem;
    text-align: center;
    position: absolute;
    left: 20%;
    top: 42%;
    font-size: 0.3rem;
  }
}

.review-status {
  // padding: 0.01rem 0.1rem;
  width: 1.2rem;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  color: #fff;
  border-radius: 2px;
  font-size: 0.26rem;
  background-color: #67c23a;
  margin-right: 0.14rem;
  margin-bottom: 0.1rem;
}

.indicator-list-title {
  padding: 0.2rem 0.2rem 0 0.2rem;
  box-sizing: border-box;
  font-size: 0.28rem;
}

.indicator-list {
  padding: 0.2rem;
  box-sizing: border-box;
  .indicator-item {
    background-color: white;
    margin-bottom: 0.2rem;
    padding: 0.2rem;
    box-sizing: border-box;
    border-radius: 8px;
    .indicator-item-info {
      display: flex;
      align-items: center;
      font-size: 0.28rem;
      margin-bottom: 0.2rem;
      .indicator-info-label {
        width: 2rem;
        color: black;
      }
      .indicator-info-value {
        // flex: 1;
        color: #89919F;
      }

    }
  }
}
</style>