如何批量修改同一类组件的配置项

注：标红文本代表重要参数，需要有这些参数才能成功修改配置项。

1. 首先获取到大屏名称列表，如下所示，需要修改的大屏名称列表为 ["孟德测试1","孟德测试2"]

2. 你需要知道你修改的组件英文名是啥。按下F12打开控制台（打不开的自己百度如何打开谷歌浏览器的控制台），在Console页面输入以下代码（其中的数字899342需要替换为你的大屏ID）：

fetch("https://workspace.easyv.cloud/api/easyv/v5/screens/899342")
.then(res=>res.json())
.then(res=>console.log(res.data.components))

按下回车，你会看到这样一个列表

3. 找到你需要修改的组件，展开其中的内容，可以在base字段中的 "module_name:" 后面找到组件的英文名，下面以万用图为例。这里可以知道万用图的名称是 "superChart"

4. 找到你需要修改的配置项路径，展开config字段，还是以万用图为例，比如你要显示Y轴，如图所示，经过层层递进，我们在第三层找到了目标，然后把三层name包装成数组格式 [ "axis","yAxis","show" ]。同时我们能看到_value的值是false，表示隐藏，既然要显示Y轴，那就需要把它改为 true。

5. 打开控制台，输入以下代码，按下回车

function batchChangeConfig(screens, name, path, target){
  //第一步，获取到所有大屏
  fetch(`${window.location.origin}/api/easyv/v3/screen/list`)
  .then(res=>res.json())
  .then(res=>{
    if(res.success){
      let map = new Map();
      //筛选出所有未删除的大屏，并将他们的名字和id存入map中
      res.data.screens.map(d=>{
        if(!d.deletedAt){
          map.set(d.name,d.id)
        }
      });
      screens.map(d=>{
        return [map.get(d),d]
      }).map((item,i)=>{
        setTimeout(()=>{
          fetch(`${window.location.origin}/api/easyv/v5/screens/${item[0]}`)
          .then(res=>res.json())
          .then(res=>{
            if(res.success){
               let components = res.data.components.filter(d=>d.base.module_name==name);
               let configs = components.map(d=>{
                   return {
                     config:d.config,		//组件配置项
                     id:d.id,			//组件id
                     parent:null	//不知道干嘛用的，反正写上去就完事了
                   }
               });
               configs.forEach(d=>{
                 let temp = d.config;
                 let i=0;
                 while(path[i]){
                    temp = temp.find(v=>{return v.name==path[i] || v._name==path[i]});
                    if(temp._value instanceof Array || temp.value instanceof Array){
                         temp = temp.value || temp._value;
                         i++;
                    }else{
                         break;
                    }
                 }
                 temp._value!==undefined ? temp._value = target:temp.value=target;
               });
                 fetch(`${window.location.origin}/api/easyv/v3/component/update`,{
                   method:"POST",
                   headers:{
                     "content-type":"application/json"
                   },
                   body:JSON.stringify({
                     configs:configs,
                     screenId:item[0]
                   })
                 })
                   .then(res=>res.json())
                   .then(res=>console.log("大屏："+item[1],res));
            }else{
               console.log("获取大屏组件失败，请检查大屏ID是否正确") 
            }
          })
        },i*200);
      })
    }else{
       console.log("获取大屏列表失败"); 
    }
  })
}

6. 输入以下代码，将上文中红色标注的文本依次填入 （） 中，按下回车

batchChangeConfig(["孟德测试1","孟德测试2"],"superChart",[ "axis","yAxis","show" ],true);

7. 得到执行成功的结果后，需要刷新页面后才能看到效果。