7.2 组件开发规范

要开发一个组件，需按照一定规范。一个组件应至少包含三个文件，分别是card.json（元数据文件）、Card.vue（页面文件）、Config.vue（配置面板文件），以曲线图为例。

文件概览

卡片的目录结构如图所示

  shell
├── cards                  // 固定目录
    └── cardName              // 卡片名称
        └── panel                 // 卡片自定义配置面板
            ├── Config.vue            // 卡片配置内容
            ├── index.js              // 卡片配置入口
        ├── static                    // 卡片静态资源
        ├── card.json             // 卡片元数据文件
        ├── Card.vue              // 卡片vue代码
        ├── index.js              // 卡片入口
        ├── README.md             // 卡片介绍文档
├── manifest.json          // 资源包元数据文件
└── README.md              // 资源包内容介绍文件

manifest.json规范

属性	类型	必填	描述
name	string	是	唯一标识，要求全小写，卡片打包时会拼接name字段
package	object	是	资源包定义，对于卡片来说是 package.cards: []，参看如下样例
type	string	是	资源类型，卡片/组件/主题等前端相关资源，都为 uiPackage

• 样例

// manifest.json
{
  "name": "WeMax-card",
  "type": "uiPackage",
  "package": {
    "cards": [
      "cards/cardName/card.json"
    ]
  }
}

index.js规范

输出入口文件为Card.vue。

import Card from './Card.vue'
export default Card

card.json规范

属性	类型	必填	描述
name	string	是	卡片名称，在资源包内唯一，必须使用英文，数字和连字符。
code	string	是	卡片编码，要求全局唯一，{卡片name}
title	string	是	卡片标题
version	string	是	卡片版本号
main	string	是	卡片运行代码路径
initProps	object	是	卡片初始化时加载参数
dnd	object	是	卡片默认大小配置
description	string	否	卡片功能描述
keywords	string[]	否	卡片资源标签，可以设置多个
customPanel	string	否	卡片自定义面板路径
apis	object	否	卡片数据接入配置
cardEvents	object	否	卡片交互配置
alarmMsgConfig	object	否	卡片消息预警配置

• 卡片元数据规范示例

{
  "code": "wemax.template.curve.double",
  "name": "wemax.template.curve.double",
  "title": "曲线图",
  "description": "曲线图",
  "version": "1.0.0",
  "type": "create:card",
  "category": "图表",
  "keywords": ["wemax"],
  "main": "index.js",
  "customPanel": "./panel/index.js",
  "icon": {
    "default": "./static/default.svg",
    "preview": "./static/preview.svg"
  },
  "initProps": {
    "options": {
      "alarmMsgConfig": {                        // 消息预警配置, 不必填
        "conditionConfig": false,                   // 消息预警开关
        "messageList": [                            // 消息预警列表，最多可配置5条
          {
            "conditionCode": "item.y1 > 500",          // 消息预警条件
            "messageTitle": "消息标题",                 // 消息推送标题
            "messageContent": "消息内容"                // 消息推动内容
          }
        ]
      },
      // weMax平台提供的公共插件 @aurora/wemax-card-plugin 已提供国际化卡片I18nInput，可以直接引入使用，i18n配置如下:
      "i18n": {                                  // 国际化配置,不必填
        "messages": {
          "zh_CN": {
            "cardTitle": "曲线图",
            "rightTitle": ""
          },
          "en_US": {
            "cardTitle": "Line Chart",
            "rightTitle": ""
          }
        }
      },
      "cardEvents": [                            //卡片交互配置,不必填,可配置多条
        {
          "name": "图表点击",                        // 交互事件名称
          "id": "event-one",                        // 交互事件id, 同一卡片内唯一
          "variable": [                             // 交互事件参数列表, 自定义字段名称/类型
            {
              "field": "x",                            // 交互事件参数字段, 自定义
              "type": "string"                         // 交互事件参数类型, 自定义
            },
            {
              "field": "y",
              "type": "number"
            }
          ]
        }
      ],
      "apis": [                                  // 卡片数据接入配置,不必填,可配置多条
        {
          "id": "curve-data",                        // 数据接入id, 同一卡片内唯一
          "name": "曲线图数据服务",                   // 数据接入名称
          "title": "曲线图数据服务",                  // 数据接入名称
          "refreshSwitch": false,                    // 定时调度开关
          "refreshTime": 60,                         // 定时调度时间
          "variables": {},                           // 全局变量
          "showAggregation": false,                  // 是否展示聚合开关(用于数据模型方式接入)
          "defaultAggregation": true,                // 聚合开关(用于数据模型方式接入)
          "type": "static",                          // 数据接入类型
          "params": [],                              // 数据获取时查询参数
          "supportTypes": ["static", "api"],         // 默认支持的数据接入类型
          "allowedEditFieldMapList": true,           // 是否能手动添加映射字段, 主要用坐标系新增系列.
          "fields": [                                // 卡片数据字段映射 -- 用于转换真实数据字段关联当前卡片代码中使用字段
            {
              "id": "f-zero",                           // 字段定义唯一标识
              "field": "x",                             // 默认字段名
              "mapField": "",                           // 数据映射字段名, 如未选择默认取field字段
              "desc": "类目",                           // 字段分类描述 类目/数值
              "type": "string",                         // 字段类型 string number
              "optional": false,                        // 可选/必选, 默认false
              "category": "dimension"                   // 维度dimension/度量measure 用于数据模型接入时, 拖入字段类型识别
            },
            {
              "id": "f-one",
              "field": "y1",
              "mapField": "",
              "desc": "数值",
              "type": "number",
              "category": "measure"
            },
            {
              "id": "f-two",
              "field": "y2",
              "mapField": "",
              "desc": "数值",
              "type": "number",
              "optional": true,
              "category": "measure"
            }
          ],
          "source": [                                // 卡片卡片初始化静态数据, 自定义
            {
              "x": "01",
              "y1": 10,
              "y2": 29
            },
            {
              "x": "02",
              "y1": 25,
              "y2": 35
            },
            {
              "x": "03",
              "y1": 20,
              "y2": 60
            },
            {
              "x": "04",
              "y1": 48,
              "y2": 36
            },
            {
              "x": "05",
              "y1": 30,
              "y2": 45
            }
          ]
        }
      ]
    }
  },
  "dnd": {                                       // 卡片拖入容器**初始化时默认大小**
    "height": 30,                                   // 宽度
    "width": 24,                                    // 高度
    "componentScale": false                         // false取定义宽高值. 数值按照容器百分比缩放, 参照以下字段详细说明
                                                    //  componentScale字段的使用方法
                                                    // - 不存在componentScale属性: 宽高为当前容器宽高，width/height属性无效。
                                                    // - componentScale存在且为false: 拖入容器初始化时默认宽高为dnd对象的 width/height设定值，单位px。
                                                    // - componentScale存在且为数值: 拖入容器初始化时按照容器的宽高进行数值百分比缩放。
  }
}

Card.vue规范

• 卡片内容入口文件，按照实际情况开发。
• 公共插件（@aurora/wemax-card-plugin）提供公共的数据获取，主题订阅，echarts图表渲染，卡片之间交互等方法，以下案例仅供参考

<template>
  <div class="wemax-card-container">
    <div class="inner">
      <CardTitle :options="options" />
      <div
        ref="chartRef"
        class="weMax-container"
      ></div>
    </div>
  </div>
</template>
<script>
import config from './card.json'   // 引入card.json
import {
  ApiMixin,
  EventMixin,
  RenderChart,
  BuildSeriesData } from '@aurora/wemax-card-plugin'  // 引入公共插件
import _ from 'lodash'
import CardTitle from '@/components/CardTitle'
export default {
  components: {
    CardTitle
  },
  mixins: [ApiMixin, EventMixin, RenderChart, BuildSeriesData], // 使用插件内混合方法
  props: {
    options: {              // 固定使用方式
      type: Object,
      default: () => config.initProps.options
    }
  },
  computed: {
    apis() {                // 卡片数据配置
      return this.options.apis
    }
  },
  watch: {
    'options.options': {    // 卡片配置项监听-配置项修改时调用图表setOption方法
      handler(value) {
        this.setChartOption()
      },
      deep: true
    },
    apis: {                 // 卡片数据监听, 包含定时调度设置
      deep: true,
      immediate: true,
      handler(value) {
        if (value) {
          this.getChartData()
          const { refreshSwitch, refreshTime } = value[0]
          this.isRefresh(this.getChartData, refreshSwitch, refreshTime)
        }
      }
    }
  },
  created() {
    // 图表卡片修改属性时 添加防抖. 降低图表刷新频率
    this.setChartOption = _.debounce(this.setChartOption, 300)
  },
  mounted() {
    // 图表初始化 -- 插件RenderChart混入方法
    this.initChart(
      this.$refs.chartRef,
      this.echartTheme,
      this.options.showsvg,
      this.addChartClickEvent)
    // 订阅主题 以及全局变量
    this.subscribe('changeTheme')
    this.subscribe('variablesSubscribption')
  },
  beforeDestroy() {
    // 图表销毁
    this.destoryEchart(this.$refs.chartRef)
  },
  methods: {
    /**
     * @description 图表点击交互 -- 详细内容参考卡片交互配置
     */
    addChartClickEvent() {
      this.echartInstance.on('click', 'series', params => {
        const cardEvent = this.options.cardEvents[0]
        const publishParam = {
          i: this.options.i || '',     // 卡片唯一标识i
          id: cardEvent.id,            // 交互唯一标识id
          param: {                     // 交互参数
            [cardEvent.variable[0].field]: params['name'],
            [cardEvent.variable[1].field]: params['value']
          }
        }
        this.$service.message.publish({        // 发送message消息
          topic: 'cardEventDistribution',      // message消息名称 -- 固定值, 不可修改
          data: publishParam                   // 消息参数，按照实际情况修改
        })
      })
    },
    // 图表配置渲染  setOption为插件内RenderChart混入方法。 支持4个参数，具体可看插件内容解析
    setChartOption() {
      const newOptions = JSON.parse(JSON.stringify(this.options.options))
      this.setOption(
        newOptions,
        true,
        () => {
          newOptions.animationDelay = index => {
            return index * newOptions.animationDelayNum
          }
          this.dataFormatter(newOptions)
        },
        newOptions.isClearEchartInstance
      )
    },

    /**
     * @description 订阅消息
     * @param {String} topic 消息topic
     */
    subscribe(topic) {
      this.subscribeMessageFun(topic, data => {
        if (topic === 'changeTheme') {   // 订阅wemax默认echarts主题。changeTheme名称为固定值，修改无效
          this.echartTheme = data.echartsTheme
          this.initChart(this.$refs.chartRef, this.echartTheme, this.options.showsvg, this.addChartClickEvent)
          this.setChartOption()
        }
        // 订阅全局变量。variablesSubscribption名称为固定值，修改无效 -- 卡片间交互接受变量参数 handlerSubscribeMsg方法会自动更新卡片内数据，无需修改
        if (topic === 'variablesSubscribption') {
          this.handlerSubscribeMsg(data, this.options.apis)
        }
      })
    },

    // 获取图表数据 > getData即为ApiMixin中提供的公共方法 -- 详细内容查看公共插件内容
    getChartData() {
      this.getData(this.apis, data => {
        const type = Object.prototype.toString.call(data).slice(8, -1)
        if (type !== 'String' && type !== 'Error') {
          this.setSeriesData(data)
          return
        }
        this.setSeriesData([])
      })
    }
  }
}
</script>
<style lang="less" scoped>
.wemax-card-container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  .inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .weMax-container {
      flex: 1;
    }
  }
}
</style>

卡片交互配置

WeMax平台提供了卡片与卡片之间的交互功能，按照以下规范开发(主要分为3个部分)，即可使用平台的卡片交互配置。

注意: 如卡片只需要使用图形交互，而不需要传递变量参数，将以下variable置空[], 发送交互时param设为{}即可。

1. 在card.json中配置交互事件
2. 在Card.vue中通过message消息发布，传递参数
3. 在Card.vue中订阅message事件，刷新数据

// 1.在card.json中配置交互事件
"initProps": {
  "options": {
    "cardEvents": [         // 卡片交互配置
      {
        "name": "图表点击",     // 交互事件名称
        "id": "event-one",     // 交互事件id, 同一卡片内唯一
        "variable": [          // 交互事件参数列表, 自定义字段名称/类型
          {
            "field": "x",         // 交互事件参数字段, 自定义
            "type": "string"      // 交互事件参数类型, 自定义
          },
          {
            "field": "y",
            "type": "number"
          }
        ]
      }
    ]
  }
}

// 2.在Card.vue中配置交互事件
this.echartInstance.on('click', 'series', params => { // params为卡片触发交互时的回调参数
  const cardEvent = this.options.cardEvents[0]
  const publishParam = {
    i: this.options.i || '',     // 卡片唯一标识i -- 固定值, 不可修改
    id: cardEvent.id,            // 交互唯一标识id
    param: {                     // 交互参数
      [cardEvent.variable[0].field]: params['xxx'],
      [cardEvent.variable[1].field]: params['yyy']
    }
  }
  this.$service.message.publish({        // 发送message消息
    topic: 'cardEventDistribution',      // cardEventDistribution消息名称 -- 固定值, 不可修改
    data: publishParam                   // 交互参数，按照实际情况修改
  })
})

// 3.在Card.vue中订阅message事件，刷新数据
  // subscribeMessageFun 和 handlerSubscribeMsg 均为EventMixin 混合内方法, 使用时需提前从公共插件引入
this.subscribeMessageFun(topic, data => {
  if (topic === 'variablesSubscribption') { // 订阅全局变量。variablesSubscribption名称为固定值，修改无效
    this.handlerSubscribeMsg(data, this.options.apis)
  }
})

定时调度

• WeMax公共插件(@aurora/wemax-card-plugin) 提供定时调度公共方法, 使用getData 或者getDataById方法获取卡片数据时可使用

// 1. 在apis的每个api中设定定时调度属性 refreshSwitch refreshTime
"initProps": {
  "options": {
    "apis": [
      {
      "id": "curve-data",
      "name": "曲线图数据服务",
      "title": "曲线图数据服务",
      "refreshSwitch": false,  // 定时调度开关
      "refreshTime": 60,       // 定时调度时间
      ...
      }
    ]
  }
}

// 1. 在Card.vue中引入公共插件
import { ApiMixin } from '@aurora/wemax-card-plugin'  // 引入公共插件
// 使用isRefresh方法，可根据实际情况修改
watch: {
  apis: {  // 卡片数据监听
    deep: true,
    immediate: true,
    handler(value) {
      if (value) {
        this.getChartData() // 获取卡片数据方法
        const { refreshSwitch, refreshTime } = value[0] // 获取定时刷新开关/时间
        this.isRefresh(this.getChartData, refreshSwitch, refreshTime) // 调用定时调度方法 -- 详细参数内容参考如下定时调度方法
      }
    }
  }
},

// 插件内定时调度方法
/**
 * @description 定时调度 刷新数据获取
 * @param {Function} callback 回调函数
 * @param {Boolean} refreshSwitch 开关
 * @param {Number} updateTime 时间
 * @param {Number|String} key 多个数据服务调度 指定key 0 1 2 3 4...
 */
isRefresh(callback = null, refreshSwitch = false, updateTime = 60, key = 0) {
  this.destroyGetDataTimer(key)
  const condition = this.refreshSwitch && this.updateTime || refreshSwitch && updateTime
  if (condition && callback && typeof callback === 'function') {
    const time = this.refreshSwitch ? this.updateTime : updateTime
    this.getDataTimer[key] = setInterval(() => {
      callback()
    }, time * 1000)
    this.$once('hook:beforeDestroy', () => {
      this.destroyGetDataTimer(key)
    })
  }
}

消息预警

• WeMax平台提供预警消息推送能力，可在卡片内设定条件，当数据满足条件时自动推送welink消息通知。

// 1. 在card.json中 定义预警配置项
  "initProps": {
    "options": {
      "alarmMsgConfig": {                        // 消息预警
        "conditionConfig": false,                   // 消息预警开关
        "messageList": [                            // 消息预警列表，最多可配置5条
          {
            "conditionCode": "item.y1 > 500",          // 消息预警条件，可根据实际情况修改，在WeMax平台屏幕设计时也可以修改。
            "messageTitle": "消息标题",                 // 消息推送标题
            "messageContent": "消息内容"                // 消息推动内容
          }
          ... // 最多可配置5条
        ]
      },

// 1. 在Card.vue中引入公共插件
import { ApiMixin } from '@aurora/wemax-card-plugin'  // 引入公共插件
mixins: [ApiMixin],
// 使用getAlarmStatus方法，可根据实际情况修改
/**
 * @description: 获取卡片数据
 */
getListData() {
  this.getData(this.apis, data => { // getData为插件内获取数据方法
    const type = Object.prototype.toString.call(data).slice(8, -1)
    if (type !== 'String' && type !== 'Error') {
      this.listData = data
      this.getAlarmStatus(data, conditionCode => { // 调用getAlarmStatus预警方法 以下字符串会转换成代码执行 -- 详细内容查看以下getStringValue方法
        return `return data.some(item => { return ${conditionCode} })`
      })
      return
    }
    this.listData = []
  })
}

// 插件内预警推送公共方法，接收2个参数 data callback
/**
 * @description 判断预警条件
 * @param {Any} data 数据
 * @param {callback} callback 回调函数，处理单个条件
 */
getAlarmStatus(data, callback) {
  if (!Object.prototype.hasOwnProperty.call(this.options, 'alarmMsgConfig')) {
    return false
  }
  const { conditionConfig = false, messageList = [] } = this.options.alarmMsgConfig
  if (!conditionConfig) {
    return false
  }
  messageList && messageList.forEach(el => {
    const code = callback(el.conditionCode)
    getStringValue(code, data, res => {
      if (res.run && res.data === true) {
        const param = {
          msgTitle: el.messageTitle,
          msgContent: el.messageContent
        }
        this.$service.message.publish({
          topic: 'cardAlarmEventMsg',
          data: param
        })
      }
    })
  })
}

Config.vue规范

• 卡片配置入口文件，按照实际情况开发。配置项需要首先在card.json > customPanel中定义入口文件，并在card.json > initProps > options中定义属性字段
• 在面板配置文件中暴露配置属性，并允许配置属性值。以下案例引入的公共配置卡片（标题、图表、系列、坐标轴、图例均为自定义开发的配置卡片）。

<template>
  <aui-tabs v-model="activeNames">
    <aui-tab-item title="标题" name="1" >
      <TitleConfig :options="options"></TitleConfig>
    </aui-tab-item>
    <aui-tab-item title="图表" name="2" >
      <ChartPanel :options="options"></ChartPanel>
    </aui-tab-item>
    <aui-tab-item title="系列" name="3" >
      <SeriesConfig
        :data="options.options.series"
        :options="options"
      ></SeriesConfig>
    </aui-tab-item>
    <aui-tab-item title="坐标轴" name="4" >
      <AxisConfig :options="options"></AxisConfig>
    </aui-tab-item>
    <aui-tab-item title="图例" name="5" >
      <LegendConfig :data="options.options.legend"></LegendConfig>
    </aui-tab-item>
  </aui-tabs>
</template>
<script>
import config from '../card.json'  // 最外层配置vue文件引入，通过props向下传递
import { Tabs, TabItem } from '@aurora/vue'
import { TitleConfig } from '@aurora/wemax-card-plugin'
import ChartPanel from '@/components/echarts/ChartPanel.vue'
import LegendConfig from '@/components/echarts/LegendConfig'
import SeriesConfig from '@/components/echarts/series/SeriesConfig'
import AxisConfig from '@/components/echarts/axis/AxisConfig'
export default {
  components: {
    AuiTabs: Tabs,
    AuiTabItem: TabItem,
    AxisConfig,
    TitleConfig,
    SeriesConfig,
    ChartPanel,
    LegendConfig
  },
  props: {
    options: {
      type: Object,
      default: () => config.initProps.options
    }
  },
  data() {
    return {
      activeNames: '1'
    }
  }
}
</script>

Config配置参考

卡片配置属性的开发，可以根据实际的需要，在panel文件中Config.vue中进行面板开发，这里以曲线卡片面板为例。

其中标题可称之为基础属性，大部分卡片都可基于规范进行开发。

而图表、系列、坐标轴则是基于当前卡片所展示内容拓展出的属性配置，称之为拓展属性。

基础属性

基础属性存在于大部分卡片当中，公共插件已做封装，只要引入卡片，配置对应卡片所需数据格式，即可展示。

<template>
  <aui-tabs v-model="activeNames">
    <aui-tab-item title="标题" name="1">
      <TitleConfig :options="options"></TitleConfig>
    </aui-tab-item>
  </aui-tabs>
</template>
<script>
import { TitleConfig } from '@aurora/wemax-card-plugin'
export default {
  components: {
    TitleConfig
  }
}
</script>

card.json配置

"initProps": {
  "options": {
    "cardTitle": {
      "isShow": true,
      "contentConfig": true,
      "textContent": "cardTitle",
      "color": "transparent",
      "themeColor": "var(--wemax-base-color-info-normal, #fff)",
      "fontSize": 16,
      "scale": true,
      "fontWeight": 400
    },
    "rightTitle": {
      "isShow": false,
      "contentConfig": true,
      "textContent": "rightTitle",
      "color": "transparent",
      "themeColor": "var(--wemax-base-color-gray-normal, #999)",
      "fontSize": 14,
      "scale": true,
      "fontWeight": 400
    }
  }
}

拓展属性

拓展属性有图表、系列、坐标轴、图例

• 图表的拓展配置均可从echarts官网中获取参数具体信息，参数初始配置可在card.json中initprops=> options=> options。工程内已提供公共卡片。可参考使用
• 业务可以根据自己实际需要来拓展，如下图：

公共插件

• 公共插件@aurora/wemax-card-plugin 为WaMax平台提供，包含公共方法和公共卡片，已发布云龙以及伏羲npm仓库，可在卡片开发时install引入使用。

方法名称	描述	使用方式
getData	获取数据源数据 ，暂时不支持多个数据源	ApiMixin混合
getDataByID	根据数据id获取对应的数据服务数据,支持统一卡片内多个数据源	ApiMixin混合
buildSeriesData	getData数据转换处理, 可以根据实际情况进行复写	ApiMixin混合
buildRemodelData	getDataById数据转换处理, 可以根据实际情况进行复写	ApiMixin混合
getFieldMap	获取映射字段对象	ApiMixin混合
subscribeMessageFun	订阅消息，使用此方法订阅的消息，卡片销毁时自动取消订阅	EventMixin混合
unsubscribeMessageFun	取消订阅消息	EventMixin混合
handlerSubscribeMsg	处理接收到的交互全局变量消息，更新api数据	EventMixin混合
$xss	XSS攻击输出控制	方法, 引入直接使用
getUuid	生成uuid	方法, 引入直接使用
ColorPicker	取色器组件	公共组件
I18nInput	国际化输入组件	公共组件
TextConfig	文字配置组件	公共组件
RenderChart	echarts图表init、setOption、resize、dispose方法	RenderChart混合

公共方法

• getData 获取服务数据

getData方法内部会进行getFieldMap 获取映射字段对象的处理，buildSeriesData进行服务数据字段映射，若获取到的data数据不能满足当前数据格式的要求，需要在卡片中对buildSeriesData进行复写。

getCardData() {
  /**
   * 获取服务数据
   * @param {*} apis 卡片apis配置
   * @param {*} callBack 回调函数
   */
  const { apis } = this.options
  this.getData(apis, data => {
    const type = Object.prototype.toString.call(data).slice(8, -1)
    if (type !== 'String' && type !== 'Error') {
      // 获取数据后操作
      window.console.log(data)
    }
  })
}

• getDataByID(key, param) 获取服务数据

与getData方法类似，只是getDataByID用来处理卡片中存在多条数据服务，而getData只处理单条数据服务，内部会依然进行getFieldMap 获取映射字段对象的处理，但会调用buildRemodelData进行服务数据字段映射，若获取到的data数据不能满足当前数据格式的要求，需要在卡片中对buildRemodelData进行复写。

/**
 * 通过数据id获取对应的数据服务数据
 * @param {String} id card.json中定义的apis数据服务ID
 * @returns {*} promise
 */
getCardDataList() {
  this.getDataByID('bar-data-id').then(data => {
      // 获取数据后操作
      window.console.log(data)
    })
  }

• buildSeriesData 服务数据获取后，字段映射转换

/**
 * 构建卡片数据, 可以根据实际情况进行覆盖此方法
 * @param {*} data 实际服务返回的数据
 * @param {*} fields initprops内的options中定义的apis中的fields字段的值
 */
buildSeriesData(data, fields) {
  if (Array.isArray(data)) {
    const fieldsObj = this.getFieldMap(fields)
    return data.map(item => {
      const newItem = {}
      Object.keys(fieldsObj).forEach(key => {
        const realKey = fieldsObj[key]
        if (Object.prototype.hasOwnProperty.call(item, realKey)) {
          newItem[key] = item[realKey]
        }
      })
      return newItem
    })
  }
  return []
}

• buildRemodelData 服务数据获取后，字段映射转换，用法同buildSeriesData一致，区别:在getDataByID里进行数据转换。

使用案例：

/**
 * @description 构建UI渲染所需格式的数据
 * @param {Array} data 原始数据
 * @param {Object} fields 数据源中的fields字段的值
 */
buildRemodelData(data, fields) {
  if (Array.isArray(data)) {
    const fieldsObj = this.getFieldMap(fields)
    return data.map(item => {
      const newItem = {}
      Object.keys(fieldsObj).forEach(key => {
        const realKey = fieldsObj[key]
        newItem[key] = item[realKey]
      })
      return newItem
    })
  }
  return []
}

• getFieldMap 卡片数据字段映射

/**
 * 获取映射字段对象
 * @param {*} fields initprops内的options中定义的apis中的fields字段的值
 */
getFieldMap(fields, data) {
  let fieldMap = {}
  const dynamicSeries = this.options.options && this.options.options.dynamicSeries
  // 如果是动态系列， 则取响应数据的各个字段
  if (dynamicSeries && data) {
    fieldMap = this._handleFieldByData(fields, data[0])
  } else {
    fields.forEach((item) => {
      fieldMap[item.field] = item.mapField || item.field
    })
  }
  return fieldMap
}

• $xss XSS攻击输出控制

参数名称	描述
param	需要进行xss攻击输出控制的值

import { $xss } from '@aurora/wemax-card-plugin'
 $xss.process(value)

• uuid

开发过程中，有时候需要js生成全局唯一的标识，在不同的场景使用，插件中也有提供。 获取uuid，不重复唯一值

import { getUuid } from '@aurora/wemax-card-plugin'
 getUuid()

公共组件

公共插件中不仅提供了公共方法，也提供了一些必要的卡片已方便开发更便捷的实现自己的功能

1. 颜色选择

<template>
  <color-picker
    v-model="options.color"
    :color="options.color"
  ></color-picker>
</template>
<script>
import { ColorPicker } from '@aurora/wemax-card-plugin'
export default {
  components: {
    ColorPicker
  }
}
</script>

card.json配置

"initProps": {
  "options": {
    "color": "#FFFFFF"
  }
}

展示效果

2. 国际化输入

<template>
  <I18n-input
    v-model="textConfigObj.textContent"
    :i18n="options.i18n">
  </I18n-input>
</template>
<script>
import { I18nInput } from '@aurora/wemax-card-plugin'
export default {
  components: {
    I18nInput
  }
}
</script>

card.json配置

"initProps": {
    "options": {
      "i18n": {
        "messages": {
          "zh_CN": {
            "cardTitle": "曲线图"
          },
          "en_US": {
            "cardTitle": "Line Chart"
          }
        }
      },
      "textConfigObj": {
        "textContent": "cardTitle"
      }
    }
  }

展示效果

3. 文字配置

<template>
  <text-config
    :options="options"
    textType="myStr">
  </text-config>
</template>
<script>
import { TextConfig } from '@aurora/wemax-card-plugin'
export default {
  components: {
    TextConfig
  }
}
</script>

card.json配置

"initProps": {
    "options": {
      "textType": "myStr",
      "myStr": {
        "contentConfig": true,
        "textContent": "myStr",
        "color": "transparent",
        "themeColor": "var(--wemax-base-color-info-normal, #fff)",
        "fontSize": 16,
        "scale": true,
        "fontWeight": 400
      }
    }
  }

展示效果