manager/my-bigScreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏项目初始化

Browse Source
This commit is contained in:
gaoxq
2026-02-24 23:26:41 +08:00
commit 412e2ac1f7
236 changed files with 5907 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
screen-vue/src/views/Login.vue Normal file
View File

@@ -0,0 +1,194 @@
<template>
<div class="login-container">
<div class="full-bg"></div>
<div class="login-left">
<div class="left-bg-img"></div>
</div>
<div class="login-right">
<div class="login-form">
<h2 class="login-title">大屏报表系统登录</h2>
<el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" label-width="80px">
<el-form-item label="账号" prop="username">
<el-input
v-model="loginForm.username"
placeholder="请输入账号"
size="large"
prefix-icon="User"
></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
v-model="loginForm.password"
type="password"
placeholder="请输入密码"
size="large"
show-password
prefix-icon="Lock"
></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="handleLogin"
class="login-btn"
size="small"
:loading="isLoading"
>
登录
</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { login } from '@/api/user'
const router = useRouter()
const loginFormRef = ref(null)
const loginForm = ref({
username: '',
password: ''
})
const loginRules = ref({
username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})
const isLoading = ref(false)
const handleLogin = async () => {
try {
await loginFormRef.value.validate()
isLoading.value = true
const res = await login(loginForm.value)
localStorage.setItem('token', res.token)
localStorage.setItem('username', res.username)
ElMessage.success('登录成功！')
setTimeout(() => {
router.push('/dashboard')
}, 3000)
} catch (error) {
if (error.msg) {
ElMessage.error(error.msg)
} else {
ElMessage.error('登录失败，请检查账号密码！')
}
console.error('登录出错：', error)
} finally {
isLoading.value = false
}
}
</script>
<style scoped>
.login-container {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
position: relative;
}
.full-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e8f4f8 0%, #f0f8fb 100%);
z-index: 0;
}
.login-left {
width: 65%;
height: 100%;
position: relative;
z-index: 1;
}
.left-bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('@/assets/login-bg.png') no-repeat center center;
background-size: cover;
opacity: 0.95;
}
.login-right {
width: 35%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.8);
z-index: 1;
}
.login-form {
width: 420px;
padding: 40px 30px;
background: rgba(255, 255, 255, 0.95);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(149, 157, 165, 0.15);
border: 1px solid #e6f7ff;
margin: 0;
}
.login-title {
text-align: center;
color: #1890ff;
font-size: 24px;
font-weight: 600;
margin-bottom: 30px;
letter-spacing: 1px;
margin-top: 0;
}
.login-btn {
width: 100%;
background: #1890ff;
border-color: #1890ff;
height: 32px;
font-size: 14px;
}
.login-btn:hover {
background: #40a9ff;
border-color: #40a9ff;
}
@media (max-width: 1200px) {
.login-form {
width: 380px;
}
}
@media (max-width: 768px) {
.login-left {
display: none;
}
.login-right {
width: 100%;
background: rgba(255, 255, 255, 0.9);
}
.login-form {
width: 350px;
}
}
:global(body) {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>

346
screen-vue/src/views/desktop/index.vue Normal file
View File

@@ -0,0 +1,346 @@
<template>
<div class="big-screen-container">
<header class="screen-header">
<div class="title-center">
<h1 class="main-title">企业数据可视化大屏</h1>
</div>
<div class="tabs-container">
<div class="tabs-left">
<div
class="tab-item"
v-for="tab in allTabs"
:key="tab.key"
:class="{ active: activeTab === tab.key }"
@click="switchTab(tab.key)"
>
<span>{{ tab.name }}</span>
</div>
</div>
<div class="query-group">
<el-date-picker
type="daterange"
v-model="queryDate"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
popper-class="dark-date-popper"
></el-date-picker>
<button class="query-btn" @click="handleQuery">查询</button>
</div>
</div>
</header>
<main class="screen-content">
<div v-if="activeTab === 'sales'" class="screen-page">
<div class="demo-tip">📊 核心销售大屏内容</div>
</div>
<div v-else-if="activeTab === 'operation'" class="screen-page">
<div class="demo-tip">📈 运营分析大屏内容</div>
</div>
<div v-else-if="activeTab === 'inventory'" class="screen-page">
<div class="demo-tip">📦 库存管理大屏内容</div>
</div>
<div v-else-if="activeTab === 'finance'" class="screen-page">
<div class="demo-tip">💰 财务数据大屏内容</div>
</div>
</main>
</div>
</template>
<script setup>
import { ref } from 'vue'
const allTabs = [
{ key: 'sales', name: '销售大屏' },
{ key: 'operation', name: '运营大屏' },
{ key: 'inventory', name: '库存大屏' },
{ key: 'finance', name: '财务大屏' },
]
const activeTab = ref('sales')
const queryDate = ref('')
const switchTab = (key) => {
activeTab.value = key
}
const handleQuery = () => {
console.log('查询日期：', queryDate.value)
}
</script>
<!-- 专门处理日期弹窗的全局小样式（仅针对dark-date-popper，无全局污染） -->
<style>
.dark-date-popper {
z-index: 9999 !important;
background-color: #0f3460 !important;
border: 1px solid #1a508b !important;
}
.dark-date-popper .el-picker-panel,
.dark-date-popper .el-date-range-picker,
.dark-date-popper .el-date-range-picker__header,
.dark-date-popper .el-date-table,
.dark-date-popper .el-date-table th,
.dark-date-popper .el-date-table td {
background-color: #0f3460 !important;
color: #e0e6ff !important;
border-color: #1a508b !important;
}
.dark-date-popper .el-date-range-picker__content .el-date-range-picker__header {
background-color: #154580 !important;
}
.dark-date-popper .el-date-range-picker__content {
background-color: #0f3460 !important;
}
.dark-date-popper .el-date-table td.current,
.dark-date-popper .el-date-table td.start-date,
.dark-date-popper .el-date-table td.end-date {
background-color: #3c9cff !important;
color: #fff !important;
}
.dark-date-popper .el-date-table td.in-range {
background-color: rgba(60, 156, 255, 0.25) !important;
color: #e0e6ff !important;
}
.dark-date-popper .el-date-table-cell {
background-color: transparent !important;
}
.dark-date-popper .el-date-table-cell::before,
.dark-date-popper .el-date-table-cell::after {
background-color: transparent !important;
opacity: 0 !important;
}
.dark-date-popper .el-date-table td.in-range .el-date-table-cell::before {
background-color: rgba(60, 156, 255, 0.25) !important;
}
</style>
<!-- 组件专属样式（scoped隔离） -->
<style scoped>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.big-screen-container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: #0a1929;
background-image: inherit;
background-size: cover;
position: relative;
}
.big-screen-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 52, 96, 0.85);
z-index: 1;
}
.screen-header {
height: 75px;
padding: 0 2vw;
border-bottom: 1px solid #1a508b;
background: url('@/assets/images/biaoti.png') no-repeat center center,
linear-gradient(90deg, rgba(15, 52, 96, 0.8), rgba(21, 69, 128, 0.8));
background-size: cover;
position: relative;
z-index: 10;
}
.title-center {
position: absolute;
left: 50%;
top: 35%;
transform: translate(-50%, -50%);
}
.main-title {
font-size: 32px;
font-weight: 720;
background: #3c9cff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
white-space: nowrap;
letter-spacing: 2px;
}
.tabs-container {
position: absolute;
left: 0;
bottom: 1px;
width: 100%;
padding: 0 2vw;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
}
.tabs-left {
display: flex;
gap: 12px;
}
.tab-item {
height: 36px;
line-height: 36px;
padding: 0 20px;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
background: url('@/assets/images/button1.png') no-repeat center center;
background-size: 100% 100%;
color: #e0e6ff;
text-align: center;
border: none !important;
}
.tab-item:hover {
background: url('@/assets/images/button2.png') no-repeat center center;
background-size: 100% 100%;
color: #fff;
}
.tab-item.active {
background: url('@/assets/images/button2.png') no-repeat center center;
background-size: 100% 100%;
color: #fff;
font-weight: 500;
box-shadow: 0 2px 8px rgba(60, 156, 255, 0.4);
border: none !important;
}
.query-group {
display: flex;
gap: 10px;
align-items: center;
justify-content: flex-end;
height: 100%;
}
/* 日期输入框样式（scoped+deep穿透） */
:deep(.el-input),
:deep(.el-input__wrapper),
:deep(.el-input__inner) {
background-color: #0f3460 !important;
color: #e0e6ff !important;
border: 1px solid #1a508b !important;
box-shadow: none !important;
}
:deep(.el-input.is-focus .el-input__wrapper) {
box-shadow: 0 0 0 1px #3c9cff inset !important;
}
:deep(.el-date-editor .el-range-input) {
color: #e0e6ff !important;
}
:deep(.el-date-editor .el-range-separator) {
color: #e0e6ff !important;
margin-bottom: 5px !important;
}
.query-btn {
height: 36px;
padding: 0 20px;
border-radius: 8px;
background: linear-gradient(90deg, #1a508b, #3c9cff);
border: 1px solid #1a508b;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.query-btn:hover {
box-shadow: 0 2px 8px rgba(60, 156, 255, 0.6);
background: linear-gradient(90deg, #154580, #2b8ed8);
}
.screen-content {
flex: 1;
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 10;
}
.screen-page {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 52, 96, 0.8);
border: 1px solid #1a508b;
border-radius: 12px;
backdrop-filter: blur(8px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.demo-tip {
font-size: 24px;
color: #e0e6ff;
letter-spacing: 1px;
}
@media (max-width: 1600px) {
.main-title {
font-size: 24px;
}
.tab-item {
padding: 0 18px;
font-size: 14px;
height: 32px;
line-height: 32px;
}
.date-picker-wrapper {
width: 220px;
height: 32px;
}
.query-btn {
height: 32px;
font-size: 14px;
padding: 0 18px;
}
}
@media (max-height: 900px) {
.screen-header {
height: 65px;
}
.tabs-container {
bottom: 1px;
}
.tab-item {
height: 32px;
line-height: 32px;
}
.date-picker-wrapper {
height: 32px;
}
.query-btn {
height: 32px;
}
.screen-content {
padding: 15px;
}
}
</style>