356 lines
17 KiB
HTML
356 lines
17 KiB
HTML
<div id="menu">
|
|
<menu :class="['menu',{'sidebar-hovered': isSidebarHovered}]">
|
|
<header class="top-header">
|
|
<nav class="navbar navbar-expand justify-content-between">
|
|
<div class="btn-toggle-menu" @click="onToggleMenu">
|
|
<i class="fa-solid fa-bars"></i>
|
|
</div>
|
|
<!-- <div class="position-relative search-bar d-lg-block d-none" data-bs-toggle="modal" data-bs-target="#searchModal">-->
|
|
<!-- <input class="form-control form-control-sm rounded-5 px-5" disabled type="search" placeholder="Search">-->
|
|
<!-- <span class="position-absolute ms-3 translate-middle-y start-0 top-50">-->
|
|
<!-- <i class="fa fa-search"></i>-->
|
|
<!-- </span>-->
|
|
<!-- </div>-->
|
|
<ul class="navbar-nav top-right-menu gap-2">
|
|
<li class="nav-item">
|
|
<a class="nav-link" style="font-size: 20px;">
|
|
<cn @click="updateSysLanguage('en')">En</cn>
|
|
<en @click="updateSysLanguage('cn')">中</en>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" v-if="Object.keys(themeConf).length > 0">
|
|
<i v-if="themeConf.used==='default'" class="fa-regular fa-moon" @click="updateThemeConf('dark')"></i>
|
|
<i v-else class="fa-regular fa-sun" @click="updateThemeConf('default')"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item" v-if="Object.keys(hardwareConf).length > 0 && hardwareConf.fac !== 'REC1'">
|
|
<a class="nav-link" style="font-size: 19px;" @click="changeWeb">
|
|
<i class="fa-solid fa-arrow-right-arrow-left"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<usb-option></usb-option>
|
|
</li>
|
|
<!-- <li class="nav-item">-->
|
|
<!-- <a class="nav-link" data-bs-toggle="offcanvas" href="#ThemeCustomizer"><i class="fa fa-gear"></i></a>-->
|
|
<!-- </li>-->
|
|
</ul>
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
<aside class="sidebar-wrapper" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
|
|
<div class="sidebar-header">
|
|
<div class="logo-icon lp-cursor-pointer" @click="onHrefDash">
|
|
<img src="assets/img/logo.png" width="78">
|
|
</div>
|
|
<div class="logo-name flex-grow-1">
|
|
<!-- <h5 class="mb-0 fw-bold">LinkPi</h5>-->
|
|
</div>
|
|
|
|
<div class="sidebar-close" @click="onCloseSidebar">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-nav" data-simplebar>
|
|
<ul class="metismenu" ref="metismenu">
|
|
<li>
|
|
<a href="dashboard.php">
|
|
<div class="parent-icon"><i class="fa fa-tachometer"></i></div>
|
|
<div class="menu-title"><cn>设备状态</cn><en>Dashboard</en></div>
|
|
</a>
|
|
</li>
|
|
<li class="menu-label"><cn>基本设置</cn><en>Basic</en></li>
|
|
<li>
|
|
<a href="decode.php">
|
|
<div class="parent-icon"><i class="fa fa-image"></i></div>
|
|
<div class="menu-title"><cn>解码设置</cn><en>Decode</en></div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="encode.php">
|
|
<div class="parent-icon"><i class="fa-brands fa-joomla"></i></div>
|
|
<div class="menu-title"><cn>编码设置</cn><en>Encode</en></div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="stream.php">
|
|
<div class="parent-icon"><i class="fa fa-upload"></i></div>
|
|
<div class="menu-title"><cn>串流输出</cn><en>Stream</en></div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="push.php">
|
|
<div class="parent-icon"><i class="fa-solid fa-fan"></i></div>
|
|
<div class="menu-title"><cn>直播推流</cn><en>Multiple Push</en></div>
|
|
</a>
|
|
</li>
|
|
<li v-if="Object.keys(hardwareConf).length > 0 && hardwareConf.function.videoOut">
|
|
<a href="output.php">
|
|
<div class="parent-icon"><i class="fa-solid fa-microchip"></i></div>
|
|
<div class="menu-title"><cn>接口输出</cn><en>Output</en></div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="sys.php">
|
|
<div class="parent-icon"><i class="fa-solid fa-gear"></i></div>
|
|
<div class="menu-title"><cn>系统设置</cn><en>System</en></div>
|
|
</a>
|
|
</li>
|
|
<li v-if="Object.keys(hardwareConf).length > 0 && (hardwareConf.function.overlay || hardwareConf.function.mix)" class="menu-label"><cn>视频特效</cn><en>Effect</en></li>
|
|
<li v-if="Object.keys(hardwareConf).length > 0 && hardwareConf.function.overlay">
|
|
<a href="overlay.php">
|
|
<div class="parent-icon"><i class="fa-solid fa-wand-magic-sparkles"></i></div>
|
|
<div class="menu-title"><cn>叠加特效</cn><en>Overlay</en></div>
|
|
</a>
|
|
</li>
|
|
<li v-if="Object.keys(hardwareConf).length > 0 && hardwareConf.function.mix">
|
|
<a href="mix.php">
|
|
<div class="parent-icon"><i class="fa-solid fa-chart-simple"></i></div>
|
|
<div class="menu-title"><cn>视频混合</cn><en>Video mix</en></div>
|
|
</a>
|
|
</li>
|
|
<li class="menu-label"><cn>其他设置</cn><en>Exte0nd</en></li>
|
|
<li>
|
|
<a href="javascript:;" class="has-arrow">
|
|
<div class="parent-icon"><i class="fa-solid fa-puzzle-piece ms-1 mb-1"></i></div>
|
|
<div class="menu-title"><cn>扩展功能</cn><en>Extend</en></div>
|
|
</a>
|
|
<ul class="ps-3">
|
|
<li v-if="Object.keys(hardwareConf).length > 0 && hardwareConf.function.ndi">
|
|
<a href="ndi.php">
|
|
<i class="fa-solid fa-desktop"></i>
|
|
<div class="menu-title"><cn>NDI解码</cn><en>NDI Decode</en></div>
|
|
</a>
|
|
</li>
|
|
<li v-if="Object.keys(hardwareConf).length > 0 && hardwareConf.function.record">
|
|
<a href="record.php">
|
|
<i class="fa-solid fa-folder-open"></i>
|
|
<div class="menu-title"><cn>文件录制</cn><en>Record</en></div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="player.php">
|
|
<i class="fa-solid fa-circle-play"></i>
|
|
<div class="menu-title"><cn>H5 播放器</cn><en>H5 Player</en></div>
|
|
</a>
|
|
</li>
|
|
<li v-if="Object.keys(hardwareConf).length > 0 && hardwareConf.function.intercom">
|
|
<a href="intercom.php">
|
|
<i class="fa-solid fa-headset"></i>
|
|
<div class="menu-title"><cn>集成通信</cn><en>Intercom</en></div>
|
|
</a>
|
|
</li>
|
|
<li v-if="Object.keys(hardwareConf).length > 0 && (hardwareConf.function.serialport || hardwareConf.function.button)">
|
|
<a href="uart.php">
|
|
<i class="fa-solid fa-link"></i>
|
|
<div class="menu-title"><cn>串口、按键</cn><en>Serial, Button</en></div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;" class="has-arrow">
|
|
<div class="parent-icon"><i class="fa-solid fa-gears"></i></div>
|
|
<div class="menu-title"><cn>高级设置</cn><en>Options</en></div>
|
|
</a>
|
|
<ul class="ps-3">
|
|
<li>
|
|
<a href="group.php">
|
|
<i class="fa-solid fa-server"></i>
|
|
<div class="menu-title"><cn>群组设置</cn><en>Group</en></div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="rproxy.php">
|
|
<i class="fa-solid fa-comments"></i>
|
|
<div class="menu-title"><cn>远程访问</cn><en>Reverse Proxy</en></div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="service.php">
|
|
<i class="fa-solid fa-cloud"></i>
|
|
<div class="menu-title"><cn>服务设置</cn><en>Reverse Proxy</en></div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;" class="has-arrow">
|
|
<div class="parent-icon"><i class="fa-solid fa-flask"></i></div>
|
|
<div class="menu-title"><cn>实验功能</cn><en>Laboratory</en></div>
|
|
</a>
|
|
<ul class="ps-3">
|
|
<li>
|
|
<a href="gb28181.php">
|
|
<i class="fa-solid fa-cloud"></i>
|
|
<div class="menu-title">GB28181</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="roi.php">
|
|
<i class="fa-solid fa-circle-user"></i>
|
|
<div class="menu-title">ROI</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="insta360.php">
|
|
<i class="fa-solid fa-camera"></i>
|
|
<div class="menu-title">Insta360 Link</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="onvif.php">
|
|
<i class="fa fa-video-camera"></i>
|
|
<div class="menu-title">Onvif PTZ</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="sync.php">
|
|
<i class="fa-solid fa-bars-staggered"></i>
|
|
<div class="menu-title"><cn>同步调节</cn><en>Synchronization</en></div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="colorKey.php">
|
|
<i class="fa fa-cut"></i>
|
|
<div class="menu-title"><cn>抠像</cn><en>ColorKey</en></div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sidebar-bottom">
|
|
<div class="d-flex align-items-center px-3 gap-3 w-100 h-100" data-bs-toggle="dropdown">
|
|
<div class="user-icon">
|
|
<i class="fa-regular fa-user"></i>
|
|
</div>
|
|
<div class="user-info">
|
|
<h5 class="mb-0 user-name">Admin</h5>
|
|
<p class="mb-0 user-designation"><cn>系统管理员</cn><en>administrator</en></p>
|
|
</div>
|
|
<div class="logout-icon" @click="onLogout">
|
|
<i class="fa-solid fa-right-from-bracket"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</menu>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import vue from "../assets/js/vue.build.js";
|
|
import { func,updateSysLanguage,confirm } from "../assets/js/lp.utils.js";
|
|
import { useThemeConf,useHardwareConf } from "../assets/js/vue.hooks.js"
|
|
import { ignoreCustomElementPlugin,usbOptionComponent } from "../assets/js/vue.helper.js"
|
|
import Metismenu from '../assets/plugins/metismenu/js/metisMenu.esm.js';
|
|
|
|
const { createApp,ref,watchEffect,watch,nextTick,onMounted } = vue;
|
|
const menu = createApp({
|
|
components:{
|
|
"usb-option": usbOptionComponent,
|
|
},
|
|
setup() {
|
|
const { themeConf,updateThemeConf } = useThemeConf();
|
|
const { hardwareConf } = useHardwareConf();
|
|
|
|
const state = {
|
|
metismenu: ref(null),
|
|
isMenuToggled : ref(false),
|
|
isSidebarHovered: ref(false),
|
|
showFormatModal: ref(false)
|
|
}
|
|
|
|
const onLogout = () => {
|
|
func("/login/onLogout")
|
|
.then((ret)=>{
|
|
if(ret.status === "success")
|
|
location.href = "/";
|
|
});
|
|
}
|
|
|
|
const unwatch = watch(hardwareConf,()=>{
|
|
if(Object.keys(hardwareConf).length > 0) {
|
|
nextTick(()=>{
|
|
let as = document.querySelectorAll(".sidebar-wrapper .metismenu li a");
|
|
for (let i = 0; i < as.length; i++) {
|
|
if (as[i].href === window.location.href) {
|
|
as[i].classList.add("active");
|
|
let parent = as[i].parentElement;
|
|
while (parent && parent.tagName === "LI") {
|
|
parent.classList.add("mm-active");
|
|
parent = parent.parentElement;
|
|
if (parent && parent.tagName === "UL")
|
|
parent.classList.add("mm-show");
|
|
parent = parent.parentElement;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
unwatch();
|
|
})
|
|
}
|
|
})
|
|
|
|
watchEffect(()=>{
|
|
const body = document.querySelector('body');
|
|
if(state.isMenuToggled.value)
|
|
body.classList.add('toggled');
|
|
else
|
|
body.classList.remove('toggled');
|
|
})
|
|
|
|
const onHrefDash = () => {
|
|
location.href="/dashboard.php";
|
|
}
|
|
|
|
const onToggleMenu = () => {
|
|
state.isMenuToggled.value = !state.isMenuToggled.value;
|
|
}
|
|
|
|
const onMouseEnter = () => {
|
|
if(state.isMenuToggled.value)
|
|
state.isSidebarHovered.value = true;
|
|
};
|
|
|
|
const onMouseLeave = () => {
|
|
if(state.isSidebarHovered.value)
|
|
state.isSidebarHovered.value = false;
|
|
};
|
|
|
|
const onCloseSidebar = () => {
|
|
state.isMenuToggled.value = false;
|
|
}
|
|
|
|
const changeWeb = () => {
|
|
confirm({
|
|
title: '<cn>切换版本</cn><en>Switch Web</en>',
|
|
content: '<cn>是否切换至经典版页面,并重新启动？</cn><en>Whether to switch to the classic version and restart?</en>',
|
|
buttons: {
|
|
ok: {
|
|
text: "<cn>切换</cn><en>Switch</en>",
|
|
btnClass: 'btn-primary',
|
|
keys: ['enter'],
|
|
action: () => func("/system/changeWebVersion","classic")
|
|
},
|
|
cancel: {
|
|
text: "<cn>取消</cn><en>Cancel</en>"
|
|
}
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
onMounted(()=>{
|
|
new Metismenu(state.metismenu.value);
|
|
});
|
|
|
|
return {...state,hardwareConf,themeConf,updateThemeConf,onHrefDash,onLogout,onToggleMenu,
|
|
onMouseEnter,onMouseLeave,onCloseSidebar,updateSysLanguage,changeWeb}
|
|
}
|
|
});
|
|
menu.use(ignoreCustomElementPlugin);
|
|
menu.mount('#menu');
|
|
</script> |