diff --git a/src/assets/img/live/1.png b/src/assets/img/live/1.png new file mode 100644 index 0000000..07bc5b2 Binary files /dev/null and b/src/assets/img/live/1.png differ diff --git a/src/assets/img/live/2.png b/src/assets/img/live/2.png new file mode 100644 index 0000000..85d106f Binary files /dev/null and b/src/assets/img/live/2.png differ diff --git a/src/assets/img/page2/02营销.png b/src/assets/img/page2/02营销.png new file mode 100644 index 0000000..ee6fe18 Binary files /dev/null and b/src/assets/img/page2/02营销.png differ diff --git a/src/assets/img/page2/04长者.png b/src/assets/img/page2/04长者.png new file mode 100644 index 0000000..aca958d Binary files /dev/null and b/src/assets/img/page2/04长者.png differ diff --git a/src/assets/img/page2/05综合管理.png b/src/assets/img/page2/05综合管理.png new file mode 100644 index 0000000..da8f85f Binary files /dev/null and b/src/assets/img/page2/05综合管理.png differ diff --git a/src/assets/img/page2/06财务.png b/src/assets/img/page2/06财务.png new file mode 100644 index 0000000..2b7090e Binary files /dev/null and b/src/assets/img/page2/06财务.png differ diff --git a/src/assets/img/page2/07人力.png b/src/assets/img/page2/07人力.png new file mode 100644 index 0000000..d4a06eb Binary files /dev/null and b/src/assets/img/page2/07人力.png differ diff --git a/src/assets/img/page2/08活动管理.png b/src/assets/img/page2/08活动管理.png new file mode 100644 index 0000000..13d1f0c Binary files /dev/null and b/src/assets/img/page2/08活动管理.png differ diff --git a/src/assets/img/page2/09智能设备.png b/src/assets/img/page2/09智能设备.png new file mode 100644 index 0000000..8fb13c0 Binary files /dev/null and b/src/assets/img/page2/09智能设备.png differ diff --git a/src/components/header.vue b/src/components/header.vue index a9600ac..99b2480 100644 --- a/src/components/header.vue +++ b/src/components/header.vue @@ -65,27 +65,30 @@ export default { }, { index: "5", - title: "综合管理" + title: "综合管理", + path: "/05" } ], menuList1: [ { index: "6", title: "财务", - path: "/" + path: "/06" }, { index: "7", title: "人力资源", - path: "/cult" + path: "/07" }, { index: "8", - title: "活动管理" + title: "活动管理", + path: "/08" }, { index: "9", - title: "智能设备" + title: "智能设备", + path: "/09" } ] }; @@ -140,6 +143,7 @@ export default { }; }, jumpPage(item) { + console.log("index", item.index, this.headerObj.index); if (item.index != this.headerObj.index) { this.headerObj.index = item.index this.$router.push({ path: item.path }); diff --git a/src/pages/elder/home.vue b/src/pages/elder/home.vue index c787c34..9a5df55 100644 --- a/src/pages/elder/home.vue +++ b/src/pages/elder/home.vue @@ -21,12 +21,12 @@
-
+
{{item}}
-
+
{{echartObj5.data[index]}}
@@ -1416,16 +1416,14 @@ export default { } } .echart5{ + padding: 1rem 0; > div{ font-size: 1rem; color: #FFFFFF; width: 100%; display: flex; align-items: center; - margin-bottom: 0.8rem; - &:last-child{ - margin: 0; - } + justify-content: space-around; } } } diff --git a/src/pages/live/home.vue b/src/pages/live/home.vue index c787c34..4cd397c 100644 --- a/src/pages/live/home.vue +++ b/src/pages/live/home.vue @@ -1,11 +1,8 @@ @@ -310,63 +113,12 @@ import Echarts from "@/components/echarts"; export default { data() { return { - // 长者年龄分析 + // 各机构能床位TOP5 echartObj1: { - 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'), - }, - ] - }, - // 各机构长者数量TOP5 - echartObj2: { legend: { show: true, bottom: 10, - data: ['长者人数','男','女'], + data: ['总床位','养老床位','医疗床位'], textStyle: { color: '#FFFFFF', lineHeight: 10 @@ -407,11 +159,11 @@ export default { }, series: [ { - name: '长者人数', + name: '总床位', data: [ - {name: '长者人数', value: 457}, - {name: '男', value: 1300}, - {name: '女', value: 950}, + {name: '总床位', value: 358}, + {name: '养老床位', value: 916}, + {name: '医疗床位', value: 486}, ], type: 'bar', barWidth: 10, @@ -419,11 +171,11 @@ export default { itemStyle: this.setSeriesItemStyle('qing'), }, { - name: '男', + name: '养老床位', data: [ - {name: '长者人数', value: 136}, - {name: '男', value: 600}, - {name: '女', value: 245}, + {name: '总床位', value: 98}, + {name: '养老床位', value: 198}, + {name: '医疗床位', value: 77}, ], type: 'bar', barGap:'100%', @@ -431,11 +183,11 @@ export default { itemStyle: this.setSeriesItemStyle('lan'), }, { - name: '女', + name: '医疗床位', data: [ - {name: '长者人数', value: 321}, - {name: '男', value: 700}, - {name: '女', value: 750} + {name: '总床位', value: 232}, + {name: '养老床位', value: 361}, + {name: '医疗床位', value: 247} ], type: 'bar', barGap:'100%', @@ -444,115 +196,110 @@ export default { }, ] }, - // 各机构能力评估人数TOP5 + // 各机构入住率TOP5 + echartObj2: { + // grid: { + // left: 0, + // right: 0, + // }, + series: [{ + type: 'liquidFill', + radius: '90%', //设置图大小 + // shape 除了默认的圆形（'circle'）水球图，还可以将 shape 设置为 ECharts Symbol 的其他类型：'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow'。甚至，使用 'path://...' 的形式，为其指定一个 SVG 路径 + shape: 'circle', + // 通过将 direction 设为 'left' 或 'right'，指定波浪的移动方向，或者设为 'none' 表示静止。 + label: { + normal: { + textStyle: { + color: 'red', + insideColor: 'yellow', + fontSize: 20 + }, + // formatter: function(param) { + // return param.seriesName + '\n' + param.name + '\n' + 'Value:' + param.value; + // } + } + }, + data: [0.8, 0.5, 0.4, 0.3] + }] + }, + // 房型占比分析 echartObj3: { + tooltip: { + trigger: 'item', + formatter: '{a}
{b} : {c} ({d}%)' + }, legend: { - show: true, - bottom: 10, - data: ['总人数','重度失能','中度失能','轻度失能','能力完好'], + right: '0', + top: 'center', + orient: 'vertical', + data: ['单人间', '豪华单间', '双人间','一房一厅','三人间',], textStyle: { color: '#FFFFFF', - lineHeight: 10 + lineHeight: 18 }, - }, - color: ['#07F090','#2B8EF3','#FF7B00','#48E5E5','#9B64D3'], - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' + formatter: (name) => { + let data = this.echartObj3.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})` } }, - xAxis: { - type: 'category', - axisLabel: {//x轴文字的配置 - show: true, - textStyle: { - color: "#fff", - fontSize: 10, - } - }, - data: ['深业颐居','深业龙投','深业世纪山谷'], - }, - yAxis: { - type: 'value', - axisLabel: {//y轴文字的配置 - textStyle: { - color: "#fff", + color: ['#2B8EF3','#48E5E5','#2B8EF3','#F5B12D','#3CD495'], + toolbox: { + show: false, + feature: { + mark: {show: true}, + dataView: {show: true, readOnly: false}, + magicType: { + show: true, + type: ['pie', 'funnel'] }, - }, - splitLine: { - show: true, - lineStyle: { - type: 'dashed', - color: ['#1F7DAF'] - } - }, + restore: {show: true}, + saveAsImage: {show: true} + } }, series: [ { - name: '总人数', + name: '占比分析', + type: 'pie', + radius: [20, 80], + roseType: 'area', + top: 'middle', + left: -100, + label: { + show: false, + position: 'inside', + formatter: '{d}%', + }, data: [ - {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}, - ], - type: 'bar', - barWidth: 10, - barGap:'100%', - itemStyle: this.setSeriesItemStyle('lan'), - }, - { - name: '中度失能', - data: [ - {name: '深业颐居', value: 232}, - {name: '深业龙投', value: 361}, - {name: '深业世纪山谷', value: 247}, - ], - type: 'bar', - barGap:'100%', - barWidth: 10, - itemStyle: this.setSeriesItemStyle('huang'), - }, - { - name: '轻度失能', - data: [ - {name: '深业颐居', value: 28}, - {name: '深业龙投', value: 357}, - {name: '深业世纪山谷', value: 152}, - ], - type: 'bar', - barGap:'100%', - barWidth: 10, - itemStyle: this.setSeriesItemStyle('qing'), - }, - { - name: '能力完好', - data: [ - {name: '深业颐居', value: 28}, - {name: '深业龙投', value: 28}, - {name: '深业世纪山谷', value: 28}, - ], - type: 'bar', - barGap:'100%', - barWidth: 10, - itemStyle: this.setSeriesItemStyle('zi'), - }, + {value: 32, name: '单人间'}, + {value: 28, name: '豪华单间'}, + {value: 20, name: '双人间'}, + {value: 10, name: '一房一厅'}, + {value: 10, name: '三人间'}, + ] + } ] }, - // 入住人数趋势分析 + // 请假外出天数 echartObj4: { + title: { + subtext: '平均每月外出29天', + subtextStyle: { + color: '#fff', + align: 'center', + textAlign: 'center', + }, + }, tooltip: { trigger: 'axis', axisPointer: { @@ -629,637 +376,11 @@ export default { ] }, // 护理服务需求TOP5 - echartObj5Max: 135, + echartObj5Max: 489, echartObj5: { - title: ['衣物清洗','助餐','助浴','康复训练','陪同散步',], - data: [135,132,88,70,60], - colors: ['#FA6C06', '#F5B12D', '#1974DF', '#18DFE8', '#0CB872'], - }, - // 入住长者夫妻占比 - echartObj6: { - legend: { - show: true, - bottom: 10, - data: ['总床位','医疗床位','养老床位'], - textStyle: { - color: '#FFFFFF', - lineHeight: 10 - }, - }, - color: ['#2B8EF3','#F5B12D','#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: 457}, - {name: '医疗床位', value: 1300}, - {name: '养老床位', value: 950}, - ], - type: 'bar', - barWidth: 10, - barGap:'100%', - itemStyle: { - normal: { - label: { - show: true, - position: 'top', - textStyle: { - color: '#FFFFFF', - fontSize: 10 - }, - }, - color: () => { - return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#1976E2' }, - { offset: 1, color: 'rgba(25,118,226,0.30)' }, - ]); - }, - } - }, - }, - { - name: '医疗床位', - data: [ - {name: '总床位', value: 136}, - {name: '医疗床位', value: 600}, - {name: '养老床位', value: 245}, - ], - type: 'bar', - barGap:'100%', - barWidth: 10, - itemStyle: { - normal: { - label: { - show: true, - position: 'top', - textStyle: { - color: '#FFFFFF', - fontSize: 10 - }, - }, - color: () => { - return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#FF7B00' }, - { offset: 1, color: 'rgba(255,123,0,0.30)' }, - ]); - }, - } - }, - }, - { - name: '养老床位', - data: [ - {name: '总床位', value: 321}, - {name: '医疗床位', value: 700}, - {name: '养老床位', value: 750} - ], - type: 'bar', - barGap:'100%', - barWidth: 10, - itemStyle: { - normal: { - label: { - show: true, - position: 'top', - textStyle: { - color: '#FFFFFF', - fontSize: 12 - }, - }, - color: () => { - return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#48E5E5' }, - { offset: 1, color: 'rgba(72,228,229,0.30)' }, - ]); - } - } - }, - }, - ] - }, - // 各机构、养老人数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 + title: ['三级护理','二级护理','一级护理','特级护理一','特级护理二','特级护理三','专需护理',], + data: [357,489,456,189,129,93,47], + colors: ['#A35BD9', '#209B9B', '#FA6C06', '#F5B12D', '#1974DF', '#18DFE8', '#0CB872'], }, } }, @@ -1324,6 +445,9 @@ export default { > div{ padding: 0; } + img{ + max-width: 100%; + } .inner_box{ overflow: hidden; } @@ -1334,98 +458,60 @@ export default { margin-left: 1%; } } - .home_center{ - width: 40%; - padding: 0 1em; - .dv-border-box-11 { - font-size: 1rem; - /deep/ .border-box-content { - padding: 4rem 1.5rem 1rem; - } - } - .zz{ + .zncd{ + display: flex; + justify-content: space-around; + align-items: center; + height: calc(100% - 60px); + line-height: 2rem; + font-size: 1rem; + > div { + width: 40%; + height: 60%; display: flex; - justify-content: space-between; + flex-direction: column; + justify-content: center; align-items: center; - height: 100%; - overflow: hidden; - .dv-border-box-8{ - margin-right: 1%; + background: radial-gradient(51% 25% at 50% 100%, rgba(0,72,255,0.50) 0%, rgba(0,155,255,0.00) 100%), radial-gradient(52% 50% at 50% 100%, rgba(0,111,255,0.20) 0%, rgba(0,110,255,0.00) 100%), linear-gradient(180deg, rgba(8,45,123,0.20) 0%, rgba(7,51,134,0.50) 100%); + border: 1px solid; + border-image: radial-gradient(141% 67% at 43% 100%, #7AC9FB 0%, rgba(0,99,255,0.00) 100%) 1; + b{ + background: linear-gradient(180deg, #FFFFFF 25%, #8DD8E9 57%, #00C3DF 72%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } - .box8{ - width: 15%; - /deep/ .border-box-content { - padding: 0; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + .img{ + width: 4rem; + height: 4rem; + padding: 1rem; + background: rgba(0, 104, 255, 0.2); + border: 2px dashed; + border-image: linear-gradient(180deg, rgba(0,139,255,0.56) 0%, rgba(0,151,255,0.59) 100%) 2.16; + } + &:last-child{ + background: radial-gradient(51% 25% at 50% 100%, rgba(255,81,0,0.50) 0%, rgba(0,155,255,0.00) 100%), radial-gradient(52% 50% at 50% 100%, rgba(0,111,255,0.20) 0%, rgba(0,110,255,0.00) 100%), linear-gradient(180deg, rgba(123,8,8,0.20) 0%, rgba(134,48,7,0.50) 100%); + border-image: linear-gradient(180deg, #E4B24F 0%, #FF8503 53%, #FFAA00 100%) 1; + b{ + background: linear-gradient(180deg, #FFFFFF 25%, #FFAB03 57%, #FF7D03 72%); + background-clip: text; + } + .img{ + background: rgba(255, 137, 0, 0.2); + border-image: linear-gradient(180deg, rgba(228,178,79,0.70) 0%, rgba(255,171,3,0.53) 100%) 2.16; } } - .zz1{ - width: 50%; - 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; - - /*/deep/ .border-box-content{ - padding: 0; - display: flex; - justify-content: space-between; - align-items: center; - }*/ - .circle{ - display: inline-block; - position: absolute; - width: 12px; - height: 1.5em; - border-left: 1px solid; - border-bottom: 1px solid; - border-color: #00B4FF; - margin-left: -12px; - // margin-top: -0.5em; - &:after{ - content: ""; - display: block; - width: 7px; - height: 7px; - border-radius: 7px; - background: #00B4FF; - position: absolute; - margin-top: -7px; - margin-left: -3.5px; - } - } - .circle2{ - border-color: #F77802; - &:after{ - background: #F77802; - } - } - } - } - .inner_box /deep/ .box_content{ - flex: 1; - height: calc(100% - 60px); } } .echart5{ + padding: 1rem 0; > div{ - font-size: 1rem; + font-size: 0.8rem; color: #FFFFFF; width: 100%; display: flex; align-items: center; - margin-bottom: 0.8rem; - &:last-child{ - margin: 0; - } + justify-content: space-around; } } } diff --git a/src/pages/live/index.vue b/src/pages/live/index.vue index 7318ac6..838cc6f 100644 --- a/src/pages/live/index.vue +++ b/src/pages/live/index.vue @@ -3,7 +3,7 @@ -
+
diff --git a/src/pages/marketing/home.vue b/src/pages/marketing/home.vue index 794b5b3..140a3d6 100644 --- a/src/pages/marketing/home.vue +++ b/src/pages/marketing/home.vue @@ -116,7 +116,7 @@
-
+
@@ -273,8 +273,10 @@
-
+
+ +
diff --git a/src/pages/page/05.vue b/src/pages/page/05.vue new file mode 100644 index 0000000..10cf818 --- /dev/null +++ b/src/pages/page/05.vue @@ -0,0 +1,81 @@ + + + diff --git a/src/pages/page/06.vue b/src/pages/page/06.vue new file mode 100644 index 0000000..3785712 --- /dev/null +++ b/src/pages/page/06.vue @@ -0,0 +1,81 @@ + + + diff --git a/src/pages/page/07.vue b/src/pages/page/07.vue new file mode 100644 index 0000000..554548e --- /dev/null +++ b/src/pages/page/07.vue @@ -0,0 +1,81 @@ + + + diff --git a/src/pages/page/08.vue b/src/pages/page/08.vue new file mode 100644 index 0000000..3b3e966 --- /dev/null +++ b/src/pages/page/08.vue @@ -0,0 +1,81 @@ + + + diff --git a/src/pages/page/09.vue b/src/pages/page/09.vue new file mode 100644 index 0000000..5cacc65 --- /dev/null +++ b/src/pages/page/09.vue @@ -0,0 +1,81 @@ + + + diff --git a/src/router.js b/src/router.js index 5aaa0b0..fd77c55 100644 --- a/src/router.js +++ b/src/router.js @@ -56,6 +56,46 @@ export default new Router({ index: 0, } }, + { + path: '/05', + name: '05', + component: () => import('@/pages/page/05'), + meta: { + index: 0, + } + }, + { + path: '/06', + name: '06', + component: () => import('@/pages/page/06'), + meta: { + index: 0, + } + }, + { + path: '/07', + name: '07', + component: () => import('@/pages/page/07'), + meta: { + index: 0, + } + }, + { + path: '/08', + name: '08', + component: () => import('@/pages/page/08'), + meta: { + index: 0, + } + }, + { + path: '/09', + name: '09', + component: () => import('@/pages/page/09'), + meta: { + index: 0, + } + }, // 首页 { path: '/home',