347 lines
9.3 KiB
Vue
347 lines
9.3 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 简洁标签栏 -->
|
||
<view class="tab-container">
|
||
<view
|
||
v-for="item in tabData"
|
||
:key="item.value"
|
||
@click="currentTab = item.value"
|
||
class="tab-item"
|
||
:class="{ 'tab-active': currentTab === item.value }"
|
||
>
|
||
<text class="tab-label">{{ item.text }}</text>
|
||
<view class="tab-indicator" v-if="currentTab === item.value"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view scroll-y v-if="currentTab === 1">
|
||
<view class="content-card">
|
||
<view class="metric-container">
|
||
<!-- 网络状态指标 -->
|
||
<view class="metric-item">
|
||
<view class="metric-value">
|
||
正常
|
||
</view>
|
||
<view class="metric-label">
|
||
网络状态
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 班组指标 -->
|
||
<view class="metric-item">
|
||
<view class="metric-value team-number">
|
||
乙 / 中
|
||
</view>
|
||
<view class="metric-label">
|
||
当前班组
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content-card">
|
||
<klp-collapse-panel title="状态统计">
|
||
<qiun-data-charts type="line" :chartData="chartData" />
|
||
</klp-collapse-panel>
|
||
</view>
|
||
|
||
<view class="content-card">
|
||
<klp-collapse-panel title="轧机状态">
|
||
<qiun-data-charts type="column" :chartData="chartData" />
|
||
</klp-collapse-panel>
|
||
</view>
|
||
|
||
<view class="content-card">
|
||
<klp-collapse-panel title="机组跟踪">
|
||
<view style="padding: 30rpx; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 20rpx;">
|
||
<view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border-radius: 10rpx;">
|
||
<text>轧机</text>
|
||
<text>6390000</text>
|
||
</view>
|
||
|
||
<view style="border-radius: 10rpx; overflow: hidden;">
|
||
<view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border: 1px solid #d9edf6;">
|
||
<text>圆剪盘</text>
|
||
<text>6390000</text>
|
||
</view>
|
||
<view class="info-container">
|
||
<view class="info-row">
|
||
<view class="info-item">
|
||
<text class="info-label">设备编号：</text>
|
||
<text class="info-value">M-001</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">运行状态：</text>
|
||
<text class="info-value">正常</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="info-row">
|
||
<view class="info-item">
|
||
<text class="info-label">当前产量：</text>
|
||
<text class="info-value">2580 件</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">合格率：</text>
|
||
<text class="info-value">98.5%</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border-radius: 10rpx;">
|
||
<text>酸洗</text>
|
||
<text>6390000</text>
|
||
</view>
|
||
|
||
<view style="border-radius: 10rpx; overflow: hidden;">
|
||
<view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border: 1px solid #d9edf6;">
|
||
<text>入口活套</text>
|
||
<text>6390000</text>
|
||
</view>
|
||
<view class="info-container">
|
||
<view class="info-row">
|
||
<view class="info-item">
|
||
<text class="info-label">设备编号：</text>
|
||
<text class="info-value">M-001</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">运行状态：</text>
|
||
<text class="info-value">正常</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="info-row">
|
||
<view class="info-item">
|
||
<text class="info-label">当前产量：</text>
|
||
<text class="info-value">2580 件</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">合格率：</text>
|
||
<text class="info-value">98.5%</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</klp-collapse-panel>
|
||
</view>
|
||
|
||
<view class="content-card">
|
||
<klp-collapse-panel title="能耗">
|
||
<view class="metric-container">
|
||
<!-- 工艺线速度指标 -->
|
||
<view class="metric-item">
|
||
<view class="metric-value">
|
||
9.9
|
||
</view>
|
||
<view class="metric-label">
|
||
工艺缎带钢线速度
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 出口线速度指标 -->
|
||
<view class="metric-item">
|
||
<view class="metric-value team-number">
|
||
126.0
|
||
</view>
|
||
<view class="metric-label">
|
||
轧机出口带钢线速度
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</klp-collapse-panel>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<scroll-view scroll-y v-if="currentTab == 2">
|
||
<klp-product-statistic></klp-product-statistic>
|
||
</scroll-view>
|
||
|
||
<scroll-view scroll-y v-if="currentTab == 3">
|
||
<klp-shutdown-statistic></klp-shutdown-statistic>
|
||
</scroll-view>
|
||
|
||
<scroll-view scroll-y v-if="currentTab == 4">
|
||
<klp-team-performance></klp-team-performance>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
// 3. 响应式数据（替代 Vue 3 的 ref）
|
||
data() {
|
||
return {
|
||
currentTab: 1, // 当前激活的标签页（默认实时监控）
|
||
tabData: [ // 标签页配置
|
||
{ text: "实时监控", value: 1 },
|
||
{ text: "生产统计", value: 2 },
|
||
{ text: "停机统计", value: 3 },
|
||
{ text: "班组绩效", value: 4 }
|
||
],
|
||
chartData: {} // 图表数据（初始化空对象，后续加载）
|
||
};
|
||
},
|
||
// 4. 生命周期钩子（替代 Vue 3 的 onMounted）
|
||
mounted() {
|
||
this.getServerData(); // 页面挂载后加载图表数据
|
||
},
|
||
// 5. 方法定义（所有数据处理与逻辑）
|
||
methods: {
|
||
// 模拟从服务器获取图表数据
|
||
getServerData() {
|
||
setTimeout(() => {
|
||
// 模拟服务器返回的图表数据
|
||
const serverRes = {
|
||
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
|
||
series: [
|
||
{ name: "目标值", data: [35, 36, 31, 33, 13, 34] },
|
||
{ name: "完成量", data: [18, 27, 21, 24, 6, 28] }
|
||
]
|
||
};
|
||
// 深拷贝避免 Vue 2 响应式引用问题
|
||
this.chartData = JSON.parse(JSON.stringify(serverRes));
|
||
}, 500);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
page {
|
||
background-color: #b2b2b2;
|
||
height: 100vh;
|
||
overflow: auto;
|
||
}
|
||
|
||
/* 简洁标签栏 */
|
||
.tab-container {
|
||
display: flex;
|
||
width: 100%;
|
||
background: #fff;
|
||
padding: 0 20rpx;
|
||
margin-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #e8e8e8;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 30rpx 0;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
|
||
.tab-label {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
font-weight: 400;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
&.tab-active {
|
||
.tab-label {
|
||
color: #1a73e8;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.tab-indicator {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 50rpx;
|
||
height: 4rpx;
|
||
background: #1a73e8;
|
||
border-radius: 2rpx;
|
||
}
|
||
}
|
||
|
||
/* 内容卡片 */
|
||
.content-card {
|
||
background: #fff;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
/* 指标容器 */
|
||
.metric-container {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
background: #fff;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 指标项 */
|
||
.metric-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 32rpx;
|
||
border-radius: 12rpx;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.metric-value {
|
||
font-size: 48rpx;
|
||
font-weight: 600;
|
||
margin-bottom: 16rpx;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.metric-label {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
/* 信息容器 */
|
||
.info-container {
|
||
padding: 20rpx;
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 24rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
/* 信息项 */
|
||
.info-item {
|
||
flex: 0 0 48%;
|
||
display: flex;
|
||
align-items: baseline;
|
||
padding: 16rpx 20rpx;
|
||
background: #f8f9fa;
|
||
border-radius: 10rpx;
|
||
border: 1rpx solid #e8e8e8;
|
||
transition: all 0.2s ease;
|
||
|
||
&:active {
|
||
background: #f0f2f5;
|
||
}
|
||
}
|
||
|
||
.info-label {
|
||
color: #666;
|
||
font-size: 26rpx;
|
||
flex-shrink: 0;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.info-value {
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
word-break: break-all;
|
||
}
|
||
</style> |