<template>
|
<div class="searching-box" @click="showDownBox = false">
|
<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
|
: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"
|
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%; margin-right: 20px">
|
<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: 22%; 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>
|
|
<div class="btnArea">
|
<div class="button light" @click.stop="showDownBox = !showDownBox">
|
<span class="el-icon-plus"></span>
|
导出数据
|
</div>
|
|
<div class="downBox" v-if="showDownBox">
|
<div class="downItem">导出全部数据</div>
|
<div class="downItem">导出筛选数据</div>
|
</div>
|
</div>
|
|
<p class="p-clear">
|
<b class="clear-searching" @click="clearSearch">重置</b>
|
</p>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="配置存储路径"
|
placement="bottom"
|
>
|
<span @click="showSetBox = true" class="iconfont setIcon"
|
></span
|
>
|
</el-tooltip>
|
</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"
|
: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>
|
</div>
|
</div>
|
</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">保存</el-button>
|
<el-button type="default">取消</el-button>
|
</div>
|
</div>
|
</hsc-window>
|
</hsc-window-style-metal>
|
<SetBox v-if="showSetBox" @close="showSetBox = false"></SetBox>
|
</div>
|
</template>
|
|
<script>
|
import Card from "./components/Card";
|
import UploadImg from "./components/UploadImg";
|
import bus from "@/main";
|
import { getUrlKey } from "@/api/utils.ts";
|
import SetBox from "@/views/search/components/SetBox";
|
export default {
|
name: "RightSide",
|
components: {
|
Card,
|
UploadImg,
|
SetBox,
|
},
|
data() {
|
return {
|
cardWidth: "",
|
center: "",
|
defaultHeight: 432,
|
defaultWidth: 600,
|
isDisabled: false,
|
typeDisable: false,
|
showType: "search",
|
searchImgCardWidth: "",
|
tagValues: [],
|
alarmValues: [],
|
taskValues: [],
|
showDownBox: false,
|
searchTime: [
|
this.$moment().format("YYYY-MM-DD 00:00:00"),
|
this.$moment().format("YYYY-MM-DD HH:mm:ss"),
|
],
|
searchText: "",
|
currentPage: 1,
|
showSetBox: false,
|
};
|
},
|
computed: {
|
searchTimeFormated() {
|
return this.format(this.searchTime);
|
},
|
},
|
created() {
|
this.VideoPhotoData.activeCard = "";
|
this.TreeDataPool.readonly = true;
|
this.TreeDataPool.gbReadonly = true;
|
this.TreeDataPool.multiple = true;
|
this.TreeDataPool.clean();
|
},
|
mounted() {
|
this.$nextTick(() => {
|
let scrollContain = this.$refs.scrollContain;
|
this.VideoPhotoData.scrollContainDom = scrollContain;
|
let list =
|
this.TreeDataPool.localVedioList &&
|
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
|
// ];
|
// }
|
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 (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();
|
// 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.treeActiveName"(n) {
|
if (n && n == "camera") {
|
this.VideoPhotoData.treeNodes = [];
|
this.setLoadSearch(this.VideoPhotoData.querySearchList());
|
}
|
},
|
"TreeDataPool.showTreeBox"() {
|
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;
|
// 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.setLoadSearch(this.VideoPhotoData.querySearchList());
|
}
|
}
|
},
|
deep: true, //深度监听
|
},
|
"DataStackPool.selectedDir": {
|
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) {
|
this.VideoPhotoData.findPersonByPage();
|
} else {
|
// this.VideoPhotoData.querySearchList();
|
this.setLoadSearch(this.VideoPhotoData.querySearchList());
|
}
|
}
|
},
|
deep: true,
|
},
|
"VideoPhotoData.activeCard": function () {
|
let card =
|
this.$refs.scrollContain.getElementsByClassName("my-active-card");
|
console.log("------");
|
console.log(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;
|
console.log(2);
|
console.log(cardHeight);
|
console.log(cardTop);
|
console.log(scrollTop);
|
console.log(divHeight);
|
if (
|
cardTop - cardHeight - scrollTop > divHeight ||
|
cardTop - cardHeight - scrollTop < 0
|
)
|
this.$refs.scrollContain.scrollTo(0, cardTop - cardHeight);
|
}
|
},
|
"VideoPhotoData.uploadType": function (value) {
|
if (value) {
|
this.typeDisable = true;
|
this.disabled = true;
|
} else {
|
this.typeDisable = false;
|
this.VideoPhotoData.querySearchList();
|
}
|
},
|
"VideoPhotoData.selectBlacks": function () {
|
this.blackAngWhite();
|
},
|
"VideoPhotoData.selectWhites": function () {
|
this.blackAngWhite();
|
},
|
"VideoPhotoData.uploadDiaplay": function (value) {
|
this.getHeight();
|
if (value) {
|
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";
|
}
|
},
|
},
|
methods: {
|
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) {
|
this.defaultHeight = h;
|
},
|
getHeight() {
|
let w = this.$refs.mid.offsetWidth;
|
let integer = parseInt(w / 330);
|
let integerSearchImg = parseInt((w - 300) / 325);
|
|
// 取消size修改
|
// this.handleSizeChange(integer, integerSearchImg);
|
|
this.cardWidth = `calc(${100 / integer}% - 20px)`;
|
this.searchImgCardWidth = `calc(${100 / integerSearchImg}% - 20px)`;
|
},
|
uploadChange() {
|
this.VideoPhotoData.uploadDiaplay = false;
|
this.VideoPhotoData.clearStatus();
|
},
|
blackAngWhite() {
|
if (
|
this.VideoPhotoData.selectBlacks &&
|
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 &&
|
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 &&
|
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 &&
|
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) => {
|
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];
|
/* try {
|
this.CardList.details = Array.from(
|
new Set([...this.CardList.details, ...[obj]])
|
);
|
} catch (error) {
|
console.log(error);
|
} */
|
this.CardList.details = [];
|
this.CardList.details.push(obj);
|
// this.CardList.details.push(obj);
|
this.VideoPhotoData.activeCard = obj.activeObject.id;
|
console.log(this.VideoPhotoData.activeCard);
|
},
|
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) {
|
if (!array || array.length === 0) {
|
return [];
|
}
|
return [
|
this.$moment(array[0]).format("YYYY-MM-DD HH:mm:ss"),
|
this.$moment(array[1]).format("YYYY-MM-DD HH:mm:ss"),
|
];
|
},
|
searchingBtn() {
|
if (!this.searchTime) {
|
this.searchTime = [];
|
}
|
// let obj = document.getElementById('searchMid');
|
// let load = this.$loading({
|
// target:obj,
|
// })
|
// load.close();
|
// this.AuthData.loading = true
|
this.VideoPhotoData.page = 1;
|
this.VideoPhotoData.queryTabs = this.tagValues;
|
//处理搜索类型
|
var tempArr = this.taskValues.map((task) => task.split(","));
|
var tasks = [];
|
console.log("1");
|
|
tempArr.forEach((arr) => {
|
tasks = tasks.concat(arr);
|
});
|
this.VideoPhotoData.queryTasks = tasks;
|
console.log("2");
|
|
this.VideoPhotoData.queryAlarmlevel = this.stringToNum();
|
console.log("3");
|
console.log(this.searchTime);
|
|
this.VideoPhotoData.searchTime = this.format(this.searchTime);
|
console.log(this.VideoPhotoData.searchTime);
|
|
//this.VideoPhotoData.inputValue = this.searchText;
|
this.VideoPhotoData.showType = this.showType;
|
if (!this.VideoPhotoData.uploadType) {
|
this.VideoPhotoData.uploadDiaplay = false;
|
//this.VideoPhotoData.page = this.currentPage;
|
// this.VideoPhotoData.querySearchList();
|
console.log("4");
|
|
this.setLoadSearch(this.VideoPhotoData.querySearchList());
|
} else {
|
//this.VideoPhotoData.page = this.currentPage;
|
// this.VideoPhotoData.findPersonByPage();
|
console.log("5");
|
|
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);
|
}
|
});
|
return arr;
|
},
|
changePages(page) {
|
this.VideoPhotoData.page = page;
|
if (!this.VideoPhotoData.uploadType) {
|
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 = "";
|
|
console.log(this.searchTime);
|
|
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();
|
});
|
},
|
tagChange(obj) {
|
if (obj.length > 0) {
|
this.showType = "compare";
|
} else {
|
this.showType = "search";
|
}
|
|
this.VideoPhotoData.queryTabs = obj;
|
|
this.setLoadSearch(this.VideoPhotoData.querySearchList());
|
},
|
},
|
};
|
</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;
|
}
|
}
|
.p-input .el-button {
|
transform: translateY(-1px);
|
}
|
|
.setIcon {
|
margin-left: 10px;
|
font-size: 18px;
|
color: #1677ff;
|
cursor: pointer;
|
}
|
.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;
|
}
|
}
|
</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;
|
}
|
}
|
.btnArea {
|
padding: 0 10px;
|
margin-right: 10px;
|
background-color: #0064ff;
|
text-align: center;
|
line-height: 28px;
|
display: inline-block;
|
height: 28px;
|
border-radius: 5px;
|
cursor: pointer;
|
color: #fff;
|
font-size: 12px;
|
|
.downBox {
|
top: 104px;
|
right: 255px;
|
position: absolute;
|
text-align: center;
|
border: 1px solid #0064ff;
|
background-color: #fff;
|
border-radius: 9px;
|
color: #3d3d3d;
|
|
width: 100px;
|
z-index: 10;
|
|
.downItem {
|
text-align: center;
|
height: 28px;
|
line-height: 28px;
|
font-size: 12px;
|
border-radius: 9px;
|
cursor: pointer;
|
|
&:hover {
|
background-color: #f5f5fa;
|
}
|
}
|
}
|
}
|
</style>
|
