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 }}
                <span>{{ timePeriod }}</span>
              </div>
              <div class="time">{{ currentTime }}</div>
              <div class="time">
                {{ lunarDay.cnYear }}年[{{ lunarDay.Animal }}] {{ lunarDay.IMonthCn }}{{ lunarDay.IDayCn }}
                {{ lunarDay.Term }} {{ lunarDay.ncWeek }}
              </div>
            </div>
          </div>
          <div class="userNum flex column items-end">
            <div class="title">{{ weatherData.city }}</div>
            <span>
              <svg-icon class="weatherSvg" :icon-class="weatherData.weatherImg" />
              {{ weatherData.temperature }}℃ {{ weatherData.weather }}
            </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 v-if="item.total != 0"><i>/</i>{{ item.total }}</span>
                </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 { getWeather, userVersionRelation } from '@/api/user/index';
// 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 timer = ref();
const isCurrentRoute = ref(true);
const userStore = useUserStore();
const duration = 5000;
const userNumber = ref(2800);
const notice = ref({});
// 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()
);
const weatherData = ref({ city: '', weather: '', temperature: '', weatherImg: '' });

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

const cardData: CardData[] = [
  {
    id: '1',
    title: '供热面积',
    value: 50000,
    time: 5000,
    colors: ['#ec4786', '#b955a4'],
    icon: 'icon-area-chart',
    total: 0
  },
  {
    id: '2',
    title: '产热量',
    value: 200,
    time: 5000,
    colors: ['#865ec0', '#5144b4'],
    icon: 'icon-HP',
    total: 8000
  },
  {
    id: '3',
    title: '换热站',
    value: 2000,
    time: 5000,
    colors: ['#56cdf3', '#719de3'],
    icon: 'icon-heat-exchange-station',
    total: 0
  },
  {
    id: '4',
    title: '设备',
    value: 9000,
    time: 5000,
    colors: ['#fcbc25', '#f68057'],
    icon: 'icon-device',
    total: 100000
  }
];

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(() => {
  getWeatherData();
  const webVersion = sessionStorage.getItem('webVersion');
  debugger
  if (webVersion != '') {
    const version = JSON.parse(webVersion);
    notice.value = ElNotification({
      title: '更新日志',
      dangerouslyUseHTMLString: true,
      customClass: 'notice',
      duration: 0,
      message: version.versionDesc.replace(/\n/g, '<br>'),
      onClose: () => {
        noticeCloce(version.id);
      }
    });
  }
});
function noticeCloce(id: any) {
  //更新日志关闭事件
  const params = {
    versionId: id
  };
  userVersionRelation(params).then((res: any) => {
    if (res.code === 200) {
      console.log('更新日志关闭！')
    }
  });
}
function getWeatherData() {
  //获取天气
  getWeather().then((res: any) => {
    if (res.code === 200) {
      if (isCurrentRoute.value) {
        timer.value = setTimeout(async () => {
          await (timer.value && clearTimeout(timer.value));
          await getWeatherData();
        }, 600000);
      }
      weatherData.value = res.data;
    } else {
      clearTimeout(timer.value);
    }
  });
}
</script>

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