jsy-app/pages/work/land/index-detail.vue
2024-11-22 18:25:26 +08:00

286 lines
7.4 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>
<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.landArea != null ? item.landArea : "" }}</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.landConfig.enableGroup === 0">是</view>
<view v-if="item.landConfig.enableGroup === 1">否</view>
</view>
<view class="flex item">
<view style="color: #939393">启用蝶阀:</view>
<view v-if="item.landConfig.enableButterflyValve === 0">启用</view>
<view v-if="item.landConfig.enableButterflyValve === 1">禁用</view>
</view>
<view class="flex item">
<view style="color: #939393">启用批量控制:</view>
<view v-if="item.landConfig.enableBatchControl === 0">是</view>
<view v-if="item.landConfig.enableBatchControl === 1">否</view>
</view>
<view class="flex item">
<view style="color: #939393">启用自动刷新:</view>
<view v-if="item.landConfig.enableAutoRefresh === 0">是</view>
<view v-if="item.landConfig.enableAutoRefresh === 1">否</view>
</view>
<view class="flex item">
<view style="color: #939393">所属公司:</view>
<view v-if="item.companyGroup && item.companyGroup.companyFullName">
{{item.companyGroup.companyFullName}}
</view>
</view>
</view>
</view>
<view class="charge">
<view class="flex item charge-item">
<view style="color: #939393">负责人:</view>
<view>{{ item.user.userName }}</view>
</view>
<view class="flex item charge-item">
<view style="color: #939393">手机号码:</view>
<view v-if="item.user && item.user.mobilePhone">{{ item.user.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>
</template>
<script>
import plugin from "@/plugins"
import store from "@/store"
export default {
data() {
return {
windowHeight: null,
item: {},
soilType: [],
waterSourceType: [],
paging: null,
form: null,
treeList: [],
query: {
companyId: null,
landName: null
},
selectCompanyObj: {}
}
},
created() {
this.windowHeight = uni.getSystemInfoSync().windowHeight;
},
onLoad(options) {
this.item = JSON.parse(decodeURIComponent(options.item));
this.getDictList("custom_soil_type");
this.getDictList("custom_water_source_type");
this.getLandInfo();
},
methods: {
getDictList(type) {
store
.dispatch("getDictList", type)
.then(res => {
const obj = res.data.reduce((accumulator, current) => {
accumulator[current.dictValue] = current;
return accumulator;
}, {});
if (type == "custom_soil_type") {
this.soilType = obj
}
if (type == "custom_water_source_type") {
this.waterSourceType = obj
}
})
.catch(error => {
plugin.modal.msgError(error)
})
.finally(() => {
plugin.modal.closeLoading()
})
},
getLandInfo() {
store
.dispatch("getLandInfo", this.item.id)
.then(res => {
if (res.data != null) {
this.item = res.data;
}
})
.catch(error => {
plugin.modal.msgError(error)
})
.finally(() => {
plugin.modal.closeLoading()
})
},
getDictName(type, value) {
const that = this;
let text = "";
if (value) {
if (type == 1) {
if (that.soilType[String(type)] && that.soilType[String(type)].dictLabel) {
text = that.soilType[String(type)].dictLabel
}
}
if (type == 2) {
value = value.split(',');
value.forEach(item => {
if (text == "") {
if (that.waterSourceType[String(item)] && that.waterSourceType[String(item)]
.dictLabel) {
text = that.waterSourceType[String(item)].dictLabel
}
} else {
if (that.waterSourceType[String(item)] && that.waterSourceType[String(item)]
.dictLabel) {
text = text + "," + that.waterSourceType[String(item)].dictLabel;
}
}
});
}
}
return text;
},
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
})
}
}
}
</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>