| | |
| | | <div class="main-container"> |
| | | <el-form :model="problem" label-width="auto" style="max-width: 95%"> |
| | | <el-form-item label="问题类型" prop="proType"> |
| | | <el-select v-model="proType" @change="onProTypeChange" class="row" :disabled="readonly"> |
| | | <el-select |
| | | v-model="proType" |
| | | @change="onProTypeChange" |
| | | class="row" |
| | | :disabled="readonly" |
| | | > |
| | | <el-option |
| | | v-for="item in problemTypeOptions" |
| | | :key="item.typeid" |
| | |
| | | v-for="item in descriptionOptions" |
| | | :key="item.guid" |
| | | :label="item.description" |
| | | :value="item.guid" |
| | | :value="item.description" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="问题建议" prop="advise"> |
| | | <el-select v-model="deepCopyProblem.advise" class="row" :disabled="readonly"> |
| | | <el-select |
| | | v-model="deepCopyProblem.advise" |
| | | class="row" |
| | | :disabled="readonly" |
| | | > |
| | | <el-option |
| | | v-for="item in adviseOptions" |
| | | :key="item.adGuid" |
| | |
| | | <div class="t-card_item"> |
| | | 问题图片 |
| | | <div> |
| | | <el-button @click="chosePicFromAnyPic" v-show="!readonly">从任意图片选取</el-button> |
| | | <el-button @click="chosePicFromDevicePic" v-show="!readonly">从设备图片选取</el-button> |
| | | <el-button @click="chosePicFromLedgerPic" v-show="!readonly">从台账选取</el-button> |
| | | <el-button @click="choseChangePic" v-show="!readonly">从文件夹选取</el-button> |
| | | <el-button @click="chosePicFromAnyPic" v-show="!readonly" |
| | | >从场景图片选取</el-button |
| | | > |
| | | <el-button @click="chosePicFromDevicePic" v-show="!readonly" |
| | | >从设备图片选取</el-button |
| | | > |
| | | <el-button @click="chosePicFromLedgerPic" v-show="!readonly" |
| | | >从台账选取</el-button |
| | | > |
| | | <el-button @click="choseChangePic" v-show="!readonly" |
| | | >从文件夹选取</el-button |
| | | > |
| | | </div> |
| | | </div> |
| | | <el-upload |
| | |
| | | :disabled="readonly" |
| | | accept="image/*" |
| | | > |
| | | <el-button type="primary" id="uploadBtnId" style="display: none"></el-button> |
| | | <el-icon> |
| | | <el-button |
| | | type="primary" |
| | | id="uploadBtnId" |
| | | style="display: none" |
| | | ></el-button> |
| | | <el-icon v-show="fileList.length != 3"> |
| | | <Plus /> |
| | | </el-icon> |
| | | </el-upload> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="onSubmit" v-show="!readonly">保存</el-button> |
| | | <el-button @click="this.$emit('submited', false)" v-show="!readonly">取消</el-button> |
| | | <el-button type="primary" @click="onSubmit" v-show="!readonly" |
| | | >保存</el-button |
| | | > |
| | | <el-button @click="this.$emit('submited', false)" v-show="!readonly" |
| | | >取消</el-button |
| | | > |
| | | </el-form-item> |
| | | </el-form> |
| | | <el-dialog |
| | | title="任意图片" |
| | | width="80%" |
| | | v-model="anyPhotoDialog" |
| | | :before-close="beforeAnyPhotoDialogclose" |
| | | class="dialog_style" |
| | | |
| | | <ArbitraryPhoto |
| | | :max-select="3" |
| | | v-if="anyPhotoDialog" |
| | | v-model:dialog-visible="anyPhotoDialog" |
| | | @selectByAnyPhonoEvent="handleSelectedAnyPhono" |
| | | :subtask="subtask" |
| | | :defaultFile="fileList" |
| | | ref="arbitraryPhotoRef" |
| | | > |
| | | <ArbitraryPhoto |
| | | v-if="anyPhotoDialog" |
| | | @selectByAnyPhonoEvent="handleSelectedAnyPhono" |
| | | :subtask="subtask" |
| | | :defaultFile="fileList" |
| | | ref="arbitraryPhotoRef" |
| | | > |
| | | </ArbitraryPhoto> |
| | | </el-dialog> |
| | | </ArbitraryPhoto> |
| | | <el-dialog |
| | | title="台账图片" |
| | | width="80%" |
| | | v-model="ledgerPicDialog" |
| | | :before-close="beforeLedgerPicDialogclose" |
| | |
| | | </CompDevicePhono> |
| | | </el-dialog> |
| | | <el-dialog v-model="previewDialogVisible"> |
| | | <img w-full :src="previewDialogImageUrl" alt="预览" class="preview-pic"/> |
| | | <img w-full :src="previewDialogImageUrl" alt="预览" class="preview-pic" /> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | |
| | | |
| | | import { $fysp } from '@/api/index.js'; |
| | | import fileUtil from '@/utils/fileUtils.js'; |
| | | import { useCloned } from '@vueuse/core'; |
| | | import { get, useCloned } from '@vueuse/core'; |
| | | import { ElMessage } from 'element-plus'; |
| | | import deviceApi from '@/api/fysp/deviceApi'; |
| | | export default { |
| | |
| | | month: -1, |
| | | ledgerPicDialog: false, |
| | | rules: { |
| | | proType: { required: true, message: '问题类型不能为空', trigger: 'change' }, |
| | | description: { required: true, message: '问题描述不能为空', trigger: 'change' }, |
| | | locationid: { required: true, message: '问题位置不能为空', trigger: 'change' }, |
| | | advise: { required: true, message: '问题建议不能为空', trigger: 'change' }, |
| | | proRemark: { required: true, message: '补充说明不能为空', trigger: 'change' } |
| | | proType: { |
| | | required: true, |
| | | message: '问题类型不能为空', |
| | | trigger: 'change' |
| | | }, |
| | | description: { |
| | | required: true, |
| | | message: '问题描述不能为空', |
| | | trigger: 'change' |
| | | }, |
| | | locationid: { |
| | | required: true, |
| | | message: '问题位置不能为空', |
| | | trigger: 'change' |
| | | }, |
| | | advise: { |
| | | required: true, |
| | | message: '问题建议不能为空', |
| | | trigger: 'change' |
| | | }, |
| | | proRemark: { |
| | | required: true, |
| | | message: '补充说明不能为空', |
| | | trigger: 'change' |
| | | } |
| | | }, |
| | | deviceTopTypes: [ |
| | | { id: 0, label: '监控设备' }, |
| | |
| | | watch: { |
| | | fileList: { |
| | | handler(newFileList, oldFileList) { |
| | | console.log('newFileList', newFileList); |
| | | // 图片校验 |
| | | this.pictureValidate(); |
| | | }, |
| | |
| | | computed: { |
| | | descriptionOptions() { |
| | | const descriptions = []; |
| | | |
| | | this.problemTypeList.forEach((item) => { |
| | | if (item.typename == this.proType) { |
| | | descriptions.push(item); |
| | | } |
| | | }); |
| | | |
| | | return descriptions; |
| | | }, |
| | | problemTypeOptions() { |
| | |
| | | }, []); |
| | | }, |
| | | adviseOptions() { |
| | | var array = this.suggestions.filter((item) => item.adProblemtypeguid == this.currProTypeGuid); |
| | | console.log('adName', array); |
| | | |
| | | var problemGuid = this.currProTypeGuid || this.problem.guid; |
| | | var array = this.suggestions.filter( |
| | | (item) => item.adProblemtypeguid == problemGuid |
| | | ); |
| | | return array; |
| | | } |
| | | }, |
| | |
| | | // 将一个js对象中所有di,wi,pi开头的属性全部改成去掉这些前缀并且重新变为驼峰式命名 |
| | | const newObj = {}; |
| | | for (const key in obj) { |
| | | if (obj.hasOwnProperty(key)) { |
| | | let newKey = key; |
| | | if (key.startsWith('di')) { |
| | | newKey = key.substring(2); |
| | | } else if (key.startsWith('wi')) { |
| | | newKey = key.substring(2); |
| | | } else if (key.startsWith('pi')) { |
| | | newKey = key.substring(2); |
| | | } |
| | | newKey = newKey.charAt(0).toLowerCase() + newKey.slice(1); |
| | | newObj[newKey] = obj[key]; |
| | | let newKey = key; |
| | | if (key.startsWith('di')) { |
| | | newKey = key.substring(2); |
| | | } else if (key.startsWith('wi')) { |
| | | newKey = key.substring(2); |
| | | } else if (key.startsWith('pi')) { |
| | | newKey = key.substring(2); |
| | | } |
| | | newKey = newKey.charAt(0).toLowerCase() + newKey.slice(1); |
| | | newObj[newKey] = obj[key]; |
| | | } |
| | | return newObj; |
| | | }, |
| | |
| | | return new Date(x.dlCreateTime) - new Date(y.dlCreateTime); // 降序,升序则反之 |
| | | }); |
| | | }, |
| | | getDeviceImgList() { |
| | | async getDeviceImgList() { |
| | | this.deviceImgObjList = []; |
| | | this.deviceTopTypes.forEach(e => { |
| | | |
| | | const topTypeId = e.id; |
| | | deviceApi.fetchDevices(this.subtask.sceneId, topTypeId).then((result) => { |
| | | // 标准化属性名 |
| | | for (let i = 0; i < result.data.length; i++) { |
| | | var element = this.convertKeys(result.data[i]); |
| | | // 获取设备状态信息 |
| | | let data = { |
| | | deviceId: element.id, |
| | | sceneId: element.sceneGuid, |
| | | deviceTypeId: topTypeId |
| | | }; |
| | | deviceApi |
| | | .fetchDeviceStatus(data) |
| | | .then((status) => { |
| | | var statusData = status.data; |
| | | var imgPaths = []; |
| | | for (const deviceTopTypeElement of this.deviceTopTypes) { |
| | | const topTypeId = deviceTopTypeElement.id; |
| | | await deviceApi |
| | | .fetchDevices(this.subtask.sceneId, topTypeId) |
| | | .then((result) => { |
| | | // 标准化属性名 |
| | | for (let i = 0; i < result.data.length; i++) { |
| | | var element = this.convertKeys(result.data[i]); |
| | | // 获取设备状态信息 |
| | | let data = { |
| | | deviceId: element.id, |
| | | sceneId: element.sceneGuid, |
| | | deviceTypeId: topTypeId |
| | | }; |
| | | deviceApi |
| | | .fetchDeviceStatus(data) |
| | | .then((status) => { |
| | | var statusData = status.data; |
| | | var imgPaths = []; |
| | | |
| | | if (statusData) { |
| | | if (statusData.length == 0) { |
| | | this.deviceImgObjList.push(element); |
| | | return; |
| | | } |
| | | element = this.convertKeys(result.data[i]); |
| | | for (let j = 0; j < statusData.length; j++) { |
| | | // 复制出一个设备对象 |
| | | var newDevice = useCloned(element).cloned.value; |
| | | const statusItem = statusData[j]; |
| | | // 设备对象添加一个属性列表属性用来保存设备状态 |
| | | this.saveStatus(newDevice, statusItem); |
| | | newDevice.dlLocation = statusItem.dlLocation; |
| | | newDevice.topTypeId = topTypeId; |
| | | console.log('newDevice.topTypeId', newDevice.topTypeId); |
| | | console.log('newDevice', newDevice); |
| | | if (statusData) { |
| | | if (statusData.length == 0) { |
| | | this.deviceImgObjList.push(element); |
| | | return; |
| | | } |
| | | element = this.convertKeys(result.data[i]); |
| | | for (let j = 0; j < statusData.length; j++) { |
| | | // 复制出一个设备对象 |
| | | var newDevice = useCloned(element).cloned.value; |
| | | const statusItem = statusData[j]; |
| | | // 设备对象添加一个属性列表属性用来保存设备状态 |
| | | this.saveStatus(newDevice, statusItem); |
| | | newDevice.dlLocation = statusItem.dlLocation; |
| | | newDevice.topTypeId = topTypeId; |
| | | |
| | | this.deviceImgObjList.push(newDevice); |
| | | this.deviceImgObjList.push(newDevice); |
| | | } |
| | | } |
| | | } |
| | | }) |
| | | .catch((err) => {}); |
| | | } |
| | | }); |
| | | }); |
| | | }) |
| | | .catch((err) => {}); |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | initOptions() { |
| | | if (this.problem == undefined || this.problem == null) { |
| | | this.problem = {}; |
| | | this.deepCopyProblem = {}; |
| | | } else { |
| | | this.deepCopyProblem = useCloned(this.problem).cloned.value; |
| | |
| | | this.deepCopyProblem.description = currDescription; |
| | | this.proRemark = ''; |
| | | } else { |
| | | currDescription = currProName.substring(0, currProName.lastIndexOf('(')); |
| | | currDescription = currProName.substring( |
| | | 0, |
| | | currProName.lastIndexOf('(') |
| | | ); |
| | | |
| | | this.problemTypeList.forEach((item) => { |
| | | if (item.description === currDescription) { |
| | |
| | | // 问题建议 |
| | | problemApi.getSuggestion().then((res) => { |
| | | this.suggestions = res.data; |
| | | // 填充当前问题建议 |
| | | this.deepCopyProblem.advise = this.suggestions.filter( |
| | | (item) => item.adProblemtypeguid == this.deepCopyProblem.guid |
| | | )[0].adName; |
| | | }); |
| | | |
| | | // 问题位置 |
| | |
| | | this.oldFileList.filter((item) => item.url != file.url); |
| | | } |
| | | }, |
| | | handleLedgerPicPhono() { |
| | | handleLedgerPicPhono(data) { |
| | | this.beforeLedgerPicDialogclose(); |
| | | let isExist = false; |
| | | for (const item of data) { |
| | |
| | | isExist = false; |
| | | } |
| | | }, |
| | | beforeLedgerPicDialogclose() { |
| | | this.ledgerPicDialog = false; |
| | | }, |
| | | findProTypeByGuid(guid) { |
| | | let result; |
| | | this.problemTypeList.forEach((item) => { |
| | |
| | | return result; |
| | | }, |
| | | changeProblemname() { |
| | | if (this.proRemark == null || this.proRemark == '') { |
| | | if (!this.proRemark || this.proRemark == null || this.proRemark == '') { |
| | | this.deepCopyProblem.problemname = this.deepCopyProblem.description; |
| | | } else { |
| | | this.deepCopyProblem.problemname = |
| | |
| | | this.deepCopyProblem.description = ''; |
| | | this.deepCopyProblem.advise = ''; |
| | | }, |
| | | findProByProDesName(name) { |
| | | let result; |
| | | this.problemTypeList.forEach((item) => { |
| | | if (item.description == name) { |
| | | result = item; |
| | | } |
| | | }); |
| | | return result; |
| | | }, |
| | | onProDesChange(value) { |
| | | let currPro = this.findProTypeByGuid(value); |
| | | let currPro = this.findProByProDesName(value); |
| | | this.deepCopyProblem.advise = ''; |
| | | this.currProTypeGuid = value; |
| | | this.deepCopyProblem.description = currPro.description; |
| | | this.currProTypeGuid = currPro.guid; |
| | | // this.deepCopyProblem.description = currPro.description; |
| | | this.changeProblemname(); |
| | | this.deepCopyProblem.advise = ''; |
| | | |
| | | this.deepCopyProblem.advise = this.adviseOptions[0].adName; |
| | | var adName = |
| | | this.adviseOptions.length == 0 ? '' : this.adviseOptions[0].adName; |
| | | this.deepCopyProblem.advise = adName; |
| | | }, |
| | | onProLocationChange(value) { |
| | | this.posList.forEach((item) => { |
| | |
| | | } |
| | | exclude = false; |
| | | // picUrls.push(item) |
| | | } else { |
| | | } |
| | | }); |
| | | if (this.type == 1) { |
| | |
| | | const deepCopySubTask = useCloned(this.subtask).cloned.value; |
| | | const that = this; |
| | | fileUtil.getImageFiles(picUrls, function (files) { |
| | | console.log('deepCopySubTask', deepCopySubTask); |
| | | deepCopyPro.insGuid = deepCopySubTask.insGuid; |
| | | delete deepCopyPro['advise']; |
| | | delete deepCopyPro['description']; |
| | | deepCopyPro.proName = deepCopyPro.problemname; |
| | | delete deepCopyPro['problemname']; |
| | | deepCopyPro.ptGuid = that.findProTypeByGuid(that.currProTypeGuid).guid; |
| | | deepCopyPro.ptGuid = that.findProTypeByGuid( |
| | | that.currProTypeGuid |
| | | ).guid; |
| | | deepCopyPro.locationId = deepCopyPro.locationid; |
| | | delete deepCopyPro['locationid']; |
| | | data.append('problemVo', JSON.stringify(deepCopyPro)); |
| | |
| | | } |
| | | isExist = false; |
| | | } |
| | | }, |
| | | handleLedgerPicPhono(data) { |
| | | let isExist = false; |
| | | for (const item of data) { |
| | | for (const already of this.fileList) { |
| | | if (item.url == already.url) { |
| | | isExist = true; |
| | | } |
| | | } |
| | | if (!isExist) { |
| | | this.fileList.push({ |
| | | url: item.url, |
| | | name: '1' |
| | | }); |
| | | } |
| | | isExist = false; |
| | | } |
| | | |
| | | this.beforeAnyPhotoDialogclose(); |
| | | }, |
| | | chosePicFromAnyPic() { |
| | | this.anyPhotoDialog = true; |
| | |
| | | .row { |
| | | width: 100%; |
| | | } |
| | | |
| | | ::v-deep .el-dialog__body { |
| | | width: 95%; |
| | | } |
| | | ::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail { |
| | | object-fit: cover !important; |
| | | } |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | ::v-deep .el-upload--picture-card { |
| | | border: 0 !important; |
| | | } |
| | | </style> |