单站监控菜单栏
This commit is contained in:
74
src/views/ems/dzjk/sbjk/index.vue
Normal file
74
src/views/ems/dzjk/sbjk/index.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="ems-dashboard-editor-container sbjk-ems-dashboard-editor-container">
|
||||
<div class="router-container">
|
||||
<div>
|
||||
<div class="route-link" :class="{'active':item.name === $route.name}" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'">
|
||||
<router-link style="height: 100%;width: 100%;display: block" :to="item.path">
|
||||
{{item.meta.title}}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ems-content-container ems-content-container-padding sbjk-ems-content-container">
|
||||
<keep-alive>
|
||||
<router-view></router-view>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { dzjk } from '@/router/ems'
|
||||
const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DjzkSbjk').children//获取到单站监控-设备监控下面的字路由
|
||||
console.log('设备监控子路由',childrenRoute)
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
childrenRoute,
|
||||
activeMenu:''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('当前设备监控页面路由',this.$route)
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sbjk-ems-dashboard-editor-container{
|
||||
display: flex;
|
||||
padding:0;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.router-container{
|
||||
&>div{
|
||||
border: 1px solid #dcdfe6;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.route-link{
|
||||
width: 104px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: #ffffff;
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.route-link.active{
|
||||
background-color: #FFBE29 ;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.sbjk-ems-content-container{
|
||||
margin-top:0;
|
||||
padding-top:0;
|
||||
padding-right: 0;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
11
src/views/ems/dzjk/sbjk/pcs/index.vue
Normal file
11
src/views/ems/dzjk/sbjk/pcs/index.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>第三层路由 单站监控=>设备监控=>PCS</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
81
src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue
Normal file
81
src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue
Normal file
@ -0,0 +1,81 @@
|
||||
|
||||
<template>
|
||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
|
||||
<div slot="header">
|
||||
<span class="card-title">储能功率曲线</span>
|
||||
</div>
|
||||
<div style="height: 360px" id="cnglqxChart"/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '@/mixins/ems/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#cnglqxChart'))
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
|
||||
this.chart.setOption({
|
||||
color:['#FFBD00','#3C81FF'],
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器,坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color:"#333333",
|
||||
},
|
||||
xAxis: {
|
||||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
// POC昨日有功功率、POC昨日无功功率
|
||||
series: [
|
||||
{
|
||||
name:'POC实时有功功率',
|
||||
data: [80,92,1,34,90,130,320,80,9,91,34,90],
|
||||
type: 'line',
|
||||
|
||||
},{
|
||||
name:'POC实时无功功率',
|
||||
data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
|
||||
type: 'line',
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
81
src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue
Normal file
81
src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue
Normal file
@ -0,0 +1,81 @@
|
||||
|
||||
<template>
|
||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
|
||||
<div slot="header">
|
||||
<span class="card-title">电池平均SOC</span>
|
||||
</div>
|
||||
<div style="height: 360px" id="dcpjsocChart"/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '@/mixins/ems/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#dcpjsocChart'))
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
|
||||
this.chart.setOption({
|
||||
color:['#FFBD00','#3C81FF'],
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器,坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color:"#333333",
|
||||
},
|
||||
xAxis: {
|
||||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
// POC昨日有功功率、POC昨日无功功率
|
||||
series: [
|
||||
{
|
||||
name:'昨日同时段电池平均SOC',
|
||||
data: [80,92,1,34,90,130,320,80,9,91,34,90],
|
||||
type: 'scatter',
|
||||
|
||||
},{
|
||||
name:'实时电池平均SOC',
|
||||
data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
|
||||
type: 'scatter',
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
81
src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue
Normal file
81
src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue
Normal file
@ -0,0 +1,81 @@
|
||||
|
||||
<template>
|
||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
|
||||
<div slot="header">
|
||||
<span class="card-title">电池平均温度</span>
|
||||
</div>
|
||||
<div style="height: 360px" id="dcpjwdChart"/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '@/mixins/ems/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#dcpjwdChart'))
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
|
||||
this.chart.setOption({
|
||||
color:['#FFBD00','#3C81FF'],
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器,坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color:"#333333",
|
||||
},
|
||||
xAxis: {
|
||||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
// POC昨日有功功率、POC昨日无功功率
|
||||
series: [
|
||||
{
|
||||
name:'昨日同时段温度',
|
||||
data: [80,92,1,34,90,130,320,80,9,91,34,90],
|
||||
type: 'line',
|
||||
|
||||
},{
|
||||
name:'实时温度',
|
||||
data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
|
||||
type: 'line',
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
81
src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue
Normal file
81
src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue
Normal file
@ -0,0 +1,81 @@
|
||||
|
||||
<template>
|
||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
|
||||
<div slot="header">
|
||||
<span class="card-title">Poc平均温度</span>
|
||||
</div>
|
||||
<div style="height: 360px" id="pocpjwdChart"/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '@/mixins/ems/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#pocpjwdChart'))
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
|
||||
this.chart.setOption({
|
||||
color:['#FFBD00','#3C81FF'],
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器,坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color:"#333333",
|
||||
},
|
||||
xAxis: {
|
||||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
// POC昨日有功功率、POC昨日无功功率
|
||||
series: [
|
||||
{
|
||||
name:'昨日同时段温度',
|
||||
data: [80,92,1,34,90,130,320,80,9,91,34,90],
|
||||
type: 'bar',
|
||||
|
||||
},{
|
||||
name:'实时温度',
|
||||
data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
|
||||
type: 'bar',
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
74
src/views/ems/dzjk/sbjk/ssyx/index.vue
Normal file
74
src/views/ems/dzjk/sbjk/ssyx/index.vue
Normal file
@ -0,0 +1,74 @@
|
||||
|
||||
<template>
|
||||
<div class="ssyx-ems-dashboard-editor-container">
|
||||
<!-- 6个方块-->
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="12" :sm="8" :lg="4" class="single-square-box-container" v-for="(item,index) in singleZdSqaure" :key="index+'singleSquareBox'">
|
||||
<single-square-box :data="item"></single-square-box>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- echart图表-->
|
||||
<el-row :gutter="32" style="background:#fff;margin:30px 0;">
|
||||
<el-col :xs="24" :sm="12" :lg="12">
|
||||
<cnglqx-chart/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="12">
|
||||
<pocpjwd-chart/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="32" style="margin:30px 0;">
|
||||
<el-col :xs="24" :sm="12" :lg="12">
|
||||
<dcpjsoc-chart/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="12">
|
||||
<dcpjwd-chart/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
<script>
|
||||
import SingleSquareBox from "@/components/Ems/SingleSquareBox/index.vue";
|
||||
import CnglqxChart from './CnglqxChart.vue'
|
||||
import PocpjwdChart from './PocpjwdChart.vue'
|
||||
import DcpjwdChart from './DcpjwdChart.vue'
|
||||
import DcpjsocChart from './DcpjsocChart.vue'
|
||||
|
||||
export default {
|
||||
components:{SingleSquareBox,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
|
||||
data() {
|
||||
return {
|
||||
// 单个电站 四个方块数据
|
||||
singleZdSqaure:[{
|
||||
title:'实时有功功率(kW)',
|
||||
value:'22.74',
|
||||
bgColor:'#FFF2CB'
|
||||
},{
|
||||
title:'实时无功功率(kVar)',
|
||||
value:'22.74',
|
||||
bgColor:'#CBD6FF'
|
||||
},{
|
||||
title:'电池催SOC',
|
||||
value:'22.74',
|
||||
bgColor:'#DCCBFF'
|
||||
},{
|
||||
title:'电池堆SOH',
|
||||
value:'22.74',
|
||||
bgColor:'#FFD4CB'
|
||||
},{
|
||||
title:'今日充电量(kWh)',
|
||||
value:'22.74',
|
||||
bgColor:'#FFD6F8'
|
||||
},{
|
||||
title:'今日放电量(kWh)',
|
||||
value:'22.74',
|
||||
bgColor:'#E1FFCA'
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
Reference in New Issue
Block a user