cpdm_manage/src/components/ComparePlanUser.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.planName }}的用户列表
        </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="userName"
              label="用户姓名"
              align="center"
              width=""
            >
            </el-table-column>
            <el-table-column prop="userNo" label="工号" align="center" width="">
            </el-table-column>

            <el-table-column
              prop="isComplete"
              label="完成状态"
              :formatter="formaCom"
              align="center"
              width=""
            >
              <template slot-scope="scope">
                <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.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>
        </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="82%"
        style="border-radius: 40px"
      >
        <!-- <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>
          <div class="compare_plan">
            <div class="compare_plan_out1">
              <span class="compare_plan_name" v-if="userData1.length > 0"
                >计划名称：{{ userData1[0].planName }}</span
              >
              <span class="compare_plan_time" v-if="multipleSelection[0]"
                >结束时间：{{ planEndTime }}</span
              >
            </div>
            <div class="compare_plan_out2">
              <span class="compare_plan_name" v-if="userData2.length > 0"
                >计划名称：{{ userData2[0].planName }}</span
              >
              <span class="compare_plan_time" v-if="multipleSelection[1]"
                >结束时间：{{ planEndTime }}</span
              >
            </div>
          </div>
          <div class="compare_class">
            <div class="compare_user1" style="position: relative">
              <div class="compare_user1_out">
                <img v-show="userGender1 == '1'" src="../assets/report/man1.png" />
                <img v-show="userGender1 == '0'" src="../assets/report/woman1.png" />
                <div class="compare_user1_info">
                  <div v-if="multipleSelection.length == 2">
                    姓名：{{ multipleSelection[0].userName }}
                  </div>
                  <div v-if="multipleSelection.length == 2">
                    工号：{{ multipleSelection[0].userNo }}
                  </div>
                  <div v-if="multipleSelection.length == 2">测试用时：{{ useTime1 }}</div>
                </div>
              </div>
              <div class="compare_group">所属组织</div>
              <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">
                <img v-show="userGender2 == '1'" src="../assets/report/man1.png" />
                <img v-show="userGender2 == '0'" src="../assets/report/woman1.png" />
                <div class="compare_user1_info">
                  <div v-if="multipleSelection.length == 2">
                    姓名：{{ multipleSelection[1].userName }}
                  </div>
                  <div v-if="multipleSelection.length == 2">
                    工号：{{ multipleSelection[1].userNo }}
                  </div>
                  <div v-if="multipleSelection.length == 2">测试用时：{{ 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; 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 != '总分'" style="margin-bottom: 40px">
                <div class="dimensionality_out" style="margin-bottom: 20px">
                  <div class="left">
                    <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">
                    <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" style="margin-bottom: 20px">
                  <div class="left">
                    <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) <
                          parseFloat(userData2[index].dimensionScore)
                            ? 'red'
                            : '',
                      }"
                      >{{ userData1[index].dimensionScore }}</span
                    >
                  </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="{
                        color:
                          parseFloat(userData1[index].dimensionScore) >
                          parseFloat(userData2[index].dimensionScore)
                            ? 'red'
                            : '',
                      }"
                      >{{ userData2[index].dimensionScore }}</span
                    >
                  </div>
                </div>
                <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="{
                        color:
                          parseFloat(userData1[index].dimensionScore) <
                          parseFloat(userData2[index].dimensionScore)
                            ? 'red'
                            : '',
                      }"
                      >{{ userData1[index].dimensionSymptom }}</span
                    >
                  </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="{
                        color:
                          parseFloat(userData1[index].dimensionScore) >
                          parseFloat(userData2[index].dimensionScore)
                            ? 'red'
                            : '',
                      }"
                      >{{ userData2[index].dimensionSymptom }}</span
                    >
                  </div>
                </div>
                <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) <
                          parseFloat(userData2[index].dimensionScore)
                            ? 'red'
                            : '',
                      }"
                      >{{ userData1[index].dimensionDesc }}</span
                    >
                  </div>
                  <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) >
                          parseFloat(userData2[index].dimensionScore)
                            ? 'red'
                            : '',
                      }"
                      >{{ userData2[index].dimensionDesc }}</span
                    >
                  </div>
                </div>
                <div class="allScore_out">
                  <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"
                    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>
      </el-dialog>
    </div>
  </div>
</template>
<script>
//引入echarts组件
import * as echarts from "echarts";

export default {
  data() {
    return {
      userInfo: {},
      dialogVisible: false,
      compareVisible: false,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      tableData: [],
      //选中的数组
      multipleSelection: [],
      echarts_ld: "",
      echarts_zhu: "",
      option_w: {},
      option_z: {},
      optionTT: {},

      userData1: {},
      userGender1: "1",
      userGender2: "1",
      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: [],
      planEndTime: "",
    };
  },
  mounted() {
    this.echarts_ld = this.$refs.echarts_ld;
    this.echarts_zhu = this.$refs.echarts_zhu;
    this.option_w = {
      title: {
        text: "雷达图维度对比",
        left: "center",
        textStyle: {
          fontSize: 16,
        },
      },
      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 = {
      title: {
        text: "",
        left: "center",

        textStyle: {
          fontSize: 16,
        },
      },
      legend: {
        data: [],
      },
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisLabel: {
          interval: 0,
        },
      },
      yAxis: {
        name: "分数",
        type: "value",
      },
      series: [
        {
          name: "",
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",

          itemStyle: {
            // 设置柱状图的颜色
            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);
            },
          },
        },
        {
          name: "",
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          itemStyle: {
            // 设置柱状图的颜色
            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);
            },
          },
        },
      ],
    };
  },
  methods: {
    open(val) {
      this.planEndTime = val.planEndTime;
      this.userInfo = val;
      this.dialogVisible = true;
      this.searchTarget();
    },

    //对比方法
    isCompare() {
      console.log(this.multipleSelection);
      //判断是否是选了两个用户

      if (this.multipleSelection.length != 2) {
        this.$message({
          message: "请选两个进行对比",
          type: "warning",
        });
        return;
      }
      if (this.multipleSelection.length == 2) {
        let has = false;
        for (let i = 0; i < this.multipleSelection.length; i++) {
          if (this.multipleSelection[i].isComplete == "0") {
            has = true;
            break;
          }
          //
        }

        if (has) {
          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=${this.userInfo.id}&userNo=${this.multipleSelection[0].userNo}`;
      this.$http.get(url, {}, (res) => {
        if (res && res.code == 200) {
          this.useTime1 = res.data.usedTime;
          this.orgName1 = res.data.user.orgName;
          this.userGender1 = res.data.user.gender;
          let a = res.data.report;

          let listTmp2 = [];
          listTmp2 = a.filter((item) => {
            return (
              item.dimensionName == "总分" ||
              item.dimensionName == "躯体化" ||
              item.dimensionName == "焦虑" ||
              item.dimensionName == "抑郁"
            );
          });

          let listTmp3 = [];
          listTmp3 = a.filter((item) => {
            return !(
              item.dimensionName == "躯体化" ||
              item.dimensionName == "焦虑" ||
              item.dimensionName == "抑郁" ||
              item.dimensionName == "总分"
            );
          });
          this.userData1 = listTmp2.concat(listTmp3);

          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=${this.userInfo.id}&userNo=${this.multipleSelection[1].userNo}`;
      this.$http.get(url, {}, (res) => {
        if (res && res.code == 200) {
          this.useTime2 = res.data.usedTime;
          this.orgName2 = res.data.user.orgName;
          this.userGender2 = res.data.user.gender;
          let a = res.data.report.filter((item) => {
            return item.isIcon == "1";
          });

          //将设置--四个维度单独取出来

          // let listTmp1 =[]
          // listTmp1 = a.filter((item) => {
          //   return item.dimensionName != "总分";
          // });

          let listTmp2 = [];
          listTmp2 = a.filter((item) => {
            return (
              item.dimensionName == "总分" ||
              item.dimensionName == "躯体化" ||
              item.dimensionName == "焦虑" ||
              item.dimensionName == "抑郁"
            );
          });

          let listTmp3 = [];
          listTmp3 = a.filter((item) => {
            return !(
              item.dimensionName == "躯体化" ||
              item.dimensionName == "焦虑" ||
              item.dimensionName == "抑郁" ||
              item.dimensionName == "总分"
            );
          });
          // this.reportDataAll=listTmp2.concat(listTmp3)

          this.userData2 = listTmp2.concat(listTmp3);
          // 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].name = this.multipleSelection[0].userName;
        this.option_z.series[0].data = this.echarts_data_list1;
        this.option_z.series[1].name = this.multipleSelection[1].userName;
        this.option_z.series[1].data = this.echarts_data_list2;
        this.option_z.xAxis.data = this.echarts_zhuname_list; //name

        //multipleSelection[1].userName
        this.option_z.legend.data = [
          this.multipleSelection[0].userName,
          this.multipleSelection[1].userName,
        ];

        myChart1.setOption(this.option_z);
      }
    },
    //选择用户进行对比的方法
    handleSelectionChange(val) {
      // isComplete
      this.multipleSelection = val;
      //判断里边是否有未完成的
      let hasNo = false;
      if (val.length > 0) {
        for (let i = 0; i < val.length; i++) {
          //
          if (val[i].isComplete == "0") {
            hasNo = true;
          }
        }
      }
      if (hasNo) {
        this.$message({
          type: "warning",
          message: "选项中不能含有未完成的",
        });
        return;
      }
      if (val.length > 2) {
        this.$message({
          type: "warning",
          message: "请选两个进行对比",
        });
        return;
      }
    },
    searchTarget() {
      this.pageNum = 1;
      this.searchList();
    },
    //进来调用已选列表接口
    searchList() {
      let url = `/planUser/findUserProgressByPage?pageSize=${this.pageSize}&pageNum=${this.pageNum}&planId=${this.userInfo.id}`;
      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时---且总条数变化
      //设置为当前总条数
      this.pageNum = 1;
      this.pageSize = val;
      this.searchList();
    },
    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: #dcebff;
    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: #ffdfdb;
    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 {
      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;
    }
  }
}
.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;
        }
      }
    }
  }
}
.cpmpare_all {
  // height: 100px;
  display: flex;
  flex-direction: column;
  .dimensionality_out {
    display: flex;
    width: 100%;

    .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;
      .totol_all {
        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;
      .totol_all {
        color: #000000;
        font-weight: 700;
        margin-left: 10px;
      }
    }
  }
  .allScore_out {
    display: flex;
    width: 100%;

    .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: #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: #000000;
        font-weight: 700;
        margin-left: 10px;
      }
    }
  }
}
.img_vs {
  width: 140px;
  position: absolute;
  right: 0;
  top: -50px;
  margin-right: -78px;
}
</style>