修改计划对比样式

src/components/ComparePlanUser.vue

@@ -7,7 +7,16 @@
       style="border-radius: 40px"
     >
       <div slot="title">
-        <p style="text-align: center; margin-bottom: 20px;font-size: 20px; font-weight: 700">{{userInfo.planName}}的用户列表</p>
+        <p
+          style="
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 20px;
+            font-weight: 700;
+          "
+        >
+          {{ userInfo.planName }}的用户列表
+        </p>
         <div class="table-content">
           <el-table
             :data="tableData"
@@ -36,61 +45,30 @@
               width=""
             >
               <template slot-scope="scope">
-                <!-- <div v-if="scope.row.isComplete == '0'" style="color: #ff7800">
-                  未开始
+                <div
+                  style="display: flex; justify-content: center; align-items: center"
+                  v-if="scope.row.isComplete == '1'"
+                >
+                  <img
+                    style="width: 16px"
+                    src="../assets/img/home/isCom.png"
+                    alt=""
+                  />&nbsp;&nbsp;
+                  <div style="color: #00955e">已完成</div>
                 </div>
-
-                <div v-if="scope.row.isComplete == '1'" style="color: #333333">
-                  已完成
-                </div> -->
-
-
                 <div
-                style="display: flex; justify-content: center; align-items: center"
-                v-if="scope.row.isComplete == '1'"
-              >
-                <img
-                  style="width: 16px"
-                  src="../assets/img/home/isCom.png"
-                  alt=""
-                />&nbsp;&nbsp;
-                <div style="color: #00955e">已完成</div>
-              </div>
-              <!-- <div
-                style="display: flex; justify-content: center; align-items: center"
-                v-if="scope.row.planStatus == '2'"
-              >
-                <img
-                  style="width: 16px"
-                  src="../../../assets/img/home/isRun.png"
-                  alt=""
-                />&nbsp;&nbsp;
-                <div style="color: #f6cb00">进行中</div>
-              </div> -->
-              <div
-                style="display: flex; justify-content: center; align-items: center"
-                v-if="scope.row.isComplete == '0'"
-              >
-                <img
-                  style="width: 16px"
-                  src="../assets/img/home/isNo.png"
-                  alt=""
-                />&nbsp;&nbsp;
-                <div style="color: #d52121">未开始</div>
-              </div>
+                  style="display: flex; justify-content: center; align-items: center"
+                  v-if="scope.row.isComplete == '0'"
+                >
+                  <img
+                    style="width: 16px"
+                    src="../assets/img/home/isNo.png"
+                    alt=""
+                  />&nbsp;&nbsp;
+                  <div style="color: #d52121">未开始</div>
+                </div>
               </template>
             </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
@@ -120,10 +98,17 @@
         width="82%"
         style="border-radius: 40px"
       >
-      <!-- <span v-if="userData1.length > 0&&userData2.length > 0">({{multipleSelection[0].userName }}vs{{multipleSelection[1].userName}})</span> -->
+        <!-- <span v-if="userData1.length > 0&&userData2.length > 0">({{multipleSelection[0].userName }}vs{{multipleSelection[1].userName}})</span> -->
         <div slot="title">
-          <p style="text-align: center; margin-bottom: 20px;font-size: 20px; font-weight: 700">
-            同一计划不同用户对比 
+          <p
+            style="
+              text-align: center;
+              margin-bottom: 20px;
+              font-size: 20px;
+              font-weight: 700;
+            "
+          >
+            同一计划不同用户对比
           </p>
           <div class="compare_plan">
             <div class="compare_plan_out1">
@@ -144,7 +129,7 @@
             </div>
           </div>
           <div class="compare_class">
-            <div class="compare_user1">
+            <div class="compare_user1" style="position: relative">
               <div class="compare_user1_out">
                 <img src="../assets/report/man.png" />
                 <div class="compare_user1_info">
@@ -161,6 +146,7 @@
               <div class="compare_group_detail">
                 {{ orgName1 }}
               </div>
+              <img class="img_vs" src="../assets/img/report/vs.png" />
             </div>
             <div class="compare_user2">
               <div class="compare_user1_out">
@@ -204,25 +190,48 @@
               </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 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 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">
+                      <span class="totol_all">维度：</span>
+                      <span>{{ 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">
+                      <span class="totol_all">维度：</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) <
@@ -235,6 +244,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="{
@@ -248,8 +262,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="{
@@ -263,6 +282,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="{
@@ -276,10 +300,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) <
@@ -290,9 +325,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) >
@@ -305,66 +350,35 @@
                   </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>
             </div>
           </div>
-          <!-- <div class="cpmpare_all" v-if="userData1.length > 0 && userData2.length > 0">
-            <div class="compare_score_detail_left">
-              <div v-for="(item, index) in userData1" :key="item.id">
-                <div class="compare_score_inner" v-show="userData1.length - 1 !== index">
-                  <div class="compare_score_left_back">
-                    维度：{{ item.dimensionName }}
-                  </div>
-                  <div class="compare_score_left">总分：{{ item.dimensionScore }}</div>
-
-                  <div class="compare_result_new">
-                    <span class="title">结论：</span>{{ item.dimensionSymptom }}
-                  </div>
-                  <div class="compare_result_new">
-                    <span class="title">说明：</span> {{ item.dimensionDesc }}
-                  </div>
-                  <div class="compare_result_new">
-                    <span class="title">分析：</span> {{ item.dimensionImprovement }}
-                  </div>
-                  <div class="compare_result_new">
-                    <span class="title">建议：</span> {{ item.dimensionSuggestion }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="compare_score_detail_right">
-              <div v-for="(item, index) in userData2" :key="item.id">
-                <div class="compare_score_inner" v-show="userData2.length - 1 !== index">
-                  <div class="compare_score_right_back">
-                    维度：{{ item.dimensionName }}
-                  </div>
-                  <div class="compare_score_right">总分：{{ item.dimensionScore }}</div>
-
-                  <div class="compare_result_new">
-                    <span class="title">结论：</span>{{ item.dimensionSymptom }}
-                  </div>
-                  <div class="compare_result_new">
-                    <span class="title">说明：</span> {{ item.dimensionDesc }}
-                  </div>
-                  <div class="compare_result_new">
-                    <span class="title">分析：</span> {{ item.dimensionImprovement }}
-                  </div>
-                  <div class="compare_result_new">
-                    <span class="title">建议：</span> {{ item.dimensionSuggestion }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div> -->
         </div>
       </el-dialog>
     </div>
@@ -415,7 +429,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']
@@ -541,6 +559,13 @@ export default {
     };
 
     this.option_z = {
+      title: {
+        text: "柱状图维度对比",
+        left: "center",
+        textStyle: {
+          fontSize: 16,
+        },
+      },
       xAxis: {
         type: "category",
         data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
@@ -549,21 +574,45 @@ export default {
         },
       },
       yAxis: {
+        name: "分数",
         type: "value",
       },
       series: [
         {
           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'
+            //   }
+            // }
           },
         },
         {
           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,
           },
         },
       ],
@@ -759,7 +808,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 {
@@ -791,7 +840,7 @@ export default {
   .compare_user2 {
     margin-left: 10px;
     flex: 1;
-    background-color: #fff4f2;
+    background-color: #ffdfdb;
     border-radius: 20px;
     padding: 20px 20px;
     .compare_user1_out {
@@ -991,26 +1040,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;
       }
     }
   }
@@ -1021,28 +1077,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;
+      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>