Skip to content

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

养老 complete

parent 3090c482
Hide whitespace changes
Inline Side-by-side
Showing with 303 additions and 26 deletions
src/components/MyComponent/MyChart/my-pie.vue
View file @ 28df0440
......@@ -81,9 +81,9 @@ export default defineComponent({
show: false,
position: 'center',
},
itemStyle: {
borderRadius: 2,
},
// itemStyle: {
// borderRadius: 2,
// },
}
const { chartRef, initChart } = useChartGenerate(
defaultOption,
......
src/components/MyComponent/MyProgress/my-progress.vue
View file @ 28df0440
......@@ -42,7 +42,7 @@ export default defineComponent({
},
height: {
type: Number as PropType<number>,
default: 0.09,
default: 0.07,
},
},
setup(props) {
......
src/view/main.vue
View file @ 28df0440
......@@ -9,13 +9,13 @@
<m-animate enter="fadeInLeft" leave="fadeOutLeft">
<LeftComponent area="left" />
</m-animate>
<!-- <m-animate enter="fadeInRight" leave="fadeOutRight">
<m-animate enter="fadeInRight" leave="fadeOutRight">
<PublicManage v-show="curTheme === 'manage'" area="right" />
</m-animate>
<m-animate enter="fadeInRight" leave="fadeOutRight">
<PublicService v-show="curTheme === 'service'" area="right" />
</m-animate> -->
<PublicService area="right" />
</m-animate>
<!-- <PublicService area="right" /> -->
</m-grid>
</template>
......
src/view/right/beauty-street.vue
View file @ 28df0440
......@@ -7,7 +7,7 @@
<p>{{ item.name }}</p>
</div>
</div>
<div class="chart">
<div v-if="showChart" class="chart">
<a-select v-model:value="year">
<a-select-option
v-for="item in summary"
......@@ -27,7 +27,7 @@
<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import store from '@/store'
export default defineComponent({
name: 'BeautyStreet',
setup() {
......@@ -85,9 +85,6 @@ export default defineComponent({
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
color: '#fff',
},
},
},
},
......@@ -95,12 +92,13 @@ export default defineComponent({
],
})
const year = ref('2020年')
const showChart = computed(() => store.state.curTheme === 'service')
return {
summary,
fontSize,
barData,
barOption,
year,
showChart,
}
},
})
......
src/view/right/complain.vue
View file @ 28df0440
......@@ -46,7 +46,7 @@
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { defineComponent, ref, computed } from 'vue'
import Tabs, { TabsProp } from '../components/tabs.vue'
import SubTitle from '../components/sub-title.vue'
import { ECOption } from '@/components/MyComponent/MyChart/my-line.vue'
......@@ -55,6 +55,7 @@ export default defineComponent({
name: 'Complain',
components: { Tabs, SubTitle },
setup() {
const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const summary = ref([
{
name: '街面管理',
......@@ -106,6 +107,8 @@ export default defineComponent({
color: ['#9B88F9', 'gold'],
legend: {
right: '1%',
itemWidth: fontSize.value,
itemHeight: fontSize.value * 0.8,
},
})
const classChartData = ref({
......
src/view/right/demand.vue
View file @ 28df0440
......@@ -61,6 +61,7 @@ export default defineComponent({
name: 'Demand',
components: { Brief },
setup() {
const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const summary = ref<BriefProp[]>([
{
name: '综合管理',
......@@ -126,6 +127,8 @@ export default defineComponent({
color: ['#5BD5FF', '#FFCE34', '#826AFA'],
legend: {
right: '2%',
itemWidth: fontSize.value * 0.6,
itemHeight: fontSize.value * 0.8,
},
series: [
{
......@@ -151,7 +154,6 @@ export default defineComponent({
},
],
})
const pieData = ref([
{
name: '第一工作站',
......@@ -172,7 +174,6 @@ export default defineComponent({
color: '#6EB629',
},
])
const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const pieSeries = pieData.value.map((item, i) => {
const rate = Math.round((pieData.value.length - i) * fontSize.value) + 10
const borderWidth = fontSize.value * 0.6
......@@ -187,9 +188,6 @@ export default defineComponent({
label: {
show: false,
},
labelLine: {
show: false,
},
borderWidth,
borderColor: item.color,
},
......@@ -205,9 +203,6 @@ export default defineComponent({
label: {
show: false,
},
labelLine: {
show: false,
},
color: 'transparent',
borderColor: item.color,
opacity: 0.1,
......@@ -264,7 +259,6 @@ export default defineComponent({
barOption,
pieData,
pieOption,
fontSize,
steps,
caseList,
searchCase,
......@@ -286,7 +280,7 @@ $arrow-style()
top 0
bottom 0
margin auto
transform translate(-80%, 0)
transform translate(-90%, 0)
.process
margin-top .1rem
position relative
......
src/view/right/old.vue 0 → 100644
View file @ 28df0440
<template>
<m-card title="智慧养老">
<div>
<m-sub :addition="{ value: 14696 }">老人数量</m-sub>
<div class="sum">
<div v-for="item in oldSum" :key="item.name">
<m-count class="count" :value="item.value" /><span>%</span>
<p>{{ item.name }}</p>
</div>
</div>
</div>
<div>
<m-sub>年龄分布</m-sub>
<div class="distribute">
<div class="chart">
<m-pie :dataset="pieData" :option="pieOption" />
</div>
<div class="legend">
<div v-for="(item, i) in pieData.source" :key="item.name">
<p>
<span :style="{ background: pieOption.color[i] }" />
{{ item.name }}
</p>
<p>
{{ ((item.value / total) * 100).toFixed(0) }}%
<m-count :value="item.value" />人
</p>
</div>
</div>
</div>
</div>
<div>
<m-sub>老人分类</m-sub>
<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>
<m-sub>养老方式</m-sub>
<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>
<m-sub>长护险</m-sub>
<div class="insurance">
<div>
申请人数 <m-count class="count" :value="1113" /><span>人</span>
</div>
<div>
申请通过人数 <m-count class="count" :value="812" /><span>人</span>
</div>
</div>
<div v-if="showChart" class="insurance-chart">
<m-line :dataset="insuranceData" :option="insuranceOption" />
</div>
</div>
</m-card>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import store from '@/store'
export default defineComponent({
name: 'Old',
setup() {
const oldSum = ref([
{ name: '女性占比', value: 65 },
{ name: '男性占比', value: 35 },
{ name: '老龄化占比', value: 43 },
])
const pieData = ref({
dimensions: [
{ name: 'name', displayName: '年龄分布' },
{ name: 'value', displayName: '人数' },
],
source: [
{ name: '90-99岁', value: 2204 },
{ name: '100以上', value: 284 },
{ name: '80-89岁', value: 1910 },
{ name: '70-79岁', value: 4261 },
{ name: '65-69岁', value: 3086 },
{ name: '60-64岁', value: 2939 },
],
})
const total = pieData.value.source.reduce((acc, cur) => acc + cur.value, 0)
const pieOption = ref({
color: ['#8D51C7', '#BEBEBE', '#CA3A40', '#F9B84C', '#34ACFF', '#429321'],
legend: { show: false },
series: {
type: 'pie',
roseType: 'radius',
radius: ['10%', '90%'],
center: ['50%', '55%'],
label: {
show: false,
},
},
})
const oldType = ref([
{ name: '孤老', value: 103, percent: 0.9 },
{ name: '独居', value: 391, percent: 3.38 },
{ name: '纯老', value: 902, percent: 7.8 },
{ name: '低保', value: 63, percent: 0.55 },
{ name: '残疾', value: 877, percent: 7.59 },
{ name: '优抚', value: 28, percent: 0.25 },
])
const oldMethod = ref([
{ name: '社区养老', value: 38464, color: '#72c011' },
{ name: '机构养老', value: 1146, color: '#ff9d26' },
{ name: '居家养老', value: 981, color: '#01bffe' },
])
const insuranceData = ref({
dimensions: [
{ name: 'name', displayName: '等级' },
{ name: 'value', displayName: '人数' },
],
source: [
{ name: '0级', value: 15 },
{ name: '1级', value: 60 },
{ name: '2级', value: 75 },
{ name: '3级', value: 90 },
{ name: '4级', value: 66 },
{ name: '5级', value: 60 },
{ name: '6级', value: 75 },
],
})
const insuranceOption = ref({
color: ['#E690D1'],
legend: { show: false },
})
const showChart = computed(() => store.state.curTheme === 'service')
return {
oldSum,
pieData,
total,
pieOption,
oldType,
oldMethod,
insuranceData,
insuranceOption,
showChart,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.sum
width 100%
display flex
justify-content space-between
padding 0 .1rem
>div
.count
font-size .14rem
font-weight bold
span
color #aaa
font-size .08rem
p
color #ccc
.distribute
width 100%
height 1.2rem
display flex
.chart
width 40%
height 100%
.legend
display flex
flex-wrap wrap
flex 1
>div
width 50%
p
span
width .06rem
height @width
display inline-block
margin-right .04rem
border-radius 50%
&:last-child
font-size .08rem
margin-left .11rem
.table
display flex
border .01rem solid $blue
>div
flex 1
text-align center
&+div
border-left inherit
p
font-size .11rem
background rgba(0, 118, 255, .15)
line-height 2
&+p
border-top .01rem solid $font-color
&:nth-of-type(1)
font-size .1rem
background rgba(0, 118, 255, .3)
&:nth-of-type(2)
color $yellow
&:nth-of-type(3)
color $edge
.bar
display flex
width 100%
height .1rem
margin .2rem 0 .1rem
>div
position relative
.count
font-size .12rem
p
position absolute
min-width 1rem
>div
height .15rem
&: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
display flex
justify-content space-around
.count
font-size .14rem
color $yellow
font-weight bold
margin-left .1rem
span
color #aaa
font-size .08rem
.insurance-chart
width 100%
height 1rem
</style>
src/view/right/public-service.vue
View file @ 28df0440
......@@ -4,7 +4,9 @@
<div class="beauty1"><BeautyStreet /></div>
<div class="beauty2"><BeautyHome /></div>
</m-card>
<m-card mode="border"> </m-card>
<m-card mode="border">
<Old />
</m-card>
<m-card mode="border"> </m-card>
</div>
</template>
......@@ -13,10 +15,11 @@
import { defineComponent } from 'vue'
import BeautyStreet from './beauty-street.vue'
import BeautyHome from './beauty-home.vue'
import Old from './old.vue'
export default defineComponent({
name: 'PublicService',
components: { BeautyStreet, BeautyHome },
components: { BeautyStreet, BeautyHome, Old },
})
</script>
......
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