diff --git a/nladmin-system/pom.xml b/nladmin-system/pom.xml
index 073ab9d1b..954dcc2e5 100644
--- a/nladmin-system/pom.xml
+++ b/nladmin-system/pom.xml
@@ -20,11 +20,11 @@
 
     <dependencies>
 
-        <dependency>
-            <groupId>com.alicp.jetcache</groupId>
-            <artifactId>jetcache-starter-redis</artifactId>
-            <version>2.5.14</version>
-        </dependency>
+<!--        <dependency>-->
+<!--            <groupId>com.alicp.jetcache</groupId>-->
+<!--            <artifactId>jetcache-starter-redis</artifactId>-->
+<!--            <version>2.5.14</version>-->
+<!--        </dependency>-->
 
 
         <dependency>
diff --git a/nladmin-system/src/main/java/org/nl/modules/logicflow/rest/StageController.java b/nladmin-system/src/main/java/org/nl/modules/logicflow/rest/StageController.java
new file mode 100644
index 000000000..708ee82cf
--- /dev/null
+++ b/nladmin-system/src/main/java/org/nl/modules/logicflow/rest/StageController.java
@@ -0,0 +1,88 @@
+package org.nl.modules.logicflow.rest;
+
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.nl.annotation.Log;
+import org.nl.modules.logicflow.service.StageService;
+import org.nl.modules.logicflow.service.dto.StageDto;
+import org.springframework.data.domain.Pageable;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.validation.annotation.Validated;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.Map;
+
+/**
+ * @Author: lyd
+ * @Description: 舞台管理
+ * @Date: 2022-07-29  10:49
+ */
+@RestController
+@RequiredArgsConstructor
+@Api(tags = "舞台管理")
+@RequestMapping("/api/stage")
+@Slf4j
+public class StageController {
+    private final StageService stageService;
+    @GetMapping
+    @Log("查询舞台")
+    @ApiOperation("查询舞台")
+    //@PreAuthorize("@el.check('stage:list')")
+    public ResponseEntity<Object> query(@RequestParam Map whereJson, Pageable page) {
+        return new ResponseEntity<>(stageService.queryAll(whereJson, page), HttpStatus.OK);
+    }
+
+    @PostMapping
+    @Log("新增舞台")
+    @ApiOperation("新增舞台")
+    //@PreAuthorize("@el.check('stage:add')")
+    public ResponseEntity<Object> create(@Validated @RequestBody StageDto dto) {
+        stageService.create(dto);
+        return new ResponseEntity<>(HttpStatus.CREATED);
+    }
+
+    @PutMapping
+    @Log("修改舞台")
+    @ApiOperation("修改舞台")
+    //@PreAuthorize("@el.check('stage:edit')")
+    public ResponseEntity<Object> update(@Validated @RequestBody StageDto dto) {
+        stageService.update(dto);
+        return new ResponseEntity<>(HttpStatus.NO_CONTENT);
+    }
+
+    @Log("删除舞台")
+    @ApiOperation("删除舞台")
+    //@PreAuthorize("@el.check('stage:del')")
+    @DeleteMapping
+    public ResponseEntity<Object> delete(@RequestBody String[] ids) {
+        stageService.deleteAll(ids);
+        return new ResponseEntity<>(HttpStatus.OK);
+    }
+
+    @GetMapping("/selectList")
+    @Log("下拉选舞台")
+    @ApiOperation("下拉选舞台")
+    //@PreAuthorize("@el.check('routePlan:list')")
+    public ResponseEntity<Object> selectList() {
+        return new ResponseEntity<>(stageService.selectList(), HttpStatus.OK);
+    }
+
+    @PostMapping("/addNewStage")
+    @Log("保存舞台数据")
+    @ApiOperation("保存舞台数据")
+    public ResponseEntity<Object> addNewStage(@Validated @RequestBody StageDto dto) {
+        log.info("dto{}",dto);
+        stageService.addNewStage(dto);
+        return new ResponseEntity<>(HttpStatus.CREATED);
+    }
+
+    @PostMapping("/getNewStageDataByCode")
+    @Log("根据stage_code获取舞台数据")
+    @ApiOperation("根据stage_code获取舞台数据")
+    public ResponseEntity<Object> getNewStageDataByCode(@RequestBody String code) {
+        return new ResponseEntity<>(stageService.findByCode(code), HttpStatus.CREATED);
+    }
+}
diff --git a/nladmin-system/src/main/java/org/nl/modules/logicflow/rest/StageImageController.java b/nladmin-system/src/main/java/org/nl/modules/logicflow/rest/StageImageController.java
new file mode 100644
index 000000000..d75d7650b
--- /dev/null
+++ b/nladmin-system/src/main/java/org/nl/modules/logicflow/rest/StageImageController.java
@@ -0,0 +1,73 @@
+package org.nl.modules.logicflow.rest;
+
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.nl.annotation.Log;
+import org.nl.modules.logicflow.service.StageImageService;
+import org.nl.modules.logicflow.service.dto.StageImageDto;
+import org.springframework.data.domain.Pageable;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.validation.annotation.Validated;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.Map;
+
+/**
+ * @Author: lyd
+ * @Description: 舞台图标控制层
+ * @Date: 2022-07-29
+ */
+@RestController
+@RequiredArgsConstructor
+@Api(tags = "舞台管理")
+@RequestMapping("/api/stageImage")
+@Slf4j
+public class StageImageController {
+    private final StageImageService stageImageService;
+
+    @GetMapping
+    @Log("查询舞台")
+    @ApiOperation("查询舞台")
+    //@PreAuthorize("@el.check('stageImage:list')")
+    public ResponseEntity<Object> query(@RequestParam Map whereJson, Pageable page) {
+        return new ResponseEntity<>(stageImageService.queryAll(whereJson, page), HttpStatus.OK);
+    }
+
+    @PostMapping
+    @Log("新增舞台")
+    @ApiOperation("新增舞台")
+    //@PreAuthorize("@el.check('stageImage:add')")
+    public ResponseEntity<Object> create(@Validated @RequestBody StageImageDto dto) {
+        stageImageService.create(dto);
+        return new ResponseEntity<>(HttpStatus.CREATED);
+    }
+
+    @PutMapping
+    @Log("修改舞台")
+    @ApiOperation("修改舞台")
+    //@PreAuthorize("@el.check('stageImage:edit')")
+    public ResponseEntity<Object> update(@Validated @RequestBody StageImageDto dto) {
+        stageImageService.update(dto);
+        return new ResponseEntity<>(HttpStatus.NO_CONTENT);
+    }
+
+    @Log("删除舞台")
+    @ApiOperation("删除舞台")
+    //@PreAuthorize("@el.check('stageImage:del')")
+    @DeleteMapping
+    public ResponseEntity<Object> delete(@RequestBody String[] ids) {
+        stageImageService.deleteAll(ids);
+        return new ResponseEntity<>(HttpStatus.OK);
+    }
+
+    @GetMapping("/selectList")
+    @Log("下拉选设备图标")
+    @ApiOperation("下拉选设备图标")
+    //@PreAuthorize("@el.check('routePlan:list')")
+    public ResponseEntity<Object> selectList() {
+        return new ResponseEntity<>(stageImageService.selectList(), HttpStatus.OK);
+    }
+}
diff --git a/nladmin-system/src/main/java/org/nl/modules/logicflow/service/StageImageService.java b/nladmin-system/src/main/java/org/nl/modules/logicflow/service/StageImageService.java
new file mode 100644
index 000000000..f282923d7
--- /dev/null
+++ b/nladmin-system/src/main/java/org/nl/modules/logicflow/service/StageImageService.java
@@ -0,0 +1,59 @@
+package org.nl.modules.logicflow.service;
+
+import com.alibaba.fastjson.JSONArray;
+import org.nl.modules.logicflow.service.dto.StageImageDto;
+import org.springframework.data.domain.Pageable;
+
+import java.util.Map;
+
+/**
+ * @Author: lyd
+ * @Description: 舞台图标的服务层
+ * @Date: 2022-07-29
+ */
+public interface StageImageService {
+    /**
+     * 查询数据分页
+     *
+     * @param whereJson 条件
+     * @param page      分页参数
+     * @return Map<String, Object>
+     */
+    Map<String, Object> queryAll(Map whereJson, Pageable page);
+
+    /**
+     * 创建
+     *
+     * @param dto /
+     */
+    void create(StageImageDto dto);
+
+    /**
+     * 编辑
+     *
+     * @param dto /
+     */
+    void update(StageImageDto dto);
+
+    /**
+     * 根据ID查询
+     *
+     * @param image_uuid ID
+     * @return StageImage
+     */
+    StageImageDto findById(String image_uuid);
+
+    /**
+     * 多选删除
+     *
+     * @param ids /
+     */
+    void deleteAll(String[] ids);
+
+    /**
+     * 前端舞台编辑选择设备图标下拉选列表
+     *
+     * @return
+     */
+    JSONArray selectList();
+}
diff --git a/nladmin-system/src/main/java/org/nl/modules/logicflow/service/StageService.java b/nladmin-system/src/main/java/org/nl/modules/logicflow/service/StageService.java
new file mode 100644
index 000000000..857c476ab
--- /dev/null
+++ b/nladmin-system/src/main/java/org/nl/modules/logicflow/service/StageService.java
@@ -0,0 +1,74 @@
+package org.nl.modules.logicflow.service;
+
+import com.alibaba.fastjson.JSONArray;
+import org.nl.modules.logicflow.service.dto.StageDto;
+import org.springframework.data.domain.Pageable;
+
+import java.util.Map;
+
+/**
+ * @Author: lyd
+ * @Description:
+ * @Date: 2022-07-29  10:50
+ */
+public interface StageService {
+    /**
+     * 查询数据分页
+     *
+     * @param whereJson 条件
+     * @param page      分页参数
+     * @return Map<String, Object>
+     */
+    Map<String, Object> queryAll(Map whereJson, Pageable page);
+
+    /**
+     * 创建
+     *
+     * @param dto /
+     */
+    void create(StageDto dto);
+
+    /**
+     * 编辑
+     *
+     * @param dto /
+     */
+    void update(StageDto dto);
+
+    /**
+     * 根据ID查询
+     *
+     * @param stage_uuid ID
+     * @return Stage
+     */
+    StageDto findById(String stage_uuid);
+
+    /**
+     * 多选删除
+     *
+     * @param ids /
+     */
+    void deleteAll(String[] ids);
+
+    /**
+     * 前端舞台下拉选列表
+     *
+     * @return
+     */
+    JSONArray selectList();
+
+    /**
+     * 新增舞台信息
+     * 将数据保存到remark---保存数据
+     * @param dto
+     */
+    void addNewStage(StageDto dto);
+
+    /**
+     * 根据编码查询
+     *
+     * @param code code
+     * @return Stage
+     */
+    StageDto findByCode(String code);
+}
diff --git a/nladmin-system/src/main/java/org/nl/modules/logicflow/service/dto/StageDto.java b/nladmin-system/src/main/java/org/nl/modules/logicflow/service/dto/StageDto.java
new file mode 100644
index 000000000..ed7420312
--- /dev/null
+++ b/nladmin-system/src/main/java/org/nl/modules/logicflow/service/dto/StageDto.java
@@ -0,0 +1,63 @@
+package org.nl.modules.logicflow.service.dto;
+
+import lombok.Data;
+
+import java.io.Serializable;
+
+/**
+ * @Author: lyd
+ * @Description: 舞台数据的Dto
+ * @Date: 2022-07-29  13:28
+ */
+@Data
+public class StageDto implements Serializable {
+    /**
+     * 舞台标识
+     */
+    private String stage_uuid;
+
+    /**
+     * 舞台编码
+     */
+    private String stage_code;
+
+    /**
+     * 舞台名字
+     */
+    private String stage_name;
+
+    /**
+     * 舞台数据
+     */
+    private String stage_data;
+
+    /**
+     * 是否启用
+     */
+    private String is_active;
+
+    /**
+     * 是否删除
+     */
+    private String is_delete;
+
+    /**
+     * 创建者
+     */
+    private String create_by;
+
+    /**
+     * 创建时间
+     */
+    private String create_time;
+
+    /**
+     * 修改者
+     */
+    private String update_by;
+
+    /**
+     * 修改时间
+     */
+    private String update_time;
+}
diff --git a/nladmin-system/src/main/java/org/nl/modules/logicflow/service/dto/StageImageDto.java b/nladmin-system/src/main/java/org/nl/modules/logicflow/service/dto/StageImageDto.java
new file mode 100644
index 000000000..2d6cf493b
--- /dev/null
+++ b/nladmin-system/src/main/java/org/nl/modules/logicflow/service/dto/StageImageDto.java
@@ -0,0 +1,68 @@
+package org.nl.modules.logicflow.service.dto;
+
+import lombok.Data;
+
+import java.io.Serializable;
+
+/**
+ * @Author: lyd
+ * @Description: 设备图标dto
+ * @Date: 2022-07-29
+ */
+@Data
+public class StageImageDto implements Serializable {
+    /**
+     * 设备标识
+     */
+    private String image_uuid;
+
+    /**
+     * 设备名字
+     */
+    private String image_name;
+
+    /**
+     * 适用驱动
+     */
+    private String driver_code_json;
+
+    /**
+     * 备注
+     */
+    private String remark;
+
+    /**
+     * 是否启用
+     */
+    private String is_active;
+
+    /**
+     * 是否删除
+     */
+    private String is_delete;
+
+    /**
+     * 创建者
+     */
+    private String create_by;
+
+    /**
+     * 创建时间
+     */
+    private String create_time;
+
+    /**
+     * 修改者
+     */
+    private String update_by;
+
+    /**
+     * 修改时间
+     */
+    private String update_time;
+
+    /**
+     * 图标编码
+     */
+    private String image_code;
+}
diff --git a/nladmin-system/src/main/java/org/nl/modules/logicflow/service/impl/StageImageServiceImpl.java b/nladmin-system/src/main/java/org/nl/modules/logicflow/service/impl/StageImageServiceImpl.java
new file mode 100644
index 000000000..e4a531c88
--- /dev/null
+++ b/nladmin-system/src/main/java/org/nl/modules/logicflow/service/impl/StageImageServiceImpl.java
@@ -0,0 +1,110 @@
+package org.nl.modules.logicflow.service.impl;
+
+import cn.hutool.core.date.DateUtil;
+import cn.hutool.core.util.IdUtil;
+import com.alibaba.fastjson.JSONArray;
+import com.alibaba.fastjson.JSONObject;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.nl.exception.BadRequestException;
+import org.nl.modules.logicflow.service.StageImageService;
+import org.nl.modules.logicflow.service.dto.StageImageDto;
+import org.nl.utils.SecurityUtils;
+import org.nl.wql.core.bean.ResultBean;
+import org.nl.wql.core.bean.WQLObject;
+import org.nl.wql.util.WqlUtil;
+import org.springframework.data.domain.Pageable;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.util.Map;
+
+/**
+ * @Author: lyd
+ * @Description: 舞台图标的服务实现
+ * @Date: 2022-07-29
+ */
+@Service
+@RequiredArgsConstructor
+@Slf4j
+public class StageImageServiceImpl implements StageImageService {
+    @Override
+    public Map<String, Object> queryAll(Map whereJson, Pageable page) {
+        String where = "1=1";
+        if (whereJson.get("device_type") != null) {
+            where = "driver_code_json like ('%" + whereJson.get("device_type") + "%')";
+        }
+        WQLObject wo = WQLObject.getWQLObject("stage_image");
+        ResultBean rb = wo.pagequery(WqlUtil.getHttpContext(page), where, "update_time desc");
+        final JSONObject json = rb.pageResult();
+        return json;
+    }
+
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public void create(StageImageDto dto) {
+        String currentUsername = SecurityUtils.getCurrentUsername();
+        String now = DateUtil.now();
+
+        dto.setImage_uuid(IdUtil.simpleUUID());
+        dto.setCreate_by(currentUsername);
+        dto.setUpdate_by(currentUsername);
+        dto.setUpdate_time(now);
+        dto.setCreate_time(now);
+
+        WQLObject wo = WQLObject.getWQLObject("stage_image");
+        JSONObject json = (JSONObject) JSONObject.toJSON(dto);
+
+        wo.insert(json);
+    }
+
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public void update(StageImageDto dto) {
+        StageImageDto entity = this.findById(dto.getImage_uuid());
+        if (entity == null) throw new BadRequestException("被删除或无权限，操作失败!");
+
+        String currentUsername = SecurityUtils.getCurrentUsername();
+        String now = DateUtil.now();
+        dto.setUpdate_time(now);
+        dto.setUpdate_by(currentUsername);
+
+        WQLObject wo = WQLObject.getWQLObject("stage_image");
+        JSONObject json = (JSONObject) JSONObject.toJSON(dto);
+
+        wo.update(json);
+    }
+
+    @Override
+    public StageImageDto findById(String image_uuid) {
+        WQLObject wo = WQLObject.getWQLObject("stage_image");
+        JSONObject json = wo.query("image_uuid ='" + image_uuid + "'").uniqueResult(0);
+        final StageImageDto obj = json.toJavaObject(StageImageDto.class);
+        return obj;
+    }
+
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public void deleteAll(String[] ids) {
+        WQLObject wo = WQLObject.getWQLObject("stage_image");
+        for (String image_uuid : ids) {
+            wo.delete("image_uuid = '" + image_uuid + "'");
+        }
+    }
+
+    @Override
+    public JSONArray selectList() {
+        //设备基础信息表【acs_stage_image】
+        JSONArray arr = WQLObject.getWQLObject("stage_image").query("is_delete= '0' AND is_active= '1'", "update_time desc").getResultJSONArray(0);
+        JSONArray result = new JSONArray();
+        for (int i = 0; i < arr.size(); i++) {
+            JSONObject obj = arr.getJSONObject(i);
+            JSONObject json = new JSONObject();
+            json.put("image_uuid", obj.getString("image_uuid"));
+            json.put("image_code", obj.getString("image_code"));
+            json.put("image_name", obj.getString("image_code").toString().split("-")[0]);
+            result.add(json);
+        }
+        return result;
+    }
+}
diff --git a/nladmin-system/src/main/java/org/nl/modules/logicflow/service/impl/StageServiceImpl.java b/nladmin-system/src/main/java/org/nl/modules/logicflow/service/impl/StageServiceImpl.java
new file mode 100644
index 000000000..fc046af99
--- /dev/null
+++ b/nladmin-system/src/main/java/org/nl/modules/logicflow/service/impl/StageServiceImpl.java
@@ -0,0 +1,132 @@
+package org.nl.modules.logicflow.service.impl;
+
+import cn.hutool.core.date.DateUtil;
+import cn.hutool.core.util.IdUtil;
+import com.alibaba.fastjson.JSONArray;
+import com.alibaba.fastjson.JSONObject;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.nl.exception.BadRequestException;
+import org.nl.modules.logicflow.service.StageService;
+import org.nl.modules.logicflow.service.dto.StageDto;
+import org.nl.utils.SecurityUtils;
+import org.nl.wql.core.bean.ResultBean;
+import org.nl.wql.core.bean.WQLObject;
+import org.nl.wql.util.WqlUtil;
+import org.springframework.data.domain.Pageable;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.util.Map;
+
+/**
+ * @Author: lyd
+ * @Description:
+ * @Date: 2022-07-29  10:51
+ */
+@Service
+@RequiredArgsConstructor
+@Slf4j
+public class StageServiceImpl implements StageService {
+    @Override
+    public Map<String, Object> queryAll(Map whereJson, Pageable page) {
+        log.info("分页查找");
+        WQLObject wo = WQLObject.getWQLObject("stage");
+        ResultBean rb = wo.pagequery(WqlUtil.getHttpContext(page), "", "update_time desc");
+        final JSONObject json = rb.pageResult();
+        return json;
+    }
+
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public void create(StageDto dto) {
+        String currentUsername = SecurityUtils.getCurrentUsername();
+        String now = DateUtil.now();
+
+        dto.setStage_uuid(IdUtil.simpleUUID());
+        dto.setCreate_by(currentUsername);
+        dto.setUpdate_by(currentUsername);
+        dto.setUpdate_time(now);
+        dto.setCreate_time(now);
+
+        WQLObject wo = WQLObject.getWQLObject("stage");
+        JSONObject json = (JSONObject) JSONObject.toJSON(dto);
+
+        wo.insert(json);
+    }
+
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public void update(StageDto dto) {
+        StageDto entity = this.findById(dto.getStage_uuid());
+        if (entity == null) throw new BadRequestException("被删除或无权限，操作失败!");
+
+        String currentUsername = SecurityUtils.getCurrentUsername();
+        String now = DateUtil.now();
+        dto.setUpdate_time(now);
+        dto.setUpdate_by(currentUsername);
+
+        WQLObject wo = WQLObject.getWQLObject("stage");
+        JSONObject json = (JSONObject) JSONObject.toJSON(dto);
+
+        wo.update(json);
+    }
+
+    @Override
+    public StageDto findById(String stage_uuid) {
+        WQLObject wo = WQLObject.getWQLObject("stage");
+        JSONObject json = wo.query("stage_uuid ='" + stage_uuid + "'").uniqueResult(0);
+        final StageDto obj = json.toJavaObject(StageDto.class);
+        return obj;
+    }
+
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public void deleteAll(String[] ids) {
+        WQLObject wo = WQLObject.getWQLObject("stage");
+        for (String stage_uuid : ids) {
+            wo.delete("stage_uuid = '" + stage_uuid + "'");
+        }
+    }
+
+    @Override
+    public JSONArray selectList() {
+        //设备基础信息表【stage】
+        JSONArray arr = WQLObject.getWQLObject("stage").query("is_delete= '0' AND is_active= '1'").getResultJSONArray(0);
+        JSONArray result = new JSONArray();
+        for (int i = 0; i < arr.size(); i++) {
+            JSONObject obj = arr.getJSONObject(i);
+            JSONObject json = new JSONObject();
+            json.put("stage_id", obj.getString("stage_id"));
+            json.put("stage_code", obj.getString("stage_code"));
+            json.put("stage_name", obj.getString("stage_name"));
+            result.add(json);
+        }
+        return result;
+    }
+
+    @Override
+    public void addNewStage(StageDto dto) {
+        // 根据dto的code找到数据
+        StageDto stageDto = this.findByCode(dto.getStage_code());
+        // 设置内容
+        stageDto.setStage_data(dto.getStage_data());
+        // 获取当前用户与时间
+        String currentUsername = SecurityUtils.getCurrentUsername();
+        String now = DateUtil.now();
+        stageDto.setUpdate_time(now);
+        stageDto.setUpdate_by(currentUsername);
+        System.out.println(stageDto);
+        WQLObject wo = WQLObject.getWQLObject("stage");
+        JSONObject json = (JSONObject) JSONObject.toJSON(stageDto);
+        wo.update(json);
+    }
+
+    @Override
+    public StageDto findByCode(String code) {
+        WQLObject wo = WQLObject.getWQLObject("stage");
+        JSONObject json = wo.query("stage_code ='" + code + "'").uniqueResult(0);
+        final StageDto obj = json.toJavaObject(StageDto.class);
+        return obj;
+    }
+}
diff --git a/nladmin-system/src/main/java/org/nl/modules/logicflow/wql/device.xls b/nladmin-system/src/main/java/org/nl/modules/logicflow/wql/device.xls
new file mode 100644
index 000000000..f15ea83e1
Binary files /dev/null and b/nladmin-system/src/main/java/org/nl/modules/logicflow/wql/device.xls differ
diff --git a/nladmin-system/src/main/java/org/nl/modules/system/rest/ParamController.java b/nladmin-system/src/main/java/org/nl/modules/system/rest/ParamController.java
index edb403bbb..06182a96c 100644
--- a/nladmin-system/src/main/java/org/nl/modules/system/rest/ParamController.java
+++ b/nladmin-system/src/main/java/org/nl/modules/system/rest/ParamController.java
@@ -75,4 +75,11 @@ public class ParamController {
     public void download(HttpServletResponse response, Map whereJson) throws IOException {
         paramService.download(paramService.queryAll(whereJson), response);
     }
+
+    @PostMapping("/getStageCodeByCode")
+    @Log("根据编码获取舞台编码")
+    @ApiOperation("根据编码获取舞台编码")
+    public ResponseEntity<Object> getStageCodeByCode(@RequestBody String code) {
+        return new ResponseEntity<>(paramService.findByCode(code), HttpStatus.CREATED);
+    }
 }
diff --git a/nladmin-system/src/main/java/org/nl/modules/system/wql/sys.xls b/nladmin-system/src/main/java/org/nl/modules/system/wql/sys.xls
index b3aa2d521..47e23f404 100644
Binary files a/nladmin-system/src/main/java/org/nl/modules/system/wql/sys.xls and b/nladmin-system/src/main/java/org/nl/modules/system/wql/sys.xls differ
diff --git a/nladmin-ui/package.json b/nladmin-ui/package.json
index 652c22dfc..22e8b7780 100644
--- a/nladmin-ui/package.json
+++ b/nladmin-ui/package.json
@@ -33,6 +33,8 @@
     "url": "https://github.com/elunez/eladmin/issues"
   },
   "dependencies": {
+    "@logicflow/core": "^1.1.22",
+    "@logicflow/extension": "^1.1.22",
     "@riophae/vue-treeselect": "0.4.0",
     "af-table-column": "^1.0.3",
     "axios": "0.18.1",
@@ -61,6 +63,7 @@
     "screenfull": "4.2.0",
     "sortablejs": "1.8.4",
     "vue": "2.6.10",
+    "vue-color": "^2.8.1",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.4.9",
     "vue-easy-print": "0.0.8",
diff --git a/nladmin-ui/src/api/logicflow/stage.js b/nladmin-ui/src/api/logicflow/stage.js
new file mode 100644
index 000000000..7c6c95558
--- /dev/null
+++ b/nladmin-ui/src/api/logicflow/stage.js
@@ -0,0 +1,50 @@
+import request from '@/utils/request'
+
+export function add(data) {
+  return request({
+    url: 'api/stage',
+    method: 'post',
+    data
+  })
+}
+
+export function del(ids) {
+  return request({
+    url: 'api/stage/',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/stage',
+    method: 'put',
+    data
+  })
+}
+
+export function selectStageList() {
+  return request({
+    url: 'api/stage/selectList',
+    method: 'get'
+  })
+}
+
+export function addNewStage(data) { // 保存舞台数据
+  return request({
+    url: 'api/stage/addNewStage',
+    method: 'post',
+    data
+  })
+}
+
+export function getNewStageDataByCode(code) {
+  return request({
+    url: 'api/stage/getNewStageDataByCode',
+    method: 'post',
+    data: code
+  })
+}
+
+export default { add, edit, del, selectStageList, addNewStage, getNewStageDataByCode }
diff --git a/nladmin-ui/src/api/logicflow/stageImage.js b/nladmin-ui/src/api/logicflow/stageImage.js
new file mode 100644
index 000000000..20b902def
--- /dev/null
+++ b/nladmin-ui/src/api/logicflow/stageImage.js
@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+export function add(data) {
+  return request({
+    url: 'api/stageImage',
+    method: 'post',
+    data
+  })
+}
+
+export function del(ids) {
+  return request({
+    url: 'api/stageImage/',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/stageImage',
+    method: 'put',
+    data
+  })
+}
+
+export function selectStageIconList() {
+  return request({
+    url: 'api/stageImage/selectList',
+    method: 'get'
+  })
+}
+
+export default { add, edit, del, selectStageIconList }
diff --git a/nladmin-ui/src/api/system/param.js b/nladmin-ui/src/api/system/param.js
index 0763489c7..07a8e5c94 100644
--- a/nladmin-ui/src/api/system/param.js
+++ b/nladmin-ui/src/api/system/param.js
@@ -24,4 +24,12 @@ export function edit(data) {
   })
 }
 
-export default { add, edit, del }
+export function getStageCodeByCode(code) {
+  return request({
+    url: 'api/param/getStageCodeByCode',
+    method: 'post',
+    data: code
+  })
+}
+
+export default { add, edit, del, getStageCodeByCode }
diff --git a/nladmin-ui/src/main.js b/nladmin-ui/src/main.js
index 1ffa5d8c6..d0fc1eda8 100644
--- a/nladmin-ui/src/main.js
+++ b/nladmin-ui/src/main.js
@@ -40,6 +40,12 @@ import 'echarts-gl'
 
 import 'jquery'
 
+// 全局引入LogicFlow
+import LogicFlow from '@logicflow/core'
+import { Menu } from '@logicflow/extension'
+import '@logicflow/extension/lib/style/index.css'
+LogicFlow.use(Menu)
+
 Vue.use(scroll)
 
 Vue.use(AFTableColumn)
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/Diagram.vue b/nladmin-ui/src/views/system/logicflow/editor/components/Diagram.vue
new file mode 100644
index 000000000..fbd00de05
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/Diagram.vue
@@ -0,0 +1,604 @@
+<template>
+  <div class="diagram">
+    <diagram-toolbar
+      v-if="lf"
+      class="diagram-toolbar"
+      :lf="lf"
+      :active-edges="activeEdges"
+      @changeNodeFillColor="$_changeNodeFill"
+      @saveGraph="$_saveGraph"
+      @changeStage="$_changeStage"
+      @verticalAlign="$_verticalAlign"
+      @horizontalAlign="$_horizontalAlign"
+      @leftAlign="$_leftAlign"
+      @rightAlign="$_rightAlign"
+      @upAlign="$_upAlign"
+      @downAlign="$_downAlign"
+      @horizontalDistribution="$_horizontalDistribution"
+      @verticalDistribution="$_verticalDistribution"
+      @cleanGraph="$_cleanGraph"
+      @lock="$_lock"
+      @unlock="$_unlock"
+    />
+    <div class="diagram-main">
+      <!-- 左边组件 -->
+      <diagram-sidebar class="diagram-sidebar" @dragInNode="$_dragInNode" />
+      <!-- 画布 -->
+      <div ref="container" class="diagram-container">
+        <div class="diagram-wrapper">
+          <div ref="diagram" class="lf-diagram" />
+        </div>
+      </div>
+    </div>
+    <!-- 右侧属性面板 -->
+    <PropertyPanel
+      v-if="activeNodes.length>0 || activeEdges.length > 0"
+      class="diagram-panel"
+      :only-edge="activeNodes.length === 0"
+      :elements-style="properties"
+      :show-choice="showChoice"
+      @setStyle="$_setStyle"
+      @setZIndex="$_setZIndex"
+    />
+  </div>
+</template>
+
+<script>
+import LogicFlow from '@logicflow/core'
+import { SelectionSelect } from '@logicflow/extension'
+import '@logicflow/core/dist/style/index.css'
+import '@logicflow/extension/lib/style/index.css'
+import DiagramToolbar from './DiagramToolbar.vue'
+import DiagramSidebar from './DiagramSidebar.vue'
+import PropertyPanel from './PropertyPanel.vue'
+import { registerCustomElement } from './node'
+import crudStage from '@/api/logicflow/stage'
+
+let data = ''
+let lf = ''
+export default {
+  name: 'Diagram',
+  components: {
+    DiagramToolbar,
+    DiagramSidebar,
+    PropertyPanel
+  },
+  data() {
+    return {
+      sidebarWidth: 200,
+      diagramWidth: 0,
+      diagramHeight: 0,
+      lf: '',
+      filename: '',
+      activeNodes: [],
+      activeEdges: [],
+      properties: {},
+      defaultForm: {
+        stage_uuid: null,
+        stage_code: null,
+        stage_name: null,
+        grid_width: null,
+        grid_length: null,
+        stage_data: null,
+        is_active: '1',
+        is_delete: '0',
+        create_by: null,
+        create_time: null,
+        update_by: null,
+        update_time: null
+      },
+      showChoice: false,
+      transform: 0,
+      nodeSize: {
+        width: '',
+        heigh: ''
+      }
+    }
+  },
+  mounted() {
+    if (window.location.search) {
+      const query = window.location.search.substring(1).split('&').reduce((map, kv) => {
+        const [key, value] = kv.split('=')
+        map[key] = value
+        return map
+      }, {})
+      this.filename = query.filename
+      const d = window.sessionStorage.getItem(this.filename)
+      if (d) {
+        data = JSON.parse(d)
+      }
+    }
+    this.initLogicFlow(data)
+  },
+  methods: {
+    initLogicFlow(data) {
+      // 引入框选插件
+      LogicFlow.use(SelectionSelect)
+      lf = new LogicFlow({
+        container: this.$refs.diagram,
+        overlapMode: 1,
+        autoWrap: true,
+        metaKeyMultipleSelected: true,
+        multipleSelectKey: 'shift',
+        keyboard: {
+          enabled: true
+        },
+        grid: {
+          visible: false,
+          size: 5
+        },
+        background: {
+          backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")',
+          backgroundRepeat: 'repeat'
+        }
+      })
+      lf.setTheme(
+        {
+          baseEdge: { strokeWidth: 1 },
+          baseNode: { strokeWidth: 1 },
+          nodeText: { overflowMode: 'autoWrap', lineHeight: 1.5 },
+          edgeText: { overflowMode: 'autoWrap', lineHeight: 1.5 }
+        }
+      )
+      // 注册自定义元素
+      registerCustomElement(lf)
+      lf.setDefaultEdgeType('pro-polyline')
+
+      // 为菜单追加选项（必须在 lf.render() 之前设置）
+      lf.extension.menu.addMenuConfig({
+        nodeMenu: [
+          {
+            text: '绑定设备号',
+            callback(node) {
+              console.log(lf.graphModel.getNodeModelById(node.id))
+              lf.graphModel.getNodeModelById(node.id).draggable = false
+            }
+          },
+          {
+            text: '属性',
+            callback(node) {
+              alert(`
+                节点ID：${node.id}
+                节点类型：${node.type}
+                节点坐标：(x: ${node.x}, y: ${node.y})`
+              )
+            }
+          }
+        ],
+        edgeMenu: []
+      })
+      lf.render(data)
+      this.lf = lf
+      this.lf.on('selection:selected,node:click,blank:click,edge:click', () => { // 选择/点击事件
+        this.$nextTick(() => {
+          const { nodes, edges } = this.lf.getSelectElements()
+          this.$set(this, 'activeNodes', nodes)
+          this.activeNodes = nodes
+          this.activeEdges = edges
+          this.$_getProperty()
+        })
+      })
+    },
+    // 获取可以进行设置的属性
+    $_getProperty() {
+      // console.log('选中')
+      let properties = {}
+      const { nodes, edges } = this.lf.getSelectElements()
+      console.log('选中的节点', nodes)
+      // const graphModel = this.lf.graphModel
+      // console.log(graphModel)
+      nodes.forEach(node => {
+        if (node.type === 'html-node') {
+          this.showChoice = true
+        } else {
+          this.showChoice = false
+        }
+        // debugger
+        properties = { ...properties, ...node.properties }
+      })
+      edges.forEach(edge => {
+        properties = { ...properties, ...edge.properties }
+      })
+      this.properties = properties
+      return properties
+    },
+    $_dragInNode(type) {
+      // debugger
+      this.lf.dnd.startDrag({ // 拖拽创建结点
+        type
+      })
+    },
+    $_changeNodeFill(color) {
+      const { nodes } = this.lf.graphModel.getSelectElements()
+      nodes.forEach(({ id }) => {
+        this.lf.setProperties(id, {
+          fill: color
+        })
+      })
+    },
+    $_setStyle(item) {
+      this.activeNodes.forEach(({ id }) => {
+        // console.log(this.lf.graphModel.getNodeModelById(id))
+        console.log(this.lf.getProperties(id))
+        this.lf.setProperties(id, item)
+      })
+      this.activeEdges.forEach(({ id }) => {
+        this.lf.setProperties(id, item)
+      })
+      this.$_getProperty()
+    },
+    $_setZIndex(type) {
+      this.activeNodes.forEach(({ id }) => {
+        this.lf.setElementZIndex(id, type)
+      })
+      this.activeEdges.forEach(({ id }) => {
+        this.lf.setElementZIndex(id, type)
+      })
+    },
+    $_cleanGraph() { // 清空画布
+      data = []
+      lf.render(data)
+    },
+    $_saveGraph() { // 保存数据
+      // debugger
+      // console.log(this.defaultForm)
+      if (this.defaultForm.stage_code === null) {
+        this.$message.error('请选择舞台！')
+      } else {
+        const data = this.lf.getGraphData()
+        this.defaultForm.stage_data = JSON.stringify(data) // 转成string存储
+        crudStage.addNewStage(this.defaultForm).then(res => {
+          // console.log(res)
+          this.$notify({
+            title: '成功',
+            message: '保存成功',
+            type: 'success'
+          })
+        })
+      }
+      // 保存到本地存储
+      // localStorage.setItem('graphData', JSON.stringify(data))
+      // 保存到服务器
+      // console.log(data)
+      // 下载本地文件
+      // this.download(this.filename, JSON.stringify(data))
+    },
+    download(filename, text) { // 下载json文件
+      window.sessionStorage.setItem(filename, text)
+      const element = document.createElement('a')
+      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
+      element.setAttribute('download', filename)
+      element.style.display = 'none'
+      document.body.appendChild(element)
+      element.click()
+      document.body.removeChild(element)
+    },
+    $_changeStage(val) { // 选择舞台的事件
+      this.defaultForm.stage_code = val
+      // 根据code获取数据
+      crudStage.getNewStageDataByCode(val).then(res => {
+        if (res) {
+          data = JSON.parse(res.stage_data)
+          lf.render(data)
+        }
+      })
+    },
+    $_verticalAlign() {
+      // 垂直对齐
+      const { nodes } = this.lf.getSelectElements()
+      let _x = 0 // 计算平均x
+      nodes.forEach(node => {
+        _x += node.x
+        if (node.type === 'html-node') {
+          this.showChoice = true
+        } else {
+          this.showChoice = false
+        }
+      })
+      _x = Math.round(_x / nodes.length)
+      const graphModel = this.lf.graphModel
+      nodes.forEach(node => {
+        graphModel.moveNode(node.id, (_x - node.x), 0, true)
+      })
+    },
+    $_horizontalAlign() {
+      // 水平对齐
+      const { nodes } = this.lf.getSelectElements()
+      let _y = 0 // 计算平均y
+      nodes.forEach(node => {
+        _y += node.y
+        if (node.type === 'html-node') {
+          this.showChoice = true
+        } else {
+          this.showChoice = false
+        }
+      })
+      _y = Math.round(_y / nodes.length)
+      const graphModel = this.lf.graphModel
+      nodes.forEach(node => {
+        graphModel.moveNode(node.id, 0, (_y - node.y), true)
+      })
+    },
+    $_leftAlign() {
+      // 左对齐
+      const { nodes } = this.lf.getSelectElements()
+      let min = 99999 // 最小值
+      const graphModel = this.lf.graphModel
+      nodes.forEach(node => {
+        const nodeModel = graphModel.getNodeModelById(node.id)
+        // 计算原来的X
+        const _x = nodeModel.x - 1 / 2 * nodeModel._width
+        if (_x < min) {
+          min = _x
+        }
+      })
+      // 移动
+      nodes.forEach(node => {
+        const nodeModel = graphModel.getNodeModelById(node.id)
+        const _x = nodeModel.x - 1 / 2 * nodeModel._width
+        console.log('R_x:', _x, ' nodeModel.x', nodeModel.x, ' nodeModel._width:', nodeModel._width)
+        graphModel.moveNode(node.id, min - _x, 0, true)
+      })
+    },
+    $_rightAlign() {
+      // 右对齐
+      const { nodes } = this.lf.getSelectElements()
+      let max = -99999 // 最大值
+      const graphModel = this.lf.graphModel
+      nodes.forEach(node => {
+        const nodeModel = graphModel.getNodeModelById(node.id)
+        // 计算原来的X
+        const _x = nodeModel.x + 1 / 2 * nodeModel._width
+        if (_x > max) {
+          max = _x
+        }
+      })
+      // 移动
+      nodes.forEach(node => {
+        const nodeModel = graphModel.getNodeModelById(node.id)
+        const _x = nodeModel.x + 1 / 2 * nodeModel._width
+        graphModel.moveNode(node.id, max - _x, 0, true)
+      })
+    },
+    $_upAlign() {
+      // 向上对齐
+      const { nodes } = this.lf.getSelectElements()
+      let min = 99999 // 最小值
+      const graphModel = this.lf.graphModel
+      nodes.forEach(node => {
+        const nodeModel = graphModel.getNodeModelById(node.id)
+        // 计算原来的X
+        const _y = nodeModel.y - 1 / 2 * nodeModel._height
+        if (_y < min) {
+          min = _y
+        }
+      })
+      // 移动
+      nodes.forEach(node => {
+        const nodeModel = graphModel.getNodeModelById(node.id)
+        const _y = nodeModel.y - 1 / 2 * nodeModel._height
+        graphModel.moveNode(node.id, 0, min - _y, true)
+      })
+    },
+    $_downAlign() {
+      // 向下
+      const { nodes } = this.lf.getSelectElements()
+      let max = -99999 // 最大值
+      const graphModel = this.lf.graphModel
+      nodes.forEach(node => {
+        const nodeModel = graphModel.getNodeModelById(node.id)
+        // 计算原来的X
+        const _y = nodeModel.y + 1 / 2 * nodeModel._height
+        if (_y > max) {
+          max = _y
+        }
+      })
+      // 移动
+      nodes.forEach(node => {
+        const nodeModel = graphModel.getNodeModelById(node.id)
+        const _y = nodeModel.y + 1 / 2 * nodeModel._height
+        graphModel.moveNode(node.id, 0, max - _y, true)
+      })
+    },
+    $_horizontalDistribution() {
+      const { nodes } = this.lf.getSelectElements()
+      if (nodes.length === 0) {
+        return
+      }
+      // 排序
+      for (let i = 0; i < nodes.length; i++) {
+        for (let j = i + 1; j < nodes.length; j++) {
+          if (nodes[i].x > nodes[j].x) {
+            const tempX = nodes[i]
+            nodes[i] = nodes[j]
+            nodes[j] = tempX
+          }
+        }
+      }
+      // 计算距离 nodes[0].x 与 nodes[length-1].x是起始终点
+      let distance = 0 // 每个组件需要的间距
+      let htDistance = nodes[nodes.length - 1].x - nodes[0].x
+      const graphModel = this.lf.graphModel
+      let nodeModel = ''
+      for (let i = 0; i < nodes.length; i++) {
+        if (i === 0 || i === nodes.length - 1) {
+          nodeModel = graphModel.getNodeModelById(nodes[i].id)
+          // 头尾直接/2扣掉就行
+          htDistance -= (Math.round(nodeModel._width / 2))
+        } else {
+          // 扣掉内部的width
+          nodeModel = graphModel.getNodeModelById(nodes[i].id)
+          htDistance -= nodeModel._width
+        }
+      }
+      distance = Math.round(htDistance / (nodes.length - 1))
+      // 挪动
+      for (let i = 1; i < nodes.length - 1; i++) {
+        // 本个的左边和上一个右边的距离
+        // 计算上一个的右边
+        nodeModel = graphModel.getNodeModelById(nodes[i - 1].id)
+        const frontX = nodeModel.x + Math.round(1 / 2 * nodeModel._width)
+        // 计算本个的左边
+        nodeModel = graphModel.getNodeModelById(nodes[i].id)
+        const backX = nodeModel.x - Math.round(1 / 2 * nodeModel._width)
+        // 计算二者距离
+        const frontToBackDistance = backX - frontX
+        // 挪动 此时nodeModel是本个的id的
+        graphModel.moveNode(nodes[i].id, distance - frontToBackDistance, 0, true)
+      }
+    },
+    $_verticalDistribution() {
+      const { nodes } = this.lf.getSelectElements()
+      if (nodes.length === 0) {
+        return
+      }
+      // 排序
+      for (let i = 0; i < nodes.length; i++) {
+        for (let j = i + 1; j < nodes.length; j++) {
+          if (nodes[i].y > nodes[j].y) {
+            const tempY = nodes[i]
+            nodes[i] = nodes[j]
+            nodes[j] = tempY
+          }
+        }
+      }
+      // 计算距离 nodes[0].y 与 nodes[length-1].y是起始终点
+      let distance = 0 // 每个组件需要的间距
+      let htDistance = nodes[nodes.length - 1].y - nodes[0].y
+      const graphModel = this.lf.graphModel
+      let nodeModel = ''
+      for (let i = 0; i < nodes.length; i++) {
+        if (i === 0 || i === nodes.length - 1) {
+          nodeModel = graphModel.getNodeModelById(nodes[i].id)
+          // 头尾直接/2扣掉就行
+          htDistance -= (Math.round(nodeModel._height / 2))
+        } else {
+          // 扣掉内部的width
+          nodeModel = graphModel.getNodeModelById(nodes[i].id)
+          htDistance -= nodeModel._height
+        }
+      }
+      distance = Math.round(htDistance / (nodes.length - 1))
+      // 挪动
+      for (let i = 1; i < nodes.length - 1; i++) {
+        // 本个的左边和上一个右边的距离
+        // 计算上一个的右边
+        nodeModel = graphModel.getNodeModelById(nodes[i - 1].id)
+        const frontY = nodeModel.y + Math.round(1 / 2 * nodeModel._height)
+        // 计算本个的左边
+        nodeModel = graphModel.getNodeModelById(nodes[i].id)
+        const backY = nodeModel.y - Math.round(1 / 2 * nodeModel._height)
+        // 计算二者距离
+        const frontToBackDistance = backY - frontY
+        // 挪动 此时nodeModel是本个的id的
+        graphModel.moveNode(nodes[i].id, 0, distance - frontToBackDistance, true)
+      }
+    },
+    $_lock() {
+      //
+      const { nodes } = this.lf.getSelectElements()
+      const graphModel = this.lf.graphModel
+      nodes.forEach(node => {
+        const nodeModel = graphModel.getNodeModelById(node.id)
+        console.log(nodeModel)
+        if (nodeModel.draggable) {
+          // nodeModel.draggable = false
+          this.lf.setProperties(node.id, {
+            isLock: true
+          })
+        }
+      })
+    },
+    $_unlock() {
+      //
+      const { nodes } = this.lf.getSelectElements()
+      const graphModel = this.lf.graphModel
+      nodes.forEach(node => {
+        const nodeModel = graphModel.getNodeModelById(node.id)
+        if (!nodeModel.draggable) {
+          // nodeModel.draggable = true
+          this.lf.setProperties(node.id, {
+            isLock: false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.diagram {
+  width: 100%;
+  height: 100%;
+}
+.diagram * {
+  box-sizing: border-box;
+}
+.diagram-toolbar {
+  position: absolute;
+  top: 0;
+  left: 200px;
+  height: 40px;
+  /*width: 310px;*/
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e5e5e5;
+  z-index: 10;
+  background: #e5e5e5;
+}
+.diagram-main {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+.diagram-sidebar {
+  width: 185px;
+  height: calc(100% - 40px);
+  border-right: 1px solid #dadce0;
+  padding: 10px;
+}
+.diagram-panel {
+  width: 300px;
+  background: #fff;
+  height: calc(100% - 40px);
+  position: absolute;
+  right: 0px;
+  top: 40px;
+  border-left: 1px solid #dadce0;
+}
+.diagram-container {
+  flex: 1;
+}
+/* 由于背景图和gird不对齐，需要css处理一下 */
+.diagram /deep/ .lf-background {
+  left: -9px;
+}
+.diagram-wrapper {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+.lf-diagram {
+  box-shadow: 0px 0px 4px #838284;
+  width: 100%;
+  height: 100%;
+}
+::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+  background: white;
+  border-left: 1px solid #e8e8e8;
+}
+::-webkit-scrollbar-thumb {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #fff;
+  border-radius: 6px;
+  background: #c9c9c9;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #b5b5b5;
+}
+</style>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/DiagramSidebar.vue b/nladmin-ui/src/views/system/logicflow/editor/components/DiagramSidebar.vue
new file mode 100644
index 000000000..75eb62085
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/DiagramSidebar.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="diagram-sidebar">
+    <div>
+      <h1 class="node-category-title">General</h1>
+      <div class="node-category">
+        <div class="node-item" @mousedown="dragInNode('pro-circle')">
+          <icon-circle class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('pro-rect')">
+          <icon-rect class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('rect-radius')">
+          <icon-rect-radius class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('triangle')">
+          <icon-triangle class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('pro-ellipse')">
+          <icon-ellipse class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('pro-diamond')">
+          <icon-diamond class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('cylinde')">
+          <icon-cylinde class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('actor')">
+          <icon-actor class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('parallelogram')">
+          <icon-parallelogram class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('pro-text')">
+          <icon-text class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('left-arrow')">
+          <icon-left-arrow class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('right-arrow')">
+          <icon-right-arrow class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('horizontal-arrow')">
+          <icon-horizontal-arrow class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('up-arrow')">
+          <icon-up-arrow class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('down-arrow')">
+          <icon-down-arrow class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('vertical-arrow')">
+          <icon-vertical-arrow class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('pentagon')">
+          <icon-pentagon class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('hexagon')">
+          <icon-hexagon class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('septagon')">
+          <icon-septagon class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('heptagon')">
+          <icon-heptagon class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('trapezoid')">
+          <icon-trapezoid class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('cross')">
+          <icon-cross class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('minus')">
+          <icon-minus class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('times')">
+          <icon-times class="svg-node" />
+        </div>
+        <div class="node-item" @mousedown="dragInNode('divide')">
+          <icon-divide class="svg-node" />
+        </div>
+      </div>
+    </div>
+    <div>
+      <h1 class="node-category-title">设备图标</h1>
+      <el-tooltip class="item" effect="dark" content="选择所需的设备图标" placement="top">
+        <div class="image-node image-setting" @mousedown="dragInNode('html-node')" />
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+
+<script>
+import IconCircle from './icon/Circle.vue'
+import IconRect from './icon/Rect.vue'
+import IconRectRadius from './icon/RectRadius.vue'
+import IconActor from './icon/Actor.vue'
+import IconCylinde from './icon/Cylinde.vue'
+import IconDiamond from './icon/Diamond.vue'
+import IconEllipse from './icon/Ellipse.vue'
+import IconParallelogram from './icon/Parallelogram.vue'
+import IconText from './icon/Text.vue'
+import IconTriangle from './icon/Triangle.vue'
+import IconLeftArrow from './icon/LeftArrow.vue'
+import IconRightArrow from './icon/RightArrow.vue'
+import IconHorizontalArrow from './icon/HorizontalArrow.vue'
+import IconUpArrow from './icon/UpArrow.vue'
+import IconDownArrow from './icon/DownArrow.vue'
+import IconVerticalArrow from './icon/VerticalArrow.vue'
+import IconPentagon from './icon/Pentagon.vue'
+import IconHexagon from './icon/Hexagon.vue'
+import IconSeptagon from './icon/Septagon.vue'
+import IconHeptagon from './icon/Heptagon.vue'
+import IconTrapezoid from './icon/Trapezoid.vue'
+import IconCross from './icon/Cross.vue'
+import IconMinus from './icon/Minus.vue'
+import IconTimes from './icon/Times.vue'
+import IconDivide from './icon/Divide.vue'
+
+export default {
+  name: 'DiagramSidebar',
+  components: {
+    IconCircle,
+    IconRect,
+    IconRectRadius,
+    IconActor,
+    IconCylinde,
+    IconDiamond,
+    IconEllipse,
+    IconParallelogram,
+    IconText,
+    IconTriangle,
+    IconRightArrow,
+    IconLeftArrow,
+    IconHorizontalArrow,
+    IconUpArrow,
+    IconDownArrow,
+    IconVerticalArrow,
+    IconPentagon,
+    IconHexagon,
+    IconSeptagon,
+    IconHeptagon,
+    IconTrapezoid,
+    IconCross,
+    IconMinus,
+    IconTimes,
+    IconDivide
+  },
+  methods: {
+    dragInNode(type) {
+      this.$emit('dragInNode', type)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.diagram-sidebar {
+  user-select: none;
+}
+.node-category-title {
+  margin: 0 0 10px 0;
+  font-size: 14px;
+  display: block;
+  border-bottom: 1px solid #e5e5e5;
+  line-height: 30px;
+}
+.node-item {
+  width: 35px;
+  height: 35px;
+  margin-right: 5px;
+  display: inline-block;
+}
+.node-category {
+  border-bottom: 1px solid #e5e5e5;
+}
+.svg-node {
+  left: 1px;
+  top: 1px;
+  width: 32px;
+  height: 30px;
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+.image-node, .icon-node {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  margin: 10px;
+  cursor: pointer;
+}
+.image-setting {
+  background: url('https://dpubstatic.udache.com/static/dpubimg/UzI4AFUcfO/setting.png');
+  background-size: cover;
+}
+</style>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/DiagramToolbar.vue b/nladmin-ui/src/views/system/logicflow/editor/components/DiagramToolbar.vue
new file mode 100644
index 000000000..42d0f9821
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/DiagramToolbar.vue
@@ -0,0 +1,251 @@
+<template>
+  <div style="padding: 5px">
+    <div class="toolbar-item" :class="{'selection-active': selectionOpened}" @click="$_selectionSelect()">
+      <area-select size="18" />
+    </div>
+    <div class="toolbar-item" @click="$_zoomIn()">
+      <zoom-in size="18" />
+    </div>
+    <div class="toolbar-item" @click="$_zoomOut()">
+      <zoom-out size="18" />
+    </div>
+    <div
+      class="toolbar-item"
+      :class="{'disabled': !undoAble}"
+      @click="$_undo()"
+    >
+      <step-back size="18" />
+    </div>
+    <div
+      class="toolbar-item"
+      :class="{'disabled': !redoAble}"
+      @click="$_redo()"
+    >
+      <step-foward size="18" />
+    </div>
+    <div style="margin-right: 5px">
+      <el-button size="mini" type="primary" @click="$_lock">锁定</el-button>
+    </div>
+    <div style="margin-right: 5px">
+      <el-button size="mini" type="primary" @click="$_unlock">解锁</el-button>
+    </div>
+    <div style="margin-right: 5px">
+      <el-button size="mini" type="primary" @click="$_verticalAlign">垂直居中</el-button>
+    </div>
+    <div style="margin-right: 5px">
+      <el-button size="mini" type="primary" @click="$_horizontalAlign">水平居中</el-button>
+    </div>
+    <div style="margin-right: 5px">
+      <el-button size="mini" type="primary" @click="$_leftAlign">向左对齐</el-button>
+    </div>
+    <div style="margin-right: 5px">
+      <el-button size="mini" type="primary" @click="$_rightAlign">向右对齐</el-button>
+    </div>
+    <div style="margin-right: 5px">
+      <el-button size="mini" type="primary" @click="$_upAlign">向上对齐</el-button>
+    </div>
+    <div style="margin-right: 5px">
+      <el-button size="mini" type="primary" @click="$_downAlign">向下对齐</el-button>
+    </div>
+    <div style="margin-right: 5px">
+      <el-button size="mini" type="primary" @click="$_horizontalDistribution">水平分布</el-button>
+    </div>
+    <div style="margin-right: 5px">
+      <el-button size="mini" type="primary" @click="$_verticalDistribution">垂直分布</el-button>
+    </div>
+    <div style="margin-right: 5px">
+      <el-button size="mini" type="primary" @click="$_cleanGraph">清空画布</el-button>
+    </div>
+    <div style="margin-right: 5px">
+      <el-button size="mini" type="primary" @click="$_saveGraph">保存</el-button>
+    </div>
+    <div>
+      <el-select v-model="linetype" size="mini" @change="$_changeLineType" style="width: 80px">
+        <el-option
+          v-for="item in lineOptions"
+          :key="item.value"
+          :value="item.value"
+          :label="item.label"
+        />
+      </el-select>
+    </div>
+    <div>
+      <span style="font-size: 14px; margin-left: 5px">舞台:</span>
+      <el-select v-model="stage_code" placeholder="请选择" @change="$_changeStage">
+        <el-option
+          v-for="item in stageSelectList"
+          :key="item.stage_code"
+          :label="item.stage_name"
+          :value="item.stage_code"
+        />
+      </el-select>
+    </div>
+  </div>
+</template>
+
+<script>
+import ZoomIn from './icon/ZoomIn.vue'
+import ZoomOut from './icon/ZoomOut.vue'
+import StepBack from './icon/StepBack.vue'
+import StepFoward from './icon/StepFoward.vue'
+import AreaSelect from './icon/AreaSelect.vue'
+import crudStage from '@/api/logicflow/stage'
+
+export default {
+  components: {
+    ZoomIn,
+    ZoomOut,
+    StepBack,
+    StepFoward,
+    AreaSelect
+    // SketchPicker: Sketch
+  },
+  props: {
+    lf: Object,
+    activeEdges: Array,
+    fillColor: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      selectionOpened: true,
+      undoAble: false,
+      redoAble: false,
+      colors: '#345678',
+      linetype: 'pro-polyline',
+      lineOptions: [
+        {
+          value: 'pro-polyline',
+          label: '折线'
+        },
+        {
+          value: 'pro-line',
+          label: '直线'
+        },
+        {
+          value: 'pro-bezier',
+          label: '曲线'
+        }
+      ],
+      stage_code: '',
+      stageSelectList: []
+    }
+  },
+  created() {
+    if (this.selectionOpened) {
+      this.lf.extension.selectionSelect.openSelectionSelect()
+    }
+  },
+  mounted() {
+    this.initStageList()
+    this.$props.lf.on('history:change', ({ data: { undoAble, redoAble }}) => {
+      this.$data.redoAble = redoAble
+      this.$data.undoAble = undoAble
+    })
+  },
+  methods: {
+    initStageList() {
+      // 初始化舞台下拉框
+      crudStage.selectStageList().then(data => {
+        this.stageSelectList = data
+      })
+    },
+    $_changeFillColor(val) {
+      this.$emit('changeNodeFillColor', val.hex)
+    },
+    $_cleanGraph() {
+      this.$emit('cleanGraph')
+    },
+    $_saveGraph() { // 保存，转成js
+      this.$emit('saveGraph')
+    },
+    $_zoomIn() {
+      this.$props.lf.zoom(true)
+    },
+    $_zoomOut() {
+      this.$props.lf.zoom(false)
+    },
+    $_undo() {
+      if (this.$data.undoAble) {
+        this.$props.lf.undo()
+      }
+    },
+    $_redo() {
+      if (this.$data.redoAble) {
+        this.$props.lf.redo()
+      }
+    },
+    $_selectionSelect() {
+      this.selectionOpened = !this.selectionOpened
+      if (this.selectionOpened) {
+        this.lf.extension.selectionSelect.openSelectionSelect()
+      } else {
+        this.lf.extension.selectionSelect.closeSelectionSelect()
+      }
+    },
+    $_changeLineType(value) {
+      const { lf, activeEdges } = this.$props
+      const { graphModel } = lf
+      lf.setDefaultEdgeType(value)
+      if (activeEdges && activeEdges.length > 0) {
+        activeEdges.forEach(edge => {
+          graphModel.changeEdgeType(edge.id, value)
+        })
+      }
+    },
+    $_lock() {
+      this.$emit('lock')
+    },
+    $_unlock() {
+      this.$emit('unlock')
+    },
+    $_changeStage(val) { // 选择舞台
+      this.$emit('changeStage', val)
+    },
+    $_verticalAlign() { // 垂直对齐
+      this.$emit('verticalAlign')
+    },
+    $_horizontalAlign() { // 水平对齐
+      this.$emit('horizontalAlign')
+    },
+    $_leftAlign() { // 左对齐
+      this.$emit('leftAlign')
+    },
+    $_rightAlign() { // 右对齐
+      this.$emit('rightAlign')
+    },
+    $_upAlign() {
+      this.$emit('upAlign')
+    },
+    $_downAlign() {
+      this.$emit('downAlign')
+    },
+    $_horizontalDistribution() {
+      this.$emit('horizontalDistribution')
+    },
+    $_verticalDistribution() {
+      this.$emit('verticalDistribution')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.toolbar-item {
+  width: 18px;
+  height: 18px;
+  float: left;
+  margin: 12px 4px;
+  cursor: pointer;
+}
+.toolbar-color-picker {
+  width: 24px;
+  height: 24px;
+  margin: 8px 4px;
+}
+.selection-active {
+  background: #33a3dc;
+}
+</style>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/PropertyPanel.vue b/nladmin-ui/src/views/system/logicflow/editor/components/PropertyPanel.vue
new file mode 100644
index 000000000..b59e078e4
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/PropertyPanel.vue
@@ -0,0 +1,375 @@
+<template>
+  <div class="diagram-panel">
+    <div class="setting-block">
+      <div>快捷样式</div>
+      <div class="short-styles" style="margin-top: 5px">
+        <div
+          v-for="(item, index) in shortStyles"
+          :key="index"
+          :style="{ 'backgroundColor': item.backgroundColor, 'borderColor': item.borderColor, 'borderWidth': item.borderWidth }"
+          @click="setStyle(item)"
+        />
+      </div>
+    </div>
+    <div class="setting-block">
+      <div class="setting-item">
+        <span>背景色</span>
+        <el-popover
+          placement="top-start"
+          title="填充样式"
+          width="220"
+          trigger="click"
+        >
+          <sketch-picker :value="style.backgroundColor" @input="(c) => $_changeColorProperty(c, 'backgroundColor')" />
+          <div slot="reference" class="border-color" :style="{'backgroundColor': style.backgroundColor}" />
+        </el-popover>
+        <span>渐变色</span>
+        <el-popover
+          placement="top-start"
+          title="填充样式"
+          width="220"
+          trigger="click"
+        >
+          <sketch-picker :value="style.gradientColor" @input="(c) => $_changeColorProperty(c, 'gradientColor')" />
+          <div slot="reference" class="border-color" :style="{'backgroundColor': style.gradientColor}" />
+        </el-popover>
+      </div>
+      <div class="setting-item">
+        <span>线条样式</span>
+        <el-select v-model="style.borderStyle" size="small" @change="$_selectBorder">
+          <el-option value="hidden" label="不显示" />
+          <el-option
+            v-for="(border, index) in borderStyles"
+            :key="index"
+            :value="border.value"
+          >
+            <div class="border-style" :style="{ 'borderBottomStyle': border.value}" />
+          </el-option>
+        </el-select>
+      </div>
+      <div class="setting-item">
+        <span>线条颜色</span>
+        <el-popover
+          placement="top-start"
+          title="填充样式"
+          width="220"
+          trigger="click"
+        >
+          <sketch-picker :value="style.borderColor" @input="(c) => $_changeColorProperty(c, 'borderColor')" />
+          <div slot="reference" class="border-color" :style="{'backgroundColor': style.borderColor}" />
+        </el-popover>
+      </div>
+      <div class="setting-item">
+        <span>线条宽度</span>
+        <el-select v-model="style.borderWidth" @change="$_changeBorderWidth">
+          <el-option
+            v-for="item in borderWidthOptions"
+            :key="item"
+            :label="`${item}px`"
+            :value="item"
+          />
+        </el-select>
+      </div>
+      <div class="setting-item">
+        <span>文本颜色</span>
+        <el-popover
+          placement="top-start"
+          title="填充样式"
+          width="220"
+          trigger="click"
+        >
+          <sketch-picker :value="style.fontColor" @input="(c) => $_changeColorProperty(c, 'fontColor')" />
+          <div slot="reference" class="border-color" :style="{'backgroundColor': style.fontColor}" />
+        </el-popover>
+      </div>
+      <div class="setting-item">
+        <span>文本大小</span>
+        <el-input-number
+          v-model="style.fontSize"
+          controls-position="right"
+          size="mini"
+          :min="12"
+          :max="30"
+          @change="$_changeFontSize"
+        />
+        <span>px</span>
+      </div>
+      <div class="setting-item">
+        <span>文本字体</span>
+        <el-select v-model="style.fontFamily" size="small" @change="$_changeFontFamily">
+          <el-option
+            v-for="(fontFamily, index) in fontFamilies"
+            :key="index"
+            :value="fontFamily.value"
+          />
+        </el-select>
+      </div>
+      <div class="setting-item">
+        <span>文本行高</span>
+        <el-select v-model="style.lineHeight" size="small" @change="$_changeLineHeight">
+          <el-option
+            v-for="(item, index) in lineHeightOptions"
+            :key="index"
+            :label="`${item}`"
+            :value="item"
+          />
+        </el-select>
+      </div>
+      <div class="setting-item">
+        <span>文本对齐</span>
+        <el-radio-group v-model="style.textAlign" size="small" @change="$_changeTextAlign">
+          <el-radio-button label="left">左对齐</el-radio-button>
+          <el-radio-button label="center">居中</el-radio-button>
+          <el-radio-button label="right">右对齐</el-radio-button>
+        </el-radio-group>
+      </div>
+      <div class="setting-item">
+        <span>文本样式</span>
+        <el-button size="small" @click="$_changeFontWeight">B</el-button>
+        <el-button size="small" @click="$_changeTextDecoration">U</el-button>
+        <el-button size="small" @click="$_changeFontStyle">I</el-button>
+      </div>
+      <div class="setting-item">
+        <el-button size="small" @click="$emit('setZIndex', 'top')">置为顶部</el-button>
+        <el-button size="small" @click="$emit('setZIndex', 'bottom')">置为底部</el-button>
+      </div>
+      <div class="setting-item">
+        <span>设备绑定</span>
+        <el-input v-model="style.device" placeholder="输入设备号" size="small" @change="$_changeDevice" />
+      </div>
+      <div class="setting-item">
+        <span>旋转角度</span>
+        <el-input-number
+          v-model="style.transform"
+          controls-position="right"
+          size="mini"
+          :min="0"
+          :max="360"
+          @change="$_changeTransform"
+        />
+        <span>度</span>
+      </div>
+      <div v-if="showChoice" class="setting-item">
+        <span>设备选择</span>
+        <el-select
+          v-model="style.imageUrl"
+          size="mini"
+          @change="$_changeImageUrl"
+        >
+          <el-option
+            v-for="item in imageUrlOptions"
+            :key="item.image_uuid"
+            :value="item.image_code"
+            :label="item.image_name"
+          />
+        </el-select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Sketch } from 'vue-color'
+import { shortStyles, borderStyles, fontFamilies } from '../constant'
+import crudStageImage from '@/api/logicflow/stageImage'
+
+export default {
+  components: {
+    SketchPicker: Sketch
+  },
+  props: {
+    elementsStyle: Object,
+    onlyEdge: Boolean, // 是否是只设置边的属性，当只设置边的属性时，隐藏快捷样式和背景色设置
+    showChoice: Boolean
+  },
+  data() {
+    return {
+      shortStyles,
+      borderStyles,
+      fontFamilies,
+      style: {
+        backgroundColor: '', // 填充色
+        gradientColor: '', // 渐变色
+        borderType: 0, // 线条类型
+        borderColor: '', // 填充颜色
+        borderWidth: 1, // 线条宽度
+        borderStyle: '', // 线条类型
+        fontSize: 12, // 文本大小
+        fontColor: '', // 文本颜色
+        fontWeight: '', // 文本加粗
+        fontFamily: '', // 文本样式
+        lineHeight: '', // 行高
+        textAlign: '', // 对齐
+        device: '', // 设备号
+        transform: 0, // 旋转角度
+        imageUrl: ''
+      },
+      borderWidthOptions: Array(11).fill().map((_, i) => i),
+      SketchPicker: Sketch,
+      fontWeight: '', // 文本加粗
+      lineHeightOptions: Array(5).fill(1).map((_, i) => _ + i * 0.5),
+      // imageUrl: '',
+      imageUrlOptions: []
+    }
+  },
+  watch: {
+    elementsStyle: {
+      handler(val) {
+        this.style = { ...this.style, ...val }
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.initStageIconList()
+  },
+  methods: {
+    initStageIconList() { // 初始化图标数据
+      // 初始化舞台下拉框
+      crudStageImage.selectStageIconList().then(data => {
+        // console.log('data', data)
+        // 赋值
+        this.imageUrlOptions = data
+      })
+    },
+    setStyle(item) {
+      this.$emit('setStyle', item)
+    },
+    $_selectBorder(val) {
+      this.$emit('setStyle', {
+        borderStyle: val
+      })
+    },
+    $_changeColorProperty({ rgba: { r, g, b, a }}, type) {
+      const color = `rgba(${r},${g},${b},${a})`
+      this[type] = color
+      this.$emit('setStyle', {
+        [type]: color
+      })
+    },
+    $_changeFontSize(val) {
+      this.$emit('setStyle', {
+        fontSize: val
+      })
+    },
+    $_changeTransform(val) {
+      this.$emit('setStyle', {
+        transform: val
+      })
+    },
+    $_changeBorderWidth(val) {
+      this.$emit('setStyle', {
+        borderWidth: val
+      })
+    },
+    $_changeFontFamily(val) {
+      this.$emit('setStyle', {
+        fontFamily: val
+      })
+    },
+    $_changeLineHeight(val) {
+      this.$emit('setStyle', {
+        lineHeight: val
+      })
+    },
+    $_changeImageUrl(val) {
+      this.$emit('setStyle', {
+        imageUrl: val
+      })
+    },
+    $_changeFontWeight() {
+      if (this.style.fontWeight === 'bold') {
+        this.$emit('setStyle', {
+          fontWeight: 'normal'
+        })
+      } else {
+        this.$emit('setStyle', {
+          fontWeight: 'bold'
+        })
+      }
+    },
+    $_changeTextDecoration() {
+      if (this.style.textDecoration === 'underline') {
+        this.$emit('setStyle', {
+          textDecoration: 'none'
+        })
+      } else {
+        this.$emit('setStyle', {
+          textDecoration: 'underline'
+        })
+      }
+    },
+    $_changeFontStyle() {
+      if (this.style.fontStyle === 'italic') {
+        this.$emit('setStyle', {
+          fontStyle: 'normal'
+        })
+      } else {
+        this.$emit('setStyle', {
+          fontStyle: 'italic'
+        })
+      }
+    },
+    $_changeTextAlign(val) {
+      this.$emit('setStyle', {
+        textAlign: val
+      })
+    },
+    $_changeDevice(val) {
+      this.$emit('setStyle', {
+        device: val
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.diagram-panel {
+  padding: 20px;
+}
+.short-styles {
+  width: 240px;
+}
+.short-styles > div {
+  width: 20px;
+  height: 20px;
+  margin: 0 10px 5px 0;
+  box-sizing: border-box;
+  float: left;
+  border: 1px solid #fff;
+  cursor: pointer;
+}
+.border-style {
+  width: 150px;
+  height: 0px;
+  margin-top: 18px;
+  border-bottom-width: 1px;
+  border-bottom-color: black;
+}
+.setting-block {
+  overflow: hidden;
+}
+.setting-item {
+  line-height: 12px;
+  font-size: 12px;
+  display: flex;
+  vertical-align: middle;
+  align-items: center;
+  margin-top: 10px;
+}
+.setting-item > span {
+  width: 50px;
+  margin-right: 10px;
+  text-align: right;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+.border-color {
+  width: 40px;
+  height: 30px;
+  display: inline-block;
+  border: 1px solid #eaeaeb;
+}
+
+</style>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Actor.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Actor.vue
new file mode 100644
index 000000000..dc3818d88
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Actor.vue
@@ -0,0 +1,38 @@
+<template>
+  <svg>
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <ellipse
+        cx="15.75"
+        cy="4.73"
+        rx="3.375"
+        ry="3.375"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+      <path
+        d="M 15.75 8.1 L 15.75 19.35 M 15.75 10.35 L 9 10.35 M 15.75 10.35 L 22.5 10.35 M 15.75 19.35 L 9 28.35 M 15.75 19.35 L 22.5 28.35"
+        fill="none"
+        stroke="white"
+        stroke-width="9.3"
+        stroke-miterlimit="10"
+        pointer-events="stroke"
+        visibility="hidden"
+      />
+      <path
+        d="M 15.75 8.1 L 15.75 19.35 M 15.75 10.35 L 9 10.35 M 15.75 10.35 L 22.5 10.35 M 15.75 19.35 L 9 28.35 M 15.75 19.35 L 22.5 28.35"
+        fill="none"
+        stroke="#000000"
+        stroke-width="1.3"
+        stroke-miterlimit="10"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/AreaSelect.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/AreaSelect.vue
new file mode 100644
index 000000000..edb8929ff
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/AreaSelect.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M933.647059 0h-210.82353v90.352941h180.705883a30.117647 30.117647 0 0 1 30.117647 30.117647v180.705883h90.352941V90.352941a90.352941 90.352941 0 0 0-90.352941-90.352941zM361.411765 0h301.17647v90.352941H361.411765zM933.647059 361.411765h90.352941v301.17647h-90.352941zM361.411765 933.647059h301.17647v90.352941H361.411765zM0 361.411765h90.352941v301.17647H0zM90.352941 903.529412v-180.705883H0v210.82353a90.352941 90.352941 0 0 0 90.352941 90.352941h210.82353v-90.352941H120.470588a30.117647 30.117647 0 0 1-30.117647-30.117647zM933.647059 903.529412a30.117647 30.117647 0 0 1-30.117647 30.117647h-180.705883v90.352941h210.82353a90.352941 90.352941 0 0 0 90.352941-90.352941v-210.82353h-90.352941zM0 90.352941v210.82353h90.352941V120.470588a30.117647 30.117647 0 0 1 30.117647-30.117647h180.705883V0H90.352941a90.352941 90.352941 0 0 0-90.352941 90.352941z" p-id="1890" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Blod.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Blod.vue
new file mode 100644
index 000000000..3444a373b
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Blod.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M426.857143 869.142857q42.285714 18.285714 80 18.285714 214.857143 0 214.857143-191.428571 0-65.142857-23.428572-102.857143-15.428571-25.142857-35.142857-42.285714t-38.571428-26.571429-46-14.285714-48-6-54-1.142857q-41.714286 0-57.714286 5.714286 0 30.285714-0.285714 90.857142t-0.285715 90.285715q0 4.571429-0.571428 38.571428t-0.285715 55.142857 2.571429 47.714286 6.857143 38z m-8-426.285714q24 4 62.285714 4 46.857143 0 81.714286-7.428572t62.857143-25.428571 42.571428-51.142857 14.571429-81.142857q0-40-16.571429-70t-45.142857-46.857143T559.428571 140t-70.857142-8q-28.571429 0-74.285715 7.428571 0 28.571429 2.285715 86.285715t2.285714 86.857143q0 15.428571-0.285714 45.714285t-0.285715 45.142857q0 26.285714 0.571429 39.428572z m-309.142857 508l1.142857-53.714286q8.571429-2.285714 48.571428-9.142857t60.571429-15.428571q4-6.857143 7.142857-15.428572t4.857143-19.142857 3.142857-18.571429 1.714286-21.428571 0.285714-19.428571V741.142857q0-561.142857-12.571428-585.714286-2.285714-4.571429-12.571429-8.285714t-25.428571-6.285714-28.285715-4-27.714285-2.571429-17.428572-1.714285l-2.285714-47.428572q56-1.142857 194.285714-6.571428t213.142857-5.428572q13.142857 0 39.142857 0.285714t38.571429 0.285715q40 0 78 7.428571t73.428571 24 61.714286 40.571429 42.285714 59.714285 16 78.571429q0 29.714286-9.428571 54.571429t-22.285714 41.142857T798.857143 412.571429t-41.714286 25.714285-48 22.857143q88 20 146.571429 76.571429t58.571428 141.714285q0 57.142857-20 102.571429t-53.428571 74.571429-78.857143 48.857142T668.571429 933.142857t-100.571429 8q-25.142857 0-75.428571-1.714286t-75.428572-1.714285q-60.571429 0-175.428571 6.285714t-132 6.857143z" p-id="8191" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Circle.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Circle.vue
new file mode 100644
index 000000000..b8355a4a8
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Circle.vue
@@ -0,0 +1,31 @@
+<template>
+  <svg>
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <ellipse
+        cx="15.98"
+        cy="14.96"
+        rx="13.600000000000001"
+        ry="13.600000000000001"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+<script>
+export default {
+}
+</script>
+<style scoped>
+.svg-node {
+  left: 1px;
+  top: 1px;
+  width: 32px;
+  height: 30px;
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/ColorFill.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/ColorFill.vue
new file mode 100644
index 000000000..1c12d2a92
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/ColorFill.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path fill="currentColor" d="M810.666667 618.666667s-85.333333 93.866667-85.333334 149.333333c0 46.933333 38.4 85.333333 85.333334 85.333333s85.333333-38.4 85.333333-85.333333c0-55.466667-85.333333-149.333333-85.333333-149.333333M221.866667 554.666667L426.666667 349.866667l204.8 204.8m76.8-46.933334L324.266667 128 264.533333 187.733333l102.4 102.4-221.866666 217.6c-25.6 25.6-25.6 64 0 89.6l234.666666 234.666667c25.6 25.6 64 25.6 89.6 0l234.666667-234.666667c25.6-21.333333 29.866667-64 4.266667-89.6z" p-id="4284" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/ColorText.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/ColorText.vue
new file mode 100644
index 000000000..8aa7da1b0
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/ColorText.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M512 725.333333a128 128 0 1 1 0 256 128 128 0 0 1 0-256zM469.333333 85.333333L234.666667 682.666667h96l47.786666-128h266.666667l47.786667 128h96L554.666667 85.333333h-85.333334z m-58.88 384L512 199.253333 613.546667 469.333333H410.453333z" p-id="4479" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Cross.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Cross.vue
new file mode 100644
index 000000000..ba015272d
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Cross.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 加号 -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,9 9,9 9,0 18,0 18,9 27,9 27,18 18,18 18,27 9,27 9,18 0,18"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Cylinde.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Cylinde.vue
new file mode 100644
index 000000000..c32f508c3
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Cylinde.vue
@@ -0,0 +1,27 @@
+<template>
+  <svg>
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <path
+        d="M 5.78 6.46 C 5.78 3.64 10.35 1.36 15.98 1.36 C 18.69 1.36 21.28 1.9 23.19 2.85 C 25.11 3.81 26.18 5.11 26.18 6.46 L 26.18 23.46 C 26.18 26.28 21.61 28.56 15.98 28.56 C 10.35 28.56 5.78 26.28 5.78 23.46 Z"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        stroke-miterlimit="10"
+        pointer-events="all"
+      />
+      <path
+        d="M 26.18 6.46 C 26.18 9.28 21.61 11.56 15.98 11.56 C 10.35 11.56 5.78 9.28 5.78 6.46"
+        fill="none"
+        stroke="#000000"
+        stroke-width="1.3"
+        stroke-miterlimit="10"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Diamond.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Diamond.vue
new file mode 100644
index 000000000..ae6e48a3e
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Diamond.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg>
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <path
+        d="M 15.98 1.36 L 29.58 14.96 L 15.98 28.56 L 2.38 14.96 Z"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        stroke-miterlimit="10"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Divide.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Divide.vue
new file mode 100644
index 000000000..32bbd4fb5
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Divide.vue
@@ -0,0 +1,37 @@
+<template>
+  <!-- 除号 -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <circle
+        cx="13.5"
+        cy="4.5"
+        r="3.375"
+        fill="#fff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+      <polygon
+        points="0,10 27,10 27,17 0,17"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+      <circle
+        cx="13.5"
+        cy="22.5"
+        r="3.375"
+        fill="#fff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/DownArrow.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/DownArrow.vue
new file mode 100644
index 000000000..01de6a0e6
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/DownArrow.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="10,0 20,0 20,18 30,18 15,28 0,18 10,18"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Ellipse.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Ellipse.vue
new file mode 100644
index 000000000..e006feeec
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Ellipse.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <ellipse
+        cx="15.84"
+        cy="14.88"
+        rx="14.399999999999999"
+        ry="9.6"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Font.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Font.vue
new file mode 100644
index 000000000..e9a1bb211
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Font.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M450.857143 319.428571l-97.142857 257.142858q18.857143 0 78 1.142857t91.714285 1.142857q10.857143 0 32.571429-1.142857-49.714286-144.571429-105.142857-258.285715zM36.571429 950.857143l1.142857-45.142857q13.142857-4 32-7.142857t32.571428-6 28.285715-8.285715 25.428571-16.571428 17.714286-28.857143l135.428571-352 160-413.714286h73.142857q4.571429 8 6.285715 12l117.142857 274.285714q18.857143 44.571429 60.571428 147.142858t65.142857 156.857142q8.571429 19.428571 33.142858 82.571429t41.142857 96.285714q11.428571 25.714286 20 32.571429 10.857143 8.571429 50.285714 16.857143t48 11.714285q3.428571 21.714286 3.428571 32.571429 0 2.285714-0.285714 7.428571t-0.285714 7.428572q-36 0-108.571429-4.571429t-109.142857-4.571428q-43.428571 0-122.857143 4t-101.714285 4.571428q0-24.571429 2.285714-44.571428l74.857143-16q0.571429 0 7.142857-1.428572t8.857143-2 8.285714-2.571428 8.571429-3.714286 6.285714-4.571429 5.142857-6.285714 1.428571-8q0-9.142857-17.714285-55.142857t-41.142857-101.428571-24-57.142858l-257.142858-1.142857q-14.857143 33.142857-43.714285 111.714286T254.857143 850.857143q0 12.571429 8 21.428571t24.857143 14 27.714285 7.714286 32.571429 4.857143 23.428571 2.285714q0.571429 10.857143 0.571429 33.142857 0 5.142857-1.142857 15.428572-33.142857 0-99.714286-5.714286T171.428571 938.285714q-4.571429 0-15.142857 2.285715t-12.285714 2.285714q-45.714286 8-107.428571 8z" p-id="8338" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Heptagon.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Heptagon.vue
new file mode 100644
index 000000000..1f10cb23d
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Heptagon.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 八边形 -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="19.74,0 28,8.26 28,19.74 19.74,28 8.26,28 0,19.74 0,8.26 8.26,0"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Hexagon.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Hexagon.vue
new file mode 100644
index 000000000..1a9c5136c
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Hexagon.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 六边形 -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="6.16,0 21.84,0 28,14 21.84,28 6.16,28 0,14"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/HorizontalArrow.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/HorizontalArrow.vue
new file mode 100644
index 000000000..640f85cd0
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/HorizontalArrow.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,13.6 9,2.2 9,11.2 18,11.2 18,2.2 27,13.6 18,27.2 18,18.2 9,18.2 9,27.2"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/LeftArrow.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/LeftArrow.vue
new file mode 100644
index 000000000..c62689e2a
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/LeftArrow.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,15 10,0 10,10 30,10 30,20 10,20 10,30"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Line.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Line.vue
new file mode 100644
index 000000000..d4b7141fa
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Line.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M127.389 851.634l724.21-724.21 45.198 45.196-724.211 724.212z" p-id="11226" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Minus.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Minus.vue
new file mode 100644
index 000000000..e8a5c19c7
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Minus.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 减号 -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,9 27,9 27,18 0,18"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Parallelogram.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Parallelogram.vue
new file mode 100644
index 000000000..1929f7297
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Parallelogram.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <path
+        d="M 1.44 22.08 L 6.24 7.68 L 30.24 7.68 L 25.44 22.08 Z"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        stroke-miterlimit="10"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Pentagon.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Pentagon.vue
new file mode 100644
index 000000000..1f41d424d
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Pentagon.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 五边形 -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,10.6 14,0 28,10.6 22.4,28 5.6,28"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Rect.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Rect.vue
new file mode 100644
index 000000000..5a62bb46d
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Rect.vue
@@ -0,0 +1,31 @@
+<template>
+  <svg>
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <rect
+        x="2.38"
+        y="1.36"
+        width="27.2"
+        height="27.2"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+<script>
+export default {
+}
+</script>
+<style scoped>
+.svg-node {
+  left: 1px;
+  top: 1px;
+  width: 32px;
+  height: 30px;
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+</style>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/RectRadius.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/RectRadius.vue
new file mode 100644
index 000000000..ee233aa66
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/RectRadius.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <rect
+        x="2.38"
+        y="1.36"
+        width="27.2"
+        height="27.2"
+        rx="3.16"
+        ry="3.16"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/RightArrow.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/RightArrow.vue
new file mode 100644
index 000000000..509914129
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/RightArrow.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,10 20,10 20,0 30,15 20,30 20,20 0,20"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Septagon.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Septagon.vue
new file mode 100644
index 000000000..af7024203
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Septagon.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 七边形 -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="14,0 25.06,5.6 28,18.06 20.02,28 7.7,28 0,18.06 2.94,5.6"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/StepBack.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/StepBack.vue
new file mode 100644
index 000000000..254da46d0
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/StepBack.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M967.111111 967.111111h-113.777778v-113.777778c0-221.866667-176.355556-398.222222-398.222222-398.222222H113.777778V341.333333h341.333333c284.444444 0 512 227.555556 512 512v113.777778z" fill="#0D1733" p-id="1011" />
+    <path d="M409.6 762.311111L51.2 398.222222 409.6 39.822222l85.333333 79.644445-284.444444 278.755555 284.444444 284.444445z" fill="#0D1733" p-id="1012" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/StepFoward.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/StepFoward.vue
new file mode 100644
index 000000000..cd96b6bfb
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/StepFoward.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M170.666667 967.111111H56.888889v-113.777778c0-284.444444 227.555556-512 512-512h341.333333v113.777778h-341.333333c-221.866667 0-398.222222 176.355556-398.222222 398.222222v113.777778z" fill="#0D1733" p-id="1167" />
+    <path d="M614.4 762.311111L529.066667 682.666667l284.444444-284.444445-284.444444-278.755555L614.4 39.822222 972.8 398.222222z" fill="#0D1733" p-id="1168" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Table.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Table.vue
new file mode 100644
index 000000000..50bdcedab
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Table.vue
@@ -0,0 +1,158 @@
+<template>
+  <svg class="svg-node">
+    <g>
+      <g transform="translate(0.5,0.5)" style="visibility: visible">
+        <path
+          d="M 1.26 9.24 L 1.26 3.78 L 30.66 3.78 L 30.66 9.24"
+          fill="#ffffff"
+          stroke="#000000"
+          stroke-width="1.3"
+          stroke-miterlimit="10"
+          pointer-events="all"
+        />
+        <path
+          d="M 1.26 9.24 L 1.26 25.62 L 30.66 25.62 L 30.66 9.24"
+          fill="none"
+          stroke="white"
+          stroke-width="9.3"
+          stroke-miterlimit="10"
+          pointer-events="stroke"
+          visibility="hidden"
+        />
+        <path
+          d="M 1.26 9.24 L 1.26 25.62 L 30.66 25.62 L 30.66 9.24"
+          fill="none"
+          stroke="#000000"
+          stroke-width="1.3"
+          stroke-miterlimit="10"
+          pointer-events="none"
+        />
+        <path
+          d="M 1.26 9.24 L 30.66 9.24"
+          fill="none"
+          stroke="white"
+          stroke-width="9.3"
+          stroke-miterlimit="10"
+          pointer-events="stroke"
+          visibility="hidden"
+        />
+        <path
+          d="M 1.26 9.24 L 30.66 9.24"
+          fill="none"
+          stroke="#000000"
+          stroke-width="1.3"
+          stroke-miterlimit="10"
+          pointer-events="none"
+        />
+      </g>
+      <g
+        fill="#000000"
+        font-family="Helvetica"
+        text-anchor="middle"
+        font-size="2.52px"
+      >
+        <text x="15.96" y="7.56">List</text>
+      </g>
+      <g transform="translate(0.5,0.5)" style="visibility: visible">
+        <rect
+          x="1.26"
+          y="9.24"
+          width="29.4"
+          height="5.46"
+          fill="none"
+          stroke="white"
+          pointer-events="stroke"
+          visibility="hidden"
+          stroke-width="9"
+        />
+        <rect
+          x="1.26"
+          y="9.24"
+          width="29.4"
+          height="5.46"
+          fill="none"
+          stroke="none"
+          pointer-events="all"
+        />
+      </g>
+      <g style="">
+        <clipPath id="mx-clip-1-9-31-9-0">
+          <rect x="1" y="9" width="31" height="9" />
+        </clipPath>
+        <g
+          fill="#000000"
+          font-family="Helvetica"
+          clip-path="url(https://app.diagrams.net/#mx-clip-1-9-31-9-0)"
+          font-size="2.52px"
+        >
+          <text x="2.52" y="13.02">Item 1</text>
+        </g>
+      </g>
+      <g transform="translate(0.5,0.5)" style="visibility: visible">
+        <rect
+          x="1.26"
+          y="14.7"
+          width="29.4"
+          height="5.46"
+          fill="none"
+          stroke="white"
+          pointer-events="stroke"
+          visibility="hidden"
+          stroke-width="9"
+        />
+        <rect
+          x="1.26"
+          y="14.7"
+          width="29.4"
+          height="5.46"
+          fill="none"
+          stroke="none"
+          pointer-events="all"
+        />
+      </g>
+      <g style="">
+        <clipPath id="mx-clip-1-14-31-9-0">
+          <rect x="1" y="14" width="31" height="9" />
+        </clipPath>
+        <g fill="#000000" font-family="Helvetica" font-size="2.52px">
+          <text x="2.52" y="18.48">Item 2</text>
+        </g>
+      </g>
+      <g transform="translate(0.5,0.5)" style="visibility: visible">
+        <rect
+          x="1.26"
+          y="20.16"
+          width="29.4"
+          height="5.46"
+          fill="none"
+          stroke="white"
+          pointer-events="stroke"
+          visibility="hidden"
+          stroke-width="9"
+        />
+        <rect
+          x="1.26"
+          y="20.16"
+          width="29.4"
+          height="5.46"
+          fill="none"
+          stroke="none"
+          pointer-events="all"
+        />
+      </g>
+      <g style="">
+        <clipPath id="mx-clip-1-20-31-9-0">
+          <rect x="1" y="20" width="31" height="9" />
+        </clipPath>
+        <g fill="#000000" font-family="Helvetica" font-size="2.52px">
+          <text x="2.52" y="23.94">Item 3</text>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Text.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Text.vue
new file mode 100644
index 000000000..c1af1cd52
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Text.vue
@@ -0,0 +1,46 @@
+<template>
+  <svg>
+    <g>
+      <g transform="translate(0.5,0.5)" style="visibility: visible">
+        <rect
+          x="0.98"
+          y="7.84"
+          width="29.4"
+          height="12.74"
+          fill="none"
+          stroke="white"
+          pointer-events="stroke"
+          visibility="hidden"
+          stroke-width="9"
+        />
+        <rect
+          x="0.98"
+          y="7.84"
+          width="29.4"
+          height="12.74"
+          fill="none"
+          stroke="none"
+          pointer-events="all"
+        />
+      </g>
+      <g style="">
+        <clipPath id="mx-clip-2-9-28-15-0">
+          <rect x="2" y="9" width="28" height="15" />
+        </clipPath>
+        <g
+          fill="#000000"
+          font-family="Helvetica"
+          clip-path="url(https://app.diagrams.net/#mx-clip-2-9-28-15-0)"
+          font-size="5.88px"
+        >
+          <text x="3.92" y="16.66">Text Node</text>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Times.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Times.vue
new file mode 100644
index 000000000..cbe890cc5
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Times.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 乘号 -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,4.5 4.5,0 13.5,9 22.5,0 27,4.5 18,13.5 27,22.5 22.5,27 13.5,18 4.5,27 0,22.5 9,13.5"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Trapezoid.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Trapezoid.vue
new file mode 100644
index 000000000..5d23b928e
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Trapezoid.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 五边形 -->
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="5.32,0 22.68,0 28,28 0,28"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/Triangle.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Triangle.vue
new file mode 100644
index 000000000..e40db5686
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/Triangle.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg>
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <path
+        d="M 5.78 1.36 L 26.18 14.96 L 5.78 28.56 Z"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        stroke-miterlimit="10"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/UpArrow.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/UpArrow.vue
new file mode 100644
index 000000000..2ce28d72a
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/UpArrow.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg>
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,10 15,0 30,10 20,10 20,28 10,28 10,10"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        stroke-miterlimit="10"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/VerticalArrow.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/VerticalArrow.vue
new file mode 100644
index 000000000..360d21bc4
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/VerticalArrow.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg class="svg-node">
+    <g transform="translate(0.5,0.5)" style="visibility: visible">
+      <polygon
+        points="0,9 13.6,0 27.2,9 18.2,9 18.2,18 27.2,18 13.6,27 0,18 9,18 9,9"
+        fill="#ffffff"
+        stroke="#000000"
+        stroke-width="1.3"
+        pointer-events="all"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/ZoomIn.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/ZoomIn.vue
new file mode 100644
index 000000000..a52571697
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/ZoomIn.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M943.8 892.5l-201.4-201c24.2-29 43.9-61.3 58.7-96.3 20-47.3 30.1-97.6 30.1-149.4s-10.1-102-30.1-149.4c-19.3-45.7-47-86.7-82.1-122-35.2-35.2-76.2-62.9-121.9-82.2-47.3-20-97.5-30.2-149.3-30.2-51.8 0-102 10.2-149.3 30.2-45.7 19.3-86.7 47-121.9 82.2s-62.8 76.3-82.1 122c-20 47.3-30.1 97.6-30.1 149.4s10.1 102 30.1 149.4c19.3 45.7 47 86.7 82.1 122 35.2 35.2 76.2 62.9 121.9 82.2 47.3 20 97.5 30.2 149.3 30.2 51.7 0 102-10.2 149.3-30.2 34.6-14.7 66.6-34.1 95.3-58l201.5 201c6.9 6.9 15.9 10.3 24.9 10.3 9.1 0 18.1-3.5 25-10.4 13.8-13.7 13.8-36.1 0-49.8zM669.7 666.6c-0.4 0.4-0.8 0.7-1.2 1.1-0.3 0.3-0.6 0.6-0.8 0.9-59 58.3-137 90.4-219.9 90.4-83.5 0-162.1-32.6-221.2-91.7-59.1-59.1-91.6-137.8-91.6-221.4s32.5-162.3 91.6-221.4c59.1-59.1 137.6-91.7 221.2-91.7s162.1 32.6 221.2 91.7c59.1 59.1 91.6 137.8 91.6 221.4 0 83.3-32.3 161.6-90.9 220.7z" p-id="813" />
+    <path d="M573.7 419H473v-98c0-19.5-13-35.3-32.5-35.3S408 301.5 408 321v98H305.3c-19.5 0-35.3 13-35.3 32.5s15.8 32.5 35.3 32.5H408v105.4c0 19.5 13 35.3 32.5 35.3s32.5-15.8 32.5-35.3V484h100.7c19.5 0 35.3-13 35.3-32.5S593.2 419 573.7 419z" p-id="814" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/icon/ZoomOut.vue b/nladmin-ui/src/views/system/logicflow/editor/components/icon/ZoomOut.vue
new file mode 100644
index 000000000..c30a25f24
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/icon/ZoomOut.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" :width="size" :height="size">
+    <path d="M946.9 897.7L744 695.2c24.4-29.2 44.2-61.7 59.1-97 20.2-47.7 30.4-98.3 30.4-150.5s-10.2-102.8-30.4-150.5c-19.5-46-47.3-87.4-82.8-122.9s-76.8-63.4-122.8-82.8c-47.7-20.2-98.3-30.4-150.4-30.4S344.4 71.3 296.8 91.5c-46 19.5-87.3 47.4-122.8 82.8-35.5 35.5-63.3 76.8-82.8 122.9-20.2 47.7-30.4 98.3-30.4 150.5S71 550.5 91.2 598.2c19.5 46 47.3 87.4 82.8 122.9s76.8 63.4 122.8 82.8c47.7 20.2 98.3 30.4 150.4 30.4s102.7-10.2 150.4-30.4c34.9-14.8 67.1-34.4 96.1-58.5l203 202.6c6.9 6.9 16 10.4 25.1 10.4 9.1 0 18.2-3.5 25.2-10.5 13.8-13.8 13.8-36.3-0.1-50.2zM447.2 763.2c-84.2 0-163.3-32.8-222.8-92.4C164.8 611.2 132 532 132 447.7c0-84.3 32.8-163.5 92.3-223.1 59.5-59.6 138.7-92.4 222.8-92.4s163.3 32.8 222.8 92.4c59.5 59.6 92.3 138.8 92.3 223.1 0 83.9-32.5 162.8-91.6 222.3-0.4 0.4-0.8 0.8-1.2 1.1-0.3 0.3-0.6 0.6-0.8 0.9-59.3 58.9-137.9 91.2-221.4 91.2z" p-id="967" />
+    <path d="M574 416H303.7c-19.7 0-35.6 12.8-35.6 32.5S284 481 303.7 481H574c19.7 0 35.6-12.8 35.6-32.5S593.7 416 574 416z" p-id="968" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '24'
+    }
+  }
+}
+</script>
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/DownArrowNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/DownArrowNode.js
new file mode 100644
index 000000000..e32d3c964
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/DownArrowNode.js
@@ -0,0 +1,49 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+
+// 下箭头
+
+class DownArrowModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 50
+    this.height = 80
+  }
+}
+class DownArrowView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const ArrowWidth = 1 / 3 * width
+    const upY = y - 1 / 2 * height
+    const downY = y + 1 / 2 * height
+    const downY2 = y + 1 / 5 * height
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: [
+        [x - 1 / 2 * ArrowWidth, downY2],
+        [x - 1 / 2 * width, downY2],
+        [x, downY],
+        [x + 1 / 2 * width, downY2],
+        [x + 1 / 2 * ArrowWidth, downY2],
+        [x + 1 / 2 * ArrowWidth, upY],
+        [x - 1 / 2 * ArrowWidth, upY]
+      ]
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'down-arrow',
+  view: DownArrowView,
+  model: DownArrowModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/HorizontalArrowNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/HorizontalArrowNode.js
new file mode 100644
index 000000000..0a8bf8098
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/HorizontalArrowNode.js
@@ -0,0 +1,56 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+
+// 水平双箭头
+
+class HorizontalArrowModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 40
+  }
+}
+
+class HorizontalArrowView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const ArrowHeight = 1 / 3 * height
+    const leftX = x - 1 / 2 * width
+    const leftX2 = x - 1 / 5 * width
+    const rightX = x + 1 / 2 * width
+    const rightX2 = x + 1 / 5 * width
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: [
+        // 右箭头
+        [rightX2, y - 1 / 2 * ArrowHeight],
+        [rightX2, y - 1 / 2 * height],
+        [rightX, y],
+        [rightX2, y + 1 / 2 * height],
+        [rightX2, y + 1 / 2 * ArrowHeight],
+        // 左箭头
+        [leftX2, y + 1 / 2 * ArrowHeight],
+        [leftX2, y + 1 / 2 * height],
+        [leftX, y],
+        [leftX2, y - 1 / 2 * height],
+        [leftX2, y - 1 / 2 * ArrowHeight]
+      ]
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'horizontal-arrow',
+  view: HorizontalArrowView,
+  model: HorizontalArrowModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/LeftArrow.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/LeftArrow.js
new file mode 100644
index 000000000..0405e10f7
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/LeftArrow.js
@@ -0,0 +1,48 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+
+// 左箭头
+class LeftArrowModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 50
+  }
+}
+class LeftArrowView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const ArrowHeight = 1 / 3 * height
+    const leftX = x - 1 / 2 * width
+    const leftX2 = x - 1 / 5 * width
+    const rightX = x + 1 / 2 * width
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: [
+        [leftX2, y - 1 / 2 * ArrowHeight],
+        [leftX2, y - 1 / 2 * height],
+        [leftX, y],
+        [leftX2, y + 1 / 2 * height],
+        [leftX2, y + 1 / 2 * ArrowHeight],
+        [rightX, y + 1 / 2 * ArrowHeight],
+        [rightX, y - 1 / 2 * ArrowHeight]
+      ]
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'left-arrow',
+  view: LeftArrowView,
+  model: LeftArrowModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/RightArrow.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/RightArrow.js
new file mode 100644
index 000000000..f963d0e3c
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/RightArrow.js
@@ -0,0 +1,50 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+
+// 右箭头
+
+class RightArrowModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 50
+  }
+}
+
+class RightArrowView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const ArrowHeight = 1 / 3 * height
+    const leftX = x - 1 / 2 * width
+    const rightX = x + 1 / 2 * width
+    const rightX2 = x + 1 / 5 * width
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: [
+        [rightX2, y - 1 / 2 * ArrowHeight],
+        [rightX2, y - 1 / 2 * height],
+        [rightX, y],
+        [rightX2, y + 1 / 2 * height],
+        [rightX2, y + 1 / 2 * ArrowHeight],
+        [leftX, y + 1 / 2 * ArrowHeight],
+        [leftX, y - 1 / 2 * ArrowHeight]
+      ]
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'right-arrow',
+  view: RightArrowView,
+  model: RightArrowModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/UpArrowNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/UpArrowNode.js
new file mode 100644
index 000000000..ae9b53864
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/UpArrowNode.js
@@ -0,0 +1,49 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+
+// 上箭头
+class UpArrowModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 50
+    this.height = 80
+  }
+}
+
+class UpArrowView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const ArrowWidth = 1 / 3 * width
+    const upY = y - 1 / 2 * height
+    const upY2 = y - 1 / 5 * height
+    const downY = y + 1 / 2 * height
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: [
+        [x - 1 / 2 * ArrowWidth, upY2],
+        [x - 1 / 2 * width, upY2],
+        [x, upY],
+        [x + 1 / 2 * width, upY2],
+        [x + 1 / 2 * ArrowWidth, upY2],
+        [x + 1 / 2 * ArrowWidth, downY],
+        [x - 1 / 2 * ArrowWidth, downY]
+      ]
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'up-arrow',
+  view: UpArrowView,
+  model: UpArrowModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/VerticalArrowNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/VerticalArrowNode.js
new file mode 100644
index 000000000..0a0fa261a
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/arrow/VerticalArrowNode.js
@@ -0,0 +1,56 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+
+// 竖直箭头
+
+class VerticalArrowModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 40
+    this.height = 80
+  }
+}
+
+class VerticalArrowView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const ArrowWidth = 1 / 3 * width
+    const upY = y - 1 / 2 * height
+    const upY2 = y - 1 / 5 * height
+    const downY = y + 1 / 2 * height
+    const downY2 = y + 1 / 5 * height
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: [
+        // 上箭头
+        [x - 1 / 2 * ArrowWidth, upY2],
+        [x - 1 / 2 * width, upY2],
+        [x, upY],
+        [x + 1 / 2 * width, upY2],
+        [x + 1 / 2 * ArrowWidth, upY2],
+        // 下箭头
+        [x + 1 / 2 * ArrowWidth, downY2],
+        [x + 1 / 2 * width, downY2],
+        [x, downY],
+        [x - 1 / 2 * width, downY2],
+        [x - 1 / 2 * ArrowWidth, downY2]
+      ]
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'vertical-arrow',
+  view: VerticalArrowView,
+  model: VerticalArrowModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/BaseNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/BaseNode.js
new file mode 100644
index 000000000..6c297ce81
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/BaseNode.js
@@ -0,0 +1,16 @@
+import { BaseNode, BaseNodeModel } from '@logicflow/core'
+
+class BaseNewNode extends BaseNode {
+}
+
+class BaseNewModel extends BaseNodeModel {
+  setAttributes() {
+    this.fill = 'red'
+  }
+}
+
+export default {
+  type: 'BaseNode',
+  view: BaseNewNode,
+  model: BaseNewModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/CircleNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/CircleNode.js
new file mode 100644
index 000000000..cc37250e3
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/CircleNode.js
@@ -0,0 +1,33 @@
+import { EllipseResize } from '@logicflow/extension'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 圆形
+class CircleNewModel extends EllipseResize.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.rx = 35
+    this.ry = 35
+  }
+
+  setToBottom() {
+    this.zIndex = 0
+  }
+
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+export default {
+  type: 'pro-circle',
+  view: EllipseResize.view,
+  model: CircleNewModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/DiamondNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/DiamondNode.js
new file mode 100644
index 000000000..38dc3152f
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/DiamondNode.js
@@ -0,0 +1,35 @@
+import { DiamondResize } from '@logicflow/extension'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 菱形
+/**
+ * model控制初始化的值
+ */
+class DiamondModel extends DiamondResize.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.rx = 35
+    this.ry = 35
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+
+  setToBottom() {
+    this.zIndex = 0
+  }
+}
+
+export default {
+  type: 'pro-diamond',
+  view: DiamondResize.view,
+  model: DiamondModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/EllipseNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/EllipseNode.js
new file mode 100644
index 000000000..c2976389c
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/EllipseNode.js
@@ -0,0 +1,19 @@
+import CircleNode from './CircleNode'
+
+// 椭圆
+class EllipseNewModel extends CircleNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.rx = 60
+    this.ry = 30
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    return { ...style }
+  }
+}
+export default {
+  type: 'pro-ellipse',
+  view: CircleNode.view,
+  model: EllipseNewModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/RectNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/RectNode.js
new file mode 100644
index 000000000..ee242e26d
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/RectNode.js
@@ -0,0 +1,27 @@
+import { RectResize } from '@logicflow/extension'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 矩形
+class RectNewModel extends RectResize.model {
+  setToBottom() {
+    this.zIndex = 0
+  }
+
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+export default {
+  type: 'pro-rect',
+  view: RectResize.view,
+  model: RectNewModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/RectRadiusNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/RectRadiusNode.js
new file mode 100644
index 000000000..9a336d63a
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/RectRadiusNode.js
@@ -0,0 +1,14 @@
+import RectNode from './RectNode'
+
+// 带圆角的矩形
+class RectRadiusModel extends RectNode.model {
+  setAttributes() {
+    super.setAttributes()
+    this.radius = 20
+  }
+}
+export default {
+  type: 'rect-radius',
+  view: RectNode.view,
+  model: RectRadiusModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/TextNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/TextNode.js
new file mode 100644
index 000000000..b3a091170
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/basic/TextNode.js
@@ -0,0 +1,37 @@
+import { TextNodeModel, TextNode } from '@logicflow/core'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 文本节点
+class TextNewNode extends TextNode {
+}
+class TextNewModel extends TextNodeModel {
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    if (properties.backgroundColor) {
+      style.backgroundStyle = {
+        fill: properties.backgroundColor
+      }
+    }
+    return getTextStyleFunction(style, properties)
+  }
+
+  setAttributes() {
+    super.setAttributes()
+    if (!this.text.value) {
+      this.text.value = 'text'
+    }
+  }
+}
+
+export default {
+  type: 'pro-text',
+  view: TextNewNode,
+  model: TextNewModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/edge/Bezier.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/edge/Bezier.js
new file mode 100644
index 000000000..ecfc48eb9
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/edge/Bezier.js
@@ -0,0 +1,26 @@
+import { BezierEdge, BezierEdgeModel } from '@logicflow/core'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 贝塞尔曲线
+class Model extends BezierEdgeModel {
+  constructor(data, graphModel) {
+    super(data, graphModel)
+    this.strokeWidth = 1
+  }
+  getTextStyle() {
+    const style = super.getTextStyle()
+    return getTextStyleFunction(style, this.properties)
+  }
+
+  getEdgeStyle() {
+    const attributes = super.getEdgeStyle()
+    const properties = this.properties
+    const style = getShapeStyleFuction(attributes, properties)
+    return { ...style, fill: 'none' }
+  }
+}
+export default {
+  type: 'pro-bezier',
+  view: BezierEdge,
+  model: Model
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/edge/Line.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/edge/Line.js
new file mode 100644
index 000000000..c5ef06e0a
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/edge/Line.js
@@ -0,0 +1,26 @@
+import { LineEdge, LineEdgeModel } from '@logicflow/core'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 直线
+class Model extends LineEdgeModel {
+  constructor(data, graphModel) {
+    super(data, graphModel)
+    this.strokeWidth = 1
+  }
+  getTextStyle() {
+    const style = super.getTextStyle()
+    return getTextStyleFunction(style, this.properties)
+  }
+
+  getEdgeStyle() {
+    const attributes = super.getEdgeStyle()
+    const properties = this.properties
+    const style = getShapeStyleFuction(attributes, properties)
+    return { ...style, fill: 'none' }
+  }
+}
+export default {
+  type: 'pro-line',
+  view: LineEdge,
+  model: Model
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/edge/Polyline.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/edge/Polyline.js
new file mode 100644
index 000000000..86d53c295
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/edge/Polyline.js
@@ -0,0 +1,26 @@
+import { PolylineEdge, PolylineEdgeModel } from '@logicflow/core'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 折线
+class Model extends PolylineEdgeModel {
+  constructor(data, graphModel) {
+    super(data, graphModel)
+    this.strokeWidth = 1
+  }
+  getTextStyle() {
+    const style = super.getTextStyle()
+    return getTextStyleFunction(style, this.properties)
+  }
+
+  getEdgeStyle() {
+    const attributes = super.getEdgeStyle()
+    const properties = this.properties
+    const style = getShapeStyleFuction(attributes, properties)
+    return { ...style, fill: 'none' }
+  }
+}
+export default {
+  type: 'pro-polyline',
+  view: PolylineEdge,
+  model: Model
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/getShapeStyleUtil.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/getShapeStyleUtil.js
new file mode 100644
index 000000000..ccea7ddc5
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/getShapeStyleUtil.js
@@ -0,0 +1,70 @@
+export const getShapeStyleFuction = (style, properties) => {
+  if (properties.backgroundColor) {
+    style.fill = properties.backgroundColor
+  }
+  if (properties.transform) { // 旋转
+    style.transform = properties.transform
+  }
+  if (properties.imageWidth) { // 宽度
+    style.imageWidth = properties.imageWidth
+  }
+  if (properties.imageHeight) { // 高度
+    style.imageHeight = properties.imageHeight
+  }
+  if (properties.gradientColor && style.fill !== properties.gradientColor) {
+    style.fillGradient = properties.gradientColor
+  }
+  if (properties.borderColor) {
+    style.stroke = properties.borderColor
+  }
+  if (properties.borderWidth) {
+    style.strokeWidth = properties.borderWidth
+  }
+  if (properties.borderStyle) {
+    if (properties.borderStyle === 'solid') {
+      style.strokeDashArray = '0'
+      // nodeResize里的bug导致的,array小写了
+      style.strokeDasharray = '0'
+    }
+    if (properties.borderStyle === 'dashed') {
+      style.strokeDashArray = '3 3'
+      style.strokeDasharray = '3 3'
+    }
+    if (properties.borderStyle === 'dotted') {
+      style.strokeDashArray = '1 1'
+      style.strokeDasharray = '1 1'
+    }
+    if (properties.borderStyle === 'hidden') {
+      style.stroke = style.fill
+    }
+  }
+  return style
+}
+
+export const getTextStyleFunction = (style = {}, properties) => {
+  if (properties.fontColor) {
+    style.color = properties.fontColor
+  }
+  if (properties.fontSize) {
+    style.fontSize = properties.fontSize
+  }
+  if (properties.fontFamily) {
+    style.fontFamily = properties.fontFamily
+  }
+  if (properties.lineHeight) {
+    style.lineHeight = properties.lineHeight
+  }
+  if (properties.textAlign) {
+    style.textAlign = properties.textAlign
+  }
+  if (properties.fontWeight) {
+    style.fontWeight = properties.fontWeight
+  }
+  if (properties.textDecoration) {
+    style.textDecoration = properties.textDecoration
+  }
+  if (properties.fontStyle) {
+    style.fontStyle = properties.fontStyle
+  }
+  return style
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/html/htmlNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/html/htmlNode.js
new file mode 100644
index 000000000..bbd4d84d9
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/html/htmlNode.js
@@ -0,0 +1,89 @@
+import { HtmlResize } from '@logicflow/extension'
+import defaultUrl from '../../../image/agv.svg'
+import api from '@/store/modules/api'
+import tray from '../../../image/托盘.svg'
+import icon_alert from '../../../image/icon_alert.png'
+class ButtonNodeModel extends HtmlResize.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 100
+    this.height = 100
+    this.text.draggable = true
+    this.text.editable = false
+  }
+}
+
+class ButtonNode extends HtmlResize.view {
+  setHtml(rootEl) {
+    /**
+     * 自己设置的宽高在 imageHeight/imageWidth
+     * 用拖动设置的宽高在 properties.nodeSize.height/properties.nodeSize.width
+     */
+    const oldNode = this.props.model
+    const properties = oldNode.getProperties()
+    // console.log(properties)
+    // console.log('oldNode', oldNode)
+    // 路径前缀
+    const baseUrl = api.state.baseApi
+    // 颜色
+    let statusColor = '#1a912a'
+    // 默认图片
+    // let imageUrl = baseUrl + '/file/图片/专机-20220722094234555.png'
+    let imageUrl = defaultUrl
+    // 托盘图片
+    const goods = tray
+    const trayHeight = Math.round(2 / 3 * oldNode._height)
+    const trayWidth = Math.round(2 / 3 * oldNode._width)
+    let trayDisplay = 'none'
+    // 故障图片
+    const fault = icon_alert
+    let faultDisplay = 'none'
+    if (properties.imageUrl) { // 与图片尾部拼接
+      imageUrl = baseUrl + '/file/图片/' + properties.imageUrl
+    }
+    if (!properties.transform) { // 如果没有值，设置默认为0度
+      properties.transform = 0
+    }
+    if (properties.isOnline) {
+      statusColor = '#54dc5f'
+    }
+    if (!properties.device) {
+      statusColor = 'rgba(255,255,255,0)'
+    }
+    if (properties.hasGoods) {
+      // 显示图片，并设置宽高
+      trayDisplay = 'flex'
+    }
+    if (properties.isError) {
+      // 显示图片，并设置宽高
+      faultDisplay = 'flex'
+    }
+    if (properties.isLock !== undefined) {
+      oldNode.draggable = !properties.isLock
+    }
+    const el = document.createElement('div')
+    el.className = 'uml-wrapper'
+    // el.id = 'uml-app'
+    const html = `
+      <div>
+        <div style="height: 15px; width: 15px; background-color: ${statusColor}; position: absolute; border-radius: 100px; z-index: 9999"></div>
+        <img src="${goods}" style="position: absolute; height: ${trayHeight}px; width: ${trayWidth}px; top: 15%; left: 15%; display: ${trayDisplay}">
+        <img src="${fault}" style="position: absolute; height: ${trayHeight}px; width: ${trayWidth}px; top: 15%; left: 15%; display: ${faultDisplay}">
+        <img style="transform: rotate(${properties.transform}deg);" height="${oldNode._height}" width="${oldNode._width}" src="${imageUrl}">
+      </div>
+    `
+    el.innerHTML = html
+    rootEl.innerHTML = ''
+    rootEl.appendChild(el)
+    window.setData = () => {
+      const { graphModel, model } = this.props
+      graphModel.eventCenter.emit('custom:button-click', model)
+    }
+  }
+}
+
+export default {
+  type: 'html-node',
+  view: ButtonNode,
+  model: ButtonNodeModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/index.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/index.js
new file mode 100644
index 000000000..ec1544aed
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/index.js
@@ -0,0 +1,74 @@
+// 导入组件并且注册
+// 基础图形
+import CircleNode from './basic/CircleNode'
+import RectNode from './basic/RectNode'
+import RectRadiusNode from './basic/RectRadiusNode'
+import EllipseNode from './basic/EllipseNode'
+import TextNode from './basic/TextNode'
+import DiamondNode from './basic/DiamondNode'
+// path绘制的个性化图形
+import CylindeNode from './path/CylindeNode'
+import TriangleNode from './path/TriangleNode'
+import ParallelogramNode from './path/ParallelogramNode'
+import ActorNode from './path/ActorNode'
+import StarNode from './path/Star'
+import PentagonNode from './path/PentagonNode'
+import HexagonNode from './path/HexagonNode'
+import SeptagonNode from './path/SeptagonNode'
+import HeptagonNode from './path/HeptagonNode'
+import TrapezoidNode from './path/TrapezoidNode'
+import CrossNode from './path/CrossNode'
+import MinusNode from './path/MinusNode'
+import TimesNode from './path/TimesNode'
+import DivideNode from './path/DivideNode'
+// 多边形绘制的箭头
+import LeftArrow from './arrow/LeftArrow'
+import RightArrow from './arrow/RightArrow'
+import HorizontalArrow from './arrow/HorizontalArrowNode'
+import UpArrow from './arrow/UpArrowNode'
+import DownArrow from './arrow/DownArrowNode'
+import VerticalArrow from './arrow/VerticalArrowNode'
+// 注册边
+import Ployline from './edge/Polyline'
+import Line from './edge/Line'
+import Bezier from './edge/Bezier'
+// html图片
+import HtmlNode from './html/htmlNode'
+
+export const registerCustomElement = (lf) => {
+  // 注册基础图形
+  lf.register(CircleNode)
+  lf.register(RectNode)
+  lf.register(RectRadiusNode)
+  lf.register(EllipseNode)
+  lf.register(DiamondNode)
+  lf.register(TextNode)
+  // 注册path绘制的个性化图形
+  lf.register(CylindeNode)
+  lf.register(TriangleNode)
+  lf.register(ParallelogramNode)
+  lf.register(ActorNode)
+  lf.register(StarNode)
+  lf.register(PentagonNode)
+  lf.register(HexagonNode)
+  lf.register(SeptagonNode)
+  lf.register(HeptagonNode)
+  lf.register(TrapezoidNode)
+  lf.register(CrossNode)
+  lf.register(MinusNode)
+  lf.register(TimesNode)
+  lf.register(DivideNode)
+  // 注册多边形绘制的箭头
+  lf.register(LeftArrow)
+  lf.register(RightArrow)
+  lf.register(HorizontalArrow)
+  lf.register(UpArrow)
+  lf.register(DownArrow)
+  lf.register(VerticalArrow)
+  // 注册边
+  lf.register(Ployline)
+  lf.register(Line)
+  lf.register(Bezier)
+  // 注册html结点
+  lf.register(HtmlNode)
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/path/ActorNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/ActorNode.js
new file mode 100644
index 000000000..718e51172
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/ActorNode.js
@@ -0,0 +1,95 @@
+import { h } from '@logicflow/core'
+import { RectResize } from '@logicflow/extension'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+// 人物
+class ActorModel extends RectResize.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 40
+    this.height = 80
+  }
+
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class ActorView extends RectResize.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    // 人物头部圆形
+    const ellipseAttrs = {
+      ...style,
+      cx: x,
+      cy: y - 3 / 8 * height,
+      rx: 1 / 4 * width,
+      ry: 1 / 8 * height,
+      width,
+      height
+    }
+    // 人物肩膀横线
+    const pathAAttrs = {
+      ...style,
+      d: `M ${x - 1 / 2 * width} ${y - 1 / 8 * height} L ${x + 1 / 2 * width} ${y - 1 / 8 * height}`
+    }
+    // 人物身体躯干竖线
+    const pathBAttrs = {
+      ...style,
+      d: `M ${x} ${y - 1 / 4 * height} L ${x} ${y + 1 / 5 * height}`
+    }
+    // 人物左腿斜线
+    const pathCAttrs = {
+      ...style,
+      d: `M ${x} ${y + 1 / 5 * height} L ${x - 1 / 2 * width} ${y + 1 / 2 * height}`
+    }
+    // 人物右腿斜线
+    const pathDAttrs = {
+      ...style,
+      d: `M ${x} ${y + 1 / 5 * height} L ${x + 1 / 2 * width} ${y + 1 / 2 * height}`
+    }
+    // 人物透明背景板
+    const bgAttrs = {
+      x: x - 1 / 5 * width,
+      y: y - 1 / 2 * height,
+      width: 2 / 5 * width,
+      height,
+      style: 'fill: transparent'
+    }
+    return h('g', {}, [
+      h('ellipse', {
+        ...ellipseAttrs
+      }),
+      h('path', {
+        ...pathAAttrs
+      }),
+      h('path', {
+        ...pathBAttrs
+      }),
+      h('path', {
+        ...pathCAttrs
+      }),
+      h('path', {
+        ...pathDAttrs
+      }),
+      h('rect', {
+        ...bgAttrs
+      })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'actor',
+  view: ActorView,
+  model: ActorModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/path/CrossNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/CrossNode.js
new file mode 100644
index 000000000..a9b4bbc71
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/CrossNode.js
@@ -0,0 +1,65 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 加号
+class CrossModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class CrossView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - 1 / 2 * width, y - 1 / 6 * height],
+      [x - 1 / 6 * width, y - 1 / 6 * height],
+      [x - 1 / 6 * width, y - 1 / 2 * height],
+      [x + 1 / 6 * width, y - 1 / 2 * height],
+      [x + 1 / 6 * width, y - 1 / 6 * height],
+      [x + 1 / 2 * width, y - 1 / 6 * height],
+      [x + 1 / 2 * width, y + 1 / 6 * height],
+      [x + 1 / 6 * width, y + 1 / 6 * height],
+      [x + 1 / 6 * width, y + 1 / 2 * height],
+      [x - 1 / 6 * width, y + 1 / 2 * height],
+      [x - 1 / 6 * width, y + 1 / 6 * height],
+      [x - 1 / 2 * width, y + 1 / 6 * height]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ])
+  }
+}
+
+export default {
+  type: 'cross',
+  view: CrossView,
+  model: CrossModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/path/CylindeNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/CylindeNode.js
new file mode 100644
index 000000000..a719c7e30
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/CylindeNode.js
@@ -0,0 +1,92 @@
+import { h } from '@logicflow/core'
+import { RectResize } from '@logicflow/extension'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 圆柱体
+class CylindeModel extends RectResize.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 60
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class CylindeView extends RectResize.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    // 圆柱体顶部椭圆
+    const ellipseAAttrs = {
+      ...style,
+      cx: x,
+      cy: y - 1 / 3 * height,
+      rx: 1 / 2 * width,
+      ry: 1 / 6 * height,
+      width,
+      height
+    }
+    // 圆柱体左直线
+    const pathAAttrs = {
+      ...style,
+      d: `M ${x - 1 / 2 * width} ${y - 1 / 3 * height} L ${x - 1 / 2 * width} ${y + 1 / 3 * height}`
+    }
+    // 圆柱体右直线
+    const pathBAttrs = {
+      ...style,
+      d: `M ${x + 1 / 2 * width} ${y - 1 / 3 * height} L ${x + 1 / 2 * width} ${y + 1 / 3 * height}`
+    }
+    // 圆柱体下椭圆
+    const ellipseBAttrs = {
+      ...style,
+      cx: x,
+      cy: y + 1 / 3 * height,
+      rx: 1 / 2 * width,
+      ry: 1 / 6 * height,
+      width,
+      height
+    }
+    // 圆柱体中间填充部分
+    const rectAttrs = {
+      ...style,
+      x: x - 1 / 2 * width,
+      y: y - 1 / 3 * height,
+      width,
+      height: 2 / 3 * height,
+      stroke: 'transparent'
+    }
+    return h('g', {}, [
+      h('ellipse', {
+        ...ellipseBAttrs
+      }),
+      h('rect', {
+        ...rectAttrs
+      }),
+      h('path', {
+        ...pathAAttrs
+      }),
+      h('path', {
+        ...pathBAttrs
+      }),
+      h('ellipse', {
+        ...ellipseAAttrs
+      })
+    ])
+  }
+}
+
+export default {
+  type: 'cylinde',
+  model: CylindeModel,
+  view: CylindeView
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/path/DivideNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/DivideNode.js
new file mode 100644
index 000000000..1fa2d9896
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/DivideNode.js
@@ -0,0 +1,83 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 除号
+class DivideModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class DivideView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - 1 / 2 * width, y - 1 / 8 * height],
+      [x + 1 / 2 * width, y - 1 / 8 * height],
+      [x + 1 / 2 * width, y + 1 / 8 * height],
+      [x - 1 / 2 * width, y + 1 / 8 * height]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height
+    }
+
+    // 除号中间横线
+    const lineAttrs = {
+      ...attrs,
+      points: points.join(' ')
+    }
+
+    // 除号上圆点
+    const upEllipseAttrs = {
+      ...attrs,
+      cy: y - 3 / 8 * height,
+      cx: x,
+      rx: 1 / 8 * width,
+      ry: 1 / 8 * height
+    }
+
+    // 除号下圆点
+    const downEllipseAttrs = {
+      ...attrs,
+      cy: y + 3 / 8 * height,
+      cx: x,
+      rx: 1 / 8 * width,
+      ry: 1 / 8 * height
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...lineAttrs }),
+      h('ellipse', { ...upEllipseAttrs }),
+      h('ellipse', { ...downEllipseAttrs })
+    ])
+  }
+}
+
+export default {
+  type: 'divide',
+  view: DivideView,
+  model: DivideModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/path/HeptagonNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/HeptagonNode.js
new file mode 100644
index 000000000..b28d42b1f
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/HeptagonNode.js
@@ -0,0 +1,61 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 五边形
+class HeptagonModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class HeptagonView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - 0.205 * width, y - 0.5 * height],
+      [x + 0.205 * width, y - 0.5 * height],
+      [x + 0.5 * width, y - 0.205 * height],
+      [x + 0.5 * width, y + 0.205 * height],
+      [x + 0.205 * width, y + 0.5 * height],
+      [x - 0.205 * width, y + 0.5 * height],
+      [x - 0.5 * width, y + 0.205 * height],
+      [x - 0.5 * width, y - 0.205 * height]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ])
+  }
+}
+
+export default {
+  type: 'heptagon',
+  view: HeptagonView,
+  model: HeptagonModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/path/HexagonNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/HexagonNode.js
new file mode 100644
index 000000000..a0e281fbb
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/HexagonNode.js
@@ -0,0 +1,59 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 六边形
+class HexagonModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class HexagonView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - 0.28 * width, y - 0.5 * height],
+      [x + 0.28 * width, y - 0.5 * height],
+      [x + 0.5 * width, y],
+      [x + 0.28 * width, y + 0.5 * height],
+      [x - 0.28 * width, y + 0.5 * height],
+      [x - 0.5 * width, y]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ])
+  }
+}
+
+export default {
+  type: 'hexagon',
+  view: HexagonView,
+  model: HexagonModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/path/MinusNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/MinusNode.js
new file mode 100644
index 000000000..5f29f1e27
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/MinusNode.js
@@ -0,0 +1,57 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 减号
+class MinusModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 20
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class MinusView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - 1 / 2 * width, y - 1 / 2 * height],
+      [x + 1 / 2 * width, y - 1 / 2 * height],
+      [x + 1 / 2 * width, y + 1 / 2 * height],
+      [x - 1 / 2 * width, y + 1 / 2 * height]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ])
+  }
+}
+
+export default {
+  type: 'minus',
+  view: MinusView,
+  model: MinusModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/path/ParallelogramNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/ParallelogramNode.js
new file mode 100644
index 000000000..96b07f882
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/ParallelogramNode.js
@@ -0,0 +1,57 @@
+import { h } from '@logicflow/core'
+import { RectResize } from '@logicflow/extension'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 平行四边形
+class ParallelogramModel extends RectResize.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 100
+    this.height = 60
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class ParallelogramView extends RectResize.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - width / 2, y + height / 2],
+      [x - width / 5, y - height / 2],
+      [x + width / 2, y - height / 2],
+      [x + width / 5, y + height / 2]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'parallelogram',
+  view: ParallelogramView,
+  model: ParallelogramModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/path/PentagonNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/PentagonNode.js
new file mode 100644
index 000000000..0bf20aad3
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/PentagonNode.js
@@ -0,0 +1,58 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 八边形
+class PentagonModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class PentagonView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - 0.5 * width, y],
+      [x, y - 0.5 * height],
+      [x + 0.5 * width, y],
+      [x + 0.3 * width, y + 0.5 * height],
+      [x - 0.3 * width, y + 0.5 * height]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ])
+  }
+}
+
+export default {
+  type: 'pentagon',
+  view: PentagonView,
+  model: PentagonModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/path/SeptagonNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/SeptagonNode.js
new file mode 100644
index 000000000..9ea030a49
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/SeptagonNode.js
@@ -0,0 +1,60 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 七边形
+class SeptagonModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class SeptagonView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x, y - 0.5 * height],
+      [x + 0.395 * width, y - 0.3 * height],
+      [x + 0.5 * width, y + 0.145 * height],
+      [x + 0.225 * width, y + 0.5 * height],
+      [x - 0.225 * width, y + 0.5 * height],
+      [x - 0.5 * width, y + 0.145 * height],
+      [x - 0.395 * width, y - 0.3 * height]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ])
+  }
+}
+
+export default {
+  type: 'septagon',
+  view: SeptagonView,
+  model: SeptagonModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/path/Star.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/Star.js
new file mode 100644
index 000000000..28eaededc
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/Star.js
@@ -0,0 +1,40 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+
+// 五角星
+class StarModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+}
+
+class StarView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const svgAttr = {
+      x: x - 1 / 2 * width,
+      y: y - 1 / 2 * height,
+      width,
+      height
+    }
+    const pathAAttrs = {
+      ...style,
+      d: 'm0.36922,13.46587l12.98695,0l4.01307,-13.36885l4.01307,13.36885l12.98694,0l-10.50664,8.26231l4.01327,13.36885l-10.50665,-8.26253l-10.50664,8.26253l4.01327,-13.36885l-10.50665,-8.26231l0,0z'
+    }
+
+    return h('svg', { ...svgAttr, viewBox: '0 0 37 37' }, [
+      h('path', {
+        ...pathAAttrs
+      })
+    ])
+  }
+}
+
+export default {
+  type: 'star',
+  view: StarView,
+  model: StarModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/path/TimesNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/TimesNode.js
new file mode 100644
index 000000000..6d67a2fc1
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/TimesNode.js
@@ -0,0 +1,65 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 乘号
+class TimesModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class TimesView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - 1 / 2 * width, y - 1 / 3 * height],
+      [x - 1 / 3 * width, y - 1 / 2 * height],
+      [x, y - 1 / 6 * height],
+      [x + 1 / 3 * width, y - 1 / 2 * height],
+      [x + 1 / 2 * width, y - 1 / 3 * height],
+      [x + 1 / 6 * width, y],
+      [x + 1 / 2 * width, y + 1 / 3 * height],
+      [x + 1 / 3 * width, y + 1 / 2 * height],
+      [x, y + 1 / 6 * height],
+      [x - 1 / 3 * width, y + 1 / 2 * height],
+      [x - 1 / 2 * width, y + 1 / 3 * height],
+      [x - 1 / 6 * width, y]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ])
+  }
+}
+
+export default {
+  type: 'times',
+  view: TimesView,
+  model: TimesModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/path/TrapezoidNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/TrapezoidNode.js
new file mode 100644
index 000000000..3ffe197b4
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/TrapezoidNode.js
@@ -0,0 +1,57 @@
+import { h } from '@logicflow/core'
+import RectNode from '../basic/RectNode'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 五边形
+class TrapezoidModel extends RectNode.model {
+  initNodeData(data) {
+    super.initNodeData(data)
+    this.width = 80
+    this.height = 80
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class TrapezoidView extends RectNode.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const pointList = [
+      [x - 0.31 * width, y - 0.5 * height],
+      [x + 0.31 * width, y - 0.5 * height],
+      [x + 0.5 * width, y + 0.5 * height],
+      [x - 0.5 * width, y + 0.5 * height]
+    ]
+    const points = pointList.map(item => {
+      return `${item[0]},${item[1]}`
+    })
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: points.join(' ')
+    }
+
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ])
+  }
+}
+
+export default {
+  type: 'trapezoid',
+  view: TrapezoidView,
+  model: TrapezoidModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/components/node/path/TriangleNode.js b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/TriangleNode.js
new file mode 100644
index 000000000..67ff9e369
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/components/node/path/TriangleNode.js
@@ -0,0 +1,47 @@
+import { h } from '@logicflow/core'
+import { RectResize } from '@logicflow/extension'
+import { getShapeStyleFuction, getTextStyleFunction } from '../getShapeStyleUtil'
+
+// 三角形
+class TriangleModel extends RectResize.model {
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+
+  getTextStyle() {
+    const style = super.getTextStyle()
+    const properties = this.getProperties()
+    return getTextStyleFunction(style, properties)
+  }
+}
+
+class TriangleView extends RectResize.view {
+  getResizeShape() {
+    const { x, y, width, height } = this.props.model
+    const style = this.props.model.getNodeStyle()
+    const attrs = {
+      ...style,
+      x,
+      y,
+      width,
+      height,
+      points: [
+        [x - width / 2, y + height / 2],
+        [x - width / 2, y - height / 2],
+        [x + width / 2, y]
+      ]
+    }
+    return h('g', {}, [
+      h('polygon', { ...attrs })
+    ]
+    )
+  }
+}
+
+export default {
+  type: 'triangle',
+  view: TriangleView,
+  model: TriangleModel
+}
diff --git a/nladmin-ui/src/views/system/logicflow/editor/constant/index.js b/nladmin-ui/src/views/system/logicflow/editor/constant/index.js
new file mode 100644
index 000000000..710a725bf
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/constant/index.js
@@ -0,0 +1,69 @@
+export const shortStyles = [
+  {
+    backgroundColor: 'rgb(255, 255, 255)',
+    borderWidth: '1px',
+    borderColor: 'rgb(42, 42, 42)'
+  },
+  {
+    backgroundColor: 'rgb(245, 245, 245)',
+    borderWidth: '1px',
+    borderColor: 'rgb(102, 102, 102)'
+  },
+  {
+    backgroundColor: 'rgb(218, 232, 252)',
+    borderWidth: '1px',
+    borderColor: 'rgb(108, 142, 191)'
+  },
+  {
+    backgroundColor: 'rgb(213, 232, 212)',
+    borderWidth: '1px',
+    borderColor: 'rgb(130, 179, 102)'
+  },
+  {
+    backgroundColor: 'rgb(255, 230, 204)',
+    borderWidth: '1px',
+    borderColor: 'rgb(215, 155, 0)'
+  },
+  {
+    backgroundColor: 'rgb(255, 242, 204)',
+    borderWidth: '1px',
+    borderColor: 'rgb(214, 182, 86)'
+  },
+  {
+    backgroundColor: 'rgb(248, 206, 204)',
+    borderWidth: '1px',
+    borderColor: 'rgb(184, 84, 80)'
+  },
+  {
+    backgroundColor: 'rgb(220, 210, 230)',
+    borderWidth: '1px',
+    borderColor: 'rgb(150, 115, 166)'
+  }
+]
+
+export const borderStyles = [
+  {
+    value: 'solid'
+  },
+  {
+    value: 'dashed'
+  },
+  {
+    value: 'dotted'
+  }
+]
+
+export const fontFamilies = [
+  {
+    value: 'Arial'
+  },
+  {
+    value: 'Verdana'
+  },
+  {
+    value: 'Georgia'
+  },
+  {
+    value: 'Times New Roman'
+  }
+]
diff --git a/nladmin-ui/src/views/system/logicflow/editor/image/agv.svg b/nladmin-ui/src/views/system/logicflow/editor/image/agv.svg
new file mode 100644
index 000000000..d7a91d45e
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/image/agv.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59 (86127) - https://sketch.com -->
+    <title>agv@1x</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#C51818" offset="0%"></stop>
+            <stop stop-color="#930A0A" offset="100%"></stop>
+        </linearGradient>
+        <path d="M11.1421338,0 L15.8564738,0 C15.951731,0 15.9993596,0.133354166 15.9993596,0.400062498 L15.9993596,1.5999375 C15.9993596,1.86664583 15.951731,2 15.8564738,2 L11.1421338,2 C11.0468766,2 10.9993596,1.86664583 10.9993596,1.5999375 L10.9993596,0.400062498 C10.9993596,0.133354166 11.0468766,0 11.1421338,0 Z" id="path-2"></path>
+        <filter x="-3.0%" y="-7.5%" width="106.0%" height="115.0%" filterUnits="objectBoundingBox" id="filter-3">
+            <feOffset dx="0.3" dy="-0.3" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.466045122   0 0 0 0 0.77844769   0 0 0 0 0.77844769  0 0 0 1 0" type="matrix" in="shadowInnerInner1" result="shadowMatrixInner1"></feColorMatrix>
+            <feOffset dx="-0.2" dy="0.2" in="SourceAlpha" result="shadowOffsetInner2"></feOffset>
+            <feComposite in="shadowOffsetInner2" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner2"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.880564024   0 0 0 0 1   0 0 0 0 1  0 0 0 1 0" type="matrix" in="shadowInnerInner2" result="shadowMatrixInner2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixInner1"></feMergeNode>
+                <feMergeNode in="shadowMatrixInner2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <path d="M0.142774234,0 L4.85711416,0 C4.95237139,0 5,0.133354166 5,0.400062498 L5,1.5999375 C5,1.86664583 4.95237139,2 4.85711416,2 L0.142774234,2 C0.0475170062,2 0,1.86664583 0,1.5999375 L0,0.400062498 C0,0.133354166 0.0475170062,0 0.142774234,0 Z" id="path-4"></path>
+        <filter x="-3.0%" y="-7.5%" width="106.0%" height="115.0%" filterUnits="objectBoundingBox" id="filter-5">
+            <feOffset dx="0.3" dy="-0.3" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.466045122   0 0 0 0 0.77844769   0 0 0 0 0.77844769  0 0 0 1 0" type="matrix" in="shadowInnerInner1" result="shadowMatrixInner1"></feColorMatrix>
+            <feOffset dx="-0.2" dy="0.2" in="SourceAlpha" result="shadowOffsetInner2"></feOffset>
+            <feComposite in="shadowOffsetInner2" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner2"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.880564024   0 0 0 0 1   0 0 0 0 1  0 0 0 1 0" type="matrix" in="shadowInnerInner2" result="shadowMatrixInner2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixInner1"></feMergeNode>
+                <feMergeNode in="shadowMatrixInner2"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="设备图标" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-19" transform="translate(-40.000000, -161.000000)"></g>
+        <g id="agv备份">
+            <g id="编组-16" transform="translate(5.000000, 9.000000)">
+                <path d="M0,2.800125 C0,2.58771142 0.126327508,2.38443811 0.351560783,2.23436585 C0.576325311,2.08421546 0.881597258,2 1.19975977,2 L22.7997715,2 C23.4625807,2 24,2.35826726 24,2.800125 L24,4 L0,4 L0,2.800125 Z" id="路径" fill="#C65621" opacity="0.779999971"></path>
+                <path d="M22.2940609,0 C22.6839515,0 23,0.551061004 23,1.23087278 L24,14.7691272 C24,15.448939 23.6839515,16 23.2940609,16 L0.705718533,16 C0.315993373,16 0,15.448939 0,14.7691272 L1,1.23087278 C1,0.551061004 1.31599337,0 1.70571853,0 L22.2940609,0 Z" id="路径备份-23" fill="url(#linearGradient-1)"></path>
+                <path d="M23.2940609,3 C23.6839515,3 24,3.41329575 24,3.92315459 L24,14.0768454 C24,14.5867042 23.6839515,15 23.2940609,15 L0.705718533,15 C0.315993373,15 0,14.5867042 0,14.0768454 L0,3.92315459 C0,3.41329575 0.315993373,3 0.705718533,3 L23.2940609,3 Z" id="路径" fill="#B72323"></path>
+                <path d="M0,3.50453202 C0,3.37059113 0.126327508,3.24241379 0.351560783,3.14778325 C0.576325311,3.05310345 0.881597258,3 1.19975977,3 L22.7997715,3 C23.4625807,3 24,3.22591133 24,3.50453202 L24,4.261133 L0,4.261133 L0,3.50453202 Z" id="路径备份-24" fill="#E47F3B" opacity="0.779999971" transform="translate(12.000000, 3.630567) scale(1, -1) translate(-12.000000, -3.630567) "></path>
+                <path d="M7.28554847,13 L16.7142283,13 C16.9047428,13 17,13.0840887 17,13.252266 L17,14.008867 C17,14.1770443 16.9047428,14.261133 16.7142283,14.261133 L7.28554847,14.261133 C7.09503401,14.261133 7,14.1770443 7,14.008867 L7,13.252266 C7,13.0840887 7.09503401,13 7.28554847,13 Z" id="Fill-6" fill="#930A0A"></path>
+                <g id="编组-14" transform="translate(4.000000, 8.000000)">
+                    <g id="Fill-6备份-2">
+                        <use fill="#B1FAFA" fill-rule="evenodd" xlink:href="#path-2"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                    </g>
+                    <g id="Fill-6备份-3" transform="translate(2.500000, 1.000000) scale(-1, 1) translate(-2.500000, -1.000000) ">
+                        <use fill="#B1FAFA" fill-rule="evenodd" xlink:href="#path-4"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/nladmin-ui/src/views/system/logicflow/editor/image/icon_alert.png b/nladmin-ui/src/views/system/logicflow/editor/image/icon_alert.png
new file mode 100644
index 000000000..c224792e5
Binary files /dev/null and b/nladmin-ui/src/views/system/logicflow/editor/image/icon_alert.png differ
diff --git a/nladmin-ui/src/views/system/logicflow/editor/image/托盘.svg b/nladmin-ui/src/views/system/logicflow/editor/image/托盘.svg
new file mode 100644
index 000000000..552024a41
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/image/托盘.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59 (86127) - https://sketch.com -->
+    <title>托盘@1x</title>
+    <desc>Created with Sketch.</desc>
+    <g id="设备图标" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="托盘备份">
+            <g id="编组-9" transform="translate(0.000000, 3.000000)">
+                <rect id="矩形备份-28" fill="#536686" x="0" y="0" width="34" height="28" rx="1"></rect>
+                <path d="M33.5,26 C33.7761424,26 34,26.2238576 34,26.5 C34,26.7761424 33.7761424,27 33.5,27 L0.5,27 C0.223857625,27 3.38176876e-17,26.7761424 0,26.5 C-3.38176876e-17,26.2238576 0.223857625,26 0.5,26 L33.5,26 Z M33.5,23 C33.7761424,23 34,23.2238576 34,23.5 C34,23.7761424 33.7761424,24 33.5,24 L0.5,24 C0.223857625,24 3.38176876e-17,23.7761424 0,23.5 C-3.38176876e-17,23.2238576 0.223857625,23 0.5,23 L33.5,23 Z M33.5,20 C33.7761424,20 34,20.2238576 34,20.5 C34,20.7761424 33.7761424,21 33.5,21 L0.5,21 C0.223857625,21 3.38176876e-17,20.7761424 0,20.5 C-3.38176876e-17,20.2238576 0.223857625,20 0.5,20 L33.5,20 Z M33.5,17 C33.7761424,17 34,17.2238576 34,17.5 C34,17.7761424 33.7761424,18 33.5,18 L0.5,18 C0.223857625,18 3.38176876e-17,17.7761424 0,17.5 C-3.38176876e-17,17.2238576 0.223857625,17 0.5,17 L33.5,17 Z M33.5,14 C33.7761424,14 34,14.2238576 34,14.5 C34,14.7761424 33.7761424,15 33.5,15 L0.5,15 C0.223857625,15 3.38176876e-17,14.7761424 0,14.5 C-3.38176876e-17,14.2238576 0.223857625,14 0.5,14 L33.5,14 Z M33.5,11 C33.7761424,11 34,11.2238576 34,11.5 C34,11.7761424 33.7761424,12 33.5,12 L0.5,12 C0.223857625,12 3.38176876e-17,11.7761424 0,11.5 C-3.38176876e-17,11.2238576 0.223857625,11 0.5,11 L33.5,11 Z M33.5,8 C33.7761424,8 34,8.22385763 34,8.5 C34,8.77614237 33.7761424,9 33.5,9 L0.5,9 C0.223857625,9 3.38176876e-17,8.77614237 0,8.5 C-3.38176876e-17,8.22385763 0.223857625,8 0.5,8 L33.5,8 Z M33.5,5 C33.7761424,5 34,5.22385763 34,5.5 C34,5.77614237 33.7761424,6 33.5,6 L0.5,6 C0.223857625,6 3.38176876e-17,5.77614237 0,5.5 C-3.38176876e-17,5.22385763 0.223857625,5 0.5,5 L33.5,5 Z M33.5,2 C33.7761424,2 34,2.22385763 34,2.5 C34,2.77614237 33.7761424,3 33.5,3 L0.5,3 C0.223857625,3 3.38176876e-17,2.77614237 0,2.5 C-3.38176876e-17,2.22385763 0.223857625,2 0.5,2 L33.5,2 Z" id="形状结合" fill="#2C4369" opacity="0.229999989"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/nladmin-ui/src/views/system/logicflow/editor/index.vue b/nladmin-ui/src/views/system/logicflow/editor/index.vue
new file mode 100644
index 000000000..4b0e21381
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/editor/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <el-row style="margin: 5px">
+      <div id="container" class="container" />
+      <Diagram style="height: 100vh"/>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import Diagram from '@/views/system/logicflow/editor/components/Diagram'
+import '@logicflow/core/dist/style/index.css'
+import '@logicflow/extension/lib/style/index.css'
+export default {
+  name: 'StageEditor',
+  components: { Diagram }
+}
+</script>
+
+<style>
+html, body {
+  height: 100%;
+}
+body {
+  padding: 0;
+  margin: 0;
+}
+</style>
+<style scoped>
+.container {
+  background-color: #f8f9fa;
+  height: 100%;
+}
+</style>
diff --git a/nladmin-ui/src/views/system/logicflow/image/index.vue b/nladmin-ui/src/views/system/logicflow/image/index.vue
new file mode 100644
index 000000000..6c1eb6492
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/image/index.vue
@@ -0,0 +1,310 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
+      <div v-if="crud.props.searchToggle">
+        <!-- 搜索 -->
+        <el-select
+          v-model="query.device_type"
+          class="filter-item"
+          clearable
+          placeholder="设备类型"
+          size="small"
+          style="width: 450px"
+        >
+          <el-option v-for="item in device_types" :key="item.id" :label="item.label" :value="item.value" />
+        </el-select>
+        <rrOperation />
+      </div>
+      <crudOperation :permission="permission" />
+      <!--表单组件-->
+      <el-dialog
+        :before-close="crud.cancelCU"
+        :close-on-click-modal="false"
+        :title="crud.status.title"
+        :visible.sync="crud.status.cu > 0"
+        width="800px"
+      >
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
+          <el-form-item label="图片上传" prop="image_code">
+            <el-upload
+              :action="imagesUploadApi"
+              :before-upload="beforeUpload_u"
+              :file-list="fileList"
+              :headers="headers"
+              :limit="1"
+              :on-success="handleSuccess"
+              class="upload-demo"
+              multiple
+            >
+              <el-button size="small" type="primary">点击上传</el-button>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label="图片描述" prop="remark">
+            <el-input v-model="form.remark" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="适用驱动" prop="driver_code_json">
+            <el-transfer
+              v-model="value"
+              :data="data"
+              :filter-method="filterMethod"
+              :titles="['未选','已选']"
+              filter-placeholder="请输入驱动名称"
+              filterable
+              @change="handleChange"
+            />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="crud.cancelCU">取消</el-button>
+          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+        </div>
+      </el-dialog>
+      <!--表格渲染-->
+      <el-table
+        ref="table"
+        v-loading="crud.loading"
+        :data="crud.data"
+        size="small"
+        style="width: 100%;"
+        @selection-change="crud.selectionChangeHandler"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="图标" prop="image_name">
+          <template slot-scope="{row}">
+            <el-image
+              :preview-src-list="[baseApi + '/file/图片/' + row.image_code]"
+              :src=" baseApi + '/file/图片/' + row.image_code"
+              class="el-avatar"
+              fit="contain"
+              lazy
+            >
+              <div slot="error">
+                <i class="el-icon-document" />
+              </div>
+            </el-image>
+          </template>
+        </el-table-column>
+        <el-table-column label="适用驱动" prop="driver_code_json" />
+        <el-table-column label="备注" prop="remark" />
+        <el-table-column
+          v-permission="['admin','stageImage:edit','stageImage:del']"
+          align="center"
+          label="操作"
+          width="150px"
+        >
+          <template slot-scope="scope">
+            <udOperation
+              :data="scope.row"
+              :permission="permission"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页组件-->
+      <pagination />
+    </div>
+  </div>
+</template>
+
+<script>
+import crudStageImage from '@/api/logicflow/stageImage'
+import CRUD, { crud, form, header, presenter } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import udOperation from '@crud/UD.operation'
+import pagination from '@crud/Pagination'
+import { get } from '@/api/system/dictDetail'
+import { mapGetters } from 'vuex'
+import { getToken } from '@/utils/auth'
+
+const defaultForm = {
+  image_uuid: null,
+  image_name: null,
+  driver_code_json: null,
+  remark: null,
+  is_active: null,
+  is_delete: null,
+  create_by: null,
+  create_time: null,
+  update_by: null,
+  update_time: null,
+  image_code: null
+}
+export default {
+  name: 'StageImage',
+  components: { pagination, crudOperation, rrOperation, udOperation },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  cruds() {
+    return CRUD({
+      title: '舞台',
+      url: 'api/stageImage',
+      idField: 'image_uuid',
+      sort: 'image_uuid,desc',
+      crudMethod: { ...crudStageImage },
+      optShow: {
+        add: true,
+        edit: true,
+        del: true
+      }
+    })
+  },
+  data() {
+    const generateData = _ => {
+      const data = []
+      const cities = []
+      cities.forEach((city, index) => {
+        data.push({
+          label: city,
+          key: index,
+          cities: cities[index]
+        })
+      })
+      return data
+    }
+    return {
+      data: generateData(),
+      value: [],
+      cities: [],
+      filterMethod(query, item) {
+        return item.cities.indexOf(query) > -1
+      },
+      permission: {
+        add: ['admin', 'stageImage:add'],
+        edit: ['admin', 'stageImage:edit'],
+        del: ['admin', 'stageImage:del']
+      },
+      headers: { 'Authorization': getToken() },
+      rules: {
+        image_uuid: [
+          { required: true, message: '设备标识不能为空', trigger: 'blur' }
+        ],
+        image_name: [
+          { required: true, message: '设备名字不能为空', trigger: 'blur' }
+        ],
+        is_active: [
+          { required: true, message: '是否启用不能为空', trigger: 'blur' }
+        ],
+        is_delete: [
+          { required: true, message: '是否删除不能为空', trigger: 'blur' }
+        ],
+        create_by: [
+          { required: true, message: '创建者不能为空', trigger: 'blur' }
+        ],
+        create_time: [
+          { required: true, message: '创建时间不能为空', trigger: 'blur' }
+        ],
+        image_code: [
+          { required: true, message: '图标编码不能为空', trigger: 'blur' }
+        ]
+      },
+      fileList: [],
+      device_types: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'imagesUploadApi',
+      'baseApi'
+    ])
+  },
+  created() {
+    this.$nextTick(() => {
+      // 获取设备类型字典
+      get('device_type').then(data => {
+        this.device_types = data.content
+      })
+    })
+  },
+
+  mounted() {
+    this.getUserInfo()
+  },
+  methods: {
+    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
+    [CRUD.HOOK.beforeRefresh]() {
+      return true
+    },
+    [CRUD.HOOK.afterSubmit]() {
+      this.fileList = []
+      this.value = []
+      this.cities = []
+    }, [CRUD.HOOK.beforeToAdd]() {
+      this.fileList = []
+      this.value = []
+      this.cities = []
+    },
+    [CRUD.HOOK.afterToEdit]() {
+      const driver_code_json = this.form.driver_code_json
+      const json_arr = driver_code_json.split(',')
+      const new_arr = []
+      if (json_arr) {
+        json_arr.forEach(function(c) {
+          new_arr.push(c)
+        })
+      }
+      this.value = new_arr
+      let new_lst = []
+      const image_code = this.form.image_code
+      const image_name = this.form.image_name
+      new_lst = [{ name: image_code, url: image_name }]
+      this.fileList = new_lst
+    },
+    beforeUpload_u(file) {
+      const testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
+      const extension = (testmsg === 'png' || testmsg === 'jpg' || testmsg === 'svg')
+
+      let bool = false
+      if (extension) {
+        bool = true
+      } else {
+        bool = false
+      }
+      if (!extension) {
+        this.$confirm(`上传文件只能是png/jpg/svg格式!`)
+      }
+
+      return bool
+    },
+    handleSuccess(response) {
+      this.form.image_code = response.realName
+      this.form.image_name = response.path
+    },
+    handleChange(value) {
+      let a = ''
+      if (value) {
+        value.forEach(function(c, index) {
+          a = a + c
+          if ((index + 1) !== value.length) {
+            a = a + ','
+          }
+        })
+      }
+      this.form.driver_code_json = a
+    },
+    getUserInfo: function() {
+      const me = this
+      // 清空数据
+      me.data = []
+      me.value = []
+      get('device_type').then(device => {
+        if (device) {
+          device.content.forEach(function(c, index) {
+            me.cities.push(c.label)
+            me.data.push({
+              key: c.value,
+              label: c.label,
+              cities: c.label
+            })
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nladmin-ui/src/views/system/logicflow/index.vue b/nladmin-ui/src/views/system/logicflow/index.vue
new file mode 100644
index 000000000..cc41a4640
--- /dev/null
+++ b/nladmin-ui/src/views/system/logicflow/index.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
+      <crudOperation :permission="permission" />
+      <!--表单组件-->
+      <el-dialog
+        :close-on-click-modal="false"
+        :before-close="crud.cancelCU"
+        :visible.sync="crud.status.cu > 0"
+        :title="crud.status.title"
+        width="500px"
+      >
+        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+          <el-form-item v-if="false" label="舞台标识" prop="stage_uuid">
+            <el-input v-model="form.stage_uuid" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="舞台编码" prop="stage_code">
+            <el-input v-model="form.stage_code" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="舞台名字" prop="stage_name">
+            <el-input v-model="form.stage_name" style="width: 370px;" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="crud.cancelCU">取消</el-button>
+          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+        </div>
+      </el-dialog>
+      <!--表格渲染-->
+      <el-table
+        ref="table"
+        v-loading="crud.loading"
+        :data="crud.data"
+        size="small"
+        style="width: 100%;"
+        @selection-change="crud.selectionChangeHandler"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column v-if="false" prop="stage_uuid" label="舞台标识" />
+        <el-table-column prop="stage_code" label="舞台编码" />
+        <el-table-column prop="stage_name" label="舞台名字" />
+        <el-table-column prop="stage_data" label="舞台数据" />
+        <el-table-column prop="create_by" label="创建者" />
+        <el-table-column prop="create_time" label="创建时间" min-width="135" />
+        <el-table-column prop="update_by" label="修改者" />
+        <el-table-column prop="update_time" label="修改时间" min-width="135" />
+        <el-table-column v-permission="['admin','stage:edit','stage:del']" label="操作" width="150px" align="center">
+          <template slot-scope="scope">
+            <udOperation
+              :data="scope.row"
+              :permission="permission"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页组件-->
+      <pagination />
+    </div>
+  </div>
+</template>
+
+<script>
+import crudStage from '@/api/logicflow/stage'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+import udOperation from '@crud/UD.operation'
+import pagination from '@crud/Pagination'
+
+const defaultForm = {
+  stage_uuid: null,
+  stage_code: null,
+  stage_name: null,
+  stage_data: null,
+  is_active: null,
+  is_delete: null,
+  create_by: null,
+  create_time: null,
+  update_by: null,
+  update_time: null
+}
+export default {
+  name: 'Stage',
+  components: { pagination, crudOperation, udOperation },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  cruds() {
+    return CRUD({
+      title: '舞台',
+      url: 'api/stage',
+      idField: 'stage_uuid',
+      sort: 'stage_uuid,desc',
+      crudMethod: { ...crudStage },
+      optShow: {
+        add: true,
+        edit: true,
+        del: true
+      }
+    })
+  },
+  data() {
+    return {
+      permission: {
+        add: ['admin', 'stage:add'],
+        edit: ['admin', 'stage:edit'],
+        del: ['admin', 'stage:del']
+      },
+      rules: {
+        stage_code: [
+          { required: true, message: '舞台编码不能为空', trigger: 'blur' }
+        ],
+        stage_name: [
+          { required: true, message: '舞台名字不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
+    [CRUD.HOOK.beforeRefresh]() {
+      return true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nladmin-ui/src/views/system/monitor/device/XJDeviceMonitor.vue b/nladmin-ui/src/views/system/monitor/device/XJDeviceMonitor.vue
new file mode 100644
index 000000000..f6a8a1609
--- /dev/null
+++ b/nladmin-ui/src/views/system/monitor/device/XJDeviceMonitor.vue
@@ -0,0 +1,223 @@
+<template>
+  <el-dialog
+    title="监控详情"
+    append-to-body
+    :visible.sync="dialogVisible"
+    fullscreen
+    @open="open"
+    @close="close"
+  >
+    <el-row :gutter="20">
+      <el-col :span="18" style="border: 1px solid white">
+        <span />
+      </el-col>
+      <el-col :span="6" style="margin-bottom: 20px">
+        <!--        <span style="float: right">
+           <el-button icon="el-icon-close" size="mini" type="info" @click="dialogVisible = false">返 回</el-button>
+        </span>-->
+      </el-col>
+    </el-row>
+    <el-card class="box-card" shadow="never">
+      <el-form ref="form" disabled :inline="true" :model="form" :rules="rules" size="mini" label-width="80px">
+        <el-form-item label="设备编码">
+          <el-input v-model="device_code" placeholder="自动生产" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="设备名称" prop="dtl_count">
+          <el-input v-model="device_name" style="width: 200px;" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <div class="crud-opts2" style="margin-top: 30px;margin-bottom: 15px">
+      <el-form ref="form" disabled :inline="true" :model="form" :rules="rules" size="mini" label-width="200px">
+        <el-form-item label="心跳">
+          <el-input v-model="form.heartbeat" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="工作模式">
+          <el-input v-model="form.mode" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="故障">
+          <el-input v-model="form.error" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="故障次数">
+          <el-input v-model="form.error_num" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="待机时间(调试)">
+          <el-input v-model="form.ready_time" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="生产时间">
+          <el-input v-model="form.running_time" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="故障时间">
+          <el-input v-model="form.error_time" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="温度">
+          <el-input v-model="form.temperature" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="当前生产产品编号">
+          <el-input v-model="form.material" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="缺料信号">
+          <el-input v-model="form.lack_material" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="上料数量">
+          <el-input v-model="form.feeding_qty" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="下料数量">
+          <el-input v-model="form.blanking_qty" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="当前生产合格品数量">
+          <el-input v-model="form.qualified_qty" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="当前生产不合格品数量">
+          <el-input v-model="form.unqualified_qty" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="生产完成">
+          <el-input v-model="form.finish" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="任务号">
+          <el-input v-model="form.task" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="设备暂停">
+          <el-input v-model="form.pause" style="width: 200px;" />
+        </el-form-item>
+      </el-form>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { crud } from '@crud/crud'
+
+export default {
+  name: 'XJDeviceMonitor',
+  components: {},
+  mixins: [crud()],
+  props: {
+    dialogShow: {
+      type: Boolean,
+      default: false
+    },
+    openParam: {
+      type: Object
+    }
+  },
+  dicts: [],
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        heartbeat: '',
+        mode: '',
+        error: '',
+        error_num: '',
+        ready_time: '',
+        running_time: '',
+        error_time: '',
+        temperature: '',
+        material: '',
+        lack_material: '',
+        feeding_qty: '',
+        blanking_qty: '',
+        qualified_qty: '',
+        unqualified_qty: '',
+        finish: '',
+        task: '',
+        pause: ''
+      },
+      device_code: '',
+      device_name: '',
+      rules: {
+      }
+    }
+  },
+  watch: {
+    dialogShow: {
+      handler(newValue) {
+        this.dialogVisible = newValue
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.webSocket()
+    },
+    close() {
+      this.$emit('AddChanged')
+    },
+    setForm(data) {
+      this.dialogVisible = true
+      this.form = data.data
+      this.device_code = data.device_code
+      this.device_name = data.device_name
+      // this.form = row
+    },
+    webSocket() {
+      const that = this
+      if (typeof (WebSocket) === 'undefined') {
+        this.$notify({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const id = 'xj_device_monitor'
+        // 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
+        // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
+
+        // const wsUri = process.env.VUE_APP_WS_API + '/webSocket/' + id
+        const wsUri = window.g.prod.VUE_APP_BASE_API.replace('http', 'ws') + '/webSocket/' + id
+        this.socket = new WebSocket(wsUri)
+        // 监听socket打开
+        this.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+          // that.socket.send('测试客户端发送消息')
+        }
+
+        // 监听socket消息接收
+        this.socket.onmessage = function(msg) {
+          const list = JSON.parse(msg.data).msg.detail
+          // console.log(list)
+
+          for (const item of list) {
+            const obj = JSON.parse(JSON.stringify(item))
+            if (obj.device_code === that.device_code) {
+              that.form = obj.data
+            }
+          }
+        }
+
+        // 监听socket错误
+        this.socket.onerror = function() {
+          that.$notify({
+            title: '错误',
+            message: '服务器错误，无法接收实时报警信息',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        this.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.crud-opts2 {
+  padding: 0 0;
+  display: -webkit-flex;
+  display: flex;
+  align-items: center;
+}
+.crud-opts2 .crud-opts-right2 {
+  margin-left: auto;
+  padding: 4px 4px;
+}
+.input-with-select  {
+  background-color: #fff;
+}
+</style>
diff --git a/nladmin-ui/src/views/system/monitor/device/index.vue b/nladmin-ui/src/views/system/monitor/device/index.vue
new file mode 100644
index 000000000..7f6596baf
--- /dev/null
+++ b/nladmin-ui/src/views/system/monitor/device/index.vue
@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <el-row>
+      <div id="container" className="container" />
+    </el-row>
+  </div>
+</template>
+
+<script>
+import crudStage from '@/api/logicflow/stage'
+import paramCrud from '@/api/system/param'
+import '@logicflow/core/dist/style/index.css'
+import '@logicflow/extension/lib/style/index.css'
+
+import { LogicFlow } from '@logicflow/core'
+import { registerCustomElement } from '@/views/system/logicflow/editor/components/node'
+let data = {}
+let lf = ''
+export default {
+  name: 'MonitorDevice',
+  data() {
+    return {
+      stageParam: 'test', // 舞台参数
+      dialogDeviceMsgVisible: false,
+      device_code: null,
+      tops: '20vh',
+      stage_code: '',
+      stageSelectList: [],
+      arr: [], // 显示数组
+      dialogFormVisible: false,
+      dialogFormVisible1: false,
+      dialogFormVisible2: false,
+      dialogFormVisible3: false,
+      dialogFormVisible4: false,
+      form: {
+        device_code: '',
+        hasGoodStatus: null,
+        barcode: '',
+        suspended: null,
+        material_type: '',
+        requireSucess: '',
+        fullrequireSucess: ''
+      },
+      allDeviceMsg: [],
+      msgTop: '200px',
+      msgLeft: '200px'
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    // 流程图初始化
+    init() {
+      // 初始化配置
+      lf = new LogicFlow({
+        overlapMode: 1,
+        container: document.querySelector('#container'), // 容器
+        // 画布配置
+        // width: window.innerWidth, // 宽度
+        height: window.innerHeight, // 高度
+        grid: { // 不用格子直接显示，使用背景
+          visible: false,
+          type: 'mesh',
+          size: 5
+        },
+        background: {
+          backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")',
+          backgroundRepeat: 'repeat'
+        },
+        adjustEdge: false,
+        adjustEdgeMiddle: false,
+        adjustEdgeStartAndEnd: false,
+        adjustNodePosition: false,
+        hideAnchors: true,
+        nodeTextEdit: false,
+        edgeTextEdit: false
+      })
+      lf.setTheme(
+        {
+          baseEdge: { strokeWidth: 1 },
+          baseNode: { strokeWidth: 1 },
+          nodeText: { overflowMode: 'autoWrap', lineHeight: 1.5 },
+          edgeText: { overflowMode: 'autoWrap', lineHeight: 1.5 }
+        }
+      )
+      // 注册自定义元素
+      registerCustomElement(lf)
+      // 删除默认的右键菜单
+      lf.extension.menu.setMenuConfig({
+        nodeMenu: false
+      })
+      lf.on('node:click', (data, e) => { // 鼠标点击节点
+        // 展开显示设备信息
+        console.log('1')
+      })
+      lf.on('node:contextmenu', (data, e, position) => { // 右键
+        console.log('2')
+      })
+      // 开始渲染
+      lf.render(data)
+      this.initStageData()
+    },
+    initStageData() {
+      // 获取舞台编码
+      paramCrud.getStageCodeByCode(this.stageParam).then(res => {
+        if (res.value !== undefined) {
+          crudStage.getNewStageDataByCode(res.value).then(res => {
+            data = JSON.parse(res.stage_data)
+            lf.render(data)
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+html, body {
+  height: 100%;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+}
+</style>
+<style scoped>
+.container {
+  background-color: #f8f9fa;
+  height: 100%;
+}
+.newDialog /deep/ .el-dialog__header {
+  padding: 1vh 1vw 0 1vw;
+}
+.newDialog /deep/ .el-dialog__body {
+  padding: 1vh 1vw;
+}
+.toolbar-sty {
+  position: absolute;
+  margin-top: 5px;
+  top: 0;
+  padding: 5px;
+  left: 30px;
+  height: 45px;
+  /*width: 310px;*/
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e5e5e5;
+  z-index: 10;
+  background: #e5e5e5;
+}
+</style>