572 lines
16 KiB
Vue
572 lines
16 KiB
Vue
<template>
|
||
<view class="item-container" :style="{ height: `${windowHeight}px` }" @touchmove.stop.prevent="() => {}">
|
||
<u-gap height="10" bgColor="#F3F3F3"></u-gap>
|
||
<view class="info">
|
||
<view class="title">
|
||
<view class="flex">
|
||
<view style="font-size: 16px; font-weight: bold">地块编号：</view>
|
||
<view style="font-size: 16px; margin-right: 10px">{{ item.landNum }}</view>
|
||
<u-tag :text="item.status == 0 ? '启用' : '禁用'" :type="item.status == 0 ? 'success' : 'error'"
|
||
size="mini" plain plainFill></u-tag>
|
||
</view>
|
||
<view class="flex">
|
||
<view class="flex" style="margin-right: 15px" v-hasPermi="['land:land:edit']">
|
||
<u-icon name="../../../static/images/work/user/user-index-edit-icon.png"></u-icon>
|
||
<view style="font-size: 12px; color: #009933; margin-left: 5px" @click="onEditClick">编辑</view>
|
||
</view>
|
||
<!-- <view class="flex" v-hasPermi="['land:land:remove']">
|
||
<u-icon name="../../../static/images/work/user/user-index-del-icon.png"></u-icon>
|
||
<view style="font-size: 12px; color: #009933; margin-left: 5px" @click="onDelClick">删除</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="flex item">
|
||
<view style="color: #939393">地块名称：</view>
|
||
<view>{{ item.landName }}</view>
|
||
</view>
|
||
<view class="flex item">
|
||
<view style="color: #939393">地块地址：</view>
|
||
<view>{{ item.landAddress || "-" }}</view>
|
||
</view>
|
||
<view class="flex item">
|
||
<view style="color: #939393">地块面积：</view>
|
||
<view>{{ item.landIcon != null ? item.landIcon : "" }}</view>
|
||
</view>
|
||
<view class="flex item">
|
||
<view style="color: #939393">土壤类型：</view>
|
||
<view>{{ getDictName(1, item.soilType) }}</view>
|
||
</view>
|
||
<view class="flex item">
|
||
<view style="color: #939393">水源类型：</view>
|
||
<view>{{ getDictName(2, item.waterSourceType) }}</view>
|
||
</view>
|
||
<view class="flex item">
|
||
<view style="color: #939393">是否分组：</view>
|
||
<view v-if="item.landGroupFlag === 0">是</view>
|
||
<view v-if="item.landGroupFlag === 1">否</view>
|
||
</view>
|
||
<view class="flex item">
|
||
<view style="color: #939393">启用蝶阀：</view>
|
||
<view v-if="item.enableFlapValve === 0">启用</view>
|
||
<view v-if="item.enableFlapValve === 1">禁用</view>
|
||
</view>
|
||
<view class="flex item">
|
||
<view style="color: #939393">启用批量控制：</view>
|
||
<view v-if="item.landManualOperation === 0">是</view>
|
||
<view v-if="item.landManualOperation === 1">否</view>
|
||
</view>
|
||
<view class="flex item">
|
||
<view style="color: #939393">所属公司：</view>
|
||
<view>{{ item.companyName }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="charge">
|
||
<view class="flex item charge-item">
|
||
<view style="color: #939393">负责人：</view>
|
||
<view>{{ item.userName }}</view>
|
||
</view>
|
||
<view class="flex item charge-item">
|
||
<view style="color: #939393">手机号码：</view>
|
||
<view>{{ item.mobilePhone }}</view>
|
||
</view>
|
||
<view class="call">
|
||
<u--text text="打电话" color="#009933" iconStyle="margin-right:5px"
|
||
prefixIcon="../../../static/images/work/user/user-index-phone-icon.png"
|
||
@click="onClickPhone(item.mobilePhone)"></u--text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="buttons">
|
||
<u-transition mode="fade-up" :show="showMoreButtons">
|
||
<view class="row1">
|
||
<view v-hasPermi="['land:valve:position']" @click="onLocationClick">
|
||
<u--image src="../../../static/images/work/ground/index/10 (1).png" width="40px"
|
||
height="40px"></u--image>
|
||
<view class="font">定点</view>
|
||
</view>
|
||
<view v-hasPermi="['land:valve:list']" @click="onSleepClick(item)">
|
||
<u--image src="../../../static/images/work/ground/index/sleep.png" width="40px"
|
||
height="40px"></u--image>
|
||
<view class="font">休眠</view>
|
||
</view>
|
||
<view v-hasPermi="['land:valve:batchunbinding']" @click="onUnBindingClick">
|
||
<u--image src="../../../static/images/work/ground/index/10 (2).png" width="40px"
|
||
height="40px"></u--image>
|
||
<view class="font">解绑</view>
|
||
</view>
|
||
<view v-hasPermi="['irrigate:task']" @click="onUnTaskClick(item.id, item.landName)">
|
||
<u--image src="../../../static/images/work/ground/index/task.png" width="40px"
|
||
height="40px"></u--image>
|
||
<view class="font">任务</view>
|
||
</view>
|
||
</view>
|
||
</u-transition>
|
||
<view class="row2">
|
||
<view v-hasPermi="['land:manager:list']" @click="onManageClick(item.id)">
|
||
<u--image src="../../../static/images/work/ground/index/10 (3).png" width="40px"
|
||
height="40px"></u--image>
|
||
<view class="font">管理人员</view>
|
||
</view>
|
||
<view v-hasPermi="['land:station:list']" @click="onBaseClick(item.id, item.landNum)">
|
||
<u--image src="../../../static/images/work/ground/index/10 (5).png" width="40px"
|
||
height="40px"></u--image>
|
||
<view class="font">基站</view>
|
||
</view>
|
||
<view v-hasPermi="['land:waterOutlet:list']"
|
||
@click="onOutClick(item.id, item.landGroupFlag, item.enableFlapValve)">
|
||
<u--image src="../../../static/images/work/ground/index/10 (6).png" width="40px"
|
||
height="40px"></u--image>
|
||
<view class="font">出水口</view>
|
||
</view>
|
||
<view v-hasPermi="['land:valve:list']" @click="onValveClick(item.id, item.landNum)">
|
||
<u--image src="../../../static/images/work/ground/index/10 (4).png" width="40px"
|
||
height="40px"></u--image>
|
||
<view class="font">阀门</view>
|
||
</view>
|
||
<view @click="onLoadMoreButton">
|
||
<u--image src="../../../static/images/work/ground/index/down.png" width="40px" height="40px"
|
||
v-show="showMoreButtons == true"></u--image>
|
||
<u--image src="../../../static/images/work/ground/index/up.png" width="40px" height="40px"
|
||
v-show="showMoreButtons == false"></u--image>
|
||
<view class="font">更多</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<u-action-sheet :show="showValveActions" :actions="addValveOptions" @close="showValveActions = false"
|
||
@select="onValveActionSelect" />
|
||
<u-modal :title="scanAddStationDevice ? '确认阀门' : '手动添加'" :show="showModal" showCancelButton buttonReverse
|
||
height="300px" @confirm="confirmBindingValve" @cancel="() => (showModal = false)">
|
||
<view class="slot-content">
|
||
<u--form labelPosition="left" :model="bingdingData" :rules="rules" ref="form">
|
||
<u-form-item label="编码" prop="privateSeal" labelWidth="100px" required>
|
||
<u--input v-model="bingdingData.privateSeal" placeholder="请输入设备编号"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="定点" prop="location" labelWidth="100px">
|
||
<u-button :loading="locationLoading" @click="onSetPositionClick" type="success"
|
||
:text="locationText" style="margin: 10px 10px"></u-button>
|
||
</u-form-item>
|
||
</u--form>
|
||
<view v-if="scanAddStationDevice">确认添加编码为:{{ scanCode }}的阀门吗?</view>
|
||
</view>
|
||
</u-modal>
|
||
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import {
|
||
onShow,
|
||
onLoad,
|
||
onReady
|
||
} from "@dcloudio/uni-app"
|
||
import {
|
||
ref
|
||
} from "vue"
|
||
import plugin from "@/plugins"
|
||
import store from "@/store"
|
||
const windowHeight = ref(uni.getSystemInfoSync().windowHeight)
|
||
const showValveActions = ref(false)
|
||
const addValveOptions = ref([{
|
||
name: "扫一扫",
|
||
id: 1
|
||
},
|
||
{
|
||
name: "手动输入编码",
|
||
id: 2
|
||
}
|
||
])
|
||
const scanAddStationDevice = ref(false)
|
||
const showModal = ref(false)
|
||
const bingdingData = ref({
|
||
privateSeal: "",
|
||
longitude: 0,
|
||
latitude: 0
|
||
})
|
||
const rules = ref({
|
||
privateSeal: {
|
||
type: "string",
|
||
required: true,
|
||
message: "请填写编码",
|
||
trigger: ["blur", "change"]
|
||
},
|
||
location: {
|
||
type: "string",
|
||
required: false,
|
||
message: "请选择定位",
|
||
trigger: ["change"]
|
||
}
|
||
})
|
||
const item = ref({})
|
||
const locationText = ref("定点")
|
||
const location = ref({})
|
||
const locationLoading = ref(false)
|
||
const form = ref(null)
|
||
const showMoreButtons = ref(false)
|
||
// 短信验证组件实例对象
|
||
const sms = ref(null)
|
||
// 向短信验证组件传值
|
||
const info = ref({
|
||
phoneNumber: undefined,
|
||
taskId: undefined,
|
||
show: false
|
||
})
|
||
// 监听事件传过来的值
|
||
onLoad(data => {
|
||
item.value = JSON.parse(decodeURIComponent(data.item))
|
||
getDictList("custom_soil_type")
|
||
getDictList("custom_water_source_type")
|
||
})
|
||
//网络查询数据
|
||
onShow(data => {
|
||
getLandInfo();
|
||
})
|
||
|
||
const soilType = ref([])
|
||
const waterSourceType = ref([])
|
||
//获取数据字典
|
||
async function getDictList(type) {
|
||
store
|
||
.dispatch("getDictList", type)
|
||
.then(res => {
|
||
// console.error("res:", res);
|
||
const obj = res.data.reduce((accumulator, current) => {
|
||
accumulator[current.dictValue] = current;
|
||
return accumulator;
|
||
}, {});
|
||
if (type == "custom_soil_type") {
|
||
soilType.value = obj
|
||
}
|
||
if (type == "custom_water_source_type") {
|
||
waterSourceType.value = obj
|
||
}
|
||
if (soilType.value.length && waterSourceType.value.length) {
|
||
getLandInfo();
|
||
}
|
||
})
|
||
.catch(error => {
|
||
plugin.modal.msgError(error)
|
||
})
|
||
.finally(() => {
|
||
plugin.modal.closeLoading()
|
||
})
|
||
}
|
||
//获取数据字典中的name
|
||
function getDictName(type, value) {
|
||
const that = this;
|
||
let text = "";
|
||
if (value) {
|
||
if (type == 1) {
|
||
text = soilType.value[String(type)].dictLabel
|
||
}
|
||
if (type == 2) {
|
||
value = value.split(',');
|
||
value.forEach(item => {
|
||
if (text == "") {
|
||
text = waterSourceType.value[String(item)].dictLabel
|
||
} else {
|
||
text = text + "," + waterSourceType.value[String(item)].dictLabel;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
return text;
|
||
}
|
||
//查询地块信息
|
||
function getLandInfo() {
|
||
store
|
||
.dispatch("getLandInfo", item.value.id)
|
||
.then(res => {
|
||
if (res.data != null) {
|
||
// console.error("res:", res.data);
|
||
item.value = res.data;
|
||
//list.value = res.data
|
||
}
|
||
})
|
||
.catch(error => {
|
||
plugin.modal.msgError(error)
|
||
})
|
||
.finally(() => {
|
||
plugin.modal.closeLoading()
|
||
})
|
||
}
|
||
|
||
function onEditClick() {
|
||
plugin.tab.navigateTo("/pages/work/ground/create-new?item=" + encodeURIComponent(JSON.stringify(item.value)))
|
||
}
|
||
|
||
function onDelClick() {
|
||
plugin.modal.confirm("确定删除该地块吗?").then(() => {
|
||
store
|
||
.dispatch("onDeleteGround", item.value.id)
|
||
.then(res => {
|
||
plugin.modal.msgSuccess("删除成功!")
|
||
plugin.tab.navigateBack()
|
||
})
|
||
.catch(error => {
|
||
plugin.modal.msgError(error)
|
||
})
|
||
})
|
||
}
|
||
|
||
function onOutClick(id, landGroupFlag, enableFlapValve) {
|
||
plugin.tab.navigateTo(
|
||
`/pages/work/ground/out-water/index?landId=${id}&groupFlag=${landGroupFlag}&enableFlapValve=${enableFlapValve}`
|
||
)
|
||
}
|
||
|
||
function onBaseClick(id, num) {
|
||
plugin.tab.navigateTo(`/pages/work/ground/stationDevice/index?landId=${id}&landNum=${num}`)
|
||
}
|
||
|
||
function onValveClick(id, num) {
|
||
plugin.tab.navigateTo(`/pages/work/ground/valve/index?landId=${id}&landNum=${num}`)
|
||
}
|
||
|
||
function onManageClick(id) {
|
||
plugin.tab.navigateTo(`/pages/work/ground/manager/index?landId=${id}&companyId=${item.value.companyId}`)
|
||
}
|
||
|
||
function onUnTaskClick(id, name) {
|
||
plugin.tab.navigateTo(`/pages/work/ground/task/index?landId=${id}&landName=${name}`)
|
||
}
|
||
|
||
//当点击定位之后
|
||
function onLocationClick() {
|
||
showValveActions.value = true
|
||
}
|
||
//当点击扫一扫之后
|
||
function onValveActionSelect(action) {
|
||
if (action.id == 1) {
|
||
//扫一扫
|
||
// 允许从相机和相册扫码
|
||
var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
|
||
mpaasScanModule.mpaasScan({
|
||
// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
|
||
'scanType': ['qrCode', 'barCode'],
|
||
// 是否隐藏相册，默认false不隐藏
|
||
'hideAlbum': false
|
||
},
|
||
(ret) => {
|
||
if (ret.resp_code == 1000) {
|
||
bingdingData.value.privateSeal = ret.resp_result
|
||
showModal.value = true
|
||
}
|
||
})
|
||
} else {
|
||
//手动添加
|
||
showModal.value = true
|
||
}
|
||
}
|
||
//绑定萌态框点击确定之后
|
||
function confirmBindingValve() {
|
||
if (locationLoading.value) {
|
||
plugin.modal.msgError("获取位置中请勿提交!")
|
||
return
|
||
}
|
||
if (JSON.stringify(location.value) == "{}") {
|
||
plugin.modal.msgError("获取位置失败请重新获取!")
|
||
return
|
||
}
|
||
form.value.validate().then(res => {
|
||
showModal.value = false
|
||
//提交绑定数据
|
||
let param = {
|
||
privateSeal: bingdingData.value.privateSeal,
|
||
longitude: location.value.longitude,
|
||
latitude: location.value.latitude
|
||
}
|
||
store
|
||
.dispatch("onSetValvePosition", param)
|
||
.then(res => {
|
||
plugin.modal.msgSuccess("修改成功!")
|
||
})
|
||
.catch(error => {
|
||
plugin.modal.msgError(error)
|
||
})
|
||
})
|
||
}
|
||
//当点击田间定点后
|
||
function onSetPositionClick() {
|
||
|
||
}
|
||
//当点击更多图标后
|
||
function onLoadMoreButton() {
|
||
showMoreButtons.value = !showMoreButtons.value
|
||
}
|
||
|
||
//当点击打电话
|
||
function onClickPhone(phone) {
|
||
plugin.modal.confirm("是否拨打电话?").then(res => {
|
||
//#ifdef APP-PLUS
|
||
plus.device.dial(phone, true)
|
||
//#endif
|
||
//#ifdef MP-WEIXIN
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone,
|
||
fail: res => {
|
||
console.log(res)
|
||
},
|
||
success: res => {
|
||
console.log("success" + res)
|
||
}
|
||
})
|
||
//#endif
|
||
})
|
||
}
|
||
//地块阀门休眠命令发送
|
||
function onSleepClick(item) {
|
||
plugin.modal.confirm("是否休眠所有阀门?").then(res => {
|
||
store
|
||
.dispatch("sleepValves", item)
|
||
.then(res => {
|
||
plugin.modal.msgSuccess("发送成功!")
|
||
})
|
||
.catch(error => {
|
||
plugin.modal.msgError(error)
|
||
})
|
||
})
|
||
}
|
||
|
||
//解绑阀门
|
||
function onUnBindingClick() {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: `确定解除绑定地块所有阀门吗?`,
|
||
// cancelText:"取消",
|
||
// confirmText: "确定",
|
||
success(res) {
|
||
if (res.confirm) {
|
||
info.value = {
|
||
phoneNumber: item.value.mobilePhone,
|
||
taskId: item.value.id,
|
||
show: true
|
||
}
|
||
sms.value.open();
|
||
}
|
||
}
|
||
})
|
||
// plugin.modal.confirm("确定解除绑定地块所有阀门吗?").then(() => {})
|
||
}
|
||
|
||
function missionAbort(data) {
|
||
store
|
||
.dispatch("onUnBindingAllValve", {
|
||
id: data.taskId,
|
||
code: data.code,
|
||
uuid: data.uuid,
|
||
})
|
||
.then(res => {
|
||
sms.value.cancel();
|
||
plugin.modal.msgSuccess("解绑成功!")
|
||
})
|
||
.catch(error => {
|
||
sms.value.cancel();
|
||
plugin.modal.msgError(error)
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.item-container {
|
||
background: #f3f3f3;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.item {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.info {
|
||
background: white;
|
||
margin: 10px 10px;
|
||
padding: 10px;
|
||
border-radius: 10px;
|
||
box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.05);
|
||
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 10px 10px;
|
||
}
|
||
|
||
.info-item {
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
|
||
.charge {
|
||
background: white;
|
||
margin: 10px 10px;
|
||
padding: 20px 10px;
|
||
border-radius: 10px;
|
||
box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.05);
|
||
position: relative;
|
||
|
||
.charge-item {
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.call {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
}
|
||
}
|
||
|
||
.buttons {
|
||
background: white;
|
||
margin: 30px 20px;
|
||
padding: 10px 0;
|
||
border-radius: 10px;
|
||
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
|
||
position: absolute;
|
||
width: calc(100% - 40px);
|
||
bottom: 0%;
|
||
transition: all 0.1s;
|
||
box-sizing: border-box;
|
||
|
||
.row1 {
|
||
margin-bottom: 20px;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&>view {
|
||
width: 25%;
|
||
white-space: nowrap;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.row2 {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&>view {
|
||
width: 25%;
|
||
white-space: nowrap;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.font {
|
||
margin-top: 5px;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
}
|
||
</style> |