You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

111 lines
2.8 KiB

<template>
<!-- <div>数据统计组件</div> -->
<div class="flex-1 flex-column">
<div
:key="item.id"
class="flex-1 flex-nowrap mt-2 align-center justify-space-between box"
v-for="item in lists"
>
<div class="title">{{ item.name }}</div>
<div class="number flex-1">
<div
:key="a"
:style="item.number[a-1] === '.' ? 'padding-right:5%' : '' "
class="num_item"
v-for="a in 7"
>
<span>{{ item.number[a-1] ? item.number[a-1] : 0 }}</span>
</div>
</div>
<!-- <div class="number flex-1">
<div class="num_item">
<span>{{ item.number.split('')[0] }}</span>
</div>
<div class="num_item">
<span>{{ item.number.split('')[1] }}</span>
</div>
<div :style="item.number.split('')[2] === '.' ? 'padding-right:5%' : '' " class="num_item">
<span>{{ item.number.split('')[2] }}</span>
</div>
<div class="num_item">
<span>{{ item.number.split('')[3] }}</span>
</div>
<div class="num_item">
<span>{{ item.number.split('')[4] }}</span>
</div>
<div class="num_item">
<span>{{ item.number.split('')[5] }}</span>
</div>
<div class="num_item">
<span>{{ item.number.split('')[6] }}</span>
</div>
</div>-->
</div>
</div>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
name: 'LoadCells',
data() {
return {
lists: [
{
id: 1,
name: '称重传感器1',
number: ['0', '0', '.', '0', '0', '0', '0'],
},
{
id: 2,
name: '称重传感器2',
number: ['0', '0', '.', '0', '0', '0', '0'],
},
{
id: 3,
name: '称重传感器3',
number: ['0', '0', '.', '0', '0', '0', '0'],
},
{
id: 4,
name: '称重传感器4',
number: ['0', '0', '.', '0', '0', '0', '0'],
},
],
};
},
computed: mapState('home', ['weighSensor1', 'weighSensor2', 'weighSensor3', 'weighSensor4']),
watch: {
weighSensor1(value) {
console.log('value: ', value);
if (value) {
this.lists[0].number = value.split('');
console.log('this.lists: ', this.lists);
}
},
weighSensor2(value) {
if (value) {
this.lists[1].number = value.split('');
}
},
weighSensor3(value) {
if (value) {
this.lists[2].number = value.split('');
}
},
weighSensor4(value) {
if (value) {
this.lists[3].number = value.split('');
}
},
},
methods: {},
};
</script>
<style lang="stylus" scoped >
@import './LoadCells.styl';
</style>