lj_uniapp/pages/index/index.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>