<template>
|
<GlobalWindow width="100%" title="设备详情" :withFooter="false" :visible.sync="visible" :confirm-working="isWorking" @close="close"
|
@confirm="confirm">
|
<div style="width: 100%; position: sticky; top: 0; left: 0; z-index: 999; background: #ffffff;">
|
<div class="tabs">
|
<div class="tab" :class="{ active: activeTabs === 0 }" @click="tabsClick(0)">设备信息</div>
|
<div class="tab" :class="{ active: activeTabs === 1 }" @click="tabsClick(1)">运维记录</div>
|
<div class="tab" :class="{ active: activeTabs === 2 }" @click="tabsClick(2)">巡检记录</div>
|
</div>
|
</div>
|
<div class="main" v-if="activeTabs === 0">
|
<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>
|
<div class="val">{{ info.projectName }}</div>
|
</div>
|
<div class="item">
|
<div class="la">关联房源</div>
|
<div class="val">{{ info.buildingName }} / {{ info.floorName }} / {{info.roomName}}</div>
|
</div>
|
<div class="item">
|
<div class="la">购入时间</div>
|
<div class="val">{{ info.buyDate }}</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">
|
<el-image
|
style="width: 100px; height: 100px"
|
:src="info.fileFullUrl"
|
:preview-src-list="[info.fileFullUrl]">
|
</el-image>
|
</div>
|
</div>
|
<div class="item" style="width: 100%;">
|
<div class="la">附件</div>
|
<div class="val">
|
<el-table
|
:data="info.multifileList ? info.multifileList : []"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="name"
|
label="附件名称">
|
</el-table-column>
|
<el-table-column
|
prop="userName"
|
label="操作人">
|
</el-table-column>
|
<el-table-column
|
prop="createDate"
|
label="操作时间">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="title">
|
<span>供应商信息</span>
|
</div>
|
<div class="main_content">
|
<div class="list">
|
<div class="item">
|
<div class="la">供应商</div>
|
<div class="val">{{info.supplier}}</div>
|
</div>
|
<div class="item">
|
<div class="la">联系人</div>
|
<div class="val">{{info.supplierLinker}}</div>
|
</div>
|
<div class="item">
|
<div class="la">联系方式</div>
|
<div class="val">{{info.supplierPhone}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="title">
|
<span>维保信息</span>
|
</div>
|
<div class="main_content">
|
<div class="list">
|
<div class="item">
|
<div class="la">维保负责人</div>
|
<div class="val">{{info.maintenanceUserName}}</div>
|
</div>
|
<div class="item">
|
<div class="la">维保到期日</div>
|
<div class="val">{{info.maintenanceOverDate}}</div>
|
</div>
|
<div class="item" style="width: 100%;">
|
<div class="la">维保说明</div>
|
<div class="val">{{info.maintenanceContent}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="main" v-if="activeTabs === 1">
|
<el-table
|
:data="infoList"
|
border
|
style="width: 100%">
|
<el-table-column
|
:key="Date.now()"
|
prop="realName"
|
label="运维人员">
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
label="设备状态">
|
<template slot-scope="{row}">
|
<span v-if="row.status === 0">正常</span>
|
<span v-if="row.status === 1">损坏</span>
|
<span v-if="row.status === 2">报废</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
prop="content"
|
label="运维备注">
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
prop="dealDate"
|
label="运维时间">
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
label="操作">
|
<template slot-scope="{row}">
|
<el-button type="text" @click="handleDetail(row)">查看详情</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
<div class="main" v-if="activeTabs === 2">
|
<el-table
|
:data="infoList"
|
border
|
style="width: 100%">
|
<el-table-column
|
:key="Date.now()"
|
prop="schemeTitle"
|
label="计划名称">
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
prop="taskCode"
|
label="任务编号">
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
label="任务时间">
|
<template slot-scope="{row}">
|
{{row.startDate}} ~ {{row.endDate}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
prop="realname"
|
label="巡检人">
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
prop="dealDate"
|
label="巡检时间">
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
label="巡检结果">
|
<template slot-scope="{row}">
|
<span v-if="row.dealStatus === 0">正常</span>
|
<span v-if="row.dealStatus === 1">异常</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
label="巡检附件">
|
<template slot-scope="{row}">
|
<el-image
|
v-if="row.multifileList && row.multifileList.length > 0"
|
style="width: 100px; height: 100px"
|
:src="row.multifileList[0].fileurlFull"
|
:preview-src-list="[row.multifileList[0].fileurlFull]">
|
</el-image>
|
</template>
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
prop="content"
|
label="巡检说明">
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
<Detail ref="DetailRef" />
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import BaseOpera from '@/components/base/BaseOpera'
|
import Detail from './maintainDetail'
|
import { detailById } from '@/api/Inspection/device.js'
|
import { fetchList } from '@/api/Inspection/deviceRecord.js'
|
import { getDetail } from '@/api/Inspection/ywPatrolTask.js'
|
export default {
|
components: {
|
GlobalWindow,
|
Detail
|
},
|
extends: BaseOpera,
|
data() {
|
return {
|
id: '',
|
visible: false,
|
info: {},
|
activeTabs: 0,
|
fileList: [],
|
|
infoList: [],
|
total: 0,
|
pageSize: 10,
|
page: 1
|
}
|
},
|
methods: {
|
handleSizeChange(e) {
|
this.pageSize = e
|
if (this.activeTabs === 1) {
|
this.getyunwei()
|
} else if (this.activeTabs === 2) {
|
this.getXunJian()
|
}
|
},
|
handleCurrentChange(e) {
|
this.page = e
|
if (this.activeTabs === 1) {
|
this.getyunwei()
|
} else if (this.activeTabs === 2) {
|
this.getXunJian()
|
}
|
},
|
getDetail() {
|
this.activeTabs = 0
|
const { id } = this
|
detailById(id).then(res => {
|
this.info = res
|
})
|
},
|
handleDetail(row) {
|
this.$refs.DetailRef.visible = true
|
this.$refs.DetailRef.getDetail(row.id)
|
},
|
close() {
|
this.visible = false
|
this.$emit('close')
|
},
|
tabsClick(val) {
|
this.activeTabs = val
|
this.pageSize = 10
|
this.page = 1
|
this.infoList = []
|
if (val === 1) {
|
this.getyunwei()
|
} else if (val === 2) {
|
this.getXunJian()
|
}
|
},
|
// 获取设备运维记录
|
getyunwei() {
|
fetchList({
|
capacity: this.pageSize,
|
page: this.page,
|
model: {
|
deviceId: this.id
|
}
|
}).then(res => {
|
this.infoList = res.records
|
this.total = res.total
|
})
|
},
|
// 巡检记录
|
getXunJian() {
|
getDetail({
|
capacity: this.pageSize,
|
page: this.page,
|
model: {
|
status: 1,
|
deviceId: this.id
|
}
|
}).then(res => {
|
this.infoList = res.records
|
this.total = res.total
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/style/variables.scss';
|
.tabs {
|
border-bottom: 1px solid #DFE2E8;
|
display: flex;
|
.tab {
|
height: 58px;
|
line-height: 58px;
|
font-size: 16px;
|
color: #666666;
|
margin-right: 30px;
|
cursor: pointer;
|
}
|
|
.active {
|
font-weight: 500;
|
color: $primary-color;
|
border-bottom: 2px solid $primary-color;
|
}
|
}
|
.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>
|
