Compare commits

...

4 Commits

Author SHA1 Message Date
xiaomeng 224a904cd7 Merge pull request 'pc-master' (#46) from pc-master into portal
Reviewed-on: #46
2023-11-21 05:56:59 +00:00
孙萌 b1ba00f9c2 Merge branch 'pc-master' of https://git.lihe-control.com/xiaomeng/wszhyWx into pc-master 2023-11-21 11:29:02 +08:00
孙萌 cb24bd0bb4 1 2023-11-21 11:28:57 +08:00
pangdundun 45aed4098e ~ 2023-11-21 10:47:40 +08:00
25 changed files with 1631 additions and 81 deletions

View File

@ -1,20 +1,20 @@
@charset "UTF-8";
.scroll, .el-dropdown-menu, .index .index-content .right.right-page .page-content, .formula .page-content, .realTime, .history .page-content .el-table--scrollable-x .el-table__body-wrapper {
.scroll, .el-dropdown-menu, .index .index-content .right.right-page .page-content, .formula .page-content, .realTime, .history .page-content .el-table--scrollable-x .el-table__body-wrapper, .vrcode-table .vrcode-table-view.table-view .el-table__body-wrapper, .vrcode-model .el-dialog {
overflow-y: auto;
}
.scroll::-webkit-scrollbar, .el-dropdown-menu::-webkit-scrollbar, .index .index-content .right.right-page .page-content::-webkit-scrollbar, .formula .page-content::-webkit-scrollbar, .realTime::-webkit-scrollbar, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
.scroll::-webkit-scrollbar, .el-dropdown-menu::-webkit-scrollbar, .index .index-content .right.right-page .page-content::-webkit-scrollbar, .formula .page-content::-webkit-scrollbar, .realTime::-webkit-scrollbar, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar, .vrcode-table .vrcode-table-view.table-view .el-table__body-wrapper::-webkit-scrollbar, .vrcode-model .el-dialog::-webkit-scrollbar {
/*滚动条整体*/
width: 10px;
cursor: pointer;
}
.scroll::-webkit-scrollbar-track, .el-dropdown-menu::-webkit-scrollbar-track, .index .index-content .right.right-page .page-content::-webkit-scrollbar-track, .formula .page-content::-webkit-scrollbar-track, .realTime::-webkit-scrollbar-track, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track {
.scroll::-webkit-scrollbar-track, .el-dropdown-menu::-webkit-scrollbar-track, .index .index-content .right.right-page .page-content::-webkit-scrollbar-track, .formula .page-content::-webkit-scrollbar-track, .realTime::-webkit-scrollbar-track, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track, .vrcode-table .vrcode-table-view.table-view .el-table__body-wrapper::-webkit-scrollbar-track, .vrcode-model .el-dialog::-webkit-scrollbar-track {
/*滚动条轨道*/
background: #013769;
}
.scroll::-webkit-scrollbar-thumb, .el-dropdown-menu::-webkit-scrollbar-thumb, .index .index-content .right.right-page .page-content::-webkit-scrollbar-thumb, .formula .page-content::-webkit-scrollbar-thumb, .realTime::-webkit-scrollbar-thumb, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {
.scroll::-webkit-scrollbar-thumb, .el-dropdown-menu::-webkit-scrollbar-thumb, .index .index-content .right.right-page .page-content::-webkit-scrollbar-thumb, .formula .page-content::-webkit-scrollbar-thumb, .realTime::-webkit-scrollbar-thumb, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb, .vrcode-table .vrcode-table-view.table-view .el-table__body-wrapper::-webkit-scrollbar-thumb, .vrcode-model .el-dialog::-webkit-scrollbar-thumb {
/*滚动条里面的滑块*/
width: 4px;
cursor: pointer;
@ -22,17 +22,18 @@
border: 3px solid #013769;
}
.scroll::-webkit-scrollbar-thumb:hover, .el-dropdown-menu::-webkit-scrollbar-thumb:hover, .index .index-content .right.right-page .page-content::-webkit-scrollbar-thumb:hover, .formula .page-content::-webkit-scrollbar-thumb:hover, .realTime::-webkit-scrollbar-thumb:hover, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
.scroll::-webkit-scrollbar-thumb:hover, .el-dropdown-menu::-webkit-scrollbar-thumb:hover, .index .index-content .right.right-page .page-content::-webkit-scrollbar-thumb:hover, .formula .page-content::-webkit-scrollbar-thumb:hover, .realTime::-webkit-scrollbar-thumb:hover, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover, .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-corner, .el-dropdown-menu::-webkit-scrollbar-corner, .index .index-content .right.right-page .page-content::-webkit-scrollbar-corner, .formula .page-content::-webkit-scrollbar-corner, .realTime::-webkit-scrollbar-corner, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-corner {
.scroll::-webkit-scrollbar-corner, .el-dropdown-menu::-webkit-scrollbar-corner, .index .index-content .right.right-page .page-content::-webkit-scrollbar-corner, .formula .page-content::-webkit-scrollbar-corner, .realTime::-webkit-scrollbar-corner, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-corner, .vrcode-table .vrcode-table-view.table-view .el-table__body-wrapper::-webkit-scrollbar-corner, .vrcode-model .el-dialog::-webkit-scrollbar-corner {
/*滚动条边角*/
}
.el-popconfirm__main,
.el-date-table td span,
.el-date-range-picker__header div {
color: #606266;
color: #606266 !important;
}
.el-date-table td.end-date div span,
@ -40,6 +41,10 @@
color: #fff !important;
}
.el-button--text span {
color: #409EFF !important;
}
.el-dropdown-menu {
max-height: 300px;
}
@ -2237,6 +2242,494 @@
color: #FFFFFF;
}
.flex-end {
display: flex;
justify-content: flex-end;
align-items: center;
}
.vrcode-table .vrcode-btn {
margin-bottom: 20px;
}
.vrcode-table .vrcode-table-view.table-view {
background: transparent;
margin-top: 10px;
}
.vrcode-table .vrcode-table-view.table-view .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
border: none;
background-color: transparent;
}
.vrcode-table .vrcode-table-view.table-view .cell {
text-align: center;
}
.vrcode-table .vrcode-table-view.table-view .el-table .warning-row {
background: rgba(0, 180, 255, 0.2);
}
.vrcode-table .vrcode-table-view.table-view .el-table .success-row {
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 {
height: 60px;
}
.vrcode-table .vrcode-table-view.table-view .el-table::before,
.vrcode-table .vrcode-table-view.table-view .el-table--border::after {
height: 0;
}
.vrcode-table .vrcode-table-view.table-view .el-table,
.vrcode-table .vrcode-table-view.table-view .el-table tr,
.vrcode-table .vrcode-table-view.table-view .el-table td.el-table__cell {
border: none;
background: transparent;
}
.vrcode-table .vrcode-table-view.table-view .el-table th.el-table__cell.is-leaf {
border: none;
background: rgba(0, 180, 255, 0.2);
}
.vrcode-table .vrcode-table-view.table-view .el-table th.el-table__cell.is-leaf .cell {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
}
.vrcode-table .vrcode-table-view.table-view .vrcode-table-btn {
display: flex;
align-items: center;
justify-content: center;
}
.vrcode-table .vrcode-table-view.table-view .table-flex {
width: 100%;
height: 100%;
display: flex;
align-items: center;
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;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
}
.vrcode-table .vrcode-table-view.table-view .isOpen.open-green {
background: rgba(0, 255, 186, 0.1);
color: #00FFBA;
border: 1px solid rgba(0, 255, 186, 0.4);
}
.vrcode-table .vrcode-table-view.table-view .isOpen.open-red {
background: rgba(245, 108, 108, 0.6);
border: 1px solid #F56C6C;
color: #FFFFFF;
}
.vrcode-btn {
width: 100px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
cursor: pointer;
margin: 7.5px 10px 7.5px 0 !important;
border-radius: 3px;
}
.vrcode-btn > img {
margin-right: 5px;
}
.vrcode-btn.blue-btn {
background: #00A6FF;
}
.vrcode-btn.blue-btn:hover {
background: #0089F2;
}
.vrcode-btn.red-btn {
background: #F56C6C;
}
.vrcode-btn.red-btn:hover {
background: #FF5E5E;
}
.vrcode-btn.save-btn {
background: #00BB88;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
}
.vrcode-btn.save-btn:hover {
background: #009E73;
}
.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;
font-family: Microsoft YaHei;
font-weight: bold;
}
.vrcode-btn.cancle-btn:hover {
background: rgba(0, 186, 255, 0.15);
border: 2px solid rgba(0, 186, 255, 0.6);
}
.vrcode-model .vrcode-model-title {
width: 100%;
height: 43px;
background: url(../img/vrcode-title.png) no-repeat;
background-size: 222px 43px;
background-position: left center;
padding-left: 46px;
line-height: 43px;
font-size: 20px;
font-family: Microsoft YaHei;
position: relative;
font-weight: bold;
}
.vrcode-model .vrcode-model-title::after {
content: ' ';
width: 32px;
height: 33px;
background: url(../img/vrcode-title-icon.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 7px;
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;
}
.vrcode-model .vrcode-input-sel > .title {
margin-bottom: 7px;
}
.vrcode-model .vrcode-input-sel .el-dropdown-link {
width: 300px;
height: 44px;
cursor: pointer;
position: relative;
}
.vrcode-model .vrcode-input-sel .el-dropdown-link input {
width: 100%;
height: 100%;
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-sel .el-dropdown-link input::placeholder {
color: #92B1D0;
}
.vrcode-model .vrcode-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%);
}
.vrcode-model .vrcode-input-sel .el-dropdown-link .arrow > img {
width: 6px;
height: 4px;
}
.vrcode-model .vrcode-input-seltime {
margin-right: 30px;
margin-bottom: 15px;
}
.vrcode-model .vrcode-input-seltime > .title {
margin-bottom: 7px;
}
.vrcode-model .vrcode-input-seltime .seltime {
width: 300px;
height: 44px;
background: rgba(90, 210, 255, 0.25);
border: 2px solid rgba(86, 209, 255, 0.5);
font-size: 16px;
font-family: Microsoft YaHei;
position: relative;
}
.vrcode-model .vrcode-input-seltime .seltime .el-input__prefix {
display: none;
}
.vrcode-model .vrcode-input-seltime .seltime input {
width: 300px;
height: 40px;
font-size: 16px;
padding-left: 15px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
background: transparent;
border: none;
}
.vrcode-model .vrcode-input-seltime .seltime input::placeholder {
color: #92B1D0;
}
.vrcode-model .vrcode-input-seltime .seltime .seltime-icon {
width: 38px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid #fff;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.vrcode-model .vrcode-input-seltime .seltime .seltime-icon > img {
width: 16px;
height: auto;
}
.vrcode-model .vrcode-radio {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 15px;
}
.vrcode-model .vrcode-radio .no-sel {
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%;
cursor: pointer;
}
.vrcode-model .vrcode-radio .sel {
width: 35px;
height: 35px;
background: url(../image/radio.png) no-repeat center;
background-size: 100% 100%;
cursor: pointer;
}
.vrcode-model .vrcode-radio > div {
margin-right: 30px;
display: flex;
align-items: center;
}
.vrcode-model .vrcode-radio > div span {
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;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
position: relative;
padding-left: 13px;
}
.vrcode-model .vrcode-title::after {
content: ' ';
width: 3px;
height: 21px;
background: #0294E2;
border-radius: 2px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.vrcode-model .el-dialog__body {
width: 100%;
min-height: calc(30vh - 70px);
}
.vrcode-model .el-dialog__body .vrcode-content {
width: 100%;
height: calc(100% - 43px);
padding: 0 30px;
}
.vrcode-model .el-dialog__body .vrcode-content .vrcode-view {
width: 100%;
padding: 30px 0 15px 0;
border-bottom: 1px solid rgba(0, 180, 255, 0.35);
display: flex;
align-items: center;
flex-wrap: wrap;
}
.vrcode-model .el-dialog__body .vrcode-content .vrcode-view > div {
flex-shrink: 0;
}
.vrcode-model .el-dialog {
background: rgba(0, 76, 147, 0.9);
border: 2px solid rgba(0, 186, 255, 0.6);
max-height: 90vh;
min-height: 30vh;
}
.dialog-footer {
display: flex;
align-items: center;
justify-content: flex-end;
}
.plantingPlan {
width: 100%;
height: 100%;
@ -2257,4 +2750,28 @@
background: url(../img/plan-bg.png) no-repeat center;
background-size: 100% 100%;
margin: 7.5px 15px;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.plantingPlan .plan-view .plan-view-left {
width: 180px;
height: 100%;
}
.plantingPlan .plan-view .plan-view-right {
width: calc(100% - 200px);
height: 100%;
display: flex;
justify-content: space-around;
flex-direction: column;
}
.plantingPlan .plan-view .plan-view-right .name {
font-size: 24px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
}

File diff suppressed because one or more lines are too long

View File

@ -32,17 +32,21 @@
}
}
.el-popconfirm__main,
.el-date-table td span,
.el-date-range-picker__header div {
color: #606266;
color: #606266!important;
}
.el-date-table td.end-date div span,
.el-date-table td.start-date div span {
color: #fff !important;
}
.el-button--text{
span{
color:#409EFF!important;
}
}
.el-dropdown-menu {
max-height: 300px;
@extend .scroll;
@ -1590,9 +1594,11 @@
background: rgba(0, 92, 178, 0.15);
border: 2px solid rgba(0, 186, 255, 0.20);
padding: 30px 20px 20px;
&.control-page{
height:auto;
&.control-page {
height: auto;
}
.control-view {
display: flex;
align-items: center;
@ -1803,44 +1809,54 @@
align-items: center;
justify-content: center;
flex-direction: column;
.status-fan{
.status-fan {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
>div{
>div {
min-width: unset;
flex-shrink: 0;
font-size: 14px;
height: 30px;
margin: 10px 8px 0 !important;
&.off{
span{
color: #00C0F7;
}
&.off {
span {
color: #00C0F7;
}
}
>span{
>span {
margin-left: 5px;
}
>img{
>img {
width: 16px;
height:16px;
height: 16px;
margin-right: 0px;
&.fan-img{
animation: rotate 5s linear infinite; /* 持续时间为 5 秒,线性缓动,无限循环 */
&.fan-img {
animation: rotate 5s linear infinite;
/* 持续时间为 5 秒,线性缓动,无限循环 */
/* 定义旋转动画 */
}
@keyframes rotate {
from {
transform: rotate(0deg);
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
}
}
.status-true-sel {
display: flex;
align-items: center;
@ -1855,8 +1871,9 @@
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
>img {
width: 20px;
height: 20px;
margin-right: 10px;
@ -2374,6 +2391,492 @@
}
}
}
.flex-end{
display: flex;
justify-content: flex-end;
align-items: center;
}
.vrcode-table{
.vrcode-btn{
margin-bottom: 20px;
}
.vrcode-table-view{
&.table-view {
background: transparent;
margin-top:10px;
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
border: none;
background-color: transparent;
}
.cell {
text-align: center;
}
.el-table .warning-row {
background: rgba(0, 180, 255, 0.2);
}
.el-table .success-row {
background: rgba(0, 47, 94, 0.35);
}
.el-table .el-table__cell,.el-table__row{
height: 60px;
}
.el-table::before,
.el-table--border::after {
height: 0;
}
.el-table,
.el-table tr,
.el-table td.el-table__cell {
border: none;
background: transparent;
}
.el-table th.el-table__cell.is-leaf {
border: none;
background: rgba(0, 180, 255, 0.2);
.cell {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
}
}
.vrcode-table-btn{
display: flex;
align-items: center;
justify-content: center
}
.table-flex{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.el-table__body-wrapper{
@extend .scroll;
}
.el-table__cell.gutter{
display: none;
}
.isOpen{
width: 80px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
&.open-green{
background: rgba(0,255,186,0.1);
color: #00FFBA;
border: 1px solid rgba(0,255,186,0.4);
}
&.open-red{
background: rgba(245,108,108,0.6);
border: 1px solid #F56C6C;
color: #FFFFFF;
}
}
}
}
}
.vrcode-btn {
width: 100px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
cursor: pointer;
margin: 7.5px 10px 7.5px 0!important;
>img {
margin-right: 5px;
}
border-radius: 3px;
&.blue-btn {
background: #00A6FF;
&:hover {
background: #0089F2;
}
}
&.red-btn {
background: #F56C6C;
&:hover {
background: #FF5E5E;
}
}
&.save-btn {
background: #00BB88;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
&:hover {
background: #009E73;
}
}
&.cancle-btn {
width: 100px;
background: rgba(0, 186, 255, 0.15);
border: 2px solid rgba(0, 186, 255, 0.4);
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
&:hover {
background: rgba(0, 186, 255, 0.15);
border: 2px solid rgba(0, 186, 255, 0.6);
}
}
}
.vrcode-model {
.vrcode-model-title {
width: 100%;
height: 43px;
background: url(../img/vrcode-title.png) no-repeat;
background-size: 222px 43px;
background-position: left center;
padding-left: 46px;
line-height: 43px;
font-size: 20px;
font-family: Microsoft YaHei;
position: relative;
font-weight: bold;
&::after {
content: ' ';
width: 32px;
height: 33px;
background: url(../img/vrcode-title-icon.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 7px;
top: 4px;
}
}
.vrcode-input {
width: 300px;
margin-right: 30px;
margin-bottom: 15px;
.input-title {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
margin-bottom: 7px;
}
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;
&::placeholder {
color: #92B1D0;
}
}
}
.vrcode-input-sel {
margin-right: 30px;
margin-bottom: 15px;
>.title {
margin-bottom: 7px;
}
.el-dropdown-link {
width: 300px;
height: 44px;
cursor: pointer;
position: relative;
input {
width: 100%;
height: 100%;
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;
&::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;
}
}
}
}
.vrcode-input-seltime {
margin-right: 30px;
margin-bottom: 15px;
>.title {
margin-bottom: 7px;
}
.seltime {
width: 300px;
height: 44px;
background: rgba(90, 210, 255, 0.25);
border: 2px solid rgba(86, 209, 255, 0.5);
font-size: 16px;
font-family: Microsoft YaHei;
position: relative;
.el-input__prefix {
display: none;
}
input {
width: 300px;
height: 40px;
font-size: 16px;
padding-left: 15px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
background: transparent;
border: none;
&::placeholder {
color: #92B1D0;
}
}
.seltime-icon {
width: 38px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid #fff;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
>img {
width: 16px;
height: auto;
}
}
}
}
.vrcode-radio{
width: 100%;
display: flex;
align-items: center;
margin-bottom: 15px;
.no-sel {
width: 35px;
height: 35px;
box-shadow: 0 0 15px rgba(53, 187, 247, 0.50) inset;
border: 1px solid rgba(0, 204, 255, 0.70);
border-radius: 50%;
cursor: pointer;
}
.sel {
width: 35px;
height: 35px;
background: url(../image/radio.png) no-repeat center;
background-size: 100% 100%;
cursor: pointer;
}
>div{
margin-right: 30px;
display: flex;
align-items: center;
span{
margin-left: 8px;
}
}
}
.vrcode-selimage {
width: 100%;
>.title {
margin-bottom: 7px;
}
.sel-image-view {
display: flex;
align-items: center;
flex-wrap: wrap;
#sel-img{
display: none;
}
.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;
&.sel-img{
position: relative;
padding: 10px;
&:hover{
.del-img{
display: flex;
}
}
.el-image{
width: 100%;
height: 100%;
}
.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;
img{
width: 44px;
height: 44px;
}
}
}
&.sel-image-sel {
display: flex;
align-items: center;
justify-content: center;
>img {
width: 30px;
height: 30px;
}
}
}
}
}
.vrcode-title {
width: 100%;
margin-bottom: 15px;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
position: relative;
padding-left: 13px;
&::after {
content: ' ';
width: 3px;
height: 21px;
background: #0294E2;
border-radius: 2px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
}
.el-dialog__body {
width: 100%;
min-height: calc(30vh - 70px);
.vrcode-content {
width: 100%;
height: calc(100% - 43px);
padding: 0 30px;
.vrcode-view {
width: 100%;
padding: 30px 0 15px 0;
border-bottom: 1px solid rgba(0, 180, 255, .35);
display: flex;
align-items: center;
flex-wrap: wrap;
>div {
flex-shrink: 0;
}
}
}
}
.el-dialog {
background: rgba(0, 76, 147, 0.9);
border: 2px solid rgba(0, 186, 255, 0.6);
max-height: 90vh;
min-height: 30vh;
@extend .scroll;
}
}
.dialog-footer {
display: flex;
align-items: center;
justify-content: flex-end;
}
.plantingPlan {
width: 100%;
@ -2394,5 +2897,29 @@
background: url(../img/plan-bg.png) no-repeat center;
background-size: 100% 100%;
margin: 7.5px 15px;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
.plan-view-left {
width: 180px;
height: 100%;
}
.plan-view-right {
width: calc(100% - 200px);
height: 100%;
display: flex;
justify-content: space-around;
flex-direction: column;
.name {
font-size: 24px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 780 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

Before

Width:  |  Height:  |  Size: 400 B

After

Width:  |  Height:  |  Size: 400 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 542 KiB

View File

Before

Width:  |  Height:  |  Size: 480 B

After

Width:  |  Height:  |  Size: 480 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 275 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

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

View File

@ -16,7 +16,7 @@ export default new Vuex.Store({
activeNames:[],//组件内active
//label是名称
//value是code码
//countType计算类型 0是原数据 1是原数据-400 2是原数据/10 3是(原数据-400) / 10
//countType计算类型 0是原数据 1是原数据-400 2是原数据/10 3是(原数据-400) / 10 4是(原数据-1000)/10
typeList: [
{ label: '无意义的传感器', value: 0, countType: 0,unit:'' },
{ label: '空气温度', value: 1, countType: 3,unit:'℃' },
@ -67,7 +67,7 @@ export default new Vuex.Store({
{ label: '氨气', value: 46, countType: 0,unit:'ppm' },
{ label: '硫化氢', value: 47, countType: 0,unit:'ppm' },
{ label: '氧气', value: 48, countType: 2,unit:'%vol' },
{ label: '甲烷', value: 49, countType: 2,unit:'%vol' },
{ label: '土壤张力', value: 49, countType: 2,unit:'KPa' },
{ label: '铜CU', value: 50, countType: 0,unit:'mg/kg' },
{ label: '镉CD', value: 51, countType: 2,unit:'mg/kg' },
{ label: '铅PB', value: 52, countType: 0,unit:'mg/kg' },

View File

@ -78,7 +78,7 @@ export default {
activeNames: [3],
leftList: [
{ name: '首页', img: require('../assets/image/index-icon.png'), list: [], router: 'realTime', isRouter: true, },
{ name: '温室', routerList: ['realTime', 'skylight', 'control','fan','upload-con','sensorSet-con'], img: require('../assets/image/left-img0.png'), list: [] },
{ name: '温室', routerList: ['realTime', 'skylight', 'control','fan','upload-con','sensorSet-con','synthesis-con'], img: require('../assets/image/left-img0.png'), list: [] },
// { name: '', img: require('../assets/image/left-img1.png'), list: [] },
{ name: '施肥机', routerList: ['formula', 'irrigateSet', 'PIDSet', 'systemSet', 'upload', 'sensorSet', 'realTime', 'history', 'dataAnalysis'], img: require('../assets/image/left-img2.png'), list: [] },],
routerNow: 'realTime',
@ -143,6 +143,14 @@ export default {
this.loading = false
});
},
//
compare(property) {
return function (a, b) {
let value1 = a[property];
let value2 = b[property];
return value1 - value2;
};
},
//
getEqbyid() {
var userInfo = JSON.parse(localStorage.getItem('userInfo'))
@ -172,6 +180,14 @@ export default {
})
}
})
this.leftList.forEach((el1, index1) => {
if (el1.name == '温室') {
this.leftList[index1].list.sort(this.compare('equipmentStatu'))
}
if (el1.name == '施肥机') {
this.leftList[index1].list.sort(this.compare('equipmentStatu'))
}
})
this.gerRouter()
this.getByid()
@ -258,11 +274,13 @@ export default {
this.$store.state.equipmentIndex = item.index
this.$router.push({ path: `/dataAnalysis?index=${item.index ? item.index : 1}` })
} else if (item.router == 'formula') {
this.$store.state.equipmentIndex = item.index
this.routerIndex=item.index
if (item.deviceName == 10) {
this.$router.push({ path: `/control` })
} else if (item.deviceName == 1) {
this.$router.push({ path: `/irrigateSet` })
this.$router.push({ path: `/skylight?change=${item.index}` })
} else if (item.deviceName == 1&&this.routerNow!='irrigateSet') {
this.$router.push({ path: `/irrigateSet?change=${item.index}` })
}
}
} else if (item.router == 'formula' && this.$route.query.index == item.index) {

View File

@ -81,7 +81,7 @@
v-if="popContentCurrent == index ? true : false"> -->
<div
class="pop_content"
:style="getTopOrLeft()"
:style="getTopOrLeft(item.id)"
v-show="popContentCurrent == item.id ? true : false"
>
<img
@ -636,42 +636,35 @@ export default {
});
},
getTopOrLeft() {
return "top:50%;left:50%;transform: translate(-50%,-50%);";
// if (name == "") {
// // return "top:1rem;left:6.2rem";
// return "top:50%;left:50%;transform: translate(-50%,-50%);";
// } else if (name == "") {
// // return "top:3.5rem;left:3.8rem";
// return "top:50%;left:50%;transform: translate(-50%,-50%);";
// } else if (name == "3") {
// // return "top:2rem;left:9rem";
// return "top:50%;left:50%;transform: translate(-50%,-50%);";
// } else if (name == "4") {
// // return "top:2rem;left:9.3rem";
// return "top:50%;left:50%;transform: translate(-50%,-50%);";
// } else if (name == "5") {
// // return "top:3.5rem;left:6.5rem";
// return "top:50%;left:50%;transform: translate(-50%,-50%);";
// } else if (name == "6") {
// // return "top:0.8rem;left:7.2rem";
// return "top:50%;left:50%;transform: translate(-50%,-50%);";
// }
getTopOrLeft(id) {
if (id == 2) {
return "top:46%;left:46%;transform: translate(-50%,-50%);";
} else if (id == 5) {
return "top:53%;left:47%;transform: translate(-50%,-50%);";
} else if (id == 6) {
return "top:46%;left:51%;transform: translate(-50%,-50%);";
} else if (id == 4) {
return "top:50%;left:62%;transform: translate(-50%,-50%);";
} else if (id == 3) {
return "top:50%;left:62%;transform: translate(-50%,-50%);";
} else if (id == 1) {
return "top:50%;left:35%;transform: translate(-50%,-50%);";
}
},
getNamePosition(id){
if(id == 2){
if(id == 1){
return "position: absolute;top: 41%;left: 13%;"
}else if(id == 2){
return "position: absolute;top: 10%;left: 24%;"
}else if(id == 3){
return "position: absolute;top: 61%;left: 62%;"
}else if(id == 4){
return "position: absolute;top: 1%;left: 62%;"
}else if(id == 5){
return "position: absolute;top: 29%;left: 76%;"
}else if(id == 6){
return "position: absolute;top: 22%;left: 40%;"
}else if(id == 7){
return "position: absolute;top: 41%;left: 13%;"
}else if(id == 4){
return "position: absolute;top: 29%;left: 76%;"
}else if(id == 5){
return "position: absolute;top: 61%;left: 62%;"
}else if(id == 6){
return "position: absolute;top: 1%;left: 62%;"
}
},

View File

@ -363,6 +363,7 @@ export default {
//1-400
//2/10
//3(-400) / 10
//4(-1000) / 10
countType1(data) {
var num = data - 400
return num.toFixed(2)
@ -376,6 +377,10 @@ export default {
var num = (data - 400) / 10
return num.toFixed(2)
},
countType4(data) {
var num = (data - 1000) / 10
return num.toFixed(2)
},
//
getControlData(item) {
var x = item.environmentData
@ -687,4 +692,5 @@ export default {
border: 1px solid #dcdfe6;
color: #606266;
font-size: 14px;
}</style>
}
</style>

View File

@ -137,6 +137,11 @@ export default {
var num = (data - 400) / 10
return num
},
countType4(data) {
var num = (data - 1000) / 10
return num
},
//
sendCountType1(data) {
var num = data + 400
@ -151,6 +156,11 @@ export default {
var num = (data* 10)+400
return num
},
sendCountType4(data) {
var num = (data* 10)+1000
return num
},
//
handleCommand(command){
this.typeList.forEach((el,index)=>{
@ -181,6 +191,9 @@ export default {
}else if(el.countType==3){
this.inputData[this.numberList[i] + 2]=this.countType3(this.inputData[this.numberList[i] + 2])
this.inputData[this.numberList[i] + 4]=this.countType3(this.inputData[this.numberList[i] + 4])
}else if(el.countType==4){
this.inputData[this.numberList[i] + 2]=this.countType4(this.inputData[this.numberList[i] + 2])
this.inputData[this.numberList[i] + 4]=this.countType4(this.inputData[this.numberList[i] + 4])
}
}
@ -268,6 +281,8 @@ getSendData(number){
number1=this.sendCountType2(number)
}else if(el.countType==3){
number1=this.sendCountType3(number)
}else if(el.countType==4){
number1=this.sendCountType4(number)
}
}
})

View File

@ -134,6 +134,9 @@ export default {
that.getNowData();
}, 0);
},
'$route.query.change'(newVal, oldVal){
this.dataInit();
},
},
mounted() {

View File

@ -321,6 +321,11 @@ export default {
var num = (data - 400) / 10
return num.toFixed(2)
},
countType4(data) {
var num = (data - 1000) / 10
return num.toFixed(2)
},
getTypeData(dataCode, typeCode) {
var typeList = this.$store.state.typeList

View File

@ -55,8 +55,8 @@ export default {
activeNames: [3],
leftList: [
{ name: '种植计划', img: require('../assets/image/vrcode-icon0.png'), list: [], router: '', isRouter: true, },
{ name: '生产环节', routerList: [], img: require('../assets/image/vrcode-icon1.png'), list: [{ name: '农事管理' }, { name: '施肥记录' }, { name: '打药记录' }, { name: '采摘记录' }, { name: '清洁记录' }, { name: '病虫害管理' },] },
{ name: '种植计划', img: require('../assets/image/vrcode-icon0.png'), list: [], router: 'plantingPlan', isRouter: true, },
{ name: '生产环节', routerList: ['agricultural'], img: require('../assets/image/vrcode-icon1.png'), list: [{ name: '农事管理',router:'agricultural' }, { name: '施肥记录' }, { name: '打药记录' }, { name: '采摘记录' }, { name: '清洁记录' }, { name: '病虫害管理' },] },
{ name: '产品追溯', routerList: [], img: require('../assets/image/vrcode-icon2.png'), list: [{ name: '溯源批次' }, { name: '配置溯源版面' }, { name: '各种报告库' }] },
{ name: '基础信息设置', routerList: [], img: require('../assets/image/vrcode-icon3.png'), list: [{ name: '作物品种' }, { name: '种植栽培模式' }, { name: '农事作业工序' }, { name: '人员管理' }, { name: '农场信息管理' }, { name: '供应商管理' }, { name: '生产资料管理' }, { name: '农机工具管理' }, { name: '作物外观图片库' },] },],
routerNow: 'plantingPlan',
@ -137,19 +137,13 @@ export default {
toHome() {
this.$router.push({ name: 'home' })
},
toRouter(item) {
if (item.router) {
if (item.http) {
window.location.href = item.http;
}
} else {
this.$message('当前页面正在努力开发中');
}
},
toRouter1(item) {
if (item.router) {
if (item.http) {
window.location.href = item.http;
}else{
this.$router.push({ name: item.router })
}
} else {
this.$message('当前页面正在努力开发中');

View File

@ -0,0 +1,244 @@
<template>
<div class="plantingPlan ">
<div class="page-content">
<div class="table-title">
<img src="../../assets/img/agricultural.png" alt="" />
农事管理
</div>
<div class="flex-view">
<div class="vrcode-btn blue-btn">
<img src="../../assets/img/vrcode-icon0.png" alt="">填报
</div>
<div class="vrcode-btn cancle-btn">
<img src="../../assets/img/vrcode-icon1.png" alt="">统计
</div>
</div>
<div class="vrcode-table">
<div class="flex-end">
<div class="vrcode-btn save-btn" @click="addModel = true">
<img src="../../assets/img/add.png" alt="">新增
</div>
</div>
<div class="vrcode-table-view table-view">
<el-table :data="tableData" :row-class-name="tableRowClassName" height="520" style="width: 100%">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="data0" label="种植计划"></el-table-column>
<el-table-column prop="data1" label="操作类型"></el-table-column>
<el-table-column prop="data2" label="操作员"></el-table-column>
<el-table-column prop="data3" show-overflow-tooltip label="开始时间"></el-table-column>
<el-table-column prop="data4" show-overflow-tooltip label="结束时间"></el-table-column>
<el-table-column prop="data5" label="是否公开">
<template slot-scope="scope">
<div class="table-flex">
<div class="isOpen" :class="scope.row.data5 ? 'open-green' : 'open-red'">
{{ scope.row.data5 ? '已公开' : '未公开' }}
</div>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<div class="vrcode-table-btn">
<div class="vrcode-btn blue-btn" @click="addModel = true">
编辑
</div>
<div class="vrcode-btn red-btn">
删除
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<el-dialog title="提示" top="5vh" :visible.sync="addModel" width="740px" class="vrcode-model" :append-to-body="true">
<div class="vrcode-model-title">
新增农事信息
</div>
<div class="vrcode-content">
<div class="vrcode-view">
<div class="vrcode-input-sel">
<div class="title">种植计划</div>
<el-dropdown @command="handleCommand">
<div class="el-dropdown-link">
<input v-model="TypeSel" type="text" class="input-input" placeholder="请选择种植计划">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item, index in typeSelList" :key="index" :command="index">{{
item.name
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="vrcode-input-sel">
<div class="title">操作类型</div>
<el-dropdown @command="handleCommand">
<div class="el-dropdown-link">
<input v-model="TypeSel" type="text" class="input-input" placeholder="请选择操作类型">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item, index in typeSelList" :key="index" :command="index">{{
item.name
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="vrcode-input">
<div class="input-title">放置位置</div>
<input type="text" placeholder="请输入放置位置">
</div>
<div class="vrcode-input-seltime">
<div class="title">开始时间</div>
<div class="seltime">
<el-date-picker v-model="value1" type="date" placeholder="请选择开始时间">
</el-date-picker>
<div class="seltime-icon">
<img src="../../assets/img/vrcode-time.png" alt="">
</div>
</div>
</div>
<div class="vrcode-input-seltime">
<div class="title">结束时间</div>
<div class="seltime">
<el-date-picker v-model="value1" type="date" placeholder="请选择结束时间">
</el-date-picker>
<div class="seltime-icon">
<img src="../../assets/img/vrcode-time.png" alt="">
</div>
</div>
</div>
<div class="vrcode-input-sel">
<div class="title">操作员</div>
<el-dropdown @command="handleCommand">
<div class="el-dropdown-link">
<input v-model="TypeSel" type="text" class="input-input" placeholder="请选择操作员">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item, index in typeSelList" :key="index" :command="index">{{
item.name
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="vrcode-radio">
<div class="radio-name">是否追溯</div>
<div class="radio-sel">
<img v-if="modelisTrue" class="sel" src="../../assets/image/radio.png" alt="">
<div v-else @click="modelisTrue=true" class="no-sel"></div>
<span></span>
</div>
<div class="radio-sel">
<img v-if="!modelisTrue" class="sel" src="../../assets/image/radio.png" alt="">
<div v-else @click="modelisTrue=false" class="no-sel"></div>
<span></span>
</div>
</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 < 6">
<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>
</div>
<span slot="footer" class="dialog-footer">
<div class="vrcode-btn save-btn" @click="addModel = false">保存</div>
<div class="vrcode-btn cancle-btn" @click="addModel = false">取消</div>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
edit: false,
addModel: false,
tableData: [{
id: '13', data0: '西红柿种植',
data1: '施肥',
data2: '刘永强',
data3: '2023-04-05 21:00',
data4: '2023-04-05 21:00',
data5: true,
}, {}, {}, {}, {}, {}, {}, {},],
typeSelList: [{ name: '1#平均空气温度', value: 1, },
{ name: '2#平均空气温度', value: 2, },
{ name: '1#空气温度', value: 3, },
{ name: '2#空气温度', value: 4, },
{ name: '3#空气温度', value: 5, },
{ name: '4#空气温度', value: 6, },
{ name: '5#空气温度', value: 7, },
{ name: '6#空气温度', value: 8, },
{ name: '7#空气温度', value: 9, },
{ name: '8#空气温度', value: 10, },],
TypeSel: '',
value1: '',
modelisTrue:false,
imgList: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']
}
},
mounted() { },
methods: {
handleCommand() {
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return 'warning-row';
} else if (rowIndex % 2 == 0) {
return 'success-row';
}
return '';
},
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>

View File

@ -6,23 +6,246 @@
种植计划
</div>
<div class="flex-view">
<div class="btn green"><img src="../../assets/img/add.png" alt="">新增种植计划</div>
<div class="btn green" @click="addModel = true,edit=false"><img src="../../assets/img/add.png" alt="">新增种植计划</div>
</div>
<div class="flex-view border-none">
<div class="plan-view" v-for="item,index in 10">
<div class="plan-view" v-for="item, index in 10">
<img class="plan-view-left" src="../../assets/img/image.png" alt="">
<div class="plan-view-right">
<div class="name">西红柿温室种植</div>
<div class="vrcode-btn blue-btn" @click="addModel = true,edit=true"><img src="../../assets/img/look.png" alt="">查看</div>
<el-popconfirm
title="这是一段内容确定删除吗?"
>
<div class="vrcode-btn red-btn" slot="reference"><img src="../../assets/img/del.png" alt="">删除</div>
</el-popconfirm>
</div>
</div>
</div>
</div>
<el-dialog title="提示" top="5vh" :visible.sync="addModel" width="80%" class="vrcode-model" :append-to-body="true">
<div class="vrcode-model-title">
{{edit?'查看':'新增'}}种植计划
</div>
<div class="vrcode-content">
<div class="vrcode-view">
<div class="vrcode-input">
<div class="input-title">新增种植计划</div>
<input type="text" placeholder="请输入种植计划全称">
</div>
<div class="vrcode-input">
<div class="input-title">种植计划简称</div>
<input type="text" placeholder="请输入种植计划简称">
</div>
</div>
<div class="vrcode-view">
<div class="vrcode-title">种植信息</div>
<div class="vrcode-input-sel">
<div class="title">温室名称</div>
<el-dropdown @command="handleCommand">
<div class="el-dropdown-link">
<input v-model="TypeSel" type="text" class="input-input" placeholder="请选择温室号">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item, index in typeSelList" :key="index" :command="index">{{ item.name
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="vrcode-input-sel">
<div class="title">作物名称</div>
<el-dropdown @command="handleCommand">
<div class="el-dropdown-link">
<input v-model="TypeSel" type="text" class="input-input" placeholder="请选择作物名称">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item, index in typeSelList" :key="index" :command="index">{{ item.name
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="vrcode-input-sel">
<div class="title">作物品种</div>
<el-dropdown @command="handleCommand">
<div class="el-dropdown-link">
<input v-model="TypeSel" type="text" class="input-input" placeholder="请选择作物品种">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item, index in typeSelList" :key="index" :command="index">{{ item.name
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="vrcode-input">
<div class="input-title">品种介绍</div>
<input type="text" placeholder="请输入品种介绍">
</div>
<div class="vrcode-input">
<div class="input-title">种植规模()</div>
<input type="text" placeholder="请输入种植规模">
</div>
<div class="vrcode-input-sel">
<div class="title">栽培方式</div>
<el-dropdown @command="handleCommand">
<div class="el-dropdown-link">
<input v-model="TypeSel" type="text" class="input-input" placeholder="请选择栽培方式">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item, index in typeSelList" :key="index" :command="index">{{ item.name
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="vrcode-input-sel">
<div class="title">灌溉方式</div>
<el-dropdown @command="handleCommand">
<div class="el-dropdown-link">
<input v-model="TypeSel" type="text" class="input-input" placeholder="请选择灌溉方式">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item, index in typeSelList" :key="index" :command="index">{{ item.name
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="vrcode-view">
<div class="vrcode-title">播种信息</div>
<div class="vrcode-input-seltime">
<div class="title">播种日期</div>
<div class="seltime">
<el-date-picker v-model="value1" type="date" placeholder="请选择播种日期">
</el-date-picker>
<div class="seltime-icon">
<img src="../../assets/img/vrcode-time.png" alt="">
</div>
</div>
</div>
<div class="vrcode-input">
<div class="input-title">种子来源</div>
<input type="text" placeholder="请输入种子来源">
</div>
<div class="vrcode-input">
<div class="input-title">数量()</div>
<input type="text" placeholder="请输入种子数量">
</div>
<div class="vrcode-input">
<div class="input-title">价格</div>
<input type="text" placeholder="请输入价格">
</div>
<div class="vrcode-input-sel">
<div class="title">操作员</div>
<el-dropdown @command="handleCommand">
<div class="el-dropdown-link">
<input v-model="TypeSel" type="text" class="input-input" placeholder="请选择操作人员名称">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item, index in typeSelList" :key="index" :command="index">{{ item.name
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</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 < 6">
<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>
<div class="vrcode-view">
<div class="vrcode-title">播种信息</div>
<div class="vrcode-input">
<div class="input-title">灌溉水处理</div>
<input type="text" placeholder="请输入灌溉水处理">
</div>
<div class="vrcode-input">
<div class="input-title">水草的处理</div>
<input type="text" placeholder="请输入水草的处理">
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<div class="vrcode-btn save-btn" @click="addModel = false">保存</div>
<div class="vrcode-btn cancle-btn" @click="addModel = false">取消</div>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {}
return {
edit:false,
addModel: false,
typeSelList: [{ name: '1#平均空气温度', value: 1, },
{ name: '2#平均空气温度', value: 2, },
{ name: '1#空气温度', value: 3, },
{ name: '2#空气温度', value: 4, },
{ name: '3#空气温度', value: 5, },
{ name: '4#空气温度', value: 6, },
{ name: '5#空气温度', value: 7, },
{ name: '6#空气温度', value: 8, },
{ name: '7#空气温度', value: 9, },
{ name: '8#空气温度', value: 10, },],
TypeSel: '',
value1: '',
imgList: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']
}
},
mounted() { },
methods: {},
methods: {
handleCommand() {
},
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>