@ -2,9 +2,9 @@
< div class = "political-outlook" >
< div class = "content" >
<!-- v - show = "topDangerList.length > 0" -- >
< div class = "top-statistics" v-show = "topDangerList.length > 0" >
< div class = "top-statistics" >
< div class = "top-statistics-left" >
< el-scrollbar class = "statistics-listBox" ref = "refAlarmScrollbar" >
< el-scrollbar class = "statistics-listBox" ref = "refAlarmScrollbar" v-if = "topDangerList.length > 0" >
< div
class = "statistics-item"
: style = " {
@ -20,38 +20,46 @@
< span class = "statistics-item-content" > 历史报警次数 ： { { item . alarmNum } } < / span >
< / div >
< / el-scrollbar >
< div style = "position: relative; width: 500px; height: 100%;" v-else >
< div class = "notoDta" >
< img src = "@/assets/images/noData.png" alt = "" / >
< p > 暂无数据 < / p >
< / div >
< / div >
< / div >
<!-- < div class = "top-statistics-right" >
< div > sss < / div >
播放海康
< div ref = "playWndBox" style = "width: 96%; height: 100%;" >
< div class = "top-statistics-right" >
<!-- 播放海康 -- >
< div ref = "playWndBox" style = "width: 85%; height: 88%" >
< div id = "playWnd" class = "playWnd" style = "width: 100%; height: 100%" > < / div >
: style = " {
<!-- : style = " {
height : playWndHeight + 'px' ,
width : playWndWidth + 'px'
} "
} " -- >
< / div >
< / div > -- >
< / div >
< div style = "position: relative; height: 180px" v-if = "topDangerList.length == 0" >
< div class = "notoDta" >
< img src = "@/assets/images/noData.png" alt = "" / >
< p > 暂无数据 < / p >
< / div >
< / div >
< div class = "top-search" >
< div class = "search-item" >
< span > 设备名称 < / span >
< el-input style = "width: 150px;" size = "small" v-model = "searchForm.hardwareName" placeholder="请输入内容" @input="conditionSearch" > < / el -input >
< el-input
style = "width: 150px"
size = "small"
v - model = "searchForm.hardwareName"
placeholder = "请输入内容"
clearable
> < / el-input >
< / div >
< div class = "search-item" >
< span > 不安全行为类型 < / span >
< el-input style = "width: 150px;" size = "small" v-model = "searchForm.alarmTypeName" placeholder="请输入内容" @input="conditionSearch" > < / el -input >
< el-select placeholder = "请选择" size = "small" v-model = "searchForm.alarmType" :clearable="true" style="width: 150px" >
< el-option v-for = "(item, index) in aiAlarmTypeEnum" :key="index" :label="item.value" :value="item.id" / >
< / el-select >
<!-- < el-input style = "width: 150px;" size = "small" v-model = "searchForm.alarmTypeName" placeholder="请输入内容" > < / el -input > -- >
< / div >
< div class = "search-item" >
< span > 警告时间 < / span >
< el-date-picker
style = "width: 240px ; "
style = "width: 240px "
size = "small"
v - model = "searchForm.dateRange"
type = "daterange"
@ -59,10 +67,9 @@
start - placeholder = "开始日期"
end - placeholder = "结束日期"
value - format = "YYYY-MM-DD"
@ change = "conditionSearch"
/ >
< / div >
<!-- < el-button @click ="getMemberCountList('search')" > 查询 < / el -button > -- >
< el-button size = "medium" @click ="getMemberCountList('search')" > 查询 < / el -button >
< / div >
< div class = "table-one" >
< div class = "tabList" >
@ -101,14 +108,14 @@
< / div >
< / el-scrollbar >
< el-pagination
v - if = "partyMemberList.length != 0"
background
: page - size = "10"
style = "justify-content: center"
@ current - change = "onCurrentChange"
layout = "prev, pager, next"
: total = "total"
/ >
v - if = "partyMemberList.length != 0"
background
: page - size = "10"
style = "justify-content: center"
@ current - change = "onCurrentChange"
layout = "prev, pager, next"
: total = "total"
/ >
< / div >
< / div >
< div class = "list-detail" v-if = "showDialog" @click="handleDetailClick" >
@ -145,7 +152,7 @@
< / template >
< script lang = "ts" setup >
import { ref , onMounted , onBeforeMount , onBeforeUnmount , getCurrentInstance } from "vue" ;
import { ref , onMounted , onBeforeMount , onBeforeUnmount , getCurrentInstance , nextTick } from "vue" ;
import { GlobalStore } from "@/stores" ;
import { getCompanyDataList } from "@/api/modules/labor" ;
/ / i m p o r t t y p e { T a b s P a n e C o n t e x t } f r o m " e l e m e n t - p l u s " ;
@ -166,9 +173,9 @@ const store = GlobalStore();
/ / e s l i n t - d i s a b l e - n e x t - l i n e v u e / r e q u i r e - p r o p - t y p e s , @ t y p e s c r i p t - e s l i n t / n o - u n u s e d - v a r s
const props = defineProps ( [ "tip" ] ) ;
const searchForm = ref ( {
hardwareName : '' ,
alarmType Name: '' ,
dateRange : [ ] ,
hardwareName : "" ,
alarmType : "" ,
dateRange : [ ]
} ) ;
const playWndBox = ref ( null ) ;
let playWndHeight = ref ( "" ) ;
@ -176,19 +183,11 @@ let playWndWidth = ref("");
let oWebControl = ref ( null ) ;
let pubKey = ref ( "" ) ;
let initCount = ref ( 0 ) ;
/ / c o n s t o b j D a t a = r e f ( {
/ / a p p k e y : " 2 3 0 7 1 3 7 4 " , / / 海 康 提 供 的 a p p k e y
/ / i p : " 4 2 . 1 8 0 . 1 8 8 . 1 7 " , / / 海 康 提 供 的 i p
/ / s e c r e t : " s k a S I H S Y P R I y n n x z 7 o 5 7 " , / / 海 康 提 供 的 s e c r e t
/ / p o r t : 8 4 4 3 ,
/ / p l a y M o d e : 0 , / / 0 预 览 1 回 放
/ / l a y o u t : " 1 x 1 " / / 页 面 展 示 的 模 块 数 【 1 6 】
/ / } ) ;
let objData = ref ( {
appkey : " 23071374", / / a n j t 的 a p p k e y
ip : " 42.180.188.17", / / a n j t 的 i p
secret : " skaSIHSYPRIynnxz7o57", / / a n j t 的 s e c r e t
port : 8 443, / / a n j t 的 端 口
appkey : "" , / / 海 康 提 供 的 a p p k e y
ip : "" , / / 海 康 提 供 的 i p
secret : "" , / / 海 康 提 供 的 s e c r e t
port : 443 ,
playMode : 0 , / / 0 预 览 1 回 放
layout : "1x1" / / 页 面 展 示 的 模 块 数 【 1 6 】
} ) ;
@ -208,22 +207,18 @@ const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
const detailData = ref ( { } as any ) ;
const partyMemberList = ref ( { } as any ) ;
let aiAlarmTypeEnum = ref ( [ ] as any ) ;
/ / 条 件 查 询
const conditionSearch = async ( ) => {
getMemberCountList ( 'search' )
}
/ / 获 取 视 频 列 表
const getVideoList = async ( ) => {
/ / o b j D a t a . v a l u e . a p p k e y = " 2 3 0 7 1 3 7 4 "
/ / o b j D a t a . v a l u e . i p = " 4 2 . 1 8 0 . 1 8 8 . 1 7 "
/ / o b j D a t a . v a l u e . s e c r e t = " s k a S I H S Y P R I y n n x z 7 o 5 7 "
/ / o b j D a t a . v a l u e . p o r t = 8 4 4 3
/ / c a m e r a I n d e x C o d e . v a l u e = " 2 1 0 d 4 6 4 9 e c 0 d 4 e 6 8 9 9 b 0 3 9 4 e 5 d 8 e e e c 2 "
objData . value . appkey = "23071374" ;
objData . value . ip = "42.180.188.17" ;
objData . value . secret = "skaSIHSYPRIynnxz7o57"
objData . value . port = 8443
cameraIndexCode . value = "210d4649ec0d4e6899b0394e5d8eeec2"
/ / o b j D a t a . v a l u e . a p p k e y = " 2 4 0 1 7 7 5 7 " ;
/ / o b j D a t a . v a l u e . i p = " 1 8 2 . 1 0 1 . 1 4 1 . 2 3 " ;
/ / o b j D a t a . v a l u e . s e c r e t = " V J z 0 F b z m E 6 d r P Q 7 e g s B i " ;
/ / o b j D a t a . v a l u e . p o r t = 1 8 4 4 3 ;
/ / c a m e r a I n d e x C o d e . v a l u e = " fa 3 4 e d 9 0 c 1 5 6 4 8 4 1 b 1 4 f e d 3 8 8 7 4 1 b b e 2 " ;
/ / c a m e r a I n d e x C o d e . v a l u e = " c9 8 6 b 8 0 1 5 8 d e 4 a 5 e 8 b 3 3 2 b 1 f b 3 3 8 e 5 1 a " ;
} ;
/ / 背 景 图 设 置
const bgImgSet = ( index : any ) => {
@ -270,10 +265,12 @@ function getWarnName(warnType: any) {
function openDetailDialog ( item : any ) {
detailData . value = item ;
showDialog . value = true ;
oWebControl . JS _HideWnd ( ) ;
}
/ / 关 闭 详 情 弹 窗
function closeDialog ( ) {
showDialog . value = false ;
oWebControl . JS _ShowWnd ( ) ;
detailData . value = { } ;
}
function handleDetailClick ( event : any ) {
@ -303,14 +300,14 @@ const getMemberCountList = async (tip: any) => {
let requestData : any = {
projectSn : store . sn ,
hardwareName : searchForm . value . hardwareName ,
alarmType Name : searchForm . value . alarmTyp eNam e,
alarmType : searchForm . value . alarmTyp e,
pageNo : tip == "search" ? 1 : pageNo . value ,
pageSize : 10 ,
isPushed : 1
} ;
if ( searchForm . value . dateRange && searchForm . value . dateRange . length > 0 ) {
requestData . startTime = searchForm . value . dateRange [ 0 ]
requestData . endTime = searchForm . value . dateRange [ 1 ]
if ( searchForm . value . dateRange && searchForm . value . dateRange . length > 0 ) {
requestData . startTime = searchForm . value . dateRange [ 0 ] ;
requestData . endTime = searchForm . value . dateRange [ 1 ] ;
}
const res : any = await getAlarmRecordApi ( requestData ) ;
partyMemberList . value = res . result . records ;
@ -330,10 +327,44 @@ const getMemberCountList = async (tip: any) => {
/ / p a g e N o . v a l u e = p a g e N o . v a l u e + 1 ;
/ / }
} ;
/ / o n B e f o r e M o u n t ( a s y n c ( ) = >
/ / g e t V i d e o L i s t ( )
/ / } )
onBeforeMount ( async ( ) =>
getVideoList ( ) ;
} )
onMounted ( async ( ) => {
initPlugin ( ) ;
/ / 获 取 页 面 的 实 例 对 象 e e
const pageInstance = getCurrentInstance ( ) ;
/ / 获 取 d o m 节 点 对 象
const tagDomObj = pageInstance ? . refs . playWndBox ;
playWndHeight . value = tagDomObj ? . clientHeight ;
playWndWidth . value = tagDomObj ? . clientWidth ;
/ / 监 听 s c r o l l 事 件 ， 使 插 件 窗 口 尺 寸 跟 随 D I V 窗 口 变 化
window . addEventListener ( "scroll" , ( ) => {
if ( oWebControl . value == undefined ) {
setTimeout ( function ( ) {
oWebControl . JS _Resize ( playWndWidth . value * store . globalScale , playWndHeight . value * store . globalScale ) ;
} , 200 ) ;
}
} ) ;
/ / 监 听 r e s i z e 事 件 ， 使 插 件 窗 口 尺 寸 跟 随 D I V 窗 口 变 化
window . addEventListener ( "resize" , e => {
if ( oWebControl . value == undefined ) {
setTimeout ( function ( ) {
oWebControl . JS _Resize ( playWndWidth . value * store . globalScale , playWndHeight . value * store . globalScale ) ;
} , 200 ) ;
}
/ / i f ( o W e b C o n t r o l . v a l u e = = u n d e f i n e d ) {
/ / / / c o n s o l e . l o g ( " w w w w w " , e ) ;
/ / o W e b C o n t r o l . J S _ R e s i z e ( t a g D o m O b j ? . c l i e n t W i d t h , t a g D o m O b j ? . c l i e n t H e i g h t ) ;
/ / / / o W e b C o n t r o l . J S _ R e s i z e ( p l a y W n d H e i g h t . v a l u e , p l a y W n d W i d t h . v a l u e ) ;
/ / / / s e t W n d C o v e r ( ) ;
/ / }
} ) ;
setTimeout ( ( ) => {
previewVideo ( cameraIndexCode . value ) ;
} , 1500 ) ;
await getCompanyList ( ) ;
await getMemberCountList ( "search" ) ;
await getQualityStatisticsNumDataFn ( "search" ) ;
@ -360,49 +391,14 @@ onMounted(async () => {
}
}
} ) ;
/ / 加 载 海 康 插 件
/ / s e t T i m e o u t ( ( ) = > {
/ / } , 2 5 0 0 ) ;
/ / a w a i t i n i t P l u g i n ( ) ;
/ / 获 取 页 面 的 实 例 对 象 e e
/ / c o n s t p a g e I n s t a n c e = g e t C u r r e n t I n s t a n c e ( ) ;
/ / / / 获 取 d o m 节 点 对 象
/ / c o n s t t a g D o m O b j = p a g e I n s t a n c e ? . r e f s . p l a y W n d B o x ;
/ / p l a y W n d H e i g h t . v a l u e = t a g D o m O b j ? . c l i e n t H e i g h t ;
/ / p l a y W n d W i d t h . v a l u e = t a g D o m O b j ? . c l i e n t W i d t h ;
/ / / / 监 听 s c r o l l 事 件 ， 使 插 件 窗 口 尺 寸 跟 随 D I V 窗 口 变 化
/ / w i n d o w . a d d E v e n t L i s t e n e r ( " s c r o l l " , ( ) = > {
/ / i f ( o W e b C o n t r o l . v a l u e = = u n d e f i n e d ) {
/ / s e t T i m e o u t ( f u n c t i o n ( ) {
/ / o W e b C o n t r o l . J S _ R e s i z e ( p l a y W n d W i d t h . v a l u e * s t o r e . g l o b a l S c a l e , p l a y W n d H e i g h t . v a l u e * s t o r e . g l o b a l S c a l e ) ;
/ / } , 2 0 0 ) ;
/ / }
/ / } ) ;
/ / 监 听 r e s i z e 事 件 ， 使 插 件 窗 口 尺 寸 跟 随 D I V 窗 口 变 化
/ / w i n d o w . a d d E v e n t L i s t e n e r ( " r e s i z e " , e = > {
/ / i f ( o W e b C o n t r o l . v a l u e = = u n d e f i n e d ) {
/ / s e t T i m e o u t ( f u n c t i o n ( ) {
/ / o W e b C o n t r o l . J S _ R e s i z e ( p l a y W n d W i d t h . v a l u e * s t o r e . g l o b a l S c a l e , p l a y W n d H e i g h t . v a l u e * s t o r e . g l o b a l S c a l e ) ;
/ / } , 2 0 0 ) ;
/ / }
/ / / / i f ( o W e b C o n t r o l . v a l u e = = u n d e f i n e d ) {
/ / / / / / c o n s o l e . l o g ( " w w w w w " , e ) ;
/ / / / o W e b C o n t r o l . J S _ R e s i z e ( t a g D o m O b j ? . c l i e n t W i d t h , t a g D o m O b j ? . c l i e n t H e i g h t ) ;
/ / / / / / o W e b C o n t r o l . J S _ R e s i z e ( p l a y W n d H e i g h t . v a l u e , p l a y W n d W i d t h . v a l u e ) ;
/ / / / / / s e t W n d C o v e r ( ) ;
/ / / / }
/ / } ) ;
/ / p r e v i e w V i d e o ( c a m e r a I n d e x C o d e . v a l u e )
} ) ;
onBeforeUnmount ( ( ) => {
/ / 先 让 窗 口 隐 藏 ， 规 避 可 能 的 插 件 窗 口 滞 后 于 浏 览 器 消 失 问 题
/ / o W e b C o n t r o l . J S _ H i d e W n d ( )
/ / // 销毁 当 前 播 放 的 视 频
/ / o W e b C o n t r o l . J S _ R e q u e s t I n t e r f a c e ( { f u n c N a m e : " d e s t r o y W n d " } )
/ / // 断开 与 插 件 服 务 连 接
/ / o W e b C o n t r o l . J S _ D i s c o n n e c t ( )
oWebControl . JS _HideWnd ( ) ;
/ / 销 毁 当 前 播 放 的 视 频
oWebControl . JS _RequestInterface ( { funcName : "destroyWnd" } ) ;
/ / 断 开 与 插 件 服 务 连 接
oWebControl . JS _Disconnect ( ) ;
} ) ;
const initPlugin = ( ) => {
@ -559,6 +555,7 @@ const getPubKey = (callback: { (): void; (): void }) => {
/ / 调 用 这 个 函 数 可 进 行 视 频 播 放
/ / 视 频 预 览 功 能
const previewVideo = ( data : string | null ) => {
console . log ( data , 666777 ) ;
let cameraIndexCode = data ; / / 获 取 输 入 的 监 控 点 编 号 值 ， 必 填
let streamMode = 0 ; / / 主 子 码 流 标 识 ： 0 - 主 码 流 ， 1 - 子 码 流
let transMode = 1 ; / / 传 输 协 议 ： 0 - U D P ， 1 - T C P
@ -599,9 +596,9 @@ const previewVideo = (data: string | null) => {
position : absolute ;
box - sizing : border - box ;
padding : 1 % ;
left : 3 8 % ;
left : 3 6 % ;
top : 30 % ;
width : 5 % ;
width : 3 2% ;
height : 45 % ;
background : url ( "@/assets/images/aIEarlyWarning/dialogBg.png" ) no - repeat ;
background - size : 100 % 100 % ;
@ -694,7 +691,7 @@ const previewVideo = (data: string | null) => {
. content {
height : 95 % ;
width : 100 % ;
margin - top : 1 0px ;
margin - top : 6 0px ;
/ / b a c k g r o u n d : u r l ( " @ / a s s e t s / i m a g e s / c a r d I m g . p n g " ) n o - r e p e a t ;
background - size : 100 % 100 % ;
padding : 20 px 15 px ;
@ -706,17 +703,17 @@ const previewVideo = (data: string | null) => {
display : flex ;
justify - content : space - between ;
& - left {
width : 100 %
/ / w i d t h : 1 0 0 %
height : 100 % ;
. statistics - listBox {
height : 100 % ;
: deep ( ) {
. el - scrollbar _ _view {
display : grid ;
grid - template - columns : repeat ( 3 , 1 fr ) ;
grid - gap : 20 px
/ / g r i d - r o w - g a p : 2 0 p x
/ / g r i d - c o l u m n - g a p : 6 0 p x
grid - template - columns : repeat ( 2 , 1 fr ) ;
/ / g r i d - g a p : 2 0 p x
grid - row - gap : 20 px
grid - column - gap : 60 px
}
}
}
@ -754,43 +751,27 @@ const previewVideo = (data: string | null) => {
/ / m a r g i n - t o p : 8 % ;
/ / }
}
. notoDta {
top : 25 % ;
width : 50 % ;
left : 20 % ;
position : absolute ;
text - align : center ;
img {
width : 40 % ;
margin : 5 % 30 % ;
}
p {
color : # fff ;
font - size : calc ( 100 vw * 14 / 1920 ) ;
margin : - 6 % 37 % ;
}
}
}
& - right {
width : 390 px ;
width : 45% ;
height : 100 % ;
}
/ / . s t a t i s t i c s - i t e m : n t h - c h i l d ( 1 ) {
/ / b a c k g r o u n d : u r l ( " @ / a s s e t s / i m a g e s / c o m m a n d S c r e e n / b g 6 . p n g " ) n o - r e p e a t ;
/ / b a c k g r o u n d - s i z e : 1 0 0 % 1 0 0 % ;
/ / }
/ / . s t a t i s t i c s - i t e m : n t h - c h i l d ( 2 ) {
/ / b a c k g r o u n d : u r l ( " @ / a s s e t s / i m a g e s / c o m m a n d S c r e e n / b g 2 . p n g " ) n o - r e p e a t ;
/ / b a c k g r o u n d - s i z e : 1 0 0 % 1 0 0 % ;
/ / }
/ / . s t a t i s t i c s - i t e m : n t h - c h i l d ( 3 ) {
/ / b a c k g r o u n d : u r l ( " @ / a s s e t s / i m a g e s / c o m m a n d S c r e e n / b g 7 . p n g " ) n o - r e p e a t ;
/ / b a c k g r o u n d - s i z e : 1 0 0 % 1 0 0 % ;
/ / }
/ / . s t a t i s t i c s - i t e m : n t h - c h i l d ( 4 ) {
/ / b a c k g r o u n d : u r l ( " @ / a s s e t s / i m a g e s / c o m m a n d S c r e e n / b g 8 . p n g " ) n o - r e p e a t ;
/ / b a c k g r o u n d - s i z e : 1 0 0 % 1 0 0 % ;
/ / }
/ / . s t a t i s t i c s - i t e m : n t h - c h i l d ( 5 ) {
/ / b a c k g r o u n d : u r l ( " @ / a s s e t s / i m a g e s / c o m m a n d S c r e e n / b g 1 . p n g " ) n o - r e p e a t ;
/ / b a c k g r o u n d - s i z e : 1 0 0 % 1 0 0 % ;
/ / }
/ / . s t a t i s t i c s - i t e m : n t h - c h i l d ( 6 ) {
/ / b a c k g r o u n d : u r l ( " @ / a s s e t s / i m a g e s / c o m m a n d S c r e e n / b g 5 . p n g " ) n o - r e p e a t ;
/ / b a c k g r o u n d - s i z e : 1 0 0 % 1 0 0 % ;
/ / }
/ / . s t a t i s t i c s - i t e m : n t h - c h i l d ( 7 ) {
/ / b a c k g r o u n d : u r l ( " @ / a s s e t s / i m a g e s / c o m m a n d S c r e e n / b g 4 . p n g " ) n o - r e p e a t ;
/ / b a c k g r o u n d - s i z e : 1 0 0 % 1 0 0 % ;
/ / }
/ / . s t a t i s t i c s - i t e m : n t h - c h i l d ( 8 ) {
/ / b a c k g r o u n d : u r l ( " @ / a s s e t s / i m a g e s / c o m m a n d S c r e e n / b g 3 . p n g " ) n o - r e p e a t ;
/ / b a c k g r o u n d - s i z e : 1 0 0 % 1 0 0 % ;
/ / }
}
. top - search {
@ include flex ;
@ -828,7 +809,7 @@ const previewVideo = (data: string | null) => {
}
}
. listBox {
height : 68 % ;
height : 73 % ;
. listStyle {
display : flex ;
align - items : center ;