|
|
@@ -18,6 +18,33 @@
|
|
|
</aside>
|
|
|
<!-- Right Sidebar -->
|
|
|
<aside class="sidebar-right panel">
|
|
|
+ <div class="info-section">
|
|
|
+ <h3>风场信息</h3>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">场站名称</span><span class="value">某某风场</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">场站类型</span><span class="value">风场</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">安全运行天数(天)</span><span class="value">27</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">接入台数</span><span class="value">29</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">装机容量(MW)</span><span class="value">1245</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">经纬度</span><span class="value">106.2341, 37.2343</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">并网时间</span><span class="value">2025-08-28</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">电量详情</span><span class="value" @click="showDetail" style="color: #4b55ae;cursor:pointer">点击查看</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- 实时负荷 -->
|
|
|
<div class="info-section">
|
|
|
<h3 >实时负荷</h3>
|
|
|
@@ -202,7 +229,7 @@
|
|
|
|
|
|
</div>
|
|
|
<!-- 节能减排 -->
|
|
|
- <div class="model-bg">
|
|
|
+ <!-- <div class="model-bg">
|
|
|
<div class="titles">
|
|
|
<div class="name">节能减排</div>
|
|
|
<div class="unit">(单位: 万吨)</div>
|
|
|
@@ -264,10 +291,11 @@
|
|
|
<div class="save-name">二氧化硫</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</aside>
|
|
|
<!-- Bottom Bar -->
|
|
|
- <div class="bottom-bar">
|
|
|
+ <div class="bottom-bar" v-if="showWindDetail">
|
|
|
+ <!-- 损失电量 -->
|
|
|
<div class="panel">
|
|
|
<div class="indicator-title">
|
|
|
<div class="status-title">
|
|
|
@@ -307,6 +335,7 @@
|
|
|
></PieChart>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 风电场 -->
|
|
|
<div class="panel">
|
|
|
<div class="model-bg-new-right">
|
|
|
<div class="infos">
|
|
|
@@ -413,6 +442,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 光伏电站 -->
|
|
|
<div class="panel">
|
|
|
<div class="model-bg-new-right">
|
|
|
<div class="infos">
|
|
|
@@ -546,6 +576,7 @@ export default {
|
|
|
wpInfos: {},
|
|
|
lossPower: {},
|
|
|
dates: "D",
|
|
|
+ showWindDetail: false
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -555,6 +586,11 @@ export default {
|
|
|
this.findProjectPlan();
|
|
|
},
|
|
|
methods: {
|
|
|
+ showDetail() {
|
|
|
+ this.showWindDetail = !this.showWindDetail
|
|
|
+ this.findProjectPlan();
|
|
|
+ this.$emit("showDetail", this.showWindDetail)
|
|
|
+ },
|
|
|
// 发电量
|
|
|
findProjectPlan() {
|
|
|
let data = dataJson.FindProjectplanData
|
|
|
@@ -749,7 +785,7 @@ export default {
|
|
|
<style lang="less" scoped>
|
|
|
.panel {
|
|
|
backdrop-filter: blur(10px);
|
|
|
- // -webkit-backdrop-filter: blur(10px);
|
|
|
+ -webkit-backdrop-filter: blur(10px);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
border-radius: 12px;
|
|
|
padding: 20px;
|
|
|
@@ -1246,4 +1282,10 @@ export default {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 20px);
|
|
|
}
|
|
|
+
|
|
|
+.info-section { font-size: 13px; }
|
|
|
+.info-section h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #6c757d; margin-bottom: 15px; }
|
|
|
+.info-item { display: flex; justify-content: space-between; margin-bottom: 12px; padding: 0 5px; }
|
|
|
+.info-item .label { color: #fff; }
|
|
|
+.info-item .value { color: #fff; display: flex; align-items: center; gap: 5px; }
|
|
|
</style>
|