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

4
index.html
View File

@ -1,12 +1,12 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="dark">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="favicon.ico" /> <link rel="icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>算法测试验证软件平台</title> <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> <script>
window.isV2=true window.isV2=true
</script> </script>

16
public/css/v2.css
View File

@ -42,3 +42,19 @@
use[aria-labelledby="icon-web"] path{ use[aria-labelledby="icon-web"] path{
fill:red !important; 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;
}

93
src/App.vue
View File

@ -77,3 +77,96 @@ const fontColor = computed(() => {
color: var(--el-color-primary); 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>

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

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

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

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

52
src/layout/index.vue
View File

@ -66,35 +66,83 @@ watch(route, (a,b,c) => {
<style lang="scss"> <style lang="scss">
.main-container { .main-container {
background-color: #F3F8FB; background-color: #F3F8FB;
.el-menu-item { .el-menu-item {
&.is-active { &.is-active {
background-color: #EEF3FB; 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; background-color: #EEF7FE;
} }
.center-container { .center-container {
padding-top: 12px; padding-top: 12px;
.el-aside { .el-aside {
background-color: #fff; background-color: #fff;
.el-scrollbar { .el-scrollbar {
padding: 12px; padding: 12px;
} }
.el-menu { .el-menu {
border-right: none; border-right: none;
} }
} }
.el-main { .el-main {
padding: 0px; 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>
<style lang="scss" scoped> <style lang="scss" scoped>
.main-container { .main-container {
position: relative; position: relative;
min-height: 100%; min-height: 100%;

7
src/styles/variables.scss
View File

@ -10,11 +10,18 @@
/** 暗黑主题 */ /** 暗黑主题 */
html.dark { html.dark {
--el-bg-color-overlay:#263445;
--menu-background: var(--el-bg-color-overlay); --menu-background: var(--el-bg-color-overlay);
--menu-text: #fff; --menu-text: #fff;
--menu-active-text: var(--el-menu-active-color); --menu-active-text: var(--el-menu-active-color);
--menu-hover: rgb(0 0 0 / 20%); --menu-hover: rgb(0 0 0 / 20%);
--sidebar-logo-background: 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); // 菜单背景色 $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; const { code, data, msg } = response.data;
if (code === ResultEnum.SUCCESS) { if (code === ResultEnum.SUCCESS) {
return response; return response;
}else if (code === ResultEnum.TOKEN_INVALID) { }else if (code === ResultEnum.TOKEN_INVALID || code==50) {
ElMessage.warning("登录状态已过期，请重新登录"); ElMessage.warning("登录状态已过期，请重新登录");
const userStore = useUserStoreHook(); const userStore = useUserStoreHook();
userStore.resetToken().then(() => { userStore.resetToken().then(() => {
@ -55,7 +55,7 @@ service.interceptors.response.use(
// 异常处理 // 异常处理
if (error.response.data) { if (error.response.data) {
const { code, msg } = error.response.data; const { code, msg } = error.response.data;
if (code === ResultEnum.TOKEN_INVALID) { if (code === ResultEnum.TOKEN_INVALID || code==50) {
ElMessageBox.confirm("当前页面已失效，请重新登录", "提示", { ElMessageBox.confirm("当前页面已失效，请重新登录", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",

4
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> <svg-icon class="icon-warn" icon-class="warn" v-if="it.type=='warn'" color="red"></svg-icon>
{{ it.type=="info"?"系统信息":"告警信息" }} {{ it.type=="info"?"系统信息":"告警信息" }}
</div> </div>
<div style="color: #666;padding: 0px 12px;"> <div style="color: #666;padding: 0px 12px;" class="row-1">
{{ it.operation_result }} {{ it.operation_result }}
</div> </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 }} {{ it.update_time }}
</div> </div>
</div> </div>

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

@ -122,7 +122,7 @@ const loadData = () => {
let objs = tmps.filter(it => it.logs_operation_type == t); let objs = tmps.filter(it => it.logs_operation_type == t);
return objs.length > 0 ? objs[0].operation_count : 0; 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.cnt2 = findCnt("model_infer");
info.cnt3 = findCnt("model_report"); info.cnt3 = findCnt("model_report");
}); });

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

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

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

@ -32,7 +32,7 @@
<el-card shadow="never" class="top-row2"> <el-card shadow="never" class="top-row2">
<template #header> <template #header>
<div class="row2-top"> <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 class="div-more" v-if="false">更多</div>
</div> </div>
</template> </template>
@ -283,9 +283,11 @@ onMounted(() => {
&.is-small { &.is-small {
.dev-row3 { .dev-row3 {
padding: 0px !important; padding: 0px !important;
&.is-v2 { &.is-v2 {
justify-content: center; justify-content: center;
} }
.device-state { .device-state {
width: 80px !important; width: 80px !important;
} }
@ -510,9 +512,11 @@ onMounted(() => {
display: flex; display: flex;
padding: 12px; padding: 12px;
align-items: center; align-items: center;
&.is-v2 { &.is-v2 {
justify-content: center; justify-content: center;
} }
.device-state { .device-state {
width: 100px; width: 100px;
text-align: center; text-align: center;
@ -604,3 +608,96 @@ onMounted(() => {
} }
} }
</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>

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

@ -19,7 +19,7 @@
<el-card shadow="never" class="top-row2"> <el-card shadow="never" class="top-row2">
<template #header> <template #header>
<div class="row2-top"> <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 class="div-more" v-if="false">更多</div>
</div> </div>
</template> </template>

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

@ -50,7 +50,7 @@
</el-button> </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>{{ $t("login.username") }}: admin</span>
<span class="ml-4"> {{ $t("login.password") }}: 12345678</span> <span class="ml-4"> {{ $t("login.password") }}: 12345678</span>
</div> </div>