养老 complete

src/components/MyComponent/MyChart/my-pie.vue

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

+<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

@@ -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>