JinZHouXiYiJi_DaPin2/resource/kuwei/KuWei.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>