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

修改移动端内容，后端添加了所有查询接口

Browse Source
This commit is contained in:
86156
2025-10-31 17:18:30 +08:00
parent 9800a37055
commit ac541472c2
9 changed files with 2530 additions and 1262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

996
apps/hand-factory/components/lines/acidity.vue
View File

File diff suppressed because it is too large Load Diff

290
apps/hand-factory/components/lines/paint.vue
View File

@@ -1,141 +1,5 @@
<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="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>
@@ -152,7 +16,8 @@
</template>
<script>
import { listPlantStateCurrent, listPlantStateHistory } from '@/api/pocket/plantState'
import { getAllPlantStateDefines, listPlantStateHistory } from '@/api/pocket/plantState'
import config from '@/config'
export default {
// 响应式数据（替代 Vue 3 的 ref）
@@ -166,91 +31,77 @@ export default {
{ text: "班组绩效", value: 4 }
],
status: [ // 状态指标数据（供 k-metric-card 使用）
{ label: '网络状态', value: '正常' },
{ label: '当前班组', value: '乙 / 中' }
{ label: '网络状态', value: '检测中...' },
{ label: '当前班组', value: '—' }
],
chartData: {} // 图表数据（初始化空对象）
plantStateDefines: [] // 缓存所有的状态定义
}
},
// 生命周期钩子（替代 Vue 3 的 onMounted）
mounted() {
this.getServerData() // 页面挂载后加载数据
this.loadCurrentState() // 加载当前状态
this.checkNetworkStatus() // 检测网络状态
this.initPlantStateDefines() // 先加载所有定义
},
// 方法定义（所有函数需放在 methods 中）
methods: {
// 加载当前设备状态
loadCurrentState() {
uni.showLoading({ title: '加载中' })
listPlantStateCurrent({ pageNum: 1, pageSize: 10 }).then(response => {
uni.hideLoading()
if (response.code === 200 && response.rows) {
// 处理当前状态数据
console.log('当前状态数据:', response.rows)
// 可以根据实际需求更新status数据
}
}).catch(error => {
uni.hideLoading()
console.error('加载设备状态失败:', error)
})
},
// 从服务器获取历史数据用于图表
getServerData() {
uni.showLoading({ title: '加载中' })
listPlantStateHistory({ pageNum: 1, pageSize: 20 }).then(response => {
uni.hideLoading()
if (response.code === 200 && response.rows && response.rows.length > 0) {
// 处理历史数据，转换为图表需要的格式
const categories = []
const targetData = []
const completeData = []
response.rows.forEach(item => {
// 根据实际数据结构调整
const dateStr = this.formatDate(item.insdate)
categories.push(dateStr)
// 这里使用value1和value2作为示例，实际应根据业务需求调整
targetData.push(item.value1 || 0)
completeData.push(item.value2 || 0)
})
const res = {
categories: categories,
series: [
{ name: '目标值', data: targetData },
{ name: '完成量', data: completeData }
]
// 检测网络状态
checkNetworkStatus() {
const startTime = Date.now()
// 使用uni.request测试网络连接速度
uni.request({
url: config.baseUrl + '/pocket/proPlantStateDefine/allWithValues',
method: 'GET',
timeout: 5000,
success: (res) => {
const responseTime = Date.now() - startTime
// 根据响应时间判断网络状态
if (responseTime < 500) {
this.status[0].value = '通畅'
} else if (responseTime < 2000) {
this.status[0].value = '卡顿'
} else {
this.status[0].value = '异常'
}
this.chartData = JSON.parse(JSON.stringify(res))
},
fail: () => {
this.status[0].value = '异常'
}
})
},
// 初始化：加载所有状态定义及其当前值
initPlantStateDefines() {
uni.showLoading({ title: '加载中' })
getAllPlantStateDefines().then(response => {
if (response.code === 200 && response.data) {
// 缓存所有定义
this.plantStateDefines = response.data
console.log('状态定义已加载:', this.plantStateDefines)
uni.hideLoading()
// 这里可以根据 plantStateDefines 来处理首页数据
// 例如：this.initHomePageData()
} else {
// 如果没有数据，使用默认数据
this.loadDefaultChartData()
uni.hideLoading()
}
}).catch(error => {
uni.hideLoading()
console.error('加载历史数据失败:', error)
// 加载失败时使用默认数据
this.loadDefaultChartData()
console.error('加载状态定义失败:', error)
})
},
// 加载默认图表数据
loadDefaultChartData() {
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] }
]
}
this.chartData = JSON.parse(JSON.stringify(res))
// 根据define ID获取对应的值（工具方法）
getValueByDefineId(dataRow, defineId) {
const fieldName = `value${defineId}`
return dataRow[fieldName] || null
},
// 格式化日期
// 格式化日期（工具方法）
formatDate(dateStr) {
if (!dateStr) return ''
const date = new Date(dateStr)
@@ -287,21 +138,21 @@ page {
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;
@@ -320,6 +171,17 @@ page {
margin-bottom: 20rpx;
}
/* 空状态占位 */
.empty-placeholder {
padding: 100rpx 40rpx;
text-align: center;
.empty-text {
font-size: 28rpx;
color: #999;
}
}
/* 指标容器 */
.metric-container {
display: flex;
@@ -348,6 +210,12 @@ page {
font-size: 28rpx;
color: #666;
letter-spacing: 1rpx;
.metric-unit {
font-size: 24rpx;
color: #999;
margin-left: 4rpx;
}
}
/* 信息容器 */
@@ -377,7 +245,7 @@ page {
border-radius: 10rpx;
border: 1rpx solid #e8e8e8;
transition: all 0.2s ease;
&:active {
background: #f0f2f5;
}
@@ -396,4 +264,4 @@ page {
font-weight: 500;
word-break: break-all;
}
</style>
</style>