@@ -1,5 +1,5 @@ | |||
<script setup> | |||
import { nextTick, onMounted, ref } from "vue"; | |||
import { nextTick, onMounted, ref, watch } from "vue"; | |||
import * as echarts from "echarts"; | |||
import getOptions from "./yieldOption"; | |||
@@ -25,10 +25,17 @@ const chart = ref(null); | |||
const yieldChartRef = ref(null); | |||
function reInitChart() { | |||
if (props.displayPlaceholder) return; | |||
// if (props.displayPlaceholder) return; | |||
if (chart.value) chart.value.dispose(); | |||
const _chart = echarts.init(yieldChartRef.value); | |||
_chart.setOption(getOptions(props.rawData)); | |||
_chart.setOption( | |||
getOptions( | |||
props.rawData ?? { | |||
nowProduction: 0, | |||
targetProduction: 0, | |||
} | |||
) | |||
); | |||
chart.value = _chart; | |||
} | |||
@@ -41,8 +48,9 @@ onMounted(() => { | |||
<template> | |||
<div class="chart yield-chart"> | |||
<div v-if="displayPlaceholder" class="chart-placeholder"></div> | |||
<div v-else ref="yieldChartRef" class="chart-container"></div> | |||
<!-- <div v-if="displayPlaceholder" class="chart-placeholder"></div> | |||
<div v-else ref="yieldChartRef" class="chart-container"></div> --> | |||
<div ref="yieldChartRef" class="chart-container"></div> | |||
<div class="text-intro"> | |||
<div class="text-intro__item"> | |||
<span class="legend-box green"></span> | |||
@@ -128,7 +128,7 @@ const targetSerie = { | |||
}; | |||
export default (data) => { | |||
title.subtext = data?.nowYield == null ? "" : "当前成品率\u2002"; | |||
title.subtext = "当前成品率\u2002"; | |||
dataSerie.data[0].value = data?.nowYield ?? 0; | |||
dataSerie.data[1].value = 100 - (data?.nowYield ?? 0); | |||
targetSerie.data[0].value = data?.targetYield ?? 0; | |||
@@ -1,4 +1,5 @@ | |||
const radius = ["55%", "70%"]; | |||
const radius = ["58%", "72%"]; | |||
const radius2 = ["45%", "58%"]; | |||
const grid = { | |||
top: 0, | |||
left: 24, | |||
@@ -83,12 +84,65 @@ const dataSerie = { | |||
], | |||
}; | |||
const targetSerie = { | |||
type: "pie", | |||
radius: radius2, | |||
center: ["50%", "40%"], | |||
avoidLabelOvervlap: false, | |||
label: { | |||
show: false, | |||
}, | |||
labelLine: { | |||
show: false, | |||
}, | |||
data: [ | |||
{ | |||
value: 90, | |||
name: "目标成产量", | |||
selected: false, | |||
itemStyle: { | |||
borderJoin: "round", | |||
borderCap: "round", | |||
borderWidth: 12, | |||
borderRadius: "50%", | |||
color: { | |||
type: "linear", | |||
x: 1, | |||
y: 0, | |||
x2: 0, | |||
y2: 1, | |||
colorStops: [ | |||
{ offset: 0, color: "#1065ff66" }, | |||
{ offset: 1, color: "#1065ff" }, | |||
], | |||
}, | |||
}, | |||
}, | |||
{ | |||
value: 20, | |||
name: "-", | |||
itemStyle: { color: "transparent" }, | |||
label: { show: false }, | |||
}, | |||
], | |||
}; | |||
export default (data) => { | |||
// title.text = | |||
// (100 * (+data.nowProduction / +data.targetProduction)).toFixed(0) + "%"; | |||
title.text = (data.nowProduction || 0) + '片'; | |||
// 外圈 | |||
title.text = data.nowProduction || 0; | |||
dataSerie.data[0].value = data.nowProduction; | |||
dataSerie.data[1].value = data.targetProduction - data.nowProduction; | |||
dataSerie.data[1].value = !data.targetProduction | |||
? data.nowProduction == 0 | |||
? 1 | |||
: 0 | |||
: data.targetProduction - data.nowProduction; | |||
// 内圈 | |||
targetSerie.data[0].value = data?.targetProduction ?? 0; | |||
targetSerie.data[1].value = data?.targetProduction ? 0 : 1; | |||
return { | |||
tooltip, | |||
title, | |||
@@ -96,8 +150,8 @@ export default (data) => { | |||
series: [ | |||
// background | |||
bgSerie, | |||
// actual data | |||
dataSerie, | |||
targetSerie, | |||
], | |||
}; | |||
}; |
@@ -98,7 +98,6 @@ function loadData(monthlyTarget) { | |||
<p v-show="!show" class="empty-data-hint">暂无数据</p> --> | |||
<div class="container-body__h-full"> | |||
<yield-chart | |||
:display-placeholder="!displayProductionChart" | |||
:key="refreshToken + '_yield_chart_linemonth'" | |||
:raw-data="websocketData" | |||
/> | |||
@@ -14,10 +14,10 @@ const store = useWsStore(); | |||
onMounted(() => { | |||
// websocketData.value = loadData([ | |||
// { | |||
// targetProduction: 120, | |||
// nowProduction: 0, | |||
// targetYield: 0, | |||
// nowYield: 10, | |||
// targetProduction: 1220, | |||
// nowProduction: 8, | |||
// targetYield: null, | |||
// nowYield: null, | |||
// }, | |||
// ]); | |||
websocketData.value = loadData(store.data2.dailyTarget); | |||
@@ -103,7 +103,6 @@ function loadData(dailyTarget) { | |||
<p v-show="!show" class="empty-data-hint">暂无数据</p> --> | |||
<div class="container-body__h-full"> | |||
<yield-chart | |||
:display-placeholder="!displayProductionChart" | |||
:key="refreshToken + '_yield_chart_linetoday'" | |||
:raw-data="websocketData" | |||
/> | |||