feat(konva): utils

src/api/View/index.js

@@ -27,6 +27,15 @@ export async function getView(ObjectId) {
   return get_object('View', ObjectId)
 }
 
+/**
+ * @description 预览，图元大小状态不可变
+ * @param ObjectId
+ * @returns {Promise<*|ElMessageComponent>}
+ */
+export async function getPreview(ObjectId) {
+  return get_object('View/preview', ObjectId)
+}
+
 /**
  * @docs-api http://prod.iotn2n.com/swagger/#/View/delete_classes_view_id
  * @description 删除视图管理

src/config/theme.config.js

@@ -3,9 +3,9 @@
  */
 module.exports = {
   // 布局种类：横向布局horizontal、纵向布局vertical、分栏布局column、综合布局comprehensive、常规布局common
-  layout: 'comprehensive',
+  layout: 'horizontal',
   // 主题名称：默认default、海洋之心ocean、绿荫草场green、碰触纯白white
-  themeName: 'white',
+  themeName: 'ocean',
   // 分栏风格(仅针对分栏布局column时生效)：横向风格horizontal、纵向风格vertical、卡片风格card
   columnStyle: 'horizontal',
   // 是否固定头部固定

src/utils/index.js

@@ -919,3 +919,54 @@ export function parseQueryString(url) {
     this[`${name}`] = value
   }
 }
+
+// api
+// findInfo https://konvajs.org/docs/selectors/Select_by_id.html
+// Simple_Load https://konvajs.org/docs/data_and_serialization/Simple_Load.html
+/**
+ * @description
+ */
+class konvaUtils {
+  constructor() {
+    this.nodeInfo = []
+    this.nodeTag = []
+  }
+  // bo
+  putNode(nodeid, params) {
+    // in nodeid find node
+    // in node.name event
+    // if thing put text
+    // node.setAttrs(params)
+  }
+  /**
+   * @description 查找所有符合条件的节点
+   * @param node
+   */
+  loadKonva(node, disableNodeType = ['Layer']) {
+    try {
+      if (disableNodeType.indexOf(node.getClassName()) != -1) {
+        const nodes = node.getChildren()
+        this.nodeTag.push(nodes)
+        nodes.forEach((_node) => {
+          this.loadKonva(_node)
+          this.nodeInfo.push(_node)
+          _node.setAttrs({
+            draggable: false,
+          })
+        })
+      } else {
+        console.warn(
+          `node is ${node} \n disableNodeType ${node.getClassName()}`
+        )
+      }
+      this.consoeInfo(`禁用${node.getClassName()}成功`)
+    } catch (e) {
+      console.error(e)
+    }
+  }
+  consoeInfo(text) {
+    console.info(text)
+  }
+}
+
+window.konvaUtils = new konvaUtils()

src/views/CloudFunction/lowcode/components/dgiotKonva.vue

@@ -38,6 +38,10 @@
         data: this.code.Stage,
         id: 'topo',
       })
+      this.$nextTick(() => {
+        // 禁用调所有移动事件，如需禁用其他，在以下函数中添加
+        konvaUtils.loadKonva(canvas.layer)
+      })
     },
     methods: {
       ...mapMutations({

src/views/CloudFunction/lowcode/index.vue

@@ -571,12 +571,11 @@
       async handleEdit(row) {
         const loading = this.$baseLoading(1)
         const { data = {} } = await getView(row.objectId)
-        if (['amis_view', 'amis'].includes(row.type)) {
+        if (['amis_view', 'amis', 'topo'].includes(row.type)) {
           this.$router.push({
-            path: `/design/editor/amis`,
+            path: '/Topo?productid',
             query: {
-              viewId: row.objectId,
-              type: 'amis',
+              productid: row.key,
             },
           })
         } else {
@@ -611,9 +610,8 @@
       },
       async handleLowCode(lowcodeId) {
         const loading = this.$baseColorfullLoading(1)
-        const res = await getView(lowcodeId)
         loading.close()
-        this.$dgiotBus.$emit('lowcodePreview', res)
+        this.$dgiotBus.$emit('lowcodePreview', await getView(lowcodeId))
       },
       async saveLowCode(lowcodeId, payload) {
         const loading = this.$baseColorfullLoading(1)

src/views/CloudFunction/topo/index.vue

@@ -83,9 +83,8 @@
   import requiremodule from '@/utils/file/requiremodule'
   import { mapGetters, mapMutations } from 'vuex'
   import { _getTopo } from '@/api/Topo'
-  import { putProduct, queryProduct, getProduct } from '@/api/Product'
+  import { getProduct } from '@/api/Product'
   import { putView, getView } from '@/api/View'
-  import { isBase64 } from '@/utils'
 
   export default {
     components: {
@@ -124,15 +123,6 @@
         flag: 'konva/flag',
         drawParams: 'konva/drawParams',
       }),
-      stageConfig() {
-        let el = document.getElementsByClassName('konva')
-        return {
-          width: el[0].clientWidth,
-          height: el[0].clientHeight,
-          container: 'container',
-          id: 'container',
-        }
-      },
       isDevice: {
         get: function () {
           return this.$route.query.type == 'device' ||
@@ -142,21 +132,9 @@
         },
       },
     },
-    watch: {
-      '$route.query.page': {
-        handler(route) {
-          console.error(route)
-        },
-        immediate: true,
-      },
-    },
-    async beforeDestroy() {
-      // this.$dgiotBus.$emit('MqttUnbscribe', this.topicKey, this.subtopic)
-      await this.$unSubscribe(this.subtopic)
-    },
     mounted() {
       this.$nextTick(() => {
-        this.handleMqtt()
+        this.handleKonva()
       })
       this.$dgiotBus.$off('_busUpdata')
       this.$dgiotBus.$on('_busUpdata', async () => {
@@ -196,14 +174,8 @@
     async destroyed() {
       if (!_.isEmpty(localStorage.getItem('konvaStale')))
         localStorage.setItem('konvaStale', JSON.stringify(canvas.stageJson))
-      // this.$dgiotBus.$emit(
-      //   'MqttUnbscribe',
-      //   this.$dgiotBus.topicKey(this.router + this.topotopic),
-      //   this.topotopic
-      // )
       await this.$unSubscribe(this.topotopic)
     },
-    created() {},
     methods: {
       ...mapMutations({
         deleteTopo: 'topo/deleteTopo',
@@ -212,36 +184,6 @@
         setTreeFlag: 'settings/setTreeFlag',
         createdEvidence: 'topo/createdEvidence',
       }),
-      handleDrop(e) {
-        console.log(e, 'handleDrop')
-        e.preventDefault()
-        e.stopPropagation()
-        const index = e.dataTransfer.getData('index')
-        const rectInfo = this.editor.getBoundingClientRect()
-        if (index) {
-          const component = deepCopy(componentList[index])
-          component.style.top = e.clientY - rectInfo.y
-          component.style.left = e.clientX - rectInfo.x
-          component.id = generateID()
-          this.$store.commit('addComponent', { component })
-          this.$store.commit('recordSnapshot')
-        }
-      },
-
-      handleDragOver(e) {
-        console.log(e, 'handleDragOver')
-        e.preventDefault()
-        e.dataTransfer.dropEffect = 'copy'
-      },
-      handleMouseDown(e) {
-        console.log(e, 'handleMouseDown')
-        e.preventDefault()
-        e.dataTransfer.dropEffect = 'copy'
-      },
-      deselectCurComponent(e) {
-        console.log(e, 'deselectCurComponent')
-        e.preventDefault()
-      },
       nextPage(type) {
         let query = JSON.parse(JSON.stringify(this.$route.query))
         const list = JSON.parse(this.$route.query.list)
@@ -259,23 +201,16 @@
             : query.page
         query.viewid = list[query.page].viewid
         this.$router.push({ path: this.$route.path, query })
-        this.handleMqtt()
+        this.handleKonva()
       },
       guide() {
         this.driver.defineSteps(steps)
         this.driver.start()
       },
-      saveKonvaitem() {},
       async _updataTopo(objectId) {
         this.viewInfo.data.konva = { Stage: JSON.parse(canvas.stage.toJSON()) }
         try {
-          const res = await putView(objectId, {
-            // data: _.merge(
-            //   {
-            //     konva: { Stage: JSON.parse(canvas.stage.toJSON()) },
-            //   },
-            //   this.viewInfo.data
-            // ),
+          await putView(objectId, {
             data: this.viewInfo.data,
           })
           this.$baseMessage(
@@ -288,7 +223,7 @@
           console.log(e)
         }
       },
-      async handleMqtt() {
+      async handleKonva() {
         let _this = this
         if (_this.$route.query.type == 'device') {
           _this.productid = _this.$route.query.deviceid
@@ -311,7 +246,6 @@
             _this.$route.query.productid
           )
           _this.productconfig = results
-          // console.log(_this.productconfig)
           console.groupCollapsed(
             '%c productconfig',
             'color:#009a61; font-size: 28px; font-weight: 300'
@@ -325,15 +259,13 @@
             )
             console.info('data ->\n', data)
             console.groupEnd()
-            // console.log(this.$refs['edrawer'].$refs, 'edrawer')
             _this.$refs['operation']
               ? (_this.$refs['operation'].productconfig = results[0])
               : console.log(
                   " _this.$refs['operation']",
                   _this.$refs['operation']
                 )
             _this.globalStageid = data.Stage.attrs.id
-            // _this.createKonva(data, _this.globalStageid, 'create')
             _this.paramsconfig = { konva: data }
             //
             console.log(
@@ -342,8 +274,7 @@
               data.viewid
             )
             if (data.viewid) {
-              const res = await getView(data.viewid)
-              this.viewInfo = res
+              this.viewInfo = await getView(data.viewid)
             }
             console.error(this.viewInfo)
             await _this.initKonva({
@@ -361,7 +292,6 @@
               _this.Stage
             )
             await _this.initKonva({
-              // data: _this.Stage,
               data: _this.initKonva,
               id: 'kevCurrent',
             })
@@ -391,77 +321,6 @@
           )
           _this.deleteTopo(window.deletePath)
         }, 1000)
-        // https://gitee.com/dgiiot/dgiot_dlink/wikis/dgiot-dashboard%20toppic%20%E5%AF%B9%E6%8E%A5dgiot_dlink
-        _this.subtopic = `$dg/user/konva/${
-          _this?.$route?.query?.deviceid || 'test'
-        }/report`
-        // const deviceId = this?.$route?.query?.deviceid || 'test'
-        // _this.subtopic = `$dg/konva/${deviceId}/properties/report`
-        // _this.topicKey = _this.$dgiotBus.topicKey(_this.router, _this.subtopic)
-        //
-        console.warn('订阅mqtt', _this.subtopic)
-        await _this.$subscribe(_this.subtopic)
-        console.log(_this.$mqttInfo)
-        // 订阅webscroket
-        // _this.$dgiotBus.$emit(`MqttSubscribe`, {
-        //   router: this.router,
-        //   topic: this.subtopic,
-        //   qos: 0,
-        //   ttl: 1000 * 60 * 60 * 3,
-        // })
-        _this.handleMqttMsg()
-      },
-      // 处理mqtt信息
-      handleMqttMsg() {
-        console.error('this.topicKey', this.$mqttInfo.topicKey)
-        this.$dgiotBus.$off(this.$mqttInfo.topicKey)
-        this.$dgiotBus.$on(this.$mqttInfo.topicKey, (Msg) => {
-          console.log(Msg)
-          const { payloadString } = Msg
-          if (Msg.payloadString) {
-            let decodeMqtt
-            let updataId = []
-            if (!isBase64(Msg.payloadString)) {
-              console.log('非base64数据类型')
-              decodeMqtt = 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
-            // apply transition to all nodes in the array
-            // Text.each(function (shape) {
-            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) => {
-              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) : ''
-
-            console.log('konva数据更新成功')
-          }
-        })
       },
     },
   }