feat: 会议室查看

apps/web-antd/src/api/property/clean_order/model.d.ts

@@ -70,7 +70,7 @@ export interface Clean_orderVO {
    * 联系电话
    */
   phone: string;
-
+  relationList: any[];
 }
 
 export interface Clean_orderForm extends BaseEntity {

apps/web-antd/src/api/property/meetbooking/index.ts

@@ -1,4 +1,4 @@
-import type { MeetbookingVO, MeetbookingForm, MeetbookingQuery } from './model';
+import type { MeetbookingVO, MeetbookingForm, MeetbookingQuery, MeetbookingAppointmentQuery } from './model';
 
 import type { ID, IDS } from '#/api/common';
 import type { PageResult } from '#/api/common';

apps/web-antd/src/api/property/meetbooking/model.d.ts

@@ -222,3 +222,4 @@ export interface MeetbookingQuery extends PageQuery {
     */
   params?: any;
 }
+

apps/web-antd/src/api/property/reportStatistics/index.ts

@@ -68,3 +68,12 @@ export function countAchieved() {
 export function countByCusScore() {
   return requestClient.get<any>('/property/orderMaintain/countByCusScore');
 }
+
+  /**
+ * 统计下单客户总数
+ * @param
+ * @returns void
+ */
+  export function countCustomers() {
+    return requestClient.get<any>('/property/rentalOrder/countCustomers');
+  }

apps/web-antd/src/api/property/roomBooking/conferenceView/index.ts

@@ -0,0 +1,21 @@
+import type { getAppointmentListByDateQuery,getAppointmentListByIdQuery } from './model';
+
+import type { PageResult } from '#/api/common';
+import { requestClient } from '#/api/request';
+
+/**
+* 按照日期查询已预约会议预约记录列表
+* @param params
+* @returns 会议预约列表
+*/
+export function getAppointmentListByDate(params?: getAppointmentListByDateQuery) {
+  return requestClient.get<any>('/property/meetbooking/appointment-list', { params });
+}
+/**
+* 按照会议室Id查询已预约会议预约记录列表
+* @param params
+* @returns 会议预约列表
+*/
+export function getAppointmentListBymeetId(params?: getAppointmentListByIdQuery) {
+  return requestClient.get<any>('/property/meetbooking/meet-appointment-list', { params });
+}

apps/web-antd/src/api/property/roomBooking/conferenceView/model.d.ts

@@ -0,0 +1,12 @@
+export interface getAppointmentListByDateQuery {
+  /**
+   * 日期
+   */
+  appointmentDate?: string;
+}
+export interface getAppointmentListByIdQuery {
+  /**
+   * 会议室id
+   */
+  meetId?: string;
+}

apps/web-antd/src/api/property/roomBooking/index.ts

@@ -1,4 +1,4 @@
-import type { RoomBookingVO, RoomBookingForm, RoomBookingQuery } from './model';
+import type { RoomBookingVO, RoomBookingForm, RoomBookingQuery,GetMeetNameVO } from './model';
 
 import type { ID, IDS } from '#/api/common';
 import type { PageResult } from '#/api/common';
@@ -6,6 +6,15 @@ import type { PageResult } from '#/api/common';
 import { commonExport } from '#/api/helper';
 import { requestClient } from '#/api/request';
 
+/**
+* 查询会议室名称列表
+* @param getMeetName 后端约定传'getMeetName'
+* @returns 会议室名称列表
+*/
+export function getMeetName() {
+  return requestClient.get<PageResult<GetMeetNameVO>>(`/property/enum-fetcher/enum-values/${'getMeetName'}`);
+}
+
 /**
 * 查询会议管理列表
 * @param params
@@ -59,3 +68,11 @@ export function roomBookingUpdate(data: RoomBookingForm) {
 export function roomBookingRemove(id: ID | IDS) {
   return requestClient.deleteWithMsg<void>(`/property/roomBooking/${id}`);
 }
+/**
+* 按照日期查询已预约会议预约记录列表
+* @param params
+* @returns 会议预约列表
+*/
+export function meetbookingAppointmentList(params?: MeetbookingAppointmentQuery) {
+  return requestClient.get<PageResult<MeetbookingVO>>('/property/meetbooking/appointment-list', { params });
+}

apps/web-antd/src/api/property/roomBooking/model.d.ts

@@ -1,5 +1,9 @@
 import type { PageQuery, BaseEntity } from '#/api/common';
 
+export interface GetMeetNameVO {
+    id: string;
+    name: string;
+}
 export interface RoomBookingVO {
   /**
    * 会议室id

apps/web-antd/src/views/property/clean/cleanOrders/clean-modal.vue

@@ -39,6 +39,8 @@ const totalSumPeices = computed(() => {
 
 const isUpdate = ref(false);
 const isReadonly = ref(false);
+const isAudit = ref(false);
+const isRefund = ref(false);
 const title = computed(() => {
   return isUpdate.value ? $t('pages.common.edit') : isReadonly.value ? '详情' : $t('pages.common.add');
 });
@@ -121,12 +123,16 @@ const [BasicModal, modalApi] = useVbenModal({
     // 查询服务地址树形结构
     setupCommunitySelect()
     modalApi.modalLoading(true);
-    const { id, readonly } = modalApi.getData() as {
+    const { id, readonly,audit,refund } = modalApi.getData() as {
       id?: string;
       readonly?: boolean;
+      audit?: boolean;
+      refund?: boolean;
     };
     editCleanOrderId.value = id || '';
     isReadonly.value = !!readonly;
+    isAudit.value = !!audit;
+    isRefund.value = !!refund;
     //判断是否是编辑状态需要先判断是否是只读状态
     if(isReadonly.value){
       isUpdate.value = false;
@@ -139,6 +145,14 @@ const [BasicModal, modalApi] = useVbenModal({
       if (record.endTime) record.endTime = dayjs(record.endTime);
       editUnitId.value = record.unitId || '';
       detailTable.value = record.cleanList || [];
+      for(const item of record.relationList){
+        for(let i = 0; i < detailTable.value.length; i++){
+          if(item.cleanId === detailTable.value[i].id){
+            detailTable.value[i].area = item.areas;
+            detailTable.value[i].sumPeices = item.sumPrice;
+          }
+        }
+      }
       await formApi.setValues(record);
     }
     await markInitialized();
@@ -275,14 +289,10 @@ function handleAddDetail() {
 }
 // 添加订单服务详情
 function handleDetailReload(data: any) {
-  console.log(data,'afawed');
-  
   detailTable.value.push(data);
 }
 // 编辑订单服务详情
 function handleEditDetailReload(data: any) {
-  console.log(data,'1203342423');
-  
   detailTable.value[data.index] = data;
 
 }
@@ -326,7 +336,8 @@ async function handleConfirm() {
     data.unit = unitObj ? unitObj.name : data.unit || '';
     data.name = cleanObj ? cleanObj.name : data.name || '';
     data.unitId = unitObj ? unitObj.id : isUpdate.value ? editUnitId.value : '';
-    data.sumPeices = parseInt(totalSumPeices.value, 10);
+    data.sumPeices = Number(totalSumPeices.value)
+    // data.sumPeices = parseInt(totalSumPeices.value, 10);
     // 组装 cleanIds
     // data.cleanIds = detailTable.value.map((item: any) => item.id);
     data.cleanList = detailTable.value;
@@ -382,6 +393,46 @@ async function setupCommunitySelect() {
     },
   ]);
 }
+async function handleAudit(params: any) {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    // 单位数据缓存
+    if (unitListData.length === 0) {
+      const res = await resident_unitList();
+      unitListData = res.rows || [];
+    }
+    // 劳务数据缓存 cleanListData 已有
+    // 查找label
+    const unitObj = unitListData.find((item) => item.id === data.unitId);
+    const cleanObj = cleanListData.find((item) => item.id === data.name);
+    data.unit = unitObj ? unitObj.name : data.unit || '';
+    data.name = cleanObj ? cleanObj.name : data.name || '';
+    data.unitId = unitObj ? unitObj.id : isUpdate.value ? editUnitId.value : '';
+    data.sumPeices = Number(totalSumPeices.value)
+    data.starTime = dayjs(data.starTime).format('YYYY-MM-DD HH:mm:ss');
+    data.endTime = dayjs(data.endTime).format('YYYY-MM-DD HH:mm:ss');
+    // data.sumPeices = parseInt(totalSumPeices.value, 10);
+    // 组装 cleanIds
+    // data.cleanIds = detailTable.value.map((item: any) => item.id);
+    data.cleanList = detailTable.value;
+    if(params.isRefund){
+      data.isUnbooking = 1;
+    } else if(params.isAudit){
+      data.state = 1;
+    }else{
+      data.state = 2;
+    }
+    console.log(data,'data');
+    // 0：未审核 1：审核通过 2：审核不通过
+    await clean_orderUpdate({...data,id:editCleanOrderId.value})
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+}
 </script>
 
 <template>
@@ -422,6 +473,15 @@ async function setupCommunitySelect() {
       <div>费用合计：{{ totalSumPeices }}元</div>
     </div>
     <CleanDetailModal @reload="handleDetailReload" @editReload="handleEditDetailReload"/>
+    <template #footer v-if="isAudit">
+      <a-button @click="modalApi.close()">取消</a-button>
+      <a-button type="primary" @click="handleAudit({isAudit:true})">审核通过</a-button>
+      <a-button danger @click="handleAudit({isAudit:false})">审核不通过</a-button>
+    </template>
+    <template #footer v-if="isRefund">
+      <a-button @click="modalApi.close()">取消</a-button>
+      <a-button type="primary" @click="handleAudit({isRefund:true})">退定</a-button>
+    </template>
  </BasicModal>
 </template>
 

apps/web-antd/src/views/property/clean/cleanOrders/index.vue

@@ -127,10 +127,26 @@ function handleDownloadExcel() {
   );
 }
 
-async function handleView(row: Required<CleanForm>) {
+ function handleView(row: Required<CleanForm>) {
   modalApi.setData({ id: row.id, readonly: true });
   modalApi.open();
 }
+
+function handleAudit(row:any) {
+  // 审核逻辑
+  // TODO: 实现审核功能
+  console.log('审核', row);
+  modalApi.setData({ id: row.id, readonly: true,audit:true });
+  modalApi.open();
+}
+
+function handleRefund(row:any) {
+  // 退定逻辑
+  // TODO: 实现退定功能
+  console.log('退定', row);
+  modalApi.setData({ id: row.id, readonly: true,refund:true });
+  modalApi.open();
+}
 </script>
 
 <template>
@@ -170,26 +186,13 @@ async function handleView(row: Required<CleanForm>) {
       <template #action="{ row }">
         <Space>
           <ghost-button @click.stop="handleView(row)"> 查看 </ghost-button>
-          <ghost-button
+          <template v-if="row.state === 0">
-            v-access:code="['property:clean:edit']"
+            <ghost-button type="primary" @click.stop="handleAudit(row)">审核</ghost-button>
-            @click.stop="handleEdit(row)"
+          </template>
-          >
+          <template v-else>
-            {{ $t('pages.common.edit') }}
+            <ghost-button danger @click.stop="handleRefund(row)" v-if="row.isUnbooking === 0">退定</ghost-button>
-          </ghost-button>
+            <ghost-button disabled v-else>已退定</ghost-button>
-          <Popconfirm
+          </template>
-            :get-popup-container="getVxePopupContainer"
-            placement="left"
-            title="确认删除？"
-            @confirm="handleDelete(row)"
-          >
-            <ghost-button
-              danger
-              v-access:code="['property:clean:remove']"
-              @click.stop=""
-            >
-              {{ $t('pages.common.delete') }}
-            </ghost-button>
-          </Popconfirm>
         </Space>
       </template>
     </BasicTable>

apps/web-antd/src/views/property/clean_order/clean_order-modal.vue

@@ -53,7 +53,6 @@ const [BasicModal, modalApi] = useVbenModal({
       return null;
     }
     modalApi.modalLoading(true);
-
     const { id } = modalApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
 

apps/web-antd/src/views/property/greenPlantRentalManagement/reportStatistics/index.vue

@@ -5,7 +5,8 @@ import { onMounted, ref } from 'vue';
 
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
-import { Button } from 'ant-design-vue';
+import { Button,Radio } from 'ant-design-vue';
+import type { RadioChangeEvent } from 'ant-design-vue';
 
 import { statisticsByTime,
   countByRentalType,
@@ -13,6 +14,7 @@ import { statisticsByTime,
   countRenewRate,
   countByCusScore,
   countOrderAndAmount,
+  countCustomers,
   countAchievedRate,
   countAchieved
  } from '#/api/property/reportStatistics';
@@ -42,17 +44,23 @@ const timeUnit = ref<number>(1)
 const countOrderAndAmountDataAmount = ref<number>(0);
 const countOrderAndAmountDataOrder = ref<number>(0);
 const countAchievedRateData = ref<any>(null);
+const countCustomersData = ref<any>(null);
+const xAxisData = ref<any[]>([]);
+const seriesData = ref<any[]>([]);
 onMounted(async () => {
     // 任务数
   const countOrderAndAmountData= await countOrderAndAmount();
   countOrderAndAmountDataAmount.value = countOrderAndAmountData.amount;
   countOrderAndAmountDataOrder.value = countOrderAndAmountData.num;
+  //活跃用户
+  const countCustomersDataRes: any = await countCustomers();
+  countCustomersData.value = countCustomersDataRes.count;
   const countAchievedRateDataRes: any = await countAchievedRate();
   countAchievedRateData.value = countAchievedRateDataRes.rate;
   // 查询订单数量趋势
   const res = await statisticsByTime({ timeUnit: timeUnit.value });
-  const xAxisData = res?.time ?? [];
+  xAxisData.value = res?.time ?? [];
-  const seriesData = res?.counts ?? [];
+  seriesData.value = res?.counts ?? [];
   // 租赁金额分布
   const data = await countByRentalType();//返回的内容是amount: 1, type: "单点"
   // 转换字段名为value和name
@@ -76,7 +84,7 @@ onMounted(async () => {
     tooltip: { trigger: 'axis' },
     xAxis: {
       type: 'category',
-      data: xAxisData,
+      data: xAxisData.value,
       boundaryGap: false,
     },
     yAxis: { type: 'value' },
@@ -84,7 +92,7 @@ onMounted(async () => {
       {
         name: '订单数',
         type: 'line',
-        data: seriesData ||[],
+        data: seriesData.value ||[],
         smooth: true,
       },
     ],
@@ -229,13 +237,29 @@ onMounted(async () => {
     ],
   });
 });
-const nodeOptions = [
+// 切换视图模式
-  { label: '日', value: 1 },
+async function handleViewModeChange(e: RadioChangeEvent): Promise<void> {
-  { label: '周', value: 2 },
-  { label: '月', value: 3 },
-];
-function handleAssociationChange(e: any) {
   timeUnit.value = e.target.value;
+  const res = await statisticsByTime({ timeUnit: timeUnit.value });
+  xAxisData.value = res?.time ?? [];
+  seriesData.value = res?.counts ?? [];
+  renderEcharts({
+    tooltip: { trigger: 'axis' },
+    xAxis: {
+      type: 'category',
+      data: xAxisData.value,
+      boundaryGap: false,
+    },
+    yAxis: { type: 'value' },
+    series: [
+      {
+        name: '订单数',
+        type: 'line',
+        data: seriesData.value ||[],
+        smooth: true,
+      },
+    ],
+  });
 }
 function formatNumber(num: number | string) {
   if (!num && num !== 0) {
@@ -277,6 +301,10 @@ function formatNumber(num: number | string) {
              <div class="title">累计租赁金额</div>
             <div class="number">{{ formatNumber(countOrderAndAmountDataOrder) }}</div>
           </div>
+          <div class="box">
+             <div class="title">当前活跃客户数</div>
+            <div class="number">{{ formatNumber(countCustomersData) }}</div>
+          </div>
           <div class="box">
              <div class="title">绿植养护完成率</div>
             <div class="number">{{ countAchievedRateData }}</div>
@@ -287,13 +315,11 @@ function formatNumber(num: number | string) {
             <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
               <span style="font-size: 18px; font-weight: bold;">订单数量趋势</span>
               <div>
-                <RadioGroup
+                <Radio.Group v-model:value="timeUnit" @change="handleViewModeChange">
-                  v-model:value="timeUnit"
+                  <Radio.Button value=1>日</Radio.Button>
-                  :options="nodeOptions"
+                  <Radio.Button value=2>周</Radio.Button>
-                  button-style="solid"
+                  <Radio.Button value=3>月</Radio.Button>
-                  option-type="button"
+                </Radio.Group>
-                  @change="handleAssociationChange"
-                />
               </div>
             </div>
             <EchartsUI
@@ -357,7 +383,6 @@ function formatNumber(num: number | string) {
   .box {
     height: 100%;
     margin: 40px;
-
     .title {
       display: flex;
       justify-content: space-between;
@@ -384,7 +409,8 @@ function formatNumber(num: number | string) {
         display: flex;
         justify-content: space-between;
         .box{
-          width: 300px;
+          width: 250px;
+          max-width: 300px;
           height: 120px;
           background-color: #fff;
           border-radius: 8px;

apps/web-antd/src/views/property/roomBooking/conferenceView/index.vue

@@ -4,17 +4,16 @@ import { Page } from '@vben/common-ui';
 import dayjs from 'dayjs';
 import type { TableColumnType } from 'ant-design-vue';
 import { Radio, Select, Button, Table } from 'ant-design-vue';
-import { conferenceList } from '#/api/property/conference';
+import { getMeetName } from '#/api/property/roomBooking';
-import { roomBookingList } from '#/api/property/roomBooking';
+import { getAppointmentListByDate,getAppointmentListBymeetId } from '#/api/property/roomBooking/conferenceView';
 import type { RadioChangeEvent } from 'ant-design-vue';
 import type { SelectValue } from 'ant-design-vue/es/select';
 
-// 首先定义会议室和预约信息的接口类型
+// 会议室和预约信息的接口类型
 interface ConferenceRoom {
   id: string;
   name: string;
 }
-
 interface ConferenceBooking {
   id: string | number;
   tbConferenceId: string | number; // 会议室ID
@@ -43,21 +42,22 @@ const selectedDate = ref<string>('');
 const weekDates = ref<string[]>([]);
 
 // 预约数据
-const bookings = ref<ConferenceBooking[]>([]);
+const bookings = ref<any[]>([]);
+// 新增：表格渲染用的结构
+const bookingTable = ref<Record<string, Record<string, any>>>({});
+// 新增：加载状态
+const loading = ref(false);
 
-// 时间段
+// 时间段只显示"上午" "下午"
-const timeSlots = [
+const timeSlots = ['上午', '下午'];
-  '8:00', '8:30', '9:00', '9:30', '10:00', '10:30',
-  '11:00', '11:30', '12:00', '12:30', '13:00', '13:30',
-  '14:00', '14:30', '15:00', '15:30', '16:00', '16:30',
-  '17:00', '17:30'
-];
 
 // 生成一周日期
 function generateWeekDates(): void {
   const today = dayjs();
+  // 获取本周的周一
+  const startOfWeek = today.startOf('week');
   const dates = Array.from({ length: 7 }, (_, i) => {
-    return today.add(i, 'day').format('YYYY-MM-DD');
+    return startOfWeek.add(i, 'day').format('YYYY-MM-DD');
   });
   weekDates.value = dates;
   selectedDate.value = dates[0] ?? '';
@@ -65,39 +65,84 @@ function generateWeekDates(): void {
 
 // 获取预约数据
 async function fetchBookings(): Promise<void> {
+  loading.value = true;
   try {
     if (viewMode.value === 'date') {
-      // 先获取会议室列表
+      const roomRes = await getMeetName();
-      const roomRes = await conferenceList();
+      roomList.value = ([roomRes]).map((item: any) => ({
-      console.log(roomRes);
+        id: item.value,
-      
+        name: item.name
-      // roomList.value = roomRes.rows || [];
+      }));
-      
+      const appointmentRes = await getAppointmentListByDate({
-      // // 然后获取每个会议室的预约信息
+        appointmentDate: selectedDate.value
-      // const bookingPromises = roomList.value.map(room => 
-      //   roomBookingList({
-      //     appointmentDate: selectedDate.value,
-      //     bookingStatus: 2,
-      //     reviewStatus: 1,
-      //     tbConferenceId: room.id
-      //   })
-      // );
-      
-      // const bookingResults = await Promise.all(bookingPromises);
-      // // 合并所有预约数据
-      // bookings.value = bookingResults.flatMap(res => res.rows || []);
-    } else {
-      // 按会议室视图时直接查询该会议室的预约
-      const res = await roomBookingList({
-        appointmentDate: selectedDate.value,
-        bookingStatus: 2,
-        reviewStatus: 1,
-        tbConferenceId: selectedRoom.value
       });
-      bookings.value = res.rows || [];
+      bookings.value = (appointmentRes || []).map((item: any) => ({
+        id: item.id,
+        meetId: item.meetId,
+        name: item.name,
+        person: item.person,
+        scheduledEndtime: item.scheduledEndtime,
+        scheduledStarttime: item.scheduledStarttime,
+        unit: item.unit,
+        personName: item.personName,
+        slots: item.slots,
+        unitName: item.unitName,
+        subject: item.subject,
+        deptName: item.unitName,
+        bookingName: item.personName,
+        startTime: item.scheduledStarttime,
+        endTime: item.scheduledEndtime,
+        bookingDate: item.scheduledStarttime,
+        tbConferenceId: item.meetId,
+        // 兼容后续渲染
+      }));
+      // 处理为表格结构
+      const table: Record<string, Record<string, any>> = { '上午': {}, '下午': {} };
+      roomList.value.forEach(room => {
+        ['上午', '下午'].forEach(slot => {
+          const booking = bookings.value.find(b => b.name === room.name && b.slots === slot);
+          table[slot][room.name] = booking || null;
+        });
+      });
+      bookingTable.value = table;
+    } else {
+      const res = await getAppointmentListBymeetId({
+        meetId: selectedRoom.value
+      });
+      bookings.value = (res || []).map((item: any) => ({
+        id: item.id,
+        meetId: item.meetId,
+        name: item.name,
+        person: item.person,
+        scheduledEndtime: item.scheduledEndtime,
+        scheduledStarttime: item.scheduledStarttime,
+        unit: item.unit,
+        personName: item.personName,
+        slots: item.slots,
+        unitName: item.unitName,
+        subject: item.subject,
+        deptName: item.unitName,
+        bookingName: item.personName,
+        startTime: item.scheduledStarttime,
+        endTime: item.scheduledEndtime,
+        bookingDate: item.scheduledStarttime,
+        tbConferenceId: item.meetId,
+      }));
+      const table: Record<string, Record<string, any>> = { '上午': {}, '下午': {} };
+      weekDates.value.forEach(date => {
+        ['上午', '下午'].forEach(slot => {
+          const booking = bookings.value.find(b => dayjs(b.scheduledStarttime).format('YYYY-MM-DD') === date && b.slots === slot);
+          table[slot][date] = booking || null;
+        });
+      });
+      bookingTable.value = table;
     }
+    console.log(bookingTable.value,'bookingTable.value');
+    
   } catch (error) {
     console.error('获取预约数据失败:', error);
+  } finally {
+    loading.value = false;
   }
 }
 
@@ -124,18 +169,23 @@ function handleRoomChange(value: SelectValue): void {
   fetchBookings();
 }
 
-// 获取单元格预约信息
+// 获取单元格预约信息（上午/下午）
 function getCellBooking(col: string, time: string): ConferenceBooking | undefined {
+  // 判断时间属于上午还是下午
+  function isMorning(startTime: string) {
+    const hour = dayjs(startTime).hour();
+    return hour < 12;
+  }
   if (viewMode.value === 'date') {
     const room = roomList.value.find(r => r.name === col);
     return bookings.value.find(b =>
       b.tbConferenceId === room?.id &&
-      dayjs(b.startTime).format('HH:mm') === time
+      ((time === '上午' && isMorning(b.startTime)) || (time === '下午' && !isMorning(b.startTime)))
     );
   } else {
     return bookings.value.find(b =>
       dayjs(b.bookingDate).format('YYYY-MM-DD') === col &&
-      dayjs(b.startTime).format('HH:mm') === time
+      ((time === '上午' && isMorning(b.startTime)) || (time === '下午' && !isMorning(b.startTime)))
     );
   }
 }
@@ -163,6 +213,19 @@ function renderBookingCell(booking: ConferenceBooking) {
   );
 }
 
+// 随机浅色背景色生成函数
+function getRandomBgColor() {
+  const r = Math.floor(200 + Math.random() * 55);
+  const g = Math.floor(200 + Math.random() * 55);
+  const b = Math.floor(200 + Math.random() * 55);
+  return {
+    background: `rgba(${r},${g},${b},0.5)`,
+    borderRadius: '6px',
+    padding: '60px 10px',
+    transition: 'background 0.3s'
+  };
+}
+
 // 表格列配置
 interface TableRecord {
   time: string;
@@ -170,43 +233,54 @@ interface TableRecord {
   [key: string]: any;
 }
 
+// 会议室列补全到7个
+function getFullRoomList() {
+  const rooms = roomList.value.slice();
+  const count = rooms.length;
+  if (viewMode.value === 'date' && count < 7) {
+    for (let i = count; i < 7; i++) {
+      rooms.push({ id: `empty_${i}`, name: '' });
+    }
+  }
+  return rooms;
+}
+
 const columns = computed<TableColumnType<TableRecord>[]>(() => {
   const baseColumns: TableColumnType<TableRecord>[] = [{
     title: '时间',
-    dataIndex: 'time',
+    dataIndex: 'slot',
+    key: 'slot',
     width: 100,
     fixed: 'left' as const
   }];
-
   const dynamicColumns: TableColumnType<TableRecord>[] = viewMode.value === 'date'
-    ? roomList.value.map(room => ({
+    ? getFullRoomList().map(room => ({
-        title: room.name,
+        title: room.name || ' ',
-        dataIndex: room.id,
+        dataIndex: room.name,
+        key: room.name,
         width: 200,
-        customRender: ({ record }) => {
-          const booking = getCellBooking(room.name, record.time);
-          return booking ? renderBookingCell(booking) : null;
-        }
       }))
     : weekDates.value.map(date => ({
-        title: dayjs(date).format('MM-DD'),
+        title: dayjs(date).format('YYYY-MM-DD'),
         dataIndex: date,
+        key: date,
         width: 200,
-        customRender: ({ record }) => {
-          const booking = getCellBooking(date, record.time);
-          return booking ? renderBookingCell(booking) : null;
-        }
       }));
-
   return [...baseColumns, ...dynamicColumns];
 });
 
-// 表格数据
 const tableData = computed<TableRecord[]>(() => {
-  return timeSlots.map(time => ({
+  const slots = ['上午', '下午'];
-    time,
+  return slots.map(slot => {
-    key: time,
+    const row: any = { slot };
-  }));
+    const cols = viewMode.value === 'date'
+      ? getFullRoomList().map(room => room.name)
+      : weekDates.value;
+    cols.forEach(col => {
+      row[col] = bookingTable.value[slot]?.[col] || null;
+    });
+    return row;
+  });
 });
 
 onMounted(() => {
@@ -224,8 +298,6 @@ onMounted(() => {
           <Radio.Button value="date">按日期</Radio.Button>
           <Radio.Button value="room">按会议室</Radio.Button>
         </Radio.Group>
-
-        <!-- 按会议室视图的下拉选择 -->
         <Select
           v-if="viewMode === 'room'"
           v-model:value="selectedRoom"
@@ -241,8 +313,7 @@ onMounted(() => {
             {{ room.name }}
           </Select.Option>
         </Select>
-
+      </div>
-        <!-- 按日期视图的日期选择 -->
       <div v-if="viewMode === 'date'" class="date-buttons">
         <Button
           v-for="date in weekDates"
@@ -250,32 +321,41 @@ onMounted(() => {
           :type="date === selectedDate ? 'primary' : 'default'"
           @click="handleDateChange(date)"
         >
-            {{ dayjs(date).format('MM-DD') }}
+          {{ dayjs(date).format('YYYY-MM-DD') }}
         </Button>
       </div>
-      </div>
-
-      <!-- 日程表格 -->
       <Table
         :columns="columns"
         :data-source="tableData"
         :pagination="false"
         bordered
         :scroll="{ x: 'max-content' }"
-      />
+        :loading="loading"
+        tableLayout="fixed"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.dataIndex !== 'slot'">
+            <div
+              v-if="record[column.dataIndex]"
+              :style="getRandomBgColor()"
+            >
+              <div>预约人：{{ record[column.dataIndex].personName }}</div>
+              <div>单位：{{ record[column.dataIndex].unitName }}</div>
+            </div>
+            <div v-else></div>
+          </template>
+        </template>
+      </Table>
     </div>
   </Page>
 </template>
 
 <style lang="scss" scoped>
 .conference-view {
-  padding: 16px;
-  
   .control-panel {
     margin-bottom: 16px;
     display: flex;
     align-items: center;
-    
     .room-select {
       width: 200px;
       margin-left: 16px;
@@ -284,7 +364,8 @@ onMounted(() => {
 
   .date-buttons {
     margin-top: 16px;
-    
+    display: flex;
+    justify-content: center;
     :deep(.ant-btn) {
       margin-right: 8px;
 
@@ -302,7 +383,6 @@ onMounted(() => {
     display: flex;
     flex-direction: column;
     gap: 4px;
-    
     span {
       display: block;
       font-size: 12px;
@@ -326,5 +406,10 @@ onMounted(() => {
       background: #bae7ff;
     }
   }
+
+  :deep(.ant-table-tbody > tr > td:first-child) {
+  padding: 10px;
+  height: 200px;
+}
 }
 </style>

apps/web-antd/vite.config.mts

@@ -1,4 +1,5 @@
 import { defineConfig } from '@vben/vite-config';
+import path from 'path';
 
 // 自行取消注释来启用按需导入功能
 // import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
@@ -27,7 +28,7 @@ export default defineConfig(async () => {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/api/, ''),
             // mock代理目标地址
-            target: 'http://192.168.0.106:8080',
+            target: 'http://192.168.43.169:8080',
             // target: 'http://47.109.37.87:3010',
             ws: true,
           },

package.json

@@ -114,5 +114,10 @@
       "canvas",
       "node-gyp"
     ]
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
+    "ant-design-vue": "^4.2.6",
+    "postcss-antd-fixes": "^0.2.0"
   }
 }

packages/effects/layouts/src/authentication/authentication.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<!-- <script setup lang="ts">
 import type { ToolbarType } from './types';
 
 import { preferences, usePreferences } from '@vben/preferences';
@@ -34,12 +34,122 @@ withDefaults(defineProps<Props>(), {
 
 const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
   usePreferences();
+</script> -->
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../../../../../apps/web-antd/src/store'
+import { Checkbox } from 'ant-design-vue';
+const router = useRouter()
+const authStore = useAuthStore();
+
+// 响应式数据
+const username = ref('admin')
+const password = ref('admin123')
+const rememberMe = ref(false)
+
+// 页面加载时恢复用户名
+onMounted(() => {
+  const savedUser = localStorage.getItem('rememberedUser')
+  if (savedUser) {
+    username.value = savedUser
+    rememberMe.value = true
+  }
+})
+
+// 登录逻辑
+const login = () => {
+  // 验证输入
+  if (!username.value.trim()) {
+    alert('请输入用户名')
+    return
+  }
+
+  if (!password.value.trim()) {
+    alert('请输入密码')
+    return
+  }
+
+  // 模拟登录请求
+  console.log('正在登录...', { username: username.value, password: password.value })
+
+  setTimeout(() => {
+    alert('登录成功！')
+
+    // 存储用户名
+    if (rememberMe.value) {
+      localStorage.setItem('rememberedUser', username.value)
+    } else {
+      localStorage.removeItem('rememberedUser')
+    }
+
+    // 跳转页面
+    router.push('/navigation')
+  }, 800)
+}
+const handleAccountLogin = async () => {
+  try {
+    // const requestParam: any = omit(values, ['code']);
+    // 登录
+    await authStore.authLogin({
+      grantType: "password",
+      password: password.value,
+      tenantId: "000000",
+      username: username.value,
+    });
+  } catch (error) {
+    console.error(error);
+  }
+}
 </script>
 
 <template>
+  <div class="login-bg">
+    <div class="login-wapter">
+      <div class="login-wapter1">欢迎登录</div>
+      <div class="login-wapter2">南川区综合服务中心数智平台</div>
+    </div>
+    <div class="login-bg_1">
+      <div class="login-container">
+        <div class="login-header">
+
+          <div class="login-form">
+            <h3>用户登录</h3>
+            <!-- 用户名输入 -->
+            <div class="input-group">
+              <img src="../../../../../apps/web-antd/src/assets/my.png" alt="User Icon" class="input-icon">
+              <input
+                  type="text"
+                  placeholder="请输入您的用户名"
+                  v-model="username"
+              />
+            </div>
+
+            <!-- 密码输入 -->
+            <div class="input-group">
+              <img src="../../../../../apps/web-antd/src/assets/mima.png" alt="Password Icon" class="input-icon">
+              <input
+                  type="password"
+                  placeholder="请输入您的密码"
+                  v-model="password"
+              />
+            </div>
+
+            <!-- 记住密码 -->
+            <!-- <div class="remember-me">
+              <Checkbox v-model:checked="rememberMe">记住密码</Checkbox>
+            </div> -->
+            <!-- 登录按钮 -->
+            <button @click="handleAccountLogin">点 击 登 录</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div
     :class="[isDark ? 'dark' : '']"
     class="flex min-h-full flex-1 select-none overflow-x-hidden"
+    style="display: none;"
   >
     <template v-if="toolbar">
       <slot name="toolbar">
@@ -137,7 +247,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
   </div>
 </template>
 
-<style scoped>
+<!-- <style scoped>
 .login-background {
   background: linear-gradient(
     154deg,
@@ -159,4 +269,148 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
     filter: blur(100px);
   }
 }
+</style> -->
+<style scoped>
+.login-bg {
+  min-height: 100vh;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background:
+  url('../../../../../apps/web-antd/src/assets/juxing.png') no-repeat center center fixed,
+  url('../../../../../apps/web-antd/src/assets/222.gif');
+  background-size: cover, cover;
+  color: #fff;
+}
+.login-bg_1 {
+  flex: 1 1 auto;
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  background: url('../../../../../apps/web-antd/src/assets/from.png') no-repeat center center fixed;
+}
+.login-wapter{
+  .login-wapter1 {
+  font-size: 36px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.login-wapter2 {
+  font-size: 50px;
+  margin-bottom: 38px;
+  color: #ccc;
+  font-size: 36px;
+  font-weight: bold;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+}
+}
+
+
+
+.login-form {
+  border-radius: 10px;
+  padding: 45px;
+  width: 397px;
+  margin: 0 auto;
+}
+
+.login-form h3 {
+  font-size: 26px;
+  margin-bottom: 40px;
+  color: #fff;
+}
+
+.login-form input {
+  padding: 10px;
+  margin-bottom: 15px;
+  border: 1px solid #fff; /* 设置边框线为白色 */
+  border-radius: 2px;
+  width: 364px;
+  border: 0;
+  outline: none;
+  -webkit-text-fill-color: #fff;
+}
+input:-webkit-autofill {
+  transition: background-color 5000s ease-in-out 0s;
+}
+.login-form label {
+  display: flex;
+  text-align: left;
+  margin-top: 5px;
+  margin-left: 7px;
+  font-size: 16px;
+  color: #eee;
+}
+
+.login-form button {
+  width: 100%;
+  padding: 10px;
+  margin-top: 20px;
+  border: none;
+  border-radius: 5px;
+  background-color: #19DCF8;
+  color: #0254A5;
+  cursor: pointer;
+  font-size: 22px;
+  margin-top: 70px;
+  font-weight: 600;
+}
+
+.login-form button:hover {
+  background-color: #00aaff;
+}
+
+.remember-me {
+  display: flex;
+  align-items: center;
+  padding-left: 25px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #eee;
+}
+
+
+
+/* 新增 .input-group 样式 */
+.input-group {
+  display: flex;
+  align-items: center;
+  border-radius: 2px;
+  width: 100%;
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.input-icon {
+  padding: 0px 10px 10px 10px;
+  pointer-events: none; /* 确保用户不能点击图标 */
+  position: absolute;
+  /* top: 17px; */
+  left: 0;
+}
+
+.login-form input {
+  height: 40px;
+  line-height: 40px; /* 必须与 height 一致 */
+  padding-left: 33px;
+  border: 0.1px solid rgba(255, 255, 255, 0.44);
+  outline: none;
+  background-color: transparent;
+  color: #fff;
+}
+.login-form input::placeholder {
+  color: rgba(255, 255, 255, 0.42); /* 例如灰色 */
+}
 </style>