@@ -1,39 +1,47 @@ | |||
<script setup> | |||
import { ref, onMounted } from 'vue'; | |||
import * as echarts from 'echarts'; | |||
import Container from './Base/Container.vue'; | |||
import { ref, onMounted } from "vue"; | |||
import * as echarts from "echarts"; | |||
import Container from "./Base/Container.vue"; | |||
import { useWsStore } from "../store"; | |||
import chartSetup from "./HourChartOptions"; | |||
const store = useWsStore(); | |||
const chartChart = ref(null); | |||
const chart = ref(null); | |||
// 小时数据 | |||
const hourData = ref(null); | |||
store.$subscribe((mutation, state) => { | |||
console.log("lineHourList ===> ", state.data2.lineHourList); | |||
hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({ | |||
id: `${item.lineName}_${index}`, | |||
hour: item.hour || `${index}`.padStart(2, "0"), | |||
data: item.num || Math.random() * 100, | |||
})); | |||
chartSetup( | |||
chart.value, | |||
hourData.value.map((item) => item.hour), | |||
hourData.value.map((item) => item.data) | |||
); | |||
}); | |||
onMounted(() => { | |||
chartChart.value.classList.add('h-full'); | |||
const mc = echarts.init(chartChart.value); | |||
mc.setOption({ | |||
grid: { | |||
top: 24, | |||
bottom: 24, | |||
left: 24, | |||
right: 24, | |||
}, | |||
tooltip: {}, | |||
xAxis: { | |||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], | |||
}, | |||
yAxis: {}, | |||
series: [ | |||
{ | |||
name: '销量', | |||
type: 'bar', | |||
data: [5, 20, 36, 10, 10, 20], | |||
}, | |||
], | |||
}); | |||
chartChart.value.classList.add("h-full"); | |||
chart.value = echarts.init(chartChart.value); | |||
chart.value.setOption({}); | |||
}); | |||
</script> | |||
<template> | |||
<Container class="chart" title="本日班组情况" icon="cube"> | |||
<div ref="chartChart" class="chart-chart"></div> | |||
<div | |||
v-show="hourData && hourData.length > 0" | |||
ref="chartChart" | |||
class="chart-chart" | |||
></div> | |||
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint"> | |||
暂无数据 | |||
</p> | |||
</Container> | |||
</template> | |||
@@ -0,0 +1,56 @@ | |||
export const options = { | |||
grid: { | |||
top: "10%", | |||
bottom: "5%", | |||
left: "3%", | |||
right: "5%", | |||
containLabel: true, | |||
}, | |||
xAxis: { | |||
max: 100, | |||
axisLabel: { | |||
fontSize: 22, | |||
}, | |||
}, | |||
yAxis: { | |||
type: "category", | |||
data: ["A组", "B组", "C组"], | |||
inverse: true, | |||
animationDuration: 300, | |||
animationDurationUpdate: 300, | |||
max: 2, // only the largest 3 bars will be displayed | |||
axisLabel: { | |||
fontSize: 22, | |||
}, | |||
}, | |||
series: [ | |||
{ | |||
realtimeSort: true, | |||
name: "X", | |||
type: "bar", | |||
data: [10, 20, 30], | |||
label: { | |||
show: true, | |||
position: "right", | |||
valueAnimation: true, | |||
formatter: "{c}%", | |||
color: "rgba(255, 255, 255, 1)", | |||
fontWeight: "bold", | |||
fontSize: 22, | |||
}, | |||
}, | |||
], | |||
legend: { | |||
show: false, | |||
}, | |||
animationDuration: 0, | |||
animationDurationUpdate: 3000, | |||
animationEasing: "linear", | |||
animationEasingUpdate: "linear", | |||
}; | |||
export default function setup(echartInstance, dataArr) { | |||
const new_options = { ...options }; | |||
new_options.series[0].data = dataArr; | |||
echartInstance.setOption(new_options); | |||
} |
@@ -1,39 +1,47 @@ | |||
<script setup> | |||
import { ref, onMounted } from 'vue'; | |||
import * as echarts from 'echarts'; | |||
import Container from './Base/Container.vue'; | |||
import { ref, onMounted } from "vue"; | |||
import * as echarts from "echarts"; | |||
import Container from "./Base/Container.vue"; | |||
import { useWsStore } from "../store"; | |||
import chartSetup from "./HourChartOptions"; | |||
const store = useWsStore(); | |||
const chartChart = ref(null); | |||
const chart = ref(null); | |||
// 小时数据 | |||
const hourData = ref(null); | |||
store.$subscribe((mutation, state) => { | |||
console.log("lineHourList ===> ", state.data2.lineHourList); | |||
hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({ | |||
id: `${item.lineName}_${index}`, | |||
hour: item.hour || `${index}`.padStart(2, "0"), | |||
data: item.num || Math.random() * 100, | |||
})); | |||
chartSetup( | |||
chart.value, | |||
hourData.value.map((item) => item.hour), | |||
hourData.value.map((item) => item.data) | |||
); | |||
}); | |||
onMounted(() => { | |||
chartChart.value.classList.add('h-full'); | |||
const mc = echarts.init(chartChart.value); | |||
mc.setOption({ | |||
grid: { | |||
top: 24, | |||
bottom: 24, | |||
left: 24, | |||
right: 24, | |||
}, | |||
tooltip: {}, | |||
xAxis: { | |||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], | |||
}, | |||
yAxis: {}, | |||
series: [ | |||
{ | |||
name: '销量', | |||
type: 'bar', | |||
data: [5, 20, 36, 10, 10, 20], | |||
}, | |||
], | |||
}); | |||
chartChart.value.classList.add("h-full"); | |||
chart.value = echarts.init(chartChart.value); | |||
chart.value.setOption({}); | |||
}); | |||
</script> | |||
<template> | |||
<Container class="chart" title="本月班组情况" icon="cube"> | |||
<div ref="chartChart" class="chart-chart"></div> | |||
<div | |||
v-show="hourData && hourData.length > 0" | |||
ref="chartChart" | |||
class="chart-chart" | |||
></div> | |||
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint"> | |||
暂无数据 | |||
</p> | |||
</Container> | |||
</template> | |||
@@ -0,0 +1,169 @@ | |||
export const options = { | |||
grid: { | |||
top: "10%", | |||
bottom: "10%", | |||
}, | |||
title: [ | |||
{ | |||
text: "当前产量:" + 100 + " 片", | |||
left: "27%", | |||
textAlign: "center", | |||
top: "67%", | |||
textStyle: { | |||
fontSize: 12, | |||
}, | |||
}, | |||
{ | |||
text: "目标产量:" + 100 + " 片", | |||
left: "27%", | |||
textAlign: "center", | |||
top: "82%", | |||
textStyle: { | |||
fontSize: 12, | |||
}, | |||
}, | |||
{ | |||
text: "当前成品率:" + 22 + "%", | |||
left: "73%", | |||
textAlign: "center", | |||
top: "67%", | |||
textStyle: { | |||
fontSize: 12, | |||
}, | |||
}, | |||
{ | |||
text: "目标成品率:" + 22 + "%", | |||
left: "73%", | |||
textAlign: "center", | |||
top: "82%", | |||
textStyle: { | |||
fontSize: 12, | |||
}, | |||
}, | |||
], | |||
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: 12, | |||
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: 12, | |||
offsetCenter: [0, "0%"], | |||
formatter: 0 + "%", | |||
// formatter: (nowYield / targetYield * 100).toFixed(1) + '%', | |||
color: "rgba(255, 255, 255, 1)", | |||
}, | |||
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 | |||
echartInstance.setOption(new_options); | |||
} |