大屏数据
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_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=''
|
VITE_APP_BASE_URL=''
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ VITE_APP_TITLE='DataView'
|
||||||
VITE_APP_PORT=8890
|
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='/'
|
VITE_APP_BASE_URL='/'
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ VITE_APP_TITLE='DataView'
|
||||||
VITE_APP_PORT=8890
|
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='/'
|
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