最新问题修改(自动滚动/时间用接口返回的)
孙萌
parent
7f0587f3e3
commit
1b25ee3f1f
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "ysws-vue",
|
||||
"name": "zhihuiyun",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -1360,29 +1360,45 @@
|
|||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.realTime .page-content .flex-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.realTime .page-content .realTime-list {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.realTime .page-content .flex-list > div {
|
||||
.realTime .page-content .realTime-list .seamless-warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.realTime .page-content .realTime-list .seamless-warp > div {
|
||||
display: flex;
|
||||
overflow: unset !important;
|
||||
}
|
||||
|
||||
.realTime .page-content .realTime-list .seamless-warp > div > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.realTime .page-content .realTime-list .seamless-warp .list-view {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.realTime .page-content .flex-list > div img {
|
||||
.realTime .page-content .realTime-list .seamless-warp .list-view img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.realTime .page-content .flex-list > div .text {
|
||||
.realTime .page-content .realTime-list .seamless-warp .list-view .text {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.realTime .page-content .flex-list > div .number {
|
||||
.realTime .page-content .realTime-list .seamless-warp .list-view .number {
|
||||
width: 106px;
|
||||
height: 40px;
|
||||
background: url(../image/real-time-text.png) no-repeat center;
|
||||
|
|
@ -1396,6 +1412,12 @@
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.realTime .page-content .flex-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.realTime .page-content .realTime-bottom {
|
||||
height: 440px;
|
||||
margin-top: 30px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1431,43 +1431,61 @@
|
|||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.realTime-list{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.seamless-warp{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>div{
|
||||
// width: 100%!important;
|
||||
display: flex;
|
||||
overflow: unset!important;
|
||||
>div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
.list-view {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.number {
|
||||
width: 106px;
|
||||
height: 40px;
|
||||
background: url(../image/real-time-text.png) no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
font-size: 20px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.flex-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
// flex-wrap: wrap;
|
||||
|
||||
>div {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.number {
|
||||
width: 106px;
|
||||
height: 40px;
|
||||
background: url(../image/real-time-text.png) no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
font-size: 20px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -65,5 +65,12 @@ const router = new VueRouter({
|
|||
base: process.env.BASE_URL,
|
||||
routes
|
||||
})
|
||||
|
||||
router.beforeEach(async (to,from,next) => {
|
||||
if (to.meta.title) { // 判断是否有标题
|
||||
document.title = to.meta.title;
|
||||
}else{
|
||||
document.title ='温室智慧云'
|
||||
}
|
||||
next();
|
||||
});
|
||||
export default router
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export default {
|
|||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getTime()
|
||||
// this.getTime()
|
||||
this.gerRouter();
|
||||
|
||||
if (localStorage.getItem('token')) {
|
||||
|
|
@ -53,6 +53,10 @@ export default {
|
|||
this.$router.push({ name: 'login' })
|
||||
|
||||
}
|
||||
this.$bus.$on('refreshTime',(res)=>{
|
||||
console.log(res,'time');
|
||||
this.time=res
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
refreshData(){
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<div class="formula realTime">
|
||||
<div class="page-content">
|
||||
<div class="timeNow" v-if="time">
|
||||
{{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span> {{ time.time }}:{{ time.timeS
|
||||
}}</span>
|
||||
<div class="timeNow" v-if="list.length">
|
||||
<!-- {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span> {{ time.time }}:{{ time.timeS
|
||||
}}</span> -->
|
||||
{{ list[0].updateTime?list[0].updateTime:'' }}
|
||||
</div>
|
||||
<div class="table-title">
|
||||
<img src="../../assets/image/real-time.png" alt="" />
|
||||
|
|
@ -20,12 +21,15 @@
|
|||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="flex-list scroll">
|
||||
<div class="" v-for="item, index in list " :key="index">
|
||||
<div class="realTime-list" v-if="list.length">
|
||||
<vue-seamless class="seamless-warp" :data="list" :class-option="defaultOption">
|
||||
<div class="list-view" v-for="item, index in list " :key="index">
|
||||
<img :src="item.img" alt="">
|
||||
<div class="text">{{ item.name }}</div>
|
||||
<div class="number">{{ item.num }}</div>
|
||||
</div>
|
||||
</vue-seamless>
|
||||
|
||||
</div>
|
||||
<div class="flex-list realTime-bottom">
|
||||
<div class="left">
|
||||
|
|
@ -43,8 +47,23 @@ import { getnowtime } from '../../assets/js/nowTime'
|
|||
import { realTimeLine } from '@/assets/js/charts'
|
||||
import videojs from 'video.js';
|
||||
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
|
||||
import vueSeamless from 'vue-seamless-scroll'
|
||||
export default {
|
||||
|
||||
components: { vueSeamless },
|
||||
computed: {
|
||||
defaultOption() {
|
||||
return {
|
||||
step: 0.3, // 数值越大速度滚动越快
|
||||
limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 2, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: null,//右上角时间
|
||||
|
|
@ -69,7 +88,7 @@ export default {
|
|||
const that = this;
|
||||
this.indexs = this.$route.query.index ? this.$route.query.index : 1;
|
||||
|
||||
this.getTime()
|
||||
// this.getTime()
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
|
|
@ -79,6 +98,7 @@ export default {
|
|||
that.dataInit();
|
||||
}, 60000);
|
||||
}, 0);
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
const that = this;
|
||||
|
|
@ -87,6 +107,7 @@ export default {
|
|||
this.player.dispose();
|
||||
}
|
||||
that.timer&&clearInterval(that.timer)
|
||||
this.$bus.$off('refreshTime')
|
||||
},
|
||||
methods: {
|
||||
createVideo() {
|
||||
|
|
@ -174,10 +195,12 @@ export default {
|
|||
}
|
||||
|
||||
this.list.push({
|
||||
...el,
|
||||
name:name,
|
||||
num: num,
|
||||
img: require(`../../assets/image/real-time-${el.formula}.png`)
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="left-btn">
|
||||
<div :class="left1Act == 1&&left1Act==3 ? 'active' : ''">进水泵</div>
|
||||
<div :class="left1Act == 2&&left1Act==3 ? 'active' : ''">配肥泵</div>
|
||||
<div :class="left1Act == 1 && left1Act == 3 ? 'active' : ''">进水泵</div>
|
||||
<div :class="left1Act == 2 && left1Act == 3 ? 'active' : ''">配肥泵</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -139,7 +139,7 @@ import vueSeamless from 'vue-seamless-scroll'
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
pageTimer:null,
|
||||
pageTimer: null,
|
||||
left1Act: -1,
|
||||
openType: '',
|
||||
left2List: [
|
||||
|
|
@ -260,7 +260,7 @@ export default {
|
|||
centerBottom: [],
|
||||
numberList: [273, 278, 283, 288, 293, 298],
|
||||
inputData1: [],
|
||||
loading:true,
|
||||
loading: true,
|
||||
}
|
||||
},
|
||||
components: { vueSeamless },
|
||||
|
|
@ -279,26 +279,26 @@ export default {
|
|||
}
|
||||
},
|
||||
//清除监听
|
||||
beforeDestroy(){
|
||||
beforeDestroy() {
|
||||
const that = this;
|
||||
this.$bus.$off('refreshData')
|
||||
// that.pageTimer&&clearInterval(that.pageTimer)
|
||||
that.pageTimer && clearInterval(that.pageTimer)
|
||||
},
|
||||
mounted() {
|
||||
const that = this;
|
||||
if (localStorage.getItem('token')) {
|
||||
that.getEqbyid();
|
||||
// setTimeout(() => {
|
||||
// that.pageTimer&&clearInterval(that.pageTimer)
|
||||
// that.pageTimer= setInterval(() => {
|
||||
// that.getEqbyid();
|
||||
// }, 5000);
|
||||
// }, 0);
|
||||
setTimeout(() => {
|
||||
that.pageTimer && clearInterval(that.pageTimer)
|
||||
that.pageTimer = setInterval(() => {
|
||||
that.getEqbyid();
|
||||
}, 5000);
|
||||
}, 0);
|
||||
} else {
|
||||
// this.$router.push({ name: 'login' })
|
||||
}
|
||||
this.$bus.$on('refreshData',(res)=>{
|
||||
that.getEqbyid();
|
||||
this.$bus.$on('refreshData', (res) => {
|
||||
that.getEqbyid();
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -308,16 +308,16 @@ export default {
|
|||
//2是原数据/10
|
||||
//3是(原数据-400) / 10
|
||||
countType1(data) {
|
||||
var num=data - 400
|
||||
var num = data - 400
|
||||
return num.toFixed(2)
|
||||
},
|
||||
countType2(data) {
|
||||
var num=data / 10
|
||||
var num = data / 10
|
||||
return num.toFixed(2)
|
||||
},
|
||||
countType3(data) {
|
||||
|
||||
var num=(data - 400) / 10
|
||||
var num = (data - 400) / 10
|
||||
return num.toFixed(2)
|
||||
},
|
||||
getTypeData(dataCode, typeCode) {
|
||||
|
|
@ -357,17 +357,17 @@ export default {
|
|||
data: '1#EC ' + this.countData100(inputData['52']),
|
||||
ADdata: '2#EC ' + this.countData100(inputData['54']),
|
||||
}
|
||||
|
||||
|
||||
this.tableList1[2] = {
|
||||
name: '传感器1',
|
||||
data: this.getTypeData('40', '273'),
|
||||
ADdata:inputData['39'],
|
||||
ADdata: inputData['39'],
|
||||
}
|
||||
|
||||
this.tableList1[3] = {
|
||||
name: '传感器2',
|
||||
data: this.getTypeData('42', '278'),
|
||||
ADdata:inputData['41'] ,
|
||||
ADdata: inputData['41'],
|
||||
}
|
||||
|
||||
this.tableList1[4] = {
|
||||
|
|
@ -385,15 +385,15 @@ export default {
|
|||
this.tableList1[6] = {
|
||||
name: '传感器5',
|
||||
data: this.getTypeData('48', '293'),
|
||||
ADdata:inputData['47'] ,
|
||||
ADdata: inputData['47'],
|
||||
}
|
||||
|
||||
this.tableList1[7] = {
|
||||
name: '传感器6',
|
||||
data: this.getTypeData('50', '298'),
|
||||
ADdata:inputData['49'] ,
|
||||
ADdata: inputData['49'],
|
||||
}
|
||||
this.loading=false
|
||||
this.loading = false
|
||||
},
|
||||
getEqbyid() {
|
||||
var store = this.$store.state
|
||||
|
|
@ -491,41 +491,51 @@ export default {
|
|||
|
||||
var statusIndex = 8
|
||||
for (var j = 0; j < statusIndex; j++) {
|
||||
if (Number(number[number.length-1 - j])) {
|
||||
if(j==0){
|
||||
if (Number(number[number.length - 1 - j])) {
|
||||
if (j == 0) {
|
||||
this.right2Index.push('1')
|
||||
}else if(j==1){
|
||||
} else if (j == 1) {
|
||||
this.right2Index.push('0')
|
||||
}else{
|
||||
} else {
|
||||
this.right2Index.push(j)
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log( this.right2Index,123);
|
||||
console.log(this.right2Index, 123);
|
||||
},
|
||||
//进水泵和出水泵状态
|
||||
getData30() {
|
||||
// var number = this.padString(this.inputData['30'].toString(2), 2)
|
||||
// if (Number(number[0])) {
|
||||
// this.left1Act = 1
|
||||
// }
|
||||
// if (Number(number[1])) {
|
||||
// this.left1Act = 0
|
||||
// }
|
||||
// if (Number(number[0])&&Number(number[1])) {
|
||||
// this.left1Act = 3
|
||||
// }
|
||||
// var number = this.padString(this.inputData['30'].toString(2), 2)
|
||||
// if (Number(number[0])) {
|
||||
// this.left1Act = 1
|
||||
// }
|
||||
// if (Number(number[1])) {
|
||||
// this.left1Act = 0
|
||||
// }
|
||||
// if (Number(number[0])&&Number(number[1])) {
|
||||
// this.left1Act = 3
|
||||
// }
|
||||
// else {
|
||||
// this.left1Act = -1
|
||||
// }
|
||||
},
|
||||
dataInit() {
|
||||
const that = this
|
||||
var deviceDetail = this.deviceDetail
|
||||
var data = {
|
||||
"equipmentId": deviceDetail.deviceId,
|
||||
"pattern": 0,//需要根据文档填写 //6目标ph-数值
|
||||
"regNum": 71
|
||||
}
|
||||
var week = [
|
||||
"星期日",
|
||||
"星期一",
|
||||
"星期二",
|
||||
"星期三",
|
||||
"星期四",
|
||||
"星期五",
|
||||
"星期六",
|
||||
]
|
||||
this.api.postState(data).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.inputData = res.data.data;
|
||||
|
|
@ -536,20 +546,37 @@ export default {
|
|||
this.getleft2List()//获取左下角数据
|
||||
this.getrightList3()//获取又下角数据
|
||||
this.getcenterBottom()//获取电磁阀
|
||||
var h = this.checkTime(this.inputData[3])
|
||||
var m = this.checkTime(this.inputData[4])
|
||||
var month_ = this.checkTime(this.inputData[1])
|
||||
var date_ = this.checkTime(this.inputData[2])
|
||||
var time = {
|
||||
year: { year: this.inputData[0], month: month_, date: date_ },
|
||||
week: week[this.inputData[5]],
|
||||
time: h + ":" + m,
|
||||
}
|
||||
this.$bus.$emit('refreshTime',time)
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
checkTime(i) {
|
||||
if (i < 10) {
|
||||
i = "0" + i;
|
||||
}
|
||||
|
||||
return i;
|
||||
},
|
||||
getReg() {
|
||||
var deviceDetail = this.deviceDetail
|
||||
//获取传感器种类
|
||||
var data1 = {
|
||||
equipmentId: deviceDetail.deviceId,
|
||||
pattern: 272, //需要根据文档填写 //6目标ph-数值
|
||||
regNum: 31,//从pattern取多少个数据
|
||||
};
|
||||
//获取传感器种类
|
||||
var data1 = {
|
||||
equipmentId: deviceDetail.deviceId,
|
||||
pattern: 272, //需要根据文档填写 //6目标ph-数值
|
||||
regNum: 31,//从pattern取多少个数据
|
||||
};
|
||||
this.api.postReg(data1).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.inputData1 = res.data.data;
|
||||
|
|
|
|||
Loading…
Reference in New Issue