layout 自定义布局

一、类型：数字对应的类型

1、type:

• 1、标签： className：kd-label、 afterSlot：label、 innerSlot：kdLabel
• 2、计数器： className：kd-count、 afterSlot：count、 innerSlot：kdCount
• 3、曲线图： className：kd-curve、 afterSlot：curve、 innerSlot：kdCurve
• 4、折线图： className：kd-line、 afterSlot：line、 innerSlot：kdLine
• 5、柱状图： className：kd-bar、 afterSlot：bar、 innerSlot：kdBar
• 6、饼状图： className：kd-pie、 afterSlot：pie、 innerSlot：kdPie
• 7、表格： className：kd-table、 afterSlot：table、 innerSlot：kdTable
• 8、图片： className：kd-image、 afterSlot：image、 innerSlot：kdImage
• 9、视频流： className：kd-video、 afterSlot：video、 innerSlot：kdVideo
• 10、地图： className：kd-map、 afterSlot：map、 innerSlot：kdMap、

二、属性对照表

1、固定属性

• id: 1, number 容器唯一标识，最终绑定在元素上的 data-id 属性，便于获取元素实例
• layout: [10, 10], array 容器共分几行几列
• bgStyle: "color", string 容器背景样式 color 是背景色 png 是背景图
• bgVal: 'white', string 容器颜色或 url 背景图
• router: "router", string 容器路由跳转（总容器暂时不能进行跳转，后续待开发）
• style: { object 容器自定义样式 color: "red", "font-size": "16px", }
• components:[] array 子容器
• tittle string 标题，支持 html 解析
• url string 请求地址
• fre string 刷新时间，setInterval 的延迟时间
• fontColor:rgba string 字体颜色（仅图表）
• axisColor:rgba string 轴颜色（仅图表）
• lineColor:rgba string 线颜色（仅图表）
• tableColor:rgba string 表格颜色（仅表格）
• frameColor:rgba(0) string 表格边框颜色（仅表格）
• mapParam:{} object 地图参数（仅地图）
• sign: objecy 地图上的图标 事件 时间 内容（仅地图） {icon:url,val:data,fre:time,event:event}

2、动态属性

根据元素类型动态添加的属性

• request 请求函数
• options 补充参数，配置选项

三、示例

{
    id: 2,
    type: 1,
    pos: [3, 3],
    style: {
        color: "red",
        "font-size": "16px",
    },
    fre: "3s",
    title: `内容<h1>写标签也可以解析<span style='font-size:20px;'>还可以加样式</span></h1>`,
    request: ()=>{}
    options: {}
}

四、使用方法

1、安装依赖

// kd-layout：
npm i kd-layout -S
// element-plus：
npm i element-plus -S
// axios：
npm i axios -S
// echarts：
npm i echarts -S
// videojs：
npm i video.js -S
// baidu-map：
npm i vue-baidu-map -S

2、使用说明

import kdLayout from "kd-layout";
import Element from "element-plus";
import "element-plus/dist/index.css";
import BaiduMap from "vue-baidu-map";
import Video from "video.js";
import "video.js/dist/video-js.css";
app.use(Element).use(kdLayout).use(Video).use(BaiduMap, { ak: "" });

import * as echarts from "echarts";
provide("ec", echarts);
const echarts = inject("ec");