DWF用户手册（20210209版本）
页面树结构
转至元数据结尾
转至元数据起始

使用说明：数据大屏使用文档.pdf

上传插件包:

bladex0508.zip

在APP端应用详情处配置：



增加11种数据转换示例，其中7个数据转换函数，4个非函数示例

/**
 * @author LiuBo
 * @method
 * @name BARDATAFORMATTER
 * @description 柱状图数据转换方法
 * @param {Array} res接口返回的的response.data
 * @param {Object} options图表配置
 * @return {Array} 柱状图合法数据
 *
 * @example
 * (res) => {
       let options = {
            xAxis: '',
            yAxis: [
                {
                    name: '',
                    legend: ''
                },
                {
                    name: '',
                    legend: ''
                },
            ]
       }
       return BARDATAFORMATTER(res.data, options)
   }
 */

/**
 * @author LiuBo
 * @method
 * @name LINEDATAFORMATTER
 * @description 折线图数据转换方法
 * @param {Array} res接口返回的的response.data
 * @param {Object} options图表配置
 * @return {Array} 折线图合法数据
 *
 * @example
 * (res) => {
       let options = {
            xAxis: '',
            yAxis: [
                {
                    name: '',
                },
                {
                    name: '',
                },
            ]
       }
       return LINEDATAFORMATTER(res.data, options)
   }
 */

/**
 * @author LiuBo
 * @method
 * @name PIEDATAFORMATTER
 * @description 饼图数据转换方法
 * @param {Array} res接口返回的的response.data
 * @param {Object} options图表配置
 * @return {Array} 饼图合法数据
 *
 * @example
 * (res) => {
       let options = {
            xAxis: '',
            yAxis: ''
       }
       return PIEDATAFORMATTER(res.data, options)
   }
 */

/**
 * @author LiuBo
 * @method
 * @name PICTORIALBARDATAFORMATTER
 * @description 象形图数据转换方法
 * @param {Array} res接口返回的的response.data
 * @param {Object} options图表配置
 * @return {Array} 象形图合法数据
 *
 * @example
 * (res) => {
       let options = {
            xAxis: '',
            yAxis: ''
       }
       return PICTORIALBARDATAFORMATTER(res.data, options)
   }
 */

/**
 * @author LiuBo
 * @method
 * @name RADARDATAFORMATTER
 * @description 雷达图数据转换方法
 * @param {Array} res接口返回的的response.data
 * @param {Object} options图表配置
 * @return {Object} 雷达图合法数据
 *
 * @example
 * (res) => {
       let options = {
            indicator: [
                {
                    name: '',//真实值对应属性
                    max: ,//真实值对应最大值
                    displayName: ''//真实值对应名称
                },
            ],
            legend: []//每个图例
        }
       return RADARDATAFORMATTER(res.data, options)
   }
 */

/**
 * @author LiuBo
 * @method
 * @name SCATTERFORMATTER
 * @description 散点图数据转换方法
 * @param {Array} res接口返回的的response.data
 * @param {Array<Object>} options图表配置
 * @return {Object} 散点图合法数据
 *
 * @example
 * (res) => {
       let options = [
            {
                xAxis: '',
                yAxis: ''
            },
            {
                xAxis: '',
                yAxis: ''
            },
       ]
       return SCATTERFORMATTER(res.data, options)
   }
 */

/**
 * @author LiuBo
 * @method
 * @name FUNNELDATAFORMATTER
 * @description 漏斗图数据转换方法
 * @param {Array} res接口返回的的response.data
 * @param {Object} options图表配置
 * @return {Array} 漏斗图合法数据
 *
 * @example
 * (res) => {
       let options = {
            xAxis: '',
            yAxis: ''
       }
       return FUNNELDATAFORMATTER(res.data, options)
   }
 */

/**
 * @author LiuBo
 * @description 翻牌器数据返回示例
 * @return {Object} 翻牌器合法数据可以用返回值替换（如果有的话）
 *
 * @example
 * (res) => {
       return {
            value: '12345' || res.data[0].value
       }
   }
 */

/**
 * @author LiuBo
 * @description 颜色块数据返回示例
 * @return {Array} 颜色块合法数据可以用返回值替换（如果有的话）
 *
 * @example
    (res) => {
        let data = [];
        res.data.forEach(row => {
          data.push({
              "backgroundColor": "#67C23A" || row.color,
              "prefixText": "某某某总人数" || row.prefixText,
              "value": "12345" || row.value,
              "suffixText": "人" || row.suffixText
          })
       })
       return data
   }
 */

/**
 * @author LiuBo
 * @description 环形图&进度条数据返回示例
 * @return {Object} 环形图&进度条合法数据可以用返回值替换（如果有的话）
 *
 * @example
    (res) => {
        let data = {
            "label": "人数增涨" || res.data[0].label,
            "value": 40 || res.data[0].value,
            "data": 80 || res.data[0].data
        };
       return data
   }
 */

/**
 * @author LiuBo
 * @description 仪表盘数据返回示例
 * @return {Object} 仪表盘合法数据可以用返回值替换（如果有的话）
 *
 * @example
 (res) => {
        let data = {
            "min": 1 || res.data[0].min,
            "max": 10 || res.data[0].max,
            "label": "名称" || res.data[0].label,
            "value": 4 || res.data[0].value,
            "unit": "%" || res.data[0].unit
        }
       return data
   }
 */
  • 无标签

7 评论

  1. 于亚杰 发表：

    1）折线图示例：

    接口地址：http://i-2v5slqlr.cloud.nelbds.cn:8180/api/app/dwf/v1/omf/entities/Asset/objects

    接口参数：

    {
  "condition": " order by obj.assetName asc"
}

    数据处理：

    (res) => {
       let options = {
            xAxis: 'assetName',
            yAxis: [
                {
                    name: 'workHour',
                    legend: '工作小时数'
                },
                {
                    name: 'alarmCount',
                    legend: '总故障报警数'
                },
            ]
       }
       return BARDATAFORMATTER(res.data, options)
   }

    2）象形图

    接口地址：http://i-2v5slqlr.cloud.nelbds.cn:8180/api/app/dwf/v1/omf/entities/Asset/objects

    接口参数：

    {
  "condition": " order by obj.assetName asc"
}

    数据处理：

       (res) => {
       let options = {
            xAxis: 'assetName',
            yAxis: 'alarmCount'
       }
       return PICTORIALBARDATAFORMATTER(res.data, options)
   }

  2. 于亚杰 发表：

    雷达图示例：

    接口地址：http://i-2v5slqlr.cloud.nelbds.cn:8180/api/app/dwf/v1/omf/entities/Asset/objects

    接口参数：

    {
  "condition": " order by obj.assetName asc"
}


    数据处理：

    (res) => {
       let options = {
            indicator: [
                {
                    name: 'workHour',//真实值对应属性
                    max: 3000,//真实值对应最大值
                    displayName: '工作小时'//真实值对应名称
                },
                 {
                    name: 'workHour',//真实值对应属性
                    max: 3000,//真实值对应最大值
                    displayName: '工作小时'//真实值对应名称
                },
                {
                    name: 'alarmCount',//真实值对应属性
                    max: 500,//真实值对应最大值
                    displayName: '总故障报警数'//真实值对应名称
                },
                {
                    name: 'mileAge',//真实值对应属性
                    max: 1000,//真实值对应最大值
                    displayName: '总里程数'//真实值对应名称
                },
                {
                    name: 'woCount',//真实值对应属性
                    max: 500,//真实值对应最大值
                    displayName: '当前工单数'//真实值对应名称
                },
            ],
            legend: ['工作小时数','工作小时数','总故障报警数','总里程数','当前工单数']//每个图例
        }
       return RADARDATAFORMATTER(res.data, options)
   }

  3. 于亚杰 发表：

    4）饼状图

    接口地址：http://i-2v5slqlr.cloud.nelbds.cn:8180/api/app/dwf/v1/omf/entities/Asset/objects

    接口参数：

    {
  "condition": " order by obj.assetName asc limit 5"
  
}


    数据处理：

     (res) => {
       let options = {
            xAxis: 'assetName',
            yAxis: 'workHour'
       }
       return PIEDATAFORMATTER(res.data, options)
   }

  4. 于亚杰 发表：

    5）散点图

    接口地址：http://i-2v5slqlr.cloud.nelbds.cn:8180/api/app/dwf/v1/omf/entities/Asset/objects

    接口参数：

    {
  "condition": " order by obj.assetName asc limit 5"
  
}


    数据处理：

     (res) => {
       let options = [
            {
                xAxis: 'workHour',
                yAxis: 'alarmCount'
            },
            {
                xAxis: 'mileAge',
                yAxis: 'alarmCount'
            },
       ]
       return SCATTERFORMATTER(res.data, options)
   }

  5. 于亚杰 发表：

    6）饼状图

    接口地址：http://i-2v5slqlr.cloud.nelbds.cn:8180/api/app/dwf/v1/omf/entities/Asset/objects

    接口参数：

    {
  "condition": " limit 1"
   
}


    数据处理：

      (res) => {
        let data = {
            "label": res.data[0].assetName,
            "value": res.data[0].workHour,
            "data":  res.data[0].alarmCount
        };
       return data
   }

  6. 于亚杰 发表：

    7）仪表盘

    接口地址：http://i-2v5slqlr.cloud.nelbds.cn:8180/api/app/dwf/v1/omf/entities/Asset/objects

    接口参数：

    {
  "condition": " limit 1"
   
}


    数据处理：

    (res) => {
        let data = {
            "min": 1 ,
            "max": 5000,
            "label": res.data[0].assetName,
            "value": res.data[0].workHour,
            "unit": "%" 
        }
       return data
   }

  7. 刘英博 发表：

    任意SQL语句
    http://i-xm7us666.cloud.nelbds.cn:8180/api/app/dwf/v1/customsql/datasources/queryByCustomSql?parseStructure=false
    POST
    请求参数：

    (data)=>{
    return {
        condition: 'select * from plt_cus_asset'
    }
}

    过滤器：

    (res) => {
       let options = {
            xAxis: 'plt_id',
            yAxis: [
                {
                    name: 'plt_workhour',
                }
            ]
       }
       return BARDATAFORMATTER(res.data.objs, options)
   }