修改报告样式

src/components/ComparePlanUser.vue

@@ -7,7 +7,7 @@
       style="border-radius: 40px"
     >
       <div slot="title">
-        <p style="text-align: center;margin-bottom: 20px; font-weight: 700;">用户列表</p>
+        <p style="text-align: center; margin-bottom: 20px; font-weight: 700">用户列表</p>
         <div class="table-content">
           <el-table
             :data="tableData"
@@ -61,10 +61,11 @@
           :total="total"
         >
         </el-pagination>
-        <p style="text-align: center;margin-top:20px">  <el-button type="success" round class="add_class" @click="isCompare"
-          >对比</el-button
-        ></p>
-      
+        <p style="text-align: center; margin-top: 20px">
+          <el-button type="success" round class="add_class" @click="isCompare"
+            >对比</el-button
+          >
+        </p>
       </div>
     </el-dialog>
 
@@ -76,7 +77,9 @@
         style="border-radius: 40px"
       >
         <div slot="title">
-          <p style="text-align: center;margin-bottom: 20px; font-weight: 700;">同一计划不同用户对比</p>
+          <p style="text-align: center; margin-bottom: 20px; font-weight: 700">
+            同一计划不同用户对比
+          </p>
           <div class="compare_plan">
             <div class="compare_plan_out1">
               <span class="compare_plan_name" v-if="userData1.length > 0"
@@ -156,6 +159,55 @@
           </div>
           <div ref="echarts_ld" style="width: 100%; height: 600px"></div>
           <div ref="echarts_zhu" style="width: 100%; height: 600px"></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">
+                  <!-- {{index}}{{item}} -->
+                  <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>
@@ -464,22 +516,22 @@ export default {
     //选择用户进行对比的方法
     handleSelectionChange(val) {
       // isComplete
-            //判断里边是否有未完成的
-      let hasNo =false
+      //判断里边是否有未完成的
+      let hasNo = false;
       if (val.length > 0) {
         for (let i = 0; i < val.length; i++) {
           //
-          if(val[i].isComplete=='0'){
-            hasNo=true
+          if (val[i].isComplete == "0") {
+            hasNo = true;
           }
         }
       }
-      if(hasNo){
+      if (hasNo) {
         this.$message({
           type: "warning",
           message: "请选已完成的",
         });
-        return
+        return;
       }
       if (val.length > 2) {
         this.$message({
@@ -658,4 +710,108 @@ export default {
     }
   }
 }
+.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;
+        }
+      }
+    }
+  }
+}
 </style>

src/components/CompareUser.vue

@@ -146,10 +146,6 @@
           </div>
           <div ref="echarts_ld" style="width: 100%; height: 600px"></div>
           <div ref="echarts_zhu" style="width: 100%; height: 600px"></div>
-          <!-- <div v-for=" (index,item) in userData1" :key="index">
-            {{item}}
-          </div> -->
-          <!-- {{ userData1 }} -->
           <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">