单站监控菜单栏
This commit is contained in:
白菜
@ -1,10 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="app-main">
|
<section class="app-main">
|
||||||
<transition name="fade-transform" mode="out-in">
|
<!-- todo 单站监控页面中二级路由选择时不需要切换页面的动态效果-->
|
||||||
|
<!-- <transition name="fade-transform" mode="out-in">-->
|
||||||
<keep-alive :include="cachedViews">
|
<keep-alive :include="cachedViews">
|
||||||
<router-view v-if="!$route.meta.link" :key="key" />
|
<router-view v-if="!$route.meta.link" :key="key" />
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</transition>
|
<!-- </transition>-->
|
||||||
<iframe-toggle />
|
<iframe-toggle />
|
||||||
<copyright />
|
<copyright />
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,19 +1,74 @@
|
|||||||
import Layout from "@/layout/index.vue";
|
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,
|
component: Layout,
|
||||||
redirect: 'noRedirect',
|
redirect: '/dzjk/home',
|
||||||
|
meta: { title: '单站监控', icon: 'dashboard',},
|
||||||
|
alwaysShow: false,
|
||||||
|
name:'Dzjk',
|
||||||
|
hidden:true,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'zddt',
|
path: '',
|
||||||
component: () => import('@/views/ems/zddt/index'),
|
component: () => import('@/views/ems/dzjk/index'),
|
||||||
name: 'zddt',
|
name: 'Dzjk',
|
||||||
meta: { title: '站点地图', icon: 'guide' }
|
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 Vue from 'vue'
|
||||||
import Router from 'vue-router'
|
import Router from 'vue-router'
|
||||||
|
// todo delete
|
||||||
import ems from './ems'//EMS管理系统routers引用
|
import ems from './ems'//EMS管理系统routers引用
|
||||||
|
import {dzjk} from '@/router/ems'
|
||||||
|
|
||||||
Vue.use(Router)
|
Vue.use(Router)
|
||||||
|
|
||||||
@ -90,7 +92,8 @@ export const constantRoutes = [
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
// EMS管理系统routers
|
// 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