pms 保养台历 页面样式

build/vite/optimize.ts

@@ -115,7 +115,7 @@ const include = [
   '@element-plus/icons-vue',
   'element-plus/es/components/footer/style/css',
   'element-plus/es/components/empty/style/css',
-  'element-plus/es/components/mention/style/css'
+  'element-plus/es/components/mention/style/css',
 ]
 
 const exclude = ['@iconify/json']

package.json

@@ -28,6 +28,10 @@
     "@element-plus/icons-vue": "^2.1.0",
     "@form-create/designer": "^3.2.6",
     "@form-create/element-ui": "^3.2.11",
+    "@fullcalendar/core": "6.1.17",
+    "@fullcalendar/daygrid": "^6.1.17",
+    "@fullcalendar/interaction": "^6.1.17",
+    "@fullcalendar/vue3": "^6.1.17",
     "@iconify/iconify": "^3.1.1",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@videojs-player/vue": "^1.0.0",
@@ -38,6 +42,7 @@
     "animate.css": "^4.1.1",
     "axios": "^1.6.8",
     "benz-amr-recorder": "^1.1.5",
+    "bootstrap-icons": "^1.12.1",
     "bpmn-js-token-simulation": "^0.36.0",
     "camunda-bpmn-moddle": "^7.0.1",
     "cropperjs": "^1.6.1",

src/api/pms/iotmaintenancebom/index.ts

@@ -37,6 +37,8 @@ export interface IotMaintenanceBomVO {
   deviceCode: string  // 设备编码
   deviceStatus: string  // 设备状态
   assetProperty: string //资产性质
+  totalMileage: number  // 累计运行公里数
+  totalRunTime: number  // 累计运行时间
 }
 
 // PMS 保养计划明细BOM API

src/router/modules/remaining.ts

@@ -265,6 +265,30 @@ const remainingRouter: AppRouteRecordRaw[] = [
     ]
   },
 
+  {
+    path: '/iotpms/maincalendar',
+    component: Layout,
+    name: 'PmsMainCalendarCenter',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: 'maintenancecalendar',
+        component: () => import('@/views/pms/iotmaincalendar/index.vue'),
+        name: 'MaintenanceCalendar',
+        meta: {
+          noCache: false,
+          hidden: true,
+          canTo: true,
+          icon: 'ep:menu',
+          title: '保养台历',
+          activeMenu: '/maintenancecalendar/index'
+        }
+      }
+    ]
+  },
+
   {
     path: '/iotpms/iotmaintain',
     component: Layout,

src/views/pms/iotmaincalendar/index.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="calendar-container">
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading">加载中...</div>
+
+    <!-- 主体日历 -->
+    <FullCalendar
+      ref="calendar"
+      class="main-calendar"
+      :options="calendarOptions"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import FullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import '@fullcalendar/core/locales-all'
+import 'bootstrap-icons/font/bootstrap-icons.css'
+
+defineOptions({ name: 'MaintenanceCalendar' })
+
+const router = useRouter()
+const loading = ref(false)
+const calendar = ref(null)
+
+// 模拟API返回的数据结构
+const mockData = {
+  '2023-08-01': { plans: 3, orders: 2 },
+  '2023-08-15': { plans: 5, orders: 1 },
+  '2023-08-20': { plans: 2, orders: 4 }
+}
+
+// 日历配置
+const calendarOptions = ref({
+  plugins: [dayGridPlugin, interactionPlugin],
+  // locales: [zhCn],
+  locale: 'zh-cn',
+  initialView: 'dayGridMonth',
+  headerToolbar: {
+    left: 'prev,next today',
+    center: 'title',
+    right: 'dayGridMonth,dayGridWeek'
+  },
+  buttonText: { // ✨ 自定义按钮文本（可选）
+    today: '今天',
+    month: '月视图',
+    week: '周视图'
+  },
+  events: [],
+  datesSet: handleDatesSet, // 月份切换事件
+  eventContent: renderEventContent, // 自定义内容渲染
+  height: '80vh' // 占据80%视口高度
+})
+
+// 获取数据
+async function fetchCalendarData(dateRange) {
+  try {
+    loading.value = true
+    // 实际应替换为API调用，这里用mock数据
+    return mockData
+  } finally {
+    loading.value = false
+  }
+}
+
+// 处理日期范围变化
+async function handleDatesSet(dateInfo) {
+  const data = await fetchCalendarData({
+    start: dateInfo.startStr,
+    end: dateInfo.endStr
+  })
+
+  calendar.value.getApi().removeAllEvents()
+  Object.entries(data).forEach(([date, counts]) => {
+    calendar.value.getApi().addEvent({
+      title: `${counts.plans}|${counts.orders}`,
+      start: date,
+      allDay: true,
+      extendedProps: counts
+    })
+  })
+}
+
+// 自定义内容渲染
+function renderEventContent(eventInfo) {
+  const { plans, orders } = eventInfo.event.extendedProps
+  return {
+    html: `
+      <div class="calendar-day-content">
+        <div class="count-item">
+          <a class="plan-count" data-date="${eventInfo.event.startStr}">
+            <i class="bi bi-clipboard-check"></i> ${plans}
+          </a>
+        </div>
+        <div class="count-item">
+          <a class="order-count" data-date="${eventInfo.event.startStr}">
+            <i class="bi bi-tools"></i> ${orders}
+          </a>
+        </div>
+      </div>
+    `
+  }
+}
+
+// 处理点击事件
+function handleDayClick(event) {
+  if (event.target.classList.contains('plan-count')) {
+    const date = event.target.dataset.date
+    router.push({
+      path: '/maintenance/plans',
+      query: { date }
+    })
+  }
+
+  if (event.target.classList.contains('order-count')) {
+    const date = event.target.dataset.date
+    router.push({
+      path: '/maintenance/orders',
+      query: { date }
+    })
+  }
+}
+
+// 初始化
+onMounted(() => {
+  const calendarApi = calendar.value.getApi()
+  calendarApi.setOption('eventDidMount', (info) => {
+    info.el.addEventListener('click', handleDayClick)
+  })
+})
+</script>
+
+<style scoped>
+.calendar-container {
+  padding: 20px;
+  height: 100vh;
+}
+
+.main-calendar {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.loading {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 10px 20px;
+  background: rgba(0,0,0,0.7);
+  color: white;
+  border-radius: 4px;
+}
+
+/* 自定义日历样式 */
+:deep(.fc-daygrid-day-frame) {
+  cursor: pointer;
+  min-height: 100px;
+}
+
+:deep(.calendar-day-content) {
+  padding: 5px;
+  font-size: 0.9em;
+}
+
+:deep(.count-item) {
+  margin: 2px 0;
+  padding: 2px;
+  border-radius: 3px;
+  transition: background 0.3s;
+}
+
+:deep(.plan-count) {
+  color: #1890ff;
+  text-decoration: none;
+  display: block;
+}
+
+:deep(.order-count) {
+  color: #52c41a;
+  text-decoration: none;
+  display: block;
+}
+
+:deep(.count-item:hover) {
+  background: #f5f5f5;
+}
+
+:deep(.bi) {
+  margin-right: 3px;
+}
+</style>

src/views/pms/maintenance/IotMaintenancePlan.vue

@@ -63,10 +63,10 @@
       <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
         <el-table-column label="设备编码" align="center" prop="deviceCode" />
         <el-table-column label="设备名称" align="center" prop="deviceName" />
-        <el-table-column label="运行时间(H)" align="center" prop="runningTime" :formatter="erpPriceTableColumnFormatter"/>
-        <el-table-column label="运行公里数(KM)" align="center" prop="runningKilometers" :formatter="erpPriceTableColumnFormatter"/>
+        <el-table-column label="累计运行时间(H)" align="center" prop="totalRunTime" :formatter="erpPriceTableColumnFormatter"/>
+        <el-table-column label="累计运行公里数(KM)" align="center" prop="totalMileage" :formatter="erpPriceTableColumnFormatter"/>
         <el-table-column label="BOM节点" align="center" prop="name" />
-        <el-table-column label="里程" key="mileageRule">
+        <el-table-column label="运行里程" key="mileageRule" width="80">
           <template #default="scope">
             <el-switch
               v-model="scope.row.mileageRule"
@@ -75,12 +75,14 @@
             />
           </template>
         </el-table-column>
+        <!--
         <el-table-column label="里程周期(H)" align="center" prop="nextRunningKilometers" :formatter="erpPriceTableColumnFormatter">
           <template #default="scope">
             <el-input v-model="scope.row.nextRunningKilometers" />
           </template>
         </el-table-column>
-        <el-table-column label="运行时间" key="runningTimeRule">
+        -->
+        <el-table-column label="运行时间" key="runningTimeRule" width="80">
           <template #default="scope">
             <el-switch
               v-model="scope.row.runningTimeRule"
@@ -89,12 +91,14 @@
             />
           </template>
         </el-table-column>
+        <!--
         <el-table-column label="时间周期(H)" align="center" prop="nextRunningTime" :formatter="erpPriceTableColumnFormatter">
           <template #default="scope">
             <el-input v-model="scope.row.nextRunningTime" />
           </template>
         </el-table-column>
-        <el-table-column label="自然日期" key="naturalDateRule">
+        -->
+        <el-table-column label="自然日期" key="naturalDateRule" width="80">
           <template #default="scope">
             <el-switch
               v-model="scope.row.naturalDateRule"
@@ -103,11 +107,13 @@
             />
           </template>
         </el-table-column>
+        <!--
         <el-table-column label="自然日期(D)" align="center" prop="nextNaturalDate" :formatter="erpPriceTableColumnFormatter">
           <template #default="scope">
             <el-input v-model="scope.row.nextNaturalDate" />
           </template>
         </el-table-column>
+        -->
         <el-table-column label="操作" align="center" min-width="120px">
           <template #default="scope">
             <div style="display: flex; justify-content: center; align-items: center; width: 100%">
@@ -153,7 +159,7 @@
     :title="`设备 ${configDialog.current?.deviceCode+'-'+configDialog.current?.name} 保养配置`"
     width="600px"
   >
-    <el-form :model="configDialog.form" label-width="160px">
+    <el-form :model="configDialog.form" label-width="180px" :rules="configFormRules" ref="configFormRef">
       <!-- 里程配置 -->
       <el-form-item
         v-if="configDialog.current?.mileageRule === 0"
@@ -194,6 +200,77 @@
           value-format="YYYY-MM-DD"
         />
       </el-form-item>
+      <!-- 保养规则周期值 + 提前量 -->
+      <el-form-item
+        v-if="configDialog.current?.mileageRule === 0"
+        label="里程周期(KM)"
+        prop="nextRunningKilometers"
+      >
+        <el-input-number
+          v-model="configDialog.form.nextRunningKilometers"
+          :precision="2"
+          :min="0"
+          controls-position="right"
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="configDialog.current?.mileageRule === 0"
+        label="公里数周期-提前量(KM)"
+        prop="kiloCycleLead"
+      >
+        <el-input-number
+          v-model="configDialog.form.kiloCycleLead"
+          :precision="2"
+          :min="0"
+          controls-position="right"
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="configDialog.current?.runningTimeRule === 0"
+        label="时间周期(H)"
+        prop="nextRunningTime"
+      >
+        <el-input-number
+          v-model="configDialog.form.nextRunningTime"
+          :precision="1"
+          :min="0"
+          controls-position="right"
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="configDialog.current?.runningTimeRule === 0"
+        label="时间周期-提前量(H)"
+        prop="timePeriodLead"
+      >
+        <el-input-number
+          v-model="configDialog.form.timePeriodLead"
+          :precision="1"
+          :min="0"
+          controls-position="right"
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="configDialog.current?.naturalDateRule === 0"
+        label="自然日周期(D)"
+        prop="nextNaturalDate"
+      >
+        <el-input-number
+          v-model="configDialog.form.nextNaturalDate"
+          :min="0"
+          controls-position="right"
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="configDialog.current?.naturalDateRule === 0"
+        label="自然日周期-提前量(D)"
+        prop="naturalDatePeriodLead"
+      >
+        <el-input-number
+          v-model="configDialog.form.naturalDatePeriodLead"
+          :min="0"
+          controls-position="right"
+        />
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button @click="configDialog.visible = false">取消</el-button>
@@ -226,6 +303,7 @@ const { delView } = useTagsViewStore() // 视图操作
 const { currentRoute, push } = useRouter()
 const deptUsers = ref<UserApi.UserVO[]>([]) // 用户列表
 const dept = ref() // 当前登录人所属部门对象
+const configFormRef = ref() // 配置弹出框对象
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
@@ -257,7 +335,15 @@ const configDialog = reactive({
   form: {
     lastRunningKilometers: 0,
     lastRunningTime: 0,
-    lastNaturalDate: ''
+    lastNaturalDate: '',
+    // 保养规则 周期
+    nextRunningKilometers: 0,
+    nextRunningTime: 0,
+    nextNaturalDate: 0,
+    // 提前量
+    kiloCycleLead: 0,
+    timePeriodLead: 0,
+    naturalDatePeriodLead: 0
   }
 })
 
@@ -278,41 +364,73 @@ const openConfigDialog = (row: IotMaintenanceBomVO) => {
   configDialog.form = {
     lastRunningKilometers: row.lastRunningKilometers || 0,
     lastRunningTime: row.lastRunningTime || 0,
-    lastNaturalDate: initialDate
+    lastNaturalDate: initialDate,
+    // 保养规则 周期值
+    nextRunningKilometers: row.nextRunningKilometers || 0,
+    nextRunningTime: row.nextRunningTime || 0,
+    nextNaturalDate: row.nextNaturalDate || 0,
+    // 提前量
+    kiloCycleLead: row.kiloCycleLead || 0,
+    timePeriodLead: row.timePeriodLead || 0,
+    naturalDatePeriodLead: row.naturalDatePeriodLead || 0
   }
   configDialog.visible = true
 }
 
 // 保存配置
 const saveConfig = () => {
-  if (!configDialog.current) return
+  (configFormRef.value as any).validate((valid: boolean) => {
+    if (!valid) return
+    if (!configDialog.current) return
 
-  // 强制校验逻辑
-  if (configDialog.current.naturalDateRule === 0) {
-    if (!configDialog.form.lastNaturalDate) {
-      message.error('必须选择自然日期')
-      return
+    // 动态校验逻辑
+    const requiredFields = []
+    if (configDialog.current.mileageRule === 0) {
+      requiredFields.push('nextRunningKilometers', 'kiloCycleLead')
+    }
+    if (configDialog.current.runningTimeRule === 0) {
+      requiredFields.push('nextRunningTime', 'timePeriodLead')
     }
+    if (configDialog.current.naturalDateRule === 0) {
+      requiredFields.push('nextNaturalDate', 'naturalDatePeriodLead')
+    }
+
+    const missingFields = requiredFields.filter(field =>
+      !configDialog.form[field as keyof typeof configDialog.form]
+    )
 
-    // 验证日期有效性
-    const dateValue = dayjs(configDialog.form.lastNaturalDate)
-    if (!dateValue.isValid()) {
-      message.error('日期格式不正确')
+    if (missingFields.length > 0) {
+      message.error('请填写所有必填项')
       return
     }
-  }
 
-  // 转换逻辑（关键修改）
-  const finalDate = configDialog.form.lastNaturalDate
-    ? dayjs(configDialog.form.lastNaturalDate).valueOf()
-    : null // 改为null而不是0
+    // 强制校验逻辑
+    if (configDialog.current.naturalDateRule === 0) {
+      if (!configDialog.form.lastNaturalDate) {
+        message.error('必须选择自然日期')
+        return
+      }
+
+      // 验证日期有效性
+      const dateValue = dayjs(configDialog.form.lastNaturalDate)
+      if (!dateValue.isValid()) {
+        message.error('日期格式不正确')
+        return
+      }
+    }
+
+    // 转换逻辑（关键修改）
+    const finalDate = configDialog.form.lastNaturalDate
+      ? dayjs(configDialog.form.lastNaturalDate).valueOf()
+      : null // 改为null而不是0
 
-  // 更新当前行的数据
-  Object.assign(configDialog.current, {
-    ...configDialog.form,
-    lastNaturalDate: finalDate
+    // 更新当前行的数据
+    Object.assign(configDialog.current, {
+      ...configDialog.form,
+      lastNaturalDate: finalDate
+    })
+    configDialog.visible = false
   })
-  configDialog.visible = false
 }
 
 const queryParams = reactive({
@@ -325,7 +443,6 @@ const deviceChoose = async(selectedDevices) => {
   const params = {
     deviceIds: deviceIds.value.join(',') // 明确传递数组参数
   }
-  // console.log('请求参数:', JSON.parse(JSON.stringify(params.deviceIds)))
   queryParams.deviceIds = JSON.parse(JSON.stringify(params.deviceIds))
   // 根据选择的设备筛选出设备关系的分类BOM中与保养相关的节点项
   const res = await IotDeviceApi.deviceAssociateBomList(queryParams)
@@ -350,12 +467,16 @@ const deviceChoose = async(selectedDevices) => {
     remark: null,    // 初始化备注
     deviceId: device.id, // 移除操作需要
     bomNodeId: device.bomNodeId,
-    runningTime: 0,
-    runningKilometers: 0,
+    totalRunTime: device.totalRunTime,
+    totalMileage: device.totalMileage,
     nextRunningKilometers: 0,
     nextRunningTime: 0,
     nextNaturalDate: 0,
     lastNaturalDate: null, // 初始化为null而不是0
+    // 保养规则 提前量
+    kiloCycleLead: 0,
+    timePeriodLead: 0,
+    naturalDatePeriodLead: 0
   }))
   // 获取选择的设备相关的id数组
   newItems.forEach(item => {
@@ -382,25 +503,6 @@ const close = () => {
   push({ name: 'IotMaintenancePlan', params:{}})
 }
 
-const selectChoose = (formData) => {
-  console.log('接收到的数据:', JSON.stringify(formData))
-  list.value.push(formData)
-}
-const handleChildSubmit = (formData) => {
-  const modified = removeOnesFromKeys(formData)
-  list.value.push(modified)
-}
-
-const removeOnesFromKeys = (obj: Record<string, any>) => {
-  return Object.keys(obj).reduce(
-    (acc, key) => {
-      const newKey = key.replace(/1/g, '') // 替换所有 1
-      acc[newKey] = obj[key]
-      return acc
-    },
-    {} as Record<string, any>
-  )
-}
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
@@ -416,7 +518,6 @@ const submitForm = async () => {
       mainPlan: formData.value,
       mainPlanBom: list.value
     }
-    // console.log('列表数据：'+data.mainPlanBom[0].lastRunningKilometers)
     if (formType.value === 'create') {
       await IotMaintenancePlanApi.createIotMaintenancePlan(data)
       message.success(t('common.createSuccess'))
@@ -433,6 +534,40 @@ const submitForm = async () => {
   }
 }
 
+// 新增表单校验规则
+const configFormRules = reactive({
+  nextRunningKilometers: [{
+    required: true,
+    message: '里程周期必须填写',
+    trigger: 'blur'
+  }],
+  kiloCycleLead: [{
+    required: true,
+    message: '提前量必须填写',
+    trigger: 'blur'
+  }],
+  nextRunningTime: [{
+    required: true,
+    message: '时间周期必须填写',
+    trigger: 'blur'
+  }],
+  timePeriodLead: [{
+    required: true,
+    message: '提前量必须填写',
+    trigger: 'blur'
+  }],
+  nextNaturalDate: [{
+    required: true,
+    message: '自然日周期必须填写',
+    trigger: 'blur'
+  }],
+  naturalDatePeriodLead: [{
+    required: true,
+    message: '提前量必须填写',
+    trigger: 'blur'
+  }]
+})
+
 /** 校验表格数据 */
 const validateTableData = (): boolean => {
   let isValid = true
@@ -441,6 +576,15 @@ const validateTableData = (): boolean => {
   const noRules: string[] = []  // 行记录中设置了保养规则的记录数量
   const configErrors: string[] = []   // 保养规则配置弹出框
   let shouldBreak = false;
+
+  if (list.value.length === 0) {
+    errorMessages.push('请至少添加一条设备保养明细')
+    isValid = false
+    // 直接返回无需后续校验
+    message.error('请至少添加一条设备保养明细')
+    return isValid
+  }
+
   list.value.forEach((row, index) => {
     if (shouldBreak) return;
     const rowNumber = index + 1 // 用户可见的行号从1开始
@@ -532,7 +676,7 @@ onMounted(async () => {
   // 查询当前登录人所属部门名称
   dept.value = await DeptApi.getDept(deptId)
   // 根据当前登录人部门信息生成生成 保养计划 名称
-  formData.value.name = dept.value.name + '-保养计划'
+  formData.value.name = dept.value.name + ' - 保养计划'
   deptUsers.value = await UserApi.getDeptUsersByDeptId(deptId)
   formData.value.deptId = deptId
   if (id){