时序图模板修改

wente

2024-10-31 a7892d2ab77735063408c24be9bddfba01740e1d

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

@@ -6,31 +6,31 @@
        <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-slider :min=8 :max=20 :step=1 v-model="tempNodeAttr.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-color-picker  v-model="tempNodeAttr.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-input  @click.native='showDialog' v-model="tempNodeAttr.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-input  v-model="tempNodeAttr.nodeText" style="width:100%" @change="onTextChange"></el-input>
          </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"
            <el-date-picker v-model="tempNodeAttr.nodeDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                            style="width: 100%" @change="onDateChange">
            </el-date-picker>
          </el-col>
@@ -40,19 +40,19 @@
        <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-color-picker v-model="tempNodeAttr.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-slider :min=1 :max=20 :step=1 v-model="tempNodeAttr.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-color-picker  v-model="tempNodeAttr.nodeFill" style="width: 100%" @change="onFillChange"></el-color-picker>
          </el-col>
        </el-row>
      </el-tab-pane>
@@ -83,7 +83,16 @@
      content:'',
      dialogVisible:false,
      activeName: 'first',
      // globalGridAttr:{},
      tempNodeAttr:{
        nodeFontSize:'',
        nodeColor:'',
        inspectName:'',
        nodeText:'',
        nodeDate:'',
        nodeStroke:'',
        nodeStrokeWidth:'',
        nodeFill:'',
      },
      curCel:Cell,
      left_p:document.documentElement.clientHeight*0.9,
    }
@@ -101,9 +110,6 @@
    refY2:{
      type: Number
    },
    globalGridAttr:{
      type: Object,
    },
    graph:{
      type: String,
    },
@@ -113,14 +119,6 @@
    diagramId:{
      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() {
@@ -135,9 +133,9 @@
      // 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.tempNodeAttr.dataId = this.dateId
      this.tempNodeAttr.inspectName = this.text
      this.tempNodeAttr.nodeText = this.text
      this.data={
        dataId:this.dateId,
        inspectName:this.text
@@ -146,56 +144,56 @@
      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.curCel = this.nodeOpt(this.id,this.tempNodeAttr)
      this.dialogVisible = false
      // console.log(node,'dialog窗口返回值')
    },
    // 改变边框颜色
    onStrokeChange(e){
      let val = e
      this.globalGridAttr.nodeStroke = val
      this.tempNodeAttr.nodeStroke = val
     this.curCel.attr('body/stroke', val)
    },
    //改变边框大小
    onStrokeWidthChange(e){
      let val =e
      this.globalGridAttr.nodeStrokeWidth = val
      this.tempNodeAttr.nodeStrokeWidth = val
      this.curCel.attr('body/strokeWidth', val)
    },
    //改变文本颜色
    onFillChange(e){
      let val = e
      this.globalGridAttr.nodeFill=val
      this.tempNodeAttr.nodeFill=val
      this.curCel.attr('body/fill', val)
      // this.curCel.attr('title/fill', val)
    },
    // 改变字体大小
    onFontSizeChange(e){
      let val =e
      this.globalGridAttr.nodeFontSize = val
      this.tempNodeAttr.nodeFontSize = val
      this.curCel.attr('text/fontSize', val)
      this.curCel.attr('title/fontSize', val)
    },
    // 改变字体颜色
    onColorChange(e){
      let val =e
      this.globalGridAttr.nodeColor = val
      this.tempNodeAttr.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)
      // this.curCel = this.nodeOpt(this.id,this.tempNodeAttr)
    },
    // 改变文本
    onTextChange(e){
      this.text =e
      this.globalGridAttr.nodeText = this.text
      this.tempNodeAttr.nodeText = this.text
      this.curCel.attr('label/textWrap/text', this.text)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
      // this.curCel = this.nodeOpt(this.id,this.tempNodeAttr)
    },
    onDateChange(e){
      this.date =e
       this.globalGridAttr.nodeDate = this.date
       this.tempNodeAttr.nodeDate = this.date
       this.data={
        finishDate:this.date,
      }
@@ -204,42 +202,24 @@
        this.curCel.attr('text/text', this.date)
      }
      this.curCel.attr('title/text', this.date)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
      // this.curCel = this.nodeOpt(this.id,this.tempNodeAttr)
    },
    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
        }
    loadData(cell){
        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')
        console.log(globalGridAttr.nodeText,'globalGridAttr.nodeText')
      this.tempNodeAttr.nodeStroke = cell.attr('body/stroke')
      this.tempNodeAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
      this.tempNodeAttr.nodeFill = cell.attr('body/fill')
      this.tempNodeAttr.nodeFontSize = cell.attr('text/fontSize')?cell.attr('text/fontSize'):cell.attr('title/fontSize')
      this.tempNodeAttr.nodeColor = cell.attr('text/fill') ? cell.attr('text/fill'):cell.attr('title/fill')?cell.attr('title/fill'):cell.attr('label/text/fill')
      this.tempNodeAttr.nodeUsers = cell.attr('approve/users')
      this.tempNodeAttr.nodeText = cell.attr('label/textWrap/text')
      console.log(this.tempNodeAttr.nodeText,'tempNodeAttr.nodeText')
        if(this.shape=='custom-circle1'){
          globalGridAttr.nodeDate = cell.attr('text/text')
        this.tempNodeAttr.nodeDate = cell.attr('text/text')
        }
        globalGridAttr.nodeDate = cell.attr('title/text')
        globalGridAttr.dataId = cell.getData().dataId
        globalGridAttr.inspectName =cell.getData().inspectName
        // 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;
      this.tempNodeAttr.nodeDate = cell.attr('title/text')
      this.tempNodeAttr.dataId = cell.getData().dataId
      this.tempNodeAttr.inspectName =cell.getData().inspectName
    }
  }
}