-
合格率分布
+
合格率分布(≥86%/＜86%)
{
- console.log("质量组件定时检查滚动");
- this.$nextTick(() => {
- this.startTableAutoScroll();
- });
- }, 10000);
-
// 设置5分钟定时刷新
this.refreshTimer = setInterval(() => {
this.getQualityData();
@@ -189,15 +218,12 @@ export default {
},
updated() {
- // 数据更新后初始化图表和启动表格滚动
+ // 数据更新后初始化图表
this.$nextTick(() => {
- console.log("质量组件updated生命周期调用");
if (this.qualityStatisticsTable.length > 0) {
this.initQualifiedRatePieChart();
this.initTop5Chart();
}
- // 无论数据是否为空，都尝试启动滚动，确保表格有内容时能正常滚动
- this.startTableAutoScroll();
});
},
@@ -212,29 +238,37 @@ export default {
this.top5Chart.dispose();
this.top5Chart = null;
}
- // 清理表格滚动定时器（setInterval）
- if (this.tableScrollTimer) {
- clearInterval(this.tableScrollTimer);
- this.tableScrollTimer = null;
- }
- // 清理滚动检查定时器
- if (this.scrollCheckTimer) {
- clearInterval(this.scrollCheckTimer);
- this.scrollCheckTimer = null;
- }
// 清理数据刷新定时器
if (this.refreshTimer) {
clearInterval(this.refreshTimer);
this.refreshTimer = null;
}
},
-
+ computed: {
+ // vue-seamless-scroll配置
+ scrollOptions() {
+ return {
+ step: 0.5, // 滚动速度，值越大速度越快
+ limitMoveNum: 1, // 开始无缝滚动的数据量，滚动的数据列表要大于等于这个值
+ hoverStop: false, // 是否开启鼠标悬停停止
+ direction: 1, // 0 向下 1 向上 2 向左 3 向右
+ openWatch: true, // 开启数据监听，数据变化时自动滚动
+ singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)，只有direction为0或1时生效
+ singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动)，只有direction为2或3时生效
+ waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+ switchOffset: 0, // 左右切换的偏移量
+ autoPlay: true, // 是否自动播放
+ switchSingleStep: 150, // 切换步数
+ switchDelay: 3000, // 切换延迟
+ ease: "easeInOutQuad", // 缓动函数
+ easing: "linear", // 动画过渡效果
+ };
+ },
+ },
methods: {
init() {
- // 设置默认时间范围为今天
- const today = new Date();
- this.search.starttime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
- this.search.endtime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59);
+ // 根据默认时间范围设置时间
+ this.setTimeRange("daily");
},
// 合格率去除小数
@@ -245,12 +279,38 @@ export default {
return parseInt(num);
},
+ // 设置时间范围
+ setTimeRange(type) {
+ this.timeRange = type;
+ const today = dayjs();
+
+ if (type === "daily") {
+ // 今天
+ this.search.startTime = today.startOf("day").toDate();
+ this.search.endTime = today.endOf("day").toDate();
+ } else if (type === "weekly") {
+ // 本周（周一到周日）
+ this.search.startTime = today.startOf("week").toDate();
+ this.search.endTime = today.endOf("week").toDate();
+ }
+
+ // 重新查询数据
+ this.getQualityData();
+ },
+
+ // 格式化日期为字符串（传给后台）
+ formatDateForBackend(date) {
+ return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
+ },
+
// 获取质量数据
getQualityData() {
this.loading = true;
- // 设置默认查询参数
+ // 设置默认查询参数，将日期转换为字符串格式
let query = {
...this.search,
+ startTime: this.formatDateForBackend(this.search.startTime),
+ endTime: this.formatDateForBackend(this.search.endTime),
pageNum: 1,
pageSize: 20,
};
@@ -260,13 +320,12 @@ export default {
if (res.code == 200) {
this.qualityStatisticsTable = res.data || [];
this.allDataList = res.data || [];
- console.log("质量数据加载完成，共", this.qualityStatisticsTable.length, "条记录");
+
// 计算统计数据
this.calculateStatistics();
// 数据加载完成后立即启动滚动
this.$nextTick(() => {
- console.log("质量数据加载后启动滚动");
this.startTableAutoScroll();
});
}
@@ -349,9 +408,9 @@ export default {
// 过滤有合格数据的记录
const validData = this.allDataList.filter((item) => item.qualifiedRate !== null && item.qualifiedRate !== "" && !isNaN(item.qualifiedRate));
- // 统计合格率80%以上和80%以下的数量
- const above80 = validData.filter((item) => parseFloat(item.qualifiedRate) >= 80).length;
- const below80 = validData.filter((item) => parseFloat(item.qualifiedRate) < 80).length;
+ // 统计合格率86%以上和86%以下的数量
+ const above86 = validData.filter((item) => parseFloat(item.qualifiedRate) >= 86).length;
+ const below86 = validData.filter((item) => parseFloat(item.qualifiedRate) < 86).length;
const option = {
tooltip: {
@@ -361,7 +420,7 @@ export default {
legend: {
orient: "horizontal",
bottom: 10,
- data: ["合格率≥80%", "合格率<80%"],
+ data: ["合格率≥86%", "合格率<86%"],
textStyle: {
color: "#00ffff",
fontSize: 12,
@@ -394,8 +453,8 @@ export default {
},
},
data: [
- { value: above80, name: "合格率≥80%", itemStyle: { color: "#67c23a" } },
- { value: below80, name: "合格率<80%", itemStyle: { color: "#f56c6c" } },
+ { value: above86, name: "合格率≥86%", itemStyle: { color: "#67c23a" } },
+ { value: below86, name: "合格率<86%", itemStyle: { color: "#f56c6c" } },
].filter((item) => item.value > 0), // 过滤掉数量为0的类别
},
],
@@ -507,77 +566,8 @@ export default {
this.top5Chart.setOption(option);
},
-
- // 表格自动滚动功能 - 修复滚动逻辑
- startTableAutoScroll() {
- // 先清理之前的定时器，防止累积
- if (this.tableScrollTimer) {
- clearInterval(this.tableScrollTimer);
- this.tableScrollTimer = null;
- }
-
- // 确保表格元素已渲染
- this.$nextTick(() => {
- // 直接获取DOM元素，避免选择器问题
- const tableSection = this.$el.querySelector(".table-section");
- const wrapper = tableSection ? tableSection.querySelector(".custom-table-wrapper") : null;
- if (!wrapper) {
- return;
- }
-
- // 重要：确保容器内容高度大于容器高度才需要滚动
- const scrollableHeight = wrapper.scrollHeight - wrapper.clientHeight;
- if (scrollableHeight <= 0) {
- return; // 内容不足，不需要滚动
- }
-
- // 优化滚动容器样式设置
- wrapper.style.overflow = "auto";
- wrapper.style.overflowX = "auto"; // 改为auto，允许水平滚动以防止内容被截断
- wrapper.style.scrollBehavior = "smooth";
-
- // 重置滚动位置
- wrapper.scrollTop = 0;
-
- // 滚动速度
- const scrollSpeed = 2;
-
- // 使用setInterval实现滚动
- this.tableScrollTimer = setInterval(() => {
- try {
- if (wrapper && wrapper.isConnected) {
- // 检查元素是否仍在DOM中
- // 检查是否滚动到底部
- if (wrapper.scrollTop + 10 >= wrapper.scrollHeight - 600) {
- // 重置到顶部
- wrapper.scrollTop = 0;
- } else {
- // 持续滚动
- wrapper.scrollTop += scrollSpeed;
- }
- } else {
- // 元素已不在DOM中，清理定时器
- clearInterval(this.tableScrollTimer);
- this.tableScrollTimer = null;
- }
- } catch (error) {
- // 捕获可能的错误，避免卡顿
- clearInterval(this.tableScrollTimer);
- this.tableScrollTimer = null;
- }
- }, 50);
- });
- },
-
// 处理窗口大小变化
handleResize() {
- // 获取窗口高度
- const windowHeight = window.innerHeight;
- // 计算可用高度，减去标题高度和padding等
- const availableHeight = windowHeight - 60;
- // 计算表格高度，确保表格固定高度且不会超出屏幕
- this.tableHeight = Math.min(Math.max(availableHeight - 140, 260), 600) + "px";
-
// 调整图表大小
if (this.qualifiedRatePieChart) {
this.qualifiedRatePieChart.resize();
@@ -592,40 +582,51 @@ export default {