Compare commits
No commits in common. "2276c1f9dd33576c3805bb125991b7d8b5938947" and "7c84ba45954ba13fab5b98c5138b59a54771a416" have entirely different histories.
2276c1f9dd
...
7c84ba4595
@ -1,13 +1,11 @@
|
|||||||
export const options = {
|
export const options = {
|
||||||
color: ['#ffd601', '#72340b', '#a4c9d1'],
|
color: ['#ffd601', '#72340b'],
|
||||||
grid: {
|
grid: {
|
||||||
top: 10,
|
top: 10,
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
right: 28,
|
right: 28,
|
||||||
},
|
containLabel: true,
|
||||||
legend: {
|
|
||||||
show: false,
|
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
max: 100,
|
max: 100,
|
||||||
@ -25,6 +23,8 @@ export const options = {
|
|||||||
type: "category",
|
type: "category",
|
||||||
data: ["A组", "B组", "C组"],
|
data: ["A组", "B组", "C组"],
|
||||||
inverse: true,
|
inverse: true,
|
||||||
|
animationDuration: 300,
|
||||||
|
animationDurationUpdate: 300,
|
||||||
max: 2, // only the largest 3 bars will be displayed
|
max: 2, // only the largest 3 bars will be displayed
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
@ -38,18 +38,27 @@ export const options = {
|
|||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
realtimeSort: true,
|
||||||
type: "bar",
|
type: "bar",
|
||||||
|
// data: [10, 20, 30],
|
||||||
data: [],
|
data: [],
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: "right",
|
position: "right",
|
||||||
|
valueAnimation: true,
|
||||||
formatter: "{c}%",
|
formatter: "{c}%",
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
animationDuration: 0,
|
||||||
|
animationDurationUpdate: 3000,
|
||||||
|
animationEasing: "linear",
|
||||||
|
animationEasingUpdate: "linear",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function setup(echartInstance, dataArr) {
|
export default function setup(echartInstance, dataArr) {
|
||||||
|
|||||||
@ -1,116 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
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";
|
|
||||||
|
|
||||||
const store = useWsStore();
|
|
||||||
const chartChart = ref(null);
|
|
||||||
const chart = ref(null);
|
|
||||||
// 小时数据
|
|
||||||
const hourData = ref([
|
|
||||||
// { lineName: '001', hour: '00:00', num: 10 },
|
|
||||||
// { lineName: '002', hour: '00:20', num: 20 },
|
|
||||||
// { lineName: '003', hour: '00:30', num: 30 },
|
|
||||||
// { lineName: '004', hour: '00:40', num: 14 },
|
|
||||||
// { lineName: '005', hour: '00:50', num: 50 }
|
|
||||||
]);
|
|
||||||
store.$subscribe((mutation, state) => {
|
|
||||||
// console.log("[HourChart] =======>", state.data2.lineHourList?.length);
|
|
||||||
if (
|
|
||||||
state.data2.lineHourList == undefined ||
|
|
||||||
state.data2.lineHourList?.length == 0
|
|
||||||
) {
|
|
||||||
// console.log("[HourChart] 清除数据");
|
|
||||||
hourData.value.splice(0);
|
|
||||||
if (chart.value) chart.value.dispose();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// console.log("[HourChart] ===> 有数据: ", state.data2.lineHourList);
|
|
||||||
hourData.value = (state.data2?.lineHourList ?? [
|
|
||||||
// { lineName: '001', hour: '00:00', num: 10 },
|
|
||||||
// { lineName: '002', hour: '00:20', num: 20 },
|
|
||||||
// { lineName: '003', hour: '00:30', num: 30 },
|
|
||||||
// { lineName: '004', hour: '00:40', num: 14 },
|
|
||||||
// { lineName: '005', hour: '00:50', num: 50 },
|
|
||||||
]).map((item, index) => ({
|
|
||||||
id: `${item.lineName}_${index}`,
|
|
||||||
hour: item.hour || `${index}`.padStart(2, "0"),
|
|
||||||
data: item.num || Math.floor(Math.random() * 100),
|
|
||||||
}));
|
|
||||||
setupChart();
|
|
||||||
});
|
|
||||||
|
|
||||||
function setupChart() {
|
|
||||||
if (chart.value) chart.value.dispose();
|
|
||||||
nextTick(() => {
|
|
||||||
chart.value = echarts.init(chartChart.value);
|
|
||||||
// console.log("[HourChart] ===> 设置chart: ", chart.value, hourData.value.map((item) => item.hour), hourData.value.map((item) => item.data));
|
|
||||||
chartSetup(
|
|
||||||
chart.value,
|
|
||||||
hourData.value.map((item) => item.hour),
|
|
||||||
hourData.value.map((item) => item.data)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// chart.value.setOption({
|
|
||||||
// xAxis: {
|
|
||||||
// type: "category",
|
|
||||||
// data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
||||||
// },
|
|
||||||
// yAxis: {
|
|
||||||
// type: "value",
|
|
||||||
// },
|
|
||||||
// series: [
|
|
||||||
// {
|
|
||||||
// data: [150, 230, 224, 218, 135, 147, 260],
|
|
||||||
// type: "line",
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
chartChart.value.classList.add("h-full");
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Container class="chart" title="近7日产量" icon="cube">
|
|
||||||
<div ref="chartChart" class="chart-chart" style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"></div>
|
|
||||||
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
|
|
||||||
暂无数据
|
|
||||||
</p>
|
|
||||||
</Container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chart {
|
|
||||||
/* height: 300px; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-chart {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.empty-data-hint {
|
|
||||||
color: #c5c5c5;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 1.25;
|
|
||||||
text-align: center;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
margin: auto;
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
height: 32px;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
export const options = {
|
|
||||||
grid: {
|
|
||||||
top: 10,
|
|
||||||
bottom: 0,
|
|
||||||
left: 12,
|
|
||||||
right: 10,
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
data: [],
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 16,
|
|
||||||
color: '#fff8'
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#e6e6e633",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#e6e6e633",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#e6e6e633'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 16,
|
|
||||||
color: '#fff8'
|
|
||||||
},
|
|
||||||
minInterval: 1,
|
|
||||||
max: 100,
|
|
||||||
min: 1
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: [],
|
|
||||||
// data: Array.from({ length: 7 }, () => Math.random() * 100),
|
|
||||||
type: "bar",
|
|
||||||
// barWidth: 20,
|
|
||||||
showBackground: true,
|
|
||||||
backgroundStyle: {
|
|
||||||
color: "rgba(180, 180, 180, 0.2)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function setup(echartInstance, timeArr, dataArr) {
|
|
||||||
const new_options = { ...options };
|
|
||||||
new_options.xAxis.data = timeArr;
|
|
||||||
new_options.series[0].data = dataArr;
|
|
||||||
echartInstance.setOption(new_options);
|
|
||||||
}
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { ref, onMounted, nextTick } from "vue";
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import Container from "../Base/Container.vue";
|
|
||||||
import { useWsStore } from "../../store";
|
|
||||||
import setupFn from "./LineMonthOptions";
|
|
||||||
|
|
||||||
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();
|
|
||||||
// })
|
|
||||||
});
|
|
||||||
</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>
|
|
||||||
</Container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chart {
|
|
||||||
/* height: 300px; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-inner {}
|
|
||||||
|
|
||||||
.chart-chart {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,176 +0,0 @@
|
|||||||
export const options = {
|
|
||||||
grid: {
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0
|
|
||||||
},
|
|
||||||
title: [
|
|
||||||
{
|
|
||||||
text: "当前产量：" + 100 + " 片",
|
|
||||||
left: "27%",
|
|
||||||
textAlign: "center",
|
|
||||||
top: "70%",
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 16,
|
|
||||||
color: '#fffa'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "目标产量：" + 100 + " 片",
|
|
||||||
left: "27%",
|
|
||||||
textAlign: "center",
|
|
||||||
top: "85%",
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 16,
|
|
||||||
color: '#fffa'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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: {
|
|
||||||
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) + '%',
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
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) {
|
|
||||||
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) + '%',
|
|
||||||
echartInstance.setOption(new_options);
|
|
||||||
}
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { ref, onMounted, nextTick } from "vue";
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import Container from "../Base/Container.vue";
|
|
||||||
import { useWsStore } from "../../store";
|
|
||||||
import setupFn from "./LineTodayOptions";
|
|
||||||
|
|
||||||
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();
|
|
||||||
// })
|
|
||||||
});
|
|
||||||
</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>
|
|
||||||
</Container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chart {
|
|
||||||
/* height: 300px; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-inner {}
|
|
||||||
|
|
||||||
.chart-chart {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,176 +0,0 @@
|
|||||||
export const options = {
|
|
||||||
grid: {
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0
|
|
||||||
},
|
|
||||||
title: [
|
|
||||||
{
|
|
||||||
text: "当前产量：" + 100 + " 片",
|
|
||||||
left: "27%",
|
|
||||||
textAlign: "center",
|
|
||||||
top: "70%",
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 16,
|
|
||||||
color: '#fffa'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "目标产量：" + 100 + " 片",
|
|
||||||
left: "27%",
|
|
||||||
textAlign: "center",
|
|
||||||
top: "85%",
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 16,
|
|
||||||
color: '#fffa'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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: {
|
|
||||||
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) + '%',
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
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) {
|
|
||||||
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) + '%',
|
|
||||||
echartInstance.setOption(new_options);
|
|
||||||
}
|
|
||||||
@ -3,26 +3,18 @@
|
|||||||
import HourChart from "../components/datapage/HourChart.vue";
|
import HourChart from "../components/datapage/HourChart.vue";
|
||||||
import TeamChartDay from "../components/datapage/TeamChartDay.vue";
|
import TeamChartDay from "../components/datapage/TeamChartDay.vue";
|
||||||
import TeamChartMonth from "../components/datapage/TeamChartMonth.vue";
|
import TeamChartMonth from "../components/datapage/TeamChartMonth.vue";
|
||||||
import LatestWeekYield from '../components/datapage/LatestWeekYield.vue'
|
|
||||||
import LineToday from '../components/datapage/LineToday.vue';
|
|
||||||
import LineMonth from '../components/datapage/LineMonth.vue';
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="data-page">
|
<div class="data-page">
|
||||||
<!-- 小时数据 -->
|
<HourChart />
|
||||||
<!-- <HourChart /> -->
|
<TeamChartDay />
|
||||||
<!-- 近7日产量 -->
|
<TeamChartMonth />
|
||||||
<!-- <LatestWeekYield /> -->
|
<HourChart />
|
||||||
<!-- 本日生产线情况 -->
|
<TeamChartDay />
|
||||||
<!-- <LineToday /> -->
|
<TeamChartMonth />
|
||||||
<!-- 本月生产线情况 -->
|
|
||||||
<!-- <LineMonth /> -->
|
|
||||||
<!-- 本日班组情况 -->
|
|
||||||
<!-- <TeamChartDay /> -->
|
|
||||||
<!-- 本月班组情况 -->
|
|
||||||
<!-- <TeamChartMonth /> -->
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -21,7 +21,7 @@ const props = defineProps({
|
|||||||
</div>
|
</div>
|
||||||
<div class="data-list">
|
<div class="data-list">
|
||||||
<HourChart />
|
<HourChart />
|
||||||
<!-- <TeamChartDay /> -->
|
<TeamChartDay />
|
||||||
<TeamChartMonth />
|
<TeamChartMonth />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user