单体电池
This commit is contained in:
@ -9,8 +9,8 @@
|
||||
</view>
|
||||
<view class="chart-container">
|
||||
<qiun-data-charts type="line" :reload="show" :chartData="chartsData" :canvas2d="true"
|
||||
canvasId="componentsinit" :optsWatch='false' :inScrollView="true" :pageScrollTop="pageScrollTop"
|
||||
:opts="options" />
|
||||
canvasId="scrollcolumnid" :optsWatch='false' :inScrollView="true" :pageScrollTop="pageScrollTop"
|
||||
:opts="options" :ontouch="true" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
@ -34,6 +34,12 @@
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
enableScroll: true,
|
||||
xAxis: {
|
||||
scrollShow: true,
|
||||
itemCount: 4,
|
||||
disableGrid: true
|
||||
},
|
||||
update: true,
|
||||
duration: 0,
|
||||
animation: false,
|
||||
@ -166,6 +172,7 @@
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
|
||||
@ -1,21 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="uni-pa-5 search-container">
|
||||
<uni-forms ref="form">
|
||||
<uni-forms-item label="电池堆">
|
||||
<uni-data-select :clear="false" v-model="search.stackId" :localdata="stackOptions"
|
||||
@change="changeStackId"></uni-data-select>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="电池簇">
|
||||
<uni-data-select :clear="false" v-model="search.clusterId"
|
||||
:localdata="clusterOptions"></uni-data-select>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<view class="button-group" style="text-align: center;">
|
||||
<button type="default" size="mini" @click="onReset">重置</button>
|
||||
<button type="primary" size="mini" @click="onSearch" style="margin-left: 20px;">搜索</button>
|
||||
</view>
|
||||
|
||||
<view class="search-icon" @click="openSearch">
|
||||
<uni-icons type="search" size="40" color="#fff"></uni-icons>
|
||||
</view>
|
||||
<view class="list-container">
|
||||
<view class="no-data" v-if="list.length === 0">暂无数据</view>
|
||||
@ -24,7 +10,7 @@
|
||||
<template v-slot:header>
|
||||
<view class="list-header">
|
||||
单体编号:{{item.deviceId}}
|
||||
<button type="warn" size="mini" class="charts" @click="toDetail(item)">图表</button>
|
||||
<button type="primary" size="mini" class="charts" @click="toDetail(item)">图表</button>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
@ -78,6 +64,24 @@
|
||||
</uni-list>
|
||||
</view>
|
||||
<chart ref="chart" :pageScrollTop="pageScrollTop" />
|
||||
<uni-popup ref="searchPopup" type="center">
|
||||
<view class="uni-pa-5 search-container">
|
||||
<uni-forms ref="form">
|
||||
<uni-forms-item label="电池堆">
|
||||
<uni-data-select :clear="false" v-model="search.stackId" :localdata="stackOptions"
|
||||
@change="changeStackId"></uni-data-select>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="电池簇">
|
||||
<uni-data-select :clear="false" v-model="search.clusterId"
|
||||
:localdata="clusterOptions"></uni-data-select>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<view class="button-group" style="text-align: center;">
|
||||
<button type="default" size="mini" @click="onReset">重置</button>
|
||||
<button type="primary" size="mini" @click="onSearch" style="margin-left: 20px;">搜索</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -123,6 +127,12 @@
|
||||
this.pageScrollTop = e.scrollTop
|
||||
},
|
||||
methods: {
|
||||
openSearch() {
|
||||
this.$refs.searchPopup.open()
|
||||
},
|
||||
closeSearch() {
|
||||
this.$refs.searchPopup.close()
|
||||
},
|
||||
toDetail(item, dataType) {
|
||||
const {
|
||||
clusterDeviceId,
|
||||
@ -145,6 +155,7 @@
|
||||
onSearch() {
|
||||
this.pageNum = 1 //每次搜索从1开始搜索
|
||||
this.getTableData(true)
|
||||
this.closeSearch()
|
||||
},
|
||||
// 重置
|
||||
// 清空搜索栏选中数据
|
||||
@ -157,6 +168,7 @@
|
||||
this.clusterOptions = []
|
||||
this.pageNum = 1
|
||||
this.getTableData(true)
|
||||
this.closeSearch()
|
||||
},
|
||||
changeStackId(val) {
|
||||
if (val) {
|
||||
@ -233,20 +245,28 @@
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
position: relative;
|
||||
|
||||
// position: fixed;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// overflow-y: auto;
|
||||
.search-icon {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 1;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-color: #007aff;
|
||||
border-radius: 100%;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
height: 170px;
|
||||
background: #ffffff;
|
||||
position: sticky;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #eee;
|
||||
width: 360px;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
@ -279,7 +299,7 @@
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
transform: translateY(-50%);
|
||||
background-color: #ff7300;
|
||||
// background-color: #ff7300;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user