最新问题修改(自动滚动/时间用接口返回的)

pull/10/head
孙萌 2023-10-09 18:04:36 +08:00
parent 7f0587f3e3
commit 1b25ee3f1f
8 changed files with 196 additions and 95 deletions

View File

@ -1,5 +1,5 @@
{ {
"name": "ysws-vue", "name": "zhihuiyun",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {

View File

@ -1360,29 +1360,45 @@
margin-left: 10px; margin-left: 10px;
} }
.realTime .page-content .flex-list { .realTime .page-content .realTime-list {
display: flex; width: 100%;
align-items: center; overflow: hidden;
justify-content: space-around;
} }
.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; flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; 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; width: 80px;
height: 80px; height: 80px;
} }
.realTime .page-content .flex-list > div .text { .realTime .page-content .realTime-list .seamless-warp .list-view .text {
margin: 5px 0; margin: 5px 0;
} }
.realTime .page-content .flex-list > div .number { .realTime .page-content .realTime-list .seamless-warp .list-view .number {
width: 106px; width: 106px;
height: 40px; height: 40px;
background: url(../image/real-time-text.png) no-repeat center; background: url(../image/real-time-text.png) no-repeat center;
@ -1396,6 +1412,12 @@
justify-content: center; justify-content: center;
} }
.realTime .page-content .flex-list {
display: flex;
align-items: center;
justify-content: space-around;
}
.realTime .page-content .realTime-bottom { .realTime .page-content .realTime-bottom {
height: 440px; height: 440px;
margin-top: 30px; margin-top: 30px;

File diff suppressed because one or more lines are too long

View File

@ -1431,43 +1431,61 @@
margin-left: 10px; 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 { .flex-list {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
// flex-wrap: wrap; // 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;
}
}
} }

View File

@ -65,5 +65,12 @@ const router = new VueRouter({
base: process.env.BASE_URL, base: process.env.BASE_URL,
routes routes
}) })
router.beforeEach(async (to,from,next) => {
if (to.meta.title) { // 判断是否有标题
document.title = to.meta.title;
}else{
document.title ='温室智慧云'
}
next();
});
export default router export default router

View File

@ -44,7 +44,7 @@ export default {
}, },
}, },
mounted() { mounted() {
this.getTime() // this.getTime()
this.gerRouter(); this.gerRouter();
if (localStorage.getItem('token')) { if (localStorage.getItem('token')) {
@ -53,6 +53,10 @@ export default {
this.$router.push({ name: 'login' }) this.$router.push({ name: 'login' })
} }
this.$bus.$on('refreshTime',(res)=>{
console.log(res,'time');
this.time=res
})
}, },
methods: { methods: {
refreshData(){ refreshData(){

View File

@ -1,9 +1,10 @@
<template> <template>
<div class="formula realTime"> <div class="formula realTime">
<div class="page-content"> <div class="page-content">
<div class="timeNow" v-if="time"> <div class="timeNow" v-if="list.length">
{{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span> {{ time.time }}:{{ time.timeS <!-- {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span> {{ time.time }}:{{ time.timeS
}}</span> }}</span> -->
{{ list[0].updateTime?list[0].updateTime:'' }}
</div> </div>
<div class="table-title"> <div class="table-title">
<img src="../../assets/image/real-time.png" alt="" /> <img src="../../assets/image/real-time.png" alt="" />
@ -20,12 +21,15 @@
</div> </div>
</div> --> </div> -->
</div> </div>
<div class="flex-list scroll"> <div class="realTime-list" v-if="list.length">
<div class="" v-for="item, index in list " :key="index"> <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=""> <img :src="item.img" alt="">
<div class="text">{{ item.name }}</div> <div class="text">{{ item.name }}</div>
<div class="number">{{ item.num }}</div> <div class="number">{{ item.num }}</div>
</div> </div>
</vue-seamless>
</div> </div>
<div class="flex-list realTime-bottom"> <div class="flex-list realTime-bottom">
<div class="left"> <div class="left">
@ -43,8 +47,23 @@ import { getnowtime } from '../../assets/js/nowTime'
import { realTimeLine } from '@/assets/js/charts' import { realTimeLine } from '@/assets/js/charts'
import videojs from 'video.js'; import videojs from 'video.js';
import video_zhCN from 'video.js/dist/lang/zh-CN.json' import video_zhCN from 'video.js/dist/lang/zh-CN.json'
import vueSeamless from 'vue-seamless-scroll'
export default { 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() { data() {
return { return {
time: null,// time: null,//
@ -69,7 +88,7 @@ export default {
const that = this; const that = this;
this.indexs = this.$route.query.index ? this.$route.query.index : 1; this.indexs = this.$route.query.index ? this.$route.query.index : 1;
this.getTime() // this.getTime()
setTimeout(() => { setTimeout(() => {
@ -79,6 +98,7 @@ export default {
that.dataInit(); that.dataInit();
}, 60000); }, 60000);
}, 0); }, 0);
}, },
beforeDestroy() { beforeDestroy() {
const that = this; const that = this;
@ -87,6 +107,7 @@ export default {
this.player.dispose(); this.player.dispose();
} }
that.timer&&clearInterval(that.timer) that.timer&&clearInterval(that.timer)
this.$bus.$off('refreshTime')
}, },
methods: { methods: {
createVideo() { createVideo() {
@ -174,10 +195,12 @@ export default {
} }
this.list.push({ this.list.push({
...el,
name:name, name:name,
num: num, num: num,
img: require(`../../assets/image/real-time-${el.formula}.png`) img: require(`../../assets/image/real-time-${el.formula}.png`)
})
})
} }
}) })

View File

@ -35,8 +35,8 @@
</div> </div>
</div> </div>
<div class="left-btn"> <div class="left-btn">
<div :class="left1Act == 1&&left1Act==3 ? 'active' : ''">进水泵</div> <div :class="left1Act == 1 && left1Act == 3 ? 'active' : ''">进水泵</div>
<div :class="left1Act == 2&&left1Act==3 ? 'active' : ''">配肥泵</div> <div :class="left1Act == 2 && left1Act == 3 ? 'active' : ''">配肥泵</div>
</div> </div>
</div> </div>
@ -139,7 +139,7 @@ import vueSeamless from 'vue-seamless-scroll'
export default { export default {
data() { data() {
return { return {
pageTimer:null, pageTimer: null,
left1Act: -1, left1Act: -1,
openType: '', openType: '',
left2List: [ left2List: [
@ -260,7 +260,7 @@ export default {
centerBottom: [], centerBottom: [],
numberList: [273, 278, 283, 288, 293, 298], numberList: [273, 278, 283, 288, 293, 298],
inputData1: [], inputData1: [],
loading:true, loading: true,
} }
}, },
components: { vueSeamless }, components: { vueSeamless },
@ -279,26 +279,26 @@ export default {
} }
}, },
// //
beforeDestroy(){ beforeDestroy() {
const that = this; const that = this;
this.$bus.$off('refreshData') this.$bus.$off('refreshData')
// that.pageTimer&&clearInterval(that.pageTimer) that.pageTimer && clearInterval(that.pageTimer)
}, },
mounted() { mounted() {
const that = this; const that = this;
if (localStorage.getItem('token')) { if (localStorage.getItem('token')) {
that.getEqbyid(); that.getEqbyid();
// setTimeout(() => { setTimeout(() => {
// that.pageTimer&&clearInterval(that.pageTimer) that.pageTimer && clearInterval(that.pageTimer)
// that.pageTimer= setInterval(() => { that.pageTimer = setInterval(() => {
// that.getEqbyid(); that.getEqbyid();
// }, 5000); }, 5000);
// }, 0); }, 0);
} else { } else {
// this.$router.push({ name: 'login' }) // this.$router.push({ name: 'login' })
} }
this.$bus.$on('refreshData',(res)=>{ this.$bus.$on('refreshData', (res) => {
that.getEqbyid(); that.getEqbyid();
}) })
}, },
methods: { methods: {
@ -308,16 +308,16 @@ export default {
//2/10 //2/10
//3(-400) / 10 //3(-400) / 10
countType1(data) { countType1(data) {
var num=data - 400 var num = data - 400
return num.toFixed(2) return num.toFixed(2)
}, },
countType2(data) { countType2(data) {
var num=data / 10 var num = data / 10
return num.toFixed(2) return num.toFixed(2)
}, },
countType3(data) { countType3(data) {
var num=(data - 400) / 10 var num = (data - 400) / 10
return num.toFixed(2) return num.toFixed(2)
}, },
getTypeData(dataCode, typeCode) { getTypeData(dataCode, typeCode) {
@ -357,17 +357,17 @@ export default {
data: '1#EC ' + this.countData100(inputData['52']), data: '1#EC ' + this.countData100(inputData['52']),
ADdata: '2#EC ' + this.countData100(inputData['54']), ADdata: '2#EC ' + this.countData100(inputData['54']),
} }
this.tableList1[2] = { this.tableList1[2] = {
name: '传感器1', name: '传感器1',
data: this.getTypeData('40', '273'), data: this.getTypeData('40', '273'),
ADdata:inputData['39'], ADdata: inputData['39'],
} }
this.tableList1[3] = { this.tableList1[3] = {
name: '传感器2', name: '传感器2',
data: this.getTypeData('42', '278'), data: this.getTypeData('42', '278'),
ADdata:inputData['41'] , ADdata: inputData['41'],
} }
this.tableList1[4] = { this.tableList1[4] = {
@ -385,15 +385,15 @@ export default {
this.tableList1[6] = { this.tableList1[6] = {
name: '传感器5', name: '传感器5',
data: this.getTypeData('48', '293'), data: this.getTypeData('48', '293'),
ADdata:inputData['47'] , ADdata: inputData['47'],
} }
this.tableList1[7] = { this.tableList1[7] = {
name: '传感器6', name: '传感器6',
data: this.getTypeData('50', '298'), data: this.getTypeData('50', '298'),
ADdata:inputData['49'] , ADdata: inputData['49'],
} }
this.loading=false this.loading = false
}, },
getEqbyid() { getEqbyid() {
var store = this.$store.state var store = this.$store.state
@ -491,41 +491,51 @@ export default {
var statusIndex = 8 var statusIndex = 8
for (var j = 0; j < statusIndex; j++) { for (var j = 0; j < statusIndex; j++) {
if (Number(number[number.length-1 - j])) { if (Number(number[number.length - 1 - j])) {
if(j==0){ if (j == 0) {
this.right2Index.push('1') this.right2Index.push('1')
}else if(j==1){ } else if (j == 1) {
this.right2Index.push('0') this.right2Index.push('0')
}else{ } else {
this.right2Index.push(j) this.right2Index.push(j)
} }
} }
} }
console.log( this.right2Index,123); console.log(this.right2Index, 123);
}, },
// //
getData30() { getData30() {
// var number = this.padString(this.inputData['30'].toString(2), 2) // var number = this.padString(this.inputData['30'].toString(2), 2)
// if (Number(number[0])) { // if (Number(number[0])) {
// this.left1Act = 1 // this.left1Act = 1
// } // }
// if (Number(number[1])) { // if (Number(number[1])) {
// this.left1Act = 0 // this.left1Act = 0
// } // }
// if (Number(number[0])&&Number(number[1])) { // if (Number(number[0])&&Number(number[1])) {
// this.left1Act = 3 // this.left1Act = 3
// } // }
// else { // else {
// this.left1Act = -1 // this.left1Act = -1
// } // }
}, },
dataInit() { dataInit() {
const that = this
var deviceDetail = this.deviceDetail var deviceDetail = this.deviceDetail
var data = { var data = {
"equipmentId": deviceDetail.deviceId, "equipmentId": deviceDetail.deviceId,
"pattern": 0,// //6ph- "pattern": 0,// //6ph-
"regNum": 71 "regNum": 71
} }
var week = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
]
this.api.postState(data).then(res => { this.api.postState(data).then(res => {
if (res.data.code == 200) { if (res.data.code == 200) {
this.inputData = res.data.data; this.inputData = res.data.data;
@ -536,20 +546,37 @@ export default {
this.getleft2List()// this.getleft2List()//
this.getrightList3()// this.getrightList3()//
this.getcenterBottom()// 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 { } else {
this.$message.error(res.data.msg); this.$message.error(res.data.msg);
} }
}) })
}, },
checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
},
getReg() { getReg() {
var deviceDetail = this.deviceDetail var deviceDetail = this.deviceDetail
// //
var data1 = { var data1 = {
equipmentId: deviceDetail.deviceId, equipmentId: deviceDetail.deviceId,
pattern: 272, // //6ph- pattern: 272, // //6ph-
regNum: 31,//pattern regNum: 31,//pattern
}; };
this.api.postReg(data1).then((res) => { this.api.postReg(data1).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
this.inputData1 = res.data.data; this.inputData1 = res.data.data;