done 本月班组情况

This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-01-31 11:22:01 +08:00
parent da305dbba9
commit 1c4ce804ff
4 changed files with 84 additions and 202 deletions

View File

@ -24,13 +24,7 @@ onMounted(() => {
top: 50px;
right: 420px;
font-size: 24px;
color: #69B4FF;
color: #69b4ff;
line-height: 1;
}
:fullscreen .datetime {
/* right: 620px;
top: 56px; */
color: red;
}
</style>

View File

@ -8,55 +8,62 @@ import setupFn from "./TeamChartMonthOptions";
const store = useWsStore();
const chartChart = ref(null);
const chart = ref(null);
const showChartDom = ref(false);
const monthData = ref(null);
store.$subscribe((mutation, state) => {
console.log("[ChartMonth] ===> state: ", state.data2.monthlyTarget);
if (
state.data2.monthlyTarget == undefined ||
state.data2.monthlyTarget?.length == 0
) {
console.log("[ChartMonth] ===> 清除状态");
monthData.value = null;
if (chart.value) chart.value.dispose();
return;
/** 无状态,处理数据 */
function loadData(yieldArray) {
if (yieldArray == undefined || yieldArray?.length == 0) return null;
const result = [];
for (let i = 0; i < yieldArray.length; ++i) {
if (yieldArray[i].teamName == "A组") {
result[0] = parseInt(yieldArray[i].yield);
} else if (yieldArray[i].teamName == "B组") {
result[1] = parseInt(yieldArray[i].yield);
} else if (yieldArray[i].teamName == "C组") {
result[2] = parseInt(yieldArray[i].yield);
}
}
return result;
}
if (!state.data2.monthlyTarget[0]) return;
const { targetProduction, nowProduction, targetYield, nowYield } =
state.data2.monthlyTarget[0];
monthData.value = { targetProduction, nowProduction, targetYield, nowYield };
setupChart();
});
// 绿24FF5E
// FFB524
// FF3737
function setupChart() {
function setupChart(chart, dom, data) {
if (chart.value) chart.value.dispose();
nextTick(() => {
console.log("[ChartMonth] ===> 初始化表格: ", monthData.value);
chart.value = echarts.init(chartChart.value);
setupFn(chart.value, monthData.value);
chart.value = echarts.init(dom);
setupFn(chart.value, data);
});
}
/** 有状态,处理数据 */
function __apply(yieldArray) {
const d = loadData(yieldArray);
if (!d) {
showChartDom.value = false;
if (chart.value) chart.value.dispose();
return;
}
showChartDom.value = true;
setupChart(chart, chartChart.value, d);
}
//
store.$subscribe((mutation, state) => {
__apply(state.data2.lineTeamMonthYieldList);
});
onMounted(() => {
chartChart.value.classList.add("h-full");
// nextTick(() => {
// setupChart();
// })
});
</script>
<template>
<Container class="chart" title="本月班组情况" icon="cube">
<div ref="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div>
<p v-show="!monthData" class="empty-data-hint">暂无数据</p>
<div
ref="chartChart"
class="chart-chart"
:style="{ opacity: showChartDom ? 1 : 0 }"
></div>
<p v-show="!chart" class="empty-data-hint">暂无数据</p>
</Container>
</template>
@ -65,8 +72,6 @@ onMounted(() => {
/* height: 300px; */
}
.chart-inner {}
.chart-chart {
height: 100%;
}

View File

@ -1,176 +1,59 @@
export const options = {
color: ['#a4c9d1', '#72340b', '#ffd601' ],
grid: {
top: 0,
left: 0,
right: 0,
bottom: 0
top: 8,
bottom: 20,
left: 42,
right: 28,
},
legend: {
show: false,
},
title: [
{
text: "当前产量:" + 100 + " 片",
left: "27%",
textAlign: "center",
top: "70%",
textStyle: {
fontSize: 16,
color: '#fffa'
xAxis: {
max: 100,
splitLine: {
lineStyle: {
color: "#fff2",
},
},
{
text: "目标产量:" + 100 + " 片",
left: "27%",
textAlign: "center",
top: "85%",
textStyle: {
fontSize: 16,
color: '#fffa'
axisLabel: {
fontSize: 16,
color: "#e5e5e5a3",
},
},
yAxis: {
type: "category",
data: ["A组", "B组", "C组"],
inverse: true,
max: 2, // only the largest 3 bars will be displayed
axisLabel: {
fontSize: 16,
color: "#e5e5e5a3",
},
splitLine: {
lineStyle: {
color: "#e5e5e5",
},
},
{
text: "当前成品率:" + 22 + "%",
left: "72%",
textAlign: "center",
top: "70%",
textStyle: {
fontSize: 16,
color: '#fffa'
},
},
{
text: "目标成品率:" + 22 + "%",
left: "72%",
textAlign: "center",
top: "85%",
textStyle: {
fontSize: 16,
color: '#fffa'
},
},
],
},
series: [
{
type: "gauge",
startAngle: 90,
center: ["27%", "35%"],
endAngle: -270,
radius: "55%",
progress: {
type: "bar",
data: [34, 2, 23],
label: {
show: true,
width: 12,
},
axisLine: {
lineStyle: {
width: 12,
},
},
pointer: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
detail: {
valueAnimation: true,
fontSize: 16,
offsetCenter: [0, "0%"],
formatter: "{value}%",
color: "rgba(255, 255, 255, 1)",
},
data: [
{
// value: (nowProduction / targetProduction * 100).toFixed(1),
value: 100,
},
],
},
{
type: "gauge",
startAngle: 90,
center: ["73%", "35%"],
endAngle: -270,
radius: "55%",
progress: {
show: true,
width: 12,
},
axisLine: {
lineStyle: {
width: 12,
},
},
pointer: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
detail: {
show: true,
valueAnimation: true,
fontSize: 16,
offsetCenter: [0, "0%"],
// formatter: 0 + "%",
// formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
position: "right",
formatter: "{c}%",
color: "#fff",
fontSize: 16,
},
data: [
{
// value: targetYield,
value: 100,
name: "Perfect",
title: {
show: false,
},
detail: {
show: false,
valueAnimation: true,
offsetCenter: ["0%", "-20%"],
},
},
{
value: 100,
// value: nowYield,
name: "Good",
title: {
show: false,
},
detail: {
show: false,
valueAnimation: true,
offsetCenter: ["0%", "10%"],
},
},
{
value: 0,
detail: {
show: true,
},
},
],
},
],
};
export default function setup(echartInstance, data) {
export default function setup(echartInstance, dataArr) {
const new_options = { ...options };
new_options.title[0].text = "当前产量:" + data.nowProduction + " 片";
new_options.title[1].text = "目标产量:" + data.targetProduction + " 片";
new_options.title[2].text = "当前成品率:" + data.nowYield + "%";
new_options.title[3].text = "目标成品率:" + data.targetYield + "%";
new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1)
new_options.series[1].data[0].value = data.targetYield
new_options.series[1].data[1].value = data.nowYield
new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%',
new_options.series[0].data = dataArr;
echartInstance.setOption(new_options);
}

View File

@ -22,7 +22,7 @@ import LineMonth from '../components/datapage/LineMonth.vue';
<!-- 本日班组情况 -->
<TeamChartDay />
<!-- 本月班组情况 -->
<!-- <TeamChartMonth /> -->
<TeamChartMonth />
</div>
</template>