数字孪生可视化网页版 RayData Web 表单筛选及下载数据的使用

一、实现效果

输入框查询姓名，下拉框选择工作地，时间选择器选择入职时间。

示例：可以实现输入框输入李四，下拉框工作地选择上海，入职时间选择2017年4月。

·单击查询，则可以把满足这三个条件的李四的表格数据筛选出来。

·单击导出，则可以把满足这几个条件下的数据，导出本地。

二、操作步骤

1. 在管理中心页面，单击添加数据源，格式选择离线文件，上传一个模拟的 Excel（例如 xlsx 格式）的部门成员信息表。

2. 在编辑页面，添加表格组件，数据类型选择离线文件，选择部门成员信息表，新建 a、b、c 三个变量，默认值设置为空，由于上传的 Excel 表格的数据结构与 Web 内表格数据结构的不匹配，添加一个包含 a、b、c 变量引用的过滤器，过滤器内容如下：


function findTableDataResultFinal(option, dataSource) {
// 变量设置 var tablePanel = [{}], currentDataList = dataSource; var r = getCurrentLengthFinal(option, currentDataList); var hederIndex = ""; if (option.hPosition === "top" || option.hPosition === "left" || option.hPosition === "" || option.hPosition === "none" || !option.hPosition) { hederIndex = "0"; } else if (option.hPosition === "bottom") { hederIndex = "" + r.h – 1; } else if (option.hPosition === "right") { hederIndex = "" + r.w – 1; } // 数据为空时候 if (currentDataList.length === 0) { tablePanel = drawTablePanelFinal(r.w, r.h); } if (currentDataList && Array.isArray(currentDataList)) { // 绘制表格格式 tablePanel = drawTablePanelFinal(r.w, r.h); // 表头 var hederList = option.headerType === "static" ? option.headerNameList : []; // 表头数据设置 for (var i in hederList) { if (option.hPosition === "left" || option.hPosition === "right") { tablePanel[i]["cells"][hederIndex]["text"] = hederList[i]; } else if (option.hPosition === "top" || option.hPosition === "bottom" || option.hPosition === "" || option.hPosition === "none" || !option.hPosition) { tablePanel[hederIndex]["cells"][i]["text"] = hederList[i]; } } if ((option.hPosition === "top" || option.hPosition === "left" || option.hPosition === "" || option.hPosition === "none" || !option.hPosition) && option.headerType != "none" && option.headerType) { n = 1; } else { n = 0; } // 源数据循环 currentDataList.forEach(function (item, index) { for (var i in option.cellsFieldNameList) { var key = option.cellsFieldNameList[i], v = item[key] != null ? item[key] : ''; if (option.hPosition === "left" || option.hPosition === "right") { tablePanel[i]["cells"][n]["text"] = v; } else { tablePanel[n]["cells"][i]["text"] = v; } } n++; }) } else { tablePanel = drawTablePanelFinal(r.w, 1); var hederList = option.headerType === "static" ? option.headerNameList : []; for (var i in hederList) { if (option.hPosition === "left" || option.hPosition === "right") { tablePanel[i]["cells"][hederIndex]["text"] = hederList[i]; } else { tablePanel[hederIndex]["cells"][i]["text"] = hederList[i]; } } for (var i in option.cellsFieldNameList) { var key = option.cellsFieldNameList[i], v = currentDataList[key] != null ? currentDataList[key] : 0; if (option.hPosition === "left" || option.hPosition === "right") { tablePanel[i]["cells"][hederIndex]["text"] = hederList[i]; } else { tablePanel[0]["cells"][i]["text"] = v; } } } return tablePanel; } function getCurrentLengthFinal(option, dataSource) { var r = { w: 1, h: 1 }; var obj = []; if (dataSource && Array.isArray(dataSource)) { if (option.fn) { dataSource.forEach(function (item) { if (option.fn(item)) obj.push(item); }) } else { obj = dataSource; } } else { obj = dataSource } if (option.hPosition === "top" || option.hPosition === "bottom" || !option.hPosition) { r.w = option.headerType === "static" ? option.headerNameList.length : option.cellsFieldNameList.length; r.h = option.headerType === "static" ? obj.length + 1 : obj.length; } if (option.hPosition === "left" || option.hPosition === "right") { var headerType = option.headerType r.w = headerType === "static" ? obj.length + 1 : obj.length r.h = headerType === "static" || headerType === "none" || !headerType ? option.headerNameList.length : r.h } return r } function drawTablePanelFinal(width, height) { var row, cell, row = { "cells": {} }, cell = {}; for (var i = 0; i < width; i++) row['cells'][i] = { "text": null }; for (var i = 0; i < height; i++) cell[i] = JSON.parse(JSON.stringify(row)); return cell; } function calculate(arrValue,data){if(!Array.isArray(data)){let e=[];e.push(data),data=e}return arrValue.forEach(handleValue=>{switch(handleValue.defaultType){case 0:switch(handleValue.dealType){case 2:data.forEach((e,t)=>{data[t][handleValue.fieldDesc.filed]=e[handleValue.fieldDesc.filed].toString().replaceAll(handleValue.config.field1,handleValue.config.field2)});break;case 3:data.forEach((e,t)=>{data[t][handleValue.fieldDesc.filed]=e[handleValue.fieldDesc.filed].toString().replaceAll(handleValue.config.field1,"")});break}break;case 1:let arr=[0,1,2,3,4,5,"+","-","*","/",10,"%"];10==handleValue.dealType?data.forEach((e,t)=>{let a=Math.round(parseFloat(e[handleValue.fieldDesc.filed])*Math.pow(10,handleValue.config.field1))/Math.pow(10,handleValue.config.field1);data[t][handleValue.fieldDesc.filed]=a.toFixed(handleValue.config.field1)}):handleValue.dealType&&data.forEach((item,index)=>{const d=(""+item[handleValue.fieldDesc.filed]).split(".").length>1?(""+item[handleValue.fieldDesc.filed]).split(".")[1].length:0,d1=(""+handleValue.config.field1).split(".").length>1?(""+handleValue.config.field1).split(".")[1].length:0;let pow=7==handleValue.dealType||6==handleValue.dealType?d>d1?d:d1:8==handleValue.dealType?d+d1:d1-d;if(7==handleValue.dealType||6==handleValue.dealType)data[index][handleValue.fieldDesc.filed]=eval(`(((${parseFloat(item[handleValue.fieldDesc.filed])} * ${Math.pow(10,pow)}) ${arr[handleValue.dealType]} (${parseFloat(handleValue.config.field1)} * ${Math.pow(10,pow)}))/ ${Math.pow(10,pow)}).toFixed(${pow})`);else if(8==handleValue.dealType||9==handleValue.dealType){const filed=(""+item[handleValue.fieldDesc.filed]).replace(".",""),filed1=(""+handleValue.config.field1).replace(".","");data[index][handleValue.fieldDesc.filed]=eval(8==handleValue.dealType?`(${Number(filed)} ${arr[handleValue.dealType]} ${Number(filed1)}) ${arr[9]} ${Math.pow(10,pow)}`:numMulti(Number(filed)/Number(filed1),Math.pow(10,pow)))}else data[index][handleValue.fieldDesc.filed]=eval(`parseInt(${parseFloat(item[handleValue.fieldDesc.filed])} ${arr[handleValue.dealType]} ${parseFloat(handleValue.config.field1)})`)});break;case 2:let arrD=["yyyy","yyyy年","yyyy年MM月","yyyy-MM","yyyy/MM","yyyy年MM月dd日","yyyy-MM-dd","yyyy/MM/dd","yyyy.MM.dd","MM","MM月","MM月dd日","MM/dd","MM-dd","MM.dd","dd日","dd"];data.forEach((e,t)=>{handleValue.dealType?data[t][handleValue.fieldDesc.filed]=dateformatFunc(e[handleValue.fieldDesc.filed],arrD[Number(handleValue.dealType)-12]):data[t][handleValue.fieldDesc.filed]=e[handleValue.fieldDesc.filed]});break;default:break}}),data;function numMulti(e,t){var a=0;try{a+=e.toString().split(".")[1].length}catch(s){}try{a+=t.toString().split(".")[1].length}catch(s){}return Number(e.toString().replace(".",""))*Number(t.toString().replace(".",""))/Math.pow(10,a)}} function dateformatFunc(e,t){var a=new Date(e),s=a.getFullYear(),i=a.getMonth()+1,o=a.getDate();return t=t.replace("yyyy",s).replace("MM",(""+i).length>1?i:"0"+i).replace("dd",(""+o).length>1?o:"0"+o),t} function dataSourceProcess(data, args) { if (args.a) { data = data.filter(o => o["姓名"] == args.a); } if (args.b) { data = data.filter(o => o["工作地"] == args.b); } if (args.c) { data = data.filter(o => o["入职时间"] == args.c); } return data } var logicItem = [{"name":"员工编号","defaultType":0,"config":{"field1":"","field2":"","isEdit":false},"source":13348,"fieldDesc":{"filedId":13348,"dataItemConfigId":0,"filed":"id","mapName":"员工编号","content":""}},{"name":"姓名","defaultType":0,"config":{"field1":"","field2":"","isEdit":false},"source":13349,"fieldDesc":{"filedId":13349,"dataItemConfigId":0,"filed":"姓名","mapName":"姓名","content":""}},{"name":"工作地","defaultType":0,"config":{"field1":"","field2":"","isEdit":false},"source":13351,"fieldDesc":{"filedId":13351,"dataItemConfigId":0,"filed":"工作地","mapName":"工作地","content":""}},{"name":"部门","defaultType":0,"config":{"field1":"","field2":"","isEdit":false},"source":13350,"fieldDesc":{"filedId":13350,"dataItemConfigId":0,"filed":"部门","mapName":"部门","content":""}},{"name":"岗位","defaultType":0,"config":{"field1":"","field2":"","isEdit":false},"source":13352,"fieldDesc":{"filedId":13352,"dataItemConfigId":0,"filed":"岗位","mapName":"岗位","content":""}},{"name":"入职时间","defaultType":0,"config":{"field1":"","field2":"","isEdit":false},"source":13353,"fieldDesc":{"filedId":13353,"dataItemConfigId":0,"filed":"入职时间","mapName":"入职时间","content":""}}] data = dataSourceProcess(data, args) data = calculate(logicItem, data) var option = {"path":"","cellsFieldNameList":["id","姓名","工作地","部门","岗位","入职时间"],"headerNameList":["员工编号","姓名","工作地","部门","岗位","入职时间"],"headerType":"static","hPosition":"top"} return findTableDataResultFinal(option, data)

3. 添加一个输入框、一个下拉框、一个时间选择器，及两个文本框，两个矩形（用来模拟查询按钮，及导出按钮）。

4. 下拉框组件，数据类型选择离线文件，选择部门成员信息表，字段映射 content，映射工作地，单击提交，下拉框显示工作地。

5. 给查询按钮绑定交互事件，触发条件选择单击，实现动作选择变量赋值：

·让 a 关联输入框的 content 字段。

·b 关联下拉框的 content 字段。

·c 关联时间选择器的 time 字段。

6. 给导出按钮绑定交互事件，触发条件选择单击，实现动作选择导出，导出格式选择 xlsx，设置完成后，单击确定。

7. 单击预览，输入框输入李四，下拉框工作地选择上海，时间选择器的入职时间选择2017年4月。单击查询，可筛选出符合该三个限定条件的数据，单击导出，可把符合该三个限定条件的数据下载到本地。

注意：说明：

注意：上方为了方便用户体验完整流程，选择离线文件的数据类型来实现，也可使用其他类型的数据源。