常用过滤器整理

基本的过滤器了解指路👉EasyV过滤器基础教程

本整理文档中使用的callbackArgs为平台回调指路👉回调使用

标准过滤器模板

使用标准过滤器模版有助于理解与维护

try{
  //如果有回调的话,需要先接受回调，没有就不需要下面这一行了。
  const { callback : rename = [] } = callbackArgs;	`//rename是重命名，=[]表示默认是一个空数组
  if(rename[0]){ //这里的判断条件不一定是这个，如果你的rename是一个对象的话，就不能这么写了
    return data;
  }
}catch(e){
  console.log("过滤器名称:",e);		//携带过滤器名称的报错信息，便于快速定位过滤器
  return []
}
return []

try{
  const { callback : rename = [] } = callbackArgs;	
  if(rename[0]){ 
    return data;
  }
}catch(e){
  console.log("过滤器名称:",e);	
  return []
}
return []

标题回调测试

用于简单展示查看回调是否传出以及传出值的具体内容

const { callBack } = callbackArgs;

return [
  {
  "text": "callBack:" + callBack
}
]

示例：地图回调测试

提取数据

常用于api数据接入，提取需要的数据层级

if (data[0] && data[0].data) {
  return data[0].data;
} else {
  return data;
}

单个翻牌器

简单的根据获取数据进行对应

try{
  const curData = data[0]
  return [
  {
    "name": curData.name,
    "value": curData.value,
  }
];
}catch(e){
	return []
}

多个翻牌器

key筛选—注入

翻牌器内加入标识字段key

try {
  const { callBack: tmp = [] } = callbackArgs;

  const [{ key }] = data;
  const [_data = {}] = tmp;

  return [{
    ...data[0],
    value: _data[key] || 0
  }];
} catch (e) {
  return []
}

name筛选—注入

直接在翻牌器数据的name字段进行标识

try {
  const { tmp = [] } = callbackArgs;
  const cur = tmp.filter(item => item.name == data[0].name)[0]
  if (cur) {
    return [{
      name: data[0].name,
      count: cur.count
    }]
  }
} catch (e) {
  return []
}

生成时间戳

const { timestamp = 0 } = callbackArgs;

let _timestamp = Date.now()

if (_timestamp - timestamp > 100) {
  return _timestamp
}
return timestamp

时间计算

返回选中时间的不同时间格式

const p = n => n > 9 ? n : '0' + n;

const { selectTime } = callbackArgs;

const date = new Date(selectTime);
//const date = new Date();	//获取当天日期

const YYYY = date.getFullYear();
const MM = p(date.getMonth() + 1);
const dd = p(date.getDate());
const hour = p(date.getHours());
const minute = p(date.getMinutes()+1);
const second = p(date.getSeconds()+1);

return `${YYYY}-${MM}-${dd} ${hour}:${minute}:${second}`;

获取前一周时间日期

const p = n => n > 9 ? n : '0' + n;

function getBeforeWeek(){
    let _date = new Date(); 
        _date.setDate(_date.getDate() - 7);
    const YYYY=_date.getFullYear();
 		const MM = p(_date.getMonth() + 1);
		const dd = p(_date.getDate());
 
    let dateTemp = YYYY+'-'+MM+'-'+dd;
    _date.setDate(_date.getDate() + 7);
    return dateTemp;
}

单系列—注入

try {
  const { tmp = [] } = callbackArgs;
  return tmp.map((item) => {
    return {
      ...item,
      s: "系列一"
    };
  })

} catch (e) {
  return []
}

多系列—注入(排序)

if (data) {
  let newArr1 = [], newArr2 = [];
  data.forEach((el) => {
    if (el.s == '系列一') {
      newArr1.push(el)
    } else {
      newArr2.push(el)
    }
  })
  return newArr1.concat(newArr2)
} else {
  return []
}

循环对比—注入

try {
  const { tmp = [] } = callbackArgs;
  const { newData } = tmp[0].data;

  for (let i = 0; i < data.length; i++) {
    for (let j = 0; j < newData.length; j++) {
      if (data[i].name == newData[j].name) {
        data[i].value = newData[j].value
      }
    }
  }
  return data
} catch (e) {
  return []
}

Map映射-注入

const { tmp = [] } = callbackArgs;
const { newData = [] } = tmp[0].data;		//提取出需要注入的数据

let map = new Map();	//创建一个空的映射表
newData.map(d=>{			//把新数据进行一一映射，这里需要保证每个name唯一，否则会产生覆盖。
	map.set(d.name,d.value)
});
data.forEach(d=>{
	d.value = map.get(d.name) || ""
});
return data

筛选—注入

try {
  let newData = [],
  for (let obj in data) {
    newData.push({
      x: obj,
      y: data[obj],
      s: '系列一'
    })
  }
  return newData
} catch (e) {
  return []
}

经纬度注入(csv)

return data.map(item => {
  const [lng, lat] = item["经纬度"].split(',')
  return {
    name: item["名称"],
    value: 5,
    lng: Number(lng),
    lat: Number(lat),
    area: item["名称"]
  }
});

分页计算

//页数10
try {
  return [{
    "total": Math.ceil(data[0].total / 10) || 1
  }]
} catch (e) {
  return [{ "total": 1 }]
}

数值千分位转换

try {
  const num = '1588554434'
  
  return num.replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');
  
} catch (e) {
  return []
}

进制计算

//进制（万）
return data.map(d => {
  return {
    ...d,
    y: Math.round(d.y / 10000)
  }
});

数据详情—分发

try {
  let result = []
  const { curData } = callbackArgs;
  if (curData) {
    result = curData.map(d => {
      return {
        "column1": d.name,
        "column2": d.value,
        "column3": d.value2,
        "column4": d.value3,
        "isSelected": false
      }
    })
  }
  return result
} catch (e) {
  return []
}

数据-置顶处理

在既有数组里置顶某一元素

try {
data.map((item, index) => {
    if (item.isSticked == true) {
      data.unshift(data.splice(index, 1)[0]);
    }
  })
  } catch (e) {
  return []
}

数据-升降序处理

如有既定排序规则，即简单使用排序。

try {
  const { sort } = callbackArgs;
  if(sort == 'up'){
    return data.sort((a, b) => a.value - b.value)
  }else{
    return data.sort((a, b) => b.value - a.value)
  }
} catch (e) {
  return []
}

数据-根据日期排序处理

let key = 'x';		//把key的值设置为表示日期的字段即可。注意日期格式是否标准
let order = 'up';		//up表示升序
if(order=='up'){
  return data.sort((a,b) => {
    return new Date(a[key])-new Date(b[key])
  });
}else{
  return data.sort((a,b) => {
    return new Date(b[key])-new Date(a[key])
  });
}

总数相加处理

try {
  const { callback = [] } = callbackArgs;
  
 	return callback.reduce((total,d)=>{		//注意赋予初始值0
  	return total+d.value
  },0)		
} catch (e) {
  return []
}

飞线生成器

这里需要用到两个数据容器，容器a用于存放所有地图点位数据，这里需要用数组来包裹每个点位数据，数组中第一个元素是点位名称，第二个是该点位的经纬度，且必须是二维数组格式，数据格式如下：

[
  [
    "昌吉",
    [
      [
        87.308221,
        44.011184
      ]
    ]
  ],
  [
    "湟源",
    [
      [
        101.249175,
        36.680041
      ]
    ]
  ],
  ......
]

容器a通过回调将数据传递给容器b，b接受数据，再导入csv格式的数据后，可以根据csv中的 "点位名称" 字段来生成飞线的数据。点位名称样例：“成都-北京”

const { pointData=[] } = callbackArgs;	//这里接收容器a的数据，即pointData
if(pointData.length>0){
  let map=new Map(pointData);		//这里把pointData转换成了Map对象，用于提高检索速度
  let res=[];
  let s1="";
  data.map(d=>{
    if(d['地图样式']=="公路"||d['地图样式']=="飞线"){		//地图样式为点位或飞线时都能生成数据
      let s=d['点位名称'].split("-");
      let start=map.get(s[0]);
      let end=map.get(s[1]);
      if(start && end){
        let temp=[start[0],end[0]];
        s1+=JSON.stringify(temp)+"\n"
      }else{
        s1+="\n"
      }
    }else if(d['地图样式']=="点"){			//地图样式为点时直接获得点的数据
      let point=map.get(d['点位名称'])
      if(point){
        s1+=JSON.stringify(point)+"\n"
      }else{
        s1+="\n"
      }
    }else{
      s1+="\n"		//每次遍历都需要加换行符，这是为了在控制台打印后，可以直接复制粘贴到csv文件中
    }
  });
  console.log(s1)		//在控制台打印最终结果，请预览后按下F12，点击Console（控制台）进行查看
}
return data;

具体案例详见大租户下的这个屏：https://easyv.cloud/workspace/create/445578

一维数组 --> 二维数组。

用于将一维数组根据某个字段进行分类，形成二维数组。对于大体量的数据而言，将数据进行分类可以帮助快速查找某条数据，减少数组的遍历次数。这里的代码最后又将map对象转换成了数组，其实是可以省略的，map对象的查找速度会更快一些。

过滤器代码：

let type="a";		//分类依据,根据字段a的值来分类
let maps=new Map();
data.map(d=>{
  if(d[type]){
    if(maps.has(type)){
      maps.get(type).push(d)
    }else{
      maps.set(type,[d])
    }
  }
});
return [...maps];

整体数组以关键字段筛选分系列

try {
  let newArr = {};
  for (let i = 0; i < data.length; i++) {
    const k = data[i].type
    if (!newArr[k]) {
      newArr[k] = []
    }
    newArr[k].push(data[i])
  }
  return newArr
} catch (e) {
  return []
}

一维数组 --> 三维数组。

用于将一维数组根据某两个字段进行分类，形成三维数组。

let type1="a", type2="b";		//分类依据,先根据字段a的值来分类,再根据b的值来分类
let maps=new Map();
data.map(d=>{
    if(maps.has(type1)){
      let map2=maps.get(type1);
      if(map2.has(type2)){
        map2.get(type2).push(d)
      }else{
        let mapTemp=new Map();
        map2.set(type2,[d])
      }
    }else{
      let mapTemp=new Map();
      mapTemp.set(type2,[d]);
      maps.set(type1,mapTemp);
    }
  }
});
return [...maps].map(d=>{
 	return [d[0],[...d[1]]] 
});

数组 --> 树形结构

可以用于获取数据库数据处理成层级嵌套数据的通用算法；

function getTree(arr){
  
  let obj ={},treeList = [];
  
  arr.forEach(item=>{
    obj[item.id] = item //id是子级的ID
    if(obj[item.pid]){
      //pid是父级的ID-parentId
      if(obj[item.pid].children){
         obj[item.pid].children.push(item)
      }else{
        obj[item.pid].children =[item]
      }
    }else{
      treeList.push(item)
    }
  })
  return treeList 
}

return getTree(data)

数组对象 --> 对比去重

1.map映射方法

function dupreRemove(data){
  
  let map = new Map();
    for (let item of data) {
        if (!map.has(item.id)) {
            map.set(item.id, item);
        };
    };
    data = [...map.values()];
    return data
}

2.循环去重

//id仅为唯一确定区分的标识，具体以数据情况为准
function dupreRemove(data) {
    for (let i = 0; i < data.length; i++) {
        for (let j = i + 1; j < data.length; j++) {
            if (data[i].id == data[j].id) {
                data.splice(j, 1);
                j--;
            };
        };
    };
    return data;
};