<script setup>
|
import{ onLoad } from '@dcloudio/uni-app'
|
import{ ref,onMounted } from 'vue'
|
import{ getFacilityApi,closeFacilityApi,openFacilityApi } from '../../api/index.js'
|
const facilityList = ref([])
|
const facilityControl = ref({
|
saleOpen:false,
|
productionOpen:false,
|
temperatureOpen:false,
|
totalOpen:false,
|
})
|
let facilityCode
|
let facilityOnLine
|
async function getFalicityDetail(){
|
await getFacilityApi(facilityId).then((res) =>{
|
if(res.code == 200){
|
facilityCode = res.data.facilityCode
|
facilityOnLine = res.data.onLineState
|
facilityList.value = []
|
facilityList.value.push({name:'设备编号:',value:res.data.facilityCode})
|
facilityList.value.push({name:'设备名称:',value:res.data.facilityName})
|
facilityList.value.push({name:'在线状态:',value:res.data.onLineState == 1 ? '在线' : (res.data.onLineState == 0 ? '离线' : '')})
|
facilityList.value.push({name:'设备供应商:',value:res.data.supplier})
|
facilityList.value.push({name:'安装日期:',value:res.data.installDate})
|
|
facilityControl.value.saleOpen = res.data.saleOpen == 1 ? true : false
|
facilityControl.value.productionOpen = res.data.productionOpen == 1 ? true : false
|
facilityControl.value.temperatureOpen = res.data.temperatureOpen == 1 ? true : false
|
}
|
})
|
}
|
function navTo(){
|
uni.navigateTo({
|
url:`/pagesAdmin/adminPlatform/params?id=${facilityId}`
|
})
|
}
|
//设备开关操作相关
|
//操作类型(售水开关:01开 02关,制水开关:03开 04关，温控开关:05开 06关，设备开关机:07开 08关-设备开关机代表设备完全开关机，相当于售水、制水、温控全开或全关)
|
async function handelControl(status,name){
|
if(facilityOnLine == 0){
|
uni.showToast({
|
title:'离线，无法操作',
|
icon:'none'
|
})
|
return
|
}
|
let textInfo
|
if(name == 'totalOnOff'){
|
textInfo = status === false ? '确认关闭设备全部状态？':'确认开启设备全部状态？'
|
}else{
|
textInfo = status === true ? '确认关闭状态？':'确认开启状态？'
|
}
|
|
uni.showModal({
|
title:'提示',
|
content:textInfo,
|
success:(res) =>{
|
if(res.confirm){
|
|
async function handelOpen(setStatus){
|
await openFacilityApi({data:setStatus,sn:facilityCode}).then((res) =>{
|
if(res.code == 200){
|
setTimeout(async() => {
|
await getFalicityDetail()
|
}, 4000);
|
uni.showToast({
|
title:'成功！三秒刷新'
|
})
|
}else{
|
uni.showToast({
|
title:'操作失败！',
|
icon:'none'
|
|
})
|
}
|
})
|
}
|
|
async function handelClose(setStatus){
|
await closeFacilityApi({data:setStatus,sn:facilityCode}).then((res) =>{
|
if(res.code == 200){
|
setTimeout(async() => {
|
await getFalicityDetail()
|
}, 4000);
|
uni.showToast({
|
title:'成功！三秒刷新'
|
})
|
}else{
|
uni.showToast({
|
title:'操作失败！',
|
icon:'none'
|
})
|
}
|
})
|
}
|
|
switch(name){
|
case 'saleOpen':
|
status == true ? handelClose('02') : handelOpen('01');
|
break;
|
case 'productionOpen':
|
status == true ? handelClose('04') : handelOpen('03');
|
break;
|
case 'temperatureOpen':
|
status == true ? handelClose('06') : handelOpen('05');
|
break;
|
case 'totalOnOff':
|
status == true ? handelOpen('07') : handelClose('08');
|
break;
|
}
|
}
|
}
|
})
|
}
|
let facilityId
|
onLoad(async(option) =>{
|
console.log(14,option)
|
facilityId = option.id
|
await getFalicityDetail(option.id)
|
})
|
|
</script>
|
<template>
|
<view class="container">
|
<navbar title = '设备详情'></navbar>
|
<view class="content">
|
<view class="detail-box">
|
<view class="title">设备详情</view>
|
<view class="detail">
|
<view class="info">
|
<view class="item" v-for="(item,index) in facilityList" :key="index">
|
<view class="item-text">{{item.name}} </view>
|
<view class="item-value">{{item.value}}</view>
|
</view>
|
<view @click="navTo" class="info-params"><view class="params">设备参数设置</view></view>
|
</view>
|
<view class="control">
|
<view class="switch-item">
|
<text class="switch-text">售水开关</text>
|
<view class="switch-icon" @click="handelControl(facilityControl.saleOpen,'saleOpen')">
|
<image class="icon-on-off" v-if="facilityControl.saleOpen" src="../../static/images/maintain/switch-on.png"></image>
|
<image class="icon-on-off" v-else src="../../static/images/maintain/switch-off.png"></image>
|
</view>
|
</view>
|
<view class="switch-item">
|
<text class="switch-text">制水开关</text>
|
<view class="switch-icon" @click="handelControl(facilityControl.productionOpen,'productionOpen')">
|
<image class="icon-on-off" v-if="facilityControl.productionOpen" src="../../static/images/maintain/switch-on.png"></image>
|
<image class="icon-on-off" v-else src="../../static/images/maintain/switch-off.png"></image>
|
</view>
|
</view>
|
<view class="switch-item">
|
<text class="switch-text">温控开关</text>
|
<view class="switch-icon" @click="handelControl(facilityControl.temperatureOpen,'temperatureOpen')">
|
<image class="icon-on-off" v-if="facilityControl.temperatureOpen" src="../../static/images/maintain/switch-on.png"></image>
|
<image class="icon-on-off" v-else src="../../static/images/maintain/switch-off.png"></image>
|
</view>
|
</view>
|
<view class="switch-item">
|
<text class="switch-text">总开开关</text>
|
<view class="total-control">
|
<view class="control-btn" @click="handelControl(true,'totalOnOff')">总开</view>
|
<view class="control-btn" @click="handelControl(false,'totalOnOff')">总关</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<style lang="scss" scoped>
|
.container{
|
width:100%;
|
box-sizing: border-box;
|
.content{
|
height:calc(100vh - 176rpx);
|
background: linear-gradient(to bottom,#8BC1FC 0%,#D2F2FE 30%,#D2F2FE 100%);
|
padding:60rpx 40rpx 100rpx;
|
box-sizing: border-box;
|
.detail-box{
|
width:100%;
|
height:1100rpx;
|
background:rgba(255,255,255,0.7);
|
border-radius:5rpx;
|
padding:40rpx;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.title{
|
color: #575858;
|
}
|
.detail{
|
width:100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.info{
|
width:100%;
|
display: flex;
|
flex-direction: column;
|
.info-params{
|
width:100%;
|
display: flex;
|
.params{
|
margin-top:30rpx;
|
color: #4571c3;
|
width:220rpx;
|
height:60rpx;
|
border-radius:15rpx;
|
// border:solid 1rpx #678cc3;
|
box-shadow:0 0 6rpx 1rpx rgba(143, 182, 255, 0.3) inset;
|
text-align: center;
|
line-height:60rpx;
|
font-size:30rpx;
|
background:rgba(126, 171, 255, 0.2);
|
}
|
}
|
.item{
|
width:100%;
|
display: flex;
|
flex-wrap: nowrap;
|
margin-top:30rpx;
|
border-bottom:solid 1rpx #dbe7e8;
|
padding-bottom:10rpx;
|
.item-text{
|
color: #575858;
|
}
|
.item-value{
|
color: #4571c3;
|
}
|
}
|
}
|
.control{
|
height:400rpx;
|
width:100%;
|
display: flex;
|
flex-direction:column;
|
justify-content:space-evenly;
|
align-items: flex-start;
|
margin-top:20rpx;
|
.switch-item{
|
width:100%;
|
border-bottom:solid 1rpx #dbe7e8;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.switch-text{
|
color: #697fb3;
|
font-weight:600;
|
}
|
.switch-icon{
|
.icon-on-off{
|
width:80rpx;
|
height:80rpx;
|
}
|
}
|
.total-control{
|
height: 80rpx;
|
display: flex;
|
align-items: center;
|
.control-btn{
|
width:110rpx;
|
height:50rpx;
|
background: #409eff;
|
border-radius:10rpx;
|
text-align: center;
|
line-height: 50rpx;
|
margin-left:20rpx;
|
color:#fff;
|
font-size:30rpx;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
