<template>
|
<view class="scan_index">
|
<view class="scan_header"></view>
|
<view class="scan_content">
|
<view class="scan_content_search">
|
<u-row>
|
<u-col span="4">
|
<text>选择水养池:</text>
|
</u-col>
|
<u-col span="8" @click="propPicker()">
|
<u-input
|
v-model="value"
|
border="surround"
|
disabled
|
disabledColor="#FFFFFF"
|
placeholder="请选择水养池"
|
></u-input>
|
</u-col>
|
</u-row>
|
<u-row justify="flex-end" customStyle="margin-bottom: 5px">
|
<u-col span="8">
|
<view class="input_bottom">
|
最大容量：<text class="real_max">{{countData.maxSize ? countData.maxSize : 0}}环</text>
|
实际存放：<text
|
class="real_count"
|
:class="{'real_counts' : countData.color}">
|
{{countData.currentCount ? countData.currentCount : 0}}环
|
</text>
|
</view>
|
</u-col>
|
</u-row>
|
<u-row>
|
<u-col span="5">
|
<text>预计完成水养时间:</text>
|
</u-col>
|
<u-col span="7" @click="showTime = true">
|
<u-input
|
v-model="timeVlaue"
|
border="surround"
|
disabled
|
disabledColor="#FFFFFF"
|
placeholder="请选择预计完成时间"
|
></u-input>
|
</u-col>
|
</u-row>
|
</view>
|
<view class="pipe_list">
|
<view class="pipe_list_item--titlt">
|
<text class="title_value">环号</text>
|
<text class="title_value">型号</text>
|
<text class="title_value">管片编号</text>
|
<text class="title_value">质检时间</text>
|
</view>
|
<scroll-view scroll-y="true" class="pipe_list_scroll">
|
<view
|
class="pipe_list_item small"
|
v-for="item in pipeInfoList"
|
:key="item.id">
|
<text class="small_value">{{item.ringNum}}</text>
|
<text class="small_value">{{item.blockNum}}</text>
|
<text class="small_value">{{item.pipeNum}}</text>
|
<text class="small_value">{{item.checkTime}}</text>
|
</view>
|
</scroll-view>
|
</view>
|
<view class="bottom_button">
|
<u-button
|
type="primary"
|
text="提交"
|
@click="submitHandle()">
|
</u-button>
|
</view>
|
</view>
|
<mx-date-picker
|
:show="showTime"
|
type="datetime"
|
:show-tips="true"
|
showSeconds
|
format="yyyy-mm-dd hh:ii:ss"
|
@confirm="confirmTime"
|
@cancel="showTime = false"/>
|
<u-picker
|
:show="showPicker"
|
:columns="columnData"
|
keyName="waterCultivatedName"
|
closeOnClickOverlay
|
@cancel="showPicker = false"
|
@confirm="confirmPicker"
|
@close="showPicker = false"
|
></u-picker>
|
<u-modal
|
:show="showModal"
|
content='是否确认入池信息'
|
showCancelButton
|
@cancel="showModal = false"
|
@confirm="submitCisternInfo"
|
></u-modal>
|
</view>
|
</template>
|
|
<script>
|
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
|
import { throttle } from "../../plugins/public";
|
export default {
|
data() {
|
return {
|
ringNum: '', // 环号
|
showPicker: false, // 选择水养池
|
columnData: [], // 水养池信息
|
countData: {
|
maxSize: 0,
|
currentCount: 0
|
}, // 数量信息
|
showTime: false, // 选择时间
|
value: '',
|
cisternVlaue: '',
|
timeVlaue: '',
|
pipeInfoList: [],
|
showModal: false, // 确认模态框
|
}
|
},
|
components: {
|
MxDatePicker
|
},
|
onLoad(option) {
|
uni.$off('scancodedate');
|
const data = JSON.parse(option.data);
|
this.pipeInfoList = data.intoListVoList;
|
this.$set(this.columnData, 0, data.pulldown);
|
this.ringNum = data.intoListVoList[0].ringNum;
|
},
|
methods: {
|
// 确认选择时间
|
confirmTime(data) {
|
this.timeVlaue = data.value;
|
this.showTime = false;
|
},
|
// 选择水养池弹出
|
propPicker() {
|
this.showPicker = true;
|
this.value = '';
|
this.cisternVlaue = '';
|
this.countData = {};
|
},
|
// 选择水养池
|
confirmPicker(data) {
|
console.log(data,'----');
|
this.value = data.value[0].waterCultivatedName;
|
this.cisternVlaue = data.value[0].waterCultivatedId;
|
this.$set(this.countData, 'maxSize', data.value[0].maxSize ? data.value[0].maxSize : 0);
|
this.$set(this.countData, 'currentCount', data.value[0].currentCount ? data.value[0].currentCount : 0);
|
if(data.value[0].maxSize < data.value[0].currentCount) {
|
this.$set(this.countData, 'color', true);
|
} else {
|
this.$set(this.countData, 'color', false);
|
}
|
this.showPicker = false;
|
},
|
//
|
submitHandle() {
|
if(!this.cisternVlaue) {
|
uni.$u.toast('请选择水养池');
|
return false;
|
} else if(!this.timeVlaue) {
|
uni.$u.toast('请选择预计时间');
|
return false;
|
} else {
|
this.showModal = true;
|
}
|
},
|
// 提交入池信息
|
submitCisternInfo: throttle(function() {
|
this.$api.cistern.submitpipeEnterCistern({
|
waterCultivatedId: this.cisternVlaue,
|
ringNum: this.ringNum,
|
expectTime: this.timeVlaue
|
}).then((res) => {
|
if(res.success) {
|
uni.$u.toast('入池成功！');
|
uni.navigateBack();
|
} else {
|
uni.$u.toast(res.statusMsg);
|
}
|
})
|
}, 3000),
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.scan_index {
|
position: relative;
|
width: 100vw;
|
height: 100vh;
|
background: #F6F6F6;
|
|
.scan_header {
|
height: 16%;
|
background: #1976FF;
|
border-radius: 0 0 30% 30%;
|
}
|
|
.scan_content {
|
position: absolute;
|
top: 5%;
|
left: 50%;
|
transform: translateX(-50%);
|
display: flex;
|
flex-direction: column;
|
padding-bottom: 10px;
|
width: 95%;
|
height: calc(95% - 15px);
|
|
.scan_content_search {
|
padding: 20px 10px;
|
background: #FFFFFF;
|
border-radius: 2px;
|
|
.input_bottom {
|
padding: 10px 5px;
|
margin-top: 5px;
|
color: #AFB0B1;
|
font-size: 14px;
|
background: #DAE9FF;
|
|
.real_max {
|
padding-right: 5px;
|
color: #1976FF;
|
}
|
|
.real_count {
|
color: #24D87D;
|
}
|
|
.real_counts {
|
color: #F42829;
|
}
|
}
|
}
|
|
.pipe_list {
|
height: 60%;
|
padding: 10px 0;
|
|
.pipe_list_scroll {
|
height: 85%;
|
}
|
|
.small {
|
font-size: 12px;
|
}
|
|
.pipe_list_item--titlt {
|
color: #1976FF;
|
font-size: 18px;
|
display: flex;
|
align-items: center;
|
// justify-content: space-evenly;
|
width: 100%;
|
padding: 5px;
|
background: #EDF3FF;
|
|
.title_value {
|
display: inline-block;
|
padding: 0 5px;
|
width: auto;
|
white-space: nowrap;
|
text-align: center;
|
|
&:nth-child(3) {
|
width: 35%;
|
}
|
|
&:nth-child(4) {
|
width: 35%;
|
}
|
}
|
}
|
|
.pipe_list_item {
|
width: 100%;
|
white-space: nowrap;
|
|
.small_value {
|
display: inline-block;
|
padding: 5px 5px;
|
width: auto;
|
white-space: nowrap;
|
text-align: center;
|
}
|
|
|
&:nth-child(odd) {
|
background: #FFFFFF;
|
}
|
|
&:nth-child(even) {
|
background: #EDF3FF;
|
}
|
}
|
|
.bottom_button {
|
margin: 10px 0;
|
}
|
}
|
}
|
}
|
</style>
|
