fix: konva cannot be edited

src/store/modules/topo.js

@@ -207,10 +207,12 @@ const mutations = {
     if (handler == 'remove') {
       let contextmenu = ''
       console.log('当前节点', canvas.contextmenu)
+      if (canvas.contextmenu.attrs.id == 'bg') return
       if (
         canvas.contextmenu.attrs.name == 'evidence' ||
         canvas.contextmenu.attrs.name == 'konvaimage' ||
-        canvas.contextmenu.attrs.name == 'sprite'
+        canvas.contextmenu.attrs.name == 'sprite' ||
+        canvas.contextmenu.attrs.name == 'vuecomponent'
       ) {
         contextmenu = canvas.contextmenu
       } else {
@@ -286,7 +288,11 @@ const mutations = {
   },
   createBasicThing(state, thing, x, y) {
     console.log('thing内容', thing, x, y)
-    if (thing.type == 'knovaimage' || thing.type == 'gifimage') {
+    if (
+      thing.type == 'knovaimage' ||
+      thing.type == 'gifimage' ||
+      thing.type == 'vuecomponent'
+    ) {
       console.log('konvaimage', thing)
       // state.createdEvidence = Evidence
       // var imageObj = new Image()
@@ -300,6 +306,14 @@ const mutations = {
             productid: thing.productid,
           })
         )
+      } else if (thing.type == 'vuecomponent') {
+        simpleImage = addNodeEvent(
+          _.merge(canvas.handlerArgs, {
+            type: 'createVueComponent',
+            chart: thing.chart,
+            productid: thing.productid,
+          })
+        )
       } else if (thing.type == 'gifimage') {
         simpleImage = addNodeEvent(
           _.merge(canvas.handlerArgs, {

src/store/modules/user.js

@@ -86,7 +86,7 @@ async function queryAllMsg(commit, dispatch, data, type) {
         : hour <= 11
         ? Vue.prototype.$translateTitle('route.上午好')
         : hour <= 13
-        ? Vue.prototype.$translateTitle('route.中文好')
+        ? Vue.prototype.$translateTitle('route.中午好')
         : hour < 18
         ? Vue.prototype.$translateTitle('route.下午好')
         : Vue.prototype.$translateTitle('route.晚上好')

src/utils/konva/common.js

@@ -104,6 +104,9 @@ function addNodeEvent(args) {
       case 'gifImage':
         return topoBasic.createGifImage(args)
         break
+      case 'createVueComponent':
+        return topoBasic.createVueComponent(args)
+        break
       case 'createHistory': // 历史数据按钮
         return createHistory(thing, saleInfo, randomXy, args)
         break

src/utils/konva/core/topoBasic.js

@@ -321,6 +321,35 @@ const topoBasic = {
 
     return simpleImage
   },
+  createVueComponent(args) {
+    console.info(
+      'src/utils/konva/core/topoBasic.js',
+      'gifImage',
+      // args.path,
+      args
+    )
+
+    let vueComponet = ''
+    const topoId = uuid(5)
+    vueComponet = new Konva.Rect({
+      x: 100,
+      y: 100,
+      width: 300,
+      height: 200,
+      type: args.chart,
+      fill: 'rgba(30, 30, 30,0.7)',
+      text: args.chart,
+      name: 'vuecomponent',
+      id: args.productid + '_vuecomponent' + topoId,
+      draggable: true,
+    })
+
+    // vueComponet.setAttrs({
+    //   src: args.image,
+    // })
+
+    return vueComponet
+  },
   /**
    * @description 绑定组态
    */

src/utils/konva/core/topoStage.js

@@ -496,6 +496,68 @@ const topoStage = {
         console.log('click', e.target.attrs)
       })
     })
+    let list = []
+    stage.find('Rect').forEach((node) => {
+      if (
+        location.href.includes('&type=device') ||
+        location.href.includes('evidence')
+      ) {
+        let item = {
+          type: node.attrs.type,
+          x: node.attrs.x,
+          y: node.attrs.y,
+          width: node.attrs.width,
+          height: node.attrs.height,
+        }
+        list.push(item)
+        dgiotlogger.info('dgiotlogger node:', node)
+        node
+          ? node.setAttrs({
+              draggable: false,
+            })
+          : ''
+        node?.parent
+          ? node.parent.setAttrs({
+              draggable: false,
+            })
+          : ''
+      }
+      addNodeEvent({
+        type: node.getAttr('name'),
+        node: node,
+      })
+      node.on('contextmenu', (e) => {
+        canvas.contextmenu = e.target
+        console.log('contextmenu', e.target)
+      })
+      node.on('click', (e) => {
+        console.log('点击弹出编辑框', e.evt.button, dbclickflag)
+        //判断是否点击鼠标左键和在编辑状态
+        if (dbclickflag) {
+          // clearTimeout(timer)
+          setTimeout(() => {
+            dbclickflag = false
+          }, 500)
+        }
+        if (!dbclickflag) {
+          dbclickflag = true
+          timer = setTimeout(() => {
+            if (
+              e.evt.button == 0 &&
+              window.location.hash.indexOf('type=device') < 0
+            ) {
+              dbclickflag = false
+              console.log('打开编辑框')
+              dgiotBus.$emit('nodeEdit', node)
+            }
+          }, 500)
+        }
+      })
+    })
+    if (location.href.includes('&type=device')) {
+      console.info('vue组件信息', list)
+      dgiotBus.$emit('vueComponent', list, true)
+    }
 
     console.groupCollapsed(
       '%ctopoStage log',

src/views/CloudFunction/engine/channel.vue

@@ -721,6 +721,7 @@
           region: '',
           desc: '',
           applicationtText: '',
+          name: '',
         },
         applicationList: [],
         addrules: {
@@ -1474,6 +1475,8 @@
         this.addchannel = this.channelrow.config
         console.log('addchannel', this.addchannel)
         this.addchannel.region = val
+        this.$set(this.addchannel, 'name', this.channelrow.name)
+        this.$set(this.addchannel, 'desc', this.channelrow.desc)
         this.addrules = obj1
       },
       editorChannel(row) {

src/views/CloudFunction/topo/components/TopoTabs.vue

@@ -115,7 +115,7 @@
         >
           水泵
         </el-button>
-        <!-- <el-button
+        <el-button
           draggable="true"
           size="mini"
           type="primary"
@@ -128,15 +128,15 @@
                 idle: [
                   // x, y, width, height (4 frames)
                   2, 2, 70, 119, 71, 2, 74, 119, 146, 2, 81, 119, 226, 2, 76,
-                  119, 300, 2, 76, 119,
+                  119,
                 ],
               },
               hidden: false,
             })
           "
         >
           精灵图
-        </el-button> -->
+        </el-button>
         <!-- <el-button
           draggable="true"
           size="mini"
@@ -160,8 +160,25 @@
           水泵
         </el-button> -->
         <el-divider />
+        <el-button
+          draggable="true"
+          size="mini"
+          type="primary"
+          @click.native="
+            createBasicThing({
+              productid: $route.query.productid,
+              type: 'vuecomponent',
+              chart: 'line',
+              hidden: false,
+            })
+          "
+        >
+          折线图
+        </el-button>
+        <el-divider />
         <!-- http://dev.iotn2n.com/dgiot_file/topo/png/pump.png -->
       </a-collapse-panel>
+
       <!--      <a-collapse-panel key="4" :header="$translateTitle('topo.image')">-->
       <!--        <div>-->
       <!--          <el-collapse v-model="activeNames" accordion>-->