diff --git a/src/assets/img/live/bottom-title1.png b/src/assets/img/live/bottom-title1.png new file mode 100644 index 0000000..ae34640 Binary files /dev/null and b/src/assets/img/live/bottom-title1.png differ diff --git a/src/assets/img/live/bottom-title2.png b/src/assets/img/live/bottom-title2.png new file mode 100644 index 0000000..d89e599 Binary files /dev/null and b/src/assets/img/live/bottom-title2.png differ diff --git a/src/assets/img/live/bottom.png b/src/assets/img/live/bottom.png new file mode 100644 index 0000000..f69ec17 Binary files /dev/null and b/src/assets/img/live/bottom.png differ diff --git a/src/assets/img/live/second-bg1.png b/src/assets/img/live/second-bg1.png new file mode 100644 index 0000000..6ccf3ca Binary files /dev/null and b/src/assets/img/live/second-bg1.png differ diff --git a/src/assets/img/live/second-bg2.png b/src/assets/img/live/second-bg2.png new file mode 100644 index 0000000..9ef89e5 Binary files /dev/null and b/src/assets/img/live/second-bg2.png differ diff --git a/src/assets/img/live/second-bg3.png b/src/assets/img/live/second-bg3.png new file mode 100644 index 0000000..f96a655 Binary files /dev/null and b/src/assets/img/live/second-bg3.png differ diff --git a/src/assets/img/live/third-bg.png b/src/assets/img/live/third-bg.png new file mode 100644 index 0000000..4343a66 Binary files /dev/null and b/src/assets/img/live/third-bg.png differ diff --git a/src/assets/img/live/title2.png b/src/assets/img/live/title2.png new file mode 100644 index 0000000..651d26a Binary files /dev/null and b/src/assets/img/live/title2.png differ diff --git a/src/assets/img/live/title3.png b/src/assets/img/live/title3.png new file mode 100644 index 0000000..5887188 Binary files /dev/null and b/src/assets/img/live/title3.png differ diff --git a/src/assets/img/live/top-title.png b/src/assets/img/live/top-title.png new file mode 100644 index 0000000..7fde451 Binary files /dev/null and b/src/assets/img/live/top-title.png differ diff --git a/src/assets/img/live/top1.png b/src/assets/img/live/top1.png new file mode 100644 index 0000000..70f1523 Binary files /dev/null and b/src/assets/img/live/top1.png differ diff --git a/src/assets/img/live/top2.png b/src/assets/img/live/top2.png new file mode 100644 index 0000000..7acd38f Binary files /dev/null and b/src/assets/img/live/top2.png differ diff --git a/src/pages/live/home.vue b/src/pages/live/home.vue index 4cd397c..8d9f23f 100644 --- a/src/pages/live/home.vue +++ b/src/pages/live/home.vue @@ -98,8 +98,71 @@ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ 长者子女人数情况分析 + （人） +
+
+
+
+ +
+
+ + + + - +
+ @@ -109,6 +172,7 @@ import { Progress,Divider } from 'ant-design-vue'; Vue.use(Progress); Vue.use(Divider); import Echarts from "@/components/echarts"; +import echarts from "echarts"; export default { data() { @@ -382,6 +446,574 @@ export default { data: [357,489,456,189,129,93,47], colors: ['#A35BD9', '#209B9B', '#FA6C06', '#F5B12D', '#1974DF', '#18DFE8', '#0CB872'], }, + //一年内入住率趋势 + echartObj6:{ + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#000' + } + }, + formatter: function (params){ + console.log(params,'111111'); + let value = params[0].data + '%' + return value; + } + }, + legend: { + show: false, + icon: 'roundRect', + textStyle: { + color: '#FFFFFF', + lineHeight: 10 + }, + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: ['22.08', '22.09', '22.10', '22.11', '22.12','23.01','23.02','23.03','23.04','23.05'], + axisLabel: {//x轴文字的配置 + show: true, + textStyle: { + color: "#fff", + fontSize: 10, + } + }, + }, + yAxis: { + type: 'value', + axisLabel: {//y轴文字的配置 + formatter:'{value}%', + textStyle: { + color: "#fff", + }, + + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: ['#1F7DAF'] + }, + + }, + }, + series: [ + { + name: '', + type: 'line', + data: [20, 30, 40, 50, 60, 80,50,40,50,30], + symbol: 'circle', + showSymbol: false, + itemStyle: { + normal: { + label: { + textStyle: { + color: '#FFFFFF', + fontSize: 10 + } + }, + // color: '#1B7EF2' + color: '#1890FF', + } + }, + }, + ] + }, + //入住时长分析 + echartObj7:{ + title: { + show: true, + text: '平均入住时长320天', + left: 'center', + textStyle: { + color: '#108EFF', + fontSize: 14, + } + }, + xAxis: { + type: 'category', + axisLabel: {//x轴文字的配置 + show: true, + textStyle: { + color: "#fff", + fontSize: 10, + } + }, + data: ['1个月内','1-3个月','3-6个月','半年-1年','1-2年','2-3年'], + }, + yAxis: { + type: 'value', + axisLabel: {//y轴文字的配置 + textStyle: { + color: "#fff", + }, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: ['#1F7DAF'] + } + }, + }, + series: [ + { + data: [80,158,130,80,120,10], + type: 'custom', + renderItem: function (params, api) { + const index = params.seriesIndex; + let location = api.coord([api.value(0) + index, api.value(1)]); + var extent = api.size([0, api.value(1)]); + return { + type: 'group', + children: [ + { + type: 'leftRect', + shape: { + api, + xValue: api.value(0) + index, + yValue: api.value(1), + x: location[0], + y: location[1] + }, + style: api.style() + }, + { + type: 'rightRect', + shape: { + api, + xValue: api.value(0) + index, + yValue: api.value(1), + x: location[0], + y: location[1] + }, + style: api.style() + } + ] + }; + }, + barWidth: 18, + itemStyle: { + normal: { + // color: '#1B7EF2' + color: () => { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: 'rgba(26, 132, 191, 1)' }, + { offset: 1, color: 'rgba(27,126,242,0.00)' }, + ]); + }, + } + } + }, + ] + }, + //近15天床位趋势 + echartObj8: { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + } + }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + axisLabel: {//x轴文字的配置 + show: true, + interval: 0, // 强制文字全部显示 + textStyle: { + color: "#fff", + fontSize: 10, + } + }, + data: ['0705','0706','0709','0710','0711','0714','0715','0716','0717','0718','0719'], + } + ], + yAxis: [ + { + type: 'value', + axisLabel: {//y轴文字的配置 + textStyle: { + color: "#fff", + }, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: ['#1F7DAF'] + } + }, + } + ], + series: [ + { + type: 'line', + stack: 'Total', + smooth: true, + lineStyle: { + width: 2, + color: ['rgba(41,241,250,1)'] + }, + showSymbol: false, + areaStyle: { + opacity: 0.8, + color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(41,241,250,0.35)' + }, + { + offset: 0.48, + color: 'rgba(41,241,250,0.21)' + }, + { + offset: 0.99, + color: 'rgba(41,241,250,0.00)' + } + ]) + }, + emphasis: { + focus: 'series' + }, + data: [60, 67, 70, 126, 110, 50, 80, 160, 140, 130,160] + }, + { + type: 'line', + stack: 'Total', + smooth: true, + lineStyle: { + width: 2, + color: ['rgba(27,126,242,1)'] + }, + showSymbol: false, + areaStyle: { + opacity: 0.8, + color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(27,126,242,0.35)' + }, + { + offset: 0.48, + color: 'rgba(27,126,242,0.21)' + }, + { + offset: 0.99, + color: 'rgba(27,126,242,0.00)' + } + ]) + }, + emphasis: { + focus: 'series' + }, + data: [60, 67, 70, 126, 110, 50, 80, 160, 140, 130,160] + }, + { + type: 'line', + stack: 'Total', + smooth: true, + lineStyle: { + width: 2, + color: ['rgba(255,167,85,1)'] + }, + showSymbol: false, + areaStyle: { + opacity: 0.8, + color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(255,167,85,0.35)' + }, + { + offset: 0.48, + color: 'rgba(255,167,85,0.21)' + }, + { + offset: 0.99, + color: 'rgba(255,167,85,0.00)' + } + ]) + }, + emphasis: { + focus: 'series' + }, + data: [110, 87, 100, 146, 130, 90, 150, 190, 180, 140,110] + }, + ] + }, + //近一个月护理异常事件统计 + echartObj9: { + data: [ + { + name: '隐患事件', + value: 53 + }, + { + name: '未造成后果事件', + value: 36 + }, + { + name: '不良事件', + value: 27 + }, + { + name: '警告事件', + value: 19 + }, + ], + colors: ['#08EC8F', '#2B8EF3', '#08FFFF', '#F5B12D'], + unit: '', + showValue: false + }, + // 护理异常事件处理统计 + echartObj10: { + legend: { + show: true, + top: 'middle', + right: 0, + orient: 'vertical', + data: ['已处理', '处理中', '未处理',], + textStyle: { + color: '#FFFFFF', + lineHeight: 18 + }, + formatter: (name) => { + let data = this.echartObj10.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: '未处理' }, + ] + } + ] + }, + //床位便跟原因分析 + echartObj11: { + tooltip: { + trigger: 'item', + formatter: '{a}
{b} : {c} ({d}%)' + }, + legend: { + right: '0', + top: 'center', + orient: 'vertical', + data: ['距厕所距离', '朝向问题', '室友关系','养转医','医转养',], + textStyle: { + color: '#FFFFFF', + lineHeight: 18 + }, + formatter: (name) => { + let data = this.echartObj11.series[0].data + let total = 0 + let tarValue + console.log(data,name,'数据'); + 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','#2B8EF3','#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: 32, name: '距厕所距离'}, + {value: 28, name: '朝向问题'}, + {value: 20, name: '室友关系'}, + {value: 10, name: '养转医'}, + {value: 10, name: '医转养'}, + ] + } + ] + }, + //本年退住、病亡人数 + echartObj12: { + legend: { + show: true, + top: 'middle', + right: 0, + orient: 'vertical', + data: ['退住人数', '病亡人数', ], + textStyle: { + color: '#FFFFFF', + lineHeight: 18 + }, + formatter: (name) => { + let data = this.echartObj12.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: 25, name: '病亡人数' }, + ] + } + ] + }, + //长者关怀分析 + echartObj13: { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + xAxis: { + type: 'category', + axisLabel: {//x轴文字的配置 + show: true, + textStyle: { + color: "#fff", + fontSize: 10, + } + }, + data: ['0705','0706','0708','0709','0710','0711','0712','0713','0714','0715','0716','0717','0718','0719'], + }, + yAxis: { + type: 'value', + axisLabel: {//y轴文字的配置 + textStyle: { + color: "rgba(255, 255, 255, 0.64)", + }, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: ['#1F7DAF'] + } + }, + }, + series: [ + { + data: [ + {name: '0705', value: 107 }, + {name: '0706', value: 87 }, + {name: '0708', value: 102 }, + {name: '0709', value: 90 }, + {name: '0710', value: 95 }, + {name: '0711', value: 103 }, + {name: '0712', value: 95 }, + {name: '0713', value: 104 }, + {name: '0714', value: 100 }, + {name: '0715', value: 95 }, + {name: '0716', value: 80 }, + {name: '0717', value: 97 }, + {name: '0718', value: 91 }, + {name: '0719', value: 90 }, + ], + type: 'bar', + barWidth: 10, + barGap:'100%', + itemStyle: this.setSeriesItemStyle('lan'), + }, + ] + }, + } }, created() { @@ -448,12 +1080,108 @@ export default { img{ max-width: 100%; } + .home_center { + width: 34%; + padding: 0 10px; + .inner_box{ + margin-top: 1%; + } + .center-bottom{ + width: 49%; + height: 100%; + .btm-til1{ + background-image: url(../../assets/img/live/bottom-title1.png); + } + .btm-til2{ + background-image: url(../../assets/img/live/bottom-title2.png); + } + .center-bottom-title{ + width: 100%; + height: 50px; + background-repeat: no-repeat; + background-size: 100% 100%; + } + .chart_box{ + width: 100%; + height: 80%; + margin-top: 1%; + } + } + .inner-header { + background-image: url(../../assets/img/live/top-title.png); + } + .inner-second{ + background-image: url(../../assets/img/live/title2.png); + } + .inner-third{ + background-image: url(../../assets/img/live/title3.png); + } + .third-bg{ + height: 56%; + width: 90%; + margin: 2% auto; + background-image: url(../../assets/img/live/third-bg.png); + background-repeat: no-repeat; + background-size: 100% 100%; + } + .inner-header, + .inner-third, + .inner-last, + .inner-second{ + height: 60px; + background-repeat: no-repeat; + background-size: 100% 100%; + } + .second-bg1{ + background-image:url(../../assets/img/live/second-bg1.png); ; + } + .second-bg2{ + background-image:url(../../assets/img/live/second-bg2.png); ; + } + .second-bg3{ + background-image:url(../../assets/img/live/second-bg3.png); ; + } + .second-bg1, + .second-bg2, + .second-bg3{ + width: 90%; + height: 19%; + background-repeat: no-repeat; + background-size: 100% 100%; + margin:3% auto; + } + .header-bg1{ + background-image: url(../../assets/img/live/top1.png); + } + .header-bg3{ + background-image: url(../../assets/img/live/top2.png); + } + .header-bg2{ + background-image: url(../../assets/img/live/bottom.png); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 100%; + height: 10px; + margin: 1% 0; + + } + .header-bg1, + .header-bg3 + { + height: 30%; + width: 90%; + margin: auto; + background-repeat: no-repeat; + background-size: 100% 100%; + } + } + .inner_box{ overflow: hidden; } .home_left, .home_right{ - width: 30%; + width: 33%; .inner_box{ margin-left: 1%; }