新增概率统计报表=>统计页面
This commit is contained in:
白菜
@ -100,6 +100,21 @@ export const dzjk=[
|
||||
name: 'DjzkGzgj',
|
||||
meta: { title: '故障告警',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkGzgj' }
|
||||
},
|
||||
{
|
||||
path: '/dzjk/tjbb',
|
||||
component: () => import('@/views/ems/dzjk/tjbb/index.vue'),
|
||||
name: 'DjzkTjbb',
|
||||
meta: {title: '统计报表', breadcrumb: false, activeMenu: '/dzjk'},
|
||||
redirect: '/dzjk/tjbb/gltj',
|
||||
children: [
|
||||
{
|
||||
path: 'gltj',
|
||||
component: () => import('@/views/ems/dzjk/tjbb/gltj/index.vue'),
|
||||
name: 'DjzkTjbbGltj',
|
||||
meta: { title: '概率统计',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
158
src/views/ems/dzjk/tjbb/gltj/Dlzb.vue
Normal file
158
src/views/ems/dzjk/tjbb/gltj/Dlzb.vue
Normal file
@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<el-card shadow="always" class="common-card-container" style="margin-top:20px">
|
||||
<div slot="header">
|
||||
<span class="card-title">电量指标</span>
|
||||
</div>
|
||||
<div class="card-main">
|
||||
<!-- 搜索栏-->
|
||||
<div class="select-container">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="设备类型">
|
||||
<el-select v-model="sjwd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
||||
<el-option :label="item.name" :value="item.id" v-for="(item,index) in sjwdOptions" :key="index+'syzbSjwdOptions'"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间选择">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
:picker-options="pickerOptions"
|
||||
:default-value="defaultDateRange"
|
||||
end-placeholder="结束时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="warning" @click="onSearch" native-type="button">搜索</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onReset" native-type="button">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="total-data">
|
||||
<div>总充电量:<span class="point">1390988kWh</span></div>
|
||||
<div>总放电量:<span class="point">988kWh</span></div>
|
||||
<div>总效益:<span class="point">99%</span></div>
|
||||
</div>
|
||||
<div id="dlzbChart" style="height: 310px"></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from "@/mixins/ems/resize";
|
||||
export default {
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
pickerOptions:{
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
},
|
||||
defaultDateRange:[],//默认展示的时间
|
||||
dateRange:[],
|
||||
sjwd:'',
|
||||
sjwdOptions:[
|
||||
{name:'时间一',id:1},
|
||||
{name:'时间二',id:2},
|
||||
],
|
||||
loading:false,
|
||||
chart: null
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 搜索
|
||||
onSearch(){
|
||||
this.getData()
|
||||
},
|
||||
// 重置
|
||||
onReset(){
|
||||
this.dateRange=[]
|
||||
this.sjwd=''
|
||||
this.getData()
|
||||
},
|
||||
getData(){
|
||||
this.loading=true;
|
||||
this.chart.showLoading()
|
||||
//接口调用完成之后 设置图表、结束loading
|
||||
this.setOption()
|
||||
this.loading=false;
|
||||
this.chart.hideLoading()
|
||||
},
|
||||
setOption(data){
|
||||
// const source = [['日期','充电量','放电量']]
|
||||
// data.forEach(item=>{
|
||||
// source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
|
||||
// })
|
||||
this.chart.setOption({
|
||||
color:['#FFBD00','#3C81FF'],
|
||||
// legend: {
|
||||
// left: 'right',
|
||||
// bottom: '10',
|
||||
// },
|
||||
tooltip: {},
|
||||
xAxis: { type: 'category' },
|
||||
yAxis: { type: 'value' },
|
||||
grid:{top:30},
|
||||
dataset:{
|
||||
// source
|
||||
source:[//格式
|
||||
['product','收益1','收益2'],
|
||||
['今天',10,20],
|
||||
['昨天',20,30],
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',//柱状图
|
||||
},
|
||||
{
|
||||
type: 'bar',//柱状图
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#dlzbChart'));
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
const now = new Date();
|
||||
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
||||
this.defaultDateRange = [lastMonth, now];
|
||||
this.initChart()
|
||||
this.getData()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.total-data{
|
||||
line-height: 18px;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
padding:10px 0;
|
||||
>div{
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
.point{
|
||||
color: #05AEA3;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
155
src/views/ems/dzjk/tjbb/gltj/Syzb.vue
Normal file
155
src/views/ems/dzjk/tjbb/gltj/Syzb.vue
Normal file
@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<el-card shadow="always" class="common-card-container">
|
||||
<div slot="header">
|
||||
<span class="card-title">收益指标</span>
|
||||
</div>
|
||||
<div class="card-main">
|
||||
<!-- 搜索栏-->
|
||||
<div class="select-container">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="设备类型">
|
||||
<el-select v-model="sjwd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
||||
<el-option :label="item.name" :value="item.id" v-for="(item,index) in sjwdOptions" :key="index+'syzbSjwdOptions'"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间选择">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
:picker-options="pickerOptions"
|
||||
:default-value="defaultDateRange"
|
||||
end-placeholder="结束时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="warning" @click="onSearch" native-type="button">搜索</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onReset" native-type="button">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="total-data">
|
||||
<div>总收益:<span class="point">22345元</span></div>
|
||||
</div>
|
||||
<div id="syzbChart" style="height: 310px"></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from "@/mixins/ems/resize";
|
||||
export default {
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
pickerOptions:{
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
},
|
||||
defaultDateRange:[],//默认展示的时间
|
||||
dateRange:[],
|
||||
sjwd:'',
|
||||
sjwdOptions:[
|
||||
{name:'时间一',id:1},
|
||||
{name:'时间二',id:2},
|
||||
],
|
||||
loading:false,
|
||||
chart: null
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 搜索
|
||||
onSearch(){
|
||||
this.getData()
|
||||
},
|
||||
// 重置
|
||||
onReset(){
|
||||
this.dateRange=[]
|
||||
this.sjwd=''
|
||||
this.getData()
|
||||
},
|
||||
getData(){
|
||||
this.loading=true;
|
||||
this.chart.showLoading()
|
||||
//接口调用完成之后 设置图表、结束loading
|
||||
this.setOption()
|
||||
this.loading=false;
|
||||
this.chart.hideLoading()
|
||||
},
|
||||
setOption(data){
|
||||
// const source = [['日期','充电量','放电量']]
|
||||
// data.forEach(item=>{
|
||||
// source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
|
||||
// })
|
||||
this.chart.setOption({
|
||||
color:['#FFBD00','#3C81FF'],
|
||||
// legend: {
|
||||
// left: 'right',
|
||||
// bottom: '10',
|
||||
// },
|
||||
tooltip: {},
|
||||
xAxis: { type: 'category' },
|
||||
yAxis: { type: 'value' },
|
||||
grid:{top:30},
|
||||
dataset:{
|
||||
// source
|
||||
source:[//格式
|
||||
['product','收益1','收益2'],
|
||||
['今天',10,20],
|
||||
['昨天',20,30],
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',//柱状图
|
||||
},
|
||||
{
|
||||
type: 'bar',//柱状图
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#syzbChart'));
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
const now = new Date();
|
||||
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
||||
this.defaultDateRange = [lastMonth, now];
|
||||
this.initChart()
|
||||
this.getData()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.total-data{
|
||||
line-height: 18px;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
padding:10px 0;
|
||||
>div{
|
||||
display: inline-block;
|
||||
.point{
|
||||
color: #05AEA3;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>第三层路由 单站监控=>统计报表=>概览统计</div>
|
||||
<div class="ems-dashboard-editor-container">
|
||||
<syzb/>
|
||||
<dlzb/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Syzb from "./Syzb.vue";
|
||||
import Dlzb from "./Dlzb.vue";
|
||||
export default {
|
||||
components: {Syzb,Dlzb}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,15 +1,74 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>第二层路由 单站监控=>统计报表</div>
|
||||
有三级路由 页面使用router-view组件
|
||||
<router-view></router-view>
|
||||
<div class="ems-dashboard-editor-container tjbb-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+'tjbbChildrenRoute'">
|
||||
<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 tjbb-ems-content-container">
|
||||
<keep-alive>
|
||||
<router-view></router-view>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<script>
|
||||
import { dzjk } from '@/router/ems'
|
||||
const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DjzkTjbb').children//获取到统计报表下面的字路由
|
||||
console.log('设备监控子路由',childrenRoute)
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
childrenRoute,
|
||||
activeMenu:''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('当前统计报表页面路由',this.$route)
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tjbb-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;
|
||||
}
|
||||
}
|
||||
.tjbb-ems-content-container{
|
||||
margin-top:0;
|
||||
padding-top:0;
|
||||
padding-right: 0;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user