164 lines
6.4 KiB
HTML
164 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>MetaKit</title>
|
||
<link rel="stylesheet" href="../res/zui/css/zui.min.css">
|
||
<link rel="stylesheet" href="../res/css/zui-theme.css">
|
||
<link rel="stylesheet" href="../res/css/red-kit.css">
|
||
<style>
|
||
|
||
</style>
|
||
</head>
|
||
<body id="home">
|
||
<div class="container-fluid">
|
||
<row>
|
||
<div class="col-md-12" id="top">
|
||
<ul class="nav nav-tabs">
|
||
<!--item in pages-->
|
||
<li v-for="item in pages" @click="loadMain(item)" :class="{active:item.name==pageId}">
|
||
<a data-tab href="#" v-text="item.name"></a>
|
||
</li>
|
||
|
||
<li class="pull-right" style="padding-top: 10px">
|
||
<select v-model="sysPlat" class="form-control" style="border: 0;background-color: #404a53;color: #fff;">
|
||
<option v-for="item in sysPlats" :value="item" v-text="item.name"></option>
|
||
</select>
|
||
</li>
|
||
|
||
<li class="pull-right" style="padding-top: 10px">
|
||
<a style="padding: 6px 15px;border: 0;background-color: #404a53;color: #fff;">
|
||
<i class="icon icon-user"></i> root
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div id="mainDiv">
|
||
<div class="col-md-1" id="left">
|
||
<nav class="menu" data-ride="menu">
|
||
<ul class="nav nav-primary">
|
||
<li class="active show nav-parent" style="width: 100%;">
|
||
<a href="javascript:;"><i class="icon icon-tasks"></i> <span v-text="pageId"></span></a>
|
||
<ul class="nav">
|
||
<!-- item in menus -->
|
||
<li v-for="item in menus" @click="loadPage(item)" :class="{active:page.url==item.url}">
|
||
<a href="javascript:;"><i :class="['icon', item.icon ? item.icon : 'icon-circle-blank']"></i> <span v-text="item.name"></span></a>
|
||
</li>
|
||
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
<div class="col-md-11">
|
||
<!--<div style="height: 40px;background-color: #fff;"></div>-->
|
||
<!-- load main body to here -->
|
||
<div id="main"></div>
|
||
</div>
|
||
</div>
|
||
</row>
|
||
</div>
|
||
|
||
<script src="../res/zui/lib/jquery/jquery.js"></script>
|
||
<script src="../res/zui/js/zui.js"></script>
|
||
<script src="../res/zui/lib/sortable/zui.sortable.js"></script>
|
||
<script src="../res/js/red.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
||
<script>
|
||
var vm = new Vue({
|
||
el: ".container-fluid",
|
||
data: {
|
||
sysPlat: red.getData("sysPlat"),
|
||
sysPlats: red.getData("sysPlats"),
|
||
pages: [
|
||
{name: "DDL", url: "/qtask/ddl.html"},
|
||
{name: "MetaData", url: "/meta", nodes: [
|
||
/*{url:"/metadata/metatable/list.html", name:"TableList"},*/
|
||
{url:"/metadata/metatable/metaTable.html", name:"MetaTable"},
|
||
{url:"/metadata/metaLink.html", name:"MetaLink"},
|
||
{url:"/metadata/metaService.html", name:"MetaService"},
|
||
{url:"/metadata/dataList.html", name:"数据查询"},
|
||
]
|
||
},
|
||
{
|
||
name: "QTask", url: "/qtask", nodes: [
|
||
{url:"/qtask/list.html", name:"QTask", icon:"icon-beaker"},
|
||
{url:"/qtask/debug.html", name:"QTask-Debug", icon:"icon-bug"},
|
||
]
|
||
},
|
||
{
|
||
name: "业务平台", url: "/qtask", nodes: [
|
||
{url:"/plat/index.html", name:"业务平台", icon:"icon-server"},
|
||
{url:"/plat/dev.html", name:"dev", icon:"icon-beaker"},
|
||
]
|
||
},
|
||
{
|
||
name: "数据平台", url: "/plat/db.html", nodes: [
|
||
{url:"/plat/db.html", name:"数据中心", icon: "icon-database"},
|
||
]
|
||
},
|
||
|
||
],
|
||
menus: red.getData("menus", [
|
||
{url:"/qtask/plat.html", name:"业务平台"},
|
||
{url:"/qtask/list.html", name:"QTask"},
|
||
{url:"/qtask/debug.html", name:"QT-Debug"},
|
||
]),
|
||
page: red.getData("page", {url:"/qtask/list.html", name:"QTask"}),
|
||
pageId: red.getData("pageId", "QTask")
|
||
},
|
||
watch: {
|
||
page: function () {
|
||
//page main chenged，up all cache for munus/pageId/page data
|
||
red.setData("page", this.page);
|
||
red.setData("menus", this.menus);
|
||
red.setData("pageId", this.pageId);
|
||
},
|
||
sysPlat: function (v) {
|
||
red.setData("sysPlat", v);
|
||
this.loadPage();
|
||
}
|
||
},
|
||
methods: {
|
||
loadPage: function (page) {
|
||
if (page && this.page.url == page.url) {
|
||
return false;
|
||
}
|
||
page = page || this.page;
|
||
this.page = page;
|
||
$("#main").load(page.url);
|
||
},
|
||
loadMain: function (item) {
|
||
this.menus = item.nodes || [item];
|
||
this.pageId = item.name;
|
||
}
|
||
},
|
||
mounted: function () {
|
||
//绑定事件
|
||
$('.menu .nav').on('click', 'li:not(.nav-parent) > a', function() {
|
||
var $this = $(this);
|
||
$('.menu .nav .active').removeClass('active');
|
||
$this.closest('li').addClass('active');
|
||
$this.closest('.nav-parent').addClass('active');
|
||
});
|
||
|
||
$("#main").load(this.page.url);
|
||
//this.loadPage(this.page);
|
||
|
||
//监听浏览器窗口大小变化
|
||
function autoLeftHeight() {
|
||
var h = document.documentElement.clientHeight || document.body.clientHeight;
|
||
$("#left").attr("style", "height:" + (h - 50) + "px");
|
||
$("#main").attr("style", "height:" + (h - 50) + "px; overflow: auto;");
|
||
|
||
}
|
||
autoLeftHeight();
|
||
$(window).resize(function () {
|
||
autoLeftHeight();
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |