长者修改
This commit is contained in:
杨侠磊
parent
83ba8dd20c
commit
4b9151c1b4
BIN
src/assets/img/elder/1.png
Normal file
BIN
src/assets/img/elder/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
src/assets/img/elder/2.png
Normal file
BIN
src/assets/img/elder/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/img/elder/3.png
Normal file
BIN
src/assets/img/elder/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
src/assets/img/elder/4.png
Normal file
BIN
src/assets/img/elder/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
44
src/components/InnerBox.vue
Normal file
44
src/components/InnerBox.vue
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
<template>
|
||||||
|
<div class="inner_box">
|
||||||
|
<div class="inner_header">
|
||||||
|
<div class="header_left"></div>
|
||||||
|
<div class="header_icon">
|
||||||
|
<div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="@/assets/img/bigScreen/polygon1.png"></div>
|
||||||
|
<div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="@/assets/img/bigScreen/polygon2.png"></div>
|
||||||
|
</div>
|
||||||
|
<div class="header_title">
|
||||||
|
<div>
|
||||||
|
<span>{{header_title}}</span>
|
||||||
|
<span class="little_font" v-if="little_font">{{little_font}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box_content">
|
||||||
|
<div class="chart_box">
|
||||||
|
<Echarts class="echarts" :echartObj="echartObj" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Echarts from "@/components/echarts";
|
||||||
|
export default {
|
||||||
|
name: "InnerBox",
|
||||||
|
components: {
|
||||||
|
Echarts,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: ['echartObj', 'header_title', 'little_font'],
|
||||||
|
computed: {},
|
||||||
|
created () {},
|
||||||
|
methods: {},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -36,6 +36,9 @@ Vue.prototype.formatNum = formatNum
|
|||||||
import VueCookies from 'vue-cookies'
|
import VueCookies from 'vue-cookies'
|
||||||
Vue.use(VueCookies)
|
Vue.use(VueCookies)
|
||||||
|
|
||||||
|
import InnerBox from '@/components/InnerBox.vue'
|
||||||
|
// Vue.use(InnerBox)
|
||||||
|
Vue.component('InnerBox', InnerBox)
|
||||||
|
|
||||||
// 表格懒加载 自定义指令
|
// 表格懒加载 自定义指令
|
||||||
Vue.directive('loadmore', {
|
Vue.directive('loadmore', {
|
||||||
|
|||||||
@ -1,36 +1,612 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="main_box">
|
<div class="main_box">
|
||||||
<div class="home_left">
|
<div class="home_left">
|
||||||
|
<InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="（人）" />
|
||||||
|
<InnerBox :echartObj="echartObj2" header_title="各机构长者数量TOP5" little_font="（人）" />
|
||||||
|
<InnerBox :echartObj="echartObj3" style="width: 99%;" header_title="各机构能力评估人数TOP5" little_font="（人）" />
|
||||||
|
<InnerBox :echartObj="echartObj4" style="width: 99%;" header_title="入住人数趋势分析" little_font="（人）" />
|
||||||
|
|
||||||
|
<div class="inner_box">
|
||||||
|
<div class="inner_header">
|
||||||
|
<div class="header_left"></div>
|
||||||
|
<div class="header_icon">
|
||||||
|
<div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="@/assets/img/bigScreen/polygon1.png"></div>
|
||||||
|
<div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="@/assets/img/bigScreen/polygon2.png"></div>
|
||||||
|
</div>
|
||||||
|
<div class="header_title">
|
||||||
|
<div>
|
||||||
|
<span>护理服务需求TOP5</span>
|
||||||
|
<span class="little_font">（人）</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box_content echart5">
|
||||||
|
<div v-for="(item,index) in echartObj5.title">
|
||||||
|
<div class="div1">{{item}}</div>
|
||||||
|
<div class="div2"></div>
|
||||||
|
<div class="div3">
|
||||||
|
<div class="div4" :style="'width:' + (100 - (echartObj5.data[index]/echartObj5Max*100)) / 2 + '%;'"></div>
|
||||||
|
<div class="div5" :style="'width: '+ echartObj5.data[index]/echartObj5Max*100 + '%;'">
|
||||||
|
<span style="font-size: 14px; font-weight: bold">{{echartObj5.data[index]}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="div6" :style="'width:' + (100 - (echartObj5.data[index]/echartObj5Max*100)) / 2 + '%;'"></div>
|
||||||
|
</div>
|
||||||
|
<div class="div7"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--入住长者夫妻占比-->
|
||||||
|
<div class="inner_box">
|
||||||
|
<div class="inner_header">
|
||||||
|
<div class="header_left"></div>
|
||||||
|
<div class="header_icon">
|
||||||
|
<div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="@/assets/img/bigScreen/polygon1.png"></div>
|
||||||
|
<div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="@/assets/img/bigScreen/polygon2.png"></div>
|
||||||
|
</div>
|
||||||
|
<div class="header_title">
|
||||||
|
<div>
|
||||||
|
<span>入住长者夫妻占比</span>
|
||||||
|
<span class="little_font">（%）</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box_content" style="flex-direction: row;">
|
||||||
|
<div class="chart_box" style="width: 49%; justify-content: center; align-items: center;display: flex;flex-direction: column">
|
||||||
|
<div style="border: solid 12px #004657; border-radius: 100%">
|
||||||
|
<a-progress :strokeWidth="13" type="circle" :stroke-color="{'9%': '#FA6400','89%': '#FEDB65'}" :percent="70" />
|
||||||
|
</div>
|
||||||
|
<div style="color: #FFFFFF;margin-top: 15px">夫妻</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart_box" style="width: 49%; justify-content: center; align-items: center;display: flex;flex-direction: column">
|
||||||
|
<div style="border: solid 12px #004657; border-radius: 100%">
|
||||||
|
<a-progress :strokeWidth="13" type="circle" :stroke-color="{'9%': '#FA6400','89%': '#FEDB65'}" :percent="30" />
|
||||||
|
</div>
|
||||||
|
<div style="color: #FFFFFF;margin-top: 15px">非夫妻</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="home_center">
|
<div class="home_center">
|
||||||
|
<!--长者总数-->
|
||||||
|
<div class="inner_box" style="height: 17%;">
|
||||||
|
<div class="inner_header">
|
||||||
|
<div class="header_title">
|
||||||
|
<div>
|
||||||
|
<span>长者总数</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="zz">
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<img src="@/assets/img/elder/1.png" alt="">
|
||||||
|
<div>
|
||||||
|
<div>长者总数</div>
|
||||||
|
<div><span>1761</span>人</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div><i class="circle"></i>男性长者</div>
|
||||||
|
<div>1761人</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div><i class="circle circle2"></i>女性长者</div>
|
||||||
|
<div>1761人</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img src="@/assets/img/elder/2.png" alt="">
|
||||||
|
<div>医疗人数</div>
|
||||||
|
<div>373</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img src="@/assets/img/elder/3.png" alt="">
|
||||||
|
<div>养护人数</div>
|
||||||
|
<div>595</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img src="@/assets/img/elder/4.png" alt="">
|
||||||
|
<div>颐养人数</div>
|
||||||
|
<div>490</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="home_right">
|
<div class="home_right">
|
||||||
|
<InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
|
||||||
|
<InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
|
||||||
|
<InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
|
||||||
|
<InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
|
||||||
|
<InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
|
||||||
|
<InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
|
||||||
|
<InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
|
||||||
|
<InnerBox :echartObj="echartObj1" header_title="长者年龄分析" little_font="(人)" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import echarts from "echarts";
|
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import Echarts from "@/components/echarts";
|
|
||||||
import { Progress,Divider } from 'ant-design-vue';
|
import { Progress,Divider } from 'ant-design-vue';
|
||||||
import SvgIcon from '@/components/svgIcon.vue';
|
|
||||||
Vue.use(Progress);
|
Vue.use(Progress);
|
||||||
Vue.use(Divider);
|
Vue.use(Divider);
|
||||||
import { fxjIndex } from "@/api/cultApi";
|
|
||||||
import {createOperationLog} from "@/api/api"
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
let self = this
|
|
||||||
return {
|
return {
|
||||||
|
// 长者年龄分析
|
||||||
|
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: ['长者人数','男','女'],
|
||||||
|
textStyle: {
|
||||||
|
color: '#FFFFFF',
|
||||||
|
lineHeight: 10
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ['#48E5E5','#2B8EF3','#F5B12D',],
|
||||||
|
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: this.setSeriesItemStyle('qing'),
|
||||||
|
},
|
||||||
|
/*深业龙投*/
|
||||||
|
{
|
||||||
|
name: '男',
|
||||||
|
data: [
|
||||||
|
{name: '长者人数', value: 136} ,
|
||||||
|
{name: '男', value: 600},
|
||||||
|
{name: '女', value: 245},
|
||||||
|
],
|
||||||
|
type: 'bar',
|
||||||
|
barGap:'100%',
|
||||||
|
barWidth: 10,
|
||||||
|
itemStyle: this.setSeriesItemStyle('lan'),
|
||||||
|
},
|
||||||
|
/*深业世纪山谷*/
|
||||||
|
{
|
||||||
|
name: '女',
|
||||||
|
data: [
|
||||||
|
{name: '长者人数', value: 321} ,
|
||||||
|
{name: '男', value: 700},
|
||||||
|
{name: '女', value: 750}
|
||||||
|
],
|
||||||
|
type: 'bar',
|
||||||
|
barGap:'100%',
|
||||||
|
barWidth: 10,
|
||||||
|
//同一系列的柱间距离
|
||||||
|
itemStyle: this.setSeriesItemStyle('huang'),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 各机构能力评估人数TOP5
|
||||||
|
echartObj3: {
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
bottom: 10,
|
||||||
|
data: ['总人数','重度失能','中度失能','轻度失能','能力完好'],
|
||||||
|
textStyle: {
|
||||||
|
color: '#FFFFFF',
|
||||||
|
lineHeight: 10
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ['#07F090','#2B8EF3','#FF7B00','#48E5E5','#9B64D3'],
|
||||||
|
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',
|
||||||
|
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'),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 入住人数趋势分析
|
||||||
|
echartObj4: {
|
||||||
|
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: ['2022年9月','2022年10月','2022年11月','2022年12月','2023年1月','2023年2月','2023年3月'],
|
||||||
|
}
|
||||||
|
],
|
||||||
|
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(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: [90, 87, 100, 146, 130, 90, 150, 190, 180, 140]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 护理服务需求TOP5
|
||||||
|
echartObj5Max: 135,
|
||||||
|
echartObj5: {
|
||||||
|
title: ['衣物清洗','助餐','助浴','康复训练','陪同散步',],
|
||||||
|
data: [135,132,88,70,60],
|
||||||
|
},
|
||||||
|
// 入住长者夫妻占比
|
||||||
|
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)' },
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.init();
|
this.init();
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Echarts,
|
|
||||||
SvgIcon,
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init() {
|
init() {
|
||||||
@ -41,9 +617,185 @@ export default {
|
|||||||
},
|
},
|
||||||
getData() {
|
getData() {
|
||||||
},
|
},
|
||||||
|
setSeriesItemStyle(color, obj={}){
|
||||||
|
let colors = {
|
||||||
|
qing: ['#48E5E5', 'rgba(72,228,229,0.30)'],
|
||||||
|
lan: ['#2B8EF3', 'rgba(25,118,226,0.30)'],
|
||||||
|
// huang: ['#F5B12D', 'rgba(255,123,0,0.30)'],
|
||||||
|
huang: ['#FF7B00', 'rgba(255,123,0,0.30)'],
|
||||||
|
lv: ['#07F090', 'rgba(60,212,149,0.28)'],
|
||||||
|
zi: ['#9B64D3', 'rgba(155,100,211,0.24)'],
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
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: colors[color][0] },
|
||||||
|
{ offset: 1, color: colors[color][1] },
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
...obj,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
/deep/ .ant-progress-circle .ant-progress-text {
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
/deep/ .ant-progress-circle-trail{
|
||||||
|
stroke:#334D60 !important;
|
||||||
|
}
|
||||||
|
.main_box{
|
||||||
|
padding: 0 48px;
|
||||||
|
> div{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.home_left,
|
||||||
|
.home_right{
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
.home_center{
|
||||||
|
width: 40%;
|
||||||
|
padding: 0 24px;
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
>div:nth-child(1){
|
||||||
|
width: 50%;
|
||||||
|
padding: 16px 30px 16px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(89deg, #088152 3%, #01190C 99%);
|
||||||
|
border: 3px solid #08B975;
|
||||||
|
border-radius: 10000px;
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>div:nth-child(1){
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
img{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.echart5{
|
||||||
|
> div{
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
&: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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user