From e169d66efe2eebc580ba405f1c984914c422ce0a Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期五, 20 六月 2025 11:03:52 +0800
Subject: [PATCH] 修改中台和组件引入
---
laboratory/src/views/middleground/index.vue | 332 +++++++++++++++++++++++++++++-------------------------
1 files changed, 179 insertions(+), 153 deletions(-)
diff --git a/laboratory/src/views/middleground/index.vue b/laboratory/src/views/middleground/index.vue
index 053d459..deae445 100644
--- a/laboratory/src/views/middleground/index.vue
+++ b/laboratory/src/views/middleground/index.vue
@@ -5,13 +5,16 @@
</div>
<div class="middleground" :class="{
- 'column': windowWidth < 1240,
- 'mobile': windowWidth < 800
+ column: windowWidth < 1240,
+ mobile: windowWidth < 800,
}">
<!-- 左侧模块区域 -->
- <div class="left-modules" :class="[currentModuleLayout, {
- 'mobile-layout': windowWidth < 800
- }]">
+ <div class="left-modules" :class="[
+ currentModuleLayout,
+ {
+ 'mobile-layout': windowWidth < 800,
+ },
+ ]">
<div class="module-item" v-for="(item, index) in filteredModuleList" :key="index"
@click="handleModuleClick(item)">
<div class="module-bg"></div>
@@ -29,7 +32,7 @@
<!-- 日历 -->
<div class="calendar-section">
<div class="title-canlender">日历</div>
- <a-calendar @panelChange="onPanelChange" />
+ <a-calendar @panelChange="onPanelChange" :locale="local" />
</div>
<!-- 待办事项 -->
@@ -40,11 +43,9 @@
<div class="todo-item" v-for="i in 6" :key="i">
<div class="todo-details">
<div class="notice-card">
- <div class="todo-icon">
- </div>
+ <div class="todo-icon"></div>
<div class="red-notice"></div>
</div>
-
<span class="todo-title">您有 [1] 条 【项目课题方案】 等待审批</span>
</div>
@@ -59,18 +60,17 @@
</div>
</div>
</div>
-
-
</div>
</template>
<script>
-import { Calendar } from 'ant-design-vue';
-import { loginReq } from './service'
-import HeaderNav from '../../layouts/components/HeaderNav.vue'
+import { Calendar } from "ant-design-vue";
+import { loginReq } from "./service";
+import HeaderNav from "../../layouts/components/HeaderNav.vue";
+import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
// 引入 Element UI 的日历组件
// import { ElCalendar } from 'element-ui';
export default {
- name: 'Login',
+ name: "Login",
components: {
HeaderNav,
ACalendar: Calendar,
@@ -80,146 +80,146 @@
data() {
return {
windowWidth: window.innerWidth,
-
+ local: zhCN,
loginForm: {
- username: '',
- password: ''
+ username: "",
+ password: "",
},
date: new Date(),
- viewWidth: '',
+ viewWidth: "",
scale: 1,
// 审批人
moduleList2: [
- {
- text: '实验室运行模块',
- icon: require('../../assets/login/img1.png'),
- path: '/dataManagement'
+ {
+ text: "实验室运行模块",
+ icon: require("../../assets/login/img1.png"),
+ path: "/dataManagement/approvalPlan",
},
{
- text: '专业报告库',
- icon: require('../../assets/login/img2.png'),
- path: '/reportLibrary'
+ text: "专业报告库",
+ icon: require("../../assets/login/img2.png"),
+ path: "/reportLibrary/feasibilityStudy",
},
{
- text: '化验师提交',
- icon: require('../../assets/login/img7.png'),
- path: '/chemistQa'
+ text: "化验师提交",
+ icon: require("../../assets/login/img7.png"),
+ path: "/chemistQa/projectTesting",
},
{
- text: '评定模块',
- icon: require('../../assets/login/img4.png'),
- path: '/deliveryAssessment'
- }
+ text: "评定模块",
+ icon: require("../../assets/login/img4.png"),
+ path: "/deliveryAssessment/projectTeamIntegral",
+ },
],
// 工艺工程师
moduleList3: [
{
- text: '实验室运行模块',
- icon: require('../../assets/login/img1.png'),
- path: '/dataManagement'
+ text: "实验室运行模块",
+ icon: require("../../assets/login/img1.png"),
+ path: "/dataManagement/approvalPlan",
},
{
- text: '评定模块',
- icon: require('../../assets/login/img4.png'),
- path: '/deliveryAssessment'
+ text: "评定模块",
+ icon: require("../../assets/login/img4.png"),
+ path: "/deliveryAssessment/projectTeamIntegral",
},
{
- text: '专业报告库',
- icon: require('../../assets/login/img2.png'),
- path: '/reportLibrary'
+ text: "专业报告库",
+ icon: require("../../assets/login/img2.png"),
+ path: "/reportLibrary/feasibilityStudy",
},
{
- text: '化验师QA专题报告库',
- icon: require('../../assets/login/img7.png'),
- path: '/chemistQa'
- }
+ text: "化验师QA专题报告库",
+ icon: require("../../assets/login/img7.png"),
+ path: "/chemistQa/projectTesting",
+ },
],
// 化验师
moduleList4: [
{
- text: '实验室运行模块',
- icon: require('../../assets/login/img1.png'),
- path: '/dataManagement'
+ text: "实验室运行模块",
+ icon: require("../../assets/login/img1.png"),
+ path: "/dataManagement/dispatching",
},
{
- text: '评定模块',
- icon: require('../../assets/login/img4.png'),
- path: '/deliveryAssessment'
+ text: "评定模块",
+ icon: require("../../assets/login/img4.png"),
+ path: "/deliveryAssessment/projectTeamIntegral",
},
{
- text: '专业报告库',
- icon: require('../../assets/login/img2.png'),
- path: '/reportLibrary'
+ text: "专业报告库",
+ icon: require("../../assets/login/img2.png"),
+ path: "/reportLibrary/feasibilityStudy",
},
{
- text: '化验师提交',
- icon: require('../../assets/login/img7.png'),
- path: '/chemistQa'
- }
+ text: "化验师提交",
+ icon: require("../../assets/login/img7.png"),
+ path: "/chemistQa/projectTesting",
+ },
],
// 实验员
moduleList5: [
{
- text: '实验室运行模块',
- icon: require('../../assets/login/img1.png'),
- path: '/dataManagement'
+ text: "实验室运行模块",
+ icon: require("../../assets/login/img1.png"),
+ path: "/dataManagement/dispatching",
},
- {
- text: '菌种库',
- icon: require('../../assets/login/img8.png'),
- path: '/projectList'
- },
- {
- text: '专业报告库',
- icon: require('../../assets/login/img2.png'),
- path: '/reportLibrary'
- },
- {
- text: '化验师提交',
- icon: require('../../assets/login/img3.png'),
- path: '/chemistQa'
- },
+ // {
+ // text: "菌种库",
+ // icon: require("../../assets/login/img8.png"),
+ // path: "/projectList/list",
+ // },
{
text: '评定模块',
icon: require('../../assets/login/img4.png'),
- path: '/deliveryAssessment'
+ path: '/deliveryAssessment/projectTeamIntegral'
+ },
+ {
+ text: "专业报告库",
+ icon: require("../../assets/login/img2.png"),
+ path: "/reportLibrary/feasibilityStudy",
+ },
+ {
+ text: "化验师提交",
+ icon: require("../../assets/login/img3.png"),
+ path: "/chemistQa/projectTesting",
},
],
// 超级管理员
moduleList6: [
{
- text: '实验室运行模块',
- icon: require('../../assets/login/img1.png'),
- path: '/dataManagement'
+ text: "实验室运行模块",
+ icon: require("../../assets/login/img1.png"),
+ path: "/dataManagement/approvalPlan",
},
{
- text: '评定模块',
- icon: require('../../assets/login/img4.png'),
- path: '/deliveryAssessment'
+ text: "评定模块",
+ icon: require("../../assets/login/img4.png"),
+ path: "/deliveryAssessment/projectTeamIntegral",
},
{
- text: '项目组管理',
- icon: require('../../assets/login/img5.png'),
- path: '/projectList'
+ text: "项目组管理",
+ icon: require("../../assets/login/img5.png"),
+ path: "/projectList/list",
},
{
- text: '专业报告库',
- icon: require('../../assets/login/img2.png'),
- path: '/reportLibrary'
+ text: "专业报告库",
+ icon: require("../../assets/login/img2.png"),
+ path: "/reportLibrary/feasibilityStudy",
},
{
- text: '化验师提交',
- icon: require('../../assets/login/img7.png'),
- path: '/chemistQa'
+ text: "化验师提交",
+ icon: require("../../assets/login/img7.png"),
+ path: "/chemistQa/projectTesting",
},
{
- text: '系统管理',
- icon: require('../../assets/login/img6.png'),
- path: '/system'
- }
- ]
- }
+ text: "系统管理",
+ icon: require("../../assets/login/img6.png"),
+ path: "/system/user",
+ },
+ ],
+ };
},
created() {
@@ -229,7 +229,6 @@
mounted() {
// 监听窗口大小变化
window.addEventListener("resize", this.handleResize);
-
},
beforeDestroy() {
// 组件销毁前移除事件监听
@@ -237,24 +236,24 @@
},
methods: {
onPanelChange(e) {
- console.log('eeeeeee', e)
+ console.log("eeeeeee", e);
},
// 添加处理窗口大小变化的方法
handleResize() {
this.windowWidth = window.innerWidth;
},
handleModuleClick(item) {
- if(item.path){
- this.$router.push({
- path: item.path,
- })
- }
+ if (item.path) {
+ this.$router.push({
+ path: item.path,
+ });
+ }
},
},
computed: {
currentModuleList() {
- const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
- const userType = userInfo.userType;
+ const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
+ const userType = userInfo.roleType;
switch (userType) {
case 2: // 审批人
@@ -272,29 +271,29 @@
}
},
filteredModuleList() {
- return this.currentModuleList.filter(item => item);
+ return this.currentModuleList.filter((item) => item);
},
currentModuleLayout() {
- const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
- const userType = userInfo.userType;
+ const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
+ const userType = userInfo.roleType;
switch (userType) {
case 2: // 审批人
- return 'layout-4';
+ return "layout-4";
case 3: // 工艺工程师
- return 'layout-4';
+ return "layout-4";
case 4: // 化验师
- return 'layout-4';
+ return "layout-4";
case 5: // 实验员
- return 'layout-5';
+ return "layout-4";
case 6: // 超级管理员
- return 'layout-6';
+ return "layout-6";
default:
- return 'layout-6'; // 默认返回化验师的布局
+ return "layout-6"; // 默认返回化验师的布局
}
- }
- }
-}
+ },
+ },
+};
</script>
<style scoped lang="less">
.flex {
@@ -313,7 +312,7 @@
width: 100vw;
min-height: 100vh;
/* 确保页面至少和视口一样高，并随内容扩展 */
- background: url('../../assets/login/midBg.png') no-repeat center center;
+ background: url("../../assets/login/midBg.png") no-repeat center center;
background-size: cover;
display: flex;
flex-direction: column;
@@ -364,6 +363,7 @@
.module-item {
width: 100%;
height: 307px;
+ border-radius: 20px;
}
}
@@ -431,6 +431,8 @@
cursor: pointer;
transition: all 0.3s ease;
overflow: hidden;
+ border-radius: 20px;
+ padding-bottom: 40px;
}
.module-bg {
@@ -439,7 +441,7 @@
left: 0;
width: 100%;
height: calc(100% - 75px);
- background: url('../../assets/login/cardBg.png') no-repeat center;
+ background: url("../../assets/login/cardBg.png") no-repeat center;
background-size: cover;
transition: transform 0.3s ease;
z-index: 1;
@@ -460,18 +462,20 @@
display: flex;
justify-content: center;
align-items: center;
- background: url('../../assets/login/iconBg.png') no-repeat center;
+ background: url("../../assets/login/iconBg.png") no-repeat center;
background-size: 100% 100%;
z-index: 2;
&::before {
- content: '';
+ content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 40px;
- background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
+ background: linear-gradient(to bottom,
+ rgba(255, 255, 255, 0.3) 0%,
+ rgba(255, 255, 255, 0) 100%);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
pointer-events: none;
@@ -479,13 +483,15 @@
}
&::after {
- content: '';
+ content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
- background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
+ background: linear-gradient(to bottom,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(255, 255, 255, 0.8) 100%);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
pointer-events: none;
@@ -514,14 +520,16 @@
z-index: 3;
&::after {
- content: '';
+ content: "";
position: absolute;
left: 50%;
- bottom: -5px;
+ bottom: -15px;
transform: translateX(-50%);
- width: 50%;
- height: 2px;
- background-color: #007bff;
+
+ width: 66px;
+ height: 3px;
+ background: #24595b;
+ border-radius: 1px;
}
}
@@ -774,7 +782,7 @@
.ant-fullcalendar-header {
.ant-radio-group {
.ant-radio-button-wrapper {
- background: #FFFFFF;
+ background: #ffffff;
margin: 0 4px;
color: #666;
@@ -785,7 +793,7 @@
&.ant-radio-button-wrapper-checked {
background-color: #009688 !important;
border-color: #009688 !important;
- color: #FFFFFF !important;
+ color: #ffffff !important;
box-shadow: none !important;
}
}
@@ -793,8 +801,8 @@
.ant-select {
.ant-select-selection {
- background: #FFFFFF;
- border: 1px solid #EDEDED;
+ background: #ffffff;
+ border: 1px solid #ededed;
border-radius: 8px;
color: #666;
@@ -815,8 +823,8 @@
.ant-select-dropdown {
.ant-select-dropdown-menu {
- background: #FFFFFF;
- border: 1px solid #EDEDED;
+ background: #ffffff;
+ border: 1px solid #ededed;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
@@ -825,11 +833,12 @@
&:hover {
background-color: #f0f0f0;
+ // color: #f0f0f0;
}
&.ant-select-dropdown-menu-item-selected {
background-color: #009688 !important;
- color: #FFFFFF !important;
+ color: #ffffff !important;
}
}
}
@@ -856,15 +865,15 @@
margin: 0;
padding: 0;
height: 55px;
- background: #FFFFFF;
+ background: #ffffff;
border-radius: 8px;
- border: 1px solid #EDEDED;
+ border: 1px solid #ededed;
display: flex;
justify-content: center;
align-items: center;
&:hover {
- background-color: rgba(4, 156, 154, .1);
+ background-color: rgba(4, 156, 154, 0.1);
}
.ant-fullcalendar-value {
@@ -885,21 +894,40 @@
&.ant-fullcalendar-today .ant-fullcalendar-date {
// border-color: #009688;
}
+
+ &.ant-fullcalendar-last-month-cell {
+ .ant-fullcalendar-value {
+ color: #ffffff !important;
+ }
+ }
+
+ &.ant-fullcalendar-next-month-btn-day {
+ .ant-fullcalendar-date {}
+
+ .ant-fullcalendar-value {
+ color: #ffffff !important;
+
+ &:hover {
+ // background: #FFFFFF;
+ color: rgba(4, 156, 154, 0.1) !important;
+ }
+ }
+ }
}
}
.ant-fullcalendar-month-panel-selected-cell {
.ant-fullcalendar-month {
border-top-color: #009688 !important;
- background: rgba(4, 156, 154, .2);
+ background: rgba(4, 156, 154, 0.2);
.ant-fullcalendar-value {
- color: #FFFFFF;
+ color: #ffffff;
}
:hover {
.ant-fullcalendar-month {
- background: rgba(4, 156, 154, .2);
+ background: rgba(4, 156, 154, 0.2);
}
}
}
@@ -911,7 +939,7 @@
:hover {
.ant-fullcalendar-month {
- background: rgba(4, 156, 154, .2);
+ background: rgba(4, 156, 154, 0.2);
}
}
}
@@ -919,7 +947,7 @@
.ant-fullcalendar-month-panel-cell {
.ant-fullcalendar-month:hover {
- background: rgba(4, 156, 154, .2);
+ background: rgba(4, 156, 154, 0.2);
}
}
}
@@ -955,7 +983,7 @@
display: flex;
align-items: center;
justify-content: space-between;
- margin-bottom: 20PX;
+ margin-bottom: 20px;
/* 分隔线 */
&:first-child {
@@ -970,7 +998,6 @@
.notice-card {
position: relative;
margin-right: 12px;
-
}
.todo-icon {
@@ -978,10 +1005,9 @@
width: 24px;
height: 24px;
flex-shrink: 0;
- background: url('../../assets//login/notice.png') no-repeat center;
+ background: url("../../assets//login/notice.png") no-repeat center;
background-position: center;
background-size: 100% 100%;
-
}
.red-notice {
@@ -1013,7 +1039,7 @@
margin-right: 6px;
margin-left: 20px;
flex-shrink: 0;
- background: url('../../assets//login/time.png') no-repeat center;
+ background: url("../../assets//login/time.png") no-repeat center;
background-position: center;
background-size: 100% 100%;
}
@@ -1023,7 +1049,7 @@
height: 14px;
margin-right: 6px;
flex-shrink: 0;
- background: url('../../assets//login/mi.png') no-repeat center;
+ background: url("../../assets//login/mi.png") no-repeat center;
background-position: center;
background-size: 100% 100%;
}
--
Gitblit v1.7.1