Skip to content

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

part left complete

parent d09b2541
Hide 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 { ...@@ -17,9 +17,9 @@ export default {
@font-face @font-face
font-family DIN font-family DIN
src url(./assets/font/DIN-Medium.otf) src url(./assets/font/DIN-Medium.otf)
// @font-face @font-face
// font-family Microsoft YaHei UI font-family Microsoft YaHei UI
// src url(./assets/font/Microsoft-YaHei-UI-Bold.ttf) src url(./assets/font/Hei.ttf)
@font-face @font-face
font-family Pangmenzhengdao font-family Pangmenzhengdao
src url(./assets/font/pangmenzhengdao.ttf) src url(./assets/font/pangmenzhengdao.ttf)
...@@ -29,14 +29,14 @@ html, body ...@@ -29,14 +29,14 @@ html, body
height 100% height 100%
user-select none user-select none
#app #app
font-family DIN, 'Avenir', Helvetica, Arial, sans-serif font-family Microsoft YaHei UI, DIN, 'Avenir', Helvetica, Arial, sans-serif
-webkit-font-smoothing antialiased -webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale -moz-osx-font-smoothing grayscale
width 100% width 100%
height 100% height 100%
font-size 1rem font-size 1rem
overflow: hidden overflow: hidden
color #ccc color #fff
/* 设置滚动条的样式 */ /* 设置滚动条的样式 */
::-webkit-scrollbar { ::-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-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 = #82DF12 $color-green = #82DF12
$color-blue = #47B3FF $color-blue = #0388ef
$color-red = #D82B2B $color-red = #D82B2B
$layout(gap = 0.6rem) $layout(gap = 0.6rem)
width 100% width 100%
...@@ -25,8 +25,12 @@ $selected() ...@@ -25,8 +25,12 @@ $selected()
background-color rgba(0,242,255,0.1) background-color rgba(0,242,255,0.1)
$fontColor = #2c3e50 $fontColor = #2c3e50
$edgeColor = #00f2ff $edgeColor = #00f2ff
$cardBg = rgba(0, 242, 255, 0.1) $cardBg = rgba(0, 17, 33, 0.8)
$cardBorder = 0.1rem solid #1c425f $cardBorder = 0.1rem solid #1c425f
$cardFontColor = #5bd5ff $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 { ...@@ -332,7 +332,7 @@ export default {
} }
}, },
splitLine: { splitLine: {
show: true, show: false,
lineStyle: { lineStyle: {
color: 'rgba(91,213,255,0.3)' color: 'rgba(91,213,255,0.3)'
} }
......
src/components/MonitorComponents/MonitorGrid/monitor-grid.vue
View file @ 570e2374
...@@ -73,7 +73,8 @@ export default { ...@@ -73,7 +73,8 @@ export default {
height 100% height 100%
background-size cover background-size cover
background-position center background-position center
background-color #061627 // background-color #061627
background-color gray
position relative position relative
display grid display grid
grid-gap 1rem grid-gap 1rem
......
src/components/MonitorComponents/MonitorTitle/monitor-title.vue
View file @ 570e2374
<template> <template>
<div class="monitor-title"> <div class="monitor-title">
<span v-if="!hideDate" class="moment date" @mouseenter="openDatePicker = true" @mouseleave="openDatePicker = false"> <div class="info">
<DatePicker @on-change="handleDateChange" :value="curDate" :options="options" class="date-picker" :open="editable && openDatePicker" type="date"> <span>
<span>{{curDate}}</span> <img src="@/assets/images/temp.png"/><span>气温</span>
</DatePicker> 28.6℃
</span> </span>
<span v-if="!hideTime" class="moment time">{{time}}</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>
</div>
<img :src="bgImg" draggable="false"/> <img :src="bgImg" draggable="false"/>
<p :style="style"><slot /></p> <p><slot /></p>
</div> </div>
</template> </template>
...@@ -43,7 +61,6 @@ export default { ...@@ -43,7 +61,6 @@ export default {
openDatePicker: false, openDatePicker: false,
timer: null, timer: null,
time: null, time: null,
style: {},
} }
}, },
mounted() { mounted() {
...@@ -52,14 +69,6 @@ export default { ...@@ -52,14 +69,6 @@ export default {
this.time = `${this.$moment().format('dddd')} ${this.$moment().format('LTS')}` this.time = `${this.$moment().format('dddd')} ${this.$moment().format('LTS')}`
}, 1000) }, 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() { beforeDestroy() {
clearInterval(this.timer) clearInterval(this.timer)
...@@ -68,7 +77,7 @@ export default { ...@@ -68,7 +77,7 @@ export default {
computed: { computed: {
curDate() { curDate() {
const date = this.$store.state.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() { options() {
return { return {
...@@ -95,45 +104,58 @@ export default { ...@@ -95,45 +104,58 @@ export default {
position relative position relative
background-size cover background-size cover
background-position center background-position center
font-family $font-pang .info
.moment
z-index 100
position absolute position absolute
font-size 1.2rem top .8rem
right 0
z-index 10
display flex
align-items center
color #fff color #fff
width 15rem font-size .8rem
&.date >span
left 20% display flex
top 50% align-items center
transform translateY(-80%) padding 0 .5rem
cursor pointer font-family $font-din
&.time &+span
right 13% border-left .1rem solid $light-blue
top 50% &.time
transform translateY(-80%) span
img color #fff
img
width 1rem
span
color $light-blue
margin 0 .3rem
>img
position absolute position absolute
width 100% width 100%
height 100% height 100%
top 0 top 0
left 0 left 0
animation shine 2.5s linear reverse infinite // animation shine 2.5s linear reverse infinite
>p >p
text-shadow 0 0.2rem 0.4rem #25e7f6 // text-shadow 0 0.2rem 0.4rem #25e7f6
background-clip text // background-clip text
-webkit-background-clip text // -webkit-background-clip text
color #25e7f6 color #fff
-webkit-text-fill-color transparent z-index 10
background-image linear-gradient(to bottom, #fff, #25e7f6) font-size 1.6rem
@keyframes shine { font-weight bold
0% { // -webkit-text-fill-color transparent
opacity 1 // background-image linear-gradient(to bottom, #fff, #25e7f6)
} // @keyframes shine {
50% { // 0% {
opacity 0.7 // opacity 1
} // }
100% { // 50% {
opacity 1 // opacity 0.7
} // }
} // 100% {
// opacity 1
// }
// }
</style> </style>
src/main.js
View file @ 570e2374
...@@ -5,7 +5,7 @@ import Vue from 'vue' ...@@ -5,7 +5,7 @@ import Vue from 'vue'
import App from './App' import App from './App'
import router from './router' import router from './router'
import store from './store' 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 ajax from '@/server/ajax'
import api from '@/server/api' import api from '@/server/api'
import common from '@/util/common' import common from '@/util/common'
...@@ -26,6 +26,7 @@ Vue.component('i-col', Col) ...@@ -26,6 +26,7 @@ Vue.component('i-col', Col)
Vue.component('Select', Select) Vue.component('Select', Select)
Vue.component('Option', Option) Vue.component('Option', Option)
Vue.component('DatePicker', DatePicker) Vue.component('DatePicker', DatePicker)
Vue.component('i-circle', Circle)
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', 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 @@ ...@@ -2,37 +2,58 @@
<m-grid <m-grid
:template="[ :template="[
'title title title', 'title title title',
'box1 . box4', 'box1 . box5',
'box1 . box3', 'box1 . box5',
'box2 box2 box3', 'box2 . box5',
'box2 . box6',
'box3 . box6',
'box3 . box7',
'box4 . box7',
'box4 . box7',
]" ]"
columns="1fr 2fr 1fr" columns="1fr 2fr 1fr"
rows="4rem 1fr 1fr 1fr" rows="4rem 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr"
gap="0.8rem" gap="0"
style="paddingTop: 0" style="padding: 0 .5rem .5rem"
> >
<m-map></m-map> <!-- <m-map></m-map> -->
<m-title area="title" hideDate hideTime :bgImg="require('@/assets/images/title-bg.png')">测试专题</m-title> <m-title area="title" color="#fff" :bgImg="require('@/assets/images/title-bg.png')">上海市物业管理地理信息平台</m-title>
<m-card area="box1" title="题目"> <m-card area="box1" mode="5" title="综合监管应用场景" :icon="require('@/assets/images/icon1.png')">
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. <OverSee />
</m-card> </m-card>
<m-card area="box2"> <m-card area="box2" mode="5" title="962121热线应用场景" :icon="require('@/assets/images/icon2.png')">
box2 <Hotline />
</m-card> </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 abc
</m-card> </m-card>
<m-card area="box4"> <m-card area="box6" mode="5" title="住宅小区类型分布" :icon="require('@/assets/images/icon6.png')">
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. abc
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? </m-card>
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? <m-card area="box7" mode="5" title="物业监管应用专题图" :icon="require('@/assets/images/icon7.png')">
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. abc
</m-card> </m-card>
</m-grid> </m-grid>
</template> </template>
<script> <script>
import OverSee from './oversee'
import Hotline from './hotline'
import Intelligence from './intelligence'
import Disaster from './disaster'
export default { export default {
name: 'Main', name: 'Main',
components: {
OverSee,
Hotline,
Intelligence,
Disaster,
},
} }
</script> </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