罗斌杰
2 years ago
12 changed files with 5040 additions and 241 deletions
-
30src/router/index.js
-
2src/views/basic-dictionary/MedicalConclusionType.vue
-
1src/views/customerReport/combinationDetails.vue
-
529src/views/workload/departmentalfees.vue
-
38src/views/workload/deskwork.vue
-
677src/views/workload/feeforservice.vue
-
511src/views/workload/financialsettlement.vue
-
1246src/views/workload/individualfeedetails.vue
-
438src/views/workload/peispersontime.vue
-
1src/views/workload/registrar.vue
-
486src/views/workload/summaryoftollcollectors.vue
-
1322src/views/workload/tollcollector.vue
@ -0,0 +1,529 @@ |
|||
<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-cascader |
|||
v-model="username" |
|||
:options="registrardata" |
|||
ref="example" |
|||
popper-class="example" |
|||
@change="ischangsItemTypeId" |
|||
style="width: 100px" |
|||
:props="{ |
|||
value: 'id', |
|||
label: 'displayName', |
|||
children: 'treeChildren', |
|||
checkStrictly: true, |
|||
expandTrigger: 'hover', |
|||
}" |
|||
size="small" |
|||
> |
|||
</el-cascader> |
|||
<!-- <el-select |
|||
v-model="username" |
|||
placeholder="请选择" |
|||
size="small" |
|||
multiple |
|||
> |
|||
<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 |
|||
> |
|||
</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 |
|||
> |
|||
</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 |
|||
: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 |
|||
:label=" |
|||
'应收总金额：' + |
|||
sumChargeMoney + |
|||
'折扣金额：' + |
|||
sumDiscountMoney + |
|||
'实收总金额：' + |
|||
sumReceivedChargeMoney |
|||
" |
|||
> |
|||
<el-table-column |
|||
prop="itemTypeName" |
|||
label="科室" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="chargeMoney" |
|||
label="应收金额" |
|||
></el-table-column> |
|||
<el-table-column prop="discountMoney" label="折扣金额"> |
|||
</el-table-column> |
|||
<el-table-column prop="receivedChargeMoney" label="实收金额"> |
|||
</el-table-column> |
|||
</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"; |
|||
import { projectlist } from "@/request/commonapi"; |
|||
export default { |
|||
components: { |
|||
ChartBlock, |
|||
}, |
|||
data() { |
|||
return { |
|||
registrardata: [], |
|||
username: [], |
|||
startDate: "", |
|||
endDate: "", |
|||
tableData: [], |
|||
seriesData: [], |
|||
yAxisData: [], |
|||
flag: true, |
|||
pieData: [], |
|||
sumChargeMoney: "", |
|||
sumDiscountMoney: "", |
|||
sumReceivedChargeMoney: "", |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
mounted() { |
|||
this.getNowTime(); |
|||
}, |
|||
methods: { |
|||
ischangsItemTypeId(v) { |
|||
if (v.length > 1) { |
|||
this.username = this.username.slice(-1)[0]; |
|||
} else { |
|||
this.username = this.username[0]; |
|||
} |
|||
this.$refs.example.toggleDropDownVisible(); |
|||
}, |
|||
headerStyle({ row, column, rowIndex, columnIndex }) { |
|||
console.log(rowIndex); |
|||
if (rowIndex === 1) { |
|||
return "left-align"; |
|||
} |
|||
if (rowIndex === 2) { |
|||
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 || index === 2) { |
|||
sums[index] = values.reduce((prev, curr) => { |
|||
const value = Number(curr); |
|||
if (!isNaN(value)) { |
|||
return prev + curr; |
|||
} else { |
|||
return prev; |
|||
} |
|||
}, 0); |
|||
if (index === 1) { |
|||
sums[index] = "共" + sums[index] + "人"; |
|||
} |
|||
if (index === 2) { |
|||
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; |
|||
console.log(cloneDom); |
|||
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.username == "" || this.username == []) { |
|||
return this.$message({ |
|||
message: "请先选择科室", |
|||
type: "error", |
|||
}); |
|||
} |
|||
if (this.startDate == "") { |
|||
return this.$message({ |
|||
message: "请先选择开始日期", |
|||
type: "error", |
|||
}); |
|||
} |
|||
if (this.endDate == "") { |
|||
return this.$message({ |
|||
message: "请先选择结束日期", |
|||
type: "error", |
|||
}); |
|||
} |
|||
postapi( |
|||
"/api/app/charge-report/get-summary-of-departmental-fees-report", |
|||
{ |
|||
itemTypeId: that.username, |
|||
startDate: that.startDate, |
|||
endDate: that.endDate, |
|||
} |
|||
).then((res) => { |
|||
if (res.code != -1) { |
|||
that.tableData = [...res.data.details]; |
|||
that.sumChargeMoney = res.data.sumChargeMoney; |
|||
that.sumDiscountMoney = res.data.sumDiscountMoney; |
|||
that.sumReceivedChargeMoney = res.data.sumReceivedChargeMoney; |
|||
this.yAxisData = []; |
|||
this.seriesData = []; |
|||
this.pieData = []; |
|||
let pies = { |
|||
name: "", |
|||
value: 0, |
|||
}; |
|||
for (let i = 0; i < res.data.details.length; i++) { |
|||
let pie = JSON.parse(JSON.stringify(pies)); |
|||
this.yAxisData.push(res.data.details[i].itemTypeName); |
|||
this.seriesData.push(res.data.details[i].receivedChargeMoney); |
|||
pie.name = res.data.details[i].itemTypeName; |
|||
pie.value = res.data.details[i].receivedChargeMoney; |
|||
this.pieData.push(pie); |
|||
} |
|||
this.columnarChart(); |
|||
} |
|||
}); |
|||
}, |
|||
getList() { |
|||
projectlist().then((res) => { |
|||
if (res.code != -1) { |
|||
this.registrardata = [...res.data]; |
|||
this.registrardata = this.formatData(this.registrardata); |
|||
} |
|||
}); |
|||
}, |
|||
formatData(dataList) { |
|||
for (let i = 0; i < dataList.length; i++) { |
|||
if (dataList[i].treeChildren.length < 1) { |
|||
dataList[i].treeChildren = undefined; |
|||
} else { |
|||
this.formatData(dataList[i].treeChildren); |
|||
} |
|||
} |
|||
return dataList; |
|||
}, |
|||
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: 15px; |
|||
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; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,677 @@ |
|||
<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-cascader |
|||
v-model="username" |
|||
:options="registrardata" |
|||
ref="example" |
|||
popper-class="example" |
|||
@change="ischangsItemTypeId" |
|||
style="width: 100px" |
|||
:props="{ |
|||
value: 'id', |
|||
label: 'displayName', |
|||
children: 'treeChildren', |
|||
checkStrictly: true, |
|||
expandTrigger: 'hover', |
|||
}" |
|||
size="small" |
|||
> |
|||
</el-cascader> |
|||
<!-- <el-select |
|||
v-model="username" |
|||
placeholder="请选择" |
|||
size="small" |
|||
multiple |
|||
> |
|||
<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-input |
|||
placeholder="请选择组合项目" |
|||
v-model="patientRegister.query.asbitemOCX" |
|||
style="width: 200px" |
|||
size="small" |
|||
disabled |
|||
> |
|||
<el-button |
|||
slot="append" |
|||
icon="el-icon-search" |
|||
@click="report.dialogAsbitemOCX = true" |
|||
style="font-size: 20px" |
|||
></el-button> |
|||
</el-input> |
|||
</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:150px" |
|||
> |
|||
</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:150px" |
|||
> |
|||
</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" |
|||
:span-method="objectStandardSpanMethod" |
|||
:height=" |
|||
flag |
|||
? window.pageHeight < 600 |
|||
? 415 |
|||
: window.pageHeight - 185 - 20 |
|||
: '' |
|||
" |
|||
:data="tableData" |
|||
id="table" |
|||
ref="table" |
|||
style="width: 100%" |
|||
:header-cell-class-name="headerStyle" |
|||
:cell-style="tableRowClassName" |
|||
> |
|||
<el-table-column label="项目收费汇总"> |
|||
<el-table-column :label="'时间：' + startDate + '至' + endDate"> |
|||
<el-table-column |
|||
:label=" |
|||
'应收总金额：' + |
|||
sumChargeMoney + |
|||
'折扣金额：' + |
|||
sumDiscountMoney + |
|||
'实收总金额：' + |
|||
sumReceivedChargeMoney |
|||
" |
|||
> |
|||
<el-table-column |
|||
prop="itemTypeName" |
|||
label="科室" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="asbitemName" |
|||
label="组合项目" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="chargeMoney" |
|||
label="应收金额" |
|||
></el-table-column> |
|||
<el-table-column prop="discountMoney" label="折扣金额"> |
|||
</el-table-column> |
|||
<el-table-column prop="receivedChargeMoney" label="实收金额"> |
|||
</el-table-column> |
|||
</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> |
|||
<!--通用选组合项目的控件--> |
|||
<el-dialog |
|||
title="组合项目选择" |
|||
:visible.sync="report.dialogAsbitemOCX" |
|||
:close-on-click-modal="false" |
|||
width="700px" |
|||
height="600px" |
|||
> |
|||
<AsbitemOCX /> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState, mapActions } from "vuex"; |
|||
import { getapi, postapi, putapi, deletapi } from "@/api/api"; |
|||
import ChartBlock from "../../components/workload/chartsBlock"; |
|||
import AsbitemOCX from "../../components/report/AsbitemOCX.vue"; |
|||
import { exportToExcel } from "../../utlis/Export2Excel"; |
|||
import html2canvas from "html2canvas"; |
|||
import printJs from "print-js"; |
|||
import { projectlist } from "@/request/commonapi"; |
|||
import { |
|||
tcdate, |
|||
} from "@/utlis/proFunc"; |
|||
export default { |
|||
components: { |
|||
ChartBlock, |
|||
AsbitemOCX |
|||
}, |
|||
data() { |
|||
return { |
|||
registrardata: [], |
|||
username: [], |
|||
startDate: "", |
|||
endDate: "", |
|||
tableData: [], |
|||
seriesData: [], |
|||
yAxisData: [], |
|||
flag: true, |
|||
pieData: [], |
|||
sumChargeMoney: "", |
|||
sumDiscountMoney: "", |
|||
sumReceivedChargeMoney: "", |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
this.dictInit() |
|||
}, |
|||
mounted() { |
|||
this.getNowTime(); |
|||
}, |
|||
methods: { |
|||
//数据初始化 |
|||
dictInit() { |
|||
|
|||
// //体检类别 |
|||
// getapi("/api/app/medical-type/in-filter").then((res) => { |
|||
// if (res.code == 1) { |
|||
// this.dict.medicalType = res.data.items; |
|||
// } |
|||
// }); |
|||
|
|||
// //体检类别 树结构 |
|||
getapi("/api/app/item-type/by-code-all").then((res) => { |
|||
if (res.code == 1) { |
|||
this.dict.itemTypeTree = res.data; |
|||
tcdate(this.dict.itemTypeTree); |
|||
} |
|||
}); |
|||
}, |
|||
ischangsItemTypeId(v) { |
|||
if (v.length > 1) { |
|||
this.username = this.username.slice(-1)[0]; |
|||
} else { |
|||
this.username = this.username[0]; |
|||
} |
|||
this.$refs.example.toggleDropDownVisible(); |
|||
}, |
|||
headerStyle({ row, column, rowIndex, columnIndex }) { |
|||
console.log(rowIndex); |
|||
if (rowIndex === 1) { |
|||
return "left-align"; |
|||
} |
|||
if (rowIndex === 2) { |
|||
return "left-align"; |
|||
} |
|||
}, |
|||
summarizeRegisterCount(param) { |
|||
const { columns, data } = param; |
|||
const sums = []; |
|||
columns.forEach((column, index) => { |
|||
if (index === 0) { |
|||
sums[index] = "合计"; |
|||
return; |
|||
} |
|||
if (index === 4) { |
|||
sums[index] = this.sumReceivedChargeMoney+"元"; |
|||
return; |
|||
} |
|||
}); |
|||
|
|||
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; |
|||
console.log(cloneDom); |
|||
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.username == "" || this.username == []) { |
|||
return this.$message({ |
|||
message: "请先选择科室", |
|||
type: "error", |
|||
}); |
|||
} |
|||
if (this.startDate == "") { |
|||
return this.$message({ |
|||
message: "请先选择开始日期", |
|||
type: "error", |
|||
}); |
|||
} |
|||
if (this.endDate == "") { |
|||
return this.$message({ |
|||
message: "请先选择结束日期", |
|||
type: "error", |
|||
}); |
|||
} |
|||
let asbitemIds = []; |
|||
if (this.report.dataAsbitemOCX.length > 0) { |
|||
this.report.dataAsbitemOCX.forEach((e) => { |
|||
asbitemIds.push(e.id); |
|||
}); |
|||
} |
|||
postapi( |
|||
"/api/app/charge-report/get-project-fees-report", |
|||
{ |
|||
itemTypeId: that.username, |
|||
asbitems:asbitemIds, |
|||
startDate: that.startDate, |
|||
endDate: that.endDate, |
|||
} |
|||
).then((res) => { |
|||
if (res.code != -1) { |
|||
// that.tableData = [...res.data.details]; |
|||
that.sumChargeMoney = res.data.sumChargeMoney; |
|||
that.sumDiscountMoney = res.data.sumDiscountMoney; |
|||
that.sumReceivedChargeMoney = res.data.sumReceivedChargeMoney; |
|||
this.yAxisData = []; |
|||
this.seriesData = []; |
|||
this.pieData = []; |
|||
that.computedStandardTableData(res.data.details) |
|||
let pies = { |
|||
name: "", |
|||
value: 0, |
|||
}; |
|||
for (let i = 0; i < res.data.details.length; i++) { |
|||
let pie = JSON.parse(JSON.stringify(pies)); |
|||
this.yAxisData.push('('+res.data.details[i].itemTypeName+')'+res.data.details[i].asbitemName); |
|||
this.seriesData.push(res.data.details[i].receivedChargeMoney); |
|||
pie.name = '('+res.data.details[i].itemTypeName+')'+res.data.details[i].asbitemName |
|||
pie.value = res.data.details[i].receivedChargeMoney; |
|||
this.pieData.push(pie); |
|||
} |
|||
this.columnarChart(); |
|||
} |
|||
}); |
|||
}, |
|||
computedStandardTableData(tableData) { |
|||
const newData = [...tableData]; // 创建一个新的数组，避免修改原始数据 |
|||
const totalRows = { |
|||
itemTypeName: "", |
|||
asbitemName: "合计", |
|||
chargeMoney: 0, |
|||
discountMoney: 0, |
|||
receivedChargeMoney: 0, |
|||
}; // 合计行的数据 |
|||
// let pies = { |
|||
// name: "", |
|||
// value: 0, |
|||
// }; |
|||
let obj = {}; |
|||
for (let i = 0; i < tableData.length; i++) { |
|||
var item = tableData[i].itemTypeName; |
|||
obj[item] = obj[item] + 1 || 1; |
|||
} |
|||
|
|||
Object.keys(obj).forEach((key) => { |
|||
let totalRow = JSON.parse(JSON.stringify(totalRows)); |
|||
// let pie = JSON.parse(JSON.stringify(pies)); |
|||
tableData.forEach((item) => { |
|||
if (item.itemTypeName == key) { |
|||
totalRow.itemTypeName = item.itemTypeName; |
|||
totalRow.chargeMoney = |
|||
(totalRow.chargeMoney * 100000 + |
|||
item.chargeMoney * 100000) / |
|||
100000; |
|||
totalRow.discountMoney = |
|||
(totalRow.discountMoney * 100000 + |
|||
item.discountMoney * 100000) / |
|||
100000; |
|||
totalRow.receivedChargeMoney = |
|||
(totalRow.receivedChargeMoney * 100000 + |
|||
item.receivedChargeMoney * 100000) / |
|||
100000; |
|||
} |
|||
// pie.name = '('+item.itemTypeName+')'+item.asbitemName; |
|||
// pie.value = item.receivedChargeMoney; |
|||
// this.yAxisData.push('('+item.itemTypeName+')'+item.asbitemName); |
|||
// this.seriesData.push(item.receivedChargeMoney); |
|||
}); |
|||
newData.push(totalRow); |
|||
// this.pieData.push(pie); |
|||
}); |
|||
this.ForwardStandardRanking(newData, "itemTypeName"); |
|||
this.columnarChart(); |
|||
}, |
|||
ForwardStandardRanking(data, p) { |
|||
for (var i = 0; i < data.length - 1; i++) { |
|||
for (var j = 0; j < data.length - 1 - i; j++) { |
|||
var dd = data[j][p].localeCompare(data[j + 1][p], "zh"); //1---前者往后移，-1===位置不变 |
|||
if (dd > 0) { |
|||
var temp = data[j]; |
|||
data[j] = data[j + 1]; |
|||
data[j + 1] = temp; |
|||
} |
|||
} |
|||
} |
|||
this.tableData = data; |
|||
this.setStandardDates(this.tableData); |
|||
}, |
|||
setStandardDates(arr) { |
|||
var obj = {}, |
|||
k, |
|||
arr1 = []; |
|||
this.arr1 = []; |
|||
for (var i = 0, len = arr.length; i < len; i++) { |
|||
k = arr[i].itemTypeName; //需要合并的字段 |
|||
if (obj[k]) obj[k]++; |
|||
else obj[k] = 1; |
|||
} |
|||
//保存结果{el-'元素'，count-出现次数} |
|||
for (var o in obj) { |
|||
for (let i = 0; i < obj[o]; i++) { |
|||
if (i === 0) { |
|||
this.arr1.push(obj[o]); |
|||
} else { |
|||
this.arr1.push(0); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
objectStandardSpanMethod({ row, column, rowIndex, columnIndex }) { |
|||
if (columnIndex === 0) { |
|||
let _row = this.arr1[rowIndex]; |
|||
let _col = this.arr1[rowIndex] > 0 ? 1 : 0; |
|||
return [_row, _col]; |
|||
} |
|||
}, |
|||
tableRowClassName({ row, column, rowIndex, columnIndex }) { |
|||
if (row.asbitemName == "合计") { |
|||
return { backgroundColor: "#F5F7FA" }; |
|||
} |
|||
}, |
|||
getList() { |
|||
projectlist().then((res) => { |
|||
if (res.code != -1) { |
|||
this.registrardata = [...res.data]; |
|||
this.registrardata = this.formatData(this.registrardata); |
|||
} |
|||
}); |
|||
}, |
|||
formatData(dataList) { |
|||
for (let i = 0; i < dataList.length; i++) { |
|||
if (dataList[i].treeChildren.length < 1) { |
|||
dataList[i].treeChildren = undefined; |
|||
} else { |
|||
this.formatData(dataList[i].treeChildren); |
|||
} |
|||
} |
|||
return dataList; |
|||
}, |
|||
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: 15px; |
|||
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; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,511 @@ |
|||
<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 |
|||
> |
|||
<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 |
|||
> |
|||
</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 |
|||
> |
|||
</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="settlement" 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 id="domTable"> |
|||
<div |
|||
style="background-color: #fff; padding: 15px; border-radius: 8px" |
|||
ref="imageDom" |
|||
> |
|||
<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%" |
|||
> |
|||
<el-table-column label="财务结算"> |
|||
<el-table-column :label="'时间：' + startDate + '至' + endDate"> |
|||
<template slot-scope="scope"> |
|||
<el-table :data="scope.row.chargeDetails" border> |
|||
<el-table-column label="收费汇总"> |
|||
<template slot-scope="scopes"> |
|||
<el-table |
|||
:data="scopes.row.payModeDetails" |
|||
border |
|||
show-summary |
|||
:summary-method="summarizeRegisterCounts" |
|||
> |
|||
<el-table-column :label="scopes.row.userName"> |
|||
<el-table-column |
|||
label="支付方式" |
|||
prop="payModeName" |
|||
></el-table-column> |
|||
<el-table-column |
|||
label="收费或退费金额" |
|||
prop="money" |
|||
></el-table-column> |
|||
</el-table-column> |
|||
</el-table> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-table :data="scope.row.chargeBackDetails" border> |
|||
<el-table-column label="退费汇总"> |
|||
<template slot-scope="scopes"> |
|||
<el-table |
|||
:data="scopes.row.payModeDetails" |
|||
border |
|||
show-summary |
|||
:summary-method="summarizeRegisterCounts" |
|||
> |
|||
<el-table-column :label="scopes.row.userName"> |
|||
<el-table-column |
|||
label="支付方式" |
|||
prop="payModeName" |
|||
></el-table-column> |
|||
<el-table-column |
|||
label="收费或退费金额" |
|||
prop="money" |
|||
></el-table-column> |
|||
</el-table-column> |
|||
</el-table> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</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> |
|||
</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: [], |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
mounted() { |
|||
this.getNowTime(); |
|||
}, |
|||
methods: { |
|||
headerStyle({ row, column, rowIndex, columnIndex }) { |
|||
console.log(rowIndex); |
|||
if (rowIndex === 1) { |
|||
return "left-align"; |
|||
} |
|||
}, |
|||
summarizeRegisterCount(param) { |
|||
const { columns, data } = param; |
|||
const sums = []; |
|||
columns.forEach((column, index) => { |
|||
if (index === 0) { |
|||
let sumPrice = 0; |
|||
let chargeDetails = data[0].chargeDetails; |
|||
let chargeBackDetails = data[0].chargeBackDetails; |
|||
for (let i = 0; i < chargeDetails.length; i++) { |
|||
for (let k = 0; k < chargeDetails[i].payModeDetails.length; k++) { |
|||
sumPrice = ( |
|||
Number(sumPrice) + |
|||
Number(chargeDetails[i].payModeDetails[k].money) |
|||
).toFixed(2); |
|||
} |
|||
} |
|||
for (let i = 0; i < chargeBackDetails.length; i++) { |
|||
for ( |
|||
let k = 0; |
|||
k < chargeBackDetails[i].payModeDetails.length; |
|||
k++ |
|||
) { |
|||
sumPrice = ( |
|||
Number(sumPrice) - |
|||
Number(chargeBackDetails[i].payModeDetails[k].money) |
|||
).toFixed(2); |
|||
} |
|||
} |
|||
sums[index] = "收费扣除退费余计：" + sumPrice; |
|||
return; |
|||
} |
|||
}); |
|||
return sums; |
|||
}, |
|||
summarizeRegisterCounts(param) { |
|||
const { columns, data } = param; |
|||
const sums = []; |
|||
columns.forEach((column, index) => { |
|||
if (index === 0) { |
|||
sums[index] = "合计"; |
|||
return; |
|||
} |
|||
if (index === 1) { |
|||
let sum = 0; |
|||
data.forEach((data, index) => { |
|||
sum += Number(data.money); |
|||
}); |
|||
sums[index] = sum; |
|||
return; |
|||
} |
|||
}); |
|||
|
|||
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; |
|||
console.log(cloneDom); |
|||
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/charge/get-charge-and-charge-back-summary", { |
|||
userIds: that.username, |
|||
startDate: that.startDate, |
|||
endDate: that.endDate, |
|||
}).then((res) => { |
|||
if (res.code != -1) { |
|||
that.tableData = []; |
|||
this.tableData.push(res.data); |
|||
// this.yAxisData = []; |
|||
// this.seriesData = []; |
|||
// 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].personnelName); |
|||
// this.seriesData.push(res.data[i].registerCount); |
|||
// pie.name=res.data[i].personnelName |
|||
// pie.value=res.data[i].registerCount |
|||
// this.pieData.push(pie) |
|||
// } |
|||
// this.columnarChart(); |
|||
} |
|||
}); |
|||
}, |
|||
settlement() { |
|||
this.$confirm("请仔细核对金额,是否继续结算?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
cancelButtonClass: "difference", |
|||
confirmButtonClass: "commonbutton", |
|||
}) |
|||
.then(() => { |
|||
postapi("/api/app/charge/charge-and-charge-back-settlement", { |
|||
userIds: this.username, |
|||
startDate: this.startDate, |
|||
endDate: this.endDate, |
|||
}).then((res) => { |
|||
if (res.code != -1) { |
|||
this.$message.success("结算成功"); |
|||
} |
|||
}); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
getList() { |
|||
getapi("/api/identity/users/getlist").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: 15px; |
|||
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; |
|||
} |
|||
</style> |
|||
1246
src/views/workload/individualfeedetails.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,438 @@ |
|||
<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 |
|||
> |
|||
<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 |
|||
> |
|||
</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 |
|||
> |
|||
</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 :label="'体检总人次：' + sumCount + '个人：' + personalCount+'单位：'+customerOrgCount"> |
|||
<el-table-column |
|||
prop="customerOrgName" |
|||
label="单位" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="summaryCount" |
|||
label="总检人数" |
|||
></el-table-column> |
|||
<el-table-column prop="chargeMoney" label="应收总金额"> |
|||
</el-table-column> |
|||
</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: [], |
|||
sumCount:"", |
|||
personalCount:"", |
|||
customerOrgCount:"" |
|||
}; |
|||
}, |
|||
created() { |
|||
// this.getList(); |
|||
}, |
|||
mounted() { |
|||
this.getNowTime(); |
|||
}, |
|||
methods: { |
|||
headerStyle({ row, column, rowIndex, columnIndex }) { |
|||
console.log(rowIndex); |
|||
if (rowIndex === 1) { |
|||
return "left-align"; |
|||
} |
|||
if (rowIndex === 2) { |
|||
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 || index === 2) { |
|||
sums[index] = values.reduce((prev, curr) => { |
|||
const value = Number(curr); |
|||
if (!isNaN(value)) { |
|||
return prev + curr; |
|||
} else { |
|||
return prev; |
|||
} |
|||
}, 0); |
|||
if(index === 1){ |
|||
sums[index] = "共" + sums[index] + "人"; |
|||
} |
|||
if(index===2){ |
|||
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; |
|||
console.log(cloneDom); |
|||
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/charge-report/get-summary-of-physical-examination-personnel-report", |
|||
{ |
|||
startDate: that.startDate, |
|||
endDate: that.endDate, |
|||
} |
|||
).then((res) => { |
|||
if (res.code != -1) { |
|||
that.tableData = [...res.data.details]; |
|||
that.sumCount=res.data.sumCount |
|||
that.personalCount=res.data.personalCount |
|||
that.customerOrgCount=res.data.customerOrgCount |
|||
this.yAxisData = []; |
|||
this.seriesData = []; |
|||
this.pieData=[] |
|||
let pies = { |
|||
name: "", |
|||
value: 0, |
|||
}; |
|||
for (let i = 0; i < res.data.details.length; i++) { |
|||
let pie = JSON.parse(JSON.stringify(pies)); |
|||
this.yAxisData.push(res.data.details[i].customerOrgName); |
|||
this.seriesData.push(res.data.details[i].summaryCount); |
|||
pie.name=res.data.details[i].customerOrgName |
|||
pie.value=res.data.details[i].summaryCount |
|||
this.pieData.push(pie) |
|||
} |
|||
this.columnarChart(); |
|||
} |
|||
}); |
|||
}, |
|||
getList() { |
|||
// getapi("/api/identity/users/getlist").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: 15px; |
|||
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; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,486 @@ |
|||
<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 |
|||
> |
|||
<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 |
|||
> |
|||
</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 |
|||
> |
|||
</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 |
|||
: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 |
|||
:label=" |
|||
'实收总金额：' + |
|||
sumChargeMoney + |
|||
'退费金额：' + |
|||
sumChargeBackMoney + |
|||
'合计：' + |
|||
sumTotalMoney |
|||
" |
|||
> |
|||
<el-table-column |
|||
prop="chargeName" |
|||
label="收费员" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="chargeMoney" |
|||
label="收费金额" |
|||
></el-table-column> |
|||
<el-table-column prop="chargeBackMoney" label="退费金额"> |
|||
</el-table-column> |
|||
<el-table-column prop="totalMoney" label="合计金额"> |
|||
</el-table-column> |
|||
</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"; |
|||
import { projectlist } from "@/request/commonapi"; |
|||
export default { |
|||
components: { |
|||
ChartBlock, |
|||
}, |
|||
data() { |
|||
return { |
|||
registrardata: [], |
|||
username: [], |
|||
startDate: "", |
|||
endDate: "", |
|||
tableData: [], |
|||
seriesData: [], |
|||
yAxisData: [], |
|||
flag: true, |
|||
pieData: [], |
|||
sumChargeMoney: "", |
|||
sumChargeBackMoney: "", |
|||
sumTotalMoney: "", |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
mounted() { |
|||
this.getNowTime(); |
|||
}, |
|||
methods: { |
|||
headerStyle({ row, column, rowIndex, columnIndex }) { |
|||
if (rowIndex === 1) { |
|||
return "left-align"; |
|||
} |
|||
if (rowIndex === 2) { |
|||
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 || index === 2) { |
|||
sums[index] = values.reduce((prev, curr) => { |
|||
const value = Number(curr); |
|||
if (!isNaN(value)) { |
|||
return prev + curr; |
|||
} else { |
|||
return prev; |
|||
} |
|||
}, 0); |
|||
if (index === 1) { |
|||
sums[index] = "共" + sums[index] + "人"; |
|||
} |
|||
if (index === 2) { |
|||
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; |
|||
console.log(cloneDom); |
|||
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/charge-report/get-toll-collector-fee-summary-report", |
|||
{ |
|||
userIds: that.username, |
|||
startDate: that.startDate, |
|||
endDate: that.endDate, |
|||
} |
|||
).then((res) => { |
|||
if (res.code != -1) { |
|||
that.tableData = [...res.data.details]; |
|||
that.sumChargeMoney = res.data.sumChargeMoney; |
|||
that.sumChargeBackMoney = res.data.sumChargeBackMoney; |
|||
that.sumTotalMoney = res.data.sumTotalMoney; |
|||
this.yAxisData = []; |
|||
this.seriesData = []; |
|||
this.pieData = []; |
|||
let pies = { |
|||
name: "", |
|||
value: 0, |
|||
}; |
|||
for (let i = 0; i < res.data.details.length; i++) { |
|||
let pie = JSON.parse(JSON.stringify(pies)); |
|||
this.yAxisData.push(res.data.details[i].chargeName); |
|||
this.seriesData.push(res.data.details[i].totalMoney); |
|||
pie.name = res.data.details[i].chargeName; |
|||
pie.value = res.data.details[i].totalMoney; |
|||
this.pieData.push(pie); |
|||
} |
|||
this.columnarChart(); |
|||
} |
|||
}); |
|||
}, |
|||
getList() { |
|||
getapi("/api/identity/users/getlist").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: 15px; |
|||
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; |
|||
} |
|||
</style> |
|||
1322
src/views/workload/tollcollector.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue