|
|
@@ -209,26 +209,70 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div ref="echarts_ld" style="width: 100%; height: 600px"></div>
|
|
|
+ <div ref="echarts_ld" style="width: 100%; height: 600px; margin-top:20px" ></div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 柱状图维度对比
|
|
|
+ </div>
|
|
|
<div ref="echarts_zhu" style="width: 100%; height: 600px"></div>
|
|
|
<div class="cpmpare_all" v-if="userData1.length > 0 && userData2.length > 0">
|
|
|
<div v-for="(item, index) in userData1" :key="item.id">
|
|
|
- <div v-show="item.dimensionName != '总分'">
|
|
|
- <!-- <div v-show="index<userData2.length-1"> -->
|
|
|
- <div class="dimensionality_out">
|
|
|
+ <div v-show="item.dimensionName != '总分'" style="margin-bottom: 40px">
|
|
|
+ <div class="dimensionality_out" style="margin-bottom: 20px">
|
|
|
<div class="left">
|
|
|
- <span class="totol_all">维度：</span
|
|
|
- >{{ userData1[index].dimensionName }}
|
|
|
+ <img
|
|
|
+ style="width: 22px; height: 22px; margin-right: 10px"
|
|
|
+ src="../assets/img/report/wd_left.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ background-color: #dcebff;
|
|
|
+ flex: 1;
|
|
|
+ line-height: 30px;
|
|
|
+ display: flex;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span class="totol_all" style="letter-spacing: 3px">维度：</span>
|
|
|
+ <span style="display: flex">{{
|
|
|
+ userData1[index].dimensionName
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
- <span class="totol_all">维度：</span
|
|
|
- >{{ userData2[index].dimensionName }}
|
|
|
+ <img
|
|
|
+ style="width: 22px; height: 22px; margin-right: 10px"
|
|
|
+ src="../assets/img/report/wd_right.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ background-color: #ffdfdb;
|
|
|
+ flex: 1;
|
|
|
+ line-height: 30px;
|
|
|
+ display: flex;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span class="totol_all" style="letter-spacing: 3px">维度：</span>
|
|
|
+ <span> {{ userData2[index].dimensionName }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="allScore_out">
|
|
|
+ <div class="allScore_out" style="margin-bottom: 20px">
|
|
|
<div class="left">
|
|
|
- <span class="totol_all">总分：</span
|
|
|
- ><span
|
|
|
+ <img
|
|
|
+ style="width: 22px; height: 22px; margin-right: 10px"
|
|
|
+ src="../assets/img/report/zf_left.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span class="totol_all">总分：</span>
|
|
|
+ <span
|
|
|
:style="{
|
|
|
color:
|
|
|
parseFloat(userData1[index].dimensionScore) <
|
|
|
@@ -241,6 +285,11 @@
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<!-- {{userData1[index].dimensionScore>userData2[index].dimensionScore}} -->
|
|
|
+ <img
|
|
|
+ style="width: 22px; height: 22px; margin-right: 10px"
|
|
|
+ src="../assets/img/report/zf_right.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<span class="totol_all">总分：</span
|
|
|
><span
|
|
|
:style="{
|
|
|
@@ -254,8 +303,13 @@
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="allScore_out">
|
|
|
+ <div class="allScore_out" style="margin-bottom: 20px">
|
|
|
<div class="left">
|
|
|
+ <img
|
|
|
+ style="width: 22px; height: 22px; margin-right: 10px"
|
|
|
+ src="../assets/img/report/jl_left.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<span class="totol_all">结论：</span
|
|
|
><span
|
|
|
:style="{
|
|
|
@@ -269,6 +323,11 @@
|
|
|
>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
+ <img
|
|
|
+ style="width: 22px; height: 22px; margin-right: 10px"
|
|
|
+ src="../assets/img/report/jl_right.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<span class="totol_all">结论：</span
|
|
|
><span
|
|
|
:style="{
|
|
|
@@ -282,10 +341,21 @@
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="allScore_out">
|
|
|
- <div class="left">
|
|
|
- <span class="totol_all">说明：</span
|
|
|
- ><span
|
|
|
+ <div class="allScore_out" style="margin-bottom: 20px">
|
|
|
+ <div
|
|
|
+ class="left"
|
|
|
+ style="align-items: flex-start; justify-content: start"
|
|
|
+ >
|
|
|
+ <div style="display: flex">
|
|
|
+ <img
|
|
|
+ style="width: 22px; height: 22px; margin-right: 10px"
|
|
|
+ src="../assets/img/report/sm_left.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span class="totol_all" style="width: 60px">说明：</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <span
|
|
|
:style="{
|
|
|
color:
|
|
|
parseFloat(userData1[index].dimensionScore) <
|
|
|
@@ -296,9 +366,19 @@
|
|
|
>{{ userData1[index].dimensionDesc }}</span
|
|
|
>
|
|
|
</div>
|
|
|
- <div class="right">
|
|
|
- <span class="totol_all">说明：</span
|
|
|
- ><span
|
|
|
+ <div
|
|
|
+ class="right"
|
|
|
+ style="align-items: flex-start; justify-content: start"
|
|
|
+ >
|
|
|
+ <div style="display: flex">
|
|
|
+ <img
|
|
|
+ style="width: 22px; height: 22px; margin-right: 10px"
|
|
|
+ src="../assets/img/report/sm_right.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span class="totol_all" style="width: 60px">说明：</span>
|
|
|
+ </div>
|
|
|
+ <span
|
|
|
:style="{
|
|
|
color:
|
|
|
parseFloat(userData1[index].dimensionScore) >
|
|
|
@@ -311,13 +391,33 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="allScore_out">
|
|
|
- <div class="left">
|
|
|
- <span class="totol_all">建议：</span
|
|
|
- >{{ userData1[index].dimensionSuggestion }}
|
|
|
+ <div
|
|
|
+ class="left"
|
|
|
+ style="align-items: flex-start; justify-content: start"
|
|
|
+ >
|
|
|
+ <div style="display: flex">
|
|
|
+ <img
|
|
|
+ style="width: 22px; height: 22px; margin-right: 10px"
|
|
|
+ src="../assets/img/report/jy_left.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span class="totol_all" style="width: 60px">建议：</span>
|
|
|
+ </div>
|
|
|
+ {{ userData1[index].dimensionSuggestion }}
|
|
|
</div>
|
|
|
- <div class="right">
|
|
|
- <span class="totol_all">建议：</span
|
|
|
- >{{ userData2[index].dimensionSuggestion }}
|
|
|
+ <div
|
|
|
+ class="right"
|
|
|
+ style="align-items: flex-start; justify-content: start"
|
|
|
+ >
|
|
|
+ <div style="display: flex">
|
|
|
+ <img
|
|
|
+ style="width: 22px; height: 22px; margin-right: 10px"
|
|
|
+ src="../assets/img/report/jy_right.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span class="totol_all" style="width: 60px">建议：</span>
|
|
|
+ </div>
|
|
|
+ {{ userData2[index].dimensionSuggestion }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -421,7 +521,11 @@ export default {
|
|
|
this.echarts_zhu = this.$refs.echarts_zhu;
|
|
|
this.option_w = {
|
|
|
title: {
|
|
|
- // text: 'Basic Radar Chart'
|
|
|
+ text: "雷达图维度对比",
|
|
|
+ left: "center",
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16,
|
|
|
+ },
|
|
|
},
|
|
|
legend: {
|
|
|
// data: ['Allocated Budget', 'Actual Spending']
|
|
|
@@ -547,6 +651,17 @@ export default {
|
|
|
};
|
|
|
|
|
|
this.option_z = {
|
|
|
+ title: {
|
|
|
+ text: "",
|
|
|
+ left: "center",
|
|
|
+
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
|
@@ -556,6 +671,7 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
yAxis: {
|
|
|
+ name: "分数",
|
|
|
type: "value",
|
|
|
},
|
|
|
series: [
|
|
|
@@ -563,14 +679,52 @@ export default {
|
|
|
data: [120, 200, 150, 80, 70, 110, 130],
|
|
|
type: "bar",
|
|
|
itemStyle: {
|
|
|
- color: "#B2D4FF",
|
|
|
+ // 设置柱状图的颜色
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
|
|
+ { offset: 0, color: "#00F6E3" },
|
|
|
+ { offset: 1, color: "#644BFD" },
|
|
|
+ ]),
|
|
|
+ borderRadius: [18, 18, 18, 18],
|
|
|
+ // background:{
|
|
|
+ // color:'rgba(0,0,0,0.1)',
|
|
|
+ // image:'../assets/img/home/bg_p.png'
|
|
|
+ // },
|
|
|
+ barWidth: 40,
|
|
|
+ // normal:{
|
|
|
+ // background:{
|
|
|
+ // color:'rgba(0,0,0,0.1)',
|
|
|
+ // image:'../assets/img/home/bg_p.png'
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "top",
|
|
|
+ color: "#006FFF",
|
|
|
+ formatter: function (params) {
|
|
|
+ return parseInt(params.value);
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
data: [120, 200, 150, 80, 70, 110, 130],
|
|
|
type: "bar",
|
|
|
itemStyle: {
|
|
|
- color: "#FFBBB2",
|
|
|
+ // 设置柱状图的颜色
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
|
|
+ { offset: 0, color: "#FCD04B" },
|
|
|
+ { offset: 1, color: "#FF4C15" },
|
|
|
+ ]),
|
|
|
+ borderRadius: [18, 18, 18, 18],
|
|
|
+ barWidth: 40,
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "top",
|
|
|
+ color: "#FE7A28",
|
|
|
+ formatter: function (params) {
|
|
|
+ return parseInt(params.value);
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
@@ -697,10 +851,15 @@ export default {
|
|
|
myChart.setOption(this.option_w);
|
|
|
|
|
|
const myChart1 = echarts.init(this.echarts_zhu);
|
|
|
+ this.option_z.series[0].name = this.multipleSelection[0].planName;
|
|
|
this.option_z.series[0].data = this.echarts_data_list1;
|
|
|
+ this.option_z.series[1].name = this.multipleSelection[1].planName;
|
|
|
this.option_z.series[1].data = this.echarts_data_list2;
|
|
|
this.option_z.xAxis.data = this.echarts_zhuname_list; //name
|
|
|
-
|
|
|
+ this.option_z.legend.data = [
|
|
|
+ this.multipleSelection[0].planName,
|
|
|
+ this.multipleSelection[1].planName,
|
|
|
+ ];
|
|
|
myChart1.setOption(this.option_z);
|
|
|
}
|
|
|
},
|
|
|
@@ -766,6 +925,7 @@ export default {
|
|
|
border-radius: 20px !important;
|
|
|
// background-color: #f7f7f7 !important;
|
|
|
}
|
|
|
+
|
|
|
.pag_class /deep/ .el-input__inner {
|
|
|
width: 100% !important;
|
|
|
}
|
|
|
@@ -776,7 +936,7 @@ export default {
|
|
|
.compare_user1 {
|
|
|
flex: 1;
|
|
|
margin-right: 10px;
|
|
|
- background-color: #f1f7ff;
|
|
|
+ background-color: #dcebff;
|
|
|
padding: 20px 20px;
|
|
|
border-radius: 20px;
|
|
|
.compare_user1_out {
|
|
|
@@ -802,13 +962,13 @@ export default {
|
|
|
.compare_group_detail {
|
|
|
margin-top: 10px;
|
|
|
font-size: 16px;
|
|
|
- color: #006fff;
|
|
|
+ // color: #006fff;
|
|
|
}
|
|
|
}
|
|
|
.compare_user2 {
|
|
|
margin-left: 10px;
|
|
|
flex: 1;
|
|
|
- background-color: #fff4f2;
|
|
|
+ background-color: #ffdfdb;
|
|
|
border-radius: 20px;
|
|
|
padding: 20px 20px;
|
|
|
.compare_user1_out {
|
|
|
@@ -834,7 +994,7 @@ export default {
|
|
|
.compare_group_detail {
|
|
|
margin-top: 10px;
|
|
|
font-size: 16px;
|
|
|
- color: #ff3014;
|
|
|
+ // color: #ff3014;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -855,7 +1015,6 @@ export default {
|
|
|
color: #999999;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
.compare_plan_out2 {
|
|
|
margin-left: 10px;
|
|
|
flex: 1;
|
|
|
@@ -874,22 +1033,6 @@ export default {
|
|
|
.compare_score_inner {
|
|
|
padding-left: 20px;
|
|
|
flex: 1;
|
|
|
- .compare_score_left_back {
|
|
|
- color: #006fff;
|
|
|
- margin-top: 20px;
|
|
|
- margin-bottom: 10px;
|
|
|
- font-size: 20px;
|
|
|
- letter-spacing: 3px;
|
|
|
- background-color: #f1f7ff;
|
|
|
- }
|
|
|
- .compare_score_right_back {
|
|
|
- color: #ff3014;
|
|
|
- margin-top: 20px;
|
|
|
- margin-bottom: 10px;
|
|
|
- font-size: 20px;
|
|
|
- letter-spacing: 3px;
|
|
|
- background-color: #fff4f2;
|
|
|
- }
|
|
|
.compare_score_left {
|
|
|
color: #006fff;
|
|
|
margin-top: 20px;
|
|
|
@@ -908,12 +1051,108 @@ export default {
|
|
|
font-size: 16px;
|
|
|
letter-spacing: 3px;
|
|
|
}
|
|
|
- .compare_result_new {
|
|
|
- font-size: 20px;
|
|
|
- letter-spacing: 3px;
|
|
|
- margin-top: 10px;
|
|
|
- .title {
|
|
|
+ }
|
|
|
+}
|
|
|
+.cpmpare_all {
|
|
|
+ display: flex;
|
|
|
+ .compare_score_detail_left {
|
|
|
+ flex: 1;
|
|
|
+ .compare_score_inner {
|
|
|
+ padding-left: 20px;
|
|
|
+ flex: 1;
|
|
|
+ .compare_score_left_back {
|
|
|
+ color: #006fff;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ background-color: #f1f7ff;
|
|
|
+ }
|
|
|
+ .compare_score_right_back {
|
|
|
+ color: #ff3014;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ background-color: #fff4f2;
|
|
|
+ }
|
|
|
+ .compare_score_left {
|
|
|
color: #006fff;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ }
|
|
|
+ .compare_score_right {
|
|
|
+ color: #ff3014;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ }
|
|
|
+ .compare_result {
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ }
|
|
|
+ .compare_result_new {
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ margin-top: 10px;
|
|
|
+ .title {
|
|
|
+ color: #006fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .compare_score_detail_right {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .compare_score_inner {
|
|
|
+ padding-left: 20px;
|
|
|
+ flex: 1;
|
|
|
+ .compare_score_left_back {
|
|
|
+ color: #006fff;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ background-color: #f1f7ff;
|
|
|
+ }
|
|
|
+ .compare_score_right_back {
|
|
|
+ color: #ff3014;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ background-color: #fff4f2;
|
|
|
+ }
|
|
|
+ .compare_score_left {
|
|
|
+ color: #006fff;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ }
|
|
|
+ .compare_score_right {
|
|
|
+ color: #ff3014;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ }
|
|
|
+ .compare_result {
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ }
|
|
|
+ .compare_result_new {
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ margin-top: 10px;
|
|
|
+ .title {
|
|
|
+ color: #006fff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -929,26 +1168,33 @@ export default {
|
|
|
.left {
|
|
|
margin-right: 10px;
|
|
|
flex: 1;
|
|
|
-
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
margin-top: 20px;
|
|
|
margin-bottom: 4px;
|
|
|
font-size: 16px;
|
|
|
letter-spacing: 3px;
|
|
|
- background-color: #f1f7ff;
|
|
|
+ // background-color: #f1f7ff;
|
|
|
.totol_all {
|
|
|
- color: #006fff;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
.right {
|
|
|
margin-left: 10px;
|
|
|
flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
margin-top: 20px;
|
|
|
margin-bottom: 4px;
|
|
|
font-size: 16px;
|
|
|
letter-spacing: 3px;
|
|
|
- background-color: #f1f7ff;
|
|
|
+ // background-color: #f1f7ff;
|
|
|
.totol_all {
|
|
|
- color: #006fff;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -959,30 +1205,42 @@ export default {
|
|
|
.left {
|
|
|
margin-right: 10px;
|
|
|
flex: 1;
|
|
|
-
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
// margin-top: 10px;
|
|
|
margin-bottom: 4px;
|
|
|
font-size: 16px;
|
|
|
letter-spacing: 3px;
|
|
|
// background-color: #f1f7ff;
|
|
|
.totol_all {
|
|
|
- color: #006fff;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
.right {
|
|
|
margin-left: 10px;
|
|
|
flex: 1;
|
|
|
- flex: 1;
|
|
|
-
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
// margin-top: 10px;
|
|
|
margin-bottom: 4px;
|
|
|
font-size: 16px;
|
|
|
letter-spacing: 3px;
|
|
|
// background-color: #f1f7ff;
|
|
|
.totol_all {
|
|
|
- color: #006fff;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.img_vs {
|
|
|
+ width: 140px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: -50px;
|
|
|
+ margin-right: -78px;
|
|
|
+}
|
|
|
</style>
|
