pull/35/head
孙萌 2023-11-15 11:53:23 +08:00
parent 1f51575bb0
commit ee88ac82f3
28 changed files with 541 additions and 67 deletions

View File

@ -1,20 +1,20 @@
@charset "UTF-8";
.scroll, .el-dropdown-menu, .formula .page-content, .history .page-content .el-table--scrollable-x .el-table__body-wrapper {
.scroll, .el-dropdown-menu, .index .index-content .right.right-page .page-content, .formula .page-content, .realTime, .history .page-content .el-table--scrollable-x .el-table__body-wrapper {
overflow-y: auto;
}
.scroll::-webkit-scrollbar, .el-dropdown-menu::-webkit-scrollbar, .formula .page-content::-webkit-scrollbar, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
.scroll::-webkit-scrollbar, .el-dropdown-menu::-webkit-scrollbar, .index .index-content .right.right-page .page-content::-webkit-scrollbar, .formula .page-content::-webkit-scrollbar, .realTime::-webkit-scrollbar, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
/*滚动条整体*/
width: 10px;
cursor: pointer;
}
.scroll::-webkit-scrollbar-track, .el-dropdown-menu::-webkit-scrollbar-track, .formula .page-content::-webkit-scrollbar-track, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track {
.scroll::-webkit-scrollbar-track, .el-dropdown-menu::-webkit-scrollbar-track, .index .index-content .right.right-page .page-content::-webkit-scrollbar-track, .formula .page-content::-webkit-scrollbar-track, .realTime::-webkit-scrollbar-track, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track {
/*滚动条轨道*/
background: #013769;
}
.scroll::-webkit-scrollbar-thumb, .el-dropdown-menu::-webkit-scrollbar-thumb, .formula .page-content::-webkit-scrollbar-thumb, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {
.scroll::-webkit-scrollbar-thumb, .el-dropdown-menu::-webkit-scrollbar-thumb, .index .index-content .right.right-page .page-content::-webkit-scrollbar-thumb, .formula .page-content::-webkit-scrollbar-thumb, .realTime::-webkit-scrollbar-thumb, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {
/*滚动条里面的滑块*/
width: 4px;
cursor: pointer;
@ -22,11 +22,11 @@
border: 3px solid #013769;
}
.scroll::-webkit-scrollbar-thumb:hover, .el-dropdown-menu::-webkit-scrollbar-thumb:hover, .formula .page-content::-webkit-scrollbar-thumb:hover, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
.scroll::-webkit-scrollbar-thumb:hover, .el-dropdown-menu::-webkit-scrollbar-thumb:hover, .index .index-content .right.right-page .page-content::-webkit-scrollbar-thumb:hover, .formula .page-content::-webkit-scrollbar-thumb:hover, .realTime::-webkit-scrollbar-thumb:hover, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
/*滚动条鼠标事件,鼠标放上去出现的事件*/
}
.scroll::-webkit-scrollbar-corner, .el-dropdown-menu::-webkit-scrollbar-corner, .formula .page-content::-webkit-scrollbar-corner, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-corner {
.scroll::-webkit-scrollbar-corner, .el-dropdown-menu::-webkit-scrollbar-corner, .index .index-content .right.right-page .page-content::-webkit-scrollbar-corner, .formula .page-content::-webkit-scrollbar-corner, .realTime::-webkit-scrollbar-corner, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-corner {
/*滚动条边角*/
}
@ -404,6 +404,19 @@
overflow: auto;
}
.index .index-content .right.right-page {
padding: 20px;
}
.index .index-content .right.right-page .page-content {
position: relative;
width: 100%;
height: 100%;
background: rgba(0, 92, 178, 0.15);
border: 2px solid rgba(0, 186, 255, 0.2);
padding: 30px 30px 20px;
}
.input-view {
display: flex;
align-items: center;
@ -1467,15 +1480,22 @@
width: 100%;
height: 100%;
padding: 20px;
flex-direction: column;
justify-content: unset;
}
.realTime .new-data {
margin-bottom: 20px;
}
.realTime .page-content {
position: relative;
width: 100%;
height: 100%;
height: auto;
flex-shrink: 0;
background: rgba(0, 92, 178, 0.15);
border: 2px solid rgba(0, 186, 255, 0.2);
padding: 30px 30px 20px;
padding: 30px 20px 20px;
}
.realTime .page-content .control-view {
@ -1635,6 +1655,62 @@
height: 100%;
}
.realTime .page-content .status-view {
width: 300px;
height: 300px;
background: rgba(0, 132, 255, 0.15);
border: 2px solid rgba(0, 186, 255, 0.35);
margin: 7.5px;
}
.realTime .page-content .status-view .status-view-top {
padding: 0 10px 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
border-bottom: 1px solid rgba(0, 180, 255, 0.35);
}
.realTime .page-content .status-view .status-view-top .status-view-top-left {
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
}
.realTime .page-content .status-view .status-view-top .status-view-top-right {
cursor: pointer;
padding: 0 10px;
}
.realTime .page-content .status-view .status-view-content {
width: 100%;
height: calc(100% - 51px);
}
.realTime .page-content .status-view .status-view-content .status-noTrue {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.realTime .page-content .status-view .status-view-content .status-noTrue > img {
width: 40px;
height: 35px;
margin-bottom: 20px;
}
.realTime .page-content .status-view .status-view-content .status-noTrue > div {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #8BEAFF;
}
.history .page-content {
width: 100%;
}
@ -2032,3 +2108,25 @@
font-weight: 400;
color: #FFFFFF;
}
.plantingPlan {
width: 100%;
height: 100%;
}
.plantingPlan .btn {
opacity: 1;
}
.plantingPlan .btn .img {
height: 20px;
width: 20px;
}
.plantingPlan .plan-view {
width: 440px;
height: 200px;
background: url(../img/plan-bg.png) no-repeat center;
background-size: 100% 100%;
margin: 7.5px 15px;
}

File diff suppressed because one or more lines are too long

View File

@ -426,6 +426,20 @@
width: calc(100% - 240px);
height: 100%;
overflow: auto;
&.right-page {
padding: 20px;
.page-content {
position: relative;
width: 100%;
height: 100%;
background: rgba(0, 92, 178, 0.15);
border: 2px solid rgba(0, 186, 255, 0.20);
padding: 30px 30px 20px;
@extend .scroll;
}
}
}
}
}
@ -1047,6 +1061,7 @@
.sensorSet {
height: 100%;
.sensor-view {
display: flex;
align-items: center;
@ -1124,7 +1139,8 @@
cursor: pointer;
white-space: nowrap;
margin-right: 30px;
padding:0 0 15px 0;
padding: 0 0 15px 0;
>.no-sel {
margin-right: 10px;
width: 35px;
@ -1161,26 +1177,30 @@
}
}
&.sensorSet-con{
.sensor-view{
&.sensorSet-con {
.sensor-view {
height: calc(100% - 120px);
}
.right-sel{
.right-sel {
width: 100%;
flex-wrap: wrap;
.sensor-type-div{
.sensor-type-div {
margin-bottom: 0;
background: unset;
border: none;
height: auto;
.sensor-sel{
>div{
.sensor-sel {
>div {
padding-left: 0;
}
}
}
}
}
.sensor-type {
.sensor-title {
font-size: 20px;
@ -1188,8 +1208,9 @@
font-weight: bold;
color: #FFFFFF;
padding: 20px 0;
.sensor-sel{
>div{
.sensor-sel {
>div {
padding-left: 0;
}
}
@ -1553,29 +1574,41 @@
width: 100%;
height: 100%;
padding: 20px;
flex-direction: column;
justify-content: unset;
@extend .scroll;
.new-data {
margin-bottom: 20px;
}
.page-content {
position: relative;
width: 100%;
height: 100%;
height: auto;
flex-shrink: 0;
background: rgba(0, 92, 178, 0.15);
border: 2px solid rgba(0, 186, 255, 0.20);
padding: 30px 30px 20px;
.control-view{
padding: 30px 20px 20px;
.control-view {
display: flex;
align-items: center;
position: absolute;
right: 30px;
top: 10px;
.title{
.title {
margin-right: 10px;
}
.control-list{
.control-list {
display: flex;
align-items: center;
overflow: hidden;
max-width: 806px;
>div {
// width: 100%!important;
display: flex;
@ -1588,11 +1621,13 @@
margin-right: 100px;
}
}
.list-view{
.list-view {
display: flex;
align-items: center;
margin-right: 10px;
.icon{
.icon {
width: 30px;
height: 30px;
}
@ -1725,6 +1760,63 @@
height: 100%;
}
}
.status-view {
width: 300px;
height: 300px;
background: rgba(0, 132, 255, 0.15);
border: 2px solid rgba(0, 186, 255, 0.35);
margin: 7.5px;
.status-view-top {
padding: 0 10px 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
border-bottom: 1px solid rgba(0, 180, 255, .35);
.status-view-top-left {
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
}
.status-view-top-right {
cursor: pointer;
padding: 0 10px;
}
}
.status-view-content {
width: 100%;
height: calc(100% - 51px);
.status-noTrue {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
>img {
width: 40px;
height: 35px;
margin-bottom: 20px;
}
>div {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #8BEAFF;
}
}
}
}
}
}
@ -2063,10 +2155,10 @@
border-bottom: 1px solid rgba(0, 180, 255, .75);
padding-bottom: 17px;
.table-header{
.table-header {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: bold;
font-family: Microsoft YaHei;
font-weight: bold;
}
}
@ -2075,16 +2167,19 @@ font-weight: bold;
border-top: 1px solid rgba(0, 180, 255, .75);
border-bottom: 1px solid rgba(0, 180, 255, .75);
overflow-x: scroll;
>div{
>div {
display: inline-block;
width: auto;
}
.table-header{
.table-header {
display: flex;
align-items: center;
justify-content: space-between;
>div{
width:70px;
>div {
width: 70px;
height: 100%;
display: flex;
align-items: center;
@ -2092,14 +2187,16 @@ font-weight: bold;
flex-shrink: 0;
}
}
.table-tr{
>div{
.table-tr {
>div {
display: flex;
align-items: center;
justify-content: space-between;
>div{
width:70px;
>div {
width: 70px;
height: 100%;
flex-shrink: 0;
display: flex;
@ -2109,19 +2206,24 @@ font-weight: bold;
}
}
}
.table-tr{
.table-tr {
width: 100%;
>div{
>div {
height: 60px;
text-align: center;
line-height: 60px;
}
>div:nth-child(odd){
>div:nth-child(odd) {
background: rgba(0, 47, 94, .35);
}
>div:nth-child(even){
background: rgba(0,180,255,0.2);
>div:nth-child(even) {
background: rgba(0, 180, 255, 0.2);
}
.no-sel {
width: 35px;
height: 35px;
@ -2139,6 +2241,7 @@ font-weight: bold;
cursor: pointer;
}
}
.table-header {
width: 100%;
height: 50px;
@ -2146,9 +2249,31 @@ font-weight: bold;
text-align: center;
background: rgba(0, 180, 255, 0.2);
font-size: 16px;
font-family: Arial;
font-weight: 400;
color: #FFFFFF;
font-family: Arial;
font-weight: 400;
color: #FFFFFF;
}
}
}
.plantingPlan {
width: 100%;
height: 100%;
.btn {
opacity: 1;
.img {
height: 20px;
width: 20px;
}
}
.plan-view {
width: 440px;
height: 200px;
background: url(../img/plan-bg.png) no-repeat center;
background-size: 100% 100%;
margin: 7.5px 15px;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 376 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 441 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 519 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 682 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 272 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 908 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 744 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -97,6 +97,18 @@ const routes = [
},]
},]
},
{
path: '/vrcode',
name: 'vrcode',
component: () => import('../views/vrcode.vue'),
redirect: '/plantingPlan',
children: [{
path: '/plantingPlan',
name: 'plantingPlan',
component: () => import('../views/vrcode/plantingPlan.vue')
}]
},
]
const router = new VueRouter({

View File

@ -1,6 +1,6 @@
<template>
<div class="formula realTime">
<div class="page-content">
<div class="page-content new-data">
<div class="control-view" v-if="deviceName == 10">
<div class="title">气象站:</div>
@ -62,6 +62,7 @@
<div class="right" id="realTime-line"></div>
</div>
</div>
</div>
</template>
<script>
@ -102,6 +103,8 @@ export default {
},
data() {
return {
statusList:[{name:'左向天窗',open:true,progress:55,isTrue:true,index:1},
{name:'右向天窗',open:true,progress:55,isTrue:false,index:2}],
time: null,//
list: [],
inputData: [],
@ -121,10 +124,10 @@ export default {
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
setTimeout(() => {
if(this.player){
if (this.player) {
this.player.stop()
that.player.destroy()
that.player=null
that.player = null
}
that.dataInit();
@ -155,7 +158,7 @@ export default {
// this.player.dispose();
this.player.stop()
this.player.destroy()
this.player=null
this.player = null
}
that.timer && clearInterval(that.timer)
this.$bus.$off('refreshTime')
@ -454,4 +457,39 @@ export default {
.video-js-select-quality-item {
color: rgba(0, 0, 0, 0.85) !important;
}
</style>
.set-status-blue {
color: #409eff;
font-size: 14px;
cursor: pointer;
padding: 5px 0;
}
.set-status-red {
color: red;
cursor: pointer;
font-size: 14px;
padding: 5px 0;
}
.del-text {
color: #000;
font-size: 14px;
}
.color-blue {
span {
color: #409eff;
font-size: 14px;
}
}
.status-save {
width: 45px;
height: 28px;
text-align: center;
border-radius: 4px;
border: 1px solid #dcdfe6;
color: #606266;
font-size: 14px;
}</style>

View File

@ -0,0 +1,170 @@
<template>
<div class="index">
<div class="header">
<div class="header-left">
<img src="../assets/image/logo.png" alt="">
</div>
<div class="header-center">
</div>
<div class="header-right" v-if="userInfo">
<img src="../assets/image/avatar.png" alt="">
<div class="user-data">
<div class="name">欢迎{{ userInfo.nickName }}</div>
<div class="time" v-if="time"> {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}</div>
</div>
<div class="login-out" @click="loginOut"></div>
</div>
</div>
<div class="index-content">
<div class="left collapse scroll">
<el-collapse v-model="activeNames">
<template v-for="item, index in leftList">
<el-collapse-item :name="index + 1" :key="index" v-if="!item.isRouter">
<template slot="title" class="collapse-title">
<div class="img"><img :src="item.img" alt=""></div> {{ item.name }}
</template>
<ul class="table-ul">
<li class="table-li" @click="toRouter1(item1)"
:class="item.routerList.indexOf(routerNow) != -1 && routerIndex == item1.index ? 'active' : ''"
v-for="item1, index1 in item.list" :key="index1">{{ item1.name }}
</li>
</ul>
</el-collapse-item>
<div @click="toRouter1(item)" :class="routerNow == item.router ? 'active' : ''" class="no-list"
v-else>
<div class="img"><img :src="item.img" alt=""></div>{{ item.name }}
</div>
</template>
</el-collapse>
</div>
<div class="right right-page">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import { getnowtime } from '../assets/js/nowTime'
export default {
data() {
return {
time: null,//
activeNames: [3],
leftList: [
{ name: '种植计划', img: require('../assets/image/vrcode-icon0.png'), list: [], router: '', isRouter: true, },
{ name: '生产环节', routerList: [], img: require('../assets/image/vrcode-icon1.png'), list: [{ name: '农事管理' }, { name: '施肥记录' }, { name: '打药记录' }, { name: '采摘记录' }, { name: '清洁记录' }, { name: '病虫害管理' },] },
{ name: '产品追溯', routerList: [], img: require('../assets/image/vrcode-icon2.png'), list: [{ name: '溯源批次' }, { name: '配置溯源版面' }, { name: '各种报告库' }] },
{ name: '基础信息设置', routerList: [], img: require('../assets/image/vrcode-icon3.png'), list: [{ name: '作物品种' }, { name: '种植栽培模式' }, { name: '农事作业工序' }, { name: '人员管理' }, { name: '农场信息管理' }, { name: '供应商管理' }, { name: '生产资料管理' }, { name: '农机工具管理' }, { name: '作物外观图片库' },] },],
routerNow: 'plantingPlan',
deviceName: 1,
routerIndex: 1,
equipmentList: [],
userInfo: null,
loading: true,//
IDTimer: null,
}
},
watch: {
"$route"(newName, oldName) {
this.gerRouter();
},
},
mounted() {
const that = this
this.getTime()
var router = this.$route.query
if (router.token && router.userid) {
localStorage.setItem('token', router.token)
this.api.getUser({ userId: router.userid }).then(res => {
var data = res.data.data
data.userid = router.userid
localStorage.setItem('userInfo', JSON.stringify(data))
this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
this.gerRouter();
// this.getEqbyid()
})
return
} else {
if (localStorage.getItem('token')) {
this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
}
this.gerRouter();
// this.getEqbyid()
}
this.IDTimer && clearInterval(this.IDTimer)
this.IDTimer = setInterval(() => {
// that.getEqbyid()
}, 120000);
},
beforeDestroy() {
this.IDTimer && clearInterval(this.IDTimer)
},
methods: {
gerRouter() {
var store = this.$store.state
this.routerIndex = this.$route.query.index ? this.$route.query.index : store.equipmentIndex
this.routerNow = this.$route.name;
if (store.equipmentList.length) {
this.deviceName = store.equipmentList[this.routerIndex - 1].deviceName
} else {
}
},
loginOut() {
this.api.loginOut().then((res) => {
if (res.data.code == 200) {
this.$message({
message: '退出登录成功',
type: "success",
});
localStorage.removeItem('token')
localStorage.removeItem('userInfo')
this.$router.push({ name: 'login' })
} else {
this.$message.error("请求出错");
}
})
},
toHome() {
this.$router.push({ name: 'home' })
},
toRouter(item) {
if (item.router) {
if (item.http) {
window.location.href = item.http;
}
} else {
this.$message('当前页面正在努力开发中');
}
},
toRouter1(item) {
if (item.router) {
if (item.http) {
window.location.href = item.http;
}
} else {
this.$message('当前页面正在努力开发中');
}
},
getTime() {
this.time = getnowtime()
const that = this
setInterval(() => {
that.time = getnowtime()
}, 1000);
},
},
}
</script>
<style lang="scss"></style>

View File

@ -0,0 +1,31 @@
<template>
<div class="plantingPlan">
<div class="page-content">
<div class="table-title">
<img src="../../assets/img/plan.png" alt="" />
种植计划
</div>
<div class="flex-view">
<div class="btn green"><img src="../../assets/img/add.png" alt="">新增种植计划</div>
</div>
<div class="flex-view border-none">
<div class="plan-view" v-for="item,index in 10">
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
mounted() { },
methods: {},
}
</script>
<style lang="scss"></style>