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.
iot/projects/WebMVC/wwwroot/components/shared/layout.html

404 lines
24 KiB

<template>
<div class="wrapper">
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<router-link to="/" :class="'nav-link'+(area==='default'?' active':'')">首页</router-link>
</li>
<li class="nav-item d-none d-sm-inline-block">
<router-link to="/routes/admin/index.html?area=admin" :class="'nav-link'+(area==='admin'?' active':'')">管理</router-link>
</li>
</ul>
<ul class="navbar-nav ml-auto" v-if="data.username">
<li class="nav-item">
<router-link class="nav-link" to="/routes/user.html">{{data.username}}</router-link>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:;" @click="logout">退出</a>
</li>
</ul>
<ul class="navbar-nav ml-auto" v-else>
<!--<li class="nav-item">
<a class="nav-link" href="/routes/register.html">注册</a>
</li>-->
<li class="nav-item">
<router-link class="nav-link" to="/routes/login.html">登录</router-link>
</li>
</ul>
</nav>
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<a class="brand-link" href="/">
<img class="brand-image img-circle elevation-3" :src="data.logo" />
<span class="brand-text font-weight-light">{{data.name}}</span>
</a>
<div class="sidebar" v-if="data.username">
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false" v-if="area==='default'">
<li class="nav-item">
<router-link to="/" :class="getPageClass('/','/routes/iot/product.html','/routes/iot/device.html')">
<i class="far fa-circle nav-icon"></i>
<p>
首页
</p>
</router-link>
</li>
<li class="nav-item">
<router-link to="/routes/iot/nodes.html" :class="getPageClass('/routes/iot/nodes.html','/routes/iot/node.html')">
<i class="far fa-circle nav-icon"></i>
<p>
节点
</p>
</router-link>
</li>
</ul>
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false" v-if="area==='admin'">
<li class="nav-item">
<router-link :key="$route.fullPath" to="/routes/admin/index.html?area=admin" :class="getPageClass('/routes/admin/index.html')">
<i class="far fa-circle nav-icon"></i>
<p>
首页
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-Setting')">
<router-link :key="$route.fullPath" to="/routes/admin/setting/index.html?area=admin&entity=Setting" :class="getLinkClass('Setting')">
<i class="far fa-circle nav-icon"></i>
<p>
配置管理
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-User')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=User" :class="getLinkClass('User')">
<i class="far fa-circle nav-icon"></i>
<p>
用户管理
</p>
</router-link>
</li>
<!--角色权限-->
<li :class="getGroupLiClass('Role','Permission')" v-if="hasPermission('Read-Role')||hasPermission('Read-Permission')">
<a href="javascript:;" :class="getGroupLinkClass('Role','Permission')" @click.stop="toggle($event)">
<i class="fa fa-folder nav-icon"></i>
<p>角色权限<i class="right fas fa-angle-left"></i></p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item" v-if="hasPermission('Read-Role')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=Role" :class="getLinkClass('Role')">
<i class="far fa-circle nav-icon"></i>
<p>
角色管理
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-Permission')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=Permission" :class="getLinkClass('Permission')">
<i class="far fa-circle nav-icon"></i>
<p>
权限管理
</p>
</router-link>
</li>
</ul>
</li>
<!--产品-->
<li :class="getGroupLiClass('Product','Api','Parameter')" v-if="hasPermission('Read-Product')||hasPermission('Read-Api')||hasPermission('Read-Parameter')">
<a href="javascript:;" :class="getGroupLinkClass('Product','Api','Parameter')" @click.stop="toggle($event)">
<i class="fa fa-folder nav-icon"></i>
<p>产品管理<i class="right fas fa-angle-left"></i></p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item" v-if="hasPermission('Read-Product')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=Product" :class="getLinkClass('Product')">
<i class="far fa-circle nav-icon"></i>
<p>
产品管理
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-Api')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=Api" :class="getLinkClass('Api')">
<i class="far fa-circle nav-icon"></i>
<p>
接口管理
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-Parameter')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=Parameter" :class="getLinkClass('Parameter')">
<i class="far fa-circle nav-icon"></i>
<p>
参数管理
</p>
</router-link>
</li>
</ul>
</li>
<!--节点-->
<li :class="getGroupLiClass('Node','Device','Data','Command')" v-if="hasPermission('Read-Node')||hasPermission('Read-Device')||hasPermission('Read-Data')||hasPermission('Read-Command')">
<a href="javascript:;" :class="getGroupLinkClass('Node','Device','Data','Command')" @click.stop="toggle($event)">
<i class="fa fa-folder nav-icon"></i>
<p>节点管理<i class="right fas fa-angle-left"></i></p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item" v-if="hasPermission('Read-Node')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=Node" :class="getLinkClass('Node')">
<i class="far fa-circle nav-icon"></i>
<p>
节点管理
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-Device')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=Device" :class="getLinkClass('Device')">
<i class="far fa-circle nav-icon"></i>
<p>
设备管理
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-Data')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=Data" :class="getLinkClass('Data')">
<i class="far fa-circle nav-icon"></i>
<p>
数据管理
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-Command')">
<router-link :key="$route.fullPath" to="/routes/admin/command/index.html?area=admin&entity=Command" :class="getLinkClass('Command')">
<i class="far fa-circle nav-icon"></i>
<p>
命令管理
</p>
</router-link>
</li>
</ul>
</li>
<!--节点场景-->
<li :class="getGroupLiClass('Scene','SceneCommand','SceneTimer','SceneTigger')" v-if="hasPermission('Read-Scene')||hasPermission('Read-SceneCommand')||hasPermission('Read-SceneTimer')||hasPermission('Read-SceneTigger')">
<a href="javascript:;" :class="getGroupLinkClass('Scene','SceneCommand','SceneTimer','SceneTigger')" @click.stop="toggle($event)">
<i class="fa fa-folder nav-icon"></i>
<p>节点场景<i class="right fas fa-angle-left"></i></p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item" v-if="hasPermission('Read-Scene')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=Scene" :class="getLinkClass('Scene')">
<i class="far fa-circle nav-icon"></i>
<p>
场景管理
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-SceneCommand')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=SceneCommand" :class="getLinkClass('SceneCommand')">
<i class="far fa-circle nav-icon"></i>
<p>
场景命令管理
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-SceneTimer')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=SceneTimer" :class="getLinkClass('SceneTimer')">
<i class="far fa-circle nav-icon"></i>
<p>
定时器管理
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-SceneTigger')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=SceneTigger" :class="getLinkClass('SceneTigger')">
<i class="far fa-circle nav-icon"></i>
<p>
触发器管理
</p>
</router-link>
</li>
</ul>
</li>
<!--平台场景-->
<li :class="getGroupLiClass('GlobalScene','GlobalSceneCommand','GlobalSceneTimer','GlobalSceneTigger')" v-if="hasPermission('Read-Scene')||hasPermission('Read-SceneCommand')||hasPermission('Read-SceneTimer')||hasPermission('Read-SceneTigger')">
<a href="javascript:;" :class="getGroupLinkClass('GlobalScene','GlobalSceneCommand','GlobalSceneTimer','GlobalSceneTigger')" @click.stop="toggle($event)">
<i class="fa fa-folder nav-icon"></i>
<p>平台场景<i class="right fas fa-angle-left"></i></p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item" v-if="hasPermission('Read-Scene')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=Scene&model=GlobalScene" :class="getLinkClass('GlobalScene')">
<i class="far fa-circle nav-icon"></i>
<p>
场景管理
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-SceneCommand')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=SceneCommand&model=GlobalSceneCommand" :class="getLinkClass('GlobalSceneCommand')">
<i class="far fa-circle nav-icon"></i>
<p>
场景命令管理
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-SceneTimer')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=SceneTimer&model=GlobalSceneTimer" :class="getLinkClass('GlobalSceneTimer')">
<i class="far fa-circle nav-icon"></i>
<p>
定时器管理
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-SceneTigger')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=SceneTigger&model=GlobalSceneTigger" :class="getLinkClass('GlobalSceneTigger')">
<i class="far fa-circle nav-icon"></i>
<p>
触发器管理
</p>
</router-link>
</li>
</ul>
</li>
<li class="nav-item" v-if="hasPermission('Read-NodeCategory')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=NodeCategory" :class="getLinkClass('NodeCategory')">
<i class="far fa-circle nav-icon"></i>
<p>
节点分类
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-Organ')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=Organ" :class="getLinkClass('Organ')">
<i class="far fa-circle nav-icon"></i>
<p>
机构管理
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-LiveRecord')">
<router-link :key="$route.fullPath" to="/routes/shared/index.html?area=admin&entity=LiveRecord" :class="getLinkClass('LiveRecord')">
<i class="far fa-circle nav-icon"></i>
<p>
回放管理
</p>
</router-link>
</li>
<li class="nav-item" v-if="hasPermission('Read-LiveRecord')">
<a class="nav-link" href="//JobServer/job">
<i class="far fa-circle nav-icon"></i>
<p>
定时任务
</p>
</a>
</li>
</ul>
</nav>
</div>
</aside>
<div class="content-wrapper">
<div class="content-header" v-if="data.bread">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1>{{data.name}}</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="@Url.Action(" Index","Home")">首页</a></li>
@RenderSection("bread", false)
<li class="breadcrumb-item active">@HtmlTitle</li>
</ol>
</div>
</div>
</div>
</div>
<section class="content">
<div class="container-fluid">
<slot></slot>
</div>
</section>
<!--<a id="back-to-top" href="#" class="btn btn-primary back-to-top" role="button" aria-label="Scroll to top">
<i class="fas fa-chevron-up"></i>
</a>-->
</div>
<footer class="main-footer">
<strong>
{{data.copyright.replace('{0}',new Date().getFullYear())}}
</strong>
<div class="float-right d-none d-sm-inline-block">
<b>version: {{data.version}}</b>
</div>
</footer>
</div>
</template>
<script>
export default {
data: function () {
return {
area: this.$route.query.area || 'default',
activeIndex: 1,
openKeys: ['sub1'],
url: config.baseUrl + '/IoTCenter/api/v1/site/getSite',
data: {
logo: '/images/logo.png',
copyright: '',
version: '',
username: '',
permissions: []
}
}
},
computed: {
model: function () {
return this.$route.query.model || this.$route.query.entity;
}
},
mounted: function () {
document.querySelector('title').innerText = this.$attrs.title;
var vm = this;
axios.post(this.url).then(function (response) {
vm.data = response.data;
store.commit('setState', { key: 'permissions', value: response.data.permissions });
}).catch(function (error) {
console.log(error);
});
},
methods: {
logout() {
store.commit('logout');
setTimeout(function () {
router.push('/routes/login.html');
}, 1000);
},
toggle: function (e) {
$(e.currentTarget).parent('li').toggleClass('menu-open');
},
hasPermission(permission) {
return Enumerable.from(this.data.permissions).any(o => o == permission);
},
getPageClass() {
var cls = 'nav-link';
for (var i = 0; i < arguments.length; i++) {
if (this.$route.path == arguments[i]) {
return cls + ' active';
}
}
return cls;
},
getLinkClass(model) {
var cls = 'nav-link';
if (this.model === model) {
return cls + ' active';
}
return cls;
},
getGroupLiClass() {
return 'nav-item has-treeview' + (Enumerable.from(arguments).any(o => o === this.model) ? ' menu-open' : '');
},
getGroupLinkClass() {
return 'nav-link' + (Enumerable.from(arguments).any(o => o === this.model) ? ' active' : '');
}
}
}
</script>