修改日程视图页面和日程视图详情页面

apps/web-ele/src/views/schedule/detail/components/bidding.vue

@@ -68,9 +68,13 @@ const [StationStrategyTable] = useVbenVxeGrid({
     <!-- 页面标题和操作区 -->
     <div class="task-header">
       <div class="left">
-        <h3>我方油价：未来路加油站</h3>
+        <div style="font-size: 14px; font-weight: 400">
+          <span>我方油价：</span>
+          <span style="font-size: 14px; font-weight: 500">未来路加油站</span>
+        </div>
         <div class="price-survey-info">
-          <span class="survey-date">调查时间：2025-10-29</span>
+          <span>调查时间：</span>
+          <span style="font-weight: 500">2025-10-29</span>
         </div>
       </div>
       <div class="right">
@@ -116,9 +120,8 @@ const [StationStrategyTable] = useVbenVxeGrid({
 }
 
 .price-survey-info {
-  display: flex;
-  gap: 20px;
   font-size: 14px;
+  font-weight: 400;
   color: #666;
 }
 

apps/web-ele/src/views/schedule/detail/components/comment.vue

@@ -1,17 +1,18 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
-import { ElRate, ElInput, ElSelect, ElOption, ElButton, ElIcon, ElUpload, ElMessage, ElImageViewer } from 'element-plus';
+import {
+  ElRate,
+  ElInput,
+  ElSelect,
+  ElOption,
+  ElButton,
+  ElIcon,
+  ElUpload,
+  ElMessage,
+  ElImageViewer,
+} from 'element-plus';
 import { Camera, Plus, Message } from '@element-plus/icons-vue';
-
-// 评分等级映射
-const ratingLevelMap = {
-  1: '差',
-  2: '较差',
-  3: '一般',
-  4: '良好',
-  5: '优秀',
-};
-
+import ConsultComponent from './consult.vue';
 // 模拟评论数据
 const comments = ref([
   {
@@ -48,20 +49,16 @@ const comments = ref([
     replies: [],
   },
 ]);
-
 // 评分
 const rating = ref(5);
 // 评价内容
 const commentContent = ref('');
-// 抄送人
-const ccPerson = ref('');
 // 评论图片
 const commentImages = ref<any[]>([]);
 
 // 图片预览相关
 const previewVisible = ref(false);
 const previewImages = ref<string[]>([]);
-
 // 处理评论图片上传
 const handleCommentImageUpload = (options: any) => {
   // 模拟上传成功处理
@@ -86,68 +83,10 @@ const handleCommentImagePreview = (file: any) => {
   // TODO: 实现图片预览功能
 };
 
-// 评论提交
-const handleCommentSubmit = () => {
-  if (!commentContent.value.trim() && commentImages.value.length === 0) {
-    ElMessage.warning('请输入评论内容或上传图片');
-    return;
-  }
-  console.log('提交评论', { rating: rating.value, content: commentContent.value, ccPerson: ccPerson.value, images: commentImages.value });
-};
-
-// 切换回复输入框
-const toggleReply = (comment: any) => {
-  comment.showReply = !comment.showReply;
-};
-
-// 取消回复
-const cancelReply = (comment: any) => {
-  comment.showReply = false;
-  comment.replyContent = '';
-};
-
-// 提交回复
-const submitReply = (comment: any) => {
-  if (!comment.replyContent.trim()) {
-    ElMessage.warning('请输入回复内容');
-    return;
-  }
-  
-  // 模拟提交回复
-  const newReply = {
-    username: '当前用户',
-    content: comment.replyContent,
-    createdAt: new Date().toLocaleString(),
-  };
-  
-  // 添加到回复列表
-  if (!comment.replies) {
-    comment.replies = [];
-  }
-  comment.replies.push(newReply);
-  
-  // 清空回复内容并隐藏回复框
-  comment.replyContent = '';
-  comment.showReply = false;
-  
-  ElMessage.success('回复提交成功');
-};
-
-// 图片预览
-const previewImage = (imageUrl: string) => {
-  previewImages.value = [imageUrl];
-  previewVisible.value = true;
-};
-
 // 关闭图片预览
 const closePreview = () => {
   previewVisible.value = false;
 };
-
-// 获取评分等级
-const getRatingLevel = (rating: number) => {
-  return ratingLevelMap[rating as keyof typeof ratingLevelMap] || '';
-};
 </script>
 
 <template>
@@ -156,14 +95,28 @@ const getRatingLevel = (rating: number) => {
     <div class="comment-form">
       <div class="form-header">
         <div class="rating-section">
-          <span class="rating-text">总体评价：</span>
-          <ElRate v-model="rating" class="rating-stars" />
+          <span class="rating-text">评价：</span>
+          <el-rate
+            v-model="rating"
+            :texts="['1分', '2分', '3分', '4分', '5分']"
+            show-text
+          />
         </div>
       </div>
       <div class="form-content">
         <div class="input-section">
-          <!-- 使用ElUpload组件实现多图片上传 -->
-          <div class="upload-section">
+          <div class="rating-section">
+            <span class="rating-text">评价：</span>
+            <ElInput
+              v-model="commentContent"
+              type="textarea"
+              :rows="2"
+              placeholder="请对执行任务的情况进行点评，您的点评会帮助执行人更好的完善工作哦~"
+              class="comment-input"
+            />
+          </div>
+          <div class="rating-section">
+            <span class="rating-text">照片：</span>
             <ElUpload
               v-model:file-list="commentImages"
               action="#"
@@ -186,96 +139,15 @@ const getRatingLevel = (rating: number) => {
               </div>
             </ElUpload>
           </div>
-          <ElInput
-            v-model="commentContent"
-            type="textarea"
-            :rows="2"
-            placeholder="请对执行任务的情况进行点评，您的点评会帮助执行人更好的完善工作哦~"
-            class="comment-input"
-          />
-          <div class="form-footer">
-            <div class="footer-left">
-              <ElSelect v-model="ccPerson" placeholder="请选择抄送人" class="cc-select">
-                <ElOption label="测试抄送人" value="test" />
-              </ElSelect>
-              <ElButton type="primary" size="small" class="comment-btn" @click="handleCommentSubmit">
-                评论
-              </ElButton>
-            </div>
-          </div>
         </div>
       </div>
+      <el-button style="margin-top: 8px" type="primary">提交</el-button>
     </div>
-
-    <!-- 评论列表 -->
-    <div class="comment-list">
-      <div v-for="comment in comments" :key="comment.id" class="comment-item">
-        <div class="comment-header">
-          <div class="username-section">
-            <span class="username">{{ comment.username }}</span>
-            <span class="department">({{ comment.department }})</span>
-            <div class="rating-section">
-              <ElRate v-model="comment.rating" disabled class="rating-stars" />
-              <span class="rating-level">{{ getRatingLevel(comment.rating) }}</span>
-            </div>
-          </div>
-        </div>
-        <div class="comment-content">
-          {{ comment.content }}
-        </div>
-        <!-- 评论图片 -->
-        <div v-if="comment.images && comment.images.length > 0" class="comment-images">
-          <img
-            v-for="(image, index) in comment.images"
-            :key="index"
-            :src="image"
-            alt="评论图片"
-            class="comment-image"
-            @click="previewImage(image)"
-          />
-        </div>
-        <!-- 评论时间 -->
-        <div class="comment-time">{{ comment.createdAt }}</div>
-        <!-- 评论操作 -->
-        <div class="comment-footer">
-          <div class="comment-actions">
-            <ElIcon class="reply-icon">
-              <Message class="h-4 w-4" />
-            </ElIcon>
-            <span class="reply-btn" @click="toggleReply(comment)">回复</span>
-          </div>
-        </div>
-        
-        <!-- 回复输入框 -->
-        <div v-if="comment.showReply" class="reply-form">
-          <ElInput
-            v-model="comment.replyContent"
-            type="textarea"
-            :rows="2"
-            placeholder="请输入回复内容"
-            class="reply-input"
-          />
-          <div class="reply-footer">
-            <ElButton type="default" size="small" @click="cancelReply(comment)">取消</ElButton>
-            <ElButton type="primary" size="small" @click="submitReply(comment)">提交</ElButton>
-          </div>
-        </div>
-        
-        <!-- 回复信息 -->
-        <div v-if="comment.replies && comment.replies.length > 0" class="reply-list">
-          <div v-for="(reply, index) in comment.replies" :key="index" class="reply-item">
-            <div class="reply-header">
-              <span class="reply-username">{{ reply.username }}</span>
-              <span v-if="reply.department" class="reply-department">({{ reply.department }})</span>
-            </div>
-            <div class="reply-content">{{ reply.content }}</div>
-            <div class="reply-time">{{ reply.createdAt }}</div>
-          </div>
-        </div>
-      </div>
+    <div>
+      <ConsultComponent />
     </div>
   </div>
-  
+
   <!-- 图片预览组件 -->
   <ElImageViewer
     v-if="previewVisible"
@@ -292,7 +164,7 @@ const getRatingLevel = (rating: number) => {
   .comment-form {
     margin-bottom: 24px;
     padding: 16px 0;
-    
+
     .form-header {
       margin-bottom: 12px;
     }
@@ -300,13 +172,14 @@ const getRatingLevel = (rating: number) => {
     .rating-section {
       display: flex;
       align-items: center;
-      
+
       .rating-text {
         color: var(--text-color-secondary);
         font-size: 14px;
         margin-right: 8px;
+        white-space: nowrap;
       }
-      
+
       .rating-stars {
         margin-right: 0;
       }
@@ -315,40 +188,40 @@ const getRatingLevel = (rating: number) => {
     .form-content {
       .input-section {
         width: 100%;
-        
+
         .upload-section {
           margin-bottom: 12px;
-          
+
           :deep(.el-upload--picture-card) {
             width: 60px;
             height: 60px;
           }
-          
+
           :deep(.el-upload-list--picture-card .el-upload-list__item) {
             width: 60px;
             height: 60px;
           }
         }
-        
+
         .comment-input {
           margin-bottom: 12px;
-          
+
           :deep(.el-textarea__inner) {
             border-radius: 4px;
             resize: none;
           }
         }
-        
+
         .form-footer {
           .footer-left {
             display: flex;
             align-items: center;
-            
+
             .cc-select {
               width: 200px;
               margin-right: 12px;
             }
-            
+
             .comment-btn {
               padding: 4px 12px;
             }
@@ -368,31 +241,31 @@ const getRatingLevel = (rating: number) => {
 
       .comment-header {
         margin-bottom: 8px;
-        
+
         .username-section {
           display: flex;
           align-items: center;
-          
+
           .username {
             font-weight: 500;
             color: var(--text-color-primary);
             margin-right: 8px;
           }
-          
+
           .department {
             color: var(--text-color-secondary);
             font-size: 13px;
             margin-right: 16px;
           }
-          
+
           .rating-section {
             display: flex;
             align-items: center;
-            
+
             .rating-stars {
               margin-right: 8px;
             }
-            
+
             .rating-level {
               color: #f7ba2a;
               font-size: 13px;
@@ -412,7 +285,7 @@ const getRatingLevel = (rating: number) => {
         display: flex;
         gap: 12px;
         margin-bottom: 12px;
-        
+
         .comment-image {
           width: 60px;
           height: 60px;
@@ -420,49 +293,49 @@ const getRatingLevel = (rating: number) => {
           object-fit: cover;
           cursor: pointer;
           transition: transform 0.2s;
-          
+
           &:hover {
             transform: scale(1.05);
           }
         }
       }
-      
+
       /* 评论时间样式 */
       .comment-time {
         font-size: 12px;
         color: #999999;
         margin-top: 8px;
       }
-      
+
       /* 评论操作样式 */
       .comment-footer {
         display: flex;
         justify-content: flex-start;
         align-items: center;
         margin-top: 4px;
-        
+
         .comment-actions {
           display: flex;
           align-items: center;
-          
+
           .reply-icon {
             margin-right: 4px;
             color: #409eff;
             font-size: 12px;
           }
-          
+
           .reply-btn {
             color: #409eff;
             font-size: 12px;
             cursor: pointer;
-            
+
             &:hover {
               text-decoration: underline;
             }
           }
         }
       }
-      
+
       /* 回复表单样式 */
       .reply-form {
         margin-top: 12px;
@@ -470,62 +343,62 @@ const getRatingLevel = (rating: number) => {
         background-color: var(--bg-color-light);
         border-radius: 4px;
         border: 1px solid var(--border-color);
-        
+
         .reply-input {
           margin-bottom: 12px;
-          
+
           :deep(.el-textarea__inner) {
             border-radius: 4px;
             resize: none;
           }
         }
-        
+
         .reply-footer {
           display: flex;
           justify-content: flex-end;
           gap: 8px;
-          
+
           :deep(.el-button) {
             padding: 4px 12px;
           }
         }
       }
-      
+
       /* 回复列表样式 */
       .reply-list {
         margin-top: 12px;
         margin-left: 40px;
-        
+
         .reply-item {
           margin-bottom: 12px;
           padding: 8px 12px;
           background-color: var(--bg-color-light);
           border-radius: 4px;
           border-left: 3px solid #409eff;
-          
+
           .reply-header {
             margin-bottom: 4px;
-            
+
             .reply-username {
               font-weight: 500;
               color: var(--text-color-primary);
               font-size: 13px;
               margin-right: 4px;
             }
-            
+
             .reply-department {
               color: var(--text-color-secondary);
               font-size: 13px;
             }
           }
-          
+
           .reply-content {
             color: var(--text-color-primary);
             font-size: 13px;
             line-height: 1.4;
             margin-bottom: 4px;
           }
-          
+
           .reply-time {
             font-size: 12px;
             color: #999999;

apps/web-ele/src/views/schedule/detail/components/consult.vue

@@ -3,14 +3,42 @@ import { ref } from 'vue';
 import { ElTabs, ElTabPane } from 'element-plus';
 
 // 当前选中的tab
-const activeTab = ref('read');
+const activeTab = ref('comment');
+//评论模拟数据
+const comments = ref([
+  {
+    name: '张三',
+    content:
+      '干的不错!12问题解决的很迅速干的不错问题解决的很迅速!干的不错，问题解决的很迅速!干的不错，问题解决的很迅速!',
+    time: '一天前',
+    child: [
+      {
+        name: '张三',
+        content: '谢谢站长支持！',
+      },
+    ],
+  },
+  {
+    name: '李四',
+    content:
+      '干的不错!12问题解决的很迅速干的不错问题解决的很迅速!干的不错，问题解决的很迅速!干的不错，问题解决的很迅速!',
+    time: '三天前',
+  },
+  {
+    name: '王五',
+  },
+]);
 
+const replyOpen = ref({}) as any;
+const toggleReply = (index: any) => {
+  replyOpen.value[index] = !replyOpen.value[index];
+};
 // 查阅统计数据
 const consultStats = ref({
   readCount: 2,
   unreadCount: 1,
   readers: ['东冬', '世鹏'],
-  unreaders: ['张三']
+  unreaders: ['张三'],
 });
 
 // 处理tab切换
@@ -28,32 +56,77 @@ const getLastTwoChars = (name: string) => {
   <div class="consult-container">
     <!-- Tabs切换 -->
     <ElTabs v-model="activeTab" @tab-change="handleTabChange" class="mb-4">
-      <ElTabPane 
-        :label="`${consultStats.readCount}人已阅`" 
-        name="read"
-      />
-      <ElTabPane 
-        :label="`${consultStats.unreadCount}人未阅`" 
-        name="unread"
-      />
+      <ElTabPane :label="'评论'" name="comment" />
+      <ElTabPane :label="`${consultStats.readCount}人已阅`" name="read" />
+      <ElTabPane :label="`${consultStats.unreadCount}人未阅`" name="unread" />
     </ElTabs>
-    
+
     <!-- 人员列表 -->
-    <div v-if="activeTab === 'read'" class="readers-list">
-      <div 
-        v-for="(reader, index) in consultStats.readers" 
+    <div v-if="activeTab === 'comment'" class="readers-list">
+      <div v-for="(item, index) in comments" :key="index" class="comment_item">
+        <div class="reader-item mb-2 mr-2" style="flex-shrink: 0">
+          {{ getLastTwoChars(item.name) }}
+        </div>
+        <div class="comment_content">
+          <span style="font-size: 15px; font-weight: 900">{{ item.name }}</span>
+          <div>{{ item.content }}</div>
+          <div>
+            <span style="color: #a4aab2">{{ item.time }}</span>
+            <span class="reply_btn" @click="toggleReply(index)">回复</span>
+          </div>
+          <div
+            v-if="item.child && item.child.length > 0"
+            style="
+              margin-left: 16px;
+              margin-top: 8px;
+              border-left: 2px solid #dcdfe6;
+              padding-left: 8px;
+            "
+          >
+            <div v-for="value in item.child">
+              <div>
+                <span>{{ value?.name }}：</span>
+                <span>{{ value?.content }}</span>
+              </div>
+            </div>
+          </div>
+          <div
+            style="margin-left: 16px; margin-top: 8px"
+            v-if="replyOpen[index]"
+          >
+            <el-input
+              maxlength="200"
+              style="width: 240px"
+              placeholder="请输入内容"
+              show-word-limit
+              type="textarea"
+            />
+            <div style="margin-top: 8px">
+              <el-button type="primary" size="small">提交</el-button>
+              <el-button size="small" @click="() => toggleReply(index)"
+                >收起</el-button
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else-if="activeTab === 'read'" class="readers-list">
+      <div
+        v-for="(reader, index) in consultStats.readers"
         :key="index"
-        class="reader-item mr-2 mb-2"
+        class="reader-item mb-2 mr-2"
       >
         {{ getLastTwoChars(reader) }}
       </div>
     </div>
-    
+
     <div v-else class="readers-list">
-      <div 
-        v-for="(unreader, index) in consultStats.unreaders" 
+      <div
+        v-for="(unreader, index) in consultStats.unreaders"
         :key="index"
-        class="reader-item mr-2 mb-2 unread"
+        class="reader-item unread mb-2 mr-2"
       >
         {{ getLastTwoChars(unreader) }}
       </div>
@@ -62,16 +135,43 @@ const getLastTwoChars = (name: string) => {
 </template>
 
 <style scoped lang="scss">
+.comment_item {
+  display: flex;
+  // align-items: center;
+  // justify-content: space-between;
+  width: 100%;
+  // padding: 8px 16px;
+  border-radius: 4px;
+  // background-color: #f5f7fa;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: #606266;
+
+  .comment_content {
+    margin-top: 6px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    .reply_btn {
+      float: right;
+      color: #409eff;
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
 .consult-container {
   width: 100%;
   padding: 16px 0;
   font-size: 14px;
-  
+
   .readers-list {
     display: flex;
     flex-wrap: wrap;
   }
-  
+
   .reader-item {
     display: flex;
     align-items: center;
@@ -85,16 +185,16 @@ const getLastTwoChars = (name: string) => {
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
-    
+
     &:hover {
       background-color: #66b1ff;
       transform: scale(1.1);
     }
-    
+
     &.unread {
       background-color: #dcdfe6;
       color: #606266;
-      
+
       &:hover {
         background-color: #e4e7ed;
       }

apps/web-ele/src/views/schedule/detail/components/weekly.vue

@@ -20,16 +20,16 @@ const weeklyData = ref({
   deadline: '2025-12-14 23:00:00',
   status: '规划完成',
   executor: '要智站务',
-  organization: '系统'
+  organization: '系统',
 });
 
 // 状态标签配置
 const statusConfig: any = {
-  '规划完成': { type: 'success', text: '规划完成' },
-  '待处理': { type: 'info', text: '待处理' },
-  '处理中': { type: 'warning', text: '处理中' },
-  '已完成': { type: 'success', text: '已完成' },
-  '已关闭': { type: 'danger', text: '已关闭' }
+  规划完成: { type: 'success', text: '规划完成' },
+  待处理: { type: 'info', text: '待处理' },
+  处理中: { type: 'warning', text: '处理中' },
+  已完成: { type: 'success', text: '已完成' },
+  已关闭: { type: 'danger', text: '已关闭' },
 };
 </script>
 
@@ -70,7 +70,10 @@ const statusConfig: any = {
         {{ weeklyData.remark || '-' }}
       </ElDescriptionsItem>
       <ElDescriptionsItem label="图片:" :span="4">
-        <div v-if="weeklyData.images && weeklyData.images.length > 0" class="weekly-images">
+        <div
+          v-if="weeklyData.images && weeklyData.images.length > 0"
+          class="weekly-images"
+        >
           <img
             v-for="(image, index) in weeklyData.images"
             :key="index"
@@ -110,10 +113,15 @@ const statusConfig: any = {
 
 .weekly-info {
   :deep(.el-descriptions__label) {
-    font-weight: 500;
+    font-size: 14px;
+    font-weight: 400;
     color: var(--text-color-secondary);
   }
-
+  :deep(.el-descriptions__content) {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-color-primary);
+  }
   :deep(.el-descriptions__content) {
     color: var(--text-color-primary);
   }

apps/web-ele/src/views/schedule/detail/index.vue

@@ -14,12 +14,13 @@ import BiddingComponent from './components/bidding.vue';
 import CheckComponent from './components/check.vue';
 // 引入检查项组件、评论组件和查阅组件
 import CommentComponent from './components/comment.vue';
-import ConsultComponent from './components/consult.vue';
+// import ConsultComponent from './components/consult.vue';
 import WeeklyComponent from './components/weekly.vue';
 
 // 模拟任务数据
 const taskData = ref({
   name: '未来路摄像头抓图AI检查',
+  username: '张三',
   status: '待处理',
   priority: '必做',
   description: '摄像头自动抓图进行AI检查',
@@ -31,6 +32,7 @@ const taskData = ref({
   taskOwner: '',
   frequency: '每天一次',
   creator: '系统',
+  suggestion: '暂无',
   images: [
     'https://picsum.photos/200/150?random=1',
     'https://picsum.photos/200/150?random=2',
@@ -125,40 +127,31 @@ const handleTransferTask = () => {
         </div>
       </div>
     </template>
+    <div>
+      <span style="font-size: 20px; font-weight: 400">运营异常-任务详情</span>
+    </div>
     <div class="boxdev">
       <div>
         <ElCard>
           <template #header>
-            <div class="flex items-center gap-6">
+            <div class="flex items-center gap-4">
               <div
-                style="width: 8px; height: 20px; background-color: #215acd"
+                style="width: 4px; height: 12px; background-color: #215acd"
               ></div>
-              <span class="text-lg font-bold text-gray-800">任务信息</span>
+              <span
+                class="text-lg font-bold text-gray-800"
+                style="font-size: 14px; font-weight: 600"
+                >任务信息</span
+              >
             </div>
           </template>
           <ElDescriptions class="task-info" :column="4">
-            <ElDescriptionsItem label="任务描述:" :span="4">
+            <ElDescriptionsItem label="任务描述:">
               {{ taskData.description }}
             </ElDescriptionsItem>
-            <ElDescriptionsItem label="标准指引:" :span="4">
+            <ElDescriptionsItem label="标准指引:">
               {{ taskData.standardGuide || '-' }}
             </ElDescriptionsItem>
-            <ElDescriptionsItem label="任务图片:" :span="4">
-              <div
-                v-if="taskData.images && taskData.images.length > 0"
-                class="task-images"
-              >
-                <img
-                  v-for="(image, index) in taskData.images"
-                  :key="index"
-                  :src="image"
-                  alt="任务图片"
-                  class="task-image"
-                  @click="previewImage(image)"
-                />
-              </div>
-              <span v-else>-</span>
-            </ElDescriptionsItem>
             <ElDescriptionsItem label="执行人:">
               {{ taskData.executor }}
             </ElDescriptionsItem>
@@ -177,105 +170,133 @@ const handleTransferTask = () => {
             <ElDescriptionsItem label="任务频率:">
               {{ taskData.frequency }}
             </ElDescriptionsItem>
-            <ElDescriptionsItem label="创建:">
+            <ElDescriptionsItem label="负责人:">
+              {{ taskData.username }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="创建:" :span="4">
               {{ taskData.creator }}
             </ElDescriptionsItem>
-            <!-- <ElDescriptionsItem :span="2" class="text-right">
-          <template #default>
-            <ElButton type="text" class="text-gray-500">收起 ↑</ElButton>
-          </template>
-        </ElDescriptionsItem> -->
+            <ElDescriptionsItem>
+              <div style="padding-left: 24px; margin-top: 10px">
+                <div>处理建议: {{ taskData.frequency }}</div>
+                <div>任务图片:</div>
+                <div
+                  v-if="taskData.images && taskData.images.length > 0"
+                  class="task-images"
+                >
+                  <img
+                    v-for="(image, index) in taskData.images"
+                    :key="index"
+                    :src="image"
+                    alt="任务图片"
+                    class="task-image"
+                    @click="previewImage(image)"
+                  />
+                </div>
+                <span v-else>-</span>
+              </div>
+            </ElDescriptionsItem>
           </ElDescriptions>
         </ElCard>
 
         <!--竞价-->
         <ElCard>
           <template #header>
-            <div class="flex items-center gap-6">
+            <div class="flex items-center gap-4">
               <div
-                style="width: 8px; height: 20px; background-color: #215acd"
+                style="width: 4px; height: 12px; background-color: #215acd"
               ></div>
-              <span class="text-lg font-bold text-gray-800">竞价信息</span>
+              <span
+                class="text-lg font-bold text-gray-800"
+                style="font-size: 14px; font-weight: 600"
+                >竞价信息</span
+              >
             </div>
           </template>
           <BiddingComponent />
         </ElCard>
 
         <!-- 周报信息 -->
-        <ElCard class="mt-4">
+        <ElCard>
           <template #header>
-            <div class="flex items-center gap-6">
+            <div class="flex items-center gap-4">
               <div
-                style="width: 8px; height: 20px; background-color: #215acd"
+                style="width: 4px; height: 12px; background-color: #215acd"
               ></div>
-              <span class="text-lg font-bold text-gray-800">周报信息</span>
+              <span
+                class="text-lg font-bold text-gray-800"
+                style="font-size: 14px; font-weight: 600"
+                >周报信息</span
+              >
             </div>
           </template>
           <WeeklyComponent />
         </ElCard>
 
         <!-- 处理信息组件 -->
-        <ElCard class="mt-4">
+        <ElCard>
           <template #header>
-            <div class="flex items-center gap-6">
+            <div class="flex items-center gap-4">
               <div
-                style="width: 8px; height: 20px; background-color: #215acd"
+                style="width: 4px; height: 12px; background-color: #215acd"
               ></div>
-              <span class="text-lg font-bold text-gray-800">处理信息</span>
+              <span
+                class="text-lg font-bold text-gray-800"
+                style="font-size: 14px; font-weight: 600"
+                >处理信息</span
+              >
             </div>
           </template>
           <ElDescriptions class="task-info" :column="4">
+            <ElDescriptionsItem label="处理情况:">
+              {{ taskData.handleInfo.handleStatus || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="处理时间:">
+              {{ taskData.handleInfo.handleTime || '-' }}
+            </ElDescriptionsItem>
             <ElDescriptionsItem label="处理状态:" :span="4">
-              <ElTag
-                :type="
-                  statusConfig[taskData.handleInfo.handleStatus]?.type || 'info'
-                "
-              >
-                {{
-                  statusConfig[taskData.handleInfo.handleStatus]?.text ||
-                  taskData.handleInfo.handleStatus
-                }}
+              <ElTag :type="statusConfig[taskData.status]?.type || 'info'">
+                {{ statusConfig[taskData.status]?.text || taskData.status }}
               </ElTag>
             </ElDescriptionsItem>
-            <ElDescriptionsItem label="处理情况:" :span="4">
-              {{ taskData.handleInfo.handleSituation || '-' }}
-            </ElDescriptionsItem>
-            <ElDescriptionsItem label="处理图片:" :span="4">
-              <div
-                v-if="
-                  taskData.handleInfo.handleImages &&
-                  taskData.handleInfo.handleImages.length > 0
-                "
-                class="task-images"
-              >
-                <img
-                  v-for="(image, index) in taskData.handleInfo.handleImages"
-                  :key="index"
-                  :src="image"
-                  alt="处理图片"
-                  class="task-image"
-                  @click="previewImage(image)"
-                />
+            <ElDescriptionsItem>
+              <div style="padding-left: 24px; margin-top: 10px">
+                <div>处理建议: {{ taskData.frequency }}</div>
+                <div>任务图片:</div>
+                <div
+                  v-if="
+                    taskData.handleInfo.handleImages &&
+                    taskData.handleInfo.handleImages.length > 0
+                  "
+                  class="task-images"
+                >
+                  <img
+                    v-for="(image, index) in taskData.handleInfo.handleImages"
+                    :key="index"
+                    :src="image"
+                    alt="处理图片"
+                    class="task-image"
+                    @click="previewImage(image)"
+                  />
+                </div>
+                <span v-else>-</span>
               </div>
-              <span v-else>-</span>
-            </ElDescriptionsItem>
-            <ElDescriptionsItem label="处理人:">
-              {{ taskData.handleInfo.handler || '-' }}
-            </ElDescriptionsItem>
-            <ElDescriptionsItem label="处理时间:">
-              {{ taskData.handleInfo.handleTime || '-' }}
             </ElDescriptionsItem>
           </ElDescriptions>
         </ElCard>
 
         <!-- 检查项组件 -->
-        <ElCard class="mt-4">
+        <ElCard>
           <template #header>
-            <div class="flex items-center gap-6">
+            <div class="flex items-center gap-4">
               <div
-                style="width: 8px; height: 20px; background-color: #215acd"
+                style="width: 4px; height: 12px; background-color: #215acd"
               ></div>
-              <span class="text-lg font-bold text-gray-800">检查项</span>
+              <span
+                class="text-lg font-bold text-gray-800"
+                style="font-size: 14px; font-weight: 600"
+                >检查项</span
+              >
             </div>
           </template>
           <CheckComponent />
@@ -285,27 +306,19 @@ const handleTransferTask = () => {
         <!-- 评论组件 -->
         <ElCard>
           <template #header>
-            <div class="flex items-center gap-6">
+            <div class="flex items-center gap-4">
               <div
-                style="width: 8px; height: 20px; background-color: #215acd"
+                style="width: 4px; height: 12px; background-color: #215acd"
               ></div>
-              <span class="text-lg font-bold text-gray-800">评论</span>
+              <span
+                class="text-lg font-bold text-gray-800"
+                style="font-size: 14px; font-weight: 600"
+                >评论</span
+              >
             </div>
           </template>
           <CommentComponent />
         </ElCard>
-        <!-- 查阅组件 -->
-        <ElCard class="mt-4">
-          <template #header>
-            <div class="flex items-center gap-6">
-              <div
-                style="width: 8px; height: 20px; background-color: #215acd"
-              ></div>
-              <span class="text-lg font-bold text-gray-800">查阅</span>
-            </div>
-          </template>
-          <ConsultComponent />
-        </ElCard>
       </div>
     </div>
   </Page>
@@ -323,6 +336,24 @@ const handleTransferTask = () => {
   display: flex;
   gap: 20px;
 }
+.boxdev :deep(.el-card) {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+.boxdev :deep(.el-card__header) {
+  padding-top: 18px !important;
+  padding-bottom: 4px !important;
+  padding-left: 0px !important;
+
+  border-bottom: none !important;
+}
+.boxdev :deep(.el-card__body) {
+  padding-top: 0px !important;
+}
+::v-deep .el-descriptions__body {
+  background: #ffffff00 !important;
+}
 .boxdev > div:nth-child(1) {
   flex: 1;
   min-width: 0;
@@ -348,18 +379,21 @@ const handleTransferTask = () => {
 }
 
 .task-info {
+  // border: 1px solid red;
   :deep(.el-descriptions__label) {
-    font-weight: 500;
+    font-size: 14px;
+    font-weight: 400;
     color: var(--text-color-secondary);
   }
 
   :deep(.el-descriptions__content) {
+    font-size: 14px;
+    font-weight: 500;
     color: var(--text-color-primary);
   }
-
-  // :deep(.el-descriptions-item__content) {
-  //   padding: 8px 0;
-  // }
+  :deep(.el-descriptions__table) {
+    background: transparent !important;
+  }
 }
 
 .task-images {

apps/web-ele/src/views/schedule/view/components/month/index.vue

@@ -1,22 +1,22 @@
 <script setup>
-import { ref, computed } from 'vue';
-import { ElCalendar } from 'element-plus';
+import { ref, computed, watch } from 'vue';
+import { ElCalendar, ElTooltip } from 'element-plus';
 
 // Props from parent component
 const props = defineProps({
   month: {
     type: Number,
     required: true,
-    default: ''
+    default: '',
   },
 });
-
 // 模拟任务数据
 const tasks = ref([
   {
     id: 1,
     name: '未来路摄像头抓图AI检查',
     date: '2025-12-15',
+    start: '23:59',
     status: 'processable',
     department: '管理部',
   },
@@ -24,6 +24,7 @@ const tasks = ref([
     id: 2,
     name: '龙飞街摄像头抓图AI检查',
     date: '2025-12-15',
+    start: '23:59',
     status: 'processable',
     department: '管理部',
   },
@@ -31,6 +32,7 @@ const tasks = ref([
     id: 3,
     name: '中州大道监控设备维护',
     date: '2025-12-15',
+    start: '07:59',
     status: 'not-started',
     department: '技术部',
   },
@@ -38,6 +40,7 @@ const tasks = ref([
     id: 4,
     name: '农业路交通流量分析',
     date: '2025-12-15',
+    start: '09:30',
     status: 'cancelled',
     department: '数据分析部',
   },
@@ -45,6 +48,7 @@ const tasks = ref([
     id: 5,
     name: '未来路摄像头抓图AI检查',
     date: '2025-12-16',
+    start: '08:15',
     status: 'processable',
     department: '管理部',
   },
@@ -52,6 +56,7 @@ const tasks = ref([
     id: 6,
     name: '龙飞街摄像头抓图AI检查',
     date: '2025-12-16',
+    start: '09:45',
     status: 'processable',
     department: '管理部',
   },
@@ -59,6 +64,7 @@ const tasks = ref([
     id: 7,
     name: '文化路监控系统升级',
     date: '2025-12-16',
+    start: '07:00',
     status: 'completed',
     department: '技术部',
   },
@@ -66,6 +72,7 @@ const tasks = ref([
     id: 8,
     name: '纬五路设备巡检',
     date: '2025-12-16',
+    start: '08:30',
     status: 'overdue',
     department: '运维部',
   },
@@ -73,6 +80,7 @@ const tasks = ref([
     id: 9,
     name: '未来路摄像头抓图AI检查',
     date: '2025-12-17',
+    start: '10:00',
     status: 'processable',
     department: '管理部',
   },
@@ -80,6 +88,7 @@ const tasks = ref([
     id: 10,
     name: '龙飞街摄像头抓图AI检查',
     date: '2025-12-17',
+    start: '11:20',
     status: 'processable',
     department: '管理部',
   },
@@ -87,6 +96,7 @@ const tasks = ref([
     id: 11,
     name: '经三路摄像头调试',
     date: '2025-12-17',
+    start: '13:15',
     status: 'not-started',
     department: '技术部',
   },
@@ -94,6 +104,7 @@ const tasks = ref([
     id: 12,
     name: '东风路设备更新计划',
     date: '2025-12-17',
+    start: '14:00',
     status: 'cancelled',
     department: '采购部',
   },
@@ -101,6 +112,7 @@ const tasks = ref([
     id: 13,
     name: '未来路摄像头抓图AI检查',
     date: '2025-12-18',
+    start: '09:10',
     status: 'processable',
     department: '管理部',
   },
@@ -108,6 +120,7 @@ const tasks = ref([
     id: 14,
     name: '龙飞街摄像头抓图AI检查',
     date: '2025-12-18',
+    start: '10:05',
     status: 'processable',
     department: '管理部',
   },
@@ -115,6 +128,7 @@ const tasks = ref([
     id: 15,
     name: '花园路监控中心改造',
     date: '2025-12-18',
+    start: '15:00',
     status: 'completed',
     department: '技术部',
   },
@@ -122,6 +136,7 @@ const tasks = ref([
     id: 16,
     name: '桐柏路设备维护',
     date: '2025-12-18',
+    start: '16:30',
     status: 'overdue',
     department: '运维部',
   },
@@ -129,6 +144,7 @@ const tasks = ref([
     id: 17,
     name: '未来路摄像头抓图AI检查',
     date: '2025-12-19',
+    start: '08:20',
     status: 'processable',
     department: '管理部',
   },
@@ -136,6 +152,7 @@ const tasks = ref([
     id: 18,
     name: '龙飞街摄像头抓图AI检查',
     date: '2025-12-19',
+    start: '09:05',
     status: 'processable',
     department: '管理部',
   },
@@ -143,6 +160,7 @@ const tasks = ref([
     id: 19,
     name: '大学路监控设备安装',
     date: '2025-12-19',
+    start: '10:00',
     status: 'not-started',
     department: '技术部',
   },
@@ -150,6 +168,7 @@ const tasks = ref([
     id: 20,
     name: '汝河路系统测试',
     date: '2025-12-19',
+    start: '11:10',
     status: 'cancelled',
     department: '质量部',
   },
@@ -157,6 +176,7 @@ const tasks = ref([
     id: 21,
     name: '未来路摄像头抓图AI检查',
     date: '2025-12-20',
+    start: '14:30',
     status: 'processable',
     department: '管理部',
   },
@@ -164,6 +184,7 @@ const tasks = ref([
     id: 22,
     name: '龙飞街摄像头抓图AI检查',
     date: '2025-12-20',
+    start: '15:00',
     status: 'processable',
     department: '管理部',
   },
@@ -171,6 +192,7 @@ const tasks = ref([
     id: 23,
     name: '航海路监控数据分析',
     date: '2025-12-20',
+    start: '09:00',
     status: 'completed',
     department: '数据分析部',
   },
@@ -178,6 +200,7 @@ const tasks = ref([
     id: 24,
     name: '长江路设备巡检',
     date: '2025-12-20',
+    start: '16:45',
     status: 'overdue',
     department: '运维部',
   },
@@ -185,6 +208,7 @@ const tasks = ref([
     id: 25,
     name: '未来路摄像头抓图AI检查',
     date: '2025-12-21',
+    start: '08:40',
     status: 'processable',
     department: '管理部',
   },
@@ -192,6 +216,7 @@ const tasks = ref([
     id: 26,
     name: '龙飞街摄像头抓图AI检查',
     date: '2025-12-21',
+    start: '09:25',
     status: 'processable',
     department: '管理部',
   },
@@ -199,6 +224,7 @@ const tasks = ref([
     id: 27,
     name: '嵩山路监控系统优化',
     date: '2025-12-21',
+    start: '10:50',
     status: 'not-started',
     department: '技术部',
   },
@@ -206,6 +232,7 @@ const tasks = ref([
     id: 28,
     name: '紫荆山路设备调试',
     date: '2025-12-21',
+    start: '11:30',
     status: 'completed',
     department: '技术部',
   },
@@ -213,6 +240,7 @@ const tasks = ref([
     id: 29,
     name: '商城路设备维护计划',
     date: '2025-12-21',
+    start: '13:05',
     status: 'overdue',
     department: '运维部',
   },
@@ -220,6 +248,7 @@ const tasks = ref([
     id: 30,
     name: '金水路交通管理培训',
     date: '2025-12-21',
+    start: '09:15',
     status: 'cancelled',
     department: '人力资源部',
   },
@@ -250,7 +279,7 @@ const getTaskStatusClass = (task) => {
 // Get tasks for a specific date
 const getTasksForDate = (date) => {
   const dateStr = date.toISOString().split('T')[0];
-  return tasks.value.filter(task => {
+  return tasks.value.filter((task) => {
     if (typeof task.date === 'string') {
       return task.date === dateStr;
     }
@@ -258,6 +287,22 @@ const getTasksForDate = (date) => {
   });
 };
 
+// 状态对应颜色（与其他视图保持一致）
+const statusColor = (status) => {
+  switch (status) {
+    case 'overdue':
+      return '#FF4D4F';
+    case 'completed':
+      return '#909399';
+    case 'processable':
+      return '#67C23A';
+    case 'not-started':
+    case 'cancelled':
+    default:
+      return '#CCCCCC';
+  }
+};
+
 // Set initial calendar value based on props
 const initialCalendarValue = computed(() => {
   if (props.month) {
@@ -271,39 +316,32 @@ const initialCalendarValue = computed(() => {
 
 <template>
   <div class="month-schedule">
-    <div class="status-legend">
-      <div class="legend-item">
-        <span class="status-indicator not-started"></span>
-        <span>灰色任务名：任务未开始/任务取消</span>
-      </div>
-      <div class="legend-item">
-        <span class="status-indicator processable"></span>
-        <span>黑色任务名：任务可处理</span>
-      </div>
-      <div class="legend-item">
-        <span class="status-indicator overdue"></span>
-        <span>红色任务名：任务过期未完成</span>
-      </div>
-      <div class="legend-item">
-        <span class="status-indicator completed"></span>
-        <span>黑色任务名：任务已完成</span>
-      </div>
-    </div>
-    
-    <ElCalendar :value="initialCalendarValue">
-      <template #header="{ date }">
-        <span></span>
-      </template>
+    <ElCalendar :model-value="initialCalendarValue">
       <template #date-cell="{ data }">
         <div class="calendar-cell">
+          <div class="cell-date-number">{{ data.date.getDate() }}</div>
           <div class="tasks-container">
-            <div 
-              v-for="task in getTasksForDate(data.date)" 
-              :key="task.id" 
+            <div
+              v-for="task in getTasksForDate(data.date)"
+              :key="task.id"
               class="task-item"
               :class="getTaskStatusClass(task)"
             >
-              <div class="task-name">{{ task.name }}</div>
+              <ElTooltip
+                :content="`${task.start ? task.start + ' ' : ''}${task.name}${task.department ? ' — ' + task.department : ''}`"
+                placement="top"
+              >
+                <div class="task-row">
+                  <span
+                    class="task-dot"
+                    :style="{ backgroundColor: statusColor(task.status) }"
+                  ></span>
+                  <span v-if="task.start || task.time" class="task-time">{{
+                    task.start || task.time
+                  }}</span>
+                  <span class="task-name">{{ task.name }}</span>
+                </div>
+              </ElTooltip>
             </div>
           </div>
         </div>
@@ -313,11 +351,37 @@ const initialCalendarValue = computed(() => {
 </template>
 
 <style scoped>
+:deep(.el-calendar__button-group) {
+  display: none;
+}
 .month-schedule {
   width: 100%;
   overflow-x: auto;
 }
 
+.calendar-cell {
+  position: relative;
+  height: 150px;
+  padding: 6px 6px 4px 6px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.cell-date-number {
+  position: absolute;
+  top: 6px;
+  left: 8px;
+  font-size: 12px;
+  color: #666;
+  font-weight: 600;
+  z-index: 3;
+}
+
+.tasks-container {
+  margin-top: 22px;
+}
+
 .status-legend {
   display: flex;
   gap: 20px;
@@ -405,9 +469,29 @@ const initialCalendarValue = computed(() => {
 }
 
 .task-name {
+  font-size: 12px;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.task-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.task-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: 0 0 8px;
+}
+.task-time {
   font-size: 11px;
-  line-height: 1.3;
-  text-align: center;
+  color: #666;
+  width: 40px;
+  flex: 0 0 40px;
 }
 
 /* Task status styles */

apps/web-ele/src/views/schedule/view/components/week/index.vue

@@ -300,25 +300,6 @@ const hexToRgba = (hex, alpha = 0.08) => {
 </script>
 <template>
   <div class="week-schedule">
-    <div class="status-legend">
-      <div class="legend-item">
-        <span class="status-indicator not-started"></span>
-        <span>灰色任务名：任务未开始/任务取消</span>
-      </div>
-      <div class="legend-item">
-        <span class="status-indicator processable"></span>
-        <span>黑色任务名：任务可处理</span>
-      </div>
-      <div class="legend-item">
-        <span class="status-indicator overdue"></span>
-        <span>红色任务名：任务过期未完成</span>
-      </div>
-      <div class="legend-item">
-        <span class="status-indicator completed"></span>
-        <span>黑色任务名：任务已完成</span>
-      </div>
-    </div>
-
     <div class="calendar">
       <div class="time-column">
         <div class="time-header">&nbsp;</div>
@@ -333,14 +314,14 @@ const hexToRgba = (hex, alpha = 0.08) => {
           </div>
         </div>
         <!-- 横向小时网格覆盖层（跨列） -->
-        <div class="hours-overlay">
+        <!-- <div class="hours-overlay">
           <div
             v-for="(h, i) in hours"
             :key="h"
             class="hours-line"
             :style="{ height: hourHeight + 'px' }"
           ></div>
-        </div>
+        </div> -->
         <div class="days-body">
           <div v-for="day in weekDays" :key="day.date" class="day-column">
             <div class="day-body-inner">

apps/web-ele/src/views/schedule/view/index.vue

@@ -160,6 +160,8 @@ const nextMonth = () => {
 
 // 选择日期
 const selectDate = (date: string) => {
+  console.log(date);
+  
   searchParams.value.date = date;
 };