From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期三, 20 七月 2022 15:05:58 +0800 Subject: [PATCH] 修复国标配置的bug --- src/components/searching/uploadForModel.vue | 200 +++++++++++++++++++++++++++++++------------------ 1 files changed, 126 insertions(+), 74 deletions(-) diff --git a/src/components/searching/uploadForModel.vue b/src/components/searching/uploadForModel.vue index 7cd6c85..01a54f8 100644 --- a/src/components/searching/uploadForModel.vue +++ b/src/components/searching/uploadForModel.vue @@ -1,15 +1,22 @@ <template> <div class="left-section1"> <div class="source"> - <h2 class="title">鏁版嵁婧�</h2> - <div class="icon"> - <i class="iconfont iconchushaixuanxiang" @click="closeUpload()"></i> - </div> + <!-- <h2 class="title">鏁版嵁婧�</h2> --> + <!-- <div class="icon"> + <i class="iconfont iconchushaixuanxiang" @click="closeUpload"></i> + </div> --> </div> <p class="compearValue"> <span - style="font-family: PingFangSC-Regular;font-size: 13px;color: #333333;letter-spacing: 0.28px;margin-right:10px" - >瀵规瘮闃堝��</span> + style=" + letter-spacing: 0.4px; + margin-right: 10px; + font-size: 14px; + line-height: 20px; + color: #999999; + " + >瀵规瘮闃堝��</span + > <el-input-number size="mini" v-model="picQuality" @@ -17,6 +24,10 @@ :min="1" :max="100" ></el-input-number> + + <i class="iconfont iconchushaixuanxiang" style=" font-size: 16px; + color: #d1d1d1; + cursor: pointer;float:right;" @click="closeUpload"></i> </p> <div class="upload-img-box"> <el-upload @@ -31,68 +42,105 @@ :on-error="uploadError" :before-upload="beforeUpload" > - <i + <!-- <i ref="uploadIcon" class="el-icon-upload" - style="color:#3D68E1;font-size:60px;position:relative;left:50px" + style=" + color: #3d68e1; + font-size: 60px; + position: relative; + left: 50px; + " + ></i> --> + <i class="iconfont iconshangchuantupian-11" + ref="uploadIcon" + style=" + color: rgb(187,210,249); + font-size: 70px; + position: relative; + left: 50px; top: -10px; + " ></i> <span class="el-upload__text" - style="font-size:12px;color:#3D68E1;position:relative;top:25px;left:-30px" + style=" + font-size: 12px; + color: #999999; + position: relative; + top: 20px; + left: -30px; + " > <em>鐐瑰嚮閫夋嫨涓婁紶鍥剧墖</em> </span> </el-upload> </div> - <div class="res-img-box" v-if="resReady" :style="oneLine? 'height:95px':'height:185px'"> - <div class="single-box fl" v-for="(item, index) in realSmallPath" :key="index"> + <div + class="res-img-box" + v-if="resReady" + :style="oneLine ? 'height:95px' : 'height:185px'" + > + <div + class="single-box fl" + v-for="(item, index) in realSmallPath" + :key="index" + > <img - :src="item - ? '/httpImage/'+item - : tempImg - " - @click="selected($event,index)" - style="max-height:100%" - :style="index == clickNum ? 'border:1px solid #FF7733':''" + :src="item ? '/httpImage/' + item : tempImg" + @click="selected($event, index)" + style="max-height: 100%" + :style="index == clickNum ? 'border:1px solid #FF7733' : ''" /> - <img class="select" v-show="index == clickNum" :src="selectedIcon" alt /> + <img + class="select" + v-show="index == clickNum" + :src="selectedIcon" + alt + /> </div> - <div class="single-box fl" v-for="(item, index) in unrealSmallPath" :key="index+'t'"> - <img :src="item - ? item - : tempImg - " /> + <div + class="single-box fl" + v-for="(item, index) in unrealSmallPath" + :key="index + 't'" + > + <img :src="item ? item : tempImg" /> </div> </div> - <el-button-group v-if="resReady" style="margin-top:10px"> + <el-button-group v-if="resReady" style="margin-top: 10px"> <el-button type="info" size="small" @click="reUpload">閲嶆柊涓婁紶</el-button> - <el-button type="primary" size="small" style="margin-left:10px" @click="searchStart">寮�濮嬫绱�</el-button> + <el-button + type="primary" + size="small" + style="margin-left: 10px" + @click="searchStart" + >寮�濮嬫绱�</el-button + > </el-button-group> </div> </template> <script> -import request from "@/scripts/httpRequest" -import searchPhotoFromBase from "@/api/baseLibrary" +import request from "@/scripts/httpRequest"; +import searchPhotoFromBase from "@/api/baseLibrary"; export default { watch: { "VideoPhotoData.tabsForUploadImg": function (value) { - this.selectChange() + this.selectChange(); }, "VideoPhotoData.uploadImg": { handler(val) { // console.log('val:::', val) if (val !== "") { - this.tempUploadImg = val - this.realSmallPath = [val] - this.unrealSmallPath = [this.tempImg, this.tempImg] - this.resReady = true - this.displayUpload = false + this.tempUploadImg = val; + this.realSmallPath = [val]; + this.unrealSmallPath = [this.tempImg, this.tempImg]; + this.resReady = true; + this.displayUpload = false; } }, immediate: true, - deep: true - } + deep: true, + }, }, computed: { getResImg() { @@ -111,7 +159,7 @@ arr.length = 9; } return arr; - } + }, }, data() { return { @@ -130,11 +178,11 @@ realSmallPath: [], unrealSmallPath: [], oneLine: true, - multiSelect: false + multiSelect: false, }; }, mounted() { - this.selectChange() + this.selectChange(); }, methods: { selectChange() { @@ -144,7 +192,7 @@ this.VideoPhotoData.tabsForUploadImg[i].disabled = true; } } - this.$emit('labelDisabled', true) + this.$emit("labelDisabled", true); return; } if (this.compareTabs.includes("esData")) { @@ -153,7 +201,7 @@ this.VideoPhotoData.tabsForUploadImg[i].disabled = true; } } - this.$emit('labelDisabled', false) + this.$emit("labelDisabled", false); } else { for (let i = 0; i < this.VideoPhotoData.tabsForUploadImg.length; i++) { this.VideoPhotoData.tabsForUploadImg[i].disabled = false; @@ -161,65 +209,66 @@ } }, selected(e, index) { - console.log(index, '閫変腑浜嗙鍑犱釜', e) - this.clickNum = index + console.log(index, "閫変腑浜嗙鍑犱釜", e); + this.clickNum = index; }, async uploadImg(param) { - const fd = new FormData() - fd.append('file', param.file) - fd.append('picQuality', this.picQuality) - console.log("1121231", fd) + const fd = new FormData(); + fd.append("file", param.file); + fd.append("picQuality", this.picQuality); + console.log("1121231", fd); let res = await request({ - method: 'post', + method: "post", url: `/data/api-v/dbperson/faceExtract`, - data: fd - }) - this.unrealSmallPath.length = 0 - console.log("鍒囧浘杩斿洖锛�", res) + data: fd, + }); + this.unrealSmallPath.length = 0; + console.log("鍒囧浘杩斿洖锛�", res); if (res.success) { - document.querySelector(".el-upload-list").querySelector("img").src = "/httpImage/" + res.data.uploadImage - this.realSmallPath = res.data.smImage + document.querySelector(".el-upload-list").querySelector("img").src = + "/httpImage/" + res.data.uploadImage; + this.realSmallPath = res.data.smImage; if (res.data.smImage.length > 3) { - this.oneLine = false + this.oneLine = false; } else { - this.oneLine = true + this.oneLine = true; } if (res.data.smImage.length % 3 !== 0) { // 鐢ㄨ櫄鎷熶汉鍍忚ˉ鍏ㄦ暣琛� - const length = res.data.smImage.length % 3 - console.log("鐪嬬湅length鐨勫��", length) - this.unrealSmallPath.length = 0 + const length = res.data.smImage.length % 3; + console.log("鐪嬬湅length鐨勫��", length); + this.unrealSmallPath.length = 0; for (var i = 0; i < 3 - length; i++) { - this.unrealSmallPath.push(this.tempImg) + this.unrealSmallPath.push(this.tempImg); } } - console.log('--------------锛�', param) + console.log("--------------锛�", param); } }, uploadSuccess(resp, file, fileList) { this.$notify({ title: "鎴愬姛", message: "鍥剧墖涓婁紶鎴愬姛锛�", - type: "success" + type: "success", }); this.resReady = true; - console.log("鏂囦欢鍒楄〃锛�", file, fileList) - console.log("涓婁紶鐨勬枃浠讹細", this.bigPhoto) + console.log("鏂囦欢鍒楄〃锛�", file, fileList); + console.log("涓婁紶鐨勬枃浠讹細", this.bigPhoto); }, closeUpload() { - this.$emit("closeUpload") + this.$emit("closeUpload"); }, beforeUpload() { this.$refs.uploadIcon.parentNode.classList.add("s-display"); - console.log("涓婁紶涔嬪墠鏂囦欢锛�", this.bigPhoto) + console.log("涓婁紶涔嬪墠鏂囦欢锛�", this.bigPhoto); }, uploadError(err) { this.$notify({ title: "澶辫触", message: "鍥剧墖涓婁紶澶辫触锛�" + err, - type: "warning" + type: "warning", }); - console.log("涓婁紶澶辫触", err) + console.log("涓婁紶澶辫触", err); this.dialogImageUrl = ""; this.dialogVisible = false; this.$refs.uploadIcon.parentNode.classList.remove("s-display"); @@ -229,7 +278,7 @@ this.$refs.uploadIcon.parentNode.classList.remove("s-display"); }, reUpload() { - this.displayUpload = true + this.displayUpload = true; this.$refs.upload.clearFiles(); this.dialogImageUrl = ""; this.dialogVisible = false; @@ -238,10 +287,10 @@ }, searchStart() { this.BaseManageData.threshold = this.picQuality; - this.BaseManageData.picUrl = this.realSmallPath[this.clickNum] - this.BaseManageData.searchPhotoFromBase() + this.BaseManageData.picUrl = this.realSmallPath[this.clickNum]; + this.BaseManageData.searchPhotoFromBase(); }, - } + }, }; </script> <style lang="scss"> @@ -269,7 +318,8 @@ } } .el-upload--picture-card { - width: 260px !important; + width: 260px !important; background-color: #fff; + } .el-upload-list--picture-card { width: 260px !important; @@ -287,7 +337,7 @@ } .compearValue { text-align: left; - padding: 15px 0px; + padding-bottom: 20px; .el-input-number__decrease { .el-icon-arrow-down { font-size: 12px; @@ -319,6 +369,8 @@ padding: 5px; box-sizing: border-box; position: relative; + // display: inline-block; + // vertical-align: middle; img { width: 100%; cursor: pointer; -- Gitblit v1.8.0