Web-studio NPM

安装

# 使用yarn 
yarn add web-studio

引入组件

// 在main.js引入
import VPageDesign from 'web-studio'
import 'web-studio/lib/web-studio.css'
Vue.use(VPageDesign)

自定义组件

// 配置基本路由
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/pageDesign',
      name: 'pageDesign',
      component: () => import('../views/design.vue')
    },
    {
      path: '/preview', // 
      name: 'preview',
      component: () => import('../views/preview.vue')
    }
  ]
})

使用页面编辑和预览组件

<!-- linkToLogin 登录失效时触发 -->
<!-- 页面编辑组件 -->
<v-page-design :app-id="appId" @updateToken="linkToLogin" />

<!-- 页面预览组件 -->
<v-page-preview :app-id="appId" @updateToken="linkToLogin" />

自定义组件

import CustomComponent from './views/custom'

VPageDesign.setConfig({
  customComponents: [{ // 一下都为必写项
    name: '自定义组件1', // 名字
    type: 'custom', // 类型
    component: CustomComponent, // 组件
    icon: 'bug', // 左侧菜单的图表
    content: { // 内容
      text: '文字',
      type: 'static' // 数据类型：static(静态)、interface（接口）
    },
    style: { // 组件样式配置
      width: 200,
      height: 36,
      color: '#fff'
    },
    editOptions: [{ // 组件可配置项
      key: 'content.type',
      label: '数据源',
      type: 'dataSoure' // 对应表单类型可选：title/dataSoure/image/switch/select/color/inputNumber
    }]
  }]
})

// 在自定义 CustomComponent 组件内接收配置数据
props: {
  initConfig: {
    type: Object,
    default: () => {
      return {}
    }
  }
}

// 如果配置数据源后，组件数据结构为
const initConfig = {
  content: {
    text: '文字',
    type: 'interface'，
    dataSource: {
      id: "60d1c419a7d94b0e6d33521b"
      source: { // 接口配置数据
        type: 0, // 数据类型
        interfaceConfig: { // 数据类型对应的数据配置，向服务器调取数据的参数
          deviceId: 4533,
          fieldIdList: [533],
          productId: 179,
          serveId: 354,
          timeInterval: 6,
          timeType: 2,
          url: "/analy/deviceHistory/getHistoricalData"
        },
        isFilter: false, // 是否开启过滤脚本
        filterCode: 'return data', // 过滤脚本代码
        isTimingRefresh: true, // 是否开启定时刷新
        timingInterval: 5, // 定时刷新时间间隔
        xField: "time" // x 展示项
        yField: ["voltage"] // 展示项
      }
    }
  }
}

// 由数据源统一请求服务的方法
VPageDesign.handleComDataValue(dataSource).then(value => {
  // 拦截组件数据类型
})

自定义数据源中的数据类型

import DataSourceDeviceItem from './views/data-source-device'

VPageDesign.setConfig({
  types: [{
    key: 0, // key 不可为 1
    label: '设备',
    component: DataSourceDeviceItem
  }]
})

// 在 DataSourceDeviceItem 组件内接收接口配置数据
props: {
  interfaceConfig: { // 传递的数据格式为：initConfig.dataSource.source.interfaceConfig
    type: Object,
    default: () => {
      return {}
    }
  },
  comType: {
    type: String,
    default: 'text'
  }
}

// 在 DataSourceDeviceItem 组件内更新接口配置数据
this.$emit('updateFormData', interfaceConfig)