@kaitu/configure

kaitu web 组态软件，方便组件化模块化工程化引入

kaitu 组态官网

configure

安装 @kaitu/configure 版本

npm install @kaitu/configure

在 main.js引入 @kaitu/configure

const app = createApp(App)
import kaituConfigure from '@kaitu/configure'
import '@kaitu/configure/dist/style.css'
app.use(kaituConfigure)

渲染器

<kaituConfigureRender
  ref="kaituConfigureRenderRef"
  :graph="previewData.graph"
  :originData="previewData.originData"
  :updateData="previewData.updateData"
  @completed="handleCompleted"
  @event="handleEvent"
  @dialogEvent="handleEvent"
  @getEditor="handleGetEditor"
></kaituConfigureRender>

const kaituConfigureRenderRef = ref(null)

let previewData = reactive({
  graph: '',
  originData: [],
  updateData: [],
})

// 加载图纸完成
const handleCompleted = () => {
  kaituConfigureRenderRef.value.handleFitView()
}
// 事件监听
const handleEvent = (row, eventItem, eventType) => {
  /**
   * row: 当前元件所有数据
   */
  /**
   * eventItem: 事件数据
    eventItem.type: '',//事件
    eventItem.action: '',//事件类型
    eventItem.name: '',// 页面type/链接地址/图纸名称/弹窗类型/下发name/自定义name
    eventItem.value: '', ///URL/打开方式/图纸路径/弹窗value/下发value/自定义value
    eventItem.status: '' //下发值类型
    eventItem.uuid: '' 设备uuid
   */
  /**
   * eventItem.action: 动作类型 //
   * dialog: 打开弹窗
   * dialogPage: 打开图纸弹窗
   * control: 控制下发
   * link: 打开链接
   * page: 打开页面
   * custom: 自定义
   * variable: 变量赋值
   */

  /**
   * eventType: 事件类型 //click dblclick mouserover mouseout
   */
  if (eventItem.action === 'dialog') {
    console.log(row)
  }
  if (eventItem.action === 'link') {
    const url = eventItem.name
    const type = eventItem.value ? eventItem.value : '_blank'
    window.open(url, type)
  }
  if (eventItem.action === 'variable') {
    const obj = {
      uuid: eventItem.uuid,
      value: eventItem.value,
    }
    console.log(row)
  }
}
// 渲染器
const handleGetEditor = (editor, objects) => {
  /**
   * editor: 渲染器实例
   * objects: 所有的组件
   * */
  console.log(editor, objects)
}

graph: 图纸数据, 为String格式

参数

originData: 设备数据,为Array格式

;[
  {
    uuid: 'dev_001_01',
    value: 8,
    name: '1号进线柜-Ia',
  },
  {
    uuid: 'dev_001_02',
    value: 0,
    name: '1号进线柜-Ib',
  },
]

updateData: 更新设备数据,为Array格式

;[
  {
    uuid: 'dev_001_01',
    value: 7,
    name: '1号进线柜-Ia',
  },
]

事件

@completed: 图纸加载完成 @event: 点击事件 @dialogEvent: 二次弹窗页面点击事件 @getEditor: 渲染器示例和全部组件