修改生产模块页面,增加顶部标签,新建分包pages-production,将生产页面移动至分包下面。

下一步制作曲线页面,统计页面,继续做好设备,安防等页面。
This commit is contained in:
liaodeyun 2025-09-11 17:58:34 +08:00
parent adcdb86db7
commit 5a6d68bd19

View File

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