新增概率统计报表=>电表报表、电池温度
This commit is contained in:
白菜
@ -112,6 +112,36 @@ export const dzjk=[
|
|||||||
component: () => import('@/views/ems/dzjk/tjbb/gltj/index.vue'),
|
component: () => import('@/views/ems/dzjk/tjbb/gltj/index.vue'),
|
||||||
name: 'DjzkTjbbGltj',
|
name: 'DjzkTjbbGltj',
|
||||||
meta: { title: '概率统计',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
|
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 Syzb from "./Syzb.vue";
|
||||||
import Dlzb from "./Dlzb.vue";
|
import Dlzb from "./Dlzb.vue";
|
||||||
export default {
|
export default {
|
||||||
|
name:'DzjkTjbbGltj',
|
||||||
components: {Syzb,Dlzb}
|
components: {Syzb,Dlzb}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -23,6 +23,7 @@ import { dzjk } from '@/router/ems'
|
|||||||
const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DjzkTjbb').children//获取到统计报表下面的字路由
|
const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DjzkTjbb').children//获取到统计报表下面的字路由
|
||||||
console.log('设备监控子路由',childrenRoute)
|
console.log('设备监控子路由',childrenRoute)
|
||||||
export default {
|
export default {
|
||||||
|
name:'DzjkTjbb',
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
childrenRoute,
|
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