165 lines
3.9 KiB
Vue
165 lines
3.9 KiB
Vue
<template>
|
|
|
|
<div ref="kuwei" v-resize="resizeHandler">
|
|
{{layoutList.data.movieName}}
|
|
|
|
{{layoutList.data.seatList.length}}
|
|
<div v-for="(item, index) in layoutList.data.seatList"
|
|
|
|
:key="item.id"
|
|
:style="{
|
|
position:'absolute',
|
|
background:'#e6e6e6',
|
|
height:propValue.base.boxHeight + 'px',
|
|
width: propValue.base.boxWidth + 'px',
|
|
top: layoutList.data.mg_top+(item.gRow-1) * propValue.base.boxHeightGap + 'px',
|
|
left: layoutList.data.mg_left+(item.gCol-1) * propValue.base.boxWidithGap + 'px',
|
|
}"
|
|
>
|
|
<img
|
|
v-if="item.type==0"
|
|
class="seatImgClass"
|
|
:seatId="item.id"
|
|
:seatIndex="index"
|
|
src="@/assets/kuwei/100.png"
|
|
/>
|
|
<img
|
|
v-if="item.type==1"
|
|
class="seatImgClass"
|
|
:seatId="item.id"
|
|
:seatIndex="index"
|
|
src="@/assets/kuwei/101.png"
|
|
/>
|
|
<img
|
|
v-if="item.type==2"
|
|
class="seatImgClass"
|
|
:seatId="item.id"
|
|
:seatIndex="index"
|
|
src="@/assets/kuwei/102.png"
|
|
/>
|
|
<img
|
|
v-if="item.type==3"
|
|
class="seatImgClass"
|
|
:seatId="item.id"
|
|
:seatIndex="index"
|
|
src="@/assets/kuwei/123.png"
|
|
/>
|
|
<img
|
|
v-if="item.type==4"
|
|
class="seatImgClass"
|
|
:seatId="item.id"
|
|
:seatIndex="index"
|
|
src="@/assets/kuwei/124.png"
|
|
/>
|
|
<img
|
|
v-if="item.type==5"
|
|
class="seatImgClass"
|
|
:seatId="item.id"
|
|
:seatIndex="index"
|
|
src="@/assets/kuwei/125.png"
|
|
/>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useData, useEventBus, useProp } from "open-data-v/base";
|
|
import { onMounted, reactive, ref } from "vue";
|
|
|
|
import { http } from '@/utils/http'
|
|
|
|
import type KuWeiComponent from './config'
|
|
import type { KuWeiType } from './type'
|
|
import { SimpleLayoutData } from "@/api/pages";
|
|
import { kuwei_item } from "./KuWeiIteam";
|
|
import { kuwei_info } from "./KuWeiInfo";
|
|
|
|
const props = defineProps<{
|
|
component: KuWeiComponent
|
|
}>()
|
|
|
|
|
|
|
|
|
|
|
|
const { propValue } = useProp<KuWeiType>(props.component)
|
|
var layoutList = reactive({
|
|
data:{
|
|
width: null,
|
|
height: null,
|
|
mg_top: null,
|
|
mg_left: null,
|
|
positionDistin: null,
|
|
movieName: null,
|
|
seatList: []
|
|
}
|
|
|
|
})
|
|
|
|
const lineHeight = ref<string>('20px')
|
|
const resizeHandler = (entry: ResizeObserverEntry) => {
|
|
const { height } = entry.contentRect
|
|
lineHeight.value = `${height}px`
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const dataHandler = (event) => {
|
|
if(!event.data){
|
|
event.data=event;
|
|
}
|
|
layoutList.data =event.data
|
|
// layoutList.height =event.data.height
|
|
// layoutList.mg_top =event.data.mg_top
|
|
// layoutList.mg_left =event.data.mg_left
|
|
// layoutList.positionDistin =event.data.positionDistin
|
|
// layoutList.movieName =event.data.movieName
|
|
// layoutList.seatList =event.data.seatList
|
|
// console.log(layoutList.seatList.length);
|
|
// layoutList.seatList=JSON.parse(JSON.stringify(event.data.seatList))
|
|
//
|
|
// layoutList=JSON.parse(JSON.stringify(layoutList))
|
|
}
|
|
onMounted(async () => {
|
|
try {
|
|
const queryParems = { tag: propValue.base.tag }
|
|
console.log("queryParems"+ propValue.base.tag)
|
|
console.log("url"+ propValue.base.url)
|
|
const res = await http.get({ url: propValue.base.url, params: queryParems })
|
|
console.log(res)
|
|
dataHandler(res)
|
|
} catch (error: any) {
|
|
console.log("异常-----")
|
|
console.log(error?.message)
|
|
}
|
|
})
|
|
const dataChange = (resp: any, _?: string) => {
|
|
|
|
if (!resp || !resp.afterData) {
|
|
console.log("数据失败-----")
|
|
return
|
|
}
|
|
if (resp.status === 'SUCCESS') {
|
|
console.log(resp.afterData)
|
|
dataHandler(resp.afterData)
|
|
}
|
|
|
|
}
|
|
useData(props.component, dataChange)
|
|
useEventBus('globalData', dataHandler)
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
span {
|
|
pointer-events: none;
|
|
display: inline-block;
|
|
width: 100%;
|
|
text-align: center;
|
|
line-height: v-bind(lineHeight);
|
|
}
|
|
</style>
|