<template>
|
<div style="position: absolute;top:0;right:0;background:#cccccc;width: 400px;" :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" 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' && showNumberInput" 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 type="number" v-model="globalGridAttr.numberInputValue" @change="onNumberInputValue" placeholder="请输入数字"></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.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 :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>
|
<zt-dict v-model="globalGridAttr.reliabDistribType" @input="onReliabDistribType" dict="ReliabDistribType" placeholder="可靠性分布类型" clearable/>
|
</el-col>
|
</el-row>
|
<el-row :gutter="5" v-show="nodeType=='node'" align="middle" style="margin-top:20px;">
|
<el-col :span=24>
|
<el-input type="number" v-model="globalGridAttr.taskMtbcf" @change="onTaskMtbcfChange"></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">参数2</el-col>
|
<el-col :span=16>
|
<el-input v-model="globalGridAttr.taskMtbcfOther" @change="onTaskMtbcfOtherChange"></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.isRepair" @change="onIsRepairChange">
|
<el-option
|
v-for="item in isRepair"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
<div v-show="nodeType=='node' && showRepairInput">
|
<el-row :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>
|
<zt-dict v-model="globalGridAttr.repairDistribType" dict="RepairDistribType" @input="onRepairDistribTypeChange" placeholder="维修性分布类型" clearable/>
|
</el-col>
|
</el-row>
|
<el-row :gutter="5" align="middle" style="margin-top:20px;">
|
<el-col :span=24>
|
<el-input type="number" v-model="globalGridAttr.repairMttcr" @change="onRepairMttcrChange"></el-input>
|
</el-col>
|
</el-row>
|
<el-row :gutter="5" align="middle" style="margin-top:20px;">
|
<el-col :span=8 style="font-size: 16px;line-height: 32px">参数2</el-col>
|
<el-col :span=16>
|
<el-input v-model="globalGridAttr.repairMttcrOther" @change="onRepairMttcrOtherChange"></el-input>
|
</el-col>
|
</el-row>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="样式" name="second">
|
<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-tab-pane>
|
</el-tabs>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import { Graph, Shape, Node, Addon, Cell,FunctionExt} from '@antv/x6';
|
// const {inject} = require("vue");
|
export default {
|
name: "index",
|
data(){
|
return{
|
data:{
|
dataId:'',
|
finishDate: '',
|
inspectName:''
|
},
|
showNumberInput:false,
|
showRepairInput:false,
|
options: [{
|
value: '',
|
label: '无'
|
},{
|
value: 'switch',
|
label: '旁连'
|
}, {
|
value: 'vote',
|
label: '表决'
|
}],
|
isRepair:[
|
{
|
value: 0,
|
label: '否'
|
}, {
|
value: 1,
|
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'
|
}],
|
text:'',
|
dialogVisible:false,
|
activeName: 'first',
|
// globalGridAttr:{},
|
curCel:Cell,
|
left_p:document.documentElement.clientHeight* 0.75,
|
}
|
},
|
components:{
|
},
|
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)
|
})
|
},
|
// 改变字体大小
|
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('text/text', this.text)
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
|
},
|
onNodeTypeExtChange(e){
|
if (this.globalGridAttr.nodeTypeExt === 'vote') {
|
this.showNumberInput = true;
|
} else {
|
this.showNumberInput = false;
|
this.globalGridAttr.numberInputValue = '';
|
}
|
this.globalGridAttr.nodeTypeExt = e
|
let nodeTypeExt={
|
nodeTypeExt:this.globalGridAttr.nodeTypeExt
|
}
|
this.curCel.setData(nodeTypeExt)
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
// 表决数量
|
onNumberInputValue(e){
|
this.globalGridAttr.voteSum = e
|
let voteSum={
|
voteSum:this.globalGridAttr.voteSum
|
}
|
this.curCel.setData(voteSum)
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
// 可靠性分布类型
|
onReliabDistribType(e){
|
this.globalGridAttr.reliabDistribType = e
|
let reliabDistribType={
|
reliabDistribType:this.globalGridAttr.reliabDistribType
|
}
|
this.curCel.setData(reliabDistribType)
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
// mtbf
|
onTaskMtbcfChange(e){
|
this.globalGridAttr.taskMtbcf =e
|
let taskMtbcf={
|
taskMtbcf:this.globalGridAttr.taskMtbcf
|
}
|
this.curCel.setData(taskMtbcf)
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
// 参数2
|
onTaskMtbcfOtherChange(e){
|
this.globalGridAttr.taskMtbcfOther = e
|
let taskMtbcfOther={
|
taskMtbcfOther:this.globalGridAttr.taskMtbcfOther
|
}
|
this.curCel.setData(taskMtbcfOther)
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
// 是否可维修
|
onIsRepairChange(e){
|
this.showRepairInput = this.globalGridAttr.isRepair === 1;
|
this.globalGridAttr.isRepair = e
|
let isRepair={
|
isRepair:this.globalGridAttr.isRepair
|
}
|
this.curCel.setData(isRepair)
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
// 可维修性分布类型
|
onRepairDistribTypeChange(e){
|
this.globalGridAttr.repairDistribType = e
|
let repairDistribType={
|
repairDistribType:this.globalGridAttr.repairDistribType
|
}
|
this.curCel.setData(repairDistribType)
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
// Mttcr
|
onRepairMttcrChange(e){
|
this.globalGridAttr.repairMttcr = e
|
let repairMttcr={
|
repairMttcr:this.globalGridAttr.repairMttcr
|
}
|
this.curCel.setData(repairMttcr)
|
this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
|
},
|
// 可维修性分布类型 参数2
|
onRepairMttcrOtherChange(e){
|
this.globalGridAttr.repairMttcrOther = e
|
let repairMttcrOther={
|
repairMttcrOther:this.globalGridAttr.repairMttcrOther
|
}
|
this.curCel.setData(repairMttcrOther)
|
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)
|
},
|
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('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
|
globalGridAttr.reliabDistribType = cell.getData().reliabDistribType
|
globalGridAttr.repairDistribType = cell.getData().repairDistribType
|
globalGridAttr.repairMttcr = cell.getData().repairMttcr
|
globalGridAttr.repairMttcrOther = cell.getData().repairMttcrOther
|
globalGridAttr.taskMtbcf = cell.getData().taskMtbcf
|
globalGridAttr.taskMtbcfOther = cell.getData().taskMtbcfOther
|
globalGridAttr.isRepair = cell.getData().isRepair
|
this.showRepairInput = cell.getData().isRepair
|
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>
|