sxyanzhu
/
AIManage
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update code

main
lijun 2024-12-20 23:46:01 +08:00
parent ff2495ebeb
commit d5f9911e17
14 changed files with 486 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -1,12 +1,12 @@
<!doctype html>
<html lang="en">
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>算法测试验证软件平台</title>
<!--
<link rel="stylesheet" data-for="result" href="css/v2.css?v=20241008"/>
<!--
<link rel="stylesheet" data-for="result" href="css/v2.css?v=20241220"/>
<script>
window.isV2=true
</script>

18
public/css/v2.css
View File

@ -41,4 +41,20 @@
}
use[aria-labelledby="icon-web"] path{
fill:red !important;
}
}
html.dark #app .el-header{
background: transparent;
color: #fff;
height: 84px;
}
html.dark #app .el-aside{
background: transparent;
border-top: #000 10px solid;
}
html.dark #app .el-aside .el-menu .router-link-active .el-menu-item{
background-color: transparent;
color: #333;
border-right-color: #3894FF;
}

95
src/App.vue
View File

@ -76,4 +76,97 @@ const fontColor = computed(() => {
.blue {
color: var(--el-color-primary);
}
</style>
</style>
<style lang="scss">
html.dark {
.dashboard-container {
.top-row1 {
.top-row {
.div-title {
color: #3399ff;
}
.div-num {
color: #aaa
}
}
}
.top-row2 {
.dev-item {
.el-card {
background: #304156;
.dev-title {
svg * {
fill: #fff !important;
}
}
.el-card__body {
background: #263445;
color: #aaa;
}
}
}
}
.right-panel {
.top-row2.notice-card {
.el-card__header {
border-bottom: 1px solid #5e6572;
div {
color: #fff !important;
}
}
.notice-item {
.row-1 {
color: #aaa !important;
}
.row-2 {
border-bottom: 1px solid #5e6572 !important;
}
}
}
}
.proc-card{
.el-card__header{
.row2-top{
div{
color:#fff !important;
}
}
}
.el-card__body{
background: transparent;
color:#aaa;
.el-badge__content--danger{
background: #6F89A6;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 12px;
}
}
}
.proc-card.server-status{
background: #263445;
.el-card__header{
.row2-top{
div{
color:#fff !important;
}
}
}
}
}
}
</style>

139
src/layout/components/NavBar/components/NavbarRight.vue
View File

@ -1,44 +1,43 @@
<template>
<div class="flex" style="height: 100%;align-items: center;">
<div style="flex-grow: 1;display: flex;align-items: center;padding-top: 3px;" >
<div class="flex nav-bar-right" style="height: 100%;align-items: center;">
<div style="flex-grow: 1;display: flex;align-items: center;padding-top: 3px;">
<span style="position: relative;" class="logo-small1">
<img src="@/assets/logo2.png" class="logo-image" />
<span class="logo-title" style="position: absolute;font-weight: bold;font-size: 14px;color: #003F88;left: 0;bottom: -13px;white-space: nowrap;">中国航天</span>
</span>
<span style="margin-left: 20px;margin-top: 10px;font-size: 12px;font-weight: bold;" class="logo-title2">
<div class="logo-title" style="font-weight: bold;font-size: 22px;color:#003F88"> {{ "中国航天某某某某研究院" }}</div>
<div >China Aerospace XXXX Research Institute</div>
</span>
<span class="logo-title" style="font-weight: bold;font-size: 28px;margin-left: auto;margin-right: auto;color:#101010">算法测试验证软件平台</span>
<img src="@/assets/logo2.png" class="logo-image" />
<span class="logo-title"
style="position: absolute;font-weight: bold;font-size: 14px;left: 0;bottom: -13px;white-space: nowrap;">中国航天</span>
</span>
<span style="margin-left: 20px;margin-top: 10px;font-size: 12px;font-weight: bold;" class="logo-title2">
<div class="logo-title" style="font-weight: bold;font-size: 22px;"> {{ "中国航天某某某某研究院" }}</div>
<div class="logo-sub-title">China Aerospace XXXX Research Institute</div>
</span>
<span class="logo-title"
style="font-weight: bold;font-size: 28px;margin-left: auto;margin-right: auto;">算法测试验证软件平台</span>
</div>
<div>
<el-switch v-model="isDark" inline-prompt active-icon="Moon" inactive-icon="Sunny" @change="toggleTheme" />
<!--全屏 -->
<div class="setting-item" @click="toggle">
<svg-icon
:icon-class="isFullscreen ? 'fullscreen-exit' : 'fullscreen'"
/>
<svg-icon :icon-class="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
</div>
<!-- 用户头像 -->
<el-dropdown class="setting-item" trigger="click">
<div class="flex-center h100% p10px">
<img src="@/assets/images/avatar.png"
class="rounded-full mr-10px w24px w24px"
/>
<!-- :src="userStore.user.avatar + '?imageView2/1/w/80/h/80'" -->
<span>{{ userStore.user.username }}</span>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="resetPassword">
修改密码
</el-dropdown-item>
<el-dropdown-item @click="logout">
注销登录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- 用户头像 -->
<el-dropdown class="setting-item" trigger="click">
<div class="flex-center h100% p10px">
<img src="@/assets/images/avatar.png" class="rounded-full mr-10px w24px w24px" />
<!-- :src="userStore.user.avatar + '?imageView2/1/w/80/h/80'" -->
<span>{{ userStore.user.username }}</span>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="resetPassword">
修改密码
</el-dropdown-item>
<el-dropdown-item @click="logout">
注销登录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
@ -54,18 +53,24 @@ import md5 from 'js-md5';
import defaultSettings from "@/settings";
import UserAPI from "@/api/myUser";
import { DeviceEnum } from "@/enums/DeviceEnum";
import { ThemeEnum } from "@/enums/ThemeEnum";
const appStore = useAppStore();
const tagsViewStore = useTagsViewStore();
// Stores
const userStore = useUserStore();
const settingStore = useSettingsStore();
const settingsStore = useSettingsStore();
const route = useRoute();
const router = useRouter();
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
const isDark = ref(settingsStore.theme === ThemeEnum.DARK);
const { isFullscreen, toggle } = useFullscreen();
const toggleTheme = () => {
const newTheme =
settingsStore.theme === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
settingsStore.changeTheme(newTheme);
};
/**
* 注销
@ -111,33 +116,57 @@ function resetPassword() {
}
</script>
<style lang="scss" scoped>
.setting-item {
display: inline-block;
min-width: 40px;
height: $navbar-height;
line-height: $navbar-height;
color: var(--el-text-color);
text-align: center;
cursor: pointer;
&:hover {
background: rgb(0 0 0 / 10%);
<style lang="scss">
.nav-bar-right {
.logo-title {
color: #003F88;
}
}
.logo-image {
.setting-item {
display: inline-block;
min-width: 40px;
height: $navbar-height;
line-height: $navbar-height;
color: var(--el-text-color);
text-align: center;
cursor: pointer;
&:hover {
background: rgb(0 0 0 / 10%);
}
}
.logo-image {
width: 50px;
//height: 68px;
}
.layout-top,
.layout-mix {
.setting-item,
.el-icon {
color: var(--el-color-white);
.layout-top,
.layout-mix {
.setting-item,
.el-icon {
color: var(--el-color-white);
}
}
}
.dark .setting-item:hover {
background: rgb(255 255 255 / 20%);
}
html.dark {
.nav-bar-right {
.logo-image{
filter: saturate(500%);
}
.logo-sub-title{
color: #4F9EFA;
}
.logo-title {
color: #4F9EFA;
}
}
}
</style>

138
src/layout/components/NavBar/components/NavbarRight2.vue
View File

@ -1,44 +1,44 @@
<template>
<div class="flex" style="height: 100%;align-items: center;">
<div style="flex-grow: 1;display: flex;align-items: center;padding-top: 3px;" >
<div class="flex nav-bar-right2" style="height: 100%;align-items: center;">
<div style="flex-grow: 1;display: flex;align-items: center;padding-top: 3px;">
<span style="position: relative;" class="logo-small1">
<img src="@/assets/logo2.png" class="logo-image" />
<span class="logo-title" style="position: absolute;font-weight: bold;font-size: 14px;color: #003F88;left: 0;bottom: -13px;white-space: nowrap;">中国航天</span>
</span>
<span style="margin-left: 20px;margin-top: 10px;font-size: 12px;font-weight: bold;" class="logo-title2">
<div class="logo-title" style="font-weight: bold;font-size: 22px;color:#003F88"> {{ "中国航天某某某某研究院" }}</div>
<div >China Aerospace XXXX Research Institute</div>
</span>
<span class="logo-title" style="font-weight: bold;font-size: 28px;margin-left: auto;margin-right: auto;color:#101010">算法测试验证软件平台</span>
<img src="@/assets/logo2.png" class="logo-image" />
<span class="logo-title"
style="position: absolute;font-weight: bold;font-size: 14px;left: 0;bottom: -13px;white-space: nowrap;">中国航天</span>
</span>
<span style="margin-left: 20px;margin-top: 10px;font-size: 12px;font-weight: bold;" class="logo-title2">
<div class="logo-title" style="font-weight: bold;font-size: 22px;"> {{ "中国航天某某某某研究院" }}</div>
<div class="logo-title">China Aerospace XXXX Research Institute</div>
</span>
<span class="logo-title"
style="font-weight: bold;font-size: 28px;margin-left: auto;margin-right: auto;">算法测试验证软件平台</span>
</div>
<div>
<el-switch v-model="isDark" inline-prompt active-icon="Moon" inactive-icon="Sunny" @change="toggleTheme" />
<!--全屏 -->
<!--全屏 -->
<div class="setting-item" @click="toggle">
<svg-icon
:icon-class="isFullscreen ? 'fullscreen-exit' : 'fullscreen'"
/>
<svg-icon :icon-class="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
</div>
<!-- 用户头像 -->
<el-dropdown class="setting-item" trigger="click">
<div class="flex-center h100% p10px">
<img src="@/assets/images/avatar.png"
class="rounded-full mr-10px w24px w24px"
/>
<!-- :src="userStore.user.avatar + '?imageView2/1/w/80/h/80'" -->
<span>{{ userStore.user.username }}</span>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="resetPassword">
修改密码
</el-dropdown-item>
<el-dropdown-item @click="logout">
注销登录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- 用户头像 -->
<el-dropdown class="setting-item" trigger="click">
<div class="flex-center h100% p10px">
<img src="@/assets/images/avatar.png" class="rounded-full mr-10px w24px w24px" />
<!-- :src="userStore.user.avatar + '?imageView2/1/w/80/h/80'" -->
<span>{{ userStore.user.username }}</span>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="resetPassword">
修改密码
</el-dropdown-item>
<el-dropdown-item @click="logout">
注销登录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
@ -54,18 +54,24 @@ import md5 from 'js-md5';
import defaultSettings from "@/settings";
import UserAPI from "@/api/myUser";
import { DeviceEnum } from "@/enums/DeviceEnum";
import { ThemeEnum } from "@/enums/ThemeEnum";
const appStore = useAppStore();
const tagsViewStore = useTagsViewStore();
// Stores
const userStore = useUserStore();
const settingStore = useSettingsStore();
const settingsStore = useSettingsStore();
const isDark = ref(settingsStore.theme === ThemeEnum.DARK);
const route = useRoute();
const router = useRouter();
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
const { isFullscreen, toggle } = useFullscreen();
const toggleTheme = () => {
const newTheme =
settingsStore.theme === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
settingsStore.changeTheme(newTheme);
};
/**
* 注销
@ -111,33 +117,55 @@ function resetPassword() {
}
</script>
<style lang="scss" scoped>
.setting-item {
display: inline-block;
min-width: 40px;
height: $navbar-height;
line-height: $navbar-height;
color: var(--el-text-color);
text-align: center;
cursor: pointer;
&:hover {
background: rgb(0 0 0 / 10%);
<style lang="scss">
.nav-bar-right2 {
.logo-title {
color: #003F88;
}
}
.logo-image {
.setting-item {
display: inline-block;
min-width: 40px;
height: $navbar-height;
line-height: $navbar-height;
color: var(--el-text-color);
text-align: center;
cursor: pointer;
&:hover {
background: rgb(0 0 0 / 10%);
}
}
.logo-image {
width: 50px;
//height: 68px;
}
.layout-top,
.layout-mix {
.setting-item,
.el-icon {
color: var(--el-color-white);
.layout-top,
.layout-mix {
.setting-item,
.el-icon {
color: var(--el-color-white);
}
}
}
.dark .setting-item:hover {
background: rgb(255 255 255 / 20%);
}
html.dark {
.nav-bar-right2 {
.logo-image{
filter: saturate(500%);
}
.logo-sub-title{
color: #4F9EFA;
}
.logo-title {
color: #4F9EFA;
}
}
}
</style>

118
src/layout/index.vue
View File

@ -1,21 +1,21 @@
<template>
<template>
<el-container class="wh-full main-container">
<el-header>
<NavbarRight2 v-if="isNav2"/>
<NavbarRight v-else/>
</el-header>
<el-container class="center-container">
<el-aside width="200px">
<Sidebar class="sidebar-container" />
</el-aside>
<el-main>
<AppMain />
</el-main>
</el-container>
<el-header>
<NavbarRight2 v-if="isNav2" />
<NavbarRight v-else />
</el-header>
<el-container class="center-container">
<el-aside width="200px">
<Sidebar class="sidebar-container" />
</el-aside>
<el-main>
<AppMain />
</el-main>
</el-container>
</el-container>
</template>
<script setup lang="ts">
import { useAppStore, usePermissionStore } from "@/store";
import { useAppStore, usePermissionStore } from "@/store";
import { DeviceEnum } from "@/enums/DeviceEnum";
import NavbarRight2 from './components/NavBar/components/NavbarRight2.vue'
const appStore = useAppStore();
@ -24,13 +24,13 @@ const width = useWindowSize().width;
const WIDTH_DESKTOP = 992; // 响应式布局容器固定宽度 大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
const isOpenSidebar = computed(() => appStore.sidebar.opened);
let isNav2=ref(false)
let isNav2 = ref(false)
const activeTopMenuPath = computed(() => appStore.activeTopMenuPath); // 顶部菜单激活path
watch(
() => activeTopMenuPath.value,
(newVal) => {
permissionStore.setMixLeftMenus(newVal);
},
{
@ -51,50 +51,98 @@ watchEffect(() => {
});
onMounted(()=>{
isNav2.value=location.href.indexOf("/home/index2")>=0
onMounted(() => {
isNav2.value = location.href.indexOf("/home/index2") >= 0
});
const route = useRoute();
watch(route, (a,b,c) => {
isNav2.value=a.path=='/home/index2';
watch(route, (a, b, c) => {
isNav2.value = a.path == '/home/index2';
if (isMobile.value && isOpenSidebar.value) {
appStore.closeSideBar();
}
});
</script>
<style lang="scss">
.main-container{
.main-container {
background-color: #F3F8FB;
.el-menu-item {
&.is-active{
&.is-active {
background-color: #EEF3FB;
border-right:solid 3px var(--el-color-primary);
border-right: solid 3px var(--el-color-primary);
}
}
.el-header{
.el-header {
background-color: #EEF7FE;
}
.center-container{
padding-top:12px;
.el-aside{
.center-container {
padding-top: 12px;
.el-aside {
background-color: #fff;
.el-scrollbar{
padding:12px;
.el-scrollbar {
padding: 12px;
}
.el-menu{
border-right:none;
.el-menu {
border-right: none;
}
}
.el-main{
padding:0px;
.el-main {
padding: 0px;
}
}
}
html.dark {
.main-container {
background-color: #304156;
.router-link-active{
background-color: #0A0A0A;
.el-menu-item {
background-color: #0A0A0A !important;
span.ml-1{
font-weight: bold;
color: #4F9EFA;
}
}
}
.el-menu-item {
background-color: #304156;
&.is-active {
background-color: #0A0A0A;
span.ml-1{
font-weight: bold;
color: #4F9EFA;
}
}
}
.el-sub-menu.is-active{
.el-sub-menu__title{
background-color: #2B3B4F;
}
}
.el-header {
background-color: #304156;
}
.center-container {
.el-aside {
background-color: #304156;
}
}
}
}
</style>
<style lang="scss" scoped>
.main-container {
position: relative;
min-height: 100%;

7
src/styles/variables.scss
View File

@ -10,11 +10,18 @@
/** 暗黑主题 */
html.dark {
--el-bg-color-overlay:#263445;
--menu-background: var(--el-bg-color-overlay);
--menu-text: #fff;
--menu-active-text: var(--el-menu-active-color);
--menu-hover: rgb(0 0 0 / 20%);
--sidebar-logo-background: rgb(0 0 0 / 20%);
.el-main{
background-color: #000;
}
.lf-graph{
background: transparent;
}
}
$menu-background: var(--menu-background); // 菜单背景色

4
src/utils/request.ts
View File

@ -40,7 +40,7 @@ service.interceptors.response.use(
const { code, data, msg } = response.data;
if (code === ResultEnum.SUCCESS) {
return response;
}else if (code === ResultEnum.TOKEN_INVALID) {
}else if (code === ResultEnum.TOKEN_INVALID || code==50) {
ElMessage.warning("登录状态已过期，请重新登录");
const userStore = useUserStoreHook();
userStore.resetToken().then(() => {
@ -55,7 +55,7 @@ service.interceptors.response.use(
// 异常处理
if (error.response.data) {
const { code, msg } = error.response.data;
if (code === ResultEnum.TOKEN_INVALID) {
if (code === ResultEnum.TOKEN_INVALID || code==50) {
ElMessageBox.confirm("当前页面已失效，请重新登录", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",

6
src/views/dashboard/components/IndexNotice.vue
View File

@ -6,10 +6,10 @@
<svg-icon class="icon-warn" icon-class="warn" v-if="it.type=='warn'" color="red"></svg-icon>
{{ it.type=="info"?"系统信息":"告警信息" }}
</div>
<div style="color: #666;padding: 0px 12px;">
<div style="color: #666;padding: 0px 12px;" class="row-1">
{{ it.operation_result }}
</div>
<div style="text-align: right;color: #666;padding:0px 12px;border-bottom: solid 1px #eee;">
<div class="row-2" style="text-align: right;color: #666;padding:0px 12px;border-bottom: solid 1px #eee;">
{{ it.update_time }}
</div>
</div>
@ -34,4 +34,4 @@ onMounted(()=>{
font-size: 12px;
line-height: 30px;}
}
</style>
</style>

4
src/views/dashboard/components/ModelFlow.vue
View File

@ -122,7 +122,7 @@ const loadData = () => {
let objs = tmps.filter(it => it.logs_operation_type == t);
return objs.length > 0 ? objs[0].operation_count : 0;
}
info.cnt1 = findCnt("model_compile");
info.cnt1 =10;// findCnt("model_compile");
info.cnt2 = findCnt("model_infer");
info.cnt3 = findCnt("model_report");
});
@ -344,4 +344,4 @@ onMounted(() => {
}
}
}
</style>
</style>

4
src/views/dashboard/components/ModelFlow2.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="model-flow2">
<div class="model-flow2" style="margin-left: 40px;">
<el-row class="row-1">
<div class="card-item" :class="info.cnt1 > 0 ? 'is-active' : ''">
<div class="title-text">编译部署</div>
@ -306,4 +306,4 @@ onMounted(() => {
}
}
}
</style>
</style>

109
src/views/dashboard/index.vue
View File

@ -32,7 +32,7 @@
<el-card shadow="never" class="top-row2">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">设备运行状态</div>
<div style="font-weight: bold;font-size:15px;">设备运行状态</div>
<div class="div-more" v-if="false">更多</div>
</div>
</template>
@ -58,7 +58,7 @@
<div
style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;">
{{ getState(it.working_state) }}</div>
</div>
</div>
</div>
</el-card>
<el-card shadow="hover" v-else>
@ -122,8 +122,8 @@
<div style="color:#333;font-weight: bold;font-size:15px;">模型仿真评估流程</div>
</div>
</template>
<ModelFlow2 v-if="isV2"/>
<ModelFlow v-else/>
<ModelFlow2 v-if="isV2" />
<ModelFlow v-else />
</el-card>
</div>
<div style="" class="right-panel">
@ -283,9 +283,11 @@ onMounted(() => {
&.is-small {
.dev-row3 {
padding: 0px !important;
&.is-v2{
&.is-v2 {
justify-content: center;
}
.device-state {
width: 80px !important;
}
@ -510,9 +512,11 @@ onMounted(() => {
display: flex;
padding: 12px;
align-items: center;
&.is-v2{
&.is-v2 {
justify-content: center;
}
.device-state {
width: 100px;
text-align: center;
@ -604,3 +608,96 @@ onMounted(() => {
}
}
</style>
<style lang="scss">
html.dark {
.dashboard-container {
.top-row1 {
.top-row {
.div-title {
color: #3399ff;
}
.div-num {
color: #aaa
}
}
}
.top-row2 {
.dev-item {
.el-card {
background: #304156;
.dev-title {
svg * {
fill: #fff !important;
}
}
.el-card__body {
background: #263445;
color: #aaa;
}
}
}
}
.right-panel {
.top-row2.notice-card {
.el-card__header {
border-bottom: 1px solid #5e6572;
div {
color: #fff !important;
}
}
.notice-item {
.row-1 {
color: #aaa !important;
}
.row-2 {
border-bottom: 1px solid #5e6572 !important;
}
}
}
}
.proc-card{
.el-card__header{
.row2-top{
div{
color:#fff !important;
}
}
}
.el-card__body{
background: transparent;
color:#aaa;
.el-badge__content--danger{
background: #6F89A6;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 12px;
}
}
}
.proc-card.server-status{
background: #263445;
.el-card__header{
.row2-top{
div{
color:#fff !important;
}
}
}
}
}
}
</style>

4
src/views/dashboard/index2.vue
View File

@ -19,7 +19,7 @@
<el-card shadow="never" class="top-row2">
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">设备运行状态</div>
<div style="font-weight: bold;font-size:15px;">设备运行状态</div>
<div class="div-more" v-if="false">更多</div>
</div>
</template>
@ -517,4 +517,4 @@ onMounted(() => {
}
}
}
</style>
</style>

2
src/views/login/index.vue
View File

@ -50,7 +50,7 @@
</el-button>
<!-- 账号密码提示 -->
<div class="mt-10 text-sm">
<div class="mt-10 text-sm" v-if="1==2">
<span>{{ $t("login.username") }}: admin</span>
<span class="ml-4"> {{ $t("login.password") }}: 12345678</span>
</div>