工作量统计

package.json

@@ -13,10 +13,14 @@
     "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",
@@ -25,7 +29,9 @@
         "vue-print-nb": "^1.7.5",
         "vue-router": "^3.5.1",
         "vuex": "^3.6.2",
-    "xlsx": "^0.18.5"
+        "xlsx": "^0.18.5",
+        "xlsx-style": "^0.8.13",
+        "print-js": "^1.6.0"
     },
     "devDependencies": {
         "@babel/core": "^7.12.16",

src/components/workload/chartsBlock.vue

@@ -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>
+

src/utlis/Export2Excel.js

@@ -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
+}

src/views/workload/deskwork.vue

@@ -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="请选择">
+      <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.value"
-                  :label="item.label"
-                  :value="item.value"
+                :key="item.id"
+                :label="item.surname"
+                :value="item.id"
               >
               </el-option>
             </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="登记日期">
+          </div>
+          <div class="query">
+            <span>开始日期：</span>
             <el-date-picker
-                v-model="form.registrationdate"
-                type="daterange"
-                range-separator="--"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
+              type="date"
+              placeholder="选择开始日期"
+              size="small"
+              v-model="startDate"
+              value-format="yyyy-MM-dd"
+              editable
             >
             </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"
+          </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 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 -->
+          <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: [
+      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",
+        },
+        tooltip: {
+          trigger: "item",
+          confine: true,
+        },
+        legend: {
+          data:this.yAxisData,
+          orient: "horizontal",
+          right: "3%",
+          top: "3%",
+        },
+        grid: {
+          show: false,
+          left: "0%",
+          right: "5%",
+          top: "8%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        series: [
            {
-          time: "2023-8-8",
-          physicalexamination: "内科",
-          asbitem: "脂肪代谢",
-          persontime: "3",
+            type: "pie",
+            label: {
+                show: true,
+                formatter: "{b} : {c}人 ({d}%)" // b代表名称，c代表对应值，d代表百分比
             },
+            data: this.pieData
+        }
         ],
-      form: {
-        username: "",
-        registrationdate: "",
+      };
+      this.$refs.chart2.setOption(option2);
     },
-      registrardata: [
-        {
-          value: "1",
-          label: "张三",
+    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: [
           {
-          value: "2",
-          label: "测试",
+            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>

src/views/workload/directordoctor.vue

@@ -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="请选择">
+      <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.value"
-                  :label="item.label"
-                  :value="item.value"
+                :key="item.id"
+                :label="item.surname"
+                :value="item.id"
               >
               </el-option>
             </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="登记日期">
+          </div>
+          <div class="query">
+            <span>开始日期：</span>
             <el-date-picker
-                v-model="form.registrationdate"
-                type="daterange"
-                range-separator="--"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
+              type="date"
+              placeholder="选择开始日期"
+              size="small"
+              v-model="startDate"
+              value-format="yyyy-MM-dd"
+              editable
             >
             </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">
+          </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 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> -->
+          <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%",
+      registrardata: [],
+      username: [],
+      startDate: "",
+      endDate: "",
+      tableData: [],
+      seriesData: [],
+      yAxisData: [],
+      flag: true,
+    };
   },
-      ],
-      form: {
-        username: "",
-        registrationdate: "",
+  created() {
+    this.getList();
+  },
+  mounted() {
+    this.getNowTime();
+  },
+  methods: {
+     headerStyle({ row, column, rowIndex, columnIndex }) {
+        console.log(rowIndex)
+        if(rowIndex===1){
+          return 'right-align'
+        }
       },
-      registrardata: [
+    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: "1",
-          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: [
               {
-          value: "2",
-          label: "测试",
+                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>

src/views/workload/doctorstaionworkload.vue

@@ -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="请选择">
+  <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.value"
-                  :label="item.label"
-                  :value="item.value"
+                :key="item.id"
+                :label="item.surname"
+                :value="item.id"
               >
               </el-option>
             </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="登记日期" label-width="80px">
+          </div>
+          <div class="query">
+            <span>开始日期：</span>
             <el-date-picker
-                v-model="form.registrationdate"
-                type="daterange"
-                range-separator="--"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
+              type="date"
+              placeholder="选择开始日期"
+              size="small"
+              v-model="startDate"
+              value-format="yyyy-MM-dd"
+              editable
             >
             </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">
+          </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 prop="numberofpeople" label="人数" width="180">
                 </el-table-column>
-          <el-table-column prop="generalinspection" label="占总检总人数">
               </el-table-column>
             </el-table>
-        <div class="subtotalquantity">
-          <span>小计</span>
+          </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: [
+      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",
+        },
+        tooltip: {
+          trigger: "item",
+          confine: true,
+        },
+        legend: {
+          data:this.yAxisData,
+          orient: "horizontal",
+          right: "3%",
+          top: "3%",
+        },
+        grid: {
+          show: false,
+          left: "0%",
+          right: "5%",
+          top: "8%",
+          bottom: "2%",
+          containLabel: true,
+        },
+        series: [
            {
-          time: "203-8-9",
-          chiefexaminer: "测试",
-          numberofpeople: "85",
-          generalinspection: "13",
+            type: "pie",
+            label: {
+                show: true,
+                formatter: "{b} : {c}人 ({d}%)" // b代表名称，c代表对应值，d代表百分比
             },
+            data: this.pieData
+        }
         ],
-      form: {
-        username: "",
-        registrationdate: "",
+      };
+      this.$refs.chart2.setOption(option2);
     },
-      registrardata: [
-        {
-          value: "1",
-          label: "张三",
+    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: [
           {
-          value: "2",
-          label: "全部",
+            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>

src/views/workload/registrar.vue

@@ -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="请选择">
+  <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.value"
-                  :label="item.label"
-                  :value="item.value"
+                :key="item.id"
+                :label="item.surname"
+                :value="item.id"
               >
               </el-option>
             </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="登记日期">
+          </div>
+          <div class="query">
+            <span>开始日期：</span>
             <el-date-picker
-                v-model="form.registrationdate"
-                type="daterange"
-                range-separator="--"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
+              type="date"
+              placeholder="选择开始日期"
+              size="small"
+              v-model="startDate"
+              value-format="yyyy-MM-dd"
+              editable
             >
             </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"
+          </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 prop="numberofpeople" label="人数">
               </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: [
-        {
-          registrar: "张三",
-          totalofpeople: "33%",
-          numberofpeople: "10",
+      registrardata: [],
+      username: [],
+      startDate: "",
+      endDate: "",
+      tableData: [],
+      seriesData: [],
+      yAxisData: [],
+      flag: true,
+    };
   },
-      ],
-      form: {
-        username: "",
-        registrationdate: "",
+  created() {
+    this.getList();
+  },
+  mounted() {
+    this.getNowTime();
+  },
+  methods: {
+     headerStyle({ row, column, rowIndex, columnIndex }) {
+        console.log(rowIndex)
+        if(rowIndex===1){
+          return 'right-align'
+        }
       },
-      registrardata: [
+    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: "1",
-          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: [
               {
-          value: "2",
-          label: "测试",
+                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>

vue.config.js

@@ -1,7 +1,22 @@
 const { defineConfig } = require("@vue/cli-service");
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
 module.exports = defineConfig({
-  transpileDependencies: true,
+    transpileDependencies: ['axios', 'crypto-js', 'element-ui', 'exceljs', 'moment', 'sortablejs', 'vue', 'vue-contextmenujs', 'vue-json-excel', 'vue-meta', 'vue-print-nb', 'vue-router', 'vuex', 'xlsx', 'echarts'],
     lintOnSave: false,
+    configureWebpack: {
+        plugins: [
+            new NodePolyfillPlugin()
+        ],
+        resolve: {
+            fallback: {
+                fs: false,
+                crypto: false
+            }
+        },
+        externals: {
+            './cptable': 'var cptable',
+        },
+    },
     devServer: {
         port: "8080",
         proxy: {
@@ -14,7 +29,7 @@ module.exports = defineConfig({
                 // }
             },
         },
-  },
+    }
     // pages: {
     //   index: {
     //     entry: 'src/main.js',