cpdm_manage/src/components/PlanReport.vue

<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="90%"
      style="border-radius: 40px"
    >
      <div slot="title">
        <p
          style="
            text-align: center;
            font-size: 20px;
            margin-bottom: 20px;
            font-weight: 700;
          "
        >
          {{ planName }}报告
        </p>
        <div class="report_ge_title" style="margin-bottom: 20px">
          <div class="blue_t"></div>
          <div class="com">完成情况</div>
        </div>

        <div style="display: flex">
          <div class="chart_wrap" style="flex: 4">
            <div class="report_top_bingBo">
              <div class="isComStyle">
                总人数：&nbsp;&nbsp;{{ this.completeNum + this.unComplete }}人
              </div>
            </div>
            <div class="report_top_bingBo" style="margin-top: 20px">
              <div class="isComStyle">
                已完成<span>{{ this.completeNum }}人</span>
              </div>
              <div class="isUnComStyle">
                未完成<span>{{ this.unComplete }}人</span>
              </div>
            </div>
            <BingChart
              :options="options1"
              chartId="myPieChart1"
              chartName="完成度"
              v-show="this.unComplete != 0"
            />
          </div>
          <!-- v-show="this.unComplete != 0" -->
          <div style="flex: 8" class="report_top_right_out" v-show="this.unComplete != 0">
            <div class="report_top_right">
              <div style="font-size: 16px; letter-spacing: 1px">未完成人员列表</div>
              <div></div>
            </div>

            <el-table
              :data="complateTableData"
              :row-style="{ height: '0px', borderRadius: '20px' }"
              :cell-style="{ padding: '5px' }"
              :header-cell-style="{ background: '#F8F8F8', color: '#606266' }"
            >
              <el-table-column
                show-overflow-tooltip
                prop="userName"
                label="姓名"
                align="center"
                width=""
              >
              </el-table-column>
              <el-table-column
                prop="userNo"
                v-if="planType == '0'"
                label="学号"
                align="center"
                width=""
              >
              </el-table-column>
              <el-table-column
                prop="userNo"
                v-if="planType == '1'"
                label="编号"
                align="center"
                width=""
              >
              </el-table-column>
              <el-table-column
                prop="orgName"
                label="所属组织架构"
                align="center"
                width=""
              >
              </el-table-column>
            </el-table>
            <el-pagination
              class="pag_class"
              background
              @current-change="complateHandleCurrentChange"
              :current-page.sync="complatePageNum"
              layout="total, prev, pager, next"
              :page-size="complatePageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="complateTotal"
            >
            </el-pagination>
          </div>
          <div
            style="flex: 4; display: flex; flex-direction: column; align-items: center"
            class="report_top_right_out"
            v-show="this.unComplete == 0"
          >
            <img style="width: 60%" src="../assets/img/report/task.png" />
            <div style="text-align: center; margin-top: 20px; font-size: 16px">
              全部人员已完成测试
            </div>
          </div>
          <div style="flex: 4" class="report_top_right_out" v-show="this.unComplete == 0">
            &nbsp;
          </div>
        </div>
        <div class="report_ge_title" style="margin-top: 40px; margin-bottom: 20px">
          <div class="blue_t"></div>
          <div class="com">已完成人员测评情况</div>
        </div>
        <div style="display: flex">
          <div class="chart_wrap" style="flex: 4">
            <div class="report_top_bingBo">
              <div class="isComStyle">
                已完成人数：&nbsp;&nbsp;{{ this.completeNum }}人
              </div>
            </div>
            <div class="report_top_bingBo" style="margin-top: 20px">
              <div class="isComStyle">
                心理健康<span>{{ this.completeNum - this.abnormalNum }}人</span>
              </div>
              <div class="isUnComStyle">
                心理异常<span>{{ this.abnormalNum }}人</span>
              </div>
            </div>
            <BingChart :options="options6" chartId="myPieChart6" chartName="完成度" />
          </div>
          <div style="flex: 8; margin-left: 20px" class="report_top_right_out">
            <div class="report_top_bingBo">
              <div class="isComStyle" style="font-size: 16px; text-align: center">
                心理异常人次统计
              </div>
            </div>
            <div style="height: 100%; width: 100%" ref="echarts_zhu"></div>
          </div>
        </div>

        <div class="table-content">
          <div
            class="radio_group_style"
            style="display: flex; justify-content: space-between; align-items: center"
          >
            <el-radio-group
              v-model="userType"
              style="margin-top: 40px; margin-bottom: 20px"
              @input="userTypeChange"
            >
              <el-radio-button label="心理异常"></el-radio-button>
              <el-radio-button label="抑郁"></el-radio-button>
              <el-radio-button label="压力"></el-radio-button>
              <el-radio-button label="焦虑"></el-radio-button>
              <el-radio-button label="视觉整合能力"></el-radio-button>
              <!-- <el-radio-button label="其他"></el-radio-button> -->
            </el-radio-group>

            <el-button
              style="margin-top: 40px; margin-bottom: 20px"
              @click="funExport"
              type="success"
              round
              class="add_class"
            >
              心理异常导出
            </el-button>
          </div>

          <el-table
            :data="tableData"
            :cell-style="{ padding: '5px' }"
            :header-cell-style="{ background: '#F8F8F8', color: '#606266' }"
          >
            <el-table-column
              show-overflow-tooltip
              prop="userName"
              label="姓名"
              align="center"
              width=""
            >
            </el-table-column>
            <el-table-column
              prop="userNo"
              v-if="planType == '0'"
              label="学号"
              align="center"
              width=""
            >
            </el-table-column>
            <el-table-column
              prop="userNo"
              v-if="planType == '1'"
              label="编号"
              align="center"
              width=""
            >
            </el-table-column>
            <el-table-column prop="orgName" label="所属组织架构" align="center" width="">
            </el-table-column>
            <el-table-column label="症状" align="center" v-if="userType == '心理异常'">
              <template slot-scope="scope">
                <div
                  v-show="scope.row.symptom == '重度'"
                  style="display: flex; align-items: center; justify-content: center"
                >
                  <img
                    style="width: 18px; height: 18px; margin-right: 4px"
                    src="../assets/img/report/1.png"
                    alt=""
                  />
                  <div style="color: #d91b00">{{ scope.row.symptom }}</div>
                </div>
                <div
                  v-show="scope.row.symptom == '中度'"
                  style="display: flex; align-items: center; justify-content: center"
                >
                  <img
                    style="width: 18px; height: 18px; margin-right: 4px"
                    src="../assets/img/report/2.png"
                    alt=""
                  />
                  <div style="color: #f0a900">{{ scope.row.symptom }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="症状" align="center" v-if="userType != '心理异常'">
              <template slot-scope="scope">
                <div
                  v-show="scope.row.dimensionSymptom == '重度'"
                  style="display: flex; align-items: center; justify-content: center"
                >
                  <img
                    style="width: 18px; height: 18px; margin-right: 4px"
                    src="../assets/img/report/1.png"
                    alt=""
                  />
                  <div style="color: #d91b00">{{ scope.row.dimensionSymptom }}</div>
                </div>
                <div
                  v-show="scope.row.dimensionSymptom == '中度'"
                  style="display: flex; align-items: center; justify-content: center"
                >
                  <img
                    style="width: 18px; height: 18px; margin-right: 4px"
                    src="../assets/img/report/2.png"
                    alt=""
                  />
                  <div style="color: #f0a900">{{ scope.row.dimensionSymptom }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="260px" align="center">
              <template slot-scope="scope">
                <div class="detail_button_out">
                  <div class="detail_button" @click="selectPlan(scope.row)">
                    <img src="../assets/img/table/search.png" />
                    <span> 个人报告查看 </span>
                  </div>
                  <div class="detail_button" @click="queryQS(scope.row)">
                    <img src="../assets/img/table/search.png" />
                    <span> 趋势查看 </span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          class="pag_class"
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          layout="total, prev, pager, next"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
        >
        </el-pagination>
        <div class="report_ge_title" style="margin-top: 40px; margin-bottom: 20px">
          <div class="blue_t"></div>
          <div class="com">已完成人员中各维度统计</div>
        </div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="维度选择">
            <el-select
              v-model="dime"
              @change="userDimensionality"
              placeholder="请选择维度"
            >
              <el-option
                v-for="item in dimeList"
                :key="item.id"
                :label="item.paramName"
                :value="item.paramValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级选择">
            <el-select v-model="grade" placeholder="请选择年级" @change="gradeChange">
              <el-option
                v-for="item in gradeList"
                :key="item.id"
                :label="item == '全部' ? '' : item == -1 ? '教师组' : `${item}级`"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="组织架构选择" class="org_class">
            <el-select
              :popper-append-to-body="false"
              collapse-tags
              multiple
              v-model="orgName"
              @change="userOrgName"
              placeholder="请选择组织架构"
            >
              <el-option
                v-for="item in orgList"
                :key="item.id"
                :label="item.orgName"
                :value="item.orgNo"
              >
              </el-option>
              <div class="button_report">
                <el-button
                  size="mini"
                  type="success"
                  class="all_select"
                  @click="selectAllFun"
                >
                  全选
                </el-button>
                <el-button size="mini" class="all_clear" @click="clearAllFun">
                  清空
                </el-button>
              </div>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="radio_group_style">
          <el-radio-group
            v-model="tabName"
            style="margin-top: 20px; margin-bottom: 20px"
            @input="tabFun"
          >
            <el-radio-button
              :label="item.paramValue"
              v-for="item in subDimeList"
              :key="item.id"
              >{{ item.paramName }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <div style="display: flex; flex-direction: row">
          <el-radio-group
            v-model="subValue"
            @change="userSubFun"
            style="
              width: 100%;
              flex: 3;
              display: flex;
              flex-direction: row;
              justify-content: left;
            "
          >
            <el-radio
              v-for="item in subOption"
              :key="item"
              :label="item"
              style="margin-top: 20px"
            ></el-radio>
          </el-radio-group>
        </div>
        <div style="display: flex; flex-direction: row">
          <div
            style="
              flex: 4;
              width: 100%;
              display: flex;
              flex-direction: row;
              margin-top: 20px;
              justify-content: center;
              margin-bottom: 40px;
            "
          >
            <div style="flex: 1">
              <div style="display: flex; font-size: 16px; flex-direction: row">
                <div style="display: flex; flex-direction: column">
                  <span class="sex_class">{{ tabNameCurrent }}</span>
                  <span class="sex_class">心理健康</span>
                  <span class="sex_class"
                    >中重度{{ dime == "躯体化" ? "压力" : dime }}</span
                  >
                </div>
                <div style="display: flex; flex-direction: column">
                  <span class="sex_class"
                    >:<span style="visibility: hidden">你</span></span
                  >
                  <span class="sex_class"
                    >:<span style="visibility: hidden">你</span></span
                  >
                  <span class="sex_class"
                    >:<span style="visibility: hidden">你</span></span
                  >
                </div>
                <div style="display: flex; flex-direction: column">
                  <span class="sex_class1"> {{ subValue }}&nbsp;{{ subAll }}人</span>
                  <span
                    class="sex_class1"
                    style="background-color: #5470c6; text-align: center; color: #ffffff"
                  >
                    {{ subAll-subSingle }}人</span
                  >
                  <span
                    class="sex_class1"
                    style="background-color: #ffae00; text-align: center; color: #ffffff"
                  >
                    {{ subSingle }}人</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="chart_wrap" style="flex: 4">
            <BingChart2
              :options="options7"
              chartId="myPieChart7"
              chartName="心理健康异常"
            />
          </div>
          <div class="chart_wrap" style="flex: 4">&nbsp;</div>
        </div>
        <div class="finish_class">
          <el-table
            :data="subData"
            :row-style="{ height: '0px' }"
            :cell-style="{ padding: '5px' }"
            :header-cell-style="{ background: '#F8F8F8', color: '#606266' }"
          >
            <el-table-column
              show-overflow-tooltip
              prop="userName"
              label="姓名"
              align="center"
              width=""
            >
            </el-table-column>
            <el-table-column
              prop="userNo"
              v-if="planType == '0'"
              label="学号"
              align="center"
              width=""
            >
            </el-table-column>
            <el-table-column
              prop="userNo"
              v-if="planType == '1'"
              label="编号"
              align="center"
              width=""
            >
            </el-table-column>
            <el-table-column prop="orgName" label="所属组织架构" align="center" width="">
            </el-table-column>
            <el-table-column
              prop="dimensionName"
              label="维度"
              :formatter="forDimen"
              align="center"
              width=""
            >
            </el-table-column>

            <el-table-column label="症状" align="center">
              <template slot-scope="scope">
                <div
                  v-show="scope.row.dimensionSymptom == '重度'"
                  style="display: flex; align-items: center; justify-content: center"
                >
                  <img
                    style="width: 18px; height: 18px; margin-right: 4px"
                    src="../assets/img/report/1.png"
                    alt=""
                  />
                  <div style="color: #d91b00">{{ scope.row.dimensionSymptom }}</div>
                </div>
                <div
                  v-show="scope.row.dimensionSymptom == '中度'"
                  style="display: flex; align-items: center; justify-content: center"
                >
                  <img
                    style="width: 18px; height: 18px; margin-right: 4px"
                    src="../assets/img/report/2.png"
                    alt=""
                  />
                  <div style="color: #f0a900">{{ scope.row.dimensionSymptom }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="260px" align="center">
              <template slot-scope="scope">
                <div class="detail_button_out">
                  <div class="detail_button" @click="selectPlan(scope.row)">
                    <img src="../assets/img/table/search.png" />
                    <span> 个人报告查看 </span>
                  </div>
                  <div class="detail_button" @click="queryQS(scope.row)">
                    <img src="../assets/img/table/search.png" />
                    <span> 趋势查看 </span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <el-pagination
          class="pag_class"
          background
          @current-change="subHandleCurrentChange"
          :current-page.sync="subPageNum"
          layout="total, prev, pager, next"
          :page-size="subPageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="subTotal"
        >
        </el-pagination>
        <div class="report_ge_title" style="margin-top: 40px; margin-bottom: 20px">
          <div class="blue_t"></div>
          <div class="com">可疑人员</div>
        </div>
        <div class="finish_class">
          <el-table
            :data="doubtfulData"
            :row-style="{ height: '0px' }"
            :cell-style="{ padding: '5px' }"
            :header-cell-style="{ background: '#F8F8F8', color: '#606266' }"
          >
            <el-table-column
              show-overflow-tooltip
              prop="userName"
              label="姓名"
              align="center"
              width=""
            >
            </el-table-column>
            <el-table-column
              prop="userNo"
              v-if="planType == '0'"
              label="学号"
              align="center"
              width=""
            >
            </el-table-column>
            <el-table-column
              prop="userNo"
              v-if="planType == '1'"
              label="编号"
              align="center"
              width=""
            >
            </el-table-column>
            <el-table-column prop="orgName" label="所属组织架构" align="center" width="">
            </el-table-column>
            <el-table-column
              prop="usedTime1"
              label="心理健康测评基础量表用时"
              align="center"
              width=""
            >
            </el-table-column>
            <el-table-column
              prop="usedTime2"
              label="心理健康评估任务用时"
              align="center"
              width=""
            >
            </el-table-column>
            <el-table-column label="操作" width="260px" align="center">
              <template slot-scope="scope">
                <div class="detail_button_out">
                  <div class="detail_button" @click="selectPlan(scope.row)">
                    <img src="../assets/img/table/search.png" />
                    <span> 个人报告查看 </span>
                  </div>
                  <div class="detail_button" @click="queryQS(scope.row)">
                    <img src="../assets/img/table/search.png" />
                    <span> 趋势查看 </span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column
              prop="dimensionName"
              label="维度"
              :formatter="forDimen"
              align="center"
              width=""
            >
            </el-table-column> -->
            <!-- <el-table-column prop="dimensionSymptom" label="症状" align="center" width="">
            </el-table-column> -->
          </el-table>
        </div>
        <el-pagination
          class="pag_class"
          background
          @current-change="doubtfulHandleCurrentChange"
          :current-page.sync="doubtfulPageNum"
          layout="total, prev, pager, next"
          :page-size="doubtfulPageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="doubtfulTotal"
        >
        </el-pagination>
        <!-- <div class="report_ge_title" style="margin-top: 40px; margin-bottom: 20px">
          <div class="blue_t"></div>
          <div class="com">满分人员</div>
        </div>
        <div class="finish_class">
          <el-table
            :data="fullmarkData"
            :row-style="{ height: '0px' }"
            :cell-style="{ padding: '5px' }"
            :header-cell-style="{ background: '#F8F8F8', color: '#606266' }"
          >
            <el-table-column
              show-overflow-tooltip
              prop="userName"
              label="姓名"
              align="center"
              width=""
            >
            </el-table-column>
            <el-table-column prop="userNo" label="学号" align="center" width="">
            </el-table-column>
            <el-table-column prop="orgName" label="所属组织架构" align="center" width="">
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          class="pag_class"
          background
          @current-change="fullmarkHandleCurrentChange"
          :current-page.sync="fullmarkPageNum"
          layout="total, prev, pager, next"
          :page-size="fullmarkPageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="fullmarkTotal"
        >
        </el-pagination> -->
      </div>
    </el-dialog>
    <Report1 ref="register" @search="searchTarget" />
    <div></div>
  </div>
</template>
<script>
//引入echarts组件
import * as echarts from "echarts";
import PieChart from "@/components/PieChart";
import BingChart from "@/components/BingChart";
import BingChart2 from "@/components/BingChart2";
import { basePath } from "../utils/http";
import report1 from "../components/Report1.vue";
import { reject, resolve } from "core-js/fn/promise";
export default {
  components: {
    BingChart,
    BingChart2,
    Report1: report1,
  },
  data() {
    return {
      basePath: basePath,
      //获取计划名称
      planName: "",
      planId: "",
      dialogVisible: false,
      echarts_bing: "",
      option_bing: {},

      echarts_zhu: "",
      option_zhu: {},
      total: 0,
      pageSize: 10,
      pageNum: 1,
      tableData: [],
      options1: [],
      options2: [],
      options3: [],
      options4: [],
      options5: [],
      options6: [],
      options7: [],
      completeNum: 0,
      unComplete: 0,
      userType: "心理异常",
      //维度选择--字段
      dime: "焦虑",
      dimeList: [],

      //组织架构列表
      orgList: [],
      //组织编号name
      orgName: [],
      //子维度的列表
      subDimeList: [],
      //子维度默认绑定的值
      tabName: "1",

      tabNameCurrent: "性别",
      //子维度的子选项
      subValue: "",
      subOption: [],

      //子维度的人员显示数组
      subData: [],
      //子维度--第几页
      subPageNum: 1,
      //子维度--一页多少条
      subPageSize: 10,
      //子维度总共多少条
      subTotal: 0,

      dimensionName: "",
      //未完成的分页--每页多少条
      complatePageSize: 6,
      //未完成的分页--第几页
      complatePageNum: 1,
      //未完成的数据
      complateTableData: [],
      //未完成的总条数
      complateTotal: 0,
      abnormalNum: 0,
      grade: "",
      gradeList: [],
      subAll: 0,
      subSingle: 0,

      //可疑人员总共变量
      doubtfulData: [],
      //可疑人员第几页
      doubtfulPageNum: 1,
      //可疑人员每页条数
      doubtfulPageSize: 10,
      //每页多少条
      doubtfulTotal: 0,
      //----------满分人员----------
      //满分人员总变量
      fullmarkData: [],
      //满分人员第几页
      fullmarkPageNum: 1,
      //满分人员每页条数
      fullmarkPageSize: 10,
      //满分人员每页多少条
      fullmarkTotal: 0,
      planType: "",
    };
  },
  mounted() {
    this.echarts_zhu = this.$refs.echarts_zhu;

    this.option_zhu = {
      title: {
        text: "",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          // shadowStyle:{
          // color:'rgba(0,0,0,0.5)',
          // shadowBlur: 10,
          // shadowOffsetX:0,
          // shadowOffsetY:'0'
          // }
        },
        formatter: function (params) {
          var relVal = "";
          let na = params[0].name;
          for (var i = 0, l = params.length; i < l; i++) {
            relVal += params[i].marker + na + " : " + params[i].value + "人次";
          }
          return relVal;
        },
        // formatter: "{b} : {c} % ",

        // formatter: function (params,trigger) {

        //   return '{a} <br/>{b} : {c} <br/>百分比 : {d}%'
        // },
      },
      legend: {},
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: [],
        // axisLabel: {
        //   width: 40, //设置内容宽度
        // //   overflow:'break',
        //   overflow: "truncate",
        // },
        // axisLabel: {
        //   formatter: function (params) {
        //     return "中等分值";
        //   },
        // },
      },
      // dataZoom: {
      //   type: "inside", //放大缩小x轴数值
      // },
      yAxis: {
        name: "人次",
        // max: 100,
        type: "value",
        boundaryGap: [0, 0.01],
        minInterval: 1,
      },
      series: [
        {
          type: "bar",
          data: [],
          barWidth: "15", //修改柱状图的宽度
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
              //通过修改前4个参数，可以实现不同的渐变方向
              /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
              0,
              0,
              0,
              1,
              [
                {
                  //代表渐变色从正上方开始
                  offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                  color: "#644BFD",
                }, //柱图渐变色
                {
                  offset: 1, //指100%处的颜色
                  color: "#00F6E3",
                },
              ]
            ),
            borderWidth: 2,
            // borderColor: "#2EE053",
            barBorderRadius: [10, 10, 10, 10], //修改柱状图圆角
          },
          label: {
            show: true,
            position: "top",
            color: "#006FFF",
            formatter: function (params) {
              return parseInt(params.value) + "人次";
            },
          },
        },
      ],
    };
    // myChart.setOption(option_bing);

    //监听页面大小是否变化
    //如果变化则需要
    window.addEventListener("resize", this.echartsAllSize);
  },
  destroyed() {
    window.removeEventListener("resize", this.echartsAllSize);
  },
  methods: {
    queryQS(val) {
      let url = "/manage/tendency";
      this.bus.$emit("menuStatusUpdate", url);
      //跳转到趋势统计的页面
      //规定好跳转到哪个页面--然后跳转的类型
      // this.$router.push({path:'/manage/tendency',query:{orgNo:'1212',type:'1'}})
      sessionStorage.setItem("individualTendency", JSON.stringify(val));
      this.$router.push({
        path: "/manage/individualTendency",
      });
    },
    selectAllFun() {
      this.getOrgList1().then(() => {
        let params = {
          dimensionName: this.dime,
          orgList: this.orgName,
          planId: this.planId,
          quesType: this.tabName,
          quesValue: this.subValue,
        };
        this.queryBread(params);
      });
    },
    clearAllFun() {
      this.orgName = [];
      let params = {
        dimensionName: this.dime,
        orgList: this.orgName,
        planId: this.planId,
        quesType: this.tabName,
        quesValue: this.subValue,
      };
      this.queryBread(params);
      //清空的时候也是选择的全部
    },
    selectPlan(val) {
      this.addRegisterUser(val);
    },
    addRegisterUser(val) {
      let obj = val;
      obj.planId = this.planId;
      obj.planName = this.planName;
      // obj.planType 
      obj.planType =this.planType;
      this.$refs.register.open(obj);
    },
    //导出心理异常的人员
    funExport() {
      // this.$http.getDown(
      //   `/planUser/exportCompletedUserHighRisk?planId=${this.planId}`,
      //   {},
      //   (res) => {
      //     // if (res && res.code == 200) {
      //     var blob = new Blob([res.data], {
      //       type: [
      //         "application/vnd.ms-excel;charset=utf-8", // xls
      //         "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8", // xlsx
      //       ],
      //     });
      //     //var url = window.URL.createObjectURL(blob);
      //     //新窗口打开
      //     var link = document.createElement("a");
      //     link.href = window.URL.createObjectURL(blob);
      //     //这个顺属性加了浏览器回闪一下
      //     // link.target = "_blank";
      //     link.click();
      //   }
      // );
      //下载
      let a = document.createElement("a");
      document.body.appendChild(a);

      a.setAttribute(
        "href",
        basePath + `/planUser/exportCompletedUserHighRisk?planId=${this.planId}`
      );
      a.click();
    },
    echartsAllSize() {
      let flag = false;
      setTimeout(() => {
        flag = true;
        if (this.dialogVisible && flag) {
          //设置变化的大小
          let myChart1 = echarts.init(this.echarts_zhu);
          myChart1.resize();
        }
      }, 1000);
      //大小自适应
      //查看当前页面是否显示
    },
    //change
    //年级改变参数
    gradeChange(val) {
      this.getOrgList(val);
    },
    //格式化页面数据
    forDimen(row) {
      if (row.dimensionName == "躯体化") {
        return "压力";
      } else {
        return row.dimensionName;
      }
    },
    //当子选项改变
    userSubFun(val) {
      //子选项改变以后----需要显示
      //渲染占比
      //改变以后需要调用--且显示饼状图
      //调用统计
      let params = {
        dimensionName: this.dime,
        orgList: this.orgName,
        planId: this.planId,
        quesType: this.tabName,
        quesValue: this.subValue,
      };
      this.queryBread(params);
    },
    //tab状态改变
    tabFun(a) {
      // this.tabNameCurrent=
      let linT = [];
      linT = this.subDimeList.filter((item) => {
        return item.paramValue == a;
      });

      //修改名字
      this.tabNameCurrent = linT[0].paramName;

      //设置选中的文字

      // this.subValue = "";
      // this.tabName = a.name;
      // //根据已选的tab ---
      // //根据已选的value--
      // //开始查询下边的小项
      this.getSubOption(a);
      // this.getSubOption(a.paneName);
      //根据点击的name---查询里边的选项
      //查询出来  下边的选项
    },
    //组织架构--选择变化
    userOrgName() {
      let params = {
        dimensionName: this.dime,
        orgList: this.orgName,
        planId: this.planId,
        quesType: this.tabName,
        quesValue: this.subValue,
      };
      this.queryBread(params);
    },
    //维度选择
    userDimensionality() {
      this.queryStudentData();
      //查询饼状图的数据
      let params = {
        dimensionName: this.dime,
        orgList: this.orgName,
        planId: this.planId,
        quesType: this.tabName,
        quesValue: this.subValue,
      };
      this.queryBread(params);
    },
    open(val) {
      this.planType = val.planType;
      this.planId = val.id;
      this.planName = val.planName;
      this.userType = "心理异常";
      this.pageNum = 1;
      this.dialogVisible = true;
      this.isFin();
      this.isScore();
      this.searchTarget();
      //个维度异常初次调用
      this.queryGrade();
      //获取维度列表
      this.getDimensionList();
      //获取组织架构信息

      //获取可疑人员列表
      this.doubtfulSearchList();
      //获取满分人员列表
      this.fullmarkSearchList();
    },
    //查询计划下年级
    queryGrade() {
      this.$http.get(`/planOrg/findPlanGrade?planId=${this.planId}`, {}, (res) => {
        if (res && res.code == 200) {
          this.gradeList = res.data;

          this.gradeList.unshift("全部");
          this.grade = res.data[0];
          this.getOrgList(this.grade);

          // this.orgName = [res.data[0].orgNo];
          // this.orgList = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //管理端统计完成情况
    isFin() {
      //调用接口返回信息
      let url = `/plan/countComplete?planId=${this.planId}`;
      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          this.unComplete = res.data[0];
          this.completeNum = res.data[1];
          // this.getPlanDimNun();
          this.isAbnormal();
        }
      });
    },
    isScore() {
      let url = `/plan/countTotalNumber?planId=${this.planId}`;
      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          let nameList = [];
          let scoreList = [];
          for (const item in res.data) {
            //
            nameList.push(item);
            scoreList.push(res.data[item]);
          }
          this.option_zhu.xAxis.data = nameList;
          this.option_zhu.series[0].data = scoreList;
        }
      });
    },
    // 查询不同维度的中重度数量
    getPlanDimNun() {
      this.$http.get(
        `userRecordScore/countNumByPlanDim?planId=${this.planId}`,
        {},
        (res) => {
          let dimensionList = res.data;
          this.options1 = [
            { value: this.completeNum, name: "已完成" },
            { value: this.unComplete, name: "未完成" },
          ];

          // this.options2 = [
          //   { value: this.completeNum - dimensionList[0]["焦虑"], name: "焦虑" },
          //   { value: parseInt(dimensionList[0]["焦虑"]), name: "焦虑占比" },
          // ];

          // this.options3 = [
          //   { value: this.completeNum, name: "已完成人数" },
          //   { value: parseInt(dimensionList[1]["抑郁"]), name: "抑郁占比" },
          // ];

          // this.options4 = [
          //   { value: this.completeNum, name: "已完成人数" },
          //   { value: parseInt(dimensionList[2]["压力"]), name: "压力占比" },
          // ];

          // this.options5 = [
          //   { value: this.completeNum, name: "已完成人数" },
          //   { value: parseInt(dimensionList[3]["精神障碍"]), name: "精神障碍占比" },
          // ];

          this.options6 = [
            {
              value: this.completeNum - this.abnormalNum,
              name: "心理健康",
            },
            { value: this.abnormalNum, name: "心理异常" },
          ];

          let nameList = [];
          // nameList.push("心理健康");
          nameList.push("抑郁");
          nameList.push("压力");
          nameList.push("焦虑");
          nameList.push("视觉整合能力");
          let scoreList = [];
          // scoreList.push(
          //   parseInt(((this.completeNum - this.abnormalNum) / this.completeNum) * 100)
          // );
          scoreList.push(dimensionList[1]["抑郁"]);
          scoreList.push(dimensionList[2]["压力"]);
          scoreList.push(dimensionList[0]["焦虑"]);
          scoreList.push(dimensionList[3]["视觉整合能力"]);

          this.echarts_zhu = this.$refs.echarts_zhu;
          this.option_zhu.xAxis.data = nameList;
          this.option_zhu.series[0].data = scoreList;
          let myChart1 = echarts.init(this.echarts_zhu);
          myChart1.setOption(this.option_zhu);
        }
      );
    },
    userTypeChange(val) {
      this.pageNum = 1;
      if (val == "心理异常") {
        this.getAbnormalList();
      } else {
        this.dimensionName = val;
        if (val == "压力") {
          this.getDimensionPeopleList("躯体化");
        } else {
          this.getDimensionPeopleList(val);
        }
      }
    },
    searchTarget() {
      this.pageNum = 1;
      this.getUnCompleteList();
      // this.getDimensionPeopleList("焦虑");
      //查询心理异常人员
      // this.isAbnormal()
      this.getAbnormalList();
    },
    //进来调用已选列表接口
    searchList() {
      let url = `/planUser/findUserProgressByPage?pageSize=${this.pageSize}&pageNum=${this.pageNum}&planId=${this.planId}`;
      this.$http.get(url, {}, (res) => {
        if (res && res.code == 200) {
          this.tableData = res.data.content;
          this.total = res.data.totalElements;
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    //每页多少条
    handleSizeChange(val) {
      //将首页重置为1时---且总条数变化
      //设置为当前总条数
    },
    complateHandleCurrentChange(val) {
      this.complatePageNum = val;
      this.getUnCompleteList();
    },

    handleCurrentChange(val) {
      this.pageNum = val;
      if (this.userType == "心理异常") {
        this.getAbnormalList();
      } else if (this.userType == "压力") {
        //---
        this.getDimensionPeopleList("躯体化");
      } else {
        this.getDimensionPeopleList(this.userType);
      }
      // this.searchList();
    },
    formaCom(val) {
      if (val.isComplete == "0") {
        return "未完成";
      } else {
        return "已完成";
      }
    },

    // 查询未完成人员
    getUnCompleteList() {
      this.$http.get(
        `planUser/findIncompleteUser?planId=${this.planId}&pageSize=${this.complatePageSize}&pageNum=${this.complatePageNum}`,
        {},
        (res) => {
          if (res && res.code == 200) {
            this.complateTableData = res.data.content;
            this.complateTotal = res.data.totalElements;
          } else {
            // this.$toast.fail(res.msg);
            this.$message.error(res.msg);
          }
        }
      );
    },
    // 各维度异常人员
    getDimensionPeopleList(val) {
      this.$http.get(
        `planUser/findCompletedUserByDim?planId=${this.planId}&dimensionName=${val}&pageSize=${this.pageSize}&pageNum=${this.pageNum}`,
        {},
        (res) => {
          if (res && res.code == 200) {
            this.tableData = res.data.content;
            this.total = res.data.totalElements;
          } else {
            // this.$toast.fail(res.msg);
            this.$message.error(res.msg);
          }
        }
      );
    },
    //查询统计端的--心理健康异常的人员
    isAbnormal() {
      //调用接口返回信息
      let url = `/planUser/countCompletedUserHighRisk?planId=${this.planId}`;
      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          // this.unComplete = res.data[0];
          // this.completeNum = res.data[1];
          this.abnormalNum = res.data;
          this.getPlanDimNun();
        }
      });
    },
    // 查询精神健康异常人员
    getAbnormalList() {
      this.$http.get(
        `planUser/findCompletedUserHighRisk?planId=${this.planId}&pageSize=${this.pageSize}&pageNum=${this.pageNum}`,
        {},
        (res) => {
          if (res && res.code == 200) {
            this.tableData = res.data.content;
            this.total = res.data.totalElements;
          } else {
            this.$message.error(res.msg);
          }
        }
      );
    },
    //查询维度选择框
    getDimensionList() {
      this.$http.get(`/param/findAllByType?type=dimension`, {}, (res) => {
        if (res && res.code == 200) {
          this.dimeList = res.data;
          this.getSexList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //组织架构选择--
    getOrgList1() {
      //修改为promise模式以便 进行调用回调的操作
      return new Promise((resolve, reject) => {
        this.$http.get(`/planOrg/findAllByPlanId?planId=${this.planId}`, {}, (res) => {
          if (res && res.code == 200) {
            resolve();
            if (res.data.length > 0) {
              let list = [];
              for (let i = 0; i < res.data.length; i++) {
                list.push(res.data[i].orgNo);
              }
              this.orgName = list;
              this.orgList = res.data;
            }
          } else {
            reject();
            this.$message.error(res.msg);
          }
        });
      });
    },
    getOrgList(val) {
      let url = "";
      if (val == "全部") {
        this.getOrgList1();
      } else {
        url = `/planOrg/findPlanGradeOrg?planId=${this.planId}&grade=${val}`;
        this.$http.get(url, {}, (res) => {
          if (res && res.code == 200) {
            if (res.data.length > 0) {
              let list = [];
              for (let i = 0; i < res.data.length; i++) {
                list.push(res.data[i].orgNo);
              }
              this.orgName = list;
            }
            this.orgList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    //获取维度下变的子项维度
    getSexList() {
      let url;
      if (this.planType == "0") {
        url = `/param/findAllByType?type=ques`;
      } else {
        url = `/param/findAllByType?type=ques2`;
      }

      this.$http.get(url, {}, (res) => {
        if (res && res.code == 200) {
          this.subDimeList = res.data;
          //调用性别的选项
          this.tabName=res.data[0].paramValue
          this.getSubOption(this.tabName);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //获取子维度的下边的选项
    getSubOption(val) {
      this.$http.get(`/questionnaire/findListById?id=${val}`, {}, (res) => {
        if (res && res.code == 200) {
          this.subOption = res.data;
          this.subValue = res.data[0];

          //选中子维度
          let params = {
            dimensionName: this.dime,
            orgList: this.orgName,
            planId: this.planId,
            quesType: this.tabName,
            quesValue: this.subValue,
          };
          this.queryBread(params);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //查询--最终的子维度的---饼图
    queryBread(params) {
      // dimensionName :this.dime,
      //   orgList:[],
      //   planId :this.planId,
      //   quesType:this.tabName,
      //   quesValue:this.subValue
      this.$http.get(
        `/userRecordScore/countByPlanIdAndOrgListAndQues?dimensionName=${params.dimensionName}&orgList=${params.orgList}&planId=${params.planId}&quesType=${params.quesType}&quesValue=${params.quesValue}`,
        {},
        (res) => {
          if (res && res.code == 200) {
            this.subAll = res.data.totalNum;
            this.subSingle = res.data.highNum;
            this.options7 = [
              {
                value: res.data.totalNum,
                name: `已完成${this.subValue}`,
              },
              {
                value: res.data.highNum,
                name: `中重度${this.dime == "躯体化" ? "压力" : this.dime}`,
              },
            ];
      
            // {{ subValue }}&nbsp;&nbsp;&nbsp;&nbsp;中重度{{ dime}}
            this.queryStudentData();
            //调用接口开始查询选择的列表
          } else {
            this.$message.error(res.msg);
          }
        }
      );
    },
    queryStudentData() {
      let params = {
        dimensionName: this.dime,
        orgList: this.orgName,
        planId: this.planId,
        quesType: this.tabName,
        quesValue: this.subValue,
      };
      //修改文本
      //获取需要传输的参数
      this.$http.get(
        `/userRecordScore/findByPlanIdAndOrgListAndQuesList?dimensionName=${params.dimensionName}&orgList=${params.orgList}&pageNum=${this.subPageNum}&pageSize=${this.subPageSize}&planId=${params.planId}&quesType=${params.quesType}&quesValue=${params.quesValue}`,
        {},
        (res) => {
          if (res && res.code == 200) {
            this.subData = res.data.content;
            this.subTotal = res.data.totalElements;
            //调用接口开始查询选择的列表
          } else {
            this.$message.error(res.msg);
          }
        }
      );
    },
    //子项当前页改变
    subHandleCurrentChange(val) {
      this.subPageNum = val;
      this.queryStudentData();
    },
    //可疑人员列表查询
    doubtfulSearchList() {
      this.$http.get(
        `/planUser/findCompletedNotSeriousUserList?pageNum=${this.doubtfulPageNum}&pageSize=${this.doubtfulPageSize}&planId=${this.planId}`,
        {},
        (res) => {
          if (res && res.code == 200) {
            this.doubtfulData = res.data.content;
            this.doubtfulTotal = res.data.totalElements;
            //调用接口开始查询选择的列表
          } else {
            this.$message.error(res.msg);
          }
        }
      );
    },
    //可疑人员分页变化
    doubtfulHandleCurrentChange(val) {
      this.doubtfulPageNum = val;
      //查询可疑人员列表数据
      this.doubtfulSearchList();
    },
    //满分人员列表查询
    fullmarkSearchList() {
      this.$http.get(
        `/planUser/findCompletedFullMarksUserList?pageNum=${this.fullmarkPageNum}&pageSize=${this.fullmarkPageSize}&planId=${this.planId}`,
        {},
        (res) => {
          if (res && res.code == 200) {
            this.fullmarkData = res.data.content;
            this.fullmarkTotal = res.data.totalElements;
            //调用接口开始查询选择的列表
          } else {
            this.$message.error(res.msg);
          }
        }
      );
    },
    //满分人员分页变化
    fullmarkHandleCurrentChange(val) {
      this.fullmarkPageNum = val;
      //查询可疑人员列表数据
      this.fullmarkSearchList();
    },
  },
};
</script>
<style scoped>
.report_top_right_out >>> .el-table__header-wrapper {
  border-radius: 20px;
  background-color: #f8f8f8;
}
.table-content >>> .el-table__header-wrapper {
  border-radius: 20px;
  background-color: #f8f8f8;
}
.finish_class >>> .el-table__header-wrapper {
  border-radius: 20px;
  background-color: #f8f8f8;
}
.radio_group_style >>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  color: #ffffff;
  background-color: #00bf78;
}
.radio_group_style >>> .el-radio-button__inner {
  background-color: #f5f7fa;
}
.org_class >>> .el-input__inner {
  width: 300px !important;
}
.org_class >>> .el-input {
  width: 300px;
}
.org_class >>> .el-scrollbar__bar.is-vertical {
  padding-bottom: 40px !important;
}
.org_class >>> .el-select-dropdown__wrap {
  padding-bottom: 40px !important;
}
</style>
<style>
.el-dialog {
  border-radius: 20px !important;
}
.el-tabs__content {
  display: contents !important;
}

/* .el-scrollbar {
  padding-bottom: 40px !important;
} */
/* .el-scrollbar {
  padding-bottom: 40px !important;
} */
</style>

<style lang="less" scoped>
.pag_class /deep/ .el-input__inner {
  width: 100% !important;
}

.chart_wrap {
  //flex: 1;
  // height: 450px;
  .report_top_bingBo {
    display: flex;
    justify-content: space-around;
    .isComStyle {
      font-size: 16px;
      span {
        background-color: #5470c6;
        padding: 5px 20px;
        font-size: 16px;
        margin-left: 14px;
        color: #ffffff;
      }
    }
    .isUnComStyle {
      font-size: 16px;
      span {
        background-color: #ffae00;
        padding: 5px 20px;
        font-size: 16px;
        margin-left: 14px;
        color: #ffffff;
      }
    }
  }
}
.report_ge_title {
  display: flex;
  align-items: center;
  .blue_t {
    display: flex;
    width: 14px;
    background-color: #00bf78;
    height: 30px;
    border-radius: 20px;
    margin-right: 5px;
  }
  .com {
    font-size: 18px;
    font-weight: 700;
  }
}

.report_top_right_out {
  flex: 6;
  .report_top_right {
    margin-bottom: 20px;
    text-align: center;
  }
}
.sex_class {
  // text-align: justify;
  text-align-last: justify;
  margin: 2px;
  line-height: 24px;
}
// .sex_class:after {
//   display: inline-block;
//   width: 100%;
//   content: "";
//   height: 0px;
// }
// .sex_class:before {
//   display: inline-block;
//   width: 100%;
//   content: "";
//   height: 0px;
// }
// .sex_class1:before {
//   display: inline-block;
//   width: 100%;
//   content: "";
//   height: 0px;
// }

.sex_class1 {
  text-align: left;
  margin: 2px;
  line-height: 24px;
}
// .sex_class1:after {

//   display: inline-block;
//   width: 100%;
//   content: "";
//   height: 0px;
// }
.detail_button_out {
  display: flex;
  justify-content: space-around;
  .detail_button {
    display: flex;
    align-items: center;
    cursor: pointer;
    letter-spacing: 2px;
    img {
      width: 15px;
      margin-right: 5px;
    }
    span {
      color: #00bf78;
      // font-weight: 600;
    }
  }
}
.button_report {
  background-color: #ffffff;
  position: absolute;
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-bottom: 10px;
  bottom: 0;
  left: 0;
  right: 0;
  .all_select {
    cursor: pointer;
  }
  .all_clear {
    cursor: pointer;
  }
}
</style>