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

Reviewed-on: #142

src/api/index.js

@@ -28,6 +28,33 @@ function sendGetRequest(url, data) {
       })
   });
 }
+function sendUploadRequest(url, data) {
+  // 一个状态为resolve（包裹的是数据）
+  // 或者状态为reject （包裹的是错误信息）
+  // 的promise对象
+  return new Promise(function (resolve, reject) {
+    axios.post(url, data, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+        // 'Content-Type': 'application/json; charset=utf-8',
+        'token': (localStorage.getItem('token') ? localStorage.getItem('token') : '')
+      }
+    }).then(
+      (res) => {
+        if (res.data.code == 401) {
+          localStorage.removeItem('token')
+          router.push({
+            name: 'login'
+          })
+        }
+        resolve(res);
+      },
+      (err) => {
+        reject(err);
+      }
+    );
+  });
+}
 
 function sendPostRequest(url, data) {
   // 一个状态为resolve（包裹的是数据）
@@ -85,7 +112,32 @@ function sendDelRequest(url, data) {
     );
   });
 }
-
+function sendPutRequest(url, data) {
+  // 一个状态为resolve（包裹的是数据）
+  // 或者状态为reject （包裹的是错误信息）
+  // 的promise对象
+  return new Promise(function (resolve, reject) {
+    axios.put(url, data, {
+      headers: {
+        // 'Content-Type': 'application/json; charset=utf-8',
+        'token': (localStorage.getItem('token') ? localStorage.getItem('token') : '')
+      }
+    }).then(
+      (res) => {
+        if (res.data.code == 401) {
+          localStorage.removeItem('token')
+          router.push({
+            name: 'login'
+          })
+        }
+        resolve(res);
+      },
+      (err) => {
+        reject(err);
+      }
+    );
+  });
+}
 //总接口域名
 axios.defaults.baseURL = "/api";
 axios.defaults.timeout = 30000; // 设置全局默认请求超时时间为10秒
@@ -101,6 +153,14 @@ export default {
   post(data) {
     return sendPostRequest("", data);
   },
+  delete(data) {
+    return sendDelRequest("", data);
+  },
+
+  put(data) {
+    return sendPutRequest("", data);
+  },
+
 
   //接口开始()
   //登录
@@ -401,6 +461,116 @@ cameraStop(cameraSerialNumber,cameraChannelNumber,num) {
 },
 
 
+//管理模块
+//根据用户ID获取账户设备
+selUserbyid(data){
+  return sendGetRequest(`/sel/userbyid/`+data, '')
+},
+//根据设备ID获取设备状态值
+selControlPermissions(data){
+  return sendGetRequest(`/getcontrol/selControlPermissions`, data)
+},
+//根据设备ID修改设备状态值
+putpermission(data){
+  return sendPutRequest(`/getcontrol/putpermission`, data)
+},
+//根据设备ID获取设备控制值
+selpermission(data){
+  return sendGetRequest(`/getcontrol/selpermission`, data)
+},
+//根据设备ID修改设备控制值
+putControlpermission(data){
+  return sendPutRequest(`/getcontrol/putControlpermission`, data)
+},
+//根据ID修改施肥机数据
+updatedevice(data){
+  return sendPutRequest(`/device/updatedevice`, data)
+},
+
+//根据ID修改施肥机名字
+updateFsname(data){
+  return sendPutRequest(`/update/fsname`, data)
+},
+//根据用户ID添加小程序气象站
+addphoneeqData(data) {
+    return sendPostRequest(`/getcontrol/addphoneeqData`, data)
+  },
+//根据用户ID删除小程序气象站
+delphoneeqData(data) {
+  return sendDelRequest(`/getcontrol/delphoneeqData`, data)
+},
+
+//根据用户ID修改小程序气象站
+updatephoneeqData(data) {
+  return sendPutRequest(`/getcontrol/updatephoneeqData`, data)
+},
+//修改大数据信息
+updateDataDevice(data) {
+  return sendPutRequest(`/getcontrol/updateBigData`, data)
+},
+
+//小程序手机控制权限模块查询
+wxgetpermission(data) {
+  return sendGetRequest(`/getcontrol/wxgetpermission`, data)
+},
+//查询所有用户
+adminAll(data){
+  return sendGetRequest(`/admin/all`, data)
+},
+//更新用户信息
+updateUser(data){
+  return sendPutRequest(`/admin/add/userEquipment`, data)
+},
+//添加用户信息
+addUser(data){
+  return sendPostRequest(`/admin/user`, data)
+},
+
+//修改密码
+updatePwd(data){
+  return sendPutRequest(`/user/update/pwd`, data)
+},
+//设备查询
+seldevice(data){
+  return sendGetRequest(`/admin/seldevice`, data)
+},
+//删除设备信息
+deldevice(data){
+  return sendDelRequest(`/admin/deldevice`, data)
+},
+//修改手机控制名称
+updatewxgetpermission(data){
+  return sendPutRequest(`/getcontrol/updatewxgetpermission`, data)
+},
+//管理员/用户页面删除关联设备信息
+delUserByid(data){
+  return sendDelRequest(`/admin/delUserByid`, data)
+},
+//管理员/用户页面添加关联设备信息
+addUserByid(data){
+  return sendPostRequest(`/admin/addUserByid`, data)
+},
+//查询控制器权限
+selectallPermissions(data){
+  return sendGetRequest(`/getcontrol/selectallPermissions`, data)
+},
+//新增标准控制器权限
+addpermissionall(equipmentId, data) {
+    return sendPostRequest(`/getcontrol/addpermissionall?deviceId=${equipmentId}`, data)
+  },
+  //管理控制器权限删除
+  delpermission(id1, id2) {
+    return sendDelRequest(`/getcontrol/delpermission?deviceId=${id1}&permissionid=${id2}`, '')
+  },
+  //管理控制器权限添加
+  addpermission(id1, id2) {
+    return sendPostRequest(`/getcontrol/addpermission?deviceId=${id1}&permissionid=${id2}`, '')
+  },
+//管理 设备管理添加设备
+addDevice(data){
+  return sendPostRequest(`/admin/addDevice`, data)
+},
+
   //二维码溯源
   //查看农事作物信息
   getAgriculturalInformation(data) {
@@ -419,5 +589,9 @@ cameraStop(cameraSerialNumber,cameraChannelNumber,num) {
   uploadImage(data) {
     return sendPostRequest(`/code/uploadImage`, data)
   },
+  //管理页面上传图片
+  manageUploadImage(data) {
+    return sendUploadRequest(`/user/upload`, data)
+  },
  
 };

src/assets/css/main.css

@@ -1,20 +1,21 @@
 @charset "UTF-8";
-.scroll, .el-dropdown-menu, .index .index-content > .left, .index .index-content > .right.right-page .page-content, .formula .page-content, .realTime, .realTime .page-content .realTime-bottom.weather .left-view-new, .history .page-content .el-table--scrollable-x .el-table__body-wrapper, .vrcode-table .vrcode-table-view.table-view .el-table__body-wrapper, .vrcode-model .el-dialog {
+.scroll, .el-dropdown-menu, .index .index-content > .left, .index .index-content > .right.right-page .page-content, .formula .page-content, .realTime, .realTime .page-content .realTime-bottom.weather .left-view-new, .history .page-content .el-table--scrollable-x .el-table__body-wrapper, .vrcode-model .el-dialog, .el-table .el-table__body-wrapper {
   overflow-y: auto;
+  flex-wrap: nowrap !important;
 }
 
-.scroll::-webkit-scrollbar, .el-dropdown-menu::-webkit-scrollbar, .index .index-content > .left::-webkit-scrollbar, .index .index-content > .right.right-page .page-content::-webkit-scrollbar, .formula .page-content::-webkit-scrollbar, .realTime::-webkit-scrollbar, .realTime .page-content .realTime-bottom.weather .left-view-new::-webkit-scrollbar, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar, .vrcode-table .vrcode-table-view.table-view .el-table__body-wrapper::-webkit-scrollbar, .vrcode-model .el-dialog::-webkit-scrollbar {
+.scroll::-webkit-scrollbar, .el-dropdown-menu::-webkit-scrollbar, .index .index-content > .left::-webkit-scrollbar, .index .index-content > .right.right-page .page-content::-webkit-scrollbar, .formula .page-content::-webkit-scrollbar, .realTime::-webkit-scrollbar, .realTime .page-content .realTime-bottom.weather .left-view-new::-webkit-scrollbar, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar, .vrcode-model .el-dialog::-webkit-scrollbar, .el-table .el-table__body-wrapper::-webkit-scrollbar {
   /*滚动条整体*/
   width: 10px;
   cursor: pointer;
 }
 
-.scroll::-webkit-scrollbar-track, .el-dropdown-menu::-webkit-scrollbar-track, .index .index-content > .left::-webkit-scrollbar-track, .index .index-content > .right.right-page .page-content::-webkit-scrollbar-track, .formula .page-content::-webkit-scrollbar-track, .realTime::-webkit-scrollbar-track, .realTime .page-content .realTime-bottom.weather .left-view-new::-webkit-scrollbar-track, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track, .vrcode-table .vrcode-table-view.table-view .el-table__body-wrapper::-webkit-scrollbar-track, .vrcode-model .el-dialog::-webkit-scrollbar-track {
+.scroll::-webkit-scrollbar-track, .el-dropdown-menu::-webkit-scrollbar-track, .index .index-content > .left::-webkit-scrollbar-track, .index .index-content > .right.right-page .page-content::-webkit-scrollbar-track, .formula .page-content::-webkit-scrollbar-track, .realTime::-webkit-scrollbar-track, .realTime .page-content .realTime-bottom.weather .left-view-new::-webkit-scrollbar-track, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track, .vrcode-model .el-dialog::-webkit-scrollbar-track, .el-table .el-table__body-wrapper::-webkit-scrollbar-track {
   /*滚动条轨道*/
   background: #013769;
 }
 
-.scroll::-webkit-scrollbar-thumb, .el-dropdown-menu::-webkit-scrollbar-thumb, .index .index-content > .left::-webkit-scrollbar-thumb, .index .index-content > .right.right-page .page-content::-webkit-scrollbar-thumb, .formula .page-content::-webkit-scrollbar-thumb, .realTime::-webkit-scrollbar-thumb, .realTime .page-content .realTime-bottom.weather .left-view-new::-webkit-scrollbar-thumb, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb, .vrcode-table .vrcode-table-view.table-view .el-table__body-wrapper::-webkit-scrollbar-thumb, .vrcode-model .el-dialog::-webkit-scrollbar-thumb {
+.scroll::-webkit-scrollbar-thumb, .el-dropdown-menu::-webkit-scrollbar-thumb, .index .index-content > .left::-webkit-scrollbar-thumb, .index .index-content > .right.right-page .page-content::-webkit-scrollbar-thumb, .formula .page-content::-webkit-scrollbar-thumb, .realTime::-webkit-scrollbar-thumb, .realTime .page-content .realTime-bottom.weather .left-view-new::-webkit-scrollbar-thumb, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb, .vrcode-model .el-dialog::-webkit-scrollbar-thumb, .el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
   /*滚动条里面的滑块*/
   width: 4px;
   cursor: pointer;
@@ -22,11 +23,11 @@
   border: 3px solid #013769;
 }
 
-.scroll::-webkit-scrollbar-thumb:hover, .el-dropdown-menu::-webkit-scrollbar-thumb:hover, .index .index-content > .left::-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, .realTime .page-content .realTime-bottom.weather .left-view-new::-webkit-scrollbar-thumb:hover, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover, .vrcode-table .vrcode-table-view.table-view .el-table__body-wrapper::-webkit-scrollbar-thumb:hover, .vrcode-model .el-dialog::-webkit-scrollbar-thumb:hover {
+.scroll::-webkit-scrollbar-thumb:hover, .el-dropdown-menu::-webkit-scrollbar-thumb:hover, .index .index-content > .left::-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, .realTime .page-content .realTime-bottom.weather .left-view-new::-webkit-scrollbar-thumb:hover, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover, .vrcode-model .el-dialog::-webkit-scrollbar-thumb:hover, .el-table .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
   /*滚动条鼠标事件，鼠标放上去出现的事件*/
 }
 
-.scroll::-webkit-scrollbar-corner, .el-dropdown-menu::-webkit-scrollbar-corner, .index .index-content > .left::-webkit-scrollbar-corner, .index .index-content > .right.right-page .page-content::-webkit-scrollbar-corner, .formula .page-content::-webkit-scrollbar-corner, .realTime::-webkit-scrollbar-corner, .realTime .page-content .realTime-bottom.weather .left-view-new::-webkit-scrollbar-corner, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-corner, .vrcode-table .vrcode-table-view.table-view .el-table__body-wrapper::-webkit-scrollbar-corner, .vrcode-model .el-dialog::-webkit-scrollbar-corner {
+.scroll::-webkit-scrollbar-corner, .el-dropdown-menu::-webkit-scrollbar-corner, .index .index-content > .left::-webkit-scrollbar-corner, .index .index-content > .right.right-page .page-content::-webkit-scrollbar-corner, .formula .page-content::-webkit-scrollbar-corner, .realTime::-webkit-scrollbar-corner, .realTime .page-content .realTime-bottom.weather .left-view-new::-webkit-scrollbar-corner, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-corner, .vrcode-model .el-dialog::-webkit-scrollbar-corner, .el-table .el-table__body-wrapper::-webkit-scrollbar-corner {
   /*滚动条边角*/
 }
 
@@ -274,6 +275,7 @@
   font-family: Microsoft YaHei;
   font-weight: bold;
   color: #FFFFFF;
+  margin: 0 !important;
 }
 
 .table-title > img {
@@ -812,48 +814,107 @@
   padding: 20px 30px 0;
 }
 
-.formula .page-content .table-view {
+.table-view {
   background: transparent;
   margin-top: 30px;
 }
 
-.formula .page-content .table-view .cell {
+.table-view .cell {
   text-align: center;
 }
 
-.formula .page-content .table-view .el-table .warning-row {
+.table-view .el-table .warning-row {
   background: rgba(0, 180, 255, 0.2);
 }
 
-.formula .page-content .table-view .el-table .success-row {
+.table-view .el-table .success-row {
   background: rgba(0, 47, 94, 0.35);
 }
 
-.formula .page-content .table-view .el-table::before,
+.table-view .el-table::before,
-.formula .page-content .table-view .el-table--border::after {
+.table-view .el-table--border::after {
   height: 0;
 }
 
-.formula .page-content .table-view .el-table,
+.table-view .el-table,
-.formula .page-content .table-view .el-table tr,
+.table-view .el-table tr,
-.formula .page-content .table-view .el-table td.el-table__cell {
+.table-view .el-table td.el-table__cell {
   border: none;
   background: transparent;
 }
 
-.formula .page-content .table-view .el-table th.el-table__cell.is-leaf {
+.table-view .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+  border: none;
+  background-color: transparent;
+}
+
+.table-view .el-table th.el-table__cell.is-leaf {
   border: none;
   background: rgba(0, 180, 255, 0.2);
 }
 
-.formula .page-content .table-view .el-table th.el-table__cell.is-leaf .cell {
+.table-view .el-table th.el-table__cell.is-leaf .cell {
   font-size: 18px;
   font-family: Microsoft YaHei;
   font-weight: bold;
   color: #FFFFFF;
 }
 
-.formula .page-content .table-view .status {
+.table-view .table-flex {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.table-view .table-operate {
+  height: 30px;
+  white-space: nowrap;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  cursor: pointer;
+  min-width: 66px;
+  margin: 0 5px;
+  color: #FFFFFF;
+  padding: 0 7px;
+}
+
+.table-view .table-operate.blue {
+  background: #0294E2;
+}
+
+.table-view .table-operate.red {
+  background: #FF9191;
+}
+
+.table-view .table-operate > img {
+  width: 16px;
+  height: auto;
+  margin-right: 5px;
+}
+
+.table-view .table-type {
+  padding: 0 15px;
+  height: 30px;
+  background: rgba(0, 186, 255, 0.15);
+  border-radius: 3px;
+  border: 1px solid rgba(0, 186, 255, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #00FFB9;
+}
+
+.table-view .status {
   width: 100px;
   height: 34px;
   background: #0294E2;
@@ -869,22 +930,22 @@
   cursor: pointer;
 }
 
-.formula .page-content .table-view .status.status1 {
+.table-view .status.status1 {
   background: #00BB88;
 }
 
-.formula .page-content .table-view .status.noSel {
+.table-view .status.noSel {
   opacity: 0.5;
 }
 
-.formula .page-content .table-view .type0 {
+.table-view .type0 {
   font-size: 16px;
   font-family: Microsoft YaHei;
   font-weight: 400;
   color: #FF9191;
 }
 
-.formula .page-content .table-view .type1 {
+.table-view .type1 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -895,11 +956,11 @@
   white-space: nowrap;
 }
 
-.formula .page-content .table-view .type1 > div {
+.table-view .type1 > div {
   justify-content: center;
 }
 
-.formula .page-content .table-view .type2 {
+.table-view .type2 {
   width: 140px;
   height: 34px;
   background: #0294E2;
@@ -915,13 +976,13 @@
   justify-content: center;
 }
 
-.formula .page-content .table-view .type2 img {
+.table-view .type2 img {
   width: 14px;
   height: 14px;
   margin-right: 10px;
 }
 
-.formula .page-content .table-view .type2.noSel {
+.table-view .type2.noSel {
   opacity: 0.5;
 }
 
@@ -2889,10 +2950,6 @@
   justify-content: center;
 }
 
-.vrcode-table .vrcode-table-view.table-view .el-table__cell.gutter {
-  display: none;
-}
-
 .vrcode-table .vrcode-table-view.table-view .isOpen {
   width: 80px;
   height: 30px;
@@ -2936,6 +2993,10 @@
   margin-right: 5px;
 }
 
+.vrcode-btn.w-100 {
+  width: 100px;
+}
+
 .vrcode-btn.blue-btn {
   background: #00A6FF;
 }
@@ -2964,7 +3025,6 @@
 }
 
 .vrcode-btn.cancle-btn {
-  width: 100px;
   background: rgba(0, 186, 255, 0.15);
   border: 2px solid rgba(0, 186, 255, 0.4);
   font-size: 16px;
@@ -2977,6 +3037,134 @@
   border: 2px solid rgba(0, 186, 255, 0.6);
 }
 
+.manage-input {
+  margin-bottom: 15px;
+}
+
+.manage-input.w-400 input {
+  width: 400px;
+}
+
+.manage-input.w-350 input {
+  width: 350px;
+}
+
+.manage-input.w-160 input {
+  width: 160px;
+}
+
+.manage-input.w-180 input {
+  width: 180px;
+}
+
+.manage-input .search-input {
+  margin: 0 10px;
+  height: 40px;
+}
+
+.manage-input .input-title {
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #FFFFFF;
+  margin-bottom: 10px;
+}
+
+.manage-input input {
+  width: 240px;
+  height: 44px;
+  background: rgba(0, 186, 255, 0.15);
+  border: 2px solid rgba(0, 186, 255, 0.4);
+  padding-left: 15px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #FFFFFF;
+}
+
+.manage-input input::placeholder {
+  color: #92B1D0;
+}
+
+.vrcode-model.manage-model .el-dialog {
+  background: rgba(0, 59, 114, 0.8);
+  border: 2px solid rgba(0, 186, 255, 0.35);
+}
+
+.vrcode-model.manage-model .el-dialog__body .vrcode-content {
+  padding: 10px 22px 0 !important;
+  display: flex;
+  justify-content: space-between;
+}
+
+.vrcode-model.manage-model .el-dialog__footer {
+  padding: 15px 22px;
+  border-top: 1px solid rgba(0, 180, 255, 0.35);
+}
+
+.vrcode-model.manage-model .dialog-footer {
+  justify-content: flex-start;
+}
+
+.vrcode-model.manage-model .manage-right .manage-img {
+  width: 380px;
+  position: relative;
+  background: rgba(0, 132, 255, 0.15);
+  border: 2px solid rgba(0, 132, 255, 0.35);
+  padding: 10px;
+}
+
+.vrcode-model.manage-model .manage-right .manage-img img {
+  width: 360px;
+  height: auto;
+  min-height: 200px;
+}
+
+.vrcode-model.manage-model .manage-right .manage-img #sel-img {
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.vrcode-model.manage-model .manage-text {
+  width: 240px;
+  height: 160px;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  font-family: Microsoft YaHei;
+  line-height: 28px;
+  font-weight: 400;
+  font-size: 14px;
+  color: #00C0F7;
+}
+
+.vrcode-model.manage-model .manage-img-small {
+  width: 240px;
+  height: 160px;
+  background: rgba(0, 132, 255, 0.15);
+  border: 2px solid rgba(0, 132, 255, 0.35);
+  padding: 10px;
+  margin-top: 25px;
+  position: relative;
+}
+
+.vrcode-model.manage-model .manage-img-small #sel-img {
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.vrcode-model.manage-model .manage-img-small img {
+  width: 100%;
+  height: 100%;
+}
+
 .vrcode-model .model-return-btn {
   position: absolute;
   right: 30px;
@@ -3445,7 +3633,7 @@
 
 .model-sel {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: wrap !important;
   align-items: center;
   min-height: 200px;
   max-height: 700px;
@@ -3731,3 +3919,171 @@
   cursor: pointer;
   min-height: 200px;
 }
+
+.manage-btn {
+  min-width: 140px;
+  height: 40px;
+  border-radius: 3px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #FFFFFF;
+  background: rgba(0, 186, 255, 0.15);
+  border-radius: 3px;
+  border: 2px solid rgba(0, 186, 255, 0.4);
+  padding: 0 15px;
+  margin: 7.5px 20px 7.5px 0 !important;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+}
+
+.manage-btn.active {
+  background: #0294E2;
+  border: 2px solid transparent;
+}
+
+.manage-btn img {
+  margin-right: 5px;
+  width: 14px;
+  height: auto;
+}
+
+.manage-page {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 92, 178, 0.15);
+  padding: 20px 30px;
+  border: 2px solid rgba(0, 186, 255, 0.2);
+}
+
+.table-title-btn {
+  min-width: 100px;
+  height: 40px;
+  padding: 0 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 16px;
+  color: #FFFFFF;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.table-title-btn > img {
+  width: 14px;
+  height: auto;
+  margin-right: 9px;
+}
+
+.table-title-btn.blue {
+  background: #0294E2;
+}
+
+.table-title-btn.red {
+  background: #FF9191;
+}
+
+.videoManage .table-view {
+  margin-top: 0;
+}
+
+.videoManage .flex-title {
+  padding-top: 0;
+  justify-content: space-between;
+  border-bottom: 1px solid transparent;
+}
+
+.el-table .el-table__body-wrapper::-webkit-scrollbar {
+  /*滚动条整体*/
+  width: 17px;
+}
+
+.el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  /*滚动条里面的滑块*/
+  width: 4px;
+  cursor: pointer;
+  background: #0294E2;
+  border: 5px solid #013769;
+}
+
+.el-table .el-table__cell.gutter {
+  display: none;
+}
+
+.manage-dropdown {
+  width: 240px !important;
+}
+
+.manage-dropdown.w-400 {
+  width: 400px !important;
+}
+
+.manage-dropdown.w-350 {
+  width: 350px !important;
+}
+
+.manage-input-sel {
+  margin-right: 30px;
+  margin-bottom: 15px;
+}
+
+.manage-input-sel .input-title {
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #FFFFFF;
+  margin-bottom: 10px;
+}
+
+.manage-input-sel.w-400 .el-dropdown-link {
+  width: 400px;
+}
+
+.manage-input-sel.w-350 .el-dropdown-link {
+  width: 350px;
+}
+
+.manage-input-sel .el-dropdown-link {
+  width: 240px;
+  height: 44px;
+  cursor: pointer;
+  position: relative;
+}
+
+.manage-input-sel .el-dropdown-link input {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 186, 255, 0.15);
+  border: 2px solid rgba(0, 186, 255, 0.4);
+  font-size: 16px;
+  padding-left: 15px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #FFFFFF;
+}
+
+.manage-input-sel .el-dropdown-link input::placeholder {
+  color: #92B1D0;
+}
+
+.manage-input-sel .el-dropdown-link .arrow {
+  width: 33px;
+  height: 24px;
+  border-left: 1px solid #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.manage-input-sel .el-dropdown-link .arrow > img {
+  width: 6px;
+  height: 4px;
+}

src/assets/css/main.scss

@@ -1,6 +1,6 @@
 .scroll {
     overflow-y: auto;
-
+    flex-wrap: nowrap!important;
     &::-webkit-scrollbar {
         /*滚动条整体*/
         width: 10px;
@@ -302,7 +302,7 @@
     font-family: Microsoft YaHei;
     font-weight: bold;
     color: #FFFFFF;
-
+    margin: 0!important;
     >img {
         width: 60px;
         height: 60px;
@@ -501,6 +501,7 @@
                 background-size: 100% 100%;
                 cursor: pointer;
                 flex-shrink: 0;
+
                 &:hover {
                     background: url(../image/login-out-hover.png) no-repeat center;
                     background-size: 100% 100%;
@@ -583,11 +584,13 @@
             width: 180px;
         }
     }
+
     &.input-sel-w140 {
         .el-dropdown-link {
             width: 140px;
         }
     }
+
     .el-dropdown-link {
         width: 300px;
         height: 44px;
@@ -865,7 +868,11 @@
         padding: 20px 30px 0;
         @extend .scroll;
 
-        .table-view {
+
+    }
+}
+
+.table-view {
     background: transparent;
     margin-top: 30px;
 
@@ -894,6 +901,11 @@
         background: transparent;
     }
 
+    .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+        border: none;
+        background-color: transparent;
+    }
+
     .el-table th.el-table__cell.is-leaf {
         border: none;
         background: rgba(0, 180, 255, 0.2);
@@ -906,6 +918,60 @@
         }
     }
 
+    .table-flex {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .table-operate {
+        height: 30px;
+        white-space: nowrap;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        font-size: 14px;
+        cursor: pointer;
+        min-width: 66px;
+        margin: 0 5px;
+        color: #FFFFFF;
+        padding: 0 7px;
+
+        &.blue {
+            background: #0294E2;
+        }
+
+        &.red {
+            background: #FF9191;
+        }
+
+        >img {
+            width: 16px;
+            height: auto;
+            margin-right: 5px;
+        }
+    }
+
+    .table-type {
+        padding: 0 15px;
+        height: 30px;
+        background: rgba(0, 186, 255, 0.15);
+        border-radius: 3px;
+        border: 1px solid rgba(0, 186, 255, 0.4);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        font-size: 16px;
+        color: #00FFB9;
+    }
+
     .status {
         width: 100px;
         height: 34px;
@@ -978,8 +1044,6 @@
             opacity: 0.5;
         }
     }
-        }
-    }
 }
 
 .title-tips {
@@ -2213,15 +2277,18 @@
                                 align-items: center;
                                 justify-content: center;
                                 cursor: pointer;
-                                &:active{
+
+                                &:active {
                                     background: #22B2FF;
                                 }
+
                                 >img {
                                     margin-right: 12px;
                                     width: 22px;
                                     height: auto;
                                 }
-                                >div{
+
+                                >div {
                                     white-space: nowrap;
                                     width: 40px;
                                 }
@@ -3096,13 +3163,7 @@
                 justify-content: center;
             }
 
-            .el-table__body-wrapper {
-                @extend .scroll;
-            }
         
-            .el-table__cell.gutter {
-                display: none;
-            }
 
             .isOpen {
                 width: 80px;
@@ -3149,7 +3210,9 @@
     }
 
     border-radius: 3px;
-
+    &.w-100{
+        width: 100px;
+    }
     &.blue-btn {
         background: #00A6FF;
 
@@ -3179,7 +3242,7 @@
     }
 
     &.cancle-btn {
-        width: 100px;
+        // width: 100px;
         background: rgba(0, 186, 255, 0.15);
         border: 2px solid rgba(0, 186, 255, 0.4);
         font-size: 16px;
@@ -3192,8 +3255,133 @@
         }
     }
 }
+.manage-input{
+    margin-bottom: 15px;
+    &.w-400{
+        input{
+            width: 400px;
+        }
+    }  
+    &.w-350{
+        input{
+            width: 350px;
+        }
+    } 
+    &.w-160{
+        input{
+            width: 160px;
+        }
+    }  
+    &.w-180{
+        input{
+            width:180px;
+        }
+    }
+    .search-input{
+        margin: 0 10px;
+        height: 40px;
+    }
+    .input-title{
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        font-size: 16px;
+        color: #FFFFFF;
+        margin-bottom: 10px;
+    }
+    input{
+        width: 240px;
+height: 44px;
+background: rgba(0,186,255,0.15);
+border: 2px solid rgba(0,186,255,0.4);
+padding-left: 15px;
+font-family: Microsoft YaHei;
+font-weight: 400;
+color: #FFFFFF;
 
+&::placeholder {
+color: #92B1D0;
+}
+    }
+  }
 .vrcode-model {
+    &.manage-model{
+        .el-dialog{
+            background: rgba(0,59,114,0.8);
+            border: 2px solid rgba(0, 186, 255,0.35);
+        }
+        .el-dialog__body{
+            .vrcode-content{
+                padding:  10px 22px 0!important;
+                display: flex;
+                // align-items: center;
+                justify-content: space-between;
+            }
+        }
+        .el-dialog__footer{
+            padding: 15px 22px;
+            border-top: 1px solid rgba(0, 180, 255, 0.35);
+        }
+        .dialog-footer{
+            justify-content: flex-start;
+        }
+        .manage-right{
+            .manage-img{
+                width: 380px;
+                position: relative;
+// height: 290px;
+background: rgba(0,132,255,0.15);
+border: 2px solid rgba(0,132,255,0.35);
+img{
+width:360px;
+height:auto;
+min-height: 200px;
+}
+padding: 10px;
+#sel-img{
+width: 0;
+height: 0;
+position: absolute;
+left: 0;
+top: 0;
+}
+            }
+        }
+        .manage-text{
+            width: 240px;
+            height: 160px;
+            text-align: left;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            font-family: Microsoft YaHei;
+            line-height: 28px;
+font-weight: 400;
+font-size: 14px;
+color: #00C0F7;
+        }
+        .manage-img-small{
+            width: 240px;
+height: 160px;
+background: rgba(0,132,255,0.15);
+border: 2px solid rgba(0,132,255,0.35);
+padding: 10px;
+margin-top: 25px;
+position: relative;
+#sel-img{
+    width: 0;
+    height: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    }
+img{
+    width: 100%;
+    height: 100%;
+}
+        }
+    
+    }
     .model-return-btn {
         position: absolute;
         right: 30px;
@@ -3677,7 +3865,7 @@
 
 .model-sel {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: wrap!important;
     align-items: center;
     min-height: 200px;
     max-height: 700px;
@@ -3949,21 +4137,23 @@
         .el-table th.el-table__cell.is-leaf .cell {
             font-size: 14px !important;
         }
-        .table-title{
+
+        .table-title {
             width: 100%;
             display: flex;
             align-items: center;
             padding-bottom: 5px;
             justify-content: space-between;
-            border-bottom:2px solid rgba(0, 180, 255, 0.5);
+            border-bottom: 2px solid rgba(0, 180, 255, 0.5);
         }
-        .image-list{
+
+        .image-list {
             width: 100%;
             display: flex;
             flex-wrap: wrap;
             align-items: center;
 
-            >div{
+            >div {
                 width: 380px;
                 height: auto;
                 background: rgba(0, 132, 255, 0.15);
@@ -3971,7 +4161,8 @@
                 margin: 7.5px;
                 padding: 10px;
                 flex-shrink: 0;
-                .el-image{
+
+                .el-image {
                     cursor: pointer;
                     min-height: 200px;
                 }
@@ -3979,3 +4170,184 @@
         }
     }
 }
+
+.manage-btn {
+    min-width: 140px;
+    height: 40px;
+
+    border-radius: 3px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 16px;
+    color: #FFFFFF;
+    background: rgba(0, 186, 255, 0.15);
+    border-radius: 3px;
+    border: 2px solid rgba(0, 186, 255, 0.4);
+    padding: 0 15px;
+    margin:7.5px 20px 7.5px 0!important;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+
+    &.active {
+        background: #0294E2;
+        border: 2px solid transparent;
+    }
+
+    img {
+        margin-right: 5px;
+        width: 14px;
+        height: auto;
+    }
+}
+
+.manage-page {
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 92, 178, 0.15);
+    padding: 20px 30px;
+    border: 2px solid rgba(0, 186, 255, 0.2);
+}
+
+.table-title-btn {
+    min-width: 100px;
+    height: 40px;
+    padding: 0 15px;
+
+    >img {
+        width: 14px;
+        height: auto;
+        margin-right: 9px;
+    }
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    font-size: 16px;
+    color: #FFFFFF;
+    cursor: pointer;
+
+    &.blue {
+        background: #0294E2;
+    }
+
+    &.red {
+        background: #FF9191;
+    }
+
+    border-radius: 3px;
+}
+
+.videoManage {
+    .table-view {
+        margin-top: 0;
+    }
+
+    .flex-title {
+        padding-top: 0;
+        justify-content: space-between;
+        border-bottom: 1px solid transparent;
+    }
+
+    // >.flex-view {
+    //     justify-content: space-between;
+    // }
+}
+
+.el-table{
+    .el-table__body-wrapper {
+        @extend .scroll;
+        &::-webkit-scrollbar {
+            /*滚动条整体*/
+            width: 17px;
+        }
+        &::-webkit-scrollbar-thumb {
+            /*滚动条里面的滑块*/
+            width: 4px;
+            cursor: pointer;
+            background: #0294E2;
+            border: 5px solid #013769;
+        }
+    
+    }
+
+    .el-table__cell.gutter {
+        display: none;
+    }
+}
+.manage-dropdown{
+    width: 240px!important;
+    &.w-400{
+        width: 400px!important;
+    }
+      &.w-350{
+            width: 350px!important;
+    } 
+}
+
+.manage-input-sel {
+    margin-right: 30px;
+    margin-bottom: 15px;
+
+    .input-title{
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        font-size: 16px;
+        color: #FFFFFF;
+        margin-bottom: 10px;
+    }
+    &.w-400{
+        .el-dropdown-link{
+            width: 400px;
+        }
+    }
+      &.w-350{
+        .el-dropdown-link{
+            width: 350px;
+        }
+    } 
+    .el-dropdown-link {
+        width: 240px;
+        height: 44px;
+        cursor: pointer;
+        position: relative;
+
+        input {
+            width: 100%;
+            height: 100%;
+
+            background: rgba(0,186,255,0.15);
+            border: 2px solid rgba(0,186,255,0.4);
+            font-size: 16px;
+            padding-left: 15px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #FFFFFF;
+
+            &::placeholder {
+                color: #92B1D0;
+            }
+        }
+
+        .arrow {
+            width: 33px;
+            height: 24px;
+            border-left: 1px solid #fff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
+
+            >img {
+                width: 6px;
+                height: 4px;
+            }
+        }
+    }
+}

src/router/index.js

@@ -93,7 +93,45 @@ const routes = [
     },{
       path: '/manage',
       name: 'manage',
-      component: () => import('../views/manage/index.vue')
+      component: () => import('../views/manage/index.vue'),
+      redirect: '/deviceStatusSet',
+      children:[{
+        path: '/deviceStatusSet',
+        name: 'deviceStatusSet',
+        component: () => import('../views/manage/deviceStatusSet.vue')
+      },{
+        path: '/deviceSet',
+        name: 'deviceSet',
+        component: () => import('../views/manage/deviceSet.vue')
+      },{
+        path: '/deviceInfoManage',
+        name: 'deviceInfoManage',
+        component: () => import('../views/manage/deviceInfoManage.vue')
+      },{
+        path: '/weatherData',
+        name: 'weatherData',
+        component: () => import('../views/manage/weatherData.vue')
+      },{
+        path: '/dataDevice',
+        name: 'dataDevice',
+        component: () => import('../views/manage/dataDevice.vue')
+      },{
+        path: '/mobileControl',
+        name: 'mobileControl',
+        component: () => import('../views/manage/mobileControl.vue')
+      },{
+        path: '/userInfoControl',
+        name: 'userInfoControl',
+        component: () => import('../views/manage/userInfoControl.vue')
+      },{
+        path: '/deviceManage',
+        name: 'deviceManage',
+        component: () => import('../views/manage/deviceManage.vue')
+      },{
+        path: '/videoManage',
+        name: 'videoManage',
+        component: () => import('../views/manage/videoManage.vue')
+      },]
     },  {
       path: '/control',
       name: 'control',

src/views/index.vue

@@ -25,7 +25,7 @@
             </div>
         </div>
         <div class="index-content">
-            <div class="left collapse" v-if="routerNow!='manage'">
+            <div class="left collapse" v-if="manageList.indexOf(routerNow)==-1">
                 <el-collapse v-model="activeNames">
                     <template v-for="item, index in leftList">
                         <el-collapse-item :name="index + 1" :key="index" v-if="!item.isRouter">
@@ -50,8 +50,28 @@
 
                 </el-collapse>
             </div>
+            <!-- 管理的左侧 -->
             <div class="left collapse" v-else>
-               管理
+                <el-collapse v-model="activeNames1">
+                    <template v-for="item, index in leftList1">
+                        <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="toRouter2(item1)"
+                                    :class="routerNow == item1.router? 'active' : ''"
+                                    v-for="item1, index1 in item.list" :key="index1">{{ item1.deviceTypeName }}
+                                </li>
+                            </ul>
+                        </el-collapse-item>
+                        <div @click="toRouter2(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">
                 <router-view v-if="!loading"></router-view>
@@ -79,7 +99,8 @@ export default {
                 { name: '数据分析', router: 'dataAnalysis', index: 1, routerList: ['dataAnalysis'], img: require('../assets/image/header-img4.png') },
                 // { name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
                 //systemManage systemManage
-                { name: '管理', router: 'manage', routerList: ['manage'], img: require('../assets/image/header-img6.png') },
+                // manage
+                { name: '管理', router: 'manage', routerList: ['manage','dataDevice','deviceStatusSet','deviceSet','deviceInfoManage','weatherData','mobileControl','userInfoControl','deviceManage','videoManage'], img: require('../assets/image/header-img6.png') },
 
                 { name: '大数据', router: 'largeScreen', routerList: ['largeScreen'], img: require('../assets/image/header-img8.png') }
             ],
@@ -92,7 +113,32 @@ export default {
                 { name: '施肥机', routerList: ['formula', 'dataAnalysis', 'historyData', 'irrigateSet', 'videoMonitoring','imageData', 'PIDSet', 'systemSet', 'upload', 'sensorSet', 'realTime', 'history', 'dataAnalysis'], img: require('../assets/image/left-img2.png'), list: [] },
                 { name: '生态气象站', routerList: ['realTime', 'historyData', 'exitSettings', 'skylight', 'control', 'systemSet-con','imageData', 'fan', 'upload-con', 'sensorSet-con', 'synthesis-con', 'alarmSettings', 'waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval', "targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet"], img: require('../assets/image/left-img3.png'), list: [] },
             ],
-
+            leftList1: [
+                { name: '管理', img: require('../assets/image/index-icon.png'), list: [], router: 'manage', isRouter: true, },
+                { name: '用户管理', routerList: [''], img: require('../assets/image/left-img0.png'), list: [
+                    {deviceTypeName:'控制器设备状态值设置',router:'deviceStatusSet',index:0},
+                    {deviceTypeName:'控制器设备设定值设置',router:'deviceSet',index:1},
+                    {deviceTypeName:'设备信息管理',router:'deviceInfoManage',index:2},
+                    {deviceTypeName:'设备绑定气象站数据',router:'weatherData',index:3},
+                    {deviceTypeName:'大数据设备信息',router:'dataDevice',index:4},
+                    {deviceTypeName:'手机控制模块信息',router:'mobileControl',index:5},
+                ] },
+                { name: '管理员管理', routerList: [''], img: require('../assets/image/left-img0.png'), list: [
+                    {deviceTypeName:'用户信息管理',router:'userInfoControl',index:6},
+                    {deviceTypeName:'设备管理',router:'deviceManage',index:7},
+                    // {deviceTypeName:'摄像头信息管理',router:'videoManage',index:8},
+                ] },
+            ],
+            manageList:['deviceStatusSet',
+'deviceSet',
+'deviceInfoManage',
+'weatherData',
+'dataDevice',
+'mobileControl',
+'userInfoControl',
+'deviceManage',
+'videoManage',],
+            activeNames1: [3,2],
             routerNow: 'realTime',
             deviceName: 1,
             routerIndex: 1,
@@ -443,6 +489,11 @@ export default {
                 this.$message('当前页面正在努力开发中');
             }
         },
+        toRouter2(item){
+            if (item.router != this.routerNow && !item.http) {
+                    this.$router.push({ name: item.router })
+             }
+        },
         getTime() {
             this.time = getnowtime()
             const that = this

src/views/manage/dataDevice.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="dataDevice manage-page">
+    <div class="table-title">
+      <img src="../../assets/manageImg/dataDevice.png" alt="">大数据设备信息
+    </div>
+    <div class="table-view">
+      <el-table :data="tableData" :row-class-name="tableRowClassName" height="620" style="width: 100%">
+        <el-table-column prop="deviceId" label="设备code码" width="180px">
+        </el-table-column>
+        <el-table-column prop="greenhouseName" label="设备名称">
+        </el-table-column>
+        <el-table-column prop="greenhouseVariety" label="品种">
+        </el-table-column>
+        <el-table-column prop="greenhouseNums" label="数量">
+        </el-table-column>
+        <el-table-column prop="growthStageName" label="生长阶段">
+          <template slot-scope="scope">
+            <div class="table-flex">
+              <div class="table-type">
+                {{ scope.row.growthStageName }}
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <div class="table-flex">
+              <div class="table-operate blue" @click="openModel(scope.row)">
+                <img src="../../assets/manageImg/table-edit.png" alt="">编辑
+              </div>
+              <!-- <el-popconfirm title="这一段内容确定删除吗？">
+                <div class="table-operate red" slot="reference">
+                  <img src="../../assets/manageImg/table-delete.png" alt="">删除
+                </div>
+              </el-popconfirm> -->
+            </div>
+
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-dialog :close-on-click-modal="false" title="提示" top="10vh" :visible.sync="addModel" width="700px"
+      class="vrcode-model manage-model" :append-to-body="true">
+      <div class="vrcode-model-title">
+        编辑
+      </div>
+      <div class="vrcode-content" v-if="nowData">
+        <div class="manage-left">
+          <!-- <div class="manage-input">
+                        <div class="input-title">设备code码</div>
+                        <input type="text" v-model="nowData.deviceId" placeholder="请输入设备code码">
+                    </div> -->
+          <div class="manage-input-sel">
+            <div class="input-title">关联气象站设备code码</div>
+            <el-dropdown @command="handleCommand">
+              <div class="el-dropdown-link">
+                <input v-model="nowData.deviceId" type="text" class="input-input" placeholder="请选择气象站设备code码">
+                <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
+              </div>
+              <el-dropdown-menu slot="dropdown" class="manage-dropdown">
+                <el-dropdown-item v-for="item, index in typeSelList
+                " :key="index" :command="item.deviceId">{{ item.deviceTypeName }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <div class="manage-input">
+            <div class="input-title">品种</div>
+            <input type="text" v-model="nowData.greenhouseVariety" placeholder="请输入品种">
+          </div>
+          <div class="manage-input">
+            <div class="input-title">生长阶段</div>
+            <input type="text" v-model="nowData.growthStageName" placeholder="请输入生长阶段">
+          </div>
+          <div class="manage-input">
+            <div class="input-title">设备名称</div>
+            <input type="text" v-model="nowData.greenhouseName" placeholder="请输入设备名称">
+          </div>
+          <div class="manage-input">
+            <div class="input-title">数量</div>
+            <input type="text" v-model="nowData.greenhouseNums" placeholder="请输入数量">
+          </div>
+        </div>
+        <div class="manage-right">
+          <div class="manage-img">
+            <label for="sel-img">
+              <img class="" :src="nowData.greenhouseImage" alt="">
+            </label>
+            <input ref="fileInput" type="file" :multiple="false" id="sel-img" accept="image/*"
+              @change="handleImageChange($event, 0)" />
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="vrcode-btn blue-btn w-100" @click="confirmModel">确定</div>
+        <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">取消</div>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tableData: [],
+      addModel: false,
+      nowData: null,
+      typeSelList: [],
+    }
+  },
+  mounted() { this.dataInit() },
+  methods: {
+    dataInit() {
+      var user = JSON.parse(localStorage.getItem('userInfo'))
+      this.api.selUserbyid(user.userid).then(res => {
+
+        if (res.data.code == 200) {
+          this.tableData = res.data.data.bigDataControls
+          res.data.data.devices.forEach((el, index) => {
+            if (el.deviceName == 10) {
+              this.typeSelList.push(el)
+            }
+          })
+        }
+      })
+    },
+    getData1(data) {
+      var name = ''
+      this.typeSelList.forEach((el, index) => {
+        if (el.deviceId == data) {
+          name = el.deviceTypeName
+        }
+      })
+      return name
+    },
+    handleCommand(e) {
+      this.nowData.deviceId = e
+    },
+    confirmModel() {
+      this.loading = this.$loading({
+        lock: true,
+        text: '加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      var data = this.nowData
+      this.api.updateDataDevice(data).then(res => {
+        this.loading.close()
+        if (res.data.code == 200) {
+          this.dataInit()
+          this.$message.success(res.data.msg);
+          this.addModel = false
+        } else {
+          this.$message.error(res.data.msg);
+          this.addModel1 = false
+        }
+      })
+    },
+    openModel(item) {
+      this.nowData = JSON.parse(JSON.stringify(item))
+      this.addModel = true
+    },
+    handleImageChange(event, type) {
+      this.loading = this.$loading({
+        lock: true,
+        text: '上传中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      const file = event.target.files[0];
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const imageData = e.target.result;
+        const convertedFile = new File([imageData], file.name, { type: file.type });
+        // 处理转换后的文件...
+
+        var data = { file: convertedFile }
+        this.api.manageUploadImage(data).then(res => {
+          this.loading.close()
+          if (res.data.code == 200) {
+            this.nowData.greenhouseImage = res.data.msg
+            this.$refs.fileInput.value = '';
+
+          } else {
+
+          }
+        })
+      };
+      reader.readAsArrayBuffer(file);
+
+    },
+    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/manage/deviceInfoManage.vue

@@ -0,0 +1,444 @@
+<template>
+  <div class="deviceSet manage-page">
+    <div class="table-title">
+      <img src="../../assets/manageImg/deviceInfoManage.png" alt="">设备信息管理
+    </div>
+    <div class="flex-view">
+      <div class="manage-btn" @click="active = 0" :class="active == 0 ? 'active' : ''">
+        <img src="../../assets/manageImg/manage-btn-icon2.png" alt="">
+        施肥机
+      </div>
+      <div class="manage-btn" @click="active = 1" :class="active == 1 ? 'active' : ''">
+        <img src="../../assets/manageImg/manage-btn-icon1.png" alt="">
+        控制器
+      </div>
+    </div>
+    <div class="table-view" v-if="active == 0">
+      <el-table :data="tableData" :row-class-name="tableRowClassName" height="620" style="width: 100%">
+        <!-- <el-table-column  label="序号">
+          <template slot-scope="scope">
+              <div>{{scope.$index+1 }}
+              </div>
+            </template>
+</el-table-column> -->
+        <el-table-column prop="deviceId" label="设备code码">
+        </el-table-column>
+        <el-table-column prop="deviceTypeName" label="设备名称">
+        </el-table-column>
+        <el-table-column label="操作" width="260px">
+          <template slot-scope="scope">
+            <div class="table-flex">
+              <div class="table-operate blue" @click="openModel(scope.row, scope.$index)">
+                <img src="../../assets/manageImg/table-edit.png" alt="">编辑
+              </div>
+              <div class="table-operate red" @click="openModelName(scope.row, scope.$index)">
+                <img src="../../assets/manageImg/table-edit.png" alt="">修改更多名称
+              </div>
+            </div>
+
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="table-view" v-else>
+      <el-table :data="tableData1" :row-class-name="tableRowClassName" height="620" style="width: 100%">
+        <!-- <el-table-column  label="序号">
+          <template slot-scope="scope">
+              <div>{{scope.$index+1 }}
+              </div>
+            </template>
+        </el-table-column> -->
+        <el-table-column prop="deviceId" label="设备code码">
+        </el-table-column>
+        <el-table-column prop="deviceTypeName" label="设备名称">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <div class="table-flex">
+              <div class="table-operate blue" @click="openModel1(scope.row, scope.$index)">
+                <img src="../../assets/manageImg/table-edit.png" alt="">编辑
+              </div>
+            </div>
+
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <el-dialog title="提示" top="10vh" :visible.sync="addModel" width="700px" class="vrcode-model manage-model"
+      :append-to-body="true">
+      <div class="vrcode-model-title">
+        编辑
+      </div>
+      <div class="vrcode-content" v-if="nowData">
+        <div class="manage-left">
+          <div class="manage-input">
+            <div class="input-title">设备code码</div>
+            <input type="text" v-model="nowData.deviceId" disabled placeholder="请输入设备code码">
+          </div>
+          <div class="manage-input">
+            <div class="input-title">设备名称</div>
+            <input type="text" v-model="nowData.deviceTypeName" placeholder="请输入设备名称">
+          </div>
+          <div class="manage-input">
+            <div class="input-title">施肥机状态页名称</div>
+            <input type="text" v-model="nowData.stationName" placeholder="请输入施肥机状态页名称">
+          </div>
+          <div class="manage-input">
+            <div class="input-title">摄像机名称</div>
+            <input type="text" v-model="nowData.cameraSerialNumber" placeholder="请输入摄像机名称">
+          </div>
+          <div class="manage-input">
+            <div class="input-title">摄像机通道号</div>
+            <input type="number" v-model="nowData.cameraChannelNumber" placeholder="请输入对应摄像机通道号">
+          </div>
+          <div class="manage-input">
+            <div class="input-title">排序</div>
+            <input type="number" v-model="nowData.equipmentStatu" placeholder="请输入排序">
+          </div>
+        </div>
+        <div class="manage-right">
+          <div class="manage-img">
+            <label for="sel-img">
+              <img class="" :src="nowData.hls" alt="小程序图片">
+            </label>
+            <input ref="fileInput" type="file" :multiple="false" id="sel-img" accept="image/*"
+              @change="handleImageChange($event, 0)" />
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="vrcode-btn blue-btn w-100" @click="changeAddModel">确定</div>
+        <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">取消</div>
+      </span>
+    </el-dialog>
+
+    <el-dialog title="提示" top="10vh" :visible.sync="changeName" width="760px" class="vrcode-model manage-model"
+      :append-to-body="true">
+      <div class="vrcode-model-title">
+        修改更多名称
+      </div>
+      <div class="vrcode-content" v-if="nameList">
+        <div class="manage-left">
+          <div class="manage-input w-160">
+            <div class="input-title">施肥配方1-8</div>
+            <input type="text" v-model="nameList.fertilizationOne" placeholder="施肥1">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.fertilizationTwo" placeholder="施肥2">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.fertilizationThree" placeholder="施肥3">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.fertilizationFour" placeholder="施肥4">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.fertilizationFive" placeholder="施肥5">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.fertilizationSix" placeholder="施肥6">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.fertilizationSeven" placeholder="施肥7">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.fertilizationEight" placeholder="施肥8">
+          </div>
+        </div>
+        <div class="manage-center">
+          <div class="manage-input w-160">
+            <div class="input-title">灌溉组1-8</div>
+            <input type="text" v-model="nameList.solenoidOne" placeholder="灌溉组1">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.solenoidTwo" placeholder="灌溉组2">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.solenoidThree" placeholder="灌溉组3">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.solenoidFour" placeholder="灌溉组4">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.solenoidFive" placeholder="灌溉组5">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.solenoidSix" placeholder="灌溉组6">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.solenoidSeven" placeholder="灌溉组7">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.solenoidEight" placeholder="灌溉组8">
+          </div>
+        </div>
+      
+        <div class="manage-center">
+          <div class="manage-input w-160">
+            <div class="input-title">灌溉组9-16</div>
+            <input type="text" v-model="nameList.solenoidNine" placeholder="灌溉组9">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.solenoidTen" placeholder="灌溉组10">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.solenoidElven" placeholder="灌溉组11">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.solenoidTwelve" placeholder="灌溉组12">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.solenoidThirteen" placeholder="灌溉组13">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.solenoidFourteen" placeholder="灌溉组14">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.solenoidFifteen" placeholder="灌溉组15">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.solenoidSixteen" placeholder="灌溉组16">
+          </div>
+        </div>
+   
+        <div class="manage-right">
+          <div class="manage-input w-160">
+            <div class="input-title">外控设备1-4</div>
+            <input type="text" v-model="nameList.externalOne" placeholder="外控设备1">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.externalTwo" placeholder="外控设备2">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.externalThree" placeholder="外控设备3">
+          </div>
+          <div class="manage-input w-160">
+            <input type="text" v-model="nameList.externalFour" placeholder="外控设备4">
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="vrcode-btn blue-btn w-100" @click="changeAddModel2">确定</div>
+        <div class="vrcode-btn cancle-btn w-100" @click="changeName = false">取消</div>
+      </span>
+    </el-dialog>
+
+    <el-dialog title="提示" top="10vh" :visible.sync="addModel1" width="564px" class="vrcode-model manage-model"
+      :append-to-body="true">
+      <div class="vrcode-model-title">
+        编辑
+      </div>
+      <div class="vrcode-content" v-if="nowData1">
+        <div class="manage-left">
+          <div class="manage-input">
+            <div class="input-title">设备code码</div>
+            <input type="text" v-model="nowData1.deviceId" disabled placeholder="请输入设备code码">
+          </div>
+          <div class="manage-input">
+            <div class="input-title">摄像机名称</div>
+            <input type="text" v-model="nowData1.cameraSerialNumber" placeholder="请输入摄像机名称">
+          </div>
+          <div class="manage-input">
+            <div class="input-title">排序</div>
+            <input type="number" v-model="nowData1.equipmentStatu" placeholder="请输入排序">
+          </div>
+          <div class="manage-img-small">
+            <label for="sel-img">
+              <img class="" :src="nowData1.hls" alt="">
+            </label>
+            <input ref="fileInput1" type="file" :multiple="false" id="sel-img" accept="image/*"
+              @change="handleImageChange($event,1)" />
+          </div>
+        </div>
+        <div class="manage-right">
+          <div class="manage-input">
+            <div class="input-title">设备名称</div>
+            <input type="text" v-model="nowData1.deviceTypeName" placeholder="请输入设备名称">
+          </div>
+
+          <div class="manage-input">
+            <div class="input-title">摄像机通道号</div>
+            <input type="number" v-model="nowData1.cameraChannelNumber" placeholder="请输入摄像机通道号">
+          </div>
+          <div class="manage-text">
+            如果有摄像机则每小时都会定时更新<br>
+            小程序摄像机主页面图片，<br>
+            如果没有摄像机则可以自定义更改图片<br>
+            地址信息。
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="vrcode-btn blue-btn w-100" @click="changeAddModel1">确定</div>
+        <div class="vrcode-btn cancle-btn w-100" @click="addModel1 = false">取消</div>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      active: 0,
+      tableData: [],
+      tableData1: [],
+      addModel: false,
+      addModel1: false,
+      changeName: false,
+      nowData: null,
+      nowData1: null,
+      nameList:null,
+    }
+  },
+  mounted() { this.dataInit() },
+  methods: {
+    dataInit() {
+      var user = JSON.parse(localStorage.getItem('userInfo'))
+      this.api.selUserbyid(user.userid).then(res => {
+        this.tableData = []
+        this.tableData1 = []
+        if (res.data.code == 200) {
+          res.data.data.devices.forEach((el, index) => {
+            if (el.deviceName == 10) {
+              this.tableData1.push(el)
+            } else if (el.deviceName == 1) {
+              this.tableData.push(el)
+            }
+          })
+        }
+      })
+    },
+
+    changeAddModel() {
+      this.loading = this.$loading({
+        lock: true,
+        text: '加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      var data = this.nowData
+      this.api.updatedevice(data).then(res => {
+        this.loading.close()
+        if (res.data.code == 200) {
+          this.dataInit()
+          this.$message.success(res.data.msg);
+          this.addModel = false
+        } else {
+          this.$message.error(res.data.msg);
+          this.addModel = false
+        }
+      })
+    },
+    openModelName(item,index){
+      this.loading = this.$loading({
+        lock: true,
+        text: '加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      var data={deviceId:item.deviceId}
+      this.api.getByid(data).then(res=>{
+        this.loading.close()
+        if (res.data.code == 200) {
+          this.nameList=res.data.data
+          this.changeName=true
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      })
+},
+    changeAddModel1() {
+      this.loading = this.$loading({
+        lock: true,
+        text: '加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      var data = this.nowData1
+      this.api.updatedevice(data).then(res => {
+        this.loading.close()
+        if (res.data.code == 200) {
+          this.dataInit()
+          this.$message.success(res.data.msg);
+          this.addModel1 = false
+        } else {
+          this.$message.error(res.data.msg);
+          this.addModel1 = false
+        }
+      })
+    },
+    changeAddModel2(){
+      this.loading = this.$loading({
+        lock: true,
+        text: '加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      var data = this.nameList
+      this.api.updateFsname(data).then(res=>{
+        this.loading.close()
+        if (res.data.code == 200) {
+          this.$message.success(res.data.msg);
+          this.changeName = false
+        } else {
+          this.$message.error(res.data.msg);
+          this.changeName = false
+        }
+      })
+    },
+    handleImageChange(event,type) {
+      this.loading = this.$loading({
+        lock: true,
+        text: '上传中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      const file = event.target.files[0];
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const imageData = e.target.result;
+        const convertedFile = new File([imageData], file.name, { type: file.type });
+        // 处理转换后的文件...
+
+        var data = { file: convertedFile }
+        this.api.manageUploadImage(data).then(res => {
+          this.loading.close()
+        if (res.data.code == 200) {
+          if(type==0){
+            this.nowData.hls=res.data.msg
+            this.$refs.fileInput.value = '';
+          }else{
+            this.nowData1.hls=res.data.msg 
+            this.$refs.fileInput1.value = '';
+          }
+         
+        } else {
+         
+        }
+        })
+      };
+      reader.readAsArrayBuffer(file);
+
+    },
+    openModel(item, index) {
+      this.nowData = JSON.parse(JSON.stringify(item))
+      this.addModel = true
+    },
+    openModel1(item, index) {
+      this.nowData1 = JSON.parse(JSON.stringify(item))
+      this.addModel1 = true
+    },
+    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/manage/deviceManage.vue

@@ -0,0 +1,401 @@
+<template>
+  <div class="videoManage manage-page deviceManage">
+    <div class="flex-view flex-title">
+      <div class="table-title">
+        <img src="../../assets/manageImg/deviceManage.png" alt="">设备管理
+      </div>
+      <div class="table-title-btn blue" @click="openAddModel1">
+        <img src="../../assets/manageImg/add-btn.png" alt="">添加
+      </div>
+    </div>
+    <div class="flex-view ">
+      <div class="manage-input  w-180">
+        <span class="input-title">用户名查询</span>
+        <input class="search-input" type="text" v-model="searchName" placeholder="">
+      </div>
+      <div class="manage-input  w-180">
+        <span class="input-title">设备code码查询</span>
+        <input class="search-input" type="text" v-model="searchID" placeholder="">
+      </div>
+      <div class="table-title-btn blue" @click="dataInit">
+        查询
+      </div>
+    </div>
+    <div class="table-view">
+      <el-table :data="tableData" :row-class-name="tableRowClassName" height="540" style="width: 100%">
+        <el-table-column prop="deviceId" label="设备code码">
+        </el-table-column>
+        <el-table-column prop="deviceTypeName" label="设备名称">
+        </el-table-column>
+        <el-table-column prop="cameraSerialNumber" label="设备关联摄像头名称">
+        </el-table-column>
+        <el-table-column prop="cameraChannelNumber" label="设备关联摄像头通道">
+        </el-table-column>
+        <el-table-column prop="userName" label="设备关联用户名称">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <div class="table-flex">
+              <div class="table-operate blue" @click="openRoleModel(scope.row.deviceId)"
+                v-if="scope.row.deviceName == 10">
+                <img src="../../assets/manageImg/table-edit.png" alt="">权限
+              </div>
+              <el-popconfirm @confirm="confirmDel(scope.row)" title="这一段内容确定删除吗？" icon-color="red">
+                <div class="table-operate red" slot="reference">
+                  <img src="../../assets/manageImg/table-delete.png" alt="">删除
+                </div>
+              </el-popconfirm>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
+        :page-sizes="[10, 20, 50, 100, 200, 500, 1000, 1500]" :page-size="pageSize"
+        layout="->,total, sizes, prev, pager, next, jumper" :total="total">
+      </el-pagination>
+    </div>
+
+    <el-dialog title="控制器权限管理" :append-to-body="true" :visible.sync="roleModel" width="70%">
+      <div class="model-title">控制器权限管理</div>
+      <div class="model-sel scroll">
+        <div v-for="item, index in selDevicestatus" :key="index">
+          <div @click="selClick(item)" :class="item.select ? 'sel' : 'no-sel'"></div>
+          {{ item.name }}
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="vrcode-btn blue-btn" @click="addpermissionall">添加标准控制器</div>
+        <div class="vrcode-btn cancle-btn w-100" @click="roleModel = false">确定</div>
+      </span>
+    </el-dialog>
+
+    <el-dialog title="提示" top="10vh" :visible.sync="addModel1" width="564px" class="vrcode-model manage-model"
+      :append-to-body="true">
+      <div class="vrcode-model-title">
+        添加设备
+      </div>
+      <div class="vrcode-content">
+        <div class="manage-left">
+          <div class="manage-input">
+            <div class="input-title">设备code码</div>
+            <input type="text" v-model="nowData1.deviceId" placeholder="请输入设备code码">
+          </div>
+          <div class="manage-input-sel" style="margin-right: 0;">
+            <div class="input-title">设备类型</div>
+            <el-dropdown @command="handleCommand1">
+              <div class="el-dropdown-link">
+                <input v-model="deviceType" type="text" class="input-input" placeholder="请选择设备类型">
+                <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
+              </div>
+              <el-dropdown-menu slot="dropdown" class="manage-dropdown">
+                <el-dropdown-item v-for="item, index in deviceSel
+                " :key="index" :command="item.label">{{ item.label }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <div class="manage-input">
+            <div class="input-title">关联摄像头名称</div>
+            <input type="number" v-model="nowData1.cameraSerialNumber" placeholder="请输入摄像头名称">
+          </div>
+          <div class="manage-img-small">
+            <label for="sel-img">
+              <img class="" :src="nowData1.hls" alt="">
+            </label>
+            <input ref="fileInput1" type="file" :multiple="false" id="sel-img" accept="image/*"
+              @change="handleImageChange($event,1)" />
+          </div>
+        </div>
+        <div class="manage-right">
+          <div class="manage-input">
+            <div class="input-title">设备名称</div>
+            <input type="text" v-model="nowData1.deviceTypeName" placeholder="请输入设备名称">
+          </div>
+
+          <div class="manage-input">
+            <div class="input-title">关联摄像头通道</div>
+            <input type="number" v-model="nowData1.cameraChannelNumber" placeholder="请输入摄像机通道号">
+          </div>
+        
+          <div class="manage-text">
+            如果有摄像机则每小时都会定时更新<br>
+            小程序摄像机主页面图片，<br>
+            如果没有摄像机则可以自定义更改图片<br>
+            地址信息。
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="vrcode-btn blue-btn w-100" @click="addDevice">确定</div>
+        <div class="vrcode-btn cancle-btn w-100" @click="addModel1 = false">取消</div>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      searchName: '',
+      searchID: '',
+      total: 0,
+      roleModel: false,
+      selDevicestatus: [],
+      allDevicestatus: [],
+      nowDevicestatus: [],
+      nowDeviceId:'',
+
+      //添加设备
+      addModel1:false,
+      nowData1:{
+        deviceState:0,
+      },
+
+      deviceType:'',
+      deviceSel: [{ label: '控制器', value: 10, }, { label: '施肥机', value: 1, }, { label: '气象站', value:30, }],
+    }
+  },
+  mounted() { this.dataInit() },
+  methods: {
+    dataInit() {
+      // var user = JSON.parse(localStorage.getItem('userInfo'))
+      // this.api.selUserbyid(user.userid).then(res => {
+      //   if (res.data.code == 200) {
+      //     this.deviceList = res.data.data.devices
+      //   }
+      // })
+      this.pageSize = 10
+      this.currentPage = 1
+      setTimeout(() => {
+        this.getData()
+      }, 0);
+    },
+    getDeviceType(e) {
+      if (e == '控制器') {
+        return 10
+      } else if(e == '施肥机'){
+        return 1
+      } else if(e == '气象站'){
+        return 30
+      }
+    },
+    handleCommand1(e) {
+      this.nowData1.deviceName = this.getDeviceType(e)
+      this.deviceType = e
+    },
+    openRoleModel(deviceId) {
+      this.loading = this.$loading({
+        lock: true,
+        text: '加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      this.selDevicestatus = []
+      this.nowDeviceId=deviceId
+      var data = { deviceId: deviceId }
+      // 线调取全部权限
+      this.api.selectallPermissions().then(res => {
+        if (res.data.code == 200) {
+          this.allDevicestatus = res.data.data
+          // this.roleModel=true
+          // 再根据deviceId调取单个设备权限 并且查询共同name
+          this.getcontrol_cpermission()
+        } else {
+          this.loading.close()
+          this.$message.error(res.data.msg);
+        }
+      })
+    },
+    openAddModel1(){
+      this.nowData1={
+        deviceState:0,
+      }
+      this.addModel1=true
+    },
+    addDevice(){
+      if (!this.nowData1.deviceId) {
+        this.$message.error('设备code码还未填写');
+        return
+      }
+      if (!this.nowData1.deviceName) {
+        this.$message.error('设备类型还未选择');
+        return
+      }
+      if (!this.nowData1.deviceTypeName) {
+        this.$message.error('设备名称还未填写');
+        return
+      }
+      var data={...this.nowData1,stationName:this.nowData1.deviceTypeName}
+      this.api.addDevice(data).then(res=>{
+        if (res.data.code == 200) {
+          this.$message.success(res.data.msg);
+        this.dataInit()
+        this.addModel1=false
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      })
+    },
+    handleImageChange(event) {
+      this.loading = this.$loading({
+        lock: true,
+        text: '上传中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      const file = event.target.files[0];
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const imageData = e.target.result;
+        const convertedFile = new File([imageData], file.name, { type: file.type });
+        // 处理转换后的文件...
+
+        var data = { file: convertedFile }
+        this.api.manageUploadImage(data).then(res => {
+          this.loading.close()
+        if (res.data.code == 200) {
+            this.nowData1.hls=res.data.msg 
+            this.$refs.fileInput1.value = '';
+        } else {
+          this.$message.error(res.data.msg);
+        }
+        })
+      };
+      reader.readAsArrayBuffer(file);
+
+    },
+    addpermissionall(){
+      this.api.addpermissionall(this.nowDeviceId).then(res=>{
+        if (res.data.code == 200) {
+          this.$message.success(res.data.msg);
+          this.getcontrol_cpermission()
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      })
+    },
+    getcontrol_cpermission(){
+      this.api.getcontrol_cpermission(this.nowDeviceId).then(res1 => {
+            this.loading.close()
+            if (res1.data.code == 200) {
+              this.nowDevicestatus = res1.data.data
+              var list1 = this.allDevicestatus
+              var list2 = this.nowDevicestatus
+              var resultArray = []
+              // 遍历 list1
+              for (const item1 of list1) {
+                // 查找在 list2 中是否有相同 id 的对象
+                const matchingItem = list2.find(item2 => item2.id === item1.id);
+                // 如果找到匹配的对象，则在 list1 对应的对象中添加 select 属性
+                if (matchingItem) {
+                  item1.select = true;
+                } else {
+                  // 如果没找到匹配的对象，则添加 select 属性并设置为 false
+                  item1.select = false;
+                }
+                // 将处理后的对象添加到结果数组中
+                resultArray.push(item1);
+              }
+              this.selDevicestatus = resultArray
+              this.roleModel = true
+            } else {
+              this.$message.error(res1.data.msg);
+            }
+          })
+    },
+    selClick(item) {
+            var store = this.$store.state
+            var deviceId = this.nowDeviceId
+            var statusId = item.id
+            if (item.select) {
+                item.select = false
+                this.$forceUpdate();
+                this.api.delpermission(deviceId, statusId).then((res => {
+                    if (res.data.code == 200) {
+                        this.$message({
+                            message: '修改成功',
+                            type: "success",
+                        });
+                        this.getcontrol_cpermission()
+                    } else {
+                        this.$message({
+                            message: res.data.msg,
+                            type: "warning",
+                        });
+                    }
+                }))
+            } else {
+                item.select = true
+                this.$forceUpdate();
+                this.api.addpermission(deviceId, statusId).then((res => {
+                    if (res.data.code == 200) {
+                        this.$message({
+                            message: '修改成功',
+                            type: "success",
+                        });
+                        this.getcontrol_cpermission()
+                    }
+                }))
+            }
+        },
+    confirmDel(item) {
+      var data = { id: item.deviceId }
+      this.api.deldevice(data).then(res => {
+        if (res.data.code == 200) {
+          this.dataInit()
+          this.$message.success(res.data.msg);
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      })
+    },
+    getData() {
+      var data = {
+        page: this.currentPage,
+        pageSize: this.pageSize,
+        userName: this.searchName,
+        deviceId: this.searchID
+      }
+      this.loading = this.$loading({
+        lock: true,
+        text: '加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      this.api.seldevice(data).then(res => {
+        this.loading.close()
+        if (res.data.code == 200) {
+          this.tableData = res.data.data.data
+          this.total = res.data.data.total
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      })
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      setTimeout(() => {
+        this.getData()
+      }, 0);
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      setTimeout(() => {
+        this.getData()
+      }, 0);
+    },
+    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/manage/deviceSet.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="deviceStatusSet manage-page">
+    <div class="table-title">
+      <img src="../../assets/manageImg/deviceSet.png" alt="">设备状态设备
+    </div>
+    <div class="flex-view scroll">
+      <div class="manage-btn" v-for="item,index in topList" :key="index" @click="topChange(item,index)" :class="active == index ? 'active' : ''">
+      
+       {{item.deviceTypeName}}
+      </div>
+    </div>
+    <div class="table-view">
+      <el-table :data="tableData" :row-class-name="tableRowClassName" height="580" style="width: 100%">
+  
+        <el-table-column  label="序号" width="120px">
+          <template slot-scope="scope">
+              <div>{{scope.$index+1 }}
+              </div>
+            </template>
+</el-table-column>
+
+        <el-table-column prop="permissionName" label="设备名称">
+        </el-table-column>
+        <el-table-column prop="nickName" label="设备别名">
+        </el-table-column>
+        <el-table-column prop="sort"  width="120px" label="排序">
+        </el-table-column>
+        <el-table-column label="操作">
+            <template slot-scope="scope">
+              <div class="table-flex">
+                <div class="table-operate blue" @click="openModel(scope.row,scope.$index)">
+                  <img src="../../assets/manageImg/table-edit.png" alt="">编辑
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+      </el-table>
+    </div>
+    <el-dialog title="提示" top="15vh" :visible.sync="addModel" width="564px" class="vrcode-model manage-model" :append-to-body="true">
+      <div class="vrcode-model-title">
+              编辑
+            </div>
+            <div class="vrcode-content" v-if="changeData">
+              <div class="manage-left">
+                    <div class="manage-input">
+                        <div class="input-title">设备别名</div>
+                        <input type="text" v-model="changeData.nickName" placeholder="请输入设备别名">
+                    </div>
+              </div>
+              <div class="manage-right">
+                    <div class="manage-input">
+                        <div class="input-title">排序</div>
+                        <input type="number" v-model="changeData.sort" placeholder="请输入新排序">
+                    </div>
+              </div>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <div class="vrcode-btn blue-btn w-100" @click="confirmModel">确定</div>
+                <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">取消</div>
+            </span>
+        </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tableData: [],
+          topList:[],
+          active:0,
+          addModel:false,
+          changeData:null,
+          modelIndex:0,
+    }
+  },
+  watch:{
+    active(newVal,oldVal){
+      this.getData(this.topList[newVal])
+    },
+  },
+  mounted() {this.dataInit() },
+  methods: {
+    confirmModel(){
+      this.loading = this.$loading({
+    lock: true,
+    text: '加载中',
+    spinner: 'el-icon-loading',
+    background: 'rgba(0, 0, 0, 0.7)'
+  });
+      this.api.putControlpermission(this.changeData).then(res=>{
+        this.loading.close()
+        if(res.data.code==200){
+          this.getData(this.topList[this.active])
+          this.$message.success(res.data.msg);
+          this.addModel=false
+        }else{
+          this.$message.error(res.data.msg);
+          this.addModel=false
+        }
+      })
+    },
+    openModel(item,index){
+      this.changeData=JSON.parse(JSON.stringify(item))
+      this.addModel=true
+      this.modelIndex=index
+    },
+   dataInit(){
+      var user=   JSON.parse(localStorage.getItem('userInfo'))
+      this.api.selUserbyid(user.userid).then(res=>{
+        this.topList=[] 
+        if(res.data.code==200){
+          res.data.data.devices.forEach((el,index)=>{
+            if(el.deviceName==10){
+              this.topList.push(el)
+            }
+          })
+          setTimeout(() => {
+            this.getData(this.topList[0])
+          }, 0);
+        }
+      })
+    },
+    getData(item){
+      var data={deviceId:item.deviceId}
+      this.api.selpermission(data).then(res=>{
+        if(res.data.code==200){
+          this.tableData=res.data.data
+        }
+      })
+    },
+    topChange(item,index){
+      this.active = index
+    
+    },
+    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/manage/deviceStatusSet.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="deviceStatusSet manage-page">
+    <div class="table-title">
+      <img src="../../assets/manageImg/deviceStatusSet.png" alt="">设备状态设备
+    </div>
+    <div class="flex-view scroll">
+      <div class="manage-btn" v-for="item,index in topList" :key="index" @click="topChange(item,index)" :class="active == index ? 'active' : ''">
+      
+       {{item.deviceTypeName}}
+      </div>
+    </div>
+    <div class="table-view">
+      <el-table :data="tableData" :row-class-name="tableRowClassName" height="580" style="width: 100%">
+  
+        <el-table-column  label="序号" width="120px">
+          <template slot-scope="scope">
+              <div>{{scope.$index+1 }}
+              </div>
+            </template>
+</el-table-column>
+
+        <el-table-column prop="permissionName" label="设备名称">
+        </el-table-column>
+        <el-table-column prop="nickName" label="设备别名">
+        </el-table-column>
+        <el-table-column prop="sort"  width="120px" label="排序">
+        </el-table-column>
+        <el-table-column label="操作">
+            <template slot-scope="scope">
+              <div class="table-flex">
+                <div class="table-operate blue" @click="openModel(scope.row,scope.$index)">
+                  <img src="../../assets/manageImg/table-edit.png" alt="">编辑
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+      </el-table>
+    </div>
+    <el-dialog title="提示" top="15vh" :visible.sync="addModel" width="564px" class="vrcode-model manage-model" :append-to-body="true">
+      <div class="vrcode-model-title">
+              编辑
+            </div>
+            <div class="vrcode-content" v-if="changeData">
+              <div class="manage-left">
+                    <div class="manage-input">
+                        <div class="input-title">设备别名</div>
+                        <input type="text" v-model="changeData.nickName" placeholder="请输入设备别名">
+                    </div>
+              </div>
+              <div class="manage-right">
+                    <div class="manage-input">
+                        <div class="input-title">排序</div>
+                        <input type="number" v-model="changeData.sort" placeholder="请输入新排序">
+                    </div>
+              </div>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <div class="vrcode-btn blue-btn w-100" @click="confirmModel">确定</div>
+                <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">取消</div>
+            </span>
+        </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tableData: [],
+          topList:[],
+          active:0,
+          addModel:false,
+          changeData:null,
+          modelIndex:0,
+    }
+  },
+  watch:{
+    active(newVal,oldVal){
+      this.getData(this.topList[newVal])
+    },
+  },
+  mounted() {this.dataInit() },
+  methods: {
+    confirmModel(){
+      this.api.putpermission(this.changeData).then(res=>{
+        if(res.data.code==200){
+          this.getData(this.topList[this.active])
+          this.$message.success(res.data.msg);
+          this.addModel=false
+        }else{
+          this.$message.error(res.data.msg);
+          this.addModel=false
+        }
+      })
+    },
+    openModel(item,index){
+      this.changeData=JSON.parse(JSON.stringify(item))
+      this.addModel=true
+      this.modelIndex=index
+    },
+   dataInit(){
+      var user=   JSON.parse(localStorage.getItem('userInfo'))
+      this.api.selUserbyid(user.userid).then(res=>{
+        this.topList=[] 
+        if(res.data.code==200){
+          res.data.data.devices.forEach((el,index)=>{
+            if(el.deviceName==10){
+              this.topList.push(el)
+            }
+          })
+          setTimeout(() => {
+            this.getData(this.topList[0])
+          }, 0);
+        }
+      })
+    },
+    getData(item){
+      var data={deviceId:item.deviceId}
+      this.api.selControlPermissions(data).then(res=>{
+        if(res.data.code==200){
+          this.tableData=res.data.data
+        }
+      })
+    },
+    topChange(item,index){
+      this.active = index
+    
+    },
+    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/manage/index.vue

@@ -1,19 +1,24 @@
 <template>
   <div class="manage-index">
-        管理
+      <router-view></router-view>
   </div>
-  </template>
+</template>
   <script>
-  export default {
+export default {
-    data(){
+  data() {
-        return {}
+    return {};
   },
-    mounted(){},
+  mounted() {},
-    methods:{},
+  methods: {},
+};
+</script>
+  <style lang="scss">
+  .manage-index{
+    width: 100%;
+    height: 100%;
+    padding: 20px 20px 20px 30px;
     
   }
-  </script>
+</style>
-  <style lang="scss">
   
-  </style>
   

src/views/manage/mobileControl.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="videoManage manage-page  deviceSet">
+
+    <div class="flex-view flex-title">
+      <div class="table-title">
+        <img src="../../assets/manageImg/deviceInfoManage.png" alt="">手机控制模块信息
+      </div>
+      <!-- <div class="table-title-btn blue" @click="openModel({}, 0)">
+        <img src="../../assets/manageImg/add-btn.png" alt="">添加
+      </div> -->
+    </div>
+    <div class="flex-view scroll">
+      <div class="manage-btn" v-for="item, index in topList" :key="index" @click="topChange(item, index)"
+        :class="active == index ? 'active' : ''">
+
+        {{ item.deviceTypeName }}
+      </div>
+    </div>
+    <div class="table-view">
+      <el-table :data="tableData" :row-class-name="tableRowClassName" height="620" style="width: 100%">
+        <!-- <el-table-column  label="序号">
+          <template slot-scope="scope">
+              <div>{{scope.$index+1 }}
+              </div>
+            </template>
+</el-table-column> -->
+        <el-table-column prop="id" label="id">
+        </el-table-column>
+        <el-table-column prop="name" label="规划名称">
+        </el-table-column>
+        <el-table-column prop="nickName" label="手机控制名称">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <div class="table-flex">
+              <div class="table-operate blue" @click="openModel(scope.row, 1)">
+                <img src="../../assets/manageImg/table-edit.png" alt="">编辑
+              </div>
+            </div>
+
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-dialog title="提示" top="10vh" :visible.sync="addModel" width="564px" class="vrcode-model manage-model"
+      :append-to-body="true">
+      <div class="vrcode-model-title">
+      编辑
+      </div>
+      <div class="vrcode-content">
+        <div class="manage-left">
+          <!-- <div class="manage-input">
+            <div class="input-title">规划名称</div>
+            <input type="text" v-model="nowData.name" :disabled="modelName == '编辑' ? true : false" placeholder="规划名称">
+          </div> -->
+          <div class="manage-input">
+            <div class="input-title">手机控制名称</div>
+            <input type="text" v-model="nowData.nickName" placeholder="请输入手机控制名称">
+          </div>
+        </div>
+        <div class="manage-right">
+         
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="vrcode-btn blue-btn w-100" @click="confirmBtn">确定</div>
+        <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">取消</div>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      active: 0,
+      tableData: [],
+      topList: [],
+      addModel: false,
+      nowData: {
+        name:"",
+        nickName:"",
+      },
+      deviceId:'',
+    }
+  },
+  watch: {
+    active(newVal, oldVal) {
+      this.getData(this.topList[newVal])
+    },
+  },
+  mounted() { this.dataInit() },
+  methods: {
+    openModel(item, type) {
+     
+        this.nowData = JSON.parse(JSON.stringify(item))
+        this.addModel = true
+    },
+    dataInit() {
+      var user = JSON.parse(localStorage.getItem('userInfo'))
+      this.api.selUserbyid(user.userid).then(res => {
+        this.topList = []
+        if (res.data.code == 200) {
+       
+          res.data.data.devices.forEach((el, index) => {
+            if (el.deviceName == 10) {
+              this.topList.push(el)
+            }
+          })
+          setTimeout(() => {
+            this.getData(this.topList[0])
+          }, 0);
+        }
+      })
+    },
+    getData(item) {
+      var data = { deviceId: item.deviceId }
+      this.api.wxgetpermission(data).then(res => {
+        if (res.data.code == 200) {
+          this.tableData = res.data.data
+          this.deviceId=item.deviceId
+        }
+      })
+    },
+    confirmBtn() {
+      this.loading = this.$loading({
+        lock: true,
+        text: '加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      var data = {...this.nowData,deviceId:this.deviceId}
+              this.api.updatewxgetpermission(data).then(res => {
+          this.loading.close()
+          if (res.data.code == 200) {
+            this.dataInit()
+            this.$message.success(res.data.msg);
+            this.addModel = false
+          } else {
+            this.$message.error(res.data.msg);
+            this.addModel = false
+          }
+        })
+    },
+    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/manage/userInfoControl.vue

@@ -0,0 +1,471 @@
+<template>
+  <div class="videoManage manage-page">
+    <div class="flex-view flex-title">
+      <div class="table-title">
+        <img src="../../assets/manageImg/userInfoControl.png" alt="">用户信息管理
+      </div>
+      <div class="table-title-btn blue" @click="openModel({}, 0)">
+        <img src="../../assets/manageImg/add-btn.png" alt="">添加
+      </div>
+    </div>
+    <div class="flex-view ">
+      <div class="manage-input  w-180">
+        <span class="input-title">关键字查询</span>
+        <input class="search-input" type="text" v-model="searchName" placeholder="">
+      </div>
+      <div class="table-title-btn blue" @click="dataInit">
+        查询
+      </div>
+    </div>
+    <div class="table-view">
+      <el-table :data="tableList" :row-class-name="tableRowClassName" height="540" style="width: 100%">
+        <el-table-column prop="userName" v-model="nowData.userName" label="用户名">
+        </el-table-column>
+        <el-table-column prop="nickName" v-model="nowData.nickName" label="昵称">
+        </el-table-column>
+        <el-table-column prop="phonenumber" v-model="nowData.phonenumber" label="手机号">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <div class="table-flex">
+              <div class="table-operate blue" @click="openModel(scope.row, 1)">
+                <img src="../../assets/manageImg/table-edit.png" alt="">编辑
+              </div>
+              <div class="table-operate red" @click="openPassword(scope.row, 1)">
+                <img src="../../assets/manageImg/table-edit1.png" alt="">修改密码
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
+        :page-sizes="[10, 20, 50, 100, 200, 500, 1000, 1500]" :page-size="pageSize"
+        layout="->,total, sizes, prev, pager, next, jumper" :total="total">
+      </el-pagination>
+    </div>
+    <el-dialog title="提示" top="10vh" :visible.sync="passwordModel" width="460px" class="vrcode-model manage-model"
+      :append-to-body="true">
+      <div class="vrcode-model-title">
+        修改密码
+      </div>
+      <div class="vrcode-content">
+        <div class="manage-left">
+          <div class="manage-input  w-400">
+            <div class="input-title">原密码</div>
+            <input type="text" v-model="pwdData.oldPassword" placeholder="请输入原密码">
+          </div>
+          <div class="manage-input  w-400">
+            <div class="input-title">新密码</div>
+            <input type="text" v-model="pwdData.password" placeholder="请输入新密码">
+          </div>
+          <div class="manage-input  w-400">
+            <div class="input-title">确认密码</div>
+            <input type="text" v-model="confirmPwd" placeholder="请输入确认密码">
+          </div>
+        </div>
+        <!-- <div class="manage-right">
+           
+              </div> -->
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="vrcode-btn blue-btn w-100" @click="confirmPwdBtn">确定</div>
+        <div class="vrcode-btn cancle-btn w-100" @click="passwordModel = false">取消</div>
+      </span>
+    </el-dialog>
+    <el-dialog title="提示" top="10vh" :visible.sync="addDeviceModel" width="460px" class="vrcode-model manage-model"
+      :append-to-body="true" :close-on-click-modal="false">
+      <div class="vrcode-model-title">
+        添加设备
+      </div>
+      <div class="vrcode-content">
+        <div class="manage-left">
+          <div class="manage-input  w-400">
+            <div class="input-title">设备code码</div>
+            <input type="text" v-model="openData.deviceId" placeholder="请输入设备code码">
+          </div>
+          <!-- <div class="manage-input  w-400">
+            <div class="input-title">设备类型</div>
+            <input type="text" v-model="openData.password" placeholder="请输入新密码">
+          </div> -->
+          <div class="manage-input-sel w-400" style="margin-right: 0;">
+            <div class="input-title">设备类型</div>
+            <el-dropdown @command="handleCommand1">
+              <div class="el-dropdown-link">
+                <input v-model="deviceType" type="text" class="input-input" placeholder="请选择设备类型">
+                <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
+              </div>
+              <el-dropdown-menu slot="dropdown" class="manage-dropdown w-400">
+                <el-dropdown-item v-for="item, index in deviceSel
+                " :key="index" :command="item.label">{{ item.label }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <div class="manage-input  w-400">
+            <div class="input-title">排序</div>
+            <input type="text" v-model="openData.equipmentStatu" placeholder="请输入排序">
+          </div>
+        </div>
+        <!-- <div class="manage-right">
+           
+              </div> -->
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <div class="vrcode-btn blue-btn w-100" @click="addDevice">确定</div>
+        <div class="vrcode-btn cancle-btn w-100" @click="addDeviceModel = false">取消</div>
+      </span>
+    </el-dialog>
+    <el-dialog title="提示" top="10vh" :visible.sync="addModel" width="760px" class="vrcode-model manage-model"
+      :append-to-body="true" :close-on-click-modal="false">
+      <div class="vrcode-model-title">
+        {{ modelName }}
+      </div>
+      <div class="vrcode-content">
+        <div class="manage-left">
+          <div class="manage-input w-350">
+            <div class="input-title">用户名</div>
+            <input type="text" v-model="nowData.userName" placeholder="请输入用户名">
+          </div>
+          <div class="manage-input w-350">
+            <div class="input-title">手机号</div>
+            <input type="text" v-model="nowData.phonenumber" placeholder="请输入手机号">
+          </div>
+        </div>
+        <div class="manage-right">
+          <div class="manage-input  w-350">
+            <div class="input-title">昵称</div>
+            <input type="text" v-model="nowData.nickName" placeholder="请输入昵称">
+          </div>
+          <div class="manage-input-sel w-350" style="margin: 0;">
+            <div class="input-title">角色</div>
+            <el-dropdown @command="handleCommand">
+              <div class="el-dropdown-link">
+                <input v-model="role" type="text" class="input-input" placeholder="请选择角色">
+                <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
+              </div>
+              <el-dropdown-menu slot="dropdown" class="manage-dropdown w-350">
+                <el-dropdown-item v-for="item, index in typeSelList
+                " :key="index" :command="item.label">{{ item.label }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <!-- <div class="manage-input  w-180">
+            <div class="input-title">关联设备ID</div>
+            <input type="text" :title="nowData.device" v-model="nowData.device" disabled placeholder="请输入关联设备ID">
+          </div> -->
+        </div>
+
+      </div>
+      <div class="vrcode-content" style="padding-top: 0;" v-if="modelName!='添加'">
+        <div class="manage-left">
+
+        </div>
+        <div class="manage-right">
+          <div class="table-title-btn blue" @click="openaddDeviceModel">
+            添加
+          </div>
+        </div>
+      </div>
+      <div class="table-view" style="margin-top: 5px;"  v-if="modelName!='添加'">
+        <el-table :data="nowData.equipments" :row-class-name="tableRowClassName" height="300" style="width: 100%">
+          <el-table-column prop="deviceId" v-model="nowData.userName" label="设备code码">
+          </el-table-column>
+          <el-table-column prop="equipmentName" v-model="nowData.nickName" label="设备类型">
+            <template slot-scope="scope">
+              <div>{{ getEquipmentName(scope.row.equipmentName) }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="equipmentStatu" v-model="nowData.phonenumber" label="排序">
+          </el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <div class="table-flex">
+                <el-popconfirm @confirm="delDevice(scope.row, scope.$index)" title="这一段内容确定删除吗？" icon-color="red">
+                  <div class="table-operate red" slot="reference">
+                    <img src="../../assets/manageImg/table-delete.png" alt="">删除
+                  </div>
+                </el-popconfirm>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="vrcode-btn blue-btn w-100" @click="confirmEdit">确定</div>
+        <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">取消</div>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      currentPage: 1,
+      pageSize: 10,
+      tableList: [],
+      total: 0,
+      modelName: '添加',
+      addModel: false,//编辑弹窗
+      passwordModel: false,//修改密码弹窗
+      addDeviceModel: false,//添加设备弹窗
+      nowData: {
+      },
+      role: '',
+
+      openData: {},
+      searchName: '',
+      deviceList: [],
+      pwdData: {
+        "oldPassword": "",
+        "password": "",
+        "id": ''
+      },
+      confirmPwd: '',
+      typeSelList: [{ label: '管理员', value: 1, }, { label: '用户', value: 2, }],
+
+      deviceType:'',
+      deviceSel: [{ label: '控制器', value: 10, }, { label: '施肥机', value: 1, }, { label: '气象站', value:30, }],
+    }
+  },
+  mounted() { this.dataInit() },
+  methods: {
+    dataInit() {
+
+      this.pageSize = 10
+      this.currentPage = 1
+      setTimeout(() => {
+        this.getData()
+      }, 0);
+    },
+    addDevice() {
+      if (!this.openData.deviceId) {
+        this.$message.error('设备code码还未填写');
+        return
+      }
+      if (!this.openData.equipmentName) {
+        this.$message.error('设备类型还未选择');
+        return
+      }
+      if (!this.openData.equipmentStatu) {
+        this.$message.error('排序还未填写');
+        return
+      }
+      // if(this.modelName=='添加'){
+      //   this.nowData.equipments.push(this.openData)
+       
+      // }else{
+       
+      // }
+        this.api.addUserByid({...this.openData,userId:this.nowData.id}).then(res=>{
+        
+          if (res.data.code == 200) {
+            this.nowData.equipments.push({...this.openData,userId:this.nowData.id})
+          this.addDeviceModel=false
+          this.getData()
+          this.$message.success(res.data.msg);
+          
+        } else {
+          this.$message.error(res.data.msg);
+        }
+        })
+
+    },
+    //弹窗删除设备
+    delDevice(item, index) {
+      var data = { deviceId: item.deviceId }
+
+      this.api.delUserByid(data).then(res => {
+        if (res.data.code == 200) {
+          this.nowData.equipments.splice(index, 1)
+          this.getData()
+          this.$message.success(res.data.msg);
+          
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      })
+    },
+    getEquipmentName(e) {
+      if (e == 10) {
+        return '控制器'
+      } else if (e == '1') {
+        return '施肥机'
+      } else if (e == '30') {
+        return '气象站'
+      } else {
+        return ''
+      }
+    },
+    getData() {
+      var data = {
+        page: this.currentPage,
+        pageSize: this.pageSize,
+        nickName: this.searchName
+      }
+      this.loading = this.$loading({
+        lock: true,
+        text: '加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      this.api.adminAll(data).then(res => {
+        this.loading.close()
+        if (res.data.code == 200) {
+          this.tableList = res.data.data.user
+          this.total = res.data.data.total
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      })
+    },
+    confirmEdit() {
+      if (!this.nowData.userName) {
+        this.$message.error('用户名还未填写');
+        return
+      }
+      if (!this.nowData.phonenumber) {
+        this.$message.error('手机号还未填写');
+        return
+      }
+      if (!this.nowData.nickName) {
+        this.$message.error('昵称还未填写');
+        return
+      }
+      if (!this.nowData.role) {
+        this.$message.error('角色还未选择');
+        return
+      }
+    
+      if (this.modelName == '添加') {
+        this.api.addUser(this.nowData).then(res=>{
+          if (res.data.code == 200) {
+            this.getData()
+            this.$message.success(res.data.msg);
+            this.addModel = false
+          } else {
+            this.$message.error(res.data.msg);
+            this.addModel = false
+          }
+        })
+      } else {
+        if (!this.nowData.equipments.length) {
+        this.$message.error('请添加一个设备');
+        return
+      }
+        this.api.updateUser(this.nowData).then(res => {
+          if (res.data.code == 200) {
+            this.getData()
+            this.$message.success(res.data.msg);
+            this.addModel = false
+          } else {
+            this.$message.error(res.data.msg);
+            this.addModel = false
+          }
+        })
+      }
+
+    },
+    getRole(e) {
+      if (e == '管理员') {
+        return 1
+      } else {
+        return 2
+      }
+    },
+    handleCommand(e) {
+      this.nowData.role = this.getRole(e)
+      this.role = e
+    },
+    getDeviceType(e) {
+      if (e == '控制器') {
+        return 10
+      } else if(e == '施肥机'){
+        return 1
+      } else if(e == '气象站'){
+        return 30
+      }
+    },
+    handleCommand1(e) {
+      this.openData.equipmentName = this.getDeviceType(e)
+      this.deviceType = e
+    },
+    confirmPwdBtn() {
+      if (this.confirmPwd != this.pwdData.password) {
+        this.$message.error('两次密码不一致');
+        return
+      }
+      this.api.updatePwd(this.pwdData).then(res => {
+        if (res.data.code == 200) {
+          this.$message.success(res.data.msg);
+          this.passwordModel = false
+        } else {
+          this.$message.error(res.data.msg);
+          this.passwordModel = false
+        }
+      })
+    },
+    openaddDeviceModel(){
+      this.addDeviceModel = true
+      this.openData={}
+    },
+    openModel(item, type) {
+      if (type == 0) {
+        this.modelName = '添加'
+        this.addModel = true
+        this.nowData = {
+          equipments: [],
+        }
+        this.role = ''
+      } else {
+        this.modelName = '编辑'
+        this.addModel = true
+
+        // const deviceIds = this.deviceList.map(device => device.deviceId);
+
+        // // 使用 join 方法将 deviceId 连接成一个字符串，以逗号隔开
+        // const deviceIdString = deviceIds.join(',');
+        this.nowData = JSON.parse(JSON.stringify(item))
+        if (this.nowData.role == 1) {
+          this.role = '管理员'
+        } else {
+          this.role = '用户'
+        }
+        if(!this.nowData.role){
+          this.nowData.role=2
+        }
+      }
+    },
+    openPassword(item) {
+      this.pwdData = {
+        "oldPassword": "",
+        "password": "",
+        "id": item.id
+      }
+      this.passwordModel = true
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      setTimeout(() => {
+        this.getData()
+      }, 0);
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      setTimeout(() => {
+        this.getData()
+      }, 0);
+    },
+    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/manage/videoManage.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="videoManage manage-page">
+    <div class="flex-view flex-title">
+      <div class="table-title">
+        <img src="../../assets/manageImg/videoManage.png" alt="">摄像头信息管理
+      </div>
+      <div class="table-title-btn blue" @click="addModel=true">
+        <img src="../../assets/manageImg/add-btn.png" alt="">添加
+      </div>
+    </div>
+    <div class="table-view">
+      <el-table :data="tableData" :row-class-name="tableRowClassName" height="620" style="width: 100%">
+        <el-table-column prop="data1" label="摄像头名称">
+        </el-table-column>
+
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <div class="table-flex">
+              <div class="table-operate blue"  @click="addModel=true">
+                <img src="../../assets/manageImg/table-edit.png" alt="">编辑
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-dialog title="提示" top="10vh" :visible.sync="addModel" width="560px" class="vrcode-model manage-model" :append-to-body="true">
+            <div class="vrcode-model-title">
+              编辑
+            </div>
+            <div class="vrcode-content">
+              <div class="manage-left">
+                <div class="manage-input">
+                        <div class="input-title">摄像头名称</div>
+                        <input type="text" placeholder="请输入设备code码">
+                    </div>
+                    <div class="manage-input">
+                        <div class="input-title">公司名称</div>
+                        <input type="text" placeholder="请输入品种">
+                    </div>
+                
+              </div>
+              <div class="manage-right">
+                <div class="manage-input">
+                        <div class="input-title">摄像头appkey</div>
+                        <input type="text" placeholder="请输入设备code码">
+                    </div>
+                    <div class="manage-input">
+                        <div class="input-title">摄像头secert</div>
+                        <input type="text" placeholder="请输入品种">
+                    </div>
+              </div>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <div class="vrcode-btn blue-btn w-100" @click="addModel = false">确定</div>
+                <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">取消</div>
+            </span>
+        </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tableData: [{ data1: 'AD548695' }],
+      addModel:false,
+    }
+  },
+  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/manage/weatherData.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="videoManage manage-page ">
+    <div class="flex-view flex-title">
+      <div class="table-title">
+        <img src="../../assets/manageImg/deviceManage.png" alt="">设备绑定气象站数据
+      </div>
+      <div class="table-title-btn blue" @click="openModel({}, 0)">
+        <img src="../../assets/manageImg/add-btn.png" alt="">添加
+      </div>
+    </div>
+    <div class="table-view">
+      <el-table :data="tableData" :row-class-name="tableRowClassName" height="620" style="width: 100%">
+        <el-table-column prop="deviceId" label="关联气象站设备code码">
+        </el-table-column>
+        <!-- <el-table-column prop="data2" label="关联气象站设备名称">
+        </el-table-column> -->
+        <el-table-column prop="deviceName" label="关联气象站名称">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <div class="table-flex">
+              <div class="table-operate blue" @click="openModel(scope.row, 1)">
+                <img src="../../assets/manageImg/table-edit.png" alt="">编辑
+              </div>
+              <el-popconfirm @confirm="confirmDel(scope.row)" title="这一段内容确定删除吗？" icon-color="red">
+                <div class="table-operate red" slot="reference">
+                  <img src="../../assets/manageImg/table-delete.png" alt="">删除
+                </div>
+              </el-popconfirm>
+
+            </div>
+
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-dialog title="提示" top="10vh" :visible.sync="addModel" width="564px" class="vrcode-model manage-model"
+      :append-to-body="true">
+      <div class="vrcode-model-title">
+        {{ modelName }}
+      </div>
+      <div class="vrcode-content">
+        <div class="manage-left">
+          <!-- <div class="manage-input">
+            <div class="input-title">关联气象站设备code码</div>
+            <input type="text" v-model="nowData.deviceId" :disabled="modelName == '编辑' ? true : false"
+              placeholder="请输入设备code码">
+          </div> -->
+          <div class="manage-input-sel">
+            <div class="input-title">关联气象站设备code码</div>
+            <el-dropdown @command="handleCommand">
+              <div class="el-dropdown-link">
+                <input v-model="nowData.deviceId" type="text" class="input-input" placeholder="请选择气象站设备code码">
+                <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
+              </div>
+              <el-dropdown-menu slot="dropdown" class="manage-dropdown">
+                <el-dropdown-item v-for="item, index in typeSelList
+                " :key="index" :command="item.deviceId">{{ item.deviceTypeName}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </div>
+        <div class="manage-right">
+          <div class="manage-input">
+            <div class="input-title">关联气象站名称</div>
+            <input type="text" v-model="nowData.deviceName" placeholder="请输入气象站名称">
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="vrcode-btn blue-btn w-100" @click="confirmBtn">确定</div>
+        <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">取消</div>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tableData: [],
+      addModel: false,
+      nowData: { deviceId: '', deviceName: '' },
+      modelName: '添加',
+      typeSelList: [],
+      TypeSel: '',
+      selId:'',
+
+    }
+  },
+  mounted() { this.dataInit() },
+  methods: {
+    dataInit() {
+
+      var user = JSON.parse(localStorage.getItem('userInfo'))
+      this.api.selUserbyid(user.userid).then(res => {
+        this.typeSelList=[] 
+        if (res.data.code == 200) {
+          this.tableData = res.data.data.equipments
+          res.data.data.devices.forEach((el,index)=>{
+            if(el.deviceName==10){
+              this.typeSelList.push(el)
+            }
+          })
+        }
+      })
+    },
+    openModel(item, type) {
+      if (type == 0) {
+        this.modelName = '添加'
+        this.addModel = true
+        this.nowData= { deviceId: '', deviceName: '' }
+      } else {
+        this.modelName = '编辑'
+        this.nowData = JSON.parse(JSON.stringify(item))
+        this.addModel = true
+      }
+    },
+    confirmBtn() {
+      this.loading = this.$loading({
+        lock: true,
+        text: '加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      var user = JSON.parse(localStorage.getItem('userInfo'))
+      var data = { ...this.nowData, userId: user.userid }
+      if (this.modelName == '编辑') {
+        this.api.updatephoneeqData(data).then(res => {
+          this.loading.close()
+          if (res.data.code == 200) {
+            this.dataInit()
+            this.addModel = false
+          } else {
+            this.$message.error(res.data.msg);
+            this.addModel = false
+          }
+        })
+      } else {
+        this.api.addphoneeqData(data).then(res => {
+          this.loading.close()
+          if (res.data.code == 200) {
+            this.dataInit()
+            this.addModel = false
+          } else {
+            this.$message.error(res.data.msg);
+            this.addModel = false
+          }
+        })
+      }
+    },
+    getData1(data) {
+            var name = ''
+            this.typeSelList.forEach((el, index) => {
+                if (el.deviceId == data) {
+                    name = el.deviceTypeName
+                }
+            })
+            return name
+        },
+    handleCommand(e) {
+     this.nowData.deviceId= e
+},
+confirmDel(item){
+  var data={id:item.id}
+  this.api.delphoneeqData(data).then(res=>{
+    if (res.data.code == 200) {
+            this.dataInit()
+            this.$message.success(res.data.msg);
+          } else {
+            this.$message.error(res.data.msg);
+          }
+  })
+},
+    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/realTime.vue

@@ -528,8 +528,8 @@ export default {
             //选择内容
             typeSelList: [{ name: '1#平均空气温度', value: 1, },
             { name: '2#平均空气温度', value: 2, },
-            { name: '1#光亮度', value: 3, },
+            { name: '1#平均光亮度', value: 3, },
-            { name: '1#二氧化碳', value: 4, },
+            { name: '1#平均二氧化碳', value: 4, },
             { name: '1#平均土壤温度', value: 5, },
             { name: '1#平均土壤湿度', value: 6, },],
             typeSelList1: [{ name: '大于(>)', value: 1, },

src/views/page/videoMonitoring.vue

@@ -98,6 +98,26 @@ export default {
                 that.dataInit();
 
 
+            }, 0);
+        },
+        '$store.state.equipmentIndex'(newVal, oldVal) {
+            const that = this;
+            const store = this.$store.state
+            this.indexs = newVal;
+            this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
+            this.deviceName = store.equipmentList[this.indexs - 1].deviceName
+            this.deviceState = store.equipmentList[this.indexs - 1].deviceState
+            clearInterval(this.statusInterval) && this.statusInterval
+            setTimeout(() => {
+
+                if (this.player) {
+                    this.player.stop()
+                    that.player.destroy()
+                    that.player = null
+                }
+                that.dataInit();
+
+
             }, 0);
         },
     },