You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
270 lines
7.2 KiB
Vue
270 lines
7.2 KiB
Vue
<template>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<span class="card-title-icon">
|
|
<Icon icon="fa-solid:gauge-high" />
|
|
</span>
|
|
<span>今日开机率/稼动率</span>
|
|
</div>
|
|
<span class="chip">{{ currentLineName }}</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="chart-today" class="chart"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
import dayjs from 'dayjs'
|
|
import { useChart, colors } from '../utils'
|
|
import { DeviceOperationRecordApi, type DeviceOperationRecordVO } from '@/api/iot/deviceOperationRecord'
|
|
|
|
const { init, instance } = useChart('chart-today')
|
|
|
|
type LineMetric = { name: string; run: number; avail: number }
|
|
const lineMetrics = ref<LineMetric[]>([])
|
|
|
|
const currentLineName = ref('')
|
|
let timer: ReturnType<typeof setInterval> | null = null
|
|
let currentLineIndex = 0
|
|
|
|
const toRateNumber = (value: unknown) => {
|
|
if (typeof value === 'number') {
|
|
if (!Number.isFinite(value)) return 0
|
|
if (value >= 0 && value <= 1) return Math.round(value * 10000) / 100
|
|
return Math.max(0, Math.min(100, Math.round(value * 100) / 100))
|
|
}
|
|
const raw = String(value ?? '').trim()
|
|
if (!raw) return 0
|
|
const numeric = Number(raw.replace(/[^\d.+-]/g, ''))
|
|
if (!Number.isFinite(numeric)) return 0
|
|
if (raw.includes('%')) return Math.max(0, Math.min(100, Math.round(numeric * 100) / 100))
|
|
if (numeric >= 0 && numeric <= 1) return Math.round(numeric * 10000) / 100
|
|
return Math.max(0, Math.min(100, Math.round(numeric * 100) / 100))
|
|
}
|
|
|
|
const buildLineMetrics = (rows: DeviceOperationRecordVO[]) => {
|
|
const groupMap = new Map<string, { name: string; power: number[]; util: number[] }>()
|
|
rows.forEach((row) => {
|
|
const name = String((row as any)?.lineName ?? (row as any)?.lineCode ?? row.deviceName ?? row.deviceCode ?? '').trim()
|
|
if (!name) return
|
|
const power = toRateNumber((row as any)?.powerOnRate)
|
|
const util = toRateNumber((row as any)?.utilizationRate)
|
|
const key = name
|
|
if (!groupMap.has(key)) {
|
|
groupMap.set(key, { name, power: [], util: [] })
|
|
}
|
|
const g = groupMap.get(key)!
|
|
if (Number.isFinite(power)) g.power.push(power)
|
|
if (Number.isFinite(util)) g.util.push(util)
|
|
})
|
|
const avg = (arr: number[]) => (arr.length ? arr.reduce((s, v) => s + v, 0) / arr.length : 0)
|
|
const list = Array.from(groupMap.values()).map((g) => ({
|
|
name: g.name,
|
|
run: Math.round(avg(g.power) * 100) / 100,
|
|
avail: Math.round(avg(g.util) * 100) / 100
|
|
}))
|
|
list.sort((a, b) => a.name.localeCompare(b.name))
|
|
return list
|
|
}
|
|
|
|
const gaugeOption = (run: number, avail: number) => {
|
|
return {
|
|
backgroundColor: 'transparent',
|
|
tooltip: { show: true },
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
center: ['50%', '60%'],
|
|
startAngle: 200,
|
|
endAngle: -20,
|
|
min: 0,
|
|
max: 100,
|
|
splitNumber: 10,
|
|
radius: '88%',
|
|
axisLine: { lineStyle: { width: 8, color: [[1, 'rgba(30,144,255,0.18)']] } },
|
|
axisTick: { show: false },
|
|
splitLine: { show: false },
|
|
axisLabel: { show: false },
|
|
pointer: { show: false },
|
|
progress: { show: true, width: 8, itemStyle: { color: colors.blue } },
|
|
detail: { formatter: '{value}%', color: '#fff', fontSize: 26, offsetCenter: ['0%', '-5%'] },
|
|
title: { show: true, color: '#a8b7d8', fontSize: 12, offsetCenter: ['0%', '-25%'] },
|
|
data: [{ value: run, name: '开机率' }]
|
|
},
|
|
{
|
|
type: 'gauge',
|
|
center: ['50%', '60%'],
|
|
startAngle: 200,
|
|
endAngle: -20,
|
|
min: 0,
|
|
max: 100,
|
|
radius: '68%',
|
|
axisLine: { lineStyle: { width: 8, color: [[1, 'rgba(16,185,129,0.18)']] } },
|
|
axisTick: { show: false },
|
|
splitLine: { show: false },
|
|
axisLabel: { show: false },
|
|
pointer: { show: false },
|
|
progress: { show: true, width: 8, itemStyle: { color: colors.green } },
|
|
detail: { formatter: '{value}%', color: '#fff', fontSize: 20, offsetCenter: ['0%', '45%'] },
|
|
title: { show: true, color: '#a8b7d8', fontSize: 12, offsetCenter: ['0%', '25%'] },
|
|
data: [{ value: avail, name: '稼动率' }]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
|
|
const renderCurrent = () => {
|
|
const list = lineMetrics.value
|
|
if (!list.length) {
|
|
currentLineName.value = '暂无数据'
|
|
const c = instance()
|
|
if (c) c.setOption(gaugeOption(0, 0))
|
|
return
|
|
}
|
|
const idx = Math.max(0, Math.min(list.length - 1, currentLineIndex))
|
|
const item = list[idx]
|
|
currentLineName.value = item.name
|
|
const c = instance()
|
|
if (c) c.setOption(gaugeOption(item.run, item.avail))
|
|
}
|
|
|
|
const loadTodayOps = async () => {
|
|
const res = await DeviceOperationRecordApi.getDeviceOperationList({})
|
|
const rawList = Array.isArray(res) ? res : (res as any)?.list || (res as any)?.data || []
|
|
const list = Array.isArray(rawList) ? (rawList as DeviceOperationRecordVO[]) : []
|
|
lineMetrics.value = buildLineMetrics(list)
|
|
currentLineIndex = 0
|
|
renderCurrent()
|
|
}
|
|
|
|
const startRotate = () => {
|
|
if (timer) clearInterval(timer)
|
|
timer = null
|
|
if (lineMetrics.value.length <= 1) return
|
|
timer = setInterval(() => {
|
|
const list = lineMetrics.value
|
|
if (!list.length) return
|
|
currentLineIndex = (currentLineIndex + 1) % list.length
|
|
renderCurrent()
|
|
}, 8000)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const chart = init()
|
|
if (!chart) return
|
|
|
|
chart.setOption(gaugeOption(0, 0))
|
|
try {
|
|
await loadTodayOps()
|
|
} catch (e) {
|
|
console.error('Failed to load today ops:', e)
|
|
lineMetrics.value = []
|
|
currentLineIndex = 0
|
|
renderCurrent()
|
|
}
|
|
startRotate()
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (timer) clearInterval(timer)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.card {
|
|
position: relative;
|
|
display: flex;
|
|
padding: 10px;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
|
|
border: 1px solid rgb(30 64 175 / 85%);
|
|
border-radius: 10px;
|
|
box-shadow:
|
|
0 18px 45px rgb(15 23 42 / 95%),
|
|
0 0 0 1px rgb(15 23 42 / 100%),
|
|
inset 0 0 0 1px rgb(56 189 248 / 5%);
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card::before,
|
|
.card::after {
|
|
position: absolute;
|
|
width: 13px;
|
|
height: 13px;
|
|
pointer-events: none;
|
|
border: 1px solid rgb(56 189 248 / 75%);
|
|
border-radius: 2px;
|
|
content: "";
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.card::before {
|
|
top: -1px;
|
|
left: -1px;
|
|
border-right: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.card::after {
|
|
right: -1px;
|
|
bottom: -1px;
|
|
border-top: none;
|
|
border-left: none;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
padding-bottom: 4px;
|
|
margin-bottom: 8px;
|
|
border-bottom: 1px solid rgb(41 54 95 / 90%);
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: #e5f0ff;
|
|
}
|
|
|
|
.card-title-icon {
|
|
color: #22d3ee;
|
|
}
|
|
|
|
.card-body {
|
|
display: flex;
|
|
min-height: 0;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.chip {
|
|
display: inline-flex;
|
|
padding: 4px 10px;
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
background: rgb(15 23 42 / 75%);
|
|
border: 1px solid rgb(148 163 184 / 50%);
|
|
border-radius: 999px;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 180px;
|
|
}
|
|
|
|
@media (width <= 1600px) {
|
|
.chart { min-height: 160px; }
|
|
}
|
|
</style>
|