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