|
|
@@ -21,7 +21,11 @@
|
|
|
<img src="@assets/imgs/downg.png" />
|
|
|
<img src="@assets/imgs/ptyup.png" class="qty_img" />
|
|
|
</div>
|
|
|
- <div class="base-num" @click="handleClick('all')">
|
|
|
+ <div
|
|
|
+ class="base-num"
|
|
|
+ :class="{ active: fillFjzt == 'all' }"
|
|
|
+ @click="handleClick('all')"
|
|
|
+ >
|
|
|
<div class="base-name">接入台数</div>
|
|
|
<div class="nums">{{ sourceMap.jrts || 0 }}</div>
|
|
|
</div>
|
|
|
@@ -33,13 +37,21 @@
|
|
|
v-for="(item, index) in titleList"
|
|
|
:key="index"
|
|
|
>
|
|
|
- <div class="status-first" @click="handleClick(item.value1)">
|
|
|
+ <div
|
|
|
+ class="status-first"
|
|
|
+ :class="{ active: item.value1 == fillFjzt }"
|
|
|
+ @click="handleClick(item.value1)"
|
|
|
+ >
|
|
|
<div class="matrix-status-left">{{ item.name }}</div>
|
|
|
<div class="matrix-status-right">
|
|
|
{{ sourceMap[item.code] }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="status-end" @click="handleClick(item.value2)">
|
|
|
+ <div
|
|
|
+ class="status-end"
|
|
|
+ :class="{ active: item.value2 == fillFjzt }"
|
|
|
+ @click="handleClick(item.value2)"
|
|
|
+ >
|
|
|
<div class="matrix-status-left">
|
|
|
<i
|
|
|
class="svg-icon svg-icon-sm"
|
|
|
@@ -57,7 +69,11 @@
|
|
|
{{ sourceMap[item.code1] }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="status-end" @click="handleClick(item.value3)">
|
|
|
+ <div
|
|
|
+ class="status-end"
|
|
|
+ :class="{ active: item.value3 == fillFjzt }"
|
|
|
+ @click="handleClick(item.value3)"
|
|
|
+ >
|
|
|
<div class="matrix-status-left">
|
|
|
<i
|
|
|
class="svg-icon svg-icon-sm"
|
|
|
@@ -1006,13 +1022,13 @@ export default {
|
|
|
} else {
|
|
|
this.showMatrixList = this.sourceMap.powerVos;
|
|
|
}
|
|
|
- // const tempWtArray = this.chunkArray(this.showMatrixList, 3);
|
|
|
- // this.showMatrixList = tempWtArray[0];
|
|
|
- // for (let i = 1; i < tempWtArray.length; i++) {
|
|
|
- // setTimeout(() => {
|
|
|
- // this.showMatrixList.push(...tempWtArray[i]);
|
|
|
- // }, 5);
|
|
|
- // }
|
|
|
+ // const tempWtArray = this.chunkArray(this.showMatrixList, 3);
|
|
|
+ // this.showMatrixList = tempWtArray[0];
|
|
|
+ // for (let i = 1; i < tempWtArray.length; i++) {
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.showMatrixList.push(...tempWtArray[i]);
|
|
|
+ // }, 5);
|
|
|
+ // }
|
|
|
},
|
|
|
|
|
|
// 点击左侧数据弹出曲线
|
|
|
@@ -1111,17 +1127,20 @@ export default {
|
|
|
.nums {
|
|
|
font-size: 18px;
|
|
|
font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
+
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.base-name {
|
|
|
font-size: 14px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
+
|
|
|
color: #b3b3b3;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
+ &.active {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.all_img {
|
|
|
@@ -1185,25 +1204,27 @@ export default {
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- background-color: rgba(5, 187, 76, 0.28);
|
|
|
- border-top: 1px solid #0b3d26;
|
|
|
- border-left: 1px solid #0b3d26;
|
|
|
- border-right: 1px solid #0b3d26;
|
|
|
|
|
|
.matrix-status-left {
|
|
|
margin-left: 6px;
|
|
|
font-size: 14px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- color: #05bb4c;
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
margin-right: 6px;
|
|
|
font-size: 16px;
|
|
|
font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
- color: #05bb4c;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ font-weight: 700;
|
|
|
+ .matrix-status-left {
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrix-status-right {
|
|
|
+ font-size: 17px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1214,86 +1235,61 @@ export default {
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- background-color: rgba(5, 187, 76, 0.16);
|
|
|
- border-left: 1px solid #0b3d26;
|
|
|
- border-right: 1px solid #0b3d26;
|
|
|
- border-bottom: 1px solid #0b3d26;
|
|
|
|
|
|
.matrix-status-left {
|
|
|
margin-left: 6px;
|
|
|
font-size: 12px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- color: #05bb4c;
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
margin-right: 6px;
|
|
|
font-size: 14px;
|
|
|
font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
- color: #05bb4c;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ font-weight: 700;
|
|
|
+ .matrix-status-left {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrix-status-right {
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
margin-right: 6px;
|
|
|
}
|
|
|
+
|
|
|
&.green {
|
|
|
.status-first {
|
|
|
- width: 100%;
|
|
|
- height: 34%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
background-color: rgba(5, 187, 76, 0.28);
|
|
|
border-top: 1px solid #0b3d26;
|
|
|
border-left: 1px solid #0b3d26;
|
|
|
border-right: 1px solid #0b3d26;
|
|
|
|
|
|
.matrix-status-left {
|
|
|
- margin-left: 6px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
color: #05bb4c;
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 16px;
|
|
|
- font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
color: #05bb4c;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.status-end {
|
|
|
- width: 100%;
|
|
|
- height: 33%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
background-color: rgba(5, 187, 76, 0.16);
|
|
|
border-left: 1px solid #0b3d26;
|
|
|
border-right: 1px solid #0b3d26;
|
|
|
border-bottom: 1px solid #0b3d26;
|
|
|
|
|
|
.matrix-status-left {
|
|
|
- margin-left: 6px;
|
|
|
- font-size: 12px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
color: #05bb4c;
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
color: #05bb4c;
|
|
|
}
|
|
|
}
|
|
|
@@ -1305,59 +1301,31 @@ export default {
|
|
|
|
|
|
&.blue {
|
|
|
.status-first {
|
|
|
- width: 100%;
|
|
|
- height: 34%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
background-color: rgba(0, 70, 199, 0.48);
|
|
|
border-top: 1px solid #1e2341;
|
|
|
border-left: 1px solid #1e2341;
|
|
|
border-right: 1px solid #1e2341;
|
|
|
|
|
|
.matrix-status-left {
|
|
|
- margin-left: 6px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
color: #1c99ff;
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 16px;
|
|
|
- font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
color: #1c99ff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.status-end {
|
|
|
- width: 100%;
|
|
|
- height: 33%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
background-color: rgba(0, 70, 199, 0.16);
|
|
|
border-left: 1px solid #1e2341;
|
|
|
border-right: 1px solid #1e2341;
|
|
|
border-bottom: 1px solid #1e2341;
|
|
|
|
|
|
.matrix-status-left {
|
|
|
- margin-left: 6px;
|
|
|
- font-size: 12px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
color: #1c99ff;
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
color: #1c99ff;
|
|
|
}
|
|
|
}
|
|
|
@@ -1369,59 +1337,31 @@ export default {
|
|
|
|
|
|
&.pink {
|
|
|
.status-first {
|
|
|
- width: 100%;
|
|
|
- height: 34%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
background-color: rgba(197, 48, 200, 0.28);
|
|
|
border-top: 1px solid #3e1a48;
|
|
|
border-left: 1px solid #3e1a48;
|
|
|
border-right: 1px solid #3e1a48;
|
|
|
|
|
|
.matrix-status-left {
|
|
|
- margin-left: 6px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
color: #c530c8;
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 16px;
|
|
|
- font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
color: #c530c8;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.status-end {
|
|
|
- width: 100%;
|
|
|
- height: 33%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
background-color: rgba(197, 48, 200, 0.16);
|
|
|
border-left: 1px solid #3e1a48;
|
|
|
border-right: 1px solid #3e1a48;
|
|
|
border-bottom: 1px solid #3e1a48;
|
|
|
|
|
|
.matrix-status-left {
|
|
|
- margin-left: 6px;
|
|
|
- font-size: 12px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
color: #c530c8;
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
color: #c530c8;
|
|
|
}
|
|
|
}
|
|
|
@@ -1433,59 +1373,31 @@ export default {
|
|
|
|
|
|
&.red {
|
|
|
.status-first {
|
|
|
- width: 100%;
|
|
|
- height: 34%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
background-color: rgba(186, 50, 55, 0.28);
|
|
|
border-top: 1px solid #3c1c1f;
|
|
|
border-left: 1px solid #3c1c1f;
|
|
|
border-right: 1px solid #3c1c1f;
|
|
|
|
|
|
.matrix-status-left {
|
|
|
- margin-left: 6px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
color: #ba3237;
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 16px;
|
|
|
- font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
color: #ba3237;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.status-end {
|
|
|
- width: 100%;
|
|
|
- height: 33%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
background-color: rgba(186, 50, 55, 0.16);
|
|
|
border-left: 1px solid #3c1c1f;
|
|
|
border-right: 1px solid #3c1c1f;
|
|
|
border-bottom: 1px solid #3c1c1f;
|
|
|
|
|
|
.matrix-status-left {
|
|
|
- margin-left: 6px;
|
|
|
- font-size: 12px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
color: #ba3237;
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
color: #ba3237;
|
|
|
}
|
|
|
}
|
|
|
@@ -1497,59 +1409,31 @@ export default {
|
|
|
|
|
|
&.orange {
|
|
|
.status-first {
|
|
|
- width: 100%;
|
|
|
- height: 34%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
background-color: rgba(225, 125, 36, 0.28);
|
|
|
border-top: 1px solid #46301a;
|
|
|
border-left: 1px solid #46301a;
|
|
|
border-right: 1px solid #46301a;
|
|
|
|
|
|
.matrix-status-left {
|
|
|
- margin-left: 6px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
color: #e17d24;
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 16px;
|
|
|
- font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
color: #e17d24;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.status-end {
|
|
|
- width: 100%;
|
|
|
- height: 33%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
background-color: rgba(225, 125, 36, 0.16);
|
|
|
border-left: 1px solid #46301a;
|
|
|
border-right: 1px solid #46301a;
|
|
|
border-bottom: 1px solid #46301a;
|
|
|
|
|
|
.matrix-status-left {
|
|
|
- margin-left: 6px;
|
|
|
- font-size: 12px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
color: #e17d24;
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
color: #e17d24;
|
|
|
}
|
|
|
}
|
|
|
@@ -1561,59 +1445,31 @@ export default {
|
|
|
|
|
|
&.gray {
|
|
|
.status-first {
|
|
|
- width: 100%;
|
|
|
- height: 34%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
background-color: rgba(96, 103, 105, 0.28);
|
|
|
border-top: 1px solid #262b32;
|
|
|
border-left: 1px solid #262b32;
|
|
|
border-right: 1px solid #262b32;
|
|
|
|
|
|
.matrix-status-left {
|
|
|
- margin-left: 6px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
color: #606769;
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 16px;
|
|
|
- font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
color: #606769;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.status-end {
|
|
|
- width: 100%;
|
|
|
- height: 33%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
background-color: rgba(96, 103, 105, 0.16);
|
|
|
border-left: 1px solid #262b32;
|
|
|
border-right: 1px solid #262b32;
|
|
|
border-bottom: 1px solid #262b32;
|
|
|
|
|
|
.matrix-status-left {
|
|
|
- margin-left: 6px;
|
|
|
- font-size: 12px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
color: #606769;
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
color: #606769;
|
|
|
}
|
|
|
}
|
|
|
@@ -1625,59 +1481,31 @@ export default {
|
|
|
|
|
|
&.write {
|
|
|
.status-first {
|
|
|
- width: 100%;
|
|
|
- height: 34%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
background-color: rgba(255, 255, 255, 0.28);
|
|
|
border-top: 1px solid #3f4349;
|
|
|
border-left: 1px solid #3f4349;
|
|
|
border-right: 1px solid #3f4349;
|
|
|
|
|
|
.matrix-status-left {
|
|
|
- margin-left: 6px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 16px;
|
|
|
- font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.status-end {
|
|
|
- width: 100%;
|
|
|
- height: 33%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
background-color: rgba(255, 255, 255, 0.16);
|
|
|
border-left: 1px solid #3f4349;
|
|
|
border-right: 1px solid #3f4349;
|
|
|
border-bottom: 1px solid #3f4349;
|
|
|
|
|
|
.matrix-status-left {
|
|
|
- margin-left: 6px;
|
|
|
- font-size: 12px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.matrix-status-right {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Arial;
|
|
|
- font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
baiyanting