acupuncture/acupuncture-前台/src/views/indexCom/patient.vue

<template>
  <div>
    <div class="app-container">
      <div class="dis" style="width: 100%">
        <div style="flex: 1; margin-right: 20px">
          <el-card shadow="always">
            <div class="dis title-box">
              <span class="header-title">患者总数</span>
              <div class="dis"></div>
            </div>
            <!-- 患者总数统计图 -->
            <div
              style="
                height: 300px;
                display: flex;
                align-items: center;
                justify-content: center;
              "
              v-loading="loading"
            >
              <div class="div-hz">
                <div class="div-hz-icon">
                  <img src="./image.png" alt="" width="60px" height="60px" />
                </div>
                <div class="div-hz-num">
                  <div class="">
                    {{ HZXXvalue[0].value || 0 }}<span>人</span>
                  </div>
                  <div class="hz-num-title">患者总数</div>
                </div>
              </div>

              <!-- <div id="patienty" style="width: 100%"></div> -->
            </div>
          </el-card>
        </div>
        <div style="flex: 1; margin-right: 20px">
          <el-card shadow="always">
            <div class="dis title-box">
              <span class="header-title">性别数量</span>
              <div class="dis">
                <div class="dian-box dis">
                  <div class="dian-box dis">
                    <span class="dian" style="background: #406e49"></span>
                    男
                  </div>
                  <span class="dian" style="background: #dad0a7"></span>
                  女
                </div>
              </div>
            </div>
            <!-- 性别统计图 -->
            <div style="height: 300px" v-loading="loading">
              <div id="gender" style="width: 100%"></div>
            </div>
          </el-card>
        </div>
        <div style="flex: 1; margin-right: 20px">
          <el-card shadow="always">
            <div class="dis title-box">
              <span class="header-title">年龄分布</span>
              <div class="dis"></div>
            </div>
            <!-- 患者总数统计图 -->
            <div style="height: 300px" v-loading="loading">
              <div id="age" style="width: 100%"></div>
            </div>
          </el-card>
        </div>
        <div style="flex: 1">
          <el-card shadow="always">
            <div class="dis title-box">
              <span class="header-title">既往病种分布</span>
              <div class="dis">
                <!-- <div class="dian-box dis">
									<div class="dian-box dis">
										<span class="dian" style="background: #4f8bff"></span>
										男
									</div>
									<span class="dian" style="background: #ffcd6c"></span>
									女
								</div> -->
              </div>
            </div>
            <!-- 既往病种分布 -->
            <div style="height: 300px" v-loading="loading">
              <div id="disease" style="width: 100%"></div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import { patientTotal, queryByDatePatient } from "@/api/indexCom.js";
import { HZXX, HZXXSJFX, gende, ageEcharts, diseaseEcharts } from "./index";
export default {
  name: "Post",
  props: ["title"],
  mixins: [resize],
  data() {
    return {
      loading: false,
      HZXXvalue: null, // 患者总数统计值
      gendeValue: null, // 性别统计值
      ageValue: null, // 年龄统计值
      diseaseValue: null, // 年龄统计值
      queryParams: {
        param: {
          startTime: "",
          endTime: "",
        },
      },
      jwbzObj: {
        gzxz: "高脂血症", //高脂血症
        gzjb: "肝脏疾病", //肝脏疾病
        ydsdk: "胰岛素抵抗", // 胰岛素抵抗
        gns: "高尿酸", // 高尿酸
        dnlczhz: "多囊卵巢综合症", // 多囊卵巢综合症

        // -----
        gxy: "高血压", //高血压
        nxgb: "脑血管病", //脑血管病
        exzl: "恶性肿瘤", //恶性肿瘤
        gxb: "冠心病", //冠心病
        jsjb: "精神疾病", //精神疾病
        whsezcky: "胃和十二指肠溃疡", //胃和十二指肠溃疡
        fpz: "肥胖症", //肥胖症
        gzssz: "骨质疏松症", //骨质疏松症
        ycxXtxjb: "遗传性、先天性疾病", //遗传性、先天性疾病
        tnb: "糖尿病", //糖尿病
        mxfxjb: "慢性肺系疾病", //慢性肺系疾病

        gmxjb: "过敏性疾病", //过敏性疾病
        gjy: "关节炎", //关节炎
        tf: "痛风", //痛风
        sySb: "肾炎、肾病", //肾炎、肾病
        other: "其他", //其他
      },
    };
  },
  created() {
    // this.Linepatient()
    this.getData();
  },
  methods: {
    statistics(_data, _type) {
      this.initial(_data, _type); // 处理数据
      this.loading = true;
      this.getData(); // 获取数据
    },
    //患者信息
    async getData() {
      try {
        await patientTotal(this.queryParams).then((res) => {
          // 患者总数统计图
          this.HZXXvalue = [
            {
              value: res.data.totalPatients,
              name: "患者总数",
            },
          ];
          // 性别分析图
          this.gendeValue = [
            {
              value: res.data.gender.male,
              name: "男",
            },
            {
              value: res.data.gender.female,
              name: "女",
            },
          ];
          // 年龄分布
          let ageValue = res.data.age || {};
          this.ageValue = [
            ageValue.num1 || 0,
            ageValue.num2 || 0,
            ageValue.num3 || 0,
            ageValue.num4 || 0,
            ageValue.num5 || 0,
            ageValue.num6 || 0,
          ];
          // 病种分布
          let diseaseValue = res.data.jwbz || {};
          this.diseaseValue = [];
          for (let key in diseaseValue) {
            let data = {
              name: this.jwbzObj[key],
              value: diseaseValue[key] || 0,
            };
            this.diseaseValue.push(data);
          }
          // this.Linepatient(); // 患者总数
          this.handleAge(); // 年龄
          this.columnar(); //性别分析图
          this.handleDisease(); //病种分布
        });
        this.loading = false;
      } catch (e) {
        console.log("患者统计", e);
      }
    },

    // 患者信息
    Linepatient() {
      HZXX.title.text = this.HZXXvalue[0].value;
      HZXX.series[0].data = this.HZXXvalue;
      this.$nextTick(() => {
        var myChart = echarts.init(document.getElementById("patienty"), null, {
          height: 300,
        });
        myChart.setOption(HZXX, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    // 性别分析图
    columnar() {
      gende.series[0].data = this.gendeValue;
      this.$nextTick(() => {
        var myChart = echarts.init(document.getElementById("gender"), null, {
          height: 300,
        });
        myChart.setOption(gende, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    // 年龄分布图
    handleAge() {
      ageEcharts.series[0].data = this.ageValue;
      this.$nextTick(() => {
        var myChart = echarts.init(document.getElementById("age"), null, {
          height: 300,
        });
        myChart.setOption(ageEcharts, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    // 病种分布图
    handleDisease() {
      diseaseEcharts.series[0].data = this.diseaseValue?.map((item) => {
        return item.value;
      });
      diseaseEcharts.xAxis.data = this.diseaseValue?.map((item) => {
        return item.name;
      });
      this.$nextTick(() => {
        var myChart = echarts.init(document.getElementById("disease"), null, {
          height: 300,
        });
        myChart.setOption(diseaseEcharts, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    // 数据处理 查询类型判断参数
    initial(_data, _type) {
      _data[0] = this.$moment(_data[0]).format("YYYY-MM-DD");
      _data[1] = this.$moment(_data[1]).format("YYYY-MM-DD");
      this.queryParams.param = {
        startTime: _data[0] + " " + "00:00:00",
        endTime: _data[1] + " " + "23:59:59",
      };
    },
    // 重新渲染图标
    getRenew() {
      this.Linepatient(); // 患者总数
      this.handleAge(); // 年龄
      this.columnar(); //性别分析图
      this.handleDisease(); //病种分布
    },
  },
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
.div-hz {
  background: #dad0a7;
  width: 80%;
  height: 70%;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 24px;
}
.div-hz-icon {
  flex: 1;
}
.div-hz-num {
  flex: 1;
  font-size: 50px;
  color: #ffffff;
  text-align: right;
}
.div-hz-num span {
  font-size: 24px;
  color: #ffffff;
}
.hz-num-title {
  font-size: 22px;
  color: #ffffff;
}
>>> .el-card__body {
  padding: 10px 0 !important;
}

.dis {
  display: flex;
}

.header-title {
  font-size: 18px;
}

.title-box {
  padding: 10px 20px;
  border-bottom: 1px solid #dfe6ec;
}

.dian-box {
  align-items: center;
}

.dian {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: 0 10px;
}

.title-box {
  justify-content: space-between;
}

. >>> .el-radio--small.is-bordered {
  margin-right: 20px !important;
  margin-left: 0 !important;
}

>>> .el-radio__input {
  display: none;
}

>>> .el-radio__label {
  padding-left: 5px;
}

.app-container {
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
}

.title-bor {
  display: inline-block;
  height: 20px;
  width: 6px;
  background: #406e49;
  margin-right: 10px;
  border-radius: 8px;
}
</style>