pengjun
2 years ago
10 changed files with 3700 additions and 1495 deletions
-
134package.json
-
79src/components/workload/chartsBlock.vue
-
184src/utlis/Export2Excel.js
-
1326src/views/fee-settings/DiagnosisTemplate.vue
-
1482src/views/fee-settings/ItemTemplate.vue
-
569src/views/workload/deskwork.vue
-
389src/views/workload/directordoctor.vue
-
566src/views/workload/doctorstaionworkload.vue
-
397src/views/workload/registrar.vue
-
69vue.config.js
@ -1,67 +1,73 @@ |
|||
{ |
|||
"name": "demo", |
|||
"version": "0.1.0", |
|||
"private": true, |
|||
"scripts": { |
|||
"serve": "vue-cli-service serve", |
|||
"build": "vue-cli-service build", |
|||
"lint": "vue-cli-service lint" |
|||
}, |
|||
"browser": { |
|||
"crypto": false |
|||
}, |
|||
"dependencies": { |
|||
"axios": "^1.3.3", |
|||
"crypto-js": "^4.1.1", |
|||
"element-ui": "^2.15.13", |
|||
"exceljs": "^4.3.0", |
|||
"file-saver": "^2.0.5", |
|||
"moment": "^2.29.4", |
|||
"sortablejs": "^1.15.0", |
|||
"vue": "^2.6.14", |
|||
"vue-contextmenujs": "^1.4.9", |
|||
"vue-json-excel": "^0.3.0", |
|||
"vue-meta": "^2.4.0", |
|||
"vue-print-nb": "^1.7.5", |
|||
"vue-router": "^3.5.1", |
|||
"vuex": "^3.6.2", |
|||
"xlsx": "^0.18.5" |
|||
}, |
|||
"devDependencies": { |
|||
"@babel/core": "^7.12.16", |
|||
"@babel/eslint-parser": "^7.12.16", |
|||
"@vue/cli-plugin-babel": "~5.0.0", |
|||
"@vue/cli-plugin-eslint": "~5.0.0", |
|||
"@vue/cli-plugin-router": "~5.0.0", |
|||
"@vue/cli-plugin-vuex": "~5.0.0", |
|||
"@vue/cli-service": "~5.0.0", |
|||
"eslint": "^7.32.0", |
|||
"eslint-config-prettier": "^8.3.0", |
|||
"eslint-plugin-prettier": "^4.0.0", |
|||
"eslint-plugin-vue": "^8.0.3", |
|||
"prettier": "^2.4.1", |
|||
"sass": "^1.32.7", |
|||
"sass-loader": "^12.0.0", |
|||
"vue-template-compiler": "^2.6.14" |
|||
}, |
|||
"eslintConfig": { |
|||
"root": true, |
|||
"env": { |
|||
"node": true |
|||
"name": "demo", |
|||
"version": "0.1.0", |
|||
"private": true, |
|||
"scripts": { |
|||
"serve": "vue-cli-service serve", |
|||
"build": "vue-cli-service build", |
|||
"lint": "vue-cli-service lint" |
|||
}, |
|||
"extends": [ |
|||
"plugin:vue/essential", |
|||
"eslint:recommended", |
|||
"plugin:prettier/recommended" |
|||
], |
|||
"parserOptions": { |
|||
"parser": "@babel/eslint-parser" |
|||
"browser": { |
|||
"crypto": false |
|||
}, |
|||
"rules": {} |
|||
}, |
|||
"browserslist": [ |
|||
"> 1%", |
|||
"last 2 versions", |
|||
"not dead" |
|||
] |
|||
} |
|||
"dependencies": { |
|||
"axios": "^1.3.3", |
|||
"crypto-js": "^4.1.1", |
|||
"echarts": "^5.4.3", |
|||
"element-ui": "^2.15.13", |
|||
"exceljs": "^4.3.0", |
|||
"file-saver": "^2.0.5", |
|||
"file-saver": "^2.0.5", |
|||
"html2canvas": "^1.4.1", |
|||
"moment": "^2.29.4", |
|||
"node-polyfill-webpack-plugin": "^2.0.1", |
|||
"sortablejs": "^1.15.0", |
|||
"vue": "^2.6.14", |
|||
"vue-contextmenujs": "^1.4.9", |
|||
"vue-json-excel": "^0.3.0", |
|||
"vue-meta": "^2.4.0", |
|||
"vue-print-nb": "^1.7.5", |
|||
"vue-router": "^3.5.1", |
|||
"vuex": "^3.6.2", |
|||
"xlsx": "^0.18.5", |
|||
"xlsx-style": "^0.8.13", |
|||
"print-js": "^1.6.0" |
|||
}, |
|||
"devDependencies": { |
|||
"@babel/core": "^7.12.16", |
|||
"@babel/eslint-parser": "^7.12.16", |
|||
"@vue/cli-plugin-babel": "~5.0.0", |
|||
"@vue/cli-plugin-eslint": "~5.0.0", |
|||
"@vue/cli-plugin-router": "~5.0.0", |
|||
"@vue/cli-plugin-vuex": "~5.0.0", |
|||
"@vue/cli-service": "~5.0.0", |
|||
"eslint": "^7.32.0", |
|||
"eslint-config-prettier": "^8.3.0", |
|||
"eslint-plugin-prettier": "^4.0.0", |
|||
"eslint-plugin-vue": "^8.0.3", |
|||
"prettier": "^2.4.1", |
|||
"sass": "^1.32.7", |
|||
"sass-loader": "^12.0.0", |
|||
"vue-template-compiler": "^2.6.14" |
|||
}, |
|||
"eslintConfig": { |
|||
"root": true, |
|||
"env": { |
|||
"node": true |
|||
}, |
|||
"extends": [ |
|||
"plugin:vue/essential", |
|||
"eslint:recommended", |
|||
"plugin:prettier/recommended" |
|||
], |
|||
"parserOptions": { |
|||
"parser": "@babel/eslint-parser" |
|||
}, |
|||
"rules": {} |
|||
}, |
|||
"browserslist": [ |
|||
"> 1%", |
|||
"last 2 versions", |
|||
"not dead" |
|||
] |
|||
} |
|||
@ -0,0 +1,79 @@ |
|||
<template> |
|||
<div ref="chartEl" style="height:100%" /> |
|||
</template> |
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
option: { |
|||
handler(newValue, oldValue) { |
|||
this.chart.setOption(newValue) |
|||
}, |
|||
// 因为option是个对象，而我们对于echarts的配置项，要更改的数据往往不在一级属性里面 |
|||
// 所以这里设置了deep:true，vue文档有说明 |
|||
deep: true |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.chart = echarts.init(this.$refs.chartEl) |
|||
|
|||
// 这里没有option,不在此初始化数据 |
|||
// 添加窗口改变监听 |
|||
this.chart._resize = this.throttle(() => { |
|||
this.chart.resize() |
|||
}, 200) |
|||
|
|||
window.addEventListener('resize', this.chart._resize) |
|||
}, |
|||
methods: { |
|||
// 去除props,添加methods |
|||
setOption(option) { |
|||
this.chart && this.chart.setOption(option,true) |
|||
}, |
|||
// 节流函数,来自Lodash，这里可以自己写一个简单点的 |
|||
// 如果有多个地方用到，也可以使用引入的方式 |
|||
throttle(func, wait, options) { |
|||
let time, context, args |
|||
let previous = 0 |
|||
if (!options) options = {} |
|||
|
|||
const later = function() { |
|||
previous = options.leading === false ? 0 : new Date().getTime() |
|||
time = null |
|||
func.apply(context, args) |
|||
if (!time) context = args = null |
|||
} |
|||
|
|||
const throttled = function() { |
|||
const now = new Date().getTime() |
|||
if (!previous && options.leading === false) previous = now |
|||
const remaining = wait - (now - previous) |
|||
context = this |
|||
args = arguments |
|||
if (remaining <= 0 || remaining > wait) { |
|||
if (time) { |
|||
clearTimeout(time) |
|||
time = null |
|||
} |
|||
previous = now |
|||
func.apply(context, args) |
|||
if (!time) context = args = null |
|||
} else if (!time && options.trailing !== false) { |
|||
time = setTimeout(later, remaining) |
|||
} |
|||
} |
|||
return throttled |
|||
} |
|||
}, |
|||
beforeDestroy() { |
|||
// 移除窗口改变监听 |
|||
window.removeEventListener('resize', this.chart._resize) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
@ -0,0 +1,184 @@ |
|||
/* eslint-disable */ |
|||
import { saveAs } from 'file-saver' |
|||
import * as XLSX from 'xlsx' |
|||
import * as XLSXStyle from "xlsx-style"; |
|||
|
|||
|
|||
function datenum(v, date1904) { |
|||
if (date1904) v += 1462; |
|||
var epoch = Date.parse(v); |
|||
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000); |
|||
} |
|||
|
|||
function sheet_from_array_of_arrays(data, opts) { |
|||
var ws = {}; |
|||
var range = { |
|||
s: { |
|||
c: 10000000, |
|||
r: 10000000 |
|||
}, |
|||
e: { |
|||
c: 0, |
|||
r: 0 |
|||
} |
|||
}; |
|||
for (var R = 0; R != data.length; ++R) { |
|||
for (var C = 0; C != data[R].length; ++C) { |
|||
if (range.s.r > R) range.s.r = R; |
|||
if (range.s.c > C) range.s.c = C; |
|||
if (range.e.r < R) range.e.r = R; |
|||
if (range.e.c < C) range.e.c = C; |
|||
var cell = { |
|||
v: data[R][C] |
|||
}; |
|||
if (cell.v == null) continue; |
|||
var cell_ref = XLSX.utils.encode_cell({ |
|||
c: C, |
|||
r: R |
|||
}); |
|||
|
|||
if (typeof cell.v === 'number') cell.t = 'n'; |
|||
else if (typeof cell.v === 'boolean') cell.t = 'b'; |
|||
else if (cell.v instanceof Date) { |
|||
cell.t = 'n'; |
|||
cell.z = XLSX.SSF._table[14]; |
|||
cell.v = datenum(cell.v); |
|||
} else cell.t = 's'; |
|||
ws[cell_ref] = cell; |
|||
} |
|||
} |
|||
if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range); |
|||
return ws; |
|||
} |
|||
|
|||
function Workbook() { |
|||
if (!(this instanceof Workbook)) return new Workbook(); |
|||
this.SheetNames = []; |
|||
this.Sheets = {}; |
|||
} |
|||
|
|||
function s2ab(s) { |
|||
var buf = new ArrayBuffer(s.length); |
|||
var view = new Uint8Array(buf); |
|||
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; |
|||
return buf; |
|||
} |
|||
|
|||
|
|||
export function export_json_to_excel({ |
|||
multiHeader = [], // 第一行表头
|
|||
multiHeader2 = [], // 第二行表头
|
|||
data, |
|||
filename, //文件名
|
|||
merges = [], // 合并
|
|||
bookType = 'xlsx' |
|||
} = {}) { |
|||
/* original data */ |
|||
filename = filename || '列表'; |
|||
data = [...data] |
|||
data.unshift(multiHeader2) |
|||
data.unshift(multiHeader) |
|||
console.log('data:', data) |
|||
var ws_name = "SheetJS"; |
|||
var wb = new Workbook(), |
|||
ws = sheet_from_array_of_arrays(data); |
|||
|
|||
if (merges.length > 0) { |
|||
if (!ws['!merges']) ws['!merges'] = []; |
|||
merges.forEach(item => { |
|||
ws['!merges'].push(XLSX.utils.decode_range(item)) |
|||
}) |
|||
} |
|||
|
|||
/* add worksheet to workbook */ |
|||
wb.SheetNames.push(ws_name); |
|||
wb.Sheets[ws_name] = ws; |
|||
|
|||
var wbout = XLSXStyle.write(wb, { |
|||
bookType: bookType, |
|||
bookSST: false, |
|||
type: 'binary' |
|||
}); |
|||
|
|||
saveAs(new Blob([s2ab(wbout)], { |
|||
type: "application/octet-stream" |
|||
}), `${filename}.${bookType}`); |
|||
} |
|||
|
|||
// 根据dom导出表格
|
|||
export function exportToExcel(idSelector, fileName, titleNum = 1) { |
|||
// 设置导出的内容是否只做解析，不进行格式转换 false：要解析， true:不解析
|
|||
const xlsxParam = { raw: true } |
|||
let table = document.querySelector(idSelector).cloneNode(true); |
|||
|
|||
// 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉
|
|||
if (table.querySelector('.el-table__fixed-right')) |
|||
table.removeChild(table.querySelector('.el-table__fixed-right')); |
|||
if (table.querySelector('.el-table__fixed')) |
|||
table.removeChild(table.querySelector('.el-table__fixed')); |
|||
|
|||
const wb = XLSX.utils.table_to_book(table, xlsxParam) |
|||
let range = XLSX.utils.decode_range(wb.Sheets['Sheet1']['!ref']); |
|||
let cWidth = []; |
|||
for (let C = range.s.c; C < range.e.c; ++C) { //SHEET列
|
|||
let len = 100; //默认列宽
|
|||
let len_max = 400; //最大列宽
|
|||
for (let R = range.s.r; R <= range.e.r; ++R) { //SHEET行
|
|||
let cell = { c: C, r: R }; //二维 列行确定一个单元格
|
|||
let cell_ref = XLSX.utils.encode_cell(cell); //单元格 A1、A2
|
|||
if (wb.Sheets['Sheet1'][cell_ref]) { |
|||
// if (R == 0){
|
|||
if (R < titleNum) { |
|||
wb.Sheets['Sheet1'][cell_ref].s = { //设置第一行单元格的样式 style
|
|||
alignment: { |
|||
horizontal: 'center', |
|||
vertical: 'center', |
|||
}, |
|||
}; |
|||
} else { |
|||
wb.Sheets['Sheet1'][cell_ref].s = { |
|||
alignment: { |
|||
horizontal: 'center', |
|||
vertical: 'center', |
|||
}, |
|||
}; |
|||
} |
|||
//动态自适应：计算列宽
|
|||
let va = JSON.parse(JSON.stringify(wb.Sheets['Sheet1'][cell_ref].v)); |
|||
var card1 = JSON.parse(JSON.stringify(va)).match(/[\u4e00-\u9fa5]/g); //匹配中文
|
|||
var card11 = ""; |
|||
if (card1) { |
|||
card11 = card1.join("") |
|||
} |
|||
var card2 = JSON.parse(JSON.stringify(va)).replace(/([^\u0000-\u00FF])/g, ""); //剔除中文
|
|||
let st = 0; |
|||
if (card11) { |
|||
// st += card11.length * 16 //中文字节码长度
|
|||
st += card11.length * 20 //中文字节码长度
|
|||
} |
|||
if (card2) { |
|||
// st += card2.length * 8 //非中文字节码长度
|
|||
st += card2.length * 10 //非中文字节码长度
|
|||
} |
|||
if (st > len) { |
|||
len = st; |
|||
} |
|||
} |
|||
} |
|||
if (len > len_max) { //最大宽度
|
|||
len = len_max; |
|||
} |
|||
|
|||
cWidth.push({ 'wpx': len }); //列宽
|
|||
} |
|||
wb.Sheets['Sheet1']['!cols'] = cWidth |
|||
const wbout = XLSXStyle.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' }) |
|||
try { |
|||
saveAs(new Blob([s2ab(wbout)], { type: '' }), `${fileName}.xlsx`) |
|||
} catch (e) { |
|||
if (typeof console !== 'undefined') { |
|||
console.log(e, wbout) |
|||
} |
|||
} |
|||
return wbout |
|||
} |
|||
1326
src/views/fee-settings/DiagnosisTemplate.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1482
src/views/fee-settings/ItemTemplate.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,102 +1,509 @@ |
|||
<template> |
|||
<div class="box"> |
|||
<div> |
|||
<el-card> |
|||
<el-form :model="form"> |
|||
<el-row> |
|||
<el-col :span="6"> |
|||
<el-form-item label="登记员"> |
|||
<el-select v-model="form.username" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in registrardata" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="登记日期"> |
|||
<el-date-picker |
|||
v-model="form.registrationdate" |
|||
type="daterange" |
|||
range-separator="--" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
<div slot="header">科室工作量统计</div> |
|||
<div :style="'display: block;width:' + (window.pageWidth - 45) + 'px;'"> |
|||
<div style="display: flex; flex-wrap: wrap; height: 35px"> |
|||
<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-date-picker> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="3"> |
|||
<el-button type="primary" size="">查询</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<!-- d登记标题 --> |
|||
<h3 class="tabtile">科室工作量统计</h3> |
|||
</el-form> |
|||
<div> |
|||
<el-table :data="tableData" style="width: 100%"> |
|||
<el-table-column prop="time" label="时间" width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="physicalexamination" |
|||
label="体检科室" |
|||
width="180" |
|||
</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">查询</el-button> |
|||
</div> |
|||
<div class="query"> |
|||
<el-button size="small" @click="handleExport">导出excel</el-button> |
|||
</div> |
|||
<div class="query"> |
|||
<el-button size="small" @click="onPrint">打印</el-button> |
|||
</div> |
|||
<div class="query"> |
|||
<el-button size="small" @click="columnarChart">柱状图</el-button> |
|||
</div> |
|||
<div class="query"> |
|||
<el-button size="small" @click="peiChart">饼图</el-button> |
|||
</div> |
|||
</div> |
|||
<div |
|||
style=" |
|||
display: flex; |
|||
justify-content: space-between; |
|||
position: relative; |
|||
margin-top: 5px; |
|||
" |
|||
id="domTable" |
|||
> |
|||
<div style="width: 49%" 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 |
|||
:span-method="objectSpanMethod" |
|||
:height=" |
|||
flag |
|||
? window.pageHeight < 600 |
|||
? 415 |
|||
: window.pageHeight - 185 - 10 |
|||
: '' |
|||
" |
|||
: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="doctorName" |
|||
label="医生" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="asbitemName" |
|||
label="组合项目" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="checkCount" |
|||
label="人数" |
|||
></el-table-column> |
|||
<el-table-column prop="avgStandardPrice" label="标准价格"> |
|||
</el-table-column> |
|||
<el-table-column prop="avgChargePrice" label="实际价格"> |
|||
</el-table-column> |
|||
<el-table-column prop="sumStandardPrice" label="标准金额"> |
|||
</el-table-column> |
|||
<el-table-column prop="sumChargePrice" label="实际金额"> |
|||
</el-table-column> |
|||
</el-table-column> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div |
|||
:style=" |
|||
'width: 49%;overflow: hidden;height:' + |
|||
(window.pageHeight < 600 ? 415 : window.pageHeight - 185 - 5) + |
|||
'px;' |
|||
" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column prop="asbitem" label="组合项目" width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="persontime" label="人次"> </el-table-column> |
|||
</el-table> |
|||
<!-- 时间 <span style="margin-left: 20px">xxx</span> |
|||
|
|||
至 |
|||
<span style="margin-left: 20px">xxx</span> |
|||
</div> |
|||
<div> |
|||
<span>体检科室</span>xxx |
|||
<span>组合项目</span>xxx |
|||
<span>人次</span>xxx --> |
|||
<ChartBlock ref="chart2"></ChartBlock> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</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 { |
|||
tableData: [ |
|||
{ |
|||
time: "2023-8-8", |
|||
physicalexamination: "内科", |
|||
asbitem: "脂肪代谢", |
|||
persontime: "3", |
|||
registrardata: [], |
|||
username: [], |
|||
startDate: "", |
|||
endDate: "", |
|||
tableData: [], |
|||
seriesData: [], |
|||
yAxisData: [], |
|||
flag: true, |
|||
arr1: [], |
|||
pieData: [], |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
mounted() { |
|||
this.getNowTime(); |
|||
}, |
|||
methods: { |
|||
peiChart() { |
|||
let option2 = { |
|||
title: { |
|||
text: "医生工作量统计", |
|||
left: "center", |
|||
}, |
|||
], |
|||
form: { |
|||
username: "", |
|||
registrationdate: "", |
|||
}, |
|||
registrardata: [ |
|||
{ |
|||
value: "1", |
|||
label: "张三", |
|||
tooltip: { |
|||
trigger: "item", |
|||
confine: true, |
|||
}, |
|||
{ |
|||
value: "2", |
|||
label: "测试", |
|||
legend: { |
|||
data:this.yAxisData, |
|||
orient: "horizontal", |
|||
right: "3%", |
|||
top: "3%", |
|||
}, |
|||
], |
|||
}; |
|||
grid: { |
|||
show: false, |
|||
left: "0%", |
|||
right: "5%", |
|||
top: "8%", |
|||
bottom: "5%", |
|||
containLabel: true, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "pie", |
|||
label: { |
|||
show: true, |
|||
formatter: "{b} : {c}人 ({d}%)" // b代表名称，c代表对应值，d代表百分比 |
|||
}, |
|||
data: this.pieData |
|||
} |
|||
], |
|||
}; |
|||
this.$refs.chart2.setOption(option2); |
|||
}, |
|||
columnarChart() { |
|||
let option2 = { |
|||
title: { |
|||
text: "医生工作量统计", |
|||
left: "center", |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
confine: true, |
|||
}, |
|||
legend: { |
|||
type: "scroll", |
|||
orient: "horizontal", |
|||
right: "3%", |
|||
top: "3%", |
|||
}, |
|||
grid: { |
|||
show: false, |
|||
left: "0%", |
|||
right: "5%", |
|||
top: "8%", |
|||
bottom: "5%", |
|||
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); |
|||
}, |
|||
headerStyle({ row, column, rowIndex, columnIndex }) { |
|||
if (rowIndex === 1) { |
|||
return "right-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; |
|||
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; |
|||
}); |
|||
}, |
|||
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/getdoctorpersonnelworkloadreport", { |
|||
userIds: that.username, |
|||
startDate: that.startDate, |
|||
endDate: that.endDate, |
|||
}).then((res) => { |
|||
if (res.code != -1) { |
|||
// that.tableData = res.data; |
|||
that.computedTableData(res.data); |
|||
} |
|||
}); |
|||
}, |
|||
setdates(arr) { |
|||
var obj = {}, |
|||
k, |
|||
arr1 = []; |
|||
this.arr1 = []; |
|||
for (var i = 0, len = arr.length; i < len; i++) { |
|||
k = arr[i].doctorName; //需要合并的字段 |
|||
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); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
objectSpanMethod({ row, column, rowIndex, columnIndex }) { |
|||
if (columnIndex === 0) { |
|||
let _row = this.arr1[rowIndex]; |
|||
let _col = this.arr1[rowIndex] > 0 ? 1 : 0; |
|||
return [_row, _col]; |
|||
} |
|||
}, |
|||
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; |
|||
}, |
|||
ForwardRanking(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.setdates(this.tableData); |
|||
}, |
|||
computedTableData(tableData) { |
|||
const newData = [...tableData]; // 创建一个新的数组，避免修改原始数据 |
|||
const totalRows = { |
|||
doctorName: "", |
|||
asbitemName: "合计", |
|||
checkCount: 0, |
|||
avgStandardPrice: 0, |
|||
avgChargePrice: 0, |
|||
sumStandardPrice: 0, |
|||
sumChargePrice: 0, |
|||
}; // 合计行的数据 |
|||
let pies = { |
|||
name: "", |
|||
value: 0, |
|||
}; |
|||
let obj = {}; |
|||
for (let i = 0; i < tableData.length; i++) { |
|||
var item = tableData[i].doctorName; |
|||
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.doctorName == key) { |
|||
totalRow.doctorName = item.doctorName; |
|||
pie.name = item.doctorName; |
|||
totalRow.checkCount += item.checkCount; |
|||
pie.value += item.checkCount; |
|||
totalRow.avgStandardPrice = |
|||
(totalRow.avgStandardPrice * 100000 + |
|||
item.avgStandardPrice * 100000) / |
|||
100000; |
|||
totalRow.avgChargePrice = |
|||
(totalRow.avgChargePrice * 100000 + |
|||
item.avgChargePrice * 100000) / |
|||
100000; |
|||
totalRow.sumStandardPrice = |
|||
(totalRow.sumStandardPrice * 100000 + |
|||
item.sumStandardPrice * 100000) / |
|||
100000; |
|||
totalRow.sumChargePrice = |
|||
(totalRow.sumChargePrice * 100000 + |
|||
item.sumChargePrice * 100000) / |
|||
100000; |
|||
} |
|||
}); |
|||
newData.push(totalRow); |
|||
this.pieData.push(pie); |
|||
this.yAxisData.push(totalRow.doctorName); |
|||
this.seriesData.push(totalRow.checkCount); |
|||
}); |
|||
this.ForwardRanking(newData, "doctorName"); |
|||
this.columnarChart(); |
|||
}, |
|||
handleExport() { |
|||
exportToExcel("#table", "医生工作量统计"); |
|||
}, |
|||
}, |
|||
computed: { |
|||
...mapState(["window", "dict", "patientRegister", "report"]), |
|||
}, |
|||
updated() { |
|||
this.$nextTick(() => { |
|||
this.$refs.table.doLayout(); |
|||
}); |
|||
}, |
|||
mounted() {}, |
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.tabtile { |
|||
text-align: center; |
|||
margin-top: 20px; |
|||
@import "../../assets/css/global_button.css"; |
|||
@import "../../assets/css/global_card.css"; |
|||
@import "../../assets/css/global_input.css"; |
|||
@import "../../assets/css/global_table.css"; |
|||
@import "../../assets/css/global.css"; |
|||
|
|||
.query { |
|||
margin-left: 10px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
:deep .right-align .cell { |
|||
text-align: right !important; |
|||
} |
|||
::v-deep .el-table__body-wrapper::-webkit-scrollbar { |
|||
width: 0px; |
|||
background: rgba(213, 215, 220, 0.3); |
|||
border: none; |
|||
} |
|||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track { |
|||
border: none; |
|||
} |
|||
::v-deep .el-table th.gutter { |
|||
display: none; |
|||
width: 0; |
|||
} |
|||
::v-deep .el-table colgroup col[name="gutter"] { |
|||
display: none; |
|||
width: 0; |
|||
} |
|||
::v-deep .el-table__body { |
|||
width: 100% !important; |
|||
} |
|||
</style> |
|||
@ -1,91 +1,336 @@ |
|||
<template> |
|||
<div class="box"> |
|||
<div> |
|||
<el-card> |
|||
<el-form :model="form"> |
|||
<el-row> |
|||
<el-col :span="6"> |
|||
<el-form-item label="登记员"> |
|||
<el-select v-model="form.username" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in registrardata" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="登记日期"> |
|||
<el-date-picker |
|||
v-model="form.registrationdate" |
|||
type="daterange" |
|||
range-separator="--" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
<div slot="header">总检医生工作量统计</div> |
|||
<div :style="'display: block;width:' + (window.pageWidth - 45) + 'px;'"> |
|||
<div style="display: flex; flex-wrap: wrap; height: 35px"> |
|||
<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-date-picker> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<!-- d登记标题 --> |
|||
<h3 class="tabtile">总检医生工作量统计</h3> |
|||
</el-form> |
|||
<div> |
|||
<el-table :data="tableData" style="width: 100%"> |
|||
<el-table-column prop="time" label="时间" width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="chiefexaminer" label="总检医生" width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="shareintotal" label="占总检人数百分比"> </el-table-column> |
|||
</el-table> |
|||
<!-- 时间<span style="margin-left: 20px">xxx</span> |
|||
至 |
|||
<span style="margin-left: 20px">xxx</span> |
|||
</div> |
|||
<div> |
|||
总检医生<span style="margin-left: 20px">xxx</span> 人数<span>xxx</span> |
|||
<span style="margin-left: 20px">占总检人数百分比</span> |
|||
<span style="margin-left: 10px">xxx</span> --> |
|||
</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">查询</el-button> |
|||
</div> |
|||
<div class="query"> |
|||
<el-button size="small" @click="handleExport">导出excel</el-button> |
|||
</div> |
|||
<div class="query"> |
|||
<el-button size="small" @click="onPrint">打印</el-button> |
|||
</div> |
|||
</div> |
|||
<div |
|||
style=" |
|||
display: flex; |
|||
justify-content: space-between; |
|||
position: relative; |
|||
margin-top: 5px; |
|||
" |
|||
id="domTable" |
|||
> |
|||
<div style="width: 49%" 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- 10 |
|||
: '' |
|||
" |
|||
: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="sumCheckDoctorName" label="医生"></el-table-column> |
|||
<el-table-column prop="sumCheckCount" 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: 49%;overflow: hidden;height:' + |
|||
(window.pageHeight < 600 ? 415 : window.pageHeight - 185-5) + |
|||
'px;' |
|||
" |
|||
> |
|||
<ChartBlock ref="chart2"></ChartBlock> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</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 { |
|||
tableData: [ |
|||
{ |
|||
time: "2023-8-9", |
|||
chiefexaminer: "医生", |
|||
shareintotal: "51%", |
|||
}, |
|||
], |
|||
form: { |
|||
username: "", |
|||
registrationdate: "", |
|||
registrardata: [], |
|||
username: [], |
|||
startDate: "", |
|||
endDate: "", |
|||
tableData: [], |
|||
seriesData: [], |
|||
yAxisData: [], |
|||
flag: true, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
mounted() { |
|||
this.getNowTime(); |
|||
}, |
|||
methods: { |
|||
headerStyle({ row, column, rowIndex, columnIndex }) { |
|||
console.log(rowIndex) |
|||
if(rowIndex===1){ |
|||
return 'right-align' |
|||
} |
|||
}, |
|||
registrardata: [ |
|||
{ |
|||
value: "1", |
|||
label: "张三", |
|||
}, |
|||
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; |
|||
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; |
|||
}); |
|||
}, |
|||
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/getsumcheckdoctorworkloadreport", |
|||
{ |
|||
value: "2", |
|||
label: "测试", |
|||
}, |
|||
], |
|||
}; |
|||
userIds: that.username, |
|||
startDate: that.startDate, |
|||
endDate: that.endDate, |
|||
} |
|||
).then((res) => { |
|||
if (res.code != -1) { |
|||
that.tableData = [...res.data]; |
|||
this.yAxisData = []; |
|||
this.seriesData = []; |
|||
for (let i = 0; i < res.data.length; i++) { |
|||
this.yAxisData.push(res.data[i].sumCheckDoctorName); |
|||
this.seriesData.push(res.data[i].sumCheckCount); |
|||
} |
|||
let option2 = { |
|||
title: { |
|||
text: "总检医生工作量统计", |
|||
left: "center", |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
confine: true, |
|||
}, |
|||
legend: { |
|||
type: "scroll", |
|||
orient: "horizontal", // 垂直 |
|||
right: "3%", // 左对齐 |
|||
top: "3%", // 位于顶部 |
|||
}, |
|||
grid: { |
|||
show: false, |
|||
left: "0%", |
|||
right: "5%", |
|||
top: "8%", |
|||
bottom: "2%", |
|||
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); |
|||
} |
|||
}); |
|||
}, |
|||
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", "总检医生工作量统计"); |
|||
}, |
|||
}, |
|||
computed: { |
|||
...mapState(["window", "dict", "patientRegister", "report"]), |
|||
}, |
|||
updated() { |
|||
this.$nextTick(() => { |
|||
this.$refs.table.doLayout(); |
|||
}); |
|||
}, |
|||
mounted() {}, |
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.tabtile { |
|||
text-align: center; |
|||
margin-top: 20px; |
|||
@import "../../assets/css/global_button.css"; |
|||
@import "../../assets/css/global_card.css"; |
|||
@import "../../assets/css/global_input.css"; |
|||
@import "../../assets/css/global_table.css"; |
|||
@import "../../assets/css/global.css"; |
|||
|
|||
.query { |
|||
margin-left: 10px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
:deep .right-align .cell{text-align: right !important;} |
|||
</style> |
|||
@ -1,101 +1,509 @@ |
|||
<template> |
|||
<div class="box"> |
|||
<el-card class="boxcard"> |
|||
<el-form :model="form"> |
|||
<el-row> |
|||
<el-col :span="4"> |
|||
<el-form-item label="总检医生" label-width="80px"> |
|||
<el-select v-model="form.username" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in registrardata" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="登记日期" label-width="80px"> |
|||
<el-date-picker |
|||
v-model="form.registrationdate" |
|||
type="daterange" |
|||
range-separator="--" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
<div> |
|||
<el-card> |
|||
<div slot="header">医生工作量统计</div> |
|||
<div :style="'display: block;width:' + (window.pageWidth - 45) + 'px;'"> |
|||
<div style="display: flex; flex-wrap: wrap; height: 35px"> |
|||
<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-date-picker> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="3"> |
|||
<el-button type="primary">查询</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<!-- d登记标题 --> |
|||
<h3 class="tabtile">医生工作量统计</h3> |
|||
</el-form> |
|||
<div> |
|||
<!-- 时间 <span style="margin-left: 20px">xxx</span> |
|||
至 |
|||
<span style="margin-left: 20px">xxx</span> --> |
|||
<el-table :data="tableData" style="width: 100%"> |
|||
<el-table-column prop="chiefexaminer" label="总检医生" width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="numberofpeople" label="人数" width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="generalinspection" label="占总检总人数"> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="subtotalquantity"> |
|||
<span>小计</span> |
|||
</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">查询</el-button> |
|||
</div> |
|||
<div class="query"> |
|||
<el-button size="small" @click="handleExport">导出excel</el-button> |
|||
</div> |
|||
<div class="query"> |
|||
<el-button size="small" @click="onPrint">打印</el-button> |
|||
</div> |
|||
<div class="query"> |
|||
<el-button size="small" @click="columnarChart">柱状图</el-button> |
|||
</div> |
|||
<div class="query"> |
|||
<el-button size="small" @click="peiChart">饼图</el-button> |
|||
</div> |
|||
</div> |
|||
<div |
|||
style=" |
|||
display: flex; |
|||
justify-content: space-between; |
|||
position: relative; |
|||
margin-top: 5px; |
|||
" |
|||
id="domTable" |
|||
> |
|||
<div style="width: 49%" 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 |
|||
:span-method="objectSpanMethod" |
|||
:height=" |
|||
flag |
|||
? window.pageHeight < 600 |
|||
? 415 |
|||
: window.pageHeight - 185 - 10 |
|||
: '' |
|||
" |
|||
: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="doctorName" |
|||
label="医生" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="asbitemName" |
|||
label="组合项目" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="checkCount" |
|||
label="人数" |
|||
></el-table-column> |
|||
<el-table-column prop="avgStandardPrice" label="标准价格"> |
|||
</el-table-column> |
|||
<el-table-column prop="avgChargePrice" label="实际价格"> |
|||
</el-table-column> |
|||
<el-table-column prop="sumStandardPrice" label="标准金额"> |
|||
</el-table-column> |
|||
<el-table-column prop="sumChargePrice" label="实际金额"> |
|||
</el-table-column> |
|||
</el-table-column> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div |
|||
:style=" |
|||
'width: 49%;overflow: hidden;height:' + |
|||
(window.pageHeight < 600 ? 415 : window.pageHeight - 185 - 5) + |
|||
'px;' |
|||
" |
|||
> |
|||
<ChartBlock ref="chart2"></ChartBlock> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</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 { |
|||
tableData: [ |
|||
{ |
|||
time: "203-8-9", |
|||
chiefexaminer: "测试", |
|||
numberofpeople: "85", |
|||
generalinspection: "13", |
|||
registrardata: [], |
|||
username: [], |
|||
startDate: "", |
|||
endDate: "", |
|||
tableData: [], |
|||
seriesData: [], |
|||
yAxisData: [], |
|||
flag: true, |
|||
arr1: [], |
|||
pieData: [], |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
mounted() { |
|||
this.getNowTime(); |
|||
}, |
|||
methods: { |
|||
peiChart() { |
|||
let option2 = { |
|||
title: { |
|||
text: "医生工作量统计", |
|||
left: "center", |
|||
}, |
|||
], |
|||
form: { |
|||
username: "", |
|||
registrationdate: "", |
|||
}, |
|||
registrardata: [ |
|||
{ |
|||
value: "1", |
|||
label: "张三", |
|||
tooltip: { |
|||
trigger: "item", |
|||
confine: true, |
|||
}, |
|||
{ |
|||
value: "2", |
|||
label: "全部", |
|||
legend: { |
|||
data:this.yAxisData, |
|||
orient: "horizontal", |
|||
right: "3%", |
|||
top: "3%", |
|||
}, |
|||
], |
|||
}; |
|||
grid: { |
|||
show: false, |
|||
left: "0%", |
|||
right: "5%", |
|||
top: "8%", |
|||
bottom: "2%", |
|||
containLabel: true, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "pie", |
|||
label: { |
|||
show: true, |
|||
formatter: "{b} : {c}人 ({d}%)" // b代表名称，c代表对应值，d代表百分比 |
|||
}, |
|||
data: this.pieData |
|||
} |
|||
], |
|||
}; |
|||
this.$refs.chart2.setOption(option2); |
|||
}, |
|||
columnarChart() { |
|||
let option2 = { |
|||
title: { |
|||
text: "医生工作量统计", |
|||
left: "center", |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
confine: true, |
|||
}, |
|||
legend: { |
|||
type: "scroll", |
|||
orient: "horizontal", |
|||
right: "3%", |
|||
top: "3%", |
|||
}, |
|||
grid: { |
|||
show: false, |
|||
left: "0%", |
|||
right: "5%", |
|||
top: "8%", |
|||
bottom: "2%", |
|||
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); |
|||
}, |
|||
headerStyle({ row, column, rowIndex, columnIndex }) { |
|||
if (rowIndex === 1) { |
|||
return "right-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; |
|||
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; |
|||
}); |
|||
}, |
|||
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/getdoctorpersonnelworkloadreport", { |
|||
userIds: that.username, |
|||
startDate: that.startDate, |
|||
endDate: that.endDate, |
|||
}).then((res) => { |
|||
if (res.code != -1) { |
|||
// that.tableData = res.data; |
|||
that.computedTableData(res.data); |
|||
} |
|||
}); |
|||
}, |
|||
setdates(arr) { |
|||
var obj = {}, |
|||
k, |
|||
arr1 = []; |
|||
this.arr1 = []; |
|||
for (var i = 0, len = arr.length; i < len; i++) { |
|||
k = arr[i].doctorName; //需要合并的字段 |
|||
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); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
objectSpanMethod({ row, column, rowIndex, columnIndex }) { |
|||
if (columnIndex === 0) { |
|||
let _row = this.arr1[rowIndex]; |
|||
let _col = this.arr1[rowIndex] > 0 ? 1 : 0; |
|||
return [_row, _col]; |
|||
} |
|||
}, |
|||
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; |
|||
}, |
|||
ForwardRanking(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.setdates(this.tableData); |
|||
}, |
|||
computedTableData(tableData) { |
|||
const newData = [...tableData]; // 创建一个新的数组，避免修改原始数据 |
|||
const totalRows = { |
|||
doctorName: "", |
|||
asbitemName: "合计", |
|||
checkCount: 0, |
|||
avgStandardPrice: 0, |
|||
avgChargePrice: 0, |
|||
sumStandardPrice: 0, |
|||
sumChargePrice: 0, |
|||
}; // 合计行的数据 |
|||
let pies = { |
|||
name: "", |
|||
value: 0, |
|||
}; |
|||
let obj = {}; |
|||
for (let i = 0; i < tableData.length; i++) { |
|||
var item = tableData[i].doctorName; |
|||
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.doctorName == key) { |
|||
totalRow.doctorName = item.doctorName; |
|||
pie.name = item.doctorName; |
|||
totalRow.checkCount += item.checkCount; |
|||
pie.value += item.checkCount; |
|||
totalRow.avgStandardPrice = |
|||
(totalRow.avgStandardPrice * 100000 + |
|||
item.avgStandardPrice * 100000) / |
|||
100000; |
|||
totalRow.avgChargePrice = |
|||
(totalRow.avgChargePrice * 100000 + |
|||
item.avgChargePrice * 100000) / |
|||
100000; |
|||
totalRow.sumStandardPrice = |
|||
(totalRow.sumStandardPrice * 100000 + |
|||
item.sumStandardPrice * 100000) / |
|||
100000; |
|||
totalRow.sumChargePrice = |
|||
(totalRow.sumChargePrice * 100000 + |
|||
item.sumChargePrice * 100000) / |
|||
100000; |
|||
} |
|||
}); |
|||
newData.push(totalRow); |
|||
this.pieData.push(pie); |
|||
this.yAxisData.push(totalRow.doctorName); |
|||
this.seriesData.push(totalRow.checkCount); |
|||
}); |
|||
this.ForwardRanking(newData, "doctorName"); |
|||
this.columnarChart(); |
|||
}, |
|||
handleExport() { |
|||
exportToExcel("#table", "医生工作量统计"); |
|||
}, |
|||
}, |
|||
computed: { |
|||
...mapState(["window", "dict", "patientRegister", "report"]), |
|||
}, |
|||
updated() { |
|||
this.$nextTick(() => { |
|||
this.$refs.table.doLayout(); |
|||
}); |
|||
}, |
|||
mounted() {}, |
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.subtotalquantity{ |
|||
margin-top: 10px; |
|||
text-align: center; |
|||
@import "../../assets/css/global_button.css"; |
|||
@import "../../assets/css/global_card.css"; |
|||
@import "../../assets/css/global_input.css"; |
|||
@import "../../assets/css/global_table.css"; |
|||
@import "../../assets/css/global.css"; |
|||
|
|||
.query { |
|||
margin-left: 10px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
:deep .right-align .cell { |
|||
text-align: right !important; |
|||
} |
|||
::v-deep .el-table__body-wrapper::-webkit-scrollbar { |
|||
width: 0px; |
|||
background: rgba(213, 215, 220, 0.3); |
|||
border: none; |
|||
} |
|||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track { |
|||
border: none; |
|||
} |
|||
::v-deep .el-table th.gutter { |
|||
display: none; |
|||
width: 0; |
|||
} |
|||
.boxcard { |
|||
height: 800px; |
|||
::v-deep .el-table colgroup col[name="gutter"] { |
|||
display: none; |
|||
width: 0; |
|||
} |
|||
.tabtile { |
|||
text-align: center; |
|||
margin-top: 20px; |
|||
::v-deep .el-table__body { |
|||
width: 100% !important; |
|||
} |
|||
</style> |
|||
@ -1,99 +1,338 @@ |
|||
<template> |
|||
<div class="box"> |
|||
<el-card class="boxcard"> |
|||
<el-form :model="form"> |
|||
<el-row> |
|||
<el-col :span="4"> |
|||
<el-form-item label="登记员"> |
|||
<el-select v-model="form.username" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in registrardata" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="登记日期"> |
|||
<el-date-picker |
|||
v-model="form.registrationdate" |
|||
type="daterange" |
|||
range-separator="--" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
<div> |
|||
<el-card> |
|||
<div slot="header">登记员工作量统计</div> |
|||
<div :style="'display: block;width:' + (window.pageWidth - 45) + 'px;'"> |
|||
<div style="display: flex; flex-wrap: wrap; height: 35px"> |
|||
<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-date-picker> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="3"> |
|||
<el-button type="primary">查询</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<!-- d登记标题 --> |
|||
<h3 class="tabtile">登记员工作量统计</h3> |
|||
</el-form> |
|||
<div> |
|||
<!-- 登记员<span style="margin-left: 20px">xxx</span> |
|||
人数 |
|||
<span style="margin-left: 20px">xxx</span> |
|||
站登记总人数百分比 |
|||
<span style="margin-left: 20px">xxx</span> --> |
|||
<el-table :data="tableData" style="width: 100%"> |
|||
<el-table-column prop="registrar" label="登记员" width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="totalofpeople" |
|||
label="站登记总人数百分比" |
|||
width="180" |
|||
</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">查询</el-button> |
|||
</div> |
|||
<div class="query"> |
|||
<el-button size="small" @click="handleExport">导出excel</el-button> |
|||
</div> |
|||
<div class="query"> |
|||
<el-button size="small" @click="onPrint">打印</el-button> |
|||
</div> |
|||
</div> |
|||
<div |
|||
style=" |
|||
display: flex; |
|||
justify-content: space-between; |
|||
position: relative; |
|||
margin-top: 5px; |
|||
" |
|||
id="domTable" |
|||
> |
|||
<div style="width: 49%" 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- 10 |
|||
: '' |
|||
" |
|||
: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="personnelName" label="登记员"></el-table-column> |
|||
<el-table-column prop="registerCount" 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: 49%;overflow: hidden;height:' + |
|||
(window.pageHeight < 600 ? 415 : window.pageHeight - 185-5) + |
|||
'px;' |
|||
" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column prop="numberofpeople" label="人数"> |
|||
</el-table-column> |
|||
</el-table> |
|||
<ChartBlock ref="chart2"></ChartBlock> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</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 { |
|||
tableData: [ |
|||
{ |
|||
registrar: "张三", |
|||
totalofpeople: "33%", |
|||
numberofpeople: "10", |
|||
}, |
|||
], |
|||
form: { |
|||
username: "", |
|||
registrationdate: "", |
|||
registrardata: [], |
|||
username: [], |
|||
startDate: "", |
|||
endDate: "", |
|||
tableData: [], |
|||
seriesData: [], |
|||
yAxisData: [], |
|||
flag: true, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
mounted() { |
|||
this.getNowTime(); |
|||
}, |
|||
methods: { |
|||
headerStyle({ row, column, rowIndex, columnIndex }) { |
|||
console.log(rowIndex) |
|||
if(rowIndex===1){ |
|||
return 'right-align' |
|||
} |
|||
}, |
|||
registrardata: [ |
|||
{ |
|||
value: "1", |
|||
label: "张三", |
|||
}, |
|||
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; |
|||
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; |
|||
}); |
|||
}, |
|||
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/getregistrationpersonnelworkloadreport", |
|||
{ |
|||
value: "2", |
|||
label: "测试", |
|||
}, |
|||
], |
|||
}; |
|||
userIds: that.username, |
|||
startDate: that.startDate, |
|||
endDate: that.endDate, |
|||
} |
|||
).then((res) => { |
|||
if (res.code != -1) { |
|||
that.tableData = [...res.data]; |
|||
this.yAxisData = []; |
|||
this.seriesData = []; |
|||
for (let i = 0; i < res.data.length; i++) { |
|||
this.yAxisData.push(res.data[i].personnelName); |
|||
this.seriesData.push(res.data[i].registerCount); |
|||
} |
|||
let option2 = { |
|||
title: { |
|||
text: "登记员工作量统计", |
|||
left: "center", |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
confine: true, |
|||
}, |
|||
legend: { |
|||
type: "scroll", |
|||
orient: "horizontal", // 垂直 |
|||
right: "3%", // 左对齐 |
|||
top: "3%", // 位于顶部 |
|||
}, |
|||
grid: { |
|||
show: false, |
|||
left: "0%", |
|||
right: "5%", |
|||
top: "8%", |
|||
bottom: "2%", |
|||
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); |
|||
} |
|||
}); |
|||
}, |
|||
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", "登记员工作量统计"); |
|||
}, |
|||
}, |
|||
computed: { |
|||
...mapState(["window", "dict", "patientRegister", "report"]), |
|||
}, |
|||
updated() { |
|||
this.$nextTick(() => { |
|||
this.$refs.table.doLayout(); |
|||
}); |
|||
}, |
|||
mounted() {}, |
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.boxcard{ |
|||
height: 800px; |
|||
@import "../../assets/css/global_button.css"; |
|||
@import "../../assets/css/global_card.css"; |
|||
@import "../../assets/css/global_input.css"; |
|||
@import "../../assets/css/global_table.css"; |
|||
@import "../../assets/css/global.css"; |
|||
|
|||
.query { |
|||
margin-left: 10px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.tabtile { |
|||
text-align: center; |
|||
margin-top: 20px; |
|||
:deep .right-align .cell{ |
|||
text-align: right !important; |
|||
} |
|||
</style> |
|||
@ -1,30 +1,45 @@ |
|||
const { defineConfig } = require("@vue/cli-service"); |
|||
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin") |
|||
module.exports = defineConfig({ |
|||
transpileDependencies: true, |
|||
lintOnSave: false, |
|||
devServer: { |
|||
port: "8080", |
|||
proxy: { |
|||
"/api": { |
|||
target: "http://192.168.1.108:44358", |
|||
changeorigin: true, // 在本会创建一个虚拟服务满，然后发送清求的数，并同时接收济求的数，这样服务端和服务减进行数据的交互就不会有域问题
|
|||
rewite: (path) => path.replace(/^\/api/, ""), |
|||
// pathRewrite: {
|
|||
// "^/api": ''
|
|||
// }
|
|||
}, |
|||
transpileDependencies: true, |
|||
lintOnSave: false, |
|||
configureWebpack: { |
|||
plugins: [ |
|||
new NodePolyfillPlugin() |
|||
], |
|||
resolve: { |
|||
fallback: { |
|||
fs: false, |
|||
crypto: false |
|||
} |
|||
}, |
|||
externals: { |
|||
'./cptable': 'var cptable', |
|||
}, |
|||
}, |
|||
}, |
|||
// pages: {
|
|||
// index: {
|
|||
// entry: 'src/main.js',
|
|||
// template: 'src/App.vue',
|
|||
// filname: 'index.html'
|
|||
// },
|
|||
// about: {
|
|||
// entry: 'src/main.js',
|
|||
// template: 'src/App.vue',
|
|||
// filname: 'about.html'
|
|||
// },
|
|||
// }
|
|||
}); |
|||
devServer: { |
|||
port: "8080", |
|||
proxy: { |
|||
"/api": { |
|||
target: "http://192.168.1.108:44358", |
|||
changeorigin: true, // 在本会创建一个虚拟服务满，然后发送清求的数，并同时接收济求的数，这样服务端和服务减进行数据的交互就不会有域问题
|
|||
rewite: (path) => path.replace(/^\/api/, ""), |
|||
// pathRewrite: {
|
|||
// "^/api": ''
|
|||
// }
|
|||
}, |
|||
}, |
|||
} |
|||
// pages: {
|
|||
// index: {
|
|||
// entry: 'src/main.js',
|
|||
// template: 'src/App.vue',
|
|||
// filname: 'index.html'
|
|||
// },
|
|||
// about: {
|
|||
// entry: 'src/main.js',
|
|||
// template: 'src/App.vue',
|
|||
// filname: 'about.html'
|
|||
// },
|
|||
// }
|
|||
}); |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue