修改中台和组件引入

董国庆

2025-06-20 e169d66efe2eebc580ba405f1c984914c422ce0a

 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%;
        }