diff --git a/src/api/View/index.js b/src/api/View/index.js
index c1df6f10e4..64cf383ca3 100644
--- a/src/api/View/index.js
+++ b/src/api/View/index.js
@@ -35,6 +35,14 @@ export async function getEditView(ObjectId, params) {
   })
 }
 
+export async function getViewList(params) {
+  return request({
+    url: '/classes/View/',
+    method: 'get',
+    params,
+  })
+}
+
 export function getTopo(params) {
   return request({
     url: `/topo`,
diff --git a/src/config/developer.config.js b/src/config/developer.config.js
index 88c3fe1c09..14353ca5f4 100644
--- a/src/config/developer.config.js
+++ b/src/config/developer.config.js
@@ -24,6 +24,13 @@ module.exports = {
       path: 'dgiot_file',
       target: 'https://dev.dgiotcloud.cn',
     },
+    /**
+     * @description dgiot_file文件资源目录。开发使用
+     */
+    {
+      path: 'upload',
+      target: 'http://dev.dgiotcloud.cn',
+    },
     /**
      * @description amis server 开发使用
      */
diff --git a/src/i18n/zh.js b/src/i18n/zh.js
index cd780f350a..21dd5b6d61 100644
--- a/src/i18n/zh.js
+++ b/src/i18n/zh.js
@@ -761,6 +761,7 @@ export default {
       'evidence control': '取证控件',
       'basic element': '基本元件',
       'screen element': '大屏组件',
+      'lowcode element': '低代码组件',
       'print control': '打印控件',
       'basic grid': '网格',
       'create template': '模板创建',
diff --git a/src/store/modules/topo.js b/src/store/modules/topo.js
index 76eb6723ab..ccedcdf25b 100644
--- a/src/store/modules/topo.js
+++ b/src/store/modules/topo.js
@@ -381,6 +381,9 @@ const mutations = {
           data: thing.data,
           productid: thing.productid,
         })
+        console.log('%c 添加amis低代码节点', 'background:#ff00ff;')
+        console.log(simpleImage)
+        console.log(thing)
       } else if (thing.type == 'gifimage') {
         simpleImage = addNodeEvent(
           _.merge(canvas.handlerArgs, {
diff --git a/src/utils/konva/core/topoBasic.js b/src/utils/konva/core/topoBasic.js
index 1b16fc57cb..2c4ebf4931 100644
--- a/src/utils/konva/core/topoBasic.js
+++ b/src/utils/konva/core/topoBasic.js
@@ -430,6 +430,7 @@ const topoBasic = {
       // args.path,
       args
     )
+    console.log(args)
     if (args.data.src) {
       let src = args.data.src
       // if (src.indexOf('http') < 0) {
@@ -439,6 +440,9 @@ const topoBasic = {
       var imageObj = new Image()
       imageObj.src = src
       // imageObj.onload = () => {
+
+      console.log(args.data.id)
+
       var simpleImage = new Konva.Image({
         id: args.data.id || 'amis_component_' + topoId,
         x: 100,
@@ -456,6 +460,7 @@ const topoBasic = {
       simpleImage.setAttrs({
         src: src,
       })
+      console.log(simpleImage)
       return simpleImage
     }
     let vueComponet = ''
diff --git a/src/views/CloudFunction/lowcode/index.vue b/src/views/CloudFunction/lowcode/index.vue
index 2f30b04f2a..f14b4d13c2 100644
--- a/src/views/CloudFunction/lowcode/index.vue
+++ b/src/views/CloudFunction/lowcode/index.vue
@@ -184,7 +184,7 @@
         :label="$translateTitle('product.title')"
         prop="title"
         show-overflow-tooltip
-        width="200px"
+        width="160px"
       >
         <template #default="{ row }">
           <el-form :model="row">
@@ -265,7 +265,7 @@
         align="center"
         label="渲染框架"
         show-overflow-tooltip
-        width="140"
+        width="120"
       >
         <template #default="{ row, $index }">
           <el-select
@@ -303,7 +303,7 @@
         align="center"
         :label="$translateTitle('home.language')"
         show-overflow-tooltip
-        width="140"
+        width="100"
       >
         <template #default="{ row, $index }">
           <Select v-model="row.language" @on-change="switchlanguage(row)">
@@ -324,7 +324,7 @@
         align="center"
         :label="$translateTitle('task.data')"
         show-overflow-tooltip
-        width="120"
+        width="100"
       >
         <template #default="{ row }">
           <el-button
@@ -336,11 +336,22 @@
           </el-button>
         </template>
       </el-table-column>
+      <el-table-column
+        v-if="type != 'menu' && type != 'role'"
+        align="center"
+        label="图片"
+        show-overflow-tooltip
+        width="80"
+      >
+        <template #default="{ row }">
+          <img :src="row.icon" style="width: 50px" />
+        </template>
+      </el-table-column>
       <el-table-column
         align="center"
         :label="$translateTitle('node.operation')"
         show-overflow-tooltip
-        width="360"
+        width="420"
       >
         <template #default="{ row }">
           <el-button
@@ -378,6 +389,13 @@
           >
             日志
           </el-button>
+          <el-button
+            v-show="type != 'menu' && type != 'role'"
+            type="default"
+            @click="handleToViewIcon(row)"
+          >
+            图片
+          </el-button>
           <el-button type="primary" @click="handleLowCode(row)">
             {{ $translateTitle('application.preview') }}
           </el-button>
@@ -436,6 +454,34 @@
     />
     <view-edit ref="edit" @fetch-data="fetchData" />
     <lowcodeDesign ref="lowcodeDesign" @objectId="lowcodeId" />
+    <el-drawer
+      ref="drawer"
+      append-to-body
+      title="上传图片"
+      :visible.sync="drawer.visible"
+    >
+      <div style="padding: 0 20px">
+        <el-form ref="uploadProForm" :model="formIcon">
+          <el-upload
+            ref="fileUpload"
+            accept=".png, .jpg, .jpeg"
+            :action="uploadAction"
+            :auto-upload="false"
+            :before-upload="beforeFileUpload"
+            :data="uploadData"
+            :file-list="fileList"
+            :headers="uploadHeaders"
+            :on-change="handleChange"
+            :on-error="handleUploadError"
+            :on-success="handleUploadSuccess"
+            :with-credentials="true"
+          >
+            <img v-if="imageUrl" class="avatar" :src="imageUrl" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form>
+      </div>
+    </el-drawer>
   </div>
 </template>
 <script>
@@ -445,6 +491,8 @@
   import { queryView, putView, postView, delView, getView } from '@/api/View'
   import { getDlinkJson } from '@/api/Dlink'
   import ViewEdit from './components/ViewEdit'
+  import { UploadTopoImg } from '@/api/File'
+  import request from '@/utils/request/request'
 
   const defaultQuery = {
     class: '',
@@ -646,6 +694,17 @@
           children: 'children',
           label: 'name',
         },
+        drawer: {
+          visible: false,
+        },
+        formIcon: {},
+        uploadHeaders: {
+          sessionToken: Cookies.get('access_token'),
+        },
+        uploadAction: '',
+        uploadData: {},
+        fileList: [],
+        imageUrl: null,
       }
     },
     computed: {
@@ -658,6 +717,7 @@
         // _product: 'user/_Product',
         // _role: 'acl/role',
         // currentDepartment: 'user/currentDepartment',
+        token: 'user/token',
       }),
     },
     watch: {
@@ -923,6 +983,113 @@
           },
         })
       },
+      //上传图片
+      handleToViewIcon(row) {
+        localStorage.setItem('parse_viewid', row.objectId)
+        this.drawer.visible = true
+      },
+      deleteImgsrc() {
+        // event.stopPropagation()
+        this.imageUrl = ''
+      },
+      submitUpload(file) {
+        // this.uploadAction = Cookies.get('apiserver') + '/product?appid=' + Cookies.get("appids");
+
+        if (this.fileList.length == 0) {
+          return
+        }
+
+        this.uploadAction = '/upload'
+        // this.uploadAction = 'http://cad.iotn2n.com:5080/product?appid=' + Cookies.get("appids");
+
+        let ext = null
+        let i = file.name.lastIndexOf('.')
+        if (i >= 0) {
+          ext = file.name.substring(i)
+        }
+        let path = '/dgiot_file/amis/'
+        if (ext == '.png') {
+          path += 'png/'
+        } else {
+          path += 'jpg/'
+        }
+
+        console.log('文件路径', path)
+
+        this.uploadData.auth_token = this.token
+        this.uploadData.scene = 'app'
+        this.uploadData.path = path
+        this.uploadData.output = 'json'
+        this.uploadData.submit = 'upload'
+
+        this.fileList.splice(0, this.fileList.length)
+
+        this.fileList.push(file)
+
+        this.$nextTick(() => {
+          // dgiotlog.log('uploadHeaders',this.uploadHeaders);
+
+          //this.uploadData.appid = Cookies.get('appids')
+          // this.uploadData.key = "key";
+
+          console.log(this.fileList)
+          console.log(this.uploadData)
+          this.$refs.fileUpload.submit()
+          //this.uploadData.file = this.fileList
+          //UploadTopoImg(this.uploadData)
+        })
+      },
+      beforeFileUpload(file) {
+        console.log('上传之前', file)
+
+        console.log('处理之后', file)
+        return true
+      },
+      async handleUploadSuccess(response, file, fileList) {
+        // dgiotlog.log('### Success response', response)
+
+        let ext = null
+        let i = file.name.lastIndexOf('.')
+        if (i >= 0) {
+          ext = file.name.substring(i)
+        }
+        let path = '/dgiot_file/amis/'
+        if (ext == '.png') {
+          path += 'png/'
+        } else {
+          path += 'jpg/'
+        }
+        let viewID = localStorage.getItem('parse_viewid')
+        console.log('viewID', viewID)
+        await putView(viewID, {
+          icon: path + file.name,
+        })
+
+        this.imageUrl = URL.createObjectURL(file.raw)
+        this.$message({
+          type: 'success',
+          message: '图片上传成功',
+          showClose: true,
+          duration: 2000,
+        })
+        this.$refs['uploadProForm'].resetFields()
+      },
+      handleUploadError(err, file, fileList) {
+        this.$message({
+          message: err,
+          showClose: true,
+          duration: 2000,
+        })
+      },
+      handleChange(file, fileList) {
+        console.log('选中了文件', file)
+        if (fileList.length > 0) {
+          this.fileList = [fileList[fileList.length - 1]] // 展示最后一次选择的文件
+        }
+
+        console.log(this.fileList)
+        this.submitUpload(file)
+      },
       async handleEdit(row) {
         localStorage.setItem('parse_objectid', row.key)
         const loading = this.$baseLoading(1)
diff --git a/src/views/CloudFunction/topo/components/TopoTabs.vue b/src/views/CloudFunction/topo/components/TopoTabs.vue
index be00d1df35..2f39a10440 100644
--- a/src/views/CloudFunction/topo/components/TopoTabs.vue
+++ b/src/views/CloudFunction/topo/components/TopoTabs.vue
@@ -885,6 +885,40 @@
         />
         <el-divider />
       </a-collapse-panel>
+      <a-collapse-panel key="99" :header="'低代码组件'">
+        <img
+          v-for="item in lowCodeArray"
+          :key="item.objectId"
+          draggable="true"
+          size="mini"
+          :src="$FileServe + item.icon"
+          style="
+            width: 70px;
+            height: 60px;
+            display: inline-block;
+            margin-left: 20px;
+            margin-top: 10px;
+          "
+          type="primary"
+          @click="
+            createBasicThing({
+              productid: $route.query.productid,
+              type: 'amiscomponent',
+              data: {
+                id: item.objectId, //amis_${new Date().getTime()}
+                width: 500,
+                height: 350,
+                fill: 'rgba(23, 37, 76, 0.7)',
+                text: item.title,
+                source: 'api',
+                src: item.icon,
+              },
+              chart: 'amisview',
+              hidden: false,
+            })
+          "
+        />
+      </a-collapse-panel>
       <a-collapse-panel key="7" :header="'3D模型'">
         <img
           draggable="true"
@@ -968,6 +1002,7 @@
 
 <script>
   import { UploadTopoImg } from '@/api/File'
+  import { getViewList } from '@/api/View'
   import addNodeEvent from '@/utils/konva/common'
   import canvas from '@/utils/konva/core/canvas'
   import createThing from '@/utils/konva/createThing'
@@ -1046,6 +1081,7 @@
         staticList: [],
         gifList: [],
         uploadType: '', //上传类型
+        lowCodeArray: [], //低代码组件列表
       }
     },
     computed: {
@@ -1056,6 +1092,7 @@
     async created() {
       this.initImage('static')
       this.initImage('gif')
+      this.fetchViewList()
     },
     mounted() {
       this.$dgiotBus.$off('copyNode')
@@ -1213,6 +1250,37 @@
         this.uploadType = type
         this.$refs.file.click()
       },
+      async fetchViewList() {
+        this.lowCodeArray.splice(0, this.lowCodeArray.length)
+
+        let formSearch = {
+          skip: 0,
+          limit: 20,
+          include: 'category',
+          order: '-updatedAt',
+          count: 'objectId',
+          excludeKeys: '',
+          where: {},
+        }
+
+        formSearch.where.class = { $regex: 'Product' }
+        formSearch.where.type = { $regex: 'Amis' }
+        await getViewList(formSearch)
+          .then((response) => {
+            const { count = 0, results = [] } = response
+
+            for (let k in results) {
+              let item = results[k]
+
+              this.lowCodeArray.push(item)
+            }
+
+            console.log(results)
+          })
+          .catch((_) => {
+            console.log(_)
+          })
+      },
       getFileData(e) {
         // console.log(e.target.files[0])
         // return
diff --git a/src/views/CloudFunction/topo/index.vue b/src/views/CloudFunction/topo/index.vue
index 3d5e16fbe8..e4a199accb 100644
--- a/src/views/CloudFunction/topo/index.vue
+++ b/src/views/CloudFunction/topo/index.vue
@@ -169,21 +169,41 @@
                   @input="handleEditKonva"
                 ></el-input>
               </el-form-item>
-              <el-form-item
-                v-if="editNode.attrs.name == 'amiscomponent'"
-                label="低代码绑定"
-              >
+              <el-form-item 
+                v-if="editNode.attrs.name == 'amiscomponent'">
+                <span slot="label">
+                  <span style="color: red">产品选择</span>
+                </span>
                 <el-select
-                  v-model="screenViewId"
-                  @change="handleEditViewId"
+                  v-model="screen_productid"
                   filterable
+                  @change="handleBindProduct"
                   placeholder="请选择"
                 >
                   <el-option
-                    v-for="item in screenViewList"
-                    :key="item.value"
-                    :label="item.title"
-                    :value="item.objectId"
+                    v-for="(product, index) in screenproductList"
+                    :key="product.value + index"
+                    :label="product.label"
+                    :value="product.value"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item v-if="editNode.attrs.name == 'amiscomponent'">
+                <span slot="label">
+                  <span style="color: red">设备选择</span>
+                </span>
+                <el-select
+                  v-model="screen_deviceid"
+                  :disabled="screen_productid == ''"
+                  filterable
+                  @change="handleBindDeviceAndView"
+                  placeholder="请选择"
+                >
+                  <el-option
+                    v-for="(itemdevice, index) in screendeviceList"
+                    :key="itemdevice.value + index"
+                    :label="itemdevice.label"
+                    :value="itemdevice.value"
                   ></el-option>
                 </el-select>
               </el-form-item>
@@ -958,6 +978,7 @@
         viewid: this.$route.query.viewid || '',
         wmxList: [],
         screenproductList: [],
+        screenproductId: '',
         screendeviceList: [],
         screenwmxList: [],
         screen_productid: '',
@@ -1053,6 +1074,12 @@
             this.handlegetScreenWmxList(this.screen_productid)
             this.handleQueryDeviceList(this.screen_productid)
           }
+        } else if (node.attrs.name == 'amiscomponent') {
+          this.screen_productid = node.attrs.screen_productid || ''
+          this.screen_deviceid = node.attrs.screen_deviceid || ''
+          if (this.screen_productid) {
+            this.handleQueryDeviceList(this.screen_productid)
+          }
         }
         // this.editNode.setAttrs({
         //   fill: '#091322',
@@ -1262,7 +1289,8 @@
       },
       // 大屏绑定产品
       handleBindProduct(e) {
-        console.log(e)
+        console.log('%c 绑定产品id %s', 'background:#ffff00;', e)
+        console.log(this.editNode)
         let data = {
           screen_productid: e,
         }
@@ -1271,7 +1299,8 @@
         this.handleQueryDeviceList(e)
       },
       handleBindDevice(e) {
-        console.log(e)
+        console.log('%c 绑定设备id %s', 'background:#ffff00;', e)
+        console.log(this.editNode)
         let id = e + '_' + this.screen_wmxid + '_text'
         let data = {
           id,
@@ -1280,7 +1309,9 @@
         this.editNode.setAttrs(data)
       },
       handleBindDeviceWmx(e) {
-        console.log(e)
+        console.log('%c 绑定设备物模型id %s', 'background:#ffff00;', e)
+        console.log(this.editNode)
+
         let id = this.screen_deviceid + '_' + e + '_text'
         let data = {
           id,
@@ -1288,6 +1319,16 @@
         }
         this.editNode.setAttrs(data)
       },
+      handleBindDeviceAndView(e) {
+        console.log('%c 绑定设备低代码 %s', 'background:#ffff00;', e)
+        console.log(this.editNode)
+        //let id = e + '_' + this.screen_wmxid + '_text'
+        let data = {
+          //id,
+          screen_deviceid: e,
+        }
+        this.editNode.setAttrs(data)
+      },
       handleBindWmx(e) {
         this.editNode.setAttrs(this.editForm)
       },