Skip to content

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

小区页面更新

parent f2b43e59
Hide whitespace changes
Inline Side-by-side
Showing with 528 additions and 276 deletions
.vscode/settings.json
View file @ 36f956ec
......@@ -26,4 +26,9 @@
]
},
"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>
<teleport to="#MyLoader">
<div class="my-loader-mask">
<div class="my-loader-mask" :style="`background:${background}`">
<div class="my-loader">
<div class="outer" />
<div class="middle" />
<div class="inner" />
</div>
<slot />
</div>
</teleport>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { defineComponent, PropType } from 'vue'
import useDOMCreate from '@/hooks/useDOMCreate'
export default defineComponent({
name: 'MyLoader',
displayName: 'm-loader',
props: {
background: {
type: String as PropType<string>,
default: 'rgba(0,0,0,0.3)',
},
},
setup() {
useDOMCreate('MyLoader')
},
......@@ -30,9 +37,9 @@ export default defineComponent({
right 0
bottom 0
left 0
background rgba(0,0,0,0.3)
z-index 99999
$center()
flex-direction column
.my-loader
position relative
.outer,
......
src/components/MyComponent/MyMap/my-map.vue
View file @ 36f956ec
......@@ -3,15 +3,37 @@
</template>
<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 Plugins: any
interface PointProp {
data: unknown[]
key: string
labelKey?: string
icon?: string
size?: number | number[]
color?: string
}
export default defineComponent({
name: 'MyMap',
displayName: 'm-map',
props: {
config: {
type: Object as PropType<{ [key: string]: unknown }>,
default: null,
},
},
emits: ['complete', 'event'],
setup(_, ctx) {
setup(props, ctx) {
let map: any = null
onMounted(async () => {
await nextTick()
......@@ -21,21 +43,22 @@ export default defineComponent({
map = new SMap.Map('MapContainer', {
viewMode: '3D',
center: [1141.75319496382872, -480.0854532701907],
zooms: [6, 9],
zooms: [5, 10],
zoom: 7,
pitch: 45,
mapStyle: 'smap://styles/dark', // 'smap://styles/dark' 'smap://styles/image'
mapStyle: 'smap://styles/dark',
showBuildingBlock: true,
...props.config,
}).on(SMap.MapEvent.maploaded, () => {
ctx.emit('complete')
ctx.emit('complete', map)
hideCommunity()
addListener()
map.getLayer('model_white_zw').visible = true
map.getLayer('model_white_WEIHAI33').visible = true
map.getLayer('model_white_zhenxing2').visible = true
map.getLayer('model_white_zw').opacity = 0.8
map.getLayer('model_white_WEIHAI33').opacity = 0.8
map.getLayer('model_white_zhenxing2').opacity = 0.8
// map.getLayer('model_white_zw').visible = true
// map.getLayer('model_white_WEIHAI33').visible = true
// map.getLayer('model_white_zhenxing2').visible = true
// map.getLayer('model_white_zw').opacity = 0.8
// map.getLayer('model_white_WEIHAI33').opacity = 0.8
// map.getLayer('model_white_zhenxing2').opacity = 0.8
})
}
function hideCommunity() {
......@@ -43,12 +66,13 @@ export default defineComponent({
map.hideMPZ()
map.hideXQ_Point()
}
// function showCommunity() {
// map.showXQ_Poly()
// map.showMPZ()
// map.showXQ_Point()
// }
function showCommunity() {
map.showXQ_Poly()
map.showMPZ()
map.showXQ_Point()
}
function addListener() {
map.enableMouseEvent(false)
// 触发地图点击事件
map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => {
const { x, y } = eventParamter.mapPoint
......@@ -74,7 +98,7 @@ export default defineComponent({
console.error('传入的坐标点不能为空')
return
}
map.setZoomAndCenter(zoom, [+x, +y])
map.setZoomAndCenter(zoom, [+x, +y, 0])
}
// 添加边界
......@@ -98,9 +122,72 @@ export default defineComponent({
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 {
focus,
hideCommunity,
showCommunity,
addBoundary,
rotate,
addPoint,
}
},
})
......
src/components/MyComponent/MyWave/my-wave.vue
View file @ 36f956ec
......@@ -10,7 +10,9 @@
>
<div class="before" :style="{ top: `${percent}%`, background: color }" />
<div class="after" :style="{ top: `${percent}%`, background: color }" />
<p><m-count :value="value" /> %</p>
<slot>
<p><m-count :value="value" /> %</p>
</slot>
</div>
</template>
......
src/view/community.vue
View file @ 36f956ec
<template>
<m-loader v-if="loading" background="#000">
<p style="color: #fff; margin-top: 0.3rem">地图初始化…</p>
</m-loader>
<m-grid
:template="['title title title', 'left . right']"
columns="16vw auto 49vw"
......@@ -6,29 +9,140 @@
gap="0.05rem"
>
<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">
<LeftSection area="left" />
</m-animate>
<m-animate enter="fadeInRight" leave="fadeOutRight">
<RightSection area="right" />
</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>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { defineComponent, ref } from 'vue'
import LeftSection from '@/view/community/left-section.vue'
import RightSection from '@/view/community/right-section.vue'
import store from '@/store'
import point from '@/assets/images/point.png'
export default defineComponent({
name: 'Main',
components: { LeftSection, RightSection },
setup() {
const loading = ref(true)
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>
<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 @@
<div><img src="@/assets/images/zhenxing.png" /></div>
<div>
<h3>振兴小区</h3>
<p>
振兴小区建筑面积44250.0000平米，占地面积20000.0000平米，雅致的绿化，成熟的小区，营造安静且优雅的空间环境，构筑温情社区空间。对口育才幼儿园、凯乐幼儿园、蛇口启鹏幼儿园、蓓蕾幼儿园育才二中。
</p>
<div>
<div>
<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>
......@@ -16,7 +29,12 @@
<Brief :list="summary.slice(3)" size="0.32rem" />
</div>
<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 }}
</div>
</div>
......@@ -27,15 +45,14 @@
:style="`border-left-color: ${getColor(item.type)}`"
>
<div>
<img src="@/assets/images/p7.png" />
<img :src="getIcon(item.name)" />
<p>{{ item.address }}</p>
</div>
<div>
<img src="@/assets/images/p8.png" />
{{ item.name }}
<div class="type">
<span>{{ item.name }}</span>
<span>{{ item.type }}</span>
</div>
<span>{{ item.type }}</span>
<b :style="`background:${getColor(item.type)}`" />
<i :style="`background:${getColor(item.type)}`" />
</div>
</div>
<div class="industry">
......@@ -63,6 +80,13 @@ import p3 from '@/assets/images/p3.png'
import p4 from '@/assets/images/p4.png'
import p5 from '@/assets/images/p5.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({
name: 'LeftSection',
......@@ -88,7 +112,17 @@ export default defineComponent({
type: '门岗',
},
{
name: '助浴点',
name: '集合',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '为老',
},
{
name: '助餐',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '为老',
},
{
name: '助浴',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '为老',
},
......@@ -98,7 +132,7 @@ export default defineComponent({
type: '公共',
},
{
name: '停车位',
name: '停车',
address: '上海市黄浦区延安东路1292弄6~40号',
type: '公共',
},
......@@ -120,10 +154,29 @@ export default defineComponent({
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 {
summary,
addrList,
getColor,
getIcon,
curBuilding,
}
},
})
......@@ -134,9 +187,8 @@ export default defineComponent({
.info
display flex
height 1.1rem
margin .05rem 0
overflow hidden
min-height .8rem
margin-top .03rem
>div
flex 1
color #ccc
......@@ -145,32 +197,71 @@ export default defineComponent({
flex .56
$center()
background url('@/assets/images/border3.png') 50% 50% / 100% 100% no-repeat
margin-right .05rem
margin-right .1rem
> img
width 90%
width 88%
&:last-child
display flex
flex-direction column
justify-content space-around
h3
color #ccc
font-size .16rem
font-size .13rem
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
display flex
justify-content space-between
>div
$center()
width 30%
width 23%
height .4rem
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
display flex
flex-wrap wrap
justify-content space-around
>div
width 48%
padding .05rem .07rem
padding .03rem .07rem
box-sizing border-box
position relative
margin-bottom .05rem
......@@ -183,18 +274,16 @@ export default defineComponent({
align-items center
p
color #aaa
&:nth-of-type(2)
margin-top .02rem
font-weight bold
flex 1
img
width .15rem
margin-right .05rem
span
position absolute
right .04rem
bottom .02rem
height @width
margin-right .1rem
.type
display flex
justify-content space-between
font-size .08rem
b
i
position absolute
right -0.1rem
bottom -0.1rem
......@@ -208,7 +297,7 @@ export default defineComponent({
align-items center
font-family $font-zcool
font-size .14rem
color #ccc
color $edge
img
width .18rem
height @width
......
src/view/community/manage-issue.vue
View file @ 36f956ec
<template>
<m-card mode="3" title="管理要素">
<div class="sum">
<div class="total">
评分
<m-count class="count" :value="92" />
</div>
<div class="safety">
安全
<m-count class="count" :value="95" />
</div>
<div class="clean">
干净
<m-count class="count" :value="92" />
</div>
<div class="order">
有序
<m-count class="count" :value="89" />
</div>
<m-wave
class="ball"
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 class="detail">
<div class="title">
<img src="@/assets/images/p10.png" />
安全
<m-count class="count" :value="95" />
</div>
<div class="chart">
<m-line :dataset="data" :option="option1" />
<div class="counts">
<div v-for="item in counts" :key="item.name">
<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>
</Circle>
</div>
</div>
<div class="detail">
<div class="title">
<img src="@/assets/images/p10.png" />
干净
<m-count class="count" :value="92" />
</div>
<div class="chart">
<m-line :dataset="data" :option="option2" />
</div>
<div class="chart">
<m-line :dataset="data" :option="option" />
</div>
<div class="detail">
<div class="issue">
<div class="title">
<img src="@/assets/images/p10.png" />
有序
<m-count class="count" :value="89" />
<img src="@/assets/images/p9.png" />
评分要素
</div>
<div class="chart">
<m-line :dataset="data" :option="option3" />
<div class="content">
<div v-for="item in issues" :key="item.name">
<p>{{ item.name }}</p>
<m-count class="count" :value="item.value" />
</div>
</div>
</div>
</m-card>
......@@ -54,144 +56,64 @@
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { ChartTypes } from '@/components/MyComponent'
import Circle from '../components/circle.vue'
export default defineComponent({
name: 'ManageIssue',
components: { Circle },
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>({
dimensions: [
{ name: 'date', displayName: '日期' },
{ name: 'value', displayName: '分数' },
{ name: 'safe', displayName: '安全' },
{ name: 'clean', displayName: '干净' },
{ name: 'order', displayName: '有序' },
],
source: [
{ date: '0325', value: 60 },
{ date: '0326', value: 70 },
{ date: '0327', value: 80 },
{ date: '0328', value: 90 },
{ date: '0329', value: 80 },
{ date: '0330', value: 70 },
{ date: '0331', value: 60 },
{ date: '0401', value: 60 },
{ date: '0402', value: 70 },
{ date: '0403', value: 90 },
{ date: '0325', safe: 60, clean: 80, order: 70 },
{ date: '0326', safe: 70, clean: 70, order: 60 },
{ date: '0327', safe: 80, clean: 80, order: 80 },
{ date: '0328', safe: 90, clean: 50, order: 70 },
{ date: '0329', safe: 80, clean: 90, order: 80 },
{ date: '0330', safe: 70, clean: 80, order: 80 },
{ date: '0331', safe: 60, clean: 50, order: 90 },
{ date: '0401', safe: 60, clean: 80, order: 70 },
{ date: '0402', safe: 70, clean: 60, order: 80 },
{ 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>({
color: [['#ffd400', '#F77120']],
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(255,212,0,.7)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255,212,0,.1)', // 100% 处的颜色
},
],
} as any,
},
},
const option = ref<ChartTypes.LineOption>({
color: [
['#1EFBFF', '#0094FF'],
['#7F72F5', '#C86DD7'],
['#FAD961', '#F76B1C'],
],
legend: { right: '5%' },
xAxis: { axisLabel: { interval: 0 } },
})
const issues = ref([
{ name: '绿化面积㎡', value: 658 },
{ name: '监控点位', value: 28 },
{ name: '垃圾箱房', value: 15 },
{ name: '非机动车位', value: 150 },
{ name: '物业服务人员', value: 168 },
])
return {
counts,
getColor,
data,
option1,
option2,
option3,
option,
issues,
}
},
})
......@@ -201,58 +123,62 @@ export default defineComponent({
@import '../../components/MyComponent/main.styl'
.sum
position relative
height 1.4rem
background url('@/assets/images/issue-bg.png') 100% / 100% 100% no-repeat
>div
position absolute
font-size .12rem
font-weight bold
height 1.2rem
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
font-size .15rem
color #fff
font-size .16rem
font-family $font-pang
&.total
top 6%
left @top
color #ccc
&.safety
top 40%
left 22%
color #8ED617
&.clean
top 48%
left 58%
color $edge
&.order
top 20%
left 74%
color $yellow
.title
.counts
display flex
align-items center
font-family $font-zcool
font-size .14rem
color #ccc
margin-bottom .05rem
img
width .18rem
height @width
margin-right .05rem
.count
margin-left .05rem
font-family $font-pang
margin-bottom .03rem
.detail
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)
margin-top .1rem
>div
flex 1
.count-txt
position absolute
left 50%
top 50%
transform translate(-50%, -50%)
text-align center
font-size .09rem
color #ccc
.count
color $yellow
font-size .18rem
font-family $font-pang
font-weight 500
.chart
height 1.5rem
.issue
.title
display flex
align-items center
font-family $font-zcool
font-size .14rem
color $edge
img
width .18rem
height @width
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
font-family $font-pang
font-size .16rem
color #fff
</style>
src/view/components/circle.vue
View file @ 36f956ec
<template>
<div ref="circleWrapperRef" class="circle-wrapper">
<a-progress
type="circle"
:width="width"
:stroke-color="strokeColor"
: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>
</template>
......@@ -16,6 +21,10 @@ import { computed, defineComponent, PropType, ref } from 'vue'
export default defineComponent({
name: 'Circle',
props: {
type: {
type: String as PropType<'line' | 'circle' | 'dashboard'>,
default: 'circle',
},
color: {
type: [String, Array] as PropType<string | string[]>,
default: ['#0094FF', '#1DF9FF'],
......@@ -28,6 +37,22 @@ export default defineComponent({
type: String as PropType<string>,
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) {
const circleWrapperRef = ref<HTMLElement | null>(null)
......@@ -42,9 +67,7 @@ export default defineComponent({
})
const width = computed(() => {
if (circleWrapperRef.value) {
console.log('width', circleWrapperRef.value.clientWidth)
return circleWrapperRef.value.clientWidth / 1.8
return circleWrapperRef.value.clientWidth / (props.rate || 1.8)
}
return 0
})
......@@ -63,6 +86,7 @@ export default defineComponent({
$full()
$center()
flex-direction column
position relative
>p
margin-top .1rem
font-size .12rem
......
src/view/components/step.vue
View file @ 36f956ec
......@@ -19,7 +19,7 @@
</template>
<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
import { defineComponent, PropType } from 'vue'
export default defineComponent({
name: 'Step',
......@@ -33,9 +33,6 @@ export default defineComponent({
default: 0,
},
},
setup(props) {
return {}
},
})
</script>
......@@ -82,6 +79,6 @@ export default defineComponent({
height 100%
z-index 1
&.on
background linear-gradient(to right, $edge, #fff, $edge)
box-shadow 0 0 0.05rem .01rem rgba(0,242,255,.8)
background linear-gradient(to right, $edge, rgba(255,255,255,.8), $edge)
box-shadow 0 0 0.06rem 0.02rem rgba(0,242,255,.8)
</style>
src/view/main.vue
View file @ 36f956ec
......@@ -76,6 +76,7 @@ export default defineComponent({
PopulationDrawer,
},
setup() {
store.commit('SET_CURRENT_VIEW', { name: '南京东路街道', type: 'street' })
store.dispatch('initData')
const curViewType = computed(() => store.state.curView.type)
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