样式修改

wente

2024-03-29 404bd17f83c0054388e4a02ff31dbc37c27a4b11

 web/src/views/modules/taskReliability/RBD-edit-img.vue

@@ -3,7 +3,7 @@
    <el-row :gutter="[8,8]">
      <el-col :span="4">
        <div :style="'height:' +left_p+'px'">
          <div class="fa-card-a" style="height: 100%">
          <div  style="height: 100%">
            <div id="stencilImg"></div>
          </div>
        </div>
@@ -18,49 +18,67 @@
              <el-button type="primary" @click="saveDiagram()">暂存</el-button>
              <el-button type="primary" @click="analyzeDiagram()">保存</el-button>
              <el-button type="primary" @click="clearDiagram()">清空图形</el-button>
              <el-button  @click="leftAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-zuoduiqi"></i>
              </el-button>
              <el-button @click="centerAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-chuizhiduiqi"></i>
              </el-button>
              <el-button @click="rightAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-youduiqi"></i>
              </el-button>
              <el-button @click="topAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-dingduiqi"></i>
              </el-button>
              <el-button @click="shuipingAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-shuipingduiqi"></i>
              </el-button>
              <el-button @click="bottomAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-diduiqi"></i>
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-tooltip class="item" effect="dark" content="左对齐" placement="left">
                <el-button class="" style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF;"
                           @click="leftAlign()"><i style="font-size: 2rem;"
                                                   class="wt-iconfont icon-zuoduiqi"></i></el-button>
              </el-tooltip>
            </el-form-item>
            <el-form-item>
              <el-tooltip class="item" effect="dark" content="居中对齐" placement="left">
                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                           @click="centerAlign()"><i style="font-size: 2rem;"
                                                     class="wt-iconfont icon-chuizhiduiqi"></i></el-button>
              </el-tooltip>
            </el-form-item>
            <el-form-item>
              <el-tooltip class="item" effect="dark" content="右对齐" placement="left">
                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                           @click="rightAlign()"><i style="font-size: 2rem;"
                                                    class="wt-iconfont icon-youduiqi"></i></el-button>
              </el-tooltip>
            </el-form-item>
            <el-form-item>
              <el-tooltip class="item" effect="dark" content="顶部对齐" placement="left">
                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                           @click="topAlign()"><i style="font-size: 2rem;"
                                                  class="wt-iconfont icon-dingduiqi"></i></el-button>
              </el-tooltip>
            </el-form-item>
            <el-form-item>
              <el-tooltip class="item" effect="dark" content="水平对齐" placement="left">
                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                           @click="shuipingAlign()"><i style="font-size: 2rem;"
                                                       class="wt-iconfont icon-shuipingduiqi"></i></el-button>
              </el-tooltip>
            </el-form-item>
            <el-form-item>
              <el-tooltip class="item" effect="dark" content="底部对齐" placement="left">
                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                           @click="bottomAlign()"><i style="font-size: 2rem;"
                                                     class="wt-iconfont icon-diduiqi"></i></el-button>
              </el-tooltip>
            </el-form-item>
<!--            <el-form-item>-->
<!--              <el-tooltip class="item" effect="dark" content="左对齐" placement="left">-->
<!--                <el-button class="" style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF;" @click="leftAlign()">-->
<!--                  <i style="font-size: 2rem;" class="wt-iconfont icon-zuoduiqi"></i>-->
<!--                </el-button>-->
<!--              </el-tooltip>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--              <el-tooltip class="item" effect="dark" content="居中对齐" placement="left">-->
<!--                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"-->
<!--                           @click="centerAlign()"><i style="font-size: 2rem;"-->
<!--                                                     class="wt-iconfont icon-chuizhiduiqi"></i></el-button>-->
<!--              </el-tooltip>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--              <el-tooltip class="item" effect="dark" content="右对齐" placement="left">-->
<!--                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"-->
<!--                           @click="rightAlign()"><i style="font-size: 2rem;"-->
<!--                                                    class="wt-iconfont icon-youduiqi"></i></el-button>-->
<!--              </el-tooltip>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--              <el-tooltip class="item" effect="dark" content="顶部对齐" placement="left">-->
<!--                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"-->
<!--                           @click="topAlign()"><i style="font-size: 2rem;"-->
<!--                                                  class="wt-iconfont icon-dingduiqi"></i></el-button>-->
<!--              </el-tooltip>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--              <el-tooltip class="item" effect="dark" content="水平对齐" placement="left">-->
<!--                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"-->
<!--                           @click="shuipingAlign()"><i style="font-size: 2rem;"-->
<!--                                                       class="wt-iconfont icon-shuipingduiqi"></i></el-button>-->
<!--              </el-tooltip>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--              <el-tooltip class="item" effect="dark" content="底部对齐" placement="left">-->
<!--                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"-->
<!--                           @click="bottomAlign()"><i style="font-size: 2rem;"-->
<!--                                                     class="wt-iconfont icon-diduiqi"></i></el-button>-->
<!--              </el-tooltip>-->
<!--            </el-form-item>-->
          </el-form>
          <div id="containerImg" style="border: 1px solid #EAEBEE;border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
@@ -157,6 +175,7 @@
          content: null,
          publishContent: null,
          hasPublish: 0,
          urlPref: '',
        },
        // emptyJson: {
        //   // 节点
@@ -184,6 +203,7 @@
        id: '',
        graph: null,
        globalGridAttr: {
          productType:'',
          voteNum: '',
          repairMttcr: '',
          repairMttcrOther: '',
@@ -335,14 +355,18 @@
      },
      async getDiagram(modelId) {
        let params = {
          modelId: modelId
          modelId: modelId,
          urlPref: window.SITE_CONFIG['apiURL'],
          token: Cookies.get('token'),
        }
        let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
        console.log(res, 'async getDiagram( res')
        if (res.data !== null && res.data.content != null) {
        if (res.data !== null && (res.data.content != null)) {
          this.dataForm = res.data
          console.log(this.dataForm, 'this.dataForm in getDiagram')
          this.diagramJson = JSON.parse(this.dataForm.content)
          if(this.dataForm.content!=''){
            this.diagramJson = JSON.parse(this.dataForm.content)
          }
          // console.log(this.dataForm.content,'this.Diagram content')
          console.log(this.diagramJson, 'this.Diagram json')
          this.graph.fromJSON(this.diagramJson)
@@ -493,6 +517,7 @@
        })
        this.graph.centerContent()
        const stencil = new Addon.Stencil({
          getDragNode: (node) => node.clone({ keepId: true }),
          getDropNode(node) {
            let {width, height} = node.size()
            if (node.getData().imgWidth) {
@@ -501,9 +526,11 @@
            if (node.getData().imgHeight) {
              height = node.getData().imgHeight
            }
            console.log(node.getData().imgWidth, node.getData().imgHeight, 'node.size()')
            return node.clone().size(width, height)
            return node.clone({ keepId: true }).size(width, height)
          },
            validateNode(node){
              console.log(node.id)
            },
          title: '',
          target: this.graph,
            stencilGraphWidth: 200,
@@ -535,8 +562,6 @@
            imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
            width: item.imgWidth,
            height: item.imgHeight,
            x: item.imgWidth,
            y: item.imgHeight,
            data: {
              dataId: '',
              nodeType: item.nodeType,
@@ -572,6 +597,7 @@
            imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
            width: 60,
            height: 60,
            id: item.dataId, // 手动设置节点的 ID
            data: {
              isRepair: item.isRepair,
              dataId: item.dataId,
@@ -727,7 +753,7 @@
          this.id = cell.id
          if (this.type === 'node') {
            this.nodeType = cell.getData().nodeType
            console.log(this.nodeType, 'this.nodeType')
            console.log(this.nodeType,cell.id,'this.nodeType')
          }
          console.log(this.shape, 'this.shape')
          // this.nodeOpt(this.id, this.globalGridAttr)
@@ -810,9 +836,23 @@

        this.graph.on('edge:mouseenter', ({cell}) => {
          // alert(123)
          cell.addTools(
              ['segments']
          )
          cell.addTools([
            {
              name: 'source-arrowhead',
            },
            {
              name: 'target-arrowhead',
              args: {
                attrs: {
                  fill: 'red',
                },
              },
            },
              {
                  name: 'segments',
                  args: {snapRadius: 20, attrs: {fill: '#444'}}
              },
          ])
        })

        this.graph.on('edge:mouseleave', ({cell}) => {
@@ -880,6 +920,7 @@
      async saveDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
        this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
        console.log(this.dataForm, 'dataFrom')
        await this.$http[this.dataForm.id === null ? 'post' : 'put'](`/taskReliability/ModelLine/`, this.dataForm).then(async res => {
          if (res.msg === 'success') {
@@ -892,7 +933,7 @@
      async analyzeDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
        console.log(this.dataForm, 'dataFrom')
        this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
        await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => {
          if (res.msg === 'success') {
            this.$alert('解析成功', '提示', {