修改
This commit is contained in:
闫晓茹
parent
f9afe11f97
commit
411d377a40
11
src/api/system/index.js
Normal file
11
src/api/system/index.js
Normal file
@ -0,0 +1,11 @@
|
||||
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询
|
||||
export function topStatistics(query) {
|
||||
return request({
|
||||
url: '/system/homePage/topStatistics',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
BIN
src/assets/system/count.png
Normal file
BIN
src/assets/system/count.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
src/assets/system/fugai.png
Normal file
BIN
src/assets/system/fugai.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
src/assets/system/person.png
Normal file
BIN
src/assets/system/person.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
src/assets/system/phone.png
Normal file
BIN
src/assets/system/phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
@ -1,32 +1,371 @@
|
||||
<template>
|
||||
<div class="app-container home">
|
||||
<el-row :gutter="20">
|
||||
<el-col :sm="24" :lg="12" style="padding-left: 20px">
|
||||
<h2>新医路院后患者管理平台</h2>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<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/phone.png" alt="" />
|
||||
<div class="words">本月签约患者数</div>
|
||||
<div class="num">{{ list.signPatientCount }}</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<img src="../assets/system/fugai.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">
|
||||
<div class="person" @click="goback">
|
||||
人工审核
|
||||
<el-badge :value="139" class="item"></el-badge>
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
<div style="display: flex" @click="goback">
|
||||
<el-progress :percentage="50"></el-progress>
|
||||
<span style="float: right; margin: 12px 19px 0 10px">10/20</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="all">
|
||||
<div class="person" @click="gofollowup">
|
||||
人工随访
|
||||
<el-badge :value="22" class="item"></el-badge>
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
<div style="display: flex" @click="gofollowup">
|
||||
<el-progress :percentage="50"></el-progress>
|
||||
<span style="float: right; margin: 12px 19px 0 10px">10/20</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="appbottom">
|
||||
<div class="appbottomone">
|
||||
<div class="word">随访覆盖情况</div>
|
||||
<div id="main1" style="height: 80%"></div>
|
||||
</div>
|
||||
<div class="appbottomtwo">
|
||||
<div class="word">服务方式</div>
|
||||
<div id="main" style="height: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { topStatistics } from "@/api/system/index";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
// 版本号
|
||||
version: "0.0.1",
|
||||
list: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.infolist();
|
||||
this.info();
|
||||
this.getlist();
|
||||
},
|
||||
methods: {
|
||||
goback(){
|
||||
this.$router.push({
|
||||
path: "/task/manualReview",
|
||||
|
||||
});
|
||||
},
|
||||
gofollowup(){
|
||||
this.$router.push({
|
||||
path: "/task/followup",
|
||||
|
||||
});
|
||||
},
|
||||
// 上部分
|
||||
infolist() {
|
||||
topStatistics().then((res) => {
|
||||
console.log(res, "res");
|
||||
this.list = res.data;
|
||||
});
|
||||
},
|
||||
goTarget(href) {
|
||||
window.open(href, "_blank");
|
||||
},
|
||||
getlist() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var chartDoms = document.getElementById("main1");
|
||||
var myChart1 = echarts.init(chartDoms);
|
||||
var optionone;
|
||||
optionone = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
crossStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
},
|
||||
// toolbox: {
|
||||
// feature: {
|
||||
// dataView: { show: true, readOnly: false },
|
||||
// magicType: { show: true, type: ["line", "bar"] },
|
||||
// restore: { show: true },
|
||||
// // saveAsImage: { show: true },
|
||||
// },
|
||||
// },
|
||||
legend: {
|
||||
data: ["Evaporation", "Precipitation", "Temperature"],
|
||||
},
|
||||
color: ["#91ED93", "#68B4FF"],
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "Precipitation",
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
formatter: "{value} ml",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
name: "Temperature",
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
axisLabel: {
|
||||
formatter: "{value} °C",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "Evaporation",
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + " ml";
|
||||
},
|
||||
},
|
||||
data: [
|
||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
|
||||
3.3,
|
||||
],
|
||||
},
|
||||
// {
|
||||
// name: "Precipitation",
|
||||
// type: "bar",
|
||||
// tooltip: {
|
||||
// valueFormatter: function (value) {
|
||||
// return value + " ml";
|
||||
// },
|
||||
// },
|
||||
// data: [
|
||||
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
|
||||
// 2.3,
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
name: "Temperature",
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + " °C";
|
||||
},
|
||||
},
|
||||
data: [
|
||||
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
optionone && myChart1.setOption(optionone);
|
||||
},
|
||||
info() {
|
||||
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"],
|
||||
series: [
|
||||
{
|
||||
name: "Access From",
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
// center: ['50%', '70%'],
|
||||
// adjust the start and end angle
|
||||
// startAngle: 180,
|
||||
// endAngle: 360,
|
||||
data: [
|
||||
{ value: 1048, name: "AI电话" },
|
||||
{ value: 735, name: "短信" },
|
||||
{ value: 580, name: "微信" },
|
||||
{ value: 484, name: "人工随访" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-container {
|
||||
background: #f1f3f5;
|
||||
// display: flex;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
}
|
||||
.app {
|
||||
// width: 99%;
|
||||
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: 16%;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
height: calc(100vh - 400px);
|
||||
.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;
|
||||
}
|
||||
// .number{
|
||||
// display: inline-block;
|
||||
// width: 22px;
|
||||
// height: 22px;
|
||||
// line-height: 22px;
|
||||
// text-align: center;
|
||||
// border-radius: 50%;
|
||||
// background: red;
|
||||
// color: white;
|
||||
// }
|
||||
.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;
|
||||
@ -53,6 +392,7 @@ export default {
|
||||
font-size: 13px;
|
||||
color: #676a6c;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user