@@ -1,5 +1,5 @@ | |||||
<script setup> | <script setup> | ||||
import { nextTick, onMounted, ref } from "vue"; | |||||
import { nextTick, onMounted, ref, watch } from "vue"; | |||||
import * as echarts from "echarts"; | import * as echarts from "echarts"; | ||||
import getOptions from "./yieldOption"; | import getOptions from "./yieldOption"; | ||||
@@ -25,10 +25,17 @@ const chart = ref(null); | |||||
const yieldChartRef = ref(null); | const yieldChartRef = ref(null); | ||||
function reInitChart() { | function reInitChart() { | ||||
if (props.displayPlaceholder) return; | |||||
// if (props.displayPlaceholder) return; | |||||
if (chart.value) chart.value.dispose(); | if (chart.value) chart.value.dispose(); | ||||
const _chart = echarts.init(yieldChartRef.value); | const _chart = echarts.init(yieldChartRef.value); | ||||
_chart.setOption(getOptions(props.rawData)); | |||||
_chart.setOption( | |||||
getOptions( | |||||
props.rawData ?? { | |||||
nowProduction: 0, | |||||
targetProduction: 0, | |||||
} | |||||
) | |||||
); | |||||
chart.value = _chart; | chart.value = _chart; | ||||
} | } | ||||
@@ -41,8 +48,9 @@ onMounted(() => { | |||||
<template> | <template> | ||||
<div class="chart yield-chart"> | <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"> | ||||
<div class="text-intro__item"> | <div class="text-intro__item"> | ||||
<span class="legend-box green"></span> | <span class="legend-box green"></span> | ||||
@@ -128,7 +128,7 @@ const targetSerie = { | |||||
}; | }; | ||||
export default (data) => { | export default (data) => { | ||||
title.subtext = data?.nowYield == null ? "" : "当前成品率\u2002"; | |||||
title.subtext = "当前成品率\u2002"; | |||||
dataSerie.data[0].value = data?.nowYield ?? 0; | dataSerie.data[0].value = data?.nowYield ?? 0; | ||||
dataSerie.data[1].value = 100 - (data?.nowYield ?? 0); | dataSerie.data[1].value = 100 - (data?.nowYield ?? 0); | ||||
targetSerie.data[0].value = data?.targetYield ?? 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 = { | const grid = { | ||||
top: 0, | top: 0, | ||||
left: 24, | 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) => { | export default (data) => { | ||||
// title.text = | // title.text = | ||||
// (100 * (+data.nowProduction / +data.targetProduction)).toFixed(0) + "%"; | // (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[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 { | return { | ||||
tooltip, | tooltip, | ||||
title, | title, | ||||
@@ -96,8 +150,8 @@ export default (data) => { | |||||
series: [ | series: [ | ||||
// background | // background | ||||
bgSerie, | bgSerie, | ||||
// actual data | |||||
dataSerie, | dataSerie, | ||||
targetSerie, | |||||
], | ], | ||||
}; | }; | ||||
}; | }; |
@@ -98,7 +98,6 @@ function loadData(monthlyTarget) { | |||||
<p v-show="!show" class="empty-data-hint">暂无数据</p> --> | <p v-show="!show" class="empty-data-hint">暂无数据</p> --> | ||||
<div class="container-body__h-full"> | <div class="container-body__h-full"> | ||||
<yield-chart | <yield-chart | ||||
:display-placeholder="!displayProductionChart" | |||||
:key="refreshToken + '_yield_chart_linemonth'" | :key="refreshToken + '_yield_chart_linemonth'" | ||||
:raw-data="websocketData" | :raw-data="websocketData" | ||||
/> | /> | ||||
@@ -14,10 +14,10 @@ const store = useWsStore(); | |||||
onMounted(() => { | onMounted(() => { | ||||
// websocketData.value = loadData([ | // 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); | websocketData.value = loadData(store.data2.dailyTarget); | ||||
@@ -103,7 +103,6 @@ function loadData(dailyTarget) { | |||||
<p v-show="!show" class="empty-data-hint">暂无数据</p> --> | <p v-show="!show" class="empty-data-hint">暂无数据</p> --> | ||||
<div class="container-body__h-full"> | <div class="container-body__h-full"> | ||||
<yield-chart | <yield-chart | ||||
:display-placeholder="!displayProductionChart" | |||||
:key="refreshToken + '_yield_chart_linetoday'" | :key="refreshToken + '_yield_chart_linetoday'" | ||||
:raw-data="websocketData" | :raw-data="websocketData" | ||||
/> | /> | ||||