<template>
<div class="super
-flow
-base
-demo">
<div class="show
-flow">
<div class="form
-box
-header">
<StepHeader title="产线信息" />
</div>
<!
-- <el
-divider></el
-divider>
-->
<form
-builder
v
-if="dispose"
:value="head"
:schemas="fromSchemas"
class="from
-back"
operation="view"
>
</form
-builder>
</div>
<div class="show
-map">
<div class="flex">
<StepHeader
style="width
: 8rem;"
:title="type == 1 ? `平面图配置`
: '平面图展示'"
/>
<div
v
-if="type == 1"
style="width
: 7rem;"
class="flex h
-6 cursor
-pointer items
-center rounded
-full bg
-primary/5 px
-[7px] py
-[5px] text
-[14px] leading
-none text
-primary hover
:bg
-primary/[0.13]"
@click="addItem()"
>
<iconpark
-icon
class=" pr
-[8px]"
name="ti
anjiatuop
anwei"
></iconpark
-icon>
添加托盘位
</div>
</div>
<!
-- <div class="common
-btn" @click="h
andleSee">
-->
<!
-- <iconpark
-icon
-->
<!
-- name="
yulan"
-->
<!
-- class="pr
-[3px]"
-->
<!
-- :fill="['#333399']"
-->
<!
-- ></iconpark
-icon>
-->
<!
-- 预览
-->
<!
-- </div>
-->
</div>
<div class="card
-map">
<div ref="flowContainer" class="card
-body">
<super
-flow
v
-if="dispose"
ref="superFlow"
:draggable="type == 1"
:linkaddable="type == 1"
:origin="origin"
:graph
-menu="graphMenuList"
:node
-menu="nodeMenuList"
:link
-menu="linkMenuList"
:node
-list="nodeList"
:link
-list="linkList"
>
<template v
-slot
:node="{ meta }">
<div
:id="meta.id" class="flow
-node" @mouseup="nodeMouseUp">
{{ meta.name }}
</div>
</template>
</super
-flow>
</div>
</div>
<div class="page
-footer">
<el
-button
:class="commonField.resetClass"
:size="commonField.smallSize"
@click="goBack"
>返回
</el
-button>
<el
-button
v
-if="type == 1"
:class="commonField.queryClass"
:size="commonField.smallSize"
@click="h
andleSubmit"
>保存变更</el
-button
>
</div>
<addDialog
ref="addDialog"
:dialog
-m
anager="dialogM
anager"
:type="type"
:form="form"
@add="addChild"
></addDialog>
</div>
</template>
<script>
import flowRunder from '@/mixins/flowRunder'
const drawerType = {
node
: 0,
link
: 1
}
import {
saveWhere,
saveLine,
nodeUpdate,
nodeAdd,
getNodeList
} from '@/api/ae/pl
an'
import { fromSchemas } from './
source'
import addDialog from './addDialog.vue'
import { machineAllList } from '@/api/system/type'
import SuperFlow from 'vue
-super
-flow'
import commonField from '@/utils/commonField'
import 'vue
-super
-flow/lib/index.css'
export default {
name
: 'AeEngine
ModelForm',
dicts
: ['table_flag'],
components
: {
SuperFlow,
addDialog
},
mixins
: [flowRunder],
props
: {
type
: {
type
: [String, Number],
default
: ''
}
},
data() {
return {
source: [],
head
: {},
form
: {
type
: Object,
default
: () => {
return {
businessId
: 0,
linkId
: '',
//创建人
createBy
: '',
//创建时间
createDate
: '',
flag
: '1',
//产线名称
proLineName
: '',
//产线简称
proLineShortName
: '',
//部门id
deptId
: '',
//工序总数
gxNum
: '',
//部门名称
deptName
: '',
//班总数
teamNum
: '',
//系总数
systemNum
: '',
//产线ID
proLineId
: '',
//权重
weight
: '',
postNum
: ''
}
}
},
dispose
: true,
nodeList
: [],
fromSchemas,
model: {
gxDisplayType
: 'direction'
},
dialogM
anager
: {
dialogVisible
: false,
loading
: false,
title
: '添加托盘位'
},
engine
ModelList
: [],
matchList
: [],
isEdit
: false,
linkList
: [
],
// 线条右键菜单
linkMenu
: [
[
{
label
: '删除',
selected
: link => {
link.remove()
}
},
{
label
: '编辑',
selected
: link => {
this.drawerConf.
open(drawerType.link, link)
}
}
]
],
// 线条样式
linkBaseStyle
: {
color
: '#FF0000', // line 颜色
hover
: '#FF0000', // line hover 的颜色
textColor
: '#666666', // line 描述文字颜色
textHover
: '#FF0000', // line 描述文字 hover 颜色
font
: '14px Arial', // line 描述文字 字体设置 参考 c
anvas font
dotted
: false, // 是否是虚线
lineDash
: [4, 4], // 虚线时生效
background
: 'rgba(255,255,255,0.6)' // 描述文字背景色
},
dragConf
: {},
graphMenuList
: [
[
// {
// label
: '添加托盘位',
// disable(graph) {
// return this.type == 0
// },
// selected
: (graph, coordinate) => {
// this.dialogM
anager.dialogVisible = true
// this.dialogM
anager.title = '添加托盘位'
// this.dialogM
anager.graph = graph
// this.
model = {
// prolineGraphId
: this.$route.query.businessId,
// gxDisplayType
: 'direction'
// }
// }
// }
]
],
// 字体样式
fontList
: ['14px Arial', 'italic small
-caps bold 12px arial']
}
},
computed
: {
rules() {},
commonField() {
return commonField
}
},
mounted() {
this.isEdit = false
// document.addEventListener('mousemove', this.docMousemove)
document.addEventListener('mouseup', this.docMouseup)
this.$once('hook
:beforeDestroy', () => {
// document.removeEventListener('mousemove', this.docMousemove)
document.removeEventListener('mouseup', this.docMouseup)
})
this.dispose = false
getNodeList({
aeProlineInfoId
: this.$route.query.businessId
}).then(res => {
this.nodeList = []
const nodeList = []
res.data.body.map(v => {
nodeList.push({
// width
: v.gxDisplayType === 2 ? 140
: 60,
// height
: v.gxDisplayType === 2 ? 60
: 140,
width
: Number(v.wide),
height
: Number(v.high),
coordinate
: v.xyAxis ? JSON.parse(v.xyAxis)
: [],
id
: v.businessId,
meta
: {
prop
: 'start',
id
: v.businessId,
name
: v.trayName,
data
: v
}
})
})
this.$nextTick(() => {
this.head = res.data.head
this.nodeList = nodeList
if (res.data.lineAxis) {
this.linkList = JSON.parse(res.data.lineAxis.lineAxisJson)
this.linkId = res.data.lineAxis.businessId
}
console.log('this.linkList',this.linkList)
console.log('this.linkId',this.linkId)
this.dispose = false
this.$nextTick(() => {
this.dispose = true
})
})
})
},
methods
: {
goBack() {
if (this.type == 1 && this.isEdit) {
this.$confirm(
'请确认是否立即返回，返回后变更内容将不再保存。',
'提示',
{
confirmButtonText
: '确认',
c
ancelButtonText
: '取消',
showClose
: false,
type
: 'warning',
c
ancelButtonClass
: 'c
ancelBtn',
confirmButtonClass
: 'submitBtn'
}
).then(() => {
this.$router.go(
-1)
})
} else {
this.$router.go(
-1)
}
},
nodeMouseUp(evt) {
this.dragConf = evt.target.id
evt.preventDefault()
},
docMouseup(e) {
console.log('docMouseup')
const { clientX, clientY } = e
console.log(e)
// const conf = this.dragConf
// conf.isDown = false
// if (conf.isMove) {
const {
top,
right,
bottom,
left
} = this.$refs.flowContainer.getBoundingClientRect()
// // 判断鼠标是否进入 flow container
if (
clientX > left &&
clientX < right &&
clientY > top &&
clientY < bottom
) {
// console.log(123)
} else {
if (e.target._prevClass === 'flow
-node') {
this.nodeList.map(i => {
if (i.id === this.dragConf) {
i.coordinate = [0, 0]
this.dispose = false
this.$nextTick(() => {
this.dispose = true
})
}
})
}
}
// // 获取拖动元素左上角相对 super flow 区域原点坐标
// const coordinate = this.$refs.superFlow.getMouseCoordinate(
// clientX
- conf.offsetLeft,
// clientY
- conf.offsetTop
// )
// // 添加节点
// this.$refs.superFlow.addNode({
// coordinate,
// ...conf.info
// })
// }
// conf.isMove = false
// }
// if (conf.ele) {
// conf.ele.remove()
// conf.ele = null
// }
},
addItem() {
this.dialogM
anager.dialogVisible = true
this.dialogM
anager.title = '添加托盘位'
this.dialogM
anager.graph = this.$refs.superFlow.graph
this.
model = {
prolineGraphId
: this.$route.query.businessId,
gxDisplayType
: 'direction'
}
},
h
andleSee() {
this.$emit('see')
},
async h
andleSubmit() {
if (this.isEdit) {
this.$confirm('请确认是否立即保存，保存后立即生效。', '提示', {
confirmButtonText
: '确认',
c
ancelButtonText
: '取消',
showClose
: false,
type
: 'warning'
}).then(() => {
this.save()
this.$router.go(
-1)
})
} else {
this.save()
this.$router.go(
-1)
}
},
async save() {
const data = this.$refs.superFlow.toJSON().nodeList
data.map(async v => {
const item = v.meta.data
item.id = v.meta.id
item.xyAxis = JSON.stringify(v.coordinate)
const res = await saveWhere(item)
console.log(res)
})
const rsave = await saveLine({
lineAxisJson
: JSON.stringify(this.$refs.superFlow.toJSON().linkList),
businessId
: this.linkId,
aeProlineInfoId
: this.$route.query.businessId
})
this.$message.success('保存成功')
},
async addChild(e, call) {
const item = JSON.parse(JSON.stringify(e))
console.log('item',item)
item.gxDisplayType = item.gxDisplayType == 'direction' ? 1
: 2
item.isCrossLineEquipment = item.isCrossLineEquipment === 1 ? true
: false
console.log(item)
let error = false
if (item.belowAeProlineGxList && item.belowAeProlineGxList.length) {
item.belowAeProlineGxList.map(i => {
if (!i.direction) {
error = true
}
})
}
if (error) {
this.$message.warning('未选择展示位置')
this.dialogM
anager.loading = false
return
}
if (item.aeToolList && item.aeToolList.length) {
item.aeToolList.map(i => {
if (!i.direction) {
error = true
}
})
}
if (error) {
this.$message.warning('未选择岗位OP')
this.dialogM
anager.loading = false
return
}
if (
item.aboveAeEquipmentInfoList &&
item.aboveAeEquipmentInfoList.length
) {
item.aboveAeEquipmentInfoList.map(i => {
if (!i.direction) {
error = true
}
})
}
if (error) {
this.$message.warning('未选择展示位置')
this.dialogM
anager.loading = false
return
}
item.prolineInfoId = this.$route.query.businessId
item.aeEquipmentInfo =
item.aeEquipmentInfo && item.aeEquipmentInfo.length
? item.aeEquipmentInfo[0]
: {}
console.log(item)
let res
this.isEdit = true
if (item.businessId) {
res = await nodeUpdate(item)
this.nodeList.map(v => {
if (v.meta.id == item.businessId) {
const data = res.data
v.meta.data = data
v.width = Number(item.wide)
v.height = Number(item.high)
}
})
} else {
res = await nodeAdd(item)
const data = res.data
let node
if (item.gxDisplayType === 2) {
node = {
width
: Number(item.wide),
height
:Number(item.high),
meta
: {
prop
: 'start',
id
: data.businessId,
name
: data.trayName,
data
: data
}
}
} else {
node = {
width
: Number(item.wide),
height
:Number(item.high),
meta
: {
prop
: 'start',
id
: data.businessId,
name
: data.trayName,
data
: data
}
}
}
this.dialogM
anager.graph.addNode(node)
}
this.dialogM
anager.dialogVisible = false
this.dialogM
anager.loading = false
call()
this.form = {
aeEquipmentInfo
: [],
aboveAeEquipmentInfoList
: [],
belowAeProlineGxList
: [],
aeToolList
: [],
isRFID
: true,
trayNum
: '',
isLight
: true,
isFrom
: true,
isRed
: true,
isYellow
: true,
aeProlineTray
: {
trayNum
: ''
},
isCrossLineEquipment
: 1,
prolineInfoId
: this.$route.query.businessId
}
},
linkDesc(link) {
return link.meta ? link.meta.desc
: ''
},
getMachineAllList() {
machineAllList().then(res => {
this.matchList = res.data
})
},
h
andleCh
angeEngineMode(index) {
const item = this.engine
ModelList.find(item => item.labelId === index)
this.form.aeEngine
ModelId = item.
modelNameId
this.form.aeEngine
ModelBatch = item.exhaust
this.form.car
Model = item.car
Model
this.form.car
ModelCode = item.car
ModelCode
},
getEngine
Model() {
// queryAeEngine
ModelName().then(res => {
// this.engine
ModelList = res.data
// })
},
ruleFun() {
this.$refs.form.validate(valid => {
if (valid) {
this.$emit('requiredFun')
}
})
}
}
}
</script>
<style l
ang="scss" scoped>
.ellipsis {
white
-space
: nowrap;
text
-overflow
: ellipsis;
overflow
: hidden;
word
-wrap
: break
-word;
}
.super
-flow
-base
-demo {
width
: 100%;
margin
: 0 auto;
background
-color
: #fff;
.show
-flow {
padding
: 23px 26px;
}
.super
-flow__node {
.flow
-node {
color
: #030c3e;
display
: flex;
justify
-content
: center;
align
-items
: center;
font
-weight
: bold;
background
: #fdfdfd;
box
-shadow
: 0 1px 4px 0 #333399;
border
-radius
: 4px;
}
}
}
.card_class {
width
: 50%;
&
-data {
height
: 45vh;
overflow
: auto;
}
}
.process_title {
height
: 22px;
line
-height
: 22px;
border
-left
: 4px solid #333399;
margin
-top
: 10px;
padding
-left
: 15px;
font
-family
: Alibaba PuHuiTi;
font
-weight
: 500;
font
-size
: 18px;
margin
-bottom
: 1rem;
color
: #333399;
font
-style
: normal;
}
::v
-deep {
.super
-flow__node {
border
-radius
: 7px;
}
}
.show
-map {
padding
: 0px 26px;
display
: flex;
justify
-content
: space
-between;
}
.card
-map {
width
: 1522px;
height
: 476px;
overflow
: scroll;
}
.card
-body {
width
: 5760px;
height
: 2100px;
margin
-left
: 25px;
background
-position
: center;
background
-size
: 100% 100%;
//overflow
: scroll;
background
: #f7f7fb;
}
.common
-btn {
display
: flex;
align
-items
: center;
justify
-content
: center;
color
: #333399;
font
-size
: 18px;
}
.page
-footer {
margin
: 20px;
text
-align
: right;
}
</style>
现在代码是这样的，super
-flow插件现在连接点只能固定在上下左右的中心位置，如何自定义连接点位置
YuLan-12B: 开源LLM
超级会员免费看
订阅专栏 解锁全文
扫一扫
783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
