You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
621 lines
17 KiB
621 lines
17 KiB
<template>
|
|
<div class="box">
|
|
<div>
|
|
<div class="middlebox">
|
|
<div class="contenttitle">
|
|
客户报表 /
|
|
<span class="contenttitleBold">疾病人数统计</span>
|
|
</div>
|
|
</div>
|
|
<div :style="'display: block;'">
|
|
<div
|
|
style="
|
|
background-color: #fff;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 10px;
|
|
height: 35px;
|
|
margin-top: 7px;
|
|
"
|
|
>
|
|
<div class="query">
|
|
<span class="spanClass">体检单位</span>
|
|
<el-input
|
|
placeholder="请选择体检单位"
|
|
v-model="patientRegister.query.cusOrgOCX"
|
|
style="width: 240px"
|
|
size="small"
|
|
disabled
|
|
>
|
|
<el-button
|
|
slot="append"
|
|
icon="el-icon-search"
|
|
@click="diagnosis.dialogCusOrgOCX = true"
|
|
style="font-size: 20px"
|
|
></el-button>
|
|
</el-input>
|
|
</div>
|
|
<div class="query">
|
|
<span class="spanClass">诊断</span>
|
|
<el-input
|
|
placeholder="请选择诊断"
|
|
v-model="patientRegister.query.StatisticsOCX"
|
|
style="width: 200px"
|
|
size="small"
|
|
disabled
|
|
>
|
|
<el-button
|
|
slot="append"
|
|
icon="el-icon-search"
|
|
@click="diagnosis.dialogAsbitemOCX = true"
|
|
style="font-size: 20px"
|
|
></el-button>
|
|
</el-input>
|
|
</div>
|
|
<div class="query">
|
|
<span class="spanClass">状态</span>
|
|
<el-select
|
|
v-model="patientRegister.query.completeFlags"
|
|
placeholder="请选择"
|
|
clearable
|
|
style="width: 150px"
|
|
size="small"
|
|
multiple
|
|
collapse-tags
|
|
>
|
|
<el-option
|
|
v-for="item in dict.completeFlag"
|
|
:key="item.id"
|
|
:label="item.displayName"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<!-- <div class="query">
|
|
<span>疾病来源：</span>
|
|
<el-select v-model="patientRegister.query.isCharge" placeholder="请选择" clearable style="width: 80px"
|
|
size="small">
|
|
<el-option label="综述" value="0" />
|
|
<el-option label="建议" value="1" />
|
|
<el-option label="疾病列表" value="2" />
|
|
</el-select>
|
|
</div>
|
|
<div class="query">
|
|
<el-checkbox v-model="classification" true-label="Y" false-label="N"/>
|
|
<span>分类统计</span>
|
|
</div> -->
|
|
<div class="query">
|
|
<el-button @click="btnQuery" size="small" class="commonbutton"
|
|
>查询</el-button
|
|
>
|
|
</div>
|
|
<div class="query">
|
|
<el-button @click="handleExport" size="small" class="commonbutton"
|
|
>导出excel</el-button
|
|
>
|
|
</div>
|
|
<div class="query">
|
|
<el-button @click="onPrint" size="small" class="commonbutton"
|
|
>打印</el-button
|
|
>
|
|
</div>
|
|
<div class="query">
|
|
<el-button @click="columnarChart" size="small" class="commonbutton"
|
|
>柱状图</el-button
|
|
>
|
|
</div>
|
|
<div class="query">
|
|
<el-button @click="peiChart" size="small" class="commonbutton"
|
|
>饼图</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
"
|
|
id="domTable"
|
|
>
|
|
<div
|
|
style="
|
|
width: 47.7%;
|
|
background-color: #fff;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
"
|
|
ref="imageDom"
|
|
>
|
|
<el-table
|
|
:data="dataList"
|
|
border
|
|
width="45%"
|
|
:height="
|
|
flag
|
|
? window.pageHeight < 600
|
|
? 415
|
|
: window.pageHeight - 185 - 20
|
|
: ''
|
|
"
|
|
row-key="id"
|
|
highlight-current-row
|
|
ref="dataList"
|
|
id="table"
|
|
:row-class-name="tableRowClassName"
|
|
show-summary
|
|
:summary-method="getSummaries"
|
|
>
|
|
<el-table-column
|
|
:label="`开始时间： ${summary.startDate || ''} 结束时间：${
|
|
summary.endDate || ''
|
|
} 男性： ${summary.maleCount} 女性： ${summary.femaleCount}`"
|
|
align="left"
|
|
>
|
|
<el-table-column prop="diagnosisName" label="疾病" />
|
|
<el-table-column prop="patientCount" label="人数" />
|
|
<el-table-column prop="percentage" label="人员占比">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.percentage + "%" }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div
|
|
:style="
|
|
'width: 47.7%;overflow: hidden;height:' +
|
|
(window.pageHeight < 600 ? 415 : window.pageHeight - 185 - 20) +
|
|
'px;background-color: #fff; padding: 15px; border-radius: 8px;'
|
|
"
|
|
>
|
|
<div
|
|
style="
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #232748;
|
|
font-family: 'NotoSansSC-Bold';
|
|
text-align: center;
|
|
"
|
|
>
|
|
疾病人数统计
|
|
</div>
|
|
<div
|
|
:style="
|
|
'height:' +
|
|
(window.pageHeight < 600 ? 387 : window.pageHeight - 185 - 48) +
|
|
'px;'
|
|
"
|
|
>
|
|
<ChartBlock ref="chart2"></ChartBlock>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--通用选单位、体检次数、分组的控件-->
|
|
<el-dialog
|
|
title="体检单位选择"
|
|
:visible.sync="diagnosis.dialogCusOrgOCX"
|
|
:close-on-click-modal="false"
|
|
width="880px"
|
|
height="600px"
|
|
>
|
|
<CusOrgOCX :initDateType="'creationTime'" :useCustomerOrg="true" />
|
|
</el-dialog>
|
|
<!--通用选组合项目的控件-->
|
|
<el-dialog
|
|
title="诊断选择"
|
|
:visible.sync="diagnosis.dialogAsbitemOCX"
|
|
:close-on-click-modal="false"
|
|
width="700px"
|
|
height="600px"
|
|
>
|
|
<StatisticsOCX />
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import moment from "moment";
|
|
import { mapState, mapActions } from "vuex";
|
|
import { getapi, postapi, putapi, deletapi } from "@/api/api";
|
|
import { exportToExcel } from "../../utlis/Export2Excel";
|
|
import html2canvas from "html2canvas";
|
|
import printJs from "print-js";
|
|
import {
|
|
dddw,
|
|
objCopy,
|
|
arrayReduce,
|
|
arrayExistObj,
|
|
tcdate,
|
|
} from "@/utlis/proFunc";
|
|
import CusOrgOCX from "../../components/report/CusOrgOCX.vue";
|
|
import StatisticsOCX from "../../components/report/StatisticsOCX.vue";
|
|
import ChartBlock from "../../components/workload/chartsBlock";
|
|
|
|
export default {
|
|
components: {
|
|
CusOrgOCX,
|
|
StatisticsOCX,
|
|
ChartBlock,
|
|
},
|
|
data() {
|
|
return {
|
|
dataList: [], //列表数据
|
|
// classification:'Y'
|
|
seriesData: [],
|
|
yAxisData: [],
|
|
pieData: [],
|
|
flag: true,
|
|
summary: {
|
|
startDate: "",
|
|
endDate: "",
|
|
femaleCount: "",
|
|
maleCount: "",
|
|
},
|
|
};
|
|
},
|
|
|
|
created() {
|
|
this.dictInit();
|
|
},
|
|
|
|
//挂载完成
|
|
mounted() {
|
|
// this.btnQuery();
|
|
},
|
|
|
|
computed: {
|
|
...mapState(["window", "dict", "patientRegister", "diagnosis"]),
|
|
},
|
|
|
|
methods: {
|
|
moment,
|
|
dddw,
|
|
//数据初始化
|
|
dictInit() {
|
|
//体检中心
|
|
getapi("/api/app/organization-units/organization-unit-by-is-peis").then(
|
|
(res) => {
|
|
if (res.code == 1) {
|
|
this.dict.organization = res.data;
|
|
}
|
|
}
|
|
);
|
|
|
|
//体检单位树
|
|
getapi("/api/app/customerorg/getbycodeall").then((res) => {
|
|
if (res.code == 1) {
|
|
this.patientRegister.customerOrgTreeAll = res.data;
|
|
tcdate(this.patientRegister.customerOrgTreeAll);
|
|
}
|
|
});
|
|
|
|
//体检类别
|
|
getapi("/api/app/medical-type/in-filter").then((res) => {
|
|
if (res.code == 1) {
|
|
this.dict.medicalType = res.data;
|
|
}
|
|
});
|
|
|
|
//体检类别 树结构
|
|
getapi("/api/app/item-type/by-code-all").then((res) => {
|
|
if (res.code == 1) {
|
|
this.dict.itemTypeTree = res.data;
|
|
tcdate(this.dict.itemTypeTree);
|
|
}
|
|
});
|
|
|
|
postapi("/api/app/Diagnosis/GetSimpleList").then((res) => {
|
|
if (res.code == 1) {
|
|
this.dict.asbItemAll = res.data;
|
|
}
|
|
});
|
|
},
|
|
getSummaries(param) {
|
|
const { columns, data } = param;
|
|
const sums = [];
|
|
columns.forEach((column, index) => {
|
|
if (index === 0) {
|
|
sums[index] = "合计";
|
|
return;
|
|
}
|
|
if (index === 1) {
|
|
let num = 0;
|
|
data.forEach((item, index) => {
|
|
num += item.patientCount;
|
|
});
|
|
sums[index] = num + " 人";
|
|
}
|
|
});
|
|
|
|
return sums;
|
|
},
|
|
tableRowClassName({ row, rowIndex }) {
|
|
switch (row.isCharge) {
|
|
case "N":
|
|
return "danger";
|
|
default:
|
|
return "";
|
|
}
|
|
},
|
|
onPrint() {
|
|
this.flag = false;
|
|
this.$nextTick(() => {
|
|
let width = this.$refs.imageDom.style.width;
|
|
let cloneDom = this.$refs.imageDom.cloneNode(true);
|
|
let imageDom = this.$refs.imageDom;
|
|
cloneDom.style.position = "absolute";
|
|
cloneDom.style.top = "0px";
|
|
cloneDom.style.zIndex = "-1";
|
|
cloneDom.style.width = width;
|
|
console.log(cloneDom);
|
|
imageDom.appendChild(cloneDom);
|
|
html2canvas(cloneDom).then((canvas) => {
|
|
// 转成图片，生成图片地址
|
|
const url = canvas.toDataURL("image/png");
|
|
printJs({
|
|
printable: url,
|
|
type: "image",
|
|
documentTitle: "", // 标题
|
|
style: `@media print { @page {size: auto; margin: 0 0 0 0; } body{margin:0 5px}canvas{page-break-after: always;page-break-inside: avoid;
|
|
page-break-after: avoid;
|
|
page-break-before: avoid;}}`, // 去除页眉页脚
|
|
});
|
|
});
|
|
cloneDom.style.display = "none";
|
|
this.flag = true;
|
|
});
|
|
},
|
|
handleExport() {
|
|
exportToExcel("#table", "疾病人数统计", false);
|
|
},
|
|
//查询
|
|
btnQuery() {
|
|
let body = {},
|
|
customerOrgs = [],
|
|
diagnosisIds = [];
|
|
if (this.diagnosis.dataCusOrgOCX.length > 0) {
|
|
this.diagnosis.dataCusOrgOCX.forEach((e) => {
|
|
let rd = {
|
|
startDate: moment(e.startDate).format("yyyy-MM-DD"),
|
|
endDate: moment(e.endDate).format("yyyy-MM-DD"),
|
|
dateType:
|
|
e.dateType == "summaryDate"
|
|
? "3"
|
|
: e.dateType == "medicalStartDate"
|
|
? "2"
|
|
: "1",
|
|
};
|
|
|
|
if (e.customerOrgId) {
|
|
rd.customerOrgId = e.customerOrgId;
|
|
if (e.customerOrgId == this.dict.personOrgId) {
|
|
rd.customerOrgRegisterId = null;
|
|
rd.customerOrgGroupId = [];
|
|
} else {
|
|
rd.customerOrgRegisterId = e.customerOrgRegister.id;
|
|
rd.customerOrgGroupId = e.customerOrgGroupIds;
|
|
}
|
|
}
|
|
customerOrgs.push(rd);
|
|
});
|
|
}
|
|
|
|
if (this.diagnosis.dataAsbitemOCX.length > 0) {
|
|
this.diagnosis.dataAsbitemOCX.forEach((e) => {
|
|
diagnosisIds.push(e.id);
|
|
});
|
|
}
|
|
|
|
body.customerOrgs = customerOrgs;
|
|
body.diagnosisIds = diagnosisIds;
|
|
if (
|
|
this.patientRegister.query.completeFlags &&
|
|
Array.isArray(this.patientRegister.query.completeFlags) &&
|
|
this.patientRegister.query.completeFlags.length > 0
|
|
) {
|
|
body.completeFlags = this.patientRegister.query.completeFlags;
|
|
} else {
|
|
delete body["completeFlags"];
|
|
}
|
|
|
|
// if (this.patientRegister.query.isCharge) body.isCharge = this.patientRegister.query.isCharge
|
|
|
|
//console.log('/api/app/peisreport/getregisterasbitemchargestatus',body)
|
|
|
|
postapi("/api/customerreport/getdiseasecountstatisticsreport", body).then(
|
|
(res) => {
|
|
if (res.code != -1) {
|
|
this.dataList = res.data.details;
|
|
this.summary.startDate = res.data.startDate;
|
|
this.summary.endDate = res.data.endDate;
|
|
this.summary.femaleCount = res.data.femaleCount;
|
|
this.summary.maleCount = res.data.maleCount;
|
|
this.yAxisData = [];
|
|
this.seriesData = [];
|
|
this.pieData = [];
|
|
let pies = {
|
|
name: "",
|
|
value: 0,
|
|
};
|
|
for (
|
|
let i = 0;
|
|
i < (this.dataList.length > 10 ? 10 : this.dataList.length);
|
|
i++
|
|
) {
|
|
let pie = JSON.parse(JSON.stringify(pies));
|
|
this.yAxisData.push(this.dataList[i].diagnosisName);
|
|
this.seriesData.push(this.dataList[i].patientCount);
|
|
pie.name = this.dataList[i].diagnosisName;
|
|
pie.value = this.dataList[i].patientCount;
|
|
this.pieData.push(pie);
|
|
}
|
|
this.columnarChart();
|
|
this.$nextTick(() => {
|
|
this.$refs.dataList.doLayout();
|
|
});
|
|
}
|
|
}
|
|
);
|
|
},
|
|
columnarChart() {
|
|
let option2 = {
|
|
// title: {
|
|
// text: "疾病人数统计",
|
|
// left: "center",
|
|
// },
|
|
tooltip: {
|
|
trigger: "axis",
|
|
confine: true,
|
|
},
|
|
legend: {
|
|
type: "scroll",
|
|
orient: "horizontal", // 垂直
|
|
right: "3%", // 左对齐
|
|
top: "0%", // 位于顶部
|
|
},
|
|
grid: {
|
|
show: false,
|
|
left: "0%",
|
|
right: "0%",
|
|
top: "0%",
|
|
bottom: "0%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "value",
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontSize: "14",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "category",
|
|
data: this.yAxisData,
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontSize: "14",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "人数",
|
|
type: "bar",
|
|
data: this.seriesData,
|
|
},
|
|
],
|
|
};
|
|
this.$refs.chart2.setOption(option2);
|
|
},
|
|
peiChart() {
|
|
let option2 = {
|
|
// title: {
|
|
// text: "疾病人数统计",
|
|
// left: "center",
|
|
// },
|
|
tooltip: {
|
|
trigger: "item",
|
|
confine: true,
|
|
},
|
|
legend: {
|
|
data: this.yAxisData,
|
|
orient: "horizontal",
|
|
right: "3%",
|
|
top: "0%",
|
|
},
|
|
grid: {
|
|
show: false,
|
|
left: "0%",
|
|
right: "0%",
|
|
top: "0%",
|
|
bottom: "0%",
|
|
containLabel: true,
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
label: {
|
|
show: true,
|
|
formatter: "{b} : {c}人 ({d}%)", // b代表名称，c代表对应值，d代表百分比
|
|
},
|
|
data: this.pieData,
|
|
},
|
|
],
|
|
};
|
|
this.$refs.chart2.setOption(option2);
|
|
},
|
|
},
|
|
|
|
//监听事件
|
|
watch: {
|
|
//触发查询事件
|
|
// "patientRegister.query.times"(newVal, oldVal) {
|
|
// if (newVal != oldVal) {
|
|
// //alert('触发查询事件')
|
|
// this.query();
|
|
// }
|
|
// },
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
@import "../../assets/css/global_button.css";
|
|
@import "../../assets/css/global_dialog.css";
|
|
@import "../../assets/css/global_table.css";
|
|
@import "../../assets/css/global_form.css";
|
|
@import "../../assets/css/global_input.css";
|
|
@import "../../assets/css/global.css";
|
|
|
|
.query {
|
|
margin-right: 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #232748;
|
|
font-size: 400;
|
|
font-family: "NotoSansSC-Regular";
|
|
}
|
|
|
|
.box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
::v-deep .el-input__inner {
|
|
/*text-align: center;*/
|
|
padding-left: 5px;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
::v-deep .el-input__icon {
|
|
width: 15px;
|
|
/* 输入框下拉箭头或清除图标 默认 25 */
|
|
}
|
|
|
|
::v-deep .el-input-group__append {
|
|
padding: 0 5px;
|
|
/* 控件默认 0 20px;*/
|
|
}
|
|
|
|
::v-deep .el-icon-search:before {
|
|
color: #00f;
|
|
}
|
|
|
|
.query:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.spanClass {
|
|
font-size: 14px;
|
|
padding: 0 2px 0 0;
|
|
}
|
|
</style>
|