|
@@ -16,59 +16,98 @@
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
- <p class="c_name">{{ selectPlan1.planName }} - {{ orgInfo1.orgName }}</p>
|
|
|
|
- <div class="c_main">
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options1" chartId="myPieChart1" chartName="完成度" />
|
|
|
|
|
|
+ <div class="chart_wrap">
|
|
|
|
+ <div class="c_main1">
|
|
|
|
+ <!-- <p class="c_name">{{ selectPlan1.planName }} - {{ orgInfo1.orgName }}</p> -->
|
|
|
|
+ <div id="my_chart" style="width: 100%;height: 500px;"></div>
|
|
</div>
|
|
</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>
|
|
|
|
- <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-top: 40px;">
|
|
|
|
- <el-form-item label="计划名称">
|
|
|
|
- <el-select v-model="selectPlan2" placeholder="请选择计划" @change="planSelectHandle2">
|
|
|
|
- <el-option v-for="item in planList" :key="item.id" :label="item.planName" :value="item"></el-option>
|
|
|
|
- </el-select>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="组织名称">
|
|
|
|
- <el-select v-model="orgInfo2" placeholder="请选择组织" @change="orgSelectHandle2">
|
|
|
|
- <el-option v-for="item in organizationsList2" :key="item.id" :label="item.orgName"
|
|
|
|
- :value="item"></el-option>
|
|
|
|
- </el-select>
|
|
|
|
- </el-form-item>
|
|
|
|
- </el-form>
|
|
|
|
- <p class="c_name">{{ selectPlan2.planName }} - {{ orgInfo2.orgName }}</p>
|
|
|
|
- <div class="c_main">
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options7" chartId="myPieChart7" chartName="完成度" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options8" chartId="myPieChart8" chartName="焦虑" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options9" chartId="myPieChart9" chartName="抑郁" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options10" chartId="myPieChart10" chartName="压力" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options11" chartId="myPieChart11" chartName="精神障碍" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options12" chartId="myPieChart12" chartName="存在心理健康情况" />
|
|
|
|
|
|
+ <div class="c_main2">
|
|
|
|
+ <table>
|
|
|
|
+ <tr>
|
|
|
|
+ <th class="first">组织</th>
|
|
|
|
+ <th>一班</th>
|
|
|
|
+ <th>二班</th>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td class="first">总人数</td>
|
|
|
|
+ <td v-if="comparePlanDate.length > 2">{{ comparePlanDate[1]['completeNum'] +
|
|
|
|
+ comparePlanDate[1]['unComplete'] }}
|
|
|
|
+ </td>
|
|
|
|
+ <td v-if="comparePlanDate.length > 2">{{ comparePlanDate[2]['completeNum'] +
|
|
|
|
+ comparePlanDate[2]['completeNum'] }}
|
|
|
|
+ </td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td class="first">已完成人数</td>
|
|
|
|
+ <td v-if="comparePlanDate.length > 2">{{ comparePlanDate[1].completeNum }}</td>
|
|
|
|
+ <td v-if="comparePlanDate.length > 2">{{ comparePlanDate[2].completeNum }}</td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td class="first">未完成人数</td>
|
|
|
|
+ <td v-if="comparePlanDate.length > 2">{{ comparePlanDate[1].unComplete }}</td>
|
|
|
|
+ <td v-if="comparePlanDate.length > 2">{{ comparePlanDate[2].unComplete }}</td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td class="first">未完成人数占比</td>
|
|
|
|
+ <td>1</td>
|
|
|
|
+ <td></td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td class="first">焦虑人数</td>
|
|
|
|
+ <td>1</td>
|
|
|
|
+ <td></td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td class="first">焦虑占比</td>
|
|
|
|
+ <td>1</td>
|
|
|
|
+ <td></td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td class="first">抑郁人数</td>
|
|
|
|
+ <td>1</td>
|
|
|
|
+ <td></td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td class="first">抑郁占比</td>
|
|
|
|
+ <td>1</td>
|
|
|
|
+ <td></td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td class="first">抑郁占比</td>
|
|
|
|
+ <td>1</td>
|
|
|
|
+ <td></td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td class="first">压力人数</td>
|
|
|
|
+ <td>1</td>
|
|
|
|
+ <td></td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td class="first">压力占比</td>
|
|
|
|
+ <td>1</td>
|
|
|
|
+ <td></td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td class="first">精神障碍人数</td>
|
|
|
|
+ <td>1</td>
|
|
|
|
+ <td></td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td class="first">精神障碍占比</td>
|
|
|
|
+ <td>1</td>
|
|
|
|
+ <td></td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td class="first">健康异常人数</td>
|
|
|
|
+ <td>1</td>
|
|
|
|
+ <td></td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td class="first">健康异常占比</td>
|
|
|
|
+ <td>1</td>
|
|
|
|
+ <td></td>
|
|
|
|
+ </tr>
|
|
|
|
+ </table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -76,6 +115,8 @@
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
import PieChart from "@/components/PieChart";
|
|
import PieChart from "@/components/PieChart";
|
|
|
|
+import * as echarts from 'echarts';
|
|
|
|
+import { options } from "less";
|
|
|
|
|
|
export default {
|
|
export default {
|
|
components: {
|
|
components: {
|
|
@@ -108,37 +149,64 @@ export default {
|
|
options10: [],
|
|
options10: [],
|
|
options11: [],
|
|
options11: [],
|
|
options12: [],
|
|
options12: [],
|
|
|
|
+ options: {},
|
|
|
|
+ myChart: null,
|
|
userType: "",
|
|
userType: "",
|
|
planList: [],
|
|
planList: [],
|
|
organizationsList: [],
|
|
organizationsList: [],
|
|
organizationsList2: [],
|
|
organizationsList2: [],
|
|
comparePlanList: [],
|
|
comparePlanList: [],
|
|
- comparePlanDate: []
|
|
|
|
|
|
+ comparePlanDate: [
|
|
|
|
+ { 'unComplete': 0, 'completeNum': 0 }
|
|
|
|
+ ],
|
|
};
|
|
};
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
- this.selectPlan1 = this.$route.params;
|
|
|
|
- this.selectPlan2 = this.$route.params;
|
|
|
|
|
|
+ let params = JSON.parse(sessionStorage.getItem('comparePlanInfo'));
|
|
|
|
+ this.selectPlan1 = params;
|
|
|
|
+ this.selectPlan2 = params;
|
|
this.getPlanList();
|
|
this.getPlanList();
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
this.getPlanOrganization(this.selectPlan1.id).then((res) => {
|
|
this.getPlanOrganization(this.selectPlan1.id).then((res) => {
|
|
this.organizationsList = res.data;
|
|
this.organizationsList = res.data;
|
|
this.organizationsList2 = res.data;
|
|
this.organizationsList2 = res.data;
|
|
this.orgInfo1 = res.data[0];
|
|
this.orgInfo1 = res.data[0];
|
|
this.orgInfo2 = res.data[1];
|
|
this.orgInfo2 = res.data[1];
|
|
- this.queryCompletePople(this.selectPlan1.id, [this.orgInfo1.orgNo], 0);
|
|
|
|
- this.queryCompletePople(this.selectPlan2.id, [this.orgInfo2.orgNo], 1);
|
|
|
|
|
|
+ this.initChart();
|
|
|
|
+ this.options = {
|
|
|
|
+ legend: {},
|
|
|
|
+ tooltip: {},
|
|
|
|
+ dataset: {
|
|
|
|
+ source: [
|
|
|
|
+ ['product', '2015', '2016'],
|
|
|
|
+ ['未完成占比', 43.3, 85.8],
|
|
|
|
+ ['焦虑占比', 83.1, 73.4],
|
|
|
|
+ ['抑郁占比', 86.4, 65.2],
|
|
|
|
+ ['压力占比', 72.4, 53.9],
|
|
|
|
+ ['精神障碍占比', 72.4, 53.9],
|
|
|
|
+ ['健康异常占比', 72.4, 53.9],
|
|
|
|
+ ]
|
|
|
|
+ },
|
|
|
|
+ xAxis: { type: 'category' },
|
|
|
|
+ yAxis: {},
|
|
|
|
+ series: [{ type: 'bar' }, { type: 'bar' }]
|
|
|
|
+ };
|
|
|
|
+ this.queryCompletePople(this.selectPlan1.id, [this.orgInfo1.orgNo], 1);
|
|
|
|
+ this.queryCompletePople(this.selectPlan2.id, [this.orgInfo2.orgNo], 2);
|
|
});
|
|
});
|
|
- },
|
|
|
|
- mounted() {
|
|
|
|
-
|
|
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ initChart() {
|
|
|
|
+ var chartDom = document.getElementById('my_chart');
|
|
|
|
+ this.myChart = echarts.init(chartDom);
|
|
|
|
+ this.option && this.myChart.setOption(this.option);
|
|
|
|
+ },
|
|
|
|
+
|
|
// 查询测试计划
|
|
// 查询测试计划
|
|
getPlanList() {
|
|
getPlanList() {
|
|
this.$http.get(`plan/findListByPage?pageSize=${this.pageSize}&pageNum=${this.pageNum}&planName=${this.planName}`, {}, (res) => {
|
|
this.$http.get(`plan/findListByPage?pageSize=${this.pageSize}&pageNum=${this.pageNum}&planName=${this.planName}`, {}, (res) => {
|
|
if (res && res.code == 200) {
|
|
if (res && res.code == 200) {
|
|
- console.log(res.data.content);
|
|
|
|
- debugger
|
|
|
|
this.planList = res.data.content;
|
|
this.planList = res.data.content;
|
|
this.total = res.data.totalElements;
|
|
this.total = res.data.totalElements;
|
|
} else {
|
|
} else {
|
|
@@ -167,7 +235,8 @@ export default {
|
|
this.$http.get(url, {}, (res) => {
|
|
this.$http.get(url, {}, (res) => {
|
|
if (res.code == 200) {
|
|
if (res.code == 200) {
|
|
this.getPlanDimNun(id, n, i);
|
|
this.getPlanDimNun(id, n, i);
|
|
- this.comparePlanDate[i] = { 'unComplete': res.data[0], 'completeNum': res.data[1] }
|
|
|
|
|
|
+ this.comparePlanDate.push({ 'unComplete': res.data[0], 'completeNum': res.data[1] });
|
|
|
|
+ console.log(this.comparePlanDate.length)
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
},
|
|
@@ -180,56 +249,11 @@ export default {
|
|
(res) => {
|
|
(res) => {
|
|
console.log(res);
|
|
console.log(res);
|
|
let dimensionList = res.data;
|
|
let dimensionList = res.data;
|
|
- if (i == 0) {
|
|
|
|
- this.options1 = [
|
|
|
|
- { value: this.comparePlanDate[0].completeNum + this.comparePlanDate[0].unComplete, name: "已完成人数" },
|
|
|
|
- { value: this.comparePlanDate[0].unComplete, name: "未完成占比" },
|
|
|
|
- ];
|
|
|
|
-
|
|
|
|
- this.options2 = [
|
|
|
|
- { value: this.comparePlanDate[0].completeNum, name: "焦虑" },
|
|
|
|
- { value: parseInt(dimensionList[0]["焦虑"]), name: "焦虑占比" },
|
|
|
|
- ];
|
|
|
|
-
|
|
|
|
- this.options3 = [
|
|
|
|
- { value: this.comparePlanDate[0].completeNum, name: "已完成人数" },
|
|
|
|
- { value: parseInt(dimensionList[1]["抑郁"]), name: "抑郁占比" },
|
|
|
|
- ];
|
|
|
|
-
|
|
|
|
- this.options4 = [
|
|
|
|
- { value: this.comparePlanDate[0].completeNum, name: "已完成人数" },
|
|
|
|
- { value: parseInt(dimensionList[2]["压力"]), name: "压力占比" },
|
|
|
|
- ];
|
|
|
|
-
|
|
|
|
- this.options5 = [
|
|
|
|
- { value: this.comparePlanDate[0].completeNum, name: "已完成人数" },
|
|
|
|
- { value: parseInt(dimensionList[3]["精神障碍"]), name: "精神障碍占比" },
|
|
|
|
- ];
|
|
|
|
- } else {
|
|
|
|
- this.options7 = [
|
|
|
|
- { value: this.comparePlanDate[1].completeNum + this.comparePlanDate[1].unComplete, name: "已完成人数" },
|
|
|
|
- { value: this.comparePlanDate[1].unComplete, name: "未完成占比" },
|
|
|
|
- ];
|
|
|
|
- this.options8 = [
|
|
|
|
- { value: this.comparePlanDate[1].completeNum, name: "焦虑" },
|
|
|
|
- { value: parseInt(dimensionList[0]["焦虑"]), name: "焦虑占比" },
|
|
|
|
- ];
|
|
|
|
-
|
|
|
|
- this.options9 = [
|
|
|
|
- { value: this.comparePlanDate[1].completeNum, name: "已完成人数" },
|
|
|
|
- { value: parseInt(dimensionList[1]["抑郁"]), name: "抑郁占比" },
|
|
|
|
- ];
|
|
|
|
-
|
|
|
|
- this.options10 = [
|
|
|
|
- { value: this.comparePlanDate[1].completeNum, name: "已完成人数" },
|
|
|
|
- { value: parseInt(dimensionList[2]["压力"]), name: "压力占比" },
|
|
|
|
- ];
|
|
|
|
-
|
|
|
|
- this.options11 = [
|
|
|
|
- { value: this.comparePlanDate[1].completeNum, name: "已完成人数" },
|
|
|
|
- { value: parseInt(dimensionList[3]["精神障碍"]), name: "精神障碍占比" },
|
|
|
|
- ];
|
|
|
|
- }
|
|
|
|
|
|
+ this.options['dataset']['source'][1][i] = (this.comparePlanDate[i].unComplete / (this.comparePlanDate[i].completeNum + this.comparePlanDate[i].unComplete)) * 100;
|
|
|
|
+ this.options.dataset.source[2][i] = (parseInt(dimensionList[0]["焦虑"]) / this.comparePlanDate[i].completeNum) * 100;
|
|
|
|
+ this.options.dataset.source[3][i] = (parseInt(dimensionList[1]["抑郁"]) / this.comparePlanDate[i].completeNum) * 100;
|
|
|
|
+ this.options.dataset.source[4][i] = (parseInt(dimensionList[2]["压力"]) / this.comparePlanDate[i].completeNum) * 100;
|
|
|
|
+ this.options.dataset.source[5][i] = (parseInt(dimensionList[3]["精神障碍"]) / this.comparePlanDate[i].completeNum) * 100;
|
|
this.isAbnormal(id, n, i);
|
|
this.isAbnormal(id, n, i);
|
|
}
|
|
}
|
|
);
|
|
);
|
|
@@ -240,23 +264,8 @@ export default {
|
|
let url = `/planUser/countCompletedUserHighRisk?planId=${id}&orgList=${n}`;
|
|
let url = `/planUser/countCompletedUserHighRisk?planId=${id}&orgList=${n}`;
|
|
this.$http.get(url, {}, (res) => {
|
|
this.$http.get(url, {}, (res) => {
|
|
if (res.code == 200) {
|
|
if (res.code == 200) {
|
|
- if (i == 0) {
|
|
|
|
- this.options6 = [
|
|
|
|
- {
|
|
|
|
- value: this.comparePlanDate[0].completeNum,
|
|
|
|
- name: "已完成人数",
|
|
|
|
- },
|
|
|
|
- { value: res.data, name: "健康异常占比" },
|
|
|
|
- ];
|
|
|
|
- } else {
|
|
|
|
- this.options12 = [
|
|
|
|
- {
|
|
|
|
- value: this.comparePlanDate[1].completeNum,
|
|
|
|
- name: "已完成人数",
|
|
|
|
- },
|
|
|
|
- { value: res.data, name: "健康异常占比" },
|
|
|
|
- ];
|
|
|
|
- }
|
|
|
|
|
|
+ this.options.dataset.source[6][i] = (parseInt(res.data) / this.comparePlanDate[i].completeNum) * 100;
|
|
|
|
+ this.options && this.myChart.setOption(this.options);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
},
|
|
@@ -289,10 +298,46 @@ export default {
|
|
width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
-.c_main {
|
|
|
|
|
|
+.c_main1 {
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
- display: flex;
|
|
|
|
|
|
+ width: 60%;
|
|
|
|
+ padding: 0 50px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.c_main2 {
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ width: 40%;
|
|
padding: 0 50px;
|
|
padding: 0 50px;
|
|
|
|
+
|
|
|
|
+ table {
|
|
|
|
+ border-collapse: collapse;
|
|
|
|
+ border-spacing: 0;
|
|
|
|
+ // border: 1px solid #dddddd;
|
|
|
|
+
|
|
|
|
+ tr {
|
|
|
|
+ padding: 0;
|
|
|
|
+ margin: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ th.first {
|
|
|
|
+ text-align: left;
|
|
|
|
+ background: #75BD42;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ td.first {
|
|
|
|
+ text-align: left;
|
|
|
|
+ background: #E3F2D9;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ th,
|
|
|
|
+ td {
|
|
|
|
+ padding: 6px 8px;
|
|
|
|
+ border: none;
|
|
|
|
+ border: 1px solid #dddddd;
|
|
|
|
+ margin: 0;
|
|
|
|
+ text-align: right;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
.pag_class /deep/ .el-input__inner {
|
|
.pag_class /deep/ .el-input__inner {
|
|
@@ -300,7 +345,8 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
.chart_wrap {
|
|
.chart_wrap {
|
|
- flex: 1;
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
height: 200px;
|
|
height: 200px;
|
|
}
|
|
}
|
|
|
|
|