|
|
@@ -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;
|
hbchen-home
