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

Reviewed-on: #69

package-lock.json

@@ -5062,8 +5062,7 @@
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-      "dev": true
     },
     "node_modules/emojis-list": {
       "version": "3.0.0",

package.json

@@ -13,6 +13,8 @@
     "element-ui": "^2.15.14",
     "ezuikit-js": "^7.7.7",
     "flv.js": "^1.6.2",
+    "html2canvas": "^1.4.1",
+    "qrcode": "^1.5.3",
     "video.js": "^7.21.5",
     "videojs-contrib-hls": "^5.15.0",
     "videojs-contrib-hls.js": "^3.2.0",

src/api/index.js

@@ -235,7 +235,27 @@ export default {
      //根据id添加status设备
      addPermissionStatus(id1,id2){
       return sendPostRequest(`/getcontrol/addStatepermission?deviceId=${id1}&Permissionid=${id2}`, '')
-    }
+    },
     
     
+
+    //二维码溯源
+    //查看农事作物信息
+    getAgriculturalInformation(data){
+      return sendGetRequest(`/code/getAgriculturalInformation`, data)
+    },
+    //查看种植计划
+    getplant(data){
+      return sendGetRequest(`/code/getplant`, data)
+    },
+     //查看农场信息管理
+     getcodeFarmInformationManagement(data){
+      return sendGetRequest(`/code/getcodeFarmInformationManagement`, data)
+    },
+
+    //上传图片
+    uploadImage(data){
+      return sendPostRequest(`/code/uploadImage`, data)
+    },
+    
 };

src/assets/css/main.css

@@ -30,6 +30,37 @@
   /*滚动条边角*/
 }
 
+.mobile-scroll {
+  overflow-y: auto;
+}
+
+.mobile-scroll::-webkit-scrollbar {
+  /*滚动条整体*/
+  width: 0px;
+  cursor: pointer;
+}
+
+.mobile-scroll::-webkit-scrollbar-track {
+  /*滚动条轨道*/
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.mobile-scroll::-webkit-scrollbar-thumb {
+  /*滚动条里面的滑块*/
+  width: 0px;
+  cursor: pointer;
+  background: #ccc;
+  border: 0px solid rgba(0, 0, 0, 0.1);
+}
+
+.mobile-scroll::-webkit-scrollbar-thumb:hover {
+  /*滚动条鼠标事件，鼠标放上去出现的事件*/
+}
+
+.mobile-scroll::-webkit-scrollbar-corner {
+  /*滚动条边角*/
+}
+
 .el-popconfirm__main,
 .el-date-table td span,
 .el-date-range-picker__header div {
@@ -2332,7 +2363,10 @@
   align-items: center;
 }
 
-.vrcode .el-menu, .el-submenu__title:hover, .el-menu-item:hover, .el-menu-item:focus {
+.vrcode .el-menu,
+.el-submenu__title:hover,
+.el-menu-item:hover,
+.el-menu-item:focus {
   background: transparent;
 }
 
@@ -2371,12 +2405,14 @@
   left: 10px;
 }
 
-.vrcode .el-submenu__title, .vrcode .el-menu-item {
+.vrcode .el-submenu__title,
+.vrcode .el-menu-item {
   display: flex;
   align-items: center;
 }
 
-.vrcode .el-submenu__title .img, .vrcode .el-menu-item .img {
+.vrcode .el-submenu__title .img,
+.vrcode .el-menu-item .img {
   width: 16px;
   height: 16px;
   display: flex;
@@ -2446,7 +2482,8 @@
   background: rgba(0, 47, 94, 0.35);
 }
 
-.vrcode-table .vrcode-table-view.table-view .el-table .el-table__cell, .vrcode-table .vrcode-table-view.table-view .el-table__row {
+.vrcode-table .vrcode-table-view.table-view .el-table .el-table__cell,
+.vrcode-table .vrcode-table-view.table-view .el-table__row {
   height: 60px;
 }
 
@@ -2588,6 +2625,7 @@
   font-family: Microsoft YaHei;
   position: relative;
   font-weight: bold;
+  text-align: left;
 }
 
 .vrcode-model .vrcode-model-title::after {
@@ -2601,36 +2639,6 @@
   top: 4px;
 }
 
-.vrcode-model .vrcode-input {
-  width: 300px;
-  margin-right: 30px;
-  margin-bottom: 15px;
-}
-
-.vrcode-model .vrcode-input .input-title {
-  font-size: 16px;
-  font-family: Microsoft YaHei;
-  font-weight: 400;
-  color: #FFFFFF;
-  margin-bottom: 7px;
-}
-
-.vrcode-model .vrcode-input input {
-  width: 300px;
-  height: 44px;
-  background: rgba(90, 210, 255, 0.25);
-  border: 2px solid rgba(86, 209, 255, 0.5);
-  font-size: 16px;
-  padding-left: 15px;
-  font-family: Microsoft YaHei;
-  font-weight: 400;
-  color: #FFFFFF;
-}
-
-.vrcode-model .vrcode-input input::placeholder {
-  color: #92B1D0;
-}
-
 .vrcode-model .vrcode-input-sel {
   margin-right: 30px;
   margin-bottom: 15px;
@@ -2772,77 +2780,6 @@
   margin-left: 8px;
 }
 
-.vrcode-model .vrcode-selimage {
-  width: 100%;
-}
-
-.vrcode-model .vrcode-selimage > .title {
-  margin-bottom: 7px;
-}
-
-.vrcode-model .vrcode-selimage .sel-image-view {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.vrcode-model .vrcode-selimage .sel-image-view #sel-img {
-  display: none;
-}
-
-.vrcode-model .vrcode-selimage .sel-image-view .sel-div {
-  width: 130px;
-  height: 130px;
-  margin-right: 30px;
-  background: rgba(86, 209, 255, 0.25);
-  border: 1px dashed #56D1FF;
-  cursor: pointer;
-  margin-bottom: 15px;
-  flex-shrink: 0;
-}
-
-.vrcode-model .vrcode-selimage .sel-image-view .sel-div.sel-img {
-  position: relative;
-  padding: 10px;
-}
-
-.vrcode-model .vrcode-selimage .sel-image-view .sel-div.sel-img:hover .del-img {
-  display: flex;
-}
-
-.vrcode-model .vrcode-selimage .sel-image-view .sel-div.sel-img .el-image {
-  width: 100%;
-  height: 100%;
-}
-
-.vrcode-model .vrcode-selimage .sel-image-view .sel-div.sel-img .del-img {
-  width: 110px;
-  height: 110px;
-  background: rgba(0, 0, 0, 0.3);
-  display: none;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 10px;
-  left: 10px;
-}
-
-.vrcode-model .vrcode-selimage .sel-image-view .sel-div.sel-img .del-img img {
-  width: 44px;
-  height: 44px;
-}
-
-.vrcode-model .vrcode-selimage .sel-image-view .sel-div.sel-image-sel {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.vrcode-model .vrcode-selimage .sel-image-view .sel-div.sel-image-sel > img {
-  width: 30px;
-  height: 30px;
-}
-
 .vrcode-model .vrcode-title {
   width: 100%;
   margin-bottom: 15px;
@@ -2897,6 +2834,107 @@
   min-height: 30vh;
 }
 
+.vrcode-input {
+  width: 300px;
+  margin-right: 30px;
+  margin-bottom: 15px;
+}
+
+.vrcode-input .input-title {
+  font-size: 16px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #FFFFFF;
+  margin-bottom: 7px;
+}
+
+.vrcode-input input {
+  width: 300px;
+  height: 44px;
+  background: rgba(90, 210, 255, 0.25);
+  border: 2px solid rgba(86, 209, 255, 0.5);
+  font-size: 16px;
+  padding-left: 15px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #FFFFFF;
+}
+
+.vrcode-input input::placeholder {
+  color: #92B1D0;
+}
+
+.vrcode-selimage {
+  width: 100%;
+}
+
+.vrcode-selimage > .title {
+  margin-bottom: 7px;
+}
+
+.vrcode-selimage .sel-image-view {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.vrcode-selimage .sel-image-view #sel-img {
+  display: none;
+}
+
+.vrcode-selimage .sel-image-view .sel-div {
+  width: 130px;
+  height: 130px;
+  margin-right: 30px;
+  background: rgba(86, 209, 255, 0.25);
+  border: 1px dashed #56D1FF;
+  cursor: pointer;
+  margin-bottom: 15px;
+  flex-shrink: 0;
+}
+
+.vrcode-selimage .sel-image-view .sel-div.sel-img {
+  position: relative;
+  padding: 10px;
+}
+
+.vrcode-selimage .sel-image-view .sel-div.sel-img:hover .del-img {
+  display: flex;
+}
+
+.vrcode-selimage .sel-image-view .sel-div.sel-img .el-image {
+  width: 100%;
+  height: 100%;
+}
+
+.vrcode-selimage .sel-image-view .sel-div.sel-img .del-img {
+  width: 110px;
+  height: 110px;
+  background: rgba(0, 0, 0, 0.3);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+
+.vrcode-selimage .sel-image-view .sel-div.sel-img .del-img img {
+  width: 44px;
+  height: 44px;
+}
+
+.vrcode-selimage .sel-image-view .sel-div.sel-image-sel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vrcode-selimage .sel-image-view .sel-div.sel-image-sel > img {
+  width: 30px;
+  height: 30px;
+}
+
 .dialog-footer {
   display: flex;
   align-items: center;
@@ -2982,6 +3020,54 @@
   -webkit-text-fill-color: transparent;
 }
 
+.productTraceability .productTraceability-content {
+  margin-top: 135px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.productTraceability .productTraceability-content > div {
+  margin: 0 45px;
+  cursor: pointer;
+}
+
+.productTraceability .productTraceability-content .content-1 {
+  width: 200px;
+  height: 316px;
+  background: url(../img/productTraceability-1.png) no-repeat center;
+  background-size: 100% 100%;
+}
+
+.productTraceability .productTraceability-content .content-1:hover {
+  background: url(../img/productTraceability-1hover.png) no-repeat center;
+  background-size: 100% 100%;
+}
+
+.productTraceability .productTraceability-content .content-2 {
+  width: 240px;
+  height: 316px;
+  background: url(../img/productTraceability-2.png) no-repeat center;
+  background-size: 100% 100%;
+}
+
+.productTraceability .productTraceability-content .content-2:hover {
+  background: url(../img/productTraceability-2hover.png) no-repeat center;
+  background-size: 100% 100%;
+}
+
+.productTraceability .productTraceability-content .content-3 {
+  width: 200px;
+  height: 316px;
+  background: url(../img/productTraceability-3.png) no-repeat center;
+  background-size: 100% 100%;
+}
+
+.productTraceability .productTraceability-content .content-3:hover {
+  background: url(../img/productTraceability-3hover.png) no-repeat center;
+  background-size: 100% 100%;
+}
+
 .model-title {
   width: 100%;
   text-align: center;
@@ -3026,3 +3112,197 @@
   background-size: 100% 100%;
   cursor: pointer;
 }
+
+.setsuyuan {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.setsuyuan .setsuyuan-page {
+  width: 375px;
+  height: 736px;
+  background: url(../img/setsuyuan-page.png) no-repeat center;
+  background-size: 100% 100%;
+  padding: 22px 23px 21px 24px;
+}
+
+.setsuyuan .setsuyuan-page .mobile-page {
+  width: 100%;
+  border-radius: 30px;
+  height: 100%;
+  overflow: auto;
+}
+
+.setsuyuan .setsuyuan-page .mobile-page > div {
+  min-height: 100%;
+}
+
+.setsuyuan .setsuyuan-page .mobile-page .mobile-img {
+  width: 100%;
+  height: auto;
+}
+
+.setsuyuan .setsuyuan-page .mobile-page .mobile-top {
+  width: 100%;
+  height: 240px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-size: 100% 100% !important;
+}
+
+.setsuyuan .setsuyuan-page .mobile-page .mobile-top > div {
+  font-family: Microsoft Yahei;
+  font-size: 30px;
+  white-space: nowrap;
+}
+
+.setsuyuan .setsuyuan-page .mobile-page .mobile-content {
+  width: 100%;
+  min-height: 453px;
+  text-align: center;
+  padding: 35px 10px 20px;
+}
+
+.setsuyuan .setsuyuan-page .mobile-page .mobile-view {
+  position: relative;
+  margin-bottom: 30px;
+}
+
+.setsuyuan .setsuyuan-page .mobile-page .mobile-view .mobile-view-content {
+  width: 100%;
+  box-sizing: border-box;
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px 10px 10px 10px;
+  position: relative;
+}
+
+.setsuyuan .setsuyuan-page .mobile-page .mobile-view .mobile-text {
+  font-size: 14px;
+  text-align: left;
+  color: #000;
+}
+
+.setsuyuan .setsuyuan-page .mobile-page .mobile-content-title {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAAAfCAYAAAA4LFWUAAACiElEQVR4Xu2bvU8UURTFz51Ag6wFauOfIWurnUtoiI2JEEuFkIBKokRpaDYIFmiIBpeSBI2VdkAHLR9/Bo26haPbwL5LZmZn3I+ZjUvyHnOTO+XOzrvnnfvLm5PdXEK3a3t+jLz+52C+DWCg63f1plQHaiA6YHO6ipHl71mboKwb3u6rZWbvpdTdq+7eHSAyK+be0nzak+mgbC+MEeFb76X0CekOcN3cx+hSR+9TQaGdhT0Ad6RvWvVfyIF9LpXvtj/ZCcrms1t0Y+AIlPlWulB1fUiIA8zgH7VhPHp33Ky4gwZva2adr12dFLItlWnBAfr1+5MZX5vKBuXr9CCd9p3geqFgob4uKcWBn77P/Wc38eDjn1hy64nyeeYxgSoYUk6k9NSKzqoPBj/Bw7WNVFBo6+kBiIsKihX75Sxa9QGmQx5/H/x+Fl7/TpQgxPaZo/BTPVHkNNWG0gAUAHzmJaE2ASUMsURRiFVQbNgvZ80GKMSchNoIlDjEeojCiYIip6k2lDZAgUESaiNQ4hAbF1VQbNgvZ80YlOD1Y+qTmPhQCUFJQqyCIqeZNpU2gRKHWkJziFVQbNovZ+1mUMJTBUVqCbEKipxm2lTaBkoQaglfZuc8boTYRnEeKiza1KFr59sBqvot/TcEP+vfY873VlSdTQe4VO7gQkGx6bjQtRUUoY1zLVtBce240HoKitDGuZatoLh2XGg9BUVo41zLVlBcOy60noIitHGuZfcCyl+dDHTdntzUq3GpfKVdjc715KY/uRHyn3M9gV6dFMxN11wL6WlSMBDn7bxeYdAL10K13uU5QKi/NaU3qfPm3ccBo5NlDkBRM8vlNdBy5RqAQ66b1bSZ47j2Odyz15vs+mViAAAAAElFTkSuQmCC) no-repeat center;
+  width: 138px;
+  height: 31px;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  color: #fff;
+  z-index: 2;
+  font-size: 15px;
+  position: absolute;
+  top: -16px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.setsuyuan .page-content {
+  width: calc(100% - 400px) !important;
+}
+
+.setsuyuan .vrcode-selimage {
+  margin-top: 30px;
+}
+
+.setsuyuan .vrcode-selimage .sel-image-view .sel-div {
+  width: 200px;
+  height: 160px;
+}
+
+.setsuyuan .vrcode-selimage .sel-image-view .sel-div.sel-img .del-img {
+  width: 178px;
+  height: 138px;
+}
+
+.setsuyuan .setsuyuan-tips {
+  font-size: 16px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #FF9999;
+  margin: 0px 0 30px;
+}
+
+.setsuyuan .vrcode-input {
+  width: 100%;
+  margin-right: 0;
+}
+
+.setsuyuan .vrcode-input input {
+  width: 100%;
+  max-width: 800px;
+}
+
+.setsuyuan .setsuyuan-input {
+  display: flex;
+  margin-bottom: 15px;
+}
+
+.setsuyuan .setsuyuan-input .setsuyuan-input-name {
+  width: 120px;
+  padding-right: 20px;
+  text-align: right;
+  line-height: 40px;
+  white-space: nowrap;
+}
+
+.setsuyuan .setsuyuan-input .el-color-picker__trigger {
+  background: rgba(90, 210, 255, 0.25);
+  border: 2px solid rgba(86, 209, 255, 0.5);
+}
+
+.setsuyuan .save-btn {
+  width: 100px;
+  height: 40px;
+  background: #19ABFF;
+  border-radius: 3px;
+  font-size: 16px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #FFFFFF;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+  cursor: pointer;
+}
+
+.setsuyuan .setsuyuan-input-select {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  white-space: nowrap;
+  max-height: 50px;
+  margin-right: 20px;
+}
+
+.setsuyuan .setsuyuan-input-select .no-sel {
+  margin-right: 10px;
+  width: 35px;
+  height: 35px;
+  box-shadow: 0 0 15px rgba(53, 187, 247, 0.5) inset;
+  border: 1px solid rgba(0, 204, 255, 0.7);
+  border-radius: 50%;
+}
+
+.setsuyuan .setsuyuan-input-select .sel {
+  margin-right: 10px;
+  width: 35px;
+  height: 35px;
+  background: url(../image/radio.png) no-repeat center;
+  background-size: 100% 100%;
+}
+
+.el-button span {
+  color: #606266;
+}

src/router/index.js

@@ -165,6 +165,11 @@ const routes = [
       path: '/productTraceability',
       name: 'productTraceability',
       component: () => import('../views/vrcode/productTraceability.vue')
+    },
+    {
+      path: '/setsuyuan',
+      name: 'setsuyuan',
+      component: () => import('../views/vrcode/setsuyuan.vue')
     }]
   },
 ]

src/views/index.vue

@@ -72,6 +72,7 @@ export default {
                 { name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
                 //systemManage systemManage
                 { name: '管理', router: '', routerList: [''], img: require('../assets/image/header-img6.png') },
+                { name: '生成二维码', router: 'setsuyuan', index: 1, routerList: ['setsuyuan'], img: require('../assets/image/header-img4.png') },
                 { name: '大数据', router: 'largeScreen', routerList: ['largeScreen'], img: require('../assets/image/header-img8.png') }
             ],
                 

src/views/page/largeScreen1.vue

@@ -119,7 +119,7 @@
                     <div class="p_video">
                       <img :src="item.greenhouseImage" alt="" />
                     </div>
-                    <div class="text">温室{{ item.greenhouseName }}#</div>
+                    <div class="text">{{ item.greenhouseName }}</div>
                     <div class="line"></div>
                     <div class="detail">
                       <div class="d_item">
@@ -175,7 +175,7 @@
                     <div class="p_video">
                       <img :src="item.greenhouseImage" alt="" />
                     </div>
-                    <div class="text">温室{{ item.greenhouseName }}#</div>
+                    <div class="text">{{ item.greenhouseName }}</div>
                     <div class="line"></div>
                     <div class="detail">
                       <div class="d_item">
@@ -699,7 +699,7 @@ export default {
     getTopOrLeft1(id) {
       for(let i = 0; i < 26;i++){
         if(id == (i + 1)){
-          return `top:34%;left:${(74 - i * 3) < 15 ? 15 : (74 - i * 3)}%;transform: translate(-50%,-50%);`;
+          return `top:40%;left:${(74 - i * 3) < 15 ? 15 : (74 - i * 3)}%;transform: translate(-50%,-50%);`;
         }
       }
       // if (id == 1) {
@@ -792,11 +792,12 @@ export default {
 
       // })
       let userInfo = JSON.parse(localStorage.getItem("userInfo"));
-      this.dataInit(userInfo.userid);
 
       // 获取用户id权限
       this.get_user_getjurisdiction(userInfo.userid)
 
+      this.dataInit(userInfo.userid);
+
       let that = this;
       this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
       if (this.autoPlay == false) {
@@ -1244,8 +1245,8 @@ export default {
             }
 
             .pop_content1 {
-              width: 2.5rem;
+              width: 3.5rem;
-              height: 3rem;
+              height: 4.55rem;
               background: url("../../assets/img/pop_bg.png") center no-repeat;
               background-size: 100% 100%;
               overflow: hidden;
@@ -1264,7 +1265,7 @@ export default {
 
               .p_video {
                 width: 90%;
-                height: 1.2rem;
+                height: 1.82rem;
                 margin: 0.1rem auto 0;
 
                 >img {
@@ -1275,18 +1276,18 @@ export default {
 
               .text {
                 width: 100%;
-                height: 0.3rem;
+                height: 0.4rem;
-                font-size: 0.15rem;
+                font-size: 0.2rem;
                 font-family: AlimamaShuHeiTi-Bold;
                 font-weight: bold;
                 color: #f3fdff;
-                line-height: 0.3rem;
+                line-height: 0.4rem;
                 box-sizing: border-box;
-                padding-left: 0.15rem;
+                padding-left: 0.2rem;
               }
 
               .line {
-                width: 2.2rem;
+                width: 90%;
                 height: 0.01rem;
                 background: #51d4fa;
                 opacity: 0.5;
@@ -1295,31 +1296,31 @@ export default {
 
               .detail {
                 width: 100%;
-                height: 0.3rem;
+                height: 0.45rem;
                 display: flex;
                 align-items: center;
                 justify-content: space-evenly;
                 padding: 0 0.15rem;
 
                 .d_item {
-                  height: 0.2rem;
+                  height: 0.3rem;
                   background: rgba(81, 212, 250, 0.15);
                   border: 0.01rem solid rgba(106, 222, 255, 0.4);
                   border-radius: 0.02rem;
                   display: flex;
                   justify-content: center;
-                  align-items: center;
+                  // align-items: center;
                   box-sizing: border-box;
-                  padding: 0 0.05rem;
+                  padding: 0.05rem 0.05rem;
 
                   >img {
-                    width: 0.1rem;
+                    width: 0.2rem;
-                    height: 0.1rem;
+                    height: 0.2rem;
                     margin-right: 0.05rem;
                   }
 
                   >span {
-                    font-size: 0.12rem;
+                    font-size: 0.13rem;
                     font-family: MicrosoftYaHei;
                     font-weight: 400;
                     color: #d9effd;
@@ -1329,7 +1330,7 @@ export default {
 
               .grow {
                 width: 2.5rem;
-                height: 0.2rem;
+                height: 0.3rem;
                 background: url("../../assets/img/grow_bg.png") center no-repeat;
                 background-size: 100% 100%;
                 margin: 0 auto;
@@ -1338,20 +1339,20 @@ export default {
                 align-items: center;
 
                 >img {
-                  width: 0.15rem;
+                  width: 0.18rem;
-                  height: 0.15rem;
+                  height: 0.18rem;
                   margin-right: 0.05rem;
                 }
 
                 >span:nth-child(2) {
-                  font-size: 0.12rem;
+                  font-size: 0.13rem;
                   font-family: MicrosoftYaHei;
                   font-weight: 400;
                   color: #ffffff;
                 }
 
                 >span:nth-child(3) {
-                  font-size: 0.12rem;
+                  font-size: 0.13rem;
                   font-family: MicrosoftYaHei;
                   font-weight: 400;
                   color: #36ffd2;
@@ -1359,8 +1360,8 @@ export default {
               }
 
               .icon_item {
-                width: 95%;
+                width: 100%;
-                height: calc(100% - 2.22rem);
+                height: calc(100% - 3.22rem);
                 box-sizing: border-box;
                 padding: 0.1rem 0.15rem;
                 display: flex;
@@ -1369,14 +1370,14 @@ export default {
                 overflow: auto;
 
                 .icon_item_child {
-                  width: 50%;
+                  width: 33.33%;
-                  height: 45%;
+                  height: 33.33%;
                   display: flex;
                   margin-bottom: 0.05rem;
 
                   > img {
-                    width: 0.28rem;
+                    width: 0.4rem;
-                    height: 0.28rem;
+                    height: 0.4rem;
                     margin-right: 0.05rem;
                   }
 
@@ -1385,14 +1386,14 @@ export default {
                     flex-direction: column;
 
                     > span:nth-child(1) {
-                      font-size: 0.1rem;
+                      font-size: 0.12rem;
                       font-family: MicrosoftYaHei;
                       font-weight: bold;
                       color: #86d9ff;
                     }
 
                     > span:nth-child(2) {
-                      font-size: 0.11rem;
+                      font-size: 0.15rem;
                       font-family: AlibabaPuHuiTiB;
                       font-weight: bold;
                       color: #ffffff;

src/views/vrcode.vue

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

src/views/vrcode/productTraceability.vue

@@ -3,6 +3,11 @@
         <div class="productTraceability-title">
             <span>产品追溯</span>
         </div>
+        <div class="productTraceability-content">
+            <div class="content-1" @click="toRouter()"></div>
+            <div class="content-2" @click="toRouter('setsuyuan')"></div>
+            <div class="content-3" @click="toRouter()"></div>
+        </div>
     </div>
 </template>
 <script>
@@ -12,6 +17,11 @@ export default {
     },
     mounted() { },
     methods: {
+        toRouter(router){
+            if(router){
+                this.$router.push({ name: router })
+            }
+        },
     },
 
 }

src/views/vrcode/setsuyuan.vue

@@ -0,0 +1,265 @@
+<template>
+    <div class="setsuyuan" v-loading="loading"   element-loading-text="正在生成二维码"  element-loading-background="rgba(0, 0, 0, 0.5)">
+        <div class="page-content scroll">
+            <div class="table-title">
+                <img src="../../assets/img/setsuyuan.png" alt="" />
+                追溯内容设置
+            </div>
+            <div class="flex-view"></div>
+            <div class="vrcode-selimage">
+                <div class="title">顶部图片</div>
+                <div class="sel-image-view">
+                    <div class="sel-img sel-div" v-for="item, index in imgList" :key="index">
+                        <el-image :src="item"></el-image>
+                        <div class="del-img" @click="delImage(index)">
+                            <img src="../../assets/img/del-image.png" alt="">
+                        </div>
+                    </div>
+                    <label for="sel-img">
+                        <div class="sel-image-sel sel-div" v-if="imgList.length < 1">
+                            <img src="../../assets/img/add-image.png" alt="">
+                        </div>
+                    </label>
+                    <input ref="fileInput" type="file" multiple id="sel-img" accept="image/*" @change="handleImageChange" />
+                </div>
+            </div>
+
+            <div class="setsuyuan-tips">*上传图片大小应小于2M,建议尺寸为388x280</div>
+            <div class="vrcode-input">
+                <div class="input-title">第一行标题</div>
+                <input type="text" placeholder="请输入标题" v-model="title1">
+            </div>
+            <div class="vrcode-input">
+                <div class="input-title">第二行标题</div>
+                <input type="text" placeholder="请输入标题" v-model="title2">
+            </div>
+            <div class="setsuyuan-input">
+                <div class="setsuyuan-input-name">
+                    文字颜色
+                </div>
+                <el-color-picker v-model="color" show-alpha></el-color-picker>
+            </div>
+            <div class="setsuyuan-input">
+                <div class="setsuyuan-input-name">
+                    文字样式
+                </div>
+                <div class="setsuyuan-input-select">
+                    <div @click="select1 = !select1" :class="select1 ? 'sel' : 'no-sel'"></div>
+                    加粗
+                </div>
+                <div class="setsuyuan-input-select">
+                    <div @click="select2 = !select2" :class="select2 ? 'sel' : 'no-sel'"></div>
+                    斜体
+                </div>
+            </div>
+            <div class="setsuyuan-input">
+                <div class="setsuyuan-input-name"></div>
+                <div class="setsuyuan-input-select">
+                    <div @click="select3 = !select3" :class="select3 ? 'sel' : 'no-sel'"></div>
+                    显示阴影
+                </div>
+            </div>
+            <div class="setsuyuan-input">
+                <div class="setsuyuan-input-name">
+                    阴影颜色
+                </div>
+                <el-color-picker v-model="color1" show-alpha></el-color-picker>
+            </div>
+            <div class="setsuyuan-input">
+                <div class="setsuyuan-input-name">
+                    主体背景颜色
+                </div>
+                <el-color-picker v-model="color2" show-alpha></el-color-picker>
+            </div>
+            <div class="flex-view"></div>
+            <div class="save-btn" @click="captureScreenshot">保存</div>
+        </div>
+        <div class="setsuyuan-page">
+            <div class="mobile-page mobile-scroll">
+                <div ref="targetElement">
+                    <div class="mobile-top" :style="`background: url(${imgList[0]}) no-repeat center;`">
+                        <div class="title1"
+                            :style="`color: ${color};${select3 ? 'text-shadow:' + color1 + '3px -2px 0px;' : ''}font-style: ${select2 ? 'italic' : 'normal'};font-weight: ${select1 ? 'bold' : 'normal'};`">
+                            {{ title1 }}</div>
+                        <div class="title2"
+                            :style="`color: ${color};${select3 ? 'text-shadow:' + color1 + '3px -2px 0px;' : ''}font-style: ${select2 ? 'italic' : 'normal'};font-weight: ${select1 ? 'bold' : 'normal'};`">
+                            {{ title2 }}</div>
+                    </div>
+                    <div class="mobile-content" :style="`background-color: ${color2};`">
+                        <div class="mobile-view">
+                            <div class="mobile-content-title">农场信息</div>
+                            <div class="mobile-view-content">
+                                <template v-if="userDetail">
+                                    <div class="mobile-text">
+                                        联系人:{{ userDetail.linkman }}
+                                    </div>
+                                    <div class="mobile-text">
+                                        联系方式:{{ userDetail.contactInformation }}
+                                    </div>
+                                    <div class="mobile-text">
+                                        邮箱地址:{{ userDetail.email }}
+                                    </div>
+                                    <div class="mobile-text">
+                                        农场名称:{{ userDetail.organizationName }}
+                                    </div>
+                                    <div class="mobile-text">
+                                        农场地址:{{ userDetail.organizationAddress }}
+                                    </div>
+                                    <div class="mobile-text">
+                                        农场网址:{{ userDetail.organizationWebsite }}
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="mobile-view" v-for="item, index in plant">
+                            <div class="mobile-content-title">种植计划</div>
+                            <div class="mobile-view-content">
+                                <template v-if="item">
+                                    <div class="mobile-text">
+                                        名称:{{ item.plantingPlanShort }}
+                                    </div>
+                                    <div class="mobile-text">
+                                        价格:{{ item.numberOfSeeds }}
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <el-dialog class="vrcode-model" title="提示" :append-to-body="true" :visible.sync="qrModel" width="30%" :before-close="handleClose">
+            <div class="vrcode-image" style="text-align: center;">
+                <div class="vrcode-model-title" >
+                生成的二维码
+            </div>
+            <img :src="qrCodeUrl" alt="" style="width: 200px;height: 200px;margin-top: 20px;">
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="qrModel = false">关 闭</el-button>
+            </span>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import html2canvas from 'html2canvas';
+import QRCode from 'qrcode';
+
+export default {
+    data() {
+        return {
+            imgList: [require('../../assets/img/image.jpeg')],
+            title1: '智慧云温室',
+            title2: '追溯系统',
+            color: 'rgba(255,255,255,1)',
+            color1: 'rgba(19, 206, 102, 0.8)',
+            color2: 'rgba(19, 206, 102, 0.8)',
+            select1: false,
+            select2: true,
+            select3: false,
+            userDetail: null,//农场信息
+            plant: [],//计划
+            qrCodeUrl: '',//生成的二维码
+            qrModel: false,
+            loading: false,
+        }
+    },
+    mounted() {
+        this.dataInit()
+    },
+    methods: {
+        handleClose() {
+            this.qrCodeUrl = ''
+        },
+        dataInit() {
+            var userid = JSON.parse(localStorage.getItem('userInfo')).userid
+            var data = {
+                userId: userid
+            }
+            this.api.getAgriculturalInformation(data).then(res => {
+            })
+
+            this.api.getplant(data).then(res => {
+                if (res.data.code == 200) {
+                    this.plant = res.data.data
+                }
+            })
+
+            this.api.getcodeFarmInformationManagement(data).then(res => {
+                if (res.data.code == 200) {
+                    this.userDetail = res.data.data
+                }
+            })
+
+        },
+        async captureScreenshot() {
+            // 获取目标元素
+            this.loading = true
+            const targetElement = this.$refs.targetElement;
+
+            // 使用html2canvas生成截图
+            const canvas = await html2canvas(targetElement);
+
+            // 将canvas转为图片
+            const imageData = canvas.toDataURL('image/png')
+            var userid = JSON.parse(localStorage.getItem('userInfo')).userid
+            var data = {
+                userId: userid,
+                base64Data:imageData
+            }
+            setTimeout(() => {
+                this.loading = false
+            }, 5000);
+            // 创建一个新的窗口显示图片（可以根据需要进行其他操作，比如保存图片）
+            this.api.uploadImage(data).then(res=>{
+                if(res.data){
+                    this.generateQRCode(res.data)
+                }
+            })
+           
+            // const imageWindow = window.open();
+            // imageWindow.document.write(`<img src="${imageData}" alt="Screenshot"/>`);
+        },
+        async generateQRCode(imageData) {
+            const that = this
+            // 生成二维码的数据，这里假设是一个 base64 图片的数据
+
+            // 使用 qrcode 库生成二维码
+            QRCode.toDataURL(imageData)
+                .then(url => {
+                    this.qrCodeUrl = url;
+                    this.qrModel = true
+                        that.loading = false
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+
+        },
+        delImage(index) {
+            console.log('删除图片', index);
+            this.imgList.splice(index, 1);
+        },
+        handleImageChange(event) {
+            const files = event.target.files;
+            if (files.length > 0) {
+                for (let i = 0; i < files.length; i++) {
+                    const reader = new FileReader();
+
+                    reader.onload = (e) => {
+                        this.imgList.push(e.target.result);
+                    };
+
+                    reader.readAsDataURL(files[i]);
+                }
+                this.$refs.fileInput.value = '';
+            } else {
+                console.log(null);
+            }
+
+        }
+    },
+
+}
+</script>
+<style lang="scss"></style>