主线路图
This commit is contained in:
白菜
@ -54,3 +54,11 @@ export function deleteService(id) {
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
|
||||
//获取所有设备
|
||||
export function getDeviceList(siteId) {
|
||||
return request({
|
||||
url: `/ems/siteConfig/getDeviceList?siteId=${siteId}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
@ -2,56 +2,77 @@
|
||||
<div class="ems-dashboard-editor-container" v-loading="loading" >
|
||||
<div class="container" v-show="!empty">
|
||||
<div class="top">
|
||||
<img src="@/assets/images/ems/computer.png" alt="">
|
||||
<span>ems</span>
|
||||
<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">
|
||||
<el-row style="padding-left: 100px">
|
||||
<el-col :span="6" class="col-items" v-if="bms.length>0">
|
||||
<!-- 四列设备-->
|
||||
<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 :class="['',null,'0'].includes(item.communicationStatus) ? '' : 'warn' ">
|
||||
<img src="@/assets/images/ems/bms.png" alt="">
|
||||
<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>
|
||||
</el-col>
|
||||
<el-col :span="6" class="col-items" v-if="pcs.length>0">
|
||||
</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 :class="['',null,'0'].includes(item.communicationStatus) ? '' : 'warn' ">
|
||||
<img src="@/assets/images/ems/pcs.png" alt="">
|
||||
<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>
|
||||
</el-col>
|
||||
<el-col :span="6" class="col-items" v-if="db.length>0">
|
||||
</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 :class="['',null,'0'].includes(item.communicationStatus) ? '' : 'warn' ">
|
||||
<img src="@/assets/images/ems/db.png" alt="">
|
||||
<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>
|
||||
</el-col>
|
||||
<el-col :span="6" class="col-items" v-if="lq.length>0">
|
||||
</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 :class="!['',null,'0'].includes(item.communicationStatus) ? '' : 'warn' ">
|
||||
<img src="@/assets/images/ems/lq.png" alt="">
|
||||
<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>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-show="empty" :image-size="200"></el-empty>
|
||||
@ -59,8 +80,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getDeviceInfoList} from'@/api/ems/site'
|
||||
import {getDeviceList} from'@/api/ems/site'
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import {mapState} from "vuex";
|
||||
export default {
|
||||
name: 'DzjkZxlt',
|
||||
mixins: [getQuerySiteId],
|
||||
@ -74,6 +96,9 @@ export default {
|
||||
}
|
||||
},
|
||||
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
|
||||
@ -86,8 +111,8 @@ export default {
|
||||
this.lq=[]
|
||||
this.db=[]
|
||||
this.loading = true
|
||||
getDeviceInfoList({siteId:this.siteId,pageNum:1,pageSize:40}).then(response => {
|
||||
const data =JSON.parse(JSON.stringify(response?.rows || []))
|
||||
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'){
|
||||
@ -118,89 +143,152 @@ export default {
|
||||
padding:0;
|
||||
.container{
|
||||
position: relative;
|
||||
padding-top:100px;
|
||||
}
|
||||
.top{
|
||||
height: 100px;
|
||||
width:150px;
|
||||
position: absolute;
|
||||
top:75px;
|
||||
left:0;
|
||||
z-index:2;
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
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:50px;
|
||||
margin-top:150px;
|
||||
.zxlt-row{
|
||||
display: flex;
|
||||
}
|
||||
.col-items{
|
||||
border-top:1px solid #9a9a9a;
|
||||
margin-right: 20px;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.item-lists{
|
||||
position: relative;
|
||||
padding-right:50px;
|
||||
padding-left:50px;
|
||||
|
||||
&:before{
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: #9a9a9a;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top:0;
|
||||
}
|
||||
padding:25px;
|
||||
background-color: #cbebfd;//#ffdc70;
|
||||
border-radius: 10px;
|
||||
.items-title{
|
||||
font-size: 30px;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
padding:30px 0;
|
||||
color: #0366c1;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
|
||||
margin-bottom:20px;
|
||||
}
|
||||
.items{
|
||||
margin-top:20px;
|
||||
padding:20px 0;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
&:before{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 1px;
|
||||
background-color: #9a9a9a;
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
top:50%;
|
||||
z-index:1;
|
||||
}
|
||||
.warn{
|
||||
position: relative;
|
||||
&:after{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: darkred;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top:0;
|
||||
z-index:2;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
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: 100%;
|
||||
width: 120px;
|
||||
height: auto;
|
||||
display: block;
|
||||
z-index:2;
|
||||
@ -208,11 +296,50 @@ export default {
|
||||
.name{
|
||||
text-align: center;
|
||||
margin-top:10px;
|
||||
font-size: 16px;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user