acupuncture/acupuncture-后台/src/views/index.vue

<template>
  <div class="app-container home" v-resize="resize">
    <div></div>
    <div>
      <el-card shadow="always">
        <search
          @picker-change="pickerChage"
          title="患者信息统计"
          type="1"
        ></search>
      </el-card>
      <patient ref="patient"></patient>
    </div>
    <div>
      <el-card shadow="always">
        <search
          @picker-change="pickerChage"
          title="诊疗信息统计"
          type="2"
        ></search>
      </el-card>
      <JM ref="JM"></JM>
    </div>
    <div>
      <el-card shadow="always">
        <search
          @picker-change="pickerChage"
          title="治疗类型统计"
          type="3"
        ></search>
      </el-card>
      <XGZL ref="XGZL"></XGZL>
    </div>
    <div>
      <el-card shadow="always">
        <search @picker-change="pickerChage" title="随访统计" type="4"></search>
      </el-card>
      <follow ref="follow"></follow>
    </div>
  </div>
</template>

<script>
import { getCodeImg, firstAidTest } from "@/api/login";
import search from "@/views/indexCom/query";
import patient from "@/views/indexCom/patient";
import JM from "@/views/indexCom/JM";
import XGZL from "@/views/indexCom/XGZL";
import follow from "@/views/indexCom/follow";
export default {
  name: "Index",
  components: {
    search,
    patient,
    JM,
    XGZL,
    follow,
  },
  data() {
    return {};
  },
  async created() {
    // firstAidTest().then((res) => {
    //   console.log(res);
    // });
    const start = new Date();
    const end = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    await setTimeout(async () => {
      await this.$refs.patient.statistics([start, end], 4);
      await this.$refs.JM.statistics([start, end], 4);
      await this.$refs.XGZL.statistics([start, end], 4);
    });
  },
  methods: {
    resize() {
      console.log(111);
      this.$refs.patient.getRenew();
      this.$refs.JM.getRenew();
      this.$refs.XGZL.getRenew();
      this.$refs.follow.getRenew();
    },
    // 周 月 季 年
    radioChange(_data, _type, _timeType) {
      this.initial(_data, _type, _timeType);
    },
    // 时间
    pickerChage(_data, _type, _timeType) {
      this.initial(_data, _type, _timeType);
    },
    // 数据处理 查询类型判断参数
    initial(_data, _type, param) {
      if (_type == 1) {
        this.$refs.patient.statistics(_data, param);
      }
      if (_type == 2) {
        this.$refs.JM.statistics(_data, param);
      }
      if (_type == 3) {
        this.$refs.XGZL.statistics(_data, param);
      }
      if (_type == 4) {
        this.$refs.follow.statistics(_data, param);
      }
    },
  },
  directives: {
    // 使用局部注册指令的方式
    resize: {
      // 指令的名称
      bind(el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        let width = "",
          height = "";

        function isReize() {
          const style = document.defaultView.getComputedStyle(el);
          if (width !== style.width) {
            binding.value(); // 关键
          }
          width = style.width;
        }
        el.__vueSetInterval__ = setInterval(isReize, 200);
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__);
      },
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  background: #f3f5f9;
  min-height: 100vh;
}

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
<style scoped>
>>> .el-card {
  margin-bottom: 16px;
}

>>> .el-card__body {
  padding: 10px 20px;
}
</style>