feat(zinc): 新增PDO接口和日期筛选组件，重构生产统计页面
refactor(api): 移除冗余API路径前缀 style(websocket): 移除重复的日志打印 feat(label): 新增原料标签组件并替换生产标签 refactor(lines): 移除废弃的流程图组件和配置 feat(utils): 新增日期范围工具函数 feat(statistic): 集成日期筛选和图表分析功能
This commit is contained in:
砂糖
248
klp-ui/src/views/lines/components/DateViewPicker.vue
Normal file
248
klp-ui/src/views/lines/components/DateViewPicker.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<div class="date-filter-view" style="display: flex; align-items: center; gap: 20px; flex-wrap: wrap;">
|
||||
<!-- 视图模式选择（Vue2 v-model 绑定value） -->
|
||||
<el-select
|
||||
v-model="innerViewMode"
|
||||
placeholder="选择视图模式"
|
||||
style="width: 120px;"
|
||||
>
|
||||
<el-option label="日视图" value="day"></el-option>
|
||||
<el-option label="月视图" value="month"></el-option>
|
||||
<el-option label="年视图" value="year"></el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 日视图：日期范围选择 -->
|
||||
<div v-if="innerViewMode === 'day'">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
@change="handleDateRangeChange"
|
||||
style="width: 350px;"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
|
||||
<!-- 月视图：月份范围选择 -->
|
||||
<div v-if="innerViewMode === 'month'">
|
||||
<el-date-picker
|
||||
v-model="monthRange"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份"
|
||||
format="yyyy-MM"
|
||||
value-format="yyyy-MM"
|
||||
@change="handleMonthRangeChange"
|
||||
style="width: 350px;"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
|
||||
<!-- 年视图：年份选择 -->
|
||||
<div v-if="innerViewMode === 'year'">
|
||||
<el-date-picker
|
||||
v-model="selectedYear"
|
||||
type="year"
|
||||
placeholder="选择年份"
|
||||
format="yyyy"
|
||||
value-format="yyyy"
|
||||
@change="handleYearChange"
|
||||
style="width: 200px;"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
|
||||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 导入日期工具函数（Vue2 导入语法不变）
|
||||
import { getCurrentMonthFirstDayOrToday } from '../utils/monent'; // 请根据实际路径调整
|
||||
|
||||
export default {
|
||||
name: 'DateFilterView',
|
||||
// Vue2 Props 定义（v-model 对应 value，而非 modelValue）
|
||||
props: {
|
||||
// Vue2 v-model 绑定的视图模式（day/month/year）
|
||||
value: {
|
||||
type: String,
|
||||
default: 'day',
|
||||
validator: (val) => ['day', 'month', 'year'].includes(val)
|
||||
},
|
||||
// .sync 双向绑定的开始时间
|
||||
startTime: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// .sync 双向绑定的结束时间
|
||||
endTime: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 内部视图模式（避免直接修改props）
|
||||
innerViewMode: this.value,
|
||||
dateRange: [], // 日视图日期范围
|
||||
monthRange: [], // 月视图月份范围
|
||||
selectedYear: '' // 年视图选中年份
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// Vue2 监听外部 v-model 变化（监听 value）
|
||||
value(newVal) {
|
||||
this.innerViewMode = newVal;
|
||||
// 视图变化时初始化对应默认值
|
||||
this.initViewDefault(newVal);
|
||||
},
|
||||
// 监听内部视图模式变化，触发外部事件
|
||||
innerViewMode(newVal) {
|
||||
// Vue2 v-model 更新事件为 input（而非 update:modelValue）
|
||||
this.$emit('input', newVal);
|
||||
// 触发视图切换自定义事件
|
||||
this.$emit('view-change', newVal);
|
||||
// 清空其他视图的选择器
|
||||
this.clearOtherViewData(newVal);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 初始化默认视图的日期值
|
||||
this.initViewDefault(this.innerViewMode);
|
||||
// 如果外部传入了startTime/endTime，同步到内部选择器
|
||||
this.syncExternalDateToInner();
|
||||
},
|
||||
methods: {
|
||||
// 初始化对应视图的默认日期
|
||||
initViewDefault(viewMode) {
|
||||
if (viewMode === 'day') {
|
||||
this.initDayViewDefault();
|
||||
} else if (viewMode === 'month') {
|
||||
this.initMonthViewDefault();
|
||||
} else if (viewMode === 'year') {
|
||||
this.initYearViewDefault();
|
||||
}
|
||||
},
|
||||
// 清空非当前视图的选择器数据
|
||||
clearOtherViewData(currentView) {
|
||||
if (currentView !== 'day') this.dateRange = [];
|
||||
if (currentView !== 'month') this.monthRange = [];
|
||||
if (currentView !== 'year') this.selectedYear = '';
|
||||
},
|
||||
// 同步外部传入的startTime/endTime到内部选择器
|
||||
syncExternalDateToInner() {
|
||||
if (!this.startTime || !this.endTime) return;
|
||||
|
||||
if (this.innerViewMode === 'day') {
|
||||
this.dateRange = [this.startTime, this.endTime];
|
||||
} else if (this.innerViewMode === 'month') {
|
||||
// 从startTime/endTime提取月份（yyyy-MM）
|
||||
const startMonth = this.startTime.slice(0, 7);
|
||||
const endMonth = this.endTime.slice(0, 7);
|
||||
this.monthRange = [startMonth, endMonth];
|
||||
} else if (this.innerViewMode === 'year') {
|
||||
// 从startTime提取年份（yyyy）
|
||||
this.selectedYear = this.startTime.slice(0, 4);
|
||||
}
|
||||
},
|
||||
// 初始化日视图默认值：当前月第一天-今天
|
||||
initDayViewDefault() {
|
||||
if (this.startTime && this.endTime) {
|
||||
this.dateRange = [this.startTime, this.endTime];
|
||||
return;
|
||||
}
|
||||
// 调用工具函数获取默认值
|
||||
const [firstDay, today] = getCurrentMonthFirstDayOrToday();
|
||||
this.dateRange = [firstDay, today];
|
||||
// 更新外部startTime/endTime（Vue2 .sync 触发 update:xxx）
|
||||
this.updateStartAndEndTime(firstDay, today);
|
||||
},
|
||||
// 初始化月视图默认值：当前月-当前月
|
||||
initMonthViewDefault() {
|
||||
if (this.startTime && this.endTime) {
|
||||
const startMonth = this.startTime.slice(0, 7);
|
||||
const endMonth = this.endTime.slice(0, 7);
|
||||
this.monthRange = [startMonth, endMonth];
|
||||
return;
|
||||
}
|
||||
const now = new Date();
|
||||
const currentMonth = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}`;
|
||||
this.monthRange = [currentMonth, currentMonth];
|
||||
// 转换为该月第一天和最后一天
|
||||
const startDate = `${currentMonth}-01`;
|
||||
const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
|
||||
const endDate = `${lastDay.getFullYear()}-${(lastDay.getMonth() + 1).toString().padStart(2, '0')}-${lastDay.getDate().toString().padStart(2, '0')}`;
|
||||
this.updateStartAndEndTime(startDate, endDate);
|
||||
},
|
||||
// 初始化年视图默认值：当前年
|
||||
initYearViewDefault() {
|
||||
if (this.startTime && this.endTime) {
|
||||
this.selectedYear = this.startTime.slice(0, 4);
|
||||
return;
|
||||
}
|
||||
const now = new Date();
|
||||
const currentYear = now.getFullYear().toString();
|
||||
this.selectedYear = currentYear;
|
||||
// 转换为该年1月1日和12月31日
|
||||
const startDate = `${currentYear}-01-01`;
|
||||
const endDate = `${currentYear}-12-31`;
|
||||
this.updateStartAndEndTime(startDate, endDate);
|
||||
},
|
||||
// 更新开始/结束时间（Vue2 .sync 触发 update:startTime/update:endTime）
|
||||
updateStartAndEndTime(start, end) {
|
||||
this.$emit('update:startTime', start);
|
||||
this.$emit('update:endTime', end);
|
||||
// 触发日期变更自定义事件
|
||||
this.$emit('date-change', { startTime: start, endTime: end });
|
||||
},
|
||||
// 日视图日期范围变化处理
|
||||
handleDateRangeChange(val) {
|
||||
if (val && val.length === 2) {
|
||||
this.updateStartAndEndTime(val[0], val[1]);
|
||||
} else {
|
||||
this.updateStartAndEndTime(undefined, undefined);
|
||||
}
|
||||
},
|
||||
// 月视图月份范围变化处理
|
||||
handleMonthRangeChange(val) {
|
||||
if (val && val.length === 2) {
|
||||
// 开始月份转该月第一天
|
||||
const startDate = `${val[0]}-01`;
|
||||
// 结束月份转该月最后一天
|
||||
const [endYear, endMonth] = val[1].split('-');
|
||||
const lastDay = new Date(endYear, endMonth, 0);
|
||||
const endDate = `${lastDay.getFullYear()}-${(lastDay.getMonth() + 1).toString().padStart(2, '0')}-${lastDay.getDate().toString().padStart(2, '0')}`;
|
||||
this.updateStartAndEndTime(startDate, endDate);
|
||||
}
|
||||
},
|
||||
// 年视图年份变化处理
|
||||
handleYearChange(val) {
|
||||
if (val) {
|
||||
const startDate = `${val}-01-01`;
|
||||
const endDate = `${val}-12-31`;
|
||||
this.updateStartAndEndTime(startDate, endDate);
|
||||
}
|
||||
},
|
||||
// 查询按钮点击事件
|
||||
handleQuery() {
|
||||
this.$emit('query', {
|
||||
viewMode: this.innerViewMode,
|
||||
startTime: this.startTime,
|
||||
endTime: this.endTime
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.date-filter-view {
|
||||
background: #fff;
|
||||
padding: 15px 20px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user