修改生产模块页面,增加顶部标签,新建分包pages-production,将生产页面移动至分包下面。
下一步制作曲线页面,统计页面,继续做好设备,安防等页面。
This commit is contained in:
parent
adcdb86db7
commit
5a6d68bd19
@ -9,51 +9,35 @@
|
|||||||
</route>
|
</route>
|
||||||
<template>
|
<template>
|
||||||
<PageLayout :navbarShow="false">
|
<PageLayout :navbarShow="false">
|
||||||
<view>
|
<view class="nav">
|
||||||
<view class="placeholder"></view>
|
<view class="nav_box">
|
||||||
<view style="width: 100%; display: grid; place-items: center">
|
<scroll-view direction="horizontal">
|
||||||
<uni-title :title="dateDate + ':生产情况'" type="h1" color="blue" />
|
<uni-segmented-control :current="current" :values="items" styleType="string" mode="segmented"
|
||||||
|
@clickItem="onClickItem"></uni-segmented-control>
|
||||||
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
<view style="margin: 0 10px;">
|
|
||||||
<uni-segmented-control style="margin-top: 10px;margin-bottom: 10px" :current="current" :values="items"
|
|
||||||
@clickItem="onClickItem" styleType="button" activeColor="#0055ff"></uni-segmented-control>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
|
|
||||||
<view v-if="current === 0">
|
<view v-if="current === 0">
|
||||||
<view style="padding: 0 10px">
|
<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
|
||||||
<view class="progress-bartime">
|
<sssjData></sssjData>
|
||||||
<!-- 动态设置宽度和颜色 -->
|
</scroll-view>
|
||||||
<view class="progressTime"
|
|
||||||
:style="{ width: `${timePercent}%`, 'background-color': '#0055ff' }">
|
|
||||||
</view>
|
|
||||||
<!-- 显示带符号的百分比 -->
|
|
||||||
<text class="progress-text">全年时间进度:{{ timePercent }}%</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
<view v-if="current === 1">
|
||||||
<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
|
<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
|
||||||
<trq-data></trq-data>
|
<trq-data></trq-data>
|
||||||
<yy-data></yy-data>
|
<yy-data></yy-data>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="current === 1">
|
|
||||||
<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
|
|
||||||
<sssjForm></sssjForm>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import trqData from './ribaoshuju/trqRbsj';
|
|
||||||
import yyData from './ribaoshuju/yyRbsj';
|
|
||||||
import sssjForm from './shishishuju/index';
|
|
||||||
import {
|
|
||||||
formatDate,
|
|
||||||
getDateAfterDays,
|
|
||||||
getYearProgress
|
|
||||||
} from '@/utils/dateTime';
|
|
||||||
import {
|
import {
|
||||||
ref,
|
ref,
|
||||||
onMounted,
|
onMounted,
|
||||||
@ -62,14 +46,19 @@
|
|||||||
watchEffect,
|
watchEffect,
|
||||||
onUnmounted
|
onUnmounted
|
||||||
} from 'vue';
|
} from 'vue';
|
||||||
const items = ref(['日报数据', '实时数据'])
|
//、、东风风光的
|
||||||
|
import trqData from '@/pages-production/ribaoshuju/trqRbsj';
|
||||||
|
import yyData from '@/pages-production/ribaoshuju/yyRbsj';
|
||||||
|
import sssjData from '@/pages-production/shishishuju/trqSssj';
|
||||||
|
const items = ref(['油气实时', '油气历史', '管线运行', '安防监控', '设备运行'])
|
||||||
const current = ref(0)
|
const current = ref(0)
|
||||||
const res = wx.getSystemInfoSync();
|
const res = wx.getSystemInfoSync();
|
||||||
const statusHeight = res.statusBarHeight; //状态栏高度
|
const statusHeight = res.statusBarHeight; //状态栏高度
|
||||||
const cusnavbarheight = statusHeight + 44 + 'px';
|
const cusnavbarheight = (statusHeight + 50) + "px";
|
||||||
const scrollViewHeight = ref(0); //状态栏高度
|
const scrollViewHeight = ref(0); //滚动控件的高度
|
||||||
const timePercent = ref(0);
|
|
||||||
const dateDate = ref('');
|
const activeColor = ref("#0000ff")
|
||||||
|
const inActiveColor = ref("#000000")
|
||||||
|
|
||||||
function onClickItem(e) {
|
function onClickItem(e) {
|
||||||
if (current.value != e.currentIndex) {
|
if (current.value != e.currentIndex) {
|
||||||
@ -77,31 +66,16 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const strDate = () => {
|
|
||||||
const now = new Date();
|
|
||||||
if (now.getHours() < 11) {
|
|
||||||
return formatDate(getDateAfterDays(now, -1)); //11点之前 头一天的数据
|
|
||||||
} else {
|
|
||||||
return formatDate(now);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
dateDate.value = strDate();
|
|
||||||
timePercent.value = getYearProgress();
|
|
||||||
calculateScrollViewHeight();
|
calculateScrollViewHeight();
|
||||||
// 监听窗口大小变化事件,当窗口大小改变时重新计算高度
|
// 使用 Uniapp 提供的窗口大小变化监听方法
|
||||||
window.addEventListener('resize', calculateScrollViewHeight);
|
uni.onWindowResize(calculateScrollViewHeight);
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
// 移除窗口大小变化事件监听器
|
// 移除 Uniapp 窗口大小变化监听
|
||||||
window.removeEventListener('resize', calculateScrollViewHeight);
|
uni.offWindowResize(calculateScrollViewHeight);
|
||||||
});
|
});
|
||||||
|
|
||||||
onHide(()=>{ //切换首页后,将生产切换为日本数据以清楚定时 by闵
|
|
||||||
current.value = 0;
|
|
||||||
})
|
|
||||||
|
|
||||||
const calculateScrollViewHeight = () => {
|
const calculateScrollViewHeight = () => {
|
||||||
// 获取屏幕的总高度
|
// 获取屏幕的总高度
|
||||||
const screenHeight = uni.getSystemInfoSync().windowHeight;
|
const screenHeight = uni.getSystemInfoSync().windowHeight;
|
||||||
@ -111,18 +85,7 @@
|
|||||||
query
|
query
|
||||||
.select('.nav')
|
.select('.nav')
|
||||||
.boundingClientRect();
|
.boundingClientRect();
|
||||||
query
|
|
||||||
.select('.placeholder')
|
|
||||||
.boundingClientRect();
|
|
||||||
query
|
|
||||||
.select('.uni-title')
|
|
||||||
.boundingClientRect();
|
|
||||||
query
|
|
||||||
.select('.uni-segmented-control')
|
|
||||||
.boundingClientRect();
|
|
||||||
query
|
|
||||||
.select('.progress-bartime')
|
|
||||||
.boundingClientRect();
|
|
||||||
// 执行查询操作
|
// 执行查询操作
|
||||||
query.exec((res) => {
|
query.exec((res) => {
|
||||||
let totalHeight = 0;
|
let totalHeight = 0;
|
||||||
@ -132,62 +95,38 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
// 计算 scroll-view 的高度
|
// 计算 scroll-view 的高度
|
||||||
scrollViewHeight.value = screenHeight - totalHeight - 80;
|
scrollViewHeight.value = screenHeight - totalHeight;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.nav {
|
.nav {
|
||||||
width: calc(100% - 60rpx);
|
width: calc(100%);
|
||||||
padding: 0 30rpx;
|
|
||||||
height: v-bind(cusnavbarheight);
|
height: v-bind(cusnavbarheight);
|
||||||
|
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #ffffff;
|
//color: #333333;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
background-image: url('../../static/my/navbg.png');
|
background-image: url('@/static/navbg.png');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 750rpx 458rpx;
|
background-size: 750rpx 458rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.placeholder {
|
.nav_box {
|
||||||
height: v-bind(cusnavbarheight);
|
font-size: 18;
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bartime {
|
|
||||||
position: relative;
|
|
||||||
height: 25px;
|
|
||||||
background: #f0f0f0;
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progressTime {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-text {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
bottom: 6rpx;
|
||||||
top: 50%;
|
width: calc(100% - 60rpx);
|
||||||
transform: translate(-50%, -50%);
|
left: 30rpx;
|
||||||
color: red;
|
right: 30rpx;
|
||||||
/* 保持红色 */
|
}
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
.content {
|
||||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
position: absolute;
|
||||||
/* 提升可读性 */
|
top: v-bind(cusnavbarheight);
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - v-bind(cusnavbarheight));
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
Loading…
Reference in New Issue
Block a user