Merge pull request 'pc-master' (#35) from pc-master into portal

Reviewed-on: #35

src/api/index.js

@@ -1,6 +1,7 @@
 import axios from "axios";
 // import qs from 'qs'
 import router from '../router/index'
+
 function sendGetRequest(url, data) {
   return new Promise(function (resolve, reject) {
     axios.get(url, {
@@ -13,9 +14,11 @@ function sendGetRequest(url, data) {
         params: data
       })
       .then(function (res) { //请求成功，response接收返回参数
-        if(res.data.code==401){
+        if (res.data.code == 401) {
           localStorage.removeItem('token')
-          router.push({ name:'login' })
+          router.push({
+            name: 'login'
+          })
         }
         resolve(res);
 
@@ -38,9 +41,11 @@ function sendPostRequest(url, data) {
       }
     }).then(
       (res) => {
-        if(res.data.code==401){
+        if (res.data.code == 401) {
           localStorage.removeItem('token')
-          router.push({ name:'login' })
+          router.push({
+            name: 'login'
+          })
         }
         resolve(res);
       },
@@ -82,73 +87,114 @@ export default {
   },
   //根据用户id查询对应的设备数据
   getEqbyid(data) {
-    return sendGetRequest("/sel/eqbyid/"+data,'');
+    return sendGetRequest("/sel/eqbyid/" + data, '');
   },
 
   //测试施肥机读取设备状态信息  //读取数据 根据文档编号读取 所有数据展示都出自这个接口
-  postReg(data){
+  postReg(data) {
     return sendPostRequest("/readFs/reg", data);
   },
   //测试施肥机读取设备状态信息  //读取数据 根据文档编号读取 所有数据展示都出自这个接口
-  postState(data){
+  postState(data) {
     return sendPostRequest("/readFs/state", data);
   },
   //测试施肥机写入数据信息 //修改数据 根据文档编号修改 所有数据修改都出自这个接口
-   postWriteFs(data){
+  postWriteFs(data) {
     return sendPostRequest("/writeFs", data);
   },
-  getByid(data){
-    return sendGetRequest("/readFs/byid",data);
+  getByid(data) {
+    return sendGetRequest("/readFs/byid", data);
   },
   //获取实时数据
-  postRtdata(data){
-    return sendPostRequest("/getFs/rtdata?equipmentId="+data, '');
+  postRtdata(data) {
+    return sendPostRequest("/getFs/rtdata?equipmentId=" + data, '');
   },
   //获取实时数据
-   postFsdata(data){
-    return sendPostRequest("/chart/fsdata?equipmentId="+data, '');
+  postFsdata(data) {
+    return sendPostRequest("/chart/fsdata?equipmentId=" + data, '');
   },
   //获取监控地址
-  getGethls(data){
-    return sendGetRequest("/camera/gethls",data);
+  getGethls(data) {
+    return sendGetRequest("/camera/gethls", data);
   },
   //根据ID查询用户信息
-  getUser(data){
-    return sendGetRequest('/api/sel/user',data)
+  getUser(data) {
+    return sendGetRequest('/api/sel/user', data)
   },
 
 
   //控制器接口
   //控制器实时数据
-  getControlRtdata(data){
-    return sendPostRequest("/getcontrol/rtdata?equipmentId="+data, '');
+  getControlRtdata(data) {
+    return sendPostRequest("/getcontrol/rtdata?equipmentId=" + data, '');
   },
   //控制器实时数据折线图
-  getControlFsdata(data){
-    return sendPostRequest("/getcontrol/fsdata?equipmentId="+data, '');
+  getControlFsdata(data) {
+    return sendPostRequest("/getcontrol/fsdata?equipmentId=" + data, '');
   },
   //控制器数据上传数据获取
-  getControldataUpload(data){
-    return sendGetRequest('/readControl/dataUpload',data)
+  getControldataUpload(data) {
+    return sendGetRequest('/readControl/dataUpload', data)
   },
   //控制器写入数据
-  postControlWrite(data){
+  postControlWrite(data) {
     return sendPostRequest("/writeJinHuaControl/write", data);
   },
   //控制器传感器通道
-  getReadControlSensorChannel(data){
-    return sendGetRequest('/readControl/sensorChannel',data)
+  getReadControlSensorChannel(data) {
+    return sendGetRequest('/readControl/sensorChannel', data)
   },
   //控制器 顶模和风机
-  getReadControlliShuiControl(data){
-    return sendGetRequest('/readControl/liShuiControl',data)
+  getReadControlliShuiControl(data) {
+    return sendGetRequest('/readControl/liShuiControl', data)
   },
   //控制器 传感器输入合成
-  getReadControlSensorInputSynthesis(data){
-    return sendGetRequest('/readControl/sensorInputSynthesis',data)
+  getReadControlSensorInputSynthesis(data) {
+    return sendGetRequest('/readControl/sensorInputSynthesis', data)
   },
   //控制器 主页查看控制器气象站实时数据
-    getControlRtDatastation(data){
-      return sendGetRequest('/getcontrol/rtDatastation',data)
+  getControlRtDatastation(data) {
+    return sendGetRequest('/getcontrol/rtDatastation', data)
   },
+  //控制器 设备运行状态
+  getControlGetState(data) {
+    return sendGetRequest('/readControl/getState', data)
+  },
+
+
+
+  // 根据用户id查询对应的设备大数据信息
+  Bigdata_getAllControl(userid, data) {
+    return sendGetRequest(`/Bigdata/getAllControl?userid=${userid}`, data);
+  },
+
+  // 获取设备当天的温度
+  Bigdata_getTemperature(deviceid, data) {
+    return sendGetRequest(`/Bigdata/getTemperature?deviceid=${deviceid}`, data);
+  },
+
+  // 获取设备一周的温度
+  Bigdata_getWeekTemperature(deviceid, data) {
+    return sendGetRequest(`/Bigdata/getWeekTemperature?deviceid=${deviceid}`, data);
+  },
+
+  // 主页查看控制器实时数据
+  getcontrol_rtdata(equipmentId, data) {
+    return sendPostRequest(`/getcontrol/rtdata?equipmentId=${equipmentId}`, data);
+  },
+
+  // 获取摄像头得地址 Copy
+  camera_gethls(cameraid, channelid, data) {
+    return sendGetRequest(`/camera/gethls?cameraid=${cameraid}&channelid=${channelid}`, data);
+  },
+
+  // 根据用户id查询对应的设备数据 Copy
+  sel_eqbyid(userId, data) {
+    return sendGetRequest(`/sel/eqbyid/${userId}`, data);
+  },
+
+  // 控制器状态值获取 Copy
+  readControl_getState(deviceId, data) {
+    return sendGetRequest(`/readControl/getState?deviceId=${deviceId}`, data);
+  }
 };

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,26 @@
   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%;
+  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-page {
+  height: auto;
 }
 
 .realTime .page-content .control-view {
@@ -1635,6 +1659,163 @@
   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-true {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-fan {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-fan > div {
+  min-width: unset;
+  flex-shrink: 0;
+  font-size: 14px;
+  height: 30px;
+  margin: 10px 8px 0 !important;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-fan > div > img {
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-sel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 50px;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-sel > div {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #FFFFFF;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-sel > div > img {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-charts {
+  width: 100%;
+  height: 153px;
+  position: relative;
+  background: url(../img/status-true-charts.png) no-repeat;
+  background-size: 227px 114px;
+  background-position: center 20px;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-charts > img {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 6px;
+  width: 28px;
+  height: 27px;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-charts > div {
+  width: 100%;
+  height: 100%;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-text {
+  width: 227px;
+  height: 35px;
+  padding: 0 16px;
+  background: url(../img/status-true-text.png) no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-text .status-true-text-left {
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #8BEAFF;
+}
+
+.realTime .page-content .status-view .status-view-content .status-true .status-true-text .status-true-text-right {
+  font-size: 14px;
+  font-family: Arial;
+  font-weight: 400;
+  color: #FFFFFF;
+}
+
+.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 +2213,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;
@@ -1124,7 +1139,8 @@
                         cursor: pointer;
                         white-space: nowrap;
                         margin-right: 30px;
-                        padding:0 0 15px 0;
+                        padding: 0 0 15px 0;
+
                         >.no-sel {
                             margin-right: 10px;
                             width: 35px;
@@ -1161,26 +1177,30 @@
         }
     }
 
-    &.sensorSet-con{
-        .sensor-view{
+    &.sensorSet-con {
+        .sensor-view {
             height: calc(100% - 120px);
         }
-        .right-sel{
+
+        .right-sel {
             width: 100%;
             flex-wrap: wrap;
-            .sensor-type-div{
+
+            .sensor-type-div {
                 margin-bottom: 0;
                 background: unset;
                 border: none;
                 height: auto;
-                .sensor-sel{
-                    >div{
+
+                .sensor-sel {
+                    >div {
                         padding-left: 0;
                     }
                 }
             }
         }
     }
+
     .sensor-type {
         .sensor-title {
             font-size: 20px;
@@ -1188,8 +1208,9 @@
             font-weight: bold;
             color: #FFFFFF;
             padding: 20px 0;
-            .sensor-sel{
-                >div{
+
+            .sensor-sel {
+                >div {
                     padding-left: 0;
                 }
             }
@@ -1553,29 +1574,43 @@
     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%;
+        flex-shrink: 0;
         background: rgba(0, 92, 178, 0.15);
         border: 2px solid rgba(0, 186, 255, 0.20);
-        padding: 30px 30px 20px;
-        .control-view{
+        padding: 30px 20px 20px;
+        &.control-page{
+            height:auto;
+        }
+        .control-view {
             display: flex;
             align-items: center;
             position: absolute;
             right: 30px;
             top: 10px;
-            .title{
+
+            .title {
                 margin-right: 10px;
             }
-            .control-list{
+
+            .control-list {
                 display: flex;
                 align-items: center;
 
                 overflow: hidden;
                 max-width: 806px;
+
                 >div {
                     // width: 100%!important;
                     display: flex;
@@ -1588,11 +1623,13 @@
                         margin-right: 100px;
                     }
                 }
-                .list-view{
+
+                .list-view {
                     display: flex;
                     align-items: center;
                     margin-right: 10px;
-                    .icon{
+
+                    .icon {
                         width: 30px;
                         height: 30px;
                     }
@@ -1725,6 +1762,160 @@
                 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-true {
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-direction: column;
+                    .status-fan{
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        flex-wrap: wrap;
+                        >div{
+                            min-width: unset;
+                            flex-shrink: 0;
+                            font-size: 14px;
+                            height: 30px;
+                            margin: 10px 8px 0 !important;
+                            >img{
+                                width: 16px;
+                                height:16px;
+                                margin-right: 5px;
+                            }
+                        }
+                    }
+                    .status-true-sel {
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        width: 100%;
+                        padding: 0 50px;
+
+                        >div {
+                            display: flex;
+                            align-items: center;
+                            font-size: 14px;
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            color: #FFFFFF;
+                            >img {
+                         
+                                width: 20px;
+                                height: 20px;
+                                margin-right: 10px;
+                            }
+                        }
+                    }
+
+                    .status-true-charts {
+                        width: 100%;
+                        height: 153px;
+                        position: relative;
+                        background: url(../img/status-true-charts.png) no-repeat;
+                        background-size: 227px 114px;
+                        background-position: center 20px;
+
+                        >img {
+                            position: absolute;
+                            left: 50%;
+                            transform: translateX(-50%);
+                            bottom: 6px;
+                            width: 28px;
+                            height: 27px;
+                        }
+
+                        >div {
+                            width: 100%;
+                            height: 100%;
+                        }
+                    }
+
+                    .status-true-text {
+                        width: 227px;
+                        height: 35px;
+                        padding: 0 16px;
+                        background: url(../img/status-true-text.png) no-repeat;
+                        background-size: 100% 100%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+
+                        .status-true-text-left {
+                            font-size: 14px;
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            color: #8BEAFF;
+                        }
+
+                        .status-true-text-right {
+                            font-size: 14px;
+                            font-family: Arial;
+                            font-weight: 400;
+                            color: #FFFFFF;
+                        }
+                    }
+                }
+
+                .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;
+                    }
+                }
+            }
+        }
     }
 }
 
@@ -2063,10 +2254,10 @@
             border-bottom: 1px solid rgba(0, 180, 255, .75);
             padding-bottom: 17px;
 
-            .table-header{
+            .table-header {
                 font-size: 18px;
-font-family: Microsoft YaHei;
-font-weight: bold;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
             }
         }
 
@@ -2075,16 +2266,19 @@ 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{
+
+            >div {
                 display: inline-block;
                 width: auto;
             }
-            .table-header{
+
+            .table-header {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
-                >div{
-                    width:70px;
+
+                >div {
+                    width: 70px;
                     height: 100%;
                     display: flex;
                     align-items: center;
@@ -2092,14 +2286,16 @@ font-weight: bold;
                     flex-shrink: 0;
                 }
             }
-             .table-tr{
-                >div{
+
+            .table-tr {
+                >div {
 
                     display: flex;
                     align-items: center;
                     justify-content: space-between;
-                    >div{
-                        width:70px;
+
+                    >div {
+                        width: 70px;
                         height: 100%;
                         flex-shrink: 0;
                         display: flex;
@@ -2109,19 +2305,24 @@ font-weight: bold;
                 }
             }
         }
-        .table-tr{
+
+        .table-tr {
             width: 100%;
-            >div{
+
+            >div {
                 height: 60px;
                 text-align: center;
                 line-height: 60px;
             }
-            >div:nth-child(odd){
+
+            >div:nth-child(odd) {
                 background: rgba(0, 47, 94, .35);
             }
-            >div:nth-child(even){
-                background: rgba(0,180,255,0.2);
+
+            >div:nth-child(even) {
+                background: rgba(0, 180, 255, 0.2);
             }
+
             .no-sel {
                 width: 35px;
                 height: 35px;
@@ -2139,6 +2340,7 @@ font-weight: bold;
                 cursor: pointer;
             }
         }
+
         .table-header {
             width: 100%;
             height: 50px;
@@ -2146,9 +2348,31 @@ font-weight: bold;
             text-align: center;
             background: rgba(0, 180, 255, 0.2);
             font-size: 16px;
-font-family: Arial;
-font-weight: 400;
-color: #FFFFFF;
+            font-family: Arial;
+            font-weight: 400;
+            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/assets/js/charts.js

@@ -176,19 +176,19 @@ export function realTimeLine(id, data) {
         Xdata.push(el.time)
 
         el.value.forEach((el1, index1) => {
-            var containsIndex = dataList.findIndex(function(item) {
+            var containsIndex = dataList.findIndex(function (item) {
                 return item.name === el1.name;
             });
-            if(containsIndex==-1){
-                dataList.push({name:el1.name,value:[]})
-            }else{
+            if (containsIndex == -1) {
+                dataList.push({ name: el1.name, value: [] })
+            } else {
                 dataList[containsIndex].value.push(el1.value)
             }
         })
 
 
     })
-    dataList.forEach((el,index)=>{
+    dataList.forEach((el, index) => {
         list.push({
             name: el.name,
             data: el.value,
@@ -315,3 +315,116 @@ export function realTimeLine(id, data) {
         myChart.resize();
     });
 }
+export function statusCharts(id, data) {
+    console.log(id,11);
+    var chartDom = document.getElementById(id);
+    var myChart = echarts.init(chartDom);
+    var option;
+
+    const pointerData = data; // 仪表指针数据
+    option = {
+        series: [
+            {
+                type: "gauge",
+                radius:75,
+                z: 1,
+                center:['50%','87%'],
+                startAngle: 180,
+                endAngle: 0,
+                splitNumber: 50,
+                splitLine: {
+                    show: false,
+                    length: 15,
+                    distance: -10,
+                    lineStyle: {
+                        color: "#fff",
+                        width: 1,
+                    },
+                },
+                detail: {
+                    show: false,
+                    offsetCenter: ['50%', '50%'],
+                    fontSize: 22,
+                    formatter: (val) => [`{a|${val}}`, `{b|%}`].join(""),
+                    rich: {
+                        a: {
+                            fontSize: 20,
+                            color: "rgba(84, 108, 198, 0.65)",
+                        },
+                        b: {
+                            fontSize: 24,
+                            color: "rgba(84, 108, 198, 0.65)",
+                        },
+                    },
+                },
+                // 仪表盘的线，颜色值为一个数组
+                axisLine: {
+                    show: true,
+                    // 两端是否设置为圆角；在5.0之后的版本有效
+                    roundCap: false,
+                    lineStyle: {
+                        width: 15,
+                        shadowColor: "#0093ee", //默认透明
+                        shadowOffsetX: 0,
+                        shadowOffsetY: 0,
+                        shadowBlur: 20,
+                        opacity: 1,
+                        color: [
+                            [
+                                pointerData / 100,
+                                {
+                                    x: 0,
+                                    y: 0,
+                                    x1: 1,
+                                    y1: 0,
+                                    colorStops: [
+                                        {
+                                            offset: 0,
+                                            color: "rgba(110, 224, 255, 1)",
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: "rgba(0, 200, 255, 1)",
+                                        },
+                                    ],
+                                },
+                            ],
+                            [1, "rgba(0,0,0,0.15)"],
+                        ],
+                    },
+                },
+                // 仪表盘刻度标签
+                axisLabel: {
+                    show: true,
+                    color: "#fff",
+                    fontSize: 14,
+                    distance: -35,
+                    formatter: (val) => {
+                        const num = Math.floor(val);
+                        return num % 20 === 0 ? num : "";
+                    },
+                },
+                pointer:{
+                    width :5,
+                    itemStyle:{
+                        color:'rgba(10, 243, 167, 1)'
+                    }
+                },
+                // 刻度
+                axisTick: {
+                    show: false,
+                },
+                // 指针，此设置仅对5.0以上的版本生效
+              
+                data: [pointerData],
+            },
+           
+        ],
+    };
+
+
+    option && myChart.setOption(option);
+    window.addEventListener("resize", function () {
+        myChart.resize();
+    });
+}

src/assets/js/echarts.js

@@ -0,0 +1,318 @@
+import * as echarts from 'echarts';
+
+export function weather_echart(id, data) {
+  let chartDom = document.getElementById(id);
+  let myChart = echarts.init(chartDom);
+  let option = {
+    grid: {
+      top: "15%",
+      left: "0%",
+      right: "5%",
+      bottom: "6%",
+      containLabel: true
+    },
+    color: ["#00A8FF", "#00FFB4", "#FFD07F"],
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "rgba(1, 13, 19, 0.5)",
+      borderWidth: 1,
+      axisPointer: {
+        type: "shadow"
+      },
+      textStyle: {
+        color: "rgba(212, 232, 254, 1)"
+      },
+      extraCssText: "z-index:2"
+    },
+    legend: {
+      show: false,
+      right: 20,
+      top: 30,
+      icon: "rect",
+      itemWidth: 18,
+      itemHeight: 4,
+      itemGap: 30,
+      padding: [0, 20, 0, 0],
+      textStyle: {
+        color: "#FFFFFF",
+        fontFamily: "Alibaba PuHuiTi",
+        fontSize: ".14rem",
+        fontWeight: 400,
+      }
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data:data.data_category,
+      // data: [
+      //   "1月",
+      //   "2月",
+      //   "3月",
+      //   "4月",
+      //   "5月",
+      //   "6月",
+      //   "7月",
+      //   "8月",
+      //   "9月",
+      //   "10月",
+      //   "11月",
+      //   "12月"
+      // ],
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#52647C",
+          type: 'solid'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        // interval: 0,
+        textStyle: {
+          color: "#7C99AF",
+          fontSize: ".14rem",
+          fontFamily: 'ArialMT',
+          fontWeight: 400
+        }
+      }
+    },
+    yAxis: [{
+      type: "value",
+      name: '温度',
+      nameTextStyle: {
+        fontSize: 14,
+        fontFamily: 'MicrosoftYaHei',
+        fontWeight: 400,
+        color: '#7C99AF',
+        lineHeight: 6
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#52647C",
+          type: 'solid'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: "#7C99AF",
+        fontSize: ".14rem",
+        fontFamily: 'ArialMT',
+        fontWeight: 400
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#52647C',
+          type: 'dashed'
+        }
+      },
+      // data:data.data_value,
+    }],
+    series: [{
+      // name: data.datax[0],
+      type: "line",
+      smooth: 'true',
+      symbol: "circle", //标记的图形为实心圆
+      symbolSize: 0, //标记的大小
+      lineStyle: {
+        width: 2,
+        color: "#00D2FF" // 线条颜色
+      },
+      // data: [175, 160, 153, 121, 156, 175, 160, 153, 121, 156, 180, 220],
+      data: data.data_value,
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(
+          0,
+          0,
+          0,
+          1,
+          [{
+              offset: 0,
+              color: 'rgba(0, 168, 255, 0.6)'
+            },
+            {
+              offset: 0.3,
+              color: 'rgba(0, 168, 255, 0.6)'
+            },
+            {
+              offset: 1,
+              color: 'transparent'
+            }
+          ],
+          false
+        )
+      },
+      large:true,
+    }, ]
+  };
+
+  option && myChart.setOption(option);
+  window.addEventListener("resize", function () {
+    myChart.resize();
+  });
+}
+
+export function thisWeekTemperature_echart(id, data) {
+  let chartDom = document.getElementById(id);
+  let myChart = echarts.init(chartDom);
+  let option = {
+    title: {
+      show: false
+    },
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      right: '15%',
+      top: '5%',
+      icon: 'circle',
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 37,
+      textStyle: {
+        fontSize: ".12rem",
+        fontFamily: 'Microsoft YaHei',
+        fontWeight: 'normal',
+        color: '#82DAF7'
+      }
+    },
+    grid: {
+      top:'15%',
+      left:'3%',
+      right:'3%',
+      bottom:'10%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        interval: 0,
+        textStyle: {
+          fontSize: ".14rem",
+          fontFamily: 'MicrosoftYaHei',
+          fontWeight: 400,
+          color: '#82DAF7',
+          padding: [5, 0, 0, 0]
+        }
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#294462',
+          opacity: 0.3
+        }
+      },
+      // data: ['1月', '2月', '3月', '4月', '5月']
+      data:data.day
+    },
+    yAxis: {
+      type: 'value',
+      minInterval: 5,
+      name: '',
+      nameTextStyle: {
+        fontSize: 18,
+        fontFamily: 'CenturyGothic',
+        color: '#ffffff',
+        padding: [0, 0, 0, 30]
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#06304C'
+        }
+      },
+      axisLabel: {
+        textStyle: {
+          fontSize: ".14rem",
+          fontFamily: 'MicrosoftYaHei',
+          fontWeight: 'normal',
+          color: '#82DAF7',
+          padding: [0, 5, 0, 0]
+        }
+      }
+    },
+    dataZoom: [{
+      // x轴没有具体的数值
+      type: 'inside', // 图形内部的滚动条
+      xAxisIndex: [0], // 明确指定滚动的轴
+      minValueSpan: 1, // x轴最小的index
+      maxValueSpan: 3, // x轴最大的index
+      zoomOnMouseWheel: false // 关闭鼠标滚轮缩放
+    }],
+    series: [
+      {
+        name: '最高温度',
+        type: 'bar',
+        barWidth: "8px",
+        barGap: '80%',
+        itemStyle: {
+          borderWidth: 1,
+          borderRadius: [20, 20, 0, 0],
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(255,189,73,1)' // 0% 处的颜色
+            }, {
+              offset: 1,
+              color: 'rgba(255,189,73,0.3)' // 100% 处的颜色
+            }]
+          }
+        },
+        // data: [90, 66, 174, 100, 430]
+        data:data.maxTemperature
+      },
+      {
+        name: '最低温度',
+        type: 'bar',
+        barWidth: "8px",
+        barGap: '80%',
+        itemStyle: {
+          borderWidth: 1,
+          borderRadius: [20, 20, 0, 0],
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(0,174,255,1)' // 0% 处的颜色
+            }, {
+              offset: 1,
+              color: 'rgba(0,174,255,0.2)' // 100% 处的颜色
+            }]
+          }
+        },
+        // data: [87, 60, 124, 20, 432]
+        data:data.minTemperature
+      }, 
+     
+
+    ]
+  };
+  option && myChart.setOption(option);
+  window.addEventListener("resize", function () {
+    myChart.resize();
+  });
+}

src/main.js

@@ -7,6 +7,8 @@ Vue.config.productionTip = false
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 
+import "@/rem/rem.js"
+
 import axios from "axios";
 Vue.prototype.$axios = axios;
 import api from "./api/index.js"; 

src/rem/rem.js

@@ -0,0 +1,20 @@
+// rem等比适配配置文件
+// 基准大小
+const baseSize = 100;
+// 设置 rem 函数
+function setRem() {
+  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
+  const scale = window.innerWidth / 1920;
+
+ 
+  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
+  document.documentElement.style.fontSize = baseSize * scale + "px";
+}
+// 初始化
+setRem();
+// 改变窗口大小时重新设置 rem
+window.onresize = function () {
+  setRem();
+};
+
+

src/router/index.js

@@ -23,7 +23,16 @@ const routes = [
       component: () => import('../views/page/status.vue')
     },]
   },
-
+  {
+    path: '/largeScreen',
+    name: 'largeScreen',
+    component: () => import('../views/page/largeScreen.vue')
+  },
+  {
+    path: '/largeScreen1',
+    name: 'largeScreen1',
+    component: () => import('../views/page/largeScreen1.vue')
+  },
   {
     path: '/index',
     name: 'index',
@@ -97,6 +106,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/index.vue

@@ -72,7 +72,7 @@ export default {
                 { name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
                 //systemManage systemManage
                 { name: '管理', router: '', routerList: [''], img: require('../assets/image/header-img6.png') },
-                { name: '大数据', router: '', routerList: [''], img: require('../assets/image/header-img8.png') }
+                { name: '大数据', router: 'largeScreen', routerList: ['largeScreen'], img: require('../assets/image/header-img8.png') }
             ],
                 
             activeNames: [3],

src/views/page/largeScreen1.vue

@@ -0,0 +1,780 @@
+<template>
+  <div class="about">
+    <div class="kuang">
+
+      <div class="title">
+        温室智慧云数据统计
+      </div>
+
+      <div class="yuan" @click="toBack">
+        <img src="../../assets/img/small.png" alt="">
+      </div>
+
+      <div class="calendar">
+        <img src="../../assets/img/calendar.png" alt="">
+        <span>2023.10.30</span>
+        <span class="line"></span>
+        <span>星期一</span>
+        <span class="line"></span>
+        <span>14:17</span>
+      </div>
+
+      <div class="content">
+        <div class="map">
+          <div class="map1">
+            <div class="drag_box" ref="drag_box">
+              <img class="drag_img" src="../../assets/img/map.png" alt="">
+              <div class="pole_item pole_item1" @click="handlerPop">
+                <div class="p_title">
+                  <img src="../../assets/img/wenshi.png" alt="">
+                  <span>2#温室</span>
+                </div>
+                <img class="pole1" src="../../assets/img/pole1.png" alt="">
+              </div>
+              <div class="pole_item pole_item2" @click="handlerPop">
+                <div class="p_title">
+                  <img src="../../assets/img/wenshi.png" alt="">
+                  <span>1#温室</span>
+                </div>
+                <img class="pole1" src="../../assets/img/pole1.png" alt="">
+              </div>
+              <div class="pole_item pole_item3" @click="handlerPop">
+                <div class="p_title">
+                  <img src="../../assets/img/wenshi1.png" alt="">
+                  <span>3#温室</span>
+                </div>
+                <img class="pole1" src="../../assets/img/pole.png" alt="">
+              </div>
+              <div class="pole_item pole_item4" @click="handlerPop">
+                <div class="p_title">
+                  <img src="../../assets/img/wenshi.png" alt="">
+                  <span>控制中心</span>
+                </div>
+                <img class="pole1" src="../../assets/img/pole1.png" alt="">
+              </div>
+              <div class="pole_item pole_item5" @click="handlerPop">
+                <div class="p_title">
+                  <img src="../../assets/img/wenshi.png" alt="">
+                  <span>4#温室</span>
+                </div>
+                <img class="pole1" src="../../assets/img/pole1.png" alt="">
+              </div>
+              <div class="pole_item pole_item6" @click="handlerPop">
+                <div class="p_title">
+                  <img src="../../assets/img/wenshi.png" alt="">
+                  <span>5#温室</span>
+                </div>
+                <img class="pole1" src="../../assets/img/pole1.png" alt="">
+              </div>
+              <div class="pole_item pole_item7" @click="handlerPop">
+                <div class="p_title">
+                  <img src="../../assets/img/wenshi.png" alt="">
+                  <span>6#温室</span>
+                </div>
+                <img class="pole1" src="../../assets/img/pole1.png" alt="">
+              </div>
+
+              <!-- 弹框 -->
+              <template v-for="(item, index) in popContentList">
+                <!-- <div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index"
+                  v-if="popContentCurrent == index ? true : false"> -->
+                <div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index"
+                  v-if="popContentCurrent == index ? true : false">
+                  <div class="p_video">
+                    <img src="../../assets/img/c_top.png" alt="">
+                  </div>
+                  <div class="text">温室{{ item.greenhouseName }}#</div>
+                  <div class="line"></div>
+                  <div class="detail">
+                    <div class="d_item">
+                      <img src="../../assets/img/detail_img.png" alt="">
+                      <span>面积：{{ item.greenhouseArea }}㎡</span>
+                    </div>
+                    <div class="d_item">
+                      <img src="../../assets/img/detail_img.png" alt="">
+                      <span>品种：{{ item.greenhouseVariety }}</span>
+                    </div>
+                    <div class="d_item">
+                      <img src="../../assets/img/detail_img.png" alt="">
+                      <span>数量：{{ item.greenhouseNums }}株</span>
+                    </div>
+                  </div>
+                  <div class="grow">
+                    <img src="../../assets/img/grow_img.png" alt="">
+                    <span>生长阶段：</span>
+                    <span>{{ item.growthStageName }}</span>
+                  </div>
+                  <div class="line" style="margin-top: 0.2rem;"></div>
+                  <div class="icon_item scroll">
+                    <div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
+                      <!-- <img :src="item.formula" alt=""> -->
+                      <img :src="require('../../assets/image/real-time-'+item1.formula+'.png')" alt="">
+                      <div>
+                        <span>{{ item1.environmentDataId }}</span>
+                        <span>{{ item1.environmentData }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+
+        </div>
+      </div>
+      <!-- <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+        <div class="pop_content">
+          <div class="p_video">
+            <img src="../assets/img/c_top.png" alt="">
+          </div>
+          <div class="text">某某项目温室一号</div>
+          <div class="line"></div>
+          <div class="detail">
+            <div class="d_item">
+              <img src="../assets/img/detail_img.png" alt="">
+              <span>面积：6652㎡</span>
+            </div>
+            <div class="d_item">
+              <img src="../assets/img/detail_img.png" alt="">
+              <span>品种：番茄</span>
+            </div>
+            <div class="d_item">
+              <img src="../assets/img/detail_img.png" alt="">
+              <span>数量：80000株</span>
+            </div>
+          </div>
+          <div class="grow">
+            <img src="../assets/img/grow_img.png" alt="">
+            <span>生长阶段：</span>
+            <span>幼苗期</span>
+          </div>
+          <div class="line" style="margin-top: 0.2rem;"></div>
+          <div class="icon_item">
+            <div class="icon_item_child" v-for="(item, index) in list" :key="index">
+              <img :src="item.img" alt="">
+              <div>
+                <span>{{ item.name }}</span>
+                <span>{{ item.data }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-dialog> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name:'largeScreen1',
+  data() {
+    return {
+      dialogVisible: false,
+      timer: '',
+      timer1: '',
+      timer2: '',
+      list: [
+        { img: require('../../assets/img/icon_1.png'), name: '空气温度', data: '29.6℃' },
+        { img: require('../../assets/img/icon_2.png'), name: '空气湿度', data: '18.5%' },
+        { img: require('../../assets/img/icon_3.png'), name: '光亮度', data: '38.8klux' },
+        { img: require('../../assets/img/icon_4.png'), name: '二氧化碳', data: '600PPM' },
+        { img: require('../../assets/img/icon_5.png'), name: '土壤温度', data: '29.0℃' },
+        { img: require('../../assets/img/icon_6.png'), name: '土壤湿度', data: '18.5%' },
+      ],
+      top_: 2,
+      left_: 2,
+
+      popContentList: [],
+      popContentCurrent: 5
+    }
+  },
+  mounted() {
+    this.drag_boxHandler()
+
+    // this.timer1 = setTimeout(() => {
+    //   this.$router.push({ path: '/largeScreen' })
+    // }, 20000);
+
+
+
+    // this.timer = setInterval(() => {
+    //   this.dialogVisible = !this.dialogVisible
+    // }, 3000);
+
+    this.login()
+
+    this.timer2 = setInterval(() => {
+      this.popContentCurrent++
+      if (this.popContentCurrent > 5) {
+        this.popContentCurrent = 0
+      }
+    }, 3000)
+  },
+  destroyed() {
+    this.timer = null;
+    this.timer1 = null;
+    this.timer2 = null
+  },
+  methods: {
+    // 根据用户id查询对应的设备大数据信息
+    dataInit(userid) {
+      this.api.Bigdata_getAllControl(userid).then(res => {
+        // console.log('根据用户id查询对应的设备大数据信息', res);
+        this.popContentList = res.data.data
+        this.popContentList = this.popContentList.map((item) => {
+          return {
+            ...item,
+            childList: []
+          }
+        })
+        this.popContentList.forEach(el => {
+
+          // 获取控制器实时数据
+          this.api.getcontrol_rtdata(el.deviceId).then(res1 => {
+            // console.log('获取控制器实时数据', res1);
+            if(res1.data.code == 200){
+              el.childList = res1.data.data
+            }
+          })
+        })
+        // console.log(this.popContentList,'12121212');
+      })
+    },
+
+    
+    
+
+    getTopOrLeft(name) {
+      if (name == '二号') {
+        // this.top_ = 1;
+        // this.left_ = 6.2
+        return 'top:1rem;left:6.2rem'
+      } else if (name == '一号') {
+        // this.top_ = 3.5;
+        // this.left_ = 3.8
+        return 'top:3.5rem;left:3.8rem'
+      } else if (name == '3号') {
+        // this.top_ = 2;
+        // this.left_ = 9
+        return 'top:2rem;left:9rem'
+      } else if (name == '4号') {
+        // this.top_ = 2;
+        // this.left_ = 9.3
+        return 'top:2rem;left:9.3rem'
+      } else if (name == '5') {
+        // this.top_ = 3.5;
+        // this.left_ = 6.5
+        return 'top:3.5rem;left:6.5rem'
+      } else if (name == '6') {
+        // this.top_ = 0.8;
+        // this.left_ = 7.2
+        return 'top:0.8rem;left:7.2rem'
+      }
+    },
+
+    // 获取本地的userid和token
+    login() {
+      // var data = {
+      //   "username": "lsjskymdp",
+      //   "password": "lihemix888"
+      // }
+      // this.api.login(data).then(res => {
+      //   // console.log('信息', res);
+
+      //   if (res.status == 200) {
+      //     localStorage.setItem('token', res.data.data.token)
+      //     localStorage.setItem('userid', res.data.data.userid)
+      //     // console.log(localStorage.getItem('token'),localStorage.getItem('userid'));
+      //     this.dataInit(res.data.data.userid)
+      //   }
+
+      // })
+      let userInfo = JSON.parse(localStorage.getItem('userInfo'));
+      this.dataInit(userInfo.userid)
+    },
+
+    handleClose(done) {
+      done();
+    },
+
+    handlerPop() {
+      this.dialogVisible = true
+    },
+
+    toBack() {
+      this.$router.push({ path: '/largeScreen' })
+
+    },
+
+    drag_boxHandler() {
+      let demo = this.$refs.drag_box
+      demo = document.querySelector('.drag_box') //待拖拽元素
+      let canMove = false //拖拽状态
+      let x = 0,
+        y = 0 //鼠标位置
+      //监听按下鼠标事件
+      demo.onmousedown = function (e) {
+        x = e.pageX - demo.offsetLeft
+        y = e.pageY - demo.offsetTop
+        canMove = true //激活拖拽状态
+      }
+      //监听右击鼠标事件
+      demo.oncontextmenu = function (e) {
+        e.preventDefault() //阻止默认行为
+      }
+      //监听鼠标抬起事件
+      window.onmouseup = function () {
+        canMove = false //关闭拖拽状态
+      }
+
+      window.onblur = function () { //窗口失去焦点事件
+        canMove = false //关闭拖拽状态
+      }
+
+      //监听鼠标移动事件
+      window.onmousemove = function (e) {
+        e.preventDefault(); //阻止默认行为(字不能拖走)
+        if (canMove) { //对范围判断
+          let left = e.pageX - x
+          let top = e.pageY - y
+
+          //if (left > 0) left = 0 //当距离左边小于0时 让它为0
+          //if (top > 0) top = 0 //当距离上边小于0时 让它为0
+          // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
+          // let maxLeft = window.innerWidth - demo.offsetWidth
+          // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
+          // let maxTop = window.innerHeight - demo.offsetHeight
+
+          // if (left > maxLeft) left = maxLeft
+          // if (top > maxTop) top = maxTop
+
+
+          demo.style.left = left + 'px'
+          demo.style.top = top + 'px'
+
+        }
+      }
+      let scale = 1
+      demo.onwheel = function (e) {
+
+        if (e.wheelDelta > 0) {
+          scale += 0.05
+          if (scale > 4) {
+            scale = 4
+          }
+          demo.style.transform = `scale(${scale})`
+          // console.log(scale);
+        } else {
+          scale -= 0.05
+          if (scale < 1) {
+            scale = 1
+          }
+          demo.style.transform = `scale(${scale})`
+          // console.log(scale);
+        }
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.about {
+  width: 100%;
+  height: 100%;
+  background: url('../../assets/img/bg.png') center no-repeat;
+  background-size: 100% 100%;
+  box-sizing: border-box;
+  padding-bottom: 0.1rem;
+
+  .kuang {
+    width: 100%;
+    height: 100%;
+    background: url('../../assets/img/kuang.png') center no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+
+    .title {
+      width: 100%;
+      height: auto;
+      box-sizing: border-box;
+      padding-top: 0.06rem;
+      font-size: .54rem;
+      font-family: YouSheBiaoTiHei;
+      font-weight: 400;
+      color: #EFF8FC;
+      line-height: .54rem;
+      opacity: 0.89;
+      text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);
+
+      background: linear-gradient(to bottom, #FFFFFF 45%, #E9F8FF 90%, #77BAFF 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-align: center;
+
+    }
+
+    .yuan {
+      width: .56rem;
+      height: .56rem;
+      background: url('../../assets/img/yuan_bg.png') center no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      top: .53rem;
+      left: .71rem;
+      z-index: 999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      >img {
+        width: .20rem;
+        height: .20rem;
+      }
+    }
+
+    .calendar {
+      width: 4rem;
+      height: .3rem;
+      position: absolute;
+      top: .63rem;
+      right: .66rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      >img {
+        width: .28rem;
+        height: .3rem;
+      }
+
+      >span:nth-child(2) {
+        font-size: .24rem;
+        font-family: PingFang-SC-Bold;
+        font-weight: bold;
+        color: #7ABAFF;
+      }
+
+      >span:nth-child(4) {
+        font-size: .2rem;
+        font-family: PingFang-SC-Bold;
+        font-weight: bold;
+        color: #7ABAFF;
+      }
+
+      >span:nth-child(6) {
+        font-size: .3rem;
+        font-family: PingFang-SC-Bold;
+        font-weight: bold;
+        color: #7ABAFF;
+      }
+
+      .line {
+        width: .02rem;
+        height: .30rem;
+        background: #FFFFFF;
+        opacity: 0.2;
+      }
+    }
+
+    .content {
+      width: 100%;
+      height: calc(100% - .6rem);
+
+      .map {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 99;
+        -webkit-mask-image: linear-gradient(90deg, transparent 0%, blue 7%, blue 87%, transparent 97%);
+
+        .map1 {
+          width: 100%;
+          height: 100%;
+          // background: url('../assets/img/map.png') center no-repeat;
+          // background-size: 100% 100%;
+          -webkit-mask-image: linear-gradient(transparent 4%, blue 15%, blue 86%, transparent 100%);
+          overflow: hidden;
+          position: absolute;
+
+          .drag_box {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            -webkit-mask-image: linear-gradient(90deg, transparent 4%, blue 18%, blue 88%, transparent 100%);
+
+            .drag_img {
+              width: 100%;
+              height: 100%;
+              -webkit-mask-image: linear-gradient(transparent 0%, blue 13%, blue 73%, transparent 97%);
+            }
+
+            .pole_item {
+              width: 1.45rem;
+              height: 1.8rem;
+
+
+              .p_title {
+                width: 1.45rem;
+                height: .44rem;
+                background: rgba(1, 12, 28, 0.7);
+                border-radius: 22px;
+                display: flex;
+                align-items: center;
+                box-sizing: border-box;
+                padding: 0 0 0 10px;
+                position: absolute;
+                top: 0;
+                left: 0;
+
+                >img {
+                  width: .32rem;
+                  height: .32rem;
+                  margin-right: 0.15rem;
+                }
+
+                >span {
+                  font-size: .18rem;
+                  font-family: MicrosoftYaHei;
+                  font-weight: 400;
+                  color: #FFFFFF;
+                  flex: 1;
+                }
+              }
+
+              .pole1 {
+                width: .77rem;
+                height: 1.8rem;
+                position: absolute;
+                top: 0;
+                left: 40%;
+              }
+            }
+
+            .pole_item1 {
+              position: absolute;
+              top: 13%;
+              left: 26%;
+            }
+
+            .pole_item2 {
+              position: absolute;
+              top: 41%;
+              left: 13%;
+            }
+
+            .pole_item3 {
+              position: absolute;
+              top: 22%;
+              left: 40%;
+            }
+
+            .pole_item4 {
+              position: absolute;
+              top: 43%;
+              left: 42%;
+            }
+
+            .pole_item5 {
+              position: absolute;
+              top: 29%;
+              left: 76%;
+            }
+
+            .pole_item6 {
+              position: absolute;
+              top: 61%;
+              left: 62%;
+            }
+
+            .pole_item7 {
+              position: absolute;
+              top: 1%;
+              left: 62%;
+            }
+
+
+            .pop_content {
+              width: 5.38rem;
+              height: 6.92rem;
+              background: url('../../assets/img/pop_bg.png') center no-repeat;
+              background-size: 100% 100%;
+              overflow: hidden;
+              position: absolute;
+              z-index: 999999;
+              // top: 2rem;
+              // left: 2rem;
+
+              .p_video {
+                width: 4.9rem;
+                height: 2.8rem;
+                margin: 0.2rem auto 0;
+
+                >img {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+
+              .text {
+                width: 100%;
+                height: 0.6rem;
+                font-size: .28rem;
+                font-family: AlimamaShuHeiTi-Bold;
+                font-weight: bold;
+                color: #F3FDFF;
+                line-height: 0.6rem;
+                box-sizing: border-box;
+                padding-left: 0.3rem;
+              }
+
+              .line {
+                width: 4.90rem;
+                height: .01rem;
+                background: #51D4FA;
+                opacity: 0.5;
+                margin: 0 auto;
+              }
+
+              .detail {
+                width: 100%;
+                height: 0.7rem;
+                display: flex;
+                align-items: center;
+                justify-content: space-evenly;
+
+                .d_item {
+                  height: .30rem;
+                  background: rgba(81, 212, 250, 0.15);
+                  border: .01rem solid rgba(106, 222, 255, 0.4);
+                  border-radius: .02rem;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  box-sizing: border-box;
+                  padding: 0 0.1rem 0 0.1rem;
+
+                  >img {
+                    width: 0.18rem;
+                    height: 0.18rem;
+                    margin-right: 0.05rem;
+                  }
+
+                  >span {
+                    font-size: .16rem;
+                    font-family: MicrosoftYaHei;
+                    font-weight: 400;
+                    color: #D9EFFD;
+                  }
+                }
+              }
+
+              .grow {
+                width: 4rem;
+                height: .4rem;
+                background: url('../../assets/img/grow_bg.png') center no-repeat;
+                background-size: 100% 100%;
+                margin: 0 auto;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                >img {
+                  width: .22rem;
+                  height: .18rem;
+                  margin-right: 0.1rem;
+                }
+
+                >span:nth-child(2) {
+                  font-size: .16rem;
+                  font-family: MicrosoftYaHei;
+                  font-weight: 400;
+                  color: #FFFFFF;
+                }
+
+                >span:nth-child(3) {
+                  font-size: .16rem;
+                  font-family: MicrosoftYaHei;
+                  font-weight: 400;
+                  color: #36FFD2;
+                }
+              }
+
+              .icon_item {
+                width: 100%;
+                height: calc(100% - 5rem);
+                box-sizing: border-box;
+                padding: 0.3rem 0.2rem;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                overflow: auto;
+
+                .icon_item_child {
+                  width: 33.33%;
+                  height: 50%;
+                  display: flex;
+                  margin-bottom: 0.1rem;
+
+                  >img {
+                    width: .6rem;
+                    height: .53rem;
+                    margin-right: 0.1rem;
+                  }
+
+                  >div {
+                    display: flex;
+                    flex-direction: column;
+
+                    >span:nth-child(1) {
+                      font-size: .14rem;
+                      font-family: MicrosoftYaHei;
+                      font-weight: bold;
+                      color: #86D9FF;
+                    }
+
+                    >span:nth-child(2) {
+                      font-size: .2rem;
+                      font-family: AlibabaPuHuiTiB;
+                      font-weight: bold;
+                      color: #FFFFFF;
+                      margin-top: 0.02rem;
+                    }
+                  }
+                }
+              }
+            }
+
+
+          }
+
+
+
+
+
+        }
+      }
+
+    }
+
+    // ::v-deep .el-dialog {
+    //   background: unset !important;
+
+    //   .el-icon-close:before {
+    //     contain: " ";
+    //     width: .44rem;
+    //     height: .44rem;
+    //     background: url('../assets/img/close.png') center no-repeat;
+    //     background-size: 100% 100%;
+    //     position: absolute;
+    //     top: 0.3rem;
+    //     left: -0.1rem;
+    //   }
+    // }
+
+
+  }
+}
+</style>

src/views/page/realTime.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="formula realTime">
-        <div class="page-content">
+        <div class="page-content new-data" :class="deviceName == 10 ? 'control-page' : ''">
 
             <div class="control-view" v-if="deviceName == 10">
                 <div class="title">气象站:</div>
@@ -62,12 +62,139 @@
                 <div class="right" id="realTime-line"></div>
             </div>
         </div>
+        <div class="page-content" v-if="deviceName == 10">
+            <div class="table-title">
+                <img src="../../assets/image/status.png" alt="" />
+                设备运行状态
+            </div>
+            <div class="flex-view border-none">
+                <div class="status-view">
+                    <div class="status-view-top">
+                        <div class="status-view-top-left">{{ fanStatus.name }}</div>
+                        <!-- <el-popover placement="top" width="140">
+                            <div class="set-status-blue">进入修改设定值</div>
+                            <el-popover placement="top" width="160">
+                                <p class="del-text"><i style="color:red" class="el-popconfirm__icon el-icon-info"></i>确认删除?
+                                </p>
+                                <div style="text-align: right; margin: 0">
+                                    <el-button class="el-button el-button--text el-button--mini color-blue">取消</el-button>
+                                    <el-button class="el-button el-button--text el-button--mini color-blue">确定</el-button>
+                                </div>
+                                <div class="set-status-red" slot="reference">删除</div>
+                            </el-popover>
+                            <el-popover placement="right" width="100">
+                                <input v-model="item.index" type="text" class="status-save">
+                                <el-button class="el-button el-button--text el-button--mini color-blue">保存</el-button>
+                                <div class="set-status-blue" slot="reference">排序</div>
+                            </el-popover>
+                            <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
+                        </el-popover> -->
+                        <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
+                    </div>
+                    <div class="status-view-content">
+                        <div v-if="fanStatus.open != 0" class="status-true">
+                            <div class="status-true-sel">
+                                <div class="sel">
+                                    <img v-if="fanStatus.open == 1" src="../../assets/img/status-true-sel.png" alt="">
+                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
+                                    自动控制
+                                </div>
+                                <div class="sel-phone">
+                                    <img v-if="fanStatus.open != 1" src="../../assets/img/status-true-sel.png" alt="">
+                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
+                                    手机控制
+                                </div>
+                            </div>
+                            <div class="status-fan">
+                                <div class="btn" :class="fanStatus.status[0] == 1 ? 'blue' : 'off'">
+                                    <img v-if="fanStatus.status[0] == 1" src="../../assets/img/fan-on.png" alt="">
+                                    <img v-else src="../../assets/img/fan-off.png" alt="">
+                                    1#风机
+                                </div>
+                                <div class="btn" :class="fanStatus.status[1] == 1 ? 'blue' : 'off'">
+                                    <img v-if="fanStatus.status[1] == 1" src="../../assets/img/fan-on.png" alt="">
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> 2#风机
+                                </div>
+                                <div class="btn" :class="fanStatus.status[2] == 1 ? 'blue' : 'off'">
+                                    <img v-if="fanStatus.status[2] == 1" src="../../assets/img/fan-on.png" alt="">
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> 3#风机
+                                </div>
+                                <div class="btn" :class="fanStatus.status[3] == 1 ? 'blue' : 'off'">
+                                    <img v-if="fanStatus.status[3] == 1" src="../../assets/img/fan-on.png" alt="">
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> 4#风机
+                                </div>
+                                <div class="btn" :class="fanStatus.status[4] == 1 ? 'blue' : 'off'">
+                                    <img v-if="fanStatus.status[4] == 1" src="../../assets/img/fan-on.png" alt="">
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> 5#风机
+                                </div>
+                            </div>
+                        </div>
+                        <div v-else class="status-noTrue">
+                            <img src="../../assets/img/status-no.png" alt="">
+                            <div>当前设备无效</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="status-view" v-for="item, index in statusList" :key="index">
+                    <div class="status-view-top">
+                        <div class="status-view-top-left">{{ item.name }}</div>
+                        <!-- <el-popover placement="top" width="140">
+                            <div class="set-status-blue">进入修改设定值</div>
+                            <el-popover placement="top" width="160">
+                                <p class="del-text"><i style="color:red" class="el-popconfirm__icon el-icon-info"></i>确认删除?
+                                </p>
+                                <div style="text-align: right; margin: 0">
+                                    <el-button class="el-button el-button--text el-button--mini color-blue">取消</el-button>
+                                    <el-button class="el-button el-button--text el-button--mini color-blue">确定</el-button>
+                                </div>
+                                <div class="set-status-red" slot="reference">删除</div>
+                            </el-popover>
+                            <el-popover placement="right" width="100">
+                                <input v-model="item.index" type="text" class="status-save">
+                                <el-button class="el-button el-button--text el-button--mini color-blue">保存</el-button>
+                                <div class="set-status-blue" slot="reference">排序</div>
+                            </el-popover>
+                            <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
+                        </el-popover> -->
+                        <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
+                    </div>
+                    <div class="status-view-content">
+                        <div v-if="item.open != 0" class="status-true">
+                            <div class="status-true-sel">
+                                <div class="sel">
+                                    <img v-if="item.open == 1" src="../../assets/img/status-true-sel.png" alt="">
+                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
+                                    自动控制
+                                </div>
+                                <div class="sel-phone">
+                                    <img v-if="item.open != 1" src="../../assets/img/status-true-sel.png" alt="">
+                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
+                                    手机控制
+                                </div>
+                            </div>
+                            <div class="status-true-charts">
+                                <img src="../../assets/img/status-true-charts-icon.png" alt="">
+                                <div :id="'statusCharts' + index"></div>
+                            </div>
+                            <div class="status-true-text">
+                                <div class="status-true-text-left">静止状态</div>
+                                <div class="status-true-text-right">{{ item.progress }}%</div>
+                            </div>
+                        </div>
+                        <div v-else class="status-noTrue">
+                            <img src="../../assets/img/status-no.png" alt="">
+                            <div>当前设备无效</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 <script>
 import EZUIKit from 'ezuikit-js';
 import { getnowtime } from '../../assets/js/nowTime'
-import { realTimeLine } from '@/assets/js/charts'
+import { realTimeLine, statusCharts } from '@/assets/js/charts'
 import videojs from 'video.js';
 import video_zhCN from 'video.js/dist/lang/zh-CN.json'
 import vueSeamless from 'vue-seamless-scroll'
@@ -78,7 +205,7 @@ export default {
         defaultOption() {
             return {
                 step: 0.3, // 数值越大速度滚动越快
-                limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
+                limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
                 hoverStop: true, // 是否开启鼠标悬停stop
                 direction: 2, // 0向下 1向上 2向左 3向右
                 openWatch: true, // 开启数据实时监控刷新dom
@@ -102,6 +229,11 @@ export default {
     },
     data() {
         return {
+            statusList: [],
+
+            fanStatus: {
+                name: '风机', open: 0, status: []
+            },
             time: null,//右上角时间
             list: [],
             inputData: [],
@@ -121,10 +253,10 @@ export default {
             this.deviceName = store.equipmentList[this.indexs - 1].deviceName
             setTimeout(() => {
 
-                if(this.player){
+                if (this.player) {
                     this.player.stop()
                     that.player.destroy()
-                    that.player=null
+                    that.player = null
                 }
                 that.dataInit();
 
@@ -155,19 +287,22 @@ export default {
             // this.player.dispose();
             this.player.stop()
             this.player.destroy()
-            this.player=null
+            this.player = null
         }
         that.timer && clearInterval(that.timer)
         this.$bus.$off('refreshTime')
     },
     methods: {
-        createVideoNew() {
+        padString(str, length) {
+            return str.padStart(length, '0');
+        },
+        createVideoNew(accessToken) {
             // divW和divH是获取了父级宽高 使播放容器能铺满div
             let divW = this.$refs.monitor.clientWidth
             let divH = this.$refs.monitor.clientHeight
             this.player = new EZUIKit.EZUIKitPlayer({
                 id: 'video-js', // 视频容器ID
-                accessToken: 'at.757ro68z1ur26g6f1ondfwl1cl1bivxy-4ckiflya3u-1192hd2-ucup11mjb',
+                accessToken: accessToken,
                 url: this.url,
                 // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
                 // 播放主题  simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
@@ -332,8 +467,8 @@ export default {
                 if (!this.player) {
                     this.api.getGethls(data2).then(res => {
                         if (res.data.code == 200) {
-                        this.url = res.data.msg
-                        this.createVideoNew()
+                            this.url = res.data.data.ezopen
+                            this.createVideoNew(res.data.data.accesstoken)
                         }
                     })
                 }
@@ -406,6 +541,39 @@ export default {
                     // console.log(this.controlList);
                 })
 
+                var TargetValue = {
+                    deviceId: store.equipmentList[this.indexs - 1].deviceId
+                }
+                this.api.getControlGetState(TargetValue).then(res => {
+                    if (res.data.code == 200) {
+                        console.log(res.data.data, 123123);
+                        this.fanStatus.open = res.data.data['1023']
+                        this.fanStatus.status = []
+                        var num = res.data.data['1024']
+                        var num1 = this.padString(num.toString(2), 5)
+                        var openListNew = []
+                        openListNew = num1.split("")
+                        this.fanStatus.status = openListNew.reverse()
+                        this.statusList = []
+                        for (var i = 0; i < 4; i++) {
+                            var statusData = { name: `顶卷膜${i + 1}`, open: res.data.data[(1025 + (i * 3))], progress: res.data.data[(1027 + (i * 3))], index: res.data.data[(1026 + (i * 3))] }
+                            this.statusList.push(statusData)
+                   
+
+                        }
+                        this.$forceUpdate();
+                      setTimeout(() => {
+                        this.statusList.forEach((el,index)=>{
+                            if(el.open!=0){
+                                statusCharts(`statusCharts${index}`,el.progress)
+                            }
+                        })
+                      }, 10);
+
+                    } else {
+                        // this.$message.error(res.data.msg);
+                    }
+                })
                 var data1 = store.equipmentList[this.indexs - 1].deviceId
 
                 this.api.getControlFsdata(data1).then(res => {
@@ -431,8 +599,8 @@ export default {
                     this.api.getGethls(data2).then(res => {
                         // console.log(res.data, 11);
                         if (res.data.code == 200) {
-                            this.url = res.data.msg
-                            this.createVideoNew()
+                            this.url = res.data.data.ezopen
+                            this.createVideoNew(res.data.data.accesstoken)
                         }
                     })
                 }
@@ -454,4 +622,40 @@ export default {
 .video-js-select-quality-item {
     color: rgba(0, 0, 0, 0.85) !important;
 }
+
+.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/page/systemSet.vue

@@ -42,8 +42,11 @@
                     <input @blur="blurChange('63', $event)" v-model="inputData['63']" @input="change16to10('63', $event)" type="text" placeholder="0">
                     <input @blur="blurChange('64', $event)" v-model="inputData['64']" @input="change16to10('64', $event)" type="text" placeholder="0">
                 </div>
-                <div class="system-tips">说明:4G: =0，无网络:=2.2G网络了=4.4G网络SII: -0.SII卡正常;-1，无SII卡:-2.SI[卡异常(网络注册失败)信号质堡: CSQ
-                    <11,信号很差: 11<CSQ<10,信号不稳定: CSQ>18,信号稳定，最大是31.</div>
+                <div class="system-tips">
+                    说明:4G:=0,无网络;=2,2G网络;=4,4G网络 <br>
+                    SIM:=0,SIM卡正常;=1,无SIM卡;=2,SIM卡异常(网络注册失败)<br>
+                    信号质量:CSQ<11 信很差;11<CSQ<18,信号不稳定;CSQ>18,信号稳定,最大是31.
+                </div>
             </div>
         </div>
     </div>

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>
+  
+