update charts
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
부모
ac8eb57317
커밋
3d765b4026
@ -40,7 +40,7 @@ defineProps({
|
||||
result="shadowBlurOuter1"
|
||||
></feGaussianBlur>
|
||||
<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"
|
||||
in="shadowBlurOuter1"
|
||||
result="shadowMatrixOuter1"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import { ref, watch, onMounted, nextTick } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Container from "./Base/Container.vue";
|
||||
import { useWsStore } from "../store";
|
||||
@ -9,46 +9,69 @@ const store = useWsStore();
|
||||
const chartChart = ref(null);
|
||||
const chart = ref(null);
|
||||
// 小时数据
|
||||
const hourData = ref(null);
|
||||
const hourData = ref([]);
|
||||
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);
|
||||
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,
|
||||
data: item.num || Math.floor(Math.random() * 100),
|
||||
}));
|
||||
chartSetup(
|
||||
chart.value,
|
||||
hourData.value.map((item) => item.hour),
|
||||
hourData.value.map((item) => item.data)
|
||||
);
|
||||
setupChart();
|
||||
});
|
||||
|
||||
// watch(hourData, (newVal) => {
|
||||
// if (newVal) {
|
||||
// chartSetup(
|
||||
// chart.value,
|
||||
// newVal.map((item) => item.hour),
|
||||
// newVal.map((item) => item.data)
|
||||
// );
|
||||
// }
|
||||
// });
|
||||
function setupChart() {
|
||||
if (chart.value) chart.value.dispose();
|
||||
nextTick(() => {
|
||||
chart.value = echarts.init(chartChart.value);
|
||||
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");
|
||||
chart.value = echarts.init(chartChart.value);
|
||||
chart.value.setOption({})
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container class="chart" title="小时数据" icon="cube">
|
||||
<div
|
||||
v-show="hourData && hourData.length > 0"
|
||||
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>
|
||||
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
|
||||
暂无数据
|
||||
</p>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
@ -58,7 +81,6 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.chart-inner {
|
||||
background: #0f0;
|
||||
}
|
||||
|
||||
.chart-chart {
|
||||
|
||||
@ -1,21 +1,22 @@
|
||||
export const options = {
|
||||
grid: {
|
||||
top: "5%",
|
||||
bottom: "5%",
|
||||
left: "3%",
|
||||
right: "3%",
|
||||
top: "10",
|
||||
bottom: "10",
|
||||
left: "10",
|
||||
right: "10",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["00", "11", "22", "33", "44", "55", "66"],
|
||||
data: [],
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
color: '#fff8'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#dff1fe",
|
||||
color: "#e6e6e633",
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -24,13 +25,21 @@ export const options = {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#dff1fe",
|
||||
color: "#e6e6e633",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#e6e6e633'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
color: '#fff8'
|
||||
},
|
||||
minInterval: 1,
|
||||
max: 100,
|
||||
min: 1
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
||||
@ -3,43 +3,59 @@ import { ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Container from "./Base/Container.vue";
|
||||
import { useWsStore } from "../store";
|
||||
import chartSetup from "./HourChartOptions";
|
||||
import setupFn from "./TeamChartDayOptions";
|
||||
|
||||
const store = useWsStore();
|
||||
const chartChart = ref(null);
|
||||
const chart = ref(null);
|
||||
|
||||
// 小时数据
|
||||
const hourData = ref(null);
|
||||
const dayData = ref([]);
|
||||
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)
|
||||
if (
|
||||
state.data2.classTodayProductYield == undefined ||
|
||||
state.data2.classTodayProductYield?.length == 0
|
||||
) {
|
||||
dayData.value.splice(0);
|
||||
if (chart.value) chart.value.dispose();
|
||||
return;
|
||||
}
|
||||
console.log(
|
||||
"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(() => {
|
||||
chartChart.value.classList.add("h-full");
|
||||
chart.value = echarts.init(chartChart.value);
|
||||
chart.value.setOption({});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container class="chart" title="本日班组情况" icon="cube">
|
||||
<div
|
||||
v-show="hourData && hourData.length > 0"
|
||||
ref="chartChart"
|
||||
class="chart-chart"
|
||||
style="{opacity: (dayData && dayData.length > 0) ? 1 : 0}"
|
||||
></div>
|
||||
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
|
||||
<p v-show="!dayData || dayData.length === 0" class="empty-data-hint">
|
||||
暂无数据
|
||||
</p>
|
||||
</Container>
|
||||
@ -51,7 +67,6 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.chart-inner {
|
||||
background: #0f0;
|
||||
}
|
||||
|
||||
.chart-chart {
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
export const options = {
|
||||
grid: {
|
||||
top: "10%",
|
||||
bottom: "5%",
|
||||
left: "3%",
|
||||
right: "5%",
|
||||
top: "10",
|
||||
bottom: "10",
|
||||
left: "10",
|
||||
right: "10",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
max: 100,
|
||||
axisLabel: {
|
||||
fontSize: 22,
|
||||
color: "#e5e5e533",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
@ -21,6 +22,11 @@ export const options = {
|
||||
max: 2, // only the largest 3 bars will be displayed
|
||||
axisLabel: {
|
||||
fontSize: 22,
|
||||
color: "#e5e5e533",
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
color: "#e5e5e533",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
@ -34,7 +40,7 @@ export const options = {
|
||||
position: "right",
|
||||
valueAnimation: true,
|
||||
formatter: "{c}%",
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
color: "#fff8",
|
||||
fontWeight: "bold",
|
||||
fontSize: 22,
|
||||
},
|
||||
|
||||
@ -3,45 +3,50 @@ import { ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Container from "./Base/Container.vue";
|
||||
import { useWsStore } from "../store";
|
||||
import chartSetup from "./HourChartOptions";
|
||||
import setupFn from "./TeamChartMonthOptions";
|
||||
|
||||
const store = useWsStore();
|
||||
const chartChart = ref(null);
|
||||
const chart = ref(null);
|
||||
|
||||
// 小时数据
|
||||
const hourData = ref(null);
|
||||
const monthData = 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)
|
||||
);
|
||||
if (
|
||||
state.data2.monthlyTarget == undefined ||
|
||||
state.data2.monthlyTarget?.length == 0
|
||||
) {
|
||||
monthData.value = null;
|
||||
if (chart.value) chart.value.dispose();
|
||||
return;
|
||||
}
|
||||
console.log("monthlyTarget ===> ", state.data2.monthlyTarget);
|
||||
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(() => {
|
||||
chartChart.value.classList.add("h-full");
|
||||
chart.value = echarts.init(chartChart.value);
|
||||
chart.value.setOption({});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container class="chart" title="本月班组情况" icon="cube">
|
||||
<div
|
||||
v-show="hourData && hourData.length > 0"
|
||||
ref="chartChart"
|
||||
class="chart-chart"
|
||||
style="{opacity: (monthData) ? 1 : 0}"
|
||||
></div>
|
||||
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
|
||||
暂无数据
|
||||
</p>
|
||||
<p v-show="!monthData" class="empty-data-hint">暂无数据</p>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
@ -51,7 +56,6 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.chart-inner {
|
||||
background: #0f0;
|
||||
}
|
||||
|
||||
.chart-chart {
|
||||
|
||||
@ -117,7 +117,7 @@ export const options = {
|
||||
offsetCenter: [0, "0%"],
|
||||
formatter: 0 + "%",
|
||||
// formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
color: "#fff8",
|
||||
},
|
||||
data: [
|
||||
{
|
||||
|
||||
@ -3,11 +3,15 @@ import { ref, watch, onMounted } from "vue";
|
||||
import IconBack from "../assets/menu_icon/IconBack.vue";
|
||||
import IconExchange from "../assets/menu_icon/IconExchange.vue";
|
||||
import IconSetting from "../assets/menu_icon/IconSetting.vue";
|
||||
|
||||
function toHome() {
|
||||
document.location.href = '/1-1'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tools">
|
||||
<button><IconBack /></button>
|
||||
<button @click="toHome"><IconBack /></button>
|
||||
<button><IconSetting /></button>
|
||||
<button><IconExchange /></button>
|
||||
</div>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useWsStore } from "../store";
|
||||
import IconBack from "../assets/menu_icon/IconBack.vue";
|
||||
const emit = defineEmits(["home"]);
|
||||
|
||||
// load 公告
|
||||
@ -45,10 +46,18 @@ const handleClose = () => {
|
||||
</main>
|
||||
<div class="announcement-footer">
|
||||
<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"
|
||||
>
|
||||
返回
|
||||
<IconBack />
|
||||
</button>
|
||||
<ScrollText> {{ horizontal_content }} </ScrollText>
|
||||
</div>
|
||||
|
||||
@ -4,4 +4,8 @@ import vue from '@vitejs/plugin-vue'
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: '5173'
|
||||
}
|
||||
})
|
||||
|
||||
불러오는 중...
Reference in New Issue
Block a user