|
|
|
@ -13,27 +13,60 @@
|
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
<script setup lang="ts">
|
|
|
|
import { onMounted, onUnmounted, ref } from 'vue'
|
|
|
|
import { onMounted, onUnmounted, ref } from 'vue'
|
|
|
|
|
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
import { colors, style } from '../utils'
|
|
|
|
import { colors, style } from '../utils'
|
|
|
|
|
|
|
|
import { DeviceWarningRecordApi } from '@/api/iot/deviceWarningRecord'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const route = useRoute()
|
|
|
|
const chartRef = ref<HTMLElement | null>(null)
|
|
|
|
const chartRef = ref<HTMLElement | null>(null)
|
|
|
|
let chart: echarts.ECharts | null = null
|
|
|
|
let chart: echarts.ECharts | null = null
|
|
|
|
|
|
|
|
|
|
|
|
const render = () => {
|
|
|
|
const render = async () => {
|
|
|
|
if (!chart) return
|
|
|
|
if (!chart) return
|
|
|
|
const x = ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00']
|
|
|
|
|
|
|
|
const output = [320, 460, 520, 610, 720, 690, 780]
|
|
|
|
let x: string[] = []
|
|
|
|
const passRate = [98.5, 99.2, 98.1, 98.9, 99.0, 98.6, 99.3]
|
|
|
|
let output: number[] = []
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
|
|
const orgId = route.query.orgId
|
|
|
|
|
|
|
|
const res = await DeviceWarningRecordApi.getLastSevenHoursCount({ orgId })
|
|
|
|
|
|
|
|
const raw = res && typeof res === 'object' && 'data' in (res as any) ? (res as any).data : res
|
|
|
|
|
|
|
|
const list = Array.isArray(raw) ? raw : []
|
|
|
|
|
|
|
|
if (list.length > 0) {
|
|
|
|
|
|
|
|
x = list.map((item: any) => {
|
|
|
|
|
|
|
|
const h = item.hour || item.time || item.key || item.name || ''
|
|
|
|
|
|
|
|
if (typeof h === 'string' && h.includes(' ')) {
|
|
|
|
|
|
|
|
return h.split(' ')[1]
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return h
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
output = list.map((item: any) => {
|
|
|
|
|
|
|
|
const val = item.count ?? item.value ?? item.output ?? 0
|
|
|
|
|
|
|
|
const n = Number(val)
|
|
|
|
|
|
|
|
return Number.isFinite(n) ? n : 0
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
} catch (e) {
|
|
|
|
|
|
|
|
console.error('Fetch production trend failed:', e)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
chart.setOption({
|
|
|
|
chart.setOption({
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
tooltip: { trigger: 'axis' },
|
|
|
|
tooltip: { trigger: 'axis' },
|
|
|
|
grid: { top: '18%', left: '6%', right: '6%', bottom: '12%', containLabel: true },
|
|
|
|
grid: { top: '18%', left: '6%', right: '6%', bottom: '16%', containLabel: true },
|
|
|
|
xAxis: { type: 'category', data: x, axisLine: style.axisLine, axisLabel: { ...style.axisLabel, fontSize: 10 } },
|
|
|
|
xAxis: {
|
|
|
|
yAxis: [
|
|
|
|
type: 'category',
|
|
|
|
{ type: 'value', axisLine: { show: false }, axisLabel: { ...style.axisLabel, fontSize: 10 }, splitLine: style.splitLine },
|
|
|
|
data: x,
|
|
|
|
{ type: 'value', min: 96, max: 100, axisLine: { show: false }, axisLabel: { ...style.axisLabel, fontSize: 10 }, splitLine: { show: false } }
|
|
|
|
axisLine: style.axisLine,
|
|
|
|
],
|
|
|
|
axisLabel: { ...style.axisLabel, fontSize: 10, rotate: 40 }
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
|
|
axisLine: { show: false },
|
|
|
|
|
|
|
|
axisLabel: { ...style.axisLabel, fontSize: 10 },
|
|
|
|
|
|
|
|
splitLine: style.splitLine
|
|
|
|
|
|
|
|
},
|
|
|
|
series: [
|
|
|
|
series: [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
name: '产量',
|
|
|
|
name: '产量',
|
|
|
|
@ -47,15 +80,6 @@ const render = () => {
|
|
|
|
])
|
|
|
|
])
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data: output
|
|
|
|
data: output
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: '良率',
|
|
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
|
|
yAxisIndex: 1,
|
|
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
|
|
showSymbol: false,
|
|
|
|
|
|
|
|
lineStyle: { width: 2, color: colors.cyan },
|
|
|
|
|
|
|
|
data: passRate
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]
|
|
|
|
]
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|