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
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
Unified 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="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>
@ -139,19 +138,17 @@
</template> </template>
<script> <script>
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 import {
} from "@/api/indexCom.js";
import {
healTypeEcharts, healTypeEcharts,
diseaseMethodEcharts, diseaseMethodEcharts,
effectEcharts, effectEcharts,
costEcharts costEcharts,
} from "./index"; } from "./index";
export default { export default {
name: "Post", name: "Post",
props: ["title"], props: ["title"],
mixins: [resize], mixins: [resize],
@ -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,78 +311,78 @@
getRenew() { getRenew() {
this.handleHealType(); this.handleHealType();
this.handleEffect(); this.handleEffect();
this.handleCost() this.handleCost();
}, },
}, },
}; };
</script> </script>
<style scoped src="@/assets/styles/common.css"></style> <style scoped src="@/assets/styles/common.css"></style>
<style scoped> <style scoped>
>>>.el-card__body { >>> .el-card__body {
padding: 10px 0 !important; padding: 10px 0 !important;
} }
.dis { .dis {
display: flex; display: flex;
} }
.header-title { .header-title {
font-size: 18px; font-size: 18px;
} }
.title-box { .title-box {
padding: 10px 20px; padding: 10px 20px;
border-bottom: 1px solid #dfe6ec; border-bottom: 1px solid #dfe6ec;
} }
.dian-box { .dian-box {
align-items: center; align-items: center;
} }
.dian { .dian {
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 50%; border-radius: 50%;
margin: 0 10px; margin: 0 10px;
} }
.title-box { .title-box {
justify-content: space-between; justify-content: space-between;
} }
.>>>.el-radio--small.is-bordered { . >>> .el-radio--small.is-bordered {
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;
} }
.title { .title {
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;
width: 6px; width: 6px;
background: #4f8bff; background: #4f8bff;
margin-right: 10px; margin-right: 10px;
border-radius: 8px; border-radius: 8px;
} }
</style> </style>

161
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>
@ -32,18 +32,12 @@
</template> </template>
<script> <script>
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 export default {
} from "@/api/indexCom.js";
import {
followEcharts,
lossFollowEcharts
} from "./index";
export default {
name: "Post", name: "Post",
props: ["title"], props: ["title"],
mixins: [resize], mixins: [resize],
@ -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,78 +184,78 @@
// 重新渲染图标 // 重新渲染图标
getRenew() { getRenew() {
this.handleFollow(); this.handleFollow();
this.handleLossFollow() this.handleLossFollow();
}, },
}, },
}; };
</script> </script>
<style scoped src="@/assets/styles/common.css"></style> <style scoped src="@/assets/styles/common.css"></style>
<style scoped> <style scoped>
>>>.el-card__body { >>> .el-card__body {
padding: 10px 0 !important; padding: 10px 0 !important;
} }
.dis { .dis {
display: flex; display: flex;
} }
.header-title { .header-title {
font-size: 18px; font-size: 18px;
} }
.title-box { .title-box {
padding: 10px 20px; padding: 10px 20px;
border-bottom: 1px solid #dfe6ec; border-bottom: 1px solid #dfe6ec;
} }
.dian-box { .dian-box {
align-items: center; align-items: center;
} }
.dian { .dian {
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 50%; border-radius: 50%;
margin: 0 10px; margin: 0 10px;
} }
.title-box { .title-box {
justify-content: space-between; justify-content: space-between;
} }
.>>>.el-radio--small.is-bordered { . >>> .el-radio--small.is-bordered {
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;
} }
.title { .title {
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;
width: 6px; width: 6px;
background: #4f8bff; background: #4f8bff;
margin-right: 10px; margin-right: 10px;
border-radius: 8px; border-radius: 8px;
} }
</style> </style>

207
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",
@ -85,13 +85,13 @@ export const gende = {
label: { label: {
show: false, show: false,
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",
@ -450,13 +439,13 @@ export const postureEcharts = {
label: { label: {
show: false, show: false,
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",
@ -627,13 +612,13 @@ export const healTypeEcharts = {
label: { label: {
show: false, show: false,
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%",
@ -693,7 +677,7 @@ export const diseaseMethodEcharts = {
series: [ series: [
{ {
name: "数量1：", name: "数量1：",
data: [1,2], data: [1, 2],
type: "bar", type: "bar",
barMaxWidth: 24, //柱图宽度 barMaxWidth: 24, //柱图宽度
itemStyle: { itemStyle: {
@ -705,7 +689,7 @@ export const diseaseMethodEcharts = {
}, },
{ {
name: "数量2：", name: "数量2：",
data: [1,3], data: [1, 3],
type: "bar", type: "bar",
barMaxWidth: 24, //柱图宽度 barMaxWidth: 24, //柱图宽度
itemStyle: { itemStyle: {
@ -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",
@ -749,13 +733,13 @@ export const effectEcharts = {
label: { label: {
show: false, show: false,
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: {
@ -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%",
@ -824,7 +808,6 @@ export const costEcharts = {
}, },
}, },
}, },
], ],
}; };
// -------- 随访 -------- // -------- 随访 --------
@ -853,7 +836,7 @@ export const followEcharts = {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: ['待随访','临近随访','超期随访','正常随访'], data: ["待随访", "临近随访", "超期随访", "正常随访"],
}, },
grid: { grid: {
top: "12%", top: "12%",
@ -873,9 +856,9 @@ export const followEcharts = {
}, },
}, },
}, },
series: [ series: [],
],
}; };
// 失访原因
export const lossFollowEcharts = { export const lossFollowEcharts = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -901,7 +884,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 +910,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],
// },
// },
}, },
}
], ],
}; };

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

@ -14,17 +14,17 @@
</div> </div>
</el-card> </el-card>
</div> </div>
<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>
<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 +47,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>
@ -74,21 +74,12 @@
</template> </template>
<script> <script>
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 export default {
} from "@/api/indexCom.js";
import {
HZXX,
HZXXSJFX,
gende,
ageEcharts,
diseaseEcharts
} from "./index";
export default {
name: "Post", name: "Post",
props: ["title"], props: ["title"],
mixins: [resize], mixins: [resize],
@ -106,25 +97,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,34 +133,42 @@
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] || 0 value: diseaseValue[key] || 0,
} };
this.diseaseValue.push(data) this.diseaseValue.push(data);
} }
this.Linepatient(); // 患者总数 this.Linepatient(); // 患者总数
this.handleAge(); // 年龄 this.handleAge(); // 年龄
@ -178,7 +177,7 @@
}); });
this.loading = false; this.loading = false;
} catch (e) { } catch (e) {
console.log('患者统计', e) console.log("患者统计", e);
} }
}, },
@ -209,7 +208,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,
@ -253,75 +252,75 @@
this.handleDisease(); //病种分布 this.handleDisease(); //病种分布
}, },
}, },
}; };
</script> </script>
<style scoped src="@/assets/styles/common.css"></style> <style scoped src="@/assets/styles/common.css"></style>
<style scoped> <style scoped>
>>>.el-card__body { >>> .el-card__body {
padding: 10px 0 !important; padding: 10px 0 !important;
} }
.dis { .dis {
display: flex; display: flex;
} }
.header-title { .header-title {
font-size: 18px; font-size: 18px;
} }
.title-box { .title-box {
padding: 10px 20px; padding: 10px 20px;
border-bottom: 1px solid #dfe6ec; border-bottom: 1px solid #dfe6ec;
} }
.dian-box { .dian-box {
align-items: center; align-items: center;
} }
.dian { .dian {
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 50%; border-radius: 50%;
margin: 0 10px; margin: 0 10px;
} }
.title-box { .title-box {
justify-content: space-between; justify-content: space-between;
} }
.>>>.el-radio--small.is-bordered { . >>> .el-radio--small.is-bordered {
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;
} }
.title { .title {
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;
width: 6px; width: 6px;
background: #4f8bff; background: #4f8bff;
margin-right: 10px; margin-right: 10px;
border-radius: 8px; border-radius: 8px;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save