vue 分钟颗粒度的在线状态显示组件

vue 分钟颗粒度的在线状态显示组件

<template>
  <div class="relative flex min-w-0 items-center justify-center">
    <canvas
      ref="canvas"
      :style="{ display: 'block', cursor: 'pointer', maxWidth: '100%', height: 'auto' }"
      @mousemove="handleMouseMove"
      @mouseleave="handleMouseLeave"
    />
    <div
      v-show="tooltip.visible"
      class="absolute rounded bg-black px-2 py-1 text-xs text-white pointer-events-none whitespace-nowrap z-50"
      :style="{ left: `${tooltip.x}px`, top: `${tooltip.y}px` }"
    >
      <div>状态：{{ tooltip.status }}</div>
      <div>时间：{{ tooltip.time }}</div>
    </div>
  </div>
</template>