331 lines
9.9 KiB
Vue
331 lines
9.9 KiB
Vue
<template>
|
||
<!-- 顶部导航栏 -->
|
||
<custom-nav-bar :left="true" leftText="" @leftClick="" title="新增任务"></custom-nav-bar>
|
||
<view class="create-container">
|
||
<u-form ref="formRef" :model="formData" :rules="rules">
|
||
<u-form-item label="任务名称" prop="taskName" required>
|
||
<u-input border="none" v-model="formData.taskName" :placeholder="rules.taskName[0].message" />
|
||
</u-form-item>
|
||
<u-line color="#D2D2D2"></u-line>
|
||
<u-form-item label="轮灌方案" prop="scenarioName" required>
|
||
<view class="select-z" @click="openPopup">
|
||
<span v-if="formData.scenarioName != null && formData.scenarioName != ''">
|
||
{{formData.scenarioName}}
|
||
</span>
|
||
<span class="gray" v-else>{{rules.scenarioName[0].message}}</span>
|
||
</view>
|
||
</u-form-item>
|
||
<u-line color="#D2D2D2"></u-line>
|
||
<u-form-item label="起始组" prop="startGroup" required>
|
||
<view class="select-z" @click="openPopup">
|
||
<span v-if="formData.startGroup != null && formData.startGroup != ''">
|
||
{{formData.startGroup}}
|
||
</span>
|
||
<span class="gray" v-else>{{rules.startGroup[0].message}}</span>
|
||
</view>
|
||
</u-form-item>
|
||
<u-line color="#D2D2D2"></u-line>
|
||
<u-form-item label="开始时间" prop="startTime" required>
|
||
<view class="select-z" @click="startTime.show = true">
|
||
<span v-if="formData.startTime != null && formData.startTime != ''">
|
||
{{formData.startTime}}
|
||
</span>
|
||
<span class="gray" v-else>{{rules.startTime[0].message}}</span>
|
||
</view>
|
||
<u-datetime-picker :show="startTime.show" v-model="startTime.value" mode="datetime"
|
||
@cancel="startTime.show = false" @confirm="startTimeConfirm" />
|
||
</u-form-item>
|
||
<u-line color="#D2D2D2"></u-line>
|
||
<u-form-item label="轮灌组数" prop="groupNum">
|
||
<view class="select-z">
|
||
<span>
|
||
{{formData.groupNum || ''}}
|
||
</span>
|
||
</view>
|
||
</u-form-item>
|
||
<u-line color="#D2D2D2"></u-line>
|
||
<u-form-item label="自动调压" prop="isAutoAdjust">
|
||
<u-radio-group v-model="formData.isAutoAdjust" color="#39ac4f" :disabled="true">
|
||
<u-radio label="否" name="0" style="margin-right: 30px;" />
|
||
<u-radio label="是" name="1" />
|
||
</u-radio-group>
|
||
</u-form-item>
|
||
<u-line color="#D2D2D2"></u-line>
|
||
<u-form-item label="最小压力" prop="pressureMin">
|
||
<u-input border="none" v-model="formData.pressureMin" disabled />
|
||
</u-form-item>
|
||
<u-line color="#D2D2D2"></u-line>
|
||
<u-form-item label="最大压力" prop="pressureMax">
|
||
<u-input border="none" v-model="formData.pressureMax" disabled />
|
||
</u-form-item>
|
||
<u-line color="#D2D2D2"></u-line>
|
||
<view class="form-btn">
|
||
<u-button type="success" size="large" text="立即执行" @click="confirm" />
|
||
<u-button size="large" text="取消" @click="close" />
|
||
</view>
|
||
</u-form>
|
||
</view>
|
||
|
||
<!-- 左侧分组弹出层 -->
|
||
<u-popup mode="bottom" :show="showPop" @close="closePopup" :closeOnClickOverlay="true">
|
||
<view style="padding-bottom: 46px; background: #f3f3f3;">
|
||
<view class="text-intel">
|
||
<view>
|
||
<span>轮灌方案：</span>
|
||
<span class="font-green">{{scenario.length}}</span>个
|
||
</view>
|
||
</view>
|
||
<view style="max-height: 60vh; overflow-y: scroll;">
|
||
<view class="card">
|
||
<uni-collapse>
|
||
<view v-for="item in scenario">
|
||
<uni-collapse-item title-border="none" :border="false" :show-arrow="false" :open="true">
|
||
<template v-slot:title>
|
||
<view class="cards-title">
|
||
<view>
|
||
<view class="text">{{item.scenarioName}}</view>
|
||
<view style="margin-left: 10px;">
|
||
<span>时长：</span>
|
||
<span class="font-orange"
|
||
style="text-decoration: underline;">{{`${item.irrigateTotalDuration} h`}}</span>
|
||
</view>
|
||
<view style="margin-left: 20px;">
|
||
<span>轮灌组数：</span>
|
||
<span class="font-green"
|
||
style="text-decoration: underline;">{{item.groupNum}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="content">
|
||
<view class="cards-content" v-if="item.groupNum > 0">
|
||
<view class="greybar" v-for="group in item.groupNum">
|
||
<view>轮灌组<span>{{group}}</span></view>
|
||
<view style="text-align: center;" @click="selectScenario(item,group)">
|
||
<span>选择</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-collapse-item>
|
||
</view>
|
||
</uni-collapse>
|
||
</view>
|
||
</view>
|
||
<view style="position: absolute;bottom: 0; width: 100%;">
|
||
<u-button type="success" size="large" text="关闭" @click="closePopup" />
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
list
|
||
} from '@/api/irrigate/irrigateScenario.js'
|
||
import * as taskApi from '@/api/irrigate/task.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
landId: null,
|
||
formData: {
|
||
id: null, //id
|
||
landId: null, //地块id
|
||
irrigateScenarioId: null, //轮灌方案id
|
||
scenarioName: null, //浇灌方案名称
|
||
taskName: null, //任务名称
|
||
startTime: null, //开始时间
|
||
// endTime: null, //结束时间
|
||
irrigateTotalDuration: 0, //浇灌总时长
|
||
groupNum: 0, //轮灌组数
|
||
startGroup: null, //起始轮灌组
|
||
isAutoAdjust: '0', //是否自动调压（0否1是）
|
||
pressureMin: null, //压力最小值
|
||
pressureMax: null, //压力最大值
|
||
status: 0, //状态(0未轮灌，1轮灌中，2已完成，3已终止，4暂停)
|
||
// endReason: null, //结束原因
|
||
},
|
||
rules: {
|
||
taskName: [{
|
||
required: true,
|
||
message: '请输入任务名称',
|
||
// trigger: ['change', 'blur']
|
||
}],
|
||
scenarioName: [{
|
||
required: true,
|
||
message: '请选择轮灌方案',
|
||
// trigger: ['change', 'blur']
|
||
}],
|
||
startGroup: [{
|
||
required: true,
|
||
message: '请选择起始组',
|
||
// trigger: ['change', 'blur']
|
||
}],
|
||
startTime: [{
|
||
required: true,
|
||
message: '请选择开始时间',
|
||
// trigger: ['change', 'blur']
|
||
}],
|
||
// groupNum: [{
|
||
// required: true,
|
||
// message: '请选择轮灌方案',
|
||
// // trigger: ['change', 'blur']
|
||
// }],
|
||
// pressureMin: [{
|
||
// required: true,
|
||
// message: '请输入最小压力',
|
||
// }, // 正则判断为字母或数字
|
||
// {
|
||
// pattern: /^\d+(\.\d{1,2})?$/,
|
||
// // 正则检验前先将值转为字符串
|
||
// transform(value) {
|
||
// return String(value);
|
||
// },
|
||
// message: '只能包含数字或2位内的小数'
|
||
// }
|
||
// ],
|
||
// pressureMax: [{
|
||
// required: true,
|
||
// message: '请输入最大压力',
|
||
// }, // 正则判断为字母或数字
|
||
// {
|
||
// pattern: /^\d+(\.\d{1,2})?$/,
|
||
// // 正则检验前先将值转为字符串
|
||
// transform(value) {
|
||
// return String(value);
|
||
// },
|
||
// message: '只能包含数字或2位内的小数'
|
||
// }
|
||
// ]
|
||
|
||
},
|
||
showPop: false,
|
||
scenario: [],
|
||
startTime: {
|
||
show: false,
|
||
value: null
|
||
}
|
||
};
|
||
},
|
||
onLoad(par) {
|
||
this.landId = par.landId;
|
||
},
|
||
methods: {
|
||
inputChange(e, filed) {
|
||
// 清理非数字和非小数点字符
|
||
let cleaned = e.replace(/[^0-9.]/g, '');
|
||
// 确保只有一个小数点，并截取小数点后两位
|
||
const [integerPart, decimalPart = ""] = cleaned.split('.').slice(0, 2);
|
||
const formattedDecimal = decimalPart ? `${integerPart}.${decimalPart.slice(0, 2)}` : integerPart;
|
||
this.formData[filed] = formattedDecimal;
|
||
},
|
||
async openPopup() {
|
||
if (!this.scenario.length) {
|
||
uni.showLoading()
|
||
const res = await list({
|
||
landId: this.landId,
|
||
scenarioType: 2,
|
||
status: "0",
|
||
delFlag: "0",
|
||
})
|
||
this.scenario = res.rows;
|
||
uni.hideLoading()
|
||
}
|
||
this.showPop = true;
|
||
},
|
||
selectScenario(item, startGroup) {
|
||
this.formData.irrigateScenarioId = item.id;
|
||
this.formData.scenarioName = item.scenarioName;
|
||
this.formData.irrigateTotalDuration = item.irrigateTotalDuration;
|
||
this.formData.groupNum = item.groupNum;
|
||
this.formData.isAutoAdjust = item.isAutoAdjust;
|
||
this.formData.pressureMin = item.pressureMin;
|
||
this.formData.pressureMax = item.pressureMax;
|
||
this.formData.startGroup = startGroup;
|
||
this.closePopup();
|
||
},
|
||
closePopup() {
|
||
this.showPop = false;
|
||
},
|
||
startTimeConfirm(e) {
|
||
this.startTime.show = false;
|
||
this.formData.startTime = this.formatter(e.value);
|
||
},
|
||
formatter(time) {
|
||
// 创建一个新的 Date 对象
|
||
let date = new Date(time);
|
||
// 获取并格式化日期部分
|
||
let formattedDate =
|
||
`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||
// 获取并格式化时间部分
|
||
let formattedTime =
|
||
`${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
|
||
// 合并日期和时间
|
||
let formattedDateTime = `${formattedDate} ${formattedTime}`;
|
||
return formattedDateTime;
|
||
},
|
||
confirm() {
|
||
this.$refs.formRef.validate().then(valid => {
|
||
if (valid) {
|
||
this.$showConfirm("立即执行?").then(() => {
|
||
taskApi.addTask(this.formData).then(res => {
|
||
uni.navigateBack();
|
||
});
|
||
}).catch(() => {});
|
||
}
|
||
}).catch(() => {});
|
||
},
|
||
close() {
|
||
uni.navigateBack();
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
body {
|
||
background-color: #fff;
|
||
}
|
||
|
||
// 表单
|
||
.create-container {
|
||
padding: 0 20px;
|
||
background-color: #FFF;
|
||
|
||
// .custom-input {
|
||
// width: 280px;
|
||
// }
|
||
// .form-item {
|
||
// margin-left: 20px;
|
||
// display: flex;
|
||
// align-items: flex-start;
|
||
// width: 100%;
|
||
// }
|
||
::v-deep .u-form-item__body__left {
|
||
width: 80px !important;
|
||
}
|
||
}
|
||
|
||
.greybar>uni-view:first-child {
|
||
color: #333;
|
||
}
|
||
|
||
.select-z {
|
||
font-size: 15px;
|
||
line-height: 24px;
|
||
width: 100%;
|
||
|
||
.gray {
|
||
color: rgb(192, 196, 204);
|
||
}
|
||
}
|
||
|
||
// 弹出框
|
||
.popup-content {
|
||
padding: 20px;
|
||
background-color: #fff;
|
||
text-align: center;
|
||
}
|
||
</style> |