From f74222e571d9164a59e01194f35ff1e34f10a423 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 15 Dec 2023 17:12:33 +0800
Subject: [PATCH] fix:热力图播放
---
src/views/toCarryOutLegislativeReforms/components/workOrderInformation.vue | 295 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 159 insertions(+), 136 deletions(-)
diff --git a/src/views/toCarryOutLegislativeReforms/components/workOrderInformation.vue b/src/views/toCarryOutLegislativeReforms/components/workOrderInformation.vue
index 4c00f47..f67231a 100644
--- a/src/views/toCarryOutLegislativeReforms/components/workOrderInformation.vue
+++ b/src/views/toCarryOutLegislativeReforms/components/workOrderInformation.vue
@@ -1,25 +1,19 @@
<template>
<div>
- <el-dialog :title="dialogData.title" :visible.sync="visible" width="900px" center :before-close="close">
+ <el-dialog :title="dialogData.title" top="30px" :visible.sync="visible" width="900px" center :before-close="close">
<div slot="title" class="titBox">
<div>{{ parentFormData.allocationNum }}</div>
<div>{{ dialogData.title }}</div>
</div>
<div>
<div v-if="dialogData.pageType !=='delay'" class="stepsList">
- <el-steps :space="200" :active="parentFormData.approveList.length+1" align-center>
- <el-step
- v-for="(item,index) in setepList"
- :key="index"
- :title="'' + item.createName + ' ' + item.stateName"
- :description="item.createTime"
- />
+ <el-steps :space="200" :active="activeLeng" align-center>
+ <el-step v-for="(item,index) in setepList" :key="index" :title="'' + item.createName + ' ' + item.stateName" :description="item.createTime" />
</el-steps>
</div>
<div class="inforData">
<el-descriptions title="������������" :column="parseInt('4')">
<el-descriptions-item label="������������" label-class-name="itemSpan">{{ parentFormData.escalationTime }}</el-descriptions-item>
- <el-descriptions-item label="������������" label-class-name="itemSpan">{{ parentFormData.pollutePosition }}</el-descriptions-item>
<el-descriptions-item label="������������" label-class-name="itemSpan">{{ unitIdFormatter }}</el-descriptions-item>
<el-descriptions-item label="������������" label-class-name="itemSpan">{{ polluteTypeFormatter }}</el-descriptions-item>
<el-descriptions-item label="������������" label-class-name="itemSpan">{{ dictObj.changeEnum[parentFormData.changeType] }}</el-descriptions-item>
@@ -27,18 +21,16 @@
<el-descriptions-item label="������������" label-class-name="itemSpan">{{ updataUnitIdFormatter }}</el-descriptions-item>
<el-descriptions-item label="���������" label-class-name="itemSpan">{{ parentFormData.escalationName }}</el-descriptions-item>
</el-descriptions>
+ <el-descriptions :column="parseInt('2')">
+ <el-descriptions-item label="������������" label-class-name="itemSpan">{{ parentFormData.pollutePosition }}</el-descriptions-item>
+ <el-descriptions-item label="������������" label-class-name="itemSpan">{{ dictObj.emphasisEnum[parentFormData.keyPoint] }}</el-descriptions-item>
+ </el-descriptions>
<el-descriptions :column="parseInt('1')">
<el-descriptions-item label="������������" label-class-name="itemSpan" :content-style="{'width': '80%'}">{{ parentFormData.problemDescribe }}</el-descriptions-item>
<el-descriptions-item label="������" label-class-name="itemSpan" :content-style="{'width': '80%'}">
<div>
<div v-for="(file,index) in fileBaseListCover" :key="file.id+index" class="block">
- <el-image
- v-if="file.fileType ===1"
- style="width: 100px; height: 100px"
- :src="file.url"
- :preview-src-list="fileBaseList"
- :initial-index="index"
- />
+ <el-image v-if="file.fileType ===1" style="width: 100px; height: 100px" :src="file.url" :preview-src-list="getPreviewImages(file.id,fileBaseList)" :initial-index="index" />
<video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
������������������������ video ���������
</video>
@@ -54,8 +46,8 @@
<div style="display: flex;">
<el-form-item label="������������:">
<el-radio-group v-model="workForme.isChange">
- <el-radio :label="0">���</el-radio>
- <el-radio :label="1">���</el-radio>
+ <el-radio :label="1">���</el-radio>
+ <el-radio :label="0">���</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="���������:">
@@ -63,12 +55,7 @@
</el-form-item>
</div>
<el-form-item label="������������:">
- <el-input
- v-model="workForme.changeDescribe"
- type="textarea"
- :autosize="{ minRows: 2, maxRows: 4}"
- placeholder="���������������"
- />
+ <el-input v-model="workForme.changeDescribe" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="���������������" />
</el-form-item>
<el-row>
<el-form-item label="������:">
@@ -82,28 +69,27 @@
<!-- ������������ -->
<div v-if="(dialogData.pageType ==='detail'||dialogData.pageType ==='approve' )&& parentFormData.state >=30">
<el-row class="rectificationContent">
- <el-col :span="12"><div class="grid-content bg-purple" />
+ <el-col :span="12">
+ <div class="grid-content bg-purple" />
<el-descriptions title="������������" :column="parseInt('2')">
- <el-descriptions-item label="������������" label-class-name="itemSpan">{{ parentFormData.changeType }}</el-descriptions-item>
+ <el-descriptions-item label="������������" label-class-name="itemSpan">{{ dictObj.yesOrNo[parentFormData.isChange] }}</el-descriptions-item>
<el-descriptions-item label="���������" label-class-name="itemSpan">{{ parentFormData.changeName }}</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="parseInt('1')">
<el-descriptions-item label="������������" label-class-name="itemSpan">{{ parentFormData.changeDescribe }}</el-descriptions-item>
</el-descriptions>
</el-col>
- <el-col :span="12"><div class="grid-content bg-purple-light" />
+ <el-col :span="12">
+ <div class="grid-content bg-purple-light" />
<el-row>
- <el-col :span="3" style="margin-top: 40px;font-size: 15px;color: #101010;"><div class="grid-content bg-purple" />���������</el-col>
- <el-col :span="21"><div class="grid-content bg-purple-light" />
+ <el-col :span="3" style="margin-top: 40px;font-size: 15px;color: #101010;">
+ <div class="grid-content bg-purple" />���������
+ </el-col>
+ <el-col :span="21">
+ <div class="grid-content bg-purple-light" />
<div>
<div v-for="(file,index) in fileChangeListCover" :key="file.id+index" class="block">
- <el-image
- v-if="file.fileType ===1"
- style="width: 100px; height: 100px"
- :src="file.url"
- :preview-src-list="fileChangeList"
- :initial-index="index"
- />
+ <el-image v-if="file.fileType ===1" style="width: 100px; height: 100px" :src="file.url" :preview-src-list="getPreviewImages(file.id,fileChangeList)" :initial-index="index" />
<video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
������������������������ video ���������
</video>
@@ -117,7 +103,8 @@
<!-- ������������ -->
<div v-if="dialogData.pageType ==='detail'&& parentFormData.state>30">
<el-row class="rectificationContent">
- <el-col :span="12"><div class="grid-content bg-purple" />
+ <el-col :span="12">
+ <div class="grid-content bg-purple" />
<el-descriptions title="������������" :column="2">
<el-descriptions-item label="������������" label-class-name="itemSpan">{{ parentFormData.checkScore }}</el-descriptions-item>
</el-descriptions>
@@ -125,20 +112,18 @@
<el-descriptions-item label="������" label-class-name="itemSpan">{{ parentFormData.checkDescribe }}</el-descriptions-item>
</el-descriptions>
</el-col>
- <el-col :span="12"><div class="grid-content bg-purple-light" />
+ <el-col :span="12">
+ <div class="grid-content bg-purple-light" />
<el-row>
- <el-col :span="3" style="margin-top: 40px;font-size: 15px;color: #101010;"><div class="grid-content bg-purple" />���������</el-col>
- <el-col :span="21"><div class="grid-content bg-purple-light" />
+ <el-col :span="3" style="margin-top: 40px;font-size: 15px;color: #101010;">
+ <div class="grid-content bg-purple" />���������
+ </el-col>
+ <el-col :span="21">
+ <div class="grid-content bg-purple-light" />
<div>
<div>
<div v-for="(file,index) in fileApproveListCover" :key="file.id+index" class="block">
- <el-image
- v-if="file.fileType ===1"
- style="width: 100px; height: 100px"
- :src="file.url"
- :preview-src-list="fileApproveList"
- :initial-index="index"
- />
+ <el-image v-if="file.fileType ===1" style="width: 100px; height: 100px" :src="file.url" :preview-src-list="getPreviewImages(file.id,fileApproveList)" :initial-index="index" />
<video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
������������������������ video ���������
</video>
@@ -153,30 +138,30 @@
<!-- ������������ -->
<div v-if="(dialogData.pageType ==='delay' && (dialogData.pageState ==='view' ||dialogData.pageState ==='edit'))">
<el-row class="rectificationContent">
- <el-col :span="12"><div class="grid-content bg-purple" />
+ <el-col :span="12">
+ <div class="grid-content bg-purple" />
<el-descriptions title="������������" :column="1">
<el-descriptions-item label="������������" label-class-name="itemSpan">{{ parentFormData.extensionNum }}</el-descriptions-item>
<el-descriptions-item label="������������" label-class-name="itemSpan">{{ parentFormData.remake }}</el-descriptions-item>
</el-descriptions>
</el-col>
- <el-col :span="12"><div class="grid-content bg-purple-light" />
+ <el-col :span="12">
+ <div class="grid-content bg-purple-light" />
<el-row>
- <el-col :span="3" style="margin-top: 40px;font-size: 15px;color: #101010;"><div class="grid-content bg-purple" />���������</el-col>
- <el-col :span="21"><div class="grid-content bg-purple-light" />
+ <el-col :span="3" style="margin-top: 40px;font-size: 15px;color: #101010;">
+ <div class="grid-content bg-purple" />���������
+ </el-col>
+ <el-col :span="21">
+ <div class="grid-content bg-purple-light" />
<div>
<div v-for="(file,index) in fileDelayListCover" :key="file.id+index" class="block">
- <el-image
- v-if="file.fileType ===1"
- style="width: 100px; height: 100px"
- :src="file.url"
- :preview-src-list="fileDelayList"
- :initial-index="index"
- />
+ <el-image v-if="file.fileType ===1" style="width: 100px; height: 100px" :src="file.url" :preview-src-list="getPreviewImages(file.id,fileDelayList)" :initial-index="index" />
<video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
������������������������ video ���������
</video>
</div>
- </div></el-col>
+ </div>
+ </el-col>
</el-row>
</el-col>
</el-row>
@@ -188,12 +173,7 @@
<el-input v-model="approveForm.checkScore" style="width: 120px;" size="mini" />
</el-form-item>
<el-form-item label="������:">
- <el-input
- v-model="approveForm.checkDescribe"
- type="textarea"
- :autosize="{ minRows: 2, maxRows: 4}"
- placeholder="���������������"
- />
+ <el-input v-model="approveForm.checkDescribe" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="���������������" />
</el-form-item>
<el-form-item label="������:">
<uploadFile :upload-url="uploadTermExcelUrl" :sys-code="dialogData.sysCode" />
@@ -207,12 +187,7 @@
<el-input v-model="delayForm.extensionNum" style="width: 200px;" />
</el-form-item>
<el-form-item label="������������:">
- <el-input
- v-model="delayForm.remake"
- type="textarea"
- :autosize="{ minRows: 2, maxRows: 4}"
- placeholder="���������������"
- />
+ <el-input v-model="delayForm.remake" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="���������������" />
</el-form-item>
<el-form-item label="������:">
<uploadFile :upload-url="uploadTermExcelUrl" :sys-code="dialogData.sysCode" />
@@ -220,6 +195,8 @@
</el-form>
</div>
</div>
+ <el-alert v-if="parentFormData.isInvalid===1" title="���������" type="warning" show-icon :description="`���������${parentFormData.invalidReason}`" :closable="false">
+ </el-alert>
<div slot="footer" class="dialog-footer">
<el-button @click="close()">������</el-button>
<el-button v-if="dialogData.pageType ==='approve'" type="danger" @click="handleSubmit(50)">������</el-button>
@@ -230,13 +207,7 @@
</el-dialog>
<el-dialog :visible.sync="videoVisible" width="600px" :modal-append-to-body="false" :destroy-on-close="true" @close="handleCancel">
<div style="text-align: center;">
- <video
- ref="video"
- style="width: 300px;height: 500px"
- :src="dialogImageUrl"
- controls
- autoplay
- />
+ <video ref="video" style="width: 300px;height: 500px" :src="dialogImageUrl" controls autoplay />
</div>
</el-dialog>
</div>
@@ -260,7 +231,7 @@
return {
centerDialogVisible: true,
workForme: {
- isChange: '',
+ isChange: 1,
changeName: '',
changeDescribe: ''
},
@@ -272,9 +243,7 @@
remake: '',
extensionNum: ''
},
- rectificationFromData: {
-
- },
+ rectificationFromData: {},
dialogVisibleMainGraph: false,
hasFile: '',
setepListAdd: {
@@ -287,9 +256,7 @@
{ createName: '', stateName: '������', createTime: '' },
{ createName: '', stateName: '������', createTime: '' }
],
- set3: [
- { createName: '', stateName: '������', createTime: '' }
- ]
+ set3: [{ createName: '', stateName: '������', createTime: '' }]
},
unitList: [],
polluteList: [],
@@ -305,7 +272,8 @@
fileDelayListCover: [],
fileDelayList: [],
videoVisible: false,
- dialogImageUrl: ''
+ dialogImageUrl: '',
+ activeLeng: 1
}
},
computed: {
@@ -316,37 +284,50 @@
console.log('parentFormData.approveList', this.dialogData.parentFormData)
return this.dialogData.parentFormData
},
- updataUnitIdFormatter: function() {
- const data = this.unitList.find(item => item && item.unitId === this.dialogData.parentFormData.escalationUnitId)
+ updataUnitIdFormatter: function () {
+ const data = this.unitList.find(
+ item =>
+ item &&
+ item.unitId === this.dialogData.parentFormData.escalationUnitId
+ )
return data ? data.unitName : ''
},
- unitIdFormatter: function() {
- const data = this.unitList.find(item => item && item.unitId === this.dialogData.parentFormData.unitId)
+ unitIdFormatter: function () {
+ const data = this.unitList.find(
+ item => item && item.unitId === this.dialogData.parentFormData.unitId
+ )
return data ? data.unitName : ''
},
- polluteTypeFormatter: function() {
- const data = this.polluteList.find(item => item && parseInt(item.dataKey) === this.dialogData.parentFormData.polluteType)
+ polluteTypeFormatter: function () {
+ const data = this.polluteList.find(
+ item =>
+ item &&
+ parseInt(item.dataKey) === this.dialogData.parentFormData.polluteType
+ )
return data ? data.dataValue : ''
},
setepList() {
const leng = this.dialogData.parentFormData.approveList.length
let data = _.cloneDeep(this.dialogData.parentFormData.approveList)
-
+ console.log('setepList', this.dialogData.parentFormData.approveList)
if (leng === 1) {
data = [...data, ...this.setepListAdd.set1]
+ this.activeLeng = 1
}
if (leng === 2) {
data = [...data, ...this.setepListAdd.set2]
+ this.activeLeng = 2
}
if (leng === 3) {
data = [...data, ...this.setepListAdd.set3]
+ this.activeLeng = 4
}
- console.log('data', leng)
+ console.log('datadata', data)
return data
}
},
watch: {
- 'parentFormData': {
+ parentFormData: {
handler(newVal) {
this.searchthisFileList(newVal)
},
@@ -363,7 +344,7 @@
console.log('fileList', fileList)
this.fileList = []
if (fileList.length > 0) {
- fileList.map((item) => {
+ fileList.map(item => {
if (item.response) {
this.fileList.push(item.response.data)
}
@@ -372,6 +353,22 @@
})
},
methods: {
+ getPreviewImages(index, list) {
+ let startIndex = 0
+ const chechList = _.cloneDeep(list)
+ chechList.forEach((item, i) => {
+ const str = item.substring(item.lastIndexOf('/') + 1)
+ if (Number(str) === Number(index)) {
+ startIndex = i
+ }
+ })
+ console.log('startIndex', startIndex)
+ var imgList = [...list]
+ if (index === 0) return imgList
+ var start = imgList.splice(startIndex)
+ var remain = imgList.splice(0, startIndex)
+ return start.concat(remain)
+ },
openVideo(item) {
console.log('item', item)
this.dialogImageUrl = item.url
@@ -385,11 +382,16 @@
if (newVal.fileBaseList && newVal.fileBaseList.length > 0) {
newVal.fileBaseList.forEach(item => {
if (item.fileType === 1) {
- this.fileBaseList.push(`${requestObj.baseUrl}/file/preview/${item.fileId}`) // ������
+ this.fileBaseList.push(
+ `${requestObj.baseUrl}/file/preview/${item.fileId}`
+ ) // ������
}
this.fileBaseListCover.push({
- url: item.fileType === 1 ? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}` : `${requestObj.baseUrl}/file/preview/${item.fileId}`,
+ url:
+ item.fileType === 1
+ ? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}`
+ : `${requestObj.baseUrl}/file/preview/${item.fileId}`,
fileType: item.fileType,
id: item.fileId
})
@@ -399,10 +401,15 @@
if (newVal.fileChangeList && newVal.fileChangeList.length > 0) {
newVal.fileChangeList.forEach(item => {
if (item.fileType === 1) {
- this.fileChangeList.push(`${requestObj.baseUrl}/file/preview/${item.fileId}`) // ������
+ this.fileChangeList.push(
+ `${requestObj.baseUrl}/file/preview/${item.fileId}`
+ ) // ������
}
this.fileChangeListCover.push({
- url: item.fileType === 1 ? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}` : `${requestObj.baseUrl}/file/preview/${item.fileId}`,
+ url:
+ item.fileType === 1
+ ? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}`
+ : `${requestObj.baseUrl}/file/preview/${item.fileId}`,
fileType: item.fileType,
id: item.fileId
})
@@ -411,11 +418,18 @@
if (newVal.fileApproveList && newVal.fileApproveList.length > 0) {
newVal.fileApproveList.forEach(item => {
if (item.fileType === 1) {
- this.fileApproveList.push(`${requestObj.baseUrl}/file/preview/${item.fileId}`) // ������
+ this.fileApproveList.push(
+ `${requestObj.baseUrl}/file/preview/${item.fileId}`
+ ) // ������
}
- this.fileApproveList.push(`${requestObj.baseUrl}/file/preview/${item.fileId}`) // ������
+ this.fileApproveList.push(
+ `${requestObj.baseUrl}/file/preview/${item.fileId}`
+ ) // ������
this.fileApproveListCover.push({
- url: item.fileType === 1 ? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}` : `${requestObj.baseUrl}/file/preview/${item.fileId}`,
+ url:
+ item.fileType === 1
+ ? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}`
+ : `${requestObj.baseUrl}/file/preview/${item.fileId}`,
fileType: item.fileType,
id: item.fileId
})
@@ -424,11 +438,18 @@
if (newVal.fileList && newVal.fileList.length > 0) {
newVal.fileList.forEach(item => {
if (item.fileType === 1) {
- this.fileDelayList.push(`${requestObj.baseUrl}/file/preview/${item.fileId}`) // ������
+ this.fileDelayList.push(
+ `${requestObj.baseUrl}/file/preview/${item.fileId}`
+ ) // ������
}
- this.fileDelayList.push(`${requestObj.baseUrl}/file/preview/${item.fileId}`) // ������
+ this.fileDelayList.push(
+ `${requestObj.baseUrl}/file/preview/${item.fileId}`
+ ) // ������
this.fileDelayListCover.push({
- url: item.fileType === 1 ? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}` : `${requestObj.baseUrl}/file/preview/${item.fileId}`,
+ url:
+ item.fileType === 1
+ ? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}`
+ : `${requestObj.baseUrl}/file/preview/${item.fileId}`,
fileType: item.fileType,
id: item.fileId
})
@@ -443,7 +464,7 @@
this.$request({
url: '/allocation/unit',
method: 'get'
- }).then((res) => {
+ }).then(res => {
this.unitList = res.data
})
},
@@ -455,7 +476,7 @@
id: this.dialogData.parentFormData.id,
state: state
}
- }).then((res) => {
+ }).then(res => {
if (res.code === 0) {
this.$emit('update:visible', false)
this.$emit('handeleSumit')
@@ -472,32 +493,32 @@
if (this.dialogData.pageType === 'work') {
api = '/allocation/change'
data = {
- 'allocationId': this.dialogData.parentFormData.allocationId,
+ allocationId: this.dialogData.parentFormData.allocationId,
...this.workForme,
- 'fileChangeList': this.fileList,
+ fileChangeList: this.fileList,
state: 30
}
} else if (this.dialogData.pageType === 'approve') {
api = '/allocation/check'
data = {
- 'allocationId': this.dialogData.parentFormData.allocationId,
+ allocationId: this.dialogData.parentFormData.allocationId,
...this.approveForm,
- 'fileApproveList': this.fileList,
+ fileApproveList: this.fileList,
state: state
}
} else if (this.dialogData.pageType === 'delay') {
api = '/allocation/applyfor'
data = {
- 'allocationId': this.dialogData.parentFormData.allocationId,
+ allocationId: this.dialogData.parentFormData.allocationId,
...this.delayForm,
- 'fileList': this.fileList
+ fileList: this.fileList
}
}
this.$request({
url: api,
method: 'post',
data: data
- }).then((res) => {
+ }).then(res => {
if (res.code === 0) {
this.$emit('update:visible', false)
this.$emit('handeleSumit')
@@ -510,7 +531,7 @@
this.$request({
url: '/allocation/contaminate',
method: 'get'
- }).then((res) => {
+ }).then(res => {
this.polluteList = res.data
})
}
@@ -519,14 +540,14 @@
</script>
<style lang="scss" scoped>
-.titBox{
+.titBox {
position: relative;
font-size: 18px;
- div:first-child{
+ div:first-child {
position: absolute;
left: 10px;
}
- div{
+ div {
display: inline-block;
}
}
@@ -534,26 +555,28 @@
border-bottom: 1px dashed rgba(187, 187, 187, 1);
padding-bottom: 10px;
}
-.inforData{
+.inforData {
margin-top: 20px;
border-bottom: 1px dashed rgba(187, 187, 187, 1);
padding-bottom: 10px;
- font-size: 15px!important;
- color: rgba(16, 16, 16, 1)!important;
+ font-size: 15px !important;
+ color: rgba(16, 16, 16, 1) !important;
}
- /deep/.itemSpan{
- width: 70px;
- text-align: right;
- font-size: 15px;
- color: rgba(16, 16, 16, 1);
- }
- .rectification ,.examineAndApprove,.rectificationContent{
- margin-top: 20px;
- border-bottom: 1px dashed rgba(187, 187, 187, 1);
- margin-bottom: 10px;
- }
- .block {
- display: inline-block;
- margin-right: 10px;
+/deep/.itemSpan {
+ width: 70px;
+ text-align: right;
+ font-size: 15px;
+ color: rgba(16, 16, 16, 1);
+}
+.rectification,
+.examineAndApprove,
+.rectificationContent {
+ margin-top: 20px;
+ border-bottom: 1px dashed rgba(187, 187, 187, 1);
+ margin-bottom: 10px;
+}
+.block {
+ display: inline-block;
+ margin-right: 10px;
}
</style>
--
Gitblit v1.8.0