peisweb/src/views/fee-settings/diseaseStatistics.vue

<template>
  <div class="box" :style="CustomerOrgRightStyle">
    <el-card class="cards">
      <el-row>
        <el-form ref="form" :model="form" label-width="120px">
          <el-col :span="4">
            <el-form-item label="单位">
              <el-select
                v-model="form.unit"
                placeholder="请选择"
                @focus="unitchang"
              >
                <el-option
                  v-for="item in customerorgdatas"
                  :key="item.id"
                  :label="item.displayName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="诊断" style="margin-left:-50px">
              <el-select v-model="form.diagnosis" placeholder="请选择">
                <el-option
                  v-for="item in diagnosisdata"
                  :key="item.id"
                  :label="item.displayName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="疾病来源" style="margin-left:-50px">
              <el-select v-model="form.diagnosis" placeholder="请选择">
                <el-option
                  v-for="item in diagnosisdata"
                  :key="item.id"
                  :label="item.displayName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" style="margin-left: 10px">查询</el-button>
          </el-col>
        </el-form>
      </el-row>
      <!-- tab区域 -->
      <h3 class="tabtitle">疾病人数统计</h3>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="disease" label="疾病" width="180">
        </el-table-column>
        <el-table-column prop="numberofpeople" label="人数" width="180">
        </el-table-column>
        <el-table-column prop="shareintotal" label="占总检人数百分比">
        </el-table-column>
      </el-table>
      <!--  -->
      <!-- 单位显示隐藏 -->
      <div class="showbox">
        <el-popover
          placement="bottom"
          width="600"
          trigger="manual"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
          v-model="visible"
        >
          <div>
            <span>单位查找</span>
            <el-select
              v-model="form.unit"
              placeholder="请选择"
              style="margin-left: 10px"
            >
              <el-option
                v-for="item in customerorgdata"
                :key="item.id"
                :label="item.displayName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 标题 -->
          <div class="biaoti">
            双击单位下的体检次数或部门可增加查询条件双击列表中的行可删除查询条件
          </div>
          <div class="boxflex">
            <div class="leftbox">
              <el-tree :data="customerorgdata" :props="defaultProps"></el-tree>
            </div>
            <div class="rigtbox">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="numberofpeople" label="单位">
                </el-table-column>
                <el-table-column prop="numberofpeople" label="次数">
                </el-table-column>
                <el-table-column prop="shareintotal" label="日期">
                </el-table-column>
              </el-table>
              <div style="margin-top: 10px">登记日期方式</div>
              <el-radio-group v-model="radio">
                <el-radio :label="3">登记日期</el-radio>
                <el-radio :label="6">体检日期</el-radio>
                <el-radio :label="9">总检日期</el-radio>
              </el-radio-group>
              <div style="margin-top: 10px">单位选择方式</div>
              <el-radio-group v-model="radio">
                <el-radio :label="3">选择单位</el-radio>
                <el-radio :label="6">不选单位</el-radio>
              </el-radio-group>
              <!--  -->
              <div>
                <el-button style="margin-left: 100%" @click="close"
                  >关闭</el-button
                >
              </div>
            </div>
          </div>
        </el-popover>
      </div>

      <!--  -->
    </el-card>
  </div>
</template>
<script>
import { getapi, postapi } from "@/api/api";
import { mapState } from "vuex";
export default {
  data() {
    return {
      radio: "",
      defaultProps: {
        label: "displayName",
        children: "treeChildren",
      },
      visible: false,
      form: {
        unit: "",
        diagnosis: "",
      },
      CustomerOrgTreeStyle: "",
      CustomerOrgRightStyle: "",
      customerorgdatas: [],
      tableData: [
        {
          disease: "是,否",
          numberofpeople: "20",
          shareintotal: "30",
        },
      ],
      customerorgdata: [],
      diagnosisdata: [],
    };
  },
  computed: {
    ...mapState(["window", "dict", "patientRegister", "customerOrg"]),
  },
  created() {
    // this.resize();
  },
  mounted() {
    this.obtainingunits();
    this.getdiagnosis();
  },
  methods: {
    resize() {
      //console.log(this.window.pageHeight,this.window.pageWidth)
      let headerHeight = Number(150);

      this.CustomerOrgTreeStyle =
        "overflow: scroll;border: 1px solid;width:200px; height:" +
        (this.window.pageHeight - headerHeight) +
        "px;";
      this.CustomerOrgRightStyle =
        "margin-left: 10px;width:" +
        (this.window.pageWidth - 200 - 60) +
        "px; height:" +
        (this.window.pageHeight - headerHeight) +
        "px;";

      if (this.window.pageHeight < 600) {
        this.CustomerOrgTreeStyle =
          "overflow: scroll;border: 1px solid;width:200px; height:" +
          (600 - headerHeight) +
          "px;";
      }
    },
    close() {
      this.visible = false;
    },
    // /api/app/customer-org/by-code-all
    unitchang() {
      console.log("1");
      this.visible = true;
      console.log(this.visible);
      getapi("/api/app/customer-org/by-code-all").then((res) => {
        this.customerorgdata = res.data;
      });
    },
    //获取单位
    obtainingunits() {
      getapi("/api/app/customer-org/by-code-all").then((res) => {
        this.customerorgdata = res.data;
      });
    },
    //获取诊断
    getdiagnosis() {
      postapi("/api/app/diagnosis/getlistinfilter").then((res) => {
        this.diagnosisdata = res.data.items;
        console.log(res);
      });
    },
  },
};
</script>
<style  scoped>
.rigtbox {
  margin-left: 10px;
}
.leftbox {
  width: 30%;
  border: 1px solid #ccc;
}
.boxflex {
  display: flex;
}
.biaoti {
  margin-top: 10px;
}
/* .el-select-dropdown__empty::v-deep {
  display: none;
} */
.el-popover .el-popper .el-popover--plain {
  width: 600px;
}
.showbox {
  width: 600px;
  height: 300px;
  /* border: 1px solid #ccc; */
  position: absolute;
  left: 8.5%;
  top: 140px;
}
.cards {
  height: 800px;
}
.tabtitle {
  text-align: center;
  margin-top: 20px;
}
</style>