zhangqun
2 years ago
parent
64c414117f
commit
1d704ea7f8
7 changed files with 368 additions and 9 deletions
@ -0,0 +1,326 @@ |
||||
<template> |
||||
<basic-container> |
||||
<avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" @row-del="rowDel" |
||||
v-model="form" :before-open="beforeOpen" @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange" @size-change="sizeChange" |
||||
@refresh-change="refreshChange" @on-load="onLoad"> |
||||
<template slot="menuLeft"> |
||||
<el-button @click="handleExport" type="warning" size="small" icon="el-icon-download" plain>导出 |
||||
</el-button> |
||||
</template> |
||||
<template slot-scope="{ row, index }" slot="menu"> |
||||
<el-button @click="linkVideo(row, index)" type="text" icon="el-icon-video-camera-solid" size="small" |
||||
:disabled="row.cancelTime == ''"> |
||||
视频联动 |
||||
</el-button> |
||||
</template> |
||||
</avue-crud> |
||||
<!-- 视频联动弹窗 --> |
||||
<el-dialog title="视频联动" :visible.sync="dialogVisible" v-if="dialogVisible" :append-to-body="true" :close-on-click-modal="false" |
||||
:close-on-press-escape="false" custom-class="video_dia" fullscreen> |
||||
|
||||
<div class="video_box"> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="6" v-for="item in videoData" :key="item.id"> |
||||
<VideoPlayer :name="item.name" :id="item.id" :code="item.cameraIndexCode" |
||||
:url="'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'" |
||||
:playbackUrl="'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'" /> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</el-dialog> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getList } from "@/api/alarm/alarm"; |
||||
import { bizLogin, bizDeviceList } from "@/api/wirelessintrusion/wirelessintrusion"; |
||||
import { exportBlob } from "@/api/common"; |
||||
import { downloadXls } from "@/util/util"; |
||||
import { dateNow } from "@/util/date"; |
||||
import { getToken } from "@/util/auth"; |
||||
import NProgress from 'nprogress'; |
||||
import 'nprogress/nprogress.css'; |
||||
import func from "@/util/func"; |
||||
import VideoPlayer from "../../components/video/video" |
||||
|
||||
export default { |
||||
components: { |
||||
VideoPlayer |
||||
}, |
||||
data() { |
||||
return { |
||||
form: {}, |
||||
query: {}, |
||||
loading: true, |
||||
dialogVisible: false, |
||||
page: { |
||||
pageSize: 10, |
||||
currentPage: 1, |
||||
total: 0 |
||||
}, |
||||
selectionList: [], |
||||
option: { |
||||
height: 'auto', |
||||
calcHeight: 30, |
||||
tip: false, |
||||
border: true, |
||||
searchShow: true, |
||||
searchMenuSpan: 6, |
||||
menuWidth: 200, |
||||
viewBtn: true, |
||||
addBtn: false, |
||||
editBtn: false, |
||||
delBtn: false, |
||||
selection: false, |
||||
index: true, |
||||
dialogClickModal: false, |
||||
column: [ |
||||
{ |
||||
label: "设备名称", |
||||
prop: "deviceName", |
||||
}, |
||||
{ |
||||
label: "设备编号", |
||||
prop: "deviceId", |
||||
row: true, |
||||
}, |
||||
{ |
||||
label: "设备类型", |
||||
prop: "productName", |
||||
}, |
||||
{ |
||||
label: "报警类型", |
||||
type: "select", |
||||
dicUrl: "/api/blade-system/dict-biz/dictionary?code=alarm_message_condition", |
||||
props: { |
||||
label: "dictValue", |
||||
value: "dictKey" |
||||
}, |
||||
dataType: "number", |
||||
slot: true, |
||||
prop: "type", |
||||
search: true, |
||||
}, |
||||
{ |
||||
label: "楼号", |
||||
prop: "buildId", |
||||
width: 80 |
||||
}, |
||||
{ |
||||
label: "楼层", |
||||
prop: "floorNo", |
||||
width: 80 |
||||
}, |
||||
{ |
||||
label: "经纬度", |
||||
prop: "xy", |
||||
span: 24, |
||||
hide: true |
||||
}, |
||||
{ |
||||
label: "报警信息", |
||||
prop: "content", |
||||
overHidden: true, |
||||
width: '200' |
||||
}, |
||||
{ |
||||
label: "上报时间", |
||||
prop: "reportTime", |
||||
width: '150' |
||||
}, |
||||
] |
||||
}, |
||||
data: [], |
||||
videoData: [] |
||||
}; |
||||
}, |
||||
computed: { |
||||
ids() { |
||||
let ids = []; |
||||
this.selectionList.forEach(ele => { |
||||
let tags = JSON.parse(ele.tags) |
||||
ids.push(tags.sectorNo); |
||||
}); |
||||
return ids.join(","); |
||||
} |
||||
}, |
||||
mounted() { |
||||
// 添加socket通知监听 |
||||
window.addEventListener('onmessageWS', this.getSocketData) |
||||
}, |
||||
methods: { |
||||
// 收到消息处理 |
||||
getSocketData (res) { |
||||
console.log('websocket', res); |
||||
if (res.detail.data === 'success' || res.detail.data === 'heartBath') return |
||||
// ...业务处理 |
||||
}, |
||||
searchReset() { |
||||
this.query = {}; |
||||
this.onLoad(this.page); |
||||
}, |
||||
searchChange(params, done) { |
||||
this.query = params; |
||||
this.page.currentPage = 1; |
||||
this.onLoad(this.page, params); |
||||
done(); |
||||
}, |
||||
selectionChange(list) { |
||||
this.selectionList = list; |
||||
}, |
||||
selectionClear() { |
||||
this.selectionList = []; |
||||
this.$refs.crud.toggleSelection(); |
||||
}, |
||||
handleDelete() { |
||||
if (this.selectionList.length === 0) { |
||||
this.$message.warning("请选择至少一条数据"); |
||||
return; |
||||
} |
||||
this.$confirm("确定将选择数据删除?", { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
return remove(this.ids); |
||||
}) |
||||
.then(() => { |
||||
this.onLoad(this.page); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "操作成功!" |
||||
}); |
||||
this.$refs.crud.toggleSelection(); |
||||
}); |
||||
}, |
||||
beforeOpen(done, type) { |
||||
done(); |
||||
}, |
||||
currentChange(currentPage) { |
||||
this.page.currentPage = currentPage; |
||||
}, |
||||
sizeChange(pageSize) { |
||||
this.page.pageSize = pageSize; |
||||
}, |
||||
refreshChange() { |
||||
this.onLoad(this.page, this.query); |
||||
}, |
||||
onLoad(page, params = {}) { |
||||
const { releaseTimeRange } = this.query; |
||||
let values = { |
||||
...params, |
||||
...this.query |
||||
}; |
||||
if (releaseTimeRange) { |
||||
values = { |
||||
...values, |
||||
startTime: releaseTimeRange[0], |
||||
endTime: releaseTimeRange[1], |
||||
}; |
||||
values.releaseTimeRange = null; |
||||
} |
||||
this.loading = true; |
||||
getList(page.currentPage, page.pageSize, values).then(res => { |
||||
const data = res.data.data; |
||||
this.page.total = data.total; |
||||
data.records.map(item => { |
||||
item.xy = item.longidute + ',' + item.latidute; |
||||
}) |
||||
this.data = data.records; |
||||
this.loading = false; |
||||
this.selectionClear(); |
||||
}); |
||||
}, |
||||
// 视频联动按钮 |
||||
linkVideo(row) { |
||||
let token = window.sessionStorage.getItem('bizToken'); |
||||
if (token == 'undefined' || !token) { |
||||
bizLogin({ appKey: 'Arf7bd4f26', appSecret: 'kb207044c8' }).then(res => { |
||||
window.sessionStorage.setItem('bizToken', res.data.data.token); |
||||
bizDeviceList(res.data.data.token, { 'params[pmac]': row.deviceId }).then(res2 => { |
||||
const data = res2.data; |
||||
this.videoData = data.rows; |
||||
if(this.videoData.length === 0){ |
||||
this.$message.warning('未查询到该报警点摄像头'); |
||||
} |
||||
else{ |
||||
this.dialogVisible = true; |
||||
} |
||||
}); |
||||
}) |
||||
} else { |
||||
bizDeviceList(token, { 'params[pmac]': row.deviceId }).then(res2 => { |
||||
if (res2.data.code == 401) { |
||||
window.sessionStorage.removeItem('bizToken'); |
||||
this.linkVideo(row); |
||||
} |
||||
else if (res2.data.code == 200) { |
||||
const data = res2.data; |
||||
this.videoData = data.rows; |
||||
if(this.videoData.length === 0){ |
||||
this.$message.warning('未查询到该报警点摄像头'); |
||||
} |
||||
else{ |
||||
this.dialogVisible = true; |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
}, |
||||
// 导出 |
||||
handleExport() { |
||||
let values = { |
||||
deviceType: func.toStr(this.query.type) |
||||
}; |
||||
if (this.query.releaseTimeRange) { |
||||
values = { |
||||
...values, |
||||
startTime: this.queryreleaseTimeRange[0], |
||||
endTime: this.queryreleaseTimeRange[1], |
||||
}; |
||||
} |
||||
let params = ''; |
||||
Object.keys(values).map(key => { |
||||
params = '&' + key + '=' + values[key]; |
||||
}) |
||||
this.$confirm("是否导出报警数据?", "提示", { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning" |
||||
}).then(() => { |
||||
NProgress.start(); |
||||
exportBlob(`/api/alarmInformation/export?${this.website.tokenHeader}=${getToken()}${params}`).then(res => { |
||||
downloadXls(res.data, `报警数据表${dateNow()}.xlsx`); |
||||
NProgress.done(); |
||||
}) |
||||
}); |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.dialog-footer { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.video_dia { |
||||
.video_box { |
||||
width: 100%; |
||||
|
||||
.grid-content { |
||||
width: 100%; |
||||
height: 200px; |
||||
margin-bottom: 18px; |
||||
video { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue