mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat 更新情报板中摄像头雨刷和子类型

wangqin
qingzhengli 11 months ago
parent
17cfd5e08c
commit
ee3fe0598f
3 changed files with 184 additions and 88 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 241
      ruoyi-ui/src/views/JiHeExpressway/components/CameraShower/index.vue
  2. 27
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
  3. 4
      ruoyi-ui/src/views/JiHeExpressway/utils/enum.js

241
ruoyi-ui/src/views/JiHeExpressway/components/CameraShower/index.vue
View File

@ -1,38 +1,54 @@
<template>
<div v-if="visible" class="compBox">
<div class="head" style="height:4vh;">
<div class="tit">附近相机</div>
<img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="onClose">
<img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt="">
<div class="head" style="height:4vh;">
<div class="tit">附近相机</div>
<img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="onClose">
<img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt="">
</div>
<template v-if="list.length > 0">
<!-- <p>{{ list }}</p> -->
<div class="videoPlayer">
<!-- <videoView :url="slectedVideo" /> -->
<Video class="video-stream" :camId="selectedCamera.camId" />
</div>
<template v-if="list.length>0">
<!-- <p>{{ list }}</p> -->
<div class="videoPlayer">
<!-- <videoView :url="slectedVideo" /> -->
<Video class="video-stream" :camId="selectedCamera.camId" />
</div>
<div class="operation">
<div class="selectCam">
<div class="label">选择相机: </div>
<div class="val">
<el-select v-model="selectedCameraIndex" placeholder="请选择" size="mini" @change="onChangeCamera">
<el-option v-for="item,index in list" :key="index" :label="item.camName" :value="index">
</el-option>
</el-select>
</div>
</div>
<el-button type="primary" icon="el-icon-s-operation" class="controlCam" v-if="selectedCamera.ptzCtrl == 0" @click="controlDialogVisible=!controlDialogVisible"></el-button>
<CameraController :visible.sync="controlDialogVisible" v-if="controlDialogVisible" :deviceId="selectedCamera.camId" class="cameraControl"/>
</div>
<div class="flex1 txtInfo">
<p v-for="item in cameraInfo" :key="item.value" class="txtItem">
<span class="label">{{ item.title }}: </span>
<span class="val">{{ item.value }}</span>
</p>
</div>
<!-- <div class="camera_bom_right">
<div class="operation">
<div class="selectCam">
<div class="label">选择相机: </div>
<div class="val">
<el-select v-model="selectedCameraIndex" placeholder="请选择" size="mini" @change="onChangeCamera">
<el-option v-for="item, index in list" :key="index" :label="item.camName" :value="index">
</el-option>
</el-select>
</div>
</div>
<el-button type="primary" icon="el-icon-s-operation" class="controlCam" v-if="selectedCamera.ptzCtrl == 0"
@click="controlDialogVisible = !controlDialogVisible"></el-button>
<CameraController :visible.sync="controlDialogVisible" v-if="controlDialogVisible"
:deviceId="selectedCamera.camId" class="cameraControl" />
</div>
<div class="flex1 txtInfo">
<p v-for="item in cameraInfo" :key="item.value" class="txtItem">
<span class="label">{{ item.title }}: </span>
<span class="val">{{ item.value }}</span>
</p>
<div v-if="PanoramicCameraTypes.indexOf(selectedCamera.childType) == -1" style="width: 50%; display: flex;">
<span style="
color: #3de8ff;
font-size: 15px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
line-height: 18px;
">
雨刷:
</span>
<Button style="margin-left: 5px" @click.native="controlClick(49)">开</Button>
<Button style="margin-left: 5px" @click.native="controlClick(48)">关</Button>
</div>
</div>
<!-- <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"
@ -58,11 +74,16 @@
import Video from "@screen/components/Video"
import CameraController from "./CameraController.vue";
import { controlCamera, getDeviceInfo } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
import { PanoramicCameraTypes, CameraChildTypes } from "@screen/utils/enum.js";
import { throttle } from "lodash";
import Button from "@screen/components/Buttons/Button.vue";
export default {
name: '',
components: {
Video,
Button,
CameraController
},
props: {
@ -70,78 +91,91 @@ export default {
type: Array,
default: () => []
},
visible:{
type:Boolean,
default:false
visible: {
type: Boolean,
default: false
}
},
data() {
return {
booooooool:true,
selectedCameraIndex:null,
selectedCamera:{},
cameraInfo:[],
controlDialogVisible:false
booooooool: true,
selectedCameraIndex: null,
selectedCamera: {},
PanoramicCameraTypes,
cameraInfo: [],
controlDialogVisible: false
}
},
watch:{
list:{
handler(){
watch: {
list: {
handler() {
this.selectCamera();
},
deep:true,
deep: true,
}
},
mounted(){
mounted() {
},
methods:{
onClose (){
this.$emit("update:visible" , false)
},
onChangeCamera(val){
methods: {
controlClick: throttle(function (type) {
controlCamera(this.selectedCamera.camId, type, false);
}, 150),
onClose() {
this.$emit("update:visible", false)
},
onChangeCamera(val) {
this.selectCamera();
},
selectCamera(){
if(this.list.length <= 0){
async selectCamera() {
if (this.list.length <= 0) {
return
}
if(this.selectedCameraIndex == null){
if (this.selectedCameraIndex == null) {
this.selectedCameraIndex = 0;
}
this.selectedCamera = this.list[this.selectedCameraIndex];
const deviceInfo = (await getDeviceInfo(this.selectedCamera.camId))?.[0] || {};
const childType = deviceInfo.childType;
this.$set(this.selectedCamera, 'childType', childType);
let cmr = this.selectedCamera;
this.cameraInfo = [
{title:"道路名称", value:cmr.deptName },
{title:"道路编号", value:cmr.road },
{title:"设备名称", value:cmr.camName },
{title:"设备编号", value:cmr.camId },
{title:"设备桩号", value:cmr.pileNum },
{title:"相机类型", value:["球机","枪机"][+cmr.ptzCtrl] },
{ title: "道路名称", value: cmr.deptName },
{ title: "道路编号", value: cmr.road },
{ title: "设备名称", value: cmr.camName },
{ title: "设备编号", value: cmr.camId },
{ title: "设备桩号", value: cmr.pileNum },
{ title: "相机类型", value: childType ? CameraChildTypes[childType] : ["球机", "枪机"][+cmr.ptzCtrl] },
// {title:"相机状态", value:cmr.camStatus }
];
},
onControlCamera(val){
console.log(val , "vallllllllll")
}
onControlCamera(val) {
console.log(val, "vallllllllll")
}
}
}
</script>
<style lang='scss' scoped>
@mixin fontClass{
fontSize:14px; color:#FFF;
@mixin fontClass {
fontSize: 14px;
color: #FFF;
}
$colorLabel: #3DE8FF;
.compBox{
.compBox {
display: flex;
flex-direction: column;
position: relative;
.cameraControl{
.cameraControl {
position: absolute;
right: -2px;
top:-2px;
top: -2px;
transform: translateX(100%);
}
.head {
height: 48px;
padding: 0 10px;
@ -153,18 +187,18 @@ $colorLabel: #3DE8FF;
display: flex;
justify-content: space-between;
align-items: center;
.tit {
color: #3de8ff;
font-size: 18px;
}
.btnCls {
width: 13px;
height: 13px;
cursor: pointer;
}
.deco {
width: 55%;
height: 5px;
@ -173,39 +207,74 @@ $colorLabel: #3DE8FF;
top: 0;
}
}
.flex1{
flex: 1; height:0;
.flex1 {
flex: 1;
height: 0;
}
.videoPlayer { height: 246px;
.video-stream{ width: 100%; height: 100%;}
.videoPlayer {
height: 246px;
.video-stream {
width: 100%;
height: 100%;
}
}
.operation{
display: flex; flex-direction: row; height: 36px; justify-content: space-between; align-items: center; padding: 0 20px; border-bottom:1px solid #3DE8FF; position: relative;
.selectCam{ display: flex; flex-direction: row;
.label{
.operation {
display: flex;
flex-direction: row;
height: 36px;
justify-content: space-between;
align-items: center;
padding: 0 20px;
border-bottom: 1px solid #3DE8FF;
position: relative;
.selectCam {
display: flex;
flex-direction: row;
.label {
margin-right: 6px;
@include fontClass;
color: $colorLabel;
}
.val{ width: 220px; }
.val {
width: 220px;
}
}
.controlCam{
.controlCam {
padding: 3px;
font-size: 20px;
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
border: none;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
}
.txtInfo{
flex: 1; overflow-y: scroll; padding: 20px 20px 10px; display: flex; flex-wrap: wrap; align-content:flex-start;
.txtItem{
width: 0; flex-basis: 50%; height: 34px;
.label{
.txtInfo {
flex: 1;
overflow-y: scroll;
padding: 20px 20px 10px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
.txtItem {
width: 0;
flex-basis: 50%;
height: 34px;
.label {
@include fontClass;
color: $colorLabel;
}
.val{
.val {
@include fontClass;
}
}

27
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
View File

@ -237,6 +237,33 @@ export function getDeviceList(deviceType, options) {
});
}
export function getDeviceInfo(iotDeviceId, options) {
return new Promise((resolve, reject) => {
const data = {
iotDeviceId,
...options,
};
request({
url: "/business/device/query",
method: "GET",
params: data,
})
.then(({ code, data }) => {
if (code != 200) {
reject();
// return Message.error(`${DeviceTypeMap[deviceType]}设备加载失败!`);
}
resolve(data);
})
.catch(() => {
// Message.error(`${DeviceTypeMap[deviceType]}设备加载失败!`);
reject();
});
});
}
/**
* 获取 所属机构
* @param {*} iotDeviceId 设备ID iotDeviceId

4
ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
View File

@ -970,7 +970,7 @@ export const SchedulingEnum = {
},
};
const CameraChildTypes = {
export const CameraChildTypes = {
"1-1": "高清网络枪型固定摄像机",
"1-2": "高清网络球形摄像机",
"1-3": "桥下高清网络球形摄像机",
@ -978,7 +978,7 @@ const CameraChildTypes = {
"1-5": "180°全景摄像机",
};
const BoardChildTypes = {
export const BoardChildTypes = {
"2-1": "门架式可变信息标志",
"2-2": "大学城入口站前板",
"2-3": "雨棚可变信息标志",

Write Preview
Loading…
Cancel
Save