周六早晨上班,同事说 ProcessOn 上面的一个思维导图打不开了(一直转圈儿,没有任何内容),这是一个非常重要的思维导图,如果真出现问题,可能以后都不敢用 ProcessOn 了。我同事自己先和客服联系,由于他们周末不上班,此事无法解决。
我自己因为好奇,就想看看自己能不能恢复了,因此有了本文。
本文不涉及复杂的功能,整个处理过程只使用了 Chrome 浏览器,打开 F12 即可。
为了能看到正常思维导图的处理过程,先创建一个简单的思维导图,添加一个简单的内容。
进行下面操作前,先打开 F12 控制台,每次操作前都建议清空 Network 里面的内容。
对代码不懂的读者可以直接看最后面的代码
粘贴到浏览器控制台执行按照提示操作即可。
获取历史
ProcessOn 有历史功能,因此我第一步想到的是获取历史,然后还原到某个可用的版本。
下面开始详细的操作步骤:
- 按下面方式,点击【历史版本】
- 查看此时的浏览器请求如下
- 查看调用的方法(鼠标放到 jquery.js?_…上面就会出现)
- 看到 loadHistorys,点击该行的链接
- 由于代码压缩过,点击代码左下角的
{}
按钮进行格式化,然后定位到如下位置
可以看到上面的请求很简单的,复制这段代码修改如下:
//获取所有历史信息
$.ajax({
url: "/diagraming/get_versions",
data: {
chartId: '思维导图的 ID,在浏览器地址栏的最后一部分'
},
cache: false,
success: function(g) {
console.dir(g);
}
})
思维导图 ID 就是类似 https://www.processon.com/mindmap/5c427b11e4b03334b5086fdc
这个地址中的 5c427b11e4b03334b5086fdc
部分(该地址不存在,用你自己的地址测试)。执行结果如下:
上述代码执行后,会在控制台输出所有可用的历史版本,而且是倒序排列。展开想要还原的一个版本,示例如下:
复制 definitionId
的值。
还原到指定的版本
和前面类似,执行还原操作,查找对应的代码。
下面是几个操作步骤图。
- 点击还原
- 获取指定版本的配置
- 对应的代码如下
- 等待片刻,看到 restore
- 查看对应代码
上面两段代码都很简单,这里不一一分析,直接来最终的代码。
完整操作代码
代码如下:
//还原到指定的版本
(function restore(){
//根据当前浏览器地址获取 id
var MAX_HISTORY_LENGTH = 10;
var href = window.location.href;
var chartId = href.substr(href.lastIndexOf('/') + 1);
//获取所有历史
$.ajax({
url: "/diagraming/get_versions",
data: {
chartId: chartId
},
cache: false,
success: function(historyResp) {
if(historyResp && historyResp.list){
//获取最近 MAX_HISTORY_LENGTH 个历史
var historyList = historyResp.list;
var historyLength = historyList.length > MAX_HISTORY_LENGTH ? MAX_HISTORY_LENGTH: historyList.length;
if(historyLength == 0){
alert('当前没有历史版本,无法选择还原!');
return;
}
var historyHtml = '清选择要还原的历史版本:\n';
for(var i = 0; i < historyLength; i++){
var h = historyList[i];
historyHtml += '\n';
historyHtml += i + '. ' + h.fullName + ' <' + h.remark + '> : ' + h.createDate;
}
historyHtml + '\n 请输入要还原历史的序号:';
var choose = prompt(historyHtml);
if(choose === null){
return;
}
try {
choose = Number(choose);
} catch(e){
alert('输入错误:' + e);
return;
}
if(choose > historyLength){
alert('序号超过可选范围');
return;
}
//获取历史详细信息
$.ajax({
url: "/diagraming/get_versiondef",
data: {
id: historyList[choose].definitionId
},
success: function(b) {
if (b.def == null) {
alert('历史不存在');
return
}
if(confirm('确认要还原吗?')){
$.ajax({
url: "/mindmap/restore",
type: "post",
data: {
def: b.def,
chart_id: chartId,
ignore: "def"
},
success: function() {
alert('还原完成,刷新查看');
window.location.reload();
}
})
}
}
})
}
}
});
})();
用法:
- 用谷歌或者急速内核浏览器打开有问题的思维导图
- 按 F12 打开控制台
- 如上图,切换到 Console 标签,在下面输入框粘贴上述代码,回车执行
- 按照下面提示进行操作
最后确定后浏览器会自动刷新,此时可以看到效果。