1

src/assets/css/main.css

@@ -2248,6 +2248,65 @@
   align-items: center;
 }
 
+.vrcode .el-menu, .el-submenu__title:hover, .el-menu-item:hover, .el-menu-item:focus {
+  background: transparent;
+}
+
+.vrcode .el-menu {
+  border-right: none;
+}
+
+.vrcode .el-submenu__icon-arrow {
+  font-size: 16px;
+  color: #fff;
+}
+
+.vrcode .el-submenu .el-menu-item {
+  display: flex;
+  align-items: center;
+  padding-left: 31px;
+  position: relative;
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #A8B6C8;
+  width: 200px;
+  height: 40px;
+  cursor: pointer;
+  margin: 0 auto;
+}
+
+.vrcode .el-submenu .el-menu-item::before {
+  content: " ";
+  width: 4px;
+  height: 4px;
+  background: #A8B6C8;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 10px;
+}
+
+.vrcode .el-submenu__title, .vrcode .el-menu-item {
+  display: flex;
+  align-items: center;
+}
+
+.vrcode .el-submenu__title .img, .vrcode .el-menu-item .img {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 15px;
+}
+
+.vrcode .el-submenu .el-menu-item.is-active {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: #fff;
+}
+
 .vrcode-textarea {
   width: 100%;
   margin-bottom: 15px;

src/assets/css/main.scss

@@ -2391,12 +2391,67 @@
         }
     }
 }
+//二维码部分css
 .flex-end{
     display: flex;
     justify-content: flex-end;
     align-items: center;
     
 }
+.vrcode .el-menu,.el-submenu__title:hover,.el-menu-item:hover,.el-menu-item:focus{
+    background: transparent;
+}
+.vrcode{
+    .el-menu{
+      border-right: none; 
+    }
+    .el-submenu__icon-arrow{
+        font-size: 16px;
+        color: #fff;
+    }
+    .el-submenu .el-menu-item{
+        display: flex;
+    align-items: center;
+    padding-left: 31px;
+    position: relative;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #A8B6C8;
+    width: 200px;
+    height: 40px;
+    cursor: pointer;
+    margin: 0 auto;
+    &::before{
+        content: " ";
+    width: 4px;
+    height: 4px;
+    background: #A8B6C8;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 10px;
+    }
+    }
+     .el-submenu__title,.el-menu-item{
+        display: flex;
+        align-items: center;
+        .img{
+            width: 16px;
+            height: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 15px;
+        }
+    }
+    .el-submenu .el-menu-item.is-active{
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.3);
+        color: #fff;
+    }
+}
+
 .vrcode-textarea{
     width: 100%;
     margin-bottom: 15px;

src/views/vrcode.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="index">
+    <div class="index vrcode">
         <div class="header">
             <div class="header-left">
                 <img src="../assets/image/logo.png" alt="">
@@ -18,26 +18,26 @@
         </div>
         <div class="index-content">
             <div class="left collapse scroll">
-                <el-collapse v-model="activeNames">
-                    <template v-for="item, index in leftList">
-                        <el-collapse-item :name="index + 1" :key="index" v-if="!item.isRouter">
-                            <template slot="title" class="collapse-title">
-                                <div class="img"><img :src="item.img" alt=""></div> {{ item.name }}
+                <el-menu :default-active="routerNow" class="el-menu-vertical-demo" @open="clickmenu" @close="clickmenu">
+                    <template v-for="item, index in leftList" >
+                        <el-submenu @click="toRouter1(item)" :index="item.router" v-if="item.list.length">
+                            <template slot="title">
+                                <div class="img"><img :src="item.img" alt=""></div>
+                                <span>{{ item.name }}</span>
                             </template>
-                            <ul class="table-ul">
-                                <li class="table-li" @click="toRouter1(item1)"
-                                    :class="routerNow == item1.router ? 'active' : ''"
-                                    v-for="item1, index1 in item.list" :key="index1">{{ item1.name }}
-                                </li>
-                            </ul>
-                        </el-collapse-item>
-                        <div @click="toRouter1(item)" :class="routerNow == item.router ? 'active' : ''" class="no-list"
-                            v-else>
-                            <div class="img"><img :src="item.img" alt=""></div>{{ item.name }}
-                        </div>
+                            <el-menu-item-group>
+                                <el-menu-item :disabled="item1.router?false:true" @click="toRouter1(item1)" :index="item1.router"
+                                    v-for="item1, index1 in item.list">{{ item1.name }}</el-menu-item>
+                            </el-menu-item-group>
+                        </el-submenu>
+                        <el-menu-item @click="toRouter1(item)"  :index="item.router" v-else>
+                            <div class="img"><img :src="item.img" alt=""></div>
+                            <span>{{ item.name }}</span>
+                        </el-menu-item>
                     </template>
 
-                </el-collapse>
+                </el-menu>
+      
             </div>
             <div class="right right-page">
                 <router-view></router-view>
@@ -55,10 +55,10 @@ export default {
 
             activeNames: [3],
             leftList: [
-                { name: '种植计划', img: require('../assets/image/vrcode-icon0.png'), list: [], router: 'plantingPlan', isRouter: true, },
-                { name: '生产环节', routerList: ['agricultural','sprayInsecticide','spreadManure','pickingRecords'], img: require('../assets/image/vrcode-icon1.png'), list: [{ name: '农事管理',router:'agricultural' }, { name: '施肥记录',router:'spreadManure' }, { name: '打药记录',router:'sprayInsecticide' }, { name: '采摘记录',router:'pickingRecords' }, { name: '清洁记录' }, { name: '病虫害管理' },] },
-                { name: '产品追溯', routerList: [], img: require('../assets/image/vrcode-icon2.png'), list: [{ name: '产品追溯',router: 'productTraceability' },{ name: '溯源批次' }, { name: '配置溯源版面' }, { name: '各种报告库' }] },
-                { name: '基础信息设置', routerList: [], img: require('../assets/image/vrcode-icon3.png'), list: [{ name: '作物品种' }, { name: '种植栽培模式' }, { name: '农事作业工序' }, { name: '人员管理' }, { name: '农场信息管理' }, { name: '供应商管理' }, { name: '生产资料管理' }, { name: '农机工具管理' }, { name: '作物外观图片库' },] },],
+                { name: '种植计划', router: 'plantingPlan', img: require('../assets/image/vrcode-icon0.png'), list: [], isRouter: true, },
+                { name: '生产环节',router:'productionProcess', routerList: ['agricultural', 'sprayInsecticide', 'spreadManure', 'pickingRecords'], img: require('../assets/image/vrcode-icon1.png'), list: [{ name: '农事管理', router: 'agricultural' }, { name: '施肥记录', router: 'spreadManure' }, { name: '打药记录', router: 'sprayInsecticide' }, { name: '采摘记录', router: 'pickingRecords' }, { name: '清洁记录',router:'' }, { name: '病虫害管理',router:''  },] },
+                { name: '产品追溯',router:'productTraceability', routerList: [], img: require('../assets/image/vrcode-icon2.png'), list: [{ name: '溯源批次',router:''  }, { name: '配置溯源版面',router:''  }, { name: '各种报告库',router:''  }] },
+                { name: '基础信息设置',router:'setting', routerList: [], img: require('../assets/image/vrcode-icon3.png'), list: [{ name: '作物品种',router:''  }, { name: '种植栽培模式',router:''  }, { name: '农事作业工序',router:''  }, { name: '人员管理',router:''  }, { name: '农场信息管理',router:''  }, { name: '供应商管理',router:''  }, { name: '生产资料管理',router:''  }, { name: '农机工具管理',router:''  }, { name: '作物外观图片库',router:''  },] },],
             routerNow: 'plantingPlan',
             deviceName: 1,
             routerIndex: 1,
@@ -106,7 +106,17 @@ export default {
         this.IDTimer && clearInterval(this.IDTimer)
     },
     methods: {
-
+        clickmenu(key, keyPath){
+            if(key=='productTraceability'&&key!=this.routerNow){
+                this.$router.push({ name: key })
+            }
+        },
+        handleOpen(key, keyPath) {
+            console.log(key, keyPath);
+        },
+        handleClose(key, keyPath) {
+            console.log(key, keyPath);
+        },
         gerRouter() {
             var store = this.$store.state
             this.routerIndex = this.$route.query.index ? this.$route.query.index : store.equipmentIndex
@@ -139,12 +149,12 @@ export default {
         },
 
         toRouter1(item) {
-            console.log(item,11);
+            console.log(item, 11);
             if (item.router) {
                 if (item.http) {
                     window.location.href = item.http;
-                }else{
-                  if(this.routerNow!=item.router){
+                } else {
+                    if (this.routerNow != item.router) {
                         this.$router.push({ name: item.router })
                     }
                 }