174 lines
4.3 KiB
Vue
174 lines
4.3 KiB
Vue
<template>
|
|
<el-dialog
|
|
:visible.sync="dialogTableVisible"
|
|
:close-on-click-modal="false"
|
|
show-close
|
|
destroy-on-close
|
|
lock-scroll
|
|
append-to-body
|
|
width="700px"
|
|
class="ems-dialog"
|
|
:before-close="handleColsed"
|
|
>
|
|
<div>
|
|
<el-form size="medium" label-width="100px" inline>
|
|
<el-form-item label="时间选择">
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始时间"
|
|
value-format="yyyy-MM-dd"
|
|
:picker-options="pickerOptions"
|
|
:default-value="defaultDateRange"
|
|
end-placeholder="结束时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="getData">搜索</el-button>
|
|
<el-button @click="onReset">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div id="lineChart" style="height: 360px;width: 100%;"></div>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
import resize from '@/mixins/ems/resize'
|
|
import {getSingleBatteryData} from '@/api/ems/dzjk'
|
|
export default {
|
|
mixins: [resize],
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
siteId:'',
|
|
deviceId:'',
|
|
clusterDeviceId:'',
|
|
dataType:'',//展示的数据类型 空值展示所有数据
|
|
pickerOptions:{
|
|
disabledDate(time) {
|
|
return time.getTime() > Date.now();
|
|
},
|
|
},
|
|
dialogTableVisible: false,
|
|
dateRange: [],
|
|
defaultDateRange:[]
|
|
}
|
|
},
|
|
methods: {
|
|
handleColsed(done){
|
|
if (!this.chart) {
|
|
return done()
|
|
}
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
done()
|
|
},
|
|
getData(){
|
|
if(this.loading) return
|
|
this.loading = true;
|
|
this.chart.showLoading()
|
|
const {siteId, deviceId,clusterDeviceId,dateRange:[startDate='',endDate='']}=this;
|
|
getSingleBatteryData({siteId, deviceId,clusterDeviceId,startDate,endDate}).then(response => {
|
|
this.setOption(response?.data || [])
|
|
}).finally(()=>{
|
|
this.loading = false;
|
|
this.chart.hideLoading()
|
|
})
|
|
},
|
|
// 重置
|
|
onReset(){
|
|
this.dateRange=[]
|
|
this.getData()
|
|
},
|
|
initChart({siteId, clusterDeviceId, deviceId},dataType) {
|
|
this.siteId=siteId
|
|
this.clusterDeviceId=clusterDeviceId
|
|
this.deviceId=deviceId
|
|
this.dataType=dataType
|
|
this.dateRange=[]
|
|
this.dialogTableVisible = true
|
|
this.$nextTick(()=>{
|
|
!this.chart && (this.chart = echarts.init(document.querySelector('#lineChart')))
|
|
this.getData()
|
|
})
|
|
},
|
|
setOption(data) {
|
|
const obj = {
|
|
voltage:'电压',
|
|
temperature:'温度',
|
|
soc:'SOC',
|
|
soh:'SOH',
|
|
}
|
|
let source,series,{dataType} = this
|
|
if(dataType){
|
|
source = [['日期',obj[dataType]]]
|
|
data.forEach(item => {
|
|
source.push([item.dataTimestamp,item[dataType]])
|
|
})
|
|
series=[{
|
|
name:obj[dataType],
|
|
type: 'line',
|
|
}]
|
|
}else{
|
|
source = [['日期','电压','温度','SOC','SOH']]
|
|
data.forEach(item => {
|
|
source.push([item.dataTimestamp,item.voltage,item.temperature,item.soc,item.soh])
|
|
})
|
|
series=[
|
|
{
|
|
name:'电压',
|
|
type: 'line',
|
|
|
|
},{
|
|
name:'温度',
|
|
type: 'line',
|
|
},
|
|
{
|
|
name:'SOC',
|
|
type: 'line',
|
|
|
|
},{
|
|
name:'SOH',
|
|
type: 'line',
|
|
}]
|
|
}
|
|
|
|
|
|
this.chart && this.chart.setOption({
|
|
color:['#FFBD00','#3C81FF','#05AEA3','#F86F70'],
|
|
legend: {
|
|
bottom: '10',
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
textStyle:{
|
|
color:"#333333",
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
dataset:{
|
|
source
|
|
},
|
|
series
|
|
})
|
|
}
|
|
},
|
|
mounted(){
|
|
const now = new Date();
|
|
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
|
this.defaultDateRange = [lastMonth, now];
|
|
}
|
|
}
|
|
</script>
|