xiaomeng/wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pc-master #69

Merged
xiaomeng merged 5 commits from pc-master into portal 2023-12-10 12:24:08 +00:00
Conversation 0 Commits 5 Files Changed 24 +1350 -386
24 changed files with 1350 additions and 386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package-lock.json generated
View File

@ -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==",
"dev": true
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
},
"node_modules/emojis-list": {
"version": "3.0.0",

2
package.json
View File

@ -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",

22
src/api/index.js
View File

@ -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)
},
};

490
src/assets/css/main.css
View File

@ -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;
}

2
src/assets/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

815
src/assets/css/main.scss
View File

File diff suppressed because it is too large Load Diff

BIN
src/assets/img/01(1).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 62 KiB

BIN
src/assets/img/03(1).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 68 KiB

BIN
src/assets/img/image.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

0
src/assets/img/01.png → src/assets/img/productTraceability-1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 76 KiB

BIN
src/assets/img/productTraceability-1hover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

0
src/assets/img/productTraceability.png → src/assets/img/productTraceability-2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 86 KiB

BIN
src/assets/img/productTraceability-2hover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

0
src/assets/img/03.png → src/assets/img/productTraceability-3.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 78 KiB

After

Width:  |  Height:  |  Size: 78 KiB

BIN
src/assets/img/productTraceability-3hover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
src/assets/img/productTraceability-hover.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 77 KiB

BIN
src/assets/img/setsuyuan-page.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
src/assets/img/setsuyuan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

5
src/router/index.js
View File

@ -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')
}]
},
]

1
src/views/index.vue
View File

@ -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') }
],

65
src/views/page/largeScreen1.vue
View File

@ -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;
height: 3rem;
width: 3.5rem;
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;
font-size: 0.15rem;
height: 0.4rem;
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;
height: 0.1rem;
width: 0.2rem;
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;
height: 0.15rem;
width: 0.18rem;
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%;
height: calc(100% - 2.22rem);
width: 100%;
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%;
height: 45%;
width: 33.33%;
height: 33.33%;
display: flex;
margin-bottom: 0.05rem;
> img {
width: 0.28rem;
height: 0.28rem;
width: 0.4rem;
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;

56
src/views/vrcode.vue
View File

@ -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"
v-for="item1, index1 in item.list">{{ item1.name }}</el-menu-item>
<el-menu-item :disabled="item1.router ? false : true" @click="toRouter1(item1)"
: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:'productTraceability', routerList: [], img: require('../assets/image/vrcode-icon2.png'), list: [{ name: '溯源批次',router:'' }, { name: '配置溯源版面',router:'' }, { 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:'' },] },],
{
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: '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){
if(key=='productTraceability'&&key!=this.routerNow){
clickmenu(key, keyPath) {
if (key == 'productTraceability' && key != this.routerNow) {
this.$router.push({ name: key })
}
},

10
src/views/vrcode/productTraceability.vue
View File

@ -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 })
}
},
},
}

265
src/views/vrcode/setsuyuan.vue Normal file
View File

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