abc-formula-blueprint

依赖 gojs 2.3.11 版本

npm install gojs --save

安装 公式蓝图组件

npm i abc-formula-blueprint

引用试列 main.js中加入组件引用

import AbcFormulaBlueprint from 'abc-formula-blueprint';
Vue.use(AbcFormulaBlueprint)

引用组件 试列

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <button @click="findFormulaConfig">获取配置结果</button>
    <div style="height: 500px;width: 1200px;">
      <ui-formula-blueprint :customTypeData="Symbol" :formulaModel="initFormulaJSON" > </ui-formula-blueprint>
    </div>
  
  </div>
</template>
<script>
//import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    // HelloWorld,
  },
  mounted() {
    setTimeout(() => {
      this.Symbol = [{key:"machinerate",displayValue:"塔机倍率",category:"field"},
                  {key:"alarmrateload",displayValue:"报警额定吊重",category:"field"},
                  {key:"alarmwindspeed",displayValue:"报警风速",category:"field"},
                  {key:"alarmrotaion",displayValue:"报警回转",category:"field"},
                  {key:"alarmhookheight",displayValue:"报警吊钩高度m",category:"field"},
                  {key:"alarmamplitude",displayValue:"报警幅度m",category:"field"},
                  {key:"alarmweight",displayValue:"报警吊重t",category:"field"},
                  {key:"alarmmomentper",displayValue:"报警力矩百分比",category:"field"},
                  {key:"alarmmoment",displayValue:"报警力矩tm",category:"field"},
                  {key:"alarmtype",displayValue:"报警类型",category:"field"},
                  {key:"alarmtime",displayValue:"报警时间",category:"field"},
                  {key:"machineid",displayValue:"设备编号",category:"field"}];

        }, 3000); // 延迟1秒执行
       
      },
  data : function(){

    return {

      Symbol:[],
      initFormulaJSON: ""
     

    }
  },
  methods : {
    findFormulaConfig : function (){
      var dataJson =  this.$refs.formulaBlueprint.formulaData();
      console.log(dataJson);
    }
  }
}
</script>

** customTypeData 初始化默认的计算属性

** formulaModel 编辑模式下 加载上次配置好的 蓝图JSON数据 ,空代表全新的一个画布

** this.$refs.formulaBlueprint.formulaData(); 获取配置好的公式配置数据后续解析