feath:登陆修改,首页跳转和设备地图研发

This commit is contained in:
xuyoubin 2023-11-24 16:48:29 +08:00
parent f671e40629
commit 2357122f44
8 changed files with 180 additions and 3 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 390 KiB

View File

@ -60,6 +60,10 @@ export default {
this.title = '九龙坡区城市管理系统'
document.title = '九龙坡区城市管理系统升级维护平台'
break;
case '9190':
this.title = '石坪桥街道老旧小区改造提升平台'
document.title = '石坪桥街道老旧小区改造提升平台'
break;
default:
this.title = ''
document.title = ''

View File

@ -4,6 +4,7 @@
<energy-home v-else-if="port === '9160'"></energy-home>
<machinery-home v-else-if="port === '9170'"></machinery-home>
<operate-home v-else-if="port === '80' || port === ''"></operate-home>
<deviceMap v-else-if="port === '9190'"></deviceMap>
<home-page v-else></home-page>
</div>
</template>
@ -12,13 +13,14 @@ import HomePage from './home.vue'
import OperateHome from './operation/home/index.vue'
import EnergyHome from './energy/home/index.vue'
import MachineryHome from './machinery/home/index.vue'
import deviceMap from './monitorMap/deviceMap/index.vue'
export default {
components: {
HomePage,
OperateHome,
EnergyHome,
MachineryHome
MachineryHome,
deviceMap
},
data() {
return {

View File

@ -89,7 +89,7 @@ export default {
},
loading: false,
//
captchaEnabled: true,
captchaEnabled: false,
//
register: false,
redirect: undefined
@ -148,6 +148,11 @@ export default {
loginDom.style.backgroundImage = 'url(/images/jp.png)'
this.redirect = '/index'
break;
case '9190':
document.title = '石坪桥街道老旧小区改造提升平台'
loginDom.style.backgroundImage = 'url(/images/spq.png)'
this.redirect = '/index'
break
default:
document.title = ''
loginDom.style.backgroundImage = 'url(/images/gangyin-bg.png)'

View File

@ -0,0 +1,153 @@
<template>
<div class="box">
<div id='map'>
</div>
<div class="box-item">
<div>
<img :src="icon" alt="">
<p>摄像头</p>
</div>
<div>
<img :src="icon2" alt="">
<p>球机</p>
</div>
</div>
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
securityJsCode: "2933fa5683de5f95c0337aa5ff6a1174",
};
export default {
name: "map-view",
data() {
return {
icon:require('../../../../public/images/monitorMapImage/sxt.jpg'),
icon2:require('../../../../public/images/monitorMapImage/qt.webp')
}
},
mounted() {
console.log(this.icon);
this.initAMap();
},
methods:{
initAMap(){
AMapLoader.load({
key: "0324b5aea42065e5bbcde850eed8cbef", // WebKey load
plugins: [], // 使'AMap.Scale'
})
.then((AMap) => {
this.map = new AMap.Map("map", {
zoom: 17, //
center: [106.503005,29.515668], //
});
// AMap.Icon
const icon = new AMap.Icon({
size: new AMap.Size(25, 25), //
image: this.icon, // Icon
imageSize: new AMap.Size(25, 25) //
});
const icon2 = new AMap.Icon({
size: new AMap.Size(25, 25), //
image: this.icon2, // Icon
imageSize: new AMap.Size(25, 25) //
});
//
function CreateMarker(a,b){
return new AMap.Marker({
position: new AMap.LngLat(106.503005,29.516668),
offset: new AMap.Pixel(a, b),
icon: icon, // Icon URL
title: '摄像头'
});
}
function CreateMarker2(a,b){
return new AMap.Marker({
position: new AMap.LngLat(106.503005,29.516668),
offset: new AMap.Pixel(a, b),
icon: icon2, // Icon URL
title: '摄像头'
});
}
let markerList=[CreateMarker(-500,-150),CreateMarker(-350,-50),CreateMarker(-100,200),CreateMarker(50,-270),CreateMarker(150,-200)]
let markerList2=[CreateMarker2(-190,-180),CreateMarker2(280,60)]
this.map.add(markerList);
this.map.add(markerList2)
//
markerList.forEach(item=>{
item.on('click',(e)=>{
this.showInfo(e.lnglat.lng,e.lnglat.lat,'五洲小区东区彩虹广场','AI摄像头-CAM90801')
})
})
markerList2.forEach(item=>{
item.on('click',(e)=>{
this.showInfo(e.lnglat.lng,e.lnglat.lat,'澳元域33号楼电梯','AI摄像头-CAM91701')
})
})
})
},
//
showInfo(lng,lat,msg,number){
const content = `
<div style="padding: 6px;background-color: #c6dbee;width:200px">
<div>
<div style="padding: 4px;fontweigth:500"><b>${number}</b></div>
<div style="padding: 4px;margin:5px 0">${msg}</div>
<div style="padding: 4px;">正常运行</div>
</div>
</div>
`;
const infoWindow = new AMap.InfoWindow({
content,
anchor: 'middle-left',
isCustom: true
});
infoWindow.open(this.map, [lng, lat])
setTimeout(() => {
infoWindow.close()
}, 3000);
}
},
}
</script>
<style lang="scss">
#map{
width: 100vw;
height: 100vh;
}
.box{
width: 100%;
height:100vh;
position: relative;
}
.box-item{
width: 150px;
padding: 10px 5px;
position: absolute;
display: flex;
align-items: center;
justify-content: space-around;
left: 10px;
background-color: #ffffff8b;
top:10px;
z-index: 5;
border: 1px solid #ffffff28;
img{
text-align: center;
width: 30px;
height: 30px;
}
p{
font-size: 14px;
}
}
</style>

View File

@ -0,0 +1,13 @@
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="">
</style>