<template>
|
<view :style="{'height':height}" class="main-contain">
|
<view @click.stop="leftClick" class="left">
|
<u-icon class="btn-icon" v-show="index != 0" name="arrow-left" color="#2979ff" size="14"></u-icon>
|
</view>
|
|
|
<view v-if="type == 'sy'" class="tab">
|
<view v-for="(item,index) in dataList" :key="index" class="item">
|
<view class="item1">
|
<view class="cd_nm">{{item.cd_nm}}:</view>
|
<view class="value">{{item.spprwl}}m</view>
|
<view class="iconfont icon" :class="item.iconClass">
|
{{item.diff_rz}}m
|
</view>
|
</view>
|
<view class="time">{{timeFormat(item.cd_tm)}}</view>
|
</view>
|
|
</view>
|
|
<view v-if="type == 'sl'" class="tab">
|
<view v-for="(item,index) in dataList" :key="index" class="item">
|
<view class="item1">
|
<view class="cd_nm">{{item.cd_nm}}:</view>
|
<view class="value">{{item.spqn}}(L/s)</view>
|
<view class="iconfont icon" :class="item.iconClass">
|
{{item.diff_spqn}}(L/s)
|
</view>
|
</view>
|
<view class="time">{{timeFormat(item.cd_tm)}}</view>
|
</view>
|
</view>
|
|
<view @click.stop="rightClick" class="right">
|
<u-icon class="btn-icon" v-show="index != list.length-1 && list.length>0" name="arrow-right" color="#2979ff"
|
size="14"></u-icon>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
type: {
|
type: String,
|
required: true
|
},
|
dataItem: {
|
type: Object,
|
default: () => {}
|
},
|
height: {
|
type: String,
|
default: ""
|
}
|
},
|
computed: {
|
//时间截取
|
timeFormat() {
|
return (val => {
|
if (val) {
|
return val.substr(5, 11)
|
} else {
|
return "--"
|
}
|
|
})
|
},
|
},
|
|
watch: {
|
dataItem: {
|
handler(newVal, oldVal) {
|
if (newVal.children) {
|
this.list = this.groupData(newVal.children, 3)
|
console.log("list", this.list)
|
}
|
},
|
deep: true,
|
immediate: true
|
},
|
index: {
|
handler(newVal) {
|
if (newVal >= 0 && newVal <= this.list.length) {
|
this.dataList = this.list[newVal]
|
|
|
}
|
}
|
}
|
},
|
|
data() {
|
return {
|
indicator: true,
|
list: [],
|
dataList: [],
|
index: 0
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
this.dataList = this.list[this.index]
|
},
|
onLoad(option) {
|
|
},
|
onShow() {
|
|
},
|
methods: {
|
leftClick() {
|
if (this.index > 0) {
|
this.index -= 1
|
}
|
},
|
rightClick() {
|
if (this.index < this.list.length - 1) {
|
this.index += 1
|
}
|
},
|
|
//拆分数组，并按所给数量进行组装
|
groupData(list, num) {
|
const result = [];
|
for (let i = 0; i < list.length; i += num) {
|
result.push(list.slice(i, i + num));
|
}
|
console.log("result:", result)
|
return result;
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.main-contain {
|
display: flex;
|
align-items: center;
|
|
.left {
|
width: 4%;
|
}
|
|
.tab {
|
width: 92%;
|
|
.item {
|
display: flex;
|
align-items: center;
|
height: 38rpx;
|
|
.item1 {
|
display: flex;
|
align-items: center;
|
width: 63%;
|
|
.cd_nm {}
|
|
.value {}
|
}
|
|
|
|
.icon {
|
font-size: 24rpx;
|
margin-left: 5rpx;
|
}
|
|
.time {
|
margin-left: 10px;
|
}
|
}
|
}
|
|
.right {
|
width: 4%;
|
}
|
|
}
|
|
// /deep/ .u-icon__icon span {
|
// z-index: -1;
|
// }
|
|
/deep/ .u-icon__icon {
|
position: static;
|
}
|
</style>
|
