add 导航 & update chart样式 & update 横坐标倾斜
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
102
src/components/datapage/LineToday copy.vue
Normal file
102
src/components/datapage/LineToday copy.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Container from "../Base/Container.vue";
|
||||
import { useWsStore } from "../../store";
|
||||
import setupFn from "./LineTodayOptions";
|
||||
|
||||
const show = ref(false);
|
||||
const chartContainer = ref(null);
|
||||
const chartInstance = ref(null);
|
||||
const store = useWsStore();
|
||||
|
||||
onMounted(() => {
|
||||
chartContainer.value.classList.add("h-full");
|
||||
const d = loadData(store.data2.dailyTarget);
|
||||
// const d = loadData([
|
||||
// {
|
||||
// targetProduction: 100,
|
||||
// nowProduction: 66,
|
||||
// targetYield: 13,
|
||||
// nowYield: 3,
|
||||
// },
|
||||
// ]);
|
||||
if (!d) {
|
||||
show.value = false;
|
||||
if (chartInstance.value) {
|
||||
chartInstance.value.dispose();
|
||||
chartInstance.value = null;
|
||||
}
|
||||
} else {
|
||||
if (!chartInstance.value)
|
||||
chartInstance.value = echarts.init(chartContainer.value);
|
||||
setupFn(chartInstance.value, d);
|
||||
show.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
// 订阅
|
||||
store.$subscribe((mutation, state) => {
|
||||
const d = loadData(state.data2.dailyTarget);
|
||||
// const d = loadData([
|
||||
// {
|
||||
// targetProduction: 100,
|
||||
// nowProduction: 66,
|
||||
// targetYield: 13,
|
||||
// nowYield: 3,
|
||||
// },
|
||||
// ]);
|
||||
if (!d) {
|
||||
show.value = false;
|
||||
if (chartInstance.value) {
|
||||
chartInstance.value.dispose();
|
||||
chartInstance.value = null;
|
||||
}
|
||||
} else {
|
||||
if (!chartInstance.value)
|
||||
chartInstance.value = echarts.init(chartContainer.value);
|
||||
setupFn(chartInstance.value, d);
|
||||
show.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
// utils
|
||||
function loadData(dailyTarget) {
|
||||
if (
|
||||
dailyTarget == undefined ||
|
||||
// dailyTarget?.length == 0 ||
|
||||
!dailyTarget[0]
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
targetProduction: dailyTarget[0].targetProduction,
|
||||
nowProduction: dailyTarget[0].nowProduction,
|
||||
targetYield: dailyTarget[0].targetYield,
|
||||
nowYield: dailyTarget[0].nowYield,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container class="chart" title="本日生产线情况" icon="cube">
|
||||
<div
|
||||
ref="chartContainer"
|
||||
class="chart-chart"
|
||||
:style="{ opacity: show ? 1 : 0 }"
|
||||
></div>
|
||||
<p v-show="!show" class="empty-data-hint">暂无数据</p>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
/* height: 300px; */
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.chart-chart {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,79 +1,83 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Container from "../Base/Container.vue";
|
||||
import { useWsStore } from "../../store";
|
||||
import setupFn from "./LineTodayOptions";
|
||||
import YieldChart from "../Chart/YieldChart.vue";
|
||||
import RateChart from "../Chart/RateChart.vue";
|
||||
|
||||
const show = ref(false);
|
||||
const chartContainer = ref(null);
|
||||
const chartInstance = ref(null);
|
||||
const displayProductionChart = ref(false);
|
||||
const displayRateChart = ref(false);
|
||||
const websocketData = ref(null);
|
||||
const store = useWsStore();
|
||||
|
||||
onMounted(() => {
|
||||
chartContainer.value.classList.add("h-full");
|
||||
const d = loadData(store.data2.dailyTarget);
|
||||
// const d = loadData([
|
||||
// {
|
||||
// targetProduction: 100,
|
||||
// nowProduction: 66,
|
||||
// targetYield: 13,
|
||||
// nowYield: 3,
|
||||
// },
|
||||
// ]);
|
||||
if (!d) {
|
||||
show.value = false;
|
||||
if (chartInstance.value) {
|
||||
chartInstance.value.dispose();
|
||||
chartInstance.value = null;
|
||||
}
|
||||
websocketData.value = loadData([
|
||||
{
|
||||
targetProduction: 120,
|
||||
nowProduction: 10,
|
||||
targetYield: 13,
|
||||
nowYield: 3,
|
||||
},
|
||||
]);
|
||||
// const d = loadData(state.data2.dailyTarget);
|
||||
// console.log("websocketData==>", websocketData);
|
||||
if (!websocketData.value) {
|
||||
displayProductionChart.value = false;
|
||||
displayRateChart.value = false;
|
||||
} else {
|
||||
if (!chartInstance.value)
|
||||
chartInstance.value = echarts.init(chartContainer.value);
|
||||
setupFn(chartInstance.value, d);
|
||||
show.value = true;
|
||||
/** 阻止 targetProduction == 0 */
|
||||
if (!websocketData.value.targetProduction) {
|
||||
displayProductionChart.value = false;
|
||||
} else {
|
||||
displayProductionChart.value = true;
|
||||
}
|
||||
/** 阻止 targetYield == 0 */
|
||||
if (!websocketData.value.targetYield) {
|
||||
displayRateChart.value = false;
|
||||
} else {
|
||||
displayRateChart.value = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 订阅
|
||||
store.$subscribe((mutation, state) => {
|
||||
const d = loadData(state.data2.dailyTarget);
|
||||
// const d = loadData([
|
||||
// {
|
||||
// targetProduction: 100,
|
||||
// nowProduction: 66,
|
||||
// targetYield: 13,
|
||||
// nowYield: 3,
|
||||
// },
|
||||
// ]);
|
||||
if (!d) {
|
||||
show.value = false;
|
||||
if (chartInstance.value) {
|
||||
chartInstance.value.dispose();
|
||||
chartInstance.value = null;
|
||||
}
|
||||
} else {
|
||||
if (!chartInstance.value)
|
||||
chartInstance.value = echarts.init(chartContainer.value);
|
||||
setupFn(chartInstance.value, d);
|
||||
show.value = true;
|
||||
}
|
||||
});
|
||||
// store.$subscribe((mutation, state) => {
|
||||
// // const d = loadData([
|
||||
// // {
|
||||
// // targetProduction: 100,
|
||||
// // nowProduction: 66,
|
||||
// // targetYield: 13,
|
||||
// // nowYield: 3,
|
||||
// // },
|
||||
// // ]);
|
||||
// const d = loadData(state.data2.dailyTarget);
|
||||
// if (!d) {
|
||||
// displayProductionChart.value = false;
|
||||
// displayRateChart.value = false;
|
||||
// } else {
|
||||
// displayRateChart.value = false;
|
||||
// if (!d.targetProduction) {
|
||||
// displayProductionChart.value = false;
|
||||
// } else {
|
||||
// displayProductionChart.value = true;
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
// utils
|
||||
function loadData(dailyTarget) {
|
||||
if (
|
||||
dailyTarget == undefined ||
|
||||
// dailyTarget?.length == 0 ||
|
||||
!dailyTarget[0]
|
||||
) {
|
||||
if (dailyTarget == undefined || !dailyTarget[0]) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
// 目标产量
|
||||
targetProduction: dailyTarget[0].targetProduction,
|
||||
// 当前产量
|
||||
nowProduction: dailyTarget[0].nowProduction,
|
||||
// 目标成品率
|
||||
targetYield: dailyTarget[0].targetYield,
|
||||
// 当前成品率
|
||||
nowYield: dailyTarget[0].nowYield,
|
||||
};
|
||||
}
|
||||
@@ -81,12 +85,34 @@ function loadData(dailyTarget) {
|
||||
|
||||
<template>
|
||||
<Container class="chart" title="本日生产线情况" icon="cube">
|
||||
<div
|
||||
<!-- <div
|
||||
ref="chartContainer"
|
||||
class="chart-chart"
|
||||
:style="{ opacity: show ? 1 : 0 }"
|
||||
></div>
|
||||
<p v-show="!show" class="empty-data-hint">暂无数据</p>
|
||||
<p v-show="!show" class="empty-data-hint">暂无数据</p> -->
|
||||
<div class="container-body__h-full">
|
||||
<yield-chart v-if="displayProductionChart" :raw-data="websocketData" />
|
||||
<rate-chart
|
||||
v-if="displayRateChart"
|
||||
:raw-data="websocketData"
|
||||
:isOnlyChild="!displayProductionChart"
|
||||
/>
|
||||
<p
|
||||
v-if="!displayProductionChart && !displayRateChart"
|
||||
style="
|
||||
height: 100%;
|
||||
line-height: 350px;
|
||||
user-select: none;
|
||||
flex: 1;
|
||||
color: #fffc;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
"
|
||||
>
|
||||
- 暂无数据 -
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
@@ -99,4 +125,10 @@ function loadData(dailyTarget) {
|
||||
.chart-chart {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container-body__h-full {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user