Skip to content

W
wuye-monitor
Commit ad686abd authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

第一屏页面

parent d07ccf95
Show whitespace changes
Inline Side-by-side
Showing with 885 additions and 106 deletions
index.html
View file @ ad686abd
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
font-size: 1.6vh; font-size: 1.6vh;
} }
</style> </style>
<script type='text/javascript' src='https://api.map.baidu.com/api?v=2.0&ak=MvCb6BWu4jHR9TD0svHfO4bWlx9pA9HG'></script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
src/assets/css/variables.styl
View file @ ad686abd
...@@ -3,8 +3,9 @@ $font-pang = Pangmenzhengdao, 'Avenir', Helvetica, Arial, sans-serif ...@@ -3,8 +3,9 @@ $font-pang = Pangmenzhengdao, 'Avenir', Helvetica, Arial, sans-serif
$font-din = DIN, 'Avenir', Helvetica, Arial, sans-serif $font-din = DIN, 'Avenir', Helvetica, Arial, sans-serif
$color-map(opacity = 0.3) $color-map(opacity = 0.3)
rgba(91, 213, 255, opacity) rgba(91, 213, 255, opacity)
$color-green = #71C012 $color-green = #82DF12
$gd-layout(gap = 1rem) $color-blue = #47B3FF
$layout(gap = 0.6rem)
width 100% width 100%
height 100% height 100%
background-size cover background-size cover
...@@ -13,12 +14,12 @@ $gd-layout(gap = 1rem) ...@@ -13,12 +14,12 @@ $gd-layout(gap = 1rem)
position relative position relative
display grid display grid
grid-gap gap grid-gap gap
padding 1rem padding 0 gap gap
$fontColor = #2c3e50 $fontColor = #2c3e50
$edgeColor = #2ee4f5 $edgeColor = #00f2ff
$cardBg = rgba(19, 78, 115, 0.4) $cardBg = rgba(0, 242, 255, 0.1)
$cardBorder = 0.1rem solid #1c425f $cardBorder = 0.1rem solid #1c425f
$cardFontColor = #0eb2ee $cardFontColor = #5bd5ff
src/components/MonitorCard/monitor-card.vue
View file @ ad686abd
<template> <template>
<div class="monitor-card"> <div class="monitor-card">
<div v-if="mode == 1" class="card-wrapper"> <div v-if="mode == 1" class="card-wrapper left">
<div class="card-title"> <div class="card-title">
<span class="s"/> {{title}}
<span class="m"/> <div class="dot"/>
<p>{{title}}</p> <div class="line"/>
<span class="m"/>
<span class="s"/>
</div> </div>
<div class="edge left-top"/> <div class="card-content">
<div class="edge right-top"/>
<div class="edge left-bottom"/>
<div class="edge right-bottom"/>
<div class="edge shadow left"/>
<div class="edge shadow right"/>
<slot /> <slot />
</div> </div>
<div v-else-if="mode == 2" class="map-card-wrapper"> </div>
<div class="card-title">{{title}}</div> <div v-else-if="mode == 2" class="card-wrapper right">
<div class="card-title">
<div class="line"/>
<div class="dot"/>
{{title}}
</div>
<div class="card-content"> <div class="card-content">
<div class="edge left-bottom"/>
<div class="edge right-bottom"/>
<slot /> <slot />
</div> </div>
</div> </div>
...@@ -54,94 +50,28 @@ $size() ...@@ -54,94 +50,28 @@ $size()
.card-wrapper .card-wrapper
$size() $size()
background $cardBg background $cardBg
// border $cardBorder
box-shadow inset 0 0 0.8rem rgba(100,200,255,0.5)
padding 0.5rem 1rem padding 0.5rem 1rem
position relative position relative
>.card-title
display flex
align-items center
color $cardFontColor
border-bottom $cardBorder
padding-bottom 0.5rem
font-size 1.2rem
font-weight 460
p
margin 0 0.5rem
span
display inline-block
background $edgeColor
margin 0 0.1rem
&.s
width 0.2rem
height 1rem
opacity 0.5
&.m
width 0.3rem
height 1.2rem
>.edge
position absolute
width 1rem
height 1rem
border: 0.12rem solid $edgeColor
&.left-top
border-right-color transparent
border-bottom-color transparent
top $edgeWidth
left $edgeWidth
&.right-top
border-left-color transparent
border-bottom-color transparent
top $edgeWidth
right $edgeWidth
&.left-bottom
border-right-color transparent
border-top-color transparent
bottom $edgeWidth
left $edgeWidth
&.right-bottom
border-left-color transparent
border-top-color transparent
bottom $edgeWidth
right $edgeWidth
&.shadow
background $edgeColor
height 24%
width 0.1rem
border none
top 0
bottom 0
margin auto
&.left &.left
left 0 border-right 0.2rem solid $edgeColor
box-shadow 1px 0px 6px 1px $edgeColor
&.right &.right
right 0 border-left 0.2rem solid $edgeColor
box-shadow -1px 0px 6px 1px $edgeColor
.map-card-wrapper
$size()
.card-title .card-title
color #fff display flex
align-items center
color $cardFontColor
font-size 1.4rem font-size 1.4rem
font-family $font-pang font-family $font-pang
.dot
width 0.4rem
height 1rem
background $edgeColor
margin 0 0.5rem
.line
height 1px
flex 1
background $edgeColor
opacity 0.3
.card-content .card-content
background $color-map(0.1)
border-top 0.12rem solid $edgeColor
height calc(100% - 2rem) height calc(100% - 2rem)
position relative
>.edge
position absolute
width 1rem
height 1rem
border: 0.12rem solid $edgeColor
&.left-bottom
border-right-color transparent
border-top-color transparent
bottom $edgeWidth
left $edgeWidth
&.right-bottom
border-left-color transparent
border-top-color transparent
bottom $edgeWidth
right $edgeWidth
</style> </style>
src/views/components/baidu.vue 0 → 100644
View file @ ad686abd
<template>
<div class="dataview-map-container">
<div id="allmap" ref="allmap" :style="mapStyle" />
</div>
</template>
<script>
const { BMap, BMAP_STATUS_SUCCESS } = window
export default {
name: 'BaiduMap',
data() {
return {
map: '',
address: '',
}
},
props: {
height: {
type: String,
// default: '36rem',
default: '100vh',
},
// width: {
// type: Number,
// default: 800
// },
isInModal: {
type: Boolean,
default: false,
},
keyWords: {// 搜索地址的关键字
type: [String]
},
setPosition: {
type: [String]
},
position: {// 地图对应的经纬度（坐标）
type: Object
},
},
methods: {
// init
showMap() {
const map = new BMap.Map(this.$refs.allmap)
map.setMapStyle({style: 'midnight'})
this.map = map// 创建Map实例
var point = new BMap.Point(121.53, 31.22)
this.map.centerAndZoom('上海', 12)
var marker = new BMap.Marker(point) // 创建标注
this.map.addOverlay(marker) // 将标注添加到地图中
var point2 = new BMap.Point(121.48, 31.23)
var marker2 = new BMap.Marker(point2) // 创建标注
this.map.addOverlay(marker2) // 将标注添加到地图中
this.map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
this.map.disableDragging() // 禁止拖拽
let vm = this
setTimeout(function() {
vm.map.enableDragging() // 两秒后开启拖拽
}, 2000)
this.map.addEventListener('click', this.add_overlay)
},
// 添加覆盖物
// add_overlay(e) {
// this.remove_overlay()
// var point = new BMap.Point(e.point.lng, e.point.lat)
// var marker = new BMap.Marker(point) // 创建标注
// this.map.addOverlay(marker) // 将标注添加到地图中
// marker.enableDragging()
// this.addressByPoint(e.point)
// },
// 清除覆盖物
remove_overlay() {
this.map.clearOverlays()
},
// 获取第一个智能搜索的结果添加标注
setPlace(point) {
this.map.clearOverlays() // 清除地图上所有覆盖物
var pp = point // 获取第一个智能搜索的结果
this.setZoom([pp])
// this.map.centerAndZoom(pp, this.setZoom(pp))
let marker = new BMap.Marker(pp)
this.map.addOverlay(marker) // 添加标注
marker.enableDragging()
this.addressByPoint(point)
// 拖拽结束事件
let vm = this
marker.addEventListener('dragend', function(e) {
vm.addressByPoint(e.point)
})
},
// 搜索
searchKeyWords(word) {
let vm = this
var options = {
onSearchComplete: function(results) {
// 判断状态是否正确
if (local.getStatus() === BMAP_STATUS_SUCCESS) {
// 返回搜索结果
vm.$emit('on-result', results)
}
}
}
var local = new BMap.LocalSearch(this.map, options)
local.search(word)
},
// 根据点坐标获取地址信息
addressByPoint(e) {
let vm = this
var geocoder = new BMap.Geocoder()
geocoder.getLocation(e, function(rs) {
let obj = rs.addressComponents
obj.address = rs.address
let data = obj
let address
if (vm.address === '') {
address = rs.address
} else {
address = vm.address
}
// 地图坐标发生变化，返回地址数据
vm.$emit('on-change', data, address)
vm.address = ''
})
},
// 根据点的数组自动调整缩放级别
setZoom(bPoints) {
var view = this.map.getViewport(bPoints)
var mapZoom = view.zoom
var centerPoint = view.center
this.map.centerAndZoom(centerPoint, mapZoom)
}
},
mounted() {
this.showMap()
},
computed: {
mapStyle() {
let render = {}
if (this.height) {
render.height = this.height
}
render.width = '100%'
render.margin = '0 auto'
return render
}
},
watch: {
keyWords() {
this.searchKeyWords(this.keyWords)
},
position() {
this.address = ''
this.address = this.position.address
let point = this.position.point
if (JSON.stringify(point) !== '{}') {
this.setPlace(point)
}
}
}
}
</script>
<style scoped>
.dataview-map-container {
position: relative;
}
.dataview-map-container .expand-btn {
position: absolute;
top: 0.2rem;
right: 0.2rem;
font-size: 2rem;
font-weight: bold;
cursor: pointer;
color: rgba(255, 255, 255, 0.5);
}
.dataview-map-container .expand-btn:hover {
color: rgba(255, 255, 255, 1);
}
</style>
<style>
/* 去掉百度地图相关logo */
.anchorBL{
display: none;
}
.anchorTR {
display: none;
}
</style>
src/views/components/community-list.vue 0 → 100644
View file @ ad686abd
<template>
<div class="community-list">
<div v-for="(item, index) in list" :key="index" :class="getClass(index + 1)">
<div class="dot" />
{{item}}
</div>
</div>
</template>
<script>
export default {
name: 'CommunityList',
data() {
return {
list: [
'金港花园一期',
'顺驰蓝调国际',
'枫蓝国际中心',
'旺座中心',
'美林·香槟小镇',
'定福家园',
'万豪君天下',
'永泰园-新风景',
'光彩国际公寓',
'城市复兴·华城',
'万泉新新家园',
'金地·格林小镇',
],
}
},
methods: {
getClass(i) {
const row = Math.ceil(i / 2)
if (row % 2 === 0) {
return 'row-even'
} else {
return 'row-odd'
}
}
}
}
</script>
<style lang="stylus" scoped>
.community-list
display flex
flex-wrap wrap
width 100%
height 100%
>div
display flex
align-items center
width 46%
padding 0.5rem
color #fff
margin-right 0.5rem
&.row-even
background rgba(0,0,0,0.2)
.dot
background $color-green
.dot
width 0.2rem
height 1rem
background gold
margin-right 1rem
</style>
src/views/components/day-check-comparison.vue 0 → 100644
View file @ ad686abd
<template>
<div class="check-comparison">
<span class="line line1"/>
<span class="line line2"/>
<span class="label label1">
<span class="dot"/>
开具整改单数：12
</span>
<span class="label label2">
完成检查小区数：64
<span class="dot"/>
</span>
<div>
<span v-for="i in 36" :key="i" :class="getClass(i)"/>
</div>
</div>
</template>
<script>
export default {
name: 'DayCheckComparison',
methods: {
getClass(i) {
if (i < 10) {
return 'red'
} else {
return 'blue'
}
}
}
}
</script>
<style lang="stylus" scoped>
.check-comparison
width 100%
height 100%
display flex
align-items center
position relative
.line
position absolute
width 1px
height 2rem
&.line1
background red
left 3%
top 30%
&.line2
background $color-blue
right 3%
bottom 30%
.label
position absolute
display flex
align-items center
.dot
display inline-block
width 0.4rem
height 0.4rem
border-radius 50%
&.label1
color red
left 2.4%
top 22.5%
.dot
margin-right 0.5rem
background red
&.label2
color $color-blue
right 2.2%
bottom 22.5%
.dot
background $color-blue
margin-left 0.5rem
>div
background-color rgba(0,0,0,0.8)
border-radius 0.5rem
padding 0.5rem
height 2rem
width 100%
display flex
justify-content space-around
>span
width 2%
height 100%
border-radius 0.1rem
&.red
background red
box-shadow 0 0 0.3rem 0.1rem red
&.blue
background $color-blue
box-shadow 0 0 0.3rem 0.1rem $color-blue
</style>
src/views/components/day-check-situation.vue 0 → 100644
View file @ ad686abd
<template>
<div class="situation-container">
<div v-for="(item, index) in list" :key="item.label" :class="`box box${index + 1}`">
<p>{{item.label}}</p>
<div>
<img :src="require(`@/assets/images/${item.icon}.png`)" />
<span><m-count :value="item.count" :decimal="0" /></span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DayCheckSituation',
data() {
return {
list: [
{
label: '检查主题数',
icon: 'theme',
count: 3,
},
{
label: '检查人员数',
icon: 'person',
count: 9,
},
{
label: '完成检查小区数',
icon: 'complete',
count: 64,
},
{
label: '开具整改单数',
icon: 'rectify',
count: 12,
},
]
}
}
}
</script>
<style lang="stylus" scoped>
.situation-container
display grid
width 100%
height 100%
grid-template-areas \
'box1 box2'\
'box3 box4'
grid-template-rows 1fr 1fr
grid-template-columns 1fr 1fr
grid-gap 0.5rem
padding 1rem 0
font-size 0.8rem
.box
background rgba(0,0,0,0.3)
padding 0.5rem 1rem
&:nth-child(3)
span
color $color-blue
text-shadow 0 0 0.3rem $color-blue
&:nth-child(4)
span
color red
text-shadow 0 0 0.3rem red
p
color #ccc
img
width 3rem
span
font-family $font-pang
font-size 2.2rem
margin-left 0.2rem
color $color-green
text-shadow 0 0 0.3rem $color-green
.box1
grid-area box1
.box2
grid-area box2
.box3
grid-area box3
.box4
grid-area box4
</style>
src/views/components/map-operate.vue 0 → 100644
View file @ ad686abd
<template>
<div class="map-operate">
<img class="top-left" src="@/assets/images/top-left.png" />
<img class="top-right" src="@/assets/images/top-right.png" />
<img class="bottom" src="@/assets/images/bottom.png" />
<div class="map-menu">
<img class="menu-btn" src="@/assets/images/list-btn.png"/>
<div class="menu">
<div
v-for="item in mapTypes"
:key="item"
:class="`${item == curMapType ? 'on' : ''}`"
@click="choiceMapType(item)"
>
{{item}}
</div>
</div>
</div>
<div class="btn-list">
<img
v-for="btn in btns"
:key="btn"
:src="require(`@/assets/images/${btn}.png`)"
:class="`${btn == curBtn ? 'on' : ''}`"
@click="handleClick(btn)"
/>
</div>
</div>
</template>
<script>
export default {
name: 'MapOperate',
data() {
return {
btns: [
'plus',
'minus',
'full',
'refresh',
'search',
],
curBtn: null,
mapTypes: ['暗色地图', '政务地图', '航空影像', '2.5维地图', '简易地形图'],
curMapType: '暗色地图',
}
},
methods: {
handleClick(btn) {
this.curBtn = btn == this.curBtn ? null : btn
},
choiceMapType(type) {
this.curMapType = type
},
}
}
</script>
<style lang="stylus" scoped>
.map-operate
position relative
.map-menu
position absolute
top 1rem
right 1rem
&:hover
>.menu
display block
.menu-btn
width 2rem
cursor pointer
position absolute
right 0
padding-bottom 1rem
.menu
position absolute
top 2rem
right 0
width 10rem
padding 0.5rem
border 0.1rem solid $color-map(0.5)
margin-top 0.5rem
background $color-map(0.2)
display none
>div
cursor pointer
color #fff
text-align center
line-height 2rem
&:hover
background $color-map()
&.on
background $color-map()
color $edgeColor
>img
position absolute
width 18%
&.top-left
top 0
left 0
&.top-right
top 0
right 0
&.bottom
bottom 0
left 0
right 0
width 100%
.btn-list
display flex
justify-content space-around
position absolute
bottom 1rem
width 30%
left 0
right 0
margin 0 auto
>img
width 3rem
cursor pointer
transition all 0.3s
&:hover
transform scale(1.3)
&.on
transform scale(1.3)
transform translate(0, -0.5rem)
</style>
src/views/components/person-list.vue 0 → 100644
View file @ ad686abd
<template>
<div class="person-list">
<div v-for="(item, index) in list" :key="index">
<img src="@/assets/images/location.png"/>
<span>{{item}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'PersonList',
data() {
return {
list: [
'张三',
'李四',
'王五',
'赵柳',
'陈琦',
'周八',
'郑九',
'石十',
'赵二',
]
}
},
}
</script>
<style lang="stylus" scoped>
.person-list
display flex
flex-wrap wrap
width 100%
height 100%
>div
display flex
align-items center
width 33.3%
padding 0.5rem 1rem
img
width 1rem
margin-right 0.8rem
span
color #fff
</style>
src/views/components/theme-list.vue 0 → 100644
View file @ ad686abd
<template>
<div class="theme-list">
<div v-for="(item, index) in list" :key="index">
<div class="flag" :style="`background-image:url(${require('@/assets/images/flag-bg.png')})`">{{item.flag}}</div>
<div class="content">
<p class="title" :title="item.title">{{item.title | check}}<span>{{item.tag}}</span></p>
<p class="date">{{item.date}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ThemeList',
data() {
return {
list: [
{
flag: '市',
title: '检查主题名称',
date: '2020-01-07 ~ 2020-01-30',
tag: '日常',
},
{
flag: '区',
title: '检查主题名称',
date: '2020-01-07 ~ 2020-01-30',
tag: '专项',
},
{
flag: '房',
title: '检查主题名称检查主题名称检查题名称检查题名称检查',
date: '2020-01-07 ~ 2020-01-30',
tag: '重点',
},
{
flag: '区',
title: '检查主题名称检查主题名称',
date: '2020-01-07 ~ 2020-01-30',
tag: '日常',
},
]
}
},
filters: {
check(val) {
if (val && val.length > 13) {
return ([].slice.call(val, 0, 13)).join('') + '...'
} else {
return val
}
}
}
}
</script>
<style lang="stylus" scoped>
.theme-list
width 100%
height 100%
>div
display flex
align-items center
margin 1rem 0
.flag
display flex
align-items center
justify-content center
width 3rem
height 3rem
background-position center
background-size cover
color $edgeColor
font-size 1.5rem
font-weight bold
margin-right 0.5rem
.title
color #fff
>span
font-size 0.9rem
color $edgeColor
border 0.1rem solid $edgeColor
border-radius 0.3rem
padding 0 0.2rem
background-color $color-map()
margin-left 0.5rem
.date
font-size 0.9rem
color #aaa
</style>
src/views/components/title.vue 0 → 100644
View file @ ad686abd
<template>
<div id="title" ref="title">
<img :src="bgImg"/>
<img class="arrow" :src="arrowImg"/>
<p><slot /></p>
</div>
</template>
<script>
const titleBg = require('@/assets/images/title-bg.png')
const titleArrow = require('@/assets/images/title-arrow.png')
export default {
name: 'ThemeTitle',
data() {
return {
bgImg: titleBg,
arrowImg: titleArrow,
}
},
}
</script>
<style lang="stylus" scoped>
#title
display flex
align-items center
justify-content center
position relative
background-size cover
background-position center
>img
position absolute
width 100%
height 130%
top 0
left 0
&.arrow
width 3rem
height 2rem
left 0
right 0
margin auto
top 120%
>p
font-family $font-pang
font-size 2.8rem
margin-top 1rem
text-shadow 0 0.2rem 0.4rem #25e7f6
background-clip text
-webkit-background-clip text
color #25e7f6
-webkit-text-fill-color transparent
background-image linear-gradient(to bottom, #fff, #25e7f6)
</style>
src/views/main.vue
View file @ ad686abd
<template> <template>
<div> <div class="container">
<div id="map">
<!-- <BaiduMap/> -->
</div>
<ThemeTitle class="title">
物业督查实时专题图
</ThemeTitle>
<MapOperate class="map"/>
<div class="box1">
<m-card title="当日检查情况">
<DayCheckSituation />
</m-card>
</div>
<div class="box2">
<m-card title="检查人员列表" mode="2">
<PersonList />
</m-card>
</div>
<div class="box3">
<m-card title="检查主题列表">
<ThemeList />
</m-card>
</div>
<div class="box4">
<m-card title="完成检查小区列表" mode="2">
<CommunityList />
</m-card>
</div>
<div class="box5">
<m-card title="当日检查情况对比">
<DayCheckComparison />
</m-card>
</div>
<div class="box6">
<m-card title="开具整改单列表" mode="2">
<CommunityList />
</m-card>
</div>
</div> </div>
</template> </template>
<script> <script>
import BaiduMap from './components/baidu'
import ThemeTitle from './components/title'
import DayCheckSituation from './components/day-check-situation'
import ThemeList from './components/theme-list'
import PersonList from './components/person-list'
import CommunityList from './components/community-list'
import DayCheckComparison from './components/day-check-comparison'
import MapOperate from './components/map-operate'
export default { export default {
name: 'Main', name: 'Main',
components: {
BaiduMap,
ThemeTitle,
DayCheckSituation,
ThemeList,
PersonList,
CommunityList,
DayCheckComparison,
MapOperate,
},
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.container
$layout()
grid-template-areas \
'title title title'\
'box1 map box2'\
'box1 map box4'\
'box3 map box4'\
'box3 map box4'\
'box3 map box6'\
'box5 map box6'\
'box5 map box6'
grid-template-rows 4rem 1fr 1fr 1fr 1fr 1fr 1fr 1fr
grid-template-columns 1fr 2.2fr 1fr
#map
width 100%
height 100vh
background-color #001021
position fixed
top 0
left 0
right 0
bottom 0
.title
grid-area title
.map
grid-area map
.box1
grid-area box1
.box2
grid-area box2
.box3
grid-area box3
.box4
grid-area box4
.box5
grid-area box5
.box6
grid-area box6
</style> </style>
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 to comment