331 lines
7.9 KiB
Vue
331 lines
7.9 KiB
Vue
<template>
|
||
<!-- 顶部导航栏 -->
|
||
<custom-nav-bar :left="true" leftText="" @leftClick="" title="轮灌组列表"></custom-nav-bar>
|
||
<view>
|
||
<view class="text-intel">
|
||
<view style="width: 30%;">
|
||
<span class="text" v-if="groupItem.groupName">轮灌组：{{groupItem.groupName}}</span>
|
||
<span class="text" v-else>轮灌组：新增组</span>
|
||
</view>
|
||
<view style="width: 30%;">
|
||
<span v-if="groupItem.irrigateDuration">时长：{{groupItem.irrigateDuration}}</span>
|
||
</view>
|
||
<view style="width: 30%;">
|
||
<span>已选：{{ Object.keys(select.newV).length }}</span>
|
||
</view>
|
||
</view>
|
||
<view class="card">
|
||
<uni-collapse>
|
||
<uni-collapse-item title-border="none" :border="false" :show-arrow="false" :open="true"
|
||
v-for="item in woData">
|
||
<template v-slot:title>
|
||
<view class="cards-title">
|
||
<view>
|
||
<view class="iconfont icon-nongtian icon"></view>
|
||
<view class="text" style="color: #333;">
|
||
{{ item.landGroup }}{{ item.branchCanalCode }}
|
||
</view>
|
||
</view>
|
||
<!-- <view>全选</view> -->
|
||
</view>
|
||
</template>
|
||
<view class="content" v-if="item.children">
|
||
<uni-forms ref="baseForm">
|
||
<view class="cards-content">
|
||
<view class="greybar-box" v-for="child in item.children">
|
||
<view class="title">
|
||
<view>出水口：<span>{{child.showName}}</span></view>
|
||
<view v-if="child.deviceRelation">阀门：
|
||
<span v-if="[2,3].includes(child.deviceRelation.deviceTypeId)">
|
||
三通阀
|
||
</span>
|
||
<span v-if="[13].includes(child.deviceRelation.deviceTypeId)">
|
||
五通阀
|
||
</span>
|
||
</view>
|
||
</view>
|
||
<uni-forms-item v-if="child.deviceRelation">
|
||
<view class="check-box"
|
||
v-if="[2,3].includes(child.deviceRelation.deviceTypeId)">
|
||
<uni-data-checkbox mode="tag" :multiple="true" :localdata="valve"
|
||
:value="select.newV[child.id]" @change="itemChange($event,child)" />
|
||
</view>
|
||
<view class="check-box" v-if="[13].includes(child.deviceRelation.deviceTypeId)">
|
||
<uni-data-checkbox mode="tag" :multiple="true" :localdata="fiveValve"
|
||
:value="select.newV[child.id]" @change="itemChange($event,child)" />
|
||
</view>
|
||
</uni-forms-item>
|
||
<view class="no-data" v-else>
|
||
<view class="iconfont icon-wbd"></view>未绑定阀门
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-forms>
|
||
</view>
|
||
</uni-collapse-item>
|
||
</uni-collapse>
|
||
</view>
|
||
<view class="bottom-btn">
|
||
<u-button type="success" size="large" text="保存" @click="open" />
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="inputDialog" type="dialog">
|
||
<uni-popup-dialog ref="inputClose" mode="input" title="保存" v-model="groupItem.groupName" placeholder="请输入方案名称!"
|
||
:before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script>
|
||
import store from '@/store'
|
||
const user = store.state.user.user;
|
||
import {
|
||
woSort
|
||
} from "@/utils/woSort"
|
||
import {
|
||
getWaterOutletPermissionList
|
||
} from "@/api/system/landWaterOutletPermission";
|
||
import * as isApi from '@/api/irrigate/irrigateScenario.js'
|
||
|
||
const angleKey = {
|
||
"valve": {
|
||
"1": "open1",
|
||
"2": "open2",
|
||
"3": "open",
|
||
"4": "close",
|
||
},
|
||
"fiveValve": {
|
||
"1": "open",
|
||
"2": "open",
|
||
"3": "open",
|
||
"4": "open",
|
||
}
|
||
}
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
landId: null,
|
||
groupItem: {}, //当前组
|
||
woData: [], //出水口列表
|
||
select: {
|
||
oldV: {}, //旧的选中
|
||
newV: {}, //当前选中
|
||
}, //选中的数据
|
||
// 三通阀
|
||
valve: [{
|
||
text: '①开',
|
||
value: 1,
|
||
},
|
||
{
|
||
text: '②开',
|
||
value: 2,
|
||
},
|
||
{
|
||
text: '全开',
|
||
value: 3,
|
||
}
|
||
],
|
||
// 多通阀
|
||
fiveValve: [{
|
||
text: '①开',
|
||
value: 1,
|
||
},
|
||
{
|
||
text: '②开',
|
||
value: 2,
|
||
},
|
||
{
|
||
text: '③开',
|
||
value: 3,
|
||
},
|
||
{
|
||
text: '④开',
|
||
value: 4,
|
||
}
|
||
],
|
||
}
|
||
},
|
||
onLoad(par) {
|
||
if (par.landId) {
|
||
this.landId = par.landId;
|
||
}
|
||
if (par.id) {
|
||
isApi.getBatchControlInfo(par.id).then(res => {
|
||
this.groupItem = res.data;
|
||
if (this.groupItem.wos && this.groupItem.wos.length) {
|
||
this.groupItem.wos.forEach(item => {
|
||
this.select.oldV[item.woId] = [item.valveNo];
|
||
this.select.newV[item.woId] = [item.valveNo];
|
||
})
|
||
}
|
||
});
|
||
} else {
|
||
this.groupItem = {
|
||
id: undefined,
|
||
title: "新增",
|
||
landId: this.landId,
|
||
userId: user.userId,
|
||
shareUserIds: undefined,
|
||
irrigateScenarioId: undefined,
|
||
groupName: undefined,
|
||
irrigateDuration: undefined,
|
||
sort: 1,
|
||
delFlag: "0",
|
||
wos: []
|
||
}
|
||
}
|
||
|
||
},
|
||
mounted() {
|
||
uni.showLoading();
|
||
// 初始化出水口数据
|
||
getWaterOutletPermissionList(this.landId).then(res => {
|
||
uni.hideLoading()
|
||
if (res.data) {
|
||
this.woData = res.data;
|
||
} else {
|
||
this.woData = [];
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
// 选中数据
|
||
itemChange(e, item) {
|
||
const setToRemove = new Set(this.select.oldV[item.id] || []);
|
||
const value = e.detail.value.filter(x => !setToRemove.has(x));
|
||
this.select.oldV[item.id] = value;
|
||
this.select.newV[item.id] = value;
|
||
},
|
||
open() {
|
||
if (Object.keys(this.select.newV).length) {
|
||
this.$refs.inputDialog.open()
|
||
} else {
|
||
this.$toast("请选择出水口")
|
||
}
|
||
},
|
||
close() {
|
||
this.$refs.inputDialog.close();
|
||
},
|
||
confirm() {
|
||
if (!this.groupItem.groupName) {
|
||
this.$nextTick(() => {
|
||
this.$toast("请输入方案名称!")
|
||
})
|
||
return;
|
||
}
|
||
this.close();
|
||
|
||
const that = this;
|
||
let woArr = [];
|
||
|
||
const object = this.woData.reduce((acc, {
|
||
children
|
||
}) => {
|
||
if (children && children.length) {
|
||
children.forEach(item => {
|
||
acc[item.id] = item;
|
||
});
|
||
}
|
||
return acc;
|
||
}, {});
|
||
for (var key in that.select.newV) {
|
||
if (that.select.newV[key].length && object[key]) {
|
||
const item = object[key];
|
||
const valveNo = that.select.newV[key][0];
|
||
|
||
let deviceTypeKey = undefined;
|
||
switch (item.deviceRelation.deviceTypeId) {
|
||
case 2:
|
||
case 3:
|
||
deviceTypeKey = "valve";
|
||
break;
|
||
case 13:
|
||
deviceTypeKey = "fiveValve";
|
||
break;
|
||
}
|
||
woArr.push({
|
||
landId: that.groupItem.landId,
|
||
irrigateScenarioId: that.groupItem.irrigateScenarioId,
|
||
irrigateGroupId: that.groupItem.id,
|
||
wogId: item.landGroupId || -1,
|
||
wogName: `${item.landGroup || ''}${item.branchCanalCode || ''}`,
|
||
woId: item.id,
|
||
woName: item.showName,
|
||
deviceTypeKey: deviceTypeKey,
|
||
valveNo: valveNo,
|
||
angleKey: angleKey[deviceTypeKey][valveNo],
|
||
sort: 1,
|
||
});
|
||
}
|
||
}
|
||
if (woArr.length) {
|
||
woArr = woArr.slice().sort((v1, v2) => woSort(v1, v2, "woName"));
|
||
woArr.forEach((item, index) => {
|
||
item.sort = (index + 1);
|
||
})
|
||
that.groupItem.wos = woArr;
|
||
isApi.saveBatchControl(that.groupItem).then(res => {
|
||
uni.navigateBack();
|
||
});
|
||
} else {
|
||
that.$toast("请选择出水口")
|
||
}
|
||
},
|
||
},
|
||
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
uni-app,
|
||
uni-page,
|
||
uni-page-wrapper,
|
||
uni-page-body {
|
||
padding-bottom: 38px !important;
|
||
}
|
||
|
||
::v-deep .uni-forms {
|
||
margin-right: 10px;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
::v-deep .uni-forms-item {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
::v-deep .uni-forms-item__label {
|
||
min-width: 0 !important;
|
||
width: auto !important;
|
||
font-size: 0.8rem;
|
||
height: inherit;
|
||
padding: 0;
|
||
}
|
||
|
||
::v-deep .uni-easyinput__content-input {
|
||
height: 20px;
|
||
width: 50px;
|
||
padding-left: 5px !important;
|
||
}
|
||
|
||
|
||
// 按钮列表
|
||
::v-deep .uni-forms-item__content {
|
||
|
||
.check-box {
|
||
|
||
.uni-data-checklist {
|
||
.checklist-group {
|
||
justify-content: space-around;
|
||
|
||
.checklist-box.is--tag.is-checked {
|
||
background-color: #39ac4f;
|
||
border-color: #39ac4f;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |