Skip to content

E
east-nanjing
Commit b6906842 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

第二版页面完成

parent 006df87d
Hide whitespace changes
Inline Side-by-side
Showing with 953 additions and 228 deletions
src/App.vue
View file @ b6906842
...@@ -25,7 +25,7 @@ export default { ...@@ -25,7 +25,7 @@ export default {
src url(./assets/font/pangmenzhengdao.ttf) src url(./assets/font/pangmenzhengdao.ttf)
$mask() $mask()
content '' content ''
width 20% // width 30%
height 95% height 95%
position absolute position absolute
bottom 0 bottom 0
......
src/assets/css/variables.styl
View file @ b6906842
...@@ -18,7 +18,7 @@ $layout(gap = 0.06rem) ...@@ -18,7 +18,7 @@ $layout(gap = 0.06rem)
display grid display grid
grid-gap gap grid-gap gap
padding gap padding gap
$blur(val = 0.05rem) $blur(val = 0.01rem)
backdrop-filter blur(val) backdrop-filter blur(val)
-webkit-backdrop-filter blur(val) -webkit-backdrop-filter blur(val)
$selected() $selected()
......
src/assets/images/card-header.png
View replaced file @ 006df87d View file @ b6906842
src/assets/images/card-header.png

11.1 KB | W: | H:

src/assets/images/card-header.png

23.5 KB | W: | H:

src/assets/images/card-header.png
src/assets/images/card-header.png
src/assets/images/card-header.png
src/assets/images/card-header.png
  • 2-up
  • Swipe
  • Onion skin
src/components/MonitorComponents/MonitorCard/mode1.vue
View file @ b6906842
...@@ -2,15 +2,10 @@ ...@@ -2,15 +2,10 @@
<div class="card-wrapper"> <div class="card-wrapper">
<div class="card-title" :style="`color:${color}`"> <div class="card-title" :style="`color:${color}`">
<p class="title">{{title}}</p> <p class="title">{{title}}</p>
<p v-if="showTab" class="btn"> <m-count v-if="value" class="count" :value="value" />
<span :class="{on: curTab === '处置中'}" @click="handleClick('处置中')">处置中</span> <span v-if="unit" class="unit">{{unit}}</span>
|
<span :class="{on: curTab === '已完成'}" @click="handleClick('已完成')">已完成</span>
</p>
</div> </div>
<div class="card-content"> <div class="card-content">
<span class="border" />
<span class="border right" />
<slot /> <slot />
</div> </div>
</div> </div>
...@@ -18,7 +13,7 @@ ...@@ -18,7 +13,7 @@
<script> <script>
export default { export default {
name: 'Mode2', name: 'Mode1',
props: { props: {
title: { title: {
type: String, type: String,
...@@ -27,22 +22,13 @@ export default { ...@@ -27,22 +22,13 @@ export default {
color: { color: {
type: String, type: String,
}, },
showTab: { value: {
type: Boolean, type: Number,
default: false,
}, },
}, unit: {
data() { type: String,
return {
curTab: '处置中',
} }
}, },
methods: {
handleClick(type) {
this.curTab = type
this.$store.commit('SET_CUR_TAB', type)
},
},
} }
</script> </script>
...@@ -50,49 +36,24 @@ export default { ...@@ -50,49 +36,24 @@ export default {
.card-wrapper .card-wrapper
.card-title .card-title
display flex display flex
align-items flex-start font-size .13rem
justify-content space-between align-items center
font-size .14rem
font-weight bold font-weight bold
background-image url('../../../assets/images/card-header.png') background-image url(../../../assets/images/card-header.png)
background-size 100% 60% background-size 50% 100%
background-position left bottom
background-repeat no-repeat background-repeat no-repeat
>p padding-left .3rem
&.title .count
text-align center font-size .14rem
background-image url('../../../assets/images/card-title-bg.png') color $color-yellow
background-size 100% 60% margin-left 20%
background-position left bottom margin-right .05rem
background-repeat no-repeat .unit
padding 0 .2rem font-size .1rem
&.btn color #999
font-weight normal
margin-right .1rem
font-size .09rem
align-self flex-end
>span
color #999
cursor pointer
&:hover
&.on
color #fff
.card-content .card-content
position relative position relative
padding .1rem padding .1rem 0
background linear-gradient(to bottom, rgba(5,71,138,.2), rgba(5,71,138,.8))
border-bottom .01rem solid rgba(91,213,255,.5)
>.border
display block
position absolute
top 0
left 0
bottom 0
width .01rem
background linear-gradient(to bottom, rgba(148,236,255, 0), rgba(91,214,255,.5))
&.right
left auto
right 0
>div >div
width 100% width 100%
height 100% height 100%
......
src/components/MonitorComponents/MonitorChart/monitor-chart.vue
View file @ b6906842
...@@ -372,7 +372,6 @@ export default { ...@@ -372,7 +372,6 @@ export default {
} }
}, },
yAxis: { yAxis: {
name: 'hahah',
nameTextStyle: { nameTextStyle: {
color: '#fff', color: '#fff',
fontSize: this.fontSize, fontSize: this.fontSize,
......
src/components/MonitorComponents/MonitorMap/monitor-map.vue
View file @ b6906842
...@@ -27,7 +27,7 @@ export default { ...@@ -27,7 +27,7 @@ export default {
// zooms: [6, 7], // zooms: [6, 7],
mapStyle: 'smap://styles/dark', mapStyle: 'smap://styles/dark',
}).on(SMap.MapEvent.maploaded, () => { }).on(SMap.MapEvent.maploaded, () => {
// this.map.hideXQ_Poly() this.map.hideXQ_Poly()
this.map.hideXQ_Point() this.map.hideXQ_Point()
this.map.hideMPZ() this.map.hideMPZ()
this.addListener() this.addListener()
...@@ -43,7 +43,7 @@ export default { ...@@ -43,7 +43,7 @@ export default {
// const {x, y} = res.results[0].graphic.geometry.centroid // const {x, y} = res.results[0].graphic.geometry.centroid
// console.log([x, y]) // console.log([x, y])
if (res.results && res.results.length > 0) { if (res.results && res.results.length > 0) {
console.log('click', res) // console.log('click', res)
this.$emit('event', res.results[0] && res.results[0].graphic.attributes) this.$emit('event', res.results[0] && res.results[0].graphic.attributes)
} }
}) })
......
src/components/MonitorComponents/MonitorStep/monitor-step.vue
View file @ b6906842
...@@ -5,17 +5,20 @@ ...@@ -5,17 +5,20 @@
<div class="line" :style="`width:${notWidth}%`"/> <div class="line" :style="`width:${notWidth}%`"/>
</div> </div>
<div v-for="(step, i) in steps" :key="i" :class="`item ${i == current ? 'on' : ''}`"> <div v-for="(step, i) in steps" :key="i" :class="`item ${i == current ? 'on' : ''}`">
<p :title="step.name" :class="{none: i > current}">{{step.name}}</p> <p :title="step.name">{{step.name}}</p>
<div ref="icon" :class="{icon: true, none: i > current}" /> <div ref="icon" v-if="i <= current" class="icon" :style="`background-image:url(${require('@/assets/images/true.png')})`"/>
<!-- <span class="msg" :title="step.msg" v-html="msg[i]"/> --> <div v-else class="none"/>
<!-- <div ref="icon" v-if="i <= current" class="icon" :style="`background-image:url(${require('@/assets/images/true.png')})`"/> --> <span class="msg" :title="step.msg">{{msg[i]}}</span>
<!-- <div v-else class="none"/> --> <span v-if="info" class="msg info" :title="getInfo(i)">{{getInfo(i)}}</span>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
// 顶部的lines是线 , 根据doneWidth 和notWidth 来判断宽度
// 枚举数据,判断入参数组的第二项是否为true, 区别设置css 下一个圈是否放大
// 下面的 icon 是判断枚举的index 是否小于 cur的第0项, 是的话就给 ✔️ 对号
name: 'MonitorStep', name: 'MonitorStep',
props: { props: {
steps: { steps: {
...@@ -23,15 +26,20 @@ export default { ...@@ -23,15 +26,20 @@ export default {
required: true, required: true,
}, },
current: { current: {
type: [Number, String], type: [String, Number, Array],
default: 0, default(){
return [0, false] // 第0项为当前的标识, 后面的布尔是判断后面是否加线
}
},
info: {
type: Object,
}, },
// msg: { msg: {
// type: Array, type: Array,
// default() { default() {
// return [] return []
// }, },
// } }
}, },
data() { data() {
return { return {
...@@ -46,108 +54,101 @@ export default { ...@@ -46,108 +54,101 @@ export default {
computed: { computed: {
linePercent() { linePercent() {
const len = this.steps.length const len = this.steps.length
if (len > 2) return 100 / (len - 1) if (len > 2) return 100 / (len - 1) // 跟据steps数组的长度,分隔线每一调的长度占比
return 100 return 100
}, },
doneWidth() { doneWidth() {
const index = Number(this.current) return Math.round(this.linePercent * Number(this.current))
if (Number.isNaN(index)) {
console.error('Props: "current" is NaN!')
return
}
return Math.round(this.linePercent * index)
}, },
notWidth() { notWidth() {
return 100 - this.doneWidth return 100 - this.doneWidth
} }
} },
methods: {
getInfo(i) {
const {info} = this
switch (i) {
case 0:
return info.create_note || '暂无'
case 2:
return info.receive_note || '暂无'
case 3:
return info.done_note || '暂无'
default:
return '系统自动推送'
}
}
},
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
$icon-color = #1DE5AD
.monitor-step .monitor-step
width 90% width 90%
margin 0.05rem auto 0 margin 0 auto
display flex display flex
justify-content space-between justify-content space-between
position relative position relative
font-size 0.09rem font-size .1rem
.lines .lines
display flex display flex
position absolute position absolute
width 100% width 100%
left -0.05rem left -0.05rem
z-index -1
>.line >.line
height 0.01rem height 0.03rem
// background rgba(0,0,0,0.8) background rgba(0,0,0,0.8)
background rgba(112,167,224,.2)
border-radius .1rem border-radius .1rem
margin-left 0.05rem margin-left 0.05rem
&.done &.done
background linear-gradient(to right, #5BD5FF, #2F86EE) background linear-gradient(to right, #3391FF, #02EEFF)
.item .item
text-align center text-align center
width .1rem width .1rem
position relative position relative
z-index 1
.icon .icon
width .06rem width .1rem
height @width
border-radius 50%
background-color #02f3ff
background-position 50%
background-size 50%
background-repeat no-repeat
.none
width 0.08rem
height @width height @width
background #5BD5FF border 0.02rem solid $fontColor
border .025rem solid #00F2FF
box-shadow 0 0 .08rem .01rem #00F2FF
border-radius 50% border-radius 50%
// width .1rem transform translateY(10%)
// height .1rem
// background-color $edgeColor
// background-position center
// background-size 60%
// background-repeat no-repeat
&.none
background #0076FF
border .025rem solid #00418D
box-shadow none
// .none
// width 0.08rem
// height 0.08rem
// border 0.02rem solid $edgeColor
// border-radius 50%
// transform translateY(10%)
.msg .msg
display inline-block display inline-block
font-size 0.06rem font-size .1rem
width .4rem width 1rem
transform translateX(-50%) transform translateX(-50%)
margin 0.02rem 50% margin 0.02rem 50%
font-weight normal font-weight normal
color #aaa color #eee
&.info
width 1.3rem
color #eee
p p
width .5rem width .5rem
margin 0.05rem 50% text-indent .1rem
transform translateX(-50%) transform translateX(-50%)
overflow hidden overflow hidden
white-space nowrap white-space nowrap
text-overflow ellipsis text-overflow ellipsis
font-size .09rem
color #ccc color #ccc
font-size 0.08rem
&.none
color #666
&.on &.on
.icon .icon
background #FF9D27 transform scale(1.2)
border .025rem solid #FFCE34 background-position 50% 50%
box-shadow 0 0 .08rem .01rem #FFCE34 background-size 70% 70%
// transform scale(1.2) box-shadow 0 0 .05rem 0.01rem $icon-color
// animation shine 2s alternate infinite ease-in-out
p p
color #FFCE34 color $edgeColor
// font-weight bold font-weight bold
// @keyframes shine {
// from {
// box-shadow none
// }
// to {
// box-shadow 0 0 .1rem 0.01rem #fff
// }
// }
</style> </style>
src/components/MonitorComponents/SubTitle/index.js 0 → 100644
View file @ b6906842
import SubTitle from './sub-title.vue'
export default (Vue) => {
Vue.component('m-sub', SubTitle)
}
src/components/MonitorComponents/SubTitle/sub-title.vue 0 → 100644
View file @ b6906842
<template>
<div class="sub-title">
<span class="dot" />
<p class="title">{{title}}</p>
<m-count v-if="value" class="count" :value="value" />
<span v-if="unit" class="unit">{{unit}}</span>
</div>
</template>
<script>
export default {
name: 'SubTitle',
props: {
title: {
type: String,
},
value: {
type: Number,
},
unit: {
type: String
}
},
}
</script>
<style lang="stylus" scoped>
.sub-title
display flex
align-items center
font-weight bold
color $edgeColor
margin-bottom .05rem
.dot
display inline-block
width .03rem
height .1rem
background $edgeColor
margin-right .05rem
.count
font-size .14rem
color $color-yellow
margin-left 20%
margin-right .05rem
.unit
$unit()
</style>
src/components/MonitorComponents/index.js
View file @ b6906842
...@@ -16,6 +16,7 @@ const MonitorTable = () => import('./MonitorTable/monitor-table') ...@@ -16,6 +16,7 @@ const MonitorTable = () => import('./MonitorTable/monitor-table')
const MonitorTitle = () => import('./MonitorTitle/monitor-title') const MonitorTitle = () => import('./MonitorTitle/monitor-title')
const MonitorStep = () => import('./MonitorStep/monitor-step') const MonitorStep = () => import('./MonitorStep/monitor-step')
const MonitorScroll = () => import('./MonitorScroll/monitor-scroll') const MonitorScroll = () => import('./MonitorScroll/monitor-scroll')
const SubTitle = () => import('./SubTitle/sub-title')
export default (Vue) => { export default (Vue) => {
Vue.use(animate) Vue.use(animate)
...@@ -36,4 +37,5 @@ export default (Vue) => { ...@@ -36,4 +37,5 @@ export default (Vue) => {
Vue.component('m-title', MonitorTitle) Vue.component('m-title', MonitorTitle)
Vue.component('m-step', MonitorStep) Vue.component('m-step', MonitorStep)
Vue.component('m-scroll', MonitorScroll) Vue.component('m-scroll', MonitorScroll)
Vue.component('m-sub', SubTitle)
} }
src/views/components/building.vue 0 → 100644
View file @ b6906842
<template>
<div class="building">
<div v-for="item in list" :key="item.name" :style="`background-image: url(${require('@/assets/images/'+item.img)})`">
<p>{{item.name}}</p>
</div>
</div>
</template>
<script>
export default {
name: 'Building',
data() {
return {
list: [
{name: '和平饭店', img: 'building1.png'},
{name: '慈安里大楼', img: 'building2.png'},
{name: '美伦大厦', img: 'building3.png'},
{name: '上海虹庙', img: 'building4.png'},
],
}
},
}
</script>
<style lang="stylus" scoped>
.building
display grid
grid-gap .1rem
grid-template-columns 1fr 1fr
grid-template-rows 1fr 1fr
>div
background-size 100% 100%
position relative
>p
position absolute
bottom 0
text-align center
width 100%
</style>
src/views/components/command.vue 0 → 100644
View file @ b6906842
<template>
<div class="command">
<m-sub title="值班人员表" />
<div class="table">
<div>
<p>姓名</p>
<p>责任居委范围</p>
<p>联系电话</p>
</div>
<div v-for="(item, i) in list" :key="i">
<p>{{item.name}}</p>
<p>{{item.response}}</p>
<p>{{item.phone}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Command',
data() {
return {
list: [
{name: 'XXX', response: '居委清单', phone: 13000000000},
{name: 'XXX', response: '居委清单', phone: 13000000000},
],
}
},
}
</script>
<style lang="stylus" scoped>
.command
.table
border .01rem solid $cardFontColor
>div
display flex
background $color-map(.15)
&:first-child
background $color-map()
&+div
border-top inherit
p
flex 1
line-height 2
padding 0 .05rem
&+p
border-left .01rem solid $cardFontColor
</style>
src/views/components/company.vue 0 → 100644
View file @ b6906842
<template>
<div class="company">
<div class="info">
<div v-for="item in company" :key="item.name">
<p>{{item.name}}</p>
<m-count class="count" :value="item.value" /> <span class="unit">人</span>
</div>
</div>
<div class="rate">
<div v-for="item in list" :key="item.name">
<img :src="require(`@/assets/images/${item.icon}`)" :alt="item.name" />
{{item.name}}
<p><m-count class="count" :value="item.value" />%</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Company',
data() {
return {
list: [
{name: '证件齐全', value: 65, icon: 'company1.png'},
{name: '场地租赁', value: 73, icon: 'company2.png'},
],
company: [
{name: '机关团体', value: 25},
{name: '企业单位', value: 4711},
{name: '事业单位', value: 56},
{name: '其他', value: 6841},
],
}
},
}
</script>
<style lang="stylus" scoped>
.company
.info
height .4rem
background-image url(../../assets/images/four.png)
background-size 100% 100%
display flex
align-items center
margin-bottom .1rem
>div
flex 1
text-align center
padding-left .05rem
&:nth-of-type(2)
margin-left .1rem
p
color $fontColor
.unit
$unit()
.count
font-size .12rem
.rate
display flex
>div
flex 1
display flex
align-items center
img
width .12rem
height @width
margin-right .05rem
p
color $color-yellow
margin-left .1rem
.count
font-size .13rem
</style>
src/views/components/grid-manage.vue 0 → 100644
View file @ b6906842
<template>
<div class="grid-manage">
<m-sub title="网格事件清单" />
<div class="info">
<div v-for="item in info" :key="item.name">
<p>{{item.name}}</p>
<p><m-count class="count" :value="item.value" /></p>
</div>
</div>
<div class="list">
<m-scroll :length="list.length" mode="2" :limit="3" :step="0.9">
<div class="item" v-for="(item, i) in list" :key="i">
<div class="title">
<p>{{item.community}}</p>
<span class="line" />
<p>{{item.event}}</p>
</div>
<div class="info">
<p>{{item.address}}</p>
<p>{{item.time}}</p>
</div>
<m-step :steps="steps" :current="item.current"/>
</div>
</m-scroll>
</div>
</div>
</template>
<script>
export default {
name: 'GridManage',
data() {
return {
steps: [
{name: '发现'},
{name: '立案'},
{name: '派遣'},
{name: '处置'},
{name: '核查'},
{name: '结案'}
],
info: [
{name: '今日总数', value: 40},
{name: '综合管理', value: 47},
{name: '街面管理', value: 21},
{name: '小区管理', value: 31},
],
list: [
{community: '金港花园', event: '电梯困人', address: '松江区-古楼公路348弄12号', time: '2020-03-13 13:23:08', current: 3},
{community: '金港花园', event: '电梯困人', address: '松江区-古楼公路348弄12号', time: '2020-03-13 13:23:08', current: 5},
{community: '金港花园', event: '电梯困人', address: '松江区-古楼公路348弄12号', time: '2020-03-13 13:23:08', current: 5},
{community: '金港花园', event: '电梯困人', address: '松江区-古楼公路348弄12号', time: '2020-03-13 13:23:08', current: 5},
],
}
},
}
</script>
<style lang="stylus" scoped>
.grid-manage
width 100%
height 100%
.info
width 100%
display flex
justify-content space-between
margin-bottom .1rem
>div
p
color $fontColor
.count
color $color-yellow
font-size .14rem
padding-left .05rem
.list
.item
background rgba(4,27,55,.3)
border .01rem solid rgba(0,118,255,.5)
padding .05rem .08rem
height .8rem
margin-bottom .1rem
.title
display flex
align-items center
font-size .12rem
p
&:last-child
font-size .1rem
color $edgeColor
.line
flex 1
margin 0 .1rem
.info
display flex
align-items center
font-size .09rem
color $cardFontColor
margin-bottom .05rem
</style>
src/views/components/house.vue 0 → 100644
View file @ b6906842
<template>
<div class="house">
<m-sub title="居住房屋" :value="11883" unit="幢" />
<div class="info">
<div v-for="item in house" :key="item.name">
<p>{{item.name}}</p>
<m-count class="count" :value="item.value" /> <span class="unit">人</span>
</div>
</div>
<m-sub title="非居房屋" :value="7097" unit="幢" />
<div class="chart" v-if="showChart">
<m-chart :config="config" :data="data" />
</div>
</div>
</template>
<script>
export default {
name: 'House',
data() {
return {
showChart: false,
house: [
{name: '商品房', value: 10647},
{name: '直管公房', value: 618},
{name: '二类旧里', value: 218},
{name: '其他', value: 400},
],
config: {
colors: [['#F76B1C', '#FAD961']],
legend: {
align: 'right'
},
shape: [
{key: 'value', name: '非居房屋', type: 'bar', barWidth: '20%'},
],
xAxis: {
key: 'name'
}
},
data: [
{name: '衣', value: 1250},
{name: '食', value: 2700},
{name: '住', value: 2800},
{name: '行', value: 347},
]
}
},
mounted() {
setTimeout(() => this.showChart = true, 100)
},
}
</script>
<style lang="stylus" scoped>
.house
.info
height .4rem
background-image url(../../assets/images/four.png)
background-size 100% 100%
display flex
align-items center
margin-bottom .1rem
>div
flex 1
text-align center
padding-left .05rem
&:nth-of-type(2)
margin-left .1rem
p
color $fontColor
.unit
$unit()
.count
font-size .12rem
.chart
width 100%
height 1rem
</style>
src/views/components/left-component.vue
View file @ b6906842
<template> <template>
<div class="left-component"> <div class="left-component">
<HomeScreen /> <div class="left">
<m-card title="实有人口" :value="12772" unit="人">
<Population />
</m-card>
<m-card title="实有房屋" :value="18980" unit="幢">
<House />
</m-card>
<m-card title="实有单位" :value="11633" unit="家">
<Company />
</m-card>
</div>
<div class="right">
<m-card title="便民设施">
<div class="info">
<div v-for="item in convenient" :key="item.name">
<p>{{item.name}}</p>
<m-count class="count" :value="item.value" /> <span class="unit">人</span>
</div>
</div>
</m-card>
<m-card title="历史保护建筑">
<div class="info three">
<div v-for="item in building" :key="item.name">
<p>{{item.name}}</p>
<m-count class="count" :value="item.value" /> <span class="unit">人</span>
</div>
</div>
</m-card>
<m-card title="地标性建筑">
<Building />
</m-card>
<m-card title="微型消防站">
<MicFire />
</m-card>
</div>
</div> </div>
</template> </template>
<script> <script>
import HomeScreen from '../components/home-screen' import Population from '../components/population'
import House from '../components/house'
import Company from '../components/company'
import Building from '../components/building'
import MicFire from '../components/mic-fire'
export default { export default {
name: 'LeftComponent', name: 'LeftComponent',
components: { components: {
HomeScreen, Population,
House,
Company,
Building,
MicFire,
}, },
data() { data() {
return { return {
convenient: [
{name: '便利店', value: 6},
{name: '早餐车', value: 0},
{name: '公厕', value: 2},
{name: '居民活动室', value: 12},
],
building: [
{name: '文保', value: 0},
{name: '历保', value: 8},
{name: '文历双保', value: 0},
],
} }
}, },
} }
...@@ -22,11 +74,48 @@ export default { ...@@ -22,11 +74,48 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
.left-component .left-component
display flex display flex
flex-direction column
z-index 99 z-index 99
width 100% width 100%
height calc(100vh - 0.5rem) height calc(100vh - 0.5rem)
padding-left .1rem position relative
>div >div
flex 1 width calc(33.3vw / 2)
height 100%
&.left
>div
height 40%
&:nth-child(3)
height 20%
&.right
>div
&:nth-child(1)
&:nth-child(2)
height 16%
&:nth-child(3)
&:nth-child(4)
height 34%
.info
height .4rem
background-image url(../../assets/images/four.png)
background-size 100% 100%
display flex
align-items center
margin-bottom .1rem
&.three
background-image url(../../assets/images/three.png)
>div
&:nth-of-type(2)
margin-left -0.1rem
>div
flex 1
text-align center
padding-left .05rem
&:nth-of-type(2)
margin-left .1rem
p
color $fontColor
.unit
$unit()
.count
font-size .12rem
</style> </style>
src/views/components/map-btns.vue
View file @ b6906842
...@@ -20,7 +20,7 @@ export default { ...@@ -20,7 +20,7 @@ export default {
return { return {
btns: [ btns: [
{name: 'input', img: 'btn1.png'}, {name: 'input', img: 'btn1.png'},
{name: 'zoomin', img: 'btn2.png'}, // {name: 'zoomin', img: 'btn2.png'},
{name: 'zoomout', img: 'btn3.png'}, {name: 'zoomout', img: 'btn3.png'},
{name: 'info', img: 'btn4.png'}, {name: 'info', img: 'btn4.png'},
{name: 'sensor', img: 'btn5.png'}, {name: 'sensor', img: 'btn5.png'},
...@@ -34,13 +34,12 @@ export default { ...@@ -34,13 +34,12 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
.map-btns .map-btns
position fixed position fixed
// left calc(33.3% + .05rem) right calc(33.3% + .05rem)
right .1rem
bottom .1rem bottom .1rem
// transition left .5s ease-in-out transition right .5s ease-in-out
z-index 999 z-index 999
// &.isFull &.isFull
// left .05rem right .05rem
img img
display block display block
width .2rem width .2rem
......
src/views/components/map-tips.vue
View file @ b6906842
<template> <template>
<div class="map-tips"> <div class="map-tips" :class="{isFull}">
<p>标识说明</p> <p>标识说明</p>
<div v-if="theme === '智慧养老'"> <div v-if="theme === '智慧养老'">
<div> <div>
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
</p> </p>
</div> </div>
</div> </div>
<div v-else> <!-- <div v-else>
<div> <div>
<p v-for="tip in tips1" :key="tip.name"> <p v-for="tip in tips1" :key="tip.name">
<img :src="require(`@/assets/images/${tip.icon}`)" :alt="tip.name" /> <img :src="require(`@/assets/images/${tip.icon}`)" :alt="tip.name" />
...@@ -43,6 +43,20 @@ ...@@ -43,6 +43,20 @@
{{tip.name}} {{tip.name}}
</p> </p>
</div> </div>
</div> -->
<div v-else>
<div>
<p v-for="tip in tips1" :key="tip.name">
<img :src="require(`@/assets/images/${tip.icon}`)" :alt="tip.name" />
{{tip.name}}
</p>
</div>
<div>
<p v-for="tip in olds2" :key="tip.name">
<img :src="require(`@/assets/images/${tip.icon}`)" :alt="tip.name" />
{{tip.name}}
</p>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -50,6 +64,12 @@ ...@@ -50,6 +64,12 @@
<script> <script>
export default { export default {
name: 'MapTips', name: 'MapTips',
props: {
isFull: {
type: Boolean,
default: false,
}
},
data() { data() {
return { return {
tips1: [ tips1: [
...@@ -80,8 +100,8 @@ export default { ...@@ -80,8 +100,8 @@ export default {
{name: '60-94岁', color: '#00BFFF'}, {name: '60-94岁', color: '#00BFFF'},
], ],
olds2: [ olds2: [
{name: '已建', color: '#FADB71'}, // {name: '已建', color: '#FADB71'},
{name: '在建', color: '#B3B3B3'}, // {name: '在建', color: '#B3B3B3'},
{name: '敬老院', icon: 'old1.png'}, {name: '敬老院', icon: 'old1.png'},
{name: '综合为老服务中心', icon: 'old2.png'}, {name: '综合为老服务中心', icon: 'old2.png'},
{name: '老年活动室', icon: 'old3.png'}, {name: '老年活动室', icon: 'old3.png'},
...@@ -107,10 +127,12 @@ export default { ...@@ -107,10 +127,12 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
.map-tips .map-tips
position fixed position fixed
right .4rem right calc(33.3% + .4rem)
bottom .1rem bottom .1rem
transition left .5s ease-in-out transition right .5s ease-in-out
z-index 999 z-index 999
&.isFull
right .4rem
>p >p
font-size .12rem font-size .12rem
font-weight bold font-weight bold
......
src/views/components/mic-fire.vue 0 → 100644
View file @ b6906842
<template>
<div class="mic-fire">
<div class="table">
<div>
<p>地址</p>
<p>人数</p>
<p>设备</p>
</div>
<div v-for="(item, i) in list" :key="i">
<p>{{item.address}}</p>
<p>{{item.person}}</p>
<p>{{item.device}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'MicFire',
data() {
return {
list: [
{address: '南京东路123号', person: 12, device: '灭火器、水泵'},
{address: '南京东路123号', person: 9, device: '灭火器、水泵'},
{address: '南京东路123号', person: 12, device: '灭火器、水泵'},
{address: '南京东路123号', person: 9, device: '灭火器、水泵'},
{address: '南京东路123号', person: 12, device: '灭火器、水泵'},
{address: '南京东路123号', person: 9, device: '灭火器、水泵'},
],
}
},
}
</script>
<style lang="stylus" scoped>
.mic-fire
.table
border .01rem solid $cardFontColor
>div
display flex
background $color-map(.15)
&:first-child
background $color-map()
&+div
border-top inherit
p
flex 1
line-height 2
padding 0 .05rem
&+p
border-left .01rem solid $cardFontColor
</style>
src/views/components/old-screen.vue
View file @ b6906842
<template> <template>
<div class="old-screen"> <div class="old-screen">
<div> <div>
<div class="title"> <m-sub title="老人数量" :value="14696" unit="人" />
<p>老人数量</p>
<p><m-count class="count" :value="14696" /> <span class="unit">人</span></p>
</div>
<div class="rate"> <div class="rate">
<div v-for="item in rates" :key="item.name"> <div v-for="item in rates" :key="item.name">
<p>{{item.name}}</p> <p>{{item.name}}</p>
...@@ -13,7 +10,7 @@ ...@@ -13,7 +10,7 @@
</div> </div>
</div> </div>
<div> <div>
<div class="title"><p>年龄分布</p></div> <m-sub title="年龄分布" />
<div class="wrapper"> <div class="wrapper">
<div class="chart" v-if="showChart"> <div class="chart" v-if="showChart">
<m-chart :config="ageConfig" :data="ageData" /> <m-chart :config="ageConfig" :data="ageData" />
...@@ -41,7 +38,7 @@ ...@@ -41,7 +38,7 @@
</div> </div>
</div> </div>
<div> <div>
<div class="title"><p>老人分类</p></div> <m-sub title="老人分类" />
<div class="table"> <div class="table">
<div v-for="item in oldType" :key="item.name"> <div v-for="item in oldType" :key="item.name">
<p>{{item.name}}</p> <p>{{item.name}}</p>
...@@ -51,7 +48,7 @@ ...@@ -51,7 +48,7 @@
</div> </div>
</div> </div>
<div> <div>
<div class="title"><p>养老方式</p></div> <m-sub title="养老方式" />
<div class="bar"> <div class="bar">
<div v-for="item in oldMethod" :key="item.name" :style="{flex: item.value, background: item.color}"> <div v-for="item in oldMethod" :key="item.name" :style="{flex: item.value, background: item.color}">
<div :style="{borderColor: item.color}"> <div :style="{borderColor: item.color}">
...@@ -61,7 +58,7 @@ ...@@ -61,7 +58,7 @@
</div> </div>
</div> </div>
<div> <div>
<div class="title"><p>长护险</p></div> <m-sub title="长护险" />
<div class="rate" style="width: 52%;"> <div class="rate" style="width: 52%;">
<div v-for="item in insurance" :key="item.name"> <div v-for="item in insurance" :key="item.name">
<p>{{item.name}}</p> <p>{{item.name}}</p>
...@@ -90,7 +87,7 @@ export default { ...@@ -90,7 +87,7 @@ export default {
colors: ['#01bffe', '#589d20', '#ffce34', '#f47b1e', '#ff5152', '#826bfa'], colors: ['#01bffe', '#589d20', '#ffce34', '#f47b1e', '#ff5152', '#826bfa'],
legend: {hide: true}, legend: {hide: true},
shape: [ shape: [
{type: 'pie', radius: [0, 35 * Number((screen.height / 800).toFixed(1))], center: ['40%', '40%']}, {type: 'pie', radius: [0, 30 * Number((screen.height / 800).toFixed(1))], center: ['45%', '50%']},
] ]
}, },
insuranceConfig: { insuranceConfig: {
...@@ -102,9 +99,6 @@ export default { ...@@ -102,9 +99,6 @@ export default {
xAxis: { xAxis: {
key: 'name', key: 'name',
}, },
yAxis: [
{name: '爱的色放及哦啊见谁都烦'}
]
}, },
oldType: [ oldType: [
{name: '孤老', value: 346, percent: 0.90}, {name: '孤老', value: 346, percent: 0.90},
...@@ -157,24 +151,10 @@ export default { ...@@ -157,24 +151,10 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
.old-screen .old-screen
z-index 99 z-index 99
width 90% width 100%
height calc(100vh - 0.5rem) height calc(100vh - 0.5rem)
padding-left .1rem
>div >div
margin-bottom .1rem margin-bottom .05rem
.title
font-size .13rem
margin-bottom .1rem
font-weight bold
display flex
align-items center
.count
font-size .15rem
color $color-yellow
margin-left .2rem
.unit
font-size .1rem
color #999
.rate .rate
width 80% width 80%
display flex display flex
...@@ -189,7 +169,7 @@ export default { ...@@ -189,7 +169,7 @@ export default {
display flex display flex
.chart .chart
width 25% width 25%
height .8rem height .6rem
.tips .tips
display flex display flex
flex-wrap wrap flex-wrap wrap
...@@ -242,7 +222,7 @@ export default { ...@@ -242,7 +222,7 @@ export default {
display flex display flex
width 100% width 100%
height .1rem height .1rem
margin .3rem 0 margin .2rem 0
>div >div
position relative position relative
.count .count
...@@ -251,7 +231,7 @@ export default { ...@@ -251,7 +231,7 @@ export default {
position absolute position absolute
min-width 1rem min-width 1rem
>div >div
height .2rem height .15rem
&:nth-of-type(1) &:nth-of-type(1)
>div >div
transform translateY(-90%) transform translateY(-90%)
...@@ -277,6 +257,6 @@ export default { ...@@ -277,6 +257,6 @@ export default {
text-align right text-align right
.insurance-chart .insurance-chart
width 100% width 100%
margin-top .05rem
height 1rem height 1rem
margin-top .1rem
</style> </style>
src/views/components/population.vue 0 → 100644
View file @ b6906842
<template>
<div class="population">
<div class="info">
<div v-for="item in population" :key="item.name">
<p>{{item.name}}</p>
<m-count class="count" :value="item.value" /> <span class="unit">人</span>
</div>
</div>
<m-sub title="居委人口分布" />
<div class="chart" v-if="showChart">
<m-chart :config="config" :data="data" />
</div>
</div>
</template>
<script>
export default {
name: 'Population',
data() {
return {
showChart: false,
population: [
{name: '实有人口', value: 12772},
{name: '本市户籍', value: 7126},
{name: '境内外省', value: 5473},
{name: '境外人口', value: 173},
],
config: {
colors: [['#07b1ff', '#1dfaff'], ['#5032b6', '#c56cd6']],
legend: {
align: 'right'
},
shape: [
{key: 'actual', name: '实有', type: 'bar', barWidth: '20%'},
{key: 'huji', name: '户籍', type: 'bar', barWidth: '20%'},
],
xAxis: {
key: 'name'
}
},
data: [
{name: '均乐', actual: 2971, huji: 6575},
{name: '振兴', actual: 3807, huji: 4508},
{name: '顺天村', actual: 3187, huji: 6575},
{name: '江阴', actual: 1668, huji: 2443},
{name: '新昌', actual: 1139, huji: 3585},
]
}
},
mounted() {
setTimeout(() => this.showChart = true, 100)
},
}
</script>
<style lang="stylus" scoped>
.population
width 100%
height 100%
.info
height .4rem
background-image url(../../assets/images/info-wrapper.png)
background-size 100% 100%
display flex
align-items center
margin-bottom .1rem
>div
flex 1
text-align center
padding-left .05rem
&:nth-of-type(1)
.count
color $color-yellow
&:nth-of-type(2)
margin-left .1rem
p
color $fontColor
.unit
$unit()
.count
font-size .12rem
.chart
width 100%
height 1.1rem
</style>
src/views/components/right-component.vue
View file @ b6906842
<template> <template>
<div class="right-component"> <div id="right-component">
<Menu /> <div class="left">
<div></div> <m-card title="美丽街区-美丽家园">
<div></div> <div class="info">
<div v-for="item in beauty" :key="item.name">
<p>{{item.name}}</p>
<p><m-count class="count" :value="item.value" /></p>
</div>
</div>
</m-card>
<m-card title="智慧养老">
<OldScreen />
</m-card>
</div>
<div class="right">
<m-card title="单兵指挥">
<Command />
</m-card>
<m-card title="网格事件">
<GridManage />
</m-card>
</div>
</div> </div>
</template> </template>
<script> <script>
import Menu from '../components/menu' import OldScreen from '../components/old-screen'
import Command from '../components/command'
import GridManage from '../components/grid-manage'
export default { export default {
name: 'RightComponent', name: 'RightComponent',
components: { components: {
Menu, OldScreen,
Command,
GridManage,
}, },
data() { data() {
return { return {
beauty: [
{name: '2018年完成数', value: 7},
{name: '2019年完成数', value: 1},
{name: '2020年完成数', value: 1},
],
} }
}, },
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.right-component #right-component
display flex
z-index 99 z-index 99
width 100% width 100%
height calc(100vh - 0.5rem) height calc(100vh - 0.5rem)
display flex position relative
flex-direction column flex-wrap wrap
padding-right .1rem
>div >div
flex 1 width calc(33.3vw / 2)
// width calc(33.3vw / 2) height 100%
// &:nth-child(1) &.left
// height 33.3% >div
height 88%
&:nth-child(1)
height 12%
&.right
display flex
flex-direction column
>div
height 75%
&:nth-child(1)
height 25%
.info
width 80%
display flex
justify-content space-between
>div
p
color $fontColor
.count
color $color-yellow
font-size .14rem
padding-left .05rem
</style> </style>
src/views/main.vue
View file @ b6906842
...@@ -5,13 +5,13 @@ ...@@ -5,13 +5,13 @@
'left . right', 'left . right',
]" ]"
columns="33.3vw auto 33.3vw" columns="33.3vw auto 33.3vw"
rows="0.4rem 1" rows="0.4rem auto"
gap="0.05rem" gap="0.05rem"
:complete="complete" :complete="complete"
> >
<m-map ref="map" @complete="mapComplete" @event="handleMapClick"/> <m-map ref="map" @complete="mapComplete" @event="handleMapClick"/>
<m-title area="title" :bgImg="require('@/assets/images/title-bg.png')">南京东路街道数据平台</m-title> <m-title area="title" :bgImg="require('@/assets/images/title-bg.png')">南京东路街道数据平台</m-title>
<m-animate enter="fadeInLeft" leave="fadeOutLeft"> <!-- <m-animate enter="fadeInLeft" leave="fadeOutLeft">
<div v-show="themeName === '主屏'" area="left" class="wrapper"> <div v-show="themeName === '主屏'" area="left" class="wrapper">
<HomeScreen /> <HomeScreen />
</div> </div>
...@@ -20,19 +20,20 @@ ...@@ -20,19 +20,20 @@
<div v-show="themeName === '智慧养老'" area="left" class="wrapper"> <div v-show="themeName === '智慧养老'" area="left" class="wrapper">
<OldScreen v-if="themeName === '智慧养老'" /> <OldScreen v-if="themeName === '智慧养老'" />
</div> </div>
</m-animate> -->
<m-animate enter="fadeInLeft" leave="fadeOutLeft">
<LeftComponent v-show="!fullView" area="left"/>
</m-animate> </m-animate>
<m-animate enter="fadeInRight" leave="fadeOutRight"> <m-animate enter="fadeInRight" leave="fadeOutRight">
<RightComponent area="right"/> <RightComponent v-show="!fullView" area="right"/>
</m-animate> </m-animate>
<MapBtns v-model="fullView" @zoomin="zoom('in')" @zoomout="zoom('out')" /> <MapBtns v-model="fullView" @zoomin="zoom('in')" @zoomout="zoom('out')" />
<MapTips /> <MapTips :isFull="fullView" />
</m-grid> </m-grid>
</template> </template>
<script> <script>
// import LeftComponent from './components/left-component' import LeftComponent from './components/left-component'
import HomeScreen from './components/home-screen'
import OldScreen from './components/old-screen'
import RightComponent from './components/right-component' import RightComponent from './components/right-component'
import MapBtns from './components/map-btns' import MapBtns from './components/map-btns'
import MapTips from './components/map-tips' import MapTips from './components/map-tips'
...@@ -40,17 +41,15 @@ import {mapState} from 'vuex' ...@@ -40,17 +41,15 @@ import {mapState} from 'vuex'
export default { export default {
name: 'Main', name: 'Main',
components: { components: {
// LeftComponent, LeftComponent,
RightComponent, RightComponent,
MapBtns, MapBtns,
MapTips, MapTips,
HomeScreen,
OldScreen,
}, },
data() { data() {
return { return {
complete: false, complete: false,
fullView: true, fullView: false,
boundary: null, boundary: null,
} }
}, },
...@@ -66,14 +65,15 @@ export default { ...@@ -66,14 +65,15 @@ export default {
}, },
initMap() { initMap() {
const {map} = this.$refs const {map} = this.$refs
map.focus(97.87804679686496, -40.686071867261035, 6) // 南京东路街道 // map.focus(97.87804679686496, -40.686071867261035, 6) // 南京东路街道
// map.focus(41.75319496382872, -480.0854532701907, 6) // 市政府区域 map.focus(41.75319496382872, -480.0854532701907, 7) // 市政府区域
// map.focus(-189.37734542225144, 305.3152060727947, 6) // 市政府北边区域 // map.focus(-189.37734542225144, 305.3152060727947, 6) // 市政府北边区域
// map.focus(573.7817329792392, 158.7688192300202, 6) // 市政府东边区域 // map.focus(573.7817329792392, 158.7688192300202, 6) // 市政府东边区域
// map.addPolyLine({ map.addPolyLine({
// paths: this.$store.state.areaAPath, paths: this.$store.state.areaAPath,
// strokeColor: 'rgba(51,145,255,1)', strokeColor: '#826afa',
// }) })
this.addAreaLines()
// map.addPolyLine({ // map.addPolyLine({
// paths: this.$store.state.areaBPath, // paths: this.$store.state.areaBPath,
// strokeColor: 'rgba(51,145,255,1)', // strokeColor: 'rgba(51,145,255,1)',
...@@ -82,20 +82,113 @@ export default { ...@@ -82,20 +82,113 @@ export default {
// paths: this.$store.state.areaCPath, // paths: this.$store.state.areaCPath,
// strokeColor: 'rgba(51,145,255,1)', // strokeColor: 'rgba(51,145,255,1)',
// }) // })
map.addPolygon({ // map.addPolygon({
paths: this.$store.state.areaAPath, // paths: this.$store.state.areaAPath,
// fillColor: 'rgba(51,145,255,.3)', // // fillColor: 'rgba(51,145,255,.3)',
fillColor: 'transparent', // fillColor: 'transparent',
attributes: { // attributes: {
key: 'areaA', // key: 'areaA',
name: '区域A', // name: '区域A',
test: 'hahahhaha' // test: 'hahahhaha'
} // }
}) // })
// map.addPolygon({paths: this.$store.state.areaBPath, fillColor: 'rgba(65,217,199,.3)'}) // map.addPolygon({paths: this.$store.state.areaBPath, fillColor: 'rgba(65,217,199,.3)'})
// map.addPolygon({paths: this.$store.state.areaCPath, fillColor: 'rgba(240,72,100,.3)'}) // map.addPolygon({paths: this.$store.state.areaCPath, fillColor: 'rgba(240,72,100,.3)'})
// map.addPolygon({paths: this.$store.state.streetPath, fillColor: 'rgba(51,145,255,.3)'}) // map.addPolygon({paths: this.$store.state.streetPath, fillColor: 'rgba(51,145,255,.3)'})
this.boundary = map.addBoundary({name: '南京东路街道'}) // this.boundary = map.addBoundary({name: '南京东路街道'})
},
addAreaLines() {
const {map} = this.$refs
const jiangyin = [
[-144.81563520508178, -282.03616394244546],
[-113.85932329245793, -373.52016852503795],
[-203.7144834715283, -428.83473227916545],
[-235.70019197419526, -414.85726291797675],
[-274.3211676536466, -436.61928560868876],
[-324.31098117494037, -445.96240325325743],
[-278.88110515893834, -553.9415580136503],
[-248.97899457346716, -642.1513372977922],
]
const renmindadao = [
[-427.0604705280855, -662.3506615506074],
[-301.8544258451628, -649.8325375560261],
[-255.3538120106018, -647.3520638450786],
[-201.48619125452694, -651.1141156400156],
[-84.11430937534647, -654.7397413808504],
[36.90800298177817, -659.4154343259863],
[-5.475024492610032, -589.2759060260963],
[452.3460083369556, -245.20112933487624],
]
const chongqingbeilu = [
[-205.5128269119649, -652.3460842497868],
[-144.95206125918355, -832.5070239987497],
[-136.47710941344656, -846.8855032765414],
[-129.37055223158222, -915.458199015683],
[-123.07428312862737, -959.9082879158607],
[-234.600515295675, -1019.7331797010611],
]
map.addPolyLine({
paths: jiangyin,
strokeColor: '#ff2728',
})
map.addPolyLine({
paths: renmindadao,
strokeColor: '#ff2728',
})
map.addPolyLine({
paths: chongqingbeilu,
strokeColor: '#ff2728',
})
const pinkArea = [
[-87.51049129791858, -824.2904548312354],
[-71.76775147910558, -853.8783720799865],
[-72.62351490938244, -863.7857974937957],
[-59.43979713569689, -896.0195533675574],
[16.85337302876843, -854.3000526108476],
[8.202720961839304, -833.1023376893761],
[-0.09446360127981279, -811.664843642513],
[-16.709503341775985, -783.4432539962087],
]
const pinkArea2 = [
[-295.99017258019785, -512.9145228345801],
[-247.80283662219256, -645.3842213677272],
[-207.32770684380802, -649.8118669417682],
[-135.78877795865856, -604.4150639085789],
[-208.84699699176332, -484.6061166083926],
]
const pinkArea3 = [
[-437.6727638880892, -462.9536481732473],
[-437.32136344570495, -486.12127263349623],
[-407.62389194138694, -480.8916072262487],
[-329.74321860191526, -452.2648735404897],
[-317.4421360570418, -448.8872951707496],
[-274.6146903761088, -439.86457204717834],
[-234.98705578229794, -421.1576661437832],
[-205.6699235803252, -433.12595179910454],
[-113.08624231921266, -380.5543785569997],
[-124.74033463781399, -370.8825981457305],
[-201.71770213421564, -420.15307429084953],
[-210.9574667074948, -419.7396620056916],
[-224.86672304163244, -409.6875422920772],
[-234.0444757721379, -409.6875422920772],
[-241.23991659531123, -411.52929402245564],
[-274.17440629241565, -430.5813991839576],
[-327.8146502916536, -440.25938077950417],
[-401.1684591086463, -466.71156584533264],
]
const yellowArea = [
[-204.59918576176608, -652.9289955718591],
[-175.49702794807547, -740.8741909935],
[-116.01320129813047, -707.2348333502014],
[-56.481832235392346, -704.7688290692345],
[37.57152969945656, -659.7502982769646],
[-204.14236518666658, -653.0096109674649],
]
map.addPolygon({paths: pinkArea, fillColor: 'rgba(234,104,203,.5)'})
map.addPolygon({paths: pinkArea2, fillColor: 'rgba(234,104,203,.5)'})
map.addPolygon({paths: pinkArea3, fillColor: 'rgba(234,104,203,.5)'})
map.addPolygon({paths: yellowArea, fillColor: 'rgba(247,200,52,.5)'})
}, },
handleMapClick(data) { handleMapClick(data) {
const {map} = this.$refs const {map} = this.$refs
......
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