添加掌上工厂应用
This commit is contained in:
砂糖
325
apps/hand-factory/components/lines/acidity.vue
Normal file
325
apps/hand-factory/components/lines/acidity.vue
Normal 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>
|
||||
Reference in New Issue
Block a user