DigitalHuman

wujingjing

2025-04-07 457cc6cf166d3b6c22be4f78c1db8802a7fbb4c7

 src/views/project/ch/workspace/situation/index.vue

@@ -1,20 +1,23 @@
<template>
   <div class="workspace-container h-full">
      <!-- 左侧主要内容区 -->
      <div class="flex flex-col gap-4 h-full overflow-hidden">
      <div class="flex flex-col h-full overflow-hidden" :style="{ gap: layoutGap }">
         <!-- 工作概览 -->
         <div class="overview-section mb-4 flex-0">
         <div class="overview-section flex-0 bg-white border border-solid border-white rounded-lg p-[20px] h-[150px]">
            <div class="section-header mb-4">
               <h3 class="font-bold">工作概览</h3>
            </div>
            <div class="overview-cards">
               <!-- 管理人数 -->
               <div class="overview-card bg-blue-50 rounded-lg p-4 flex items-center">
               <div class="overview-card bg-[#dee8ff] rounded-lg p-4 flex items-center">
                  <i class="i-carbon:user-multiple text-3xl text-blue-500 mr-4"></i>
                  <div>
                     <div class="text-3xl font-bold text-blue-500">3</div>
                     <div class="text-3xl font-bold text-[#4f85f6]">3</div>
                     <div class="text-gray-600">管理人数</div>
                  </div>
               </div>
               <!-- 待办事项 -->
               <div class="overview-card bg-red-50 rounded-lg p-4 flex items-center">
               <div class="overview-card bg-[#faeaed] rounded-lg p-4 flex items-center">
                  <i class="i-carbon:task text-3xl text-red-500 mr-4"></i>
                  <div>
                     <div class="text-3xl font-bold text-red-500">3</div>
@@ -22,7 +25,7 @@
                  </div>
               </div>
               <!-- 预警事项 -->
               <div class="overview-card bg-cyan-50 rounded-lg p-4 flex items-center">
               <div class="overview-card bg-[#dbf2f8] rounded-lg p-4 flex items-center">
                  <i class="i-carbon:warning text-3xl text-cyan-500 mr-4"></i>
                  <div>
                     <div class="text-3xl font-bold text-cyan-500">3</div>
@@ -32,9 +35,9 @@
            </div>
         </div>

         <div class="flex flex-col gap-4 flex-auto">
         <div class="flex flex-col flex-auto" :style="{ gap: layoutGap }">
            <!-- 待办事项和我发起的表格 -->
            <div class="flex mb-4 h-1/2 gap-4">
            <div class="flex h-1/2" :style="{ gap: layoutGap }">
               <!-- 待办事项 -->
               <div class="bg-white rounded-lg p-4 shadow-sm flex flex-col w-1/2">
                  <div class="flex justify-between items-center mb-4 flex-0">
@@ -126,25 +129,33 @@
         </div>
      </div>
      <!-- 右侧边栏 -->
      <div class="sidebar h-full overflow-hidden">
      <div class="sidebar h-full overflow-hidden flex flex-col" :style="{ gap: layoutGap }">
         <!-- 个人信息 -->
         <!-- <div class="profile-card">
            <div class="profile-header">
               <div class="avatar-placeholder">
         <div class="profile-card p-[20px] bg-white border border-solid border-white rounded-lg h-[150px] flex-0">
            <div class="section-header mb-4">
               <h3>个人信息</h3>
            </div>
            <div class="profile-header flex gap-4">
               <!-- <div class="avatar-placeholder">
                  <i class="i-carbon:user text-3xl text-gray-400"></i>
               </div> -->
               <div class="profile-info flex flex-col gap-2">
                  <div class="flex items-center" v-for="item in 3" :key="item">
                     <span class="mr-1">用户名：</span>
                     <span>wjj</span>
                  </div>
               </div>
               <div class="profile-info">
                  <h3>林清越</h3>
                  <div class="tags">
                     <el-tag size="small" type="info">教学主任</el-tag>
                     <el-tag size="small" type="info">海淀校区</el-tag>
                    <div class="profile-info flex flex-col gap-2">
                  <div class="flex items-center" v-for="item in 3" :key="item">
                     <span class="mr-1">用户名：</span>
                     <span>wjj</span>
                  </div>
               </div>
            </div>
         </div> -->
         </div>

         <!-- 统计图表 -->
         <div class="chart-container">
         <div class="chart-container p-[20px] h-1/2 overflow-hidden">
            <div class="chart-header">
               <h3>统计图表</h3>
               <span class="subtitle">国别</span>
@@ -153,12 +164,14 @@
         </div>

         <!-- 日历 -->
         <div class="calendar-container">
         <div class="calendar-container p-[20px] h-1/2 overflow-hidden">
            <div class="calendar-header">
               <h3>时间</h3>
					
               <div class="flex items-center gap-2">
                  <el-date-picker v-model="currentMonth" type="month" format="YYYY年MM月" :placeholder="'选择月份'" size="small" />
               </div>
            </div>
            <div class="calendar-notice">您今日无待办</div>
            <div class="calendar-notice mb-0.5">您今日无待办</div>
            <el-calendar v-model="currentDate">
               <template #dateCell="{ data }">
                  <div class="custom-calendar-cell">
@@ -174,8 +187,9 @@

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import { computed, onMounted, ref } from 'vue';

const layoutGap = '10px';
interface CalendarData {
   day: string;
   [key: string]: any;
@@ -184,7 +198,11 @@
// 状态变量
const todoType = ref('todo');
const initiatedType = ref('initiated');
const currentDate = ref(new Date('2021-12-06'));
const currentDate = ref(new Date('2025-04-06'));
const currentMonth = computed(() => {
   const date = currentDate.value;
   return date instanceof Date ? date : new Date(date);
});
const chartRef = ref<HTMLElement>();

// 示例数据 - 增加更多数据
@@ -304,7 +322,7 @@
.workspace-container {
   display: grid;
   grid-template-columns: 1fr 300px;
   gap: 20px;
   gap: v-bind(layoutGap);
   padding: 20px;
   background-color: #f5f7fa;
}
@@ -356,7 +374,7 @@
   background: none;

   .el-calendar__header {
      padding: 0;
      display: none;
   }

   .el-calendar__body {
@@ -402,7 +420,6 @@
   color: #fa8c16;
   padding: 8px 12px;
   border-radius: 4px;
   margin-bottom: 12px;
   font-size: 14px;
}

@@ -416,14 +433,13 @@
   justify-content: center;
}

:deep(.el-calendar-table .el-calendar-day){
    --el-calendar-cell-width:40px;
:deep(.el-calendar-table .el-calendar-day) {
   --el-calendar-cell-width: 10px;
}

.chart-container {
   background: white;
   border-radius: 8px;
   padding: 20px;

   .chart {
      height: 300px;
@@ -441,4 +457,35 @@
      }
   }
}

.calendar-container {
   background: white;
   border-radius: 8px;

   .calendar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      h3 {
         font-size: 16px;
         font-weight: 500;
         margin: 0;
      }
   }
}

:deep(.el-date-picker) {
   --el-input-width: 120px;
}

.section-header {
   h3 {
      font-size: 16px;
      // font-weight: 500;
      // margin: 0;
      // color: var(--el-text-color-primary);
   }
}
</style>