web/src/components/global/report-header/index.vue

<template>
  <div class="report-header flex items-center justify-between">
    <div class="title flex items-center">
      <span class="report-header-title" style="margin-right: 10px">{{
        props.title
      }}</span>
      <slot />
      <CustomDatePicker
        v-if="!props.hideTimePicker"
        style="margin-left: 10px"
        v-model="range"
        @timeChange="timeChange"
      ></CustomDatePicker
    ></div>
    <div class="right-box flex h-full items-center">
      <img class="time-icon" src="../../../assets//imgs/time.png" />
      <p>{{ timeText }} &nbsp; {{ getCurrentWeek() }}</p>
      <t-button
        v-if="appStore.isFullscreen"
        variant="outline"
        class="m-l-16px"
        @click="switchFullscreen"
      >
        <template #icon><SwapLeftIcon /></template>
        返回
      </t-button>
      <t-button
        v-else
        variant="outline"
        class="m-l-16px"
        @click="switchFullscreen"
      >
        <template #icon><Fullscreen2Icon /></template>
        全屏
      </t-button>
    </div>
  </div>
</template>
<script setup name="ReportHeader">
import { ref, computed, onBeforeUnmount, onMounted } from 'vue';
import { useIntervalFn } from '@vueuse/core';
import { dateFormat } from '@/utils/tool';
import { useVModel } from '@vueuse/core';
import CustomDatePicker from '../custom-date-picker';
import { Fullscreen2Icon, SwapLeftIcon } from 'tdesign-icons-vue-next';
import { useAppStore } from '@/store';
import useFullscreen from '@/hooks/useFullscreen';
const { switchFullscreen } = useFullscreen();

const emit = defineEmits(['update:dateRange', 'timeChange']);
const timeChange = (value) => {
  emit('timeChange', value);
};
const props = defineProps({
  title: String,
  dateRange: Array,
  hideTimePicker: Boolean,
});
const appStore = useAppStore();
const range = useVModel(props, 'dateRange', emit);
const currentTime = ref(Date.now());
const updateTime = () => {
  currentTime.value = new Date().getTime();
};
const timeText = computed(() => {
  return dateFormat(currentTime.value, `yyyy年MM月dd日 HH:mm:ss`);
});
const weeks = ref([
  '星期天',
  '星期一',
  '星期二',
  '星期三',
  '星期四',
  '星期五',
  '星期六',
]);
const getCurrentWeek = () => {
  return weeks.value[new Date().getDay()];
};
const { pause, resume, isActive } = useIntervalFn(
  () => {
    updateTime();
  },
  1000,
  { immediate: false }
);
onMounted(() => {
  resume();
});
onBeforeUnmount(() => {
  pause();
});
</script>
<style lang="less" scoped>
.report-header {
  height: 57px;
  padding: 0 16px;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
  .title {
    color: #262626;
    font-size: 16px;
    font-weight: bold;
  }
  .right-box {
    .time-icon {
      height: 20px;
      margin-right: 10px;
    }
    & > p {
      color: #595959;
      font-size: 14px;
    }
  }
}
</style>