done 本月班组情况
This commit is contained in:
parent
da305dbba9
commit
1c4ce804ff
@ -24,13 +24,7 @@ onMounted(() => {
|
|||||||
top: 50px;
|
top: 50px;
|
||||||
right: 420px;
|
right: 420px;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: #69B4FF;
|
color: #69b4ff;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
:fullscreen .datetime {
|
|
||||||
/* right: 620px;
|
|
||||||
top: 56px; */
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
@ -8,55 +8,62 @@ import setupFn from "./TeamChartMonthOptions";
|
|||||||
const store = useWsStore();
|
const store = useWsStore();
|
||||||
const chartChart = ref(null);
|
const chartChart = ref(null);
|
||||||
const chart = ref(null);
|
const chart = ref(null);
|
||||||
|
const showChartDom = ref(false);
|
||||||
|
|
||||||
const monthData = ref(null);
|
/** 无状态,处理数据 */
|
||||||
store.$subscribe((mutation, state) => {
|
function loadData(yieldArray) {
|
||||||
console.log("[ChartMonth] ===> state: ", state.data2.monthlyTarget);
|
if (yieldArray == undefined || yieldArray?.length == 0) return null;
|
||||||
if (
|
const result = [];
|
||||||
state.data2.monthlyTarget == undefined ||
|
for (let i = 0; i < yieldArray.length; ++i) {
|
||||||
state.data2.monthlyTarget?.length == 0
|
if (yieldArray[i].teamName == "A组") {
|
||||||
) {
|
result[0] = parseInt(yieldArray[i].yield);
|
||||||
console.log("[ChartMonth] ===> 清除状态");
|
} else if (yieldArray[i].teamName == "B组") {
|
||||||
monthData.value = null;
|
result[1] = parseInt(yieldArray[i].yield);
|
||||||
if (chart.value) chart.value.dispose();
|
} else if (yieldArray[i].teamName == "C组") {
|
||||||
return;
|
result[2] = parseInt(yieldArray[i].yield);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
if (!state.data2.monthlyTarget[0]) return;
|
function setupChart(chart, dom, data) {
|
||||||
const { targetProduction, nowProduction, targetYield, nowYield } =
|
|
||||||
state.data2.monthlyTarget[0];
|
|
||||||
monthData.value = { targetProduction, nowProduction, targetYield, nowYield };
|
|
||||||
setupChart();
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 绿色:24FF5E
|
|
||||||
// 黄色:FFB524
|
|
||||||
// 红色:FF3737
|
|
||||||
|
|
||||||
|
|
||||||
function setupChart() {
|
|
||||||
if (chart.value) chart.value.dispose();
|
if (chart.value) chart.value.dispose();
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
console.log("[ChartMonth] ===> 初始化表格: ", monthData.value);
|
chart.value = echarts.init(dom);
|
||||||
chart.value = echarts.init(chartChart.value);
|
setupFn(chart.value, data);
|
||||||
setupFn(chart.value, monthData.value);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 有状态,处理数据 */
|
||||||
|
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(() => {
|
onMounted(() => {
|
||||||
chartChart.value.classList.add("h-full");
|
chartChart.value.classList.add("h-full");
|
||||||
// nextTick(() => {
|
|
||||||
// setupChart();
|
|
||||||
// })
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Container class="chart" title="本月班组情况" icon="cube">
|
<Container class="chart" title="本月班组情况" icon="cube">
|
||||||
<div ref="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div>
|
<div
|
||||||
<p v-show="!monthData" class="empty-data-hint">暂无数据</p>
|
ref="chartChart"
|
||||||
|
class="chart-chart"
|
||||||
|
:style="{ opacity: showChartDom ? 1 : 0 }"
|
||||||
|
></div>
|
||||||
|
<p v-show="!chart" class="empty-data-hint">暂无数据</p>
|
||||||
</Container>
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -65,8 +72,6 @@ onMounted(() => {
|
|||||||
/* height: 300px; */
|
/* height: 300px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-inner {}
|
|
||||||
|
|
||||||
.chart-chart {
|
.chart-chart {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
@ -1,176 +1,59 @@
|
|||||||
export const options = {
|
export const options = {
|
||||||
|
color: ['#a4c9d1', '#72340b', '#ffd601' ],
|
||||||
grid: {
|
grid: {
|
||||||
top: 0,
|
top: 8,
|
||||||
left: 0,
|
bottom: 20,
|
||||||
right: 0,
|
left: 42,
|
||||||
bottom: 0
|
right: 28,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
},
|
},
|
||||||
title: [
|
xAxis: {
|
||||||
{
|
max: 100,
|
||||||
text: "当前产量:" + 100 + " 片",
|
splitLine: {
|
||||||
left: "27%",
|
lineStyle: {
|
||||||
textAlign: "center",
|
color: "#fff2",
|
||||||
top: "70%",
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 16,
|
|
||||||
color: '#fffa'
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
axisLabel: {
|
||||||
text: "目标产量:" + 100 + " 片",
|
fontSize: 16,
|
||||||
left: "27%",
|
color: "#e5e5e5a3",
|
||||||
textAlign: "center",
|
},
|
||||||
top: "85%",
|
},
|
||||||
textStyle: {
|
yAxis: {
|
||||||
fontSize: 16,
|
type: "category",
|
||||||
color: '#fffa'
|
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: [
|
series: [
|
||||||
{
|
{
|
||||||
type: "gauge",
|
type: "bar",
|
||||||
startAngle: 90,
|
data: [34, 2, 23],
|
||||||
center: ["27%", "35%"],
|
label: {
|
||||||
endAngle: -270,
|
|
||||||
radius: "55%",
|
|
||||||
progress: {
|
|
||||||
show: true,
|
show: true,
|
||||||
width: 12,
|
position: "right",
|
||||||
},
|
formatter: "{c}%",
|
||||||
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) + '%',
|
|
||||||
color: "#fff",
|
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 };
|
const new_options = { ...options };
|
||||||
new_options.title[0].text = "当前产量:" + data.nowProduction + " 片";
|
new_options.series[0].data = dataArr;
|
||||||
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) + '%',
|
|
||||||
echartInstance.setOption(new_options);
|
echartInstance.setOption(new_options);
|
||||||
}
|
}
|
||||||
|
@ -22,7 +22,7 @@ import LineMonth from '../components/datapage/LineMonth.vue';
|
|||||||
<!-- 本日班组情况 -->
|
<!-- 本日班组情况 -->
|
||||||
<TeamChartDay />
|
<TeamChartDay />
|
||||||
<!-- 本月班组情况 -->
|
<!-- 本月班组情况 -->
|
||||||
<!-- <TeamChartMonth /> -->
|
<TeamChartMonth />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user