724 lines
32 KiB
Vue
724 lines
32 KiB
Vue
<template>
|
||
<view class="container" @click="handleCanvasClick">
|
||
<view class="gesture-container"
|
||
@touchstart="handleTouchEvent"
|
||
@touchmove="handleTouchEvent"
|
||
@touchend="handleTouchEvent"
|
||
@touchcancel="handleTouchEvent">
|
||
|
||
<!-- 显示调试信息 -->
|
||
<view class="debug-info">
|
||
<text>缩放: {{scaleValue.toFixed(2)}} | X: {{transformMatrix.tx.toFixed(1)}} | Y: {{transformMatrix.ty.toFixed(1)}}</text>
|
||
<text>手势: {{gestureStatus}}</text>
|
||
<text>触点: {{touchPoints}}</text>
|
||
</view>
|
||
|
||
<transform-canvas
|
||
ref="canvasRef"
|
||
:width="canvasWidth"
|
||
:height="canvasHeight"
|
||
:matrix="transformMatrix"
|
||
:imgUrl="'https://assets.tech.troyrc.com/sx25/images/events/XBDT.jpg'"
|
||
:areaData="currentView === 'area' ? seatAreas : []"
|
||
:seatData="currentView === 'seat' ? seatPositions : []"
|
||
:selectedCodes="selectedCodes"
|
||
/>
|
||
</view>
|
||
<!-- isShowSeat -->
|
||
|
||
<!-- <view class="controls">
|
||
<button @click="resetCanvas">重置</button>
|
||
<button @click="zoomIn">放大</button>
|
||
<button @click="zoomOut">缩小</button>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import TransformMatrix from './transform-matrix.js'
|
||
import GestureHandler from './gesture-handler.js'
|
||
import TransformCanvas from './transform-canvas.vue'
|
||
|
||
export default {
|
||
components: {
|
||
TransformCanvas
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
canvasWidth: 800,
|
||
canvasHeight: 600,
|
||
transformMatrix: new TransformMatrix(),
|
||
gestureHandler: null,
|
||
containerRect: null,
|
||
gestureStatus: '等待手势...',
|
||
scaleValue: 1,
|
||
touchPoints: 0,
|
||
lastGestureTime: 0,
|
||
seatAreas: [], // 座位区域数据
|
||
currentView:'area',
|
||
seatPositions: [], // 座位数据
|
||
selectedArea: null, // 当前选中分区
|
||
selectedCodes: new Set(), // 存储选中的座位code
|
||
};
|
||
},
|
||
|
||
async mounted() {
|
||
await this.getContainerPosition();
|
||
this.initGestureHandler();
|
||
|
||
// 加载座位区域数据
|
||
await this.loadSeatAreas();
|
||
|
||
// 初始绘制
|
||
this.$nextTick(() => {
|
||
this.updateCanvas();
|
||
});
|
||
},
|
||
|
||
methods: {
|
||
handleCanvasClick(e) {
|
||
if (!this.containerRect) return;
|
||
|
||
// 获取dpr
|
||
const dpr = this.$refs.canvasRef.dpr || 1;
|
||
|
||
// 计算点击坐标（考虑dpr）
|
||
const x = (e.detail.x - this.containerRect.left) * dpr;
|
||
const y = (e.detail.y - this.containerRect.top) * dpr;
|
||
console.log('handleCanvasClick',x,y)
|
||
if (this.currentView === 'area') {
|
||
const hitArea = this.$refs.canvasRef.checkHitArea(x, y);
|
||
console.log('handleCanvasClick',hitArea)
|
||
if (hitArea) {
|
||
uni.showModal({
|
||
title: '请确认',
|
||
content: `您确实要选择分区:${hitArea.areaname}吗?`,
|
||
showCancel: true,
|
||
success: async(res) => {
|
||
if(res.confirm){
|
||
// 切换到座位视图
|
||
this.selectedArea = hitArea;
|
||
this.currentView = 'seat';
|
||
this.loadSeatData(hitArea.areacode)
|
||
}
|
||
},
|
||
})
|
||
}
|
||
} else if (this.currentView === 'seat') {
|
||
const hitSeat = this.$refs.canvasRef.checkSeatHit(x, y);
|
||
if (hitSeat) {
|
||
console.log('选中座位:', hitSeat);
|
||
this.toggleSeatSelection(hitSeat);
|
||
// 这里可以添加座位选择逻辑
|
||
}
|
||
}
|
||
},
|
||
|
||
|
||
toggleSeatSelection(seat) {
|
||
if (seat.status !== 1) return; // 只允许选择可用座位
|
||
|
||
if (this.selectedCodes.has(seat.code)) {
|
||
this.selectedCodes.delete(seat.code);
|
||
} else {
|
||
// 限制最多选择4个座位
|
||
if (this.selectedCodes.size < 4) {
|
||
this.selectedCodes.add(seat.code);
|
||
} else {
|
||
uni.showToast({
|
||
title: '最多只能选择4个座位',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
this.$refs.canvasRef.redraw(); // 触发重绘
|
||
},
|
||
|
||
async getContainerPosition() {
|
||
// 添加重试机制
|
||
let retryCount = 0;
|
||
const maxRetries = 3;
|
||
|
||
while (retryCount < maxRetries) {
|
||
try {
|
||
const rect = await new Promise(resolve => {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select('.gesture-container').boundingClientRect(res => {
|
||
resolve(res);
|
||
}).exec();
|
||
});
|
||
|
||
if (rect) {
|
||
this.containerRect = {
|
||
left: rect.left,
|
||
top: rect.top,
|
||
width: rect.width,
|
||
height: rect.height
|
||
};
|
||
return;
|
||
}
|
||
} catch (e) {
|
||
console.error('获取容器位置失败:', e);
|
||
}
|
||
|
||
// 等待后重试
|
||
await new Promise(r => setTimeout(r, 100));
|
||
retryCount++;
|
||
}
|
||
},
|
||
|
||
initGestureHandler() {
|
||
try {
|
||
this.gestureHandler = new GestureHandler(this, this.transformMatrix, {
|
||
container: this.containerRect
|
||
});
|
||
console.log( 'initGestureHandler', this.gestureHandler )
|
||
} catch (e) {
|
||
console.error('手势处理器初始化失败:', e);
|
||
// 简化降级方案
|
||
this.gestureHandler = {
|
||
catchEvent: this.createGestureFallback(),
|
||
setScale: (scale) => {
|
||
this.transformMatrix.scale(scale, scale, this.canvasWidth/2, this.canvasHeight/2);
|
||
this.updateCanvas();
|
||
},
|
||
reset: () => {
|
||
this.transformMatrix.reset();
|
||
this.updateCanvas();
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
createGestureFallback() {
|
||
let isClick = true;
|
||
let startPoint = null;
|
||
let startTime = null;
|
||
let lastPoint = null;
|
||
|
||
return (event) => {
|
||
const touches = event.touches || [];
|
||
|
||
if (touches.length === 1) {
|
||
const getPoint = (t) => ({
|
||
x: t.clientX - this.containerRect.left,
|
||
y: t.clientY - this.containerRect.top
|
||
});
|
||
|
||
const currentPoint = getPoint(touches[0]);
|
||
|
||
if (!startPoint) {
|
||
startPoint = currentPoint;
|
||
startTime = Date.now();
|
||
}
|
||
|
||
const dx = currentPoint.x - startPoint.x;
|
||
const dy = currentPoint.y - startPoint.y;
|
||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||
|
||
// 如果是点击（移动距离小于阈值且时间短）
|
||
if (isClick && distance < 5 && Date.now() - startTime < 200) {
|
||
return; // 不执行移动操作
|
||
}
|
||
|
||
// 标记为非点击操作
|
||
isClick = false;
|
||
|
||
// 执行移动操作
|
||
if (lastPoint) {
|
||
const moveDx = currentPoint.x - lastPoint.x;
|
||
const moveDy = currentPoint.y - lastPoint.y;
|
||
|
||
this.transformMatrix.tx += moveDx;
|
||
this.transformMatrix.ty += moveDy;
|
||
}
|
||
|
||
lastPoint = currentPoint;
|
||
}
|
||
|
||
// 在触摸结束时重置状态
|
||
if (event.type === 'touchend' || event.type === 'touchcancel') {
|
||
isClick = true;
|
||
startPoint = null;
|
||
startTime = null;
|
||
lastPoint = null;
|
||
}
|
||
};
|
||
},
|
||
|
||
async handleTouchEvent(event) {
|
||
console.log(event,'handleTouchEvent')
|
||
// 更新触点数量
|
||
this.touchPoints = event.touches.length;
|
||
|
||
// 仅在触摸开始时重置状态
|
||
if (event.type === 'touchstart') {
|
||
this.gestureStatus = event.touches.length > 1 ? '双指开始' : '单指开始';
|
||
}
|
||
|
||
// 处理事件传递
|
||
this.gestureHandler?.catchEvent(event);
|
||
|
||
// 更新触摸结束状态
|
||
if (event.type === 'touchend' || event.type === 'touchcancel') {
|
||
this.gestureStatus = '结束';
|
||
this.updateCanvas();
|
||
}
|
||
|
||
// 限制更新频率
|
||
const currentTime = Date.now();
|
||
if (currentTime - this.lastGestureTime > 50) {
|
||
this.lastGestureTime = currentTime;
|
||
this.updateCanvas();
|
||
}
|
||
},
|
||
|
||
// 更新Canvas
|
||
updateCanvas() {
|
||
this.$nextTick(() => {
|
||
this.scaleValue = Math.sqrt(
|
||
this.transformMatrix.a * this.transformMatrix.a +
|
||
this.transformMatrix.b * this.transformMatrix.b
|
||
);
|
||
});
|
||
},
|
||
|
||
// 重置画布
|
||
resetCanvas() {
|
||
this.transformMatrix.reset();
|
||
this.scaleValue = 1;
|
||
this.gestureStatus = "画布已重置";
|
||
this.updateCanvas();
|
||
},
|
||
|
||
// 放大
|
||
zoomIn() {
|
||
this.transformMatrix.scale(1.2, 1.2, this.canvasWidth/2, this.canvasHeight/2);
|
||
this.updateCanvas();
|
||
},
|
||
|
||
// 缩小
|
||
zoomOut() {
|
||
this.transformMatrix.scale(0.8, 0.8, this.canvasWidth/2, this.canvasHeight/2);
|
||
this.updateCanvas();
|
||
},
|
||
|
||
// 加载座位区域数据
|
||
async loadSeatAreas() {
|
||
try {
|
||
// 模拟API请求
|
||
const response = {
|
||
"code":200,
|
||
"message":"",
|
||
"data": [{
|
||
"areacode": "0pwkru74ffwg",
|
||
"areaname": "B2区",
|
||
"description": "B2区",
|
||
"remain": 0,
|
||
"polygon": [348, 193, 348, 216, 348, 240, 348, 263, 363, 263, 377, 263, 392, 263, 392, 240, 392, 216, 392, 193, 377, 193, 363, 193, 348, 193]
|
||
}, {
|
||
"areacode": "9kb27u2gt75p",
|
||
"areaname": "A2区",
|
||
"description": "A2区",
|
||
"remain": 286,
|
||
"polygon": [488, 251, 473, 262, 453, 281, 455, 290, 494, 290, 518, 290, 542, 290, 542, 273, 542, 257, 536, 205, 521, 207, 494, 240, 488, 251]
|
||
}, {
|
||
"areacode": "3raruc74ffwj",
|
||
"areaname": "N3区",
|
||
"description": "N3区",
|
||
"remain": 0,
|
||
"polygon": [527, 96, 519, 107, 536, 140, 564, 172, 596, 182, 610, 176, 611, 166, 594, 149, 581, 138, 583, 142, 567, 119, 560, 114, 527, 96]
|
||
}, {
|
||
"areacode": "h50wgwsa81a3",
|
||
"areaname": "H1区",
|
||
"description": "H1区",
|
||
"remain": 48,
|
||
"polygon": [348, 144, 348, 152, 348, 162, 348, 170, 361, 170, 374, 170, 388, 169, 387, 162, 387, 152, 387, 144, 374, 144, 361, 144, 348, 144]
|
||
}, {
|
||
"areacode": "st0w88ej0kmu",
|
||
"areaname": "N20区",
|
||
"description": "N20区",
|
||
"remain": 0,
|
||
"polygon": [582, 341, 582, 361, 582, 381, 602, 380, 600, 400, 614, 401, 620, 401, 622, 366, 619, 360, 621, 341, 614, 341, 597, 341, 582, 341]
|
||
}, {
|
||
"areacode": "sbk5lljukrhk",
|
||
"areaname": "G区",
|
||
"description": "G区",
|
||
"remain": 87,
|
||
"polygon": [113, 371, 113, 397, 113, 424, 113, 450, 118, 450, 124, 450, 129, 450, 129, 424, 129, 397, 129, 371, 124, 371, 118, 371, 113, 371]
|
||
}, {
|
||
"areacode": "1ehnqusa81a6",
|
||
"areaname": "N11区",
|
||
"description": "N11区",
|
||
"remain": 93,
|
||
"polygon": [58, 323, 58, 345, 58, 367, 58, 389, 71, 389, 83, 389, 96, 389, 96, 367, 96, 345, 96, 323, 83, 323, 71, 323, 58, 323]
|
||
}, {
|
||
"areacode": "ecc4b9sa81a7",
|
||
"areaname": "L区",
|
||
"description": "L区",
|
||
"remain": 0,
|
||
"polygon": [541, 196, 554, 223, 553, 252, 554, 282, 555, 285, 564, 285, 568, 284, 567, 253, 568, 222, 559, 191, 564, 188, 555, 188, 541, 196]
|
||
}, {
|
||
"areacode": "04fglh2gt760",
|
||
"areaname": "N2区",
|
||
"description": "N2区",
|
||
"remain": 0,
|
||
"polygon": [577, 204, 579, 216, 579, 240, 602, 252, 602, 267, 609, 267, 618, 267, 621, 240, 615, 221, 611, 191, 609, 189, 595, 194, 577, 204]
|
||
}, {
|
||
"areacode": "au80sb74ffwt",
|
||
"areaname": "E区",
|
||
"description": "E区",
|
||
"remain": 86,
|
||
"polygon": [114, 215, 114, 236, 114, 257, 114, 278, 119, 278, 124, 278, 129, 278, 129, 257, 129, 236, 129, 215, 124, 215, 119, 215, 114, 215]
|
||
}, {
|
||
"areacode": "k872hp2gt762",
|
||
"areaname": "N14区",
|
||
"description": "N14区",
|
||
"remain": 0,
|
||
"polygon": [155, 529, 149, 538, 148, 542, 142, 551, 170, 563, 192, 563, 213, 563, 213, 550, 213, 538, 213, 525, 192, 525, 170, 525, 155, 529]
|
||
}, {
|
||
"areacode": "tkh95d74ffww",
|
||
"areaname": "J区",
|
||
"description": "J区",
|
||
"remain": 137,
|
||
"polygon": [393, 137, 393, 152, 393, 168, 393, 183, 414, 183, 434, 183, 455, 183, 455, 168, 455, 152, 455, 137, 434, 137, 414, 137, 393, 137]
|
||
}, {
|
||
"areacode": "etnhc7sa81ae",
|
||
"areaname": "N17区",
|
||
"description": "N17区",
|
||
"remain": 0,
|
||
"polygon": [445, 532, 445, 544, 445, 555, 445, 567, 468, 567, 492, 567, 515, 560, 515, 555, 515, 544, 503, 527, 492, 532, 468, 532, 445, 532]
|
||
}, {
|
||
"areacode": "qpy6ce74ffwy",
|
||
"areaname": "G区",
|
||
"description": "G区",
|
||
"remain": 131,
|
||
"polygon": [224, 139, 224, 153, 224, 169, 224, 183, 245, 183, 265, 183, 286, 183, 286, 169, 286, 153, 286, 139, 265, 139, 245, 139, 224, 139]
|
||
}, {
|
||
"areacode": "21er312gt766",
|
||
"areaname": "N10区",
|
||
"description": "N10区",
|
||
"remain": 98,
|
||
"polygon": [60, 256, 60, 276, 60, 297, 60, 317, 73, 317, 85, 317, 98, 317, 98, 297, 98, 276, 98, 256, 85, 256, 73, 256, 60, 256]
|
||
}, {
|
||
"areacode": "uxem1b74ffwp",
|
||
"areaname": "N9区",
|
||
"description": "N9区",
|
||
"remain": 153,
|
||
"polygon": [63, 181, 63, 203, 63, 224, 63, 246, 76, 246, 89, 246, 102, 246, 102, 224, 102, 203, 102, 181, 89, 181, 76, 181, 63, 181]
|
||
}, {
|
||
"areacode": "qaqq5bsa81aj",
|
||
"areaname": "N7区",
|
||
"description": "N7区",
|
||
"remain": 149,
|
||
"polygon": [159, 87, 159, 100, 159, 113, 159, 126, 185, 126, 212, 126, 238, 126, 238, 113, 238, 100, 238, 87, 212, 87, 185, 87, 159, 87]
|
||
}, {
|
||
"areacode": "q41b0u74ffwr",
|
||
"areaname": "M区",
|
||
"description": "M区",
|
||
"remain": 75,
|
||
"polygon": [552, 283, 552, 309, 552, 335, 552, 361, 557, 361, 564, 361, 569, 361, 569, 335, 569, 309, 569, 283, 564, 283, 557, 283, 552, 283]
|
||
}, {
|
||
"areacode": "mh5c6g74ff2d",
|
||
"areaname": "N4区",
|
||
"description": "N4区",
|
||
"remain": 147,
|
||
"polygon": [440, 89, 440, 101, 440, 113, 440, 125, 471, 125, 503, 125, 507, 114, 512, 105, 512, 99, 505, 95, 492, 89, 471, 89, 440, 89]
|
||
}, {
|
||
"areacode": "hfhsd4jukrml",
|
||
"areaname": "Q区",
|
||
"description": "Q区",
|
||
"remain": 0,
|
||
"polygon": [223, 467, 223, 483, 223, 499, 223, 515, 257, 515, 290, 515, 324, 515, 324, 499, 324, 483, 324, 467, 290, 467, 257, 467, 223, 467]
|
||
}, {
|
||
"areacode": "t0bugwsa81e7",
|
||
"areaname": "O区",
|
||
"description": "O区",
|
||
"remain": 0,
|
||
"polygon": [437, 472, 437, 486, 437, 501, 437, 515, 465, 515, 492, 515, 514, 502, 523, 499, 520, 486, 497, 463, 476, 469, 465, 472, 437, 472]
|
||
}, {
|
||
"areacode": "t5uyd3ej0ks0",
|
||
"areaname": "N13区",
|
||
"description": "N13区",
|
||
"remain": 178,
|
||
"polygon": [89, 485, 89, 499, 89, 514, 89, 528, 106, 528, 123, 528, 140, 528, 140, 514, 140, 499, 140, 485, 123, 485, 106, 485, 89, 485]
|
||
}, {
|
||
"areacode": "qtjhh7sa81e9",
|
||
"areaname": "N18区",
|
||
"description": "N18区",
|
||
"remain": 0,
|
||
"polygon": [528, 486, 535, 509, 535, 520, 536, 527, 552, 532, 540, 531, 551, 544, 582, 511, 595, 495, 566, 480, 566, 482, 540, 470, 528, 486]
|
||
}, {
|
||
"areacode": "pmmm6m74ff28",
|
||
"areaname": "N19区",
|
||
"description": "N19区",
|
||
"remain": 0,
|
||
"polygon": [583, 409, 583, 435, 595, 461, 589, 482, 600, 484, 605, 481, 610, 473, 611, 463, 617, 442, 619, 413, 615, 409, 599, 409, 583, 409]
|
||
}, {
|
||
"areacode": "3wtt3fsa81eb",
|
||
"areaname": "D区",
|
||
"description": "D区",
|
||
"remain": 69,
|
||
"polygon": [111, 290, 111, 314, 111, 339, 111, 363, 116, 363, 122, 363, 127, 363, 127, 339, 127, 314, 127, 290, 122, 290, 116, 290, 111, 290]
|
||
}, {
|
||
"areacode": "nums6x2gt76l",
|
||
"areaname": "N12区",
|
||
"description": "N12区",
|
||
"remain": 142,
|
||
"polygon": [57, 390, 57, 419, 57, 447, 57, 476, 71, 476, 85, 476, 99, 476, 99, 447, 99, 419, 99, 390, 85, 390, 71, 390, 57, 390]
|
||
}, {
|
||
"areacode": "241p54ej0ks5",
|
||
"areaname": "D4区",
|
||
"description": "D4区",
|
||
"remain": 0,
|
||
"polygon": [234, 412, 223, 423, 215, 440, 215, 463, 236, 463, 256, 463, 277, 463, 277, 440, 277, 419, 277, 396, 256, 396, 242, 402, 234, 412]
|
||
}, {
|
||
"areacode": "l7rlk92gt76n",
|
||
"areaname": "P区",
|
||
"description": "P区",
|
||
"remain": 0,
|
||
"polygon": [355, 486, 355, 501, 329, 500, 329, 515, 365, 515, 400, 515, 436, 515, 436, 500, 436, 484, 436, 469, 400, 469, 360, 469, 355, 486]
|
||
}, {
|
||
"areacode": "5sbc1qsa81eg",
|
||
"areaname": "B3区",
|
||
"description": "B3区",
|
||
"remain": 0,
|
||
"polygon": [286, 193, 286, 216, 286, 238, 286, 261, 302, 261, 319, 261, 335, 261, 335, 238, 335, 216, 335, 193, 319, 193, 302, 193, 286, 193]
|
||
}, {
|
||
"areacode": "xb036djukrjt",
|
||
"areaname": "D3区",
|
||
"description": "D3区",
|
||
"remain": 0,
|
||
"polygon": [286, 398, 286, 419, 286, 441, 286, 462, 302, 462, 317, 462, 333, 462, 333, 441, 333, 419, 333, 398, 317, 398, 302, 398, 286, 398]
|
||
}, {
|
||
"areacode": "w9f0t474ff2g",
|
||
"areaname": "D2区",
|
||
"description": "D2区",
|
||
"remain": 0,
|
||
"polygon": [347, 396, 347, 418, 347, 441, 347, 463, 362, 463, 376, 463, 391, 463, 391, 441, 391, 418, 391, 396, 376, 396, 362, 396, 347, 396]
|
||
}, {
|
||
"areacode": "ng0y77sa81ek",
|
||
"areaname": "D1区",
|
||
"description": "D1区",
|
||
"remain": 0,
|
||
"polygon": [404, 397, 404, 419, 404, 440, 404, 462, 424, 462, 444, 462, 464, 462, 464, 440, 460, 435, 457, 425, 443, 411, 424, 397, 404, 397]
|
||
}, {
|
||
"areacode": "fgwf442gt76u",
|
||
"areaname": "H2区",
|
||
"description": "H2区",
|
||
"remain": 50,
|
||
"polygon": [293, 144, 293, 153, 293, 162, 293, 171, 307, 171, 321, 171, 335, 171, 335, 162, 335, 153, 335, 144, 321, 144, 307, 144, 293, 144]
|
||
}, {
|
||
"areacode": "3bl5tw74ff2k",
|
||
"areaname": "F区",
|
||
"description": "F区",
|
||
"remain": 0,
|
||
"polygon": [163, 139, 163, 155, 163, 170, 163, 186, 181, 186, 199, 186, 217, 186, 217, 170, 217, 155, 217, 139, 199, 139, 181, 139, 163, 139]
|
||
}, {
|
||
"areacode": "r20f7aej0kse",
|
||
"areaname": "N8区",
|
||
"description": "N8区",
|
||
"remain": 182,
|
||
"polygon": [93, 121, 93, 136, 93, 149, 93, 164, 108, 164, 123, 164, 138, 164, 138, 149, 138, 136, 138, 121, 123, 121, 108, 121, 93, 121]
|
||
}, {
|
||
"areacode": "49k1dy2gt76y",
|
||
"areaname": "N区",
|
||
"description": "N区",
|
||
"remain": 89,
|
||
"polygon": [552, 372, 554, 401, 553, 423, 545, 459, 555, 465, 558, 462, 562, 453, 568, 426, 569, 398, 565, 367, 564, 367, 561, 369, 552, 372]
|
||
}, {
|
||
"areacode": "srhh3asa81ee",
|
||
"areaname": "R区",
|
||
"description": "R区",
|
||
"remain": 0,
|
||
"polygon": [157, 469, 157, 484, 157, 497, 157, 512, 177, 512, 196, 512, 216, 512, 216, 497, 216, 484, 216, 469, 196, 469, 177, 469, 157, 469]
|
||
}, {
|
||
"areacode": "dtnat7sa81ef",
|
||
"areaname": "B1区",
|
||
"description": "B1区",
|
||
"remain": 0,
|
||
"polygon": [406, 193, 406, 214, 406, 237, 406, 258, 424, 258, 442, 258, 460, 257, 461, 237, 461, 217, 461, 193, 442, 193, 424, 193, 406, 193]
|
||
}, {
|
||
"areacode": "j2xeleej0ksk",
|
||
"areaname": "K区",
|
||
"description": "K区",
|
||
"remain": 190,
|
||
"polygon": [466, 140, 466, 155, 466, 172, 466, 187, 481, 187, 494, 187, 509, 187, 509, 172, 509, 155, 509, 140, 494, 140, 481, 140, 466, 140]
|
||
}, {
|
||
"areacode": "2ax05h2gt77e",
|
||
"areaname": "N15区",
|
||
"description": "N15区",
|
||
"remain": 0,
|
||
"polygon": [225, 530, 225, 545, 224, 565, 247, 566, 247, 578, 290, 582, 325, 580, 326, 561, 326, 545, 326, 530, 292, 530, 259, 530, 225, 530]
|
||
}, {
|
||
"areacode": "hsker374ff2t",
|
||
"areaname": "C3区",
|
||
"description": "C3区",
|
||
"remain": 287,
|
||
"polygon": [134, 364, 134, 380, 134, 396, 134, 412, 160, 412, 185, 412, 211, 412, 211, 396, 211, 380, 211, 364, 185, 364, 160, 364, 134, 364]
|
||
}, {
|
||
"areacode": "fulx09ej0ksn",
|
||
"areaname": "A3区",
|
||
"description": "A3区",
|
||
"remain": 0,
|
||
"polygon": [451, 364, 453, 373, 470, 390, 486, 399, 493, 413, 516, 414, 541, 414, 541, 398, 541, 380, 541, 364, 516, 364, 493, 364, 451, 364]
|
||
}, {
|
||
"areacode": "wg8lmjjukrk9",
|
||
"areaname": "C2区",
|
||
"description": "C2区",
|
||
"remain": 284,
|
||
"polygon": [133, 241, 133, 259, 133, 276, 133, 294, 158, 294, 185, 294, 210, 294, 210, 276, 210, 259, 210, 241, 185, 241, 158, 241, 133, 241]
|
||
}, {
|
||
"areacode": "5h7k7xej0ksq",
|
||
"areaname": "C1区",
|
||
"description": "C1区",
|
||
"remain": 342,
|
||
"polygon": [134, 304, 134, 318, 134, 333, 134, 347, 165, 347, 197, 347, 228, 347, 228, 333, 228, 318, 228, 304, 197, 304, 165, 304, 134, 304]
|
||
}, {
|
||
"areacode": "x82lwq2gt779",
|
||
"areaname": "N1区",
|
||
"description": "N1区",
|
||
"remain": 0,
|
||
"polygon": [581, 276, 581, 296, 581, 316, 604, 321, 606, 335, 607, 336, 620, 335, 620, 316, 620, 296, 620, 276, 607, 276, 594, 276, 581, 276]
|
||
}, {
|
||
"areacode": "d0c2e1ej0kss",
|
||
"areaname": "N5区",
|
||
"description": "N5区",
|
||
"remain": 332,
|
||
"polygon": [334, 75, 334, 92, 334, 109, 334, 126, 367, 126, 399, 126, 432, 126, 432, 109, 432, 92, 432, 75, 399, 75, 367, 75, 334, 75]
|
||
}, {
|
||
"areacode": "b49sdg2gt77b",
|
||
"areaname": "B4区",
|
||
"description": "B4区",
|
||
"remain": 239,
|
||
"polygon": [216, 193, 216, 215, 216, 239, 216, 261, 236, 261, 256, 261, 276, 261, 276, 239, 276, 215, 276, 193, 256, 193, 236, 193, 216, 193]
|
||
}, {
|
||
"areacode": "7ss3wnjukrk4",
|
||
"areaname": "N6区",
|
||
"description": "N6区",
|
||
"remain": 352,
|
||
"polygon": [246, 74, 246, 91, 246, 109, 246, 126, 273, 126, 299, 126, 326, 126, 326, 109, 326, 91, 326, 74, 299, 74, 273, 74, 246, 74]
|
||
}, {
|
||
"areacode": "h442c1jukrkh",
|
||
"areaname": "A1区",
|
||
"description": "A1区",
|
||
"remain": 0,
|
||
"polygon": [454, 306, 454, 320, 454, 336, 454, 350, 484, 350, 513, 350, 543, 350, 543, 336, 543, 320, 543, 306, 513, 306, 484, 306, 454, 306]
|
||
}, {
|
||
"areacode": "n3wlb4sa81f8",
|
||
"areaname": "N16区",
|
||
"description": "N16区",
|
||
"remain": 0,
|
||
"polygon": [335, 534, 335, 550, 335, 565, 335, 581, 369, 581, 404, 581, 438, 581, 438, 565, 438, 550, 438, 534, 404, 534, 369, 534, 335, 534]
|
||
}]
|
||
}
|
||
this.seatAreas = response.data;
|
||
} catch (e) {
|
||
console.error('加载区域数据失败:', e);
|
||
}
|
||
},
|
||
async loadSeatData(areaCode) {
|
||
try {
|
||
// const response = await this.$api.getSeatData(areaCode);
|
||
let data = {"codes":["lxealffw3r9e","dqqhn6fw3r9f","ffn4swpbp95h","glxmfffw3r9u","y2e5ru3txpqr","qqdbgaxrbhw4","2l8170b9fthd","f02at8xrbhw6","11j0s7b9fthf","c7mms4pbp95e","w8s9fj3txpqy","f7blw9xrbhwa","0acmccpbp992","uddwmhb9ftm5","gxk1nsfw3rde","f9cgdlpbp995","eqgstrb9ftlx","rtla3jb9ftly","uaqpqdpbp998","rcpb3kfw3rdk","jn230mpbp99a","ful2f1pbp99b","4qqalspbp969","6uam9mb9ftmg","7r1plmpbp96b","m5sgd4fw3rds","4j85p9fw3rdt","uly7x2xrbh24","e2um5xfw3rdw","cwnk6rxrbh1u","365ykjpbp96h","644kut3txprq","w4h0h7pbp96l","dp0f9mb9ftmt","kkdkahxrbh2c","3jjpm4pbp96p","hjbac6fw3re6","rgx2ktfw3re7","5358l9b9ftmn","m6jd0xfw3re9","dfe3r0fw3rea","45exg4pbp96k","6h1cbaxrbh2m","gc2tt6fw3ree","9gd2743txpsh","qt553pb9ftjs","qmhja6pbp973","akdeap3txpsa","nhy1163txpsb","d8k96xxrbh2j","am5c02xrbh2k","my2q3gxrbh2l","l2xxampbp97a","hgk6ctpbp97b","lt6fld3txpsj","k67pb4pbp97d","77jmedpbp97e","g613acxrbh2t","37f1snb9ftk8","wnexh2pbp977","gw77wsb9ftka","037dbufw3rep","c0mp0mpbp97m","beesjqfw3rf4","ntrt3wfw3rf5","pg4n743txpsx","t8auwmb9ftkh","59jks9pbp97g","9nchuub9ftkk","jkk1dxpbp97j","82ehpyxrbh05","ckgut0b9ftkc","c3rt80pbp980","d63c823txpt7","lxe1uwfw3rfg","4qr24x3txpt9","ry1pgb3txpta","tdb6u5pbp97t","pnrgck3txptc","g4lxh43txptd","k9frsxxrbh0g","4wesmrxrbh0h","5nd00u3txpth","5ghmetfw3rcn","693uc1fw3rcp","9a9me6b9ftl6","kc8w19pbp985","cf4wkjpbp986","a0u4f0fw3rch","ccfyl9b9ftl0","tp8ldqfw3rck","ls51rkb9ftl2","r3b0xnxrbh0x","29jnap3txptw","xcx0b3fw3rd2","npb4wx3txpty","9ex9rcxrbh12","lkwjq9xrbh13","mculkjpbp98j","l8a74nfw3rcw","jfehdsxrbh16","aardj9fw3rcy","anqlf83txpr3","rbgls3fw3rdc","08abkkxrbh1b","ftqqmtb9ftlu","a6704l3txpr7","lghxxqb9ftll","r3ayu73txpr9","84muc7pbp98x","j81r9wxrbh1h","jxx0mdfw3rda","wp32mkpbp99e","xnkt9ppbp99f","77a45u3txpw0","sg3mesb9ftqd","hwh21ufw3rh0","seguj8b9ftqf","7jlk1rxrbh50","xs3ukr3txput","gr23ut3txpuu","tt2renfw3rh5","xhwgwx3txpw9","a639wgb9ftqn","9tt0xu3txpwb","jy9j1kpbp99u","3gxh8db9ftqr","p4eaqx3txpw4","3u27wexrbh5b","g89kjyxrbh5c","385rwjpbp99p","3n95prpbp99q","x52h2uxrbh5s","gusmhtpbp9a5","r4b63jb9ftmx","s7n58qfw3rhm","y62sjwfw3rhn","s10ytq3txpwf","1ubf9nfw3rhq","4trgr83txpwh","5pubr0fw3rhg","a25jtk3txpwk","3khtmwpbp9af","mdaqetfw3rhx","h58660xrbh67","117w35pbp9aj","nke3q1b9ftnb","m4n8tsfw3rj2","ptk0jn3txpwt"],"levels":["C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C"],"statuses":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"floorNames":["1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼"],"rowNames":["1排","1排","1排","1排","1排","1排","1排","1排","1排","1排","1排","1排","1排","1排","1排","1排","1排","2排","2排","2排","2排","2排","2排","2排","2排","2排","2排","2排","2排","2排","2排","2排","2排","2排","3排","3排","3排","3排","3排","3排","3排","3排","3排","3排","3排","3排","3排","3排","3排","3排","3排","4排","4排","4排","4排","4排","4排","4排","4排","4排","4排","4排","4排","4排","4排","4排","4排","4排","5排","5排","5排","5排","5排","5排","5排","5排","5排","5排","5排","5排","5排","5排","5排","5排","5排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排"],"seatNames":["17座","16座","15座","14座","13座","12座","11座","10座","9座","8座","7座","6座","5座","4座","3座","2座","1座","17座","16座","15座","14座","13座","12座","11座","10座","9座","8座","7座","6座","5座","4座","3座","2座","1座","17座","16座","15座","14座","13座","12座","11座","10座","9座","8座","7座","6座","5座","4座","3座","2座","1座","17座","16座","15座","14座","13座","12座","11座","10座","9座","8座","7座","6座","5座","4座","3座","2座","1座","17座","16座","15座","14座","13座","12座","11座","10座","9座","8座","7座","6座","5座","4座","3座","2座","1座","21座","20座","19座","18座","17座","16座","15座","14座","13座","12座","11座","10座","9座","8座","7座","6座","5座","4座","3座","2座","1座","22座","21座","20座","19座","18座","17座","16座","15座","14座","13座","12座","11座","10座","9座","8座","7座","6座","5座","4座","3座","2座","1座","21座","20座","19座","18座","17座","16座","15座","14座","13座","12座","11座","10座","9座","8座","7座","6座","5座","4座","3座","2座","1座"],"xCoords":[10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,5,6,7,8,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,4,5,6,7,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,4,6,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26],"yCoords":[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,13,13,13,13,13,13,13,13,13,13,13,13,13,13,13,13,13,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17]};
|
||
const seatSize = 20
|
||
// 转换数据结构：将多个数组合并为对象数组
|
||
this.seatPositions = data.codes.map((code, index) => {
|
||
return {
|
||
id: code,
|
||
level: data.levels[index],
|
||
status: data.statuses[index],
|
||
floor: data.floorNames[index],
|
||
row: data.rowNames[index],
|
||
name: data.seatNames[index],
|
||
x: data.xCoords[index] * seatSize,
|
||
y: data.yCoords[index] * seatSize
|
||
};
|
||
});
|
||
this.transformMatrix = new TransformMatrix();
|
||
|
||
// 自动居中显示座位区域
|
||
// 自动居中显示座位区域
|
||
this.$nextTick(() => {
|
||
if (!this.gestureHandler) {
|
||
this.initGestureHandler();
|
||
}
|
||
if (this.seatPositions.length > 0) {
|
||
// 计算座位区域边界
|
||
const xs = this.seatPositions.map(s => s.x);
|
||
const ys = this.seatPositions.map(s => s.y);
|
||
const minX = Math.min(...xs);
|
||
const maxX = Math.max(...xs);
|
||
const minY = Math.min(...ys);
|
||
const maxY = Math.max(...ys);
|
||
|
||
// 计算中心点
|
||
const centerX = (minX + maxX) / 2;
|
||
const centerY = (minY + maxY) / 2;
|
||
|
||
// 计算合适的缩放比例
|
||
const widthRatio = this.canvasWidth / (maxX - minX + 100);
|
||
const heightRatio = this.canvasHeight / (maxY - minY + 100);
|
||
const scale = Math.min(widthRatio, heightRatio, 1);
|
||
|
||
// 应用变换
|
||
// this.transformMatrix.scale(scale, scale);
|
||
// this.transformMatrix.translate(
|
||
// this.canvasWidth/2 - centerX * scale,
|
||
// this.canvasHeight/2 - centerY * scale
|
||
// );
|
||
}
|
||
});
|
||
|
||
|
||
} catch (e) {
|
||
console.error('加载座位数据失败:', e);
|
||
uni.showToast({ title: '加载座位失败', icon: 'none' });
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
/* padding: 20px; */
|
||
}
|
||
|
||
.gesture-container {
|
||
position: relative;
|
||
width: 100%;
|
||
/* height: 70vh; */
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.debug-info {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(0,0,0,0.6);
|
||
color: white;
|
||
padding: 5px;
|
||
font-size: 12px;
|
||
z-index: 10;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.controls {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
button {
|
||
padding: 8px 16px;
|
||
background: #4a8cff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
}
|
||
</style> |