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

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

pull/10/head
孙萌 2023-10-09 18:04:36 +08:00
parent 7f0587f3e3
commit 1b25ee3f1f
8 changed files with 196 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

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

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

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

File diff suppressed because one or more lines are too long

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

@ -1431,19 +1431,28 @@
margin-left: 10px;
}
}
.flex-list {
.realTime-list{
width: 100%;
overflow: hidden;
.seamless-warp{
display: flex;
align-items: center;
justify-content: space-around;
// flex-wrap: wrap;
>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;
@ -1468,6 +1477,15 @@
justify-content: center;
}
}
}
}
.flex-list {
display: flex;
align-items: center;
justify-content: space-around;
// flex-wrap: wrap;
}

9
src/router/index.js
View File

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

6
src/views/HomeView.vue
View File

@ -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(){

37
src/views/page/realTime.vue
View File

@ -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,9 +195,11 @@ export default {
}
this.list.push({
...el,
name:name,
num: num,
img: require(`../../assets/image/real-time-${el.formula}.png`)
})
}

41
src/views/page/status.vue
View File

@ -282,18 +282,18 @@ export default {
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' })
}
@ -520,12 +520,22 @@ export default {
// }
},
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,12 +546,29 @@ 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
//获取传感器种类