<template>
|
<div>
|
<el-dialog title="机床详情" :visible.sync="isShow" custom-class="custom-dialog" @close='cancelDialog()'>
|
<div class="mdc-table">
|
<div class="mdc-row ">
|
<div class="mdc-col mdc-content-v-center mdc-col-30">机床名</div>
|
<div class="mdc-col mdc-content-v-center mdc-col-20">{{device.name}}</div>
|
<div class="mdc-col mdc-content-v-center mdc-col-30">机床类型</div>
|
<div class="mdc-col mdc-content-v-center mdc-col-20">{{device.type}}</div>
|
</div>
|
<div class="mdc-row">
|
<div class="mdc-col mdc-content-v-center mdc-col-30">机床ip</div>
|
<div class="mdc-col mdc-content-v-center mdc-col-20">{{device.ip}}</div>
|
<!-- <div class="mdc-col mdc-content-v-center mdc-col-30">端口号</div>-->
|
<!-- <div class="mdc-col mdc-content-v-center mdc-col-20">{{device.port}}</div>-->
|
</div>
|
<div class="mdc-row">
|
<div class="mdc-col mdc-content-v-center mdc-col-30">车间名</div>
|
<div class="mdc-col mdc-content-v-center mdc-col-20">{{device.workshop}}</div>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'deviceDetailDialog',
|
props: {
|
isVisible: {
|
type: Boolean,
|
default: false
|
},
|
device: {
|
type: Object,
|
default: {}
|
}
|
},
|
watch: {
|
isVisible(val) {
|
this.isShow = val
|
if (!val) {
|
this.$refs.rpw.resetFields()
|
}
|
this.isLargeAltering = false
|
}
|
},
|
data() {
|
return {
|
isShow: this.isVisible,
|
showEditPwDialog: false,
|
isLargeAltering: false,
|
isNewPwPosting: false,
|
myRules: {
|
}
|
}
|
},
|
methods: {
|
/**
|
* 取消/关闭对话框
|
*/
|
cancelDialog() {
|
this.$emit('submit', { action: 'cancel' })
|
},
|
showEditPw() {
|
if (window.innerWidth > 720) {
|
this.isLargeAltering = true
|
} else {
|
this.showEditPwDialog = true
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
>>>.el-dialog__body{
|
padding:20px 5px;
|
}
|
.mdc-table{}
|
.mdc-row{
|
display: flex;
|
padding: 5px;
|
width: 100%;
|
}
|
.mdc-row + .mdc-row {
|
margin-top: -5px;
|
padding-top: 0;
|
}
|
.mdc-col{
|
flex: 1;
|
display: block;
|
padding: 5px;
|
width: 100%;
|
border: 1px solid #e5e5e5;
|
box-sizing: border-box;
|
}
|
.mdc-content-v-center{
|
display: flex;
|
align-items: center;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
.mdc-col-15 {
|
flex: 0 0 15%;
|
max-width: 15%; }
|
.mdc-col-30 {
|
flex: 0 0 30%;
|
max-width: 30%; }
|
.mdc-col-20 {
|
flex: 0 0 20%;
|
max-width: 20%; }
|
.mdc-col + .mdc-col {
|
border-left: none;
|
}
|
.mdc-row:nth-child(n) .mdc-col{
|
border-top: none;
|
}
|
.mdc-row:first-child .mdc-col {
|
border-top: 1px solid #e5e5e5;
|
}
|
.mdc-col:nth-child(2n+1){
|
background-color: #e7f1fd;
|
}
|
.password-reset-btn{
|
position: absolute;right:10px;color:#f56c6c;font-size: 18px;
|
}
|
.password-reset-btn:hover,.password-reset-btn:active{
|
color:#67C23A;
|
}
|
</style>
|
