From 091cf4e8ddd92c1d919e8e3d69b2905549e11536 Mon Sep 17 00:00:00 2001
From: lyd <1419499670@qq.com>
Date: Thu, 18 Aug 2022 10:18:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=88=9E=E5=8F=B0=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E8=AE=BE=E5=A4=87=E7=BB=91=E5=AE=9A=E5=8F=AF=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E5=92=8C=E4=BC=98=E5=8C=96=E6=93=8D=E4=BD=9C=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E4=B8=BAsvg=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 acs/qd/src/assets/icons/svg/clear.svg         |  2 ++
 acs/qd/src/assets/icons/svg/downAlign.svg     |  2 ++
 .../src/assets/icons/svg/horizontalAlign.svg  |  2 ++
 .../icons/svg/horizontalDistribution.svg      |  2 ++
 acs/qd/src/assets/icons/svg/leftAlign.svg     |  2 ++
 acs/qd/src/assets/icons/svg/rightAlign.svg    |  2 ++
 acs/qd/src/assets/icons/svg/save.svg          |  2 ++
 acs/qd/src/assets/icons/svg/upAlign.svg       |  2 ++
 acs/qd/src/assets/icons/svg/verticalAlign.svg |  2 ++
 .../assets/icons/svg/verticalDistribution.svg |  2 ++
 acs/qd/src/views/monitor/logback/index.vue    |  2 +-
 .../editor/components/DiagramToolbar.vue      | 26 ++++++++--------
 .../editor/components/PropertyPanel.vue       | 30 +++++++++++++++++--
 .../editor/components/node/html/htmlNode.js   | 11 +++++--
 .../views/system/logicflow/monitor/index.vue  |  3 +-
 15 files changed, 73 insertions(+), 19 deletions(-)
 create mode 100644 acs/qd/src/assets/icons/svg/clear.svg
 create mode 100644 acs/qd/src/assets/icons/svg/downAlign.svg
 create mode 100644 acs/qd/src/assets/icons/svg/horizontalAlign.svg
 create mode 100644 acs/qd/src/assets/icons/svg/horizontalDistribution.svg
 create mode 100644 acs/qd/src/assets/icons/svg/leftAlign.svg
 create mode 100644 acs/qd/src/assets/icons/svg/rightAlign.svg
 create mode 100644 acs/qd/src/assets/icons/svg/save.svg
 create mode 100644 acs/qd/src/assets/icons/svg/upAlign.svg
 create mode 100644 acs/qd/src/assets/icons/svg/verticalAlign.svg
 create mode 100644 acs/qd/src/assets/icons/svg/verticalDistribution.svg

diff --git a/acs/qd/src/assets/icons/svg/clear.svg b/acs/qd/src/assets/icons/svg/clear.svg
new file mode 100644
index 0000000..add284f
--- /dev/null
+++ b/acs/qd/src/assets/icons/svg/clear.svg
@@ -0,0 +1,2 @@
+<?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="1660786702479" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9117" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M736 128l-32-64H320l-32 64H128v128h768V128H736zM192 896a64 64 0 0 0 64 64h512a64 64 0 0 0 64-64V320H192z" p-id="9118" fill="#000000"></path></svg>
\ No newline at end of file
diff --git a/acs/qd/src/assets/icons/svg/downAlign.svg b/acs/qd/src/assets/icons/svg/downAlign.svg
new file mode 100644
index 0000000..d02dce2
--- /dev/null
+++ b/acs/qd/src/assets/icons/svg/downAlign.svg
@@ -0,0 +1,2 @@
+<?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="1660785745738" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4619" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M64 896h896v64H64z" fill="#000000" p-id="4620"></path><path d="M192 832V64h256v768z" fill="#000000" p-id="4621"></path><path d="M576 832V320h256v512z" fill="#000000" p-id="4622"></path></svg>
diff --git a/acs/qd/src/assets/icons/svg/horizontalAlign.svg b/acs/qd/src/assets/icons/svg/horizontalAlign.svg
new file mode 100644
index 0000000..ed79e1a
--- /dev/null
+++ b/acs/qd/src/assets/icons/svg/horizontalAlign.svg
@@ -0,0 +1,2 @@
+<?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="1660787363495" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11210" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M64 480h896v64H64z" fill="#000000" p-id="11211"></path><path d="M832 256v512H576V256z" fill="#000000" p-id="11212"></path><path d="M448 128v768H192V128z" fill="#000000" p-id="11213"></path></svg>
\ No newline at end of file
diff --git a/acs/qd/src/assets/icons/svg/horizontalDistribution.svg b/acs/qd/src/assets/icons/svg/horizontalDistribution.svg
new file mode 100644
index 0000000..b4af40e
--- /dev/null
+++ b/acs/qd/src/assets/icons/svg/horizontalDistribution.svg
@@ -0,0 +1,2 @@
+<?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="1660786338362" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6924" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M768 938.666667V85.333333h59.733333v853.333334zM196.266667 938.666667V85.333333H256v853.333334z m251.733333-128A64 64 0 0 1 384 746.666667v-469.333334A64 64 0 0 1 448 213.333333h128A64 64 0 0 1 640 277.333333v469.333334a64 64 0 0 1-64 64z" p-id="6925" fill="#000000"></path></svg>
diff --git a/acs/qd/src/assets/icons/svg/leftAlign.svg b/acs/qd/src/assets/icons/svg/leftAlign.svg
new file mode 100644
index 0000000..b373ac3
--- /dev/null
+++ b/acs/qd/src/assets/icons/svg/leftAlign.svg
@@ -0,0 +1,2 @@
+<?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="1660785822800" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5157" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M64 64h64v896H64z" fill="#000000" p-id="5158"></path><path d="M192 192h515v256H192z" fill="#000000" p-id="5159"></path><path d="M192 576h768v256H192z" fill="#000000" p-id="5160"></path></svg>
diff --git a/acs/qd/src/assets/icons/svg/rightAlign.svg b/acs/qd/src/assets/icons/svg/rightAlign.svg
new file mode 100644
index 0000000..b0670ba
--- /dev/null
+++ b/acs/qd/src/assets/icons/svg/rightAlign.svg
@@ -0,0 +1,2 @@
+<?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="1660785927475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5880" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M896 64h64v896h-64z" fill="#000000" p-id="5881"></path><path d="M320 192h512v256H320z" fill="#000000" p-id="5882"></path><path d="M64 576h768v256H64z" fill="#000000" p-id="5883"></path></svg>
diff --git a/acs/qd/src/assets/icons/svg/save.svg b/acs/qd/src/assets/icons/svg/save.svg
new file mode 100644
index 0000000..e9e05e3
--- /dev/null
+++ b/acs/qd/src/assets/icons/svg/save.svg
@@ -0,0 +1,2 @@
+<?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="1660786920066" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10198" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M643.85952427 262.90530987c-18.01693867 0-32.75707733 14.614528-32.75707734 32.48401066v81.20456534c0 17.86948267 14.74013867 32.489472 32.75707734 32.489472s32.75707733-14.61998933 32.75707733-32.489472v-81.20456534c0-17.86948267-14.74013867-32.48401067-32.75707733-32.48401066z" fill="#2c2c2c" p-id="10199"></path><path d="M910.47417173 313.84644267l-145.784832-207.89111467c-13.09627733-17.86948267-34.39547733-29.23451733-58.966016-30.86199467H175.01825707c-36.03933867 0-65.519616 29.23451733-65.519616 64.96802134v745.49930666c0 35.733504 29.48027733 63.34600533 65.519616 63.34600534h689.586176c36.03933867 0 63.88667733-29.23997867 63.88667733-63.34600534v-526.23223466c1.6384-17.86948267-6.54813867-34.111488-18.01693867-45.481984zM205.0555904 171.87908267h517.59786667v220.889088c0 30.85653333-26.2144 58.46903467-58.966016 58.46903466H264.0216064c-32.76253867 0-58.966016-25.985024-58.966016-58.46903466V171.87908267z m544.25572693 665.059328h-462.60770133c-24.6382592 0-44.61253973-20.29431467-44.61253973-45.32906667s19.97318827-45.32906667 44.61253973-45.32906667h462.60770133c24.6382592 0 44.61253973 20.29431467 44.61253974 45.32906667s-19.97428053 45.32906667-44.61253974 45.32906667z m0.00109227-167.10587734H286.70252373c-24.6382592 0-44.61253973-20.29431467-44.61253973-45.32906666s19.97318827-45.32906667 44.61253973-45.32906667h462.61097814c24.6382592 0 44.61253973 20.29431467 44.61253973 45.32906667s-19.97428053 45.32906667-44.613632 45.32906666z" fill="#000000" p-id="10200"></path></svg>
diff --git a/acs/qd/src/assets/icons/svg/upAlign.svg b/acs/qd/src/assets/icons/svg/upAlign.svg
new file mode 100644
index 0000000..29645dd
--- /dev/null
+++ b/acs/qd/src/assets/icons/svg/upAlign.svg
@@ -0,0 +1,2 @@
+<?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="1660785897716" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5639" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M64 64h896v64H64z" fill="#000000" p-id="5640"></path><path d="M192 960V192h256v768z" fill="#000000" p-id="5641"></path><path d="M576 704V192h256v512z" fill="#000000" p-id="5642"></path></svg>
diff --git a/acs/qd/src/assets/icons/svg/verticalAlign.svg b/acs/qd/src/assets/icons/svg/verticalAlign.svg
new file mode 100644
index 0000000..a3646a0
--- /dev/null
+++ b/acs/qd/src/assets/icons/svg/verticalAlign.svg
@@ -0,0 +1,2 @@
+<?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="1660785982322" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6318" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M480 64h64v896h-64z" fill="#000000" p-id="6319"></path><path d="M256 192h512v256H256z" fill="#000000" p-id="6320"></path><path d="M128 576h768v256H128z" fill="#000000" p-id="6321"></path></svg>
diff --git a/acs/qd/src/assets/icons/svg/verticalDistribution.svg b/acs/qd/src/assets/icons/svg/verticalDistribution.svg
new file mode 100644
index 0000000..e628a9e
--- /dev/null
+++ b/acs/qd/src/assets/icons/svg/verticalDistribution.svg
@@ -0,0 +1,2 @@
+<?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="1660786309837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6643" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M85.333333 827.733333V768h853.333334v59.733333zM277.333333 640A64 64 0 0 1 213.333333 576v-128A64 64 0 0 1 277.333333 384h469.333334a64 64 0 0 1 64 64v128a64 64 0 0 1-64 64zM85.333333 256V196.266667h853.333334V256z" p-id="6644" fill="#000000"></path></svg>
diff --git a/acs/qd/src/views/monitor/logback/index.vue b/acs/qd/src/views/monitor/logback/index.vue
index 5736855..2b83e17 100644
--- a/acs/qd/src/views/monitor/logback/index.vue
+++ b/acs/qd/src/views/monitor/logback/index.vue
@@ -295,7 +295,7 @@ export default {
         queryParam.end = (new Date(this.timeRange[1]).getTime() * 1000000).toString()
       }
       if (this.text !== '') {
-        queryParam.text = this.text
+        queryParam.text = this.text.replace(/^\s*|\s*$/g,'')
       }
       if (this.limits !== '') {
         console.log(this.limits)
diff --git a/acs/qd/src/views/system/logicflow/editor/components/DiagramToolbar.vue b/acs/qd/src/views/system/logicflow/editor/components/DiagramToolbar.vue
index ac24070..fcede31 100644
--- a/acs/qd/src/views/system/logicflow/editor/components/DiagramToolbar.vue
+++ b/acs/qd/src/views/system/logicflow/editor/components/DiagramToolbar.vue
@@ -24,40 +24,40 @@
       <step-foward size="18" />
     </div>
     <div style="margin-right: 5px">
-      <el-button size="mini" type="primary" @click="$_lock">锁定</el-button>
+      <svg-icon class="toolbar-item" icon-class="lock" @click="$_lock"/>
     </div>
     <div style="margin-right: 5px">
-      <el-button size="mini" type="primary" @click="$_unlock">解锁</el-button>
+      <svg-icon class="toolbar-item" icon-class="unlock" @click="$_unlock"/>
     </div>
     <div style="margin-right: 5px">
-      <el-button size="mini" type="primary" @click="$_verticalAlign">垂直居中</el-button>
+      <svg-icon class="toolbar-item" icon-class="verticalAlign" @click="$_verticalAlign"/>
     </div>
     <div style="margin-right: 5px">
-      <el-button size="mini" type="primary" @click="$_horizontalAlign">水平居中</el-button>
+      <svg-icon class="toolbar-item" icon-class="horizontalAlign" @click="$_horizontalAlign"/>
     </div>
     <div style="margin-right: 5px">
-      <el-button size="mini" type="primary" @click="$_leftAlign">向左对齐</el-button>
+      <svg-icon class="toolbar-item" icon-class="leftAlign" @click="$_leftAlign"/>
     </div>
     <div style="margin-right: 5px">
-      <el-button size="mini" type="primary" @click="$_rightAlign">向右对齐</el-button>
+      <svg-icon class="toolbar-item" icon-class="rightAlign" @click="$_rightAlign"/>
     </div>
     <div style="margin-right: 5px">
-      <el-button size="mini" type="primary" @click="$_upAlign">向上对齐</el-button>
+      <svg-icon class="toolbar-item" icon-class="upAlign" @click="$_upAlign"/>
     </div>
     <div style="margin-right: 5px">
-      <el-button size="mini" type="primary" @click="$_downAlign">向下对齐</el-button>
+      <svg-icon class="toolbar-item" icon-class="downAlign" @click="$_downAlign"/>
     </div>
     <div style="margin-right: 5px">
-      <el-button size="mini" type="primary" @click="$_horizontalDistribution">水平分布</el-button>
+      <svg-icon class="toolbar-item" icon-class="horizontalDistribution" @click="$_horizontalDistribution"/>
     </div>
     <div style="margin-right: 5px">
-      <el-button size="mini" type="primary" @click="$_verticalDistribution">垂直分布</el-button>
+      <svg-icon class="toolbar-item" icon-class="verticalDistribution" @click="$_verticalDistribution"/>
     </div>
     <div style="margin-right: 5px">
-      <el-button size="mini" type="primary" @click="$_cleanGraph">清空画布</el-button>
+      <svg-icon class="toolbar-item" icon-class="clear" @click="$_cleanGraph"/>
     </div>
     <div style="margin-right: 5px">
-      <el-button size="mini" type="primary" @click="$_saveGraph">保存</el-button>
+      <svg-icon class="toolbar-item" icon-class="save" @click="$_saveGraph"/>
     </div>
     <div>
       <el-select v-model="linetype" size="mini" style="width: 80px" @change="$_changeLineType">
@@ -71,7 +71,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"
diff --git a/acs/qd/src/views/system/logicflow/editor/components/PropertyPanel.vue b/acs/qd/src/views/system/logicflow/editor/components/PropertyPanel.vue
index b59e078..ad0a1ea 100644
--- a/acs/qd/src/views/system/logicflow/editor/components/PropertyPanel.vue
+++ b/acs/qd/src/views/system/logicflow/editor/components/PropertyPanel.vue
@@ -135,7 +135,23 @@
       </div>
       <div class="setting-item">
         <span>设备绑定</span>
-        <el-input v-model="style.device" placeholder="输入设备号" size="small" @change="$_changeDevice" />
+<!--        <el-input v-model="style.device" placeholder="输入设备号" size="small" @change="$_changeDevice" />-->
+        <el-select
+          filterable
+          v-model="style.device"
+          size="mini"
+          @change="$_changeDevice"
+        >
+          <el-option
+            v-for="item in deviceCodeOptions"
+            :key="item.device_id"
+            :value="item.device_code"
+            :label="item.device_code"
+          >
+            <span style="float: left">{{ item.device_code }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.device_name }}</span>
+          </el-option>
+        </el-select>
       </div>
       <div class="setting-item">
         <span>旋转角度</span>
@@ -152,6 +168,7 @@
       <div v-if="showChoice" class="setting-item">
         <span>设备选择</span>
         <el-select
+          filterable
           v-model="style.imageUrl"
           size="mini"
           @change="$_changeImageUrl"
@@ -172,6 +189,7 @@
 import { Sketch } from 'vue-color'
 import { shortStyles, borderStyles, fontFamilies } from '../constant'
 import crudStageImage from '@/api/logicflow/stageImage'
+import crudDevice, {selectDeviceList} from '@/api/acs/device/device'
 
 export default {
   components: {
@@ -209,7 +227,8 @@ export default {
       fontWeight: '', // 文本加粗
       lineHeightOptions: Array(5).fill(1).map((_, i) => _ + i * 0.5),
       // imageUrl: '',
-      imageUrlOptions: []
+      imageUrlOptions: [],
+      deviceCodeOptions: []
     }
   },
   watch: {
@@ -222,6 +241,7 @@ export default {
   },
   created() {
     this.initStageIconList()
+    this.initDevicesList()
   },
   methods: {
     initStageIconList() { // 初始化图标数据
@@ -232,6 +252,12 @@ export default {
         this.imageUrlOptions = data
       })
     },
+    initDevicesList() {
+      crudDevice.selectDeviceList().then(res => {
+        console.log('devices:', res)
+        this.deviceCodeOptions = res
+      })
+    },
     setStyle(item) {
       this.$emit('setStyle', item)
     },
diff --git a/acs/qd/src/views/system/logicflow/editor/components/node/html/htmlNode.js b/acs/qd/src/views/system/logicflow/editor/components/node/html/htmlNode.js
index bbd4d84..4ea3fe1 100644
--- a/acs/qd/src/views/system/logicflow/editor/components/node/html/htmlNode.js
+++ b/acs/qd/src/views/system/logicflow/editor/components/node/html/htmlNode.js
@@ -64,11 +64,18 @@ class ButtonNode extends HtmlResize.view {
     const el = document.createElement('div')
     el.className = 'uml-wrapper'
     // el.id = 'uml-app'
+    /**
+     * 以下分为：状态显示（设备左上的小圆点）
+     *          托盘图标
+     *          故障图标
+     *          设备图片
+     * @type {string}
+     */
     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 src="${goods}" style="position: absolute; height: ${trayHeight}px; width: ${trayWidth}px; top: 15%; left: 15%; display: ${trayDisplay}; z-index: 9999">
+        <img src="${fault}" style="position: absolute; height: ${trayHeight}px; width: ${trayWidth}px; top: 15%; left: 15%; display: ${faultDisplay}; z-index: 9999">
         <img style="transform: rotate(${properties.transform}deg);" height="${oldNode._height}" width="${oldNode._width}" src="${imageUrl}">
       </div>
     `
diff --git a/acs/qd/src/views/system/logicflow/monitor/index.vue b/acs/qd/src/views/system/logicflow/monitor/index.vue
index 4671d1c..7dff5ca 100644
--- a/acs/qd/src/views/system/logicflow/monitor/index.vue
+++ b/acs/qd/src/views/system/logicflow/monitor/index.vue
@@ -9,7 +9,7 @@
       title="设备信息"
       class="newDialog"
       :visible.sync="dialogDeviceMsgVisible"
-      width="18%"
+      width="22%"
       :top="tops"
       :show-close="false"
       :modal="false"
@@ -186,6 +186,7 @@ export default {
           backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")',
           backgroundRepeat: 'repeat'
         },
+        isSilentMode: true,
         adjustEdge: false,
         adjustEdgeMiddle: false,
         adjustEdgeStartAndEnd: false,