feat: 告警列表、算力分配完成
parent
c06d55f769
commit
50f9cd6172
Binary file not shown.
|
After Width: | Height: | Size: 463 KiB |
@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="298" height="344" viewBox="0 0 298 344" fill="none">
|
||||
<path
|
||||
d="M334.647 167.409L259.557 91.2169L230.295 61.5247C228.335 59.5362 225.154 59.5362 223.18 61.5247L95.7935 190.781C93.4578 193.151 89.6591 193.151 87.3234 190.781L52.584 155.532C50.2483 153.162 50.2483 149.307 52.584 146.937L159.125 38.8334C161.084 36.8448 161.084 33.6168 159.125 31.6146L130.211 2.27657C128.251 0.288017 125.07 0.288017 123.096 2.27657L-21.2977 148.817C-23.2575 150.806 -23.2575 154.034 -21.2977 156.036L54.6914 233.14L83.9542 262.832C85.914 264.821 89.0953 264.821 91.0685 262.832L223.838 128.114C226.174 125.744 229.973 125.744 232.308 128.114L267.048 163.363C269.383 165.733 269.383 169.588 267.048 171.958L134.278 306.676C132.318 308.664 132.318 311.892 134.278 313.895L162.292 342.32C164.252 344.309 167.434 344.309 169.407 342.32L334.661 174.641C336.607 172.625 336.607 169.397 334.647 167.409Z"
|
||||
fill="#154DDD" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 960 B |
Binary file not shown.
|
After Width: | Height: | Size: 494 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 370 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
@ -0,0 +1,13 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="131" viewBox="0 0 120 131" fill="none">
|
||||
<g opacity="0.05">
|
||||
<path
|
||||
d="M68.8661 8.05494L53.9961 11.2195C53.6475 11.316 53.5299 11.7569 53.7879 12.0142L65.5118 23.9102C65.7653 24.1674 66.2044 24.0526 66.2949 23.6989L69.4409 8.63825C69.536 8.28459 69.2146 7.96308 68.8661 8.05494Z"
|
||||
fill="#E42F2F" />
|
||||
<path
|
||||
d="M76.9202 0.0121908L55.3825 5.86834C55.129 5.93723 55.0475 6.25875 55.2286 6.44707L70.9948 22.4447C71.1804 22.633 71.4973 22.5457 71.5652 22.2885L77.3366 0.434758C77.4045 0.177547 77.1737 -0.0567051 76.9202 0.0121908Z"
|
||||
fill="#FAEC18" />
|
||||
<path
|
||||
d="M121.272 70.6188L95.9504 44.9253L86.0824 34.9124C85.4215 34.2418 84.3487 34.2418 83.6833 34.9124L40.7256 78.5005C39.9379 79.2997 38.6569 79.2997 37.8693 78.5005L26.1544 66.6137C25.3667 65.8145 25.3667 64.5147 26.1544 63.7155L62.0822 27.2604C62.7431 26.5898 62.7431 25.5013 62.0822 24.8261L52.3318 14.9326C51.671 14.262 50.5981 14.262 49.9327 14.9326L1.23981 64.3493C0.578919 65.0199 0.578919 66.1084 1.23981 66.7836L26.865 92.7849L36.7331 102.798C37.394 103.468 38.4668 103.468 39.1322 102.798L83.9051 57.3679C84.6927 56.5687 85.9737 56.5687 86.7614 57.3679L98.4763 69.2547C99.2639 70.0539 99.2639 71.3537 98.4763 72.1529L53.7034 117.583C53.0425 118.253 53.0425 119.342 53.7034 120.017L63.1505 129.603C63.8114 130.273 64.8842 130.273 65.5496 129.603L121.277 73.0577C121.933 72.378 121.933 71.2894 121.272 70.6188Z"
|
||||
fill="#154DDD" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -1,4 +1,81 @@
|
||||
.computePowerAllocation_wrap {
|
||||
// background-color: red;
|
||||
height: 100%;
|
||||
|
||||
// padding-top: calc(50vh - 330px - 48px);
|
||||
.computePowerAllocation_body {
|
||||
border-radius: 12px;
|
||||
background: rgba(21, 77, 221, 0.05);
|
||||
width: 1080px;
|
||||
height: 660px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.computePower_header {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 46px;
|
||||
|
||||
& > span {
|
||||
position: absolute;
|
||||
line-height: 46px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(180deg, #014be6 0%, #014be6 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.computePower_banner {
|
||||
padding: 32px 32px 0;
|
||||
|
||||
.banner_left {
|
||||
.banner_group {
|
||||
& > li {
|
||||
width: 266px;
|
||||
height: 88px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.bg_banner_group_logo {
|
||||
width: 266px;
|
||||
height: 166.25px;
|
||||
top: -38px;
|
||||
position: absolute;
|
||||
left: 52px;
|
||||
background: url("@/assets/computePower/computerTypeLogo.png")
|
||||
no-repeat 0 0;
|
||||
background-size: cover;
|
||||
opacity: 0.05;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg_banner_center {
|
||||
width: 360px;
|
||||
height: 360px;
|
||||
background: url("@/assets/computePower/banner.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.banner_right {
|
||||
.computePowerCube_wrap {
|
||||
padding: 16px;
|
||||
width: 266px;
|
||||
height: 400px;
|
||||
border-radius: 8px;
|
||||
background-color: white;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.computePower_footer {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-01-22 13:30:43
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-01-22 13:30:53
|
||||
* @FilePath: \General-AI-Platform-Web-Client\src\views\computePowerAllocation\typing.ts
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
|
||||
export type ComputePowerPoolItem = {
|
||||
name: string;
|
||||
type: number; // 类别
|
||||
color?: string; //
|
||||
proportion: number;
|
||||
pretreatmentEfficiency?: number;
|
||||
};
|
||||
@ -0,0 +1,222 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import Motion from "./utils/motion";
|
||||
import { useRouter } from "vue-router";
|
||||
import { message } from "@/utils/message";
|
||||
import { loginRules } from "./utils/rule";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { $t, transformI18n } from "@/plugins/i18n";
|
||||
import { useLayout } from "@/layout/hooks/useLayout";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { initRouter, getTopMenu } from "@/router/utils";
|
||||
import { bg, avatar, illustration } from "./utils/static";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from "vue";
|
||||
import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
|
||||
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
|
||||
|
||||
import dayIcon from "@/assets/svg/day.svg?component";
|
||||
import darkIcon from "@/assets/svg/dark.svg?component";
|
||||
import globalization from "@/assets/svg/globalization.svg?component";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
import User from "@iconify-icons/ri/user-3-fill";
|
||||
|
||||
defineOptions({
|
||||
name: "Login"
|
||||
});
|
||||
const router = useRouter();
|
||||
const loading = ref(false);
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
|
||||
const { initStorage } = useLayout();
|
||||
initStorage();
|
||||
|
||||
const { t } = useI18n();
|
||||
const { dataTheme, dataThemeChange } = useDataThemeChange();
|
||||
dataThemeChange();
|
||||
const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
|
||||
const { locale, translationCh, translationEn } = useTranslationLang();
|
||||
|
||||
const ruleForm = reactive({
|
||||
username: "admin",
|
||||
password: "admin123"
|
||||
});
|
||||
|
||||
const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
loading.value = true;
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
useUserStoreHook()
|
||||
.loginByUsername({ username: ruleForm.username, password: "admin123" })
|
||||
.then(res => {
|
||||
if (res.success) {
|
||||
// 获取后端路由
|
||||
initRouter().then(() => {
|
||||
router.push(getTopMenu(true).path);
|
||||
message("登录成功", { type: "success" });
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
loading.value = false;
|
||||
return fields;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 使用公共函数，避免`removeEventListener`失效 */
|
||||
function onkeypress({ code }: KeyboardEvent) {
|
||||
if (code === "Enter") {
|
||||
onLogin(ruleFormRef.value);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.document.addEventListener("keypress", onkeypress);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.document.removeEventListener("keypress", onkeypress);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="select-none">
|
||||
<img :src="bg" class="wave" />
|
||||
<div class="flex-c absolute right-5 top-3">
|
||||
<!-- 主题 -->
|
||||
<el-switch
|
||||
v-model="dataTheme"
|
||||
inline-prompt
|
||||
:active-icon="dayIcon"
|
||||
:inactive-icon="darkIcon"
|
||||
@change="dataThemeChange"
|
||||
/>
|
||||
<!-- 国际化 -->
|
||||
<el-dropdown trigger="click">
|
||||
<globalization
|
||||
class="hover:text-primary hover:!bg-[transparent] w-[20px] h-[20px] ml-1.5 cursor-pointer outline-none duration-300"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="translation">
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle(locale, 'zh')"
|
||||
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
|
||||
@click="translationCh"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
class="check-zh"
|
||||
v-show="locale === 'zh'"
|
||||
:icon="Check"
|
||||
/>
|
||||
简体中文
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle(locale, 'en')"
|
||||
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
|
||||
@click="translationEn"
|
||||
>
|
||||
<span class="check-en" v-show="locale === 'en'">
|
||||
<IconifyIconOffline :icon="Check" />
|
||||
</span>
|
||||
English
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<div class="img">
|
||||
<component :is="toRaw(illustration)" />
|
||||
</div>
|
||||
<div class="login-box">
|
||||
<div class="login-form">
|
||||
<avatar class="avatar" />
|
||||
<Motion>
|
||||
<h2 class="outline-none">{{ title }}</h2>
|
||||
</Motion>
|
||||
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="loginRules"
|
||||
size="large"
|
||||
>
|
||||
<Motion :delay="100">
|
||||
<el-form-item
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: transformI18n($t('login.usernameReg')),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
prop="username"
|
||||
>
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.username"
|
||||
:placeholder="t('login.username')"
|
||||
:prefix-icon="useRenderIcon(User)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="150">
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
clearable
|
||||
show-password
|
||||
v-model="ruleForm.password"
|
||||
:placeholder="t('login.password')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="250">
|
||||
<el-button
|
||||
class="w-full mt-4"
|
||||
size="default"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onLogin(ruleFormRef)"
|
||||
>
|
||||
{{ t("login.login") }}
|
||||
</el-button>
|
||||
</Motion>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@import url("@/style/login.css");
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-input-group__append, .el-input-group__prepend) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.translation {
|
||||
::v-deep(.el-dropdown-menu__item) {
|
||||
padding: 5px 40px;
|
||||
}
|
||||
|
||||
.check-zh {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.check-en {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,10 @@
|
||||
.login_wrap {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
// top: -38px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: url("@/assets/login/sst.png") no-repeat 0 0;
|
||||
background-size: cover;
|
||||
}
|
||||
Loading…
Reference in New Issue