Skip to content

html / MeteorologicalBureau

Go to a project
Commit 3b1d6c26 by fengfan
Options

UI

parent bcd2ee22
Showing with 298 additions and 191 deletions
map/.DS_Store
No preview for this file type
map/css/main.css
*{
padding: 0;
margin: 0;
font-family:Microsoft YaHei;
* {
padding: 0;
margin: 0;
font-family: Microsoft YaHei;
}
.text-shadow{
text-shadow: 3px 0 5px rgba(255,255,255, 0.4), -3px 0 5px rgba(255,255,255, 0.4), 0 3px 5px rgba(255,255,255, 0.4), 0 -3px 5px rgba(255,255,255,0.4);
.text-shadow {
text-shadow: 3px 0 5px rgba(255, 255, 255, 0.4),
-3px 0 5px rgba(255, 255, 255, 0.4), 0 3px 5px rgba(255, 255, 255, 0.4),
0 -3px 5px rgba(255, 255, 255, 0.4);
}
body,
html,
#container {
margin: 0;
width: 100%;
height: 100%;
}
#nav{
position: fixed;
left: 40px;
top:200px;
z-index: 9999;
color: #fff;
}
#nav .item,.subnav div{
cursor:pointer;
}
html,
#container {
margin: 0;
width: 100%;
height: 100%;
}
#nav {
position: fixed;
left: 40px;
top: 200px;
z-index: 9999;
color: #fff;
}
#nav .item,
.subnav div {
cursor: pointer;
}
.icon{
display: block;
float: left;
width: 16px;
height: 16px;
background-size: 100% 100%;
margin-right: 5px;
}
.icon1{
background-image: url(../img/menuicon1.png);
}
.icon2{
background-image: url(../img/menuicon2.png);
background-size: 100% 70%;
background-repeat: no-repeat;
background-position: center center;
}
.icon3{
background-image: url(../img/menuicon3.png);
background-size: 300% 300%;
background-repeat: no-repeat;
background-position: center center;
}
.item{
position: relative;
width: 153px;
height: 35px;
box-sizing: border-box;
padding-left: 42px;
display: flex;
align-items: center;
justify-content: left;
margin-bottom:20px;
background-image: url(../img/menu.png);
background-size: 100% 100%;
}
.item.active {
background-image: none;
}
.item.active::after{
content: " ";
z-index:-1;
display: block;
width: 153px;
height: 300px;
background-image: url(../img/menuactive.png);
background-repeat: no-repeat;
background-position: 0 3px;
background-size: 100% auto;
position: absolute;
top:-25%;
left: 0;
z-index: -1;
}
.subnav{
display: none;
-webkit-user-select: none;user-select: none;
}
.subnav.active{
display: block;
}
.subnav div{
-webkit-user-select: none;user-select: none;
margin: 0 auto;
position: relative;
margin-bottom:20px;
background-image: url(../img/menu.png);
background-size: 100% 100%;
width: 139px;
height: 28px;
text-align: center;
line-height: 28px;
}
.subnav div.active::after{
-webkit-user-select: none;user-select: none;
content: " ";
z-index:-1;
display: block;
width: 139px;
height: 200px;
background-image: url(../img/menuactive.png) ;
background-repeat: no-repeat;
background-position: top;
background-size: 100% auto;
position: absolute;
left: 0;
top:-25%;
}
.icon {
display: block;
float: left;
width: 16px;
height: 16px;
background-size: 100% 100%;
margin-right: 5px;
}
.icon1 {
background-image: url(../img/menuicon1.png);
}
.icon2 {
background-image: url(../img/menuicon2.png);
background-size: 100% 70%;
background-repeat: no-repeat;
background-position: center center;
}
.icon3 {
background-image: url(../img/menuicon3.png);
background-size: 300% 300%;
background-repeat: no-repeat;
background-position: center center;
}
.item {
position: relative;
width: 153px;
height: 35px;
box-sizing: border-box;
padding-left: 42px;
display: flex;
align-items: center;
justify-content: left;
margin-bottom: 20px;
background-image: url(../img/menu.png);
background-size: 100% 100%;
}
.item.active {
background-image: none;
}
.item.active::after {
content: " ";
z-index: -1;
display: block;
width: 153px;
height: 300px;
background-image: url(../img/menuactive.png);
background-repeat: no-repeat;
background-position: 0 3px;
background-size: 100% auto;
position: absolute;
top: -25%;
left: 0;
z-index: -1;
}
.subnav {
display: none;
-webkit-user-select: none;
user-select: none;
}
.subnav.active {
display: block;
}
.subnav div {
-webkit-user-select: none;
user-select: none;
margin: 0 auto;
position: relative;
margin-bottom: 20px;
background-image: url(../img/menu.png);
background-size: 100% 100%;
width: 139px;
height: 28px;
text-align: center;
line-height: 28px;
}
.subnav div.active::after {
-webkit-user-select: none;
user-select: none;
content: " ";
z-index: -1;
display: block;
width: 139px;
height: 200px;
background-image: url(../img/menuactive.png);
background-repeat: no-repeat;
background-position: top;
background-size: 100% auto;
position: absolute;
left: 0;
top: -25%;
}
/* personpop */
#personpop{
position: fixed;
z-index: 999999;
left: 10px;
top: 10px;
/* border: 1px solid red; */
}
#personpop div{
/* border: 1px solid red; */
}
#box{
color: #fff;
width: 390px;
height: 390px;
background: url(../img/pop.png);
background-size: 100% 108%;
background-position: center bottom;
position: relative;
}
#close{
position: absolute;
right: 0;
top: 0;
width: 80px;
height: 40px;
z-index: 100;
}
#title{
text-align: center;
font-size: 24px;
line-height: 43px;
margin-bottom: 10px;
}
#contant{
width: 100%;
text-align: center;
font-size: 12px;
}
#contant div.li{
width: 80%;
height: 40px;
line-height: 43px;
font-size: 18px;
color: #dfe1e5;
margin: 0 auto;
border-bottom: 1px solid #27384e;
text-align: left;
clear: both;
}
#contant div:last-child{
border-bottom: none;
}
.li div{
width: 40%;
float: left;
}
#personpop {
position: fixed;
z-index: 999999;
left: 10px;
top: 10px;
/* border: 1px solid red; */
}
#personpop div {
/* border: 1px solid red; */
}
#box1 {
color: #fff;
width: 390px;
height: 390px;
background: url(../img/pop1.png);
background-size: 100% 106%;
background-position: center bottom;
position: relative;
}
#box1 #contant div.li {
width: 80%;
height: 47px;
line-height: 47px;
font-size: 18px;
color: #dfe1e5;
margin: 0 auto;
border: none;
text-align: left;
clear: both;
}
#box2 {
color: #fff;
width: 390px;
height: 390px;
background: url(../img/pop2.png);
background-size: 100% 107%;
background-position: center bottom;
position: relative;
}
#box2 #title {
margin-bottom: 19px;
}
#box2 #contant div.li {
width: 80%;
height: 52px;
line-height: 52px;
font-size: 18px;
color: #dfe1e5;
margin: 0 auto;
border: none;
text-align: left;
clear: both;
position: relative;
}
#box2 #contant div.li span {
position: absolute;
line-height: 23px;
top: 50%;
transform: translateY(-50%);
}
#box3 {
color: #fff;
width: 390px;
height: 390px;
background: url(../img/pop3.png);
background-size: 100% 107%;
background-position: center bottom;
position: relative;
}
#box3 #title {
margin-bottom: 16px;
}
#box3 #contant div.li {
width: 80%;
height: 40px;
line-height: 17px;
font-size: 18px;
color: #dfe1e5;
margin: 0 auto;
border: none;
text-align: left;
clear: both;
}
#box3 #contant div.li div {
line-height: 52px;
}
#close {
position: absolute;
right: 0;
top: 0;
width: 80px;
height: 40px;
z-index: 100;
}
#title {
text-align: center;
font-size: 24px;
line-height: 43px;
margin-bottom: 10px;
}
#contant {
width: 100%;
text-align: center;
font-size: 12px;
}
#contant div.li {
word-break: break-word;
width: 80%;
height: 40px;
line-height: 43px;
font-size: 18px;
color: #dfe1e5;
margin: 0 auto;
border-bottom: 1px solid #27384e;
text-align: left;
clear: both;
}
#contant div:last-child {
border-bottom: none;
}
.li div {
width: 40%;
float: left;
height: 100%;
}
.hide{
display: none;
opacity: 0;
}
\ No newline at end of file
.hide {
display: none;
opacity: 0;
}
map/js/Map3D.js
......@@ -125,17 +125,29 @@ class Map3D {
setPersonalPoint(item) {
console.log(item);
var html = `
<div id=box>
<div id=title>${item.name}</div>
<div id=box1>
<div id=title>信息员</div>
<div id=contant>
<div class=li>
<div>地址</div>${item.address}
<div>姓名</div>${item.name||'-'}
</div>
<div class=li>
<div>性别</div>${item.a||'后台没有字段'}
</div>
<div class=li>
<div>年龄</div>${item.a||'后台没有字段'}
</div>
<div class=li>
<div>电话</div>${item.telephone||'-'}
</div>
<div class=li>
<div>电话</div>${item.telephone}
<div>地址</div>${item.address||'-'}
</div>
<div class=li>
<div>职位</div>${item.role}
<div>任职状态</div>${item.isappoint||'-'}
</div>
<div class=li>
<div>主管领导电话</div>${item.a||'后台没有字段'}
</div>
</div>
<div id=close onclick="popclose()"></div>
......@@ -181,17 +193,26 @@ class Map3D {
var lon = res.districtList[0].center.lng
var lat = res.districtList[0].center.lat
var html = `
<div id=box>
<div id=title>${item.USERNAME}</div>
<div id=box2>
<div id=title>应急责任人</div>
<div id=contant>
<div class=li>
<div>区域</div>${item.CITY}${item.COUNTY}
<div>姓名</div>${item.USERNAME||'-'}
</div>
<div class=li>
<div>邮箱</div>${item.a||'后台没有字段'}
</div>
<div class=li>
<div>年龄</div>${item.a||'后台没有字段'}
</div>
<div class=li>
<div>电话</div>${item.MOBILE}
<div>电话</div>${item.MOBILE||'-'}
</div>
<div class=li>
<div>职级</div>${item.DUTY}
<div>地址</div>${(item.CITY+item.COUNTY)||'-'}
</div>
<div class=li>
<div>职级</div>${item.a||'后台没有字段'}
</div>
</div>
<div id=close onclick="popclose()"></div>
......@@ -287,18 +308,30 @@ class Map3D {
}
setEquipmentPoint(item) {
var name = '大喇叭',
imagestr= 'img/大喇叭.png';
if(item.clientStyle==2)name = '显示屏',imagestr= 'img/显示屏.png';
if(item.clientStyle==3)name = '北斗',imagestr= 'img/北斗.png';
imagestr= 'img/喇叭1.png';
if(item.clientStyle==2)name = '显示屏',imagestr= 'img/显示屏1.png';
if(item.clientStyle==3)name = '北斗',imagestr= 'img/卫星1.png';
var html = `
<div id=box>
<div id=box2>
<div id=title>${name}</div>
<div id=contant>
<div class=li>
<div>状态</div>${item.clientStatus }
<div>设备状态</div><span>${item.clientStatus?'正常':'故障' }</span>
</div>
<div class=li>
<div>设备编号</div><span>${item.a ||'后台没有字段'}</span>
</div>
<div class=li>
<div>安装地址</div><span>${item.clientAddress||'-' }</span>
</div>
<div class=li>
<div>地址</div>${item.clientAddress }
<div>设备联系人</div><span>${item.a ||'后台没有字段'}</span>
</div>
<div class=li>
<div>联系电话</div><span>${item.a ||'后台没有字段'}</span>
</div>
<div class=li>
<div>厂商</div><span>${item.a ||'后台没有字段'}</span>
</div>
</div>
<div id=close onclick="popclose()"></div>
......@@ -312,11 +345,11 @@ class Map3D {
var icon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(20, 20),
size: new AMap.Size(40, 40),
// 图标的取图地址
image: imagestr,
// 图标所用图片大小
imageSize: new AMap.Size(20, 20),
imageSize: new AMap.Size(40, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
});
......@@ -325,7 +358,7 @@ class Map3D {
clickable: true,
position: new AMap.LngLat(Number(item.lon), Number(item.lat)), //基点位置
icon: icon || imagestr, //marker图标，直接传递地址url icon||
offset: { x: -10, y: -10 } //相对于基点的位置
offset: { x: -20, y: -20 } //相对于基点的位置
});
marker._data = item
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment