data-screen-backbone v0.1.7

data-screen-backbone

data-screen-backbone，组件库基于 Vue，主要用于快速构建数据大屏展示页面即数据可视化，提升开发效率。

安装

npm install --save data-screen-backbone

引入

import Vue from "vue";

import dataScreenBackbone from "data-screen-backbone";
import "data-screen-backbone/lib/data-screen-backbone.css";

// 自封装的axios 非必选
import request from "@/network/request.js";

Vue.use(dataScreenBackbone, {
  // 是否输出错误信息，默认false
  log: false,
  // 不配置该参数（http），则使用内置axios
  http: httpConfig => {
    return new Promise(resolve => {
      request(httpConfig)
        .then(res => {
          if (res.code === 200) {
            return resolve(res.data);
          }
          return resolve([]);
        })
        .catch(err => {
          return resolve([]);
        });
    });
  },
});

使用 dataScreenBackbone

<dataScreenBackbone
  :DV_ELEMENT_LIST="DV_ELEMENT_LIST"
  :NETWORK_LIST="NETWORK_LIST"
></dataScreenBackbone>

参数解析

元素列表

DV_ELEMENT_LIST = [
    {
        // id
        id: "",
        // 组件
        component: () => import(""),
        // 入场动画（可以不要） topStroke,leftStroke,bottomStroke,rightStroke
        entryAnimation: "topStroke",
        // 默认是否展示
        show: true,
        // 样式
        style: {
            // 位置
            position: [0, 0],
            // 尺寸
            size: [8 * WIDTH_UNIT, 1.5 * HEIGHT_UNIT - BORDER_SPACE],
            // 层级
            zIndex: 100,
        },
    },
],

数据中心列表

NETWORK_LIST = [
    {
        // http 请求数据 ， static 静态数据
        // 选用哪种方式保留下面哪个部分的单独配置
        type: "http",
        // 绑定元素id
        bindElIds: [],

        // http 部分 start s
        // http 请求间隔时间， 0或者不写该字段不会轮询改http请求
        interval: 0,
        // http请求列表
        httpList: [
            {
                // 请求方式 get,post,……
                method: "get",
                // 请求路径
                url: "",
                // 请求头
                headers: {},
                // 请求参数 url参数
                params: {},
                // 请求参数 body参数
                data: {},
            },
        ],
        // http 部分 end

        // 静态数据 部分 start
        // 静态数据
        staticData: [],
        // 静态数据 部分 end
    },
],

内置 bus 总线

// 可拓展bus
this.$dataScreenBackbone.bus.main.$emit("eventName", {});
this.$dataScreenBackbone.bus.main.$on("eventName", arg => {});
this.$dataScreenBackbone.bus.main.$off("eventName");

// 分发数据
this.$dataScreenBackbone.bus.dataCenter.$emit("distributeData", {
  // 分发数据的元素id集合
  elIds: [],
  // 分发的数据
  data: {},
});
// 分发loading状态
this.$dataScreenBackbone.bus.dataCenter.$emit("distributeLoading", {
  // 分发loading状态的元素id集合
  elIds: [],
  // 分发的loading状态 true,false
  loading: false,
});

// 根据元素id刷新数据
this.$dataScreenBackbone.bus.dataCenter.$emit("refreshDataByElId", "elId");

// 根据元素id更改请求参数
this.$dataScreenBackbone.bus.dataCenter.$emit("changeHttpReqConfigByElId", {
  // 元素id
  elId: "",
  // http请求在数据中的下标
  httpIndex: "",
  // 需要更改的参数
  reqConfig: {},
});

// 根据元素id切换元素显示
this.$dataScreenBackbone.bus.DVelement.$emit("toggleByElId", "elId");
// 根据元素id显示元素
this.$dataScreenBackbone.bus.DVelement.$emit("hideByElId", "elId");
// 根据元素id隐藏元素
this.$dataScreenBackbone.bus.DVelement.$emit("showByElId", "elId");

自定义模块获取数据

通过getData_dataScreenBackbone方法获取到数据进行处理。如：

export default {
  methods: {
    // 设置数据的函数
    getData_dataScreenBackbone(data) {
      console.log(data);
    },
  },
};