Compare commits
5 Commits
53ead47882
...
1c4ce804ff
Author | SHA1 | Date | |
---|---|---|---|
|
1c4ce804ff | ||
|
da305dbba9 | ||
|
62d3566f29 | ||
|
7eab7ddebb | ||
|
e0da16c903 |
@ -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>
|
||||
|
@ -51,7 +51,7 @@ store.$subscribe((mutation, state) => {
|
||||
function loadData(monthlyTarget) {
|
||||
if (
|
||||
monthlyTarget == undefined ||
|
||||
monthlyTarget?.length == 0 ||
|
||||
// monthlyTarget?.length == 0 ||
|
||||
!monthlyTarget[0]
|
||||
) {
|
||||
return null;
|
||||
|
@ -3,7 +3,7 @@ export const options = {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0
|
||||
bottom: 0,
|
||||
},
|
||||
title: [
|
||||
{
|
||||
@ -13,7 +13,7 @@ export const options = {
|
||||
top: "70%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fffa'
|
||||
color: "#fffa",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -23,7 +23,7 @@ export const options = {
|
||||
top: "85%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fffa'
|
||||
color: "#fffa",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -33,7 +33,7 @@ export const options = {
|
||||
top: "70%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fffa'
|
||||
color: "#fffa",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -43,7 +43,7 @@ export const options = {
|
||||
top: "85%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fffa'
|
||||
color: "#fffa",
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -149,7 +149,7 @@ export const options = {
|
||||
show: false,
|
||||
valueAnimation: true,
|
||||
offsetCenter: ["0%", "10%"],
|
||||
formatter: '99.23%'
|
||||
formatter: "99.23%",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -168,17 +168,24 @@ export default function setup(echartInstance, data) {
|
||||
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[0].value =
|
||||
data.nowProduction != null &&
|
||||
data.targetProduction != null &&
|
||||
data.targetProduction != 0
|
||||
? ((data.nowProduction / data.targetProduction) * 100).toFixed(1)
|
||||
: 0;
|
||||
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 != null && data.targetYield != null && data.targetYield != 0
|
||||
? ((data.nowYield / data.targetYield) * 100).toFixed(2) + "%"
|
||||
: "0%";
|
||||
echartInstance.setOption(new_options);
|
||||
}
|
||||
|
||||
|
||||
// {
|
||||
// "targetProduction": 99,
|
||||
// "nowProduction": 58,
|
||||
// "targetYield": 12,
|
||||
// "nowYield": 9
|
||||
// }
|
||||
// }
|
||||
|
@ -3,7 +3,7 @@ import { ref, watch, onMounted, nextTick } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Container from "../Base/Container.vue";
|
||||
import { useWsStore } from "../../store";
|
||||
import chartSetup from "./LatestWeekYieldOptions";
|
||||
import chartSetup, { loadData } from "./LatestWeekYieldOptions";
|
||||
|
||||
const store = useWsStore();
|
||||
const chartContainer = ref(null);
|
||||
@ -12,23 +12,45 @@ const show = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
chartContainer.value.classList.add("h-full");
|
||||
// const d = loadData(store.data2.lineSevenDayLogList);
|
||||
const d = loadData([
|
||||
{
|
||||
data: [
|
||||
{ day: "1001", num: 24 },
|
||||
{ day: "1002", num: 14 },
|
||||
{ day: "1003", num: 234 },
|
||||
{ day: "1004", num: 84 },
|
||||
{ day: "1005", num: 34 },
|
||||
{ day: "1006", num: 44 },
|
||||
{ day: "1007", num: 20 },
|
||||
],
|
||||
name: "钢一线",
|
||||
},
|
||||
{ data: [], name: "钢二线" },
|
||||
{ data: [], name: "钢三线" },
|
||||
]);
|
||||
const d = loadData(store.data2.lineSevenDayLogList);
|
||||
// const d = loadData([
|
||||
// {
|
||||
// data: [
|
||||
// { day: "10-10", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-11", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-12", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-13", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-14", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-15", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-16", num: Math.floor(Math.random() * 500) },
|
||||
// ],
|
||||
// name: "钢一线",
|
||||
// },
|
||||
// {
|
||||
// data: [
|
||||
// { day: "10-10", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-11", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-12", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-13", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-14", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-15", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-16", num: Math.floor(Math.random() * 500) },
|
||||
// ],
|
||||
// name: "钢二线",
|
||||
// },
|
||||
// {
|
||||
// data: [
|
||||
// { day: "10-10", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-11", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-12", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-13", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-14", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-15", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-16", num: Math.floor(Math.random() * 500) },
|
||||
// ],
|
||||
// name: "钢三线",
|
||||
// },
|
||||
// ]);
|
||||
if (!d) {
|
||||
show.value = false;
|
||||
if (chartInstance.value) {
|
||||
@ -38,52 +60,52 @@ onMounted(() => {
|
||||
} else {
|
||||
if (!chartInstance.value)
|
||||
chartInstance.value = echarts.init(chartContainer.value);
|
||||
chartSetup(chartInstance.value);
|
||||
chartSetup(chartInstance.value, d);
|
||||
show.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
// 订阅
|
||||
store.$subscribe((mutation, state) => {
|
||||
// const d = loadData(state.data2.lineSevenDayLogList);
|
||||
const d = loadData([
|
||||
{
|
||||
data: [
|
||||
{ day: "1001", num: 24 },
|
||||
{ day: "1002", num: 14 },
|
||||
{ day: "1003", num: 234 },
|
||||
{ day: "1004", num: 84 },
|
||||
{ day: "1005", num: 34 },
|
||||
{ day: "1006", num: 44 },
|
||||
{ day: "1007", num: 20 },
|
||||
],
|
||||
name: "钢一线",
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{ day: "1001", num: 24 },
|
||||
{ day: "1002", num: 14 },
|
||||
{ day: "1003", num: 234 },
|
||||
{ day: "1004", num: 84 },
|
||||
{ day: "1005", num: 34 },
|
||||
{ day: "1006", num: 44 },
|
||||
{ day: "1007", num: 20 },
|
||||
],
|
||||
name: "钢二线",
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{ day: "1001", num: 24 },
|
||||
{ day: "1002", num: 14 },
|
||||
{ day: "1003", num: 234 },
|
||||
{ day: "1004", num: 84 },
|
||||
{ day: "1005", num: 34 },
|
||||
{ day: "1006", num: 44 },
|
||||
{ day: "1007", num: 20 },
|
||||
],
|
||||
name: "钢三线",
|
||||
},
|
||||
]);
|
||||
const d = loadData(state.data2.lineSevenDayLogList);
|
||||
// const d = loadData([
|
||||
// {
|
||||
// data: [
|
||||
// { day: "10-10", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-11", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-12", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-13", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-14", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-15", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-16", num: Math.floor(Math.random() * 500) },
|
||||
// ],
|
||||
// name: "钢一线",
|
||||
// },
|
||||
// {
|
||||
// data: [
|
||||
// { day: "10-10", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-11", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-12", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-13", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-14", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-15", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-16", num: Math.floor(Math.random() * 500) },
|
||||
// ],
|
||||
// name: "钢二线",
|
||||
// },
|
||||
// {
|
||||
// data: [
|
||||
// { day: "10-10", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-11", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-12", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-13", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-14", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-15", num: Math.floor(Math.random() * 500) },
|
||||
// { day: "10-16", num: Math.floor(Math.random() * 500) },
|
||||
// ],
|
||||
// name: "钢三线",
|
||||
// },
|
||||
// ]);
|
||||
if (!d) {
|
||||
show.value = false;
|
||||
if (chartInstance.value) {
|
||||
@ -93,37 +115,10 @@ store.$subscribe((mutation, state) => {
|
||||
} else {
|
||||
if (!chartInstance.value)
|
||||
chartInstance.value = echarts.init(chartContainer.value);
|
||||
chartSetup(chartInstance.value);
|
||||
chartSetup(chartInstance.value, d);
|
||||
show.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
function loadData(list) {
|
||||
if (!list || list.length != 3 || list[0].data.length <= 0) return null;
|
||||
const outerdata = [[], [], [], [], [], [], []];
|
||||
|
||||
list.forEach(line => {
|
||||
|
||||
})
|
||||
|
||||
const dateList = list[0].data.map((item) => item.day.toString()).sort();
|
||||
console.log("datelist", dateList);
|
||||
dateList.forEach((date, index) => {
|
||||
outerdata[index][0] = date;
|
||||
});
|
||||
list.forEach((line, index) => {
|
||||
if (line.data[0] != null) {
|
||||
for (let x = 0; x < 7; x++) {
|
||||
for (let y = 0; y < line.data.length; y++) {
|
||||
if (outerdata[x + 1][0] == line.data[y].day) {
|
||||
outerdata[x + 1][line + 1] = line.data[y].num;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
return outerdata;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -1,5 +1,3 @@
|
||||
const d = new Date();
|
||||
const m = d.getMonth() + 1;
|
||||
export const options = {
|
||||
legend: {
|
||||
textStyle: {
|
||||
@ -8,37 +6,33 @@ export const options = {
|
||||
},
|
||||
tooltip: {},
|
||||
dataset: {
|
||||
source: [
|
||||
["date", "钢1线", "钢2线", "钢3线"],
|
||||
[m + "-" + 1, 0, 0, 0],
|
||||
[m + "-" + 2, 0, 0, 0],
|
||||
[m + "-" + 3, 0, 0, 0],
|
||||
[m + "-" + 4, 0, 0, 0],
|
||||
[m + "-" + 5, 0, 0, 0],
|
||||
],
|
||||
source: [],
|
||||
},
|
||||
grid: {
|
||||
top: 56,
|
||||
bottom: 12,
|
||||
left: 20,
|
||||
left: 10,
|
||||
right: 20,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
fontSize: 12,
|
||||
color: "#fff8",
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "片",
|
||||
nameTextStyle: {
|
||||
color: "#fff8",
|
||||
fontSize: 18,
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 18,
|
||||
fontSize: 12,
|
||||
color: "#fff8",
|
||||
},
|
||||
splitLine: {
|
||||
@ -66,3 +60,31 @@ export default function setup(
|
||||
new_options.dataset.source = [["date", "钢1线", "钢2线", "钢3线"], ...list];
|
||||
echartInstance.setOption(new_options);
|
||||
}
|
||||
|
||||
export function createDatasetFrom(lines, datelist) {
|
||||
const dataset = [];
|
||||
datelist.forEach((date) => {
|
||||
const row = [date];
|
||||
lines.forEach((line) => {
|
||||
const item = line.data.find((item) => item.day === date);
|
||||
row.push(item ? item.num : 0);
|
||||
});
|
||||
dataset.push(row);
|
||||
});
|
||||
console.log(dataset);
|
||||
return dataset;
|
||||
}
|
||||
|
||||
export function findDatelist(lines) {
|
||||
const dateList = [];
|
||||
lines.forEach((line) => {
|
||||
dateList.push(...line.data.map((item) => item.day));
|
||||
});
|
||||
return Array.from(new Set(dateList)).sort();
|
||||
}
|
||||
|
||||
export function loadData(list) {
|
||||
if (!list || list.length != 3 || list[0].data.length <= 0) return null;
|
||||
const datelist = findDatelist(list);
|
||||
return createDatasetFrom(list, datelist);
|
||||
}
|
||||
|
@ -5,68 +5,100 @@ import Container from "../Base/Container.vue";
|
||||
import { useWsStore } from "../../store";
|
||||
import setupFn from "./LineMonthOptions";
|
||||
|
||||
const show = ref(false);
|
||||
const chartContainer = ref(null);
|
||||
const chartInstance = ref(null);
|
||||
const store = useWsStore();
|
||||
const chartChart = ref(null);
|
||||
const chart = ref(null);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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() {
|
||||
if (chart.value) chart.value.dispose();
|
||||
nextTick(() => {
|
||||
console.log("[ChartMonth] ===> 初始化表格: ", monthData.value);
|
||||
chart.value = echarts.init(chartChart.value);
|
||||
setupFn(chart.value, monthData.value);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
chartChart.value.classList.add("h-full");
|
||||
// nextTick(() => {
|
||||
// setupChart();
|
||||
// })
|
||||
chartContainer.value.classList.add("h-full");
|
||||
const d = loadData(store.data2.monthlyTarget);
|
||||
// const d = loadData([
|
||||
// {
|
||||
// targetProduction: 100,
|
||||
// nowProduction: 66,
|
||||
// targetYield: 13,
|
||||
// nowYield: 3,
|
||||
// },
|
||||
// ]);
|
||||
if (!d) {
|
||||
show.value = false;
|
||||
if (chartInstance.value) {
|
||||
chartInstance.value.dispose();
|
||||
chartInstance.value = null;
|
||||
}
|
||||
} else {
|
||||
if (!chartInstance.value)
|
||||
chartInstance.value = echarts.init(chartContainer.value);
|
||||
setupFn(chartInstance.value, d);
|
||||
show.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
// 订阅
|
||||
store.$subscribe((mutation, state) => {
|
||||
const d = loadData(state.data2.monthlyTarget);
|
||||
// const d = loadData([
|
||||
// {
|
||||
// targetProduction: 100,
|
||||
// nowProduction: 66,
|
||||
// targetYield: 13,
|
||||
// nowYield: 3,
|
||||
// },
|
||||
// ]);
|
||||
if (!d) {
|
||||
show.value = false;
|
||||
if (chartInstance.value) {
|
||||
chartInstance.value.dispose();
|
||||
chartInstance.value = null;
|
||||
}
|
||||
} else {
|
||||
if (!chartInstance.value)
|
||||
chartInstance.value = echarts.init(chartContainer.value);
|
||||
setupFn(chartInstance.value, d);
|
||||
show.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
// utils
|
||||
function loadData(monthlyTarget) {
|
||||
if (
|
||||
monthlyTarget == undefined ||
|
||||
// monthlyTarget?.length == 0 ||
|
||||
!monthlyTarget[0]
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
targetProduction: monthlyTarget[0].targetProduction,
|
||||
nowProduction: monthlyTarget[0].nowProduction,
|
||||
targetYield: monthlyTarget[0].targetYield,
|
||||
nowYield: monthlyTarget[0].nowYield,
|
||||
};
|
||||
}
|
||||
</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="chartContainer"
|
||||
class="chart-chart"
|
||||
:style="{ opacity: show ? 1 : 0 }"
|
||||
></div>
|
||||
<p v-show="!show" class="empty-data-hint">暂无数据</p>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
/* height: 300px; */
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.chart-inner {}
|
||||
|
||||
.chart-chart {
|
||||
height: 100%;
|
||||
}
|
||||
|
@ -56,11 +56,11 @@ export const options = {
|
||||
radius: "55%",
|
||||
progress: {
|
||||
show: true,
|
||||
width: 12,
|
||||
width: 24,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 12,
|
||||
width: 24,
|
||||
},
|
||||
},
|
||||
pointer: {
|
||||
@ -97,11 +97,11 @@ export const options = {
|
||||
radius: "55%",
|
||||
progress: {
|
||||
show: true,
|
||||
width: 12,
|
||||
width: 24,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 12,
|
||||
width: 24,
|
||||
},
|
||||
},
|
||||
pointer: {
|
||||
|
@ -5,68 +5,100 @@ import Container from "../Base/Container.vue";
|
||||
import { useWsStore } from "../../store";
|
||||
import setupFn from "./LineTodayOptions";
|
||||
|
||||
const show = ref(false);
|
||||
const chartContainer = ref(null);
|
||||
const chartInstance = ref(null);
|
||||
const store = useWsStore();
|
||||
const chartChart = ref(null);
|
||||
const chart = ref(null);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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() {
|
||||
if (chart.value) chart.value.dispose();
|
||||
nextTick(() => {
|
||||
console.log("[ChartMonth] ===> 初始化表格: ", monthData.value);
|
||||
chart.value = echarts.init(chartChart.value);
|
||||
setupFn(chart.value, monthData.value);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
chartChart.value.classList.add("h-full");
|
||||
// nextTick(() => {
|
||||
// setupChart();
|
||||
// })
|
||||
chartContainer.value.classList.add("h-full");
|
||||
const d = loadData(store.data2.dailyTarget);
|
||||
// const d = loadData([
|
||||
// {
|
||||
// targetProduction: 100,
|
||||
// nowProduction: 66,
|
||||
// targetYield: 13,
|
||||
// nowYield: 3,
|
||||
// },
|
||||
// ]);
|
||||
if (!d) {
|
||||
show.value = false;
|
||||
if (chartInstance.value) {
|
||||
chartInstance.value.dispose();
|
||||
chartInstance.value = null;
|
||||
}
|
||||
} else {
|
||||
if (!chartInstance.value)
|
||||
chartInstance.value = echarts.init(chartContainer.value);
|
||||
setupFn(chartInstance.value, d);
|
||||
show.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
// 订阅
|
||||
store.$subscribe((mutation, state) => {
|
||||
const d = loadData(state.data2.dailyTarget);
|
||||
// const d = loadData([
|
||||
// {
|
||||
// targetProduction: 100,
|
||||
// nowProduction: 66,
|
||||
// targetYield: 13,
|
||||
// nowYield: 3,
|
||||
// },
|
||||
// ]);
|
||||
if (!d) {
|
||||
show.value = false;
|
||||
if (chartInstance.value) {
|
||||
chartInstance.value.dispose();
|
||||
chartInstance.value = null;
|
||||
}
|
||||
} else {
|
||||
if (!chartInstance.value)
|
||||
chartInstance.value = echarts.init(chartContainer.value);
|
||||
setupFn(chartInstance.value, d);
|
||||
show.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
// utils
|
||||
function loadData(dailyTarget) {
|
||||
if (
|
||||
dailyTarget == undefined ||
|
||||
// dailyTarget?.length == 0 ||
|
||||
!dailyTarget[0]
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
targetProduction: dailyTarget[0].targetProduction,
|
||||
nowProduction: dailyTarget[0].nowProduction,
|
||||
targetYield: dailyTarget[0].targetYield,
|
||||
nowYield: dailyTarget[0].nowYield,
|
||||
};
|
||||
}
|
||||
</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="chartContainer"
|
||||
class="chart-chart"
|
||||
:style="{ opacity: show ? 1 : 0 }"
|
||||
></div>
|
||||
<p v-show="!show" class="empty-data-hint">暂无数据</p>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
/* height: 300px; */
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.chart-inner {}
|
||||
|
||||
.chart-chart {
|
||||
height: 100%;
|
||||
}
|
||||
|
@ -3,47 +3,47 @@ export const options = {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0
|
||||
bottom: 0,
|
||||
},
|
||||
title: [
|
||||
{
|
||||
text: "当前产量:" + 100 + " 片",
|
||||
text: "当前产量:" + 118 + " 片",
|
||||
left: "27%",
|
||||
textAlign: "center",
|
||||
top: "70%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fffa'
|
||||
color: "#fffa",
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "目标产量:" + 100 + " 片",
|
||||
text: "目标产量:" + 213 + " 片",
|
||||
left: "27%",
|
||||
textAlign: "center",
|
||||
top: "85%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fffa'
|
||||
color: "#fffa",
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "当前成品率:" + 22 + "%",
|
||||
text: "当前成品率:" + 78 + "%",
|
||||
left: "72%",
|
||||
textAlign: "center",
|
||||
top: "70%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fffa'
|
||||
color: "#fffa",
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "目标成品率:" + 22 + "%",
|
||||
text: "目标成品率:" + 90 + "%",
|
||||
left: "72%",
|
||||
textAlign: "center",
|
||||
top: "85%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fffa'
|
||||
color: "#fffa",
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -56,11 +56,11 @@ export const options = {
|
||||
radius: "55%",
|
||||
progress: {
|
||||
show: true,
|
||||
width: 12,
|
||||
width: 24,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 12,
|
||||
width: 24,
|
||||
},
|
||||
},
|
||||
pointer: {
|
||||
@ -85,7 +85,7 @@ export const options = {
|
||||
data: [
|
||||
{
|
||||
// value: (nowProduction / targetProduction * 100).toFixed(1),
|
||||
value: 100,
|
||||
value: 89.78,
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -97,11 +97,11 @@ export const options = {
|
||||
radius: "55%",
|
||||
progress: {
|
||||
show: true,
|
||||
width: 12,
|
||||
width: 24,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 12,
|
||||
width: 24,
|
||||
},
|
||||
},
|
||||
pointer: {
|
||||
@ -128,7 +128,7 @@ export const options = {
|
||||
data: [
|
||||
{
|
||||
// value: targetYield,
|
||||
value: 100,
|
||||
value: 78,
|
||||
name: "Perfect",
|
||||
title: {
|
||||
show: false,
|
||||
@ -140,8 +140,7 @@ export const options = {
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 100,
|
||||
// value: nowYield,
|
||||
value: 90,
|
||||
name: "Good",
|
||||
title: {
|
||||
show: false,
|
||||
@ -150,6 +149,7 @@ export const options = {
|
||||
show: false,
|
||||
valueAnimation: true,
|
||||
offsetCenter: ["0%", "10%"],
|
||||
formatter: "99.23%",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -168,9 +168,24 @@ export default function setup(echartInstance, data) {
|
||||
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[0].value =
|
||||
data.nowProduction != null &&
|
||||
data.targetProduction != null &&
|
||||
data.targetProduction != 0
|
||||
? ((data.nowProduction / data.targetProduction) * 100).toFixed(1)
|
||||
: 0;
|
||||
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 != null && data.targetYield != null && data.targetYield != 0
|
||||
? ((data.nowYield / data.targetYield) * 100).toFixed(2) + "%"
|
||||
: "0%";
|
||||
echartInstance.setOption(new_options);
|
||||
}
|
||||
|
||||
// {
|
||||
// "targetProduction": 99,
|
||||
// "nowProduction": 58,
|
||||
// "targetYield": 12,
|
||||
// "nowYield": 9
|
||||
// }
|
||||
|
@ -8,47 +8,49 @@ import setupFn from "./TeamChartDayOptions";
|
||||
const store = useWsStore();
|
||||
const chartChart = ref(null);
|
||||
const chart = ref(null);
|
||||
const showChartDom = ref(false);
|
||||
|
||||
const dayData = ref([]);
|
||||
store.$subscribe((mutation, state) => {
|
||||
console.log("[ChartDay] ===> state: ", state.data2.classTodayProductYield);
|
||||
if (
|
||||
state.data2.classTodayProductYield == undefined ||
|
||||
state.data2.classTodayProductYield?.length == 0
|
||||
) {
|
||||
console.log("[ChartDay] ===> 清除状态");
|
||||
dayData.value.splice(0);
|
||||
/** 无状态,处理数据 */
|
||||
function loadData(yieldArray) {
|
||||
const result = [];
|
||||
if (yieldArray == undefined || yieldArray?.length == 0) return null;
|
||||
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;
|
||||
}
|
||||
|
||||
function setupChart(chart, dom, data) {
|
||||
if (chart.value) chart.value.dispose();
|
||||
nextTick(() => {
|
||||
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;
|
||||
}
|
||||
|
||||
for (let i = 0; i < state.data2.classTodayProductYield.length; ++i) {
|
||||
if (state.data2.classTodayProductYield[i].teamName == "A组") {
|
||||
dayData.value[0] = parseInt(state.data2.classTodayProductYield[i].yield);
|
||||
} else if (state.data2.classTodayProductYield[i].teamName == "B组") {
|
||||
dayData.value[1] = parseInt(state.data2.classTodayProductYield[i].yield);
|
||||
} else if (state.data2.classTodayProductYield[i].teamName == "C组") {
|
||||
dayData.value[2] = parseInt(state.data2.classTodayProductYield[i].yield);
|
||||
}
|
||||
}
|
||||
console.log("[ChartDay] ===> dayData: ", dayData.value);
|
||||
setupChart();
|
||||
});
|
||||
|
||||
// onMounted(() => {
|
||||
// nextTick(() => {
|
||||
// setupChart();
|
||||
// })
|
||||
// })
|
||||
|
||||
function setupChart() {
|
||||
if (chart.value) chart.value.dispose();
|
||||
nextTick(() => {
|
||||
chart.value = echarts.init(chartChart.value);
|
||||
setupFn(chart.value, dayData.value);
|
||||
});
|
||||
showChartDom.value = true;
|
||||
setupChart(chart, chartChart.value, d);
|
||||
}
|
||||
|
||||
// 订阅
|
||||
store.$subscribe((mutation, state) => {
|
||||
__apply(state.data2.classTodayProductYield);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
chartChart.value.classList.add("h-full");
|
||||
});
|
||||
@ -56,10 +58,12 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<Container class="chart" title="本日班组情况" icon="cube">
|
||||
<div ref="chartChart" class="chart-chart" style="{opacity: (dayData && dayData.length > 0) ? 1 : 0}"></div>
|
||||
<p v-show="!dayData || dayData.length === 0" 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>
|
||||
|
||||
|
@ -1,11 +1,13 @@
|
||||
export const options = {
|
||||
color: ['#ffd601', '#72340b'],
|
||||
color: ['#a4c9d1', '#72340b', '#ffd601' ],
|
||||
grid: {
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
top: 8,
|
||||
bottom: 20,
|
||||
left: 42,
|
||||
right: 28,
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
max: 100,
|
||||
@ -23,8 +25,6 @@ export const options = {
|
||||
type: "category",
|
||||
data: ["A组", "B组", "C组"],
|
||||
inverse: true,
|
||||
animationDuration: 300,
|
||||
animationDurationUpdate: 300,
|
||||
max: 2, // only the largest 3 bars will be displayed
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
@ -38,27 +38,18 @@ export const options = {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
realtimeSort: true,
|
||||
type: "bar",
|
||||
// data: [10, 20, 30],
|
||||
data: [],
|
||||
data: [34, 2, 23],
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
valueAnimation: true,
|
||||
formatter: "{c}%",
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
animationDuration: 0,
|
||||
animationDurationUpdate: 3000,
|
||||
animationEasing: "linear",
|
||||
animationEasingUpdate: "linear",
|
||||
|
||||
};
|
||||
|
||||
export default function setup(echartInstance, dataArr) {
|
||||
|
@ -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%;
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -16,13 +16,13 @@ import LineMonth from '../components/datapage/LineMonth.vue';
|
||||
<!-- 近7日产量 -->
|
||||
<LatestWeekYield />
|
||||
<!-- 本日生产线情况 -->
|
||||
<!-- <LineToday /> -->
|
||||
<LineToday />
|
||||
<!-- 本月生产线情况 -->
|
||||
<!-- <LineMonth /> -->
|
||||
<LineMonth />
|
||||
<!-- 本日班组情况 -->
|
||||
<!-- <TeamChartDay /> -->
|
||||
<TeamChartDay />
|
||||
<!-- 本月班组情况 -->
|
||||
<!-- <TeamChartMonth /> -->
|
||||
<TeamChartMonth />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user