ccsens_zhengzhichuan
/
datang-meeting
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

后台首页

new
1747191978@qq.com 1 year ago
parent
02f362e105
commit
38c4e06e98
9 changed files with 1550 additions and 1463 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      acupuncture-后台/src/layout/components/Navbar.vue
  2. 2
      acupuncture-后台/src/store/modules/settings.js
  3. 51
      acupuncture-后台/src/views/indexCom/JM.vue
  4. 98
      acupuncture-后台/src/views/indexCom/XGZL.vue
  5. 99
      acupuncture-后台/src/views/indexCom/follow.vue
  6. BIN
      acupuncture-后台/src/views/indexCom/image.png
  7. 194
      acupuncture-后台/src/views/indexCom/index.js
  8. 154
      acupuncture-后台/src/views/indexCom/patient.vue
  9. 21
      acupuncture-后台/src/views/indexCom/query.vue

8
acupuncture-后台/src/layout/components/Navbar.vue
View File

@ -15,7 +15,7 @@
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" /> <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
<div class="right-menu"> <div class="right-menu">
<template v-if="device !== 'mobile'"> <!-- <template v-if="device !== 'mobile'">
<search id="header-search" class="right-menu-item" /> <search id="header-search" class="right-menu-item" />
<el-tooltip content="源码地址" effect="dark" placement="bottom"> <el-tooltip content="源码地址" effect="dark" placement="bottom">
@ -31,7 +31,7 @@
<el-tooltip content="布局大小" effect="dark" placement="bottom"> <el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" /> <size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip>
</template> </template> -->
<el-dropdown <el-dropdown
class="avatar-container right-menu-item hover-effect" class="avatar-container right-menu-item hover-effect"
@ -45,9 +45,9 @@
<router-link to="/user/profile"> <router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item> <el-dropdown-item>个人中心</el-dropdown-item>
</router-link> </router-link>
<el-dropdown-item @click.native="setting = true"> <!-- <el-dropdown-item @click.native="setting = true">
<span>布局设置</span> <span>布局设置</span>
</el-dropdown-item> </el-dropdown-item> -->
<el-dropdown-item divided @click.native="logout"> <el-dropdown-item divided @click.native="logout">
<span>退出登录</span> <span>退出登录</span>
</el-dropdown-item> </el-dropdown-item>

2
acupuncture-后台/src/store/modules/settings.js
View File

@ -13,7 +13,7 @@ const {
const storageSetting = JSON.parse(localStorage.getItem("layout-setting")) || ""; const storageSetting = JSON.parse(localStorage.getItem("layout-setting")) || "";
const state = { const state = {
title: "", title: "",
theme: storageSetting.theme || "#fff", theme: storageSetting.theme || "#5698FF",
sideTheme: storageSetting.sideTheme || sideTheme, sideTheme: storageSetting.sideTheme || sideTheme,
showSettings: showSettings, showSettings: showSettings,
topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav, topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,

51
acupuncture-后台/src/views/indexCom/JM.vue
View File

@ -35,7 +35,7 @@
</div> </div>
</el-card> </el-card>
</div> </div>
<div style="flex: 1"> <div style="flex: 1; margin-right: 20px">
<el-card shadow="always"> <el-card shadow="always">
<div class="dis title-box"> <div class="dis title-box">
<span class="header-title">体态评估（TAPS）</span> <span class="header-title">体态评估（TAPS）</span>
@ -46,9 +46,31 @@
</div> </div>
</el-card> </el-card>
</div> </div>
<div style="flex: 1; margin-right: 20px">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">失眠评估（PHQ-9）</span>
<div class="dis"></div>
</div> </div>
<div style="height: 300px" v-loading="loading">
<div id="agrypnia" style="width: 100%"></div>
</div> </div>
<div class="app-container"> </el-card>
</div>
<div style="flex: 1">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">焦虑（HAMD-24）</span>
<div class="dis"></div>
</div>
<div style="height: 300px" v-loading="loading">
<div id="anxiety" style="width: 100%"></div>
</div>
</el-card>
</div>
</div>
</div>
<!-- <div class="app-container">
<div class="dis" style="width: 100%"> <div class="dis" style="width: 100%">
<div style="flex: 1; margin-right: 20px"> <div style="flex: 1; margin-right: 20px">
<el-card shadow="always"> <el-card shadow="always">
@ -73,7 +95,7 @@
</el-card> </el-card>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
</template> </template>
@ -81,9 +103,7 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize"; import resize from "@/views/dashboard/mixins/resize";
import { import { zlInfo } from "@/api/indexCom.js";
zlInfo
} from "@/api/indexCom.js";
import { import {
diagnoseEcharts, diagnoseEcharts,
systemEcharts, systemEcharts,
@ -152,14 +172,7 @@
async getData() { async getData() {
try { try {
await zlInfo(this.queryParams).then((res) => { await zlInfo(this.queryParams).then((res) => {
const { const { jlfb, smfb, sort, ttfb, txfb, zytz } = res.data;
jlfb,
smfb,
sort,
ttfb,
txfb,
zytz
} = res.data;
// 病种（主要诊断） // 病种（主要诊断）
this.diagnoseValue = sort.sort((a, b) => a.total - b.total); this.diagnoseValue = sort.sort((a, b) => a.total - b.total);
this.handleDiagnose(); this.handleDiagnose();
@ -169,7 +182,7 @@
for (let key in txfb) { for (let key in txfb) {
let data = { let data = {
name: this.systemObj[key], name: this.systemObj[key],
value: txfb[key], value: txfb[key] || 0,
}; };
this.systemValue.push(data); this.systemValue.push(data);
} }
@ -180,13 +193,14 @@
for (let key in zytz) { for (let key in zytz) {
let data = { let data = {
name: this.physiqueObj[key], name: this.physiqueObj[key],
value: zytz[key], value: zytz[key] || 0,
}; };
this.physiqueValue.push(data); this.physiqueValue.push(data);
} }
this.handlePhysique(); this.handlePhysique();
// 体态 // 体态
this.postureValue = [{ this.postureValue = [
{
value: ttfb?.score1 || 0, value: ttfb?.score1 || 0,
name: "1分", name: "1分",
}, },
@ -222,9 +236,8 @@
this.handleAnxiety(); this.handleAnxiety();
this.loading = false; this.loading = false;
}); });
} catch (e) { } catch (e) {
console.log('诊疗信息', e) console.log("诊疗信息", e);
} }
}, },
// 病种（主要诊断） // 病种（主要诊断）

98
acupuncture-后台/src/views/indexCom/XGZL.vue
View File

@ -9,10 +9,10 @@
<div class="dis"> <div class="dis">
<div class="dian-box dis"> <div class="dian-box 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> </div>
<span class="dian" style="background: #5470C6"></span> <span class="dian" style="background: #d8d8d8"></span>
纯中医 纯中医
</div> </div>
</div> </div>
@ -52,19 +52,19 @@
<div class="dis"> <div class="dis">
<div class="dian-box dis"> <div class="dian-box 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>
<div class="dian-box dis"> <div class="dian-box dis">
<span class="dian" style="background: #91CC75"></span> <span class="dian" style="background: #906c4a"></span>
显效 显效
</div> </div>
<div class="dian-box dis"> <div class="dian-box dis">
<span class="dian" style="background: #FAC858"></span> <span class="dian" style="background: #70483e"></span>
好转 好转
</div> </div>
<div class="dian-box dis"> <div class="dian-box dis">
<span class="dian" style="background: #EE6666"></span> <span class="dian" style="background: #c7bdb1"></span>
无效 无效
</div> </div>
</div> </div>
@ -79,8 +79,7 @@
<el-card shadow="always"> <el-card shadow="always">
<div class="dis title-box"> <div class="dis title-box">
<span class="header-title">诊疗费用分布</span> <span class="header-title">诊疗费用分布</span>
<div class="dis"> <div class="dis"></div>
</div>
</div> </div>
<div style="height: 300px" v-loading="loading"> <div style="height: 300px" v-loading="loading">
<div id="cost" style="width: 100%"></div> <div id="cost" style="width: 100%"></div>
@ -142,14 +141,12 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize"; import resize from "@/views/dashboard/mixins/resize";
import { import { zlType } from "@/api/indexCom.js";
zlType
} from "@/api/indexCom.js";
import { import {
healTypeEcharts, healTypeEcharts,
diseaseMethodEcharts, diseaseMethodEcharts,
effectEcharts, effectEcharts,
costEcharts costEcharts,
} from "./index"; } from "./index";
export default { export default {
name: "Post", name: "Post",
@ -169,11 +166,11 @@
effectValue: null, // 治疗效果 effectValue: null, // 治疗效果
costValue: null, //治疗效果 costValue: null, //治疗效果
effectObj: { effectObj: {
"zy": "治愈", //治愈 zy: "治愈", //治愈
"xx": "显效", //显效 xx: "显效", //显效
"hz": "好转", //好转 hz: "好转", //好转
"wx": "无效" //无效 wx: "无效", //无效
} },
}; };
}, },
created() { created() {
@ -190,15 +187,10 @@
async getData() { async getData() {
try { try {
await zlType(this.queryParams).then((res) => { await zlType(this.queryParams).then((res) => {
const { const { bzfffb, bzxwfb, zlfy, zllxtj, zlxwfb } = res.data;
bzfffb,
bzxwfb,
zlfy,
zllxtj,
zlxwfb
} = res.data;
//治疗 //治疗
this.healTypeValue = [{ this.healTypeValue = [
{
value: zllxtj?.zxyjh || 0, value: zllxtj?.zxyjh || 0,
name: "中西医结合", name: "中西医结合",
}, },
@ -206,7 +198,7 @@
value: zllxtj?.czy || 0, value: zllxtj?.czy || 0,
name: "纯中医", name: "纯中医",
}, },
] ];
this.handleHealType(); this.handleHealType();
// 病种方法 // 病种方法
// let diseaseMethod = [] // let diseaseMethod = []
@ -220,37 +212,43 @@
// this.handleDiseaseMethod() // this.handleDiseaseMethod()
// 治疗效果 // 治疗效果
this.effectValue = [{ this.effectValue = [
name: '治愈', {
value: zlxwfb?.zy || 0 name: "治愈",
value: zlxwfb?.zy || 0,
}, },
{ {
name: '显效', name: "显效",
value: zlxwfb?.xx || 0 value: zlxwfb?.xx || 0,
}, },
{ {
name: '好转', name: "好转",
value: zlxwfb?.hz || 0 value: zlxwfb?.hz || 0,
}, },
{ {
name: '无效', name: "无效",
value: zlxwfb?.wx || 0 value: zlxwfb?.wx || 0,
} },
] ];
this.handleEffect() this.handleEffect();
// 治疗费用 // 治疗费用
this.costValue = [zlfy.score1, zlfy.score2, zlfy.score3, zlfy.score4, zlfy.score5] this.costValue = [
this.handleCost() zlfy.score1,
zlfy.score2,
zlfy.score3,
zlfy.score4,
zlfy.score5,
];
this.handleCost();
this.loading = false; this.loading = false;
}); });
} catch (e) { } catch (e) {
console.log('治疗类型', e) console.log("治疗类型", e);
} }
}, },
// 治疗类型 // 治疗类型
handleHealType() { handleHealType() {
healTypeEcharts.series[0].data = this.healTypeValue healTypeEcharts.series[0].data = this.healTypeValue;
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById("healType"), null, { var myChart = echarts.init(document.getElementById("healType"), null, {
height: 300, height: 300,
@ -264,9 +262,13 @@
handleDiseaseMethod() { handleDiseaseMethod() {
// diseaseMethodEcharts.series[0].data = this.diseaseMethod // diseaseMethodEcharts.series[0].data = this.diseaseMethod
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById("diseaseMethod"), null, { var myChart = echarts.init(
document.getElementById("diseaseMethod"),
null,
{
height: 300, height: 300,
}); }
);
myChart.setOption(diseaseMethodEcharts, true); myChart.setOption(diseaseMethodEcharts, true);
myChart.resize(); myChart.resize();
window.onresize = myChart.resize; window.onresize = myChart.resize;
@ -274,7 +276,7 @@
}, },
// 治疗效果 // 治疗效果
handleEffect() { handleEffect() {
effectEcharts.series[0].data = this.effectValue effectEcharts.series[0].data = this.effectValue;
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById("effect"), null, { var myChart = echarts.init(document.getElementById("effect"), null, {
height: 300, height: 300,
@ -286,7 +288,7 @@
}, },
// 治疗费用 // 治疗费用
handleCost() { handleCost() {
costEcharts.series[0].data = this.costValue costEcharts.series[0].data = this.costValue;
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById("cost"), null, { var myChart = echarts.init(document.getElementById("cost"), null, {
height: 300, height: 300,
@ -309,7 +311,7 @@
getRenew() { getRenew() {
this.handleHealType(); this.handleHealType();
this.handleEffect(); this.handleEffect();
this.handleCost() this.handleCost();
}, },
}, },
}; };

99
acupuncture-后台/src/views/indexCom/follow.vue
View File

@ -2,7 +2,7 @@
<div> <div>
<div class="app-container"> <div class="app-container">
<div class="dis" style="width: 100%"> <div class="dis" style="width: 100%">
<div style="flex: 1;margin-right: 20px;"> <div style="flex: 1; margin-right: 20px">
<el-card shadow="always"> <el-card shadow="always">
<div class="dis title-box"> <div class="dis title-box">
<span class="header-title">随访队列分布</span> <span class="header-title">随访队列分布</span>
@ -14,7 +14,7 @@
</div> </div>
</el-card> </el-card>
</div> </div>
<div style="flex: 1;"> <div style="flex: 1">
<el-card shadow="always"> <el-card shadow="always">
<div class="dis title-box"> <div class="dis title-box">
<span class="header-title">失访原因分布</span> <span class="header-title">失访原因分布</span>
@ -35,14 +35,8 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize"; import resize from "@/views/dashboard/mixins/resize";
import { import { sffb, sftj } from "@/api/indexCom.js";
sffb, import { followEcharts, lossFollowEcharts } from "./index";
sftj
} from "@/api/indexCom.js";
import {
followEcharts,
lossFollowEcharts
} from "./index";
export default { export default {
name: "Post", name: "Post",
props: ["title"], props: ["title"],
@ -73,41 +67,80 @@
//患者信息 //患者信息
async getData() { async getData() {
try { try {
this.followValue = {} this.followValue = {};
await sffb(this.queryParams).then((res) => { await sffb(this.queryParams).then((res) => {
res.data.forEach(i => { res.data.forEach((i) => {
let data = [i.dsf, i.ljsf, i.cqsf, i.zc] let data = [i.dsf, i.ljsf, i.cqsf, i.zc];
this.followValue[i.queueName] = data this.followValue[i.queueName] = data;
}) });
this.handleFollow() this.handleFollow();
}); });
await sftj(this.queryParams).then((res) => { await sftj(this.queryParams).then((res) => {
this.lossFollowValue = res.data this.lossFollowValue = res.data;
this.handleLossFollow() this.handleLossFollow();
}); });
this.loading = false; this.loading = false;
} catch (e) { } catch (e) {
console.log('随访', e) console.log("随访", e);
} }
}, },
// 队列 // 队列
handleFollow() { 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) { for (let key in this.followValue) {
let series = { let series = {
name: key, name: key,
data: this.followValue[key], data: this.followValue[key],
type: "bar", type: "bar",
barMaxWidth: 24, //柱图宽度 barMaxWidth: 24, //柱图宽度
itemStyle: { color: colorArr[index],
normal: { };
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角] followEcharts.series.push(series);
barBorderRadius: [50, 50, 0, 0], index++;
},
},
}
followEcharts.series.push(series)
} }
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById("follow"), null, { var myChart = echarts.init(document.getElementById("follow"), null, {
@ -127,9 +160,13 @@
return item.reason; return item.reason;
}); });
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById("lossFollow"), null, { var myChart = echarts.init(
document.getElementById("lossFollow"),
null,
{
height: 300, height: 300,
}); }
);
myChart.setOption(lossFollowEcharts, true); myChart.setOption(lossFollowEcharts, true);
myChart.resize(); myChart.resize();
window.onresize = myChart.resize; window.onresize = myChart.resize;
@ -147,7 +184,7 @@
// 重新渲染图标 // 重新渲染图标
getRenew() { getRenew() {
this.handleFollow(); this.handleFollow();
this.handleLossFollow() this.handleLossFollow();
}, },
}, },
}; };

BIN
acupuncture-后台/src/views/indexCom/image.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

194
acupuncture-后台/src/views/indexCom/index.js
View File

@ -23,7 +23,7 @@ export const HZXX = {
bottom: "0%", bottom: "0%",
containLabel: true, containLabel: true,
}, },
color: ["#4f8bff", "#ffcd6c", "#00d1a1", "#a794fe"], color: ["#C6A268"],
graphic: { graphic: {
type: "text", type: "text",
left: "center", left: "center",
@ -76,7 +76,7 @@ export const gende = {
bottom: "0%", bottom: "0%",
containLabel: true, containLabel: true,
}, },
color: ["#4F8BFF", "#FE4943"], color: ["#70483E", "#C7BDB1"],
series: [ series: [
{ {
type: "pie", type: "pie",
@ -87,11 +87,11 @@ export const gende = {
position: "center", position: "center",
normal: { normal: {
show: true, show: true,
position:'inner', position: "inner",
formatter: '{b}：{c}个', formatter: "{b}：{c}个",
textStyle: { textStyle: {
color:'#fff' color: "#fff",
} },
}, },
}, },
labelLine: { labelLine: {
@ -127,7 +127,7 @@ export const ageEcharts = {
}, },
xAxis: { xAxis: {
type: "category", 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: { grid: {
top: "12%", top: "12%",
@ -153,20 +153,20 @@ export const ageEcharts = {
data: [], data: [],
type: "bar", type: "bar",
barMaxWidth: 24, //柱图宽度 barMaxWidth: 24, //柱图宽度
color: "#C6A268",
itemStyle: { // itemStyle: {
normal: { // normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角] // //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0], // barBorderRadius: [50, 50, 0, 0],
color: function (params) // color: function (params) {
{ // var colorList = [
var colorList = ['#FF9966', '#66B3FF', '#99FF99','#FFCC66','#FF6699','#CCCCCC']; // "#C6A268",
return colorList[params.dataIndex] // ];
}, // return colorList[params.dataIndex];
}, // },
// },
// },
}, },
},
], ],
}; };
// 病种分布 // 病种分布
@ -195,7 +195,7 @@ export const diseaseEcharts = {
}, },
xAxis: { xAxis: {
type: "category", 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: { grid: {
top: "12%", top: "12%",
@ -221,15 +221,8 @@ export const diseaseEcharts = {
data: [], data: [],
type: "bar", type: "bar",
barMaxWidth: 24, //柱图宽度 barMaxWidth: 24, //柱图宽度
color: "#4f8bff", color: "#70483E",
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0],
},
}, },
},
], ],
}; };
@ -268,7 +261,6 @@ export const diagnoseEcharts = {
type: "dashed", type: "dashed",
}, },
}, },
}, },
grid: { grid: {
top: "12%", top: "12%",
@ -287,9 +279,8 @@ export const diagnoseEcharts = {
data: [], data: [],
type: "bar", type: "bar",
barMaxWidth: 24, //柱图宽度 barMaxWidth: 24, //柱图宽度
color: "#4f8bff", color: "#906C4A",
}, },
], ],
}; };
// 体系 // 体系
@ -344,15 +335,14 @@ export const systemEcharts = {
data: [], data: [],
type: "bar", type: "bar",
barMaxWidth: 24, //柱图宽度 barMaxWidth: 24, //柱图宽度
color: "#4f8bff", color: "#C6A268",
itemStyle: { // itemStyle: {
normal: { // normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角] // //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0], // barBorderRadius: [50, 50, 0, 0],
}, // },
// },
}, },
},
], ],
}; };
// 体质 // 体质
@ -407,15 +397,14 @@ export const physiqueEcharts = {
data: [], data: [],
type: "bar", type: "bar",
barMaxWidth: 24, //柱图宽度 barMaxWidth: 24, //柱图宽度
color: "#4f8bff", color: "#70483E",
itemStyle: { // itemStyle: {
normal: { // normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角] // //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0], // barBorderRadius: [50, 50, 0, 0],
}, // },
// },
}, },
},
], ],
}; };
// 体态 // 体态
@ -441,7 +430,7 @@ export const postureEcharts = {
bottom: "0%", bottom: "0%",
containLabel: true, containLabel: true,
}, },
color: ["#4f8bff", "#ffcd6c", "#00d1a1", "#a794fe","#EE6666"], color: ["#C7BDB1", "#C6A268", "#906C4A", "#70483E", "#582518"],
series: [ series: [
{ {
type: "pie", type: "pie",
@ -452,11 +441,11 @@ export const postureEcharts = {
position: "center", position: "center",
normal: { normal: {
show: true, show: true,
position:'inner', position: "inner",
formatter: '{b}：{c}个', formatter: "{b}：{c}个",
textStyle: { textStyle: {
color:'#fff' color: "#fff",
} },
}, },
}, },
labelLine: { labelLine: {
@ -492,8 +481,7 @@ export const agrypniaEcharts = {
}, },
xAxis: { xAxis: {
type: "category", 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: { grid: {
top: "12%", top: "12%",
@ -519,15 +507,14 @@ export const agrypniaEcharts = {
data: [], data: [],
type: "bar", type: "bar",
barMaxWidth: 24, //柱图宽度 barMaxWidth: 24, //柱图宽度
color: "#4f8bff", color: "#C6A268",
itemStyle: { // itemStyle: {
normal: { // normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角] // //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0], // barBorderRadius: [50, 50, 0, 0],
// },
// },
}, },
},
},
], ],
}; };
// 焦虑度 // 焦虑度
@ -556,8 +543,7 @@ export const anxietyEcharts = {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: ['<8分', '8~20分','21~35分','>35分'], data: ["<8分", "8~20分", "21~35分", ">35分"],
}, },
grid: { grid: {
top: "12%", top: "12%",
@ -583,15 +569,14 @@ export const anxietyEcharts = {
data: [], data: [],
type: "bar", type: "bar",
barMaxWidth: 24, //柱图宽度 barMaxWidth: 24, //柱图宽度
color: "#4f8bff", color: "#70483E",
itemStyle: { // itemStyle: {
normal: { // normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角] // //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0], // barBorderRadius: [50, 50, 0, 0],
}, // },
}, // },
}, },
], ],
}; };
// -------- 治疗类型 -------- // -------- 治疗类型 --------
@ -618,7 +603,7 @@ export const healTypeEcharts = {
bottom: "0%", bottom: "0%",
containLabel: true, containLabel: true,
}, },
color: ["#91CC75", "#5470C6"], color: ["#C6A268", "#D8D8D8"],
series: [ series: [
{ {
type: "pie", type: "pie",
@ -629,11 +614,11 @@ export const healTypeEcharts = {
position: "center", position: "center",
normal: { normal: {
show: true, show: true,
position:'inner', position: "inner",
formatter: '{b}：{c}个', formatter: "{b}：{c}个",
textStyle: { textStyle: {
color:'#fff' color: "#fff",
} },
}, },
}, },
labelLine: { labelLine: {
@ -669,8 +654,7 @@ export const diseaseMethodEcharts = {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: ['肥胖症', '失眠症','其他'], data: ["肥胖症", "失眠症", "其他"],
}, },
grid: { grid: {
top: "12%", top: "12%",
@ -740,7 +724,7 @@ export const effectEcharts = {
bottom: "0%", bottom: "0%",
containLabel: true, containLabel: true,
}, },
color: ["#5C7BD9", "#91CC75",'#FAC858','#EE6666'], color: ["#C6A268", "#906C4A", "#70483E", "#C7BDB1"],
series: [ series: [
{ {
type: "pie", type: "pie",
@ -751,11 +735,11 @@ export const effectEcharts = {
position: "center", position: "center",
normal: { normal: {
show: true, show: true,
position:'inner', position: "inner",
formatter: '{b}：{c}个', formatter: "{b}：{c}个",
textStyle: { textStyle: {
color:'#fff' color: "#fff",
} },
}, },
}, },
labelLine: { labelLine: {
@ -765,7 +749,7 @@ export const effectEcharts = {
}, },
], ],
}; };
// 诊疗费 // 诊疗费用
export const costEcharts = { export const costEcharts = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -791,7 +775,7 @@ export const costEcharts = {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: ['<300元','300 ~ 900元','900 ~ 2000元','2000 ~ 5000元','>5000元'], data: ["<300元", "300 ~ 900元", "900 ~ 2000元", "2000 ~ 5000元", ">5000元"],
}, },
grid: { grid: {
top: "12%", top: "12%",
@ -817,14 +801,14 @@ export const costEcharts = {
data: [], data: [],
type: "bar", type: "bar",
barMaxWidth: 24, //柱图宽度 barMaxWidth: 24, //柱图宽度
itemStyle: { color: "#C6A268",
normal: { // itemStyle: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角] // normal: {
barBorderRadius: [50, 50, 0, 0], // //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
}, // barBorderRadius: [50, 50, 0, 0],
// },
// },
}, },
},
], ],
}; };
// -------- 随访 -------- // -------- 随访 --------
@ -853,7 +837,7 @@ export const followEcharts = {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: ['待随访','临近随访','超期随访','正常随访'], data: ["待随访", "临近随访", "超期随访", "正常随访"],
}, },
grid: { grid: {
top: "12%", top: "12%",
@ -873,9 +857,9 @@ export const followEcharts = {
}, },
}, },
}, },
series: [ series: [],
],
}; };
// 失访原因
export const lossFollowEcharts = { export const lossFollowEcharts = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -901,7 +885,7 @@ export const lossFollowEcharts = {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: ['<300元','300 ~ 900元','900 ~ 2000元','2000 ~ 5000元','>5000元'], data: ["<300元", "300 ~ 900元", "900 ~ 2000元", "2000 ~ 5000元", ">5000元"],
}, },
grid: { grid: {
top: "12%", top: "12%",
@ -927,13 +911,13 @@ export const lossFollowEcharts = {
data: [], data: [],
type: "bar", type: "bar",
barMaxWidth: 24, //柱图宽度 barMaxWidth: 24, //柱图宽度
itemStyle: { color: "#70483E",
normal: { // itemStyle: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角] // normal: {
barBorderRadius: [50, 50, 0, 0], // //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
}, // barBorderRadius: [50, 50, 0, 0],
// },
// },
}, },
}
], ],
}; };

154
acupuncture-后台/src/views/indexCom/patient.vue
View File

@ -9,8 +9,28 @@
<div class="dis"></div> <div class="dis"></div>
</div> </div>
<!-- 患者总数统计图 --> <!-- 患者总数统计图 -->
<div style="height: 300px" v-loading="loading"> <div
<div id="patienty" style="width: 100%"></div> style="
height: 300px;
display: flex;
align-items: center;
justify-content: center;
"
v-loading="loading"
>
<div class="div-hz">
<div class="div-hz-icon">
<img src="./image.png" alt="" width="60px" height="60px" />
</div>
<div class="div-hz-num">
<div class="">
{{ HZXXvalue[0].value || 0 }}<span>人</span>
</div>
<div class="hz-num-title">患者总数</div>
</div>
</div>
<!-- <div id="patienty" style="width: 100%"></div> -->
</div> </div>
</el-card> </el-card>
</div> </div>
@ -21,10 +41,10 @@
<div class="dis"> <div class="dis">
<div class="dian-box dis"> <div class="dian-box 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> </div>
<span class="dian" style="background: #fe4943"></span> <span class="dian" style="background: #c7bdb1"></span>
女 女
</div> </div>
</div> </div>
@ -47,7 +67,7 @@
</div> </div>
</el-card> </el-card>
</div> </div>
<div style="flex: 1;"> <div style="flex: 1">
<el-card shadow="always"> <el-card shadow="always">
<div class="dis title-box"> <div class="dis title-box">
<span class="header-title">既往病种分布</span> <span class="header-title">既往病种分布</span>
@ -77,17 +97,8 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize"; import resize from "@/views/dashboard/mixins/resize";
import { import { patientTotal, queryByDatePatient } from "@/api/indexCom.js";
patientTotal, import { HZXX, HZXXSJFX, gende, ageEcharts, diseaseEcharts } from "./index";
queryByDatePatient
} from "@/api/indexCom.js";
import {
HZXX,
HZXXSJFX,
gende,
ageEcharts,
diseaseEcharts
} from "./index";
export default { export default {
name: "Post", name: "Post",
props: ["title"], props: ["title"],
@ -106,25 +117,25 @@
}, },
}, },
jwbzObj: { jwbzObj: {
"gxy": "高血压", //高血压 gxy: "高血压", //高血压
"nxgb": "脑血管病", //脑血管病 nxgb: "脑血管病", //脑血管病
"exzl": "恶性肿瘤", //恶性肿瘤 exzl: "恶性肿瘤", //恶性肿瘤
"gxb": "冠心病", //冠心病 gxb: "冠心病", //冠心病
"jsjb": "精神疾病", //精神疾病 jsjb: "精神疾病", //精神疾病
"whsezcky": "胃和十二指肠溃疡", //胃和十二指肠溃疡 whsezcky: "胃和十二指肠溃疡", //胃和十二指肠溃疡
"fpz": "肥胖症", //肥胖症 fpz: "肥胖症", //肥胖症
"gzssz": "骨质疏松症", //骨质疏松症 gzssz: "骨质疏松症", //骨质疏松症
"ycxXtxjb": "遗传性、先天性疾病", //遗传性、先天性疾病 ycxXtxjb: "遗传性、先天性疾病", //遗传性、先天性疾病
"tnb": "糖尿病", //糖尿病 tnb: "糖尿病", //糖尿病
"mxfxjb": "慢性肺系疾病", //慢性肺系疾病 mxfxjb: "慢性肺系疾病", //慢性肺系疾病
"gzxz": "高脂血症", //高脂血症 gzxz: "高脂血症", //高脂血症
"gzjb": "肝脏疾病", //肝脏疾病 gzjb: "肝脏疾病", //肝脏疾病
"gmxjb": "过敏性疾病", //过敏性疾病 gmxjb: "过敏性疾病", //过敏性疾病
"gjy": "关节炎", //关节炎 gjy: "关节炎", //关节炎
"tf": "痛风", //痛风 tf: "痛风", //痛风
"sySb": "肾炎、肾病", //肾炎、肾病 sySb: "肾炎、肾病", //肾炎、肾病
"other": "其他" //其他 other: "其他", //其他
} },
}; };
}, },
created() { created() {
@ -142,43 +153,51 @@
try { try {
await patientTotal(this.queryParams).then((res) => { await patientTotal(this.queryParams).then((res) => {
// 患者总数统计图 // 患者总数统计图
this.HZXXvalue = [{ this.HZXXvalue = [
{
value: res.data.totalPatients, value: res.data.totalPatients,
name: "患者总数" name: "患者总数",
}, ]; },
];
// 性别分析图 // 性别分析图
this.gendeValue = [{ this.gendeValue = [
{
value: res.data.gender.male, value: res.data.gender.male,
name: "男" name: "男",
}, },
{ {
value: res.data.gender.female, value: res.data.gender.female,
name: "女" name: "女",
} },
]; ];
// 年龄分布 // 年龄分布
let ageValue = res.data.age let ageValue = res.data.age;
this.ageValue = [ageValue.num1, ageValue.num2, ageValue.num3, ageValue.num4, ageValue this.ageValue = [
.num5, ageValue.num6 ageValue.num1,
] ageValue.num2,
ageValue.num3,
ageValue.num4,
ageValue.num5,
ageValue.num6,
];
// 病种分布 // 病种分布
let diseaseValue = res.data.jwbz let diseaseValue = res.data.jwbz;
this.diseaseValue = [] this.diseaseValue = [];
for (let key in diseaseValue) { for (let key in diseaseValue) {
let data = { let data = {
name: this.jwbzObj[key], name: this.jwbzObj[key],
value: diseaseValue[key] value: diseaseValue[key] || 0,
} };
this.diseaseValue.push(data) this.diseaseValue.push(data);
} }
this.Linepatient(); // 患者总数 // this.Linepatient(); // 患者总数
this.handleAge(); // 年龄 this.handleAge(); // 年龄
this.columnar(); //性别分析图 this.columnar(); //性别分析图
this.handleDisease(); //病种分布 this.handleDisease(); //病种分布
}); });
this.loading = false; this.loading = false;
} catch (e) { } catch (e) {
console.log('患者统计', e) console.log("患者统计", e);
} }
}, },
@ -209,7 +228,7 @@
}, },
// 年龄分布图 // 年龄分布图
handleAge() { handleAge() {
ageEcharts.series[0].data = this.ageValue ageEcharts.series[0].data = this.ageValue;
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById("age"), null, { var myChart = echarts.init(document.getElementById("age"), null, {
height: 300, height: 300,
@ -257,6 +276,33 @@
</script> </script>
<style scoped src="@/assets/styles/common.css"></style> <style scoped src="@/assets/styles/common.css"></style>
<style scoped> <style scoped>
.div-hz {
background: #c6a268;
width: 80%;
height: 70%;
border-radius: 10px;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 24px;
}
.div-hz-icon {
flex: 1;
}
.div-hz-num {
flex: 1;
font-size: 50px;
color: #ffffff;
text-align: right;
}
.div-hz-num span {
font-size: 24px;
color: #ffffff;
}
.hz-num-title {
font-size: 22px;
color: #ffffff;
}
>>> .el-card__body { >>> .el-card__body {
padding: 10px 0 !important; padding: 10px 0 !important;
} }

21
acupuncture-后台/src/views/indexCom/query.vue
View File

@ -17,8 +17,17 @@
<el-radio label="2" border style="margin: 0 20px 0 0">季</el-radio> <el-radio label="2" border style="margin: 0 20px 0 0">季</el-radio>
<el-radio label="3" border style="margin: 0 20px 0 0">年</el-radio> <el-radio label="3" border style="margin: 0 20px 0 0">年</el-radio>
</el-radio-group> --> </el-radio-group> -->
<el-date-picker v-model="pickerValue" type="daterange" align="right" unlink-panels range-separator="至" <el-date-picker
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="pickerChage"> v-model="pickerValue"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
@change="pickerChage"
>
</el-date-picker> </el-date-picker>
</div> </div>
</div> </div>
@ -37,7 +46,8 @@
radioTime: [], radioTime: [],
pickerValue: null, pickerValue: null,
pickerOptions: { pickerOptions: {
shortcuts: [{ shortcuts: [
{
text: "最近一周", text: "最近一周",
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
@ -141,28 +151,23 @@
margin-right: 20px !important; margin-right: 20px !important;
margin-left: 0 !important; margin-left: 0 !important;
} }
>>> .el-radio__input { >>> .el-radio__input {
display: none; display: none;
} }
>>> .el-radio__label { >>> .el-radio__label {
padding-left: 5px; padding-left: 5px;
} }
.app-container { .app-container {
padding: 0; padding: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.title1 { .title1 {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
} }
.title-bor { .title-bor {
display: inline-block; display: inline-block;
height: 20px; height: 20px;

Write Preview
Loading…
Cancel
Save