设备监控修改

acs/nladmin-ui/src/views/system/logicflow/editor/components/Diagram.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="diagram">
     <diagram-toolbar
+      style="z-index: 1"
       v-if="lf"
       class="diagram-toolbar"
       :lf="lf"
@@ -37,6 +38,7 @@
       :only-edge="activeNodes.length === 0"
       :elements-style="properties"
       :show-choice="showChoice"
+      :node="nodeObj"
       @setStyle="$_setStyle"
       @setZIndex="$_setZIndex"
     />
@@ -92,7 +94,8 @@ export default {
       nodeSize: {
         width: '',
         heigh: ''
-      }
+      },
+      nodeObj: {} // 给子组件传递信息 -- 下拉框实时更新信息
     }
   },
   mounted() {
@@ -144,29 +147,6 @@ export default {
       registerCustomElement(lf)
       lf.setDefaultEdgeType('pro-polyline')
 
-      // 为菜单追加选项（必须在 lf.render() 之前设置）
-      lf.extension.menu.addMenuConfig({
-        nodeMenu: [
-          {
-            text: '绑定设备号',
-            callback(node) {
-              console.log(lf.graphModel.getNodeModelById(node.id))
-              lf.graphModel.getNodeModelById(node.id).draggable = false
-            }
-          },
-          {
-            text: '属性',
-            callback(node) {
-              alert(`
-                节点ID：${node.id}
-                节点类型：${node.type}
-                节点坐标：(x: ${node.x}, y: ${node.y})`
-              )
-            }
-          }
-        ],
-        edgeMenu: []
-      })
       lf.render(data)
       this.lf = lf
       this.lf.on('selection:selected,node:click,blank:click,edge:click', () => { // 选择/点击事件
@@ -187,6 +167,8 @@ export default {
       console.log('选中的节点', nodes)
       // const graphModel = this.lf.graphModel
       // console.log(graphModel)
+      // 只传第一个,以第一个为显示是否绑定设备等信息，其余显示正常不用处理
+      this.nodeObj = nodes[0]
       nodes.forEach(node => {
         if (node.type === 'html-node') {
           this.showChoice = true

acs/nladmin-ui/src/views/system/logicflow/editor/components/DiagramToolbar.vue

@@ -24,40 +24,64 @@
       <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">

acs/nladmin-ui/src/views/system/logicflow/editor/components/PropertyPanel.vue

@@ -34,6 +34,56 @@
           <div slot="reference" class="border-color" :style="{'backgroundColor': style.gradientColor}" />
         </el-popover>
       </div>
+      <div class="setting-item">
+        <span>设备绑定</span>
+        <el-select
+          filterable
+          clearable
+          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>
+        <el-input-number
+          v-model="style.transform"
+          controls-position="right"
+          size="mini"
+          :min="0"
+          :max="360"
+          :step="90"
+          @change="$_changeTransform"
+        />
+        <span>度</span>
+      </div>
+      <div v-if="showChoice" class="setting-item">
+        <span>设备选择</span>
+        <el-select
+          filterable
+          clearable
+          v-model="style.imageUrl"
+          size="mini"
+          @change="$_changeImageUrl"
+        >
+          <el-option
+            v-for="item in imageUrlOptions"
+            :key="item.image_uuid"
+            :value="item.image_code"
+            :label="item.image_name"
+          />
+        </el-select>
+      </div>
       <div class="setting-item">
         <span>线条样式</span>
         <el-select v-model="style.borderStyle" size="small" @change="$_selectBorder">
@@ -133,37 +183,6 @@
         <el-button size="small" @click="$emit('setZIndex', 'top')">置为顶部</el-button>
         <el-button size="small" @click="$emit('setZIndex', 'bottom')">置为底部</el-button>
       </div>
-      <div class="setting-item">
-        <span>设备绑定</span>
-        <el-input v-model="style.device" placeholder="输入设备号" size="small" @change="$_changeDevice" />
-      </div>
-      <div class="setting-item">
-        <span>旋转角度</span>
-        <el-input-number
-          v-model="style.transform"
-          controls-position="right"
-          size="mini"
-          :min="0"
-          :max="360"
-          @change="$_changeTransform"
-        />
-        <span>度</span>
-      </div>
-      <div v-if="showChoice" class="setting-item">
-        <span>设备选择</span>
-        <el-select
-          v-model="style.imageUrl"
-          size="mini"
-          @change="$_changeImageUrl"
-        >
-          <el-option
-            v-for="item in imageUrlOptions"
-            :key="item.image_uuid"
-            :value="item.image_code"
-            :label="item.image_name"
-          />
-        </el-select>
-      </div>
     </div>
   </div>
 </template>
@@ -172,6 +191,7 @@
 import { Sketch } from 'vue-color'
 import { shortStyles, borderStyles, fontFamilies } from '../constant'
 import crudStageImage from '@/api/logicflow/stageImage'
+import crudDevice from '@/api/acs/device/device'
 
 export default {
   components: {
@@ -180,7 +200,8 @@ export default {
   props: {
     elementsStyle: Object,
     onlyEdge: Boolean, // 是否是只设置边的属性，当只设置边的属性时，隐藏快捷样式和背景色设置
-    showChoice: Boolean
+    showChoice: Boolean,
+    node: Object // 父组件传来的对象
   },
   data() {
     return {
@@ -209,7 +230,8 @@ export default {
       fontWeight: '', // 文本加粗
       lineHeightOptions: Array(5).fill(1).map((_, i) => _ + i * 0.5),
       // imageUrl: '',
-      imageUrlOptions: []
+      imageUrlOptions: [],
+      deviceCodeOptions: []
     }
   },
   watch: {
@@ -218,10 +240,16 @@ export default {
         this.style = { ...this.style, ...val }
       },
       immediate: true
+    },
+    node(newVal, oldVal) {
+      // newVal是新值，oldVal是旧值
+      this.node = newVal
+      this.cleanParam()
     }
   },
   created() {
     this.initStageIconList()
+    this.initDevicesList()
   },
   methods: {
     initStageIconList() { // 初始化图标数据
@@ -232,6 +260,12 @@ export default {
         this.imageUrlOptions = data
       })
     },
+    initDevicesList() {
+      crudDevice.selectDeviceList().then(res => {
+        console.log('devices:', res)
+        this.deviceCodeOptions = res
+      })
+    },
     setStyle(item) {
       this.$emit('setStyle', item)
     },
@@ -319,6 +353,17 @@ export default {
       this.$emit('setStyle', {
         device: val
       })
+    },
+    cleanParam() { // 判断来清空下拉框
+      if (this.node.properties.device === undefined) {
+        this.style.device = ''
+      }
+      if (this.node.properties.imageUrl === undefined) {
+        this.style.imageUrl = ''
+      }
+      if (this.node.properties.transform === undefined) {
+        this.style.transform = 0
+      }
     }
   }
 }

acs/nladmin-ui/src/views/system/monitor/device/index.vue

@@ -20,7 +20,7 @@ export default {
   name: 'MonitorDevice',
   data() {
     return {
-      stageParam: 'test', // 舞台参数
+      stageParam: 'YY', // 舞台参数
       dialogDeviceMsgVisible: false,
       device_code: null,
       tops: '20vh',