ccsens_zhengzhichuan
/
acupuncture
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页同样样式调整

newMaster
1747191978@qq.com 4 months ago
parent
d034e4b676
commit
e561ac22b2
4 changed files with 952 additions and 931 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 164
      acupuncture-前台/src/views/indexCom/XGZL.vue
  2. 161
      acupuncture-前台/src/views/indexCom/follow.vue
  3. 207
      acupuncture-前台/src/views/indexCom/index.js
  4. 165
      acupuncture-前台/src/views/indexCom/patient.vue

164
acupuncture-前台/src/views/indexCom/XGZL.vue
View File

@ -9,10 +9,10 @@
<div class="dis">
<div class="dian-box dis">
<div class="dian-box dis">
<span class="dian" style="background: #91CC75"></span>
<span class="dian" style="background: #c6a268"></span>
中西医结合
</div>
<span class="dian" style="background: #5470C6"></span>
<span class="dian" style="background: #d8d8d8"></span>
纯中医
</div>
</div>
@ -52,19 +52,19 @@
<div class="dis">
<div class="dian-box dis">
<div class="dian-box dis">
<span class="dian" style="background: #5C7BD9"></span>
<span class="dian" style="background: #c6a268"></span>
治愈
</div>
<div class="dian-box dis">
<span class="dian" style="background: #91CC75"></span>
<span class="dian" style="background: #906c4a"></span>
显效
</div>
<div class="dian-box dis">
<span class="dian" style="background: #FAC858"></span>
<span class="dian" style="background: #70483e"></span>
好转
</div>
<div class="dian-box dis">
<span class="dian" style="background: #EE6666"></span>
<span class="dian" style="background: #c7bdb1"></span>
无效
</div>
</div>
@ -79,8 +79,7 @@
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">诊疗费用分布</span>
<div class="dis">
</div>
<div class="dis"></div>
</div>
<div style="height: 300px" v-loading="loading">
<div id="cost" style="width: 100%"></div>
@ -139,19 +138,17 @@
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import {
zlType
} from "@/api/indexCom.js";
import {
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import { zlType } from "@/api/indexCom.js";
import {
healTypeEcharts,
diseaseMethodEcharts,
effectEcharts,
costEcharts
} from "./index";
export default {
costEcharts,
} from "./index";
export default {
name: "Post",
props: ["title"],
mixins: [resize],
@ -169,11 +166,11 @@
effectValue: null, // 治疗效果
costValue: null, //治疗效果
effectObj: {
"zy": "治愈", //治愈
"xx": "显效", //显效
"hz": "好转", //好转
"wx": "无效" //无效
}
zy: "治愈", //治愈
xx: "显效", //显效
hz: "好转", //好转
wx: "无效", //无效
},
};
},
created() {
@ -190,15 +187,10 @@
async getData() {
try {
await zlType(this.queryParams).then((res) => {
const {
bzfffb,
bzxwfb,
zlfy,
zllxtj,
zlxwfb
} = res.data;
const { bzfffb, bzxwfb, zlfy, zllxtj, zlxwfb } = res.data;
//治疗
this.healTypeValue = [{
this.healTypeValue = [
{
value: zllxtj?.zxyjh || 0,
name: "中西医结合",
},
@ -206,7 +198,7 @@
value: zllxtj?.czy || 0,
name: "纯中医",
},
]
];
this.handleHealType();
// 病种方法
// let diseaseMethod = []
@ -220,37 +212,43 @@
// this.handleDiseaseMethod()
// 治疗效果
this.effectValue = [{
name: '治愈',
value: zlxwfb?.zy || 0
this.effectValue = [
{
name: "治愈",
value: zlxwfb?.zy || 0,
},
{
name: '显效',
value: zlxwfb?.xx || 0
name: "显效",
value: zlxwfb?.xx || 0,
},
{
name: '好转',
value: zlxwfb?.hz || 0
name: "好转",
value: zlxwfb?.hz || 0,
},
{
name: '无效',
value: zlxwfb?.wx || 0
}
]
this.handleEffect()
name: "无效",
value: zlxwfb?.wx || 0,
},
];
this.handleEffect();
// 治疗费用
this.costValue = [zlfy.score1, zlfy.score2, zlfy.score3, zlfy.score4, zlfy.score5]
this.handleCost()
this.costValue = [
zlfy.score1,
zlfy.score2,
zlfy.score3,
zlfy.score4,
zlfy.score5,
];
this.handleCost();
this.loading = false;
});
} catch (e) {
console.log('治疗类型', e)
console.log("治疗类型", e);
}
},
// 治疗类型
handleHealType() {
healTypeEcharts.series[0].data = this.healTypeValue
healTypeEcharts.series[0].data = this.healTypeValue;
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById("healType"), null, {
height: 300,
@ -264,9 +262,13 @@
handleDiseaseMethod() {
// diseaseMethodEcharts.series[0].data = this.diseaseMethod
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById("diseaseMethod"), null, {
var myChart = echarts.init(
document.getElementById("diseaseMethod"),
null,
{
height: 300,
});
}
);
myChart.setOption(diseaseMethodEcharts, true);
myChart.resize();
window.onresize = myChart.resize;
@ -274,7 +276,7 @@
},
// 治疗效果
handleEffect() {
effectEcharts.series[0].data = this.effectValue
effectEcharts.series[0].data = this.effectValue;
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById("effect"), null, {
height: 300,
@ -286,7 +288,7 @@
},
// 治疗费用
handleCost() {
costEcharts.series[0].data = this.costValue
costEcharts.series[0].data = this.costValue;
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById("cost"), null, {
height: 300,
@ -309,78 +311,78 @@
getRenew() {
this.handleHealType();
this.handleEffect();
this.handleCost()
this.handleCost();
},
},
};
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
>>>.el-card__body {
>>> .el-card__body {
padding: 10px 0 !important;
}
}
.dis {
.dis {
display: flex;
}
}
.header-title {
.header-title {
font-size: 18px;
}
}
.title-box {
.title-box {
padding: 10px 20px;
border-bottom: 1px solid #dfe6ec;
}
}
.dian-box {
.dian-box {
align-items: center;
}
}
.dian {
.dian {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 0 10px;
}
}
.title-box {
.title-box {
justify-content: space-between;
}
}
.>>>.el-radio--small.is-bordered {
. >>> .el-radio--small.is-bordered {
margin-right: 20px !important;
margin-left: 0 !important;
}
}
>>>.el-radio__input {
>>> .el-radio__input {
display: none;
}
}
>>>.el-radio__label {
>>> .el-radio__label {
padding-left: 5px;
}
}
.app-container {
.app-container {
padding: 0;
display: flex;
justify-content: space-between;
}
}
.title {
.title {
display: flex;
align-items: center;
font-size: 20px;
font-weight: 600;
}
}
.title-bor {
.title-bor {
display: inline-block;
height: 20px;
width: 6px;
background: #4f8bff;
margin-right: 10px;
border-radius: 8px;
}
}
</style>

161
acupuncture-前台/src/views/indexCom/follow.vue
View File

@ -2,7 +2,7 @@
<div>
<div class="app-container">
<div class="dis" style="width: 100%">
<div style="flex: 1;margin-right: 20px;">
<div style="flex: 1; margin-right: 20px">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">随访队列分布</span>
@ -14,7 +14,7 @@
</div>
</el-card>
</div>
<div style="flex: 1;">
<div style="flex: 1">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">失访原因分布</span>
@ -32,18 +32,12 @@
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import {
sffb,
sftj
} from "@/api/indexCom.js";
import {
followEcharts,
lossFollowEcharts
} from "./index";
export default {
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import { sffb, sftj } from "@/api/indexCom.js";
import { followEcharts, lossFollowEcharts } from "./index";
export default {
name: "Post",
props: ["title"],
mixins: [resize],
@ -73,41 +67,80 @@
//患者信息
async getData() {
try {
this.followValue = {}
this.followValue = {};
await sffb(this.queryParams).then((res) => {
res.data.forEach(i => {
let data = [i.dsf, i.ljsf, i.cqsf, i.zc]
this.followValue[i.queueName] = data
})
this.handleFollow()
res.data.forEach((i) => {
let data = [i.dsf, i.ljsf, i.cqsf, i.zc];
this.followValue[i.queueName] = data;
});
this.handleFollow();
});
await sftj(this.queryParams).then((res) => {
this.lossFollowValue = res.data
this.handleLossFollow()
this.lossFollowValue = res.data;
this.handleLossFollow();
});
this.loading = false;
} catch (e) {
console.log('随访', e)
console.log("随访", e);
}
},
// 队列
handleFollow() {
followEcharts.series = []
followEcharts.series = [];
let colorArr = [
"#C7BDB1",
"#C6A268",
"#906C4A",
"#70483E",
"#582518",
"#C7BDB1",
"#C6A268",
"#906C4A",
"#70483E",
"#582518",
"#C7BDB1",
"#C6A268",
"#906C4A",
"#70483E",
"#582518",
"#C7BDB1",
"#C6A268",
"#906C4A",
"#70483E",
"#582518",
"#C7BDB1",
"#C6A268",
"#906C4A",
"#70483E",
"#582518",
"#C7BDB1",
"#C6A268",
"#906C4A",
"#70483E",
"#582518",
"#C7BDB1",
"#C6A268",
"#906C4A",
"#70483E",
"#582518",
"#C7BDB1",
"#C6A268",
"#906C4A",
"#70483E",
"#582518",
];
let index = 0;
for (let key in this.followValue) {
let series = {
name: key,
data: this.followValue[key],
type: "bar",
barMaxWidth: 24, //柱图宽度
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
},
},
}
followEcharts.series.push(series)
color: colorArr[index],
};
followEcharts.series.push(series);
index++;
}
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById("follow"), null, {
@ -127,9 +160,13 @@
return item.reason;
});
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById("lossFollow"), null, {
var myChart = echarts.init(
document.getElementById("lossFollow"),
null,
{
height: 300,
});
}
);
myChart.setOption(lossFollowEcharts, true);
myChart.resize();
window.onresize = myChart.resize;
@ -147,78 +184,78 @@
// 重新渲染图标
getRenew() {
this.handleFollow();
this.handleLossFollow()
this.handleLossFollow();
},
},
};
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
>>>.el-card__body {
>>> .el-card__body {
padding: 10px 0 !important;
}
}
.dis {
.dis {
display: flex;
}
}
.header-title {
.header-title {
font-size: 18px;
}
}
.title-box {
.title-box {
padding: 10px 20px;
border-bottom: 1px solid #dfe6ec;
}
}
.dian-box {
.dian-box {
align-items: center;
}
}
.dian {
.dian {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 0 10px;
}
}
.title-box {
.title-box {
justify-content: space-between;
}
}
.>>>.el-radio--small.is-bordered {
. >>> .el-radio--small.is-bordered {
margin-right: 20px !important;
margin-left: 0 !important;
}
}
>>>.el-radio__input {
>>> .el-radio__input {
display: none;
}
}
>>>.el-radio__label {
>>> .el-radio__label {
padding-left: 5px;
}
}
.app-container {
.app-container {
padding: 0;
display: flex;
justify-content: space-between;
}
}
.title {
.title {
display: flex;
align-items: center;
font-size: 20px;
font-weight: 600;
}
}
.title-bor {
.title-bor {
display: inline-block;
height: 20px;
width: 6px;
background: #4f8bff;
margin-right: 10px;
border-radius: 8px;
}
}
</style>

207
acupuncture-前台/src/views/indexCom/index.js
View File

@ -23,7 +23,7 @@ export const HZXX = {
bottom: "0%",
containLabel: true,
},
color: ["#4f8bff", "#ffcd6c", "#00d1a1", "#a794fe"],
color: ["#C6A268"],
graphic: {
type: "text",
left: "center",
@ -76,7 +76,7 @@ export const gende = {
bottom: "0%",
containLabel: true,
},
color: ["#4F8BFF", "#FE4943"],
color: ["#70483E", "#C7BDB1"],
series: [
{
type: "pie",
@ -85,13 +85,13 @@ export const gende = {
label: {
show: false,
position: "center",
normal:{
show:true,
position:'inner',
formatter: '{b}：{c}个',
textStyle:{
color:'#fff'
}
normal: {
show: true,
position: "inner",
formatter: "{b}：{c}个",
textStyle: {
color: "#fff",
},
},
},
labelLine: {
@ -127,7 +127,7 @@ export const ageEcharts = {
},
xAxis: {
type: "category",
data: ["<40岁","41-50岁","51-60岁","61-70岁","71-80岁",">80岁",],
data: ["<40岁", "41-50岁", "51-60岁", "61-70岁", "71-80岁", ">80岁"],
},
grid: {
top: "12%",
@ -153,20 +153,20 @@ export const ageEcharts = {
data: [],
type: "bar",
barMaxWidth: 24, //柱图宽度
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
color: function (params)
{
var colorList = ['#FF9966', '#66B3FF', '#99FF99','#FFCC66','#FF6699','#CCCCCC'];
return colorList[params.dataIndex]
},
},
color: "#C6A268",
// itemStyle: {
// normal: {
// //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
// barBorderRadius: [50, 50, 0, 0],
// color: function (params) {
// var colorList = [
// "#C6A268",
// ];
// return colorList[params.dataIndex];
// },
// },
// },
},
},
],
};
// 病种分布
@ -195,7 +195,7 @@ export const diseaseEcharts = {
},
xAxis: {
type: "category",
data: ["<40岁","41-50岁","51-60岁","61-70岁","71-80岁",">80岁",],
data: ["<40岁", "41-50岁", "51-60岁", "61-70岁", "71-80岁", ">80岁"],
},
grid: {
top: "12%",
@ -221,15 +221,8 @@ export const diseaseEcharts = {
data: [],
type: "bar",
barMaxWidth: 24, //柱图宽度
color: "#4f8bff",
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
},
color: "#70483E",
},
},
],
};
@ -268,7 +261,6 @@ export const diagnoseEcharts = {
type: "dashed",
},
},
},
grid: {
top: "12%",
@ -287,9 +279,8 @@ export const diagnoseEcharts = {
data: [],
type: "bar",
barMaxWidth: 24, //柱图宽度
color: "#4f8bff",
color: "#906C4A",
},
],
};
// 体系
@ -344,15 +335,14 @@ export const systemEcharts = {
data: [],
type: "bar",
barMaxWidth: 24, //柱图宽度
color: "#4f8bff",
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
},
},
color: "#C6A268",
// itemStyle: {
// normal: {
// //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
// barBorderRadius: [50, 50, 0, 0],
// },
// },
},
],
};
// 体质
@ -407,15 +397,14 @@ export const physiqueEcharts = {
data: [],
type: "bar",
barMaxWidth: 24, //柱图宽度
color: "#4f8bff",
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
color: "#70483E",
// itemStyle: {
// normal: {
// //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
// barBorderRadius: [50, 50, 0, 0],
// },
// },
},
},
},
],
};
// 体态
@ -441,7 +430,7 @@ export const postureEcharts = {
bottom: "0%",
containLabel: true,
},
color: ["#4f8bff", "#ffcd6c", "#00d1a1", "#a794fe","#EE6666"],
color: ["#C7BDB1", "#C6A268", "#906C4A", "#70483E", "#582518"],
series: [
{
type: "pie",
@ -450,13 +439,13 @@ export const postureEcharts = {
label: {
show: false,
position: "center",
normal:{
show:true,
position:'inner',
formatter: '{b}：{c}个',
textStyle:{
color:'#fff'
}
normal: {
show: true,
position: "inner",
formatter: "{b}：{c}个",
textStyle: {
color: "#fff",
},
},
},
labelLine: {
@ -492,8 +481,7 @@ export const agrypniaEcharts = {
},
xAxis: {
type: "category",
data: ['0~4分', '5~9分', '10~14分','15~19分','20~27分'],
data: ["0~4分", "5~9分", "10~14分", "15~19分", "20~27分"],
},
grid: {
top: "12%",
@ -519,15 +507,14 @@ export const agrypniaEcharts = {
data: [],
type: "bar",
barMaxWidth: 24, //柱图宽度
color: "#4f8bff",
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
},
},
color: "#C6A268",
// itemStyle: {
// normal: {
// //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
// barBorderRadius: [50, 50, 0, 0],
// },
// },
},
],
};
// 焦虑度
@ -556,8 +543,7 @@ export const anxietyEcharts = {
},
xAxis: {
type: "category",
data: ['<8分', '8~20分','21~35分','>35分'],
data: ["<8分", "8~20分", "21~35分", ">35分"],
},
grid: {
top: "12%",
@ -583,15 +569,14 @@ export const anxietyEcharts = {
data: [],
type: "bar",
barMaxWidth: 24, //柱图宽度
color: "#4f8bff",
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
},
},
color: "#70483E",
// itemStyle: {
// normal: {
// //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
// barBorderRadius: [50, 50, 0, 0],
// },
// },
},
],
};
// -------- 治疗类型 --------
@ -618,7 +603,7 @@ export const healTypeEcharts = {
bottom: "0%",
containLabel: true,
},
color: ["#91CC75", "#5470C6"],
color: ["#C6A268", "#D8D8D8"],
series: [
{
type: "pie",
@ -627,13 +612,13 @@ export const healTypeEcharts = {
label: {
show: false,
position: "center",
normal:{
show:true,
position:'inner',
formatter: '{b}：{c}个',
textStyle:{
color:'#fff'
}
normal: {
show: true,
position: "inner",
formatter: "{b}：{c}个",
textStyle: {
color: "#fff",
},
},
},
labelLine: {
@ -669,8 +654,7 @@ export const diseaseMethodEcharts = {
},
xAxis: {
type: "category",
data: ['肥胖症', '失眠症','其他'],
data: ["肥胖症", "失眠症", "其他"],
},
grid: {
top: "12%",
@ -693,7 +677,7 @@ export const diseaseMethodEcharts = {
series: [
{
name: "数量1：",
data: [1,2],
data: [1, 2],
type: "bar",
barMaxWidth: 24, //柱图宽度
itemStyle: {
@ -705,7 +689,7 @@ export const diseaseMethodEcharts = {
},
{
name: "数量2：",
data: [1,3],
data: [1, 3],
type: "bar",
barMaxWidth: 24, //柱图宽度
itemStyle: {
@ -740,7 +724,7 @@ export const effectEcharts = {
bottom: "0%",
containLabel: true,
},
color: ["#5C7BD9", "#91CC75",'#FAC858','#EE6666'],
color: ["#C6A268", "#906C4A", "#70483E", "#C7BDB1"],
series: [
{
type: "pie",
@ -749,13 +733,13 @@ export const effectEcharts = {
label: {
show: false,
position: "center",
normal:{
show:true,
position:'inner',
formatter: '{b}：{c}个',
textStyle:{
color:'#fff'
}
normal: {
show: true,
position: "inner",
formatter: "{b}：{c}个",
textStyle: {
color: "#fff",
},
},
},
labelLine: {
@ -791,7 +775,7 @@ export const costEcharts = {
},
xAxis: {
type: "category",
data: ['<300元','300 ~ 900元','900 ~ 2000元','2000 ~ 5000元','>5000元'],
data: ["<300元", "300 ~ 900元", "900 ~ 2000元", "2000 ~ 5000元", ">5000元"],
},
grid: {
top: "12%",
@ -824,7 +808,6 @@ export const costEcharts = {
},
},
},
],
};
// -------- 随访 --------
@ -853,7 +836,7 @@ export const followEcharts = {
},
xAxis: {
type: "category",
data: ['待随访','临近随访','超期随访','正常随访'],
data: ["待随访", "临近随访", "超期随访", "正常随访"],
},
grid: {
top: "12%",
@ -873,9 +856,9 @@ export const followEcharts = {
},
},
},
series: [
],
series: [],
};
// 失访原因
export const lossFollowEcharts = {
tooltip: {
trigger: "axis",
@ -901,7 +884,7 @@ export const lossFollowEcharts = {
},
xAxis: {
type: "category",
data: ['<300元','300 ~ 900元','900 ~ 2000元','2000 ~ 5000元','>5000元'],
data: ["<300元", "300 ~ 900元", "900 ~ 2000元", "2000 ~ 5000元", ">5000元"],
},
grid: {
top: "12%",
@ -927,13 +910,13 @@ export const lossFollowEcharts = {
data: [],
type: "bar",
barMaxWidth: 24, //柱图宽度
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
},
color: "#70483E",
// itemStyle: {
// normal: {
// //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
// barBorderRadius: [50, 50, 0, 0],
// },
// },
},
}
],
};

165
acupuncture-前台/src/views/indexCom/patient.vue
View File

@ -14,17 +14,17 @@
</div>
</el-card>
</div>
<div style="flex: 1;margin-right: 20px">
<div style="flex: 1; margin-right: 20px">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">性别数量</span>
<div class="dis">
<div class="dian-box dis">
<div class="dian-box dis">
<span class="dian" style="background: #4f8bff"></span>
<span class="dian" style="background: #70483e"></span>
男
</div>
<span class="dian" style="background: #fe4943"></span>
<span class="dian" style="background: #c7bdb1"></span>
女
</div>
</div>
@ -47,7 +47,7 @@
</div>
</el-card>
</div>
<div style="flex: 1;">
<div style="flex: 1">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">既往病种分布</span>
@ -74,21 +74,12 @@
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import {
patientTotal,
queryByDatePatient
} from "@/api/indexCom.js";
import {
HZXX,
HZXXSJFX,
gende,
ageEcharts,
diseaseEcharts
} from "./index";
export default {
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import { patientTotal, queryByDatePatient } from "@/api/indexCom.js";
import { HZXX, HZXXSJFX, gende, ageEcharts, diseaseEcharts } from "./index";
export default {
name: "Post",
props: ["title"],
mixins: [resize],
@ -106,25 +97,25 @@
},
},
jwbzObj: {
"gxy": "高血压", //高血压
"nxgb": "脑血管病", //脑血管病
"exzl": "恶性肿瘤", //恶性肿瘤
"gxb": "冠心病", //冠心病
"jsjb": "精神疾病", //精神疾病
"whsezcky": "胃和十二指肠溃疡", //胃和十二指肠溃疡
"fpz": "肥胖症", //肥胖症
"gzssz": "骨质疏松症", //骨质疏松症
"ycxXtxjb": "遗传性、先天性疾病", //遗传性、先天性疾病
"tnb": "糖尿病", //糖尿病
"mxfxjb": "慢性肺系疾病", //慢性肺系疾病
"gzxz": "高脂血症", //高脂血症
"gzjb": "肝脏疾病", //肝脏疾病
"gmxjb": "过敏性疾病", //过敏性疾病
"gjy": "关节炎", //关节炎
"tf": "痛风", //痛风
"sySb": "肾炎、肾病", //肾炎、肾病
"other": "其他" //其他
}
gxy: "高血压", //高血压
nxgb: "脑血管病", //脑血管病
exzl: "恶性肿瘤", //恶性肿瘤
gxb: "冠心病", //冠心病
jsjb: "精神疾病", //精神疾病
whsezcky: "胃和十二指肠溃疡", //胃和十二指肠溃疡
fpz: "肥胖症", //肥胖症
gzssz: "骨质疏松症", //骨质疏松症
ycxXtxjb: "遗传性、先天性疾病", //遗传性、先天性疾病
tnb: "糖尿病", //糖尿病
mxfxjb: "慢性肺系疾病", //慢性肺系疾病
gzxz: "高脂血症", //高脂血症
gzjb: "肝脏疾病", //肝脏疾病
gmxjb: "过敏性疾病", //过敏性疾病
gjy: "关节炎", //关节炎
tf: "痛风", //痛风
sySb: "肾炎、肾病", //肾炎、肾病
other: "其他", //其他
},
};
},
created() {
@ -142,34 +133,42 @@
try {
await patientTotal(this.queryParams).then((res) => {
// 患者总数统计图
this.HZXXvalue = [{
this.HZXXvalue = [
{
value: res.data.totalPatients,
name: "患者总数"
}, ];
name: "患者总数",
},
];
// 性别分析图
this.gendeValue = [{
this.gendeValue = [
{
value: res.data.gender.male,
name: "男"
name: "男",
},
{
value: res.data.gender.female,
name: "女"
}
name: "女",
},
];
// 年龄分布
let ageValue = res.data.age
this.ageValue = [ageValue.num1, ageValue.num2, ageValue.num3, ageValue.num4, ageValue
.num5, ageValue.num6
]
let ageValue = res.data.age;
this.ageValue = [
ageValue.num1,
ageValue.num2,
ageValue.num3,
ageValue.num4,
ageValue.num5,
ageValue.num6,
];
// 病种分布
let diseaseValue = res.data.jwbz
this.diseaseValue = []
let diseaseValue = res.data.jwbz;
this.diseaseValue = [];
for (let key in diseaseValue) {
let data = {
name: this.jwbzObj[key],
value: diseaseValue[key] || 0
}
this.diseaseValue.push(data)
value: diseaseValue[key] || 0,
};
this.diseaseValue.push(data);
}
this.Linepatient(); // 患者总数
this.handleAge(); // 年龄
@ -178,7 +177,7 @@
});
this.loading = false;
} catch (e) {
console.log('患者统计', e)
console.log("患者统计", e);
}
},
@ -209,7 +208,7 @@
},
// 年龄分布图
handleAge() {
ageEcharts.series[0].data = this.ageValue
ageEcharts.series[0].data = this.ageValue;
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById("age"), null, {
height: 300,
@ -253,75 +252,75 @@
this.handleDisease(); //病种分布
},
},
};
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
>>>.el-card__body {
>>> .el-card__body {
padding: 10px 0 !important;
}
}
.dis {
.dis {
display: flex;
}
}
.header-title {
.header-title {
font-size: 18px;
}
}
.title-box {
.title-box {
padding: 10px 20px;
border-bottom: 1px solid #dfe6ec;
}
}
.dian-box {
.dian-box {
align-items: center;
}
}
.dian {
.dian {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 0 10px;
}
}
.title-box {
.title-box {
justify-content: space-between;
}
}
.>>>.el-radio--small.is-bordered {
. >>> .el-radio--small.is-bordered {
margin-right: 20px !important;
margin-left: 0 !important;
}
}
>>>.el-radio__input {
>>> .el-radio__input {
display: none;
}
}
>>>.el-radio__label {
>>> .el-radio__label {
padding-left: 5px;
}
}
.app-container {
.app-container {
padding: 0;
display: flex;
justify-content: space-between;
}
}
.title {
.title {
display: flex;
align-items: center;
font-size: 20px;
font-weight: 600;
}
}
.title-bor {
.title-bor {
display: inline-block;
height: 20px;
width: 6px;
background: #4f8bff;
margin-right: 10px;
border-radius: 8px;
}
}
</style>

Write Preview
Loading…
Cancel
Save