181 lines
4.0 KiB
Vue
181 lines
4.0 KiB
Vue
<template>
|
|
<uni-popup ref="popup" type="center" @maskClick="show = false">
|
|
<view class="chart-popup">
|
|
<uni-datetime-picker v-model="range" type="daterange" start="2000-01-01" :end="end" rangeSeparator="至"
|
|
@change="changeTime" />
|
|
<view class="button-group" style="text-align: center;margin-top:20px;">
|
|
<button type="default" size="mini" @click="onReset">重置</button>
|
|
<button type="primary" size="mini" @click="onSearch" style="margin-left: 20px;">搜索</button>
|
|
</view>
|
|
<view class="chart-container">
|
|
<qiun-data-charts type="line" :reload="show" :chartData="chartsData" :canvas2d="true"
|
|
canvasId="scrollcolumnid" :optsWatch='false' :inScrollView="true" :pageScrollTop="pageScrollTop"
|
|
:opts="options" :ontouch="true" />
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getSingleBatteryData
|
|
} from '@/api/ems/site.js'
|
|
export default {
|
|
props: {
|
|
pageScrollTop: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
options: {
|
|
enableScroll: true,
|
|
xAxis: {
|
|
scrollShow: true,
|
|
itemCount: 4,
|
|
disableGrid: true
|
|
},
|
|
update: true,
|
|
duration: 0,
|
|
animation: false,
|
|
// enableScroll: true,
|
|
// padding: [10, 15, 10, 15]
|
|
},
|
|
show: false,
|
|
range: [],
|
|
end: "",
|
|
siteId: '',
|
|
deviceId: '',
|
|
clusterDeviceId: '',
|
|
dataType: '', //展示的数据类型 空值展示所有数据
|
|
loading: false,
|
|
chartsData: {},
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
open({
|
|
siteId,
|
|
clusterDeviceId,
|
|
deviceId
|
|
}, dataType) {
|
|
this.$refs.popup.open()
|
|
this.loading = false
|
|
this.siteId = siteId
|
|
this.clusterDeviceId = clusterDeviceId
|
|
this.deviceId = deviceId
|
|
this.dataType = dataType
|
|
this.range = []
|
|
setTimeout(() => {
|
|
this.show = true
|
|
this.getData()
|
|
}, 300)
|
|
},
|
|
changeTime(val) {
|
|
this.range = val || []
|
|
},
|
|
onReset() {
|
|
this.range = []
|
|
this.getData()
|
|
},
|
|
onSearch() {
|
|
this.getData()
|
|
},
|
|
getData() {
|
|
if (this.loading) return
|
|
this.loading = true;
|
|
const {
|
|
siteId,
|
|
deviceId,
|
|
clusterDeviceId,
|
|
range: [startDate = '', endDate = '']
|
|
} = this;
|
|
this.chartsData?.series && (this.chartsData.series = [])
|
|
return getSingleBatteryData({
|
|
siteId,
|
|
deviceId,
|
|
clusterDeviceId,
|
|
startDate,
|
|
endDate
|
|
}).then(response => {
|
|
console.log('单体电池图表返回数据', response.data)
|
|
this.handledata(response?.data || [])
|
|
}).finally(() => {
|
|
this.loading = false;
|
|
})
|
|
},
|
|
handledata(data) {
|
|
let obj = {
|
|
voltage: '电压',
|
|
temperature: '温度',
|
|
soc: 'SOC',
|
|
soh: 'SOH',
|
|
},
|
|
categories = [],
|
|
dataTypeList = []
|
|
if (this.dataType) {
|
|
dataTypeList = [{
|
|
attr: this.dataType,
|
|
title: obj[this.dataType],
|
|
data: []
|
|
}]
|
|
} else {
|
|
dataTypeList = Object.entries(obj).map(([key, value]) => {
|
|
return {
|
|
attr: key,
|
|
title: value,
|
|
data: []
|
|
}
|
|
})
|
|
|
|
}
|
|
data.forEach(item => {
|
|
categories.push(item.dataTimestamp)
|
|
dataTypeList.forEach(i => {
|
|
i.data.push(item[i.attr] || undefined)
|
|
})
|
|
})
|
|
const series = dataTypeList.map(item => {
|
|
return {
|
|
"name": item.title,
|
|
"data": item.data
|
|
}
|
|
})
|
|
this.chartsData = JSON.parse(JSON.stringify({
|
|
categories,
|
|
series
|
|
}))
|
|
console.log('this.chartsData', this.chartsData)
|
|
}
|
|
},
|
|
mounted() {
|
|
const now = new Date(),
|
|
year = now.getFullYear(),
|
|
month = now.getMonth() + 1,
|
|
day = now.getDate()
|
|
this.end = year + '-' + month + '-' + day
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.chart-popup {
|
|
width: 360px;
|
|
background-color: #fff;
|
|
padding: 10px 15px;
|
|
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 250px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
::v-deep {
|
|
uni-canvas {
|
|
height: 250px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style> |