二级app修改
This commit is contained in:
@@ -19,7 +19,58 @@
|
||||
<text class="refresh-icon" :class="{ 'rotating': isRefreshing }">⟳</text>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="scroll-container" v-if="currentTab === 1">
|
||||
<!-- 快速导航菜单（固定在左下角） -->
|
||||
<view class="nav-menu-fixed" :class="{ 'nav-expanded': navMenuExpanded }">
|
||||
<view class="nav-toggle" @click="navMenuExpanded = !navMenuExpanded">
|
||||
<text class="nav-toggle-icon">{{ navMenuExpanded ? '✕' : '☰' }}</text>
|
||||
</view>
|
||||
<view class="nav-items" v-if="navMenuExpanded">
|
||||
<view class="nav-item" @click="scrollToSection('speed-monitor')">
|
||||
<text class="nav-label">速度监控</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="scrollToSection('exit-speed-chart')">
|
||||
<text class="nav-label">出口速度趋势</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="scrollToSection('temp-chart')">
|
||||
<text class="nav-label">酸槽温度趋势</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="scrollToSection('looper-status')">
|
||||
<text class="nav-label">活套运行状态</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="scrollToSection('tank-concentration')">
|
||||
<text class="nav-label">酸槽浓度监控</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="scrollToSection('force-chart')">
|
||||
<text class="nav-label">轧制力趋势</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="scrollToSection('process-params')">
|
||||
<text class="nav-label">工艺参数</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="scrollToSection('roll-speed')">
|
||||
<text class="nav-label">轧辊速度监控</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="scrollToSection('reduc-rate')">
|
||||
<text class="nav-label">机架压下率</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="scrollToSection('tension-monitor')">
|
||||
<text class="nav-label">带钢张力监控</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="scrollToSection('power-ratio')">
|
||||
<text class="nav-label">机架功率百分比</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="scrollToSection('paint-speed')">
|
||||
<text class="nav-label">涂装速度监控</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="scrollToSection('tlv-params')">
|
||||
<text class="nav-label">拉矫参数</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="scrollToSection('paint-temp-chart')">
|
||||
<text class="nav-label">烘干温度趋势</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="scroll-container" v-if="currentTab === 1" :scroll-into-view="scrollIntoView">
|
||||
<!-- 顶部状态栏 -->
|
||||
<view class="status-bar">
|
||||
<view class="status-item">
|
||||
@@ -39,7 +90,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 速度监控 -->
|
||||
<view class="section">
|
||||
<view class="section" id="speed-monitor">
|
||||
<view class="section-title">速度监控</view>
|
||||
<view class="metrics-grid-3">
|
||||
<view class="metric-box" v-for="(item, index) in speedMetrics" :key="index">
|
||||
@@ -50,8 +101,16 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 出口速度趋势 -->
|
||||
<view class="section" id="exit-speed-chart">
|
||||
<view class="section-title">出口速度趋势</view>
|
||||
<view class="chart-box">
|
||||
<qiun-data-charts type="line" :chartData="exitSpeedChartData" :opts="lineChartOpts" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 酸槽温度趋势 -->
|
||||
<view class="section">
|
||||
<view class="section" id="temp-chart">
|
||||
<view class="section-title">酸槽温度趋势</view>
|
||||
<view class="chart-box">
|
||||
<qiun-data-charts type="line" :chartData="tempChartData" :opts="lineChartOpts" />
|
||||
@@ -59,7 +118,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 活套运行状态 -->
|
||||
<view class="section">
|
||||
<view class="section" id="looper-status">
|
||||
<view class="section-title">活套运行状态</view>
|
||||
<view class="metrics-grid-3">
|
||||
<view class="metric-box" v-for="(item, index) in looperMetrics" :key="index">
|
||||
@@ -71,7 +130,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 酸槽浓度监控 -->
|
||||
<view class="section">
|
||||
<view class="section" id="tank-concentration">
|
||||
<view class="section-title">酸槽浓度监控</view>
|
||||
<view class="tank-grid">
|
||||
<view class="tank-card" v-for="(tank, index) in tankConcentration" :key="index">
|
||||
@@ -91,8 +150,16 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 轧制力趋势 -->
|
||||
<view class="section" id="force-chart">
|
||||
<view class="section-title">轧制力趋势</view>
|
||||
<view class="chart-box">
|
||||
<qiun-data-charts type="line" :chartData="forceChartData" :opts="forceLineChartOpts" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 工艺参数 -->
|
||||
<view class="section">
|
||||
<view class="section" id="process-params">
|
||||
<view class="section-title">工艺参数</view>
|
||||
<view class="metrics-grid-2">
|
||||
<view class="metric-box" v-for="(item, index) in processMetrics" :key="index">
|
||||
@@ -102,6 +169,96 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ============ 镀锌线数据 ============ -->
|
||||
<view class="section-divider">
|
||||
<text class="divider-text">镀锌线监控数据</text>
|
||||
</view>
|
||||
|
||||
<!-- 轧辊速度监控 -->
|
||||
<view class="section" id="roll-speed">
|
||||
<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="section" id="reduc-rate">
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 带钢张力监控 -->
|
||||
<view class="section" id="tension-monitor">
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 机架功率百分比 -->
|
||||
<view class="section" id="power-ratio">
|
||||
<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>
|
||||
|
||||
<!-- ============ 涂装线数据 ============ -->
|
||||
<view class="section-divider">
|
||||
<text class="divider-text">涂装线监控数据</text>
|
||||
</view>
|
||||
|
||||
<!-- 涂装速度监控 -->
|
||||
<view class="section" id="paint-speed">
|
||||
<view class="section-title">涂装速度监控</view>
|
||||
<view class="metrics-grid-3">
|
||||
<view class="metric-box" v-for="(item, index) in paintSpeedMetrics" :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="section" id="tlv-params">
|
||||
<view class="section-title">拉矫参数</view>
|
||||
<view class="metrics-grid-2">
|
||||
<view class="metric-box" v-for="(item, index) in tlvMetrics" :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="section" id="paint-temp-chart">
|
||||
<view class="section-title">烘干温度趋势</view>
|
||||
<view class="chart-box">
|
||||
<qiun-data-charts type="line" :chartData="paintTempChartData" :opts="paintLineChartOpts" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<scroll-view scroll-y class="scroll-container" v-if="currentTab == 2">
|
||||
@@ -139,6 +296,8 @@ export default {
|
||||
lastUpdateTime: '—', // 最后更新时间
|
||||
isRefreshing: false, // 是否正在刷新
|
||||
refreshTimer: null, // 定时器
|
||||
navMenuExpanded: false, // 导航菜单是否展开
|
||||
scrollIntoView: '', // 滚动目标
|
||||
// 速度监控指标（ID=1,2,3）
|
||||
speedMetrics: [
|
||||
{ label: '出口带钢速度', value: '—', unit: 'm/min' },
|
||||
@@ -165,8 +324,60 @@ export default {
|
||||
{ label: '联机活套张力', value: '—', unit: 'kN' },
|
||||
{ label: '拉矫机延伸率', value: '—', unit: '%' }
|
||||
],
|
||||
// 镀锌线数据
|
||||
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' }
|
||||
],
|
||||
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: '%' }
|
||||
],
|
||||
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' }
|
||||
],
|
||||
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: '%' }
|
||||
],
|
||||
// 涂装线数据
|
||||
paintSpeedMetrics: [
|
||||
{ label: '出口带钢速度', value: '—', unit: 'm/min' },
|
||||
{ label: '涂装带钢速度', value: '—', unit: 'm/min' },
|
||||
{ label: '圆盘剪速度', value: '—', unit: 'm/min' }
|
||||
],
|
||||
tlvMetrics: [
|
||||
{ label: '拉矫延伸率', value: '—', unit: '%' },
|
||||
{ label: '破磷机插入量1', value: '—', unit: 'mm' },
|
||||
{ label: '破磷机插入量2', value: '—', unit: 'mm' },
|
||||
{ label: '破磷机插入量3', value: '—', unit: 'mm' }
|
||||
],
|
||||
// 温度趋势图数据（ID=4,5,6）
|
||||
tempChartData: {},
|
||||
// 出口速度趋势图数据（ID=1）
|
||||
exitSpeedChartData: {},
|
||||
// 轧制力趋势图数据（ID=30-35）
|
||||
forceChartData: {},
|
||||
// 涂装线温度趋势图数据（ID=4-7, 17）
|
||||
paintTempChartData: {},
|
||||
lineChartOpts: {
|
||||
color: ["#0066cc", "#409eff", "#66b1ff"],
|
||||
padding: [15, 15, 0, 15],
|
||||
@@ -203,6 +414,78 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
forceLineChartOpts: {
|
||||
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"
|
||||
}
|
||||
}
|
||||
},
|
||||
paintLineChartOpts: {
|
||||
color: ["#0066cc", "#409eff", "#66b1ff", "#a0cfff", "#d9ecff"],
|
||||
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: "温度(°C)" }]
|
||||
},
|
||||
extra: {
|
||||
line: {
|
||||
type: "curve",
|
||||
width: 2,
|
||||
activeType: "hollow"
|
||||
}
|
||||
}
|
||||
},
|
||||
plantStateDefines: [] // 缓存所有的状态定义
|
||||
};
|
||||
},
|
||||
@@ -372,6 +655,7 @@ export default {
|
||||
|
||||
// 更新所有实时指标
|
||||
updateCurrentMetrics() {
|
||||
// ===== 酸轧线数据 =====
|
||||
// 1. 速度监控（ID=1,2,3）
|
||||
const exitSpeed = this.getDefineById(1)
|
||||
const plSpeed = this.getDefineById(2)
|
||||
@@ -471,9 +755,67 @@ export default {
|
||||
unit: tlvElong?.units || '%'
|
||||
}
|
||||
]
|
||||
|
||||
// ===== 镀锌线数据 =====
|
||||
// 1. 轧辊速度（ID=36-41）
|
||||
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）
|
||||
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）
|
||||
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）
|
||||
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 || '%' }
|
||||
]
|
||||
|
||||
// ===== 涂装线数据 =====
|
||||
// 1. 涂装速度（ID=1-3，与酸轧线相同）
|
||||
this.paintSpeedMetrics = [
|
||||
{ label: '出口带钢速度', value: this.formatValue(this.getDefineById(1)?.currentValue), unit: this.getDefineById(1)?.units || 'm/min' },
|
||||
{ label: '涂装带钢速度', value: this.formatValue(this.getDefineById(2)?.currentValue), unit: this.getDefineById(2)?.units || 'm/min' },
|
||||
{ label: '圆盘剪速度', value: this.formatValue(this.getDefineById(3)?.currentValue), unit: this.getDefineById(3)?.units || 'm/min' }
|
||||
]
|
||||
|
||||
// 2. 拉矫参数（ID=20-23）
|
||||
this.tlvMetrics = [
|
||||
{ label: '拉矫延伸率', value: this.formatValue(this.getDefineById(20)?.currentValue), unit: this.getDefineById(20)?.units || '%' },
|
||||
{ label: '破磷机插入量1', value: this.formatValue(this.getDefineById(21)?.currentValue), unit: this.getDefineById(21)?.units || 'mm' },
|
||||
{ label: '破磷机插入量2', value: this.formatValue(this.getDefineById(22)?.currentValue), unit: this.getDefineById(22)?.units || 'mm' },
|
||||
{ label: '破磷机插入量3', value: this.formatValue(this.getDefineById(23)?.currentValue), unit: this.getDefineById(23)?.units || 'mm' }
|
||||
]
|
||||
},
|
||||
|
||||
// 加载温度趋势图（3个酸槽温度：ID=4,5,6）
|
||||
// 加载历史趋势图数据（温度、出口速度、轧制力）
|
||||
loadTempTrend(isSilent = false) {
|
||||
return listPlantStateHistory({ pageNum: 1, pageSize: 30 }).then(response => {
|
||||
if (!isSilent) {
|
||||
@@ -485,20 +827,39 @@ export default {
|
||||
const tank1Data = []
|
||||
const tank2Data = []
|
||||
const tank3Data = []
|
||||
const exitSpeedData = []
|
||||
const force1Data = []
|
||||
const force2Data = []
|
||||
const force3Data = []
|
||||
const force4Data = []
|
||||
const force5Data = []
|
||||
const force6Data = []
|
||||
|
||||
// 获取温度定义
|
||||
// 获取定义
|
||||
const tank1Temp = this.getDefineById(4)
|
||||
const tank2Temp = this.getDefineById(5)
|
||||
const tank3Temp = this.getDefineById(6)
|
||||
const exitSpeed = this.getDefineById(1)
|
||||
|
||||
response.rows.forEach(item => {
|
||||
const dateStr = this.formatDate(item.insdate)
|
||||
categories.push(dateStr)
|
||||
tank1Data.push(Number(item.value4) || 0) // ID=4 对应 value4
|
||||
tank2Data.push(Number(item.value5) || 0) // ID=5 对应 value5
|
||||
tank3Data.push(Number(item.value6) || 0) // ID=6 对应 value6
|
||||
// 温度数据
|
||||
tank1Data.push(Number(item.value4) || 0)
|
||||
tank2Data.push(Number(item.value5) || 0)
|
||||
tank3Data.push(Number(item.value6) || 0)
|
||||
// 出口速度数据
|
||||
exitSpeedData.push(Number(item.value1) || 0)
|
||||
// 轧制力数据
|
||||
force1Data.push(Number(item.value30) || 0)
|
||||
force2Data.push(Number(item.value31) || 0)
|
||||
force3Data.push(Number(item.value32) || 0)
|
||||
force4Data.push(Number(item.value33) || 0)
|
||||
force5Data.push(Number(item.value34) || 0)
|
||||
force6Data.push(Number(item.value35) || 0)
|
||||
})
|
||||
|
||||
// 温度趋势
|
||||
this.tempChartData = {
|
||||
categories: categories.reverse(),
|
||||
series: [
|
||||
@@ -507,12 +868,59 @@ export default {
|
||||
{ name: tank3Temp?.comments || '3#酸槽温度', data: tank3Data.reverse() }
|
||||
]
|
||||
}
|
||||
|
||||
// 出口速度趋势
|
||||
this.exitSpeedChartData = {
|
||||
categories: categories,
|
||||
series: [
|
||||
{ name: exitSpeed?.comments || '出口带钢速度', data: exitSpeedData.reverse() }
|
||||
]
|
||||
}
|
||||
|
||||
// 轧制力趋势
|
||||
this.forceChartData = {
|
||||
categories: categories,
|
||||
series: [
|
||||
{ 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() }
|
||||
]
|
||||
}
|
||||
|
||||
// 涂装线温度趋势（ID=4-7, 17）
|
||||
const paintTemp1Data = []
|
||||
const paintTemp2Data = []
|
||||
const paintTemp3Data = []
|
||||
const paintTemp4Data = []
|
||||
const paintTemp5Data = []
|
||||
|
||||
response.rows.forEach(item => {
|
||||
paintTemp1Data.push(Number(item.value4) || 0) // ID=4
|
||||
paintTemp2Data.push(Number(item.value5) || 0) // ID=5
|
||||
paintTemp3Data.push(Number(item.value6) || 0) // ID=6
|
||||
paintTemp4Data.push(Number(item.value7) || 0) // ID=7
|
||||
paintTemp5Data.push(Number(item.value17) || 0) // ID=17
|
||||
})
|
||||
|
||||
this.paintTempChartData = {
|
||||
categories: categories,
|
||||
series: [
|
||||
{ name: '1#酸槽温度', data: paintTemp1Data.reverse() },
|
||||
{ name: '2#酸槽温度', data: paintTemp2Data.reverse() },
|
||||
{ name: '3#酸槽温度', data: paintTemp3Data.reverse() },
|
||||
{ name: '漂洗温度', data: paintTemp4Data.reverse() },
|
||||
{ name: '烘干温度', data: paintTemp5Data.reverse() }
|
||||
]
|
||||
}
|
||||
}
|
||||
}).catch(error => {
|
||||
if (!isSilent) {
|
||||
uni.hideLoading()
|
||||
}
|
||||
console.error('加载温度趋势失败:', error)
|
||||
console.error('加载历史趋势失败:', error)
|
||||
})
|
||||
},
|
||||
|
||||
@@ -536,6 +944,12 @@ export default {
|
||||
const num = Number(value)
|
||||
if (isNaN(num)) return '—'
|
||||
return num.toFixed(2)
|
||||
},
|
||||
|
||||
// 滚动到指定部分
|
||||
scrollToSection(sectionId) {
|
||||
this.scrollIntoView = sectionId
|
||||
this.navMenuExpanded = false // 点击后关闭菜单
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -606,6 +1020,84 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
/* 快速导航菜单（固定在左下角） */
|
||||
.nav-menu-fixed {
|
||||
position: fixed;
|
||||
left: 32rpx;
|
||||
bottom: 120rpx;
|
||||
z-index: 998;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
background: #409eff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8rpx 20rpx rgba(64, 158, 255, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-toggle-icon {
|
||||
font-size: 48rpx;
|
||||
color: #fff;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.nav-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
background: #fff;
|
||||
border: 2rpx solid #409eff;
|
||||
border-radius: 8rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.2);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
background: #f0f9ff;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 26rpx;
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
font-size: 48rpx;
|
||||
color: #fff;
|
||||
@@ -699,6 +1191,24 @@ export default {
|
||||
border-left: 4rpx solid #0066cc;
|
||||
}
|
||||
|
||||
/* 分隔符 */
|
||||
.section-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 40rpx 0 24rpx 0;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
|
||||
.divider-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #0066cc;
|
||||
padding: 0 12rpx;
|
||||
background: #f5f7fa;
|
||||
border-left: 4rpx solid #0066cc;
|
||||
padding-left: 16rpx;
|
||||
}
|
||||
|
||||
/* 指标卡片 - 3列布局 */
|
||||
.metrics-grid-3 {
|
||||
display: grid;
|
||||
|
||||
@@ -20,78 +20,11 @@
|
||||
</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="section">
|
||||
<view class="section-title">涂装速度监控</view>
|
||||
<view class="metrics-grid-3">
|
||||
<view class="metric-box" v-for="(item, index) in speedMetrics" :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="section">
|
||||
<view class="section-title">烘干温度趋势</view>
|
||||
<view class="chart-box">
|
||||
<qiun-data-charts type="line" :chartData="tempChartData" :opts="lineChartOpts" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 活套状态 -->
|
||||
<view class="section">
|
||||
<view class="section-title">活套运行状态</view>
|
||||
<view class="metrics-grid-3">
|
||||
<view class="metric-box" v-for="(item, index) in looperMetrics" :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="section">
|
||||
<view class="section-title">工艺参数</view>
|
||||
<view class="metrics-grid-2">
|
||||
<view class="metric-box" v-for="(item, index) in processMetrics" :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="section">
|
||||
<view class="section-title">拉矫参数</view>
|
||||
<view class="metrics-grid-3">
|
||||
<view class="metric-box" v-for="(item, index) in tlvMetrics" :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 class="disabled-container">
|
||||
<view class="disabled-icon">🔒</view>
|
||||
<view class="disabled-title">该功能未启用</view>
|
||||
<view class="disabled-desc">涂装线实时监控功能暂未启用，请联系管理员</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
@@ -629,4 +562,34 @@ export default {
|
||||
border-radius: 8rpx;
|
||||
padding: 24rpx 16rpx;
|
||||
}
|
||||
|
||||
/* 未启用容器 */
|
||||
.disabled-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 200rpx);
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.disabled-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 32rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.disabled-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.disabled-desc {
|
||||
font-size: 26rpx;
|
||||
color: #909399;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,78 +20,11 @@
|
||||
</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="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="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>
|
||||
</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="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>
|
||||
</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 class="disabled-container">
|
||||
<view class="disabled-icon">🔒</view>
|
||||
<view class="disabled-title">该功能未启用</view>
|
||||
<view class="disabled-desc">镀锌线1实时监控功能暂未启用，请联系管理员</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
@@ -629,4 +562,34 @@ export default {
|
||||
border-radius: 8rpx;
|
||||
padding: 24rpx 16rpx;
|
||||
}
|
||||
|
||||
/* 未启用容器 */
|
||||
.disabled-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 200rpx);
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.disabled-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 32rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.disabled-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.disabled-desc {
|
||||
font-size: 26rpx;
|
||||
color: #909399;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,78 +20,11 @@
|
||||
</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="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="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>
|
||||
</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="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>
|
||||
</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 class="disabled-container">
|
||||
<view class="disabled-icon">🔒</view>
|
||||
<view class="disabled-title">该功能未启用</view>
|
||||
<view class="disabled-desc">镀锌线2实时监控功能暂未启用，请联系管理员</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
@@ -629,4 +562,34 @@ export default {
|
||||
border-radius: 8rpx;
|
||||
padding: 24rpx 16rpx;
|
||||
}
|
||||
|
||||
/* 未启用容器 */
|
||||
.disabled-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 200rpx);
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.disabled-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 32rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.disabled-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.disabled-desc {
|
||||
font-size: 26rpx;
|
||||
color: #909399;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,78 +20,11 @@
|
||||
</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="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="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>
|
||||
</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="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>
|
||||
</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 class="disabled-container">
|
||||
<view class="disabled-icon">🔒</view>
|
||||
<view class="disabled-title">该功能未启用</view>
|
||||
<view class="disabled-desc">镀锌线3实时监控功能暂未启用，请联系管理员</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
@@ -629,4 +562,34 @@ export default {
|
||||
border-radius: 8rpx;
|
||||
padding: 24rpx 16rpx;
|
||||
}
|
||||
|
||||
/* 未启用容器 */
|
||||
.disabled-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 200rpx);
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.disabled-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 32rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.disabled-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.disabled-desc {
|
||||
font-size: 26rpx;
|
||||
color: #909399;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user