|
|
@@ -0,0 +1,2084 @@
|
|
|
+<template>
|
|
|
+ <div class="windView">
|
|
|
+ <!-- Left Sidebar -->
|
|
|
+ <!-- 按钮功能 -->
|
|
|
+ <aside class="sidebar-left">
|
|
|
+ <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>
|
|
|
+ <aside class="sidebar-left-top">
|
|
|
+ <div class="stat-block-lefttop" id="windBtn" @click="showMsg">
|
|
|
+ <p class="label" v-if="showWindMsg">风机详情</p>
|
|
|
+ <p class="label" v-else>风机详情</p>
|
|
|
+ </div>
|
|
|
+ </aside>
|
|
|
+ </div>
|
|
|
+ <div class="btnms">
|
|
|
+ <aside class="sidebar-left-top top2 btnms4">
|
|
|
+ <el-select
|
|
|
+ class="windSty"
|
|
|
+ v-model="windvalue"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ placeholder="选择风机"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%"
|
|
|
+ @change="switchWind"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in fjLonLatJsonArr"
|
|
|
+ :key="index"
|
|
|
+ :label="item.fjbh"
|
|
|
+ :value="index"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </aside>
|
|
|
+ </div>
|
|
|
+ </aside>
|
|
|
+ <!-- 清洁能源产业总装机容量 -->
|
|
|
+ <aside class="sidebar-left1" v-if="showWindDB">
|
|
|
+ <div class="stat-block" style="margin-top: 15px">
|
|
|
+ <p class="label" style="font-size: 28px">{{stationName}}总装机容量：</p>
|
|
|
+ <p class="value">
|
|
|
+ 2541<span
|
|
|
+ style="
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #e0e0e0;
|
|
|
+ margin-left: 10px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ "
|
|
|
+ >MW</span
|
|
|
+ >
|
|
|
+ </p>
|
|
|
+ </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: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #e0e0e0;
|
|
|
+ margin-left: 10px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ "
|
|
|
+ >MW</span
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span class="labels">光伏 </span
|
|
|
+ ><span class="values"
|
|
|
+ >1296<span
|
|
|
+ style="
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #e0e0e0;
|
|
|
+ margin-left: 10px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ "
|
|
|
+ >MW</span
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="stat-block" style="margin-top: 25px">
|
|
|
+ <p class="label">安全天数：</p>
|
|
|
+ <p class="value">
|
|
|
+ 1258<span
|
|
|
+ style="
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #e0e0e0;
|
|
|
+ margin-left: 10px;
|
|
|
+ "
|
|
|
+ >天</span
|
|
|
+ >
|
|
|
+ </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: #fff;
|
|
|
+ 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: #fff; 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-left3 panel" v-if="showWindDB">
|
|
|
+ <!-- 清洁能源公司总装机容量 -->
|
|
|
+ <div class="energy-system-content clearfix">
|
|
|
+ <div class="title">
|
|
|
+ <span class="title-name">{{stationName}}</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>
|
|
|
+ </aside>
|
|
|
+ <!-- 系统接入情况 -->
|
|
|
+ <aside class="sidebar-left4 panel" v-if="showWindDB">
|
|
|
+ <!-- 系统接入情况 -->
|
|
|
+ <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>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <!-- Right Sidebar -->
|
|
|
+ <!-- 实时负荷 -->
|
|
|
+ <aside class="sidebar-right panel" v-if="showWindDB">
|
|
|
+ <div class="info-section">
|
|
|
+ <h3>实时负荷</h3>
|
|
|
+ <PowerReviewHome
|
|
|
+ :data="powerDataHome"
|
|
|
+ :id="wpIds"
|
|
|
+ :type="activeTab"
|
|
|
+ @chartClick="showPowerChart"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </aside>
|
|
|
+ <!-- 损失电量 -->
|
|
|
+ <aside class="sidebar-right1 panel" v-if="showWindDB">
|
|
|
+ <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>
|
|
|
+ </aside>
|
|
|
+ <!-- 风电场 -->
|
|
|
+ <aside class="sidebar-right2 panel" v-if="showWindDB">
|
|
|
+ <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:#00E5FF'
|
|
|
+ : 'background-color:#05BB4C'
|
|
|
+ "
|
|
|
+ ></span>
|
|
|
+ <span style="color: #fff">{{ 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>
|
|
|
+ </aside>
|
|
|
+ <!-- 光伏电站 -->
|
|
|
+ <!-- <aside class="sidebar-right2 panel" v-if="showWindDB">
|
|
|
+ <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:#00E5FF'
|
|
|
+ : 'background-color:#05BB4C'
|
|
|
+ "
|
|
|
+ ></span>
|
|
|
+ <span style="color: #fff">{{ 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>
|
|
|
+ </aside> -->
|
|
|
+
|
|
|
+ <!-- Bottom Bar -->
|
|
|
+ <!-- <div class="bottom-bar" v-if="showWindDetail && showWindDB">
|
|
|
+ <div class="panel">
|
|
|
+ </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";
|
|
|
+
|
|
|
+import allStationJson from "./allStationJson.json";
|
|
|
+
|
|
|
+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,
|
|
|
+ stationName: "",
|
|
|
+ windvalue: "",
|
|
|
+ showWindDB: true,
|
|
|
+ showWeatherDB: false,
|
|
|
+ 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: [20, 22, 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20],
|
|
|
+ // 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 stationNameEn = this.$route.query.nameEn;
|
|
|
+ let stationObj = allStationJson.station.find(item => item.stationNameEn === stationNameEn);
|
|
|
+ this.stationName = stationObj.plantname
|
|
|
+
|
|
|
+ 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;
|
|
|
+ this.showWindDB = false
|
|
|
+ },
|
|
|
+ showWindMes() {
|
|
|
+ this.showWindDB = !this.showWindDB;
|
|
|
+ this.showWeatherDB = false
|
|
|
+ },
|
|
|
+ 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 {
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: rgba(20, 29, 51, 0.3);
|
|
|
+ backdrop-filter: blur(15px);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
+ box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
|
|
|
+ color: #e0e0e0;
|
|
|
+}
|
|
|
+.btnms {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+/* --- Left Sidebar --- */
|
|
|
+.sidebar-left {
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+}
|
|
|
+.sidebar-left1 {
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.btnms1, .btnms2, .btnms3{
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+.btnms4 {
|
|
|
+ left: 20px;
|
|
|
+ top: 120px;
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+.sidebar-left-top {
|
|
|
+ flex-grow: 1;
|
|
|
+ padding: 3px 10px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.4);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+ color: #f0f0f0;
|
|
|
+ border-radius: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ transition: background-color 0.3s ease, border-color 0.3s ease;
|
|
|
+}
|
|
|
+.top2 {
|
|
|
+ background-color: rgba(0, 0, 0, 0.2);
|
|
|
+}
|
|
|
+.sidebar-left {
|
|
|
+ top: 50px;
|
|
|
+ width: 350px;
|
|
|
+}
|
|
|
+.sidebar-left1 {
|
|
|
+ top: 150px;
|
|
|
+ width: 340px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-block-lefttop {
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ .label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.stat-block {
|
|
|
+ // margin-bottom: 15px;
|
|
|
+}
|
|
|
+.stat-block .label {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #fff;
|
|
|
+ // margin-bottom: 5px;
|
|
|
+}
|
|
|
+.stat-block .value {
|
|
|
+ font-size: 40px;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #00e5ff;
|
|
|
+}
|
|
|
+.stat-block .labels {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+.stat-block .values {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #00e5ff;
|
|
|
+}
|
|
|
+.progress-bar {
|
|
|
+ height: 4px;
|
|
|
+ background: #e9ecef;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.progress-bar-inner {
|
|
|
+ height: 100%;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+/* --- Right Sidebar --- */
|
|
|
+
|
|
|
+.sidebar-left3 {
|
|
|
+ bottom: 290px;
|
|
|
+ left: 20px;
|
|
|
+ width: 370px;
|
|
|
+}
|
|
|
+.sidebar-left4{
|
|
|
+ bottom: 20px;
|
|
|
+ left: 20px;
|
|
|
+ width: 370px;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar-right, .sidebar-right1, .sidebar-right2{
|
|
|
+ width: 410px;
|
|
|
+}
|
|
|
+.sidebar-right{
|
|
|
+ bottom: 740px;
|
|
|
+ right: 20px;
|
|
|
+}
|
|
|
+.sidebar-right1{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 380px;
|
|
|
+ right: 20px;
|
|
|
+}
|
|
|
+.sidebar-right2{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar-right, .sidebar-left3, .sidebar-left4 {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20px;
|
|
|
+ .info-section {
|
|
|
+ h3 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ text-transform: uppercase;
|
|
|
+ color: #fff;
|
|
|
+ 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: #00e5ff;
|
|
|
+ }
|
|
|
+ .title-all-title {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ .title-all-unit {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #b1b1b1;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ 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: #fff;
|
|
|
+ }
|
|
|
+ span:nth-child(3) {
|
|
|
+ font-size: 19px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 27px;
|
|
|
+ color: #00e5ff;
|
|
|
+ }
|
|
|
+ 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: #fff;
|
|
|
+ }
|
|
|
+ .el-col:nth-child(2) {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #00e5ff;
|
|
|
+ }
|
|
|
+ .el-col:nth-child(3) {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: #fff;
|
|
|
+ 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: #cacaca;
|
|
|
+ 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: #00e5ff;
|
|
|
+ border-radius: 3px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .labels {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #fff;
|
|
|
+ width: 40px;
|
|
|
+ font-weight: 600;
|
|
|
+ display: block;
|
|
|
+ border-right: 2px solid #fff;
|
|
|
+ }
|
|
|
+ .values {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #00e5ff;
|
|
|
+ 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" scoped>
|
|
|
+.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: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .power-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 360px;
|
|
|
+
|
|
|
+ .power-value {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: -31px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ margin-left: 255px;
|
|
|
+
|
|
|
+ span:nth-child(1) {
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: inline-block;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .green-value {
|
|
|
+ color: #05bb4c;
|
|
|
+ }
|
|
|
+
|
|
|
+ .purple-value {
|
|
|
+ color: #4f47e1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: #fff;
|
|
|
+ margin-left: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: baseline;
|
|
|
+
|
|
|
+ .num-item {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-nums {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .nums {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #00e5ff;
|
|
|
+ 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: #fff;
|
|
|
+ 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: Microsoft YaHei;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .type-num {
|
|
|
+ height: 15px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.fengji-icon-box-blue {
|
|
|
+ box-shadow: inset 1.5px -1px 1px 0px #00e5ff;
|
|
|
+}
|
|
|
+.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: #fff;
|
|
|
+}
|
|
|
+.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: #fff;
|
|
|
+ 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 #00e5ff;
|
|
|
+ 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 #00e5ff;
|
|
|
+ border-bottom: 1px solid #00e5ff;
|
|
|
+ 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 #00e5ff;
|
|
|
+ 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: 270px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-section {
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+.info-section h3 {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ text-transform: uppercase;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+.info-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ padding: 0 5px;
|
|
|
+}
|
|
|
+.info-item .label {
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.info-item .value {
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+}
|
|
|
+</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;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.currentSlider {
|
|
|
+ .el-slider__runway {
|
|
|
+ background: linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ #0a0e1a 0%,
|
|
|
+ #0a0e1a 8.33%,
|
|
|
+ #0c1a33 16.67%,
|
|
|
+ #0f2547 25%,
|
|
|
+ #1e3a72 33.33%,
|
|
|
+ #2c5282 41.67%,
|
|
|
+ #4a90e2 50%,
|
|
|
+ #6bb5ff 58.33%,
|
|
|
+ #ffd700 66.67%,
|
|
|
+ #ffed4e 75%,
|
|
|
+ #ffa500 83.33%,
|
|
|
+ #ff6b6b 91.67%,
|
|
|
+ #0a0e1a 100%
|
|
|
+ );
|
|
|
+
|
|
|
+ .el-slider__marks-text {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ // 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;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.windView{
|
|
|
+font-family: "Bicubik";
|
|
|
+}
|
|
|
+</style>
|
sunzehao