v1版本

<?php

use yii\helpers\Html;
use yii\helpers\Url;
use yii\widgets\DetailView;
use yii\grid\GridView;
use app\models\DeviceStatus;
use yii\widgets\ActiveForm;
use yii\bootstrap\Modal;
use yii\bootstrap\Alert;
/* @var $this yii\web\View */
/* @var $model app\models\Device */

$this->title = "设备详情-$model->station_name 编号: $model->device_id";
$this->params['breadcrumbs'][] = ['label' => '自救设备', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
if( Yii::$app->getSession()->hasFlash('error') ) {
    echo Alert::widget([
        'options' => [
            'class' => 'alert-error',
        ],
        'body' => Yii::$app->getSession()->getFlash('error'),
    ]);
}
if( Yii::$app->getSession()->hasFlash('success') ) {
    echo Alert::widget([
        'options' => [
            'class' => 'alert-success', //这里是提示框的class
        ],
        'body' => Yii::$app->getSession()->getFlash('success'), //消息体
    ]);
}
?>
<script type="text/javascript">
window.onpageshow = function(event){
  if (event.persisted) {
      window.location.reload();
  }
}
</script>
<style>
.box-header a{
    display:inline-block;
}
body{
    font-size:16px;
}
a:link,a:visited,a:hover,a:active { color:white; text-decoration: none;}
.close{
    line-height:72%;
    font-size:300%;
}
.bg-yellow {
    background-color: #f39c12 !important
}
</style>
<div id="dialog1" style="display:none">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">故障确认</strong></div>
        <div style="color:#696969;font-size:16px" class="weui-dialog__bd">您确认已知道<?=$model->station_name?>的故障情况吗?</div>
        <div class="weui-dialog__ft">
            <a style="color:red" href="<?=yii\helpers\Url::toRoute(['know','device_id'=>$model->device_id])?>" class="weui-dialog__btn weui-dialog__btn_default">确认</a>
            <a style="color:green" href="javascript:quKnow()" class="weui-dialog__btn weui-dialog__btn_primary">再看看</a>
        </div>
    </div>
</div>

 <h4 style="display:inline-block;line-height:20px">设备信息</h4>
 <span style="sange">
        <?php if($isopen_flag){
            if($model->status == 0){
            echo '<a href="javascript:meKnow()" class="weui-btn weui-btn_mini weui-btn_warn">点击已知道</a>';
            }else if($model->status == 1){
              echo '<a href="javascript:;" class="weui-btn weui-btn_mini bg-yellow">您已知道此设备故障情况</a>';
            }
        ?>
<script type="text/javascript">
function meKnow(){
    document.getElementById('dialog1').style.display='block';
}
function quKnow(){
    document.getElementById('dialog1').style.display='none';
}
</script>

<!--         <?= Html::a('取消关注', ['delete', 'id' => $model->device_id], [
                            'class' => 'weui-btn weui-btn_mini weui-btn_warn',
                            'data' => [
                                'confirm' => '您确定取消关注'.$model->station_name.'吗?',
                                'method' => 'post',
                            ],
                        ]) ?> -->

        <?php  }?>

</span>

<?php
// Modal::begin([
// 'id' => 'map-modal',
// 'header' => '<h4 class="modal-title">设备地图信息</h4>',
// ]);
// echo '<iframe style="width:100%;height:380px"
//     src="http://apis.map.qq.com/tools/poimarker?type=0&marker=coord:39.98146,116.314966;title: '.$model->device_id.' '.$model->station_name.';&key=2GSBZ-SYKKI-7GXG6-5FHIP-KF4SV-6WBJX&referer=myapp">
// </iframe>';
// Modal::end();
?>

<div class="weui-form-preview">
            <?= DetailView::widget([
                'model' => $model,
                'template' => '<div style="margin-top:-5px" class="weui-cells">
                    <div class="weui-cell">
                        <div style="text-align:left;width:100%;color:#666666" class="weui-cell__ft">{value}</div>
                    </div></div>', 

                'options' => ['class' => ''],
                'attributes' => [
                    [
                    'label' => '设备详情',
                    'format' => 'raw',
                    'value' => '设备号码：'.$model->phone.'<br>基站名称：'.$model->station_name.'<br>设备编号：'.$model->device_id.'<br>设备地址：'.$model->province.' '.$model->city.' '.$model->location.'<br>长按关注设备微信二维码：'.Html::img('@web/'.$model->wcode, ['width' => 42]),
// Html::a('查看设备地图', '#', [
//  'id' => 'map',
//  'data-toggle' => 'modal',
//  'data-target' => '#map-modal',
//  'class' => 'weui-btn weui-btn_mini weui-btn_primary',
//  ]),
                    ],
                ],
            ]) ?>
        </div>

<h4>设备当前状态&nbsp;&nbsp;
<?php

              if ($model->type!=0&&$model->type!=1) {
                                $guzhang='<span style="color:red;font-size:16px">故障:';
                                switch ($model->type) {
                                    case 2:
                                        $guzhang.='放电';
                                        break;
                                    case 3:
                                        $guzhang.='电压小于48V';
                                        break;
                                    case 4:
                                        $guzhang.='剩余工作时间小于3小时';
                                        break;
                                    case 5:
                                        $guzhang.='设备失联';
                                        break;
                                    case 6:
                                        $guzhang.='设备故障';
                                        break;
                                    case 0:
                                        $guzhang.='运转良好';
                                        break;
                                }
                                echo $guzhang.'<span>';
                        }else{
                            echo '<span style="color:green;font-size:16px">运转良好</span>';
                        }

                        ?></h4>

            <?php if($device_status){?>
                    <?= DetailView::widget([
                        'model' => $device_status,
                        'template' => '<div style="margin-top:-8px" class="weui-cells">
                    <div class="weui-cell">
                        <div style="text-align:left;width:100%;color:#666666;padding-bottom:8px" class="weui-cell__ft">{value}</div>
                    </div>', 

                'options' => ['class' => ''],
                        'attributes' => [
                            [
                            'label'=>'记录时间',
                            'attribute'=>'create_time',
                            'value'=>function($device_status){
                                return '记录时间：'.date('Y/m/d H:i:s',$device_status->create_time);
                                },
                            ],
                            [
                            'label'=>'IP地址',
                            'attribute'=>'ip',
                            'value'=>function($device_status){
                                return 'ip地址：'.$device_status->ip;
                                },
                            ],
                            [
                            'label'=>'落后电池数量',
                            'attribute'=>'bad_battery_count',
                            'value'=>function($device_status){
                                return '落后电池数量：'.$device_status->bad_battery_count;
                                },
                            ],
                            [
                                'label'=>'落后电池',
                                'attribute'=>'v1',
                                'format'=>'raw',
                                'value'=>function($device_status){
                                    if($device_status->bad_battery_status==0){
                                                    return "落后电池：<span style='color:green'>没有电池落后，运转良好</span>";
                                    }else{
                                                  $msg='';
                                                  foreach($device_status->bad_battery_status as $key=>$value){
                                                            if($value==1) $msg.=($key*2+1).'，' . ($key*2+2) .'，';
                                                        }
                                                   $msg=rtrim($msg,'，');
                                                  if(strlen($msg)<1){
                                                    return "落后电池：<span style='color:green'>没有电池落后，运转良好</span>";
                                                  }else{
                                                    return "落后电池：<span style='color:red'>第".$msg."节电池为落后电池，请及时检修。</span>";
                                                  }
                                              }
                                }
                            ],
                            [
                            'label' => '状态详情',
                            'format' => 'raw',
                            'value' => '工作状态：'.DeviceStatus::$status_names[$device_status->status].
                            '<br>充电状态：'.DeviceStatus::$charge_names[$device_status->status_charge].
                            '<br>电压：'.$device_status->volt.'V'.
                            '<br>电流：'.$device_status->current.'A'.
                            '<br>工作时间：'.$device_status->work_min.'分钟(约'.round($device_status->work_min/60,1).'小时)'.
                            '<br>均衡电量：'.$device_status->zijiu_ah.'AH'.
                            '<br>均衡时间：'.$device_status->zijiu_min.'分钟(约'.round($device_status->zijiu_min/60,1).'小时)'.
                            '<br>充放电量：'.$device_status->output_ah.'AH'.
                            '<br>充放时间：'.$device_status->output_min.'分钟(约'.round($device_status->output_min/60,1).'小时)'.
                            '<br>剩余电量：'.$device_status->remain_ah.'AH'.
                            '<br>剩余时间：'.$device_status->remain_min.'分钟(约'.round($device_status->remain_min/60,1).'小时)'
                            ],
                            [
                                'label'=>'电池组电压',
                                'attribute'=>'v1',
                                'format'=>'raw',
                                'value'=>function($device_status){
                                    $bad=$device_status->bad_battery_status?$device_status->bad_battery_status:[0=>0,1=>0,2=>0,3=>0,4=>0,5=>0,6=>0,7=>0,8=>0,9=>0,10=>0,11=>0];
                                    $badcount=count($bad);
                                    if($badcount<12){
                                        for($i = 0; $i <(12-$badcount); $i++) {
                                            array_push($bad,0);
                                        }
                                    }
                                        $dcolor='电池组电压：<br>';
                                        $count=0;
                                        foreach($bad as $key=>$value){
                                                  $keyv='v'.($key+1);
                                                  if($value==1){
                                                    $dcolor.='<span style="color:red">【'.($key+1).'】'.$device_status->$keyv.'V</span>';
                                                  }else{
                                                    $dcolor.='【'.($key+1).'】'.$device_status->$keyv.'V';
                                                  }
                                                  $count++;
                                                  if($count%3==0){$dcolor.='<br>';}
                                                          }
                                       return $dcolor;
                                }
                            ],

                        ],
                    ]) ?>

            <?php }else{echo '当前没有设备状态';}?>
<h4>消息通知&nbsp;&nbsp;&nbsp;</h4>
    <div class="wmsg-search">
    <div style="margin-top:10px;" class="form">
    <?=  \yii\widgets\ListView::widget([
        'dataProvider' => $wmsg,
        'itemView'=>'_wmsg_item'
    ]);?>
    </div>
    </div>
</div>