主线路图
This commit is contained in:
白菜
BIN
src/assets/images/ems/bms.png
Normal file
BIN
src/assets/images/ems/bms.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
BIN
src/assets/images/ems/cloud.jpeg
Normal file
BIN
src/assets/images/ems/cloud.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
src/assets/images/ems/computer.png
Normal file
BIN
src/assets/images/ems/computer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
BIN
src/assets/images/ems/db.png
Normal file
BIN
src/assets/images/ems/db.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 377 KiB |
BIN
src/assets/images/ems/lq.png
Normal file
BIN
src/assets/images/ems/lq.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
src/assets/images/ems/pcs.png
Normal file
BIN
src/assets/images/ems/pcs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
@ -43,6 +43,12 @@ export const dzjk=[
|
||||
name: 'DzjkHome',
|
||||
meta: { title: '站点首页',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkHome' }
|
||||
},
|
||||
{
|
||||
path: '/dzjk/zxlt',
|
||||
component: () => import('@/views/ems/dzjk/zxlt/index.vue'),
|
||||
name: 'DzjkZxlt',
|
||||
meta: { title: '主线路图',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkZxlt' }
|
||||
},
|
||||
{
|
||||
path: '/dzjk/sbjk',
|
||||
component: () => import('@/views/ems/dzjk/sbjk/index.vue'),
|
||||
|
||||
@ -85,9 +85,11 @@
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="工单"
|
||||
fixed="right"
|
||||
width="250"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" v-if="scope.row.ticketNo" @click="toTicket">已生成工单（工单号：{{scope.row.ticketNo}}）</el-button>
|
||||
<el-button type="text" size="mini" v-if="scope.row.ticketNo" @click="toTicket">已生成工单(工单号:{{scope.row.ticketNo}})</el-button>
|
||||
<el-button type="primary" size="mini" v-else @click="toTicket">生成工单</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@ -47,9 +47,11 @@
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="工单"
|
||||
fixed="right"
|
||||
width="250"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" v-if="scope.row.ticketNo" @click="toTicket">已生成工单（工单号：{{scope.row.ticketNo}}）</el-button>
|
||||
<el-button type="text" size="mini" v-if="scope.row.ticketNo" @click="toTicket">已生成工单(工单号:{{scope.row.ticketNo}})</el-button>
|
||||
<el-button type="primary" size="mini" v-else @click="toTicket">生成工单</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
218
src/views/ems/dzjk/zxlt/index.vue
Normal file
218
src/views/ems/dzjk/zxlt/index.vue
Normal file
@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<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>
|
||||
<div class="bottom">
|
||||
<el-row style="padding-left: 100px">
|
||||
<el-col :span="6" 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>
|
||||
<div class="name">{{item.deviceName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" 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>
|
||||
<div class="name">{{item.deviceName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" 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>
|
||||
<div class="name">{{item.deviceName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" 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>
|
||||
<div class="name">{{item.deviceName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-show="empty" :image-size="200"></el-empty>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getDeviceInfoList} from'@/api/ems/site'
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
export default {
|
||||
name: 'DzjkZxlt',
|
||||
mixins: [getQuerySiteId],
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
pcs :[],
|
||||
bms:[],
|
||||
db:[],
|
||||
lq:[]
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
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
|
||||
getDeviceInfoList({siteId:this.siteId,pageNum:1,pageSize:40}).then(response => {
|
||||
const data =JSON.parse(JSON.stringify(response?.rows || []))
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
z-index:1;
|
||||
box-sizing: border-box;
|
||||
margin-top:50px;
|
||||
.col-items{
|
||||
border-top:1px solid #9a9a9a;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.items-title{
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
padding:30px 0;
|
||||
color: #0366c1;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.items{
|
||||
margin-top:20px;
|
||||
padding:20px 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
z-index:2;
|
||||
}
|
||||
.name{
|
||||
text-align: center;
|
||||
margin-top:10px;
|
||||
font-size: 16px;
|
||||
z-index:2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user