diff --git a/src/pages/elder/home.vue b/src/pages/elder/home.vue index 01f1cfe..c787c34 100644 --- a/src/pages/elder/home.vue +++ b/src/pages/elder/home.vue @@ -22,16 +22,16 @@
-
{{item}}
-
-
-
-
+
{{item}}
+
+
+
+
{{echartObj5.data[index]}}
-
+
-
+
@@ -68,17 +68,10 @@
-
-
-
-
- 长者总数 -
-
-
+
-
-
+
+
长者总数
@@ -94,33 +87,215 @@
1761人
-
+ +
医疗人数
-
373
-
-
+
373人
+ +
养护人数
-
595
-
-
+
595人
+ +
颐养人数
-
490
+
490人
+ +
+ + + + + + + + +
+
+ +
重度失能
+
+ +
中度失能
+
+
+ +
轻度失能
+
+
+ +
能力完好
+
+
+ + + + + + + +
+
+
+
+
+
+
+
+
+ 一月内未有亲友探视长者人数分析 + （%） +
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+ 一月内未有亲友探视长者人数分析 + （人） +
+
+
+
+
- - - - - - - - + + + + +
+
+
+
+
+
+
+
+
+ 长者子女人数情况分析 + （人） +
+
+
+
+ +
+
+ + + + +
+
+
+
+
+
+
+
+
+ 长者子女人数情况分析 + （人） +
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+ 长者收入来源分析 + （人） +
+
+
+
+
+
+ +
+
退休金
+
+
+
+ +
+
子女赡养
+
+
+
+ +
+
+
+
+
+
+
+
+
+ 抑郁、焦虑长者占比分析 + （人） +
+
+
+
+
+
+ +
+
心理健康
+
+
+
+ +
+
抑郁、焦虑
+
+
+
@@ -130,6 +305,7 @@ import Vue from 'vue' import { Progress,Divider } from 'ant-design-vue'; Vue.use(Progress); Vue.use(Divider); +import Echarts from "@/components/echarts"; export default { data() { @@ -230,24 +406,22 @@ export default { }, }, series: [ - /*深业颐居*/ { name: '长者人数', data: [ - {name: '长者人数', value: 457} , - {name: '男', value: 1300} , - {name: '女', value: 950} , + {name: '长者人数', value: 457}, + {name: '男', value: 1300}, + {name: '女', value: 950}, ], type: 'bar', barWidth: 10, barGap:'100%', itemStyle: this.setSeriesItemStyle('qing'), }, - /*深业龙投*/ { name: '男', data: [ - {name: '长者人数', value: 136} , + {name: '长者人数', value: 136}, {name: '男', value: 600}, {name: '女', value: 245}, ], @@ -256,18 +430,16 @@ export default { barWidth: 10, itemStyle: this.setSeriesItemStyle('lan'), }, - /*深业世纪山谷*/ { name: '女', data: [ - {name: '长者人数', value: 321} , + {name: '长者人数', value: 321}, {name: '男', value: 700}, {name: '女', value: 750} ], type: 'bar', barGap:'100%', barWidth: 10, - //同一系列的柱间距离 itemStyle: this.setSeriesItemStyle('huang'), }, ] @@ -320,22 +492,21 @@ export default { { name: '总人数', data: [ - {name: '深业颐居', value: 358} , - {name: '深业龙投', value: 916} , - {name: '深业世纪山谷', value: 486} , + {name: '深业颐居', value: 358}, + {name: '深业龙投', value: 916}, + {name: '深业世纪山谷', value: 486}, ], type: 'bar', barGap:'100%', barWidth: 10, - //同一系列的柱间距离 itemStyle: this.setSeriesItemStyle('lv'), }, { name: '重度失能', data: [ - {name: '深业颐居', value: 98} , - {name: '深业龙投', value: 198} , - {name: '深业世纪山谷', value: 77} , + {name: '深业颐居', value: 98}, + {name: '深业龙投', value: 198}, + {name: '深业世纪山谷', value: 77}, ], type: 'bar', barWidth: 10, @@ -345,9 +516,9 @@ export default { { name: '中度失能', data: [ - {name: '深业颐居', value: 232} , - {name: '深业龙投', value: 361} , - {name: '深业世纪山谷', value: 247} , + {name: '深业颐居', value: 232}, + {name: '深业龙投', value: 361}, + {name: '深业世纪山谷', value: 247}, ], type: 'bar', barGap:'100%', @@ -357,9 +528,9 @@ export default { { name: '轻度失能', data: [ - {name: '深业颐居', value: 28} , - {name: '深业龙投', value: 357} , - {name: '深业世纪山谷', value: 152} , + {name: '深业颐居', value: 28}, + {name: '深业龙投', value: 357}, + {name: '深业世纪山谷', value: 152}, ], type: 'bar', barGap:'100%', @@ -369,9 +540,9 @@ export default { { name: '能力完好', data: [ - {name: '深业颐居', value: 28} , - {name: '深业龙投', value: 28} , - {name: '深业世纪山谷', value: 28} , + {name: '深业颐居', value: 28}, + {name: '深业龙投', value: 28}, + {name: '深业世纪山谷', value: 28}, ], type: 'bar', barGap:'100%', @@ -462,6 +633,7 @@ export default { echartObj5: { title: ['衣物清洗','助餐','助浴','康复训练','陪同散步',], data: [135,132,88,70,60], + colors: ['#FA6C06', '#F5B12D', '#1974DF', '#18DFE8', '#0CB872'], }, // 入住长者夫妻占比 echartObj6: { @@ -508,13 +680,12 @@ export default { }, }, series: [ - /*深业颐居*/ { name: '总床位', data: [ - {name: '总床位', value: 457} , - {name: '医疗床位', value: 1300} , - {name: '养老床位', value: 950} , + {name: '总床位', value: 457}, + {name: '医疗床位', value: 1300}, + {name: '养老床位', value: 950}, ], type: 'bar', barWidth: 10, @@ -538,11 +709,10 @@ export default { } }, }, - /*深业龙投*/ { name: '医疗床位', data: [ - {name: '总床位', value: 136} , + {name: '总床位', value: 136}, {name: '医疗床位', value: 600}, {name: '养老床位', value: 245}, ], @@ -568,18 +738,16 @@ export default { } }, }, - /*深业世纪山谷*/ { name: '养老床位', data: [ - {name: '总床位', value: 321} , + {name: '总床位', value: 321}, {name: '医疗床位', value: 700}, {name: '养老床位', value: 750} ], type: 'bar', barGap:'100%', barWidth: 10, - //同一系列的柱间距离 itemStyle: { normal: { label: { @@ -601,12 +769,505 @@ export default { }, ] }, + // 各机构、养老人数TOP5(人) + echartObj7: { + legend: { + show: true, + orient: 'vertical', // 图例竖着显示 + right: 0, + data: ['总人数','医疗人数','养护人数','颐养人数'], + textStyle: { + color: '#FFFFFF', + lineHeight: 10 + }, + }, + color: ['#07F090','#FF7B00','#2B8EF3','#48E5E5',], + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + xAxis: { + type: 'category', + axisLabel: {//x轴文字的配置 + show: true, + textStyle: { + color: "#fff", + fontSize: 10, + } + }, + data: ['深业颐居','深业龙投','深业世纪山谷'], + }, + yAxis: { + type: 'value', + axisLabel: {//y轴文字的配置 + textStyle: { + color: "#fff", + }, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: ['#1F7DAF'] + } + }, + }, + series: [ + { + name: '总人数', + data: [ + {name: '深业颐居', value: 358}, + {name: '深业龙投', value: 916}, + {name: '深业世纪山谷', value: 486}, + ], + type: 'bar', + barWidth: 10, + barGap:'100%', + itemStyle: this.setSeriesItemStyle('lv'), + }, + { + name: '医疗人数', + data: [ + {name: '深业颐居', value: 98}, + {name: '深业龙投', value: 198}, + {name: '深业世纪山谷', value: 77}, + ], + type: 'bar', + barGap:'100%', + barWidth: 10, + itemStyle: this.setSeriesItemStyle('huang'), + }, + { + name: '养护人数', + data: [ + {name: '深业颐居', value: 232}, + {name: '深业龙投', value: 361}, + {name: '深业世纪山谷', value: 247}, + ], + type: 'bar', + barGap:'100%', + barWidth: 10, + itemStyle: this.setSeriesItemStyle('lan'), + }, + { + name: '颐养人数', + data: [ + {name: '深业颐居', value: 28}, + {name: '深业龙投', value: 357}, + {name: '深业世纪山谷', value: 152}, + ], + type: 'bar', + barGap:'100%', + barWidth: 10, + itemStyle: this.setSeriesItemStyle('qing'), + }, + ] + }, + // 慢病统计 + echartObj8: { + radar: { + indicator: [ + { name: '高血压', max: 25,}, + { name: '糖尿病', max: 25, axisLabel:{show:false}}, + { name: '冠心病', max: 25,axisLabel:{show:false} }, + { name: '心肌梗塞', max: 25,axisLabel:{show:false} }, + { name: '慢性胃炎', max: 25,axisLabel:{show:false}}, + ], + radius: '90%', // 坐标轴半径占可显示区域的比例 + axisLine: { // 坐标轴样式 + lineStyle: { + color: '#BBBBBB', + type: 'solid', + width: 1 + } + }, + axisTick: { // 氪度线样式 + lineStyle: { + }, + }, + axisLabel: {// 是否展示坐标数字 + show: true + }, + splitArea: { // 坐标轴分隔区显示颜色:默认是一深一浅的间隔颜色，这里我们设置间隔之间是空白 + areaStyle: { + opacity: 0.5, + color: ['#032750','rgba(25, 118, 226, 0.2)'], + } + }, + splitLine: { // 分割线样式 + lineStyle: { + color: 'rgba(25, 118, 226, 0.2)', + type: 'solid', + width: 1 + } + }, + axisName: { // 指示器样式 + color: '#FFFFFF', + fontSize: 16 + }, + }, + series: [ + { + type: 'radar', + data: [ + { + value: [12, 25, 3, 12, 20], + name: 'Allocated Budget' + }, + ], + itemStyle: { + color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: 'rgba(72,228,229,0.73)' },{ offset: 1, color: 'rgba(72,228,229,0.17)' }]) + }, + areaStyle: {// 雷达图辐射区域的样式 + color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: 'rgba(72,228,229,0.73)' },{ offset: 1, color: 'rgba(72,228,229,0.17)' }]) + }, + } + ] + }, + // 一月内健康监测报警情况占比分析 + echartObj9: { + tooltip: { + trigger: 'item', + formatter: '{a}
{b} : {c} ({d}%)' + }, + legend: { + right: '0', + top: '0', + orient: 'vertical', + data: ['血压异常', '心率异常', '呼吸异常','跌倒',], + textStyle: { + color: '#FFFFFF', + lineHeight: 18 + }, + formatter: (name) => { + let data = this.echartObj9.series[0].data + let total = 0 + let tarValue + for (let i = 0; i < data.length; i++) { + total += data[i].value + if (data[i].name == name) { + tarValue = data[i].value + } + } + //计算出百分比 + let p = Math.round((tarValue / total) * 100, 2) + '%' + return `${name}(${p})` + } + }, + color: ['#2B8EF3','#48E5E5','#F5B12D','#3CD495'], + toolbox: { + show: false, + feature: { + mark: {show: true}, + dataView: {show: true, readOnly: false}, + magicType: { + show: true, + type: ['pie', 'funnel'] + }, + restore: {show: true}, + saveAsImage: {show: true} + } + }, + series: [ + { + name: '占比分析', + type: 'pie', + radius: [20, 80], + roseType: 'area', + top: 'middle', + left: -100, + label: { + show: false, + position: 'inside', + formatter: '{d}%', + }, + data: [ + {value: 40, name: '血压异常'}, + {value: 30, name: '心率异常'}, + {value: 20, name: '呼吸异常'}, + {value: 10, name: '跌倒'}, + ] + } + ] + }, + // 一月内未有亲友探视长者人数分析 + echartObj10: {}, + // 一月内未参加活动长者人数分析 + echartObj11: {}, + // 长者学历分析 + echartObj12: { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + xAxis: { + type: 'category', + axisLabel: {//x轴文字的配置 + show: true, + textStyle: { + color: "#fff", + fontSize: 10, + } + }, + data: ['博士','硕士','本科','大专','高中','初中','小学'], + }, + yAxis: { + type: 'value', + axisLabel: {//y轴文字的配置 + textStyle: { + color: "rgba(255, 255, 255, 0.64)", + }, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: ['#1F7DAF'] + } + }, + }, + series: [ + { + data: [ + {name: '博士', value: 110 }, + {name: '硕士', value: 200 }, + {name: '本科', value: 170 }, + {name: '大专', value: 120 }, + {name: '高中', value: 160 }, + {name: '初中', value: 160 }, + {name: '小学', value: 20 }, + ], + type: 'bar', + barWidth: 10, + barGap:'100%', + itemStyle: this.setSeriesItemStyle('lan', {label: {show: false}}), + }, + ] + }, + // 长者婚姻分析 + echartObj13: { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + xAxis: { + type: 'category', + axisLabel: {//x轴文字的配置 + show: true, + textStyle: { + color: "#fff", + fontSize: 10, + } + }, + data: ['未婚','已婚','离异','丧偶',], + }, + yAxis: { + type: 'value', + axisLabel: {//y轴文字的配置 + textStyle: { + color: "rgba(255, 255, 255, 0.64)", + }, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: ['#1F7DAF'] + } + }, + }, + series: [ + { + data: [ + {name: '未婚', value: 410 }, + {name: '已婚', value: 190 }, + {name: '离异', value: 291 }, + {name: '丧偶', value: 200 }, + ], + type: 'bar', + barWidth: 20, + barGap:'100%', + itemStyle: this.setSeriesItemStyle('lan'), + }, + ] + }, + // 长者子女人数情况分析 + echartObj14: { + data: [ + { + name: '独生子女', + value: 537 + }, + { + name: '2个子女', + value: 631 + }, + { + name: '3个及以上', + value: 482 + }, + { + name: '无子女', + value: 432 + }, + ], + colors: ['#08EC8F', '#2B8EF3', '#08FFFF', '#F5B12D'], + unit: '单位(人)', + showValue: true + }, + // 长者子女居住情况分析 + echartObj15: { + legend: { + show: true, + top: 'middle', + right: 0, + orient: 'vertical', + data: ['国内同城', '国内省外', '国外',], + textStyle: { + color: '#FFFFFF', + lineHeight: 18 + }, + formatter: (name) => { + let data = this.echartObj15.series[0].data + let total = 0 + let tarValue + for (let i = 0; i < data.length; i++) { + total += data[i].value + if (data[i].name == name) { + tarValue = data[i].value + } + } + //计算出百分比 + let p = Math.round((tarValue / total) * 100) + '%' + return `${name}${p}` + } + }, + color: ['#507AFC','#48E5E5','#FAC858'], + series: [ + { + name: 'Access From', + type: 'pie', + radius: [60, 90], + top: 'middle', + left: -50, + avoidLabelOverlap: false, + label: { + show: false, + position: 'center' + }, + emphasis: { + label: { + show: false, + fontSize: 20, + } + }, + labelLine: { + show: false + }, + data: [ + { value: 75, name: '国内同城' }, + { value: 15, name: '国内省外' }, + { value: 5, name: '国外' }, + ] + } + ] + }, + // 长者子女年龄分析 + echartObj16: { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + xAxis: { + type: 'category', + axisLabel: {//x轴文字的配置 + show: true, + textStyle: { + color: "#fff", + fontSize: 10, + } + }, + data: ['60-65岁','65-70岁','70-75岁','75-80岁','80-85岁','85岁以上'], + }, + yAxis: { + type: 'value', + axisLabel: {//y轴文字的配置 + textStyle: { + color: "rgba(255, 255, 255, 0.64)", + }, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: ['#1F7DAF'] + } + }, + }, + series: [ + { + data: [ + {name: '60-65岁', value: 120 }, + {name: '65-70岁', value: 160 }, + {name: '70-75岁', value: 150 }, + {name: '75-80岁', value: 120 }, + {name: '80-85岁', value: 80 }, + {name: '85岁以上', value: 60 }, + ], + type: 'bar', + barWidth: 10, + barGap:'100%', + itemStyle: this.setSeriesItemStyle('lan'), + }, + ] + }, + // 长者入住前居住情况统计 + echartObj17: { + data: [ + { + name: '与子女同住', + value: 537 + }, + { + name: '空巢老人', + value: 631 + }, + { + name: '独居老人', + value: 482 + }, + { + name: '集中居住', + value: 432 + }, + { + name: '与亲友同住', + value: 432 + }, + { + name: '其他', + value: 432 + }, + ], + colors: ['#08EC8F', '#2B8EF3', '#08FFFF', '#F5B12D'], + // unit: '单位(人)', + // showValue: true + }, } }, created() { this.init(); }, components: { + Echarts, }, methods: { init() { @@ -659,39 +1320,66 @@ export default { stroke:#334D60 !important; } .main_box{ - padding: 0 48px; + padding: 0 2rem; > div{ padding: 0; } + .inner_box{ + overflow: hidden; + } .home_left, .home_right{ width: 30%; + .inner_box{ + margin-left: 1%; + } } .home_center{ width: 40%; - padding: 0 24px; + padding: 0 1em; + .dv-border-box-11 { + font-size: 1rem; + /deep/ .border-box-content { + padding: 4rem 1.5rem 1rem; + } + } .zz{ - padding: 16px 30px; - height: calc(100% - 60px); display: flex; justify-content: space-between; - >div{ - text-align: center; - border: 1px solid; - border-image: linear-gradient(180deg, rgba(238,124,17,0.32) 0%, #E48900 100%) 1; - // border-image: linear-gradient(180deg, #20F6A5 0%, #00bbf2 20%, #038F81 99%) 1 1 1 1; - // border-radius: 10000px; - padding: 0 16px; + align-items: center; + height: 100%; + overflow: hidden; + .dv-border-box-8{ + margin-right: 1%; } - >div:nth-child(1){ + .box8{ + width: 15%; + /deep/ .border-box-content { + padding: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + } + .zz1{ width: 50%; - padding: 16px 30px 16px 0; + background: linear-gradient(89deg, #088152 3%, #01190C 99%); + padding: 0 1rem; + + height: 100%; + border-radius: 100vw; + border: 3px solid #038F81; display: flex; justify-content: space-between; align-items: center; - background: linear-gradient(89deg, #088152 3%, #01190C 99%); - border: 3px solid #08B975; - border-radius: 10000px; + + /*/deep/ .border-box-content{ + padding: 0; + display: flex; + justify-content: space-between; + align-items: center; + }*/ .circle{ display: inline-block; position: absolute; @@ -720,15 +1408,12 @@ export default { background: #F77802; } } - >div:nth-child(1){ - display: flex; - align-items: center; - img{ - height: 100%; - } - } } } + .inner_box /deep/ .box_content{ + flex: 1; + height: calc(100% - 60px); + } } .echart5{ > div{ @@ -737,64 +1422,10 @@ export default { width: 100%; display: flex; align-items: center; - margin-bottom: 16px; + margin-bottom: 0.8rem; &:last-child{ margin: 0; } - &:nth-child(1) .div5{ - background: #FA6C06; - } - &:nth-child(2) .div5{ - background: #F5B12D; - } - &:nth-child(3) .div5{ - background: #1974DF; - } - &:nth-child(4) .div5{ - background: #18DFE8; - } - &:nth-child(5) .div5{ - background: #0CB872; - } - } - .div1{ - flex-shrink: 0; - margin-left: 10px; - width: 30%; - } - .div2{ - width: 5%; - height: 1px; - border-bottom: 1px dashed rgba(230, 247, 255, 0.5); - } - .div3{ - display: flex; - justify-content: center; - align-items: center; - width: 100%; - } - .div4{ - height: 1px; - border-bottom: 1px dashed rgba(230, 247, 255, 0.5); - flex: 1; - margin-right: 10px; - } - .div5{ - height: 20px; - border-radius: 2px; - text-align: center; - } - .div6{ - height: 1px; - border-bottom: 1px dashed rgba(230, 247, 255, 0.5); - flex: 1; - margin-left: 10px; - } - .div7{ - width: 5%; - height: 1px; - margin-right: 10px; - border-bottom: 1px dashed rgba(230, 247, 255, 0.5); } } }