|
@@ -1,12 +1,21 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="windView">
|
|
<div class="windView">
|
|
|
- <aside class="sidebar-left-top">
|
|
|
|
|
- <div class="stat-block-lefttop" @click="backStations">
|
|
|
|
|
- <p class="label">返回</p>
|
|
|
|
|
- </div>
|
|
|
|
|
- </aside>
|
|
|
|
|
|
|
+ <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="showMessages">
|
|
|
|
|
+ <p class="label" v-if="showMessagesB">隐藏详情</p>
|
|
|
|
|
+ <p class="label" v-else>查看详情</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </aside>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
<!-- Left Sidebar -->
|
|
<!-- Left Sidebar -->
|
|
|
- <aside class="sidebar-left panel">
|
|
|
|
|
|
|
+ <aside class="sidebar-left panel" v-if="showMessagesB">
|
|
|
<div class="stat-block">
|
|
<div class="stat-block">
|
|
|
<p class="label">总装机容量:</p>
|
|
<p class="label">总装机容量:</p>
|
|
|
<p class="value">
|
|
<p class="value">
|
|
@@ -60,7 +69,7 @@
|
|
|
<p class="value">1258天</p>
|
|
<p class="value">1258天</p>
|
|
|
</div>
|
|
</div>
|
|
|
</aside>
|
|
</aside>
|
|
|
- <aside class="sidebar-left2 panel">
|
|
|
|
|
|
|
+ <aside class="sidebar-left2 panel" v-if="showMessagesB">
|
|
|
<div class="stat-block2">
|
|
<div class="stat-block2">
|
|
|
<span class="labels">数据 </span>
|
|
<span class="labels">数据 </span>
|
|
|
<span class="values"
|
|
<span class="values"
|
|
@@ -194,53 +203,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</aside>
|
|
</aside>
|
|
|
- <!-- <aside class="sidebar-left2 panel" v-if="showWindStatus">
|
|
|
|
|
- <div v-if="showWeather">
|
|
|
|
|
- <span class="labels">覆盖模式 </span>
|
|
|
|
|
- <div class="stat-block">
|
|
|
|
|
- <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>
|
|
|
|
|
- <div>
|
|
|
|
|
- <span class="labels" style="">风机状态类型 </span>
|
|
|
|
|
- <div class="stat-block" style="display: flex">
|
|
|
|
|
- <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>
|
|
|
|
|
- </aside> -->
|
|
|
|
|
- <!-- Right Sidebar -->
|
|
|
|
|
- <aside class="sidebar-right panel">
|
|
|
|
|
|
|
+ <aside class="sidebar-right panel" v-if="showMessagesB">
|
|
|
<div class="info-section">
|
|
<div class="info-section">
|
|
|
<h3>风场信息</h3>
|
|
<h3>风场信息</h3>
|
|
|
<div class="info-item">
|
|
<div class="info-item">
|
|
@@ -533,7 +496,7 @@
|
|
|
</div> -->
|
|
</div> -->
|
|
|
</aside>
|
|
</aside>
|
|
|
<!-- Bottom Bar -->
|
|
<!-- Bottom Bar -->
|
|
|
- <div class="bottom-bar" v-if="showWindDetail">
|
|
|
|
|
|
|
+ <div class="bottom-bar" v-if="showWindDetail && showMessagesB">
|
|
|
<!-- 损失电量 -->
|
|
<!-- 损失电量 -->
|
|
|
<div class="panel">
|
|
<div class="panel">
|
|
|
<div class="indicator-title">
|
|
<div class="indicator-title">
|
|
@@ -862,6 +825,7 @@ export default {
|
|
|
xd,
|
|
xd,
|
|
|
lx,
|
|
lx,
|
|
|
sl,
|
|
sl,
|
|
|
|
|
+ showMessagesB: true,
|
|
|
progressHeight: 0,
|
|
progressHeight: 0,
|
|
|
progressPoint: 0,
|
|
progressPoint: 0,
|
|
|
windmodelArr: [
|
|
windmodelArr: [
|
|
@@ -1086,6 +1050,9 @@ export default {
|
|
|
path: "/",
|
|
path: "/",
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
|
|
+ showMessages() {
|
|
|
|
|
+ this.showMessagesB = !this.showMessagesB
|
|
|
|
|
+ },
|
|
|
valueOnChange(it) {
|
|
valueOnChange(it) {
|
|
|
this.heightArr.forEach((it) => {
|
|
this.heightArr.forEach((it) => {
|
|
|
it.check = false;
|
|
it.check = false;
|
|
@@ -1313,16 +1280,25 @@ export default {
|
|
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
|
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
|
|
|
padding: 20px;
|
|
padding: 20px;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+.btnms{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+}
|
|
|
/* --- Left Sidebar --- */
|
|
/* --- Left Sidebar --- */
|
|
|
.sidebar-left,
|
|
.sidebar-left,
|
|
|
.sidebar-left-top {
|
|
.sidebar-left-top {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
left: 20px;
|
|
left: 20px;
|
|
|
}
|
|
}
|
|
|
|
|
+.btnms1{
|
|
|
|
|
+ width: 80px;
|
|
|
|
|
+ left: 20px;
|
|
|
|
|
+}
|
|
|
|
|
+.btnms2{
|
|
|
|
|
+ width: 120px;
|
|
|
|
|
+ left: 120px;
|
|
|
|
|
+}
|
|
|
.sidebar-left-top {
|
|
.sidebar-left-top {
|
|
|
top: 100px;
|
|
top: 100px;
|
|
|
- width: 80px;
|
|
|
|
|
padding: 5px;
|
|
padding: 5px;
|
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
|
backdrop-filter: blur(10px);
|
|
backdrop-filter: blur(10px);
|