peisweb/src/views/workload/directordoctor.vue

<template>
  <div class="box">
    <div>
      <div class="middlebox">
        <div class="contenttitle">
          工作量统计 /
          <span class="contenttitleBold"
            >总检医生工作量统计</span
          >
        </div>
      </div>
      <div :style="'display: block;'">
        <div style="background-color: #fff; padding: 15px; border-radius: 8px;display: flex;flex-wrap: wrap;    margin-bottom: 10px;height:35px;margin-top: 7px;">
          <div class="query">
            <span>医生：</span>
            <el-select
              v-model="username"
              placeholder="请选择"
              size="small"
              multiple
              filterable
              :multiple-limit=2
            >
              <el-option
                v-for="item in registrardata"
                :key="item.id"
                :label="item.surname"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="query">
            <span>开始日期：</span>
            <el-date-picker
              type="date"
              placeholder="选择开始日期"
              size="small"
              v-model="startDate"
              value-format="yyyy-MM-dd"
              editable
              style="width: 177px;"
            >
            </el-date-picker>
          </div>
          <div class="query">
            <span>结束日期：</span>
            <el-date-picker
              type="date"
              placeholder="选择结束日期"
              size="small"
              v-model="endDate"
              value-format="yyyy-MM-dd"
              editable
              style="width: 177px;"
            >
            </el-date-picker>
          </div>
          <div class="query">
            <el-button size="small" @click="onSubmit" class="commonbutton">查询</el-button>
          </div>
          <div class="query">
            <el-button size="small" @click="handleExport" class="commonbutton">导出excel</el-button>
          </div>
          <div class="query">
            <el-button size="small" @click="onPrint" class="commonbutton">打印</el-button>
          </div>
           <div class="query">
            <el-button size="small" @click="columnarChart" class="commonbutton">柱状图</el-button>
          </div>
          <div class="query">
            <el-button size="small" @click="peiChart" class="commonbutton">饼图</el-button>
          </div>
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            position: relative;
          "
          id="domTable"
        >
          <div style="width: 47.7%;background-color: #fff; padding: 15px; border-radius: 8px;" ref="imageDom">
            <!-- <h3 align="center">登记员工作量统计</h3>
            - 53-18
            <h5 align="right" style="margin-bottom: 5px;">
              时间：<span>{{ startDate }}</span
              >至<span>{{ endDate }}</span>
            </h5> -->
            <el-table
              border
              show-summary
              :summary-method="summarizeRegisterCount"
              :height="
                flag
                  ? window.pageHeight < 600
                    ? 415
                    : window.pageHeight - 185- 20
                  : ''
              "
              :data="tableData"
              id="table"
              ref="table"
              style="width: 100%"
              :header-cell-class-name="headerStyle"
            >
              <el-table-column label="总检医生工作量统计">
                <el-table-column :label="'时间：'+startDate+'至'+endDate">
                  <el-table-column prop="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: 47.7%;overflow: hidden;height:' +
              (window.pageHeight < 600 ? 415 : window.pageHeight - 185 - 20) +
              'px;background-color: #fff; padding: 15px; border-radius: 8px;'
            "
          >
          <div style="    font-size: 20px;
    font-weight: 700;
    color: #232748;
    font-family: 'NotoSansSC-Bold';
    text-align: center;">总检医生工作量统计</div>
    <div :style="
              'height:' +(window.pageHeight < 600 ? 387 : window.pageHeight - 185 - 48) +'px;'
            ">
                        <ChartBlock ref="chart2"></ChartBlock>
    </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import ChartBlock from "../../components/workload/chartsBlock";
import { exportToExcel } from "../../utlis/Export2Excel";
import html2canvas from "html2canvas";
import printJs from "print-js";
export default {
  components: {
    ChartBlock,
  },
  data() {
    return {
      registrardata: [],
      username: [],
      startDate: "",
      endDate: "",
      tableData: [],
      seriesData: [],
      yAxisData: [],
      flag: true,
      pieData: [],
      pages: {
        SkipCount: 0,
        MaxResultCount: 1000,
      },
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.getNowTime();
  },
  methods: {
    columnarChart() {
      let option2 = {
        // title: {
        //   text: "总检医生工作量统计",
        //   left: "center",
        // },
        tooltip: {
          trigger: "axis",
          confine: true,
        },
        legend: {
          type: "scroll",
          orient: "horizontal", // 垂直
          right: "3%", // 左对齐
          top: "0%", // 位于顶部
        },
        grid: {
          show: false,
          left: "0%",
          right: "0%",
          top: "0%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              fontSize: "14",
            },
          },
          axisLine: {
            show: true,
          },
        },
        yAxis: {
          type: "category",
          data: this.yAxisData,
          axisLabel: {
            textStyle: {
              fontSize: "14",
            },
          },
        },
        series: [
          {
            name: "人数",
            type: "bar",
            data: this.seriesData,
          },
        ],
      };
      this.$refs.chart2.setOption(option2);
    },
    peiChart() {
      let option2 = {
        // title: {
        //   text: "总检医生工作量统计",
        //   left: "center",
        // },
        tooltip: {
          trigger: "item",
          confine: true,
        },
        legend: {
          data: this.yAxisData,
          orient: "horizontal",
          right: "3%",
          top: "0%",
        },
        grid: {
          show: false,
          left: "0%",
          right: "0%",
          top: "0%",
          bottom: "0%",
          containLabel: true,
        },
        series: [
          {
            type: "pie",
            label: {
              show: true,
              formatter: "{b} : {c}人 ({d}%)", // b代表名称，c代表对应值，d代表百分比
            },
            data: this.pieData,
          },
        ],
      };
      this.$refs.chart2.setOption(option2);
    },
     headerStyle({ row, column, rowIndex, columnIndex }) {
        if(rowIndex===1){
          return 'left-align'
        }
      },
    summarizeRegisterCount(param){
         const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }

           const values = data.map(item => Number(item[column.property]));
          if (index===1) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] = '共'+sums[index]+'人';
          } else {
            sums[index] = '';
          }
        });

        return sums;
    },
    onPrint() {
      this.flag = false;
      this.$nextTick(() => {
        let width = this.$refs.imageDom.style.width;
        let cloneDom = this.$refs.imageDom.cloneNode(true);
        let imageDom = this.$refs.imageDom;
        cloneDom.style.position = "absolute";
        cloneDom.style.top = "0px";
        cloneDom.style.zIndex = "-1";
        cloneDom.style.width = width;
        imageDom.appendChild(cloneDom);
        html2canvas(cloneDom).then((canvas) => {
          // 转成图片，生成图片地址
          const url = canvas.toDataURL("image/png");
          printJs({
            printable: url,
            type: "image",
            documentTitle: "", // 标题
            style: "@page{size:auto;margin: 0cm 1cm 0cm 1cm;}", // 去除页眉页脚
          });
        });
        cloneDom.style.display = "none";
        this.flag = true;
      });
    },
    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",
        {
          userIds: that.username,
          startDate: that.startDate,
          endDate: that.endDate,
        }
      ).then((res) => {
        if (res.code != -1) {
          that.tableData = [...res.data];
          this.yAxisData = [];
          this.seriesData = [];
          this.pieData=[]
          let pies = {
            name: "",
            value: 0,
          };
          for (let i = 0; i < res.data.length; i++) {
            let pie = JSON.parse(JSON.stringify(pies));
            this.yAxisData.push(res.data[i].sumCheckDoctorName);
            this.seriesData.push(res.data[i].sumCheckCount);
            pie.name=res.data[i].sumCheckDoctorName
            pie.value=res.data[i].sumCheckCount
            this.pieData.push(pie)
          }
          this.columnarChart();
        }
      });
    },

    getList() {
      // getapi("/api/identity/users/getlist",this.pages).then((res) => {
      //   if (res.code != -1) {
      //     this.registrardata = [...res.data.items];
      //   }
      // });
      postapi('/api/identity/users/GetListByOperatorType', { operatorTypes: ["2", "3"] })
        .then(res => {
          if (res.code > -1) {
            this.registrardata = res.data
          }
        })
    },

    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); // 得到年份
      var month = now.getMonth(); // 得到月份
      var date = now.getDate(); // 得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      this.startDate = defaultDate;
      this.endDate = defaultDate;
    },
    handleExport() {
      exportToExcel("#table", "总检医生工作量统计",false);
    },
  },
  computed: {
    ...mapState(["window", "dict", "patientRegister", "report"]),
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout();
    });
  },
};
</script>
<style scoped>
@import "../../assets/css/global_button.css";
@import "../../assets/css/global_dialog.css";
@import "../../assets/css/global_table.css";
@import "../../assets/css/global_form.css";
@import "../../assets/css/global_input.css";
@import "../../assets/css/global.css";
.query{
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #232748;
    font-weight: 400;
    font-family: "NotoSansSC-Regular";
}
.box {
  display: flex;
  flex-direction: column;
}
:deep .left-align .cell {
  text-align: left !important;
}
.query:last-child{
  margin-right: 0;
}
:deep .el-input--suffix .el-input__inner{
  height: 32px !important;
}
:deep .el-select__tags{
  flex-wrap: nowrap;
}
</style>