You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1203 lines
60 KiB
1203 lines
60 KiB
<template> |
|
<div> |
|
<!-- 需求提报页面 --> |
|
<div v-for="(item, index) in addForm" :key="item"> |
|
<div style=" |
|
width: 98%; |
|
height: 30px; |
|
line-height: 30px; |
|
padding-left: 5px; |
|
border-left: 5px solid #000; |
|
font-size: 18px; |
|
font-weight: 550; |
|
color: #000; |
|
margin: 0px 0 20px; |
|
display: flex; |
|
justify-content: space-between; |
|
" v-show="addForm.length > 1"> |
|
<div> 填报{{ index + 1 }}</div> |
|
<div @click="handleDelete(index)"><i class="el-icon-delete" style="color: #409EFF;cursor: pointer;"></i></div> |
|
</div> |
|
<avue-form :option="item.formOption" :model="item.form" :ref="`form${index}`" |
|
:upload-after="(res, done, loading, column) => { uploadAfter(res, done, loading, column, index) }" |
|
:upload-before="(res, done, loading, column) => uploadBefore(res, done, loading, column, index)"> |
|
<template slot-scope="{disabled,size}" slot="deviceName"> |
|
<!-- <el-select v-model="item.form.deviceName" placeholder="请选择设备" |
|
@change="(value) => { changeDevice(value, item) }"> |
|
<el-option v-for="item in deviceList" :key="item.id" :value="item.id" |
|
:label="item.name"></el-option> |
|
</el-select> --> |
|
<el-input placeholder="请输入设备名称" v-model="item.form.deviceName"></el-input> |
|
</template> |
|
<template slot-scope="{disabled,size}" slot="faultPosition"> |
|
<!-- <SelectTree disabled v-model="item.form.faultPosition" :tree-options="treeOptions" |
|
:default-value="item.form.faultPosition.node" |
|
@onNodeSelectEvent="handleNodeSelectEvent($event)"></SelectTree> --> |
|
<el-input placeholder="请输入故障位置" v-model="item.form.faultPosition"></el-input> |
|
</template> |
|
<template slot-scope="{disabled,size}" slot="faultType"> |
|
<!-- <el-select v-model="item.form.faultType" placeholder="请选择专业类型" disabled> |
|
<el-option v-for="item in typeList" :key="item.id" :value="item.id" |
|
:label="item.name"></el-option> |
|
</el-select> --> |
|
<el-input placeholder="请输入专业类型" v-model="item.form.faultType"></el-input> |
|
</template> |
|
<template slot-scope="{disabled,size}" slot="faultDescribe"> |
|
<el-input type="textarea" :rows="2" placeholder="请输入故障现象描述" v-model="item.form.faultDescribe" |
|
@blur="(event) => { changeDescribe(event, index) }"> |
|
</el-input> |
|
</template> |
|
<template slot-scope="{disabled,type}" slot="informant"> |
|
<el-select v-model="item.form.informant" placeholder="请选择关联实验室" @change="(val) => changeLab(val,index)"> |
|
<el-option v-for="item in labData" :key="item.id" :label="item.title" :value="item.id"></el-option> |
|
</el-select> |
|
</template> |
|
<template slot-scope="{disabled,size}" slot="imgUrl"> |
|
<el-upload action="/api/blade-resource/oss/endpoint/put-file" list-type="picture-card" :headers="headers" |
|
:on-success="handleSuccess(index)" :on-remove="handleRemove(index)" multiple :before-upload="beforeAvatarUpload(index)" |
|
accept=".jpeg,.jpg,.png,.pdf" :file-list="item.form.imgList"> |
|
<i class="el-icon-plus"></i> |
|
</el-upload> |
|
</template> |
|
<template slot-scope="{size}" slot="menuForm" v-if="index == addForm.length - 1"> |
|
<el-button @click="handleAdd" v-show="title == '需求填报'">新 增</el-button> |
|
<el-button @click="handleCancel">取 消</el-button> |
|
<el-button @click="handleSave" v-show="title == '需求填报'" v-if="userInfo.role_id != '1839536982874193922'">保 存</el-button> |
|
<el-button type="primary" @click="handleConfirm(index)">提 交</el-button> |
|
</template> |
|
</avue-form> |
|
|
|
</div> |
|
|
|
</div> |
|
</template> |
|
|
|
<script> |
|
import website from '@/config/website'; |
|
import {getToken, removeToken, removeRefreshToken} from '@/util/auth'; |
|
import SelectTree from '../../components/selectTree/tree.vue' |
|
import { getDeviceList } from '@/api/device/device' |
|
import { getChildList } from '@/api/system/dictbiz' |
|
import { saveData, editData, saveDraft,serviceSave,serviceDraft,getAllUser,getAllLab } from '@/api/operation/hand' |
|
import { nextTick } from 'vue'; |
|
import Compressor from 'compressorjs'; |
|
import { mapGetters } from "vuex"; |
|
export default { |
|
name: 'requestSub', |
|
props: { |
|
title: String, |
|
form: Object, |
|
}, |
|
components: { |
|
SelectTree |
|
}, |
|
data() { |
|
return { |
|
typeList: [], |
|
imgList: [], |
|
treeOptions: [], |
|
deviceList: [], |
|
uploadUrl: '/api/blade-resource/oss/endpoint/put-file', |
|
isShow: false, |
|
addForm: [], |
|
editId: '', |
|
headers:{ |
|
|
|
}, |
|
labData:[], |
|
} |
|
}, |
|
mounted() { |
|
this.getLabData() |
|
this.headers = { |
|
"Authorization":`Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`, |
|
'Blade-Auth':'bearer ' + getToken(), |
|
'Blade-Requested-With':'BladeHttpRequest' |
|
} |
|
console.log('this.userInfo.role_id',this.userInfo.role_id) |
|
if ((this.title == '编辑' && JSON.stringify(this.form) != '{}') || JSON.stringify(this.form) != '{}') { |
|
this.editId = this.form.id |
|
for (let key in this.form) { |
|
this.addForm = [ |
|
{ |
|
form: { |
|
imgList: this.form.picAttaches && this.form.picAttaches.length != 0 ? this.form.picAttaches.map(item => { return { name: item.originalName, url: item.link } }) : [], |
|
// faultPosition: { node: this.deviceList.find(item => item.id == this.form.deviceName).position, data: {} }, |
|
faultPosition: this.form.faultLocation, |
|
deviceName: this.form.deviceName, |
|
faultType: this.form.faultType, |
|
faultDescribe: this.form.faultDescribe, |
|
videoAttaches: this.form.videoAttaches, |
|
picAttaches: this.form.picAttaches, |
|
}, |
|
formOption: { |
|
emptyBtn: false, |
|
submitBtn: false, |
|
menuPosition: 'right', |
|
column: [ |
|
{ |
|
label: "关联实验室", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "informant", |
|
type: "select", |
|
formslot: true, |
|
display:this.userInfo.role_id == '1839536982874193922' ? true : false |
|
}, |
|
{ |
|
label: "故障现象描述", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "faultDescribe", |
|
type: "textarea", |
|
minRows: 3, |
|
maxRows: 5, |
|
formslot: true, |
|
rules: [{ |
|
required: true, |
|
message: "请输入故障现象描述", |
|
trigger: "blur" |
|
}] |
|
}, |
|
{ |
|
label: "设备名称", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "deviceName", |
|
// type: "select", |
|
formslot: true |
|
}, |
|
{ |
|
label: "故障位置", |
|
labelWidth: 120, |
|
prop: "faultPosition", |
|
type: "tree", |
|
span: 24, |
|
formslot: true, |
|
}, |
|
{ |
|
label: "故障专业类型", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "faultType", |
|
type: "select", |
|
formslot: true, |
|
}, |
|
|
|
{ |
|
label: "故障视频", |
|
labelWidth: 120, |
|
prop: "errorVideo", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "link", |
|
name: "name", |
|
// home: "https://www.w3school.com.cn", |
|
}, |
|
value: this.form.videoAttaches && this.form.videoAttaches.length != 0 ? this.form.videoAttaches[0].link : '', |
|
fileType: "video", //img/video/audio |
|
listType: "picture-card", |
|
accept: '.mp4', |
|
span: 24, |
|
// formslot:true, |
|
action: '/api/blade-resource/oss/endpoint/put-file', |
|
rules: [{ |
|
required: false, |
|
message: "请输入故障现象描述", |
|
trigger: "blur" |
|
}] |
|
}, |
|
{ |
|
label: "故障图片", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "imgUrl", |
|
listType: "picture-card", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "link", |
|
name: "name", |
|
// home: "https://www.w3school.com.cn", |
|
}, |
|
// value:this.form.picAttaches, |
|
formslot: true, |
|
accept: '.jpg,.jpeg,.png', |
|
fileType: "img", //img/video/audio |
|
action: '/api/blade-resource/oss/endpoint/put-file', |
|
}, |
|
], |
|
}, |
|
}, |
|
] |
|
} |
|
} else { |
|
this.addForm = [ |
|
{ |
|
form: { |
|
imgList: [], |
|
// faultPosition: { node: undefined, data: {} }, |
|
faultPosition: '', |
|
deviceName: '', |
|
faultType: '', |
|
faultDescribe: '', |
|
videoAttaches: [], |
|
picAttaches: [], |
|
}, |
|
formOption: { |
|
emptyBtn: false, |
|
submitBtn: false, |
|
menuPosition: 'right', |
|
column: [ |
|
{ |
|
label: "关联实验室", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "informant", |
|
type: "select", |
|
formslot: true, |
|
display:this.userInfo.role_id == '1839536982874193922' ? true : false |
|
}, |
|
{ |
|
label: "故障现象描述", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "faultDescribe", |
|
type: "textarea", |
|
minRows: 3, |
|
maxRows: 5, |
|
formslot: true, |
|
rules: [{ |
|
required: true, |
|
message: "请输入故障现象描述", |
|
trigger: "blur" |
|
}] |
|
}, |
|
{ |
|
label: "设备名称", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "deviceName", |
|
type: "select", |
|
formslot: true |
|
}, |
|
{ |
|
label: "故障位置", |
|
labelWidth: 120, |
|
prop: "faultPosition", |
|
type: "tree", |
|
span: 24, |
|
formslot: true, |
|
}, |
|
{ |
|
label: "故障专业类型", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "faultType", |
|
type: "select", |
|
formslot: true, |
|
}, |
|
|
|
{ |
|
label: "故障视频", |
|
labelWidth: 120, |
|
prop: "errorVideo", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "link", |
|
name: "name", |
|
// home: "https://www.w3school.com.cn", |
|
}, |
|
fileType: "video", //img/video/audio |
|
listType: "picture-card", |
|
accept: '.mp4', |
|
span: 24, |
|
// formslot:true, |
|
action: '/api/blade-resource/oss/endpoint/put-file', |
|
}, |
|
{ |
|
label: "故障图片", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "imgUrl", |
|
listType: "picture-card", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "link", |
|
name: "name", |
|
// home: "https://www.w3school.com.cn", |
|
}, |
|
// value:this.form.picAttaches, |
|
formslot: true, |
|
accept: '.jpg,.jpeg,.png', |
|
fileType: "img", //img/video/audio |
|
action: '/api/blade-resource/oss/endpoint/put-file', |
|
}, |
|
], |
|
}, |
|
}, |
|
] |
|
} |
|
console.log('addForm------------->',this.addForm) |
|
this.$forceUpdate() |
|
|
|
}, |
|
computed: { |
|
...mapGetters(["userInfo", "permission", "systemTime"]), |
|
}, |
|
watch: { |
|
form(newVal, oldVal) { |
|
let arr = JSON.parse(JSON.stringify(this.addForm)) |
|
if ((this.title == '编辑' && JSON.stringify(this.form) != '{}') || JSON.stringify(this.form) != '{}') { |
|
this.editId = this.form.id |
|
for (let key in this.form) { |
|
this.addForm = [ |
|
{ |
|
form: { |
|
imgList: this.form.picAttaches && this.form.picAttaches.length != 0 ? this.form.picAttaches.map(item => { return { name: item.originalName, url: item.link } }) : [], |
|
// faultPosition: { node: this.deviceList.find(item => item.id == this.form.deviceName).position, data: {} }, |
|
faultPosition: this.form.faultLocation, |
|
deviceName: this.form.deviceName, |
|
// faultType: this.deviceList.find(item => item.id == this.form.deviceName).type, |
|
faultType: this.form.faultType, |
|
faultDescribe: this.form.faultDescribe, |
|
videoAttaches: this.form.videoAttaches, |
|
picAttaches: this.form.picAttaches, |
|
}, |
|
formOption: { |
|
emptyBtn: false, |
|
submitBtn: false, |
|
menuPosition: 'right', |
|
column: [ |
|
{ |
|
label: "关联实验室", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "informant", |
|
type: "select", |
|
formslot: true, |
|
display:this.userInfo.role_id == '1839536982874193922' ? true : false |
|
}, |
|
{ |
|
label: "故障现象描述", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "faultDescribe", |
|
type: "textarea", |
|
minRows: 3, |
|
maxRows: 5, |
|
formslot: true, |
|
rules: [{ |
|
required: true, |
|
message: "请输入故障现象描述", |
|
trigger: "blur" |
|
}] |
|
}, |
|
{ |
|
label: "设备名称", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "deviceName", |
|
type: "select", |
|
formslot: true |
|
}, |
|
{ |
|
label: "故障位置", |
|
labelWidth: 120, |
|
prop: "faultPosition", |
|
type: "tree", |
|
span: 24, |
|
formslot: true, |
|
}, |
|
{ |
|
label: "故障专业类型", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "faultType", |
|
type: "select", |
|
formslot: true, |
|
}, |
|
|
|
{ |
|
label: "故障视频", |
|
labelWidth: 120, |
|
prop: "errorVideo", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "link", |
|
name: "name", |
|
// home: "https://www.w3school.com.cn", |
|
}, |
|
value: this.form.videoAttaches && this.form.videoAttaches.length != 0 ? this.form.videoAttaches[0].link : '', |
|
fileType: "video", //img/video/audio |
|
listType: "picture-card", |
|
accept: '.mp4', |
|
span: 24, |
|
// formslot:true, |
|
action: '/api/blade-resource/oss/endpoint/put-file', |
|
}, |
|
{ |
|
label: "故障图片", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "imgUrl", |
|
listType: "picture-card", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "link", |
|
name: "name", |
|
// home: "https://www.w3school.com.cn", |
|
}, |
|
// value:this.form.picAttaches, |
|
formslot: true, |
|
accept: '.jpg,.jpeg,.png', |
|
fileType: "img", //img/video/audio |
|
action: '/api/blade-resource/oss/endpoint/put-file', |
|
}, |
|
], |
|
}, |
|
}, |
|
] |
|
} |
|
} else { |
|
this.addForm = [ |
|
{ |
|
form: { |
|
imgList: [], |
|
faultPosition: '', |
|
deviceName: '', |
|
faultType: '', |
|
faultDescribe: '', |
|
videoAttaches: [], |
|
picAttaches: [], |
|
}, |
|
formOption: { |
|
emptyBtn: false, |
|
submitBtn: false, |
|
menuPosition: 'right', |
|
column: [ |
|
{ |
|
label: "关联实验室", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "informant", |
|
type: "select", |
|
formslot: true, |
|
display:this.userInfo.role_id == '1839536982874193922' ? true : false |
|
}, |
|
{ |
|
label: "故障现象描述", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "faultDescribe", |
|
type: "textarea", |
|
minRows: 3, |
|
maxRows: 5, |
|
formslot: true, |
|
rules: [{ |
|
required: true, |
|
message: "请输入故障现象描述", |
|
trigger: "blur" |
|
}] |
|
}, |
|
{ |
|
label: "设备名称", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "deviceName", |
|
type: "select", |
|
formslot: true |
|
}, |
|
{ |
|
label: "故障位置", |
|
labelWidth: 120, |
|
prop: "faultPosition", |
|
type: "tree", |
|
span: 24, |
|
formslot: true, |
|
}, |
|
{ |
|
label: "故障专业类型", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "faultType", |
|
type: "select", |
|
formslot: true, |
|
}, |
|
{ |
|
label: "故障视频", |
|
labelWidth: 120, |
|
prop: "errorVideo", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "link", |
|
name: "name", |
|
// home: "https://www.w3school.com.cn", |
|
}, |
|
fileType: "video", //img/video/audio |
|
listType: "picture-card", |
|
accept: '.mp4', |
|
span: 24, |
|
// formslot:true, |
|
action: '/api/blade-resource/oss/endpoint/put-file', |
|
}, |
|
{ |
|
label: "故障图片", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "imgUrl", |
|
listType: "picture-card", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "link", |
|
name: "name", |
|
// home: "https://www.w3school.com.cn", |
|
}, |
|
// value:this.form.picAttaches, |
|
formslot: true, |
|
accept: '.jpg,.jpeg,.png', |
|
fileType: "img", //img/video/audio |
|
action: '/api/blade-resource/oss/endpoint/put-file', |
|
}, |
|
], |
|
}, |
|
}, |
|
] |
|
} |
|
} |
|
}, |
|
|
|
methods: { |
|
getLabData(){ |
|
getAllLab().then(res =>{ |
|
this.labData = res.data.data |
|
}) |
|
}, |
|
// 切换实验室 |
|
changeLab(val,index){ |
|
console.log('val----------->',val) |
|
console.log('index----------->',index) |
|
this.addForm[index].form = { |
|
...this.addForm[index].form, |
|
informant:val, |
|
informantPhone:this.labData.find(item => item.id == val).phone, |
|
reportUnit:this.labData.find(item => item.id == val).deptId, |
|
createDept:this.labData.find(item => item.id == val).createDept, |
|
} |
|
}, |
|
// 选择设备 |
|
changeDevice(value, row) { |
|
console.log('value---------->', value) |
|
console.log('row---------->', row) |
|
row.form.faultPosition.node = this.deviceList.find(item => item.id == value).position |
|
row.form.faultType = this.deviceList.find(item => item.id == value).type |
|
row.formOption.column.find(item => item.prop == 'faultPosition').value = row.form.faultPosition |
|
console.log('val------------>', row.formOption.column.find(item => item.prop == "faultPosition")) |
|
}, |
|
uploadAfter(res, done, loading, column, flag) { |
|
console.log('res =============>', res) |
|
console.log('flag =============>', flag) |
|
if (column.label == '故障图片') { |
|
this.addForm[flag].form.picAttaches.push( |
|
{ |
|
link: res.link, //--文件url |
|
name: res.originalName //--文件名称 |
|
} |
|
) |
|
done() |
|
} else if (column.label == '故障视频') { |
|
this.addForm[flag].form.errorVideo = res.link |
|
this.addForm[flag].form.videoAttaches.push({ |
|
link: res.link, //--文件url |
|
name: res.originalName //--文件名称 |
|
}) |
|
done() |
|
} |
|
|
|
}, |
|
async uploadBefore(file, done, loading, column, flag){ |
|
console.log('file =============>', file) |
|
console.log('flag =============>', flag) |
|
console.log('addForm----------------->',this.addForm[flag].form) |
|
console.log('this.addForm[flag].videoAttaches.length + this.addForm[flag].picAttaches.length <= 3',this.addForm[flag].form.videoAttaches.length + this.addForm[flag].form.picAttaches.length) |
|
if(this.addForm[flag].form.videoAttaches && this.addForm[flag].form.picAttaches && this.addForm[flag].form.videoAttaches.length + this.addForm[flag].form.picAttaches.length < 3){ |
|
if(file.size > 1024 * 1024 * 50){ |
|
this.$message.error('故障视频最大上传50M,请压缩后再上传') |
|
loading() |
|
}else{ |
|
done(file) |
|
} |
|
}else{ |
|
this.$message.error('故障视频与故障图片最多可上传3个') |
|
loading() |
|
} |
|
}, |
|
// 附件上传成功 |
|
handleSuccess(index) { |
|
return (response, file, fileList) => { |
|
console.log('inex---------------->', index) |
|
console.log('response------------------>', response) |
|
console.log('file------------------>', file) |
|
console.log('fileList------------------>', fileList) |
|
this.addForm[index].form.picAttaches.push( |
|
{ |
|
link: response.data.link, //--文件url |
|
name: response.data.originalName //--文件名称 |
|
} |
|
) |
|
} |
|
}, |
|
beforeAvatarUpload(index){ |
|
return (file) =>{ |
|
if(this.addForm[index].form.videoAttaches && this.addForm[index].form.picAttaches && this.addForm[index].form.videoAttaches.length + this.addForm[index].form.picAttaches.length < 3){ |
|
const isLt3M = file.size |
|
|
|
// if(isLt3M > 1024 * 1024 * 2){ |
|
// const r = confirm( |
|
// // `您上传的图片大小超过5Mb,是否进行压缩上传？(此操作会降低图片质量)` |
|
// `您上传的图片大小超过5Mb,请压缩后再次上传` |
|
// ) |
|
// if(r){ |
|
const _this = this |
|
return new Promise((resolve, reject) => { |
|
const image = new Image() |
|
let resultBlob = '' |
|
image.src = URL.createObjectURL(file) |
|
image.onload = () => { |
|
// 调用方法获取blob格式，方法写在下边 |
|
resultBlob = _this.compressUpload(image, file) |
|
const fs = new File([resultBlob], file.name, { |
|
type: file.type, |
|
width:200, |
|
height:200 |
|
}) |
|
if (fs.size > 1024 * 1024 * 3) { |
|
// this.commonZipPic(fs) |
|
this.$message.warning('压缩后图片仍大于3Mb，请您手动压缩') |
|
reject() |
|
} |
|
resolve(fs) |
|
} |
|
image.onerror = () => { |
|
reject() |
|
} |
|
}) |
|
// }else{ |
|
// this.$message.warning('您上传的图片大小超过5Mb,请手动压缩后在上传') |
|
// return false |
|
// } |
|
// }else{ |
|
// return true |
|
// } |
|
}else{ |
|
this.$message.error('故障视频与故障图片最多可上传3个') |
|
return false |
|
} |
|
} |
|
}, |
|
// 多个提报时单个删除 |
|
handleDelete(index){ |
|
this.$confirm('请确认是否删除该需求填报?', '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning' |
|
}).then(() => { |
|
this.addForm.splice(index,1) |
|
this.$message({ |
|
type: 'success', |
|
message: '删除成功!' |
|
}); |
|
}) |
|
}, |
|
/* 图片压缩方法-canvas压缩 */ |
|
compressUpload(image, file) { |
|
const canvas = document.createElement('canvas') |
|
const ctx = canvas.getContext('2d') |
|
// const initSize = image.src.length |
|
const width = image.width * 0.1 // 图片宽度 * 压缩比例 |
|
|
|
const height = image.height * 0.1 // 图片高度 * 压缩比例 |
|
|
|
canvas.width = width // 画布宽度 |
|
|
|
canvas.height = height // 画布宽度 |
|
// const { width } = image |
|
// const { height } = image |
|
// canvas.width = width |
|
// canvas.height = height |
|
ctx.fillRect(0, 0, canvas.width, canvas.height) |
|
// ctx.drawImage(image, 0, 0, width / 10, height / 10) |
|
ctx.drawImage(image, 0, 0, width, height) |
|
const dataUrl = canvas.toDataURL(file.type) //图片转路径 |
|
|
|
const blobData = this.dataURItoBlob(dataUrl, file.type) //图片转二进制 |
|
// // 进行最小压缩0.1 |
|
// const compressData = canvas.toDataURL(file.type || 'image/jpeg', 0.1) |
|
// 压缩后调用方法进行base64转Blob，方法写在下边 |
|
// const blobImg = this.dataURItoBlob(blobData) |
|
return blobData |
|
}, |
|
/* base64转Blob对象 */ |
|
dataURItoBlob(data) { |
|
let byteString |
|
if (data.split(',')[0].indexOf('base64') >= 0) { |
|
byteString = atob(data.split(',')[1]) |
|
} else { |
|
byteString = unescape(data.split(',')[1]) |
|
} |
|
const mimeString = data.split(',')[0].split(':')[1].split(';')[0] |
|
const ia = new Uint8Array(byteString.length) |
|
for (let i = 0; i < byteString.length; i += 1) { |
|
ia[i] = byteString.charCodeAt(i) |
|
} |
|
return new Blob([ia], { type: mimeString }) |
|
}, |
|
// 上传视频文件压缩后再上传 |
|
uploadCompressVideo(file) { |
|
if (file) { |
|
let filename = file.name; |
|
let filetype = file.type; |
|
|
|
const videoUrl = ffmpeg.getObjectURL(file); |
|
// const video = document.getElementById('video'); |
|
// video.src = videoUrl; |
|
// return ffmpeg.squeezVideo().then((videoObj) => { |
|
// const {width, height} = videoObj; |
|
return ffmpeg.squeezVideo(file, filename, 'mp4', '200', '200', this.msg); |
|
// }) |
|
} |
|
}, |
|
// 附件删除 |
|
handleRemove(index) { |
|
return (file, fileList) =>{ |
|
this.imgList = [] |
|
this.fileList = [] |
|
fileList.map(item => { |
|
this.fileList.push({ name: item.name, link: item.response ? item.response.data.link : item.url }) |
|
this.imgList.push({ name: item.name, url: item.response ? item.response.data.link : item.url }) |
|
}) |
|
this.addForm[index].form.picAttaches = this.fileList |
|
} |
|
}, |
|
changeDescribe(event, index) { |
|
console.log('event.target.value------------>', event.target.value) |
|
if (event.target.value != '') { |
|
console.log('index----------->', index) |
|
console.log(this.addForm[index]) |
|
if (this.addForm[index].form.faultDescribe != '') { |
|
nextTick(() => { |
|
this.$refs[`form${index}`][0].clearValidate() |
|
}) |
|
} |
|
} |
|
}, |
|
// 点击新增按钮 |
|
handleAdd() { |
|
let count = 0 |
|
this.addForm.forEach((formItem, index) => { |
|
this.$refs[`form${index}`][0].validate((valid) => { |
|
if (valid) { |
|
console.log(`表单项${index}验证通过`); |
|
// 执行提交操作 |
|
} else { |
|
console.log(`表单项${index}验证失败`); |
|
if (this.addForm[index].form.faultDescribe != '') { |
|
count++ |
|
this.$refs[`form${index}`][0].clearValidate() |
|
if(count == this.addForm.length){ |
|
this.addForm.push({ |
|
form: { |
|
faultPosition: '', |
|
deviceName: "", |
|
faultType: "", |
|
faultDescribe: "", |
|
errorVideo: "", |
|
picAttaches: [], |
|
}, |
|
formOption: { |
|
emptyBtn: false, |
|
submitBtn: false, |
|
menuPosition: 'right', |
|
column: [ |
|
{ |
|
label: "关联实验室", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "informant", |
|
type: "select", |
|
formslot: true, |
|
display:this.userInfo.role_id == '1839536982874193922' ? true : false |
|
}, |
|
{ |
|
label: "故障现象描述", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "faultDescribe", |
|
type: "textarea", |
|
minRows: 3, |
|
maxRows: 5, |
|
formslot: true, |
|
rules: [{ |
|
required: true, |
|
message: "请输入故障现象描述", |
|
trigger: "blur" |
|
}] |
|
}, |
|
{ |
|
label: "设备名称", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "deviceName", |
|
type: "select", |
|
formslot: true |
|
}, |
|
{ |
|
label: "故障位置", |
|
labelWidth: 120, |
|
prop: "faultPosition", |
|
type: "tree", |
|
span: 24, |
|
formslot: true, |
|
}, |
|
{ |
|
label: "故障专业类型", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "faultType", |
|
type: "select", |
|
formslot: true, |
|
}, |
|
{ |
|
label: "故障视频", |
|
labelWidth: 120, |
|
prop: "errorVideo", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "link", |
|
name: "name", |
|
// home: "https://www.w3school.com.cn", |
|
}, |
|
fileType: "video", //img/video/audio |
|
listType: "picture-card", |
|
accept: '.mp4', |
|
span: 24, |
|
// formslot:true, |
|
action: '/api/blade-resource/oss/endpoint/put-file', |
|
}, |
|
{ |
|
label: "故障图片", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "imgUrl", |
|
listType: "picture-card", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "link", |
|
name: "name", |
|
// home: "https://www.w3school.com.cn", |
|
}, |
|
// value:this.form.picAttaches, |
|
accept: '.jpg,.jpeg,.png', |
|
fileType: "img", //img/video/audio |
|
action: '/api/blade-resource/oss/endpoint/put-file', |
|
}, |
|
], |
|
}, |
|
}); |
|
|
|
} |
|
|
|
|
|
} |
|
} |
|
}); |
|
}); |
|
}, |
|
// 点击取消按钮 |
|
handleCancel() { |
|
this.dialogVisible = false; |
|
this.addForm = [ |
|
{ |
|
form: { |
|
imgList: [], |
|
faultPosition: { node: undefined, data: {} }, |
|
deviceName: '', |
|
faultType: '', |
|
faultDescribe: '', |
|
videoAttaches: [], |
|
picAttaches: [], |
|
}, |
|
formOption: { |
|
emptyBtn: false, |
|
submitBtn: false, |
|
menuPosition: 'right', |
|
column: [ |
|
{ |
|
label: "故障现象描述", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "faultDescribe", |
|
type: "textarea", |
|
minRows: 3, |
|
maxRows: 5, |
|
formslot: true, |
|
rules: [{ |
|
required: true, |
|
message: "请输入故障现象描述", |
|
trigger: "blur" |
|
}] |
|
}, |
|
{ |
|
label: "设备名称", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "deviceName", |
|
type: "select", |
|
formslot: true |
|
}, |
|
{ |
|
label: "故障位置", |
|
labelWidth: 120, |
|
prop: "faultPosition", |
|
type: "tree", |
|
span: 24, |
|
formslot: true, |
|
}, |
|
{ |
|
label: "故障专业类型", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "faultType", |
|
type: "select", |
|
formslot: true, |
|
}, |
|
{ |
|
label: "故障视频", |
|
labelWidth: 120, |
|
prop: "errorVideo", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "link", |
|
name: "name", |
|
// home: "https://www.w3school.com.cn", |
|
}, |
|
fileType: "video", //img/video/audio |
|
listType: "picture-card", |
|
accept: '.mp4', |
|
span: 24, |
|
// formslot:true, |
|
action: '/api/blade-resource/oss/endpoint/put-file', |
|
}, |
|
{ |
|
label: "故障图片", |
|
labelWidth: 120, |
|
span: 24, |
|
prop: "imgUrl", |
|
listType: "picture-card", |
|
type: "upload", |
|
propsHttp: { |
|
res: "data", |
|
url: "link", |
|
name: "name", |
|
// home: "https://www.w3school.com.cn", |
|
}, |
|
// value:this.form.picAttaches, |
|
formslot: true, |
|
accept: '.jpg,.jpeg,.png', |
|
fileType: "img", //img/video/audio |
|
action: '/api/blade-resource/oss/endpoint/put-file', |
|
}, |
|
], |
|
}, |
|
}, |
|
] |
|
this.$emit('close') |
|
}, |
|
// 点击保存按钮 |
|
handleSave() { |
|
console.log('addFrom----------->', this.addForm) |
|
let count = 0 |
|
this.addForm.forEach((formItem, index) => { |
|
console.log('form------------>', this.$refs[`form${index}`]) |
|
this.$refs[`form${index}`][0].validate((valid) => { |
|
if (valid) { |
|
console.log(`表单项${index}验证通过`); |
|
// 执行提交操作 |
|
} else { |
|
console.log(`表单项${index}验证失败`); |
|
if(this.userInfo.role_id == '1839536982874193922'){ |
|
//客服角色 |
|
if (this.addForm[index].form.faultDescribe != '' && this.addForm[index].form.informant != ''){ |
|
count++ |
|
this.$refs[`form${index}`][0].clearValidate() |
|
if(count == this.addForm.length){ |
|
let data = [] |
|
this.addForm.map(item => { |
|
data.push({ |
|
faultLocation: item.form.faultPosition.node, |
|
deviceName: item.form.deviceName, |
|
faultType: item.form.faultType, |
|
videoAttaches: item.form.videoAttaches, |
|
picAttaches: item.form.picAttaches, |
|
faultDescribe: item.form.faultDescribe, |
|
createDept:item.form.createDept, |
|
informant:item.form.informant, |
|
informantPhone:item.form.informantPhone, |
|
reportUnit:item.form.reportUnit, |
|
}) |
|
}) |
|
console.log('data============>', data) |
|
serviceDraft(data).then(res => { |
|
if (res.data.code == 200) { |
|
this.$message.success('保存成功') |
|
this.$emit('close') |
|
} |
|
}) |
|
this.$emit('close') |
|
} |
|
} |
|
}else{ |
|
if (this.addForm[index].form.faultDescribe != '') { |
|
count++ |
|
this.$refs[`form${index}`][0].clearValidate() |
|
if(count == this.addForm.length){ |
|
let data = [] |
|
this.addForm.map(item => { |
|
data.push({ |
|
faultLocation: item.form.faultPosition.node, |
|
deviceName: item.form.deviceName, |
|
faultType: item.form.faultType, |
|
videoAttaches: item.form.videoAttaches, |
|
picAttaches: item.form.picAttaches, |
|
faultDescribe: item.form.faultDescribe, |
|
}) |
|
}) |
|
console.log('data============>', data) |
|
saveDraft(data).then(res => { |
|
if (res.data.code == 200) { |
|
this.$message.success('保存成功') |
|
this.$emit('close') |
|
} |
|
}) |
|
this.$emit('close') |
|
} |
|
|
|
|
|
} |
|
} |
|
} |
|
}); |
|
}); |
|
|
|
|
|
}, |
|
// 点击确定按钮 |
|
handleConfirm(index) { |
|
let count = 0 |
|
this.addForm.forEach((formItem, index) => { |
|
this.$refs[`form${index}`][0].validate((valid) => { |
|
if (valid) { |
|
console.log(`表单项${index}验证通过`); |
|
// 执行提交操作 |
|
} else { |
|
console.log(`表单项${index}验证失败`); |
|
if(this.userInfo.role_id == '1839536982874193922'){ |
|
//客服角色 |
|
if (this.addForm[index].form.faultDescribe != '' && this.addForm[index].form.informant != '') { |
|
count++ |
|
this.$refs[`form${index}`][0].clearValidate() |
|
if(count == this.addForm.length){ |
|
let data = [] |
|
this.addForm.map(item => { |
|
data.push({ |
|
id: this.editId ? this.editId : null, |
|
faultLocation: item.form.faultPosition, |
|
deviceName: item.form.deviceName, |
|
faultType: item.form.faultType, |
|
videoAttaches: item.form.videoAttaches, |
|
picAttaches: item.form.picAttaches, |
|
faultDescribe: item.form.faultDescribe, |
|
submitType: 1, |
|
// createDept:item.form.createDept, |
|
// informant:item.form.informant, |
|
// informantPhone:item.form.informantPhone, |
|
reportUnit:item.form.informant, |
|
}) |
|
}) |
|
if(data.videoAttaches && data.picAttaches && data.videoAttaches.length + data.picAttaches.length > 3){ |
|
this.$message.error('故障视频与故障图片最多可上传3个') |
|
}else if (data.videoAttaches && !data.picAttaches && data.videoAttaches.length > 3){ |
|
this.$message.error('故障视频与故障图片最多可上传3个') |
|
}else if (!data.videoAttaches && data.picAttaches && data.picAttaches.length > 3){ |
|
this.$message.error('故障视频与故障图片最多可上传3个') |
|
}else{ |
|
console.log('data===========>',data) |
|
serviceSave(data).then(res =>{ |
|
console.log('res------------------->', res) |
|
if (res.data.code == 200) { |
|
this.$message.success('新增成功') |
|
this.$emit('close') |
|
} |
|
}) |
|
} |
|
} |
|
} |
|
}else{ |
|
if (this.addForm[index].form.faultDescribe != '') { |
|
count++ |
|
this.$refs[`form${index}`][0].clearValidate() |
|
if(count == this.addForm.length){ |
|
let data = [] |
|
this.addForm.map(item => { |
|
data.push({ |
|
id: this.editId ? this.editId : null, |
|
faultLocation: item.form.faultPosition, |
|
deviceName: item.form.deviceName, |
|
faultType: item.form.faultType, |
|
videoAttaches: item.form.videoAttaches, |
|
picAttaches: item.form.picAttaches, |
|
faultDescribe: item.form.faultDescribe, |
|
submitType: 1 |
|
}) |
|
}) |
|
console.log('data---------->',data) |
|
if(data.videoAttaches && data.picAttaches && data.videoAttaches.length + data.picAttaches.length > 3){ |
|
this.$message.error('故障视频与故障图片最多可上传3个') |
|
}else if (data.videoAttaches && !data.picAttaches && data.videoAttaches.length > 3){ |
|
this.$message.error('故障视频与故障图片最多可上传3个') |
|
}else if (!data.videoAttaches && data.picAttaches && data.picAttaches.length > 3){ |
|
this.$message.error('故障视频与故障图片最多可上传3个') |
|
}else{ |
|
saveData(data).then(res => { |
|
console.log('res------------------->', res) |
|
if (res.data.code == 200) { |
|
this.$message.success('新增成功') |
|
this.$emit('close') |
|
} |
|
}) |
|
} |
|
} |
|
|
|
|
|
} |
|
} |
|
} |
|
}); |
|
}); |
|
|
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style></style>
|
|
|