/**
|
* yaml页面
|
* @author wangting
|
* @date 2021-5-27
|
*/
|
layui.define(['layer','element' ],function(exports){
|
var webUtil = $webUtil;
|
var Class = function(){
|
this.MODELNAME = "platform/monitor/VciYAML";
|
this.moduleKey = "VciYAML";
|
this.backPath = configData.compatibility?path:configData.adminServicePath;
|
this.id = "VciYAML";
|
this.getContent=function(){
|
var that = this;
|
var html = "";
|
html = [
|
'<div class="layui-layout" style="display:block;overflow-y: hidden">',
|
'<div class="layui-layout-border" style="display:block;margin-top:0px; " id="border_',that.id,'">',
|
'<div class="layui-center" style="overflow-y:auto;overflow-x: hidden">',
|
'<link rel=stylesheet href="jslib/yaml/css/codemirror.css">' +
|
'<style type="text/css">' +
|
' .CodeMirror{' +
|
' height:600px;' +
|
' }' +
|
'</style>',
|
'<div id="yamlSource" style="width: 700px;height:600px;float: left;margin-right: 10px;border: 1px solid #ddd"></div>',
|
'<div id="yamlResult" style="width: 600px;height:600px;float: left;border: 1px solid #ddd"></div>',
|
'</div>',
|
'</div>',
|
'</div>'
|
].join("");
|
return html;
|
};
|
this.init = function(){
|
var that = this;
|
webUtil.copyConfig(that,that.moduleKey);
|
|
webUtil.createScript('jslib/yaml/js/codemirror.js', function () {
|
webUtil.createScript('jslib/yaml/js/yaml.js', function () {
|
webUtil.createScript('jslib/yaml/js/js-yaml.min.js', function () {
|
var yamlSourceCodeMirror = CodeMirror(document.getElementById('yamlSource'), {
|
value: '',
|
mode: 'yaml',
|
lineNumbers: true, // 显示行数
|
indentUnit: 1, // 缩进单位为2
|
styleActiveLine: true, // 当前行背景高亮
|
matchBrackets: true, // 括号匹配
|
lineWrapping: true, // 自动换行
|
tabSize: 2,
|
});
|
|
var yamlResultCodeMirror = CodeMirror(document.getElementById('yamlResult'), {
|
value: '',
|
mode: 'yaml',
|
lineNumbers: true, // 显示行数
|
indentUnit: 1, // 缩进单位为2
|
styleActiveLine: true, // 当前行背景高亮
|
matchBrackets: true, // 括号匹配
|
lineWrapping: true, // 自动换行
|
tabSize: 2,
|
});
|
|
// 监听输入值变化
|
yamlSourceCodeMirror.on('change', (cm) => {
|
var parseYaml=parseYamlFn(cm.doc.getValue())
|
if(!!parseYaml.isYaml){
|
var json = JSON.stringify(parseYaml.isYaml, null, 2);
|
yamlResultCodeMirror.setValue(json);
|
}else {
|
console.log(parseYaml.errorMessage)
|
yamlResultCodeMirror.setValue(parseYaml.errorMessage);
|
}
|
})
|
|
const parseYamlFn = (str) => {
|
let isYaml = false;
|
let errorMessage = '';
|
try {
|
isYaml = jsyaml.load(str)
|
} catch(e) {
|
errorMessage = e && e.message;
|
}
|
return {
|
isYaml, errorMessage
|
};
|
}
|
})
|
})
|
})
|
|
};
|
};
|
var cs = new Class();
|
exports(cs.MODELNAME,cs);
|
});
|