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

<template>
  <div class="map">
    <HeaderNav
      ref="header"
      :wpId="wpId"
      :currents="currents"
      @firstRender="firstRender"
      @typeFlag="typeFlag"
      :isShows="false"
    />
    <!-- 山西左侧信息 -->
    <div
      v-if="currentTitle != '全国'"
      class="sx-left-box"
      :style="{ zIndex: dialogShow ? 6 : 5 }"
    >
      <div class="security-days safe_power">
        <div class="text">安全天数:</div>
        <div class="num">
          <span class="font-num">425</span>
          <!-- {{
            StationinformationData?.qt?.aqts
              ? StationinformationData.qt?.aqts
              : "0"
          }} -->
          <span class="unit">天</span>
        </div>
        <div class="security">
          <div v-if="wpId.includes('FDC') || wpId.includes('GDC')" class="text">
            {{ currentTitle }}资产统计:
          </div>
          <div v-else-if="tabShow == 0" class="text">资产统计:</div>
          <div v-else-if="tabShow == -1" class="text">风电资产统计:</div>
          <div v-else-if="tabShow == -2" class="text">光伏资产统计:</div>

          <div class="num">
            <span class="font-num">
              {{
                wpId.includes("FDC") || wpId.includes("GDC")
                  ? (
                      StationinformationData?.station[wpId]?.zjrl / 1000
                    ).toFixed(2)
                  : activeTab == 0
                  ? StationinformationData?.qt?.zzjrl
                  : activeTab == -1
                  ? StationinformationData?.qt?.fdzzjrl
                  : StationinformationData?.qt?.gfzzjrl
              }}
            </span>
            <span class="unit-t">MW</span>
          </div>
          <div class="lineBox">
            <div class="fd-rl" v-if="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 == 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"
        :style="{ width: tabShow == 0 ? '406px' : 'calc(170px + 20px)' }"
      >
        <ul>
          <li v-show="tabShow == -1 || tabShow == 0">
            <div class="imgs">
              <img src="@/assets/home/fc_1.png" alt="" />
            </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/home/gf_1.png" alt="" />
            </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/home/fc_1.png" alt="" />
              </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]?.hszjts
                        : StationinformationData?.cblpoint?.qjny_hsfj_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/home/gf_1.png" alt="" />
              </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).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).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).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).toFixed(2) }}
            </p>
            <p class="eco_name">二氧化硫</p>
          </li>
        </ul>
      </div>
      <div
        class="my_echarts safe_power"
        v-if="penetrateType == 3"
        @dblclick="handleShowCharts(currentTitle)"
      >
        <power-echarts
          :CurveValues="CurveValues"
          width="680px"
          height="220px"
          :unit="'MW'"
          :ratio="1000"
          :id="'cut-power'"
          :orient="'horizontal'"
        />
      </div>
    </div>
    <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 class="leftBox" v-if="currentTitle == '全国'">
      <div
        :class="
          $store.state.themeName === 'light' ? 'new-home-light' : 'new-home'
        "
      >
        <div class="security-day">
          <div v-if="activeTab == 0" class="text">总装机容量:</div>
          <div v-if="activeTab == -1" class="text">风电总装机容量:</div>
          <div v-if="activeTab == -2" class="text">光伏总装机容量:</div>
          <div class="num">
            <span class="font-num" v-if="activeTab == 0">{{
              StationinformationData?.qt?.zzjrl
            }}</span>
            <span class="font-num" v-if="activeTab == -1">{{
              StationinformationData?.qt?.fdzzjrl
            }}</span>
            <span class="font-num" v-if="activeTab == -2">{{
              StationinformationData?.qt?.gfzzjrl
            }}</span>
            <span class="unit">MW</span>
          </div>
          <div class="security">
            <div class="lineBox">
              <div v-if="activeTab == 0">
                <span>风电</span>
                <span class="num font-num">{{
                  StationinformationData?.qt?.fdzzjrl
                }}</span>
                <span class="unit">MW</span>
              </div>
              <div v-if="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">3860</span>
              <!-- {{StationinformationData?.qt?.aqts || 0}} -->
              <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 align="middle">
                    <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:20px,height:20px"
                >
                  <svg-icon class="" svgid="svg-煤" />
                </div>
                <div class="save-value">
                  {{
                    Number(Number(StationinformationData?.qt?.jym)).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)).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)).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)).toFixed(2)
                  }}
                </div>
                <div class="save-name">二氧化硫</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 展示当前场站名称 -->
    <div
      class="name-box"
      :style="{ zIndex: dialogShow || dialogVisible || dialogElectric ? 2 : 7 }"
      v-if="currentTitle != '全国'"
    >
      <div class="name-box-title">
        {{ currentTitle }}
      </div>
    </div>
    <!-- 返回按钮 -->
    <div
      class="return"
      :style="{ zIndex: dialogShow || dialogVisible || dialogElectric ? 2 : 7 }"
      @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%"
        top="100px"
        v-model="dialogElectric"
        :show-close="true"
      >
        <template #title>
          <div class="dialog-title">
            <div class="title">{{ showName }}</div>
          </div>
        </template>
        <div class="dialog-body" style="height: 500px">
          <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="500px"
            :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: 30px">
        <Col :span="24">
          <div class="model-bg-new">
            <div class="titles">
              <div class="name">
                {{ activeTab == 0 ? "实时负荷" : "关键指标" }}
              </div>
              <!-- <div class="unit">(单位: MW)</div> -->
            </div>
            <power-review-home
              :data="powerDataHome"
              :id="wpIds"
              :type="activeTab"
              @chartClick="showPowerChart"
            />
          </div>
          <!--   @chartClick="showPowerChart" -->
        </Col>
      </Row>
      <!-- 风电场 -->
      <Row
        type="flex"
        style="margin-bottom: 30px"
        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">{{
                      Math.floor(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">{{
                    Math.floor(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">
                    {{
                      Math.floor(StationinformationData?.mxztmap?.fd_djnum) || 0
                    }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #05bb4c">运行</div>
                  <div class="type-num">
                    {{
                      Math.floor(StationinformationData?.mxztmap?.fd_yxnum) || 0
                    }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #ba3237">故障</div>
                  <div class="type-num">
                    {{
                      Math.floor(StationinformationData?.mxztmap?.fd_gznum) || 0
                    }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #e17e23">检修</div>
                  <div class="type-num">
                    {{
                      Math.floor(StationinformationData?.mxztmap?.fd_jxnum) || 0
                    }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #c531c7">限电</div>
                  <div class="type-num">
                    {{
                      Math.floor(StationinformationData?.mxztmap?.fd_xdnum) || 0
                    }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #fff">受累</div>
                  <div class="type-num">
                    {{
                      Math.floor(StationinformationData?.mxztmap?.fd_slnum) || 0
                    }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #606769">离线</div>
                  <div class="type-num">
                    {{
                      Math.floor(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" 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/sy-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">
                    {{
                      Math.floor(StationinformationData?.mxztmap?.gf_djnum) || 0
                    }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #05bb4c">运行</div>
                  <div class="type-num">
                    {{
                      Math.floor(StationinformationData?.mxztmap?.gf_yxnum) || 0
                    }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #ba3237">故障</div>
                  <div class="type-num">
                    {{
                      Math.floor(StationinformationData?.mxztmap?.gf_gznum) || 0
                    }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #e17e23">检修</div>
                  <div class="type-num">
                    {{
                      Math.floor(StationinformationData?.mxztmap?.gf_jxnum) || 0
                    }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #c531c7">限电</div>
                  <div class="type-num">
                    {{
                      Math.floor(StationinformationData?.mxztmap?.gf_xdnum) || 0
                    }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #fff">受累</div>
                  <div class="type-num">
                    {{
                      Math.floor(StationinformationData?.mxztmap?.gf_slnum) || 0
                    }}
                  </div>
                </div>
                <div class="type-model">
                  <div class="type-name" style="color: #606769">离线</div>
                  <div class="type-num">
                    {{
                      Math.floor(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>
    <!-- 全国实时负荷/关键指标弹窗 -->
    <el-dialog
      class="dialogs"
      width="80%"
      top="120px"
      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="480px"
          chartId="windChar"
        />
      </div>
    </el-dialog>
    <div class="sx-right-box" v-if="currentTitle != '全国'">
      <!-- 山西右侧信息 -->
      <div class="card wind_card">
        <power-review-home
          :data="powerDataHome"
          :id="wpIds"
          @chartClick="showPowerChart"
        />
      </div>
      <div class="card electric_card">
        <el-header>
          <span class="title"></span>
          <soan class="unit">（单位：万kWh）</soan>
        </el-header>
        <el-row class="fdl-wrapper">
          <div
            class="power-div"
            v-for="(item, index) in tabShow == 0
              ? ForecastPowerNewHome_qy
              : tabShow == -1
              ? ForecastPowerNewHome_fc
              : 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="
                      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)"
                />
              </div>
            </div>
          </div>
        </el-row>
        <el-row class="summarize">
          <div
            class="summarize-left"
            @click="handleUsingDetail('month', '月利用小时')"
          >
            <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', '年利用小时')"
          >
            <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?.gf"
        ></windLightDetial>
        <windlightSimple
          v-if="tabShow == 0"
          :dataSimple="StationinformationData?.sbztmap?.gf"
        />
      </div>
      <!-- 发电量，利用小时弹窗 -->
      <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>
    </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 "@/views/Home/components/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: [], //全国的光伏发电量列表
      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: [],
          },
        ],
      },
    };
  },
  emits: {
    onEnter: null,
    onBack: null,
  },
  // 函数
  methods: {
    //放大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 };
            }
          });
          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 }) {
      this.dialogGroupRealname = true;
      this.unit = unit;
      this.showName = 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 = 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">
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: 30px;
    .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;
            .jnjp-icon1 {
              margin-left: -8px;
            }
            .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;
        margin-bottom: 30px;
        // margin-left: 15px;
        width: 400px;
        box-sizing: border-box;
        background-color: rgba(3, 5, 9, 0.5);
        &.box1 {
          //   top: 270px;
          margin-top: 20px;
        }
        &.box2 {
          //   top: 450px;
        }
        &.box3 {
          //   top: 690px;
        }
        .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 {
                  text-align: center;
                  .el-col:nth-child(1) {
                    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: 28px;
          color: @write;
        }

        .num {
          color: @green;
          font-size: 35px;
          margin-top: 12px;
          .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: 25px;
      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>