Browse Source

失访

newMaster
1747191978@qq.com 4 months ago
parent
commit
3db88407a8
  1. 7
      acupuncture-前台/src/api/indexCom.js
  2. 13
      acupuncture-前台/src/views/index.vue
  3. 213
      acupuncture-前台/src/views/indexCom/follow.vue
  4. 136
      acupuncture-前台/src/views/indexCom/index.js

7
acupuncture-前台/src/api/indexCom.js

@ -136,4 +136,11 @@ export function sffb(data) {
method: "post",
data: data,
});
}
export function sftj(data) {
return request({
url: "/statistics/sftj",
method: "post",
data: data,
});
}

13
acupuncture-前台/src/views/index.vue

@ -34,6 +34,17 @@
</el-card>
<XGZL ref="XGZL"></XGZL>
</div>
<div>
<el-card shadow="always">
<search
@radio-change="radioChange"
@picker-change="pickerChage"
title="随访统计"
type="4"
></search>
</el-card>
<follow ref="follow"></follow>
</div>
</div>
</template>
@ -43,6 +54,7 @@ import search from "@/views/indexCom/query";
import patient from "@/views/indexCom/patient";
import JM from "@/views/indexCom/JM";
import XGZL from "@/views/indexCom/XGZL";
import follow from "@/views/indexCom/follow";
export default {
name: "Index",
components: {
@ -50,6 +62,7 @@ export default {
patient,
JM,
XGZL,
follow
},
data() {
return {};

213
acupuncture-前台/src/views/indexCom/follow.vue

@ -0,0 +1,213 @@
<template>
<div>
<div class="app-container">
<div class="dis" style="width: 100%">
<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>
</div>
<!-- 患者总数统计图 -->
<div style="height: 300px" v-loading="loading">
<div id="follow" style="width: 100%"></div>
</div>
</el-card>
</div>
<div style="flex: 1;">
<el-card shadow="always">
<div class="dis title-box">
<span class="header-title">失访原因分布</span>
<div class="dis"></div>
</div>
<!-- 患者总数统计图 -->
<div style="height: 300px" v-loading="loading">
<div id="lossFollow" style="width: 100%"></div>
</div>
</el-card>
</div>
</div>
</div>
</div>
</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 {
name: "Post",
props: ["title"],
mixins: [resize],
data() {
return {
loading: false,
followValue: null, //
lossFollowValue:null, //
queryParams: {
param: {
startTime: "",
endTime: "",
},
},
};
},
created() {
// this.Linepatient()
this.getData();
},
methods: {
statistics(_data, _type) {
this.initial(_data, _type); //
this.loading = true;
this.getData(); //
},
//
async getData() {
try {
await sffb(this.queryParams).then((res) => {
const {jzdl,smdl} = res
});
this.lossFollowValue = {
xAxis:[],
series:[]
}
await sftj(this.queryParams).then((res) => {
// this.lossFollowValue.xAxis = res.data.map(i => i.reason)
this.lossFollowValue = res.data
this.handleLossFollow()
});
this.loading = false;
} catch (e) {}
},
//
handleFollow() {
followEcharts.series[0].data = this.lossFollowValue?.map((item) => {
return item.value;
});
followEcharts.xAxis.data = this.lossFollowValue?.map((item) => {
return item.name;
});
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById("follow"), null, {
height: 300,
});
myChart.setOption(followEcharts, true);
myChart.resize();
window.onresize = myChart.resize;
});
},
// 访
handleLossFollow() {
lossFollowEcharts.series[0].data = this.lossFollowValue?.map((item) => {
return item.num;
});
lossFollowEcharts.xAxis.data = this.lossFollowValue?.map((item) => {
return item.reason;
});
console.log('this.lossFollowValue',this.lossFollowValue)
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById("lossFollow"), null, {
height: 300,
});
myChart.setOption(lossFollowEcharts, true);
myChart.resize();
window.onresize = myChart.resize;
});
},
//
initial(_data, _type) {
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD");
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD");
this.queryParams.param = {
startTime: _data[0] + " " + "00:00:00",
endTime: _data[1] + " " + "23:59:59",
};
},
//
getRenew() {
// this.Linepatient();
// this.columnar();
},
},
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
>>>.el-card__body {
padding: 10px 0 !important;
}
.dis {
display: flex;
}
.header-title {
font-size: 18px;
}
.title-box {
padding: 10px 20px;
border-bottom: 1px solid #dfe6ec;
}
.dian-box {
align-items: center;
}
.dian {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 0 10px;
}
.title-box {
justify-content: space-between;
}
.>>>.el-radio--small.is-bordered {
margin-right: 20px !important;
margin-left: 0 !important;
}
>>>.el-radio__input {
display: none;
}
>>>.el-radio__label {
padding-left: 5px;
}
.app-container {
padding: 0;
display: flex;
justify-content: space-between;
}
.title {
display: flex;
align-items: center;
font-size: 20px;
font-weight: 600;
}
.title-bor {
display: inline-block;
height: 20px;
width: 6px;
background: #4f8bff;
margin-right: 10px;
border-radius: 8px;
}
</style>

136
acupuncture-前台/src/views/indexCom/index.js

@ -790,7 +790,141 @@ export const costEcharts = {
],
};
// -------- 随访 --------
export const followEcharts = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
formatter: function (params) {
let res1 = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res1 +=
"<br/>" +
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` +
params[i].seriesName +
" : " +
params[i].value +
"个";
}
return res1;
},
},
xAxis: {
type: "category",
data: ['<300元','300 ~ 900元','900 ~ 2000元','2000 ~ 5000元','>5000元'],
},
grid: {
top: "12%",
left: "5%",
right: "2%",
bottom: "0%",
containLabel: true,
},
yAxis: {
name: "数量( 个 )",
type: "value",
minInterval: 1,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
},
series: [
{
name: "肥胖队列",
data: [],
type: "bar",
barMaxWidth: 24, //柱图宽度
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角,右上角,右下角,左下角]
barBorderRadius: [50, 50, 0, 0],
},
},
},
{
name: "失眠队列",
data: [],
type: "bar",
barMaxWidth: 24, //柱图宽度
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角,右上角,右下角,左下角]
barBorderRadius: [50, 50, 0, 0],
},
},
},
],
};
export const lossFollowEcharts = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
formatter: function (params) {
let res1 = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res1 +=
"<br/>" +
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` +
params[i].seriesName +
" : " +
params[i].value +
"个";
}
return res1;
},
},
xAxis: {
type: "category",
data: ['<300元','300 ~ 900元','900 ~ 2000元','2000 ~ 5000元','>5000元'],
},
grid: {
top: "12%",
left: "5%",
right: "2%",
bottom: "0%",
containLabel: true,
},
yAxis: {
name: "数量( 个 )",
type: "value",
minInterval: 1,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
},
series: [
{
name: "数量:",
data: [],
type: "bar",
barMaxWidth: 24, //柱图宽度
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角,右上角,右下角,左下角]
barBorderRadius: [50, 50, 0, 0],
},
},
}
],
};
// 患者信息 - 数据分析
export const HZXXSJFX = {
tooltip: {

Loading…
Cancel
Save