大屏数据
							parent
							
								
									bb9335d20b
								
							
						
					
					
						commit
						81957e9aa5
					
				
							
								
								
									
										2
									
								
								.env
								
								
								
								
							
							
						
						
									
										2
									
								
								.env
								
								
								
								
							| 
						 | 
				
			
			@ -8,7 +8,7 @@ VITE_APP_PORT=8890
 | 
			
		|||
#如果 VITE_APP_BASE_URL 配置为空,所有请求就通过 VITE_APP_PROXY 代理转发
 | 
			
		||||
#如果 VITE_APP_BASE_URL 配置不为空,VITE_APP_PROXY 的配置就不生效
 | 
			
		||||
# 代理配置,必须在一行中
 | 
			
		||||
VITE_APP_PROXY=[["/api","http://localhost:9900"]]
 | 
			
		||||
VITE_APP_PROXY=[["/api","http://localhost:9900"],["/mdwms","http://localhost:8083"]]
 | 
			
		||||
 | 
			
		||||
# 后端地址
 | 
			
		||||
VITE_APP_BASE_URL=''
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -5,7 +5,7 @@ VITE_APP_TITLE='DataView'
 | 
			
		|||
VITE_APP_PORT=8890
 | 
			
		||||
 | 
			
		||||
# 代理配置(开发使用),必须在一行中
 | 
			
		||||
VITE_APP_PROXY=[["/api","http://localhost:8000"]]
 | 
			
		||||
VITE_APP_PROXY=[["/api","http://localhost:8000"],["/mdwms","http://localhost:8083"]]
 | 
			
		||||
 | 
			
		||||
# 后端地址
 | 
			
		||||
VITE_APP_BASE_URL='/'
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -5,7 +5,7 @@ VITE_APP_TITLE='DataView'
 | 
			
		|||
VITE_APP_PORT=8890
 | 
			
		||||
 | 
			
		||||
# 代理配置,必须在一行中
 | 
			
		||||
VITE_APP_PROXY=[["/api","http://localhost:9900"]]
 | 
			
		||||
VITE_APP_PROXY=[["/api","http://localhost:9900"],["/mdwms","http://localhost:8083"]]
 | 
			
		||||
 | 
			
		||||
# 后端地址
 | 
			
		||||
VITE_APP_BASE_URL='/'
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 6.2 KiB  | 
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 3.1 KiB  | 
| 
						 | 
				
			
			@ -0,0 +1,269 @@
 | 
			
		|||
<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="seatImg2Class"
 | 
			
		||||
            :seatId="item.id"
 | 
			
		||||
            :seatIndex="index"
 | 
			
		||||
            :src="img_3"
 | 
			
		||||
          />
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-popover>
 | 
			
		||||
 | 
			
		||||
      <el-popover
 | 
			
		||||
        v-if="item.type==4"
 | 
			
		||||
        placement="top-start"
 | 
			
		||||
        trigger="hover"
 | 
			
		||||
        :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"
 | 
			
		||||
        :content="item.id"
 | 
			
		||||
        width="160px"
 | 
			
		||||
      >
 | 
			
		||||
        <template #reference>
 | 
			
		||||
          <el-image
 | 
			
		||||
            class="seatImg4Class"
 | 
			
		||||
            :seatId="item.id"
 | 
			
		||||
            :seatIndex="index"
 | 
			
		||||
            :src="img_5"
 | 
			
		||||
          />
 | 
			
		||||
        </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 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;
 | 
			
		||||
}
 | 
			
		||||
.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>
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,11 @@
 | 
			
		|||
 | 
			
		||||
import { kuwei_item } from "./KuWeiIteam";
 | 
			
		||||
 | 
			
		||||
export interface kuwei_info {
 | 
			
		||||
  width?: number
 | 
			
		||||
  height?: number
 | 
			
		||||
  mg_top?: number
 | 
			
		||||
  mg_left?: number
 | 
			
		||||
  positionDistin?: number
 | 
			
		||||
  movieName?: string
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,10 @@
 | 
			
		|||
import type { ComponentDataType } from 'open-data-v/base'
 | 
			
		||||
import type { CanvasStyleData } from 'open-data-v/designer'
 | 
			
		||||
 | 
			
		||||
export interface kuwei_item {
 | 
			
		||||
  id?: String
 | 
			
		||||
  gRow?: number
 | 
			
		||||
  gCol?: number
 | 
			
		||||
  type?: String
 | 
			
		||||
  item_code?: String
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,65 @@
 | 
			
		|||
import type { MetaContainerItem } from 'open-data-v/base'
 | 
			
		||||
import { ComponentGroup, CustomComponent, FormType } from 'open-data-v/base'
 | 
			
		||||
import { h } from 'vue'
 | 
			
		||||
 | 
			
		||||
export const componentName = 'MdKuWei'
 | 
			
		||||
class SubTextComponent extends CustomComponent {
 | 
			
		||||
  constructor(id?: string, name?: string, icon?: string) {
 | 
			
		||||
    super({
 | 
			
		||||
      component: componentName,
 | 
			
		||||
      group: ComponentGroup.OTHER,
 | 
			
		||||
      name: name ? 'CQMD库位' : 'CQMD库位',
 | 
			
		||||
      id,
 | 
			
		||||
      width: 100,
 | 
			
		||||
      height: 30,
 | 
			
		||||
      icon
 | 
			
		||||
    })
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  _prop: MetaContainerItem[] = [
 | 
			
		||||
    {
 | 
			
		||||
      label: '基础配置',
 | 
			
		||||
      prop: 'base',
 | 
			
		||||
      children: [
 | 
			
		||||
        {
 | 
			
		||||
          prop: 'boxWidth',
 | 
			
		||||
          label: '盒子宽度',
 | 
			
		||||
          type: FormType.NUMBER,
 | 
			
		||||
          props: {
 | 
			
		||||
            defaultValue: 20,
 | 
			
		||||
            suffix: () => h('span', {}, 'px')
 | 
			
		||||
          }
 | 
			
		||||
        },{
 | 
			
		||||
          prop: 'boxHeight',
 | 
			
		||||
          label: '盒子高度度',
 | 
			
		||||
          type: FormType.NUMBER,
 | 
			
		||||
          props: {
 | 
			
		||||
            defaultValue: 20,
 | 
			
		||||
            suffix: () => h('span', {}, 'px')
 | 
			
		||||
          }
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          prop: 'boxWidithGap',
 | 
			
		||||
          label: '盒子宽间距',
 | 
			
		||||
          type: FormType.NUMBER,
 | 
			
		||||
          props: {
 | 
			
		||||
            defaultValue: 20,
 | 
			
		||||
            suffix: () => h('span', {}, 'px')
 | 
			
		||||
          }
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          prop: 'boxHeightGap',
 | 
			
		||||
          label: '盒子高间距',
 | 
			
		||||
          type: FormType.NUMBER,
 | 
			
		||||
          props: {
 | 
			
		||||
            defaultValue: 20,
 | 
			
		||||
            suffix: () => h('span', {}, 'px')
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      ]
 | 
			
		||||
    }
 | 
			
		||||
  ]
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export default SubTextComponent
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,7 @@
 | 
			
		|||
import SubTextComponent, { componentName } from './config'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  componentName,
 | 
			
		||||
  component: () => import('./KuWei.vue'),
 | 
			
		||||
  config: SubTextComponent
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,8 @@
 | 
			
		|||
export interface KuWeiType {
 | 
			
		||||
  base: {
 | 
			
		||||
    boxWidth: string
 | 
			
		||||
    boxHeight: string
 | 
			
		||||
    boxWidithGap: string
 | 
			
		||||
    boxHeightGap: string
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
		Loading…
	
		Reference in New Issue