<template>
|
<div style="position: absolute;top:6%;right:0;background:#cccccc;width: 300px;" :style="'height:'+ left_p + 'px'">
|
<el-card style="height: 100%">
|
<el-tabs v-model="activeName" id="tabPane">
|
<el-tab-pane label="文本" name="first">
|
<el-row :gutter="5" align="middle" style="margin-top:20px">
|
<el-col :span=8 style="font-size: 16px;line-height: 38px">文本大小</el-col>
|
<el-col :span=16>
|
<el-slider :min=8 :max=20 :step=1 v-model="globalGridAttr.nodeFontSize" @change="onFontSizeChange"></el-slider>
|
</el-col>
|
</el-row>
|
<el-row :gutter="5" align="middle" style="margin-top:20px">
|
<el-col :span=8 style="font-size: 16px;line-height: 40px">字体颜色</el-col>
|
<el-col :span=16>
|
<el-color-picker v-model="globalGridAttr.nodeColor" style="width: 100%" @change="onColorChange"></el-color-picker>
|
</el-col>
|
</el-row>
|
<el-row v-show="shape!=='custom-text' || shape!=='custom-circle1'" :gutter="5" align="middle" style="margin-top:20px">
|
<el-col :span=8 style="font-size: 16px;line-height: 32px">项目名称</el-col>
|
<el-col :span=16 >
|
<el-input @click.native='showDialog' v-model="globalGridAttr.inspectName" style="width:100%"></el-input>
|
</el-col>
|
</el-row>
|
<el-row :gutter="5" v-show="shape!=='custom-circle1'" align="middle" style="margin-top:20px">
|
<el-col :span=8 style="font-size: 16px;line-height: 32px">过程名称</el-col>
|
<el-col :span=16 >
|
<el-input v-model="globalGridAttr.nodeText" style="width:100%" @change="onTextChange"></el-input>
|
</el-col>
|
</el-row>
|
<el-row :gutter="5" v-show="nodeType=='node'" align="middle" style="margin-top:20px;">
|
<el-col :span=8 style="font-size: 16px;line-height: 32px">关系</el-col>
|
<el-col :span=16>
|
<el-select style="width: 100%" v-model="globalGridAttr.nodeTypeExt" @change="onNodeTypeExtChange">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
<el-row :gutter="5" v-show="nodeType=='node'" align="middle" style="margin-top:20px;">
|
<el-col :span=8 style="font-size: 16px;line-height: 32px">状态</el-col>
|
<el-col :span=16>
|
<el-select style="width: 100%" v-model="globalGridAttr.statusImg" @change="onStatusImgChange">
|
<el-option
|
v-for="item in options1"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
<el-row v-show="shape!=='custom-text'" :gutter="5" align="middle" style="margin-top:20px">
|
<el-col :span=8 style="font-size: 16px;line-height: 32px">日期</el-col>
|
<el-col :span=16 >
|
<el-date-picker v-model="globalGridAttr.nodeDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
|
style="width: 100%" @change="onDateChange">
|
</el-date-picker>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="节点" name="second">
|
<el-row align="middle" style="margin-top:20px">
|
<el-col :span=8 style="font-size: 16px;line-height: 40px">边框颜色</el-col>
|
<el-col :span=16>
|
<el-color-picker v-model="globalGridAttr.nodeStroke" style="width: 100%" @change="onStrokeChange"></el-color-picker>
|
</el-col>
|
</el-row>
|
<el-row align="middle"style="margin-top:20px">
|
<el-col :span=8 style="font-size: 16px;line-height: 38px">边框宽度</el-col>
|
<el-col :span=16>
|
<el-slider :min=1 :max=20 :step=1 v-model="globalGridAttr.nodeStrokeWidth" @change="onStrokeWidthChange"></el-slider>
|
</el-col>
|
</el-row>
|
<el-row align="middle" style="margin-top:20px">
|
<el-col :span=8 style="font-size: 16px;line-height: 40px">颜色</el-col>
|
<el-col :span=16>
|
<el-color-picker v-model="globalGridAttr.nodeFill" style="width: 100%" @change="onFillChange"></el-color-picker>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
<el-dialog ref="detailedDialog" title="选择项目" width='85%' :visible.sync="dialogVisible ">
|
<Inspection @func="procResult" ref="inspectionNode" />
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { Graph, Shape, Node, Addon, Cell,FunctionExt} from '@antv/x6';
|
import Inspection from './project-list-select'
|
// const {inject} = require("vue");
|
export default {
|
name: "index",
|
data(){
|
return{
|
data:{
|
dataId:'',
|
finishDate: '',
|
inspectName:''
|
},
|
options: [{
|
value: '',
|
label: '无'
|
}, {
|
value: 'parallel',
|
label: '并联'
|
},{
|
value: 'switch',
|
label: '旁连'
|
}, {
|
value: 'vote',
|
label: '表决'
|
}],
|
options1: [{
|
value: '',
|
label: '无'
|
}, {
|
value: 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
|
label: '设置'
|
},{
|
value:'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
|
label: 'antv'
|
}],
|
date:'',
|
text:'',
|
dateId:'',
|
content:'',
|
dialogVisible:false,
|
activeName: 'first',
|
// globalGridAttr:{},
|
curCel:Cell,
|
left_p:document.documentElement.clientHeight*0.9,
|
}
|
},
|
components:{
|
Inspection
|
},
|
props:{
|
id: {
|
type: String,
|
},
|
shape:{
|
type: String
|
},
|
refY2:{
|
type: Number
|
},
|
globalGridAttr:{
|
type: Object,
|
},
|
graph:{
|
type: String,
|
},
|
projectId:{
|
type: String,
|
},
|
diagramId:{
|
type: String,
|
},
|
nodeType:{
|
type: String,
|
}
|
},
|
watch:{
|
'id'(val,oldVal){
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
}
|
},
|
mounted() {
|
// this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
methods:{
|
showDialog() {
|
let param = {projectId:this.projectId,diagramId:this.diagramId}
|
console.log(param, 'dialog init param')
|
this.dialogVisible = true;
|
this.$nextTick(()=>{
|
this.$refs.inspectionNode.init(param)
|
})
|
},
|
procResult(node) {
|
// console.log(node,'node')
|
this.text =node.nodeName
|
this.dateId = node.nodeId
|
this.globalGridAttr.dataId = this.dateId
|
this.globalGridAttr.inspectName = this.text
|
this.globalGridAttr.nodeText = this.text
|
this.data={
|
dataId:this.dateId,
|
inspectName:this.text
|
}
|
this.curCel.setData(this.data)
|
this.curCel.attr('text/text', this.text)
|
this.curCel.attr('data/dataId', this.dateId)
|
this.curCel.attr('data/inspectName', this.text)
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
this.dialogVisible = false
|
// console.log(node,'dialog窗口返回值')
|
},
|
// 改变边框颜色
|
onStrokeChange(e){
|
let val = e
|
this.globalGridAttr.nodeStroke = val
|
this.curCel.attr('body/stroke', val)
|
},
|
//改变边框大小
|
onStrokeWidthChange(e){
|
let val =e
|
this.globalGridAttr.nodeStrokeWidth = val
|
this.curCel.attr('body/strokeWidth', val)
|
},
|
//改变文本颜色
|
onFillChange(e){
|
let val = e
|
this.globalGridAttr.nodeFill=val
|
this.curCel.attr('body/fill', val)
|
// this.curCel.attr('title/fill', val)
|
},
|
// 改变字体大小
|
onFontSizeChange(e){
|
let val =e
|
this.globalGridAttr.nodeFontSize = val
|
this.curCel.attr('text/fontSize', val)
|
this.curCel.attr('title/fontSize', val)
|
},
|
// 改变字体颜色
|
onColorChange(e){
|
let val =e
|
this.globalGridAttr.nodeColor = val
|
this.curCel.attr('text/fill', val)
|
this.curCel.attr('title/fill', val)
|
this.curCel.attr('text/style/color', val)
|
this.curCel.attr('title/style/color', val)
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
// 改变文本
|
onTextChange(e){
|
this.text =e
|
this.globalGridAttr.nodeText = this.text
|
this.curCel.attr('label/textWrap/text', this.text)
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
|
},
|
onNodeTypeExtChange(e){
|
this.globalGridAttr.nodeTypeExt = e
|
let nodeTypeExt={
|
nodeTypeExt:this.globalGridAttr.nodeTypeExt
|
}
|
this.curCel.setData(nodeTypeExt)
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
onStatusImgChange(e){
|
this.globalGridAttr.statusImg = e
|
let statusImg={
|
statusImg:this.globalGridAttr.statusImg
|
}
|
this.curCel.setData(statusImg)
|
console.log(this.globalGridAttr.statusImg,'this.globalGridAttr.statusImg')
|
console.log(this.curCel,'this.curCel')
|
console.log(this.curCel.attr,'this.curCel.attr')
|
this.curCel.removeTools()
|
this.curCel.addTools([
|
{
|
name: 'button',
|
args: {
|
markup: [
|
{
|
tagName: 'image',
|
selector: 'icon',
|
attrs: {
|
// 'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
|
'xlink:href':statusImg.statusImg,
|
width: 30,
|
height: 30,
|
x: 0,
|
y: 0
|
}
|
}
|
]
|
}
|
}
|
])
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
onDateChange(e){
|
this.date =e
|
this.globalGridAttr.nodeDate = this.date
|
this.data={
|
finishDate:this.date,
|
}
|
this.curCel.setData(this.data)
|
if(this.shape=='custom-circle1'){
|
this.curCel.attr('text/text', this.date)
|
}
|
this.curCel.attr('title/text', this.date)
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
nodeOpt(id, globalGridAttr){
|
this.curCel=null
|
if(id){
|
let cell = this.graph.getCellById(id)
|
// console.log(cell,'let cell 123456')
|
if (!cell || !cell.isNode()) {
|
return
|
}
|
this.curCel = cell
|
globalGridAttr.nodeStroke = cell.attr('body/stroke')
|
globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
|
globalGridAttr.nodeFill = cell.attr('body/fill')
|
// globalGridAttr.nodeFontSize = cell.attr('text/fontSize')
|
// globalGridAttr.nodeFontSize = cell.attr('title/fontSize')
|
globalGridAttr.nodeFontSize = cell.attr('text/fontSize')?cell.attr('text/fontSize'):cell.attr('title/fontSize')
|
globalGridAttr.nodeColor = cell.attr('text/fill') ? cell.attr('text/fill'):cell.attr('title/fill')?cell.attr('title/fill'):cell.attr('label/text/fill')
|
// globalGridAttr.nodeColor = cell.attr('text/fill')
|
// globalGridAttr.nodeColor = cell.attr('title/fill')
|
// globalGridAttr.nodeColor = cell.attr('text/style/color')
|
// globalGridAttr.nodeColor = cell.attr('title/style/color')
|
globalGridAttr.nodeUsers = cell.attr('approve/users')
|
globalGridAttr.nodeText = cell.attr('label/textWrap/text')
|
if(this.shape=='custom-circle1'){
|
globalGridAttr.nodeDate = cell.attr('text/text')
|
}
|
globalGridAttr.nodeDate = cell.attr('title/text')
|
globalGridAttr.dataId = cell.getData().dataId
|
globalGridAttr.inspectName =cell.getData().inspectName
|
globalGridAttr.nodeTypeExt=cell.getData().nodeTypeExt
|
globalGridAttr.statusImg = cell.getData().statusImg
|
cell.removeTools()
|
cell.addTools([
|
{
|
name: 'button',
|
args: {
|
markup: [
|
{
|
tagName: 'image',
|
selector: 'icon',
|
attrs: {
|
// 'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
|
'xlink:href':globalGridAttr.statusImg,
|
width: 30,
|
height: 30,
|
x: 0,
|
y: 0
|
}
|
}
|
]
|
}
|
}
|
])
|
// console.log(globalGridAttr.inspectName,globalGridAttr.dataId,globalGridAttr.nodeDate,'globalGridAttr.inspectName,globalGridAttr.dataId,globalGridAttr.nodeDate 789')
|
cell.getData()
|
// console.log( cell.getData(),' cell.getData() 909')
|
}
|
return this.curCel;
|
}
|
}
|
}
|
</script>
|
|
<style >
|
#tabPane .el-tabs__header.is-top .el-tabs__nav-scroll{
|
width: 100% !important;
|
}
|
|
#tabPane .el-color-picker__trigger{
|
width: 100%;
|
}
|
</style>
|
