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