<template>
  <div class="app-container">
    <img src="@/icons/pernoal.jpg" alt style="width: 100%" />
    <div style="font-size: 40px; margin: 80px auto; font-weight: 600" class="title">幼儿体质检测报告书</div>
    <!-- //comprehensive 个人综合分析-->
    <div class="title" style="margin: 40px auto">个人综合分析</div>
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header" style="text-align: center; margin-bottom: 10px">
            <span>学生基本信息</span>
          </div>
          <div
            class="el-table--enable-row-hover el-table--medium"
            style="
              margin-top: 10px;
              padding-bottom: 20px;
              border-bottom: 1px solid #f0f0f0;
              padding-left: 20px;
            "
          >
            <div style="display: flex; justify-content: space-around">
              <div class="cell" style="width: 20%">姓名:{{ sythesizestudent.studentName }}</div>
              <div
                class="cell"
                style="width: 20%"
              >性别:{{ sythesizestudent.studentSex == "MALE" ? "男" : "女" }}</div>
              <div class="cell" style="width: 20%">年龄:{{ sythesizestudent.studentAge }}岁</div>
              <div class="cell" style="width: 20%">民族:{{ sythesizestudent.nationName }}</div>
              <div class="cell" style="width: 20%">ID:{{ sythesizestudent.studentNumber }}</div>
            </div>

            <div style="display: flex; margin-top: 20px">
              <div class="cell" style="width: 60%">所属幼儿园:{{ sythesizestudent.kindergartenName }}</div>
              <div class="cell">班级:{{ sythesizestudent.className }}</div>
            </div>
            <div style="width: 60%; margin-top: 20px">
              <div class="cell">地址:{{ sythesizestudent.kindergartenAddress }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24" class="card-box">
        <el-card style="margin-top: 10px">
          <div
            class="el-table--enable-row-hover el-table--medium"
            style="
              margin: 20px auto;
              height: 110px;
              text-align: center;
              border-bottom: 1px solid #f0f0f0;
              line-height: 40px;
            "
          >
            <div style="text-align: center; font-size: 18px; margin-bottom: 10px">幼儿综合得分</div>
            <div style="display: inline-block">
              <span
                style="
                  position: relative;
                  display: inline-block;
                  text-align: center;
                "
                v-for="(item, index) in sythesizestudent.firstItemCategoryList"
                :key="index"
              >
                <span :style="index == 0 ? '' : 'margin:0 20px'">
                  {{
                  index == 0 ? null : "+"
                  }}
                </span>
                <span>{{ item.categoryName }}( {{ item.categoryScore }})</span>
              </span>
            </div>
            <div style="display: inline-block; position: relative">
              <span style="margin: 0 20px">=</span>
              <span>综合得分({{ sythesizestudent.totalCategoryScore }})</span>
              <span
                style="
                  display: inline-block;
                  position: absolute;
                  top: 20px;
                  width: 80px;
                  left: 29px;
                "
              ></span>
            </div>
          </div>
          <div style="text-align: center; font-size: 18px; margin-top: 20px">获取徽章</div>
          <div
            style="
              width: 70%;
              display: flex;
              text-align: center;
              justify-content: space-around;
              margin: 20px auto 10px;
            "
          >
            <span v-for="(item, index) in sythesizestudent.categoryNameList" :key="index">
              <img style="width: 60px; height: 60px" src="@/icons/金牌2.png" alt />
              <div style="margin-top: 10px; font-size: 14px">{{ item }}</div>
            </span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box" style="margin-top: 10px">
        <el-card>
          <div slot="header" style="text-align: center">
            <span>综合体质分析图</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div
              ref="comprehensivechart"
              id="comprehensivechart"
              style="width: 800px; height: 500px; margin: 0 auto"
            ></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- //shape 身体形态分析-->
    <div class="title" style="margin: 40px auto" v-show="shapeshow">身体形态分析</div>
    <el-row style v-show="shapeshow">
      <el-col :span="12" class="card-box" style>
        <el-card>
          <div slot="header" style="text-align: center">
            <span>{{ shapelist.shapeTitle }}</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="commandstats" style="height: 120px">{{ shapelist.shapeDescription }}</div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header" style="text-align: center">
            <span>身高体重信息</span>
          </div>

          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="commandstats" style="height: 120px">
              <table cellspacing="0" style="width: 100%; height: 120px">
                <tbody>
                  <tr>
                    <td class="el-table__cell is-leaf" style="text-align: center">
                      <div class="cell">
                        姓名:
                        {{ shapelist.studentName }}
                      </div>
                    </td>
                    <td class="el-table__cell is-leaf" style="text-align: center">
                      <div class="cell">
                        {{
                        shapelist.heightName ? shapelist.heightName : "身高"
                        }}: {{ shapelist.heightScore
                        }}{{ shapelist.heightMeasureUnit }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="el-table__cell is-leaf" style="text-align: center">
                      <div class="cell">
                        {{
                        shapelist.weightName ? shapelist.weightName : "体重"
                        }}: {{ shapelist.weightScore
                        }}{{ shapelist.weightMeasureUnit }}
                      </div>
                    </td>
                    <td class="el-table__cell is-leaf" style="text-align: center">
                      <div class="cell">
                        <div class="cell">BMI值: {{ shapelist.bmi }}</div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top: 50px" v-show="shapeshow">
      <!-- <el-col :span="12" class="card-box" style="height: 370px">
        <el-card>
          <div slot="header" style="text-align: center">
            <span>年龄身高体重比图</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium" style="height: 310px">
            <div
              v-show="heightshow"
              slot="header"
              style="text-align: center; font-size: 12px; padding-top: 20px"
            >
              <span>年龄身高比</span>

              <div
                style="
                  width: 300px;
                  margin: 0 auto;
                  height: 70px;
                  margin-top: 10px;
                  position: relative;
                "
              >
                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: 79%;
                    line-height: 20px;
                  "
                >
                  {{
                  ((((heightMax - heightMin) / heightMin) * heightMin) / 5) *
                  4 +
                  heightMin
                  }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 80%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>
                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: 59%;
                    line-height: 20px;
                  "
                >
                  {{
                  ((((heightMax - heightMin) / heightMin) * heightMin) / 5) *
                  3 +
                  heightMin
                  }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 60%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>
                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: 39%;
                    line-height: 20px;
                  "
                >
                  {{
                  ((((heightMax - heightMin) / heightMin) * heightMin) / 5) *
                  2 +
                  heightMin
                  }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 40%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>

                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: 19%;
                    line-height: 20px;
                  "
                >
                  {{
                  ((((heightMax - heightMin) / heightMin) * heightMin) / 5) *
                  1 +
                  heightMin
                  }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 20%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>
                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: -1%;
                    line-height: 20px;
                  "
                >{{ heightMin }}</div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 0%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>

                <div
                  style="
                    position: absolute;
                    top: 1px;
                    right: -1%;
                    line-height: 20px;
                  "
                >{{ heightMax }}</div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    right: 0%;
                    width: 2px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>

                <div
                  class="cz2"
                  :style="{
                    width:
                      ((itemheight - heightMin) / (heightMax - heightMin)) *
                        100 +
                      '%',
                  }"
                ></div>
              </div>

              <div>{{ shapelist.ageHeightDescription }}</div>
              <div>
                标准:{{ shapelist.ageHeightMin }}-{{ shapelist.ageHeightMax
                }}{{ shapelist.heightMeasureUnit }}
              </div>
            </div>

            <div
              slot="header"
              v-show="weightshow"
              style="
                text-align: center;
                margin-top: 20px;
                font-size: 12px;
                padding-top: 20px;
              "
            >
              <span>年龄体重比</span>

              <div
                style="
                  width: 300px;
                  margin: 0 auto;
                  height: 70px;
                  margin-top: 10px;
                  position: relative;
                "
              >
                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: 79%;
                    line-height: 20px;
                  "
                >
                  {{
                  ((((weightMax - weightMin) / weightMin) * weightMin) / 5) *
                  4 +
                  weightMin
                  }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 80%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>
                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: 59%;
                    line-height: 20px;
                  "
                >
                  {{
                  ((((weightMax - weightMin) / weightMin) * weightMin) / 5) *
                  3 +
                  weightMin
                  }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 60%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>
                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: 39%;
                    line-height: 20px;
                  "
                >
                  {{
                  ((((weightMax - weightMin) / weightMin) * weightMin) / 5) *
                  2 +
                  weightMin
                  }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 40%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>

                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: 19%;
                    line-height: 20px;
                  "
                >
                  {{
                  ((((weightMax - weightMin) / weightMin) * weightMin) / 5) *
                  1 +
                  weightMin
                  }}
                </div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 20%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>
                <div
                  style="
                    position: absolute;
                    top: 1px;
                    left: -1%;
                    line-height: 20px;
                  "
                >{{ weightMin }}</div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    left: 0%;
                    width: 1px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>

                <div
                  style="
                    position: absolute;
                    top: 1px;
                    right: -1%;
                    line-height: 20px;
                  "
                >{{ weightMax }}</div>
                <div
                  style="
                    position: absolute;
                    top: 20px;
                    right: 0%;
                    width: 2px;
                    height: 15px;
                    background: #a2a4a1;
                  "
                ></div>

                <div
                  class="cz2"
                  :style="{
                    width:
                      ((itemweight - weightMin) / (weightMax - weightMin)) *
                        100 +
                      '%',
                  }"
                ></div>
              </div>

              <div>{{ shapelist.ageWeightDescription }}</div>
              <div>
                标准:{{ shapelist.ageWeightMin }}-{{ shapelist.ageWeightMax
                }}{{ shapelist.weightMeasureUnit }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>-->
      <el-col :span="12" class="card-box" style="height: 370px">
        <el-card>
          <div slot="header" style="text-align: center">
            <span>BMI</span>
          </div>
          <div
            class="el-table el-table--enable-row-hover el-table--medium"
            style="height: 310px; position: relative"
          >
            <div
              ref="shapechart"
              id="shapechart"
              style="width: 100%; height: 300px; margin: 0 auto"
            ></div>

            <div
              style="
                position: absolute;
                left: 50%;
                top: 45%;
                transform: translate(-50%);
              "
            >
              得分:
              <span style="color: red">{{ shapelist.bmi }}</span>
            </div>
            <div
              style="
                position: absolute;
                left: 50%;
                top: 55%;
                transform: translate(-50%);
              "
            >{{ shapelist.bmiDescription }}</div>
            <!-- <div
              class="texts"
              style="
                width: 285px;
                height: 60px;
                line-height: 20px;
                margin: 0 auto;
                font-size: 12px;
              "
            >
              <span
                class="text"
                style="display: inline-block; margin-right: 10px"
                v-for="(item, index) in bmiItemLevel"
                :key="index"
              >
                <span
                  style="
                    vertical-align: middle;
                    width: 30px;
                    height: 14px;
                    background: #91cd77;
                    display: inline-block;
                    margin-right: 5px;
                    border-radius: 2px;
                  "
                ></span>
                <span>{{ item.levelName }}</span>
                <div style="text-align: center">
                  {{ item.levelMinScore }}~{{ item.levelMaxScore }}
                </div>
              </span>

               <span
                class="text"
                style="display: inline-block; margin-right: 10px"
              >
                <span
                  style="
                    vertical-align: middle;
                    width: 30px;
                    height: 14px;
                    background: #5470c6;
                    display: inline-block;
                    margin-right: 5px;
                    border-radius: 2px;
                  "
                ></span>
                <span>健康</span>
                <div style="text-align: center">
                  {{ item.levelMinScore }}~{{ item.levelMaxScore }}
                </div>
              </span>

              <span
                class="text"
                style="display: inline-block; margin-right: 10px"
              >
                <span
                  style="
                    vertical-align: middle;
                    width: 30px;
                    height: 14px;
                    background: #fc8251;
                    display: inline-block;
                    margin-right: 5px;
                    border-radius: 2px;
                  "
                ></span>
                <span>过重</span>
                <div style="text-align: center">
                  {{ item.levelMinScore }}~{{ item.levelMaxScore }}
                </div>
              </span>

              <span class="text" style="display: inline-block">
                <span
                  style="
                    vertical-align: middle;
                    width: 30px;
                    height: 14px;
                    background: #ef6567;
                    display: inline-block;
                    margin-right: 5px;
                    border-radius: 2px;
                  "
                ></span>
                <span>肥胖</span>
                <div style="text-align: center">
                  {{ item.levelMinScore }}~{{ item.levelMaxScore }}
                </div>
              </span>
            </div>-->
            <div></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- //quality 身体素质分析-->
    <div class="title" style="margin: 40px auto" v-show="qualityshow">身体素质分析</div>
    <el-card class="box-card" style="width: 95%; margin: 0 auto" v-show="qualityshow">
      <div slot="header" style="text-align: center">身体素质测试</div>
      <el-row style="text-align: center">
        <el-col
          :span="5"
          class="toptitle"
          style="
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
          "
        >身体素质测试</el-col>
        <el-col
          :span="5"
          class="toptitle"
          style="
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
          "
        >测量值</el-col>
        <el-col
          :span="9"
          class="toptitle"
          style="
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
          "
        >成绩</el-col>
        <el-col :span="5" class="toptitle" style="border-bottom: 1px solid #ededed">备注</el-col>
      </el-row>
      <el-row style="text-align: center" v-for="(item, index) in studentscorelist" :key="index">
        <el-col
          :span="5"
          class="text"
          style="
            height: 100px;
            line-height: 100px;
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
          "
        >{{ item.itemName }}</el-col>
        <el-col
          class="text"
          :span="5"
          style="
            height: 100px;
            line-height: 100px;
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
          "
        >
          {{ item.itemScore>=0 ? item.itemScore :item.scoreDictValue ? item.scoreDictValue : ""}}
          {{ item.measureUnit }}
        </el-col>

        <el-col
          class="text"
          v-if="item.itemScore"
          :span="9"
          style="
            height: 100px;
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
            position: relative;
            overflow: hidden;
          "
        >
          <span style="position: absolute; left: 5%; top: 10px">
            {{
            item.measureUnit == "s" || item.measureUnit == "h" ? "时间" : ""
            }}{{
            item.measureUnit == "cm" || item.measureUnit == "m" ? "距离" : ""
            }}
            {{ item.measureUnit == "kg" ? "千克" : "" }}
            {{ item.measureUnit == "g" ? "克" : "" }}
            {{ item.measureUnit == "分" ? "成绩" : "" }}({{ item.measureUnit }})
          </span>

          <!-- <span style="position: absolute; left: 6%; top: 70%">评价</span> -->
          <div
            style="
              width: 65%;
              margin: 0 auto;
              margin-top: 10px;
              margin-left: 25%;
              position: relative;
            "
          >
            <div
              style="
                position: absolute;
                top: 1px;
                left: 75%;
                line-height: 20px;
                overflow: hidden;
                width: 40px;
              "
            >
              {{
              (
              ((item.maxScore - item.minScore) / 5) * 4 +
              item.minScore
              ).toFixed(1)
              }}
            </div>
            <div
              style="
                position: absolute;
                top: 20px;
                left: 80%;
                width: 1px;
                height: 15px;
                background: #a2a4a1;
              "
            ></div>
            <div
              style="
                position: absolute;
                top: 1px;
                left: 55%;
                overflow: hidden;
                line-height: 20px;
                width: 40px;
              "
            >
              {{
              (
              ((item.maxScore - item.minScore) / 5) * 3 +
              item.minScore
              ).toFixed(1)
              }}
            </div>
            <div
              style="
                position: absolute;
                top: 20px;
                left: 60%;
                width: 1px;
                height: 15px;
                background: #a2a4a1;
              "
            ></div>
            <div
              style="
                position: absolute;
                top: 1px;
                left: 35%;
                line-height: 20px;
                overflow: hidden;
                width: 40px;
              "
            >
              {{
              (
              ((item.maxScore - item.minScore) / 5) * 2 +
              item.minScore
              ).toFixed(1)
              }}
            </div>
            <div
              style="
                position: absolute;
                top: 20px;
                left: 40%;
                width: 1px;
                height: 15px;
                background: #a2a4a1;
              "
            ></div>

            <div
              style="
                position: absolute;
                top: 1px;
                left: 15%;
                line-height: 20px;
                overflow: hidden;
                width: 40px;
              "
            >
              {{
              (
              ((item.maxScore - item.minScore) / 5) * 1 +
              item.minScore
              ).toFixed(1)
              }}
            </div>
            <div
              style="
                position: absolute;
                top: 20px;
                left: 20%;
                width: 1px;
                height: 15px;
                background: #a2a4a1;
              "
            ></div>
            <div
              style="
                position: absolute;
                top: 1px;
                left: -5%;
                line-height: 20px;
                overflow: hidden;
                width: 32px;
              "
            >{{ item.minScore == null ? 0 : item.minScore }}</div>
            <div
              style="
                position: absolute;
                top: 20px;
                left: 0%;
                width: 1px;
                height: 15px;
                background: #a2a4a1;
              "
            ></div>

            <div
              style="
                position: absolute;
                top: 1px;
                right: -3%;
                line-height: 20px;
                overflow: hidden;
                width: 32px;
              "
            >{{ item.maxScore == null ? 100 : item.maxScore }}</div>
            <div
              style="
                position: absolute;
                top: 20px;
                right: 0%;
                width: 2px;
                height: 15px;
                background: #a2a4a1;
              "
            ></div>

            <div
              class="cz2"
              :style="{
                width:
                  ((item.itemScore - item.minScore) /
                    (item.maxScore - item.minScore)) *
                    100 +
                  '%',
              }"
            ></div>
          </div>

          <!-- <div style="position: absolute; left: 30%; top: 72%">{{ item.leveName }}</div> -->
        </el-col>
        <el-col
          class="text"
          v-else
          :span="9"
          style="
            height: 100px;
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
            position: relative;
          "
        >
          <!-- <span
            style="
              margin-top: 20px;
              float: left;
              margin-left: 5%;
              margin-top: 7%;
            "
          >成绩评价</span>-->
          <div style="position: absolute; left: 25%; top: 40%">{{ item.scoreDictValue }}</div>
        </el-col>
        <el-col
          class="text"
          :span="5"
          style="
            height: 100px;
            line-height: 100px;
            border-bottom: 1px solid #ededed;
          "
        >{{ item.syntheticalAssess }}</el-col>
      </el-row>
    </el-card>
    <!-- //action动作发展分析 -->
    <div class="title" style="margin: 40px auto">动作发展分析</div>
    <el-row :gutter="24">
      <div style="margin: 10px auto; width: 100%">
        <el-table
          :data="actionlist"
          border
          :span-method="arraySpanMethod"
          style="width: 100%; margin: 0 auto"
        >
          <el-table-column prop="categoryName" label="测试分类" align="center"></el-table-column>
          <el-table-column prop="itemName" label="测试项目" align="center"></el-table-column>
          <el-table-column prop="itemFraction" label="动作技能总分" align="center"></el-table-column>
          <el-table-column prop="unifiedStandardScore" label="统一最高得分" align="center"></el-table-column>
          <!-- <el-table-column
            prop="smallStandardScore"
            label="小班最高得分"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="middleStandardScore"
            label="中班最高得分"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="largeStandardScore"
            label="大班最高得分"
            align="center"
          >
          </el-table-column>-->
          <el-table-column prop="itemScoreAll" label="综合得分" align="center"></el-table-column>
          <el-table-column prop="rootCategoryScoreAll" label="国民体质测定总得分" align="center"></el-table-column>
          <el-table-column prop="nationalPhysiqueRank" label="国民体质测定等级" align="center"></el-table-column>
          <el-table-column prop="remark" label="测试目的" align="center"></el-table-column>
          <el-table-column prop="syntheticalAssess" label="备注" align="center"></el-table-column>
        </el-table>
      </div>
    </el-row>
    <!-- //constitution -->
    <div class="title" style="margin: 40px auto" v-show="constitutionshow">综合体质分析</div>
    <el-row v-if="constitutionshow">
      <el-col :span="24" class="card-box" style>
        <el-card>
          <div style="margin-left: 50px">
            <!-- <span>学校排名:</span>
            <span style="margin-left: 20px; margin-right: 20px">
              {{
              constitutionlist.schoolRank
              }}
            </span>名-->
            <span style="margin-left: 50px">区域排名:</span>
            <span style="margin-left: 20px; margin-right: 20px">
              {{
              constitutionlist.areaRank
              }}
            </span>名
            <span style="margin-left: 50px">区域成绩占比:</span>
            <span style="margin-left: 20px; margin-right: 20px">
              {{
              constitutionlist.areaProportion
              }}
            </span>
          </div>

          <div slot="header" style="text-align: center; font-size: 20px">
            <span>体测项目分值与全校、全市对比</span>
          </div>
          <div style="width: 100%; display: flex; flex-wrap: wrap">
            <div
              v-for="(item, index) in constitutionlist.itemScoreList"
              :key="index"
              style="
                width: 45%;
                height: 300px;
                margin-left: 3%;
                margin-top: 20px;
              "
            >
              <div class="constitutionchart" style="width: 100%; height: 300px; margin: 0 auto"></div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 体质评估运动处方 -->
    <div class="title" style="margin: 40px auto">体质评估运动处方</div>
    <el-row :gutter="24">
      <div style="margin: 10px auto; width: 100%">
        <el-table
          :data="selectlist"
          border
          style="width: 100%; margin: 0 auto"
          :span-method="selectlistMethod"
        >
          <el-table-column prop="physicalQualityName" label align="center"></el-table-column>
          <el-table-column prop="degreeMovement" label="运动程度" align="center"></el-table-column>
          <el-table-column prop="motionType" label="运动类型" align="center"></el-table-column>
          <el-table-column prop="motionFrequency" label="运动频率" align="center"></el-table-column>
          <el-table-column prop="motionStrength" label="运动强度" align="center"></el-table-column>
          <el-table-column prop="motionTime" label="运动时间" align="center"></el-table-column>
          <el-table-column prop="motionCapacity" label="运动量" align="center"></el-table-column>
          <el-table-column prop="advancedTime" label="进阶时间(可选择)" align="center"></el-table-column>
          <el-table-column prop="advancedScheme" label="进阶方案" align="center"></el-table-column>
        </el-table>
      </div>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { analysis } from "@/api/system/shape";
import { synthesize } from "@/api/system/comprehensive";
import { testBodyScoreInfo } from "@/api/system/quality";
import { constitution } from "@/api/system/constitution";
import { listAction } from "@/api/system/action";
import { selectThisActionDevelopmentVO } from "@/api/system/personalecharts";
export default {
  name: "personalecharts",
  props: ["itemlists"],
  data() {
    return {
      constitutionshow: true,
      echartslist: {
        batchCode: "",
        pageNum: 1,
        pageSize: 999,
        studentId: ""
      },
      //学生基本信息 comprehensive
      sythesizestudent: [],
      //shape
      shapeshow: true,
      weightshow: true,
      heightshow: true,
      itemweight: "",
      weightMax: 70,
      weightMin: 10,
      itemheight: "",
      heightMax: 150,
      heightMin: 30,
      shapelist: [], //身体形态list
      bmiItemLevel: [], //bmi
      //quality
      studentscorelist: [], //学生成绩
      qualityshow: true,
      //constitution
      constitutionlist: [],
      //action
      actionlist: [],
      spanArr: [],
      position: 0, // 标记位置
      spanArr2: [],
      position2: 0, // 标记位置
      spanArr3: [],
      position3: 0, // 标记位置
      spanArr4: [],
      position4: 0, // 标记位置
      position2: 0, // 标记位置
      count: 0, //滑动位置
      //运动处方
      selectlist: [],
      selectspanArr: [],
      selectposition: 0, // 标记位置
      selectspanArr2: [],
      selectposition2: 0, // 标记位置
      selectspanArr3: [],
      selectposition3: 0, // 标记位置
      selectspanArr4: [],
      selectposition4: 0 // 标记位置
    };
  },
  mounted() {
    this.constitutionlist = [];
    this.comprehensive();
  },
  // watch: {
  //   itemlists: {
  //     handler(newName, oldName) {
  //       this.echartslist = {
  //         studentId: newName.studentId,
  //         batchCode: newName.batchCode,
  //         pageNum: 1,
  //         pageSize: 999,
  //       };
  //       this.constitutionlist = [];
  //       this.comprehensive();
  //       this.shape();
  //       this.quality();
  //       this.listActioninfo();
  //       this.constitutioninfo();
  //     },
  //     deep: true,
  //   },
  // },
  created() {
    this.echartslist = {
      studentId: this.itemlists.studentId,
      batchCode: this.itemlists.batchCode,
      pageNum: 1,
      pageSize: 999
    };
  },
  methods: {
    //运动处方管理
    select() {
      this.selectspanArr = [];
      this.selectposition = 0;
      this.selectspanArr2 = [];
      this.selectposition2 = 0;
      this.selectspanArr3 = [];
      this.selectposition3 = 0;
      this.selectspanArr4 = [];
      this.selectposition4 = 0;
      selectThisActionDevelopmentVO(this.echartslist).then(res => {
        this.selectlist = res.data;
        this.selectlistforeach();
      });
    },
    selectlistforeach() {
      this.selectlist.forEach((item, index) => {
        if (index == 0) {
          this.selectspanArr.push(1);
          this.selectposition = 0;
          this.selectspanArr2.push(1);
          this.selectposition2 = 0;
          this.selectspanArr3.push(1);
          this.selectposition3 = 0;
          this.selectspanArr4.push(1);
          this.selectposition4 = 0;
        } else {
          // 判断当前元素与上一个元素是否相同  也就是判断 a 的值是否相同
          if (
            this.selectlist[index].physicalQualityName ==
            this.selectlist[index - 1].physicalQualityName
          ) {
            // 如果相同 当前位置的 值 加1
            this.selectspanArr[this.selectposition] += 1;
            this.selectspanArr.push(0); // 下一个位置 给 0
          } else {
            this.selectspanArr.push(1); // 不相等下一个位置给 1
            this.selectposition = index; // 标记位置 设置为当前位置
          }
          if (
            this.selectlist[index].physicalQualityName ==
              this.selectlist[index - 1].physicalQualityName &&
            this.selectlist[index].degreeMovement ==
              this.selectlist[index - 1].degreeMovement
          ) {
            this.selectspanArr2[this.selectposition2] += 1;
            this.selectspanArr2.push(0); // 下一个位置 给 0
          } else {
            this.selectspanArr2.push(1); // 不相等下一个位置给 1
            this.selectposition2 = index; // 标记位置 设置为当前位置
          }
          if (
            this.selectlist[index].physicalQualityName ==
              this.selectlist[index - 1].physicalQualityName &&
            this.selectlist[index].motionCapacity ==
              this.selectlist[index - 1].motionCapacity
          ) {
            this.selectspanArr3[this.selectposition3] += 1;
            this.selectspanArr3.push(0); // 下一个位置 给 0
          } else {
            this.selectspanArr3.push(1); // 不相等下一个位置给 1
            this.selectposition3 = index; // 标记位置 设置为当前位置
          }
          if (
            this.selectlist[index].physicalQualityName ==
              this.selectlist[index - 1].physicalQualityName &&
            this.selectlist[index].advancedScheme ==
              this.selectlist[index - 1].advancedScheme
          ) {
            this.selectspanArr4[this.selectposition4] += 1;
            this.selectspanArr4.push(0); // 下一个位置 给 0
          } else {
            this.selectspanArr4.push(1); // 不相等下一个位置给 1
            this.selectposition4 = index; // 标记位置 设置为当前位置
          }
        }
        this.$emit("handtrue", false);
      });
    },
    selectlistMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        const _row = this.selectspanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex == 1) {
        const _row = this.selectspanArr2[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex == 6) {
        const _row = this.selectspanArr3[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex == 8) {
        const _row = this.selectspanArr4[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    //综合体质分析素质 comprehensive
    comprehensive() {
      synthesize(this.echartslist).then(res => {
        this.shape();
        if (res.data == [] || !res.data) {
        } else {
          this.sythesizestudent = res.data;
          let seriesData = [];
          let yindicator = [];
          if (res.data.physiqueCategoryList.length == 1) {
            let obj = {
              categoryName: "暂无",
              categoryNameAbbreviate: "暂无",
              categoryScore: null,
              levelName: "暂无",
              maxScore: null
            };
            res.data.physiqueCategoryList.push(obj);
            res.data.physiqueCategoryList.push(obj);
            res.data.physiqueCategoryList.push(obj);
          }
          if (res.data.physiqueCategoryList.length == 2) {
            let obj = {
              categoryName: "暂无",
              categoryNameAbbreviate: "暂无",
              categoryScore: null,
              levelName: "暂无",
              maxScore: null
            };
            res.data.physiqueCategoryList.push(obj);
            res.data.physiqueCategoryList.push(obj);
          }

          res.data.physiqueCategoryList.forEach(el => {
            seriesData.push(el.categoryScore);
            if (el.levelName == null) {
              el.levelName = "暂无";
            }
            yindicator.push({
              name: el.categoryName,
              max: el.maxScore
            });
          });
          let comprehensiveChart = echarts.init(
            document.getElementById("comprehensivechart")
          );
          let option = {
            //配置维度的最大值
            color: "blue",
            radar: {
              name: {
                show: true,
                color: "black"
              },
              center: ["50%", "50%"],
              //   雷达图的指示器，用来指定雷达图中的多个变量（维度）
              indicator: yindicator,
              shape: "polygon" //对雷达图形设置成一个圆形,可选 circle:圆形,polygon:多角形(默认)
            },
            series: [
              {
                type: "radar",
                label: {
                  show: true,
                  color: "blue" //显示数值
                },
                areaStyle: {}, //每个雷达图形成一个阴影的面积
                data: [
                  {
                    name: "成绩区域",
                    value: seriesData
                  }
                ],
                areaStyle: {
                  color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                    {
                      color: "rgba(50, 50, 255, 0.1)",
                      offset: 0
                    },
                    {
                      color: "rgba(50, 50, 200, 0.9)",
                      offset: 1
                    }
                  ])
                }
              }
            ]
          };
          // 绘制图表
          comprehensiveChart.setOption(option);
        }
      });
    },
    //学生身体形态 shape
    shape() {
      setTimeout(() => {
        analysis(this.echartslist).then(res => {
          this.quality();
          if (!res.data || res.data == "") {
            this.shapeshow = false;
          } else if (
            res.data.weightScore == 0 ||
            res.data.weightScore == null
          ) {
            this.weightshow = false;
            this.shapelist = res.data;
            this.itemheight = res.data.heightScore;
            this.bmiItemLevel = res.data.bmiItemLevel;
            this.itemweight = res.data.weightScore;
          } else if (
            res.data.heightScore == 0 ||
            res.data.heightScore == null
          ) {
            this.heightshow = false;
            this.shapelist = res.data;
            this.itemheight = res.data.heightScore;
            this.bmiItemLevel = res.data.bmiItemLevel;
            this.itemweight = res.data.weightScore;
          } else if (res.data.bmiItemLevel == null) {
            this.shapelist = res.data;
            this.itemheight = res.data.heightScore;
            this.bmiItemLevel = res.data.bmiItemLevel;
            this.itemweight = res.data.weightScore;
          } else {
            this.shapelist = res.data;
            this.itemheight = res.data.heightScore;
            this.bmiItemLevel = res.data.bmiItemLevel;
            this.itemweight = res.data.weightScore;
            let seriesData = [];
            res.data.bmiItemLevel.forEach(el => {
              seriesData.push({
                value: el.levelMaxScore,
                name:
                  el.levelName +
                  " " +
                  "(" +
                  el.levelMinScore +
                  "~" +
                  el.levelMaxScore +
                  ")"
              });
            });
            let shapechart = echarts.init(
              document.getElementById("shapechart")
            );
            let option = {
              series: [
                {
                  type: "pie",
                  radius: ["40%", "70%"],
                  // center: ["37%", "50%"],
                  itemStyle: {
                    normal: {
                      color: function(colors) {
                        let colorList = [
                          "#91cd77",
                          "#5470c6",
                          "#fc8251",
                          "#ef6567",
                          "#f9c956",
                          "#75bedc"
                        ];
                        return colorList[colors.dataIndex];
                      }
                    }
                  },
                  data: seriesData,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 1)"
                    }
                  }
                }
              ]
            };
            option && shapechart.setOption(option);
          }
        });
      }, 100);
    },
    //quality
    //学生身体素质
    quality() {
      setTimeout(() => {
        testBodyScoreInfo(this.echartslist).then(res => {
          this.constitutioninfo();
          if (!res.rows || res.rows == "" || res.rows == []) {
            this.qualityshow = false;
          } else {
            this.studentscorelist = res.rows;
            this.qualityshow = true;
          }
        });
      }, 200);
    },
    //constitution
    constitutioninfo() {
      setTimeout(() => {
        constitution(this.echartslist).then(res => {
          this.listActioninfo();
          this.constitutionlist = res.data;
          if (!res.data || res.data == "") {
            this.constitutionshow = false;
          } else {
            this.constitutionshow = true;
            this.$nextTick(() => {
              this.constitutionoptions();
            });
          }
        });
      }, 400);
    },
    constitutionoptions() {
      let constitutionEchart = document.getElementsByClassName(
        "constitutionchart"
      );
      for (let i = 0; i < this.constitutionlist.itemScoreList.length; i++) {
        let ydata = [
          this.constitutionlist.itemScoreList[i].itemScore,
          this.constitutionlist.itemScoreList[i].schoolAvgScore,
          this.constitutionlist.itemScoreList[i].cityAvgScore
        ];
        let textname = this.constitutionlist.itemScoreList[i].itemName;
        let myChart = echarts.init(constitutionEchart[i]);
        let option = {
          title: {
            text: textname,
            subtext: "",
            left: "50%"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter: function(params) {
              let tar = params[1];
              return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "category",
            splitLine: { show: false },
            data: this.constitutionlist.itemStudentList
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              name: "Placeholder",
              type: "bar",
              stack: "Total",
              itemStyle: {
                borderColor: "blue",
                color: "blue"
              },
              emphasis: {
                itemStyle: {
                  borderColor: "transparent",
                  color: "transparent"
                }
              },
              data: [0, 0, 0]
            },
            {
              name: "分数",
              type: "bar",
              stack: "Total",
              // center: ["50%", "50%"],
              barWidth: 35,
              label: {
                show: true,
                position: "inside"
              },
              itemStyle: {
                normal: {
                  color: function(colors) {
                    let colorList = [
                      "#91cd77",
                      "#5470c6",
                      "#fc8251",
                      "#ef6567",
                      "#f9c956",
                      "#75bedc",
                      "#91cd77",
                      "#5470c6",
                      "#fc8251",
                      "#ef6567",
                      "#f9c956",
                      "#75bedc",
                      "#91cd77",
                      "#5470c6",
                      "#fc8251",
                      "#ef6567",
                      "#f9c956",
                      "#75bedc",
                      "#91cd77",
                      "#5470c6",
                      "#fc8251",
                      "#ef6567",
                      "#f9c956",
                      "#75bedc"
                    ];
                    return colorList[i];
                  }
                }
              },

              // itemStyle: {
              //   borderColor: "#94D8F6",
              //   color: "#94D8F6",
              // },
              data: ydata
            }
          ]
        };

        myChart.setOption(option);
      }
    },
    //action
    actionforeach() {
      this.actionlist.forEach((item, index) => {
        if (index == 0) {
          this.spanArr.push(1);
          this.position = 0;
          this.spanArr2.push(1);
          this.position2 = 0;
          this.spanArr3.push(1);
          this.position3 = 0;
          this.spanArr4.push(1);
          this.position4 = 0;
        } else {
          // 判断当前元素与上一个元素是否相同  也就是判断 a 的值是否相同
          if (
            this.actionlist[index].categoryName ==
            this.actionlist[index - 1].categoryName
          ) {
            // 如果相同 当前位置的 值 加1
            this.spanArr[this.position] += 1;
            this.spanArr.push(0); // 下一个位置 给 0
          } else {
            this.spanArr.push(1); // 不相等下一个位置给 1
            this.position = index; // 标记位置 设置为当前位置
          }

          if (
            this.actionlist[index].categoryName ==
              this.actionlist[index - 1].categoryName &&
            this.actionlist[index].itemScoreAll ==
              this.actionlist[index - 1].itemScoreAll
          ) {
            this.spanArr2[this.position2] += 1;
            this.spanArr2.push(0); // 下一个位置 给 0
          } else {
            this.spanArr2.push(1); // 不相等下一个位置给 1
            this.position2 = index; // 标记位置 设置为当前位置
          }

          if (
            this.actionlist[index].rootCategoryScoreAll ==
            this.actionlist[index - 1].rootCategoryScoreAll
          ) {
            this.spanArr3[this.position3] += 1;
            this.spanArr3.push(0); // 下一个位置 给 0
          } else {
            this.spanArr3.push(1); // 不相等下一个位置给 1
            this.position3 = index; // 标记位置 设置为当前位置
          }

          if (
            this.actionlist[index].nationalPhysiqueRank ==
            this.actionlist[index - 1].nationalPhysiqueRank
          ) {
            this.spanArr4[this.position4] += 1;
            this.spanArr4.push(0); // 下一个位置 给 0
          } else {
            this.spanArr4.push(1); // 不相等下一个位置给 1
            this.position4 = index; // 标记位置 设置为当前位置
          }
        }
      });
    },
    // 合并单元格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // 对第一列 相对字段 a  进行合并
      if (columnIndex == 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex == 7) {
        const _row = this.spanArr2[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex == 8) {
        const _row = this.spanArr3[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex == 9) {
        const _row = this.spanArr4[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    //动作发展检测
    listActioninfo() {
      setTimeout(() => {
        listAction(this.echartslist).then(res => {
          this.select();
          this.spanArr = [];
          this.position = 0;
          this.spanArr2 = [];
          this.position2 = 0;
          this.spanArr3 = [];
          this.position3 = 0;
          this.spanArr4 = [];
          this.position4 = 0;
          if (!res.rows || res.rows == "") {
          } else {
            //   res.rows.itemCategoryList.forEach((e) => {
            //     e.push(res.rows.categoryName);
            //   });
            this.actionlist = res.rows;
            this.actionforeach();
          }
        });
      }, 300);
    }
  }
};
</script>
<style scoped='scss'>
.title {
  font-size: 28px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 20px;
}
::v-deep .el-card__header {
  border: none;
}
.cz2 {
  background: #ffc000;
  height: 5px;
  align-items: center;
  line-height: 30px;
  position: absolute;
  top: 40px;
}
::v-deep .el-form {
  display: inline;
}
.text {
  font-size: 14px;
}
.toptitle {
  height: 50px;
  line-height: 50px;
  background-color: #f8f8f9;
  font-size: 15px;
  font-weight: 600;
}
</style>
