JinZHouXiYiJi_DaPin2/resource/mdkw/KuWei.vue

<template>

  <div ref="kuwei" v-resize="resizeHandler">



    <div class="title" plain @click="open2">
      {{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.gCol) * propValue.base.boxHeightGap + 'px',
          top: (item.gRow) * propValue.base.boxWidithGap + 'px',
        }"
    >

      <el-popover
        v-if="item.type==1"
        placement="top-start"
        trigger="hover"
        :content="item.id"
        width="160px"
      >
        <template #reference>
          <el-image
            class="seatImg1Class"
            :seatId="item.id"
            :seatIndex="index"
            :src="img_jinyong"
          />
        </template>
      </el-popover>

      <el-popover
        v-if="item.type==2"
        placement="top-start"
        :title="item.code"
        trigger="hover"
        :content="item.item_code"
        width="160px"
      >
        <template #reference>
          <el-image
            class="seatImg2Class"
            :seatId="item.id"
            :seatIndex="index"
            :src="img_130"
          />
        </template>
      </el-popover>

      <el-popover
        v-if="item.type==3"
        placement="top-start"
        :title="item.code"
        trigger="hover"
        :content="item.item_code"
        width="160px"
      >
        <template #reference>
          <el-image
            class="seatImg6Class"
            :seatId="item.id"
            :seatIndex="index"
            :src="img_130"
          />
        </template>
      </el-popover>

      <el-popover
        v-if="item.type==4"
        placement="top-start"
        trigger="hover"
        :title="item.code"
        :content="item.id"
        width="160px"
      >
        <template #reference>
          <el-image
            class="seatImg4Class"
            :seatId="item.id"
            :seatIndex="index"
            :src="img_kong"
          />
        </template>
      </el-popover>

      <el-popover
        v-if="item.type==5"
        placement="top-start"
        trigger="hover"
        :title="item.code"
        :content="item.id"
        width="160px"
      >
        <template #reference>
          <el-image
            class="seatImg6Class"
            :seatId="item.id"
            :seatIndex="index"
            :src="img_kong"
          />
        </template>
      </el-popover>
      <el-popover
        v-if="item.type==6"
        placement="top-start"
        trigger="hover"
        :title="item.code"
        :content="item.item_code"
        width="160px"
      >
        <template #reference>
          <el-image
            class="seatImg2Class"
            :seatId="item.id"
            :seatIndex="index"
            :src="img_134"
          />
        </template>
      </el-popover>
    </div>
  </div>

</template>

<script setup lang="ts">
import { useData, useEventBus, useProp } from "open-data-v/base";
import { onMounted, reactive, ref } from "vue";

import img_130 from "@/assets/kuwei/130.png";
import img_jinyong from "@/assets/kuwei/132.png";
import img_kong from "@/assets/kuwei/133.png";
import img_3 from "@/assets/kuwei/md3.png";
import img_5 from "@/assets/kuwei/md5.png";
import img_134 from "@/assets/kuwei/134.png";
import type KuWeiComponent from './config'
import type { KuWeiType } from './type'
import { ElNotification } from 'element-plus'
const props = defineProps<{
  component: KuWeiComponent
}>()


 const getAssetsFile = (url: string) => {
  return new URL(`@/assets/kuwei/${url}`, import.meta.url).href
}


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 open2 = () => {
  console.log("123123132")
  ElNotification({
    title: 'Warning',
    message: 'This is a warning message',
    type: 'warning',
  })
}


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)
</script>

<style lang="less" scoped>
span {
  pointer-events: none;
  display: inline-block;
  width: 100%;
  text-align: center;
  line-height: v-bind(lineHeight);
}

.seatImg1Class {
  background-color: #d71626;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius:3px;
}
.seatImg2Class {
  background: #11c54a;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius:3px;
}
.seatImg3Class {
  background:#F29961;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius:3px;
}
.seatImg4Class {
  background: #9d74e3;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius:3px;
  display:block;
}
.seatImg5Class {
  background: #9d74e3;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius:3px;
}
.seatImg6Class {
  background: #B4870CFF;
  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:-130px;
  position:absolute;
}
</style>