|
@@ -8,17 +8,90 @@
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
- <view class="img_box img_box_1000" v-if="type == '1000'">
|
|
|
|
|
|
+ <view class="img_box img_box_1200" v-if="type == '5fq1200'">
|
|
|
|
+ <scroll-view class="main" scroll-x="true">
|
|
|
|
+ <view class="img">
|
|
|
|
+ <image src="../img/1200.jpg" mode="widthFix"></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="box line_1">
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(0, 19)" :key="index"></view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="box line_2">
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(19, 40)" :key="index"></view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="box line_3">
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(40, 65)" :key="index"></view>
|
|
|
|
+ </view>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="img_box img_box_950_2" v-else-if="type == '5fq950'">
|
|
|
|
+ <scroll-view class="main" scroll-x="true">
|
|
|
|
+ <view class="img">
|
|
|
|
+ <image src="../img/950_2.jpg" mode="widthFix"></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="box line_1">
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(0, 11)" :key="index"></view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="box line_2">
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(11, 25)" :key="index"></view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="box line_3">
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(25, 44)" :key="index"></view>
|
|
|
|
+ </view>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="img_box img_box_1142" v-else-if="type == '1142'">
|
|
|
|
+ <scroll-view class="main" scroll-x="true">
|
|
|
|
+ <view class="img">
|
|
|
|
+ <image src="../img/1142.jpg" mode="widthFix"></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="box line_1">
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(0, 16)" :key="index"></view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="box line_2">
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(16, 32)" :key="index"></view>
|
|
|
|
+ </view>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="img_box img_box_22" v-else-if="type == '22high'">
|
|
|
|
+ <scroll-view class="main" scroll-x="true">
|
|
|
|
+ <view class="img">
|
|
|
|
+ <image src="../img/22.jpg" mode="widthFix"></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="box line_1">
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(0, 23)" :key="index"></view>
|
|
|
|
+ </view>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="img_box img_box_980" v-else-if="type == '980'">
|
|
|
|
+ <scroll-view class="main" scroll-x="true">
|
|
|
|
+ <view class="img">
|
|
|
|
+ <image src="../img/980.jpg" mode="widthFix"></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="box line_1">
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(0, 17)" :key="index"></view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="box line_2">
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(17, 41)" :key="index"></view>
|
|
|
|
+ </view>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="img_box img_box_1000" v-else-if="type == '1000low'">
|
|
<scroll-view class="main" scroll-x="true">
|
|
<scroll-view class="main" scroll-x="true">
|
|
<view class="img">
|
|
<view class="img">
|
|
<image src="../img/1000.png" mode="widthFix"></image>
|
|
<image src="../img/1000.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
<view class="box line_1">
|
|
<view class="box line_1">
|
|
- <view class="item" :style="{backgroundColor:tip[1].color}" v-for="(item,index) in 25" :key="index"></view>
|
|
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(0, 25)" :key="index"></view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="box line_2">
|
|
<view class="box line_2">
|
|
- <view class="item" v-for="(item,index) in 23" :key="index"></view>
|
|
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(25, 48)" :key="index"></view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
@@ -28,11 +101,25 @@
|
|
<image src="../img/720.png" mode="widthFix"></image>
|
|
<image src="../img/720.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
<view class="box line_1">
|
|
<view class="box line_1">
|
|
- <view class="item" :style="{backgroundColor:tip[1].color}" v-for="(item,index) in 18" :key="index"></view>
|
|
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(0, 18)" :key="index"></view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="box line_2">
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(18)" :key="index"></view>
|
|
|
|
+ </view>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="img_box img_box_880" v-else-if="type == '880'">
|
|
|
|
+ <scroll-view class="main" scroll-x="true">
|
|
|
|
+ <view class="img">
|
|
|
|
+ <image src="../img/880.png" mode="widthFix"></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="box line_1">
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(0, 9)" :key="index"></view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="box line_2">
|
|
<view class="box line_2">
|
|
- <view class="item" v-for="(item,index) in 24" :key="index"></view>
|
|
|
|
|
|
+ <view class="item" :style="{backgroundColor:tip[item].color}" v-for="(item,index) in state.slice(9, 23)" :key="index"></view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
@@ -80,31 +167,32 @@
|
|
}
|
|
}
|
|
|
|
|
|
],
|
|
],
|
|
|
|
+ state:[],
|
|
table_data: [{
|
|
table_data: [{
|
|
- title: "引自35KV变5211变电箱信息",
|
|
|
|
|
|
+ title: "变电箱信息",
|
|
table: {
|
|
table: {
|
|
thead: ["名称", "Q:kVar", "p:kw", "Uab:V", "cos", "Ia:A"],
|
|
thead: ["名称", "Q:kVar", "p:kw", "Uab:V", "cos", "Ia:A"],
|
|
tbody: [
|
|
tbody: [
|
|
[
|
|
[
|
|
- 5401, 0, 0, 0, 0, 0
|
|
|
|
|
|
+ 0, 0, 0, 0, 0, 0
|
|
],
|
|
],
|
|
[
|
|
[
|
|
- 5401, 0, 0, 0, 0, 0
|
|
|
|
|
|
+ 0, 0, 0, 0, 0, 0
|
|
],
|
|
],
|
|
|
|
|
|
]
|
|
]
|
|
}
|
|
}
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: "引自35KV变5110变电箱信息",
|
|
|
|
|
|
+ title: "变电箱信息",
|
|
table: {
|
|
table: {
|
|
thead: ["名称", "Q:kVar", "p:kw", "Uab:V", "cos", "Ia:A"],
|
|
thead: ["名称", "Q:kVar", "p:kw", "Uab:V", "cos", "Ia:A"],
|
|
tbody: [
|
|
tbody: [
|
|
[
|
|
[
|
|
- 5401, 0, 0, 0, 0, 0
|
|
|
|
|
|
+ 0, 0, 0, 0, 0, 0
|
|
],
|
|
],
|
|
[
|
|
[
|
|
- 5401, 0, 0, 0, 0, 0
|
|
|
|
|
|
+ 0, 0, 0, 0, 0, 0
|
|
]
|
|
]
|
|
]
|
|
]
|
|
}
|
|
}
|
|
@@ -118,13 +206,20 @@
|
|
})
|
|
})
|
|
|
|
|
|
this.type = option.type
|
|
this.type = option.type
|
|
- },
|
|
|
|
- mounted() {
|
|
|
|
- this.getServerData();
|
|
|
|
|
|
+
|
|
|
|
+ this.getServerData(option.type);
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- getServerData() {
|
|
|
|
-
|
|
|
|
|
|
+ getServerData(sys_code) {
|
|
|
|
+ this.$api.zaoquan_dcs_power({
|
|
|
|
+ sys_code: sys_code
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ console.log(res.data)
|
|
|
|
+
|
|
|
|
+ this.tip = res.data.tip
|
|
|
|
+ this.table_data = res.data.table_data
|
|
|
|
+ this.state = res.data.state
|
|
|
|
+ })
|
|
},
|
|
},
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -255,7 +350,254 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+ .img_box_1200 {
|
|
|
|
+ .main {
|
|
|
|
+ .img{
|
|
|
|
+ image{
|
|
|
|
+ width: 1610rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .line_1 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 138rpx;
|
|
|
|
+ left: 70rpx;
|
|
|
|
+
|
|
|
|
+ width: 1328rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .line_2 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 546rpx;
|
|
|
|
+ left: 70rpx;
|
|
|
|
+
|
|
|
|
+ width: 1470rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .line_3 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 920rpx;
|
|
|
|
+ left: 138rpx;
|
|
|
|
+
|
|
|
|
+ width: 1470rpx;
|
|
|
|
+
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ .item{
|
|
|
|
+ margin-right: 18rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(4){
|
|
|
|
+ margin-right: 46rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(5){
|
|
|
|
+ margin-right: 46rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(12){
|
|
|
|
+ margin-right: 46rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(19){
|
|
|
|
+ margin-right: 46rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(20){
|
|
|
|
+ margin-right: 46rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .img_box_950_2 {
|
|
|
|
+ .main {
|
|
|
|
+ .img{
|
|
|
|
+ image{
|
|
|
|
+ width: 1250rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .line_1 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 138rpx;
|
|
|
|
+ left: 186rpx;
|
|
|
|
+
|
|
|
|
+ width: 914rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .line_2 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 540rpx;
|
|
|
|
+ left: 134rpx;
|
|
|
|
+ width: 966rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .line_3 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 916rpx;
|
|
|
|
+ left: 98rpx;
|
|
|
|
+
|
|
|
|
+ width: 1470rpx;
|
|
|
|
+
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ .item{
|
|
|
|
+ margin-right: 18rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(4){
|
|
|
|
+ margin-right: 46rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(11){
|
|
|
|
+ margin-right: 46rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(17){
|
|
|
|
+ margin-right: 46rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .img_box_1142 {
|
|
|
|
+ .main {
|
|
|
|
+ .img{
|
|
|
|
+ image{
|
|
|
|
+ width: 1540rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .line_1 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 64rpx;
|
|
|
|
+ left: 54rpx;
|
|
|
|
+
|
|
|
|
+ width: 1070rpx;
|
|
|
|
+ .item:nth-child(15){
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(9){
|
|
|
|
+ margin-right: 56rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(8){
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(1){
|
|
|
|
+ margin-right: 26rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .line_2 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 576rpx;
|
|
|
|
+ left: 94rpx;
|
|
|
|
+
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ .item{
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(1){
|
|
|
|
+ margin-right: 82rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(2){
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(3){
|
|
|
|
+ margin-right: 42rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(6){
|
|
|
|
+ margin-right: 42rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(9){
|
|
|
|
+ margin-right: 80rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(10){
|
|
|
|
+ margin-right: 210rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(11){
|
|
|
|
+ margin-right: 78rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(13){
|
|
|
|
+ margin-right: 42rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(16){
|
|
|
|
+ margin-right: 80rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .img_box_22 {
|
|
|
|
+ .main {
|
|
|
|
+ .box{
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ }
|
|
|
|
+ .line_1 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 76rpx;
|
|
|
|
+ left: 0rpx;
|
|
|
|
+
|
|
|
|
+ // width: 1340rpx;
|
|
|
|
+ .item:first-child{
|
|
|
|
+ margin-top: 0;
|
|
|
|
+ margin-right: 34rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:last-child{
|
|
|
|
+ margin-top: 0;
|
|
|
|
+ }
|
|
|
|
+ .item{
|
|
|
|
+ margin-top: 102rpx;
|
|
|
|
+ margin-right: 7.5px;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(2){
|
|
|
|
+ margin-right: 80rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(3){
|
|
|
|
+ margin-right: 48rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .item:nth-child(20){
|
|
|
|
+ margin-right: 50rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(21){
|
|
|
|
+ margin-right: 80rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(22){
|
|
|
|
+ margin-right: 26rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .img_box_980 {
|
|
|
|
+ .main {
|
|
|
|
+ .line_1 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 74rpx;
|
|
|
|
+ left: 56rpx;
|
|
|
|
+
|
|
|
|
+ width: 1214rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .line_2 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 748rpx;
|
|
|
|
+ left: 6rpx;
|
|
|
|
+
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ .item{
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(1){
|
|
|
|
+ margin-right: 38rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(8){
|
|
|
|
+ margin-right: 38rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(9){
|
|
|
|
+ margin-right: 38rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(17){
|
|
|
|
+ margin-right: 38rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(18){
|
|
|
|
+ margin-right: 38rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(20){
|
|
|
|
+ margin-right: 36rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(23){
|
|
|
|
+ margin-right: 36rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
.img_box_1000 {
|
|
.img_box_1000 {
|
|
.main {
|
|
.main {
|
|
.line_1 {
|
|
.line_1 {
|
|
@@ -280,15 +622,15 @@
|
|
.line_1 {
|
|
.line_1 {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 76rpx;
|
|
top: 76rpx;
|
|
- left: 14rpx;
|
|
|
|
|
|
+ left: 16rpx;
|
|
|
|
|
|
- width: 1296rpx;
|
|
|
|
|
|
+ width: 1290rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.line_2 {
|
|
.line_2 {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 468rpx;
|
|
top: 468rpx;
|
|
- left: 18rpx;
|
|
|
|
|
|
+ left: 20rpx;
|
|
|
|
|
|
width: 1286rpx;
|
|
width: 1286rpx;
|
|
}
|
|
}
|
|
@@ -297,4 +639,52 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .img_box_880 {
|
|
|
|
+ .main {
|
|
|
|
+ .img {
|
|
|
|
+ image {
|
|
|
|
+ width: 910rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .line_1 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 56rpx;
|
|
|
|
+ left: 64rpx;
|
|
|
|
+
|
|
|
|
+ width: 762rpx;
|
|
|
|
+ .item:nth-child(5){
|
|
|
|
+ margin-right: 72rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .line_2 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 558rpx;
|
|
|
|
+ left: 14rpx;
|
|
|
|
+
|
|
|
|
+ width: 890rpx;
|
|
|
|
+ .item:nth-child(1){
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(2){
|
|
|
|
+ margin-right: 58rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(3){
|
|
|
|
+ margin-right: 10rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(5){
|
|
|
|
+ margin-right: 50rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(10){
|
|
|
|
+ margin-right: 10rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(11){
|
|
|
|
+ margin-right: 58rpx;
|
|
|
|
+ }
|
|
|
|
+ .item:nth-child(12){
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|