<!DOCTYPE html>
<html id="root">
  <head>
    <meta charset="UTF-8" />
    <meta name="title" content="体验记录" />
    <meta name="description" content="体验记录" />
    <meta
      name="sharecontent"
      data-msg-title="体验记录"
      data-msg-content="体验记录"
      data-msg-callBack=""
      data-line-img="体验记录"
      data-line-title="体验记录"
      data-line-callBack=""
    />

    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <link rel="stylesheet" href="/assets/css/report/index.css" />

    <!-- unpkg -->
    <link rel="stylesheet" href="/assets/css/index.css" />

    <script src="/assets/js/vue.global.prod.js"></script>
    <script src="/assets/js/echarts.min.js"></script>
    <script src="/assets/js/index.umd.min.js"></script>
    <script src="/assets/js/axios.min.js"></script>
    <script src="/assets/js/index.full.min.js"></script>
    <script src="/assets/js/index.iife.min.js"></script>

    <!-- jsdelivr -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.2.19/dist/index.css" /> -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@3.2.37/dist/vue.global.min.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.2.3/dist/index.umd.min.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/element-plus@2.2.19/dist/index.full.min.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.0.10/dist/index.iife.min.js"></script> -->
  </head>
  <body style="margin: 0; padding: 0">
    <!-- <body> -->
    <div id="app">
      <el-container style="width: 100%; min-height: 100vh">
        <el-container style="height: 100%">
          <!-- 当前报表 -->
          <el-container>
            <el-main
              v-loading.fullscreen.lock="loading"
              style="text-align: center; justify-content: center; align-items: top"
            >
              <!-- Calc -->
              <!-- <div style="position: fixed; z-index: 100000; top: 50vh; height: 60px; width: 100%; text-align: center">
                <el-row>
                  <el-col :span="3">
                    <el-input v-model="eleSize" placeholder="Please input" />
                  </el-col>

                  <el-col :span="3"
                    ><el-button type="warning" @click="copyToClipboard">转化</el-button>
                    <el-button type="warning" @click="popWindow">弹</el-button></el-col
                  >
                </el-row>
              </div> -->
              <!-- Page 1 -->
              <el-row class="page">
                <!-- Title -->
                <el-col :span="24">
                  <el-row style="width: calc(98vw * 0.815625)">
                    <el-col :span="16">
                      <div style="display: flex">
                        <div
                          style="
                            width: calc(98vw * 0.06770833333333333);
                            height: calc(98vw * 0.06770833333333333);
                            background-image: url('/assets/images/overview.svg');
                            background-size: calc(98vw * 0.06770833333333333) calc(98vw * 0.06770833333333333);
                          "
                        ></div>
                        <div style="display: block; margin-left: calc(98vw * 0.0125)">
                          <div style="text-align: left ; width: 100%">
                            <span
                              style="
                                color: var(--unnamed, #000);
                                font-family: SF Pro, Roboto, Segoe UI, Hiragino Sans GB, Helvetica neue, Noto Sans,
                                  Helvetica, Microsoft Sans Serif, Arial, WenQuanYi Micro Hei, sans-serif;
                                font-size: calc(98vw * 0.052083333333333336);
                                font-style: normal;
                                font-weight: 700;
                                line-height: normal;
                                display: block;
                              "
                              >{{t("title")}}</span
                            >
                          </div>
                          <div style="text-align: left">
                            <span
                              style="
                                color: var(--unnamed, #000);
                                font-family: SF Pro, Roboto, Segoe UI, Hiragino Sans GB, Helvetica neue, Noto Sans,
                                  Helvetica, Microsoft Sans Serif, Arial, WenQuanYi Micro Hei, sans-serif;
                                font-size: calc(98vw * 0.01875);
                                font-style: normal;
                                font-weight: 590;
                                line-height: normal;
                                display: block;
                              "
                              >{{t("sub_title")}}</span
                            >
                          </div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="8" style="text-align: right; justify-content: end; align-items: end; display: flex"
                      ><div>
                        <span
                          v-if="session.owner"
                          style="
                            color: var(--unnamed, #000);

                            /* 正文 */
                            font-family: PingFang SC, Roboto, Segoe UI, Hiragino Sans GB, Helvetica neue, Noto Sans,
                              Helvetica, Microsoft Sans Serif, Arial, WenQuanYi Micro Hei, sans-serif;
                            font-size: calc(98vw * 0.01875);
                            font-style: normal;
                            font-weight: 600;
                            line-height: normal;
                          "
                          >用户：{{ session.owner }}</span
                        >
                        <br />
                        <span
                          v-if="session.lessonName"
                          style="
                            color: var(--unnamed, #000);

                            /* 正文 */
                            font-family: PingFang SC, Roboto, Segoe UI, Hiragino Sans GB, Helvetica neue, Noto Sans,
                              Helvetica, Microsoft Sans Serif, Arial, WenQuanYi Micro Hei, sans-serif;
                            font-size: calc(98vw * 0.01875);
                            font-style: normal;
                            font-weight: 600;
                            line-height: normal;
                          "
                          >课程：{{ session.lessonName }}</span
                        >
                        <br />
                        <span
                          style="
                            color: var(--unnamed, #000);

                            /* 副标题 */
                            font-family: PingFang SC, Roboto, Segoe UI, Hiragino Sans GB, Helvetica neue, Noto Sans,
                              Helvetica, Microsoft Sans Serif, Arial, WenQuanYi Micro Hei, sans-serif;
                            font-size: calc(98vw * 0.0125);
                            font-style: normal;
                            font-weight: 600;
                            line-height: normal;
                          "
                          >{{ session.timeRange }}</span
                        >
                      </div>
                    </el-col>
                  </el-row>
                </el-col>

                <div class="parting-line" style="width: calc(98vw * 0.815625)"></div>

                <!-- 1 -->
                <el-col :span="24" class="part">
                  <div
                    class="part-bg"
                    style="
                      background-image: url('/assets/images/1.svg');
                      background-size: calc(98vw * 0.10520833333333333) calc(98vw * 0.10520833333333333);
                    "
                  >
                    <div style="display: block; text-align: left">
                      <div>
                        <span class="part-title">{{t("conclusion")}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="part-detail">
                    <span
                      style="
                        color: var(--unnamed, #000);

                        font-family: PingFang SC, Roboto, Segoe UI, Hiragino Sans GB, Helvetica neue, Noto Sans,
                          Helvetica, Microsoft Sans Serif, Arial, WenQuanYi Micro Hei, sans-serif;
                        font-size: calc(98vw * 0.01875);
                        font-style: normal;
                        font-weight: 600;
                        line-height: normal;
                      "
                      v-html="report.summary"
                    >
                    </span>

                    <div
                      style="
                        width: 100%;
                        /* height: calc(98vw * 0.0766666666666667); */
                        flex-shrink: 0;
                        border-radius: calc(98vw * 0.0125);
                        border: 1px solid #000;
                        margin-top: calc(98vw * 0.052083333333333336);
                        background-image: url('/assets/images/ldqm.svg');
                        background-repeat: no-repeat;
                        background-position: calc(98vw * 0.009895833333333333) calc(98vw * 0.013020833333333334);
                        background-size: calc(98vw * 0.028125) calc(98vw * 0.022916666666666665);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-top: calc(100vw * 0.032083333333333336);
                        padding: 10px;
                      "
                    >
                      <div
                        style="
                          width: calc(98vw * 0.042666666666666664);
                          margin-left: calc(98vw * 0.03125);
                          margin-right: calc(98vw * 0.020833333333333332);
                        "
                      >
                        <span
                          style="
                            color: var(--unnamed, #666);
                            font-family: PingFang SC, Roboto, Segoe UI, Hiragino Sans GB, Helvetica neue, Noto Sans,
                              Helvetica, Microsoft Sans Serif, Arial, WenQuanYi Micro Hei, sans-serif;
                            font-size: calc(98vw * 0.020833333333333332);
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                          "
                          >{{ t("notice.title") }}</span
                        >
                      </div>
                      <div style="width: calc(98vw * 0.4875)">
                        <span
                          style="
                            color: var(--unnamed, #000);
                            font-family: PingFang SC, Roboto, Segoe UI, Hiragino Sans GB, Helvetica neue, Noto Sans,
                              Helvetica, Microsoft Sans Serif, Arial, WenQuanYi Micro Hei, sans-serif;
                            font-size: calc(98vw * 0.0125);
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                          "
                          >{{ t("notice.content") }}</span
                        >
                      </div>
                    </div>

                    <div class="parting-line" style="margin-top: calc(100vw * 0.032083333333333336)"></div>
                  </div>
                </el-col>

                <!-- 2 -->
                <el-col :span="24" class="part" style="margin-top: calc(100vw * 0.012083333333333336)">
                  <div
                    class="part-bg"
                    style="
                      background-image: url('/assets/images/2.svg');
                      background-size: calc(98vw * 0.10520833333333333) calc(98vw * 0.10520833333333333);
                    "
                  >
                    <div style="display: block; text-align: left">
                      <div>
                        <span class="part-title">{{ t("suggestions") }}</span>
                      </div>

                    </div>
                  </div>
                  <div class="part-detail">
                    <div style="display: block">
                      <div style="display: flex; justify-content: start; align-items: start">
                        <div
                          style="
                            display: flex;
                            width: calc(98vw * 0.0375);
                            height: calc(98vw * 0.0375);
                            padding: calc(98vw * 0.008854166666666666);
                            justify-content: right;
                            align-items: center;
                            text-align: center;
                            border-radius: calc(98vw * 0.052083333333333336);
                            background: var(--unnamed, #346fe2);
                          "
                        >
                          <span
                            style="
                              color: var(--unnamed, #fff);
                              text-align: center;
                              font-family: SF Pro, Roboto, Segoe UI, Hiragino Sans GB, Helvetica neue, Noto Sans,
                                Helvetica, Microsoft Sans Serif, Arial, WenQuanYi Micro Hei, sans-serif;
                              font-size: calc(98vw * 0.016666666666666666);
                              font-style: italic;
                              font-weight: 700;
                              line-height: normal;
                            "
                            >01</span
                          >
                        </div>
                        <div style="display: flex; text-align: left">
                          <span
                            style="
                              margin-left: calc(98vw * 0.01875);

                              color: var(--unnamed, #000);
                              font-family: PingFang SC, Roboto, Segoe UI, Hiragino Sans GB, Helvetica neue, Noto Sans,
                                Helvetica, Microsoft Sans Serif, Arial, WenQuanYi Micro Hei, sans-serif;
                              font-size: calc(98vw * 0.01875);
                              font-style: normal;
                              font-weight: 600;
                              line-height: normal;
                            "
                            >{{ report.suggestions[0] }}</span
                          >
                        </div>
                      </div>

                      <div
                        style="
                          display: flex;
                          justify-content: start;
                          align-items: start;
                          margin-top: calc(98vw * 0.052083333333333336);
                        "
                      >
                        <div
                          style="
                            display: flex;
                            width: calc(98vw * 0.0375);
                            height: calc(98vw * 0.0375);
                            padding: calc(98vw * 0.008854166666666666);
                            justify-content: right;
                            align-items: center;
                            text-align: center;
                            border-radius: calc(98vw * 0.052083333333333336);
                            background: var(--unnamed, #346fe2);
                          "
                        >
                          <span
                            style="
                              color: var(--unnamed, #fff);
                              text-align: center;
                              font-family: SF Pro, Roboto, Segoe UI, Hiragino Sans GB, Helvetica neue, Noto Sans,
                                Helvetica, Microsoft Sans Serif, Arial, WenQuanYi Micro Hei, sans-serif;
                              font-size: calc(98vw * 0.016666666666666666);
                              font-style: italic;
                              font-weight: 700;
                              line-height: normal;
                            "
                            >02</span
                          >
                        </div>
                        <div style="display: flex; text-align: left">
                          <span
                            style="
                              margin-left: calc(98vw * 0.01875);

                              color: var(--unnamed, #000);
                              font-family: PingFang SC, Roboto, Segoe UI, Hiragino Sans GB, Helvetica neue, Noto Sans,
                                Helvetica, Microsoft Sans Serif, Arial, WenQuanYi Micro Hei, sans-serif;
                              font-size: calc(98vw * 0.01875);
                              font-style: normal;
                              font-weight: 600;
                              line-height: normal;
                            "
                            >{{ report.suggestions[1] }}</span
                          >
                        </div>
                      </div>

                      <div
                        style="
                          display: flex;
                          justify-content: start;
                          align-items: start;
                          margin-top: calc(98vw * 0.052083333333333336);
                        "
                      >
                        <div
                          style="
                            display: flex;
                            width: calc(98vw * 0.0375);
                            height: calc(98vw * 0.0375);
                            padding: calc(98vw * 0.008854166666666666);
                            justify-content: right;
                            align-items: center;
                            text-align: center;
                            border-radius: calc(98vw * 0.052083333333333336);
                            background: var(--unnamed, #346fe2);
                          "
                        >
                          <span
                            style="
                              color: var(--unnamed, #fff);
                              text-align: center;
                              font-family: SF Pro, Roboto, Segoe UI, Hiragino Sans GB, Helvetica neue, Noto Sans,
                                Helvetica, Microsoft Sans Serif, Arial, WenQuanYi Micro Hei, sans-serif;
                              font-size: calc(98vw * 0.016666666666666666);
                              font-style: italic;
                              font-weight: 700;
                              line-height: normal;
                            "
                            >03</span
                          >
                        </div>
                        <div style="display: flex; text-align: left">
                          <span
                            style="
                              margin-left: calc(98vw * 0.01875);

                              color: var(--unnamed, #000);
                              font-family: PingFang SC, Roboto, Segoe UI, Hiragino Sans GB, Helvetica neue, Noto Sans,
                                Helvetica, Microsoft Sans Serif, Arial, WenQuanYi Micro Hei, sans-serif;
                              font-size: calc(98vw * 0.01875);
                              font-style: normal;
                              font-weight: 600;
                              line-height: normal;
                            "
                            >{{ report.suggestions[2] }}</span
                          >
                        </div>
                      </div>
                    </div>
                    <!-- <div
                      style="
                        width: 100%;
                        margin-top: calc(98vw * 0.08125);
                        height: 1px;
                        background: var(--unnamed, #000);
                      "
                    ></div> -->
                    <div class="parting-line"></div>
                  </div>
                </el-col>
              </el-row>

              <!-- Page 2 -->
              <el-row class="page" style="padding-top: calc(98vw * 0.052083333333333336)">
                <!-- 3 -->
                <el-col :span="24" class="part">
                  <div
                    class="part-bg"
                    style="
                      background-image: url('/assets/images/3.png');
                      background-size: calc(98vw * 0.10520833333333333) calc(98vw * 0.10520833333333333);
                    "
                  >
                    <div style="display: block; text-align: left">
                      <div>
                        <span class="part-title">{{ t("data_overview.title") }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="part-detail">
                    <el-row>
                      <!-- 心率 -->
                      <el-col :span="6">
                        <div class="overview-item">
                          <span></span>
                          <br />
                          <span>{{ t("data_overview.heartRate") }}</span>
                          <br/ >
                          <span>{{ diagram.hr.data.avg }}</span><span>bpm</span>
                        </div>
                      </el-col>
                      <!-- 和谐时长 -->
                      <el-col :span="6">
                        <div class="overview-item">
                          <span></span>
                          <br />
                          <span>{{ t("data_overview.coherence") }}</span>
                          <br/ >
                          <span>{{ report.coherenceDuration }}</span><span>{{ t("unit.min") }}</span>
                        </div>
                      </el-col>
                      <!-- 放松时间 -->
                      <el-col :span="6">
                        <div class="overview-item">
                          <span></span>
                          <br />
                          <span>{{ t("data_overview.relaxation_time") }}</span>
                          <br/ >
                          <span>{{ report.reportDuration }}</span><span>{{ t("unit.min") }}</span>
                        </div>
                      </el-col>
                      <!-- 放松度 -->
                      <el-col :span="6" v-show="report.relaxationEnable">
                        <div class="overview-item">
                          <span></span>
                          <br />
                          <span>{{ t("data_overview.relaxation") }}</span>
                          <br/ >
                          <span>{{ report.relaxationAvg }}</span><span>{{ report.relaxationLevel }}</span>
                        </div>
                      </el-col>
                      <!-- 心率变异性 -->
                      <el-col :span="6">
                        <div class="overview-item">
                          <span></span>
                          <br />
                          <span>{{ t("data_overview.hrv") }}</span>
                          <br/ >
                          <span>{{ report.hrvAvg }}</span><span>ms</span>
                        </div>
                      </el-col>
                      <!-- 压力水平 -->
                      <el-col :span="6">
                        <div class="overview-item">
                          <span></span>
                          <br />
                          <span>{{ t("data_overview.pressure") }}</span>
                          <br/ >
                          <span>{{ report.pressureAvg }}</span><span>{{ report.pressureLevel }}</span>
                        </div>
                      </el-col>
                      <!-- 专注度 -->
                      <el-col :span="6" v-show="report.attentionEnable">
                        <div class="overview-item">
                          <span></span>
                          <br />
                          <span>{{ t("data_overview.attention") }}</span>
                          <br/ >
                          <span>{{ report.attentionAvg }}</span><span>{{ report.attentionLevel }}</span>
                        </div>
                      </el-col>
                      <!-- 心流时长 -->
                      <el-col :span="6" v-show="report.flowEnable">
                        <div class="overview-item">
                          <span></span>
                          <br />
                          <span>{{ t("data_overview.flow_time") }}</span>
                          <br/ >
                          <span>{{ report.flowDuration }}</span><span>分钟</span>
                        </div>
                      </el-col>
                      <!-- 脑波节律 -->
                      <el-col :span="24" v-show="report.brainwaveEnable">
                        <div class="overview-item">
                          <span>Brainwave Rhythm</span>
                          <br />
                          <span>{{ t("brainwaveRhythm.title") }}</span>
                          <br/ >
                          <span style="font-size: calc(98vw * 0.03333333333333333)"
                            >α{{ report.alphaAvg }}% β{{ report.betaAvg }}% θ{{ report.thetaAvg }}% γ{{ report.gammaAvg
                            }}% δ{{ report.deltaAvg }}%</span
                          >
                        </div>
                      </el-col>
                      <!-- 专注度 -->
                      <el-col :span="6" v-show="report.rrEnable">
                        <div class="overview-item">
                          <span>Respiration Rate</span>
                          <br />
                          <span>{{ t("respiratoryRate.title") }}</span>
                          <br/ >
                          <span>{{ report.rrAvg }}</span><span>次/分</span>
                        </div>
                      </el-col>
                    </el-row>

                    <div class="parting-line"></div>
                  </div>
                </el-col>

                <!-- 4 -->
                <el-col :span="24" class="part" style="margin-top: 0">
                  <div
                    class="part-bg"
                    style="
                      background-image: url('/assets/images/4.svg');
                      background-size: calc(98vw * 0.10520833333333333) calc(98vw * 0.10520833333333333);
                    "
                  >
                    <div style="display: block; text-align: left">
                      <div>
                        <span class="part-title">{{ t("detailed_report") }}</span>
                      </div>

                    </div>
                  </div>
                </el-col>

                <!-- HR Detail -->
                <el-col v-show="report.hrEnable" :span="24" style="display: flex; width: 100%">
                  <!-- Title -->
                  <div class="report-detail">
                    <div class="report-detail-container">
                      <div
                        class="report-detail-icon"
                        style="background-image: url('/assets/images/report/heart.svg')"
                      ></div>
                      <div style="text-align: left">
                        <span class="report-detail-title">{{ t("data_overview.heartRate") }}</span>
                      </div>
                    </div>
                  </div>
                  <!-- Content -->
                  <div class="report-detail-content">
                    <div style="display: flex">
                      <div style="width: calc(98vw * 0.7); display: block">
                        <div>
                          <span class="report-detail-content-tips">{{ report.hrBriefComment }}</span>
                        </div>
                        <div>
                          <div style="display: flex; justify-content: left; align-items: center; text-align: left">
                            <div
                              class="diagram-legend-color"
                              style="opacity: 0.25; background: var(--unnamed, #cc1f3f)"
                            ></div>
                            <span class="diagram-legend">{{t("heartRate.level_good")}}</span>

                            <div
                              class="diagram-legend-color"
                              style="opacity: 0.5; background: var(--unnamed, #cc1f3f)"
                            ></div>
                            <span class="diagram-legend">{{t("heartRate.level_very_good")}}</span>

                            <div
                              class="diagram-legend-color"
                              style="opacity: 1; background: var(--unnamed, #cc1f3f)"
                            ></div>
                            <span class="diagram-legend">{{t("heartRate.level_higher")}}</span>
                          </div>
                          <div class="diagram-measure-bg">
                            <v-chart
                              id="hrMeasureChart"
                              ref="hrMeasureChart"
                              :option="diagram.hr.view.overview.option"
                              :manual-update="true"
                              autoresize
                            >
                            </v-chart>
                          </div>
                        </div>
                      </div>
                      <div class="report-detail-metric">
                        <div class="report-detail-metric-container">
                          <span class="report-detail-metric-title">{{t("average")}}</span>
                          <br />
                          <span class="report-detail-metric-value">{{ diagram.hr.data.avg }}</span
                          ><span class="report-detail-metric-unit">bpm</span>
                        </div>
                      </div>
                    </div>

                    <div class="diagram-main-title">
                      <span>{{t("trend_changes")}}</span>
                    </div>

                    <div class="diagram-trend-bg">
                      <v-chart
                        id="hrChart"
                        ref="hrChart"
                        :option="diagram.hr.view.trend.option"
                        :manual-update="true"
                        autoresize
                      >
                      </v-chart>
                    </div>

                    <div class="data-declaration-title">
                      <span>{{t("data_description")}}</span>
                    </div>

                    <div class="data-declaration-content">
                      <span
                        >{{t("heartRate.data_description")}}
                        <br />{{t("heartRate.level_description")}}</span
                      >
                    </div>

                    <div class="parting-line"></div>
                  </div>
                </el-col>
              </el-row>

              <el-row v-if="currentDevice !== 'Cushion'">
                <el-col>
                  <!-- Page 3 -->
                  <el-row class="page" style="padding-top: calc(98vw * 0.052083333333333336)">
                    <!-- HRV Detail -->
                    <el-col v-show="report.hrvEnable" :span="24" style="display: flex">
                      <!-- Title -->
                      <div class="report-detail">
                        <div class="report-detail-container">
                          <div
                            class="report-detail-icon"
                            style="background-image: url('/assets/images/report/hrv.svg')"
                          ></div>
                          <div style="text-align: left">
                            <span class="report-detail-title">{{ t("data_overview.hrv") }}</span>
                          </div>
                        </div>
                      </div>
                      <!-- Content -->
                      <div class="report-detail-content">
                        <div style="display: flex">
                          <div style="width: calc(98vw * 0.7); display: block">
                            <div>
                              <span class="report-detail-content-tips">{{ report.hrvBriefComment }}</span>
                            </div>
                            <div>
                              <div style="display: flex; justify-content: left; align-items: center; text-align: left">
                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.25; background: var(--unnamed, #e4951e)"
                                ></div>
                                <span class="diagram-legend">{{t("hrv.level_general")}}</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.5; background: var(--unnamed, #e4951e)"
                                ></div>
                                <span class="diagram-legend">{{t("hrv.level_good")}}</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 1; background: var(--unnamed, #e4951e)"
                                ></div>
                                <span class="diagram-legend">{{t("hrv.level_very_good")}}</span>
                              </div>
                              <div class="diagram-measure-bg">
                                <v-chart
                                  id="hrvMeasureChart"
                                  ref="hrvMeasureChart"
                                  :option="diagram.hrv.view.overview.option"
                                  :manual-update="true"
                                  autoresize
                                >
                                </v-chart>
                              </div>
                            </div>
                          </div>
                          <div class="report-detail-metric">
                            <div class="report-detail-metric-container">
                              <span class="report-detail-metric-title">{{t("average")}}</span>
                              <br />
                              <span class="report-detail-metric-value" style="color: #e4951e">{{ report.hrvAvg }}</span
                              ><span class="report-detail-metric-unit">ms</span>
                            </div>
                          </div>
                        </div>

                        <div class="diagram-main-title">
                          <span>{{t("trend_changes")}}</span>
                        </div>

                        <div class="diagram-trend-bg">
                          <v-chart
                            id="hrvChart"
                            ref="hrvChart"
                            :option="diagram.hrv.view.trend.option"
                            :manual-update="true"
                            autoresize
                          >
                          </v-chart>
                        </div>

                        <div class="data-declaration-title">
                          <span>{{t("data_description")}}</span>
                        </div>

                        <div class="data-declaration-content">
                          <span
                            >{{t("hrv.data_description")}}<br />{{t("hrv.level_description")}}</span
                          >
                        </div>

                        <div class="parting-line"></div>
                      </div>
                    </el-col>

                    <!-- Attention Detail -->
                    <el-col v-show="report.attentionEnable" :span="24" style="display: flex">
                      <!-- Title -->
                      <div class="report-detail">
                        <div class="report-detail-container">
                          <div
                            class="report-detail-icon"
                            style="background-image: url('/assets/images/report/attention.svg')"
                          ></div>
                          <div style="text-align: left">
                            <span class="report-detail-title">{{ t("data_overview.attention") }}</span>
                          </div>
                        </div>
                      </div>
                      <!-- Content -->
                      <div class="report-detail-content">
                        <div style="display: flex">
                          <div style="width: calc(98vw * 0.7); display: block">
                            <div>
                              <span class="report-detail-content-tips">{{ report.attentionBriefComment }}</span>
                            </div>
                            <div>
                              <div style="display: flex; justify-content: left; align-items: center; text-align: left">
                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.25; background: var(--unnamed, #346fe2)"
                                ></div>
                                <span class="diagram-legend">{{t("attention.level_general")}}</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.5; background: var(--unnamed, #346fe2)"
                                ></div>
                                <span class="diagram-legend">{{t("attention.level_good")}}</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 1; background: var(--unnamed, #346fe2)"
                                ></div>
                                <span class="diagram-legend">{{t("attention.level_very_good")}}</span>
                              </div>
                              <div class="diagram-measure-bg">
                                <v-chart
                                  id="attentionMeasureChart"
                                  ref="attentionMeasureChart"
                                  :option="diagram.attention.view.overview.option"
                                  :manual-update="true"
                                  autoresize
                                >
                                </v-chart>
                              </div>
                            </div>
                          </div>
                          <div class="report-detail-metric">
                            <div class="report-detail-metric-container">
                              <span class="report-detail-metric-title">{{t("average")}}</span>
                              <br />
                              <span class="report-detail-metric-value" style="color: #346fe2"
                                >{{ report.attentionAvg }}</span
                              >
                            </div>
                          </div>
                        </div>

                        <div class="diagram-main-title">
                          <span>{{t("trend_changes")}}</span>
                        </div>

                        <div class="diagram-trend-bg">
                          <v-chart
                            id="attentionChart"
                            ref="attentionChart"
                            :option="diagram.attention.view.trend.option"
                            :manual-update="true"
                            autoresize
                          >
                          </v-chart>
                        </div>

                        <div class="data-declaration-title">
                          <span>{{t("data_description")}}</span>
                        </div>

                        <div class="data-declaration-content">
                          <span
                            >{{t("attention.data_description")}}
                            <br />{{t("attention.level_description")}}</span
                          >
                        </div>

                        <div class="parting-line"></div>
                      </div>
                    </el-col>
                  </el-row>

                  <!-- Page 4 -->
                  <el-row class="page" style="padding-top: calc(98vw * 0.052083333333333336)">
                    <!-- Relaxation Detail -->
                    <el-col v-show="report.relaxationEnable" :span="24" style="display: flex">
                      <!-- Title -->
                      <div class="report-detail">
                        <div class="report-detail-container">
                          <div
                            class="report-detail-icon"
                            style="background-image: url('/assets/images/report/relaxtion.svg')"
                          ></div>
                          <div style="text-align: left">
                            <span class="report-detail-title">{{ t("data_overview.relaxation") }}</span>
                          </div>
                        </div>
                      </div>
                      <!-- Content -->
                      <div class="report-detail-content">
                        <div style="display: flex">
                          <div style="width: calc(98vw * 0.7); display: block">
                            <div>
                              <span class="report-detail-content-tips">{{ report.relaxationBriefComment }}</span>
                            </div>
                            <div>
                              <div style="display: flex; justify-content: left; align-items: center; text-align: left">
                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.25; background: var(--unnamed, #4bbd62)"
                                ></div>
                                <span class="diagram-legend">{{t("relaxation.level_general")}}</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.5; background: var(--unnamed, #4bbd62)"
                                ></div>
                                <span class="diagram-legend">{{t("relaxation.level_good")}}</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 1; background: var(--unnamed, #4bbd62)"
                                ></div>
                                <span class="diagram-legend">{{t("relaxation.level_very_good")}}</span>
                              </div>
                              <div class="diagram-measure-bg">
                                <v-chart
                                  id="relaxationMeasureChart"
                                  ref="relaxationMeasureChart"
                                  :option="diagram.relaxation.view.overview.option"
                                  :manual-update="true"
                                  autoresize
                                >
                                </v-chart>
                              </div>
                            </div>
                          </div>
                          <div class="report-detail-metric">
                            <div class="report-detail-metric-container">
                              <span class="report-detail-metric-title">{{t("average")}}</span>
                              <br />
                              <span class="report-detail-metric-value" style="color: #4bbd62"
                                >{{ report.relaxationAvg }}</span
                              >
                            </div>
                          </div>
                        </div>

                        <div class="diagram-main-title">
                          <span>{{t("trend_changes")}}</span>
                        </div>

                        <div class="diagram-trend-bg">
                          <v-chart
                            id="relaxationChart"
                            ref="relaxationChart"
                            :option="diagram.relaxation.view.trend.option"
                            :manual-update="true"
                            autoresize
                          >
                          </v-chart>
                        </div>

                        <div class="data-declaration-title">
                          <span>{{t("data_description")}}</span>
                        </div>

                        <div class="data-declaration-content">
                          <span
                            >{{t("relaxation.data_description")}}
                            <br />{{t("relaxation.level_description")}}</span
                          >
                        </div>

                        <div class="parting-line"></div>
                      </div>
                    </el-col>

                    <!-- Pressure Detail -->
                    <el-col v-show="report.pressureEnable" :span="24" style="display: flex">
                      <!-- Title -->
                      <div class="report-detail">
                        <div class="report-detail-container">
                          <div
                            class="report-detail-icon"
                            style="background-image: url('/assets/images/report/stress.svg')"
                          ></div>
                          <div style="text-align: left">
                            <span class="report-detail-title">{{ t("data_overview.pressure") }}</span>
                          </div>
                        </div>
                      </div>
                      <!-- Content -->
                      <div class="report-detail-content">
                        <div style="display: flex">
                          <div style="width: calc(98vw * 0.7); display: block">
                            <div>
                              <span class="report-detail-content-tips">{{ report.pressureBriefComment }}</span>
                            </div>
                            <div>
                              <div style="display: flex; justify-content: left; align-items: center; text-align: left">
                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.25; background: var(--unnamed, #cc1f3f)"
                                ></div>
                                <span class="diagram-legend">{{t("pressure.level_low")}}</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.5; background: var(--unnamed, #cc1f3f)"
                                ></div>
                                <span class="diagram-legend">{{t("pressure.level_normal")}}</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.75; background: var(--unnamed, #cc1f3f)"
                                ></div>
                                <span class="diagram-legend">{{t("pressure.level_higher")}}</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 1; background: var(--unnamed, #cc1f3f)"
                                ></div>
                                <span class="diagram-legend">{{t("pressure.level_high")}}</span>
                              </div>
                              <div class="diagram-measure-bg">
                                <v-chart
                                  id="pressureMeasureChart"
                                  ref="pressureMeasureChart"
                                  :option="diagram.pressure.view.overview.option"
                                  :manual-update="true"
                                  autoresize
                                >
                                </v-chart>
                              </div>
                            </div>
                          </div>
                          <div class="report-detail-metric">
                            <div class="report-detail-metric-container">
                              <span class="report-detail-metric-title">{{t("average")}}</span>
                              <br />
                              <span class="report-detail-metric-value" style="color: #cc1f3f"
                                >{{ report.pressureAvg }}</span
                              >
                            </div>
                          </div>
                        </div>

                        <div class="diagram-main-title">
                          <span>{{t("trend_changes")}}</span>
                        </div>

                        <div class="diagram-trend-bg">
                          <v-chart
                            id="pressureChart"
                            ref="pressureChart"
                            :option="diagram.pressure.view.trend.option"
                            :manual-update="true"
                            autoresize
                          >
                          </v-chart>
                        </div>

                        <div class="data-declaration-title">
                          <span>{{t("data_description")}}</span>
                        </div>

                        <div class="data-declaration-content">
                          <span
                            >{{t("pressure.data_description")}}
                            <br />{{t("pressure.level_description")}}</span
                          >
                        </div>

                        <div class="parting-line"></div>
                      </div>
                    </el-col>
                  </el-row>

                  <!-- Page 5 -->
                  <el-row class="page" style="padding-top: calc(98vw * 0.052083333333333336)">
                    <!-- Coherence Detail -->
                    <el-col v-show="report.coherenceEnable" :span="24" style="display: flex">
                      <!-- Title -->
                      <div class="report-detail">
                        <div class="report-detail-container">
                          <div
                            class="report-detail-icon"
                            style="background-image: url('/assets/images/report/coherence.svg')"
                          ></div>
                          <div style="text-align: left">
                            <span class="report-detail-title">{{ t("data_overview.coherence") }}</span>
                          </div>
                        </div>
                      </div>
                      <!-- Content -->
                      <div class="report-detail-content">
                        <div style="display: flex">
                          <div style="width: calc(98vw * 0.7); display: block">
                            <div>
                              <span class="report-detail-content-tips">{{ report.coherenceBriefComment }}</span>
                            </div>
                            <div>
                              <div
                                style="
                                  display: flex;
                                  width: calc(98vw * 0.225);
                                  height: calc(98vw * 0.018229166666666668);
                                  margin-top: calc(98vw * 0.019791666666666666);
                                  margin-bottom: calc(98vw * 0.005208333333333333);
                                "
                              >
                                <div class="diagram-measure-proportion-title">
                                  <span>{{t("coherence.incoherent")}}{{ 100-report.coherenceProportion }}%</span>
                                </div>
                                <div class="diagram-measure-proportion-title" style="text-align: right">
                                  <span>{{t("coherence.coherent")}}{{ report.coherenceProportion }}%</span>
                                </div>
                              </div>
                              <div
                                style="
                                  width: calc(98vw * 0.222);
                                  height: calc(98vw * 0.0182291667);
                                  background-size: calc(98vw * 0.222) calc(98vw * 0.0182291667);
                                "
                              >
                                <v-chart
                                  id="coherenceMeasureChart"
                                  ref="coherenceMeasureChart"
                                  :option="diagram.coherence.view.overview.option"
                                  :manual-update="true"
                                  autoresize
                                >
                                </v-chart>
                              </div>
                            </div>
                          </div>
                          <div class="report-detail-metric">
                            <div class="report-detail-metric-container">
                              <span class="report-detail-metric-title">{{t("coherence.time")}}</span>
                              <br />
                              <span class="report-detail-metric-value" style="color: #4bbd62"
                                >{{ report.coherenceDuration }}</span
                              ><span class="report-detail-metric-unit">{{t("unit.min")}}</span>
                            </div>
                          </div>
                        </div>

                        <div class="diagram-main-title">
                          <span>{{t("trend_changes")}}</span>
                        </div>

                        <div class="diagram-trend-bg">
                          <v-chart
                            ref="coherenceChart"
                            id="coherenceChart"
                            :option="diagram.coherence.view.trend.option"
                            :manual-update="true"
                            autoresize
                          >
                          </v-chart>
                        </div>

                        <div class="data-declaration-title">
                          <span>{{t("data_description")}}</span>
                        </div>

                        <div class="data-declaration-content">
                          <span
                            >{{t("coherence.data_description")}}
                            <br />{{t("coherence.level_description")}}</span
                          >
                        </div>

                        <div class="parting-line"></div>
                      </div>
                    </el-col>

                    <!-- Brainwave Rhythm Detail -->
                    <el-col v-show="report.brEnable" :span="24" style="display: flex">
                      <!-- Title -->
                      <div class="report-detail">
                        <div class="report-detail-container">
                          <div
                            class="report-detail-icon"
                            style="background-image: url('/assets/images/report/brain.svg')"
                          ></div>
                          <div style="text-align: left">
                            <span class="report-detail-title">{{ t("data_overview.brainwave_rhythm") }}</span>
                          </div>
                        </div>
                      </div>
                      <!-- Content -->
                      <div class="report-detail-content">
                        <div style="display: flex">
                          <div style="width: calc(98vw * 0.6); display: block">
                            <div>
                              <span class="report-detail-content-tips">{{ report.brBriefComment }}</span>
                            </div>
                            <div>
                              <div
                                style="
                                  display: flex;
                                  justify-content: left;
                                  align-items: center;
                                  text-align: left;
                                  margin-top: calc(98vw * 0.0125);
                                  margin-bottom: calc(98vw * 0.0125);
                                "
                              >
                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 1; background: var(--unnamed, #e4951e)"
                                ></div>
                                <span class="diagram-legend">α</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 1; background: var(--unnamed, #5a48c5)"
                                ></div>
                                <span class="diagram-legend">β</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 1; background: var(--unnamed, #4bbd62)"
                                ></div>
                                <span class="diagram-legend">θ</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 1; background: var(--unnamed, #cc1f3f)"
                                ></div>
                                <span class="diagram-legend">γ</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 1; background: var(--unnamed, #346fe2)"
                                ></div>
                                <span class="diagram-legend">δ</span>
                              </div>
                              <div
                                style="
                                  width: calc(98vw * 0.222);
                                  height: calc(98vw * 0.0182291667);
                                  background-size: calc(98vw * 0.222) calc(98vw * 0.0182291667);
                                "
                              >
                                <v-chart
                                  id="brainwaveMeasureChart"
                                  ref="brainwaveMeasureChart"
                                  :option="diagram.brainwave.view.overview.option"
                                  :manual-update="true"
                                  autoresize
                                >
                                </v-chart>
                              </div>
                            </div>
                          </div>
                          <div class="report-detail-metric">
                            <div class="report-detail-metric-container" style="width: 100%; text-align: right">
                              <span class="report-detail-metric-title">{{t("brainwaveRhythm.ratio")}}</span>
                              <br />
                              <span
                                class="report-detail-metric-value"
                                style="color: #346fe2; font-size: calc(98vw * 0.028125)"
                                >α{{ report.alphaAvg }}% β{{ report.betaAvg }}% θ{{ report.thetaAvg }}% γ{{
                                report.gammaAvg }}% δ{{ report.deltaAvg }}%</span
                              >
                            </div>
                          </div>
                        </div>

                        <div class="diagram-main-title">
                          <span>{{t("trend_changes")}}</span>
                        </div>

                        <div class="diagram-trend-bg">
                          <v-chart
                            id="brainwaveChart"
                            ref="brainwaveChart"
                            :option="diagram.brainwave.view.trend.option"
                            :manual-update="true"
                            autoresize
                          >
                          </v-chart>
                        </div>

                        <div class="data-declaration-title">
                          <span>{{t("data_description")}}</span>
                        </div>

                        <div class="data-declaration-content">
                          <span
                            >{{t("brainwaveRhythm.data_description")}}</span
                          >
                        </div>

                        <div class="parting-line"></div>
                      </div>
                    </el-col>
                  </el-row>

                  <!-- Page 6 -->
                  <el-row class="page" style="padding-top: calc(98vw * 0.052083333333333336)">
                    <!-- Flow Detail -->
                    <el-col v-show="report.flowEnable" :span="24" style="display: flex">
                      <!-- Title -->
                      <div class="report-detail">
                        <div class="report-detail-container">
                          <div
                            class="report-detail-icon"
                            style="background-image: url('/assets/images/report/flow.svg')"
                          ></div>
                          <div style="text-align: left">
                            <span class="report-detail-title">{{ t("data_overview.flow_time") }}</span>
                          </div>
                        </div>
                      </div>
                      <!-- Content -->
                      <div class="report-detail-content">
                        <div style="display: flex">
                          <div style="width: calc(98vw * 0.7); display: block">
                            <div>
                              <span class="report-detail-content-tips">{{ report.flowBriefComment }}</span>
                            </div>
                            <div>
                              <div
                                style="
                                  display: flex;
                                  width: calc(98vw * 0.225);
                                  height: calc(98vw * 0.018229166666666668);
                                  margin-top: calc(98vw * 0.019791666666666666);
                                  margin-bottom: calc(98vw * 0.005208333333333333);
                                "
                              >
                                <div class="diagram-measure-proportion-title">
                                  <span>{{t("flow.active")}}{{ 100-report.flowProportion }}%</span>
                                </div>
                                <div class="diagram-measure-proportion-title" style="text-align: right">
                                  <span>{{t("flow.flow")}}{{ report.flowProportion }}%</span>
                                </div>
                              </div>
                              <div
                                style="
                                  width: calc(98vw * 0.222);
                                  height: calc(98vw * 0.0182291667);
                                  background-size: calc(98vw * 0.222) calc(98vw * 0.0182291667);
                                "
                              >
                                <v-chart
                                  id="flowMeasureChart"
                                  ref="flowMeasureChart"
                                  :option="diagram.flow.view.overview.option"
                                  :manual-update="true"
                                  autoresize
                                >
                                </v-chart>
                              </div>
                            </div>
                          </div>
                          <div class="report-detail-metric">
                            <div class="report-detail-metric-container">
                              <span class="report-detail-metric-title">{{t("flow.time")}}</span>
                              <br />
                              <span class="report-detail-metric-value" style="color: #5a48c5"
                                >{{ report.flowDuration }}</span
                              ><span class="report-detail-metric-unit">{{t("unit.min")}}</span>
                            </div>
                          </div>
                        </div>

                        <div class="diagram-main-title">
                          <span>{{t("trend_changes")}}</span>
                        </div>

                        <div class="diagram-trend-bg">
                          <v-chart
                            id="flowChart"
                            ref="flowChart"
                            :option="diagram.flow.view.trend.option"
                            :manual-update="true"
                            autoresize
                          >
                          </v-chart>
                          <div style="position: relative; top: 5%; left: calc(100vw * 0.015625)">
                            <span
                              style="
                                color: var(--unnamed, #666);

                                /* 标注2 */
                                font-family: PingFang SC, Roboto, Segoe UI, Hiragino Sans GB, Helvetica neue, Noto Sans,
                                  Helvetica, Microsoft Sans Serif, Arial, WenQuanYi Micro Hei, sans-serif;
                                font-size: calc(100vw * 0.0104166667);
                                font-style: normal;
                                font-weight: 600;
                                line-height: normal;
                              "
                              >{{t("flow.active")}}</span
                            >
                          </div>
                          <div style="position: relative; top: 45%; left: calc(100vw * 0.015625)">
                            <span
                              style="
                                color: var(--unnamed, #666);

                                /* 标注2 */
                                font-family: PingFang SC, Roboto, Segoe UI, Hiragino Sans GB, Helvetica neue, Noto Sans,
                                  Helvetica, Microsoft Sans Serif, Arial, WenQuanYi Micro Hei, sans-serif;
                                font-size: calc(100vw * 0.0104166667);
                                font-style: normal;
                                font-weight: 600;
                                line-height: normal;
                              "
                              >{{t("flow.flow")}}</span
                            >
                          </div>
                        </div>

                        <div class="data-declaration-title">
                          <span>{{t("data_description")}}</span>
                        </div>

                        <div class="data-declaration-content">
                          <span
                            >{{t("flow.data_description")}}

                            <br />{{t("flow.level_description")}}</span
                          >
                        </div>

                        <div class="parting-line"></div>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>

              <el-row v-if="currentDevice === 'Cushion'">
                <el-col>
                  <!-- Page 3 -->
                  <el-row class="page" style="padding-top: calc(98vw * 0.052083333333333336)">
                    <!-- HRV Detail -->
                    <el-col v-show="report.hrvEnable" :span="24" style="display: flex">
                      <!-- Title -->
                      <div class="report-detail">
                        <div class="report-detail-container">
                          <div
                            class="report-detail-icon"
                            style="background-image: url('/assets/images/report/hrv.svg')"
                          ></div>
                          <div style="text-align: left">
                            <span class="report-detail-title">心率变异性</span>
                            <br />
                            <span class="report-detail-title-en">HRV</span>
                          </div>
                        </div>
                      </div>
                      <!-- Content -->
                      <div class="report-detail-content">
                        <div style="display: flex">
                          <div style="width: calc(98vw * 0.7); display: block">
                            <div>
                              <span class="report-detail-content-tips">{{ report.hrvBriefComment }}</span>
                            </div>
                            <div>
                              <div style="display: flex; justify-content: left; align-items: center; text-align: left">
                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.25; background: var(--unnamed, #e4951e)"
                                ></div>
                                <span class="diagram-legend">{{t("hrv.level_general")}}</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.5; background: var(--unnamed, #e4951e)"
                                ></div>
                                <span class="diagram-legend">{{t("hrv.level_good")}}</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 1; background: var(--unnamed, #e4951e)"
                                ></div>
                                <span class="diagram-legend">{{t("hrv.level_very_good")}}</span>
                              </div>
                              <div class="diagram-measure-bg">
                                <v-chart
                                  id="hrvMeasureChart"
                                  ref="hrvMeasureChart"
                                  :option="diagram.hrv.view.overview.option"
                                  :manual-update="true"
                                  autoresize
                                >
                                </v-chart>
                              </div>
                            </div>
                          </div>
                          <div class="report-detail-metric">
                            <div class="report-detail-metric-container">
                              <span class="report-detail-metric-title">{{t("average")}}</span>
                              <br />
                              <span class="report-detail-metric-value" style="color: #e4951e">{{ report.hrvAvg }}</span
                              ><span class="report-detail-metric-unit">ms</span>
                            </div>
                          </div>
                        </div>

                        <div class="diagram-main-title">
                          <span>{{t("trend_changes")}}</span>
                        </div>

                        <div class="diagram-trend-bg">
                          <v-chart
                            id="hrvChart"
                            ref="hrvChart"
                            :option="diagram.hrv.view.trend.option"
                            :manual-update="true"
                            autoresize
                          >
                          </v-chart>
                        </div>

                        <div class="data-declaration-title">
                          <span>{{t("data_description")}}</span>
                        </div>

                        <div class="data-declaration-content">
                          <span
                            >{{t("hrv.data_description")}} <br />{{t("hrv.level_description")}}</span
                          >
                        </div>

                        <div class="parting-line"></div>
                      </div>
                    </el-col>

                    <!-- Pressure Detail -->
                    <el-col v-show="report.pressureEnable" :span="24" style="display: flex">
                      <!-- Title -->
                      <div class="report-detail">
                        <div class="report-detail-container">
                          <div
                            class="report-detail-icon"
                            style="background-image: url('/assets/images/report/stress.svg')"
                          ></div>
                          <div style="text-align: left">
                            <span class="report-detail-title">压力水平</span>
                            <br />
                            <span class="report-detail-title-en">Pressure</span>
                          </div>
                        </div>
                      </div>
                      <!-- Content -->
                      <div class="report-detail-content">
                        <div style="display: flex">
                          <div style="width: calc(98vw * 0.7); display: block">
                            <div>
                              <span class="report-detail-content-tips">{{ report.pressureBriefComment }}</span>
                            </div>
                            <div>
                              <div style="display: flex; justify-content: left; align-items: center; text-align: left">
                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.25; background: var(--unnamed, #cc1f3f)"
                                ></div>
                                <span class="diagram-legend">低</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.5; background: var(--unnamed, #cc1f3f)"
                                ></div>
                                <span class="diagram-legend">正常</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.75; background: var(--unnamed, #cc1f3f)"
                                ></div>
                                <span class="diagram-legend">较高</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 1; background: var(--unnamed, #cc1f3f)"
                                ></div>
                                <span class="diagram-legend">高</span>
                              </div>
                              <div class="diagram-measure-bg">
                                <v-chart
                                  id="pressureMeasureChart"
                                  ref="pressureMeasureChart"
                                  :option="diagram.pressure.view.overview.option"
                                  :manual-update="true"
                                  autoresize
                                >
                                </v-chart>
                              </div>
                            </div>
                          </div>
                          <div class="report-detail-metric">
                            <div class="report-detail-metric-container">
                              <span class="report-detail-metric-title">{{t("average")}}</span>
                              <br />
                              <span class="report-detail-metric-value" style="color: #cc1f3f"
                                >{{ report.pressureAvg }}</span
                              >
                            </div>
                          </div>
                        </div>

                        <div class="diagram-main-title">
                          <span>{{t("trend_changes")}}</span>
                        </div>

                        <div class="diagram-trend-bg">
                          <v-chart
                            id="pressureChart"
                            ref="pressureChart"
                            :option="diagram.pressure.view.trend.option"
                            :manual-update="true"
                            autoresize
                          >
                          </v-chart>
                        </div>

                        <div class="data-declaration-title">
                          <span>{{t("data_description")}}</span>
                        </div>

                        <div class="data-declaration-content">
                          <span
                            >身体的健康和压力水平有密切关系。如果长期处于高压力水平下，会增加患慢性病的风险。压力水平高意味着你的压力很大，而低则意味着你的压力较小。当你进行高强度工作时，你的压力水平会升高，但如果你进行深呼吸等放松练习，你的压力水平则会降低。坚持运动可以帮助你改善压力水平，但如果你饮酒、生病或睡眠不足，你的压力水平可能会比正常状态更高。通过放松训练可以降低心率、增加HRV、降低交感神经系统的紧张程度，从而降低压力水平。压力水平越低越好。
                            <br />低：0-25，正常：25-50，较高：50-75，高：75-100</span
                          >
                        </div>

                        <div class="parting-line"></div>
                      </div>
                    </el-col>
                  </el-row>

                  <!-- Page 4 -->
                  <el-row class="page" style="padding-top: calc(98vw * 0.052083333333333336)">
                    <!-- Coherence Detail -->
                    <el-col v-show="report.coherenceEnable" :span="24" style="display: flex">
                      <!-- Title -->
                      <div class="report-detail">
                        <div class="report-detail-container">
                          <div
                            class="report-detail-icon"
                            style="background-image: url('/assets/images/report/coherence.svg')"
                          ></div>
                          <div style="text-align: left">
                            <span class="report-detail-title">和谐时长</span>
                            <br />
                            <span class="report-detail-title-en">Coherence</span>
                          </div>
                        </div>
                      </div>
                      <!-- Content -->
                      <div class="report-detail-content">
                        <div style="display: flex">
                          <div style="width: calc(98vw * 0.7); display: block">
                            <div>
                              <span class="report-detail-content-tips">{{ report.coherenceBriefComment }}</span>
                            </div>
                            <div>
                              <div
                                style="
                                  display: flex;
                                  width: calc(98vw * 0.225);
                                  height: calc(98vw * 0.018229166666666668);
                                  margin-top: calc(98vw * 0.019791666666666666);
                                  margin-bottom: calc(98vw * 0.005208333333333333);
                                "
                              >
                                <div class="diagram-measure-proportion-title">
                                  <span>非和谐{{ 100-report.coherenceProportion }}%</span>
                                </div>
                                <div class="diagram-measure-proportion-title" style="text-align: right">
                                  <span>和谐{{ report.coherenceProportion }}%</span>
                                </div>
                              </div>
                              <div
                                style="
                                  width: calc(98vw * 0.222);
                                  height: calc(98vw * 0.0182291667);
                                  background-size: calc(98vw * 0.222) calc(98vw * 0.0182291667);
                                "
                              >
                                <v-chart
                                  id="coherenceMeasureChart"
                                  ref="coherenceMeasureChart"
                                  :option="diagram.coherence.view.overview.option"
                                  :manual-update="true"
                                  autoresize
                                >
                                </v-chart>
                              </div>
                            </div>
                          </div>
                          <div class="report-detail-metric">
                            <div class="report-detail-metric-container">
                              <span class="report-detail-metric-title">和谐时长</span>
                              <br />
                              <span class="report-detail-metric-value" style="color: #4bbd62"
                                >{{ report.coherenceDuration }}</span
                              ><span class="report-detail-metric-unit">分钟</span>
                            </div>
                          </div>
                        </div>

                        <div class="diagram-main-title">
                          <span>{{t("trend_changes")}}</span>
                        </div>

                        <div class="diagram-trend-bg">
                          <v-chart
                            ref="coherenceChart"
                            id="coherenceChart"
                            :option="diagram.coherence.view.trend.option"
                            :manual-update="true"
                            autoresize
                          >
                          </v-chart>
                        </div>

                        <div class="data-declaration-title">
                          <span>{{t("data_description")}}</span>
                        </div>

                        <div class="data-declaration-content">
                          <span
                            >红色：心率变化；绿色：达到和谐的心率区间。
                            在缓解压力的放松过程中，通过缓慢而规律的深呼吸，例如吸气5秒，呼气5秒，可以使心率变得更加有序和平稳。这种有序的心率变化模式可以让交感神经和副交感神经系统相互同步，达到和谐状态。进入和谐状态可以提高认知水平和反应速度，同时增强情绪稳定能力。和谐时长是进入和谐状态的时长，占比越高越好。
                            <br />偏低：0-10%，一般：10-30%，较高：30-60%，高：60-100%</span
                          >
                        </div>

                        <div class="parting-line"></div>
                      </div>
                    </el-col>
                    <!-- RR Detail -->
                    <el-col v-show="report.rrEnable" :span="24" style="display: flex; width: 100%">
                      <!-- Title -->
                      <div class="report-detail">
                        <div class="report-detail-container">
                          <div
                            class="report-detail-icon"
                            style="background-image: url('/assets/images/report/breath.svg')"
                          ></div>
                          <div style="text-align: left">
                            <span class="report-detail-title">呼吸率</span>
                            <br />
                            <span class="report-detail-title-en">Respiration rate</span>
                          </div>
                        </div>
                      </div>
                      <!-- Content -->
                      <div class="report-detail-content">
                        <div style="display: flex">
                          <div style="width: calc(98vw * 0.7); display: block">
                            <div>
                              <span class="report-detail-content-tips">{{ report.rrBriefComment }}</span>
                            </div>
                            <div>
                              <div style="display: flex; justify-content: left; align-items: center; text-align: left">
                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.25; background: var(--unnamed, #346fe2)"
                                ></div>
                                <span class="diagram-legend">很好</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.5; background: var(--unnamed, #346fe2)"
                                ></div>
                                <span class="diagram-legend">较好</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 0.75; background: var(--unnamed, #346fe2)"
                                ></div>
                                <span class="diagram-legend">正常</span>

                                <div
                                  class="diagram-legend-color"
                                  style="opacity: 1; background: var(--unnamed, #346fe2)"
                                ></div>
                                <span class="diagram-legend">较高</span>
                              </div>
                              <div class="diagram-measure-bg">
                                <v-chart
                                  id="rrMeasureChart"
                                  ref="rrMeasureChart"
                                  :option="diagram.rr.view.overview.option"
                                  :manual-update="true"
                                  autoresize
                                >
                                </v-chart>
                              </div>
                            </div>
                          </div>
                          <div class="report-detail-metric">
                            <div class="report-detail-metric-container">
                              <span class="report-detail-metric-title">{{t("average")}}</span>
                              <br />
                              <span class="report-detail-metric-value" style="color: #346fe2"
                                >{{ diagram.rr.data.avg }}</span
                              ><span class="report-detail-metric-unit">次/分</span>
                            </div>
                          </div>
                        </div>

                        <div class="diagram-main-title">
                          <span>{{t("trend_changes")}}</span>
                        </div>

                        <div class="diagram-trend-bg">
                          <v-chart
                            id="rrChart"
                            ref="rrChart"
                            :option="diagram.rr.view.trend.option"
                            :manual-update="true"
                            autoresize
                          >
                          </v-chart>
                        </div>

                        <div class="data-declaration-title">
                          <span>{{t("data_description")}}</span>
                        </div>

                        <div class="data-declaration-content">
                          <span
                            >呼吸率指的是一个人在一分钟内的呼吸次数，单位次/分钟。一个成年人在安静状态下的正常呼吸率大约为12到20次每分钟。当人体处于放松状态时，呼吸往往会变得更加缓慢和深长，这有助于降低压力水平和促进身心放松。练习呼吸控制技巧，如深呼吸或是瑜伽式的呼吸，可进一步助以减轻紧张感，改善身体的放松状态。适当放慢和深化呼吸节奏不仅可以增强自我调节情绪的能力，还可改善整体健康状态。
                            <br />很好: 2-8 次/分钟，较好: 8-14 次/分钟，正常: 14-20 次/分钟， 较高: 20-26 次/分钟</span
                          >
                        </div>

                        <div class="parting-line"></div>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-main>
          </el-container>
        </el-container>
      </el-container>
    </div>
    <script src="/assets/js/report/locale.js?ts=1702001667"></script>
    <script src="/assets/js/report/diagram/mock.js?ts=1702001667"></script>
    <script src="/assets/js/report/diagram/options.js?ts=1702001667"></script>
    <script src="/assets/js/report/diagram/init.js?ts=1702001667"></script>
    <script src="/assets/js/report/app.js?ts=1702001667"></script>
  </body>
</html>
