1967 lines
75 KiB
Vue
1967 lines
75 KiB
Vue
<template>
|
||
<div class="main_box">
|
||
<div class="home_left">
|
||
<!-- 会员转化分析-->
|
||
<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">
|
||
<!-- 预约报名人数 -->
|
||
<div style="font-size: 1rem;color: #FFFFFF;width: 100%;display: flex;align-items: center;">
|
||
<div style="flex-shrink: 0;margin-left: 10px;width: 30%">预约报名人数</div>
|
||
<div style="width: 5%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
|
||
<div style="display: flex;justify-content: center;align-items: center;width: 100%">
|
||
<div :style="'width:' + (100 - (3122/3122*100)) / 2 + '%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5); flex: 1;margin-right: 10px'"></div>
|
||
<div :style="'width: '+ 3122/3122*100 + '%;height: 20px;border-radius: 2px;background: #3D7DFA;text-align: center'">
|
||
<span style="font-size: 14px; font-weight: bold">3122</span>
|
||
</div>
|
||
<div :style="'width:' + (100 - (3122/3122*100)) / 2 + '%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5); flex: 1;margin-left: 10px'"></div>
|
||
</div>
|
||
<div style="width: 5%;height: 1px; margin-right: 10px;border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
|
||
</div>
|
||
<!-- 来访人数-->
|
||
<div style="font-family: MicrosoftYaHei;font-size: 1rem;color: #FFFFFF;width: 100%;display: flex;align-items: center;margin-top: 20px">
|
||
<div style="flex-shrink: 0;margin-left: 10px;width: 30%">来访人数</div>
|
||
<div style="width: 5%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
|
||
<div style="display: flex;justify-content: center;align-items: center;width: 100%">
|
||
<div :style="'width:' + (100 - (2033/3122*100)) / 2 + '%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5); flex: 1;margin-right: 10px'"></div>
|
||
<div :style="'width: '+ 2033/3122*100 + '%;height: 20px;border-radius: 2px;background: #3CD495;text-align: center'">
|
||
<span style="font-size: 14px; font-weight: bold">2033</span>
|
||
</div>
|
||
<div :style="'width:' + (100 - (1000/3122*100)) / 2 + '%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5); flex: 1;margin-left: 10px'"></div>
|
||
</div>
|
||
<div style="width: 5%;height: 1px; margin-right: 10px;border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
|
||
</div>
|
||
<!-- 预付定金人数-->
|
||
<div style="font-family: MicrosoftYaHei;font-size: 1rem;color: #FFFFFF;width: 100%;display: flex;align-items: center;margin-top: 20px">
|
||
<div style="flex-shrink: 0;margin-left: 10px;width: 30%">预付定金人数</div>
|
||
<div style="width: 5%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
|
||
<div style="display: flex;justify-content: center;align-items: center;width: 100%">
|
||
<div :style="'width:' + (100 - (1055/3122*100)) / 2 + '%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5); flex: 1;margin-right: 10px'"></div>
|
||
<div :style="'width: '+ 1055/3122*100 + '%;height: 20px;border-radius: 2px;background: #18DFE8;text-align: center'">
|
||
<span style="font-size: 14px; font-weight: bold">1055</span>
|
||
</div>
|
||
<div :style="'width:' + (100 - (1055/3122*100)) / 2 + '%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5); flex: 1;margin-left: 10px'"></div>
|
||
</div>
|
||
<div style="width: 5%;height: 1px; margin-right: 10px;border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
|
||
</div>
|
||
<!-- 会员人数-->
|
||
<div style="font-family: MicrosoftYaHei;font-size: 1rem;color: #FFFFFF;width: 100%;display: flex;align-items: center;margin-top: 20px">
|
||
<div style="flex-shrink: 0;margin-left: 10px;width: 30%">会员人数</div>
|
||
<div style="width: 5%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
|
||
<div style="display: flex;justify-content: center;align-items: center;width: 100%">
|
||
<div :style="'width:' + (100 - (1055/3122*100)) / 2 + '%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5); flex: 1;margin-right: 10px'"></div>
|
||
<div :style="'width: '+ 1055/3122*100 + '%;height: 20px;border-radius: 2px;background: #F5B12D;text-align: center'">
|
||
<span style="font-size: 14px; font-weight: bold">1055</span>
|
||
</div>
|
||
<div :style="'width:' + (100 - (1055/3122*100)) / 2 + '%;height: 1px; border-bottom: 1px dashed rgba(230, 247, 255, 0.5); flex: 1;margin-left: 10px'"></div>
|
||
</div>
|
||
<div style="width: 5%;height: 1px; margin-right: 10px;border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></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">
|
||
<div class="chart_box">
|
||
<Echarts
|
||
:key="echartObjKey"
|
||
class="echarts"
|
||
:echartObj="echartObj1"
|
||
></Echarts>
|
||
</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">
|
||
<div style="display: flex; justify-content: center;margin-top: 10px">
|
||
<div style="display: flex;font-size: 14px; color: #FFFFFF;">
|
||
<div style="display: flex; align-items: center;"><img src="../../assets/img/bigScreen/icon/boy.png" alt /></div>
|
||
<div style="display: flex; flex-direction: column;margin-left: 5px">
|
||
<div>男性</div>
|
||
<div style="color: #00B3DB; font-size: 24px; font-weight: bold">182<span style="font-size: 14px">人</span></div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;font-size: 14px; color: #FFFFFF;margin-left: 50px">
|
||
<div style="display: flex; align-items: center;margin-top: 6px"><img src="../../assets/img/bigScreen/icon/girl.png" alt /></div>
|
||
<div style="display: flex; flex-direction: column;margin-left: 5px">
|
||
<div>女性</div>
|
||
<div style="color: #00B3DB; font-size: 24px; font-weight: bold">176<span style="font-size: 14px">人</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chart_box">
|
||
<Echarts
|
||
:key="echartObjKey"
|
||
class="echarts"
|
||
:echartObj="echartObj2"
|
||
></Echarts>
|
||
</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">
|
||
<dv-capsule-chart :config="echartObj5" style="width:90%;height:90%" />
|
||
</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">
|
||
<div class="chart_box">
|
||
<Echarts
|
||
:key="echartObjKey3"
|
||
class="echarts"
|
||
:echartObj="echartObj3"
|
||
></Echarts>
|
||
</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 style="color: #FFFFFF" :strokeWidth="13" type="circle" :stroke-color="{'9%': '#FA6400','89%': '#FEDB65','9%': '#FA6400'}"
|
||
: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 style="color: #FFFFFF" :strokeWidth="13" type="circle" :stroke-color="{'9%': '#FA6400','89%': '#FEDB65','9%': '#FA6400'}"
|
||
:percent="30">
|
||
</a-progress>
|
||
</div>
|
||
<div style="color: #FFFFFF;margin-top: 15px">西医占比</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--入住人数趋势分析-->
|
||
<div class="inner_box" style="width: 99%">
|
||
<!-- 标题 -->
|
||
<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">
|
||
<div class="chart_box">
|
||
<Echarts
|
||
:key="echartObjKey"
|
||
class="echarts"
|
||
:echartObj="echartObj4"
|
||
></Echarts>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="home_center">
|
||
<!--数据概况-->
|
||
<dv-border-box-8 :color="['#053D7E', '#1E6FEA']" style="width: 100%;height: 35%">
|
||
<div class="inner_box" style="width: 100%;height: 100%">
|
||
<div class="inner_header">
|
||
<div class="header_title">
|
||
<div>
|
||
<span>数据概况</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box_content">
|
||
<div style="display: flex; width: 90%; justify-content: space-between; align-items: center ">
|
||
<!--机构数-->
|
||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
||
<div style="color: #00B3DB; font-size: 24px; font-weight: bold">3<span style="font-size: 17px">家</span></div>
|
||
<img src="../../assets/img/bigScreen/icon/jigou.png" alt />
|
||
<div style="color: #DDDDDD; font-size: 14px; line-height: 15px">机构数</div>
|
||
</div>
|
||
<!--合作医院-->
|
||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
||
<div style="color: #00B3DB; font-size: 24px; font-weight: bold">2<span style="font-size: 17px">家</span></div>
|
||
<img src="../../assets/img/bigScreen/icon/hospitol.png" alt />
|
||
<div style="color: #DDDDDD; font-size: 14px; line-height: 15px">合作医院</div>
|
||
</div>
|
||
<!--房间总数-->
|
||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
||
<div style="color: #00B3DB; font-size: 24px; font-weight: bold">565<span style="font-size: 17px">间</span></div>
|
||
<img src="../../assets/img/bigScreen/icon/fangjian.png" alt />
|
||
<div style="color: #DDDDDD; font-size: 14px; line-height: 15px">房间总数</div>
|
||
</div>
|
||
<!--床位数-->
|
||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
||
<div style="color: #00B3DB; font-size: 24px; font-weight: bold">2,257<span style="font-size: 17px">个</span></div>
|
||
<img src="../../assets/img/bigScreen/icon/bed.png" alt />
|
||
<div style="color: #DDDDDD; font-size: 14px; line-height: 15px">床位总数</div>
|
||
</div>
|
||
<!--入住人数-->
|
||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
||
<div style="color: #00B3DB; font-size: 24px; font-weight: bold">1,760<span style="font-size: 17px">个</span></div>
|
||
<img src="../../assets/img/bigScreen/icon/ruzhu.png" alt />
|
||
<div style="color: #DDDDDD; font-size: 14px; line-height: 15px">入住人数</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; width: 80%; margin-top: 20px; justify-content: space-between; align-items: center ">
|
||
<!--医护人员-->
|
||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
||
<div style="color: #00B3DB; font-size: 24px; font-weight: bold">1241<span style="font-size: 17px">人</span></div>
|
||
<img src="../../assets/img/bigScreen/icon/yihu.png" alt />
|
||
<div style="color: #DDDDDD; font-size: 14px; line-height: 15px">医护人员</div>
|
||
</div>
|
||
<!--会员人数-->
|
||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
||
<div style="color: #00B3DB; font-size: 24px; font-weight: bold">356<span style="font-size: 17px">人</span></div>
|
||
<img src="../../assets/img/bigScreen/icon/huiyuan.png" alt />
|
||
<div style="color: #DDDDDD; font-size: 14px; line-height: 15px">会员人数</div>
|
||
</div>
|
||
<!--退住人数-->
|
||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
||
<div style="color: #00B3DB; font-size: 24px; font-weight: bold">25<span style="font-size: 17px">人</span></div>
|
||
<img src="../../assets/img/bigScreen/icon/tuizhu.png" alt />
|
||
<div style="color: #DDDDDD; font-size: 14px; line-height: 15px">退住人数</div>
|
||
</div>
|
||
<!--设备总数-->
|
||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
||
<div style="color: #00B3DB; font-size: 24px; font-weight: bold">565<span style="font-size: 17px">个</span></div>
|
||
<img src="../../assets/img/bigScreen/icon/shebei.png" alt />
|
||
<div style="color: #DDDDDD; font-size: 14px; line-height: 15px">设备总数</div>
|
||
</div>
|
||
<!--志愿者总数-->
|
||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
||
<div style="color: #00B3DB; font-size: 24px; font-weight: bold">103<span style="font-size: 17px">人</span></div>
|
||
<img src="../../assets/img/bigScreen/icon/zhiyuan.png" alt />
|
||
<div style="color: #DDDDDD; font-size: 14px; line-height: 15px">志愿者总数</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</dv-border-box-8>
|
||
<!--入住率-->
|
||
<dv-border-box-8 :color="['#00D0FF', '#48E5E5']" style="width: 100%;height: 25%">
|
||
<div class="inner_box" style="width: 100%;height: 100%">
|
||
<div class="inner_header">
|
||
<div class="header_title">
|
||
<div>
|
||
<span>入住率</span>
|
||
<span class="little_font">（%）</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 内容-->
|
||
<div class="box_content" style="flex-direction: row;height: calc(100% - 60px)">
|
||
<div class="chart_box" style="width: 25%; justify-content: center; align-items: center;display: flex;flex-direction: column">
|
||
<a-progress style="color: #FFFFFF" :width="165" :strokeWidth="13" type="circle" :stroke-color="{'13%': 'rgba(111,253,190,0.11)','89%': '#15E5F1','13%': 'rgba(111,253,190,0.11)'}"
|
||
:percent="78">
|
||
<template #format="percent">
|
||
<span style="color: #FFFFFF;font-size: 2.2rem;font-weight: bold">{{ percent }}<span style="font-size: 0.9rem">%</span></span>
|
||
<div style="color: #DDDDDD;font-size: 1rem;margin-top: 5px">总床位入住率</div>
|
||
</template>
|
||
</a-progress>
|
||
</div>
|
||
<a-divider style="height: 70%;margin:0 5%;background-color: rgba(38, 103, 173, 0.8);opacity: 0.5" type="vertical" :dashed= "true"/>
|
||
<div class="chart_box" style="width: 25%;justify-content: center; align-items: center;display: flex;flex-direction: column">
|
||
<a-progress style="color: #FFFFFF" :width="165" :strokeWidth="13" type="circle" :stroke-color="{'13%': 'rgba(61,126,250,0.20)','91%': '#3B7AF3','13%': 'rgba(61,126,250,0.20)'}"
|
||
:percent="67">
|
||
<template #format="percent">
|
||
<span style="color: #FFFFFF;font-size: 2.2rem;font-weight: bold">{{ percent }}<span style="font-size: 0.9rem">%</span></span>
|
||
<div style="color: #DDDDDD;font-size: 1rem;margin-top: 5px">医疗床位入住率</div>
|
||
</template>
|
||
</a-progress>
|
||
</div>
|
||
<a-divider style="height: 70%;margin:0 5%;opacity: 0.5; background-color: rgba(38, 103, 173, 0.8);" type="vertical" :dashed= "true"/>
|
||
<div class="chart_box" style="width: 25%;justify-content: center; align-items: center;display: flex;flex-direction: column">
|
||
<a-progress style="color: #FFFFFF" :width="165" :strokeWidth="13" type="circle" :stroke-color="{'2%': 'rgba(246,187,66,0.00)','90%': '#FAB32B','2%': 'rgba(246,187,66,0.00)'}"
|
||
:percent="85">
|
||
<template #format="percent">
|
||
<span style="color: #FFFFFF;font-size: 2.2rem;font-weight: bold">{{ percent }}<span style="font-size: 0.9rem">%</span></span>
|
||
<div style="color: #DDDDDD;font-size: 1rem;margin-top: 5px">养护床位入住率</div>
|
||
</template>
|
||
</a-progress>
|
||
</div>
|
||
</div>
|
||
</div>、
|
||
</dv-border-box-8>
|
||
<!--设备情况-->
|
||
<dv-border-box-8 :color="['#053D7E', '#1E6FEA']" style="width: 100%;height: 39%">
|
||
<div class="inner_box" style="height: 100%">
|
||
<div class="inner_header">
|
||
<div class="header_title">
|
||
<div>
|
||
<span>设备情况</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 内容-->
|
||
<div class="box_content" style="flex-direction: row; height:calc(100% - 60px);width: 100%;align-items: unset">
|
||
<div style="width: 33%">
|
||
<div style="height:20px; width: 100%;display: flex;align-items: center;">
|
||
<div style="margin-left: 10px"><img src="../../assets/img/bigScreen/icon/title2icon.png"></div>
|
||
<div style="margin-left: 5px; font-size: 1rem; color: #00B3DB;line-height: 15px">设备报警处理分析(%)</div>
|
||
</div>
|
||
<div style="height: 2px;width: 100%">
|
||
<img style="margin-left: 10px;height: 2px;width: calc(100% - 10px)" src="../../assets/img/bigScreen/title2-bottom.png">
|
||
</div>
|
||
<div class="chart_box" style="height: calc(100% - 22px);display:flex; align-items: center;justify-content: center;flex-direction: column">
|
||
<div class="shebei">
|
||
<Echarts
|
||
:key="echartObjKey3"
|
||
class="echarts"
|
||
:echartObj="echartObj6"
|
||
></Echarts>
|
||
<div style="text-align: center; vertical-align: center;position: relative;bottom: 115px;">
|
||
<div style="color: #00B3DB;font-size: 24px;">230</div>
|
||
<div style="font-size: 14px">报警总数</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;align-items: center;justify-content: center;margin-top: 20px">
|
||
<div class="block_bg">
|
||
<div style="font-size: 26px">70%</div>
|
||
<div style="font-size: 14px">已处理 </div>
|
||
<div style="background: #3D7DFA;width: 24px;height: 3px;margin-top: 5px"></div>
|
||
</div>
|
||
<div class="block_bg">
|
||
<div style="font-size: 26px">20%</div>
|
||
<div style="font-size: 14px">处理中</div>
|
||
<div style="background: #18DFE8;width: 24px;height: 3px;margin-top: 5px"></div>
|
||
</div>
|
||
<div class="block_bg">
|
||
<div style="font-size: 26px">10%</div>
|
||
<div style="font-size: 14px">未处理</div>
|
||
<div style="background: #F5B12D;width: 24px;height: 3px;margin-top: 5px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--时时设备报警情况表-->
|
||
<div style="width: 60%;margin-left: 5%">
|
||
<div style="height:20px; width: 100%;display: flex;align-items: center;">
|
||
<div style="margin-left: 10px"><img src="../../assets/img/bigScreen/icon/title2icon.png"></div>
|
||
<div style="margin-left: 5px; font-size: 1rem; color: #00B3DB;line-height: 15px">实时设备报警情况</div>
|
||
</div>
|
||
<div style="height: 2px;width: 100%">
|
||
<img style="margin-left: 10px;height: 2px;width: calc(100% - 10px)" src="../../assets/img/bigScreen/title2-bottom.png">
|
||
</div>
|
||
<!--表格-->
|
||
<div style="width: 90%;display: flex;flex-direction: column;margin-top: 20px">
|
||
<div class="table_title_bg">
|
||
<div style="width: 25%">日期</div>
|
||
<div style="width: 20%">时间</div>
|
||
<div style="width: 20%">地址</div>
|
||
<div style="width: 20%">姓名</div>
|
||
<div style="width: 20%">警告类型</div>
|
||
</div>
|
||
<div v-for="(item, index) in echartObj7" :key="index"
|
||
class="table_row_bg" :style=" index%2== 1 ? '' : 'background: none; border:none'">
|
||
<div style="width: 25%">{{item.date}}</div>
|
||
<div style="width: 20%">{{item.time}}</div>
|
||
<div style="width: 20%">{{item.address}}</div>
|
||
<div style="width: 20%">{{item.name}}</div>
|
||
<div style="width: 20%"><img src="../../assets/img/bigScreen/icon/warning.png">{{item.warning}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</dv-border-box-8>
|
||
</div>
|
||
<div class="home_right">
|
||
<!-- 各机构床位TOP5-->
|
||
<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">
|
||
<div class="chart_box">
|
||
<Echarts
|
||
:key="echartObjKey8"
|
||
class="echarts"
|
||
:echartObj="echartObj8"
|
||
></Echarts>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 各机构入住率TOP5（%）-->
|
||
<div class="inner_box" style="margin-left: 1%;">
|
||
<!-- 标题 -->
|
||
<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">
|
||
<div class="chart_box">
|
||
<Echarts
|
||
:key="echartObjKey8"
|
||
class="echarts"
|
||
:echartObj="echartObj9"
|
||
></Echarts>
|
||
</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">
|
||
<div class="chart_box">
|
||
<Echarts
|
||
:key="echartObjKey8"
|
||
class="echarts"
|
||
:echartObj="echartObj10"
|
||
></Echarts>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 支出占比分析（%）-->
|
||
<div class="inner_box" style="margin-left: 1%;">
|
||
<!-- 标题 -->
|
||
<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="display:flex;width: 175px;margin-left: 20px;align-items: center">
|
||
<div class="shebei">
|
||
<Echarts
|
||
:key="echartObjKey3"
|
||
class="echarts"
|
||
:echartObj="echartObj11"
|
||
></Echarts>
|
||
</div>
|
||
</div>
|
||
<!--描述-->
|
||
<div style="display: flex; justify-content:center; flex-direction:column; align-items: center; width: calc(100% - 175px)">
|
||
<div style="display: flex;align-items: center;width: 60%"><div style="width: 15px;height: 8px;background-color: #2B8EF3;font-size: 14px;"></div><div style="width:64px;margin-left: 10px">设备</div><span style="color:#2B8EF3;font-weight: bold">35%</span></div>
|
||
<div style="display: flex;align-items: center;width: 60%"><div style="width: 15px;height: 8px;background-color: #48E5E5;font-size: 14px;"></div><div style="width:64px;margin-left: 10px">护理材料</div><span style="color:#48E5E5;font-weight: bold">35%</span></div>
|
||
<div style="display: flex;align-items: center;width: 60%"><div style="width: 15px;height: 8px;background-color: #3D7DFA;font-size: 14px;"></div><div style="width:64px;margin-left: 10px">电</div><span style="color:#3D7DFA;font-weight: bold">35%</span></div>
|
||
<div style="display: flex;align-items: center;width: 60%"><div style="width: 15px;height: 8px;background-color: #68A400;font-size: 14px;"></div><div style="width:64px;margin-left: 10px">水</div><span style="color:#68A400;font-weight: bold;">35%</span></div>
|
||
<div style="display: flex;align-items: center;width: 60%"><div style="width: 15px;height: 8px;background-color: #F5B12D;font-size: 14px;"></div><div style="width:64px;margin-left: 10px">食材</div><span style="color:#F5B12D;font-weight: bold">35%</span></div>
|
||
<div style="display: flex;align-items: center;width: 60%"><div style="width: 15px;height: 8px;background-color: #D599FD;font-size: 14px;"></div><div style="width:64px;margin-left: 10px">天然气</div><span style="color:#D599FD;font-weight: bold">35%</span></div>
|
||
<div style="display: flex;align-items: center;width: 60%"><div style="width: 15px;height: 8px;background-color: #EA8533;font-size: 14px;"></div><div style="width:64px;margin-left: 10px">其他</div><span style="color:#EA8533;font-weight: bold">35%</span></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">
|
||
<div class="chart_box">
|
||
<Echarts
|
||
:key="echartObjKey8"
|
||
class="echarts"
|
||
:echartObj="echartObj12"
|
||
></Echarts>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 培训课程能力分析（人）-->
|
||
<div class="inner_box" style="margin-left: 1%;">
|
||
<!-- 标题 -->
|
||
<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">
|
||
<div class="chart_box">
|
||
<Echarts
|
||
:key="echartObjKey8"
|
||
class="echarts"
|
||
:echartObj="echartObj13"
|
||
></Echarts>
|
||
</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">
|
||
<div class="chart_box">
|
||
<Echarts
|
||
:key="echartObjKey3"
|
||
class="echarts"
|
||
:echartObj="echartObj14"
|
||
></Echarts>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--满意度调查（%）-->
|
||
<div class="inner_box" style="margin-left: 1%;">
|
||
<!-- 标题 -->
|
||
<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">
|
||
<div class="chart_box" style="justify-content: center; align-items: center; display: flex; flex-direction: column">
|
||
<div style="height:23%;display: flex;justify-content: center;align-items: center">
|
||
<div style="font-size: 14px;width: 58px;text-align: right">非常满意</div>
|
||
<div style="margin-left: 10px">
|
||
<svg-icon icon-class="smile" :style="echartObj15.verygood > 5 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.verygood > 15 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.verygood > 25 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.verygood > 35 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.verygood > 45 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.verygood > 55 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.verygood > 65 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.verygood > 75 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.verygood > 85 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.verygood > 95 ? 'color: #F5B12D;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
</div>
|
||
<div style="color: #00C7F2;font-size: 16px;margin-left: 13px">{{echartObj15.verygood}}%</div>
|
||
</div>
|
||
<div style="height:23%;display: flex;justify-content: center;align-items: center">
|
||
<div style="font-size: 14px;width: 58px;text-align: right">一般满意</div>
|
||
<div style="margin-left: 10px">
|
||
<svg-icon icon-class="smile" :style="echartObj15.good > 5 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.good > 15 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.good > 25 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.good > 35 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.good > 45 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.good > 55 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.good > 65 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.good > 75 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.good > 85 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.good > 95 ? 'color: #3CD495;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
</div>
|
||
<div style="color: #00C7F2;font-size: 16px;margin-left: 13px">{{echartObj15.good}}%</div>
|
||
</div>
|
||
<div style="height:23%;display: flex;justify-content: center;align-items: center">
|
||
<div style="font-size: 14px;width: 58px;text-align: right">不满意</div>
|
||
<div style="margin-left: 10px">
|
||
<svg-icon icon-class="smile" :style="echartObj15.bad > 5 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.bad > 15 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.bad > 25 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.bad > 35 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.bad > 45 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.bad > 55 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.bad > 65 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.bad > 75 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.bad > 85 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
<svg-icon icon-class="smile" :style="echartObj15.bad > 95 ? 'color: #3D7DFA;width:25px;height: 25px' : 'color: #35596B;width:25px;height: 25px'"/>
|
||
</div>
|
||
<div style="color: #00C7F2;font-size: 16px;margin-left: 13px">{{echartObj15.bad}}%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import echarts from "echarts";
|
||
import Vue from 'vue'
|
||
import Echarts from "@/components/echarts";
|
||
import { Progress,Divider } from 'ant-design-vue';
|
||
import SvgIcon from '@/components/svgIcon.vue';
|
||
Vue.use(Progress);
|
||
Vue.use(Divider);
|
||
import { fxjIndex } from "@/api/cultApi";
|
||
import {createOperationLog} from "@/api/api"
|
||
// 定义柱状图左侧图形元素
|
||
const leftRect = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
width: 16, //柱状图宽
|
||
zWidth: 8, //阴影折角宽
|
||
zHeight: 4 //阴影折角高
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const api = shape.api;
|
||
const xAxisPoint = api.coord([shape.xValue, 0]);
|
||
const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
|
||
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
|
||
const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
|
||
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
|
||
const p4 = [shape.x + shape.width / 2, shape.y];
|
||
|
||
ctx.moveTo(p0[0], p0[1]);
|
||
ctx.lineTo(p1[0], p1[1]);
|
||
ctx.lineTo(p2[0], p2[1]);
|
||
ctx.lineTo(p3[0], p3[1]);
|
||
ctx.lineTo(p4[0], p4[1]);
|
||
ctx.lineTo(p0[0], p0[1]);
|
||
ctx.closePath();
|
||
}
|
||
});
|
||
// 定义柱状图右侧以及顶部图形元素
|
||
const rightRect = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
width: 15,
|
||
zWidth: 12,
|
||
zHeight: 8
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const api = shape.api;
|
||
const xAxisPoint = api.coord([shape.xValue, 0]);
|
||
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
|
||
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
|
||
const p4 = [shape.x + shape.width / 2, shape.y];
|
||
const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
|
||
const p6 = [
|
||
shape.x + shape.width / 2 + shape.zWidth,
|
||
shape.y - shape.zHeight / 2
|
||
];
|
||
const p7 = [
|
||
shape.x - shape.width / 2 + shape.zWidth,
|
||
shape.y - shape.zHeight
|
||
];
|
||
ctx.moveTo(p4[0], p4[1]);
|
||
ctx.lineTo(p3[0], p3[1]);
|
||
ctx.lineTo(p5[0], p5[1]);
|
||
ctx.lineTo(p6[0], p6[1]);
|
||
ctx.lineTo(p4[0], p4[1]);
|
||
|
||
ctx.moveTo(p4[0], p4[1]);
|
||
ctx.lineTo(p6[0], p6[1]);
|
||
ctx.lineTo(p7[0], p7[1]);
|
||
ctx.lineTo(p1[0], p1[1]);
|
||
ctx.lineTo(p4[0], p4[1]);
|
||
ctx.closePath();
|
||
}
|
||
});
|
||
// 注册图形元素
|
||
echarts.graphic.registerShape('leftRect', leftRect);
|
||
echarts.graphic.registerShape('rightRect', rightRect);
|
||
export default {
|
||
data() {
|
||
let self = this
|
||
return {
|
||
echartObjKey: "echartObjKey",
|
||
echartObjKey1: "echartObjKey1",
|
||
echartObjKey3: "echartObjKey3",
|
||
echartObjKey6: "echartObjKey6",
|
||
echartObjKey7: "echartObjKey7",
|
||
echartObjKey8: "echartObjKey8",
|
||
/*退住原因分析*/
|
||
echartObj1: {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
right: '10',
|
||
top: 'center',
|
||
orient: 'vertical',
|
||
data: ['环境设施', '工作人员态度', '服务质量', '文娱活动', '其他'],
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
lineHeight: 18
|
||
},
|
||
formatter: function (name) {
|
||
let data = self.echartObj1.series[0].data
|
||
// console.log(data, '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})`
|
||
//name是名称，v是数值
|
||
}
|
||
},
|
||
color: ['#2B8EF3','#48E5E5','#3D7DFA','#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: [30, 90],
|
||
roseType: 'area',
|
||
top: 'middle',
|
||
left: -100,
|
||
label: {
|
||
show: false,
|
||
position: 'inside',
|
||
formatter: '{d}%',
|
||
},
|
||
data: [
|
||
{value: 10, name: '环境设施'},
|
||
{value: 5, name: '工作人员态度'},
|
||
{value: 15, name: '服务质量'},
|
||
{value: 25, name: '文娱活动'},
|
||
{value: 20, name: '其他'},
|
||
]
|
||
}
|
||
]
|
||
},
|
||
/*长者数据*/
|
||
echartObj2: {
|
||
title: {
|
||
show: true,
|
||
text: '长者年龄',
|
||
left: 'center',
|
||
textStyle: {
|
||
color: '#FFFFFf',
|
||
fontSize: 14,
|
||
}
|
||
},
|
||
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: "#fff",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: ['#1F7DAF']
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: [80,158,130,80,30,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)' },
|
||
]);
|
||
},
|
||
}
|
||
}
|
||
},
|
||
]
|
||
},
|
||
/*慢病统计*/
|
||
echartObj3: {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
right: '10',
|
||
top: 'center',
|
||
orient: 'vertical',
|
||
data: ['高血压', '糖尿病', '冠心病', '心肌梗塞', '慢性胃炎'],
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
lineHeight: 18
|
||
},
|
||
formatter: function (name) {
|
||
let data = self.echartObj3.series[0].data
|
||
// console.log(data, '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})`
|
||
//name是名称，v是数值
|
||
}
|
||
},
|
||
color: ['#2B8EF3','#48E5E5','#3D7DFA','#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: [30, 90],
|
||
roseType: 'area',
|
||
top: 'middle',
|
||
left: -100,
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '{c}人',
|
||
},
|
||
data: [
|
||
{value: 10, name: '高血压'},
|
||
{value: 5, name: '糖尿病'},
|
||
{value: 15, name: '冠心病'},
|
||
{value: 25, name: '心肌梗塞'},
|
||
{value: 20, name: '慢性胃炎'},
|
||
]
|
||
}
|
||
]
|
||
},
|
||
/*入住人数趋势分析*/
|
||
echartObj4: {
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 10,
|
||
}
|
||
},
|
||
data: ['2018年','2019年','2020年','2021年','2022年','2023年'],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {//y轴文字的配置
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: ['#1F7DAF']
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: [790,1056,1180,1298,1450,1760],
|
||
type: 'pictorialBar',
|
||
//同一系列的柱间距离
|
||
barCategoryGap:"-60%",
|
||
// 自定义svg 图标 (三角形的关)
|
||
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
|
||
z: 10,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 12
|
||
},
|
||
},
|
||
// 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)' },
|
||
]);
|
||
},
|
||
borderColor: '#206fde',
|
||
borderWhidh: 2,
|
||
}
|
||
},
|
||
},
|
||
]
|
||
},
|
||
/*能力评估*/
|
||
echartObj5: {
|
||
data: [{
|
||
name: '能力完好',
|
||
value: 537
|
||
},
|
||
{
|
||
name: '轻度失能',
|
||
value: 631
|
||
},
|
||
{
|
||
name: '中度失能',
|
||
value: 482
|
||
},
|
||
{
|
||
name: '重度失能',
|
||
value: 432
|
||
},
|
||
],
|
||
colors: ['#FFB200', '#1976E2', '#FF7B00', '#1976E2'],
|
||
unit: '单位(人)',
|
||
showValue: true
|
||
},
|
||
/*设备情况*/
|
||
echartObj6: {
|
||
color: ['#F5B12D','#18DFE8','#3D7DFA',],
|
||
series: [
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: ['55%', '76%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false,
|
||
fontSize: 20,
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: 10, name: '未处理' },
|
||
{ value: 20, name: '处理中' },
|
||
{ value: 70, name: '已处理' },
|
||
]
|
||
}
|
||
]
|
||
},
|
||
/*报警列表*/
|
||
echartObj7: [
|
||
{
|
||
date: "2023年7月24日",
|
||
address: "2楼202",
|
||
time: "9:21",
|
||
name: "张三",
|
||
warning: "血压异常",
|
||
},
|
||
{
|
||
date: "2023年7月24日",
|
||
address: "2楼202",
|
||
time: "9:21",
|
||
name: "张三",
|
||
warning: "心率异常",
|
||
},
|
||
{
|
||
date: "2023年7月24日",
|
||
address: "2楼202",
|
||
time: "9:21",
|
||
name: "张三",
|
||
warning: "呼吸异常",
|
||
},
|
||
{
|
||
date: "2023年7月24日",
|
||
address: "2楼202",
|
||
time: "9:21",
|
||
name: "张三",
|
||
warning: "设备离线",
|
||
},
|
||
{
|
||
date: "2023年7月24日",
|
||
address: "2楼202",
|
||
time: "9:21",
|
||
name: "张三",
|
||
warning: "血压异常",
|
||
},
|
||
{
|
||
date: "2023年7月24日",
|
||
address: "2楼202",
|
||
time: "9:21",
|
||
name: "张三",
|
||
warning: "血压异常",
|
||
},
|
||
{
|
||
date: "2023年7月24日",
|
||
address: "2楼202",
|
||
time: "9:21",
|
||
name: "张三",
|
||
warning: "血压异常",
|
||
},
|
||
{
|
||
date: "2023年7月24日",
|
||
address: "2楼202",
|
||
time: "9:21",
|
||
name: "张三",
|
||
warning: "血压异常",
|
||
},
|
||
],
|
||
/*各机构床位TOP5*/
|
||
echartObj8: {
|
||
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: '#1B7EF2'
|
||
color: () => {
|
||
return new 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: '#1B7EF2'
|
||
color: () => {
|
||
return new 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: '#1B7EF2'
|
||
color: () => {
|
||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#48E5E5' },
|
||
{ offset: 1, color: 'rgba(72,228,229,0.30)' },
|
||
]);
|
||
}
|
||
}
|
||
},
|
||
},
|
||
]
|
||
},
|
||
/*各机构入住率TOP5*/
|
||
echartObj9: {
|
||
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",
|
||
},
|
||
formatter: '{value} %'
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: ['#1F7DAF']
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: [
|
||
{name: '深业颐居', value: 85} ,
|
||
{name: '深业龙投', value: 50} ,
|
||
{name: '深业世纪山谷', value: 40} ,
|
||
],
|
||
type: 'bar',
|
||
barWidth: 28,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 10
|
||
},
|
||
formatter: function (params) {
|
||
return params.value + '%'
|
||
},
|
||
},
|
||
// color: '#1B7EF2'
|
||
color: () => {
|
||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#1976E2' },
|
||
{ offset: 1, color: 'rgba(25,118,226,0.30)' },
|
||
]);
|
||
},
|
||
}
|
||
},
|
||
}
|
||
]
|
||
},
|
||
/*收入支出趋势*/
|
||
echartObj10: {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['收入', '支出'],
|
||
show: true,
|
||
bottom: 10,
|
||
icon: 'roundRect',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
lineHeight: 10
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['2022.08', '2022.09', '2022.10', '2022.11', '2022.12','2023.01'],
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 10,
|
||
}
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {//y轴文字的配置
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: ['#1F7DAF']
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '收入',
|
||
type: 'line',
|
||
data: [700, 1000, 1000, 1500, 1300, 800],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 10
|
||
}
|
||
},
|
||
// color: '#1B7EF2'
|
||
color: '#1890FF',
|
||
}
|
||
},
|
||
},
|
||
{
|
||
name: '支出',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: [200, 1000, 1500, 1200, 1600, 1000],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 10
|
||
}
|
||
},
|
||
// color: '#1B7EF2'
|
||
color: '#41E4BB',
|
||
}
|
||
},
|
||
}
|
||
]
|
||
},
|
||
/*设备情况*/
|
||
echartObj11: {
|
||
legend: {
|
||
show: false,
|
||
right: '0',
|
||
top: 'center',
|
||
orient: 'vertical',
|
||
data: ['设备', '护理材料', '电', '水', '食材', '天然气', '其他'],
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
lineHeight: 18
|
||
},
|
||
formatter: function (name) {
|
||
let data = self.echartObj11.series[0].data
|
||
// console.log(data, '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})`
|
||
//name是名称，v是数值
|
||
}
|
||
},
|
||
color: ['#2B8EF3','#48E5E5','#3D7DFA','#68A400','#F5B12D','#D599FD','#EA8533'],
|
||
series: [
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: ['50%', '76%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false,
|
||
fontSize: 20,
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: 35, name: '设备' },
|
||
{ value: 15, name: '护理材料' },
|
||
{ value: 15, name: '电' },
|
||
{ value: 11, name: '水' },
|
||
{ value: 10, name: '食材' },
|
||
{ value: 9, name: '天然气' },
|
||
{ value: 5, name: '其他' },
|
||
]
|
||
}
|
||
]
|
||
},
|
||
/*各机构床位TOP5*/
|
||
echartObj12: {
|
||
legend: {
|
||
show: true,
|
||
bottom: 10,
|
||
data: ['总人数','医生','护理人员','志愿者'],
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
lineHeight: 10
|
||
},
|
||
},
|
||
color: ['#2B8EF3','#F5B12D','#48E5E5','#68A400'],
|
||
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: [228,696,317],
|
||
type: 'bar',
|
||
barWidth: 10,
|
||
barGap:'100%',
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 10
|
||
},
|
||
},
|
||
// color: '#1B7EF2'
|
||
color: () => {
|
||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#1976E2' },
|
||
{ offset: 1, color: 'rgba(25,118,226,0.30)' },
|
||
]);
|
||
},
|
||
}
|
||
},
|
||
},
|
||
{
|
||
name: '医生',
|
||
data: [23,433,45],
|
||
type: 'bar',
|
||
barGap:'100%',
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 10
|
||
},
|
||
},
|
||
// color: '#1B7EF2'
|
||
color: () => {
|
||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#FF7B00' },
|
||
{ offset: 1, color: 'rgba(255,123,0,0.30)' },
|
||
]);
|
||
},
|
||
}
|
||
},
|
||
},
|
||
{
|
||
name: '护理人员',
|
||
data: [49,78,96],
|
||
type: 'bar',
|
||
barGap:'100%',
|
||
barWidth: 10,
|
||
//同一系列的柱间距离
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 12
|
||
},
|
||
},
|
||
// color: '#1B7EF2'
|
||
color: () => {
|
||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#48E5E5' },
|
||
{ offset: 1, color: 'rgba(72,228,229,0.30)' },
|
||
]);
|
||
}
|
||
}
|
||
},
|
||
},
|
||
/*志愿者*/
|
||
{
|
||
name: '志愿者',
|
||
data: [156,185,176],
|
||
type: 'bar',
|
||
barGap:'100%',
|
||
barWidth: 10,
|
||
//同一系列的柱间距离
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 12
|
||
},
|
||
},
|
||
// color: '#1B7EF2'
|
||
color: () => {
|
||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#3CD495' },
|
||
{ offset: 1, color: 'rgba(60,212,149,0.50)' },
|
||
]);
|
||
}
|
||
}
|
||
},
|
||
},
|
||
]
|
||
},
|
||
/*培训课程能力分析*/
|
||
echartObj13: {
|
||
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: '65%', // 坐标轴半径占可显示区域的比例
|
||
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 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 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)' }
|
||
]
|
||
)
|
||
},
|
||
}
|
||
]
|
||
},
|
||
/*活动占比分析*/
|
||
echartObj14: {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
right: '10',
|
||
top: 'center',
|
||
orient: 'vertical',
|
||
data: ['文化类', '体育类', '艺术类','分享类', '教育类'],
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
lineHeight: 18
|
||
},
|
||
formatter: function (name) {
|
||
let data = self.echartObj14.series[0].data
|
||
// console.log(data, '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})`
|
||
//name是名称，v是数值
|
||
}
|
||
},
|
||
color: ['#2B8EF3','#48E5E5','#3D7DFA','#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: [30, 90],
|
||
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: '教育类'},
|
||
]
|
||
}
|
||
]
|
||
},
|
||
/*客户满意度调查*/
|
||
echartObj15: {
|
||
verygood: 70,
|
||
good: 20,
|
||
bad: 10
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.param = {
|
||
startYear: "",
|
||
endYear: "",
|
||
};
|
||
this.init();
|
||
},
|
||
components: {
|
||
Echarts,
|
||
SvgIcon,
|
||
},
|
||
methods: {
|
||
init() {
|
||
this.getData();
|
||
},
|
||
search() {
|
||
this.init();
|
||
},
|
||
getData() {
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
/deep/ .ant-progress-circle .ant-progress-text {
|
||
color: #FFFFFF;
|
||
font-size: 20px;
|
||
}
|
||
/deep/ .ant-progress-circle-trail{
|
||
stroke:#334D60 !important;
|
||
}
|
||
.shebei{
|
||
background-image: url(../../assets/img/bigScreen/cyclebg.png);
|
||
background-repeat: no-repeat;
|
||
width: 175px;
|
||
height: 175px;
|
||
background-size: 100% 100%;
|
||
.echarts {
|
||
width: 120%;
|
||
height: 120%;
|
||
}
|
||
}
|
||
.block_bg{
|
||
background-image: url(../../assets/img/bigScreen/block-bg.png);
|
||
background-repeat: no-repeat;
|
||
width: 71px;
|
||
height: 80px;
|
||
background-size: 100% 100%;
|
||
margin-left: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
.table_title_bg{
|
||
width:98%;
|
||
height: 34px;
|
||
line-height: 34px;
|
||
font-size:14px;
|
||
color: #00B3DB;
|
||
display: flex;
|
||
border-bottom: 1px solid;
|
||
border-image: linear-gradient(270deg, rgba(31,125,175,0.00) 0%, #1F7DAF 100%) 0 0 1 0
|
||
}
|
||
.table_row_bg{
|
||
width:98%;
|
||
height: 34px;
|
||
line-height: 34px;
|
||
font-size:14px;
|
||
display: flex;
|
||
background: linear-gradient(270deg, rgba(2,61,89,0.00) 0%, #023D59 100%);
|
||
|
||
/* 渐变/列表/描边 */
|
||
border: 1px solid ;
|
||
border-image: linear-gradient(270deg, rgba(31,125,175,0.00) 0%, #1F7DAF 100%) 1;
|
||
border-right: none;
|
||
}
|
||
</style>
|