From c0c79d9b58705a3c8c13ea9f23b1dd0f724a04af Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期一, 19 十月 2020 19:14:52 +0800
Subject: [PATCH] 搜索集群节点样式更新
---
src/pages/search/index/Searching.vue | 225 ++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 168 insertions(+), 57 deletions(-)
diff --git a/src/pages/search/index/Searching.vue b/src/pages/search/index/Searching.vue
index 62a02b7..7cd82d6 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,17 +120,16 @@
<b class="clear-searching" @click="clearSearch">閲嶇疆</b>
</p>
</div>
- <div ref="mid" style="height:100%;overflow-y:auto;">
-
- <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' : ''"
@@ -142,20 +141,19 @@
@detailsClick="getDetails($event, index)"
@addToBase="toAdd"
></Card>
- </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 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">
<el-pagination
@@ -167,10 +165,71 @@
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
+ 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>
@@ -240,10 +299,17 @@
// 鏆傛椂鍏抽棴璺宠浆 20200730
// if (this.$route.query.showType === "findByPic") {
- if (this.VideoPhotoData.uploadDiaplay) {
- // this.$nextTick(() => {
- // this.$refs.uploadImg.rightSectionDisplay = true;
- // });
+ if (this.getUrlKey("showType")) {
+ this.VideoPhotoData.uploadDiaplay = true;
+ // console.log("鍒璺宠繃鏉ョ殑浠ュ浘鎼滃浘");
+ this.VideoPhotoData.picUrl = this.getUrlKey("picSmUrl");
+ this.VideoPhotoData.uploadImg = this.getUrlKey("picSmUrl");
+ this.VideoPhotoData.uploadType = true
+ this.VideoPhotoData.compTargetId = this.getUrlKey("targetId")
+ this.VideoPhotoData.compTargetType = this.getUrlKey("compType")
+ this.VideoPhotoData.size = 30
+ this.VideoPhotoData.compareTabs = ["esData"];
+ this.VideoPhotoData.findPerson2(); // 鏌ユ壘姝や汉
} else {
this.searchTime = this.getDateInit();
this.VideoPhotoData.searchTime = this.getDateInit();
@@ -340,6 +406,7 @@
console.log("椤甸潰妯″紡锛�", value)
if (value) {
this.typeDisable = true;
+ this.disabled = true;
} else {
this.typeDisable = false;
this.VideoPhotoData.querySearchList();
@@ -350,18 +417,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();
@@ -386,6 +441,28 @@
}
},
methods: {
+ 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;
},
@@ -396,7 +473,11 @@
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)`;
},
@@ -460,7 +541,6 @@
})
},
getDetails(ev, index) {
- debugger
//let obj = this.CardList.datalist[index];
this.CardList.datalist = this.VideoPhotoData.cards;
let obj = this.CardList.datalist[index];
@@ -640,6 +720,21 @@
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());
}
}
};
@@ -674,7 +769,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 {
@@ -713,7 +808,7 @@
.mid {
//width: 100%;
//height: 100%;
- padding: 10px;
+ padding: 5px;
overflow: auto;
position: relative;
.my-card {
@@ -726,8 +821,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;
@@ -747,9 +842,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;
@@ -816,7 +922,15 @@
}
</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%;
@@ -826,16 +940,13 @@
}
}
}
- .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