<template>
   <el-dialog title="设备详情" custom-class="device-detail-dlg" top="30vh !important " :visible.sync="open" width="960px" append-to-body
   :close-on-click-modal="false" :close-on-press-escape="false">
   <div class="nav-header">
        <span class="nav-text">基本信息</span>
        <span class="nav-line"></span>
    </div>
    <el-row class="row-header">
        <el-col :span="8">
            <span class="sp-label">设备名称:</span>
            <span class="sp-data">{{ row.name }}</span>
        </el-col>
        <el-col :span="8">
            <span class="sp-label">设备编号:</span>
            <span class="sp-data">{{ row.devCode }}</span>
        </el-col>
        <el-col :span="8">
            <span class="sp-label">设备型号:</span>
            <span class="sp-data">{{ row.devTypeName }}</span>
        </el-col>
    </el-row>
    <div class="nav-header">
        <span class="nav-text">关联测点</span>
        <span class="nav-line"></span>
    </div>
    <el-table  :data="row.surveypoints" border stripe >
        <el-table-column label="监测项名称" align="center" prop="meName" />
        <el-table-column label="测点组名称" align="center" prop="groupName" />
        <el-table-column label="测点名称" align="center" prop="name" />

    </el-table>
   </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      open:false,
      row:{}
    };
  },
  methods: {
    showDialog(row){
        this.row=row;
        this.open=true;
    }
  },
};
</script>
<style lang="scss">
.device-detail-dlg{
    .el-dialog__body{
        padding:10px 20px;
    }
    .row-header {
        line-height: 30px;

        .sp-label {
            color: #333;
            font-weight: bold;
        }

        .sp-data {
            margin-left: 4px;
            columns: #888;
        }
    }
    .nav-header{
        position: relative;
        line-height: 60px;
        .nav-text{
            font-size: 16px;
    font-weight: bold;
    color: #444;
    background: #ffff;
    position: relative;
    z-index: 1;
    display: inline-block;
    padding-right: 8px;
        }
        .nav-line{

            display: block;
    position: absolute;
    border-bottom: solid 1px #cccccc54;
    width: 100%;
    top: 30px;
        }
    }
}
</style>