380 lines
8.7 KiB
Vue
380 lines
8.7 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">
|
|
<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>
|
|
import HeadTabsVue from '../panels/klp-tabs/klp-tabs.vue';
|
|
|
|
export default {
|
|
components: {
|
|
HeadTabsVue
|
|
},
|
|
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">
|
|
/* 简洁标签栏 */
|
|
.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;
|
|
}
|
|
|
|
/* 信息容器 */
|
|
.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;
|
|
}
|
|
|
|
/* 过滤按钮 */
|
|
.filter-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
padding: 8rpx 16rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 20rpx;
|
|
transition: all 0.2s ease;
|
|
|
|
&:active {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.filter-text {
|
|
font-size: 24rpx;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
/* 弹出层样式 */
|
|
.popup-content {
|
|
background: #ffffff;
|
|
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: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.popup-close {
|
|
padding: 8rpx;
|
|
|
|
&:active {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
}
|
|
|
|
.time-picker-container {
|
|
padding: 16rpx 0;
|
|
}
|
|
}
|
|
</style>
|