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