<template>
|
<div class="searching-box">
|
<div class="searching-right">
|
<div class="searching-right-nav">
|
<el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block;">
|
<el-breadcrumb-item>
|
<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>
|
</el-breadcrumb>
|
</div>
|
<div class="searching-right-content">
|
<div class="top">
|
<el-tooltip content="以图搜图" placement="bottom" popper-class="atooltip">
|
<el-button
|
@click="showUpload"
|
type="primary"
|
icon="el-icon-camera-solid"
|
size="mini"
|
circle
|
:style="VideoPhotoData.uploadDiaplay ? 'margin-right: 20px;' : 'margin-right: 20px;background-color:#cccccc;border-color:#cccccc'"
|
></el-button>
|
</el-tooltip>
|
<p class="p-label" style="width:16%">
|
<b>标签：</b>
|
<el-select
|
v-model="tagValues"
|
multiple
|
@change="searchingBtn"
|
:disabled="isDisabled"
|
collapse-tags
|
size="mini"
|
style="width:calc(100% - 40px);min-width: 120px;"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in VideoPhotoData.tabs"
|
style="font-size:12px"
|
:key="item.key"
|
:label="item.title"
|
:value="item.value"
|
:title="item.title"
|
></el-option>
|
</el-select>
|
</p>
|
<p class="p-task" style="width:16%">
|
<b>场景：</b>
|
<el-select
|
v-model="taskValues"
|
multiple
|
@change="searchingBtn"
|
:disabled="typeDisable"
|
collapse-tags
|
size="mini"
|
style="width:calc(100% - 40px);min-width: 120px;"
|
placeholder="请选择"
|
>
|
<!-- <el-option
|
v-for="item in VideoPhotoData.tasks"
|
style="font-size:12px"
|
:key="item.taskid+'x'"
|
:label="item.del_flag && item.taskname !=='人脸测温'? item.taskname+'（已删除）' : item.taskname"
|
:value="item.taskid"
|
:title="item.del_flag && item.taskname !=='人脸测温'? item.taskname+'（已删除）' : item.taskname"
|
></el-option>-->
|
<el-option
|
v-for="item in VideoPhotoData.tasks"
|
style="font-size:12px"
|
:key="item.id+'x'"
|
:value="item.id"
|
:label="item.isDelete ? item.name+'（已删除）' : item.name"
|
:title="item.isDelete ? item.name+'（已删除）' : item.name"
|
></el-option>
|
</el-select>
|
</p>
|
<p class="p-level" style="width:18%">
|
<b>事件等级：</b>
|
<el-select
|
v-model="alarmValues"
|
multiple
|
@change="searchingBtn"
|
:disabled="isDisabled"
|
collapse-tags
|
size="mini"
|
style="width:calc(100% - 64px);min-width: 120px;"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in VideoPhotoData.dictionary.ALARMLEVEL"
|
:key="item.id"
|
:label="item.name"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</p>
|
<p class="p-date" style="width:19%;vertical-align: top;">
|
<el-date-picker
|
size="mini"
|
v-model="searchTime"
|
@change="searchingBtn"
|
type="datetimerange"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:default-time="['00:00:00','23:59:59']"
|
style="width:99%;min-width:200px"
|
></el-date-picker>
|
</p>
|
<p class="p-input" style="width:19%">
|
<el-input
|
placeholder="请输入内容"
|
prefix-icon="el-icon-search"
|
style="width: calc(100% - 75px);min-width:100px;margin-left:10px;margin-right: 10px;"
|
v-model="VideoPhotoData.inputValue"
|
size="mini"
|
></el-input>
|
<el-button type="primary" size="mini" @click="searchingBtn">搜索</el-button>
|
</p>
|
<p class="p-clear">
|
<b class="clear-searching" @click="clearSearch">重置</b>
|
</p>
|
</div>
|
<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' : ''"
|
:key="index + 'u'"
|
:outHeight="'162px'"
|
:outWidth="VideoPhotoData.uploadDiaplay?searchImgCardWidth:cardWidth"
|
:data="item"
|
: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">
|
<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";
|
export default {
|
components: {
|
Card,
|
UploadImg
|
},
|
data() {
|
return {
|
cardWidth: "",
|
center: "",
|
defaultHeight: 432,
|
defaultWidth: 600,
|
isDisabled: false,
|
typeDisable: false,
|
showType: "search",
|
searchImgCardWidth: "",
|
tagValues: [],
|
alarmValues: [],
|
dialogVisible: false,
|
taskValues: [],
|
searchTime: [
|
this.$moment().format("YYYY-MM-DD 00:00:00"),
|
this.$moment().format("YYYY-MM-DD HH:mm:ss")
|
],
|
searchText: "",
|
currentPage: 1,
|
|
};
|
},
|
|
created() {
|
this.TreeDataPool.readonly = true;
|
this.TreeDataPool.gbReadonly = true;
|
this.TreeDataPool.multiple = true;
|
this.TreeDataPool.clean();
|
this.TreeDataPool.fetchTreeData();
|
},
|
mounted() {
|
debugger
|
//this.isShowUpload();
|
console.log('search mounted')
|
this.$nextTick(() => {
|
let scrollContain = this.$refs.scrollContain
|
this.VideoPhotoData.scrollContainDom = scrollContain
|
let list = this.TreeDataPool.localVedioList.filter(i => {
|
return i.progress == 100
|
})
|
this.TreeDataPool.localVedioList = list
|
})
|
window.addEventListener("resize", this.getHeight);
|
this.getCenter();
|
this.getHeight();
|
this.blackAngWhite();
|
// 视频监控任务跳转 屏蔽 20200730
|
// if (this.$route.query.from === "video") {
|
// this.VideoPhotoData.queryTasks = this.taskValues = [
|
// this.VideoTaskData.tasks[this.VideoTaskData.activeIndex].taskId
|
// ];
|
// }
|
|
this.searchTime = this.getDateInit();
|
this.VideoPhotoData.searchTime = this.getDateInit();
|
|
// 暂时关闭跳转 20200730
|
// if (this.$route.query.showType === "findByPic") {
|
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();
|
// this.VideoPhotoData.querySearchList();
|
this.setLoadSearch(this.VideoPhotoData.querySearchList());
|
}
|
|
this.VideoPhotoData.queryTagList();
|
this.VideoPhotoData.queryTaskList();
|
this.VideoPhotoData.queryDictionary();
|
this.$nextTick(() => {
|
bus.$on("changePage", page => {
|
this.currentPage = page;
|
this.VideoPhotoData.page = page;
|
});
|
});
|
},
|
destroyed() {
|
window.removeEventListener("resize", this.getHeight);
|
this.CardList.details = [];
|
// this.TreeDataPool.treeActiveName = "camera";
|
this.VideoPhotoData.queryAlarmlevel = [];
|
this.VideoPhotoData.inputValue = "";
|
this.VideoPhotoData.queryTabs = [];
|
this.VideoPhotoData.queryTasks = [];
|
this.VideoPhotoData.treeNodes = [];
|
|
this.CardList.addBaseList = [];
|
this.VideoPhotoData.selectBlacks = [];
|
this.VideoPhotoData.selectWhites = [];
|
},
|
watch: {
|
"TreeDataPool.showTreeBox"(value) {
|
this.getHeight();
|
if (this.VideoPhotoData.realSmallPath.length > 0) {
|
this.VideoPhotoData.findPersonByPage();
|
} else {
|
// this.VideoPhotoData.querySearchList();
|
this.setLoadSearch(this.VideoPhotoData.querySearchList());
|
}
|
},
|
// "TreeDataPool.selectedNodes": function(newValue,oldValue) {
|
// if (newValue !== oldValue) {
|
// this.VideoPhotoData.treeNodes = newValue;
|
// console.log("监听树节点中的刷新方法", newValue,oldValue);
|
// this.VideoPhotoData.querySearchList();
|
// }
|
// },
|
"TreeDataPool.selectedNodes": {
|
handler: function (newVal, oldVal) {
|
if (newVal !== oldVal) {
|
this.VideoPhotoData.treeNodes = newVal;
|
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) {
|
// 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();
|
this.setLoadSearch(this.VideoPhotoData.querySearchList());
|
}
|
}
|
},
|
deep: true
|
},
|
"VideoPhotoData.activeCard": function (value) {
|
let card = this.$refs.scrollContain.getElementsByClassName("my-active-card");
|
|
if (card.length > 0) {
|
let cardHeight = card[0].clientHeight;
|
let cardTop = card[0].offsetTop;
|
let scrollTop = this.$refs.scrollContain.scrollTop;
|
let divHeight = this.$refs.scrollContain.clientHeight;
|
if (
|
cardTop - cardHeight - scrollTop > divHeight ||
|
cardTop - cardHeight - scrollTop < 0
|
)
|
this.$refs.scrollContain.scrollTo(0, cardTop - cardHeight);
|
}
|
},
|
"VideoPhotoData.uploadType": function (value) {
|
console.log("页面模式：", value)
|
if (value) {
|
this.typeDisable = true;
|
} else {
|
this.typeDisable = false;
|
this.VideoPhotoData.querySearchList();
|
}
|
},
|
"VideoPhotoData.selectBlacks": function (value) {
|
this.blackAngWhite()
|
},
|
"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) {
|
debugger
|
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";
|
// 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";
|
}
|
}
|
},
|
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;
|
},
|
resizeHeight(h) {
|
this.defaultHeight = h;
|
},
|
getHeight() {
|
let w = this.$refs.mid.offsetWidth;
|
let integer = parseInt(w / 330);
|
let integerSearchImg = parseInt((w - 300) / 325);
|
|
// 取消size修改
|
// console.log(integer, integerSearchImg)
|
// this.handleSizeChange(integer, integerSearchImg);
|
|
this.cardWidth = `calc(${100 / integer}% - 20px)`;
|
this.searchImgCardWidth = `calc(${100 / integerSearchImg}% - 20px)`;
|
},
|
uploadChange() {
|
this.VideoPhotoData.uploadDiaplay = false;
|
},
|
blackAngWhite() {
|
if (this.VideoPhotoData.selectBlacks.length > 0) {
|
for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
|
//this.VideoPhotoData.whiteList[i].disabled = true
|
this.$set(this.VideoPhotoData.whiteList[i], 'disabled', true)
|
}
|
}
|
if (this.VideoPhotoData.selectBlacks.length == 0) {
|
for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
|
//this.VideoPhotoData.whiteList[i].disabled = false
|
this.$set(this.VideoPhotoData.whiteList[i], 'disabled', false)
|
}
|
}
|
if (this.VideoPhotoData.selectWhites.length > 0) {
|
for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
|
// this.VideoPhotoData.blackList[i].disabled = true
|
this.$set(this.VideoPhotoData.blackList[i], 'disabled', true)
|
}
|
}
|
if (this.VideoPhotoData.selectWhites.length == 0) {
|
for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
|
//this.VideoPhotoData.blackList[i].disabled = false
|
this.$set(this.VideoPhotoData.blackList[i], 'disabled', false)
|
}
|
}
|
},
|
saveAddBase(item, index) {
|
if (this.VideoPhotoData.selectBlacks.length === 0 && this.VideoPhotoData.selectWhites.length === 0) {
|
this.$notify({
|
title: "注意",
|
message: "请选择要添加的底库",
|
type: "warning"
|
})
|
return
|
}
|
let res = this.VideoPhotoData.addBase(item)
|
res.then(data => {
|
console.log("then", data)
|
if (data.success) {
|
this.$notify({
|
title: "成功",
|
message: data.data,
|
type: "success"
|
})
|
} else {
|
this.$notify({
|
title: "失败",
|
message: data.data,
|
type: "error"
|
})
|
}
|
this.CardList.addBaseList.splice(index, 1);
|
this.VideoPhotoData.selectBlacks = []
|
this.VideoPhotoData.selectWhites = []
|
})
|
},
|
getDetails(ev, index) {
|
//let obj = this.CardList.datalist[index];
|
this.CardList.datalist = this.VideoPhotoData.cards;
|
let obj = this.CardList.datalist[index];
|
this.CardList.details = Array.from(
|
new Set([...this.CardList.details, ...[obj]])
|
);
|
// this.CardList.details.push(obj);
|
this.VideoPhotoData.activeCard = obj.activeObject.id;
|
},
|
toAdd(item) {
|
this.CardList.addBaseList.push(item)
|
},
|
handleClose(done) {
|
this.$confirm('确认关闭？')
|
.then(_ => {
|
done();
|
})
|
.catch(_ => { });
|
},
|
showUpload() {
|
this.VideoPhotoData.uploadDiaplay = !this.VideoPhotoData.uploadDiaplay;
|
//初始化数据
|
this.VideoPhotoData.clearStatus();
|
this.CardList.details = [];
|
// if (this.VideoPhotoData.uploadDiaplay) {
|
|
// }
|
//this.VideoPhotoData.uploadImg = require("C:/Users/mdesign/Desktop/cvasdv.jpg");
|
},
|
getDateInit() {
|
// 要求 默认一个月
|
const end = new Date();
|
const start = new Date();
|
const nowDate = new Date();
|
nowDate.setHours(0);
|
nowDate.setMinutes(0);
|
nowDate.setSeconds(0);
|
nowDate.setMilliseconds(0);
|
start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30);
|
end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1);
|
return [
|
this.$moment(start).format("YYYY-MM-DD HH:mm:ss"),
|
this.$moment(end).format("YYYY-MM-DD HH:mm:ss")
|
];
|
},
|
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() {
|
// 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;
|
//处理搜索类型
|
var tempArr = this.taskValues.map(task => task.split(','));
|
var tasks = [];
|
tempArr.forEach(arr => {
|
tasks = tasks.concat(arr)
|
});
|
this.VideoPhotoData.queryTasks = tasks;
|
|
this.VideoPhotoData.queryAlarmlevel = this.stringToNum();
|
this.VideoPhotoData.searchTime = this.format(this.searchTime);
|
//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() {
|
var arr = [];
|
this.alarmValues.forEach(element => {
|
if (element == "-1") {
|
arr.push(-1);
|
}
|
if (element == "1") {
|
arr.push(1);
|
}
|
if (element == "2") {
|
arr.push(2);
|
}
|
if (element == "3") {
|
arr.push(3);
|
}
|
if (element == "4") {
|
arr.push(4);
|
}
|
if (element == "5") {
|
arr.push(5);
|
}
|
});
|
// console.log("输出的数组：", arr);
|
return arr;
|
},
|
changePages(page) {
|
this.VideoPhotoData.page = page;
|
if (!this.VideoPhotoData.uploadType) {
|
console.log("分页改变！")
|
this.VideoPhotoData.uploadDiaplay = false;
|
// this.VideoPhotoData.querySearchList();
|
this.setLoadSearch(this.VideoPhotoData.querySearchList());
|
} else {
|
// this.VideoPhotoData.findPersonByPage();
|
this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
|
}
|
},
|
closeWindow(index) {
|
this.CardList.addBaseList.splice(index, 1);
|
},
|
handleSizeChange(integer, integerSearchImg) {
|
if (this.VideoPhotoData.uploadDiaplay) {
|
this.VideoPhotoData.size = integerSearchImg * 10;
|
//this.VideoPhotoData.findPersonByPage();
|
} else {
|
this.VideoPhotoData.size = integer * 10;
|
//this.VideoPhotoData.querySearchList();
|
}
|
},
|
sizeChange(size) {
|
if (this.VideoPhotoData.uploadType) {
|
this.VideoPhotoData.size = size;
|
this.VideoPhotoData.findPersonByPage();
|
} else {
|
this.VideoPhotoData.uploadDiaplay = false;
|
this.VideoPhotoData.size = size;
|
// this.VideoPhotoData.querySearchList();
|
this.setLoadSearch(this.VideoPhotoData.querySearchList());
|
}
|
},
|
clearSearch() {
|
this.tagValues = []
|
this.taskValues = []
|
this.alarmValues = []
|
this.VideoPhotoData.queryTabs = [];
|
this.VideoPhotoData.queryTasks = [];
|
this.VideoPhotoData.queryAlarmlevel = [];
|
this.VideoPhotoData.searchTime = this.getDateInit();
|
this.VideoPhotoData.inputValue = "";
|
this.searchTime = this.getDateInit();
|
if (!this.VideoPhotoData.uploadType) {
|
// this.VideoPhotoData.querySearchList();
|
this.setLoadSearch(this.VideoPhotoData.querySearchList());
|
} else {
|
// this.VideoPhotoData.findPersonByPage();
|
this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
|
}
|
},
|
disabled(data) {
|
this.isDisabled = data;
|
},
|
getCenter() {
|
this.center = {
|
x: document.documentElement.clientWidth / 2 - 250,
|
y: document.documentElement.clientHeight / 2 - 200
|
};
|
},
|
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
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.searching-box {
|
width: 100%;
|
height: 100% !important;
|
float: left;
|
//position: relative;
|
.searching-right {
|
width: 100%;
|
background-color: #e9ebf2;
|
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>
|
