<template>
|
<div class="home">
|
<div class="left_tree border_comon">
|
<h3>
|
<a-icon type="database" />
|
<span>终端列表</span>
|
</h3>
|
<organ-tree ref="orgTree" @on-tree-node-select="onTreeNodeSelect"></organ-tree>
|
</div>
|
<div class="video border_comon">
|
<div class="title">
|
<h3>
|
<!--<div class="icon"></div>-->
|
<a-select
|
v-show="is_one_video"
|
allowClear
|
placeholder="请选择终端设备"
|
style="width: 200px"
|
v-model="selectCameraCode"
|
@change="onCameraChange"
|
>
|
<a-select-option :value="''" :key="''">全部</a-select-option>
|
<a-select-option :value="item.code" v-for="item in cameraList" :key="item.code">
|
{{ item.name }}
|
</a-select-option>
|
</a-select>
|
<a-select
|
mode="multiple"
|
show-search
|
:maxTagCount="4"
|
v-show="!is_one_video"
|
:default-value="1"
|
style="width: 330px"
|
@change="onCategoryChange"
|
v-model="defaultCategoryOptions"
|
>
|
<a-select-option
|
v-for="item in categoryOptions"
|
:disabled="item.disabled"
|
:key="item.value"
|
:value="item.value"
|
>{{ item.label }}
|
</a-select-option>
|
</a-select>
|
<!--<span style="margin-left: 20px">2022-09-29 15:00:00</span>-->
|
</h3>
|
<!--<div class="right_screen">-->
|
<!--<div class="view bg">视图</div>-->
|
<!--<div class="one_screen bg" @click="change_one_video"></div>-->
|
<!--<div class="quad_screen bg" @click="change_four_video"></div>-->
|
<!--</div>-->
|
</div>
|
<div class="video_player">
|
<!-- <video
|
class="one_video"
|
v-show="is_one_video"
|
src="https://prod-streaming-video-msn-com.akamaized.net/a8c412fa-f696-4ff2-9c76-e8ed9cdffe0f/604a87fc-e7bc-463e-8d56-cde7e661d690.mp4"
|
controls
|
></video> -->
|
<!--<div style="text-align: center; font-size: 18px; padding-top: 30px" v-show="!hasVideo">暂无视频</div>-->
|
<img :src="infoObj.imgPath" style="width: 100%;" v-show="!hasVideo" alt="">
|
<div class="one_video" v-show="is_one_video"></div>
|
<div class="four_video_box" v-show="!is_one_video">
|
<div :class="'four_video' + (index + 1)" v-for="(item, index) in defaultCategoryOptions" :key="index"></div>
|
</div>
|
</div>
|
</div>
|
<div class="left_tree right_list border_comon">
|
<h3>
|
<div>
|
<a-icon type="database" />
|
<span>告警记录</span>
|
</div>
|
<div class="right_swich" v-has="'event:audit'">
|
<span>告警语音</span>
|
<a-switch v-model:checked="isSwitch" />
|
</div>
|
</h3>
|
<div class="img_box">
|
<div class="img_list" v-for="(item, index) in takeList" :key="index">
|
<img alt="" @click="handleOk(item)" :src="item.imgPath" />
|
<div class="img_content">
|
<div class="left_text">
|
<div>
|
告警类型:<span>{{ item.algorithmName }}</span>
|
</div>
|
<div>
|
告警设备:<span>{{ item.cameraName }}</span>
|
</div>
|
<div>
|
告警时间:<span>{{ item.createTime }}</span>
|
</div>
|
</div>
|
<div v-if="item.auditResult === 0" class="right_button">未处置</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 告警详情 -->
|
<AnalysisDetailModal :visible="show" @modalClose="modalClose" :infoObj="infoObj" />
|
</div>
|
</template>
|
|
<script>
|
import AnalysisDetailModal from '../alarmQuery/components/AnalysisDetailModal.vue'
|
import OrganTree from '../tools/OrganTree'
|
import { getAction } from '@tievd/cube-block/lib/api/manage'
|
export default {
|
components: {
|
OrganTree,
|
AnalysisDetailModal,
|
},
|
|
data() {
|
return {
|
selectOrg: '',
|
show: false,
|
hasVideo: false,
|
isSwitch: false,
|
is_one_video: true,
|
infoObj: {},
|
cameraList: [],
|
selectCameraCode: '',
|
videoConfig: {
|
variable: 'player',
|
backLive: false,
|
track: null,
|
crossorigin: '',
|
playbackrateOpen: true,
|
autoplay: true,
|
loop: true,
|
video: '',
|
},
|
categoryOptions: [
|
{
|
value: 1,
|
label: '设备1',
|
},
|
{
|
value: 2,
|
label: '设备2',
|
},
|
{
|
value: 3,
|
label: '设备3',
|
},
|
{
|
value: 4,
|
label: '设备4',
|
},
|
{
|
value: 5,
|
label: '设备5',
|
},
|
],
|
defaultCategoryOptions: [1, 2, 3, 4],
|
takeList: [],
|
url: {
|
list: '/jyz/oilEvent/eventList',
|
eventPopup: '/jyz/oilEvent/eventPopup',
|
localVideoRandom: '/jyz/video/random',
|
randomImages: '/jyz/video/random-images',
|
},
|
}
|
},
|
|
watch: {
|
$route(to, from) {
|
console.log(to)
|
this.timer && clearInterval(this.timer)
|
},
|
},
|
created() {
|
this.alarmLogInit(true)
|
},
|
mounted() {
|
// this.one_video_ckplayera()
|
this.getCameraList()
|
this.getLocalVideo()
|
this.timer = setInterval(this.playAudio, 30000)
|
},
|
|
methods: {
|
// 获取本地随机视频
|
getLocalVideo() {
|
getAction(this.url.localVideoRandom).then((res) => {
|
if (res.code === 200 && res.result) {
|
this.hasVideo = true
|
this.eventVideoPlay(res.result)
|
}
|
})
|
},
|
assignRandomImages(recordList) {
|
if (!recordList || !recordList.length) {
|
return Promise.resolve([])
|
}
|
return getAction(this.url.randomImages, { count: recordList.length })
|
.then((imageRes) => {
|
if (imageRes.code === 200 && Array.isArray(imageRes.result) && imageRes.result.length) {
|
return recordList.map((item, index) => {
|
const newItem = {
|
...item,
|
imgPath: imageRes.result[index % imageRes.result.length],
|
}
|
if (item.videoPath && item.videoPath.startsWith('/video/')) {
|
const baseUrl = window.location.origin
|
newItem.videoPath = baseUrl + '/cube/jyz/video/stream/' + item.videoPath.replace('/video/', '')
|
}
|
return newItem
|
})
|
}
|
return recordList
|
})
|
.catch(() => recordList)
|
},
|
|
// Alarm Log 告警记录
|
alarmLogInit(isFirst) {
|
getAction(this.url.list, { limit: 20, cameraCode: this.selectCameraCode }).then((res) => {
|
if (res.code === 200) {
|
const sourceList = Array.isArray(res.result) ? res.result : []
|
this.assignRandomImages(sourceList).then((finalList) => {
|
this.takeList = finalList
|
if (finalList.length > 0 && isFirst) {
|
if (finalList[0].videoPath) {
|
this.hasVideo = true
|
this.eventVideoPlay(finalList[0].videoPath)
|
} else {
|
this.hasVideo = false
|
this.player && this.player.remove()
|
}
|
}
|
})
|
} else {
|
this.$message.error('获取失败!')
|
}
|
})
|
},
|
//首页自动播报
|
playAudio() {
|
getAction(this.url.eventPopup, {}).then((res) => {
|
this.modalClose()
|
if (res.code == 200 && res.result) {
|
//弹窗
|
this.modalShow(res.result)
|
this.voicePlay(res.result.cameraName + '拍摄到' + res.result.algorithmName + '问题')
|
// window.addEventListener('scroll', this.handleScroll)
|
}
|
})
|
},
|
//播放文字阅读声音
|
voicePlay(word) {
|
if (!this.isSwitch) {
|
return
|
}
|
// let url = "https://tts.baidu.com/text2audio?cuid=baike&spd=5&lan=ZH&ctp=1&pdt=301&vol=4&rate=32&per=0&tex=' "+ encodeURI(word);
|
// let n = new Audio(url);
|
// n.src = url;
|
// n.play();//播放阅读
|
|
var to_speak = new SpeechSynthesisUtterance(word)
|
window.speechSynthesis.speak(to_speak)
|
},
|
//告警视频播放
|
eventVideoPlay(video) {
|
this.videoConfig.video = video
|
this.player && this.player.remove()
|
var videoObject = {
|
...this.videoConfig,
|
container: '.one_video',
|
}
|
this.player = new ckplayer(videoObject)
|
},
|
handleScroll() {},
|
onCameraChange() {
|
this.alarmLogInit(false)
|
this.getLocalVideo()
|
},
|
onTreeNodeSelect(id, node) {
|
this.selectOrg = node.selectedNodes[0].data.props.orgCode
|
console.log(id, this.selectOrg)
|
console.log(this.selectOrg)
|
this.getCameraList()
|
},
|
// 打开弹窗
|
handleOk(data) {
|
console.log(data)
|
if (data.videoPath) {
|
this.hasVideo = true
|
this.eventVideoPlay(data.videoPath)
|
} else {
|
this.hasVideo = false
|
this.player && this.player.remove()
|
}
|
this.modalShow(data)
|
},
|
modalShow(data) {
|
this.show = true
|
let { eventAddress } = data
|
data.eventAddress = eventAddress ? Number(eventAddress) : eventAddress
|
this.infoObj = data
|
},
|
// 关闭弹窗
|
modalClose(data) {
|
this.show = false
|
if (data) this.alarmLogInit() //有返回值代表请求成功
|
},
|
// //告警语音开关
|
// onChange(val) {
|
// console.log(val)
|
// this.isSwitch = true;
|
// },
|
|
change_one_video() {
|
if (!this.is_one_video) {
|
this.is_one_video = true
|
this.$nextTick(() => {
|
this.one_video_ckplayera()
|
})
|
}
|
},
|
change_four_video() {
|
if (this.is_one_video) {
|
this.is_one_video = false
|
this.$nextTick(() => {
|
this.four_video_ckplayera()
|
})
|
}
|
},
|
// 一分屏播放视频插件
|
one_video_ckplayera() {
|
getAction('/jyz/oilEvent/getVideoUrl', { cameraCode: '' }).then((res) => {
|
if (res.code == 200) {
|
this.videoConfig.video = res.result
|
}
|
var videoObject = {
|
...this.videoConfig, // 通用配置
|
container: '.one_video', //“#”代表容器的ID，“.”或“”代表容器的class
|
}
|
this.player = new ckplayer(videoObject) //初始化播放器
|
})
|
},
|
// 四分屏播放插件
|
four_video_ckplayera() {
|
let arr = []
|
this.defaultCategoryOptions.forEach((item) => {
|
this.categoryOptions.forEach((child) => {
|
if (item == child.value) arr.push(child)
|
})
|
})
|
arr.forEach((item, index) => {
|
// console.log(item)
|
var videoObject = {
|
...this.videoConfig, // 通用配置
|
container: '.four_video' + (index + 1), //容器的ID或className
|
}
|
new ckplayer(videoObject)
|
})
|
},
|
onCategoryChange(value) {
|
console.log(value)
|
this.setCategoryOptions(value)
|
console.log(this.defaultCategoryOptions)
|
this.$nextTick(() => {
|
this.four_video_ckplayera()
|
})
|
},
|
setCategoryOptions(value = []) {
|
if (value.length >= 4) {
|
this.categoryOptions.forEach((item, index, array) => {
|
if (value.every((v) => v !== item.value)) {
|
this.$set(array[index], 'disabled', true)
|
} else {
|
this.$set(array[index], 'disabled', false)
|
}
|
})
|
} else {
|
this.categoryOptions.forEach((item, index, array) => {
|
this.$set(array[index], 'disabled', false)
|
})
|
}
|
},
|
// 获取视频终端
|
getCameraList() {
|
getAction('/jyz/camera/allList', { orgCode: this.selectOrg }).then((res) => {
|
this.cameraList = res.result
|
})
|
},
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.home {
|
margin-top: 20px;
|
font-family: SimHei;
|
display: flex;
|
justify-content: space-between;
|
height: 82vh;
|
.border_comon {
|
background: linear-gradient(40deg, rgba(38, 43, 53, 0.6), rgba(31, 35, 43, 0.6));
|
border: 1px solid rgba(224, 226, 231, 0.1);
|
box-shadow: 0px 5px 22px 0px rgba(0, 0, 0, 0.1);
|
border-radius: 16px;
|
}
|
.left_tree {
|
font-size: 13px;
|
|
font-weight: 400;
|
color: #5e636e;
|
padding: 35px 25px;
|
width: 15%;
|
h3 {
|
margin-bottom: 22px;
|
span {
|
margin-left: 8px;
|
color: #ffffff;
|
font-size: 16px;
|
}
|
}
|
}
|
.video {
|
width: 67%;
|
padding: 33px 27px;
|
.title {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 10px;
|
h3 {
|
display: flex;
|
align-items: center;
|
font-size: 16px;
|
font-family: Adobe Heiti Std;
|
font-weight: normal;
|
color: #ffffff;
|
span {
|
margin-right: 10px;
|
}
|
.icon {
|
width: 10px;
|
height: 10px;
|
border-radius: 50%;
|
margin-right: 9px;
|
background: #2fb195;
|
}
|
}
|
.right_screen {
|
display: flex;
|
font-size: 10px;
|
font-weight: 400;
|
color: #ffffff;
|
.bg {
|
background: linear-gradient(-25deg, #66696f, #cecece);
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
}
|
.view {
|
text-align: center;
|
width: 40px;
|
height: 21px;
|
margin-right: 7px;
|
line-height: 21px;
|
}
|
.one_screen {
|
width: 21px;
|
height: 21px;
|
margin-right: 7px;
|
cursor: pointer;
|
}
|
.quad_screen {
|
position: relative;
|
width: 21px;
|
height: 21px;
|
cursor: pointer;
|
&::before {
|
position: absolute;
|
content: '';
|
width: 22px;
|
height: 1px;
|
display: inline-block;
|
top: 9px;
|
left: -1px;
|
background: #000;
|
}
|
&::after {
|
position: absolute;
|
content: '';
|
width: 1px;
|
height: 22px;
|
display: inline-block;
|
top: -1px;
|
left: 9px;
|
background: #000;
|
}
|
}
|
}
|
}
|
.video_player {
|
width: 100%;
|
height: 100%;
|
padding-bottom: 33px;
|
.one_video {
|
width: 59.4vw;
|
max-width: 100%;
|
height: 100%;
|
}
|
.four_video_box {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
|
div {
|
width: 30vw;
|
max-width: 49.2%;
|
height: 49.2%;
|
margin-bottom: 14px;
|
}
|
}
|
}
|
}
|
.right_list {
|
padding-right: 10px;
|
h3 {
|
display: flex;
|
justify-content: space-between;
|
.right_swich {
|
display: flex;
|
align-items: center;
|
.ant-switch {
|
background-color: #343a44;
|
&::after {
|
background-color: #597df3;
|
}
|
}
|
.ant-switch-checked {
|
background-color: #5a76e7;
|
&::after {
|
background-color: #f7f9fa;
|
}
|
}
|
|
span {
|
margin-right: 10px;
|
font-size: 13px;
|
font-family: PingFang;
|
font-weight: 800;
|
color: #6f737a;
|
}
|
}
|
}
|
|
.img_box {
|
width: 100%;
|
height: 71vh;
|
overflow-y: auto;
|
padding-right: 10px;
|
padding-bottom: 20px;
|
.img_list {
|
width: 100%;
|
line-height: 24px;
|
margin-bottom: 12px;
|
img {
|
width: 100%;
|
height: 121px;
|
object-fit: cover;
|
display: inline-block;
|
margin-bottom: 16px;
|
cursor: pointer;
|
}
|
span {
|
color: #bdbfc4;
|
}
|
.img_content {
|
display: flex;
|
justify-content: space-between;
|
position: relative;
|
.right_button {
|
width: 51px;
|
height: 20px;
|
background: #9d3535;
|
border: 1px solid #c63939;
|
text-align: center;
|
line-height: 20px;
|
color: #fee1e1;
|
font-size: 12px;
|
cursor: pointer;
|
position: absolute;
|
right: 0;
|
top: 0;
|
}
|
.left_text {
|
width: 90%;
|
div {
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
