root/longdianningxing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: 新增立库监控前后端

Browse Source
This commit is contained in:
liyongde
2023-04-13 10:28:43 +08:00
parent 4f572e14f6
commit a00be0d40a
30 changed files with 589 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
lms/nladmin-ui/src/views/system/logicflow/editor/components/DiagramToolbar.vue
View File

@@ -24,43 +24,67 @@
<step-foward size="18" />
</div>
<div style="margin-right: 5px">
<el-button size="mini" type="primary" @click="$_lock">锁定</el-button>
<el-tooltip class="item" effect="dark" content="锁定" placement="top">
<svg-icon class="toolbar-item" icon-class="lock" @click="$_lock"/>
</el-tooltip>
</div>
<div style="margin-right: 5px">
<el-button size="mini" type="primary" @click="$_unlock">解锁</el-button>
<el-tooltip class="item" effect="dark" content="解锁" placement="top">
<svg-icon class="toolbar-item" icon-class="unlock" @click="$_unlock"/>
</el-tooltip>
</div>
<div style="margin-right: 5px">
<el-button size="mini" type="primary" @click="$_verticalAlign">垂直居中</el-button>
<el-tooltip class="item" effect="dark" content="垂直对齐" placement="top">
<svg-icon class="toolbar-item" icon-class="verticalAlign" @click="$_verticalAlign"/>
</el-tooltip>
</div>
<div style="margin-right: 5px">
<el-button size="mini" type="primary" @click="$_horizontalAlign">水平居中</el-button>
<el-tooltip class="item" effect="dark" content="水平对齐" placement="top">
<svg-icon class="toolbar-item" icon-class="horizontalAlign" @click="$_horizontalAlign"/>
</el-tooltip>
</div>
<div style="margin-right: 5px">
<el-button size="mini" type="primary" @click="$_leftAlign">向左对齐</el-button>
<el-tooltip class="item" effect="dark" content="左边对齐" placement="top">
<svg-icon class="toolbar-item" icon-class="leftAlign" @click="$_leftAlign"/>
</el-tooltip>
</div>
<div style="margin-right: 5px">
<el-button size="mini" type="primary" @click="$_rightAlign">向右对齐</el-button>
<el-tooltip class="item" effect="dark" content="右边对齐" placement="top">
<svg-icon class="toolbar-item" icon-class="rightAlign" @click="$_rightAlign"/>
</el-tooltip>
</div>
<div style="margin-right: 5px">
<el-button size="mini" type="primary" @click="$_upAlign">向上对齐</el-button>
<el-tooltip class="item" effect="dark" content="顶部对齐" placement="top">
<svg-icon class="toolbar-item" icon-class="upAlign" @click="$_upAlign"/>
</el-tooltip>
</div>
<div style="margin-right: 5px">
<el-button size="mini" type="primary" @click="$_downAlign">向下对齐</el-button>
<el-tooltip class="item" effect="dark" content="底部对齐" placement="top">
<svg-icon class="toolbar-item" icon-class="downAlign" @click="$_downAlign"/>
</el-tooltip>
</div>
<div style="margin-right: 5px">
<el-button size="mini" type="primary" @click="$_horizontalDistribution">水平分布</el-button>
<el-tooltip class="item" effect="dark" content="水平分布" placement="top">
<svg-icon class="toolbar-item" icon-class="verticalDistribution" @click="$_horizontalDistribution"/>
</el-tooltip>
</div>
<div style="margin-right: 5px">
<el-button size="mini" type="primary" @click="$_verticalDistribution">垂直分布</el-button>
<el-tooltip class="item" effect="dark" content="垂直分布" placement="top">
<svg-icon class="toolbar-item" icon-class="horizontalDistribution" @click="$_verticalDistribution"/>
</el-tooltip>
</div>
<div style="margin-right: 5px">
<el-button size="mini" type="primary" @click="$_cleanGraph">清空画布</el-button>
<el-tooltip class="item" effect="dark" content="清空画布" placement="top">
<svg-icon class="toolbar-item" icon-class="clear" @click="$_cleanGraph"/>
</el-tooltip>
</div>
<div style="margin-right: 5px">
<el-button size="mini" type="primary" @click="$_saveGraph">保存</el-button>
<el-tooltip class="item" effect="dark" content="保存" placement="top">
<svg-icon class="toolbar-item" icon-class="save" @click="$_saveGraph"/>
</el-tooltip>
</div>
<div>
<el-select v-model="linetype" size="mini" @change="$_changeLineType" style="width: 80px">
<el-select v-model="linetype" size="mini" style="width: 80px" @change="$_changeLineType">
<el-option
v-for="item in lineOptions"
:key="item.value"
@@ -71,7 +95,7 @@
</div>
<div>
<span style="font-size: 14px; margin-left: 5px">舞台:</span>
<el-select v-model="stage_code" placeholder="请选择" @change="$_changeStage">
<el-select v-model="stage_code" placeholder="请选择" @change="$_changeStage" size="mini">
<el-option
v-for="item in stageSelectList"
:key="item.stage_code"

63
lms/nladmin-ui/src/views/system/logicflow/editor/components/node/html/htmlNode.js
View File

@@ -1,13 +1,16 @@
import { HtmlResize } from '@logicflow/extension'
import defaultUrl from '../../../image/agv.svg'
import defaultUrl from '../../../image/Empty_state_money.svg'
import vehicle from '../../../image/vehicle.svg'
import api from '@/store/modules/api'
import tray from '../../../image/托盘.svg'
import icon_alert from '../../../image/icon_alert.png'
import rold from '../../../image/rold.svg'
import wood from '../../../image/wood.svg'
import empty from '../../../image/empty.svg'
import ban from '../../../image/ban.svg'
class ButtonNodeModel extends HtmlResize.model {
initNodeData(data) {
super.initNodeData(data)
this.width = 100
this.height = 100
this.width = 50
this.height = 50
this.text.draggable = true
this.text.editable = false
}
@@ -25,50 +28,46 @@ class ButtonNode extends HtmlResize.view {
// console.log('oldNode', oldNode)
// 路径前缀
const baseUrl = api.state.baseApi
// 颜色
let statusColor = '#1a912a'
// 默认图片
// let imageUrl = baseUrl + '/file/图片/专机-20220722094234555.png'
let imageUrl = defaultUrl
// 托盘图片
const goods = tray
const trayHeight = Math.round(2 / 3 * oldNode._height)
const trayWidth = Math.round(2 / 3 * oldNode._width)
let trayDisplay = 'none'
// 故障图片
const fault = icon_alert
let faultDisplay = 'none'
// todo: 根据字段参数来判断图片怎么显示
if (properties.struct_status) {
switch (properties.struct_status) {
case 1:
imageUrl = vehicle
break
case 2:
imageUrl = wood
break
case 3:
imageUrl = empty
break
case 4:
imageUrl = ban
break
default:
break
}
}
if (properties.imageUrl) { // 与图片尾部拼接
imageUrl = baseUrl + '/file/图片/' + properties.imageUrl
}
if (properties.flag == '1') {
imageUrl = rold
}
if (!properties.transform) { // 如果没有值，设置默认为0度
properties.transform = 0
}
if (properties.isOnline) {
statusColor = '#54dc5f'
}
if (!properties.device) {
statusColor = 'rgba(255,255,255,0)'
}
if (properties.hasGoods) {
// 显示图片，并设置宽高
trayDisplay = 'flex'
}
if (properties.isError) {
// 显示图片，并设置宽高
faultDisplay = 'flex'
}
if (properties.isLock !== undefined) {
oldNode.draggable = !properties.isLock
}
const el = document.createElement('div')
el.className = 'uml-wrapper'
// el.id = 'uml-app'
// 节点显示数据html
const html = `
<div>
<div style="height: 15px; width: 15px; background-color: ${statusColor}; position: absolute; border-radius: 100px; z-index: 9999"></div>
<img src="${goods}" style="position: absolute; height: ${trayHeight}px; width: ${trayWidth}px; top: 15%; left: 15%; display: ${trayDisplay}">
<img src="${fault}" style="position: absolute; height: ${trayHeight}px; width: ${trayWidth}px; top: 15%; left: 15%; display: ${faultDisplay}">
<img style="transform: rotate(${properties.transform}deg);" height="${oldNode._height}" width="${oldNode._width}" src="${imageUrl}">
</div>
`

1
lms/nladmin-ui/src/views/system/logicflow/editor/image/Empty_state_money.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

1
lms/nladmin-ui/src/views/system/logicflow/editor/image/ban.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681192570476" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2046" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M891.050667 248.149333A101.888 101.888 0 0 0 820.352 213.333333H205.056a114.773333 114.773333 0 0 0-73.088 33.536C112.426667 266.410667 0 447.914667 0 486.144v244.053333c0.170667 18.432 7.68 36.053333 20.821333 48.896 13.397333 12.970667 31.317333 20.181333 49.92 20.053334h882.56c18.56 0.128 36.522667-7.082667 49.877334-20.096 13.141333-12.885333 20.650667-30.378667 20.821333-48.810667v-244.053333c0-38.272-132.992-238.037333-132.992-238.037334z m-227.669334 216.362667a32.981333 32.981333 0 0 0-33.792 23.765333v4.992a115.285333 115.285333 0 0 1-230.4-6.570666 36.437333 36.437333 0 0 0-32.682666-22.442667H76.288l98.901333-167.253333s19.797333-32.426667 38.613334-32.213334h616.021333c13.866667 7.296 25.344 18.346667 33.237333 31.914667l97.066667 167.808h-296.874667 0.128z" fill="#cdcdcd" p-id="2047"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
lms/nladmin-ui/src/views/system/logicflow/editor/image/default.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681284873241" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1037" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M511.1296 490.1376l385.536-222.464a73.216 73.216 0 0 0-15.36-11.9808L546.8672 65.536a72.2432 72.2432 0 0 0-72.2432 0.4608l-331.776 194.56a70.912 70.912 0 0 0-10.24 7.5264zM487.2192 526.2336L109.4144 304.5888a72.0896 72.0896 0 0 0-2.304 18.5344l2.4576 384.5632a72.192 72.192 0 0 0 36.5056 62.3104l334.2336 190.1568c2.2528 1.28 4.608 2.3552 6.912 3.3792zM916.48 306.1248l-385.9968 222.7712v439.0912a70.144 70.144 0 0 0 22.016-8.2944l331.8272-194.56a72.192 72.192 0 0 0 35.84-62.7712l-2.4064-384.5632a76.4928 76.4928 0 0 0-1.28-11.6736z" fill="#bfbfbf" p-id="1038"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 908 B

1
lms/nladmin-ui/src/views/system/logicflow/editor/image/empty.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681192570476" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2046" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M891.050667 248.149333A101.888 101.888 0 0 0 820.352 213.333333H205.056a114.773333 114.773333 0 0 0-73.088 33.536C112.426667 266.410667 0 447.914667 0 486.144v244.053333c0.170667 18.432 7.68 36.053333 20.821333 48.896 13.397333 12.970667 31.317333 20.181333 49.92 20.053334h882.56c18.56 0.128 36.522667-7.082667 49.877334-20.096 13.141333-12.885333 20.650667-30.378667 20.821333-48.810667v-244.053333c0-38.272-132.992-238.037333-132.992-238.037334z m-227.669334 216.362667a32.981333 32.981333 0 0 0-33.792 23.765333v4.992a115.285333 115.285333 0 0 1-230.4-6.570666 36.437333 36.437333 0 0 0-32.682666-22.442667H76.288l98.901333-167.253333s19.797333-32.426667 38.613334-32.213334h616.021333c13.866667 7.296 25.344 18.346667 33.237333 31.914667l97.066667 167.808h-296.874667 0.128z" fill="#228B22" p-id="2047"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

63
lms/nladmin-ui/src/views/system/logicflow/editor/image/k.svg Normal file
View File

@@ -0,0 +1,63 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" height="1024px" width="1024px">
<title>没有数据</title>
<defs>
<linearGradient id="linearGradient-1" y2="-2.47145299e-14%" x2="50%" y1="100%" x1="50%">
<stop offset="0%" stop-opacity="0.1" stop-color="#FFFFFF"></stop>
<stop offset="13%" stop-opacity="0.19" stop-color="#FBFDFF"></stop>
<stop offset="41%" stop-opacity="0.43" stop-color="#F1F7FF"></stop>
<stop offset="81%" stop-opacity="0.82" stop-color="#E1EEFF"></stop>
<stop offset="100%" stop-color="#D9E9FF"></stop>
</linearGradient>
<filter id="filter-2" filterUnits="objectBoundingBox" height="566.7%" width="152.5%" y="-233.3%" x="-26.3%">
<feGaussianBlur in="SourceGraphic" stdDeviation="34.4615385"></feGaussianBlur>
</filter>
<linearGradient id="linearGradient-3" y2="50.0060613%" x2="99.5602054%" y1="50.0060613%" x1="0.334514458%">
<stop offset="0%" stop-color="#B3D0FD"></stop>
<stop offset="100%" stop-color="#B8D0FF"></stop>
</linearGradient>
<linearGradient id="linearGradient-4" y2="50.0060613%" x2="99.5602054%" y1="50.0060613%" x1="0.334514458%">
<stop offset="0%" stop-color="#E2ECFF"></stop>
<stop offset="100%" stop-color="#99C0FF"></stop>
</linearGradient>
<linearGradient id="linearGradient-5" y2="68.7464504%" x2="83.1961591%" y1="53.8713182%" x1="16.8038409%">
<stop offset="0%" stop-color="#A0CDFF"></stop>
<stop offset="100%" stop-color="#568BFF"></stop>
</linearGradient>
<linearGradient id="linearGradient-6" y2="59.6198704%" x2="25.8284716%" y1="44.0234802%" x1="74.1715284%">
<stop offset="0%" stop-color="#B5D8FF"></stop>
<stop offset="100%" stop-color="#75A0FF"></stop>
</linearGradient>
<linearGradient id="linearGradient-7" y2="50%" x2="-14.8903051%" y1="50%" x1="100%">
<stop offset="0%" stop-color="#FFFFFF"></stop>
<stop offset="6%" stop-color="#F9FCFF"></stop>
<stop offset="67.4804304%" stop-color="#DAEAFF"></stop>
<stop offset="84.9696706%" stop-color="#C7DFFF"></stop>
<stop offset="100%" stop-color="#C0DBFF"></stop>
</linearGradient>
<linearGradient id="linearGradient-8" y2="-4054.70568%" x2="-1316.74401%" y1="-4054.70568%" x1="-1416.74401%">
<stop offset="0%" stop-color="#CBE2FC"></stop>
<stop offset="4%" stop-color="#FCFDFF"></stop>
<stop offset="35%" stop-color="#E9F3FF"></stop>
<stop offset="66%" stop-color="#DEECFF"></stop>
<stop offset="100%" stop-color="#DAEAFF"></stop>
</linearGradient>
</defs>
<g fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="没有数据">
<g id="编组">
<rect height="1024" width="1024" y="0" x="0" fill="#FFFFFF" id="矩形"></rect>
<g transform="translate(221.538462, 226.461538)" id="编组-33">
<g id="编组-32">
<path fill-rule="nonzero" fill="url(#linearGradient-1)" id="形状结合备份-13" d="M0,551.384615 L0,113.230769 L125.538,113.23 L125.538462,0 L324.923077,0 L324.923,167.384 L435.692308,167.384615 L435.692308,551.384615 L0,551.384615 Z M484.923077,113.230769 L580.923077,113.230769 L580.923077,551.384615 L484.923077,551.384615 L484.923077,113.230769 Z"></path>
<ellipse ry="22.1538462" rx="196.923077" cy="551.384615" cx="290.461538" filter="url(#filter-2)" fill="#C2D5FF" id="椭圆形备份-9"></ellipse>
<polygon points="443.111189 512 285.538462 491.043405 285.538462 317.538462 443.111189 337.230769" fill-rule="nonzero" fill="url(#linearGradient-3)" id="路径"></polygon>
<polygon points="140.307692 512 285.538462 490.805339 285.538462 317.538462 140.307692 339.692308" fill-rule="nonzero" fill="url(#linearGradient-4)" id="路径"></polygon>
<polygon points="302.769231 539.076923 140.307692 513.50918 140.307692 339.692308 302.769231 365.235724" fill="url(#linearGradient-5)" id="路径"></polygon>
<polygon points="302.769231 539.076923 443.111189 512 443.111189 337.230769 302.769231 364.220259" fill="url(#linearGradient-6)" id="路径"></polygon>
<polygon points="258.256172 406.153846 93.5384615 381.063661 138.05152 339.692308 302.769231 364.758619" fill-rule="nonzero" fill="url(#linearGradient-7)" id="路径"></polygon>
<polygon points="344.581117 403.692308 487.384615 377.852661 443.111189 337.230769 302.769231 364.220259" fill-rule="nonzero" fill="url(#linearGradient-8)" id="路径"></polygon>
</g>
<g transform="translate(93.538462, 317.538462)" id="编组-5备份"></g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

1
lms/nladmin-ui/src/views/system/logicflow/editor/image/rold.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681208813752" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6697" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M544 480V64h-64v416H64v64h416v416h64V544h416v-64z" fill="#727272" p-id="6698"></path><path d="M123.7 241.1h119.5v64H123.7zM302.9 241.1h119.5v64H302.9zM601.6 241.1h119.5v64H601.6zM780.8 241.1h119.5v64H780.8zM123.7 718.9h119.5v64H123.7zM302.9 718.9h119.5v64H302.9zM601.6 718.9h119.5v64H601.6zM780.8 718.9h119.5v64H780.8z" fill="#B2B2B2" p-id="6699"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 693 B

1
lms/nladmin-ui/src/views/system/logicflow/editor/image/vehicle.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681192570476" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2046" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M891.050667 248.149333A101.888 101.888 0 0 0 820.352 213.333333H205.056a114.773333 114.773333 0 0 0-73.088 33.536C112.426667 266.410667 0 447.914667 0 486.144v244.053333c0.170667 18.432 7.68 36.053333 20.821333 48.896 13.397333 12.970667 31.317333 20.181333 49.92 20.053334h882.56c18.56 0.128 36.522667-7.082667 49.877334-20.096 13.141333-12.885333 20.650667-30.378667 20.821333-48.810667v-244.053333c0-38.272-132.992-238.037333-132.992-238.037334z m-227.669334 216.362667a32.981333 32.981333 0 0 0-33.792 23.765333v4.992a115.285333 115.285333 0 0 1-230.4-6.570666 36.437333 36.437333 0 0 0-32.682666-22.442667H76.288l98.901333-167.253333s19.797333-32.426667 38.613334-32.213334h616.021333c13.866667 7.296 25.344 18.346667 33.237333 31.914667l97.066667 167.808h-296.874667 0.128z" fill="#1296db" p-id="2047"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
lms/nladmin-ui/src/views/system/logicflow/editor/image/wood.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681192570476" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2046" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M891.050667 248.149333A101.888 101.888 0 0 0 820.352 213.333333H205.056a114.773333 114.773333 0 0 0-73.088 33.536C112.426667 266.410667 0 447.914667 0 486.144v244.053333c0.170667 18.432 7.68 36.053333 20.821333 48.896 13.397333 12.970667 31.317333 20.181333 49.92 20.053334h882.56c18.56 0.128 36.522667-7.082667 49.877334-20.096 13.141333-12.885333 20.650667-30.378667 20.821333-48.810667v-244.053333c0-38.272-132.992-238.037333-132.992-238.037334z m-227.669334 216.362667a32.981333 32.981333 0 0 0-33.792 23.765333v4.992a115.285333 115.285333 0 0 1-230.4-6.570666 36.437333 36.437333 0 0 0-32.682666-22.442667H76.288l98.901333-167.253333s19.797333-32.426667 38.613334-32.213334h616.021333c13.866667 7.296 25.344 18.346667 33.237333 31.914667l97.066667 167.808h-296.874667 0.128z" fill="#1afa29" p-id="2047"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

5
lms/nladmin-ui/src/views/system/logicflow/index.vue
View File

@@ -46,7 +46,7 @@
<el-table-column prop="create_time" label="创建时间" min-width="135" />
<el-table-column prop="update_by" label="修改者" />
<el-table-column prop="update_time" label="修改时间" min-width="135" />
<el-table-column v-permission="['admin','stage:edit','stage:del']" label="操作" width="150px" align="center">
<el-table-column label="操作" width="150px" align="center">
<template slot-scope="scope">
<udOperation
:data="scope.row"
@@ -101,9 +101,6 @@ export default {
data() {
return {
permission: {
add: ['admin', 'stage:add'],
edit: ['admin', 'stage:edit'],
del: ['admin', 'stage:del']
},
rules: {
stage_code: [

145
lms/nladmin-ui/src/views/system/monitor/device/index.vue
View File

@@ -3,24 +3,50 @@
<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 paramCrud from '@/views/system/param/param'
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: 'test', // 舞台参数
stageParam: 'AS', // 舞台参数
dialogDeviceMsgVisible: false,
device_code: null,
tops: '20vh',
@@ -41,7 +67,7 @@ export default {
requireSucess: '',
fullrequireSucess: ''
},
allDeviceMsg: [],
allStructMsg: [],
msgTop: '200px',
msgLeft: '200px'
}
@@ -49,6 +75,11 @@ export default {
mounted() {
this.init()
},
beforeDestroy() {
// js提供的clearInterval方法用来清除定时器
console.log('定时器销毁')
clearInterval(this.timer)
},
methods: {
// 流程图初始化
init() {
@@ -65,7 +96,7 @@ export default {
size: 5
},
background: {
backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")',
// backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")',
backgroundRepeat: 'repeat'
},
adjustEdge: false,
@@ -91,26 +122,110 @@ export default {
nodeMenu: false
})
lf.on('node:click', (data, e) => { // 鼠标点击节点
// 展开显示设备信息
console.log('1')
})
lf.on('node:contextmenu', (data, e, position) => { // 右键
console.log('2')
// 展开显示设备信息 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() {
// 获取舞台编码
this.getValueByCode(this.stageParam).then(res => {
if (res.value !== undefined) {
crudStage.getNewStageDataByCode(res.value).then(res => {
data = JSON.parse(res.stage_data)
lf.render(data)
})
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)
}
}
}
}
}
}
}

9
lms/nladmin-ui/src/views/system/monitor/device/structStage.js Normal file
View File

@@ -0,0 +1,9 @@
import request from '@/utils/request'
export function getStructByCodes(data) { // 获取舞台上设备信息
return request({
url: 'api/structattr/getStructByCodes',
method: 'post',
data: data
})
}