725登录页

.env.development

@@ -1,5 +1,4 @@
 NODE_ENV = development
 VITE_NAME= '开发环境'
 VITE_BASE_URL = '/api'
-# VITE_WEBSOCKET_URL='ws://192.168.0.131/epswebsocket?projectId='
-VITE_WEBSOCKET_URL='wss://www.adicn.com/epswebsocket?projectId='
+VITE_WEBSOCKET_URL='wss://www.adicn.com/aircraftwebsocket?projectId='

.env.production

@@ -1,5 +1,5 @@
 # 正式环境
 # NODE_ENV=production
 VITE_NAME = '生产环境'
-VITE_BASE_URL = '/eps'
-VITE_WEBSOCKET_URL='wss://www.adicn.com/epswebsocket?projectId='
+VITE_BASE_URL = '/aircraft'
+VITE_WEBSOCKET_URL='wss://www.adicn.com/aircraftwebsocket?projectId='

src/components/layout/header.vue

@@ -4,6 +4,21 @@
       <el-image style="width: 100%;height: 100%" :src="logo" fit="fill"></el-image>
       <div class="ve_logo_time">{{ currentTime }}</div>
       <div class="ve_logo_text">数据驱动飞行器智能优化设计平台</div>
+      <div class="ve_logo_user">
+        <el-dropdown trigger="hover">
+          <el-avatar  :icon="UserFilled"/>
+          <span class="el-dropdown-link">
+            {{ nickName }}
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item>个人信息</el-dropdown-item>
+              <el-dropdown-item>修改密码</el-dropdown-item>
+              <el-dropdown-item divided>登出</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
     </div>
 
   </div>
@@ -14,6 +29,12 @@ import { ref, onMounted, reactive, } from "vue";
 import logo from "@/assets/img/bgheader.png";
 
 import useCurrentTime from "@/utils/useCurrentTime";
+import { useUserStore } from '@/store/user'
+
+import { UserFilled } from '@element-plus/icons-vue'
+
+const userStore = useUserStore()
+const nickName = computed(() => userStore.userInfo.nickName || '用户登录')
 
 const { currentTime } = useCurrentTime()
 
@@ -60,6 +81,24 @@ const { currentTime } = useCurrentTime()
       -webkit-text-fill-color: transparent;
       pointer-events: none;
     }
+
+    .ve_logo_user{
+      position: absolute;
+      top: 40%;
+      right: 10%;
+      transform: translate(-50%, -50%);
+      font-size: 18px;
+      color: #FFFFFF;
+      font-weight: 400;
+
+      :deep(.el-avatar) {
+        background-color: transparent;
+      }
+
+      :deep(.el-avatar--icon) {
+        color: #2CFFFF;
+      }
+    }
   }
 
 }

src/router/index.js

@@ -37,27 +37,27 @@ const router = createRouter({
       },
     ],
 })
-//修改动态网页标题 beforeEach 导航钩子，路由改变前触发
-// router.beforeEach((to, from, next) => {
-//   const token = getToken2(); // 获取 token
+// 修改动态网页标题 beforeEach 导航钩子，路由改变前触发
+router.beforeEach((to, from, next) => {
+  const token = getToken2(); // 获取 token
   
-//   // 定义不需要登录的白名单路由
-//   const whiteList = ['login', 'register'];
+  // 定义不需要登录的白名单路由
+  const whiteList = ['login', 'register'];
   
-//   // 如果用户有 token，直接放行
-//   if (token) {
-//     document.title = to.name || '默认标题'; // 设置页面标题
-//     next();
-//   } 
-//   // 如果没有 token，并且目标页面不在白名单里，跳转到登录页
-//   else if (!whiteList.includes(to.name)) {
-//     next({ name: 'login' });
-//   }
-//   else {
-//     document.title = to.name || '默认标题';
-//     next();
-//   }
-// });
+  // 如果用户有 token，直接放行
+  if (token) {
+    document.title = to.name || '默认标题'; // 设置页面标题
+    next();
+  } 
+  // 如果没有 token，并且目标页面不在白名单里，跳转到登录页
+  else if (!whiteList.includes(to.name)) {
+    next({ name: 'login' });
+  }
+  else {
+    document.title = to.name || '默认标题';
+    next();
+  }
+});
 // afterEach 不需要 next 参数
 router.afterEach(() => {
   window.scrollTo(0, 0); // 页面滚动到顶部

src/style/index.css

@@ -249,6 +249,10 @@ img{
     height: 100%;
     padding: 5px 0px;
 
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
     overflow: auto;
   }
 
@@ -338,3 +342,25 @@ img{
   border-left: none !important;
 } */
 
+
+/* 数字输入样式 */
+.el-input-number.is-controls-right  {
+  
+  .el-input-number__increase{
+    background: transparent;
+    border: none;
+    color: #2CFFFF;
+  }
+
+  .el-input-number__decrease{
+    background: transparent;
+    border: none;
+    color: #2CFFFF;
+  }
+}
+
+
+.el-divider {
+  margin: 0;
+  border-color: #0075FF;
+}

src/views/login/index.vue

@@ -4,6 +4,11 @@
     <div class="background-left">
       <img class="background-image" :src="loginbg" alt="背景图">
     </div>
+
+    <!-- 头部 -->
+     <div class="header">
+      <myheader />
+    </div>
     
     <!-- 登录框 -->
     <div class="login-form-container">
@@ -11,8 +16,8 @@
         <el-card class="login-card" shadow="never">
           <template #header>
             <div class="login-header">
-              <img :src="loginLogo" alt="logo" class="login-logo"/>
-              <h2>{{ $t('login.subtitle') }}</h2>
+              <!-- <img :src="loginLogo" alt="logo" class="login-logo"/> -->
+              <h2>欢迎登录</h2>
             </div>
           </template>
 
@@ -25,24 +30,22 @@
             label-position="left"
           >
             <el-form-item prop="username" 
-            :label="`${$t('login.username')}：`" 
+            label="邮箱：" 
             style="margin-bottom: 20px;" 
             label-width="100px">
               <el-input
                 v-model="loginForm.username"
-                :placeholder="$t('login.inputusername')"
                 prefix-icon="User"
                 clearable
               />
             </el-form-item>
 
             <el-form-item prop="password" 
-            :label="`${$t('login.password')}：`" 
+            label="密码：" 
             style="margin-bottom: 20px;" 
             label-width="100px">
               <el-input
                 v-model="loginForm.password"
-                :placeholder="$t('login.inputpassword')"
                 prefix-icon="Lock"
                 show-password
                 clearable
@@ -51,8 +54,8 @@
           
             <el-form-item prop="remember" style="margin-bottom: 20px;">
               <div style="width: 100%; display: flex; justify-content: space-between;">
-                <el-checkbox v-model="loginForm.remember" class="remember-me">{{ $t('login.rememberMe') }}</el-checkbox>
-                <el-link type="info" class="forgot-password">{{ $t('login.forgotPassword') }}</el-link>
+                <el-checkbox v-model="loginForm.remember" class="remember-me">记住密码</el-checkbox>
+                <el-link type="info" class="forgot-password">忘记密码</el-link>
               </div>
             </el-form-item>
 
@@ -64,15 +67,15 @@
                 @click="handleLogin"
                 
               >
-                {{ $t('login.loginButton') }}
+              登录
               </el-button>
             </el-form-item>
           </el-form>
         
-          <!-- <div class="login-footer">
+          <div class="login-footer">
             <div class="register-prompt">没有账号？点击</div>
             <el-link type="primary" @click="goToRegister">注册</el-link>
-          </div> -->
+          </div>
         </el-card>
       </div>
       
@@ -90,11 +93,8 @@ import { getToken, setToken, setUserId} from "@/utils/token"
 import { useUserStore } from '@/store/user'
 
 import loginbg from '@/assets/img/login-bg.png'
-import loginLogo from '@/assets/img/login-logo.png'
-import { useI18n } from 'vue-i18n'
-
-const { t, locale } = useI18n()
 
+import myheader from '@/components/layout/header.vue'
 
 // 表单引用
 const loginFormRef = ref(null)
@@ -115,10 +115,10 @@ const loading = ref(false)
 // 表单验证规则
 const loginRules = reactive({
   username: [
-    { min: 3, max: 18, message: t('login.usernameLength'), trigger: 'blur' }
+    { min: 3, max: 18, message: '用户名长度在3到18个字符之间', trigger: 'blur' }
   ],
   password: [
-    { min: 6, max: 18, message: t('login.passwordLength'), trigger: 'blur' }
+    { min: 6, max: 18, message: '密码长度在6到18个字符之间', trigger: 'blur' }
   ]
 })
 
@@ -129,7 +129,7 @@ const handleLogin = () => {
     if (!valid) return
     // 检查是否有输入用户名和密码
     if (!loginForm.username || !loginForm.password) {
-      ElMessage.error(t('login.checknamepwd'));
+      ElMessage.error( '请输入用户名和密码');
       return;
     }
     if (loginForm.remember) {
@@ -170,8 +170,8 @@ const handleLogin = () => {
       router.push({ path: "/" })
     })
     .catch((err) => {
-      // console.error('错误信息：',err);
-      ElMessage.error(t('login.loginError'));
+      console.error('错误信息：',err);
+      ElMessage.error(err.message);
       loading.value = false;
     })
     .finally(() => {
@@ -199,9 +199,9 @@ const goToRegister = () => {
 }
 
 .background-image {
-  // position: absolute;
-  // top: 0;
-  // left: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   object-fit: fill;
@@ -209,21 +209,30 @@ const goToRegister = () => {
   z-index: 0;
 }
 
+.header {
+  width: 100%;
+  height: 70px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
+
 .background-left {
-  width: 60%;
+  width: 100%;
   height: 100%;
 }
 
 .login-form-container {
-  // position: absolute;
-  // left: 60%;
-  width: 40%;
+  position: absolute;
+  right: 54%;
+  width: 46%;
   height: 100%;
 }
 
 .login-box {
   height: 100%;
-  background-color: rgba(255, 255, 255, 0.6);
+  // background-color: rgba(255, 255, 255, 0.6);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -231,7 +240,7 @@ const goToRegister = () => {
 
 .login-card {
   border: none !important;
-  width: 80%;
+  width: 55%;
   background-color: transparent;
   :deep(.el-card__header) {
     border-bottom: none;
@@ -245,7 +254,7 @@ const goToRegister = () => {
     font-size: 14px;
     font-weight: 400;
     line-height: 39px; /* 保持垂直居中 */
-    color: #333333; /* 可选：设置label颜色 */
+    color: #2CFFFF; /* 可选：设置label颜色 */
     text-align: left;
   }
   
@@ -258,7 +267,7 @@ const goToRegister = () => {
 
   :deep(.el-input__wrapper) {
     background-color: transparent;
-    border: 1px solid #B3B3B3;
+    // border: 1px solid #B3B3B3;
     height: 39px;
   }
   
@@ -275,9 +284,9 @@ const goToRegister = () => {
 
   h2 {
     margin: 0;
-    font-size: 17px;
+    font-size: 26px;
     font-weight: 400;
-    color: #1A1A1A;
+    color: #2CFFFF;
     margin: 10px 0;
     font-style: normal;
     text-transform: none;
@@ -292,11 +301,21 @@ const goToRegister = () => {
 }
 
 .forgot-password{
-  color: #12739E;
+  color: #2CFFFF;
 }
 
 .remember-me {
-  color: #4D4D4D;
+  color: #FFFFFF;
+}
+
+// 选中的checkbox样式
+:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
+  color: #2CFFFF;
+}
+// 选中状态的checkbox背景色和边框色
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+  background-color: #2CFFFF;
+  border-color: #2CFFFF;
 }
 
 .login-btn {
@@ -304,18 +323,26 @@ const goToRegister = () => {
   height: 42px;
   margin-top: 10px;
   font-size: 16px;
-  background-color: #12739E;
+  background: linear-gradient( 355deg, #00ABFF 0%, #023187 100%);
+  border-radius: 0px 0px 0px 0px;
+  border: 2px solid #52C6FF;
 }
 
 .login-footer {
   display: flex;
   justify-content: center;
+  align-items: center;
   margin-top: 10px;
 }
 
 .register-prompt {
   margin-right: 5px;
-  font-size: 13px;
+  font-size: 12px;
+  color: #FFFFFF;
+}
+
+:deep(.el-link__inner){
+  color: #2CFFFF;
 }
 
 </style>

src/views/mainContent/rightaside/opProblem.vue

@@ -18,19 +18,67 @@
                 </el-col>
               </el-row>
             </div>
+            <div class="content-form content-form-right">
+              <div class="content-form-top">
+                <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
+                  <el-form-item label="扭曲分布">
+                    <el-input v-model="qitanOPData1.distortion"  size="small"></el-input>
+                  </el-form-item>
+                  <el-form-item label="上限">
+                    <el-input-number v-model="qitanOPData1.upperLimit"  size="small" controls-position="right"></el-input-number>
+                  </el-form-item>
+                  <el-form-item label="下限">
+                    <el-input-number v-model="qitanOPData1.lowerLimit"  size="small" controls-position="right"></el-input-number>
+                  </el-form-item>
+                </el-form>
+              </div>
+              <div class="content-form-bottom">
+                <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
+                  <el-form-item label="厚度分布">
+                    <el-input v-model="qitanOPData1.thickness"  size="small"></el-input>
+                  </el-form-item>
+                  <el-form-item label="上限">
+                    <el-input-number v-model="qitanOPData1.upperLimit"  size="small" controls-position="right"></el-input-number>
+                  </el-form-item>
+                  <el-form-item label="下限">
+                    <el-input-number v-model="qitanOPData1.lowerLimit"  size="small" controls-position="right"></el-input-number>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </div>
+          </div>
+        </div>
+        <el-divider />
+        <div class="second-container">
+          <div class="content-container">
+            <div class="content-aside">
+              <el-row justify="center">
+                <img src="@/assets/img/start.png" class="content-aside-img" alt="Experiment Icon" />
+              </el-row>
+              <el-row justify="center" align="middle" >
+                <el-col :span="14" :push="4">
+                  <span style="font-size: 10px;">约束条件</span>
+                </el-col>
+                <el-col :span="10">
+                  <el-switch v-model="qitanOPData2.isConstraint" class="custom-switch custom-switch-colors" />
+                </el-col>
+              </el-row>
+            </div>
             <div class="content-form content-form-right">
               <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
-                <el-form-item label="扭曲分布">
-                  <el-input v-model="qitanOPData.distortion"  size="small"></el-input>
+                <el-form-item label="约束参数">
+                 <el-select v-model="qitanOPData2.constraintParameter"  size="small">
+                  <el-option label="失效应力" value="1"></el-option>
+                 </el-select>
+                </el-form-item>
+                <el-form-item label="输入数值">
+                  <el-input-number v-model="qitanOPData2.inputValue"  size="small" controls-position="right"></el-input-number>
                 </el-form-item>
-                
               </el-form>
             </div>
           </div>
         </div>
-        <div class="second-container">
-          
-        </div>
+        <el-divider />
         <div class="third-container">
         </div>
         
@@ -45,8 +93,18 @@
 
 const Labelwidth = '70px';
 
-const qitanOPData = ref({
-  
+const qitanOPData1 = ref({
+  distortion: 0,
+  upperLimit: 100,
+  lowerLimit: 0,
+  thickness: 0,
+
+});
+
+const qitanOPData2 = ref({
+  isConstraint: true,
+  constraintParameter: '1',
+  inputValue: 0
 });
 
 </script>
@@ -72,6 +130,15 @@ const qitanOPData = ref({
   }
 }
 
+.content-form-top {
+  width: 100%;
+  height: 45%;
+}
+
+.content-form-bottom {
+  width: 100%;
+  height: 45%;
+}
 
 
 </style>

vite.config.ts

@@ -43,16 +43,16 @@ export default defineConfig(({ mode }) => {
     server: {
       proxy: {
         '/api': {
-          target: 'https://www.adicn.com/eps',
+          target: 'https://www.adicn.com/aircraft',
           secure: false,
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, '')
         },
-        '/eps': {
-          target: 'https://www.adicn.com/eps',
+        '/aircraft': {
+          target: 'https://www.adicn.com/aircraft',
           secure: false,
           changeOrigin: true,
-          rewrite: (path) => path.replace(/^\/eps/, '')
+          rewrite: (path) => path.replace(/^\/aircraft/, '')
         },
         '/file': {
           target: 'http://192.168.0.43:2201/',