cpdm_manage/src/components/CompareUser.vue

<template>
  <div class="out">
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="80%"
      style="border-radius: 40px"
    >
      <div slot="title">
        <p
          style="
            text-align: center;
            margin-bottom: 20px;
            font-size: 20px;
            font-weight: 700;
          "
        >
          {{ userInfo.userName }}的计划列表
        </p>
        <div class="table-content">
          <el-table
            :data="tableData"
            :row-style="{ height: '0px' }"
            :cell-style="{ padding: '5px' }"
            :header-cell-style="{ background: '#F8F8F8', color: '#606266' }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="planName"
              label="计划名称"
              align="center"
              width=""
            >
            </el-table-column>
            <!-- <el-table-column prop="planOrgName" label="所属专业" align="center" width="">
            </el-table-column> -->
            <el-table-column prop="score" label="总分" align="center" width="">
            </el-table-column>
            <el-table-column prop="planEndTime" label="结束时间" align="center" width="">
            </el-table-column>
            <el-table-column prop="enable" label="是否授权" align="center" width="">
              <template slot-scope="scope">
                <div
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                  "
                  v-if="scope.row.enable == '1'"
                >
                  <!-- <img src="../../assets/img/home/isA.png" /> -->
                  <div
                    style="
                      color: #00955e;
                      border: 1px solid #577bff;
                      line-height: 24px;
                      padding: 0px 15px;
                      border-radius: 20px;
                      background: #f0f6fe;
                      color: #3061ff;
                    "
                  >
                    已授权
                  </div>
                </div>
                <div
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                  "
                  v-if="scope.row.enable == '0'"
                >
                  <div
                    style="
                      color: #00955e;
                      border: 1px solid #fdb1b1;
                      line-height: 24px;
                      padding: 0px 15px;
                      border-radius: 20px;
                      background: #fef0f0;
                      color: #e14545;
                    "
                  >
                    未授权
                  </div>
                  <!-- <img src="../../assets/img/home/isA.png" style="width: 80px;"/> -->
                  <!-- <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
          class="pag_class"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          layout="total, sizes, prev, pager, next"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :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>
      </div>
    </el-dialog>

    <div>
      <el-dialog
        :visible.sync="compareVisible"
        :close-on-click-modal="false"
        width="80%"
        style="border-radius: 40px"
      >
        <div slot="title">
          <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="multipleSelection[0]"
                >计划名称：{{ multipleSelection[0].planName }}</span
              >
              <span class="compare_plan_time" v-if="multipleSelection[0]"
                >结束时间：{{ multipleSelection[0].planEndTime }}</span
              >
            </div>
            <div class="compare_plan_out2">
              <span class="compare_plan_name" v-if="multipleSelection[1]"
                >计划名称：{{ multipleSelection[1].planName }}</span
              >
              <span class="compare_plan_time" v-if="multipleSelection[1]"
                >结束时间：{{ multipleSelection[1].planEndTime }}</span
              >
            </div>
          </div>
          <div class="compare_class">
            <div class="compare_user1">
              <div class="compare_user1_out">
                <img src="../assets/report/man.png" />
                <div class="compare_user1_info">
                  <div>姓名：{{ userInfo.userName }}</div>

                  <div>学号：{{ userInfo.userNo }}</div>
                  <div>测试用时：{{ useTime1 }}</div>
                </div>
              </div>
              <div class="compare_group">所属组织架构</div>
              <div class="compare_group_detail">
                {{ orgName1 }}
              </div>
            </div>
            <div class="compare_user2">
              <div class="compare_user1_out">
                <img src="../assets/report/man.png" />
                <div class="compare_user1_info">
                  <div>姓名：{{ userInfo.userName }}</div>
                  <div>学号：{{ userInfo.userNo }}</div>
                  <div>测试用时：{{ useTime2 }}</div>
                </div>
              </div>
              <div class="compare_group">所属组织架构</div>
              <div class="compare_group_detail">
                {{ orgName2 }}
              </div>
            </div>
          </div>

          <div class="compare_score">
            <div class="compare_score_inner">
              <div class="compare_score_left" v-if="userData1.length > 0">
                总分：{{ userData1[0].dimensionScore }}
              </div>
              <div class="compare_result" v-if="userData1.length > 0">
                结论：{{ userData1[0].dimensionSymptom }}、{{
                  userData1[0].dimensionImprovement
                }}
              </div>
            </div>
            <div class="compare_score_inner">
              <div class="compare_score_right" v-if="userData2.length > 0">
                总分：{{ userData2[0].dimensionScore }}
              </div>
              <div class="compare_result" v-if="userData2.length > 0">
                结论：{{ userData2[0].dimensionSymptom }}、{{
                  userData2[0].dimensionImprovement
                }}
              </div>
            </div>
          </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 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 class="left">
                    <span class="totol_all">维度：</span
                    >{{ userData1[index].dimensionName }}
                  </div>
                  <div class="right">
                    <span class="totol_all">维度：</span
                    >{{ userData2[index].dimensionName }}
                  </div>
                </div>
                <div class="allScore_out">
                  <div class="left">
                    <span class="totol_all">总分：</span
                    ><span
                      :style="{
                        color:
                          parseFloat(userData1[index].dimensionScore) <
                          parseFloat(userData2[index].dimensionScore)
                            ? 'red'
                            : '',
                      }"
                      >{{ userData1[index].dimensionScore }}</span
                    >
                  </div>
                  <div class="right">
                    <!-- {{userData1[index].dimensionScore>userData2[index].dimensionScore}} -->
                    <span class="totol_all">总分：</span
                    ><span
                      :style="{
                        color:
                          parseFloat(userData1[index].dimensionScore) >
                          parseFloat(userData2[index].dimensionScore)
                            ? 'red'
                            : '',
                      }"
                      >{{ userData2[index].dimensionScore }}</span
                    >
                  </div>
                </div>
                <div class="allScore_out">
                  <div class="left">
                    <span class="totol_all">结论：</span
                    ><span
                      :style="{
                        color:
                          parseFloat(userData1[index].dimensionScore) <
                          parseFloat(userData2[index].dimensionScore)
                            ? 'red'
                            : '',
                      }"
                      >{{ userData1[index].dimensionSymptom }}</span
                    >
                  </div>
                  <div class="right">
                    <span class="totol_all">结论：</span
                    ><span
                      :style="{
                        color:
                          parseFloat(userData1[index].dimensionScore) >
                          parseFloat(userData2[index].dimensionScore)
                            ? 'red'
                            : '',
                      }"
                      >{{ userData2[index].dimensionSymptom }}</span
                    >
                  </div>
                </div>
                <div class="allScore_out">
                  <div class="left">
                    <span class="totol_all">说明：</span
                    ><span
                      :style="{
                        color:
                          parseFloat(userData1[index].dimensionScore) <
                          parseFloat(userData2[index].dimensionScore)
                            ? 'red'
                            : '',
                      }"
                      >{{ userData1[index].dimensionDesc }}</span
                    >
                  </div>
                  <div class="right">
                    <span class="totol_all">说明：</span
                    ><span
                      :style="{
                        color:
                          parseFloat(userData1[index].dimensionScore) >
                          parseFloat(userData2[index].dimensionScore)
                            ? 'red'
                            : '',
                      }"
                      >{{ userData2[index].dimensionDesc }}</span
                    >
                  </div>
                </div>
                <div class="allScore_out">
                  <div class="left">
                    <span class="totol_all">建议：</span
                    >{{ userData1[index].dimensionSuggestion }}
                  </div>
                  <div class="right">
                    <span class="totol_all">建议：</span
                    >{{ 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>
  </div>
</template>
<script>
//引入echarts组件
import * as echarts from "echarts";
import { oSessionStorage } from "../utils/utils";
export default {
  data() {
    return {
      userInfo: {},
      userInfoSession: {},
      dialogVisible: false,
      compareVisible: false,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      tableData: [],
      //选中的数组
      multipleSelection: [],
      echarts_ld: "",
      echarts_zhu: "",
      option_w: {},
      option_z: {},
      optionTT: {},

      userData1: {},
      orgName1: "",
      orgName2: "",
      //用户1的测试用时
      useTime1: "",
      //用户2的测试用时
      useTime2: "",
      echarts_des_list1: [],
      echarts_data_list1: [],
      echarts_name_list1: [],
      echarts_zhuname_list: [],
      userData2: {},
      echarts_des_list2: [],
      echarts_data_list2: [],
      echarts_name_list2: [],
    };
  },
  mounted() {
    this.echarts_ld = this.$refs.echarts_ld;
    this.echarts_zhu = this.$refs.echarts_zhu;
    this.option_w = {
      title: {
        // text: 'Basic Radar Chart'
      },
      legend: {
        // data: ['Allocated Budget', 'Actual Spending']
      },
      radar: {
        // shape: "square", //设置雷达图形状，值有circle、square,默认为方形
        // splitNumber: 3, // 雷达图圈数设置
        // shape: 'circle',
        indicator: this.echarts_name_list1,
        name: {
          //修改indicator文字的颜色
          textStyle: {
            // color: "#999999",
          },
        },
        // 设置雷达图中间射线的颜色

        splitArea: {
          //设置图表颜色，show的值为true
          show: true,
          // areaStyle: {
          //   // color:"#c1ddf8", //一般设置方式
          //   //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
          //   //a ,b,c,d值可为0，1 a:1表示arr中的颜色右到左；c:1 arr中的颜色左到右
          //   //b:1表示arr中的颜色下到上；d:1表示arr中的颜色上到下
          //   color: new echarts.graphic.LinearGradient(
          //     0,
          //     0,
          //     0,
          //     0,
          //     [
          //       { offset: 1, color: "#F7E1DE" }, // 0% 处的颜色
          //       { offset: 0, color: "#FF1E00" }, // 100% 处的颜色
          //     ],
          //     false
          //   ),
          // },
        },
        // splitArea: {
        //   areaStyle: {
        //     color: {
        //       type: "radial", // linear 线性渐变  radial径向渐变
        //       x: 0.4, // 0.5为正中心，如果小于渐变中心靠左
        //       y: 0.5, // 0.5为正中心，如果小于渐变中心靠上
        //       r: 1,
        //       colorStops: [
        //         {
        //           offset: 0,
        //           color: "#f16e6e", // 0% 处的颜色rgba(247, 215, 211, 1)
        //         },
        //         {
        //           offset: 1,
        //           color: "rgba(247, 225, 222, 1)", // 100% 处的颜色rgba(247, 225, 222, 1)
        //         },
        //       ],
        //     },
        //   },
        // },

        //网格颜色设置
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            // color: "#FFBA92",
          },
        },
      },
      series: [
        {
          // name: "Budget vs spending",
          type: "radar",
          // symbolSize: 6,
          data: [
            {
              value: this.echarts_data_list1,
              //折线的颜色
              lineStyle: {
                normal: {
                  color: "#006FFF",
                },
              },
              //折线拐点颜色
              itemStyle: {
                normal: {
                  color: "#006FFF",
                  // borderColor:'#000000',//拐点边框颜色
                  borderWidth: 3, //拐点边框大小
                },
                // emphasis: {
                //     color: '#000000'//hover拐点颜色定义
                // }
              },
              //阴影面积
              areaStyle: {
                color: "rgba(0,111,255,0.3)",
              },
            },
            {
              value: this.echarts_data_list2,
              lineStyle: {
                normal: {
                  color: "#FF1E00",
                },
              },
              itemStyle: {
                normal: {
                  color: "#FF1E00",
                  // borderColor:'#000000',//拐点边框颜色
                  borderWidth: 3, //拐点边框大小
                },
                // emphasis: {
                //     color: '#000000'//hover拐点颜色定义
                // }
              },
              areaStyle: {
                color: "rgba(255,30,0,0.3)",
              },
            },
          ],
        },
      ],
    };

    this.option_z = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisLabel: {
          interval: 0,
          // rotate:'45'
        },
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          itemStyle: {
            color: "#B2D4FF",
          },
        },
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          itemStyle: {
            color: "#FFBBB2",
          },
        },
      ],
    };
  },
  methods: {
    open(val) {
      //从缓存获取当前登录的用户信息
      this.userInfoSession = JSON.parse(oSessionStorage.getItem("userInfo"));
      this.userInfo = val;
      this.dialogVisible = true;
      this.searchTarget();
    },
    //对比方法
    isCompare() {
      //判断是否是选了两个用户
      if (this.multipleSelection.length != 2) {
        this.$message({
          message: "请选两个进行对比",
          type: "warning",
        });
        return;
      }

      //查看是否两个是否都授权了
      // enable
      //先判断是否是运维管理员
      if (this.userInfoSession.roleType != 5) {
        if (
          !(
            this.multipleSelection[0].enable == "1" &&
            this.multipleSelection[1].enable == "1"
          )
        ) {
          this.$message({
            message: "请选择已授权的测试计划",
            type: "warning",
          });
          return;
        }
      }

      this.compareVisible = true;
      this.queryDetail1(this.multipleSelection[0].id);
      this.queryDetail2(this.multipleSelection[1].id);
      //开始调用对比的方法
      //打开对比弹出框、、显示对比结果
      //调用查询各个报告的方法
    },
    queryDetail1(id) {
      let url = `/userRecordScore/findAllByPlanIdAndUserNo?planId=${id}&userNo=${this.userInfo.userNo}`;
      this.$http.get(url, {}, (res) => {
        if (res && res.code == 200) {
          this.useTime1 = res.data.usedTime;
          this.orgName1 = res.data.user.orgName;
          let a = res.data.report;

          this.userData1 = a;
          if (this.userData2.length == 0) {
            this.formatterDataW(a, false, 1);
          } else {
            this.formatterDataW(a, true, 1);
          }
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    queryDetail2(id) {
      let url = `/userRecordScore/findAllByPlanIdAndUserNo?planId=${id}&userNo=${this.userInfo.userNo}`;
      this.$http.get(url, {}, (res) => {
        if (res && res.code == 200) {
          this.useTime2 = res.data.usedTime;
          this.orgName2 = res.data.user.orgName;
          let a = res.data.report.filter((item) => {
            return item.isIcon == "1";
          });

          this.userData2 = a;
          if (this.userData1.length == 0) {
            this.formatterDataW(a, false, 2);
          } else {
            this.formatterDataW(a, true, 2);
          }
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    formatterDataW(a, flag, index) {
      let scoreList = [];
      let scoreDes = [];
      let nameList = [];
      let zhuNameList = [];
      for (let i = 0; i < a.length; i++) {
        if (a[i].dimensionName != "总分") {
          scoreList.push(parseInt(a[i].dimensionScore));
          scoreDes.push(a[i].dimensionAnalysis);

          let ob = { name: a[i].dimensionName, max: 100 };
          nameList.push(ob);
          zhuNameList.push(a[i].dimensionName);
        }
        //
      }
      this.echarts_zhuname_list = zhuNameList;
      if (index == "1") {
        this.echarts_des_list1 = scoreDes;
        this.echarts_data_list1 = scoreList;
        this.echarts_name_list1 = nameList;
      } else {
        this.echarts_des_list2 = scoreDes;
        this.echarts_data_list2 = scoreList;
        this.echarts_name_list2 = nameList;
      }

      if (flag) {
        const myChart = echarts.init(this.echarts_ld);
        this.option_w.series[0].data[0].value = this.echarts_data_list1;
        this.option_w.series[0].data[1].value = this.echarts_data_list2;
        this.option_w.radar.indicator = this.echarts_name_list1; //name
        myChart.setOption(this.option_w);

        const myChart1 = echarts.init(this.echarts_zhu);
        this.option_z.series[0].data = this.echarts_data_list1;
        this.option_z.series[1].data = this.echarts_data_list2;
        this.option_z.xAxis.data = this.echarts_zhuname_list; //name

        myChart1.setOption(this.option_z);
      }
    },
    //选择用户进行对比的方法
    handleSelectionChange(val) {
      //判断里边是否有未完成的
      // let hasNo =false
      // if (val.length > 0) {
      //   for (let i = 0; i < val.length; i++) {
      //     //
      //     if(val[i].){

      //     }
      //   }
      // }
      if (val.length > 2) {
        this.$message({
          type: "warning",
          message: "请选两个进行对比",
        });
        return;
      }
      this.multipleSelection = val;
    },
    searchTarget() {
      this.pageNum = 1;
      this.searchList();
    },
    //进来调用已选列表接口
    searchList() {
      let url = `/plan/findCompletePlanByUser?pageSize=${this.pageSize}&pageNum=${this.pageNum}&userNo=${this.userInfo.userNo}`;
      this.$http.get(url, {}, (res) => {
        if (res && res.code == 200) {
          this.tableData = res.data.content;
          this.total = res.data.totalElements;
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    //每页多少条
    handleSizeChange(val) {
      //将首页重置为1时---且总条数变化
      //设置为当前总条数
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.searchList();
    },
    formaCom(val) {
      if (val.isComplete == "0") {
        return "未完成";
      } else {
        return "已完成";
      }
    },
  },
};
</script>
<style lang="less" scoped>
.out/deep/ .el-dialog {
  border-radius: 20px !important;
  // background-color: #f7f7f7 !important;
}
.pag_class /deep/ .el-input__inner {
  width: 100% !important;
}

.compare_class {
  display: flex;
  flex-direction: row;
  .compare_user1 {
    flex: 1;
    margin-right: 10px;
    background-color: #f1f7ff;
    padding: 20px 20px;
    border-radius: 20px;
    .compare_user1_out {
      display: flex;
      align-items: center;
      img {
        width: 80px;
      }
      .compare_user1_info {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 80px;
        margin-left: 30px;
        font-size: 16px;
      }
    }
    .compare_group {
      font-size: 16px;
      margin-top: 10px;
      color: #999999;
    }
    .compare_group_detail {
      margin-top: 10px;
      font-size: 16px;
      color: #006fff;
    }
  }
  .compare_user2 {
    margin-left: 10px;
    flex: 1;
    background-color: #fff4f2;
    border-radius: 20px;
    padding: 20px 20px;
    .compare_user1_out {
      display: flex;
      align-items: center;
      img {
        width: 80px;
      }
      .compare_user1_info {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 80px;
        margin-left: 30px;
        font-size: 16px;
      }
    }
    .compare_group {
      font-size: 16px;
      margin-top: 10px;
      color: #999999;
    }
    .compare_group_detail {
      margin-top: 10px;
      font-size: 16px;
      color: #ff3014;
    }
  }
}

.compare_plan {
  margin-top: 40px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  .compare_plan_out1 {
    flex: 1;
    margin-right: 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .compare_plan_time {
      margin-top: 6px;
      color: #999999;
    }
  }

  .compare_plan_out2 {
    margin-left: 10px;
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .compare_plan_time {
      margin-top: 6px;
      color: #999999;
    }
  }
}
.compare_score {
  display: flex;
  flex-direction: row;
  .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: 16px;
      letter-spacing: 3px;
    }
    .compare_score_right {
      color: #ff3014;
      margin-top: 20px;
      margin-bottom: 10px;
      font-size: 16px;
      letter-spacing: 3px;
    }
    .compare_result {
      font-size: 16px;
      letter-spacing: 3px;
    }
    .compare_result_new {
      font-size: 20px;
      letter-spacing: 3px;
      margin-top: 10px;
      .title {
        color: #006fff;
      }
    }
  }
}
.cpmpare_all {
  // height: 100px;
  display: flex;
  flex-direction: column;
  .dimensionality_out {
    display: flex;
    width: 100%;

    .left {
      margin-right: 10px;
      flex: 1;

      margin-top: 20px;
      margin-bottom: 4px;
      font-size: 16px;
      letter-spacing: 3px;
      background-color: #f1f7ff;
      .totol_all {
        color: #006fff;
      }
    }
    .right {
      margin-left: 10px;
      flex: 1;
      margin-top: 20px;
      margin-bottom: 4px;
      font-size: 16px;
      letter-spacing: 3px;
      background-color: #f1f7ff;
      .totol_all {
        color: #006fff;
      }
    }
  }
  .allScore_out {
    display: flex;
    width: 100%;

    .left {
      margin-right: 10px;
      flex: 1;

      // margin-top: 10px;
      margin-bottom: 4px;
      font-size: 16px;
      letter-spacing: 3px;
      // background-color: #f1f7ff;
      .totol_all {
        color: #006fff;
      }
    }
    .right {
      margin-left: 10px;
      flex: 1;
      flex: 1;

      // margin-top: 10px;
      margin-bottom: 4px;
      font-size: 16px;
      letter-spacing: 3px;
      // background-color: #f1f7ff;
      .totol_all {
        color: #006fff;
      }
    }
  }
}
</style>