cesium_three/src/views/cesiumComponents/windView.vue

<template>
  <div class="windView">
    <div class="btnms">
      <aside class="sidebar-left-top btnms1">
        <div class="stat-block-lefttop" @click="backStations">
          <p class="label">返回</p>
        </div>
      </aside>
      <aside class="sidebar-left-top btnms2">
        <div class="stat-block-lefttop" @click="showWeatherMes">
          <p class="label" v-if="showWeatherDB">隐藏天气详情</p>
          <p class="label" v-else>查看天气详情</p>
        </div>
      </aside>
      <aside class="sidebar-left-top btnms3">
        <div class="stat-block-lefttop" @click="showWindMes">
          <p class="label" v-if="showWindDB">隐藏风机详情</p>
          <p class="label" v-else>查看风机详情</p>
        </div>
      </aside>
    </div>
    <div class="btnms">
        <aside class="sidebar-left-top btnms4">
            <!-- <div class="stat-block-lefttop" @click="initView">
            <p class="label">初始化</p>
            </div> -->
            <el-select
                class="windSty"
                v-model="windvalue"
                filterable
                clearable
                placeholder="选择风机"
                size="small"
                style="width: 250px"
                @change="switchWind"
            >
                <el-option
                v-for="(item, index) in fjLonLatJsonArr"
                :key="index"
                :label="item.name"
                :value="index"
                />
            </el-select>
        </aside>
    </div>

    <!-- Left Sidebar -->
    <aside class="sidebar-left panel" v-if="showWindDB">
      <div class="stat-block">
        <p class="label">总装机容量：</p>
        <p class="value">
          2541<span
            style="
              font-size: 18px;
              font-weight: 400;
              color: #6c757d;
              margin-left: 4px;
            "
            >MW</span
          >
        </p>
        <!-- <div class="progress-bar"><div class="progress-bar-inner" style="width: 100%;"></div></div> -->
      </div>
      <div
        class="stat-block"
        style="display: flex; justify-content: space-between"
      >
        <p>
          <span class="labels">风电 </span
          ><span class="values"
            >1245<span
              style="
                font-size: 14px;
                font-weight: 400;
                color: #6c757d;
                margin-left: 4px;
              "
              >MW</span
            ></span
          >
        </p>
        <p>
          <span class="labels">光伏 </span
          ><span class="values"
            >1296<span
              style="
                font-size: 14px;
                font-weight: 400;
                color: #6c757d;
                margin-left: 4px;
              "
              >MW</span
            ></span
          >
        </p>
      </div>
      <div class="stat-block" style="margin-bottom: 0">
        <p class="label">安全天数：</p>
        <p class="value">1258天</p>
      </div>
    </aside>
    <aside class="sidebar-left2 panel" v-if="showWeatherDB && !showWindDetail">
      <div class="stat-block2">
        <span class="labels">数据 </span>
        <span class="values"
          >{{ showCover }} @ 目前高度:{{ progressHeight }}m; 气压: 0hpa;
        </span>
      </div>
      <div class="stat-block2">
        <span class="labels">模式 </span>
        <span class="covercheck">
          <el-check-tag
            v-for="(it, index) in windmodelArr"
            :key="index"
            type="primary"
            :disabled="it.disabled"
            :checked="it.check"
            >{{ it.value }}</el-check-tag
          >
        </span>
      </div>
      <div class="stat-block2">
        <span class="labels">范围 </span>
        <span class="values">{{ scopeNumMin() }}</span
        ><span class="values">{{ scopeUnit() }}</span>
        <span :class="scopeColor()"></span>
        <span class="values">{{ scopeNumMax() }}</span
        ><span class="values">{{ scopeUnit() }}</span>
      </div>
      <div class="stat-block2">
        <span class="labels">高度 </span>
        <!-- <span class="values">地表 </span>
                <span class="heightcheck">
                    <el-check-tag v-for="(it, index) in heightArr" :key="index" type="primary"
                     :checked="it.check" @change="valueOnChange(it)">{{it.value}}</el-check-tag>
                </span>
                <span class="values">hpa </span> -->
        <span class="values">0(m)</span>
        <div class="op-progress-bar">
          <div
            class="op-progress-bar-inner"
            :style="`width: ${progressPoint > 100 ? 100 : progressPoint}` + '%'"
          ></div>
        </div>
        <span class="values"> 10000(m)</span>
      </div>
      <div class="stat-block2">
        <span class="labels">覆盖模式 </span>
        <span class="covercheck">
          <el-check-tag
            v-for="(it, index) in coverArr"
            :key="index"
            type="primary"
            :disabled="it.disabled"
            :checked="it.check"
            @change="coverOnChange(it)"
            >{{ it.value }}</el-check-tag
          >
        </span>
      </div>
      <div class="stat-block2">
        <span class="labels">
          <span
            style="
              font-size: 15px;
              color: #6c757d;
              font-weight: 600;
              position: relative;
              top: 20px;
            "
            >场站类型</span
          >
        </span>
        <div style="display: flex; width: 405px">
          <div class="windStatus">
            <img :src="bw" style="width: 60px; height: 60px" />
            <p class="values windVal">并网</p>
          </div>
          <div class="windStatus">
            <img :src="dj" style="width: 60px; height: 60px" />
            <p class="values windVal">待机</p>
          </div>
          <div class="windStatus">
            <img :src="gz" style="width: 60px; height: 60px" />
            <p class="values windVal">故障</p>
          </div>
          <div class="windStatus">
            <img :src="jx" style="width: 60px; height: 60px" />
            <p class="values windVal">检修</p>
          </div>
          <div class="windStatus">
            <img :src="xd" style="width: 60px; height: 60px" />
            <p class="values windVal">限电</p>
          </div>
          <div class="windStatus">
            <img :src="lx" style="width: 60px; height: 60px" />
            <p class="values windVal">离线</p>
          </div>
          <div class="windStatus">
            <img :src="sl" style="width: 60px; height: 60px" />
            <p class="values windVal">受累</p>
          </div>
        </div>
      </div>
      <div class="stat-block2" v-if="viewer?.clock?.currentTime?.secondsOfDay">
        <span
          class="labels"
          style="display: flex; justify-content: center; align-items: center"
        >
          <span style="font-size: 15px; color: #6c757d; font-weight: 600"
            >UTC地球时间</span
          >
        </span>
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            width: 405px;
          "
        >
          <el-slider
            class="currentSlider"
            style="width: 97.5%; margin-left: 2.5%"
            v-model="currentTime"
            :min="0"
            :max="1440"
            :marks="marks"
            size="small"
            :show-tooltip="false"
            :format-tooltip="sliderFormatTooltip"
            @input="changeClockTime"
            @change="resetClockTimmer"
          />
        </div>
      </div>
    </aside>
    <aside class="sidebar-right panel" v-if="showWindDB">
      <div class="info-section">
        <h3>风场信息</h3>
        <div class="info-item">
          <span class="label">场站名称</span><span class="value">某某风场</span>
        </div>
        <div class="info-item">
          <span class="label">场站类型</span><span class="value">风场</span>
        </div>
        <div class="info-item">
          <span class="label">安全运行天数(天)</span
          ><span class="value">27</span>
        </div>
        <div class="info-item">
          <span class="label">接入台数</span><span class="value">29</span>
        </div>
        <div class="info-item">
          <span class="label">装机容量(MW)</span><span class="value">1245</span>
        </div>
        <!-- <div class="info-item">
                    <span class="label">经纬度</span><span class="value">106.2341, 37.2343</span>
                </div> -->
        <div class="info-item">
          <span class="label">并网时间</span
          ><span class="value">2025-08-28</span>
        </div>
        <div class="info-item">
          <span class="label">风机详情</span>
          <span
            class="value"
            id="windBtn"
            @click="showMsg"
            style="color: #4b55ae; cursor: pointer"
            >{{ showWindMsg ? "关闭详情" : "查看详情" }}</span
          >
        </div>
        <div class="info-item">
          <span class="label">电量详情</span>
          <span
            class="value"
            @click="showDetail"
            style="color: #4b55ae; cursor: pointer"
            >{{ showWindDetail ? "关闭详情" : "查看详情" }}</span
          >
        </div>
      </div>
      <!-- 实时负荷 -->
      <div class="info-section">
        <h3>实时负荷</h3>
        <PowerReviewHome
          :data="powerDataHome"
          :id="wpIds"
          :type="activeTab"
          @chartClick="showPowerChart"
        />
      </div>
      <!-- 清洁能源公司总装机容量 -->
      <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">{{
            Number(StationinformationData?.cblpoint?.qjny_zzjrl) || 0
          }}</span>
          <span class="title-all-unit">MW</span>
        </div>
        <div style="display: flex">
          <div
            class="left-content float-left"
            :class="activeTab == -1 ? 'piggy-bank' : ''"
          >
            <div class="img-num clearfix">
              <div class="img float-left">
                <img src="@/assets/windimgs/fc_b_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>
          </div>
          <div
            class="right-content float-left"
            :class="activeTab == -2 ? 'piggy-bank' : ''"
          >
            <div class="img-num clearfix">
              <div class="img float-left">
                <img src="@/assets/windimgs/gf_b_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>
          </div>
        </div>
      </div>
      <!-- 系统接入情况 -->
      <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">{{
            Number(StationinformationData?.cblpoint?.jr_zzjrl) || 0
          }}</span>
          <span class="title-all-unit">MW</span>
        </div>
        <div style="display: flex">
          <div
            class="left-content float-left"
            :class="activeTab == -1 ? 'piggy-bank' : ''"
          >
            <div class="img-num clearfix">
              <div class="img float-left">
                <img src="@/assets/windimgs/fc_b_1.png" alt="" />
              </div>
              <div class="num float-left">
                <span>风电场数量</span> <br />
                <span>{{ StationinformationData?.cblpoint?.jr_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?.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 == -1 ? 'piggy-bank' : ''"
          >
            <div class="img-num clearfix">
              <div class="img float-left">
                <img src="@/assets/windimgs/gf_b_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="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 height="16px" viewBox="0 0 1024 1024"><path d="M565.49844 517.552322c0-0.348009-0.063274-0.66438-0.063274-1.012389-4.998671 42.172336-23.601322 83.079186-56.187598 115.475639l-0.253097 0.253097c-77.099762 76.372107-202.034912 76.34047-279.0714-0.126549l0 0c-77.099762-76.498656-77.099762-200.547966 0.031637-277.046622-77.131399 76.498656-115.665462 176.788457-115.665462 277.046622 0 50.366361 9.744246 100.732722 29.2011 148.093552 40.653752 20.311058 86.622548 31.478975 135.248865 30.751321 160.811691-2.467699 289.258566-133.825192 286.75923-293.434671z" fill="#4b55ae" p-id="2660"></path><path d="M788.318967 355.095499l0 0c-15.407298-15.280749-31.795347-28.97964-48.942689-41.191584-31.637161-22.588933-65.742021-40.527204-101.365465-52.707511-31.225878-8.795131-60.711713-25.309729-85.325424-49.733618-19.456854-19.298668-33.978311-41.666141-43.596008-65.488924-18.887385-46.728087-18.887385-99.214138-0.031637-145.942225-16.103315 8.731857-31.289153 19.741589-44.924769 33.250657-59.034943 58.560386-72.702197 144.929836-41.34977 216.588006 9.491148 21.703093 23.031853 42.077425 40.811938 59.889146-0.031637 0.063274-0.063274 0.094911-0.094911 0.126549l46.126981 45.81061c3.796459 3.796459 7.24491 7.751105 10.661723 11.800661-0.348009-0.569469-0.66438-1.138938-1.012389-1.67677 53.561714 56.345784 86.907282 131.9586 88.204406 215.512343 2.752433 177.452838-139.994439 323.521612-318.839312 326.242407-22.462385 0.348009-44.418574-1.613495-65.64711-5.631415 2.309513 2.404424 4.555751 4.90376 6.960175 7.24491 77.099762 76.56193 178.117218 114.811258 279.166311 114.811258s202.129824-38.249328 279.197949-114.747984c50.872555-50.461272 84.819229-111.299533 102.156394-175.617882 8.921679-33.187382 13.509068-67.292242 13.509068-101.428739 0-100.289801-38.5657-200.547966-115.665462-277.046622z" fill="#4b55ae" p-id="2661"></path>
                        </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 height="16px" viewBox="0 0 1024 1024"><path d="M512 1024a358.4 358.4 0 0 1-358.4-358.4c0-131.9424 119.4496-353.792 358.4-665.6 238.9504 311.808 358.4 533.6576 358.4 665.6a358.4 358.4 0 0 1-358.4 358.4z m-281.6-358.4A281.6 281.6 0 0 0 512 947.2a25.6 25.6 0 1 0 0-51.2A230.4 230.4 0 0 1 281.6 665.6a25.6 25.6 0 1 0-51.2 0z" fill="#4b55ae" p-id="8243"></path>
                        </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=" svg-icon svg-icon-green co2">
                        <svg height="16px" viewBox="0 0 1024 1024"><path d="M707.52 692.48a124.16 124.16 0 0 1 2.88-28.16 104 104 0 0 1 9.28-24.96 133.76 133.76 0 0 1 15.68-23.04 238.72 238.72 0 0 1 22.08-23.04l18.56-17.28c4.48-3.776 8.672-7.968 12.48-12.48 2.944-3.488 5.408-7.36 7.36-11.52a43.52 43.52 0 0 0 3.2-12.48c0.32-5.12 0.32-10.24 0-15.36a22.72 22.72 0 0 0-22.4-28.16 20.8 20.8 0 0 0-21.44 13.12 45.44 45.44 0 0 0-3.52 14.08v16.96h-44.16v-7.68a65.92 65.92 0 0 1 16.96-48.64 72.96 72.96 0 0 1 53.44-16.96 71.68 71.68 0 0 1 51.2 16c11.712 12.256 17.728 28.864 16.64 45.76a101.76 101.76 0 0 1-1.92 20.16 77.12 77.12 0 0 1-6.08 17.92 84.48 84.48 0 0 1-10.88 16.96 160 160 0 0 1-16.32 16.64l-25.6 23.68a96 96 0 0 0-16 17.92 52.48 52.48 0 0 0-7.36 15.36h84.48v35.2h-139.52 0.96z m-197.12-120c0.64 14.24 2.976 28.32 7.04 41.92 2.56 9.312 7.904 17.6 15.36 23.68a50.56 50.56 0 0 0 52.8 0c7.456-6.08 12.8-14.368 15.36-23.68 4.032-13.632 6.4-27.68 7.04-41.92 1.28-17.28 1.92-38.592 1.92-64 0-25.376-0.64-46.72-1.92-64a178.24 178.24 0 0 0-7.04-41.92 46.72 46.72 0 0 0-15.36-23.68 50.56 50.56 0 0 0-52.8 0c-7.456 6.144-12.8 14.4-15.36 23.68a177.28 177.28 0 0 0-7.04 41.92c-1.28 17.088-1.92 38.4-1.92 64s0.64 46.944 1.92 64z m-71.68-139.2a169.28 169.28 0 0 1 16.96-60.16 96 96 0 0 1 37.76-39.04 161.92 161.92 0 0 1 132.16 0 96 96 0 0 1 37.76 39.04 169.28 169.28 0 0 1 16.96 60.16 768 768 0 0 1 0 153.28 168.96 168.96 0 0 1-16.96 59.84 89.92 89.92 0 0 1-37.76 38.4 170.56 170.56 0 0 1-132.16 0 89.92 89.92 0 0 1-37.76-38.4 168.96 168.96 0 0 1-16.96-59.84 768 768 0 0 1 0-153.28z m-124.48-40.96a35.52 35.52 0 0 0-34.56-18.24 34.56 34.56 0 0 0-22.72 7.36 49.28 49.28 0 0 0-14.08 24 205.44 205.44 0 0 0-7.04 43.52c-1.28 17.92-1.92 39.904-1.92 65.92a634.88 634.88 0 0 0 2.88 67.2c1.056 13.568 3.936 26.944 8.64 39.68 2.624 7.808 7.808 14.464 14.72 18.88 6.4 3.36 13.568 5.024 20.8 4.8 6.208 0.128 12.416-0.96 18.24-3.2a32 32 0 0 0 14.72-13.44 86.72 86.72 0 0 0 9.6-28.16 257.92 257.92 0 0 0 3.52-48h73.6a329.28 329.28 0 0 1-4.48 56.32 128 128 0 0 1-17.28 46.72 85.12 85.12 0 0 1-35.2 32 133.76 133.76 0 0 1-59.2 11.2 139.2 139.2 0 0 1-65.92-13.44 89.92 89.92 0 0 1-37.76-38.4 168.96 168.96 0 0 1-16.96-59.84 768 768 0 0 1 0-153.28 169.28 169.28 0 0 1 16.96-60.16 96 96 0 0 1 37.76-39.04 132.8 132.8 0 0 1 65.92-14.08 128 128 0 0 1 62.08 12.8c14.016 7.392 25.728 18.464 33.92 32 7.488 13.12 12.288 27.584 14.08 42.56 1.824 14.24 2.784 28.544 2.88 42.88h-73.6a132.8 132.8 0 0 0-9.6-58.56z" fill="#4b55ae" p-id="9468"></path>
                        </svg>
                    </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=" svg-icon svg-icon-green so2">
                        <svg height="16px" viewBox="0 0 1024 1024"><path d="M703.904 692.48c0-9.472 1.056-18.88 3.2-28.16a101.44 101.44 0 0 1 9.28-24.96 134.4 134.4 0 0 1 15.68-23.04 244.8 244.8 0 0 1 22.08-23.04l18.56-17.28a102.4 102.4 0 0 0 12.16-12.48c2.848-3.52 5.216-7.36 7.04-11.52a42.56 42.56 0 0 0 3.52-12.48c0.32-5.12 0.32-10.24 0-15.36a22.72 22.72 0 0 0-22.4-28.16 20.8 20.8 0 0 0-21.44 13.12 45.44 45.44 0 0 0-3.52 14.08v16.96h-44.16v-7.68a65.92 65.92 0 0 1 16.96-48.64 72.96 72.96 0 0 1 53.44-16.96 71.68 71.68 0 0 1 51.2 16 60.8 60.8 0 0 1 16.64 45.76 101.76 101.76 0 0 1-1.92 20.16 76.16 76.16 0 0 1-6.08 17.92 84.48 84.48 0 0 1-10.88 16.96 163.52 163.52 0 0 1-16.32 16.64l-25.6 23.68a96 96 0 0 0-16 17.92 53.12 53.12 0 0 0-7.36 15.36h85.44v35.2h-139.52z m-471.04-103.36c-0.096 7.84 0.544 15.68 1.92 23.36 1.12 6.4 3.744 12.448 7.68 17.6 4 4.96 9.184 8.8 15.04 11.2 7.552 2.976 15.584 4.384 23.68 4.16a47.04 47.04 0 0 0 32-10.88 41.28 41.28 0 0 0 13.44-33.92 61.12 61.12 0 0 0-3.2-21.12 41.92 41.92 0 0 0-10.88-16 77.76 77.76 0 0 0-20.16-13.12 288 288 0 0 0-32-12.16 264.64 264.64 0 0 1-42.56-17.92 114.24 114.24 0 0 1-30.08-22.72 81.28 81.28 0 0 1-17.6-30.08 128 128 0 0 1-5.76-39.68 102.08 102.08 0 0 1 30.08-80.96 120.96 120.96 0 0 1 82.88-26.56 180.48 180.48 0 0 1 45.44 5.44 96 96 0 0 1 35.84 17.28c10.4 8.576 18.56 19.552 23.68 32 5.92 14.176 8.768 29.44 8.32 44.8v10.24h-70.72a73.28 73.28 0 0 0-9.28-40.32 33.92 33.92 0 0 0-32-14.08 51.2 51.2 0 0 0-20.48 3.52 34.56 34.56 0 0 0-13.12 9.6 32 32 0 0 0-6.72 13.44 70.08 70.08 0 0 0-1.92 16c-0.384 9.984 2.048 19.84 7.04 28.48a64 64 0 0 0 32 21.12l56.96 24.64c12.096 5.12 23.584 11.552 34.24 19.2 8.16 5.984 15.296 13.216 21.12 21.44 5.248 7.68 8.928 16.256 10.88 25.28 2.272 10.56 3.36 21.28 3.2 32a100.8 100.8 0 0 1-32 84.16 147.84 147.84 0 0 1-93.44 26.24 122.24 122.24 0 0 1-89.28-27.2 105.92 105.92 0 0 1-26.88-77.76v-14.72h73.6v10.88l-0.96-2.88z m202.88-155.84a169.28 169.28 0 0 1 16.96-60.16 96 96 0 0 1 37.76-39.04 161.92 161.92 0 0 1 132.16 0 96 96 0 0 1 37.12 38.4 169.92 169.92 0 0 1 16.96 60.16 768 768 0 0 1 0 153.28 169.6 169.6 0 0 1-16.96 59.84 89.6 89.6 0 0 1-37.76 38.4 170.56 170.56 0 0 1-132.16 0 89.92 89.92 0 0 1-37.76-38.4 168.96 168.96 0 0 1-16.96-59.84 768 768 0 0 1 0.64-152.64z m71.68 139.2c0.64 14.24 3.008 28.288 7.04 41.92 2.56 9.28 7.936 17.6 15.36 23.68a50.56 50.56 0 0 0 52.8 0c7.456-6.08 12.8-14.4 15.36-23.68 4.064-13.6 6.4-27.68 7.04-41.92 1.28-17.28 1.92-38.592 1.92-64 0-25.376-0.64-46.72-1.92-64a176.64 176.64 0 0 0-7.04-41.92 46.72 46.72 0 0 0-15.36-23.68 50.56 50.56 0 0 0-52.8 0c-7.424 6.144-12.8 14.4-15.36 23.68a178.24 178.24 0 0 0-7.04 41.92c-1.28 17.088-1.92 38.4-1.92 64s0.448 46.944 1.28 64h0.64z" fill="#4b55ae" p-id="10598"></path>
                        </svg>
                    </div>
                    </div>
                    <div class="save-value">
                    {{
                        Number(Number(StationinformationData?.qt?.so2)).toFixed(2)
                    }}
                    </div>
                    <div class="save-name">二氧化硫</div>
                </div>
                </div>
            </div> -->
    </aside>
    <!-- Bottom Bar -->
    <div class="bottom-bar" v-if="showWindDetail && showWindDB">
      <!-- 损失电量 -->
      <div class="panel">
        <div class="indicator-title">
          <div class="status-title">
            <h3>损失电量</h3>
            <div class="date">
              <div
                class="day"
                :class="dates === 'D' ? 'active' : ''"
                @click="handleChange('D')"
              >
                日
              </div>
              <div
                class="mouth"
                :class="dates === 'M' ? 'active' : ''"
                @click="handleChange('M')"
              >
                月
              </div>
              <div
                class="year"
                :class="dates === 'Y' ? 'active' : ''"
                @click="handleChange('Y')"
              >
                年
              </div>
            </div>
          </div>
        </div>
        <div class="status-concent">
          <PieChart
            width="100%"
            height="100%"
            :ratio="10000"
            unit="万kWh"
            :lossPower="lossPower"
          ></PieChart>
        </div>
      </div>
      <!-- 风电场 -->
      <div class="panel">
        <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"
                  :class="
                    $store.state.moreSty === 'greenSty'
                      ? 'fengji-icon-box-green'
                      : 'fengji-icon-box-blue'
                  "
                ></div>
                <img
                  class="amount-image"
                  src="@/assets/windimgs/wind.png"
                  alt=""
                />
                <div class="amount-nums">
                  <text class="num-item">{{
                    StationinformationData?.cblpoint?.jr_fj_ts
                  }}</text>
                  台
                </div>
              </div>
              <div 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 style="color: #606769">{{ 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>
      </div>
      <!-- 光伏电站 -->
      <div class="panel">
        <div class="model-bg-new-right">
          <div class="infos">
            <div class="titles">
              <div class="amount">
                <div class="icon fengji-icon fengji-icon-box-blue"></div>
                <img
                  class="amount-image"
                  src="@/assets/windimgs/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">
                  {{ 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 style="color: #606769">{{ 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>
      </div>
    </div>
  </div>
</template>

<script>
import * as Cesium from "../../Cesium";
import PowerReviewHome from "@/components/windNeedCharts/power-review-home.vue";
import ListBarChart2Home from "@/components/windNeedCharts/list-bar-chart2-home.vue";
import PieChart from "@/components/windNeedCharts/pieChart.vue";
import dataJson from "./mapdataJson.json";
import dataJson2 from "./dataJson.json";

import dayjs from "dayjs";
//并网
import bw from "@/assets/windimgs/fanSvg/bw.svg";
//故障
import gz from "@/assets/windimgs/fanSvg/gz.svg";
//待机
import dj from "@/assets/windimgs/fanSvg/dj.svg";
//检修
import jx from "@/assets/windimgs/fanSvg/jx.svg";
//限电
import xd from "@/assets/windimgs/fanSvg/xd.svg";
//离线
import lx from "@/assets/windimgs/fanSvg/lx.svg";
//受累
import sl from "@/assets/windimgs/fanSvg/sl.svg";
export default {
  components: {
    PowerReviewHome,
    ListBarChart2Home,
    PieChart,
  },
  props: {
    showWeather: {
      type: Boolean,
      default: false,
    },
    currentHeight: {
      type: Number,
      default: 0,
    },
    fjLonLatJsonArr: {
        type: Array,
        default: () => {
            return []
        },
    },
    cesiumViewer: {
      type: Object,
      default: () => {
        return {
          clock: null,
        };
      },
    },
  },
  watch: {
    currentHeight: {
      handler(val) {
        if (val) {
          this.progressHeight = Math.ceil(val);
          this.progressPoint = Math.ceil((Math.ceil(val) / 10000) * 100);
        }
      },
    },

    cesiumViewer(val) {
      this.viewer = val || {};
      this.getViewerClock();
    },
  },

  data() {
    return {
      bw,
      gz,
      jx,
      dj,
      xd,
      lx,
      sl,
      windvalue: "",
      showWindDB: true,
      showWeatherDB:true,
      progressHeight: 0,
      progressPoint: 0,
      windmodelArr: [
        {
          value: "大气层",
          check: true,
        },
        {
          value: "地表层",
          check: false,
          disabled: true,
        },
      ],
      showHeight: 1000,
      heightArr: [
        {
          value: 1000,
          check: true,
        },
        {
          value: 850,
          check: false,
        },
        {
          value: 700,
          check: false,
        },
        {
          value: 500,
          check: false,
        },
        {
          value: 250,
          check: false,
        },
        {
          value: 70,
          check: false,
        },
        {
          value: 10,
          check: false,
        },
      ],
      showCover: "风场",
      coverArr: [
        {
          value: "风场",
          check: false,
        },
        {
          value: "云层",
          check: false,
        },
        {
          value: "降雨",
          check: false,
        },
        {
          value: "温度",
          check: false,
        },
        {
          value: "湿度",
          check: false,
          disabled: true,
        },
        {
          value: "3小时累计降雨量",
          check: false,
          disabled: true,
        },
        {
          value: "水汽含量",
          check: false,
          disabled: true,
        },
        {
          value: "云中总水量",
          check: false,
          disabled: true,
        },
        {
          value: "平均海平面压力",
          check: false,
          disabled: true,
        },
      ],
      activeTab: -1,
      wpIds: "KGDL_FGS0",
      powerDataHome: {},
      StationinformationData: [],
      ForecastPowerNewHome_fc: [],
      ForecastPowerNewHome_gf: [],
      wpInfos: {},
      lossPower: {},
      dates: "D",
      showWindDetail: false,
      showWindMsg: true,
      marks: {},
      currentTime: 0,
      cesiumClockTimmer: null,
      timeArray: [22, 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22],
      // timeArray: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 0],
    };
  },

  mounted() {
    this.StationinformationData = dataJson.StationinformationData;
    this.powerDataHome = dataJson.powerDataHome;
    this.wpInfos = dataJson2.wpInfosdata;
    this.findProjectPlan();

    let marks = {};
    for (let i = 0; i <= 12; i++) {
      const timeItem = this.timeArray[i];
      marks[i * 120] = timeItem < 10 ? `0${timeItem}` : `${timeItem}`;
    }
    this.marks = marks;

    this.viewer = this.cesiumViewer;

    this.cesiumClockTimmer = setInterval(() => {
      this.getViewerClock();
    }, 1000);
  },

  unmounted() {
    clearInterval(this.cesiumClockTimmer);
    this.cesiumClockTimmer = null;
  },

  methods: {
    switchWind(value) {
        let data = this.fjLonLatJsonArr[value]
        this.$emit("resetChangeWind", data)
    },
    getViewerClock() {
      let currentTime = 0;
      if (this?.viewer?.clock?.currentTime) {
        currentTime = parseInt(this.viewer.clock.currentTime.secondsOfDay / 60);
      }
      this.currentTime = currentTime;
    },

    sliderFormatTooltip(value) {
      let m = value % 60;
      let h = parseInt(value / 60);
      return `当前时间: ${h < 10 ? "0" + h : h}:${m < 10 ? "0" + m : m}`;
    },

    changeClockTime() {
      if (this?.viewer?.clock?.currentTime) {
        if (this.cesiumClockTimmer) {
          clearInterval(this.cesiumClockTimmer);
          this.cesiumClockTimmer = null;
        }

        const h = parseInt(this.currentTime / 60);
        const m = this.currentTime % 60;

        const changeUtc = dayjs(
          dayjs().format("YYYY-MM-DD") + ` ${h}:${m}:00`
        ).subtract(4, "hour");

        this.viewer.clock.currentTime = Cesium.JulianDate.fromDate(
          new Date(changeUtc)
        );
      }
    },

    resetClockTimmer() {
      if (!this.cesiumClockTimmer) {
        this.cesiumClockTimmer = setInterval(() => {
          this.getViewerClock();
        }, 1000);
      }
    },

    scopeColor() {
      if (this.showCover === "风场" || this.showCover === "温度") {
        return "valuess";
      } else if (this.showCover === "云层") {
        return "valuessColund";
      } else if (this.showCover === "降雨") {
        return "valuessTemp";
      }
    },
    scopeUnit() {
      if (this.showCover === "风场") {
        return "(m/s)";
      } else if (this.showCover === "温度") {
        return "(°C)";
      } else if (this.showCover === "云层") {
        return "(%)";
      } else if (this.showCover === "降雨") {
        return "(mm)";
      }
    },
    scopeNumMin() {
      if (this.showCover === "风场") {
        return "0.0";
      } else if (this.showCover === "温度") {
        return "-12";
      } else if (this.showCover === "云层") {
        return "0.0";
      } else if (this.showCover === "降雨") {
        return "0.0";
      }
    },
    scopeNumMax() {
      if (this.showCover === "风场") {
        return "25.0";
      } else if (this.showCover === "温度") {
        return "40";
      } else if (this.showCover === "云层") {
        return "100.0";
      } else if (this.showCover === "降雨") {
        return "50";
      }
    },
    backStations() {
    //   this.$emit("backStations")
      this.$router.push({
        path: "/",
      });
    },
    showWeatherMes() {
      this.showWeatherDB = !this.showWeatherDB;
    },
    showWindMes() {
      this.showWindDB = !this.showWindDB;
    },
    initView() {
        this.$emit("initView")
    },
    valueOnChange(it) {
      this.heightArr.forEach((it) => {
        it.check = false;
      });
      it.check = true;
      this.showHeight = it.value;
    },
    coverOnChange(itv) {
      this.coverArr.forEach((it) => {
        if (itv === it) {
          it.check = !it.check;
        } else {
          it.check = false;
        }
      });
      this.showCover = itv.value;
      this.$emit("coverOnChange", itv);
    },
    showDetail() {
      this.showWindDetail = !this.showWindDetail;
      this.findProjectPlan();
      this.$emit("showDetail", this.showWindDetail);
    },
    showMsg() {
      this.showWindMsg = !this.showWindMsg;
    },
    // 发电量
    findProjectPlan() {
      let data = dataJson.FindProjectplanData;

      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: this.$store.state.moreSty === "greenSty" ? 0 : 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: this.$store.state.moreSty === "greenSty" ? 0 : 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: this.$store.state.moreSty === "greenSty" ? 0 : 1,
            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: this.$store.state.moreSty === "greenSty" ? 0 : 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: this.$store.state.moreSty === "greenSty" ? 0 : 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: this.$store.state.moreSty === "greenSty" ? 0 : 1,
            total: data?.proplanmap
              ? data?.proplanmap?.gf_n_jhdl < 0
                ? 0
                : data?.proplanmap?.gf_n_jhdl
              : 0,
          },
        ],
      ];
      this.lossPower = {
        SFDL: this.wpInfos.rfdl,
        GZSS: this.wpInfos.rgzssdl,
        WHSS: this.wpInfos.rwhssdl,
        SLSS: this.wpInfos.rslssdl,
        XDSS: this.wpInfos.rxdssdl,
        XNSS: this.wpInfos.rxnssdl,
        SUM:
          this.wpInfos.rfdl +
          this.wpInfos.rgzssdl +
          this.wpInfos.rwhssdl +
          this.wpInfos.rslssdl +
          this.wpInfos.rxdssdl +
          this.wpInfos.rxnssdl,
      };
    },
    // 损失电量切换
    handleChange(val) {
      this.dates = val;
      this.getLossValuesAnalyse(val);
    },
    // 改变损失电量数据
    getLossValuesAnalyse(date) {
      if (Object.values(this.wpInfos).length) {
        if (date == "D") {
          this.lossPower = {
            SFDL: this.wpInfos.rfdl,
            GZSS: this.wpInfos.rgzssdl,
            WHSS: this.wpInfos.rwhssdl,
            SLSS: this.wpInfos.rslssdl,
            XDSS: this.wpInfos.rxdssdl,
            XNSS: this.wpInfos.rxnssdl,
            SUM:
              this.wpInfos.rfdl +
              this.wpInfos.rgzssdl +
              this.wpInfos.rwhssdl +
              this.wpInfos.rslssdl +
              this.wpInfos.rxdssdl +
              this.wpInfos.rxnssdl,
          };
        } else if (date == "M") {
          this.lossPower = {
            SFDL: this.wpInfos.yfdl,
            GZSS: this.wpInfos.ygzssdl,
            WHSS: this.wpInfos.ywhssdl,
            SLSS: this.wpInfos.yslssdl,
            XDSS: this.wpInfos.yxdssdl,
            XNSS: this.wpInfos.yxnssdl,
            SUM:
              this.wpInfos.yfdl +
              this.wpInfos.ygzssdl +
              this.wpInfos.ywhssdl +
              this.wpInfos.yslssdl +
              this.wpInfos.yxdssdl +
              this.wpInfos.yxnssdl,
          };
        } else if (date == "Y") {
          this.lossPower = {
            SFDL: this.wpInfos.nfdl,
            GZSS: this.wpInfos.ngzssdl,
            WHSS: this.wpInfos.nwhssdl,
            SLSS: this.wpInfos.nslssdl,
            XDSS: this.wpInfos.nxdssdl,
            XNSS: this.wpInfos.nxnssdl,
            SUM:
              this.wpInfos.nfdl +
              this.wpInfos.ngzssdl +
              this.wpInfos.nwhssdl +
              this.wpInfos.nslssdl +
              this.wpInfos.nxdssdl +
              this.wpInfos.nxnssdl,
          };
        } else {
          this.lossPower = {};
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.panel {
  background: rgba(248, 249, 252, 0.85);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
  padding: 20px;
}
.btnms {
  display: flex;
}
/* --- Left Sidebar --- */
.sidebar-left,
.sidebar-left-top {
  position: absolute;
  left: 20px;
}
.btnms1 {
  left: 20px;
  top: 80px;
}
.btnms2 {
  left: 75px;
  top: 80px;
}
.btnms3{
    left: 186px;
    top: 80px;
}
.btnms4{
    left: 20px;
    top: 120px;
    
}
.sidebar-left-top {
  padding: 3px 10px;
  border-radius: 8px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.15);
}
.sidebar-left {
  top: 160px;
  width: 260px;
}

.stat-block-lefttop {
  text-align: center;
  cursor: pointer;
  .label {
    font-size: 14px;
    color: #fff;
  }
}

.stat-block {
  margin-bottom: 15px;
}
.stat-block .label {
  font-size: 26px;
  color: #6c757d;
  margin-bottom: 5px;
}
.stat-block .value {
  font-size: 32px;
  font-weight: 600;
  color: #4b55ae;
}
.stat-block .labels {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 5px;
}
.stat-block .values {
  font-size: 16px;
  font-weight: 600;
  color: #4b55ae;
}
.progress-bar {
  height: 4px;
  background: #e9ecef;
  border-radius: 2px;
  margin-top: 10px;
}
.progress-bar-inner {
  height: 100%;
  background: #6c757d;
  border-radius: 2px;
}

/* --- Right Sidebar --- */
.sidebar-right {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 380px;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  .info-section {
    h3 {
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      color: #6c757d;
      margin-bottom: 5px;
    }
  }
  .energy-system-content {
    padding: 5px 5px 15px 5px;
    .title-all {
      margin-left: 5px;
      margin-bottom: 8px;
    }
    .title-all-content {
      font-weight: bold;
      font-size: 19px;
      color: #4b55ae;
    }
    .title-all-title {
      font-size: 13px;
    }
    .title-all-unit {
      font-size: 12px;
      color: #b1b1b1;
      margin-left: 5px;
    }
    .title {
      color: #6c757d;

      text-align: right;
      .title-name {
        float: left;
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
      }
    }
    .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: 12px;
            font-weight: 400;
            color: #6c757d;
          }
          span:nth-child(3) {
            font-size: 19px;
            font-weight: bold;
            line-height: 27px;
            color: #4b55ae;
          }
          span:nth-child(4) {
            margin-left: 15px;
          }
        }
      }
      .capacity {
        .item {
          margin-top: 9px;
          .el-row {
            text-align: center;
            .el-col:nth-child(1) {
              font-size: 12px;
              font-weight: 400;
              color: #6c757d;
            }
            .el-col:nth-child(2) {
              font-size: 16px;
              font-weight: bold;
              color: #4b55ae;
            }
            .el-col:nth-child(3) {
              font-size: 14px;
              font-weight: 400;
              color: #6c757d;
            }
          }
        }
      }
    }
    .left-content {
    }
    .right-content {
      border-left: 1px dashed #4e4040;
      padding-left: 10px;
    }
  }
  .clearfix::after {
    content: "";
    clear: both;
    height: 0;
    line-height: 0;
    visibility: hidden;
    display: block;
  }

  .clearfix {
    zoom: 1;
  }
  .model-bg {
    width: 100%;
    min-height: 135px;
    //   background-color: rgba(3, 5, 9, 0.5);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    padding: 0 2%;

    .titles {
      height: 45px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .name {
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
        color: #6c757d;
      }

      .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;
          .co2,
          .so2 {
            svg {
              width: 24px;
              height: 24px;
            }
          }
          .jnjp-icon1 {
            margin-left: -8px;
          }
          .kind-img {
            width: 100%;
            height: 100%;
          }
        }

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

        .save-name {
          font-size: 12px;
          color: #b3b3b3;
        }
      }
    }
  }
}
.sidebar-left2 {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 500px;
  .windStatus {
    display: flex;
    flex-direction: column;
    .windVal {
      position: relative;
      top: 5px;
      left: 10px;
    }
  }
  .covercheck {
    display: inline-block;
    width: 100%;
    .el-check-tag {
      margin: 0 5px 3px 0;
      padding: 5px 8px;
    }
    .is-disabled {
      background: #d4d4d4;
      color: #909090;
    }
  }
}
.stat-block2 {
  margin-bottom: 10px;
  display: flex;
  .op-progress-bar {
    width: 240px;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    margin-top: 8px;
    margin: 8px 5px 0 5px;
    .op-progress-bar-inner {
      height: 100%;
      background: #134ac0;
      border-radius: 3px;
      overflow: hidden;
    }
  }
  .labels {
    font-size: 15px;
    color: #6c757d;
    width: 40px;
    font-weight: 600;
    display: block;
    border-right: 2px solid #6c757d;
  }
  .values {
    font-size: 15px;
    font-weight: 600;
    color: #4b55ae;
    margin-left: 8px;
  }
  .valuess {
    margin-left: 5px;
    display: inline-block;
    width: 230px;
    height: 10px;
    background: linear-gradient(
      90deg,
      rgb(36, 104, 180),
      rgb(60, 157, 194),
      rgb(151, 218, 168),
      rgb(198, 231, 181),
      rgb(238, 247, 217),
      rgb(255, 238, 159),
      rgb(252, 217, 125),
      rgb(255, 182, 100),
      rgb(252, 150, 75),
      rgb(250, 112, 52),
      rgb(245, 64, 32),
      rgb(237, 45, 28),
      rgb(220, 24, 32),
      rgb(180, 0, 35)
    );
    position: relative;
    top: 6px;
  }
  .valuessColund {
    margin-left: 5px;
    display: inline-block;
    width: 230px;
    height: 10px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0),
      rgb(255, 255, 255, 1)
    );
    position: relative;
    top: 6px;
  }
  .valuessTemp {
    margin-left: 5px;
    display: inline-block;
    width: 230px;
    height: 10px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0),
      rgb(0, 110, 255)
    );
    position: relative;
    top: 6px;
  }
  .heightcheck,
  .covercheck {
    display: inline-block;
    margin-left: 5px;
    .el-check-tag {
      padding: 5px 8px;
      margin-right: 3px;
    }
  }
  .covercheck {
    width: 380px;
    margin-left: 5px;
    .el-check-tag {
      margin: 0 2px 3px 0;
      margin-right: 5px;
    }
  }
}

/* --- Bottom Bar --- */
.bottom-bar {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 420px; /* Make space for right sidebar */
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1.2fr;
  gap: 20px;
}
</style>
<style lang="less">
.windSty{
    .el-select__wrapper{
        background: transparent !important;
        box-shadow: none;
    }
    .is-hovering:not(.is-focused){
        background: transparent !important;
        box-shadow: none;
    }
    .el-select__placeholder {
        color: #fff !important;
    }
}
.currentSlider {
  .el-slider__runway {
    background: linear-gradient(
      90deg,
      #0a1931 0%,
      /* 凌晨4点 - 深蓝色 */ #1b3b6f 15%,
      /* 清晨 - 蓝色 */ #4a90e2 30%,
      /* 早晨 - 浅蓝色 */ #f7d038 45%,
      /* 上午 - 黄色 */ #ffffff 60%,
      /* 正午 - 白色 */ #ff9966 75%,
      /* 傍晚 - 橙色 */ #6a3093 90%,
      /* 夜晚 - 深紫色 */ #0a1931 100% /* 凌晨4点 - 深蓝色 */
    );
    // background: linear-gradient(
    //   to right,
    //   #0d1b2a 0%,
    //   /* 22:00 - 深夜 */ #1b263b 8.33%,
    //   /* 00:00 */ #1b263b 16.67%,
    //   /* 02:00 */ #415a77 25%,
    //   /* 04:00 - 黎明前 */ #778da9 33.33%,
    //   /* 06:00 - 清晨 */ #a8c0e0 41.67%,
    //   /* 08:00 */ #d4e4f7 50%,
    //   /* 10:00 */ #ffffff 58.33%,
    //   /* 12:00 - 正午 */ #ffffff 66.67%,
    //   /* 14:00 */ #fff9e6 75%,
    //   /* 16:00 */ #ffd89b 83.33%,
    //   /* 18:00 - 黄昏 */ #b4846c 91.67%,
    //   /* 20:00 */ #0d1b2a 100% /* 22:00 */
    // );
  }

  .el-slider__bar {
    background: transparent;
  }
}
.model-bg-new-right {
  width: 100%;
  min-height: 135px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;

  // padding: 1% 5%;
  .power-charts {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    width: 100%;
    margin-top: 10px;

    .power-name {
      width: 80px;
      margin-bottom: 20px;
      color: #6c757d;
    }

    .power-item {
      display: flex;
      flex-direction: column;
      width: 360px;

      .power-value {
        font-size: 12px;
        margin-bottom: -31px;
        font-family: Bicubik;
        margin-left: 255px;

        span:nth-child(1) {
          width: 5px;
          height: 5px;
          border-radius: 5px;
          display: inline-block;
          background-color: #6c757d;
          margin-right: 5px;
        }

        .green-value {
          color: #05bb4c;
        }

        .purple-value {
          color: #4b55ae;
        }
      }
    }
  }

  .infos {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
    width: 100%;

    .titles {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      // padding: 0 15px;
      height: 50%;

      .amount {
        display: flex;
        flex-direction: row;
        align-items: center;

        .amount-image {
          margin-left: -42px;
        }

        .amount-nums {
          font-size: 12px;
          color: #6c757d;
          margin-left: 10px;
          display: flex;
          flex-direction: row;
          align-items: baseline;

          .num-item {
            font-size: 20px;
            color: #6c757d;
            margin-right: 5px;
          }
        }
      }

      .info-nums {
        display: flex;
        align-items: baseline;
        font-size: 14px;
        color: #6c757d;

        .nums {
          font-size: 20px;
          color: #4b55ae;
          margin: 0 5px;
        }
      }
    }

    .tabSwitchover {
      // height: 23px;
      margin-top: 5px;

      .tabSwitchover-item {
        width: 42px;
        line-height: 23px;
        text-align: center;
        color: #b3b3b3;
        float: left;
        cursor: pointer;
      }

      .tab-active {
        border-bottom: 1px solid rgb(39, 219, 54);
        background: linear-gradient(
          to top,
          rgba(5, 187, 76, 0.5),
          rgba(5, 187, 76, 0)
        );
      }

      .unit {
        text-align: right;
        color: #b1b1b1;
        font-size: 12px;
        // float: right;
      }
    }

    .types {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 50%;
      width: 100%;
      margin-top: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #b5b5b5;

      .type-model {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 16%;
        // height: 75%;
        font-size: 16px;

        .type-name {
          font-size: 14px;
          font-family: Agency FB;
          margin-bottom: 10px;
        }

        .type-num {
          height: 15px;
          color: #6c757d;
        }
      }
    }
  }
}
.fengji-icon-box-blue {
  box-shadow: inset 1.5px -1px 1px 0px #4b55ae;
}
.fengji-icon {
  border-radius: 50%;
  width: 49px;
  height: 49px;
  animation: fadenum 5s linear infinite;

  @keyframes fadenum {
    100% {
      transform: rotate(360deg);
    }
  }

  svg {
    width: 25px;
    height: 22px;
  }
}

.indicator-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  width: 100%;
  height: 39px;
  border-bottom: 1px solid rgba(153, 153, 153, 0.5);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #6c757d;
}
.status-title {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  h3 {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 5px;
  }
}

.date {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #b3b3b3;
  cursor: pointer;

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

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

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

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

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

    &.active {
      background: rgba(5, 102, 187, 0.4);
      color: #fff;
    }
  }
}
.status-concent {
  width: 100%;
  height: calc(100% - 20px);
}

.info-section {
  font-size: 13px;
}
.info-section h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #6c757d;
  margin-bottom: 15px;
}
.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 5px;
}
.info-item .label {
  color: #6c757d;
}
.info-item .value {
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: 5px;
}
</style>