工作栏
This commit is contained in:
白菜
290
pages/work/dtdc/index.vue
Normal file
290
pages/work/dtdc/index.vue
Normal file
@ -0,0 +1,290 @@
|
||||
<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>
|
||||
<view class="list-container">
|
||||
<view class="no-data" v-if="list.length === 0">暂无数据</view>
|
||||
<uni-list v-else>
|
||||
<uni-list-item v-for="(item,index) in list" :key="index+'dtdc'">
|
||||
<template v-slot:header>
|
||||
<view class="list-header">
|
||||
单体编号:{{item.deviceId}}
|
||||
<button type="warn" size="mini" class="charts">图表</button>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<view class="list-body">
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>簇号</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<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">{{item.voltage}}
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>温度（℃）</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right color">
|
||||
{{item.temperature}}
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>SOC（%）</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right color">{{item.soc}}</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view>SOH（%）</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14">
|
||||
<view class="right color">{{item.soh}}</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</view>
|
||||
</template>
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getStackNameList,
|
||||
getClusterNameList,
|
||||
getClusterDataInfoList,
|
||||
} from '@/api/ems/site.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
workStatusOptions: (state) =>
|
||||
state.ems.workStatusOptions,
|
||||
communicationStatusOptions: (state) =>
|
||||
state.ems.communicationStatusOptions,
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
stackOptions: [],
|
||||
clusterOptions: [],
|
||||
search: {
|
||||
stackId: '',
|
||||
clusterId: ''
|
||||
},
|
||||
list: [],
|
||||
siteId: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onReachBottom() {
|
||||
console.log('触底了')
|
||||
this.pageNum += 1 //每次搜索从1开始搜索
|
||||
this.getTableData()
|
||||
},
|
||||
// 搜索
|
||||
onSearch() {
|
||||
this.pageNum = 1 //每次搜索从1开始搜索
|
||||
this.getTableData(true)
|
||||
},
|
||||
// 重置
|
||||
// 清空搜索栏选中数据
|
||||
// 清空电池簇列表，保留电池堆列表
|
||||
onReset() {
|
||||
this.search = {
|
||||
stackId: '',
|
||||
clusterId: ''
|
||||
}
|
||||
this.clusterOptions = []
|
||||
this.pageNum = 1
|
||||
this.getTableData(true)
|
||||
},
|
||||
changeStackId(val) {
|
||||
if (val) {
|
||||
console.log('选择了电池堆，需要获取对应的电池簇', val, this.search.stackId)
|
||||
this.search.clusterId = ''
|
||||
this.getClusterList()
|
||||
}
|
||||
},
|
||||
getStackList() {
|
||||
getStackNameList({
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
this.stackOptions = JSON.parse(JSON.stringify(response?.data || [])).map(item => {
|
||||
return {
|
||||
text: item.deviceName,
|
||||
value: item.id
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
getClusterList() {
|
||||
getClusterNameList({
|
||||
stackDeviceId: this.search.stackId,
|
||||
siteId: this.siteId
|
||||
}).then(response => {
|
||||
this.clusterOptions = JSON.parse(JSON.stringify(response?.data || [])).map(item => {
|
||||
return {
|
||||
text: item.deviceName,
|
||||
value: item.id
|
||||
}
|
||||
})
|
||||
}).finally(() => {})
|
||||
},
|
||||
//表格数据
|
||||
getTableData(reset = false) {
|
||||
if (!reset && this.list.length === this.total) return
|
||||
uni.showLoading()
|
||||
if (reset) {
|
||||
this.list = []
|
||||
this.total = 0
|
||||
}
|
||||
const {
|
||||
stackId: stackDeviceId,
|
||||
clusterId: clusterDeviceId
|
||||
} = this.search
|
||||
const {
|
||||
siteId,
|
||||
pageNum,
|
||||
pageSize
|
||||
} = this
|
||||
getClusterDataInfoList({
|
||||
stackDeviceId,
|
||||
clusterDeviceId,
|
||||
siteId,
|
||||
pageNum,
|
||||
pageSize
|
||||
}).then(response => {
|
||||
this.list = this.list.concat(response?.rows || []);
|
||||
this.total = response?.total || 0
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// uni.showLoading()
|
||||
this.siteId = this.$route.query.siteId || ''
|
||||
this.getStackList()
|
||||
this.getTableData(true)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
position: relative;
|
||||
// position: fixed;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// overflow-y: auto;
|
||||
|
||||
.search-container {
|
||||
height: 170px;
|
||||
background: #ffffff;
|
||||
position: sticky;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
// z-index: 10;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 50px;
|
||||
background: #ffffff;
|
||||
|
||||
::v-deep {
|
||||
.uni-list-item__container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.uni-list--border-top,
|
||||
.uni-list--border-bottom,
|
||||
.uni-list--border::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.list-header {
|
||||
background-color: #05AEA3;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
position: relative;
|
||||
|
||||
.charts {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
transform: translateY(-50%);
|
||||
background-color: #ff7300;
|
||||
}
|
||||
}
|
||||
|
||||
.list-body {
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #eee;
|
||||
border-top: none;
|
||||
border-radius: 0 0 5px 5px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
.right {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.color {
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.uni-row {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user