1747191978@qq.com
4 months ago
4 changed files with 368 additions and 1 deletions
@ -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> |
||||
Loading…
Reference in new issue