svgEditor

wente

2024-05-17 65a79e6ec47a067136f5e9297ca339e8c20747f1

svgEditor

 modules/mainPart/src/main/java/com/zt/life/modules/mainPart/basicInfo/model/ProductImg.java

@@ -48,6 +48,9 @@
    private String taskMtbcf;
    @TableField(exist = false)
    private String taskMtbcfOther;

    @TableField(exist = false)
    private String svgContent;

    @TableField(exist = false)
    private Integer isRepair;

 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);

 modules/mainPart/src/main/java/com/zt/life/modules/mainPart/sysPictureBase/model/SysPictureBase.java

@@ -29,6 +29,9 @@

    @ApiModelProperty(value = "图片高度")
    private Integer height;

    @ApiModelProperty(value = "svg图片")
    private String svgContent;

    @ApiModelProperty(value = "检索关键字")
    private String contentType;

 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,

 web/src/views/modules/SVGEditor.vue

New file
@@ -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>

 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>
      <input type="hidden" id="svgContentId" :value="dataForm.svgContent"/>
        <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>
<!--                <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()')
        // 使用form表单的数据格式
        const params = new FormData()
        // 将上传文件数组依次添加到参数paramsData中
        this.fileList.forEach((x) => {
          params.append('file', x.file)
        });
        // 将输入表单数据添加到params表单中
        if (!this.dataForm.id){
          this.dataForm.id = 0
        }
        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)
        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) {
          await this.$tip.success()
            console.log(this.dataForm,'this.dataForm')
            this.$tip.success()
          this.$refs.dialog.close()
          this.$emit('refreshDataList')
        }
        })
        // 使用form表单的数据格式
      },
      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); // 以文本形式读取文件内容
    }
        // 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;
  }*/

 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>

 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,