Skip to content

H
hls-xcmg-vue-app
Commit 2e3084a0 authored by 786817560's avatar 786817560
Browse files
Options

Merge branch 'ren' into develop

parents 021289c9 6f625997
Hide whitespace changes
Inline Side-by-side
Showing with 137 additions and 54 deletions
12-7.md deleted 100644 → 0
View file @ 021289c9
### dom操作，一次性插入100个节点，和我分100次插入1个节点，哪个性能更高？
**答案**： 一次性插入100个节点性能更好。
**理解**：一次性插入100个，只对dom节点进行了一次操作，而分100次插入则操作了100次dom节点。插入节点时dom树每次会重新计算，生成新的dom树,渲染树也会跟着改变。浏览器会使渲染树中受影响的部分失效，重新绘制，因此也会进行100次重绘。影响性能。（也不知是影响cpu? Gpu? 还是浏览器--）。
### 问题
- ssr从服务器返回字符串，进行HTML渲染，是怎么返回的？以何种方式返回的？
- js解析主线程跟GUI渲染线程存在优先级吗？
src/pages/userBindNew/org/enclosure.vue
View file @ 2e3084a0
......@@ -2,7 +2,7 @@
* @Description: 附件信息
* @Author: your name
* @Date: 2019-09-20 09:35:11
* @LastEditTime: 2019-12-12 14:37:36
* @LastEditTime: 2019-12-12 17:23:31
* @LastEditors: Please set LastEditors
-->
<template>
......@@ -17,57 +17,61 @@
<div v-for="(list, index) in cddItemList" :key="index" class="card2">
<span>{{ list.description }}</span>
<div class="img-content">
<div v-if="list.cdd_item==='CAR_CARD' || list.cdd_item==='HOUSE_CARD'">
<!--从服务器上下载的图片-->
<div v-for="item in dowload_list">
<div v-for="(pic, index) in item" v-if="pic.check_id==list.check_id" :key="index">
<!-- 通过 -->
<div v-if="isApproved" class="card-upload">
<img :src="pic.url" @click="showBigPicture(pic.url)">
</div>
<!-- 未通过 -->
<div v-if="!isApproved" class="card-upload">
<img :src="pic.url" @click="ocrShow(list.cdd_item, '')">
</div>
<!-- <div v-if="pic.length === 0" class="card-upload plus" @click="imgUploadShow(list.description,list.check_id)">
<img src="@/assets/userBind/camera.png" class="upload-btn">
</div> -->
</div>
<!-- 房产 -->
<div v-if="list.cdd_item==='HOUSE_CARD'">
<div v-if="!houseImg" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
<img src="@/assets/userBind/camera.png" class="upload-btn" >
</div>
<!--待上传图片列表-->
<div
v-for="(item, index) in upload_list" v-if="item.check_id==list.check_id" :key="index"
class="card-upload">
<img :src="item.picture" @click="ocrShow(list.cdd_item, '')">
<!-- <div class="close" @click="remove_pic(item.attachment_id, index)">
<img src="@/assets/userBind/deleteIcon.png">
</div> -->
<!-- 通过 -->
<div v-if="isApproved" class="card-upload">
<img :src="houseImg" @click="showBigPicture(houseImg)">
</div>
<!-- 未通过 -->
<div v-if="houseImg&&!isApproved" class="card-upload">
<img :src="houseImg" @click="ocrShow(list.cdd_item, '')">
</div>
</div>
<div v-else>
<div v-for="item in dowload_list">
<div v-for="(pic, index) in item" v-if="pic.check_id==list.check_id" :key="index" class="card-upload">
<img :src="pic.url" @click="showBigPicture(pic.url)">
<div class="close" @click="delete_pic(pic.attachment_id)">
<img src="@/assets/userBind/deleteIcon.png">
</div>
</div>
<!-- 车辆 -->
<div v-if="list.cdd_item==='CAR_CARD'">
<div v-if="!carImg" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
<img src="@/assets/userBind/camera.png" class="upload-btn" >
</div>
<!-- 通过 -->
<div v-if="carImg&&isApproved" class="card-upload">
<img :src="carImg" @click="showBigPicture(carImg)">
</div>
<!-- 未通过 -->
<div v-if="carImg&&!isApproved" class="card-upload">
<img :src="carImg" @click="ocrShow(list.cdd_item, '')">
</div>
</div>
<!-- 其他 -->
<div v-if="list.cdd_item==='ASSETS_CARD'">
<!--待上传图片列表-->
<div
v-for="(item, index) in upload_list" v-if="item.check_id==list.check_id" :key="index"
class="card-upload">
<img :src="item.picture" @click="ocrShow(list.cdd_item, '')">
<div class="close" @click="remove_pic(item.attachment_id, index)">
<img src="@/assets/userBind/deleteIcon.png">
v-for="(item, index) in upload_list"
v-if="item.check_id==list.check_id"
:key="index"
class="card-upload"
>
<img :src="item.picture" @click="showBigPicture(item.picture)" >
<div class="close" @click="remove_pic(item.attachment_id,index)">
<img src="@/assets/userBind/deleteIcon.png" >
</div>
</div>
<!--从服务器上下载的图片-->
<div v-for="(pic, index) in dowload_list[0]" :key="index">
<div v-if="pic.check_id==list.check_id" :key="index" class="card-upload">
<img :src="pic.url" @click="showBigPicture(pic.url)" >
<div class="close" @click="delete_pic(pic.attachment_id)">
<img src="@/assets/userBind/deleteIcon.png" >
</div>
</div>
</div>
<div class="card-upload plus" @click="imgUploadShow(list.description,list.check_id)">
<img src="@/assets/userBind/camera.png" class="upload-btn">
<img src="@/assets/userBind/camera.png" class="upload-btn" >
</div>
</div>
</div>
</div>
<!-- </div> -->
......@@ -81,6 +85,10 @@
export default {
data () {
return {
house_id: '', // 房产证checkid
car_id: '', // 车辆证checkid
carFlag: false, // 行驶证查看标识，为false则用查询出来的，为true则用拍照出来的
houseFlag: false, // 房产证查看标识，为false则用查询出来的，为true则用拍照出来的
carImg: '',
houseImg: '',
from: false,
......@@ -89,6 +97,8 @@ export default {
isApproved: false,
isUploadCar: false,
isUploadHouse: false,
carAttachmentId: '', // 车辆证id
houseAttachmentId: '', // 房产证id
cddItemList: [], // 资料清单列表
dowload_list: [], // 下载图片列表
upload_list: [], // 上传图片列表
......@@ -116,6 +126,43 @@ export default {
bp_id: this.bp_id,
},
})
let vm = this
if (vm.isUploadHouse) {
vm.houseFlag = true
vm.delete_pic_to_ocr(vm.houseAttachmentId) // 房产证修改，重新上传
let list = []
let obj = {
pkvalue: vm.house_id,
source_type: 'PRJ_CDD_ITEM_CHECK',
picture: '',
check_id: vm.house_id,
filePath: vm.houseImg,
attachment_id: '',
user_id: 1,
fileName: '房产证',
}
list.push(obj)
vm.save_picture(list)
vm.isUploadHouse = false // 置为false,防止再次保存重复上传，只有重新识别才会重新上传
}
if (vm.isUploadCar) {
vm.carFlag = true
vm.delete_pic_to_ocr(vm.carAttachmentId) // 房产证修改，重新上传
let list = []
let obj = {
pkvalue: vm.car_id,
source_type: 'PRJ_CDD_ITEM_CHECK',
picture: '',
check_id: vm.car_id,
filePath: vm.carImg,
attachment_id: '',
user_id: 1,
fileName: '行驶证',
}
list.push(obj)
vm.save_picture(list)
vm.isUploadCar = false // 置为false,防止再次保存重复上传，只有重新识别才会重新上传
}
},
// 房产证/车辆证识别
ocrShow (ocrType, type) {
......@@ -171,8 +218,10 @@ export default {
} else {
if (ocrType === 'HOUSE_CARD') {
vm.houseImg = imgUrl[0]
vm.isUploadHouse = true
} else if (ocrType === 'CAR_CARD') {
vm.carImg = imgUrl[0]
vm.isUploadCar = true
}
}
}
......@@ -195,6 +244,19 @@ export default {
vm.hlsHttp.post(url, param).then(function (res) {
if (res.result === 'S') {
vm.cddItemList = []
var listTemp = [...res.lists]
listTemp.forEach(item => {
switch (item.cdd_item) {
case 'HOUSE_CARD': // 房产证
vm.house_id = item.check_id
break
case 'CAR_CARD': // 承租人身份证背面
vm.car_id = item.check_id
break
default:
break
}
})
vm.cddItemList = res.lists.filter(item => { return item.cdd_item === 'HOUSE_CARD' || item.cdd_item === 'CAR_CARD' || item.cdd_item === 'ASSETS_CARD' })
// 查询图片
vm.cddItemList.forEach((item, index) => {
......@@ -217,9 +279,24 @@ export default {
res.lists.forEach(item => {
item['url'] = process.env.filePath + 'attachment_id=' + item.attachment_id + '&access_token=' + window.localStorage.access_token
})
switch (cdd_item) {
case 'HOUSE_CARD': // 房产证
if (!vm.houseFlag) {
vm.houseImg = res.lists[0].url
}
vm.houseAttachmentId = res.lists[0].attachment_id
break
case 'CAR_CARD': // 行驶证
if (!vm.carFlag) {
vm.carImg = res.lists[0].url
}
vm.carAttachmentId = res.lists[0].attachment_id
break
default:
vm.dowload_list.push(res.lists)
console.log('dowload_listbbbbbbbbbbbb', vm.dowload_list)
}
console.log('res.lists', res.lists)
vm.dowload_list.push(res.lists)
console.log('dowload_list', vm.dowload_list)
} else {
hlsPopup.showLongCenter(res.message)
}
......@@ -403,6 +480,23 @@ export default {
hlsPopup.hideLoading()
}
},
// 删除重新识别之前的图
delete_pic_to_ocr (attachment_id) {
let vm = this
var delete_list = []
let obj = { attachment_id: attachment_id }
delete_list.push(obj)
let url = process.env.basePath + 'app_delete_attment' // 附件删除
let param = {
picturelist: delete_list,
}
vm.hlsHttp.post(url, param).then(function (res) {
hlsPopup.hideLoading()
if (res.result === 'S') {
} else if (res.result === 'E') {
}
})
},
},
}
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment