xiaomeng/wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

摄像头修改

Browse Source
This commit is contained in:
home孙 2025-07-02 14:18:53 +08:00
parent 9842983b07
commit a3e4b319c3
7 changed files with 226 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/assets/css/main.css
View File

@ -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 { .tips-model {
padding: 10px; padding: 10px;
color: #fff; color: #fff;
@ -2311,11 +2336,19 @@ textarea {
position: relative; position: relative;
} }
.realTime .page-content .realTime-bottom .left-view > div.center {
justify-content: center;
}
.realTime .page-content .realTime-bottom .left-view > div .video-js { .realTime .page-content .realTime-bottom .left-view > div .video-js {
width: calc(100% - 400px); width: calc(100% - 400px);
height: 100%; 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 { .realTime .page-content .realTime-bottom .left-view > div #video-js {
position: absolute; position: absolute;
left: 0; left: 0;

35
src/assets/css/main.scss
View File

@ -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 { .tips-model {
padding: 10px; padding: 10px;
@ -2444,10 +2472,15 @@ textarea {
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
&.center{
justify-content: center;
}
.video-js { .video-js {
width: calc(100% - 400px); width: calc(100% - 400px);
height: 100%; height: 100%;
&.w-100{
width: 100%;
}
} }
#video-js { #video-js {

18
src/views/manage/deviceManage.vue
View File

@ -10,7 +10,7 @@
</div> </div>
<div class="flex-view"> <div class="flex-view">
<div class="manage-input w-180"> <div class="manage-input w-180">
<span class="input-title">{{$t('deviceManage.username')}}</span> <span class="input-title">{{$t('deviceManage.search.username')}}</span>
<input <input
class="search-input" class="search-input"
type="text" type="text"
@ -19,7 +19,7 @@
/> />
</div> </div>
<div class="manage-input w-180"> <div class="manage-input w-180">
<span class="input-title">{{$t('deviceManage.deviceCode')}}</span> <span class="input-title">{{$t('deviceManage.search.deviceCode')}}</span>
<input <input
class="search-input" class="search-input"
type="text" type="text"
@ -194,6 +194,14 @@
:placeholder="$t('placeholder.cameraChannelPlaceholder')" :placeholder="$t('placeholder.cameraChannelPlaceholder')"
/> />
</div> </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"> <div class="manage-text">
{{$t('deviceManagement.dialogs.noteText')}} {{$t('deviceManagement.dialogs.noteText')}}
@ -229,9 +237,11 @@ export default {
addModel1: false, addModel1: false,
nowData1: { nowData1: {
deviceState: 0, deviceState: 0,
cameraName:1,
}, },
deviceType: "", deviceType: "",
}; };
}, },
computed:{ computed:{
@ -282,6 +292,7 @@ export default {
this.nowData1.deviceTypeName = e this.nowData1.deviceTypeName = e
this.deviceType = e; this.deviceType = e;
}, },
openRoleModel(deviceId) { openRoleModel(deviceId) {
this.loading = this.$loading({ this.loading = this.$loading({
lock: true, lock: true,
@ -308,7 +319,7 @@ export default {
openAddModel1() { openAddModel1() {
this.nowData1 = { this.nowData1 = {
deviceState: 0, deviceState: 0,
cameraName:1,
}; };
this.deviceType='' this.deviceType=''
this.addModel1 = true; this.addModel1 = true;
@ -326,6 +337,7 @@ export default {
this.$message.error(this.$t('message.deviceNameRequired')); this.$message.error(this.$t('message.deviceNameRequired'));
return; return;
} }
var data = { var data = {
...this.nowData1, ...this.nowData1,
stationName: this.nowData1.deviceTypeName, stationName: this.nowData1.deviceTypeName,

53
src/views/page/largeScreen.vue
View File

@ -1378,6 +1378,7 @@ mapInit(){
// 添加标点 // 添加标点
const iconUrl = require("@/assets/img/axis1.png"); const iconUrl = require("@/assets/img/axis1.png");
const iconUrl1 = require("@/assets/img/wenshi.png");
const icon = new AMap.Icon({ const icon = new AMap.Icon({
image: iconUrl, image: iconUrl,
size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以根据需要进行调整或忽略 size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以根据需要进行调整或忽略
@ -1385,17 +1386,49 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
}); });
this.dataList.forEach((el,index)=>{ this.dataList.forEach((el,index)=>{
if(el.xaxis&&el.yaxis){ if(el.xaxis&&el.yaxis){
const marker = new AMap.Marker({ // const marker = new AMap.Marker({
position:new AMap.LngLat(el.xaxis,el.yaxis), // position:new AMap.LngLat(el.xaxis,el.yaxis),
icon: icon, // icon: icon,
title: "上海前卫柑桔有限公司", // title: "上海前卫柑桔有限公司",
offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点 // offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
}); // });
marker.on("click", function (e) { // 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" }); 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; padding-bottom: 0.1rem;
>img { >img {
width: 0.62rem; width: 0.68rem;
height: 0.68rem; height: 0.68rem;
margin: 0 0.16rem 0 0.13rem; margin: 0 0.1rem 0 0.13rem;
} }
.item_child { .item_child {

53
src/views/page/largeScreen2.vue
View File

@ -12,12 +12,16 @@
</div> </div>
<largeNav :active="1"></largeNav> <largeNav :active="1"></largeNav>
<div class="content scroll"> <div class="content scroll">
<div <div
class="video monitor" class="video monitor"
v-for="(item, index) in videoList" v-for="(item, index) in videoList"
:key="index" :key="index"
:id="'monitor' + index" :id="'monitor' + index"
> >
<div class="header">
{{item.name}}
</div>
<div <div
ref="videoPlayer" ref="videoPlayer"
class="video-js" class="video-js"
@ -65,20 +69,22 @@ export default {
this.getTime(); this.getTime();
this.typeList = this.$store.state.typeList; this.typeList = this.$store.state.typeList;
this.list1 = [ this.list1 = [
{ cameraid: "FT5712546", channelid: 1, player: null }, { cameraid: "FT5712546", channelid: 1, name:'二期 3#温室西面内部', player: null },
{ cameraid: "FT5712546", channelid: 2, player: null }, { cameraid: "FT5712546", channelid: 2, name:'二期 1#温室东面内部', player: null },
{ cameraid: "FT5712546", channelid: 3, player: null }, { cameraid: "FT5712546", channelid: 3, name:'二期 2#温室东面内部', player: null },
{ cameraid: "FT5712546", channelid: 4, player: null }, { cameraid: "FT5712546", channelid: 4, name:'二期 5#温室东面内部', player: null },
{ cameraid: "FT5712546", channelid: 5, player: null }, { cameraid: "FT5712546", channelid: 5, name:'二期 2#温室西面内部', player: null },
{ cameraid: "FT5712546", channelid: 6, player: null }, { cameraid: "FT5712546", channelid: 6, name:'二期 1#温室球机', player: null },
{ cameraid: "FT5712546", channelid: 7, player: null }, { cameraid: "FT5712546", channelid: 7, name:'二期 3#温室东面南侧内部', player: null },
{ cameraid: "FT5712546", channelid: 8, player: null }, { cameraid: "FT5712546", channelid: 8, name:'二期 1#温室西面内部', player: null },
{ cameraid: "FT5712546", channelid: 9, player: null }, { cameraid: "FT5712546", channelid: 9, name:'二期 4#温室东面内部', player: null },
{ cameraid: "FT5712546", channelid: 10, player: null }, { cameraid: "FT5712546", channelid: 10,name:'二期 5#温室西面内部', player: null },
{ cameraid: "FT5712546", channelid: 11, player: null }, { cameraid: "FT5712546", channelid: 11,name:'二期 4#温室球机', player: null },
{ cameraid: "FT5712546", channelid: 12, player: null }, { cameraid: "FT5712546", channelid: 12,name:'二期 5#温室球机', player: null },
{ cameraid: "FT5712546", channelid: 13, player: null }, { cameraid: "FT5712546", channelid: 13,name:'二期 3#温室东面北侧内部', player: null },
{ cameraid: "FT5712546", channelid: 14, 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 = [ this.list2 = [
@ -202,6 +208,16 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss">
.about .header-controls{
// .theme-icon-item{
// display: none!important;
// }
display: none!important;
//
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.about { .about {
width: 100%; width: 100%;
@ -313,6 +329,15 @@ export default {
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-row-gap: 0.2rem; //纵向间隔 grid-row-gap: 0.2rem; //纵向间隔
grid-column-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 { .video {
height: calc((100vh - 3.3rem) / 3); height: calc((100vh - 3.3rem) / 3);
.video-js { .video-js {

33
src/views/page/largeScreen3.vue
View File

@ -784,6 +784,7 @@ mapInit(){
// 添加标点 // 添加标点
const iconUrl = require("@/assets/img/axis1.png"); const iconUrl = require("@/assets/img/axis1.png");
const iconUrl1 = require("@/assets/img/wenshi.png");
const icon = new AMap.Icon({ const icon = new AMap.Icon({
image: iconUrl, image: iconUrl,
size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以根据需要进行调整或忽略 size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以根据需要进行调整或忽略
@ -792,16 +793,30 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
this.dataList.forEach((el,index)=>{ this.dataList.forEach((el,index)=>{
if(el.xaxis&&el.yaxis){ if(el.xaxis&&el.yaxis){
var marker = new AMap.Marker({ // var marker = new AMap.Marker({
position:new AMap.LngLat(el.xaxis,el.yaxis), // position:new AMap.LngLat(el.xaxis,el.yaxis),
icon: icon, // icon: icon,
title: "上海前卫柑桔有限公司", // title: "上海前卫柑桔有限公司",
offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点 // offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
}); // });
marker.on("click", function (e) { // 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" }); that.$router.push({ path: "/largeScreen1" });
}); });
map.add(marker);
map.add(marker); map.add(marker);
} }
@ -1303,9 +1318,9 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
padding-bottom: 0.1rem; padding-bottom: 0.1rem;
>img { >img {
width: 0.62rem; width: 0.68rem;
height: 0.68rem; height: 0.68rem;
margin: 0 0.16rem 0 0.13rem; margin: 0 0.1rem 0 0.13rem;
} }
.item_child { .item_child {

43
src/views/page/videoMonitoring.vue
View File

@ -5,16 +5,17 @@
<img src="../../assets/image/real-time.png" alt="" /> <img src="../../assets/image/real-time.png" alt="" />
{{ deviceTypeName }}—{{ $t('videoMonitoring.title') }}<span class="outline" v-if="deviceState == 0">({{ $t('realTime.deviceOffline') }})</span> {{ deviceTypeName }}—{{ $t('videoMonitoring.title') }}<span class="outline" v-if="deviceState == 0">({{ $t('realTime.deviceOffline') }})</span>
</div> </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 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> --> <!-- <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 id="video-js"></div>
</div> </div>
<div class="video-control"> <div class="video-control" v-if="cameraName==1">
<div class="video-btn-big"> <div class="video-btn-big">
<div class="top" @mousedown="downStart(0)"> <div class="top" @mousedown="downStart(0)">
<div class="arrow"></div> <div class="arrow"></div>
@ -88,6 +89,9 @@ export default {
imgUrl: '', imgUrl: '',
url: '', url: '',
nowNum: -1, nowNum: -1,
limitUserId:1,
cameraName:1,
} }
}, },
watch: { watch: {
@ -98,6 +102,7 @@ export default {
this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
this.deviceName = store.equipmentList[this.indexs - 1].deviceName this.deviceName = store.equipmentList[this.indexs - 1].deviceName
this.deviceState = store.equipmentList[this.indexs - 1].deviceState this.deviceState = store.equipmentList[this.indexs - 1].deviceState
this.cameraName=store.equipmentList[this.indexs - 1].cameraName
clearInterval(this.statusInterval) && this.statusInterval clearInterval(this.statusInterval) && this.statusInterval
this.imgUrl='' this.imgUrl=''
setTimeout(() => { setTimeout(() => {
@ -120,6 +125,7 @@ export default {
this.deviceName = store.equipmentList[this.indexs - 1].deviceName this.deviceName = store.equipmentList[this.indexs - 1].deviceName
this.deviceState = store.equipmentList[this.indexs - 1].deviceState this.deviceState = store.equipmentList[this.indexs - 1].deviceState
this.imgUrl='' this.imgUrl=''
this.cameraName=store.equipmentList[this.indexs - 1].cameraName
clearInterval(this.statusInterval) && this.statusInterval clearInterval(this.statusInterval) && this.statusInterval
setTimeout(() => { setTimeout(() => {
@ -152,6 +158,7 @@ export default {
this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
this.deviceName = store.equipmentList[this.indexs - 1].deviceName this.deviceName = store.equipmentList[this.indexs - 1].deviceName
this.deviceState = store.equipmentList[this.indexs - 1].deviceState this.deviceState = store.equipmentList[this.indexs - 1].deviceState
this.cameraName=store.equipmentList[this.indexs - 1].cameraName
setTimeout(() => { setTimeout(() => {
that.dataInit(); that.dataInit();
}, 0); }, 0);
@ -219,7 +226,7 @@ export default {
createVideoNew(accessToken) { createVideoNew(accessToken) {
// divW和divH是获取了父级宽高 使播放容器能铺满div // divW和divH是获取了父级宽高 使播放容器能铺满div
let divW = this.$refs.videoPlayer.clientWidth 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({ this.player = new EZUIKit.EZUIKitPlayer({
id: 'video-js', // 视频容器ID id: 'video-js', // 视频容器ID
accessToken: accessToken, accessToken: accessToken,
@ -250,17 +257,37 @@ export default {
this.api.getGethls(data2).then(res => { this.api.getGethls(data2).then(res => {
// console.log(res.data, 11); // console.log(res.data, 11);
if (res.data.code == 200) { 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.accesstoken = res.data.data.accesstoken
this.createVideoNew(res.data.data.accesstoken) this.createVideoNew(res.data.data.accesstoken)
}
});
} else { } else {
this.imgUrl = nowDevice.hls this.imgUrl = nowDevice.hls
} }
}) })
} }
}, },
}, },
} }
</script> </script>
<style lang="scss"></style> <style lang="scss">
.videoMonitoring{
.noHeader .header-controls{
// .theme-icon-item{
// display: none!important;
// }
display: none!important;
//
}
}
</style>