diff --git a/src/assets/css/main.css b/src/assets/css/main.css index ee617822..91e23a58 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -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; diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 4c5a8361..4912fbf1 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -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 { diff --git a/src/views/manage/deviceManage.vue b/src/views/manage/deviceManage.vue index 988e1537..e65bf37e 100644 --- a/src/views/manage/deviceManage.vue +++ b/src/views/manage/deviceManage.vue @@ -10,7 +10,7 @@
- {{$t('deviceManage.username')}} + {{$t('deviceManage.search.username')}}
- {{$t('deviceManage.deviceCode')}} + {{$t('deviceManage.search.deviceCode')}}
- +
+
摄像头右侧控制面板(1为显示)
+ +
+
{{$t('deviceManagement.dialogs.noteText')}}
@@ -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, diff --git a/src/views/page/largeScreen.vue b/src/views/page/largeScreen.vue index 4352ebc3..74e9e144 100644 --- a/src/views/page/largeScreen.vue +++ b/src/views/page/largeScreen.vue @@ -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=`
+ + ${el.greenhouseName} +
` + 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 { diff --git a/src/views/page/largeScreen2.vue b/src/views/page/largeScreen2.vue index a7e8686d..3cd098b5 100644 --- a/src/views/page/largeScreen2.vue +++ b/src/views/page/largeScreen2.vue @@ -12,12 +12,16 @@
+
+
+ {{item.name}} +
{ @@ -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 { }, }; + \ No newline at end of file + \ No newline at end of file