@ -37,7 +37,7 @@
< el -tabs v-model ="activeName" @tab-click="tabClickFn" >
< el -tab -pane label = "详情信息" name = "first" >
< div class = "show_bottom_tab_box" >
< div class = "show_bottom_tab_item" v-for ="item in tabInfoList" :key="item.id" >
< div class = "show_bottom_tab_item" v-for ="item in tabData InfoList" :key="item.id" >
< div class = "show_bottom_tab_item_l" > { { item . tit } } : < / div >
< div class = "show_bottom_tab_item_r" :style ="{'color':item.col}" > { { item . txt } } < / div >
< / div >
@ -94,19 +94,20 @@
< div class = "info_right_camera" >
< div class = "info_right_camera_top" >
<!-- 视频组件 -- >
< videoView :url ="videoUrl" / >
< / div >
< div class = "info_right_camera_bom" >
< div class = "camera_bom_left" >
< div class = "camera_bom_left_item" >
< div class = "camera_bom_left_item_txt" > 选择相机 : < / div >
< div class = "camera_bom_left_item_val" >
< el -select v-model ="cameraVal" placeholder="请选择" size="mini" style="width:120px " >
< el -option v-for ="item in cameraOptList" :key="item.value" :label="item.label" :value="item.value " >
< el -select v-model ="cameraVal" placeholder="请选择" size="mini" style="width:130px" @change="cameraValChangeFn " >
< el -option v-for ="item in cameraOptList" :key="item.camId" :label="item.camName" :value="item.camId " >
< / e l - o p t i o n >
< / e l - s e l e c t >
< / div >
< / div >
< div class = "camera_bom_left_item" v-for ="item in cameraDataList" :key="item.id" >
< div class = "camera_bom_left_item" v-for ="item in cameraDataVideo List" :key="item.id" >
< div class = "camera_bom_left_item_txt" > { { item . txt } } : < / div >
< div class = "camera_bom_left_item_val" > { { item . val } } < / div >
< / div >
@ -114,9 +115,15 @@
< div class = "camera_bom_right" >
< div class = "camera_bom_right_t" >
< div class = "camera_bom_right_t_box" > < / div >
< div class = "camera_bom_right_t_h_po" v-for ="item in cameraBtnList" :key="item.id" :style="{'left':item.le,top:item.to,'transform':'rotate('+item.ro+'deg)'}" > < / div >
< div class = "camera_bom_right_t_h_po" v-for ="item in cameraBtnList" :key="item.id" @click="cameraControlBtnFn(item)" :style="{'left':item.le,top:item.to,'transform':'rotate('+item.ro+'deg)'}" > < / div >
< / div >
< div class = "camera_bom_right_b" >
< div class = "camera_bom_right_b_btn" v-for ="item in cameraControlList" :key="item.id" >
< div class = "camera_bom_right_b_btn_l" @click ="cameraControlLeFn(item.numL)" > < / div >
< div class = "camera_bom_right_b_btn_c" > { { item . txt } } < / div >
< div class = "camera_bom_right_b_btn_r" @click ="cameraControlLeFn(item.numR)" > < / div >
< / div >
< / div >
< div class = "camera_bom_right_b" > < / div >
< / div >
< / div >
< / div >
@ -215,22 +222,16 @@ import editBoard from '@/views/boardView/editInfo.vue'
import { invokedFunction , getDeviceRealtimeProperty } from '@/api/device/device.js'
import { getAllVmsTemplate , deleteTemplate } from '@/api//board/template.js'
import { getDicts } from '@/api/system/dict/data.js'
import { getEnergyCameraBoardAPi , getEnergyCameraVideoAPi , getEnergyCameraControlAPi } from '@/api//map/index.js'
import roadView from '@/views/map/Thumbnail/index.vue'
import videoView from '@/views/components/videoPlayer/myVideo.vue'
export default {
name : 'indexView' ,
data ( ) {
return {
cameraVal : '1' ,
cameraOptList : [
{
value : '1' ,
label : '一号相机'
} ,
{
value : '2' ,
label : '二号相机'
}
] ,
videoUrl : '' ,
cameraVal : '' ,
cameraOptList : [ ] ,
editOutlineData : { } ,
formData : [ ] ,
mapIds : '' ,
@ -294,7 +295,7 @@ export default {
{ id : 1005 , bt : '突发事件' , mbList : [ { id : 309 , txt : '救援 拨打96659' , w : 768 , h : 160 , col : '#FFFF00' , fz : 60 , pdl : 0 , pdt : 0 , fm : '黑体' } ] } ,
{ id : 1006 , bt : '警情播报' , mbList : [ { id : 309 , txt : '救援 拨打96659' , w : 768 , h : 160 , col : '#FFFF00' , fz : 60 , pdl : 0 , pdt : 0 , fm : '黑体' } ] }
] ,
tabDataInfoList : [ ] ,
tabInfoList : [
{ id : 401 , tit : '设备名称' , txt : '门架式可变信息标志' , col : '#fff' } ,
{ id : 402 , tit : '道路名称' , txt : 'G35济菏高速' , col : '#fff' } ,
@ -303,6 +304,7 @@ export default {
{ id : 405 , tit : '设备厂商' , txt : '光电比特' , col : '#fff' } ,
{ id : 406 , tit : '设备状态' , txt : '离线' , col : '#888' }
] ,
cameraDataVideoList : [ ] ,
cameraDataList : [
{ id : 3001 , txt : '设备名称' , val : '疲劳唤醒设备1' } ,
{ id : 3002 , txt : '设备编号' , val : 'G00030497B0180001' } ,
@ -313,17 +315,22 @@ export default {
{ id : 3007 , txt : '方向' , val : '菏泽' }
] ,
cameraBtnList : [
{ id : 4001 , dir : 'left' , le : '26%' , to : '33%' , ro : 0 } ,
{ id : 4002 , dir : 'up' , le : '46%' , to : '4%' , ro : 90 } ,
{ id : 4003 , dir : 'right' , le : '65%' , to : '33%' , ro : 180 } ,
{ id : 4004 , dir : 'downward' , le : '46%' , to : '62%' , ro : 267 }
{ id : 4001 , cmd : 23 , dir : 'left' , le : '26%' , to : '33%' , ro : 0 } ,
{ id : 4002 , cmd : 21 , dir : 'up' , le : '46%' , to : '4%' , ro : 90 } ,
{ id : 4003 , cmd : 24 , dir : 'right' , le : '65%' , to : '33%' , ro : 180 } ,
{ id : 4004 , cmd : 22 , dir : 'downward' , le : '46%' , to : '62%' , ro : 267 }
] ,
cameraControlList : [
{ id : 5001 , txt : '变倍' , numL : 11 , numR : 12 } ,
{ id : 5002 , txt : '光圈' , numL : 16 , numR : 15 } ,
{ id : 5003 , txt : '聚焦' , numL : 14 , numR : 13 }
]
}
} ,
props : [ ] ,
/ / 注 册 组 件
components : { GaoDeMap , carECharts , addBoard , editBoard , roadView } ,
components : { GaoDeMap , carECharts , addBoard , editBoard , roadView , videoView } ,
/ / 计 算 属 性
computed : { } ,
/ / 生 命 周 期 函 数
@ -332,43 +339,104 @@ export default {
/ / t h i s . g e t T e m p l a t e F n ( )
} ,
/ / / / 侦 听 器
/ / w a t c h : {
/ / d a t a : {
/ / / / 自 动 触 发 , 只 能 使 用 h a n d l e r
/ / h a n d l e r ( n e w V a l , o l d V a l ) {
/ / / / c o n s o l e . l o g ( n e w V a l ) ;
/ / / / c o n s o l e . l o g ( o l d V a l ) ;
/ / }
/ / / / t r u e 表 示 侦 听 器 立 即 触 发 ( i m m e d i a t e 默 认 为 f a l s e )
/ / / / i m m e d i a t e : t r u e ,
/ / / / t r u e 表 示 深 度 侦 听 ， 侦 听 对 象 属 性 的 变 化
/ / / / d e e p : t r u e
/ / }
/ / } ,
watch : {
cameraVal : {
/ / 自 动 触 发 , 只 能 使 用 h a n d l e r
handler ( newVal , oldVal ) {
this . getEnergyCameraVideoFn ( )
/ / c o n s o l e . l o g ( n e w V a l ) ;
/ / c o n s o l e . l o g ( o l d V a l ) ;
} ,
/ / t r u e 表 示 侦 听 器 立 即 触 发 ( i m m e d i a t e 默 认 为 f a l s e )
/ / i m m e d i a t e : t r u e
/ / t r u e 表 示 深 度 侦 听 ， 侦 听 对 象 属 性 的 变 化
deep : true
}
} ,
/ / 事 件 函 数
methods : {
/ / 地 图 点 位
mapClickEvent ( e ) {
this . dialogInfoList = [ ]
console . log ( '父组件地图点位' , e )
this . videoUrl = ''
this . cameraOptList = [ ]
this . dialogInfoLeft = true
this . mapIds = e . target . _opts . extData . deviceId
this . screenDataSize = e . target . _opts . extData . sceenSize
this . dialogTit = e . target . _opts . extData . deviceName
/ / t h i s . t a b D a t a I n f o L i s t = e . t a r g e t . _ o p t s . e x t D a t a
this . tabDataInfoList = [
{ id : 401 , tit : '设备名称' , txt : e . target . _opts . extData . deviceName , col : '#fff' } ,
{ id : 402 , tit : '道路名称' , txt : e . target . _opts . extData . roadName , col : '#fff' } ,
{ id : 403 , tit : '所属机构' , txt : e . target . _opts . extData . organization , col : '#fff' } ,
{ id : 404 , tit : '设备桩号' , txt : e . target . _opts . extData . pileNumber , col : '#fff' } ,
{ id : 405 , tit : '设备厂商' , txt : e . target . _opts . extData . brind , col : '#fff' } ,
{ id : 406 , tit : '设备状态' , txt : e . target . _opts . extData . deviceState , col : '#888' }
]
this . getTemplateHeaderFn ( )
this . onSubmit ( this . mapIds )
this . getEnergyCameraBoardFn ( e . target . _opts . extData . pileNumber )
/ / t h i s . m a p D i a l o g T o p = e . p i x e l . y + ' p x '
/ / t h i s . m a p D i a l o g L e f t = e . p i x e l . x + ' p x '
/ / t h i s . $ r e f s . m a p D i a l o g . s t y l e . t o p = e . p i x e l . y + ' p x '
/ / t h i s . $ r e f s . m a p D i a l o g . s t y l e . l e f t = e . p i x e l . x + ' p x '
/ / c o n s o l e . l o g ( t h i s . $ r e f s . m a p D i a l o g )
} ,
getEnergyCameraBoardFn ( pileNumber ) {
getEnergyCameraBoardAPi ( { pileNum : pileNumber } ) . then ( res => {
console . log ( '获取到附近的像机' , res )
this . cameraVal = res . data [ 0 ] . camId
this . cameraOptList = res . data
this . cameraValCha ( this . cameraOptList , this . cameraVal )
this . getEnergyCameraVideoFn ( )
} )
} ,
getEnergyCameraVideoFn ( ) {
getEnergyCameraVideoAPi ( { camId : this . cameraVal } ) . then ( res => {
/ / c o n s o l e . l o g ( ' 获 取 到 视 频 ' , r e s )
this . videoUrl = res . data . liveUrl
} )
} ,
cameraControlBtnFn ( item ) {
this . getEnergyCameraControlFn ( item . cmd , 5 )
} ,
cameraControlLeFn ( item ) {
/ / c o n s o l e . l o g ( ' 按 钮 点 击 事 件 ' , i t e m )
this . getEnergyCameraControlFn ( item , 5 )
} ,
getEnergyCameraControlFn ( cmd , spe ) {
getEnergyCameraControlAPi ( { camId : this . cameraVal , cmdType : cmd , speed : spe } ) . then ( res => {
/ / c o n s o l e . l o g ( ' 控 制 返 回 结 果 ' , r e s )
/ / t h i s . v i d e o U r l = r e s . d a t a . l i v e U r l
} )
} ,
cameraValChangeFn ( ) {
console . log ( '点击切换按钮' , this . cameraVal )
this . cameraValCha ( this . cameraOptList , this . cameraVal )
} ,
/ / c a m e r a D a t a V i d e o L i s t
cameraValCha ( date , num ) {
let str = {
0 : '正常' ,
1 : '网络中断' ,
2 : '网络正常无图像' ,
3 : '有图像图可能存在问题'
}
date . forEach ( i => {
if ( i . camId === num ) {
this . cameraDataVideoList = [
{ id : 3001 , txt : '设备名称' , val : i . camName } ,
{ id : 3002 , txt : '设备编号' , val : i . camId } ,
{ id : 3003 , txt : '设备桩号' , val : i . pileNum } ,
{ id : 3005 , txt : '道路名称' , val : i . deptName } ,
{ id : 3006 , txt : '道路状况' , val : i . status == '-1' ? '未启用' : str [ Number ( i . status ) ] }
]
}
} )
} ,
/ / 信 息 发 布
InformationReleaseFn ( ) {
/ / i n v o k e d F u n c t i o n ( ' 6 5 ' , ' ' ) . t h e n ( r e s = > {
/ / c o n s o l e . l o g ( r e s )
/ / } )
this . $confirm ( '是否确定发布情报板?' , '提示' , {
confirmButtonText : '确定' ,
cancelButtonText : '取消' ,
@ -483,7 +551,7 @@ export default {
} )
} )
. catch ( e => {
this . $modal . msgError ( '回读失败,请重试' )
/ / t h i s . $ m o d a l . m s g E r r o r ( ' 回 读 失 败 , 请 重 试 ' )
} )
/ / t h i s . d e v i c e I d = d e v i c e I d
@ -1343,6 +1411,35 @@ export default {
background - repeat : no - repeat ;
background - position : center ;
}
. camera_bom_right_b_btn {
width : 100 % ;
padding : 0 vh 2 vw 1 vh 2 vw ;
display : flex ;
justify - content : space - between ;
}
. camera_bom_right_b_btn_l {
width : 1.2 vw ;
height : 2.4 vh ;
border - radius : 50 % ;
background - image : url ( '~@/assets/screen/xtb/jhbtn.png' ) ;
background - size : 100 % 100 % ;
background - repeat : no - repeat ;
background - position : center ;
cursor : pointer ;
}
. camera_bom_right_b_btn_c {
color : # fff ;
}
. camera_bom_right_b_btn_r {
width : 1.2 vw ;
height : 2.4 vh ;
border - radius : 50 % ;
background - image : url ( '~@/assets/screen/xtb/addbtn.png' ) ;
background - size : 100 % 100 % ;
background - repeat : no - repeat ;
background - position : center ;
cursor : pointer ;
}
/ / b a c k g r o u n d - c o l o r : # 1 0 4 b 6 5 ;
/ / b a c k g r o u n d - i m a g e : u r l ( ' ~ @ / a s s e t s / s c r e e n / x t b / q b b t i t . p n g ' ) ;
/ / b a c k g r o u n d - s i z e : 1 0 0 % 1 0 0 % ;
IAMHERE
11 months ago
