<template>
|
<GlobalWindow width="720px" title="设备详情" :visible.sync="visible" :confirm-working="isWorking" @close="close"
|
@confirm="confirm">
|
<div class="main">
|
<div class="title">
|
<span>基础信息</span>
|
</div>
|
<div class="main_content">
|
<div class="list">
|
<div class="item">
|
<div class="la">设备编码</div>
|
<div class="val">{{ info.code }}</div>
|
</div>
|
<div class="item">
|
<div class="la">设备名称</div>
|
<div class="val">{{ info.name }}</div>
|
</div>
|
<div class="item">
|
<div class="la">设备型号</div>
|
<div class="val">{{ info.modelNo }}</div>
|
</div>
|
<div class="item">
|
<div class="la">设备分类</div>
|
<div class="val">{{ info.categoryName }}</div>
|
</div>
|
<div class="item">
|
<div class="la">设备管理员</div>
|
<div class="val">{{ info.realName || info.realname }}</div>
|
</div>
|
<div class="item">
|
<div class="la">所在位置</div>
|
<div class="val">{{ info.addr }}</div>
|
</div>
|
<div class="item">
|
<div class="la">设备状态</div>
|
<spa class="val" v-if="info.status == 0">正常</spa>
|
<spa class="val" v-if="info.status == 1">损坏</spa>
|
<spa class="val" v-if="info.status == 2">报废</spa>
|
</div>
|
<div class="item">
|
<div class="la">供应商</div>
|
<div class="val">{{ info.supplier }}</div>
|
</div>
|
<div class="item" v-if="info.content" style="width: 100%;">
|
<div class="la">运维内容</div>
|
<div class="val">{{ info.content }}</div>
|
</div>
|
<div v-if="info.fileFullUrl" class="item" style="width: 100%;">
|
<div class="la">照片</div>
|
<div class="val">
|
<img class="photo" :src="info.fileFullUrl" alt="">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import BaseOpera from '@/components/base/BaseOpera'
|
import { detailById } from '@/api/Inspection/device.js'
|
import { getUserList } from '@/api/system/user'
|
import { Message, Loading } from 'element-ui'
|
export default {
|
components: {
|
GlobalWindow
|
},
|
extends: BaseOpera,
|
data() {
|
return {
|
id: '',
|
visible: false,
|
info: {},
|
|
}
|
},
|
methods: {
|
getDetail() {
|
const { id } = this
|
detailById(id).then(res => {
|
this.info = res
|
})
|
},
|
close() {
|
this.visible = false
|
this.$emit('close')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/style/variables.scss';
|
|
.main {
|
padding-top: 20px;
|
|
.title {
|
font-weight: 500;
|
font-size: 18px;
|
color: $primary-color;
|
margin-bottom: 10px;
|
display: flex;
|
align-items: center;
|
|
.status {
|
padding: 0 6px;
|
height: 22px;
|
line-height: 22px;
|
border-radius: 2px;
|
border: 1px solid #00BA92;
|
color: #00BA92;
|
font-weight: 400;
|
font-size: 12px;
|
margin-left: 10px;
|
}
|
|
.primaryColor {
|
border: 1px solid $primary-color;
|
}
|
|
.gray {
|
color: gray;
|
border: 1px solid gray;
|
}
|
}
|
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
/* background: #F7F7F7; */
|
border-radius: 2px;
|
padding: 15px 20px;
|
margin-bottom: 16px;
|
width: 100%;
|
|
.item {
|
width: 33.3%;
|
margin-bottom: 14px;
|
|
.photo {
|
width: 92px;
|
height: 92px;
|
}
|
|
.la {
|
color: #7f7f7f;
|
margin-bottom: 6px;
|
}
|
}
|
|
.item2 {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
}
|
|
.max {
|
width: 100%;
|
}
|
}
|
|
.main_content {
|
display: flex;
|
width: 100%;
|
}
|
}
|
|
.file_list {
|
display: flex;
|
flex-wrap: wrap;
|
|
.avatar-uploader {
|
width: 92px;
|
height: 92px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border: 1px dashed #d9d9d9;
|
}
|
|
.item {
|
width: 92px;
|
max-height: 92px;
|
margin-left: 10px;
|
position: relative;
|
border: 1px dashed #d9d9d9;
|
border-radius: 4px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.close {
|
font-size: 20px;
|
position: absolute;
|
right: -10px;
|
top: -10px;
|
z-index: 111;
|
color: red;
|
cursor: pointer;
|
}
|
|
.img {
|
width: 92px;
|
max-height: 92px;
|
}
|
}
|
}
|
</style>
|
