<template>
|
<!-- 运维首页 -->
|
<div class="page-pos">
|
<div class="bar">
|
<!-- 全部站点 -->
|
<div class="item">
|
<div class="label">全部站点:</div>
|
<div class="value">{{ sum.station }}</div>
|
</div>
|
<!-- 充电电池组 -->
|
<div class="item">
|
<div class="label">充电电池组:</div>
|
<div class="value">{{ sum.charg }}</div>
|
</div>
|
<!-- 浮充电池组 -->
|
<div class="item">
|
<div class="label">浮充电池组:</div>
|
<div class="value">{{ sum.float }}</div>
|
</div>
|
<!-- 整流器故障 -->
|
<div class="item">
|
<div class="label">整流器故障:</div>
|
<div class="value">{{ sum.fault }}</div>
|
</div>
|
<!-- 负载熔断 -->
|
<div class="item">
|
<div class="label">负载熔断:</div>
|
<div class="value">{{ sum.fusing }}</div>
|
</div>
|
<!-- 按钮 -->
|
<div class="btn-grp">
|
<div class="btn" @click="toggleView">切换到{{ isMain ? '站点' : '主' }}视图</div>
|
</div>
|
<!-- BAR END -->
|
</div>
|
<div class="page-content">
|
<div class="inner">
|
<div v-if="!isMain" class="scroller">
|
<div class="row">
|
<card class="item" title="湖北省武汉市东西湖区惠安大道768号中原印务二号楼武汉源畅科技有限公司机房" :vol="35" :is-node="false">
|
<info></info>
|
</card>
|
<card class="item" title="武汉市东西湖区惠安大道768号中原印务二号楼武汉源畅科技">
|
<info></info>
|
</card>
|
<card class="item" title="惠安大道768号中原印务二号楼武汉源畅科技">
|
<info></info>
|
</card>
|
<card class="item" title="武汉源畅科技">
|
<info></info>
|
</card>
|
</div>
|
<div class="row">
|
<card class="item" title="源畅机房" :vol="35" :is-node="false">
|
<info></info>
|
</card>
|
<card class="item" title="源畅机房">
|
<info></info>
|
</card>
|
<card class="item" title="源畅机房">
|
<info></info>
|
</card>
|
<card class="item" title="源畅机房">
|
<info></info>
|
</card>
|
</div>
|
<div class="row">
|
<card class="item" title="源畅机房" :vol="35" :is-node="false">
|
<info></info>
|
</card>
|
<card class="item" title="武汉源畅科技">
|
<info></info>
|
</card>
|
<div class="item"></div>
|
<div class="item"></div>
|
</div>
|
</div>
|
<div class="main-view" v-else>
|
<div class="details">
|
<card-box title="站点详情" content-class="details-content">
|
<div class="info">
|
<div class="item">
|
<div class="row">
|
<span class="label">站点名称:</span>
|
<span class="value">铜锣湾变电站</span>
|
</div>
|
<div class="row">
|
<span class="label">交流输入:</span>
|
<span class="value large">380KV</span>
|
</div>
|
<div class="row">
|
<span class="label">直流输出:</span>
|
<span class="value large">110KV</span>
|
</div>
|
<div class="row">
|
<span class="label">电池状态:</span>
|
<span class="value large">浮充</span>
|
</div>
|
<div class="row">
|
<span class="label">测试时长:</span>
|
<span class="value">3小时30分59秒</span>
|
</div>
|
<div class="row">
|
<span class="label">最高单体信息:</span>
|
<span class="value mon">2#</span>
|
<span class="value vol">2.35V</span>
|
</div>
|
<div class="row">
|
<span class="label">最低单体信息:</span>
|
<span class="value mon">2#</span>
|
<span class="value vol">2.35V</span>
|
</div>
|
<!-- -->
|
<div class="item-alarm">
|
<div class="left">
|
<div class="row">
|
</div>
|
<div class="row">
|
<span class="label">实时告警:</span>
|
</div>
|
<div class="row"></div>
|
</div>
|
<div class="right">
|
<div class="row">
|
<span class="label1">电源告警:</span>
|
<span class="value">3</span>
|
</div>
|
<div class="row">
|
<span class="label1">设备告警:</span>
|
<span class="value">2</span>
|
</div>
|
<div class="row">
|
<span class="label1">电池告警:</span>
|
<span class="value">3</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</card-box>
|
</div>
|
<div class="map">
|
<card-box title="站点地图">
|
<map-chart>
|
<map-mark-list slot="tools"></map-mark-list>
|
</map-chart>
|
</card-box>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import card from './components/card';
|
import info from './components/info-admin';
|
import cardBox from '@/components/bigScreenPage/big_screen_card';
|
import MapChart from "@/components/myCharts/MapChart.vue";
|
import MapMarkList from "@/components/mapMarkList.vue";
|
export default {
|
name: '',
|
|
data() {
|
return {
|
sum: {
|
station: 23,
|
charg: 11,
|
float: 25,
|
fault: 25,
|
fusing: 4
|
},
|
// 是否主视图
|
isMain: true,
|
}
|
},
|
components: {
|
MapMarkList,
|
card,
|
info,
|
cardBox,
|
MapChart
|
},
|
methods: {
|
toggleView() {
|
this.isMain = !this.isMain;
|
}
|
|
},
|
|
mounted() {
|
|
}
|
|
}
|
</script>
|
|
<style scoped lang="less">
|
.page-pos {
|
height: 100%;
|
padding: 0 12px;
|
display: flex;
|
flex-direction: column;
|
|
.bar {
|
height: 50px;
|
padding-left: 1.6em;
|
background: #013753;
|
display: flex;
|
justify-content: flex-start;
|
|
.item {
|
display: flex;
|
align-items: center;
|
|
&:not(:first-child) {
|
margin-left: 4.4em;
|
}
|
|
.label {
|
font-size: 22px;
|
color: #00fefe;
|
padding-right: 0.2em;
|
}
|
|
.value {
|
font-size: 38px;
|
color: #ff0;
|
font-weight: bold;
|
}
|
}
|
|
.btn-grp {
|
margin-left: auto;
|
margin-right: 8px;
|
display: flex;
|
align-items: center;
|
|
.btn {
|
background: #00fefe;
|
font-size: 18px;
|
font-weight: bold;
|
color: #00263e;
|
height: 36px;
|
line-height: 36px;
|
padding: 0 1.2em;
|
border-radius: 6px;
|
}
|
}
|
}
|
|
.page-content {
|
margin-top: 8px;
|
flex: 1;
|
position: relative;
|
|
.inner {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
|
.scroller {
|
height: 100%;
|
overflow: auto;
|
}
|
}
|
|
}
|
|
.row {
|
display: flex;
|
|
.item {
|
flex: 1;
|
margin-bottom: 8px;
|
|
&:not(:first-child) {
|
margin-left: 12px;
|
}
|
}
|
}
|
|
.main-view {
|
height: 100%;
|
display: flex;
|
|
.details {
|
flex: 1;
|
|
/deep/ .details-content {
|
padding: 0 16px 16px;
|
}
|
|
.info {
|
display: flex;
|
height: 100%;
|
box-sizing: border-box;
|
padding: 16px;
|
background: radial-gradient(circle, rgba(21, 32, 63, .2) 0, rgba(21, 32, 63, .2) 20%, rgba(0, 254, 255, .2) 140%);
|
}
|
|
.item {
|
border: 1px #00fefe solid;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.row {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
background: rgba(0, 254, 255, .1);
|
|
&:nth-child(2n + 1) {
|
background: rgba(0, 254, 255, .15);
|
}
|
|
&:not(:last-child) {
|
border-bottom: 1px solid #073b5a;
|
}
|
}
|
.item-alarm {
|
flex: 3;
|
display: flex;
|
border-top: 1px solid #00fefe;
|
.left {
|
width: 10em;
|
border-right: 1px solid #00fefe;
|
display: flex;
|
flex-direction: column;
|
}
|
.right {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
.label1 {
|
color: #fff;
|
padding-left: 1.8em;
|
padding-right: 0.6em;
|
}
|
}
|
}
|
|
.label {
|
width: 6.8em;
|
padding-left: 1.8em;
|
}
|
|
.value {
|
font-weight: bold;
|
color: #ff0;
|
&.mon,
|
&.vol {
|
width: 8em;
|
}
|
&.large {
|
font-size: 38px;
|
}
|
}
|
}
|
}
|
|
.map {
|
flex: 1.2;
|
margin-left: 10px;
|
}
|
}
|
}
|
</style>
|
