peisweb/src/views/workload/feeforservice.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-cascader
              v-model="username"
              :options="registrardata"
              ref="example"
              popper-class="example"
              @change="ischangsItemTypeId"
              style="width: 100px"
              :props="{
                value: 'id',
                label: 'displayName',
                children: 'treeChildren',
                checkStrictly: true,
                expandTrigger: 'hover',
              }"
              size="small"
            >
            </el-cascader>
            <!-- <el-select
              v-model="username"
              placeholder="请选择"
              size="small"
              multiple
            >
              <el-option
                v-for="item in registrardata"
                :key="item.id"
                :label="item.surname"
                :value="item.id"
              >
              </el-option>
            </el-select> -->
          </div>
          <div class="query">
            <span>组合项目：</span>
            <el-input
              placeholder="请选择组合项目"
              v-model="patientRegister.query.asbitemOCX"
              style="width: 200px"
              size="small"
              disabled
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="report.dialogAsbitemOCX = true"
                style="font-size: 20px"
              ></el-button>
            </el-input>
          </div>
          <div class="query">
            <span>开始日期：</span>
            <el-date-picker
              type="date"
              placeholder="选择开始日期"
              size="small"
              v-model="startDate"
              value-format="yyyy-MM-dd"
              editable
              style="width:150px"
            >
            </el-date-picker>
          </div>
          <div class="query">
            <span>结束日期：</span>
            <el-date-picker
              type="date"
              placeholder="选择结束日期"
              size="small"
              v-model="endDate"
              value-format="yyyy-MM-dd"
              editable
              style="width:150px"
            >
            </el-date-picker>
          </div>
          <div class="query">
            <el-button size="small" @click="onSubmit" class="commonbutton"
              >查询</el-button
            >
          </div>
          <div class="query">
            <el-button size="small" @click="handleExport" class="commonbutton"
              >导出excel</el-button
            >
          </div>
          <div class="query">
            <el-button size="small" @click="onPrint" class="commonbutton"
              >打印</el-button
            >
          </div>
          <div class="query">
            <el-button size="small" @click="columnarChart" class="commonbutton"
              >柱状图</el-button
            >
          </div>
          <div class="query">
            <el-button size="small" @click="peiChart" class="commonbutton"
              >饼图</el-button
            >
          </div>
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            position: relative;
          "
          id="domTable"
        >
          <div
            style="
              width: 47.7%;
              background-color: #fff;
              padding: 15px;
              border-radius: 8px;
            "
            ref="imageDom"
          >
            <!-- <h3 align="center">登记员工作量统计</h3>
            - 53-18
            <h5 align="right" style="margin-bottom: 5px;">
              时间：<span>{{ startDate }}</span
              >至<span>{{ endDate }}</span>
            </h5> -->
            <el-table
              border
              show-summary
              :summary-method="summarizeRegisterCount"
              :span-method="objectStandardSpanMethod"
              :height="
                flag
                  ? window.pageHeight < 600
                    ? 415
                    : window.pageHeight - 185 - 20
                  : ''
              "
              :data="tableData"
              id="table"
              ref="table"
              style="width: 100%"
              :header-cell-class-name="headerStyle"
              :cell-style="tableRowClassName"
            >
              <el-table-column label="项目收费汇总">
                <el-table-column :label="'时间：' + startDate + '至' + endDate">
                  <el-table-column
                    :label="
                      '应收总金额：' +
                      sumChargeMoney +
                      '折扣金额：' +
                      sumDiscountMoney +
                      '实收总金额：' +
                      sumReceivedChargeMoney
                    "
                  >
                    <el-table-column
                      prop="itemTypeName"
                      label="科室"
                    ></el-table-column>
                    <el-table-column
                      prop="asbitemName"
                      label="组合项目"
                    ></el-table-column>
                    <el-table-column
                      prop="chargeMoney"
                      label="应收金额"
                    ></el-table-column>
                    <el-table-column prop="discountMoney" label="折扣金额">
                    </el-table-column>
                    <el-table-column prop="receivedChargeMoney" label="实收金额">
                    </el-table-column>
                  </el-table-column>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
          <div
            :style="
              'width: 47.7%;overflow: hidden;height:' +
              (window.pageHeight < 600 ? 415 : window.pageHeight - 185 - 20) +
              'px;background-color: #fff; padding: 15px; border-radius: 8px;'
            "
          >
            <div
              style="
                font-size: 20px;
                font-weight: 700;
                color: #232748;
                font-family: 'NotoSansSC-Bold';
                text-align: center;
              "
            >
              项目收费汇总
            </div>
            <div
              :style="
                'height:' +
                (window.pageHeight < 600 ? 387 : window.pageHeight - 185 - 48) +
                'px;'
              "
            >
              <ChartBlock ref="chart2"></ChartBlock>
            </div>
          </div>
        </div>
      </div>
    </div>
        <!--通用选组合项目的控件-->
    <el-dialog
      title="组合项目选择"
      :visible.sync="report.dialogAsbitemOCX"
      :close-on-click-modal="false"
      width="700px"
      height="600px"
    >
      <AsbitemOCX />
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import ChartBlock from "../../components/workload/chartsBlock";
import AsbitemOCX from "../../components/report/AsbitemOCX.vue";
import { exportToExcel } from "../../utlis/Export2Excel";
import html2canvas from "html2canvas";
import printJs from "print-js";
import { projectlist } from "@/request/commonapi";
import {
  tcdate,
} from "@/utlis/proFunc";
export default {
  components: {
    ChartBlock,
    AsbitemOCX
  },
  data() {
    return {
      registrardata: [],
      username: [],
      startDate: "",
      endDate: "",
      tableData: [],
      seriesData: [],
      yAxisData: [],
      flag: true,
      pieData: [],
      sumChargeMoney: "",
      sumDiscountMoney: "",
      sumReceivedChargeMoney: "",
    };
  },
  created() {
    this.getList();
    this.dictInit()
  },
  mounted() {
    this.getNowTime();
  },
  methods: {
    //数据初始化
    dictInit() {

      //   //体检类别
    //   getapi("/api/app/medical-type/in-filter").then((res) => {
    //     if (res.code == 1) {
    //       this.dict.medicalType = res.data.items;
    //     }
    //   });

      //   //体检类别 树结构
      getapi("/api/app/item-type/by-code-all").then((res) => {
        if (res.code == 1) {
          this.dict.itemTypeTree = res.data;
          tcdate(this.dict.itemTypeTree);
        }
      });
    },
    ischangsItemTypeId(v) {
        if (v.length > 1) {
        this.username = this.username.slice(-1)[0];
      } else {
        this.username = this.username[0];
      }
      this.$refs.example.toggleDropDownVisible();
    },
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 1) {
        return "left-align";
      }
      if (rowIndex === 2) {
        return "left-align";
      }
    },
    summarizeRegisterCount(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (index === 4) {
          sums[index] = this.sumReceivedChargeMoney+"元";
          return;
        }
      });

      return sums;
    },
    onPrint() {
      this.flag = false;
      this.$nextTick(() => {
        let width = this.$refs.imageDom.style.width;
        let cloneDom = this.$refs.imageDom.cloneNode(true);
        let imageDom = this.$refs.imageDom;
        cloneDom.style.position = "absolute";
        cloneDom.style.top = "0px";
        cloneDom.style.zIndex = "-1";
        cloneDom.style.width = width;
        imageDom.appendChild(cloneDom);
        html2canvas(cloneDom).then((canvas) => {
          // 转成图片，生成图片地址
          const url = canvas.toDataURL("image/png");
          printJs({
            printable: url,
            type: "image",
            documentTitle: "", // 标题
            style: "@page{size:auto;margin: 0cm 1cm 0cm 1cm;}", // 去除页眉页脚
          });
        });
        cloneDom.style.display = "none";
        this.flag = true;
      });
    },
    columnarChart() {
      let option2 = {
        // title: {
        //   text: "登记员工作量统计",
        //   left: "center",
        // },
        tooltip: {
          trigger: "axis",
          confine: true,
        },
        legend: {
          type: "scroll",
          orient: "horizontal", // 垂直
          right: "3%", // 左对齐
          top: "0%", // 位于顶部
        },
        grid: {
          show: false,
          left: "0%",
          right: "0%",
          top: "0%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              fontSize: "14",
            },
          },
          axisLine: {
            show: true,
          },
        },
        yAxis: {
          type: "category",
          data: this.yAxisData,
          axisLabel: {
            textStyle: {
              fontSize: "14",
            },
          },
        },
        series: [
          {
            name: "实收金额",
            type: "bar",
            data: this.seriesData,
          },
        ],
      };
      this.$refs.chart2.setOption(option2);
    },
    peiChart() {
      let option2 = {
        // title: {
        //   text: "登记员工作量统计",
        //   left: "center",
        // },
        tooltip: {
          trigger: "item",
          confine: true,
        },
        legend: {
          data: this.yAxisData,
          orient: "horizontal",
          right: "3%",
          top: "0%",
        },
        grid: {
          show: false,
          left: "0%",
          right: "0%",
          top: "0%",
          bottom: "0%",
          containLabel: true,
        },
        series: [
          {
            type: "pie",
            label: {
              show: true,
              formatter: "{b} : {c} ({d}%)", // b代表名称，c代表对应值，d代表百分比
            },
            data: this.pieData,
          },
        ],
      };
      this.$refs.chart2.setOption(option2);
    },
    onSubmit() {
      let that = this;
      if (this.username == "" || this.username == []) {
        return this.$message({
          message: "请先选择科室",
          type: "error",
        });
      }
      if (this.startDate == "") {
        return this.$message({
          message: "请先选择开始日期",
          type: "error",
        });
      }
      if (this.endDate == "") {
        return this.$message({
          message: "请先选择结束日期",
          type: "error",
        });
      }
      let asbitemIds = [];
      if (this.report.dataAsbitemOCX.length > 0) {
        this.report.dataAsbitemOCX.forEach((e) => {
          asbitemIds.push(e.id);
        });
      }
      postapi(
        "/api/app/charge-report/get-project-fees-report",
        {
          itemTypeId: that.username,
          asbitems:asbitemIds,
          startDate: that.startDate,
          endDate: that.endDate,
        }
      ).then((res) => {
        if (res.code != -1) {
        //   that.tableData = [...res.data.details];
          that.sumChargeMoney = res.data.sumChargeMoney;
          that.sumDiscountMoney = res.data.sumDiscountMoney;
          that.sumReceivedChargeMoney = res.data.sumReceivedChargeMoney;
          this.yAxisData = [];
          this.seriesData = [];
          this.pieData = [];
          that.computedStandardTableData(res.data.details)
          let pies = {
            name: "",
            value: 0,
          };
          for (let i = 0; i < res.data.details.length; i++) {
            let pie = JSON.parse(JSON.stringify(pies));
            this.yAxisData.push('('+res.data.details[i].itemTypeName+')'+res.data.details[i].asbitemName);
            this.seriesData.push(res.data.details[i].receivedChargeMoney);
            pie.name = '('+res.data.details[i].itemTypeName+')'+res.data.details[i].asbitemName
            pie.value = res.data.details[i].receivedChargeMoney;
            this.pieData.push(pie);
          }
          this.columnarChart();
        }
      });
    },
    computedStandardTableData(tableData) {
      const newData = [...tableData]; // 创建一个新的数组，避免修改原始数据
      const totalRows = {
        itemTypeName: "",
        asbitemName: "合计",
        chargeMoney: 0,
        discountMoney: 0,
        receivedChargeMoney: 0,
      }; // 合计行的数据
    //   let pies = {
    //     name: "",
    //     value: 0,
    //   };
      let obj = {};
      for (let i = 0; i < tableData.length; i++) {
        var item = tableData[i].itemTypeName;
        obj[item] = obj[item] + 1 || 1;
      }

      Object.keys(obj).forEach((key) => {
        let totalRow = JSON.parse(JSON.stringify(totalRows));
        // let pie = JSON.parse(JSON.stringify(pies));
        tableData.forEach((item) => {
          if (item.itemTypeName == key) {
            totalRow.itemTypeName = item.itemTypeName;
            totalRow.chargeMoney =(Number(totalRow.chargeMoney)+Number(item.chargeMoney)).toFixed(2)
            totalRow.discountMoney =(Number(totalRow.discountMoney)+Number(item.discountMoney)).toFixed(2)
            totalRow.receivedChargeMoney =(Number(totalRow.receivedChargeMoney)+Number(item.receivedChargeMoney)).toFixed(2)
          }
            // pie.name = '('+item.itemTypeName+')'+item.asbitemName;
            // pie.value = item.receivedChargeMoney;
            // this.yAxisData.push('('+item.itemTypeName+')'+item.asbitemName);
            // this.seriesData.push(item.receivedChargeMoney);
        });
        newData.push(totalRow);
        // this.pieData.push(pie);
      });
      this.ForwardStandardRanking(newData, "itemTypeName");
      this.columnarChart();
    },
    ForwardStandardRanking(data, p) {
      for (var i = 0; i < data.length - 1; i++) {
        for (var j = 0; j < data.length - 1 - i; j++) {
          var dd = data[j][p].localeCompare(data[j + 1][p], "zh"); //1---前者往后移，-1===位置不变
          if (dd > 0) {
            var temp = data[j];
            data[j] = data[j + 1];
            data[j + 1] = temp;
          }
        }
      }
      this.tableData = data;
      this.setStandardDates(this.tableData);
    },
    setStandardDates(arr) {
      var obj = {},
        k,
        arr1 = [];
      this.arr1 = [];
      for (var i = 0, len = arr.length; i < len; i++) {
        k = arr[i].itemTypeName; //需要合并的字段
        if (obj[k]) obj[k]++;
        else obj[k] = 1;
      }
      //保存结果{el-'元素'，count-出现次数}
      for (var o in obj) {
        for (let i = 0; i < obj[o]; i++) {
          if (i === 0) {
            this.arr1.push(obj[o]);
          } else {
            this.arr1.push(0);
          }
        }
      }
    },
    objectStandardSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let _row = this.arr1[rowIndex];
        let _col = this.arr1[rowIndex] > 0 ? 1 : 0;
        return [_row, _col];
      }
    },
     tableRowClassName({ row, column, rowIndex, columnIndex }) {
      if (row.asbitemName == "合计") {
        return { backgroundColor: "#F5F7FA" };
      }
    },
    getList() {
      projectlist().then((res) => {
        if (res.code != -1) {
          this.registrardata = [...res.data];
          this.registrardata = this.formatData(this.registrardata);
        }
      });
    },
    formatData(dataList) {
      for (let i = 0; i < dataList.length; i++) {
        if (dataList[i].treeChildren.length < 1) {
          dataList[i].treeChildren = undefined;
        } else {
          this.formatData(dataList[i].treeChildren);
        }
      }
      return dataList;
    },
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); // 得到年份
      var month = now.getMonth(); // 得到月份
      var date = now.getDate(); // 得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      this.startDate = defaultDate;
      this.endDate = defaultDate;
    },
    handleExport() {
      exportToExcel("#table", "项目收费汇总", false);
    },
  },
  computed: {
    ...mapState(["window", "dict", "patientRegister", "report"]),
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout();
    });
  },
};
</script>
<style scoped>
@import "../../assets/css/global_button.css";
@import "../../assets/css/global_dialog.css";
@import "../../assets/css/global_table.css";
@import "../../assets/css/global_form.css";
@import "../../assets/css/global_input.css";
@import "../../assets/css/global.css";
.query {
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #232748;
  font-size: 400;
  font-family: "NotoSansSC-Regular";
}
.box {
  display: flex;
  flex-direction: column;
}
:deep .left-align .cell {
  text-align: left !important;
}
.query:last-child{
  margin-right: 0;
}
</style>