<template>
|
<!-- 运维首页 -->
|
<div class="page-monitor">
|
<div class="page-content">
|
<div class="inner">
|
<div class="main-view">
|
<div class="side">
|
<div class="dischargTask">
|
<card-box title="今日放电任务" content-class="task-content">
|
<template #tools>
|
<el-radio-group size="mini" v-model="taskLevel">
|
<el-radio-button :label="0">按状态</el-radio-button>
|
<el-radio-button :label="1">按站点</el-radio-button>
|
</el-radio-group>
|
</template>
|
<div class="row row-desc">
|
<div class="col col1">
|
<div class="label">放电站点:</div>
|
<div class="value">53</div>
|
</div>
|
<div class="col col2">
|
<div class="label">进行中:</div>
|
<div class="value">49</div>
|
</div>
|
<div class="col col3">
|
<div class="label">未执行:</div>
|
<div class="value">04</div>
|
</div>
|
</div>
|
<div class="content-wrap">
|
<div class="scroller">
|
<!-- 手风琴 -->
|
<el-collapse v-if="0 == taskLevel" accordion class="collapse">
|
<el-collapse-item class="collapse-item">
|
<template #title>
|
<div class="title">进行中</div>
|
<div class="count">04</div>
|
</template>
|
<!-- 内容 -->
|
<div class="list-item">
|
<el-tooltip class="item" effect="dark" placement="top-start" content="大吴变电站大吴变电站大吴变电站大吴变电站">
|
<div class="station">大吴变电站大吴变电站大吴变电站大吴变电站</div>
|
</el-tooltip>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电4h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<el-tooltip class="item" effect="dark" placement="top-start" content="大吴变电站">
|
<div class="station">大吴变电站</div>
|
</el-tooltip>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电4h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电4h</div>
|
<div class="btn">查看</div>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item class="collapse-item">
|
<template #title>
|
<div class="title">未执行</div>
|
<div class="count">01</div>
|
</template>
|
<!-- 内容 -->
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
<el-collapse v-if="1 == taskLevel" accordion class="collapse">
|
<el-collapse-item class="collapse-item">
|
<template #title>
|
<div class="title">节点站</div>
|
<div class="count">04</div>
|
</template>
|
<!-- 内容 -->
|
<div class="list-item">
|
<el-tooltip class="item" effect="dark" placement="top-start" content="大吴变电站大吴变电站大吴变电站大吴变电站">
|
<div class="station">大吴变电站大吴变电站大吴变电站大吴变电站</div>
|
</el-tooltip>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电4h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<el-tooltip class="item" effect="dark" placement="top-start" content="大吴变电站">
|
<div class="station">大吴变电站</div>
|
</el-tooltip>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电4h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电4h</div>
|
<div class="btn">查看</div>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item class="collapse-item">
|
<template #title>
|
<div class="title">普通站</div>
|
<div class="count">01</div>
|
</template>
|
<!-- 内容 -->
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</div>
|
</card-box>
|
</div>
|
<div class="alarm">
|
<card-box title="今日实时告警" content-class="alarm-content">
|
<template #tools>
|
<el-radio-group size="mini" v-model="alarmLevel">
|
<el-radio-button :label="0">按等级</el-radio-button>
|
<el-radio-button :label="1">按类型</el-radio-button>
|
</el-radio-group>
|
</template>
|
<div class="row row-desc">
|
<div class="col col1">
|
<div class="label">放电站点:</div>
|
<div class="value">53</div>
|
</div>
|
<div class="col col2">
|
<div class="label">进行中:</div>
|
<div class="value">49</div>
|
</div>
|
<div class="col col3">
|
<div class="label">未执行:</div>
|
<div class="value">04</div>
|
</div>
|
</div>
|
<div class="content-wrap">
|
<div class="scroller">
|
<!-- 手风琴 -->
|
<el-collapse v-if="0 == alarmLevel" accordion class="collapse collapse-alarm">
|
<el-collapse-item class="collapse-item">
|
<template #title>
|
<div class="title">一级告警</div>
|
<div class="count">04</div>
|
</template>
|
<!-- 内容 -->
|
<div class="list-item">
|
<el-tooltip class="item" effect="dark" placement="top-start" content="大吴变电站大吴变电站大吴变电站大吴变电站">
|
<div class="station">大吴变电站大吴变电站大吴变电站大吴变电站</div>
|
</el-tooltip>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电4h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<el-tooltip class="item" effect="dark" placement="top-start" content="大吴变电站">
|
<div class="station">大吴变电站</div>
|
</el-tooltip>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电4h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电4h</div>
|
<div class="btn">查看</div>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item class="collapse-item">
|
<template #title>
|
<div class="title">二级告警</div>
|
<div class="count">01</div>
|
</template>
|
<!-- 内容 -->
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item class="collapse-item">
|
<template #title>
|
<div class="title">三级告警</div>
|
<div class="count">01</div>
|
</template>
|
<!-- 内容 -->
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item class="collapse-item">
|
<template #title>
|
<div class="title">四级告警</div>
|
<div class="count">01</div>
|
</template>
|
<!-- 内容 -->
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
<el-collapse v-if="1 == alarmLevel" accordion class="collapse collapse-alarm type">
|
<el-collapse-item class="collapse-item">
|
<template #title>
|
<div class="title">电源告警</div>
|
<div class="count">04</div>
|
</template>
|
<!-- 内容 -->
|
<div class="list-item">
|
<el-tooltip class="item" effect="dark" placement="top-start" content="大吴变电站大吴变电站大吴变电站大吴变电站">
|
<div class="station">大吴变电站大吴变电站大吴变电站大吴变电站</div>
|
</el-tooltip>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电4h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<el-tooltip class="item" effect="dark" placement="top-start" content="大吴变电站">
|
<div class="station">大吴变电站</div>
|
</el-tooltip>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电4h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电4h</div>
|
<div class="btn">查看</div>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item class="collapse-item">
|
<template #title>
|
<div class="title">设备告警</div>
|
<div class="count">01</div>
|
</template>
|
<!-- 内容 -->
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item class="collapse-item">
|
<template #title>
|
<div class="title">电池告警</div>
|
<div class="count">01</div>
|
</template>
|
<!-- 内容 -->
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
<div class="list-item">
|
<div class="station">大吴变电站</div>
|
<div class="node">节点站</div>
|
<div class="start-time">放电开始时间2022-09-23 14:52:34</div>
|
<div class="test-time">累计放电0h</div>
|
<div class="btn">查看</div>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</div>
|
</card-box>
|
</div>
|
</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';
|
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 {
|
taskLevel: 0,
|
alarmLevel: 0,
|
}
|
},
|
components: {
|
MapMarkList,
|
MapChart,
|
card,
|
info,
|
cardBox
|
},
|
methods: {
|
|
},
|
|
mounted() {
|
|
}
|
|
}
|
</script>
|
|
<style scoped lang="less">
|
.page-monitor {
|
height: 100%;
|
padding: 0 12px;
|
display: flex;
|
flex-direction: column;
|
|
.page-content {
|
// margin-top: 8px;
|
flex: 1;
|
position: relative;
|
|
.inner {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
}
|
|
}
|
|
|
.row.row-desc {
|
display: flex;
|
padding-left: 0.8em;
|
|
.col {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
|
}
|
|
.label {
|
width: 5.6em;
|
}
|
|
.col3 .label {
|
width: 3.8em;
|
}
|
|
.value {
|
background: #034660;
|
border-radius: 4px;
|
font-weight: bold;
|
width: 2.4em;
|
padding-left: 0.2em;
|
font-size: 30px;
|
color: #ff0;
|
}
|
}
|
|
.main-view {
|
height: 100%;
|
display: flex;
|
|
.side {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.dischargTask,
|
.alarm {
|
flex: 1;
|
}
|
|
}
|
|
.map {
|
flex: 1.2;
|
margin-left: 10px;
|
}
|
}
|
}
|
|
|
.collapse {
|
border: 0 none;
|
|
background: #034b63;
|
|
.collapse-item {
|
background: #000;
|
margin-bottom: 4px;
|
|
.title {
|
font-size: 30px;
|
}
|
|
.count {
|
font-size: 26px;
|
}
|
|
/deep/ .el-collapse-item__header {
|
height: 72px;
|
padding-left: 0.8em;
|
padding-right: 0.8em;
|
color: #00fefe;
|
border: 0 none;
|
background: #106a84;
|
justify-content: space-between;
|
|
.el-collapse-item__arrow {
|
margin: 0;
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
border: 4px #00fefe solid;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 26px;
|
font-weight: bold;
|
}
|
}
|
|
/deep/ .el-collapse-item__wrap {
|
background: transparent;
|
border: 0 none;
|
|
.el-collapse-item__content {
|
padding: 0;
|
// font-size: 0.65rem;
|
// color: #303133;
|
// line-height: 1.769230769230769;
|
}
|
}
|
}
|
|
.list-item {
|
display: flex;
|
padding: 4px 10px;
|
background: #034b63;
|
border-bottom: 1px solid #02435d;
|
color: #ebf1f2;
|
font-size: 15px;
|
justify-content: space-between;
|
align-items: center;
|
|
.station {
|
width: 12em;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
white-space: nowrap;
|
}
|
|
.node {
|
width: 3em;
|
}
|
|
.start-time {
|
width: 18em;
|
}
|
|
.test-time {
|
width: 7em;
|
}
|
|
.btn {
|
cursor: pointer;
|
width: 4em;
|
background: #106a84;
|
color: #fff;
|
border-radius: 4px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
}
|
}
|
|
.collapse-alarm {
|
.collapse-item {
|
/deep/ .el-collapse-item__header {
|
height: 62px;
|
background: #f3535f;
|
color: #fff;
|
|
.el-collapse-item__arrow {
|
border-color: #fff;
|
}
|
}
|
}
|
&.type.type /deep/ .el-collapse-item__header {
|
background: #ea792d;
|
}
|
}
|
/deep/ .el-radio-button--mini .el-radio-button__inner {
|
padding: 0.28rem 0.7rem;
|
font-size: 0.6rem;
|
border-radius: 0;
|
border: 0 none;
|
background: #00bbc3;
|
color: #022c44;
|
}
|
|
|
/deep/ :not(:first-child)>.el-radio-button__inner {
|
border-left: 1px solid #0096a3;
|
}
|
|
|
/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
box-shadow: none;
|
}
|
|
|
/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
background-color: #2982f6;
|
color: #fff;
|
}
|
|
/deep/ .task-content,
|
/deep/ .alarm-content {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.content-wrap {
|
margin: 10px 2em 0;
|
flex: 1;
|
position: relative;
|
|
.scroller {
|
position: absolute;
|
top: 0;
|
right: 0;
|
left: 0;
|
bottom: 0;
|
overflow-y: auto;
|
}
|
}
|
</style>
|
