摄像头修改
This commit is contained in:
parent
9842983b07
commit
a3e4b319c3
@ -31,6 +31,31 @@
|
||||
/*滚动条边角*/
|
||||
}
|
||||
|
||||
.amap-marker .p_title {
|
||||
height: 44px;
|
||||
background: rgba(1, 12, 28, 0.7);
|
||||
border-radius: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.amap-marker .p_title > img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.amap-marker .p_title > span {
|
||||
font-size: 18px;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tips-model {
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
@ -2311,11 +2336,19 @@ textarea {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.realTime .page-content .realTime-bottom .left-view > div.center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.realTime .page-content .realTime-bottom .left-view > div .video-js {
|
||||
width: calc(100% - 400px);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.realTime .page-content .realTime-bottom .left-view > div .video-js.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.realTime .page-content .realTime-bottom .left-view > div #video-js {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
||||
@ -33,6 +33,34 @@
|
||||
}
|
||||
|
||||
}
|
||||
.amap-marker{
|
||||
.p_title {
|
||||
// width:50px;
|
||||
height: 44px;
|
||||
background: rgba(1, 12, 28, 0.7);
|
||||
border-radius:22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
// overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
>img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
>span {
|
||||
font-size: 18px;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips-model {
|
||||
padding: 10px;
|
||||
@ -2444,10 +2472,15 @@ textarea {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
&.center{
|
||||
justify-content: center;
|
||||
}
|
||||
.video-js {
|
||||
width: calc(100% - 400px);
|
||||
height: 100%;
|
||||
&.w-100{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#video-js {
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</div>
|
||||
<div class="flex-view">
|
||||
<div class="manage-input w-180">
|
||||
<span class="input-title">{{$t('deviceManage.username')}}</span>
|
||||
<span class="input-title">{{$t('deviceManage.search.username')}}</span>
|
||||
<input
|
||||
class="search-input"
|
||||
type="text"
|
||||
@ -19,7 +19,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="manage-input w-180">
|
||||
<span class="input-title">{{$t('deviceManage.deviceCode')}}</span>
|
||||
<span class="input-title">{{$t('deviceManage.search.deviceCode')}}</span>
|
||||
<input
|
||||
class="search-input"
|
||||
type="text"
|
||||
@ -194,7 +194,15 @@
|
||||
:placeholder="$t('placeholder.cameraChannelPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="manage-input">
|
||||
<div class="input-title">摄像头右侧控制面板(1为显示)</div>
|
||||
<input
|
||||
type="number"
|
||||
v-model="nowData1.cameraName"
|
||||
placeholder="1为显示其他不显示"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="manage-text">
|
||||
{{$t('deviceManagement.dialogs.noteText')}}
|
||||
</div>
|
||||
@ -229,9 +237,11 @@ export default {
|
||||
addModel1: false,
|
||||
nowData1: {
|
||||
deviceState: 0,
|
||||
cameraName:1,
|
||||
},
|
||||
|
||||
deviceType: "",
|
||||
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
@ -282,6 +292,7 @@ export default {
|
||||
this.nowData1.deviceTypeName = e
|
||||
this.deviceType = e;
|
||||
},
|
||||
|
||||
openRoleModel(deviceId) {
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
@ -308,7 +319,7 @@ export default {
|
||||
openAddModel1() {
|
||||
this.nowData1 = {
|
||||
deviceState: 0,
|
||||
|
||||
cameraName:1,
|
||||
};
|
||||
this.deviceType=''
|
||||
this.addModel1 = true;
|
||||
@ -326,6 +337,7 @@ export default {
|
||||
this.$message.error(this.$t('message.deviceNameRequired'));
|
||||
return;
|
||||
}
|
||||
|
||||
var data = {
|
||||
...this.nowData1,
|
||||
stationName: this.nowData1.deviceTypeName,
|
||||
|
||||
@ -1378,6 +1378,7 @@ mapInit(){
|
||||
|
||||
// 添加标点
|
||||
const iconUrl = require("@/assets/img/axis1.png");
|
||||
const iconUrl1 = require("@/assets/img/wenshi.png");
|
||||
const icon = new AMap.Icon({
|
||||
image: iconUrl,
|
||||
size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以根据需要进行调整或忽略
|
||||
@ -1385,17 +1386,49 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
|
||||
});
|
||||
this.dataList.forEach((el,index)=>{
|
||||
if(el.xaxis&&el.yaxis){
|
||||
const marker = new AMap.Marker({
|
||||
position:new AMap.LngLat(el.xaxis,el.yaxis),
|
||||
icon: icon,
|
||||
title: "上海前卫柑桔有限公司",
|
||||
offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
|
||||
});
|
||||
marker.on("click", function (e) {
|
||||
// const marker = new AMap.Marker({
|
||||
// position:new AMap.LngLat(el.xaxis,el.yaxis),
|
||||
// icon: icon,
|
||||
// title: "上海前卫柑桔有限公司",
|
||||
// offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
|
||||
// });
|
||||
// marker.on("click", function (e) {
|
||||
|
||||
// that.$router.push({ path: "/largeScreen1" });
|
||||
// });
|
||||
|
||||
// const text = new AMap.Text({
|
||||
// text: el.greenhouseName, // 要显示的文字
|
||||
// anchor: 'bottom', // 文字对齐方式（bottom 表示文字在坐标点下方）
|
||||
// offset: new AMap.Pixel(-17.5,-70), // 调整文字位置（向上偏移）
|
||||
// style: {
|
||||
// 'font-size': '14px',
|
||||
// 'background-color': '#fff',
|
||||
// 'padding': '4px 8px',
|
||||
// 'border-radius': '4px',
|
||||
// // 'border': '1px solid #ddd',
|
||||
// },
|
||||
// position:new AMap.LngLat(el.xaxis,el.yaxis),
|
||||
// });
|
||||
// text.on("click", function (e) {
|
||||
|
||||
// that.$router.push({ path: "/largeScreen1" });
|
||||
// });
|
||||
var content=` <div class="p_title">
|
||||
<img src="${iconUrl1}" alt="" />
|
||||
<span>${el.greenhouseName}</span>
|
||||
</div>`
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(el.xaxis,el.yaxis), // 坐标
|
||||
content: content, // 自定义 HTML
|
||||
offset: new AMap.Pixel(-30,-22), // 调整位置（使 div 中心对准坐标点）
|
||||
});
|
||||
marker.on("click", function (e) {
|
||||
|
||||
that.$router.push({ path: "/largeScreen1" });
|
||||
});
|
||||
map.add(marker);
|
||||
map.add(marker);
|
||||
// map.add(text);
|
||||
}
|
||||
|
||||
})
|
||||
@ -2500,9 +2533,9 @@ window.open("http://localhost:8080/");
|
||||
padding-bottom: 0.1rem;
|
||||
|
||||
>img {
|
||||
width: 0.62rem;
|
||||
width: 0.68rem;
|
||||
height: 0.68rem;
|
||||
margin: 0 0.16rem 0 0.13rem;
|
||||
margin: 0 0.1rem 0 0.13rem;
|
||||
}
|
||||
|
||||
.item_child {
|
||||
|
||||
@ -12,12 +12,16 @@
|
||||
</div>
|
||||
<largeNav :active="1"></largeNav>
|
||||
<div class="content scroll">
|
||||
|
||||
<div
|
||||
class="video monitor"
|
||||
v-for="(item, index) in videoList"
|
||||
:key="index"
|
||||
:id="'monitor' + index"
|
||||
>
|
||||
<div class="header">
|
||||
{{item.name}}
|
||||
</div>
|
||||
<div
|
||||
ref="videoPlayer"
|
||||
class="video-js"
|
||||
@ -65,20 +69,22 @@ export default {
|
||||
this.getTime();
|
||||
this.typeList = this.$store.state.typeList;
|
||||
this.list1 = [
|
||||
{ cameraid: "FT5712546", channelid: 1, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 2, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 3, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 4, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 5, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 6, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 7, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 8, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 9, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 10, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 11, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 12, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 13, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 14, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 1, name:'二期 3#温室西面内部', player: null },
|
||||
{ cameraid: "FT5712546", channelid: 2, name:'二期 1#温室东面内部', player: null },
|
||||
{ cameraid: "FT5712546", channelid: 3, name:'二期 2#温室东面内部', player: null },
|
||||
{ cameraid: "FT5712546", channelid: 4, name:'二期 5#温室东面内部', player: null },
|
||||
{ cameraid: "FT5712546", channelid: 5, name:'二期 2#温室西面内部', player: null },
|
||||
{ cameraid: "FT5712546", channelid: 6, name:'二期 1#温室球机', player: null },
|
||||
{ cameraid: "FT5712546", channelid: 7, name:'二期 3#温室东面南侧内部', player: null },
|
||||
{ cameraid: "FT5712546", channelid: 8, name:'二期 1#温室西面内部', player: null },
|
||||
{ cameraid: "FT5712546", channelid: 9, name:'二期 4#温室东面内部', player: null },
|
||||
{ cameraid: "FT5712546", channelid: 10,name:'二期 5#温室西面内部', player: null },
|
||||
{ cameraid: "FT5712546", channelid: 11,name:'二期 4#温室球机', player: null },
|
||||
{ cameraid: "FT5712546", channelid: 12,name:'二期 5#温室球机', player: null },
|
||||
{ cameraid: "FT5712546", channelid: 13,name:'二期 3#温室东面北侧内部', player: null },
|
||||
{ cameraid: "FT5712546", channelid: 14,name:'二期 2#温室球机', player: null },
|
||||
{ cameraid: "FT5712546", channelid: 15,name:'二期 4#温室西面内部', player: null },
|
||||
{ cameraid: "FT5712546", channelid: 16,name:'二期 3#温室球机', player: null },
|
||||
];
|
||||
this.list2 = [
|
||||
|
||||
@ -133,7 +139,7 @@ export default {
|
||||
}, 0);
|
||||
},
|
||||
|
||||
// 数据单位
|
||||
// 数据单位
|
||||
getTypeList(val) {
|
||||
let typeList1 = [];
|
||||
typeList1 = this.typeList.filter((item) => {
|
||||
@ -180,7 +186,7 @@ export default {
|
||||
this.videoList[index].player = new EZUIKit.EZUIKitPlayer({
|
||||
id: "video-js" + index, // 视频容器ID
|
||||
accessToken: accessToken,
|
||||
url: url,
|
||||
url: url,
|
||||
// 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
|
||||
// 播放主题 simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
|
||||
template: "security",
|
||||
@ -202,6 +208,16 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.about .header-controls{
|
||||
// .theme-icon-item{
|
||||
// display: none!important;
|
||||
// }
|
||||
display: none!important;
|
||||
|
||||
//
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.about {
|
||||
width: 100%;
|
||||
@ -313,6 +329,15 @@ export default {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-row-gap: 0.2rem; //纵向间隔
|
||||
grid-column-gap: 0.2rem; //横向间隔
|
||||
.header{
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
background: #000;
|
||||
padding-left: 1%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.video {
|
||||
height: calc((100vh - 3.3rem) / 3);
|
||||
.video-js {
|
||||
|
||||
@ -784,6 +784,7 @@ mapInit(){
|
||||
|
||||
// 添加标点
|
||||
const iconUrl = require("@/assets/img/axis1.png");
|
||||
const iconUrl1 = require("@/assets/img/wenshi.png");
|
||||
const icon = new AMap.Icon({
|
||||
image: iconUrl,
|
||||
size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以根据需要进行调整或忽略
|
||||
@ -792,16 +793,30 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
|
||||
this.dataList.forEach((el,index)=>{
|
||||
|
||||
if(el.xaxis&&el.yaxis){
|
||||
var marker = new AMap.Marker({
|
||||
position:new AMap.LngLat(el.xaxis,el.yaxis),
|
||||
icon: icon,
|
||||
title: "上海前卫柑桔有限公司",
|
||||
offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
|
||||
});
|
||||
marker.on("click", function (e) {
|
||||
// var marker = new AMap.Marker({
|
||||
// position:new AMap.LngLat(el.xaxis,el.yaxis),
|
||||
// icon: icon,
|
||||
// title: "上海前卫柑桔有限公司",
|
||||
// offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
|
||||
// });
|
||||
// marker.on("click", function (e) {
|
||||
|
||||
// that.$router.push({ path: "/largeScreen1" });
|
||||
// });
|
||||
var content=` <div class="p_title">
|
||||
<img src="${iconUrl1}" alt="" />
|
||||
<span>${el.greenhouseName}</span>
|
||||
</div>`
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(el.xaxis,el.yaxis), // 坐标
|
||||
content: content, // 自定义 HTML
|
||||
offset: new AMap.Pixel(-30,-22), // 调整位置（使 div 中心对准坐标点）
|
||||
});
|
||||
marker.on("click", function (e) {
|
||||
|
||||
that.$router.push({ path: "/largeScreen1" });
|
||||
});
|
||||
map.add(marker);
|
||||
map.add(marker);
|
||||
|
||||
}
|
||||
@ -1303,9 +1318,9 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
|
||||
padding-bottom: 0.1rem;
|
||||
|
||||
>img {
|
||||
width: 0.62rem;
|
||||
width: 0.68rem;
|
||||
height: 0.68rem;
|
||||
margin: 0 0.16rem 0 0.13rem;
|
||||
margin: 0 0.1rem 0 0.13rem;
|
||||
}
|
||||
|
||||
.item_child {
|
||||
|
||||
@ -5,16 +5,17 @@
|
||||
<img src="../../assets/image/real-time.png" alt="" />
|
||||
{{ deviceTypeName }}—{{ $t('videoMonitoring.title') }}<span class="outline" v-if="deviceState == 0">({{ $t('realTime.deviceOffline') }})</span>
|
||||
</div>
|
||||
<div class="flex-list realTime-bottom videoMonitoring-monitor">
|
||||
<div class="flex-list realTime-bottom videoMonitoring-monitor" :class="limitUserId==13?'noHeader':''">
|
||||
<div class="left-view" v-if="deviceName != 30">
|
||||
<div ref="monitor" class="monitor" id="monitor">
|
||||
<div ref="monitor" class="monitor" :class="cameraName==1?'':'center'" id="monitor">
|
||||
<!-- <video ref="videoPlayer" class="video-js" id="video-js"></video> -->
|
||||
<img v-if="imgUrl" class="video-js" :src="imgUrl" alt="">
|
||||
<div v-if="!imgUrl" ref="videoPlayer" class="video-js">
|
||||
|
||||
<img v-if="imgUrl" class="video-js" :src="imgUrl" alt="">
|
||||
<div v-if="!imgUrl" ref="videoPlayer" class="video-js">
|
||||
<div id="video-js"></div>
|
||||
</div>
|
||||
|
||||
<div class="video-control">
|
||||
<div class="video-control" v-if="cameraName==1">
|
||||
<div class="video-btn-big">
|
||||
<div class="top" @mousedown="downStart(0)">
|
||||
<div class="arrow"></div>
|
||||
@ -88,6 +89,9 @@ export default {
|
||||
imgUrl: '',
|
||||
url: '',
|
||||
nowNum: -1,
|
||||
limitUserId:1,
|
||||
|
||||
cameraName:1,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -98,6 +102,7 @@ export default {
|
||||
this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
|
||||
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
|
||||
this.deviceState = store.equipmentList[this.indexs - 1].deviceState
|
||||
this.cameraName=store.equipmentList[this.indexs - 1].cameraName
|
||||
clearInterval(this.statusInterval) && this.statusInterval
|
||||
this.imgUrl=''
|
||||
setTimeout(() => {
|
||||
@ -120,6 +125,7 @@ export default {
|
||||
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
|
||||
this.deviceState = store.equipmentList[this.indexs - 1].deviceState
|
||||
this.imgUrl=''
|
||||
this.cameraName=store.equipmentList[this.indexs - 1].cameraName
|
||||
clearInterval(this.statusInterval) && this.statusInterval
|
||||
setTimeout(() => {
|
||||
|
||||
@ -152,6 +158,7 @@ export default {
|
||||
this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
|
||||
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
|
||||
this.deviceState = store.equipmentList[this.indexs - 1].deviceState
|
||||
this.cameraName=store.equipmentList[this.indexs - 1].cameraName
|
||||
setTimeout(() => {
|
||||
that.dataInit();
|
||||
}, 0);
|
||||
@ -219,7 +226,7 @@ export default {
|
||||
createVideoNew(accessToken) {
|
||||
// divW和divH是获取了父级宽高 使播放容器能铺满div
|
||||
let divW = this.$refs.videoPlayer.clientWidth
|
||||
let divH = this.$refs.videoPlayer.clientHeight
|
||||
let divH = this.$refs.videoPlayer.clientHeight+(this.limitUserId==13?48:0)
|
||||
this.player = new EZUIKit.EZUIKitPlayer({
|
||||
id: 'video-js', // 视频容器ID
|
||||
accessToken: accessToken,
|
||||
@ -250,17 +257,37 @@ export default {
|
||||
this.api.getGethls(data2).then(res => {
|
||||
// console.log(res.data, 11);
|
||||
if (res.data.code == 200) {
|
||||
this.url = res.data.data.ezopen
|
||||
|
||||
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
|
||||
this.api.user_getjurisdiction(userInfo.userid).then((res1) => {
|
||||
if (res1.data.code == 200) {
|
||||
this.limitUserId = (res1.data.data.filter(el => el.id == 2 || el.id == 1 || el.id == 5 || el.id == 7 || el.id == 8 || el.id == 9 || el.id == 10 || el.id == 11|| el.id == 12|| el.id == 13))[0].id;
|
||||
this.url = res.data.data.ezopen
|
||||
this.accesstoken = res.data.data.accesstoken
|
||||
this.createVideoNew(res.data.data.accesstoken)
|
||||
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.imgUrl = nowDevice.hls
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
<style lang="scss">
|
||||
.videoMonitoring{
|
||||
.noHeader .header-controls{
|
||||
// .theme-icon-item{
|
||||
// display: none!important;
|
||||
// }
|
||||
display: none!important;
|
||||
|
||||
//
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user