Skip to content

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

小区页面更新

parent f2b43e59
Show whitespace changes
Inline Side-by-side
Showing with 528 additions and 276 deletions
.vscode/settings.json
View file @ 36f956ec
...@@ -26,4 +26,9 @@ ...@@ -26,4 +26,9 @@
] ]
}, },
"editor.formatOnSave": true, "editor.formatOnSave": true,
"stylusSupremacy.insertColons": false,
"stylusSupremacy.insertSemicolons": false,
"stylusSupremacy.insertBraces": false,
"stylusSupremacy.insertNewLineAroundImports": false,
"stylusSupremacy.insertNewLineAroundBlocks": false
} }
\ No newline at end of file
src/components/MyComponent/MyLoader/my-loader.vue
View file @ 36f956ec
<template> <template>
<teleport to="#MyLoader"> <teleport to="#MyLoader">
<div class="my-loader-mask"> <div class="my-loader-mask" :style="`background:${background}`">
<div class="my-loader"> <div class="my-loader">
<div class="outer" /> <div class="outer" />
<div class="middle" /> <div class="middle" />
<div class="inner" /> <div class="inner" />
</div> </div>
<slot />
</div> </div>
</teleport> </teleport>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue' import { defineComponent, PropType } from 'vue'
import useDOMCreate from '@/hooks/useDOMCreate' import useDOMCreate from '@/hooks/useDOMCreate'
export default defineComponent({ export default defineComponent({
name: 'MyLoader', name: 'MyLoader',
displayName: 'm-loader', displayName: 'm-loader',
props: {
background: {
type: String as PropType<string>,
default: 'rgba(0,0,0,0.3)',
},
},
setup() { setup() {
useDOMCreate('MyLoader') useDOMCreate('MyLoader')
}, },
...@@ -30,9 +37,9 @@ export default defineComponent({ ...@@ -30,9 +37,9 @@ export default defineComponent({
right 0 right 0
bottom 0 bottom 0
left 0 left 0
background rgba(0,0,0,0.3)
z-index 99999 z-index 99999
$center() $center()
flex-direction column
.my-loader .my-loader
position relative position relative
.outer, .outer,
......
src/components/MyComponent/MyMap/my-map.vue
View file @ 36f956ec
...@@ -3,15 +3,37 @@ ...@@ -3,15 +3,37 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, nextTick, onMounted, ref } from 'vue' import {
computed,
defineComponent,
nextTick,
onMounted,
PropType,
ref,
} from 'vue'
declare const SMap: any declare const SMap: any
declare const Plugins: any declare const Plugins: any
interface PointProp {
data: unknown[]
key: string
labelKey?: string
icon?: string
size?: number | number[]
color?: string
}
export default defineComponent({ export default defineComponent({
name: 'MyMap', name: 'MyMap',
displayName: 'm-map', displayName: 'm-map',
props: {
config: {
type: Object as PropType<{ [key: string]: unknown }>,
default: null,
},
},
emits: ['complete', 'event'], emits: ['complete', 'event'],
setup(_, ctx) { setup(props, ctx) {
let map: any = null let map: any = null
onMounted(async () => { onMounted(async () => {
await nextTick() await nextTick()
...@@ -21,21 +43,22 @@ export default defineComponent({ ...@@ -21,21 +43,22 @@ export default defineComponent({
map = new SMap.Map('MapContainer', { map = new SMap.Map('MapContainer', {
viewMode: '3D', viewMode: '3D',
center: [1141.75319496382872, -480.0854532701907], center: [1141.75319496382872, -480.0854532701907],
zooms: [6, 9], zooms: [5, 10],
zoom: 7, zoom: 7,
pitch: 45, pitch: 45,
mapStyle: 'smap://styles/dark', // 'smap://styles/dark' 'smap://styles/image' mapStyle: 'smap://styles/dark',
showBuildingBlock: true, showBuildingBlock: true,
...props.config,
}).on(SMap.MapEvent.maploaded, () => { }).on(SMap.MapEvent.maploaded, () => {
ctx.emit('complete') ctx.emit('complete', map)
hideCommunity() hideCommunity()
addListener() addListener()
map.getLayer('model_white_zw').visible = true // map.getLayer('model_white_zw').visible = true
map.getLayer('model_white_WEIHAI33').visible = true // map.getLayer('model_white_WEIHAI33').visible = true
map.getLayer('model_white_zhenxing2').visible = true // map.getLayer('model_white_zhenxing2').visible = true
map.getLayer('model_white_zw').opacity = 0.8 // map.getLayer('model_white_zw').opacity = 0.8
map.getLayer('model_white_WEIHAI33').opacity = 0.8 // map.getLayer('model_white_WEIHAI33').opacity = 0.8
map.getLayer('model_white_zhenxing2').opacity = 0.8 // map.getLayer('model_white_zhenxing2').opacity = 0.8
}) })
} }
function hideCommunity() { function hideCommunity() {
...@@ -43,12 +66,13 @@ export default defineComponent({ ...@@ -43,12 +66,13 @@ export default defineComponent({
map.hideMPZ() map.hideMPZ()
map.hideXQ_Point() map.hideXQ_Point()
} }
// function showCommunity() { function showCommunity() {
// map.showXQ_Poly() map.showXQ_Poly()
// map.showMPZ() map.showMPZ()
// map.showXQ_Point() map.showXQ_Point()
// } }
function addListener() { function addListener() {
map.enableMouseEvent(false)
// 触发地图点击事件 // 触发地图点击事件
map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => { map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => {
const { x, y } = eventParamter.mapPoint const { x, y } = eventParamter.mapPoint
...@@ -74,7 +98,7 @@ export default defineComponent({ ...@@ -74,7 +98,7 @@ export default defineComponent({
console.error('传入的坐标点不能为空') console.error('传入的坐标点不能为空')
return return
} }
map.setZoomAndCenter(zoom, [+x, +y]) map.setZoomAndCenter(zoom, [+x, +y, 0])
} }
// 添加边界 // 添加边界
...@@ -98,9 +122,72 @@ export default defineComponent({ ...@@ -98,9 +122,72 @@ export default defineComponent({
return Boundary return Boundary
} }
function rotate(deg: number) {
map.setRotation(deg)
}
// 将数据转换为符合地图的点数组
function getMapPoints({
data = [],
key,
labelKey,
icon,
size,
color = '#47B3FF',
}: PointProp) {
return data.map((item: any) => {
let sizeProp = Array.isArray(size)
? new SMap.Size(size[0], size[1])
: new SMap.Size(size, size)
if (item.size) {
sizeProp = Array.isArray(item.size)
? new SMap.Size(item.size[0], item.size[1])
: new SMap.Size(item.size, item.size)
}
const result = {
icon: new SMap.Icon({
size: sizeProp,
image: item.icon || icon,
}),
attributes: { key, ...item },
position: [
item.communityMinx || item.X || item.x || item.gpsx,
item.communityMiny || item.Y || item.y || item.gpsy,
item.communityMinz || item.Z || item.z || item.gpsz || 0,
],
label: null,
}
if (labelKey) {
result.label = new SMap.Label({
text: (item[labelKey] || item[key]) + '',
size,
color,
})
}
return new SMap.Marker(result)
})
}
// 添加点
function addPoint({
key,
data = [],
labelKey = '',
icon = 'test.png',
size = 14,
color = '#47B3FF',
}: PointProp) {
if (!map) return
const points = getMapPoints({ data, key, labelKey, icon, size, color })
map.add(points)
return points
}
return { return {
focus, focus,
hideCommunity,
showCommunity,
addBoundary, addBoundary,
rotate,
addPoint,
} }
}, },
}) })
......
src/components/MyComponent/MyWave/my-wave.vue
View file @ 36f956ec
...@@ -10,7 +10,9 @@ ...@@ -10,7 +10,9 @@
> >
<div class="before" :style="{ top: `${percent}%`, background: color }" /> <div class="before" :style="{ top: `${percent}%`, background: color }" />
<div class="after" :style="{ top: `${percent}%`, background: color }" /> <div class="after" :style="{ top: `${percent}%`, background: color }" />
<slot>
<p><m-count :value="value" /> %</p> <p><m-count :value="value" /> %</p>
</slot>
</div> </div>
</template> </template>
......
src/view/community.vue
View file @ 36f956ec
<template> <template>
<m-loader v-if="loading" background="#000">
<p style="color: #fff; margin-top: 0.3rem">地图初始化…</p>
</m-loader>
<m-grid <m-grid
:template="['title title title', 'left . right']" :template="['title title title', 'left . right']"
columns="16vw auto 49vw" columns="16vw auto 49vw"
...@@ -6,29 +9,140 @@ ...@@ -6,29 +9,140 @@
gap="0.05rem" gap="0.05rem"
> >
<m-title area="title">南东城运</m-title> <m-title area="title">南东城运</m-title>
<m-map ref="map" /> <m-map
ref="map"
:config="{ center: [-75.5563452697323, -718.3061904627932], zoom: 8 }"
@complete="handleComplete"
@event="handleMapClick"
/>
<m-animate enter="fadeInLeft" leave="fadeOutLeft"> <m-animate enter="fadeInLeft" leave="fadeOutLeft">
<LeftSection area="left" /> <LeftSection area="left" />
</m-animate> </m-animate>
<m-animate enter="fadeInRight" leave="fadeOutRight"> <m-animate enter="fadeInRight" leave="fadeOutRight">
<RightSection area="right" /> <RightSection area="right" />
</m-animate> </m-animate>
<div class="btns">
<div
v-for="btn in btns"
:key="btn"
:class="{ on: btn === curBtn }"
@click="handleClick(btn)"
>
<p>{{ btn }}</p>
</div>
</div>
</m-grid> </m-grid>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue' import { defineComponent, ref } from 'vue'
import LeftSection from '@/view/community/left-section.vue' import LeftSection from '@/view/community/left-section.vue'
import RightSection from '@/view/community/right-section.vue' import RightSection from '@/view/community/right-section.vue'
import store from '@/store' import store from '@/store'
import point from '@/assets/images/point.png'
export default defineComponent({ export default defineComponent({
name: 'Main', name: 'Main',
components: { LeftSection, RightSection }, components: { LeftSection, RightSection },
setup() { setup() {
const loading = ref(true)
store.commit('SET_CURRENT_VIEW', { name: '振兴小区', type: 'community' }) // 使标题不显示公共的3个按钮 store.commit('SET_CURRENT_VIEW', { name: '振兴小区', type: 'community' }) // 使标题不显示公共的3个按钮
const map = ref<any>(null)
const initMap = () => {
const points = map.value.addPoint({
key: 'test',
size: [100, 500],
icon: point,
data: [{ name: '测试', x: -275.5563452697323, y: -718.3061904627932 }],
})
console.log('points', points)
}
const handleMapClick = (e) => {
console.log('point-data: ', e)
}
const handleComplete = (instance: any) => {
instance.getLayer('model_white_zhenxing2').visible = true
instance.getLayer('model_white_zhenxing2').opacity = 0.8
let i = -90
map.value.rotate(i)
setTimeout(() => {
loading.value = false
setTimeout(() => {
const timer = setInterval(() => {
i += 2
if (i > 0) {
setTimeout(() => {
map.value.focus(-75.5563452697323, -718.3061904627932, 9)
}, 500)
clearInterval(timer)
initMap()
}
map.value.rotate(i)
}, 2)
}, 1000)
}, 7000)
}
const btns = ref(['微更新', '电梯加装', '智能监控', '楼宇安全'])
const curBtn = ref<string | null>(null)
const handleClick = (btn: string) => {
if (curBtn.value === btn) {
curBtn.value = null
return
}
curBtn.value = btn
}
return {
loading,
map,
handleComplete,
handleMapClick,
btns,
curBtn,
handleClick,
}
}, },
}) })
</script> </script>
<style lang="stylus" scoped></style> <style lang="stylus" scoped>
@import '../components/MyComponent/main.styl'
.btns
position fixed
z-index 9999
width 35vw
left 16vw
bottom .1rem
display flex
justify-content space-around
>div
min-width 1.1rem
text-align center
background url('@/assets/images/map-btn-bg.png') 100% / 100% 100% no-repeat
font-family $font-zcool
font-size .18rem
color #ccc
cursor pointer
opacity .8
transition all .3s ease-in-out
position relative
p
transform translateY(-40%)
&:hover
color #fff
opacity 1
&.on
color #fff
opacity 1
p
-webkit-box-reflect below -0.17rem linear-gradient(transparent, rgba(255,255,255,.6))
&:after
content ''
display block
position absolute
height .06rem
bottom 0
left 0
right 0
background rgba(91,213,255,.4)
box-shadow 0 0 0.1rem 0.02rem rgba(91,213,255,.5)
</style>
src/view/community/left-section.vue
View file @ 36f956ec
...@@ -5,9 +5,22 @@ ...@@ -5,9 +5,22 @@
<div><img src="@/assets/images/zhenxing.png" /></div> <div><img src="@/assets/images/zhenxing.png" /></div>
<div> <div>
<h3>振兴小区</h3> <h3>振兴小区</h3>
<p> <div>
振兴小区建筑面积44250.0000平米，占地面积20000.0000平米，雅致的绿化，成熟的小区，营造安静且优雅的空间环境，构筑温情社区空间。对口育才幼儿园、凯乐幼儿园、蛇口启鹏幼儿园、蓓蕾幼儿园育才二中。 <div>
</p> <img src="@/assets/images/p11.png" />
<div>
<p>健康</p>
<m-count class="count" :value="92" />
</div>
</div>
<div>
<img src="@/assets/images/p12.png" />
<div>
<p>疫苗接种率</p>
<m-count class="count" :value="57" />%
</div>
</div>
</div>
</div> </div>
</div> </div>
<div> <div>
...@@ -16,7 +29,12 @@ ...@@ -16,7 +29,12 @@
<Brief :list="summary.slice(3)" size="0.32rem" /> <Brief :list="summary.slice(3)" size="0.32rem" />
</div> </div>
<div class="buildings"> <div class="buildings">
<div v-for="item in ['紫光大厦', '文海大楼', '振兴小区']" :key="item"> <div
v-for="item in ['紫光大厦', '文海大楼', '振兴小区', '振华大楼']"
:key="item"
:class="{ on: curBuilding === item }"
@click="curBuilding = item"
>
{{ item }} {{ item }}
</div> </div>
</div> </div>
...@@ -27,15 +45,14 @@ ...@@ -27,15 +45,14 @@
:style="`border-left-color: ${getColor(item.type)}`" :style="`border-left-color: ${getColor(item.type)}`"
> >
<div> <div>
<img src="@/assets/images/p7.png" /> <img :src="getIcon(item.name)" />
<p>{{ item.address }}</p> <p>{{ item.address }}</p>
</div> </div>
<div> <div class="type">
<img src="@/assets/images/p8.png" /> <span>{{ item.name }}</span>
{{ item.name }}
</div>
<span>{{ item.type }}</span> <span>{{ item.type }}</span>
<b :style="`background:${getColor(item.type)}`" /> </div>
<i :style="`background:${getColor(item.type)}`" />
</div> </div>
</div> </div>
<div class="industry"> <div class="industry">
...@@ -63,6 +80,13 @@ import p3 from '@/assets/images/p3.png' ...@@ -63,6 +80,13 @@ import p3 from '@/assets/images/p3.png'
import p4 from '@/assets/images/p4.png' import p4 from '@/assets/images/p4.png'
import p5 from '@/assets/images/p5.png' import p5 from '@/assets/images/p5.png'
import p6 from '@/assets/images/p6.png' import p6 from '@/assets/images/p6.png'
import type1 from '@/assets/images/type1.png'
import type2 from '@/assets/images/type2.png'
import type3 from '@/assets/images/type3.png'
import type4 from '@/assets/images/type4.png'
import type5 from '@/assets/images/type5.png'
import type6 from '@/assets/images/type6.png'
import type7 from '@/assets/images/type7.png'
export default defineComponent({ export default defineComponent({
name: 'LeftSection', name: 'LeftSection',
...@@ -88,7 +112,17 @@ export default defineComponent({ ...@@ -88,7 +112,17 @@ export default defineComponent({
type: '门岗', type: '门岗',
}, },
{ {
name: '助浴点', name: '集合',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '为老',
},
{
name: '助餐',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '为老',
},
{
name: '助浴',
address: '上海市黄浦区延安东路1292弄6~40号', address: '上海市黄浦区延安东路1292弄6~40号',
type: '为老', type: '为老',
}, },
...@@ -98,7 +132,7 @@ export default defineComponent({ ...@@ -98,7 +132,7 @@ export default defineComponent({
type: '公共', type: '公共',
}, },
{ {
name: '停车位', name: '停车',
address: '上海市黄浦区延安东路1292弄6~40号', address: '上海市黄浦区延安东路1292弄6~40号',
type: '公共', type: '公共',
}, },
...@@ -120,10 +154,29 @@ export default defineComponent({ ...@@ -120,10 +154,29 @@ export default defineComponent({
return '#fff' return '#fff'
} }
} }
const getIcon = (type: string): unknown => {
switch (type) {
case '集合':
return type3
case '助餐':
return type6
case '助浴':
return type7
case '充电桩':
return type1
case '停车':
return type5
default:
return type2
}
}
const curBuilding = ref('紫光大厦')
return { return {
summary, summary,
addrList, addrList,
getColor, getColor,
getIcon,
curBuilding,
} }
}, },
}) })
...@@ -134,9 +187,8 @@ export default defineComponent({ ...@@ -134,9 +187,8 @@ export default defineComponent({
.info .info
display flex display flex
height 1.1rem min-height .8rem
margin .05rem 0 margin-top .03rem
overflow hidden
>div >div
flex 1 flex 1
color #ccc color #ccc
...@@ -145,32 +197,71 @@ export default defineComponent({ ...@@ -145,32 +197,71 @@ export default defineComponent({
flex .56 flex .56
$center() $center()
background url('@/assets/images/border3.png') 50% 50% / 100% 100% no-repeat background url('@/assets/images/border3.png') 50% 50% / 100% 100% no-repeat
margin-right .05rem margin-right .1rem
> img > img
width 90% width 88%
&:last-child &:last-child
display flex display flex
flex-direction column flex-direction column
justify-content space-around justify-content space-around
h3 h3
color #ccc color #ccc
font-size .16rem font-size .13rem
margin 0 margin 0
>div
display flex
>div
flex 1
display flex
img
width .25rem
height @width
margin-right .1rem
p
color #aaa
font-size .09rem
.count
color #fff
font-size .2rem
font-family $font-pang
.buildings .buildings
display flex display flex
justify-content space-between justify-content space-between
>div >div
$center() $center()
width 30% width 23%
height .4rem height .4rem
background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
cursor pointer
position relative
color #aaa
opacity .8
&:hover
opacity 1
color #fff
&.on
color #fff
opacity 1
&:after
content ''
display block
position absolute
width 40%
height 100%
border .01rem solid $edge
left 0
right 0
margin 0 auto
opacity .2
box-shadow 0 0 .05rem .02rem $edge
.address .address
display flex display flex
flex-wrap wrap flex-wrap wrap
justify-content space-around justify-content space-around
>div >div
width 48% width 48%
padding .05rem .07rem padding .03rem .07rem
box-sizing border-box box-sizing border-box
position relative position relative
margin-bottom .05rem margin-bottom .05rem
...@@ -183,18 +274,16 @@ export default defineComponent({ ...@@ -183,18 +274,16 @@ export default defineComponent({
align-items center align-items center
p p
color #aaa color #aaa
&:nth-of-type(2) flex 1
margin-top .02rem
font-weight bold
img img
width .15rem width .15rem
margin-right .05rem height @width
span margin-right .1rem
position absolute .type
right .04rem display flex
bottom .02rem justify-content space-between
font-size .08rem font-size .08rem
b i
position absolute position absolute
right -0.1rem right -0.1rem
bottom -0.1rem bottom -0.1rem
...@@ -208,7 +297,7 @@ export default defineComponent({ ...@@ -208,7 +297,7 @@ export default defineComponent({
align-items center align-items center
font-family $font-zcool font-family $font-zcool
font-size .14rem font-size .14rem
color #ccc color $edge
img img
width .18rem width .18rem
height @width height @width
......
src/view/community/manage-issue.vue
View file @ 36f956ec
<template> <template>
<m-card mode="3" title="管理要素"> <m-card mode="3" title="管理要素">
<div class="sum"> <div class="sum">
<div class="total"> <m-wave
评分 class="ball"
<m-count class="count" :value="92" /> size=".76rem"
:value="92"
color="rgba(91,213,255,.6)"
>
<span class="sum-txt">
评分 <m-count class="count" :value="92"></m-count>
</span>
</m-wave>
</div> </div>
<div class="safety"> <div class="counts">
安全 <div v-for="item in counts" :key="item.name">
<m-count class="count" :value="95" /> <Circle
:value="item.value"
type="dashboard"
:show-info="false"
:color="[getColor(item.value), '#FF0C0C']"
:rate="1.2"
:stroke-width="8"
:gap-degree="100"
>
<div class="count-txt">
<m-count
class="count"
:value="item.value"
:style="`color:${getColor(item.value)};
text-shadow:0 0 .05rem ${getColor(item.value)}`"
/>
<p>{{ item.name }}</p>
</div> </div>
<div class="clean"> </Circle>
干净
<m-count class="count" :value="92" />
</div> </div>
<div class="order">
有序
<m-count class="count" :value="89" />
</div>
</div>
<div class="detail">
<div class="title">
<img src="@/assets/images/p10.png" />
安全
<m-count class="count" :value="95" />
</div> </div>
<div class="chart"> <div class="chart">
<m-line :dataset="data" :option="option1" /> <m-line :dataset="data" :option="option" />
</div>
</div> </div>
<div class="detail"> <div class="issue">
<div class="title"> <div class="title">
<img src="@/assets/images/p10.png" /> <img src="@/assets/images/p9.png" />
干净 评分要素
<m-count class="count" :value="92" />
</div> </div>
<div class="chart"> <div class="content">
<m-line :dataset="data" :option="option2" /> <div v-for="item in issues" :key="item.name">
<p>{{ item.name }}</p>
<m-count class="count" :value="item.value" />
</div> </div>
</div> </div>
<div class="detail">
<div class="title">
<img src="@/assets/images/p10.png" />
有序
<m-count class="count" :value="89" />
</div>
<div class="chart">
<m-line :dataset="data" :option="option3" />
</div>
</div> </div>
</m-card> </m-card>
</template> </template>
...@@ -54,144 +56,64 @@ ...@@ -54,144 +56,64 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue' import { defineComponent, ref } from 'vue'
import { ChartTypes } from '@/components/MyComponent' import { ChartTypes } from '@/components/MyComponent'
import Circle from '../components/circle.vue'
export default defineComponent({ export default defineComponent({
name: 'ManageIssue', name: 'ManageIssue',
components: { Circle },
setup() { setup() {
const counts = ref([
{ name: '安全', value: 59 },
{ name: '干净', value: 85 },
{ name: '有序', value: 99 },
])
const getColor = (count: number) => {
if (count <= 60) return '#FF9C15'
if (count < 90) return '#FFE211'
else return '#19FF2B'
}
const data = ref<ChartTypes.DatasetComponentOption>({ const data = ref<ChartTypes.DatasetComponentOption>({
dimensions: [ dimensions: [
{ name: 'date', displayName: '日期' }, { name: 'date', displayName: '日期' },
{ name: 'value', displayName: '分数' }, { name: 'safe', displayName: '安全' },
{ name: 'clean', displayName: '干净' },
{ name: 'order', displayName: '有序' },
], ],
source: [ source: [
{ date: '0325', value: 60 }, { date: '0325', safe: 60, clean: 80, order: 70 },
{ date: '0326', value: 70 }, { date: '0326', safe: 70, clean: 70, order: 60 },
{ date: '0327', value: 80 }, { date: '0327', safe: 80, clean: 80, order: 80 },
{ date: '0328', value: 90 }, { date: '0328', safe: 90, clean: 50, order: 70 },
{ date: '0329', value: 80 }, { date: '0329', safe: 80, clean: 90, order: 80 },
{ date: '0330', value: 70 }, { date: '0330', safe: 70, clean: 80, order: 80 },
{ date: '0331', value: 60 }, { date: '0331', safe: 60, clean: 50, order: 90 },
{ date: '0401', value: 60 }, { date: '0401', safe: 60, clean: 80, order: 70 },
{ date: '0402', value: 70 }, { date: '0402', safe: 70, clean: 60, order: 80 },
{ date: '0403', value: 90 }, { date: '0403', safe: 90, clean: 80, order: 70 },
],
})
const option1 = ref<ChartTypes.LineOption>({
color: [['#8ED617', '#429321']],
grid: { top: '5%' },
legend: { show: false },
series: [
{
type: 'line',
smooth: true,
lineStyle: {
width: 2,
},
emphasis: {
focus: 'series',
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(142,214,23,.7)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(142,214,23,.1)', // 100% 处的颜色
},
],
} as any,
},
},
],
xAxis: { axisLabel: { interval: 0 } },
})
const option2 = ref<ChartTypes.LineOption>({
color: [['#00f2ff', '#05A4FF']],
grid: { top: '5%' },
legend: { show: false },
series: [
{
type: 'line',
smooth: true,
lineStyle: {
width: 2,
},
emphasis: {
focus: 'series',
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(0,242,255,.7)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(0,242,255,.1)', // 100% 处的颜色
},
], ],
} as any,
},
},
],
xAxis: { axisLabel: { interval: 0 } },
}) })
const option3 = ref<ChartTypes.LineOption>({ const option = ref<ChartTypes.LineOption>({
color: [['#ffd400', '#F77120']], color: [
grid: { top: '5%' }, ['#1EFBFF', '#0094FF'],
legend: { show: false }, ['#7F72F5', '#C86DD7'],
series: [ ['#FAD961', '#F76B1C'],
{
type: 'line',
smooth: true,
lineStyle: {
width: 2,
},
emphasis: {
focus: 'series',
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(255,212,0,.7)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255,212,0,.1)', // 100% 处的颜色
},
],
} as any,
},
},
], ],
legend: { right: '5%' },
xAxis: { axisLabel: { interval: 0 } }, xAxis: { axisLabel: { interval: 0 } },
}) })
const issues = ref([
{ name: '绿化面积㎡', value: 658 },
{ name: '监控点位', value: 28 },
{ name: '垃圾箱房', value: 15 },
{ name: '非机动车位', value: 150 },
{ name: '物业服务人员', value: 168 },
])
return { return {
counts,
getColor,
data, data,
option1, option,
option2, issues,
option3,
} }
}, },
}) })
...@@ -201,58 +123,62 @@ export default defineComponent({ ...@@ -201,58 +123,62 @@ export default defineComponent({
@import '../../components/MyComponent/main.styl' @import '../../components/MyComponent/main.styl'
.sum .sum
position relative position relative
height 1.4rem height 1.2rem
background url('@/assets/images/issue-bg.png') 100% / 100% 100% no-repeat background url('@/assets/images/issue-bg2.png') 100% / 100% 100% no-repeat
.ball
margin-top 8%
margin-left 15%
.sum-txt
z-index 99
font-size .09rem
color #ccc
.count
color #fff
font-size .16rem
font-family $font-pang
.counts
display flex
margin-top .1rem
>div >div
flex 1
.count-txt
position absolute position absolute
font-size .12rem left 50%
font-weight bold top 50%
transform translate(-50%, -50%)
text-align center
font-size .09rem
color #ccc
.count .count
font-size .15rem font-size .18rem
font-family $font-pang font-family $font-pang
&.total font-weight 500
top 6% .chart
left @top height 1.5rem
color #ccc .issue
&.safety .title
top 40%
left 22%
color #8ED617
&.clean
top 48%
left 58%
color $edge
&.order
top 20%
left 74%
color $yellow
.title
display flex display flex
align-items center align-items center
font-family $font-zcool font-family $font-zcool
font-size .14rem font-size .14rem
color #ccc color $edge
margin-bottom .05rem
img img
width .18rem width .18rem
height @width height @width
margin-right .05rem margin-right .05rem
.content
display flex
flex-wrap wrap
justify-content space-around
>div
width 32%
min-height .6rem
background url('@/assets/images/count-bg.png') 100% / 100% 100% no-repeat
text-align center
font-size .08rem
color $blue
.count .count
margin-left .05rem
font-family $font-pang font-family $font-pang
margin-bottom .03rem font-size .16rem
.detail color #fff
margin-bottom .05rem
.chart
width 100%
height .8rem
&:nth-of-type(2)
.count
color #8ED617
&:nth-of-type(3)
.count
color $edge
&:nth-of-type(4)
.count
color $yellow
</style> </style>
src/view/components/circle.vue
View file @ 36f956ec
<template> <template>
<div ref="circleWrapperRef" class="circle-wrapper"> <div ref="circleWrapperRef" class="circle-wrapper">
<a-progress <a-progress
type="circle"
:width="width" :width="width"
:stroke-color="strokeColor" :stroke-color="strokeColor"
:percent="value" :percent="value"
:type="type"
:show-info="showInfo"
:stroke-width="strokeWidth"
:gap-degree="gapDegree"
/> />
<p v-if="name">{{ name }}</p> <slot>
<p>{{ name }}</p>
</slot>
</div> </div>
</template> </template>
...@@ -16,6 +21,10 @@ import { computed, defineComponent, PropType, ref } from 'vue' ...@@ -16,6 +21,10 @@ import { computed, defineComponent, PropType, ref } from 'vue'
export default defineComponent({ export default defineComponent({
name: 'Circle', name: 'Circle',
props: { props: {
type: {
type: String as PropType<'line' | 'circle' | 'dashboard'>,
default: 'circle',
},
color: { color: {
type: [String, Array] as PropType<string | string[]>, type: [String, Array] as PropType<string | string[]>,
default: ['#0094FF', '#1DF9FF'], default: ['#0094FF', '#1DF9FF'],
...@@ -28,6 +37,22 @@ export default defineComponent({ ...@@ -28,6 +37,22 @@ export default defineComponent({
type: String as PropType<string>, type: String as PropType<string>,
default: '', default: '',
}, },
showInfo: {
type: Boolean as PropType<boolean>,
default: true,
},
rate: {
type: Number as PropType<number>,
default: 1.8,
},
strokeWidth: {
type: Number as PropType<number>,
default: 6,
},
gapDegree: {
type: Number as PropType<number>,
default: 0,
},
}, },
setup(props) { setup(props) {
const circleWrapperRef = ref<HTMLElement | null>(null) const circleWrapperRef = ref<HTMLElement | null>(null)
...@@ -42,9 +67,7 @@ export default defineComponent({ ...@@ -42,9 +67,7 @@ export default defineComponent({
}) })
const width = computed(() => { const width = computed(() => {
if (circleWrapperRef.value) { if (circleWrapperRef.value) {
console.log('width', circleWrapperRef.value.clientWidth) return circleWrapperRef.value.clientWidth / (props.rate || 1.8)
return circleWrapperRef.value.clientWidth / 1.8
} }
return 0 return 0
}) })
...@@ -63,6 +86,7 @@ export default defineComponent({ ...@@ -63,6 +86,7 @@ export default defineComponent({
$full() $full()
$center() $center()
flex-direction column flex-direction column
position relative
>p >p
margin-top .1rem margin-top .1rem
font-size .12rem font-size .12rem
......
src/view/components/step.vue
View file @ 36f956ec
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType, ref } from 'vue' import { defineComponent, PropType } from 'vue'
export default defineComponent({ export default defineComponent({
name: 'Step', name: 'Step',
...@@ -33,9 +33,6 @@ export default defineComponent({ ...@@ -33,9 +33,6 @@ export default defineComponent({
default: 0, default: 0,
}, },
}, },
setup(props) {
return {}
},
}) })
</script> </script>
...@@ -82,6 +79,6 @@ export default defineComponent({ ...@@ -82,6 +79,6 @@ export default defineComponent({
height 100% height 100%
z-index 1 z-index 1
&.on &.on
background linear-gradient(to right, $edge, #fff, $edge) background linear-gradient(to right, $edge, rgba(255,255,255,.8), $edge)
box-shadow 0 0 0.05rem .01rem rgba(0,242,255,.8) box-shadow 0 0 0.06rem 0.02rem rgba(0,242,255,.8)
</style> </style>
src/view/main.vue
View file @ 36f956ec
...@@ -76,6 +76,7 @@ export default defineComponent({ ...@@ -76,6 +76,7 @@ export default defineComponent({
PopulationDrawer, PopulationDrawer,
}, },
setup() { setup() {
store.commit('SET_CURRENT_VIEW', { name: '南京东路街道', type: 'street' })
store.dispatch('initData') store.dispatch('initData')
const curViewType = computed(() => store.state.curView.type) const curViewType = computed(() => store.state.curView.type)
const curTheme = computed(() => store.state.curTheme) const curTheme = computed(() => store.state.curTheme)
......
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