<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: 13%">
|
<b>底库：</b>
|
<el-select v-model="tagValues" multiple :disabled="isDisabled" collapse-tags size="mini"
|
style="width: calc(100% - 40px); min-width: 70px" @change="tagChange" 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: 13%">
|
<b>场景：</b>
|
<el-select v-model="taskValues" multiple @change="searchingBtn" :disabled="typeDisable" collapse-tags
|
size="mini" style="width: calc(100% - 40px); min-width: 70px" 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-task" style="width: 12%">
|
<b>关注：</b>
|
<el-select v-model="collection" @change="searchingBtn" size="mini"
|
style="width: calc(100% - 40px); min-width: 70px" placeholder="选择">
|
<el-option value="" label="全部"></el-option>
|
<el-option value="1" label="已关注"></el-option>
|
<el-option value="0" label="未关注"></el-option>
|
</el-select>
|
</p>
|
<p class="p-level" style="width: 15%">
|
<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="changeTime" type="datetimerange"
|
start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"
|
style="width: 99%; min-width: 200px"></el-date-picker> -->
|
<el-date-picker size="mini" v-model="searchTime" @change="changeTime" type="datetimerange"
|
:picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
|
style="width: 99%; min-width: 200px" align="right">
|
</el-date-picker>
|
</p>
|
<p class="p-input" style="width: 16%">
|
<el-input placeholder="请输入" prefix-icon="el-icon-search" style="
|
width: calc(100% - 75px);
|
min-width: 85px;
|
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>
|
<p class="p-clear">
|
<el-dropdown>
|
<span class="el-dropdown-link" style="color: #2249b4;font-weight: 600;">
|
导出<i class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item>
|
<b @click="exportData">导出图片</b>
|
</el-dropdown-item>
|
<el-dropdown-item>
|
<download-excel class="export-excel-wrapper" :data="VideoPhotoData.cards" :fields="json_fields"
|
:name="'视频分析报警统计' + searchTimeFormated + '.xlsx'">
|
<b>导出数据</b>
|
</download-excel>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</p>
|
<p class="p-clear">
|
<el-tooltip content="智能数据" placement="bottom" popper-class="atooltip">
|
<i class="el-icon-s-data icon-data" @click="showEchart"></i>
|
</el-tooltip>
|
</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" @deleteClick="deleteCard" @falseAlarm="toFalseAlarm"></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" @click="saveAddBase(item, index)">保存</el-button>
|
<el-button type="default" @click="closeWindow(index)">取消</el-button>
|
</div>
|
</div>
|
</hsc-window>
|
</hsc-window-style-metal>
|
<el-dialog :visible.sync="show_false_alarm" width="25%" :before-close="handleClose">
|
<div class="title">
|
<i class="el-icon-warning"></i>
|
<span>确定标记该条数据为误报数据吗？</span>
|
</div>
|
<div class="checkbox">
|
<el-checkbox v-model="is_hide">页面隐藏该条数据</el-checkbox>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button class="btn-1" @click="cancleAlarm">取 消</el-button>
|
<el-button class="btn-2" @click="alarmClick">确 定</el-button>
|
</span>
|
</el-dialog>
|
<EchartDialog v-if="show_echart_dialog" :dialogVisible="show_echart_dialog" :alarm_echart_data="alarm_echart_data"
|
:xAxisData="xAxisData" :seriesData="seriesData" @closeDialog="closeDialog">
|
</EchartDialog>
|
</div>
|
</template>
|
|
<script>
|
import Card from "@/components/subComponents/Card"
|
import UploadImg from "@/components/searching/UploadImg"
|
import EchartDialog from "@/components/searching/echartDialog"
|
import bus from "./main"
|
import { getUrlKey } from "@/api/utils"
|
import { saveAs } from "file-saver";
|
import JSZip from "jszip";
|
import axios from "axios";
|
// import * as XLSX from "xlsx"; // 引入 xlsx 库
|
|
export default {
|
components: {
|
Card,
|
UploadImg,
|
EchartDialog
|
},
|
data() {
|
return {
|
cardWidth: "",
|
center: "",
|
defaultHeight: 432,
|
defaultWidth: 600,
|
isDisabled: false,
|
typeDisable: false,
|
showType: "search",
|
searchImgCardWidth: "",
|
tagValues: [],
|
alarmValues: [],
|
taskValues: [],
|
collection: "",
|
searchTime: [this.$moment().format("YYYY-MM-DD 00:00:00"), this.$moment().format("YYYY-MM-DD HH:mm:ss")],
|
searchText: "",
|
currentPage: 1,
|
show_false_alarm: false,
|
show_echart_dialog: false,
|
is_hide: false,
|
false_alarm_query: {},
|
alarm_echart_data: [],
|
xAxisData: [],
|
seriesData: [],
|
pickerOptions: {
|
shortcuts: [{
|
text: '最近一周',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
picker.$emit('pick', [start, end]);
|
}
|
}, {
|
text: '最近一个月',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
picker.$emit('pick', [start, end]);
|
}
|
}, {
|
text: '最近三个月',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
picker.$emit('pick', [start, end]);
|
}
|
},
|
{
|
text: '最近半年',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
|
picker.$emit('pick', [start, end]);
|
}
|
},
|
{
|
text: '最近一年',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
|
picker.$emit('pick', [start, end]);
|
}
|
}
|
]
|
},
|
json_fields: {
|
摄像机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.id",
|
抓拍全景图地址: "activeObject.picMaxUrl",
|
录像地址: "activeObject.videoUrl",
|
抓拍时间: "activeObject.picDate",
|
更新时间: "activeObject.likeDate",
|
场景描述: "activeObject.content",
|
算法名称: "activeObject.sdkName",
|
算法标签: "activeObject.showLabels",
|
算法类别: {
|
field: "activeObject.targetInfo",
|
//自定义回调函数
|
callback: (value) => {
|
return value.length ? value[0].targetType : ""
|
}
|
},
|
目标ID: {
|
field: "activeObject.targetInfo",
|
//自定义回调函数
|
callback: (value) => {
|
return value.length ? value[0].targetId : ""
|
}
|
},
|
目标置信度: {
|
field: "activeObject.targetInfo",
|
//自定义回调函数
|
callback: (value) => {
|
return value.length ? value[0].targetScore : ""
|
}
|
},
|
目标坐标: {
|
field: "activeObject.targetInfo",
|
//自定义回调函数
|
callback: (value) => {
|
return value.length ? JSON.stringify(value[0].targetLocation) : ""
|
}
|
},
|
目标属性: {
|
field: "activeObject.targetInfo",
|
//自定义回调函数
|
callback: (value) => {
|
return value.length ? value[0].attribute : ""
|
}
|
}
|
}
|
}
|
},
|
computed: {
|
searchTimeFormated() {
|
return this.format(this.searchTime)
|
}
|
},
|
created() {
|
this.TreeDataPool.readonly = true
|
this.TreeDataPool.gbReadonly = true
|
this.TreeDataPool.multiple = true
|
this.TreeDataPool.clean()
|
this.TreeDataPool.fetchTreeData()
|
},
|
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
|
// ];
|
// }
|
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, o) {
|
if (n && n == "camera") {
|
this.VideoPhotoData.dataSource = "camera"
|
this.VideoPhotoData.treeNodes = []
|
this.setLoadSearch(this.VideoPhotoData.querySearchList())
|
} else {
|
this.VideoPhotoData.dataSource = "stack"
|
}
|
},
|
"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;
|
// 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 (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) {
|
if (value) {
|
this.typeDisable = true
|
this.disabled = true
|
} else {
|
this.typeDisable = false
|
this.VideoPhotoData.querySearchList()
|
}
|
},
|
"VideoPhotoData.selectBlacks": function (value) {
|
this.blackAngWhite()
|
},
|
"VideoPhotoData.selectWhites": function (value) {
|
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.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) => {
|
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) {
|
if (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() {
|
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
|
this.VideoPhotoData.collection = this.collection
|
if (!this.VideoPhotoData.uploadType) {
|
this.VideoPhotoData.uploadDiaplay = false
|
//this.VideoPhotoData.page = this.currentPage;
|
// this.VideoPhotoData.querySearchList();
|
this.setLoadSearch(this.VideoPhotoData.querySearchList())
|
} else {
|
//this.VideoPhotoData.page = this.currentPage;
|
// this.VideoPhotoData.findPersonByPage();
|
this.setLoadSearch(this.VideoPhotoData.findPersonByPage())
|
}
|
},
|
showEchart() {
|
this.show_echart_dialog = 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
|
this.VideoPhotoData.collection = this.collection
|
const res = this.VideoPhotoData.getAlarmStatistics().then(res => {
|
if (res.code / 1 === 200) {
|
this.alarm_echart_data = res.data.buckets || []
|
const mergedData = res.data.buckets.reduce((acc, current) => {
|
const existingItem = acc.find(item => item.taskName === current.taskName);
|
if (existingItem) {
|
existingItem.count += current.count;
|
// 可以选择保留所有id，或者只保留第一个id
|
existingItem.id = existingItem.id
|
} else {
|
acc.push({
|
...current,
|
// 如果希望id保持为数组形式方便后续处理
|
id: current.id
|
});
|
}
|
return acc;
|
}, []);
|
this.xAxisData = mergedData.map(item => item.taskName)
|
this.seriesData = mergedData.map(item => item.count)
|
}
|
})
|
|
},
|
closeDialog() {
|
this.show_echart_dialog = false
|
},
|
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())
|
}
|
},
|
async exportData() {
|
if (this.VideoPhotoData.cards.length == 0) {
|
return
|
}
|
|
const zip = new JSZip();
|
const imgFolder = zip.folder("images"); // 创建 images 目录
|
|
// **下载图片**
|
const downloadImages = this.VideoPhotoData.cards.map(async (item, index) => {
|
if (item.activeObject.picSrcUrl) {
|
try {
|
const response = await axios.get("/httpImage/" + item.activeObject.picSrcUrl[0], { responseType: "blob" });
|
imgFolder.file(`${item.activeObject.taskName + "_" + item.activeObject.id}.jpg`, response.data);
|
} catch (error) {
|
console.error(`图片下载失败: ${item.activeObject.picSrcUrl[0]}`, error);
|
}
|
}
|
});
|
|
// **等待所有图片下载完成**
|
await Promise.all(downloadImages);
|
zip.generateAsync({ type: "blob" }).then((zipBlob) => {
|
saveAs(zipBlob, '视频分析报警统计图片' + this.searchTimeFormated + ".zip");
|
});
|
},
|
clearSearch() {
|
this.tagValues = []
|
this.taskValues = []
|
this.collection = ""
|
this.alarmValues = []
|
this.VideoPhotoData.queryTabs = []
|
this.VideoPhotoData.queryTasks = []
|
this.VideoPhotoData.queryAlarmlevel = []
|
this.VideoPhotoData.searchTime = this.getDateInit()
|
this.VideoPhotoData.inputValue = ""
|
this.VideoPhotoData.collection = ""
|
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())
|
},
|
changeTime(val) {
|
if (!val) {
|
this.searchTime = []
|
}
|
|
this.searchingBtn()
|
},
|
deleteCard(id) {
|
this.$confirm("确认删除该条记录吗")
|
.then((_) => {
|
console.log("ddddddddddddddddd ", id)
|
let res = this.VideoPhotoData.deleteById(id)
|
res.then((data) => {
|
if (data.success) {
|
this.$notify({
|
title: "成功",
|
message: data.data,
|
type: "success"
|
})
|
this.searchingBtn()
|
} else {
|
this.$notify({
|
title: "失败",
|
message: data.data,
|
type: "error"
|
})
|
}
|
})
|
|
})
|
.catch((_) => { })
|
},
|
toFalseAlarm(data) {
|
this.false_alarm_query = {
|
id: data.id,
|
picSrcUrl: data.picSrcUrl,
|
taskName: data.taskName
|
}
|
this.show_false_alarm = true
|
},
|
alarmClick() {
|
let res = this.VideoPhotoData.falseAlarm(this.false_alarm_query)
|
res.then(data => {
|
if (data.success) {
|
if (this.is_hide) {
|
this.VideoPhotoData.deleteById(this.false_alarm_query.id)
|
}
|
this.$notify({ title: "成功", message: data.msg, type: "success" })
|
this.searchingBtn()
|
this.show_false_alarm = false
|
this.false_alarm_query = {}
|
this.is_hide = false
|
} else {
|
this.$notify({ title: "失败", message: data.msg, type: "error" })
|
}
|
})
|
},
|
cancleAlarm() {
|
this.show_false_alarm = false
|
this.false_alarm_query = {}
|
this.is_hide = false
|
}
|
|
}
|
}
|
</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;
|
}
|
|
.icon-data {
|
font-size: 20px;
|
cursor: pointer;
|
}
|
|
.icon-data: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;
|
}
|
}
|
|
:deep(.el-dialog .el-dialog__header) {
|
display: none;
|
}
|
|
.el-dialog__body {
|
.title {
|
display: flex;
|
align-items: center;
|
gap: 5px;
|
|
i {
|
font-size: 20px;
|
color: #f00;
|
}
|
|
span {
|
color: 20px;
|
font-weight: bold;
|
}
|
}
|
|
.checkbox {
|
text-align: left;
|
margin-left: 20px;
|
margin-top: 10px;
|
}
|
}
|
|
.el-dialog__footer {
|
.btn-1 {
|
color: #7169DF;
|
border: 1px solid #7169DF;
|
border-radius: 9px;
|
}
|
|
.btn-2 {
|
border: 1px solid #7169DF;
|
border-radius: 9px;
|
color: #fff;
|
background-color: #7169DF;
|
}
|
}
|
</style>
|
