|
|
@@ -238,111 +238,69 @@
|
|
|
<div class="work-calendar">
|
|
|
<div class="calendar-view-title">
|
|
|
<span>{{ calendarViewTitle }}</span>
|
|
|
- <div class="calendar-title-tools">
|
|
|
- <el-radio-group
|
|
|
- v-model="selectedCalendarType"
|
|
|
- size="mini"
|
|
|
- class="calendar-type-switch"
|
|
|
- @change="handleCalendarTypeChange"
|
|
|
- >
|
|
|
- <el-radio-button
|
|
|
- v-for="item in calendarTypeOptions"
|
|
|
- :key="item.value"
|
|
|
- :label="item.value"
|
|
|
- >
|
|
|
- {{ item.shortLabel }}
|
|
|
- </el-radio-button>
|
|
|
- </el-radio-group>
|
|
|
- </div>
|
|
|
</div>
|
|
|
<div class="calendar-week">
|
|
|
<span v-for="item in weekNames" :key="item">{{ item }}</span>
|
|
|
</div>
|
|
|
- <div ref="calendarGrid" class="calendar-grid">
|
|
|
- <el-tooltip
|
|
|
+ <div
|
|
|
+ ref="calendarGrid"
|
|
|
+ class="calendar-grid"
|
|
|
+ @scroll.passive="hideCalendarHoverTooltip"
|
|
|
+ @wheel.passive="hideCalendarHoverTooltip"
|
|
|
+ >
|
|
|
+ <div
|
|
|
v-for="day in calendarCells"
|
|
|
:key="day.key"
|
|
|
- :disabled="!day.date"
|
|
|
- placement="bottom-start"
|
|
|
- effect="light"
|
|
|
- popper-class="calendar-day-tooltip"
|
|
|
- :popper-append-to-body="false"
|
|
|
- :open-delay="120"
|
|
|
- :hide-after="0"
|
|
|
- :enterable="false"
|
|
|
+ class="calendar-cell"
|
|
|
+ :class="getCalendarDayClass(day)"
|
|
|
+ @mouseenter="showCalendarHoverTooltip(day, $event)"
|
|
|
+ @mousemove="moveCalendarHoverTooltip($event)"
|
|
|
+ @mouseleave="hideCalendarHoverTooltip"
|
|
|
+ @click="day.date && openCalendarDayDrawer(day)"
|
|
|
>
|
|
|
- <div slot="content" class="calendar-tooltip-content">
|
|
|
- <div class="tooltip-head">
|
|
|
- <strong>{{ day.date }}</strong>
|
|
|
- <span v-if="isConflictDay(day)">冲突</span>
|
|
|
- </div>
|
|
|
- <div class="tooltip-row">
|
|
|
- <span>日期类型</span>
|
|
|
- <strong>{{ getDateTypeText(getDayDateType(day)) }}</strong>
|
|
|
- </div>
|
|
|
- <div class="tooltip-row">
|
|
|
- <span>时段</span>
|
|
|
- <strong>{{ getDayRangeText(getDayDetails(day)) }}</strong>
|
|
|
- </div>
|
|
|
- <div class="tooltip-row">
|
|
|
- <span>排班状态</span>
|
|
|
- <strong>{{ hasSchedule(day.date) ? '已排产' : '未排产/空闲' }}</strong>
|
|
|
- </div>
|
|
|
- <div class="tooltip-row">
|
|
|
- <span>临时调整</span>
|
|
|
- <strong>{{ isTempAdjustDay(day) ? '是' : '否' }}</strong>
|
|
|
- </div>
|
|
|
- <div class="tooltip-row">
|
|
|
- <span>冲突说明</span>
|
|
|
- <strong>{{ getDayConflictText(day) || '无' }}</strong>
|
|
|
- </div>
|
|
|
- <div class="tooltip-stats">
|
|
|
- <span>关联计划 {{ getDayPlanCount(day) }}</span>
|
|
|
- <span>明细 {{ getDayDetails(day).length }}</span>
|
|
|
- </div>
|
|
|
+ <div v-if="day.date" class="day-head">
|
|
|
+ <span>{{ day.dayText }}</span>
|
|
|
+ <el-tag
|
|
|
+ v-if="isHolidayDay(day)"
|
|
|
+ size="mini"
|
|
|
+ class="holiday-tag"
|
|
|
+ >
|
|
|
+ 节假日
|
|
|
+ </el-tag>
|
|
|
+ <em v-if="day.isToday">今</em>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="calendar-cell"
|
|
|
- :class="getCalendarDayClass(day)"
|
|
|
- @click="day.date && openCalendarDayDrawer(day)"
|
|
|
- >
|
|
|
- <div v-if="day.date" class="day-head">
|
|
|
- <span>{{ day.dayText }}</span>
|
|
|
- <el-tag
|
|
|
- v-if="isHolidayDay(day)"
|
|
|
- size="mini"
|
|
|
- class="holiday-tag"
|
|
|
- >
|
|
|
- 节假日
|
|
|
- </el-tag>
|
|
|
- <el-tag
|
|
|
- v-else-if="isTempAdjustDay(day)"
|
|
|
- size="mini"
|
|
|
- class="temp-adjust-tag"
|
|
|
- >
|
|
|
- 临调
|
|
|
- </el-tag>
|
|
|
- <em v-if="day.isToday">今</em>
|
|
|
- </div>
|
|
|
- <div v-if="day.date" class="day-body">
|
|
|
- <span
|
|
|
- v-for="(item, index) in getDayPeriodList(day)"
|
|
|
- :key="`${day.date}-${index}`"
|
|
|
- class="period-pill"
|
|
|
- >
|
|
|
- {{ item }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div v-if="day.date" class="day-foot">
|
|
|
- <span v-if="getDayStatusText(day)" class="plan-text">
|
|
|
- {{ getDayStatusText(day) }}
|
|
|
- </span>
|
|
|
- <span v-if="isConflictDay(day)" class="conflict-text">
|
|
|
- 冲突
|
|
|
- </span>
|
|
|
- </div>
|
|
|
+ <div v-if="day.date" class="day-foot">
|
|
|
+ <span v-if="getDayStatusText(day)" class="plan-text">
|
|
|
+ {{ getDayStatusText(day) }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="calendarHoverDay"
|
|
|
+ class="calendar-hover-tooltip"
|
|
|
+ :style="calendarHoverTooltipStyle"
|
|
|
+ >
|
|
|
+ <div class="hover-tooltip-head">
|
|
|
+ <span>{{ calendarHoverDay.date }}</span>
|
|
|
+ <strong>{{ getDateTypeText(getDayDateType(calendarHoverDay)) }}</strong>
|
|
|
+ </div>
|
|
|
+ <div class="hover-tooltip-grid">
|
|
|
+ <div>
|
|
|
+ <span>排班状态</span>
|
|
|
+ <strong>
|
|
|
+ {{ hasSchedule(calendarHoverDay.date) ? '已排产' : '未排产/空闲' }}
|
|
|
+ </strong>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>关联计划</span>
|
|
|
+ <strong>{{ getDayPlanCount(calendarHoverDay) }}</strong>
|
|
|
</div>
|
|
|
- </el-tooltip>
|
|
|
+ <div>
|
|
|
+ <span>明细数量</span>
|
|
|
+ <strong>{{ getDayDetails(calendarHoverDay).length }}</strong>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -377,12 +335,6 @@
|
|
|
<el-tag v-if="currentDay.isRest" size="mini" type="info">
|
|
|
休息/节假日
|
|
|
</el-tag>
|
|
|
- <el-tag v-if="currentDay.isTempAdjust" size="mini">
|
|
|
- 临时调整
|
|
|
- </el-tag>
|
|
|
- <el-tag v-if="currentDay.isConflict" size="mini" type="danger">
|
|
|
- 存在冲突
|
|
|
- </el-tag>
|
|
|
<el-tag v-if="currentDay.planCount" size="mini" type="warning">
|
|
|
{{ currentDay.planCount }} 个计划
|
|
|
</el-tag>
|
|
|
@@ -516,7 +468,8 @@
|
|
|
getList,
|
|
|
getMyProjectTotal,
|
|
|
getMyWorkOrderTotal,
|
|
|
- getMyTaskTotal
|
|
|
+ getMyTaskTotal,
|
|
|
+ getMyWorkCalendar
|
|
|
} from '@/api/home';
|
|
|
import { viewCalendar } from '@/api/productionScheduling/factoryCalendar';
|
|
|
import { deepClone } from 'ele-admin/lib/utils/core';
|
|
|
@@ -554,12 +507,14 @@
|
|
|
myProjectList: {},
|
|
|
myWorkOrderList: {},
|
|
|
myTaskList: {},
|
|
|
- myWorkCalendar: {},
|
|
|
- groupedWorkCalendar: {}, // 分组后的工作日历数据
|
|
|
- selectedScheduleDate: '', // 当前选中的日期
|
|
|
- dayDrawerVisible: false,
|
|
|
- currentDay: {},
|
|
|
- weekNames: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
|
+ myWorkCalendar: {},
|
|
|
+ groupedWorkCalendar: {}, // 分组后的工作日历数据
|
|
|
+ selectedScheduleDate: '', // 当前选中的日期
|
|
|
+ dayDrawerVisible: false,
|
|
|
+ currentDay: {},
|
|
|
+ calendarHoverDay: null,
|
|
|
+ calendarHoverTooltipStyle: {},
|
|
|
+ weekNames: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -627,41 +582,41 @@
|
|
|
idleDays: Math.max(days.length - busyDays - restDays, 0)
|
|
|
};
|
|
|
},
|
|
|
- currentNotifications() {
|
|
|
- const notifications = this.notifications[this.activeTab] || [];
|
|
|
- return notifications;
|
|
|
- },
|
|
|
- dayDrawerTitle() {
|
|
|
- return this.currentDay.date
|
|
|
- ? `${this.currentDay.date} 日历详情`
|
|
|
- : '日历详情';
|
|
|
- },
|
|
|
- drawerDateMonth() {
|
|
|
- return this.currentDay.date ? this.currentDay.date.slice(0, 7) : '';
|
|
|
- },
|
|
|
- drawerDateDay() {
|
|
|
- return this.currentDay.date ? this.currentDay.date.slice(8, 10) : '';
|
|
|
- },
|
|
|
- relatedSectionTitle() {
|
|
|
- return this.isTeamQueueDrawer ? '排班详情' : '关联计划';
|
|
|
- },
|
|
|
- isEquipmentDrawer() {
|
|
|
- return (
|
|
|
- Number(this.selectedCalendarType) === 2 ||
|
|
|
- (this.currentDay.details || []).some(
|
|
|
- (item) => Number(item.calendarType) === 2
|
|
|
- )
|
|
|
- );
|
|
|
+ currentNotifications() {
|
|
|
+ const notifications = this.notifications[this.activeTab] || [];
|
|
|
+ return notifications;
|
|
|
+ },
|
|
|
+ dayDrawerTitle() {
|
|
|
+ return this.currentDay.date
|
|
|
+ ? `${this.currentDay.date} 日历详情`
|
|
|
+ : '日历详情';
|
|
|
+ },
|
|
|
+ drawerDateMonth() {
|
|
|
+ return this.currentDay.date ? this.currentDay.date.slice(0, 7) : '';
|
|
|
+ },
|
|
|
+ drawerDateDay() {
|
|
|
+ return this.currentDay.date ? this.currentDay.date.slice(8, 10) : '';
|
|
|
+ },
|
|
|
+ relatedSectionTitle() {
|
|
|
+ return this.isTeamQueueDrawer ? '排班详情' : '关联计划';
|
|
|
+ },
|
|
|
+ isEquipmentDrawer() {
|
|
|
+ return (
|
|
|
+ Number(this.selectedCalendarType) === 2 ||
|
|
|
+ (this.currentDay.details || []).some(
|
|
|
+ (item) => Number(item.calendarType) === 2
|
|
|
+ )
|
|
|
+ );
|
|
|
+ },
|
|
|
+ isTeamQueueDrawer() {
|
|
|
+ return (
|
|
|
+ Number(this.selectedCalendarType) === 3 ||
|
|
|
+ (this.currentDay.details || []).some(
|
|
|
+ (item) => Number(item.calendarType) === 3
|
|
|
+ )
|
|
|
+ );
|
|
|
+ }
|
|
|
},
|
|
|
- isTeamQueueDrawer() {
|
|
|
- return (
|
|
|
- Number(this.selectedCalendarType) === 3 ||
|
|
|
- (this.currentDay.details || []).some(
|
|
|
- (item) => Number(item.calendarType) === 3
|
|
|
- )
|
|
|
- );
|
|
|
- }
|
|
|
- },
|
|
|
watch: {
|
|
|
currentDate: {
|
|
|
handler(newVal, oldVal) {
|
|
|
@@ -727,6 +682,12 @@
|
|
|
// });
|
|
|
},
|
|
|
async getMyWorkCalendar() {
|
|
|
+ const dataList = await getMyWorkCalendar({
|
|
|
+ startDate: this.calendarRange[0],
|
|
|
+ endDate: this.calendarRange[1]
|
|
|
+ });
|
|
|
+ console.log('myWorkCalendar~~~', dataList);
|
|
|
+
|
|
|
const date = new Date(this.currentDate);
|
|
|
const res = await viewCalendar({
|
|
|
calendarType: this.selectedCalendarType,
|
|
|
@@ -767,6 +728,40 @@
|
|
|
this.groupedWorkCalendar = {};
|
|
|
this.getMyWorkCalendar();
|
|
|
},
|
|
|
+ showCalendarHoverTooltip(day, event) {
|
|
|
+ if (!day || !day.date) {
|
|
|
+ this.hideCalendarHoverTooltip();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.calendarHoverDay = day;
|
|
|
+ this.updateCalendarHoverTooltipPosition(event);
|
|
|
+ },
|
|
|
+ moveCalendarHoverTooltip(event) {
|
|
|
+ if (!this.calendarHoverDay) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.updateCalendarHoverTooltipPosition(event);
|
|
|
+ },
|
|
|
+ hideCalendarHoverTooltip() {
|
|
|
+ this.calendarHoverDay = null;
|
|
|
+ },
|
|
|
+ updateCalendarHoverTooltipPosition(event) {
|
|
|
+ const width = 260;
|
|
|
+ const height = 150;
|
|
|
+ const gap = 14;
|
|
|
+ let left = event.clientX + gap;
|
|
|
+ let top = event.clientY + gap;
|
|
|
+ if (left + width > window.innerWidth - 12) {
|
|
|
+ left = event.clientX - width - gap;
|
|
|
+ }
|
|
|
+ if (top + height > window.innerHeight - 12) {
|
|
|
+ top = event.clientY - height - gap;
|
|
|
+ }
|
|
|
+ this.calendarHoverTooltipStyle = {
|
|
|
+ left: `${Math.max(left, 12)}px`,
|
|
|
+ top: `${Math.max(top, 12)}px`
|
|
|
+ };
|
|
|
+ },
|
|
|
scrollCurrentWeekToTop() {
|
|
|
const grid = this.$refs.calendarGrid;
|
|
|
if (!grid) {
|
|
|
@@ -781,9 +776,8 @@
|
|
|
return;
|
|
|
}
|
|
|
const weekIndex = Math.floor(todayIndex / 7);
|
|
|
- const weekStartCell = grid.querySelectorAll('.calendar-cell')[
|
|
|
- weekIndex * 7
|
|
|
- ];
|
|
|
+ const weekStartCell =
|
|
|
+ grid.querySelectorAll('.calendar-cell')[weekIndex * 7];
|
|
|
if (!weekStartCell) {
|
|
|
grid.scrollTop = 0;
|
|
|
return;
|
|
|
@@ -797,29 +791,29 @@
|
|
|
behavior: 'auto'
|
|
|
});
|
|
|
},
|
|
|
- handleDateClick(day) {
|
|
|
- console.log('day~~~', day);
|
|
|
- this.selectedScheduleDate = day;
|
|
|
- },
|
|
|
- openCalendarDayDrawer(day) {
|
|
|
- if (!day || !day.date) {
|
|
|
- return;
|
|
|
- }
|
|
|
- this.handleDateClick(day.date);
|
|
|
- this.currentDay = {
|
|
|
- ...day,
|
|
|
- details: this.getDayDetails(day),
|
|
|
- planCount: this.getDayPlanCount(day),
|
|
|
- scheduleStatus: this.hasSchedule(day.date),
|
|
|
- isRest: this.isRestDay(day),
|
|
|
- isConflict: this.isConflictDay(day),
|
|
|
- isTempAdjust: this.isTempAdjustDay(day),
|
|
|
- isMaintenance: this.isMaintenanceDay(day),
|
|
|
- relatedPlans: this.getDayRelatedPlans(day),
|
|
|
- conflictText: this.getDayConflictText(day)
|
|
|
- };
|
|
|
- this.dayDrawerVisible = true;
|
|
|
- },
|
|
|
+ handleDateClick(day) {
|
|
|
+ console.log('day~~~', day);
|
|
|
+ this.selectedScheduleDate = day;
|
|
|
+ },
|
|
|
+ openCalendarDayDrawer(day) {
|
|
|
+ if (!day || !day.date) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.handleDateClick(day.date);
|
|
|
+ this.currentDay = {
|
|
|
+ ...day,
|
|
|
+ details: this.getDayDetails(day),
|
|
|
+ planCount: this.getDayPlanCount(day),
|
|
|
+ scheduleStatus: this.hasSchedule(day.date),
|
|
|
+ isRest: this.isRestDay(day),
|
|
|
+ isConflict: this.isConflictDay(day),
|
|
|
+ isTempAdjust: this.isTempAdjustDay(day),
|
|
|
+ isMaintenance: this.isMaintenanceDay(day),
|
|
|
+ relatedPlans: this.getDayRelatedPlans(day),
|
|
|
+ conflictText: this.getDayConflictText(day)
|
|
|
+ };
|
|
|
+ this.dayDrawerVisible = true;
|
|
|
+ },
|
|
|
getScheduleListByDate() {
|
|
|
if (
|
|
|
this.selectedScheduleDate &&
|
|
|
@@ -865,8 +859,6 @@
|
|
|
idle: !this.hasSchedule(day.date) && !this.isRestDay(day),
|
|
|
holiday: this.isHolidayDay(day),
|
|
|
maintenance: this.isMaintenanceDay(day),
|
|
|
- temp: this.isTempAdjustDay(day),
|
|
|
- conflict: this.isConflictDay(day),
|
|
|
'is-today': day.isToday,
|
|
|
'is-selected': day.isSelected
|
|
|
};
|
|
|
@@ -876,18 +868,13 @@
|
|
|
return '';
|
|
|
}
|
|
|
const details = this.getDayDetails(day);
|
|
|
- const rangeText = this.getDayPeriodList(day).join(',') || '无时段';
|
|
|
const statusText = this.hasSchedule(day.date)
|
|
|
? '已排产'
|
|
|
: '未排产/空闲';
|
|
|
- const conflictText = this.getDayConflictText(day);
|
|
|
return [
|
|
|
`日期:${day.date}`,
|
|
|
`日期类型:${this.getDateTypeText(this.getDayDateType(day))}`,
|
|
|
- `时段:${rangeText}`,
|
|
|
`排班状态:${statusText}`,
|
|
|
- `临时调整:${this.isTempAdjustDay(day) ? '是' : '否'}`,
|
|
|
- `冲突说明:${conflictText || '无'}`,
|
|
|
`关联计划数:${this.getDayPlanCount(day)}`,
|
|
|
`明细数:${details.length}`
|
|
|
].join('\n');
|
|
|
@@ -922,14 +909,14 @@
|
|
|
return relatedPlans.length;
|
|
|
}
|
|
|
return details.reduce((sum, item) => {
|
|
|
- return (
|
|
|
- sum + Number(item.relationPlanCount || item.planCount || 0)
|
|
|
- );
|
|
|
+ return sum + Number(item.relationPlanCount || item.planCount || 0);
|
|
|
}, 0);
|
|
|
},
|
|
|
getDetailRelatedPlans(item) {
|
|
|
return [
|
|
|
- ...(Array.isArray(item.relationPlanList) ? item.relationPlanList : []),
|
|
|
+ ...(Array.isArray(item.relationPlanList)
|
|
|
+ ? item.relationPlanList
|
|
|
+ : []),
|
|
|
...(Array.isArray(item.relationEamPlanList)
|
|
|
? item.relationEamPlanList
|
|
|
: []),
|
|
|
@@ -1050,7 +1037,12 @@
|
|
|
return '全天';
|
|
|
},
|
|
|
getDetailTitle(item) {
|
|
|
- return item.dutyName || item.dateTypeName || item.typeText || this.getDateTypeText(item.dateType);
|
|
|
+ return (
|
|
|
+ item.dutyName ||
|
|
|
+ item.dateTypeName ||
|
|
|
+ item.typeText ||
|
|
|
+ this.getDateTypeText(item.dateType)
|
|
|
+ );
|
|
|
},
|
|
|
getPlanUniqueKey(plan = {}, fallback = '') {
|
|
|
return (
|
|
|
@@ -1103,7 +1095,12 @@
|
|
|
);
|
|
|
},
|
|
|
getRelatedQueueName(plan = {}) {
|
|
|
- return plan.teamQueueName || plan.queueName || this.getPlanNameFallback(plan) || '-';
|
|
|
+ return (
|
|
|
+ plan.teamQueueName ||
|
|
|
+ plan.queueName ||
|
|
|
+ this.getPlanNameFallback(plan) ||
|
|
|
+ '-'
|
|
|
+ );
|
|
|
},
|
|
|
getRelatedQueueUserName(plan = {}) {
|
|
|
return plan.userName || plan.userNames || plan.staffName || '';
|
|
|
@@ -1126,7 +1123,9 @@
|
|
|
);
|
|
|
},
|
|
|
getPlanObjectName(plan) {
|
|
|
- const calendarType = Number(plan.calendarType || this.selectedCalendarType);
|
|
|
+ const calendarType = Number(
|
|
|
+ plan.calendarType || this.selectedCalendarType
|
|
|
+ );
|
|
|
if (calendarType === 2) {
|
|
|
return (
|
|
|
plan.equipmentName ||
|
|
|
@@ -1821,44 +1820,44 @@
|
|
|
justify-content: flex-end;
|
|
|
min-width: 0;
|
|
|
|
|
|
- .calendar-type-switch {
|
|
|
- display: inline-flex;
|
|
|
- padding: 3px;
|
|
|
- border: 1px solid #d9e5f2;
|
|
|
- border-radius: 8px;
|
|
|
- background: #f6f9fd;
|
|
|
- white-space: nowrap;
|
|
|
+ .calendar-type-switch {
|
|
|
+ display: inline-flex;
|
|
|
+ padding: 3px;
|
|
|
+ border: 1px solid #d9e5f2;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #f6f9fd;
|
|
|
+ white-space: nowrap;
|
|
|
|
|
|
- ::v-deep .el-radio-button__inner {
|
|
|
- height: 28px;
|
|
|
- padding: 0 13px;
|
|
|
- border: 0;
|
|
|
- border-radius: 6px;
|
|
|
- color: #536273;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 700;
|
|
|
- line-height: 28px;
|
|
|
- background: transparent;
|
|
|
- box-shadow: none;
|
|
|
- }
|
|
|
+ ::v-deep .el-radio-button__inner {
|
|
|
+ height: 28px;
|
|
|
+ padding: 0 13px;
|
|
|
+ border: 0;
|
|
|
+ border-radius: 6px;
|
|
|
+ color: #536273;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 28px;
|
|
|
+ background: transparent;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
|
|
|
- ::v-deep .el-radio-button:first-child .el-radio-button__inner {
|
|
|
- border-radius: 6px;
|
|
|
- }
|
|
|
+ ::v-deep .el-radio-button:first-child .el-radio-button__inner {
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
|
|
|
- ::v-deep .el-radio-button:last-child .el-radio-button__inner {
|
|
|
- border-radius: 6px;
|
|
|
- }
|
|
|
+ ::v-deep .el-radio-button:last-child .el-radio-button__inner {
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
|
|
|
- ::v-deep
|
|
|
- .el-radio-button__orig-radio:checked
|
|
|
- + .el-radio-button__inner {
|
|
|
- background: #2f80ed;
|
|
|
- color: #fff;
|
|
|
- box-shadow: 0 4px 10px rgba(47, 128, 237, 0.24);
|
|
|
+ ::v-deep
|
|
|
+ .el-radio-button__orig-radio:checked
|
|
|
+ + .el-radio-button__inner {
|
|
|
+ background: #2f80ed;
|
|
|
+ color: #fff;
|
|
|
+ box-shadow: 0 4px 10px rgba(47, 128, 237, 0.24);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.calendar-week {
|
|
|
@@ -2001,23 +2000,6 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- &.temp {
|
|
|
- background: #f5efff;
|
|
|
-
|
|
|
- &::before {
|
|
|
- background: #9254de;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.conflict {
|
|
|
- background: #fef0f0;
|
|
|
- animation: conflictFlash 1.4s infinite;
|
|
|
-
|
|
|
- &::before {
|
|
|
- background: #f56c6c;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
&.is-today {
|
|
|
box-shadow: inset 0 0 0 1px rgba(64, 158, 255, 0.45);
|
|
|
}
|
|
|
@@ -2068,21 +2050,6 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .temp-adjust-tag {
|
|
|
- height: 15px;
|
|
|
- padding: 0 3px;
|
|
|
- border-color: #d3b7ff;
|
|
|
- background: #f4efff;
|
|
|
- color: #7c3fd1;
|
|
|
- font-size: 9px;
|
|
|
- font-weight: 700;
|
|
|
- line-height: 13px;
|
|
|
- white-space: nowrap;
|
|
|
- transform: scale(0.88);
|
|
|
- transform-origin: right top;
|
|
|
- margin-left: auto;
|
|
|
- }
|
|
|
-
|
|
|
.holiday-tag {
|
|
|
height: 15px;
|
|
|
padding: 0 3px;
|
|
|
@@ -2097,28 +2064,6 @@
|
|
|
transform-origin: right top;
|
|
|
}
|
|
|
|
|
|
- .day-body {
|
|
|
- min-height: 34px;
|
|
|
- margin: 4px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .period-pill {
|
|
|
- display: block;
|
|
|
- width: fit-content;
|
|
|
- max-width: 100%;
|
|
|
- margin-bottom: 3px;
|
|
|
- padding: 0 4px;
|
|
|
- border: 1px solid rgba(144, 147, 153, 0.16);
|
|
|
- border-radius: 4px;
|
|
|
- background: rgba(255, 255, 255, 0.72);
|
|
|
- color: #606266;
|
|
|
- font-size: 10px;
|
|
|
- line-height: 16px;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
.day-foot {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
@@ -2151,16 +2096,106 @@
|
|
|
line-height: 16px;
|
|
|
}
|
|
|
|
|
|
- .conflict-text {
|
|
|
- flex: 0 0 auto;
|
|
|
- margin-left: auto;
|
|
|
- color: #ff4d4f;
|
|
|
- font-size: 11px;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .calendar-hover-tooltip {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 3000;
|
|
|
+ width: 260px;
|
|
|
+ padding: 0;
|
|
|
+ border: 1px solid rgba(64, 158, 255, 0.28);
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0 14px 32px rgba(21, 42, 74, 0.2);
|
|
|
+ pointer-events: none;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 4px;
|
|
|
+ background: linear-gradient(180deg, #2f80ed, #13c2c2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hover-tooltip-head {
|
|
|
+ padding: 12px 14px 10px 18px;
|
|
|
+ background:
|
|
|
+ linear-gradient(90deg, rgba(47, 128, 237, 0.1), rgba(19, 194, 194, 0.04)),
|
|
|
+ #f7fbff;
|
|
|
+ border-bottom: 1px solid #e4edf7;
|
|
|
+
|
|
|
+ span,
|
|
|
+ strong {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #1f3d66;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ strong {
|
|
|
+ margin-top: 3px;
|
|
|
+ color: #607089;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hover-tooltip-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
+ gap: 8px;
|
|
|
+ padding: 12px 12px 12px 16px;
|
|
|
+ background:
|
|
|
+ linear-gradient(180deg, #ffffff, #f8fbff),
|
|
|
+ repeating-linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ transparent 0,
|
|
|
+ transparent 28px,
|
|
|
+ rgba(64, 158, 255, 0.04) 29px
|
|
|
+ );
|
|
|
+
|
|
|
+ div {
|
|
|
+ min-width: 0;
|
|
|
+ padding: 8px 6px;
|
|
|
+ border: 1px solid #e4edf7;
|
|
|
+ border-radius: 6px;
|
|
|
+ background: rgba(255, 255, 255, 0.86);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ span,
|
|
|
+ strong {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #7b8794;
|
|
|
+ font-size: 11px;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ strong {
|
|
|
+ margin-top: 2px;
|
|
|
+ color: #1f66c2;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.mt-20 {
|
|
|
margin-top: 6px;
|
|
|
@@ -2196,91 +2231,6 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- ::v-deep .calendar-day-tooltip {
|
|
|
- max-width: 310px;
|
|
|
- padding: 0;
|
|
|
- border: 1px solid #cfe0f5;
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: 0 12px 28px rgba(31, 45, 61, 0.16);
|
|
|
-
|
|
|
- .popper__arrow {
|
|
|
- border-top-color: #cfe0f5 !important;
|
|
|
- border-bottom-color: #cfe0f5 !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .calendar-tooltip-content {
|
|
|
- min-width: 260px;
|
|
|
- padding: 12px 14px;
|
|
|
- color: #303133;
|
|
|
- background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
|
|
|
- border-radius: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .tooltip-head {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- gap: 12px;
|
|
|
- margin-bottom: 10px;
|
|
|
- padding-bottom: 8px;
|
|
|
- border-bottom: 1px solid #e6eef8;
|
|
|
-
|
|
|
- strong {
|
|
|
- color: #1f3d66;
|
|
|
- font-size: 15px;
|
|
|
- line-height: 20px;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- height: 20px;
|
|
|
- padding: 0 8px;
|
|
|
- border-radius: 10px;
|
|
|
- background: #fff1f0;
|
|
|
- color: #f5222d;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 700;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tooltip-row {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 68px minmax(0, 1fr);
|
|
|
- gap: 10px;
|
|
|
- align-items: start;
|
|
|
- margin-top: 7px;
|
|
|
- font-size: 13px;
|
|
|
- line-height: 20px;
|
|
|
-
|
|
|
- span {
|
|
|
- color: #7b8794;
|
|
|
- }
|
|
|
-
|
|
|
- strong {
|
|
|
- color: #2f3a4a;
|
|
|
- font-weight: 600;
|
|
|
- word-break: break-all;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tooltip-stats {
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- margin-top: 12px;
|
|
|
-
|
|
|
- span {
|
|
|
- padding: 3px 9px;
|
|
|
- border-radius: 12px;
|
|
|
- background: #edf5ff;
|
|
|
- color: #1f66c2;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 700;
|
|
|
- line-height: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
::v-deep .calendar-day-drawer {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -2603,17 +2553,6 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- @keyframes conflictFlash {
|
|
|
- 0%,
|
|
|
- 100% {
|
|
|
- box-shadow: inset 0 0 0 1px rgba(245, 108, 108, 0.25);
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- box-shadow: inset 0 0 0 2px rgba(245, 108, 108, 0.75);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
.notification-card {
|
|
|
.card-content {
|
|
|
height: 100%;
|