270 lines
8.5 KiB
Vue
270 lines
8.5 KiB
Vue
<template>
|
||
<div>
|
||
<el-row>
|
||
<div id="container" className="container" />
|
||
</el-row>
|
||
<!--点击设备显示信息-->
|
||
<el-dialog
|
||
id="dialogs"
|
||
title="仓位信息"
|
||
class="newDialog"
|
||
:visible.sync="dialogDeviceMsgVisible"
|
||
width="22%"
|
||
:top="tops"
|
||
:show-close="false"
|
||
:modal="false"
|
||
>
|
||
<el-table
|
||
:data="arr"
|
||
style="width: 100%"
|
||
max-height="500px"
|
||
>
|
||
<el-table-column
|
||
prop="name"
|
||
label="监控项"
|
||
/>
|
||
<el-table-column
|
||
prop="value"
|
||
label="当前值"
|
||
/>
|
||
</el-table>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import crudStage from '@/api/logicflow/stage'
|
||
import '@logicflow/core/dist/style/index.css'
|
||
import '@logicflow/extension/lib/style/index.css'
|
||
|
||
import { LogicFlow } from '@logicflow/core'
|
||
import { registerCustomElement } from '@/views/system/logicflow/editor/components/node'
|
||
import { getStructByCodes } from '@/views/system/monitor/device/structStage'
|
||
let data = {}
|
||
let lf = ''
|
||
export default {
|
||
name: 'MonitorDevice',
|
||
data() {
|
||
return {
|
||
stageParam: 'AS', // 舞台参数
|
||
dialogDeviceMsgVisible: false,
|
||
device_code: null,
|
||
tops: '20vh',
|
||
stage_code: '',
|
||
stageSelectList: [],
|
||
arr: [], // 显示数组
|
||
dialogFormVisible: false,
|
||
dialogFormVisible1: false,
|
||
dialogFormVisible2: false,
|
||
dialogFormVisible3: false,
|
||
dialogFormVisible4: false,
|
||
form: {
|
||
device_code: '',
|
||
hasGoodStatus: null,
|
||
barcode: '',
|
||
suspended: null,
|
||
material_type: '',
|
||
requireSucess: '',
|
||
fullrequireSucess: ''
|
||
},
|
||
allStructMsg: [],
|
||
msgTop: '200px',
|
||
msgLeft: '200px'
|
||
}
|
||
},
|
||
mounted() {
|
||
this.init()
|
||
},
|
||
beforeDestroy() {
|
||
// js提供的clearInterval方法用来清除定时器
|
||
console.log('定时器销毁')
|
||
clearInterval(this.timer)
|
||
},
|
||
methods: {
|
||
// 流程图初始化
|
||
init() {
|
||
// 初始化配置
|
||
lf = new LogicFlow({
|
||
overlapMode: 1,
|
||
container: document.querySelector('#container'), // 容器
|
||
// 画布配置
|
||
// width: window.innerWidth, // 宽度
|
||
height: window.innerHeight, // 高度
|
||
grid: { // 不用格子直接显示，使用背景
|
||
visible: false,
|
||
type: 'mesh',
|
||
size: 5
|
||
},
|
||
background: {
|
||
// backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")',
|
||
backgroundRepeat: 'repeat'
|
||
},
|
||
adjustEdge: false,
|
||
adjustEdgeMiddle: false,
|
||
adjustEdgeStartAndEnd: false,
|
||
adjustNodePosition: false,
|
||
hideAnchors: true,
|
||
nodeTextEdit: false,
|
||
edgeTextEdit: false
|
||
})
|
||
lf.setTheme(
|
||
{
|
||
baseEdge: { strokeWidth: 1 },
|
||
baseNode: { strokeWidth: 1 },
|
||
nodeText: { overflowMode: 'autoWrap', lineHeight: 1.5 },
|
||
edgeText: { overflowMode: 'autoWrap', lineHeight: 1.5 }
|
||
}
|
||
)
|
||
// 注册自定义元素
|
||
registerCustomElement(lf)
|
||
// 删除默认的右键菜单
|
||
lf.extension.menu.setMenuConfig({
|
||
nodeMenu: false
|
||
})
|
||
lf.on('node:click', (data, e) => { // 鼠标点击节点
|
||
// 展开显示设备信息 todo: 1
|
||
if (data.data.type !== 'pro-rect' && data.data.type !== 'pro-circle' && data.data.type !== 'triangle' && data.data.type !== 'rect-radius') {
|
||
if (data.data.properties.struct_id) {
|
||
this.moveShow(data.data) // 传递节点数据，用来获取id做比对
|
||
this.dialogDeviceMsgVisible = true
|
||
this.struct_id = data.data.properties.struct_id // ?暂时没用
|
||
this.tops = data.e.y + 'px'
|
||
document.getElementsByClassName('el-dialog')[0].style.marginLeft = data.e.x + 'px'
|
||
}
|
||
}
|
||
})
|
||
// lf.on('node:mouseleave', (data, e) => {
|
||
// this.dialogDeviceMsgVisible = false
|
||
// })
|
||
// 开始渲染
|
||
lf.render(data)
|
||
this.initStageData()
|
||
},
|
||
initStageData() {
|
||
// 获取舞台编码
|
||
crudStage.getNewStageDataByCode(this.stageParam).then(res => {
|
||
data = JSON.parse(res.stage_data)
|
||
lf.render(data)
|
||
this.initStatus()
|
||
})
|
||
// todo: 定时器
|
||
// this.timer = setInterval(() => { // 定时刷新设备的状态信息
|
||
// console.log('定时器启动')
|
||
// this.initStatus()
|
||
// }, 10000)
|
||
},
|
||
initStatus() { // 初始化数据
|
||
let resion = {}
|
||
resion = lf.getGraphData().nodes.map(item => ({ id: item.id, struct_id: item.properties.struct_id }))
|
||
getStructByCodes(resion).then(res => {
|
||
this.allStructMsg = res
|
||
// 实时设置状态信息
|
||
for (var item of res) { // 循环设置属性
|
||
if (item.struct_status != undefined) {
|
||
lf.setProperties(item.id, {
|
||
struct_status: item.struct_status
|
||
})
|
||
}
|
||
}
|
||
// 设置动态实时显示设备信息
|
||
const { nodes } = lf.getSelectElements() // 获取选中的节点
|
||
if (nodes.length === 1) { // 因为是定时器，没有选中则不用实时更新显示数据
|
||
this.moveShow(nodes[0]) // 监控模式下不可能托选，因此就只有一个数据
|
||
}
|
||
})
|
||
},
|
||
moveShow(nodeData) { // 点击之后显示出来的数据----只需要设备信息
|
||
let item = ''
|
||
// 查找点击节点的id
|
||
item = this.allStructMsg.find((structMsg) => structMsg.id === nodeData.id)
|
||
this.arr = [] // 清空
|
||
if (item.struct_id && item.data) { // item.data是数组
|
||
this.arr = [
|
||
{ name: '货位编号', value: item.struct_code }
|
||
]
|
||
const data1 = item.data[0] // 至少有一条
|
||
const data = item.data // 总的data数据
|
||
// 以下是设置参数显示值
|
||
for (const val in data1) {
|
||
if (val === 'storagevehicle_code' && data1.storagevehicle_code) {
|
||
const obj = { name: '木箱号', value: data1[val] }
|
||
this.arr.push(obj)
|
||
}
|
||
if (val === 'quanlity_in_box' && data1.quanlity_in_box) {
|
||
const obj = { name: '子卷数', value: data1[val] }
|
||
this.arr.push(obj)
|
||
}
|
||
if (val === 'sale_order_name' && data1.sale_order_name) {
|
||
const obj = { name: '订单号', value: data1[val] }
|
||
this.arr.push(obj)
|
||
}
|
||
if (val === 'product_description' && data1.product_description) {
|
||
const obj = { name: '物料', value: data1[val] }
|
||
this.arr.push(obj)
|
||
}
|
||
if (val === 'box_weight' && data1.box_weight) {
|
||
const obj = { name: '木箱总重', value: data1[val] }
|
||
this.arr.push(obj)
|
||
}
|
||
}
|
||
if (data.length > 1) { // 显示子卷
|
||
for (let i = 0; i < data.length; i++) {
|
||
let container_name
|
||
let net_weight
|
||
for (const val in data[i]) {
|
||
if (val === 'container_name' && data[i].container_name) {
|
||
container_name = data[i][val]
|
||
}
|
||
if (val === 'net_weight' && data[i].net_weight) {
|
||
net_weight = data[i][val]
|
||
}
|
||
}
|
||
if (container_name && net_weight) {
|
||
const obj = { name: container_name, value: net_weight }
|
||
this.arr.push(obj)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
html, body {
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
.container {
|
||
background-color: #f8f9fa;
|
||
height: 100%;
|
||
}
|
||
.newDialog /deep/ .el-dialog__header {
|
||
padding: 1vh 1vw 0 1vw;
|
||
}
|
||
.newDialog /deep/ .el-dialog__body {
|
||
padding: 1vh 1vw;
|
||
}
|
||
.toolbar-sty {
|
||
position: absolute;
|
||
margin-top: 5px;
|
||
top: 0;
|
||
padding: 5px;
|
||
left: 30px;
|
||
height: 45px;
|
||
/*width: 310px;*/
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
z-index: 10;
|
||
background: #e5e5e5;
|
||
}
|
||
</style>
|