92 lines
2.3 KiB
Vue
92 lines
2.3 KiB
Vue
<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> |