1

src/assets/css/main.css

@@ -1,20 +1,20 @@
 @charset "UTF-8";
-.scroll, .el-dropdown-menu, .formula .page-content, .history .page-content .el-table--scrollable-x .el-table__body-wrapper {
+.scroll, .el-dropdown-menu, .index .index-content .right.right-page .page-content, .formula .page-content, .realTime, .history .page-content .el-table--scrollable-x .el-table__body-wrapper {
   overflow-y: auto;
 }
 
-.scroll::-webkit-scrollbar, .el-dropdown-menu::-webkit-scrollbar, .formula .page-content::-webkit-scrollbar, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
+.scroll::-webkit-scrollbar, .el-dropdown-menu::-webkit-scrollbar, .index .index-content .right.right-page .page-content::-webkit-scrollbar, .formula .page-content::-webkit-scrollbar, .realTime::-webkit-scrollbar, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
   /*滚动条整体*/
   width: 10px;
   cursor: pointer;
 }
 
-.scroll::-webkit-scrollbar-track, .el-dropdown-menu::-webkit-scrollbar-track, .formula .page-content::-webkit-scrollbar-track, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track {
+.scroll::-webkit-scrollbar-track, .el-dropdown-menu::-webkit-scrollbar-track, .index .index-content .right.right-page .page-content::-webkit-scrollbar-track, .formula .page-content::-webkit-scrollbar-track, .realTime::-webkit-scrollbar-track, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track {
   /*滚动条轨道*/
   background: #013769;
 }
 
-.scroll::-webkit-scrollbar-thumb, .el-dropdown-menu::-webkit-scrollbar-thumb, .formula .page-content::-webkit-scrollbar-thumb, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {
+.scroll::-webkit-scrollbar-thumb, .el-dropdown-menu::-webkit-scrollbar-thumb, .index .index-content .right.right-page .page-content::-webkit-scrollbar-thumb, .formula .page-content::-webkit-scrollbar-thumb, .realTime::-webkit-scrollbar-thumb, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {
   /*滚动条里面的滑块*/
   width: 4px;
   cursor: pointer;
@@ -22,11 +22,11 @@
   border: 3px solid #013769;
 }
 
-.scroll::-webkit-scrollbar-thumb:hover, .el-dropdown-menu::-webkit-scrollbar-thumb:hover, .formula .page-content::-webkit-scrollbar-thumb:hover, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
+.scroll::-webkit-scrollbar-thumb:hover, .el-dropdown-menu::-webkit-scrollbar-thumb:hover, .index .index-content .right.right-page .page-content::-webkit-scrollbar-thumb:hover, .formula .page-content::-webkit-scrollbar-thumb:hover, .realTime::-webkit-scrollbar-thumb:hover, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
   /*滚动条鼠标事件，鼠标放上去出现的事件*/
 }
 
-.scroll::-webkit-scrollbar-corner, .el-dropdown-menu::-webkit-scrollbar-corner, .formula .page-content::-webkit-scrollbar-corner, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-corner {
+.scroll::-webkit-scrollbar-corner, .el-dropdown-menu::-webkit-scrollbar-corner, .index .index-content .right.right-page .page-content::-webkit-scrollbar-corner, .formula .page-content::-webkit-scrollbar-corner, .realTime::-webkit-scrollbar-corner, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-corner {
   /*滚动条边角*/
 }
 
@@ -404,6 +404,19 @@
   overflow: auto;
 }
 
+.index .index-content .right.right-page {
+  padding: 20px;
+}
+
+.index .index-content .right.right-page .page-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 92, 178, 0.15);
+  border: 2px solid rgba(0, 186, 255, 0.2);
+  padding: 30px 30px 20px;
+}
+
 .input-view {
   display: flex;
   align-items: center;
@@ -1467,15 +1480,22 @@
   width: 100%;
   height: 100%;
   padding: 20px;
+  flex-direction: column;
+  justify-content: unset;
+}
+
+.realTime .new-data {
+  margin-bottom: 20px;
 }
 
 .realTime .page-content {
   position: relative;
   width: 100%;
-  height: 100%;
+  height: auto;
+  flex-shrink: 0;
   background: rgba(0, 92, 178, 0.15);
   border: 2px solid rgba(0, 186, 255, 0.2);
-  padding: 30px 30px 20px;
+  padding: 30px 20px 20px;
 }
 
 .realTime .page-content .control-view {
@@ -1635,6 +1655,62 @@
   height: 100%;
 }
 
+.realTime .page-content .status-view {
+  width: 300px;
+  height: 300px;
+  background: rgba(0, 132, 255, 0.15);
+  border: 2px solid rgba(0, 186, 255, 0.35);
+  margin: 7.5px;
+}
+
+.realTime .page-content .status-view .status-view-top {
+  padding: 0 10px 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  border-bottom: 1px solid rgba(0, 180, 255, 0.35);
+}
+
+.realTime .page-content .status-view .status-view-top .status-view-top-left {
+  font-size: 20px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #FFFFFF;
+}
+
+.realTime .page-content .status-view .status-view-top .status-view-top-right {
+  cursor: pointer;
+  padding: 0 10px;
+}
+
+.realTime .page-content .status-view .status-view-content {
+  width: 100%;
+  height: calc(100% - 51px);
+}
+
+.realTime .page-content .status-view .status-view-content .status-noTrue {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.realTime .page-content .status-view .status-view-content .status-noTrue > img {
+  width: 40px;
+  height: 35px;
+  margin-bottom: 20px;
+}
+
+.realTime .page-content .status-view .status-view-content .status-noTrue > div {
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #8BEAFF;
+}
+
 .history .page-content {
   width: 100%;
 }
@@ -2032,3 +2108,25 @@
   font-weight: 400;
   color: #FFFFFF;
 }
+
+.plantingPlan {
+  width: 100%;
+  height: 100%;
+}
+
+.plantingPlan .btn {
+  opacity: 1;
+}
+
+.plantingPlan .btn .img {
+  height: 20px;
+  width: 20px;
+}
+
+.plantingPlan .plan-view {
+  width: 440px;
+  height: 200px;
+  background: url(../img/plan-bg.png) no-repeat center;
+  background-size: 100% 100%;
+  margin: 7.5px 15px;
+}

src/assets/css/main.scss

@@ -426,6 +426,20 @@
             width: calc(100% - 240px);
             height: 100%;
             overflow: auto;
+
+            &.right-page {
+                padding: 20px;
+
+                .page-content {
+                    position: relative;
+                    width: 100%;
+                    height: 100%;
+                    background: rgba(0, 92, 178, 0.15);
+                    border: 2px solid rgba(0, 186, 255, 0.20);
+                    padding: 30px 30px 20px;
+                    @extend .scroll;
+                }
+            }
         }
     }
 }
@@ -1047,6 +1061,7 @@
 
 .sensorSet {
     height: 100%;
+
     .sensor-view {
         display: flex;
         align-items: center;
@@ -1125,6 +1140,7 @@
                         white-space: nowrap;
                         margin-right: 30px;
                         padding: 0 0 15px 0;
+
                         >.no-sel {
                             margin-right: 10px;
                             width: 35px;
@@ -1165,14 +1181,17 @@
         .sensor-view {
             height: calc(100% - 120px);
         }
+
         .right-sel {
             width: 100%;
             flex-wrap: wrap;
+
             .sensor-type-div {
                 margin-bottom: 0;
                 background: unset;
                 border: none;
                 height: auto;
+
                 .sensor-sel {
                     >div {
                         padding-left: 0;
@@ -1181,6 +1200,7 @@
             }
         }
     }
+
     .sensor-type {
         .sensor-title {
             font-size: 20px;
@@ -1188,6 +1208,7 @@
             font-weight: bold;
             color: #FFFFFF;
             padding: 20px 0;
+
             .sensor-sel {
                 >div {
                     padding-left: 0;
@@ -1553,29 +1574,41 @@
     width: 100%;
     height: 100%;
     padding: 20px;
+    flex-direction: column;
+    justify-content: unset;
+    @extend .scroll;
+
+    .new-data {
+        margin-bottom: 20px;
+    }
 
     .page-content {
         position: relative;
         width: 100%;
-        height: 100%;
+        height: auto;
+        flex-shrink: 0;
         background: rgba(0, 92, 178, 0.15);
         border: 2px solid rgba(0, 186, 255, 0.20);
-        padding: 30px 30px 20px;
+        padding: 30px 20px 20px;
+
         .control-view {
             display: flex;
             align-items: center;
             position: absolute;
             right: 30px;
             top: 10px;
+
             .title {
                 margin-right: 10px;
             }
+
             .control-list {
                 display: flex;
                 align-items: center;
 
                 overflow: hidden;
                 max-width: 806px;
+
                 >div {
                     // width: 100%!important;
                     display: flex;
@@ -1588,10 +1621,12 @@
                         margin-right: 100px;
                     }
                 }
+
                 .list-view {
                     display: flex;
                     align-items: center;
                     margin-right: 10px;
+
                     .icon {
                         width: 30px;
                         height: 30px;
@@ -1725,6 +1760,63 @@
                 height: 100%;
             }
         }
+
+        .status-view {
+            width: 300px;
+            height: 300px;
+            background: rgba(0, 132, 255, 0.15);
+            border: 2px solid rgba(0, 186, 255, 0.35);
+            margin: 7.5px;
+
+            .status-view-top {
+                padding: 0 10px 0 20px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                height: 50px;
+                border-bottom: 1px solid rgba(0, 180, 255, .35);
+
+                .status-view-top-left {
+                    font-size: 20px;
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #FFFFFF;
+                }
+
+                .status-view-top-right {
+                    cursor: pointer;
+                    padding: 0 10px;
+                }
+
+            }
+
+            .status-view-content {
+                width: 100%;
+                height: calc(100% - 51px);
+
+                .status-noTrue {
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-direction: column;
+
+                    >img {
+                        width: 40px;
+                        height: 35px;
+                        margin-bottom: 20px;
+                    }
+
+                    >div {
+                        font-size: 14px;
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        color: #8BEAFF;
+                    }
+                }
+            }
+        }
     }
 }
 
@@ -2075,14 +2167,17 @@ font-weight: bold;
             border-top: 1px solid rgba(0, 180, 255, .75);
             border-bottom: 1px solid rgba(0, 180, 255, .75);
             overflow-x: scroll;
+
             >div {
                 display: inline-block;
                 width: auto;
             }
+
             .table-header {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
+
                 >div {
                     width: 70px;
                     height: 100%;
@@ -2092,12 +2187,14 @@ font-weight: bold;
                     flex-shrink: 0;
                 }
             }
+
             .table-tr {
                 >div {
 
                     display: flex;
                     align-items: center;
                     justify-content: space-between;
+
                     >div {
                         width: 70px;
                         height: 100%;
@@ -2109,19 +2206,24 @@ font-weight: bold;
                 }
             }
         }
+
         .table-tr {
             width: 100%;
+
             >div {
                 height: 60px;
                 text-align: center;
                 line-height: 60px;
             }
+
             >div:nth-child(odd) {
                 background: rgba(0, 47, 94, .35);
             }
+
             >div:nth-child(even) {
                 background: rgba(0, 180, 255, 0.2);
             }
+
             .no-sel {
                 width: 35px;
                 height: 35px;
@@ -2139,6 +2241,7 @@ font-weight: bold;
                 cursor: pointer;
             }
         }
+
         .table-header {
             width: 100%;
             height: 50px;
@@ -2152,3 +2255,25 @@ color: #FFFFFF;
         }
     }
 }
+
+.plantingPlan {
+    width: 100%;
+    height: 100%;
+
+    .btn {
+        opacity: 1;
+
+        .img {
+            height: 20px;
+            width: 20px;
+        }
+    }
+
+    .plan-view {
+        width: 440px;
+        height: 200px;
+        background: url(../img/plan-bg.png) no-repeat center;
+        background-size: 100% 100%;
+        margin: 7.5px 15px;
+    }
+}

src/router/index.js

@@ -97,6 +97,18 @@ const routes = [
       },]
     },]
   },
+
+  {
+    path: '/vrcode',
+    name: 'vrcode',
+    component: () => import('../views/vrcode.vue'),
+    redirect: '/plantingPlan',
+    children: [{
+      path: '/plantingPlan',
+      name: 'plantingPlan',
+      component: () => import('../views/vrcode/plantingPlan.vue')
+    }]
+  },
 ]
 
 const router = new VueRouter({

src/views/page/realTime.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="formula realTime">
-        <div class="page-content">
+        <div class="page-content new-data">
 
             <div class="control-view" v-if="deviceName == 10">
                 <div class="title">气象站:</div>
@@ -62,6 +62,7 @@
                 <div class="right" id="realTime-line"></div>
             </div>
         </div>
+
     </div>
 </template>
 <script>
@@ -102,6 +103,8 @@ export default {
     },
     data() {
         return {
+            statusList:[{name:'左向天窗',open:true,progress:55,isTrue:true,index:1},
+            {name:'右向天窗',open:true,progress:55,isTrue:false,index:2}],
             time: null,//右上角时间
             list: [],
             inputData: [],
@@ -454,4 +457,39 @@ export default {
 .video-js-select-quality-item {
     color: rgba(0, 0, 0, 0.85) !important;
 }
-</style>
+
+.set-status-blue {
+    color: #409eff;
+    font-size: 14px;
+    cursor: pointer;
+    padding: 5px 0;
+}
+
+.set-status-red {
+    color: red;
+    cursor: pointer;
+    font-size: 14px;
+    padding: 5px 0;
+}
+
+.del-text {
+    color: #000;
+    font-size: 14px;
+}
+
+.color-blue {
+    span {
+        color: #409eff;
+        font-size: 14px;
+    }
+}
+
+.status-save {
+    width: 45px;
+    height: 28px;
+    text-align: center;
+    border-radius: 4px;
+    border: 1px solid #dcdfe6;
+    color: #606266;
+    font-size: 14px;
+}</style>

src/views/vrcode.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="index">
+        <div class="header">
+            <div class="header-left">
+                <img src="../assets/image/logo.png" alt="">
+            </div>
+            <div class="header-center">
+
+            </div>
+            <div class="header-right" v-if="userInfo">
+                <img src="../assets/image/avatar.png" alt="">
+                <div class="user-data">
+                    <div class="name">欢迎，{{ userInfo.nickName }}</div>
+                    <div class="time" v-if="time"> {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}</div>
+                </div>
+                <div class="login-out" @click="loginOut"></div>
+            </div>
+        </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 }}
+                            </template>
+                            <ul class="table-ul">
+                                <li class="table-li" @click="toRouter1(item1)"
+                                    :class="item.routerList.indexOf(routerNow) != -1 && routerIndex == item1.index ? '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>
+                    </template>
+
+                </el-collapse>
+            </div>
+            <div class="right right-page">
+                <router-view></router-view>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { getnowtime } from '../assets/js/nowTime'
+export default {
+    data() {
+        return {
+            time: null,//当前时间
+
+
+            activeNames: [3],
+            leftList: [
+                { name: '种植计划', img: require('../assets/image/vrcode-icon0.png'), list: [], router: '', isRouter: true, },
+                { name: '生产环节', routerList: [], img: require('../assets/image/vrcode-icon1.png'), list: [{ name: '农事管理' }, { name: '施肥记录' }, { name: '打药记录' }, { name: '采摘记录' }, { name: '清洁记录' }, { name: '病虫害管理' },] },
+                { name: '产品追溯', routerList: [], img: require('../assets/image/vrcode-icon2.png'), list: [{ name: '溯源批次' }, { name: '配置溯源版面' }, { name: '各种报告库' }] },
+                { name: '基础信息设置', routerList: [], img: require('../assets/image/vrcode-icon3.png'), list: [{ name: '作物品种' }, { name: '种植栽培模式' }, { name: '农事作业工序' }, { name: '人员管理' }, { name: '农场信息管理' }, { name: '供应商管理' }, { name: '生产资料管理' }, { name: '农机工具管理' }, { name: '作物外观图片库' },] },],
+            routerNow: 'plantingPlan',
+            deviceName: 1,
+            routerIndex: 1,
+            equipmentList: [],
+            userInfo: null,
+            loading: true,//页面加载
+            IDTimer: null,
+        }
+    },
+    watch: {
+        "$route"(newName, oldName) {
+            this.gerRouter();
+        },
+    },
+    mounted() {
+        const that = this
+        this.getTime()
+        var router = this.$route.query
+        if (router.token && router.userid) {
+            localStorage.setItem('token', router.token)
+
+            this.api.getUser({ userId: router.userid }).then(res => {
+                var data = res.data.data
+                data.userid = router.userid
+                localStorage.setItem('userInfo', JSON.stringify(data))
+                this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
+                this.gerRouter();
+                // this.getEqbyid()
+            })
+            return
+        } else {
+            if (localStorage.getItem('token')) {
+                this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
+            }
+            this.gerRouter();
+            // this.getEqbyid()
+        }
+        this.IDTimer && clearInterval(this.IDTimer)
+        this.IDTimer = setInterval(() => {
+            // that.getEqbyid()
+        }, 120000);
+
+    },
+    beforeDestroy() {
+        this.IDTimer && clearInterval(this.IDTimer)
+    },
+    methods: {
+
+        gerRouter() {
+            var store = this.$store.state
+            this.routerIndex = this.$route.query.index ? this.$route.query.index : store.equipmentIndex
+            this.routerNow = this.$route.name;
+            if (store.equipmentList.length) {
+                this.deviceName = store.equipmentList[this.routerIndex - 1].deviceName
+            } else {
+
+            }
+
+        },
+        loginOut() {
+            this.api.loginOut().then((res) => {
+
+                if (res.data.code == 200) {
+                    this.$message({
+                        message: '退出登录成功',
+                        type: "success",
+                    });
+                    localStorage.removeItem('token')
+                    localStorage.removeItem('userInfo')
+                    this.$router.push({ name: 'login' })
+                } else {
+                    this.$message.error("请求出错");
+                }
+            })
+        },
+        toHome() {
+            this.$router.push({ name: 'home' })
+        },
+        toRouter(item) {
+            if (item.router) {
+                if (item.http) {
+                    window.location.href = item.http;
+                }
+            } else {
+                this.$message('当前页面正在努力开发中');
+            }
+        },
+        toRouter1(item) {
+            if (item.router) {
+                if (item.http) {
+                    window.location.href = item.http;
+                }
+            } else {
+                this.$message('当前页面正在努力开发中');
+            }
+        },
+        getTime() {
+            this.time = getnowtime()
+            const that = this
+            setInterval(() => {
+                that.time = getnowtime()
+            }, 1000);
+        },
+    },
+
+}
+</script>
+<style lang="scss"></style>
+  

src/views/vrcode/plantingPlan.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="plantingPlan">
+    <div class="page-content">
+      <div class="table-title">
+        <img src="../../assets/img/plan.png" alt="" />
+        种植计划
+      </div>
+      <div class="flex-view">
+        <div class="btn green"><img src="../../assets/img/add.png" alt="">新增种植计划</div>
+      </div>
+      <div class="flex-view border-none">
+        <div class="plan-view" v-for="item,index in 10">
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {}
+  },
+  mounted() { },
+  methods: {},
+
+}
+</script>
+<style lang="scss"></style>
+  
+