changtong
6 months ago
14 changed files with 830 additions and 477 deletions
@ -1,447 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 停车场 --> |
|
||||
<div class="eb-container" ref="appRef"> |
|
||||
<MainTitle class="title" :title="title"></MainTitle> |
|
||||
<div class="map-box"> |
|
||||
<div class="title-box-1350" style="width: 1200px"> |
|
||||
<span>停车场地图</span> |
|
||||
</div> |
|
||||
<div class="content-info"> |
|
||||
<gis-map |
|
||||
pointType="停车场" |
|
||||
:point-list="pointList" |
|
||||
listItemKey="deviceName" |
|
||||
:zoom="9.9" |
|
||||
@currentPoint="currentPointFn" |
|
||||
></gis-map> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="park-list" @click="changeVideo"> |
|
||||
<div class="title-box-1350" style="width: 1200px"> |
|
||||
<span>停车场列表</span> |
|
||||
</div> |
|
||||
<div class="content-info"> |
|
||||
<vue-seamless-scroll |
|
||||
:data="parkList" |
|
||||
:class-option="leftOptionHover" |
|
||||
style="width: 100%; height: 100%; overflow: hidden" |
|
||||
> |
|
||||
<div |
|
||||
style=" |
|
||||
height: 190px; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
" |
|
||||
> |
|
||||
<div |
|
||||
class="camera-picture-item" |
|
||||
v-for="(item, index) in parkList" |
|
||||
:data-index="index" |
|
||||
:key="index" |
|
||||
> |
|
||||
<div |
|
||||
:data-index="index" |
|
||||
style=" |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
position: relative; |
|
||||
" |
|
||||
> |
|
||||
<img |
|
||||
:src="item.deviceImg" |
|
||||
style="width: 336px; height: 190px" |
|
||||
:data-index="index" |
|
||||
/> |
|
||||
<div class="pic-box" :data-index="index"> |
|
||||
{{ item.deviceName }} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</vue-seamless-scroll> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="right" v-if="rightLoad"> |
|
||||
<div class="title-box-680" style="width: 600px"> |
|
||||
<span>停车场详情</span> |
|
||||
</div> |
|
||||
<div class="content-info"> |
|
||||
<div class="content-info-title"> |
|
||||
<span |
|
||||
style="font-size: 24px; color: #fff; font-weight: bold" |
|
||||
>{{ currentPark.deviceName }}</span |
|
||||
> |
|
||||
<span style="font-size: 18px; color: #c9c9c9">停车场</span> |
|
||||
</div> |
|
||||
<div class="park-count-box"> |
|
||||
<div |
|
||||
class="park-count-item" |
|
||||
style="background-color: rgba(40, 132, 146, 0.4)" |
|
||||
> |
|
||||
<div style="width: 100%; margin-top: 20px">总车位</div> |
|
||||
<div |
|
||||
style=" |
|
||||
width: 100%; |
|
||||
font-size: 30px; |
|
||||
font-family: 'shiShangHeiTi'; |
|
||||
" |
|
||||
> |
|
||||
100 |
|
||||
</div> |
|
||||
</div> |
|
||||
<div |
|
||||
class="park-count-item" |
|
||||
style="background-color: rgba(193, 53, 70, 0.3)" |
|
||||
> |
|
||||
<div style="width: 100%; margin-top: 20px"> |
|
||||
已停车位 |
|
||||
</div> |
|
||||
<div |
|
||||
style=" |
|
||||
width: 100%; |
|
||||
font-size: 30px; |
|
||||
font-family: 'shiShangHeiTi'; |
|
||||
" |
|
||||
> |
|
||||
20 |
|
||||
</div> |
|
||||
</div> |
|
||||
<div |
|
||||
class="park-count-item" |
|
||||
style="background-color: rgba(28, 125, 78, 0.4)" |
|
||||
> |
|
||||
<div style="width: 100%; margin-top: 20px"> |
|
||||
剩余车位 |
|
||||
</div> |
|
||||
<div |
|
||||
style=" |
|
||||
width: 100%; |
|
||||
font-size: 30px; |
|
||||
font-family: 'shiShangHeiTi'; |
|
||||
" |
|
||||
> |
|
||||
80 |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="content-info-content" style="margin-top: 20px"> |
|
||||
<span style="font-size: 24px; color: #fff">基础信息</span> |
|
||||
<div |
|
||||
style="margin-top: 10px; display: flex" |
|
||||
v-if="currentPark.imgList" |
|
||||
> |
|
||||
<span |
|
||||
style=" |
|
||||
font-size: 18px; |
|
||||
color: #c9c9c9; |
|
||||
display: inline-block; |
|
||||
width: 60px; |
|
||||
" |
|
||||
>图集: |
|
||||
</span> |
|
||||
<div |
|
||||
style=" |
|
||||
font-size: 18px; |
|
||||
color: #fff; |
|
||||
display: inline-block; |
|
||||
width: calc(100% - 100px); |
|
||||
" |
|
||||
> |
|
||||
<Carousel |
|
||||
autoplay |
|
||||
v-model="carouselValue" |
|
||||
style="width: 100%; height: 250px" |
|
||||
loop |
|
||||
> |
|
||||
<CarouselItem |
|
||||
v-for="(item, index) in currentPark.imgList" |
|
||||
:key="index" |
|
||||
v-viewer |
|
||||
> |
|
||||
<img |
|
||||
style="width: 100%; height: 250px" |
|
||||
:src="item" |
|
||||
/> |
|
||||
</CarouselItem> |
|
||||
</Carousel> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div |
|
||||
style="margin-top: 10px; display: flex" |
|
||||
v-if="currentPark.address" |
|
||||
> |
|
||||
<span |
|
||||
style=" |
|
||||
font-size: 18px; |
|
||||
color: #c9c9c9; |
|
||||
display: inline-block; |
|
||||
width: 60px; |
|
||||
" |
|
||||
>地址: |
|
||||
</span> |
|
||||
<span |
|
||||
style=" |
|
||||
font-size: 18px; |
|
||||
color: #fff; |
|
||||
display: inline-block; |
|
||||
width: calc(100% - 100px); |
|
||||
" |
|
||||
>{{ currentPark.address }}</span |
|
||||
> |
|
||||
</div> |
|
||||
<div |
|
||||
style="margin-top: 10px; display: flex" |
|
||||
v-if="currentPark.info" |
|
||||
> |
|
||||
<span |
|
||||
style=" |
|
||||
font-size: 18px; |
|
||||
color: #c9c9c9; |
|
||||
display: inline-block; |
|
||||
width: 60px; |
|
||||
" |
|
||||
>简介: |
|
||||
</span> |
|
||||
<span |
|
||||
style=" |
|
||||
font-size: 18px; |
|
||||
color: #fff; |
|
||||
display: inline-block; |
|
||||
width: calc(100% - 100px); |
|
||||
" |
|
||||
>{{ currentPark.info }}</span |
|
||||
> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="page-bottom-bg"></div> |
|
||||
<commonModal |
|
||||
v-model="videoState" |
|
||||
:title="currentPark.deviceName" |
|
||||
width="800" |
|
||||
> |
|
||||
<div style="width: 100%; display: flex; flex-direction: column"> |
|
||||
<CommonLivePlayer |
|
||||
:videoUrl="currentPark.url" |
|
||||
autoplay |
|
||||
:live="true" |
|
||||
></CommonLivePlayer> |
|
||||
</div> |
|
||||
</commonModal> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { useIndex } from "../../utils/utilsDramAdmin"; |
|
||||
import MainTitle from "./components/MainTitle.vue"; |
|
||||
import vueSeamlessScroll from "vue-seamless-scroll"; |
|
||||
import gisMap from "./components/gisMapOfCounty.vue"; |
|
||||
import commonModal from "@/views/common-components/common-modal.vue"; |
|
||||
import CommonLivePlayer from "@/views/common-components/common-live-player.vue"; |
|
||||
|
|
||||
export default { |
|
||||
name: "CarPark", |
|
||||
components: { |
|
||||
MainTitle, |
|
||||
vueSeamlessScroll, |
|
||||
gisMap, |
|
||||
commonModal, |
|
||||
CommonLivePlayer, |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
title: "停车场", |
|
||||
parkList: [ |
|
||||
{ |
|
||||
deviceImg: |
|
||||
"http://60.255.197.62:9080/api/device/query/snap/51072600002002247164/51072600981310001012", |
|
||||
deviceName: "某某停车场", |
|
||||
url: "http://60.255.197.62:18089/rtp/51072600002002247164_51072600981310001012.live.mp4", |
|
||||
address: |
|
||||
"四川省某某路某某路某某路某某路某某路某某路某某路某某路某某路某某路某某路某某路某某路某某路某某路某某路某某路", |
|
||||
info: "收费半小时免费，超过半小时，一小时2元。", |
|
||||
imgList: [ |
|
||||
"http://60.255.197.62:9080/api/device/query/snap/51072600002002247164/51072600981310001012", |
|
||||
"http://60.255.197.62:9080/api/device/query/snap/51072600002002247164/51072600981310001012", |
|
||||
], |
|
||||
lnglat: [105.440798, 28.100057], |
|
||||
}, |
|
||||
{ |
|
||||
deviceImg: |
|
||||
"http://60.255.197.62:9080/api/device/query/snap/51072600002002247164/51072600981310001012", |
|
||||
deviceName: "某某停车场", |
|
||||
url: "http://60.255.197.62:18089/rtp/51072600002002247164_51072600981310001012.live.mp4", |
|
||||
address: |
|
||||
"四川省某某路某某路某某路某某路某某路某某路某某路某某路某某路某某路某某路某某路某某路某某路某某路某某路某某路", |
|
||||
info: "收费半小时免费，超过半小时，一小时2元。", |
|
||||
imgList: [ |
|
||||
"http://60.255.197.62:9080/api/device/query/snap/51072600002002247164/51072600981310001012", |
|
||||
"http://60.255.197.62:9080/api/device/query/snap/51072600002002247164/51072600981310001012", |
|
||||
], |
|
||||
lnglat: [105.440798, 28.100057], |
|
||||
}, |
|
||||
], |
|
||||
pointList: [], |
|
||||
leftOptionHover: { |
|
||||
step: 0.2, // 数值越大速度滚动越快 |
|
||||
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length |
|
||||
hoverStop: false, // 是否开启鼠标悬停stop |
|
||||
direction: 2, // 0向下 1向上 2向左 3向右 |
|
||||
openWatch: true, // 开启数据实时监控刷新dom |
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
|
||||
waitTime: 1000, // 单步运动停止的时间(默认值1000ms) |
|
||||
}, |
|
||||
currentPark: {}, |
|
||||
videoState: false, |
|
||||
carouselValue: 0, |
|
||||
rightLoad: false |
|
||||
}; |
|
||||
}, |
|
||||
computed: {}, |
|
||||
created() {}, |
|
||||
mounted() { |
|
||||
const { calcRate, windowDraw } = useIndex(this.$refs.appRef); |
|
||||
calcRate(); |
|
||||
windowDraw(); |
|
||||
this.queryParkList(); |
|
||||
}, |
|
||||
beforeDestroy() {}, |
|
||||
methods: { |
|
||||
currentPointFn (data) { |
|
||||
this.currentPark = data; |
|
||||
this.videoState = true; |
|
||||
}, |
|
||||
changeVideo(e) { |
|
||||
|
|
||||
this.rightLoad = false |
|
||||
let index = e.target.dataset.index; |
|
||||
let data = this.parkList[index]; |
|
||||
this.pointList = [data]; |
|
||||
this.currentPark = data; |
|
||||
setTimeout(() => { |
|
||||
this.rightLoad = true |
|
||||
}, 100); |
|
||||
}, |
|
||||
queryParkList () { |
|
||||
this.rightLoad = false |
|
||||
if (this.parkList[0]) { |
|
||||
this.pointList = [this.parkList[0]]; |
|
||||
this.currentPark = this.parkList[0] |
|
||||
setTimeout(() => { |
|
||||
this.rightLoad = true |
|
||||
}, 100); |
|
||||
} |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="less" scoped> |
|
||||
@import "../../styles/pbStyle.less"; |
|
||||
.eb-container { |
|
||||
width: 1920px; |
|
||||
height: 1080px; |
|
||||
transform: scale(var(--scale)) translate(-50%, -50%); |
|
||||
transform-origin: 0 0; |
|
||||
position: absolute; |
|
||||
left: 50%; |
|
||||
top: 50%; |
|
||||
background-image: url("../../assets/largeScreen/page-bg.png"); |
|
||||
background-size: 100%; |
|
||||
.map-box { |
|
||||
position: fixed; |
|
||||
top: 100px; |
|
||||
left: 50px; |
|
||||
width: 1200px; |
|
||||
height: 675px; |
|
||||
.content-info { |
|
||||
.content-pub-style(100%, calc(100% - 42px)); |
|
||||
position: relative; |
|
||||
} |
|
||||
} |
|
||||
.park-list { |
|
||||
width: 1200px; |
|
||||
height: 240px; |
|
||||
position: fixed; |
|
||||
top: 785px; |
|
||||
left: 50px; |
|
||||
.content-info { |
|
||||
.content-pub-style(100%, calc(100% - 42px)); |
|
||||
padding: 4px 0; |
|
||||
} |
|
||||
.camera-picture-item { |
|
||||
width: 336px; |
|
||||
height: 190px; |
|
||||
margin-left: 15px; |
|
||||
cursor: pointer; |
|
||||
|
|
||||
.pic-box { |
|
||||
width: 100%; |
|
||||
position: absolute; |
|
||||
bottom: 0; |
|
||||
font-size: 24px; |
|
||||
color: white; |
|
||||
text-align: center; |
|
||||
line-height: 38px; |
|
||||
background-color: rgba(0, 0, 0, 0.4); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.right { |
|
||||
position: fixed; |
|
||||
top: 100px; |
|
||||
right: 50px; |
|
||||
width: 600px; |
|
||||
height: 925px; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
|
|
||||
.content-info { |
|
||||
.content-pub-style(100%, calc(100% - 42px)); |
|
||||
padding: 10px 20px; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
color: #ffffff; |
|
||||
overflow-y: auto; |
|
||||
&::-webkit-scrollbar { |
|
||||
display: none; |
|
||||
} |
|
||||
.content-info-title { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
gap: 10px; |
|
||||
} |
|
||||
.park-count-box { |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
margin-top: 10px; |
|
||||
|
|
||||
.park-count-item { |
|
||||
width: 183px; |
|
||||
height: 120px; |
|
||||
background-color: #00feff; |
|
||||
text-align: center; |
|
||||
font-size: 22px; |
|
||||
border-radius: 5px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@keyframes slideRightIn { |
|
||||
from { |
|
||||
transform: translateX(100%); |
|
||||
} |
|
||||
|
|
||||
to { |
|
||||
transform: translateX(0); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.right { |
|
||||
animation: slideRightIn 1s forwards; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,104 @@ |
|||||
|
<template> |
||||
|
<div class="container"> |
||||
|
<div class="main"> |
||||
|
<span class="device-name" v-if="alarmInfo.deviceName">{{ alarmInfo.deviceName }}</span> |
||||
|
<div class="track-time" > |
||||
|
<span>告警类型：{{ alarmInfo.type }}</span> |
||||
|
<span style="margin-left: 100px;">{{ alarmInfo.happenTime }}</span> |
||||
|
</div> |
||||
|
<span class="warring-info" v-if="alarmInfo.info">{{ alarmInfo.info }}</span> |
||||
|
<img v-for="(item, index) in alarmInfo.picture" :key="index" :src="item" style="margin-top: 10px;width: 70%;" /> |
||||
|
<!-- <img |
||||
|
v-if="alarmInfo.picture" |
||||
|
:src="alarmInfo.picture" |
||||
|
style="width: 622px; height: 350px" |
||||
|
/> --> |
||||
|
<div class="video" v-if="alarmInfo.url"> |
||||
|
<CommonLivePlayer :live="true" :video-url="alarmInfo.url"></CommonLivePlayer> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import CommonLivePlayer from "@/views/common-components/common-live-player.vue"; |
||||
|
export default { |
||||
|
name: "alarm-dig", |
||||
|
components: { CommonLivePlayer }, |
||||
|
props: { |
||||
|
alarmInfo: { |
||||
|
type: Object, |
||||
|
default: {}, |
||||
|
}, |
||||
|
videoUrl: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
imgIndex: 0, |
||||
|
}; |
||||
|
}, |
||||
|
methods: {}, |
||||
|
mounted () { |
||||
|
console.log(this.alarmInfo) |
||||
|
}, |
||||
|
watch: {}, |
||||
|
beforeDestroy() {}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.container { |
||||
|
width: 100%; |
||||
|
height: 600px; |
||||
|
background: url("../../../../assets/largeScreen/e-bg1.png") no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
text-align: center; |
||||
|
padding: 64px 75px 20px 75px; |
||||
|
|
||||
|
.main { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
overflow: hidden; |
||||
|
overflow-y: scroll; |
||||
|
|
||||
|
&::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
.device-name { |
||||
|
font-family: PingFang SC; |
||||
|
font-size: 26px; |
||||
|
font-weight: 400; |
||||
|
margin: 5px 0; |
||||
|
color: #fad03b; |
||||
|
} |
||||
|
.track-time { |
||||
|
font-family: PingFang SC; |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
color: #fad03b; |
||||
|
padding: 5px 0; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.warring-info { |
||||
|
font-family: PingFang SC; |
||||
|
font-size: 20px; |
||||
|
font-weight: 700; |
||||
|
color: #ff4747; |
||||
|
margin-top: 20px; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
.video { |
||||
|
width: 750px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,108 @@ |
|||||
|
<template> |
||||
|
<div class="container"> |
||||
|
<div class="main" v-viewer> |
||||
|
<span class="device-name" v-if="alarmInfo.deviceName">{{ |
||||
|
alarmInfo.deviceName |
||||
|
}}</span> |
||||
|
<div class="track-time"> |
||||
|
<span>告警类型：{{ alarmInfo.type }}</span> |
||||
|
<span style="margin-left: 100px">{{ |
||||
|
alarmInfo.happenTime |
||||
|
}}</span> |
||||
|
</div> |
||||
|
<span class="warring-info" v-if="alarmInfo.info">{{ |
||||
|
alarmInfo.info |
||||
|
}}</span> |
||||
|
<img v-for="(item, index) in alarmInfo.picture" :key="index" :src="item" style="margin-top: 10px;width: 70%;" /> |
||||
|
<div class="video" v-if="alarmInfo.url"> |
||||
|
<CommonLivePlayer |
||||
|
:live="true" |
||||
|
:video-url="alarmInfo.url" |
||||
|
></CommonLivePlayer> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import CommonLivePlayer from "@/views/common-components/common-live-player.vue"; |
||||
|
export default { |
||||
|
name: "alarm-dig", |
||||
|
components: { CommonLivePlayer }, |
||||
|
props: { |
||||
|
alarmInfo: { |
||||
|
type: Object, |
||||
|
default: {}, |
||||
|
}, |
||||
|
videoUrl: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
imgIndex: 0, |
||||
|
}; |
||||
|
}, |
||||
|
methods: {}, |
||||
|
mounted() { |
||||
|
console.log(this.alarmInfo); |
||||
|
}, |
||||
|
watch: {}, |
||||
|
beforeDestroy() {}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.container { |
||||
|
width: 100%; |
||||
|
height: 600px; |
||||
|
// background: url("../../../../assets/largeScreen/e-bg1.png") no-repeat; |
||||
|
// background-size: 100% 100%; |
||||
|
text-align: center; |
||||
|
// padding: 64px 75px 20px 75px; |
||||
|
|
||||
|
.main { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
overflow: hidden; |
||||
|
overflow-y: scroll; |
||||
|
|
||||
|
&::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
.device-name { |
||||
|
font-family: PingFang SC; |
||||
|
font-size: 26px; |
||||
|
font-weight: 400; |
||||
|
margin: 5px 0; |
||||
|
color: #fad03b; |
||||
|
} |
||||
|
.track-time { |
||||
|
font-family: PingFang SC; |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
color: #fad03b; |
||||
|
padding: 5px 0; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.warring-info { |
||||
|
font-family: PingFang SC; |
||||
|
font-size: 20px; |
||||
|
font-weight: 700; |
||||
|
color: #ff4747; |
||||
|
margin-top: 20px; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
.video { |
||||
|
width: 750px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,553 @@ |
|||||
|
<template> |
||||
|
<!-- 应急扩展 --> |
||||
|
<div class="eb-container" ref="appRef"> |
||||
|
<MainTitle class="mainTitle" :title="title"></MainTitle> |
||||
|
<div class="video-box"> |
||||
|
<!-- <commonLivePlayer |
||||
|
:videoUrl="videoUrl" |
||||
|
:live="true" |
||||
|
></commonLivePlayer> --> |
||||
|
<video-one :tree-node="videoItem"></video-one> |
||||
|
</div> |
||||
|
<div class="video-list" @click="changeVideo"> |
||||
|
<vue-seamless-scroll |
||||
|
:data="videoList" |
||||
|
:class-option="leftOptionHover" |
||||
|
> |
||||
|
<div style="height: 150px; display: flex; flex-direction: row"> |
||||
|
<!-- <div |
||||
|
class="camera-picture-item" |
||||
|
v-for="(item, index) in videoList" |
||||
|
:data-index="index" |
||||
|
:key="index" |
||||
|
> |
||||
|
<div |
||||
|
:data-index="index" |
||||
|
style=" |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
" |
||||
|
> |
||||
|
<img |
||||
|
:src="item.deviceImg" |
||||
|
style="width: 425px; height: 240px" |
||||
|
:data-index="index" |
||||
|
/> |
||||
|
<div class="pic-box" :data-index="index"> |
||||
|
{{ item.deviceName }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
<div |
||||
|
class="video-item" |
||||
|
v-for="(item, index) in videoList" |
||||
|
:data-index="index" |
||||
|
:key="index" |
||||
|
> |
||||
|
<div class="video-title" :data-index="index"> |
||||
|
{{ item.deviceName }} |
||||
|
</div> |
||||
|
<div style="display: flex" :data-index="index"> |
||||
|
<Tag |
||||
|
:data-index="index" |
||||
|
v-for="(data, i) in item.tags" |
||||
|
:key="i" |
||||
|
>{{ data }}</Tag |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</vue-seamless-scroll> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<div class="title-box-680" style="width: 550px"> |
||||
|
<span>预警信息</span> |
||||
|
</div> |
||||
|
<div class="content-info"> |
||||
|
<div class="alarm-info-count-box"> |
||||
|
<div |
||||
|
class="alarm-info-count-item" |
||||
|
style="background-color: rgba(28, 125, 78, 0.4)" |
||||
|
> |
||||
|
<div style="width: 100%; margin-top: 20px"> |
||||
|
当天预警次数 |
||||
|
</div> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 100%; |
||||
|
font-size: 30px; |
||||
|
font-family: 'shiShangHeiTi'; |
||||
|
" |
||||
|
> |
||||
|
{{ conutInfo.dayNum }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div |
||||
|
class="alarm-info-count-item" |
||||
|
style="background-color: rgba(40, 132, 146, 0.4)" |
||||
|
> |
||||
|
<div style="width: 100%; margin-top: 20px"> |
||||
|
近7日预警次数 |
||||
|
</div> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 100%; |
||||
|
font-size: 30px; |
||||
|
font-family: 'shiShangHeiTi'; |
||||
|
" |
||||
|
> |
||||
|
{{ conutInfo.weekNum }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div |
||||
|
class="alarm-info-count-item" |
||||
|
style="background-color: rgba(193, 53, 70, 0.3)" |
||||
|
> |
||||
|
<div style="width: 100%; margin-top: 20px"> |
||||
|
近30日预警次数 |
||||
|
</div> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 100%; |
||||
|
font-size: 30px; |
||||
|
font-family: 'shiShangHeiTi'; |
||||
|
" |
||||
|
> |
||||
|
{{ conutInfo.monthNum }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="width: 100%; height: 735px"> |
||||
|
<div class="new-alarm-box"> |
||||
|
<div class="new-alarm-title">预警设备</div> |
||||
|
<div class="new-alarm-desc">预警IP</div> |
||||
|
<div class="new-alarm-desc">预警时间</div> |
||||
|
<div class="new-alarm-desc">预警信息</div> |
||||
|
</div> |
||||
|
<div |
||||
|
class="alarm-record-box" |
||||
|
@click="openAlarmModal" |
||||
|
v-if="alarmInfoList.length > 0" |
||||
|
> |
||||
|
<vue-seamless-scroll |
||||
|
:data="alarmInfoList" |
||||
|
:class-option="topOptionHover" |
||||
|
> |
||||
|
<div |
||||
|
class="alarm-record-item" |
||||
|
v-for="(item, index) in alarmInfoList" |
||||
|
:key="index" |
||||
|
> |
||||
|
<div |
||||
|
class="alarm-record-title" |
||||
|
style="text-align: left" |
||||
|
:data-index="index" |
||||
|
> |
||||
|
{{ item.deviceName }} |
||||
|
</div> |
||||
|
<div |
||||
|
class="alarm-record-title" |
||||
|
style="text-align: center; width: 20%" |
||||
|
:data-index="index" |
||||
|
> |
||||
|
{{ item.deviceIp }} |
||||
|
</div> |
||||
|
<div |
||||
|
class="alarm-record-title" |
||||
|
style="text-align: center; width: 30%" |
||||
|
:data-index="index" |
||||
|
> |
||||
|
{{ item.happenTime }} |
||||
|
</div> |
||||
|
<div |
||||
|
class="alarm-record-title" |
||||
|
style=" |
||||
|
text-align: right; |
||||
|
width: 20%; |
||||
|
padding-right: 5px; |
||||
|
" |
||||
|
:data-index="index" |
||||
|
> |
||||
|
{{ item.info }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</vue-seamless-scroll> |
||||
|
</div> |
||||
|
<div |
||||
|
v-else |
||||
|
class="alarm-record-box" |
||||
|
style=" |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 18px; |
||||
|
color: #ffffff; |
||||
|
" |
||||
|
> |
||||
|
暂无预警 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="page-bottom-bg"></div> |
||||
|
<div class="page-left-bg"></div> |
||||
|
<div class="page-right-bg"></div> |
||||
|
<emergency-modal |
||||
|
v-model="socState" |
||||
|
width="988px" |
||||
|
@close="socState = false" |
||||
|
> |
||||
|
<AlarmDigTwo :alarmInfo="diaAlarmInfo"></AlarmDigTwo> |
||||
|
</emergency-modal> |
||||
|
<common-modal |
||||
|
v-model="alarmInfoModal" |
||||
|
width="988px" |
||||
|
@close="alarmInfoModal = false" |
||||
|
> |
||||
|
<TwoImageAlarm :alarmInfo="diaAlarmInfo"></TwoImageAlarm> |
||||
|
</common-modal> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { useIndex } from "../../utils/utilsDramAdmin"; |
||||
|
import MainTitle from "./components/MainTitle.vue"; |
||||
|
import commonLivePlayer from "@/views/common-components/common-live-player.vue"; |
||||
|
import VueSeamlessScroll from "vue-seamless-scroll"; |
||||
|
import CommonModal from "@/views/common-components/common-modal.vue"; |
||||
|
import EmergencyModal from "@/views/common-components/emergency-modal.vue"; |
||||
|
import AlarmDigTwo from "@/views/screen/components/alarm/alarm-dig-two.vue"; |
||||
|
import TwoImageAlarm from "@/views/screen/components/alarm/twoImageAlarm.vue"; |
||||
|
import VideoOne from "./components/video-monitor/video-one.vue"; |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: "EmergencyExtend", |
||||
|
components: { |
||||
|
MainTitle, |
||||
|
commonLivePlayer, |
||||
|
VueSeamlessScroll, |
||||
|
CommonModal, |
||||
|
EmergencyModal, |
||||
|
AlarmDigTwo, |
||||
|
TwoImageAlarm, |
||||
|
VideoOne, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
title: "城市治安", |
||||
|
areaCode: window.$localStorage.getItem("areaCode"), |
||||
|
videoUrl: "", |
||||
|
deviceIp: "", |
||||
|
videoList: [], |
||||
|
currentDevice: {}, |
||||
|
conutInfo: { |
||||
|
dayNum: 0, |
||||
|
weekNum: 0, |
||||
|
monthNum: 0, |
||||
|
}, |
||||
|
alarmInfoList: [], |
||||
|
alarmInfoModal: false, |
||||
|
diaAlarmInfo: {}, |
||||
|
leftOptionHover: { |
||||
|
step: 0.2, // 数值越大速度滚动越快 |
||||
|
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length |
||||
|
hoverStop: false, // 是否开启鼠标悬停stop |
||||
|
direction: 2, // 0向下 1向上 2向左 3向右 |
||||
|
openWatch: true, // 开启数据实时监控刷新dom |
||||
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
||||
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
||||
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms) |
||||
|
}, |
||||
|
topOptionHover: { |
||||
|
step: 0.1, // 数值越大速度滚动越快 |
||||
|
limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length |
||||
|
hoverStop: false, // 是否开启鼠标悬停stop |
||||
|
direction: 1, // 0向下 1向上 2向左 3向右 |
||||
|
openWatch: true, // 开启数据实时监控刷新dom |
||||
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
||||
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
||||
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms) |
||||
|
}, |
||||
|
socState: false, |
||||
|
videoItem: {} |
||||
|
}; |
||||
|
}, |
||||
|
computed: {}, |
||||
|
created() {}, |
||||
|
mounted() { |
||||
|
const { calcRate, windowDraw } = useIndex(this.$refs.appRef); |
||||
|
calcRate(); |
||||
|
windowDraw(); |
||||
|
this.queryMonitorList(); |
||||
|
this.subscribeTopic(); |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
this.sockets.unsubscribe("FIGHT"); |
||||
|
}, |
||||
|
methods: { |
||||
|
// 订阅主题 |
||||
|
subscribeTopic() { |
||||
|
// 城市治安 |
||||
|
this.sockets.subscribe("FIGHT", (data) => { |
||||
|
console.log("城市治安", data); |
||||
|
this.diaAlarmInfo = data.data; |
||||
|
if (this.diaAlarmInfo.picture) { |
||||
|
this.diaAlarmInfo.picture = JSON.parse( |
||||
|
this.diaAlarmInfo.picture |
||||
|
) |
||||
|
} |
||||
|
this.alarmInfoModal = false; |
||||
|
this.socState = true; |
||||
|
this.queryCount(this.videoList); |
||||
|
}); |
||||
|
}, |
||||
|
// 查询监控列表 |
||||
|
queryMonitorList() { |
||||
|
this.$http |
||||
|
.post( |
||||
|
"device/queryDeviceInfoPage", |
||||
|
this.common.request({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 1000, |
||||
|
areaCode: this.areaCode, |
||||
|
deviceType: "城市治安", |
||||
|
}) |
||||
|
) |
||||
|
.then((res) => { |
||||
|
if (res.data.code === 200) { |
||||
|
this.videoList = res.data.data.records.map((item) => { |
||||
|
return { |
||||
|
...item, |
||||
|
title: item.deviceName, |
||||
|
img: |
||||
|
item.deviceImg || |
||||
|
require("@/assets/test/v1.png"), |
||||
|
tags: item.powerInfo.split(","), |
||||
|
}; |
||||
|
}); |
||||
|
this.queryAlarmRecord(this.videoList); |
||||
|
this.queryCount(this.videoList); |
||||
|
this.videoItem = this.videoList[0] |
||||
|
this.videoUrl = this.videoList[0].url; |
||||
|
this.deviceIp = this.videoList[0].deviceIp; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
openAlarmModal(event) { |
||||
|
console.log(event); |
||||
|
let index = event.target.dataset.index; |
||||
|
if (index) { |
||||
|
this.diaAlarmInfo = this.alarmInfoList[index]; |
||||
|
if (this.diaAlarmInfo.picture) { |
||||
|
this.diaAlarmInfo.picture = JSON.parse( |
||||
|
this.diaAlarmInfo.picture |
||||
|
) |
||||
|
} |
||||
|
console.log(this.diaAlarmInfo.picture) |
||||
|
this.alarmInfoModal = true; |
||||
|
} |
||||
|
}, |
||||
|
changeVideo(e) { |
||||
|
let index = e.target.dataset.index; |
||||
|
let item = this.videoList[index]; |
||||
|
this.videoUrl = item.url; |
||||
|
this.deviceIp = item.deviceIp; |
||||
|
this.currentDevice = item; |
||||
|
}, |
||||
|
// 查询告警记录 |
||||
|
queryAlarmRecord(list) { |
||||
|
let ips = list.map((item) => item.deviceIp); |
||||
|
this.$http |
||||
|
.post( |
||||
|
"alarm/base/queryBaseAlarmPage", |
||||
|
this.common.request({ |
||||
|
page: 1, |
||||
|
pageSize: 1000, |
||||
|
type: "城市治安", |
||||
|
deviceIpList: ips, |
||||
|
}) |
||||
|
) |
||||
|
.then((res) => { |
||||
|
if (res.data.code == 200) { |
||||
|
this.alarmInfoList = res.data.data.records; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 查询数字统计 |
||||
|
queryCount(list) { |
||||
|
let ips = list.map((item) => item.deviceIp); |
||||
|
this.$http |
||||
|
.post( |
||||
|
"alarm/base/countAlarmInfoByIps", |
||||
|
this.common.request({ ips }) |
||||
|
) |
||||
|
.then((res) => { |
||||
|
if (res.data.code == 200) { |
||||
|
let data = res.data.data; |
||||
|
this.conutInfo.dayNum = data.alarmByDay; |
||||
|
this.conutInfo.weekNum = data.alarmByWeek; |
||||
|
this.conutInfo.monthNum = data.alarmByMonth; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
@import "../../styles/pbStyle.less"; |
||||
|
.eb-container { |
||||
|
width: 1920px; |
||||
|
height: 1080px; |
||||
|
transform: scale(var(--scale)) translate(-50%, -50%); |
||||
|
transform-origin: 0 0; |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
background-image: url("../../assets/largeScreen/page-bg.png"); |
||||
|
background-size: 100%; |
||||
|
|
||||
|
.video-box { |
||||
|
position: fixed; |
||||
|
top: 100px; |
||||
|
left: 50px; |
||||
|
width: 1250px; |
||||
|
height: 775px; |
||||
|
} |
||||
|
.video-list { |
||||
|
width: 1250px; |
||||
|
height: 150px; |
||||
|
position: fixed; |
||||
|
top: 865px; |
||||
|
left: 50px; |
||||
|
overflow: hidden; |
||||
|
.camera-picture-item { |
||||
|
width: 425px; |
||||
|
height: 240px; |
||||
|
margin-left: 15px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
.pic-box { |
||||
|
width: 100%; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
font-size: 24px; |
||||
|
color: white; |
||||
|
text-align: center; |
||||
|
line-height: 38px; |
||||
|
background-color: rgba(0, 0, 0, 0.4); |
||||
|
} |
||||
|
} |
||||
|
.video-item { |
||||
|
height: 100%; |
||||
|
background-color: rgba(42, 76, 124, 0.4); |
||||
|
border-radius: 8px; |
||||
|
padding: 15px 10px; |
||||
|
margin-right: 10px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.video-title { |
||||
|
width: 100%; |
||||
|
font-weight: 600; |
||||
|
font-size: 18px; |
||||
|
color: #ffffff; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.right { |
||||
|
position: fixed; |
||||
|
top: 100px; |
||||
|
right: 50px; |
||||
|
width: 550px; |
||||
|
height: 925px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.content-info { |
||||
|
.content-pub-style(100%, calc(100% - 44px)); |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding: 0 10px; |
||||
|
color: #ffffff; |
||||
|
.alarm-info-count-box { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
margin-top: 10px; |
||||
|
|
||||
|
.alarm-info-count-item { |
||||
|
width: 32%; |
||||
|
height: 120px; |
||||
|
background-color: #00feff; |
||||
|
text-align: center; |
||||
|
font-size: 22px; |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
} |
||||
|
.new-alarm-box { |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
margin: 5px 0; |
||||
|
background: rgba(36, 74, 129, 0.8); |
||||
|
border-radius: 4px; |
||||
|
padding: 10px 20px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.new-alarm-title { |
||||
|
font-size: 14px; |
||||
|
line-height: 28px; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.new-alarm-desc { |
||||
|
line-height: 28px; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
.alarm-record-box { |
||||
|
width: 100%; |
||||
|
height: 675px; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.alarm-record-item { |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
margin: 5px 0; |
||||
|
background: rgba(36, 74, 129, 0.3); |
||||
|
border-radius: 4px; |
||||
|
padding: 10px 20px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
.alarm-record-title { |
||||
|
width: 25%; |
||||
|
font-size: 14px; |
||||
|
line-height: 28px; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
::-webkit-scrollbar { |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
color: transparent; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue