rax-medical/src/views/home/time-bar-chart.vue

<template>
  <div class="chart-box">
    <div class="date-btn text-color">
      <div class="btn-box">
        <el-icon @click="setDate('up')">
          <ArrowLeft/>
        </el-icon>
        <el-date-picker v-model="currentMonth" format="第ww周" type="week" :editable="false" :clearable="false"
                        @change="getData"/>
        <el-icon @click="setDate('down')">
          <ArrowRight/>
        </el-icon>
      </div>
    </div>
    <div ref="chartDom" class="chart-dom"></div>
  </div>
</template>

<script lang='ts' setup>
import {onMounted, ref} from 'vue'
import * as echarts from 'echarts';
import {dateFormater, getCurrentDate, getDays, getFirstDayOfWeek, getWeekDates} from '@/utils/date-util';
import * as medicineApi from "@/api/medicine";

const chartDom = ref()

const currentMonth = ref(new Date())

onMounted(() => {
  getData(new Date())
})

// 大于当前时间返回 true
function calcTime(time: any) {
  return Boolean(new Date().getTime() < new Date(time).getTime())
}

function initChart(chartData: any) {
  const chart = echarts.init(chartDom.value as HTMLElement);
  chart.clear();
  const option = {
    color: ['#006080', '#f8b300'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: (params: any) => {
        let str = dateFormater('yyyy-MM-dd', params[0].axisValue) + '<b style="padding: 0 10px;">' + getCurrentDate(params[0].axisValue) + '</b>'
        params.forEach((item: any) => {
          str += '<br>'
          str += item.marker + item.seriesName + '：' + item.value + '小时'
        })
        return str
      }
    },
    legend: {
      right: 0,
      data: chartData.dataName
    },
    grid: {
      left: 20,
      right: 50,
      bottom: 5,
      top: 50,
      containLabel: true,
    },
    xAxis: {
      name: '日期',
      show: true,
      type: 'category',
      nameTextStyle: {color: '#909399'},
      axisLine: {show: true, lineStyle: {color: '#006080', width: 2}},
      axisTick: {show: false},
      axisLabel: {show: true, color: '#909399', formatter: (value: any) => getCurrentDate(value)},
      splitLine: {show: true, lineStyle: {color: 'rgba(212, 130, 1, .05)', width: 1, type: 'solid'}},
      data: chartData.xData,
    },
    yAxis: {
      name: '时间',
      show: true,
      type: 'value',
      min: 0,
      nameTextStyle: {color: '#909399', align: 'center', verticalAlign: 'top', padding: [0, 0]},
      axisLine: {show: true, lineStyle: {color: '#006080', width: 2}},
      axisTick: {show: false},
      axisLabel: {show: false},
      splitLine: {show: false, lineStyle: {color: '#D4E8F0', width: 1, type: 'solid'}},
    },
    series: [{
      name: chartData.dataName[0],
      type: 'bar',
      label: {
        show: true,
        rotate: -90,
        align: 'left',
        verticalAlign: 'center',
        position: 'insideTop',
        color: '#ffffff',
        textBorderColor: '#006080',
        textBorderWidth: 3,
        formatter: (params: any) => params.value.toFixed(0) + 'h' + Number((params.value % 1).toFixed(1)) * 60 + 'm'
      },
      data: chartData.data[0]
    },
      {
        name: chartData.dataName[1],
        type: 'bar',
        label: {
          show: true,
          rotate: -90,
          align: 'left',
          verticalAlign: 'center',
          position: 'insideTop',
          color: '#ffffff',
          textBorderColor: '#f8b300',
          textBorderWidth: 3,
          formatter: (params: any) => params.value.toFixed(0) + 'h' + Number((params.value % 1).toFixed(1)) * 60 + 'm'
        },
        data: chartData.data[1]
      }],
  };
  chart.setOption(option);
  chart.resize();
  window.addEventListener('resize', () => {
    chart.resize();
  });
}

const setDate = (type: string) => {
  getData(getDays(currentMonth.value, type === 'up' ? -7 : 7))
}
const getData = (date: any) => {
  currentMonth.value = new Date(date)
  const dataName = ['麻醉给药时长', '人工给药时长']
  const xData: any = []
  const data = [[], []] as any

  const weekDates = getWeekDates(currentMonth.value)
  const start = dateFormater("yyyy-MM-dd", weekDates.start)
  const end = dateFormater("yyyy-MM-dd", weekDates.end.setDate(weekDates.end.getDate() + 1))
  medicineApi.getSurgeryOtherDurationM(start, end).then(res => {
    if (res.code == 0) {
      res.data.forEach((item: any) => {
        xData.push(new Date(item.date))
        data[0].push(Number(item.aicount))
        data[1].push(Number(item.doccount))
      })
    }
    initChart({dataName, xData, data})
  })
  // medicineApi.getSurgeryOtherDuration(start, end).then(res => {
  //   if (res.code == 0) {
  //     res.data.forEach((item: any) => {
  //       xData.push(new Date(item._id))
  //       data[0].push(item.aicount)
  //       data[1].push(item.doccount)
  //     })
  //   }
  //   initChart({dataName, xData, data})
  // })
}
</script>

<style lang='scss' scoped>
.chart-box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .date-btn {
    position: absolute;
    width: 150px;
    height: 50px;
    top: 0;
    left: 20px;
    display: flex;
    z-index: 1;

    .btn-box {
      height: 30px;
      display: flex;
      align-items: center;
      color: $text2-color;

      & > :deep(.el-date-editor) {
        font-size: 14px;

        .el-input__wrapper {
          box-shadow: none;
          padding: 0;

          .el-input__prefix,
          .el-input__suffix {
            display: none;
          }

          .el-input__inner {
            cursor: pointer;
            width: 100px;
            color: $text2-color;
            text-align: center;
          }
        }
      }

      .el-icon {
        cursor: pointer;
      }
    }
  }

  .chart-dom {
    // width: calc(100% - 180px);
    width: 100%;
    height: 100%;
  }
}</style>