linkpi_firmware_history/rootfs/link/webflex/public/menu.inc

459 lines
23 KiB
PHP
Raw Permalink Normal View History

2024-02-15 22:07:50 +01:00
<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>
2024-02-15 22:07:54 +01:00
<div class="position-relative search-bar d-lg-block d-none" @click="onShowSearchModal">
<input class="form-control form-control-sm rounded-5 px-5 lp-cursor-pointer" type="search" :placeholder="placeholderVal" readonly>
<span class="position-absolute ms-3 translate-middle-y start-0 top-50">
<i class="fa fa-search"></i>
</span>
</div>
2024-02-15 22:07:50 +01:00
<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>
2024-02-15 22:07:54 +01:00
<li class="nav-item" v-if="Object.keys(hardwareConf).length > 0 && (hardwareConf.fac !== 'REC1' || hardwareConf.fac !== 'ENC8')">
2024-02-15 22:07:50 +01:00
<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>
2024-02-15 22:07:54 +01:00
<div class="menu-title"><cn>直播推流</cn><en>Push</en></div>
2024-02-15 22:07:50 +01:00
</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>
2024-02-15 22:07:54 +01:00
<li class="menu-label"><cn>其他设置</cn><en>OTHER</en></li>
2024-02-15 22:07:50 +01:00
<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>
2024-02-15 22:07:54 +01:00
<div class="menu-title"><cn>服务设置</cn><en>Service</en></div>
2024-02-15 22:07:50 +01:00
</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>
2024-02-15 22:07:54 +01:00
<div class="menu-title"><cn>GB28181</cn><en>GB28181</en></div>
2024-02-15 22:07:50 +01:00
</a>
</li>
<li>
<a href="roi.php">
<i class="fa-solid fa-circle-user"></i>
2024-02-15 22:07:54 +01:00
<div class="menu-title"><cn>ROI</cn><en>ROI</en></div>
2024-02-15 22:07:50 +01:00
</a>
</li>
<li>
<a href="insta360.php">
<i class="fa-solid fa-camera"></i>
2024-02-15 22:07:54 +01:00
<div class="menu-title"><cn>Insta360 Link</cn><en>Insta360 Link</en></div>
2024-02-15 22:07:50 +01:00
</a>
</li>
<li>
<a href="onvif.php">
<i class="fa fa-video-camera"></i>
2024-02-15 22:07:54 +01:00
<div class="menu-title"><cn>Onvif PTZ</cn><en>Onvif PTZ</en></div>
2024-02-15 22:07:50 +01:00
</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>
2024-02-15 22:07:54 +01:00
<div class="modal fade" tabindex="-1" aria-hidden="true" ref="modal">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" style="z-index: 99999">
<div class="modal-content">
<div class="modal-header gap-2">
<div class="position-relative popup-search w-100">
<input class="form-control form-control-lg ps-5 border border-2 search-input" type="text" v-model.trim="searchVal">
<span class="position-absolute ms-3 translate-middle-y start-0 top-50">
<i class="fa fa-search search-bar-icon"></i>
</span>
</div>
</div>
<div class="modal-body" style="height: 350px">
<div data-simplebar>
<div v-if="searchRes.length > 0" class="search-list">
<div class="mb-4" v-for="(item,index) in searchRes" :key="index">
<div class="d-flex">
<div class="search-item-icon"><i :class="['font-14',item.icon]"></i></div>
<span class="mb-2 ms-2 font-16">{{item.name}}</span>
</div>
<div class="list-group">
<a v-for="(itm,idx) in item.filter" :key="idx" @click="onRedirect(item.url,itm)" class="list-group-item list-group-item-action align-items-center d-flex gap-2 lp-cursor-pointer search-item-option">{{itm}}</a>
</div>
</div>
</div>
<div v-else class="h-100 lp-align-center">
<div>
<div class="row">
<empty-box></empty-box>
</div>
<div class="row mt-3">
<div class="text-center search-tip-text">
<cn>请输入要检索的标题关键字</cn>
<en>Please enter the keyword you want to search</en>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-backdrop show" @click="onHideSearchModal"></div>
</div>
2024-02-15 22:07:50 +01:00
</menu>
</div>
2024-02-15 22:07:54 +01:00
<script src="../assets/plugins/passive/passive.events.min.js"></script>
2024-02-15 22:07:50 +01:00
<script type="module">
import vue from "../assets/js/vue.build.js";
2024-02-15 22:07:54 +01:00
import Metismenu from '../assets/plugins/metismenu/js/metisMenu.esm.js';
import mutationObserver from "../assets/plugins/polyfill/mutationobserver.esm.js";
import { func,updateSysLanguage,confirm,isEmpty,clearReactiveArray } from "../assets/js/lp.utils.js";
2024-02-15 22:07:50 +01:00
import { useThemeConf,useHardwareConf } from "../assets/js/vue.hooks.js"
import { ignoreCustomElementPlugin,usbOptionComponent } from "../assets/js/vue.helper.js"
2024-02-15 22:07:54 +01:00
import { emptyBoxFlagComponent } from "../assets/js/vue.flags.js"
import { md5 } from "../assets/plugins/md5/js.md5.esm.js";
2024-02-15 22:07:50 +01:00
2024-02-15 22:07:54 +01:00
const { createApp,ref,reactive,watchEffect,watch,nextTick,onMounted } = vue;
2024-02-15 22:07:50 +01:00
const menu = createApp({
components:{
"usb-option": usbOptionComponent,
2024-02-15 22:07:54 +01:00
"empty-box": emptyBoxFlagComponent
2024-02-15 22:07:50 +01:00
},
setup() {
const { themeConf,updateThemeConf } = useThemeConf();
const { hardwareConf } = useHardwareConf();
const state = {
metismenu: ref(null),
isMenuToggled : ref(false),
isSidebarHovered: ref(false),
2024-02-15 22:07:54 +01:00
showFormatModal: ref(false),
modal: ref(null),
bsModal: ref(null),
searchVal: ref(""),
searchRes: reactive([]),
placeholderVal: ref("关键字")
2024-02-15 22:07:50 +01:00
}
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();
})
}
})
2024-02-15 22:07:54 +01:00
watch(state.searchVal, () => {
if (isEmpty(state.searchVal.value)) {
clearReactiveArray(state.searchRes);
return;
}
const html = document.querySelector("html");
const lang = html.getAttribute('data-bs-language');
const param = {"lang": lang, "filter": state.searchVal.value};
func("/root/filterKeywords", param).then(result => {
clearReactiveArray(state.searchRes);
state.searchRes.push(...result.data);
});
});
watch(state.isMenuToggled,() => {
2024-02-15 22:07:50 +01:00
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>"
}
}
});
}
2024-02-15 22:07:54 +01:00
const onShowSearchModal = () => {
state.bsModal.value.show();
const ele = document.querySelector("body > .modal-backdrop");
ele.remove();
}
const onHideSearchModal = () => {
state.bsModal.value.hide();
}
const onRedirect = (url,data) => {
location.href = url+"?filter="+md5(data);
}
2024-02-15 22:07:50 +01:00
onMounted(()=>{
new Metismenu(state.metismenu.value);
2024-02-15 22:07:54 +01:00
state.bsModal.value = new bootstrap.Modal(state.modal.value);
const update = () => {
const lang = html.getAttribute('data-bs-language');
if(lang === "cn")
state.placeholderVal.value = "关键字";
else
state.placeholderVal.value = "Search";
}
const html = document.querySelector('html');
update();
const observer = new mutationObserver(() => {
update();
});
const config = {
attributes: true,
attributeFilter: ["data-bs-language"],
subtree: false
};
observer.observe(html, config);
2024-02-15 22:07:50 +01:00
});
return {...state,hardwareConf,themeConf,updateThemeConf,onHrefDash,onLogout,onToggleMenu,
2024-02-15 22:07:54 +01:00
onMouseEnter,onMouseLeave,onCloseSidebar,updateSysLanguage,changeWeb,onShowSearchModal,
onHideSearchModal,onRedirect}
2024-02-15 22:07:50 +01:00
}
});
menu.use(ignoreCustomElementPlugin);
menu.mount('#menu');
</script>