JinZHouXiYiJi_DaPin2/resource/kuwei/KuWei.vue

<template>

  <div ref="kuwei" v-resize="resizeHandler">
    <div class="title">{{layoutList.data.movieName}}</div>
    <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',
          left: (item.gRow) * propValue.base.boxHeightGap + 'px',
          top: (item.gCol) * propValue.base.boxWidithGap + 'px',
        }"
    >
      <img
        v-if="item.type==0"
        class="seatImg0Class"
        :seatId="item.id"
        :seatIndex="index"
        background-attachment="fixed"
      />
      <img
        v-if="item.type==1"
        class="seatImg1Class"
        :seatId="item.id"
        :seatIndex="index"
        src="@/assets/kuwei/130.png"
      />
      <img
        v-if="item.type==2"
        class="seatImg2Class"
        :seatId="item.id"
        :seatIndex="index"
        src="@/assets/kuwei/130.png"
        background-attachment="fixed"
      />
      <img
        v-if="item.type==3"
        class="seatImgClass"
        :seatId="item.id"
        :seatIndex="index"
        src="@/assets/kuwei/130.png"
        background-attachment="fixed"
      />

    </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:{
    mg_top: null,
    mg_left: 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);
}
.seatImg0Class {
  background: rgba(166, 129, 230, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius:3px;
  display:block;
}
.seatImg1Class {
  background: rgba(53, 180, 94, 1);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius:3px;
}
.seatImg2Class {
  background: rgba(225, 94, 104, 1);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius:3px;
}
.title {
  width: 100%;
  height: 35px;
  text-align: center;
  line-height: 80px;
  font-size: 78px;
  color: #A8F4FF;
  letter-spacing: 2px;
  font-style:normal;
  top:-180px;
  position:absolute;
}
</style>