修改测试对比统计图以及对比趋势

src/components/GroupCompare.vue

@@ -0,0 +1,239 @@
+<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">
+                <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-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>{{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: [] },
+      yiyuList10: [],
+    };
+  },
+  methods: {
+    open(val) {
+      this.planInfo = val;
+      //获取到当前计划信息
+      this.centerDialogVisible = true;
+      //调用接口查询院或者年级的信息
+      this.queryGrade(val.id);
+      //各个维度显示的组件
+      //开始渲染组件
+      //先查询出来抑郁的全院或全年级所有的统计
+      //调用接口
+      this.queryGradeOrYuan();
+
+      this.queryGradeOrYuan10();
+      //   this.initEcharts();
+      // this.optionYiYu = [10, 5, 20, 34, 0, 3, 22];
+    },
+    //查询全年级和全院及全年级的所有统计
+    queryGradeOrYuan() {
+      //res 返回数据结构
+      let url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=抑郁&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 };
+        }
+      });
+    },
+    queryGradeOrYuan10() {
+      //res 返回数据结构
+      let url = `/userRecordScore/countPlanOrgHighRiskNum?dimName=抑郁&isLimit=true&planId=${this.planInfo.id}`;
+      this.$http.get(url, {}, (res) => {
+        if (res.code == 200) {
+          //获取第二个参数
+          // let nameList = [];
+          // let scoreList = [];
+          this.yiyuList10 = [];
+          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.yiyuList10.push(obj);
+          }
+          // this.optionYiYu = { name: nameList, score: scoreList };
+        }
+        console.log(res);
+      });
+    },
+    //查询计划下组织列表
+    queryGrade(planId) {
+      //根据计划ID查询其下边的年级
+      let url = `/planOrg/findPlanGrade?planId=${planId}`;
+      this.$http.get(url, {}, (res) => {
+        this.gradeOption = [];
+        //回调函数
+        if (res.code == 200) {
+          if (res.data.length > 0) {
+            for (let i = 0; i < res.data.length; i++) {
+              let obj = {
+                label: res.data[i] + "级",
+                value: res.data[i],
+              };
+              this.gradeOption.push(obj);
+            }
+          }
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.yiyu_class {
+  display: flex;
+  flex-direction: row;
+  .yiyu_left {
+    display: flex;
+    flex: 8;
+  }
+  .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: 2px 4px;
+    border: none;
+    border: 1px solid #dddddd;
+    margin: 0;
+    text-align: center;
+  }
+
+  td.warn {
+    // background: red;
+    color: red;
+  }
+}
+</style>

src/components/ZhuChart.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="pie-chart-content">
+    <div :id="refCurrent" style="width: 100%; height: 70vh"></div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    options: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+    name: {
+      type: String,
+      default: "",
+    },
+    refCurrent: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  //当前监听到数据发生变化就开始渲染
+  watch: {
+    options() {
+      this.myZhuEcharts(this.options);
+    },
+  },
+  methods: {
+    myZhuEcharts(data) {
+      //修改测试计划
+      let myChart = this.$echarts.init(document.getElementById(this.refCurrent));
+      // let myChart = this.$echarts.init(this.$refs.this.refCurrent);
+      let option = {
+        title: {
+          text: this.name + "占比统计",
+          subtext: "",
+          x: "center",
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params) {
+            var relVal = params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              relVal +=
+                "<br/>" +
+                params[i].marker +
+                params[i].seriesName +
+                " : " +
+                params[i].value +
+                "%";
+            }
+            return relVal;
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: data.name,
+
+            // axisLabel: {
+            //   interval: 0, //代表需要全部显示
+            //   rotate: "90", //代表倾斜45 可以节省空间
+            // },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "占比（%）",
+          },
+        ],
+        dataZoom: [
+          {
+            type: "slider",
+            xAxisIndex: 0,
+            filterMode: "none",
+          },
+
+          {
+            type: "inside",
+            xAxisIndex: 0,
+            filterMode: "none",
+          },
+        ],
+        series: [
+          {
+            name: this.name,
+            type: "bar",
+            barWidth: "60%",
+            data: data.score,
+            
+          },
+        ],
+        //[10, 5, 20, 34, 0, 3, 22]
+      };
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.pie-chart-content {
+  width: 100%;
+  /* height: 100%; */
+}
+</style>

src/router/router.js

@@ -186,6 +186,12 @@ export const routerList = [
         name: "ComparePlanProfession",
         component: () => import("../components/ComparePlanProfession"),
       },
+      //趋势统计
+      {
+        path: "tendency",
+        name: "tendency",
+        component: () => import("../views/manage/tendency"),
+      },
     ],
   },
 ];

src/utils/http.js

@@ -22,11 +22,11 @@ import { router } from "@/router";
 //少锋本地 wifi
 // export const basePath = "http://172.28.50.2:8089";
 //30
-// export const basePath = "http://43.143.198.30:8089";
+export const basePath = "http://43.143.198.30:8089";
 //红朵服务器
 // export const basePath = "http://129.211.221.44:8089";
 //锦泓税务服务器
-export const basePath = "http://146.56.226.174:8089";
+// export const basePath = "http://146.56.226.174:8089";
 // const base_url = 'http://43.143.198.30:8089/'
 // const base_url = 'http://10.113.248.4:8090/'
 // export const basePath='http://43.143.198.30:8086'

src/views/manage/channelManagement/contract.vue

@@ -261,7 +261,7 @@
                     (!isUser && scope.row.planStatus == '3' && scope.row.enable == '1')
                   "
                 >
-                  <div class="detail_button" @click="compareReport(scope.row)">
+                  <div class="detail_button" @click="groupCompare(scope.row)">
                     <img src="../../../assets/img/table/search.png" />
                     <span>群体报告统计 </span>
                   </div>
@@ -328,6 +328,8 @@
     </div>
     <CompareUser ref="register" @search="searchTarget" />
     <ComparePlanUser ref="planUser" @search="searchTarget" />
+
+    <GroupCompare ref="groupUser" />
     <el-dialog title="请选择计划" :visible.sync="choosePlanVisible">
       <div class="btn_area">
         <el-button @click="chooseCancel">取消</el-button>
@@ -346,11 +348,13 @@ import comparePlanUser from "../../../components/ComparePlanUser.vue";
 import { basePath } from "../../../utils/http";
 import userImgActive from "../../../assets/report/lv.png";
 import userImgDefault from "../../../assets/report/white.png";
+import groupCompare from '../../../components/GroupCompare.vue'
 export default {
   name: "userManage",
   components: {
     CompareUser: compareUser,
     ComparePlanUser: comparePlanUser,
+    GroupCompare:groupCompare
   },
   data() {
     return {
@@ -441,6 +445,10 @@ export default {
     this.isClikcObj(false);
   },
   methods: {
+    groupCompare(val){
+      //打开群体报告统计页面
+      this.$refs.groupUser.open(val)
+    },
     titleFormatter(val) {
       if (val.planStatus == "1") {
         return "计划未开始";

src/views/manage/manageMain.vue

@@ -28,9 +28,17 @@
         /> -->
         <!-- <p class="aac">郑大计智</p>
         <p class="aac">心理测评系统</p> -->
-        <div class="aac" style="display: flex;flex-direction: column;;justify-content: center;align-items: center;">
-           <div>郑大计智</div>
-           <div>心理测评系统</div>
+        <div
+          class="aac"
+          style="
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+          "
+        >
+          <div>郑大计智</div>
+          <div>心理测评系统</div>
         </div>
         <!-- <p class="aab"></p> -->
         <!-- <img
@@ -70,7 +78,7 @@
                   <span class="menu_name">{{ item.name }}</span>
                 </div>
               </template>
-              <el-menu-item-group style="background-color:#000000">
+              <el-menu-item-group style="background-color: #000000">
                 <el-menu-item v-for="el in item.child" :key="el.id" :index="el.path">
                   <span class="menu_sub_tt"
                     ><span class="menu_sub_t1">&nbsp;</span>{{ el.name }}</span
@@ -135,7 +143,13 @@
       </el-header>
       <el-container style="flex: 1; overflow: auto">
         <el-main style="background-color: #f5f5f5; display: flex">
-          <div class="el-main-inner" :style="{ backgroundColor: isTmpPath=='/manage/generalSituation'?'#F7F7F7':'#ffffff' }">
+          <div
+            class="el-main-inner"
+            :style="{
+              backgroundColor:
+                isTmpPath == '/manage/generalSituation' ? '#F7F7F7' : '#ffffff',
+            }"
+          >
             <transition name="fade" mode="out-in">
               <router-view></router-view>
             </transition>
@@ -270,7 +284,7 @@ export default {
     };
 
     return {
-      isTmpPath:"",
+      isTmpPath: "",
       //是否显示退出菜单
       isShowMenu: false,
       userInfo: {}, //用户信息
@@ -441,6 +455,14 @@ export default {
                 path: "/manage/comparaAnalysis",
                 showItem: true,
               },
+              {
+                id: "44",
+                name: "趋势统计",
+                parentName: "趋势统计",
+                icon: "el-icon-user-solid",
+                path: "/manage/tendency",
+                showItem: true,
+              },
             ],
           },
         ];
@@ -531,6 +553,14 @@ export default {
                 path: "/manage/comparaAnalysis",
                 showItem: true,
               },
+              {
+                id: "44",
+                name: "趋势统计",
+                parentName: "趋势统计",
+                icon: "el-icon-user-solid",
+                path: "/manage/tendency",
+                showItem: true,
+              },
             ],
           },
         ];
@@ -609,6 +639,14 @@ export default {
                 path: "/manage/comparaAnalysis",
                 showItem: true,
               },
+              {
+                id: "44",
+                name: "趋势统计",
+                parentName: "趋势统计",
+                icon: "el-icon-user-solid",
+                path: "/manage/tendency",
+                showItem: true,
+              },
             ],
           },
         ];
@@ -627,8 +665,8 @@ export default {
     this.bus.$on("menuStatusUpdate", (e) => {
       that.$refs.menu.activeIndex = e;
       that.active = e;
-      console.log('-----------------')
-      console.log(that.active)
+      console.log("-----------------");
+      console.log(that.active);
       //  that.$forceUpdate()
       that.selectMenu(e);
     });
@@ -654,7 +692,7 @@ export default {
     selectMenu(param) {
       // console.log("-----------selectMenu");
       // console.log(param);
-      this.isTmpPath=param
+      this.isTmpPath = param;
       this.menuList.forEach((item) => {
         if (item.path == param) {
           this.crumbParent = item.name;
@@ -1207,7 +1245,7 @@ export default {
   font-size: 20px;
   letter-spacing: 2px;
   // -webkit-transform: skew(-10deg);
-  
+
   // /* for Chrome||Safari */
   // -ms-transform: skew(-10deg);
   // /* for IE */

src/views/manage/tendency.vue

@@ -0,0 +1,22 @@
+<template>
+  
+  <div class="main">
+  <div style="padding-top:200px;">  努力开发中...</div>
+  
+    <!-- <img style="height: 100%;width:100%" src="../../assets/report/qs.png" alt=""> -->
+  </div>
+</template>
+<style lang="less" scoped>
+.main{
+  color:rgb(171, 172, 173);
+  background-image: url(../../assets/report/qs.png) ;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+}
+</style>

src/views/manage/userManage.vue

@@ -112,6 +112,14 @@
             :formatter="gradeFormatter"
           >
           </el-table-column>
+          <el-table-column
+            prop="position"
+            label="职务"
+            align="center"
+            width=""
+            :formatter="positionFormatter"
+          >
+          </el-table-column>
           <el-table-column prop="orgName" label="所属组织架构" align="center" width="">
           </el-table-column>
           <el-table-column label="操作" width="400px" align="center">
@@ -392,6 +400,7 @@ export default {
       grade: "",
       group4: "",
       filePath: "/user/userImport",
+      listOption: [],
     };
   },
   created() {},
@@ -414,9 +423,37 @@ export default {
       //如果用户信息不存在跳转登陆页
       this.$router.push({ path: "/" });
     }
-    this.searchTarget();
+    this.getPotion().then(() => {
+      this.searchTarget();
+    });
   },
   methods: {
+    //调用接口得到列表的数据
+    getPotion() {
+      return new Promise((resolve, reject) => {
+        let url = `/param/findAllByType?type=position`;
+        this.$http.get(url, {}, (res) => {
+          if (res.code == 200) {
+            this.listOption = res.data;
+            resolve();
+          } else {
+            this.message.error(res.msg);
+            reject();
+          }
+        });
+      });
+    },
+
+    positionFormatter(val) {
+      let a = "";
+      for (let i = 0; i < this.listOption.length; i++) {
+        if (this.listOption[i].paramValue == val.position) {
+          a = this.listOption[i].paramName;
+          break;
+        }
+      }
+      return a;
+    },
     openFileUp() {
       //打开弹出框
       this.$refs.uploadFileUser.clearFiles();
@@ -859,7 +896,7 @@ export default {
 }
 .detail_button_out {
   display: flex;
-  justify-content:flex-start;
+  justify-content: flex-start;
   .detail_button {
     margin-left: 20px;
     display: flex;