132 lines
3.1 KiB
Vue
132 lines
3.1 KiB
Vue
<route lang="json5" type="page">
|
|
{
|
|
layout: 'default',
|
|
style: {
|
|
navigationStyle: 'custom',
|
|
navigationBarTitleText: '生产数据',
|
|
},
|
|
}
|
|
</route>
|
|
<template>
|
|
<PageLayout :navbarShow="false">
|
|
<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 {
|
|
ref,
|
|
onMounted,
|
|
computed,
|
|
nextTick,
|
|
watchEffect,
|
|
onUnmounted
|
|
} from 'vue';
|
|
//、、东风风光的
|
|
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 + 50) + "px";
|
|
const scrollViewHeight = ref(0); //滚动控件的高度
|
|
|
|
const activeColor = ref("#0000ff")
|
|
const inActiveColor = ref("#000000")
|
|
|
|
function onClickItem(e) {
|
|
if (current.value != e.currentIndex) {
|
|
current.value = e.currentIndex;
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
calculateScrollViewHeight();
|
|
// 使用 Uniapp 提供的窗口大小变化监听方法
|
|
uni.onWindowResize(calculateScrollViewHeight);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
// 移除 Uniapp 窗口大小变化监听
|
|
uni.offWindowResize(calculateScrollViewHeight);
|
|
});
|
|
const calculateScrollViewHeight = () => {
|
|
// 获取屏幕的总高度
|
|
const screenHeight = uni.getSystemInfoSync().windowHeight;
|
|
// 创建一个选择器查询对象
|
|
const query = uni.createSelectorQuery();
|
|
// 选择所有需要计算高度的元素
|
|
query
|
|
.select('.nav')
|
|
.boundingClientRect();
|
|
|
|
// 执行查询操作
|
|
query.exec((res) => {
|
|
let totalHeight = 0;
|
|
res.forEach((element) => {
|
|
if (element) {
|
|
totalHeight += element.height;
|
|
}
|
|
});
|
|
// 计算 scroll-view 的高度
|
|
scrollViewHeight.value = screenHeight - totalHeight;
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.nav {
|
|
width: calc(100%);
|
|
height: v-bind(cusnavbarheight);
|
|
font-size: 24rpx;
|
|
//color: #333333;
|
|
position: fixed;
|
|
z-index: 99;
|
|
background-image: url('@/static/navbg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 750rpx 458rpx;
|
|
}
|
|
|
|
.nav_box {
|
|
font-size: 18;
|
|
|
|
position: absolute;
|
|
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> |