单站监控菜单栏
This commit is contained in:
白菜
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<section class="app-main">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<!-- todo 单站监控页面中二级路由选择时不需要切换页面的动态效果-->
|
||||
<!-- <transition name="fade-transform" mode="out-in">-->
|
||||
<keep-alive :include="cachedViews">
|
||||
<router-view v-if="!$route.meta.link" :key="key" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
<!-- </transition>-->
|
||||
<iframe-toggle />
|
||||
<copyright />
|
||||
</section>
|
||||
|
||||
@ -1,19 +1,74 @@
|
||||
import Layout from "@/layout/index.vue";
|
||||
|
||||
const ems = [
|
||||
//todo delete 删除动态路由页面的定义 接口会传递进来
|
||||
// const ems = [
|
||||
// {
|
||||
// path: '',
|
||||
// component: Layout,
|
||||
// redirect: 'noRedirect',
|
||||
// children: [
|
||||
// {
|
||||
// path: 'zddt',
|
||||
// component: () => import('@/views/ems/zddt/index'),
|
||||
// name: 'zddt',
|
||||
// meta: { title: '站点地图', icon: 'guide' }
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// export default ems
|
||||
|
||||
//单站监控
|
||||
// todo 本地设置了 hidden:true,不会显示在侧边栏，需要在系统管理、菜单管理中手动添加菜单后才会展示在侧边栏
|
||||
export const dzjk=[
|
||||
{
|
||||
path: '',
|
||||
path: '/dzjk',
|
||||
component: Layout,
|
||||
redirect: 'noRedirect',
|
||||
redirect: '/dzjk/home',
|
||||
meta: { title: '单站监控', icon: 'dashboard',},
|
||||
alwaysShow: false,
|
||||
name:'Dzjk',
|
||||
hidden:true,
|
||||
children: [
|
||||
{
|
||||
path: 'zddt',
|
||||
component: () => import('@/views/ems/zddt/index'),
|
||||
name: 'zddt',
|
||||
meta: { title: '站点地图', icon: 'guide' }
|
||||
path: '',
|
||||
component: () => import('@/views/ems/dzjk/index'),
|
||||
name: 'Dzjk',
|
||||
redirect: '/dzjk/home',
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
path: '/dzjk/home',
|
||||
component: () => import('@/views/ems/dzjk/home/index.vue'),
|
||||
name: 'DjzkHome',
|
||||
meta: { title: '首页',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkHome' }
|
||||
},
|
||||
{
|
||||
path: '/dzjk/sbjk',
|
||||
component: () => import('@/views/ems/dzjk/sbjk/index.vue'),
|
||||
name: 'DjzkSbjk',
|
||||
meta: { title: '设备监控',breadcrumb: false,activeMenu: '/dzjk'},
|
||||
redirect: '/dzjk/sbjk/ssyx',
|
||||
children: [
|
||||
{
|
||||
path: 'ssyx',
|
||||
component: () => import('@/views/ems/dzjk/sbjk/ssyx/index.vue'),
|
||||
name: 'DjzkSbjkSsyx',
|
||||
meta: { title: '实时运行',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
|
||||
},
|
||||
{
|
||||
path: 'pcs',
|
||||
component: () => import('@/views/ems/dzjk/sbjk/pcs/index.vue'),
|
||||
name: 'DjzkSbjkPcs',
|
||||
meta: { title: 'Pcs',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default ems
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
// todo delete
|
||||
import ems from './ems'//EMS管理系统routers引用
|
||||
import {dzjk} from '@/router/ems'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
@ -90,7 +92,8 @@ export const constantRoutes = [
|
||||
]
|
||||
},
|
||||
// EMS管理系统routers
|
||||
...ems
|
||||
// ...ems
|
||||
...dzjk
|
||||
]
|
||||
|
||||
// 动态路由，基于用户权限动态去加载
|
||||
|
||||
14
src/views/ems/dzjk/gzgj/index.vue
Normal file
14
src/views/ems/dzjk/gzgj/index.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>第二层路由 单站监控=>故障告警
|
||||
<div>没有下级路由 页面直接展示</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
152
src/views/ems/dzjk/home/NllzChart.vue
Normal file
152
src/views/ems/dzjk/home/NllzChart.vue
Normal file
@ -0,0 +1,152 @@
|
||||
|
||||
<template>
|
||||
<el-row style="background:#fff;margin-top:30px;">
|
||||
<el-col :xs="24" :sm="24" :lg="24">
|
||||
<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: 310px" id="nllzChart"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<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('#nllzChart'), 'macarons')
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
this.chart.setOption({
|
||||
title: [
|
||||
// 右上角
|
||||
{
|
||||
text: '电网 实时功率：15kW',
|
||||
top: 10,
|
||||
right: 10,
|
||||
textStyle:{
|
||||
fontSize:12,
|
||||
color:'#666666'
|
||||
}
|
||||
},
|
||||
// 右下角
|
||||
{
|
||||
text: '负载 实时功率：15kW',
|
||||
bottom: 10,
|
||||
right: 10,
|
||||
textStyle:{
|
||||
fontSize:12,
|
||||
color:'#666666'
|
||||
}
|
||||
},
|
||||
// 左下角第一行
|
||||
{
|
||||
text: '储能',
|
||||
bottom: 56,
|
||||
left: 10,
|
||||
textStyle:{
|
||||
fontSize:12,
|
||||
color:'#666666'
|
||||
}
|
||||
},
|
||||
// 左下角第二行
|
||||
{
|
||||
text: '实时功率：12kW',
|
||||
bottom: 40,
|
||||
left: 10,
|
||||
textStyle:{
|
||||
fontSize:12,
|
||||
color:'#666666'
|
||||
}
|
||||
},
|
||||
// 左下角第三行
|
||||
{
|
||||
text: 'SOC:75%',
|
||||
bottom: 26,
|
||||
left: 10,
|
||||
textStyle:{
|
||||
fontSize:12,
|
||||
color:'#666666'
|
||||
}
|
||||
},
|
||||
// 左下角第四行
|
||||
{
|
||||
text: '可用电量：12kWh',
|
||||
bottom: 10,
|
||||
left: 10,
|
||||
textStyle:{
|
||||
fontSize:12,
|
||||
color:'#666666'
|
||||
}
|
||||
}
|
||||
],
|
||||
grid:{
|
||||
left:200
|
||||
},
|
||||
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月'],
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#333333',
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#333333',
|
||||
}
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
||||
118
src/views/ems/dzjk/home/index.vue
Normal file
118
src/views/ems/dzjk/home/index.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row :gutter="32" style="background:#fff;">
|
||||
<el-col :xs="24" :sm="24" :lg="10">
|
||||
<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: 310px" >
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" v-for="(item,index) in sjglData" :key="index+'sjglData'" class="sjgl-data">
|
||||
<div class="sjgl-title">{{item.title}}</div>
|
||||
<div class="sjgl-value">{{item.value}}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="14">
|
||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
|
||||
<div slot="header">
|
||||
<span class="card-title">实时告警</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" size="small">通讯状态：<span style="color:red">超时</span></el-button>
|
||||
</div>
|
||||
<div class="ssgj-container">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
height="100%"
|
||||
stripe
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="状态"
|
||||
class-name="warning-status"
|
||||
label-class-name="table-head">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="value"
|
||||
label="告警内容">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<nllz-chart/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NllzChart from "./NllzChart.vue";
|
||||
export default {
|
||||
components: {NllzChart},
|
||||
data() {
|
||||
return {
|
||||
// todo 没有数据时 显示-？
|
||||
sjglData:[{
|
||||
title:'今日充电量（MWh）',
|
||||
value:'1234'
|
||||
},{
|
||||
title:'今日放电量（MWh）',
|
||||
value:'1234'
|
||||
},{
|
||||
title:'总充电量（MWh）',
|
||||
value:'1234'
|
||||
},{
|
||||
title:'总放电量（MWh）',
|
||||
value:'1234'
|
||||
}],
|
||||
// todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
|
||||
tableData:[{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
//数据概览
|
||||
.sjgl-data{
|
||||
text-align: center;
|
||||
margin-top:20px;
|
||||
.sjgl-title{
|
||||
color: #666666;
|
||||
line-height: 14px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.sjgl-value{
|
||||
color: rgba(51,51,51,1);
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
font-weight: 500;
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
//实时告警
|
||||
.ssgj-container{
|
||||
padding:20px;
|
||||
height: 310px;
|
||||
box-sizing: border-box;
|
||||
::v-deep{
|
||||
.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
|
||||
background:#FFF2CB ;
|
||||
border-bottom: none;
|
||||
}
|
||||
.warning-status{
|
||||
color:red;
|
||||
}
|
||||
.table-head{
|
||||
color:#515a6e;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
63
src/views/ems/dzjk/index.vue
Normal file
63
src/views/ems/dzjk/index.vue
Normal file
@ -0,0 +1,63 @@
|
||||
|
||||
|
||||
<template>
|
||||
<div class="ems-dashboard-editor-container">
|
||||
<zd-select/>
|
||||
<!-- 这里是单站监控的二级菜单栏 需要循环拿到数据 显示在页面上-->
|
||||
<div class="router-container">
|
||||
<div class="route-link" :class="{'active':item.name === $route.meta.activeSecondMenuName}" 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 class="ems-content-container ems-content-container-padding dzjk-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//获取到单站监控下面的字路由
|
||||
console.log('childrenRoute',childrenRoute)
|
||||
import ZdSelect from '@/components/Ems/ZdSelect/index.vue'
|
||||
export default {
|
||||
components:{ZdSelect},
|
||||
data(){
|
||||
return {
|
||||
childrenRoute,
|
||||
activeMenu:''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('当前页面路由',this.$route)
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.router-container{
|
||||
display: flex;
|
||||
.route-link{
|
||||
width: 104px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: #FFBE29 ;
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.route-link.active{
|
||||
background-color: #ffffff;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.dzjk-ems-content-container{
|
||||
margin-top:0;
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
11
src/views/ems/dzjk/tjbb/gltj/index.vue
Normal file
11
src/views/ems/dzjk/tjbb/gltj/index.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>第三层路由 单站监控=>统计报表=>概览统计</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
15
src/views/ems/dzjk/tjbb/index.vue
Normal file
15
src/views/ems/dzjk/tjbb/index.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>第二层路由 单站监控=>统计报表</div>
|
||||
有三级路由 页面使用router-view组件
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user