update charts

This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-01-19 16:58:33 +08:00
parent ac8eb57317
commit 3d765b4026
10 changed files with 151 additions and 78 deletions

View File

@ -40,7 +40,7 @@ defineProps({
result="shadowBlurOuter1" result="shadowBlurOuter1"
></feGaussianBlur> ></feGaussianBlur>
<feColorMatrix <feColorMatrix
values="0 0 0 0 0.000727194297 0 0 0 0 0.0682545659 0 0 0 0 0.141870471 0 0 0 1 0" values="0 0 0 0 0.0123 0 0 0 0 0.0123 0 0 0 0 0.0123 0 0 0 1 0"
type="matrix" type="matrix"
in="shadowBlurOuter1" in="shadowBlurOuter1"
result="shadowMatrixOuter1" result="shadowMatrixOuter1"

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, watch, onMounted } from "vue"; import { ref, watch, onMounted, nextTick } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import Container from "./Base/Container.vue"; import Container from "./Base/Container.vue";
import { useWsStore } from "../store"; import { useWsStore } from "../store";
@ -9,46 +9,69 @@ const store = useWsStore();
const chartChart = ref(null); const chartChart = ref(null);
const chart = ref(null); const chart = ref(null);
// //
const hourData = ref(null); const hourData = ref([]);
store.$subscribe((mutation, state) => { store.$subscribe((mutation, state) => {
console.log("=======>", state.data2.lineHourList?.length);
if (
state.data2.lineHourList == undefined ||
state.data2.lineHourList?.length == 0
) {
hourData.value.splice(0);
if (chart.value) chart.value.dispose();
return;
}
console.log("lineHourList ===> ", state.data2.lineHourList); console.log("lineHourList ===> ", state.data2.lineHourList);
hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({ hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
id: `${item.lineName}_${index}`, id: `${item.lineName}_${index}`,
hour: item.hour || `${index}`.padStart(2, "0"), hour: item.hour || `${index}`.padStart(2, "0"),
data: item.num || Math.random() * 100, data: item.num || Math.floor(Math.random() * 100),
})); }));
chartSetup( setupChart();
chart.value,
hourData.value.map((item) => item.hour),
hourData.value.map((item) => item.data)
);
}); });
// watch(hourData, (newVal) => { function setupChart() {
// if (newVal) { if (chart.value) chart.value.dispose();
// chartSetup( nextTick(() => {
// chart.value, chart.value = echarts.init(chartChart.value);
// newVal.map((item) => item.hour), chartSetup(
// newVal.map((item) => item.data) 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(() => { onMounted(() => {
chartChart.value.classList.add("h-full"); chartChart.value.classList.add("h-full");
chart.value = echarts.init(chartChart.value);
chart.value.setOption({})
}); });
</script> </script>
<template> <template>
<Container class="chart" title="小时数据" icon="cube"> <Container class="chart" title="小时数据" icon="cube">
<div <div
v-show="hourData && hourData.length > 0"
ref="chartChart" ref="chartChart"
class="chart-chart" class="chart-chart"
style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"
></div> ></div>
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint">暂无数据</p> <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
暂无数据
</p>
</Container> </Container>
</template> </template>
@ -58,7 +81,6 @@ onMounted(() => {
} }
.chart-inner { .chart-inner {
background: #0f0;
} }
.chart-chart { .chart-chart {

View File

@ -1,21 +1,22 @@
export const options = { export const options = {
grid: { grid: {
top: "5%", top: "10",
bottom: "5%", bottom: "10",
left: "3%", left: "10",
right: "3%", right: "10",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: ["00", "11", "22", "33", "44", "55", "66"], data: [],
axisLabel: { axisLabel: {
fontSize: 16, fontSize: 16,
color: '#fff8'
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#dff1fe", color: "#e6e6e633",
}, },
}, },
}, },
@ -24,13 +25,21 @@ export const options = {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#dff1fe", color: "#e6e6e633",
}, },
}, },
splitLine: {
lineStyle: {
color: '#e6e6e633'
}
},
axisLabel: { axisLabel: {
fontSize: 16, fontSize: 16,
color: '#fff8'
}, },
minInterval: 1, minInterval: 1,
max: 100,
min: 1
}, },
series: [ series: [
{ {

View File

@ -3,43 +3,59 @@ import { ref, onMounted } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import Container from "./Base/Container.vue"; import Container from "./Base/Container.vue";
import { useWsStore } from "../store"; import { useWsStore } from "../store";
import chartSetup from "./HourChartOptions"; import setupFn from "./TeamChartDayOptions";
const store = useWsStore(); const store = useWsStore();
const chartChart = ref(null); const chartChart = ref(null);
const chart = ref(null); const chart = ref(null);
// const dayData = ref([]);
const hourData = ref(null);
store.$subscribe((mutation, state) => { store.$subscribe((mutation, state) => {
console.log("lineHourList ===> ", state.data2.lineHourList); if (
hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({ state.data2.classTodayProductYield == undefined ||
id: `${item.lineName}_${index}`, state.data2.classTodayProductYield?.length == 0
hour: item.hour || `${index}`.padStart(2, "0"), ) {
data: item.num || Math.random() * 100, dayData.value.splice(0);
})); if (chart.value) chart.value.dispose();
chartSetup( return;
chart.value, }
hourData.value.map((item) => item.hour), console.log(
hourData.value.map((item) => item.data) "classTodayProductYield ===> ",
state.data2.classTodayProductYield
); );
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);
}
}
setupChart();
}); });
function setupChart() {
if (chart.value) chart.value.dispose();
nextTick(() => {
chart.value = echarts.init(chartChart.value);
setupFn(chart.value, dayData.value);
});
}
onMounted(() => { onMounted(() => {
chartChart.value.classList.add("h-full"); chartChart.value.classList.add("h-full");
chart.value = echarts.init(chartChart.value);
chart.value.setOption({});
}); });
</script> </script>
<template> <template>
<Container class="chart" title="本日班组情况" icon="cube"> <Container class="chart" title="本日班组情况" icon="cube">
<div <div
v-show="hourData && hourData.length > 0"
ref="chartChart" ref="chartChart"
class="chart-chart" class="chart-chart"
style="{opacity: (dayData && dayData.length > 0) ? 1 : 0}"
></div> ></div>
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint"> <p v-show="!dayData || dayData.length === 0" class="empty-data-hint">
暂无数据 暂无数据
</p> </p>
</Container> </Container>
@ -51,7 +67,6 @@ onMounted(() => {
} }
.chart-inner { .chart-inner {
background: #0f0;
} }
.chart-chart { .chart-chart {

View File

@ -1,15 +1,16 @@
export const options = { export const options = {
grid: { grid: {
top: "10%", top: "10",
bottom: "5%", bottom: "10",
left: "3%", left: "10",
right: "5%", right: "10",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
max: 100, max: 100,
axisLabel: { axisLabel: {
fontSize: 22, fontSize: 22,
color: "#e5e5e533",
}, },
}, },
yAxis: { yAxis: {
@ -21,6 +22,11 @@ export const options = {
max: 2, // only the largest 3 bars will be displayed max: 2, // only the largest 3 bars will be displayed
axisLabel: { axisLabel: {
fontSize: 22, fontSize: 22,
color: "#e5e5e533",
},
splitLine: {
show: false,
color: "#e5e5e533",
}, },
}, },
series: [ series: [
@ -34,7 +40,7 @@ export const options = {
position: "right", position: "right",
valueAnimation: true, valueAnimation: true,
formatter: "{c}%", formatter: "{c}%",
color: "rgba(255, 255, 255, 1)", color: "#fff8",
fontWeight: "bold", fontWeight: "bold",
fontSize: 22, fontSize: 22,
}, },

View File

@ -3,45 +3,50 @@ import { ref, onMounted } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import Container from "./Base/Container.vue"; import Container from "./Base/Container.vue";
import { useWsStore } from "../store"; import { useWsStore } from "../store";
import chartSetup from "./HourChartOptions"; 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 monthData = ref(null);
const hourData = ref(null);
store.$subscribe((mutation, state) => { store.$subscribe((mutation, state) => {
console.log("lineHourList ===> ", state.data2.lineHourList); if (
hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({ state.data2.monthlyTarget == undefined ||
id: `${item.lineName}_${index}`, state.data2.monthlyTarget?.length == 0
hour: item.hour || `${index}`.padStart(2, "0"), ) {
data: item.num || Math.random() * 100, monthData.value = null;
})); if (chart.value) chart.value.dispose();
chartSetup( return;
chart.value, }
hourData.value.map((item) => item.hour), console.log("monthlyTarget ===> ", state.data2.monthlyTarget);
hourData.value.map((item) => item.data) const { targetProduction, nowProduction, targetYield, nowYield } =
); state.data2.monthlyTarget[0];
monthData.value = { targetProduction, nowProduction, targetYield, nowYield };
setupChart();
}); });
function setupChart() {
if (chart.value) chart.value.dispose();
nextTick(() => {
chart.value = echarts.init(chartChart.value);
setupFn(chart.value, monthData.value);
});
}
onMounted(() => { onMounted(() => {
chartChart.value.classList.add("h-full"); chartChart.value.classList.add("h-full");
chart.value = echarts.init(chartChart.value);
chart.value.setOption({});
}); });
</script> </script>
<template> <template>
<Container class="chart" title="本月班组情况" icon="cube"> <Container class="chart" title="本月班组情况" icon="cube">
<div <div
v-show="hourData && hourData.length > 0"
ref="chartChart" ref="chartChart"
class="chart-chart" class="chart-chart"
style="{opacity: (monthData) ? 1 : 0}"
></div> ></div>
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint"> <p v-show="!monthData" class="empty-data-hint">暂无数据</p>
暂无数据
</p>
</Container> </Container>
</template> </template>
@ -51,7 +56,6 @@ onMounted(() => {
} }
.chart-inner { .chart-inner {
background: #0f0;
} }
.chart-chart { .chart-chart {

View File

@ -117,7 +117,7 @@ export const options = {
offsetCenter: [0, "0%"], offsetCenter: [0, "0%"],
formatter: 0 + "%", formatter: 0 + "%",
// formatter: (nowYield / targetYield * 100).toFixed(1) + '%', // formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
color: "rgba(255, 255, 255, 1)", color: "#fff8",
}, },
data: [ data: [
{ {

View File

@ -3,11 +3,15 @@ import { ref, watch, onMounted } from "vue";
import IconBack from "../assets/menu_icon/IconBack.vue"; import IconBack from "../assets/menu_icon/IconBack.vue";
import IconExchange from "../assets/menu_icon/IconExchange.vue"; import IconExchange from "../assets/menu_icon/IconExchange.vue";
import IconSetting from "../assets/menu_icon/IconSetting.vue"; import IconSetting from "../assets/menu_icon/IconSetting.vue";
function toHome() {
document.location.href = '/1-1'
}
</script> </script>
<template> <template>
<div class="tools"> <div class="tools">
<button><IconBack /></button> <button @click="toHome"><IconBack /></button>
<button><IconSetting /></button> <button><IconSetting /></button>
<button><IconExchange /></button> <button><IconExchange /></button>
</div> </div>

View File

@ -2,6 +2,7 @@
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
import { useWsStore } from "../store"; import { useWsStore } from "../store";
import IconBack from "../assets/menu_icon/IconBack.vue";
const emit = defineEmits(["home"]); const emit = defineEmits(["home"]);
// load // load
@ -45,10 +46,18 @@ const handleClose = () => {
</main> </main>
<div class="announcement-footer"> <div class="announcement-footer">
<button <button
style="position: absolute; left: 0; bottom: 10px" style="
position: absolute;
left: 0;
bottom: 10px;
appearance: none;
background: transparent;
border: none;
cursor: pointer;
"
@click="handleClose" @click="handleClose"
> >
返回 <IconBack />
</button> </button>
<ScrollText> {{ horizontal_content }} </ScrollText> <ScrollText> {{ horizontal_content }} </ScrollText>
</div> </div>

View File

@ -4,4 +4,8 @@ import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
server: {
host: '0.0.0.0',
port: '5173'
}
}) })