添加参数修改，设备详情

Liuyi

2024-11-29 8265412eef286cc6027c8ec6085d6b059b7ab457

 pagesAdmin/adminPlatform/facilityDetail.vue

@@ -1,13 +1,282 @@
<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>
      <navbar title='设备详情'></navbar>
      设备详情
   <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}}&nbsp;</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>