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.
438 lines
12 KiB
438 lines
12 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>医生：</span>
|
|
<el-select
|
|
v-model="username"
|
|
placeholder="请选择"
|
|
size="small"
|
|
multiple
|
|
filterable
|
|
:multiple-limit=2
|
|
>
|
|
<el-option
|
|
v-for="item in registrardata"
|
|
:key="item.id"
|
|
:label="item.surname"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="query">
|
|
<span>开始日期：</span>
|
|
<el-date-picker
|
|
type="date"
|
|
placeholder="选择开始日期"
|
|
size="small"
|
|
v-model="startDate"
|
|
value-format="yyyy-MM-dd"
|
|
editable
|
|
style="width: 177px;"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="query">
|
|
<span>结束日期：</span>
|
|
<el-date-picker
|
|
type="date"
|
|
placeholder="选择结束日期"
|
|
size="small"
|
|
v-model="endDate"
|
|
value-format="yyyy-MM-dd"
|
|
editable
|
|
style="width: 177px;"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="query">
|
|
<el-button size="small" @click="onSubmit" class="commonbutton">查询</el-button>
|
|
</div>
|
|
<div class="query">
|
|
<el-button size="small" @click="handleExport" class="commonbutton">导出excel</el-button>
|
|
</div>
|
|
<div class="query">
|
|
<el-button size="small" @click="onPrint" class="commonbutton">打印</el-button>
|
|
</div>
|
|
<div class="query">
|
|
<el-button size="small" @click="columnarChart" class="commonbutton">柱状图</el-button>
|
|
</div>
|
|
<div class="query">
|
|
<el-button size="small" @click="peiChart" 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">
|
|
<!-- <h3 align="center">登记员工作量统计</h3>
|
|
- 53-18
|
|
<h5 align="right" style="margin-bottom: 5px;">
|
|
时间：<span>{{ startDate }}</span
|
|
>至<span>{{ endDate }}</span>
|
|
</h5> -->
|
|
<el-table
|
|
border
|
|
show-summary
|
|
:summary-method="summarizeRegisterCount"
|
|
:height="
|
|
flag
|
|
? window.pageHeight < 600
|
|
? 415
|
|
: window.pageHeight - 185 - 20
|
|
: ''
|
|
"
|
|
:data="tableData"
|
|
id="table"
|
|
ref="table"
|
|
style="width: 100%"
|
|
:header-cell-class-name="headerStyle"
|
|
>
|
|
<el-table-column label="审核医生工作量统计">
|
|
<el-table-column :label="'时间：' + startDate + '至' + endDate">
|
|
<el-table-column
|
|
prop="auditDoctorName"
|
|
label="医生"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="auditCount"
|
|
label="人数"
|
|
></el-table-column>
|
|
<el-table-column prop="percentage" label="占登记总人数百分比">
|
|
</el-table-column>
|
|
</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>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapState, mapActions } from "vuex";
|
|
import { getapi, postapi, putapi, deletapi } from "@/api/api";
|
|
import ChartBlock from "../../components/workload/chartsBlock";
|
|
import { exportToExcel } from "../../utlis/Export2Excel";
|
|
import html2canvas from "html2canvas";
|
|
import printJs from "print-js";
|
|
export default {
|
|
components: {
|
|
ChartBlock,
|
|
},
|
|
data() {
|
|
return {
|
|
registrardata: [],
|
|
username: [],
|
|
startDate: "",
|
|
endDate: "",
|
|
tableData: [],
|
|
seriesData: [],
|
|
yAxisData: [],
|
|
flag: true,
|
|
pieData: [],
|
|
pages: {
|
|
SkipCount: 0,
|
|
MaxResultCount: 1000,
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
this.getList();
|
|
},
|
|
mounted() {
|
|
this.getNowTime();
|
|
},
|
|
methods: {
|
|
headerStyle({ row, column, rowIndex, columnIndex }) {
|
|
if (rowIndex === 1) {
|
|
return "left-align";
|
|
}
|
|
},
|
|
summarizeRegisterCount(param) {
|
|
const { columns, data } = param;
|
|
const sums = [];
|
|
columns.forEach((column, index) => {
|
|
if (index === 0) {
|
|
sums[index] = "合计";
|
|
return;
|
|
}
|
|
|
|
const values = data.map((item) => Number(item[column.property]));
|
|
if (index === 1) {
|
|
sums[index] = values.reduce((prev, curr) => {
|
|
const value = Number(curr);
|
|
if (!isNaN(value)) {
|
|
return prev + curr;
|
|
} else {
|
|
return prev;
|
|
}
|
|
}, 0);
|
|
sums[index] = "共" + sums[index] + "人";
|
|
} else {
|
|
sums[index] = "";
|
|
}
|
|
});
|
|
|
|
return sums;
|
|
},
|
|
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;
|
|
imageDom.appendChild(cloneDom);
|
|
html2canvas(cloneDom).then((canvas) => {
|
|
// 转成图片，生成图片地址
|
|
const url = canvas.toDataURL("image/png");
|
|
printJs({
|
|
printable: url,
|
|
type: "image",
|
|
documentTitle: "", // 标题
|
|
style: "@page{size:auto;margin: 0cm 1cm 0cm 1cm;}", // 去除页眉页脚
|
|
});
|
|
});
|
|
cloneDom.style.display = "none";
|
|
this.flag = true;
|
|
});
|
|
},
|
|
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);
|
|
},
|
|
onSubmit() {
|
|
let that = this;
|
|
if (this.startDate == "") {
|
|
return this.$message({
|
|
message: "请先选择开始日期",
|
|
type: "error",
|
|
});
|
|
}
|
|
if (this.endDate == "") {
|
|
return this.$message({
|
|
message: "请先选择结束日期",
|
|
type: "error",
|
|
});
|
|
}
|
|
postapi(
|
|
"/api/app/internalreport/getauditdoctorworkloadreport",
|
|
{
|
|
userIds: that.username,
|
|
startDate: that.startDate,
|
|
endDate: that.endDate,
|
|
}
|
|
).then((res) => {
|
|
if (res.code != -1) {
|
|
that.tableData = [...res.data];
|
|
this.yAxisData = [];
|
|
this.seriesData = [];
|
|
this.pieData=[]
|
|
let pies = {
|
|
name: "",
|
|
value: 0,
|
|
};
|
|
for (let i = 0; i < res.data.length; i++) {
|
|
let pie = JSON.parse(JSON.stringify(pies));
|
|
this.yAxisData.push(res.data[i].auditDoctorName);
|
|
this.seriesData.push(res.data[i].auditCount);
|
|
pie.name=res.data[i].auditDoctorName
|
|
pie.value=res.data[i].auditCount
|
|
this.pieData.push(pie)
|
|
}
|
|
this.columnarChart();
|
|
}
|
|
});
|
|
},
|
|
getList() {
|
|
getapi("/api/identity/users/getlist",this.pages).then((res) => {
|
|
if (res.code != -1) {
|
|
this.registrardata = [...res.data.items];
|
|
}
|
|
});
|
|
},
|
|
getNowTime() {
|
|
var now = new Date();
|
|
var year = now.getFullYear(); // 得到年份
|
|
var month = now.getMonth(); // 得到月份
|
|
var date = now.getDate(); // 得到日期
|
|
month = month + 1;
|
|
month = month.toString().padStart(2, "0");
|
|
date = date.toString().padStart(2, "0");
|
|
var defaultDate = `${year}-${month}-${date}`;
|
|
this.startDate = defaultDate;
|
|
this.endDate = defaultDate;
|
|
},
|
|
handleExport() {
|
|
exportToExcel("#table", "审核医生工作量统计", false);
|
|
},
|
|
},
|
|
computed: {
|
|
...mapState(["window", "dict", "patientRegister", "report"]),
|
|
},
|
|
updated() {
|
|
this.$nextTick(() => {
|
|
this.$refs.table.doLayout();
|
|
});
|
|
},
|
|
};
|
|
</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;
|
|
}
|
|
:deep .left-align .cell {
|
|
text-align: left !important;
|
|
}
|
|
.query:last-child{
|
|
margin-right: 0;
|
|
}
|
|
:deep .el-input--suffix .el-input__inner{
|
|
height: 32px !important;
|
|
}
|
|
:deep .el-select__tags{
|
|
flex-wrap: nowrap;
|
|
}
|
|
</style>
|