新增概率统计报表=>电表报表、电池温度
This commit is contained in:
白菜
@ -112,6 +112,36 @@ export const dzjk=[
|
||||
component: () => import('@/views/ems/dzjk/tjbb/gltj/index.vue'),
|
||||
name: 'DjzkTjbbGltj',
|
||||
meta: { title: '概率统计',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
|
||||
},
|
||||
{
|
||||
path: 'glqx',
|
||||
component: () => import('@/views/ems/dzjk/tjbb/glqx/index.vue'),
|
||||
name: 'DjzkTjbbGlqx',
|
||||
meta: { title: '功率曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
|
||||
},
|
||||
{
|
||||
path: 'pcsqx',
|
||||
component: () => import('@/views/ems/dzjk/tjbb/pcsqx/index.vue'),
|
||||
name: 'DjzkTjbbPcsqx',
|
||||
meta: { title: 'Pcs曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
|
||||
},
|
||||
{
|
||||
path: 'dcdqx',
|
||||
component: () => import('@/views/ems/dzjk/tjbb/dcdqx/index.vue'),
|
||||
name: 'DjzkTjbbDcdqx',
|
||||
meta: { title: '电池堆曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
|
||||
},
|
||||
{
|
||||
path: 'dcwd',
|
||||
component: () => import('@/views/ems/dzjk/tjbb/dcwd/index.vue'),
|
||||
name: 'DjzkTjbbDcwd',
|
||||
meta: { title: '电池温度',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
|
||||
},
|
||||
{
|
||||
path: 'dbbb',
|
||||
component: () => import('@/views/ems/dzjk/tjbb/dbbb/index.vue'),
|
||||
name: 'DjzkTjbbDbbb',
|
||||
meta: { title: '电表报表',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
177
src/views/ems/dzjk/tjbb/dbbb/index.vue
Normal file
177
src/views/ems/dzjk/tjbb/dbbb/index.vue
Normal file
@ -0,0 +1,177 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索栏-->
|
||||
<div class="select-container">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="电表">
|
||||
<el-select v-model="search.db" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
||||
<el-option :label="item.name" :value="item.id" v-for="(item,index) in dbOptions" :key="index+'dbOptions'"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="日报">
|
||||
<el-select v-model="search.rb" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
||||
<el-option :label="item.name" :value="item.id" v-for="(item,index) in rbOptions" :key="index+'rbOptions'"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间选择">
|
||||
<el-date-picker
|
||||
v-model="search.date"
|
||||
type="date"
|
||||
:picker-options="pickerOptions"
|
||||
:default-value="defaultDate">
|
||||
</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>
|
||||
<!--表格-->
|
||||
<el-table
|
||||
class="common-table"
|
||||
:data="tableData"
|
||||
stripe
|
||||
max-height="500"
|
||||
show-summary
|
||||
sum-text="汇总"
|
||||
style="width: 100%;margin-top:25px;">
|
||||
<!-- todo汇总数据 :summary-method="getSummaries"-->
|
||||
<!-- 汇总列-->
|
||||
<el-table-column label="汇总">
|
||||
<el-table-column
|
||||
prop="time"
|
||||
label="日期"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<!--充电量列-->
|
||||
<el-table-column label="充电量">
|
||||
<el-table-column
|
||||
prop="cdlJian"
|
||||
label="尖">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="cdlFeng"
|
||||
label="峰">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="cdlPing"
|
||||
label="平">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="cdlGu"
|
||||
label="谷">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="cdlZong"
|
||||
label="总">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<!--充电量列-->
|
||||
<el-table-column label="放电量">
|
||||
<el-table-column
|
||||
prop="fdlJian"
|
||||
label="尖">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fdlFeng"
|
||||
label="峰">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fdlPing"
|
||||
label="平">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fdlGu"
|
||||
label="谷">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fdlZong"
|
||||
label="总">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<!-- 效率-->
|
||||
<el-table-column label="效率(%)">
|
||||
<el-table-column
|
||||
prop="efficiency">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'DzjkTjbbDbbb',
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
pickerOptions:{
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
},
|
||||
defaultDate:'',//默认展示的时间
|
||||
search:{db:'',rb:'',date:''},
|
||||
dbOptions:[
|
||||
{name:'电表1',id:1},
|
||||
{name:'电表2',id:2},
|
||||
{name:'电表3',id:3},
|
||||
],
|
||||
rbOptions:[
|
||||
{name:'日报1',id:1},
|
||||
{name:'日报2',id:2},
|
||||
],
|
||||
tableData:[
|
||||
{time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
|
||||
{time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
|
||||
{time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
|
||||
{time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 搜索
|
||||
onSearch(){
|
||||
this.getData()
|
||||
},
|
||||
// 重置
|
||||
onReset(){
|
||||
this.search={
|
||||
db:'',rb:'',date:''
|
||||
}
|
||||
this.getData()
|
||||
},
|
||||
// 获取数据
|
||||
getData(){
|
||||
this.loading=false
|
||||
},
|
||||
getSummaries(){
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.getData()
|
||||
this.defaultDate = new Date()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.select-container{
|
||||
.el-form--inline .el-form-item{
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
::v-deep{
|
||||
.common-table.el-table .el-table__header-wrapper th, .common-table.el-table .el-table__fixed-header-wrapper th{
|
||||
border-bottom: 1px solid #dfe6ec;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
166
src/views/ems/dzjk/tjbb/dcdqx/index.vue
Normal file
166
src/views/ems/dzjk/tjbb/dcdqx/index.vue
Normal file
@ -0,0 +1,166 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="select-container">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="Pcs">
|
||||
<el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
||||
<el-option :label="item.name" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'sblxOptions'"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间选择">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
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 style="margin:30px 0;">
|
||||
<!-- 二个选择按钮-->
|
||||
<el-row style="">
|
||||
<el-col :xs="24" :sm="24" :lg="24">
|
||||
<el-button-group>
|
||||
<el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
|
||||
</el-button-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--echart-->
|
||||
<div id="dcdEchart" style="height:360px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from "@/mixins/ems/resize";
|
||||
export default {
|
||||
name:'DzjkTjbbPcsqx',
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
pickerOptions:{
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
},
|
||||
defaultDateRange:[],//默认展示的时间
|
||||
dateRange:[],
|
||||
loading:false,
|
||||
pcs:'',
|
||||
pcsOptions: [
|
||||
{name:'Pcs1',id:1},
|
||||
{name:'Pcs2',id:2},
|
||||
],
|
||||
activeBtn:'dpjwd',
|
||||
btnList:[
|
||||
{name:'堆平均维度',id:'dpjwd'},
|
||||
{name:'堆电压',id:'ddy'},
|
||||
{name:'堆电流',id:'dll'},
|
||||
{name:'堆soc',id:'dsoc'},
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeDataType(id){
|
||||
if(id !== this.activeBtn){
|
||||
console.log('点击了不同的菜单，更新数据')
|
||||
this.activeBtn=id;
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
onSearch(){
|
||||
this.getData()
|
||||
},
|
||||
// 重置
|
||||
onReset(){
|
||||
this.pcs = ''
|
||||
this.dateRange=[]
|
||||
this.getData()
|
||||
},
|
||||
getData(){
|
||||
this.loading=true;
|
||||
this.chart.showLoading()
|
||||
//接口调用完成之后 设置图表、结束loading
|
||||
this.setOption()
|
||||
this.loading=false;
|
||||
this.chart.hideLoading()
|
||||
},
|
||||
setOption() {
|
||||
this.chart.setOption({
|
||||
color:['#FFBD00','#3C81FF'],
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color:"#333333",
|
||||
},
|
||||
xAxis: {
|
||||
data: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:this.btnList.find(item=>item.id===this.activeBtn).name,
|
||||
data: [80,92,1,34,90,130,320,80,9,91,34,90,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',
|
||||
// }
|
||||
]
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#dcdEchart'));
|
||||
}
|
||||
},
|
||||
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">
|
||||
.activeBtn{
|
||||
background-color: #FFF2CB;
|
||||
border-color: #FFF2CB;
|
||||
color: #666666;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
149
src/views/ems/dzjk/tjbb/dcwd/index.vue
Normal file
149
src/views/ems/dzjk/tjbb/dcwd/index.vue
Normal file
@ -0,0 +1,149 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索栏-->
|
||||
<div class="select-container">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="电池堆">
|
||||
<el-select v-model="search.dcd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
||||
<el-option :label="item.name" :value="item.id" v-for="(item,index) in dcdOptions" :key="index+'dcdOptions'"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="电池簇">
|
||||
<el-select v-model="search.gjdj" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
||||
<el-option :label="item.name" :value="item.id" v-for="(item,index) in dccOptions" :key="index+'dccOptions'"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间选择">
|
||||
<el-date-picker
|
||||
v-model="search.date"
|
||||
type="date"
|
||||
:picker-options="pickerOptions"
|
||||
:default-value="defaultDate">
|
||||
</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 style="margin:30px 0;">
|
||||
<!--表格-->
|
||||
<el-table
|
||||
class="common-table"
|
||||
:data="tableData"
|
||||
stripe
|
||||
max-height="500"
|
||||
style="width: 100%;margin-top:25px;">
|
||||
<el-table-column
|
||||
prop="time"
|
||||
width="100"
|
||||
label="时间">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="maxTemp"
|
||||
label="最高温（℃）">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="maxTempDtId"
|
||||
label="单体ID">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="minTemp"
|
||||
label="最低温（℃）">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="minTempDtId"
|
||||
label="单体ID">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="maxPressure"
|
||||
label="最高压（V）">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="maxPressureDtId"
|
||||
label="单体ID">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="minTemp"
|
||||
label="最低压（V）">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="minPressureDtId"
|
||||
label="单体ID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'DzjkTjbbDcwd',
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
pickerOptions:{
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
},
|
||||
defaultDate:'',//默认展示的时间
|
||||
search:{dcd:'',dcc:'',date:''},
|
||||
dcdOptions:[
|
||||
{name:'电池堆1',id:1},
|
||||
{name:'电池堆2',id:2},
|
||||
{name:'电池堆3',id:3},
|
||||
],
|
||||
dccOptions:[
|
||||
{name:'电池簇1',id:1},
|
||||
{name:'电池簇2',id:2},
|
||||
],
|
||||
tableData:[
|
||||
{time:'00:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
|
||||
{time:'01:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
|
||||
{time:'02:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
|
||||
{time:'03:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
|
||||
{time:'04:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
|
||||
{time:'05:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
|
||||
{time:'06:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
|
||||
{time:'07:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 搜索
|
||||
onSearch(){
|
||||
this.getData()
|
||||
},
|
||||
// 重置
|
||||
onReset(){
|
||||
this.search={
|
||||
dcd:'',dcc:'',date:''
|
||||
}
|
||||
this.getData()
|
||||
},
|
||||
// 获取数据
|
||||
getData(){
|
||||
this.loading=false
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
this.getData()
|
||||
this.defaultDate = new Date()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.select-container{
|
||||
.el-form--inline .el-form-item{
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
166
src/views/ems/dzjk/tjbb/glqx/index.vue
Normal file
166
src/views/ems/dzjk/tjbb/glqx/index.vue
Normal file
@ -0,0 +1,166 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="select-container">
|
||||
<el-form :inline="true">
|
||||
<!-- <el-form-item label="网点">-->
|
||||
<!-- <el-select v-model="wd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
|
||||
<!-- <el-option :label="item.name" :value="item.id" v-for="(item,index) in wdOptions" :key="index+'sblxOptions'"></el-option>-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="时间选择">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
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 style="margin:30px 0;">
|
||||
<!-- 二个选择按钮-->
|
||||
<el-row style="">
|
||||
<el-col :xs="24" :sm="24" :lg="24">
|
||||
<el-button-group>
|
||||
<el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
|
||||
</el-button-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--echart-->
|
||||
<div id="glqxEchart" style="height:360px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from "@/mixins/ems/resize";
|
||||
export default {
|
||||
name:'DzjkTjbbGlqx',
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
pickerOptions:{
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
},
|
||||
defaultDateRange:[],//默认展示的时间
|
||||
dateRange:[],
|
||||
loading:false,
|
||||
// todo delete
|
||||
// wd:'',
|
||||
// wdOptions: [
|
||||
// {name:'网点一',id:1},
|
||||
// {name:'网点二',id:2},
|
||||
// ],
|
||||
activeBtn:'dwgl',
|
||||
btnList:[
|
||||
{name:'电网功率',id:'dwgl'},
|
||||
{name:'负载功率',id:'fzgl'},
|
||||
{name:'电储能功率',id:'cngl'},
|
||||
{name:'光伏功率',id:'gfgl'},
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeDataType(id){
|
||||
if(id !== this.activeBtn){
|
||||
console.log('点击了不同的菜单，更新数据')
|
||||
this.activeBtn=id;
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
onSearch(){
|
||||
this.getData()
|
||||
},
|
||||
// 重置
|
||||
onReset(){
|
||||
this.dateRange=[]
|
||||
this.getData()
|
||||
},
|
||||
getData(){
|
||||
this.loading=true;
|
||||
this.chart.showLoading()
|
||||
//接口调用完成之后 设置图表、结束loading
|
||||
this.setOption()
|
||||
this.loading=false;
|
||||
this.chart.hideLoading()
|
||||
},
|
||||
setOption() {
|
||||
this.chart.setOption({
|
||||
color:['#FFBD00','#3C81FF'],
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color:"#333333",
|
||||
},
|
||||
xAxis: {
|
||||
data: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:this.btnList.find(item=>item.id===this.activeBtn).name,
|
||||
data: [80,92,1,34,90,130,320,80,9,91,34,90,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',
|
||||
// }
|
||||
]
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#glqxEchart'));
|
||||
}
|
||||
},
|
||||
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">
|
||||
.activeBtn{
|
||||
background-color: #FFF2CB;
|
||||
border-color: #FFF2CB;
|
||||
color: #666666;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@ -10,6 +10,7 @@
|
||||
import Syzb from "./Syzb.vue";
|
||||
import Dlzb from "./Dlzb.vue";
|
||||
export default {
|
||||
name:'DzjkTjbbGltj',
|
||||
components: {Syzb,Dlzb}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -23,6 +23,7 @@ import { dzjk } from '@/router/ems'
|
||||
const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DjzkTjbb').children//获取到统计报表下面的字路由
|
||||
console.log('设备监控子路由',childrenRoute)
|
||||
export default {
|
||||
name:'DzjkTjbb',
|
||||
data(){
|
||||
return {
|
||||
childrenRoute,
|
||||
|
||||
167
src/views/ems/dzjk/tjbb/pcsqx/index.vue
Normal file
167
src/views/ems/dzjk/tjbb/pcsqx/index.vue
Normal file
@ -0,0 +1,167 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="select-container">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="Pcs">
|
||||
<el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
|
||||
<el-option :label="item.name" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'sblxOptions'"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间选择">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
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 style="margin:30px 0;">
|
||||
<!-- 二个选择按钮-->
|
||||
<el-row style="">
|
||||
<el-col :xs="24" :sm="24" :lg="24">
|
||||
<el-button-group>
|
||||
<el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
|
||||
</el-button-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--echart-->
|
||||
<div id="pcsEchart" style="height:360px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from "@/mixins/ems/resize";
|
||||
export default {
|
||||
name:'DzjkTjbbPcsqx',
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
pickerOptions:{
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
},
|
||||
defaultDateRange:[],//默认展示的时间
|
||||
dateRange:[],
|
||||
loading:false,
|
||||
pcs:'',
|
||||
pcsOptions: [
|
||||
{name:'Pcs1',id:1},
|
||||
{name:'Pcs2',id:2},
|
||||
],
|
||||
activeBtn:'yggl',
|
||||
btnList:[
|
||||
{name:'有功功率',id:'yggl'},
|
||||
{name:'无功功率',id:'wggl'},
|
||||
{name:'温度',id:'wd'},
|
||||
{name:'三相电压',id:'sxdy'},
|
||||
{name:'三相电流',id:'sxdl'},
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeDataType(id){
|
||||
if(id !== this.activeBtn){
|
||||
console.log('点击了不同的菜单，更新数据')
|
||||
this.activeBtn=id;
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
onSearch(){
|
||||
this.getData()
|
||||
},
|
||||
// 重置
|
||||
onReset(){
|
||||
this.pcs = ''
|
||||
this.dateRange=[]
|
||||
this.getData()
|
||||
},
|
||||
getData(){
|
||||
this.loading=true;
|
||||
this.chart.showLoading()
|
||||
//接口调用完成之后 设置图表、结束loading
|
||||
this.setOption()
|
||||
this.loading=false;
|
||||
this.chart.hideLoading()
|
||||
},
|
||||
setOption() {
|
||||
this.chart.setOption({
|
||||
color:['#FFBD00','#3C81FF'],
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color:"#333333",
|
||||
},
|
||||
xAxis: {
|
||||
data: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:this.btnList.find(item=>item.id===this.activeBtn).name,
|
||||
data: [80,92,1,34,90,130,320,80,9,91,34,90,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',
|
||||
// }
|
||||
]
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#pcsEchart'));
|
||||
}
|
||||
},
|
||||
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">
|
||||
.activeBtn{
|
||||
background-color: #FFF2CB;
|
||||
border-color: #FFF2CB;
|
||||
color: #666666;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user