<template>
<div class="map">
<HeaderNav
ref="header"
:wpId="wpId"
:currents="currents"
@firstRender="firstRender"
@typeFlag="typeFlag"
:isShows="false"
/>
<!-- 山西左侧信息 -->
<div
v-if="currentTitle != '全国'"
class="sx-left-box"
:style="{ zIndex: dialogShow ? 6 : 5 }"
>
<div class="security-days safe_power">
<div class="text">安全天数:</div>
<div class="num">
<span class="font-num">{{
StationinformationData?.qt?.aqts
? StationinformationData.qt?.aqts
: "0"
}}</span>
<span class="unit">天</span>
</div>
<div class="security">
<div v-if="wpId.includes('FDC') || wpId.includes('GDC')" class="text">
{{ currentTitle }}资产统计:
</div>
<div v-else-if="tabShow == 0" class="text">资产统计:</div>
<div v-else-if="tabShow == -1" class="text">风电资产统计:</div>
<div v-else-if="tabShow == -2" class="text">光伏资产统计:</div>
<div class="num">
<span class="font-num">
{{
wpId.includes("FDC") || wpId.includes("GDC")
? (
StationinformationData?.station[wpId]?.zjrl / 1000
).toFixed(2)
: activeTab == 0
? StationinformationData?.qt?.zzjrl
: activeTab == -1
? StationinformationData?.qt?.fdzzjrl
: StationinformationData?.qt?.gfzzjrl
}}
</span>
<span class="unit-t">MW</span>
</div>
<div class="lineBox">
<div class="fd-rl" v-if="tabShow == 0">
<span class="text">风电</span>
<span class="font-num">
{{
wpId.includes("FDC")
? (
StationinformationData?.station[wpId]?.zjrl / 1000
).toFixed(2)
: StationinformationData?.qt?.fdzzjrl
}}
</span>
<span class="unit">MW</span>
</div>
<div class="gf-rl" v-if="tabShow == 0">
<span class="text">光伏</span>
<span class="font-num">{{
wpId.includes("GDC")
? (
StationinformationData?.station[wpId]?.zjrl / 1000
).toFixed(2)
: StationinformationData?.qt?.gfzzjrl
}}</span>
<span class="unit">MW</span>
</div>
</div>
</div>
</div>
<div
class="qjny-info safe_power"
@mouseenter="switchShow = true"
@mouseleave="switchShow = false"
:style="{ width: tabShow == 0 ? '406px' : 'calc(170px + 20px)' }"
>
<ul>
<li v-show="tabShow == -1 || tabShow == 0">
<div class="imgs">
<img src="@/assets/home/fc_1.png" alt="" />
</div>
<p class="qty_tit">
风场数量
<sapn class="qty_value">
{{
wpId.includes("FDC")
? 1
: StationinformationData?.cblpoint.qjny_fcts
}}</sapn
>
<span class="qty_u">个</span>
</p>
<div class="qty_content">
<p class="qty_imag">
风机台数
<span class="qty_val">
{{
wpId.includes("FDC")
? StationinformationData?.station[wpId]?.zjts
: StationinformationData?.cblpoint.qjny_fj_ts
}} </span
><span class="qty_unit">台</span>
</p>
<p class="qty_imag">
陆地风机
<span class="qty_val">
{{
wpId.includes("FDC")
? StationinformationData?.station[wpId]?.zjts
: StationinformationData?.cblpoint.qjny_fj_ts
}} </span
><span class="qty_unit">台</span>
</p>
<p class="qty_imag">
海上风机
<span class="qty_val">
{{
wpId.includes("FDC")
? StationinformationData?.station[wpId]?.hszjts
: StationinformationData?.cblpoint.qjny_hsfj_ts
}} </span
><span class="qty_unit">台</span>
</p>
</div>
</li>
<li class="line" v-show="tabShow == 0"></li>
<li v-show="tabShow == 0 || tabShow == -2">
<div class="imgs">
<img src="@/assets/home/gf_1.png" alt="" />
</div>
<p class="qty_tit">
光伏数量
<sapn class="qty_value" id="pv">{{
wpId.includes("GDC")
? 1
: StationinformationData?.cblpoint.qjny_gfts
}}</sapn>
<span class="qty_u">个</span>
</p>
<div class="qty_content">
<p class="qty_imag">
逆变器
<span class="qty_val">
{{
wpId.includes("GDC")
? StationinformationData?.station[wpId]?.jzzjts +
StationinformationData?.station[wpId]?.zczjts
: StationinformationData?.cblpoint.qjny_gf_jzts +
StationinformationData?.cblpoint.qjny_gf_zcts
}}
</span>
<span class="qty_unit">台</span>
</p>
<p class="qty_imag">
集中式<span class="qty_val">
{{
wpId.includes("GDC")
? StationinformationData?.station[wpId]?.jzzjts
: StationinformationData?.cblpoint.qjny_gf_jzts
}} </span
><span class="qty_unit">台</span>
</p>
<p class="qty_imag">
组串式<span class="qty_val">
{{
wpId.includes("GDC")
? StationinformationData?.station[wpId]?.zczjts
: StationinformationData?.cblpoint.qjny_gf_zcts
}} </span
><span class="qty_unit">台</span>
</p>
</div>
</li>
</ul>
<div class="switch-jrqk" v-show="switchShow">
<div><img src="@/assets/imgs/arrows.png" /> 接入情况</div>
<ul>
<li v-show="tabShow == -1 || tabShow == 0">
<div class="imgs">
<img src="@/assets/home/fc_1.png" alt="" />
</div>
<p class="qty_tit">
风场数量
<sapn class="qty_value">
{{
wpId.includes("FDC")
? 1
: StationinformationData?.cblpoint?.jr_fcts
}}</sapn
>
<span class="qty_u">个</span>
</p>
<div class="qty_content">
<p class="qty_imag">
风机台数<span class="qty_val">
{{
wpId.includes("FDC")
? StationinformationData?.station[wpId]?.zjts
: StationinformationData?.cblpoint?.jr_fj_ts
}} </span
><span class="qty_unit">台</span>
</p>
<p class="qty_imag">
陆地风机<span class="qty_val">
{{
wpId.includes("FDC")
? StationinformationData?.station[wpId]?.zjts
: StationinformationData?.cblpoint?.jr_fj_ts
}} </span
><span class="qty_unit">台</span>
</p>
<p class="qty_imag">
海上风机<span class="qty_val">
{{
wpId.includes("FDC")
? StationinformationData?.station[wpId]?.hszjts
: StationinformationData?.cblpoint?.qjny_hsfj_ts
}} </span
><span class="qty_unit">台</span>
</p>
</div>
</li>
<li class="line" v-if="tabShow == 0"></li>
<li v-show="tabShow == 0 || tabShow == -2">
<div class="imgs">
<img src="@/assets/home/gf_1.png" alt="" />
</div>
<p class="qty_tit">
光伏数量
<sapn class="qty_value" id="pv">
{{
wpId.includes("GDC")
? 1
: StationinformationData?.cblpoint?.jr_gfts
}}</sapn
>
<span class="qty_u">个</span>
</p>
<div class="qty_content">
<p class="qty_imag">
逆变器<span class="qty_val">
{{
wpId.includes("GDC")
? StationinformationData?.station[wpId]?.jzzjts +
StationinformationData?.station[wpId]?.zczjts
: StationinformationData?.cblpoint.jr_gf_jzts +
StationinformationData?.cblpoint.jr_gf_zcts
}}
</span>
<span class="qty_unit">台</span>
</p>
<p class="qty_imag">
集中式<span class="qty_val">
{{
wpId.includes("GDC")
? StationinformationData?.station[wpId]?.jzzjts
: StationinformationData?.cblpoint?.jr_gf_jzts
}} </span
><span class="qty_unit">台</span>
</p>
<p class="qty_imag">
组串式<span class="qty_val">
{{
wpId.includes("GDC")
? StationinformationData?.station[wpId]?.zczjts
: StationinformationData?.cblpoint?.jr_gf_zcts
}} </span
><span class="qty_unit">台</span>
</p>
</div>
</li>
</ul>
</div>
</div>
<div class="ecoName safe_power">
<p class="ecoTitle">社会贡献<span>万吨/月</span></p>
<ul>
<li class="eco_count">
<div class="svg-icon svg-icon-green">
<svg-icon class="" svgid="svg-煤" />
</div>
<p class="eco_val text-ellipsis">
{{ (StationinformationData?.qt.jym).toFixed(2) }}
</p>
<p class="eco_name">煤</p>
</li>
<li class="eco_count">
<div class="svg-icon svg-icon-green">
<svg-icon class="" svgid="svg-水" />
</div>
<p class="eco_val text-ellipsis">
{{ (StationinformationData?.qt.jys).toFixed(2) }}
</p>
<p class="eco_name">水</p>
</li>
<li class="eco_count">
<div class="kind">
<div class="svg-icon svg-icon-green">
<svg-icon svgid="svg-co2" />
</div>
</div>
<p class="eco_val text-ellipsis">
{{ (StationinformationData?.qt.co2).toFixed(2) }}
</p>
<p class="eco_name">二氧化碳</p>
</li>
<li class="eco_count">
<div class="kind">
<div class="svg-icon svg-icon-green">
<svg-icon svgid="svg-so2" />
</div>
</div>
<p class="eco_val text-ellipsis">
{{ (StationinformationData?.qt.so2).toFixed(2) }}
</p>
<p class="eco_name">二氧化硫</p>
</li>
</ul>
</div>
<div
class="my_echarts safe_power"
v-if="penetrateType == 3"
@dblclick="handleShowCharts(currentTitle)"
>
<power-echarts
:CurveValues="CurveValues"
width="680px"
height="220px"
:unit="'MW'"
:ratio="1000"
:id="'cut-power'"
:orient="'horizontal'"
/>
</div>
</div>
<el-dialog
class="dialogs"
width="80%"
top="100px"
v-model="dialogShow"
:show-close="true"
destroy-on-close
>
<template #title>
<div class="dialog-title">
<div class="title">{{ showName }}</div>
</div>
</template>
<div class="dialog-body" style="height: 600px">
<img class="dialog-img" src="@assets/imgs/dialog.png" />
<power-echarts
:id="'show-chart'"
:showTitle="false"
:CurveValues="showCharts"
width="100%"
height="560px"
:unit="'MW'"
:orient="'horizontal'"
/>
</div>
</el-dialog>
<!-- 全国左侧信息 -->
<div class="leftBox" v-if="currentTitle == '全国'">
<div
:class="
$store.state.themeName === 'light' ? 'new-home-light' : 'new-home'
"
>
<div class="security-day">
<div v-if="activeTab == 0" class="text">总装机容量:</div>
<div v-if="activeTab == -1" class="text">
风电总装机容量:
</div>
<div v-if="activeTab == -2" class="text">
光伏总装机容量:
</div>
<div class="num">
<span class="font-num" v-if="activeTab == 0">{{
StationinformationData?.qt?.zzjrl
}}</span>
<span class="font-num" v-if="activeTab == -1">{{
StationinformationData?.qt?.fdzzjrl
}}</span>
<span class="font-num" v-if="activeTab == -2">{{
StationinformationData?.qt?.gfzzjrl
}}</span>
<span class="unit">MW</span>
</div>
<div class="security">
<div class="lineBox">
<div v-if="activeTab == 0">
<span>风电</span>
<span class="num font-num">{{
StationinformationData?.qt?.fdzzjrl
}}</span>
<span class="unit">MW</span>
</div>
<div v-if="activeTab == 0">
<span>光伏</span>
<span class="num font-num">{{
StationinformationData?.qt?.gfzzjrl
}}</span>
<span class="unit">MW</span>
</div>
</div>
<div class="text">安全天数:</div>
<div class="num">
<span class="font-num">{{
StationinformationData?.qt?.aqts || 0
}}</span>
<span class="unit-t">天</span>
</div>
</div>
</div>
<div
class="energy-system-box box1"
:class="activeTab == -1 || activeTab == -2 ? 'piggy-tab-width' : ''"
>
<div class="energy-system-content clearfix">
<div class="title">
<span class="title-name">公司</span>
<span class="title-all-title">总装机容量 :</span>
<span class="title-all-content" v-if="activeTab == 0">{{
Number(StationinformationData?.cblpoint?.qjny_zzjrl) || 0
}}</span>
<span class="title-all-content" v-if="activeTab == -1">{{
StationinformationData?.cblpoint?.qjny_fd_zjrl || 0
}}</span>
<span class="title-all-content" v-if="activeTab == -2">{{
StationinformationData?.cblpoint?.qjny_gf_zjrl || 0
}}</span>
<span class="title-all-unit">MW</span>
</div>
<div
class="left-content float-left"
:class="activeTab == -1 ? 'piggy-bank' : ''"
v-if="activeTab == -1 || activeTab == 0"
>
<div class="img-num clearfix">
<div class="img float-left">
<img src="@/assets/home/fc_1.png" alt="" />
</div>
<div class="num float-left">
<span>风电场数量</span> <br />
<span>{{ StationinformationData?.cblpoint?.qjny_fcts }}</span>
<span>个</span>
</div>
</div>
<div class="capacity">
<div class="item">
<el-row align="middle">
<el-col :span="8"><span>装机容量</span></el-col>
<el-col :span="9"
><span>{{
StationinformationData?.cblpoint?.qjny_fd_zjrl
}}</span></el-col
>
<el-col :span="7"><span>MW</span></el-col>
</el-row>
</div>
<!-- <div class="item">
<el-row>
<el-col :span="8"><span>风机台数</span></el-col>
<el-col :span="9"
><span>{{
StationinformationData?.cblpoint?.qjny_fj_ts
}}</span></el-col
>
<el-col :span="7"><span>台</span></el-col>
</el-row>
</div> -->
</div>
</div>
<div
class="right-content float-left"
:class="activeTab == -2 ? 'piggy-bank' : ''"
v-if="activeTab == -2 || activeTab == 0"
>
<div class="img-num clearfix">
<div class="img float-left">
<img src="@/assets/home/gf_1.png" alt="" />
</div>
<div class="num float-left">
<span>光伏电站数量</span> <br />
<span>{{ StationinformationData?.cblpoint?.qjny_gfts }}</span>
<span>个</span>
</div>
</div>
<div class="capacity">
<div class="item">
<el-row>
<el-col :span="8"><span>装机容量</span></el-col>
<el-col :span="9"
><span>{{
StationinformationData?.cblpoint?.qjny_gf_zjrl
}}</span></el-col
>
<el-col :span="7"><span>MW</span></el-col>
</el-row>
</div>
<!-- <div class="item">
<el-row>
<el-col :span="8"><span>集中式</span></el-col>
<el-col :span="9"
><span>{{
StationinformationData?.cblpoint?.qjny_gf_jzts
}}</span></el-col
>
<el-col :span="7"><span>台</span></el-col>
</el-row>
</div>
<div class="item">
<el-row>
<el-col :span="8"><span>组串式</span></el-col>
<el-col :span="9"
><span>{{
StationinformationData?.cblpoint?.qjny_gf_zcts
}}</span></el-col
>
<el-col :span="7"><span>台</span></el-col>
</el-row>
</div> -->
</div>
</div>
</div>
</div>
<div
class="energy-system-box box2"
:class="activeTab == -1 || activeTab == -2 ? 'piggy-tab-width' : ''"
>
<div class="energy-system-content clearfix">
<div class="title">
<span class="title-name">系统接入情况</span>
<span class="title-all-title">总装机容量 :</span>
<span class="title-all-content" v-if="activeTab == 0">{{
Number(StationinformationData?.cblpoint?.jr_zzjrl) || 0
}}</span>
<span class="title-all-content" v-if="activeTab == -1">{{
StationinformationData?.cblpoint?.jr_fd_zjrl || 0
}}</span>
<span class="title-all-content" v-if="activeTab == -2">{{
StationinformationData?.cblpoint?.jr_gf_zjrl || 0
}}</span>
<span class="title-all-unit">MW</span>
</div>
<div
class="left-content float-left"
:class="activeTab == -1 ? 'piggy-bank' : ''"
v-if="activeTab == -1 || activeTab == 0"
>
<div class="img-num clearfix">
<div>
<div class="img float-left">
<img src="../../../assets/home/fc_1.png" alt="" />
</div>
<div class="num float-left">
<span>风电场数量</span> <br />
<span>{{ StationinformationData?.cblpoint?.jr_fcts }}</span>
<span>个</span>
</div>
</div>
</div>
<div class="capacity">
<div class="item">
<el-row>
<el-col :span="8"><span>装机容量</span></el-col>
<el-col :span="9"
><span>{{
StationinformationData?.cblpoint?.jr_fd_zjrl
}}</span></el-col
>
<el-col :span="7"><span>MW</span></el-col>
</el-row>
</div>
<div class="item">
<el-row>
<el-col :span="8"><span>风机台数</span></el-col>
<el-col :span="9"
><span>{{
StationinformationData?.cblpoint?.jr_fj_ts
}}</span></el-col
>
<el-col :span="7"><span>台</span></el-col>
</el-row>
</div>
</div>
</div>
<div
class="right-content float-left"
:class="activeTab == -2 ? 'piggy-bank' : ''"
v-if="activeTab == -2 || activeTab == 0"
>
<div class="img-num clearfix">
<div class="img float-left">
<img src="../../../assets/home/gf_1.png" alt="" />
</div>
<div class="num float-left">
<span>光伏电站数量</span> <br />
<span>{{ StationinformationData?.cblpoint?.jr_gfts }}</span>
<span>个</span>
</div>
</div>
<div class="capacity">
<div class="item">
<el-row>
<el-col :span="8"><span>装机容量</span></el-col>
<el-col :span="9"
><span>{{
StationinformationData?.cblpoint?.jr_gf_zjrl || 0
}}</span></el-col
>
<el-col :span="7"><span>MW</span></el-col>
</el-row>
</div>
<div class="item">
<el-row>
<el-col :span="8"><span>集中式</span></el-col>
<el-col :span="9"
><span>{{
StationinformationData?.cblpoint?.jr_gf_jzts || 0
}}</span></el-col
>
<el-col :span="7"><span>台</span></el-col>
</el-row>
</div>
<div class="item">
<el-row>
<el-col :span="8"><span>组串式</span></el-col>
<el-col :span="9"
><span>{{
StationinformationData?.cblpoint?.jr_gf_zcts || 0
}}</span></el-col
>
<el-col :span="7"><span>台</span></el-col>
</el-row>
</div>
</div>
</div>
</div>
</div>
<div class="energy-system-box box3">
<div class="model-bg">
<div class="titles">
<div class="name">节能减排</div>
<div class="unit">(单位: 万吨)</div>
</div>
<div class="save">
<div class="save-item">
<div
class="jnjp-icon svg-icon svg-icon-green"
style="width:20px,height:20px"
>
<svg-icon class="" svgid="svg-煤" />
</div>
<div class="save-value">
{{
Number(Number(StationinformationData?.qt?.jym)).toFixed(2)
}}
</div>
<div class="save-name">煤</div>
</div>
<div class="save-item">
<div class="jnjp-icon svg-icon svg-icon-green">
<svg-icon class="" svgid="svg-水" />
</div>
<div class="save-value">
{{
Number(Number(StationinformationData?.qt?.jys)).toFixed(2)
}}
</div>
<div class="save-name">水</div>
</div>
<div class="save-item">
<div class="kind">
<div class="jnjp-icon1 svg-icon svg-icon-green">
<svg-icon class="" svgid="svg-co2" />
</div>
</div>
<div class="save-value">
{{
Number(Number(StationinformationData?.qt?.co2)).toFixed(2)
}}
</div>
<div class="save-name">二氧化碳</div>
</div>
<div class="save-item">
<div class="kind">
<div class="jnjp-icon1 svg-icon svg-icon-green">
<svg-icon class="" svgid="svg-so2" />
</div>
</div>
<div class="save-value">
{{
Number(Number(StationinformationData?.qt?.so2)).toFixed(2)
}}
</div>
<div class="save-name">二氧化硫</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 展示当前场站名称 -->
<div
class="name-box"
:style="{ zIndex: dialogShow || dialogVisible || dialogElectric ? 2 : 7 }"
v-if="currentTitle != '全国'"
>
<div class="name-box-title">
{{ currentTitle }}
</div>
</div>
<!-- 返回按钮 -->
<div
class="return"
:style="{ zIndex: dialogShow || dialogVisible || dialogElectric ? 2 : 7 }"
@click="
backMap(
stationList[currents - 1]?.wpId,
stationList[currents - 1]?.name
)
"
v-show="currents != 0"
>
<span class="svg-icon svg-icon-sm">
<svg-icon :svgid="'svg-arrow-dpwn-1'" />
</span>
返回
</div>
<!-- 地图 -->
<div class="map-img">
<!-- 全国 -->
<SvgMapNX
v-if="currentTitle == '全国'"
:homeSuspensionWindowsData="homeSuspensionWindowsData"
:mapList="mapList"
:show="showType"
:data="StationinformationData"
@clickLabel="clickLabel"
>
</SvgMapNX>
<!-- 山西 -->
<SX
v-if="currentTitle != '全国'"
:showType="showType"
:companyid="companyid"
:data="StationinformationData"
@clickLabel="clickLabel"
>
</SX>
</div>
<!-- 全国右侧信息 -->
<div
class="right"
v-if="currentTitle == '全国'"
:class="activeTab == -1 || activeTab == -2 ? 'top-distance' : ''"
>
<el-dialog
class="dialogs"
width="80%"
top="100px"
v-model="dialogElectric"
:show-close="true"
>
<template #title>
<div class="dialog-title">
<div class="title">{{ showName }}</div>
</div>
</template>
<div class="dialog-body" style="height: 500px">
<img class="dialog-img" src="@assets/imgs/dialog.png" />
<div class="date">
<div
class="day"
:class="electronType === 'day' ? 'active' : ''"
@click="handleElectricDetail('day', '日发电量', type)"
>
日
</div>
<div
class="mouth"
:class="electronType === 'month' ? 'active' : ''"
@click="handleElectricDetail('month', '月发电量', type)"
>
月
</div>
<div
class="year"
:class="electronType === 'year' ? 'active' : ''"
@click="handleElectricDetail('year', '年发电量', type)"
>
年
</div>
</div>
<BarCharts
:list="barList"
width="100%"
height="500px"
:ratio="10000"
:showLegend="true"
:top="30"
:units="units"
:interval="electronType === 'day' ? 1 : 0"
:showkey="showkey"
:showName="showName"
:color="colors"
>
</BarCharts>
</div>
</el-dialog>
<Row type="flex" style="margin-bottom: 30px">
<Col :span="24">
<div class="model-bg-new">
<div class="titles">
<div class="name">
{{ activeTab == 0 ? "实时负荷" : "关键指标" }}
</div>
<!-- <div class="unit">(单位: MW)</div> -->
</div>
<power-review-home
:data="powerDataHome"
:id="wpIds"
:type="activeTab"
@chartClick="showPowerChart"
/>
</div>
<!-- @chartClick="showPowerChart" -->
</Col>
</Row>
<!-- 风电场 -->
<Row
type="flex"
style="margin-bottom: 30px"
v-if="activeTab == -1 || activeTab == 0"
>
<Col :span="24">
<div class="model-bg-new-right">
<div class="infos">
<div class="titles">
<div class="amount">
<div class="icon fengji-icon svg-icon svg-icon-white"></div>
<img
class="amount-image"
src="@/assets/png/wind.png"
alt=""
/>
<div class="amount-nums">
<text class="num-item">{{
Math.floor(StationinformationData?.cblpoint?.jr_fj_ts)
}}</text>
台
</div>
</div>
<div
v-if="
!(
wpId.includes('FDC') ||
wpId.includes('GC') ||
wpId.includes('GDC')
)
"
class="info-nums"
>
风电场<text class="nums">{{
Math.floor(StationinformationData?.cblpoint?.jr_fcts)
}}</text>
个
</div>
</div>
<div class="types">
<div class="type-model">
<div class="type-name" style="color: #1d99ff">待机</div>
<div class="type-num">
{{ Math.floor(StationinformationData?.mxztmap?.fd_djnum) || 0 }}
</div>
</div>
<div class="type-model">
<div class="type-name" style="color: #05bb4c">运行</div>
<div class="type-num">
{{ Math.floor(StationinformationData?.mxztmap?.fd_yxnum) || 0 }}
</div>
</div>
<div class="type-model">
<div class="type-name" style="color: #ba3237">故障</div>
<div class="type-num">
{{ Math.floor(StationinformationData?.mxztmap?.fd_gznum) || 0 }}
</div>
</div>
<div class="type-model">
<div class="type-name" style="color: #e17e23">检修</div>
<div class="type-num">
{{ Math.floor(StationinformationData?.mxztmap?.fd_jxnum) || 0 }}
</div>
</div>
<div class="type-model">
<div class="type-name" style="color: #c531c7">限电</div>
<div class="type-num">
{{ Math.floor(StationinformationData?.mxztmap?.fd_xdnum) || 0 }}
</div>
</div>
<div class="type-model">
<div class="type-name" style="color: #fff">受累</div>
<div class="type-num">
{{ Math.floor(StationinformationData?.mxztmap?.fd_slnum) || 0 }}
</div>
</div>
<div class="type-model">
<div class="type-name" style="color: #606769">离线</div>
<div class="type-num">
{{ Math.floor(StationinformationData?.mxztmap?.fd_lxnum) || 0 }}
</div>
</div>
</div>
<div class="tabSwitchover">
<div class="unit"><span>(单位: 万kWh)</span></div>
</div>
<div
v-for="(item, index) in ForecastPowerNewHome_fc"
:key="index"
>
<div class="power-charts">
<div class="power-name">{{ item[0].name }}</div>
<div class="power-item">
<div class="power-value">
<span
:style="
item[0].color === 1
? 'background-color:#4B55AE'
: 'background-color:#05BB4C'
"
></span>
<span>{{ item[0].total }}</span>
</div>
<list-bar-chart-2-home
:list="item"
height="55px"
width="250px"
@click="
handleElectricDetail(item[0].id, item[0].name, 'fc')
"
/>
</div>
</div>
</div>
</div>
</div>
</Col>
</Row>
<!-- 光电站 -->
<Row type="flex" v-if="activeTab == -2 || activeTab == 0">
<Col :span="24">
<div class="model-bg-new-right">
<div class="infos">
<div class="titles">
<div class="amount">
<div class="icon fengji-icon svg-icon svg-icon-white"></div>
<img
class="amount-image"
src="@/assets/png/sy-sun.png"
alt=""
/>
<div class="amount-nums">
<text class="num-item">{{
Number(
StationinformationData?.cblpoint?.jr_gf_jzts +
StationinformationData?.cblpoint?.jr_gf_zcts
) || 0
}}</text>
台
</div>
</div>
<div class="info-nums">
电站<text class="nums">{{
StationinformationData?.cblpoint?.jr_gfts
}}</text>
个
</div>
</div>
<div class="types">
<div class="type-model">
<div class="type-name" style="color: #1d99ff">待机</div>
<div class="type-num">
{{ Math.floor(StationinformationData?.mxztmap?.gf_djnum) || 0 }}
</div>
</div>
<div class="type-model">
<div class="type-name" style="color: #05bb4c">运行</div>
<div class="type-num">
{{ Math.floor(StationinformationData?.mxztmap?.gf_yxnum) || 0 }}
</div>
</div>
<div class="type-model">
<div class="type-name" style="color: #ba3237">故障</div>
<div class="type-num">
{{ Math.floor(StationinformationData?.mxztmap?.gf_gznum) || 0 }}
</div>
</div>
<div class="type-model">
<div class="type-name" style="color: #e17e23">检修</div>
<div class="type-num">
{{ Math.floor(StationinformationData?.mxztmap?.gf_jxnum) || 0 }}
</div>
</div>
<div class="type-model">
<div class="type-name" style="color: #c531c7">限电</div>
<div class="type-num">
{{ Math.floor(StationinformationData?.mxztmap?.gf_xdnum) || 0 }}
</div>
</div>
<div class="type-model">
<div class="type-name" style="color: #fff">受累</div>
<div class="type-num">
{{ Math.floor(StationinformationData?.mxztmap?.gf_slnum) || 0 }}
</div>
</div>
<div class="type-model">
<div class="type-name" style="color: #606769">离线</div>
<div class="type-num">
{{ Math.floor(StationinformationData?.mxztmap?.gf_lxnum) || 0 }}
</div>
</div>
</div>
<div class="tabSwitchover">
<div class="unit"><span>(单位: 万kWh)</span></div>
</div>
<div
v-for="(item, index) in ForecastPowerNewHome_gf"
:key="index"
>
<div class="power-charts">
<div class="power-name">{{ item[0].name }}</div>
<div class="power-item">
<div class="power-value">
<span
:style="
index % 2 === 0
? 'background-color:#4B55AE'
: 'background-color:#05BB4C'
"
></span>
<span>{{ item[0].total }}</span>
</div>
<list-bar-chart-2-home
:list="item"
height="55px"
width="250px"
@click="
handleElectricDetail(item[0].id, item[0].name, 'gf')
"
/>
</div>
</div>
</div>
</div>
</div>
</Col>
</Row>
</div>
<!-- 全国实时负荷/关键指标弹窗 -->
<el-dialog
class="dialogs"
width="80%"
top="120px"
v-model="dialogGroupRealname"
:show-close="true"
destroy-on-close
>
<template #title>
<div class="dialog-title">
<div class="title">
{{ currentTitle != "全国" ? currentTitle : "" }}{{ showName }}
</div>
</div>
</template>
<div class="dialog-body" style="height: 500px">
<img class="dialog-img" src="@assets/imgs/dialog.png" />
<windChartCom
:windCurveValues="groupList"
:unit="unit"
:CurveTitle="chartName"
width="100%"
height="480px"
chartId="windChar"
/>
</div>
</el-dialog>
<div class="sx-right-box" v-if="currentTitle != '全国'">
<!-- 山西右侧信息 -->
<div class="card wind_card">
<power-review-home
:data="powerDataHome"
:id="wpIds"
@chartClick="showPowerChart"
/>
</div>
<div class="card electric_card">
<el-header>
<span class="title"></span>
<soan class="unit">（单位：万kWh）</soan>
</el-header>
<el-row class="fdl-wrapper">
<div
class="power-div"
v-for="(item, index) in tabShow == 0
? ForecastPowerNewHome_qy
: tabShow == -1
? ForecastPowerNewHome_fc
: ForecastPowerNewHome_gf"
:key="index"
>
<div class="power-charts">
<div class="power-name">{{ item[0].name }}</div>
<div class="power-item">
<div class="power-value">
<span
:style="
item[0].color === 1
? 'background-color:#4B55AE'
: 'background-color:#05BB4C'
"
></span>
<span>{{ item[0].total }}</span>
</div>
<list-bar-chart-2-home
:list="item"
height="55px"
width="250px"
@click="handleElectricDetail(item[0].id, item[0].name)"
/>
</div>
</div>
</div>
</el-row>
<el-row class="summarize">
<div
class="summarize-left"
@click="handleUsingDetail('month', '月利用小时')"
>
<p>月利用小时</p>
<p>
<span>
{{ StationinformationData?.qt?.ylyxs?.toFixed(2) }}
</span>
<span>小时</span>
</p>
</div>
<div class="line"></div>
<div
class="summarize-right"
@click="handleUsingDetail('year', '年利用小时')"
>
<p>年利用小时</p>
<p>
<span>{{ StationinformationData?.qt?.nlyxs?.toFixed(2) }}</span>
<span>小时</span>
</p>
</div>
</el-row>
</div>
<div class="card station_card">
<el-row class="card_header" v-if="tabShow == 0 || tabShow == -1">
<el-col :span="12">
<img
src="@/assets/imgs/windmill.png"
style="display: inline-block"
/>
<span>{{
wpId.includes("FDC")
? StationinformationData?.station[wpId]?.zjts
: StationinformationData?.cblpoint?.jr_fj_ts
}}</span
>台
</el-col>
<el-col :span="12">
场站<span>{{
wpId.includes("FDC")
? 1
: StationinformationData?.cblpoint?.jr_fcts
}}</span
>个
</el-col>
</el-row>
<windLightDetial
v-if="tabShow == -1"
:dataDetial="StationinformationData?.sbztmap?.fd"
></windLightDetial>
<windlightSimple
v-if="tabShow == 0"
:dataSimple="StationinformationData?.sbztmap?.fd"
/>
<el-row class="card_header" v-if="tabShow == 0 || tabShow == -2">
<el-col :span="12">
<img src="@/assets/imgs/gfmill.png" style="display: inline-block" />
<span>{{
wpId.includes("GDC")
? StationinformationData?.station[wpId]?.jzzjts +
StationinformationData?.station[wpId]?.zczjts
: StationinformationData?.cblpoint?.jr_gf_zcts +
StationinformationData?.cblpoint?.jr_gf_jzts
}}</span
>台
</el-col>
<el-col :span="12">
场站<span>{{
wpId.includes("GDC")
? 1
: StationinformationData?.cblpoint?.jr_gfts
}}</span
>个
</el-col>
</el-row>
<windLightDetial
v-if="tabShow == -2"
:dataDetial="StationinformationData?.sbztmap?.gf"
></windLightDetial>
<windlightSimple
v-if="tabShow == 0"
:dataSimple="StationinformationData?.sbztmap?.gf"
/>
</div>
<!-- 发电量，利用小时弹窗 -->
<el-dialog
class="dialogs"
width="80%"
top="120px"
v-model="dialogElectric"
:show-close="true"
destroy-on-close
>
<template #title>
<div class="dialog-title">
<div class="title">{{ currentTitle }}{{ showName }}</div>
</div>
</template>
<div class="dialog-body" style="height: 500px">
<img class="dialog-img" src="@assets/imgs/dialog.png" />
<div class="date" v-if="showkey === 'electric'">
<div
class="day"
:class="electronType === 'day' ? 'active' : ''"
@click="handleElectricDetail('day', '日发电量')"
>
日
</div>
<div
class="mouth"
:class="electronType === 'month' ? 'active' : ''"
@click="handleElectricDetail('month', '月发电量')"
>
月
</div>
<div
class="year"
:class="electronType === 'year' ? 'active' : ''"
@click="handleElectricDetail('year', '年发电量')"
>
年
</div>
</div>
<div class="date" v-if="showkey === 'using'">
<div
class="day"
:class="electronType === 'month' ? 'active' : ''"
@click="handleUsingDetail('month', '月利用小时')"
>
月
</div>
<div
class="year"
:class="electronType === 'year' ? 'active' : ''"
@click="handleUsingDetail('year', '年利用小时')"
>
年
</div>
</div>
<BarCharts
:list="barList"
height="500px"
:ratio="10000"
:showLegend="true"
:top="30"
:units="showkey === 'electric' ? '万kWh' : '小时'"
:interval="electronType === 'day' ? 1 : 0"
:showkey="showkey"
:showName="showName"
:color="colors"
>
</BarCharts>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import Row from "@/components/coms/grid/row.vue";
import Col from "@/components/coms/grid/col.vue";
import PowerReviewHome from "./power-review-home.vue";
import ListBarChart2Home from "@/components/chart/bar/list-bar-chart2-home.vue";
//全国地图总览
import SvgMapNX from "./map/svg-map-nx.vue";
// 山西
import SX from "./map/SX.vue";
import PowerEcharts from "@/components/chart/powerEcharts.vue";
import HeaderNav from "@/components//headerNav/index.vue";
import SvgIcon from "../../../components/coms/icon/svg-icon.vue";
import windLightDetial from "./windLightDetial.vue";
import windlightSimple from "./windlightSimple.vue";
import {
FindRealtimeInfo,
FindUtilizationhours,
FindPlanproject,
FindBasicDataInfo,
FindPowerInfo,
FindProjectplan,
} from "@/api/home/home.js";
import dayjs from "dayjs";
import windChartCom from "./windChartCom.vue";
import BarCharts from "@/views/Home/components/barCharts.vue";
export default {
// 名称
name: "Map",
// 使用组件
components: {
SvgMapNX,
SX,
Row,
Col,
PowerReviewHome,
ListBarChart2Home,
SvgIcon,
HeaderNav,
PowerEcharts,
windLightDetial,
windlightSimple,
windChartCom,
BarCharts,
},
mounted() {},
// 数据
data() {
return {
activeTab: 0, //当前tab
barList: [
{
name: "",
value: [],
},
], //发电量利用小时柱状图
currentTitle: "全国", //当前地图名称
currents: 0, //当前层级
CurveValues: {
value: [
{
title: "",
value: [],
},
],
}, //24小时功率曲线
companyid: "",
companyname: "",
chartsData: [], //实时负荷曲线
colors: ["#1c99ff", "#05BB4C"],
dialogVisible: false, //实时负荷弹窗开关
dialogElectric: false, //发电量、利用小时弹窗开关
electronType: "day", //日月年切换值
flag: false, //判断场站id
ForecastPowerNewHome_fc: [], //全国的风电发电量列表
ForecastPowerNewHome_gf: [], //全国的光伏发电量列表
ForecastPowerNewHome_qy: [], //区域发电量列表
fdlList: [], //山西区域实时负荷列表
homeSuspensionWindowsData: [], //全国区域所有地区数据
historyWpId: "", //历史场站id
mapList: [
{ text: "山西", code: "sxqyxx" },
{ text: "内蒙", code: "nmqyxx" },
{ text: "新疆", code: "xjqyxx" },
{ text: "河北", code: "hbqyxx" },
{ text: "陕西", code: "xsqyxx" },
{ text: "山东", code: "sdqyxx" },
{ text: "西藏", code: "xzqyxx" },
],
penetrateType: 0, //24小时功率曲线开关
powerDataHome: {},
qyPower: {},
ratio: 1,
showType: "all",
stationList: [
{
name: "全部",
wpId: "KGDL_FGS",
},
{
name: "山西",
wpId: "SXJ_RGN",
},
],
switchShow: false, //接入情况弹窗
showName: "",
chartName: "",
StationinformationData: [],
showkey: "",
dialogGroupRealname: false, //全国实时负荷弹窗开关
groupList: [], //全国实时负荷弹窗数据
type: "fc", //发电量展示类型
tabShow: 0,
timmer: null, // 计时器
timmer2: null,
units: ["万kWh"],
unit: "", //实时负荷弹窗单位
wpId: "KGDL_FGS",
wpIds: "KGDL_FGS0",
dialogShow: false,
showCharts: {
value: [
{
title: "",
value: [],
},
],
},
};
},
emits: {
onEnter: null,
onBack: null,
},
// 函数
methods: {
//放大24小时功率曲线
handleShowCharts(title) {
// console.log(title);
this.showCharts = this.CurveValues;
this.showName = `${title}24小时功率预测曲线`;
this.dialogShow = true;
},
// 点击地图展示类型
mapClick(wpId, activeTab) {
clearInterval(this.timmer);
clearInterval(this.timmer2);
this.timmer = null;
this.timmer2 = null;
this.activeTab = activeTab;
this.wpId = wpId;
this.wpIds =
wpId.includes("FDC") || wpId.includes("GDC") ? wpId : wpId + activeTab;
this.requestData();
this.findProjectPlan();
this.timmer = setInterval(() => {
this.requestData();
}, 5000);
this.timmer2 = setInterval(() => {
this.findProjectPlan(); //发电量
if (this.penetrateType == 3) {
this.getData(this.wpIds); //24小时功率曲线
}
}, 15 * 60 * 1000);
},
mapClicks(wpId, activeTab) {
this.historyWpId = wpId;
this.mapClick(wpId, activeTab);
},
mapClickBack(wpId, activeTab) {
this.historyWpId = wpId;
this.activeTab = activeTab;
this.mapClick(this.historyWpId, activeTab);
},
currentActiveTab(penetrateType) {
this.penetrateType = penetrateType;
if (penetrateType === 3) {
this.getData(this.wpIds);
}
},
// 请求服务
requestData() {
FindBasicDataInfo({ wpId: this.wpIds }).then(({ data }) => {
this.StationinformationData = data;
if (Object.keys(data).length) {
let mapInfos = [];
this.mapList.forEach((item) => {
for (var key in data.sytc) {
if (item.code == key) {
data.sytc[key].name = item.text;
mapInfos.push({ ...data.sytc[key] });
}
}
});
mapInfos.forEach((element) => {
element.industryState = true;
element.companyState = true;
if (element.name == "山西") {
if (!Object.hasOwn(element, "sxgszzjrl")) {
element.companyState = false;
}
if (!Object.hasOwn(element, "sxcyzzjrl")) {
element.industryState = false;
}
this.homeSuspensionWindowsData.sxqyxx = { ...element };
} else if (element.name == "新疆") {
if (!Object.hasOwn(element, "xjgszzjrl")) {
element.companyState = false;
}
if (!Object.hasOwn(element, "xjcyzzjrl")) {
element.industryState = false;
}
this.homeSuspensionWindowsData.xjqyxx = { ...element };
} else if (element.name == "内蒙") {
if (!Object.hasOwn(element, "nmgszzjrl")) {
element.companyState = false;
}
if (!Object.hasOwn(element, "nmcyzzjrl")) {
element.industryState = false;
}
this.homeSuspensionWindowsData.nmqyxx = { ...element };
} else if (element.name == "西藏") {
if (!Object.hasOwn(element, "xzgszzjrl")) {
element.companyState = false;
}
if (!Object.hasOwn(element, "xzcyzzjrl")) {
element.industryState = false;
}
this.homeSuspensionWindowsData.xzqyxx = { ...element };
} else if (element.name == "山东") {
if (!Object.hasOwn(element, "sdgszzjrl")) {
element.companyState = false;
}
if (!Object.hasOwn(element, "sdcyzzjrl")) {
element.industryState = false;
}
this.homeSuspensionWindowsData.sdqyxx = { ...element };
} else if (element.name == "陕西") {
if (!Object.hasOwn(element, "xsgszzjrl")) {
element.companyState = false;
}
if (!Object.hasOwn(element, "xscyzzjrl")) {
element.industryState = false;
}
this.homeSuspensionWindowsData.xsqyxx = { ...element };
} else if (element.name == "河北") {
if (!Object.hasOwn(element, "hbgszzjrl")) {
element.companyState = false;
}
if (!Object.hasOwn(element, "hbcyzzjrl")) {
element.industryState = false;
}
this.homeSuspensionWindowsData.hbqyxx = { ...element };
}
});
if (this.tabShow == -1) {
this.powerDataHome = [
{
title: "实时风速",
value: (data?.qt?.ssfs).toFixed(2),
dialogTitle: "实时风速",
max: 3000,
unit: "m/s",
},
{
title: "实际功率",
value: (data?.qt?.fdsjgl).toFixed(2),
dialogTitle: "实际功率",
max: 3000,
unit: "MW",
},
{
title: "风能利用率",
value: (data?.qt?.fnlyl).toFixed(2),
dialogTitle: "风能利用率",
max: 100,
unit: "%",
},
];
} else if (this.tabShow == 0) {
if (this.currentTitle != "全国") {
if (this.currentTitle.includes("风电场")) {
this.powerDataHome = [
{
title: "实时风速",
value: (data?.qt?.ssfs).toFixed(2),
dialogTitle: "实时风速",
max: 3000,
unit: "m/s",
},
{
title: "实际功率",
value: (data?.qt?.fdsjgl).toFixed(2),
dialogTitle: "实际功率",
max: 3000,
unit: "MW",
},
{
title: "风能利用率",
value: (data?.qt?.fnlyl).toFixed(2),
dialogTitle: "风能利用率",
max: 100,
unit: "%",
},
];
} else if (this.currentTitle.includes("电站")) {
this.powerDataHome = [
{
title: "光照强度",
value: (data?.qt?.gzzs).toFixed(2),
dialogTitle: "光照强度",
max: 3000,
unit: "W/m²",
},
{
title: "实际功率",
value: (data?.qt?.sjgl).toFixed(2),
dialogTitle: "实际功率",
max: 3000,
unit: "MW",
},
{
title: "光能利用率",
value: (data?.qt?.fnlyl).toFixed(2),
dialogTitle: "光能利用率",
max: 100,
unit: "%",
},
];
} else {
this.powerDataHome = [
{
title: "实时风速",
value: (data?.qt?.ssfs).toFixed(2),
dialogTitle: "实时风速",
max: 3000,
unit: "m/s",
},
{
title: "光照强度",
value: (data?.qt?.gzzs).toFixed(2),
dialogTitle: "光照强度",
max: 3000,
unit: "W/m²",
},
{
title: "实际功率",
value: (data?.qt?.sjgl).toFixed(2),
dialogTitle: "实际功率",
max: 3000,
unit: "MW",
},
];
}
} else {
this.powerDataHome = [
{
title: "清洁能源",
value: (data?.qt?.sjgl).toFixed(2),
dialogTitle: "清洁能源实时功率详情",
max: 3000,
unit: "MW",
},
{
title: "风电",
value: (data?.qt?.fdsjgl).toFixed(2),
dialogTitle: "风电实时功率详情",
max: 3000,
unit: "MW",
},
{
title: "光伏",
value: (data?.qt?.gfsjgl).toFixed(2),
dialogTitle: "光伏实时功率详情",
max: 3000,
unit: "MW",
},
];
}
} else if (this.tabShow == -2) {
this.powerDataHome = [
{
title: "光照强度",
value: (data?.qt?.gzzs).toFixed(2),
dialogTitle: "光照强度",
max: 3000,
unit: "W/m²",
},
{
title: "实际功率",
value: (data?.qt?.sjgl).toFixed(2),
dialogTitle: "实际功率",
max: 3000,
unit: "MW",
},
{
title: "光能利用率",
value: (data?.qt?.fnlyl).toFixed(2),
dialogTitle: "光能利用率",
max: 100,
unit: "%",
},
];
}
let sbztmap = {
fd: {},
gf: {},
};
for (var key in data.mxztmap) {
let a = key.substring(3, key.length);
if (key.includes("gf_")) {
sbztmap.gf[a] = data.mxztmap[key];
} else if (key.includes("fd_")) {
sbztmap.fd[a] = data.mxztmap[key];
}
}
this.StationinformationData.sbztmap = sbztmap;
}
});
},
// 发电量
findProjectPlan() {
FindProjectplan({ wpId: this.wpIds }).then(({ data }) => {
this.qyPower = data.proplanmap;
this.ForecastPowerNewHome_fc = [
[
{
name: "日发电量",
id: "day",
value: data?.proplanmap
? data?.proplanmap?.fd_r_sjdl < 0
? 0
: (data?.proplanmap?.fd_r_sjdl / 10000).toFixed(2)
: 0,
color: 1,
total: data?.proplanmap
? data?.proplanmap?.fd_r_jhdl < 0
? 0
: data?.proplanmap?.fd_r_jhdl
: 0,
},
],
[
{
name: "月发电量",
id: "month",
value: data?.proplanmap
? data?.proplanmap?.fd_y_sjdl < 0
? 0
: (data?.proplanmap?.fd_y_sjdl / 10000).toFixed(2)
: 0,
color: 1,
total: data?.proplanmap
? data?.proplanmap?.fd_y_jhdl < 0
? 0
: data?.proplanmap?.fd_y_jhdl
: 0,
},
],
[
{
name: "年发电量",
id: "year",
value: data?.proplanmap
? data?.proplanmap?.fd_n_sjdl < 0
? 0
: (data?.proplanmap?.fd_n_sjdl / 10000).toFixed(2)
: 0,
color: 0,
total: data?.proplanmap
? data?.proplanmap?.fd_n_jhdl < 0
? 0
: data?.proplanmap?.fd_n_jhdl
: 0,
},
],
];
this.ForecastPowerNewHome_gf = [
[
{
name: "日发电量",
id: "day",
value: data?.proplanmap
? data?.proplanmap?.gf_r_sjdl < 0
? 0
: (data?.proplanmap?.gf_r_sjdl / 10000).toFixed(2)
: 0,
color: 1,
total: data?.proplanmap
? data?.proplanmap?.gf_r_jhdl < 0
? 0
: data?.proplanmap?.gf_r_jhdl
: 0,
},
],
[
{
name: "月发电量",
id: "month",
value: data?.proplanmap
? data?.proplanmap?.gf_y_sjdl < 0
? 0
: (data?.proplanmap?.gf_y_sjdl / 10000).toFixed(2)
: 0,
color: 1,
total: data?.proplanmap
? data?.proplanmap?.gf_y_jhdl < 0
? 0
: data?.proplanmap?.gf_y_jhdl
: 0,
},
],
[
{
name: "年发电量",
id: "year",
value: data?.proplanmap
? data?.proplanmap?.gf_n_sjdl < 0
? 0
: (data?.proplanmap?.gf_n_sjdl / 10000).toFixed(2)
: 0,
color: 0,
total: data?.proplanmap
? data?.proplanmap?.gf_n_jhdl < 0
? 0
: data?.proplanmap?.gf_n_jhdl
: 0,
},
],
];
this.ForecastPowerNewHome_qy = [
[
{
name: "日发电量",
id: "day",
value: data?.proplanmap
? data?.proplanmap?.qy_r_sjdl < 0
? 0
: (data?.proplanmap?.qy_r_sjdl / 10000).toFixed(2)
: 0,
color: 1,
total: data?.proplanmap
? data?.proplanmap?.qy_r_jhdl < 0
? 0
: data?.proplanmap?.qy_r_jhdl
: 0,
},
],
[
{
name: "月发电量",
id: "month",
value: data?.proplanmap
? data?.proplanmap?.qy_y_sjdl < 0
? 0
: (data?.proplanmap?.qy_y_sjdl / 10000).toFixed(2)
: 0,
color: 1,
total: data?.proplanmap
? data?.proplanmap?.qy_y_jhdl < 0
? 0
: data?.proplanmap?.qy_y_jhdl
: 0,
},
],
[
{
name: "年发电量",
id: "year",
value: data?.proplanmap
? data?.proplanmap?.qy_n_sjdl < 0
? 0
: (data?.proplanmap?.qy_n_sjdl / 10000).toFixed(2)
: 0,
color: 0,
total: data?.proplanmap
? data?.proplanmap?.qy_n_jhdl < 0
? 0
: data?.proplanmap?.qy_n_jhdl
: 0,
},
],
];
});
},
// 获取场站24小时功率图
getData(wpId) {
FindPowerInfo({ id: wpId }).then((res) => {
if (res.data) {
let Powertrend = {
// 图表所用单位
units: ["(万KWh)", ""],
value: [
{
title: "预测功率",
smooth: true, // 使用单位
value: [],
},
{
title: "理论功率",
smooth: true, // 使用单位
value: [],
},
{
title: "实际功率",
smooth: true, // 使用单位
value: [],
},
],
};
Powertrend.value[0].value = res.data.map((item) => {
return {
dateTime: dayjs()
.startOf("date")
.add(item.hours, "hour")
.format("YYYY-MM-DD HH:mm:ss"),
value: item.bzgl,
};
});
Powertrend.value[1].value = res.data.map((item) => {
return {
dateTime: dayjs()
.startOf("date")
.add(item.hours, "hour")
.format("YYYY-MM-DD HH:mm:ss"),
value: item.llgl,
};
});
Powertrend.value[2].value = res.data.map((item) => {
return {
dateTime: dayjs()
.startOf("date")
.add(item.hours, "hour")
.format("YYYY-MM-DD HH:mm:ss"),
value: item.sjgl,
};
});
this.CurveValues = Powertrend.value;
}
});
},
firstRender(activeTab, showType, wpId, name) {
this.activeTab = activeTab;
this.tabShow = activeTab;
this.showType = showType;
//当wpId是FDC/GDC时,此时点击全部、风电、光伏按钮，展示山西地图及对应的公司信息
let fcId = wpId;
if ((wpId.includes("FDC") || wpId.includes("GDC")) && this.flag) {
if (name != "山西") {
fcId = this.historyWpId;
} else {
fcId = "SXJ_RGN";
}
this.flag = true;
this.penetrateType = 3;
this.currents = 1;
}
this.companyid = fcId;
this.companyname = name;
this.currentTitle = name || "全国";
this.mapClicks(fcId, activeTab);
this.currentActiveTab(this.penetrateType);
},
backMap(wpId, planBtnName) {
this.penetrateType = this.currents == 0 ? 0 : 3;
this.currents--;
this.currentTitle =
this.currents == 0
? "全国"
: this.companyname
? this.companyname
: planBtnName;
let wpIds =
this.currents == 0
? "KGDL_FGS"
: this.companyname
? this.companyid
: wpId;
this.tabShow = this.activeTab;
this.mapClickBack(wpIds, this.activeTab);
this.currentActiveTab(this.penetrateType);
},
clickLabel(wpId, planBtnName, penetrateType) {
this.penetrateType = penetrateType;
this.currents++;
if (this.currents > 1) {
this.currents = 2;
}
this.wpId =
wpId.includes("FDC") || wpId.includes("GDC")
? wpId
: this.companyname
? this.companyid
: wpId;
this.currentTitle =
wpId.includes("FDC") || wpId.includes("GDC")
? planBtnName
: this.companyname
? this.companyname
: planBtnName;
this.mapClick(this.wpId, this.activeTab);
if (wpId.includes("FDC") || wpId.includes("GDC")) {
this.tabShow = wpId.includes("FDC")
? -1
: wpId.includes("GDC")
? -2
: 0;
} else {
this.tabShow = this.activeTab;
}
this.flag = wpId.includes("FDC") || wpId.includes("GDC") ? true : false;
this.currentActiveTab(penetrateType);
},
// 全国实时负荷点击弹窗
showPowerChart({ dialogTitle, data, chartName = "", unit }) {
this.dialogGroupRealname = true;
this.unit = unit;
this.showName = dialogTitle;
this.chartName = chartName ? chartName : dialogTitle;
this.groupList = data;
},
// 区域实时负荷点击弹窗
handleClick(uniformCode, title, unit) {
let key = "";
switch (uniformCode) {
case "SSPJFS":
key = "ssfs";
break;
case "SSZLLGL":
key = "llgl";
break;
case "SSZGL":
key = "sjgl";
break;
case "FNLYL":
key = "fnlyl";
break;
case "RPJGZD":
key = "gzzs";
break;
}
FindRealtimeInfo({
uniformCode,
wpId:
this.wpId +
(this.wpId.includes("FDC") || this.wpId.includes("GDC")
? ""
: this.activeTab),
}).then(({ data }) => {
this.dialogVisible = true;
this.chartsData = data.map((item) => {
return {
dateTime: dayjs()
.startOf("date")
.add(item.hours, "hour")
.format("MM-DD HH:mm"),
value: item[key],
};
});
this.unit = unit;
this.showName = title;
});
},
handleUsingDetail(timetype, title) {
let format = timetype == "month" ? "YYYY-MM" : "YYYY";
this.showkey = "using";
this.electronType = timetype;
FindPlanproject({
wpId:
this.wpId +
(this.wpId.includes("FDC") || this.wpId.includes("GDC")
? ""
: this.activeTab),
timetype,
}).then(({ data }) => {
this.dialogElectric = true;
let barList = data.map((item) => {
if (timetype == "month") {
return {
dateTime: dayjs()
.startOf("year")
.add(item.hours - 1, "month")
.format("YYYY-MM"),
value: item["lyxs"],
};
} else {
return {
dateTime: dayjs()
.startOf(timetype)
.subtract(item.hours, timetype)
.format(format),
value: item["lyxs"],
};
}
});
if (timetype == "month") {
this.barList = [
{
name: title,
yAxisIndex: 0,
value: barList,
},
];
} else {
this.barList = [
{
name: title,
yAxisIndex: 0,
value: barList.reverse(),
},
];
}
this.barList = [
{
name: title,
yAxisIndex: 0,
value: barList,
},
];
this.showName = title;
});
},
handleElectricDetail(timetype, title, type) {
let wpId = "";
if (type) {
this.type = type;
type == "fc" ? (wpId = this.wpId + "-1") : (wpId = this.wpId + "-2");
} else {
wpId =
this.wpId +
(this.wpId.includes("FDC") || this.wpId.includes("GDC")
? ""
: this.activeTab);
}
this.dialogElectric = true;
let format =
timetype == "day" ? "MM-DD" : timetype == "month" ? "YYYY-MM" : "YYYY";
this.showkey = "electric";
this.electronType = timetype;
FindPlanproject({
wpId,
timetype,
}).then(({ data }) => {
this.dialogElectric = true;
let sjdlList = data.map((item) => {
if (timetype == "month") {
return {
dateTime: dayjs()
.startOf("year")
.add(item.hours - 1, "month")
.format("YYYY-MM"),
value: item.sjdl.toFixed(2),
};
} else if (timetype == "year") {
return {
dateTime: dayjs()
.startOf(timetype)
.subtract(item.hours, timetype)
.format(format),
value: item.sjdl.toFixed(2),
};
} else {
return {
dateTime: dayjs()
.startOf("month")
.add(item.hours - 1, "day")
.format("MM-DD"),
value: item.sjdl.toFixed(2),
};
}
});
let jhdlList = data.map((item) => {
if (timetype == "month") {
return {
dateTime: dayjs()
.startOf("year")
.add(item.hours - 1, "month")
.format("YYYY-MM"),
value: item.jhdl.toFixed(2),
};
} else if (timetype == "year") {
return {
dateTime: dayjs()
.startOf(timetype)
.subtract(item.hours, timetype)
.format(format),
value: item.jhdl.toFixed(2),
};
} else {
return {
dateTime: dayjs()
.startOf("month")
.add(item.hours - 1, "day")
.format("MM-DD"),
value: item.jhdl.toFixed(2),
};
}
});
this.barList = [
{
name: "实际电量",
value:
timetype == "day" || timetype == "month"
? sjdlList
: sjdlList.reverse(),
},
{
name: "计划电量",
value:
timetype == "day" || timetype == "month"
? jhdlList
: jhdlList.reverse(),
},
];
this.showName = title;
});
},
},
unmounted() {
clearInterval(this.timmer);
clearInterval(this.timmer2);
this.timmer = null;
this.timmer2 = null;
},
watch: {
qyPower(val) {
if (Object.keys(val).length) {
let data = val;
this.fdlList = [
[
{
title: "日发电量",
id: "day",
value:
this.tabShow == 0
? data.qy_r_sjdl
: this.tabShow == -1
? data.fd_r_sjdl
: data.gf_r_sjdl,
color: 1,
total:
this.tabShow == 0
? data.qy_r_jhdl
: this.tabShow == -1
? data.fd_r_jhdl
: data.gf_r_jhdl,
},
],
[
{
title: "月发电量",
id: "month",
value:
this.tabShow == 0
? data.qy_y_sjdl
: this.tabShow == -1
? data.fd_y_sjdl
: data.gf_y_sjdl,
color: 1,
total:
this.tabShow == 0
? data.qy_y_jhdl
: this.tabShow == -1
? data.fd_y_jhdl
: data.gf_y_jhdl,
},
],
[
{
title: "年发电量",
id: "year",
value:
this.tabShow == 0
? data.qy_n_sjdl
: this.tabShow == -1
? data.fd_n_sjdl
: data.gf_n_sjdl,
color: 0,
total:
this.tabShow == 0
? data.qy_n_jhdl
: this.tabShow == -1
? data.fd_n_jhdl
: data.gf_n_jhdl,
},
],
];
}
},
},
computed: {
// 实时风速
windSpeedRota() {
let count = this.StationinformationData?.qt?.ssfs / 25;
let result = Number((310 * count + 50).toFixed(0));
if (result) {
if (result > 310) {
return "rotateZ(310deg)";
} else {
return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
}
} else {
return "rotateZ(50deg)";
}
},
// 理论功率
ideaPowerRota() {
let zctj =
this.wpId.includes("FDC") || this.wpId.includes("GDC")
? (
this.StationinformationData?.station[this.wpId]?.zjrl / 1000
).toFixed(2)
: this.StationinformationData?.qt?.zzjrl;
let count = this.StationinformationData?.qt?.llgl / 1000 / zctj;
let result = Number((310 * count + 50).toFixed(0));
if (result) {
if (result > 310) {
return "rotateZ(310deg)";
} else {
return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
}
} else {
return "rotateZ(50deg)";
}
},
// 光照指数
illuminationRota() {
let count = this.StationinformationData?.qt?.gzzs / 1200;
let result = Number((310 * count + 50).toFixed(0));
if (result) {
if (result > 310) {
return "rotateZ(310deg)";
} else {
return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
}
} else {
return "rotateZ(50deg)";
}
},
//总保证功率
guarantee() {
let count = Number(this.StationinformationData?.qt?.fnlyl) / 100;
let result = Number((310 * count + 50).toFixed(0));
if (result) {
if (result > 310) {
return "rotateZ(310deg)";
} else {
return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
}
} else {
return "rotateZ(50deg)";
}
},
// 实际功率
actualPowerRota() {
let zctj =
this.wpId.includes("FDC") || this.wpId.includes("GDC")
? (
this.StationinformationData?.station[this.wpId]?.zjrl / 1000
).toFixed(2)
: this.StationinformationData?.qt?.zzjrl;
let count = this.StationinformationData?.qt?.sjgl / 1000 / zctj;
let result = Number((310 * count + 50).toFixed(0));
if (result) {
if (result > 310) {
return "rotateZ(310deg)";
} else {
return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
}
} else {
return "rotateZ(50deg)";
}
},
},
};
</script>
<style lang="less">
ul,
ul li,
p {
margin: 0;
padding: 0;
list-style: none;
}
.map {
padding-top: 16px;
.heeaderNav {
margin-top: 0;
}
}
.airForceStation {
position: relative;
background-color: rgba(3, 5, 9, 0.5);
padding: 20px;
// width: 320px;
margin-bottom: 15px;
span {
color: #b1b1b1;
}
.title {
font-size: 18px;
line-height: 28px;
margin: 15px 0;
display: flex;
align-items: center;
justify-content: left;
span {
color: #fff;
}
}
.collectInstall {
display: flex;
margin-bottom: 10px;
}
.listItem {
display: flex;
margin-bottom: 10px;
}
.line {
display: flex;
margin-bottom: 10px;
}
.name {
flex: 4;
}
.num {
flex: 3;
color: #fff;
font-weight: bold;
font-size: 19px;
// text-align: center;
}
.unit {
flex: 1;
font-size: 14px;
font-weight: 400;
color: #999999;
}
}
.piggy-bank {
width: 100% !important;
border: 0 !important;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.map {
position: relative;
width: 100%;
height: 100%;
.light {
position: fixed;
z-index: -1;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
.back {
position: fixed;
z-index: -1;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: url(../../../assets/background-home.png) no-repeat;
background-size: 100% 100%;
}
.leftBox {
margin-top: 20px;
margin-left: 30px;
.model-bg {
width: 100%;
min-height: 135px;
// background-color: rgba(3, 5, 9, 0.5);
border-radius: 6px;
display: flex;
flex-direction: column;
padding: 1% 5%;
.titles {
height: 45px;
border-bottom: 1px solid #333333;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.name {
font-size: 16px;
color: #ffffff;
}
.unit {
font-size: 12px;
color: #b1b1b1;
}
}
.save {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
margin: 17px 0;
.save-item {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
.kind {
width: 20px;
height: 22px;
.jnjp-icon1 {
margin-left: -8px;
}
.kind-img {
width: 100%;
height: 100%;
}
}
.save-value {
font-size: 16px;
color: #ffffff;
margin: 10px 0;
}
.save-name {
font-size: 12px;
color: #b3b3b3;
}
}
}
}
.new-home {
.energy-system-box {
// position: absolute;
// left: 20px;
margin-bottom: 30px;
// margin-left: 15px;
width: 400px;
box-sizing: border-box;
background-color: rgba(3, 5, 9, 0.5);
&.box1 {
// top: 270px;
margin-top: 20px;
}
&.box2 {
// top: 450px;
}
&.box3 {
// top: 690px;
}
.energy-system-content {
padding: 5px 5px 15px 5px;
.title-all {
margin-left: 5px;
margin-bottom: 8px;
}
.title-all-content {
color: #05bb4c;
font-weight: bold;
font-size: 19px;
}
.title-all-title {
font-size: 13px;
}
.title-all-unit {
font-size: 12px;
color: #b1b1b1;
margin-left: 5px;
}
.title {
color: #fff;
font-size: 18px;
line-height: 28px;
margin: 10px 0.5vh;
text-align: right;
.title-name {
float: left;
}
}
.right-content,
.left-content {
width: 50%;
.img-num {
display: flex;
justify-content: left;
align-items: center;
padding-left: 10px;
.img {
margin-right: 10px;
}
.num {
span {
font-size: 14px;
font-weight: 400;
color: #999999;
}
span:nth-child(3) {
font-size: 19px;
font-weight: bold;
color: #05bb4c;
line-height: 27px;
}
span:nth-child(4) {
margin-left: 15px;
}
}
}
.capacity {
.item {
margin-top: 9px;
.el-row {
text-align: center;
.el-col:nth-child(1) {
font-size: 14px;
font-weight: 400;
color: #999999;
}
.el-col:nth-child(2) {
font-size: 16px;
font-weight: bold;
color: #ffffff;
}
.el-col:nth-child(3) {
font-size: 14px;
font-weight: 400;
color: #999999;
}
}
}
}
}
.left-content {
}
.right-content {
border-left: 1px dashed #4e4040;
padding-left: 10px;
}
}
}
.security-day {
.lineBox {
display: flex;
& > div {
margin-right: 20px;
}
margin: 12px 0 15px;
.num {
color: @green;
font-size: 16px;
margin-bottom: 15px;
margin: 0 7px;
}
.unit {
font-size: 12px;
color: #5e6269;
}
}
.text {
font-size: 28px;
color: @write;
}
.num {
color: @green;
font-size: 35px;
margin-top: 12px;
.unit {
font-size: 24px;
position: relative;
margin-left: 0.556vh;
top: -0.185vh;
}
.unit-t {
font-size: 12px;
margin-left: 10px;
}
}
.text1 {
font-size: 14px;
color: @write;
}
.num1 {
color: @green;
font-size: 24px;
margin-bottom: 15px;
.unit {
font-size: 12px;
position: relative;
margin-left: 0.556vh;
color: #5e6269;
}
}
}
}
}
.security-day {
.text {
font-size: 24px;
color: @write;
}
.num {
color: @green;
font-size: 50px;
.unit {
font-size: 24px;
position: relative;
margin-left: 0.556vh;
top: -0.185vh;
}
}
.text1 {
font-size: 14px;
color: @write;
}
.num1 {
color: @green;
font-size: 24px;
margin-bottom: 15px;
.unit {
font-size: 12px;
position: relative;
margin-left: 0.556vh;
color: #5e6269;
}
}
}
.name-box {
margin: 1.852vh;
display: inline-block;
z-index: 2;
position: absolute;
display: flex;
flex-direction: column;
top: 200px;
left: 445px;
width: 200px;
.name-box-title {
font-size: 25px;
font-weight: 400;
color: #ffffff;
// line-height: 1;
cursor: pointer;
}
.name-box-period {
margin-top: 2.222vh;
.name-box-period-label,
.name-box-period-value {
font-size: 1.481vh;
font-weight: 400;
line-height: 1;
}
.name-box-period-label {
color: #fefefe;
}
.name-box-period-value {
color: #05bb4c;
}
}
}
.return {
position: absolute;
display: flex;
z-index: 2;
align-items: center;
top: 150px;
left: 460px;
width: 110px;
font-size: @fontsize-l;
color: fade(@white, 80);
cursor: pointer;
border: 1px solid transparent;
padding: 6px 16px;
color: #05bb4c;
border: 1px solid #05bb4c;
font-size: 22px;
.svg-icon {
margin-right: 0.7407vh;
svg {
transform: rotate(90deg);
use {
transition: all 0.3s;
fill: @green;
}
}
}
transition: all 0.3s;
&:hover {
color: @green;
border: 1px solid @green;
.svg-icon {
svg {
use {
fill: @green;
}
}
}
}
}
.compass {
position: absolute;
right: 16px;
bottom: 32px;
border-radius: 50%;
&::after {
content: "";
position: absolute;
top: 4px;
left: 4px;
border-radius: 50%;
width: 36px;
height: 36px;
box-shadow: inset 0px -5px 10px 0px @green;
}
svg {
height: 45px;
width: 45px;
}
}
.map-img {
// width: calc(100% - 14.815vh);
width: 100%;
// height: calc(100% - 14.815vh);
height: 100%;
// margin: 7.407vh 0;
position: absolute;
z-index: 1;
top: 0;
left: 0;
@keyframes rotate {
from {
transform: rotateX(70deg);
}
to {
transform: rotateX(0deg);
}
}
img {
width: 100%;
animation: rotate 3s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
}
}
.island {
position: absolute;
right: 20vw;
bottom: 0px;
}
.island_light {
position: absolute;
right: 21vw;
bottom: 4vh;
}
.clearfix::after {
content: "";
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
display: block;
}
.clearfix {
zoom: 1;
}
</style>