<template>
|
<div class="searching-box">
|
<div class="searching-right">
|
<div class="searching-right-content">
|
<div class="top">
|
<p class="p-label" style="width:16%">
|
<b>底库：</b>
|
<el-select
|
v-model="tagTable"
|
collapse-tags
|
size="mini"
|
style="width:calc(100% - 40px);min-width: 120px;"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in tables"
|
style="font-size:12px"
|
:key="item.id"
|
:label="item.tableName"
|
:value="item.id"
|
:title="item.tableName"
|
></el-option>
|
</el-select>
|
</p>
|
|
<p class="p-input" style="width:19%">
|
<el-button type="primary" size="mini" @click="searchingBtn">搜索</el-button>
|
</p>
|
</div>
|
|
<div ref="mid" style="height:calc(100% - 50px);">
|
<el-row v-for="(item, index) in cmpData" :key="index">
|
<el-col :span="3" v-for="target in item.targets" :key="target.personPicUrl">
|
<el-card :body-style="{padding: '5px'}">
|
<img
|
:src="'/httpImage/' + item.curPicUrl"
|
style="max-height:84px;width:84px;object-fit:contain;background:rgba(0,0,0,0.35);"
|
/>
|
<span> </span>
|
<img
|
:src="'/httpImage/' + target.personPicUrl"
|
style="max-height:84px;width:84px;object-fit:contain;background:rgba(0,0,0,0.35);"
|
/>
|
<div style="padding: 5px">
|
<span>比分: {{target.score}} %</span>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { testDBCompare } from "./api";
|
import { getSyncTables, getLocalTables } from "@/api/baseLibrary"
|
|
export default {
|
data() {
|
return {
|
tables: [],
|
tagTable: "",
|
cmpData: []
|
|
};
|
},
|
|
created() {
|
},
|
mounted() {
|
this.getDBTables()
|
},
|
destroyed() {
|
},
|
methods: {
|
getDBTables() {
|
getSyncTables().then(rsp => {
|
if (rsp && rsp.success) {
|
this.tables = this.tables.concat(rsp.data.datalist)
|
}
|
})
|
|
getLocalTables().then(rsp => {
|
if (rsp && rsp.success) {
|
this.tables = this.tables.concat(rsp.data.datalist)
|
}
|
})
|
},
|
|
searchingBtn() {
|
testDBCompare({ tableId: this.tagTable }).then(rsp => {
|
rsp.data.forEach(element => {
|
element.targets.sort(function (obj1, obj2) {
|
var val1 = obj1.score;
|
var val2 = obj2.score;
|
if (val1 > val2) {
|
return -1;
|
} else if (val1 < val2) {
|
return 1;
|
} else {
|
return 0;
|
}
|
});
|
});
|
this.cmpData = rsp.data
|
})
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.searching-box {
|
width: 100%;
|
height: 100% !important;
|
float: left;
|
//position: relative;
|
.searching-right {
|
width: 100%;
|
height: 100%;
|
padding: 0px 20px;
|
box-sizing: border-box;
|
|
//临时
|
.el-carousel__item.is-active {
|
z-index: 0 !important;
|
}
|
//临时
|
|
.searching-right-nav {
|
height: 50px;
|
width: 100%;
|
line-height: 58px;
|
text-align: left;
|
font-size: 14px !important;
|
box-sizing: border-box;
|
color: rgba(0, 0, 0, 0.78) !important;
|
}
|
.searching-right-content {
|
height: calc(100% - 80px);
|
width: 100%;
|
box-sizing: border-box;
|
.top {
|
background-image: linear-gradient(-180deg, #ffffff 13%, #e9ebf2 100%);
|
height: 76px;
|
width: 100%;
|
padding: 5px 22px;
|
box-sizing: border-box;
|
text-align: left;
|
// line-height: 55px;
|
white-space: nowrap;
|
overflow-x: auto;
|
overflow-y: hidden;
|
.p-label,
|
.p-task,
|
.p-level,
|
.p-date,
|
.p-input,
|
.p-clear {
|
display: inline-block;
|
padding-right: 10px;
|
box-sizing: border-box;
|
margin-top: 20px;
|
b:hover {
|
color: #2249b4;
|
}
|
}
|
.clear-searching {
|
cursor: pointer;
|
text-decoration: underline;
|
width: 40px;
|
font-size: 13px;
|
color: #3d68e1;
|
}
|
}
|
.mid {
|
//width: 100%;
|
//height: 100%;
|
padding: 5px;
|
overflow: auto;
|
position: relative;
|
.my-card {
|
float: left;
|
margin: 0px 14px 10px 0px;
|
cursor: pointer;
|
}
|
}
|
.foot {
|
overflow: hidden;
|
width: 100%;
|
height: 80px;
|
//line-height: 80px;
|
padding-top: 20px;
|
padding-right: 24px;
|
box-sizing: border-box;
|
text-align: right;
|
}
|
}
|
}
|
.el-select__tags {
|
max-width: 250px !important;
|
}
|
}
|
.el-select-dropdown {
|
width: 200px !important;
|
}
|
.el-tag {
|
max-width: 85% !important;
|
overflow: hidden;
|
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: 430px;
|
position: relative;
|
.topLabel {
|
margin-top: 20px;
|
height: 40px;
|
border-bottom: 1px solid #eee;
|
font-family: PingFangSC-Medium;
|
font-size: 20px;
|
font-weight: 600;
|
line-height: 1rem;
|
color: #222222;
|
text-align: left;
|
margin-left: 15px;
|
}
|
.items {
|
width: 100%;
|
height: auto;
|
max-height: 35%;
|
overflow-y: auto;
|
margin: 20px 0px;
|
.lable {
|
width: 15%;
|
margin-top: 10px;
|
float: left;
|
//font-family: PingFangSC-Medium;
|
font-size: 14px;
|
font-weight: 600;
|
}
|
.baseList {
|
width: 85%;
|
height: 100%;
|
float: left;
|
|
// display: flex;
|
// justify-content: flex-start;
|
.base {
|
//flex-wrap: wrap;
|
width: calc(33% - 10px);
|
padding: 0px 5px;
|
line-height: 30px;
|
float: left;
|
text-align: left;
|
font-size: 12px !important;
|
.el-checkbox {
|
width: 100%;
|
display: block;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
.el-checkbox__label {
|
display: inline !important;
|
}
|
}
|
}
|
}
|
}
|
.buttons {
|
position: absolute;
|
right: 0px;
|
bottom: 15px;
|
}
|
}
|
.search {
|
background-color: #eee;
|
}
|
</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("/images/search/searchLoading.gif") no-repeat;
|
}
|
}
|
}
|
|
.right-section {
|
//width: calc(100% - 315px);
|
height: 100%;
|
padding-bottom: 20px;
|
box-sizing: border-box;
|
//float: left;
|
overflow: auto;
|
position: relative;
|
}
|
}
|
</style>
|
