326 lines
7.5 KiB
Vue
326 lines
7.5 KiB
Vue
<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>
|