cpdm_manage/src/components/GroupCompare.vue

<template>
  <div>
    <el-dialog
      title=""
      :visible.sync="centerDialogVisible"
      :close-on-click-modal="false"
      width="80%"
      top="5vh"
      style="border-radius: 40px"
    >
      <div slot="title">
        <p
          style="
            text-align: center;
            font-size: 20px;
            margin-bottom: 20px;
            font-weight: 700;
          "
        >
          {{ planInfo.planName }}群体报告统计
        </p>
        <div>
          <el-form :inline="true">
            <el-form-item label="首选项" class="plan_lang">
              <el-select v-model="groupType" @change="groupChangeFun">
                <el-option label="全院" value="1"> </el-option>
                <el-option label="年级" value="2"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年级" class="plan_lang" v-show="groupType != '1'">
              <el-select v-model="groupGrade" @change="gradeChangeFun">
                <el-option
                  v-for="item in gradeOption"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="yiyu_class">
          <div class="yiyu_left">
            <ZhuChart :options="optionYiYu" name="抑郁" refCurrent="refYiYU" />
          </div>
          <div class="yiyu_right">
            <div
              style="
                font-size: 18px;
                font-weight: 700;
                margin-bottom: 20px;
                text-align: center;
              "
            >
              抑郁占比TOP10
            </div>
            <div class="table_out">
              <table>
                <tr>
                  <th class="first">序号</th>
                  <th>班级名称</th>
                  <th>占比</th>
                </tr>
                <tr v-for="(item, index) in yiyuList10" :key="item.name">
                  <td class="first">{{ index + 1 }}</td>
                  <td>{{ item.name }}</td>
                  <td :style="{ color: item.color }">{{ item.score }}%</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="yiyu_class">
          <div class="yiyu_left">
            <ZhuChart :options="optionJL" name="焦虑" refCurrent="refJL" />
          </div>
          <div class="yiyu_right">
            <div
              style="
                font-size: 18px;
                font-weight: 700;
                margin-bottom: 20px;
                text-align: center;
              "
            >
              焦虑占比TOP10
            </div>
            <div class="table_out">
              <table>
                <tr>
                  <th class="first">序号</th>
                  <th>班级名称</th>
                  <th>占比</th>
                </tr>
                <tr v-for="(item, index) in jlList10" :key="item.name">
                  <td class="first">{{ index + 1 }}</td>
                  <td>{{ item.name }}</td>
                  <td :style="{ color: item.color }">{{ item.score }}%</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="yiyu_class">
          <div class="yiyu_left">
            <ZhuChart :options="optionQTH" name="压力" refCurrent="refQTH" />
          </div>
          <div class="yiyu_right">
            <div
              style="
                font-size: 18px;
                font-weight: 700;
                margin-bottom: 20px;
                text-align: center;
              "
            >
              压力占比TOP10
            </div>
            <div class="table_out">
              <table>
                <tr>
                  <th class="first">序号</th>
                  <th>班级名称</th>
                  <th>占比</th>
                </tr>
                <tr v-for="(item, index) in qthList10" :key="item.name">
                  <td class="first">{{ index + 1 }}</td>
                  <td>{{ item.name }}</td>
                  <td :style='{color:item.color}'>{{ item.score }}%</td>
                </tr>
              </table>
            </div>
          </div>
        </div>

        <div class="yiyu_class">
          <div class="yiyu_left">
            <ZhuChart :options="optionSJ" name="视觉整合能力" refCurrent="refSJ" />
          </div>
          <div class="yiyu_right">
            <div
              style="
                font-size: 18px;
                font-weight: 700;
                margin-bottom: 20px;
                text-align: center;
              "
            >
              视觉整合能力占比TOP10
            </div>
            <div class="table_out">
              <table>
                <tr>
                  <th class="first">序号</th>
                  <th>班级名称</th>
                  <th>占比</th>
                </tr>
                <tr v-for="(item, index) in sjList10" :key="item.name">
                  <td class="first">{{ index + 1 }}</td>
                  <td>{{ item.name }}</td>
                  <td :style='{color:item.color}'>{{ item.score }}%</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as echarts from "echarts";
import zhuChart from "../components/ZhuChart";
export default {
  components: {
    ZhuChart: zhuChart,
  },
  data() {
    return {
      centerDialogVisible: false,
      planInfo: {},
      //首选项--类型
      groupType: "1",

      //绑定年级选项
      groupGrade: "",
      gradeOption: [],
      option: {},
      echarts_depressed: "",
      //抑郁全部的数据
      optionYiYu: { name: [], score: [] },
      //焦虑全部的数据
      optionJL: { name: [], score: [] },
      //躯体化全部的数据
      optionQTH: { name: [], score: [] },
      //视觉整合能力
      optionSJ: { name: [], score: [] },
      //抑郁前10
      yiyuList10: [],
      //焦虑前10
      jlList10: [],
      //躯体化前10
      qthList10: [],
      //视觉整合能力前10
      sjList10: [],
      colorList: [
        "#7B0000",
        "#AE0000",
        "#E30000",
        "#FF3C15",
        "#FF5D15",
        "#FF7815",
        "#FF9600",
        "#FFBD1F",
        "#EBC42A",
        "#E0D062",
      ],
    };
  },
  methods: {
    open(val) {
      //将年级清空
      //将首选项改为第一个
      this.groupType = "1";
      this.groupGrade = "";

      this.planInfo = val;
      //获取到当前计划信息
      this.centerDialogVisible = true;
      //调用接口查询院或者年级的信息
      this.queryGrade(val.id);
      //各个维度显示的组件
      //开始渲染组件
      //先查询出来抑郁的全院或全年级所有的统计
      //调用接口
      //抑郁
      this.queryGradeOrYuanYiYu();
      //焦虑
      this.queryGradeOrYuanJL();
      //躯体化
      this.queryGradeOrYuanQTH();
      //视觉整合能力
      this.queryGradeOrYuanSJ();

      //查询抑郁前10
      this.queryGradeOrYuan10();
      //查询焦虑前10
      this.queryGradeOrYuanjl10();
      //查询躯体化前10
      this.queryGradeOrYuanqth10();
      //查询视觉整合能力前10
      this.queryGradeOrYuansj10();
      //   this.initEcharts();
    },
    gradeChangeFun(val) {
      //抑郁
      this.queryGradeOrYuanYiYu();
      //焦虑
      this.queryGradeOrYuanJL();
      //躯体化
      this.queryGradeOrYuanQTH();
      //视觉整合能力
      this.queryGradeOrYuanSJ();

      //查询抑郁前10
      this.queryGradeOrYuan10();
      //查询焦虑前10
      this.queryGradeOrYuanjl10();
      //查询躯体化前10
      this.queryGradeOrYuanqth10();
      //查询视觉整合能力前10
      this.queryGradeOrYuansj10();
      //年纪发生变化时
    },
    //当用户的首选项发生变化
    groupChangeFun(val) {
      if (val == "2") {
        this.groupGrade = "";
      } else {
        //开始调用查询的方法
        //抑郁
        this.queryGradeOrYuanYiYu();
        //焦虑
        this.queryGradeOrYuanJL();
        //躯体化
        this.queryGradeOrYuanQTH();
        //视觉整合能力
        this.queryGradeOrYuanSJ();

        //查询抑郁前10
        this.queryGradeOrYuan10();
        //查询焦虑前10
        this.queryGradeOrYuanjl10();
        //查询躯体化前10
        this.queryGradeOrYuanqth10();
        //查询视觉整合能力前10
        this.queryGradeOrYuansj10();
      }
      //
    },
    //当用户类型发生变化
    //查询全年级和全院及全年级的所有统计抑郁的
    queryGradeOrYuanYiYu() {
      //res 返回数据结构
      //groupType
      //groupGrade
      //当前首选项选中院的话
      let url = "";
      if (this.groupType == "1") {
        url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=抑郁&isLimit=false&planId=${this.planInfo.id}`;
      } else if (this.groupType == "2" && this.groupGrade != "") {
        url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=抑郁&grade=${this.groupGrade}&isLimit=false&planId=${this.planInfo.id}`;
      }

      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          //
          //获取第二个参数
          let nameList = [];
          let scoreList = [];
          let scoreListTmp = [];

          for (let i = 0; i < res.data.length; i++) {
            nameList.push(res.data[i].name);
            scoreList.push((parseFloat(res.data[i].num) * 100).toFixed(2));
            scoreListTmp.push(res.data[i].num);
          }
          this.optionYiYu = { name: nameList, score: scoreList };
        }
      });
    },
    //查询全年级和全院的所有统计焦虑的
    queryGradeOrYuanJL() {
      let url = "";
      if (this.groupType == "1") {
        url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=焦虑&isLimit=false&planId=${this.planInfo.id}`;
      } else if (this.groupType == "2" && this.groupGrade != "") {
        url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=焦虑&grade=${this.groupGrade}&isLimit=false&planId=${this.planInfo.id}`;
      }

      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          //
          //获取第二个参数
          let nameList = [];
          let scoreList = [];
          let scoreListTmp = [];

          for (let i = 0; i < res.data.length; i++) {
            nameList.push(res.data[i].name);
            scoreList.push((parseFloat(res.data[i].num) * 100).toFixed(2));
            scoreListTmp.push(res.data[i].num);
          }
          this.optionJL = { name: nameList, score: scoreList };
        }
      });
    },
    //查询全年级和全院的所有统计---躯体化的
    queryGradeOrYuanQTH() {
      let url = "";
      if (this.groupType == "1") {
        url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=躯体化&isLimit=false&planId=${this.planInfo.id}`;
      } else if (this.groupType == "2" && this.groupGrade != "") {
        url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=躯体化&grade=${this.groupGrade}&isLimit=false&planId=${this.planInfo.id}`;
      }
      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          //
          //获取第二个参数
          let nameList = [];
          let scoreList = [];
          let scoreListTmp = [];

          for (let i = 0; i < res.data.length; i++) {
            nameList.push(res.data[i].name);
            scoreList.push((parseFloat(res.data[i].num) * 100).toFixed(2));
            scoreListTmp.push(res.data[i].num);
          }
          this.optionQTH = { name: nameList, score: scoreList };
        }
      });
    },
    //查询全年级和全院的所有统计---视觉整合能力
    queryGradeOrYuanSJ() {
      let url = "";
      if (this.groupType == "1") {
        url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=视觉整合能力&isLimit=false&planId=${this.planInfo.id}`;
      } else if (this.groupType == "2" && this.groupGrade != "") {
        url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=视觉整合能力&grade=${this.groupGrade}&isLimit=false&planId=${this.planInfo.id}`;
      }
      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          //
          //获取第二个参数
          let nameList = [];
          let scoreList = [];
          let scoreListTmp = [];

          for (let i = 0; i < res.data.length; i++) {
            nameList.push(res.data[i].name);
            scoreList.push((parseFloat(res.data[i].num) * 100).toFixed(2));
            scoreListTmp.push(res.data[i].num);
          }
          this.optionSJ = { name: nameList, score: scoreList };
        }
      });
    },
    //查询抑郁前10数据
    queryGradeOrYuan10() {
      let url = "";
      if (this.groupType == "1") {
        url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=抑郁&isLimit=true&planId=${this.planInfo.id}`;
      } else if (this.groupType == "2" && this.groupGrade != "") {
        url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=抑郁&grade=${this.groupGrade}&isLimit=true&planId=${this.planInfo.id}`;
      }
      //res 返回数据结构

      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          //获取第二个参数
          // let nameList = [];
          // let scoreList = [];
          //先把分数记录下来
          //然后去掉数据为0的
          //然后去重
          //例如 list 20.00  10.00

          let list = [];
          for (let i = 0; i < res.data.length; i++) {
            let obj = {
              name: res.data[i].name,
              score: (parseFloat(res.data[i].num) * 100).toFixed(2),
              color: "#2C3E50",
            };
            list.push(obj);
          }
          let listTmp1 = list.filter((item) => {
            return item.score != "0.00";
          });
          let scoreListTmp = [];
          for (let i = 0; i < listTmp1.length; i++) {
            //
            if (scoreListTmp.indexOf(listTmp1[i].score) == -1) {
              scoreListTmp.push(listTmp1[i].score);
            }
          }

          for (let i = 0; i < list.length; i++) {
            //
            for (let j = 0; j < scoreListTmp.length; j++) {
              if (scoreListTmp[j] == list[i].score) {
                list[i].color = this.colorList[j];
              }
            }
          }

          this.yiyuList10 = list;
          //依次给个颜色

          //将0.00过滤出来
          //将去重的过滤出来
        }
      });
    },
    //查询焦虑前10数据
    queryGradeOrYuanjl10() {
      //res 返回数据结构
      let url = "";
      if (this.groupType == "1") {
        url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=焦虑&isLimit=true&planId=${this.planInfo.id}`;
      } else if (this.groupType == "2" && this.groupGrade != "") {
        url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=焦虑&grade=${this.groupGrade}&isLimit=true&planId=${this.planInfo.id}`;
      }
      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          //获取第二个参数
          // let nameList = [];
          // let scoreList = [];

          let list = [];
          for (let i = 0; i < res.data.length; i++) {
            let obj = {
              name: res.data[i].name,
              score: (parseFloat(res.data[i].num) * 100).toFixed(2),
              color: "#2C3E50",
            };
            list.push(obj);
          }
          let listTmp1 = list.filter((item) => {
            return item.score != "0.00";
          });
          let scoreListTmp = [];
          for (let i = 0; i < listTmp1.length; i++) {
            //
            if (scoreListTmp.indexOf(listTmp1[i].score) == -1) {
              scoreListTmp.push(listTmp1[i].score);
            }
          }
          for (let i = 0; i < list.length; i++) {
            //
            for (let j = 0; j < scoreListTmp.length; j++) {
              if (scoreListTmp[j] == list[i].score) {
                list[i].color = this.colorList[j];
              }
            }
          }
          this.jlList10 = list;
          // this.jlList10 = [];
          // for (let i = 0; i < res.data.length; i++) {
          //   let obj = {
          //     name: res.data[i].name,
          //     score: (parseFloat(res.data[i].num) * 100).toFixed(2),
          //   };
          //   this.jlList10.push(obj);
          // }
          // this.optionYiYu = { name: nameList, score: scoreList };
        }
      });
    },
    //查询躯体化前10数据
    queryGradeOrYuanqth10() {
      //res 返回数据结构
      let url = "";
      if (this.groupType == "1") {
        url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=躯体化&isLimit=true&planId=${this.planInfo.id}`;
      } else if (this.groupType == "2" && this.groupGrade != "") {
        url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=躯体化&grade=${this.groupGrade}&isLimit=true&planId=${this.planInfo.id}`;
      }
      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          //获取第二个参数

          let list = [];
          for (let i = 0; i < res.data.length; i++) {
            let obj = {
              name: res.data[i].name,
              score: (parseFloat(res.data[i].num) * 100).toFixed(2),
              color: "#2C3E50",
            };
            list.push(obj);
          }
          let listTmp1 = list.filter((item) => {
            return item.score != "0.00";
          });
          let scoreListTmp = [];
          for (let i = 0; i < listTmp1.length; i++) {
            //
            if (scoreListTmp.indexOf(listTmp1[i].score) == -1) {
              scoreListTmp.push(listTmp1[i].score);
            }
          }
          console.log("scoreListTmp")
          console.log(scoreListTmp)
          for (let i = 0; i < list.length; i++) {
            //
            for (let j = 0; j < scoreListTmp.length; j++) {
              if (scoreListTmp[j] == list[i].score) {
                list[i].color = this.colorList[j];
              }
            }
          }
          this.qthList10 = list;
        }
      });
    },
    //视觉整合能力
    queryGradeOrYuansj10() {
      let url = "";
      if (this.groupType == "1") {
        url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=视觉整合能力&isLimit=true&planId=${this.planInfo.id}`;
      } else if (this.groupType == "2" && this.groupGrade != "") {
        url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=视觉整合能力&grade=${this.groupGrade}&isLimit=true&planId=${this.planInfo.id}`;
      }
      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          let list = [];
          for (let i = 0; i < res.data.length; i++) {
            let obj = {
              name: res.data[i].name,
              score: (parseFloat(res.data[i].num) * 100).toFixed(2),
              color: "#2C3E50",
            };
            list.push(obj);
          }
          let listTmp1 = list.filter((item) => {
            return item.score != "0.00";
          });
          let scoreListTmp = [];
          for (let i = 0; i < listTmp1.length; i++) {
            //
            if (scoreListTmp.indexOf(listTmp1[i].score) == -1) {
              scoreListTmp.push(listTmp1[i].score);
            }
          }
          for (let i = 0; i < list.length; i++) {
            //
            for (let j = 0; j < scoreListTmp.length; j++) {
              if (scoreListTmp[j] == list[i].score) {
                list[i].color = this.colorList[j];
              }
            }
          }
          this.sjList10 = list;
       
         
        }
      });
    },
    //查询计划下组织列表
    queryGrade(planId) {
      //根据计划ID查询其下边的年级
      let url = `/planOrg/findPlanGrade?planId=${planId}`;
      this.$http.get(url, {}, (res) => {
        this.gradeOption = [];
        //回调函数
        if (res.code == 200) {
          //先排序
          let list = JSON.parse(JSON.stringify(res.data));
          list.sort();

          if (list.length > 0) {
            for (let i = 0; i < list.length; i++) {
              let obj = {
                label: list[i] == -1 ? "教师组" : `${list[i]}级`,
                value: list[i],
              };
              this.gradeOption.push(obj);
            }
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.yiyu_class {
  display: flex;
  flex-direction: row;
  .yiyu_left {
    display: flex;
    flex: 8;
    padding-right:40px
  }
  .yiyu_right {
    flex: 4;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    .table_out {
      width: 100%;
      height: 700px;
      overflow-y: auto;
    }
  }
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  // border: 1px solid #dddddd;
  width: 100%;
  tr {
    padding: 0;
    margin: 0;
    line-height: 40px;
  }

  th.first {
    text-align: center;
    background: #75bd42;
  }

  td.first {
    text-align: center;
    background: #e3f2d9;
  }

  th,
  td {
    padding: 3px 4px;
    border: none;
    border: 1px solid #dddddd;
    margin: 0;
    text-align: center;
  }

  td.warn {
    // background: red;
    color: red;
  }
}
</style>