新问题修改 新页面暂时注释掉了

src/assets/css/main.css

@@ -1,20 +1,20 @@
 @charset "UTF-8";
-.scroll, .el-dropdown-menu, .formula .page-content {
+.scroll, .el-dropdown-menu, .formula .page-content, .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 {
+.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 {
   /*滚动条整体*/
   width: 10px;
   cursor: pointer;
 }
 
-.scroll::-webkit-scrollbar-track, .el-dropdown-menu::-webkit-scrollbar-track, .formula .page-content::-webkit-scrollbar-track {
+.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 {
   /*滚动条轨道*/
   background: #013769;
 }
 
-.scroll::-webkit-scrollbar-thumb, .el-dropdown-menu::-webkit-scrollbar-thumb, .formula .page-content::-webkit-scrollbar-thumb {
+.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 {
   /*滚动条里面的滑块*/
   width: 4px;
   cursor: pointer;
@@ -22,14 +22,24 @@
   border: 3px solid #013769;
 }
 
-.scroll::-webkit-scrollbar-thumb:hover, .el-dropdown-menu::-webkit-scrollbar-thumb:hover, .formula .page-content::-webkit-scrollbar-thumb:hover {
+.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-corner, .el-dropdown-menu::-webkit-scrollbar-corner, .formula .page-content::-webkit-scrollbar-corner {
+.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 {
   /*滚动条边角*/
 }
 
+.el-date-table td span,
+.el-date-range-picker__header div {
+  color: #606266;
+}
+
+.el-date-table td.end-date div span,
+.el-date-table td.start-date div span {
+  color: #fff !important;
+}
+
 .el-dropdown-menu {
   max-height: 300px;
 }
@@ -1379,6 +1389,7 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  margin-right: 100px;
 }
 
 .realTime .page-content .realTime-list .seamless-warp .list-view {
@@ -1453,3 +1464,190 @@
   min-width: 230px;
   height: 100%;
 }
+
+.history .page-content {
+  width: 100%;
+}
+
+.history .page-content .el-table--scrollable-x .el-table__body-wrapper .el-table__row {
+  height: 60px;
+}
+
+.history .page-content .search-flex {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-top: 20px;
+}
+
+.history .page-content .search-flex .search-left {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 15px 0;
+}
+
+.history .page-content .search-flex .search-left > div {
+  display: flex;
+  align-items: center;
+}
+
+.history .page-content .search-flex .search-left > div > div {
+  margin-left: 10px;
+  width: 80px;
+  height: 34px;
+  background: rgba(0, 186, 255, 0.15);
+  border: 2px solid rgba(0, 186, 255, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.history .page-content .search-flex .search-left > div > div.active {
+  border: 2px solid #0294E2;
+  background: #0294E2;
+}
+
+.history .page-content .search-flex .search-right {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 15px 0;
+}
+
+.history .page-content .search-flex .search-right span {
+  margin-right: 10px;
+}
+
+.history .page-content .search-flex .search-right .el-input__inner {
+  height: 44px;
+  background: rgba(0, 186, 255, 0.15);
+  border: 2px solid rgba(0, 186, 255, 0.4);
+}
+
+.history .page-content .search-flex .search-right .el-date-editor .el-range-separator {
+  color: #fff;
+}
+
+.history .page-content .search-flex .search-right .el-date-editor .el-range-input {
+  background-color: transparent;
+  color: #fff;
+}
+
+.dataAnalysis .page-content .search-flex {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dataAnalysis .page-content .analysis-charts {
+  width: 100%;
+  height: 560px;
+}
+
+.dataAnalysis .page-content .analysis-charts > div {
+  width: 100%;
+  height: 100%;
+}
+
+.systemManage .page-content .manage-sel {
+  display: flex;
+  align-items: center;
+  padding: 20px 0;
+  border-bottom: 1px solid rgba(0, 180, 255, 0.35);
+}
+
+.systemManage .page-content .manage-sel > div {
+  margin-right: 20px;
+  padding: 0 20px;
+  height: 40px;
+  background: rgba(0, 186, 255, 0.15);
+  border: 2px solid rgba(0, 186, 255, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.systemManage .page-content .manage-sel > div > img {
+  width: 14px;
+  height: auto;
+  margin-right: 5px;
+}
+
+.systemManage .page-content .manage-sel > div.active {
+  border: 2px solid #0294E2;
+  background: #0294E2;
+}
+
+.systemManage .page-content .manage-content {
+  width: 100%;
+  height: calc(100% - 160px);
+}
+
+.systemManage .page-content .manage-content .manage-input {
+  margin-bottom: 25px;
+}
+
+.systemManage .page-content .manage-content .manage-input > div {
+  margin-bottom: 10px;
+}
+
+.systemManage .page-content .manage-content .manage-input > input {
+  width: 500px;
+  height: 44px;
+  background: rgba(0, 186, 255, 0.15);
+  border: 2px solid rgba(0, 186, 255, 0.4);
+  padding: 0 15px;
+}
+
+.systemManage .page-content .manage-content .manage-input > input::placeholder {
+  color: #859bb6;
+}
+
+.systemManage .page-content .manage-content .manage-btn {
+  width: 300px;
+  height: 60px;
+  background: #0294E2;
+  border-radius: 10px;
+  margin-top: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+}
+
+.systemManage .page-content .manage-content.manage-content-input {
+  height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.systemManage .page-content .manage-content.manage-content-form {
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.systemManage .page-content .manage-content.manage-content-form .manage-input > input {
+  width: 660px;
+}
+
+.systemManage .page-content .manage-content.manage-content-form .manage-html > div {
+  margin-bottom: 10px;
+}
+
+.systemManage .page-content .manage-content.manage-content-form .manage-html > .html {
+  width: 660px;
+  height: 120px;
+  background: rgba(0, 186, 255, 0.15);
+  border: 2px solid rgba(0, 186, 255, 0.4);
+}

src/assets/css/main.scss

@@ -33,6 +33,16 @@
 
 }
 
+.el-date-table td span,
+.el-date-range-picker__header div {
+    color: #606266;
+}
+
+.el-date-table td.end-date div span,
+.el-date-table td.start-date div span {
+    color: #fff !important;
+}
+
 .el-dropdown-menu {
     max-height: 300px;
     @extend .scroll;
@@ -224,6 +234,7 @@
     background: url(../image/index-background.png) no-repeat;
     background-size: 1920px 1080px;
     background-position: center top;
+
     .no-list {
         color: #fff;
         display: flex;
@@ -1431,55 +1442,63 @@
                 margin-left: 10px;
             }
         }
-        .realTime-list{
+
+        .realTime-list {
             width: 100%;
             overflow: hidden;
-                .seamless-warp{
+
+            .seamless-warp {
+                display: flex;
+                align-items: center;
+
+                >div {
+                    // width: 100%!important;
                     display: flex;
-                    align-items: center;
+                    overflow: unset !important;
-                    >div{
+
-                        // width: 100%!important;
+                    >div {
                         display: flex;
-                        overflow: unset!important;
-                        >div{
-                            display: flex;
                         align-items: center;
                         flex-shrink: 0;
-                        }
+                        margin-right: 100px;
-                    }
-                    .list-view {
-                        flex-shrink: 0;
-                        display: flex;
-                        flex-direction: column;
-                        align-items: center;
-                        margin-right: 20px;
-                        img {
-                            width: 80px;
-                            height: 80px;
-        
-                        }
-        
-                        .text {
-                            margin: 5px 0;
-                        }
-        
-                        .number {
-                            width: 106px;
-                            height: 40px;
-                            background: url(../image/real-time-text.png) no-repeat center;
-                            background-size: 100% 100%;
-                            font-size: 20px;
-                            font-family: Arial;
-                            font-weight: bold;
-                            color: #FFFFFF;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                        }
                     }
                 }
 
+                .list-view {
+                    flex-shrink: 0;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    margin-right: 20px;
+
+                    img {
+                        width: 80px;
+                        height: 80px;
+
+                    }
+
+                    .text {
+                        margin: 5px 0;
+                    }
+
+                    .number {
+                        width: 106px;
+                        height: 40px;
+                        background: url(../image/real-time-text.png) no-repeat center;
+                        background-size: 100% 100%;
+                        font-size: 20px;
+                        font-family: Arial;
+                        font-weight: bold;
+                        color: #FFFFFF;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+                }
+            }
+
         }
+
         .flex-list {
             display: flex;
             align-items: center;
@@ -1498,7 +1517,7 @@
             }
 
             .left {
-                width:43%;
+                width: 43%;
                 height: 100%;
                 background: rgba(0, 132, 255, 0.15);
                 border: 2px solid rgba(0, 186, 255, 0.35);
@@ -1508,7 +1527,7 @@
                 padding: 10px;
 
                 >div {
-                    width:100%;
+                    width: 100%;
                     height: 100%;
 
                     .video-js {
@@ -1526,3 +1545,216 @@
         }
     }
 }
+
+.history {
+    .page-content {
+        width: 100%;
+
+        .el-table--scrollable-x .el-table__body-wrapper {
+            @extend .scroll;
+
+            .el-table__row {
+                height: 60px;
+            }
+        }
+
+        .search-flex {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            width: 100%;
+            margin-top: 20px;
+
+            .search-left {
+                display: flex;
+                align-items: center;
+                flex-shrink: 0;
+                padding: 15px 0;
+
+                span {}
+
+                >div {
+                    display: flex;
+                    align-items: center;
+
+                    >div {
+                        margin-left: 10px;
+                        width: 80px;
+                        height: 34px;
+                        background: rgba(0, 186, 255, 0.15);
+                        border: 2px solid rgba(0, 186, 255, 0.4);
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        border-radius: 3px;
+                        cursor: pointer;
+
+                        &.active {
+                            border: 2px solid #0294E2;
+                            background: #0294E2;
+                        }
+                    }
+                }
+            }
+
+            .search-right {
+                display: flex;
+                align-items: center;
+                flex-shrink: 0;
+                padding: 15px 0;
+
+                span {
+                    margin-right: 10px;
+                }
+
+                .el-input__inner {
+                    height: 44px;
+                    background: rgba(0, 186, 255, 0.15);
+                    border: 2px solid rgba(0, 186, 255, 0.40);
+                }
+
+                .el-date-editor .el-range-separator {
+                    color: #fff;
+                }
+
+                .el-date-editor .el-range-input {
+                    background-color: transparent;
+                    color: #fff;
+                }
+            }
+        }
+    }
+}
+
+.dataAnalysis {
+    .page-content {
+        .search-flex {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .analysis-charts {
+            width: 100%;
+            height: 560px;
+
+            >div {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
+
+.systemManage {
+    .page-content {
+        .manage-sel {
+            display: flex;
+            align-items: center;
+            padding: 20px 0;
+            border-bottom: 1px solid rgba(0, 180, 255, .35);
+
+            >div {
+                margin-right: 20px;
+                padding: 0 20px;
+                height: 40px;
+                background: rgba(0, 186, 255, 0.15);
+                border: 2px solid rgba(0, 186, 255, 0.4);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 3px;
+                cursor: pointer;
+
+                >img {
+                    width: 14px;
+                    height: auto;
+                    margin-right: 5px;
+                }
+
+                &.active {
+                    border: 2px solid #0294E2;
+                    background: #0294E2;
+                }
+            }
+        }
+
+        .manage-content {
+            width: 100%;
+            height: calc(100% - 160px);
+
+            .manage-input {
+                margin-bottom: 25px;
+
+                >div {
+                    margin-bottom: 10px;
+                }
+
+                >input {
+                    width: 500px;
+                    height: 44px;
+                    background: rgba(0, 186, 255, 0.15);
+                    border: 2px solid rgba(0, 186, 255, 0.40);
+                    padding: 0 15px;
+
+                    &::placeholder {
+                        color: rgba(133, 155, 182, 1);
+                    }
+                }
+            }
+
+            .manage-btn {
+                width: 300px;
+                height: 60px;
+                background: #0294E2;
+                border-radius: 10px;
+                margin-top: 25px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 20px;
+            }
+
+            &.manage-content-input {
+                height: 400px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+
+            }
+
+            &.manage-content-form {
+                margin-top: 15px;
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+                .manage-input {
+
+                    >input {
+                        width: 660px;
+
+                    }
+                }
+
+                .manage-html {
+                    >div {
+                        margin-bottom: 10px;
+                    }
+
+                    >.html {
+                        width: 660px;
+                        height: 120px;
+                        background: rgba(0, 186, 255, 0.15);
+                        border: 2px solid rgba(0, 186, 255, 0.40);
+
+                        >div {
+
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/components/setParams.vue

@@ -77,9 +77,9 @@ export default {
            store.nameList.forEach((el,index)=>{
                 if(index<8){
                     if(store.equipmentName['fertilization'+store.nameList[index]]){
-                      console.log(store.equipmentName,2);
+                        // store.equipmentName['fertilization'+store.nameList[index]]
                         this.routerList[0].list.push({
-                            name:store.equipmentName['fertilization'+store.nameList[index]],
+                            name:'配方'+(index+1),
                             status: -1,
                             index:index+1,
                             router: 'formula'

src/router/index.js

@@ -56,6 +56,18 @@ const routes = [
       path: '/sensorSet',
       name: 'sensorSet',
       component: () => import('../views/page/sensorSet.vue')
+    },{
+      path: '/history',
+      name: 'history',
+      component: () => import('../views/page/history.vue')
+    },{
+      path: '/dataAnalysis',
+      name: 'dataAnalysis',
+      component: () => import('../views/page/dataAnalysis.vue')
+    },{
+      path: '/systemManage',
+      name: 'systemManage',
+      component: () => import('../views/page/systemManage.vue')
     },]
   },
 ]

src/store/index.js

@@ -6,6 +6,7 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     lateSend: 100,//写入停止后 *100毫秒进行发送 例如10*100就是1000毫秒(1s)
+    lateSendBtn: 15,//写入停止后 *100毫秒进行发送 例如10*100就是1000毫秒(1s)
     equipmentList: [],//当前账户施肥设备
     equipmentIndex: 1,//当前在第几个设备
     equipmentName: null,//当前设备 小设备的各个名字

src/views/index.vue

@@ -64,16 +64,19 @@ export default {
                 { name: '设定值参数', router: 'formula', index: 1, routerList: ['formula', 'irrigateSet', 'PIDSet', 'systemSet', 'upload', 'sensorSet'], img: require('../assets/image/header-img0.png') },
                 { name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img1.png') },
                 { name: '视频监控', router: '', routerList: [], img: require('../assets/image/header-img2.png') },
-                { name: '历史数据', router: '', routerList: [], img: require('../assets/image/header-img3.png') },
+                //  history history
-                { name: '图库数据', router: '', routerList: [], img: require('../assets/image/header-img4.png') },
+                { name: '历史数据', router: '',index: 1, routerList: [''], img: require('../assets/image/header-img3.png') },
+                //dataAnalysis dataAnalysis
+                { name: '数据分析', router: '',index: 1, routerList: [''], img: require('../assets/image/header-img4.png') },
                 { name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
-                { name: '管理', router: '', routerList: [], img: require('../assets/image/header-img6.png') }],
+                //systemManage systemManage
+                { name: '管理', router: '', routerList: [''], img: require('../assets/image/header-img6.png') }],
             activeNames: [4],
             leftList: [
                 { name: '首页', img: require('../assets/image/index-icon.png'), list: [], router: 'realTime', isRouter: true, },
                 { name: '一号温室', img: require('../assets/image/left-img0.png'), list: [] },
                 { name: '二号温室', img: require('../assets/image/left-img1.png'), list: [] },
-                { name: '施肥机', routerList: ['formula', 'irrigateSet', 'PIDSet', 'systemSet', 'upload', 'sensorSet', 'realTime'], img: require('../assets/image/left-img2.png'), list: [] },],
+                { name: '施肥机', routerList: ['formula', 'irrigateSet', 'PIDSet', 'systemSet', 'upload', 'sensorSet', 'realTime','history','dataAnalysis'], img: require('../assets/image/left-img2.png'), list: [] },],
             routerNow: 'realTime',
             routerIndex: 1,
             equipmentList: [],
@@ -189,6 +192,12 @@ export default {
                     this.$store.state.equipmentIndex = item.index
                     this.$router.push({ path: `/${item.router}?index=${item.index ? item.index : 1}` })
 
+                }else if (item.router == 'history' && this.$route.query.index != item.index) {
+                    this.$router.push({ path: `/history?index=${item.index ? item.index : 1}` })
+
+                }else if (item.router == 'dataAnalysis' && this.$route.query.index != item.index) {
+                    this.$router.push({ path: `/dataAnalysis?index=${item.index ? item.index : 1}` })
+
                 } else if (item.router != this.routerNow && !item.http) {
                     this.$router.push({ name: item.router })
                 }
@@ -203,12 +212,15 @@ export default {
                 } else if (item.router == 'formula' && this.$route.query.index != item.index) {
                     if (this.routerNow == 'realTime') {
                         this.$router.push({ path: `/realTime?index=${item.index ? item.index : 1}` })
-                    } else {
+                    } else if(this.routerNow == 'formula'){
                         this.$store.state.equipmentIndex = item.index
                         this.$router.push({ path: `/formula?index=${item.index ? item.index : 1}` })
-
+                    } else if(this.routerNow == 'history'){
+                        this.$router.push({ path: `/history?index=${item.index ? item.index : 1}` })
+                    } else if(this.routerNow == 'dataAnalysis'){
+                        this.$router.push({ path: `/dataAnalysis?index=${item.index ? item.index : 1}` })
                     }
-                } else if (item.router != this.routerNow && !item.http) {
+                }  else if (item.router != this.routerNow && !item.http) {
                     this.$router.push({ name: item.router })
                 }
             } else {

src/views/page/dataAnalysis.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="formula history dataAnalysis">
+        <!-- 数据分析 -->
+        <div class="page-content">
+            <div class="table-title">
+                <img src="../../assets/image/analysis.png" alt="" />
+                智慧水肥(数据分析)
+            </div>
+            <div class="search-flex">
+
+                <div class="search-right">
+                    <span>时间段</span>
+                    <el-date-picker v-model="value1" unlink-panels type="daterange" range-separator="至"
+                        start-placeholder="开始日期" end-placeholder="结束日期">
+                    </el-date-picker>
+                    <div class="input-btn">
+                        <div class="btn green">
+                            <img src="../../assets/image/irrigateSet1.png" alt="" />查询
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+
+            <div class="analysis-charts">
+                <div class="charts" id="realTime-line"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { realTimeLine } from '@/assets/js/charts'
+export default {
+    data() {
+        return {
+            value1: '',
+                  indexs: 1,
+        }
+    },
+    mounted() {
+        this.indexs = this.$route.query.index ? this.$route.query.index : 1;
+        this.dataInit()
+     
+    },
+    methods: {
+        dataInit() {
+            var store = this.$store.state
+            var equipmentId=store.equipmentList[this.indexs - 1].deviceId
+            var data1 = store.equipmentList[this.indexs - 1].deviceId
+
+            this.api.postFsdata(data1).then(res => {
+                if (res.data.code == 200) {
+                    var chartsData = res.data.data
+                    realTimeLine('realTime-line', chartsData)
+                } else {
+                    this.$message.error(res.data.msg);
+                }
+            })
+        }
+    },
+
+}
+</script>
+<style lang="scss"></style>
+  
+  

src/views/page/formula.vue

@@ -3,7 +3,7 @@
     <set-params></set-params>
     <div class="page-content">
       <div class="table-title">
-        <img src="../../assets/image/formula.png" alt=""> {{ titleName }}参数 <div class="tips">种植作物配方1</div>
+        <img src="../../assets/image/formula.png" alt=""> 施肥配方参数{{indexs}} <div class="tips">{{ titleName }}</div>
       </div>
       <div class="input-view">
         <div class="input-sel">

src/views/page/history.vue

@@ -0,0 +1,129 @@
+<template>
+    <div class="formula history">
+        <!-- 历史记录 -->
+        <div class="page-content">
+            <div class="table-title">
+                <img src="../../assets/image/history.png" alt="" />
+                智慧水肥(历史数据)
+            </div>
+            <div class="search-flex">
+                <div class="search-left">
+                    <span>快速查询</span>
+                    <div class="">
+                      <div :class="timeSel==index?'active':''" @click="timeSel=index" v-for="item,index in timeList" :key="index">{{ item }}</div>
+                    </div>
+                </div>
+                <div class="search-right" v-if="timeSel==2">
+                  <span>快速查询</span>
+                  <el-date-picker
+      v-model="value1"
+      unlink-panels
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期">
+    </el-date-picker>
+    <div class="input-btn">
+          <div class="btn green">
+            <img src="../../assets/image/irrigateSet1.png" alt="" />查询
+          </div>
+          <div class="btn blue">
+            <img src="../../assets/image/irrigateSet3.png" alt="" />下载
+          </div>
+          <div class="btn blue" >
+            <img src="../../assets/image/irrigateSet2.png" alt="" />统计
+          </div>
+        </div>
+                </div>
+            </div>
+            <div class="table-view">
+                <el-table :data="tableData" :row-class-name="tableRowClassName" height="420" style="width: 100%">
+          <el-table-column prop="data0"  width="180" label="时间">
+            <template slot-scope="scope">
+             <div>2023-09-23 14:08:19</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="data0" width="160" label="目标水肥PH">
+            <template slot-scope="scope">
+             <div>111</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="data0" width="200" label="1#肥EC(mS/cm)">
+            <template slot-scope="scope">
+             <div>111</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="data0" width="160" label="水肥PH">
+            <template slot-scope="scope">
+             <div>111</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="data0" width="200"  label="目标水肥EC(mS/cm)">
+            <template slot-scope="scope">
+             <div>111</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="data0" width="160" label="2#水肥PH">
+            <template slot-scope="scope">
+             <div>111</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="data0" width="160" label="水肥EC(mS/cm)">
+            <template slot-scope="scope">
+             <div>111</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="data0" width="160" label="1#水肥PH">
+            <template slot-scope="scope">
+             <div>111</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="data0" width="200" label="2#水肥EC(mS/cm)">
+            <template slot-scope="scope">
+             <div>111</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="data0" width="160" label="1#水肥PH">
+            <template slot-scope="scope">
+             <div>111</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="data0" width="160" label="1#水肥PH">
+            <template slot-scope="scope">
+             <div>111</div>
+            </template>
+          </el-table-column>
+         </el-table>
+
+            </div>
+           
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            tableData:[{},{},{},{},{},{},],
+            timeList:['今日','昨日','自定义'],
+            timeSel:0,
+            value1:''
+        }
+    },
+    mounted() { },
+    methods: {
+        tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 == 1) {
+        return 'warning-row';
+      } else if (rowIndex % 2 == 0) {
+        return 'success-row';
+      }
+      return '';
+    }
+    },
+
+}
+</script>
+<style lang="scss"></style>
+  
+  

src/views/page/irrigateSet.vue

@@ -874,7 +874,7 @@ export default {
           value: parseInt(num, 2),
         },
       };
-      this.change(10 + (this.indexs - 1) + "00", dataNum);
+      this.changeBtn(10 + (this.indexs - 1) + "00", dataNum);
     },
     padString(str, length) {
             return str.padStart(length, '0');
@@ -920,7 +920,7 @@ export default {
           value: parseInt(num, 2),
         },
       };
-      this.change(10 + (this.indexs - 1) + "59", dataNum);
+      this.changeBtn(10 + (this.indexs - 1) + "59", dataNum);
     },
     getType() {
       var number =this.padString( this.inputData[10 + (this.indexs - 1) + "59"].toString(2),4)
@@ -993,6 +993,31 @@ selectValue(e) {
      }
      
     },
+    changeBtn(code,el){
+      var store=this.$store.state
+      var data = {
+        equipmentId: store.equipmentList[store.equipmentIndex-1].deviceId,
+        regAddress: code,
+        num: el.target.value,
+      };
+      this.delayTimerBtn(0, data);
+    },
+    //切换btn的限制 写入停止后j*100毫秒调取函数
+    delayTimerBtn(i, data) {
+      const that = this;
+      //整体接口
+      let j = this.$store.state.lateSendBtn;
+      //避免开启多个计时器
+      this.timer && clearInterval(this.timer);
+
+      this.timer = setInterval(() => {
+        ++i;
+        if (i == j) {
+          that.changeData(data);
+          clearInterval(this.timer);
+        }
+      }, 100);
+    },
     //间隔灌溉天数
     change(code, el) {
       var store=this.$store.state

src/views/page/realTime.vue

@@ -212,7 +212,6 @@ export default {
             var data1 = store.equipmentList[this.indexs - 1].deviceId
 
             this.api.postFsdata(data1).then(res => {
-                console.log(res.data, 11);
                 if (res.data.code == 200) {
                     var chartsData=res.data.data
                     realTimeLine('realTime-line',chartsData)

src/views/page/systemManage.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="formula history systemManage">
+        <!-- 系统管理 -->
+        <div class="page-content">
+            <div class="table-title">
+                <img src="../../assets/image/set.png" alt="" />
+                管理
+            </div>
+            <div class="manage-sel">
+                <div @click="manageSel=0" :class="manageSel==0?'active':''"><img src="../../assets/image/user.png" alt="">系统信息修改</div>
+                <div @click="manageSel=1" :class="manageSel==1?'active':''"><img src="../../assets/image/compose.png" alt="">登录名称修改</div>
+            </div>
+            <!-- 系统信息修改 -->
+            <div class="manage-content manage-content-form scroll" v-if="manageSel==0">
+                <div class="manage-input">
+                    <div>项目标头文字</div>
+                    <input type="text" placeholder="输入项目标头文字" v-model="form.title">
+                </div>
+                <div class="manage-html">
+                    <div>标头文字预贤</div>
+                    <div class="html">
+                        <div :style="form.style">{{ form.title }}</div>
+                    </div>
+                </div>
+                <div class="manage-btn">保存</div>
+            </div>
+            <!-- 登录名称修改 -->
+            <div class="manage-content manage-content-input" v-if="manageSel==1">
+                <div class="manage-input">
+                    <div>登录名</div>
+                    <input type="text" placeholder="输入登录名" >
+                </div>
+                  <div class="manage-input">
+                    <div>昵称</div>
+                    <input type="text" placeholder="输入昵称" >
+                </div>
+                <div class="manage-btn">保存</div>
+            </div>
+        </div>
+    </div>
+  </template>
+  <script>
+  export default {
+    data(){
+        return {
+            manageSel:0,
+            form:{
+                title:'智慧农业数字李生系统3.0版本 (西安邮电-西安交大联合开发)',
+
+            }
+        }
+    },
+    mounted(){},
+    methods:{},
+  
+  }
+  </script>
+  <style lang="scss">
+  
+  </style>
+  
+