添加舞台编辑设备绑定可搜索和优化操作按钮为svg图标

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)

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"

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)
     },

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>
     `

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,