kd-aiot-frontend-wt/src/views/home/index.vue

<template>
  <div class="home-container">
    <el-row :gutter="6" style="height: 148px;">
      <el-col :span="24" class="box-col">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>常用功能</span>
            <span style="float: right; padding: 3px 0">
              <i class="el-icon-edit" @click="handleEdit" style="cursor: pointer; margin-right: 16px; font-size: 18px;"></i>
              <i class="el-icon-setting" @click="handleAdd" style="cursor: pointer; font-size: 18px;"></i>
            </span>
          </div>
          <div class="card-content common-function-card">
            <vuedraggable v-model="commonFunctions" class="common-function">
              <div
                v-for="(item, index) in commonFunctions"
                :key="item.id"
                class="common-function-item"
                @click="handleDel(item, index)"
                :title="
                  isDelFlag ? '点击删除' : ''
                "
                :class="
                  isDelFlag ? 'div-del' : ''
                "
              >
                <!-- <div class="common-function-item-content"> -->
                  <div class="common-function-item-icon">
                    <!-- <i :class="item.icon || 'el-icon-s-opportunity'"></i> -->
                    <img :src="getIconPath(item.pic)" alt="">
                  </div>
                  <div class="common-function-item-name">{{ item.name }}</div>
                <!-- </div> -->
              </div>
            </vuedraggable>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="6" class="mt-20" style="height: 232px;">
      <el-col :span="18" class="box-col">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>数据概览</span>
          </div>
          <div class="card-content">
            <el-row :gutter="20" class="overview-container">
              <el-col :span="8">
                <div class="overview">
                  <div class="overview-top">
                    <div class="overview-top-img"><img src="~@/assets/home/ceshi1.png" alt=""></div>
                    <div class="overview-top-content">
                      <div class="overview-top-content-name">我的项目</div>
                      <div class="overview-top-content-count">{{ myProjectList['总数量'] || 0 }}</div>
                    </div>
                  </div>
                  <el-divider></el-divider>
                  <div class="overview-bottom">
                    <div 
                      v-for="(value, key) in myProjectList" 
                      :key="key"
                      v-if="key !== '总数量' && value != 0"
                      class="overview-bottom-item"
                      @click="handleToPro(key)"
                    >
                      <div class="overview-bottom-item-name">{{ key }}</div>
                      <div class="overview-bottom-item-count">{{ value || 0 }}</div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="overview">
                  <div class="overview-top">
                    <div class="overview-top-img"><img  src="~@/assets/home/ceshi.jpg" alt=""></div>
                    <div class="overview-top-content">
                      <div class="overview-top-content-name">我的工单</div>
                      <div class="overview-top-content-count">{{ myWorkOrderList['总数量'] || 0 }}</div>
                    </div>
                  </div>
                  <el-divider></el-divider>
                  <div class="overview-bottom">
                    <div 
                      v-for="(value, key) in myWorkOrderList" 
                      :key="key"
                      v-if="key !== '总数量' && value != 0"
                      class="overview-bottom-item"
                      @click="handleTo(key)"
                    >
                      <div class="overview-bottom-item-name">{{ key }}</div>
                      <div class="overview-bottom-item-count">{{ value || 0 }}</div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="overview">
                  <div class="overview-top">
                    <div class="overview-top-img"><img style="border-radius: 10px;" src="~@/assets/home/ceshi2.jpg" alt=""></div>
                    <div class="overview-top-content">
                      <div class="overview-top-content-name">我的任务</div>
                      <div class="overview-top-content-count">{{ myTaskList['总数量'] || 0 }}</div>
                    </div>
                  </div>
                  <el-divider></el-divider>
                  <div class="overview-bottom">
                    <div 
                      v-for="(value, key) in myTaskList" 
                      :key="key"
                      v-if="key !== '总数量' && value != 0"
                      class="overview-bottom-item"
                      @click="handleTo(key)"
                    >
                      <div class="overview-bottom-item-name">{{ key }}</div>
                      <div class="overview-bottom-item-count">{{ value || 0 }}</div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" class="box-col">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>统一门户</span>
          </div>
          <div class="card-content portal-content">
            <div class="portal">
              <el-row :gutter="12">
                <el-col :span="8" v-for="item in portals" :key="item.name" class="portal-item">
                  <div class="portal-item-content" @click="openUrl(item)">
                    <div class="portal-item-img"><img :src="item.img" alt=""></div>
                    <div class="portal-item-name">{{ item.name }}</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="6" class="mt-20" style="height: 404px;">
      <el-col :span="18" class="box-col">
        <el-card class="box-card notification-card">
          <div class="card-content">
            <el-tabs v-model="activeTab" @tab-click="handleTabClick">
              <el-tab-pane label="通知公告" name="notice"></el-tab-pane>
              <!-- <el-tab-pane label="行业动态" name="industry"></el-tab-pane> -->
              <el-tab-pane label="系统通知" name="system"></el-tab-pane>
            </el-tabs>
            
            <div v-if="notifications.length > 0" class="notification-list">
              <div v-for="(item, index) in notifications" :key="index" class="notification-item" @click="handleNotificationsClick(item)">
                <div class="notification-dot"></div>
                <div class="notification-content">
                  <div class="notification-header">
                    <div class="notification-title">{{ item.title }}</div>
                    <div v-if="activeTab == 'notice'" class="notification-text">
                      {{ item.content }}
                      <!-- <div v-if="item.images && item.images.length > 0" class="notification-images">
                        <div v-for="(img, imgIndex) in item.images" :key="imgIndex" class="image-url">{{ img }}</div>
                      </div> -->
                    </div>
                    <div v-else class="notification-text">{{ item.content }}</div>
                  </div>
                  <div class="notification-info">{{ item.createUser }} <span style="margin-left: 20px;">{{ item.department }}</span></div>
                </div>
                <div class="notification-date">{{ item.createTime }}</div>
              </div>
              <div v-if="hasMore" class="notification-more" @click="loadMoreNotifications">
                更多......
              </div>
            </div>
            <div v-else class="no-notification">
              <el-empty description="暂无数据"></el-empty>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" class="box-col">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>工作日历</span>
          </div>
          <div class="card-content calendar-content">
            <el-calendar class="calendar" v-model="currentDate" :range="calendarRange">
              <template
                slot="dateCell"
                slot-scope="{date, data}">
                <div class="calendar-day-content" @click="handleDateClick(data.day)">
                  <div :class="data.isSelected ? 'is-selected-day' : ''">{{ data.day.split('-')[2] }} </div>
                  <div class="dot-container" v-if="hasSchedule(data.day)"><span class="dot"></span></div>
                </div>
              </template>
            </el-calendar>
            <div class="calendar-more">
              <!-- el-icon-caret-top -->
              <i :class="calendarShowMore ? 'el-icon-caret-top' : 'el-icon-caret-bottom'" style="font-size: 24px; color: #d7d7d7; cursor: pointer;" @click="handleCalendarMoreClick"></i>
            </div>

            <div class="schedule">
              <div class="schedule-item" v-for="(item, index) in getScheduleListByDate()" :key="index">
                <el-row :gutter="20">
                  <el-col :span="10">
                    <div class="schedule-item-time">
                      <span>{{ item.startHour }}</span>
                      <span>~</span>
                      <span>{{ item.endHour }}</span>
                    </div>
                  </el-col>
                  <el-col :span="14">
                    <div class="schedule-item-name">
                      {{ item.title || item.name || '日程安排' }}
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <commonDialog
      ref="commonDialogRef"
      v-if="commonDialogFlag"
      :common-dialog-flag.sync="commonDialogFlag"
      @reload="getCommonFunctionsList"
    ></commonDialog>
    <noticeIssuanceDetail
      ref="noticeIssuanceDetailRef"
    ></noticeIssuanceDetail>
  </div>
</template>

<script>
import { notifyMessagePageAPI } from '@/api/bpm/task';
import {
    userResourceDeleteAPI,
    userResourceListAPI,
    getList,
    getMyProjectTotal,
    getMyWorkOrderTotal,
    getMyTaskTotal,
    getMyWorkCalendar
  } from '@/api/home';
import { deepClone } from 'ele-admin/lib/utils/core';
import { mapGetters } from 'vuex';
import vuedraggable from 'vuedraggable';
import commonDialog from '@/views/home/common-dialog.vue';
import { noticeDocumentPageV1API } from '@/api/documents/noticeIssuance/index.js';
import noticeIssuanceDetail from '@/views/bpm/documents/noticeIssuance/components/addOrEditDraw.vue';
export default {
  name: 'HomePage',
  components: {
    vuedraggable,
    commonDialog,
    noticeIssuanceDetail
  },
  data() {
    return {
      currentDate: new Date(),
      calendarRange: [],
      commonFunctions: [],
      activeTab: 'notice',
      notifications: [],
      currentPage: 1,
      pageSize: 4,
      hasMore: true,
      portals: [],
      calendarShowMore: false,
      isDelFlag: false,
      commonDialogFlag: false,
      myProjectList: {},
      myWorkOrderList: {},
      myTaskList: {},
      myWorkCalendar: {},
      groupedWorkCalendar: {}, // 分组后的工作日历数据
      selectedScheduleDate: '', // 当前选中的日期
    };
  },
  computed: {
    ...mapGetters(['user']),
    currentNotifications() {
      const notifications = this.notifications[this.activeTab] || [];
      return notifications;
    }
  },
  watch: {
    currentDate: {
      handler(newVal, oldVal) {
        // 检查月份是否变化
        if (newVal.getMonth() !== oldVal.getMonth() || newVal.getFullYear() !== oldVal.getFullYear()) {
          // 重新计算日期范围
          this.calendarRange = this.getMonthRange();
          // 重新获取日程数据
          this.getMyWorkCalendar();
        }
        // 日期变化时，处理选中日期的日程
        if (newVal !== oldVal) {
          const year = newVal.getFullYear();
          const month = String(newVal.getMonth() + 1).padStart(2, '0');
          const day = String(newVal.getDate()).padStart(2, '0');
          const dateStr = `${year}-${month}-${day}`;
          this.handleDateClick(dateStr);
        }
      },
      deep: true
    }
  },
  created() {
    this.calendarRange = this.getWeekRange();
    this.getPortalsList();
    this.getCommonFunctionsList();
    this.getMyProjectTotal();
    this.getMyWorkOrderTotal();
    this.getMyTaskTotal();
    this.getMessageList();
    this.getMyWorkCalendar();
  },
  methods: {
    openUrl(item) {
      // 统一门户配置
      if (item.architType === '1') {
        // bs门户配置
        window.open(item.linkUrl);
      } else {
        let url = item.linkUrl.split('//');
        window.open(url[1], '_blank');
      }
    },
    handleNotificationsClick(item) {
      console.log('item~~~', item);
      if(this.activeTab === 'system') return;
      
      this.$refs.noticeIssuanceDetailRef.openDrawer({
        id: item.id,
        type: 'detail'
      });
      
      // this.$router.push({
      //   // query
      //   query: {
      //     id: item.id,
      //     type: 'detail'
      //   }
      // });
    },
    async getMyWorkCalendar() {
      const res = await getMyWorkCalendar({
        startDate: this.calendarRange[0],
        endDate: this.calendarRange[1]
      });
      console.log('myWorkCalendar~~~', res);

      // 数据分组
      if (res) {
        const groupedData = {};
        res.forEach(item => {
          if (item.startTime) {
            // 分割 startTime 为日期和时间
            const dateTime = item.startTime.split(' ');
            const date = dateTime[0];
            const time = dateTime[1] || '';

            // 从 startTime 提取小时（去掉分秒）
            const startHourOnly = time.split(':')[0] || '';
            // 提取月日（去掉年份）
            const startDateParts = date.split('-');
            const startMonthDay = startDateParts[1] + '-' + startDateParts[2];

            // 从 endTime 提取小时
            let endHourOnly = '';
            let endMonthDay = '';
            if (item.endTime) {
              const endDateTime = item.endTime.split(' ');
              const endDate = endDateTime[0] || '';
              const endDateParts = endDate.split('-');
              endMonthDay = endDateParts[1] + '-' + endDateParts[2];
              const endTime = endDateTime[1] || '';
              endHourOnly = endTime.split(':')[0] || '';
            }

            // 添加日期和时间属性（保持原有的 date 和 time 不变）
            item.date = date;
            item.time = time;
            item.startHour = startHourOnly ? startMonthDay + ' ' + startHourOnly : '';
            item.endHour = endHourOnly ? endMonthDay + ' ' + endHourOnly : '';

            // 按日期分组
            if (!groupedData[date]) {
              groupedData[date] = [];
            }
            groupedData[date].push(item);
          }
        });
        console.log('分组后的数据:', groupedData);
        // 可以将分组后的数据存储到一个新的变量中，以便在模板中使用
        this.groupedWorkCalendar = groupedData;
        
        // 获取当天日期并设置为选中日期
        const today = new Date();
        const year = today.getFullYear();
        const month = String(today.getMonth() + 1).padStart(2, '0');
        const day = String(today.getDate()).padStart(2, '0');
        const todayStr = `${year}-${month}-${day}`;
        
        // 如果当天有日程，则自动选中当天
        if (groupedData[todayStr] && groupedData[todayStr].length > 0) {
          this.selectedScheduleDate = todayStr;
        }
      }
    },
    hasSchedule(day) {
      return this.groupedWorkCalendar && this.groupedWorkCalendar[day] && this.groupedWorkCalendar[day].length > 0;
    },
    handleDateClick(day) {
      console.log('day~~~', day);
      this.selectedScheduleDate = day;
    },
    getScheduleListByDate() {
      if (this.selectedScheduleDate && this.groupedWorkCalendar[this.selectedScheduleDate]) {
        return this.groupedWorkCalendar[this.selectedScheduleDate];
      }
      return [];
    },
    handleToPro() {
      this.handelRouterTo('/page-pro/project-initiation')
    },
    handleTo(key) {
      switch(key) {
        case '测试项目':
        case '研发项目':
        case '实施项目':
        case '开发项目':
          this.handelRouterTo('/page-pro/project-initiation')
          break;
        case '运维工单':
          this.handelRouterTo('/page-eam/maintenance/patrol?isWt=true&title=工单')
          break;
        case '质检工单':
          this.handelRouterTo('/page-qms/inspectionWork')
          break;
        case '生产工单':
          this.handelRouterTo('/page-mes/produceOrder?isWt=true')
          break;
        case '盘点工单':
          this.handelRouterTo('/page-wms/warehouseManagement/stocktaking/work')
          break;
        case '盘点任务':
          this.handelRouterTo('')
          break;
        case '生产任务':
          this.handelRouterTo('/page-mes/rw')
          break;
        case '质检任务':
          this.handelRouterTo('/page-qms/inspectionProjectTask')
          break;
        case '项目任务':
          this.handelRouterTo('/page-pro/task/myTaskList')
          break;
      }
    },
    async getMessageList() {
      let list = [];
      let total = 0;
      if(this.activeTab === 'notice') {
        const res = await noticeDocumentPageV1API({
          pageNum: this.currentPage,
          size: 5,
          approvalStatus: 2
        })
        console.log('noticeDocumentPageV1API~~~', res);
        total = res.count || 0;
        list = (res.list || []).map((item) => {
          // 提取 HTML 中的图片地址
          const images = [];
          const content = item.content || '';
          const imgRegex = /<img[^>]+src=["']([^"']+)["']/gi;
          let match;
          while ((match = imgRegex.exec(content)) !== null) {
            images.push(match[1]);
          }
          // 提取纯文本内容（去除 HTML 标签和空格）
          const textContent = content.replace(/<[^>]+>/g, '').replace(/\s+/g, '').trim();

          return {
            id: item.id,
            title: item.title,
            content: textContent,
            images: images,
            createUser: '拟稿人：' + item.draftAuthor,
            department: '发文机关：' + item.issuingAuthority,
            createTime: item.createTime
          }
        });
      } else if(this.activeTab === 'industry') {
        list = []
      } else if(this.activeTab === 'system') {
        const res = await notifyMessagePageAPI({
          pageNum: this.currentPage,
          size: 5,
          // userId: this.user.info.userId,

        });
        total = res.count || 0;
        list = (res.list || []).map((item) => {
          return {
            title: item.templateName,
            content: item.templateContent,
            createUser: '创建人：' + item.userName,
            department: item.department,
            createTime: item.createTime
          }
        });
      }

      // 如果是第一页，直接赋值；否则拼接到后面
      if (this.currentPage === 1) {
        this.notifications = list;
      } else {
        this.notifications = [...this.notifications, ...list];
      }
      // 判断是否还有更多数据
      this.hasMore = this.notifications.length < total;
      console.log('notifications~~~', this.notifications, 'hasMore:', this.hasMore);
    },
    async getMyProjectTotal() {
      this.myProjectList = await getMyProjectTotal({});
    },
    async getMyWorkOrderTotal() {
      this.myWorkOrderList = await getMyWorkOrderTotal({});
    },
    async getMyTaskTotal() {
      this.myTaskList = await getMyTaskTotal({});
    },
    handleAdd() {
      // if(this.commonFunctions.length > 12) return this.$message.warning('最多只能添加12个常用功能');
      this.commonDialogFlag = true;
      this.$nextTick(() => {
        this.$refs.commonDialogRef.init();
      });
    },
    handleEdit() {
      this.isDelFlag = !this.isDelFlag;
    },
    handleDel(item, index) {
      if (this.isDelFlag) return this.handleCommonListDel(item, index);

      let urlPath = item.topUrl + item.url;
      console.log('urlPath~~~', urlPath);
      this.handelRouterTo(urlPath);
    },
    async handleCommonListDel(item, index) {
      await userResourceDeleteAPI([item.id]);
      this.commonFunctions.splice(index, 1);
    },
    handelRouterTo(path) {
      window.history.pushState(null, '', path);
    },
    getIconPath(pic) {
      if (pic) {
        // 如果后端返回的是静态路径字符串，需要通过 require() 处理
        return require(`@/assets/home/commonIcon/${pic}`);
      }
      // 如果没有 pic 字段，使用默认图标
      return require('@/assets/home/commonIcon/icon_0.svg');
    },
    async getCommonFunctionsList() {
      this.commonFunctions = await userResourceListAPI();
      console.log('commonFunctions~~~', this.commonFunctions);
    },
    async getPortalsList() {
      let { list } = await getList({ pageNum: 1, size: 9999 });
      this.portals = list.map((item) => {
        return {
          ...item,
          img:
            window.location.origin +
            '/api/main/file/getFile?objectName=' +
            item.iconPath
        };
      });
      console.log(this.portals);
    },
    handleCalendarMoreClick() {
      this.calendarShowMore = !this.calendarShowMore;
      console.log(this.getMonthRange());
      if (this.calendarShowMore) {
        this.calendarRange = this.getMonthRange();
      } else {
        this.calendarRange = this.getWeekRange();
      }
      this.getMyWorkCalendar();
    },
    handleTabClick() {
      // 切换标签页时重置页码和hasMore
      this.currentPage = 1;
      this.hasMore = true;
      this.notifications = [];
      this.getMessageList();
    },
    loadMoreNotifications() {
      // 加载更多通知（增加页码）
      this.currentPage++;
      this.getMessageList();
      // switch(this.activeTab) {
      //   case 'notice':
      //     this.handelRouterTo('/page-wt/documents/noticeIssuance');
      //     break;
      //   case 'industry':
      //     this.handelRouterTo('/industry');
      //     break;
      //   case 'system':
      //     this.handelRouterTo('/page-wt/message');
      //     break;
      // }
    },
    // 获取当天所在周的范围，周一开头
    getWeekRange() {
      const now = new Date(this.currentDate);
      const dayOfWeek = now.getDay(); // 0 是周日，1 是周一，...，6 是周六
      // 计算与周一的差值：如果是周日（0），则差值为 -6，否则差值为 1 - dayOfWeek
      const diff = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
      const monday = new Date(now);
      monday.setDate(now.getDate() + diff);
      const sunday = new Date(monday);
      sunday.setDate(monday.getDate() + 6);
      
      const formatDate = (date) => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      };
      
      return [
        formatDate(monday),
        formatDate(sunday)
      ];
    },
    // 获取选中当月的范围
    getMonthRange() {
      const now = new Date(this.currentDate);
      const year = now.getFullYear();
      const month = now.getMonth();
      
      // 当月第一天
      const firstDay = new Date(year, month, 1);
      // 下月第一天，减一天就是当月最后一天
      const lastDay = new Date(year, month + 1, 0);
      
      const formatDate = (date) => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      };
      
      return [
        formatDate(firstDay),
        formatDate(lastDay)
      ];
    }
    
  }
};
</script>

<style lang="scss" scoped>
.home-container {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  // height: calc(100vh - 96px);
  .card-content {
    &.common-function-card {
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      padding-bottom: 8px;
      
      &::-webkit-scrollbar {
        height: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
      }
      
      .common-function {
        flex-wrap: nowrap;
        display: inline-flex;
      }
    }
    
    &.portal-content {
      max-height: 172px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 8px;
      flex-shrink: 0;
      min-height: 0;
      
      .portal {
        max-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
      }
      
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
      }
    }
    
    &.calendar-content {
      max-height: 332px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 8px;
      
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
      }
    }
    
    .common-function {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      .common-function-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 18px;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        .common-function-item-icon {
          width: 50px;
          height: 50px;
          box-shadow: 0px 1px 2px 1px #eae7e7;
          background: #f8fafc;
          border-radius: 17px;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 30px;
            height: 30px;
          }
        }
        .common-function-item-name {
          font-size: 14px;
          font-weight: 400;
          color: #3f3e3e;
          margin-top: 10px;
        }
      }
      .div-del {
          // background: #cccccc !important;
          position: relative;
        }

        .div-del::after {
          content: '—';
          position: absolute;
          padding: 5px; /* 按钮的内边距 */
          background-color: rgba(255, 0, 0, 0.91);
          color: white;
          border-radius: 50%;
        }
    }

    .overview-container {
      .overview {
        padding: 16px;
        box-sizing: border-box;
        border-radius: 17px;
        box-shadow: -1px 1px 0px 1px #ececec, 1px -1px 0px 1px #ececec;
        border: 1px solid #ececec;
        .overview-top {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .overview-top-img {
            width: 66px;
            height: 66px;
            border-radius: 50%;
            margin-right: 10px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .overview-top-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            .overview-top-content-name {
              font-size: 18px;
              font-weight: 500;
              color: #525252;;
            }
            .overview-top-content-count {
              font-size: 28px;
              font-weight: 500;
              color: #2D80EE;
              line-height: 42px;
              // margin-top: 8px;
            }
          }
        }
        .el-divider {
          margin: 12px 0;
        }
        .overview-bottom {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-gap: 10px;
          max-height: 45px;
          overflow-y: auto;
          .overview-bottom-item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer;
            .overview-bottom-item-name {
              font-size: 14px;
              font-weight: 400;
              color: #686767;
              margin-right: 30px;
            }
            .overview-bottom-item-count {
              font-size: 15px;
              font-weight: 400;
              color: #303133;
            }
          }
        }
      }
    }

    .portal {
      .portal-item {
        margin-bottom: 12px;
        .portal-item-content {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          border-radius: 11px;
          border: 1px solid #ebebeb;
          box-shadow: 0px 4px 4px #a7a7a740;
          padding: 6px 4px;
          cursor: pointer;
          .portal-item-img {
            width: 40px;
            height: 32px;
            border-radius: 5px;
            margin-right: 10px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .portal-item-name {
            font-size: 13px;
            font-weight: bold;
            color: #303133;
          }
        }
        
      }
    }

    .calendar {
      background-color: #f9fbfd;
      border-radius: 8px;
      ::v-deep .el-calendar__header {
        .el-calendar__title {
          font-size: 16px;
          font-weight: bold;
          color: #303133;
        }
      }
      ::v-deep .el-calendar__body {
        padding-bottom: 16px;
        .el-calendar-table {
          tr {
            td {
              border: none;
              .el-calendar-day {
                height: 48px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .calendar-day-content {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  flex-direction: column;
                  height: 100%;
                  width: 100%;
                
                  .is-selected-day {
                    background-color: #005dff;
                    color: #fff;
                    border-radius: 5px;
                    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.12);
                    padding: 5px;
                  }
                  .dot-container {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 5px;
                    .dot {
                      width: 5px;
                      height: 5px;
                      border-radius: 50%;
                      background-color: #00c951;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .calendar-more {
      display: flex;
      justify-content: center;
      align-items: center;
      
    }
    .schedule {
      .schedule-item {
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
        background-color: #f9fbfd;
        font-size: 13px;
      }
    }
  }
}
.mt-20 {
  margin-top: 6px;
}

.box-col {
  height: 100%;
}

.box-card {
  height: 100%;
  margin-bottom: 0;
  ::v-deep .el-card__header {
    padding: 10px 8px;
    font-weight: bold;
    color: #303133;
  }
  ::v-deep .el-card__body {
    padding: 12px;
  }
}

.notification-card {
  ::v-deep .el-card__body {
    padding-top: 0;
  }
  ::v-deep .el-tabs__item {
    font-size: 15px;
    font-weight: bold;
    color: #333;
  }
}

/* 通知公告样式 */
.notification-list {
  // margin-top: 16px;
  max-height: 344px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
}

.notification-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  &:last-child {
    border-bottom: none;
  }
}

.notification-dot {
  width: 10px;
  height: 10px;
  background-color: #a6ccff;;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 5px;
  flex-shrink: 0;
}

.notification-content {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  color: #333;
  &:hover {
    color: #1890ff;
  }
}

.notification-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.notification-title {
  font-size: 15px;
  font-weight: 500;
  // color: #333;
  margin-right: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  max-width: 200px;

}

.notification-info {
  font-size: 12px;
  // color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-text {
  font-size: 14px;
  // color: #333;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-images {
  margin-top: 8px;
}

.image-url {
  font-size: 12px;
  color: #1890ff;
  cursor: pointer;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  &:hover {
    text-decoration: underline;
  }
}

.notification-date {
  font-size: 13px;
  // color: #333;
  margin-left: 12px;
  flex-shrink: 0;
}

.notification-more {
  text-align: right;
  margin-top: 12px;
  font-size: 15px;
  color: #1890ff;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
</style>