<template>
  <div v-loading="loading">
      <div><el-button type="primary" size="mini">返回</el-button></div>
        <div class="flex start " style="margin-top: 10px">
<div class="aside" >
        <div>
        <div style="text-align:center;margin-top:5%;margin-bottom:5% ;font-weight:bold" >{{dd.number}}</div>
              <div class="bg">
                <div class="text">
              <div>设备型号：</div>
              <div>12</div>
              <div style="margin-top:10px">采集器编号：</div>
              <div>12</div>
              </div>
              </div>
              </div>
<el-form ref="form" :model="form" label-width="100px" size="mini" > 
  <el-form-item label="客户地址：">
    <div>杭州市江干区</div>
  </el-form-item>
   <el-form-item label="联系人：">
    <div>张三</div>
  </el-form-item>
  <el-form-item label="联系方式：">
    <div>1283948933</div>
  </el-form-item>
   <el-form-item label="设备位置：">
    <div>北楼一区</div>
  </el-form-item>
    <el-form-item label="监测区域：">
    <div>北楼一区</div>
  </el-form-item>
  <el-form-item label="开机率：">
    <div style="width:80%;margin-top:8px"><el-progress
                  :text-inside="true"
                  :stroke-width="20"
                  :percentage="67"
                  status="success"
                ></el-progress></div>
  </el-form-item>
   </el-form-item>
    <el-form-item label="监测区域：">
    <div>北楼一区</div>
  </el-form-item>
   </el-form-item>
    <el-form-item >
    <div><el-button type="primary" size="mini"
                >运行参数查看</el-button
              ></div>
  </el-form-item>
   <el-form-item >
    <div><el-button type="primary" size="mini"
                >运行时间统计</el-button
              ></div>
  </el-form-item>
</el-form>
</div>
      <div class="flex column " style="width:72%">
        <div class="header1" >运行时间：</div>
        <div class="main1" >
          <div class="butt">
          <el-form :inline="true">
            <el-form-item>
           <el-button type="primary" size="mini" style="margin-right:20px">实时参数列表</el-button>
                <el-button size="mini">参数曲线监控</el-button>
            </el-form-item>
          </el-form>
          </div>
          <el-form :inline="true" >
            <el-form-item label="电流："style="margin-right:200px;width:150px">
          <div class="it">8.342342</div>
            </el-form-item>
         <el-form-item label="温度："style="margin-right:200px;width:150px">
          <div class="it">8.342342</div>
            </el-form-item>
            <el-form-item label="断路器状态：">
          <div class="it">开</div>
            </el-form-item>
          </el-form>
           <el-form :inline="true">
            <el-form-item label="A相电压："style="margin-right:200px;width:150px">
          <div class="it">8.342342</div>
            </el-form-item>
         <el-form-item label="B相电压："style="margin-right:200px;width:150px">
          <div class="it">8.342342</div>
            </el-form-item>
            <el-form-item label="AB相线电流：">
          <div class="it">8.342342</div>
            </el-form-item>
          </el-form>
          <div  class="butt1">
              <el-button type="primary" size="mini" style="margin-right:20px">上一页</el-button>
            <el-button size="mini">下一页</el-button>
        </div>
        </div>
            </div>      
      </div>
      </div> 
  </div>
  
</template>
<script lang="ts">
import { ref, onMounted } from "@vue/composition-api";
import { router } from '../../main';

export default {
  setup() {
    const loading = ref<boolean>(false);
    const dd=ref<any>()
    onMounted(function () {
     dd.value= router.currentRoute.params.obj
      // console.log(aa)
      
    })

    return {
      loading,dd
    };
  }
};
</script>
<style lang="scss">
.aside{border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);width:25%;background:white;margin-right:10px ;
}
.main1{padding-left:10px;background:white;margin-top:10px ;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)}
.header1{line-height:60px; padding-left:10px;height:60px; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)}
.it {
  color: blue;
  font-weight: bold;
  text-align: center;
  text-size-adjust: medium;
}
.butt{margin-left:35%}
.butt1{margin-left:38%;margin-top:31%;margin-bottom: 2%;}
 .bg{background-image: url(../../assets/device.png);
 background-repeat: no-repeat;

 }
 .text{margin-left:60%} 
.device {
  height: 60px;

  overflow: hidden;
  cursor: pointer;
}
</style>
