修改对比分析

src/components/GroupCompare.vue

@@ -22,13 +22,13 @@
         <div>
           <el-form :inline="true">
             <el-form-item label="首选项" class="plan_lang">
-              <el-select v-model="groupType">
+              <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">
+              <el-select v-model="groupGrade" @change="gradeChangeFun">
                 <el-option
                   v-for="item in gradeOption"
                   :key="item.value"
@@ -62,10 +62,104 @@
                   <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>{{item.score}}%</td>
+                <tr v-for="(item, index) in yiyuList10" :key="item.name">
+                  <td class="first">{{ index + 1 }}</td>
+                  <td>{{ item.name }}</td>
+                  <td>{{ 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>{{ 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>{{ 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>{{ item.score }}%</td>
                 </tr>
               </table>
             </div>
@@ -94,8 +188,22 @@ export default {
       gradeOption: [],
       option: {},
       echarts_depressed: "",
+      //抑郁全部的数据
       optionYiYu: { name: [], score: [] },
+      //焦虑全部的数据
+      optionJL: { name: [], score: [] },
+      //躯体化全部的数据
+      optionQTH: { name: [], score: [] },
+      //视觉整合能力
+      optionSJ: { name: [], score: [] },
+      //抑郁前10
       yiyuList10: [],
+      //焦虑前10
+      jlList10: [],
+      //躯体化前10
+      qthList10: [],
+      //视觉整合能力前10
+      sjList10: [],
     };
   },
   methods: {
@@ -109,16 +217,85 @@ export default {
       //开始渲染组件
       //先查询出来抑郁的全院或全年级所有的统计
       //调用接口
-      this.queryGradeOrYuan();
+      //抑郁
+      this.queryGradeOrYuanYiYu();
+      //焦虑
+      this.queryGradeOrYuanJL();
+      //躯体化
+      this.queryGradeOrYuanQTH();
+      //视觉整合能力
+      this.queryGradeOrYuanSJ();
 
+      //查询抑郁前10
       this.queryGradeOrYuan10();
+      //查询焦虑前10
+      this.queryGradeOrYuanjl10();
+      //查询躯体化前10
+      this.queryGradeOrYuanqth10();
+      //查询视觉整合能力前10
+      this.queryGradeOrYuansj10();
       //   this.initEcharts();
-      // this.optionYiYu = [10, 5, 20, 34, 0, 3, 22];
     },
-    //查询全年级和全院及全年级的所有统计
-    queryGradeOrYuan() {
+    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 返回数据结构
-      let url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=抑郁&isLimit=false&planId=${this.planInfo.id}`;
+      //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) {
           //
@@ -136,9 +313,92 @@ export default {
         }
       });
     },
+    //查询全年级和全院的所有统计焦虑的
+    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 返回数据结构
-      let url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=抑郁&isLimit=true&planId=${this.planInfo.id}`;
+
       this.$http.get(url, {}, (res) => {
         if (res.code == 200) {
           //获取第二个参数
@@ -154,9 +414,86 @@ export default {
           }
           // this.optionYiYu = { name: nameList, score: scoreList };
         }
+      });
+    },
+    //查询焦虑前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 = [];
+          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 };
+        }
         console.log(res);
       });
     },
+    //查询躯体化前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 nameList = [];
+          // let scoreList = [];
+          this.qthList10 = [];
+          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.qthList10.push(obj);
+          }
+          // this.optionYiYu = { name: nameList, score: scoreList };
+        }
+      });
+    },
+    //视觉整合能力
+    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 nameList = [];
+          // let scoreList = [];
+          this.sjList10 = [];
+          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.sjList10.push(obj);
+          }
+          // this.optionYiYu = { name: nameList, score: scoreList };
+        }
+      });
+    },
     //查询计划下组织列表
     queryGrade(planId) {
       //根据计划ID查询其下边的年级
@@ -165,11 +502,15 @@ export default {
         this.gradeOption = [];
         //回调函数
         if (res.code == 200) {
-          if (res.data.length > 0) {
-            for (let i = 0; i < res.data.length; i++) {
+          //先排序
+          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: res.data[i] + "级",
-                value: res.data[i],
+                label: list[i] + "级",
+                value: list[i],
               };
               this.gradeOption.push(obj);
             }

src/components/ZhuChart.vue

@@ -4,6 +4,7 @@
   </div>
 </template>
 <script>
+import * as echarts from "echarts";
 export default {
   props: {
     options: {
@@ -102,7 +103,22 @@ export default {
             type: "bar",
             barWidth: "60%",
             data: data.score,
-            
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(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], //修改柱状图圆角
+            },
           },
         ],
         //[10, 5, 20, 34, 0, 3, 22]

src/views/manage/userManage.vue

@@ -431,7 +431,7 @@ export default {
     //调用接口得到列表的数据
     getPotion() {
       return new Promise((resolve, reject) => {
-        let url = `/param/findAllByType?type=position`;
+        let url = `/param/findAllByType?type=1`;
         this.$http.get(url, {}, (res) => {
           if (res.code == 200) {
             this.listOption = res.data;