样式优化
This commit is contained in:
白菜
@ -1,186 +0,0 @@
|
||||
<template>
|
||||
<uni-popup ref="popup" type="center" @maskClick="show = false" :animation="false">
|
||||
<view class="chart-popup">
|
||||
<uni-datetime-picker v-model="range" type="daterange" :end="end" rangeSeparator="至" @change="changeTime"
|
||||
style="margin-bottom: 10px;" />
|
||||
<!-- <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" :opts="options" :optsWatch='false'
|
||||
:inScrollView="true" :pageScrollTop="pageScrollTop" :ontouch="true" :chartData="chartsData" /> -->
|
||||
<qiun-data-charts type="line" :reshow="show" :optsWatch='false' :opts="options" :chartData="chartsData"
|
||||
:ontouch="true" :inScrollView="true" :pageScrollTop="pageScrollTop" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getSingleBatteryData
|
||||
} from '@/api/ems/site.js'
|
||||
export default {
|
||||
props: {
|
||||
pageScrollTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// {update:true,enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true,scrollAlign:'current'}}
|
||||
options: {
|
||||
// xAxis: {
|
||||
// scrollShow: true,
|
||||
// itemCount: 3,
|
||||
// disableGrid: true,
|
||||
// scrollAlign: 'current'
|
||||
// },
|
||||
// enableScroll: true,
|
||||
// update: true,
|
||||
dataLabel: false,
|
||||
enableScroll: true,
|
||||
xAxis: {
|
||||
scrollShow: true,
|
||||
itemCount: 3,
|
||||
disableGrid: true
|
||||
},
|
||||
duration: 0,
|
||||
animation: false,
|
||||
},
|
||||
show: false,
|
||||
range: [],
|
||||
end: Date.now(),
|
||||
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 = []
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
this.getData()
|
||||
// setTimeout(() => {
|
||||
|
||||
// }, 300)
|
||||
})
|
||||
},
|
||||
changeTime(val) {
|
||||
this.range = val || []
|
||||
this.getData()
|
||||
},
|
||||
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 = {}
|
||||
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)
|
||||
}
|
||||
},
|
||||
}
|
||||
</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>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="search-icon" @click="openSearch">
|
||||
<uni-icons type="search" size="40" color="#fff"></uni-icons>
|
||||
<uni-icons type="search" size="25" color="#fff"></uni-icons>
|
||||
</view>
|
||||
<view class="list-container">
|
||||
<view class="no-data" v-if="list.length === 0">暂无数据</view>
|
||||
@ -10,7 +10,7 @@
|
||||
<template v-slot:header>
|
||||
<view class="list-header">
|
||||
单体编号:{{item.deviceId}}
|
||||
<button type="primary" size="mini" class="charts" @click="toDetail(item)">图表</button>
|
||||
<button type="primary" size="mini" class="charts-btn" @click="toDetail(item)">图表</button>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
@ -19,16 +19,17 @@
|
||||
<uni-col :span="8">
|
||||
<view>簇号</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right">{{item.clusterDeviceId}}</view>
|
||||
<uni-col :span="16">
|
||||
<view class="right">{{item.clusterDeviceId || '-'}}</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>电压（V）</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right color" @click="toDetail(item,'voltage')">{{item.voltage}}
|
||||
<uni-col :span="16">
|
||||
<view class="right color">
|
||||
<text @click="toDetail(item,'voltage')">{{item.voltage | formatNumber}}</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
@ -36,9 +37,10 @@
|
||||
<uni-col :span="8">
|
||||
<view>温度（℃）</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right color" @click="toDetail(item,'temperature')">
|
||||
{{item.temperature}}
|
||||
<uni-col :span="16">
|
||||
<view class="right color">
|
||||
<text
|
||||
@click="toDetail(item,'temperature')">{{item.temperature | formatNumber}}</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
@ -46,16 +48,20 @@
|
||||
<uni-col :span="8">
|
||||
<view>SOC（%）</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right color" @click="toDetail(item,'soc')">{{item.soc}}</view>
|
||||
<uni-col :span="16">
|
||||
<view class="right color">
|
||||
<text @click="toDetail(item,'soc')">{{item.soc | formatNumber}}</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>SOH（%）</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right color" @click="toDetail(item,'soh')">{{item.soh}}</view>
|
||||
<uni-col :span="16">
|
||||
<view class="right color">
|
||||
<text @click="toDetail(item,'soh')">{{item.soh | formatNumber}}</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</view>
|
||||
@ -382,21 +388,18 @@
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
|
||||
// position: fixed;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// overflow-y: auto;
|
||||
.search-icon {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
bottom: 40rpx;
|
||||
right: 40rpx;
|
||||
z-index: 1;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 60rpx;
|
||||
width: 60rpx;
|
||||
background-color: #007aff;
|
||||
border-radius: 100%;
|
||||
line-height: 50px;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -407,20 +410,26 @@
|
||||
}
|
||||
|
||||
.list-container {
|
||||
// z-index: 10;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 50px;
|
||||
background: #ffffff;
|
||||
padding-top: 40rpx;
|
||||
padding-bottom: 100rpx;
|
||||
background: transparent;
|
||||
|
||||
::v-deep {
|
||||
.uni-list {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.uni-list-item {
|
||||
padding: 12px 15px;
|
||||
padding: 10rpx 30rpx;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.uni-list-item__container {
|
||||
background-color: #ffffff;
|
||||
padding: 0;
|
||||
display: block;
|
||||
box-shadow: 0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0 1px 16rpx 1px rgba($color: #a5a5a5, $alpha: 0.2);
|
||||
}
|
||||
|
||||
.uni-list--border-top,
|
||||
@ -431,61 +440,63 @@
|
||||
}
|
||||
|
||||
.list-header {
|
||||
background-color: #05AEA3;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 20rpx 30rpx;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
color: #333;
|
||||
|
||||
.charts {
|
||||
.charts-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
right: 20rpx;
|
||||
transform: translateY(-50%);
|
||||
// background-color: #ff7300;
|
||||
background-color: #4c7af3;
|
||||
}
|
||||
}
|
||||
|
||||
.list-body {
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #eee;
|
||||
border-top: none;
|
||||
border-radius: 0 0 5px 5px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.right {
|
||||
>.uni-row {
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #000;
|
||||
}
|
||||
padding: 12rpx 30rpx;
|
||||
|
||||
.color {
|
||||
color: #007aff;
|
||||
}
|
||||
.left {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.uni-row {
|
||||
margin-bottom: 10px;
|
||||
.right {
|
||||
text-align: right;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
&.color {
|
||||
color: #4c7af3;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.chart-popup {
|
||||
width: 360px;
|
||||
width: 720rpx;
|
||||
background-color: #fff;
|
||||
padding: 10px 15px;
|
||||
padding: 20rpx 30rpx;
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
margin-top: 20px;
|
||||
height: 500rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
uni-canvas {
|
||||
height: 250px;
|
||||
height: 500rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user