jn_sis_zhfx/src/views/Home/components/home/index.vue

<template>
  <div class="home-content">
    <div class="left-content">
      <div class="zjrl-count" :style="getCalcFontSize(32)">
        <div class="count-item">
          <span class="text">清洁能源产业总装机容量</span>
          <span class="count" :style="getCalcFontSize(35)"
            >{{ StationinformationData?.qt?.zzjrl }}
            <i :style="getCalcFontSize(20)">MW</i>
          </span>
        </div>
        <div class="count-item">
          <span class="text" :style="getCalcFontSize(32)">安全天数</span>
          <span class="count" :style="getCalcFontSize(35)"
            >{{ StationinformationData?.qt?.aqts || 0 }}
            <i :style="getCalcFontSize(20)">天</i>
          </span>
        </div>
      </div>
      <div
        class="position"
        :style="`${getCalcFontSize(16)}`"
        v-if="currents == 0"
      >
        <div class="position-icon svg-icon svg-icon-green">
          <svg-icon svgid="svg-position" />
        </div>
        <div class="position-text">当前展示：{{ currentTitle }}</div>
      </div>
      <div
        @click="
          backMap(
            stationList[currents - 1]?.wpId,
            stationList[currents - 1]?.name
          )
        "
        class="position"
        :style="`${getCalcFontSize(16)};cursor:pointer`"
        v-else
      >
        <div class="position-icon svg-icon svg-icon-green">
          <svg-icon svgid="svg-position" />
        </div>
        <div class="position-text">当前展示：{{ currentTitle }}</div>
      </div>
      <div class="gszjrl-count">
        <div class="wind-content">
          <div class="wind-top">
            <div class="wind-title">
              <span class="company" :style="`${getCalcFontSize(16)}`"
                >清洁能源公司</span
              >
              <span class="text" :style="`${getCalcFontSize(16)}`"
                >风电资产</span
              >
            </div>
            <div class="wind-counts">
              <div class="wind-icon">
                <img src="@/assets/map/wind-all.png" alt="" />
              </div>
              <div class="wind-count">
                <div class="wind-count-row">
                  <span class="name" :style="`${getCalcFontSize(14)}`"
                    >风场数量</span
                  >
                  <span class="value" :style="`${getCalcFontSize(18)}`">
                    {{
                      wpId.includes("FDC")
                        ? 1
                        : StationinformationData?.cblpoint?.qjny_fcts
                    }}
                  </span>
                  <i class="unit" :style="`${getCalcFontSize(12)}`">座</i>
                </div>
                <div class="wind-count-row">
                  <span class="name" :style="`${getCalcFontSize(14)}`"
                    >装机容量</span
                  >
                  <span class="value" :style="`${getCalcFontSize(16)}`">
                    {{ StationinformationData?.cblpoint?.qjny_fd_zjrl }}
                  </span>
                  <i class="unit" :style="`${getCalcFontSize(12)}`">MW</i>
                </div>
              </div>
            </div>
          </div>
          <div class="wind-bottom">
            <div class="wind-title">
              <span class="company" :style="`${getCalcFontSize(16)}`"
                >系统接入情况</span
              >
              <span class="text" :style="`${getCalcFontSize(14)}`"
                >装机容量</span
              >
              <span class="value" :style="`${getCalcFontSize(16)}`">{{
                StationinformationData?.cblpoint?.jr_fd_zjrl || 0
              }}</span>
              <span class="unit" :style="`${getCalcFontSize(12)}`">MW</span>
            </div>
            <div class="wind-counts">
              <div class="wind-icon">
                <img src="@/assets/map/wind-jr.png" alt="" />
              </div>
              <div class="wind-count">
                <div class="wind-count-row">
                  <span class="name" :style="`${getCalcFontSize(14)}`"
                    >风场数量</span
                  >
                  <span class="value" :style="`${getCalcFontSize(18)}`">
                    {{
                      wpId.includes("FDC")
                        ? 1
                        : StationinformationData?.cblpoint?.jr_fcts
                    }}
                  </span>
                  <i class="unit" :style="`${getCalcFontSize(12)}`">座</i>
                </div>
                <div class="wind-count-row">
                  <span class="name" :style="`${getCalcFontSize(14)}`"
                    >风机台数</span
                  >
                  <span class="value" :style="`${getCalcFontSize(16)}`">
                    {{
                      wpId.includes("FDC")
                        ? StationinformationData?.station[wpId]?.zjts
                        : StationinformationData?.cblpoint?.jr_fj_ts
                    }}
                  </span>
                  <i class="unit" :style="`${getCalcFontSize(12)}`">台</i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="voltaic-content">
          <div class="wind-top">
            <div class="wind-title" :style="`${getCalcFontSize(16)}`">
              <span class="company">清洁能源公司</span>
              <span class="text">光伏资产</span>
            </div>
            <div class="wind-counts">
              <div class="wind-icon">
                <img src="@/assets/map/voltaic-all.png" alt="" />
              </div>
              <div class="wind-count">
                <div class="wind-count-row">
                  <span class="name" :style="`${getCalcFontSize(14)}`"
                    >光伏电站</span
                  >
                  <span class="value" :style="`${getCalcFontSize(18)}`">
                    {{
                      wpId.includes("GDC")
                        ? 1
                        : StationinformationData?.cblpoint?.qjny_gfts
                    }}
                  </span>
                  <i class="unit" :style="`${getCalcFontSize(12)}`">座</i>
                </div>
                <div class="wind-count-row">
                  <span class="name" :style="`${getCalcFontSize(14)}`"
                    >装机容量</span
                  >
                  <span class="value" :style="`${getCalcFontSize(16)}`">
                    {{ StationinformationData?.cblpoint?.qjny_gf_zjrl }}
                  </span>
                  <i class="unit" :style="`${getCalcFontSize(12)}`">MW</i>
                </div>
              </div>
            </div>
          </div>
          <div class="wind-bottom">
            <div class="wind-title">
              <span class="company" :style="`${getCalcFontSize(16)}`"
                >系统接入情况</span
              >
              <span class="text" :style="`${getCalcFontSize(14)}`"
                >装机容量</span
              >
              <span class="value" :style="`${getCalcFontSize(16)}`">{{
                StationinformationData?.cblpoint?.jr_gf_zjrl || 0
              }}</span>
              <span class="unit" :style="`${getCalcFontSize(12)}`">MW</span>
            </div>
            <div class="wind-counts">
              <div class="wind-icon">
                <img src="@/assets/map/wind-jr.png" alt="" />
              </div>
              <div class="wind-count">
                <div class="wind-count-row">
                  <span class="name" :style="`${getCalcFontSize(14)}`"
                    >光伏电站</span
                  >
                  <span class="value" :style="`${getCalcFontSize(18)}`">
                    {{
                      wpId.includes("GDC")
                        ? 1
                        : StationinformationData?.cblpoint?.jr_gfts
                    }}
                  </span>
                  <i class="unit" :style="`${getCalcFontSize(12)}`">座</i>
                </div>
                <div class="wind-count-row">
                  <span class="name" :style="`${getCalcFontSize(14)}`"
                    >集中式</span
                  >
                  <span class="value" :style="`${getCalcFontSize(16)}`">
                    {{
                      wpId.includes("GDC")
                        ? StationinformationData?.station[wpId]?.jzzjts
                        : StationinformationData?.cblpoint?.jr_gf_jzts || 0
                    }}
                  </span>
                  <i class="unit" :style="`${getCalcFontSize(12)}`">台</i>
                </div>
                <div class="wind-count-row">
                  <span class="name" :style="`${getCalcFontSize(14)}`"
                    >组串式</span
                  >
                  <span class="value" :style="`${getCalcFontSize(14)}`">
                    {{
                      wpId.includes("GDC")
                        ? StationinformationData?.station[wpId]?.zczjts
                        : StationinformationData?.cblpoint?.jr_gf_zcts || 0
                    }}
                  </span>
                  <i class="unit" :style="`${getCalcFontSize(12)}`">台</i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="jnjp-count">
        <div class="jnjp-fd jnjp">
          <div class="jnjp-title">
            <span class="text">节能减排</span>
            <span class="unit">万吨</span>
          </div>
          <div class="jnjp-content">
            <div class="jnjp-item">
              <div class="jnjp-icon svg-icon svg-icon-green">
                <svg-icon class="" svgid="svg-煤" />
              </div>
              <div class="jnjp-value" :style="`${getCalcFontSize(14)}`">
                {{
                  Number(Number(StationinformationData?.qt?.fdjym)).toFixed(2)
                }}
              </div>
              <div class="jnjp-name" :style="`${getCalcFontSize(12)}`">煤</div>
            </div>
            <div class="jnjp-item">
              <div class="jnjp-icon svg-icon svg-icon-green">
                <svg-icon class="" svgid="svg-水" />
              </div>
              <div class="jnjp-value" :style="`${getCalcFontSize(14)}`">
                {{
                  Number(Number(StationinformationData?.qt?.fdjys)).toFixed(2)
                }}
              </div>
              <div class="jnjp-name" :style="`${getCalcFontSize(12)}`">水</div>
            </div>
            <div class="jnjp-item">
              <!-- <div class="kind"> -->
              <div class="jnjp-icon svg-icon svg-icon-green">
                <svg-icon class="" svgid="svg-co2" />
              </div>
              <!-- </div> -->
              <div class="jnjp-value" :style="`${getCalcFontSize(14)}`">
                {{
                  Number(Number(StationinformationData?.qt?.fdco2)).toFixed(2)
                }}
              </div>
              <div class="jnjp-name" :style="`${getCalcFontSize(12)}`">
                二氧化碳
              </div>
            </div>
            <div class="jnjp-item">
              <!-- <div class="kind"> -->
              <div class="jnjp-icon svg-icon svg-icon-green">
                <svg-icon class="" svgid="svg-so2" />
              </div>
              <!-- </div> -->
              <div class="jnjp-value" :style="`${getCalcFontSize(14)}`">
                {{
                  Number(Number(StationinformationData?.qt?.fdso2)).toFixed(2)
                }}
              </div>
              <div class="jnjp-name" :style="`${getCalcFontSize(12)}`">
                二氧化硫
              </div>
            </div>
          </div>
        </div>
        <div class="jnjp-gf jnjp">
          <div class="jnjp-title">
            <span class="text">节能减排</span>
            <span class="unit">万吨</span>
          </div>
          <div class="jnjp-content">
            <div class="jnjp-item">
              <div class="jnjp-icon svg-icon svg-icon-green">
                <svg-icon class="" svgid="svg-煤" />
              </div>
              <div class="jnjp-value" :style="`${getCalcFontSize(14)}`">
                {{
                  Number(Number(StationinformationData?.qt?.gfjym)).toFixed(2)
                }}
              </div>
              <div class="jnjp-name" :style="`${getCalcFontSize(12)}`">煤</div>
            </div>
            <div class="jnjp-item">
              <div class="jnjp-icon svg-icon svg-icon-green">
                <svg-icon class="" svgid="svg-水" />
              </div>
              <div class="jnjp-value" :style="`${getCalcFontSize(14)}`">
                {{
                  Number(Number(StationinformationData?.qt?.gfjys)).toFixed(2)
                }}
              </div>
              <div class="jnjp-name" :style="`${getCalcFontSize(12)}`">水</div>
            </div>
            <div class="jnjp-item">
              <!-- <div class="kind"> -->
              <div class="jnjp-icon svg-icon svg-icon-green">
                <svg-icon class="" svgid="svg-co2" />
              </div>
              <!-- </div> -->
              <div class="jnjp-value" :style="`${getCalcFontSize(14)}`">
                {{
                  Number(Number(StationinformationData?.qt?.gfco2)).toFixed(2)
                }}
              </div>
              <div class="jnjp-name" :style="`${getCalcFontSize(12)}`">
                二氧化碳
              </div>
            </div>
            <div class="jnjp-item">
              <!-- <div class="kind"> -->
              <div class="jnjp-icon svg-icon svg-icon-green">
                <svg-icon class="" svgid="svg-so2" />
              </div>
              <!-- </div> -->
              <div class="jnjp-value" :style="`${getCalcFontSize(14)}`">
                {{
                  Number(Number(StationinformationData?.qt?.gfso2)).toFixed(2)
                }}
              </div>
              <div class="jnjp-name" :style="`${getCalcFontSize(12)}`">
                二氧化硫
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="center-content">
      <SvgMapNX
        v-if="currentTitle == '全国'"
        :homeSuspensionWindowsData="homeSuspensionWindowsData"
        :mapList="mapList"
        :show="showType"
        :data="StationinformationData"
        @clickLabel="clickLabel"
      />
      <!-- 山西 -->
      <SX
        v-if="currentTitle != '全国'"
        :showType="showType"
        :companyid="companyid"
        :data="StationinformationData"
        @clickLabel="clickLabel"
      />
    </div>
    <div class="right-content">
      <div class="gjzb">
        <div class="gjzb-fd">
          <div class="gjzb-title">
            <span :style="`${getCalcFontSize(16)}`">风电关键指标</span>
          </div>
          <div class="gjzb-content">
            <div
              class="gjzb-charts"
              v-for="(item, index) in powerDataHomeFd"
              :key="index"
              @click="openDialog(item.dialogTitle, item.unit, 'fd')"
            >
              <div class="chart">
                <dashPieChartVue
                  height="100%"
                  width="100%"
                  :title="item.title"
                  :unit="item.unit"
                  :value="item.value"
                  :max="item.max"
                  color="green"
                />
              </div>
              <div class="title">
                <span :style="`${getCalcFontSize(16)}`">{{ item.unit }}</span>
                <span :style="`${getCalcFontSize(16)}`">{{ item.title }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="gjzb-gf">
          <div class="gjzb-title">
            <span :style="`${getCalcFontSize(16)}`">光伏关键指标</span>
          </div>
          <div class="gjzb-content">
            <div
              class="gjzb-charts"
              v-for="(item, index) in powerDataHomeGf"
              :key="index"
              @click="openDialog(item.dialogTitle, item.unit, 'gf')"
            >
              <div class="chart">
                <dashPieChartVue
                  height="100%"
                  width="100%"
                  :title="item.title"
                  :unit="item.unit"
                  :value="item.value"
                  :max="item.max"
                  color="orange"
                />
              </div>
              <div class="title">
                <span :style="`${getCalcFontSize(16)}`">{{ item.unit }}</span>
                <span :style="`${getCalcFontSize(16)}`">{{ item.title }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="jrtsxq">
        <div class="jrtsxq-fd">
          <div class="jrts-top">
            <div class="titles">
              <div class="amount">
                <div class="icon fengji-icon svg-icon svg-icon-white"></div>
                <img class="amount-image" src="@/assets/png/wind.png" alt="" />
                <div class="amount-nums">
                  <text class="num-item" :style="`${getCalcFontSize(20)}`">{{
                    StationinformationData?.cblpoint?.jr_fj_ts
                  }}</text>
                  <i :style="`${getCalcFontSize(12)}`" class="unit">台</i>
                </div>
              </div>
              <div
                v-if="
                  !(
                    wpId.includes('FDC') ||
                    wpId.includes('GC') ||
                    wpId.includes('GDC')
                  )
                "
                :style="`${getCalcFontSize(14)}`"
                class="info-nums"
              >
                场站<text class="nums" :style="`${getCalcFontSize(20)}`">{{
                  StationinformationData?.cblpoint?.jr_fcts
                }}</text>
                <i :style="`${getCalcFontSize(12)}`" class="unit">个</i>
              </div>
            </div>
            <div class="types">
              <div class="type-model">
                <div
                  class="type-name"
                  :style="`${getCalcFontSize(14)}`"
                  style="color: #1d99ff"
                >
                  待机
                </div>
                <div class="type-num" :style="`${getCalcFontSize(16)}`">
                  {{ StationinformationData?.mxztmap?.fd_djnum || 0 }}
                </div>
              </div>
              <div class="type-model">
                <div
                  class="type-name"
                  :style="`${getCalcFontSize(14)}`"
                  style="color: #05bb4c"
                >
                  运行
                </div>
                <div class="type-num" :style="`${getCalcFontSize(16)}`">
                  {{ StationinformationData?.mxztmap?.fd_yxnum || 0 }}
                </div>
              </div>
              <div class="type-model">
                <div
                  class="type-name"
                  :style="`${getCalcFontSize(14)}`"
                  style="color: #ba3237"
                >
                  故障
                </div>
                <div class="type-num" :style="`${getCalcFontSize(16)}`">
                  {{ StationinformationData?.mxztmap?.fd_gznum || 0 }}
                </div>
              </div>
              <div class="type-model">
                <div
                  class="type-name"
                  :style="`${getCalcFontSize(14)}`"
                  style="color: #e17e23"
                >
                  检修
                </div>
                <div class="type-num" :style="`${getCalcFontSize(16)}`">
                  {{ StationinformationData?.mxztmap?.fd_jxnum || 0 }}
                </div>
              </div>
              <div class="type-model">
                <div
                  class="type-name"
                  :style="`${getCalcFontSize(14)}`"
                  style="color: #c531c7"
                >
                  限电
                </div>
                <div class="type-num" :style="`${getCalcFontSize(16)}`">
                  {{ StationinformationData?.mxztmap?.fd_xdnum || 0 }}
                </div>
              </div>
              <div class="type-model">
                <div
                  class="type-name"
                  :style="`${getCalcFontSize(14)}`"
                  style="color: #fff"
                >
                  受累
                </div>
                <div class="type-num" :style="`${getCalcFontSize(16)}`">
                  {{ StationinformationData?.mxztmap?.fd_slnum || 0 }}
                </div>
              </div>
              <div class="type-model">
                <div
                  class="type-name"
                  :style="`${getCalcFontSize(14)}`"
                  style="color: #606769"
                >
                  离线
                </div>
                <div class="type-num" :style="`${getCalcFontSize(16)}`">
                  {{ StationinformationData?.mxztmap?.fd_lxnum || 0 }}
                </div>
              </div>
            </div>
          </div>
          <div class="jrts-center">
            <div class="tabSwitchover" :style="`${getCalcFontSize(12)}`">
              (单位: 万kWh)
            </div>
            <div class="power-wrapper">
              <div
                class="power-charts"
                v-for="(item, index) in ForecastPowerNewHome_fc"
                :key="index"
              >
                <div class="power-name" :style="`${getCalcFontSize(12)}`">
                  {{ item[0].name }}
                </div>
                <div class="power-item">
                  <list-bar-chart-2-home
                    :list="item"
                    height="3.889vh"
                    width="7.596vw"
                    @click="
                      handleElectricDetail(item[0].id, item[0].name, 'fc')
                    "
                  />
                  <div class="power-value" :style="`${getCalcFontSize(12)}`">
                    <span
                      :style="
                        item[0].color === 1
                          ? 'background-color:#4B55AE'
                          : 'background-color:#05BB4C'
                      "
                    ></span>
                    <span>{{ item[0].total }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="jrts-bottom">
            <div
              class="ylyxs"
              @click="handleUsingDetail('month', '月利用小时')"
            >
              <span :style="`${getCalcFontSize(14)}`">月利用小时</span>
              <span :style="`${getCalcFontSize(18)}`" class="lyxs-value">{{
                StationinformationData?.qt?.fdylyxs?.toFixed(2) || 0
              }}</span>
              <span :style="`${getCalcFontSize(12)}`" class="lyxs-unit">h</span>
            </div>
            <div class="border"></div>
            <div class="nlyxs">
              <span :style="`${getCalcFontSize(14)}`">年利用小时</span>
              <span :style="`${getCalcFontSize(18)}`" class="lyxs-value">{{
                StationinformationData?.qt?.fdnlyxs?.toFixed(2) || 0
              }}</span>
              <span :style="`${getCalcFontSize(12)}`" class="lyxs-unit">h</span>
            </div>
          </div>
        </div>
        <div class="jrtsxq-gf">
          <div class="jrts-top">
            <div class="titles">
              <div class="amount">
                <div class="icon fengji-icon svg-icon svg-icon-white"></div>
                <img
                  class="amount-image"
                  src="@/assets/imgs/sy-sun.png"
                  alt=""
                />
                <div class="amount-nums">
                  <text class="num-item" :style="`${getCalcFontSize(20)}`">{{
                    Number(
                      StationinformationData?.cblpoint?.jr_gf_jzts +
                        StationinformationData?.cblpoint?.jr_gf_zcts
                    ) || 0
                  }}</text>
                  <i :style="`${getCalcFontSize(12)}`" class="unit">台</i>
                </div>
              </div>
              <div :style="`${getCalcFontSize(14)}`" class="info-nums">
                电站<text class="nums" :style="`${getCalcFontSize(20)}`">{{
                  StationinformationData?.cblpoint?.jr_gfts
                }}</text>
                <i :style="`${getCalcFontSize(12)}`" class="unit">个</i>
              </div>
            </div>
            <div class="types">
              <div class="type-model">
                <div
                  class="type-name"
                  :style="`${getCalcFontSize(14)}`"
                  style="color: #1d99ff"
                >
                  待机
                </div>
                <div class="type-num" :style="`${getCalcFontSize(16)}`">
                  {{ StationinformationData?.mxztmap?.gf_djnum || 0 }}
                </div>
              </div>
              <div class="type-model">
                <div
                  class="type-name"
                  :style="`${getCalcFontSize(14)}`"
                  style="color: #05bb4c"
                >
                  运行
                </div>
                <div class="type-num" :style="`${getCalcFontSize(16)}`">
                  {{ StationinformationData?.mxztmap?.gf_yxnum || 0 }}
                </div>
              </div>
              <div class="type-model">
                <div
                  class="type-name"
                  :style="`${getCalcFontSize(14)}`"
                  style="color: #ba3237"
                >
                  故障
                </div>
                <div class="type-num" :style="`${getCalcFontSize(16)}`">
                  {{ StationinformationData?.mxztmap?.gf_gznum || 0 }}
                </div>
              </div>
              <div class="type-model">
                <div
                  class="type-name"
                  :style="`${getCalcFontSize(14)}`"
                  style="color: #e17e23"
                >
                  检修
                </div>
                <div class="type-num" :style="`${getCalcFontSize(16)}`">
                  {{ StationinformationData?.mxztmap?.gf_jxnum || 0 }}
                </div>
              </div>
              <div class="type-model">
                <div
                  class="type-name"
                  :style="`${getCalcFontSize(14)}`"
                  style="color: #c531c7"
                >
                  限电
                </div>
                <div class="type-num" :style="`${getCalcFontSize(16)}`">
                  {{ StationinformationData?.mxztmap?.gf_xdnum || 0 }}
                </div>
              </div>
              <div class="type-model">
                <div
                  class="type-name"
                  :style="`${getCalcFontSize(14)}`"
                  style="color: #fff"
                >
                  受累
                </div>
                <div class="type-num" :style="`${getCalcFontSize(16)}`">
                  {{ StationinformationData?.mxztmap?.gf_slnum || 0 }}
                </div>
              </div>
              <div class="type-model">
                <div
                  class="type-name"
                  :style="`${getCalcFontSize(14)}`"
                  style="color: #606769"
                >
                  离线
                </div>
                <div class="type-num" :style="`${getCalcFontSize(16)}`">
                  {{ StationinformationData?.mxztmap?.gf_lxnum || 0 }}
                </div>
              </div>
            </div>
          </div>
          <div class="jrts-center">
            <div class="tabSwitchover" :style="`${getCalcFontSize(12)}`">
              (单位: 万kWh)
            </div>
            <div class="power-wrapper">
              <div
                class="power-charts"
                v-for="(item, index) in ForecastPowerNewHome_gf"
                :key="index"
              >
                <div class="power-name" :style="`${getCalcFontSize(12)}`">
                  {{ item[0].name }}
                </div>
                <div class="power-item">
                  <list-bar-chart-2-home
                    :list="item"
                    height="3.889vh"
                    width="7.596vw"
                    @click="
                      handleElectricDetail(item[0].id, item[0].name, 'gf')
                    "
                  />
                  <div class="power-value" :style="`${getCalcFontSize(12)}`">
                    <span
                      :style="
                        item[0].color === 1
                          ? 'background-color:#4B55AE'
                          : 'background-color:#05BB4C'
                      "
                    ></span>
                    <span>{{ item[0].total }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="jrts-bottom">
            <div class="ylyxs">
              <span :style="`${getCalcFontSize(14)}`">月利用小时</span>
              <span :style="`${getCalcFontSize(18)}`" class="lyxs-value">{{
                StationinformationData?.qt?.gfylyxs?.toFixed(2) || 0
              }}</span>
              <span :style="`${getCalcFontSize(12)}`" class="lyxs-unit">h</span>
            </div>
            <div class="border"></div>
            <div class="nlyxs">
              <span :style="`${getCalcFontSize(14)}`">年利用小时</span>
              <span :style="`${getCalcFontSize(18)}`" class="lyxs-value">{{
                StationinformationData?.qt?.gfnlyxs?.toFixed(2) || 0
              }}</span>
              <span :style="`${getCalcFontSize(12)}`" class="lyxs-unit">h</span>
            </div>
          </div>
        </div>
      </div>
      <div class="power-chart" @dblclick="handleShowCharts(currentTitle)">
        <div class="power-title" :style="`${getCalcFontSize(16)}`">
          24小时功率曲线
        </div>
        <power-echarts
          :showTitle="false"
          :CurveValues="CurveValues"
          width="100%"
          height="10.926vh"
          :unit="'MW'"
          :ratio="1000"
          :id="'cut-power'"
          :orient="'horizontal'"
        />
      </div>
    </div>
    <!-- 实时负荷/关键指标弹窗 -->
    <el-dialog
      class="dialogs"
      width="60%"
      top="20vh"
      v-model="dialogGroupRealname"
      :show-close="true"
      destroy-on-close
    >
      <template #title>
        <div class="dialog-title">
          <div class="title">
            {{ currentTitle != "全国" ? currentTitle : "" }}{{ showName }}
          </div>
        </div>
      </template>
      <div class="dialog-body" style="height: 500px">
        <img class="dialog-img" src="@assets/imgs/dialog.png" />
        <windChartCom
          :windCurveValues="groupList"
          :unit="unit"
          :CurveTitle="chartName"
          width="100%"
          height="44.444vh"
          chartId="windChar"
        />
      </div>
    </el-dialog>

    <!-- 发电量，利用小时弹窗 -->
    <el-dialog
      class="dialogs"
      width="80%"
      top="120px"
      v-model="dialogElectric"
      :show-close="true"
      destroy-on-close
    >
      <template #title>
        <div class="dialog-title">
          <div class="title">{{ currentTitle }}{{ showName }}</div>
        </div>
      </template>
      <div class="dialog-body" style="height: 500px">
        <img class="dialog-img" src="@assets/imgs/dialog.png" />
        <div class="date" v-if="showkey === 'electric'">
          <div
            class="day"
            :class="electronType === 'day' ? 'active' : ''"
            @click="handleElectricDetail('day', '日发电量')"
          >
            日
          </div>
          <div
            class="mouth"
            :class="electronType === 'month' ? 'active' : ''"
            @click="handleElectricDetail('month', '月发电量')"
          >
            月
          </div>
          <div
            class="year"
            :class="electronType === 'year' ? 'active' : ''"
            @click="handleElectricDetail('year', '年发电量')"
          >
            年
          </div>
        </div>
        <div class="date" v-if="showkey === 'using'">
          <div
            class="day"
            :class="electronType === 'month' ? 'active' : ''"
            @click="handleUsingDetail('month', '月利用小时')"
          >
            月
          </div>
          <div
            class="year"
            :class="electronType === 'year' ? 'active' : ''"
            @click="handleUsingDetail('year', '年利用小时')"
          >
            年
          </div>
        </div>
        <BarCharts
          :list="barList"
          height="500px"
          :ratio="10000"
          :showLegend="true"
          :top="30"
          :units="showkey === 'electric' ? '万kWh' : '小时'"
          :interval="electronType === 'day' ? 1 : 0"
          :showkey="showkey"
          :showName="showName"
          :color="colors"
        >
        </BarCharts>
      </div>
    </el-dialog>

    <!-- 24小时功率曲线弹窗 -->
    <el-dialog
      class="dialogs"
      width="80%"
      top="100px"
      v-model="dialogShow"
      :show-close="true"
      destroy-on-close
    >
      <template #title>
        <div class="dialog-title">
          <div class="title">{{ showName }}</div>
        </div>
      </template>
      <div class="dialog-body" style="height: 600px">
        <img class="dialog-img" src="@assets/imgs/dialog.png" />
        <power-echarts
          :id="'show-chart'"
          :showTitle="false"
          :CurveValues="showCharts"
          width="100%"
          height="560px"
          :unit="'MW'"
          :orient="'horizontal'"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dashPieChartVue from "./dash-pie-chart.vue";
import Row from "@/components/coms/grid/row.vue";
import Col from "@/components/coms/grid/col.vue";
import GjzbPieChart from "./gjzb-pie-chart.vue";
import ListBarChart2Home from "./list-bar-chart2-home.vue";
//全国地图总览
import SvgMapNX from "./svg-map-nx.vue";
// 山西
import SX from "../map/SX.vue";
import PowerEcharts from "./powerEcharts.vue";
import HeaderNav from "@/components//headerNav/index.vue";
import SvgIcon from "../../../../components/coms/icon/svg-icon.vue";
import windLightDetial from "../windLightDetial.vue";
import windlightSimple from "../windlightSimple.vue";
import {
  FindRealtimeInfo,
  FindUtilizationhours,
  FindPlanproject,
  FindBasicDataInfo,
  FindPowerInfo,
  FindProjectplan,
} from "@/api/home/home.js";
import dayjs from "dayjs";
import windChartCom from "./windChartCom.vue";
import BarCharts from "@/views/Home/components/barCharts.vue";
import { FindGroupRealtime } from "@/api/home/home.js";
export default {
  // 名称
  name: "Map",
  // 使用组件
  components: {
    dashPieChartVue,
    SvgMapNX,
    SX,
    Row,
    Col,
    // PowerReviewHome,
    GjzbPieChart,
    ListBarChart2Home,
    SvgIcon,
    HeaderNav,
    PowerEcharts,
    windLightDetial,
    windlightSimple,
    windChartCom,
    BarCharts,
  },
  mounted() {},
  // 数据
  data() {
    return {
      activeTab: 0, //当前tab
      barList: [
        {
          name: "",
          value: [],
        },
      ], //发电量利用小时柱状图
      currentTitle: "全国", //当前地图名称
      currents: 0, //当前层级
      CurveValues: {
        value: [
          {
            title: "",
            value: [],
          },
        ],
      }, //24小时功率曲线
      companyid: "",
      companyname: "",
      chartsData: [], //实时负荷曲线
      colors: ["#1c99ff", "#05BB4C"],
      dialogVisible: false, //实时负荷弹窗开关
      dialogElectric: false, //发电量、利用小时弹窗开关
      electronType: "day", //日月年切换值
      flag: false, //判断场站id
      ForecastPowerNewHome_fc: [], //全国的风电发电量列表
      ForecastPowerNewHome_gf: [], //全国的光伏发电量列表
      ForecastPowerNewHome_qy: [], //区域发电量列表
      fdlList: [], //山西区域实时负荷列表
      homeSuspensionWindowsData: [], //全国区域所有地区数据
      historyWpId: "", //历史场站id
      mapList: [
        { text: "山西", code: "sxqyxx" },
        { text: "内蒙", code: "nmqyxx" },
        { text: "新疆", code: "xjqyxx" },
        { text: "河北", code: "hbqyxx" },
        { text: "陕西", code: "xsqyxx" },
        { text: "山东", code: "sdqyxx" },
        { text: "西藏", code: "xzqyxx" },
      ],
      penetrateType: 0, //24小时功率曲线开关
      powerDataHome: {},
      qyPower: {},
      ratio: 1,
      showType: "all",
      stationList: [
        {
          name: "全部",
          wpId: "KGDL_FGS",
        },
        {
          name: "山西",
          wpId: "SXJ_RGN",
        },
      ],
      switchShow: false, //接入情况弹窗
      showName: "",
      chartName: "",
      StationinformationData: [],
      showkey: "",
      dialogGroupRealname: false, //全国实时负荷弹窗开关
      groupList: [], //全国实时负荷弹窗数据
      type: "fc", //发电量展示类型
      tabShow: 0,
      timmer: null, // 计时器
      timmer2: null,
      units: ["万kWh"],
      unit: "", //实时负荷弹窗单位
      wpId: "KGDL_FGS",
      wpIds: "KGDL_FGS0",
      dialogShow: false,
      showCharts: {
        value: [
          {
            title: "",
            value: [],
          },
        ],
      },
      powerDataHomeFd: [],
      powerDataHomeGf: [],
      valuelist: [
        // {
        //   value: "SSZGL",
        //   name: "清洁能源实时功率详情",
        //   code: "value1",
        //   sign: 1,
        // },
        // {
        //   value: "SSZGL",
        //   name: "风电实时功率详情",
        //   code: "value2",
        //   sign: 1,
        // },
        // {
        //   value: "SSZGL",
        //   name: "光伏实时功率详情",
        //   code: "value3",
        //   sign: 1,
        // },
        {
          value: "SSPJFS",
          name: "实时风速",
          code: "value4",
        },
        {
          value: "RPJGZD",
          name: "光照强度",
          code: "value6",
        },
        {
          value: "SSZGL",
          name: "实际功率",
          code: "value1",
        },
        {
          value: "FNLYL",
          name: "风能利用率",
          code: "value7",
        },
        {
          value: "FNLYL",
          name: "光能利用率",
          code: "value7",
        },
      ],
      baseSWidth: 3291,
      baseSHeight: 1080,
      baseFontSizeFixNum: 4,
    };
  },
  emits: {
    onEnter: null,
    onBack: null,
  },
  created() {
    this.requestData();
    this.findProjectPlan();
    this.getData(this.wpIds);
  },
  // 函数
  methods: {
    //仪表盘弹窗
    openDialog(dialogTitle, unit, type) {
      let obj = this.valuelist.find((item) => item.name == dialogTitle);
      let params = {
        wpId: this.wpId + (type == "fd" ? "-1" : "-2"),
        uniformCode: obj.value,
      };

      FindGroupRealtime(params).then(({ data }) => {
        this.showPowerChart({
          dialogTitle,
          //   dialogType,
          data: data.map((item) => {
            return {
              dateTime: dayjs(item.time).format("MM-DD HH:mm"),
              value: item[obj.code],
            };
          }),
          chartName: obj.sign ? "实际功率" : obj.dialogTitle,
          unit,
          type,
        });
      });
    },
    getCalcFontSize(fzNum = 0) {
      return `font-size: ${(
        ((fzNum + this.baseFontSizeFixNum) / this.baseSWidth) *
        100
      ).toFixed(3)}vw;`;
    },
    //放大24小时功率曲线
    handleShowCharts(title) {
      //   console.log(title);

      this.showCharts = this.CurveValues;
      this.showName = `${title}24小时功率预测曲线`;
      this.dialogShow = true;
    },
    // 点击地图展示类型
    mapClick(wpId, activeTab) {
      clearInterval(this.timmer);
      clearInterval(this.timmer2);
      this.timmer = null;
      this.timmer2 = null;
      this.activeTab = activeTab;
      this.wpId = wpId;
      this.wpIds =
        wpId.includes("FDC") || wpId.includes("GDC") ? wpId : wpId + activeTab;
      this.requestData();
      this.findProjectPlan();
      //   this.timmer = setInterval(() => {
      //     this.requestData();
      //   }, 5000);

      this.timmer2 = setInterval(() => {
        this.findProjectPlan(); //发电量
        if (this.penetrateType == 3) {
          this.getData(this.wpIds); //24小时功率曲线
        }
      }, 15 * 60 * 1000);
    },
    mapClicks(wpId, activeTab) {
      this.historyWpId = wpId;
      this.mapClick(wpId, activeTab);
    },
    mapClickBack(wpId, activeTab) {
      this.historyWpId = wpId;
      this.activeTab = activeTab;
      this.mapClick(this.historyWpId, activeTab);
    },
    currentActiveTab(penetrateType) {
      this.penetrateType = penetrateType;
      if (penetrateType === 3) {
        this.getData(this.wpIds);
      }
    },
    // 请求服务
    requestData() {
      FindBasicDataInfo({ wpId: this.wpIds }).then(({ data }) => {
        this.StationinformationData = data;
        if (Object.keys(data).length) {
          let mapInfos = [];
          this.mapList.forEach((item) => {
            for (var key in data.sytc) {
              if (item.code == key) {
                data.sytc[key].name = item.text;
                mapInfos.push({ ...data.sytc[key] });
              }
            }
          });
          mapInfos.forEach((element) => {
            element.industryState = true;
            element.companyState = true;
            if (element.name == "山西") {
              if (!Object.hasOwn(element, "sxgszzjrl")) {
                element.companyState = false;
              }
              if (!Object.hasOwn(element, "sxcyzzjrl")) {
                element.industryState = false;
              }
              this.homeSuspensionWindowsData.sxqyxx = { ...element };
            } else if (element.name == "新疆") {
              if (!Object.hasOwn(element, "xjgszzjrl")) {
                element.companyState = false;
              }
              if (!Object.hasOwn(element, "xjcyzzjrl")) {
                element.industryState = false;
              }
              this.homeSuspensionWindowsData.xjqyxx = { ...element };
            } else if (element.name == "内蒙") {
              if (!Object.hasOwn(element, "nmgszzjrl")) {
                element.companyState = false;
              }
              if (!Object.hasOwn(element, "nmcyzzjrl")) {
                element.industryState = false;
              }
              this.homeSuspensionWindowsData.nmqyxx = { ...element };
            } else if (element.name == "西藏") {
              if (!Object.hasOwn(element, "xzgszzjrl")) {
                element.companyState = false;
              }
              if (!Object.hasOwn(element, "xzcyzzjrl")) {
                element.industryState = false;
              }
              this.homeSuspensionWindowsData.xzqyxx = { ...element };
            } else if (element.name == "山东") {
              if (!Object.hasOwn(element, "sdgszzjrl")) {
                element.companyState = false;
              }
              if (!Object.hasOwn(element, "sdcyzzjrl")) {
                element.industryState = false;
              }
              this.homeSuspensionWindowsData.sdqyxx = { ...element };
            } else if (element.name == "陕西") {
              if (!Object.hasOwn(element, "xsgszzjrl")) {
                element.companyState = false;
              }
              if (!Object.hasOwn(element, "xscyzzjrl")) {
                element.industryState = false;
              }
              this.homeSuspensionWindowsData.xsqyxx = { ...element };
            } else if (element.name == "河北") {
              if (!Object.hasOwn(element, "hbgszzjrl")) {
                element.companyState = false;
              }
              if (!Object.hasOwn(element, "hbcyzzjrl")) {
                element.industryState = false;
              }
              this.homeSuspensionWindowsData.hbqyxx = { ...element };
            }
          });
          this.powerDataHomeFd = [
            {
              title: "实时风速",
              value: (data?.qt?.ssfs).toFixed(2),
              dialogTitle: "实时风速",
              max: 25,
              unit: "m/s",
            },
            {
              title: "实际功率",
              value: (data?.qt?.fdsjgl).toFixed(2),
              dialogTitle: "实际功率",
              max: 3000,
              unit: "MW",
            },
            {
              title: "风能利用率",
              value: (data?.qt?.fdfnlyl).toFixed(2),
              dialogTitle: "风能利用率",
              max: 100,
              unit: "%",
            },
          ];
          this.powerDataHomeGf = [
            {
              title: "光照强度",
              value: (data?.qt?.gzzs).toFixed(2),
              dialogTitle: "光照强度",
              max: 3000,
              unit: "W/m²",
            },
            {
              title: "实际功率",
              value: (data?.qt?.gfsjgl).toFixed(2),
              dialogTitle: "实际功率",
              max: 3000,
              unit: "MW",
            },
            {
              title: "光能利用率",
              value: (data?.qt?.gffnlyl).toFixed(2),
              dialogTitle: "光能利用率",
              max: 100,
              unit: "%",
            },
          ];
          //   if (this.tabShow == -1) {
          //     this.powerDataHome = [
          //       {
          //         title: "实时风速",
          //         value: (data?.qt?.ssfs).toFixed(2),
          //         dialogTitle: "实时风速",
          //         max: 3000,
          //         unit: "m/s",
          //       },
          //       {
          //         title: "实际功率",
          //         value: (data?.qt?.fdsjgl).toFixed(2),
          //         dialogTitle: "实际功率",
          //         max: 3000,
          //         unit: "MW",
          //       },
          //       {
          //         title: "风能利用率",
          //         value: (data?.qt?.fnlyl).toFixed(2),
          //         dialogTitle: "风能利用率",
          //         max: 100,
          //         unit: "%",
          //       },
          //     ];
          //   } else if (this.tabShow == 0) {
          //     if (this.currentTitle != "全国") {
          //       if (this.currentTitle.includes("风电场")) {
          //         this.powerDataHome = [
          //           {
          //             title: "实时风速",
          //             value: (data?.qt?.ssfs).toFixed(2),
          //             dialogTitle: "实时风速",
          //             max: 3000,
          //             unit: "m/s",
          //           },
          //           {
          //             title: "实际功率",
          //             value: (data?.qt?.fdsjgl).toFixed(2),
          //             dialogTitle: "实际功率",
          //             max: 3000,
          //             unit: "MW",
          //           },
          //           {
          //             title: "风能利用率",
          //             value: (data?.qt?.fnlyl).toFixed(2),
          //             dialogTitle: "风能利用率",
          //             max: 100,
          //             unit: "%",
          //           },
          //         ];
          //       } else if (this.currentTitle.includes("电站")) {
          //         this.powerDataHome = [
          //           {
          //             title: "光照强度",
          //             value: (data?.qt?.gzzs).toFixed(2),
          //             dialogTitle: "光照强度",
          //             max: 3000,
          //             unit: "W/m²",
          //           },
          //           {
          //             title: "实际功率",
          //             value: (data?.qt?.sjgl).toFixed(2),
          //             dialogTitle: "实际功率",
          //             max: 3000,
          //             unit: "MW",
          //           },
          //           {
          //             title: "光能利用率",
          //             value: (data?.qt?.fnlyl).toFixed(2),
          //             dialogTitle: "光能利用率",
          //             max: 100,
          //             unit: "%",
          //           },
          //         ];
          //       } else {
          //         this.powerDataHome = [
          //           {
          //             title: "实时风速",
          //             value: (data?.qt?.ssfs).toFixed(2),
          //             dialogTitle: "实时风速",
          //             max: 3000,
          //             unit: "m/s",
          //           },
          //           {
          //             title: "光照强度",
          //             value: (data?.qt?.gzzs).toFixed(2),
          //             dialogTitle: "光照强度",
          //             max: 3000,
          //             unit: "W/m²",
          //           },
          //           {
          //             title: "实际功率",
          //             value: (data?.qt?.sjgl).toFixed(2),
          //             dialogTitle: "实际功率",
          //             max: 3000,
          //             unit: "MW",
          //           },
          //         ];
          //       }
          //     } else {
          //       this.powerDataHome = [
          //         {
          //           title: "清洁能源",
          //           value: (data?.qt?.sjgl).toFixed(2),
          //           dialogTitle: "清洁能源实时功率详情",
          //           max: 3000,
          //           unit: "MW",
          //         },
          //         {
          //           title: "风电",
          //           value: (data?.qt?.fdsjgl).toFixed(2),
          //           dialogTitle: "风电实时功率详情",
          //           max: 3000,
          //           unit: "MW",
          //         },
          //         {
          //           title: "光伏",
          //           value: (data?.qt?.gfsjgl).toFixed(2),
          //           dialogTitle: "光伏实时功率详情",
          //           max: 3000,
          //           unit: "MW",
          //         },
          //       ];
          //     }
          //   } else if (this.tabShow == -2) {
          //     this.powerDataHome = [
          //       {
          //         title: "光照强度",
          //         value: (data?.qt?.gzzs).toFixed(2),
          //         dialogTitle: "光照强度",
          //         max: 3000,
          //         unit: "W/m²",
          //       },
          //       {
          //         title: "实际功率",
          //         value: (data?.qt?.sjgl).toFixed(2),
          //         dialogTitle: "实际功率",
          //         max: 3000,
          //         unit: "MW",
          //       },
          //       {
          //         title: "光能利用率",
          //         value: (data?.qt?.fnlyl).toFixed(2),
          //         dialogTitle: "光能利用率",
          //         max: 100,
          //         unit: "%",
          //       },
          //     ];
          //   }
          let sbztmap = {
            fd: {},
            gf: {},
          };
          for (var key in data.mxztmap) {
            let a = key.substring(3, key.length);
            if (key.includes("gf_")) {
              sbztmap.gf[a] = data.mxztmap[key];
            } else if (key.includes("fd_")) {
              sbztmap.fd[a] = data.mxztmap[key];
            }
          }
          this.StationinformationData.sbztmap = sbztmap;
        }
      });
    },
    // 发电量
    findProjectPlan() {
      FindProjectplan({ wpId: this.wpIds }).then(({ data }) => {
        this.qyPower = data.proplanmap;
        this.ForecastPowerNewHome_fc = [
          [
            {
              name: "日发电量",
              id: "day",
              value: data?.proplanmap
                ? data?.proplanmap?.fd_r_sjdl < 0
                  ? 0
                  : (data?.proplanmap?.fd_r_sjdl / 10000).toFixed(2)
                : 0,
              color: 1,
              total: data?.proplanmap
                ? data?.proplanmap?.fd_r_jhdl < 0
                  ? 0
                  : data?.proplanmap?.fd_r_jhdl
                : 0,
            },
          ],
          [
            {
              name: "月发电量",
              id: "month",
              value: data?.proplanmap
                ? data?.proplanmap?.fd_y_sjdl < 0
                  ? 0
                  : (data?.proplanmap?.fd_y_sjdl / 10000).toFixed(2)
                : 0,
              color: 1,
              total: data?.proplanmap
                ? data?.proplanmap?.fd_y_jhdl < 0
                  ? 0
                  : data?.proplanmap?.fd_y_jhdl
                : 0,
            },
          ],
          [
            {
              name: "年发电量",
              id: "year",
              value: data?.proplanmap
                ? data?.proplanmap?.fd_n_sjdl < 0
                  ? 0
                  : (data?.proplanmap?.fd_n_sjdl / 10000).toFixed(2)
                : 0,
              color: 0,
              total: data?.proplanmap
                ? data?.proplanmap?.fd_n_jhdl < 0
                  ? 0
                  : data?.proplanmap?.fd_n_jhdl
                : 0,
            },
          ],
        ];
        this.ForecastPowerNewHome_gf = [
          [
            {
              name: "日发电量",
              id: "day",
              value: data?.proplanmap
                ? data?.proplanmap?.gf_r_sjdl < 0
                  ? 0
                  : (data?.proplanmap?.gf_r_sjdl / 10000).toFixed(2)
                : 0,
              color: 1,
              total: data?.proplanmap
                ? data?.proplanmap?.gf_r_jhdl < 0
                  ? 0
                  : data?.proplanmap?.gf_r_jhdl
                : 0,
            },
          ],
          [
            {
              name: "月发电量",
              id: "month",
              value: data?.proplanmap
                ? data?.proplanmap?.gf_y_sjdl < 0
                  ? 0
                  : (data?.proplanmap?.gf_y_sjdl / 10000).toFixed(2)
                : 0,
              color: 1,
              total: data?.proplanmap
                ? data?.proplanmap?.gf_y_jhdl < 0
                  ? 0
                  : data?.proplanmap?.gf_y_jhdl
                : 0,
            },
          ],
          [
            {
              name: "年发电量",
              id: "year",
              value: data?.proplanmap
                ? data?.proplanmap?.gf_n_sjdl < 0
                  ? 0
                  : (data?.proplanmap?.gf_n_sjdl / 10000).toFixed(2)
                : 0,
              color: 0,
              total: data?.proplanmap
                ? data?.proplanmap?.gf_n_jhdl < 0
                  ? 0
                  : data?.proplanmap?.gf_n_jhdl
                : 0,
            },
          ],
        ];
        this.ForecastPowerNewHome_qy = [
          [
            {
              name: "日发电量",
              id: "day",
              value: data?.proplanmap
                ? data?.proplanmap?.qy_r_sjdl < 0
                  ? 0
                  : (data?.proplanmap?.qy_r_sjdl / 10000).toFixed(2)
                : 0,
              color: 1,
              total: data?.proplanmap
                ? data?.proplanmap?.qy_r_jhdl < 0
                  ? 0
                  : data?.proplanmap?.qy_r_jhdl
                : 0,
            },
          ],
          [
            {
              name: "月发电量",
              id: "month",
              value: data?.proplanmap
                ? data?.proplanmap?.qy_y_sjdl < 0
                  ? 0
                  : (data?.proplanmap?.qy_y_sjdl / 10000).toFixed(2)
                : 0,
              color: 1,
              total: data?.proplanmap
                ? data?.proplanmap?.qy_y_jhdl < 0
                  ? 0
                  : data?.proplanmap?.qy_y_jhdl
                : 0,
            },
          ],
          [
            {
              name: "年发电量",
              id: "year",
              value: data?.proplanmap
                ? data?.proplanmap?.qy_n_sjdl < 0
                  ? 0
                  : (data?.proplanmap?.qy_n_sjdl / 10000).toFixed(2)
                : 0,
              color: 0,
              total: data?.proplanmap
                ? data?.proplanmap?.qy_n_jhdl < 0
                  ? 0
                  : data?.proplanmap?.qy_n_jhdl
                : 0,
            },
          ],
        ];
      });
    },
    // 获取场站24小时功率图
    getData(wpId) {
      FindPowerInfo({ id: wpId }).then((res) => {
        if (res.data) {
          let Powertrend = {
            // 图表所用单位
            units: ["(万KWh)", ""],
            value: [
              {
                title: "预测功率",
                smooth: true, // 使用单位
                value: [],
              },
              {
                title: "理论功率",
                smooth: true, // 使用单位
                value: [],
              },
              {
                title: "实际功率",
                smooth: true, // 使用单位
                value: [],
              },
            ],
          };

          Powertrend.value[0].value = res.data.map((item) => {
            return {
              dateTime: dayjs()
                .startOf("date")
                .add(item.hours, "hour")
                .format("YYYY-MM-DD HH:mm:ss"),
              value: item.bzgl,
            };
          });
          Powertrend.value[1].value = res.data.map((item) => {
            return {
              dateTime: dayjs()
                .startOf("date")
                .add(item.hours, "hour")
                .format("YYYY-MM-DD HH:mm:ss"),
              value: item.llgl,
            };
          });
          Powertrend.value[2].value = res.data.map((item) => {
            return {
              dateTime: dayjs()
                .startOf("date")
                .add(item.hours, "hour")
                .format("YYYY-MM-DD HH:mm:ss"),
              value: item.sjgl,
            };
          });
          this.CurveValues = Powertrend.value;
        }
      });
    },
    firstRender(activeTab, showType, wpId, name) {
      this.activeTab = activeTab;
      this.tabShow = activeTab;
      this.showType = showType;
      //当wpId是FDC/GDC时,此时点击全部、风电、光伏按钮，展示山西地图及对应的公司信息
      let fcId = wpId;
      if ((wpId.includes("FDC") || wpId.includes("GDC")) && this.flag) {
        if (name != "山西") {
          fcId = this.historyWpId;
        } else {
          fcId = "SXJ_RGN";
        }
        this.flag = true;
        this.penetrateType = 3;
        this.currents = 1;
      }
      this.companyid = fcId;
      this.companyname = name;
      this.currentTitle = name || "全国";
      this.mapClicks(fcId, activeTab);
      this.currentActiveTab(this.penetrateType);
    },
    backMap(wpId, planBtnName) {
      this.penetrateType = this.currents == 0 ? 0 : 3;
      this.currents--;
      this.currentTitle =
        this.currents == 0
          ? "全国"
          : this.companyname
          ? this.companyname
          : planBtnName;
      let wpIds =
        this.currents == 0
          ? "KGDL_FGS"
          : this.companyname
          ? this.companyid
          : wpId;
      this.tabShow = this.activeTab;
      this.mapClickBack(wpIds, this.activeTab);
      this.currentActiveTab(this.penetrateType);
    },
    clickLabel(wpId, planBtnName, penetrateType) {
      this.penetrateType = penetrateType;
      this.currents++;
      if (this.currents > 1) {
        this.currents = 2;
      }
      this.wpId =
        wpId.includes("FDC") || wpId.includes("GDC")
          ? wpId
          : this.companyname
          ? this.companyid
          : wpId;
      this.currentTitle =
        wpId.includes("FDC") || wpId.includes("GDC")
          ? planBtnName
          : this.companyname
          ? this.companyname
          : planBtnName;
      this.mapClick(this.wpId, this.activeTab);
      if (wpId.includes("FDC") || wpId.includes("GDC")) {
        this.tabShow = wpId.includes("FDC")
          ? -1
          : wpId.includes("GDC")
          ? -2
          : 0;
      } else {
        this.tabShow = this.activeTab;
      }

      this.flag = wpId.includes("FDC") || wpId.includes("GDC") ? true : false;
      this.currentActiveTab(penetrateType);
    },
    // 全国实时负荷点击弹窗
    showPowerChart({ dialogTitle, data, chartName = "", unit, type }) {
      this.dialogGroupRealname = true;
      this.unit = unit;
      this.showName =
        this.wpId.includes("FDC") || this.wpId.includes("GDC")
          ? dialogTitle
          : type == "fd"
          ? "风电" + dialogTitle
          : "光伏" + dialogTitle;
      this.chartName = chartName ? chartName : dialogTitle;
      this.groupList = data;
    },
    // 区域实时负荷点击弹窗
    handleClick(uniformCode, title, unit) {
      let key = "";
      switch (uniformCode) {
        case "SSPJFS":
          key = "ssfs";
          break;
        case "SSZLLGL":
          key = "llgl";
          break;
        case "SSZGL":
          key = "sjgl";
          break;
        case "FNLYL":
          key = "fnlyl";
          break;
        case "RPJGZD":
          key = "gzzs";
          break;
      }
      FindRealtimeInfo({
        uniformCode,
        wpId:
          this.wpId +
          (this.wpId.includes("FDC") || this.wpId.includes("GDC")
            ? ""
            : this.activeTab),
      }).then(({ data }) => {
        this.dialogVisible = true;
        this.chartsData = data.map((item) => {
          return {
            dateTime: dayjs()
              .startOf("date")
              .add(item.hours, "hour")
              .format("MM-DD HH:mm"),
            value: item[key],
          };
        });
        this.unit = unit;
        this.showName = title;
      });
    },
    handleUsingDetail(timetype, title) {
      let format = timetype == "month" ? "YYYY-MM" : "YYYY";
      this.showkey = "using";
      this.electronType = timetype;
      FindPlanproject({
        wpId:
          this.wpId +
          (this.wpId.includes("FDC") || this.wpId.includes("GDC")
            ? ""
            : this.activeTab),
        timetype,
      }).then(({ data }) => {
        this.dialogElectric = true;
        let barList = data.map((item) => {
          if (timetype == "month") {
            return {
              dateTime: dayjs()
                .startOf("year")
                .add(item.hours - 1, "month")
                .format("YYYY-MM"),
              value: item["lyxs"],
            };
          } else {
            return {
              dateTime: dayjs()
                .startOf(timetype)
                .subtract(item.hours, timetype)
                .format(format),
              value: item["lyxs"],
            };
          }
        });
        if (timetype == "month") {
          this.barList = [
            {
              name: title,
              yAxisIndex: 0,
              value: barList,
            },
          ];
        } else {
          this.barList = [
            {
              name: title,
              yAxisIndex: 0,
              value: barList.reverse(),
            },
          ];
        }
        this.barList = [
          {
            name: title,
            yAxisIndex: 0,
            value: barList,
          },
        ];
        this.showName = title;
      });
    },
    handleElectricDetail(timetype, title, type) {
      let wpId = "";
      if (type) {
        this.type = type;
        type == "fc" ? (wpId = this.wpId + "-1") : (wpId = this.wpId + "-2");
      } else {
        wpId =
          this.wpId +
          (this.wpId.includes("FDC") || this.wpId.includes("GDC")
            ? ""
            : this.activeTab);
      }
      this.dialogElectric = true;
      let format =
        timetype == "day" ? "MM-DD" : timetype == "month" ? "YYYY-MM" : "YYYY";
      this.showkey = "electric";
      this.electronType = timetype;
      FindPlanproject({
        wpId,
        timetype,
      }).then(({ data }) => {
        this.dialogElectric = true;
        let sjdlList = data.map((item) => {
          if (timetype == "month") {
            return {
              dateTime: dayjs()
                .startOf("year")
                .add(item.hours - 1, "month")
                .format("YYYY-MM"),
              value: item.sjdl.toFixed(2),
            };
          } else if (timetype == "year") {
            return {
              dateTime: dayjs()
                .startOf(timetype)
                .subtract(item.hours, timetype)
                .format(format),
              value: item.sjdl.toFixed(2),
            };
          } else {
            return {
              dateTime: dayjs()
                .startOf("month")
                .add(item.hours - 1, "day")
                .format("MM-DD"),
              value: item.sjdl.toFixed(2),
            };
          }
        });
        let jhdlList = data.map((item) => {
          if (timetype == "month") {
            return {
              dateTime: dayjs()
                .startOf("year")
                .add(item.hours - 1, "month")
                .format("YYYY-MM"),
              value: item.jhdl.toFixed(2),
            };
          } else if (timetype == "year") {
            return {
              dateTime: dayjs()
                .startOf(timetype)
                .subtract(item.hours, timetype)
                .format(format),
              value: item.jhdl.toFixed(2),
            };
          } else {
            return {
              dateTime: dayjs()
                .startOf("month")
                .add(item.hours - 1, "day")
                .format("MM-DD"),
              value: item.jhdl.toFixed(2),
            };
          }
        });
        this.barList = [
          {
            name: "实际电量",
            value:
              timetype == "day" || timetype == "month"
                ? sjdlList
                : sjdlList.reverse(),
          },
          {
            name: "计划电量",
            value:
              timetype == "day" || timetype == "month"
                ? jhdlList
                : jhdlList.reverse(),
          },
        ];
        this.showName =
          this.wpId.includes("FDC") || this.wpId.includes("GDC")
            ? title
            : type == "fc"
            ? "风电" + title
            : "光伏" + title;
      });
    },
  },
  unmounted() {
    clearInterval(this.timmer);
    clearInterval(this.timmer2);
    this.timmer = null;
    this.timmer2 = null;
  },
  watch: {
    qyPower(val) {
      if (Object.keys(val).length) {
        let data = val;
        this.fdlList = [
          [
            {
              title: "日发电量",
              id: "day",
              value:
                this.tabShow == 0
                  ? data.qy_r_sjdl
                  : this.tabShow == -1
                  ? data.fd_r_sjdl
                  : data.gf_r_sjdl,
              color: 1,
              total:
                this.tabShow == 0
                  ? data.qy_r_jhdl
                  : this.tabShow == -1
                  ? data.fd_r_jhdl
                  : data.gf_r_jhdl,
            },
          ],
          [
            {
              title: "月发电量",
              id: "month",
              value:
                this.tabShow == 0
                  ? data.qy_y_sjdl
                  : this.tabShow == -1
                  ? data.fd_y_sjdl
                  : data.gf_y_sjdl,
              color: 1,
              total:
                this.tabShow == 0
                  ? data.qy_y_jhdl
                  : this.tabShow == -1
                  ? data.fd_y_jhdl
                  : data.gf_y_jhdl,
            },
          ],
          [
            {
              title: "年发电量",
              id: "year",
              value:
                this.tabShow == 0
                  ? data.qy_n_sjdl
                  : this.tabShow == -1
                  ? data.fd_n_sjdl
                  : data.gf_n_sjdl,
              color: 0,
              total:
                this.tabShow == 0
                  ? data.qy_n_jhdl
                  : this.tabShow == -1
                  ? data.fd_n_jhdl
                  : data.gf_n_jhdl,
            },
          ],
        ];
      }
    },
  },
  computed: {
    // 实时风速
    windSpeedRota() {
      let count = this.StationinformationData?.qt?.ssfs / 25;
      let result = Number((310 * count + 50).toFixed(0));
      if (result) {
        if (result > 310) {
          return "rotateZ(310deg)";
        } else {
          return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
        }
      } else {
        return "rotateZ(50deg)";
      }
    },
    // 理论功率
    ideaPowerRota() {
      let zctj =
        this.wpId.includes("FDC") || this.wpId.includes("GDC")
          ? (
              this.StationinformationData?.station[this.wpId]?.zjrl / 1000
            ).toFixed(2)
          : this.StationinformationData?.qt?.zzjrl;
      let count = this.StationinformationData?.qt?.llgl / 1000 / zctj;
      let result = Number((310 * count + 50).toFixed(0));
      if (result) {
        if (result > 310) {
          return "rotateZ(310deg)";
        } else {
          return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
        }
      } else {
        return "rotateZ(50deg)";
      }
    },
    // 光照指数
    illuminationRota() {
      let count = this.StationinformationData?.qt?.gzzs / 1200;
      let result = Number((310 * count + 50).toFixed(0));
      if (result) {
        if (result > 310) {
          return "rotateZ(310deg)";
        } else {
          return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
        }
      } else {
        return "rotateZ(50deg)";
      }
    },
    //总保证功率
    guarantee() {
      let count = Number(this.StationinformationData?.qt?.fnlyl) / 100;
      let result = Number((310 * count + 50).toFixed(0));
      if (result) {
        if (result > 310) {
          return "rotateZ(310deg)";
        } else {
          return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
        }
      } else {
        return "rotateZ(50deg)";
      }
    },
    // 实际功率
    actualPowerRota() {
      let zctj =
        this.wpId.includes("FDC") || this.wpId.includes("GDC")
          ? (
              this.StationinformationData?.station[this.wpId]?.zjrl / 1000
            ).toFixed(2)
          : this.StationinformationData?.qt?.zzjrl;
      let count = this.StationinformationData?.qt?.sjgl / 1000 / zctj;
      let result = Number((310 * count + 50).toFixed(0));
      if (result) {
        if (result > 310) {
          return "rotateZ(310deg)";
        } else {
          return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
        }
      } else {
        return "rotateZ(50deg)";
      }
    },
  },
};
</script>

<style lang="less" scoped>
// ul,
// ul li,
// p {
//   margin: 0;
//   padding: 0;
//   list-style: none;
// }
.date {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #b3b3b3;
  position: absolute;
  right: 0;
  top: -20px;

  .day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 22px;
    border: 1px solid #0f5e30;
    border-radius: 11px 0px 0px 11px;
    background: rgba(67, 81, 107, 0.2);

    &.active {
      background: rgba(5, 187, 76, 0.4);
      color: #ffffff;
    }
  }

  .mouth {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 22px;
    border-top: 1px solid #0f5e30;
    border-bottom: 1px solid #0f5e30;
    background: rgba(67, 81, 107, 0.2);

    &.active {
      background: rgba(5, 187, 76, 0.4);
      color: #ffffff;
    }
  }

  .year {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 22px;
    border: 1px solid #0f5e30;
    border-radius: 0px 11px 11px 0px;
    background: rgba(67, 81, 107, 0.2);

    &.active {
      background: rgba(5, 187, 76, 0.4);
      color: #ffffff;
    }
  }
}
.home-content {
  height: calc(100% - 4.17vh); //45px
  width: 100%;
  position: relative;
  .center-content {
    width: 100%;
    height: 100%;
  }
  .left-content {
    position: absolute;
    padding-left: 0.91vw; //30px
    padding-top: 2.78vh; //30px
    z-index: 4;
    //总资产
    .zjrl-count {
      .count-item {
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #ffffff;
        display: flex;
        flex-direction: column;

        .text {
          letter-spacing: 0.12vw; //4px
        }
        .count {
          font-size: 3.24vh; //35px
          font-family: Bicubik;
          color: #05bb4c;
          padding-top: 0.93vh; //10px
          i {
            margin-left: 0.3vw; //10px

            font-style: normal;
            font-family: Adobe Heiti Std;
            font-size: 1.48vh; //16px
          }
        }
      }
      .count-item + .count-item {
        margin-top: 2.78vh; //30px
      }
    }
    .position {
      //   position: absolute;
      //   left: 1.793vw;
      //   bottom: 6.481vh;
      margin-top: 7.41vh; //121px
      margin-left: 0.334vw; //11
      color: #05bb4c;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .position-icon {
        margin-right: 0.3vw; //10px
        svg {
          width: 0.638vw;
          height: 0.638vw;
        }
      }
    }
    //公司资产
    .gszjrl-count {
      margin-top: 2.5vh; //27
      width: 23.701vw; //762px
      height: 32.5vh; //351px
      display: flex;
      justify-content: space-between;

      .wind-content,
      .voltaic-content {
        width: 49%; //373px
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        padding: 1.39vh 0.46vw;

        .unit {
          color: #768190;
          font-style: normal;
          font-size: 0.608vw;
        }
        .wind-top {
          .wind-title {
            // height: calc(100% - 11.2vh);
            padding: 0 0 0.93vh 0.46vw;
            border-bottom: 1px solid rgb(51, 51, 51);
            display: flex;
            align-items: center;
            .company {
              margin-right: 1.12vw; //37px
              font-size: 0.61vw;
            }
          }
          .wind-counts {
            position: relative;
            border-bottom: 0.09vh solid rgba(51, 51, 51, 1); //1px
            &::before {
              content: "";
              width: 0.4vw; //13px
              height: 0.37vh; //4px
              background: #05bb4c;
              position: absolute;
              left: 0;
              bottom: 0;
              transform: translateY(50%);
            }
          }
        }
        .wind-top,
        .wind-bottom {
          .wind-title {
            border-bottom: 0.09vh solid rgba(51, 51, 51, 1); //1px

            // font-size: 1.48vh; //16px
            font-size: 0.607vw; //16px
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
          }
          .wind-counts {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 2.13vh 0;

            .wind-icon {
              margin: 0 1.75vw 0 0.7vw;
              width: 2.43vw;
              height: 7.41vh;

              display: flex;
              justify-content: flex-start;
              align-items: center;
              img {
                width: 100%;
              }
            }
            .wind-count {
              font-size: 0.55vw; //14px
              height: 7.41vh;
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: flex-start;

              .wind-count-row {
                width: 5.17vw;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: nowrap;

                .name {
                  color: #999;
                  font-size: 0.55vw;
                  white-space: nowrap;
                }
                &:nth-child(1) {
                  .value {
                    color: #05bb4c;
                    width: 1.82vw;
                    height: 100%;
                    font-size: 0.67vw;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  }
                }
                &:not(:first-child) {
                  .value {
                    font-style: italic;
                    width: 1.82vw;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0 0.52vw 0 0.52vw;
                    font-size: 0.61vw;
                  }
                }
              }
            }
          }
        }
        .wind-bottom {
          .wind-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.389vh 0.304vw;

            .text {
              color: #999;
            }
            .value {
              font-style: italic;
            }
            .unit {
            }
          }
          .wind-counts {
          }
        }
      }
    }
    //节能减排
    .jnjp-count {
      width: 23.701vw; //762px
      //   height: 14.63vh; //158px
      margin-top: 1.85vh; //20px
      display: flex;
      justify-content: space-between;

      .jnjp {
        width: 49%; //373px
        // height: 14.63vh;
        background: rgba(0, 0, 0, 0.4);
        padding: 1.389vh 0.729vw;

        .jnjp-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 0.243vw 1.389vh 8px;
          border-bottom: 0.09vh solid rgba(51, 51, 51, 1); //1px

          .text {
            font-size: 1.48vh; //16px
            font-family: Microsoft YaHei;
            color: #fff;
          }
          .unit {
            font-size: 1.11vh; //12px
            font-family: Microsoft YaHei;
            color: #b1b1b1;
          }
        }
        .jnjp-content {
          display: flex;
          align-items: center;
          justify-content: space-around;
          padding: 1.296vh 0 1.296vh 0;
          .jnjp-item {
            width: 25%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;

            .jnjp-icon {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 1.215vw;
              height: 3.704vh;

              svg {
                width: 100%;
                height: 100%;
              }
            }

            .jnjp-value {
              font-size: 1.3vh; //14px
              font-family: SourceHanSansCN;
              margin-top: calc(1.204vh / 2);
            }
            .jnjp-name {
              font-size: 1.11vh; //12px
              font-family: Microsoft YaHei;
              margin-top: calc(1.204vh / 2);
            }
          }
        }
      }
    }
  }

  .right-content {
    position: absolute;
    padding-right: 0.91vw; //30px
    padding-top: 14.35vh; //155px
    z-index: 4;
    right: 0;
    top: 0;
    .gjzb {
      display: flex;
      justify-content: space-between;
      //   width: 30.99vw; //1020px
      width: 26.922vw;
      height: 16.204vh;
      .gjzb-fd,
      .gjzb-gf {
        width: 49%;
        height: 100%;
        padding: 1.39vh 0.46vw;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;

        .gjzb-title {
          padding: 0 0 0.93vh 0.46vw;
          width: 100%;
          display: flex;
          font-family: Microsoft YaHei;
          border-bottom: 0.09vh solid rgba(51, 51, 51, 1); //1px
        }
        .gjzb-content {
          flex: 1;
          width: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .gjzb-charts {
            cursor: pointer;
            width: calc((100% / 3) - 0.456vw); //15
            height: 11.759vh; //127
            display: flex;
            flex-direction: column;
            justify-content: center;
            .chart {
              height: 7.87vh; //85
            }
            .title {
              display: flex;
              flex-direction: column;
              align-items: center;
            }
          }
        }
      }
    }
    .jrtsxq {
      display: flex;
      justify-content: space-between;
      //   width: 30.99vw; //1020px
      width: 26.92vw; //1020px
      margin-top: 1.85vh; //20px
      .jrtsxq-fd,
      .jrtsxq-gf {
        width: 49%; //433px
        height: 35.694vh; //385.5px
        background: rgba(0, 0, 0, 0.4);

        .jrts-top {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          height: 12.22vh; //132px
          padding: 1.204vh 0.46vw 0 0.46vw; //13px 15px
          .titles {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.481vh; //16px
            height: 4.537vh;
            .unit {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-style: normal;
              color: #7d838c;
            }
            .amount {
              display: flex;
              flex-direction: row;
              align-items: center;
              position: relative;

              .fengji-icon {
                position: absolute;
                border-radius: 50%;
                width: 4.259vh;
                height: 4.259vh;
                box-shadow: inset 0.046vw -1px 1px 0px @green;
                animation: fadenum 5s linear infinite;

                @keyframes fadenum {
                  100% {
                    transform: rotate(360deg);
                  }
                }
              }
              .amount-image {
                transform: translateX(15%);

                width: 2.856vw;
              }
              .amount-nums {
                margin-left: 0.547vw; //5px
                display: flex;
                flex-direction: row;
                align-items: baseline;
                .num-item {
                  color: #ffffff;
                  font-family: AgencyFB;
                  margin-right: 0.15vw; //5px
                }
              }
            }

            .info-nums {
              display: flex;
              align-items: baseline;
              color: #7d838c;

              .nums {
                color: #ffffff;
                margin: 0 0.46vh; //5px
              }
            }
          }
          .types {
            display: flex;
            align-items: center;
            height: 5.833vh; //63px
            width: 100%;
            border-bottom: 1px solid rgba(163, 164, 166, 0.2);
            .type-model {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;
              width: 16%;
              // height: 75%;

              .type-name {
                font-family: Agency FB;
                margin-bottom: 1.204vh; //13px
              }
              //   .type-num {
              //     height: 15px;
              //   }
            }
          }
        }
        .jrts-center {
          height: 16.204vh; //175px
          width: 100%;
          padding: 0 0.46vw; //13px 15px
          .tabSwitchover {
            text-align: right;
            padding: 1.204vh 0 0.556vh 0; //13px 6px
          }
          .power-wrapper {
            display: flex;
            flex-direction: column; // padding: 1% 5%;
            height: 13.241vh; //143px
            width: 100%;
            .power-charts {
              display: flex;
              flex-direction: row;
              align-items: center;
              width: 100%;
              //   height: 3.889vh; //12px
              height: calc(13.241vh / 3); //12px

              .power-name-old {
                color: #999999;
              }
              .power-name {
                white-space: nowrap;
                color: #999999;
                margin-right: 0.243vw; //8px
              }
              .power-item {
                display: flex;
                align-items: center;
                flex: 1; //292px
                height: 100%;

                .power-value-old {
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: space-between;
                  margin-bottom: -12px;
                  padding: 0 15px;
                  .green-value {
                    color: #05bb4c;
                  }
                  .purple-value {
                    color: #4b55ae;
                  }
                }
                .power-value {
                  font-family: Bicubik;
                  display: flex;
                  align-items: center;
                  span:nth-child(1) {
                    width: 0.152vw;
                    height: 0.152vw;
                    border-radius: 50%;
                    display: inline-block;
                    background-color: #fff;
                    margin-right: 0.152vw; //5px
                    margin-left: 0.152vw; //5px
                  }
                  .green-value {
                    color: #05bb4c;
                  }
                  .purple-value {
                    color: #4b55ae;
                  }
                }
              }
            }
          }
        }
        .jrts-bottom {
          width: 100%;
          height: 7.176vh; //77.5
          display: flex;
          justify-content: space-around;
          align-items: center;
          background: rgba(0, 0, 0, 0.15);
          .ylyxs,
          .nlyxs {
            width: 6.563vw; //216
            display: flex;
            justify-content: space-around;
            align-items: center;

            .lyxs-value {
              font-family: Bicubik;
              color: #05bb4c;
            }
            .lyxs-unit {
              font-family: Microsoft YaHei;
              color: #b3b3b3;
            }
          }
          .border {
            width: 0.03vw; //1px
            height: 3.426vh; //37
            background: #4a4f56;
          }
        }
      }
    }

    .power-chart {
      margin-top: 1.852vh; //20
      width: 26.922vw; //886
      height: 15.278vh; //165
      background: rgba(0, 0, 0, 0.4);
      padding: 0 0.456vw; //15
      .power-title {
        padding: 1.481vh 0 1.296vh 0; //16 14
        border-bottom: 1px solid rgba(163, 164, 166, 0.2);
      }
    }
  }
}
</style>