| | |
| | | </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> |
| | |
| | | <!-- 日历 --> |
| | | <div class="calendar-section"> |
| | | <div class="title-canlender">日历</div> |
| | | <a-calendar @panelChange="onPanelChange" /> |
| | | <a-calendar @panelChange="onPanelChange" :locale="local" /> |
| | | </div> |
| | | |
| | | <!-- 待办事项 --> |
| | |
| | | <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> |
| | |
| | | </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, |
| | |
| | | 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() { |
| | |
| | | mounted() { |
| | | // 监听窗口大小变化 |
| | | window.addEventListener("resize", this.handleResize); |
| | | |
| | | }, |
| | | beforeDestroy() { |
| | | // 组件销毁前移除事件监听 |
| | |
| | | }, |
| | | 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: // 审批人 |
| | |
| | | } |
| | | }, |
| | | 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 { |
| | |
| | | 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; |
| | |
| | | .module-item { |
| | | width: 100%; |
| | | height: 307px; |
| | | border-radius: 20px; |
| | | } |
| | | } |
| | | |
| | |
| | | cursor: pointer; |
| | | transition: all 0.3s ease; |
| | | overflow: hidden; |
| | | border-radius: 20px; |
| | | padding-bottom: 40px; |
| | | } |
| | | |
| | | .module-bg { |
| | |
| | | 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; |
| | |
| | | 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; |
| | |
| | | } |
| | | |
| | | &::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; |
| | |
| | | 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; |
| | | } |
| | | } |
| | | |
| | |
| | | .ant-fullcalendar-header { |
| | | .ant-radio-group { |
| | | .ant-radio-button-wrapper { |
| | | background: #FFFFFF; |
| | | background: #ffffff; |
| | | margin: 0 4px; |
| | | color: #666; |
| | | |
| | |
| | | &.ant-radio-button-wrapper-checked { |
| | | background-color: #009688 !important; |
| | | border-color: #009688 !important; |
| | | color: #FFFFFF !important; |
| | | color: #ffffff !important; |
| | | box-shadow: none !important; |
| | | } |
| | | } |
| | |
| | | |
| | | .ant-select { |
| | | .ant-select-selection { |
| | | background: #FFFFFF; |
| | | border: 1px solid #EDEDED; |
| | | background: #ffffff; |
| | | border: 1px solid #ededed; |
| | | border-radius: 8px; |
| | | color: #666; |
| | | |
| | |
| | | |
| | | .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); |
| | | |
| | |
| | | |
| | | &:hover { |
| | | background-color: #f0f0f0; |
| | | // color: #f0f0f0; |
| | | } |
| | | |
| | | &.ant-select-dropdown-menu-item-selected { |
| | | background-color: #009688 !important; |
| | | color: #FFFFFF !important; |
| | | color: #ffffff !important; |
| | | } |
| | | } |
| | | } |
| | |
| | | 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 { |
| | |
| | | &.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); |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | :hover { |
| | | .ant-fullcalendar-month { |
| | | background: rgba(4, 156, 154, .2); |
| | | background: rgba(4, 156, 154, 0.2); |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | .ant-fullcalendar-month-panel-cell { |
| | | .ant-fullcalendar-month:hover { |
| | | background: rgba(4, 156, 154, .2); |
| | | background: rgba(4, 156, 154, 0.2); |
| | | } |
| | | } |
| | | } |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-bottom: 20PX; |
| | | margin-bottom: 20px; |
| | | |
| | | /* 分隔线 */ |
| | | &:first-child { |
| | |
| | | .notice-card { |
| | | position: relative; |
| | | margin-right: 12px; |
| | | |
| | | } |
| | | |
| | | .todo-icon { |
| | |
| | | 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 { |
| | |
| | | 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%; |
| | | } |
| | |
| | | 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%; |
| | | } |