Skip to content

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

第一稿暂存

parent 6108cd41
Hide whitespace changes
Inline Side-by-side
Showing with 1547 additions and 176 deletions
src/App.vue
View file @ 006df87d
...@@ -23,6 +23,13 @@ export default { ...@@ -23,6 +23,13 @@ export default {
@font-face @font-face
font-family Pangmenzhengdao font-family Pangmenzhengdao
src url(./assets/font/pangmenzhengdao.ttf) src url(./assets/font/pangmenzhengdao.ttf)
$mask()
content ''
width 20%
height 95%
position absolute
bottom 0
z-index 2
html, body html, body
background-color #000 !important background-color #000 !important
width 100% width 100%
...@@ -37,6 +44,15 @@ html, body ...@@ -37,6 +44,15 @@ html, body
font-size .1rem font-size .1rem
overflow: hidden overflow: hidden
color #fff color #fff
position relative
&:before
$mask()
left 0
background linear-gradient(to right, rgba(0,0,0,.7), rgba(0,0,0,.1))
&:after
$mask()
right 0
background linear-gradient(to left, rgba(0,0,0,.7), rgba(0,0,0,.1))
/* 设置滚动条的样式 */ /* 设置滚动条的样式 */
::-webkit-scrollbar { ::-webkit-scrollbar {
......
src/assets/css/variables.styl
View file @ 006df87d
...@@ -2,11 +2,12 @@ ...@@ -2,11 +2,12 @@
$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(0, 118, 255, opacity)
$color-green = #82DF12 $color-green = #82DF12
$color-blue = #01BFFD $color-blue = #01BFFD
$color-red = #ff1e1e $color-red = #ff1e1e
$color-yellow = #ffd400 $color-yellow = #ffd400
$color-orange = #ff9c25
$layout(gap = 0.06rem) $layout(gap = 0.06rem)
width 100% width 100%
height 100% height 100%
...@@ -25,7 +26,7 @@ $selected() ...@@ -25,7 +26,7 @@ $selected()
border 0.01rem solid $edgeColor border 0.01rem solid $edgeColor
background-color rgba(0,242,255,0.1) background-color rgba(0,242,255,0.1)
$fontColor = #70A7E0 $fontColor = #70A7E0
$edgeColor = #47B3FF $edgeColor = #5ad1fb
$cardBg = rgba(49,94,139,.3) $cardBg = rgba(49,94,139,.3)
$cardBorder = 0.01rem solid #1c425f $cardBorder = 0.01rem solid #1c425f
...@@ -37,3 +38,6 @@ $flex-center() ...@@ -37,3 +38,6 @@ $flex-center()
justify-content center justify-content center
$section-bg = rgba(51,145,255,.1) $section-bg = rgba(51,145,255,.1)
$section-hover = rgba(51,145,255,.2) $section-hover = rgba(51,145,255,.2)
$unit()
font-size .08rem
color #999
src/assets/images/icon1.png
View replaced file @ 6108cd41 View file @ 006df87d
src/assets/images/icon1.png

1.5 KB | W: | H:

src/assets/images/icon1.png

668 Bytes | W: | H:

src/assets/images/icon1.png
src/assets/images/icon1.png
src/assets/images/icon1.png
src/assets/images/icon1.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/icon2.png
View replaced file @ 6108cd41 View file @ 006df87d
src/assets/images/icon2.png

1.42 KB | W: | H:

src/assets/images/icon2.png

787 Bytes | W: | H:

src/assets/images/icon2.png
src/assets/images/icon2.png
src/assets/images/icon2.png
src/assets/images/icon2.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/icon3.png
View replaced file @ 6108cd41 View file @ 006df87d
src/assets/images/icon3.png

2.75 KB | W: | H:

src/assets/images/icon3.png

869 Bytes | W: | H:

src/assets/images/icon3.png
src/assets/images/icon3.png
src/assets/images/icon3.png
src/assets/images/icon3.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/icon4.png
View replaced file @ 6108cd41 View file @ 006df87d
src/assets/images/icon4.png

1.78 KB | W: | H:

src/assets/images/icon4.png

785 Bytes | W: | H:

src/assets/images/icon4.png
src/assets/images/icon4.png
src/assets/images/icon4.png
src/assets/images/icon4.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/icon5.png
View replaced file @ 6108cd41 View file @ 006df87d
src/assets/images/icon5.png

1.96 KB | W: | H:

src/assets/images/icon5.png

834 Bytes | W: | H:

src/assets/images/icon5.png
src/assets/images/icon5.png
src/assets/images/icon5.png
src/assets/images/icon5.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/icon6.png
View replaced file @ 6108cd41 View file @ 006df87d
src/assets/images/icon6.png

1.33 KB | W: | H:

src/assets/images/icon6.png

856 Bytes | W: | H:

src/assets/images/icon6.png
src/assets/images/icon6.png
src/assets/images/icon6.png
src/assets/images/icon6.png
  • 2-up
  • Swipe
  • Onion skin
src/components/MonitorComponents/MonitorChart/monitor-chart.vue
View file @ 006df87d
...@@ -209,6 +209,37 @@ export default { ...@@ -209,6 +209,37 @@ export default {
} else { } else {
options.series[0].data = this.data options.series[0].data = this.data
} }
if (shape.length === 2) {
options.series = [{
label: {
normal: {
show: false,
},
},
itemStyle: {
color: ({dataIndex}) => options.color[0][dataIndex]
},
...shape[0],
}, {
label: {
normal: {
show: false,
},
},
itemStyle: {
color: ({dataIndex}) => options.color[1][dataIndex]
},
...shape[1],
}]
const [data1, data2] = this.data
if (options.legend && options.legend.data) {
options.series[0].data = options.legend.data = data1
options.series[1].data = options.legend.data = data2
} else {
options.series[0].data = data1
options.series[1].data = data2
}
}
options.tooltip.trigger = 'item' options.tooltip.trigger = 'item'
this.$delete(options, 'xAxis') this.$delete(options, 'xAxis')
this.$delete(options, 'yAxis') this.$delete(options, 'yAxis')
...@@ -330,17 +361,18 @@ export default { ...@@ -330,17 +361,18 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgba(91,213,255,0.3)' color: 'rgba(47,134,238,0.3)'
} }
}, },
splitLine: { splitLine: {
show: true, show: false,
lineStyle: { lineStyle: {
color: 'rgba(91,213,255,0.3)' color: 'rgba(47,134,238,0.3)'
} }
} }
}, },
yAxis: { yAxis: {
name: 'hahah',
nameTextStyle: { nameTextStyle: {
color: '#fff', color: '#fff',
fontSize: this.fontSize, fontSize: this.fontSize,
...@@ -350,7 +382,7 @@ export default { ...@@ -350,7 +382,7 @@ export default {
show: true, show: true,
lineStyle: { lineStyle: {
// color: 'rgba(91,213,255,0.3)' // color: 'rgba(91,213,255,0.3)'
color: 'rgba(112,167,224,.3)' color: 'rgba(47,134,238,0.3)'
} }
}, },
axisLabel: { axisLabel: {
...@@ -362,7 +394,7 @@ export default { ...@@ -362,7 +394,7 @@ export default {
axisLine: { axisLine: {
lineStyle: { lineStyle: {
// color: 'rgba(91,213,255,0.3)' // color: 'rgba(91,213,255,0.3)'
color: 'rgba(112,167,224,.3)' color: 'rgba(47,134,238,0.3)'
} }
}, },
}, },
......
src/components/MonitorComponents/MonitorCount/monitor-count.vue
View file @ 006df87d
<template> <template>
<ICountUp <ICountUp
class="monitor-count" class="monitor-count"
:class="{pang: isPang}"
:delay="delay" :delay="delay"
:endVal="value" :endVal="value"
:options="config" :options="config"
...@@ -16,6 +17,10 @@ export default { ...@@ -16,6 +17,10 @@ export default {
ICountUp, ICountUp,
}, },
props: { props: {
isPang: {
type: Boolean,
default: true,
},
delay: { delay: {
type: Number, type: Number,
default: 500, default: 500,
...@@ -24,9 +29,9 @@ export default { ...@@ -24,9 +29,9 @@ export default {
type: Number, type: Number,
default: 0, default: 0,
}, },
decimal: { // 默认保留2位小数点 decimal: { // 默认保留0位小数点
type: Number, type: Number,
default: 2, default: 0,
}, },
prefix: { prefix: {
type: String, type: String,
...@@ -87,6 +92,6 @@ export default { ...@@ -87,6 +92,6 @@ export default {
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.monitor-count .monitor-count.pang
font-family $font-pang font-family $font-pang
</style> </style>
src/components/MonitorComponents/MonitorMap/monitor-map.vue
View file @ 006df87d
...@@ -24,24 +24,27 @@ export default { ...@@ -24,24 +24,27 @@ export default {
this.map = new SMap.Map('mapContainer', { this.map = new SMap.Map('mapContainer', {
viewMode: '2D', viewMode: '2D',
// center: [0, 0], // center: [0, 0],
// zoom: 4, // zooms: [6, 7],
// zooms: [1, 12],
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()
// this.map.enableMouseEvent(false) // 禁用鼠标
this.$emit('complete') this.$emit('complete')
}) })
}, },
addListener() { // 触发地图点击事件 addListener() { // 触发地图点击事件
this.map.on(SMap.MapEvent.click, (view, eventParamter) => { this.map.on(SMap.MapEvent.click, (view, eventParamter) => {
const {x, y} = eventParamter.mapPoint
console.log([x, y])
view.hitTest(eventParamter).then(res => { view.hitTest(eventParamter).then(res => {
// 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) {
this.$emit('event', res.results[0].graphic.attributes) console.log('click', res)
this.$emit('event', res.results[0] && res.results[0].graphic.attributes)
} }
}) })
}) })
...@@ -113,7 +116,7 @@ export default { ...@@ -113,7 +116,7 @@ export default {
this.map.zoomOut() this.map.zoomOut()
}, },
// 添加面 // 添加面
addPolygon({paths, fillColor = 'rgba(255,255,255,.3)'}, strokeColor = 'transparent', attributes = {}, style = 'solid', strokeWeight = 1, label = null) { addPolygon({paths, fillColor = 'rgba(255,255,255,.3)', strokeColor = 'transparent', attributes = {}, style = 'solid', strokeWeight = 1, label = null}) {
const polygon = new SMap.Polygon({ const polygon = new SMap.Polygon({
paths: paths.map(item => new SMap.LngLat(item[0], item[1])), paths: paths.map(item => new SMap.LngLat(item[0], item[1])),
attributes, attributes,
...@@ -126,6 +129,19 @@ export default { ...@@ -126,6 +129,19 @@ export default {
}) })
this.map.add(polygon) this.map.add(polygon)
}, },
// 添加线状覆盖物
addPolyLine({paths, attributes = {}, strokeColor = 'rgba(51,145,255,.6)', label = null}) {
const polyline = new SMap.Polyline({
path: paths.map(item => new SMap.LngLat(item[0], item[1])),
attributes,
cap: 'square',
strokeColor,
style: 'solid',
lineJoin: 'round',
label,
})
this.map.add(polyline)
},
// 添加边界 // 添加边界
addBoundary({name, weight = 10, count = 10, color = 'rgba(51,145,255,.6)', maskColor = [0, 0, 0, 0]}) { addBoundary({name, weight = 10, count = 10, color = 'rgba(51,145,255,.6)', maskColor = [0, 0, 0, 0]}) {
const boundary = { const boundary = {
...@@ -138,6 +154,7 @@ export default { ...@@ -138,6 +154,7 @@ export default {
} }
const Boundary = new Plugins.MaskBoundary(this.map.view) const Boundary = new Plugins.MaskBoundary(this.map.view)
Boundary.add(boundary) Boundary.add(boundary)
return Boundary
}, },
}, },
} }
......
src/components/MonitorComponents/MonitorTitle/monitor-title.vue
View file @ 006df87d
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<span>{{curDate}}</span> <span>{{curDate}}</span>
</DatePicker> </DatePicker>
</span> --> </span> -->
<div class="btn back" @click="closePage" /> <!-- <div class="btn back" @click="closePage" />
<div class="btn close" @click="closePage" /> <div class="btn close" @click="closePage" />
<div class="slogan left"> <div class="slogan left">
<span v-for="(word, i) in slogan[0]" :key="i+word">{{word}}</span> <span v-for="(word, i) in slogan[0]" :key="i+word">{{word}}</span>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
今日值班： 今日值班：
<p>{{masters[0]}}<img src="@/assets/images/phone.png" /></p> <p>{{masters[0]}}<img src="@/assets/images/phone.png" /></p>
<p>{{masters[1]}}<img src="@/assets/images/phone.png" /></p> <p>{{masters[1]}}<img src="@/assets/images/phone.png" /></p>
</div> </div> -->
<span v-if="!hideTime" class="moment time"> <span v-if="!hideTime" class="moment time">
<!-- <span class="switch"><img src="@/assets/images/switch.png"/> 切换街道</span> --> <!-- <span class="switch"><img src="@/assets/images/switch.png"/> 切换街道</span> -->
{{curDate}} {{time}} {{curDate}} {{time}}
...@@ -61,7 +61,6 @@ export default { ...@@ -61,7 +61,6 @@ export default {
timer: null, timer: null,
time: null, time: null,
style: {}, style: {},
slogan: ['人民城市人民建', '人民城市为人民'],
} }
}, },
mounted() { mounted() {
...@@ -89,11 +88,6 @@ export default { ...@@ -89,11 +88,6 @@ export default {
} }
} }
}, },
masters() {
const {currentStreetInfo, streetInfo} = this.$store.state
const {master1, master2} = streetInfo[currentStreetInfo.id]
return [master1, master2]
},
}, },
methods: { methods: {
handleDateChange(date) { handleDateChange(date) {
...@@ -127,54 +121,54 @@ export default { ...@@ -127,54 +121,54 @@ export default {
background-position center background-position center
// font-family $font-pang // font-family $font-pang
font-weight bold font-weight bold
>.btn // >.btn
display block // display block
position absolute // position absolute
width .2rem // width .2rem
height @width // height @width
top .05rem // top .05rem
cursor pointer // cursor pointer
z-index 999 // z-index 999
background-size 100% 100% // background-size 100% 100%
transition background-image .3s ease-in-out // transition background-image .3s ease-in-out
&.back // &.back
left .1rem // left .1rem
background-image url(../../../assets/images/back.png) // background-image url(../../../assets/images/back.png)
&:hover // &:hover
background-image url(../../../assets/images/back-on.png) // background-image url(../../../assets/images/back-on.png)
&.close // &.close
right .1rem // right .1rem
background-image url(../../../assets/images/close.png) // background-image url(../../../assets/images/close.png)
&:hover // &:hover
background-image url(../../../assets/images/close-on.png) // background-image url(../../../assets/images/close-on.png)
.slogan // .slogan
display flex // display flex
justify-content space-around // justify-content space-around
align-items center // align-items center
width 15% // width 15%
position absolute // position absolute
top .05rem // top .05rem
z-index: 2; // z-index: 2;
&.left // &.left
left 20% // left 20%
&.right // &.right
right 20% // right 20%
span // span
$flex-center() // $flex-center()
width .2rem // width .2rem
height @width // height @width
background rgba(2,68,147,.8) // background rgba(2,68,147,.8)
border-radius 50% // border-radius 50%
font-family $font-pang // font-family $font-pang
font-size .14rem // font-size .14rem
font-weight normal // font-weight normal
.switch // .switch
color #5BD5FF // color #5BD5FF
margin-right .1rem // margin-right .1rem
cursor pointer // cursor pointer
img // img
width .12rem // width .12rem
vertical-align middle // vertical-align middle
.moment .moment
z-index 9 z-index 9
position absolute position absolute
......
src/server/api.js
View file @ 006df87d
let BASE_URL = '' let BASE_URL = ''
let DATA_URL = ''
switch (process.env.NODE_ENV) { switch (process.env.NODE_ENV) {
case 'production': case 'production':
// BASE_URL = 'http://10.89.4.164:18080/api' BASE_URL = 'http://hp-nandong.omniview.pro'
BASE_URL = 'http://yangpu.hm.omniview.pro/api'
DATA_URL = 'http://10.89.1.208:10005'
break break
default: default:
BASE_URL = 'http://yangpu.hm.omniview.pro/api' BASE_URL = 'http://hp-nandong.omniview.pro'
DATA_URL = 'http://10.89.1.208:10005'
} }
export default { export default {
BASE_URL, BASE_URL,
DATA_URL,
GET_DISCOVER_TREND: '/service-special-ddd/public/alarm/unremoved/statistics', // 智能发现趋势图
GET_REPAIR_RATE: '/service-documents-ddd/public/unsolved/repair/type/count', // 投诉报修比例图
GET_RESOURCE_SUM: '/service-basicdatasync-ddd/public/resource/count', // 房屋物业统计数字
GET_CHECK_SUM: '/service-documents-ddd/public/checkorder/count', // 主动巡检统计数字
GET_CHECK_LIST: '/service-documents-ddd/public/v1/need/rectification/check/order/list', // 巡检列表
GET_DISCOVER_INFO: '/service-special-ddd/public/discoverInfo', // 智能发现数目
GET_TS_BX: '/service-documents-ddd/public/repair/complaint', // 投诉报修数目
GET_HANDLE_LIST: '/service-special-ddd/public/alarm/index', // 联勤联动列表
GET_CAMERA_LIST: '/service-special-ddd/public/camerainfo', // 视频撒点列表 参数：streetname=街道名称，streetname_l=平凉路街道 模糊查询，rootname=街道 查询所有街道
GET_INSPECTION_LIST: 'http://962121.fgj.sh.gov.cn/wyweb/shanghaiwuye/propertyinspector/api/v1/sharingplatform/themeListForOneDay', // 专项检查
GET_GRID1: '/dc/countDiscoveredCaseByStreet', // 网格-发现
GET_GRID2: '/dc/countRegisterCaseByStreet', // 网格-立案
GET_GRID3: '/dc/countDispatchCaseByStreet', // 网格-派遣
GET_GRID4: '/dc/countSolvingCaseByStreet', // 网格-处置
GET_GRID5: '/dc/countCheckingCaseByStreet', // 网格-核实
GET_GRID6: '/dc/countClosedCaseByStreet', // 网格-结案
GET_NOT_ALERT1: '/dc/countDiscoveredNotPoliceByStreet', // 非警情-发现
GET_NOT_ALERT2: '/dc/countRegisterNotPoliceByStreet', // 非警情-立案
GET_NOT_ALERT3: '/dc/countDispatchNotPoliceByStreet', // 非警情-派遣
GET_NOT_ALERT4: '/dc/countSolvingNotPoliceByStreet', // 非警情-处置
GET_NOT_ALERT5: '/dc/countCheckingNotPoliceByStreet', // 非警情-核实
GET_NOT_ALERT6: '/dc/countClosedNotPoliceByStreet', // 非警情-结案
GET_POPULATION_INFO: '/dc/statisticsbureauArea', // 土地人口统计数字
GET_COMPRESS_COUNT: '/dc/countCompressStationsByStreet', // 街道小型压缩站数目
GET_GARBAGE_COUNT: '/dc/countPointsByStreet', // 街道垃圾收集点数目
GET_TOILET_COUNT: '/dc/countToiletsByStreet', // 街道环卫公厕数目
GET_STREET_BASIC: '/dc/getStreetGridPowerByStreetGridId', // 街道基数
GET_VIDEO_URL: 'http://10.89.1.208:7000/hawkeye/api/v1/camera/', // 后面接id获取视频地址
GET_HEALTH_INFO: '/service-documents-ddd/public/property/health/degree', // 物业健康度
} }
src/store/mutations.js
View file @ 006df87d
export default { export default {
SET_CURRENT_STREET(state, name) {
if (!name) return
state.currentStreetInfo = state.streets.find(street => {
return street.name.indexOf(name) >= 0 || street.en.indexOf(name) >= 0
})
},
SET_LOADING(state, val) { SET_LOADING(state, val) {
state.showLoading = val state.showLoading = val
}, },
SET_CURDATE(state, date) { SET_CURDATE(state, date) {
state.curDate = date state.curDate = date
}, },
SET_THEME_NAME(state, name) {
state.themeName = name
},
} }
src/store/state.js
View file @ 006df87d
export default { export default {
showLoading: false, showLoading: false,
curDate: null, curDate: null,
themeName: '主屏',
workspaceA: [-130.35033934740738, -661.862835054121],
workspaceB: [382.4793321452691, 678.9654976442117],
workspaceC: [-57.84609277641425, 261.561716873108],
streetPath: [
[
686.2960205078125,
758.91943359375
],
[
687.5216064453125,
703.431640625
],
[
689.6416015625,
680.46820068359375
],
[
699.11981201171875,
646.06158447265625
],
[
705.39739990234375,
623.2734375
],
[
733.95941162109375,
535.16259765625
],
[
743.4078369140625,
508.1500244140625
],
[
757.6864013671875,
467.32781982421875
],
[
760.106201171875,
460.27581787109375
],
[
781.8724365234375,
396.5369873046875
],
[
802.95440673828125,
331.1864013671875
],
[
805.75079345703125,
321.468017578125
],
[
823.96038818359375,
259.07818603515625
],
[
860.02740478515625,
189.05218505859375
],
[
903.36578369140625,
120.7994384765625
],
[
843.74261474609375,
93.813232421875
],
[
824.309814453125,
86.8411865234375
],
[
884.11883544921875,
-17.91510009765625
],
[
963.7017822265625,
15.92120361328125
],
[
1030.3121948242187,
-130.2108154296875
],
[
1053.3998413085937,
-181.535888671875
],
[
1095.27880859375,
-280.22650146484375
],
[
1029.2031860351562,
-305.1156005859375
],
[
1004.5751953125,
-318.093994140625
],
[
940.22979736328125,
-352.65887451171875
],
[
870.45599365234375,
-395.30517578125
],
[
804.83099365234375,
-435.87237548828125
],
[
739.88043212890625,
-475.1785888671875
],
[
652.81982421875,
-527.8798828125
],
[
634.58843994140625,
-538.91607666015625
],
[
704.181396484375,
-660.9451904296875
],
[
765.21820068359375,
-765.36810302734375
],
[
715.289794921875,
-789.90948486328125
],
[
644.57623291015625,
-822.96331787109375
],
[
606.6453857421875,
-841.38677978515625
],
[
553.81341552734375,
-872.273193359375
],
[
503.27081298828125,
-902.11767578125
],
[
411.90399169921875,
-951.36419677734375
],
[
314.15899658203125,
-998.70196533203125
],
[
211.57061767578125,
-1027.8193969726562
],
[
157.5823974609375,
-1040.5836791992187
],
[
104.335205078125,
-1069.139404296875
],
[
18.16363525390625,
-1091.7291870117187
],
[
-39.53057861328125,
-1105.0048828125
],
[
-74.20989990234375,
-1115.5712890625
],
[
-96.990966796875,
-1129.065673828125
],
[
-115.138671875,
-1149.0759887695312
],
[
-133.41400146484375,
-1127.0830688476562
],
[
-160.98681640625,
-1097.2020874023437
],
[
-177.18829345703125,
-1081.8004760742187
],
[
-239.79931640625,
-1016.2052001953125
],
[
-265.74517822265625,
-1029.6607055664062
],
[
-314.31341552734375,
-1050.3648071289062
],
[
-358.57000732421875,
-1064.6204833984375
],
[
-404.11749267578125,
-1075.0863647460937
],
[
-390.268798828125,
-872.95086669921875
],
[
-359.0325927734375,
-868.7427978515625
],
[
-376.07940673828125,
-838.8223876953125
],
[
-392.3385009765625,
-804.13140869140625
],
[
-418.3045654296875,
-718.581298828125
],
[
-424.69207763671875,
-674.58416748046875
],
[
-425.77117919921875,
-660.92327880859375
],
[
-435.2802734375,
-528.4163818359375
],
[
-437.82061767578125,
-485.7554931640625
],
[
-448.22088623046875,
-302.6636962890625
],
[
-448.89459228515625,
-293.85498046875
],
[
-466.17828369140625,
-178.95489501953125
],
[
-484.194580078125,
-65.42950439453125
],
[
-484.2427978515625,
-64.9085693359375
],
[
-507.53460693359375,
54.246826171875
],
[
-523.72821044921875,
124.24859619140625
],
[
-545.627685546875,
189.10321044921875
],
[
-629.12646484375,
352.77978515625
],
[
-676.2047119140625,
452.41241455078125
],
[
-709.64208984375,
530.283203125
],
[
-819.090087890625,
829.6697998046875
],
[
-832.4129638671875,
867.15478515625
],
[
-790.3623046875,
869.70098876953125
],
[
-734.47857666015625,
866.83319091796875
],
[
-678.1654052734375,
857.39923095703125
],
[
-529.090087890625,
801.830810546875
],
[
-467.03570556640625,
768.02020263671875
],
[
-332.32568359375,
674.8599853515625
],
[
-302.3056640625,
658.77020263671875
],
[
-247.065673828125,
640.05999755859375
],
[
-184.27569580078125,
633.239990234375
],
[
-150.5391845703125,
635.08819580078125
],
[
-117.2947998046875,
644.21343994140625
],
[
-51.92840576171875,
672.765625
],
[
38.8621826171875,
728.4307861328125
],
[
157.216796875,
815.3934326171875
],
[
211.6544189453125,
847.15020751953125
],
[
272.96441650390625,
872.16998291015625
],
[
333.23443603515625,
882.47003173828125
],
[
410.284423828125,
882.510009765625
],
[
483.76739501953125,
869.40643310546875
],
[
533.6224365234375,
847.38818359375
],
[
609.05438232421875,
800
],
[
686.2960205078125,
758.91943359375
]
],
areaAPath: [
[-454.59786284245365, -293.83495056085195],
[-151.9966065982744, -276.1657094932031],
[-121.95806995870112, -265.8965483298808],
[-108.51390244536606, -245.64761460284672],
[-86.29712624098033, -209.5815268456712],
[-62.35228668463469, -136.58945377819168],
[-33.94259444858335, -82.8706614447737],
[3.363730164065828, -40.4628292332759],
[43.167064979068755, 8.394234626685119],
[105.22851722697328, 60.27747641400205],
[170.82051039012617, 94.84701169890596],
[266.31048001589875, 118.45285318142226],
[364.9341147631683, -71.8656264138703],
[444.28446877637634, -221.4712641668125],
[634.6360213544815, -545.0573280056069],
[764.9022324077371, -764.4717642303128],
[508.35510473014824, -908.9180166644842],
[317.46611618133784, -1004.2591578675999],
[161.68409888813653, -1048.7257832591843],
[105.90651337463214, -1075.8456291655427],
[-67.01557726121564, -1117.501051018053],
[-94.27598334452796, -1136.0880673587524],
[-110.92823019068828, -1152.1036592857695],
[-235.6712531142341, -1023.6316575500994],
[-306.1084382594378, -1053.5709752412347],
[-355.5360110729167, -1070.057857173332],
[-403.4504949227178, -1078.3591758593027],
[-392.10646181798484, -873.8937278659066],
[-364.1680595870138, -868.5937823701825],
[-398.4151332894945, -805.540140637899],
[-424.35262006030143, -720.187040244198],
[-430.9672166228279, -672.900943067837],
[-437.70583687090163, -520.4096875644927],
[-449.240039626806, -306.53497596090347],
],
areaBPath: [
[-827.6197677404292, 863.6615701613555],
[-708.507420140734, 529.087007783064],
[-544.6473267955473, 184.59055056098282],
[-523.8857618349174, 124.25716166503844],
[-451.3484422811116, -294.9842367135918],
[-152.79862643148, -277.8524316166481],
[-122.5120424208119, -268.7160201146585],
[-84.99074341988057, -211.12768879216264],
[-63.923253368233645, -138.51595502702844],
[-34.306397259521646, -87.17841745611986],
[38.478969665379054, 8.683623226294912],
[107.08887251018473, 60.05423378001592],
[158.0543390244511, 92.77168202741245],
[264.45839297839234, 119.5525298599415],
[171.40755583505143, 467.1165062378942],
[134.7709591243579, 587.717138064158],
[81.23406819640945, 702.8193864978215],
[60.116968670543656, 737.5046772225696],
[-52.52134254357884, 666.753298740646],
[-117.37746183915078, 641.493808117498],
[-151.4095611533494, 632.9609785518389],
[-186.334631003489, 628.7524414889315],
[-237.86233822557006, 637.5911961456075],
[-301.7758775109821, 657.7822521527194],
[-467.37230245383194, 765.9722471785428],
[-527.2261330989933, 795.6221762700677],
[-676.0132145273228, 855.6165670921827],
[-733.4857904099746, 866.563724403164],
[-791.5950212117696, 868.8044189887198],
],
areaCPath: [
[62.564369398678764, 740.5887328698475],
[137.63177213765096, 581.9293660719472],
[265.9218724678516, 118.00636791345084],
[633.5446129216658, -540.7909132227782],
[1009.9399620665309, -314.1334937621058],
[1093.7138275309285, -280.9447555096293],
[964.1008078882224, 10.568783246614885],
[884.0476529902461, -20.486747614446926],
[826.2691520165776, 82.29581472151119],
[899.6994421063242, 120.57779232713301],
[826.2278107880617, 251.71216917922004],
[705.7015931731263, 615.2007867814553],
[689.5206363320461, 675.2447870777893],
[684.3364462761659, 756.2487902316288],
[534.3504692208784, 845.4714296144077],
[483.33539323239313, 867.770888275825],
[418.098934634476, 876.5269604754694],
[339.3025530833796, 879.3795052430589],
[278.7872627819655, 867.1094286195723],
[216.4694949172632, 843.7681709995571],
[158.20316744710817, 810.0089237935626],
[69.50142754362844, 745.9134831026813],
],
} }
src/views/components/home-screen.vue 0 → 100644
View file @ 006df87d
<template>
<div class="home-screen">
<div>
<div class="title">实有人口</div>
<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>
<div class="wrapper">
<div class="chart" v-if="showChart">
<m-chart :config="config" :data="populationData" />
</div>
<div class="tips">
<div>
<div v-for="(item, i) in populationData[0]" :key="item.name">
<p><span class="dot" :style="{background: config.colors[0][i]}"/> {{item.name}}</p>
<p><m-count :isPang="false" :value="item.percent" />% &nbsp;&nbsp;&nbsp;&nbsp; <m-count :isPang="false" :value="item.value" />人</p>
</div>
</div>
<div>
<div v-for="(item, i) in populationData[1]" :key="item.name">
<p><span class="dot" :style="{background: config.colors[1][i]}"/> {{item.name}}</p>
<p><m-count :isPang="false" :value="item.percent" />% &nbsp;&nbsp;&nbsp;&nbsp; <m-count :isPang="false" :value="item.value" />人</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="title">
<p>实有房屋</p>
<p><m-count class="count" :value="5012" /> <span class="unit">幢</span></p>
</div>
<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>
<div class="wrapper">
<div class="chart" v-if="showChart">
<m-chart :config="houseConfig" :data="houseData" />
</div>
<div class="tips">
<p>非居房屋 <m-count class="count" :value="195" /> <span class="unit">幢</span></p>
<div>
<div v-for="(item, i) in houseData.slice(0, 3)" :key="item.name">
<span class="dot" :style="{background: houseConfig.colors[i]}"/>
{{item.name}} &nbsp;&nbsp;&nbsp;&nbsp;
<m-count :isPang="false" :value="item.value" />
</div>
</div>
<div>
<div v-for="(item, i) in houseData.slice(3)" :key="item.name">
<span class="dot" :style="{background: houseConfig.colors[i + 3]}"/>
{{item.name}} &nbsp;&nbsp;&nbsp;&nbsp;
<m-count :isPang="false" :value="item.value" />
</div>
</div>
</div>
</div>
</div>
<div>
<div class="title">
<p>实有企业法人</p>
<p><m-count class="count" :value="46" /> <span class="unit">名</span></p>
</div>
<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>
</div>
</template>
<script>
export default {
name: 'HomeScreen',
data() {
return {
showChart: false,
population: [
{name: '实有人口', value: 36281},
{name: '本市户籍', value: 17354},
{name: '境内外省', value: 11645},
{name: '境外人口', value: 7282},
],
house: [
{name: '居住房屋', value: 4817},
{name: '商品房', value: 3954},
{name: '混合与直管', value: 591},
{name: '保障及其他', value: 272},
],
company: [
{name: '实有企业', value: 19},
{name: '亿元以上', value: 3},
{name: '千万-亿元', value: 6},
{name: '千万以下', value: 10},
],
config: {
colors: [
['#1992e5', '#f85453'],
['#72c011', '#ffce34', '#826bfa'],
],
legend: {hide: true},
shape: [
{type: 'pie', radius: [35 * Number((screen.height / 800).toFixed(1)), 45 * Number((screen.height / 800).toFixed(1))], center: ['35%', '50%']},
{type: 'pie', radius: [0, 25 * Number((screen.height / 800).toFixed(1))], center: ['35%', '50%']},
]
},
houseConfig: {
colors: ['#01bffe', '#589d1e', '#ffce34', '#f47b1e', '#ff5152', '#826bfa'],
legend: {hide: true},
shape: [
{type: 'pie', radius: [0, 45 * Number((screen.height / 800).toFixed(1))], center: ['35%', '50%']},
]
},
}
},
mounted() {
setTimeout(() => this.showChart = true, 100)
},
computed: {
populationData() {
return [
[
{name: '男性', value: 19954, percent: 55},
{name: '女性', value: 16327, percent: 45},
], [
{name: '0-18岁', value: 7256, percent: 20},
{name: '18-70岁', value: 18141, percent: 50},
{name: '60岁以上', value: 10884, percent: 30},
]
]
},
houseData() {
return [
{name: '服装', value: 56},
{name: '饭店', value: 12},
{name: '旅馆', value: 27},
{name: '学校', value: 18},
{name: '医院', value: 6},
{name: '娱乐', value: 76},
]
},
},
}
</script>
<style lang="stylus" scoped>
.home-screen
z-index 99
width 90%
height calc(100vh - 0.5rem)
padding-left .1rem
>div
width 100%
margin-bottom .2rem
.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
.info
height .5rem
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
.wrapper
display flex
.chart
width 35%
height 1rem
.tips
display flex
flex-wrap wrap
flex 1
>p
width 100%
color $fontColor
font-size .11rem
.count
color $color-yellow
font-size .13rem
margin-left .05rem
.unit
color #999
>div
flex 1
>div
margin-bottom .05rem
>p
&:last-child
padding-left 0.16rem
.dot
display inline-block
width .06rem
height @width
border-radius 50%
margin-right .05rem
</style>
src/views/components/left-component.vue
View file @ 006df87d
<template> <template>
<div class="left-component"> <div class="left-component">
<div class="left"> <HomeScreen />
</div>
<div class="right">
</div>
</div> </div>
</template> </template>
<script> <script>
import HomeScreen from '../components/home-screen'
export default { export default {
name: 'LeftComponent', name: 'LeftComponent',
components: { components: {
HomeScreen,
}, },
data() { data() {
return {} return {
}
}, },
} }
</script> </script>
...@@ -21,25 +22,11 @@ export default { ...@@ -21,25 +22,11 @@ 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)
position relative padding-left .1rem
>div >div
width calc(33.3vw / 2) flex 1
height 100%
&.left
>div
&:nth-child(1)
height 45%
&:nth-child(2)
height 25%
&:nth-child(3)
height 30%
&.right
>div
&:nth-child(1)
height 25%
&:nth-child(2)
height 75%
</style> </style>
src/views/components/map-btns.vue
View file @ 006df87d
...@@ -19,12 +19,12 @@ export default { ...@@ -19,12 +19,12 @@ export default {
data() { data() {
return { return {
btns: [ btns: [
{name: 'info', img: 'map1.png'}, {name: 'input', img: 'btn1.png'},
{name: 'zoomin', img: 'map2.png'}, {name: 'zoomin', img: 'btn2.png'},
{name: 'zoomout', img: 'map3.png'}, {name: 'zoomout', img: 'btn3.png'},
{name: 'input', img: 'map4.png'}, {name: 'info', img: 'btn4.png'},
{name: 'sensor', img: 'map5.png'}, {name: 'sensor', img: 'btn5.png'},
{name: 'position', img: 'map6.png'}, {name: 'position', img: 'btn6.png'},
] ]
} }
}, },
...@@ -34,11 +34,13 @@ export default { ...@@ -34,11 +34,13 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
.map-btns .map-btns
position fixed position fixed
left calc(33.3% + .05rem) // left calc(33.3% + .05rem)
right .1rem
bottom .1rem bottom .1rem
transition left .5s ease-in-out // transition left .5s ease-in-out
&.isFull z-index 999
left .05rem // &.isFull
// left .05rem
img img
display block display block
width .2rem width .2rem
......
src/views/components/map-tips.vue 0 → 100644
View file @ 006df87d
<template>
<div class="map-tips">
<p>标识说明</p>
<div v-if="theme === '智慧养老'">
<div>
<p v-for="tip in olds1" :key="tip.name">
<span :style="{background:tip.color}" />
{{tip.name}}
</p>
</div>
<div>
<p v-for="tip in olds2" :key="tip.name">
<img v-if="tip.icon" :src="require(`@/assets/images/${tip.icon}`)" :alt="tip.name" />
<span v-else :style="{background:tip.color}" />
{{tip.name}}
</p>
</div>
</div>
<div v-else-if="theme === '人口分布'">
<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 populations" :key="tip.name">
<img :src="require(`@/assets/images/${tip.icon}`)" :alt="tip.name" />
{{tip.name}}
</p>
</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 tips2" :key="tip.name">
<img :src="require(`@/assets/images/${tip.icon}`)" :alt="tip.name" />
{{tip.name}}
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'MapTips',
data() {
return {
tips1: [
{name: '街道', icon: 'icon1.png'},
{name: '居委', icon: 'icon2.png'},
{name: '服务站', icon: 'icon3.png'},
{name: '商品房', icon: 'icon4.png'},
{name: '直管公房', icon: 'icon5.png'},
{name: '混合', icon: 'icon6.png'},
],
tips2: [
{name: '医院', icon: 'tip1.png'},
{name: '学校', icon: 'tip2.png'},
{name: '衣', icon: 'tip3.png'},
{name: '食', icon: 'tip4.png'},
{name: '旅', icon: 'tip5.png'},
{name: '文娱', icon: 'tip6.png'},
{name: '军产', icon: 'tip7.png'},
{name: '文保', icon: 'tip8.png'},
{name: '历保', icon: 'tip9.png'},
],
olds1: [
{name: '100岁以上', color: '#826AFA'},
{name: '90-99岁', color: '#FF5151'},
{name: '80-89岁', color: '#F47C1F'},
{name: '70-79岁', color: '#FFCE34'},
{name: '65-69岁', color: '#589C20'},
{name: '60-94岁', color: '#00BFFF'},
],
olds2: [
{name: '已建', color: '#FADB71'},
{name: '在建', color: '#B3B3B3'},
{name: '敬老院', icon: 'old1.png'},
{name: '综合为老服务中心', icon: 'old2.png'},
{name: '老年活动室', icon: 'old3.png'},
{name: '日托所', icon: 'old4.png'},
{name: '助老洗衣房', icon: 'old5.png'},
{name: '助餐点', icon: 'old6.png'},
{name: '助浴点', icon: 'old7.png'},
],
populations: [
{name: '境外人口', icon: 'dimond1.png'},
{name: '境内人口', icon: 'dimond2.png'},
],
}
},
computed: {
theme() {
return this.$store.state.themeName
},
}
}
</script>
<style lang="stylus" scoped>
.map-tips
position fixed
right .4rem
bottom .1rem
transition left .5s ease-in-out
z-index 999
>p
font-size .12rem
font-weight bold
margin-bottom .05rem
>div
display flex
>div
min-width .8rem
flex 1
&:last-child
img
width .12rem
height @width
p
display flex
align-items center
white-space nowrap
img
width .08rem
height @width
margin-right .05rem
span
display inline-block
width .08rem
height @width
border-radius 50%
margin-right .08rem
</style>
src/views/components/menu.vue 0 → 100644
View file @ 006df87d
<template>
<div class="menu">
<div
v-for="item in menus"
:key="item.name"
class="menu-item"
:class="{'on': curName === item.name}"
@click="handleSelect(item.name)"
>
{{item.name}}
</div>
</div>
</template>
<script>
export default {
name: 'Menu',
data() {
return {
curName: '主屏',
menus: [
{name: '主屏'},
{name: '人口分布'},
{name: '智慧养老'},
{name: '单兵指挥'},
{name: '美丽家园'},
]
}
},
methods: {
handleSelect(name) {
this.curName = name
this.$store.commit('SET_THEME_NAME', name)
},
}
}
</script>
<style lang="stylus" scoped>
.menu
width 100%
height 100%
display flex
flex-direction column
align-items flex-end
.menu-item
$flex-center()
color $edgeColor
width 1.4rem
height .25rem
font-family $font-pang
font-size .12rem
font-weight 100
letter-spacing .02rem
margin-bottom .1rem
transition transform .2s ease-in-out
background-position center
background-size 100% 100%
background-image url(../../assets/images/menu-btn.png)
cursor pointer
&:hover
transform scale(1.1)
&.on
color $color-orange
transform scale(1.2)
background-image url(../../assets/images/menu-btn-on.png)
</style>
src/views/components/old-screen.vue 0 → 100644
View file @ 006df87d
<template>
<div class="old-screen">
<div>
<div class="title">
<p>老人数量</p>
<p><m-count class="count" :value="14696" /> <span class="unit">人</span></p>
</div>
<div class="rate">
<div v-for="item in rates" :key="item.name">
<p>{{item.name}}</p>
<p><m-count class="count" :value="item.value" />%</p>
</div>
</div>
</div>
<div>
<div class="title"><p>年龄分布</p></div>
<div class="wrapper">
<div class="chart" v-if="showChart">
<m-chart :config="ageConfig" :data="ageData" />
</div>
<div class="tips">
<div>
<div v-for="(item, i) in ageData.slice(0,2)" :key="item.name">
<p><span class="dot" :style="{background: ageConfig.colors[i]}"/> {{item.name}}</p>
<p><m-count :isPang="false" :value="item.percent" />% &nbsp; <m-count :isPang="false" :value="item.value" />人</p>
</div>
</div>
<div>
<div v-for="(item, i) in ageData.slice(2,4)" :key="item.name">
<p><span class="dot" :style="{background: ageConfig.colors[i + 2]}"/> {{item.name}}</p>
<p><m-count :isPang="false" :value="item.percent" />% &nbsp; <m-count :isPang="false" :value="item.value" />人</p>
</div>
</div>
<div>
<div v-for="(item, i) in ageData.slice(4)" :key="item.name">
<p><span class="dot" :style="{background: ageConfig.colors[i + 4]}"/> {{item.name}}</p>
<p><m-count :isPang="false" :value="item.percent" />% &nbsp; <m-count :isPang="false" :value="item.value" />人</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="title"><p>老人分类</p></div>
<div class="table">
<div v-for="item in oldType" :key="item.name">
<p>{{item.name}}</p>
<p><m-count :value="item.value" /></p>
<p><m-count :value="item.percent" :decimal="2" />%</p>
</div>
</div>
</div>
<div>
<div class="title"><p>养老方式</p></div>
<div class="bar">
<div v-for="item in oldMethod" :key="item.name" :style="{flex: item.value, background: item.color}">
<div :style="{borderColor: item.color}">
<p>{{item.name}} <m-count class="count" :value="item.value" :style="{color: item.color}" /></p>
</div>
</div>
</div>
</div>
<div>
<div class="title"><p>长护险</p></div>
<div class="rate" style="width: 52%;">
<div v-for="item in insurance" :key="item.name">
<p>{{item.name}}</p>
<p><m-count class="count" :value="item.value" />人</p>
</div>
</div>
<div class="insurance-chart" v-if="showChart">
<m-chart :config="insuranceConfig" :data="insuranceData" />
</div>
</div>
</div>
</template>
<script>
export default {
name: 'OldScreen',
data() {
return {
showChart: false,
rates: [
{name: '女性占比', value: 65},
{name: '男性占比', value: 35},
{name: '老龄化占比', value: 43},
],
ageConfig: {
colors: ['#01bffe', '#589d20', '#ffce34', '#f47b1e', '#ff5152', '#826bfa'],
legend: {hide: true},
shape: [
{type: 'pie', radius: [0, 35 * Number((screen.height / 800).toFixed(1))], center: ['40%', '40%']},
]
},
insuranceConfig: {
colors: ['#e690d1'],
legend: {hide: true},
shape: [
{key: 'value', type: 'line'},
],
xAxis: {
key: 'name',
},
yAxis: [
{name: '爱的色放及哦啊见谁都烦'}
]
},
oldType: [
{name: '孤老', value: 346, percent: 0.90},
{name: '独居', value: 1304, percent: 3.38},
{name: '纯老', value: 3007, percent: 7.80},
{name: '低保', value: 211, percent: 0.55},
{name: '残疾', value: 2926, percent: 7.59},
{name: '优抚', value: 95, percent: 0.25},
],
oldMethod: [
{name: '社区养老', value: 38464, color: '#72c011'},
{name: '机构养老', value: 1146, color: '#ff9d26'},
{name: '居家养老', value: 981, color: '#01bffe'},
],
insurance: [
{name: '申请人数', value: 1113},
{name: '申请通过人数', value: 812},
],
}
},
mounted() {
setTimeout(() => this.showChart = true, 100)
},
computed: {
ageData() {
return [
{name: '60-64岁', value: 2939, percent: 20},
{name: '65-69岁', value: 3086, percent: 21},
{name: '70-79岁', value: 4261, percent: 29},
{name: '80-89岁', value: 1910, percent: 13},
{name: '90-99岁', value: 2204, percent: 15},
{name: '100岁以上', value: 294, percent: 2},
]
},
insuranceData() {
return [
{name: '0级', value: 50},
{name: '1级', value: 200},
{name: '2级', value: 250},
{name: '3级', value: 300},
{name: '4级', value: 220},
{name: '5级', value: 200},
{name: '6级', value: 250},
]
},
},
}
</script>
<style lang="stylus" scoped>
.old-screen
z-index 99
width 90%
height calc(100vh - 0.5rem)
padding-left .1rem
>div
margin-bottom .1rem
.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
width 80%
display flex
justify-content space-between
>div
p
color $fontColor
&:last-child
color $color-yellow
font-size .12rem
.wrapper
display flex
.chart
width 25%
height .8rem
.tips
display flex
flex-wrap wrap
flex 1
>p
width 100%
color $fontColor
font-size .11rem
.count
color $color-yellow
font-size .13rem
margin-left .05rem
.unit
color #999
>div
flex 1
>div
margin-bottom .05rem
>p
&:last-child
padding-left 0.16rem
.dot
display inline-block
width .06rem
height @width
border-radius 50%
margin-right .05rem
.table
display flex
border .01rem solid $cardFontColor
>div
flex 1
text-align center
&+div
border-left inherit
p
font-size .11rem
background $color-map(.15)
line-height 1.8
&+p
border-top .01rem solid $cardFontColor
&:nth-of-type(1)
font-size .1rem
background $color-map()
&:nth-of-type(2)
color $color-yellow
&:nth-of-type(3)
color $edgeColor
.bar
display flex
width 100%
height .1rem
margin .3rem 0
>div
position relative
.count
font-size .12rem
p
position absolute
min-width 1rem
>div
height .2rem
&:nth-of-type(1)
>div
transform translateY(-90%)
border-left .01rem solid
p
top -0.07rem
left .05rem
&:nth-of-type(2)
>div
transform translateY(-90%)
border-right .01rem solid
p
top -0.07rem
right .05rem
text-align right
&:nth-of-type(3)
>div
transform translateY(50%)
border-right .01rem solid
p
bottom -0.07rem
right .05rem
text-align right
.insurance-chart
width 100%
height 1rem
margin-top .1rem
</style>
src/views/components/population-screen.vue 0 → 100644
View file @ 006df87d
<template>
<div class="population-screen">
<div class="chart" />
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'PopulationScreen',
data() {
return {
chart: null,
option: {
tooltip: {
trigger: 'item',
confine: true,
},
series: [
{
type: 'sankey',
// left: 50.0,
// top: 20.0,
// right: 150.0,
// bottom: 25.0,
data: [],
links: [],
lineStyle: {
color: 'source',
curveness: 0.5
},
itemStyle: {
color: '#1f77b4',
borderColor: '#1f77b4'
},
label: {
color: 'rgba(0,0,0,0.7)',
fontSize: 10
}
}
],
}
}
},
mounted() {
setTimeout(this.init, 0)
},
beforeDestroy() {
this.chart && window.removeEventListener('resize', () => this.chart.resize())
},
methods: {
init() {
this.chart = echarts.init(this.$refs.chart)
window.addEventListener('resize', () => this.chart.resize())
this.chart.setOption(this.option)
}
},
}
</script>
<style lang="stylus" scoped>
.population-screen
z-index 999
</style>
src/views/components/right-component.vue
View file @ 006df87d
<template> <template>
<div class="right-component"> <div class="right-component">
<div class="left"> <Menu />
</div> <div></div>
<div class="right"> <div></div>
</div>
</div> </div>
</template> </template>
<script> <script>
import Menu from '../components/menu'
export default { export default {
name: 'RightComponent', name: 'RightComponent',
components: { components: {
Menu,
}, },
data() { data() {
return { return {
...@@ -21,31 +22,15 @@ export default { ...@@ -21,31 +22,15 @@ export default {
<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)
position relative display flex
flex-wrap wrap flex-direction column
padding-right .1rem
>div >div
// width 50% flex 1
width calc(33.3vw / 2) // width calc(33.3vw / 2)
height 100% // &:nth-child(1)
&.left // height 33.3%
>div
&:nth-child(1)
&:nth-child(2)
height 37%
&:nth-child(3)
height 26%
&.right
display flex
flex-direction column
>div
&:nth-child(1)
height 37%
&:nth-child(2)
flex 1
&:nth-child(3)
height 26%
</style> </style>
src/views/main.vue
View file @ 006df87d
...@@ -5,32 +5,121 @@ ...@@ -5,32 +5,121 @@
'left . right', 'left . right',
]" ]"
columns="33.3vw auto 33.3vw" columns="33.3vw auto 33.3vw"
rows="0.4rem auto" rows="0.4rem 1"
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">
<LeftComponent v-show="!fullView" area="left"/> <div v-show="themeName === '主屏'" area="left" class="wrapper">
<HomeScreen />
</div>
</m-animate>
<m-animate enter="fadeInLeft" leave="fadeOutLeft">
<div v-show="themeName === '智慧养老'" area="left" class="wrapper">
<OldScreen v-if="themeName === '智慧养老'" />
</div>
</m-animate> </m-animate>
<m-animate enter="fadeInRight" leave="fadeOutRight"> <m-animate enter="fadeInRight" leave="fadeOutRight">
<RightComponent v-show="!fullView" area="right"/> <RightComponent 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 />
</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 {mapState} from 'vuex'
export default { export default {
name: 'Main', name: 'Main',
components: { components: {
LeftComponent, // LeftComponent,
RightComponent, RightComponent,
MapBtns, MapBtns,
MapTips,
HomeScreen,
OldScreen,
},
data() {
return {
complete: false,
fullView: true,
boundary: null,
}
}, },
computed: {
...mapState([
'themeName',
])
},
methods: {
mapComplete() {
this.initMap()
this.complete = true
},
initMap() {
const {map} = this.$refs
map.focus(97.87804679686496, -40.686071867261035, 6) // 南京东路街道
// map.focus(41.75319496382872, -480.0854532701907, 6) // 市政府区域
// map.focus(-189.37734542225144, 305.3152060727947, 6) // 市政府北边区域
// map.focus(573.7817329792392, 158.7688192300202, 6) // 市政府东边区域
// map.addPolyLine({
// paths: this.$store.state.areaAPath,
// strokeColor: 'rgba(51,145,255,1)',
// })
// map.addPolyLine({
// paths: this.$store.state.areaBPath,
// strokeColor: 'rgba(51,145,255,1)',
// })
// map.addPolyLine({
// paths: this.$store.state.areaCPath,
// strokeColor: 'rgba(51,145,255,1)',
// })
map.addPolygon({
paths: this.$store.state.areaAPath,
// fillColor: 'rgba(51,145,255,.3)',
fillColor: 'transparent',
attributes: {
key: 'areaA',
name: '区域A',
test: 'hahahhaha'
}
})
// 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.streetPath, fillColor: 'rgba(51,145,255,.3)'})
this.boundary = map.addBoundary({name: '南京东路街道'})
},
handleMapClick(data) {
const {map} = this.$refs
if (data.key === 'areaA') {
this.boundary.hide()
map.addPolyLine({
paths: this.$store.state.areaAPath,
strokeColor: 'rgba(51,145,255,1)',
})
map.focus(41.75319496382872, -480.0854532701907, 7)
}
},
zoom(type) {
const {map} = this.$refs
if (type === 'in') map.zoomIn()
else map.zoomOut()
},
}
} }
</script> </script>
<style lang="stylus" scoped>
.wrapper
width 100%
height 100%
z-index 999
</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