DeXun/klp-mono
9
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加掌上工厂应用

Browse Source
This commit is contained in:
砂糖
2025-10-27 13:21:43 +08:00
parent f5c313421a
commit 718f0efc76
408 changed files with 64677 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

325
apps/hand-factory/components/lines/acidity.vue Normal file
View File

@@ -0,0 +1,325 @@
<template>
<view>
<view class="tab">
<uni-data-checkbox
mode="tag"
selectedColor="#2bf"
v-model="currentTab"
:localdata="tabData"
></uni-data-checkbox>
</view>
<scroll-view scroll-y v-if="currentTab === 1">
<view class="content-card">
<k-metric-card
:items="webStatus"
:columns="2"
></k-metric-card>
</view>
<view class="content-card">
<k-collapse-panel title="状态统计">
<template #extra>
<view class="filter-btn" @click="openTimePicker">
<uni-icons type="calendar" size="16" color="white"></uni-icons>
<text class="filter-text">{{ timeRange }}</text>
</view>
</template>
<qiun-data-charts type="line" :chartData="chartData" />
</k-collapse-panel>
</view>
<view class="content-card">
<k-collapse-panel title="轧机状态">
<qiun-data-charts type="column" :chartData="chartData" />
</k-collapse-panel>
</view>
<view class="content-card">
<k-collapse-panel title="机组跟踪">
<view style="padding: 30rpx; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 20rpx;">
<k-info-card
v-for="(item, index) in crewTracking"
:key="index"
:title="item.title"
:value="item.value"
:info="item.info"
></k-info-card>
</view>
</k-collapse-panel>
</view>
<view class="content-card">
<k-collapse-panel title="能耗">
<k-metric-card
:items="energyStatus"
:columus="3"
></k-metric-card>
</k-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>
<!-- 时间选择弹出层 -->
<uni-popup ref="timePickerPopup" type="bottom" background-color="#fff" @change="popupChange">
<view class="popup-content">
<view class="popup-header">
<text class="popup-title">选择时间范围</text>
<view class="popup-close" @click="closeTimePicker">
<uni-icons type="close" size="20" color="#666"></uni-icons>
</view>
</view>
<view class="time-picker-container">
<uni-datetime-picker
type="datetimerange"
v-model="selectedTimeRange"
@change="onTimeRangeChange"
start="2020-01-01 00:00:00"
end="2025-12-31 23:59:59"
/>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
currentTab: 1,
tabData: [
{
text: "实时监控",
value: 1,
},
{
text: "生产统计",
value: 2,
},
{
text: "停机统计",
value: 3,
},
{
text: "班组绩效",
value: 4,
},
],
chartData: {},
webStatus: [
{ label: '网络状态', value: '正常' },
{ label: '当前班组', value: '乙 / 中' }
],
energyStatus: [
{ label: '工艺缎带钢线速度', value: '9.9' },
{ label: '轧机出口带钢线速度', value: '126.0' }
],
crewTracking: [
{
title: '轧机',
value: 6390000
},
{
title: '圆剪盘',
value: 6390000,
info: [
{ label: '设备编号', value: 'A-01' },
{ label: '运行状态', value: '正常' },
{ label: '当前产量', value: 2500, unit: '件' },
{ label: '合格率', value: '100%' }
]
},
{
title: '酸洗',
value: 6390000,
},
{
title: '入口活套',
value: 6390000,
info: [
{ label: '设备编号', value: 'A-01' },
{ label: '运行状态', value: '正常' },
{ label: '当前产量', value: 2500, unit: '件' },
{ label: '合格率', value: '100%' }
]
}
],
selectedTimeRange: []
};
},
computed: {
timeRange() {
if (!this.selectedTimeRange || this.selectedTimeRange.length !== 2) {
return '选择时间';
}
const start = new Date(this.selectedTimeRange[0]).toLocaleDateString('zh-CN');
const end = new Date(this.selectedTimeRange[1]).toLocaleDateString('zh-CN');
return `${start} - ${end}`;
}
},
mounted() {
this.getServerData();
},
methods: {
getServerData() {
// 模拟从服务器获取数据时的延时
uni.showLoading({
title: '加载中'
});
setTimeout(() => {
let res = {
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
series: [
{
name: '目标值',
data: [35, 36, 31, 33, 13, 34],
},
{
name: '完成量',
data: [18, 27, 21, 24, 6, 28],
},
],
};
this.chartData = JSON.parse(JSON.stringify(res));
uni.hideLoading();
}, 500);
},
openTimePicker() {
this.$refs.timePickerPopup.open();
uni.showLoading({
title: '加载中'
});
// 模拟数据加载
setTimeout(() => {
uni.hideLoading();
}, 500);
},
closeTimePicker() {
this.$refs.timePickerPopup.close();
},
popupChange(e) {
if (e.show === false) {
// 弹窗关闭时的处理
}
},
onTimeRangeChange(e) {
if (!e) return;
this.selectedTimeRange = e;
this.closeTimePicker();
// 这里可以调用接口重新获取数据
this.getServerData();
}
}
};
</script>
<style scoped lang="scss">
view-scroll {
gap: 30rpx;
}
.tab {
margin: auto;
display: flex;
box-sizing: border-box;
justify-content: center;
position: sticky;
top: 88rpx;
z-index: 999;
background-color: #fff;
}
.content-card {
background-color: white;
}
/** */
.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%; /* 留出4%的间隔 */
display: flex;
align-items: baseline; /* 文字基线对齐 */
}
.info-label {
color: #666;
font-size: 28rpx;
flex-shrink: 0;
margin-right: 16rpx;
}
.info-value {
color: #333;
font-size: 30rpx;
font-weight: 500;
word-break: break-all; /* 长文本自动换行 */
}
.filter-btn {
display: flex;
align-items: center;
gap: 8rpx;
padding: 8rpx 16rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 4rpx;
.filter-text {
font-size: 24rpx;
color: white;
}
}
.popup-content {
background-color: #fff;
border-radius: 24rpx 24rpx 0 0;
padding: 32rpx;
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32rpx;
.popup-title {
font-size: 32rpx;
font-weight: 500;
}
.popup-close {
padding: 8rpx;
}
}
.time-picker-container {
padding: 16rpx 0;
}
}
</style>

280
apps/hand-factory/components/lines/paint.vue Normal file
View File

@@ -0,0 +1,280 @@
<template>
<view>
<view class="tab">
<uni-data-checkbox
mode="tag"
selectedColor="#2bf"
v-model="currentTab"
:localdata="tabData"
></uni-data-checkbox>
</view>
<scroll-view scroll-y v-if="currentTab === 1">
<view class="content-card">
<k-metric-card
:items="status"
:columns="2"
></k-metric-card>
</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 {
// 响应式数据（替代 Vue 3 的 ref）
data() {
return {
currentTab: 1, // 当前选中的标签页
tabData: [
{ text: "实时监控", value: 1 },
{ text: "生产统计", value: 2 },
{ text: "停机统计", value: 3 },
{ text: "班组绩效", value: 4 }
],
status: [ // 状态指标数据（供 k-metric-card 使用）
{ label: '网络状态', value: '正常' },
{ label: '当前班组', value: '乙 / 中' }
],
chartData: {} // 图表数据（初始化空对象）
}
},
// 生命周期钩子（替代 Vue 3 的 onMounted）
mounted() {
this.getServerData() // 页面挂载后加载数据
},
// 方法定义（所有函数需放在 methods 中）
methods: {
// 模拟从服务器获取数据
getServerData() {
setTimeout(() => {
const res = {
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(res))
}, 500)
}
}
}
</script>
<style scoped lang="scss">
page {
background-color: #b2b2b2;
height: 100vh;
overflow: auto;
}
view-scroll {
gap: 30rpx;
}
.tab {
margin: auto;
display: flex;
box-sizing: border-box;
justify-content: center;
top: 88rpx;
z-index: 999;
background-color: #fff;
}
.content-card {
background-color: white;
}
.metric-container {
display: flex;
justify-content: space-around;
background-color: white;
}
.metric-item {
flex: 1;
text-align: center;
padding: 32rpx;
border-radius: 12rpx;
transition: all 0.3s;
}
.metric-value {
font-size: 48rpx;
font-weight: 600;
margin-bottom: 16rpx;
line-height: 1.2;
}
.metric-label {
font-size: 28rpx;
color: #666;
letter-spacing: 2rpx;
}
/** 机组跟踪信息容器样式 */
.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%; /* 留出4%的间隔，避免内容溢出 */
display: flex;
align-items: baseline; /* 文字基线对齐，保证排版整齐 */
}
.info-label {
color: #666;
font-size: 28rpx;
flex-shrink: 0;
margin-right: 16rpx;
}
.info-value {
color: #333;
font-size: 30rpx;
font-weight: 500;
word-break: break-all; /* 长文本自动换行，防止超出容器 */
}
</style>

313
apps/hand-factory/components/lines/zinc1.vue Normal file
View File

@@ -0,0 +1,313 @@
<template>
<view>
<view class="tab">
<uni-data-checkbox
mode="tag"
selectedColor="#2bf"
v-model="currentTab"
:localdata="tabData"
></uni-data-checkbox>
</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;
}
/* 滚动视图间隙（原代码选择器可能笔误，保留原逻辑） */
view-scroll {
gap: 30rpx;
}
/* 标签页容器样式 */
.tab {
margin: auto;
display: flex;
box-sizing: border-box;
justify-content: center;
top: 88rpx; /* 需配合 position: sticky 生效，原代码未加，可根据需求补充 */
position: sticky; /* 补充粘性定位，确保标签页滚动时固定在顶部 */
z-index: 999;
background-color: #fff;
padding: 10rpx 0; /* 补充内边距，优化点击体验 */
}
/* 内容卡片样式 */
.content-card {
border-radius: 16rpx; /* 补充圆角，与设计风格统一 */
overflow: hidden; /* 防止内部内容溢出卡片 */
}
/* 指标容器样式 */
.metric-container {
display: flex;
justify-content: space-around;
background-color: white;
padding: 20rpx 0;
}
/* 单个指标项样式 */
.metric-item {
flex: 1;
text-align: center;
padding: 32rpx;
border-radius: 12rpx;
transition: all 0.3s;
margin: 0 10rpx; /* 补充左右间距，避免指标过挤 */
background-color: #f8f9fa; /* 补充背景色，区分指标区域 */
}
/* 指标数值样式 */
.metric-value {
font-size: 48rpx;
font-weight: 600;
margin-bottom: 16rpx;
line-height: 1.2;
color: #333;
}
/* 指标标签样式 */
.metric-label {
font-size: 28rpx;
color: #666;
letter-spacing: 2rpx;
}
/* 机组跟踪信息容器 */
.info-container {
padding: 20rpx;
background: #fff;
border-radius: 12rpx;
border-top: 1px solid #eee; /* 补充上边框，区分标题与内容 */
}
/* 信息行样式 */
.info-row {
display: flex;
justify-content: space-between;
margin-bottom: 24rpx;
&:last-child {
margin-bottom: 0;
}
}
/* 单个信息项样式 */
.info-item {
flex: 0 0 48%; /* 留出4%的间隔，避免内容溢出 */
display: flex;
align-items: baseline; /* 文字基线对齐，排版更整齐 */
}
/* 信息标签样式 */
.info-label {
color: #666;
font-size: 28rpx;
flex-shrink: 0;
margin-right: 16rpx;
}
/* 信息数值样式 */
.info-value {
color: #333;
font-size: 30rpx;
font-weight: 500;
word-break: break-all; /* 长文本自动换行，防止超出容器 */
}
</style>

313
apps/hand-factory/components/lines/zinc2.vue Normal file
View File

@@ -0,0 +1,313 @@
<template>
<view>
<view class="tab">
<uni-data-checkbox
mode="tag"
selectedColor="#2bf"
v-model="currentTab"
:localdata="tabData"
></uni-data-checkbox>
</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;
}
/* 滚动视图间隙（原代码选择器可能笔误，保留原逻辑） */
view-scroll {
gap: 30rpx;
}
/* 标签页容器样式 */
.tab {
margin: auto;
display: flex;
box-sizing: border-box;
justify-content: center;
top: 88rpx; /* 需配合 position: sticky 生效，原代码未加，可根据需求补充 */
position: sticky; /* 补充粘性定位，确保标签页滚动时固定在顶部 */
z-index: 999;
background-color: #fff;
padding: 10rpx 0; /* 补充内边距，优化点击体验 */
}
/* 内容卡片样式 */
.content-card {
border-radius: 16rpx; /* 补充圆角，与设计风格统一 */
overflow: hidden; /* 防止内部内容溢出卡片 */
}
/* 指标容器样式 */
.metric-container {
display: flex;
justify-content: space-around;
background-color: white;
padding: 20rpx 0;
}
/* 单个指标项样式 */
.metric-item {
flex: 1;
text-align: center;
padding: 32rpx;
border-radius: 12rpx;
transition: all 0.3s;
margin: 0 10rpx; /* 补充左右间距，避免指标过挤 */
background-color: #f8f9fa; /* 补充背景色，区分指标区域 */
}
/* 指标数值样式 */
.metric-value {
font-size: 48rpx;
font-weight: 600;
margin-bottom: 16rpx;
line-height: 1.2;
color: #333;
}
/* 指标标签样式 */
.metric-label {
font-size: 28rpx;
color: #666;
letter-spacing: 2rpx;
}
/* 机组跟踪信息容器 */
.info-container {
padding: 20rpx;
background: #fff;
border-radius: 12rpx;
border-top: 1px solid #eee; /* 补充上边框，区分标题与内容 */
}
/* 信息行样式 */
.info-row {
display: flex;
justify-content: space-between;
margin-bottom: 24rpx;
&:last-child {
margin-bottom: 0;
}
}
/* 单个信息项样式 */
.info-item {
flex: 0 0 48%; /* 留出4%的间隔，避免内容溢出 */
display: flex;
align-items: baseline; /* 文字基线对齐，排版更整齐 */
}
/* 信息标签样式 */
.info-label {
color: #666;
font-size: 28rpx;
flex-shrink: 0;
margin-right: 16rpx;
}
/* 信息数值样式 */
.info-value {
color: #333;
font-size: 30rpx;
font-weight: 500;
word-break: break-all; /* 长文本自动换行，防止超出容器 */
}
</style>

313
apps/hand-factory/components/lines/zinc3.vue Normal file
View File

@@ -0,0 +1,313 @@
<template>
<view>
<view class="tab">
<uni-data-checkbox
mode="tag"
selectedColor="#2bf"
v-model="currentTab"
:localdata="tabData"
></uni-data-checkbox>
</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;
}
/* 滚动视图间隙（原代码选择器可能笔误，保留原逻辑） */
view-scroll {
gap: 30rpx;
}
/* 标签页容器样式 */
.tab {
margin: auto;
display: flex;
box-sizing: border-box;
justify-content: center;
top: 88rpx; /* 需配合 position: sticky 生效，原代码未加，可根据需求补充 */
position: sticky; /* 补充粘性定位，确保标签页滚动时固定在顶部 */
z-index: 999;
background-color: #fff;
padding: 10rpx 0; /* 补充内边距，优化点击体验 */
}
/* 内容卡片样式 */
.content-card {
border-radius: 16rpx; /* 补充圆角，与设计风格统一 */
overflow: hidden; /* 防止内部内容溢出卡片 */
}
/* 指标容器样式 */
.metric-container {
display: flex;
justify-content: space-around;
background-color: white;
padding: 20rpx 0;
}
/* 单个指标项样式 */
.metric-item {
flex: 1;
text-align: center;
padding: 32rpx;
border-radius: 12rpx;
transition: all 0.3s;
margin: 0 10rpx; /* 补充左右间距，避免指标过挤 */
background-color: #f8f9fa; /* 补充背景色，区分指标区域 */
}
/* 指标数值样式 */
.metric-value {
font-size: 48rpx;
font-weight: 600;
margin-bottom: 16rpx;
line-height: 1.2;
color: #333;
}
/* 指标标签样式 */
.metric-label {
font-size: 28rpx;
color: #666;
letter-spacing: 2rpx;
}
/* 机组跟踪信息容器 */
.info-container {
padding: 20rpx;
background: #fff;
border-radius: 12rpx;
border-top: 1px solid #eee; /* 补充上边框，区分标题与内容 */
}
/* 信息行样式 */
.info-row {
display: flex;
justify-content: space-between;
margin-bottom: 24rpx;
&:last-child {
margin-bottom: 0;
}
}
/* 单个信息项样式 */
.info-item {
flex: 0 0 48%; /* 留出4%的间隔，避免内容溢出 */
display: flex;
align-items: baseline; /* 文字基线对齐，排版更整齐 */
}
/* 信息标签样式 */
.info-label {
color: #666;
font-size: 28rpx;
flex-shrink: 0;
margin-right: 16rpx;
}
/* 信息数值样式 */
.info-value {
color: #333;
font-size: 30rpx;
font-weight: 500;
word-break: break-all; /* 长文本自动换行，防止超出容器 */
}
</style>