tianmucloudmobile/pages/device/detail.vue

<template>
  <view class="content"  >
    <view class="header" :style='"background-image:url("+imgUrl+"/detail/bg.png);background-repeat: no-repeat;background-size: 100% 200%;"'>

      <view class="status_info">
        <view class="status_detail">
          <view class="status_text">{{ getStatusText() }}</view>
          <view v-if="deviceInfo.status == 3" class="online_text online">·在线</view>
          <view v-if="deviceInfo.status == 4" class="online_text">·离线</view>
        </view>
        <view class="device_info">机器编号: {{deviceInfo.serialNumber}}</view>
      </view>
      <view style="position: absolute;right:10vw;top:12vh;z-index: 9" @click="showDrawer">
        <image :src="imgUrl+'/detail/setting2.png'" style="width: 50rpx;height: 50rpx;"/>
      </view>
      <view style="position: relative;top:15vh;width: 100%;text-align: center">

        <image :src="productImage" :style="productSize"/>
      </view>
      <view class="tabs">
        <view class="child_tab" :class="firstMachine?'':'disabled_tab'"  @click="changeTab(1,firstMachine)">
          <image :src="imgUrl+'/detail/tab.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <image class="child_img" v-if="tabActive[0]" :src="imgUrl+'/detail/jianyao_on.png'" />
          <image class="child_img" v-if="!tabActive[0]" :src="imgUrl+'/detail/jianyao_off.png'" />
          <view class="child_title" :class="tabActive[0]?'active_on':''">
           煎药机一
          </view>
        </view>


        <view class="child_tab" :class="secondMachine?'':'disabled_tab'" @click="changeTab(2,secondMachine)">
          <image :src="imgUrl+'/detail/tab.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <image class="child_img" v-if="tabActive[1]" :src="imgUrl+'/detail/jianyao_on.png'" />
          <image class="child_img" v-if="!tabActive[1]" :src="imgUrl+'/detail/jianyao_off.png'" />
          <view class="child_title" :class="isPage(2)?'active_on':''">
            煎药机二
          </view>
        </view>

        <view class="child_tab" :class="thirdMachine?'':'disabled_tab'" @click="changeTab(3,thirdMachine)">
          <image :src="imgUrl+'/detail/tab.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <image class="child_img" v-if="tabActive[2]" :src="imgUrl+'/detail/jianyao_on.png'" />
          <image class="child_img" v-if="!tabActive[2]" :src="imgUrl+'/detail/jianyao_off.png'" />
          <view class="child_title" :class="tabActive[2]?'active_on':''">
            煎药机三
          </view>
        </view>


        <view class="child_tab" :class="forthMachine?'':'disabled_tab'" @click="changeTab(4,forthMachine)">
          <image :src="imgUrl+'/detail/tab.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <image class="child_img" v-if="firstTab" :src="imgUrl+'/detail/baozhuang_off.png'" />
          <image class="child_img" v-if="!firstTab" :src="imgUrl+'/detail/baozhuang_on.png'" />
          <view class="child_title" :class="firstTab?'':'active_on'">
            包装机
          </view>
        </view>

      </view>

      <view class="control_area" v-if="firstTab">
        <view class="control">
          <view class="control_item">
            <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
            <view class="control_item_detail">
              <view class="control_item_left" @click="subTemperature(1)">-</view>
              <view class="control_item_center">
                <view style="position: absolute">
                  <u-input  customStyle="width:150rpx;border:0px;" disabledColor="white" @change="propChange(1)"  @focus="propFocus(1)" @confirm="propBlur(1)" @blur="propBlur(1)" v-model="temperature"></u-input>
                </view>
              </view>
              <view class="control_item_center_unit" :style="unitFixedStyle">℃</view>
              <view class="control_item_right" @click="addTemperature(1)">+</view>
            </view>
            <view class="control_item_title">
              设置温度
            </view>
          </view>

          <view class="control_item" v-if="wenhuoTimeDlgShow">
            <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
            <view class="control_item_detail">
              <view class="control_item_left" @click="subTemperatureTime(1)">-</view>
              <view class="control_item_center">
                <view style="position: absolute;z-index: 999">
                  <u-input  customStyle="width:150rpx;border:0px;z-index: 999" disabledColor="white"    v-model="temperatureTime"></u-input>
                </view>
              </view>
              <view class="control_item_center_unit" :style="unitFixedStyle">分钟</view>
              <view class="control_item_right" style="left: 74%;" @click="addTemperatureTime(1)">+</view>
            </view>
            <view class="control_item_title">
              时间设置
            </view>
          </view>

          <view class="control_item" v-if="!wenhuoTimeDlgShow">
            <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
            <view class="control_item_detail">
              <view class="control_item_left" @click="subTemperatureTime(1)">-</view>
              <view class="control_item_center">
                <view style="position: absolute">
                  <u-input  customStyle="width:150rpx;border:0px;" disabledColor="white"  @change="propChange(1)"  @focus="propFocus(2)" @confirm="propBlur(2)" @blur="propBlur(2)"   v-model="leftJianyaoTime"></u-input>
                </view>
              </view>
              <view class="control_item_center_unit" :style="unitFixedStyle">分钟</view>
              <view class="control_item_right" style="left: 74%;" @click="addTemperatureTime(1)">+</view>
            </view>
            <view class="control_item_title">
              时间设置
            </view>
          </view>

          <view class="control_item">
            <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
            <view class="control_item_detail">
              <view class="control_item_center">
                <u-input disabled customStyle="width:150rpx;border:0px;" disabledColor="white"  :value="currentTemperature"></u-input>
              </view>
              <view class="control_item_center_unit" :style="unitFixedStyle">℃</view>
            </view>
            <view class="control_item_title">
              当前温度
            </view>
          </view>

          <view class="control_item" v-if="boardType == 4">
            <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
            <view class="control_item_detail">
              <view class="control_item_center">
                <u-input disabled customStyle="width:150rpx;border:0px;" disabledColor="white"   :value="hightTemperature"></u-input>
              </view>
              <view class="control_item_center_unit" :style="unitFixedStyle">分钟</view>
            </view>
            <view class="control_item_title">
              高温时间
            </view>
          </view>

          <view class="control_item" v-if="boardType == 5">
            <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
            <view class="control_item_detail" style="">
              <view style="width: 50px;height: 150rpx;display: inline-block" >
                <image @click="setPressTurn" :src="imgUrl+'/detail/left_on.png'" v-if="pressTurn == 1" style="top:20rpx;
    left: 40rpx;width: 20px;height:15px;position: absolute;"/>

                <image @click="setPressTurn" :src="imgUrl+'/detail/left.png'" v-if="pressTurn == 0" style="top:20rpx;
    left: 40rpx;width: 20px;height:15px;position: absolute;"/>
                <view style="position: absolute;top:68rpx;left:40rpx;font-size: 12px;" :class="pressTurn == 1?'active_on':''">挤压</view>
              </view>
              <view style="display: inline-block; position: absolute;top:30rpx;width: 150rpx" v-if="pressTurn == 1"  class="roate">	<u-line-progress :percentage="turnPercent" activeColor="#50ACFF" height="6" :showText="false"></u-line-progress>
              </view>
              <view style="display: inline-block; position: absolute;top:30rpx;width: 150rpx" v-if="resetTurn == 1">	<u-line-progress :percentage="turnPercent" activeColor="#50ACFF" height="6" :showText="false"></u-line-progress>
              </view>
              <view style="display: inline-block; position: absolute;top:30rpx;width: 150rpx" v-if="resetTurn == 0 && pressTurn == 0">	<u-line-progress :percentage="turnPercent" activeColor="#50ACFF" height="6" :showText="false"></u-line-progress>
              </view>
              <view  style="width: 50px;height: 150rpx;display: inline-block">
                <image @click="setResetTurn" :src="imgUrl+'/detail/right_on.png'" v-if="resetTurn == 1" style="top:20rpx;
    right: 40rpx;width: 20px;height:15px;position: absolute;;display: inline-block;"/>

                <image @click="setResetTurn" :src="imgUrl+'/detail/right.png'"  v-if="resetTurn == 0" style="top:20rpx;
    right: 40rpx;width: 20px;height:15px;position: absolute;;display: inline-block;"/>
                <view style="position: absolute;top:68rpx;right:40rpx;font-size: 12px;" :class="resetTurn == 1?'active_on':''">复位</view>
              </view>
            </view>
            <view class="control_item_title">
              电动挤压
            </view>
          </view>


        </view>
        <view class="bottom">
          <image :src="imgUrl+'/detail/bg_large.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <view class="bottom_item" @click="decoctControlOnOffChange">
            <image v-if="decoctControlOnOffStatus" :src="imgUrl+'/detail/open_on.png'" style="width: 32%;height:32%;"/>
            <image v-if="!decoctControlOnOffStatus" :src="imgUrl+'/detail/open_off.png'" style="width: 32%;height:32%;"/>
            <view :class="decoctControlOnOffStatus?'active_on':''">开关</view>
          </view>
          <view class="bottom_item" @click="decoctControlChange">
            <image v-if="decoctControlStatus" :src="imgUrl+'/detail/jianing_on.png'" style="width: 32%;height:32%;"/>
            <image v-if="!decoctControlStatus" :src="imgUrl+'/detail/jianing_off.png'" style="width: 32%;height:32%;"/>
            <view :class="decoctControlStatus?'active_on':''">煎药</view>
          </view>
          <view class="bottom_item" @click="stopDecoctControlChange">
            <image v-if="!decoctControlStatus" :src="imgUrl+'/detail/stop_on.png'" style="width: 32%;height:32%;"/>
            <image v-if="decoctControlStatus" :src="imgUrl+'/detail/stop_off.png'" style="width: 32%;height:32%;"/>
            <view :class="!decoctControlStatus?'active_on':''">停止</view>
          </view>
          <view class="bottom_item" @click="toPlan">
            <image v-if="leftAppointmentTime>0" :src="imgUrl+'/detail/plan_on.png'" style="width: 32%;height:32%;"/>
            <image v-else :src="imgUrl+'/detail/plan_off.png'" style="width: 32%;height:32%;"/>
            <view :class="leftAppointmentTime>0?'active_on':''">预约</view>
          </view>

        </view>
      </view>

      <view class="control_area" v-if="!firstTab">
        <view class="control">
          <view class="control_item" v-if="fengbianDlgShow">
            <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
            <view class="control_item_detail">
              <view class="control_item_left" @click="subEdegTemperature(1)">-</view>
              <view class="control_item_center">
                <u-input  customStyle="width:150rpx;border:0px;background:none;" disabledColor="white"  placeholder="0"  @confirm="propBlur(3)" v-model="setEdegTemperature"></u-input>
              </view>
              <view class="control_item_center_unit" :style="unitFixedStyle">℃</view>
              <view class="control_item_right" @click="addEdegTemperature(1)">+</view>
            </view>
            <view class="control_item_title">
              设置温度
            </view>
          </view>

          <view class="control_item" v-if="!fengbianDlgShow">
            <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
            <view class="control_item_detail">
              <view class="control_item_left" @click="subEdegTemperature(1)">-</view>
              <view class="control_item_center">
                <u-input  customStyle="width:150rpx;border:0px;background:none;" disabledColor="white"  placeholder="0" @focus="propFocus(3)" @blur="propBlur(3)"  v-model="edegTemperature"></u-input>
              </view>
              <view class="control_item_center_unit" :style="unitFixedStyle">℃</view>
              <view class="control_item_right" @click="addEdegTemperature(1)">+</view>

            </view>
            <view class="control_item_title">
              <view v-if="!baozhuangFengbianSetting">
                封边温度
              </view>
              <view v-if="baozhuangFengbianSetting">
                设置温度
              </view>
            </view>
          </view>

          <view class="control_item" v-if="fengkouDlgShow">
            <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
            <view class="control_item_detail">
              <view class="control_item_left" @click="subSealingTemperature(1)">-</view>
              <view class="control_item_center">
                <u-input  customStyle="width:150rpx;border:0px;background:none;" disabledColor="white" placeholder="0" @blur="propBlur(4)" @confirm="propBlur(4)"   v-model="setSealingTemperature"></u-input>
              </view>
              <view class="control_item_center_unit" :style="unitFixedStyle">℃</view>
              <view class="control_item_right" @click="addSealingTemperature(1)">+</view>
            </view>
            <view class="control_item_title">
             设置温度
            </view>
          </view>

          <view class="control_item" v-if="!fengkouDlgShow">
            <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
            <view class="control_item_detail">
              <view class="control_item_left" @click="subSealingTemperature(1)">-</view>
              <view class="control_item_center">
                <u-input  customStyle="width:150rpx;border:0px;background:none;" disabledColor="white" placeholder="0"  @change="propChange(1)"  @focus="propFocus(4)" @blur="propBlur(4)"    v-model="sealingTemperature"></u-input>
              </view>
              <view class="control_item_center_unit" :style="unitFixedStyle">℃</view>
              <view class="control_item_right" @click="addSealingTemperature(1)">+</view>

            </view>
            <view class="control_item_title">
              <view v-if="!baozhuangFengkouSetting">
                封口温度
              </view>
              <view v-if="baozhuangFengkouSetting">
                设置温度
              </view>
            </view>
          </view>
          <view class="control_item">
            <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
            <view class="control_item_detail">
              <view class="control_item_left" @click="subPackageVolume()">-</view>
              <view class="control_item_center">
                <view style="position: absolute">
                  <u-input  customStyle="width:150rpx;border:0px;" disabledColor="white"   @focus="propFocus(5)" @confirm="propBlur(5)" @blur="propBlur(5)" v-model="packageVolume"></u-input>
                </view>
              </view>
              <view class="control_item_center_unit" :style="unitFixedStyle">ml</view>
              <view class="control_item_right" @click="addPackageVolume()">+</view>
            </view>
            <view class="control_item_title">
              包装容量
            </view>
          </view>
          <view class="control_item">
            <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
            <view class="control_item_detail">
              <view class="control_item_left" @click="subPackageNumber()">-</view>
              <view class="control_item_center">
                <view style="position: absolute">
                  <u-input  customStyle="width:150rpx;border:0px;" disabledColor="white"    @focus="propFocus(6)" @confirm="propBlur(6)" @blur="propBlur(6)" v-model="packageNumber"></u-input>
                </view>
              </view>
              <view class="control_item_center_unit" :style="unitFixedStyle">袋</view>
              <view class="control_item_right" @click="addPackageNumber()">+</view>
            </view>
            <view class="control_item_title">
              包装数量
            </view>
          </view>




        </view>
        <view class="bottom">
          <image :src="imgUrl+'/detail/bg_large.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <view class="bottom_item" @click="packageControlOnOffChange">
            <image v-if="packageControlOnOffStatus" :src="imgUrl+'/detail/open_on.png'" style="width: 32%;height:32%;"/>
            <image v-if="!packageControlOnOffStatus" :src="imgUrl+'/detail/open_off.png'" style="width: 32%;height:32%;"/>
            <view :class="packageControlOnOffStatus?'active_on':''">开关</view>
          </view>
          <view class="bottom_item" @click="turnChange(1)">
            <image v-if="qitingTurn" :src="imgUrl+'/detail/open_on.png'" style="width: 32%;height:32%;"/>
            <image v-if="!qitingTurn" :src="imgUrl+'/detail/open_off.png'" style="width: 32%;height:32%;"/>
            <view :class="qitingTurn?'active_on':''">启停</view>
          </view>
          <view class="bottom_item" @click="turnChange(2)">
            <image v-if="baozhuangTurn" :src="imgUrl+'/detail/bao_on.png'" style="width: 32%;height:32%;"/>
            <image v-if="!baozhuangTurn" :src="imgUrl+'/detail/bao_off.png'" style="width: 32%;height:32%;"/>
            <view :class="baozhuangTurn?'active_on':''">包装</view>
          </view>
          <view class="bottom_item" @click="turnChange(3)">
            <image v-if="qingxiTurn" :src="imgUrl+'/detail/xi_on.png'" style="width: 32%;height:32%;"/>
            <image v-if="!qingxiTurn" :src="imgUrl+'/detail/xi_off.png'" style="width: 32%;height:32%;"/>
            <view :class="qingxiTurn?'active_on':''">清洗</view>
          </view>

        </view>
      </view>
    </view>

    <u-popup :show="false" @close="closePop" mode="center" bgColor="transparent" :closeable="true">
      <view style="position: relative;width: 500rpx;height:300rpx;background: none">
        <view class="control_item" style="width: 100%" v-if="fengbianDlgShow">
          <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <view class="control_item_detail">
            <view class="control_item_left" @click="subEdegTemperature(1)">-</view>
            <view class="control_item_center">
              <u-input  customStyle="width:150rpx;border:0px;" disabledColor="white"   @change="changeEdegTemperature" v-model="setEdegTemperature"></u-input>
            </view>
            <view class="control_item_center_unit" :style="unitFixedStyle1">℃</view>
            <view class="control_item_right" @click="addEdegTemperature(1)">+</view>
          </view>
          <view class="control_item_title">
            封边温度设置
          </view>
        </view>

        <view class="control_item" style="width: 100%" v-if="fengkouDlgShow">
          <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <view class="control_item_detail">
            <view class="control_item_left" @click="subSealingTemperature(1)">-</view>
            <view class="control_item_center">
              <u-input  customStyle="width:150rpx;border:0px;" disabledColor="white"   @change="changeSealingTemperature" v-model="setSealingTemperature"></u-input>
            </view>
            <view class="control_item_center_unit" :style="unitFixedStyle1">℃</view>
            <view class="control_item_right" @click="addSealingTemperature(1)">+</view>
          </view>
          <view class="control_item_title">
            封口温度设置
          </view>
        </view>

        <view class="control_item" style="width: 100%" v-if="wenhuoTimeDlgShow">
          <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <view class="control_item_detail">
            <view class="control_item_left" @click="subTemperatureTime()">-</view>
            <view class="control_item_center">
              <u-input  customStyle="width:150rpx;border:0px;" disabledColor="white"     @change="changeTemperatureTime()" v-model="temperatureTime"></u-input>
            </view>
            <view class="control_item_center_unit" :style="unitFixedStyle1">℃</view>
            <view class="control_item_right" @click="addTemperatureTime()">+</view>
          </view>
          <view class="control_item_title">
            文火时间
          </view>
        </view>
      </view>
    </u-popup>

    <u-popup :show="planPopDlg" @close="closePlanPop" mode="center"  :closeable="true">
      <view style="position: relative;width: 400rpx;background: none;padding:40rpx;">
        <view class="control_item" style="width: 100%">
          <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <view class="control_item_detail">
            <view class="control_item_left" @click="subPlanTime(1)" style="left: 18%;">-</view>
            <view class="control_item_center">
              <view style="position: absolute">
                <u-input  customStyle="width:150rpx;border:0px;" disabledColor="white"   v-model="planTime"></u-input>
              </view>
            </view>
            <view class="control_item_center_unit" :style="unitFixedStyle">分钟</view>
            <view class="control_item_right" style="left: 80%;" @click="addPlanTime(1)">+</view>
          </view>
          <view class="control_item_title">
            预约时间
          </view>
        </view>

        <view class="control_item"  style="width: 100%">
          <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <view class="control_item_detail">
            <view class="control_item_left" @click="subTemperatureTime()"  style="left: 18%;">-</view>
            <view class="control_item_center">
              <view style="position: absolute">
                <u-input  customStyle="width:150rpx;border:0px;" disabledColor="white"   @change="changeTemperatureTime()" v-model="temperatureTime"></u-input>
              </view>
            </view>
            <view class="control_item_center_unit" :style="unitFixedStyle">分钟</view>
            <view class="control_item_right" @click="addTemperatureTime()"  style="left: 80%;">+</view>
          </view>
          <view class="control_item_title">
            时间设置
          </view>
        </view>
        <view>
          <button style="background: white;" @click="plan">确认</button>
        </view>
      </view>
    </u-popup>
<!--    预约框-->
    <u-popup :show="yuyueIngPop" @close="closeYuyueIngPop" mode="center"  :closeable="true">
      <view style="position: relative;width: 400rpx;background: none;padding:40rpx;">
        <view class="control_item" style="width: 100%">
          <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <view class="control_item_detail">
            <view class="control_item_center">
              <u-input  customStyle="width:150rpx;border:0px;padding:0px" disabledColor="white"  :value="leftAppointmentTime"></u-input>
            </view>
            <view class="control_item_center_unit" :style="unitFixedStyle">℃</view>
          </view>
          <view class="control_item_title">
            剩余时间
          </view>
        </view>
              <view>
                <button style="background: white;" @click="cancelPlan">取消</button>
              </view>
      </view>
    </u-popup>
    <u-popup :show="planIngPopDlg" @close="closePlanIngPop" mode="center"  :closeable="true">
      <view style="position: relative;width: 400rpx;background: none;padding:40rpx;">
        <view class="control_item" style="width: 100%">
          <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <view class="control_item_detail" style="width: 100%; padding: 40rpx;margin-bottom:10rpx;">
            <u-line-progress :percentage="step" activeColor="#50ACFF"></u-line-progress>
          </view>
          <view class="control_item_title" v-if="leftAppointmentTime>0">
            预约煎药中,倒计时{{leftAppointmentTime}}分钟
          </view>

          <view class="control_item_title" v-else>
            <view v-if="leftJianyaoTime>0">
              正在熬制，请稍等
            </view>
            <view v-else>
              煎药完成
            </view>
          </view>
        </view>
        <view class="control_item" style="width: 100%">
          <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <view class="control_item_detail">
            <view class="control_item_center">
              <u-input  customStyle="width:150rpx;border:0px;" disabledColor="white"  :value="currentTemperature"></u-input>
            </view>
            <view class="control_item_center_unit" :style="unitFixedStyle">℃</view>
          </view>
          <view class="control_item_title">
            当前温度
          </view>
        </view>

        <view class="control_item" style="width: 100%">
          <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <view class="control_item_detail">
            <view class="control_item_center">
              <u-input  customStyle="width:150rpx;border:0px;" disabledColor="white"   :value="leftJianyaoTime"></u-input>
            </view>
            <view class="control_item_center_unit" :style="unitFixedStyle">分钟</view>
          </view>
          <view class="control_item_title">
            文火倒计时
          </view>
        </view>
<!--        <view>-->
<!--          <button style="background: white;" @click="cancelPlan">暂停</button>-->
<!--        </view>-->
      </view>
    </u-popup>
    <uni-drawer ref="showLeft" :width="320" :maskClick="true" mode="right"  @change="change($event,'showLeft')">

      <scroll-view style="height: 88%;padding:20% 0%;" scroll-y="true">
        <view style="text-align:center">设置</view>
        <view>
          <view class="prop-item">
            <view class="prop-item-image">
              <image :src="imgUrl+'/setting/net.png'" style="width: 100%;height:100%;"/>
            </view>
            <view class="prop-item-left">网络连接</view>
            <view class="prop-item-right">
              <view v-if="deviceInfo.status == 3">
                  已连接
              </view>
              <view v-else>
                未连接
<!--                <uni-icons type="forward" size="16"></uni-icons>-->
              </view>
            </view>
          </view>
          <view class="prop-item" v-if="firstTab">
            <view class="prop-item-image">
              <image :src="imgUrl+'/setting/oper_temp.png'" style="width: 100%;height:100%;"/>
            </view>
            <view class="prop-item-left">温度校准</view>
            <view class="prop-item-right" @click="showJiaozhunProp">
              {{jiaozhunTemp}}℃<uni-icons type="forward" size="16"></uni-icons>
            </view>
          </view>
          <view class="prop-item" v-if="firstTab && boardType == 5">
            <view class="prop-item-image">
              <image :src="imgUrl+'/setting/current_icon6.png'" style="width: 100%;height:100%;"/>
            </view>
            <view class="prop-item-left">有效电流值</view>
            <view class="prop-item-right" >
              {{validCurrent}}MA
            </view>
          </view>
          <view class="prop-item" v-if="firstTab && boardType == 5">
            <view class="prop-item-image">
              <image :src="imgUrl+'/setting/current_icon5.png'" style="width: 100%;height:100%;"/>
            </view>
            <view class="prop-item-left">扭力</view>
            <view class="prop-item-right" @click="showLiuProp">
              {{turnCurrent}}MA<uni-icons type="forward" size="16"></uni-icons>
            </view>
          </view>

          <view class="prop-item"  v-if="firstTab">
            <view class="prop-item-image">
              <image :src="imgUrl+'/setting/list.png'" style="width: 100%;height:100%;"/>
            </view>
            <view class="prop-item-left">工作模式</view>
            <view class="prop-item-right" @click="showWorkPicker">
              <view v-if="workMode == 1">
                1<uni-icons type="forward" size="16"></uni-icons>
              </view>
              <view v-if="workMode == 2">
                2<uni-icons type="forward" size="16"></uni-icons>
              </view>
              <view v-if="workMode == 3">
                3<uni-icons type="forward" size="16"></uni-icons>
              </view>
            </view>
          </view>

          <view class="prop-item">
            <view class="prop-item-image">
              <image :src="imgUrl+'/setting/no.png'" style="width: 100%;height:100%;"/>
            </view>
            <view class="prop-item-left">二维码编号</view>
            <view class="prop-item-right">
              <text class="text-right">{{deviceInfo.qrcodeId==null?"未绑定":deviceInfo.qrcodeId}}</text>
            </view>
          </view>
          <view class="prop-item">
            <view class="prop-item-image">
              <image :src="imgUrl+'/setting/learn.png'" style="width: 100%;height:100%;"/>
            </view>
            <view class="prop-item-left">使用教程</view>
            <view class="prop-item-right" @click="skip(1)">
              <uni-icons type="forward" size="16"></uni-icons>
            </view>
          </view>
          <view class="prop-item">
            <view class="prop-item-image">
              <image :src="imgUrl+'/setting/video.png'" style="width: 100%;height:100%;"/>
            </view>
            <view class="prop-item-left">维修视频</view>
            <view class="prop-item-right"  @click="skip(1)">
              <uni-icons type="forward" size="16"></uni-icons>
            </view>
          </view>
          <view class="prop-item">
            <view class="prop-item-image">
              <image :src="imgUrl+'/setting/upload.png'" style="width: 100%;height:100%;"/>
            </view>
            <view class="prop-item-left">在线升级</view>
            <view class="prop-item-right" @click="getUpdateInfo">
              <uni-icons type="forward" size="16"></uni-icons>
            </view>
          </view>
          <view class="prop-item">
            <view class="prop-item-image">
              <image :src="imgUrl+'/setting/shou.png'" style="width: 100%;height:100%;"/>
            </view>
            <view class="prop-item-left">售后服务</view>
            <view class="prop-item-right"  @click="skip(2)">
              <uni-icons type="forward" size="16"></uni-icons>
            </view>
          </view>
          <view class="prop-item">
            <view class="prop-item-image">
              <image :src="imgUrl+'/setting/reset.png'" style="width: 100%;height:100%;"/>
            </view>
            <view class="prop-item-left">恢复出厂</view>
            <view class="prop-item-right" @click="reset">
              <uni-icons type="forward" size="16"></uni-icons>
            </view>
          </view>
          <view class="prop-item">
            <view class="prop-item-image">
              <image :src="imgUrl+'/setting/runinfo.png'" style="width: 100%;height:100%;"/>
            </view>
            <view class="prop-item-left">修改名称</view>
            <view class="prop-item-right" @click="modifyName">
              <uni-icons type="forward" size="16"></uni-icons>
            </view>
          </view>



        </view>


      </scroll-view>
    </uni-drawer>

    <u-popup :show="jiaozhunPopDlg" @close="closejiaozhunPop" mode="center"  :closeable="true">
      <view style="position: relative;width: 400rpx;background: none;padding:40rpx;">
        <view class="control_item" style="width: 100%">
          <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <view class="control_item_detail">
            <view class="control_item_left" @click="subJiaoZhunTemperature(1)" style="left: 18%;">-</view>
            <view class="control_item_center">
              <view style="position: absolute">
                <u-input  customStyle="width:150rpx;border:0px;" disabledColor="white"   v-model="jiaozhunTemp_temp"></u-input>

              </view>
            </view>
            <view class="control_item_center_unit" :style="unitFixedStyle">℃</view>
            <view class="control_item_right" @click="addJiaoZhunTemperature(1)"  style="left: 80%;">+</view>
          </view>
          <view class="control_item_title">
            校准温度
          </view>
        </view>
        <view>
          <button style="background: white;" @click="confirmJiaozhunTemp">确认</button>
        </view>
      </view>
    </u-popup>

    <u-popup :show="liuzhuanPopDlg" @close="closeliuzhuanPop" mode="center"  :closeable="true">
      <view style="position: relative;width: 400rpx;background: none;padding:40rpx;">
        <view class="control_item" style="width: 100%">
          <image :src="imgUrl+'/detail/bg_mid.png'" style="width: 100%;height:100%;position: absolute;top:0px;"/>
          <view class="control_item_detail">
            <view class="control_item_center">
              <view style="position: absolute">
                <u-input  customStyle="width:150rpx;border:0px;" disabledColor="white"   v-model="setTurnCurrent"></u-input>

              </view>
            </view>
            <view class="control_item_center_unit" :style="unitFixedStyle">MA</view>
          </view>
          <view class="control_item_title">
            扭力
          </view>
        </view>
        <view>
          <button style="background: white;" @click="confirmLiuzhuannCurrent">确认</button>
        </view>
      </view>
    </u-popup>
    <u-picker :show="showModelPicker" @cancel="closeModelPicker" @confirm="confirmMode" :columns="modeList" keyName="text"></u-picker>

  </view>

</template>

<script>
import { getDetail,getDeviceStatus,cacheJsonThingsModel,reportError ,getDeviceRunTime,getLatestFirmware,bingDeviceDept,editDeviceName} from '@/api/device/device.js'
import config from '@/config'
export default {
  data(){
    return {
      liuzhuanPopDlg:false,
      turnPercent:1,
      onlineStatus:false,
      modeList:[[
        {id:1,text:"1"},
        {id:2,text:"2"},
        {id:3,text:"3"},
      ]],
      productSize:"",
      productImage:"",
      showModelPicker:false,
      unitFixedStyle:"",
      unitFixedStyle1:"",
      planTime:10,
      setSealingTemperature:160,
      setEdegTemperature:160,
      sealingTemperature:0,
      edegTemperature:0,
      hightTemperature:0,
      currentTemperature:0,
      temperatureTime:1,
      temperature:0,
      packageNumber:1,
      packageVolume:50,
      firstTab:true,
      decoctControlStatus:false,
      decoctControlOnOffStatus:false,
      packageControlOnOffStatus:false,
      subDecoctTabList:[
        {name:'子煎药1'},
        {name:'子煎药2'},
        {name:'子煎药3'},
      ],
      DecoctControlStatus:false,
      PackagControlStatus:false,
      baozhuangTurn:false,
      qitingTurn:false,
      qingxiTurn:false,
      subCurrent:0,
      current:0,
      inputStyle:{height:'44rpx','fontSize':'20rpx'},
      modelKey:['PowerControl','LockControl'],
      jianyaoKeys : ["TempSetting","TimeSetting"],
      baozhuangKeys:["SetSealTemp","SetBandingTemp","PackageQuantity","PackingVolume"],
      power:{
        loading:true,
        value:0,
      },
      lock:{
        loading:true,
        value:0,
      },
      showTimeDlg:false,
      showErrDlg:null,
      errorMsg:"asdasdasdasd",
      show:null,
      value:"",
      deviceInfo:{},
      id:0,
      summary:[
      ],
      tabs:[
        {tabName:"煎药控制"},
        {tabName:"包装控制"},
      ],
      activeName:0,
      childId:0,
      oneToMul:false,
      inputProp:[],
      watchProp:[],
      columns:[],
      location:{},
      sysDept:null,
      timeobj:{alltime:0,avgtime:0},
      publishMsg:false,
      checkTimer:null,
      functions:[],
      properties:[],
      propMap:{},
      jianyaoTimer:null,
      baozhuangTimer:null,
      editing:false,
      workMode:2,
      leftAppointmentTime:0,
      leftJianyaoTime:0,
      imgUrl:"",
      popDlg:false,
      fengbianDlgShow:false,
      fengkouDlgShow:false,
      wenhuoTimeDlgShow:false,
      planPopDlg:false,
      planIngPopDlg:false,
      maxWidth:320,
      jiaozhunTemp:0,//校准温度,
      jiaozhunTemp_temp:0,//校准温度,
      jiaozhunPopDlg:false,
      step:0,
      yuyueIngPop:false,
      firmware:{},
      jianyaoPopClose:true,
      tabIndex:1,
      appid:"wxfd7b1a0e03e9b7e9",
      firstMachine:true,
      secondMachine:false,
      thirdMachine:false,
      forthMachine:true,
      deviceType:1,
      tabActive:[true,false,false],
      resetDuration:4000,
      jianyaoWenduSetting:false,
      jianyaoShijianSetting:false,
      baozhuangFengbianSetting:false,
      baozhuangFengkouSetting:false,
      baozhuangRongLiangSetting:false,
      baozhuangShuLIangSetting:false,
      tempFengkouWendu:0,
      tempFengBianWendu:0,
      boardType:4,//板子类型
      lineTimer:null,
      validCurrent:0,//有效电流值
      turnCurrent:0,//堵转电流值
      setTurnCurrent:0,
      pressTurn:0,
      resetTurn:0,
    }
  },
  onLoad: function(opt) {
    this.id = opt.id;
    // this.id = 61;
    this.connectMqtt();
    this.getDetail();
    this.imgUrl = config.imgUrl
    this.fixStyle();
    // this.fixImage();
    // console.log = function(){}
  },
  destroyed() {
    // 取消订阅主题
    this.mqttUnSubscribe(this.deviceInfo);
    clearTimeout(this.checkTimer);
  },
  watch: {
    pressTurn(newVal,oldValue) {
      let self= this;
      if(newVal == 1){
        setTimeout(function(){
          self.startProgressTimer(1);
        },200);
      }else{
        clearInterval(this.lineTimer)
        this.turnPercent = 0;
      }
    },
    resetTurn(newVal){
      let self= this;
      if(newVal == 1){
       setTimeout(function(){
         self.startProgressTimer(2);
       },200);
      }else{
        clearInterval(this.lineTimer)
        this.turnPercent = 0;
      }
    }
  },
  methods:{
    closeliuzhuanPop(){
      this.liuzhuanPopDlg = false;
    },
    confirmLiuzhuannCurrent(){
      if(this.setTurnCurrent<200 || this.setTurnCurrent>400){
        this.notifyError("扭力范围为200-400")
        return;
      }
      let arr = [];
      let pressObj = {};
      pressObj.id = "TurnCurrent";
      pressObj.shadow = this.setTurnCurrent;
      arr.push(pressObj);
      this.mqttPublish(2,this.deviceInfo,arr)
      this.closeliuzhuanPop();
    },
    setPressTurn(){
      if(!this.decoctControlOnOffStatus){
        this.notifyError("请先开机后再进行操作")
        return;
      }
      let arr = [];
      let currentPresturn = this.pressTurn;
      let pressObj = {};
      if(this.resetTurn == 1){
        this.resetTurn = 0;
      }
      if(currentPresturn == 1){//代表要关闭
        pressObj.id = "PressTurn";
        pressObj.shadow = 0;
        arr.push(pressObj);
        this.turnPercent = 0;
        this.pressTurn = 0;
      }else{//代表要开启
        pressObj.id = "PressTurn";
        pressObj.shadow = 1;
        arr.push(pressObj);
        this.pressTurn = 1;
        this.resetTurn = 0;
      }

      this.mqttPublish(2,this.deviceInfo,arr)
      this.$forceUpdate()
    },
    startProgressTimer(type){
      let self = this;
      if(self.lineTimer != null){
        clearInterval(self.lineTimer)
      }
      if(type == 1){
        self.lineTimer = setInterval(function(){
          if(self.turnPercent >=100){
            self.turnPercent = 1;
            clearInterval(self.lineTimer);
            setTimeout(function(){
              self.startProgressTimer(1);
            },500);
          }
          self.turnPercent +=5;
        },200);
      }else{
        self.lineTimer = setInterval(function(){
          if(self.turnPercent >=100){
            self.turnPercent = 1;
            clearInterval(self.lineTimer);
            setTimeout(function(){
              self.startProgressTimer(2);
            },500);
          }
          self.turnPercent +=5;
        },200);
      }
    },
    setResetTurn(){
      debugger;
      if(!this.decoctControlOnOffStatus){
        this.notifyError("请先开机后再进行操作")
        return;
      }
      if(this.pressTurn == 1){
        this.pressTurn = 0;
      }
      let arr = [];
      if(this.resetTurn == 1){
        let pressObj = {};
        pressObj.id = "ResetTurn";
        pressObj.shadow = 0;
        this.resetTurn = 0;
        this.turnPercent = 0;
        arr.push(pressObj);
      }else{
        let pressObj = {};
        pressObj.id = "ResetTurn";
        pressObj.shadow = 1;
        this.resetTurn = 1;
        this.pressTurn = 0;
        let self= this;
        arr.push(pressObj);
      }


      this.mqttPublish(2,this.deviceInfo,arr)
      this.$forceUpdate()
    },
    fixImage(heng){
      let self = this;
      wx.getSystemInfo({
        success: res => {
          const { windowWidth, windowHeight, statusBarHeight } = res;
          if(heng){
            let rate = 0.35;
            if(windowHeight<800){
              rate = 0.30;
            }
            let imgHeight = windowWidth*0.85;
            let imageWidth = windowWidth * 1;
            self.productSize = ";width:"+imageWidth+"px;height:"+imgHeight+"px;";
          }else{
            let rate = 0.35;
            if(windowHeight<800){
              rate = 0.30;
            }
            let imgHeight = windowHeight*rate;
            let imageWidth = imgHeight * 0.6;
            self.productSize = ";width:"+imageWidth+"px;height:"+imgHeight+"px;";
          }

        }
      })
    },
    propChange(type){
      // if(type == 1){

      // }
    },
    propFocus(type){
      if(type == 1){
        this.jianyaoWenduSetting = true;
      }

      if(type == 2){
        this.jianyaoShijianSetting = true;
      }
      if(type == 3){
        this.baozhuangFengbianSetting = true;
        this.tempFengBianWendu = this.edegTemperature;
        this.edegTemperature = this.setEdegTemperature;
      }
      if(type == 4){
        this.baozhuangFengkouSetting = true;
        this.tempFengkouWendu = this.sealingTemperature;
        this.sealingTemperature = this.setSealingTemperature;
      }
      if(type == 5){
        this.baozhuangRongLiangSetting = true;

      }
      if(type == 6){
        this.baozhuangShuLIangSetting = true;
      }


    },
    autoBlur(type){

    },
    propBlur(type){
      if(type == 1){
        this.jianyaoWenduSetting = false;
        this.changeTemperature();
      }
      if(type == 2){
        this.temperatureTime = this.leftJianyaoTime;
        this.changeTemperatureTime();
      }
      if(type == 3){
        this.setEdegTemperature = this.edegTemperature;
        this.changeEdegTemperature();
      }
      if(type == 4){
        this.setSealingTemperature = this.sealingTemperature;
        this.changeSealingTemperature();
      }
      if(type == 5){
        this.changePackageVolume()
      }
      if(type == 6){
        this.changePackageNumber();
      }

    },
    modifyName(){
      let self = this;
      uni.showModal({
        title: "修改设备名称",
        editable: true,
        placeholderText: "请输入设备名称",
        content: this.deviceInfo.deviceName,
        showCancel: true,
        success: function (res) {
          console.log(res);
          if(res.confirm){
            let content = res.content;
            let obj = {"deviceId":self.id,deviceName:content};
            editDeviceName(obj).then(res=>{
              if(res.code == 200){
                self.deviceInfo.deviceName = content;
                self.$modal.showToast('修改成功')
              }else{
                self.$modal.showToast('修改失败，请稍后再试')
              }
            });
          }
        },
        fail: function (res) {
          console.log(res);
        }
      })
    },
    showWorkPicker(){
      let self = this;

      uni.showModal({
        title: "提示",
        content: "该功能请在专业人士指导下使用,是否继续",
        confirmText:"是",
        success: function (res) {
          if(res.confirm){
            self.showModelPicker = true;
          }
        },
      })
    },
    skip(type){
      if(type == 1){
        wx.navigateToMiniProgram({
          appId: this.appid,
          path: 'pages/news_details/help?id=25',
          success(res) {
            // 打开成功
          },
          fail(res){
            console.log(res);
          }
        })
      }else if(type == 2){
        wx.openCustomerServiceChat({
          extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc4202b8764df71c0c'},
          corpId: 'ww8e678fbe6f1079ba',
          success(res) {

          },
          fail(res){
            console.log(res);
          }
        })
      }
    },
    isMulTab(index){
      let type = this.deviceType;
      if(index == 2){
        if(type == 4 || type == 5){
          return true;
        }
      }
      if(index == 3){
        if(type == 5){
          return true;
        }
      }
      return false;

    },
    isPage(index){
       if(this.tabIndex == index){
         return true;
       }
       return false;
    },
    getUpdateInfo(){
      let self = this;
      getLatestFirmware(this.id).then(res=>{
        self.firmware = res.data;
        let curVersion = self.deviceInfo.firmwareVersion;
        let onlineVersion = self.firmware.version
        if(curVersion>=onlineVersion){
          this.$modal.showToast('当前已经是最新版本')
        }else{
          uni.showModal({
            title: '检测到新版本',
            content: "当前版本:"+curVersion+",新版本:"+onlineVersion,
            cancelText: '取消',
            confirmText: '升级',
            success: function(res) {
              if (res.confirm) {
                self.doUpdate();
              }
            }
          })
        }
      });
    },
    doUpdate(){
      if(this.deviceInfo.status != 3){
        this.notifyError("请等待设备上线后操作")
        return;
      }
      let device = this.deviceInfo;
      let message = "";
      let topic = "";
      let title = "升级";
      topic = "/" + device.productId + "/" + device.serialNumber + "/ota/get";
      message = '{"version":"' + this.firmware.version + '","downloadUrl":"' + this.getDownloadUrl(this.firmware.filePath) + '","size":"'+this.firmware.size+'"}';
      this.$mqttTool.publish(topic, message,title).then(res => {
        this.notifySuccess(res);
      }).catch(res => {
        this.notifyError(res);
      });
    },

    getStatusText(){
      if(this.baozhuangRunning()){
        return "工作中";
      }
      if(this.jianyaoIng()){
        return "工作中";
      }
      if(this.leftAppointmentTime>0){
        return "已预约";
      }
      return "空闲中";
    },
    closeYuyueIngPop(){
      this.yuyueIngPop = false;
    },
    confirmMode(item){
      console.log(item)
      this.workMode = item.value[0].id;
      this.setMode(this.workMode);
      this.closeModelPicker();
    },
    closeModelPicker(){
      this.showModelPicker = false;
    },
    confirmJiaozhunTemp(){
      this.jiaozhunTemp = this.jiaozhunTemp_temp;
      this.temperNumber();
      this.closejiaozhunPop();
    },
    addJiaoZhunTemperature(){
      this.jiaozhunTemp_temp ++;
      if(this.jiaozhunTemp_temp>20){
        this.jiaozhunTemp_temp = 20;
      }
    },
    subJiaoZhunTemperature(){
      this.jiaozhunTemp_temp --;
      if(this.jiaozhunTemp_temp<-20){
        this.jiaozhunTemp_temp = -20;
      }
    },
    closejiaozhunPop(){
      this.jiaozhunPopDlg = false;
    },
    showLiuProp(){
      let self = this;
      uni.showModal({
        title: "提示",
        content: "该功能请在专业人士指导下使用,是否继续",
        confirmText:"是",
        success: function (res) {
          if(res.confirm){
            self.liuzhuanPopDlg = true;
          }
        },
      })
    },
    showJiaozhunProp(){
      let self = this;
      uni.showModal({
        title: "提示",
        content: "该功能请在专业人士指导下使用,是否继续",
        confirmText:"是",
        success: function (res) {
          if(res.confirm){
            self.jiaozhunTemp_temp = self.jiaozhunTemp;
            self.jiaozhunPopDlg = true;
          }
        },
      })
    },
    fixStyle(){
      let self  = this;
      wx.getSystemInfo({
        success: res => {
          const { windowWidth, windowHeight, statusBarHeight } = res;
          // 在这里可以获取到屏幕的宽度和高度
          console.log(windowWidth, windowHeight, statusBarHeight);
          if(windowWidth<=350){
            self.unitFixedStyle = ";padding-top:6px;left: 28vw;";
            self.unitFixedStyle1 = ";padding-top:6px;left: 28vw;";
          }else if(windowWidth>=360){
            self.unitFixedStyle = ";padding-top:10rpx;";
            self.unitFixedStyle1 = ";padding-top:10rpx;left: 32vw;";
          }
          self.maxWidth = windowWidth;

        }
      })
    },
    closePlanIngPop(){
      this.jianyaoPopClose = false;
      this.planIngPopDlg = false;
    },
    closePlanPop(){
      this.planPopDlg = false;
    },
    showBaozhuangDlg(type){
      this.popDlg = true;
      if(type == 1){
        this.fengbianDlgShow = true;
      }else if(type == 2){
        this.fengkouDlgShow = true;
      }else if(type == 3){
        this.wenhuoTimeDlgShow = true;
      }
    },
    closePop(){
      this.popDlg = false;
      this.fengbianDlgShow = false;
      this.fengkouDlgShow = false;
      this.wenhuoTimeDlgShow = false;
    },
    changeTab(index,tag){
      if(!tag){
        return;
      }
      let type = this.deviceType;
      let self = this;
      if(index == 2 || index == 3){
        if(!this.isMulTab(index)){
          return;
        }
      }
      this.resetChoose();
     if(index == 4){

       uni.showLoading({title:"加载中"});
       getDeviceStatus(this.id,0).then(res=>{
         let data =res.data;
         this.deviceInfo = data;
         self.parseStatusData(data)
         setTimeout(function () {
           uni.hideLoading();
           self.firstTab = false;
         },100);

       });
     }else{

       let arr = ["a","b","c"]
       if(type == 4 || type == 5){
         this.childId =arr[index-1];
         this.getDeviceStatus(function(){
           self.tabIndex = index;
           self.firstTab = true;
           self.tabActive[index-1] = true;
           self.$forceUpdate();
         });
       }else{
         this.getDeviceStatus(function(){
           self.tabIndex = index;
           self.firstTab = true;
           self.tabActive[index-1] = true;
           self.$forceUpdate();
         })
       }

       console.log(this.tabActive)


     }
    },
    resetChoose(){
          this.tabIndex = 0;
      for (let i = 0; i < 3; i++) {
        this.tabActive[i] = false;
      }
    },
    changePackageVolume(){
      if(this.packageVolume<50){
        this.packageVolume = 50;
      }
      if(this.packageVolume>300){
        this.packageVolume = 300;
      }
      this.sendBaozhuang("PackingVolume");
    },
    changePackageNumber(){
      let min = 1;
      let max = 999;
      if(this.packageNumber<min){
        this.packageNumber = min;
      }
      if(this.packageNumber>max){
        this.packageNumber = max;
      }
      this.sendBaozhuang("PackageQuantity");
    },
    changeEdegTemperature(){
      let min = 80;
      let max = 220;
      if(this.setEdegTemperature<min){
        this.setEdegTemperature = min;
      }
      if(this.setEdegTemperature>max){
        this.setEdegTemperature = max;
      }
      console.log("current setEdegTemperature is :"+this.setEdegTemperature)
      this.sendBaozhuang("SetBandingTemp");
    },
    changeSealingTemperature(){
      let min = 80;
      let max = 220;
      if(this.setSealingTemperature<min){
        this.setSealingTemperature = min;
      }
      if(this.setSealingTemperature>max){
        this.setSealingTemperature = max;
      }
      console.log("current setSealingTemperature is :"+this.setSealingTemperature)
      this.sendBaozhuang("SetSealTemp");
    },
    changeTemperature(){
      let max = 140;
      let min = 100;
      if(this.workMode == 2){
        min = 1;
      }
      if(this.temperature<min){
        this.temperature = min;
      }
      if(this.temperature>max){
        this.temperature = max;
      }
      console.log("current temperature is :"+this.temperature)
      this.sendJianYao("TempSetting");
    },
    changeTemperatureTime(){
      let min = 1;
      let max = 600;
      if(this.temperatureTime<min){
        this.temperatureTime = min;
      }
      if(this.temperatureTime>max){
        this.temperatureTime = max;
      }
      console.log("current temperatureTime is :"+this.temperatureTime)
      this.sendJianYao("TimeSetting");
    },
    jianyaoOpen(){
      if(this.decoctControlOnOffStatus){
        return true;
      }
      return  false;
    },
    baozhuangOpen(){
      if(this.packageControlOnOffStatus){
        return true;
      }
      return  false;
    },
    baozhuangRunning(){
      if(this.qingxiTurn || this.baozhuangTurn || this.qitingTurn){
        return true;
      }
      return  false;
    },
    jianyaoIng(){
      if(this.decoctControlStatus){
        return true;
      }
      return  false;
    },
    cancelPlan(){
      let arr = [];
      let obj = {};
      obj.id = "AppointmentTime";
      obj.shadow = 0;
      arr.push(obj);
      let self = this;
      self.kongzhiJianyao(false,arr);
      this.mqttPublish(2,this.deviceInfo,arr,true);
      this.closeYuyueIngPop();

    },
    toPlan(){
      if(!this.jianyaoOpen()){
        this.$modal.showToast('煎药机已经关机')
        return;
      }
      if(this.leftAppointmentTime>0){
        this.yuyueIngPop = true;
      }else{
        if(this.jianyaoIng()){
          this.$modal.showToast('正在煎药')
          return;
        }
        this.planPopDlg = true;

      }

    },
    calcuStep(){
      if(this.leftAppointmentTime>0){
        this.step = 0;
        return 0;
      }
      if(this.leftJianyaoTime == 0){
        this.step = 100;
        return ;
      }
      let currentTemperature = this.currentTemperature;
      let hightTemperature = this.temperatureTime-this.leftJianyaoTime;//设置的高温时间
      let targetTemperature =100;// this.temperature;
      let targetTemperatureTime = this.temperatureTime;//倒计时
      if(targetTemperature>100){
        targetTemperature = 100;
      }
      let step = 0;
      if(currentTemperature<100){
        let tem = currentTemperature/200*100;
        step = tem;
      }else{
        step = 50;
        let rate = hightTemperature/targetTemperatureTime;
        rate = rate/2;
        rate = rate*100;
        rate = rate.toFixed(2)
        step = step + parseFloat(rate);
      }

      this.step = step.toFixed(2);
    },
    plan(){
      let self = this;
      if(this.planTime>600){
        this.$modal.showToast('预约时间最大为600分钟')
        return;
      }
      if(this.planTime == 0){
        this.$modal.showToast('预约时间不能为空')
      }else{
        let arr = [];
        let obj = {};
        obj.id = "AppointmentTime";
        obj.shadow = this.planTime;
        arr.push(obj);
        this.kongzhiJianyao(true,arr);
        this.mqttPublish(2,this.deviceInfo,arr,true);
      }
      this.$modal.showToast('预约成功')
      this.planPopDlg = false;
    },
    lockCtrl(key){
      let arr = [];
      let obj = {};
      obj.id = "LockControl";
      if(key == 0){
        obj.shadow = 1;
        this.lock.value = 1;
      }else{
        obj.shadow = 0;
        this.lock.value = 0;
      }
      arr.push(obj);
      this.mqttPublish(2,this.deviceInfo,arr)
    },
    setMode(type){
      let arr = [];
      let obj = {};
      obj.id = "WorkMode";
      obj.shadow = type;
      arr.push(obj);
      this.mqttPublish(2,this.deviceInfo,arr,true)
      this.workMode = type;
    },
    temperNumber(value){
      let arr = [];
      let obj = {};
      obj.id = "CalibrationTemp";
      obj.shadow = this.jiaozhunTemp;
      arr.push(obj);
      this.mqttPublish(2,this.deviceInfo,arr,true)
    },
    volumeNumber(){
      let arr = [];
      let obj = {};
      obj.id = "CapacityCalibration";
      obj.shadow = 1;
      arr.push(obj);
      this.mqttPublish(2,this.deviceInfo,arr,true)
    },
    showConfirm(title,content,yes,no){
      uni.showModal({
        title: title,
        content: content,
        success: function (res) {
          if (res.confirm) {
            yes();
          } else if (res.cancel) {
            no();
          }
        }
      });
    },
    reset(){
      let self = this;
      this.showConfirm("提示","确认恢复出厂吗",function(){
        let arr = [];
        let obj = {};
        obj.id = "RestoreFactory";
        obj.shadow = 1;
        arr.push(obj);
        self.mqttPublish(2,self.deviceInfo,arr)
      },function(){});

    },
    turnChange(type){
      let flag = false;
      let obj = {};
      if(type ==3){
        if(this.baozhuangTurn || this.qitingTurn){
          this.$modal.showToast("启停、包装、清洗不能同时打开")
          return;
        }

        flag = this.qingxiTurn;
        obj.id = "WashSwitch";
      }else if(type == 2){
        if(this.qingxiTurn || this.qitingTurn){
          this.$modal.showToast("启停、包装、清洗不能同时打开")
          return;
        }
        flag = this.baozhuangTurn;
        obj.id = "PackageSwitch";
      }else if(type == 1) {
        if(this.qingxiTurn || this.baozhuangTurn){
          this.$modal.showToast("启停、包装、清洗不能同时打开")
          return;
        }
        flag = this.qitingTurn;
        obj.id = "CarrybagSwitch";
      }
      flag = !flag;
      let arr = [];
      if(flag){
        obj.shadow = 1;
      }else{
        obj.shadow = 0;
      }
      arr.push(obj);
      this.mqttPublish(2,this.deviceInfo,arr)

    },
    addPackageVolume(){
      this.packageVolume++;
      if(this.packageVolume>300){
        this.packageVolume = 50;
      }
      console.log("增加包装容量")
      this.changePackageVolume()
    },
    subPackageVolume(){
      this.packageVolume--;
      if( this.packageVolume<50){
        this.packageVolume = 300;
      }
      console.log("减少包装容量")
      this.changePackageVolume()
    },
    addPackageNumber(){
      this.packageNumber++;
      if(this.packageNumber>999){
        this.packageNumber = 1;
      }
      console.log("增加包装数量")
      this.changePackageNumber();
    },
    subPackageNumber(){
      this.packageNumber--;
      if(this.packageNumber<1){
        this.packageNumber = 999;
      }
      console.log("减少包装数量")
      this.changePackageNumber();
    },
    addSealingTemperature(){
      console.log("增加封口温度")
      if(!this.fengkouDlgShow){
        this.fengkouDlgShow = true;
      }
      this.setSealingTemperature++;
      this.changeSealingTemperature();
    },
    subSealingTemperature(){
      console.log("减少封口温度")
      if(!this.fengkouDlgShow){
        this.fengkouDlgShow = true;
      }
      this.setSealingTemperature--;
      this.changeSealingTemperature();
    },
    addEdegTemperature(){
      console.log("增加封边温度")
      this.editing = true;
      if(!this.fengbianDlgShow){
        this.fengbianDlgShow = true;
      }
      this.setEdegTemperature++;
      this.changeEdegTemperature();
    },
    subEdegTemperature(){
      console.log("减少封边温度")
      this.editing = true;
      if(!this.fengbianDlgShow){
        this.fengbianDlgShow = true;
      }
      this.setEdegTemperature--;
      this.changeEdegTemperature();
    },
    addTemperatureTime(){
      console.log("增加煎药时间")
      if(!this.wenhuoTimeDlgShow){
        this.wenhuoTimeDlgShow = true;
        this.temperatureTime = this.leftJianyaoTime;
      }
      this.temperatureTime++;
      this.changeTemperatureTime()
    },
    subTemperatureTime(){
      console.log("减少煎药时间")
      if(!this.wenhuoTimeDlgShow){
        this.wenhuoTimeDlgShow = true;
        this.temperatureTime = this.leftJianyaoTime;
      }
      this.temperatureTime--;
      if(this.temperatureTime<=0){
        this.temperatureTime = 1;
      }
      this.changeTemperatureTime()
    },
    addTemperature(){
      console.log("增加煎药温度")
      this.temperature++;
      this.changeTemperature();

    },
    subTemperature(type){
      console.log("减少煎药温度")
      this.temperature--;
      this.changeTemperature();
    },
    addPlanTime(){
      console.log("增加预约时间")
      this.planTime++;
    },
    subPlanTime(){
      console.log("减少预约时间")
      this.planTime--;
    },
    sendBaozhuang(targetKey){
      let self = this;
      let arr = [];
      if(this.baozhuangTimer != null){
        clearTimeout(this.baozhuangTimer);
      }

      this.baozhuangTimer = setTimeout(function (){
        for (let i = 0; i <this.baozhuangKeys.length; i++) {
          let key = this.baozhuangKeys[i];
          let obj = {};
          obj.id = key;
          if(key === "PackingVolume"){
            obj.shadow = this.packageVolume;
            setTimeout(function (){
              self.baozhuangRongLiangSetting = false;
            },self.resetDuration);
          }
          if(key === "PackageQuantity"){
            obj.shadow = this.packageNumber;
            setTimeout(function (){
              self.baozhuangShuLIangSetting = false;
            },self.resetDuration);
          }
          if(key === "SetSealTemp"){
            obj.shadow = this.setSealingTemperature;
            setTimeout(function (){
              self.fengkouDlgShow = false;
              self.baozhuangFengkouSetting = false;
              self.sealingTemperature = self.tempFengKouWendu;;
            },self.resetDuration);
          }
          if(key === "SetBandingTemp"){
            obj.shadow = this.setEdegTemperature;
            setTimeout(function (){
              self.fengbianDlgShow = false;
              self.baozhuangFengbianSetting = false;
              self.edegTemperature = self.tempFengBianWendu;

            },self.resetDuration);
          }
          if(targetKey == key){
            arr.push(obj);
            break;
          }
        }
        this.mqttPublish(2,this.deviceInfo,arr)
      }.bind(this),500);
    },
    sendJianYao(targetKey){
      let self = this;
      let arr = [];
      if(this.jianyaoTimer != null){
        clearTimeout(this.jianyaoTimer);
      }

      this.jianyaoTimer = setTimeout(function (){
        for (let i = 0; i <this.jianyaoKeys.length; i++) {
          let key = this.jianyaoKeys[i];
          let obj = {};
          obj.id = key;
          if(key === "TempSetting"){
            obj.shadow = this.temperature;
            // setTimeout(function(){
            //   self.wenhuoTimeDlgShow = false;
            //   self.jianyaoShijianSetting = false;
            // },self.resetDuration)
          }
          if(key === "TimeSetting"){
            obj.shadow = this.temperatureTime;
            self.leftJianyaoTime = this.temperatureTime;;
            setTimeout(function(){
              self.wenhuoTimeDlgShow = false;
              self.jianyaoShijianSetting = false;
            },self.resetDuration)
          }
          if(targetKey == key){
            arr.push(obj);
            break;
          }

        }
        this.mqttPublish(2,this.deviceInfo,arr,true)
      }.bind(this),500);
    },
    buildPropKey(key){
        if(this.childId !=0){
            return key+"_"+this.childId;
        }else{
          return key;
        }
    },
    decoctControlChange(){
      let obj = {};
      let arr = [];
      if(!this.decoctControlOnOffStatus){
        this.notifyError("请先开机后再进行操作")
        return;
      }
      if(this.decoctControlStatus){
        this.showJianyao();
        return;
      }
      this.decoctControlStatus = !this.decoctControlStatus;
      obj.id = "DecoctingSwitch";
      if(this.decoctControlStatus){
        obj.shadow = 1;
        console.log("煎药状态打开")
        this.checkJianyao();
      }else{
        obj.shadow = 0;
        console.log("煎药状态关闭")
      }
      arr.push(obj);
      this.mqttPublish(2,this.deviceInfo,arr,true)
    },
    kongzhiJianyao(flag,arr){//不判断煎药状态
      let obj = {};
      if(!this.decoctControlOnOffStatus){
        this.notifyError("请先开机后再进行操作")
        return;
      }
      obj.id = "DecoctingSwitch";
      if(flag){
        obj.shadow = 1;
        console.log("煎药状态打开")
        this.checkJianyao();
      }else{
        obj.shadow = 0;
        console.log("煎药状态关闭")
      }
      arr.push(obj);
    },
    stopDecoctControlChange(){
      let obj = {};
      let arr = [];
      if(!this.decoctControlOnOffStatus){
        this.notifyError("请先开机后再进行操作")
        return;
      }
      if(!this.decoctControlStatus){
        return;
      }
      this.decoctControlStatus = !this.decoctControlStatus;
      obj.id = "DecoctingSwitch";
      if(this.decoctControlStatus){
        obj.shadow = 1;
        console.log("煎药状态打开")
      }else{
        obj.shadow = 0;
        console.log("煎药状态关闭")
      }
      arr.push(obj);
      let obj2 = {};
      obj2.id = "AppointmentTime";
      obj2.shadow = 0;
      arr.push(obj2);
      this.mqttPublish(2,this.deviceInfo,arr,true)
    },
    decoctControlOnOffChange(){
      let obj = {};
      this.decoctControlOnOffStatus = !this.decoctControlOnOffStatus;
      let arr = [];
      obj.id = "PowerControl";
      let isMul = false;
      if(this.decoctControlStatus){
        this.$modal.showToast('请先结束煎药后操作')
        this.decoctControlOnOffStatus = !this.decoctControlOnOffStatus;
        return;
      }
      if(this.oneToMul && this.firstTab){
        obj.id = "PowerCtl";
        isMul = true;
      }
      if(this.decoctControlOnOffStatus){
        obj.shadow = 1;
        console.log("煎药机开关打开")
      }else{
        obj.shadow = 0;
        console.log("煎药机开关关闭")
      }
      arr.push(obj);
      this.mqttPublish(2,this.deviceInfo,arr,isMul)
    },
    packageControlOnOffChange(){
      let obj = {};
      let arr = [];
      if(this.baozhuangRunning()){
        this.$modal.showToast('请先停止运行后操作')
        return;
      }
      obj.id = "PackagePowerControl";
      this.packageControlOnOffStatus = !this.packageControlOnOffStatus;
      if(this.packageControlOnOffStatus){
        console.log("包装机器开关打开")
        obj.shadow = 1;
      }else{
        console.log("包装机器开关关闭")
        obj.shadow = 0;
      }
      arr.push(obj);
      this.mqttPublish(2,this.deviceInfo,arr)
    },
    containKey(arr,key){
      for (let i = 0; i < arr.length; i++) {
        const data = arr[i];
        if(data == key){
          return true;
        }
      }
      return false;
    },
    // 抽屉状态发生变化触发
    change(e, type) {
      console.log(e);
    },
    showDrawer() {

      this.$refs.showLeft.open();
    },
    closeDrawer() {
      this.$refs.showLeft.close();
    },
    checkItemValue(item){
      if(!item.shadow){
        item.shadow = 0;
      }
      if(!item.unit){
        item.unit = "";
      }
      return true;
    },
    sendProperties(){
      let properties = this.properties;
      for (let i = 0; i < properties; i++) {
        let property = this.properties[i];
        let shadow = property.shadow;
        if(shadow){
          arr.push(property);
        }
      }
      this.mqttPublish(1,this.deviceInfo,arr)
    },

    sendFunctions(){
      let arr = [];
      let functions = this.functions;
      for (let i = 0; i < functions.length; i++) {
        let functionObj = this.functions[i];
        let shadow = functionObj.shadow;
        if(shadow){
          arr.push(functionObj);
        }
      }
      this.mqttPublish(2,this.deviceInfo,arr)
    },
    changeProp(key,val){
      let item = null;
      let obj = null;
      let oneToMul = this.oneToMul;
      if(key === "LockControl"){
        this.lock.value = val;
        item = this.lock;
      }else if(key === "PowerControl"){
        this.power.value = val;
        item =  this.power;
      }

      let value = val;
      obj = item.item;
      if(value){
        obj.value = 1;
        obj.shadow = 1;
      }else{
        obj.value = 0;
        obj.shadow = 0;
      }
      if(!oneToMul){

      }
      this.publishThingsModel(this.deviceInfo,obj);
    },
    checkCommonProp(item){
      let id =item.id;
      let isCommonKey = this.modelKey.some(res=>{
        return id === res;
      })
      return !isCommonKey;
    },
    getRunTime(){
      let self = this;
      getDeviceRunTime(this.id).then(res=>{
        self.timeobj = res.data;
        if(self.timeobj.avgtime == ""){
          self.timeobj.avgtime = 0;
        }
        if(self.timeobj.alltime == ""){
          self.timeobj.alltime = 0;
        }
      })
    },
    seeTime(){
      this.showTimeDlg = true;
      this.getRunTime();
    },
    closeTime(){
      this.showTimeDlg = false;
    },
    cancel(){
      this.showErrDlg = false;
    },
    reportError(){
      this.showErrDlg = true;
    },
    doReportError(){
      if(!this.errorMsg){
        this.$modal.showToast('异常信息不能为空')
      }else{
        let self = this;
        let errObj = {};
        errObj.deviceId = this.deviceInfo.deviceId;
        errObj.deviceName = this.deviceInfo.deviceName
        errObj.desc = this.errorMsg;
        errObj.deptId= this.deviceInfo.deptId;
        reportError(errObj).then(res=>{
          self.$modal.showToast(res.msg)
          self.cancel();
        })
      }
    },
    openLocation(){
      uni.openLocation({
        latitude: this.location.latitude,
        longitude: this.location.longitude,
        success: function () {
          console.log('success');
        }
      });

    },
    confirmItemData(e){
      let data = e.value[0];
      this.show.text = data.text;
      this.show.shadow=data.value;
      this.show = null;
      console.log(data);
    },
    send(){
      let shadow = false
      let _arr = []
      this.inputProp.forEach((item)=>{
        _arr.push(item.value)
      })
      // if(_arr.some(val => val === '' || val.length < 0)){
      //   shadow = true
      // }
      if(this.deviceInfo.status != 3){
        uni.showToast({
          title:"设备暂未上线",
          icon:"error"
        })
        return;
      }

      if(shadow){
        uni.showToast({
          title:"数据不能为空",
          icon:"error"
        })
        return;
      }
      this.publishThingsModel(this.deviceInfo,this.inputProp.map(item=>{return{"id":item.id,"value":item.value}}))
    },
    /** 更新设备状态 */
    updateDeviceStatus(device) {

    },
    chooseItemData(data){
      if(this.deviceInfo.status != 3){
        uni.showToast({
          title:"设备暂未上线",
          icon:"error"
        })
        return;
      }
      this.columns = [data.enumList];
      this.show =data;
    },
    getDetail(){
      let self = this;
      getDetail(this.id).then(res=>{
        self.deviceInfo = res.data;
        self.deviceType = res.data.type;
        let productId = self.deviceInfo.productId;
        if(productId === 57){
          self.boardType = 5;
        }
        let online = self.deviceInfo.status == 3?true:false;
        if(!online){
          if(!self.onlineStatus){
            uni.showModal({
              title: '系统提示',
              content: "设备未在线,无法操作",
              confirmText: '确定',
              showCancel:false,
              success(res){
                if(res.confirm){
                  self.onlineStatus = true;
                }
              },
            })
          }
        }

        console.log("当前设备类型:"+JSON.stringify(self.deviceInfo.type))
        self.location = {
          latitude: self.deviceInfo.latitude,
          longitude: self.deviceInfo.longitude};
        self.sysDept = self.deviceInfo.sysDept;
        self.parseSummay(res.data.summary)
        self.mqttSubscribe(res.data);
        self.getDeviceStatus();
        self.seeTime();

        let heng = false;
        self.productImage = self.imgUrl+'/detail/product.png'
        if(self.deviceType == 4 ||self.deviceType == 5 ){
          self.secondMachine = true;
        }
        if(self.deviceType == 5){
          self.thirdMachine = true;
        }
        if(self.deviceType == 1 || self.deviceType == 7){
          self.forthMachine = false;
          self.productImage = self.imgUrl+'/product/YJH20.png'
        }
        let typeArr = [7,8,9,10,11,12];
        for (let i = 0; i < typeArr.length; i++) {
          let typeMa = typeArr[i];
          if(typeMa == self.deviceType){
            self.forthMachine = false;
          }
        }
        self.fixImage(heng);
        self.$forceUpdate();
      });
    },
    getDeviceStatus(func){
      let self = this;
      if(this.summary.length>1){
      }else{
        this.childId = 0;
      }
      uni.showLoading({title:"加载中"});
      getDeviceStatus(this.id,this.childId).then(res=>{
        let data =res.data;
        this.deviceInfo = data;
        self.parseStatusData(data)

        setTimeout(function () {
          uni.hideLoading();
          if(typeof func == "function"){
            func();
          }
        },50);
      });
    },
    getNewDeviceStatus(item){
        console.log(item);
      let self = this;
      if(item.index == 0){
        this.firstTab = true;
        this.getDeviceStatus();
      }

      if(item.index == 1){
        this.firstTab = false;
        getDeviceStatus(this.id,0).then(res=>{
          let data =res.data;
          this.deviceInfo = data;
          self.parseStatusData(data)
        });
      }

    },
    changeSub(item){
      this.childId = item.id;
      this.getDeviceStatus()
    },
    parseEnumList(flag){
      let enumList = this.deviceInfo.enumList;
      for (let enumListElement of enumList) {
        let id = enumListElement.id;
          if(id == 'LockControl'){
            let shadow = enumListElement.shadow;
            this.lock.item = enumListElement;
            if(shadow == 1){
              this.lock.value  = true;
              this.lock.loading = false;
            }else if(shadow == 0){
              this.lock.value  = false;
              this.lock.loading = false;
            }else{
              this.lock.loading = true;
            }
          }
          if(id == 'PowerControl'){
            let shadow = enumListElement.shadow;
            if(this.oneToMul){
              if(!this.firstTab){
                if(shadow == 1){
                  this.decoctControlOnOffStatus = true;
                }else if(shadow == 0){
                  this.decoctControlOnOffStatus = false;
                }
              }
            }else{
              if(shadow == 1){
                this.decoctControlOnOffStatus = true;
              }else if(shadow == 0){
                this.decoctControlOnOffStatus = false;
              }
            }
        }
        if(id == 'PowerCtl'){
          if(this.oneToMul && this.firstTab){
            let shadow = enumListElement.shadow;
            if(shadow == 1){
              this.decoctControlOnOffStatus = true;
            }else if(shadow == 0){
              this.decoctControlOnOffStatus = false;
            }
          }

        }
        this.formatValue(id,enumListElement,"PackagePowerControl","packageControlOnOffStatus")
        this.formatValue(id,enumListElement,"DecoctingSwitch","decoctControlStatus")
        this.formatValue(id,enumListElement,"CarrybagSwitch","qitingTurn")
        this.formatValue(id,enumListElement,"WashSwitch","qingxiTurn")
        this.formatValue(id,enumListElement,"PackageSwitch","baozhuangTurn");

        //pressTurn resetTurn
        if(!flag){
          if(id == 'PressTurn'){
            let shadow = enumListElement.shadow;
            if(!shadow){
              shadow = 0;
            }
            if(shadow == 1){
              this.pressTurn = 1;
              this.resetTurn = 0;
            }


          }

          if(id == 'ResetTurn'){
            let shadow = enumListElement.shadow;
            if(!shadow){
              shadow = 0;
            }
            if(shadow == 1){
              this.resetTurn = 1;
              this.pressTurn = 0;
            }
          }
        }


        if(id == 'WorkMode'){
          let shadow = enumListElement.shadow;
          if(!shadow){
            shadow = 1;
          }
          this.workMode = shadow;
        }
        let shadow = enumListElement.shadow
        let valueList = enumListElement.enumList;
        for (let valueObj of valueList){
          if(valueObj.value == shadow){
            enumListElement.text = valueObj.text;
          }
        }
      }
    },
    formatValue(id,enumListElement,key,propkey){
      if(id == key){
        let shadow = enumListElement.shadow;
        if(shadow == 1){
          this[propkey] = true;
        }else if(shadow == 0){
          this[propkey] = false;
        }
      }
    },
    parseStatusData(data){
      let self = this;
      cacheJsonThingsModel(data.productId).then(res=>{
        let thingsModel = JSON.parse(res.data);
        let arr = [];
        let arrayList = data.arrayList;
        arr = arr.concat(arrayList);
        let enumList = data.enumList;
        arr = arr.concat(enumList);
        let integerList = data.integerList;
        arr = arr.concat(integerList);
        let stringList = data.stringList;
        arr = arr.concat(stringList);
        self.inputProp = arr;
        for (let i = 0; i < thingsModel.functions.length; i++) {
          for (let j = 0; j < arr.length; j++) {
            let model = arr[j];
            if(model.id == thingsModel.functions[i].id){
                self.functions.push(model);
            }
          }
        }
          for (let i = 0; i < thingsModel.properties.length; i++) {
            for (let j = 0; j < arr.length; j++) {
              let model = arr[j];
              if(model.id == thingsModel.properties[i].id){
                self.properties.push(model);
              }
            }
          }
        let readOnlyList = data.readOnlyList;
        self.watchProp = readOnlyList;
        self.parseEnumList();
        self.parseProp();
        self.checkJianyao();
      })

    },
    showJianyao(){
      this.calcuStep();
      this.planIngPopDlg = true;
    },
    parseProp(){
      let self = this;
      for (let i = 0; i <self.inputProp.length; i++) {
        let prop = self.inputProp[i];
        let value = prop.shadow||0;
        let id = prop.id;
          if(id === "TimeSetting"){//温度设置
            self.temperatureTime = value;
          }

        if(!self.jianyaoWenduSetting){
          if(id === "TempSetting"){
            self.temperature = value;
          }
        }
        this.setPropValue(id,"SlowfireTiem","leftJianyaoTime",value,0)

        this.setPropValue(id,"HighTempTime","hightTemperature",value,0)
        this.setPropValue(id,"CurrentTemp","currentTemperature",value,0)
        this.setPropValue(id,"CalibrationTemp","jiaozhunTemp",value,0)
        this.setPropValue(id,"PackingVolume","packageVolume",value,50)
        this.setPropValue(id,"PackageQuantity","packageNumber",value,1)

        //封边温度
        this.setPropValue(id,"BandingTemp","edegTemperature",value);
        this.setPropValue(id,"BandingTemp","tempFengBianWendu",value)

        //封口温度
        this.setPropValue(id,"SealTemp","sealingTemperature",value);
        this.setPropValue(id,"SealTemp","tempFengKouWendu",value)


        this.setPropValue(id,"LeftAppointmentTime","leftAppointmentTime",value,0)


        this.setPropValue(id,"ValidCurrent","validCurrent",value,0)
        this.setPropValue(id,"TurnCurrent","turnCurrent",value,0)

        self.propMap[id] = prop;

      }
    },
    setPropValue(id,key,propKey,value,defaultValue){
      if(!value && defaultValue){
        value = defaultValue;
      }
      if(id === key){
        this[propKey] = value;
      }
    },
    parseSummay(summary){
      let self = this;
      if(!summary){
        summary = "";
      }
      if(summary.length>0){
        this.summary = JSON.parse(summary);
        if(self.summary.length>0){
          this.oneToMul = true;
          for (let i = 0; i < self.summary.length; i++) {
            self.summary[i].tabName = self.summary[i].name
          }
          let childId = "";
          if(this.oneToMul){
            this.childId = self.summary[0].id;
          }

        }else{
          this.summary = [{name:"煎药机一"}]
        }

      }else{
        this.summary = [{name:"煎药机一"}]
      }
    },
    goDeviceDetail(id){
      uni.navigateTo({
        url: '/pages/device/detail/detail?id='+id
      });
    },
    async connectMqtt() {
      if (this.$mqttTool.client == null) {
        await this.$mqttTool.connect(this.vuex_token);
      }
      this.mqttCallback();
      this.startCheck();
    },
    /** Mqtt订阅主题 */
    mqttSubscribe(device) {
      // 订阅当前设备状态和实时监测
      let topicStatus = '/' + device.productId + '/' + device.serialNumber + '/status/post';
      let topicProperty = '/' + device.productId + '/' + device.serialNumber + '/property/post';
      let topicFunction = '/' + device.productId + '/' + device.serialNumber + '/function/post';
      let topics = [];
      topics.push(topicStatus);
      topics.push(topicProperty);
      topics.push(topicFunction);
      this.$mqttTool.subscribe(topics);
    },
    /** Mqtt取消订阅主题 */
    mqttUnSubscribe(device) {
      // 订阅当前设备状态和实时监测
      let topicStatus = '/' + device.productId + '/' + device.serialNumber + '/status/post';
      let topicProperty = '/' + device.productId + '/' + device.serialNumber + '/property/post';
      let topicFunction = '/' + device.productId + '/' + device.serialNumber + '/function/post';
      let topics = [];
      topics.push(topicStatus);
      topics.push(topicProperty);
      topics.push(topicFunction);
      console.log('取消订阅', topics);
      this.$mqttTool.unsubscribe(topics);
    },
    /* Mqtt回调处理 */
    mqttCallback() {
      this.$mqttTool.client.on('message', (topic, message, buffer) => {
        let topics = topic.split('/');
        let productId = topics[1];
        let deviceNum = topics[2];
        console.log('接收到内容：'+message);
        message = JSON.parse(message.toString());
        if (topics[3] == 'status') {
          console.log('接收到【设备状态-运行】主题：', topic);
          console.log('接收到【设备状态-运行】内容：', message);
          // 更新列表中设备的状态
          if (this.deviceInfo.serialNumber == deviceNum) {
            this.deviceInfo.status = message.status;
            this.deviceInfo.isShadow = message.isShadow;
            this.deviceInfo.rssi = message.rssi;
            this.updateDeviceStatus(this.deviceInfo);
          }
        }
        if (topics[3] == 'property' || topics[3] == 'function') {
          console.log('接收到【物模型】主题：', topic);
          console.log('接收到【物模型】内容：', message);
          if(this.oneToMul){
            let curTabId = this.childId;
            let msg = [];
            for (let i = 0; i < message.length; i++) {
              let curMsg = message[i];
              let id = curMsg.id;
              let ids = id.split("_");
              let value = curMsg.value;
              if(ids.length == 2){
                if(curTabId == ids[1]){
                  msg.push({id:ids[0],value:value});
                }
              }else{
                msg.push(curMsg);
              }
            }
            message = msg;
          }
          // 更新列表中设备的属性
          if (this.deviceInfo.serialNumber == deviceNum) {
            for (let j = 0; j < message.length; j++) {
              let isComplete = false;
              let msgId = message[j].id;
              this.exchangeData(msgId,message[j]);
              // 布尔类型
              for (let k = 0; k < this.deviceInfo.boolList.length && !isComplete; k++) {
                if (this.deviceInfo.boolList[k].id == message[j].id) {
                  this.deviceInfo.boolList[k].shadow = message[j].value;
                  isComplete = true;
                  break;
                }
              }
              // 枚举类型
              for (let k = 0; k < this.deviceInfo.enumList.length && !isComplete; k++) {
                if (this.deviceInfo.enumList[k].id == message[j].id) {
                  this.deviceInfo.enumList[k].shadow = message[j].value;
                  isComplete = true;
                  break;
                }
              }
              // 字符串类型
              for (let k = 0; k < this.deviceInfo.stringList.length && !isComplete; k++) {
                if (this.deviceInfo.stringList[k].id == message[j].id) {
                  this.deviceInfo.stringList[k].shadow = message[j].value;
                  isComplete = true;
                  break;
                }
              }
              // 数组类型
              for (let k = 0; k < this.deviceInfo.arrayList.length && !isComplete; k++) {
                if (this.deviceInfo.arrayList[k].id == message[j].id) {
                  this.deviceInfo.arrayList[k].shadow = message[j].value;
                  isComplete = true;
                  break;
                }
              }
              // 整数类型
              for (let k = 0; k < this.deviceInfo.integerList.length && !isComplete; k++) {
                if (this.deviceInfo.integerList[k].id == message[j].id) {
                  this.deviceInfo.integerList[k].shadow = message[j].value;
                  isComplete = true;
                  break;
                }
              }
              // 小数类型
              for (let k = 0; k < this.deviceInfo.decimalList.length && !isComplete; k++) {
                if (this.deviceInfo.decimalList[k].id == message[j].id) {
                  this.deviceInfo.decimalList[k].shadow = message[j].value;
                  isComplete = true;
                  break;
                }
              }
              // 监测数据
              for (let k = 0; k < this.deviceInfo.readOnlyList.length && !isComplete; k++) {
                if (this.deviceInfo.readOnlyList[k].id == message[j].id) {
                  this.deviceInfo.readOnlyList[k].shadow = message[j].value;
                  // 更新图表
                  // for (let m = 0; m < this.monitorChart.length; m++) {
                  //   if (message[j].id == this.monitorChart[m].data.id) {
                  //     let data = [{
                  //       value: message[j].value,
                  //       name: this.monitorChart[m].data.name
                  //     }];
                  //     this.monitorChart[m].chart.setOption({
                  //       series: [{
                  //         data: data
                  //       }]
                  //     });
                  //     break;
                  //   }
                  // }
                  isComplete = true;
                  break;
                }
              }
            }
            this.parseEnumList(true);
            this.checkJianyao();
            if(this.planIngPopDlg){
              this.calcuStep();
            }
          }
          this.$forceUpdate();
        }
      });
    },
    checkJianyao(){
      // if(!this.jianyaoPopClose){
      //   return;
      // }
      // let self = this;
      // setTimeout(function(){
      //   if(self.decoctControlStatus){
      //     self.showJianyao();
      //   }
      // },1000);
    },
    exchangeData(msgId,obj){
      if(msgId === "TempSetting"){
        this.temperature = obj.value;
      }
      if(msgId === "TimeSetting"){
        this.temperatureTime = obj.value;
      }
      if(msgId === "CurrentTemp"){
        this.currentTemperature = obj.value;
      }

      if(msgId === "HighTempTime"){
        this.hightTemperature = obj.value;
      }
      if(msgId === "SealTemp"){//封口温度
        if(!this.editing){

          if(this.baozhuangFengkouSetting){
            this.tempFengkouWendu = obj.value;
          }else{
            this.sealingTemperature = obj.value;
          }
        }

      }
      if(msgId === "BandingTemp"){//封边温度
        if(!this.editing){

          if(this.baozhuangFengbianSetting){
            this.tempFengBianWendu = obj.value;
          }else{
            this.edegTemperature = obj.value;
          }

        }

      }
      if(msgId === "PackingVolume"){
        if(!this.editing){
          if(this.baozhuangRongLiangSetting){

          }else{
            this.packageVolume = obj.value;
          }


        }

      }
      if(msgId === "PackageQuantity"){
        if(!this.editing){
          if(this.baozhuangShuLIangSetting){

          }else{
            this.packageNumber = obj.value;
          }
        }
      }

      if(msgId === "LeftAppointmentTime"){
          this.leftAppointmentTime = obj.value;
      }

      if(msgId === "SlowfireTiem"){
        this.leftJianyaoTime = obj.value;
      }

      if(msgId === "CalibrationTemp"){
        this.jiaozhunTemp = obj.value;
      }

      if(msgId === "TurnCurrent"){
        this.turnCurrent = obj.value;
      }


      if(msgId === "ValidCurrent"){
        this.validCurrent = obj.value;
      }


    },
    /** 发布物模型 类型(1=属性，2=功能) */
    publishThingsModel(device, model) {
      // 获取缓存的Json物模型
      cacheJsonThingsModel(device.productId).then(response => {
        let thingsModel = JSON.parse(response.data);
        let type = 0;
        for (let i = 0; i < thingsModel.functions.length; i++) {
          if (model.id == thingsModel.functions[i].id) {
            type = 2;
            break;
          }
        }
        if (type == 0) {
          for (let i = 0; i < thingsModel.properties.length; i++) {
            if (model.id == thingsModel.properties[i].id) {
              type = 1;
              break;
            }
          }
        }
        if (type != 0) {
          this.mqttPublish(type, device, [model]);
        }
      });
    },
    notifyError(res){
      uni.showToast({
        title:res,
        icon:"error"
      })
    },
    notifySuccess(res){
      uni.showToast({
        title:res,
        icon:"success"
      })
    },
    getDownloadUrl(path){
      return this.firmware.downUrl +"/iot/tool/download?fileName="+ path;
    },
    /**
     * Mqtt发布消息
     * @type 类型(1=属性，2=功能，3=OTA升级，4=实时监测)
     * @device 设备
     * @model 物模型
     * */
    mqttPublish(type, device, modelList,needMore) {
      if(this.deviceInfo.status != 3){
        this.notifyError("请等待设备上线后操作")
        return;
      }
      if(modelList.length == 0){
        return;
      }
      let topic = "";
      let message = ""
      let oneToMul = false;
      if(this.summary.length>1){
        oneToMul = true;
      }
      if(!needMore){
        oneToMul = false;
      }

      if(this.firstTab){
        let isKaijiKey = false;
        if(modelList.length >0){
          let modelData = modelList[0];
          let curKeyId = modelData.id;
          if(!this.decoctControlOnOffStatus){
            if(oneToMul){
              if(curKeyId == 'PowerCtl'){
                isKaijiKey = true;
                }
            }else{
              if(curKeyId == 'PowerControl'){
                isKaijiKey = true;
              }
            }
          }else{
            isKaijiKey = true;
          }
        }
        if(!isKaijiKey){
          this.notifyError("请先开机后再进行操作")
          return;
        }
      }else{
        let isKaijiKey = false;
        if(modelList.length >0){
          let modelData = modelList[0];
          let curKeyId = modelData.id;
          if(!this.packageControlOnOffStatus){
            if(curKeyId == 'PackagePowerControl'){
              isKaijiKey = true;
            }
          }else{
            isKaijiKey = true;
          }
        }
        if(!isKaijiKey){
          this.notifyError("请先开机后再进行操作")
          return;
        }

      }


      if (type == 1) {
        if (device.status == 3) {
          // 属性,在线模式
          topic = "/" + device.productId + "/" + device.serialNumber + "/property-online/get";
        }
      } else if (type == 2) {
        if (device.status == 3) {
          // 功能,在线模式
          topic = "/" + device.productId + "/" + device.serialNumber + "/function-online/get";

        }
      } else if (type == 3) {
        // OTA升级
        topic = "/" + device.productId + "/" + device.serialNumber + "/ota/get";
      } else {
        return;
      }
      let title = "";
      if(type == 1){
        title = "属性";
      }else if(type == 2){
        title = "功能";
      }else if(type == 3){
        title = "升级";
      }
      if (topic != "") {
        // 发布
        let arr = [];
        for (let i = 0; i <modelList.length; i++) {
          let model = modelList[i];
          let modelId = model.id;
          if(oneToMul){
            let childId = this.childId;
            if(childId){
              modelId = modelId+"_"+childId;
            }

          }
          let shadow = model.shadow+"";
          let modelType = model.type;
          let shadowInt = parseInt(shadow,10);
          let isNumber = false;
          let shadowStr = shadowInt+"";
          if(shadowStr === shadow){
            isNumber = true;
            shadow = shadowInt;
          }
          if(modelType == "integer" && !isNumber){
            this.$modal.showToast(model.name+'的值必须是数字类型')
            return;
          }
          arr.push({id:modelId,value:shadow+""});
        }
        message = JSON.stringify(arr);
        let self = this;
        this.$mqttTool.publish(topic, message,title).then(res => {
          this.notifySuccess(res);
        }).catch(res => {
          this.notifyError(res);
        });
      }
    },
    startCheck(){
      let self = this;
      this.checkTimer = setTimeout(function (){
        self.sendHeart();
        self.startCheck();
      },20000);
    },
    checkActive(){
      let self = this;
      setTimeout(function (){
        if(self.publishMsg){
          self.resetConn()
        }
      },3000);
    },
    sendHeart(){
      console.log("发送心跳111")
      let device = this.deviceInfo;
      let self = this;
      let topic = "/property-offline/post";
      self.publishMsg = true;
      self.checkActive();
      this.$mqttTool.publish(topic, "ok", "heart").then(res => {
        self.publishMsg = false;
      }).catch(res => {
        self.publishMsg = false;
      });
    },
    resetConn(){
      console.log("检测异常，重连")
      this.$mqttTool.end();
      this.$mqttTool.client = null;
      this.connectMqtt();
      this.getDetail();
    }

  }
}
</script>

<style>
.send_btn{
  width: 160rpx !important;
  height: 40rpx !important;
  font-size: 10px !important;
  margin-top: 5px;
}
uni-col{
  width: 150px;
}
.header{
  width: 100%;
  background: white;
  padding:0px 20rpx;
  position: relative;
  height: 100vh;
  position: relative;

}
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #060B25;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  margin:10px;
  padding-bottom: 10px;
  justify-content: center;
  width: 100%;
}
.grid-text {

  font-size: 14px;
  color: #909399;
  padding: 10rpx 0 20rpx 0rpx;
  /* #ifndef APP-PLUS */
  box-sizing: border-box;
  /* #endif */
}
.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.item{

  height: 80rpx;
  line-height: 80rpx;
}
.bg{
  position: relative;
}
.text-left{
  color: #8A92A5;
}
.text-right{
  color: #545454;
}
.prop-text{
  position: relative;
  margin:20rpx 0;
  font-size: 26rpx;
}
.prop-card-area{

}
.prop-card{
  width: 28%;
  height: 100rpx;
  text-align: center;
  display: inline-block;
  background: #F5FCFF;
  box-shadow: 0px 9rpx 8rpx 0px rgba(0,0,0,0.09);
  border-radius: 8rpx;
  margin:0px 15rpx;
  line-height: 48rpx;
}
.prop-card-top{

  color: #3E9CFC;
}
.prop-card-bottom{

  color: #8A92A5;
}

.tab-area {
  background: white;
  position: absolute;
  left: 0px;
  right: 0px;
  top:480rpx;
  bottom:-20px;
  min-height: 200rpx;
  box-shadow: 0rpx 5rpx 27rpx 0rpx rgba(195, 195, 195, 0.4);
  border-radius: 40rpx;
  overflow-y: auto;
  padding-bottom:80rpx;
}
.prop-item{
  position: relative;
  display: flex;
  flex-direction: row;
  height: 100rpx;
  line-height: 100rpx;
  margin:0 20rpx;
}
.prop-item-left{
  color: #545454;
  width: 100%;
  font-size: 16px;
  border-bottom: 1px solid lightgray;
  margin-left: 120rpx;
}
.prop-item-image{
  width: 120rpx;
  height: 120rpx;
  position: absolute;
  bottom:-10rpx;
}
.prop-item-right{
  position: absolute;
  right:10rpx;
  top:5rpx;
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
  color:#666;
  font-size:12px;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.decoctControlHeader {
  display: flex;
  align-items: center;
  font-weight: 600;
}
.decoctControlTop {
  display: flex;
  height: 240rpx;
  border-bottom:1px #B2B2B2 dotted;
  margin:0 40rpx;
}
.decoctControlTopLeft {
  width:40%;
  line-height: 2;
  text-align: center;
  margin: 0 15px;
  position: relative;
}
.addTemperature {
  border-radius:5px;
  position:absolute;
  background-color: dodgerblue;
  color:white;
  width: 30px;
  height: 30px;
  left:15px;
  top:80px;
}
.addTemperatureBtn {
  border-radius:10px;
  position:absolute;
  clip-path: polygon(50% 0,100% 100%,0 100%);
  transform: scale(0.5);
  left: 0;
  top:0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.subTemperature {
  border-radius:5px;
  position:absolute;
  background-color: dodgerblue;
  color:white;
  width: 30px;
  height: 30px;
  right:15px;
  top:80px;
}
.subTemperatureBtn {
  border-radius:10px;
  position:absolute;
  clip-path: polygon(50% 0,100% 100%,0 100%);
  transform: scale(0.5);
  left: 0;
  top:0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.decoctControlTopRight {
  width:40%;
  line-height: 2;
  text-align: center;
  margin: 0 15px;
  position: relative;
}
.decoctControlBottom {
  border-bottom:1px #B2B2B2 dotted;
  width:91vw;
  margin:0 auto;
  padding:10px;
  display: flex;
  justify-content:space-between;
  align-items: center;
}
.addTime {
  border-radius:5px;
  position:absolute;
  background-color: dodgerblue;
  color:white;
  width: 30px;
  height: 30px;
  left:15px;
  top:80px;
}
.addTimeBtn {
  border-radius:10px;
  position:absolute;
  clip-path: polygon(50% 0,100% 100%,0 100%);
  transform: scale(0.5);
  left: 0;
  top:0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.subTime {
  border-radius:5px;
  position:absolute;
  background-color: dodgerblue;
  color:white;
  width: 30px;
  height: 30px;
  right:15px;
  top:80px;
}
.subTimeBtn {
  border-radius:10px;
  position:absolute;
  clip-path: polygon(50% 0,100% 100%,0 100%);
  transform: scale(0.5);
  left: 0;
  top:0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.packageControlBottomRight {
  border-radius:5px;
  padding:5px 10px;
  margin-right: 15px;
  background-color: #3c9cff;
  color: #fff;
}
.packageControlBottomClear {
  border-radius:5px;
  padding:5px 10px;
  background-color: #B2B2B2;
  color: #fff;
}

.active_btn{
  background-color: #3c9cff;
}

.baozhuang-sub{
  right: 10rpx !important;
}
.baozhuang-add{
  left: 6rpx !important;
}
.control-input-box{
  display: flex;
  flex-direction: row;
  padding-left: 26rpx;
}
.control-input-box-danwei{
  padding-top:12rpx;
  margin-left:4rpx;
}
.tabs{
 position: relative;
  top:15vh;
}
.child_tab{
  position: relative;
  display: inline-block;
  width: 25%;
  height: 180rpx;
}
.child_img{
  width: 50rpx;
  height: 50rpx;
  left: 66rpx;
  top: 66rpx;
  position: relative;
}
.child_title{
  position: absolute;
  left: 0px;
  right: 0px;
  text-align: center;
  font-size: 12px;
  bottom: -12rpx;
  color: #060B25;
}
.control{
  width: 100%;
  position: relative;
}
.control_item{
  position: relative;
  width: 50%;
  display: inline-block;
  height: 150rpx;
}
.control_item_detail{
  position: relative;
  top:22rpx;
}
.control_item_left{
    position:absolute;;
  left:22%;
  font-size: 55px;
  z-index: 999;
  top:-30rpx

}
.control_item_center{
  position:absolute;;
  left:34%;
  top:0vh;
}
.control_item_right{
  position:absolute;;
  left:67%;
  font-size: 34px;
  z-index: 999;
}
.control_item_center_unit{
  position: absolute;
  left:26vw;
  top: 0.8vh;
  width:200rpx;
}
.control_item_title{
position: absolute;
  bottom:34rpx;
  font-size: 12px;
  width: 100%;
  text-align: center;
}
.bottom{
  height: 190rpx;
  position: absolute;
  left: 0px;
  width: 100%;
  padding-top: 18rpx;
}
.bottom_item{
    display: inline-block;
    width: 25%;
  font-size: 12px;
  height: 100%;
  position: relative;
  text-align: center;
  margin-top: 2vh;
}
.active_on{
  color: #50ACFF;
}
.status_info{
  position: absolute;
  left: 5vw;
  top: 10vh;
}
.status_detail{
  display: flex;
  flex-direction: row;
}
.status_text{
font-size: 16px;
}
.online_text{
  font-size: 12px;
  padding-top: 3px;
}
.online{
  color: #017128;
}
.device_info{
  font-size: 13px;
}
.control_area{
  position: relative;
  top:19vh;
}
.disabled_tab{
  opacity: 0.4;
}
.roate{
  transform: rotate(180deg);
}
</style>