1747191978@qq.com
4 months ago
4 changed files with 952 additions and 931 deletions
@ -1,224 +1,261 @@ |
|||||
<template> |
<template> |
||||
<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> |
||||
<div class="dis"></div> |
<div class="dis"></div> |
||||
</div> |
</div> |
||||
<!-- 患者总数统计图 --> |
<!-- 患者总数统计图 --> |
||||
<div style="height: 300px" v-loading="loading"> |
<div style="height: 300px" v-loading="loading"> |
||||
<div id="follow" style="width: 100%"></div> |
<div id="follow" style="width: 100%"></div> |
||||
</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> |
||||
<div class="dis"></div> |
<div class="dis"></div> |
||||
</div> |
</div> |
||||
<!-- 患者总数统计图 --> |
<!-- 患者总数统计图 --> |
||||
<div style="height: 300px" v-loading="loading"> |
<div style="height: 300px" v-loading="loading"> |
||||
<div id="lossFollow" style="width: 100%"></div> |
<div id="lossFollow" style="width: 100%"></div> |
||||
</div> |
</div> |
||||
</el-card> |
</el-card> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</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"; |
name: "Post", |
||||
import { |
props: ["title"], |
||||
followEcharts, |
mixins: [resize], |
||||
lossFollowEcharts |
data() { |
||||
} from "./index"; |
return { |
||||
export default { |
loading: false, |
||||
name: "Post", |
followValue: [], // |
||||
props: ["title"], |
lossFollowValue: [], // |
||||
mixins: [resize], |
queryParams: { |
||||
data() { |
param: { |
||||
return { |
startTime: "", |
||||
loading: false, |
endTime: "", |
||||
followValue: [], // |
}, |
||||
lossFollowValue: [], // |
}, |
||||
queryParams: { |
}; |
||||
param: { |
}, |
||||
startTime: "", |
created() { |
||||
endTime: "", |
// this.Linepatient() |
||||
}, |
this.getData(); |
||||
}, |
}, |
||||
}; |
methods: { |
||||
}, |
statistics(_data, _type) { |
||||
created() { |
this.initial(_data, _type); // 处理数据 |
||||
// this.Linepatient() |
this.loading = true; |
||||
this.getData(); |
this.getData(); // 获取数据 |
||||
}, |
}, |
||||
methods: { |
//患者信息 |
||||
statistics(_data, _type) { |
async getData() { |
||||
this.initial(_data, _type); // 处理数据 |
try { |
||||
this.loading = true; |
this.followValue = {}; |
||||
this.getData(); // 获取数据 |
await sffb(this.queryParams).then((res) => { |
||||
}, |
res.data.forEach((i) => { |
||||
//患者信息 |
let data = [i.dsf, i.ljsf, i.cqsf, i.zc]; |
||||
async getData() { |
this.followValue[i.queueName] = data; |
||||
try { |
}); |
||||
this.followValue = {} |
this.handleFollow(); |
||||
await sffb(this.queryParams).then((res) => { |
}); |
||||
res.data.forEach(i => { |
await sftj(this.queryParams).then((res) => { |
||||
let data = [i.dsf, i.ljsf, i.cqsf, i.zc] |
this.lossFollowValue = res.data; |
||||
this.followValue[i.queueName] = data |
this.handleLossFollow(); |
||||
}) |
}); |
||||
this.handleFollow() |
this.loading = false; |
||||
}); |
} catch (e) { |
||||
await sftj(this.queryParams).then((res) => { |
console.log("随访", e); |
||||
this.lossFollowValue = res.data |
} |
||||
this.handleLossFollow() |
}, |
||||
}); |
|
||||
this.loading = false; |
|
||||
} catch (e) { |
|
||||
console.log('随访', e) |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 队列 |
// 队列 |
||||
handleFollow() { |
handleFollow() { |
||||
followEcharts.series = [] |
followEcharts.series = []; |
||||
for (let key in this.followValue) { |
let colorArr = [ |
||||
let series = { |
"#C7BDB1", |
||||
name: key, |
"#C6A268", |
||||
data: this.followValue[key], |
"#906C4A", |
||||
type: "bar", |
"#70483E", |
||||
barMaxWidth: 24, //柱图宽度 |
"#582518", |
||||
itemStyle: { |
"#C7BDB1", |
||||
normal: { |
"#C6A268", |
||||
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角] |
"#906C4A", |
||||
barBorderRadius: [50, 50, 0, 0], |
"#70483E", |
||||
}, |
"#582518", |
||||
}, |
"#C7BDB1", |
||||
} |
"#C6A268", |
||||
followEcharts.series.push(series) |
"#906C4A", |
||||
} |
"#70483E", |
||||
this.$nextTick(() => { |
"#582518", |
||||
var myChart = echarts.init(document.getElementById("follow"), null, { |
"#C7BDB1", |
||||
height: 300, |
"#C6A268", |
||||
}); |
"#906C4A", |
||||
myChart.setOption(followEcharts, true); |
"#70483E", |
||||
myChart.resize(); |
"#582518", |
||||
window.onresize = myChart.resize; |
"#C7BDB1", |
||||
}); |
"#C6A268", |
||||
}, |
"#906C4A", |
||||
// 失访 |
"#70483E", |
||||
handleLossFollow() { |
"#582518", |
||||
lossFollowEcharts.series[0].data = this.lossFollowValue?.map((item) => { |
"#C7BDB1", |
||||
return item.num; |
"#C6A268", |
||||
}); |
"#906C4A", |
||||
lossFollowEcharts.xAxis.data = this.lossFollowValue?.map((item) => { |
"#70483E", |
||||
return item.reason; |
"#582518", |
||||
}); |
"#C7BDB1", |
||||
this.$nextTick(() => { |
"#C6A268", |
||||
var myChart = echarts.init(document.getElementById("lossFollow"), null, { |
"#906C4A", |
||||
height: 300, |
"#70483E", |
||||
}); |
"#582518", |
||||
myChart.setOption(lossFollowEcharts, true); |
"#C7BDB1", |
||||
myChart.resize(); |
"#C6A268", |
||||
window.onresize = myChart.resize; |
"#906C4A", |
||||
}); |
"#70483E", |
||||
}, |
"#582518", |
||||
// 数据处理 查询类型判断参数 |
]; |
||||
initial(_data, _type) { |
let index = 0; |
||||
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD"); |
for (let key in this.followValue) { |
||||
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD"); |
let series = { |
||||
this.queryParams.param = { |
name: key, |
||||
startTime: _data[0] + " " + "00:00:00", |
data: this.followValue[key], |
||||
endTime: _data[1] + " " + "23:59:59", |
type: "bar", |
||||
}; |
barMaxWidth: 24, //柱图宽度 |
||||
}, |
color: colorArr[index], |
||||
// 重新渲染图标 |
}; |
||||
getRenew() { |
followEcharts.series.push(series); |
||||
this.handleFollow(); |
index++; |
||||
this.handleLossFollow() |
} |
||||
}, |
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; |
||||
|
}); |
||||
|
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.handleFollow(); |
||||
|
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> |
||||
|
|||||
Loading…
Reference in new issue