添加掌上工厂应用
This commit is contained in:
砂糖
232
apps/hand-factory/components/klp-home/klp-home.vue
Normal file
232
apps/hand-factory/components/klp-home/klp-home.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<view class="production-dashboard">
|
||||
<!-- 可关闭欢迎条幅 -->
|
||||
<u-alert
|
||||
v-if="showWelcome"
|
||||
title="Ⓘ欢迎使用智能生产监控平台"
|
||||
type="warning"
|
||||
:closable="true"
|
||||
@close="showWelcome = false"
|
||||
class="welcome-banner"
|
||||
icon="notification"
|
||||
/>
|
||||
|
||||
<!-- 操作工具栏 -->
|
||||
<view
|
||||
class="toolbar u-flex u-row-between u-p-20 u-m-b-20 bg-white shadow-sm"
|
||||
>
|
||||
<!-- 日期选择器 -->
|
||||
<uni-datetime-picker type="date" :clear-icon="false" v-model="value1" />
|
||||
</view>
|
||||
|
||||
<!-- 数据可视化图表 -->
|
||||
<view class="chart-box u-m-20 u-p-20 bg-white u-radius-8 shadow-sm">
|
||||
<image
|
||||
src="/static/images/banner/banner03.jpg"
|
||||
mode="widthFix"
|
||||
class="chart-image"
|
||||
@error="handleChartError"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 智能数据表格 -->
|
||||
<view class="data-table u-m-20 bg-white u-radius-8 shadow-sm">
|
||||
<k-table
|
||||
:columns="columns"
|
||||
:data="tableData"
|
||||
height="800rpx"
|
||||
></k-table>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import klpTable from "../klp-table/klp-table.vue";
|
||||
|
||||
const STATUS_MAP = {
|
||||
运行中: { type: "success", icon: "checkmark-circle" },
|
||||
待机: { type: "warning", icon: "pause-circle" },
|
||||
故障: { type: "error", icon: "close-circle" },
|
||||
};
|
||||
|
||||
export default {
|
||||
components: { klpTable },
|
||||
data() {
|
||||
return {
|
||||
// 欢迎条幅状态
|
||||
showWelcome: true,
|
||||
value1: '',
|
||||
show: false,
|
||||
// 日期相关
|
||||
selectedDate: Date.now(),
|
||||
datePickerVisible: false,
|
||||
|
||||
// 表格配置
|
||||
tableLayout: "horizontal",
|
||||
columns: [
|
||||
{ title: "设备编号", key: "id", width: "200rpx" },
|
||||
{ title: "产量", key: "output", align: "center" },
|
||||
{ title: "合格率", key: "rate", align: "right" },
|
||||
{ title: "状态", key: "status", width: "150rpx" },
|
||||
],
|
||||
tableData: [
|
||||
{ id: "M-001", output: 2580, rate: "98.5%", status: "运行中" },
|
||||
{ id: "M-002", output: 1820, rate: "97.2%", status: "待机" },
|
||||
{ id: "M-003", output: 3050, rate: "99.1%", status: "故障" },
|
||||
],
|
||||
|
||||
// 图表错误状态
|
||||
chartError: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
// 格式化日期
|
||||
formattedDate() {
|
||||
return this.selectedDate;
|
||||
},
|
||||
|
||||
// 布局提示文字
|
||||
layoutText() {
|
||||
return this.tableLayout === "horizontal" ? "表格视图" : "列表视图";
|
||||
},
|
||||
|
||||
// 过滤后的数据（示例过滤逻辑）
|
||||
filteredData() {
|
||||
return this.productionData.filter((item) => {
|
||||
return this.selectedDate % 2 === 0 ? item[1] > 2000 : item;
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.loadPreferences();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 加载用户偏好设置
|
||||
loadPreferences() {
|
||||
const prefs = uni.getStorageSync("dashboardPrefs") || {};
|
||||
this.showWelcome = prefs.showWelcome !== false;
|
||||
this.tableLayout = prefs.tableLayout || "horizontal";
|
||||
},
|
||||
|
||||
// 保存偏好设置
|
||||
savePreferences() {
|
||||
uni.setStorageSync("dashboardPrefs", {
|
||||
showWelcome: this.showWelcome,
|
||||
tableLayout: this.tableLayout,
|
||||
});
|
||||
},
|
||||
|
||||
// 打开日期选择器
|
||||
openDatePicker() {
|
||||
this.datePickerVisible = true;
|
||||
},
|
||||
|
||||
// 日期确认处理
|
||||
handleDateConfirm(e) {
|
||||
this.selectedDate = e.value;
|
||||
this.datePickerVisible = false;
|
||||
this.refreshData();
|
||||
},
|
||||
|
||||
// 切换表格布局
|
||||
toggleTableLayout() {
|
||||
this.tableLayout =
|
||||
this.tableLayout === "horizontal" ? "vertical" : "horizontal";
|
||||
this.savePreferences();
|
||||
},
|
||||
|
||||
// 获取状态样式
|
||||
getStatusStyle(status) {
|
||||
return STATUS_MAP[status]?.type || "info";
|
||||
},
|
||||
|
||||
// 图表加载失败处理
|
||||
handleChartError() {
|
||||
this.chartError = true;
|
||||
this.$u.toast("图表加载失败，请稍后重试");
|
||||
},
|
||||
|
||||
// 模拟数据刷新
|
||||
async refreshData() {
|
||||
try {
|
||||
// 这里可以添加真实的数据请求逻辑
|
||||
const mockData = await this.$u.mock.wait(500, [...this.productionData]);
|
||||
this.productionData = mockData;
|
||||
} catch (error) {
|
||||
this.$u.toast("数据更新失败");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.production-dashboard {
|
||||
background: #f8f9fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.welcome-banner {
|
||||
margin: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
border: 1rpx solid #ffe58f;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
border-radius: 16rpx;
|
||||
|
||||
.action-btn {
|
||||
padding: 12rpx 24rpx;
|
||||
background: #f8f9fa;
|
||||
border: 1rpx solid #eee;
|
||||
|
||||
&::v-deep .u-button__text {
|
||||
color: #606266;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-box {
|
||||
.chart-image {
|
||||
width: 100%;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.data-table {
|
||||
.table-header {
|
||||
background: #fafafa;
|
||||
|
||||
.header-cell {
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
padding: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.data-row {
|
||||
&:nth-child(even) {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.body-cell {
|
||||
color: #606266;
|
||||
padding: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式布局
|
||||
@media (max-width: 480px) {
|
||||
.header-cell,
|
||||
.body-cell {
|
||||
font-size: 24rpx;
|
||||
padding: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user