设备图片上传更新与编辑功能提示

acs/hd/nladmin-system/src/main/java/org/nl/logicflow/rest/StageImageController.java

@@ -5,13 +5,17 @@ import io.swagger.annotations.ApiOperation;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.nl.annotation.Log;
+import org.nl.domain.LocalStorage;
+import org.nl.exception.BadRequestException;
 import org.nl.logicflow.service.StageImageService;
 import org.nl.logicflow.service.dto.StageImageDto;
+import org.nl.utils.FileUtil;
 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 org.springframework.web.multipart.MultipartFile;
 
 import java.util.Map;
 
@@ -70,4 +74,16 @@ public class StageImageController {
     public ResponseEntity<Object> selectList() {
         return new ResponseEntity<>(stageImageService.selectList(), HttpStatus.OK);
     }
+
+    @PostMapping({"/pictures"})
+    @ApiOperation("上传图片")
+    public ResponseEntity<Object> upload(@RequestParam MultipartFile file) {
+        String suffix = FileUtil.getExtensionName(file.getOriginalFilename());
+        if (!"图片".equals(FileUtil.getFileType(suffix))) {
+            throw new BadRequestException("只能上传图片");
+        } else {
+            LocalStorage localStorage = stageImageService.upload((String)null, file);
+            return new ResponseEntity(localStorage, HttpStatus.OK);
+        }
+    }
 }

acs/hd/nladmin-system/src/main/java/org/nl/logicflow/service/StageImageService.java

@@ -1,8 +1,10 @@
 package org.nl.logicflow.service;
 
 import com.alibaba.fastjson.JSONArray;
+import org.nl.domain.LocalStorage;
 import org.nl.logicflow.service.dto.StageImageDto;
 import org.springframework.data.domain.Pageable;
+import org.springframework.web.multipart.MultipartFile;
 
 import java.util.Map;
 
@@ -56,4 +58,12 @@ public interface StageImageService {
      * @return
      */
     JSONArray selectList();
+
+    /**
+     * 上传图片
+     * @param name
+     * @param file
+     * @return
+     */
+    LocalStorage upload(String name, MultipartFile file);
 }

acs/hd/nladmin-system/src/main/java/org/nl/logicflow/service/impl/StageImageServiceImpl.java

@@ -2,13 +2,20 @@ package org.nl.logicflow.service.impl;
 
 import cn.hutool.core.date.DateUtil;
 import cn.hutool.core.util.IdUtil;
+import cn.hutool.core.util.ObjectUtil;
+import cn.hutool.core.util.StrUtil;
 import com.alibaba.fastjson.JSONArray;
 import com.alibaba.fastjson.JSONObject;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
+import org.nl.config.FileProperties;
+import org.nl.domain.LocalStorage;
 import org.nl.exception.BadRequestException;
 import org.nl.logicflow.service.StageImageService;
 import org.nl.logicflow.service.dto.StageImageDto;
+import org.nl.logicflow.utils.StageImageUtil;
+import org.nl.repository.LocalStorageRepository;
+import org.nl.utils.FileUtil;
 import org.nl.utils.SecurityUtils;
 import org.nl.wql.core.bean.ResultBean;
 import org.nl.wql.core.bean.WQLObject;
@@ -16,7 +23,9 @@ import org.nl.wql.util.WqlUtil;
 import org.springframework.data.domain.Pageable;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.multipart.MultipartFile;
 
+import java.io.File;
 import java.util.Map;
 
 /**
@@ -28,6 +37,8 @@ import java.util.Map;
 @RequiredArgsConstructor
 @Slf4j
 public class StageImageServiceImpl implements StageImageService {
+    private final FileProperties properties;
+    private final LocalStorageRepository localStorageRepository;
     @Override
     public Map<String, Object> queryAll(Map whereJson, Pageable page) {
         String where = "1=1";
@@ -102,10 +113,30 @@ public class StageImageServiceImpl implements StageImageService {
             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]);
+            json.put("image_name", obj.getString("image_code").toString().split("\\.")[0]);
             result.add(json);
         }
         return result;
     }
+
+    @Override
+    public LocalStorage upload(String name, MultipartFile multipartFile) {
+        FileUtil.checkSize(this.properties.getMaxSize(), multipartFile.getSize());
+        String suffix = FileUtil.getExtensionName(multipartFile.getOriginalFilename());
+        String type = FileUtil.getFileType(suffix);
+        File file = StageImageUtil.upload(multipartFile, this.properties.getPath().getPath() + type + File.separator);
+        if (ObjectUtil.isNull(file)) {
+            throw new BadRequestException("上传失败");
+        } else {
+            try {
+                name = StrUtil.isEmpty(name) ? FileUtil.getFileNameNoEx(multipartFile.getOriginalFilename()) : name;
+                LocalStorage localStorage = new LocalStorage(file.getName(), name, suffix, file.getPath(), type, FileUtil.getSize(multipartFile.getSize()));
+                return (LocalStorage)this.localStorageRepository.save(localStorage);
+            } catch (Exception var7) {
+                FileUtil.del(file);
+                throw var7;
+            }
+        }
+    }
 }
 

acs/hd/nladmin-system/src/main/java/org/nl/logicflow/utils/StageImageUtil.java

@@ -0,0 +1,36 @@
+package org.nl.logicflow.utils;
+
+import lombok.extern.slf4j.Slf4j;
+import org.nl.utils.FileUtil;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.io.File;
+
+/**
+ * @Author: lyd
+ * @Description: 图片上传的工具类
+ * @Date: 2022-08-18
+ */
+@Slf4j
+public class StageImageUtil extends cn.hutool.core.io.FileUtil {
+    public static File upload(MultipartFile file, String filePath) {
+        FileUtil fileUtil = new FileUtil();
+        String name = fileUtil.getFileNameNoEx(file.getOriginalFilename());
+        String suffix = fileUtil.getExtensionName(file.getOriginalFilename());
+
+        try {
+            String fileName = name + "." + suffix;
+            String path = filePath + fileName;
+            File dest = (new File(path)).getCanonicalFile();
+            if (!dest.getParentFile().exists() && !dest.getParentFile().mkdirs()) {
+                System.out.println("was not successful.");
+            }
+
+            file.transferTo(dest);
+            return dest;
+        } catch (Exception var10) {
+            log.error(var10.getMessage(), var10);
+            return null;
+        }
+    }
+}

acs/qd/src/store/modules/api.js

@@ -9,7 +9,8 @@ const api = {
     // 实时控制台
     socketApi: baseUrl + '/websocket?token=kl',
     // 图片上传
-    imagesUploadApi: baseUrl + '/api/localStorage/pictures',
+    // imagesUploadApi: baseUrl + '/api/localStorage/pictures',
+    imagesUploadApi: baseUrl + '/api/stageImage/pictures',
     // 修改头像
     updateAvatarApi: baseUrl + '/api/users/updateAvatar',
     // 上传文件到七牛云

acs/qd/src/views/system/logicflow/editor/components/DiagramToolbar.vue

@@ -24,40 +24,64 @@
       <step-foward size="18" />
     </div>
     <div style="margin-right: 5px">
-      <svg-icon class="toolbar-item" icon-class="lock" @click="$_lock"/>
+      <el-tooltip class="item" effect="dark" content="锁定" placement="top">
+        <svg-icon class="toolbar-item" icon-class="lock" @click="$_lock"/>
+      </el-tooltip>
     </div>
     <div style="margin-right: 5px">
-      <svg-icon class="toolbar-item" icon-class="unlock" @click="$_unlock"/>
+      <el-tooltip class="item" effect="dark" content="解锁" placement="top">
+        <svg-icon class="toolbar-item" icon-class="unlock" @click="$_unlock"/>
+      </el-tooltip>
     </div>
     <div style="margin-right: 5px">
-      <svg-icon class="toolbar-item" icon-class="verticalAlign" @click="$_verticalAlign"/>
+      <el-tooltip class="item" effect="dark" content="垂直对齐" placement="top">
+        <svg-icon class="toolbar-item" icon-class="verticalAlign" @click="$_verticalAlign"/>
+      </el-tooltip>
     </div>
     <div style="margin-right: 5px">
-      <svg-icon class="toolbar-item" icon-class="horizontalAlign" @click="$_horizontalAlign"/>
+      <el-tooltip class="item" effect="dark" content="水平对齐" placement="top">
+        <svg-icon class="toolbar-item" icon-class="horizontalAlign" @click="$_horizontalAlign"/>
+      </el-tooltip>
     </div>
     <div style="margin-right: 5px">
-      <svg-icon class="toolbar-item" icon-class="leftAlign" @click="$_leftAlign"/>
+      <el-tooltip class="item" effect="dark" content="左边对齐" placement="top">
+        <svg-icon class="toolbar-item" icon-class="leftAlign" @click="$_leftAlign"/>
+      </el-tooltip>
     </div>
     <div style="margin-right: 5px">
-      <svg-icon class="toolbar-item" icon-class="rightAlign" @click="$_rightAlign"/>
+      <el-tooltip class="item" effect="dark" content="右边对齐" placement="top">
+        <svg-icon class="toolbar-item" icon-class="rightAlign" @click="$_rightAlign"/>
+      </el-tooltip>
     </div>
     <div style="margin-right: 5px">
-      <svg-icon class="toolbar-item" icon-class="upAlign" @click="$_upAlign"/>
+      <el-tooltip class="item" effect="dark" content="顶部对齐" placement="top">
+        <svg-icon class="toolbar-item" icon-class="upAlign" @click="$_upAlign"/>
+      </el-tooltip>
     </div>
     <div style="margin-right: 5px">
-      <svg-icon class="toolbar-item" icon-class="downAlign" @click="$_downAlign"/>
+      <el-tooltip class="item" effect="dark" content="底部对齐" placement="top">
+        <svg-icon class="toolbar-item" icon-class="downAlign" @click="$_downAlign"/>
+      </el-tooltip>
     </div>
     <div style="margin-right: 5px">
-      <svg-icon class="toolbar-item" icon-class="horizontalDistribution" @click="$_horizontalDistribution"/>
+      <el-tooltip class="item" effect="dark" content="水平分布" placement="top">
+        <svg-icon class="toolbar-item" icon-class="verticalDistribution" @click="$_horizontalDistribution"/>
+      </el-tooltip>
     </div>
     <div style="margin-right: 5px">
-      <svg-icon class="toolbar-item" icon-class="verticalDistribution" @click="$_verticalDistribution"/>
+      <el-tooltip class="item" effect="dark" content="垂直分布" placement="top">
+        <svg-icon class="toolbar-item" icon-class="horizontalDistribution" @click="$_verticalDistribution"/>
+      </el-tooltip>
     </div>
     <div style="margin-right: 5px">
-      <svg-icon class="toolbar-item" icon-class="clear" @click="$_cleanGraph"/>
+      <el-tooltip class="item" effect="dark" content="清空画布" placement="top">
+        <svg-icon class="toolbar-item" icon-class="clear" @click="$_cleanGraph"/>
+      </el-tooltip>
     </div>
     <div style="margin-right: 5px">
-      <svg-icon class="toolbar-item" icon-class="save" @click="$_saveGraph"/>
+      <el-tooltip class="item" effect="dark" content="保存" placement="top">
+        <svg-icon class="toolbar-item" icon-class="save" @click="$_saveGraph"/>
+      </el-tooltip>
     </div>
     <div>
       <el-select v-model="linetype" size="mini" style="width: 80px" @change="$_changeLineType">

acs/qd/src/views/system/logicflow/editor/components/PropertyPanel.vue

@@ -135,7 +135,6 @@
       </div>
       <div class="setting-item">
         <span>设备绑定</span>
-<!--        <el-input v-model="style.device" placeholder="输入设备号" size="small" @change="$_changeDevice" />-->
         <el-select
           filterable
           v-model="style.device"
@@ -189,7 +188,7 @@
 import { Sketch } from 'vue-color'
 import { shortStyles, borderStyles, fontFamilies } from '../constant'
 import crudStageImage from '@/api/logicflow/stageImage'
-import crudDevice, {selectDeviceList} from '@/api/acs/device/device'
+import crudDevice from '@/api/acs/device/device'
 
 export default {
   components: {

acs/qd/src/views/system/logicflow/editor/components/node/html/htmlNode.js

@@ -40,6 +40,7 @@ class ButtonNode extends HtmlResize.view {
     let faultDisplay = 'none'
     if (properties.imageUrl) { // 与图片尾部拼接
       imageUrl = baseUrl + '/file/图片/' + properties.imageUrl
+      console.log('图片地址：', imageUrl)
     }
     if (!properties.transform) { // 如果没有值，设置默认为0度
       properties.transform = 0