rax-medical/src/views/home/index.vue

<template>
  <div class="home-page">
    <div class="background-box">
      <div class="left-content">
        <div class="message-box">
          <el-carousel height="32px" direction="vertical" indicator-position="none" autoplay>
            <el-carousel-item v-for="(item, index) in messages" :key="'message-' + index">
              <p class="text-row-1" style="line-height: 32px;" :class="{'is-link': item.href}"
                 @click="userStore.showHomeMsg=true">【{{ item.category }}】 {{ item.message }}</p>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="header-box">
          <div class="header-item">
            <span class="main-color f20" style="font-weight: 600;">{{ userInfo.name }}</span>
            <span class="text2-color f14">{{ userInfo.roleName }}</span>
          </div>
          <div class="header-item">
            <el-icon class="text1-color" style="font-size: 26px;margin-right: 20px;">
              <Calendar/>
            </el-icon>
            <div>
              <p class="text1-color f14">待办任务</p>
              <p class="main-color f20">{{ todoTotal }}</p>
            </div>
          </div>
        </div>
        <div class="echart-box">
          <div class="echart-item">
            <NumberChart/>
          </div>
          <div class="echart-item">
            <NumberPieChart/>
          </div>
          <div class="echart-item">
            <TimeChart/>
          </div>
          <div class="echart-item">
            <TimeBarChart/>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="week-calendar">
          <WeekCalendar/>
        </div>
        <div class="system-logs" v-if="showLogMod">
          <div class="title">
            <span>系统日志</span>
            <span class="f14" style="cursor: pointer;" @click="router.push('./logs-manage/logs-manage')">更多</span>
          </div>
          <div class="content">
            <SystemLogs/>
          </div>
        </div>
      </div>
    </div>
    <el-drawer
        class="message-drawer-box"
        v-model="userStore.showHomeMsg"
        title="通知消息"
    >
      <div class="body">
        <el-card style="margin-top: 10px;" v-for="(item, index) in messageTable">
          <template #header>
            <div class="card-header">
              <span>{{ item.category }}</span>
            </div>
          </template>
          <p class="text item">{{ item.message }}</p>
          <template #footer>
            <span>{{ item.creatorName }}</span>
            <span style="float: inline-end;">{{ item.createTime }}</span>
          </template>
        </el-card>
      </div>

      <div class="footer">
        <el-pagination
            v-model:page-size="size"
            v-model:current-page="current"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next, jumper, sizes"
            :page-sizes="[10, 20, 30, 50]"
            :total="total"
        />
      </div>
    </el-drawer>
  </div>
</template>

<script lang='ts' setup>
import {onMounted, ref} from 'vue'
import {useRouter} from 'vue-router'
import {useUserStore} from '@/stores/user-info-store'
import NumberChart from "./number-chart.vue";
import NumberPieChart from "./number-pie-chart.vue";
import TimeChart from "./time-chart.vue";
import TimeBarChart from "./time-bar-chart.vue";
import WeekCalendar from "./week-calendar.vue";
import SystemLogs from "@/components/system-logs.vue";
import * as dailyPlanApi from "@/api/daily-plan";
import {dateFormater} from "@/utils/date-util";
import * as msgApi from "@/api/sys-message";

const router = useRouter()
const userStore = useUserStore();
const userInfo = userStore.getlogin()
const showLogMod = ref(false)
const messages = ref([] as any)
const messageTable = ref([] as any)
const current = ref(1);
const size = ref(10);
const total = ref(0);
const todoTotal = ref(0) // 日历添加的记录提醒统计

onMounted(() => {
  init();
})

function init() {
  const path = router.currentRoute.value.path;
  userStore.getMenuPathList().then(res => {
    res.menus.filter((menu: any) => menu.path == path).forEach((menu: any) => {
      menu.children.filter((child: any) => child.permission == 'home_sys_log_view').forEach(() => {
        showLogMod.value = true;
      })
    })
  });
  getTodoCount();
  messages.value = [];
  messageTable.value = [];
  current.value = 1
  total.value = 0
  loadMsg();
}

function getTodoCount() {
  dailyPlanApi.getTodoCountByDate(dateFormater("yyyy-MM-dd", new Date())).then((res: any) => {
    if (res.code == 0) {
      todoTotal.value = res.data;
    }
  });
}

function handleSizeChange() {
  messageTable.value = [];
  loadMsg()
}

function handleCurrentChange() {
  messageTable.value = [];
  loadMsg()
}

async function loadMsg() {
  const res = await msgApi.page(current.value, size.value)
  if (res.code == 0) {
    total.value = res.data.total
    res.data.records.forEach((row: any) => {
      if (current.value == 1) {
        messages.value.push(row)
      }
      messageTable.value.push(row)
    })
  }
}

</script>

<style lang='scss' scoped>
.home-page {
  width: 100%;
  height: 100%;
  padding: 15px;
  overflow-y: auto;

  .background-box {
    width: 100%;
    height: 100%;
    background: white;
    padding: 20px 35px;
    display: flex;
    justify-content: space-between;
    min-height: 900px;

  }

  .left-content {
    width: calc(100% - 350px);
    height: 100%;

    .message-box {
      height: 34px;
      background: #f8f8f8;
      color: $text-color;
      padding: 0 30px;
      border: 1px solid $border1-color;
      margin-bottom: 20px;

      .is-link {
        cursor: pointer;
        color: $main-color;
      }
    }

    .header-box {
      width: 100%;
      height: 90px;
      display: flex;
      justify-content: space-between;

      .header-item {
        width: calc(60% - 20px);
        height: 100%;
        border: 1px solid $border-color;
        border-radius: 5px;
        box-shadow: 1px 1px 5px $border2-color;
        padding: 0 90px;
        line-height: 1.5;
        display: flex;
        flex-direction: column;
        justify-content: center;

        & ~ .header-item {
          width: 40%;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
        }
      }
    }

    .echart-box {
      width: 100%;
      height: calc(100% - 164px);
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .echart-item {
        width: calc(60% - 20px);
        height: calc(50% - 10px);
        border: 1px solid $border-color;
        border-radius: 5px;
        padding: 20px;
        box-shadow: 1px 1px 5px $border2-color;

        &:nth-child(even) {
          width: 40%;
        }

        &:nth-child(n + 3) {
          margin-top: 20px;
        }
      }
    }
  }

  .right-content {
    width: 330px;
    height: 100%;

    .week-calendar {
      width: 100%;
      height: 50%;
    }

    .system-logs {
      width: 100%;
      height: calc(50% - 20px);
      margin-top: 20px;
      overflow: hidden;

      .title {
        width: 100%;
        height: 40px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .content {
        width: 100%;
        height: calc(100% - 50px);
        margin-top: 10px;
        border: 1px solid $border-color;
        padding: 30px;
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
  }

  .message-drawer-box {
    .body {
      margin-bottom: 20px;
    }

    .footer {
      position: fixed;
      bottom: 6px;
      background: white;
    }
  }
}</style>