Compare commits
8 Commits
main
...
48c93b3efd
| Author | SHA1 | Date | |
|---|---|---|---|
| 48c93b3efd | |||
| 51a479923e | |||
| c19d829a87 | |||
| 4218776b77 | |||
| 9174e8b6aa | |||
| da100a4fa7 | |||
| f2dff98cba | |||
| b2fdb2d6b8 |
9
src/api/ems/dzjk.js
Normal file
9
src/api/ems/dzjk.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
//获取单个站点的信息
|
||||||
|
export function getDzjkHomeView(siteId) {
|
||||||
|
return request({
|
||||||
|
url: `/ems/siteMonitor/homeView?siteId=${siteId}`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
8
src/api/ems/home.js
Normal file
8
src/api/ems/home.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
// 首页、站点地图页面页面顶部 所有站点信息
|
||||||
|
export function getSiteTotalInfo() {
|
||||||
|
return request({
|
||||||
|
url: '/ems/homePage/getSiteTotalInfo',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
15
src/api/ems/zddt.js
Normal file
15
src/api/ems/zddt.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
// 查询缓存名称列表
|
||||||
|
export function getAllSites() {
|
||||||
|
return request({
|
||||||
|
url: '/ems/homePage/getAllSites',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//获取单个站点的基本信息
|
||||||
|
export function getSingleSiteBaseInfo(siteId) {
|
||||||
|
return request({
|
||||||
|
url: `/ems/siteMap/getSingleSiteBaseInfo?siteId=${siteId}`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
42
src/assets/styles/common.scss
Normal file
42
src/assets/styles/common.scss
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
/*
|
||||||
|
ems管理平台公共css样式
|
||||||
|
*/
|
||||||
|
|
||||||
|
//右侧内容区域
|
||||||
|
//父元素
|
||||||
|
.ems-dashboard-editor-container{
|
||||||
|
background-color: #F1F5FC;
|
||||||
|
padding: 24px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
//除去顶部信息(如搜索栏、站点基本信息等)外的 白色背景内容区域
|
||||||
|
.ems-content-container{
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
//需要设置内padding的白色背景区域
|
||||||
|
.ems-content-container-padding{
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
//card通用样式 标题、body
|
||||||
|
.common-card-container{
|
||||||
|
.el-card__header{
|
||||||
|
padding:14px;
|
||||||
|
border-bottom: none;
|
||||||
|
font-size: 12px;
|
||||||
|
background: #F1F5FB ;
|
||||||
|
.card-title{
|
||||||
|
font-weight: 500;
|
||||||
|
color:#333333;
|
||||||
|
}
|
||||||
|
.el-button--text{
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.common-card-container-body-no-padding{
|
||||||
|
.el-card__body{
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -4,6 +4,7 @@
|
|||||||
@import './element-ui.scss';
|
@import './element-ui.scss';
|
||||||
@import './sidebar.scss';
|
@import './sidebar.scss';
|
||||||
@import './btn.scss';
|
@import './btn.scss';
|
||||||
|
@import './common.scss';
|
||||||
|
|
||||||
body {
|
body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
35
src/components/Ems/SingleSquareBox/index.vue
Normal file
35
src/components/Ems/SingleSquareBox/index.vue
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<!--单独的背景颜色渐变、宽高100%的内容展示方块组件-->
|
||||||
|
<template>
|
||||||
|
<el-card shadow="always" class="single-square-box" :style="{background: 'linear-gradient(180deg, '+data.bgColor+' 0%,rgba(255,255,255,0) 100%)'}">
|
||||||
|
<div class="single-square-box-title">{{ data.title }}</div>
|
||||||
|
<div class="single-square-box-value">{{ data.value }}</div>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.single-square-box{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color:#666666;
|
||||||
|
text-align: left;
|
||||||
|
.single-square-box-title{
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 12px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
}
|
||||||
|
.single-square-box-value{
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
::v-deep .el-card__body{
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ['data'],
|
||||||
|
}
|
||||||
|
</script>
|
||||||
87
src/components/Ems/ZdBaseInfo/index.vue
Normal file
87
src/components/Ems/ZdBaseInfo/index.vue
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
|
||||||
|
<!--首页、地图站点页面顶部信息方块-->
|
||||||
|
<template>
|
||||||
|
<el-row type="flex" >
|
||||||
|
<el-card shadow="hover" class="card common-card-container-body-no-padding" v-for="(item,index) in data" :key="index+'zdInfo'" :style="{borderBottomColor:item.color}">
|
||||||
|
<div class="info">{{ item.title }}</div>
|
||||||
|
<div class="num">{{item.num}}</div>
|
||||||
|
</el-card>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getSiteTotalInfo } from "@/api/ems/home"
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
data:[{
|
||||||
|
title:'站点总数（座）',
|
||||||
|
num:'',
|
||||||
|
color:'#FFBD00',
|
||||||
|
attr:'siteNum'
|
||||||
|
},{
|
||||||
|
title:'装机功率（MW）',
|
||||||
|
num:'',
|
||||||
|
color:'#3C81FF',
|
||||||
|
attr:'installedPower'
|
||||||
|
|
||||||
|
},{
|
||||||
|
title:'装机容量（MW）',
|
||||||
|
num:'',
|
||||||
|
color:'#5AC7C0',
|
||||||
|
attr:'installedCap'
|
||||||
|
|
||||||
|
},{
|
||||||
|
title:'总充电量（MWh）',
|
||||||
|
num:'',
|
||||||
|
color:'#A696FF',
|
||||||
|
attr:'totalChargedCap'
|
||||||
|
|
||||||
|
},{
|
||||||
|
title:'总放电量（MWh）',
|
||||||
|
num:'',
|
||||||
|
color:'#A696FF',
|
||||||
|
attr:'totalDischargedCap'
|
||||||
|
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setData(res = {}){
|
||||||
|
this.data.forEach((item)=>{
|
||||||
|
item.num =(res[item.attr] || res[item.attr] === 0) ? res[item.attr] : '—'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
getSiteTotalInfo().then(response => {
|
||||||
|
console.log('单个站点基本信息返回数据',response)
|
||||||
|
this.setData(response.data || {})
|
||||||
|
}).catch(()=>{
|
||||||
|
this.setData({})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.card{
|
||||||
|
width: 150px;
|
||||||
|
height: 96px;
|
||||||
|
margin-right: 27px;
|
||||||
|
border-bottom: 4px solid transparent;
|
||||||
|
text-align: center;
|
||||||
|
.info{
|
||||||
|
color: #666666;
|
||||||
|
line-height: 14px;
|
||||||
|
padding-top: 18px;
|
||||||
|
}
|
||||||
|
.num{
|
||||||
|
color: rgba(51,51,51,1);
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
64
src/components/Ems/ZdSelect/index.vue
Normal file
64
src/components/Ems/ZdSelect/index.vue
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<!--站点选择组件-->
|
||||||
|
<template>
|
||||||
|
<div class="zd-select-container">
|
||||||
|
<el-form :inline="true">
|
||||||
|
<el-form-item label="站点选择">
|
||||||
|
<el-select v-model="id" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据" @change="change">
|
||||||
|
<el-option :label="item.siteName" :value="item.id" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="onSubmit">搜索</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
import {getAllSites} from '@/api/ems/zddt'
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
defaultSiteId:{//默认展示的站点ID
|
||||||
|
type:String|Number,
|
||||||
|
default:'',
|
||||||
|
required:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
id:'',
|
||||||
|
loading:false,
|
||||||
|
siteList:[]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
onSubmit(){
|
||||||
|
this.$emit('submitSite',this.id)
|
||||||
|
},
|
||||||
|
change(id){
|
||||||
|
this.$emit('changeSite',id)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.loading=true
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
getAllSites().then(response => {
|
||||||
|
this.siteList = response.data || []
|
||||||
|
console.log("获取站点列表返回数据",response,this.siteList)
|
||||||
|
// 页面初始化 设置默认选中的站点
|
||||||
|
//defaultSite会传来字符串类型 getAllSites接口返回的id是number类型 两个数据的类型不匹配时下拉框的默认值会显示有问题
|
||||||
|
const defaultSite = parseInt(this.defaultSiteId)
|
||||||
|
if(defaultSite&& this.siteList.find(item=>item.id === defaultSite)){
|
||||||
|
this.id = defaultSite
|
||||||
|
}else if(!defaultSite && this.siteList.length>0){
|
||||||
|
this.id = this.siteList[0].id
|
||||||
|
}
|
||||||
|
this.$emit('submitSite',this.id)
|
||||||
|
}).finally(() => {this.loading=false})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
1
src/data/ems/china.json
Normal file
1
src/data/ems/china.json
Normal file
File diff suppressed because one or more lines are too long
@ -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>
|
||||||
|
|||||||
56
src/mixins/ems/resize.js
Normal file
56
src/mixins/ems/resize.js
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
import { debounce } from '@/utils'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
$_sidebarElm: null,
|
||||||
|
$_resizeHandler: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initListener()
|
||||||
|
},
|
||||||
|
activated() {
|
||||||
|
if (!this.$_resizeHandler) {
|
||||||
|
// avoid duplication init
|
||||||
|
this.initListener()
|
||||||
|
}
|
||||||
|
|
||||||
|
// when keep-alive chart activated, auto resize
|
||||||
|
this.resize()
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.destroyListener()
|
||||||
|
},
|
||||||
|
deactivated() {
|
||||||
|
this.destroyListener()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// use $_ for mixins properties
|
||||||
|
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||||
|
$_sidebarResizeHandler(e) {
|
||||||
|
if (e.propertyName === 'width') {
|
||||||
|
this.$_resizeHandler()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initListener() {
|
||||||
|
this.$_resizeHandler = debounce(() => {
|
||||||
|
this.resize()
|
||||||
|
}, 100)
|
||||||
|
window.addEventListener('resize', this.$_resizeHandler)
|
||||||
|
|
||||||
|
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||||
|
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||||
|
},
|
||||||
|
destroyListener() {
|
||||||
|
window.removeEventListener('resize', this.$_resizeHandler)
|
||||||
|
this.$_resizeHandler = null
|
||||||
|
|
||||||
|
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||||
|
},
|
||||||
|
resize() {
|
||||||
|
const { chart } = this
|
||||||
|
chart && chart.resize()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
74
src/router/ems.js
Normal file
74
src/router/ems.js
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
import Layout from "@/layout/index.vue";
|
||||||
|
|
||||||
|
//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: '/dzjk',
|
||||||
|
component: Layout,
|
||||||
|
redirect: '/dzjk/home',
|
||||||
|
meta: { title: '单站监控', icon: 'dashboard',},
|
||||||
|
alwaysShow: false,
|
||||||
|
name:'Dzjk',
|
||||||
|
hidden:true,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
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'},
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,5 +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 {dzjk} from '@/router/ems'
|
||||||
|
|
||||||
Vue.use(Router)
|
Vue.use(Router)
|
||||||
|
|
||||||
@ -68,7 +71,7 @@ export const constantRoutes = [
|
|||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'index',
|
path: 'index',
|
||||||
component: () => import('@/views/index'),
|
component: () => import('@/views/ems/home/index'),
|
||||||
name: 'Index',
|
name: 'Index',
|
||||||
meta: { title: '首页', icon: 'dashboard', affix: true }
|
meta: { title: '首页', icon: 'dashboard', affix: true }
|
||||||
}
|
}
|
||||||
@ -87,7 +90,10 @@ export const constantRoutes = [
|
|||||||
meta: { title: '个人中心', icon: 'user' }
|
meta: { title: '个人中心', icon: 'user' }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
},
|
||||||
|
// EMS管理系统routers
|
||||||
|
// ...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>
|
||||||
147
src/views/ems/dzjk/home/NllzChart.vue
Normal file
147
src/views/ems/dzjk/home/NllzChart.vue
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
|
||||||
|
<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'
|
||||||
|
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(data) {
|
||||||
|
this.chart = echarts.init(document.querySelector('#nllzChart'))
|
||||||
|
},
|
||||||
|
setOption(data) {
|
||||||
|
const {siteMonitorDataVo=[],gridNrtPower,loadNrtPower,energyStorageNrtPower,energyStorageAvailElec} = data
|
||||||
|
const source = [['日期','充电量','放电量']]
|
||||||
|
siteMonitorDataVo.forEach(item=>{
|
||||||
|
source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
|
||||||
|
})
|
||||||
|
const filterValue=(num)=>{return num || num === 0 ? num : '-'}
|
||||||
|
this.chart.setOption({
|
||||||
|
title: [
|
||||||
|
// 右上角
|
||||||
|
{
|
||||||
|
text: `电网 实时功率：${filterValue(gridNrtPower)} kW`,
|
||||||
|
top: 10,
|
||||||
|
right: 10,
|
||||||
|
textStyle:{
|
||||||
|
fontSize:12,
|
||||||
|
color:'#666666'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 右下角
|
||||||
|
{
|
||||||
|
text: `负载 实时功率：${filterValue(loadNrtPower)} kW`,
|
||||||
|
bottom: 10,
|
||||||
|
right: 10,
|
||||||
|
textStyle:{
|
||||||
|
fontSize:12,
|
||||||
|
color:'#666666'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 左下角第一行
|
||||||
|
{
|
||||||
|
text: '储能',
|
||||||
|
bottom: 40,
|
||||||
|
left: 10,
|
||||||
|
textStyle:{
|
||||||
|
fontSize:12,
|
||||||
|
color:'#666666'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 左下角第二行
|
||||||
|
{
|
||||||
|
text: `实时功率：${filterValue(energyStorageNrtPower)} kW`,
|
||||||
|
bottom: 26,
|
||||||
|
left: 10,
|
||||||
|
textStyle:{
|
||||||
|
fontSize:12,
|
||||||
|
color:'#666666'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 左下角第三行
|
||||||
|
{
|
||||||
|
text: `可用电量：${filterValue(energyStorageAvailElec)} kWh`,
|
||||||
|
bottom: 10,
|
||||||
|
left: 10,
|
||||||
|
textStyle:{
|
||||||
|
fontSize:12,
|
||||||
|
color:'#666666'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
grid:{
|
||||||
|
left:200
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||||
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
textStyle:{
|
||||||
|
color:"#333333",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisLine: {
|
||||||
|
lineStyle:{
|
||||||
|
color: '#333333',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {
|
||||||
|
lineStyle:{
|
||||||
|
color: '#333333',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataset:{
|
||||||
|
source
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name:'充电量',
|
||||||
|
type: 'line',
|
||||||
|
},{
|
||||||
|
name:'放电量',
|
||||||
|
type: 'line',
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
148
src/views/ems/dzjk/home/index.vue
Normal file
148
src/views/ems/dzjk/home/index.vue
Normal file
@ -0,0 +1,148 @@
|
|||||||
|
<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="deviceName"
|
||||||
|
label="名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="状态"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span class="warning-status">{{ scope.row.status === 0 ? '中断':'todo不是0是什么告警'}}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="alarmContent"
|
||||||
|
label="告警内容">
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<nllz-chart ref="nllzChart"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getDzjkHomeView} from '@/api/ems/dzjk'
|
||||||
|
import NllzChart from "./NllzChart.vue";
|
||||||
|
export default {
|
||||||
|
components: {NllzChart},
|
||||||
|
watch: {
|
||||||
|
'$route.query':{
|
||||||
|
handler (newQuery,oldQuery) {
|
||||||
|
// 参数变化处理
|
||||||
|
console.log('单站监控=>首页=>页面地址发生变化',newQuery,oldQuery)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const {siteId} =newQuery
|
||||||
|
siteId && this.getData(newQuery.siteId)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
sjglData:[{
|
||||||
|
title:'今日充电量（MWh）',
|
||||||
|
value:'',
|
||||||
|
attr:'dayChargedCap'
|
||||||
|
},{
|
||||||
|
title:'今日放电量（MWh）',
|
||||||
|
value:'',
|
||||||
|
attr:'dayDisChargedCap'
|
||||||
|
},{
|
||||||
|
title:'总充电量（MWh）',
|
||||||
|
value:'',
|
||||||
|
attr:'totalChargedCap'
|
||||||
|
},{
|
||||||
|
title:'总放电量（MWh）',
|
||||||
|
value:'',
|
||||||
|
attr:'totalDischargedCap'
|
||||||
|
}],
|
||||||
|
// todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
|
||||||
|
tableData:[]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
getData(siteId){
|
||||||
|
getDzjkHomeView(siteId).then(response => {
|
||||||
|
const data = response.data || {}
|
||||||
|
this.sjglData.forEach(item=>{
|
||||||
|
item.value = (data[item.attr] || data[item.attr] === 0) ? data[item.attr] : '-'
|
||||||
|
})
|
||||||
|
this.tableData = data?.siteMonitorHomeAlarmVo || []
|
||||||
|
this.$refs.nllzChart.setOption(data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</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>
|
||||||
|
|
||||||
73
src/views/ems/dzjk/index.vue
Normal file
73
src/views/ems/dzjk/index.vue
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="ems-dashboard-editor-container">
|
||||||
|
<zd-select :default-site-id="$route.query.siteId" @submitSite="submitSite"/>
|
||||||
|
<!-- 这里是单站监控的二级菜单栏 需要循环拿到数据 显示在页面上-->
|
||||||
|
<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="{path:item.path,query:$route.query}">
|
||||||
|
{{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:''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
submitSite(id){
|
||||||
|
if(id != this.$route.query.siteId){
|
||||||
|
console.log('单站监控选择了其他的站点id=',id,'并更新页面地址参数')
|
||||||
|
this.$router.push({query:{...this.$route.query,siteId:id}})
|
||||||
|
}else{
|
||||||
|
console.log('单站监控选择了相同的其他的站点id=',id,'页面地址不发生改变')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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="{path:item.path,query:$route.query}">
|
||||||
|
{{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>
|
||||||
104
src/views/ems/home/DlzbChart.vue
Normal file
104
src/views/ems/home/DlzbChart.vue
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<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">按年</el-button>
|
||||||
|
</div>
|
||||||
|
<div style="height: 360px" id="dlzbChart"/>
|
||||||
|
</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('#dlzbChart'), 'macarons')
|
||||||
|
this.setOptions()
|
||||||
|
},
|
||||||
|
setOptions() {
|
||||||
|
this.chart.setOption({
|
||||||
|
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月'],
|
||||||
|
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',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F86F70',
|
||||||
|
opacity: 0.5
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: '#F86F70',
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
name:'放电量',
|
||||||
|
data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
|
||||||
|
type: 'line',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#488AFF',
|
||||||
|
opacity: 0.5
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: '#488AFF',
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
101
src/views/ems/home/GjdjfbChart.vue
Normal file
101
src/views/ems/home/GjdjfbChart.vue
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
|
||||||
|
<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="gjdjfbChart"/>
|
||||||
|
</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('#gjdjfbChart'), 'macarons')
|
||||||
|
this.setOptions()
|
||||||
|
},
|
||||||
|
setOptions() {
|
||||||
|
this.chart.setOption({
|
||||||
|
color:['#3C81FF','#FFBE29'],
|
||||||
|
legend: {
|
||||||
|
left: 'center',
|
||||||
|
bottom: '10',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||||
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
textStyle:{
|
||||||
|
color:"#333333",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: ['A级','B级','C级','D级','E级','F级'],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle:{
|
||||||
|
color: '#333333',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [{
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {
|
||||||
|
lineStyle:{
|
||||||
|
color: '#333333',
|
||||||
|
},
|
||||||
|
onZero:false
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {
|
||||||
|
lineStyle:{
|
||||||
|
color: '#333333',
|
||||||
|
},
|
||||||
|
onZero:false
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name:'数据一',
|
||||||
|
yAxisIndex:0,
|
||||||
|
data: [80,92,1,34,90,130,320],
|
||||||
|
type: 'line',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:'数据二',
|
||||||
|
yAxisIndex:1,
|
||||||
|
data: [89,9,80,4,100,30,30],
|
||||||
|
type: 'bar',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
85
src/views/ems/home/GjqsChart.vue
Normal file
85
src/views/ems/home/GjqsChart.vue
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
|
||||||
|
<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="gjqsChart"/>
|
||||||
|
</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('#gjqsChart'), 'macarons')
|
||||||
|
this.setOptions()
|
||||||
|
},
|
||||||
|
setOptions() {
|
||||||
|
this.chart.setOption({
|
||||||
|
color:['#F86F70'],
|
||||||
|
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月'],
|
||||||
|
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',
|
||||||
|
areaStyle: {}
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
77
src/views/ems/home/SbgjzbChart.vue
Normal file
77
src/views/ems/home/SbgjzbChart.vue
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
|
||||||
|
<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="sbgjzbChart"/>
|
||||||
|
</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('#sbgjzbChart'), 'macarons')
|
||||||
|
this.setOptions()
|
||||||
|
},
|
||||||
|
setOptions() {
|
||||||
|
this.chart.setOption({
|
||||||
|
color:['#FFBE29','#3C81FF','#A796FF','#FC6B69','#58F3AA'],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: 'center',
|
||||||
|
bottom:'10'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '设备告警占比',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: '数据一' },
|
||||||
|
{ value: 735, name: '数据二' },
|
||||||
|
{ value: 580, name: '数据三' },
|
||||||
|
{ value: 484, name: '数据四' },
|
||||||
|
{ value: 300, name: '数据五' }
|
||||||
|
],
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
84
src/views/ems/home/XtxlChart.vue
Normal file
84
src/views/ems/home/XtxlChart.vue
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
|
||||||
|
<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="xtxlChart"/>
|
||||||
|
</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('#xtxlChart'), 'macarons')
|
||||||
|
this.setOptions()
|
||||||
|
},
|
||||||
|
setOptions() {
|
||||||
|
this.chart.setOption({
|
||||||
|
color:['#FFBE01'],
|
||||||
|
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月'],
|
||||||
|
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',
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
71
src/views/ems/home/index.vue
Normal file
71
src/views/ems/home/index.vue
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ems-dashboard-editor-container">
|
||||||
|
<zd-info></zd-info>
|
||||||
|
<div class="ems-content-container ems-content-container-padding">
|
||||||
|
<div class="content-title">数据概览</div>
|
||||||
|
<el-row :gutter="32" style="background:#fff;margin:30px 0;">
|
||||||
|
<el-col :xs="24" :sm="12" :lg="12">
|
||||||
|
<dlzb-chart/>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="24" :sm="12" :lg="12">
|
||||||
|
<xtxl-chart/>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row :gutter="32" style="background:#fff;margin:0;">
|
||||||
|
<el-col :xs="24" :sm="8" :lg="8">
|
||||||
|
<gjqs-chart/>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="24" :sm="8" :lg="8">
|
||||||
|
<sbgjzb-chart/>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="24" :sm="8" :lg="8">
|
||||||
|
<gjdjfb-chart/>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ZdInfo from '@/components/Ems/ZdBaseInfo/index.vue'
|
||||||
|
import DlzbChart from './DlzbChart.vue'
|
||||||
|
import XtxlChart from './XtxlChart.vue'
|
||||||
|
import GjqsChart from './GjqsChart.vue'
|
||||||
|
import SbgjzbChart from './SbgjzbChart.vue'
|
||||||
|
import GjdjfbChart from './GjdjfbChart.vue'
|
||||||
|
export default {
|
||||||
|
name: 'Index',
|
||||||
|
components: {
|
||||||
|
ZdInfo,
|
||||||
|
DlzbChart,
|
||||||
|
XtxlChart,
|
||||||
|
GjqsChart,
|
||||||
|
SbgjzbChart,
|
||||||
|
GjdjfbChart
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.ems-dashboard-editor-container {
|
||||||
|
position: relative;
|
||||||
|
.content-title{
|
||||||
|
line-height: 16px;
|
||||||
|
color: #333333;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
75
src/views/ems/zddt/BarChart.vue
Normal file
75
src/views/ems/zddt/BarChart.vue
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
<!--站点地图页面柱状图组件-->
|
||||||
|
<template>
|
||||||
|
<div class="bar-chart-container"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
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: {
|
||||||
|
setOption(data){
|
||||||
|
const source = [['日期','充电量','放电量']]
|
||||||
|
data.forEach(item=>{
|
||||||
|
source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
|
||||||
|
})
|
||||||
|
this.chart.setOption({
|
||||||
|
color:['#A796FF','#FFBE01'],
|
||||||
|
legend: {
|
||||||
|
left: 'right',
|
||||||
|
bottom: '10',
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: { type: 'category' },
|
||||||
|
yAxis: { },
|
||||||
|
grid:{top:30},
|
||||||
|
dataset:{
|
||||||
|
source
|
||||||
|
// source:[//格式
|
||||||
|
// ['product','充电量','放电量'],
|
||||||
|
// ['第一天',10,20],
|
||||||
|
// ['第二天',20,30],
|
||||||
|
// ]
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',//柱状图
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar',//柱状图
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$el)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.bar-chart-container{
|
||||||
|
width:100%;
|
||||||
|
height: 260px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
95
src/views/ems/zddt/MapChart.vue
Normal file
95
src/views/ems/zddt/MapChart.vue
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="zddtChart" style="height: 100%;width:100%"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import resize from '@/mixins/ems/resize'
|
||||||
|
import china from '@/data/ems/china.json'//中国地图数据
|
||||||
|
import 'echarts/lib/chart/map';
|
||||||
|
echarts.registerMap('china', { geoJSON: china }); //注册可用地图
|
||||||
|
|
||||||
|
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() {
|
||||||
|
// ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
|
||||||
|
this.chart = echarts.init(document.querySelector('#zddtChart'))
|
||||||
|
},
|
||||||
|
setOption(data) {
|
||||||
|
this.chart.setOption({
|
||||||
|
color:['#FFBD00'],
|
||||||
|
backgroundColor: 'transparent', //背景色
|
||||||
|
geo: { //地理坐标系组件 地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制
|
||||||
|
map: 'china', //地图类型 这儿展示的是中国地图
|
||||||
|
aspectScale: 0.85,
|
||||||
|
selectedMode: "single",// 开启单选
|
||||||
|
label: {
|
||||||
|
show: true, //是否显示标签 此处指是否显示地图上的地区名字
|
||||||
|
color: '#ffffff',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
roam: true, //是否开启鼠标缩放和平移漫游
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: "#03365b",
|
||||||
|
borderColor: "#4bf3f9",
|
||||||
|
shadowColor: '#03365b', //阴影颜色
|
||||||
|
shadowOffsetX: 0, //阴影偏移量
|
||||||
|
shadowOffsetY: 10, //阴影偏移量
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
color: '#ffffff',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: "#0f5d9d",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "effectScatter",
|
||||||
|
coordinateSystem: "geo",
|
||||||
|
showEffectOn: "render",
|
||||||
|
data,
|
||||||
|
rippleEffect: {
|
||||||
|
brushType: "stroke",
|
||||||
|
scale: 5,
|
||||||
|
period: 2, // 秒数
|
||||||
|
},
|
||||||
|
symbolSize: 12,
|
||||||
|
clickable: false,
|
||||||
|
zlevel: 1,
|
||||||
|
label: {
|
||||||
|
formatter: "{b}",
|
||||||
|
position: "right",
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
161
src/views/ems/zddt/index.vue
Normal file
161
src/views/ems/zddt/index.vue
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ems-dashboard-editor-container">
|
||||||
|
<zd-info></zd-info>
|
||||||
|
<div class="ems-content-container ">
|
||||||
|
<div class="map-container">
|
||||||
|
<map-chart ref="mapChart"/>
|
||||||
|
</div>
|
||||||
|
<div class="zd-msg-container">
|
||||||
|
<div class="zd-msg-top">
|
||||||
|
<zd-select @submitSite="submitSite"></zd-select>
|
||||||
|
<el-card class="common-card-container">
|
||||||
|
<div slot="header">
|
||||||
|
<span class="card-title">基本信息</span>
|
||||||
|
<el-button style="float: right; padding: 3px 0" type="text" size="small" @click="toDzjk">查看详情</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="single-zd-name">{{singleSiteName}}</div>
|
||||||
|
<!-- 四个方块-->
|
||||||
|
<el-row :gutter="14">
|
||||||
|
<el-col :span="12" 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>
|
||||||
|
<!-- 基本信息 -->
|
||||||
|
<el-descriptions class="single-zd-info-container" :column="1" >
|
||||||
|
<el-descriptions-item v-for="(item,index) in singleZdInfo" :key="index+'singleZdInfo'" :label="item.title">{{item.value}}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<!-- echarts柱状图-->
|
||||||
|
<bar-chart ref="barChart"></bar-chart>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ZdInfo from '@/components/Ems/ZdBaseInfo/index.vue'
|
||||||
|
import ZdSelect from '@/components/Ems/ZdSelect/index.vue'
|
||||||
|
import SingleSquareBox from '@/components/Ems/SingleSquareBox/index.vue'
|
||||||
|
import BarChart from './BarChart.vue'
|
||||||
|
import MapChart from './MapChart.vue'
|
||||||
|
import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
|
||||||
|
export default {
|
||||||
|
components:{ZdSelect,ZdInfo,SingleSquareBox,BarChart,MapChart},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
singleSiteId:'',
|
||||||
|
singleSiteName:'',
|
||||||
|
singleSiteLocation:[],
|
||||||
|
// 单个电站 四个方块数据
|
||||||
|
singleZdSqaure:[
|
||||||
|
{
|
||||||
|
title:'今日充电（kWh）',
|
||||||
|
value:'',
|
||||||
|
bgColor:'#FFE5E5',
|
||||||
|
attr:'dayChargedCap'
|
||||||
|
},{
|
||||||
|
title:'累计充电（kWh）',
|
||||||
|
value:'',
|
||||||
|
bgColor:'#FFE5E5',
|
||||||
|
attr:'totalChargedCap'
|
||||||
|
},{
|
||||||
|
title:'今日放电（kWh）',
|
||||||
|
value:'',
|
||||||
|
bgColor:'#EEEBFF',
|
||||||
|
attr:'dayDisChargedCap'
|
||||||
|
},{
|
||||||
|
title:'累计放电（kWh）',
|
||||||
|
value:'',
|
||||||
|
bgColor:'#EEEBFF',
|
||||||
|
attr:'totalDisChargedCap'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
// 单个电站 基本信息
|
||||||
|
singleZdInfo:[{
|
||||||
|
title:'电站位置',
|
||||||
|
value:'',
|
||||||
|
attr:'siteAddress'
|
||||||
|
},{
|
||||||
|
title:'投运时间',
|
||||||
|
value:'',
|
||||||
|
attr:'runningTime'
|
||||||
|
},{
|
||||||
|
title:'装机功率',
|
||||||
|
value:'',
|
||||||
|
attr:'installedPower'
|
||||||
|
},{
|
||||||
|
title:'装机容量',
|
||||||
|
value:'',
|
||||||
|
attr:'installedCap',
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 站点选中
|
||||||
|
submitSite(id){
|
||||||
|
if(this.singleSiteId === id){return console.log(`点击搜索按钮 搜索相同的站点id= ${id}不再调用获取基本信息接口`)}
|
||||||
|
console.log('点击搜索按钮 选中的站点id',id)
|
||||||
|
this.singleSiteId = id
|
||||||
|
getSingleSiteBaseInfo(id).then(response => {
|
||||||
|
console.log('单个站点详情数据',response)
|
||||||
|
const res = response.data || {}
|
||||||
|
this.singleSiteName = res?.siteName || ''//站点名称
|
||||||
|
this.singleSiteLocation = res?.siteLocation || []//站点坐标
|
||||||
|
this.singleZdSqaure.forEach(item=>{
|
||||||
|
item.value =( res[item.attr] || res[item.attr] === 0 ) ? res[item.attr] : '-'
|
||||||
|
})
|
||||||
|
this.singleZdInfo.forEach(item=>{
|
||||||
|
item.value = ( res[item.attr] || res[item.attr] === 0 ) ? res[item.attr] : '-'
|
||||||
|
})
|
||||||
|
this.$refs.barChart.setOption(res?.sevenDayDisChargeStats || [])
|
||||||
|
this.$refs.mapChart.setOption([{name:this.singleSiteName,value:this.singleSiteLocation}])
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//跳转单站监控页面
|
||||||
|
toDzjk(){
|
||||||
|
this.$router.push({
|
||||||
|
path:'/dzjk',
|
||||||
|
query:{
|
||||||
|
siteId:this.singleSiteId,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.ems-content-container{
|
||||||
|
display: flex;
|
||||||
|
padding:24px;
|
||||||
|
padding-right: 0;
|
||||||
|
.map-container{
|
||||||
|
flex:auto;
|
||||||
|
}
|
||||||
|
.zd-msg-container{
|
||||||
|
width: 500px;
|
||||||
|
padding: 24px;
|
||||||
|
.single-zd-name{
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 23px;
|
||||||
|
color: #FFBD00;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.single-square-box-container{
|
||||||
|
height: 78px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.single-zd-info-container{
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 10px;
|
||||||
|
color:#666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user