组合图

wente

2024-04-30 225616b409fff50107ad7e9c790c96a65434e35d

 web/src/views/modules/taskReliability/ConfigNode/index.vue

@@ -1,8 +1,149 @@
<template>
  <div style="position: absolute;top:6%;right:0;background:#cccccc;width: 300px;" :style="'height:'+ left_p + 'px'">
  <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-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=='node'" label="连接关系" prop="nodeTypeExt" label-width="80px">
            <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-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="taskMtbcfOther" label-width="80px">
              <el-input  v-model="globalGridAttr.taskMtbcfOther" @change="onTaskMtbcfOtherChange"></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="repairMttcrOther" label-width="80px">
                <el-input  v-model="globalGridAttr.repairMttcrOther" @change="onRepairMttcrOtherChange"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
<!--        <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.voteNum" @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=8 style="font-size: 16px;line-height: 32px">MTBCF</el-col>-->
<!--          <el-col :span=16>-->
<!--            <el-input  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=8 style="font-size: 16px;line-height: 32px">MTTCR</el-col>-->
<!--            <el-col :span=16>-->
<!--              <el-input  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>
@@ -15,71 +156,14 @@
            <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 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",
@@ -90,32 +174,46 @@
        finishDate: '',
        inspectName:''
      },
      showNumberInput:false,
      showRepairInput:false,
      options: [{
        value: '',
        label: '无'
      }, {
        value: 'parallel',
        label: '旁连'
      },{
        value: 'switch',
        label: '并联'
        label: '旁连'
      }, {
        value: 'vote',
        label: '表决'
      }],
      date:'',
      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:'',
      dateId:'',
      content:'',
      dialogVisible:false,
      activeName: 'first',
      // globalGridAttr:{},
      curCel:Cell,
      left_p:document.documentElement.clientHeight*0.9,
      left_p:document.documentElement.clientHeight* 0.75,
    }
  },
  components:{
    Inspection
  },
  props:{
    id: {
@@ -160,44 +258,6 @@
        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
@@ -219,11 +279,17 @@
    onTextChange(e){
      this.text =e
      this.globalGridAttr.nodeText = this.text
      this.curCel.attr('label/textWrap/text', 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
@@ -231,17 +297,134 @@
      this.curCel.setData(nodeTypeExt)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    onDateChange(e){
      this.date =e
       this.globalGridAttr.nodeDate = this.date
       this.data={
        finishDate:this.date,
    // 表决数量
    onNumberInputValue(e){
      this.globalGridAttr.voteNum = e
      let voteNum={
        voteNum:this.globalGridAttr.voteNum
      }
      this.curCel.setData(this.data)
      if(this.shape=='custom-circle1'){
        this.curCel.attr('text/text', this.date)
      this.curCel.setData(voteNum)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    // 可靠性分布类型
    onReliabDistribType(e){
      this.globalGridAttr.reliabDistribType = e
      let reliabDistribType={
        reliabDistribType:this.globalGridAttr.reliabDistribType
      }
      this.curCel.attr('title/text', this.date)
      this.curCel.setData(reliabDistribType)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    // 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)
          this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
      }else {
        this.$message.error('输入格式有误，请输入实数')
      }

    },
    // 参数2
    onTaskMtbcfOtherChange(e){
      const numberRegex = /^-?\d+(\.\d+)?$/
      console.log(e,'eeeee')
      if(numberRegex.test(e)){
        this.globalGridAttr.taskMtbcfOther = e
        let taskMtbcfOther={
          taskMtbcfOther:this.globalGridAttr.taskMtbcfOther
        }
        this.curCel.setData(taskMtbcfOther)
        this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
      }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)
      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){
      const numberRegex = /^-?\d+(\.\d+)?$/
      if(numberRegex.test(e)){
        this.globalGridAttr.repairMttcr = e
        let repairMttcr={
          repairMttcr:this.globalGridAttr.repairMttcr
        }
        this.curCel.setData(repairMttcr)
        this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
      }else {
        this.$message.error('输入格式有误，请输入实数')
      }

    },
    // 可维修性分布类型 参数2
    onRepairMttcrOtherChange(e){
      const numberRegex = /^-?\d+(\.\d+)?$/
      if(numberRegex.test(e)) {
        this.globalGridAttr.repairMttcrOther = e
        let repairMttcrOther = {
          repairMttcrOther: this.globalGridAttr.repairMttcrOther
        }
        this.curCel.setData(repairMttcrOther)
        this.curCel = this.nodeOpt(this.id, this.globalGridAttr)
      }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
                }
              }
            ]
          }
        }
      ])
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    nodeOpt(id, globalGridAttr){
@@ -252,6 +435,7 @@
        if (!cell || !cell.isNode()) {
          return
        }
        this.showNumberInput = false
        this.curCel = cell
        globalGridAttr.nodeStroke = cell.attr('body/stroke')
        globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
@@ -265,14 +449,50 @@
        // 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.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
        globalGridAttr.voteNum = cell.getData().voteNum
        globalGridAttr.productType= cell.getData().productType
        // console.log(cell.getData().voteNum,'cell.getData().voteNum')
        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
        }
        // console.log(this.showNumberInput,'this.showNumberInput')
        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')