添加看板代码
This commit is contained in:
parent
e6789f9d91
commit
2cec12510e
|
|
@ -32,29 +32,24 @@ import Inbound from './views/Inbound.vue';
|
|||
import Outbound from './views/Outbound.vue';
|
||||
import Pick from './views/Pick.vue';
|
||||
|
||||
// 使用传统函数语法替换箭头函数，并添加浏览器兼容性检查
|
||||
function debounce(fn, delay) {
|
||||
var timer = null;
|
||||
const debounce = (fn, delay) => {
|
||||
let timer = null;
|
||||
return function () {
|
||||
var context = this;
|
||||
var args = arguments;
|
||||
let context = this;
|
||||
let args = arguments;
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function () {
|
||||
fn.apply(context, args);
|
||||
}, delay);
|
||||
};
|
||||
}
|
||||
|
||||
// 条件性使用 ResizeObserver 以避免低版本浏览器报错
|
||||
if (window.ResizeObserver) {
|
||||
var _ResizeObserver = window.ResizeObserver;
|
||||
window.ResizeObserver = function ResizeObserver(callback) {
|
||||
};
|
||||
const _ResizeObserver = window.ResizeObserver;
|
||||
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
|
||||
constructor(callback) {
|
||||
callback = debounce(callback, 16);
|
||||
_ResizeObserver.call(this, callback);
|
||||
};
|
||||
window.ResizeObserver.prototype = Object.create(_ResizeObserver.prototype);
|
||||
window.ResizeObserver.prototype.constructor = window.ResizeObserver;
|
||||
}
|
||||
super(callback);
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
|
|
@ -67,17 +62,10 @@ export default {
|
|||
const route = useRoute();
|
||||
const isFullscreenState = ref(false);
|
||||
|
||||
// 获取当前standId - 使用更兼容的参数解析方式
|
||||
// 获取当前standId
|
||||
const currentStandId = computed(() => {
|
||||
// 为不支持 URLSearchParams 的浏览器提供备选方案
|
||||
if (window.URLSearchParams) {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
return params.get('standId');
|
||||
} else {
|
||||
// 手动解析查询参数
|
||||
var match = window.location.search.match(/[?&]standId=([^&]*)/);
|
||||
return match ? decodeURIComponent(match[1]) : null;
|
||||
}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return params.get('standId');
|
||||
});
|
||||
|
||||
// 动态标题映射
|
||||
|
|
@ -89,14 +77,14 @@ export default {
|
|||
|
||||
// 动态标题
|
||||
const dynamicTitle = computed(() => {
|
||||
var standId = currentStandId.value;
|
||||
const standId = currentStandId.value;
|
||||
if (!standId) {
|
||||
// 没有standId时，显示默认标题，立库和状态之间留出两个字空格空间
|
||||
return '丰尚立库 状态一览表';
|
||||
}
|
||||
var operation = titleMapping[standId];
|
||||
const operation = titleMapping[standId];
|
||||
if (operation) {
|
||||
return '丰尚立库 ' + operation + ' 状态一览表';
|
||||
return `丰尚立库 ${operation} 状态一览表`;
|
||||
}
|
||||
// 如果standId不在映射中，显示默认标题
|
||||
return '丰尚立库 状态一览表';
|
||||
|
|
@ -104,58 +92,42 @@ export default {
|
|||
|
||||
// 根据standId动态选择组件
|
||||
const currentComponent = computed(() => {
|
||||
var standId = currentStandId.value;
|
||||
const standId = currentStandId.value;
|
||||
if (standId === '2') return 'Outbound';
|
||||
if (standId === '3') return 'Pick';
|
||||
return 'Inbound'; // 默认显示入库组件
|
||||
});
|
||||
|
||||
// 全屏功能相关函数 - 使用传统函数语法
|
||||
function isFullscreen() {
|
||||
return !!(document.fullscreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.msFullscreenElement);
|
||||
return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
|
||||
}
|
||||
|
||||
function requestFS(el) {
|
||||
async function requestFS(el) {
|
||||
if (el.requestFullscreen) return el.requestFullscreen();
|
||||
if (el.webkitRequestFullscreen) return el.webkitRequestFullscreen();
|
||||
if (el.mozRequestFullScreen) return el.mozRequestFullScreen();
|
||||
if (el.msRequestFullscreen) return el.msRequestFullscreen();
|
||||
}
|
||||
|
||||
function exitFS() {
|
||||
async function exitFS() {
|
||||
if (document.exitFullscreen) return document.exitFullscreen();
|
||||
if (document.webkitExitFullscreen) return document.webkitExitFullscreen();
|
||||
if (document.mozCancelFullScreen) return document.mozCancelFullScreen();
|
||||
if (document.msExitFullscreen) return document.msExitFullscreen();
|
||||
}
|
||||
|
||||
// 添加更完善的检测和错误处理
|
||||
function enterFullscreen() {
|
||||
async function enterFullscreen() {
|
||||
try {
|
||||
// 检查是否支持任何全屏 API
|
||||
var supportsFullscreen = !!(document.fullscreenEnabled ||
|
||||
document.webkitFullscreenEnabled ||
|
||||
document.mozFullScreenEnabled ||
|
||||
document.msFullscreenEnabled);
|
||||
|
||||
if (!supportsFullscreen) {
|
||||
console.warn('Fullscreen not supported');
|
||||
return;
|
||||
}
|
||||
|
||||
requestFS(document.documentElement);
|
||||
await requestFS(document.documentElement);
|
||||
isFullscreenState.value = true;
|
||||
} catch (err) {
|
||||
console.error('Error attempting to enable full-screen mode:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function exitFullscreen() {
|
||||
async function exitFullscreen() {
|
||||
try {
|
||||
exitFS();
|
||||
await exitFS();
|
||||
isFullscreenState.value = false;
|
||||
} catch (err) {
|
||||
console.error('Error attempting to exit full-screen mode:', err);
|
||||
|
|
@ -166,44 +138,27 @@ export default {
|
|||
isFullscreenState.value = isFullscreen();
|
||||
}
|
||||
|
||||
// 使用传统事件绑定方式以提高兼容性
|
||||
function addEventListenerCompat(element, event, handler) {
|
||||
if (element.addEventListener) {
|
||||
element.addEventListener(event, handler);
|
||||
} else if (element.attachEvent) {
|
||||
element.attachEvent('on' + event, handler);
|
||||
}
|
||||
}
|
||||
|
||||
function removeEventListenerCompat(element, event, handler) {
|
||||
if (element.removeEventListener) {
|
||||
element.removeEventListener(event, handler);
|
||||
} else if (element.detachEvent) {
|
||||
element.detachEvent('on' + event, handler);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
isFullscreenState.value = isFullscreen();
|
||||
addEventListenerCompat(document, 'fullscreenchange', handleFullscreenChange);
|
||||
addEventListenerCompat(document, 'webkitfullscreenchange', handleFullscreenChange);
|
||||
addEventListenerCompat(document, 'mozfullscreenchange', handleFullscreenChange);
|
||||
addEventListenerCompat(document, 'MSFullscreenChange', handleFullscreenChange);
|
||||
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
||||
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
|
||||
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
|
||||
document.addEventListener('MSFullscreenChange', handleFullscreenChange);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
removeEventListenerCompat(document, 'fullscreenchange', handleFullscreenChange);
|
||||
removeEventListenerCompat(document, 'webkitfullscreenchange', handleFullscreenChange);
|
||||
removeEventListenerCompat(document, 'mozfullscreenchange', handleFullscreenChange);
|
||||
removeEventListenerCompat(document, 'MSFullscreenChange', handleFullscreenChange);
|
||||
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
||||
document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
|
||||
document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
|
||||
document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
|
||||
});
|
||||
|
||||
return {
|
||||
dynamicTitle,
|
||||
currentComponent,
|
||||
isFullscreenState,
|
||||
enterFullscreen: enterFullscreen,
|
||||
exitFullscreen: exitFullscreen
|
||||
enterFullscreen,
|
||||
exitFullscreen
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -211,4 +166,4 @@ export default {
|
|||
|
||||
<style>
|
||||
@import './assets/board-styles.css';
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,30 +39,25 @@ function mapStatus(status) {
|
|||
}
|
||||
|
||||
async function load() {
|
||||
// 参考 HomeView.vue 的写法，使用 .then().catch() 方式处理异步请求
|
||||
getTaskTypInData({ pageNum: 1, pageSize: 200 }).then(res => {
|
||||
// 检查响应结构，类似 HomeView.vue 中的处理方式
|
||||
if (res && res.code === 0) {
|
||||
const list = res.data || [];
|
||||
rows.value = list.map((t) => ({
|
||||
vehicleId: t?.vehicleId ?? '',
|
||||
origin: t?.origin ?? t?.startPoint ?? '',
|
||||
destination: t?.destination ?? t?.endPoint ?? '',
|
||||
taskPriority: (
|
||||
t?.task_priority ??
|
||||
t?.taskPriority ??
|
||||
t?.priority ??
|
||||
t?.priorityLevel ??
|
||||
''
|
||||
),
|
||||
taskStatus: mapStatus(t?.taskStatus ?? t?.status),
|
||||
}));
|
||||
} else {
|
||||
console.log('API response:', res);
|
||||
}
|
||||
}).catch(error => {
|
||||
try {
|
||||
const data = await getTaskTypInData({ pageNum: 1, pageSize: 200 });
|
||||
const list = data || [];
|
||||
rows.value = list.map((t) => ({
|
||||
vehicleId: t?.vehicleId ?? '',
|
||||
origin: t?.origin ?? t?.startPoint ?? '',
|
||||
destination: t?.destination ?? t?.endPoint ?? '',
|
||||
taskPriority: (
|
||||
t?.task_priority ??
|
||||
t?.taskPriority ??
|
||||
t?.priority ??
|
||||
t?.priorityLevel ??
|
||||
''
|
||||
),
|
||||
taskStatus: mapStatus(t?.taskStatus ?? t?.status),
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('加载入库数据失败:', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -81,4 +76,4 @@ onUnmounted(() => {
|
|||
.title-center {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user