500 lines
12 KiB
Vue
500 lines
12 KiB
Vue
<template>
|
|
<div class="app-container home">
|
|
<div class="app">
|
|
<div class="leftheader">
|
|
<div class="content">
|
|
<img src="../assets/system/person.png" alt="" />
|
|
<div class="words">本月新增患者数</div>
|
|
<div class="num">{{ list.thisMonthPatient }}</div>
|
|
</div>
|
|
<div class="content">
|
|
<img src="../assets/system/shenghuo.png" alt="" />
|
|
<div class="words">本月出院患者数</div>
|
|
<div class="num">{{ list.thisMonthDischargePatient }}</div>
|
|
</div>
|
|
<div class="content">
|
|
<img src="../assets/system/fugai.png" alt="" />
|
|
<div class="words">本月签约患者数</div>
|
|
<div class="num">{{ list.signPatientCount }}</div>
|
|
</div>
|
|
<div class="content">
|
|
<img src="../assets/system/phone.png" alt="" />
|
|
<div class="words">本月随访人次</div>
|
|
<div class="num">{{ list.nodeCount }}</div>
|
|
</div>
|
|
<div class="content">
|
|
<img src="../assets/system/jiankang.png" alt="" />
|
|
<div class="words">服务总人次</div>
|
|
<div class="num">{{ list.patientSignCount }}</div>
|
|
</div>
|
|
<div class="content">
|
|
<img src="../assets/system/count.png" alt="" />
|
|
<div class="words">服务中患者数</div>
|
|
<div class="num">{{ list.patientSignServiceCount }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="appright">
|
|
<div class="wait">待办任务</div>
|
|
<div class="all" v-for="(item, index) in taskSituationlist" :key="index">
|
|
<div @click="goback(item)">
|
|
<el-tooltip class="" effect="dark" :content="item.name == '人工审核' ? '待审核数' : '待随访数'" placement="top">
|
|
<div class="person">
|
|
<span class="">{{ item.name }}</span>
|
|
<el-badge :value="item.count" class="item"></el-badge>
|
|
<i class="el-icon-arrow-right"></i>
|
|
</div>
|
|
</el-tooltip>
|
|
<el-tooltip class="" effect="dark" :content="item.name == '人工审核'
|
|
? '本月已审核数/本月应审核数'
|
|
: '本月已随访数/本月应随访数'
|
|
" placement="top">
|
|
<div style="display: flex">
|
|
<el-progress :percentage="item.content"></el-progress>
|
|
<span style="float: right; margin: 12px 19px 0 10px">{{ item.allCount - item.count }}/{{ item.allCount
|
|
}}</span>
|
|
</div>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="appbottom">
|
|
<div class="appbottomone">
|
|
<div class="word">本月签约患者情况</div>
|
|
<div id="main1" style="height: 80%" v-if="countydata"></div>
|
|
<el-empty description="暂无" style="width: 100%" v-else></el-empty>
|
|
</div>
|
|
<div class="appbottomtwo">
|
|
<div class="word">服务方式</div>
|
|
<div id="main" style="height: 80%" v-if="arrlist"></div>
|
|
<el-empty description="暂无" style="width: 100%" v-else></el-empty>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
topStatistics,
|
|
signPatientCount,
|
|
serviceModeStatistics,
|
|
taskSituation,
|
|
} from "@/api/system/index";
|
|
import * as echarts from "echarts";
|
|
|
|
export default {
|
|
name: "index",
|
|
data() {
|
|
return {
|
|
// 版本号
|
|
version: "0.0.1",
|
|
list: {},
|
|
namelist: [],
|
|
taskSituationlist: [],
|
|
countydata: [],
|
|
arrlist: [],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getlist();
|
|
this.infolist();
|
|
this.info();
|
|
},
|
|
methods: {
|
|
goback(item) {
|
|
if (item.name == "人工审核") {
|
|
this.$router.push({
|
|
path: "/task/manualReview",
|
|
});
|
|
} else {
|
|
this.$router.push({
|
|
path: "/task/followup",
|
|
});
|
|
}
|
|
},
|
|
// 上部分
|
|
infolist() {
|
|
topStatistics().then((res) => {
|
|
this.list = res.data;
|
|
});
|
|
taskSituation().then((res) => {
|
|
this.taskSituationlist = res.data;
|
|
this.taskSituationlist.forEach((e) => {
|
|
e.content = Math.ceil((e.count / e.allCount) * 100);
|
|
});
|
|
});
|
|
},
|
|
getlist() {
|
|
signPatientCount().then((res) => {
|
|
// x轴
|
|
res.data.forEach((e) => {
|
|
this.countydata.push(e.time);
|
|
});
|
|
// 当月新增患者数量
|
|
var countydatay = [];
|
|
res.data.forEach((e) => {
|
|
countydatay.push(e.patientCount);
|
|
});
|
|
// 当月签约率
|
|
var proportionlist = [];
|
|
res.data.forEach((e) => {
|
|
e.proportion = e.proportion * 100;
|
|
proportionlist.push(e.proportion);
|
|
});
|
|
// 签约数
|
|
var signPatientCountlist = [];
|
|
res.data.forEach((e) => {
|
|
signPatientCountlist.push(e.signPatientCount);
|
|
});
|
|
// return
|
|
var chartDoms = document.getElementById("main1");
|
|
var myChart1 = echarts.init(chartDoms);
|
|
var optionone;
|
|
optionone = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "cross",
|
|
crossStyle: {
|
|
color: "#999",
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
data: ["当月新增患者数量", "签约数", "当月签约率"],
|
|
},
|
|
color: ["#2BBD2E", "#68B4FF", "orange"],
|
|
xAxis: [
|
|
{
|
|
axisLabel: {
|
|
interval: 0,
|
|
// show: true,
|
|
// rotate: 35,//35度角倾斜显示
|
|
textStyle: {
|
|
color: "#000",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
type: "category",
|
|
data: this.countydata,
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
name: "当月新增患者数量",
|
|
axisLabel: {
|
|
formatter: "{value}",
|
|
},
|
|
},
|
|
{
|
|
type: "value",
|
|
name: "当月签约率",
|
|
min: 0,
|
|
max: 100,
|
|
interval: 20,
|
|
axisLabel: {
|
|
formatter: "{value}%",
|
|
},
|
|
},
|
|
],
|
|
tooltip: {
|
|
trigger: "axis",
|
|
formatter: (params) => {
|
|
let text = "";
|
|
params.map((item) => {
|
|
if (item.seriesName == "当月签约率") {
|
|
text += item.seriesName + " : " + item.value + "%" + "<br/>";
|
|
} else {
|
|
text += item.seriesName + " : " + item.value + "<br/>";
|
|
}
|
|
});
|
|
return text;
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "当月新增患者数量",
|
|
type: "bar",
|
|
data: countydatay,
|
|
barWidth: "20%",
|
|
},
|
|
{
|
|
name: "签约数",
|
|
type: "bar",
|
|
data: signPatientCountlist,
|
|
barWidth: "20%",
|
|
},
|
|
{
|
|
name: "当月签约率",
|
|
type: "line",
|
|
yAxisIndex: 1,
|
|
data: proportionlist,
|
|
},
|
|
],
|
|
};
|
|
optionone && myChart1.setOption(optionone);
|
|
});
|
|
},
|
|
info() {
|
|
serviceModeStatistics().then((res) => {
|
|
this.arrlist = [];
|
|
res.data.forEach((element) => {
|
|
this.arrlist.push({
|
|
value: element.count, //将数组的conut值赋给value
|
|
name: element.name, //将数组的name值赋给name
|
|
});
|
|
var chartDom = document.getElementById("main");
|
|
var myChart = echarts.init(chartDom);
|
|
var option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
},
|
|
legend: {
|
|
top: "2%",
|
|
right: "2%",
|
|
left: "center",
|
|
},
|
|
color: ["#91ED93", "#68B4FF", "#3363FF", "orange"],
|
|
series: [
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
radius: ["40%", "70%"],
|
|
data: this.arrlist,
|
|
label: {
|
|
show: true,
|
|
formatter: "{b}:{c}", // 设置标签显示格式为 "名称： 百分比"
|
|
position: "outside", // 将标签放置在扇区外部
|
|
},
|
|
|
|
labelLine: {
|
|
show: true,
|
|
length2: 30, // 设置线的长度
|
|
maxSurfaceAngle: 80, // 设置线的角度范围
|
|
},
|
|
},
|
|
{
|
|
type: "pie",
|
|
radius: ["40%", "70%"],
|
|
data: this.arrlist,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
formatter: "{d}%", // 设置标签显示格式为 "名称： 百分比"
|
|
position: "inside", // 将标签放置在扇区外部
|
|
},
|
|
},
|
|
],
|
|
};
|
|
option && myChart.setOption(option);
|
|
});
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.app-container {
|
|
background: #f1f3f5;
|
|
width: 100%;
|
|
padding: 20px 20px 20px 20px;
|
|
}
|
|
|
|
.app {
|
|
height: 150px;
|
|
display: flex;
|
|
|
|
.content {
|
|
width: 20%;
|
|
height: 150px;
|
|
border-radius: 5px;
|
|
background: #fff;
|
|
position: relative;
|
|
margin: 0 15px 15px 0;
|
|
|
|
.words {
|
|
position: absolute;
|
|
top: 60px;
|
|
left: 15px;
|
|
}
|
|
|
|
.num {
|
|
position: absolute;
|
|
top: 90px;
|
|
left: 15px;
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
img {
|
|
width: 25px;
|
|
height: 25px;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.leftheader {
|
|
width: 83%;
|
|
display: flex;
|
|
}
|
|
|
|
.appbottom {
|
|
width: 82%;
|
|
height: calc(100vh - 275px);
|
|
// background: red;
|
|
display: flex;
|
|
// justify-content: space-between;
|
|
// margin: 10px 10px 0 0;
|
|
|
|
.appbottomtwo {
|
|
width: 50%;
|
|
// margin: 15px 15px 0 0;
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
margin: 15px 0 0 0;
|
|
|
|
.word {
|
|
padding: 20px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.appbottomone {
|
|
width: 50%;
|
|
margin: 15px 15px 0 0;
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
|
|
.word {
|
|
padding: 20px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.appright {
|
|
width: 17%;
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
height: 300px;
|
|
|
|
// height: calc(100vh - 450px);
|
|
.wait {
|
|
// padding: 20px;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
padding: 20px 20px 7px 20px;
|
|
}
|
|
|
|
.all {
|
|
cursor: pointer;
|
|
padding: 0 0 20px 0;
|
|
}
|
|
|
|
.person {
|
|
padding: 20px 20px 0 20px;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.el-icon-arrow-right {
|
|
float: right;
|
|
}
|
|
|
|
::v-deep .el-progress__text {
|
|
font-size: 12px !important;
|
|
// flex: 0.5;
|
|
text-align: right;
|
|
display: none;
|
|
}
|
|
|
|
::v-deep .el-progress {
|
|
margin: 13px 0 0 20px;
|
|
width: 80%;
|
|
}
|
|
}
|
|
|
|
.home {
|
|
blockquote {
|
|
padding: 10px 20px;
|
|
margin: 0 0 20px;
|
|
font-size: 17.5px;
|
|
border-left: 5px solid #eee;
|
|
}
|
|
|
|
hr {
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
border: 0;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.col-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
font-family: "open sans",
|
|
"Helvetica Neue",
|
|
Helvetica,
|
|
Arial,
|
|
sans-serif;
|
|
font-size: 13px;
|
|
color: #676a6c;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
}
|
|
|
|
h4 {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 10px;
|
|
font-size: 26px;
|
|
font-weight: 100;
|
|
}
|
|
|
|
p {
|
|
margin-top: 10px;
|
|
|
|
b {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.update-log {
|
|
ol {
|
|
display: block;
|
|
list-style-type: decimal;
|
|
margin-block-start: 1em;
|
|
margin-block-end: 1em;
|
|
margin-inline-start: 0;
|
|
margin-inline-end: 0;
|
|
padding-inline-start: 40px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|