cpdm_manage/src/components/Report1.vue

<template>
  <div class="out">
    <!---lxh-修改密码-->
    <div class="dig_update">
      <el-dialog
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="80%"
        style="border-radius: 40px"
      >
        <div slot="title">
          <div label-width="150px" class="demo-ruleForm">
            <p v-if="isView" class="dig_title">
              {{ proDataLin.userName }}的{{ proDataLin.planName }}计划
            </p>
            <p v-if="!isView" class="dig_title">编辑计划</p>
            <div slot=""></div>
            <div slot="footer"></div>

            <div class="table-content">
              <el-table
                :data="tableData"
                :row-style="{ height: '0px' }"
                :cell-style="{ padding: '5px' }"
                :header-cell-style="{ background: '#F8F8F8', color: '#606266' }"
              >
                <el-table-column
                  show-overflow-tooltip
                  prop="planName"
                  label="计划名称"
                  align="center"
                  width=""
                >
                </el-table-column>

                <el-table-column
                  show-overflow-tooltip
                  prop="planEndTime"
                  label="计划结束时间"
                  align="center"
                  width=""
                >
                </el-table-column>
      
             
                <el-table-column label="操作" width="350px" align="center">
                  <template slot-scope="scope">
                    <div
                      class="detail_button_out"
                      v-if="scope.row.hasOwnProperty('contentEntities')"
                    >
                      <div v-for="item in scope.row.contentEntities" :key="item.id">
                        <div
                          v-if="item.isDisplayed == 1"
                          style="
                            color: #00bf78;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            cursor: pointer;
                          "
                          @click="radioClick(item, scope.row)"
                        >
                          <img
                            style="width: 15px; margin-left: 10px"
                            src="../assets/img/table/search.png"
                          />
                          {{ item.name }}
                        </div>
                      </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> -->

            <div class="dig_button"></div>
          </div>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        :visible.sync="topicVisible"
        :close-on-click-modal="false"
        width="40%"
        style="border-radius: 40px"
      >
        <div slot="title">
          <div label-width="150px" class="demo-ruleForm">
            <p v-if="isView" class="dig_title">选择题目</p>
            <div slot=""></div>
            <div slot="footer"></div>

            <div
              class="table-content"
              style="display: flex; justify-content: space-around"
            >
              <el-button
                type="success"
                style="border-radius: 20px"
                v-for="item in topPicList"
                :key="item.name"
                @click="radioClick(item)"
              >
                {{ item.name }}
              </el-button>
            </div>

            <div class="dig_button"></div>
          </div>
        </div>
      </el-dialog>
    </div>
    <div class="dig_update">
      <el-dialog
        :visible.sync="userVisible"
        append-to-body
        width="82%"
        style="border-radius: 40px"
      >
        <div slot="title" style="border-radius: 40px">
          <p style="text-align: center; font-weight: 700; font-size: 20px">
            {{ proDataLin.userName }}{{ planObj.planName }}的报告
          </p>
          <div class="kply">
            <div class="kply_inner">
              <div style="padding: 20px 40px">
                <div>
                  <div class="report_info_out">
                    <img v-show="gender=='1'" src="../assets/report/man1.png" />
                    <img v-show="gender=='0'" src="../assets/report/woman1.png" />
                    <div class="report_info_user">
                      <span class="info">姓名:&nbsp;&nbsp;{{ proDataLin.userName }}</span>
                     
                      <span class="info" v-show="proDataLin.planType=='0'">学号:&nbsp;&nbsp;{{ proDataLin.userNo }}</span>
                      <span class="info" v-show="proDataLin.planType=='1'">编号:&nbsp;&nbsp;{{ proDataLin.userNo }}</span>
                      <span class="info">测试用时:&nbsp;&nbsp;{{ useTime }}</span>
                      <span class="info"
                        >所属组织结构:&nbsp;&nbsp;<span style="">{{
                          orgName
                        }}</span></span
                      >
                    </div>
                  </div>

                  <div class="report_totol_score">
                    <div class="report_bei">
                      <img height="200px !impotent" src="../assets/report/bei.png" />
                      <div class="score" v-if="reportData.length > 0">
                        {{ reportData[0].dimensionScore }}
                      </div>
                    </div>
                    <div class="totol_result_des" v-if="reportData.length > 0">
                      <div
                        v-show="currentFlag == 'SHAPE_RANDOM'"
                        class="progress_out"
                        :style="{
                          width: currentFlag != 'SHAPE_RANDOM' ? '100%' : '50%',
                        }"
                        style="display: flex; align-items: center"
                        v-for="(item, index) in echarts_name_list"
                        :key="index"
                      >
                        <span
                          class="progress_out_name"
                          style="width: 200px; font-size: 16px; font-weight: 700"
                        >
                          {{ item.name }}
                        </span>

                        <el-progress
                          :percentage="echarts_data_list[index]"
                          style="width: 100%"
                          :stroke-width="18"
                          :show-text="false"
                          :color="colorPro"
                        />
                        <span class="progress_out_score">
                          <span
                            style="color: #ff1e00; font-size: 14px; font-weight: 700"
                            >{{ echarts_data_list[index] }}</span
                          ><span style="color: #000000; font-size: 12px; opacity: 0.4"
                            >/100</span
                          ></span
                        >
                      </div>

                      结论：{{ reportData[0].dimensionSymptom }}，{{
                        reportData[0].dimensionImprovement
                      }}
                    </div>
                  </div>
                  <div class="out_p" v-show="currentFlag != 'SHAPE_RANDOM'">
                    <div
                      v-show="currentFlag != 'SHAPE_RANDOM'"
                      class="echrts_sty"
                      ref="echarts_ld"
                    ></div>
                    <div class="report_echarts_out">
                      <div
                        style="
                          display: flex;
                          flex-direction: row;

                          width: 100%;
                          flex-wrap: wrap;
                          padding-top: 40px;
                          padding-bottom: 40px;
                        "
                      >
                        <div
                          class="progress_out"
                          :style="{
                            width: currentFlag != 'SHAPE_RANDOM' ? '100%' : '50%',
                          }"
                          v-for="(item, index) in echarts_name_list"
                          :key="index"
                        >
                          <span class="progress_out_name" style="width: 150px">
                            {{ item.name }}
                          </span>

                          <el-progress
                            :percentage="echarts_data_list[index]"
                            style="width: 100%"
                            :stroke-width="18"
                            :show-text="false"
                            :color="colorPro"
                          />
                          <span class="progress_out_score"
                            >{{ echarts_data_list[index]
                            }}<span style="color: #000000; font-size: 12px; opacity: 0.4"
                              >/100</span
                            ></span
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- **********************************开始1 -->
                  <div
                    v-show="currentFlag != 'SHAPE_RANDOM'"
                    v-for="(item, index) in reportDataAll"
                    :key="index"
                    style="padding-top: 20px"
                  >
                    <div class="des_zhishu">
                      {{ item.dimensionName }}
                    </div>
                    <div class="report_des_out">
                      <div class="score">
                        <div class="score_lin">
                          <img
                            src="../assets/img/report/score.png"
                            style="width: 20px; height: 20px"
                            alt=""
                          />
                          <span class="score_tt">分数：</span>
                        </div>

                        <span
                          v-if="
                            item.dimensionSymptom == '重度' ||
                            item.dimensionSymptom == '高风险'
                          "
                          style="color: red"
                        >
                          {{ item.dimensionScore }}</span
                        >
                        <span
                          v-if="
                            item.dimensionSymptom == '无症状或轻度' ||
                            item.dimensionSymptom == '无或轻风险'
                          "
                          style="color: #00bf78"
                        >
                          {{ item.dimensionScore }}</span
                        >
                        <span
                          v-if="
                            item.dimensionSymptom == '中度' ||
                            item.dimensionSymptom == '中风险'
                          "
                          style="color: #f0a900"
                        >
                          {{ item.dimensionScore }}</span
                        >
                        <span
                          style="
                            font-size: 16px;
                            color: rgb(153, 153, 153);
                            letter-spacing: 0px;
                          "
                          >&nbsp;&nbsp;（满分100）</span
                        >
                      </div>

                      <div class="score">
                        <span class="score_tt">
                          <div class="score_lin">
                            <img
                              src="../assets/img/report/result.png"
                              style="width: 20px; height: 20px"
                              alt=""
                            />
                            <span class="score_tt">结论：</span>
                          </div>
                        </span>
                        <span
                          v-if="
                            item.dimensionSymptom == '重度' ||
                            item.dimensionSymptom == '高风险'
                          "
                          style="color: red"
                        >
                          {{ item.dimensionSymptom }}</span
                        >
                        <span
                          v-if="
                            item.dimensionSymptom == '无症状或轻度' ||
                            item.dimensionSymptom == '无或轻风险'
                          "
                          style="color: #00bf78"
                        >
                          {{ item.dimensionSymptom }}</span
                        >
                        <span
                          v-if="
                            item.dimensionSymptom == '中度' ||
                            item.dimensionSymptom == '中风险'
                          "
                          style="color: #f0a900"
                        >
                          {{ item.dimensionSymptom }}</span
                        >
                      </div>
                      <div class="scoreAsy">
                        <span class="scoreAsyTitle">
                          <div class="score_lin">
                            <img
                              src="../assets/img/report/asy.png"
                              style="width: 20px; height: 20px"
                              alt=""
                            />
                            <span class="score_tt">分析：</span>
                          </div> </span
                        ><span class="scoreAsyDes">{{ item.dimensionImprovement }}</span>
                      </div>
                      <!-- <div class="des">{{ item.dimensionImprovement }}</div> -->
                      <div class="scoreAsy">
                        <span class="scoreAsyTitle">
                          <div class="score_lin">
                            <img
                              src="../assets/img/report/sm.png"
                              style="width: 20px; height: 20px"
                              alt=""
                            />
                            <span class="score_tt">说明：</span>
                          </div> </span
                        ><span class="scoreAsyDes">{{ item.dimensionDesc }}</span>
                      </div>
                      <div class="scoreAsy">
                        <span class="scoreAsyTitle">
                          <div class="score_lin">
                            <img
                              src="../assets/img/report/sug.png"
                              style="width: 20px; height: 20px"
                              alt=""
                            />
                            <span class="score_tt">建议：</span>
                          </div> </span
                        ><span class="scoreAsyDes">{{ item.dimensionSuggestion }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
// import { oSessionStorage } from "../../utils/utils";
import { oSessionStorage } from "../utils/utils";
import * as echarts from "echarts";
import md5 from "md5";
export default {
  data() {
    return {
      topicVisible: false,
      //接收所属组织结构的词语
      orgName: "",
      userVisible: false,
      //编辑返回的值
      userDetailData: {},
      //组织架构名字
      groupName: "",

      disableFlag: false,
      phoneFlag: false,
      flag: 3,
      dialogVisible: false,
      //渠道列表

      isView: true,
      //当前计划ID
      planId: "",
      userInfo: {},

      proDataLin: [],

      total: 0,
      pageSize: 10,
      pageNum: 1,
      tableData: [],

      userTotal: 0,
      userpageSize: 10,
      userPageNum: 1,
      userTableData: [],
      multipleSelection: [],

      //获取报告总数据
      reportData: [],
      //获取不过滤的数据
      reportDataAll: [],
      echarts_des_list: ["", "", "", "", "", ""],
      echarts_data_list: [10, 20, 30, 40, 0, 0],
      echarts_name_list: [
        { name: "阳光指数", max: 100 },
        { name: "情绪稳定指数", max: 100 },
        { name: "社交能力", max: 100 },
        { name: "自律能力", max: 100 },
        { name: "爱情观", max: 100 },
        { name: "人生观", max: 100 },
      ],
      option: {},
      echarts_ld: "",
      colorPro: "linear-gradient(to right,#FF4E00 ,#ffffff)",
      //该用户的需要做的题目的列表
      topPicList: [],
      radio1: "",
      currentFlag: "",
      useTime: "",
      //当前用户选择的测试
      planObj: "",
      gender:'1'
    };
  },
  mounted() {
    this.echarts_ld = this.$refs.echarts_ld;
    this.userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));
  },
  methods: {
    isRadioFun(val) {},
    forMatCom(val) {
      if (val.isComplete == "0") {
        return "未完成";
      } else {
        return "已完成";
      }
    },
    //查询报告 //根据planId 和用户编号
    queryRport(val) {
      //打印计划信息
      //调用接口--根据计划ID查询计划中题目需要显示的个数及名称
      let url = `/planContent/findAllByPlanId?planId=${val.id}&userNo=${val.userNo}`;

      this.$http.get(url, {}, (res) => {
        //查询题目列表
        let list = [];
        list = res.data;
        //过滤一下list

        this.topPicList = list.filter((item) => {
          return item.isDisplayed == "1";
        });
      });
      //出现选择了几个题目//需要显示--需要出现个弹出框进行选择
      this.topicVisible = true;
    },
    radioClick(val, planObj) {
      this.planObj = planObj;
      if (this.userInfo.roleType != "5") {
        if (planObj.enable == "0") {
          this.$message({
            type: "error",
            message: "暂未授权",
          });
          return;
        }
      }
      //在数组中招待
      let params = {
        planId: val.planId,
        userNo: this.proDataLin.userNo,
        flag: val.flag,
      };
      this.currentFlag = val.flag;
      this.userVisible = true;
      this.reportDetail(params);
    },
    reportDetail(params) {
      let url = `/userRecordScore/findByFlagAndUserNo?planId=${params.planId}&userNo=${params.userNo}&flag=${params.flag}`;
      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          // this.reportData = res.data;
          this.gender=res.data.gender
          let listTmp1 = [];
          listTmp1 = res.data.dimensionScore.filter((item) => {
            return item.dimensionName != "总分";
          });

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

          let listTmp3 = [];
          listTmp3 = listTmp1.filter((item) => {
            return !(
              item.dimensionName == "躯体化" ||
              item.dimensionName == "焦虑" ||
              item.dimensionName == "抑郁"
            );
          });
          this.reportDataAll = listTmp2.concat(listTmp3);
          //将数组中的躯体化---抑郁---焦虑 取出来
          //然后将数组中的不是焦虑--抑郁 --躯体化的 取出来 --进行排序

          // this.reportDataAll = res.data.dimensionScore.filter((item) => {
          //   return item.dimensionName != "总分";
          // });
          //将三个维度提前

          this.useTime = res.data.usedTime;
          this.orgName = res.data.dimensionScore[0].orgName;

          this.reportData = res.data.dimensionScore;
          // let a =[res.data[0].]
          //修改文本

          let scoreList = [];
          let scoreDes = [];
          let nameList = [];
          for (let i = 0; i < this.reportData.length; i++) {
            //
            if (this.reportData[i].dimensionName != "总分") {
              scoreList.push(parseInt(this.reportData[i].dimensionScore));
              scoreDes.push(this.reportData[i].dimensionImprovement);

              let ob = { name: this.reportData[i].dimensionName, max: 100 };
              nameList.push(ob);
            }
          }
          this.echarts_des_list = scoreDes;
          this.echarts_data_list = scoreList;
          this.echarts_name_list = nameList;
          // currentFlag != 'SHAPE_RANDOM'

          if (this.currentFlag != "SHAPE_RANDOM") {
            const myChart = echarts.init(this.echarts_ld);
            // this.option.series[0].data[0] = a;
            this.option.series[0].data[0].value = this.echarts_data_list;
            this.option.radar.indicator = this.echarts_name_list; //name
            //当是认知任务时---不执行
            myChart.setOption(this.option);
          }
        } else {
          ElMessage({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    deleteUser(val) {
      let data = [val.id];
      //调用接口开始添加
      let url = `/planUser/deletePlanUsers`;
      this.$http.post(url, data, (res) => {
        if (res && res.code == 200) {
          this.searchTarget();
          this.tableData = res.data.content;
          this.total = res.data.totalElements;
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    addUser() {
      this.userVisible = true;
      //调用待添加的用户
      this.userSearchTarget();
    },
    isComUser(val, row) {
      //添加已选用户
      let data = [];
      if (val == 1) {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          //
          let obj = {
            orgName: this.multipleSelection[i].orgName,
            orgNo: this.multipleSelection[i].orgNo,
            planId: this.proDataLin.id,
            userName: this.multipleSelection[i].userName,
            userNo: this.multipleSelection[i].userNo,
          };
          data.push(obj);
        }
      } else {
        let obj = {
          orgName: row.orgName,
          orgNo: row.orgNo,
          planId: this.proDataLin.id,
          userName: row.userName,
          userNo: row.userNo,
        };
        data.push(obj);
      }

      //调用接口开始添加
      let url = `/planUser/savePlanUsers`;
      this.$http.post(url, data, (res) => {
        if (res && res.code == 200) {
          this.searchTarget();
          this.userSearchTarget();
          this.tableData = res.data.content;
          this.total = res.data.totalElements;
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    searchTarget() {
      this.pageNum = 1;
      this.searchList();
    },
    userSearchTarget() {
      this.userPageNum = 1;
      this.userSearchList();
    },
    //进来调用已选列表接口
    searchList() {
      let url = `/plan/findPlanById?id=${this.proDataLin.planId}`;
      this.$http.get(url, {}, (res) => {
        if (res && res.code == 200) {
          this.tableData = [];
          this.tableData.push(res.data);
          //   this.total = res.data.totalElements;
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },

    userSearchList() {
      let url = `/plan/planAddUser?pageSize=${this.userpageSize}&pageNum=${this.userPageNum}&planId=${this.proDataLin.id}&orgNo=${this.proDataLin.planOrgNo}`;
      this.$http.get(url, {}, (res) => {
        if (res && res.code == 200) {
          this.userTableData = res.data.content;
          this.userTotalotal = res.data.totalElements;
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    //每页多少条
    handleSizeChange(val) {
      //将首页重置为1时---且总条数变化
      //设置为当前总条数
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.searchList();
    },
    //已选选项
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    resetForm(val) {
      this.cancle();
    },

    formatterTime(val) {
      let date = new Date(val);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = this.formatterMon(month);
      let day = date.getDate();
      day = this.formatterMon(day);
      return year + "-" + month + "-" + day;
    },
    formatterMon(val) {
      if (val < 10) {
        return "0" + val;
      } else {
        return val;
      }
    },
    open(val) {
      // debugger;
      this.proDataLin = val;
      this.dialogVisible = true;
      //查询用户下边的计划
      //获取渠道信息
      // this.option.radar.indicator=[] //name
      this.option = {
        title: {
          // text: 'Basic Radar Chart'
        },
        legend: {
          // data: ['Allocated Budget', 'Actual Spending']
        },
        radar: {
          shape: "square", //设置雷达图形状，值有circle、square,默认为方形
          splitNumber: 3, // 雷达图圈数设置
          // shape: 'circle',
          indicator: this.echarts_name_list,
          name: {
            //修改indicator文字的颜色
            textStyle: {
              // color: "#999999",
            },
          },
        },
        series: [
          {
            type: "radar",
            symbolSize: 6,
            data: [
              {
                value: this.echarts_data_list,
                lineStyle: {
                  normal: {
                    color: "#FF1E00",
                  },
                },
                //折线拐点颜色
                itemStyle: {
                  normal: {
                    color: "#FF1E00",
                    borderWidth: 3, //拐点边框大小
                  },
                  // emphasis: {
                  //     color: '#000000'//hover拐点颜色定义
                  // }
                },
                // name: 'Actual Spending'
                areaStyle: {
                  //阴影区域背景
                  // color: 'rgba(255, 228, 52, 0.6)'
                  color: "#F8B4AB",
                },
              },
            ],
          },
        ],
      };
      this.searchTarget();
    },
    edit(val) {
      this.dialogVisible = true;
      this.isView = false;

      this.userDetailData = val;
      //调用查询详情的接口
    },
    //调用查询详情的接口

    disableFlagStatus() {
      setTimeout(() => {
        this.disableFlag = false;
      }, 1500);
    },

    register() {
      let that = this;
      this.$http.post(`/plan/addOrUpdate`, {}, (res) => {
        this.disableFlagStatus();
        // this.disableFlag = false;
        if (res && res.code == 200) {
          this.dialogVisible = false;

          // this.$toast.success({ message: "成功" });
          //调用父组件的查询方法
          that.$emit("search");
        } else {
          // this.$toast.fail({ message: res.msg });
          this.$message.error(res.msg);
        }
        //清空缓存
        this.cancle();
      });
    },
  },
};
</script>
<style scoped>
.progress_cla >>> .el-progress-bar__inner {
  background-color: #00bf78;
}
</style>
<style>
input[aria-hidden="true"] {
  display: none !important;
}
.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: none;
}
.el-dialog {
  border-radius: 20px !important;
  /* background-color: #f7f7f7 !important; */
}
</style>
<style lang="less" scoped>
// .out /deep/.el-dialog {
//   border-radius: 20px !important;
//   // background-color: #f7f7f7 !important;
// }
// .out/deep/ .el-dialog__header {
//   padding: 0px 0px 0px !important;
// }

.progress_out/deep/ .el-progress-bar__inner {
  background-image: linear-gradient(to right, #ff4e00, #ffffff);
}
.dig_update /deep/.el-cascader {
  position: relative;
  font-size: 14px;
  line-height: 40px;
  width: 100%;
}
// .dig_update /deep/.el-dialog {
//   border-radius: 20px !important;
//   box-shadow: none !important;
//   background: transparent !important;
// }
.demo-ruleForm /deep/ .el-form-item {
  // margin-right: 10px;
  vertical-align: top;
  display: flex !important;
  flex-direction: column;
}
.demo-ruleForm /deep/.el-form-item__label {
  text-align: left;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.demo-ruleForm /deep/.el-input {
  width: 100% !important;
}

.demo-ruleForm /deep/.el-input__inner {
  width: 100% !important;
  background-color: #f7f7f7;
  border: 0px;
}

.dig_button {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.demo-ruleForm {
  background-color: #ffffff;
  // border-radius: 20px;
  // margin-right: -10px;
  margin-top: -10px;
  padding-right: 100px;
  padding-left: 100px;
  border-radius: 20px;
  padding-top: 20px;
  padding-bottom: 40px;
  .dig_title {
    font-size: 20px;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 700;
  }
}

.kply {
  width: 100%;
  margin-top: 20px;
  // background-color: #FAFAFA;

  .kply_inner {
    // padding: 20px 20px;
    left: 0;
    right: 0;
    margin: auto;
    width: 1200px;
    min-height: 500px;

    background-color: #ffffff;
    border-radius: 40px;

    .report_totol_score {
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      // justify-content: space-between;
      align-items: center;

      .report_bei {
        position: relative;
        img {
          height: 150px !important;
          width: 210px !important;
        }
        // background-color: #111111;

        .score {
          width: 100%;
          height: 40px;
          text-align: center;
          position: absolute;
          left: 0;
          right: 0;
          top: -20px;
          bottom: 0;
          margin: auto;
          color: #ffffff;
          font-size: 30px;
        }
      }
      .totol_result_des {
        font-size: 18px;
        margin-left: 30px;
        letter-spacing: 3px;
        line-height: 30px;
      }
    }

    .des_zhishu {
      color: #222222;
      font-size: 20px;
      background-color: #00bf78;
      letter-spacing: 3px;
      color: #ffffff;
      display: inline-flex;
      border-radius: 26px;
      padding: 5px 20px;
    }

    .report_des_out {
      margin-top: 10px;
      // background-color: #f7f7f7;
      border: 4px solid #f2f2f2;
      padding: 20px 40px;
      border-radius: 40px;

      .score {
        // color: #48d68e;
        font-size: 16px;
        line-height: 30px;
        letter-spacing: 2px;
        margin-bottom: 20px;
        display: flex;
        .score_lin {
          display: flex;

          align-items: center;
          .score_tt {
            font-weight: 700;
            margin-left: 5px;
          }
        }
      }

      .des {
        color: #000000;
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 3px;
      }
      .scoreAsy {
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
        .scoreAsyTitle {
          // color: #48d68e;
          font-size: 16px;
          line-height: 30px;
          letter-spacing: 2px;

          .score_lin {
            display: flex;
            align-items: center;
            .score_tt {
              font-weight: 700;
              margin-left: 5px;
            }
          }
        }
        .scoreAsyDes {
          flex: 1;
          font-size: 16px;
          line-height: 30px;
          letter-spacing: 2px;
          color: #555555;
        }
      }
    }

    .start_button_out {
      margin-top: 100px;
      margin-bottom: 40px;
      display: flex;
      flex-direction: row;
      justify-content: center;

      .start_button_self {
        cursor: pointer;
        // width: 100px;
        border-radius: 12px;
        border: 3px solid #48d68e;
        color: #ffffff;
        background-color: #000000;
        margin-right: 20px;
        padding: 8px 60px;
        cursor: pointer;
        display: flex;
        align-items: center;
      }
    }
  }
}

.report_info_out {
  background-color: #f8f8f8;
  border-radius: 40px;
  padding-top: 40px;
  padding-left: 40px;
  padding-bottom: 40px;
  display: flex;
  align-items: center;

  img {
    width: 100px !important;
    height: 100px !important;
  }
  .report_info_user {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    justify-content: space-around;
    color: #000000;
    font-size: 20px;
    .info {
      margin-bottom: 10px;
      font-size: 18px;
      color: #333333;
    }
    // font-weight: 700;
  }
}
.detail_button_out {
  flex: 1;
  display: flex;
  justify-content: space-around;
  .detail_button {
    display: flex;
    align-items: center;
    cursor: pointer;
    letter-spacing: 2px;
    img {
      width: 15px;
      margin-right: 5px;
    }
    span {
      color: #00bf78;
      // font-weight: 600;
    }
  }
}
.out_p {
  display: flex;
  flex: 1;
  width: 100%;
  align-items: center;
  .echrts_sty {
    flex: 6;
    height: 400px;
  }
  .report_echarts_out {
    flex: 4;
    // margin-top: 100px;
    // background-color: #f7f7f7;
    border-radius: 40px;
    display: flex;
    flex-direction: row;
    // justify-content: space-between;

    // height: 200px;
    .progress_out {
      margin-bottom: 40px;
      width: 100%;
      display: flex;
      justify-content: start;
      flex-direction: row;
      // align-items: center;
      // padding-right: 40px;

      .progress_out_name {
        color: #000000;
        font-weight: 600;
        padding-left: 20px;
      }

      .progress_out_score {
        color: #ff1e00;
        font-weight: 600;
        margin-right: 5px;
        margin-left: 15px;
      }
    }
  }
}
</style>