计划报告

src/components/PlanReport.vue

@@ -1,8 +1,15 @@
 <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 class="chart_wrap">
             <PieChart :options="options1" chartId="myPieChart1" chartName="完成度" />
@@ -20,13 +27,21 @@
             <PieChart :options="options5" chartId="myPieChart5" chartName="精神障碍" />
           </div>
           <div class="chart_wrap">
-            <PieChart :options="options6" chartId="myPieChart6" chartName="存在心理健康情况" />
+            <PieChart
+              :options="options6"
+              chartId="myPieChart6"
+              chartName="存在心理健康情况"
+            />
           </div>
         </div>
         <div class="table-content">
-          <el-form :inline="true"  class="demo-form-inline">
+          <el-form :inline="true" class="demo-form-inline">
             <el-form-item label="人员类型">
-              <el-select v-model="userType" @change="userTypeChange" placeholder="请选择人员类型">
+              <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>
@@ -36,34 +51,68 @@
               </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
+            :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="orgName" label="所属组织架构" align="center" width="">
             </el-table-column>
-            <el-table-column v-if="userType != '存在心理健康情况' && userType != '未完成'" prop="dimensionSymptom" label="症状" align="center" width="">
+            <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
+              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">
-                      <div class="detail_button" @click="deleteUser(scope.row)">
-                        <img style="width: 20px" src="../assets/img/table/delete.png" />
-                        <span> 移除 </span>
-                      </div>
-                    </div>
-                  </template>
-</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>
+        <el-form :inline="true" class="demo-form-inline">
+          <el-form-item label="维度选择">
+            <el-select
+              v-model="userType"
+              @change="userDimensionality"
+              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-select>
+          </el-form-item>
+        </el-form>
       </div>
     </el-dialog>
 
@@ -73,17 +122,17 @@
 <script>
 //引入echarts组件
 import * as echarts from "echarts";
-import PieChart from '@/components/PieChart'
+import PieChart from "@/components/PieChart";
 
 export default {
   components: {
-    PieChart
+    PieChart,
   },
   data() {
     return {
       //获取计划名称
-      planName: '',
-      planId: '',
+      planName: "",
+      planId: "",
       dialogVisible: false,
       echarts_bing: "",
       option_bing: {},
@@ -102,8 +151,8 @@ export default {
       options6: [],
       completeNum: 0,
       unComplete: 0,
-      userType: '',
-      dimensionName: ''
+      userType: "",
+      dimensionName: "",
     };
   },
   mounted() {
@@ -152,10 +201,11 @@ export default {
     // myChart.setOption(option_bing);
   },
   methods: {
+    userDimensionality() {},
     open(val) {
       this.planId = val.id;
-      this.planName = val.planName
-      this.userType = '';
+      this.planName = val.planName;
+      this.userType = "";
       this.pageNum = 1;
       this.dialogVisible = true;
       this.isFin();
@@ -166,7 +216,7 @@ export default {
     //管理端统计完成情况
     isFin() {
       //调用接口返回信息
-      let url = `/plan/countComplete?planId=8af17884922e1411019230f8d69601b8`;
+      let url = `/plan/countComplete?planId=${this.planId}`;
       this.$http.get(url, {}, (res) => {
         if (res.code == 200) {
           this.unComplete = res.data[0];
@@ -176,7 +226,7 @@ export default {
       });
     },
     isScore() {
-      let url = `/plan/countTotalNumber?planId=8af17884922e1411019230f8d69601b8`;
+      let url = `/plan/countTotalNumber?planId=${this.planId}`;
       this.$http.get(url, {}, (res) => {
         if (res.code == 200) {
           let nameList = [];
@@ -196,45 +246,52 @@ export default {
     },
     // 查询不同维度的中重度数量
     getPlanDimNun() {
-      this.$http.get(`userRecordScore/countNumByPlanDim?planId=8af17884922e1411019230f8d69601b8`, {}, res => {
-        let dimensionList = res.data
-        this.options1 = [
-          { value: this.completeNum, name: '已完成' },
-          { value: this.unComplete, name: '未完成' },
-        ]
+      this.$http.get(
+        `userRecordScore/countNumByPlanDim?planId=${this.planId}`,
+        {},
+        (res) => {
+          let dimensionList = res.data;
+          debugger;
+          this.options1 = [
+            { value: this.completeNum + this.unComplete, name: "已完成人数" },
+            { value: this.unComplete, name: "未完成占比" },
+          ];
 
-        this.options2 = [
-          { value: this.completeNum - dimensionList[0]['焦虑'], name: '正常' },
-          { value: dimensionList[0]['焦虑'], 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.options3 = [
-          { value: this.completeNum - dimensionList[1]['抑郁'], name: '正常' },
-          { value: dimensionList[1]['抑郁'], name: '抑郁' },
-        ]
+          this.options4 = [
+            { value: this.completeNum, name: "已完成人数" },
+            { value: parseInt(dimensionList[2]["压力"]), name: "压力占比" },
+          ];
 
-        this.options4 = [
-          { value: this.completeNum - dimensionList[2]['躯体化'], name: '正常' },
-          { value: dimensionList[2]['躯体化'], name: '压力' }
-        ]
+          this.options5 = [
+            { value: this.completeNum, name: "已完成人数" },
+            { value: parseInt(dimensionList[3]["精神障碍"]), 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: '精神障碍' }
-        ]
-      })
+          this.options6 = [
+            {
+              value: this.completeNum - dimensionList[3]["精神障碍"],
+              name: "已完成人数",
+            },
+            { value: dimensionList[3]["精神障碍"], name: "精神障碍" },
+          ];
+        }
+      );
     },
     userTypeChange(val) {
       this.pageNum = 1;
-      if(val == '未完成') {
+      if (val == "未完成") {
         this.getUnCompleteList();
-      } else if(val == '存在心理健康情况') {
+      } else if (val == "存在心理健康情况") {
         this.getAbnormalList();
       } else {
         this.dimensionName = val;
@@ -277,38 +334,50 @@ export default {
 
     // 查询未完成人员
     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);
+      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);
+      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);
+      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);
+          }
         }
-      })
+      );
     },
   },
 };

src/components/pieChart.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="pie-chart-content">
-    <div ref="myPieChart" :id="chartId" style="width: 100%;height: 450px;"></div>
+    <div ref="myPieChart" :id="chartId" style="width: 100%; height: 450px"></div>
   </div>
 </template>
 
 <script>
+import * as echarts from "echarts";
 export default {
   name: "pieChart",
   components: {},
@@ -12,23 +13,23 @@ export default {
     options: {
       type: Array,
       default: function () {
-        return []
+        return [];
       },
     },
     chartId: {
       type: String,
-      default: ''
+      default: "",
     },
     chartName: {
       type: String,
-      default: ''
+      default: "",
     },
   },
   data() {
     return {
-      color: ['#FCEF9A', '#D54039', '#56743E', '#FF917C'],
+      color: ["#FCEF9A", "#D54039", "#56743E", "#FF917C"],
       pieData: [],
-    }
+    };
   },
   // mounted() {
   //   this.myPieEcharts(this.options);
@@ -36,62 +37,95 @@ export default {
   computed: {},
   watch: {
     options() {
-        this.myPieEcharts(this.options);
-    }
+      
+      this.myPieEcharts(this.options);
+    },
   },
   methods: {
     myPieEcharts(pieData) {
+      // debugger;
       let myChart = this.$echarts.init(document.getElementById(this.chartId));
-      //配置图表
       let option = {
-        title: {
-          text: this.chartName,
-          subtext: "百分比",
-          left: "center",
-          top: '60%'
+        title: [
+          {
+            text: pieData[1].name,
+            x: "center",
+            top: "52%",
+            textStyle: {
+              color: "#000000",
+              fontSize: 10,
+              fontWeight: "100",
+            },
+          },
+          {
+            text: pieData[0].value==0?'未有人测试' :'((pieData[1].value /pieData[0].value)*100).toFixed(2)+'%'',
+            x: "center",
+            y: "center",
+            textStyle: {
+              fontSize: "20",
+              color: "#000000",
+              fontFamily: "DINAlternate-Bold, DINAlternate",
+              foontWeight: "600",
+            },
+          },
+        ],
+        backgroundColor: "#ffffff",
+        polar: {
+          radius: ["42%", "52%"],
+          center: ["50%", "50%"],
         },
-        tooltip: {
-          trigger: "item",
+        angleAxis: {
+          max: pieData[0].value,
+          show: false,
         },
-        legend: {
-          orient: "vertical",
-          left: "left",
-          // top: "38%",
-          // bottom:0
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
         },
         series: [
           {
             name: "",
-            type: "pie",
-            radius: "40%",
-            center: ["50%", "40%"],
-            // data: [
-            //   { value: 1048, name: 'Search Engine' },
-            //   { value: 735, name: 'Direct' },
-            //   { value: 580, name: 'Email' },
-            //   { value: 484, name: 'Union Ads' },
-            //   { value: 300, name: 'Video Ads' }
-            // ],
-            data: pieData,
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
+            type: "bar",
+            roundCap: true,
+            barWidth: 30,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(66, 66, 66, .3)",
+            },
+            data: [pieData[1].value],
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#16CEB9",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6648FF",
+                  },
+                ]),
               },
             },
           },
         ],
       };
-
       pieData && option && myChart.setOption(option);
-
       window.onresize = function () {
         myChart.resize();
       };
     },
     pieDataHandle(param) {
-
       this.pieData = [];
 
       // param.groupData.map((item,index) => {
@@ -105,11 +139,9 @@ export default {
       // });
       //
       // this.myLineEcharts(param.category,this.lineData);
-
-    }
-
+    },
   },
-}
+};
 </script>
 
 <style scoped>