346 lines
10 KiB
Vue
346 lines
10 KiB
Vue
<template>
|
|
<div class="ems-dashboard-editor-container" v-loading="loading" >
|
|
<div class="container" v-show="!empty">
|
|
<div class="top">
|
|
<div class="cloud-container">
|
|
<div class="cloud">
|
|
<span style="z-index:2;position: relative;">云</span>
|
|
</div>
|
|
</div>
|
|
<div class="double-arrows">
|
|
<div class="top-arrows"></div>
|
|
<div class="bottom-arrows"></div>
|
|
</div>
|
|
<div class="computer">
|
|
<img src="@/assets/images/ems/computer.png" alt="">
|
|
<span style="z-index:2;position: relative;">ems</span>
|
|
<div class="arrow"></div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<!-- 四列设备-->
|
|
<div class="zxlt-row">
|
|
<div class="col-items" v-if="bms.length>0">
|
|
<div class="item-lists">
|
|
<div class="items-title">bms</div>
|
|
<div class="items" v-for="(item,index) in bms" :key="index+'bms'">
|
|
<div style="text-align: center;margin-bottom:10px;">
|
|
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
|
|
</div>
|
|
<img v-if="item.pictureUrl" :src="item.pictureUrl">
|
|
<img v-else :src="require('@/assets/images/ems/bms.png')"/>
|
|
<div class="name">{{item.deviceName}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-items" v-if="pcs.length>0">
|
|
<div class="item-lists">
|
|
<div class="items-title">pcs</div>
|
|
<div class="items" v-for="(item,index) in pcs" :key="index+'pcs'">
|
|
<div style="text-align: center;margin-bottom:10px;">
|
|
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
|
|
</div>
|
|
<img v-if="item.pictureUrl" :src="item.pictureUrl">
|
|
<img v-else :src="require('@/assets/images/ems/pcs.png')"/>
|
|
<div class="name">{{item.deviceName}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-items" v-if="db.length>0">
|
|
<div class="item-lists">
|
|
<div class="items-title">电表</div>
|
|
<div class="items" v-for="(item,index) in db" :key="index+'db'">
|
|
<div style="text-align: center;margin-bottom:10px;">
|
|
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
|
|
</div>
|
|
<img v-if="item.pictureUrl" :src="item.pictureUrl">
|
|
<img v-else :src="require('@/assets/images/ems/db.png')"/>
|
|
<div class="name">{{item.deviceName}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-items" v-if="lq.length>0">
|
|
<div class="item-lists">
|
|
<div class="items-title">冷却</div>
|
|
<div class="items" v-for="(item,index) in lq" :key="index+'lq'">
|
|
<div style="text-align: center;margin-bottom:10px;">
|
|
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
|
|
</div>
|
|
<img v-if="item.pictureUrl" :src="item.pictureUrl">
|
|
<img v-else :src="require('@/assets/images/ems/lq.png')"/>
|
|
<div class="name">{{item.deviceName}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-empty v-show="empty" :image-size="200"></el-empty>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getDeviceList} from'@/api/ems/site'
|
|
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
|
import {mapState} from "vuex";
|
|
export default {
|
|
name: 'DzjkZxlt',
|
|
mixins: [getQuerySiteId],
|
|
data() {
|
|
return {
|
|
loading:false,
|
|
pcs :[],
|
|
bms:[],
|
|
db:[],
|
|
lq:[]
|
|
}
|
|
},
|
|
computed:{
|
|
...mapState({
|
|
communicationStatusOptions:(state)=>state.ems.communicationStatusOptions
|
|
}),
|
|
empty(){
|
|
const {pcs = [], bms = [], db = [], lq = []} =this
|
|
return pcs.length === 0 && bms.length === 0 && db.length === 0 && lq.length === 0
|
|
}
|
|
},
|
|
methods: {
|
|
init(){
|
|
this.pcs = []
|
|
this.bms = []
|
|
this.lq=[]
|
|
this.db=[]
|
|
this.loading = true
|
|
getDeviceList(this.siteId).then(response => {
|
|
const data =JSON.parse(JSON.stringify(response?.data || []))
|
|
const pcs = [],bms=[],db=[],lq=[]
|
|
data.forEach(item=>{
|
|
if(item.deviceCategory === 'AMMETER'){
|
|
db.push(item)
|
|
}else if(item.deviceCategory === 'PCS'){
|
|
pcs.push(item)
|
|
}else if(item.deviceCategory === 'STACK'){
|
|
bms.push(item)
|
|
}else if(item.deviceCategory === 'COOLING'){
|
|
lq.push(item)
|
|
}
|
|
})
|
|
this.pcs = pcs
|
|
this.bms = bms
|
|
this.lq=lq
|
|
this.db=db
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ems-dashboard-editor-container {
|
|
background-color: #ffffff;
|
|
padding:0;
|
|
.container{
|
|
position: relative;
|
|
}
|
|
.top{
|
|
font-size: 30px;
|
|
line-height: 40px;
|
|
font-weight: 500;
|
|
display: flex;
|
|
vertical-align: middle;
|
|
align-items: center;
|
|
//云 样式
|
|
.cloud-container{
|
|
padding-top:40px;
|
|
.cloud {
|
|
width: 150px;
|
|
height: 60px;
|
|
background: #cbebfd;
|
|
border-radius: 200px;
|
|
position: relative;
|
|
text-align: center;
|
|
color:#666666;
|
|
}
|
|
.cloud:before, .cloud:after {
|
|
content: '';
|
|
position: absolute;
|
|
background:#cbebfd;
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
}
|
|
.cloud:before {
|
|
top: -28px;
|
|
left: 20px;
|
|
}
|
|
.cloud:after {
|
|
top: -31px;
|
|
right: 20px;
|
|
}
|
|
}
|
|
.double-arrows {
|
|
width: 120px;
|
|
margin:0 20px;
|
|
.top-arrows,.bottom-arrows{
|
|
width: 100%;
|
|
height: 5px;
|
|
background-color: #5ea9df;
|
|
position: relative;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top:0;
|
|
width: 0;
|
|
height: 0;
|
|
|
|
}
|
|
}
|
|
.top-arrows::after {
|
|
right: -20px;
|
|
border-top: 10px solid transparent;
|
|
border-right: 10px solid transparent;
|
|
border-bottom: 10px solid transparent;
|
|
border-left: 10px solid #5ea9df;
|
|
top: -8px;
|
|
}
|
|
.bottom-arrows{
|
|
margin-top:12px;
|
|
&::after {
|
|
left: -20px;
|
|
border-top: 10px solid transparent;
|
|
border-left: 10px solid transparent;
|
|
border-bottom: 10px solid transparent;
|
|
border-right: 10px solid #5ea9df;
|
|
top: -8px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
//电脑
|
|
.computer{
|
|
text-align: center;
|
|
color:#666666;
|
|
position: relative;
|
|
img {
|
|
width: auto;
|
|
height: 100px;
|
|
display: block;
|
|
}
|
|
.arrow{
|
|
height: 95px;
|
|
width: 30px;
|
|
border-radius: 5px;
|
|
background-color: #5ea9df;
|
|
position: absolute;
|
|
bottom: -115px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
&::after{
|
|
content: "";
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
left: -9px;
|
|
border-top: 24px solid #5ea9df;
|
|
border-left: 24px solid transparent;
|
|
border-bottom: 24px solid transparent;
|
|
border-right: 24px solid transparent;
|
|
bottom: -44px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.bottom{
|
|
z-index:1;
|
|
box-sizing: border-box;
|
|
margin-top:150px;
|
|
.zxlt-row{
|
|
display: flex;
|
|
}
|
|
.col-items{
|
|
margin-right: 20px;
|
|
&:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.item-lists{
|
|
position: relative;
|
|
padding:25px;
|
|
background-color: #cbebfd;//#ffdc70;
|
|
border-radius: 10px;
|
|
.items-title{
|
|
font-size: 20px;
|
|
line-height: 30px;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
margin-bottom:20px;
|
|
}
|
|
.items{
|
|
background-color: #ffffff;
|
|
position: relative;
|
|
border-radius: 5px;
|
|
padding: 20px 25px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 rgba(0, 0, 0, 0.5);
|
|
img{
|
|
width: 120px;
|
|
height: auto;
|
|
display: block;
|
|
z-index:2;
|
|
}
|
|
.name{
|
|
text-align: center;
|
|
margin-top:10px;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
z-index:2;
|
|
}
|
|
.status{
|
|
z-index:2;
|
|
margin-top:10px;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
position: relative;
|
|
padding-left:20px;
|
|
display: inline;
|
|
&.status-normal {
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 50%;
|
|
background-color: #05AEA3;
|
|
position: absolute;
|
|
top:50%;
|
|
left:0;
|
|
transform: translate(0,-50%);
|
|
}
|
|
}
|
|
&.status-warn{
|
|
&:before{
|
|
content: "";
|
|
display: inline-block;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 50%;
|
|
background-color: #FC6B69;
|
|
position: absolute;
|
|
top:50%;
|
|
left:0;
|
|
transform: translate(0,-50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|