fd_dwgz_zhyw_nx/src/views/Home/components/map.vue

<template>
  <div class="map">
    <HeaderNav
      ref="header"
      :wpId="wpId"
      @firstRender="firstRender"
      @typeFlag="typeFlag"
      :isShows="false"
    />
    <!-- 山西左侧信息 -->
    <div v-if="currentTitle != '全国'">
      <div class="security-days safe_power">
        <div class="text">安全天数:</div>
        <div class="num">
          <span class="font-num">{{
            StationinformationData?.qt?.aqts
              ? StationinformationData.qt?.aqts
              : "0"
          }}</span>
          <span class="unit">天</span>
        </div>
        <div class="security">
          <div class="text">资产统计:</div>
          <div class="num">
            <span class="font-num">
              {{
                wpId.includes("FDC") || wpId.includes("GDC")
                  ? (
                      StationinformationData?.station[wpId]?.zjrl / 1000
                    ).toFixed(2)
                  : StationinformationData?.qt?.zzjrl
              }}
            </span>
            <span class="unit-t">MW</span>
          </div>
          <div class="lineBox">
            <div class="fd-rl" v-if="tabShow == -1 || tabShow == 0">
              <span class="text">风电</span>
              <span class="font-num">
                {{
                  wpId.includes("FDC")
                    ? (
                        StationinformationData?.station[wpId]?.zjrl / 1000
                      ).toFixed(2)
                    : StationinformationData?.qt?.fdzzjrl
                }}
              </span>
              <span class="unit">MW</span>
            </div>
            <div class="gf-rl" v-if="tabShow == -2 || tabShow == 0">
              <span class="text">光伏</span>
              <span class="font-num">{{
                wpId.includes("GDC")
                  ? (
                      StationinformationData?.station[wpId]?.zjrl / 1000
                    ).toFixed(2)
                  : StationinformationData?.qt?.gfzzjrl
              }}</span>
              <span class="unit">MW</span>
            </div>
          </div>
        </div>
      </div>
      <div
        class="qjny-info safe_power"
        @mouseenter="switchShow = true"
        @mouseleave="switchShow = false"
      >
        <ul>
          <li v-show="tabShow == -1 || tabShow == 0">
            <div class="imgs">
              <img src="@assets/imgs/downF.png" />
              <img src="@assets/imgs/windup.png" class="qty_img" />
            </div>
            <p class="qty_tit">
              风场数量
              <sapn class="qty_value">
                {{
                  wpId.includes("FDC")
                    ? 1
                    : StationinformationData?.cblpoint.qjny_fcts
                }}</sapn
              >
              <span class="qty_u">个</span>
            </p>
            <div class="qty_content">
              <p class="qty_imag">
                风机台数
                <span class="qty_val">
                  {{
                    wpId.includes("FDC")
                      ? StationinformationData?.station[wpId]?.zjts
                      : StationinformationData?.cblpoint.qjny_fj_ts
                  }} </span
                ><span class="qty_unit">台</span>
              </p>
              <p class="qty_imag">
                陆地风机
                <span class="qty_val">
                  {{
                    wpId.includes("FDC")
                      ? StationinformationData?.station[wpId]?.zjts
                      : StationinformationData?.cblpoint.qjny_fj_ts
                  }} </span
                ><span class="qty_unit">台</span>
              </p>
              <p class="qty_imag">
                海上风机
                <span class="qty_val">
                  {{
                    wpId.includes("FDC")
                      ? StationinformationData?.station[wpId]?.hszjts
                      : StationinformationData?.cblpoint.qjny_hsfj_ts
                  }} </span
                ><span class="qty_unit">台</span>
              </p>
            </div>
          </li>
          <li class="line" v-show="tabShow == 0"></li>
          <li v-show="tabShow == 0 || tabShow == -2">
            <div class="imgs">
              <img src="@assets/imgs/downg.png" />
              <img src="@assets/imgs/ptyup.png" class="qty_img" />
            </div>
            <p class="qty_tit">
              光伏数量
              <sapn class="qty_value" id="pv">{{
                wpId.includes("GDC")
                  ? 1
                  : StationinformationData?.cblpoint.qjny_gfts
              }}</sapn>
              <span class="qty_u">个</span>
            </p>
            <div class="qty_content">
              <p class="qty_imag">
                逆变器
                <span class="qty_val">
                  {{
                    wpId.includes("GDC")
                      ? StationinformationData?.station[wpId]?.jzzjts +
                        StationinformationData?.station[wpId]?.zczjts
                      : StationinformationData?.cblpoint.qjny_gf_jzts +
                        StationinformationData?.cblpoint.qjny_gf_zcts
                  }}
                </span>
                <span class="qty_unit">台</span>
              </p>
              <p class="qty_imag">
                集中式<span class="qty_val">
                  {{
                    wpId.includes("GDC")
                      ? StationinformationData?.station[wpId]?.jzzjts
                      : StationinformationData?.cblpoint.qjny_gf_jzts
                  }} </span
                ><span class="qty_unit">台</span>
              </p>
              <p class="qty_imag">
                组串式<span class="qty_val">
                  {{
                    wpId.includes("GDC")
                      ? StationinformationData?.station[wpId]?.zczjts
                      : StationinformationData?.cblpoint.qjny_gf_zcts
                  }} </span
                ><span class="qty_unit">台</span>
              </p>
            </div>
          </li>
        </ul>
        <div class="switch-jrqk" v-show="switchShow">
          <div><img src="@/assets/imgs/arrows.png" /> 接入情况</div>
          <ul>
            <li v-show="tabShow == -1 || tabShow == 0">
              <div class="imgs">
                <img src="@assets/imgs/downF.png" />
                <img src="@assets/imgs/windup.png" class="qty_img" />
              </div>
              <p class="qty_tit">
                风场数量
                <sapn class="qty_value">
                  {{
                    wpId.includes("FDC")
                      ? 1
                      : StationinformationData?.cblpoint?.jr_fcts
                  }}</sapn
                >
                <span class="qty_u">个</span>
              </p>
              <div class="qty_content">
                <p class="qty_imag">
                  风机台数<span class="qty_val">
                    {{
                      wpId.includes("FDC")
                        ? StationinformationData?.station[wpId]?.zjts
                        : StationinformationData?.cblpoint?.jr_fj_ts
                    }} </span
                  ><span class="qty_unit">台</span>
                </p>
                <p class="qty_imag">
                  陆地风机<span class="qty_val">
                    {{
                      wpId.includes("FDC")
                        ? StationinformationData?.station[wpId]?.zjts
                        : StationinformationData?.cblpoint?.jr_fj_ts
                    }} </span
                  ><span class="qty_unit">台</span>
                </p>
                <p class="qty_imag">
                  海上风机<span class="qty_val">
                    {{
                      wpId.includes("FDC")
                        ? StationinformationData?.station[wpId]?.zjts
                        : StationinformationData?.cblpoint?.jr_fj_ts
                    }} </span
                  ><span class="qty_unit">台</span>
                </p>
              </div>
            </li>
            <li class="line" v-if="tabShow == 0"></li>
            <li v-show="tabShow == 0 || tabShow == -2">
              <div class="imgs">
                <img src="@assets/imgs/downg.png" />
                <img src="@assets/imgs/ptyup.png" class="qty_img" />
              </div>

              <p class="qty_tit">
                光伏数量
                <sapn class="qty_value" id="pv">
                  {{
                    wpId.includes("GDC")
                      ? 1
                      : StationinformationData?.cblpoint?.jr_gfts
                  }}</sapn
                >
                <span class="qty_u">个</span>
              </p>
              <div class="qty_content">
                <p class="qty_imag">
                  逆变器<span class="qty_val">
                    {{
                      wpId.includes("GDC")
                        ? StationinformationData?.station[wpId]?.jzzjts +
                          StationinformationData?.station[wpId]?.zczjts
                        : StationinformationData?.cblpoint.jr_gf_jzts +
                          StationinformationData?.cblpoint.jr_gf_zcts
                    }}
                  </span>
                  <span class="qty_unit">台</span>
                </p>
                <p class="qty_imag">
                  集中式<span class="qty_val">
                    {{
                      wpId.includes("GDC")
                        ? StationinformationData?.station[wpId]?.jzzjts
                        : StationinformationData?.cblpoint?.jr_gf_jzts
                    }} </span
                  ><span class="qty_unit">台</span>
                </p>
                <p class="qty_imag">
                  组串式<span class="qty_val">
                    {{
                      wpId.includes("GDC")
                        ? StationinformationData?.station[wpId]?.zczjts
                        : StationinformationData?.cblpoint?.jr_gf_zcts
                    }} </span
                  ><span class="qty_unit">台</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="ecoName safe_power">
        <p class="ecoTitle">社会贡献<span>万吨/月</span></p>
        <ul>
          <li class="eco_count">
            <div class="svg-icon svg-icon-green">
              <svg-icon class="" svgid="svg-煤" />
            </div>
            <p class="eco_val text-ellipsis">
              {{ (StationinformationData?.qt.jym / 10000).toFixed(2) }}
            </p>
            <p class="eco_name">煤</p>
          </li>
          <li class="eco_count">
            <div class="svg-icon svg-icon-green">
              <svg-icon class="" svgid="svg-水" />
            </div>
            <p class="eco_val text-ellipsis">
              {{ (StationinformationData?.qt.jys / 10000).toFixed(2) }}
            </p>
            <p class="eco_name">水</p>
          </li>
          <li class="eco_count">
            <div class="kind">
              <div class="svg-icon svg-icon-green">
                <svg-icon svgid="svg-co2" />
              </div>
            </div>
            <p class="eco_val text-ellipsis">
              {{ (StationinformationData?.qt.co2 / 10000).toFixed(2) }}
            </p>
            <p class="eco_name">二氧化碳</p>
          </li>
          <li class="eco_count">
            <div class="kind">
              <div class="svg-icon svg-icon-green">
                <svg-icon svgid="svg-so2" />
              </div>
            </div>
            <p class="eco_val text-ellipsis">
              {{ (StationinformationData?.qt.so2 / 10000).toFixed(2) }}
            </p>
            <p class="eco_name">二氧化硫</p>
          </li>
        </ul>
      </div>
      <div class="my_echarts safe_power" v-if="penetrateType == 3">
        <power-echarts :CurveValues="CurveValues" width="680px" :ratio="1000" />
      </div>
    </div>
    <!-- 全国左侧信息 -->
    <div class="leftBox" v-if="currentTitle == '全国'">
      <div
        :class="
          $store.state.themeName === 'light' ? 'new-home-light' : 'new-home'
        "
      >
        <div class="security-day">
          <div class="text">清洁能源产业总装机容量:</div>
          <div class="num">
            <span class="font-num">{{
              StationinformationData?.qt?.zzjrl
            }}</span>
            <span class="unit">MW</span>
          </div>
          <div class="security">
            <div class="lineBox">
              <div v-if="activeTab == -1 || activeTab == 0">
                <span>风电</span>
                <span class="num font-num">{{
                  StationinformationData?.qt?.fdzzjrl
                }}</span>
                <span class="unit">MW</span>
              </div>
              <div v-if="activeTab == -2 || activeTab == 0">
                <span>光伏</span>
                <span class="num font-num">{{
                  StationinformationData?.qt?.gfzzjrl
                }}</span>
                <span class="unit">MW</span>
              </div>
            </div>
            <div class="text">安全天数:</div>
            <div class="num">
              <span class="font-num">{{
                StationinformationData?.qt?.aqts || 0
              }}</span>
              <span class="unit-t">天</span>
            </div>
          </div>
        </div>
        <div
          class="energy-system-box box1"
          :class="activeTab == -1 || activeTab == -2 ? 'piggy-tab-width' : ''"
        >
          <div class="energy-system-content clearfix">
            <div class="title">
              <span class="title-name">清洁能源公司</span>
              <span class="title-all-title">总装机容量 :</span>
              <span class="title-all-content" v-if="activeTab == 0">{{
                Number(StationinformationData?.cblpoint?.qjny_zzjrl) || 0
              }}</span>
              <span class="title-all-content" v-if="activeTab == -1">{{
                StationinformationData?.cblpoint?.qjny_fd_zjrl || 0
              }}</span>
              <span class="title-all-content" v-if="activeTab == -2">{{
                StationinformationData?.cblpoint?.qjny_gf_zjrl || 0
              }}</span>
              <span class="title-all-unit">MW</span>
            </div>
            <div
              class="left-content float-left"
              :class="activeTab == -1 ? 'piggy-bank' : ''"
              v-if="activeTab == -1 || activeTab == 0"
            >
              <div class="img-num clearfix">
                <div class="img float-left">
                  <img src="../../../assets/home/fc_1.png" alt="" />
                </div>
                <div class="num float-left">
                  <span>风电场数量</span> <br />
                  <span>{{ StationinformationData?.cblpoint?.qjny_fcts }}</span>
                  <span>个</span>
                </div>
              </div>
              <div class="capacity">
                <div class="item">
                  <el-row>
                    <el-col :span="8"><span>装机容量</span></el-col>
                    <el-col :span="9"
                      ><span>{{
                        StationinformationData?.cblpoint?.qjny_fd_zjrl
                      }}</span></el-col
                    >
                    <el-col :span="7"><span>MW</span></el-col>
                  </el-row>
                </div>
                <div class="item">
                  <el-row>
                    <el-col :span="8"><span>风机台数</span></el-col>
                    <el-col :span="9"
                      ><span>{{
                        StationinformationData?.cblpoint?.qjny_fj_ts
                      }}</span></el-col
                    >
                    <el-col :span="7"><span>台</span></el-col>
                  </el-row>
                </div>
              </div>
            </div>
            <div
              class="right-content float-left"
              :class="activeTab == -2 ? 'piggy-bank' : ''"
              v-if="activeTab == -2 || activeTab == 0"
            >
              <div class="img-num clearfix">
                <div class="img float-left">
                  <img src="../../../assets/home/gf_1.png" alt="" />
                </div>
                <div class="num float-left">
                  <span>光伏电站数量</span> <br />
                  <span>{{ StationinformationData?.cblpoint?.qjny_gfts }}</span>
                  <span>个</span>
                </div>
              </div>
              <div class="capacity">
                <div class="item">
                  <el-row>
                    <el-col :span="8"><span>装机容量</span></el-col>
                    <el-col :span="9"
                      ><span>{{
                        StationinformationData?.cblpoint?.qjny_gf_zjrl
                      }}</span></el-col
                    >
                    <el-col :span="7"><span>MW</span></el-col>
                  </el-row>
                </div>
                <div class="item">
                  <el-row>
                    <el-col :span="8"><span>集中式</span></el-col>
                    <el-col :span="9"
                      ><span>{{
                        StationinformationData?.cblpoint?.qjny_gf_jzts
                      }}</span></el-col
                    >
                    <el-col :span="7"><span>台</span></el-col>
                  </el-row>
                </div>
                <div class="item">
                  <el-row>
                    <el-col :span="8"><span>组串式</span></el-col>
                    <el-col :span="9"
                      ><span>{{
                        StationinformationData?.cblpoint?.qjny_gf_zcts
                      }}</span></el-col
                    >
                    <el-col :span="7"><span>台</span></el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="energy-system-box box2"
          :class="activeTab == -1 || activeTab == -2 ? 'piggy-tab-width' : ''"
        >
          <div class="energy-system-content clearfix">
            <div class="title">
              <span class="title-name">系统接入情况</span>
              <span class="title-all-title">总装机容量 :</span>
              <span class="title-all-content" v-if="activeTab == 0">{{
                Number(StationinformationData?.cblpoint?.jr_zzjrl) || 0
              }}</span>
              <span class="title-all-content" v-if="activeTab == -1">{{
                StationinformationData?.cblpoint?.jr_fd_zjrl || 0
              }}</span>
              <span class="title-all-content" v-if="activeTab == -2">{{
                StationinformationData?.cblpoint?.jr_gf_zjrl || 0
              }}</span>
              <span class="title-all-unit">MW</span>
            </div>
            <div
              class="left-content float-left"
              :class="activeTab == -1 ? 'piggy-bank' : ''"
              v-if="activeTab == -1 || activeTab == 0"
            >
              <div class="img-num clearfix">
                <div>
                  <div class="img float-left">
                    <img src="../../../assets/home/fc_1.png" alt="" />
                  </div>
                  <div class="num float-left">
                    <span>风电场数量</span> <br />
                    <span>{{ StationinformationData?.cblpoint?.jr_fcts }}</span>
                    <span>个</span>
                  </div>
                </div>
              </div>
              <div class="capacity">
                <div class="item">
                  <el-row>
                    <el-col :span="8"><span>装机容量</span></el-col>
                    <el-col :span="9"
                      ><span>{{
                        StationinformationData?.cblpoint?.jr_fd_zjrl
                      }}</span></el-col
                    >
                    <el-col :span="7"><span>MW</span></el-col>
                  </el-row>
                </div>
                <div class="item">
                  <el-row>
                    <el-col :span="8"><span>风机台数</span></el-col>
                    <el-col :span="9"
                      ><span>{{
                        StationinformationData?.cblpoint?.jr_fj_ts
                      }}</span></el-col
                    >
                    <el-col :span="7"><span>台</span></el-col>
                  </el-row>
                </div>
              </div>
            </div>
            <div
              class="right-content float-left"
              :class="activeTab == -2 ? 'piggy-bank' : ''"
              v-if="activeTab == -2 || activeTab == 0"
            >
              <div class="img-num clearfix">
                <div class="img float-left">
                  <img src="../../../assets/home/gf_1.png" alt="" />
                </div>
                <div class="num float-left">
                  <span>光伏电站数量</span> <br />
                  <span>{{ StationinformationData?.cblpoint?.jr_gfts }}</span>
                  <span>个</span>
                </div>
              </div>
              <div class="capacity">
                <div class="item">
                  <el-row>
                    <el-col :span="8"><span>装机容量</span></el-col>
                    <el-col :span="9"
                      ><span>{{
                        StationinformationData?.cblpoint?.jr_gf_zjrl || 0
                      }}</span></el-col
                    >
                    <el-col :span="7"><span>MW</span></el-col>
                  </el-row>
                </div>
                <div class="item">
                  <el-row>
                    <el-col :span="8"><span>集中式</span></el-col>
                    <el-col :span="9"
                      ><span>{{
                        StationinformationData?.cblpoint?.jr_gf_jzts || 0
                      }}</span></el-col
                    >
                    <el-col :span="7"><span>台</span></el-col>
                  </el-row>
                </div>
                <div class="item">
                  <el-row>
                    <el-col :span="8"><span>组串式</span></el-col>
                    <el-col :span="9"
                      ><span>{{
                        StationinformationData?.cblpoint?.jr_gf_zcts || 0
                      }}</span></el-col
                    >
                    <el-col :span="7"><span>台</span></el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="energy-system-box box3">
          <div class="model-bg">
            <div class="titles">
              <div class="name">节能减排</div>
              <div class="unit">(单位: 万吨)</div>
            </div>
            <div class="save">
              <div class="save-item">
                <div
                  class="jnjp-icon svg-icon svg-icon-green"
                  style="width:5.5vh,height:5.5vh"
                >
                  <svg-icon class="" svgid="svg-煤" />
                </div>
                <div class="save-value">
                  {{
                    Number(
                      Number(StationinformationData?.qt?.jym) / 10000
                    ).toFixed(2)
                  }}
                </div>
                <div class="save-name">煤</div>
              </div>
              <div class="save-item">
                <div class="jnjp-icon svg-icon svg-icon-green">
                  <svg-icon class="" svgid="svg-水" />
                </div>
                <div class="save-value">
                  {{
                    Number(
                      Number(StationinformationData?.qt?.jys) / 10000
                    ).toFixed(2)
                  }}
                </div>
                <div class="save-name">水</div>
              </div>
              <div class="save-item">
                <div class="kind">
                  <div class="jnjp-icon1 svg-icon svg-icon-green">
                    <svg-icon class="" svgid="svg-co2" />
                  </div>
                </div>
                <div class="save-value">
                  {{
                    Number(
                      Number(StationinformationData?.qt?.co2) / 10000
                    ).toFixed(2)
                  }}
                </div>
                <div class="save-name">二氧化碳</div>
              </div>
              <div class="save-item">
                <div class="kind">
                  <div class="jnjp-icon1 svg-icon svg-icon-green">
                    <svg-icon class="" svgid="svg-so2" />
                  </div>
                </div>
                <div class="save-value">
                  {{
                    Number(
                      Number(StationinformationData?.qt?.so2) / 10000
                    ).toFixed(2)
                  }}
                </div>
                <div class="save-name">二氧化硫</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 展示当前场站名称 -->
    <div class="name-box" v-if="currentTitle != '全国'">
      <div class="name-box-title">
        {{ currentTitle }}
      </div>
    </div>
    <!-- 返回按钮 -->
    <div
      class="return"
      @click="
        backMap(
          stationList[currents - 1]?.wpId,
          stationList[currents - 1]?.name
        )
      "
      v-show="currents != 0"
    >
      <span class="svg-icon svg-icon-sm">
        <svg-icon :svgid="'svg-arrow-dpwn-1'" />
      </span>
      返回
    </div>
    <!-- 地图 -->
    <div class="map-img">
      <!-- 全国 -->
      <SvgMapNX
        v-if="currentTitle == '全国'"
        :homeSuspensionWindowsData="homeSuspensionWindowsData"
        :mapList="mapList"
        :show="showType"
        :data="StationinformationData"
        @clickLabel="clickLabel"
      >
      </SvgMapNX>

      <!-- 山西 -->
      <SX
        v-if="currentTitle != '全国'"
        :showType="showType"
        :companyid="companyid"
        :data="StationinformationData"
        @clickLabel="clickLabel"
      >
      </SX>
    </div>
    <!-- 全国右侧信息 -->
    <div
      class="right"
      v-if="currentTitle == '全国'"
      :class="activeTab == -1 || activeTab == -2 ? 'top-distance' : ''"
    >
      <el-dialog
        class="dialogs"
        width="80%"
        v-model="dialogElectric"
        :show-close="true"
      >
        <template #title>
          <div class="dialog-title">
            <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
            <div class="title">{{ showName }}</div>
          </div>
        </template>
        <div class="dialog-body" style="height: 40vh">
          <img class="dialog-img" src="@assets/imgs/dialog.png" />
          <div class="date">
            <div
              class="day"
              :class="electronType === 'day' ? 'active' : ''"
              @click="handleElectricDetail('day', '日发电量', type)"
            >
              日
            </div>
            <div
              class="mouth"
              :class="electronType === 'month' ? 'active' : ''"
              @click="handleElectricDetail('month', '月发电量', type)"
            >
              月
            </div>
            <div
              class="year"
              :class="electronType === 'year' ? 'active' : ''"
              @click="handleElectricDetail('year', '年发电量', type)"
            >
              年
            </div>
          </div>
          <BarCharts
            :list="barList"
            width="100%"
            height="45vh"
            :ratio="10000"
            :showLegend="true"
            :top="30"
            :units="units"
            :interval="electronType === 'day' ? 1 : 0"
            :showkey="showkey"
            :showName="showName"
            :color="colors"
          >
          </BarCharts>
        </div>
      </el-dialog>
      <Row type="flex" style="margin-bottom: 20px">
        <Col :span="24">
          <div class="model-bg-new">
            <div class="titles">
              <div class="name">实时负荷</div>
              <div class="unit">(单位: MW)</div>
            </div>
            <power-review-home :data="powerDataHome" :id="wpId" />
          </div>
          <!--   @chartClick="showPowerChart" -->
        </Col>
      </Row>
      <Row
        type="flex"
        style="margin-bottom: 20px"
        v-if="activeTab == -1 || activeTab == 0"
      >
        <Col :span="24">
          <div class="model-bg-new-right">
            <div class="infos">
              <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">{{
                      StationinformationData?.cblpoint?.jr_fj_ts
                    }}</text>
                    台
                  </div>
                </div>
                <div
                  v-if="
                    !(
                      wpId.includes('FDC') ||
                      wpId.includes('GC') ||
                      wpId.includes('GDC')
                    )
                  "
                  class="info-nums"
                >
                  风电场<text class="nums">{{
                    StationinformationData?.cblpoint?.jr_fcts
                  }}</text>
                  个
                </div>
              </div>
              <div class="types">
                <div class="type-model">
                  <div class="type-name" style="color: #1d99ff">待机</div>
                  <div class="type-num">
                    {{ StationinformationData?.mxztmap?.fd_djnum || 0 }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #05bb4c">运行</div>
                  <div class="type-num">
                    {{ StationinformationData?.mxztmap?.fd_yxnum || 0 }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #ba3237">故障</div>
                  <div class="type-num">
                    {{ StationinformationData?.mxztmap?.fd_gznum || 0 }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #e17e23">检修</div>
                  <div class="type-num">
                    {{ StationinformationData?.mxztmap?.fd_jxnum || 0 }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #c531c7">限电</div>
                  <div class="type-num">
                    {{ StationinformationData?.mxztmap?.fd_xdnum || 0 }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #fff">受累</div>
                  <div class="type-num">
                    {{ StationinformationData?.mxztmap?.fd_slnum || 0 }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #606769">离线</div>
                  <div class="type-num">
                    {{ StationinformationData?.mxztmap?.fd_lxnum || 0 }}
                  </div>
                </div>
              </div>
              <div class="tabSwitchover">
                <div class="unit"><span>(单位: 万kWh)</span></div>
              </div>
              <div
                v-for="(item, index) in ForecastPowerNewHome_fc"
                :key="index"
              >
                <div class="power-charts">
                  <div class="power-name">{{ item[0].name }}</div>
                  <div class="power-item">
                    <div class="power-value">
                      <span
                        :style="
                          item[0].color === 1
                            ? 'background-color:#4B55AE'
                            : 'background-color:#05BB4C'
                        "
                      ></span>
                      <span>{{ item[0].total }}</span>
                    </div>
                    <list-bar-chart-2-home
                      :list="item"
                      height="55px"
                      width="250px"
                      @click="
                        handleElectricDetail(item[0].id, item[0].name, 'fc')
                      "
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Col>
      </Row>
      <Row
        type="flex"
        style="margin-bottom: 20px"
        v-if="activeTab == -2 || activeTab == 0"
      >
        <Col :span="24">
          <div class="model-bg-new-right">
            <div class="infos">
              <div class="titles">
                <div class="amount">
                  <div class="icon fengji-icon svg-icon svg-icon-white"></div>
                  <img class="amount-image" src="@/assets/png/sun.png" alt="" />
                  <div class="amount-nums">
                    <text class="num-item">{{
                      Number(
                        StationinformationData?.cblpoint?.jr_gf_jzts +
                          StationinformationData?.cblpoint?.jr_gf_zcts
                      ) || 0
                    }}</text>
                    台
                  </div>
                </div>
                <div class="info-nums">
                  电站<text class="nums">{{
                    StationinformationData?.cblpoint?.jr_gfts
                  }}</text>
                  个
                </div>
              </div>
              <div class="types">
                <div class="type-model">
                  <div class="type-name" style="color: #1d99ff">待机</div>
                  <div class="type-num">
                    {{ StationinformationData?.mxztmap?.gf_djnum || 0 }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #05bb4c">运行</div>
                  <div class="type-num">
                    {{ StationinformationData?.mxztmap?.gf_yxnum || 0 }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #ba3237">故障</div>
                  <div class="type-num">
                    {{ StationinformationData?.mxztmap?.gf_gznum || 0 }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #e17e23">检修</div>
                  <div class="type-num">
                    {{ StationinformationData?.mxztmap?.gf_jxnum || 0 }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #c531c7">限电</div>
                  <div class="type-num">
                    {{ StationinformationData?.mxztmap?.gf_xdnum || 0 }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #fff">受累</div>
                  <div class="type-num">
                    {{ StationinformationData?.mxztmap?.gf_slnum || 0 }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #606769">离线</div>
                  <div class="type-num">
                    {{ StationinformationData?.mxztmap?.gf_lxnum || 0 }}
                  </div>
                </div>
              </div>
              <div class="tabSwitchover">
                <div class="unit"><span>(单位: 万kWh)</span></div>
              </div>
              <div
                v-for="(item, index) in ForecastPowerNewHome_gf"
                :key="index"
              >
                <div class="power-charts">
                  <div class="power-name">{{ item[0].name }}</div>
                  <div class="power-item">
                    <div class="power-value">
                      <span
                        :style="
                          index % 2 === 0
                            ? 'background-color:#4B55AE'
                            : 'background-color:#05BB4C'
                        "
                      ></span>
                      <span>{{ item[0].total }}</span>
                    </div>
                    <list-bar-chart-2-home
                      :list="item"
                      height="55px"
                      width="250px"
                      @click="
                        handleElectricDetail(item[0].id, item[0].name, 'gf')
                      "
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Col>
      </Row>
    </div>

    <div v-if="currentTitle != '全国'">
      <!-- 山西右侧信息 -->
      <div class="card wind_card">
        <el-row>
          <el-col v-show="tabShow == 0 || tabShow == -1">
            <div class="grid-content">
              <div class="img" @click="handleClick('SSPJFS', '实时风速')">
                <img
                  src="@/assets/imgs/pointer.png"
                  :style="{ transform: windSpeedRota }"
                />
                <div class="information">
                  {{ (StationinformationData?.qt?.ssfs).toFixed(2) }}
                </div>
                <div class="unit">m/s</div>
                <p>实时风速</p>
              </div>
            </div>
          </el-col>
          <el-col v-show="tabShow == 0 || tabShow == -2">
            <div
              class="grid-content"
              @click="handleClick('RPJGZD', '光照强度')"
            >
              <div class="img">
                <img
                  src="@/assets/imgs/pointer.png"
                  :style="{ transform: illuminationRota }"
                />
                <div class="information">
                  {{ (StationinformationData?.qt?.gzzs / 1000).toFixed(2) }}
                </div>
                <div class="unit">W/m²</div>
                <p>光照强度</p>
              </div>
            </div>
          </el-col>
          <el-col>
            <div class="grid-content" @click="handleClick('SSZGL', '实际功率')">
              <div class="img">
                <img
                  src="@/assets/imgs/pointer.png"
                  :style="{ transform: actualPowerRota }"
                />
                <div class="information">
                  {{ (StationinformationData?.qt?.sjgl / 1000).toFixed(2) }}
                </div>
                <div class="unit">MW</div>
                <p>实际功率</p>
              </div>
            </div>
          </el-col>
          <el-col>
            <div
              class="grid-content"
              @click="handleClick('SSZLLGL', '理论功率')"
            >
              <div class="img">
                <img
                  src="@/assets/imgs/pointer.png"
                  :style="{ transform: ideaPowerRota }"
                />
                <div class="information">
                  {{ (StationinformationData?.qt?.llgl / 1000).toFixed(2) }}
                </div>
                <div class="unit">MW</div>
                <p>理论功率</p>
              </div>
            </div>
          </el-col>
          <el-col v-show="tabShow == -1">
            <div
              class="grid-content"
              @click="handleClick('FNLYL', '风能利用率')"
            >
              <div class="img">
                <img
                  src="@/assets/imgs/pointer.png"
                  :style="{ transform: guarantee }"
                />
                <div class="information">
                  {{ (StationinformationData?.qt?.fnlyl / 1000).toFixed(2) }}
                </div>
                <div class="unit">%</div>
                <p>风能利用率</p>
              </div>
            </div>
          </el-col>
          <el-col v-show="tabShow == -2">
            <div
              class="grid-content"
              @click="handleClick('FNLYL', '光能利用率')"
            >
              <div class="img">
                <img
                  src="@/assets/imgs/pointer.png"
                  :style="{ transform: guarantee }"
                />
                <div class="information">
                  {{ (StationinformationData?.qt?.fnlyl / 1000).toFixed(2) }}
                </div>
                <div class="unit">%</div>
                <p>光能利用率</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="card electric_card">
        <el-header>
          <span class="title"></span>
          <soan class="unit">（单位：万kWh）</soan>
        </el-header>
        <el-row
          style="cursor: pointer"
          v-for="(item, index) in fdlList"
          :key="index"
          @click="handleElectricDetail(item.id, item.title)"
        >
          <el-col :span="4">{{ item.title }}</el-col>
          <el-col :span="14">
            <div class="electric">
              <div
                class="progress_bar"
                :style="{
                  width:
                    item.value && item.value1
                      ? (item.value / 10000 / item.value1) * 100 + '%'
                      : '0',
                }"
              >
                <span class="count">{{ (item.value / 10000).toFixed(2) }}</span>
                <span class="img"></span>
              </div>
            </div>
          </el-col>
          <el-col :span="4">{{ item.value1 }}</el-col>
        </el-row>
        <el-row class="summarize">
          <div
            class="summarize-left"
            @click="handleUsingDetail('month', 'yfdl', '月利用小时')"
          >
            <p>月利用小时</p>
            <p>
              <span>
                {{ StationinformationData?.qt?.ylyxs?.toFixed(2) }}
              </span>
              <span>小时</span>
            </p>
          </div>
          <div class="line"></div>
          <div
            class="summarize-right"
            @click="handleUsingDetail('year', 'nfdl', '年利用小时')"
          >
            <p>年利用小时</p>
            <p>
              <span>{{ StationinformationData?.qt?.nlyxs?.toFixed(2) }}</span>
              <span>小时</span>
            </p>
          </div>
        </el-row>
      </div>
      <div class="card station_card">
        <el-row class="card_header" v-if="tabShow == 0 || tabShow == -1">
          <el-col :span="12">
            <img
              src="@/assets/imgs/windmill.png"
              style="display: inline-block"
            />
            <span>{{
              wpId.includes("FDC")
                ? StationinformationData?.station[wpId]?.zjts
                : StationinformationData?.cblpoint?.jr_fj_ts
            }}</span
            >台
          </el-col>
          <el-col :span="12">
            场站<span>{{
              wpId.includes("FDC")
                ? 1
                : StationinformationData?.cblpoint?.jr_fcts
            }}</span
            >个
          </el-col>
        </el-row>
        <windLightDetial
          v-if="tabShow == -1"
          :dataDetial="StationinformationData?.sbztmap?.fd"
        ></windLightDetial>
        <windlightSimple
          v-if="tabShow == 0"
          :dataSimple="StationinformationData?.sbztmap?.fd"
        />
        <el-row class="card_header" v-if="tabShow == 0 || tabShow == -2">
          <el-col :span="12">
            <img src="@/assets/imgs/gfmill.png" style="display: inline-block" />
            <span>{{
              wpId.includes("GDC")
                ? StationinformationData?.station[wpId]?.jzzjts +
                  StationinformationData?.station[wpId]?.zczjts
                : StationinformationData?.cblpoint?.jr_gf_zcts +
                  StationinformationData?.cblpoint?.jr_gf_jzts
            }}</span
            >台
          </el-col>
          <el-col :span="12">
            场站<span>{{
              wpId.includes("GDC")
                ? 1
                : StationinformationData?.cblpoint?.jr_gfts
            }}</span
            >个
          </el-col>
        </el-row>
        <windLightDetial
          v-if="tabShow == -2"
          :dataDetial="StationinformationData?.sbztmap?.fd"
        ></windLightDetial>
        <windlightSimple
          v-if="tabShow == 0"
          :dataSimple="StationinformationData?.sbztmap?.gf"
        />
      </div>
      <!-- 实时负荷弹窗 -->
      <el-dialog
        class="dialogs"
        width="70%"
        v-model="dialogVisible"
        :show-close="true"
      >
        <template #title>
          <div class="dialog-title">
            <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
            <div class="title">{{ showName }}</div>
          </div>
        </template>
        <div class="dialog-body" style="height: 40vh">
          <img class="dialog-img" src="@assets/imgs/dialog.png" />
          <windChartCom
            :windCurveValues="chartsData"
            :CurveTitle="showName"
            height="38vh"
            chartId="windChar"
          />
        </div>
      </el-dialog>
      <!-- 发电量，利用小时弹窗 -->
      <el-dialog
        class="dialogs"
        width="80%"
        v-model="dialogElectric"
        :show-close="true"
      >
        <template #title>
          <div class="dialog-title">
            <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
            <div class="title">{{ showName }}</div>
          </div>
        </template>
        <div class="dialog-body" style="height: 40vh">
          <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', 'yfdl', '月利用小时')"
            >
              月
            </div>
            <div
              class="year"
              :class="electronType === 'year' ? 'active' : ''"
              @click="handleUsingDetail('year', 'nfdl', '年利用小时')"
            >
              年
            </div>
          </div>
          <BarCharts
            :list="barList"
            width="100%"
            height="45vh"
            :ratio="10000"
            :showLegend="true"
            :top="30"
            :units="units"
            :interval="electronType === 'day' ? 1 : 0"
            :showkey="showkey"
            :showName="showName"
            :color="colors"
          >
          </BarCharts>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Row from "@/components/coms/grid/row.vue";
import Col from "@/components/coms/grid/col.vue";
import PowerReviewHome from "./power-review-home.vue";
import ListBarChart2Home from "@/components/chart/bar/list-bar-chart2-home.vue";
//全国地图总览
import SvgMapNX from "./map/svg-map-nx.vue";
// 山西
import SX from "./map/SX.vue";
import PowerEcharts from "@/components/chart/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 "./barCharts.vue";
export default {
  // 名称
  name: "Map",
  // 使用组件
  components: {
    SvgMapNX,
    SX,
    Row,
    Col,
    PowerReviewHome,
    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: [], //全国的光伏发电量列表
      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: "",
      StationinformationData: [],
      showkey: "",

      type: "fc", //发电量展示类型
      tabShow: 0,
      timmer: null, // 计时器
      timmer2: null,
      units: ["万kWh"],
      wpId: "KGDL_FGS",
      wpIds: "KGDL_FGS0",
    };
  },
  emits: {
    onEnter: null,
    onBack: null,
  },
  // 函数
  methods: {
    // 点击地图展示类型
    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.powerDataHome = [
            {
              title: "清洁能源",
              value: (data?.qt?.sjgl / 1000).toFixed(2),
              dialogTitle: "清洁能源",
              subUrl: "genreset/findGLDetail",
              targetName: "bzgl",
              dialogType: "powerLineChart",
              max: 3000,
            },
            {
              title: "风电",
              value: (data?.qt?.fdsjgl / 1000).toFixed(2),
              dialogTitle: "功率详情",
              subUrl: "genreset/findGLDetail",
              targetName: "bzgl",
              dialogType: "powerLineChart",
              max: 3000,
            },
            {
              title: "光伏",
              value: (data?.qt?.gfsjgl / 1000).toFixed(2),
              dialogTitle: "保证功率详情",
              subUrl: "genreset/findGLDetail",
              targetName: "bzgl",
              dialogType: "powerLineChart",
              max: 3000,
            },
          ];

          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,
            },
          ],
        ];
      });
    },
    // 获取场站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);
    },
    handleClick(uniformCode, title) {
      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.showName = title;
      });
    },
    handleUsingDetail(timetype, key, title) {
      let format = timetype == "month" ? "YYYY-MM" : "YYYY";
      this.showkey = "using";
      this.electronType = timetype;
      FindUtilizationhours({
        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[key],
            };
          } else {
            return {
              dateTime: dayjs()
                .startOf(timetype)
                .subtract(item.hours, timetype)
                .format(format),
              value: item[key],
            };
          }
        });
        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 = 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,
            value1:
              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,
            value1:
              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,
            value1:
              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">
ul,
ul li,
p {
  margin: 0;
  padding: 0;
  list-style: none;
}

.map {
  padding-top: 16px;
  .heeaderNav {
    margin-top: 0;
  }
}
.airForceStation {
  position: relative;
  background-color: rgba(3, 5, 9, 0.5);
  padding: 20px;
  // width: 320px;
  margin-bottom: 15px;
  span {
    color: #b1b1b1;
  }
  .title {
    font-size: 18px;
    line-height: 28px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: left;
    span {
      color: #fff;
    }
  }
  .collectInstall {
    display: flex;
    margin-bottom: 10px;
  }
  .listItem {
    display: flex;
    margin-bottom: 10px;
  }
  .line {
    display: flex;
    margin-bottom: 10px;
  }
  .name {
    flex: 4;
  }
  .num {
    flex: 3;
    color: #fff;
    font-weight: bold;
    font-size: 19px;
    // text-align: center;
  }
  .unit {
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
  }
}
.piggy-bank {
  width: 100% !important;
  border: 0 !important;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.map {
  position: relative;
  width: 100%;
  height: 100%;
  .light {
    position: fixed;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
  }

  .back {
    position: fixed;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: url(../../../assets/background-home.png) no-repeat;
    background-size: 100% 100%;
  }

  .leftBox {
    margin-top: 20px;
    margin-left: 20px;
    .model-bg {
      width: 100%;
      min-height: 135px;
      background-color: rgba(3, 5, 9, 0.5);
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      padding: 1% 5%;

      .titles {
        height: 45px;
        border-bottom: 1px solid #333333;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .name {
          font-size: 16px;
          color: #ffffff;
        }

        .unit {
          font-size: 12px;
          color: #b1b1b1;
        }
      }

      .save {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        margin: 17px 0;

        .save-item {
          width: 25%;
          display: flex;
          flex-direction: column;
          align-items: center;

          .kind {
            width: 20px;
            height: 22px;

            .kind-img {
              width: 100%;
              height: 100%;
            }
          }

          .save-value {
            font-size: 16px;
            color: #ffffff;
            margin: 10px 0;
          }

          .save-name {
            font-size: 12px;
            color: #b3b3b3;
          }
        }
      }
    }
    .new-home {
      .energy-system-box {
        position: absolute;
        left: 20px;
        width: 400px;
        box-sizing: border-box;
        background-color: rgba(3, 5, 9, 0.5);
        &.box1 {
          top: 270px;
        }
        &.box2 {
          top: 500px;
        }
        &.box3 {
          top: 730px;
        }
        .energy-system-content {
          padding: 5px 5px 15px 5px;
          .title-all {
            margin-left: 5px;
            margin-bottom: 8px;
          }
          .title-all-content {
            color: #05bb4c;
            font-weight: bold;
            font-size: 19px;
          }
          .title-all-title {
            font-size: 13px;
          }
          .title-all-unit {
            font-size: 12px;
            color: #b1b1b1;
            margin-left: 5px;
          }
          .title {
            color: #fff;
            font-size: 18px;
            line-height: 28px;
            margin: 10px 0.5vh;
            text-align: right;
            .title-name {
              float: left;
            }
          }
          .right-content,
          .left-content {
            width: 50%;
            .img-num {
              display: flex;
              justify-content: left;
              align-items: center;
              padding-left: 10px;
              .img {
                margin-right: 10px;
              }
              .num {
                span {
                  font-size: 14px;
                  font-weight: 400;
                  color: #999999;
                }
                span:nth-child(3) {
                  font-size: 19px;
                  font-weight: bold;
                  color: #05bb4c;
                  line-height: 27px;
                }
                span:nth-child(4) {
                  margin-left: 15px;
                }
              }
            }
            .capacity {
              .item {
                margin-top: 9px;
                .el-row {
                  .el-col:nth-child(1) {
                    text-align: left;
                    font-size: 14px;
                    font-weight: 400;
                    color: #999999;
                  }
                  .el-col:nth-child(2) {
                    font-size: 16px;
                    font-weight: bold;
                    color: #ffffff;
                  }
                  .el-col:nth-child(3) {
                    font-size: 14px;
                    font-weight: 400;
                    color: #999999;
                  }
                }
              }
            }
          }
          .left-content {
          }
          .right-content {
            border-left: 1px dashed #4e4040;
            padding-left: 10px;
          }
        }
      }

      .security-day {
        .lineBox {
          display: flex;
          & > div {
            margin-right: 20px;
          }
          margin: 12px 0 15px;
          .num {
            color: @green;
            font-size: 16px;
            margin-bottom: 15px;
            margin: 0 7px;
          }
          .unit {
            font-size: 12px;
            color: #5e6269;
          }
        }
        .text {
          font-size: 20px;
          color: @write;
        }

        .num {
          color: @green;
          font-size: 35px;
          .unit {
            font-size: 24px;
            position: relative;
            margin-left: 0.556vh;
            top: -0.185vh;
          }
          .unit-t {
            font-size: 12px;
            margin-left: 10px;
          }
        }

        .text1 {
          font-size: 14px;
          color: @write;
        }

        .num1 {
          color: @green;
          font-size: 24px;
          margin-bottom: 15px;

          .unit {
            font-size: 12px;
            position: relative;
            margin-left: 0.556vh;
            color: #5e6269;
          }
        }
      }
    }
    //亮
    .new-home-light {
      margin-top: -50px;
      margin-left: 20px;
      .airForceStation {
        position: relative;
        background-color: #d1d6d9;
        padding: 20px;
        width: 320px;
        margin-bottom: 15px;
        span {
          color: #000;
        }
        .title {
          font-size: 18px;
          line-height: 28px;
          margin: 15px 0;
          display: flex;
          align-items: center;
          justify-content: left;
          span {
            color: #000;
          }
        }
        .collectInstall {
          display: flex;
          margin-bottom: 10px;
        }
        .listItem {
          display: flex;
          margin-bottom: 10px;
        }
        .line {
          display: flex;
          margin-bottom: 10px;
        }
        .name {
          flex: 4;
        }
        .num {
          flex: 3;
          color: #000;
          font-weight: bold;
          font-size: 19px;
          // text-align: center;
        }
        .unit {
          flex: 1;
          font-size: 14px;
          font-weight: 400;
          color: #000;
        }
      }
      .piggy-tab-width {
        width: 350px !important;
      }
      .energy-system-box {
        width: 400px;
        box-sizing: border-box;
        margin-bottom: 21px;
        margin-top: 5px;
        background-color: #d1d6d9;
        .model-bg {
          width: 100%;
          min-height: 135px;
          background-color: #d1d6d9;
          border-radius: 6px;
          display: flex;
          flex-direction: column;
          padding: 1% 5%;

          .titles {
            height: 45px;
            border-bottom: 1px solid #333333;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            .name {
              font-size: 16px;
              color: #000;
            }

            .unit {
              font-size: 12px;
              color: #000;
            }
          }
          .save {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            margin: 17px 0;

            .save-item {
              width: 25%;
              display: flex;
              flex-direction: column;
              align-items: center;

              .kind {
                width: 20px;
                height: 22px;

                .kind-img {
                  width: 100%;
                  height: 100%;
                }
              }

              .save-value {
                font-size: 16px;
                color: #ffffff;
                margin: 10px 0;
              }

              .save-name {
                font-size: 12px;
                color: #b3b3b3;
              }
            }
          }
        }
        .energy-system-bgc {
          padding: 115px;
          width: 100%;
          opacity: 0.3;
          background-color: rgba(83, 98, 104, 0.2);
        }
        .energy-system-content {
          padding: 5px 5px 15px 5px;
          .title-all {
            margin-left: 5px;
            margin-bottom: 8px;
          }
          .title-all-content {
            color: #05bb4c;
            font-weight: bold;
            font-size: 19px;
          }
          .title-all-title {
            font-size: 13px;
          }
          .title-all-unit {
            font-size: 12px;
            color: #000;
            margin-left: 5px;
          }
          .title {
            color: #000;
            font-size: 16px;
            line-height: 28px;
            margin: 10px 0.5vh;
            text-align: right;
            .title-name {
              float: left;
            }
          }
          .right-content,
          .left-content {
            width: 50%;
            .img-num {
              text-align: center;
              display: flex;
              justify-content: center;
              align-items: center;
              .img {
                margin-right: 10px;
              }
              .num {
                span {
                  font-size: 14px;
                  font-weight: 400;
                  color: #000;
                }
                span:nth-child(3) {
                  font-size: 19px;
                  font-weight: bold;
                  color: #05bb4c;
                  line-height: 27px;
                }
                span:nth-child(4) {
                  margin-left: 15px;
                }
              }
            }
            .capacity {
              .item {
                margin-top: 9px;
                .el-row {
                  .el-col:nth-child(1) {
                    text-align: center;
                    font-size: 14px;
                    font-weight: 400;
                    color: #000;
                  }
                  .el-col:nth-child(2) {
                    font-size: 16px;
                    font-weight: bold;
                    color: #05bb4c;
                  }
                  .el-col:nth-child(3) {
                    font-size: 14px;
                    font-weight: 400;
                    color: #000;
                  }
                }
              }
            }
          }
          .left-content {
          }
          .right-content {
            border-left: 1px dashed #4e4040;
          }
        }
      }
      .security-day {
        .lineBox {
          margin: 12px 0 15px;
          .num {
            color: @green;
            font-size: 16px;
            margin-bottom: 15px;
            margin: 0 7px;
          }
          .unit {
            font-size: 12px;
            color: #5e6269;
          }
        }
        .text {
          font-size: 20px;
          color: @write;
        }

        .num {
          color: @green;
          font-size: 35px;
          .unit {
            font-size: 24px;
            position: relative;
            margin-left: 0.556vh;
            top: -0.185vh;
          }
          .unit-t {
            font-size: 12px;
            margin-left: 10px;
          }
        }

        .text1 {
          font-size: 14px;
          color: @write;
        }

        .num1 {
          color: @green;
          font-size: 24px;
          margin-bottom: 15px;

          .unit {
            font-size: 12px;
            position: relative;
            margin-left: 0.556vh;
            color: #5e6269;
          }
        }
      }
    }
  }

  .security-day {
    .text {
      font-size: 24px;
      color: @write;
    }

    .num {
      color: @green;
      font-size: 50px;

      .unit {
        font-size: 24px;
        position: relative;
        margin-left: 0.556vh;
        top: -0.185vh;
      }
    }

    .text1 {
      font-size: 14px;
      color: @write;
    }

    .num1 {
      color: @green;
      font-size: 24px;
      margin-bottom: 15px;

      .unit {
        font-size: 12px;
        position: relative;
        margin-left: 0.556vh;
        color: #5e6269;
      }
    }
  }

  .name-box {
    margin: 1.852vh;
    display: inline-block;
    z-index: 2;
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 200px;
    left: 445px;
    width: 200px;

    .name-box-title {
      font-size: 2.222vh;
      font-weight: 400;
      color: #ffffff;
      line-height: 1;
      cursor: pointer;
    }

    .name-box-period {
      margin-top: 2.222vh;

      .name-box-period-label,
      .name-box-period-value {
        font-size: 1.481vh;
        font-weight: 400;
        line-height: 1;
      }

      .name-box-period-label {
        color: #fefefe;
      }

      .name-box-period-value {
        color: #05bb4c;
      }
    }
  }

  .return {
    position: absolute;
    display: flex;
    z-index: 2;
    align-items: center;
    top: 150px;
    left: 460px;
    width: 110px;
    font-size: @fontsize-l;
    color: fade(@white, 80);
    cursor: pointer;
    border: 1px solid transparent;
    padding: 6px 16px;
    color: #05bb4c;
    border: 1px solid #05bb4c;
    font-size: 22px;

    .svg-icon {
      margin-right: 0.7407vh;

      svg {
        transform: rotate(90deg);

        use {
          transition: all 0.3s;
          fill: @green;
        }
      }
    }

    transition: all 0.3s;

    &:hover {
      color: @green;
      border: 1px solid @green;

      .svg-icon {
        svg {
          use {
            fill: @green;
          }
        }
      }
    }
  }

  .compass {
    position: absolute;
    right: 16px;
    bottom: 32px;
    border-radius: 50%;

    &::after {
      content: "";
      position: absolute;
      top: 4px;
      left: 4px;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      box-shadow: inset 0px -5px 10px 0px @green;
    }

    svg {
      height: 45px;
      width: 45px;
    }
  }

  .map-img {
    // width: calc(100% - 14.815vh);
    width: 100%;
    // height: calc(100% - 14.815vh);
    height: 100%;
    // margin: 7.407vh 0;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    @keyframes rotate {
      from {
        transform: rotateX(70deg);
      }

      to {
        transform: rotateX(0deg);
      }
    }

    img {
      width: 100%;
      animation: rotate 3s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
    }
  }
}

.island {
  position: absolute;
  right: 20vw;
  bottom: 0px;
}

.island_light {
  position: absolute;
  right: 21vw;
  bottom: 4vh;
}

.clearfix::after {
  content: "";
  clear: both;
  height: 0;
  line-height: 0;
  visibility: hidden;
  display: block;
}

.clearfix {
  zoom: 1;
}
</style>