gc-starter-bigscreen-render v0.0.3-2023040701-Alpha

gc-starter-bigscreen-render

基于千行低代码的大屏设计和运行器

一、安装

npm install gc-starter-bigscreen-render

#### 此组件依赖一些库，需要安装
npm install gc-starter-ds-ui vue-sketch-ruler @jiaminghi/data-view echarts-wordcloud @antv/g2

二、组件及使用

1. 运行态组件

1.1 在组件中引入运行器组件和样式

<template>
  <BigScreenRun />
</template>
<script>
  // 引入预览组件和样式css
  import { BigScreenRun }  from 'gc-starter-bigscreen-render'
  import "gc-starter-bigscreen-render/lib/bigScreenRender.css"
  export default {
    components: {
      BigScreenRun
    }
  }
</script>

1.2 在千行框架下store/index.js中引入页面运行器所需要的vuex模块

// 其他代码省略
// 此处引入页面运行器vuex模块
import { $bigScreen } from 'gc-starter-bigscreen-render'

const store = new Vuex.Store({
  modules: {
    ...$gc.store,
    ...modules,
    // 此处导出页面运行器vuex模块
    bigScreen: $bigScreen.bigScreenStore
  }
})
export default store

2. 设计态组件

2.1 在组件中引入设计器组件和样式

引用该组件的路由必须包含code参数，code参数为页面的唯一标识

<template>
  <BigScreenDesign />
</template>
<script>
import { BigScreenDesign } from 'gc-starter-bigscreen-render'
import 'gc-starter-bigscreen-render/lib/bigScreenRender.css'
export default {
  components: {
    BigScreenDesign
  }
}
</script>

1.2 在千行框架下store/index.js中引入页面运行器所需要的vuex模块

// 其他代码省略
// 此处引入页面运行器vuex模块
import { $bigScreen } from 'gc-starter-bigscreen-render'

const store = new Vuex.Store({
  modules: {
    ...$gc.store,
    ...modules,
    // 此处导出页面运行器vuex模块
    bigScreen: $bigScreen.bigScreenStore
  }
})
export default store