zc

src/router/index.js

@@ -46,9 +46,16 @@ export const constantRoutes = [
     component: (resolve) => require(['@/views/basicsModules/login.vue'], resolve),
     hidden: true
   },
+  //公共版本
+  // {
+  //   path: '/home',
+  //   component: (resolve) => require(['@/views/basicsModules/home'], resolve),
+  //   hidden: true
+  // },
+  //西农版本
   {
     path: '/home',
-    component: (resolve) => require(['@/views/basicsModules/home'], resolve),
+    component: (resolve) => require(['@/views/basicsModules/homeXiNong.vue'], resolve),
     hidden: true
   },
   {

src/views/basicsModules/homeXiNong.vue

@@ -0,0 +1,727 @@
+<template>
+  <div class="homeXiNong" :class="userType != 22&&initPage ? 'home-class' : ''">
+    <home-navbar/>
+    <div class="max-big-home-box" v-if="userType != 22&&initPage">
+      <div class="max-home-button-box">
+        <div class="max-home-box">
+          <div class="max-bottom-box">
+            <div class="top-button-box">
+              <div class="left-box">
+                <div class="position-button"
+                     v-for="(item,index) in leftButtonData" @click="goPage(item)">
+                  <div>
+                    <img :src="item.imgUrl">
+                  </div>
+                </div>
+              </div>
+              <div class="center-box">
+                <div class="position-button"
+                     style="cursor: auto"
+                     v-for="(item,index) in centerButtonList">
+                  <div>
+                    <img :src="item.imgUrl">
+                  </div>
+                </div>
+              </div>
+              <div class="right-box">
+                <div class="position-button"
+                     v-for="(item,index) in rightButtonData" @click="goPage(item)">
+                  <div>
+                    <img :src="item.imgUrl">
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="center-button-box display-none-one"></div>
+            <div class="bottom-button-box">
+              <div class="null-button"></div>
+              <div class="position-button"
+                   v-for="(item,index) in buttonButtonData" @click="goPage(item)">
+                <div>
+                  <img :src="item.imgUrl">
+                </div>
+              </div>
+              <div class="null-button"></div>
+            </div>
+          </div>
+          <img class="img-1" src="@/assets/ZDimages/basicsModules/img_sy_lf.png">
+          <img class="img-2" src="@/assets/ZDimages/basicsModules/img_yh_db.png">
+          <img class="img-3" src="@/assets/ZDimages/basicsModules/img_yh_zj.png">
+          <img class="img-4" src="@/assets/ZDimages/basicsModules/img_yh_dd.png">
+          <img class="img-5" src="@/assets/ZDimages/basicsModules/img_yh_zj.png">
+          <img class="img-6" src="@/assets/ZDimages/basicsModules/img_yh_db.png">
+        </div>
+      </div>
+    </div>
+    <backAnimation v-if="userType != '22'&&initPage"></backAnimation>
+  </div>
+</template>
+
+<script>
+  import store from '@/store'
+  import router from '@/router'
+  import backAnimation from './components/backAnimation'
+  import homeNavbar from './components/homeNavbar.vue'
+  import { xmlRequestLink } from '@/utils/menuLink'
+
+  export default {
+    name: 'home',
+    components: {
+      homeNavbar,
+      backAnimation
+    },
+    data() {
+      return {
+        userType: localStorage.getItem('userType'),
+        initPage: JSON.parse(localStorage.getItem('initPage')),
+        homeConfigData: JSON.parse(localStorage.getItem('homeConfig')),
+        routeData: JSON.parse(localStorage.getItem('routeData')),
+        leftButtonData: [
+          {
+            buttonType: true,
+            buttonName: '安全教育与考试',
+            menuName: '安全教育与考试',
+            isFrame: true,
+            path: 'aqjyyks',
+            imgUrl: require('@/assets/ZDimages/basicsModules/homeXiNong/icon_sy_aqjyks.png'),
+          },
+          {
+            buttonType: true,
+            buttonName: '实验室安全准入',
+            menuName: '实验室安全准入',
+            isFrame: false,
+            path: 'secureAccess',
+            imgUrl: require('@/assets/ZDimages/basicsModules/homeXiNong/icon_sy_sysaqzr.png'),
+          },
+          {
+            buttonType: true,
+            buttonName: '化学品智能管控',
+            menuName: '化学品智能管控',
+            isFrame: false,
+            path: 'chemicalManage',
+            imgUrl: require('@/assets/ZDimages/basicsModules/homeXiNong/icon_sy_hxpzngk.png'),
+          },
+          {
+            buttonType: true,
+            buttonName: '设备综合管理',
+            menuName: '设备综合管理',
+            isFrame: true,
+            path: 'shebeizichan',
+            imgUrl: require('@/assets/ZDimages/basicsModules/homeXiNong/icon_sy_sbzhgl.png'),
+          },
+        ],
+        rightButtonData: [
+          {
+            buttonType: true,
+            buttonName: '安全检查管理',
+            menuName: '安全检查管理',
+            isFrame: false,
+            path: 'safetyCheck',
+            imgUrl: require('@/assets/ZDimages/basicsModules/homeXiNong/icon_sy_aqjcgl.png'),
+          },
+          {
+            buttonType: true,
+            buttonName: '实验室分级分类',
+            menuName: '实验室分级分类',
+            isFrame: false,
+            path: 'hierarchicalControl',
+            imgUrl: require('@/assets/ZDimages/basicsModules/homeXiNong/icon_sy_sysfjfl.png'),
+          },
+          {
+            buttonType: true,
+            buttonName: '实验动物中心',
+            menuName: '实验动物中心',
+            isFrame: true,
+            path: 'longweiguanli',
+            imgUrl: require('@/assets/ZDimages/basicsModules/homeXiNong/icon_sy_sydwzx.png'),
+          },
+          {
+            buttonType: true,
+            buttonName: '实验资源预约',
+            menuName: '实验资源预约',
+            isFrame: true,
+            path: 'shiyanziyuanyuyue',
+            imgUrl: require('@/assets/ZDimages/basicsModules/homeXiNong/icon_sy_syszyyy.png'),
+          },
+        ],
+        centerButtonList:[
+          {
+            buttonType: true,
+            buttonName: '大仪共享预约',
+            menuName: '大仪共享预约',
+            isFrame: true,
+            path: 'dayigongxiangyuyue',
+            imgUrl: require('@/assets/ZDimages/basicsModules/homeXiNong/icon_sydlpt_sjksh.png'),
+          },
+        ],
+        buttonButtonData: [
+          {
+            buttonType: true,
+            buttonName: '大仪共享预约',
+            menuName: '大仪共享预约',
+            isFrame: true,
+            path: 'dayigongxiangyuyue',
+            imgUrl: require('@/assets/ZDimages/basicsModules/homeXiNong/icon_sy_dygxyy.png'),
+          },
+          {
+            buttonType: true,
+            buttonName: '资产管理系统',
+            menuName: '资产管理系统',
+            isFrame: true,
+            path: 'zichanguanlixitong',
+            imgUrl: require('@/assets/ZDimages/basicsModules/homeXiNong/icon_sy_zcglxt.png'),
+          },
+          {
+            buttonType: true,
+            buttonName: '安全责任管理',
+            menuName: '安全责任管理',
+            isFrame: true,
+            path: 'anquanzeren',
+            imgUrl: require('@/assets/ZDimages/basicsModules/homeXiNong/icon_sy_aqzrgl.png'),
+          },
+          {
+            buttonType: true,
+            buttonName: '应急预警管理',
+            menuName: '应急预警管理',
+            isFrame: false,
+            path: 'emergencyManagement',
+            imgUrl: require('@/assets/ZDimages/basicsModules/homeXiNong/icon_sy_yjyjgl.png'),
+          },
+          {
+            buttonType: true,
+            buttonName: '基础结构管理',
+            menuName: '基础结构管理',
+            isFrame: false,
+            path: 'integratedManagement',
+            imgUrl: require('@/assets/ZDimages/basicsModules/homeXiNong/icon_sy_jcjggl.png'),
+          },
+        ]
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      if (this.initPage) {
+        //开启首页时-学生自动跳转-老师留在首页
+        if (this.userType == '2') {
+          this.autoSkip()
+        }
+      } else {
+        //关闭首页时
+        if (this.userType == '2') {
+          if (this.homeConfigData.studentsSkip) {
+            //开启了指定页面跳转
+            this.appointSkip()
+          } else {
+            //自动跳转
+            this.autoSkip()
+          }
+        } else {
+          if (this.homeConfigData.teacherSkip) {
+            //开启了指定页面跳转
+            this.appointSkip()
+          } else {
+            //自动跳转
+            this.autoSkip()
+          }
+        }
+      }
+    },
+    methods: {
+      //跳转按钮
+      goPage(item) {
+        if (item.buttonType) {
+          let path = this.circularCallNameSkip(item.path, this.routeData, false)
+          if (path) {
+            if (item.isFrame) {
+              xmlRequestLink(path)
+            } else {
+              this.$router.push({ path: path })
+            }
+          } else {
+            this.$alert('没有"' + item.menuName + '"系统权限，如有疑问，请联系管理员', {
+              confirmButtonText: '确定',
+              callback: action => {
+              }
+            })
+          }
+        } else {
+          this.$alert(item.buttonName + '暂未开放', {
+            confirmButtonText: '确定',
+            callback: action => {
+            }
+          })
+        }
+      },
+      //自动跳转
+      autoSkip() {
+        let path = this.circularCallSortSkip(this.routeData)
+        if (path) {
+          this.$router.push({ path: path })
+        } else {
+          this.outLogin()
+        }
+      },
+      //指定跳转
+      appointSkip() {
+        if (this.userType == '2') {
+          //学生
+          let path = this.circularCallIdSkip(this.homeConfigData.studentsSkipMenuId, this.routeData)
+          if (path) {
+            this.$router.push({ path: path })
+          } else {
+            this.outLogin()
+          }
+        } else if (this.userType == '1') {
+          //老师
+          let path = this.circularCallIdSkip(this.homeConfigData.teacherSkipMenuId, this.routeData)
+          if (path) {
+            this.$router.push({ path: path })
+          } else {
+            this.outLogin()
+          }
+        }
+      },
+      //循环调用 按照排序跳转
+      circularCallSortSkip(list) {
+        let self = this
+        for (let i = 0; i < list.length; i++) {
+          if (list[i].children) {
+            let text = self.circularCallSortSkip(list[i].children)
+            if (text) {
+              return list[i].path + '/' + text
+            }
+          } else if (!list[i].alwaysShow && !list[i].hidden && !list[i].isFrame) {
+            return list[i].path
+          }
+        }
+      },
+      //循环调用 通过ID匹配跳转
+      circularCallIdSkip(skipMenuId, list) {
+        let self = this
+        for (let i = 0; i < list.length; i++) {
+          if (skipMenuId == list[i].menuId) {
+            return list[i].path
+          } else if (list[i].children) {
+            let text = self.circularCallIdSkip(skipMenuId, list[i].children)
+            if (text) {
+              return list[i].path + '/' + text
+            }
+          }
+        }
+      },
+      //循环调用 通过name匹配跳转
+      circularCallNameSkip(skipName, list, type) {
+        let self = this
+        for (let i = 0; i < list.length; i++) {
+          if (type) {
+            if (list[i].children) {
+              let text = self.circularCallNameSkip(skipName, list[i].children, true)
+              if (text) {
+                return list[i].path + '/' + text
+              }
+            } else if (!list[i].alwaysShow && !list[i].hidden) {
+              if (list[i].isFrame) {
+                return list[i]
+              } else {
+                return list[i].path
+              }
+            }
+          } else {
+            if (skipName == list[i].name) {
+              if (list[i].isFrame) {
+                return list[i]
+              } else if (list[i].children) {
+                let text = self.circularCallNameSkip(skipName, list[i].children, true)
+                if (text) {
+                  return list[i].path + '/' + text
+                }
+              }
+            }
+          }
+        }
+      },
+      //权限异常未匹配到相关权限页面 提示并退出
+      outLogin() {
+        this.$alert('没有相关权限，请联系管理员', {
+          confirmButtonText: '确定',
+          callback: action => {
+            store.dispatch('LogOutNoData').then(() => {
+              localStorage.removeItem('serviceType')
+              if (process.env.VUE_APP_LOGIN_TYPE === 'certification') {
+                window.location.href = process.env.VUE_APP_OUT_URL
+              } else {
+                router.replace({
+                  path: '/login'
+                })
+              }
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @-webkit-keyframes centerButtonMover {
+    0% {
+      transform: scale(1);
+    }
+    30% {
+      transform: rotate(0deg) scale(0.9);
+    }
+    40% {
+      transform: rotate(-5deg) scale(1);
+    }
+    50% {
+      transform: rotate(5deg) scale(1);
+    }
+    60% {
+      transform: rotate(-5deg) scale(1.1);
+    }
+    70% {
+      transform: rotate(0deg) scale(1.2);
+    }
+    100% {
+      transform: rotate(0deg) scale(1);
+    }
+  }
+
+  @-webkit-keyframes centerMover {
+    0% {
+      -webkit-transform: translateY(0);
+    }
+    50% {
+      -webkit-transform: translateY(20px);
+    }
+    100% {
+      -webkit-transform: translateY(0);
+    }
+  }
+
+  @-webkit-keyframes ringMove {
+    0% {
+      -webkit-transform: translateY(0px);
+      opacity: 1;
+    }
+    50% {
+      -webkit-transform: translateY(20px);
+      opacity: 0;
+    }
+    100% {
+      -webkit-transform: translateY(0);
+      opacity: 0;
+    }
+  }
+
+  @-webkit-keyframes buttonMove {
+    50% {
+      -webkit-transform: scale(0.8);
+      transform: scale(0.8);
+      -webkit-filter: brightness(90%)
+    }
+    100% {
+      -webkit-transform: scale(1);
+      transform: scale(1);
+      -webkit-filter: brightness(100%)
+    }
+  }
+
+  .home-class {
+    background-color: #004d8c;
+    background-image: url("../../assets/ZDimages/basicsModules/img_tydlpt_bg.png") !important;
+    -webkit-background-size: 100%;
+    background-size: 100%;
+
+  }
+
+  .homeXiNong {
+    height: 100%;
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+    * {
+      margin: 0;
+    }
+    .max-big-home-box {
+      position: relative;
+      flex: 1;
+      overflow: hidden;
+      .max-home-button-box {
+        /*width: 1300px;*/
+        /*height: 760px;*/
+        /*margin-top: -380px;*/
+        /*margin-left: -650px;*/
+        width: 1400px;
+        margin-left: -700px;
+        height: 800px;
+        margin-top: -400px;
+        top: 50%;
+        left: 50%;
+        position: absolute;
+        .max-home-box {
+          /*width: 1300px;*/
+          /*height: 760px;*/
+          width: 1400px;
+          height: 800px;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          .img-1 {
+            position: absolute;
+            /*width:863px;*/
+            width: 690px;
+            /*height:504px;*/
+            height: 403px;
+            top: 191px;
+            left: 50%;
+            margin-left: - 345px;
+            -webkit-animation-name: centerMover;
+            -webkit-animation-duration: 4s;
+            -webkit-animation-iteration-count: infinite;
+            -webkit-animation-delay: 0s;
+          }
+          .img-2 {
+            position: absolute;
+            /*width:463px;*/
+            width: 370px;
+            /*height:106px;*/
+            height: 84px;
+            top: 391px;
+            left: 50%;
+            margin-left: - 185px;
+            -webkit-animation-name: ringMove;
+            -webkit-animation-duration: 2s;
+            -webkit-animation-iteration-count: infinite;
+            -webkit-animation-delay: 0s;
+          }
+          .img-3 {
+            position: absolute;
+            /*width:493px;*/
+            width: 394px;
+            /*height:107px;*/
+            height: 85px;
+            top: 319px;
+            left: 50%;
+            margin-left: - 197px;
+            -webkit-animation-name: ringMove;
+            -webkit-animation-duration: 2s;
+            -webkit-animation-iteration-count: infinite;
+            -webkit-animation-delay: 0.2s;
+          }
+          .img-4 {
+            position: absolute;
+            /*width:554px;*/
+            width: 443px;
+            /*height:118px;*/
+            height: 94px;
+            top: 231px;
+            left: 50%;
+            margin-left: - 221px;
+            -webkit-animation-name: ringMove;
+            -webkit-animation-duration: 2s;
+            -webkit-animation-iteration-count: infinite;
+            -webkit-animation-delay: 0.4s;
+          }
+          .img-5 {
+            position: absolute;
+            width: 394px;
+            /*width:493px;*/
+            /*height:107px;*/
+            height: 85px;
+            /*width:644px;*/
+            /*height:118px;*/
+            top: 141px;
+            left: 50%;
+            //margin-left:-322px;
+            margin-left: - 197px;
+            -webkit-animation-name: ringMove;
+            -webkit-animation-duration: 2s;
+            -webkit-animation-iteration-count: infinite;
+            -webkit-animation-delay: 0.6s;
+          }
+          .img-6 {
+            position: absolute;
+            width: 354px;
+            /*width:443px;*/
+            /*height:106px;*/
+            height: 84px;
+            /*width:734px;*/
+            /*height:118px;*/
+            top: 051px;
+            left: 50%;
+            //margin-left:-367px;
+            margin-left: - 177px;
+            -webkit-animation-name: ringMove;
+            -webkit-animation-duration: 2s;
+            -webkit-animation-iteration-count: infinite;
+            -webkit-animation-delay: 0.8s;
+          }
+          .max-bottom-box {
+            width: 1400px;
+            margin: 0 auto;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            .top-button-box {
+              display: flex;
+              .left-box {
+                .position-button {
+                  width: 297px;
+                  height: 136px;
+                  cursor: pointer;
+                  position: relative;
+                  z-index: 5;
+                  img {
+                    width: 297px;
+                    height: 136px;
+                  }
+                  p {
+                    position: absolute;
+                    top: 44px;
+                    left: 142px;
+                    text-align: center;
+                    font-size: 18px;
+                    line-height: 18px;
+                    background: linear-gradient(to top, #06F6F7, #FFFFFF);
+                    -webkit-background-clip: text;
+                    color: transparent;
+                  }
+                }
+                .position-button:nth-child(1) {
+                  margin-top: 0;
+                }
+                .position-button:nth-child(2) {
+                  margin: 15px 0 0 40px;
+                }
+                .position-button:nth-child(3) {
+                  margin: 15px 0 0 80px;
+                }
+                .position-button:nth-child(4) {
+                  margin: 15px 0 0 120px;
+                }
+              }
+              .center-box {
+                flex: 1;
+                .position-button {
+                  width: 147px;
+                  height: 105px;
+                  cursor: pointer;
+                  position: relative;
+                  z-index: 5;
+                  margin: 0 auto 0;
+                  -webkit-animation-name: centerButtonMover;
+                  -webkit-animation-duration: 3s;
+                  -webkit-animation-iteration-count: infinite;
+                  -webkit-animation-delay: 0s;
+                  img {
+                    width: 147px;
+                    height: 105px;
+                  }
+                  p {
+                    position: absolute;
+                    top: 66px;
+                    left: 30px;
+                    text-align: center;
+                    font-size: 18px;
+                    line-height: 18px;
+                    background: linear-gradient(to top, #06F6F7, #FFFFFF);
+                    -webkit-background-clip: text;
+                    color: transparent;
+                  }
+                }
+              }
+              .right-box {
+                .position-button {
+                  width: 297px;
+                  height: 136px;
+                  cursor: pointer;
+                  z-index: 5;
+                  position: relative;
+                  img {
+                    width: 297px;
+                    height: 136px;
+                  }
+                  p {
+                    position: absolute;
+                    top: 44px;
+                    left: 40px;
+                    text-align: center;
+                    font-size: 18px;
+                    line-height: 18px;
+                    background: linear-gradient(to top, #06F6F7, #FFFFFF);
+                    -webkit-background-clip: text;
+                    color: transparent;
+                  }
+                }
+                .position-button:nth-child(1) {
+                  margin: 0 0 0 120px;
+                }
+                .position-button:nth-child(2) {
+                  margin: 15px 0 0 80px;
+                }
+                .position-button:nth-child(3) {
+                  margin: 15px 0 0 40px;
+                }
+                .position-button:nth-child(4) {
+                  margin-top: 15px;
+                }
+              }
+            }
+            .center-button-box {
+              flex: 1;
+            }
+            .bottom-button-box {
+              display: flex;
+              .null-button {
+                flex: 1;
+              }
+              .position-button {
+                width: 140px;
+                height: 200px;
+                cursor: pointer;
+                z-index: 5;
+                position: relative;
+                margin-right: 95px;
+                img {
+                  width: 140px;
+                  height: 230px;
+                }
+                p {
+                  position: absolute;
+                  top: 154px;
+                  /*left:34px;*/
+                  width: 140px;
+                  text-align: center;
+                  font-size: 18px;
+                  line-height: 18px;
+                  background: linear-gradient(to top, #06F6F7, #FFFFFF);
+                  -webkit-background-clip: text;
+                  color: transparent;
+                }
+              }
+              .position-button:nth-last-child(2) {
+                margin-right: 0;
+              }
+            }
+            .position-button:hover {
+              -webkit-animation-name: buttonMove;
+              -webkit-animation-duration: 1.5s;
+              -webkit-animation-iteration-count: infinite;
+              -webkit-animation-delay: 0s;
+            }
+          }
+        }
+      }
+    }
+    .bottom-null-box {
+      height: 60px;
+    }
+  }
+</style>
+