ljydlv
/
video_ca
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改成管理系统

This commit is contained in:
lj124 2026-04-17 19:23:49 +08:00
parent 85b31316fd
commit a9d50669a8
12 changed files with 339 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/main.css
View File

@ -1,9 +1,8 @@
@import './base.css';
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
width: 100%;
min-height: 100vh;
font-weight: normal;
}
@ -21,15 +20,4 @@ a,
}
}
@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}

249
src/layout/Layout.vue Normal file
View File

@ -0,0 +1,249 @@
<template>
<el-container class="layout-container">
<el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar">
<div class="logo">
<img src="@/assets/img/logo.svg" alt="logo" />
<span v-if="!isCollapse">综合系统</span>
</div>
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
router
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409eff"
>
<template v-for="(item, index) in menuList" :key="index">
<el-menu-item v-if="item.show" :index="item.path">
<el-icon><component :is="item.icon" /></el-icon>
<template #title>{{ item.title }}</template>
</el-menu-item>
</template>
</el-menu>
</el-aside>
<el-container class="main-container">
<el-header class="header">
<div class="header-left">
<el-icon class="collapse-btn" @click="toggleCollapse">
<Fold v-if="!isCollapse" />
<Expand v-else />
</el-icon>
</div>
<div class="header-right">
<el-dropdown @command="handleCommand">
<span class="user-info">
<el-icon><User /></el-icon>
{{ username }}
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="projectSelect">项目选择</el-dropdown-item>
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</el-header>
<el-main class="main-content">
<router-view />
</el-main>
</el-container>
</el-container>
</template>
<script setup>
import { ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
Fold,
Expand,
User,
ArrowDown,
VideoCamera,
Monitor,
Setting,
Document,
Tools,
ChatDotRound,
UserFilled,
OfficeBuilding,
Connection,
} from "@element-plus/icons-vue";
const router = useRouter();
const route = useRoute();
const isCollapse = ref(false);
const username = ref(localStorage.getItem("username") || "用户");
const activeMenu = computed(() => route.path);
const menuList = ref([
{
path: "/videoList",
title: "视频列表",
icon: VideoCamera,
show: localStorage.getItem("video_func") === "true",
},
{
path: "/device",
title: "设备管理",
icon: Monitor,
show: localStorage.getItem("device_func") === "true",
},
{
path: "/cid",
title: "集成部署",
icon: Setting,
show: localStorage.getItem("cid_func") === "true",
},
{
path: "/cidlog",
title: "部署日志",
icon: Document,
show: localStorage.getItem("cid_func") === "true",
},
{
path: "/file",
title: "文件",
icon: Document,
show: localStorage.getItem("role") === "admin",
},
{
path: "/shell",
title: "执行命令",
icon: Tools,
show: localStorage.getItem("role") === "admin",
},
{
path: "/user",
title: "用户",
icon: UserFilled,
show: true,
},
{
path: "/chat",
title: "聊天",
icon: ChatDotRound,
show: true,
},
{
path: "/group",
title: "群组",
icon: OfficeBuilding,
show: true,
},
{
path: "/im",
title: "即时通讯",
icon: Connection,
show: true,
},
]);
const toggleCollapse = () => {
isCollapse.value = !isCollapse.value;
};
const handleCommand = (command) => {
if (command === "logout") {
if (confirm("确定退出登录吗？")) {
localStorage.clear();
router.push("/login");
}
} else if (command === "projectSelect") {
router.push("/projectSelect");
}
};
</script>
<style scoped>
.layout-container {
height: 100vh;
width: 100%;
}
.sidebar {
background-color: #304156;
transition: width 0.3s;
overflow-x: hidden;
}
.logo {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: #263445;
color: #fff;
font-size: 18px;
font-weight: bold;
}
.logo img {
width: 32px;
height: 32px;
margin-right: 10px;
}
.logo span {
white-space: nowrap;
}
.main-container {
display: flex;
flex-direction: column;
background-color: #f0f2f5;
}
.header {
background-color: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.header-left {
display: flex;
align-items: center;
}
.collapse-btn {
font-size: 20px;
cursor: pointer;
color: #606266;
}
.collapse-btn:hover {
color: #409eff;
}
.header-right {
display: flex;
align-items: center;
}
.user-info {
display: flex;
align-items: center;
cursor: pointer;
color: #606266;
}
.user-info:hover {
color: #409eff;
}
.main-content {
flex: 1;
overflow-y: auto;
padding: 20px;
background-color: #f0f2f5;
}
.el-menu {
border-right: none;
}
</style>

138
src/router/index.js
View File

@ -1,5 +1,6 @@
import {createWebHistory, createRouter} from "vue-router";
import Layout from "@/layout/Layout.vue";
import LoginVue from "@/views/Login.vue";
import VideoVue from "@/views/Video.vue";
import VideoListVue from "@/views/VideoList.vue";
@ -25,78 +26,81 @@ const routes = [
component: LoginVue
},
{
path: '/video',
name: 'Video',
component: VideoVue
},
{
path: '/videoList',
name: 'VideoList',
component: VideoListVue
},
{
path: '/device',
name: 'Device',
component: DeviceListVue
},
{
path: '/deviceRealVP',
name: 'DeviceRealVP',
component: DeviceRealVP
},
{
path: '/im',
name: 'Im',
component: ImVue
},
{
path: '/user',
name: 'User',
component: UserListVue
},
{
path: '/cid',
name: 'CID',
component: CIDListVue
},
{
path: "/group",
name: "Group",
component: Group
},
{
path: '/cidlog',
name: 'CIDLog',
component: CIDLog
},
{
path:"/chat",
name:"chat",
component:Chat
},
{
path:"/file",
name:"file",
component:File
},
{
path:"/shell",
name:"shell",
component:Shell
path: '/',
component: Layout,
redirect: '/user',
children: [
{
path: 'video',
name: 'Video',
component: VideoVue
},
{
path: 'videoList',
name: 'VideoList',
component: VideoListVue
},
{
path: 'device',
name: 'Device',
component: DeviceListVue
},
{
path: 'deviceRealVP',
name: 'DeviceRealVP',
component: DeviceRealVP
},
{
path: 'im',
name: 'Im',
component: ImVue
},
{
path: 'user',
name: 'User',
component: UserListVue
},
{
path: 'cid',
name: 'CID',
component: CIDListVue
},
{
path: 'group',
name: 'Group',
component: Group
},
{
path: 'cidlog',
name: 'CIDLog',
component: CIDLog
},
{
path: 'chat',
name: 'chat',
component: Chat
},
{
path: 'file',
name: 'file',
component: File
},
{
path: 'shell',
name: 'shell',
component: Shell
},
{
path: 'projectSelect',
name: 'projectSelect',
component: projectSelect
}
]
},
{
path: '/callback',
name: 'callback',
component: callback
},
{
path: '/projectSelect',
name: 'projectSelect',
component: projectSelect
},
{
path: '/',
redirect: '/login'
}
]

5
src/views/CIDList.vue
View File

@ -7,7 +7,7 @@ import { addCIDService } from "@/api/cid.js";
import { deleteCIDService } from "@/api/cid.js";
import { updateCIDService,getCIDRuningListService } from "@/api/cid.js";
import router from "@/router/index.js";
import Menu from "@/views/Menu.vue";
import {ElMessage, ElLoading} from "element-plus";
@ -301,8 +301,7 @@ export default {
<template>
<div>
<Menu></Menu>
<el-container style="height: 700px; border: 1px solid #eee">
<el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
<el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
>集成部署项目</el-header
>

5
src/views/CIDLog.vue
View File

@ -7,7 +7,7 @@ import { addCIDService } from "@/api/cid.js";
import { deleteCIDService } from "@/api/cid.js";
import { updateCIDService } from "@/api/cid.js";
import router from "@/router/index.js";
import Menu from "@/views/Menu.vue";
export default {
data() {
@ -191,8 +191,7 @@ export default {
<template>
<div>
<Menu></Menu>
<el-container style="height: 700px; border: 1px solid #eee">
<el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
<el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
>集成部署项目日志{{ tokenData.id }}</el-header
>

5
src/views/DeviceList.vue
View File

@ -8,7 +8,7 @@ import { deleteDeviceService } from "@/api/device.js";
import { updateDeviceService } from "@/api/device.js";
import router from "@/router/index.js";
import { ElMessage } from 'element-plus';
import Menu from "@/views/Menu.vue";
import VideoStream from "@/views/DeviceRealVPV2.vue";
export default {
@ -254,8 +254,7 @@ export default {
<template>
<div>
<Menu></Menu>
<el-container style="height: 700px; border: 1px solid #eee">
<el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
<el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
>监控设备列表</el-header
>

5
src/views/FileList.vue
View File

@ -2,7 +2,7 @@
import router from "@/router/index.js";
import { autoResizerProps, ElMessage } from "element-plus";
import CryptoJS from "crypto-js";
import Menu from "@/views/Menu.vue";
import { getConfigFileListService } from "@/api/file.js";
import { addConfigFileService } from "@/api/file.js";
@ -328,8 +328,7 @@ export default {
<template>
<div>
<Menu></Menu>
<el-container style="height: 700px; border: 1px solid #eee">
<el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
<el-header style="font-size: 28px; font-weight: 500; background-color: #f5f7fa; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid #e4e7ed;"
>配置文件管理</el-header
>

5
src/views/Group.vue
View File

@ -16,7 +16,7 @@ import {DelFGService} from "@/api/user.js";
import { updateDeviceService } from "@/api/device.js";
import router from "@/router/index.js";
import { ElMessage } from 'element-plus';
import Menu from "@/views/Menu.vue";
export default {
@ -431,8 +431,7 @@ export default {
<template>
<div>
<Menu></Menu>
<el-container style="height: 700px; border: 1px solid #eee">
<el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
<el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
>群组</el-header
>

7
src/views/Login.vue
View File

@ -72,12 +72,7 @@ const param = reactive({
onMounted(async () => {
// 保存登录参数到本地存储
let res = await getMyUserInfo(localStorage.getItem("userId"));
if(res.code === 0){
// 如果已经登录，跳转到用户页面
router.push("/user");
}else{
window.location.href = "https://sv.ljsea.top/#/login?site=gs-vp"; //https://sv.ljsea.top/
}
});
// 表单验证规则

5
src/views/ShellList.vue
View File

@ -1,7 +1,7 @@
<script>
import router from "@/router/index.js";
import { ElMessage } from "element-plus";
import Menu from "@/views/Menu.vue";
import { getConfigShellListService } from "@/api/shell.js";
import { addConfigShellService } from "@/api/shell.js";
@ -336,8 +336,7 @@ export default {
<template>
<div>
<Menu></Menu>
<el-container style="height: 700px; border: 1px solid #eee">
<el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
<el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
>命令分发</el-header
>

5
src/views/UserList.vue
View File

@ -17,7 +17,7 @@ import { getFriendListService } from "@/api/chat.js";
import {sendMessageService} from "@/api/chat.js";
import { ElMessage } from 'element-plus';
import CryptoJS from 'crypto-js';
import Menu from "@/views/Menu.vue";
export default {
data() {
@ -454,8 +454,7 @@ export default {
<template>
<div>
<Menu></Menu>
<el-container style="height: 700px; border: 1px solid #eee">
<el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
<el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
>用户搜索列表</el-header
>

5
src/views/VideoList.vue
View File

@ -9,7 +9,7 @@ import { delayVideoService } from "@/api/video.js";
import router from "@/router/index.js";
import Cookies from "js-cookie";
import { ElMessage } from "element-plus";
import Menu from "@/views/Menu.vue";
import VideoPlayer from "@/views/Video.vue";
export default {
@ -265,8 +265,7 @@ export default {
<template>
<div>
<Menu></Menu>
<el-container style="height: 700px; border: 1px solid #eee">
<el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
<el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
>监控视频列表</el-header
>