<template>
|
<div class="d-flex align-items-stretch flex-grow-1 pr">
|
<!-- 左侧条件区 start -->
|
<!-- 侧边栏按钮 start -->
|
<div
|
class="toggleOpen-btn bg-dark"
|
:class="!isOpenTree?'isShow':''"
|
v-if="!isOpenTree"
|
style="z-index:9999"
|
>
|
<b-button variant="link" class="tree-btn" @click="isOpenTree = !isOpenTree;setWidthShort()">
|
<i class="ion ion-md-swap f20 text-white"></i>
|
</b-button>
|
</div>
|
<!-- 侧边栏按钮 end -->
|
<div
|
class="bg-white home-sidenav border-right"
|
:class="isOpenTree?'w-20':'w-0'"
|
style="height: 88.2vh;overflow-x:auto"
|
>
|
<div class="pl-2 pr-2" style="min-width:360px">
|
<!-- 组织集合 start -->
|
<org-tree
|
ref="tree"
|
:isSearch="true"
|
@currentNode="_currentNode"
|
@removeNode="_removeNode"
|
:isOpen="isOpenColony"
|
@toggleOpen="isOpenTree = !isOpenTree;setWidthLong()"
|
/>
|
<!-- 组织集合 end -->
|
</div>
|
</div>
|
<!-- 左侧条件区 edn -->
|
<!-- 右侧内容区 start -->
|
<div class="flex-grow-1" :class="isOpenTree?'w-80':''">
|
<!-- 右侧 标题 start -->
|
<div class="py-3 bg-white border-bottom mb-4 clearfix">
|
<div class="row">
|
<div class="col-md-2 d-flex">
|
<div
|
class="table-switch-btn active"
|
:class="tabType==='map'?'active':''"
|
@click="tabType='map';handleSearch()"
|
v-show="tabType==='table'"
|
>
|
<i class="fas fa-map"></i>
|
</div>
|
<div
|
class="table-switch-btn active"
|
:class="tabType==='table'?'active':''"
|
@click="tabType='table';handleSearch()"
|
v-show="tabType==='map'"
|
>
|
<i class="oi d-block oi-list-rich" style="font-size:26px;padding-left:6px"></i>
|
</div>
|
<!-- 警报列表 alarm -->
|
<alarm-list-model
|
:tabType="tabType"
|
@check-compare-all="tabType='table';tableType='compareList';checkAlarm()"
|
@checkModel="checkModel"
|
@check-device="checkMapDevice"
|
@remove-check-device="removeCheckMapDevice"
|
@click-alarm="checkAlarm"
|
/>
|
</div>
|
<div class="col-md-10 clearfix row">
|
<!-- 库类别 select -->
|
<div class="col-md-2 col-sm-3">
|
<selectTypeLibrary
|
ref="selectTypeLibrary"
|
@submitData="(data)=>{recordData=JSON.parse(JSON.stringify(data));handleSearch()}"
|
/>
|
</div>
|
<!-- 全部分析 select -->
|
<div class="col-md-2 col-sm-3">
|
<selectKeyword
|
ref="selectKeyword"
|
:isDataBase="recordData.dataBaseList && !!recordData.dataBaseList.length||recordData.recordType=== 'other'"
|
@submitData="(data)=>{sdkData=JSON.parse(JSON.stringify(data));handleSearch()}"
|
/>
|
</div>
|
<!-- 检索关键字 select -->
|
<!-- 日期选择框 -->
|
<div class="col-md-4 col-sm-8">
|
<el-date-picker
|
style="width:100%"
|
v-model="dateTime"
|
format="yyyy-MM-dd HH:mm:ss"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
type="datetimerange"
|
align="right"
|
unlink-panels
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:clearable="false"
|
@change="setDataTimeVal"
|
:picker-options="pickerOptions"
|
:default-time="dateset"
|
></el-date-picker>
|
</div>
|
<!-- 检索框-->
|
<div class="col-lg-3 col-md-2 col-sm-8">
|
<upload-drag
|
ref="uploadDrag"
|
limitTypes=".jpg,.png,.jpeg,.gif"
|
limitSize
|
uploadBtntext="以图搜图"
|
uploadBtnIcon
|
@showSearchImgList="searchImgList"
|
@updateThreshold="updateThreshold"
|
:isDrag="true"
|
:page="1"
|
:length="20"
|
:tableType="tableType"
|
:dateTime="dateTime"
|
:threshold="threshold"
|
>
|
<el-input
|
placeholder="青年/黑发"
|
autocomplete="off"
|
width="100%"
|
v-model="searchName"
|
clearable
|
@keyup.enter.native="handleSearch"
|
>
|
<i
|
slot="suffix"
|
class="el-input__icon fas fa-camera"
|
@click="searchImg"
|
style="font-size: 20px;color:#999;cursor:pointer"
|
></i>
|
</el-input>
|
</upload-drag>
|
</div>
|
<div class="col-lg-1 col-md-2 col-sm-4">
|
<b-btn variant="primary" class="mr10" @click="handleSearch">搜索</b-btn>
|
</div>
|
</div>
|
</div>
|
<!-- <div>
|
<b-btn variant="primary" class="btn-circle">
|
<span class="fas fa-lock"></span>
|
<span class="fas fa-lock-open"></span>
|
</b-btn>
|
</div>-->
|
</div>
|
<!-- 右侧 标题 end -->
|
<div class="container-p-x">
|
<div class="row bg-white pb-2 px-2 border overflow-auto">
|
<div class="col-md-12 col-lg-12">
|
<!-- 集群按钮 非集群按钮 start -->
|
<!-- <div v-if="tabType!=='map'" class="d-flex">
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'commonList'?'active':'']"
|
@click="tableType='commonList'"
|
>commonList</div>
|
<div class="flex-vertical-center px-3">
|
<span class="text-light">|</span>
|
</div>
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'compareList'?'active':'']"
|
@click="tableType='compareList'"
|
>compareList</div>
|
<div class="flex-vertical-center px-3">
|
<span class="text-light">|</span>
|
</div>
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'mapList'?'active':'']"
|
@click="tableType='mapList'"
|
>mapList</div>
|
</div>-->
|
<!-- 集群按钮 非集群按钮 end -->
|
<!-- 条件控制条 start -->
|
<div :class="['shrink',isShowBar?'':'']">
|
<div class="shrink-btn" @click="isShowBar=!isShowBar">
|
<span class="ion ion-ios-arrow-up" v-if="isShowBar"></span>
|
<span class="ion ion-ios-arrow-down" v-else></span>
|
</div>
|
</div>
|
|
<div class="pb-2" v-if="isShowBar">
|
<select-bar
|
:data="selectBarList"
|
@to-clear="clearCondition"
|
@to-clear-all="clearConditionAll"
|
/>
|
</div>
|
<!-- 条件控制条 end -->
|
<div :style="`height: ${isShowBar?'71vh':'74.5vh'};overflow: auto;`">
|
<view-map ref="mapDevice" v-if="tabType==='map'" :content="mapModel2params"/>
|
<common-list ref="commonList" v-show="tabType==='table' && tableType==='commonList'"/>
|
<compare-list
|
ref="compareList"
|
v-show="tabType==='table' && tableType==='compareList'"
|
></compare-list>
|
<map-list ref="mapList" v-show="tabType==='table' && tableType==='mapList'"/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 右侧内容区 end -->
|
<siliderModel
|
:BigPicParam="BigPic"
|
:accompanyPersonParam="accompanyPerson"
|
:parentData="childrenData"
|
ref="model1"
|
></siliderModel>
|
<sdkTypeModel ref="sdkTypeModelForCommon"></sdkTypeModel>
|
</div>
|
</template>
|
<script>
|
import { DatePicker, Input, Button } from 'element-ui'
|
import orgTree from './OrgTree'
|
import ViewMap from '../Map/Map'
|
import selectKeyword from './HomeSelect/selectKeyword'
|
import selectTypeLibrary from './HomeSelect/selectTypeLibrary'
|
import selectBar from './HomeSelect/selectBar'
|
import alarmListModel from './AlarmListModel/index'
|
import uploadDrag from '@/components/upload/uploadDragByPan'
|
import commonList from '../../pages/Home/components/searchList/commonList'
|
import compareList from '../../pages/Home/components/searchList/compareList'
|
import mapList from '../../pages/Home/components/searchList/mapList'
|
import siliderModel from './components/model/siliderModel'
|
import { findLikerPics } from '../../server/searchImg.js'
|
import sdkTypeModel from './components/model/sdkTypeModel'
|
|
let allMinDate = ''
|
export default {
|
name: 'home',
|
metaInfo: {
|
title: '首页'
|
},
|
components: {
|
sdkTypeModel,
|
siliderModel,
|
commonList,
|
compareList,
|
mapList,
|
elButton: Button,
|
elInput: Input,
|
elDatePicker: DatePicker,
|
orgTree,
|
uploadDrag,
|
selectTypeLibrary,
|
selectKeyword,
|
ViewMap: ViewMap,
|
selectBar,
|
alarmListModel,
|
findLikerPics
|
},
|
data() {
|
return {
|
dateset: ['00:00:00', '23:59:59'],
|
mapParam: {},
|
leftMap: [],
|
pickerOptions: {
|
disabledDate(time) {
|
const nowDate = new Date()
|
nowDate.setHours(0)
|
nowDate.setMinutes(0)
|
nowDate.setSeconds(0)
|
nowDate.setMilliseconds(0)
|
const dayEndTime = nowDate.getTime() + 3600 * 1000 * 24 - 1
|
if (allMinDate) {
|
return (
|
time.getTime() > dayEndTime ||
|
time > new Date(allMinDate.getTime() + 3600 * 1000 * 24 * 90) ||
|
time < new Date(allMinDate.getTime() - 3600 * 1000 * 24 * 90)
|
)
|
}
|
return time.getTime() > dayEndTime
|
},
|
onPick({ maxDate, minDate }) {
|
allMinDate = minDate
|
},
|
shortcuts: [
|
{
|
text: '最近一周',
|
onClick(picker) {
|
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 * 6)
|
end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1)
|
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
picker.$emit('pick', [start, end])
|
}
|
},
|
{
|
text: '最近一个月',
|
onClick(picker) {
|
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)
|
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
picker.$emit('pick', [start, end])
|
}
|
},
|
{
|
text: '最近三个月',
|
onClick(picker) {
|
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 * 90)
|
end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1)
|
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
picker.$emit('pick', [start, end])
|
}
|
}
|
]
|
},
|
userInfo: this.$store.getters.basicUserInfo,
|
isShowBar: false,
|
tabType: 'map', // table , map
|
tableType: 'commonList', // commonList 通用 compareList 比较 mapList
|
isOpenTree: true,
|
treeData: [],
|
currentItem: {
|
type: 'areaTree',
|
node: { id: '0', type: 'MENU', name: '平台设备' }
|
},
|
/* 检索条件 */
|
// 记录
|
recordData: {
|
valNames: ['全部记录'],
|
dataBaseList: [],
|
recordType: '',
|
data: null
|
},
|
// 分析
|
sdkData: {
|
valNames: ['全部分析'],
|
sdkType: [],
|
data: null
|
},
|
// 日期
|
dateTime: [],
|
// 关键字
|
content: '', // 后台
|
searchName: '', // 前台自用
|
isOpenColony: false,
|
|
// 弹窗使用
|
BigPic: {},
|
accompanyPerson: {},
|
childrenData: {},
|
// 搜图对比阈值
|
threshold: 60,
|
/** mapModel2用 */
|
mapModel2params: {}
|
}
|
},
|
watch: {},
|
computed: {
|
orgId() {
|
return this.$store.getters.basicUserInfo.orgId
|
},
|
userId() {
|
return this.$store.getters.basicUserInfo.id
|
},
|
selectBarList() {
|
const list = [
|
{
|
title: '记录',
|
type: 'selectTypeLibrary',
|
value:
|
this.recordData && this.recordData.valNames
|
? this.recordData.valNames.join('/')
|
: '全部记录'
|
},
|
{
|
title: '分析',
|
type: 'selectKeyword',
|
value:
|
this.sdkData && this.sdkData.valNames
|
? this.sdkData.valNames.join('/')
|
: '全部分析'
|
},
|
{
|
title: '关键词',
|
type: 'search',
|
value: this.content
|
}
|
]
|
return list
|
}
|
},
|
methods: {
|
setWidthLong() {
|
this.$refs.compareList.setWidthLong()
|
},
|
setWidthShort() {
|
this.$refs.compareList.setWidthShort()
|
},
|
checkModel(data) {
|
console.log(data, 'data')
|
const BigPicjson = {
|
videoNum: data.videoNum,
|
picDate: data.picDate,
|
videoIp: data.videoIp,
|
indeviceid: data.indeviceid,
|
imgKey: data.imgKey
|
}
|
this.BigPic = { ...BigPicjson }
|
console.log(this.BigPic, '大图参数')
|
const accompanyPersonjson = {
|
videoReqNum: data.videoReqNum,
|
picDate: data.picDate,
|
personId: data.personId,
|
Id: data.Id
|
}
|
this.accompanyPerson = { ...accompanyPersonjson }
|
this.childrenData = { ...data }
|
if (data.sdkType === '1' || data.sdkType === '人脸') {
|
this.$refs.model1.showModel(BigPicjson)
|
} else {
|
this.$refs.sdkTypeModelForCommon.showModel(BigPicjson, data.picSmUrl)
|
}
|
// this.$refs.model1.showModel(BigPicjson)
|
},
|
setDataTimeVal(val) {
|
this.setSear(this.dateTime[0], this.dateTime[1])
|
if (val === null) {
|
this.$toast({
|
type: 'error',
|
message: '抱歉，检索必须选择时间，已经为您重置近一个月的时间'
|
})
|
// 日期插件赋值
|
this.dateTime = this.getDateInit()
|
}
|
},
|
setSear(start, end) {
|
let json = {
|
startDate: this.$moment(start).format('YYYY-MM-DD HH:mm:ss'),
|
endDate: this.$moment(end).format('YYYY-MM-DD HH:mm:ss')
|
}
|
localStorage.setItem('sear', JSON.stringify(json))
|
},
|
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)
|
// 霍文博添加 尔松需要的时间参数写入h5本地存储
|
let jsonstr = localStorage.getItem('searParams')
|
|
if (jsonstr && this.$route.query && this.$route.query.loginedInfo) {
|
let json = JSON.parse(jsonstr)
|
return [json.startDate, json.endDate]
|
}
|
this.setSear(start, end)
|
// let json = {
|
// startDate: this.$moment(start).format('YYYY-MM-DD HH:mm:ss'),
|
// endDate: this.$moment(end).format('YYYY-MM-DD HH:mm:ss')
|
// }
|
// localStorage.setItem('sear', JSON.stringify(json))
|
/// //////////////////////////////////////////////////////////////
|
return [
|
this.$moment(start).format('YYYY-MM-DD HH:mm:ss'),
|
this.$moment(end).format('YYYY-MM-DD HH:mm:ss')
|
]
|
},
|
// * 获取组织树
|
getOrgDevice(data) {
|
return new Promise((resolve, reject) => {
|
if (!data) {
|
reject(new Error('递归函数传入参数存在问题！！！'))
|
}
|
const list = []
|
const _recursionFn = data => {
|
for (let item of data) {
|
if (item.type !== 'MENU' && item.type > 2) {
|
// resolve(item)
|
list.push(item)
|
} else if (item.child) {
|
_recursionFn(item.child)
|
}
|
}
|
}
|
_recursionFn(data)
|
resolve(list)
|
})
|
},
|
async getIndeviceid({ type = 'areaTree', node }) {
|
if (node.id === 0) {
|
// 查询某种全部直接返回
|
return {
|
cluId: type,
|
indeviceid: []
|
}
|
}
|
let list = await this.getOrgDevice([node])
|
list = list.map(item => item.id)
|
return {
|
cluId: '',
|
indeviceid: list
|
}
|
},
|
/* 搜索框 */
|
async handleSearch() {
|
/* 检索框 实际赋值 */
|
this.content = this.searchName
|
localStorage.setItem('searParams', localStorage.getItem('sear'))
|
|
/* 你们需要的值 */
|
console.log(
|
this.tabType,
|
'tabType',
|
this.currentItem,
|
'左侧树返回值',
|
this.recordData,
|
'记录',
|
this.sdkData,
|
'分析',
|
this.dateTime,
|
'时间',
|
this.content,
|
'检索条件'
|
)
|
let indeviceids = await this.getIndeviceid(this.currentItem)
|
let params = {
|
currentItem: this.currentItem,
|
recordData: this.recordData,
|
sdkData: this.sdkData,
|
dateTime: this.dateTime,
|
content: this.content,
|
indeviceid: indeviceids || { indeviceid: [] }
|
}
|
this.mapModel2params = params
|
// 判定展示哪个列表形式
|
if (
|
this.recordData.recordType !== '' ||
|
this.recordData.dataBaseList.length > 0
|
) {
|
this.tableType = 'compareList'
|
} else {
|
this.tableType = 'commonList'
|
}
|
// 判定完毕
|
if (this.tabType === 'map') {
|
if (window.pathSimplifierIns) {
|
window.pathSimplifierIns.setData([
|
{
|
name: '轨迹',
|
path: []
|
}
|
])
|
}
|
console.log(params, '调用地图查询')
|
this.$nextTick(() => {
|
this.$refs.mapDevice &&
|
this.$refs.mapDevice.findDeviceByParams(params)
|
})
|
} else if (this.tableType === 'commonList') {
|
// 公共list
|
console.log(params, '调用列入表前的参数--公共list')
|
this.$refs.commonList && this.$refs.commonList.getList(params)
|
// this.$refs.viewTableLocal && this.$refs.viewTableLocal._initData()
|
} else if (this.tableType === 'compareList') {
|
// 比较list
|
console.log(params, '调用列入表前的参数--比较list')
|
this.$refs.compareList &&
|
this.$refs.compareList.getList({ tableType: 'ALL', ...params })
|
}
|
},
|
searchImgList(res) {
|
if (res.result.esList.length === 0) {
|
this.$toast({
|
type: 'error',
|
message: '没有查到符合相似值的人员数据'
|
})
|
}
|
if (this.tabType === 'map') {
|
this.$refs.mapDevice && this.$refs.mapDevice.drawline(res)
|
} else if (this.tabType === 'table') {
|
this.$refs.mapList && this.$refs.mapList.getList(res)
|
this.tableType = 'mapList'
|
}
|
},
|
updateThreshold(res) {
|
this.threshold = res
|
console.log('阈值为' + this.threshold)
|
},
|
searchImg() {
|
console.log(this.$refs.uploadDrag, 'this.$refs.uploadDrag')
|
// 当选择以图搜图按钮时先把地图打开的信息窗口关闭
|
if (this.$refs.mapDevice) {
|
this.$refs.mapDevice.$refs.aMap.textInfoWindow.close()
|
}
|
this.$refs.uploadDrag && this.$refs.uploadDrag.uploadStart()
|
// .click()
|
},
|
/* 平台设备操作 */
|
// 点击树
|
_currentNode(data) {
|
this.currentItem = data
|
/* 点击后立即执行检索 */
|
this.handleSearch()
|
|
// if (data && data.id !== '0') {
|
// let params = {
|
// currentItem: this.currentItem,
|
// recordData: this.recordData,
|
// sdkData: this.sdkData,
|
// dateTime: this.dateTime,
|
// content: this.content
|
// }
|
// this.$refs.mapDevice && this.$refs.mapDevice.findDeviceByParams(params)
|
// }
|
console.log(data, 'node---平台设备操作')
|
},
|
_removeNode(data) {
|
this.currentItem = data
|
/* 点击后立即执行检索 */
|
this.handleSearch()
|
console.log(data, 'tree----触发清空')
|
this.$refs.mapDevice && this.$refs.mapDevice.cancelActive()
|
},
|
/* 检索条操作 */
|
clearCondition({ type }) {
|
if (type.indexOf('selectTypeLibrary') !== -1) {
|
this.$refs.selectTypeLibrary && this.$refs.selectTypeLibrary.init()
|
}
|
if (type.indexOf('selectKeyword') !== -1) {
|
this.$refs.selectKeyword && this.$refs.selectKeyword.init()
|
}
|
if (type.indexOf('search') !== -1) {
|
this.searchName = ''
|
this.content = ''
|
}
|
// 清除条件后进行检索
|
this.handleSearch()
|
},
|
clearConditionAll() {
|
this.clearCondition({
|
type: ['selectTypeLibrary', 'selectKeyword', 'search']
|
})
|
},
|
/* 图片检索 start */
|
async sotu(json) {
|
console.log(json, 'sotu参数')
|
// this.tableType = 'mapList'
|
// this.tabType = 'table'
|
let res = await findLikerPics(json)
|
console.log(res, 'sotu结果')
|
// this.tabType = 'table'
|
// this.tableType = 'mapList'
|
res.data['index'] = 0
|
const realSmallPath = []
|
realSmallPath.push({ path: json.path })
|
res.data['smallPhotoPath'] = realSmallPath
|
res.data['param'] = json
|
this.$refs.mapList && this.$refs.mapList.getList({ result: res.data })
|
this.$router.replace('')
|
this.tabType = 'table'
|
this.tableType = 'mapList'
|
},
|
/* 图片检索 end */
|
// 跳转函数初始化
|
routeInit() {
|
console.log(this.$route.query, 'this.$route.query')
|
if (this.$route.query) {
|
console.log(this.$route.query, 'this.$route.query')
|
if (
|
this.$route.query.tabType &&
|
['map', 'table'].includes(this.$route.query.tabType)
|
) {
|
this.tabType = this.$route.query.tabType
|
if (this.tabType === 'map') {
|
let searParams = JSON.parse(localStorage.getItem('searParams'))
|
this.$set(searParams, 'liker', this.threshold)
|
console.log(this.$refs.mapDevice, 'searParams')
|
setTimeout(() => {
|
this.$refs.mapDevice.reciveParams(searParams)
|
// 霍文博添加，为了保证用户点击刷新按钮，回到地图初始页
|
this.$router.replace('')
|
}, 100)
|
}
|
}
|
if (
|
this.$route.query.tableType &&
|
['commonList', 'compareList', 'mapList'].includes(
|
this.$route.query.tableType
|
)
|
) {
|
// this.tableType = 'mapList'
|
// this.tabType = 'table'
|
// 修改以图搜图的相似度的比分
|
this.threshold = parseInt(this.$route.query.liker)
|
if (this.$route.query.tableType === 'mapList') {
|
let json = {
|
liker: this.threshold,
|
path: this.$route.query.urlPath,
|
page: 1,
|
length: 40,
|
startDate: this.dateTime[0], // new Date(this.$route.query.startDate).format('yyyy-MM-dd HH:mm:ss'),
|
endDate: this.dateTime[1] // new Date(this.$route.query.endDate).format('yyyy-MM-dd HH:mm:ss')
|
}
|
this.sotu(json)
|
}
|
}
|
if (this.$route.query.isSearch) {
|
this.handleSearch()
|
}
|
}
|
},
|
// 报警列表点击回调
|
checkMapDevice(data) {
|
this.$refs.mapDevice && this.$refs.mapDevice.cancelActive()
|
this.$refs.mapDevice &&
|
this.$refs.mapDevice.setActiveAlarm({
|
id: data && data.videoReqNum ? data.videoReqNum : ''
|
})
|
},
|
removeCheckMapDevice() {
|
this.$refs.mapDevice && this.$refs.mapDevice.cancelActive()
|
},
|
checkAlarm() {
|
// 列表模式下触发查询警报列表
|
this.$refs.selectTypeLibrary &&
|
this.$refs.selectTypeLibrary.setSelect({
|
name: '报警记录',
|
value: 'alarm'
|
})
|
this.handleSearch()
|
}
|
},
|
created() {
|
// 日期插件赋值
|
this.dateTime = this.getDateInit()
|
let fenshu = localStorage.getItem('threshold')
|
if (fenshu) {
|
this.threshold = parseInt(fenshu)
|
} else {
|
localStorage.setItem('threshold', 60)
|
}
|
this.routeInit()
|
// localStorage.setItem('threshold', 60)
|
},
|
mounted() {
|
// this.handleSearch()
|
}
|
}
|
</script>
|
<style lang="scss" >
|
.ui-icon-lg {
|
font-size: 30px;
|
width: 60px;
|
height: 60px;
|
line-height: 60px !important;
|
}
|
.home-sidenav {
|
transition: all 0.5s;
|
overflow: hidden;
|
}
|
.w-20 {
|
width: 20%;
|
}
|
.w-80 {
|
width: 80%;
|
}
|
.w-0 {
|
width: 0%;
|
}
|
.toggleOpen-btn {
|
border-radius: 5px;
|
position: absolute;
|
left: -8px;
|
top: 3.5rem;
|
transition: all 2s;
|
opacity: 0;
|
}
|
.toggleOpen-btn.isShow {
|
opacity: 1;
|
}
|
|
.table-switch-btn {
|
height: 40px;
|
width: 50px;
|
line-height: 30px;
|
font-size: 30px;
|
padding: 5px 8px;
|
color: #ccc;
|
cursor: pointer;
|
&.active {
|
color: #35bde7;
|
}
|
}
|
.bg-grid {
|
background: #ccc;
|
}
|
.btn-circle {
|
width: 38px;
|
height: 38px;
|
border-radius: 50%;
|
text-align: center;
|
padding: 0;
|
}
|
.shrink {
|
padding: 2px 0;
|
text-align: center;
|
.shrink-btn {
|
width: 200px;
|
height: 10px;
|
line-height: 5px;
|
text-align: center;
|
margin: 0 auto;
|
border-radius: 5px;
|
cursor: pointer;
|
transition: all 1s;
|
background: #ccc;
|
/* 抑制选中 */
|
-moz-user-select: none;
|
-webkit-user-select: none;
|
user-select: none;
|
span {
|
margin-top: -4px;
|
color: #fff;
|
font-size: 15px;
|
}
|
}
|
&:hover .shrink-btn {
|
background: #35bde7;
|
}
|
}
|
</style>
|
