<!DOCTYPE html>
<html id="root">
  <head>
    <meta charset="UTF-8" />
    <meta name="title" content="心流--实时生物数据" />
    <meta
      name="description"
      content="和别人分享你练习的实时生物数据。实时生物数据可以看到实时的心率、脑电波、和谐状态等。"
    />
    <link rel="icon" href="/assets/images/ft.png" type="image/x-icon" />
    <meta
      name="sharecontent"
      data-msg-img="/assets/images/ft.png"
      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.0" />

    <!-- 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/pako.es5.min.js"></script>
    <script src="/assets/js/index.full.min.js"></script>
    <script src="/assets/js/index.iife.min.js"></script>

    <script src="/assets/js/worker_timer.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/pako@2.0.4/dist/pako.es5.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> -->

    <link rel="stylesheet" href="/assets/css/rt/index.css"></link>
  </head>
  <div style="display: none">
    <img src="/assets/images/ft.png" />
  </div>
  <body style="margin: 0; padding: 0">
    <!-- <body> -->
    <div id="app">
      <!-- <div style="height: 40px">
        <el-row>
          <el-col :span="3">
            <el-input v-model="eleSize" placeholder="Please input" />
          </el-col>
          /
          <el-col :span="3"><el-input v-model="remSize" placeholder="16px" /></el-col>
          *
          <el-col :span="3"><el-input v-model="coefficient" placeholder="Please input" /></el-col>
          =
          <el-col :span="3"><el-input v-model="realSize" placeholder="Please input" /></el-col>
        </el-row>
      </div> -->
      <div v-show="!detailDialogVisible" id="main-container">
        <el-row id="main-container-main" :gutter="0">
          <el-col :span="24">
            <el-row id="title">
              <span>{{session.nickname + t('title')}}</span>
            </el-row>
          </el-col>
          <!-- Overview -->
          <el-col v-if="diagram.overview.enable" id="overview-container" :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
            <el-card id="overview" :body-style="{padding: '0px 0px 0px 0px'}">
              <div class="card-main" id="overview-card-main">
                <!-- Header -->
                <el-row class="visual-card-header">
                  <el-col :span="12">
                    <span>{{ t('overview.title') }}</span>
                  </el-col>
                  <el-col :span="12" style="width: 100%; height: 100%; text-align: right;" >
                    <div style="display: flex; justify-content: flex-end; text-align: right;height: 30px;" @click="detailDialogVisible = !detailDialogVisible; detailTarget='overview'">
                        <svg v-if="detailDialogVisible" xmlns="http://www.w3.org/2000/svg" width="30" height="100" viewBox="0 0 100 100" fill="none" style="height: 100%;">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M62.7762 12.7949V31.9706L80.7272 14.0197C82.3602 12.3867 85.0078 12.3867 86.6408 14.0197C88.2738 15.6527 88.2738 18.3003 86.6408 19.9333L68.6898 37.8842H87.8655V46.2473H58.5947C56.2853 46.2473 54.4131 44.3752 54.4131 42.0658V12.7949H62.7762ZM37.6869 88.0628V68.8871L19.736 86.838C18.103 88.471 15.4554 88.471 13.8224 86.838C12.1894 85.205 12.1894 82.5574 13.8224 80.9244L31.7733 62.9735H12.5977V54.6104H41.8685C44.1779 54.6104 46.05 56.4825 46.05 58.7919V88.0628H37.6869Z" fill="#A6A7AF"/>
                        </svg>
                        <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.3333 9.16667L16.3333 5.34518L12.7559 8.92259C12.4305 9.24803 11.9028 9.24803 11.5774 8.92259C11.252 8.59715 11.252 8.06951 11.5774 7.74408L15.1548 4.16667L11.3333 4.16667V2.5H17.1667C17.6269 2.5 18 2.8731 18 3.33333V9.16667H16.3333ZM4.66667 10.8333L4.66667 14.6548L8.24408 11.0774C8.56951 10.752 9.09715 10.752 9.42259 11.0774C9.74803 11.4028 9.74803 11.9305 9.42259 12.2559L5.84518 15.8333L9.66667 15.8333V17.5H3.83333C3.3731 17.5 3 17.1269 3 16.6667V10.8333H4.66667Z" fill="#A6A7AF"/>
                        </svg>
                    </div>
                  </el-col>
                </el-row>
                <!-- Headband Content -->
                <div
                  v-if="currentDevice === 'Headband' || currentDevice === 'Entertech Bio-VR'"
                  style="text-align: left"
                >
                  <el-row style="height: 2.72107505875rem; ">
                    <el-col :span="12">
                      <span class="sub-item-title">{{ t("overview.heartRate") }}</span><br /><span
                        class="overview-value"
                        style="color: #ff6682"
                        >{{ diagram.heartRate.data.current }}</span
                      ><span class="overview-value-u">bpm</span>
                    </el-col>
                    <el-col :span="12"
                      ><span class="sub-item-title">{{ t("overview.coherence") }}</span>
                      <br />
                      <span
                        v-show="diagram.coherence.data.coherent[diagram.coherence.data.coherent.length-1]"
                        class="overview-value"
                        style="color: #7AC499"
                        >{{ t("overview.coherent") }}</span
                      >
                      <span
                        v-show="!diagram.coherence.data.coherent[diagram.coherence.data.coherent.length-1]"
                        class="overview-value"
                        style="color: #ffffff80"
                        >{{ t("overview.incoherent") }}</span
                      ></el-col
                    ></el-row
                  >
                  <div
                    style="border-top: 0.5px solid rgba(255, 255, 255, 0.50); margin-top: 0.2366152225rem; margin-bottom: 0.2366152225rem"
                  >
                  </div>

                  <el-row style="height: 2.72107505875rem"
                    ><el-col :span="12">
                      <span class="sub-item-title">{{ t("overview.attention") }}</span><br /><span
                        class="overview-value"
                        style="color: #7AC499"
                        >{{ diagram.attention.data.current }}</span
                      >
                      <span v-show="diagram.attention.data.current < 30" class="overview-value-u"
                        >({{ t("overview.low") }})</span
                      >
                      <span
                        v-show="diagram.attention.data.current >= 30 && diagram.attention.data.current < 70"
                        class="overview-value-u"
                        >({{ t("overview.medium") }})</span
                      >
                      <span v-show="diagram.attention.data.current >= 70" class="overview-value-u"
                        >({{ t("overview.high") }})</span
                      > </el-col
                    ><el-col :span="12">
                      <span class="sub-item-title">{{ t("overview.relaxation") }}</span><br /><span
                        class="overview-value"
                        style="color: #4472C4"
                        >{{ diagram.relaxation.data.current }}</span
                      >
                      <span v-show="diagram.relaxation.data.current < 30" class="overview-value-u"
                        >({{ t("overview.low") }})</span
                      >
                      <span
                        v-show="diagram.relaxation.data.current >= 30 && diagram.relaxation.data.current < 70"
                        class="overview-value-u"
                        >({{ t("overview.medium") }})</span
                      >
                      <span v-show="diagram.relaxation.data.current >= 70" class="overview-value-u"
                        >({{ t("overview.high") }})</span
                      >
                    </el-col></el-row
                  >
                  <div
                    style="border-top: 0.5px solid rgba(255, 255, 255, 0.50); margin-top: 0.2366152225rem; margin-bottom: 0.2366152225rem"
                  >
                  </div>
                  <el-row style="height: 2.425306030625rem; margin-bottom: 0.532384250625rem"
                    ><el-col>
                      <span class="sub-item-title">{{ t("overview.brainwaveRhythm") }}</span><br />
                      <span class="gbatd" style="color: #ff6682"
                        >γ{{ diagram.overview.data.brainwaveRhythm.gamma }}</span
                      ><span class="gbatd-u" style="color: #ffffff80">% | </span>
                      <span class="gbatd" style="color: #58b9e0">β{{ diagram.overview.data.brainwaveRhythm.beta }}</span
                      ><span class="gbatd-u" style="color: #ffffff80">% | </span>
                      <span class="gbatd" style="color: #ffc56f"
                        >α{{ diagram.overview.data.brainwaveRhythm.alpha }}</span
                      ><span class="gbatd-u" style="color: #ffffff80">% | </span>
                      <span class="gbatd" style="color: #7AC499"
                        >θ{{ diagram.overview.data.brainwaveRhythm.theta }}</span
                      ><span class="gbatd-u" style="color: #ffffff80">% | </span>
                      <span class="gbatd" style="color: #3479ff"
                        >δ{{ diagram.overview.data.brainwaveRhythm.delta }}</span
                      ><span class="gbatd-u" style="color: #ffffff80">%</span>
                    </el-col></el-row
                  >
                </div>
                <!-- Cushion Content -->
                <div v-else-if="currentDevice === 'Cushion'" style="text-align: left; margin-top: 1.6858834603125rem">
                  <el-row style="height: 2.72107505875rem">
                    <el-col :span="12">
                      <span class="sub-item-title">{{ t("overview.heartRate") }}</span><br /><span
                        class="overview-value"
                        style="color: #ff6682"
                        >{{ diagram.heartRate.data.current }}</span
                      ><span class="overview-value-u">bpm</span>
                    </el-col>
                    <el-col :span="12"
                      ><span class="sub-item-title">{{ t("overview.coherence") }}</span>
                      <br />
                      <span
                        v-show="diagram.coherence.data.coherent[diagram.coherence.data.coherent.length-1]"
                        class="overview-value"
                        style="color: #ffc56f"
                        >{{ t("overview.coherent") }}</span
                      >
                      <span
                        v-show="!diagram.coherence.data.coherent[diagram.coherence.data.coherent.length-1]"
                        class="overview-value"
                        style="color: #ffffff80"
                        >{{ t("overview.incoherent") }}</span
                      ></el-col
                    ></el-row
                  >
                  <hr
                    style="border-top: 0.5px solid rgba(255, 255, 255, 0.20); margin-top: 0.7098456675rem; margin-bottom: 0.7098456675rem"
                  />
                  <el-row style="height: 2.425306030625rem; margin-bottom: 1.597152751875rem"
                    ><el-col :span="12">
                      <span class="sub-item-title">{{ t("overview.respiratoryRate") }}</span><br /><span
                        class="overview-value"
                        style="color: #3479ff"
                        >{{ diagram.rr.data.rr }}</span
                      >
                      <span class="overview-value-u">({{ t("overview.timesPerMinute") }})</span> </el-col
                    ><el-col :span="12">
                      <span class="sub-item-title">{{ t("overview.signalQuality") }}</span><br />
                      <span v-show="diagram.bcg.data.bcgQuality === 0" class="overview-value" style="color: #ffffff80"
                        >{{ t("overview.noSignal") }}</span
                      >
                      <span v-show="diagram.bcg.data.bcgQuality === 1" class="overview-value" style="color: #f7cf51"
                        >{{ t("overview.weak") }}</span
                      >
                      <span v-show="diagram.bcg.data.bcgQuality === 2" class="overview-value" style="color: #ffc56f"
                        >{{ t("overview.good") }}</span
                      >
                    </el-col></el-row
                  >
                </div>

                <!-- Footer -->
              <div v-if="cardFooter && detailDialogVisible">
                <el-row style="height: 1.375rem">
                  <el-col class="card-footer">
                    <img src="/assets/images/icon.png" alt="" style="width: 0.75rem" />
                    <span
                      style="
                        height: 72.727273%;
                        font-size: 0.75rem;
                        line-height: 119.333333%;
                        font-weight: 400;
                        color: #ffffff80;
                        margin-left: 0.25rem;
                      "
                      >{{ currentDeviceDisplay() }}</span
                    >
                  </el-col>
                </el-row>
              </div>
              <div v-else style="height: 0.375rem"></div>
              </div>
              
            </el-card>
          </el-col>

          <!-- Brainwave -->
          <el-col v-if="diagram.brainwave.enable" id="brainwave-container" :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
            <el-card
              element-loading-background="rgba(255, 255, 255, 0.1)"
              id="brainwave"
              :body-style="{padding: '0px 0px 0px 0px'}"
            >
              <div class="card-main" id="brainwave-card-main">
                <!-- Header -->
                <el-row class="visual-card-header">
                  <el-col :span="12">
                    <span>{{ t("brainwave.title") }}</span>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <div style="display: flex; justify-content: flex-end; text-align: right;height: 30px;" @click="detailDialogVisible = !detailDialogVisible; detailTarget='brainwave'">
                        <svg v-if="detailDialogVisible" xmlns="http://www.w3.org/2000/svg" width="30" height="100" viewBox="0 0 100 100" fill="none" style="height: 100%;">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M62.7762 12.7949V31.9706L80.7272 14.0197C82.3602 12.3867 85.0078 12.3867 86.6408 14.0197C88.2738 15.6527 88.2738 18.3003 86.6408 19.9333L68.6898 37.8842H87.8655V46.2473H58.5947C56.2853 46.2473 54.4131 44.3752 54.4131 42.0658V12.7949H62.7762ZM37.6869 88.0628V68.8871L19.736 86.838C18.103 88.471 15.4554 88.471 13.8224 86.838C12.1894 85.205 12.1894 82.5574 13.8224 80.9244L31.7733 62.9735H12.5977V54.6104H41.8685C44.1779 54.6104 46.05 56.4825 46.05 58.7919V88.0628H37.6869Z" fill="#A6A7AF"/>
                        </svg>
                        <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.3333 9.16667L16.3333 5.34518L12.7559 8.92259C12.4305 9.24803 11.9028 9.24803 11.5774 8.92259C11.252 8.59715 11.252 8.06951 11.5774 7.74408L15.1548 4.16667L11.3333 4.16667V2.5H17.1667C17.6269 2.5 18 2.8731 18 3.33333V9.16667H16.3333ZM4.66667 10.8333L4.66667 14.6548L8.24408 11.0774C8.56951 10.752 9.09715 10.752 9.42259 11.0774C9.74803 11.4028 9.74803 11.9305 9.42259 12.2559L5.84518 15.8333L9.66667 15.8333V17.5H3.83333C3.3731 17.5 3 17.1269 3 16.6667V10.8333H4.66667Z" fill="#A6A7AF"/>
                        </svg>
                    </div>
                  </el-col>
                </el-row>
                <!-- Content -->
                <div style="margin-top: 0.9168839871875rem">
                  <el-row style="height: 3.963304976875rem; margin-bottom: 0.47206704rem; width: 100%">
                    <v-chart
                      ref="brainwaveLeftChart"
                      :manual-update="true"
                      autoresize
                      class="chart-bg"
                    >
                    </v-chart>
                    <div class="chart-desc">
                      <span>{{ t("brainwave.leftChange") }}</span>
                    </div>
                  </el-row>
                  <el-row style="height: 3.963304976875rem; margin-bottom: 0.70810056rem; width: 100%">
                    <v-chart
                      ref="brainwaveRightChart"
                      :manual-update="true"
                      autoresize
                      class="chart-bg"
                    >
                    </v-chart>
                    <div class="chart-desc">
                      <span>{{ t("brainwave.rightChange") }}</span>
                    </div>
                  </el-row>
                </div>
                <!-- Footer -->
              <div v-if="cardFooter && detailDialogVisible">
                <el-row style="height: 1.375rem">
                  <el-col class="card-footer">
                    <img src="/assets/images/icon.png" alt="" style="width: 0.75rem" />
                    <span
                      style="
                        height: 72.727273%;
                        font-size: 0.75rem;
                        line-height: 119.333333%;
                        font-weight: 400;
                        color: #ffffff80;
                        margin-left: 0.25rem;
                      "
                      >{{ currentDeviceDisplay() }}</span
                    >
                  </el-col>
                </el-row>
              </div>
              <div v-else style="height: 0.375rem"></div>
              </div>
              
            </el-card>
          </el-col>

          <!-- Brainwave Rhythm -->
          <el-col
            v-if="diagram.brainwaveRhythm.enable"
            id="brainwaveRhythm-container"
            :xl="8"
            :lg="8"
            :md="8"
            :sm="12"
            :xs="24"
          >
            <el-card
              element-loading-background="rgba(255, 255, 255, 0.1)"
              id="brainwaveRhythm"
              :body-style="{padding: '0px 0px 0px 0px'}"
            >
              <div class="card-main" id="brainwaveRhythm-card-main">
                <!-- Header -->
                <el-row class="visual-card-header">
                  <el-col :span="12">
                    <span>{{ t("brainwaveRhythm.title") }}</span>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <div style="display: flex; justify-content: flex-end; text-align: right;height: 30px;" @click="detailDialogVisible = !detailDialogVisible; detailTarget='brainwaveRhythm'">
                        <svg v-if="detailDialogVisible" xmlns="http://www.w3.org/2000/svg" width="30" height="100" viewBox="0 0 100 100" fill="none" style="height: 100%;">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M62.7762 12.7949V31.9706L80.7272 14.0197C82.3602 12.3867 85.0078 12.3867 86.6408 14.0197C88.2738 15.6527 88.2738 18.3003 86.6408 19.9333L68.6898 37.8842H87.8655V46.2473H58.5947C56.2853 46.2473 54.4131 44.3752 54.4131 42.0658V12.7949H62.7762ZM37.6869 88.0628V68.8871L19.736 86.838C18.103 88.471 15.4554 88.471 13.8224 86.838C12.1894 85.205 12.1894 82.5574 13.8224 80.9244L31.7733 62.9735H12.5977V54.6104H41.8685C44.1779 54.6104 46.05 56.4825 46.05 58.7919V88.0628H37.6869Z" fill="#A6A7AF"/>
                        </svg>
                        <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.3333 9.16667L16.3333 5.34518L12.7559 8.92259C12.4305 9.24803 11.9028 9.24803 11.5774 8.92259C11.252 8.59715 11.252 8.06951 11.5774 7.74408L15.1548 4.16667L11.3333 4.16667V2.5H17.1667C17.6269 2.5 18 2.8731 18 3.33333V9.16667H16.3333ZM4.66667 10.8333L4.66667 14.6548L8.24408 11.0774C8.56951 10.752 9.09715 10.752 9.42259 11.0774C9.74803 11.4028 9.74803 11.9305 9.42259 12.2559L5.84518 15.8333L9.66667 15.8333V17.5H3.83333C3.3731 17.5 3 17.1269 3 16.6667V10.8333H4.66667Z" fill="#A6A7AF"/>
                        </svg>
                    </div>
                    
                  </el-col>
                </el-row>
                <!-- Content -->
                <el-row
                  style="height: 8.39984039875rem; margin-bottom: 0.7098456675rem; margin-top: 0.9168839871875rem"
                >
                  <v-chart
                    ref="brainwaveRhythmChart"
                    :manual-update="true"
                    autoresize
                    class="chart-bg"
                  >
                  </v-chart>
                  <div style="display: block; position: absolute; left: 0; top: 0">
                    <div class="brainwave-rhythm-gbatd-label">
                      <span style="color: #ff6682">γ:{{ diagram.brainwaveRhythm.data.lastGamma }}dB</span>
                    </div>
                    <div class="brainwave-rhythm-gbatd-label">
                      <span style="color: #58b9e0">β:{{ diagram.brainwaveRhythm.data.lastBeta }}dB</span>
                    </div>
                    <div class="brainwave-rhythm-gbatd-label">
                      <span style="color: #ffc56f">α:{{ diagram.brainwaveRhythm.data.lastAlpha }}dB</span>
                    </div>
                    <div class="brainwave-rhythm-gbatd-label">
                      <span style="color: #7AC499">θ:{{ diagram.brainwaveRhythm.data.lastTheta }}dB</span>
                    </div>
                    <div class="brainwave-rhythm-gbatd-label">
                      <span style="color: #3479ff">δ: {{ diagram.brainwaveRhythm.data.lastDelta }}dB</span>
                    </div>
                  </div>
                </el-row>
                <!-- Footer -->
              <div v-if="cardFooter && detailDialogVisible">
                <el-row style="height: 1.375rem">
                  <el-col class="card-footer">
                    <img src="/assets/images/icon.png" alt="" style="width: 0.75rem" />
                    <span
                      style="
                        height: 72.727273%;
                        font-size: 0.75rem;
                        line-height: 119.333333%;
                        font-weight: 400;
                        color: #ffffff80;
                        margin-left: 0.25rem;
                      "
                      >{{ currentDeviceDisplay() }}</span
                    >
                  </el-col>
                </el-row>
              </div>
              <div v-else style="height: 0.375rem"></div>
              </div>
              
            </el-card>
          </el-col>

          <!-- BCG Wave -->
          <el-col v-if="diagram.bcg.enable" id="bcg-container" :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
            <el-card
              element-loading-background="rgba(255, 255, 255, 0.1)"
              id="bcg"
              :body-style="{padding: '0px 0px 0px 0px'}"
            >
              <div class="card-main" id="bcg-card-main">
                <!-- Header -->
                <el-row class="visual-card-header">
                  <el-col :span="12">
                    <span>{{ t("bcg.title") }}</span>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <div style="display: flex; justify-content: flex-end; text-align: right;height: 30px;" @click="detailDialogVisible = !detailDialogVisible; detailTarget='bcg'">
                        <svg v-if="detailDialogVisible" xmlns="http://www.w3.org/2000/svg" width="30" height="100" viewBox="0 0 100 100" fill="none" style="height: 100%;">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M62.7762 12.7949V31.9706L80.7272 14.0197C82.3602 12.3867 85.0078 12.3867 86.6408 14.0197C88.2738 15.6527 88.2738 18.3003 86.6408 19.9333L68.6898 37.8842H87.8655V46.2473H58.5947C56.2853 46.2473 54.4131 44.3752 54.4131 42.0658V12.7949H62.7762ZM37.6869 88.0628V68.8871L19.736 86.838C18.103 88.471 15.4554 88.471 13.8224 86.838C12.1894 85.205 12.1894 82.5574 13.8224 80.9244L31.7733 62.9735H12.5977V54.6104H41.8685C44.1779 54.6104 46.05 56.4825 46.05 58.7919V88.0628H37.6869Z" fill="#A6A7AF"/>
                        </svg>
                        <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.3333 9.16667L16.3333 5.34518L12.7559 8.92259C12.4305 9.24803 11.9028 9.24803 11.5774 8.92259C11.252 8.59715 11.252 8.06951 11.5774 7.74408L15.1548 4.16667L11.3333 4.16667V2.5H17.1667C17.6269 2.5 18 2.8731 18 3.33333V9.16667H16.3333ZM4.66667 10.8333L4.66667 14.6548L8.24408 11.0774C8.56951 10.752 9.09715 10.752 9.42259 11.0774C9.74803 11.4028 9.74803 11.9305 9.42259 12.2559L5.84518 15.8333L9.66667 15.8333V17.5H3.83333C3.3731 17.5 3 17.1269 3 16.6667V10.8333H4.66667Z" fill="#A6A7AF"/>
                        </svg>
                    </div>
                    
                  </el-col>
                </el-row>
                <!-- Content -->
                <el-row
                  style="
                    height: 8.39984039875rem;
                    margin-top: 0.9168839871875rem;
                    margin-bottom: 0.7098456675rem;
                    width: 100%;
                  "
                >
                  <v-chart
                    ref="bcgChart"
                    :manual-update="true"
                    autoresize
                    class="chart-bg"
                  >
                  </v-chart>
                  <div class="chart-desc">
                    <span>{{ t("bcg.bcgChange") }}</span>
                  </div>
                </el-row>
                <!-- Footer -->
              <div v-if="cardFooter && detailDialogVisible">
                <el-row style="height: 1.375rem">
                  <el-col class="card-footer">
                    <img src="/assets/images/icon.png" alt="" style="width: 0.75rem" />
                    <span
                      style="
                        height: 72.727273%;
                        font-size: 0.75rem;
                        line-height: 119.333333%;
                        font-weight: 400;
                        color: #ffffff80;
                        margin-left: 0.25rem;
                      "
                      >{{ currentDeviceDisplay() }}</span
                    >
                  </el-col>
                </el-row>
              </div>
              <div v-else style="height: 0.375rem"></div>
              </div>
              
            </el-card>
          </el-col>

          <!-- Heart Rate -->
          <el-col v-if="diagram.heartRate.enable" id="heartRate-container" :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
            <el-card
              element-loading-background="rgba(255, 255, 255, 0.1)"
              id="heartRate"
              :body-style="{padding: '0px 0px 0px 0px'}"
            >
              <div class="card-main" id="heartRate-card-main">
                <!-- Header -->
                <el-row class="visual-card-header">
                  <el-col :span="12">
                    <span>{{ t("heartRate.title") }}</span>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <div style="display: flex; justify-content: flex-end; text-align: right;height: 30px;" @click="detailDialogVisible = !detailDialogVisible; detailTarget='heartRate'">
                        <svg v-if="detailDialogVisible" xmlns="http://www.w3.org/2000/svg" width="30" height="100" viewBox="0 0 100 100" fill="none" style="height: 100%;">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M62.7762 12.7949V31.9706L80.7272 14.0197C82.3602 12.3867 85.0078 12.3867 86.6408 14.0197C88.2738 15.6527 88.2738 18.3003 86.6408 19.9333L68.6898 37.8842H87.8655V46.2473H58.5947C56.2853 46.2473 54.4131 44.3752 54.4131 42.0658V12.7949H62.7762ZM37.6869 88.0628V68.8871L19.736 86.838C18.103 88.471 15.4554 88.471 13.8224 86.838C12.1894 85.205 12.1894 82.5574 13.8224 80.9244L31.7733 62.9735H12.5977V54.6104H41.8685C44.1779 54.6104 46.05 56.4825 46.05 58.7919V88.0628H37.6869Z" fill="#A6A7AF"/>
                        </svg>
                        <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.3333 9.16667L16.3333 5.34518L12.7559 8.92259C12.4305 9.24803 11.9028 9.24803 11.5774 8.92259C11.252 8.59715 11.252 8.06951 11.5774 7.74408L15.1548 4.16667L11.3333 4.16667V2.5H17.1667C17.6269 2.5 18 2.8731 18 3.33333V9.16667H16.3333ZM4.66667 10.8333L4.66667 14.6548L8.24408 11.0774C8.56951 10.752 9.09715 10.752 9.42259 11.0774C9.74803 11.4028 9.74803 11.9305 9.42259 12.2559L5.84518 15.8333L9.66667 15.8333V17.5H3.83333C3.3731 17.5 3 17.1269 3 16.6667V10.8333H4.66667Z" fill="#A6A7AF"/>
                        </svg>
                    </div>
                    
                  </el-col>
                </el-row>
                <!-- Content -->
                <el-row style="margin-top: 0.9168839871875rem; margin-bottom: 0.473230445rem">
                  <el-col :span="12">
                    <el-row>
                      <div class="current-value-visual">
                        <span class="current-value-visual-value" style="color: #ff6682"
                          >{{ diagram.heartRate.data.current }}
                          <span class="current-value-visual-value-u">bpm</span>
                        </span>
                      </div>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row class="max-min-visual">
                      <span>{{ t("heartRate.max") }}: {{ diagram.heartRate.data.max }} bpm</span>
                    </el-row>
                    <el-row class="max-min-visual">
                      <span>{{ t("heartRate.min") }}: {{ diagram.heartRate.data.min }} bpm</span>
                    </el-row>
                  </el-col>
                </el-row>
                <el-row style="height: 5.9153805625rem; margin-bottom: 0.768999473125rem; width: 100%">
                  <v-chart
                    ref="heartRateChart"
                    :manual-update="true"
                    autoresize
                    class="chart-bg"
                  >
                  </v-chart>
                  <div class="chart-desc">
                    <span>{{ t("heartRate.hrChange") }}</span>
                  </div>
                </el-row>

                <!-- Footer -->
              <div v-if="cardFooter && detailDialogVisible">
                <el-row style="height: 1.375rem">
                  <el-col class="card-footer">
                    <img src="/assets/images/icon.png" alt="" style="width: 0.75rem" />
                    <span
                      style="
                        height: 72.727273%;
                        font-size: 0.75rem;
                        line-height: 119.333333%;
                        font-weight: 400;
                        color: #ffffff80;
                        margin-left: 0.25rem;
                      "
                      >{{ currentDeviceDisplay() }}</span
                    >
                  </el-col>
                </el-row>
              </div>
              <div v-else style="height: 0.375rem"></div>
              </div>
              
            </el-card>
          </el-col>

          <!-- Coherence -->
          <el-col v-if="diagram.coherence.enable" id="coherence-container" :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
            <el-card
              element-loading-background="rgba(255, 255, 255, 0.1)"
              id="coherence"
              :body-style="{padding: '0px 0px 0px 0px'}"
            >
              <div class="card-main" id="coherence-card-main">
                <!-- Header -->
                <el-row class="visual-card-header">
                  <el-col :span="20">
                    <span>{{ t("coherence.title") }}</span>
                  </el-col>
                  <el-col :span="4" style="text-align: right">
                    <div style="display: flex; justify-content: flex-end; text-align: right;height: 30px;" @click="detailDialogVisible = !detailDialogVisible; detailTarget='coherence'">
                        <svg v-if="detailDialogVisible" xmlns="http://www.w3.org/2000/svg" width="30" height="100" viewBox="0 0 100 100" fill="none" style="height: 100%;">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M62.7762 12.7949V31.9706L80.7272 14.0197C82.3602 12.3867 85.0078 12.3867 86.6408 14.0197C88.2738 15.6527 88.2738 18.3003 86.6408 19.9333L68.6898 37.8842H87.8655V46.2473H58.5947C56.2853 46.2473 54.4131 44.3752 54.4131 42.0658V12.7949H62.7762ZM37.6869 88.0628V68.8871L19.736 86.838C18.103 88.471 15.4554 88.471 13.8224 86.838C12.1894 85.205 12.1894 82.5574 13.8224 80.9244L31.7733 62.9735H12.5977V54.6104H41.8685C44.1779 54.6104 46.05 56.4825 46.05 58.7919V88.0628H37.6869Z" fill="#A6A7AF"/>
                        </svg>
                        <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.3333 9.16667L16.3333 5.34518L12.7559 8.92259C12.4305 9.24803 11.9028 9.24803 11.5774 8.92259C11.252 8.59715 11.252 8.06951 11.5774 7.74408L15.1548 4.16667L11.3333 4.16667V2.5H17.1667C17.6269 2.5 18 2.8731 18 3.33333V9.16667H16.3333ZM4.66667 10.8333L4.66667 14.6548L8.24408 11.0774C8.56951 10.752 9.09715 10.752 9.42259 11.0774C9.74803 11.4028 9.74803 11.9305 9.42259 12.2559L5.84518 15.8333L9.66667 15.8333V17.5H3.83333C3.3731 17.5 3 17.1269 3 16.6667V10.8333H4.66667Z" fill="#A6A7AF"/>
                        </svg>
                    </div>
                    
                  </el-col>
                </el-row>
                <!-- Content -->
                <el-row style="margin-top: 0.9168839871875rem; margin-bottom: 0.473230445rem">
                  <div class="current-value-visual">
                    <span
                      v-show="diagram.coherence.data.coherent[diagram.coherence.data.coherent.length-1]"
                      class="current-value-visual-value"
                      style="color: #7AC499; margin-right: 0.473230445rem"
                      >{{ t("coherence.coherent") }}
                    </span>
                    <span
                      v-show="!diagram.coherence.data.coherent[diagram.coherence.data.coherent.length-1]"
                      class="current-value-visual-value"
                      style="color: #ffffff80; margin-right: 0.473230445rem"
                      >{{ t("coherence.incoherent") }}
                    </span>
                  </div>
                </el-row>
                <el-row style="height: 5.9153805625rem; margin-bottom: 0.768999473125rem; width: 100%">
                  <v-chart
                    ref="coherenceChart"
                    :manual-update="true"
                    autoresize
                    class="chart-bg"
                  >
                  </v-chart>
                  <div class="chart-desc">
                    <span style="margin-right: 0.473230445rem">{{ t("coherence.coherenceChange") }}</span>
                    <svg height="4" width="4">
                      <ellipse cx="2" cy="2" rx="2" ry="2" style="fill: #7AC499" />
                      Sorry, your browser does not support inline SVG.
                    </svg>
                    <span style="margin-right: 0.473230445rem; margin-left: 0.2366152225rem; color: #7AC499">
                      {{ t("coherence.coherent") }}</span
                    >
                    <svg height="4" width="4">
                      <ellipse cx="2" cy="2" rx="2" ry="2" style="fill: #ffffff80" />
                      Sorry, your browser does not support inline SVG.
                    </svg>
                    <span style="margin-left: 0.2366152225rem ;color: #ffffff80">{{ t("coherence.incoherent") }}</span>
                  </div>
                </el-row>
                <!-- Footer -->
              <div v-if="cardFooter && detailDialogVisible">
                <el-row style="height: 1.375rem">
                  <el-col class="card-footer">
                    <img src="/assets/images/icon.png" alt="" style="width: 0.75rem" />
                    <span
                      style="
                        height: 72.727273%;
                        font-size: 0.75rem;
                        line-height: 119.333333%;
                        font-weight: 400;
                        color: #ffffff80;
                        margin-left: 0.25rem;
                      "
                      >{{ currentDeviceDisplay() }}</span
                    >
                  </el-col>
                </el-row>
              </div>
              <div v-else style="height: 0.375rem"></div>
              </div>
              
            </el-card>
          </el-col>

          <!-- Flow -->
          <el-col v-if="diagram.flow.enable" id="flow-container" :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
            <el-card
              element-loading-background="rgba(255, 255, 255, 0.1)"
              id="flow"
              :body-style="{padding: '0px 0px 0px 0px'}"
            >
              <div class="card-main" id="flow-card-main">
                <!-- Header -->
                <el-row class="visual-card-header">
                  <el-col :span="12">
                    <span>{{ t("flow.title") }}</span>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <div style="display: flex; justify-content: flex-end; text-align: right;height: 30px;" @click="detailDialogVisible = !detailDialogVisible; detailTarget='flow'">
                        <svg v-if="detailDialogVisible" xmlns="http://www.w3.org/2000/svg" width="30" height="100" viewBox="0 0 100 100" fill="none" style="height: 100%;">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M62.7762 12.7949V31.9706L80.7272 14.0197C82.3602 12.3867 85.0078 12.3867 86.6408 14.0197C88.2738 15.6527 88.2738 18.3003 86.6408 19.9333L68.6898 37.8842H87.8655V46.2473H58.5947C56.2853 46.2473 54.4131 44.3752 54.4131 42.0658V12.7949H62.7762ZM37.6869 88.0628V68.8871L19.736 86.838C18.103 88.471 15.4554 88.471 13.8224 86.838C12.1894 85.205 12.1894 82.5574 13.8224 80.9244L31.7733 62.9735H12.5977V54.6104H41.8685C44.1779 54.6104 46.05 56.4825 46.05 58.7919V88.0628H37.6869Z" fill="#A6A7AF"/>
                        </svg>
                        <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.3333 9.16667L16.3333 5.34518L12.7559 8.92259C12.4305 9.24803 11.9028 9.24803 11.5774 8.92259C11.252 8.59715 11.252 8.06951 11.5774 7.74408L15.1548 4.16667L11.3333 4.16667V2.5H17.1667C17.6269 2.5 18 2.8731 18 3.33333V9.16667H16.3333ZM4.66667 10.8333L4.66667 14.6548L8.24408 11.0774C8.56951 10.752 9.09715 10.752 9.42259 11.0774C9.74803 11.4028 9.74803 11.9305 9.42259 12.2559L5.84518 15.8333L9.66667 15.8333V17.5H3.83333C3.3731 17.5 3 17.1269 3 16.6667V10.8333H4.66667Z" fill="#A6A7AF"/>
                        </svg>
                    </div>
                    
                  </el-col>
                </el-row>
                <!-- Content -->
                <el-row style="margin-top: 0.9168839871875rem; margin-bottom: 0.473230445rem">
                  <div class="current-value-visual">
                    <span
                      v-if="diagram.flow.data.current  >= 100/3"
                      class="current-value-visual-value"
                      style="color: #ffc56f; margin-right: 0.473230445rem"
                      >{{ t("flow.active") }}
                    </span>
                    <!-- <span
                      v-else-if="diagram.flow.data.current  >= 100/3"
                      class="current-value-visual-value"
                      style="color: #99a7ff; margin-right: 0.473230445rem"
                      >{{ t("flow.neutral") }}
                    </span> -->
                    <span v-else class="current-value-visual-value" style="color: #8B7AF3; margin-right: 0.473230445rem"
                      >{{ t("flow.flow") }}
                    </span>
                  </div>
                </el-row>
                <el-row style="height: 5.9153805625rem; margin-bottom: 0.768999473125rem; width: 100%;">
                  <v-chart
                    ref="flowChart"
                    :manual-update="true"
                    autoresize
                    class="chart-bg"
                  >
                  </v-chart>
                  <div
                    style="
                      position: absolute;
                      right: 0px;
                      top: 0px;

                      width: 1%;
                      height: 98%;
                      
                    "
                  >
                  <div style="width: 100%; height: 66.6666%; border-radius: 0.5rem 0.5rem 0px 0px;background-color: #FFA500;"></div>
                  <div style="width: 100%; height: 33.3333%;  border-radius: 0px 0px 0.5rem 0.5rem;background-color: #8B7AF3;"></div>
                </div>
                  <div class="chart-desc" >
                    <span style="margin-right: 0.473230445rem">{{ t("flow.flowChange") }}</span>
                    <svg height="4" width="4">
                      <ellipse cx="2" cy="2" rx="2" ry="2" style="fill: #8B7AF3" />
                      Sorry, your browser does not support inline SVG.
                    </svg>
                    <span style="margin-right: 0.473230445rem; margin-left: 0.2366152225rem; color: #8B7AF3">
                      {{ t("flow.flow") }}</span
                    >
                    <!-- <svg height="4" width="4">
                      <ellipse cx="2" cy="2" rx="2" ry="2" style="fill: #99a7ff" />
                      Sorry, your browser does not support inline SVG.
                    </svg>
                    <span style="margin-left: 0.2366152225rem; color: #99a7ff">{{ t("flow.neutral") }}</span> -->

                    <svg height="4" width="4">
                      <ellipse cx="2" cy="2" rx="2" ry="2" style="fill: #FFA500" />
                      Sorry, your browser does not support inline SVG.
                    </svg>
                    <span style="margin-left: 0.2366152225rem; color: #FFA500">{{ t("flow.active") }}</span>
                  </div>
                </el-row>
                <!-- Footer -->
              <div v-if="cardFooter && detailDialogVisible">
                <el-row style="height: 1.375rem">
                  <el-col class="card-footer">
                    <img src="/assets/images/icon.png" alt="" style="width: 0.75rem" />
                    <span
                      style="
                        height: 72.727273%;
                        font-size: 0.75rem;
                        line-height: 119.333333%;
                        font-weight: 400;
                        color: #ffffff80;
                        margin-left: 0.25rem;
                      "
                      >{{ currentDeviceDisplay() }}</span
                    >
                  </el-col>
                </el-row>
              </div>
              <div v-else style="height: 0.375rem"></div>
              </div>
              
            </el-card>
          </el-col>

          <!-- Attention -->
          <el-col v-if="diagram.attention.enable" id="attention-container" :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
            <el-card
              element-loading-background="rgba(255, 255, 255, 0.1)"
              id="attention"
              :body-style="{padding: '0px 0px 0px 0px'}"
            >
              <div class="card-main" id="attention-card-main">
                <!-- Header -->
                <el-row class="visual-card-header">
                  <el-col :span="12">
                    <span>{{ t("attention.title") }}</span>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <div style="display: flex; justify-content: flex-end; text-align: right;height: 30px;" @click="detailDialogVisible = !detailDialogVisible; detailTarget='attention'">
                        <svg v-if="detailDialogVisible" xmlns="http://www.w3.org/2000/svg" width="30" height="100" viewBox="0 0 100 100" fill="none" style="height: 100%;">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M62.7762 12.7949V31.9706L80.7272 14.0197C82.3602 12.3867 85.0078 12.3867 86.6408 14.0197C88.2738 15.6527 88.2738 18.3003 86.6408 19.9333L68.6898 37.8842H87.8655V46.2473H58.5947C56.2853 46.2473 54.4131 44.3752 54.4131 42.0658V12.7949H62.7762ZM37.6869 88.0628V68.8871L19.736 86.838C18.103 88.471 15.4554 88.471 13.8224 86.838C12.1894 85.205 12.1894 82.5574 13.8224 80.9244L31.7733 62.9735H12.5977V54.6104H41.8685C44.1779 54.6104 46.05 56.4825 46.05 58.7919V88.0628H37.6869Z" fill="#A6A7AF"/>
                        </svg>
                        <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.3333 9.16667L16.3333 5.34518L12.7559 8.92259C12.4305 9.24803 11.9028 9.24803 11.5774 8.92259C11.252 8.59715 11.252 8.06951 11.5774 7.74408L15.1548 4.16667L11.3333 4.16667V2.5H17.1667C17.6269 2.5 18 2.8731 18 3.33333V9.16667H16.3333ZM4.66667 10.8333L4.66667 14.6548L8.24408 11.0774C8.56951 10.752 9.09715 10.752 9.42259 11.0774C9.74803 11.4028 9.74803 11.9305 9.42259 12.2559L5.84518 15.8333L9.66667 15.8333V17.5H3.83333C3.3731 17.5 3 17.1269 3 16.6667V10.8333H4.66667Z" fill="#A6A7AF"/>
                        </svg>
                    </div>
                    
                  </el-col>
                </el-row>
                <!-- Content -->
                <el-row style="margin-top: 0.9168839871875rem; margin-bottom: 0.473230445rem">
                  <el-col :span="12">
                    <el-row>
                      <div class="current-value-visual">
                        <span class="current-value-visual-value" style="color: #7AC499"
                          >{{ diagram.attention.data.current }}
                          <span v-show="diagram.attention.data.current < 30" class="current-value-visual-value-u"
                            >({{ t("attention.low") }})</span
                          >
                          <span
                            v-show="diagram.attention.data.current >= 30 && diagram.attention.data.current < 70"
                            class="current-value-visual-value-u"
                            >({{ t("attention.medium") }})</span
                          >
                          <span v-show="diagram.attention.data.current >= 70" class="current-value-visual-value-u"
                            >({{ t("attention.high") }})</span
                          >
                        </span>
                      </div>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row class="max-min-visual">
                      <span>{{ t("attention.max") }}: {{ diagram.attention.data.max }}</span>
                      <span v-show="diagram.attention.data.max < 30" class="current-value-visual-value-u"
                        >({{ t("attention.low") }})</span
                      >
                      <span
                        v-show="diagram.attention.data.max >= 30 && diagram.attention.data.max < 70"
                        class="current-value-visual-value-u"
                        >({{ t("attention.medium") }})</span
                      >
                      <span v-show="diagram.attention.data.max >= 70" class="current-value-visual-value-u"
                        >({{ t("attention.high") }})</span
                      >
                    </el-row>
                    <el-row class="max-min-visual">
                      <span>{{ t("attention.min") }}: {{ diagram.attention.data.min }}</span>
                      <span v-show="diagram.attention.data.min < 30" class="current-value-visual-value-u"
                        >({{ t("attention.low") }})</span
                      >
                      <span
                        v-show="diagram.attention.data.min >= 30 && diagram.attention.data.min < 70"
                        class="current-value-visual-value-u"
                        >({{ t("attention.medium") }})</span
                      >
                      <span v-show="diagram.attention.data.min >= 70" class="current-value-visual-value-u"
                        >({{ t("attention.high") }})</span
                      >
                    </el-row>
                  </el-col>
                </el-row>
                <el-row style="height: 5.9153805625rem; margin-bottom: 0.768999473125rem; width: 100%">
                  <!-- :option="diagram.attention.view.option" :ref="diagram.attention.view.chart" -->
                  <v-chart
                    ref="attentionChart"
                    :manual-update="true"
                    autoresize
                    class="chart-bg"
                  >
                  </v-chart>
                  <div class="chart-desc">
                    <span
                      style="
                        color: #ffffff80;

                        font-style: normal;
                        font-weight: 400;
                        font-size: 0.625rem;
                        line-height: 0.75rem;
                      "
                      >{{ t("attention.attentionChange") }}</span
                    >
                  </div>
                </el-row>
                <!-- Footer -->
              <div v-if="cardFooter && detailDialogVisible">
                <el-row style="height: 1.375rem">
                  <el-col class="card-footer">
                    <img src="/assets/images/icon.png" alt="" style="width: 0.75rem" />
                    <span
                      style="
                        height: 72.727273%;
                        font-size: 0.75rem;
                        line-height: 119.333333%;
                        font-weight: 400;
                        color: #ffffff80;
                        margin-left: 0.25rem;
                      "
                      >{{ currentDeviceDisplay() }}</span
                    >
                  </el-col>
                </el-row>
              </div>
              <div v-else style="height: 0.375rem"></div>
              </div>
              
            </el-card>
          </el-col>

          <!-- Relaxation -->
          <el-col v-if="diagram.relaxation.enable" id="relaxation-container" :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
            <el-card
              element-loading-background="rgba(255, 255, 255, 0.1)"
              id="relaxation"
              :body-style="{padding: '0px 0px 0px 0px'}"
            >
              <div class="card-main" id="relaxation-card-main">
                <!-- Header -->
                <el-row class="visual-card-header">
                  <el-col :span="12">
                    <span>{{ t("relaxation.title") }}</span>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <div style="display: flex; justify-content: flex-end; text-align: right;height: 30px;" @click="detailDialogVisible = !detailDialogVisible; detailTarget='relaxation'">
                        <svg v-if="detailDialogVisible" xmlns="http://www.w3.org/2000/svg" width="30" height="100" viewBox="0 0 100 100" fill="none" style="height: 100%;">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M62.7762 12.7949V31.9706L80.7272 14.0197C82.3602 12.3867 85.0078 12.3867 86.6408 14.0197C88.2738 15.6527 88.2738 18.3003 86.6408 19.9333L68.6898 37.8842H87.8655V46.2473H58.5947C56.2853 46.2473 54.4131 44.3752 54.4131 42.0658V12.7949H62.7762ZM37.6869 88.0628V68.8871L19.736 86.838C18.103 88.471 15.4554 88.471 13.8224 86.838C12.1894 85.205 12.1894 82.5574 13.8224 80.9244L31.7733 62.9735H12.5977V54.6104H41.8685C44.1779 54.6104 46.05 56.4825 46.05 58.7919V88.0628H37.6869Z" fill="#A6A7AF"/>
                        </svg>
                        <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.3333 9.16667L16.3333 5.34518L12.7559 8.92259C12.4305 9.24803 11.9028 9.24803 11.5774 8.92259C11.252 8.59715 11.252 8.06951 11.5774 7.74408L15.1548 4.16667L11.3333 4.16667V2.5H17.1667C17.6269 2.5 18 2.8731 18 3.33333V9.16667H16.3333ZM4.66667 10.8333L4.66667 14.6548L8.24408 11.0774C8.56951 10.752 9.09715 10.752 9.42259 11.0774C9.74803 11.4028 9.74803 11.9305 9.42259 12.2559L5.84518 15.8333L9.66667 15.8333V17.5H3.83333C3.3731 17.5 3 17.1269 3 16.6667V10.8333H4.66667Z" fill="#A6A7AF"/>
                        </svg>
                    </div>
                    
                  </el-col>
                </el-row>
                <!-- Content -->
                <el-row style="margin-top: 0.9168839871875rem; margin-bottom: 0.473230445rem">
                  <el-col :span="12">
                    <el-row>
                      <div class="current-value-visual">
                        <span class="current-value-visual-value" style="color: #4472C4"
                          >{{ diagram.relaxation.data.current }}
                          <span v-show="diagram.relaxation.data.current < 30" class="current-value-visual-value-u"
                            >({{ t("relaxation.low") }})</span
                          >
                          <span
                            v-show="diagram.relaxation.data.current >= 30 && diagram.relaxation.data.current < 70"
                            class="current-value-visual-value-u"
                            >({{ t("relaxation.medium") }})</span
                          >
                          <span v-show="diagram.relaxation.data.current >= 70" class="current-value-visual-value-u"
                            >({{ t("relaxation.high") }})</span
                          >
                        </span>
                      </div>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row class="max-min-visual">
                      <span>{{ t("relaxation.max") }}: {{ diagram.relaxation.data.max }}</span>
                      <span v-show="diagram.relaxation.data.max < 30" class="current-value-visual-value-u"
                        >({{ t("relaxation.low") }})</span
                      >
                      <span
                        v-show="diagram.relaxation.data.max >= 30 && diagram.relaxation.data.max < 70"
                        class="current-value-visual-value-u"
                        >({{ t("relaxation.medium") }})</span
                      >
                      <span v-show="diagram.relaxation.data.max >= 70" class="current-value-visual-value-u"
                        >({{ t("relaxation.high") }})</span
                      >
                    </el-row>
                    <el-row class="max-min-visual">
                      <span>{{ t("relaxation.min") }}: {{ diagram.relaxation.data.min }}</span>
                      <span v-show="diagram.relaxation.data.min < 30" class="current-value-visual-value-u"
                        >({{ t("relaxation.low") }})</span
                      >
                      <span
                        v-show="diagram.relaxation.data.min >= 30 && diagram.relaxation.data.min < 70"
                        class="current-value-visual-value-u"
                        >({{ t("relaxation.medium") }})</span
                      >
                      <span v-show="diagram.relaxation.data.min >= 70" class="current-value-visual-value-u"
                        >({{ t("relaxation.high") }})</span
                      >
                    </el-row>
                  </el-col>
                </el-row>
                <el-row style="height: 5.9153805625rem; margin-bottom: 0.768999473125rem; width: 100%">
                  <v-chart
                    ref="relaxationChart"
                    :manual-update="true"
                    autoresize
                    class="chart-bg"
                  >
                  </v-chart>
                  <div class="chart-desc">
                    <span
                      style="
                        color: #ffffff80;

                        font-style: normal;
                        font-weight: 400;
                        font-size: 0.625rem;
                        line-height: 0.75rem;
                      "
                      >{{ t("relaxation.relaxationChange") }}</span
                    >
                  </div>
                </el-row>
                <!-- Footer -->
              <div v-if="cardFooter && detailDialogVisible">
                <el-row style="height: 1.375rem">
                  <el-col class="card-footer">
                    <img src="/assets/images/icon.png" alt="" style="width: 0.75rem" />
                    <span
                      style="
                        height: 72.727273%;
                        font-size: 0.75rem;
                        line-height: 119.333333%;
                        font-weight: 400;
                        color: #ffffff80;
                        margin-left: 0.25rem;
                      "
                      >{{ currentDeviceDisplay() }}</span
                    >
                  </el-col>
                </el-row>
              </div>
              <div v-else style="height: 0.375rem"></div>
              </div>
              
            </el-card>
          </el-col>

          <!-- Respiratory Rate -->
          <el-col v-if="diagram.rr.enable" id="rr-container" :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
            <el-card
              element-loading-background="rgba(255, 255, 255, 0.1)"
              id="rr"
              :body-style="{padding: '0px 0px 0px 0px'}"
            >
              <div class="card-main" id="rr-card-main">
                <!-- Header -->
                <el-row class="visual-card-header">
                  <el-col :span="12">
                    <span>{{ t("respiratoryRate.title") }}</span>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <div style="display: flex; justify-content: flex-end; text-align: right;height: 30px;" @click="detailDialogVisible = !detailDialogVisible; detailTarget='rr'">
                        <svg v-if="detailDialogVisible" xmlns="http://www.w3.org/2000/svg" width="30" height="100" viewBox="0 0 100 100" fill="none" style="height: 100%;">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M62.7762 12.7949V31.9706L80.7272 14.0197C82.3602 12.3867 85.0078 12.3867 86.6408 14.0197C88.2738 15.6527 88.2738 18.3003 86.6408 19.9333L68.6898 37.8842H87.8655V46.2473H58.5947C56.2853 46.2473 54.4131 44.3752 54.4131 42.0658V12.7949H62.7762ZM37.6869 88.0628V68.8871L19.736 86.838C18.103 88.471 15.4554 88.471 13.8224 86.838C12.1894 85.205 12.1894 82.5574 13.8224 80.9244L31.7733 62.9735H12.5977V54.6104H41.8685C44.1779 54.6104 46.05 56.4825 46.05 58.7919V88.0628H37.6869Z" fill="#A6A7AF"/>
                        </svg>
                        <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.3333 9.16667L16.3333 5.34518L12.7559 8.92259C12.4305 9.24803 11.9028 9.24803 11.5774 8.92259C11.252 8.59715 11.252 8.06951 11.5774 7.74408L15.1548 4.16667L11.3333 4.16667V2.5H17.1667C17.6269 2.5 18 2.8731 18 3.33333V9.16667H16.3333ZM4.66667 10.8333L4.66667 14.6548L8.24408 11.0774C8.56951 10.752 9.09715 10.752 9.42259 11.0774C9.74803 11.4028 9.74803 11.9305 9.42259 12.2559L5.84518 15.8333L9.66667 15.8333V17.5H3.83333C3.3731 17.5 3 17.1269 3 16.6667V10.8333H4.66667Z" fill="#A6A7AF"/>
                        </svg>
                    </div>
                    
                  </el-col>
                </el-row>
                <!-- Content -->
                <el-row style="margin-top: 0.9168839871875rem; margin-bottom: 0.473230445rem">
                  <el-col :span="12">
                    <el-row>
                      <div class="current-value-visual">
                        <span class="current-value-visual-value" style="color: #3479ff"
                          >{{ diagram.rr.data.rr }}
                          <span class="current-value-visual-value-u"
                            >{{ t("respiratoryRate.timesPerMinute") }}</span
                          ></span
                        >
                      </div>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row class="max-min-visual">
                      <span
                        >{{ t("respiratoryRate.max") }}: {{ diagram.rr.data.max }} {{
                        t("respiratoryRate.timesPerMinute") }}</span
                      >
                    </el-row>
                    <el-row class="max-min-visual">
                      <span
                        >{{ t("respiratoryRate.min") }}: {{ diagram.rr.data.min }} {{
                        t("respiratoryRate.timesPerMinute") }}</span
                      >
                    </el-row>
                  </el-col>
                </el-row>
                <el-row style="height: 5.9153805625rem; margin-bottom: 0.768999473125rem; width: 100%">
                  <v-chart
                    ref="rrChart"
                    :manual-update="true"
                    autoresize
                    class="chart-bg"
                  >
                  </v-chart>
                  <div class="chart-desc">
                    <span>{{ t("respiratoryRate.respiratoryRateChange") }}</span>
                  </div>
                </el-row>
                <!-- Footer -->
              <div v-if="cardFooter && detailDialogVisible">
                <el-row style="height: 1.375rem">
                  <el-col class="card-footer">
                    <img src="/assets/images/icon.png" alt="" style="width: 0.75rem" />
                    <span
                      style="
                        height: 72.727273%;
                        font-size: 0.75rem;
                        line-height: 119.333333%;
                        font-weight: 400;
                        color: #ffffff80;
                        margin-left: 0.25rem;
                      "
                      >{{ currentDeviceDisplay() }}</span
                    >
                  </el-col>
                </el-row>
              </div>
              <div v-else style="height: 0.375rem"></div>
              </div>
              
            </el-card>
          </el-col>
        </el-row>
      </div>

      <el-row v-show="!detailDialogVisible" style="margin-top: 0rem; margin-bottom: 1.5rem">
        <el-col :span="24" style="text-align: center; margin-bottom: 24px;">
            <span style="
            font-family: SF Pro;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;">❤️</span>
            
            <span style="
            color: rgba(255, 255, 255, 0.50);
            text-align: center;
            
            font-family: SF Pro;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;">
                <span v-if="language === 'en'"> Powered by</span>
                <span v-else> 由</spa></span>
            <a style="text-decoration: none" :href="getPoweredByLink()">
                <span style="
                color: #FFF;
                text-align: center;

                font-family: SF Pro;
                font-size: 16px;
                font-style: normal;
                font-weight: 590;
                line-height: normal;">&nbsp;{{ currentDeviceDisplay() }}</span>
            </a>
            <span v-if="language === 'cn'" style="
            color: rgba(255, 255, 255, 0.50);
            text-align: center;
            
            font-family: SF Pro;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;">&nbsp;提供数据</span>
            
        </el-col>
        <el-col :span="24" style="text-align: center">
          <span
            style="
              font-style: normal;
              font-weight: 400;
              font-size: 12px;
              line-height: 14px;
              text-align: center;

              color: #ffffff;
            "
            >{{ getCopyright()}}</span
          >
        </el-col>
      </el-row>

      <!-- Detail -->
      <el-dialog
        v-model="detailDialogVisible"
        @opened="detail"
        @close="dialogClosed"
        style="
          width: 100%;
          /* height: calc(vw * 0.7); */
          border-radius: 2.35rem;
          visibility: hidden;
          background-color: rgba(0, 0, 0, 0);
          display: flex;
          justify-content: center;
          padding: 0;
          margin: 0;
        "
        :modal="false"
        :align-center="true"
      >
        <div
          id="visualDetail"
          style="text-align: center; visibility: visible; background-color: rgba(0, 0, 0, 0)"
        ></div>
      </el-dialog>
    </div>
    <script src="/assets/js/rt/locale.js?ts=1702001667"></script>
    <script src="/assets/js/rt/diagram/options.js?ts=1702001667"></script>
    <script src="/assets/js/rt/diagram/init.js?ts=1702001667"></script>
    <script src="/assets/js/rt/diagram/refersh.js?ts=1702001667"></script>
    <script src="/assets/js/rt/data/eeg.js?ts=1702001667"></script>
    <script src="/assets/js/rt/data/hrV2.js?ts=1702001667"></script>
    <script src="/assets/js/rt/data/bcg.js?ts=1702001667"></script>
    <script src="/assets/js/rt/data/rr.js?ts=1702001667"></script>
    <script src="/assets/js/rt/data/attention.js?ts=1702001667"></script>
    <script src="/assets/js/rt/data/relaxation.js?ts=1702001667"></script>
    <script src="/assets/js/rt/data/pleasure.js?ts=1702001667"></script>
    <script src="/assets/js/rt/data/coherence.js?ts=1702001667"></script>
    <script src="/assets/js/rt/data/flow.js?ts=1702001667"></script>
    <script src="/assets/js/rt/app.js?ts=1702001667"></script>
  </body>
</html>
