From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期二, 09 十一月 2021 18:01:59 +0800 Subject: [PATCH] 问题修复 --- src/pages/search/index/Searching.vue | 273 +++++++++++++++++++++++++++++++++--------------------- 1 files changed, 168 insertions(+), 105 deletions(-) diff --git a/src/pages/search/index/Searching.vue b/src/pages/search/index/Searching.vue index 554031e..f78deed 100644 --- a/src/pages/search/index/Searching.vue +++ b/src/pages/search/index/Searching.vue @@ -27,12 +27,12 @@ <el-select v-model="tagValues" multiple - @change="searchingBtn" :disabled="isDisabled" collapse-tags size="mini" style="width:calc(100% - 40px);min-width: 120px;" placeholder="璇烽�夋嫨" + @change="tagChange" > <el-option v-for="item in VideoPhotoData.tabs" @@ -94,7 +94,7 @@ ></el-option> </el-select> </p> - <p class="p-date" style="width:19%"> + <p class="p-date" style="width:19%;vertical-align: top;"> <el-date-picker size="mini" v-model="searchTime" @@ -120,29 +120,16 @@ <b class="clear-searching" @click="clearSearch">閲嶇疆</b> </p> </div> - <div ref="mid" style="height:calc(100% - 72px)"> - <!-- <div id="searchMid" class="mid" ref="scrollContain" v-if="!VideoPhotoData.uploadDiaplay"> - <Card - :class="item.activeObject.id === VideoPhotoData.activeCard ? 'my-active-card' : ''" - v-for="(item, index) in VideoPhotoData.cards" - :key="index + 'a'" - :outHeight="'155px'" - :outWidth="cardWidth" - :data="item" - :showType="showType" - @detailsClick="getDetails($event, index)" - @addToBase="toAdd" - ></Card> - </div>--> - <div id="searchMid" class="mid"> - <div class="left-selection" v-if="VideoPhotoData.uploadDiaplay"> - <upload-img ref="uploadImg" @labelDisabled="disabled"></upload-img> - </div> - <div - class="right-section" - ref="scrollContain" - :style="VideoPhotoData.uploadDiaplay ? 'calc(100% - 315px)' : 'width:100%'" - > + <div ref="mid" style="height:calc(100% - 50px);"> + <div class="left-selection" v-if="VideoPhotoData.uploadDiaplay"> + <upload-img ref="uploadImg" @labelDisabled="disabled"></upload-img> + </div> + <div + id="searchMid" + class="mid" + :style="{width: VideoPhotoData.uploadDiaplay ? 'calc(100% - 315px)' : '100%'}" + > + <div class="right-section" ref="scrollContain"> <Card v-for="(item, index) in VideoPhotoData.cards" :class="item.activeObject.id === VideoPhotoData.activeCard ? 'my-active-card' : ''" @@ -150,14 +137,26 @@ :outHeight="'162px'" :outWidth="VideoPhotoData.uploadDiaplay?searchImgCardWidth:cardWidth" :data="item" + :searchTime="searchTimeFormated" :showType="showType" @detailsClick="getDetails($event, index)" @addToBase="toAdd" ></Card> + <div class="foot"> + <el-pagination + :current-page="VideoPhotoData.page" + @current-change="changePages" + @size-change="sizeChange" + :page-sizes="VideoPhotoData.pageSizeOption" + :page-size="VideoPhotoData.size" + layout="total, sizes, prev, pager, next, jumper" + :total="VideoPhotoData.total" + ></el-pagination> + </div> </div> </div> </div> - <div class="foot"> + <!-- <div class="foot"> <el-pagination :current-page="VideoPhotoData.page" @current-change="changePages" @@ -167,10 +166,10 @@ layout="total, sizes, prev, pager, next, jumper" :total="VideoPhotoData.total" ></el-pagination> - </div> + </div>--> </div> </div> - <!-- <hsc-window-style-metal class="windown-model"> + <hsc-window-style-metal class="windown-model"> <hsc-window v-for="(item, index) in CardList.addBaseList" :closeButton="true" @@ -231,8 +230,7 @@ </div> </div> </hsc-window> - </hsc-window-style-metal> --> - + </hsc-window-style-metal> </div> </template> @@ -246,7 +244,7 @@ Card, UploadImg }, - data() { + data () { return { cardWidth: "", center: "", @@ -269,15 +267,19 @@ }; }, - - created() { + computed: { + searchTimeFormated(){ + return this.format(this.searchTime) + } + }, + created () { this.TreeDataPool.readonly = true; this.TreeDataPool.gbReadonly = true; this.TreeDataPool.multiple = true; this.TreeDataPool.clean(); this.TreeDataPool.fetchTreeData(); }, - mounted() { + mounted () { this.$nextTick(() => { let scrollContain = this.$refs.scrollContain this.VideoPhotoData.scrollContainDom = scrollContain @@ -296,30 +298,34 @@ // this.VideoTaskData.tasks[this.VideoTaskData.activeIndex].taskId // ]; // } - - this.searchTime = this.getDateInit(); - this.VideoPhotoData.searchTime = this.getDateInit(); + let start = this.getUrlKey("start") + let end = this.getUrlKey("end") + if (start&&end) { + this.searchTime = [start,end] + this.VideoPhotoData.searchTime = [start,end] + }else{ + this.searchTime = this.getDateInit(); + this.VideoPhotoData.searchTime = this.getDateInit(); + } // 鏆傛椂鍏抽棴璺宠浆 20200730 // if (this.$route.query.showType === "findByPic") { - if (0) { + if (this.getUrlKey("showType")) { this.VideoPhotoData.uploadDiaplay = true; - console.log("鍒璺宠繃鏉ョ殑浠ュ浘鎼滃浘"); - this.VideoPhotoData.picUrl = this.$route.query.picSmUrl; - this.VideoPhotoData.uploadImg = this.$route.query.picSmUrl; + // console.log("鍒璺宠繃鏉ョ殑浠ュ浘鎼滃浘"); + this.VideoPhotoData.picUrl = this.getUrlKey("picSmUrl"); + this.VideoPhotoData.uploadImg = this.getUrlKey("picSmUrl"); this.VideoPhotoData.uploadType = true - this.VideoPhotoData.compTargetId = this.$route.query.targetId - this.VideoPhotoData.compTargetType = this.$route.query.compType + this.VideoPhotoData.compTargetId = this.getUrlKey("targetId") + this.VideoPhotoData.compTargetType = this.getUrlKey("compType") this.VideoPhotoData.size = 30 this.VideoPhotoData.compareTabs = ["esData"]; this.VideoPhotoData.findPerson2(); // 鏌ユ壘姝や汉 - // this.$nextTick(() => { - // this.$refs.uploadImg.rightSectionDisplay = true; - // }); } else { this.searchTime = this.getDateInit(); this.VideoPhotoData.searchTime = this.getDateInit(); // this.VideoPhotoData.querySearchList(); + console.log('mounted 鏌ヨes') this.setLoadSearch(this.VideoPhotoData.querySearchList()); } @@ -333,7 +339,7 @@ }); }); }, - destroyed() { + destroyed () { window.removeEventListener("resize", this.getHeight); this.CardList.details = []; // this.TreeDataPool.treeActiveName = "camera"; @@ -348,12 +354,20 @@ this.VideoPhotoData.selectWhites = []; }, watch: { - "TreeDataPool.showTreeBox"(value) { + 'TreeDataPool.treeActiveName' (n, o) { + if (n && n == 'camera') { + console.log('mounted 鏌ヨes') + this.VideoPhotoData.treeNodes = []; + this.setLoadSearch(this.VideoPhotoData.querySearchList()); + } + }, + "TreeDataPool.showTreeBox" (value) { this.getHeight(); if (this.VideoPhotoData.realSmallPath.length > 0) { this.VideoPhotoData.findPersonByPage(); } else { // this.VideoPhotoData.querySearchList(); + console.log('showTreeBox 鏌ヨes') this.setLoadSearch(this.VideoPhotoData.querySearchList()); } }, @@ -371,22 +385,25 @@ if (this.VideoPhotoData.uploadType) { this.VideoPhotoData.findPersonByPage() } else { - // this.VideoPhotoData.querySearchList(); + + console.log('TreeDataPool.selectedNodes 鏌ヨes') this.setLoadSearch(this.VideoPhotoData.querySearchList()); + } } }, deep: true //娣卞害鐩戝惉 }, "DataStackPool.selectedDir": { - handler(nodes, oldNodes) { - if (nodes !== oldNodes) { + handler (nodes, oldNodes) { + if (nodes !== oldNodes && nodes.id != "") { // this.VideoPhotoData.treeNodes = nodes.map(i=>{return i.id}); this.VideoPhotoData.treeNodes = [nodes.id]; if (this.VideoPhotoData.uploadType) { this.VideoPhotoData.findPersonByPage() } else { // this.VideoPhotoData.querySearchList(); + console.log('DataStackPool.selectedDir 鏌ヨes') this.setLoadSearch(this.VideoPhotoData.querySearchList()); } } @@ -412,6 +429,7 @@ console.log("椤甸潰妯″紡锛�", value) if (value) { this.typeDisable = true; + this.disabled = true; } else { this.typeDisable = false; this.VideoPhotoData.querySearchList(); @@ -422,18 +440,6 @@ }, "VideoPhotoData.selectWhites": function (value) { this.blackAngWhite() - }, - tagValues: function (newValue, oldValue) { - if (newValue.length > 0) { - this.showType = "compare"; - } else { - this.showType = "search"; - } - if (newValue.length !== oldValue.length) { - console.log("tagValue涓殑鍒锋柊鏂规硶"); - // this.VideoPhotoData.querySearchList(); - this.setLoadSearch(this.VideoPhotoData.querySearchList()); - } }, "VideoPhotoData.uploadDiaplay": function (value) { this.getHeight(); @@ -458,24 +464,50 @@ } }, methods: { - resizeWidth(w) { + isShowUpload () { + console.log('isShowUpload', this.VideoPhotoData.uploadDiaplay) + this.getHeight(); + console.log("upload鐨勫�兼槸锛�", this.VideoPhotoData.uploadDiaplay) + if (this.VideoPhotoData.uploadDiaplay) { + if (!this.VideoPhotoData.uploadType) { + console.log("uploadDisplay涓殑鍒锋柊"); + let scrollContain = this.$refs.scrollContain + this.VideoPhotoData.scrollContainDom = scrollContain + this.VideoPhotoData.showType = "search"; + // this.VideoPhotoData.querySearchList(); + //this.setLoadSearch(this.VideoPhotoData.querySearchList()); + this.isDisabled = false; + } else { + //this.VideoPhotoData.scrollContainDom = ''; + this.VideoPhotoData.showType = "findByPic"; + } + } else { + this.VideoPhotoData.uploadType = false; + this.VideoPhotoData.showType = "search"; + } + }, + resizeWidth (w) { this.defaultWidth = w; }, - resizeHeight(h) { + resizeHeight (h) { this.defaultHeight = h; }, - getHeight() { + getHeight () { let w = this.$refs.mid.offsetWidth; let integer = parseInt(w / 330); let integerSearchImg = parseInt((w - 300) / 325); - this.handleSizeChange(integer, integerSearchImg); + + // 鍙栨秷size淇敼 + // console.log(integer, integerSearchImg) + // this.handleSizeChange(integer, integerSearchImg); + this.cardWidth = `calc(${100 / integer}% - 20px)`; this.searchImgCardWidth = `calc(${100 / integerSearchImg}% - 20px)`; }, - uploadChange() { + uploadChange () { this.VideoPhotoData.uploadDiaplay = false; }, - blackAngWhite() { + blackAngWhite () { if (this.VideoPhotoData.selectBlacks.length > 0) { for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) { //this.VideoPhotoData.whiteList[i].disabled = true @@ -501,7 +533,7 @@ } } }, - saveAddBase(item, index) { + saveAddBase (item, index) { if (this.VideoPhotoData.selectBlacks.length === 0 && this.VideoPhotoData.selectWhites.length === 0) { this.$notify({ title: "娉ㄦ剰", @@ -531,8 +563,7 @@ this.VideoPhotoData.selectWhites = [] }) }, - getDetails(ev, index) { - debugger + getDetails (ev, index) { //let obj = this.CardList.datalist[index]; this.CardList.datalist = this.VideoPhotoData.cards; let obj = this.CardList.datalist[index]; @@ -542,17 +573,17 @@ // this.CardList.details.push(obj); this.VideoPhotoData.activeCard = obj.activeObject.id; }, - toAdd(item) { + toAdd (item) { this.CardList.addBaseList.push(item) }, - handleClose(done) { + handleClose (done) { this.$confirm('纭鍏抽棴锛�') .then(_ => { done(); }) .catch(_ => { }); }, - showUpload() { + showUpload () { this.VideoPhotoData.uploadDiaplay = !this.VideoPhotoData.uploadDiaplay; //鍒濆鍖栨暟鎹� this.VideoPhotoData.clearStatus(); @@ -562,7 +593,7 @@ // } //this.VideoPhotoData.uploadImg = require("C:/Users/mdesign/Desktop/cvasdv.jpg"); }, - getDateInit() { + getDateInit () { // 瑕佹眰 榛樿涓�涓湀 const end = new Date(); const start = new Date(); @@ -578,13 +609,13 @@ this.$moment(end).format("YYYY-MM-DD HH:mm:ss") ]; }, - format(array) { + format (array) { return [ this.$moment(array[0]).format("YYYY-MM-DD HH:mm:ss"), this.$moment(array[1]).format("YYYY-MM-DD HH:mm:ss") ]; }, - searchingBtn() { + searchingBtn () { // let obj = document.getElementById('searchMid'); // console.log(obj,'target',document) // let load = this.$loading({ @@ -612,6 +643,7 @@ this.VideoPhotoData.uploadDiaplay = false; //this.VideoPhotoData.page = this.currentPage; // this.VideoPhotoData.querySearchList(); + console.log('鎼滅储鎸夐挳瑙﹀彂 鏌ヨes') this.setLoadSearch(this.VideoPhotoData.querySearchList()); } else { console.log("浠ュ浘鎼滃浘"); @@ -620,7 +652,7 @@ this.setLoadSearch(this.VideoPhotoData.findPersonByPage()); } }, - stringToNum() { + stringToNum () { var arr = []; this.alarmValues.forEach(element => { if (element == "-1") { @@ -645,7 +677,7 @@ // console.log("杈撳嚭鐨勬暟缁勶細", arr); return arr; }, - changePages(page) { + changePages (page) { this.VideoPhotoData.page = page; if (!this.VideoPhotoData.uploadType) { console.log("鍒嗛〉鏀瑰彉锛�") @@ -657,10 +689,10 @@ this.setLoadSearch(this.VideoPhotoData.findPersonByPage()); } }, - closeWindow(index) { + closeWindow (index) { this.CardList.addBaseList.splice(index, 1); }, - handleSizeChange(integer, integerSearchImg) { + handleSizeChange (integer, integerSearchImg) { if (this.VideoPhotoData.uploadDiaplay) { this.VideoPhotoData.size = integerSearchImg * 10; //this.VideoPhotoData.findPersonByPage(); @@ -669,7 +701,7 @@ //this.VideoPhotoData.querySearchList(); } }, - sizeChange(size) { + sizeChange (size) { if (this.VideoPhotoData.uploadType) { this.VideoPhotoData.size = size; this.VideoPhotoData.findPersonByPage(); @@ -680,7 +712,7 @@ this.setLoadSearch(this.VideoPhotoData.querySearchList()); } }, - clearSearch() { + clearSearch () { this.tagValues = [] this.taskValues = [] this.alarmValues = [] @@ -698,20 +730,35 @@ this.setLoadSearch(this.VideoPhotoData.findPersonByPage()); } }, - disabled(data) { + disabled (data) { this.isDisabled = data; }, - getCenter() { + getCenter () { this.center = { x: document.documentElement.clientWidth / 2 - 250, y: document.documentElement.clientHeight / 2 - 200 }; }, - setLoadSearch(fn) { + setLoadSearch (fn) { this.AuthData.setLoading("searchMid", this); fn.then(_ => { this.AuthData.closeLoad(); }) + }, + getUrlKey (name) { + return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null + }, + tagChange (obj) { + console.log(obj) + if (obj.length > 0) { + this.showType = "compare"; + } else { + this.showType = "search"; + } + + this.VideoPhotoData.queryTabs = obj; + + this.setLoadSearch(this.VideoPhotoData.querySearchList()); } } }; @@ -729,10 +776,10 @@ height: 100%; padding: 0px 20px; box-sizing: border-box; - + //涓存椂 - .el-carousel__item.is-active{ - z-index: 0!important; + .el-carousel__item.is-active { + z-index: 0 !important; } //涓存椂 @@ -746,7 +793,7 @@ color: rgba(0, 0, 0, 0.78) !important; } .searching-right-content { - height: calc(100% - 135px); + height: calc(100% - 80px); width: 100%; box-sizing: border-box; .top { @@ -783,9 +830,9 @@ } } .mid { - width: 100%; - height: 100%; - padding: 10px; + //width: 100%; + //height: 100%; + padding: 5px; overflow: auto; position: relative; .my-card { @@ -798,8 +845,8 @@ overflow: hidden; width: 100%; height: 80px; - line-height: 80px; - padding-top: 24px; + //line-height: 80px; + padding-top: 20px; padding-right: 24px; box-sizing: border-box; text-align: right; @@ -819,9 +866,20 @@ white-space: nowrap; text-overflow: ellipsis; } +.titlebar { + height: 10px !important; + background: #fff !important; + .button { + position: absolute; + font-size: 25px !important; + right: 10px; + top: 10px; + z-index: 3; + } +} .addToBase { width: 98%; - height: 450px; + height: 430px; position: relative; .topLabel { margin-top: 20px; @@ -888,26 +946,31 @@ } </style> <style lang="scss" scoped> +.left-selection { + width: 300px; + height: 100%; + float: left; + margin-right: 15px; +} #searchMid { + height: 100%; + box-sizing: border-box; .el-loading-mask { .el-loading-spinner { width: 100%; height: 100%; .el-loading-spinner-search { - background: url("../../../assets/gif/searchLoading.gif") no-repeat; + background: url('/images/search/searchLoading.gif') no-repeat; } } } - .left-selection { - width: 300px; - height: 100%; - float: left; - margin-right: 15px; - } + .right-section { //width: calc(100% - 315px); height: 100%; - float: left; + padding-bottom: 20px; + box-sizing: border-box; + //float: left; overflow: auto; position: relative; } -- Gitblit v1.8.0