<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>
|
|
<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> -->
|
<p class="p-clear">
|
<download-excel
|
class="export-excel-wrapper"
|
:data="VideoPhotoData.cards"
|
:fields="json_fields"
|
:name="'视频分析报警统计' + searchTimeFormated + '.xls'"
|
>
|
<!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
|
<!-- <el-button type="primary" size="small">导出EXCEL</el-button> -->
|
<!-- <div class="btnArea">
|
<div class="button light">
|
<span class="iconfont"></span>
|
导出数据
|
</div>
|
</div> -->
|
<b class="clear-searching"> <span class="iconfont"></span> 导出数据</b>
|
</download-excel>
|
</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"
|
: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
|
},
|
computed: {
|
searchTimeFormated() {
|
return this.format(this.searchTime)
|
}
|
},
|
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,
|
json_fields: {
|
部门: {
|
field: "activeObject.cameraId",
|
//自定义回调函数
|
callback: (value) => {
|
let org = ""
|
if (this.TreeDataPool.cameraParents.hasOwnProperty(value)) {
|
org = this.TreeDataPool.cameraParents[value]
|
}
|
return org
|
}
|
},
|
// 告警标记: "",
|
// 整改描述: "",
|
摄像机ID: "activeObject.cameraId",
|
摄像机名称: "activeObject.cameraName",
|
摄像机地址: "activeObject.cameraAddr",
|
场景ID: "activeObject.taskId",
|
场景名称: "activeObject.taskName",
|
事件等级: {
|
field: "activeObject.alarmRules",
|
//自定义回调函数
|
callback: (value) => {
|
return value.length ? value[0].alarmLevel : ""
|
}
|
},
|
设备ID: "activeObject.analyServerId",
|
设备IP: "activeObject.analyServerIp",
|
设备名称: "activeObject.analyServerName",
|
抓拍时间: "activeObject.picDate",
|
更新时间: "activeObject.likeDate",
|
抓拍全景图地址: "activeObject.picMaxUrl",
|
录像地址: "activeObject.videoUrl",
|
检测区域id: {
|
field: "activeObject.targetInfo",
|
//自定义回调函数
|
callback: (value) => {
|
return value.length ? value[0].areaId : ""
|
}
|
},
|
检测区域名称: {
|
field: "activeObject.targetInfo",
|
//自定义回调函数
|
callback: (value) => {
|
return value.length ? value[0].areaName : ""
|
}
|
}
|
}
|
}
|
},
|
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")
|
|
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) {
|
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
|
},
|
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 = []
|
}
|
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) {
|
this.VideoPhotoData.uploadDiaplay = false
|
|
this.setLoadSearch(this.VideoPhotoData.querySearchList())
|
} else {
|
this.setLoadSearch(this.VideoPhotoData.findPersonByPage())
|
}
|
console.log("cards", this.VideoPhotoData.cards)
|
},
|
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 = ""
|
|
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;
|
color: #0064ff;
|
background-color: #fff;
|
text-align: center;
|
line-height: 28px;
|
display: inline-block;
|
height: 28px;
|
border-radius: 5px;
|
cursor: pointer;
|
font-size: 12px;
|
border: 1px solid #0065ff;
|
|
.light {
|
}
|
|
.downBox {
|
top: 104px;
|
right: 255px;
|
position: absolute;
|
text-align: center;
|
background-color: #fff;
|
border-radius: 3px;
|
color: #3d3d3d;
|
width: 100px;
|
z-index: 10;
|
padding: 10px;
|
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05), 0px 4px 5px 0px rgba(0, 0, 0, 0.08),
|
0px 2px 4px -1px rgba(0, 0, 0, 0.12);
|
|
.downItem {
|
text-align: center;
|
height: 40px;
|
line-height: 40px;
|
font-size: 12px;
|
cursor: pointer;
|
|
&:hover {
|
background-color: #f0f5fa;
|
}
|
}
|
}
|
}
|
</style>
|
