carbasics2023_web_pad_v4/src/views/statistics/index.vue

<template>
	<div class="statistics">
		<div class="statistics-container">
			<div class="sta-row">
				<div class="sta-row-head">
					<div class="sta-row-title">
						<img src="@/assets/images/slice/title-line.png" alt="" />
						<span class="sta-row-text">病历统计</span>
					</div>
					<div class="sta-row-filter">
						<a-radio-group v-model="queryParams1.timeType" @change="typeChange($event, 'queryParams1')">
							<a-radio-button value="0">周</a-radio-button>
							<a-radio-button value="1">月</a-radio-button>
							<a-radio-button value="2">季</a-radio-button>
							<a-radio-button value="3">年</a-radio-button>
						</a-radio-group>
						<a-range-picker format="YYYY-MM-DD" style="width: 280px;" :placeholder="['开始日期','结束日期']"
							separator="至" @change="dateChange($event, 'queryParams1')" />
					</div>
				</div>
				<div class="sta-row-echart">
					<a-row :gutter="[16,16]">
						<a-col :span="12">
							<div class="echarts-box" ref="blboxl"></div>
						</a-col>
						<a-col :span="12">
							<div class="echarts-box" ref="blboxr"></div>
						</a-col>
					</a-row>
				</div>
			</div>
			<div class="sta-row">
				<div class="sta-row-head">
					<div class="sta-row-title">
						<img src="@/assets/images/slice/title-line.png" alt="" />
						<span class="sta-row-text">静脉溶栓统计</span>
					</div>
					<div class="sta-row-filter">
						<a-radio-group v-model="queryParams2.timeType" @change="typeChange($event, 'queryParams2')">
							<a-radio-button value="0">周</a-radio-button>
							<a-radio-button value="1">月</a-radio-button>
							<a-radio-button value="2">季</a-radio-button>
							<a-radio-button value="3">年</a-radio-button>
						</a-radio-group>
						<a-range-picker format="YYYY-MM-DD" style="width: 280px;" :placeholder="['开始日期','结束日期']"
							separator="至" @change="dateChange($event, 'queryParams2')" />
					</div>
				</div>
				<div class="sta-row-echart">
					<a-row :gutter="[16,16]">
						<a-col :span="12">
							<div class="echarts-box" ref="jmrsboxlt"></div>
						</a-col>
						<a-col :span="12">
							<div class="echarts-box" ref="jmrsboxrt"></div>
						</a-col>
						<a-col :span="12">
							<div class="echarts-box" ref="jmrsboxlb"></div>
						</a-col>
						<a-col :span="12">
							<div class="echarts-box" ref="jmrsboxrb"></div>
						</a-col>
					</a-row>
				</div>
			</div>
			<div class="sta-row">
				<div class="sta-row-head">
					<div class="sta-row-title">
						<img src="@/assets/images/slice/title-line.png" alt="" />
						<span class="sta-row-text">血管内治疗统计</span>
					</div>
					<div class="sta-row-filter">
						<a-radio-group v-model="queryParams3.timeType" @change="typeChange($event, 'queryParams3')">
							<a-radio-button value="0">周</a-radio-button>
							<a-radio-button value="1">月</a-radio-button>
							<a-radio-button value="2">季</a-radio-button>
							<a-radio-button value="3">年</a-radio-button>
						</a-radio-group>
						<a-range-picker format="YYYY-MM-DD" style="width: 280px;" :placeholder="['开始日期','结束日期']"
							separator="至" @change="dateChange($event, 'queryParams3')" />
					</div>
				</div>
				<div class="sta-row-echart">
					<a-row :gutter="[16,16]">
						<a-col :span="12">
							<div class="echarts-box" ref="xgnboxlt"></div>
						</a-col>
						<a-col :span="12">
							<div class="echarts-box" ref="xgnboxrt"></div>
						</a-col>
						<a-col :span="12">
							<div class="echarts-box" ref="xgnboxlb"></div>
						</a-col>
						<a-col :span="12">
							<div class="echarts-box" ref="xgnboxrb"></div>
						</a-col>
					</a-row>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		queryRptResult,
		queryDptResult,
		selectXgzl,
		// queryDptResult,
		querySichResult,
		queryDntResult,
		queryJmrs,
		queryJmrsResult,
		queryByDatePatient,
		queryPatient,
	} from 'api';
	import * as echarts from 'echarts'
	import * as dayjs from 'dayjs'
	export default {
		name: 'Statistics',
		data() {
			return {
				queryParams1: {
					"timeType":"0",     //统计方式 0:周 1:月 2:季 3:年
					"startTime":"2024-10-01 00:00:00",    //开始时间
					"endTime":"2025-01-01 00:00:00" //结束时间
				},
				queryParams2: {
					"timeType":"0",     //统计方式 0:周 1:月 2:季 3:年
					"startTime":"2024-10-01 00:00:00",    //开始时间
					"endTime":"2025-01-01 00:00:00" //结束时间
				},
				queryParams3: {
					"timeType":"0",     //统计方式 0:周 1:月 2:季 3:年
					"startTime":"2024-10-01 00:00:00",    //开始时间
					"endTime":"2025-01-01 00:00:00" //结束时间
				}
			}
		},
		mounted() {
			// queryRptResult({
			// 	param: {
			// 		"timeType":"0",     //统计方式 0:周 1:月 2:季 3:年
			// 		"startTime":"2024-10-01 00:00:00",    //开始时间
			// 		"endTime":"2025-01-01 00:00:00" //结束时间
			// 	}
			// })
			
			// queryDptResult({
			// 	param: {
			// 		"timeType":"0",     //统计方式 0:周 1:月 2:季 3:年
			// 		"startTime":"2024-10-01 00:00:00",    //开始时间
			// 		"endTime":"2025-01-01 00:00:00" //结束时间
			// 	}
			// })
			// selectXgzl({
			// 	param: {
			// 		"timeType":"0",     //统计方式 0:周 1:月 2:季 3:年
			// 		"startTime":"2024-10-01 00:00:00",    //开始时间
			// 		"endTime":"2025-01-01 00:00:00" //结束时间
			// 	}
			// })
			// querySichResult({
			// 	param: {
			// 		"timeType":"0",     //统计方式 0:周 1:月 2:季 3:年
			// 		"startTime":"2024-10-01 00:00:00",    //开始时间
			// 		"endTime":"2025-01-01 00:00:00" //结束时间
			// 	}
			// })
			// queryDntResult({
			// 	param: {
			// 		"timeType":"0",     //统计方式 0:周 1:月 2:季 3:年
			// 		"startTime":"2024-10-01 00:00:00",    //开始时间
			// 		"endTime":"2025-01-01 00:00:00" //结束时间
			// 	}
			// })
			// queryJmrs({
			// 	param: {
			// 		"timeType":"0",     //统计方式 0:周 1:月 2:季 3:年
			// 		"startTime":"2024-10-01 00:00:00",    //开始时间
			// 		"endTime":"2025-01-01 00:00:00" //结束时间
			// 	}
			// })
			// queryJmrsResult({
			// 	param: {
			// 		"timeType":"0",     //统计方式 0:周 1:月 2:季 3:年
			// 		"startTime":"2024-10-01 00:00:00",    //开始时间
			// 		"endTime":"2025-01-01 00:00:00" //结束时间
			// 	}
			// })
			// queryByDatePatient({
			// 	param: {
			// 		"timeType":"0",     //统计方式 0:周 1:月 2:季 3:年
			// 		"startTime":"2024-10-01 00:00:00",    //开始时间
			// 		"endTime":"2025-01-01 00:00:00" //结束时间
			// 	}
			// })
			// queryPatient({
			// 	param: {
			// 		"timeType":"0",     //统计方式 0:周 1:月 2:季 3:年
			// 		"startTime":"2024-10-01 00:00:00",    //开始时间
			// 		"endTime":"2025-01-01 00:00:00" //结束时间
			// 	}
			// })
			this.init()
		},
		methods: {
			init(filed){
				switch(filed)
				{
					case "queryParams1":
						this.getData1()
						this.getData2()
						break;
					case "queryParams2":
						this.getData3()
						this.getData4()
						this.getData5()
						this.getData6()
						break;
					case "queryParams3":
						this.getData7()
						this.getData8()
						this.getData9()
						this.getData10()
						break;
					default:
						this.getData1()
						this.getData2()
						this.getData3()
						this.getData4()
						this.getData5()
						this.getData6()
						this.getData7()
						this.getData8()
						this.getData9()
						this.getData10()
						break;
				}
				
				
				
			},
			typeChange(e, filed){
				this[filed]['timeType'] = e.target.value
				this.init(filed)
			},
			dateChange(dates,filed){
				const startTime = dates[0].format('YYYY-MM-DD HH:mm:ss')
				const endTime = dates[1].format('YYYY-MM-DD HH:mm:ss')
				this[filed]['startTime'] = startTime
				this[filed]['endTime'] = endTime
				this.init(filed)
			},
			// 病历统计- 病历统计
			async getData1() {
				const res = await queryPatient({param: this.queryParams1})
				const { onlyRs = 0, onlyXgzl = 0, both = 0, neither = 0} = res.data
				var series = [{
						value: onlyRs,
						name: '仅溶栓人数'
					},
					{
						value: onlyXgzl,
						name: '仅介入人数'
					},
					{
						value: both,
						name: '溶栓且介入人数'
					},
					{
						value: neither,
						name: '未溶栓且未介入人数'
					}
				]

				var chartDom = this.$refs.blboxl
				var myChart = echarts.init(chartDom);
				var option = {
					title: {
						text: '病历统计',
						left: 'left'
					},
					color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'],
					legend: {
						bottom: 0,
						left: 'left'
					},
					series: [{
						name: '病历统计',
						type: 'pie',
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						itemStyle: {
							borderColor: '#fff',
							borderWidth: 2
						},
						radius: ['5%', '70%'],
						data: series
					}]
				};

				option && myChart.setOption(option);

			},
			// 病历统计- 数据对比
			async getData2() {
				var chartDom = this.$refs.blboxr
				var myChart = echarts.init(chartDom);
				
				const res = await queryByDatePatient({param: this.queryParams1})
				const {list = []} = res.data

				var items = ['仅溶栓人数', '仅介入人数', '未溶栓且未介入人数', '溶栓且未介入人数']

				var xdata = [];
				var series = [];
				
				const newlist = list.map(a => {
					xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
					return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
				})
				items.forEach(i => {
					var item = {
						name: i,
						type: 'bar',
						barWidth: 5,
						data: [],
					}
					var filed = ""
					if(i == '仅溶栓人数') filed = "onlyRs"
					else if(i == '仅介入人数') filed = "onlyXgzl"
					else if(i == '溶栓且介入人数') filed = "both"
					else if(i == '未溶栓且未介入人数') filed = "neither"
					newlist.forEach(a => {
						var itemdata = {
							value: a[filed],
							itemStyle: {
								borderRadius: [20, 20, 0, 0]
							}
						}
						item.data.push(itemdata)
					})
					series.push(item)
				})
				
				var option = {
					title: {
						text: '数据对比',
						left: 'left'
					},
					color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'],
					legend: {
						bottom: 0,
						left: 'left'
					},
					xAxis: [{
						type: 'category',
						data: xdata
					}],
					yAxis: [{
						type: 'value'
					}],
					series: series
				};

				option && myChart.setOption(option);
			},
			// 静脉溶栓统计- 静脉溶栓率
			async getData3() {
				var chartDom = this.$refs.jmrsboxlt
				var myChart = echarts.init(chartDom);
				
				const res = await queryJmrs({param: this.queryParams2})

				var xdata = [];
				const newlist = res.data.map(a => {
					xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
					return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
				})

				var series = [{
					name: "静脉溶栓率",
					type: 'bar',
					barWidth: 5,
					data: newlist.map(a => ({
						value: a['decimal'],
						itemStyle: {
							borderRadius: [20, 20, 0, 0]
						}
					}))
				}];

				var option = {
					title: {
						text: '静脉溶栓率',
						left: 'left'
					},
					color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'],
					xAxis: [{
						type: 'category',
						data: xdata
					}],
					yAxis: [{
						type: 'value'
					}],
					series: series
				};

				option && myChart.setOption(option);
			},
			// 静脉溶栓统计- 数据对比
			async getData4() {
				var chartDom = this.$refs.jmrsboxrt
				var myChart = echarts.init(chartDom);

				const res = await queryJmrs({param: this.queryParams2})
				const list = res.data
				var items = ['静脉溶栓人数', '急救特征人数']
				
				var xdata = [];
				var series = [];
				
				const newlist = list.map(a => {
					xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
					return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
				})
				items.forEach(i => {
					var item = {
						type: 'line',
						areaStyle: {},
						data: [],
					}
					var filed = ""
					if(i == '静脉溶栓人数') filed = "gailv"
					else if(i == '急救特征人数') filed = "total"
					newlist.forEach(a => {
						var itemdata = {
							value: a[filed],
							itemStyle: {
								borderRadius: [20, 20, 0, 0]
							}
						}
						item.data.push(itemdata)
					})
					series.push(item)
				})

				var option = {
					title: {
						text: '数据对比',
						left: 'left'
					},
					color: ['#008660', '#6F7FF6', '#F3D37C', '#5AD0A5'],
					legend: {
						left: 'right'
					},
					xAxis: [{
						type: 'category',
						data: xdata
					}],
					yAxis: [{
						type: 'value'
					}],
					series: series
				};

				option && myChart.setOption(option);
			},
			// 静脉溶栓统计- sICH发生率 
			async getData5() {
				var chartDom = this.$refs.jmrsboxlb
				var myChart = echarts.init(chartDom);
				const res = await querySichResult({param: this.queryParams2})
				
				var xdata = [];
				const newlist = res.data.map(a => {
					xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
					return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
				})
				
				var series = [{
					type: 'line',
					areaStyle: {},
					data: newlist.map(a => ({
						value: a['decimal'],
						itemStyle: {
							borderRadius: [20, 20, 0, 0]
						}
					}))
				}];

				var option = {
					title: {
						text: 'slCH发生率',
						left: 'left'
					},
					color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'],
					legend: {
						left: 'right'
					},
					xAxis: [{
						type: 'category',
						data: xdata
					}],
					yAxis: [{
						type: 'value'
					}],
					series: series
				};

				option && myChart.setOption(option);
			},
			// 静脉溶栓统计- DNT分布 
			async getData6() {
				var chartDom = this.$refs.jmrsboxrb
				var myChart = echarts.init(chartDom);
				
				const res = await queryDntResult({param: this.queryParams2})
				var items = ['≤45min', '≤60min', '>60min']
				var xdata = [];
				var series = [];
				const newlist = res.data.map(a => {
					xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
					return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
				})
				items.forEach(i => {
					var item = {
						name: i,
						type: 'bar',
						barWidth: 5,
						data: [],
					}
					var filed = ""
					if(i == '≤45min') filed = "dy45"
					else if(i == '≤60min') filed = "dy60"
					else if(i == '>60min') filed = "other"
					newlist.forEach(a => {
						var itemdata = {
							value: a[filed],
							itemStyle: {
								borderRadius: [20, 20, 0, 0]
							}
						}
						item.data.push(itemdata)
					})
					series.push(item)
				})

				var option = {
					title: {
						text: 'DNT分布',
						left: 'left'
					},
					color: ['#6F7FF6', '#F3D37C', '#008660', '#5AD0A5'],
					legend: {
						left: 'right'
					},
					xAxis: [{
						type: 'category',
						data: xdata
					}],
					yAxis: [{
						type: 'value'
					}],
					series: series
				};

				option && myChart.setOption(option);
			},
			// 血管内治疗统计- 血管内治疗率
			async getData7() {
				var chartDom = this.$refs.xgnboxlt
				var myChart = echarts.init(chartDom);
				const res = await querySichResult({param: this.queryParams3})
				
				var xdata = [];
				const newlist = res.data.map(a => {
					xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
					return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
				})
				
				var series = [{
					type: 'line',
					areaStyle: {},
					data: newlist.map(a => ({
						value: a['bfNum'],
						itemStyle: {
							borderRadius: [20, 20, 0, 0]
						}
					}))
				}];

				// var xdata = [];
				// var year = new Date().getFullYear()
				// for (let i = 0; i < 12; i++) {
				// 	var month = i < 10 ? ('0' + (i + 1)) : ((i + 1) + '')
				// 	xdata.push(year + '-' + month)
				// }
				// var series = [{
				// 	type: 'line',
				// 	areaStyle: {},
				// 	data: [],
				// }]
				// for (let j = 0; j < 12; j++) {
				// 	series[0].data.push(Math.floor(Math.random() * 101))
				// }

				var option = {
					title: {
						text: '血管内治疗率',
						left: 'left'
					},
					color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'],
					legend: {
						left: 'right'
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: xdata
					}],
					yAxis: [{
						type: 'value'
					}],
					series: series
				};

				option && myChart.setOption(option);
			},
			// 血管内治疗统计- 数据对比
			async getData8() {
				var chartDom = this.$refs.xgnboxrt
				var myChart = echarts.init(chartDom);
				
				const res = await selectXgzl({param: this.queryParams3})
				
				var items = ['桥接治疗人数', '非桥接治疗人数']
				var xdata = [];
				var series = [];
				const newlist = res.data.map(a => {
					xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
					return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
				})
				items.forEach(i => {
					var item = {
						name: i,
						type: 'bar',
						barWidth: 5,
						data: [],
					}
					var filed = ""
					if(i == '桥接治疗人数') filed = "qiaojie"
					else if(i == '非桥接治疗人数') filed = "falseQiaojie"
					newlist.forEach(a => {
						var itemdata = {
							value: a[filed],
							itemStyle: {
								borderRadius: [20, 20, 0, 0]
							}
						}
						item.data.push(itemdata)
					})
					series.push(item)
				})
				var option = {
					title: {
						text: '数据对比',
						left: 'left'
					},
					color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'],
					legend: {
						left: 'right'
					},
					xAxis: [{
						type: 'category',
						data: xdata
					}],
					yAxis: [{
						type: 'value'
					}],
					series: series
				};

				option && myChart.setOption(option);
			},
			// 血管内治疗统计- DPT
			async getData9() {
				var chartDom = this.$refs.xgnboxlb
				var myChart = echarts.init(chartDom);
				
				const res = await queryDptResult({param: this.queryParams3})
				
				var items = ['≤60min', '≤90min', '>90min']
				var xdata = [];
				var series = [];
				const newlist = res.data.map(a => {
					xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
					return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
				})
				items.forEach(i => {
					var item = {
						name: i,
						type: 'bar',
						barWidth: 5,
						data: [],
					}
					var filed = ""
					if(i == '≤60min') filed = "dy60"
					else if(i == '≤90min') filed = "dy90"
					else if(i == '>90min') filed = "other"
					newlist.forEach(a => {
						var itemdata = {
							value: a[filed],
							itemStyle: {
								borderRadius: [20, 20, 0, 0]
							}
						}
						item.data.push(itemdata)
					})
					series.push(item)
				})

				var option = {
					title: {
						text: 'DPT',
						left: 'left'
					},
					color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'],
					legend: {
						left: 'right'
					},
					xAxis: [{
						type: 'category',
						data: xdata
					}],
					yAxis: [{
						type: 'value'
					}],
					series: series
				};

				option && myChart.setOption(option);
			},
			// 血管内治疗统计- RPT
			async getData10() {
				var chartDom = this.$refs.xgnboxrb
				var myChart = echarts.init(chartDom);
				
				const res = await queryRptResult({param: this.queryParams3})
				
				var items = ['≤60min', '≤90min', '>90min']
				var xdata = [];
				var series = [];
				const newlist = res.data.map(a => {
					xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
					return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
				})
				items.forEach(i => {
					var item = {
						name: i,
						type: 'bar',
						barWidth: 5,
						data: [],
					}
					var filed = ""
					if(i == '≤60min') filed = "dy60"
					else if(i == '≤90min') filed = "dy90"
					else if(i == '>90min') filed = "other"
					newlist.forEach(a => {
						var itemdata = {
							value: a[filed],
							itemStyle: {
								borderRadius: [20, 20, 0, 0]
							}
						}
						item.data.push(itemdata)
					})
					series.push(item)
				})

				var option = {
					title: {
						text: 'PRT',
						left: 'left'
					},
					color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'],
					legend: {
						left: 'right'
					},
					xAxis: [{
						type: 'category',
						data: xdata
					}],
					yAxis: [{
						type: 'value'
					}],
					series: series
				};

				option && myChart.setOption(option);
			},
		}
	}
</script>

<style lang="less" scoped>
	.statistics {
		// padding: 10px;
		.statistics-container{
			.sta-row {
				background: #fff;
				margin-bottom: .2rem;
				padding: 10px;
				overflow: hidden;
				box-sizing: border-box;
				.sta-row-head {
					width: 100%;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #eee;
					.sta-row-title {
						height: 50px;
						line-height: 50px;
						// display: flex;
						// align-items: center;
			
						img {
							width: 5px;
						}
			
						.sta-row-text {
							padding: 2px 10px;
							font-size: 1.3rem;
							font-weight: bold;
						}
					}
			
					.sta-row-filter {
						height: 50px;
						display: flex;
						align-items: center;
					}
				}
			
				.echarts-box {
					height: 420px;
					background-color: #ffffff;
					border-radius: 10px;
					padding: 10px;
					box-sizing: border-box;
					overflow: hidden;
				}
			}
		}
		
	}
</style>

<style lang="less">
	.statistics {
		.sta-row {
			.sta-row-head {
				.sta-row-filter {
					.ant-radio-group {
						height: 32px;
					}

					.ant-radio-button-wrapper {
						border-radius: 6px;
						margin-right: 10px;
						overflow: hidden;
						box-sizing: border-box;
						border-left: 1px solid #d9d9d9;
						&.ant-radio-button-wrapper-checked{
							border-left: 1px solid #0062d9;
						}
					}
				}
			}
		}
	}
</style>