tianmucloudmobile/pages/device/detail.vue

<template>
  <view class="content">
    <view class="header" style="margin:0;padding: 0px;">

      <view class="bg" style="position: fixed;top:0px;bottom:0px;left:0px;right:0px;background-image: url('https://hyscancode.oss-cn-hangzhou.aliyuncs.com/jianyaoji/images/device/bg.png');background-size: 100% 100%;padding:0 40rpx">
        <view style="position: absolute;right:10rpx;top:30rpx">
          <u-button @click="reportError" color="#EC6D2F" text="上报异常" type="error" size="mini"></u-button>
        </view>

        <view style="position: absolute;right:52rpx;top:116rpx;" v-if="deviceInfo.status == 3">
          <view>
            <u-image :showLoading="true" src="/static/images/device/zaixian.png" width="200rpx" height="200rpx" ></u-image>
          </view>
          <view style="position: absolute;color:#48C373;top:110rpx;left:70rpx">在线</view>
        </view>

        <view style="position: absolute;right:52rpx;top:116rpx;"  v-if="deviceInfo.status == 4">
          <view>
            <u-image :showLoading="true" src="/static/images/device/offline.png" width="200rpx" height="200rpx" ></u-image>
          </view>
          <view style="position: absolute;color:lightgray;top:110rpx;left:70rpx">离线</view>
        </view>
        <view style="font-weight: bold;font-size: 30rpx;margin-top:20rpx">
          {{deviceInfo.deviceName}}

        </view>
        <view class="prop-text">
          <text class="text-left">所属用户：</text>
          <text class="text-right">{{sysDept.deptName}}</text>
        </view>
        <view class="prop-text">
          <text class="text-left">设备编号：</text>
          <text class="text-right">{{deviceInfo.serialNumber}}</text>
        </view>
        <view class="prop-text">
          <text class="text-left">二维码ID：</text>
          <text class="text-right">{{deviceInfo.qrcodeId==null?"未绑定":deviceInfo.qrcodeId}}</text>
        </view>


        <view class="prop-text">
          <text class="text-left">激活时间：</text>
          <text class="text-right">{{deviceInfo.activeTime}}</text>
        </view>
        <view class="prop-text">
          <text class="text-left">查看位置：</text>
          <view style="position: absolute;top:0px;left:120rpx">
            <u-icon name="map-fill" label="查看位置" color="#2979ff" size="20" labelSize="12"></u-icon>
          </view>
        </view>

        <view class="prop-card-area">

          <view class="prop-card">
            <view class="prop-card-top">{{ deviceInfo.rssi }}</view>
            <view class="prop-card-bottom">设备信号</view>

          </view>
          <view class="prop-card">
            <view class="prop-card-top">{{ timeobj.alltime }}</view>
            <view class="prop-card-bottom">累计时长</view>

          </view>
          <view class="prop-card">
            <view class="prop-card-top">{{ timeobj.avgtime }}</view>
            <view class="prop-card-bottom">平均时长</view>

          </view>
        </view>

        <view class="tab-area">

<!--          <u-tabs lineWidth="80"  :activeStyle="{ color: '#3E9CFC' }" :list="summary" keyName="tabName" @change="getDeviceStatus"></u-tabs>-->

          <u-tabs lineWidth="80"  :activeStyle="{ color: '#3E9CFC' }" :list="summary" :current="current" keyName="tabName" @change="getNewDeviceStatus"></u-tabs>


          <view>
            <uni-row class="demo-uni-row">
              <uni-col :span="12">
              </uni-col>
            </uni-row>
            <uni-row class="demo-uni-row">
              <uni-col :span="12">

              </uni-col>
            </uni-row>

            <!--
           <view v-if="deviceInfo.status == 3">
             <view class="prop-item">
               <view class="prop-item-left">开机</view>
               <view class="prop-item-right"> <u-switch inactiveColor="lightgray" activeColor="rgb(96,195,113)" v-model="power.value" :loading ="power.loading" @change="changeProp('PowerControl')"></u-switch>
               </view>
             </view>
             <view class="prop-item">
               <view class="prop-item-left">锁定</view>
               <view class="prop-item-right">
                 <u-switch inactiveColor="lightgray" activeColor="rgb(96,195,113)" v-model="lock.value" :loading ="lock.loading" @change="changeProp('LockControl')"></u-switch>
               </view>
             </view>
           </view>
           <view v-if="deviceInfo.status != 3">
             <view class="prop-item">
               <view class="prop-item-left">开机</view>
               <view class="prop-item-right"> <u-switch inactiveColor="lightgray" activeColor="rgb(96,195,113)" value="0" :loading ="power.loading" @change="changeProp('PowerControl')"></u-switch>
               </view>
             </view>
             <view class="prop-item">
               <view class="prop-item-left">锁定</view>
               <view class="prop-item-right">
                 <u-switch inactiveColor="lightgray" activeColor="rgb(96,195,113)" value="0" :loading ="lock.loading" @change="changeProp('LockControl')"></u-switch>
               </view>
             </view>
           </view>
            -->
<!--            <view class="demo-uni-row" v-if="deviceInfo.status != 3">-->
<!--              <view span="12" style="width: 50vw;  float: left;">-->
<!--                <uni-card  v-if="power.value > 0" extra="设备开关" thumbnail="/static/images/device/opened.png"  @click="changeProp('PowerControl',0)">-->
<!--                  <text>已开启,点击图标关闭</text>-->
<!--                  &lt;!&ndash;                   <text>已开启</text>&ndash;&gt;-->
<!--                  &lt;!&ndash;                   <u-image src="/static/images/device/opened.png" width="200rpx" height="200rpx"></u-image>&ndash;&gt;-->
<!--                </uni-card>-->
<!--                <uni-card  v-else extra="设备开关" thumbnail="/static/images/device/closed.png"  @click="changeProp('PowerControl',1)">-->
<!--                  <text>已关闭,点击图标开启</text>-->
<!--                  &lt;!&ndash;                   <text>已关闭</text>&ndash;&gt;-->
<!--                  &lt;!&ndash;                   <u-image src="/static/images/device/opened.png" width="200rpx" height="200rpx"></u-image>&ndash;&gt;-->
<!--                </uni-card>-->
<!--              </view>-->

<!--              <view span="12"  style="width: 50vw;  float: left;">-->
<!--                <uni-card  v-if="lock.value > 0" extra="设备锁定" thumbnail="/static/images/device/locked.png" @click="changeProp('LockControl',0)" >-->
<!--                  <text>已上锁,点击图标解锁</text>-->
<!--                  &lt;!&ndash;                   <text>已上锁</text>&ndash;&gt;-->
<!--                  &lt;!&ndash;                   <u-image src="/static/images/device/locked.png" width="200rpx" height="200rpx"></u-image>&ndash;&gt;-->
<!--                </uni-card>-->

<!--                <uni-card  v-else extra="设备锁定" thumbnail="/static/images/device/unlocked.png" @click="changeProp('LockControl',1)" >-->
<!--                  <text>未上锁,点击图标上锁</text>-->
<!--                  &lt;!&ndash;                   <text>未上锁</text>&ndash;&gt;-->
<!--                  &lt;!&ndash;                   <u-image src="/static/images/device/locked.png" width="200rpx" height="200rpx"></u-image>&ndash;&gt;-->
<!--                </uni-card>-->
<!--              </view>-->
<!--              <view style="clear: both"></view>-->
<!--            </view>-->

            <!--  煎药控制 -->
            <view class="demo-uni-row" v-if="DecoctControlStatus">
              <!-- 子tab -->
              <view style="width:70%;margin:0 auto">
                <u-tabs :list="subDecoctTabList" :current="subCurrent" @change="changeSub"></u-tabs>
              </view>

              <!-- 设备和锁定开关 -->
              <view class="demo-uni-row clearfix">
                <view span="12" style="width: 50vw;  float: left;">
                  <uni-card  v-if="power.value > 0" extra="设备开关" thumbnail="/static/images/device/opened.png"  @click="changeProp('PowerControl',0)">
                    <text>已开启,点击图标关闭</text>
                    <!--                   <text>已开启</text>-->
                    <!--                   <u-image src="/static/images/device/opened.png" width="200rpx" height="200rpx"></u-image>-->
                  </uni-card>
                  <uni-card  v-else extra="设备开关" thumbnail="/static/images/device/closed.png"  @click="changeProp('PowerControl',1)">
                    <text>已关闭,点击图标开启</text>
                    <!--                   <text>已关闭</text>-->
                    <!--                   <u-image src="/static/images/device/opened.png" width="200rpx" height="200rpx"></u-image>-->
                  </uni-card>
                </view>

                <view span="12"  style="width: 50vw;  float: left;">
                  <uni-card  v-if="lock.value > 0" extra="设备锁定" thumbnail="/static/images/device/locked.png" @click="changeProp('LockControl',0)" >
                    <text>已上锁,点击图标解锁</text>
                    <!--                   <text>已上锁</text>-->
                    <!--                   <u-image src="/static/images/device/locked.png" width="200rpx" height="200rpx"></u-image>-->
                  </uni-card>

                  <uni-card  v-else extra="设备锁定" thumbnail="/static/images/device/unlocked.png" @click="changeProp('LockControl',1)" >
                    <text>未上锁,点击图标上锁</text>
                    <!--                   <text>未上锁</text>-->
                    <!--                   <u-image src="/static/images/device/locked.png" width="200rpx" height="200rpx"></u-image>-->
                  </uni-card>
                </view>
                <view style="clear: both"></view>
              </view>

              <!-- 头部 -->
              <view class="decoctControlHeader">
                <uni-icons custom-prefix="iconfont" type="icon-fuzhushuxian" size="30"></uni-icons>
                <text>煎药控制</text>
              </view>

              <!-- 腰部 -->
              <view>
                <!-- 上边部份 -->
                <view class="decoctControlTop">
                  <!-- 左边 -->
                  <view class="decoctControlTopLeft">
                    <text>温度设置</text>
                    <u-input placeholder="请输入"></u-input>
                    <view class="addTemperature">
                      <u-button class="addTemperatureBtn" @click="addTemperature"></u-button>
<!--                      <uni-icons custom-prefix="iconfont" type="icon-zengjia-huoyue" size="30"></uni-icons>-->
                    </view>

                    <view class="subTemperature">
                      <u-button class="subTemperatureBtn" @click="subTemperature"></u-button>
<!--                      <uni-icons custom-prefix="iconfont" type="icon-jianshao-huoyue" size="30"></uni-icons>-->
                    </view>

                  </view>

                  <!-- 右边 -->
                  <view class="decoctControlTopRight">
                    <text>时间设置</text>
                    <u-input placeholder="请输入"></u-input>
                    <view class="addTime">
                      <u-button class="addTimeBtn"></u-button>
                    </view>

                    <view class="subTime">
                      <u-button class="subTimeBtn"></u-button>
                    </view>

                  </view>
                </view>

                <!-- 下边部份 -->
                <view class="decoctControlTop">
                  <!-- 左边 -->
                  <view class="decoctControlTopLeft">
                    <text>当前温度</text>
                    <u-input placeholder="请输入"></u-input>
                    <view class="addTemperature">
                      <u-button class="addTemperatureBtn"></u-button>
                    </view>

                    <view class="subTime">
                      <u-button class="subTimeBtn"></u-button>
                    </view>
                  </view>

                  <!-- 右边 -->
                  <view class="decoctControlTopRight">
                    <text>高温时间</text>
                    <u-input placeholder="请输入"></u-input>
                    <view class="addTemperature">
                      <u-button class="addTemperatureBtn"></u-button>
                    </view>

                    <view class="subTime">
                      <u-button class="subTimeBtn"></u-button>
                    </view>

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

              <!-- 尾部 -->
              <view>
                <!-- 上边 -->
                <view class="decoctControlBottom" >
                  <!-- 左边 -->
                  <view>
                    <text>开关状态</text>
                  </view>
                  <!-- 右边 -->
                  <view style="display: flex;align-items: center">
                    <text style="margin-right: 15px">已开机</text>
                    <u-switch v-model="decoctControlOnOffStatus" @change="decoctControlOnOffChange"></u-switch>
                  </view>
                </view>

                <!-- 下边 -->
                <view class="decoctControlBottom">
                  <!-- 左边 -->
                  <view>
                    <text>煎药状态</text>
                  </view>
                  <!-- 右边 -->
                  <view style="display: flex;align-items: center">
                    <text style="margin-right: 15px">煎药中</text>
                    <u-switch v-model="decoctControlStatus" @change="decoctControlChange"></u-switch>
                  </view>
                </view>

              </view>

            </view>

            <!--  包装控制 -->
            <view class="demo-uni-row" v-if="PackagControlStatus">

              <view class="demo-uni-row clearfix">
                <view span="12" style="width: 50vw;  float: left;">
                  <uni-card  v-if="power.value > 0" extra="设备开关" thumbnail="/static/images/device/opened.png"  @click="changeProp('PowerControl',0)">
                    <text>已开启,点击图标关闭</text>
                    <!--                   <text>已开启</text>-->
                    <!--                   <u-image src="/static/images/device/opened.png" width="200rpx" height="200rpx"></u-image>-->
                  </uni-card>
                  <uni-card  v-else extra="设备开关" thumbnail="/static/images/device/closed.png"  @click="changeProp('PowerControl',1)">
                    <text>已关闭,点击图标开启</text>
                    <!--                   <text>已关闭</text>-->
                    <!--                   <u-image src="/static/images/device/opened.png" width="200rpx" height="200rpx"></u-image>-->
                  </uni-card>
                </view>

                <view span="12"  style="width: 50vw;  float: left;">
                  <uni-card  v-if="lock.value > 0" extra="设备锁定" thumbnail="/static/images/device/locked.png" @click="changeProp('LockControl',0)" >
                    <text>已上锁,点击图标解锁</text>
                    <!--                   <text>已上锁</text>-->
                    <!--                   <u-image src="/static/images/device/locked.png" width="200rpx" height="200rpx"></u-image>-->
                  </uni-card>

                  <uni-card  v-else extra="设备锁定" thumbnail="/static/images/device/unlocked.png" @click="changeProp('LockControl',1)" >
                    <text>未上锁,点击图标上锁</text>
                    <!--                   <text>未上锁</text>-->
                    <!--                   <u-image src="/static/images/device/locked.png" width="200rpx" height="200rpx"></u-image>-->
                  </uni-card>
                </view>
                <view style="clear: both"></view>
              </view>
              <!-- 头部 -->
              <view class="decoctControlHeader">
                <uni-icons custom-prefix="iconfont" type="icon-fuzhushuxian" size="30"></uni-icons>
                <text>包装控制</text>
              </view>

              <!-- 腰部 -->
              <view>
                <!-- 上边部份 -->
                <view class="decoctControlTop">
                  <!-- 左边 -->
                  <view class="decoctControlTopLeft">
                    <text>封边温度</text>
                    <u-input placeholder="请输入"></u-input>
                    <view class="addTemperature">
                      <u-button class="addTemperatureBtn"></u-button>
                    </view>

                    <view class="subTime">
                      <u-button class="subTimeBtn"></u-button>
                    </view>

                  </view>

                  <!-- 右边 -->
                  <view class="decoctControlTopRight">
                    <text>封口温度</text>
                    <u-input placeholder="请输入"></u-input>
                    <view class="addTemperature">
                      <u-button class="addTemperatureBtn"></u-button>
                    </view>

                    <view class="subTime">
                      <u-button class="subTimeBtn"></u-button>
                    </view>

                  </view>
                </view>

                <!-- 下边部份 -->
                <view class="decoctControlTop">
                  <!-- 左边 -->
                  <view class="decoctControlTopLeft">
                    <text>包装容量</text>
                    <u-input placeholder="请输入"></u-input>
                    <view class="addTemperature">
                      <u-button class="addTemperatureBtn"></u-button>
                    </view>

                    <view class="subTime">
                      <u-button class="subTimeBtn"></u-button>
                    </view>

                  </view>

                  <!-- 右边 -->
                  <view style="width:40%;line-height: 2;text-align: center;margin: 0 15px;position: relative">
                    <text>包装数量</text>
                    <u-input placeholder="请输入"></u-input>
                    <view class="addTemperature">
                      <u-button class="addTemperatureBtn"></u-button>
                    </view>

                    <view class="subTime" >
                      <u-button class="subTimeBtn"></u-button>
                    </view>

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

              <!-- 尾部 -->
              <view>
                <!-- 上边 -->
                <view class="decoctControlBottom">
                  <!-- 左边 -->
                  <view>
                    <text>开关</text>
                  </view>
                  <!-- 右边 -->
                  <view style="display: flex;align-items: center">
                    <text style="margin-right: 15px">已开机</text>
                    <u-switch v-model="packageControlOnOffStatus" @change="packageControlOnOffChange"></u-switch>
                  </view>
                </view>

                <!-- 下边 -->
                <view class="decoctControlBottom">
                  <!-- 左边 -->
                  <view>
                    <text>模式</text>
                  </view>
                  <!-- 右边 -->
                  <view style="display: flex;align-items: center">
                    <text class="packageControlBottomRight">包装</text>
                    <text class="packageControlBottomClear">清洗</text>
                  </view>
                </view>

              </view>

            </view>

            <view class="action-btn">
              <button @click="showDrawer" class="login-btn cu-btn block bg-blue lg round" style="flex: 0 0 auto;width: 55%;margin: 0 auto;margin-top:20px;">查看更多属性</button>
            </view>
            <uni-drawer ref="showLeft" :width="320" :maskClick="true" mode="left"  @change="change($event,'showLeft')">


              <!--               <view class="item" style="padding-top:10rpx">-->
              <!--                 <u-button v-if="deviceInfo.status==3"-->
              <!--                           @tap="send(item)"-->
              <!--                           text="发送"-->
              <!--                           type="success"-->
              <!--                           size="mini"-->
              <!--                 ></u-button>-->
              <!--                 <u-button v-if="deviceInfo.status!=3"-->
              <!--                           @tap="send(item)"-->
              <!--                           text="发送"-->
              <!--                           type="info"-->
              <!--                           size="mini"-->
              <!--                 ></u-button>-->
              <!--               </view>-->
              <scroll-view style="height: 88%;" scroll-y="true">
                <view style="margin-top:20rpx;margin-left:20rpx" v-if="properties.length>0">属性区</view>
                <view v-for="item in properties"  v-if="checkCommonProp(item)">
                  <view class="prop-item">
                    <view class="prop-item-left">{{item.name}}</view>
                    <view class="prop-item-right">
                      <view v-if="item.type === 'integer'" style="width:240rpx;position: absolute;top: 10rpx;;">
                        <u-input :customStyle="inputStyle" fontSize="20rpx" type="number" placeholder="请输入整数"   v-model="item.shadow">
                        </u-input>
                      </view>
                      <view style="width:240rpx;position: absolute;top:0rpx;" v-if="item.type === 'string'">
                        <u-input :customStyle="inputStyle" fontSize="20rpx"  placeholder="请输入字符串"  v-model="item.shadow">
                        </u-input>
                      </view>
                      <view style="width:240rpx;position: absolute;top: 0rpx;" v-if="item.type === 'array'">
                        <u-input :customStyle="inputStyle" fontSize="20rpx" placeholder="请使用英文逗号分隔的字符串"  v-model="item.shadow">
                        </u-input>
                      </view>
                      <view style="padding:0 10rpx;position: absolute;top: -10rpx;left: -40rpx;" v-if="item.type === 'enum'">

                        <u-cell customStyle="border:0px;" size="mini" @click="chooseItemData(item)" arrow-direction="left" v-if="item.text != null && item.text.length>0" :title="item.text">
                          <u-icon slot="icon" size="12" name="arrow-down"></u-icon>

                        </u-cell>

                        <u-cell customStyle="border:0px;" size="mini" @click="chooseItemData(item)" arrow-direction="down" v-else title="请选择">
                          <u-icon slot="icon" size="12" name="arrow-down"></u-icon>

                        </u-cell>

                      </view>

                    </view>
                  </view>
                </view>
                <view v-if="properties.length>0">
                  <button style="width: 30%; height: 58rpx;
    margin-top: 20rpx;    float: right;
    margin-right: 140rpx;" @click="sendProperties" class="login-btn cu-btn block bg-blue lg round send_btn">发送</button>
                </view>
                <view style="margin-top:20rpx;margin-left:20rpx" v-if="functions.length>0">功能区</view>
                <view v-for="item in functions"  v-if="checkCommonProp(item)">
                  <view class="prop-item">
                    <view class="prop-item-left">{{item.name}}</view>
                    <view class="prop-item-right">
                      <view v-if="item.type === 'integer'" style="width:240rpx;position: absolute;top: 10rpx;;">
                        <u-input :customStyle="inputStyle" fontSize="20rpx"  placeholder="请输入整数"   v-model="item.shadow">
                        </u-input>
                      </view>
                      <view style="width:240rpx;position: absolute;top:0rpx;" v-if="item.type === 'string'">
                        <u-input :customStyle="inputStyle" fontSize="20rpx"  placeholder="请输入字符串"  v-model="item.shadow">
                        </u-input>
                      </view>
                      <view style="width:240rpx;position: absolute;top: 0rpx;" v-if="item.type === 'array'">
                        <u-input :customStyle="inputStyle" fontSize="20rpx" placeholder="请使用英文逗号分隔的字符串"  v-model="item.shadow">
                        </u-input>
                      </view>
                      <view style="padding:0 10rpx;position: absolute;top: -10rpx;left: -40rpx;" v-if="item.type === 'enum'">

                        <u-cell customStyle="border:0px;" size="mini" @click="chooseItemData(item)" arrow-direction="left" v-if="item.text != null && item.text.length>0" :title="item.text">
                          <u-icon slot="icon" size="12" name="arrow-down"></u-icon>

                        </u-cell>

                        <u-cell customStyle="border:0px;" size="mini" @click="chooseItemData(item)" arrow-direction="down" v-else title="请选择">
                          <u-icon slot="icon" size="12" name="arrow-down"></u-icon>

                        </u-cell>

                      </view>

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

                <view v-if="functions.length>0">
                  <button style="width: 30%; height: 58rpx;
    margin-top: 20rpx;    float: right;
    margin-right: 140rpx;" @click="sendFunctions" class="login-btn cu-btn block bg-blue lg round send_btn">发送</button>
                </view>

                <view style="margin-top:20rpx;margin-left:20rpx">
                  <u--text text="属性监控" style="margin-top:20px"></u--text>
                </view>

                <view class="prop-item"  v-if="checkCommonProp(item)"  v-for="item in deviceInfo.readOnlyList">
                  <view class="prop-item-left">{{item.name}}</view>
                  <view class="prop-item-right" style="width:240rpx;position: absolute;top: 10rpx;right: 70rpx;">
                    <u-input v-if="checkItemValue(item)" :customStyle="inputStyle"  placeholder="请输入字符串" disabled=""  :value="item.shadow+' '+item.unit">
                    </u-input>
                  </view>
                </view>



              </scroll-view>
              <button @click="closeDrawer" class="login-btn cu-btn block bg-blue lg round">关闭</button>
            </uni-drawer>




          </view>


        </view>


      </view>


      <u-picker @cancel="show=null" :show="show!=null" :columns="columns" @confirm="confirmItemData" keyName="text"></u-picker>
      <u-modal @cancel="cancel" :show="showErrDlg" title="异常上报" :showCancelButton="true" @confirm="doReportError" >
        <view class="slot-content">

          <view style="margin:10px">
            <textarea auto-height	="true"  v-model="errorMsg" placeholder="请输入异常内容" ></textarea>


          </view>
        </view>
      </u-modal>

      <!--      <u-modal  :show="showTimeDlg" title="查看时长"  @confirm="closeTime" >-->
      <!--        <view class="slot-content">-->
      <!--            <view v-if="timeobj!=null && deviceInfo.status == 3">本次运行时长：{{ timeobj.runtime }}</view>-->
      <!--          <view v-if="timeobj!=null ">累计时长：{{ timeobj.alltime }}</view>-->

      <!--             <view v-if="timeobj!=null ">平均每天运行时长：{{ timeobj.avgtime }}</view>-->

      <!--        </view>-->
      <!--      </u-modal>-->
    </view>
  </view>
</template>

<script>
import { getDetail,getDeviceStatus,cacheJsonThingsModel,reportError ,getDeviceRunTime} from '@/api/device/device.js'
import UButton from "../../uni_modules/uview-ui/components/u-button/u-button";
import UForm from "../../uni_modules/uview-ui/components/u--form/u--form";
import UInput from "../../uni_modules/uview-ui/components/u--input/u--input";
import UImage from "../../uni_modules/uview-ui/components/u--image/u--image";
export default {
  components: {UImage, UInput, UForm, UButton},
  data(){
    return {
      decoctControlStatus:true,
      decoctControlOnOffStatus:true,
      packageControlOnOffStatus:true,
      subDecoctTabList:[
        {name:'子煎药1'},
        {name:'子煎药2'},
        {name:'子煎药3'},
      ],
      DecoctControlStatus:true,
      PackagControlStatus:false,
      subCurrent:0,
      current:0,
      inputStyle:{height:'44rpx','fontSize':'20rpx'},
      modelKey:['PowerControl','LockControl'],
      power:{
        loading:true,
        value:0,
      },
      lock:{
        loading:true,
        value:0,
      },
      showTimeDlg:false,
      showErrDlg:null,
      errorMsg:"asdasdasdasd",
      show:null,
      value:"",
      deviceInfo:{},
      id:0,
      summary:[
        {tabName:"煎药控制"},
        {tabName:"包装控制"},
      ],
      activeName:0,
      childId:"",
      oneToMul:false,
      inputProp:[],
      watchProp:[],
      columns:[],
      location:{},
      sysDept:null,
      timeobj:{alltime:0,avgtime:0},
      publishMsg:false,
      checkTimer:null,
      functions:[],
      properties:[]
    }
  },
  onLoad: function(opt) {
    this.id = opt.id;
    // this.id = 61;
    this.connectMqtt();
    this.getDetail();
  },
  destroyed() {
    // 取消订阅主题
    this.mqttUnSubscribe(this.deviceInfo);
    clearTimeout(this.checkTimer);
  },
  methods:{
    addTemperature(){
      console.log("增加煎药温度")
    },
    subTemperature(){
      console.log("减少煎药温度")
    },
    decoctControlChange(){
      if(this.decoctControlStatus){
        console.log("煎药打开")
      }else{
        console.log("煎药关闭")
      }
    },
    decoctControlOnOffChange(){
      if(this.decoctControlOnOffStatus){
        console.log("煎药开关打开")
      }else{
        console.log("煎药开关关闭")
      }
    },
    packageControlOnOffChange(){
      if(this.packageControlOnOffStatus){
        console.log("包装控制打开")
      }else{
        console.log("包装控制关闭")
      }

    },
    // 抽屉状态发生变化触发
    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;
      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;
      }

      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.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();
      });
    },
    getDeviceStatus(e){
      let self = this;
      if(!e){
        e = {index:0};
        this.childId = 0;
      }else{
        this.activeName = e.index;
        //this.childId = this.summary[this.activeName].id;
      }
      getDeviceStatus(this.id,this.childId).then(res=>{
        let data =res.data;
        this.deviceInfo = data;
        self.parseStatusData(data)
      });
    },
    getNewDeviceStatus(item){
      /*{
      "tabName": "包装控制",
          "rect": {
        "id": "",
            "dataset": {},
        "left": 82,
            "right": 164,
            "top": 205,
            "bottom": 249,
            "width": 82,
            "height": 44
      },
      "index": 1
    }
    */
      if(item.index == 0){
        this.DecoctControlStatus = true;
        this.PackagControlStatus = false;
      }

      if(item.index == 1){
        this.DecoctControlStatus = false;
        this.PackagControlStatus = true;
      }

    },
    changeSub(item){
      console.log(item);
    },
    parseEnumList(){
      let enumList = this.deviceInfo.enumList;
      for (let enumListElement of enumList) {
        let id = enumListElement.id;
        let isCommonKey = this.modelKey.some(res=>{
          return id === res;
        })
        if(isCommonKey){
          if(id.indexOf("LockControl") !=-1){
            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.indexOf("PowerControl") !=-1){
            let shadow = enumListElement.shadow;
            this.power.item = enumListElement;
            if(shadow == 1){
              this.power.value  = true;
              this.power.loading = false;
            }else if(shadow == 0){
              this.power.value  = false;
              this.power.loading = false;
            }else{
              this.power.loading = true;
            }
          }
        }
        let shadow = enumListElement.shadow
        let valueList = enumListElement.enumList;
        for (let valueObj of valueList){
          if(valueObj.value == shadow){
            enumListElement.text = valueObj.text;
          }
        }
      }
    },
    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();
      })

    },
    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].id+"_"+self.summary[i].name
        }
        let childId = "";
        if(this.oneToMul){
          let info = self.summary[self.activeName];
          childId = info.id;
        }
        this.childId = childId;
      }else{
        this.summary = [{tabName:"详情查看"}]
      }
    },
    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.summary[this.activeName].id;
            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});
                }
              }
            }
            message = msg;
          }
          // 更新列表中设备的属性
          if (this.deviceInfo.serialNumber == deviceNum) {
            for (let j = 0; j < message.length; j++) {
              let isComplete = false;
              // 布尔类型
              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();
          }
        }
      });
    },
    /** 发布物模型 类型(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"
      })
    },
    /**
     * Mqtt发布消息
     * @type 类型(1=属性，2=功能，3=OTA升级，4=实时监测)
     * @device 设备
     * @model 物模型
     * */
    mqttPublish(type, device, modelList) {
      if(modelList.length == 0){
        return;
      }
      let topic = "";
      let message = ""
      let oneToMul = false;
      if(this.summary.length>0){
        oneToMul = true;
      }
      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 = "功能";
      }
      if (topic != "") {
        // 发布
        let arr = [];
        for (let i = 0; i <modelList.length; i++) {
          let model = modelList[i];
          let modelId = model.id;
          if(oneToMul){
            let info = this.summary[this.activeName];
            let childId = info.id;
            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: 300rpx;

}
uni-col{
  width: 150px;
}
.header{
  width: 100%;
  background: white;
  padding:0px 20rpx;
  position: relative;

}
.content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.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{
  justify-content:center;
  position: relative;
  border-bottom: 1px solid lightgray;
  height: 80rpx;
  margin:0 20rpx;
}
.prop-item-left{
  position: absolute;
  left:10rpx;
  top:22rpx;
  color: #545454;
  width: 50%;
  font-size: 12px;
}

.prop-item-right{
  position: absolute;
  right:10rpx;
  top:10rpx;
  width: 50%;
}
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: 120px;
  border-bottom:1px #B2B2B2 dotted;
}
.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:71px;
}
.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:71px;
  transform: rotate(180deg);
}
.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:85vw;
  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:71px;
}
.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:71px;
  transform: rotate(180deg);
}
.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;
}

</style>