Compare commits
No commits in common. "c314f4b78e286aea687d0ec7ca69d265444f709c" and "9b3779555c8ac9734af026ad48b8fd2464f4a6d0" have entirely different histories.
c314f4b78e
...
9b3779555c
@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import MainPage from "./MainPage.vue";
|
||||
// import Slider from "./components/Slider.vue";
|
||||
import Slider from "./components/Slider.vue";
|
||||
import useWebsocket from "./utils/useWebsocket";
|
||||
import { useWsStore } from "./store";
|
||||
const store = useWsStore();
|
||||
@ -40,10 +40,8 @@ useWebsocket(store, urlPath.value);
|
||||
|
||||
<style scoped>
|
||||
#app-container {
|
||||
/* width: 100vw;
|
||||
height: 100vh; */
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref, watch } from "vue";
|
||||
import Tools from "./components/Tools.vue";
|
||||
import NavMenu from "./components/NavMenu.vue";
|
||||
import AnnoucementPage from "./pages/AnnouncementPage.vue";
|
||||
@ -8,56 +8,39 @@ import AppHeader from "./components/Base/Header.vue";
|
||||
import AlertListPage from "./pages/AlertListPage.vue";
|
||||
import DataPage from "./pages/DataPage.vue";
|
||||
import DatetimeTool from "./components/HeadTime.vue";
|
||||
import ThreeDimension from "./pages/ThreeDimension.vue";
|
||||
import TriplePage from "./pages/3D.vue";
|
||||
import { useSettings } from "./store/settings";
|
||||
|
||||
const props = defineProps(["path"]);
|
||||
|
||||
const pages = ['3d', 'data', 'realtime', 'alert', 'announcement']
|
||||
const pages = ['3d', 'data', 'realtime', 'alert']
|
||||
const currentPage = ref("3d");
|
||||
const handlePageChange = (page) => {
|
||||
currentPage.value = page;
|
||||
};
|
||||
const mainContainer = ref(null);
|
||||
|
||||
const store = useSettings();
|
||||
const { settings } = useSettings();
|
||||
const timer = ref(null);
|
||||
|
||||
store.$subscribe((mutation, state) => {
|
||||
// 如果更新了时间
|
||||
if (mutation.events.key == 'carouselTime' && state.settings.carouselTime > 0 && state.settings.carousel) {
|
||||
if (timer.value) clearInterval(timer.value);
|
||||
timer.value = setInterval(() => {
|
||||
handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
|
||||
}, state.settings.carouselTime * 1000);
|
||||
} else if (mutation.events.key == 'carousel') {
|
||||
// 如果更新了状态
|
||||
if (state.settings.carousel) {
|
||||
timer.value = setInterval(() => {
|
||||
handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
|
||||
}, state.settings.carouselTime * 1000);
|
||||
} else {
|
||||
clearInterval(timer.value);
|
||||
timer.value = null;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// 检查状态
|
||||
onMounted(() => {
|
||||
const settings = store.settings;
|
||||
if (settings.carousel) {
|
||||
// 开始轮播
|
||||
if (timer.value) clearInterval(timer.value);
|
||||
watch(() => settings.carousel, val => {
|
||||
if (val) {
|
||||
timer.value = setInterval(() => {
|
||||
handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
|
||||
}, settings.carouselTime * 1000);
|
||||
return;
|
||||
}
|
||||
// 设置分辨率
|
||||
handleResolutionChange(settings.resolution.width, settings.resolution.height);
|
||||
clearInterval(timer.value);
|
||||
timer.value = null;
|
||||
})
|
||||
|
||||
watch(() => settings.carouselTime, val => {
|
||||
if (val > 0) {
|
||||
if (timer.value) clearInterval(timer.value);
|
||||
timer.value = setInterval(() => {
|
||||
handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
|
||||
}, val * 1000);
|
||||
}
|
||||
})
|
||||
|
||||
const pathMap = {
|
||||
// 钢三线
|
||||
@ -78,11 +61,9 @@ const pathMap = {
|
||||
}
|
||||
|
||||
function handleResolutionChange(width, height) {
|
||||
console.log('document.documentElement', document.documentElement)
|
||||
if (mainContainer.value) {
|
||||
// mainContainer.value.style.width = `${width}px`;
|
||||
// mainContainer.value.style.height = `${height}px`;
|
||||
// changeScale(mainContainer.value, width, height)
|
||||
changeScale(mainContainer.value, width, height)
|
||||
}
|
||||
}
|
||||
@ -114,8 +95,7 @@ function resetScale(elm) {
|
||||
@home="() => handlePageChange('3d')" />
|
||||
<div v-else class="pages-wrapper">
|
||||
<NavMenu @change="handlePageChange" :value="currentPage" />
|
||||
<!-- <TriplePage v-if="currentPage === '3d'" :line="pathMap[path] ?? '1'" /> -->
|
||||
<ThreeDimension v-if="currentPage === '3d'" :line="pathMap[path] ?? '1'" />
|
||||
<TriplePage v-if="currentPage === '3d'" :line="pathMap[path] ?? '1'" />
|
||||
<DataPage v-if="currentPage === 'data'" :line="pathMap[path] ?? '1'" />
|
||||
<AlertListPage v-if="currentPage === 'alert'" :line="pathMap[path] ?? '1'" />
|
||||
<RealtimePage v-if="currentPage === 'realtime'" :line="pathMap[path] ?? '1'" />
|
||||
@ -131,6 +111,10 @@ function resetScale(elm) {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/**
|
||||
background: url('https://img1.baidu.com/it/u=2052683582,2603151390&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800')
|
||||
100% / 100% no-repeat;
|
||||
*/
|
||||
background: url(./assets/bg.png) 100% / cover no-repeat;
|
||||
}
|
||||
|
||||
|
||||
@ -29,8 +29,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
:fullscreen .datetime {
|
||||
/* right: 620px;
|
||||
top: 56px; */
|
||||
color: red;
|
||||
right: 500px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -62,9 +62,9 @@ const handleClick = (page) => {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* :fullscreen .nav-menu {
|
||||
:fullscreen .nav-menu {
|
||||
top: 25%;
|
||||
} */
|
||||
}
|
||||
|
||||
.flex-list {
|
||||
display: flex;
|
||||
|
||||
@ -8,25 +8,25 @@ import { useSettings } from '../store/settings';
|
||||
|
||||
const emit = defineEmits(['change-resolution'])
|
||||
|
||||
const { settings, updateSettings } = useSettings();
|
||||
// store.$subscribe((_, state) => {
|
||||
// settings.value.carousel = state.settings.carousel;
|
||||
// })
|
||||
const store = useSettings();
|
||||
const settings = ref(store.settings)
|
||||
store.$subscribe((_, state) => {
|
||||
settings.value.carousel = state.settings.carousel;
|
||||
})
|
||||
const visible = ref(false);
|
||||
|
||||
function toHome() {
|
||||
// document.location.href = '/1-1'
|
||||
document.location.reload()
|
||||
}
|
||||
function showDialog() {
|
||||
visible.value = true;
|
||||
}
|
||||
function toggleLunbo() {
|
||||
updateSettings({ type: 'carousel', value: null })
|
||||
settings.value.carousel = !settings.value.carousel;
|
||||
}
|
||||
|
||||
function handleChangeResolution(w, h) {
|
||||
emit('change-resolution', w, h);
|
||||
visible.value = false;
|
||||
emit('change-resolution', w, h)
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -40,7 +40,7 @@ function handleChangeResolution(w, h) {
|
||||
</button>
|
||||
<button style="position: relative;" @click="toggleLunbo">
|
||||
<span v-if="settings.carousel"
|
||||
style="color: #fffa; font-family: 'Courier New', Courier, monospace; font-weight:600; width: 56px; font-size: 22px; user-select: none; position: absolute; line-height: 52px; text-align: center;">
|
||||
style="color: #fffa; font-family: 'Courier New', Courier, monospace; font-weight:600; font-size: 22px; user-select: none; position: absolute; line-height: 52px; text-align: center;">
|
||||
{{ settings.carouselTime }}S</span>
|
||||
<IconExchange :color="settings.carousel ? '#03356a' : '#50A1EC'" />
|
||||
</button>
|
||||
|
||||
@ -1,116 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, nextTick } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Container from "../Base/Container.vue";
|
||||
import { useWsStore } from "../../store";
|
||||
import chartSetup from "./HourChartOptions";
|
||||
|
||||
const store = useWsStore();
|
||||
const chartChart = ref(null);
|
||||
const chart = ref(null);
|
||||
// 小时数据
|
||||
const hourData = ref([
|
||||
// { lineName: '001', hour: '00:00', num: 10 },
|
||||
// { lineName: '002', hour: '00:20', num: 20 },
|
||||
// { lineName: '003', hour: '00:30', num: 30 },
|
||||
// { lineName: '004', hour: '00:40', num: 14 },
|
||||
// { lineName: '005', hour: '00:50', num: 50 }
|
||||
]);
|
||||
store.$subscribe((mutation, state) => {
|
||||
// console.log("[HourChart] =======>", state.data2.lineHourList?.length);
|
||||
if (
|
||||
state.data2.lineHourList == undefined ||
|
||||
state.data2.lineHourList?.length == 0
|
||||
) {
|
||||
// console.log("[HourChart] 清除数据");
|
||||
hourData.value.splice(0);
|
||||
if (chart.value) chart.value.dispose();
|
||||
return;
|
||||
}
|
||||
// console.log("[HourChart] ===> 有数据: ", state.data2.lineHourList);
|
||||
hourData.value = (state.data2?.lineHourList ?? [
|
||||
// { lineName: '001', hour: '00:00', num: 10 },
|
||||
// { lineName: '002', hour: '00:20', num: 20 },
|
||||
// { lineName: '003', hour: '00:30', num: 30 },
|
||||
// { lineName: '004', hour: '00:40', num: 14 },
|
||||
// { lineName: '005', hour: '00:50', num: 50 },
|
||||
]).map((item, index) => ({
|
||||
id: `${item.lineName}_${index}`,
|
||||
hour: item.hour || `${index}`.padStart(2, "0"),
|
||||
data: item.num || Math.floor(Math.random() * 100),
|
||||
}));
|
||||
setupChart();
|
||||
});
|
||||
|
||||
function setupChart() {
|
||||
if (chart.value) chart.value.dispose();
|
||||
nextTick(() => {
|
||||
chart.value = echarts.init(chartChart.value);
|
||||
// console.log("[HourChart] ===> 设置chart: ", chart.value, hourData.value.map((item) => item.hour), hourData.value.map((item) => item.data));
|
||||
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");
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container class="chart" title="小时数据" icon="cube">
|
||||
<div 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>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
/* height: 300px; */
|
||||
}
|
||||
|
||||
.chart-chart {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.empty-data-hint {
|
||||
color: #c5c5c5;
|
||||
letter-spacing: 1px;
|
||||
font-size: 24px;
|
||||
line-height: 1.25;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,63 +0,0 @@
|
||||
export const options = {
|
||||
grid: {
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
left: 12,
|
||||
right: 10,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [],
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
color: '#fff8'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#e6e6e633",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#e6e6e633",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#e6e6e633'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
color: '#fff8'
|
||||
},
|
||||
minInterval: 1,
|
||||
max: 100,
|
||||
min: 1
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [],
|
||||
// data: Array.from({ length: 7 }, () => Math.random() * 100),
|
||||
type: "bar",
|
||||
// barWidth: 20,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default function setup(echartInstance, timeArr, dataArr) {
|
||||
const new_options = { ...options };
|
||||
new_options.xAxis.data = timeArr;
|
||||
new_options.series[0].data = dataArr;
|
||||
echartInstance.setOption(new_options);
|
||||
}
|
||||
@ -1,74 +0,0 @@
|
||||
<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 "./TeamChartDayOptions";
|
||||
|
||||
const store = useWsStore();
|
||||
const chartChart = ref(null);
|
||||
const chart = ref(null);
|
||||
|
||||
const dayData = ref([]);
|
||||
store.$subscribe((mutation, state) => {
|
||||
console.log("[ChartDay] ===> state: ", state.data2.classTodayProductYield);
|
||||
if (
|
||||
state.data2.classTodayProductYield == undefined ||
|
||||
state.data2.classTodayProductYield?.length == 0
|
||||
) {
|
||||
console.log("[ChartDay] ===> 清除状态");
|
||||
dayData.value.splice(0);
|
||||
if (chart.value) chart.value.dispose();
|
||||
return;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
console.log("[ChartDay] ===> dayData: ", dayData.value);
|
||||
setupChart();
|
||||
});
|
||||
|
||||
// onMounted(() => {
|
||||
// nextTick(() => {
|
||||
// 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");
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container class="chart" title="本日班组情况" icon="cube">
|
||||
<div ref="chartChart" class="chart-chart" style="{opacity: (dayData && dayData.length > 0) ? 1 : 0}"></div>
|
||||
<p v-show="!dayData || dayData.length === 0" class="empty-data-hint">
|
||||
暂无数据
|
||||
</p>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
/* height: 300px; */
|
||||
}
|
||||
|
||||
.chart-chart {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,68 +0,0 @@
|
||||
export const options = {
|
||||
color: ['#ffd601', '#72340b'],
|
||||
grid: {
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 28,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
max: 100,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#fff2",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
color: "#e5e5e5a3",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: ["A组", "B组", "C组"],
|
||||
inverse: true,
|
||||
animationDuration: 300,
|
||||
animationDurationUpdate: 300,
|
||||
max: 2, // only the largest 3 bars will be displayed
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
color: "#e5e5e5a3",
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#e5e5e5",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
realtimeSort: true,
|
||||
type: "bar",
|
||||
// data: [10, 20, 30],
|
||||
data: [],
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
valueAnimation: true,
|
||||
formatter: "{c}%",
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
animationDuration: 0,
|
||||
animationDurationUpdate: 3000,
|
||||
animationEasing: "linear",
|
||||
animationEasingUpdate: "linear",
|
||||
};
|
||||
|
||||
export default function setup(echartInstance, dataArr) {
|
||||
const new_options = { ...options };
|
||||
new_options.series[0].data = dataArr;
|
||||
echartInstance.setOption(new_options);
|
||||
}
|
||||
@ -1,73 +0,0 @@
|
||||
<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 "./TeamChartMonthOptions";
|
||||
|
||||
const store = useWsStore();
|
||||
const chartChart = ref(null);
|
||||
const chart = ref(null);
|
||||
|
||||
const monthData = ref(null);
|
||||
store.$subscribe((mutation, state) => {
|
||||
console.log("[ChartMonth] ===> state: ", state.data2.monthlyTarget);
|
||||
if (
|
||||
state.data2.monthlyTarget == undefined ||
|
||||
state.data2.monthlyTarget?.length == 0
|
||||
) {
|
||||
console.log("[ChartMonth] ===> 清除状态");
|
||||
monthData.value = null;
|
||||
if (chart.value) chart.value.dispose();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!state.data2.monthlyTarget[0]) return;
|
||||
const { targetProduction, nowProduction, targetYield, nowYield } =
|
||||
state.data2.monthlyTarget[0];
|
||||
monthData.value = { targetProduction, nowProduction, targetYield, nowYield };
|
||||
setupChart();
|
||||
});
|
||||
|
||||
|
||||
|
||||
// 绿色：24FF5E
|
||||
// 黄色：FFB524
|
||||
// 红色：FF3737
|
||||
|
||||
|
||||
function setupChart() {
|
||||
if (chart.value) chart.value.dispose();
|
||||
nextTick(() => {
|
||||
console.log("[ChartMonth] ===> 初始化表格: ", monthData.value);
|
||||
chart.value = echarts.init(chartChart.value);
|
||||
setupFn(chart.value, monthData.value);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
chartChart.value.classList.add("h-full");
|
||||
// nextTick(() => {
|
||||
// setupChart();
|
||||
// })
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container class="chart" title="本月班组情况" icon="cube">
|
||||
<div ref="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div>
|
||||
<p v-show="!monthData" class="empty-data-hint">暂无数据</p>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
/* height: 300px; */
|
||||
}
|
||||
|
||||
.chart-inner {}
|
||||
|
||||
.chart-chart {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,176 +0,0 @@
|
||||
export const options = {
|
||||
grid: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0
|
||||
},
|
||||
title: [
|
||||
{
|
||||
text: "当前产量：" + 100 + " 片",
|
||||
left: "27%",
|
||||
textAlign: "center",
|
||||
top: "70%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fffa'
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "目标产量：" + 100 + " 片",
|
||||
left: "27%",
|
||||
textAlign: "center",
|
||||
top: "85%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fffa'
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "当前成品率：" + 22 + "%",
|
||||
left: "72%",
|
||||
textAlign: "center",
|
||||
top: "70%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fffa'
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "目标成品率：" + 22 + "%",
|
||||
left: "72%",
|
||||
textAlign: "center",
|
||||
top: "85%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fffa'
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "gauge",
|
||||
startAngle: 90,
|
||||
center: ["27%", "35%"],
|
||||
endAngle: -270,
|
||||
radius: "55%",
|
||||
progress: {
|
||||
show: true,
|
||||
width: 12,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 12,
|
||||
},
|
||||
},
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
fontSize: 16,
|
||||
offsetCenter: [0, "0%"],
|
||||
formatter: "{value}%",
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
},
|
||||
data: [
|
||||
{
|
||||
// value: (nowProduction / targetProduction * 100).toFixed(1),
|
||||
value: 100,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "gauge",
|
||||
startAngle: 90,
|
||||
center: ["73%", "35%"],
|
||||
endAngle: -270,
|
||||
radius: "55%",
|
||||
progress: {
|
||||
show: true,
|
||||
width: 12,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 12,
|
||||
},
|
||||
},
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
detail: {
|
||||
show: true,
|
||||
valueAnimation: true,
|
||||
fontSize: 16,
|
||||
offsetCenter: [0, "0%"],
|
||||
// formatter: 0 + "%",
|
||||
// formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
|
||||
color: "#fff",
|
||||
},
|
||||
data: [
|
||||
{
|
||||
// value: targetYield,
|
||||
value: 100,
|
||||
name: "Perfect",
|
||||
title: {
|
||||
show: false,
|
||||
},
|
||||
detail: {
|
||||
show: false,
|
||||
valueAnimation: true,
|
||||
offsetCenter: ["0%", "-20%"],
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 100,
|
||||
// value: nowYield,
|
||||
name: "Good",
|
||||
title: {
|
||||
show: false,
|
||||
},
|
||||
detail: {
|
||||
show: false,
|
||||
valueAnimation: true,
|
||||
offsetCenter: ["0%", "10%"],
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
detail: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
export default function setup(echartInstance, data) {
|
||||
const new_options = { ...options };
|
||||
new_options.title[0].text = "当前产量：" + data.nowProduction + " 片";
|
||||
new_options.title[1].text = "目标产量：" + data.targetProduction + " 片";
|
||||
new_options.title[2].text = "当前成品率：" + data.nowYield + "%";
|
||||
new_options.title[3].text = "目标成品率：" + data.targetYield + "%";
|
||||
new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1)
|
||||
new_options.series[1].data[0].value = data.targetYield
|
||||
new_options.series[1].data[1].value = data.nowYield
|
||||
new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%',
|
||||
echartInstance.setOption(new_options);
|
||||
}
|
||||
@ -53,23 +53,23 @@ function changeScale(elm, width, height) {
|
||||
elm.style.transform = style.transform;
|
||||
elm.style.transformOrigin = style.transformOrigin;
|
||||
}
|
||||
// onMounted(() => {
|
||||
// if (document.fullscreenElement && part3d.value) {
|
||||
// changeScale(part3d.value, document.documentElement.clientWidth, document.documentElement.clientHeight)
|
||||
// }
|
||||
// })
|
||||
// watch(() => settings.fullscreen, val => {
|
||||
// if (val) {
|
||||
// // 全屏状态下
|
||||
// if (part3d.value) {
|
||||
// changeScale(part3d.value, document.documentElement.clientWidth, document.documentElement.clientHeight)
|
||||
// }
|
||||
// } else {
|
||||
// if (part3d.value) {
|
||||
// changeScale(part3d.value, 1920, 900)
|
||||
// }
|
||||
// }
|
||||
// }, { immediate: true })
|
||||
onMounted(() => {
|
||||
if (document.fullscreenElement && part3d.value) {
|
||||
changeScale(part3d.value, document.documentElement.clientWidth, document.documentElement.clientHeight)
|
||||
}
|
||||
})
|
||||
watch(() => settings.fullscreen, val => {
|
||||
if (val) {
|
||||
// 全屏状态下
|
||||
if (part3d.value) {
|
||||
changeScale(part3d.value, document.documentElement.clientWidth, document.documentElement.clientHeight)
|
||||
}
|
||||
} else {
|
||||
if (part3d.value) {
|
||||
changeScale(part3d.value, 1920, 900)
|
||||
}
|
||||
}
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -629,9 +629,9 @@ function changeScale(elm, width, height) {
|
||||
transform: translateX(-58%);
|
||||
}
|
||||
|
||||
/* :fullscreen .absolute-full {
|
||||
:fullscreen .absolute-full {
|
||||
transform: translateX(-80%);
|
||||
} */
|
||||
}
|
||||
|
||||
.info-1 .info:nth-child(1) {
|
||||
/* left: 490px;
|
||||
|
||||
@ -1,20 +1,29 @@
|
||||
<!-- 实时数据页面 -->
|
||||
<script setup>
|
||||
import HourChart from "../components/datapage/HourChart.vue";
|
||||
import TeamChartDay from "../components/datapage/TeamChartDay.vue";
|
||||
import TeamChartMonth from "../components/datapage/TeamChartMonth.vue";
|
||||
import HourChart from "../components/HourChart.vue";
|
||||
import TeamChartDay from "../components/TeamChartDay.vue";
|
||||
import TeamChartMonth from "../components/TeamChartMonth.vue";
|
||||
import ThreeD from './3D.vue'
|
||||
|
||||
const props = defineProps({
|
||||
line: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="data-page">
|
||||
<HourChart />
|
||||
<TeamChartDay />
|
||||
<TeamChartMonth />
|
||||
<HourChart />
|
||||
<TeamChartDay />
|
||||
<TeamChartMonth />
|
||||
<div style="position: absolute; top: 0; left: -279px; width: calc(100% + 279px); height: 100%;">
|
||||
<ThreeD :line="line ?? '1'" />
|
||||
</div>
|
||||
<div class="data-list">
|
||||
<HourChart />
|
||||
<TeamChartDay />
|
||||
<TeamChartMonth />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -22,16 +31,21 @@ import TeamChartMonth from "../components/datapage/TeamChartMonth.vue";
|
||||
.data-page {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background: #cccc;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 24px;
|
||||
padding: 32px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/*
|
||||
.data-list {
|
||||
height: 100%;
|
||||
width: 480px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 32px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
:fullscreen .data-list {
|
||||
width: 35%;
|
||||
gap: 32px;
|
||||
@ -41,5 +55,5 @@ import TeamChartMonth from "../components/datapage/TeamChartMonth.vue";
|
||||
|
||||
:fullscreen .data-list>div {
|
||||
flex: 1;
|
||||
} */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
<!-- 实时数据页面 -->
|
||||
<script setup>
|
||||
import HourChart from "../components/HourChart.vue";
|
||||
import TeamChartDay from "../components/TeamChartDay.vue";
|
||||
import TeamChartMonth from "../components/TeamChartMonth.vue";
|
||||
import ThreeD from './3D.vue'
|
||||
|
||||
const props = defineProps({
|
||||
line: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="data-page">
|
||||
<div style="position: absolute; top: 0; left: -279px; width: calc(100% + 279px); height: 100%;">
|
||||
<ThreeD :line="line ?? '1'" />
|
||||
</div>
|
||||
<div class="data-list">
|
||||
<HourChart />
|
||||
<TeamChartDay />
|
||||
<TeamChartMonth />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.data-page {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.data-list {
|
||||
height: 100%;
|
||||
width: 480px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 32px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
:fullscreen .data-list {
|
||||
width: 35%;
|
||||
gap: 32px;
|
||||
padding: 32px 0;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
:fullscreen .data-list>div {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
@ -27,8 +27,7 @@ export const useSettings = defineStore("settings", () => {
|
||||
watch(
|
||||
() => settings.value.fullscreen,
|
||||
(val) => {
|
||||
// const mainContainer = document.getElementById("main-container");
|
||||
const mainContainer = document.documentElement;
|
||||
const mainContainer = document.getElementById("main-container");
|
||||
if (val) {
|
||||
mainContainer.requestFullscreen().then(() => {
|
||||
document.removeEventListener("fullscreenchange", clearFullscreenFlag);
|
||||
|
||||
@ -3,7 +3,3 @@
|
||||
margin: 0;
|
||||
font-family: '黑体', Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user