新增设备状态图statusImg

wente

2024-03-06 03edf046f981c12de674562ad1ed34cc4871a94b

新增设备状态图statusImg

 web/packages/assets/css/base.css

@@ -66,7 +66,6 @@
  padding: 10px;
  color: #606266;
  font-size: 16px;
  max-height: 770px;
  min-height: 300px;
  word-break: break-all;
  border-top: 1px solid #EBEEF5;

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

@@ -40,6 +40,19 @@
            </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>
            <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 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 >
@@ -102,6 +115,16 @@
      }, {
        value: 'vote',
        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'
      }],
      date:'',
      text:'',
@@ -231,6 +254,39 @@
      this.curCel.setData(nodeTypeExt)
      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)
    },
    onDateChange(e){
      this.date =e
       this.globalGridAttr.nodeDate = this.date
@@ -273,6 +329,29 @@
        globalGridAttr.dataId = cell.getData().dataId
        globalGridAttr.inspectName =cell.getData().inspectName
        globalGridAttr.nodeTypeExt=cell.getData().nodeTypeExt
        globalGridAttr.statusImg = cell.getData().statusImg
        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')

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

@@ -1,25 +1,25 @@
<template>
  <div>
    <el-row :gutter="[8,8]">
      <el-col :span="5">
      <el-col :span="4">
        <div :style="'height:' +left_p+'px'">
          <div class="fa-card-a" style="height: 100%">
            <div id="stencilImg"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="19">
      <el-col :span="20">
        <div class="fa-card-a">
          <el-form :inline="true">
            <el-form-item>
              modelId
              <el-input placeholder="搜索施工内容" v-model="dataForm.modelId" clearable class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
              </el-input>

              <el-button type="primary" @click="saveDiagram()">保存</el-button>
              <el-button type="primary" @click="analyzeDiagram()">解析</el-button>
            </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="saveDiagram()">保存</el-button>
                  <el-button type="primary" @click="analyzeDiagram()">解析</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;"
@@ -121,7 +121,7 @@
          {imgPath:'voteRight',imgName:'vote',nodeType:'vote',imgWidth:60,imgHeight:60,imgId:'6',data:{}},
        ],
        imgsList2:[
          {imgPath:'logo',imgName:'logo',nodeType:'node',imgWidth:60,imgHeight:60,imgId:'100',data:{dataId:'123456',nodeTypeExt:''}},
          {imgPath:'logo',imgName:'logo',nodeType:'node',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',data:{dataId:'123456',nodeTypeExt:'aaa'}},
        ],
        nodeType:'',
        first: true,
@@ -175,6 +175,8 @@
        id: '',
        graph: null,
        globalGridAttr: {
          statusImg:'',
          nodeTypeExt:'',
          type: 'mesh',
          size: 10,
          color: '#e5e5e5',
@@ -880,7 +882,8 @@
              data: {
                dataId: item.data.dataId,
                nodeType: item.nodeType,
                nodeTypeExt: item.data.nodeTypeExt
                nodeTypeExt: item.data.nodeTypeExt,
                statusImg:item.statusImg
              },
              attrs: {
                text:{
@@ -896,13 +899,33 @@
                  textVerticalAnchor: 'top',
                },
              },
              tools: [
                {
                  name: 'button',
                  args: {
                    markup: [
                      {
                        tagName: 'image',
                        selector: 'icon',
                        attrs: {
                          // 'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
                          'xlink:href':item.statusImg,
                          width: 30,
                          height: 30,
                          x: 0,
                          y: 0
                        }
                      }
                    ]
                  }
                }
              ],
              ports: {...this.ports},
            }),
        )
        // r1.push(r5,r6,r9)
        console.log(imageNodes,'group1')
        stencil.load(imageNodes, 'group1')
        stencil.load(imageNodes2, 'group2')


        this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
          const cells = this.graph.getSelectedCells()
@@ -998,8 +1021,10 @@
          this.type = cell.isNode() ? 'node' : 'edge'
          this.shape = cell.shape
          this.id = cell.id
          this.nodeType = cell.getData().nodeType
          console.log(this.nodeType, 'this.nodeType')
          if(this.type==='node'){
            this.nodeType = cell.getData().nodeType
            console.log(this.nodeType, 'this.nodeType')
          }
          console.log(this.shape, 'this.shape')
          // this.nodeOpt(this.id, this.globalGridAttr)
        })