From 122c807691e6f7515eba98f9d4a91f8e54a8db95 Mon Sep 17 00:00:00 2001
From: shidongli <shidongli>
Date: Tue, 16 Jul 2024 15:13:19 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=9D=E6=9C=AF=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/preview/index.vue | 381 ++++++++++++++++++++++-------
 1 file changed, 297 insertions(+), 84 deletions(-)

diff --git a/src/views/system/preview/index.vue b/src/views/system/preview/index.vue
index 6e26ef8..cbb25fd 100644
--- a/src/views/system/preview/index.vue
+++ b/src/views/system/preview/index.vue
@@ -22,52 +22,154 @@
           > -->
           <!-- <font-awesome-icon icon="heart" /> -->
           <!-- <FontAwesomeIcon icon="far fa-copy" /> -->
-          <font-awesome-icon data-command="save" class="command fa fa-floppy-o" icon="command far far fa-copy"
-            title="保存"></font-awesome-icon>
-          <font-awesome-icon style="margin-left: 10px" icon="fas fa-reply-all" title="历史数据"
-            @click="readHistoryData"></font-awesome-icon>
-          <font-awesome-icon style="margin-left: 10px" class="fa fa-hdd-o" icon="fas fa-file" title="上传数据"
-            @click="readUploadData"></font-awesome-icon>
-          <font-awesome-icon icon="fas fa-download" style="margin-left: 10px" title="另存为文件"
-            @click="saveAsFile">文件</font-awesome-icon>
+          <font-awesome-icon
+            data-command="save"
+            class="command fa fa-floppy-o"
+            icon="command far far fa-copy"
+            title="保存"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            icon="fas fa-reply-all"
+            title="历史数据"
+            @click="readHistoryData"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            class="fa fa-hdd-o"
+            icon="fas fa-file"
+            title="上传数据"
+            @click="readUploadData"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            icon="fas fa-download"
+            style="margin-left: 10px"
+            title="另存为文件"
+            @click="saveAsFile"
+            >文件</font-awesome-icon
+          >
           <!-- <FontAwesomeIcon icon="fas fa-image" /> -->
 
-          <font-awesome-icon style="margin-left: 10px" icon="fas fa-image" title="另存为图片"
-            @click="openSaveAsImageDialog"></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            icon="fas fa-image"
+            title="另存为图片"
+            @click="openSaveAsImageDialog"
+          ></font-awesome-icon>
 
-          <font-awesome-icon style="margin-left: 10px" data-command="undo" icon="fas fa-undo" class="command fa fa-undo"
-            title="撤销"></font-awesome-icon>
-          <font-awesome-icon style="margin-left: 10px" data-command="redo" class="command fa fa-repeat"
-            icon="fas fa-repeat" title="重做"></font-awesome-icon>
-          <font-awesome-icon style="margin-left: 10px" data-command="delete" class="command fa fa-trash-o"
-            icon="fas fa-trash-alt" title="删除"></font-awesome-icon>
-          <font-awesome-icon style="margin-left: 10px" data-command="zoomOut" class="command fa fa-search-minus"
-            icon="fas fa-search-minus" title="缩小"></font-awesome-icon>
-          <font-awesome-icon style="margin-left: 10px" data-command="zoomIn" icon="fas fa-search-plus"
-            class="command fa fa-search-plus" title="放大"></font-awesome-icon>
-          <font-awesome-icon style="margin-left: 10px" icon="fas fa-eraser" data-command="clear"
-            class="command fa fa-eraser" title="清除画布"></font-awesome-icon>
-          <font-awesome-icon style="margin-left: 10px" icon="fas fa-arrow-up" data-command="toFront"
-            class="command fa fa-arrow-up" title="提升层级"></font-awesome-icon>
-          <font-awesome-icon style="margin-left: 10px" icon="fas fa-arrow-down" data-command="toBack"
-            class="command fa fa-arrow-down" title="下降层级"></font-awesome-icon>
-          <font-awesome-icon style="margin-left: 10px" icon="fas fa-check-square" data-command="selectAll"
-            class="command fa fa-check-square-o" title="全选"></font-awesome-icon>
-          <font-awesome-icon style="margin-left: 10px" icon="far fa-copy" data-command="copy"
-            class="command fa fa-files-o" title="复制"></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            data-command="undo"
+            icon="fas fa-undo"
+            class="command fa fa-undo"
+            title="撤销"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            data-command="redo"
+            class="command fa fa-repeat"
+            icon="fas fa-repeat"
+            title="重做"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            data-command="delete"
+            class="command fa fa-trash-o"
+            icon="fas fa-trash-alt"
+            title="删除"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            data-command="zoomOut"
+            class="command fa fa-search-minus"
+            icon="fas fa-search-minus"
+            title="缩小"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            data-command="zoomIn"
+            icon="fas fa-search-plus"
+            class="command fa fa-search-plus"
+            title="放大"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            icon="fas fa-eraser"
+            data-command="clear"
+            class="command fa fa-eraser"
+            title="清除画布"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            icon="fas fa-arrow-up"
+            data-command="toFront"
+            class="command fa fa-arrow-up"
+            title="提升层级"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            icon="fas fa-arrow-down"
+            data-command="toBack"
+            class="command fa fa-arrow-down"
+            title="下降层级"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            icon="fas fa-check-square"
+            data-command="selectAll"
+            class="command fa fa-check-square-o"
+            title="全选"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            icon="far fa-copy"
+            data-command="copy"
+            class="command fa fa-files-o"
+            title="复制"
+          ></font-awesome-icon>
 
-          <font-awesome-icon style="margin-left: 10px" icon="fas fa-clone" data-command="paste"
-            class="command fa fa-clipboard" title="粘贴"></font-awesome-icon>
-          <font-awesome-icon style="margin-left: 10px" icon="fas fa-expand" data-command="autoZoom"
-            class="command fa fa-expand" title="实际大小"></font-awesome-icon>
-          <font-awesome-icon style="margin-left: 10px" icon="fas fa-compress" data-command="resetZoom"
-            class="command fa fa-compress" title="适应页面"></font-awesome-icon>
-          <font-awesome-icon style="margin-left: 10px" icon="fas fa-object-group" data-command="addGroup"
-            class="command fa fa-object-group" title="组合"></font-awesome-icon>
-          <font-awesome-icon style="margin-left: 10px" icon="fas fa-object-ungroup" data-command="unGroup"
-            class="command fa fa-object-ungroup" title="取消组合"></font-awesome-icon>
-          <font-awesome-icon style="margin-left: 10px" icon="fas fa-crop" data-command="multiSelect"
-            class="command fa fa fa-crop" title="多选"></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            icon="fas fa-clone"
+            data-command="paste"
+            class="command fa fa-clipboard"
+            title="粘贴"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            icon="fas fa-expand"
+            data-command="autoZoom"
+            class="command fa fa-expand"
+            title="实际大小"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            icon="fas fa-compress"
+            data-command="resetZoom"
+            class="command fa fa-compress"
+            title="适应页面"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            icon="fas fa-object-group"
+            data-command="addGroup"
+            class="command fa fa-object-group"
+            title="组合"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            icon="fas fa-object-ungroup"
+            data-command="unGroup"
+            class="command fa fa-object-ungroup"
+            title="取消组合"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            style="margin-left: 10px"
+            icon="fas fa-crop"
+            data-command="multiSelect"
+            class="command fa fa fa-crop"
+            title="多选"
+          ></font-awesome-icon>
         </div>
       </el-col>
     </el-row>
@@ -77,30 +179,66 @@
       <el-col :span="2">
         <div id="itempannel">
           <!-- 开始节点 -->
-          <div id="startNode" class="getItem" data-type="node" data-shape="flow-circle" data-size="72*72"
-            data-label="开始节点" data-color="#FA8C16" data-nodeType="startNode">
+          <div
+            id="startNode"
+            class="getItem"
+            data-type="node"
+            data-shape="flow-circle"
+            data-size="72*72"
+            data-label="开始节点"
+            data-color="#FA8C16"
+            data-nodeType="startNode"
+          >
             <img draggable="false" :src="startNodeSVGUrl" alt srcset />
           </div>
           <!-- 常规节点 -->
-          <div id="regularNode" class="getItem" data-type="node" data-size="100*50" data-label="常规节点"
-            data-color="#1890ff">
+          <div
+            id="regularNode"
+            class="getItem"
+            data-type="node"
+            data-size="100*50"
+            data-label="常规节点"
+            data-color="#1890ff"
+          >
             <img draggable="false" :src="regularNodeSVGUrl" alt srcset />
           </div>
 
           <!-- 条件节点 -->
-          <div id="judgeNode" class="getItem" data-type="node" data-shape="flow-rhombus" data-size="80*80"
-            data-label="条件节点" data-color="#13C2C2">
+          <div
+            id="judgeNode"
+            class="getItem"
+            data-type="node"
+            data-shape="flow-rhombus"
+            data-size="80*80"
+            data-label="条件节点"
+            data-color="#13C2C2"
+          >
             <img draggable="false" :src="conditionNodeSVGUrl" />
           </div>
           <!-- 自定义节点 -->
-          <div class="getItem" data-type="node" data-shape="customNode" data-size="80*48" data-labeltitle=""
-            data-labelconcent="" data-color="#722ED1">
+          <div
+            class="getItem"
+            data-type="node"
+            data-shape="customNode"
+            data-size="80*48"
+            data-labeltitle=""
+            data-labelconcent=""
+            data-color="#722ED1"
+          >
             <img draggable="false" :src="nNodeSVGUrl" />
           </div>
 
           <!-- 结束节点 -->
-          <div id="endNode" class="getItem" data-type="node" data-shape="flow-circle" data-size="80*80"
-            data-label="结束节点" data-color="#FA8C16" data-nodeType="endNode">
+          <div
+            id="endNode"
+            class="getItem"
+            data-type="node"
+            data-shape="flow-circle"
+            data-size="80*80"
+            data-label="结束节点"
+            data-color="#FA8C16"
+            data-nodeType="endNode"
+          >
             <img draggable="false" :src="endNodeSVGUrl" />
           </div>
         </div>
@@ -116,44 +254,85 @@
         <section class="right-part">
           <div id="detailpannel">
             <!-- 节点属性栏 -->
-            <div id="nodeAttributeBar" class="pannel" data-status="node-selected">
+            <div
+              id="nodeAttributeBar"
+              class="pannel"
+              data-status="node-selected"
+            >
               <div class="title">节点属性</div>
               <div class="main">
-                <el-form :model="nodeAttributeForm" label-position="top" label-width="80px">
+                <el-form
+                  :model="nodeAttributeForm"
+                  label-position="top"
+                  label-width="80px"
+                >
                   <el-form-item label="节点文本" v-if="type != 'customNode'">
-                    <el-input v-model="nodeAttributeForm.label" @change="saveNodeAttribute"></el-input>
+                    <el-input
+                      v-model="nodeAttributeForm.label"
+                      @change="saveNodeAttribute"
+                    ></el-input>
                   </el-form-item>
                   <el-form-item label="标题" v-if="type == 'customNode'">
-                    <el-input class="bold-input" v-model="nodeAttributeForm.labeltitle"
-                      @change="saveNodeAttribute"></el-input>
+                    <el-input
+                      class="bold-input"
+                      v-model="nodeAttributeForm.labeltitle"
+                      @change="saveNodeAttribute"
+                    ></el-input>
                   </el-form-item>
                   <el-form-item label="内容" v-if="type == 'customNode'">
-                    <el-input type="textarea" v-model="nodeAttributeForm.labelconcent"
-                      @change="saveNodeAttribute"></el-input>
+                    <el-input
+                      type="textarea"
+                      v-model="nodeAttributeForm.labelconcent"
+                      @change="saveNodeAttribute"
+                    ></el-input>
                   </el-form-item>
                   <el-form-item label="宽度">
-                    <el-input v-model="nodeAttributeForm.width" @change="saveNodeAttribute"></el-input>
+                    <el-input
+                      v-model="nodeAttributeForm.width"
+                      @change="saveNodeAttribute"
+                    ></el-input>
                   </el-form-item>
                   <el-form-item label="高度">
-                    <el-input v-model="nodeAttributeForm.height" @change="saveNodeAttribute"></el-input>
+                    <el-input
+                      v-model="nodeAttributeForm.height"
+                      @change="saveNodeAttribute"
+                    ></el-input>
                   </el-form-item>
                   <el-form-item label="颜色">
-                    <el-color-picker v-model="nodeAttributeForm.color" @change="saveNodeAttribute"></el-color-picker>
+                    <el-color-picker
+                      v-model="nodeAttributeForm.color"
+                      @change="saveNodeAttribute"
+                    ></el-color-picker>
                   </el-form-item>
                 </el-form>
               </div>
             </div>
             <!-- 边属性栏 -->
-            <div id="edgeAttributeBar" class="pannel" data-status="edge-selected">
+            <div
+              id="edgeAttributeBar"
+              class="pannel"
+              data-status="edge-selected"
+            >
               <div class="title">边属性</div>
               <div class="main">
-                <el-form :model="edgeAttributeForm" label-position="top" label-width="80px" @submit.native.prevent>
+                <el-form
+                  :model="edgeAttributeForm"
+                  label-position="top"
+                  label-width="80px"
+                  @submit.native.prevent
+                >
                   <el-form-item label="边文本">
-                    <el-input v-model="edgeAttributeForm.label" @change="saveEdgeAttribute"></el-input>
+                    <el-input
+                      v-model="edgeAttributeForm.label"
+                      @change="saveEdgeAttribute"
+                    ></el-input>
                   </el-form-item>
                   <el-form-item label="关键字">
-                    <el-input type="textarea" v-model="edgeAttributeForm.keyword" @change="saveEdgeAttribute"
-                     ></el-input>
+                    <el-input
+                      type="textarea"
+                      v-model="edgeAttributeForm.keyword"
+                      @change="saveEdgeAttribute"
+                    ></el-input>
                   </el-form-item>
                   <!-- <el-form-item label="边文本">
                     <el-select
@@ -177,20 +356,35 @@
                 </el-form>
               </div>
             </div>
-            <div id="groupAttributeBar" class="pannel" data-status="group-selected">
+            <div
+              id="groupAttributeBar"
+              class="pannel"
+              data-status="group-selected"
+            >
               <div class="title">群组属性栏</div>
             </div>
-            <div id="canvasAttributeBar" class="pannel" data-status="canvas-selected">
+            <div
+              id="canvasAttributeBar"
+              class="pannel"
+              data-status="canvas-selected"
+            >
               <div class="title">画布属性栏</div>
               <div class="main">
                 <el-form label-width="80px" label-position="right">
                   <el-form-item label="网格对齐">
-                    <el-checkbox v-model="canvasAttributeForm.grid" @change="toggleGridShowStatus"></el-checkbox>
+                    <el-checkbox
+                      v-model="canvasAttributeForm.grid"
+                      @change="toggleGridShowStatus"
+                    ></el-checkbox>
                   </el-form-item>
                 </el-form>
               </div>
             </div>
-            <div id="multiAttributeBar" class="pannel" data-status="multi-selected">
+            <div
+              id="multiAttributeBar"
+              class="pannel"
+              data-status="multi-selected"
+            >
               <div class="title">多选时属性栏</div>
             </div>
           </div>
@@ -205,13 +399,19 @@
     <article>
       <!-- 下载图片 -->
       <section class="save-as-image-dialog">
-        <el-dialog title="生成图片" :visible.sync="saveAsImageDialogVisible" width="360px">
+        <el-dialog
+          title="生成图片"
+          :visible.sync="saveAsImageDialogVisible"
+          width="360px"
+        >
           <el-form label-width="100px" label-position="top">
             <el-form-item label="图片格式">
               <el-select v-model="saveAsImageFormat">
                 <el-option label="jpg" value="jpg">
                   <span style="float: left">jpg</span>
-                  <span style="float: right; color: #8492a6; font-size: 13px">白色背景</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px"
+                    >白色背景</span
+                  >
                 </el-option>
                 <!-- <el-option label="png" value="png">
                   <span style="float: left">png</span>
@@ -223,7 +423,9 @@
             </el-form-item>
           </el-form>
           <span slot="footer">
-            <el-button @click="saveAsImageDialogVisible = false">取 消</el-button>
+            <el-button @click="saveAsImageDialogVisible = false"
+              >取 消</el-button
+            >
             <el-button type="primary" @click="saveAsImage">确 定</el-button>
           </span>
         </el-dialog>
@@ -248,7 +450,9 @@
         </div>
         <div data-status="canvas-selected" class="menu">
           <el-button data-command="undo" class="command">撤销</el-button>
-          <el-button data-command="redo" class="command disable">重做</el-button>
+          <el-button data-command="redo" class="command disable"
+            >重做</el-button
+          >
         </div>
         <div data-status="multi-selected" class="menu">
           <el-button data-command="copy" class="command">复制</el-button>
@@ -356,11 +560,11 @@ export default {
   methods: {
     getlist() {
       selectScriptEdgeNode(this.$route.query.id).then(res => {
-        if(res.data.flowScheme){
+        if (res.data.flowScheme) {
           this.form = JSON.parse(res.data.flowScheme)
 
         }
-    
+
         console.log(this.form)
         this.form.nodes.forEach(e => {
           if (e.label) {
@@ -538,14 +742,23 @@ export default {
         if (ev.item.isNode) {
           this.type = selectedItemDataModel.shape
           if (selectedItemDataModel.label && selectedItemDataModel.labelconcent == '' && selectedItemDataModel.labeltitle == '') {
-            if (selectedItemDataModel.label.split('\n').shift() && selectedItemDataModel.label.split('\n').slice(1).join('\n')) {
-              // this.nodeAttributeForm.labeltitle = `<h2>${selectedItemDataModel.label.split('\n').shift()}</h2>`
-              this.nodeAttributeForm.labeltitle = selectedItemDataModel.label.split('\n').shift()
-              this.nodeAttributeForm.labelconcent = selectedItemDataModel.label.split('\n').slice(1).join('\n')
-            } else if (selectedItemDataModel.label.split('\n').shift()) {
-              this.nodeAttributeForm.label = selectedItemDataModel.label.split('\n').shift();
+            var titles = selectedItemDataModel.label.split('\n').shift()
+            var concent = selectedItemDataModel.label.split('\n').slice(1).join('\n')
+            console.log(titles, 'shift()')
+            console.log(concent, 'join')
+            if (titles && concent) {
+              this.nodeAttributeForm.labeltitle = titles
+              this.nodeAttributeForm.labelconcent = concent
+            } else if (titles && !concent) {
+              this.nodeAttributeForm.labeltitle = titles;
+              this.nodeAttributeForm.labelconcent = ''
+
+            } else if (!titles && concent) {
+              this.nodeAttributeForm.labeltitle = '';
+              this.nodeAttributeForm.labelconcent = concent
             }
-          } else {
+          }
+          else {
             this.nodeAttributeForm.labelconcent = selectedItemDataModel.labelconcent;
             this.nodeAttributeForm.labeltitle = selectedItemDataModel.labeltitle;
           }