|
@@ -1,13 +1,21 @@
|
|
|
<template>
|
|
|
<div class="Inverter-Info">
|
|
|
- <div class="btn-group-tabs">
|
|
|
+ <!-- <div class="btn-group-tabs">
|
|
|
<BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
|
|
|
- </div>
|
|
|
+ </div>-->
|
|
|
<div class="box-main">
|
|
|
<List class="list" :title="list.title" :list="list.datas" @select="selectList"></List>
|
|
|
<div class="Inverter-Info-body">
|
|
|
<div class="Inverter-Info-title">
|
|
|
- <div class="title">逆变室编号:28#</div>
|
|
|
+ <div class="title">3#逆变器</div>
|
|
|
+
|
|
|
+ <div class="title-tools-left">
|
|
|
+ <div class="other">逆变器型号:GBL-200</div>
|
|
|
+ <div class="state">
|
|
|
+ 状态:
|
|
|
+ <div class="dot red"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="title-tools">
|
|
|
<div class="previous">上一页</div>
|
|
|
<div class="next">上一页</div>
|
|
@@ -15,103 +23,50 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="inverter-datas">
|
|
|
- <div v-for="index of 2" :key="index" class="inverter-item">
|
|
|
- <div class="inverter-item-header">
|
|
|
+ <div class="inverter-item">
|
|
|
+ <!-- <div class="inverter-item-header">
|
|
|
<div class="name">3#逆变器</div>
|
|
|
- <div class="other">逆变器型号:GBL-2000</div>
|
|
|
+ <div class="other">逆变器型号:GBL-200</div>
|
|
|
<div class="state">
|
|
|
状态:
|
|
|
<div class="dot red"></div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div class="inverter-item-info">
|
|
|
<div class="form">
|
|
|
- <table class="table-form mg-b-8">
|
|
|
- <tr>
|
|
|
- <td class="text gray">直流电机</td>
|
|
|
- <td class="value green">20.00</td>
|
|
|
- <td class="unit gray">V</td>
|
|
|
- <td class="text gray">交流无功功率</td>
|
|
|
- <td class="value green">20.00</td>
|
|
|
- <td class="unit gray">Var</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="text gray">直流电流</td>
|
|
|
- <td class="value green">19.56</td>
|
|
|
- <td class="unit gray">A</td>
|
|
|
- <td class="text gray">功率因素</td>
|
|
|
- <td class="value green">19.56</td>
|
|
|
- <td class="unit gray">Var</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="text gray">直流功率</td>
|
|
|
- <td class="value green">52000.20</td>
|
|
|
- <td class="unit gray">V</td>
|
|
|
- <td class="text gray">功率</td>
|
|
|
- <td class="value green">52000.20</td>
|
|
|
- <td class="unit gray">KWh</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="text gray">直流功率</td>
|
|
|
- <td class="value green">52000.20</td>
|
|
|
- <td class="unit gray">V</td>
|
|
|
- <td class="text gray">功率</td>
|
|
|
- <td class="value green">52000.20</td>
|
|
|
- <td class="unit gray">KWh</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="text gray">直流功率</td>
|
|
|
- <td class="value green">52000.20</td>
|
|
|
- <td class="unit gray">V</td>
|
|
|
- <td class="text gray">功率</td>
|
|
|
- <td class="value green">52000.20</td>
|
|
|
- <td class="unit gray">KWh</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="text gray">直流功率</td>
|
|
|
- <td class="value green">52000.20</td>
|
|
|
- <td class="unit gray">V</td>
|
|
|
- <td class="text gray">功率</td>
|
|
|
- <td class="value green">52000.20</td>
|
|
|
- <td class="unit gray">KWh</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="text gray">直流功率</td>
|
|
|
- <td class="value green">52000.20</td>
|
|
|
- <td class="unit gray">V</td>
|
|
|
- <td class="text gray">功率</td>
|
|
|
- <td class="value green">52000.20</td>
|
|
|
- <td class="unit gray">KWh</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="text gray">直流功率</td>
|
|
|
- <td class="value green">52000.20</td>
|
|
|
- <td class="unit gray">V</td>
|
|
|
- <td class="text gray">功率</td>
|
|
|
- <td class="value green">52000.20</td>
|
|
|
- <td class="unit gray">KWh</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="text gray">直流功率</td>
|
|
|
- <td class="value green">52000.20</td>
|
|
|
- <td class="unit gray">V</td>
|
|
|
- <td class="text gray">功率</td>
|
|
|
- <td class="value green">52000.20</td>
|
|
|
- <td class="unit gray">KWh</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="text gray">直流功率</td>
|
|
|
- <td class="value green">52000.20</td>
|
|
|
- <td class="unit gray">V</td>
|
|
|
- <td class="text gray"></td>
|
|
|
- <td class="value green"></td>
|
|
|
- <td class="unit gray"></td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
-
|
|
|
- <panel class="line-panel" :title="'开网频率'">
|
|
|
- <multiple-line-chart :list="lineValue" :units="['']" height="100%" />
|
|
|
- </panel>
|
|
|
+ <div>
|
|
|
+ <table class="table-form mg-b-8" height="60%">
|
|
|
+ <tr>
|
|
|
+ <td class="text gray">直流功率</td>
|
|
|
+ <td class="value green">52000.20</td>
|
|
|
+ <td class="unit gray">V</td>
|
|
|
+ <td class="text gray">功率</td>
|
|
|
+ <td class="value green">52000.20</td>
|
|
|
+ <td class="unit gray">KWh</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="text gray">直流功率</td>
|
|
|
+ <td class="value green">52000.20</td>
|
|
|
+ <td class="unit gray">V</td>
|
|
|
+ <td class="text gray">功率</td>
|
|
|
+ <td class="value green">52000.20</td>
|
|
|
+ <td class="unit gray">KWh</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="text gray">直流功率</td>
|
|
|
+ <td class="value green">52000.20</td>
|
|
|
+ <td class="unit gray">V</td>
|
|
|
+ <td class="text gray"></td>
|
|
|
+ <td class="value green"></td>
|
|
|
+ <td class="unit gray"></td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <panel class="line-panel" :title="'开网频率'">
|
|
|
+ <multiple-line-chart :list="lineValue" :units="['']" height="100%" />
|
|
|
+ </panel>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="states">
|
|
|
<div class="counts">
|
|
@@ -159,7 +114,7 @@ export default {
|
|
|
BtnGroup2,
|
|
|
List,
|
|
|
Panel,
|
|
|
- MultipleLineChart,
|
|
|
+ MultipleLineChart
|
|
|
},
|
|
|
// 数据
|
|
|
data() {
|
|
@@ -170,56 +125,56 @@ export default {
|
|
|
btns: [
|
|
|
{
|
|
|
text: "某某风场",
|
|
|
- code: "mmfdc1",
|
|
|
+ code: "mmfdc1"
|
|
|
},
|
|
|
{
|
|
|
text: "某某风场",
|
|
|
- code: "mhsfc",
|
|
|
+ code: "mhsfc"
|
|
|
},
|
|
|
{
|
|
|
text: "某某风场",
|
|
|
- code: "mmfdc2",
|
|
|
+ code: "mmfdc2"
|
|
|
},
|
|
|
{
|
|
|
text: "某某风场",
|
|
|
- code: "mmfdc3",
|
|
|
+ code: "mmfdc3"
|
|
|
},
|
|
|
{
|
|
|
text: "某某风场",
|
|
|
- code: "mmfdc4",
|
|
|
- },
|
|
|
- ],
|
|
|
+ code: "mmfdc4"
|
|
|
+ }
|
|
|
+ ]
|
|
|
},
|
|
|
{
|
|
|
icon: "fa fa-fire-extinguisher",
|
|
|
btns: [
|
|
|
{
|
|
|
text: "某某风场",
|
|
|
- code: "mmgf1",
|
|
|
+ code: "mmgf1"
|
|
|
},
|
|
|
{
|
|
|
text: "某某风场",
|
|
|
- code: "mmgf2",
|
|
|
+ code: "mmgf2"
|
|
|
},
|
|
|
{
|
|
|
text: "某某风场",
|
|
|
- code: "mmgf3",
|
|
|
+ code: "mmgf3"
|
|
|
},
|
|
|
{
|
|
|
text: "某某风场",
|
|
|
- code: "mmgf4",
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
+ code: "mmgf4"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
],
|
|
|
list: {
|
|
|
title: "逆变器列表",
|
|
|
datas: [
|
|
|
{
|
|
|
text: "1#逆变室",
|
|
|
- color: "blue",
|
|
|
- },
|
|
|
- ],
|
|
|
+ color: "blue"
|
|
|
+ }
|
|
|
+ ]
|
|
|
},
|
|
|
lineValue: [
|
|
|
{
|
|
@@ -227,35 +182,35 @@ export default {
|
|
|
value: [
|
|
|
{
|
|
|
text: "1日",
|
|
|
- value: 0,
|
|
|
+ value: 0
|
|
|
},
|
|
|
{
|
|
|
text: "2日",
|
|
|
- value: 3,
|
|
|
+ value: 3
|
|
|
},
|
|
|
{
|
|
|
text: "3日",
|
|
|
- value: 2,
|
|
|
+ value: 2
|
|
|
},
|
|
|
{
|
|
|
text: "4日",
|
|
|
- value: 3,
|
|
|
+ value: 3
|
|
|
},
|
|
|
{
|
|
|
text: "5日",
|
|
|
- value: 4,
|
|
|
+ value: 4
|
|
|
},
|
|
|
{
|
|
|
text: "6日",
|
|
|
- value: 1,
|
|
|
+ value: 1
|
|
|
},
|
|
|
{
|
|
|
text: "7日",
|
|
|
- value: 2,
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
+ value: 2
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
// 函数
|
|
@@ -268,7 +223,7 @@ export default {
|
|
|
},
|
|
|
onReturn: function() {
|
|
|
console.log("return");
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
// 生命周期钩子
|
|
|
beforeCreate() {
|
|
@@ -278,7 +233,7 @@ export default {
|
|
|
// 创建后
|
|
|
for (let i = 2; i <= 16; i++) {
|
|
|
let t = {
|
|
|
- text: i + "#逆变室",
|
|
|
+ text: i + "#逆变室"
|
|
|
};
|
|
|
if (i <= 5) {
|
|
|
t.color = "blue";
|
|
@@ -303,7 +258,7 @@ export default {
|
|
|
},
|
|
|
updated() {
|
|
|
// 数据更新后
|
|
|
- },
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
@@ -316,7 +271,7 @@ export default {
|
|
|
|
|
|
.Inverter-Info {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
+ height: auto;
|
|
|
|
|
|
.btn-group-tabs {
|
|
|
display: flex;
|
|
@@ -366,6 +321,46 @@ export default {
|
|
|
padding-left: 40px;
|
|
|
}
|
|
|
}
|
|
|
+ .title-tools-left {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 100px;
|
|
|
+ // margin-left: 10px;
|
|
|
+ display: flex;
|
|
|
+ color: @gray-l;
|
|
|
+
|
|
|
+ & > div {
|
|
|
+ padding: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .return {
|
|
|
+ padding-left: 40px;
|
|
|
+ }
|
|
|
+ .state {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .dot {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+
|
|
|
+ &.green {
|
|
|
+ background: @green;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.yellow {
|
|
|
+ background: @yellow;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.orange {
|
|
|
+ background: @orange;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.red {
|
|
|
+ background: @red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.inverter-datas {
|
|
@@ -373,7 +368,7 @@ export default {
|
|
|
height: calc(100% - 53px);
|
|
|
|
|
|
.inverter-item {
|
|
|
- flex: 0 0 calc(50% - 4px);
|
|
|
+ flex: 0 0 calc(100% - 4px);
|
|
|
margin: 8px 0;
|
|
|
|
|
|
.inverter-item-header {
|
|
@@ -421,12 +416,17 @@ export default {
|
|
|
.inverter-item-info {
|
|
|
display: flex;
|
|
|
margin-top: 8px;
|
|
|
- height: calc(100% - 37px);
|
|
|
+ height: calc(100% );
|
|
|
|
|
|
.form {
|
|
|
- flex: 0 0 518px;
|
|
|
+ // flex: 0 0 calc(50% -4px);
|
|
|
+ flex-basis: 60%;
|
|
|
position: relative;
|
|
|
-
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column;
|
|
|
+ // & > div{
|
|
|
+ // flex-basis: 40%;
|
|
|
+ // }
|
|
|
.table-form {
|
|
|
outline: 1px solid fade(@gray, 40);
|
|
|
tr td.text {
|
|
@@ -449,7 +449,8 @@ export default {
|
|
|
}
|
|
|
|
|
|
.states {
|
|
|
- flex: 1 1 auto;
|
|
|
+ // flex: 0 0 calc(50% -4px);
|
|
|
+ flex-basis: 40%;
|
|
|
margin-left: 8px;
|
|
|
|
|
|
.counts {
|