1

haMgr/prompt.txt

@@ -51,3 +51,14 @@
 
 无法拍摄数据页面修改
 1、图表展现形式还是不对，按照“串号数据统计”页面中“设备识别通过率”的图表展现形式，改成堆叠柱状图方式呈现，x轴数据为13个地市,y轴为数据为占比
+
+无法拍摄数据页面修改
+1、图表展现形式还是不对，改成每个地市的y轴都有四个柱状图，分别代表1次、2次、3次、4次及以上
+
+给本项目开发一个登录页面
+1、登录页面风格和其他页面保持一致
+2、页面显示内容：标题，账号输入框，密码输入框（默认隐藏输入密码，有眼睛图标可以切换显示和隐藏），登录和重置按钮
+3、登录成功后，默认进入"质检工单列表"页面
+
+
+去掉“个人中心”选项，点击“退出登录”退出到登录页面
\ No newline at end of file

haMgr/web-admin/src/layouts/DefaultLayout.vue

 <script setup lang="ts">
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { Menu as IconMenu, DataLine, Document } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
 
 const route = useRoute()
+const router = useRouter()
+
+const handleLogout = () => {
+    ElMessage.success('退出登录成功')
+    router.push('/login')
+}
 </script>
 
 <template>
@@ -51,8 +58,7 @@ const route = useRoute()
             </span>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item>个人中心</el-dropdown-item>
-                <el-dropdown-item divided>退出登录</el-dropdown-item>
+                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>

haMgr/web-admin/src/router/index.ts

@@ -41,6 +41,11 @@ const router = createRouter({
                     component: () => import('../views/stats/NoPhotoStats.vue')
                 }
             ]
+        },
+        {
+            path: '/login',
+            name: 'Login',
+            component: () => import('../views/Login.vue')
         }
     ]
 })

haMgr/web-admin/src/views/Login.vue

+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { User, Lock, View, Hide } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+
+const router = useRouter()
+const loginFormRef = ref()
+const loading = ref(false)
+
+const loginForm = reactive({
+  username: '',
+  password: ''
+})
+
+const rules = {
+  username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+}
+
+const handleLogin = async (formEl: any) => {
+  if (!formEl) return
+  await formEl.validate((valid: boolean) => {
+    if (valid) {
+      loading.value = true
+      setTimeout(() => {
+        loading.value = false
+        ElMessage.success('登录成功')
+        router.push('/order-list')
+      }, 1000)
+    }
+  })
+}
+
+const handleReset = (formEl: any) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+</script>
+
+<template>
+  <div class="login-container flex justify-center items-center h-screen bg-gray-100">
+    <el-card class="w-full max-w-md" shadow="hover">
+      <template #header>
+        <div class="text-center font-bold text-xl text-gray-800">质检管理平台</div>
+      </template>
+      
+      <el-form
+        ref="loginFormRef"
+        :model="loginForm"
+        :rules="rules"
+        label-width="0"
+        size="large"
+      >
+        <el-form-item prop="username">
+          <el-input 
+            v-model="loginForm.username" 
+            placeholder="请输入账号"
+            :prefix-icon="User"
+          />
+        </el-form-item>
+        
+        <el-form-item prop="password">
+          <el-input 
+            v-model="loginForm.password" 
+            type="password" 
+            placeholder="请输入密码"
+            :prefix-icon="Lock"
+            show-password
+            @keyup.enter="handleLogin(loginFormRef)"
+          />
+        </el-form-item>
+        
+        <el-form-item>
+          <div class="flex w-full gap-4">
+            <el-button 
+              type="primary" 
+              class="flex-1" 
+              :loading="loading" 
+              @click="handleLogin(loginFormRef)"
+            >
+              登录
+            </el-button>
+            <el-button 
+              class="flex-1" 
+              @click="handleReset(loginFormRef)"
+            >
+              重置
+            </el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.login-container {
+  /* Fallback gradient */
+  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
+  /* Dark Tech Background Image */
+  background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+:deep(.el-card) {
+  background-color: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(5px);
+  border: none;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+}
+</style>

haMgr/web-admin/src/views/stats/NoPhotoStats.vue

@@ -32,10 +32,10 @@ const initChart = () => {
             xAxis: { type: 'category', data: ['南京', '无锡', '徐州', '常州', '苏州', '南通', '连云港', '淮安', '盐城', '扬州', '镇江', '泰州', '宿迁'], axisLabel: { interval: 0, rotate: 30 } },
             yAxis: { type: 'value', name: '占比%' },
             series: [
-                { name: '1次', type: 'bar', stack: 'total', label: { show: true }, data: [50, 45, 60, 55, 40, 50, 60, 50, 55, 45, 60, 50, 40] },
-                { name: '2次', type: 'bar', stack: 'total', label: { show: true }, data: [25, 30, 20, 25, 30, 25, 20, 25, 20, 30, 20, 25, 30] },
-                { name: '3次', type: 'bar', stack: 'total', label: { show: true }, data: [15, 15, 10, 10, 20, 15, 10, 15, 15, 15, 10, 15, 20] },
-                { name: '4次及以上', type: 'bar', stack: 'total', label: { show: true }, data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10] }
+                { name: '1次', type: 'bar', label: { show: true, position: 'top' }, data: [50, 45, 60, 55, 40, 50, 60, 50, 55, 45, 60, 50, 40] },
+                { name: '2次', type: 'bar', label: { show: true, position: 'top' }, data: [25, 30, 20, 25, 30, 25, 20, 25, 20, 30, 20, 25, 30] },
+                { name: '3次', type: 'bar', label: { show: true, position: 'top' }, data: [15, 15, 10, 10, 20, 15, 10, 15, 15, 15, 10, 15, 20] },
+                { name: '4次及以上', type: 'bar', label: { show: true, position: 'top' }, data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10] }
             ]
         })
     }