You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
2.8 KiB
Vue
123 lines
2.8 KiB
Vue
<template>
|
|
<view>
|
|
<view class="custom-navbar">
|
|
<button :class="{ active: activeButton === '产量汇总' }" @click="goToSummary('产量汇总')">产线产量汇总</button>
|
|
<button :class="{ active: activeButton === '品类汇总' }" @click="goToSummary('品类汇总')">当月品类汇总</button>
|
|
</view>
|
|
<!-- 页面内容 -->
|
|
<view class="content">
|
|
<!-- 动态加载的内容 -->
|
|
<component v-if="title" :is="currentComponent" :title="title" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import productionSummary from '@/components/production-summary.vue'; // 确保路径正确
|
|
import categorySummary from '@/components/category-summary.vue'; // 确保路径正确
|
|
export default {
|
|
name: 'Index',
|
|
components: {
|
|
productionSummary, // 注册组件
|
|
categorySummary
|
|
},
|
|
data() {
|
|
return {
|
|
currentComponent: 'productionSummary',
|
|
title: '' ,// 确保在 data 中定义了 title
|
|
activeButton: '产量汇总' // 默认激活按钮
|
|
};
|
|
},
|
|
onReady() {
|
|
//this.setNavigationBarTitle();
|
|
this.getTitleFromUrl(); // 从URL获取标题
|
|
|
|
},
|
|
methods: {
|
|
getTitleFromUrl() {
|
|
const query = this.$route.query;
|
|
console.log(query)
|
|
this.title = query.title || ''; // 如果没有找到标题，则默认为空
|
|
// 设置导航栏标题
|
|
const fullTitle = `生产日报表 ${this.title}`;
|
|
uni.setNavigationBarTitle({
|
|
title: fullTitle
|
|
});
|
|
},
|
|
goToSummary(type) {
|
|
this.activeButton = type; // 切换激活按钮
|
|
if (type === '产量汇总') {
|
|
this.currentComponent = 'productionSummary'; // 切换到产量汇总组件
|
|
} else if (type === '品类汇总') {
|
|
this.currentComponent = 'categorySummary'; // 切换到品类汇总组件
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.table-container {
|
|
width: 100%;
|
|
overflow-x: auto; /* 设置水平滚动 */
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
min-width: 1200px; /* 可选：设置表格的最小宽度 */
|
|
}
|
|
|
|
th, td {
|
|
border: 1px solid #000;
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
th {
|
|
background-color: #B0E0E6;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.highlight {
|
|
background-color: #B0E0E6;
|
|
}
|
|
.scroll-hint {
|
|
text-align: center;
|
|
margin: 10px 0;
|
|
font-size: 14px;
|
|
color: #FF6347;
|
|
}
|
|
.charts-box {
|
|
width: 100%;
|
|
height: 300px;
|
|
padding-top: 50px;
|
|
}
|
|
.custom-navbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #449dcc;
|
|
padding: 10px;
|
|
color: white;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
background-color: #87CEEB;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
button.active {
|
|
background-color: #4682B4; /* 深色背景 */
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #5A9BD4;
|
|
}
|
|
</style>
|