<template>
|
<div>
|
<div>
|
<span class="fb f16">已选:</span>
|
<el-row :gutter="20" class="mt10">
|
<el-col :md="6" v-for="(item,index) in alreadyCheckList" :key="index">
|
<div class="out-person">
|
<div class="icon-p" @click="delOne(item,'alreadyCheckList')">
|
<i class="ion d-block ion-md-close"></i>
|
</div>
|
<div class="flex-center">
|
<div>
|
<httpImg
|
:src="item.imgUrl?item.imgUrl:item.detail.imgUrl"
|
width="50px"
|
height="50px"
|
alt
|
/>
|
</div>
|
<div class="m5 person-info" :title="item.taskName">
|
<span class="fc">{{item.taskName}}</span>
|
<div class="person-info" :title="item.userInfo">
|
<span>{{item.userInfo}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div v-if="false">
|
<hr class="mt20">
|
<div class="flex-row-between">
|
<div class="flex-row-left">
|
<h5 class="mb-0 fb sim-height">相似:</h5>
|
</div>
|
<div class="flex-row-right">
|
<div class="">
|
<span class="fb f16">相似度：</span>
|
<el-input-number
|
v-model="thresholdNum"
|
controls-position="right"
|
@change="handleChange"
|
:min="1" :max="100">
|
</el-input-number>
|
</div>
|
</div>
|
</div>
|
<el-row :gutter="20" class="mt10">
|
<el-col :md="6" v-for="(item,index) in personList" :key="index">
|
<div class="up-person">
|
<div class="icon-p" @click="delOne(item,'similarList')">
|
<i class="ion d-block ion-md-close"></i>
|
</div>
|
<div class="flex-center">
|
<div>
|
<httpImg
|
src="item.photos"
|
width="50px"
|
height="50px"
|
alt
|
/>
|
</div>
|
<div class="m5 person-info">
|
<span class="fc">{{'吸毒人员库'}}</span>
|
<div class="person-info">
|
<span>{{item.name}}/{{item.sex}}</span>
|
</div>
|
</div>
|
</div>
|
<div class="up-icon" @click="uploadPer(data,'similarList')">
|
<i class="d-block fas fa-arrow-circle-up"></i>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="mt20" v-if="false">
|
<swiper ref="swiper" slideWidth="25%" :data="personList">
|
<template slot-scope="{data}">
|
<div class="up-swiper-person">
|
<div class="icon-p" @click="delOne(data,'siwperList')">
|
<i class="ion d-block ion-md-close"></i>
|
</div>
|
<div class="flex-center">
|
<div>
|
<httpImg
|
src="item.photos"
|
width="50px"
|
height="50px"
|
alt
|
/>
|
</div>
|
<div class="m5 person-info">
|
<span class="fc">{{'吸毒人员库'}}</span>
|
<div class="person-info">
|
<span>{{data.name}}/{{data.sex}}</span>
|
</div>
|
</div>
|
</div>
|
<div class="up-icon" @click="uploadPer(data,'siwperList')">
|
<i class="d-block fas fa-arrow-circle-up"></i>
|
</div>
|
</div>
|
</template>
|
</swiper>
|
</div>
|
|
</div>
|
</template>
|
<script>
|
import { Row, Col, InputNumber } from 'element-ui'
|
import httpImg from '@/components/common/httpImg'
|
import swiper from './swiper'
|
export default {
|
props: {
|
/** 已选的人员列表 */
|
alreadyCheckList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
/** 相似的人员列表 */
|
similarList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
/** 滑动中的列表 */
|
siwperList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
}
|
},
|
components: {
|
elRow: Row,
|
elCol: Col,
|
elInputNumber: InputNumber,
|
httpImg,
|
swiper
|
},
|
data() {
|
return {
|
personList: [
|
{
|
id: '1231',
|
name: '陈明1',
|
sex: '男'
|
},
|
{
|
id: '1232',
|
name: '陈明2',
|
sex: '男'
|
},
|
{
|
id: '1233',
|
name: '陈明3',
|
sex: '男'
|
},
|
{
|
id: '1234',
|
name: '陈明4',
|
sex: '男'
|
},
|
{
|
id: '1235',
|
name: '陈明5',
|
sex: '男'
|
}
|
],
|
/** 阈值 */
|
thresholdNum: 90
|
}
|
},
|
methods: {
|
/** 删除某个已选的人员 */
|
delOne(data, type) {
|
// console.log(data, 'delOne data', type)
|
this.$emit('delOne', {delData: data, type: type})
|
},
|
/** 上传某人 */
|
uploadPer(data, type) {
|
console.log(data, '上传', type)
|
this.$emit('uploadPer', {upOne: data, type: type})
|
},
|
/** 根据阈值过滤相似和轮播中的人员 */
|
handleChange() {
|
|
}
|
},
|
mounted() {
|
|
},
|
watch: {
|
thresholdNum: function(newVal, oldVal) {
|
if (newVal !== oldVal) {
|
this.handleChange()
|
}
|
}
|
}
|
|
}
|
</script>
|
<style lang="scss" scoped>
|
.out-person{
|
border: 1px solid #ebeef5;
|
padding: 5px;
|
.fc{
|
color:red;
|
}
|
.icon-p{
|
float: right;
|
}
|
.m5{
|
margin-left: 5px;
|
}
|
.up-icon{
|
color: #35bde7;
|
float: right;
|
}
|
}
|
.up-person{
|
border: 1px solid #ebeef5;
|
padding: 5px;
|
.fc{
|
color:red;
|
}
|
.icon-p{
|
float: right;
|
}
|
.m5{
|
margin-left: 5px;
|
}
|
.up-icon{
|
color: #35bde7;
|
float: right;
|
margin-top: -15px;
|
}
|
}
|
.up-swiper-person{
|
border: 1px solid #ebeef5;
|
padding: 5px;
|
.fc{
|
color:red;
|
}
|
.icon-p{
|
float: right;
|
}
|
.m5{
|
margin-left: 5px;
|
}
|
.up-icon{
|
color: #35bde7;
|
float: right;
|
margin-top: -15px;
|
}
|
}
|
.sim-height{
|
height: 40px;
|
line-height: 40px;
|
}
|
.person-info{
|
max-width: 100px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
margin: 0 auto;
|
}
|
</style>
|
