修改计划报告

src/components/PlanReport.vue

@@ -1,44 +1,53 @@
 <template>
   <div>
-    <el-dialog
-      :visible.sync="dialogVisible"
-      :close-on-click-modal="false"
-      width="80%"
-      style="border-radius: 40px"
-    >
+    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" style="border-radius: 40px">
       <div slot="title">
-        <p style="text-align: center; margin-bottom: 20px; font-weight: 700">{{planName}}完成及得分情况</p>
+        <p style="text-align: center; margin-bottom: 20px; font-weight: 700">{{ planName }}完成及得分情况</p>
         <div style="display: flex; margin-top: 40px">
-          <div ref="echarts_bing" style="width: 100%; height: 600px; flex: 1"></div>
-          <div ref="echarts_zhu" style="width: 100%; height: 600px; flex: 1"></div>
+          <div class="chart_wrap">
+            <PieChart :options="options1" chartId="myPieChart1" chartName="完成度" />
+          </div>
+          <div class="chart_wrap">
+            <PieChart :options="options2" chartId="myPieChart2" chartName="焦虑" />
+          </div>
+          <div class="chart_wrap">
+            <PieChart :options="options3" chartId="myPieChart3" chartName="抑郁" />
+          </div>
+          <div class="chart_wrap">
+            <PieChart :options="options4" chartId="myPieChart4" chartName="压力" />
+          </div>
+          <div class="chart_wrap">
+            <PieChart :options="options5" chartId="myPieChart5" chartName="精神障碍" />
+          </div>
+          <div class="chart_wrap">
+            <PieChart :options="options6" chartId="myPieChart6" chartName="存在心理健康情况" />
+          </div>
         </div>
         <div class="table-content">
-          <el-table
-            :data="tableData"
-            :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-form :inline="true"  class="demo-form-inline">
+            <el-form-item label="人员类型">
+              <el-select v-model="userType" @change="userTypeChange" placeholder="请选择人员类型">
+                <el-option label="未完成" value="未完成"></el-option>
+                <el-option label="焦虑" value="焦虑"></el-option>
+                <el-option label="抑郁" value="抑郁"></el-option>
+                <el-option label="压力" value="躯体化"></el-option>
+                <el-option label="精神障碍" value="精神障碍"></el-option>
+                <el-option label="存在心理健康情况" value="存在心理健康情况"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <el-table :data="tableData" :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="isComplete"
-              label="是否已完成"
-              :formatter="formaCom"
-              align="center"
-              width=""
-            >
-            </el-table-column>
             <el-table-column prop="orgName" label="所属组织架构" align="center" width="">
             </el-table-column>
+            <el-table-column v-if="userType != '存在心理健康情况' && userType != '未完成'" prop="dimensionSymptom" label="症状" align="center" width="">
+            </el-table-column>
+            <el-table-column prop="isComplete" label="是否已完成" :formatter="formaCom" align="center" width="">
+            </el-table-column>
             <!-- <el-table-column label="操作" width="510px" align="center">
                   <template slot-scope="scope">
                     <div class="detail_button_out">
@@ -48,20 +57,12 @@
                       </div>
                     </div>
                   </template>
-                </el-table-column> -->
+</el-table-column> -->
           </el-table>
         </div>
-        <el-pagination
-          class="pag_class"
-          background
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page.sync="pageNum"
-          layout="total, sizes, prev, pager, next"
-          :page-size="pageSize"
-          :page-sizes="[10, 20, 50, 100]"
-          :total="total"
-        >
+        <el-pagination class="pag_class" background @size-change="handleSizeChange"
+          @current-change="handleCurrentChange" :current-page.sync="pageNum" layout="total, sizes, prev, pager, next"
+          :page-size="pageSize" :page-sizes="[10, 20, 50, 100]" :total="total">
         </el-pagination>
       </div>
     </el-dialog>
@@ -72,58 +73,40 @@
 <script>
 //引入echarts组件
 import * as echarts from "echarts";
+import PieChart from '@/components/PieChart'
 
 export default {
+  components: {
+    PieChart
+  },
   data() {
     return {
       //获取计划名称
-       planName:'',
-      planId: {},
+      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: [],
+      completeNum: 0,
+      unComplete: 0,
+      userType: '',
+      dimensionName: ''
     };
   },
   mounted() {
-    this.echarts_bing = this.$refs.echarts_bing;
-
-    this.option_bing = {
-      title: {
-        text: "完成情况统计图",
-        left: "center",
-      },
-      tooltip: {
-        trigger: "item",
-      },
-      color:['#FFBBB2','#B2D4FF'],
-      series: [
-        {
-          name: "完成情况",
-          type: "pie",
-          radius: "50%",
-          data: [
-            { value: 1, name: "未完成" },
-            { value: 2, name: "已完成" },
-          ],
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: "rgba(0, 0, 0, 0.5)",
-            },
-          },
-        },
-      ],
-    };
-
     this.echarts_zhu = this.$refs.echarts_zhu;
 
     this.option_zhu = {
@@ -170,8 +153,11 @@ export default {
   },
   methods: {
     open(val) {
+      console.log(val);
       this.planId = val.id;
-      this.planName=val.planName
+      this.planName = val.planName
+      this.userType = '';
+      this.pageNum = 1;
       this.dialogVisible = true;
       this.isFin();
       this.isScore();
@@ -181,18 +167,18 @@ export default {
     //管理端统计完成情况
     isFin() {
       //调用接口返回信息
-      let url = `/plan/countComplete?planId=${this.planId}`;
+      let url = `/plan/countComplete?planId=8af17884922e1411019230f8d69601b8`;
       this.$http.get(url, {}, (res) => {
         console.log(res);
         if (res.code == 200) {
-          //
-          let myChart = echarts.init(this.echarts_bing);
-          myChart.setOption(this.option_bing);
+          this.unComplete = res.data[0];
+          this.completeNum = res.data[1];
+          this.getPlanDimNun();
         }
       });
     },
     isScore() {
-      let url = `/plan/countTotalNumber?planId=${this.planId}`;
+      let url = `/plan/countTotalNumber?planId=8af17884922e1411019230f8d69601b8`;
       this.$http.get(url, {}, (res) => {
         console.log(res);
         if (res.code == 200) {
@@ -205,17 +191,66 @@ export default {
           }
           this.option_zhu.xAxis.data = nameList;
           this.option_zhu.series[0].data = scoreList;
-
           console.log(this.option_zhu);
-          let myChart1 = echarts.init(this.echarts_zhu);
-          myChart1.setOption(this.option_zhu);
+          // let myChart1 = echarts.init(this.echarts_zhu);
+          // myChart1.setOption(this.option_zhu);
           //
         }
       });
     },
+    // 查询不同维度的中重度数量
+    getPlanDimNun() {
+      this.$http.get(`userRecordScore/countNumByPlanDim?planId=8af17884922e1411019230f8d69601b8`, {}, res => {
+        let dimensionList = res.data
+        console.log(dimensionList);
+
+        this.options1 = [
+          { value: this.completeNum, name: '已完成' },
+          { value: this.unComplete, name: '未完成' },
+        ]
+
+        this.options2 = [
+          { value: this.completeNum - dimensionList[0]['焦虑'], name: '正常' },
+          { value: dimensionList[0]['焦虑'], name: '焦虑' },
+        ]
+
+
+        this.options3 = [
+          { value: this.completeNum - dimensionList[1]['抑郁'], name: '正常' },
+          { value: dimensionList[1]['抑郁'], name: '抑郁' },
+        ]
+
+        this.options4 = [
+          { value: this.completeNum - dimensionList[2]['躯体化'], name: '正常' },
+          { value: dimensionList[2]['躯体化'], name: '压力' }
+        ]
+
+        this.options5 = [
+          { value: this.completeNum - dimensionList[3]['精神障碍'], name: '正常' },
+          { value: dimensionList[3]['精神障碍'], name: '精神障碍' }
+        ]
+
+        this.options6 = [
+          { value: this.completeNum - dimensionList[3]['精神障碍'], name: '正常' },
+          { value: dimensionList[3]['精神障碍'], name: '精神障碍' }
+        ]
+      })
+    },
+    userTypeChange(val) {
+      this.pageNum = 1;
+      if(val == '未完成') {
+        this.getUnCompleteList();
+      } else if(val == '存在心理健康情况') {
+        this.getAbnormalList();
+      } else {
+        this.dimensionName = val;
+        this.getDimensionPeopleList(val);
+      }
+      console.log(val);
+    },
     searchTarget() {
       this.pageNum = 1;
-      this.searchList();
+      this.getUnCompleteList();
     },
     //进来调用已选列表接口
     searchList() {
@@ -248,6 +283,42 @@ export default {
         return "已完成";
       }
     },
+
+    // 查询未完成人员
+    getUnCompleteList() {
+      this.$http.get(`planUser/findIncompleteUser?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.$toast.fail(res.msg);
+          this.$message.error(res.msg);
+        }
+      })
+    },
+    // 各维度异常人员
+    getDimensionPeopleList() {
+      this.$http.get(`planUser/findCompletedUserByDim?planId=${this.planId}&dimensionName=${this.dimensionName}&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);
+        }
+      })
+    },
+    // 查询精神健康异常人员
+    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);
+        }
+      })
+    },
   },
 };
 </script>
@@ -255,4 +326,9 @@ export default {
 .pag_class /deep/ .el-input__inner {
   width: 100% !important;
 }
+
+.chart_wrap {
+  flex: 1;
+  height: 450px;
+}
 </style>

src/components/pieChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pie-chart-content">
-    <div ref="myPieChart" id="myPieChart" style="width: 100%;height: 450px;"></div>
+    <div ref="myPieChart" :id="chartId" style="width: 100%;height: 450px;"></div>
   </div>
 </template>
 
@@ -9,12 +9,20 @@ export default {
   name: "pieChart",
   components: {},
   props: {
-    data: {
+    options: {
       type: Array,
       default: function () {
         return []
       },
     },
+    chartId: {
+      type: String,
+      default: ''
+    },
+    chartName: {
+      type: String,
+      default: ''
+    },
   },
   data() {
     return {
@@ -22,24 +30,27 @@ export default {
       pieData: [],
     }
   },
-  mounted() {
-    this.myPieEcharts(this.data);
-  },
+  // mounted() {
+  //   this.myPieEcharts(this.options);
+  // },
   computed: {},
   watch: {
-
+    options() {
+        this.myPieEcharts(this.options);
+    }
   },
   methods: {
-    myPieEcharts(pieData){
-
-      let myChart = this.$echarts.init(document.getElementById('myPieChart'));
-
+    myPieEcharts(pieData) {
+      console.log('pieData', pieData)
+      let myChart = this.$echarts.init(document.getElementById(this.chartId));
+      console.log(myChart);
       //配置图表
       let option = {
         title: {
-          text: "",
-          subtext: "",
+          text: this.chartName,
+          subtext: "百分比",
           left: "center",
+          top: '60%'
         },
         tooltip: {
           trigger: "item",
@@ -54,8 +65,8 @@ export default {
           {
             name: "",
             type: "pie",
-            radius: "50%",
-            center:["60%","40%"],
+            radius: "40%",
+            center: ["50%", "40%"],
             // data: [
             //   { value: 1048, name: 'Search Engine' },
             //   { value: 735, name: 'Direct' },
@@ -81,7 +92,7 @@ export default {
         myChart.resize();
       };
     },
-    pieDataHandle(param){
+    pieDataHandle(param) {
 
       this.pieData = [];
 
@@ -106,5 +117,6 @@ export default {
 <style scoped>
 .pie-chart-content {
   width: 100%;
+  height: 100%;
 }
 </style>

src/views/loginNew.vue

@@ -8,36 +8,18 @@
         <img class="ye2" src="../assets/img/login/ye2.png" />
       </div>
       <div class="cpdm_right">
-        <el-form
-          class="login-left-middle-new"
-          :model="ruleForm"
-          :rules="rules"
-          ref="ruleForm"
-          :label-position="'left'"
-          label-width="10px"
-          size="mini"
-        >
+        <el-form class="login-left-middle-new" :model="ruleForm" :rules="rules" ref="ruleForm" :label-position="'left'"
+          label-width="10px" size="mini">
           <div class="cpdm_right_top">
             <div class="cpdm_right_top_des">欢迎登录</div>
-            <img
-              class="cpdm_right_top_img"
-              src="../assets/img/login/login-left-top.png"
-            />
+            <img class="cpdm_right_top_img" src="../assets/img/login/login-left-top.png" />
           </div>
           <el-form-item label="" prop="account" class="account-new">
-            <el-input
-              class="input-account-new"
-              type="text"
-              v-model="ruleForm.account"
-              placeholder="请输入账号"
-              autocomplete="off"
-            >
+            <el-input class="input-account-new" type="text" v-model="ruleForm.account" placeholder="请输入账号"
+              autocomplete="off">
               <template slot="prefix">
                 <div class="account-inner">
-                  <img
-                    style="height: 20px; margin-left: 10px"
-                    src="../assets/img/login/persion1.png"
-                  />
+                  <img style="height: 20px; margin-left: 10px" src="../assets/img/login/persion1.png" />
                   <div class="account-inner-line"></div>
                 </div>
               </template>
@@ -45,19 +27,11 @@
             <!-- <img src="../assets/img/login/persion.png" /> -->
           </el-form-item>
           <el-form-item label="" class="account-two-new" prop="pass">
-            <el-input
-              class="input-password-new"
-              type="password"
-              placeholder="请输入密码"
-              v-model="ruleForm.pass"
-              autocomplete="off"
-            >
+            <el-input class="input-password-new" type="password" placeholder="请输入密码" v-model="ruleForm.pass"
+              autocomplete="off" @keyup.enter.native="submitForm('ruleForm')">
               <template slot="prefix">
                 <div class="account-inner">
-                  <img
-                    style="height: 20px; margin-left: 10px"
-                    src="../assets/img/login/password1.png"
-                  />
+                  <img style="height: 20px; margin-left: 10px" src="../assets/img/login/password1.png" />
                   <div class="account-inner-line"></div>
                 </div>
               </template>
@@ -231,7 +205,7 @@ export default {
 };
 </script>
 <style scoped>
-.input-account-new >>> .el-input__inner {
+.input-account-new>>>.el-input__inner {
   background-color: #f7f7f7 !important;
   background-image: none;
   border-radius: 30px;
@@ -253,21 +227,21 @@ export default {
   width: 100%;
 }
 
-.account-new >>> .el-input {
+.account-new>>>.el-input {
   display: table !important;
 }
 
-.input-account-new >>> .el-input__inner::placeholder {
+.input-account-new>>>.el-input__inner::placeholder {
   /*color: #f9f9f9;*/
   color: #9a9a9a;
 }
 
-.input-password-new >>> .el-input__inner::placeholder {
+.input-password-new>>>.el-input__inner::placeholder {
   /*color: #f9f9f9;*/
   color: #9a9a9a;
 }
 
-.input-password-new >>> .el-input__inner {
+.input-password-new>>>.el-input__inner {
   background-color: #f7f7f7 !important;
   background-image: none;
   border-radius: 30px;
@@ -285,8 +259,7 @@ export default {
   width: 100%;
 }
 
-.button-new-parent >>> .el-form-item__content {
-}
+.button-new-parent>>>.el-form-item__content {}
 </style>
 
 <style lang="less" scoped>
@@ -498,6 +471,7 @@ export default {
     font-size: 24px;
   }
 }
+
 .aab {
   color: #48d68e;
   margin-left: 20px;

src/views/manage/adminHome.vue

@@ -90,7 +90,6 @@ import { oSessionStorage } from "../../utils/utils";
 
 import Progress from "@/components/Progress";
 import BarChart from "@/components/barChart";
-import PieChart from "@/components/pieChart";
 import md5 from "md5";
 export default {
   name: "adminHome",

src/views/manage/manageMain.vue

@@ -118,13 +118,13 @@
               </div>
             </div>
 
-            <vue-qr
+            <!-- <vue-qr
               v-show="false"
               :ref="userInfo.name + '-' + userInfo.userNumber"
               :text="urlJump + userInfo.invitationCode"
               :size="500"
               :width="1"
-            ></vue-qr>
+            ></vue-qr> -->
           </el-col>
         </el-row>
       </el-header>

src/views/manage/reportDetail.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <div class="charts_box">
+        <div id="myChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    },
+    methods:{
+        init() {
+            
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>