<template>
|
<flex-layout>
|
<div slot="header">
|
<div class="table-layout filter-box-table">
|
<div class="table-row">
|
<div class="table-cell text-right">操作记录时间段：</div>
|
<div class="table-cell">
|
<el-date-picker v-model="valueTime1" size="small" class="time_box" :picker-options="pickerOptions0"
|
type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
|
至
|
<el-date-picker v-model="valueTime2" size="small" class="time_box" :picker-options="pickerOptions1"
|
type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
|
<el-button type="primary" size="mini" icon="el-icon-search" @click="searchData">查询</el-button>
|
</div>
|
|
</div>
|
|
</div>
|
</div>
|
<!-- 表单 -->
|
<div class="flex-page-content">
|
<div class="eac" ref="eac1" v-loading="loading1" element-loading-background="rgba(0, 0, 0, 0.1)"></div>
|
<div class="eac" ref="eac2" v-loading="loading2" element-loading-background="rgba(0, 0, 0, 0.1)"></div>
|
</div>
|
|
<!-- 底部分页 -->
|
<div class="flex-page-footer" slot="footer">
|
|
</div>
|
</flex-layout>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
export default {
|
chart:{},
|
data() {
|
let thieTime = new Date().format('yyyy-MM-dd');
|
let newTime = new Date(new Date(thieTime).getTime() + 1 * 24 * 3600 * 1000).format('yyyy-MM-dd');
|
let oldTime = new Date(new Date(thieTime).getTime() - 7 * 24 * 3600 * 1000).format('yyyy-MM-dd');
|
return {
|
loading1:false,
|
loading2:false,
|
/* 日期 */
|
valueTime1:"2020-09-01", //oldTime,
|
valueTime2:"2020-09-10",//newTime,
|
pickerOptions0: {
|
disabledDate: (time) => {
|
let vm = this;
|
if (vm.valueTime2) {
|
return new Date(time.getTime()) > new Date(vm.valueTime2);
|
} else {
|
// return time.getTime() > Date.now();
|
}
|
}
|
},
|
pickerOptions1: {
|
disabledDate: (time) => {
|
return new Date(time.getTime() + 24 * 60 * 60 * 1000) < new Date(this.valueTime1);
|
}
|
},
|
};
|
},
|
mounted() {
|
let self = this;
|
self.$options.chart["eac1"] = echarts.init(self.$refs["eac1"]);
|
self.$options.chart["eac2"] = echarts.init(self.$refs["eac2"]);
|
self.searchData();
|
},
|
methods: {
|
// 初始化查询列表
|
searchData(){
|
let self = this;
|
self.loading1 = true;
|
self.loading2 = true;
|
self.searchData1();
|
self.searchData2();
|
},
|
searchData1() {
|
let vm = this;
|
vm.$axios({
|
method:'post',
|
url:'Batt_realdataAction_history_serchByCondition',
|
data:'json=' + JSON.stringify({
|
BattGroupId:1000003,
|
recrod_time:vm.valueTime1 + " 00:00:00",
|
recrod_time1:vm.valueTime2 + " 00:00:00"
|
})
|
}).then(res=>{
|
let result = JSON.parse(res.data.result);
|
if(result.code == 1){
|
let obj1 = {
|
xData:[],
|
data:[],
|
}
|
result.data.forEach(item => {
|
obj1.xData.push(item.recrod_time);
|
obj1.data.push(item.mon_tmp);
|
});
|
vm.setOption1(obj1);
|
vm.loading1 = false;
|
}else{
|
vm.setOption1({xData:[],data:[]});
|
vm.loading1 = false;
|
}
|
}).catch(err=>{
|
vm.$message({
|
type: 'error',
|
message:'网络链接失败，请重试！'
|
});
|
})
|
},
|
// 初始化查询列表
|
searchData2() {
|
let vm = this;
|
vm.$axios({
|
method:'post',
|
url:'Batt_realdataAction_history_searchByCondition2',
|
data:'json=' + JSON.stringify({
|
BattGroupId:1000003,
|
recrod_time:vm.valueTime1 + " 00:00:00",
|
recrod_time1:vm.valueTime2 + " 00:00:00"
|
})
|
}).then(res=>{
|
let result = JSON.parse(res.data.result);
|
if(result.code == 1){
|
let obj2 = {
|
xData:[],
|
data:[],
|
}
|
result.data.forEach(item => {
|
obj2.data.push(item.mon_tmp);
|
obj2.xData.push(item.recrod_time);
|
});
|
vm.setOption2(obj2);
|
vm.loading2 = false;
|
}else{
|
vm.setOption2({xData:[],data:[]});
|
vm.loading2 = false;
|
}
|
}).catch(err=>{
|
vm.$message({
|
type: 'error',
|
message:'网络链接失败，请重试！'
|
});
|
})
|
},
|
setOption1:function(data){
|
let vm = this;
|
let option = {
|
tooltip : {
|
trigger: 'axis'
|
},
|
xAxis : [
|
{
|
type : 'category',
|
boundaryGap : false,
|
data :data.xData
|
}
|
],
|
yAxis : [
|
{
|
type : 'value',
|
axisLabel : {
|
formatter: '{value}'
|
}
|
}
|
],
|
series : [
|
{
|
name:'',
|
type:'line',
|
data:data.data,
|
},
|
]
|
}
|
vm.$options.chart["eac1"].setOption(option);
|
},
|
setOption2:function(data){
|
let vm = this;
|
let option = {
|
tooltip : {
|
trigger: 'axis'
|
},
|
xAxis : [
|
{
|
type : 'category',
|
boundaryGap : false,
|
data :data.xData
|
}
|
],
|
yAxis : [
|
{
|
type : 'value',
|
axisLabel : {
|
formatter: '{value} '
|
}
|
}
|
],
|
series : [
|
{
|
name:'',
|
type:'line',
|
data:data.data,
|
},
|
]
|
}
|
vm.$options.chart["eac2"].setOption(option);
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.eac{
|
width: 100%;
|
height: 400px;
|
}
|
</style>
|
