<template>
<el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
<el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
<el-row :gutter="20">
<!--<el-col :span="12">-->
<!--<el-form-item label="设备名称">-->
<!--<el-input v-model.trim="dataForm.name" disabled type="text"/>-->
<!--</el-form-item>-->
<!--</el-col>-->
<el-col :span="12">
<el-form-item label="设备编号">
<el-input v-model.trim="dataForm.devcode" disabled type="text"/>
<!--<span>{{ dataForm.devcode }}</span>-->
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="在线状态">
<el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>
<!--<span>{{ dataForm.onlineStatusName }}</span>-->
</el-form-item>
</el-col>
<!--<el-col :span="12">-->
<!--<el-form-item label="进出营">-->
<!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
<!--<!–<span>{{ dataForm.inOutName }}</span>–>-->
<!--</el-form-item>-->
<!--</el-col>-->
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="设备类型">
<el-input v-model.trim="dataForm.typeName" disabled type="text"/>
<!--<span>{{ dataForm.typeName }}</span>-->
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备型号">
<el-input v-model.trim="dataForm.model" disabled type="text"/>
<!--<span>{{ dataForm.model }}</span>-->
</el-form-item>
</el-col>
</el-row>
<!--<el-row :gutter="20">-->
<!--<el-col :span="12">-->
<!--<el-form-item label="在线状态">-->
<!--<el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>-->
<!--<!–<span>{{ dataForm.onlineStatusName }}</span>–>-->
<!--</el-form-item>-->
<!--</el-col>-->
<!--<el-col :span="12">-->
<!--<el-form-item v-show="isFence" label="是否开启">-->
<!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
<!--<!–<span>{{ dataForm.deviceStatusName }}</span>–>-->
<!--</el-form-item>-->
<!--</el-col>-->
<!--</el-row>-->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="安装日期">
<el-input v-model.trim="dataForm.installDate" disabled type="text"/>
<!--<span>{{ dataForm.installDate }}</span>-->
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="安装位置">
<el-input v-model.trim="dataForm.position" disabled type="text"/>
<!--<span>{{ dataForm.position }}</span>-->
</el-form-item>
</el-col>
</el-row>
<!--<el-row v-show="isDoor" :gutter="20">-->
<!--<el-col :span="12">-->
<!--<el-form-item label="进出营">-->
<!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
<!--<!–<span>{{ dataForm.inOutName }}</span>–>-->
<!--</el-form-item>-->
<!--</el-col>-->
<!--</el-row>-->
<el-row v-show="isIrisDev" :gutter="20">
<el-col :span="24">
<el-form-item label="授权人员列表" style="margin-bottom: 0px;" />
<el-table :data="authList" class="table" stripe height="200" row-class-name="small-row-class" border>
<el-table-column prop="name" label="姓名" align="center" />
<el-table-column prop="deptName" label="部门" align="center" />
<el-table-column prop="idCardNo" label="身份证号" align="center">
<template slot-scope="scope">
{{ encrypIdCardNo(scope.row.idCardNo) }}
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
</el-form>
</el-dialog>
</template>
<script>
import { getDetailDevice } from '@/api/device'
export default {
name: 'DeviceDetail',
data() {
return {
dialogFormVisible: false, // 对话框是否显示
dialogStatus: '', // 对话框类型：create,update,detail
dataForm: {
id: '', // id
name: '', // 设备名
devcode: '', // 设备编号
typeName: '', // 设备类型
model: '', // 设备型号
onlineStatusName: '', // 在线状态
deviceStatusName: '', // 设备状态
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
}, // 表单
textMap: {
create: '新增设备',
update: '编辑设备',
detail: '设备详情'
}, // 表头显示标题
isEditMode: false,
isIrisDev: false,
isFence: false,
isDoor: false,
authList: []
}
},
methods: {
// 初始化对话框
initDialog: function(dialogStatus, dialogFormVisible, row = null) {
this.dialogStatus = dialogStatus
this.dialogFormVisible = dialogFormVisible
this.resetForm()
if (dialogStatus === 'detail') {
this.isEditMode = false
// 电子围栏设备有开启字段
if (row.typeName.indexOf('电子围栏') >= 0) {
this.isFence = true
}
// 营门设备有进出营门的标志位
if (row.areaId === '1') {
this.isDoor = true
}
// 虹膜设备有授权人员列表
if (row.typeName.indexOf('虹膜') >= 0) {
this.isIrisDev = true
}
getDetailDevice(row.id).then(response => {
if (response.code === 200) {
this.dataForm = {
id: row.id,
name: row.name,
devcode: row.devcode,
typeName: row.typeName,
model: row.model,
onlineStatusName: row.onlineStatusName,
position: row.position,
installDate: row.installDate,
inOutName: response.data.inOutName,
deviceStatusName: response.data.deviceStatusName
}
if (response.data.irisAuthorizeList !== '') {
this.authList = response.data.irisAuthorizeList
}
} else {
this.$message.error(response.message)
}
}).catch(() => {
})
}
},
resetForm: function() {
this.dataForm = {
id: '', // id
name: '', // 设备名
devcode: '', // 设备编号
typeName: '', // 设备类型
model: '', // 设备型号
onlineStatusName: '', // 在线状态
deviceStatusName: '', // 设备状态
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
} // 表单
this.isIrisDev = false
this.isFence = false
this.isDoor = false
},
// 身份证号加密显示
encrypIdCardNo(idCard) {
return idCard
// if (idCard.length > 6) {
// return idCard.substr(0, 6) + '********' + idCard.substr(14)
// } else if (idCard) {
// return idCard
// } else {
// return ''
// }
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-select{
width: 100%;
}
.el-date-editor{
width: 100%;
}
.dialog-footer {
margin-top: -20px;
text-align: center;
}
.avatar {
margin: 10px;
display: block;
text-align: center;
}
</style>
