peisweb/src/views/customerReport/diseaseStatistics.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 class="spanClass">体检单位</span>
            <el-input
              placeholder="请选择体检单位"
              v-model="patientRegister.query.cusOrgOCX"
              style="width: 240px"
              size="small"
              disabled
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="diagnosis.dialogCusOrgOCX = true"
                style="font-size: 20px"
              ></el-button>
            </el-input>
          </div>
          <div class="query">
            <span class="spanClass">诊断</span>
            <el-input
              placeholder="请选择诊断"
              v-model="patientRegister.query.StatisticsOCX"
              style="width: 200px"
              size="small"
              disabled
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="diagnosis.dialogAsbitemOCX = true"
                style="font-size: 20px"
              ></el-button>
            </el-input>
          </div>
          <div class="query">
            <span class="spanClass">状态</span>
            <el-select
              v-model="patientRegister.query.completeFlags"
              placeholder="请选择"
              clearable
              style="width: 150px"
              size="small"
              multiple
              collapse-tags
            >
              <el-option
                v-for="item in dict.completeFlag"
                :key="item.id"
                :label="item.displayName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <!-- <div class="query">
            <span>疾病来源：</span>
            <el-select v-model="patientRegister.query.isCharge" placeholder="请选择" clearable style="width: 80px"
              size="small">
              <el-option label="综述" value="0" />
              <el-option label="建议" value="1" />
              <el-option label="疾病列表" value="2" />
            </el-select>
          </div>
          <div class="query">
            <el-checkbox v-model="classification" true-label="Y" false-label="N"/>
            <span>分类统计</span>
          </div> -->
          <div class="query">
            <el-button @click="btnQuery" size="small" class="commonbutton"
              >查询</el-button
            >
          </div>
          <div class="query">
            <el-button @click="handleExport" size="small" class="commonbutton"
              >导出excel</el-button
            >
          </div>
          <div class="query">
            <el-button @click="onPrint" size="small" class="commonbutton"
              >打印</el-button
            >
          </div>
          <div class="query">
            <el-button @click="columnarChart" size="small" class="commonbutton"
              >柱状图</el-button
            >
          </div>
          <div class="query">
            <el-button @click="peiChart" size="small" 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"
          >
            <el-table
              :data="dataList"
              border
              width="45%"
              :height="
                flag
                  ? window.pageHeight < 600
                    ? 415
                    : window.pageHeight - 185 - 20
                  : ''
              "
              row-key="id"
              highlight-current-row
              ref="dataList"
              id="table"
              :row-class-name="tableRowClassName"
              show-summary
              :summary-method="getSummaries"
            >
              <el-table-column
                :label="`开始时间： ${summary.startDate || ''} 结束时间：${
                  summary.endDate || ''
                } 男性： ${summary.maleCount} 女性： ${summary.femaleCount}`"
                align="left"
              >
                <el-table-column prop="diagnosisName" label="疾病" />
                <el-table-column prop="patientCount" label="人数" />
                <el-table-column prop="percentage" label="人员占比">
                  <template slot-scope="scope">
                    {{ scope.row.percentage + "%" }}
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
          <div
            :style="
              'width: 47.7%;overflow: hidden;height:' +
              (window.pageHeight < 600 ? 415 : window.pageHeight - 185 - 20) +
              'px;background-color: #fff; padding: 15px; border-radius: 8px;'
            "
          >
            <div
              style="
                font-size: 20px;
                font-weight: 700;
                color: #232748;
                font-family: 'NotoSansSC-Bold';
                text-align: center;
              "
            >
              疾病人数统计
            </div>
            <div
              :style="
                'height:' +
                (window.pageHeight < 600 ? 387 : window.pageHeight - 185 - 48) +
                'px;'
              "
            >
              <ChartBlock ref="chart2"></ChartBlock>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--通用选单位、体检次数、分组的控件-->
    <el-dialog
      title="体检单位选择"
      :visible.sync="diagnosis.dialogCusOrgOCX"
      :close-on-click-modal="false"
      width="880px"
      height="600px"
    >
      <CusOrgOCX :initDateType="'creationTime'" :useCustomerOrg="true" />
    </el-dialog>
    <!--通用选组合项目的控件-->
    <el-dialog
      title="诊断选择"
      :visible.sync="diagnosis.dialogAsbitemOCX"
      :close-on-click-modal="false"
      width="700px"
      height="600px"
    >
      <StatisticsOCX />
    </el-dialog>
  </div>
</template>
<script>
import moment from "moment";
import { mapState, mapActions } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { exportToExcel } from "../../utlis/Export2Excel";
import html2canvas from "html2canvas";
import printJs from "print-js";
import {
  dddw,
  objCopy,
  arrayReduce,
  arrayExistObj,
  tcdate,
} from "@/utlis/proFunc";
import CusOrgOCX from "../../components/report/CusOrgOCX.vue";
import StatisticsOCX from "../../components/report/StatisticsOCX.vue";
import ChartBlock from "../../components/workload/chartsBlock";

export default {
  components: {
    CusOrgOCX,
    StatisticsOCX,
    ChartBlock,
  },
  data() {
    return {
      dataList: [], //列表数据
      // classification:'Y'
      seriesData: [],
      yAxisData: [],
      pieData: [],
      flag: true,
      summary: {
        startDate: "",
        endDate: "",
        femaleCount: "",
        maleCount: "",
      },
    };
  },

  created() {
    this.dictInit();
  },

  //挂载完成
  mounted() {
    // this.btnQuery();
  },

  computed: {
    ...mapState(["window", "dict", "patientRegister", "diagnosis"]),
  },

  methods: {
    moment,
    dddw,
    //数据初始化
    dictInit() {
      //体检中心
      getapi("/api/app/organization-units/organization-unit-by-is-peis").then(
        (res) => {
          if (res.code == 1) {
            this.dict.organization = res.data;
          }
        }
      );

      //体检单位树
      getapi("/api/app/customerorg/getbycodeall").then((res) => {
        if (res.code == 1) {
          this.patientRegister.customerOrgTreeAll = res.data;
          tcdate(this.patientRegister.customerOrgTreeAll);
        }
      });

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

      //体检类别 树结构
      getapi("/api/app/item-type/by-code-all").then((res) => {
        if (res.code == 1) {
          this.dict.itemTypeTree = res.data;
          tcdate(this.dict.itemTypeTree);
        }
      });

      postapi("/api/app/Diagnosis/GetSimpleList").then((res) => {
        if (res.code == 1) {
          this.dict.asbItemAll = res.data;
        }
      });
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (index === 1) {
          let num = 0;
          data.forEach((item, index) => {
            num += item.patientCount;
          });
          sums[index] = num + " 人";
        }
      });

      return sums;
    },
    tableRowClassName({ row, rowIndex }) {
      switch (row.isCharge) {
        case "N":
          return "danger";
        default:
          return "";
      }
    },
    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: `@media print { @page {size: auto; margin: 0 0 0 0; } body{margin:0 5px}canvas{page-break-after: always;page-break-inside: avoid;
page-break-after: avoid;
page-break-before: avoid;}}`, // 去除页眉页脚
          });
        });
        cloneDom.style.display = "none";
        this.flag = true;
      });
    },
    handleExport() {
      exportToExcel("#table", "疾病人数统计", false);
    },
    //查询
    btnQuery() {
      let body = {},
        customerOrgs = [],
        diagnosisIds = [];
      if (this.diagnosis.dataCusOrgOCX.length > 0) {
        this.diagnosis.dataCusOrgOCX.forEach((e) => {
          let rd = {
            startDate: moment(e.startDate).format("yyyy-MM-DD"),
            endDate: moment(e.endDate).format("yyyy-MM-DD"),
            dateType:
              e.dateType == "summaryDate"
                ? "3"
                : e.dateType == "medicalStartDate"
                ? "2"
                : "1",
          };

          if (e.customerOrgId) {
            rd.customerOrgId = e.customerOrgId;
            if (e.customerOrgId == this.dict.personOrgId) {
              rd.customerOrgRegisterId = null;
              rd.customerOrgGroupId = [];
            } else {
              rd.customerOrgRegisterId = e.customerOrgRegister.id;
              rd.customerOrgGroupId = e.customerOrgGroupIds;
            }
          }
          customerOrgs.push(rd);
        });
      }

      if (this.diagnosis.dataAsbitemOCX.length > 0) {
        this.diagnosis.dataAsbitemOCX.forEach((e) => {
          diagnosisIds.push(e.id);
        });
      }

      body.customerOrgs = customerOrgs;
      body.diagnosisIds = diagnosisIds;
      if (
        this.patientRegister.query.completeFlags &&
        Array.isArray(this.patientRegister.query.completeFlags) &&
        this.patientRegister.query.completeFlags.length > 0
      ) {
        body.completeFlags = this.patientRegister.query.completeFlags;
      } else {
        delete body["completeFlags"];
      }

      // if (this.patientRegister.query.isCharge) body.isCharge = this.patientRegister.query.isCharge

      //console.log('/api/app/peisreport/getregisterasbitemchargestatus',body)

      postapi("/api/customerreport/getdiseasecountstatisticsreport", body).then(
        (res) => {
          if (res.code != -1) {
            this.dataList = res.data.details;
            this.summary.startDate = res.data.startDate;
            this.summary.endDate = res.data.endDate;
            this.summary.femaleCount = res.data.femaleCount;
            this.summary.maleCount = res.data.maleCount;
            this.yAxisData = [];
            this.seriesData = [];
            this.pieData = [];
            let pies = {
              name: "",
              value: 0,
            };
            for (
              let i = 0;
              i < (this.dataList.length > 10 ? 10 : this.dataList.length);
              i++
            ) {
              let pie = JSON.parse(JSON.stringify(pies));
              this.yAxisData.push(this.dataList[i].diagnosisName);
              this.seriesData.push(this.dataList[i].patientCount);
              pie.name = this.dataList[i].diagnosisName;
              pie.value = this.dataList[i].patientCount;
              this.pieData.push(pie);
            }
            this.columnarChart();
            this.$nextTick(() => {
              this.$refs.dataList.doLayout();
            });
          }
        }
      );
    },
    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);
    },
  },

  //监听事件
  watch: {
    //触发查询事件
    // "patientRegister.query.times"(newVal, oldVal) {
    //   if (newVal != oldVal) {
    //     //alert('触发查询事件')
    //     this.query();
    //   }
    // },
  },
};
</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;
}

::v-deep .el-input__inner {
  /*text-align: center;*/
  padding-left: 5px;
  padding-right: 15px;
}

::v-deep .el-input__icon {
  width: 15px;
  /* 输入框下拉箭头或清除图标 默认 25 */
}

::v-deep .el-input-group__append {
  padding: 0 5px;
  /* 控件默认 0 20px;*/
}

::v-deep .el-icon-search:before {
  color: #00f;
}

.query:last-child {
  margin-right: 0;
}
.spanClass {
  font-size: 14px;
  padding: 0 2px 0 0;
}
</style>