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, index) 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" :decimals="index != 0 ? 0 : 2"></countTo>
                  <span v-if="item.total != 0">
                    <i>/</i>
                    <countTo :start="1" :end="item.total" :duration="2000" :decimals="index != 0 ? 0 : 2"></countTo>
                  </span>
                </span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </section>
    <section class="statistics">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card>
            <template #header> 一网温度 </template>
            <LineChart id="lineChart" height="300px" width="100%" />
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <template #header> 一网进温排行 </template>
            <BarChart id="barChart" height="300px" width="100%" />
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <template #header> 一网回温排行 </template>
            <BarChart id="barCharts" height="300px" width="100%" />
          </el-card>
        </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 {
  getHeatSupplyAreaApi,
  getAlertCountApi,
  getHeatExchangeStationCount,
  getDeviceCountApi
} from '@/api/dashboard/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';
import mitt from '@/plugins/bus';

// import socket from '@/utils/socket';
// const userStorageInfo = sessionStorage.getItem('userInfo');
// const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
// const wsUrl = `ws://10.10.10.56:9010/websocket/${userInfo.userName}`; //websocket地址

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 = ref<CardData[]>([
  {
    id: '1',
    title: '供热面积',
    value: 0,
    time: 5000,
    colors: ['#ec4786', '#b955a4'],
    icon: 'icon-area-chart',
    total: 0
  },
  {
    id: '2',
    title: '报警数量/设备数量',
    value: 0,
    time: 5000,
    colors: ['#865ec0', '#5144b4'],
    icon: 'icon-HP',
    total: 0
  },
  {
    id: '3',
    title: '换热站',
    value: 0,
    time: 5000,
    colors: ['#56cdf3', '#719de3'],
    icon: 'icon-heat-exchange-station',
    total: 0
  },
  {
    id: '4',
    title: '设备在线数/设备总数',
    value: 0,
    time: 5000,
    colors: ['#fcbc25', '#f68057'],
    icon: 'icon-device',
    total: 0
  }
]);

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();
  getCardData();
  // socket.initialize(wsUrl);
  // const webVersion = sessionStorage.getItem('webVersion');
  // if (webVersion != '' && webVersion != null) {
  //   const version = JSON.parse(webVersion);
  //   notice.value = ElNotification({
  //     title: version.noticeTitle,
  //     dangerouslyUseHTMLString: true,
  //     customClass: 'notice',
  //     duration: 0,
  //     message: version.noticeContent.replace(/\n/g, '<br>'),
  //     onClose: () => {
  //       noticeCloce(version.noticeId);
  //     }
  //   });
  // }
});
// function noticeCloce(id: any) {
//   //更新日志关闭事件
//   const params = {
//     versionId: id
//   };
//   userVersionRelation(params).then((res: any) => {
//     if (res.code === 200) {
//       console.log('更新日志关闭！');
//     }
//   });
// }
function getCardData() {
  //卡片数据
  getHeatSupplyAreaApi().then((res: any) => {
    if (res.code === 200) {
      cardData.value[0].value = res.data;
    }
  });
  getAlertCountApi().then((res: any) => {
    if (res.code === 200) {
      cardData.value[1].value = res.data.alertCount;
      cardData.value[1].total = res.data.deviceCount;
    }
  });
  getHeatExchangeStationCount().then((res: any) => {
    if (res.code === 200) {
      cardData.value[2].value = res.data;
    }
  });
  getDeviceCountApi().then((res: any) => {
    if (res.code === 200) {
      cardData.value[3].value = res.data.enabledCount;
      cardData.value[3].total = res.data.total;
    }
  });
}
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);
    }
  });
}
// mitt.on('tableMessage', (res: any) => {
//   //监听表格数据变化
//   console.log('noticeMessage--', res.data);
// });
</script>

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