From 5fb65ada8ccc28eabf823b284de70fbd3ca1f41e Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 28 九月 2021 18:29:36 +0800
Subject: [PATCH] 抓拍大图层级修复v1
---
src/pages/search/index/Searching.vue | 311 +++++++++++++++++++++++++++++++++------------------
1 files changed, 201 insertions(+), 110 deletions(-)
diff --git a/src/pages/search/index/Searching.vue b/src/pages/search/index/Searching.vue
index 7ecb916..7116695 100644
--- a/src/pages/search/index/Searching.vue
+++ b/src/pages/search/index/Searching.vue
@@ -4,7 +4,7 @@
<div class="searching-right-nav">
<el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block;">
<el-breadcrumb-item>
- <span @click="uploadChange()">妫�绱�</span>
+ <span @click="uploadChange">妫�绱�</span>
</el-breadcrumb-item>
<el-breadcrumb-item v-if="!VideoPhotoData.uploadType">鍏ㄩ儴</el-breadcrumb-item>
<el-breadcrumb-item v-if="VideoPhotoData.uploadType">浠ュ浘鎼滃浘</el-breadcrumb-item>
@@ -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"
@@ -120,18 +120,16 @@
<b class="clear-searching" @click="clearSearch">閲嶇疆</b>
</p>
</div>
- <div ref="mid" style="height: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"
-
- >
+ <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' : ''"
@@ -139,54 +137,103 @@
: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>
+ <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>
- <!-- <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>
-
+ <hsc-window-style-metal class="windown-model">
+ <hsc-window
+ v-for="(item, index) in CardList.addBaseList"
+ :closeButton="true"
+ @closebuttonclick="closeWindow(index)"
+ :key="index"
+ @update:height="resizeHeight"
+ @update:width="resizeWidth"
+ style="background:white; height:475px"
+ :left="center.x + index * 10"
+ :top="center.y + index * 10"
+ :resizable="true"
+ positionHint="center"
+ :isScrollable="true"
+ :minWidth="662"
+ :minHeight="479"
+ :maxWidth="10000"
+ :maxHeight="7000"
+ :height="defaultHeight"
+ :width="defaultWidth"
+ >
+ <div class="addToBase">
+ <div class="topLabel">鍔犲叆搴曞簱</div>
+ <div class="items">
+ <div class="lable">
+ <p>榛戝悕鍗� ></p>
+ </div>
+ <div class="baseList">
+ <el-checkbox-group v-model="VideoPhotoData.selectBlacks" @change="blackAngWhite">
+ <div class="base" v-for="(item, index) in VideoPhotoData.blackList" :key="index">
+ <el-checkbox
+ :label="item.value"
+ :title="item.title"
+ :disabled="item.disabled"
+ >{{item.title}}</el-checkbox>
+ </div>
+ </el-checkbox-group>
+ </div>
+ </div>
+ <div class="items">
+ <div class="lable">
+ <p>鐧藉悕鍗� ></p>
+ </div>
+ <div class="baseList">
+ <el-checkbox-group v-model="VideoPhotoData.selectWhites" @change="blackAngWhite">
+ <div class="base" v-for="(item, index) in VideoPhotoData.whiteList" :key="index">
+ <el-checkbox
+ :label="item.value"
+ :title="item.title"
+ :disabled="item.disabled"
+ >{{item.title}}</el-checkbox>
+ </div>
+ </el-checkbox-group>
+ </div>
+ </div>
+ <div class="buttons">
+ <el-button type="primary" @click="saveAddBase(item, index)">淇濆瓨</el-button>
+ <el-button type="default" @click="closeWindow(index)">鍙栨秷</el-button>
+ </div>
+ </div>
+ </hsc-window>
+ </hsc-window-style-metal>
</div>
</template>
<script>
import Card from "@/components/subComponents/Card";
import UploadImg from "@/components/searching/UploadImg";
-//import CardWindow from "../components/cardWindow";
import bus from "./main";
+import { getUrlKey } from "@/api/utils";
export default {
components: {
Card,
UploadImg
},
- data() {
+ data () {
return {
cardWidth: "",
center: "",
@@ -198,7 +245,6 @@
searchImgCardWidth: "",
tagValues: [],
alarmValues: [],
- dialogVisible: false,
taskValues: [],
searchTime: [
this.$moment().format("YYYY-MM-DD 00:00:00"),
@@ -206,18 +252,21 @@
],
searchText: "",
currentPage: 1,
-
};
},
-
- 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
@@ -236,16 +285,28 @@
// this.VideoTaskData.tasks[this.VideoTaskData.activeIndex].taskId
// ];
// }
-
- this.searchTime = this.getDateInit();
- this.VideoPhotoData.searchTime = this.getDateInit();
+ let start = getUrlKey("start")
+ let end = 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 (this.VideoPhotoData.uploadDiaplay) {
- // this.$nextTick(() => {
- // this.$refs.uploadImg.rightSectionDisplay = true;
- // });
+ if (getUrlKey("showType")) {
+ this.VideoPhotoData.uploadDiaplay = true;
+ this.VideoPhotoData.picUrl = getUrlKey("picSmUrl");
+ this.VideoPhotoData.uploadImg = getUrlKey("picSmUrl");
+ this.VideoPhotoData.uploadType = true
+ this.VideoPhotoData.compTargetId = getUrlKey("targetId")
+ this.VideoPhotoData.compTargetType = getUrlKey("compType")
+ this.VideoPhotoData.size = 30
+ this.VideoPhotoData.compareTabs = ["esData"];
+ this.VideoPhotoData.findPerson2(); // 鏌ユ壘姝や汉
} else {
this.searchTime = this.getDateInit();
this.VideoPhotoData.searchTime = this.getDateInit();
@@ -263,7 +324,7 @@
});
});
},
- destroyed() {
+ destroyed () {
window.removeEventListener("resize", this.getHeight);
this.CardList.details = [];
// this.TreeDataPool.treeActiveName = "camera";
@@ -278,7 +339,13 @@
this.VideoPhotoData.selectWhites = [];
},
watch: {
- "TreeDataPool.showTreeBox"(value) {
+ 'TreeDataPool.treeActiveName' (n, o) {
+ if (n && n == 'camera') {
+ this.VideoPhotoData.treeNodes = [];
+ this.setLoadSearch(this.VideoPhotoData.querySearchList());
+ }
+ },
+ "TreeDataPool.showTreeBox" (value) {
this.getHeight();
if (this.VideoPhotoData.realSmallPath.length > 0) {
this.VideoPhotoData.findPersonByPage();
@@ -290,7 +357,6 @@
// "TreeDataPool.selectedNodes": function(newValue,oldValue) {
// if (newValue !== oldValue) {
// this.VideoPhotoData.treeNodes = newValue;
- // console.log("鐩戝惉鏍戣妭鐐逛腑鐨勫埛鏂版柟娉�", newValue,oldValue);
// this.VideoPhotoData.querySearchList();
// }
// },
@@ -301,16 +367,16 @@
if (this.VideoPhotoData.uploadType) {
this.VideoPhotoData.findPersonByPage()
} else {
- // this.VideoPhotoData.querySearchList();
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) {
@@ -339,9 +405,9 @@
}
},
"VideoPhotoData.uploadType": function (value) {
- console.log("椤甸潰妯″紡锛�", value)
if (value) {
this.typeDisable = true;
+ this.disabled = true;
} else {
this.typeDisable = false;
this.VideoPhotoData.querySearchList();
@@ -353,24 +419,10 @@
"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();
- console.log("upload鐨勫�兼槸锛�", value)
if (value) {
if (!this.VideoPhotoData.uploadType) {
- console.log("uploadDisplay涓殑鍒锋柊");
let scrollContain = this.$refs.scrollContain
this.VideoPhotoData.scrollContainDom = scrollContain
this.VideoPhotoData.showType = "search";
@@ -388,24 +440,47 @@
}
},
methods: {
- resizeWidth(w) {
+ isShowUpload () {
+ this.getHeight();
+ if (this.VideoPhotoData.uploadDiaplay) {
+ if (!this.VideoPhotoData.uploadType) {
+ 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淇敼
+ // this.handleSizeChange(integer, integerSearchImg);
+
this.cardWidth = `calc(${100 / integer}% - 20px)`;
this.searchImgCardWidth = `calc(${100 / integerSearchImg}% - 20px)`;
},
- uploadChange() {
+ uploadChange () {
this.VideoPhotoData.uploadDiaplay = false;
+ this.VideoPhotoData.clearStatus()
},
- blackAngWhite() {
+ blackAngWhite () {
if (this.VideoPhotoData.selectBlacks.length > 0) {
for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
//this.VideoPhotoData.whiteList[i].disabled = true
@@ -431,7 +506,7 @@
}
}
},
- saveAddBase(item, index) {
+ saveAddBase (item, index) {
if (this.VideoPhotoData.selectBlacks.length === 0 && this.VideoPhotoData.selectWhites.length === 0) {
this.$notify({
title: "娉ㄦ剰",
@@ -442,7 +517,6 @@
}
let res = this.VideoPhotoData.addBase(item)
res.then(data => {
- console.log("then", data)
if (data.success) {
this.$notify({
title: "鎴愬姛",
@@ -461,8 +535,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];
@@ -472,17 +545,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();
@@ -492,7 +565,7 @@
// }
//this.VideoPhotoData.uploadImg = require("C:/Users/mdesign/Desktop/cvasdv.jpg");
},
- getDateInit() {
+ getDateInit () {
// 瑕佹眰 榛樿涓�涓湀
const end = new Date();
const start = new Date();
@@ -508,20 +581,18 @@
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({
// target:obj,
// })
// load.close();
- // console.log(load,'loading')
// this.AuthData.loading = true
this.VideoPhotoData.page = 1;
this.VideoPhotoData.queryTabs = this.tagValues;
@@ -538,19 +609,17 @@
//this.VideoPhotoData.inputValue = this.searchText;
this.VideoPhotoData.showType = this.showType;
if (!this.VideoPhotoData.uploadType) {
- console.log("鏌ヨ鏂规硶");
this.VideoPhotoData.uploadDiaplay = false;
//this.VideoPhotoData.page = this.currentPage;
// this.VideoPhotoData.querySearchList();
this.setLoadSearch(this.VideoPhotoData.querySearchList());
} else {
- console.log("浠ュ浘鎼滃浘");
//this.VideoPhotoData.page = this.currentPage;
// this.VideoPhotoData.findPersonByPage();
this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
}
},
- stringToNum() {
+ stringToNum () {
var arr = [];
this.alarmValues.forEach(element => {
if (element == "-1") {
@@ -572,13 +641,11 @@
arr.push(5);
}
});
- // console.log("杈撳嚭鐨勬暟缁勶細", arr);
return arr;
},
- changePages(page) {
+ changePages (page) {
this.VideoPhotoData.page = page;
if (!this.VideoPhotoData.uploadType) {
- console.log("鍒嗛〉鏀瑰彉锛�")
this.VideoPhotoData.uploadDiaplay = false;
// this.VideoPhotoData.querySearchList();
this.setLoadSearch(this.VideoPhotoData.querySearchList());
@@ -587,10 +654,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();
@@ -599,7 +666,7 @@
//this.VideoPhotoData.querySearchList();
}
},
- sizeChange(size) {
+ sizeChange (size) {
if (this.VideoPhotoData.uploadType) {
this.VideoPhotoData.size = size;
this.VideoPhotoData.findPersonByPage();
@@ -610,7 +677,7 @@
this.setLoadSearch(this.VideoPhotoData.querySearchList());
}
},
- clearSearch() {
+ clearSearch () {
this.tagValues = []
this.taskValues = []
this.alarmValues = []
@@ -628,20 +695,31 @@
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();
})
+ },
+ tagChange (obj) {
+ if (obj.length > 0) {
+ this.showType = "compare";
+ } else {
+ this.showType = "search";
+ }
+
+ this.VideoPhotoData.queryTabs = obj;
+
+ this.setLoadSearch(this.VideoPhotoData.querySearchList());
}
}
};
@@ -676,7 +754,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 {
@@ -728,8 +806,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;
@@ -749,9 +827,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;
@@ -832,15 +921,17 @@
width: 100%;
height: 100%;
.el-loading-spinner-search {
- background: url("/images/search/searchLoading.gif") no-repeat;
+ background: url('/images/search/searchLoading.gif') no-repeat;
}
}
}
-
+
.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