From 65a79e6ec47a067136f5e9297ca339e8c20747f1 Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期五, 17 五月 2024 10:19:10 +0800
Subject: [PATCH] svgEditor
---
web/src/views/modules/taskReliability/RBD-edit-img.vue | 8 +
web/src/views/modules/sysPictureBase/SysPictureBase.vue | 6
web/src/views/modules/SVGEditor.vue | 80 ++++++++++++++++
web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue | 102 +++++++++++++------
modules/mainPart/src/main/java/com/zt/life/modules/mainPart/basicInfo/model/ProductImg.java | 5
modules/mainPart/src/main/resources/mapper/basicInfo/XhProductModelDao.xml | 1
modules/mainPart/src/main/java/com/zt/life/modules/mainPart/sysPictureBase/controller/SysPictureBaseController.java | 45 ++++----
modules/mainPart/src/main/java/com/zt/life/modules/mainPart/sysPictureBase/model/SysPictureBase.java | 5
8 files changed, 190 insertions(+), 62 deletions(-)
diff --git a/modules/mainPart/src/main/java/com/zt/life/modules/mainPart/basicInfo/model/ProductImg.java b/modules/mainPart/src/main/java/com/zt/life/modules/mainPart/basicInfo/model/ProductImg.java
index 38e4fda..5214b23 100644
--- a/modules/mainPart/src/main/java/com/zt/life/modules/mainPart/basicInfo/model/ProductImg.java
+++ b/modules/mainPart/src/main/java/com/zt/life/modules/mainPart/basicInfo/model/ProductImg.java
@@ -14,7 +14,7 @@
/**
* product_model
*
- * @author zt generator
+ * @author zt generator
* @since 1.0.0 2024-02-29
*/
@Data
@@ -50,6 +50,9 @@
private String taskMtbcfOther;
@TableField(exist = false)
+ private String svgContent;
+
+ @TableField(exist = false)
private Integer isRepair;
@TableField(exist = false)
private Integer repairDistribType;
diff --git a/modules/mainPart/src/main/java/com/zt/life/modules/mainPart/sysPictureBase/controller/SysPictureBaseController.java b/modules/mainPart/src/main/java/com/zt/life/modules/mainPart/sysPictureBase/controller/SysPictureBaseController.java
index d240b5e..8147d2a 100644
--- a/modules/mainPart/src/main/java/com/zt/life/modules/mainPart/sysPictureBase/controller/SysPictureBaseController.java
+++ b/modules/mainPart/src/main/java/com/zt/life/modules/mainPart/sysPictureBase/controller/SysPictureBaseController.java
@@ -67,39 +67,24 @@
@PostMapping("save")
@ApiOperation("淇濆瓨")
@LogOperation("淇濆瓨")
- public Result save(@RequestBody MultipartFile file, Long id, Integer isDefault,
- String name, String contentType, Integer productType, String remark) {
- SysPictureBase sysPictureBase;
- SysPictureBase pictureBase = sysPictureBaseService.getDefaultImg(productType);
- if (id != 0) {
- sysPictureBase = sysPictureBaseService.get(id);
- sysPictureBase.setIsDefault(isDefault);
- sysPictureBase.setName(name);
- sysPictureBase.setContentType(contentType);
- sysPictureBase.setProductType(productType);
- sysPictureBase.setRemark(remark);
+ public Result save(@RequestBody SysPictureBase sysPictureBase) {
+ if (sysPictureBase.getId() != null) {
sysPictureBaseService.update(sysPictureBase);
} else {
- sysPictureBase = new SysPictureBase();
- sysPictureBase.setIsDefault(isDefault);
- sysPictureBase.setName(name);
- sysPictureBase.setContentType(contentType);
- sysPictureBase.setProductType(productType);
- sysPictureBase.setRemark(remark);
sysPictureBaseService.insert(sysPictureBase);
}
if (sysPictureBase.getIsDefault()==1){
- if (pictureBase.getId()==null){
+ if (sysPictureBase.getId()==null){
sysPictureBaseService.updateByDefault(sysPictureBase.getId(),sysPictureBase.getProductType());
sysPictureBaseService.updateProdeuctImg(sysPictureBase.getId(),sysPictureBase.getProductType(),null);
}else{
- if (!sysPictureBase.getId().equals(pictureBase.getId())){
+ if (!sysPictureBase.getId().equals(sysPictureBase.getId())){
sysPictureBaseService.updateByDefault(sysPictureBase.getId(),sysPictureBase.getProductType());
- sysPictureBaseService.updateProdeuctImg(sysPictureBase.getId(),sysPictureBase.getProductType(),pictureBase.getId());
+ sysPictureBaseService.updateProdeuctImg(sysPictureBase.getId(),sysPictureBase.getProductType(),sysPictureBase.getId());
}
}
}
- if (file != null) {
+/* if (file != null) {
BufferedImage bufferedImage = null;
try {
String fileName = file.getOriginalFilename();
@@ -123,8 +108,7 @@
} catch (IOException e) {
e.printStackTrace();
}
-
- }
+ }*/
return Result.ok();
}
@@ -157,6 +141,21 @@
}
}
+ @RequestMapping("/getSvgImage")
+ public void getSvgImage(HttpServletResponse response, Long id) {
+ try {
+ SysPictureBase data = sysPictureBaseService.get(id);
+ String svgContent = data.getSvgContent();
+ response.setContentType("image/svg+xml");
+ response.getWriter().write(svgContent);
+ response.getWriter().flush();
+ response.getWriter().close();
+
+ } catch (IOException e) {
+ e.printStackTrace();
+ }
+ }
+
@GetMapping("/getDefaultImg")
public Result<SysPictureBase> getDefaultImg(Integer productType) {
SysPictureBase data = sysPictureBaseService.getDefaultImg(productType);
diff --git a/modules/mainPart/src/main/java/com/zt/life/modules/mainPart/sysPictureBase/model/SysPictureBase.java b/modules/mainPart/src/main/java/com/zt/life/modules/mainPart/sysPictureBase/model/SysPictureBase.java
index d7ea7cf..5781190 100644
--- a/modules/mainPart/src/main/java/com/zt/life/modules/mainPart/sysPictureBase/model/SysPictureBase.java
+++ b/modules/mainPart/src/main/java/com/zt/life/modules/mainPart/sysPictureBase/model/SysPictureBase.java
@@ -9,7 +9,7 @@
/**
* sys_picture_base
*
- * @author zt generator
+ * @author zt generator
* @since 1.0.0 2024-02-27
*/
@Data
@@ -30,6 +30,9 @@
@ApiModelProperty(value = "鍥剧墖楂樺害")
private Integer height;
+ @ApiModelProperty(value = "svg鍥剧墖")
+ private String svgContent;
+
@ApiModelProperty(value = "妫�绱㈠叧閿瓧")
private String contentType;
diff --git a/modules/mainPart/src/main/resources/mapper/basicInfo/XhProductModelDao.xml b/modules/mainPart/src/main/resources/mapper/basicInfo/XhProductModelDao.xml
index 5bb9c6b..9dbaf1e 100644
--- a/modules/mainPart/src/main/resources/mapper/basicInfo/XhProductModelDao.xml
+++ b/modules/mainPart/src/main/resources/mapper/basicInfo/XhProductModelDao.xml
@@ -47,6 +47,7 @@
a.`NAME` as imgName,
'node' as nodeType,
'' as nodeTypeExt,
+ s.svg_content as svgContent,
s.width as imgWidth,
s.height as imgHeight,
a.id as dataId,
diff --git a/web/src/views/modules/SVGEditor.vue b/web/src/views/modules/SVGEditor.vue
new file mode 100644
index 0000000..49b898c
--- /dev/null
+++ b/web/src/views/modules/SVGEditor.vue
@@ -0,0 +1,80 @@
+<template>
+ <div>
+ <el-form :inline="true">
+ <zt-form-item>
+ <zt-button style="margin-left: 10px" @click="svgCanvas()">淇濆瓨</zt-button>
+ </zt-form-item>
+ </el-form>
+ <iframe src="/SVGOrigin/Method-Draw-master/editor/index.html" ref="myIframe" width="100%"
+ style="height:calc(100vh - 125px)">
+
+ </iframe>
+ </div>
+</template>
+
+<script>
+ // 鐩戝惉iframe鍙戦�佽繃鏉ョ殑娑堟伅
+ window.addEventListener('message', (event) => {
+ if (event.origin === "/SVGOrigin/Method-Draw-master/editor/index.html") { // 纭繚娑堟伅鏉ユ簮鍙潬
+ console.log('Received message from iframe:', event.data);
+ }
+ })
+ export default {
+ name: "SVGEditor",
+ data(){
+ return {
+
+ }
+ },
+ components:{
+
+ },
+ methods:{
+ handleIframeMessage(event){
+ // 浠� iframe 鎺ユ敹鍒扮殑鏁版嵁
+ const svgData = event.data;
+
+ // 鍦ㄨ繖閲屽鐞嗘帴鏀跺埌鐨勬暟鎹�
+ console.log('svgData:', svgData);
+ },
+ svgCanvas(){
+ const iframe = this.$refs.myIframe;
+ const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+ const iframeWindow = this.$refs.myIframe.contentWindow;
+ // 鑾峰彇 iframe 涓� id 涓� tool_save 鐨勬寜閽厓绱�
+ const saveButton = iframeDocument.getElementById('tool_save');
+ if (saveButton) {
+ // 鍒涘缓涓�涓柊鐨勯紶鏍囨姮璧蜂簨浠讹紙mouseup锛�
+ const mouseUpEvent = new MouseEvent('mouseup', {
+ bubbles: true,
+ cancelable: true,
+ view: window
+ });
+ // 鐩戝惉榧犳爣鎶捣浜嬩欢
+ saveButton.addEventListener('mouseup', function(event) {
+ console.log('Mouse Up Event Triggered');
+ iframeWindow.postMessage('triggerEvent', '*')
+ setTimeout(()=>{
+ window.addEventListener('message', this.handleIframeMessage)
+ },0)
+
+ });
+ // 瑙﹀彂榧犳爣鎶捣浜嬩欢
+ saveButton.dispatchEvent(mouseUpEvent);
+ } else {
+ console.log('Button not found in iframe');
+ }
+ }
+ },
+ mounted() {
+ window.addEventListener('message', this.handleIframeMessage);
+ },
+ beforeDestroy() {
+ window.removeEventListener('message', this.handleIframeMessage);
+ },
+ }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue b/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue
index 27716e4..412fe0c 100644
--- a/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue
+++ b/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue
@@ -1,7 +1,6 @@
<template>
- <zt-dialog ref="dialog" @confirm="formSubmit">
- <el-form :model="dataForm" ref="dataForm" :disabled="dataForm.disabled" label-width="120px">
-
+ <zt-dialog ref="dialog" @confirm="formSubmit" column="4">
+ <el-form :model="dataForm" style="padding: 0" ref="dataForm" :disabled="dataForm.disabled" label-width="120px">
<zt-form-item label="鍥剧墖鍚嶇О" prop="name" rules="required">
<el-input v-model="dataForm.name"></el-input>
</zt-form-item>
@@ -14,13 +13,20 @@
<zt-form-item label="妫�绱㈠叧閿瓧" prop="contentType">
<el-input v-model="dataForm.contentType"></el-input>
</zt-form-item>
- <zt-form-item>
- <el-upload :limit="1" :http-request="httpRequest" :before-upload="beforeUpload" :on-exceed="handleExceed">
- <el-button slot="trigger" size="small" type="primary">閫夊彇鏂囦欢</el-button>
- </el-upload>
- <el-image v-if="dataForm.id" :src="url+dataForm.id" style="height: 50px;width: 50px"></el-image>
- </zt-form-item>
+ <input type="hidden" id="svgContentId" :value="dataForm.svgContent"/>
+ <zt-form-item>
+<!-- <el-upload action="*" :on-change="uploadSvgContent">-->
+<!-- <el-button slot="trigger" size="small" type="primary">閫夊彇鏂囦欢</el-button>-->
+<!-- </el-upload>-->
+ <label class="custom-file-upload">
+ <input type="file" @change="uploadSvgContent" />
+ </label>
+ </zt-form-item>
</el-form>
+ <iframe :src='SVGEditorUrl' ref="myIframe" width="100%" id="iframe"
+ style="height:calc(100vh - 300px)">
+
+ </iframe>
</zt-dialog>
</template>
@@ -30,12 +36,14 @@
export default {
data() {
return {
+ SVGEditorUrl: `/SVGOrigin/Method-Draw-master/editor/index.html`,
url: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=`,
fileList: [],
dataForm: {
id: '',
isDefault: '',
name: '',
+ svgContent: '',
contentType: '',
productType: '',
remark: ''
@@ -47,6 +55,16 @@
}
},
methods: {
+ async init() {
+ if (this.dataForm.id) {
+ let res = await this.$http.get(`/sysPictureBase/${this.dataForm.id}`)
+ this.dataForm = {
+ ...this.dataForm,
+ ...res.data
+ }
+ console.log(this.dataForm,'this.dataForm this.dataForm')
+ }
+ },
httpRequest(option) {
this.fileList.length = 0
this.fileList.push(option)
@@ -70,7 +88,7 @@
this.$message({type: 'error', message: '鏈�澶氭敮鎸�1涓檮浠朵笂浼�'})
},
// 鑾峰彇淇℃伅
- async getInfo() {
+ async getInfo2() {
let res = await this.$http.get(`/sysPictureBase/${this.dataForm.id}`)
this.dataForm = {
...this.dataForm,
@@ -80,35 +98,52 @@
},
// 琛ㄥ崟鎻愪氦
async formSubmit() {
- console.log(this.dataForm, 'async formSubmit()')
+ const iframeWindow = this.$refs.myIframe.contentWindow;
+ this.dataForm.svgContent = iframeWindow.getSVGContentTest()
+ console.log(this.dataForm.svgContent+'this.dataForm.svgContent')
+ this.$http.post('/sysPictureBase/save', this.dataForm).then(res => {
+ if (res.success) {
+ console.log(this.dataForm,'this.dataForm')
+ this.$tip.success()
+ this.$refs.dialog.close()
+ this.$emit('refreshDataList')
+ }
+ })
// 浣跨敤form琛ㄥ崟鐨勬暟鎹牸寮�
- const params = new FormData()
- // 灏嗕笂浼犳枃浠舵暟缁勪緷娆℃坊鍔犲埌鍙傛暟paramsData涓�
- this.fileList.forEach((x) => {
- params.append('file', x.file)
- });
- // 灏嗚緭鍏ヨ〃鍗曟暟鎹坊鍔犲埌params琛ㄥ崟涓�
- if (!this.dataForm.id){
- this.dataForm.id = 0
+ },
+ async uploadSvgContent(event) {
+ const iframeWindow = this.$refs.myIframe.contentWindow
+ const file = event.target.files[0];
+ // 鍙互鍦ㄨ繖閲岃繘琛岃繘涓�姝ョ殑鏂囦欢澶勭悊锛屾瘮濡傝鍙栨枃浠跺唴瀹圭瓑鎿嶄綔
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const fileContent = e.target.result;
+ console.log('File content:', fileContent);
+ iframeWindow.setSvgContent(fileContent)
+ }
+ reader.readAsText(file); // 浠ユ枃鏈舰寮忚鍙栨枃浠跺唴瀹�
}
- params.append('id', this.dataForm.id)
- params.append('isDefault', this.dataForm.isDefault)
- params.append('name', this.dataForm.name)
- params.append('contentType', this.dataForm.contentType)
- params.append('productType', this.dataForm.productType)
- params.append('remark', this.dataForm.remark)
- console.log(params, 'async formSubmit()')
- let res = await this.$http.post('/sysPictureBase/save', params)
- if (res.success) {
- await this.$tip.success()
- this.$refs.dialog.close()
- this.$emit('refreshDataList')
- }
+ // iframeWindow.setSvgContent(data)
+ // 浣跨敤form琛ㄥ崟鐨勬暟鎹牸寮�
}
- }
+ },
+ mounted() {
+ // window.addEventListener('message', this.handleIframeMessage);
+ },
+ beforeDestroy() {
+ window.removeEventListener('message', this.handleIframeMessage);
+ },
}
</script>
<style>
+ .custom-file-upload {
+ border: 1px solid #ccc;
+ display: inline-block;
+ padding: 0 12px;
+ cursor: pointer;
+ background-color: #f9f9f9;
+ }
.img-sc > .el-form-item > .el-form-item__content {
width: 100%;
}
@@ -117,6 +152,7 @@
margin-top: 10px !important;
margin-bottom: 0 !important;
}
+
/*.zt .el-dialog .el-dialog__body .el-form {
min-height: 310px !important;
}*/
diff --git a/web/src/views/modules/sysPictureBase/SysPictureBase.vue b/web/src/views/modules/sysPictureBase/SysPictureBase.vue
index 69e8daf..668f854 100644
--- a/web/src/views/modules/sysPictureBase/SysPictureBase.vue
+++ b/web/src/views/modules/sysPictureBase/SysPictureBase.vue
@@ -22,9 +22,9 @@
<el-table-column type="selection" width="40" align="center"/>
<el-table-column prop="name" label="鍥剧墖鍚嶇О"/>
<zt-table-column-dict prop="isDefault" label="鏄惁榛樿" dict="is_or_not"/>
- <el-table-column label="鍥剧墖" align="center">
+ <el-table-column label="鍥剧墖" align="center" prop="svgContent">
<template v-slot="{ row }">
- <el-image v-if="row.id" :src="url+row.id" style="height: 50px;width: 50px"></el-image>
+ <el-input v-if="row.id" v-html = row.svgContent></el-input>
</template>
</el-table-column>
<el-table-column prop="contentType" label="妫�绱㈠叧閿瓧"/>
@@ -33,7 +33,7 @@
delete-perm="sysPictureBase::delete"/>
</el-table>
<!-- 寮圭獥, 鏂板 / 淇敼 -->
- <add-or-update @refreshDataList="table.query"/>
+ <add-or-update ref="addOrUpdate" @refreshDataList="table.query"/>
</zt-table-wraper>
</div>
</template>
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index bca1b8f..2ce607b 100644
--- a/web/src/views/modules/taskReliability/RBD-edit-img.vue
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -585,10 +585,12 @@
let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
this.imagesList2 = res.data
console.log(this.imagesList2, 'getProduct(productId)234567890')
+ let urlObject = window.URL || window.webkitURL || window;
+
const imageNodes2 = this.imagesList2.map((item) =>
this.graph.createNode({
shape: 'image',
- imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
+ //imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
width: 60,
height: 60,
id: item.dataId, // 鎵嬪姩璁剧疆鑺傜偣鐨� ID
@@ -611,6 +613,10 @@
voteNum: '',
},
attrs: {
+ image: {
+ 'xlink:href': `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=${item.imgPath}`,
+ //'xlink:href': urlObject.createObjectURL(new Blob([item.svgContent])),
+ },
text: {
text: item.imgName,
fontSize: 14,
--
Gitblit v1.9.1