.
This commit is contained in:
164
root/index.html
Normal file
164
root/index.html
Normal file
@@ -0,0 +1,164 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user