<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
width="600px"
|
@confirm="confirm"
|
>
|
<el-form :model="form" ref="form" label-suffix="：">
|
<el-form-item label="设备信息" style="display:flex;" prop="code">
|
{{ form.deviceName + ' ' + form.deviceCode }}
|
</el-form-item>
|
<el-form-item label="检验结果" style="display:flex" prop="status">
|
<span v-if="form.status==0" style="color:green">正常</span>
|
<span v-else style="color:orange">异常</span>
|
</el-form-item>
|
<el-form-item label="检验信息" style="display:flex" prop="userName">
|
{{ form.userName + ' ' + form.checkdate }}
|
</el-form-item>
|
<el-form-item label="检验备注" style="display:flex" prop="content">
|
{{ form.content || '-' }}
|
</el-form-item>
|
<el-form-item label="检验照片/视频" style="display:flex" prop="remark">
|
<div class="image-style">
|
<div class="image-item-style" v-for="(item, index) in form.multiFilesList" :key="index" @click="showImageDeatail(index)">
|
{{ form.resourcePath + folder+ '/' + item.fileurl }}
|
<i v-if="item.type==1" class="el-icon-caret-right"></i>
|
<video class="video-inner-style" v-if="item.type==1" :src="form.resourcePath + folder+ '/' + item.fileurl">
|
</video>
|
<img class="image-inner-style" v-else :src="form.resourcePath + folder + '/' + item.fileurl">
|
</div>
|
</div>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="window__header">
|
<el-button type="primary" @click="cancel">返回</el-button>
|
</div>
|
<ShowImage ref="showImage"></ShowImage>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import ShowImage from '@/components/common/ShowImage'
|
import { queryListByCode } from '@/api/system/dictData'
|
export default {
|
name: 'OperaDeviceCheckDetailWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow, ShowImage },
|
data () {
|
return {
|
// 表单数据
|
form: {
|
deviceName: '',
|
deviceCode: '',
|
status: 0,
|
userName: '',
|
checkdate: '',
|
content: '',
|
resourcePath: '',
|
multiFilesList: [],
|
id: ''
|
},
|
folder: ''
|
}
|
},
|
created () {
|
this.config({
|
api: '/ext/companyPositionExt',
|
'field.id': 'id'
|
})
|
queryListByCode('?dicCode=FOLDER&label=DEVICE_CHECK')
|
.then(res => {
|
// console.log(res)
|
this.folder = res[0].code
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
},
|
methods: {
|
cancel () {
|
this.$refs.form.resetFields()
|
this.visible = false
|
// let that = this
|
},
|
showImageDeatail (index) {
|
this.$refs.showImage.open(this.form.multiFilesList, this.form.resourcePath + this.folder + '/', index)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.image-style {
|
display: flex;
|
flex-wrap: wrap;
|
.image-item-style {
|
position: relative;
|
width: 120px;
|
height: 120px;
|
overflow: hidden;
|
margin-right: 10px;
|
margin-bottom: 10px;
|
.video-inner-style {
|
width: 100%;
|
max-height: 100%;
|
cursor: pointer;
|
}
|
.el-icon-caret-right {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
// height: 10%;
|
// width: 10%;
|
font-size: 30px;
|
color: rgba($color: #fff, $alpha: 0.6);
|
}
|
// video:hover {
|
// }
|
.image-inner-style {
|
width: 100%;
|
max-height: 100%;
|
cursor: pointer;
|
}
|
}
|
}
|
.el-form-item {
|
margin-bottom: 0px !important;
|
}
|
</style>
|
