iot-ui-plus/src/views/dashboard/index.vue

<template>
  <div class="dashboardContainer">
    <section class="userInfo">
      <el-card shadow="always">
        <div class="flex justify-between items-center">
          <!-- <div class="userName flex items-center">
            <img :src="userStore.avatar" />
            <span>{{ userStore.nickname }}</span>
          </div> -->
          <div class="userName flex items-center">
            <img :src="userStore.avatar === null || userStore.avatar === '' ? avatar : userStore.avatar" />
            <div class="info flex column">
              <div class="name">{{ userStore.nickname }}</div>
              <div class="time">{{ currentTime }}</div>
              <div class="time">
                {{ lunarDay.cnYear }}年[{{ lunarDay.Animal }}] {{ lunarDay.IMonthCn }}{{ lunarDay.IDayCn }}
                {{ lunarDay.Term }} {{ lunarDay.ncWeek }} {{ timePeriod }}
              </div>
            </div>
          </div>
          <div class="userNum flex column text-center">
            <div class="title">用户数</div>
            <span><countTo :start="1" :end="userNumber" :duration="5000"></countTo></span>
          </div>
          <!-- <div class="currentTime flex column text-center">
            <span>{{ currentTime }}</span>
            <span>
              {{ lunarDay.cnYear }}年[{{ lunarDay.Animal }}] {{ lunarDay.IMonthCn }}{{ lunarDay.IDayCn }}
              {{ lunarDay.Term }} {{ lunarDay.ncWeek }} {{ timePeriod }}
            </span>
          </div> -->
        </div>
      </el-card>
    </section>
    <section class="dataCard">
      <el-card shadow="always">
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in cardData" :key="item.value">
            <div
              class="item"
              :style="{ backgroundImage: `linear-gradient(to bottom right, ${item.colors[0]}, ${item.colors[1]})` }"
            >
              <h3>{{ item.title }}</h3>
              <div class="data">
                <i class="iconfont" :class="item.icon"></i>
                <span><countTo :start="1" :end="item.value" :duration="item.time"></countTo></span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </section>
    <section class="statistics">
      <el-row :gutter="20">
        <el-col :span="8">
          <LineChart id="lineChart" height="300px" width="100%" />
        </el-col>
        <el-col :span="8">
          <BarChart id="barChart" height="300px" width="100%" />
        </el-col>
        <el-col :span="8">
          <PieChart id="pieChart" height="300px" width="100%" />
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { useDateFormat, useNow, useTransition, TransitionPresets } from '@vueuse/core';
import { useUserStore } from '@/store/modules/user';
// import { transitionNum } from '@/utils/index';
import calendar from '@/utils/lunar';
import countTo from '@/utils/countTo';
import LineChart from './components/LineChart.vue';
import BarChart from './components/BarChart.vue';
import PieChart from './components/PieChart.vue';
import avatar from '@/assets/images/avatar.png';

const userStore = useUserStore();
const duration = 5000;
const userNumber = ref(2800);
// const vsitsNumber = transitionNum(720, 5000);
const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
const hoursNow = useNow().value.getHours();
const lunarDay: any = calendar.solarToLunar(
  useNow().value.getUTCFullYear(),
  useNow().value.getUTCMonth() + 1,
  useNow().value.getUTCDate()
);

interface CardData {
  id: string;
  title: string;
  value: number;
  time: number;
  colors: [string, string];
  icon: string;
}

const cardData: CardData[] = [
  {
    id: '1',
    title: '访问量',
    value: 50000,
    time: 5000,
    colors: ['#ec4786', '#b955a4'],
    icon: 'icon-user-visits'
  },
  {
    id: '2',
    title: '成交额',
    value: 8000000,
    time: 5000,
    colors: ['#865ec0', '#5144b4'],
    icon: 'icon-turnover'
  },
  {
    id: '3',
    title: '订单数',
    value: 2000,
    time: 5000,
    colors: ['#56cdf3', '#719de3'],
    icon: 'icon-num-download'
  },
  {
    id: '4',
    title: '成交数',
    value: 9000,
    time: 5000,
    colors: ['#fcbc25', '#f68057'],
    icon: 'icon-num-transactions'
  }
];

const timePeriod = computed(() => {
  if (hoursNow >= 3 && hoursNow < 8) {
    return '早安！';
  } else if (hoursNow >= 8 && hoursNow < 11) {
    return '上午好！';
  } else if (hoursNow >= 11 && hoursNow < 13) {
    return '中午好！';
  } else if (hoursNow >= 13 && hoursNow < 17) {
    return '下午好！';
  } else if (hoursNow >= 17 && hoursNow < 23) {
    return '晚上好！';
  } else if (hoursNow >= 23 && hoursNow < 3) {
    return '晚安！';
  }
});

onMounted(() => {});
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>