.

package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
     "@antv/x6": "^1.29.1",
-    "@antv/x6-vue-shape": "^1.5.4",
+    "@antv/x6-vue-shape": "1.5.4",
     "@fullcalendar/interaction": "^5.10.1",
     "@fullcalendar/timegrid": "^5.10.1",
     "@fullcalendar/vue": "^5.10.1",

src/views/sandbox_manage/common/edge.js

@@ -1,7 +1,9 @@
 import { configOpt } from './toolConfig';
 
 const { line} = configOpt;
+import store from "@/vuex/index"
 
+const styleConfig=store.state.sand.styleConfig
 // export const myEdges = [
 // 	{
 // 		type: 'noArrowStraight',
@@ -29,7 +31,7 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
     },
     attrs:{
       line:{
-        stroke: line.color,
+        stroke: styleConfig.lineColor,
         strokeWidth: line.width,
         sourceMarker: false,//起始箭头 
         targetMarker: false,//终止箭头
@@ -43,7 +45,7 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
     vertices:[{x:xP,y:yP-40},{x:xP,y:yP+40}],
     attrs:{
       line:{
-        stroke: line.color,
+        stroke: styleConfig.lineColor,
         strokeWidth: line.width,
         sourceMarker: false,//起始箭头 
         targetMarker: false,//终止箭头
@@ -58,7 +60,7 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
 				...skewLine,
         attrs:{
           line:{
-            stroke: line.color,
+            stroke: styleConfig.lineColor,
             strokeWidth: line.width,
             sourceMarker: false,//起始箭头 
             targetMarker: "classic",//终止箭头
@@ -70,7 +72,7 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
 				...skewLine,
         attrs:{
           line:{
-            stroke: line.color,
+            stroke: styleConfig.lineColor,
             strokeWidth: line.width,
             sourceMarker: "classic",//起始箭头 
             targetMarker: "classic",//终止箭头
@@ -84,7 +86,7 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
         ...bendLine,
         attrs:{
           line:{
-            stroke: line.color,
+            stroke: styleConfig.lineColor,
             strokeWidth: line.width,
             sourceMarker: false,//起始箭头 
             targetMarker: "classic",//终止箭头
@@ -96,7 +98,7 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
         ...bendLine,
         attrs:{
           line:{
-            stroke: line.color,
+            stroke: styleConfig.lineColor,
             strokeWidth: line.width,
             sourceMarker: "classic",//起始箭头 
             targetMarker: "classic",//终止箭头
@@ -120,7 +122,7 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
         },
         attrs:{
           line:{
-            stroke: line.color,
+            stroke: styleConfig.lineColor,
             strokeWidth: line.width,
             sourceMarker: false,//起始箭头 
             targetMarker: "classic",//终止箭头
@@ -136,7 +138,7 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
         },
         attrs:{
           line:{
-            stroke: line.color,
+            stroke: styleConfig.lineColor,
             strokeWidth: line.width,
             sourceMarker: 'classic',//起始箭头 
             targetMarker: "classic",//终止箭头

src/views/sandbox_manage/common/mindmap.js

@@ -1,17 +1,21 @@
 import { Graph, Cell, Node, Path } from '@antv/x6'
 import Hierarchy from '@antv/hierarchy'
+
 export default {
   data() {
     return {
       mindMapDataCurrent:{},
       positionCurrent:{},
-      addTypeCurrent:''
+      addTypeCurrent:'',
+      styleConfig:{}
     }
   },
   mounted() {
     
   },
   created() {
+    this.styleConfig=this.$store.state.sand.styleConfig
+    console.log(this.styleConfig,'this.styleConfig');
     // 中心主题
     Graph.registerNode(
       'mindmap-topic',          
@@ -39,8 +43,8 @@ export default {
           body: {
             rx: 6,
             ry: 6,
-            stroke: '#5F95FF',
-            fill: '#EFF4FF',
+            // stroke: this.$store.state.sand.styleConfig.borderColor,
+            // fill: this.$store.state.sand.styleConfig.backgroundColor,
             strokeWidth: 1,
             width:100,
             height:50
@@ -71,7 +75,7 @@ export default {
           },
           label: {
             fontSize: 14,
-            fill: '#262626',
+            fill: this.$store.state.sand.styleConfig.color,
             textWrap:{
               width:-10
             }
@@ -107,8 +111,8 @@ export default {
           body: {
             rx: 6,
             ry: 6,
-            stroke: '#5F95FF',
-            fill: '#EFF4FF',
+            // stroke: this.$store.state.sand.styleConfig.borderColor,
+            // fill: this.$store.state.sand.styleConfig.backgroundColor,
             strokeWidth: 1,
             width:100,
             height:50
@@ -127,7 +131,7 @@ export default {
           },
           label: {
             fontSize: 14,
-            fill: '#262626',
+            fill: this.$store.state.sand.styleConfig.color,
             textWrap:{
               width:-10
             }
@@ -163,8 +167,8 @@ export default {
           body: {
             rx: 6,
             ry: 6,
-            stroke: '#5F95FF',
-            fill: '#EFF4FF',
+            // stroke: this.$store.state.sand.styleConfig.borderColor,
+            // fill: this.$store.state.sand.styleConfig.backgroundColor,
             strokeWidth: 1,
             width:100,
             height:50
@@ -183,7 +187,7 @@ export default {
           },
           label: {
             fontSize: 14,
-            fill: '#262626',
+            fill:this.$store.state.sand.styleConfig.color,
             textWrap:{
               width:-10
             }
@@ -261,7 +265,7 @@ export default {
         attrs: {
           line: {
             targetMarker: false,
-            stroke: '#A2B1C3',
+            // stroke: this.$store.state.sand.styleConfig.lineColor,
             strokeWidth: 2,
           },
         },
@@ -407,6 +411,15 @@ export default {
               height: data.height,
               label: data.label,
               type: data.type,
+              attrs:{
+                body: {
+                  stroke: this.$store.state.sand.styleConfig.borderColor,
+                  fill: this.$store.state.sand.styleConfig.backgroundColor
+                },
+                label:{
+                  fill:this.$store.state.sand.styleConfig.color
+                }
+              },
             }),
           )
           if (children) {
@@ -416,6 +429,11 @@ export default {
               cells.push(
                 this.graph.createEdge({
                   shape: 'mindmap-edge',
+                  attrs:{
+                    line:{
+                      stroke:this.$store.state.sand.styleConfig.lineColor
+                    }
+                  },
                   source: {
                     cell: hierarchyItem.id,
                     anchor: {

src/views/sandbox_manage/common/node.js

@@ -116,13 +116,13 @@ export const myNodeOption = (key) => {
 				},
 				attrs: {
 					body: {
-						stroke: border.borderColor,
+						stroke: styleConfig.borderColor,
 						strokeWidth: border.width,
 						fill:styleConfig.backgroundColor,
 						strokeDasharray: null,
 					},
 					text: {
-						fill: text.color,
+						fill: styleConfig.color,
 						fontSize: text.size,
 						lineHeight: text.lineHeight,
 						fontWeight: 'normal',
@@ -175,7 +175,7 @@ export const myNodeOption = (key) => {
 				},
 				attrs: {
 					body: {
-						stroke: border.borderColor,
+						stroke: styleConfig.borderColor,
 						strokeWidth: border.width,
 						fill: styleConfig.backgroundColor,
 						strokeDasharray: null,
@@ -183,7 +183,7 @@ export const myNodeOption = (key) => {
 						ry:8
 					},
 					text: {
-						fill: text.color,
+						fill: styleConfig.color,
 						fontSize: text.size,
 						lineHeight: text.lineHeight,
 						fontWeight: 'normal',
@@ -232,13 +232,13 @@ export const myNodeOption = (key) => {
 				},
 				attrs: {
 					body: {
-						stroke: border.borderColor,
+						stroke: styleConfig.borderColor,
 						strokeWidth: border.width,
 						fill: styleConfig.backgroundColor,
 						strokeDasharray: null,
 					},
 					text: {
-						fill: text.color,
+						fill: styleConfig.color,
 						fontSize: text.size,
 						lineHeight: text.lineHeight,
 						fontWeight: 'normal',
@@ -292,14 +292,14 @@ export const myNodeOption = (key) => {
 				},
 				attrs: {
 					body: {
-						stroke: border.borderColor,
+						stroke: styleConfig.borderColor,
 						strokeWidth: border.width,
 						fill: styleConfig.backgroundColor,
 						strokeDasharray: null,
 						refPoints: '0,10 10,0 20,10 10,20',
 					},
 					text: {
-						fill: text.color,
+						fill: styleConfig.color,
 						fontSize: text.size,
 						lineHeight: text.lineHeight,
 						fontWeight: 'normal',
@@ -353,11 +353,11 @@ export const myNodeOption = (key) => {
 						fill: 'transparent',
 					},
 					text: {
-						text: '文本框',
+						text: '文本',
 						fontSize: text.size,
 						lineHeight: text.lineHeight,
 						fontWeight: 'normal',
-						fill: text.color,
+						fill: styleConfig.textColor,
 						textWrap: {
 							width: -10,
 						},

src/views/sandbox_manage/common/toolConfig.js

@@ -55,18 +55,34 @@ export const sizeOptions = [
 export const styleSettings=[
 	{
 		id:1,
-		backgroundColor:'#DAE8FF'
+		backgroundColor:'#BBCEFF',
+		color:'#1841AA',
+		textColor:'#1841AA',
+		borderColor:'#1841AA',
+		lineColor:'#1841AA'
 	},
 	{
 		id:2,
-		backgroundColor:'orange'
+		backgroundColor:'#1841AA',
+		color:'#FFFFFF',
+		textColor:'#1841AA',
+		borderColor:'#1841AA',
+		lineColor:'#1841AA'
 	},
 	{
 		id:3,
-		backgroundColor:'purple'
+		backgroundColor:'#FFFFFF',
+		color:'#333333',
+		textColor:'#333333',
+		borderColor:'#333333',
+		lineColor:'#333333'
 	},
 	{
 		id:4,
-		backgroundColor:'red'
+		backgroundColor:'#FFF6F4',
+		color:'#AA3218',
+		textColor:'#AA3218',
+		borderColor:'#AA3218',
+		lineColor:'#AA3218'
 	}
 ]

src/views/sandbox_manage/index_new_version.vue

@@ -342,8 +342,8 @@ import { myGraph } from './common/gragh';
       this.getSandboxClassifyOnly()
       this.getSandboxList()
       this.setting.async={
-        enable:false,
-        type:'head'
+        // enable:false,
+        // type:'head'
       //   url:(()=>{
       //     console.log(process.env);
       //     // console.log(process.env.VUE_APP_API_ROOT,'process.env.VUE_APP_API_ROOT');
@@ -1411,7 +1411,6 @@ import { myGraph } from './common/gragh';
             color: #0052D9;
           }
         }
-
       }
     }
   }
@@ -1533,17 +1532,17 @@ import { myGraph } from './common/gragh';
   }
 
 }
-// .ztree.zTreeDragUL{
-//   width: 300px;
-// 	z-index: 10000!important;
-// }
-// .tmpzTreeMove_arrow{
-//   position: absolute;
-// 	z-index: 10000!important;
-//   &::after{
-//     content: url('../../assets/img/document_m/arrow-fold.png');
-//   }
-// }
+.ztree.zTreeDragUL{
+  width: 300px;
+	z-index: 10000!important;
+}
+.tmpzTreeMove_arrow{
+  position: absolute;
+	z-index: 10000!important;
+  &::after{
+    content: url('../../assets/img/document_m/arrow-fold.png');
+  }
+}
 .el-cascader{
   .el-input{
     width: 317px;

src/views/sandbox_manage/sandFlowNew/index.vue

@@ -2,7 +2,7 @@
   <div id="sand-edit-container" class="sand-edit-container">
     <div class="sand-toolbar">
       <el-tabs v-model="activeToolTabName" stretch class="sand-toolbar-tabs">
-        <el-tab-pane label="元素库" name="元素库">
+        <el-tab-pane label="元素库" name="元素库" id="element">
           <div class="sand-elements-tab">
             <div class="sand-elements sand-elements-line">
               <span>线条</span>
@@ -47,25 +47,25 @@
             <div class="sand-elements sand-elements-mind">
               <span>思维导图</span>
               <div class="elements-row-mind">
-                <img src="~@/assets/img/sand_new/mindmap-double.png" :draggable="true" @dragstart="edgeDragStart('singleMindmap',$event)"/>
-                <img src="~@/assets/img/sand_new/mindmap-right.png" :draggable="true" @dragstart="edgeDragStart('doubleMindmap',$event)"/>
+                <img src="~@/assets/img/sand_new/mindmap-right.png" :draggable="true" @dragstart="edgeDragStart('singleMindmap',$event)"/>
+                <img src="~@/assets/img/sand_new/mindmap-double.png" :draggable="true" @dragstart="edgeDragStart('doubleMindmap',$event)"/>
               </div>
             </div>
           </div>
 
         </el-tab-pane>
-        <el-tab-pane label="风格" name="风格">
+        <el-tab-pane label="风格" name="风格" id="style">
           <div class="sand-style-tab">
-            <div class="sand-style-tab-item" :class="styleActive==1?'active':''" @click="changeStyle(1)">
+            <div class="sand-style-tab-item" :class="styleActive==1?'active':''" @click="changeStyle(1)" :draggable="false">
               <img src="~@/assets/img/sand_new/style-blue-light.png" />
             </div>
-            <div class="sand-style-tab-item" :class="styleActive==1?'active':''" @click="changeStyle(1)">
+            <div class="sand-style-tab-item" :class="styleActive==2?'active':''" @click="changeStyle(2)" :draggable="false">
               <img src="~@/assets/img/sand_new/style-blue.png" />
             </div>
-            <div class="sand-style-tab-item" :class="styleActive==1?'active':''" @click="changeStyle(1)">
+            <div class="sand-style-tab-item" :class="styleActive==3?'active':''" @click="changeStyle(3)" :draggable="false">
               <img src="~@/assets/img/sand_new/style-black.png" />
             </div>
-            <div class="sand-style-tab-item" :class="styleActive==1?'active':''" @click="changeStyle(1)">
+            <div class="sand-style-tab-item" :class="styleActive==4?'active':''" @click="changeStyle(4)" :draggable="false">
               <img src="~@/assets/img/sand_new/style-red.png" />
             </div>
           </div>
@@ -111,22 +111,33 @@
       </div>
       <div class="sand-main-body">
         <div class="sand-mainBody-tool" id="sand-mainBody-tool">
-          <div class="sand-tool-item" :style="{'color':canUndo?'#000000':'#999999'}" @click="toolClickOptions('undo')">撤销</div>
-          <div class="sand-tool-item" :style="{'color':canRedo?'#000000':'#999999'}" @click="toolClickOptions('redo')">恢复</div>
-          <div class="sand-tool-item" id="sand-tool-fontSize">
+          <!-- <div class="sand-tool-item" :style="{'color':canUndo?'#000000':'#999999'}" @click="toolClickOptions('undo')">撤销</div>
+          <div class="sand-tool-item" :style="{'color':canRedo?'#000000':'#999999'}" @click="toolClickOptions('redo')">恢复</div> -->
+          <img :src="canUndo?require('@/assets/img/sand_new/tools/undo.png'):require('@/assets/img/sand_new/tools/undo-disabled.png')" 
+          class="sand-tool-item"  @click="toolClickOptions('undo')"/>
+          <img :src="canRedo?require('@/assets/img/sand_new/tools/redo.png'):require('@/assets/img/sand_new/tools/redo-disabled.png')" 
+          class="sand-tool-item"  @click="toolClickOptions('redo')"/>
+
+          <div class="sand-tool-item" id="sand-tool-fontFamily">
             <el-select v-model="styleOptions.fontF" placeholder="字体" @change="(e)=>toolClickOptions('changeFamily',e)"
               :disabled="toolStatus.nodeDisabled && toolStatus.textDisabled">
               <el-option :label="f.name" :value="f.value" v-for="f in familyOptions" :key="f.name"></el-option>
             </el-select>
           </div>
-          <div class="sand-tool-item">
+          <div class="sand-tool-item" id="sand-tool-fontSize">
             <el-select v-model="styleOptions.fontS" placeholder="字号" @change="(e)=>toolClickOptions('changeSize',e)">
               <el-option :label="s.name" :value="s.value" v-for="s in fontSizeOptions" :key="s.name"></el-option>
             </el-select>
           </div>
-          <div class="sand-tool-item" @click="(e)=>toolClickOptions('changeWeight')">B</div>
-          <div class="sand-tool-item" @click="(e)=>toolClickOptions('changeFontStyle')">I</div>
-          <div class="sand-tool-item" @click="(e)=>toolClickOptions('changeDecoration')">下划线</div>
+          <img :src="require('@/assets/img/sand_new/tools/bold.png')" 
+          class="sand-tool-item"  @click="toolClickOptions('changeWeight')"/>
+          <img :src="require('@/assets/img/sand_new/tools/italic.png')" 
+          class="sand-tool-item"  @click="toolClickOptions('changeFontStyle')"/>
+          <!-- <div class="sand-tool-item" @click="(e)=>toolClickOptions('changeWeight')">B</div>
+          <div class="sand-tool-item" @click="(e)=>toolClickOptions('changeFontStyle')">I</div> -->
+          <!-- <div class="sand-tool-item" @click="(e)=>toolClickOptions('changeDecoration')">下划线</div> -->
+          <img :src="require('@/assets/img/sand_new/tools/underline.png')" 
+          class="sand-tool-item"  @click="toolClickOptions('changeDecoration')"/>
           <div class="sand-tool-item">
             <el-color-picker
               key="textColor"
@@ -136,7 +147,7 @@
               @change="(e)=>toolClickOptions('changeColor',e)"
             />
           </div>
-          <div class="sand-tool-item">
+          <div class="sand-tool-item" id="sand-tool-lineHeight">
             <el-select v-model="styleOptions.lineHeight" placeholder="行高" @change="(e)=>toolClickOptions('changeLineHeight',e)">
               <el-option :label="lh.name" :value="lh.value" v-for="lh in lineHeightOptions" :key="lh.name"></el-option>
             </el-select>
@@ -144,8 +155,8 @@
           <div class="sand-tool-item">
             <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTextAlign',e)">
 							<div class="el-dropdown-link">
-								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
-								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
+                <img :src="require('@/assets/img/sand_new/tools/text-align.png')" style="vertical-align: middle;"/>
+								<!-- <img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;"> -->
 							</div>
 							<el-dropdown-menu slot="dropdown">
 								<el-dropdown-item command="middle" :class="styleOptions.textAlign=='middle'?'style-acitve':''">
@@ -493,7 +504,7 @@ import { chartSetMixin } from '../../dataEntry_manage/mixins/chartPublic'
 import Chart from '../../dataEntry_manage/components/chart.vue'
 import mPage from "@/components/mPage.vue";
 import { svgToBase64 } from '@/utils/svgToblob'
-import popover from './popover.vue';
+// import popover from './popover.vue';
 import { Graph} from '@antv/x6'
 const { line} = configOpt;
   export default {
@@ -937,18 +948,26 @@ const { line} = configOpt;
         for (let i = 0; i < cells.length; i++) {
           const element = cells[i];
           console.log(element);
-          if(element.shape=="edge") continue
-          if(element.data.key == 'text'){
-            // element.attrs.text.fill=styleData.backgroundColor
+          if(element.shape.indexOf("edge") !=-1){
+            element.setAttrs({
+              line:{
+                stroke:styleData.lineColor
+              }
+            })
+          }if(element.data && element.data.key == 'text'){
             element.setAttrs({
               text:{
-                fill:styleData.backgroundColor
+                fill:styleData.textColor
               }
             })
           }else{
             element.setAttrs({
               body:{
-                fill:styleData.backgroundColor
+                fill:styleData.backgroundColor,
+                stroke:styleData.borderColor,
+              },
+              label:{
+                fill:styleData.color
               }
             })
           }
@@ -1771,7 +1790,7 @@ const { line} = configOpt;
           align-items: center;
           padding-right: 10px;
           .sand-tool-item{
-            margin-left: 10px;
+            margin-left: 20px;
             cursor: pointer;
           }
         }
@@ -2033,9 +2052,9 @@ const { line} = configOpt;
       }
     }
   }
-  #sand-tool-fontSize{
+  #sand-tool-fontSize,#sand-tool-fontFamily,#sand-tool-lineHeight{
     .el-select{
-      width: 100px;
+      width: 58px;
     }
   }
   .style-acitve{
@@ -2111,17 +2130,17 @@ const { line} = configOpt;
   }
 
 }
-.ztree.zTreeDragUL{
-  width: 300px;
-	z-index: 10000!important;
-}
-.tmpzTreeMove_arrow{
-  position: absolute;
-	z-index: 10000!important;
-  &::after{
-    content: url('../../../assets/img/document_m/arrow-fold.png');
-  }
-}
+// .ztree.zTreeDragUL{
+//   width: 300px;
+// 	z-index: 10000!important;
+// }
+// .tmpzTreeMove_arrow{
+//   position: absolute;
+// 	z-index: 10000!important;
+//   &::after{
+//     content: url('../../../assets/img/document_m/arrow-fold.png');
+//   }
+// }
   .classify-popper{
     height: 400px;
     overflow: auto;

src/vuex/modules/sand.js

@@ -129,7 +129,11 @@ const sand = {
 		// 不同风格
 		style:1,
 		styleConfig:{
-			backgroundColor:"#DAE8FF",
+			backgroundColor:'#BBCEFF',
+			color:'#1841AA',
+			textColor:'#1841AA',
+			borderColor:'#1841AA',
+			lineColor:'#1841AA'
 		},
 		toolStatus:{
 			nodeDisabled:true,
@@ -224,6 +228,10 @@ const sand = {
 			state.style = style
 			let styleData = styleSettings[style-1]
 			state.styleConfig.backgroundColor = styleData.backgroundColor
+			state.styleConfig.color = styleData.color
+			state.styleConfig.textColor = styleData.textColor
+			state.styleConfig.borderColor = styleData.borderColor
+			state.styleConfig.lineColor = styleData.lineColor
 		}
 	},
   actions: {