313 lines
7.9 KiB
Vue
313 lines
7.9 KiB
Vue
|
<template>
|
|||
|
|
<view class="index-container">
|
|||
|
|
<z-paging class="paging" ref="paging" use-virtual-list @query="queryList" bg-color="#F6F3F3"
|
|||
|
|
:loading-more-enabled="false">
|
|||
|
|
<template #top>
|
|||
|
|
<view class="search">
|
|||
|
|
<u-search placeholder="请输入设备编号" @search="onSearchValue" @custom="onSearchValue"
|
|||
|
|
@clear="onSearchValue(null)" shape="square"></u-search>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<view class="tips">
|
|||
|
|
<text style="color: red">注意：</text>
|
|||
|
|
<text>1.选中的开关为没有控制权限;</text>
|
|||
|
|
<text> 2.不建议选择“全关”按钮;</text>
|
|||
|
|
<view style="float: right;margin-right: 15px;border: 1px solid;">
|
|||
|
|
<!-- <u-checkbox-group class="checkBox" style="margin: 0;" iconPlacement="left" placement="row"
|
|||
|
|
@change="handleChangeAll">
|
|||
|
|
<u-checkbox activeColor="#35842E" label="全选" :checked="false" name="all"></u-checkbox>
|
|||
|
|
</u-checkbox-group> -->
|
|||
|
|
<u-button style="height: 25px;" type="primary" size="small" :plain="true" :hairline="true"
|
|||
|
|
@click="handleChangeAll">
|
|||
|
|
{{ selectAll ? '反选':'全选' }}
|
|||
|
|
</u-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<template #cell="{ item }">
|
|||
|
|
<work-user-ground-device-item :item="item" @onCheckBoxChange="onCheckBoxChange" />
|
|||
|
|
</template>
|
|||
|
|
<template #bottom>
|
|||
|
|
<view class="button">
|
|||
|
|
<u-button style="width: 200px; height: 40px; border-radius: 4px" type="success" text="设 置"
|
|||
|
|
@click="submit" :disabled="disabled"></u-button>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
</z-paging>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import {
|
|||
|
|
ref
|
|||
|
|
} from "vue"
|
|||
|
|
import {
|
|||
|
|
onShow,
|
|||
|
|
onLoad,
|
|||
|
|
onReady
|
|||
|
|
} from "@dcloudio/uni-app"
|
|||
|
|
import store from "@/store"
|
|||
|
|
import plugin from "@/plugins"
|
|||
|
|
import storage from "@/utils/storage"
|
|||
|
|
const landId = ref(0)
|
|||
|
|
const dataList = ref([])
|
|||
|
|
const tempList = ref([])
|
|||
|
|
const tempValveData = ref({
|
|||
|
|
valveClose: true,
|
|||
|
|
valveOneOpen: true,
|
|||
|
|
valveOpen: true,
|
|||
|
|
valveTwoOpen: true,
|
|||
|
|
valveThreeOpen: true,
|
|||
|
|
valveFourOpen: true
|
|||
|
|
})
|
|||
|
|
const selectAll = ref(false)
|
|||
|
|
const paging = ref(null)
|
|||
|
|
const query = ref({
|
|||
|
|
landId: 0,
|
|||
|
|
deviceCode: null,
|
|||
|
|
userId: 0
|
|||
|
|
})
|
|||
|
|
const disabled = ref(false)
|
|||
|
|
|
|||
|
|
onLoad(res => {
|
|||
|
|
landId.value = res.landId
|
|||
|
|
query.value.landId = res.landId
|
|||
|
|
query.value.userId = res.userId
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onShow(() => {
|
|||
|
|
// if (paging.value != null) {
|
|||
|
|
// paging.value.reload()
|
|||
|
|
// }
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
//获取地块列表
|
|||
|
|
function queryList() {
|
|||
|
|
// plugin.modal.loading("获取权限列表...")
|
|||
|
|
dataList.value = []
|
|||
|
|
tempList.value = []
|
|||
|
|
if (query.value.deviceCode == null || query.value.deviceCode == "") {
|
|||
|
|
delete query.value["deviceCode"]
|
|||
|
|
}
|
|||
|
|
//获取该用户地块列表
|
|||
|
|
store
|
|||
|
|
.dispatch("onGetUserControlList", query.value)
|
|||
|
|
.then(res => {
|
|||
|
|
let data = res.data[0].valveControls;
|
|||
|
|
// console.error("data:", data);
|
|||
|
|
if (data && data.length) {
|
|||
|
|
data.forEach(item => {
|
|||
|
|
let sortArr = item.waterOutletName.split("-");
|
|||
|
|
switch (sortArr.length) {
|
|||
|
|
case 0:
|
|||
|
|
sortArr = [0, 0, 0, 0];
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
sortArr = sortArr.concat([0, 0, 0]);
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
sortArr = sortArr.concat([0, 0]);
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
sortArr = sortArr.concat([0]);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
item.sortArr = sortArr;
|
|||
|
|
});
|
|||
|
|
data = data.sort(compareData());
|
|||
|
|
} else {
|
|||
|
|
data = [];
|
|||
|
|
plugin.modal.msg("该地块还没有安装或绑定阀门!")
|
|||
|
|
}
|
|||
|
|
dataList.value = data;
|
|||
|
|
paging.value.complete(dataList.value)
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
paging.value.complete([])
|
|||
|
|
plugin.modal.msgError(error)
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
plugin.modal.closeLoading()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
//数据排序
|
|||
|
|
function compareData() {
|
|||
|
|
return function(b, a) {
|
|||
|
|
if (b.sortArr[0] < a.sortArr[0]) {
|
|||
|
|
return -1;
|
|||
|
|
} else if (b.sortArr[0] > a.sortArr[0]) {
|
|||
|
|
return 1;
|
|||
|
|
} else {
|
|||
|
|
if (b.sortArr[1] < a.sortArr[1]) {
|
|||
|
|
return -1;
|
|||
|
|
} else if (b.sortArr[1] > a.sortArr[1]) {
|
|||
|
|
return 1;
|
|||
|
|
} else {
|
|||
|
|
if (b.sortArr[2] < a.sortArr[2]) {
|
|||
|
|
return -1;
|
|||
|
|
} else if (b.sortArr[2] > a.sortArr[2]) {
|
|||
|
|
return 1;
|
|||
|
|
} else {
|
|||
|
|
if (b.sortArr[3] < a.sortArr[3]) {
|
|||
|
|
return -1;
|
|||
|
|
} else if (b.sortArr[3] > a.sortArr[3]) {
|
|||
|
|
return 1;
|
|||
|
|
} else {
|
|||
|
|
return 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//查找地块
|
|||
|
|
function onSearchValue(keyword) {
|
|||
|
|
query.value.deviceCode = keyword
|
|||
|
|
paging.value.reload()
|
|||
|
|
}
|
|||
|
|
//设置控制权限
|
|||
|
|
function submit() {
|
|||
|
|
// if (tempList.value.length < 1) {
|
|||
|
|
// plugin.modal.msg("您未做任何改变!")
|
|||
|
|
// return
|
|||
|
|
// }
|
|||
|
|
let queryData = {
|
|||
|
|
addValveControl: tempList.value
|
|||
|
|
}
|
|||
|
|
plugin.modal.loading("设置中...")
|
|||
|
|
disabled.value = true;
|
|||
|
|
//获取该用户地块列表
|
|||
|
|
store
|
|||
|
|
.dispatch("onSetUserControlList", queryData)
|
|||
|
|
.then(res => {
|
|||
|
|
plugin.modal.msgSuccess("设置成功!")
|
|||
|
|
//刷新列表
|
|||
|
|
queryList();
|
|||
|
|
// queryList(1, 10, "")
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
plugin.modal.msgError(error)
|
|||
|
|
disabled.value = false;
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
plugin.modal.closeLoading()
|
|||
|
|
disabled.value = false;
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 全选
|
|||
|
|
function handleChangeAll() {
|
|||
|
|
selectAll.value = !selectAll.value;
|
|||
|
|
tempList.value = [];
|
|||
|
|
dataList.value.forEach(item => {
|
|||
|
|
if (item.deviceTypeId == 2 || item.deviceTypeId == 3) {
|
|||
|
|
item.valveClose = selectAll.value;
|
|||
|
|
item.valveOpen = selectAll.value;
|
|||
|
|
item.valveOneOpen = selectAll.value;
|
|||
|
|
item.valveTwoOpen = selectAll.value;
|
|||
|
|
item.valveThreeOpen = false;
|
|||
|
|
item.valveFourOpen = false;
|
|||
|
|
}
|
|||
|
|
if (item.deviceTypeId == 13) {
|
|||
|
|
item.valveClose = false;
|
|||
|
|
item.valveOpen = false;
|
|||
|
|
item.valveOneOpen = selectAll.value;
|
|||
|
|
item.valveTwoOpen = selectAll.value;
|
|||
|
|
item.valveThreeOpen = selectAll.value;
|
|||
|
|
item.valveFourOpen = selectAll.value;
|
|||
|
|
}
|
|||
|
|
tempList.value.push(item);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
//当用户点击权限开关之后
|
|||
|
|
function onCheckBoxChange(param) {
|
|||
|
|
console.log(param)
|
|||
|
|
let index = tempList.value.findIndex(x => x.id == param.item.id && x.userId == param.item.userId && x.deviceId ==
|
|||
|
|
param.item.deviceId)
|
|||
|
|
if (index != -1) {
|
|||
|
|
tempList.value.splice(index, 1);
|
|||
|
|
}
|
|||
|
|
let itemSample = judgeValue(param.item, param.checkItem);
|
|||
|
|
tempList.value.push(itemSample);
|
|||
|
|
// //添加到提交的列表中
|
|||
|
|
// //先查找缓存列表有这个对象
|
|||
|
|
// let item = tempList.value.filter(res => {
|
|||
|
|
// return res.id == param.itemId
|
|||
|
|
// })
|
|||
|
|
// //修改属性值
|
|||
|
|
// itemSample = judgeValue(itemSample, param)
|
|||
|
|
// //如果没有这个对象则添加到缓存列表
|
|||
|
|
// if (!item.length) {
|
|||
|
|
// tempList.value.push(itemSample)
|
|||
|
|
// } else {
|
|||
|
|
// //原列表删除后重新添加
|
|||
|
|
// tempList.value = tempList.value.filter(res => {
|
|||
|
|
// return res.itemId != param.itemId
|
|||
|
|
// })
|
|||
|
|
// tempList.value.push(itemSample)
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
//判断开关值属性
|
|||
|
|
function judgeValue(itemSample, param) {
|
|||
|
|
itemSample.valveClose = param.indexOf("valveClose") > -1 ? true : false
|
|||
|
|
itemSample.valveOpen = param.indexOf("valveOpen") > -1 ? true : false
|
|||
|
|
itemSample.valveOneOpen = param.indexOf("valveOneOpen") > -1 ? true : false
|
|||
|
|
itemSample.valveTwoOpen = param.indexOf("valveTwoOpen") > -1 ? true : false
|
|||
|
|
itemSample.valveThreeOpen = param.indexOf("valveThreeOpen") > -1 ? true : false
|
|||
|
|
itemSample.valveFourOpen = param.indexOf("valveFourOpen") > -1 ? true : false
|
|||
|
|
return itemSample
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.index-container {
|
|||
|
|
background-color: #f6f3f3;
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.search {
|
|||
|
|
background-color: white;
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
height: 50px;
|
|||
|
|
display: flex;
|
|||
|
|
padding: 15px 15px;
|
|||
|
|
background: white;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list {
|
|||
|
|
height: calc(100vh - 150px - env(safe-area-inset-bottom));
|
|||
|
|
margin: 0px 10px;
|
|||
|
|
|
|||
|
|
work-user-index-item {
|
|||
|
|
background-color: #f6f3f3;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
display: flex;
|
|||
|
|
background: white;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tips {
|
|||
|
|
padding: 10px;
|
|||
|
|
line-height: 20px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: gray;
|
|||
|
|
// letter-spacing: 1px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-top: 1px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep.zp-paging-container {
|
|||
|
|
background: #f3f3f3 !important;
|
|||
|
|
}
|
|||
|
|
</style>
|