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