feat: knova Configuration display

dgiot · Jun 13, 2022 · d5dc5f2 · d5dc5f2
1 parent 0c31401
commit d5dc5f2
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 51 deletions.
diff --git a/src/utils/index.js b/src/utils/index.js
@@ -932,7 +932,11 @@ class konvaUtils {
     this.nodeTag = []
   }
   // bo
-  putNode(nodeid, params) {
+  putNode(node, nodeid, params, type) {
+    if (type == 'change') {
+      var change = node.find(nodeid)[0].setAttrs(params)
+    }
+    console.log(node, nodeid, params, change)
     // in nodeid find node
     // in node.name event
     // if thing put text

diff --git a/src/views/CloudFunction/topo/preview.vue b/src/views/CloudFunction/topo/preview.vue
@@ -1,28 +1,14 @@
 <!--eslint-disable-->
 <template>
-  <div
-    :class="{ 'dgiot-fullscreen': isFullscreen, 'konva-fullscreen': isDevice }"
-    class="konva"
-  >
+  <div :class="{ 'dgiot-fullscreen': isFullscreen, 'konva-fullscreen': isDevice }" class="konva">
     <!--    <dgiot-xterm />-->
     <el-container class="konva-container">
       <el-main class="konva-container-main">
         <el-row :gutter="gutter.gutter" class="user-content">
-          <el-col
-            :span="24"
-            class="konva-container-main-baseCol"
-          >
+          <el-col :span="24" class="konva-container-main-baseCol">
             <el-main class="konva-container-baseCol-baseContainer">
-              <topo-base
-                ref="topobase"
-                style="position: absolute; width: 100%"
-              />
-              <div
-                id="konva"
-                ref="konva"
-                class="konva, _center"
-                style="display: none"
-              ></div>
+              <topo-base ref="topobase" style="position: absolute; width: 100%" />
+              <div id="konva" ref="konva" class="konva, _center" style="display: none"></div>
             </el-main>
           </el-col>
         </el-row>
@@ -293,46 +279,64 @@
             let decodeMqtt
             let updataId = []
             if (!isBase64(Msg.payloadString)) {
-              console.log('非base64数据类型')
-              decodeMqtt = Msg.payloadString
+              console.log('非base64数据类型', JSON.parse(Msg.payloadString))
+              decodeMqtt = JSON.parse(Msg.payloadString)
             } else {
               decodeMqtt = JSON.parse(Base64.decode(Msg.payloadString))
               console.log('消息解密消息', decodeMqtt)
             }
-            console.log('decodeMqtt.konva')
-            console.log(decodeMqtt.konva)
-            const Shape = decodeMqtt.konva
-            const Text = canvas.stage.find('Text')
-            console.log(Text)
-            const tweens = []
-            for (var n = 0; n < tweens.length; n++) {
-              tweens[n].destroy()
-            }
-            Shape.forEach((i) => {
-              // 修改mqtt傳入的node節點值
-              // konvaUtils.putNode(i, { text: i.text })
-              // canvas.stage.findOne('#0765bee775_agreementstate_text')
-              Text.forEach((shape) => {
-                if (i.id == shape.attrs.id) {
-                  console.log('更新节点', i)
-                  console.log(shape)
-                  shape.text(i.text)
-                  tweens.push(
-                    new Konva.Tween({
-                      node: shape,
-                      duration: 1,
-                      easing: Konva.Easings.ElasticEaseOut,
-                    }).play()
-                  )
-                } else updataId.push(i.id)
-              })
+            // decodeMqtt = Msg.payloadString
+            console.log('decodeMqtt.konva', canvas.stage)
+            console.log(decodeMqtt)
+            // const Shape = decodeMqtt.konva
+            // const Text = canvas.stage.find('Text')
+            // console.log('text', Text)
+            decodeMqtt.forEach((item) => {
+              var info = konvaUtils.putNode(
+                canvas.stage,
+                item.id,
+                item.params,
+                item.type
+              )
+              // canvas.stage.find(item.id)[0].setAttrs(item.params)
             })
+            // var info = konvaUtils.putNode(
+            //   canvas.stage,
+            //   decodeMqtt.id,
+            //   decodeMqtt.params
+            // )
+            console.log('infokonvaUtils', konvaUtils)
+            //  node.find(nodeid)[0].setAttrs(params)
+            return
+            // const tweens = []
+            // for (var n = 0; n < tweens.length; n++) {
+            //   tweens[n].destroy()
+            // }
+            // Shape.forEach((i) => {
+            //   // 修改mqtt傳入的node節點值
+            //   // konvaUtils.putNode(i, { text: i.text })
+            //   // canvas.stage.findOne('#0765bee775_agreementstate_text')
+            //   Text.forEach((shape) => {
+            //     if (i.id == shape.attrs.id) {
+            //       console.log('更新节点', i)
+            //       console.log(shape)
+            //       shape.text(i.text)
+            //       tweens.push(
+            //         new Konva.Tween({
+            //           node: shape,
+            //           duration: 1,
+            //           easing: Konva.Easings.ElasticEaseOut,
+            //         }).play()
+            //       )
+            //     } else updataId.push(i.id)
+            //   })
+            // })
 
-            updataId ? console.log('以下组态id未更新', updataId) : ''
+            // updataId ? console.log('以下组态id未更新', updataId) : ''
 
-            console.log('konva数据更新成功')
+            // console.log('konva数据更新成功')
             // 禁用调所有移动事件，如需禁用其他，在以下函数中添加
-            konvaUtils.disableNode(canvas.layer)
+            // konvaUtils.loadKonva(canvas.layer)
           }
         })
       },