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

update charts

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/menu_icon/Icon3D.vue
View File

@@ -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"

66
src/components/HourChart.vue
View File

@@ -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 {

23
src/components/HourChartOptions.js
View File

@@ -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: [
{

51
src/components/TeamChartDay.vue
View File

@@ -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 {

16
src/components/TeamChartDayOptions.js
View File

@@ -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,
},

46
src/components/TeamChartMonth.vue
View File

@@ -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 {

2
src/components/TeamChartMonthOptions.js
View File

@@ -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: [
{

6
src/components/Tools.vue
View File

@@ -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>

13
src/pages/AnnouncementPage.vue
View File

@@ -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
vite.config.js
View File

@@ -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'
}
})