feat: add ScrollList and Pie

dgiot · Sep 2, 2022 · f7234d3 · f7234d3
1 parent 72efcfc
commit f7234d3
Show file tree

Hide file tree

Showing 18 changed files with 650 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -74,6 +74,7 @@
     "vue-audio-visual": "^2.4.0",
     "vue-contextmenu": "1.5.11",
     "vue-infinite-scroll": "^2.0.2",
+    "vue-seamless-scroll": "^1.1.23",
     "vuera": "0.2.7"
   },
   "devDependencies": {

diff --git a/src/i18n/jp.js b/src/i18n/jp.js
@@ -596,7 +596,7 @@ export default {
       newlyadded: '新增',
       yes: '是',
       no: '否',
-      pleaseselectyourapp: '请选择所属应用',
+      pleaseselectyourapp: '请选择所属部门',
       pleaseselectyourcate: '请选择所属分类',
       selected: '已选',
       qdsczg: '确定删除这个',
@@ -787,7 +787,7 @@ export default {
       applicationname: '应用名称',
       scaleofservice: '服务规模',
       industrytype: '所属行业',
-      applicationtype: '所属应用',
+      applicationtype: '所属部门',
       createtime: '创建时间',
       newapplication: '新建应用',
       secretkey: '密钥',

diff --git a/src/i18n/zh.js b/src/i18n/zh.js
@@ -582,7 +582,7 @@ export default {
       newlyadded: '新增',
       yes: '是',
       no: '否',
-      pleaseselectyourapp: '请选择所属应用',
+      pleaseselectyourapp: '请选择所属部门',
       pleaseselectyourcate: '请选择所属分类',
       selected: '已选',
       qdsczg: '确定删除这个',
@@ -775,7 +775,7 @@ export default {
       applicationname: '应用名称',
       scaleofservice: '服务规模',
       industrytype: '所属行业',
-      applicationtype: '所属应用',
+      applicationtype: '所属部门',
       createtime: '创建时间',
       newapplication: '新建应用',
       secretkey: '密钥',

diff --git a/src/main.js b/src/main.js
@@ -15,6 +15,11 @@ import 'amis/lib/themes/ang.css'
 import 'amis/lib/helper.css'
 import 'amis/sdk/sdk.css'
 import 'amis-editor/dist/style.css'
+
+//列表自动滚动
+import scroll from 'vue-seamless-scroll'
+Vue.use(scroll)
+
 // import 'amis-core/lib/index.js'
 Vue.use(VueAmisSdk)
 Vue.use(VuePlugin)

diff --git a/src/store/modules/topo.js b/src/store/modules/topo.js
@@ -197,17 +197,18 @@ const mutations = {
       'handler',
       handler,
       canvas.contextmenu,
-      canvas.contextmenu.getParent()
+      canvas.handlerArgs
+      // canvas.contextmenu.getParent()
     )
-    id = id.slice(0, id.length - 5)
-    console.log('寻找', canvas.stage.find(`#${id}`))
+    // id = id.slice(0, id.length - 5)
+    // console.log('寻找', canvas.stage.find(`#${id}`))
     // canvas.contextmenu.findAncestors(
     //   `#${}`
     // )
+    if (canvas.contextmenu.attrs.id == 'bg') return
     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' ||
@@ -228,6 +229,22 @@ const mutations = {
         handler,
       })
     } else {
+      if (handler == 'moveToTop') {
+        // canvas.contextmenu  所选node 节点
+        if (
+          canvas.contextmenu.attrs.type == 'static' ||
+          canvas.contextmenu.attrs.id.indexOf('text') >= 0
+        ) {
+          canvas.contextmenu.parent.zIndex(
+            canvas.contextmenu.parent.parent.children.length - 1
+          )
+          return
+        }
+        console.log('索引层级', canvas.contextmenu.parent.children.length - 1)
+        canvas.contextmenu.zIndex(canvas.contextmenu.parent.children.length - 1)
+        return
+      }
+      console.log('操作', handler)
       addNodeEvent({
         type: 'contextMenu',
         stage: canvas.stage,
@@ -313,6 +330,7 @@ const mutations = {
           _.merge(canvas.handlerArgs, {
             type: 'createStaticImage',
             image: thing.image,
+            data: thing.data,
             productid: thing.productid,
           })
         )

diff --git a/src/utils/konva/core/topoBasic.js b/src/utils/konva/core/topoBasic.js
@@ -301,15 +301,16 @@ const topoBasic = {
       x: Axis.x,
       y: Axis.y,
       image: imageObj,
-      width: 106,
-      height: 118,
+      width: args.data.width,
+      height: args.data.height,
       type: 'staticimage',
       // handler: 'dblclick',
       draggable: true,
     })
     simpleImage.setAttrs({
       src: args.image,
     })
+    // simpleImage.zIndex(1)
     // } else if (args.type == 'gifimage') {
 
     // }

diff --git a/src/views/CloudFunction/engine/channel.vue b/src/views/CloudFunction/engine/channel.vue
@@ -728,14 +728,14 @@
           applicationtText: [
             {
               required: true,
-              message: '请选择所属应用',
+              message: '请选择所属部门',
               trigger: 'change',
             },
           ],
           roles: [
             {
               required: true,
-              message: '请选择所属应用',
+              message: '请选择所属部门',
               trigger: 'blur',
             },
           ],
@@ -1391,14 +1391,14 @@
           applicationtText: [
             {
               required: true,
-              message: '请选择所属应用',
+              message: '请选择所属部门',
               trigger: 'change',
             },
           ],
           roles: [
             {
               required: true,
-              message: '请选择所属应用',
+              message: '请选择所属部门',
               trigger: 'blur',
             },
           ],
@@ -1466,7 +1466,7 @@
           }
         })
         // }
-        // 读取acl列表,获取所属应用名称
+        // 读取acl列表,获取所属部门名称
         if (this.channelrow) {
           for (var key in this.channelrow.ACL) {
             obj.applicationtText = key ? key.substr(5) : ''

diff --git a/src/views/CloudFunction/engine/createchannel.vue b/src/views/CloudFunction/engine/createchannel.vue
@@ -143,7 +143,7 @@
           </el-form-item>
         </el-col>
         <el-col v-if="active == 2" :span="12">
-          <el-form-item label="所属应用" prop="applicationtText">
+          <el-form-item label="所属部门" prop="applicationtText">
             <el-input
               v-model="addchannel.applicationtText"
               readonly
@@ -368,7 +368,7 @@
           applicationtText: [
             {
               required: true,
-              message: '请选择所属应用',
+              message: '请选择所属部门',
               trigger: 'change',
             },
           ],
@@ -636,7 +636,7 @@
           applicationtText: [
             {
               required: true,
-              message: '请选择所属应用',
+              message: '请选择所属部门',
               trigger: 'change',
             },
           ],
@@ -745,7 +745,7 @@
             }
           })
         }
-        // 读取acl列表,获取所属应用名称
+        // 读取acl列表,获取所属部门名称
         if (this.channelrow) {
           for (var key in this.channelrow.ACL) {
             obj.applicationtText = key ? key.substr(5) : ''

diff --git a/src/views/CloudFunction/engine/dict.vue b/src/views/CloudFunction/engine/dict.vue
@@ -94,11 +94,11 @@
                 :rules1="[
                   {
                     required: true,
-                    message: '请选择所属应用',
+                    message: '请选择所属部门',
                     trigger: 'blur',
                   },
                 ]"
-                label="所属应用"
+                label="所属部门"
               > -->
               <el-form-item
                 :label="$translateTitle('application.applicationtype')"
@@ -112,7 +112,7 @@
               >
                 <!-- <el-input
                   v-model="addDictForm.applicationtText"
-                  placeholder="请选择所属应用"
+                  placeholder="请选择所属部门"
                   readonly
                 > -->
                 <el-input
@@ -1288,7 +1288,7 @@
             rolesObj: [
               {
                 required: true,
-                message: '请选择所属应用',
+                message: '请选择所属部门',
                 trigger: 'change',
               },
             ],
@@ -1474,7 +1474,7 @@
           rolesObj: [
             {
               required: true,
-              message: '请选择所属应用',
+              message: '请选择所属部门',
               trigger: 'change',
             },
           ],
@@ -1484,7 +1484,7 @@
       onSubmit(formName) {
         this.$refs[formName].validate((valid) => {
           if (!this.addDictForm.applicationtText) {
-            this.$message('请选择所属应用')
+            this.$message('请选择所属部门')
             return
           }
           if (valid) {

diff --git a/src/views/CloudFunction/topo/components/TopoTabs.vue b/src/views/CloudFunction/topo/components/TopoTabs.vue
@@ -156,12 +156,42 @@
             createBasicThing({
               productid: $route.query.productid,
               type: 'staticimage',
+              data: {
+                width: 180,
+                height: 200,
+              },
               image:
                 'https://mp0.usr.cn/uploads/drawimg/1612317616625_0334.png',
               hidden: false,
             })
           "
         />
+        <img
+          draggable="true"
+          size="mini"
+          src=" https://ucloud-web-sh.oss-cn-shanghai.aliyuncs.com/cloud/web/prod/screen/assets/1650512783877_0362.png"
+          style="
+            width: 60px;
+            height: 20px;
+            display: inline-block;
+            margin-left: 20px;
+          "
+          type="primary"
+          @click="
+            createBasicThing({
+              productid: $route.query.productid,
+              type: 'staticimage',
+              data: {
+                width: 420,
+                height: 35,
+              },
+              image:
+                ' https://ucloud-web-sh.oss-cn-shanghai.aliyuncs.com/cloud/web/prod/screen/assets/1650512783877_0362.png',
+              hidden: false,
+            })
+          "
+        />
+        <!-- -->
         <el-divider />
         <el-button
           draggable="true"
@@ -186,6 +216,7 @@
           精灵图
         </el-button>
         <el-divider />
+        <div style="text-align: left; margin: 10px; font-weight: 600">组件</div>
         <el-button
           draggable="true"
           size="mini"
@@ -194,7 +225,12 @@
             createBasicThing({
               productid: $route.query.productid,
               type: 'vuecomponent',
-              data: {},
+              data: {
+                width: 400,
+                height: 260,
+                fill: 'rgba(30, 30, 30,0.7)',
+                text: '折线图',
+              },
               chart: 'line',
               hidden: false,
             })
@@ -223,6 +259,48 @@
         >
           数据卡片
         </el-button>
+        <el-button
+          draggable="true"
+          size="mini"
+          type="primary"
+          @click.native="
+            createBasicThing({
+              productid: $route.query.productid,
+              type: 'vuecomponent',
+              data: {
+                width: 240,
+                height: 240,
+                fill: 'rgba(30, 30, 30, 0.7)',
+                text: '饼图',
+              },
+              chart: 'pie',
+              hidden: false,
+            })
+          "
+        >
+          饼图
+        </el-button>
+        <el-button
+          draggable="true"
+          size="mini"
+          type="primary"
+          @click.native="
+            createBasicThing({
+              productid: $route.query.productid,
+              type: 'vuecomponent',
+              data: {
+                width: 420,
+                height: 260,
+                fill: 'rgba(30, 30, 30, 0.7)',
+                text: '轮播告警列表',
+              },
+              chart: 'carousel',
+              hidden: false,
+            })
+          "
+        >
+          轮播告警列表
+        </el-button>
         <el-divider />
         <!-- http://dev.iotn2n.com/dgiot_file/topo/png/pump.png -->
       </a-collapse-panel>

diff --git a/src/views/CloudFunction/topo/index.vue b/src/views/CloudFunction/topo/index.vue
@@ -416,6 +416,8 @@
       this.setTreeFlag(false)
     },
     async destroyed() {
+      console.log('this.topotopic', this.topotopic)
+      this.$dgiotBus.$off('$dg/user/konva')
       if (!_.isEmpty(localStorage.getItem('konvaStale')))
         localStorage.setItem('konvaStale', JSON.stringify(canvas.stageJson))
       await this.$unSubscribe(this.topotopic)