修改镀锌线ui
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-container">
|
||||
<!-- 简洁标签栏 -->
|
||||
<view class="tab-container">
|
||||
<view
|
||||
@@ -14,295 +14,462 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y v-if="currentTab === 1">
|
||||
<view class="content-card">
|
||||
<view class="metric-container">
|
||||
<!-- 网络状态指标 -->
|
||||
<view class="metric-item">
|
||||
<view class="metric-value">
|
||||
正常
|
||||
</view>
|
||||
<view class="metric-label">
|
||||
网络状态
|
||||
</view>
|
||||
</view>
|
||||
<!-- 刷新按钮 -->
|
||||
<view class="refresh-btn-fixed" @click="refreshData">
|
||||
<text class="refresh-icon" :class="{ 'rotating': isRefreshing }">⟳</text>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="scroll-container" v-if="currentTab === 1">
|
||||
<!-- 顶部状态栏 -->
|
||||
<view class="status-bar">
|
||||
<view class="status-item">
|
||||
<text class="status-label">网络状态</text>
|
||||
<text class="status-value" :class="'status-' + webStatus[0].value">{{ webStatus[0].value }}</text>
|
||||
</view>
|
||||
<view class="status-divider"></view>
|
||||
<view class="status-item">
|
||||
<text class="status-label">当前班组</text>
|
||||
<text class="status-value">{{ webStatus[1].value }}</text>
|
||||
</view>
|
||||
<view class="status-divider"></view>
|
||||
<view class="status-item">
|
||||
<text class="status-label">更新时间</text>
|
||||
<text class="status-value status-time">{{ lastUpdateTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 班组指标 -->
|
||||
<view class="metric-item">
|
||||
<view class="metric-value team-number">
|
||||
乙 / 中
|
||||
</view>
|
||||
<view class="metric-label">
|
||||
当前班组
|
||||
</view>
|
||||
<!-- 轧机速度监控 -->
|
||||
<view class="section">
|
||||
<view class="section-title">轧机速度监控</view>
|
||||
<view class="metrics-grid-3">
|
||||
<view class="metric-box" v-for="(item, index) in rollSpeedMetrics" :key="index">
|
||||
<text class="metric-name">{{ item.label }}</text>
|
||||
<text class="metric-value">{{ item.value }}</text>
|
||||
<text class="metric-unit">{{ item.unit }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</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 class="section">
|
||||
<view class="section-title">机架压下率</view>
|
||||
<view class="metrics-grid-3">
|
||||
<view class="metric-box" v-for="(item, index) in reducMetrics" :key="index">
|
||||
<text class="metric-name">{{ item.label }}</text>
|
||||
<text class="metric-value">{{ item.value }}</text>
|
||||
<text class="metric-unit">{{ item.unit }}</text>
|
||||
</view>
|
||||
</klp-collapse-panel>
|
||||
</view>
|
||||
</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="section">
|
||||
<view class="section-title">轧制力趋势</view>
|
||||
<view class="chart-box">
|
||||
<qiun-data-charts type="line" :chartData="forceChartData" :opts="lineChartOpts" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 出口线速度指标 -->
|
||||
<view class="metric-item">
|
||||
<view class="metric-value team-number">
|
||||
126.0
|
||||
</view>
|
||||
<view class="metric-label">
|
||||
轧机出口带钢线速度
|
||||
</view>
|
||||
</view>
|
||||
<!-- 带钢张力 -->
|
||||
<view class="section">
|
||||
<view class="section-title">带钢张力监控</view>
|
||||
<view class="metrics-grid-3">
|
||||
<view class="metric-box" v-for="(item, index) in tensionMetrics" :key="index">
|
||||
<text class="metric-name">{{ item.label }}</text>
|
||||
<text class="metric-value">{{ item.value }}</text>
|
||||
<text class="metric-unit">{{ item.unit }}</text>
|
||||
</view>
|
||||
</klp-collapse-panel>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功率百分比 -->
|
||||
<view class="section">
|
||||
<view class="section-title">机架功率百分比</view>
|
||||
<view class="metrics-grid-3">
|
||||
<view class="metric-box" v-for="(item, index) in powerMetrics" :key="index">
|
||||
<text class="metric-name">{{ item.label }}</text>
|
||||
<text class="metric-value">{{ item.value }}</text>
|
||||
<text class="metric-unit">{{ item.unit }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<scroll-view scroll-y v-if="currentTab == 2">
|
||||
<scroll-view scroll-y class="scroll-container" v-if="currentTab == 2">
|
||||
<klp-product-statistic></klp-product-statistic>
|
||||
</scroll-view>
|
||||
|
||||
<scroll-view scroll-y v-if="currentTab == 3">
|
||||
<scroll-view scroll-y class="scroll-container" v-if="currentTab == 3">
|
||||
<klp-shutdown-statistic></klp-shutdown-statistic>
|
||||
</scroll-view>
|
||||
|
||||
<scroll-view scroll-y v-if="currentTab == 4">
|
||||
<scroll-view scroll-y class="scroll-container" v-if="currentTab == 4">
|
||||
<klp-team-performance></klp-team-performance>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listPlantStateCurrent, listPlantStateHistory } from '@/api/pocket/plantState'
|
||||
import { getAllPlantStateDefines, listPlantStateHistory, getCurrentShift } from '@/api/pocket/plantState'
|
||||
import config from '@/config'
|
||||
|
||||
export default {
|
||||
// 3. 响应式数据（替代 Vue 3 的 ref）
|
||||
data() {
|
||||
return {
|
||||
currentTab: 1, // 当前激活的标签页（默认实时监控）
|
||||
tabData: [ // 标签页配置
|
||||
currentTab: 1,
|
||||
tabData: [
|
||||
{ text: "实时监控", value: 1 },
|
||||
{ text: "生产统计", value: 2 },
|
||||
{ text: "停机统计", value: 3 },
|
||||
{ text: "班组绩效", value: 4 }
|
||||
],
|
||||
chartData: {} // 图表数据（初始化空对象，后续加载）
|
||||
webStatus: [
|
||||
{ label: '网络状态', value: '检测中...' },
|
||||
{ label: '当前班组', value: '—' }
|
||||
],
|
||||
lastUpdateTime: '—',
|
||||
isRefreshing: false,
|
||||
refreshTimer: null,
|
||||
// 轧辊速度（ID=36-41）
|
||||
rollSpeedMetrics: [
|
||||
{ label: '1#机架', value: '—', unit: 'm/min' },
|
||||
{ label: '2#机架', value: '—', unit: 'm/min' },
|
||||
{ label: '3#机架', value: '—', unit: 'm/min' },
|
||||
{ label: '4#机架', value: '—', unit: 'm/min' },
|
||||
{ label: '5#机架', value: '—', unit: 'm/min' },
|
||||
{ label: '6#机架', value: '—', unit: 'm/min' }
|
||||
],
|
||||
// 机架压下率（ID=24-29）
|
||||
reducMetrics: [
|
||||
{ label: '1#机架', value: '—', unit: '%' },
|
||||
{ label: '2#机架', value: '—', unit: '%' },
|
||||
{ label: '3#机架', value: '—', unit: '%' },
|
||||
{ label: '4#机架', value: '—', unit: '%' },
|
||||
{ label: '5#机架', value: '—', unit: '%' },
|
||||
{ label: '6#机架', value: '—', unit: '%' }
|
||||
],
|
||||
// 带钢张力（ID=42-48）
|
||||
tensionMetrics: [
|
||||
{ label: '0#张力', value: '—', unit: 'kN' },
|
||||
{ label: '1#张力', value: '—', unit: 'kN' },
|
||||
{ label: '2#张力', value: '—', unit: 'kN' },
|
||||
{ label: '3#张力', value: '—', unit: 'kN' },
|
||||
{ label: '4#张力', value: '—', unit: 'kN' },
|
||||
{ label: '5#张力', value: '—', unit: 'kN' },
|
||||
{ label: '6#张力', value: '—', unit: 'kN' }
|
||||
],
|
||||
// 功率百分比（ID=49-54）
|
||||
powerMetrics: [
|
||||
{ label: '1#机架', value: '—', unit: '%' },
|
||||
{ label: '2#机架', value: '—', unit: '%' },
|
||||
{ label: '3#机架', value: '—', unit: '%' },
|
||||
{ label: '4#机架', value: '—', unit: '%' },
|
||||
{ label: '5#机架', value: '—', unit: '%' },
|
||||
{ label: '6#机架', value: '—', unit: '%' }
|
||||
],
|
||||
// 轧制力趋势图（ID=30-35）
|
||||
forceChartData: {},
|
||||
lineChartOpts: {
|
||||
color: ["#0066cc", "#409eff", "#66b1ff", "#a0cfff", "#d9ecff", "#ecf5ff"],
|
||||
padding: [15, 15, 0, 15],
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
fontSize: 10,
|
||||
lineHeight: 14,
|
||||
itemGap: 6
|
||||
},
|
||||
dataLabel: false, // 隐藏数据标签
|
||||
dataPointShape: false, // 隐藏数据点
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
rotateLabel: true,
|
||||
itemCount: 5, // 减少标签数量
|
||||
labelCount: 5,
|
||||
fontSize: 10
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
dashLength: 4,
|
||||
gridColor: "#e4e7ed",
|
||||
showTitle: true,
|
||||
fontSize: 10,
|
||||
data: [{ min: 0, title: "轧制力(kN)" }]
|
||||
},
|
||||
extra: {
|
||||
line: {
|
||||
type: "curve", // 曲线平滑
|
||||
width: 2,
|
||||
activeType: "hollow" // 点击时显示空心点
|
||||
}
|
||||
}
|
||||
},
|
||||
plantStateDefines: []
|
||||
};
|
||||
},
|
||||
// 4. 生命周期钩子（替代 Vue 3 的 onMounted）
|
||||
|
||||
mounted() {
|
||||
this.getServerData(); // 页面挂载后加载图表数据
|
||||
this.loadCurrentState(); // 加载当前状态
|
||||
this.loadAllData()
|
||||
this.startAutoRefresh()
|
||||
},
|
||||
// 5. 方法定义（所有数据处理与逻辑）
|
||||
|
||||
beforeDestroy() {
|
||||
this.stopAutoRefresh()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 加载当前设备状态
|
||||
loadCurrentState() {
|
||||
listPlantStateCurrent({ pageNum: 1, pageSize: 10 }).then(response => {
|
||||
if (response.code === 200 && response.rows) {
|
||||
console.log('当前状态数据:', response.rows)
|
||||
// 可以根据实际需求更新页面数据
|
||||
startAutoRefresh() {
|
||||
this.refreshTimer = setInterval(() => {
|
||||
this.refreshData(true)
|
||||
}, 30000)
|
||||
},
|
||||
|
||||
stopAutoRefresh() {
|
||||
if (this.refreshTimer) {
|
||||
clearInterval(this.refreshTimer)
|
||||
this.refreshTimer = null
|
||||
}
|
||||
},
|
||||
|
||||
loadAllData() {
|
||||
this.checkNetworkStatus()
|
||||
this.loadCurrentShift()
|
||||
this.initPlantStateDefines()
|
||||
this.updateLastTime()
|
||||
},
|
||||
|
||||
refreshData(isSilent = false) {
|
||||
if (this.isRefreshing) return
|
||||
this.isRefreshing = true
|
||||
if (!isSilent) uni.showLoading({ title: '刷新中' })
|
||||
|
||||
Promise.all([
|
||||
this.checkNetworkStatus(),
|
||||
this.loadCurrentShift(),
|
||||
this.initPlantStateDefines(isSilent)
|
||||
]).finally(() => {
|
||||
this.isRefreshing = false
|
||||
if (!isSilent) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '刷新成功', icon: 'success', duration: 1500 })
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('加载设备状态失败:', error)
|
||||
this.updateLastTime()
|
||||
})
|
||||
},
|
||||
|
||||
// 从服务器获取图表数据
|
||||
getServerData() {
|
||||
uni.showLoading({ title: '加载中' })
|
||||
updateLastTime() {
|
||||
const now = new Date()
|
||||
const hour = String(now.getHours()).padStart(2, '0')
|
||||
const minute = String(now.getMinutes()).padStart(2, '0')
|
||||
const second = String(now.getSeconds()).padStart(2, '0')
|
||||
this.lastUpdateTime = `${hour}:${minute}:${second}`
|
||||
},
|
||||
|
||||
checkNetworkStatus() {
|
||||
return new Promise((resolve) => {
|
||||
const startTime = Date.now()
|
||||
uni.request({
|
||||
url: config.baseUrl + '/pocket/proPlantStateDefine/allWithValues',
|
||||
method: 'GET',
|
||||
timeout: 5000,
|
||||
success: (res) => {
|
||||
const responseTime = Date.now() - startTime
|
||||
if (responseTime < 500) {
|
||||
this.webStatus[0].value = '通畅'
|
||||
} else if (responseTime < 2000) {
|
||||
this.webStatus[0].value = '卡顿'
|
||||
} else {
|
||||
this.webStatus[0].value = '异常'
|
||||
}
|
||||
resolve()
|
||||
},
|
||||
fail: () => {
|
||||
this.webStatus[0].value = '异常'
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
loadCurrentShift() {
|
||||
return getCurrentShift().then(response => {
|
||||
if (response.code === 200 && response.data) {
|
||||
const shiftData = response.data
|
||||
const shiftName = this.getShiftName(shiftData.shift)
|
||||
const crewName = this.getCrewName(shiftData.crew)
|
||||
this.webStatus[1].value = `${crewName} / ${shiftName}`
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('加载班组信息失败:', error)
|
||||
})
|
||||
},
|
||||
|
||||
getShiftName(shift) {
|
||||
const shiftMap = { 'A': '早班', 'B': '中班', 'C': '晚班' }
|
||||
return shiftMap[shift] || shift || '—'
|
||||
},
|
||||
|
||||
getCrewName(crew) {
|
||||
const crewMap = { 1: '甲', 2: '乙', 3: '丙', 4: '丁' }
|
||||
return crewMap[crew] || crew || '—'
|
||||
},
|
||||
|
||||
initPlantStateDefines(isSilent = false) {
|
||||
if (!isSilent) uni.showLoading({ title: '加载中' })
|
||||
|
||||
listPlantStateHistory({ pageNum: 1, pageSize: 20 }).then(response => {
|
||||
uni.hideLoading()
|
||||
return getAllPlantStateDefines().then(response => {
|
||||
if (response.code === 200 && response.data) {
|
||||
this.plantStateDefines = response.data
|
||||
if (!isSilent) console.log('镀锌线1状态定义已加载:', this.plantStateDefines)
|
||||
this.updateCurrentMetrics()
|
||||
return this.loadForceHistory(isSilent)
|
||||
} else {
|
||||
if (!isSilent) uni.hideLoading()
|
||||
}
|
||||
}).catch(error => {
|
||||
if (!isSilent) uni.hideLoading()
|
||||
console.error('加载状态定义失败:', error)
|
||||
})
|
||||
},
|
||||
|
||||
updateCurrentMetrics() {
|
||||
// 1. 轧辊速度（ID=36-41：rollSpeed1-6）
|
||||
this.rollSpeedMetrics = [
|
||||
{ label: '1#机架', value: this.formatValue(this.getDefineById(36)?.currentValue), unit: this.getDefineById(36)?.units || 'm/min' },
|
||||
{ label: '2#机架', value: this.formatValue(this.getDefineById(37)?.currentValue), unit: this.getDefineById(37)?.units || 'm/min' },
|
||||
{ label: '3#机架', value: this.formatValue(this.getDefineById(38)?.currentValue), unit: this.getDefineById(38)?.units || 'm/min' },
|
||||
{ label: '4#机架', value: this.formatValue(this.getDefineById(39)?.currentValue), unit: this.getDefineById(39)?.units || 'm/min' },
|
||||
{ label: '5#机架', value: this.formatValue(this.getDefineById(40)?.currentValue), unit: this.getDefineById(40)?.units || 'm/min' },
|
||||
{ label: '6#机架', value: this.formatValue(this.getDefineById(41)?.currentValue), unit: this.getDefineById(41)?.units || 'm/min' }
|
||||
]
|
||||
|
||||
// 2. 机架压下率（ID=24-29：reduc1-6）
|
||||
this.reducMetrics = [
|
||||
{ label: '1#机架', value: this.formatValue(this.getDefineById(24)?.currentValue), unit: this.getDefineById(24)?.units || '%' },
|
||||
{ label: '2#机架', value: this.formatValue(this.getDefineById(25)?.currentValue), unit: this.getDefineById(25)?.units || '%' },
|
||||
{ label: '3#机架', value: this.formatValue(this.getDefineById(26)?.currentValue), unit: this.getDefineById(26)?.units || '%' },
|
||||
{ label: '4#机架', value: this.formatValue(this.getDefineById(27)?.currentValue), unit: this.getDefineById(27)?.units || '%' },
|
||||
{ label: '5#机架', value: this.formatValue(this.getDefineById(28)?.currentValue), unit: this.getDefineById(28)?.units || '%' },
|
||||
{ label: '6#机架', value: this.formatValue(this.getDefineById(29)?.currentValue), unit: this.getDefineById(29)?.units || '%' }
|
||||
]
|
||||
|
||||
// 3. 带钢张力（ID=42-48：tensionForce0-6）
|
||||
this.tensionMetrics = [
|
||||
{ label: '0#张力', value: this.formatValue(this.getDefineById(42)?.currentValue), unit: this.getDefineById(42)?.units || 'kN' },
|
||||
{ label: '1#张力', value: this.formatValue(this.getDefineById(43)?.currentValue), unit: this.getDefineById(43)?.units || 'kN' },
|
||||
{ label: '2#张力', value: this.formatValue(this.getDefineById(44)?.currentValue), unit: this.getDefineById(44)?.units || 'kN' },
|
||||
{ label: '3#张力', value: this.formatValue(this.getDefineById(45)?.currentValue), unit: this.getDefineById(45)?.units || 'kN' },
|
||||
{ label: '4#张力', value: this.formatValue(this.getDefineById(46)?.currentValue), unit: this.getDefineById(46)?.units || 'kN' },
|
||||
{ label: '5#张力', value: this.formatValue(this.getDefineById(47)?.currentValue), unit: this.getDefineById(47)?.units || 'kN' },
|
||||
{ label: '6#张力', value: this.formatValue(this.getDefineById(48)?.currentValue), unit: this.getDefineById(48)?.units || 'kN' }
|
||||
]
|
||||
|
||||
// 4. 功率百分比（ID=49-54：powerRatio1-6）
|
||||
this.powerMetrics = [
|
||||
{ label: '1#机架', value: this.formatValue(this.getDefineById(49)?.currentValue), unit: this.getDefineById(49)?.units || '%' },
|
||||
{ label: '2#机架', value: this.formatValue(this.getDefineById(50)?.currentValue), unit: this.getDefineById(50)?.units || '%' },
|
||||
{ label: '3#机架', value: this.formatValue(this.getDefineById(51)?.currentValue), unit: this.getDefineById(51)?.units || '%' },
|
||||
{ label: '4#机架', value: this.formatValue(this.getDefineById(52)?.currentValue), unit: this.getDefineById(52)?.units || '%' },
|
||||
{ label: '5#机架', value: this.formatValue(this.getDefineById(53)?.currentValue), unit: this.getDefineById(53)?.units || '%' },
|
||||
{ label: '6#机架', value: this.formatValue(this.getDefineById(54)?.currentValue), unit: this.getDefineById(54)?.units || '%' }
|
||||
]
|
||||
},
|
||||
|
||||
loadForceHistory(isSilent = false) {
|
||||
return listPlantStateHistory({ pageNum: 1, pageSize: 30 }).then(response => {
|
||||
if (!isSilent) uni.hideLoading()
|
||||
|
||||
if (response.code === 200 && response.rows && response.rows.length > 0) {
|
||||
const categories = []
|
||||
const targetData = []
|
||||
const completeData = []
|
||||
const force1Data = []
|
||||
const force2Data = []
|
||||
const force3Data = []
|
||||
const force4Data = []
|
||||
const force5Data = []
|
||||
const force6Data = []
|
||||
|
||||
response.rows.forEach(item => {
|
||||
const dateStr = this.formatDate(item.insdate)
|
||||
categories.push(dateStr)
|
||||
targetData.push(item.value1 || 0)
|
||||
completeData.push(item.value2 || 0)
|
||||
force1Data.push(Number(item.value30) || 0) // ID=30
|
||||
force2Data.push(Number(item.value31) || 0) // ID=31
|
||||
force3Data.push(Number(item.value32) || 0) // ID=32
|
||||
force4Data.push(Number(item.value33) || 0) // ID=33
|
||||
force5Data.push(Number(item.value34) || 0) // ID=34
|
||||
force6Data.push(Number(item.value35) || 0) // ID=35
|
||||
})
|
||||
|
||||
const serverRes = {
|
||||
categories: categories,
|
||||
this.forceChartData = {
|
||||
categories: categories.reverse(),
|
||||
series: [
|
||||
{ name: "目标值", data: targetData },
|
||||
{ name: "完成量", data: completeData }
|
||||
{ name: '1#轧制力', data: force1Data.reverse() },
|
||||
{ name: '2#轧制力', data: force2Data.reverse() },
|
||||
{ name: '3#轧制力', data: force3Data.reverse() },
|
||||
{ name: '4#轧制力', data: force4Data.reverse() },
|
||||
{ name: '5#轧制力', data: force5Data.reverse() },
|
||||
{ name: '6#轧制力', data: force6Data.reverse() }
|
||||
]
|
||||
}
|
||||
|
||||
this.chartData = JSON.parse(JSON.stringify(serverRes))
|
||||
} else {
|
||||
this.loadDefaultChartData()
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('加载历史数据失败:', error)
|
||||
this.loadDefaultChartData()
|
||||
if (!isSilent) uni.hideLoading()
|
||||
console.error('加载轧制力历史失败:', error)
|
||||
})
|
||||
},
|
||||
|
||||
// 加载默认图表数据
|
||||
loadDefaultChartData() {
|
||||
const serverRes = {
|
||||
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(serverRes))
|
||||
getDefineById(id) {
|
||||
return this.plantStateDefines.find(item => item.id == id)
|
||||
},
|
||||
|
||||
// 格式化日期
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
return `${date.getMonth() + 1}/${date.getDate()}`
|
||||
const hour = String(date.getHours()).padStart(2, '0')
|
||||
const minute = String(date.getMinutes()).padStart(2, '0')
|
||||
return `${hour}:${minute}`
|
||||
},
|
||||
|
||||
formatValue(value) {
|
||||
if (value === null || value === undefined || value === '') return '—'
|
||||
const num = Number(value)
|
||||
if (isNaN(num)) return '—'
|
||||
return num.toFixed(2)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background-color: #b2b2b2;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
/* 页面容器 */
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
/* 简洁标签栏 */
|
||||
/* 标签栏 */
|
||||
.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);
|
||||
border-bottom: 2rpx solid #e4e7ed;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 30rpx 0;
|
||||
padding: 28rpx 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.tab-label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
color: #606266;
|
||||
font-weight: 400;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&.tab-active {
|
||||
.tab-label {
|
||||
color: #1a73e8;
|
||||
font-weight: 600;
|
||||
color: #0066cc;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -311,93 +478,155 @@ page {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 50rpx;
|
||||
height: 4rpx;
|
||||
background: #1a73e8;
|
||||
border-radius: 2rpx;
|
||||
width: 60rpx;
|
||||
height: 3rpx;
|
||||
background: #0066cc;
|
||||
}
|
||||
}
|
||||
|
||||
/* 内容卡片 */
|
||||
.content-card {
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 指标容器 */
|
||||
.metric-container {
|
||||
/* 刷新按钮 */
|
||||
.refresh-btn-fixed {
|
||||
position: fixed;
|
||||
right: 32rpx;
|
||||
bottom: 120rpx;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
background: #0066cc;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8rpx 20rpx rgba(0, 102, 204, 0.4);
|
||||
z-index: 999;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
/* 指标项 */
|
||||
.metric-item {
|
||||
.refresh-icon {
|
||||
font-size: 48rpx;
|
||||
color: #fff;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
|
||||
&.rotating {
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 滚动容器 */
|
||||
.scroll-container {
|
||||
height: calc(100vh - 96rpx);
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
/* 顶部状态栏 */
|
||||
.status-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
padding: 24rpx 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid #e4e7ed;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 26rpx;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.status-value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
|
||||
&.status-通畅 { color: #67c23a; }
|
||||
&.status-卡顿 { color: #e6a23c; }
|
||||
&.status-异常 { color: #f56c6c; }
|
||||
&.status-time {
|
||||
color: #909399;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.status-divider {
|
||||
width: 1rpx;
|
||||
height: 40rpx;
|
||||
background: #e4e7ed;
|
||||
}
|
||||
|
||||
/* 区块样式 */
|
||||
.section {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 20rpx;
|
||||
padding-left: 16rpx;
|
||||
border-left: 4rpx solid #0066cc;
|
||||
}
|
||||
|
||||
/* 指标卡片 - 3列布局 */
|
||||
.metrics-grid-3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.metric-box {
|
||||
background: #fff;
|
||||
border: 1rpx solid #e4e7ed;
|
||||
border-radius: 8rpx;
|
||||
padding: 28rpx 20rpx;
|
||||
text-align: center;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.metric-name {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
display: block;
|
||||
font-size: 48rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16rpx;
|
||||
line-height: 1.2;
|
||||
color: #0066cc;
|
||||
margin-bottom: 8rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
letter-spacing: 1rpx;
|
||||
.metric-unit {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 信息容器 */
|
||||
.info-container {
|
||||
padding: 20rpx;
|
||||
/* 图表容器 */
|
||||
.chart-box {
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid #e4e7ed;
|
||||
border-radius: 8rpx;
|
||||
padding: 24rpx 16rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user