|
|
@@ -17,15 +17,37 @@
|
|
|
>
|
|
|
{{ planName }}报告
|
|
|
</p>
|
|
|
+ <div class="report_ge_title" style="margin-bottom: 20px">
|
|
|
+ <div class="blue_t"></div>
|
|
|
+ <div class="com">完成情况</div>
|
|
|
+ </div>
|
|
|
|
|
|
<div style="display: flex">
|
|
|
<div class="chart_wrap" style="flex: 4">
|
|
|
+ <div class="report_top_bingBo">
|
|
|
+ <div class="isComStyle">
|
|
|
+ 总人数： {{ this.completeNum + this.unComplete }}人
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<BingChart :options="options1" chartId="myPieChart1" chartName="完成度" />
|
|
|
+ <div class="report_top_bingBo">
|
|
|
+ <div class="isComStyle">
|
|
|
+ 已完成<span>{{ this.completeNum }}人</span>
|
|
|
+ </div>
|
|
|
+ <div class="isUnComStyle">
|
|
|
+ 未完成:<span>{{ this.unComplete }}人</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div style="flex: 6">
|
|
|
+ <div style="flex: 6" class="report_top_right_out">
|
|
|
+ <div class="report_top_right">
|
|
|
+ <div style="font-size: 20px; letter-spacing: 1px">未完成人员列表</div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<el-table
|
|
|
:data="complateTableData"
|
|
|
- :row-style="{ height: '0px' }"
|
|
|
+ :row-style="{ height: '0px', borderRadius: '20px' }"
|
|
|
:cell-style="{ padding: '5px' }"
|
|
|
:header-cell-style="{ background: '#F8F8F8', color: '#606266' }"
|
|
|
>
|
|
|
@@ -46,31 +68,7 @@
|
|
|
width=""
|
|
|
>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="isComplete"
|
|
|
- label="是否已完成"
|
|
|
- :formatter="formaCom"
|
|
|
- align="center"
|
|
|
- width=""
|
|
|
- >
|
|
|
- <template slot-scope="scope">
|
|
|
- <div v-if="scope.row.isComplete == '0'" style="color: #ff7800">
|
|
|
- 未开始
|
|
|
- </div>
|
|
|
-
|
|
|
- <div v-if="scope.row.isComplete == '1'" style="color: #333333">
|
|
|
- 已完成
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
</el-table>
|
|
|
- <!-- complatePageSize: 10,
|
|
|
- //未完成的分页--第几页
|
|
|
- complatePageNum: 1,
|
|
|
- //未完成的数据
|
|
|
- complateTableData: [],
|
|
|
- //未完成的总条数
|
|
|
- complateTotal: 0, -->
|
|
|
<el-pagination
|
|
|
class="pag_class"
|
|
|
background
|
|
|
@@ -84,10 +82,32 @@
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div style="text-align: center; font-size: 14px; font-weight: 600">
|
|
|
- 已完成人数中各个维度的占比
|
|
|
+ <div class="report_ge_title" style="margin-top: 40px; margin-bottom: 20px">
|
|
|
+ <div class="blue_t"></div>
|
|
|
+ <div class="com">已完成人员测评情况</div>
|
|
|
</div>
|
|
|
- <div style="display: flex; margin-top: 40px">
|
|
|
+ <div style="display: flex">
|
|
|
+ <div class="chart_wrap" style="flex: 4">
|
|
|
+ <div class="report_top_bingBo">
|
|
|
+ <div class="isComStyle">
|
|
|
+ 已完成人数： {{ this.completeNum }}人
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <BingChart :options="options6" chartId="myPieChart6" chartName="完成度" />
|
|
|
+ <div class="report_top_bingBo">
|
|
|
+ <div class="isComStyle">
|
|
|
+ 心理健康<span>{{ this.completeNum - this.abnormalNum }}人</span>
|
|
|
+ </div>
|
|
|
+ <div class="isUnComStyle">
|
|
|
+ 心理异常:<span>{{ this.abnormalNum }}人</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="flex: 6" class="report_top_right_out">
|
|
|
+ <div style="height: 100%; width: 100%" ref="echarts_zhu"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div style="display: flex; margin-top: 40px">
|
|
|
<div class="chart_wrap">
|
|
|
<PieChart :options="options2" chartId="myPieChart2" chartName="焦虑" />
|
|
|
</div>
|
|
|
@@ -107,9 +127,9 @@
|
|
|
chartName="心理健康异常"
|
|
|
/>
|
|
|
</div>
|
|
|
- </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"
|
|
|
@@ -123,10 +143,23 @@
|
|
|
<el-option label="心理健康异常" value="心理健康异常"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- </el-form>
|
|
|
+ </el-form> -->
|
|
|
+ <div class="radio_group_style">
|
|
|
+ <el-radio-group
|
|
|
+ v-model="userType"
|
|
|
+ style="margin-top: 40px; margin-bottom: 20px"
|
|
|
+ @input="userTypeChange"
|
|
|
+ >
|
|
|
+ <el-radio-button label="心理异常"></el-radio-button>
|
|
|
+ <el-radio-button label="抑郁"></el-radio-button>
|
|
|
+ <el-radio-button label="压力"></el-radio-button>
|
|
|
+ <el-radio-button label="焦虑"></el-radio-button>
|
|
|
+ <el-radio-button label="精神障碍"></el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+
|
|
|
<el-table
|
|
|
:data="tableData"
|
|
|
- :row-style="{ height: '0px' }"
|
|
|
:cell-style="{ padding: '5px' }"
|
|
|
:header-cell-style="{ background: '#F8F8F8', color: '#606266' }"
|
|
|
>
|
|
|
@@ -143,7 +176,7 @@
|
|
|
<el-table-column prop="orgName" label="所属组织架构" align="center" width="">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- v-if="userType != '心理健康异常' && userType != '未完成'"
|
|
|
+ v-if="userType != '心理异常' && userType != '未完成'"
|
|
|
prop="dimensionSymptom"
|
|
|
label="症状"
|
|
|
align="center"
|
|
|
@@ -163,16 +196,9 @@
|
|
|
:total="total"
|
|
|
>
|
|
|
</el-pagination>
|
|
|
- <div
|
|
|
- style="
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 40px;
|
|
|
- margin-top: 40px;
|
|
|
- "
|
|
|
- >
|
|
|
- 已完成人数中各个维度人员情况
|
|
|
+ <div class="report_ge_title" style="margin-top: 40px; margin-bottom: 20px">
|
|
|
+ <div class="blue_t"></div>
|
|
|
+ <div class="com">已完成人员中各维度统计</div>
|
|
|
</div>
|
|
|
<el-form :inline="true" class="demo-form-inline">
|
|
|
<el-form-item label="维度选择">
|
|
|
@@ -191,7 +217,7 @@
|
|
|
</el-form-item>
|
|
|
<!-- @change="userDimensionality" -->
|
|
|
<el-form-item label="年级选择">
|
|
|
- <el-select v-model="grade" placeholder="请选择年级" @change="gradeChange" >
|
|
|
+ <el-select v-model="grade" placeholder="请选择年级" @change="gradeChange">
|
|
|
<el-option
|
|
|
v-for="item in gradeList"
|
|
|
:key="item.id"
|
|
|
@@ -202,10 +228,9 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item label="组织架构选择" class="org_class">
|
|
|
<el-select
|
|
|
- width="300px"
|
|
|
+ width="300px"
|
|
|
multiple
|
|
|
v-model="orgName"
|
|
|
-
|
|
|
@change="userOrgName"
|
|
|
placeholder="请选择组织架构"
|
|
|
>
|
|
|
@@ -219,32 +244,82 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
- <el-tabs type="border-card" @tab-click="tabFun" v-model="tabName">
|
|
|
- <el-tab-pane
|
|
|
- v-for="item in subDimeList"
|
|
|
- :key="item.id"
|
|
|
- :label="item.paramName"
|
|
|
- :name="item.paramValue"
|
|
|
+ <div class="radio_group_style">
|
|
|
+ <el-radio-group
|
|
|
+ v-model="tabName"
|
|
|
+ style="margin-top: 40px; margin-bottom: 20px"
|
|
|
+ @input="tabFun"
|
|
|
>
|
|
|
- <!-- @click="tabFun(item)" -->
|
|
|
- <!-- {{item.paramName}} -->
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- <el-form :inline="true" class="demo-form-inline" style="margin-top: 20px">
|
|
|
- <el-form-item label="请选择">
|
|
|
- <el-select v-model="subValue" @change="userSubFun" placeholder="请选择">
|
|
|
- <el-option
|
|
|
- v-for="item in subOption"
|
|
|
- :key="item"
|
|
|
- :label="item"
|
|
|
- :value="item"
|
|
|
- ></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div class="chart_wrap">
|
|
|
- <PieChart :options="options7" chartId="myPieChart7" chartName="心理健康异常" />
|
|
|
+ <el-radio-button
|
|
|
+ :label="item.paramValue"
|
|
|
+ v-for="item in subDimeList"
|
|
|
+ :key="item.id"
|
|
|
+ >{{ item.paramName }}</el-radio-button
|
|
|
+ >
|
|
|
+ </el-radio-group>
|
|
|
</div>
|
|
|
+ <div style="display: flex; flex-direction: row">
|
|
|
+ <el-radio-group
|
|
|
+ v-model="subValue"
|
|
|
+ @change="userSubFun"
|
|
|
+ style="flex-direction: column; width: 100%; flex: 3; display: flex"
|
|
|
+ >
|
|
|
+ <el-radio
|
|
|
+ v-for="item in subOption"
|
|
|
+ :key="item"
|
|
|
+ :label="item"
|
|
|
+ style="margin-top: 20px"
|
|
|
+ ></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <div class="chart_wrap" style="flex: 6">
|
|
|
+ <BingChart2
|
|
|
+ :options="options7"
|
|
|
+ chartId="myPieChart7"
|
|
|
+ chartName="心理健康异常"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ flex: 3;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div style="display: flex; font-size: 20px">
|
|
|
+ {{
|
|
|
+ subValue
|
|
|
+ }} 已完成 <span
|
|
|
+ style="
|
|
|
+ background-color: #5470c6;
|
|
|
+ display: flex;
|
|
|
+ padding: 0 20px;
|
|
|
+ margin-left: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ color:#ffffff
|
|
|
+ "
|
|
|
+ >{{ subAll }}人</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; font-size: 20px">
|
|
|
+ {{ subValue }} 中重度{{ dime
|
|
|
+ }}<span
|
|
|
+ style="
|
|
|
+ background-color: #ffae00;
|
|
|
+ display: flex;
|
|
|
+ padding: 0 20px;
|
|
|
+ margin-left: 20px;
|
|
|
+ color:#ffffff
|
|
|
+ "
|
|
|
+ >{{ subSingle }}人</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<el-table
|
|
|
:data="subData"
|
|
|
:row-style="{ height: '0px' }"
|
|
|
@@ -296,10 +371,11 @@
|
|
|
import * as echarts from "echarts";
|
|
|
import PieChart from "@/components/PieChart";
|
|
|
import BingChart from "@/components/BingChart";
|
|
|
+import BingChart2 from "@/components/BingChart2";
|
|
|
export default {
|
|
|
components: {
|
|
|
- PieChart,
|
|
|
BingChart,
|
|
|
+ BingChart2,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -325,7 +401,7 @@ export default {
|
|
|
options7: [],
|
|
|
completeNum: 0,
|
|
|
unComplete: 0,
|
|
|
- userType: "焦虑",
|
|
|
+ userType: "心理异常",
|
|
|
//维度选择--字段
|
|
|
dime: "焦虑",
|
|
|
dimeList: [],
|
|
|
@@ -353,7 +429,7 @@ export default {
|
|
|
|
|
|
dimensionName: "",
|
|
|
//未完成的分页--每页多少条
|
|
|
- complatePageSize: 10,
|
|
|
+ complatePageSize: 6,
|
|
|
//未完成的分页--第几页
|
|
|
complatePageNum: 1,
|
|
|
//未完成的数据
|
|
|
@@ -363,6 +439,8 @@ export default {
|
|
|
abnormalNum: 0,
|
|
|
grade: "",
|
|
|
gradeList: [],
|
|
|
+ subAll: 0,
|
|
|
+ subSingle: 0,
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -370,40 +448,103 @@ export default {
|
|
|
|
|
|
this.option_zhu = {
|
|
|
title: {
|
|
|
- text: "得分情况统计图",
|
|
|
- left: "center",
|
|
|
+ text: "",
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ // shadowStyle:{
|
|
|
+ // color:'rgba(0,0,0,0.5)',
|
|
|
+ // shadowBlur: 10,
|
|
|
+ // shadowOffsetX:0,
|
|
|
+ // shadowOffsetY:'0'
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ var relVal = "";
|
|
|
+ let na = params[0].name;
|
|
|
+ for (var i = 0, l = params.length; i < l; i++) {
|
|
|
+ relVal += params[i].marker + na + " : " + params[i].value + "%";
|
|
|
+ }
|
|
|
+ return relVal;
|
|
|
+ },
|
|
|
+ // formatter: "{b} : {c} % ",
|
|
|
+
|
|
|
+ // formatter: function (params,trigger) {
|
|
|
+
|
|
|
+ // return '{a} <br/>{b} : {c} <br/>百分比 : {d}%'
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
- data: ["Mon"],
|
|
|
+ data: [],
|
|
|
// axisLabel: {
|
|
|
- // rotate: -45, // 根据文字长度自动旋转标签
|
|
|
- // // margin:-40,
|
|
|
- // padding: -70,
|
|
|
+ // width: 40, //设置内容宽度
|
|
|
+ // // overflow:'break',
|
|
|
+ // overflow: "truncate",
|
|
|
// },
|
|
|
- // axisLabel:{
|
|
|
- // interval:0,
|
|
|
- // rotate:-90
|
|
|
- // }
|
|
|
+ // axisLabel: {
|
|
|
+ // formatter: function (params) {
|
|
|
+ // return "中等分值";
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ dataZoom: {
|
|
|
+ type: "inside", //放大缩小x轴数值
|
|
|
},
|
|
|
yAxis: {
|
|
|
+ max: 100,
|
|
|
type: "value",
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
minInterval: 1,
|
|
|
},
|
|
|
- radar: {
|
|
|
- //
|
|
|
- radius: 50,
|
|
|
- },
|
|
|
series: [
|
|
|
{
|
|
|
- data: [120],
|
|
|
type: "bar",
|
|
|
- barWidth: 15,
|
|
|
+ data: [],
|
|
|
+ barWidth: "15", //修改柱状图的宽度
|
|
|
itemStyle: {
|
|
|
- color: "#FFBBB2",
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
|
|
|
+ //通过修改前4个参数，可以实现不同的渐变方向
|
|
|
+ /*第五个参数则是一个数组，用于配置颜色的渐变过程。
|
|
|
+ 每项为一个对象，包含offset和color两个参数
|
|
|
+ */
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ //代表渐变色从正上方开始
|
|
|
+ offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
|
|
|
+ color: "#644BFD",
|
|
|
+ }, //柱图渐变色
|
|
|
+ {
|
|
|
+ offset: 1, //指100%处的颜色
|
|
|
+ color: "#00F6E3",
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ ),
|
|
|
borderWidth: 2,
|
|
|
- borderColor: "#FF1E00",
|
|
|
- barBorderRadius: [10, 10, 0, 0], //修改柱状图圆角
|
|
|
+ // borderColor: "#2EE053",
|
|
|
+ barBorderRadius: [10, 10, 10, 10], //修改柱状图圆角
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "top",
|
|
|
+ color: "#006FFF",
|
|
|
+ formatter: function (params) {
|
|
|
+ return parseInt(params.value) + "%";
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
@@ -440,12 +581,16 @@ export default {
|
|
|
},
|
|
|
//tab状态改变
|
|
|
tabFun(a) {
|
|
|
- this.subValue = "";
|
|
|
- this.tabName = a.name;
|
|
|
- //根据已选的tab ---
|
|
|
- //根据已选的value--
|
|
|
- //开始查询下边的小项
|
|
|
- this.getSubOption(a.paneName);
|
|
|
+ debugger;
|
|
|
+ // console.log(this.subDimeList);
|
|
|
+ // debugger;
|
|
|
+ // this.subValue = "";
|
|
|
+ // this.tabName = a.name;
|
|
|
+ // //根据已选的tab ---
|
|
|
+ // //根据已选的value--
|
|
|
+ // //开始查询下边的小项
|
|
|
+ this.getSubOption(a);
|
|
|
+ // this.getSubOption(a.paneName);
|
|
|
//根据点击的name---查询里边的选项
|
|
|
//查询出来 下边的选项
|
|
|
},
|
|
|
@@ -467,7 +612,7 @@ export default {
|
|
|
open(val) {
|
|
|
this.planId = val.id;
|
|
|
this.planName = val.planName;
|
|
|
- this.userType = "焦虑";
|
|
|
+ this.userType = "心理异常";
|
|
|
this.pageNum = 1;
|
|
|
this.dialogVisible = true;
|
|
|
this.isFin();
|
|
|
@@ -540,39 +685,62 @@ export default {
|
|
|
{ value: this.unComplete, name: "未完成" },
|
|
|
];
|
|
|
|
|
|
- this.options2 = [
|
|
|
- { value: this.completeNum - dimensionList[0]["焦虑"], name: "焦虑" },
|
|
|
- { value: parseInt(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, name: "已完成人数" },
|
|
|
+ // { value: parseInt(dimensionList[1]["抑郁"]), name: "抑郁占比" },
|
|
|
+ // ];
|
|
|
|
|
|
- this.options4 = [
|
|
|
- { value: this.completeNum, name: "已完成人数" },
|
|
|
- { value: parseInt(dimensionList[2]["压力"]), name: "压力占比" },
|
|
|
- ];
|
|
|
+ // this.options4 = [
|
|
|
+ // { value: this.completeNum, name: "已完成人数" },
|
|
|
+ // { value: parseInt(dimensionList[2]["压力"]), name: "压力占比" },
|
|
|
+ // ];
|
|
|
|
|
|
- this.options5 = [
|
|
|
- { value: this.completeNum, name: "已完成人数" },
|
|
|
- { value: parseInt(dimensionList[3]["精神障碍"]), name: "精神障碍占比" },
|
|
|
- ];
|
|
|
+ // this.options5 = [
|
|
|
+ // { value: this.completeNum, name: "已完成人数" },
|
|
|
+ // { value: parseInt(dimensionList[3]["精神障碍"]), name: "精神障碍占比" },
|
|
|
+ // ];
|
|
|
|
|
|
this.options6 = [
|
|
|
{
|
|
|
- value: this.completeNum,
|
|
|
- name: "已完成人数",
|
|
|
+ value: this.completeNum - this.abnormalNum,
|
|
|
+ name: "心理健康",
|
|
|
},
|
|
|
- { value:this.completeNum - this.abnormalNum, name: "心理健康占比" },
|
|
|
+ { value: this.abnormalNum, name: "心理异常" },
|
|
|
];
|
|
|
+
|
|
|
+ let nameList = [];
|
|
|
+ // nameList.push("心理健康");
|
|
|
+ nameList.push("抑郁");
|
|
|
+ nameList.push("压力");
|
|
|
+ nameList.push("焦虑");
|
|
|
+ nameList.push("精神障碍");
|
|
|
+ let scoreList = [];
|
|
|
+ // scoreList.push(
|
|
|
+ // parseInt(((this.completeNum - this.abnormalNum) / this.completeNum) * 100)
|
|
|
+ // );
|
|
|
+ scoreList.push(this.completeNum==0?0: parseInt((dimensionList[1]["抑郁"] / this.completeNum) * 100));
|
|
|
+ scoreList.push(this.completeNum==0?0:parseInt((dimensionList[2]["压力"] / this.completeNum) * 100));
|
|
|
+ scoreList.push(this.completeNum==0?0:parseInt((dimensionList[0]["焦虑"] / this.completeNum) * 100));
|
|
|
+ scoreList.push(
|
|
|
+ this.completeNum==0?0: parseInt((dimensionList[3]["精神障碍"] / this.completeNum) * 100)
|
|
|
+ );
|
|
|
+
|
|
|
+ this.echarts_zhu = this.$refs.echarts_zhu;
|
|
|
+ this.option_zhu.xAxis.data = nameList;
|
|
|
+ this.option_zhu.series[0].data = scoreList;
|
|
|
+ let myChart1 = echarts.init(this.echarts_zhu);
|
|
|
+ myChart1.setOption(this.option_zhu);
|
|
|
}
|
|
|
);
|
|
|
},
|
|
|
userTypeChange(val) {
|
|
|
this.pageNum = 1;
|
|
|
- if (val == "心理健康异常") {
|
|
|
+ if (val == "心理异常") {
|
|
|
this.getAbnormalList();
|
|
|
} else {
|
|
|
this.dimensionName = val;
|
|
|
@@ -582,7 +750,10 @@ export default {
|
|
|
searchTarget() {
|
|
|
this.pageNum = 1;
|
|
|
this.getUnCompleteList();
|
|
|
- this.getDimensionPeopleList("焦虑");
|
|
|
+ // this.getDimensionPeopleList("焦虑");
|
|
|
+ //查询心理异常人员
|
|
|
+ // this.isAbnormal()
|
|
|
+ this.getAbnormalList();
|
|
|
},
|
|
|
//进来调用已选列表接口
|
|
|
searchList() {
|
|
|
@@ -603,7 +774,7 @@ export default {
|
|
|
//设置为当前总条数
|
|
|
},
|
|
|
complateHandleCurrentChange(val) {
|
|
|
- this.complatePageNum=val
|
|
|
+ this.complatePageNum = val;
|
|
|
this.getUnCompleteList();
|
|
|
},
|
|
|
|
|
|
@@ -768,7 +939,6 @@ export default {
|
|
|
// planId :this.planId,
|
|
|
// quesType:this.tabName,
|
|
|
// quesValue:this.subValue
|
|
|
-
|
|
|
this.$http.get(
|
|
|
`/userRecordScore/countByPlanIdAndOrgListAndQues?dimensionName=${params.dimensionName}&orgList=${params.orgList}&planId=${params.planId}&quesType=${params.quesType}&quesValue=${params.quesValue}`,
|
|
|
{},
|
|
|
@@ -776,10 +946,13 @@ export default {
|
|
|
if (res && res.code == 200) {
|
|
|
console.log("饼图数据");
|
|
|
console.log(res.data);
|
|
|
+
|
|
|
+ this.subAll = res.data.totalNum;
|
|
|
+ this.subSingle = res.data.highNum;
|
|
|
this.options7 = [
|
|
|
{
|
|
|
value: res.data.totalNum,
|
|
|
- name: "已完成人数",
|
|
|
+ name: `已完成${this.subValue}`,
|
|
|
},
|
|
|
{ value: res.data.highNum, name: this.subValue },
|
|
|
];
|
|
|
@@ -823,39 +996,50 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
+<style scoped>
|
|
|
+.report_top_right_out >>> .el-table__header-wrapper {
|
|
|
+ border-radius: 20px;
|
|
|
+ background-color: #f8f8f8;
|
|
|
+}
|
|
|
+.table-content >>> .el-table__header-wrapper {
|
|
|
+ border-radius: 20px;
|
|
|
+ background-color: #f8f8f8;
|
|
|
+}
|
|
|
+.radio_group_style >>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|
|
+ color: #000000;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.radio_group_style >>> .el-radio-button__inner {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+}
|
|
|
+</style>
|
|
|
<style>
|
|
|
-.el-dialog{
|
|
|
+.el-dialog {
|
|
|
border-radius: 20px !important;
|
|
|
-
|
|
|
}
|
|
|
.el-tabs__content {
|
|
|
display: contents !important;
|
|
|
}
|
|
|
-.org_class>>>.el-select-dropdown.is-multiple .el-select-dropdown__item {
|
|
|
-
|
|
|
-width: 300px !important;
|
|
|
+.org_class >>> .el-select-dropdown.is-multiple .el-select-dropdown__item {
|
|
|
+ width: 300px !important;
|
|
|
}
|
|
|
-.org_class>>>.el-select-dropdown__item {
|
|
|
-
|
|
|
-width: 300px !important;
|
|
|
+.org_class >>> .el-select-dropdown__item {
|
|
|
+ width: 300px !important;
|
|
|
}
|
|
|
</style>
|
|
|
<style scoped>
|
|
|
-.org_class>>>.el-input__inner {
|
|
|
+.org_class >>> .el-input__inner {
|
|
|
width: 300px !important;
|
|
|
}
|
|
|
-.org_class>>>.el-input {
|
|
|
+.org_class >>> .el-input {
|
|
|
width: 300px;
|
|
|
}
|
|
|
-.org_class>>>.el-select-dropdown.is-multiple .el-select-dropdown__item {
|
|
|
-
|
|
|
- width: 300px !important;
|
|
|
+.org_class >>> .el-select-dropdown.is-multiple .el-select-dropdown__item {
|
|
|
+ width: 300px !important;
|
|
|
}
|
|
|
-.org_class>>>.el-select-dropdown__item {
|
|
|
-
|
|
|
- width: 300px !important;
|
|
|
+.org_class >>> .el-select-dropdown__item {
|
|
|
+ width: 300px !important;
|
|
|
}
|
|
|
-
|
|
|
</style>
|
|
|
<style lang="less" scoped>
|
|
|
.pag_class /deep/ .el-input__inner {
|
|
|
@@ -865,5 +1049,52 @@ width: 300px !important;
|
|
|
.chart_wrap {
|
|
|
flex: 1;
|
|
|
// height: 450px;
|
|
|
+ .report_top_bingBo {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ .isComStyle {
|
|
|
+ font-size: 20px;
|
|
|
+ span {
|
|
|
+ background-color: #5470c6;
|
|
|
+ padding: 5px 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-left: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .isUnComStyle {
|
|
|
+ font-size: 20px;
|
|
|
+ span {
|
|
|
+ background-color: #ffae00;
|
|
|
+ padding: 5px 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-left: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.report_ge_title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .blue_t {
|
|
|
+ display: flex;
|
|
|
+ width: 14px;
|
|
|
+ background-color: #00bf78;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 20px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ .com {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.report_top_right_out {
|
|
|
+ flex: 6;
|
|
|
+ .report_top_right {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
