src/router/index1.js

@@ -0,0 +1,137 @@
+// 普通路由
+import Vue from 'vue'
+import Router from 'vue-router'
+import Login from '@/views/Login.vue'
+import Home from '@/views/Home.vue'
+import Welcome from '@/views/Welcome.vue'
+ 
+ 
+
+import FeedProcess from '@/views/dataStatistics/FeedProcess.vue'
+import WeightTrend from '@/views/dataStatistics/WeightTrend.vue'
+import FormulaEffect from '@/views/dataStatistics/FormulaEffect.vue'
+import GrowthRate from '@/views/dataStatistics/GrowthRate.vue'
+import FeedCost from '@/views/dataStatistics/FeedCost.vue'
+import DiseaseSituation from '@/views/dataStatistics/DiseaseSituation.vue'
+import SurvivalRate from '@/views/dataStatistics/SurvivalRate.vue'
+
+
+import WeightRecord from '@/views/cowManagement/WeightRecord.vue'
+import CowInfo from '@/views/cowManagement/CowInfo.vue'
+import EventRecord from '@/views/cowManagement/EventRecord.vue'
+
+
+
+
+import CowCowShed from '@/views/cowShedManagement/CowCowShed.vue'
+import CowShedGroup from '@/views/cowShedManagement/CowShedGroup.vue'
+
+import FeedPlan from '@/views/formulaPlan/FeedPlan.vue'
+import FormulaTemplate from '@/views/formulaPlan/FormulaTemplate.vue'
+
+import WorkTaskAssign from '@/views/workManagement/WorkTaskAssign.vue'
+import WorkTaskImplement from '@/views/workManagement/WorkTaskImplement.vue'
+
+
+import CalfType from '@/views/basicSettings/CalfType.vue'
+import WorkOrderType from '@/views/basicSettings/WorkOrderType.vue'
+import FeedCarManagement from '@/views/basicSettings/FeedCarManagement.vue'
+import DiseaseManagement from '@/views/basicSettings/DiseaseManagement.vue'
+import InfoRemind from '@/views/basicSettings/InfoRemind.vue'
+import DiseaseType from '@/views/basicSettings/DiseaseType.vue'
+import FeedTemplate from '@/views/basicSettings/FeedTemplate.vue'
+import DefaultPara from '@/views/basicSettings/DefaultPara.vue'
+import FeedCostSet from '@/views/basicSettings/FeedCostSet.vue'
+
+import User from '@/views/systemManagement/User.vue'
+import Role from '@/views/systemManagement/Role.vue'
+
+
+Vue.use(Router)
+
+const router =  new Router({
+  mode:'hash',
+  routes: [
+    // 当路径为/,重定向路径到/login
+    { path: '/', redirect: '/login' },
+    // 当路径为/login,转到组件Login
+    { path: '/login', component: Login },
+    { 
+      path: '/home', 
+      component: Home,
+      // 当路径为/home,转到组件welcome
+      redirect: '/welcome',
+      //children里面放的是home组件下的子组件
+      children:[
+        { path: '/welcome', component: Welcome },
+         
+        
+
+ 
+  
+        { path: '/FeedProcess', component: FeedProcess },
+        { path: '/WeightTrend', component: WeightTrend },
+        { path: '/FormulaEffect', component: FormulaEffect },
+        { path: '/GrowthRate', component: GrowthRate },
+        { path: '/FeedCost', component: FeedCost },
+        { path: '/DiseaseSituation', component: DiseaseSituation },
+        { path: '/SurvivalRate', component: SurvivalRate },
+
+        { path: '/WeightRecord', component: WeightRecord },
+        { path: '/CowInfo', component: CowInfo },
+        { path: '/EventRecord', component: EventRecord },
+        
+        
+
+        { path: '/CowCowShed', component: CowCowShed },
+        { path: '/CowShedGroup', component: CowShedGroup },
+
+        { path: '/FeedPlan', component: FeedPlan },
+        { path: '/FormulaTemplate', component: FormulaTemplate },
+
+        { path: '/WorkTaskAssign', component: WorkTaskAssign },
+        { path: '/WorkTaskImplement', component: WorkTaskImplement },
+        
+
+        { path: '/CalfType', component: CalfType },
+        { path: '/WorkOrderType', component: WorkOrderType },
+        { path: '/FeedCarManagement', component: FeedCarManagement },
+        { path: '/DiseaseManagement', component: DiseaseManagement },
+        { path: '/InfoRemind', component: InfoRemind },
+        { path: '/DiseaseType', component: DiseaseType },
+        { path: '/FeedTemplate', component: FeedTemplate },
+        { path: '/DefaultPara', component: DefaultPara },
+        { path: '/FeedCostSet', component: FeedCostSet },
+
+  
+        { path: '/User', component: User },
+        { path: '/Role', component: Role },
+        
+
+ 
+ 
+        
+      ] 
+    }
+  ]
+})
+
+
+
+// 添加 beforeEach 导航守卫，如果用户没登录，直接访问其他页面，就跳转到登录页
+router.beforeEach((to, form, next) => {
+  // to 将要访问的路径
+  // form 代表从哪个路径跳转而来
+  // next 是一个函数，表示放行
+  // next() 放行，next('/login')强制跳转
+  //如果用户访问登录页，直接放行，
+  if(to.path === '/login') return next();
+  //从本地存储获取到token信息
+  // const tokenStr  = window.sessionStorage.getItem('token')
+  //没有token就强制跳转到登录页
+   //if (!tokenStr) return next('/login')
+  next()
+})
+
+export default router
+

src/utils/request.js

@@ -7,8 +7,8 @@ import { MessageBox, Message } from 'element-ui'
 // import { getToken } from '@/utils/auth'
 
 
-//让内外网都能登陆的设置，但是npm run dev 后智能选localhost展示了
-//获取当前url
+//自动打包、让内外网都能登陆的设置，但是npm run dev 后只能选localhost展示了
+//后端框架才需要这段——本地手动打包时可注释
 const DoMainString = document.querySelector("html").getAttribute("domain");
 axios.defaults.baseURL = process.env.VUE_APP_BASE_API
 if (DoMainString) {
@@ -20,8 +20,11 @@ var browserUrl = window.location.hostname
 if (reg.test(browserUrl)){
   axios.defaults.baseURL = window.location.protocol +"//"+ browserUrl + ":8087/"
 }
+//后端框架才需要这段——本地手动打包时可注释
 
-// console.log("url=========",axios.defaults.baseURL)
+
+//正常本地打包地址
+// axios.defaults.baseURL = process.env.VUE_APP_BASE_API
 
 
 

src/views/Home.vue

@@ -3,20 +3,23 @@
   <el-container class ="home-container">
     <!-- 头部区域 -->
     <el-header>
-      <div>
+      <div  class ="left-logo">
+        <!-- <span>犊牛饲喂系统</span> -->
+      </div>
+      <div  class ="center-logo">
         
-        <span>犊牛饲喂系统</span>
+        <!-- <span>犊牛饲喂系统</span> -->
       </div>
       
       <el-button @click="logout" >退出</el-button>
     </el-header>
-    <el-container>
+    <el-container style = "position:relative">
       <!-- 侧边栏 -->
-      <el-aside :width="isCollapse ? '64px' : '200px'">
-        <div class="toggle-button" @click="toggleCollapse">|||</div>
+      <el-aside :width="isCollapse ? '64px' : '200px'" >
+        <div style = ""   :class="isCollapse ? 'toggle-button1' : 'toggle-button2'" @click="toggleCollapse"></div>
  
         <!-- 侧边栏菜单区域 -->
-        <el-menu   background-color="#333744" text-color="#fff" active-text-color = "#409Eff" unique-opend :collapse="isCollapse" :collapse-transition="false"  router :default-active = "activePath">
+        <el-menu   background-color="#fff" text-color="#333333" active-text-color = "#fff" unique-opend :collapse="isCollapse" :collapse-transition="false"  router :default-active = "activePath">
           <!-- 一级菜单 -->
           <!-- index必须是字符串，所以拼接 +'' -->
           <el-submenu :index="item.id +''" v-for="item in menuList" :key="item.id">
@@ -44,7 +47,17 @@
       <!-- 右侧主体内容 -->
       <el-container>
         
-       
+        <!-- 标签内容 -->
+        <!-- <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab"  @tab-click="handleClick">
+          <el-tab-pane
+            v-for="(item, index) in editableTabs"
+            :key="item.name"
+            :label="item.title"
+            :name="item.name"
+          >
+            {{item.content}}
+          </el-tab-pane>
+        </el-tabs> -->
 
         <el-main >
           <!-- 路由占位符 -->
@@ -190,8 +203,8 @@ export default {
           });
         }
         
-        // this.editableTabsValue = activeName;
-        // this.editableTabs = tabs.filter(tab => tab.name !== targetName);
+        this.editableTabsValue = activeName;
+        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
       },
 
 
@@ -242,7 +255,13 @@ export default {
       window.sessionStorage.setItem('activePath',activePath)
 
 
-  
+ 
+        // this.editableTabs.push({
+        //   title: name,
+        //   name: activePath,
+        // });
+        // this.editableTabsValue = activePath;
+
 
     }
 
@@ -256,16 +275,33 @@ export default {
 
 .home-container{height:100%}
 /* el-header一个类名就是一个样式，可以直接赋样式 */
-.el-header{background-color:#373d41;display:flex;justify-content:space-between;padding-left:0;align-items: center;color:#fff;font-size:20px;} 
+.el-header{background-color:#3e76cd;display:flex;justify-content:space-between;padding-left:0;align-items: center;color:#fff;font-size:20px;} 
 .el-header div{display:flex;align-items:center;}
 .el-header div span{margin-left:15px;}
 
-.el-aside{background-color:#333744;} 
+.el-aside{background-color:#fff;} 
 .el-aside .el-menu{border-right: none;text-align: left}
 
-.el-main{background-color:#eaedf1;  height:80vh;padding:0px} 
+.el-main{background-color:#f3f5fa;  height:80vh;padding:0px} 
 
 .iconfont{margin-right:10px}
 
-.toggle-button{background-color:#4a5064;font-size:10px;line-height:24px;color:#fff;text-align:center;cursor:pointer;}
+.toggle-button1{display:inline-block;height: 30px;width: 30px; background:  url("../assets/toggle1.png") no-repeat;cursor:pointer;position:absolute;top:0;left:64px;z-index:9999}
+
+.toggle-button2{display:inline-block;height: 30px;width: 30px; background:  url("../assets/toggle2.png") no-repeat;cursor:pointer;position:absolute;top:0;left:200px;z-index:9999}
+
+.left-logo{display:inline-block;height: 39px;width: 330px; background:  url("../assets/left-logo.png") no-repeat; }
+.center-logo{display:inline-block;height: 39px;width: 330px; background:  url("../assets/center-logo.png") no-repeat; }
+ 
+
+
+
+
+
+/* 侧面导航条 */
+.el-submenu /deep/.el-menu--inline{background-color: #e9eef9!important }
+.el-submenu  .el-menu-item{background-color: #e9eef9!important;border-radius:10px }
+/* 激活内容 */
+.el-submenu  .el-menu-item.is-active {background-color: #3e76cd!important; }
+
 </style>

src/views/Home1.vue

@@ -1,287 +0,0 @@
-<template>
- 
-  <el-container class ="home-container">
-    <!-- 头部区域 -->
-    <el-header>
-      <div>
-        
-        <span>犊牛饲喂系统</span>
-      </div>
-      
-      <el-button @click="logout" >退出</el-button>
-    </el-header>
-    <el-container>
-      <!-- 侧边栏 -->
-      <el-aside :width="isCollapse ? '64px' : '200px'">
-        <div class="toggle-button" @click="toggleCollapse">|||</div>
- 
-        <!-- 侧边栏菜单区域 -->
-        <el-menu   background-color="#333744" text-color="#fff" active-text-color = "#409Eff" unique-opend :collapse="isCollapse" :collapse-transition="false"  router :default-active = "activePath">
-          <!-- 一级菜单 -->
-          <!-- index必须是字符串，所以拼接 +'' -->
-          <el-submenu :index="item.id +''" v-for="item in menuList" :key="item.id">
-            <!-- 一级菜单的模板区域 -->
-            <template slot="title">
-              <!-- <span class = "nav-icon"></span> -->
-             
-              <i class="iconfont el-icon-s-order"></i>
-              <span>{{item.name}}</span>
-            </template>
-            <!-- 二级菜单 -->  
-            <el-menu-item :index="'/' + items.path" v-for="items in item.children" :key="items.id" @click = "saveNavState(items)">
-              <template slot="title">
-                <i class="iconfont el-icon-s-order"></i>
-                <span>{{items.name}}</span>
-              </template>
-            </el-menu-item>
-
-          </el-submenu>
-
-         
-        </el-menu>
-      </el-aside>
-  
-      <!-- 右侧主体内容 -->
-      <el-container>
-        
-        <!-- 标签内容 -->
-        <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab"  @tab-click="handleClick">
-          <el-tab-pane
-            v-for="(item, index) in editableTabs"
-            :key="item.name"
-            :label="item.title"
-            :name="item.name"
-          >
-            {{item.content}}
-          </el-tab-pane>
-        </el-tabs>
-
-        <el-main >
-          <!-- 路由占位符 -->
-          <router-view></router-view>
-        </el-main>
-       <el-footer>
-        
-       </el-footer> 
-      </el-container>
-
-
-    </el-container>
-  </el-container>
-
-
-</template> 
-
-<script>
- 
-import {  ajaxDataGet, ajaxDataPost, ajaxDataPut, ajaxDataDelete, checkButtons} from '@/api/common'
-import { parseTime, json2excel } from '@/utils/index.js'
-export default {
-  data() {
-    return {
-
-
-      editableTabsValue: '2',
-        editableTabs: [
-          { title: '首页',  name: '/home'   }, 
-          // { title: '角色列表',  name: '/roles'   }, 
-        ],
-        tabIndex: 2,
-
-
-
-
-
-      isCollapse:false, //侧边栏是否展开
-      activePath:"",//侧边栏高亮路径
-      menuList:[
-       
-        // {
-        //   name:"数据统计", id:20, order:1,iconclass:'iconfont el-icon-s-order',
-        //   children:[
-        //     {id:101,name:"饲喂过程",iconclass:'iconfont el-icon-message',path: 'FeedProcess'},
-             
-        //   ]
-        // },
-        // {
-        //   name:"牛只管理", id:20, order:1,iconclass:'iconfont el-icon-s-order',
-        //   children:[
-        //     {id:201,name:"牛只信息",iconclass:'iconfont el-icon-message',path: 'CowInfo'},
-        //     {id:202,name:"事件记录",iconclass:'iconfont el-icon-message',path: 'EventRecord'},
-   
-        //   ]
-        // },
-        // {
-        //   name:"栏舍管理", id:30, order:1,iconclass:'iconfont el-icon-s-order',
-        //   children:[
-        //     {id:303,name:"牛只栏舍",iconclass:'iconfont el-icon-message',path: 'CowCowShed'},
-        //     {id:304,name:"栏舍分组",iconclass:'iconfont el-icon-message',path: 'CowShedGroup'},
-        //     // {id:304,name:"分类参数",iconclass:'iconfont el-icon-message',path: 'users56'},
-        //     // {id:305,name:"产品分类",iconclass:'iconfont el-icon-message',path: 'categories'},
-        //   ]
-        // },
-        // {
-        //   name:"配方计划", id:40, order:1,iconclass:'iconfont el-icon-s-order',
-        //   children:[
-        //     {id:403,name:"饲喂计划",iconclass:'iconfont el-icon-message',path: 'FeedPlan'},
-        //     {id:404,name:"配方模板",iconclass:'iconfont el-icon-message',path: 'FormulaTemplate'},
-        //   ]
-        // },
-
-
- 
-        // {
-        //   name:"基础数据", id:60, order:6,iconclass:'iconfont el-icon-s-order',
-        //   children:[
-        //    {id:601,name:"犊牛类型",iconclass:'iconfont el-icon-message',path: 'CalfType'},
-        //    {id:602,name:"工单类型",iconclass:'iconfont el-icon-message',path: 'WorkOrderType'},
-        //    {id:603,name:"饲喂车管理",iconclass:'iconfont el-icon-message',path: 'FeedCarManagement'},
-        //   //  {id:604,name:"疾病类型",iconclass:'iconfont el-icon-message',path: 'DiseaseType'},
-        //    {id:605,name:"预设饲喂模板",iconclass:'iconfont el-icon-message',path: 'FeedTemplate'},
-
-        //    {id:606,name:"默认标准参数",iconclass:'iconfont el-icon-message',path: 'DefaultPara'},
-        //    {id:607,name:"饲料成本设置",iconclass:'iconfont el-icon-message',path: 'FeedCost'},
-            
-        //   ]
-        // },
-
-        // {
-        //   name:"系统管理", id:60, order:6,iconclass:'iconfont el-icon-s-order',
-        //   children:[
-        //     {id:701,name:"用户管理",iconclass:'iconfont el-icon-message',path: 'User'},
-        //     {id:702,name:"角色管理",iconclass:'iconfont el-icon-message',path: 'Role'},
-              
-        //   ]
-        // },
-
-      ]
-    }
-  },
-  created(){
-
-
-    //处理Store刷新后消失的问题
-     // 在页面加载时读取sessionStorage
-     if (sessionStorage.getItem('store')) {
-        this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
-      }
-      // 在页面刷新时将store保存到sessionStorage里
-      window.addEventListener('beforeunload', () => {
-        sessionStorage.setItem('store', JSON.stringify(this.$store.state))
-      })
-
-      
-     this.getMenuList()
-     this.activePath = window.sessionStorage.getItem('activePath')
-  },
-  methods:{
-
-
-  
-
-      handleClick(val) {
-        // console.log(tab, event);
-        console.log(val.name);
-        this.$router.push(val.name)
-      },
-
-  
-      removeTab(targetName) {
-        let tabs = this.editableTabs;
-        let activeName = this.editableTabsValue;
-        if (activeName === targetName) {
-          tabs.forEach((tab, index) => {
-            if (tab.name === targetName) {
-              let nextTab = tabs[index + 1] || tabs[index - 1];
-              if (nextTab) {
-                activeName = nextTab.name;
-              }
-            }
-          });
-        }
-        
-        this.editableTabsValue = activeName;
-        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
-      },
-
-
-
- 
-    //退出
-    logout(){  
-      //清空token
-      window.sessionStorage.clear()
-      //跳转登录页
-      this.$router.push('/login')
-    },
-    //获取所有菜单
-    getMenuList(){
-      var me = this 
-
-     
-      ajaxDataPost('/api/v1/system/user/permissions', {}).then(e => {
-        console.log("getMenuList请求结果：",e)
-          //打印请求成功结果
-          if(e.code == 200 ){
-            
-            me.menuList = e.data.menu_list
-            me.$store.state.buttonsList  = e.data.menu_buttons_path
-          } else {
-            me.menuList = []
-            me.$store.state.buttonsList  = []
-            
-          }
-
-        
-  
-        })
-
-
-    },
-    //折叠展开左侧菜单
-    toggleCollapse(){
-      this.isCollapse = ! this.isCollapse
-    },
-
-    //侧边栏高亮显示点击保存路径
-    saveNavState(items){
-      
-      var activePath = '/' + items.path
-      var name = items.name
-      console.log("activePath",activePath)
-      window.sessionStorage.setItem('activePath',activePath)
-
-
- 
-        this.editableTabs.push({
-          title: name,
-          name: activePath,
-        });
-        this.editableTabsValue = activePath;
-
-
-    }
-
-  }
-}
-</script>
-<!-- 加了scoped，则是仅在此组件里生效 -->
-<style scoped>
-
-.nav-icon{display:inline-block;height: 30px;width: 30px; background:  url("../assets/images/nlogin-bg1.jpg") no-repeat; }
-
-.home-container{height:100%}
-/* el-header一个类名就是一个样式，可以直接赋样式 */
-.el-header{background-color:#373d41;display:flex;justify-content:space-between;padding-left:0;align-items: center;color:#fff;font-size:20px;} 
-.el-header div{display:flex;align-items:center;}
-.el-header div span{margin-left:15px;}
-
-.el-aside{background-color:#333744;} 
-.el-aside .el-menu{border-right: none;text-align: left}
-
-.el-main{background-color:#eaedf1;  height:80vh;padding:0px} 
-
-.iconfont{margin-right:10px}
-
-.toggle-button{background-color:#4a5064;font-size:10px;line-height:24px;color:#fff;text-align:center;cursor:pointer;}
-</style>