<template>
|
<div ref="" 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-form :model="globalGridAttr">
|
<el-form-item v-show="shape!=='custom-circle1'" label="节点名称" prop="nodeText" label-width="80px">
|
<el-input v-model="globalGridAttr.nodeText" style="width:100%" @change="onTextChange"></el-input>
|
</el-form-item>
|
<el-form-item v-show="nodeType=='vote' || (nodeType=='node' && showNumberInput)" label="表决数量" prop="voteNum"
|
label-width="80px">
|
<el-input type="number" v-model="globalGridAttr.voteNum" @change="onNumberInputValue"
|
placeholder="请输入数字"></el-input>
|
</el-form-item>
|
<div v-show="globalGridAttr.productType!=='product_xdy'">
|
<el-form-item v-show="nodeType=='node'" label="可靠性分布类型" prop="reliabDistribType" label-width="125px">
|
<zt-dict style="width: 100%" v-model="globalGridAttr.reliabDistribType" @input="onReliabDistribType"
|
dict="ReliabDistribType" placeholder="可靠性分布类型" clearable/>
|
</el-form-item>
|
<el-form-item v-show="nodeType=='node'" label="MTBCF" prop="taskMtbcf" label-width="80px">
|
<el-input v-model="globalGridAttr.taskMtbcf" @change="onTaskMtbcfChange"></el-input>
|
</el-form-item>
|
<el-form-item v-show="nodeType=='node'" label="参数2" prop="taskMtbcfOtherParams2" label-width="80px">
|
<el-input v-model="globalGridAttr.taskMtbcfOtherParams2" @change="onTaskMtbcfOther2Change"></el-input>
|
</el-form-item>
|
<el-form-item v-show="nodeType=='node'" label="参数3" prop="taskMtbcfOtherParams3" label-width="80px">
|
<el-input v-model="globalGridAttr.taskMtbcfOtherParams3" @change="onTaskMtbcfOther3Change"></el-input>
|
</el-form-item>
|
<el-form-item v-show="nodeType=='node'" label="是否可维修" prop="isRepair" label-width="100px">
|
<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-form-item>
|
<div v-show="nodeType=='node' && showRepairInput">
|
<el-form-item label="可维修性分布类型" prop="repairDistribType" label-width="140px">
|
<zt-dict v-model="globalGridAttr.repairDistribType" dict="RepairDistribType"
|
@input="onRepairDistribTypeChange" placeholder="维修性分布类型" clearable/>
|
</el-form-item>
|
<el-form-item label="MTTCR" prop="repairMttcr" label-width="80px">
|
<el-input v-model="globalGridAttr.repairMttcr" @change="onRepairMttcrChange"></el-input>
|
</el-form-item>
|
<el-form-item label="参数2" prop="repairMttcrOtherParams2" label-width="80px">
|
<el-input v-model="globalGridAttr.repairMttcrOtherParams2" @change="onRepairMttcrOther2Change"></el-input>
|
</el-form-item>
|
<el-form-item label="参数2" prop="repairMttcrOtherParams3" label-width="80px">
|
<el-input v-model="globalGridAttr.repairMttcrOtherParams3" @change="onRepairMttcrOther3Change"></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
</el-form>
|
</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>
|
export default {
|
name: "configNode",
|
data() {
|
return {
|
globalGridAttr: {
|
nodeText: '',
|
nodeStroke: '',
|
nodeStrokeWidth: '',
|
nodeFill: '',
|
nodeFontSize: '',
|
nodeColor: '',
|
nodeUsers: '',
|
nodeDate: '',
|
dataId: '',
|
inspectName: '',
|
nodeTypeExt: '',
|
statusImg: '',
|
reliabDistribType: '',
|
repairDistribType: '',
|
repairMttcr: '',
|
repairMttcrOtherParams2: '',
|
repairMttcrOtherParams3: '',
|
taskMtbcfOtherParams2: '',
|
taskMtbcfOtherParams3: '',
|
taskMtbcf: '',
|
isRepair: '',
|
voteNum: 0,
|
productType: ''
|
},
|
data: {
|
dataId: '',
|
finishDate: '',
|
inspectName: ''
|
},
|
showNumberInput: false,
|
showRepairInput: false,
|
isRepair: [
|
{
|
value: 0,
|
label: '否'
|
}, {
|
value: 1,
|
label: '是'
|
}
|
],
|
text: '',
|
dialogVisible: false,
|
activeName: 'first',
|
curCel: null,
|
left_p: document.documentElement.clientHeight * 0.75,
|
}
|
},
|
components: {},
|
props: {
|
},
|
watch: {
|
},
|
mounted() {
|
},
|
methods: {
|
// 改变字体大小
|
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)
|
},
|
// 改变文本
|
onTextChange(e) {
|
this.text = e
|
this.curCel.attr('text/text', this.text)
|
},
|
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)
|
},
|
// 表决数量
|
onNumberInputValue(e) {
|
this.globalGridAttr.voteNum = e
|
let voteNum = {
|
voteNum: this.globalGridAttr.voteNum
|
}
|
this.curCel.setData(voteNum)
|
},
|
// 可靠性分布类型
|
onReliabDistribType(e) {
|
this.globalGridAttr.reliabDistribType = e
|
let reliabDistribType = {
|
reliabDistribType: this.globalGridAttr.reliabDistribType
|
}
|
this.curCel.setData(reliabDistribType)
|
},
|
// mtbf
|
onTaskMtbcfChange(e) {
|
const numberRegex = /^-?\d+(\.\d+)?$/
|
if (numberRegex.test(e)) {
|
this.globalGridAttr.taskMtbcf = e
|
let taskMtbcf = {
|
taskMtbcf: this.globalGridAttr.taskMtbcf
|
}
|
this.curCel.setData(taskMtbcf)
|
} else {
|
this.$message.error('输入格式有误，请输入实数')
|
}
|
},
|
// 参数2
|
onTaskMtbcfOther2Change(e) {
|
const numberRegex = /^-?\d+(\.\d+)?$/
|
console.log(e, 'eeeee')
|
if (numberRegex.test(e)) {
|
this.globalGridAttr.taskMtbcfOtherParams2 = e
|
let taskMtbcfOtherParams2 = {
|
taskMtbcfOtherParams2: this.globalGridAttr.taskMtbcfOtherParams2
|
}
|
this.curCel.setData(taskMtbcfOtherParams2)
|
} else {
|
this.$message.error('输入格式有误，请输入实数')
|
}
|
},
|
onTaskMtbcfOther3Change(e) {
|
const numberRegex = /^-?\d+(\.\d+)?$/
|
console.log(e, 'eeeee')
|
if (numberRegex.test(e)) {
|
this.globalGridAttr.taskMtbcfOtherParams3 = e
|
let taskMtbcfOtherParams3 = {
|
taskMtbcfOtherParams3: this.globalGridAttr.taskMtbcfOtherParams3
|
}
|
this.curCel.setData(taskMtbcfOtherParams3)
|
} else {
|
this.$message.error('输入格式有误，请输入实数')
|
}
|
},
|
// 是否可维修
|
onIsRepairChange(e) {
|
this.showRepairInput = this.globalGridAttr.isRepair === 1;
|
this.globalGridAttr.isRepair = e
|
let isRepair = {
|
isRepair: this.globalGridAttr.isRepair
|
}
|
this.curCel.setData(isRepair)
|
},
|
// 可维修性分布类型
|
onRepairDistribTypeChange(e) {
|
this.globalGridAttr.repairDistribType = e
|
let repairDistribType = {
|
repairDistribType: this.globalGridAttr.repairDistribType
|
}
|
this.curCel.setData(repairDistribType)
|
},
|
// Mttcr
|
onRepairMttcrChange(e) {
|
const numberRegex = /^-?\d+(\.\d+)?$/
|
if (numberRegex.test(e)) {
|
this.globalGridAttr.repairMttcr = e
|
let repairMttcr = {
|
repairMttcr: this.globalGridAttr.repairMttcr
|
}
|
this.curCel.setData(repairMttcr)
|
} else {
|
this.$message.error('输入格式有误，请输入实数')
|
}
|
|
},
|
// 可维修性分布类型 参数2
|
onRepairMttcrOther2Change(e) {
|
const numberRegex = /^-?\d+(\.\d+)?$/
|
if (numberRegex.test(e)) {
|
this.globalGridAttr.repairMttcrOtherParams2 = e
|
let repairMttcrOtherParams2 = {
|
repairMttcrOtherParams2: this.globalGridAttr.repairMttcrOtherParams2
|
}
|
this.curCel.setData(repairMttcrOtherParams2)
|
} else {
|
this.$message.error('输入格式有误，请输入实数')
|
}
|
},
|
// 可维修性分布类型 参数2
|
onRepairMttcrOther3Change(e) {
|
const numberRegex = /^-?\d+(\.\d+)?$/
|
if (numberRegex.test(e)) {
|
this.globalGridAttr.repairMttcrOtherParams3 = e
|
let repairMttcrOtherParams3 = {
|
repairMttcrOtherParams3: this.globalGridAttr.repairMttcrOtherParams3
|
}
|
this.curCel.setData(repairMttcrOtherParams3)
|
} else {
|
this.$message.error('输入格式有误，请输入实数')
|
}
|
},
|
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
|
}
|
}
|
]
|
}
|
}
|
])
|
},
|
loadData(cell) {
|
this.curCel = cell
|
if (cell.id) {
|
this.nodeType = cell.getData().nodeType
|
this.showNumberInput = false
|
this.globalGridAttr.nodeStroke = cell.attr('body/stroke')
|
this.globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
|
this.globalGridAttr.nodeFill = cell.attr('body/fill')
|
// globalGridAttr.nodeFontSize = cell.attr('text/fontSize')
|
// globalGridAttr.nodeFontSize = cell.attr('title/fontSize')
|
this.globalGridAttr.nodeFontSize = cell.attr('text/fontSize') ? cell.attr('text/fontSize') : cell.attr('title/fontSize')
|
this.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')
|
this.globalGridAttr.nodeUsers = cell.attr('approve/users')
|
this.globalGridAttr.nodeText = cell.attr('text/text')
|
this.globalGridAttr.nodeDate = cell.attr('title/text')
|
this.globalGridAttr.dataId = cell.getData().dataId
|
this.globalGridAttr.inspectName = cell.getData().inspectName
|
this.globalGridAttr.nodeTypeExt = cell.getData().nodeTypeExt
|
this.globalGridAttr.statusImg = cell.getData().statusImg
|
this.globalGridAttr.reliabDistribType = cell.getData().reliabDistribType
|
this.globalGridAttr.repairDistribType = cell.getData().repairDistribType
|
this.globalGridAttr.repairMttcr = cell.getData().repairMttcr
|
this.globalGridAttr.repairMttcrOther = cell.getData().repairMttcrOther
|
this.globalGridAttr.taskMtbcf = cell.getData().taskMtbcf
|
this.globalGridAttr.taskMtbcfOther = cell.getData().taskMtbcfOther
|
this.globalGridAttr.isRepair = cell.getData().isRepair
|
this.globalGridAttr.voteNum = cell.getData().voteNum
|
this.globalGridAttr.productType = cell.getData().productType
|
if (this.nodeType === 'vote' || this.globalGridAttr.nodeTypeExt === 'vote' || (cell.getData().voteNum !== undefined && cell.getData().voteNum !== '')) {
|
console.log(cell.getData().voteNum, 'cell.getData().voteNum')
|
this.showNumberInput = true
|
}
|
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': this.globalGridAttr.statusImg,
|
width: 30,
|
height: 30,
|
x: 0,
|
y: 0
|
}
|
}
|
]
|
}
|
}
|
])
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
#tabPane .el-tabs__header.is-top .el-tabs__nav-scroll {
|
width: 100% !important;
|
}
|
|
#tabPane .el-color-picker__trigger {
|
width: 100%;
|
}
|
</style>
|
