You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
4.0 KiB
131 lines
4.0 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>动态图表预览</title>
|
|
<meta charset="utf-8" />
|
|
<style>
|
|
|
|
.geAdaptiveAsset,[title='title="Close (Escape)"'] {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- <div id="mxgraph-container" class="mxgraph" style="max-width:100%;border:1px solid transparent;"
|
|
data-mxgraph='{"highlight":"#0000ff","nav":true,"resize":true,"toolbar":"zoom layers lightbox pages","edit":"_blank"}'>
|
|
</div> -->
|
|
|
|
<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" id="mxgraph-container">
|
|
</div>
|
|
|
|
<script type="text/javascript" src="js/viewer-static.min.js"></script>
|
|
<script>
|
|
const pattern = /(\w+)=([^\#&]*)/gi;
|
|
const parames = {};
|
|
location.href.replace(pattern, function (attr, key, value) {
|
|
parames[key] = decodeURI(value);
|
|
});
|
|
|
|
function htmlEntities(a, b, c, d) {
|
|
a = String(null != a ? a : "");
|
|
a = a.replace(/&/g, "&");
|
|
a = a.replace(/</g, "<");
|
|
a = a.replace(/>/g, ">");
|
|
if (null == c || c)
|
|
a = a.replace(/"/g, """),
|
|
a = a.replace(/'/g, "'");
|
|
if (null == b || b)
|
|
a = a.replace(/\n/g, "
");
|
|
if (null == d || d)
|
|
a = a.replace(/\t/g, "	");
|
|
return a
|
|
}
|
|
|
|
|
|
|
|
const u = new URL(location.href);
|
|
const host = u.hostname;
|
|
|
|
|
|
let apiHost = 'data.educoder.net';
|
|
|
|
if (host === 'test2.educoder.net') {
|
|
apiHost = 'test2-data.educoder.net';
|
|
} else if (host === 'test.educoder.net') {
|
|
apiHost = 'test-data.educoder.net';
|
|
}else if (host === 'pre.educoder.net') {
|
|
apiHost = 'pre-data.educoder.net';
|
|
}else if(host === 'localhost'){
|
|
apiHost = 'localhost:8000'
|
|
}
|
|
|
|
const apiPref = `${location.protocol}//${apiHost}`;
|
|
|
|
|
|
const _url = `${apiPref}/api/attachments/${parames.id || sessionStorage.getItem('file_id')}/xml_data.json`;
|
|
|
|
|
|
// 后端请求函数
|
|
window.getInitData = function () {
|
|
if (!parames.id) return;
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.withCredentials = true;
|
|
|
|
xhr.addEventListener('load', function (event) {
|
|
try {
|
|
const data = JSON.parse(event.target.response);
|
|
console.log('XHR 响应数据:', data.file_data);
|
|
// 动态设置图表数据
|
|
updateDiagram(data.file_data);
|
|
} catch (e) {
|
|
console.error('JSON 解析失败:', e);
|
|
}
|
|
}, false);
|
|
|
|
xhr.addEventListener('error', function (error) {
|
|
console.error('XHR 请求失败:', error);
|
|
}, false);
|
|
|
|
xhr.open('GET', _url);
|
|
xhr.setRequestHeader('Accept', 'application/json');
|
|
xhr.send();
|
|
};
|
|
|
|
// 更新图表数据的函数
|
|
function updateDiagram(xmlData) {
|
|
const container = document.getElementById('mxgraph-container');
|
|
// 确保xmlData是字符串格式
|
|
const jsonConfig = {
|
|
highlight: '#0000ff',
|
|
nav: true,
|
|
resize: true,
|
|
toolbar: 'zoom layers lightbox pages', // 启用页面切换工具栏
|
|
// lightbox: true, // 启用 Lightbox 模式
|
|
xml: xmlData
|
|
};
|
|
// 更新data-mxgraph属性
|
|
container.setAttribute('data-mxgraph', JSON.stringify(jsonConfig));
|
|
|
|
|
|
// 触发查看器重新加载
|
|
window.ccc = Editor.initMath();
|
|
let ddd ;
|
|
if (null != window.onDrawioViewerLoad)
|
|
ddd = window.onDrawioViewerLoad();
|
|
else
|
|
ddd = GraphViewer.processElements()
|
|
|
|
window.dxa = ddd
|
|
}
|
|
|
|
// 初始化请求
|
|
window.getInitData();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |