|
|
@@ -0,0 +1,838 @@
|
|
|
+<template>
|
|
|
+ <div class="home-container">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <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">
|
|
|
+ <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>
|
|
|
+ <!-- <i :class="item.icon || 'el-icon-s-opportunity'"></i> -->
|
|
|
+ <img :src="item.icon || '~@/assets/home/commonIcon/icon_0.svg'" alt="">
|
|
|
+ </div>
|
|
|
+ <div>{{ item.name }}</div>
|
|
|
+ <!-- </div> -->
|
|
|
+ </div>
|
|
|
+ </vuedraggable>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20" class="mt-20">
|
|
|
+ <el-col :span="18">
|
|
|
+ <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/my-project.svg" alt=""></div>
|
|
|
+ <div class="overview-top-content">
|
|
|
+ <div class="overview-top-content-name">我的项目</div>
|
|
|
+ <div class="overview-top-content-count">123</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <div class="overview-bottom">
|
|
|
+ <div class="overview-bottom-item">
|
|
|
+ <div class="overview-bottom-item-name">实施项目</div>
|
|
|
+ <div class="overview-bottom-item-count">123</div>
|
|
|
+ </div>
|
|
|
+ <div class="overview-bottom-item">
|
|
|
+ <div class="overview-bottom-item-name">开发项目</div>
|
|
|
+ <div class="overview-bottom-item-count">123</div>
|
|
|
+ </div>
|
|
|
+ <div class="overview-bottom-item">
|
|
|
+ <div class="overview-bottom-item-name">测试项目</div>
|
|
|
+ <div class="overview-bottom-item-count">123</div>
|
|
|
+ </div>
|
|
|
+ <div class="overview-bottom-item">
|
|
|
+ <div class="overview-bottom-item-name">研发项目</div>
|
|
|
+ <div class="overview-bottom-item-count">123</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/my-project.svg" alt=""></div>
|
|
|
+ <div class="overview-top-content">
|
|
|
+ <div class="overview-top-content-name">我的工单</div>
|
|
|
+ <div class="overview-top-content-count">123</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <div class="overview-bottom">
|
|
|
+ <div class="overview-bottom-item">
|
|
|
+ <div class="overview-bottom-item-name">运维工单</div>
|
|
|
+ <div class="overview-bottom-item-count">123</div>
|
|
|
+ </div>
|
|
|
+ <div class="overview-bottom-item">
|
|
|
+ <div class="overview-bottom-item-name">生产工单</div>
|
|
|
+ <div class="overview-bottom-item-count">123</div>
|
|
|
+ </div>
|
|
|
+ <div class="overview-bottom-item">
|
|
|
+ <div class="overview-bottom-item-name">质检工单</div>
|
|
|
+ <div class="overview-bottom-item-count">123</div>
|
|
|
+ </div>
|
|
|
+ <div class="overview-bottom-item">
|
|
|
+ <div class="overview-bottom-item-name">盘点工单</div>
|
|
|
+ <div class="overview-bottom-item-count">123</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/my-project.svg" alt=""></div>
|
|
|
+ <div class="overview-top-content">
|
|
|
+ <div class="overview-top-content-name">我的任务</div>
|
|
|
+ <div class="overview-top-content-count">123</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <div class="overview-bottom">
|
|
|
+ <div class="overview-bottom-item">
|
|
|
+ <div class="overview-bottom-item-name">项目任务</div>
|
|
|
+ <div class="overview-bottom-item-count">123</div>
|
|
|
+ </div>
|
|
|
+ <div class="overview-bottom-item">
|
|
|
+ <div class="overview-bottom-item-name">生产任务</div>
|
|
|
+ <div class="overview-bottom-item-count">123</div>
|
|
|
+ </div>
|
|
|
+ <div class="overview-bottom-item">
|
|
|
+ <div class="overview-bottom-item-name">质检任务</div>
|
|
|
+ <div class="overview-bottom-item-count">123</div>
|
|
|
+ </div>
|
|
|
+ <div class="overview-bottom-item">
|
|
|
+ <div class="overview-bottom-item-name">盘点任务</div>
|
|
|
+ <div class="overview-bottom-item-count">123</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>统一门户</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-content">
|
|
|
+ <div class="portal">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12" v-for="item in portals" :key="item.name" class="portal-item">
|
|
|
+ <div class="portal-item-content">
|
|
|
+ <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="20" class="mt-20">
|
|
|
+ <el-col :span="18">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <!-- <div slot="header" class="clearfix">
|
|
|
+ <span>通知公告</span>
|
|
|
+ <span style="float: right; padding: 3px 0">
|
|
|
+ <i class="el-icon-edit"></i>
|
|
|
+ <i class="el-icon-setting"></i>
|
|
|
+ </span>
|
|
|
+ </div> -->
|
|
|
+ <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 class="notification-list">
|
|
|
+ <div v-for="(item, index) in currentNotifications" :key="index" class="notification-item">
|
|
|
+ <div class="notification-dot"></div>
|
|
|
+ <div class="notification-content">
|
|
|
+ <div class="notification-header">
|
|
|
+ <div class="notification-title">{{ item.title }}</div>
|
|
|
+ <div class="notification-text">{{ item.content }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="notification-info">{{ item.info }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="notification-date">{{ item.date }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="notification-more" @click="loadMoreNotifications">
|
|
|
+ 更多......
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>工作日历</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-content">
|
|
|
+ <el-calendar class="calendar" v-model="currentDate" :range="calendarRange">
|
|
|
+ <template
|
|
|
+ slot="dateCell"
|
|
|
+ slot-scope="{date, data}">
|
|
|
+ <div class="calendar-day-content">
|
|
|
+ <div :class="data.isSelected ? 'is-selected-day' : ''">{{ data.day.split('-')[2] }} </div>
|
|
|
+ <div class="dot-container"><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">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="schedule-item-time">
|
|
|
+ 09:00-10:00
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <div class="schedule-item-name">
|
|
|
+ 出差申请
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="schedule-item">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="schedule-item-time">
|
|
|
+ 10:00-11:00
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <div class="schedule-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>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ projectsPageAPI,
|
|
|
+ projectsTaskPageAPI,
|
|
|
+ userResourceDeleteAPI,
|
|
|
+ userResourceListAPI,
|
|
|
+ getList
|
|
|
+ } from '@/api/home';
|
|
|
+import vuedraggable from 'vuedraggable';
|
|
|
+import commonDialog from '@/views/home/common-dialog.vue';
|
|
|
+export default {
|
|
|
+ name: 'HomePage',
|
|
|
+ components: {
|
|
|
+ vuedraggable,
|
|
|
+ commonDialog
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeMenu: 'workbench',
|
|
|
+ currentDate: new Date(),
|
|
|
+ calendarRange: [],
|
|
|
+ commonFunctions: [
|
|
|
+ { name: '出差申请', icon: 'el-icon-plane' },
|
|
|
+ { name: '报销申请', icon: 'el-icon-document' },
|
|
|
+ { name: '请假申请', icon: 'el-icon-time' },
|
|
|
+ { name: '加班申请', icon: 'el-icon-clock' },
|
|
|
+ { name: '日报', icon: 'el-icon-date' },
|
|
|
+ { name: '周报', icon: 'el-icon-date' },
|
|
|
+ { name: '月报', icon: 'el-icon-date' },
|
|
|
+ { name: '出差申请1', icon: 'el-icon-plane' },
|
|
|
+ { name: '报销申请2', icon: 'el-icon-document' },
|
|
|
+ { name: '请假申请3', icon: 'el-icon-time' },
|
|
|
+ { name: '加班申请4', icon: 'el-icon-clock' },
|
|
|
+ { name: '日报5', icon: 'el-icon-date' },
|
|
|
+ { name: '周报6', icon: 'el-icon-date' },
|
|
|
+ { name: '月报7', icon: 'el-icon-date' }
|
|
|
+ ],
|
|
|
+ projectData: [
|
|
|
+ { name: '实施项目', value: 30 },
|
|
|
+ { name: '开发项目', value: 30 },
|
|
|
+ { name: '测试项目', value: 30 },
|
|
|
+ { name: '研发项目', value: 30 },
|
|
|
+ { name: '运维工单', value: 30 },
|
|
|
+ { name: '生产工单', value: 30 },
|
|
|
+ { name: '质检工单', value: 30 },
|
|
|
+ { name: '盘点工单', value: 30 }
|
|
|
+ ],
|
|
|
+ orderData: [
|
|
|
+ { name: '运维工单', value: 30 },
|
|
|
+ { name: '生产工单', value: 30 },
|
|
|
+ { name: '质检工单', value: 30 },
|
|
|
+ { name: '盘点工单', value: 30 }
|
|
|
+ ],
|
|
|
+ taskData: [
|
|
|
+ { name: '项目任务', value: 30 },
|
|
|
+ { name: '生产任务', value: 30 },
|
|
|
+ { name: '质检任务', value: 30 },
|
|
|
+ { name: '盘点任务', value: 30 }
|
|
|
+ ],
|
|
|
+ notifications: [
|
|
|
+ {
|
|
|
+ title: '关于门户界面升级的通知公告',
|
|
|
+ info: '发文机关:总经办 联系人:张三',
|
|
|
+ date: '2023-09-09'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '关于门户界面升级的通知公告',
|
|
|
+ info: '发文机关:总经办 联系人:张三',
|
|
|
+ date: '2023-09-09'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '关于门户界面升级的通知公告',
|
|
|
+ info: '发文机关:总经办 联系人:张三',
|
|
|
+ date: '2023-09-09'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '关于门户界面升级的通知公告',
|
|
|
+ info: '发文机关:总经办 联系人:张三',
|
|
|
+ date: '2023-09-09'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ activeTab: 'notice',
|
|
|
+ notifications: {
|
|
|
+ notice: [
|
|
|
+ {
|
|
|
+ title: '关于门户界面升级的通知公告',
|
|
|
+ info: '发文机关:总经办 拟稿人:张三',
|
|
|
+ content: '连日来，外交部和中国民航局全力协调，紧急派出航班协助滞留中东地区中国旅客回国。外交部领事保护中心建议……',
|
|
|
+ date: '2023-03-09'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '关于门户界面升级的通知公告',
|
|
|
+ info: '发文机关:总经办 拟稿人:张三',
|
|
|
+ content: '连日来，外交部和中国民航局全力协调，紧急派出航班协助滞留中东地区中国旅客回国。外交部领事保护中心建议……',
|
|
|
+ date: '2023-03-09'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '关于门户界面升级的通知公告',
|
|
|
+ info: '发文机关:总经办 拟稿人:张三',
|
|
|
+ content: '连日来，外交部和中国民航局全力协调，紧急派出航班协助滞留中东地区中国旅客回国。外交部领事保护中心建议……',
|
|
|
+ date: '2023-03-09'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '关于门户界面升级的通知公告',
|
|
|
+ info: '发文机关:总经办 拟稿人:张三',
|
|
|
+ content: '连日来，外交部和中国民航局全力协调，紧急派出航班协助滞留中东地区中国旅客回国。外交部领事保护中心建议……',
|
|
|
+ date: '2023-03-09'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ industry: [
|
|
|
+ {
|
|
|
+ title: '行业发展趋势分析',
|
|
|
+ info: '来源:行业协会 发布人:李四',
|
|
|
+ content: '近年来，人工智能技术在各行业的应用日益广泛，为企业数字化转型提供了强大动力……',
|
|
|
+ date: '2023-03-08'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '市场调研报告',
|
|
|
+ info: '来源:市场研究机构 发布人:王五',
|
|
|
+ content: '根据最新市场调研数据显示，2023年上半年市场需求呈现稳步增长趋势……',
|
|
|
+ date: '2023-03-07'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ system: [
|
|
|
+ {
|
|
|
+ title: '系统升级通知',
|
|
|
+ info: '发布人:系统管理员',
|
|
|
+ content: '系统将于今晚23:00-次日凌晨2:00进行升级维护，期间系统可能暂时无法访问，请提前做好准备。',
|
|
|
+ date: '2023-03-06'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '数据备份通知',
|
|
|
+ info: '发布人:系统管理员',
|
|
|
+ content: '系统已完成本月数据备份，备份文件已存储至安全位置。',
|
|
|
+ date: '2023-03-01'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 4,
|
|
|
+ portals: [],
|
|
|
+ schedules: [
|
|
|
+ { time: '10:00-12:00', content: '研发项目"产品启动会"' },
|
|
|
+ { time: '10:00-12:00', content: '**工单' },
|
|
|
+ { time: '10:00-12:00', content: '**工单' }
|
|
|
+ ],
|
|
|
+ calendarShowMore: false,
|
|
|
+ isDelFlag: false,
|
|
|
+ commonDialogFlag: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ currentNotifications() {
|
|
|
+ const notifications = this.notifications[this.activeTab] || [];
|
|
|
+ const start = (this.currentPage - 1) * this.pageSize;
|
|
|
+ const end = start + this.pageSize;
|
|
|
+ return notifications.slice(0, end);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.calendarRange = this.getWeekRange();
|
|
|
+ this.getPortalsList();
|
|
|
+ this.getCommonFunctionsList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleAdd() {
|
|
|
+ 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;
|
|
|
+ this.handelRouterTo(urlPath);
|
|
|
+ },
|
|
|
+ async handleCommonListDel(item, index) {
|
|
|
+ await userResourceDeleteAPI([item.id]);
|
|
|
+ this.commonFunctions.splice(index, 1);
|
|
|
+ },
|
|
|
+ handelRouterTo(path) {
|
|
|
+ window.history.pushState(null, '', path);
|
|
|
+ },
|
|
|
+ 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 = [];
|
|
|
+ } else {
|
|
|
+ this.calendarRange = this.getWeekRange();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleTabClick() {
|
|
|
+ // 切换标签页时重置页码
|
|
|
+ this.currentPage = 1;
|
|
|
+ },
|
|
|
+ loadMoreNotifications() {
|
|
|
+ // 加载更多通知（增加页码）
|
|
|
+ this.currentPage++;
|
|
|
+ },
|
|
|
+ // 获取当天所在周的范围，周一开头
|
|
|
+ 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 {
|
|
|
+ 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;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ margin: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: #f0f2f5;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease-in-out;
|
|
|
+ &:hover {
|
|
|
+ background-color: #e4e7ed;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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: 20px;
|
|
|
+ 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: 70px;
|
|
|
+ height: 70px;
|
|
|
+ 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: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #525252;;
|
|
|
+ }
|
|
|
+ .overview-top-content-count {
|
|
|
+ font-size: 35px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #2D80EE;
|
|
|
+ line-height: 42px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-divider {
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+ .overview-bottom {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ grid-gap: 10px;
|
|
|
+ .overview-bottom-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ .overview-bottom-item-name {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #7a7a7a;
|
|
|
+ margin-right: 30px;
|
|
|
+ }
|
|
|
+ .overview-bottom-item-count {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .portal {
|
|
|
+ .portal-item {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .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: 10px 24px 10px 24px;
|
|
|
+ .portal-item-img {
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .portal-item-name {
|
|
|
+ font-size: 14px;
|
|
|
+ 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: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 通知公告样式 */
|
|
|
+.notification-list {
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.notification-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12px 0;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.notification-dot {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ background-color: #1890ff;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 12px;
|
|
|
+ margin-top: 5px;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.notification-content {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.notification-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.notification-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ margin-right: 12px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.notification-info {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.notification-text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1.4;
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.notification-date {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ margin-left: 12px;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.notification-more {
|
|
|
+ text-align: right;
|
|
|
+ margin-top: 12px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #1890ff;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
