ldeyun/jeecgBootUniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
下一步制作曲线页面，统计页面，继续做好设备，安防等页面。
This commit is contained in:
liaodeyun 2025-09-11 17:58:34 +08:00
parent adcdb86db7
commit 5a6d68bd19
1 changed files with 55 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
src/pages/production/index.vue
View File

@ -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>
<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>
</view>
<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 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>
<view class="content">
<view v-if="current === 0">
<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>
</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>