Skip to content

G
geography-dataview
Commit 570e2374 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

part left complete

parent d09b2541
Show whitespace changes
Inline Side-by-side
Showing with 430 additions and 79 deletions
src/App.vue
View file @ 570e2374
......@@ -17,9 +17,9 @@ export default {
@font-face
font-family DIN
src url(./assets/font/DIN-Medium.otf)
// @font-face
// font-family Microsoft YaHei UI
// src url(./assets/font/Microsoft-YaHei-UI-Bold.ttf)
@font-face
font-family Microsoft YaHei UI
src url(./assets/font/Hei.ttf)
@font-face
font-family Pangmenzhengdao
src url(./assets/font/pangmenzhengdao.ttf)
......@@ -29,14 +29,14 @@ html, body
height 100%
user-select none
#app
font-family DIN, 'Avenir', Helvetica, Arial, sans-serif
font-family Microsoft YaHei UI, DIN, 'Avenir', Helvetica, Arial, sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
width 100%
height 100%
font-size 1rem
overflow: hidden
color #ccc
color #fff
/* 设置滚动条的样式 */
::-webkit-scrollbar {
......
src/assets/css/variables.styl
View file @ 570e2374
// $font-yahei = Microsoft YaHei UI, 'Avenir', Helvetica, Arial, sans-serif
$font-yahei = Microsoft YaHei UI, 'Avenir', Helvetica, Arial, sans-serif
$font-pang = Pangmenzhengdao, 'Avenir', Helvetica, Arial, sans-serif
$font-din = DIN, 'Avenir', Helvetica, Arial, sans-serif
$color-map(opacity = 0.3)
rgba(91, 213, 255, opacity)
$color-green = #82DF12
$color-blue = #47B3FF
$color-blue = #0388ef
$color-red = #D82B2B
$layout(gap = 0.6rem)
width 100%
......@@ -25,8 +25,12 @@ $selected()
background-color rgba(0,242,255,0.1)
$fontColor = #2c3e50
$edgeColor = #00f2ff
$cardBg = rgba(0, 242, 255, 0.1)
$cardBg = rgba(0, 17, 33, 0.8)
$cardBorder = 0.1rem solid #1c425f
$cardFontColor = #5bd5ff
$light-blue = #D4F0FF
$black = #000203
$yellow = #f7b500
src/assets/images/title-bg.png 100755 → 100644
View replaced file @ d09b2541 View file @ 570e2374
src/assets/images/title-bg.png

118 KB | W: | H:

src/assets/images/title-bg.png

56.3 KB | W: | H:

src/assets/images/title-bg.png
src/assets/images/title-bg.png
src/assets/images/title-bg.png
src/assets/images/title-bg.png
  • 2-up
  • Swipe
  • Onion skin
src/components/MonitorComponents/MonitorCard/mode5.vue 0 → 100644
View file @ 570e2374
<template>
<div class="card-wrapper">
<div class="card-title">
<img v-if="icon" :src="icon"/>
{{title}}
</div>
<div class="card-content">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'Mode5',
props: {
icon: {},
title: {
type: String,
default: '标题',
},
color: {
type: String,
},
},
}
</script>
<style lang="stylus" scoped>
.card-wrapper
padding 1rem !important
background $cardBg
.card-title
display flex
align-items center
background-color $black
color #fff
font-size 1rem
font-weight bold
width 100%
height 2.4rem
padding 0 1rem
>img
width 1.4rem
height @width
margin-right 0.5rem
.card-content
padding .5rem
</style>
src/components/MonitorComponents/MonitorChart/monitor-chart.vue
View file @ 570e2374
......@@ -332,7 +332,7 @@ export default {
}
},
splitLine: {
show: true,
show: false,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
......
src/components/MonitorComponents/MonitorGrid/monitor-grid.vue
View file @ 570e2374
......@@ -73,7 +73,8 @@ export default {
height 100%
background-size cover
background-position center
background-color #061627
// background-color #061627
background-color gray
position relative
display grid
grid-gap 1rem
......
src/components/MonitorComponents/MonitorTitle/monitor-title.vue
View file @ 570e2374
<template>
<div class="monitor-title">
<span v-if="!hideDate" class="moment date" @mouseenter="openDatePicker = true" @mouseleave="openDatePicker = false">
<div class="info">
<span>
<img src="@/assets/images/temp.png"/><span>气温</span>
28.6℃
</span>
<span>
<img src="@/assets/images/humidity.png"/><span>湿度</span>
55%
</span>
<span>
<img src="@/assets/images/rain.png"/><span>降雨量</span>
2mm
</span>
<span>
<img src="@/assets/images/pm2.5.png"/><span>PM2.5</span>
150mg/m³
</span>
<span class="time" v-if="!hideDate" @mouseenter="openDatePicker = true" @mouseleave="openDatePicker = false">
<DatePicker @on-change="handleDateChange" :value="curDate" :options="options" class="date-picker" :open="editable && openDatePicker" type="date">
<span>{{curDate}}</span>
</DatePicker>
<span v-if="!hideTime">{{time}}</span>
</span>
<span v-if="!hideTime" class="moment time">{{time}}</span>
</div>
<img :src="bgImg" draggable="false"/>
<p :style="style"><slot /></p>
<p><slot /></p>
</div>
</template>
......@@ -43,7 +61,6 @@ export default {
openDatePicker: false,
timer: null,
time: null,
style: {},
}
},
mounted() {
......@@ -52,14 +69,6 @@ export default {
this.time = `${this.$moment().format('dddd')} ${this.$moment().format('LTS')}`
}, 1000)
}
if (this.color) {
this.style = {
'text-shadow': `0 0.2rem 0.4rem ${this.color}`,
'color': this.color,
'background-image': `linear-gradient(to bottom, #fff, ${this.color})`
}
}
this.style = {...this.style, 'font-size': this.size}
},
beforeDestroy() {
clearInterval(this.timer)
......@@ -68,7 +77,7 @@ export default {
computed: {
curDate() {
const date = this.$store.state.curDate
return date ? this.$moment(date).format('LL') : this.$moment().format('LL')
return date ? this.$moment(date).format('YYYY-MM-DD') : this.$moment().format('YYYY-MM-DD')
},
options() {
return {
......@@ -95,45 +104,58 @@ export default {
position relative
background-size cover
background-position center
font-family $font-pang
.moment
z-index 100
.info
position absolute
font-size 1.2rem
top .8rem
right 0
z-index 10
display flex
align-items center
color #fff
width 15rem
&.date
left 20%
top 50%
transform translateY(-80%)
cursor pointer
font-size .8rem
>span
display flex
align-items center
padding 0 .5rem
font-family $font-din
&+span
border-left .1rem solid $light-blue
&.time
right 13%
top 50%
transform translateY(-80%)
span
color #fff
img
width 1rem
span
color $light-blue
margin 0 .3rem
>img
position absolute
width 100%
height 100%
top 0
left 0
animation shine 2.5s linear reverse infinite
// animation shine 2.5s linear reverse infinite
>p
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)
@keyframes shine {
0% {
opacity 1
}
50% {
opacity 0.7
}
100% {
opacity 1
}
}
// text-shadow 0 0.2rem 0.4rem #25e7f6
// background-clip text
// -webkit-background-clip text
color #fff
z-index 10
font-size 1.6rem
font-weight bold
// -webkit-text-fill-color transparent
// background-image linear-gradient(to bottom, #fff, #25e7f6)
// @keyframes shine {
// 0% {
// opacity 1
// }
// 50% {
// opacity 0.7
// }
// 100% {
// opacity 1
// }
// }
</style>
src/main.js
View file @ 570e2374
......@@ -5,7 +5,7 @@ import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import {Row, Col, Select, Option, DatePicker} from 'view-design'
import {Row, Col, Select, Option, DatePicker, Circle} from 'view-design'
import ajax from '@/server/ajax'
import api from '@/server/api'
import common from '@/util/common'
......@@ -26,6 +26,7 @@ Vue.component('i-col', Col)
Vue.component('Select', Select)
Vue.component('Option', Option)
Vue.component('DatePicker', DatePicker)
Vue.component('i-circle', Circle)
/* eslint-disable no-new */
new Vue({
el: '#app',
......
src/views/disaster.vue 0 → 100644
View file @ 570e2374
<template>
<div class="disaster">
<div class="info">
<p><span>严重灾情小区</span><m-count :value="153" :decimal="0" style="color:#D82B2B;fontSize:1.2rem;"/></p>
<p><span>轻微灾情小区</span><m-count :value="1079" :decimal="0" style="color:#f7b500;fontSize:1.2rem;"/></p>
</div>
<div class="chart-wrapper">
<m-chart :config="config" :data="data" />
</div>
</div>
</template>
<script>
export default {
name: 'Disaster',
data() {
return {
config: {
colors: ['#0388ef'],
legend: {
hide: true,
},
yAxis: {
axisLabel: {show: false},
max: 600,
},
shape: [
{key: 'value', type: 'bar', barWidth: '30%', label: {show: true, position: 'top', color: '#fff'}},
],
xAxis: {
key: 'name',
},
},
data: [
{name: '空中坠物', value: 102},
{name: '树木倒伏', value: 494},
{name: '小区积水', value: 209},
{name: '车库进水', value: 43},
{name: '人员受伤', value: 6},
],
}
},
}
</script>
<style lang="stylus" scoped>
.disaster
height 100%
overflow hidden
.info
display flex
align-items center
justify-content space-around
color $light-blue
span
margin-right .5rem
.chart-wrapper
height 90%
</style>
src/views/hotline.vue 0 → 100644
View file @ 570e2374
<template>
<div class="hotline">
<div>
<i-circle
:size="100 * sizeRate"
:trail-width="8 * sizeRate"
:stroke-width="8 * sizeRate"
:percent="75"
stroke-linecap="square"
stroke-color="#82DF12">
<div>
<p>连通率</p>
<b><m-count style="font-size:1.6rem;" :value="88" :decimal="0"/>%</b>
</div>
</i-circle>
</div>
<div>
<div v-for="item in list" :key="item.title" class="info">
<p>{{item.title}}</p>
<template v-if="Array.isArray(item.count)">
<m-count :value="item.count[0]" :decimal="0"/> / <m-count :value="item.count[1]" :decimal="0"/>
</template>
<m-count v-else :value="item.count" :decimal="0"/>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Hotline',
data() {
return {
list: [
{title: '当日接通/来电', count: [4151, 4503]},
{title: '排队/坐席人数', count: [0, 67]},
{title: '报修单数量', count: 1867},
{title: '在线维修工', count: 57},
]
}
},
computed: {
sizeRate() {
return Number((screen.height / 800).toFixed(1))
},
},
}
</script>
<style lang="stylus" scoped>
.hotline
display flex
height 100%
overflow hidden
>div
&:first-child
flex 1.1
padding 1rem .5rem
p
color $light-blue
margin-bottom .5rem
&:last-child
flex 2
>.info
display flex
align-items center
justify-content space-between
color $light-blue
*
font-size 1.2rem !important
font-weight bold !important
p
font-size 1rem !important
font-weight normal !important
line-height 2.5rem
</style>
src/views/intelligence.vue 0 → 100644
View file @ 570e2374
<template>
<div class="intelligence">
<div>
<div v-for="item in list.slice(0, 5)" :key="item.title">
<p>{{item.title}}</p>
<p>
<b>
<m-count :value="item.count[0]" :decimal="0" style="color:#f7b500;"/> / <m-count :value="item.count[1]" :decimal="0"/>
</b>
</p>
</div>
</div>
<div>
<div v-for="item in list.slice(5)" :key="item.title">
<p>{{item.title}}</p>
<p>
<b>
<m-count :value="item.count[0]" :decimal="0" style="color:#f7b500;"/> / <m-count :value="item.count[1]" :decimal="0"/>
</b>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Intelligence',
data() {
return {
list: [
{title: '电梯困人', count: [0, 1271]},
{title: '电动车入梯', count: [201, 1271]},
{title: '烟感温感', count: [17, 203]},
{title: '消防通道', count: [44, 424]},
{title: '消防登高点', count: [12, 202]},
{title: '承重结构', count: [0, 91]},
{title: '集中充电', count: [10, 411]},
{title: '屋顶积水', count: [1, 102]},
{title: '窨井盖', count: [4, 511]},
{title: '积水水浸', count: [42, 278]},
],
}
},
}
</script>
<style lang="stylus" scoped>
.intelligence
display flex
height 100%
>div
flex 1
>div
height 20%
display flex
justify-content space-between
align-items center
padding 0 .5rem
&:nth-child(2n+1)
background $black
</style>
src/views/main.vue
View file @ 570e2374
......@@ -2,37 +2,58 @@
<m-grid
:template="[
'title title title',
'box1 . box4',
'box1 . box3',
'box2 box2 box3',
'box1 . box5',
'box1 . box5',
'box2 . box5',
'box2 . box6',
'box3 . box6',
'box3 . box7',
'box4 . box7',
'box4 . box7',
]"
columns="1fr 2fr 1fr"
rows="4rem 1fr 1fr 1fr"
gap="0.8rem"
style="paddingTop: 0"
rows="4rem 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr"
gap="0"
style="padding: 0 .5rem .5rem"
>
<m-map></m-map>
<m-title area="title" hideDate hideTime :bgImg="require('@/assets/images/title-bg.png')">测试专题</m-title>
<m-card area="box1" title="题目">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia fugit dicta explicabo blanditiis dolorum ratione aliquid, consequuntur facere ex saepe consectetur! At, accusamus fuga placeat vero soluta facilis odio esse.
<!-- <m-map></m-map> -->
<m-title area="title" color="#fff" :bgImg="require('@/assets/images/title-bg.png')">上海市物业管理地理信息平台</m-title>
<m-card area="box1" mode="5" title="综合监管应用场景" :icon="require('@/assets/images/icon1.png')">
<OverSee />
</m-card>
<m-card area="box2">
box2
<m-card area="box2" mode="5" title="962121热线应用场景" :icon="require('@/assets/images/icon2.png')">
<Hotline />
</m-card>
<m-card area="box3">
<m-card area="box3" mode="5" title="智能感知应用场景" :icon="require('@/assets/images/icon3.png')">
<Intelligence />
</m-card>
<m-card area="box4" mode="5" title="灾情上报应用场景" :icon="require('@/assets/images/icon4.png')">
<Disaster />
</m-card>
<m-card area="box5" mode="5" title="各行政区住宅小区汇总" :icon="require('@/assets/images/icon5.png')">
abc
</m-card>
<m-card area="box4">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint pariatur quaerat hic consectetur qui omnis, exercitationem quo, molestias magnam aperiam asperiores non modi officiis quod delectus temporibus iusto necessitatibus quam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus animi fugiat officiis facere inventore quisquam assumenda aliquid, nulla quam, voluptate possimus. Cum ea possimus mollitia animi nemo at! Totam, porro?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus deserunt reiciendis iure ipsum asperiores dicta nostrum veritatis impedit voluptatum ducimus quia, eius incidunt sequi blanditiis, explicabo fuga error perspiciatis a?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint totam minima et commodi, doloremque veritatis ex, reiciendis nesciunt quaerat eligendi ullam cupiditate deleniti quisquam. Sapiente error commodi iusto accusamus minima.
<m-card area="box6" mode="5" title="住宅小区类型分布" :icon="require('@/assets/images/icon6.png')">
abc
</m-card>
<m-card area="box7" mode="5" title="物业监管应用专题图" :icon="require('@/assets/images/icon7.png')">
abc
</m-card>
</m-grid>
</template>
<script>
import OverSee from './oversee'
import Hotline from './hotline'
import Intelligence from './intelligence'
import Disaster from './disaster'
export default {
name: 'Main',
components: {
OverSee,
Hotline,
Intelligence,
Disaster,
},
}
</script>
src/views/oversee.vue 0 → 100644
View file @ 570e2374
<template>
<div class="oversee">
<div>
<p>上海市小区健康度</p>
<b><m-count style="color:#0388ef;font-size:2rem;" :value="74.8"/></b>
</div>
<div>
<div v-for="(item, i) in list" :key="item.title">
{{item.title}}
<b><m-count :style="`font-size:1.2rem;${i === 3 ? 'color:red;': null}`" :value="item.count"/></b>
<!-- <template v-if="item.more">
<span v-for="(num, index) in item.more" :key="index">{{num}}/</span>
</template> -->
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Oversee',
data() {
return {
list: [
{title: '当日检查主题', count: 32},
{title: '当日检查人数', count: 18, more: [1, 3, 14]},
{title: '当日检查小区', count: 69},
{title: '当日整改单数', count: 4},
],
}
},
}
</script>
<style lang="stylus" scoped>
.oversee
color $light-blue
height 100%
overflow hidden
>div
display flex
&:first-child
justify-content space-around
align-items center
font-size 1.2rem
border-bottom .1rem solid gray
padding-bottom .5rem
&:last-child
flex-wrap wrap
padding 1rem .5rem
>div
width 50%
line-height 2.6rem
b
margin-left .5rem
</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