mt-fe-group/chenzhou
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update charts

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-03-05 10:23:47 +08:00
parent fb4c1500e7
commit 335f61c0a1
5 changed files with 459 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
src/components/mainscreen/SumRate.vue
View File

@ -1,10 +1,152 @@
<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import Container from "../Base/Container.vue";
import { useWsStore } from "../../store";
const setupFn = (chart, datalist = [0.0, 0.0, 0.0]) => {
const option = {
color: ["#F3908B"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
top: "5%",
bottom: "5%",
left: "3%",
right: "5%",
containLabel: true,
},
yAxis: {
type: "value",
axisLabel: {
fontSize: 14,
color: "#fff",
},
splitLine: {
show: true,
lineStyle: {
color: "#ccc6",
},
},
},
xAxis: {
type: "category",
data: ["钢1线", "钢2线", "钢3线"],
axisLabel: {
fontSize: 14,
color: "#fff",
},
splitLine: {
show: true,
lineStyle: {
color: "#ccc6",
},
},
},
series: [
{
type: "line",
data: datalist.map((item) => item * 100),
label: {
show: true,
position: "top",
// formatter: (params) => {
// console.log("params", datalist[params.dataIndex]);
// },
formatter: '{c}%',
color: "#fff",
fontSize: 14,
},
},
],
};
chart.setOption(option);
};
const store = useWsStore();
const chartChart = ref(null);
const chart = ref(null);
const showChartDom = ref(false);
/** 无状态，处理数据 */
function loadData(yieldArray) {
// lineSumProductYield
const result = [];
if (yieldArray == undefined || yieldArray?.length == 0) return null;
for (let i = 0; i < yieldArray.length; ++i) {
if (yieldArray[i].name == "钢1线") {
result[0] = parseFloat(yieldArray[i].data);
} else if (yieldArray[i].name == "钢2线") {
result[1] = parseFloat(yieldArray[i].data);
} else if (yieldArray[i].name == "钢3线") {
result[2] = parseFloat(yieldArray[i].data);
}
}
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;
}
showChartDom.value = true;
setupChart(chart, chartChart.value, d);
}
// 订阅
store.$subscribe((mutation, state) => {
// __apply(state.data2.lineSumProductYield);
__apply([
{ name: "钢1线", data: 0.32 },
{ name: "钢2线", data: 0.91 },
{ name: "钢3线", data: 0.54 },
]);
});
onMounted(() => {
chartChart.value.classList.add("h-full");
__apply([
{ name: "钢1线", data: 0.32 },
{ name: "钢2线", data: 0.91 },
{ name: "钢3线", data: 0.54 },
]);
});
</script>
<template>
<Container class="chart" title="累计生产线成品率" icon="cube">
<p 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>
<style scoped>
.chart {
/* height: 300px; */
}
.chart-chart {
height: 100%;
}
</style>

101
src/components/mainscreen/SumYield.vue
View File

@ -3,7 +3,70 @@ import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import Container from "../Base/Container.vue";
import { useWsStore } from "../../store";
import setupFn from "./TeamChartDayOptions";
const setupFn = (chart, datalist = [0.0, 0.0, 0.0, 0.0]) => {
console.log("datalist", datalist);
const option = {
color: ["#3398FB"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
top: "5%",
bottom: "5%",
left: "3%",
right: "5%",
containLabel: true,
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
axisLabel: {
fontSize: 14,
color: "#fff",
},
splitLine: {
show: true,
lineStyle: {
color: "#ccc6",
},
},
},
yAxis: {
type: "category",
data: ["钢1线", "钢2线", "钢3线", "合计"],
axisLabel: {
fontSize: 14,
color: "#fff",
},
splitLine: {
show: true,
lineStyle: {
color: "#ccc6",
},
},
},
series: [
{
type: "bar",
data: datalist,
label: {
show: true,
position: "right",
formatter: "{c}",
color: "#fff",
fontSize: 14,
},
},
],
};
chart.setOption(option);
};
const store = useWsStore();
const chartChart = ref(null);
@ -15,12 +78,15 @@ 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);
if (yieldArray[i].name == "钢1线") {
result[0] = parseInt(yieldArray[i].data);
} else if (yieldArray[i].name == "钢2线") {
result[1] = parseInt(yieldArray[i].data);
} else if (yieldArray[i].name == "钢3线") {
result[2] = parseInt(yieldArray[i].data);
} else {
// 合计
result[3] = parseInt(yieldArray[i].data);
}
}
return result;
@ -37,11 +103,6 @@ function setupChart(chart, dom, data) {
/** 有状态，处理数据 */
function __apply(yieldArray) {
const d = loadData(yieldArray);
// const d = loadData([
// { teamName: "A组", yield: 11 },
// { teamName: "B组", yield: 23 },
// { teamName: "C组", yield: 14 },
// ]);
if (!d) {
showChartDom.value = false;
if (chart.value) chart.value.dispose();
@ -53,12 +114,24 @@ function __apply(yieldArray) {
// 订阅
store.$subscribe((mutation, state) => {
__apply(state.data2.classTodayProductYield);
// __apply(state.data2.classTodayProductYield);
// __apply(state.data2.classTodayProductYield);
__apply([
{ name: "钢1线", data: 11 },
{ name: "钢2线", data: 22 },
{ name: "钢3线", data: 33 },
{ name: "合计", data: 66 },
]);
});
onMounted(() => {
chartChart.value.classList.add("h-full");
// __apply();
__apply([
{ name: "钢1线", data: 11 },
{ name: "钢2线", data: 22 },
{ name: "钢3线", data: 33 },
{ name: "合计", data: 66 },
]);
});
</script>

59
src/components/mainscreen/TeamChartDayOptions.js
View File

@ -1,59 +0,0 @@
export const options = {
color: ['#a4c9d1', '#72340b', '#ffd601' ],
grid: {
top: 8,
bottom: 20,
left: 42,
right: 28,
},
legend: {
show: false,
},
xAxis: {
max: 100,
splitLine: {
lineStyle: {
color: "#fff2",
},
},
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",
},
},
},
series: [
{
type: "bar",
data: [34, 2, 23],
label: {
show: true,
position: "right",
formatter: "{c}%",
color: "#fff",
fontSize: 16,
},
},
],
};
export default function setup(echartInstance, dataArr) {
const new_options = { ...options };
new_options.series[0].data = dataArr;
echartInstance.setOption(new_options);
}

144
src/components/mainscreen/TodayRate.vue
View File

@ -1,10 +1,152 @@
<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import Container from "../Base/Container.vue";
import { useWsStore } from "../../store";
const setupFn = (chart, datalist = [0.0, 0.0, 0.0]) => {
const option = {
color: ["#F3908B"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
top: "5%",
bottom: "5%",
left: "3%",
right: "5%",
containLabel: true,
},
yAxis: {
type: "value",
axisLabel: {
fontSize: 14,
color: "#fff",
},
splitLine: {
show: true,
lineStyle: {
color: "#ccc6",
},
},
},
xAxis: {
type: "category",
data: ["钢1线", "钢2线", "钢3线"],
axisLabel: {
fontSize: 14,
color: "#fff",
},
splitLine: {
show: true,
lineStyle: {
color: "#ccc6",
},
},
},
series: [
{
type: "line",
data: datalist.map((item) => item * 100),
label: {
show: true,
position: "top",
// formatter: (params) => {
// console.log("params", datalist[params.dataIndex]);
// },
formatter: '{c}%',
color: "#fff",
fontSize: 14,
},
},
],
};
chart.setOption(option);
};
const store = useWsStore();
const chartChart = ref(null);
const chart = ref(null);
const showChartDom = ref(false);
/** 无状态，处理数据 */
function loadData(yieldArray) {
// lineTodayProductYield
const result = [];
if (yieldArray == undefined || yieldArray?.length == 0) return null;
for (let i = 0; i < yieldArray.length; ++i) {
if (yieldArray[i].name == "钢1线") {
result[0] = parseFloat(yieldArray[i].data);
} else if (yieldArray[i].name == "钢2线") {
result[1] = parseFloat(yieldArray[i].data);
} else if (yieldArray[i].name == "钢3线") {
result[2] = parseFloat(yieldArray[i].data);
}
}
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;
}
showChartDom.value = true;
setupChart(chart, chartChart.value, d);
}
// 订阅
store.$subscribe((mutation, state) => {
// __apply(state.data2.classTodayProductYield);
__apply([
{ name: "钢1线", data: 0.32 },
{ name: "钢2线", data: 0.91 },
{ name: "钢3线", data: 0.54 },
]);
});
onMounted(() => {
chartChart.value.classList.add("h-full");
__apply([
{ name: "钢1线", data: 0.32 },
{ name: "钢2线", data: 0.91 },
{ name: "钢3线", data: 0.54 },
]);
});
</script>
<template>
<Container class="chart" title="今日生产线成品率" icon="cube">
<p 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>
<style scoped>
.chart {
/* height: 300px; */
}
.chart-chart {
height: 100%;
}
</style>

100
src/components/mainscreen/TodayYield.vue
View File

@ -3,7 +3,69 @@ import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import Container from "../Base/Container.vue";
import { useWsStore } from "../../store";
import setupFn from "./TeamChartDayOptions";
const setupFn = (chart, datalist = [0.0, 0.0, 0.0, 0.0]) => {
console.log("datalist", datalist);
const option = {
color: ["#3398FB"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
top: "5%",
bottom: "5%",
left: "3%",
right: "5%",
containLabel: true,
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
axisLabel: {
fontSize: 14,
color: "#fff",
},
splitLine: {
show: true,
lineStyle: {
color: "#ccc6",
},
},
},
yAxis: {
type: "category",
data: ["钢1线", "钢2线", "钢3线", "合计"],
axisLabel: {
fontSize: 14,
color: "#fff",
},
splitLine: {
show: true,
lineStyle: {
color: "#ccc6",
},
},
},
series: [
{
type: "bar",
data: datalist,
label: {
show: true,
position: "right",
formatter: "{c}",
color: "#fff",
fontSize: 14,
},
},
],
};
chart.setOption(option);
};
const store = useWsStore();
const chartChart = ref(null);
@ -12,15 +74,19 @@ const showChartDom = ref(false);
/** 无状态，处理数据 */
function loadData(yieldArray) {
// lineTodayProductData
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);
if (yieldArray[i].name == "钢1线") {
result[0] = parseInt(yieldArray[i].data);
} else if (yieldArray[i].name == "钢2线") {
result[1] = parseInt(yieldArray[i].data);
} else if (yieldArray[i].name == "钢3线") {
result[2] = parseInt(yieldArray[i].data);
} else {
// 合计
result[3] = parseInt(yieldArray[i].data);
}
}
return result;
@ -37,11 +103,6 @@ function setupChart(chart, dom, data) {
/** 有状态，处理数据 */
function __apply(yieldArray) {
const d = loadData(yieldArray);
// const d = loadData([
// { teamName: "A组", yield: 11 },
// { teamName: "B组", yield: 23 },
// { teamName: "C组", yield: 14 },
// ]);
if (!d) {
showChartDom.value = false;
if (chart.value) chart.value.dispose();
@ -53,12 +114,23 @@ function __apply(yieldArray) {
// 订阅
store.$subscribe((mutation, state) => {
__apply(state.data2.classTodayProductYield);
// __apply(state.data2.classTodayProductYield);
__apply([
{ name: "钢1线", data: 11 },
{ name: "钢2线", data: 22 },
{ name: "钢3线", data: 33 },
{ name: "合计", data: 66 },
]);
});
onMounted(() => {
chartChart.value.classList.add("h-full");
// __apply();
__apply([
{ name: "钢1线", data: 11 },
{ name: "钢2线", data: 22 },
{ name: "钢3线", data: 33 },
{ name: "合计", data: 66 },
]);
});
</script>