feat: add Konva Edit

dgiot · Aug 5, 2022 · 49883e0 · 49883e0
1 parent 24a9690
commit 49883e0
Show file tree

Hide file tree

Showing 13 changed files with 315 additions and 33 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/.vscode
 *.zip
 *.rar
 release

diff --git a/src/dgiot/components/DgiotIcon/index.vue b/src/dgiot/components/DgiotIcon/index.vue
@@ -8,7 +8,8 @@
     props: {
       icon: {
         type: String,
-        required: true,
+        default: '',
+        // required: true,
       },
     },
   }

diff --git a/src/i18n/zh.js b/src/i18n/zh.js
@@ -754,6 +754,7 @@ export default {
       background: '背景底图',
       evidence: '取证',
       'evidence control': '取证控件',
+      'basic element': '基本元件',
       'Add text content': '添加文本',
       text: '文本',
       'text button': '文本按钮',

diff --git a/src/store/modules/topo.js b/src/store/modules/topo.js
@@ -191,14 +191,38 @@ const mutations = {
     canvas.konva = attr
   },
   contextMenu(state, handler) {
-    addNodeEvent({
-      type: 'contextMenu',
-      stage: canvas.stage,
-      layer: canvas.layer,
-      args: canvas.handlerArgs,
-      contextmenu: canvas.contextmenu,
+    // node.findAncestors('.mygroup'); Node.prototype.parentNode
+    let id = canvas.contextmenu.attrs.id
+    console.log(
+      'handler',
       handler,
-    })
+      canvas.contextmenu,
+      canvas.contextmenu.getParent()
+    )
+    id = id.slice(0, id.length - 5)
+    console.log('寻找', canvas.stage.find(`#${id}`))
+    // canvas.contextmenu.findAncestors(
+    //   `#${}`
+    // )
+    if (handler == 'remove') {
+      addNodeEvent({
+        type: 'contextMenu',
+        stage: canvas.stage,
+        layer: canvas.layer,
+        args: canvas.handlerArgs,
+        contextmenu: canvas.contextmenu.getParent(), //canvas.contextmenu,
+        handler,
+      })
+    } else {
+      addNodeEvent({
+        type: 'contextMenu',
+        stage: canvas.stage,
+        layer: canvas.layer,
+        args: canvas.handlerArgs,
+        contextmenu: canvas.contextmenu,
+        handler,
+      })
+    }
   },
   createdEvidence(state, Evidence) {
     state.createdEvidence = Evidence
@@ -227,6 +251,7 @@ const mutations = {
     addNodeEvent(args)
   },
   createThing(state, thing, x, y) {
+    console.log('thing内容', thing, x, y)
     const simpleText = addNodeEvent({
       type: 'createThing',
       thing,
@@ -347,6 +372,9 @@ const actions = {
   createThing({ commit }, args) {
     commit('createThing', args)
   },
+  createBasicThing({ commit }, args) {
+    commit('createBasicThing', args)
+  },
   createAmis({ commit }, args) {
     commit('createAmis', args)
   },

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -833,7 +833,7 @@ export function isBase64(str) {
     return false
   }
   try {
-    return btoa(atob(str)) == str
+    return window.btoa(window.atob(str)) == str
   } catch (err) {
     return false
   }
@@ -932,11 +932,13 @@ class konvaUtils {
     this.nodeTag = []
   }
   // bo
-  putNode(node, nodeid, params, type) {
-    if (type == 'change') {
-      var change = node.find(nodeid)[0].setAttrs(params)
+  putNode(node, nodeid, text, type) {
+    console.log('组态修改', node, nodeid, text, type)
+    if (type != 'undefined') {
+      let params = {}
+      params[type] = text
+      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/utils/konva/core/topoStage.js b/src/utils/konva/core/topoStage.js
@@ -7,6 +7,8 @@ let info = {
   evidence: [],
   badge: [],
 }
+let dbclickflag = false
+let timer = ''
 canvas.info = info
 /**
  * @description 组态Stage公共函数
@@ -118,9 +120,41 @@ const topoStage = {
         canvas.clickItem = e.target
         console.log('contextmenu', e.target)
       })
+      // circle.on('touchend', function() {
+      //   writeMessage('Touchend circle');
+      // })
+      node.on('touchend', (e) => {
+        if (node.getAttr('bind_amis') && node.getAttr('amis_id').length > 0)
+          dgiotBus.$emit('nodeInfo', node)
+      })
+      /** */
       node.on('click', (e) => {
-        canvas.contextmenu = {}
-        canvas.clickItem = e.target
+        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 (node.getAttr('bind_amis') && node.getAttr('amis_id').length > 0)
+          dgiotBus.$emit('nodeInfo', node)
+        // canvas.contextmenu = {}
+        // canvas.clickItem = e.target
         // console.log('click', e.target.attrs)
         // 单击时，这里根据node bind 的控件类型，去展示对应的控件信息
       })

diff --git a/src/utils/utilwen.js b/src/utils/utilwen.js
@@ -129,6 +129,25 @@ function dateFormat(fmt, date) {
   }
   return fmt
 }
+function isPC() {
+  var userAgentInfo = navigator.userAgent
+  var Agents = new Array(
+    'Android',
+    'iPhone',
+    'SymbianOS',
+    'Windows Phone',
+    'iPad',
+    'iPod'
+  )
+  var flag = true
+  for (var v = 0; v < Agents.length; v++) {
+    if (userAgentInfo.indexOf(Agents[v]) > 0) {
+      flag = false
+      break
+    }
+  }
+  return flag
+}
 
 function timestampToTime(timestamp, full) {
   if (!timestamp) {
@@ -543,6 +562,8 @@ export default {
     Vue.prototype.$FileServe = Cookies.get('fileServer')
     Vue.prototype.$dgiotlog = dgiotlog
     Vue.prototype.$dgiotConsole = dgiotConsole
+    //判断当前是否为pc端
+    Vue.prototype.$ispc = isPC
     // 订阅方法挂载到全局变量上 2022年5月27日
     Vue.prototype.$getTopic = getTopic
     Vue.prototype.$subscribe = subscribe

diff --git a/src/views/CloudFunction/topo/components/TopoBase.vue b/src/views/CloudFunction/topo/components/TopoBase.vue
@@ -107,10 +107,11 @@
               fnHandler: 'moveToTop',
               btnName: '置顶',
             },
-            {
-              fnHandler: 'moveToBottom',
-              btnName: '置底',
-            },
+            // {
+            //   fnHandler: 'moveToBottom',
+            //   btnName: '置底',
+            // },
+
             //   {
             //   fnHandler: 'copy',
             //   icoName: 'fa fa-minus-square-o  fa-fw',

diff --git a/src/views/CloudFunction/topo/components/TopoTabs.vue b/src/views/CloudFunction/topo/components/TopoTabs.vue
@@ -84,6 +84,23 @@
         <!--        </el-button>-->
         <Evidence />
       </a-collapse-panel>
+      <!-- <a-collapse-panel key="4" :header="$translateTitle('topo.basic element')">
+        <el-button
+          draggable="true"
+          size="mini"
+          type="primary"
+          @click.native="
+            createBasicThing({
+              productid: $route.query.productid,
+              type: 'static',
+              hidden: false,
+            })
+          "
+        >
+          静态框
+        </el-button>
+        <el-divider />
+      </a-collapse-panel> -->
       <!--      <a-collapse-panel key="4" :header="$translateTitle('topo.image')">-->
       <!--        <div>-->
       <!--          <el-collapse v-model="activeNames" accordion>-->
@@ -276,6 +293,7 @@
         setFlag: 'konva/setFlag',
         setDrawParams: 'konva/setDrawParams',
         createThing: 'topo/createThing',
+        createBasicThing: 'topo/createBasicThing',
         createAmis: 'topo/createAmis',
         createHistory: 'topo/createHistory',
         setKonvaBg: 'topo/setKonvaBg',

diff --git a/src/views/CloudFunction/topo/evidence/index.vue b/src/views/CloudFunction/topo/evidence/index.vue
@@ -527,11 +527,11 @@
         </el-col>
         <el-col :lg="16" :md="13" :sm="11" :xl="18" :xs="10">
           <el-link
-            v-if="$route.query.message && Number($route.query.step) != 5"
-            type="warning"
+            v-if="$route.query.message && Number($route.query.step) == 4"
+            type="success"
             :underline="false"
           >
-            {{ $translateTitle('cloudTest.The reason is not reviewed') }}：
+            {{ $translateTitle('cloudTest.report audit opinion') }}：
             {{ $route.query.message }}
           </el-link>
           <el-link