web_dist/src/views/reports/JiMuBaoBiao.vue

<template>
  <el-container style="margin-top: 10px">
    <el-header>
      <el-date-picker
        type="daterange"
        size="mini"
        v-model="zhuYuanShiJianChaoTime"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :shortcuts="shortcuts"
      ></el-date-picker>
      <el-button size="mini" type="primary" style="margin-left: 10px" @click="query">查询</el-button>
    </el-header>
    <el-container>
      <el-main>
        <el-row>
          <el-col :span="12">
            <div style="width: 100%; height: 300px" id="huanZheChao30"></div>
          </el-col>
          <el-col :span="12">
            <div style="width: 100%; height: 300px" id="pingJunZhuYuan"></div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { onMounted, ref } from 'vue'
import { zhuYuanShiJianChao } from '@/api/querydata/jimubaobiao'
import { getDateRangeFormatDate } from '@/utils/date'
import { pieUtils } from '@/utils/echarts-utils'
import { shortcuts } from '@/data/shortcuts'
export default {
  setup() {
    // 引入

    // 住院时间超过
    const zhuYuanShiJianChaoTime = ref([])

    zhuYuanShiJianChaoTime.value[0] = '2020-01-01'
    zhuYuanShiJianChaoTime.value[1] = '2021-11-01'

    const query = () => {
      let daterange = getDateRangeFormatDate(zhuYuanShiJianChaoTime.value)
      let startTime = daterange.stratTime
      let endTime = daterange.endTime
      zhuYuanShiJianChao(startTime, endTime).then((res) => {
        pieUtils(huanZheChao30, '住院时间超30日患者例数', res.huanZheChao30)
        pieUtils(pingJunZhuYuan, '住院患者平均住院日', res.pingJunZhuYuan)
      })
    }

    onMounted(() => {
      setTimeout(() => {
        query()
      }, 100)
    })

    return {
      zhuYuanShiJianChaoTime,
      query,
      shortcuts,
    }
  },
}
</script>

<style></style>