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

Compare commits

base: mt-fe-group:733ee07fa78569261f8ef86377db3cba49b53ab8
Branches Tags
mt-fe-group:master
..
compare: mt-fe-group:c39a00cac13e29637c77089daa408a8d2c5f13f6
Branches Tags
mt-fe-group:master

No commits in common. "733ee07fa78569261f8ef86377db3cba49b53ab8" and "c39a00cac13e29637c77089daa408a8d2c5f13f6" have entirely different histories.
733ee07fa7 ... c39a00cac1

19 changed files with 261 additions and 641 deletions
Show Stats Expand all files Collapse all files

30
src/App.vue
View File

@ -14,27 +14,27 @@ if (urlPath.value === "/") {
useWebsocket(store, urlPath.value); useWebsocket(store, urlPath.value);
// size setting // size setting
// const size = ref(80); const size = ref(80);
// onMounted(() => { onMounted(() => {
// setSize(size.value); setSize(size.value);
// }); });
// style update // style update
// const styles = ref({}); const styles = ref({});
// function setSize(value) { function setSize(value) {
// const v = (value / 100).toFixed(2); const v = (value / 100).toFixed(2);
// styles.value = { styles.value = {
// transform: `scale(${v})`, transform: `scale(${v})`,
// // transform: `scale(${v * 24 / 33}, ${v})`, // transform: `scale(${v * 24 / 33}, ${v})`,
// transformOrigin: "top left", transformOrigin: "top left",
// }; };
// } }
</script> </script>
<template> <template>
<div id="app-container"> <div id="app-container">
<MainPage :path="urlPath" /> <MainPage :style="styles" :path="urlPath" />
<!-- <Slider :size="size" @size-change="setSize" /> --> <Slider :size="size" @size-change="setSize" />
</div> </div>
</template> </template>

66
src/MainPage.vue
View File

@ -9,56 +9,27 @@ import AlertListPage from "./pages/AlertListPage.vue";
import DataPage from "./pages/DataPage.vue"; import DataPage from "./pages/DataPage.vue";
import DatetimeTool from "./components/HeadTime.vue"; import DatetimeTool from "./components/HeadTime.vue";
import TriplePage from "./pages/3D.vue"; import TriplePage from "./pages/3D.vue";
import { useSettings } from "./store/settings";
const props = defineProps(["path"]); const props = defineProps(["path"]);
const pathMap = {
'/1-1': 1,
'/1-2': 2,
'/1-3': 3,
'/1-4': 4,
'/2-1': 5,
'/2-2': 6,
'/2-3': 7,
'/2-4': 8,
'/3-1': 9,
'/3-2': 10,
'/3-3': 11,
'/3-4': 12
}
const pages = ['3d', 'data', 'realtime', 'alert']
const currentPage = ref("3d"); const currentPage = ref("3d");
const handlePageChange = (page) => { const handlePageChange = (page) => {
currentPage.value = page; currentPage.value = page;
}; };
const { settings } = useSettings();
const timer = ref(null);
watch(() => settings.carousel, val => {
if (val) {
timer.value = setInterval(() => {
handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
}, settings.carouselTime);
return;
}
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);
}
})
const pathMap = {
// 钢三线
'/3-1': 1,
'/3-2': 2,
'/3-3': 11, // 3,
'/3-4': 12,
// 钢二线
'/2-1': 5,
'/2-2': 6,
'/2-3': 7,
'/2-4': 4,
// 钢一线
'/1-1': 9,
'/1-2': 10,
'/1-3': 3,
'/1-4': 8
}
</script> </script>
<template> <template>
@ -66,10 +37,13 @@ const pathMap = {
<DatetimeTool v-if="currentPage !== 'announcement'" /> <DatetimeTool v-if="currentPage !== 'announcement'" />
<Tools v-if="currentPage !== 'announcement'" /> <Tools v-if="currentPage !== 'announcement'" />
<AppHeader v-if="currentPage !== 'announcement'" /> <AppHeader v-if="currentPage !== 'announcement'" />
<AnnoucementPage v-if="currentPage === 'announcement'" class="annoucement-page" <AnnoucementPage
@home="() => handlePageChange('3d')" /> v-if="currentPage === 'announcement'"
class="annoucement-page"
@home="() => handlePageChange('3d')"
/>
<div v-else class="pages-wrapper"> <div v-else class="pages-wrapper">
<NavMenu @change="handlePageChange" :value="currentPage" /> <NavMenu @change="handlePageChange" />
<TriplePage v-if="currentPage === '3d'" :line="pathMap[path] ?? '1'" /> <TriplePage v-if="currentPage === '3d'" :line="pathMap[path] ?? '1'" />
<DataPage v-if="currentPage === 'data'" /> <DataPage v-if="currentPage === 'data'" />
<AlertListPage v-if="currentPage === 'alert'" /> <AlertListPage v-if="currentPage === 'alert'" />

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

@ -43,7 +43,7 @@ defineProps({
<path <path
d="M40.6,25.8120454 C40.6,28.1705437 40.1561224,30.3912077 39.2683673,32.4740374 C38.3806122,34.5568671 37.1637755,36.4023154 35.6178571,38.0103825 C34.0719388,39.6184495 32.2505102,40.935533 30.1535714,41.9616329 C28.0566327,42.9877328 25.7989796,43.6079872 23.3806122,43.8223962 C23.227551,43.853026 23.0897959,43.8759984 22.9673469,43.8913133 C22.844898,43.9066283 22.7071429,43.9142857 22.5540816,43.9142857 L14.6102041,43.9142857 C14.0897959,43.9142857 13.5770408,43.8223962 13.0719388,43.6386171 C12.5668367,43.454838 12.1153061,43.2021417 11.7173469,42.8805283 C11.3193878,42.5589149 10.9903061,42.1836993 10.730102,41.7548814 C10.469898,41.3260635 10.3397959,40.8819307 10.3397959,40.422483 C10.3397959,39.9630353 10.4622449,39.5189025 10.7071429,39.0900846 C10.9520408,38.6612667 11.2734694,38.2937086 11.6714286,37.9874101 C12.0693878,37.6811116 12.5132653,37.4360728 13.0030612,37.2522937 C13.4928571,37.0685146 13.9979592,36.9766251 14.5183673,36.9766251 L21.6357143,37.0225699 C23.2581633,37.0225699 24.7887755,36.7239288 26.227551,36.1266468 C27.6663265,35.5293648 28.9214286,34.7253312 29.9928571,33.7145462 C31.0642857,32.7037613 31.9061224,31.5168546 32.5183673,30.1538264 C33.1306122,28.7907981 33.4367347,27.3282229 33.4367347,25.7661006 C33.4367347,24.2958679 33.1612245,22.9175247 32.6102041,21.6310711 C32.0591837,20.3446175 31.3015306,19.1959982 30.3372449,18.1852132 C29.3729592,17.1744282 28.2479592,16.3550797 26.9622449,15.7271679 C25.6765306,15.099256 24.2836735,14.7087254 22.7836735,14.5555762 C22.722449,14.5555762 22.6841837,14.5632336 22.6688776,14.5785485 C22.6535714,14.5938635 22.6153061,14.6015209 22.5540816,14.6015209 L15.2530612,14.6015209 L15.2530612,18.2311579 C15.2530612,18.7518654 15.0464286,19.1347385 14.6331633,19.3797773 C14.219898,19.624816 13.5540816,19.4716668 12.6357143,18.9203295 C12.3908163,18.7671803 12.0005102,18.4991691 11.4647959,18.116296 C10.9290816,17.7334229 10.3015306,17.2816327 9.58214286,16.7609252 C8.8627551,16.2402178 8.10510204,15.6888805 7.30918367,15.1069134 L5.01326531,13.3610121 C4.55408163,12.9934539 4.15612245,12.664183 3.81938776,12.3731995 C3.48265306,12.0822159 3.31428571,11.7223152 3.31428571,11.2934973 C3.31428571,10.9259391 3.50561224,10.543066 3.88826531,10.144878 C4.27091837,9.74668998 4.70714286,9.34850195 5.19693878,8.95031393 C5.74795918,8.4908662 6.40612245,7.95484386 7.17142857,7.34224689 C7.93673469,6.72964993 8.69438776,6.13236789 9.44438776,5.55040077 C10.1943878,4.96843365 10.8678571,4.44006877 11.4647959,3.96530612 C12.0617347,3.49054347 12.4826531,3.16127261 12.727551,2.97749352 C13.4622449,2.4567861 14.0591837,2.34958163 14.5183673,2.65588011 C14.977551,2.96217859 15.222449,3.42162632 15.2530612,4.03422328 L15.2530612,7.70980507 L22.5540816,7.70980507 C22.7071429,7.70980507 22.8678571,7.72512 23.0362245,7.75574984 C23.2045918,7.78637969 23.3653061,7.81700954 23.5183673,7.84763939 C25.9061224,8.09267818 28.1408163,8.72059006 30.222449,9.73137506 C32.3040816,10.74216 34.1178571,12.0515861 35.6637755,13.6596531 C37.2096939,15.2677201 38.4188776,17.1131685 39.2913265,19.1959982 C40.1637755,21.2788279 40.6,23.4841769 40.6,25.8120454 L40.6,25.8120454 Z" d="M40.6,25.8120454 C40.6,28.1705437 40.1561224,30.3912077 39.2683673,32.4740374 C38.3806122,34.5568671 37.1637755,36.4023154 35.6178571,38.0103825 C34.0719388,39.6184495 32.2505102,40.935533 30.1535714,41.9616329 C28.0566327,42.9877328 25.7989796,43.6079872 23.3806122,43.8223962 C23.227551,43.853026 23.0897959,43.8759984 22.9673469,43.8913133 C22.844898,43.9066283 22.7071429,43.9142857 22.5540816,43.9142857 L14.6102041,43.9142857 C14.0897959,43.9142857 13.5770408,43.8223962 13.0719388,43.6386171 C12.5668367,43.454838 12.1153061,43.2021417 11.7173469,42.8805283 C11.3193878,42.5589149 10.9903061,42.1836993 10.730102,41.7548814 C10.469898,41.3260635 10.3397959,40.8819307 10.3397959,40.422483 C10.3397959,39.9630353 10.4622449,39.5189025 10.7071429,39.0900846 C10.9520408,38.6612667 11.2734694,38.2937086 11.6714286,37.9874101 C12.0693878,37.6811116 12.5132653,37.4360728 13.0030612,37.2522937 C13.4928571,37.0685146 13.9979592,36.9766251 14.5183673,36.9766251 L21.6357143,37.0225699 C23.2581633,37.0225699 24.7887755,36.7239288 26.227551,36.1266468 C27.6663265,35.5293648 28.9214286,34.7253312 29.9928571,33.7145462 C31.0642857,32.7037613 31.9061224,31.5168546 32.5183673,30.1538264 C33.1306122,28.7907981 33.4367347,27.3282229 33.4367347,25.7661006 C33.4367347,24.2958679 33.1612245,22.9175247 32.6102041,21.6310711 C32.0591837,20.3446175 31.3015306,19.1959982 30.3372449,18.1852132 C29.3729592,17.1744282 28.2479592,16.3550797 26.9622449,15.7271679 C25.6765306,15.099256 24.2836735,14.7087254 22.7836735,14.5555762 C22.722449,14.5555762 22.6841837,14.5632336 22.6688776,14.5785485 C22.6535714,14.5938635 22.6153061,14.6015209 22.5540816,14.6015209 L15.2530612,14.6015209 L15.2530612,18.2311579 C15.2530612,18.7518654 15.0464286,19.1347385 14.6331633,19.3797773 C14.219898,19.624816 13.5540816,19.4716668 12.6357143,18.9203295 C12.3908163,18.7671803 12.0005102,18.4991691 11.4647959,18.116296 C10.9290816,17.7334229 10.3015306,17.2816327 9.58214286,16.7609252 C8.8627551,16.2402178 8.10510204,15.6888805 7.30918367,15.1069134 L5.01326531,13.3610121 C4.55408163,12.9934539 4.15612245,12.664183 3.81938776,12.3731995 C3.48265306,12.0822159 3.31428571,11.7223152 3.31428571,11.2934973 C3.31428571,10.9259391 3.50561224,10.543066 3.88826531,10.144878 C4.27091837,9.74668998 4.70714286,9.34850195 5.19693878,8.95031393 C5.74795918,8.4908662 6.40612245,7.95484386 7.17142857,7.34224689 C7.93673469,6.72964993 8.69438776,6.13236789 9.44438776,5.55040077 C10.1943878,4.96843365 10.8678571,4.44006877 11.4647959,3.96530612 C12.0617347,3.49054347 12.4826531,3.16127261 12.727551,2.97749352 C13.4622449,2.4567861 14.0591837,2.34958163 14.5183673,2.65588011 C14.977551,2.96217859 15.222449,3.42162632 15.2530612,4.03422328 L15.2530612,7.70980507 L22.5540816,7.70980507 C22.7071429,7.70980507 22.8678571,7.72512 23.0362245,7.75574984 C23.2045918,7.78637969 23.3653061,7.81700954 23.5183673,7.84763939 C25.9061224,8.09267818 28.1408163,8.72059006 30.222449,9.73137506 C32.3040816,10.74216 34.1178571,12.0515861 35.6637755,13.6596531 C37.2096939,15.2677201 38.4188776,17.1131685 39.2913265,19.1959982 C40.1637755,21.2788279 40.6,23.4841769 40.6,25.8120454 L40.6,25.8120454 Z"
id="back-btn" id="back-btn"
:fill="color ?? '#50A1EC'" fill="#50A1EC"
></path> ></path>
</g> </g>
</g> </g>

11
src/assets/svg/status_icon.svg
View File

@ -1,11 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>状态icon</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="郴州旗滨光伏光电玻璃" transform="translate(-641.167539, -519.090909)" fill="#FF3737" fill-rule="nonzero">
<g id="状态icon" transform="translate(641.167539, 519.090909)">
<path d="M21.6498582,4.55479956 C21.6463914,4.55050501 21.642058,4.54535155 21.6368579,4.54191591 C18.7967223,1.61303292 15.0188308,0 11,0 C6.98116924,0 3.20327766,1.61303292 0.362275449,4.54191591 C0.128269776,4.7824107 0,5.10278412 0,5.44377138 C0,5.78389972 0.127403089,6.10341423 0.361408761,6.34390902 C0.595414434,6.58440381 0.905688623,6.71753486 1.23676332,6.71753486 C1.56697132,6.71753486 1.87724551,6.58440381 2.11125118,6.34390902 C4.48510873,3.89687452 7.64158525,2.54924478 11,2.54924478 C14.3584147,2.54924478 17.515758,3.89773343 19.8887488,6.34476793 C20.1236212,6.58526272 20.4338954,6.71839377 20.7641034,6.71839377 C21.0943114,6.71839377 21.4054523,6.58526272 21.6377246,6.34476793 C21.8725969,6.10427314 22,5.78304081 22,5.44291247 C21.9991333,5.10879649 21.8760637,4.79443544 21.6498582,4.55479956 Z M10.9998918,22 C14.348751,22 17.0635378,19.3620338 17.0635378,16.1079376 C17.0635378,12.8538414 14.348751,10.2158752 10.9998918,10.2158752 C7.65103259,10.2158752 4.9362458,12.8538414 4.9362458,16.1079376 C4.9362458,19.3620338 7.65103259,22 10.9998918,22 Z M11,5.19640531 C8.47793886,5.19640531 6.10668137,6.16869139 4.32390482,7.9363281 C4.06909864,8.18884763 3.92869524,8.52382252 3.92869524,8.88027016 C3.92869524,9.23757671 4.06909864,9.5734105 4.32390482,9.82507112 C4.57784431,10.0767317 4.91585251,10.2158752 5.27552789,10.2158752 C5.63520328,10.2158752 5.97407816,10.0767317 6.22801765,9.82507112 C7.50291522,8.56161456 9.19815632,7.86589749 11,7.86589749 C12.8027104,7.86589749 14.4979515,8.56161456 15.7719824,9.82507112 C16.0267885,10.0767317 16.3647967,10.2158752 16.7253388,10.2158752 C17.0858809,10.2158752 17.4247558,10.0767317 17.6778286,9.82421221 C18.2030413,9.30285386 18.2013079,8.45682754 17.6778286,7.9363281 C15.8933186,6.1695503 13.5220611,5.19640531 11,5.19640531 Z" id="形状"></path>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

31
src/components/HourChart.vue
View File

@ -9,32 +9,19 @@ const store = useWsStore();
const chartChart = ref(null); const chartChart = ref(null);
const chart = ref(null); const chart = ref(null);
// 小时数据 // 小时数据
const hourData = ref([ 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) => { store.$subscribe((mutation, state) => {
// console.log("[HourChart] =======>", state.data2.lineHourList?.length); console.log("=======>", state.data2.lineHourList?.length);
if ( if (
state.data2.lineHourList == undefined || state.data2.lineHourList == undefined ||
state.data2.lineHourList?.length == 0 state.data2.lineHourList?.length == 0
) { ) {
// console.log("[HourChart] 清除数据");
hourData.value.splice(0); hourData.value.splice(0);
if (chart.value) chart.value.dispose(); if (chart.value) chart.value.dispose();
return; return;
} }
// console.log("[HourChart] ===> 有数据: ", state.data2.lineHourList); console.log("lineHourList ===> ", state.data2.lineHourList);
hourData.value = (state.data2?.lineHourList ?? [ hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
// { 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}`, id: `${item.lineName}_${index}`,
hour: item.hour || `${index}`.padStart(2, "0"), hour: item.hour || `${index}`.padStart(2, "0"),
data: item.num || Math.floor(Math.random() * 100), data: item.num || Math.floor(Math.random() * 100),
@ -46,7 +33,6 @@ function setupChart() {
if (chart.value) chart.value.dispose(); if (chart.value) chart.value.dispose();
nextTick(() => { nextTick(() => {
chart.value = echarts.init(chartChart.value); 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( chartSetup(
chart.value, chart.value,
hourData.value.map((item) => item.hour), hourData.value.map((item) => item.hour),
@ -78,7 +64,11 @@ onMounted(() => {
<template> <template>
<Container class="chart" title="小时数据" icon="cube"> <Container class="chart" title="小时数据" icon="cube">
<div ref="chartChart" class="chart-chart" style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"></div> <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 v-show="!hourData || hourData.length === 0" class="empty-data-hint">
暂无数据 暂无数据
</p> </p>
@ -90,6 +80,9 @@ onMounted(() => {
height: 300px; height: 300px;
} }
.chart-inner {
}
.chart-chart { .chart-chart {
height: 100%; height: 100%;
} }

12
src/components/HourChartOptions.js
View File

@ -1,9 +1,9 @@
export const options = { export const options = {
grid: { grid: {
top: 10, top: "10",
bottom: 0, bottom: "10",
left: 12, left: "10",
right: 10, right: "10",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
@ -43,10 +43,8 @@ export const options = {
}, },
series: [ series: [
{ {
data: [], data: Array.from({ length: 7 }, () => Math.random() * 100),
// data: Array.from({ length: 7 }, () => Math.random() * 100),
type: "bar", type: "bar",
// barWidth: 20,
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)", color: "rgba(180, 180, 180, 0.2)",

40
src/components/NavMenu.vue
View File

@ -5,7 +5,7 @@ import IconAlert from "../assets/menu_icon/IconAlert.vue";
import IconChart from "../assets/menu_icon/IconChart.vue"; import IconChart from "../assets/menu_icon/IconChart.vue";
import IconRealtime from "../assets/menu_icon/IconRealtime.vue"; import IconRealtime from "../assets/menu_icon/IconRealtime.vue";
import IconAnnounce from "../assets/menu_icon/IconAnnouncement.vue"; import IconAnnounce from "../assets/menu_icon/IconAnnouncement.vue";
const props = defineProps(['value'])
const emit = defineEmits(["change"]); const emit = defineEmits(["change"]);
const handleClick = (page) => { const handleClick = (page) => {
emit("change", page); emit("change", page);
@ -17,32 +17,27 @@ const handleClick = (page) => {
<ul class="flex-list"> <ul class="flex-list">
<li> <li>
<button type="button" @click="(e) => handleClick('3d')"> <button type="button" @click="(e) => handleClick('3d')">
<span :style="{color: value == '3d' ? '#b1daff': '#339dff' }">三维界面</span> <span style="">三维界面</span><Icon3D class="nav-icon" />
<Icon3D class="nav-icon" :color="value == '3d' ? '#b1daff': '#339dff'" />
</button> </button>
</li> </li>
<li> <li>
<button type="button" @click="(e) => handleClick('data')"> <button type="button" @click="(e) => handleClick('data')">
<span :style="{color: value == 'data' ? '#b1daff': '#339dff' }">数据界面</span> <span style="">数据界面</span><IconChart class="nav-icon" />
<IconChart class="nav-icon" :color="value == 'data' ? '#b1daff': '#339dff'" />
</button> </button>
</li> </li>
<li> <li>
<button type="button" @click="(e) => handleClick('realtime')"> <button type="button" @click="(e) => handleClick('realtime')">
<span :style="{color: value == 'realtime' ? '#b1daff': '#339dff' }">实时数据</span> <span style="">实时数据</span><IconRealtime class="nav-icon" />
<IconRealtime class="nav-icon" :color="value == 'realtime' ? '#b1daff': '#339dff'" />
</button> </button>
</li> </li>
<li> <li>
<button type="button" @click="(e) => handleClick('alert')"> <button type="button" @click="(e) => handleClick('alert')">
<span :style="{color: value == 'alert' ? '#b1daff': '#339dff' }">报警列表</span> <span style="">报警列表</span><IconAlert class="nav-icon" />
<IconAlert class="nav-icon" :color="value == 'alert' ? '#b1daff': '#339dff'" />
</button> </button>
</li> </li>
<li> <li>
<button type="button" @click="(e) => handleClick('announcement')"> <button type="button" @click="(e) => handleClick('announcement')">
<span style="">公告页面</span> <span style="">公告页面</span><IconAnnounce class="nav-icon" />
<IconAnnounce class="nav-icon" />
</button> </button>
</li> </li>
</ul> </ul>
@ -59,7 +54,6 @@ const handleClick = (page) => {
position: relative; position: relative;
top: 72px; top: 72px;
left: 0; left: 0;
z-index: 10;
} }
.flex-list { .flex-list {
@ -90,7 +84,7 @@ li {
gap: 8px; gap: 8px;
} }
.nav-menu button>span { .nav-menu button > span {
font-size: 32px; font-size: 32px;
letter-spacing: 3px; letter-spacing: 3px;
line-height: 45px; line-height: 45px;
@ -98,18 +92,18 @@ li {
text-shadow: 0 5px 1px #001124; text-shadow: 0 5px 1px #001124;
/* text-shadow: 0 5px 1px #004969; */ /* text-shadow: 0 5px 1px #004969; */
} }
.nav-menu button:hover > span {
.nav-menu button:hover>span { color: #b1daff;
color: #b1daff !important;
} }
</style> </style>
<style> <style>
.nav-menu button:hover>.nav-icon #icon3d-g, .nav-menu button:hover > .nav-icon #icon3d-g,
.nav-menu button:hover>.nav-icon #alert-rect, .nav-menu button:hover > .nav-icon #alert-rect,
.nav-menu button:hover>.nav-icon #alert-dot, .nav-menu button:hover > .nav-icon #alert-dot,
.nav-menu button:hover>.nav-icon #realtime-main, .nav-menu button:hover > .nav-icon #realtime-main,
.nav-menu button:hover>.nav-icon #announce-main, .nav-menu button:hover > .nav-icon #announce-main,
.nav-menu button:hover>.nav-icon #chart-main { .nav-menu button:hover > .nav-icon #chart-main {
fill: #b1daff !important; fill: #b1daff !important;
}</style> }
</style>

2
src/components/RealtimeTable.vue
View File

@ -58,7 +58,7 @@ store.$subscribe((mutation, state) => {
<style scoped> <style scoped>
.realtime-table { .realtime-table {
/* background: #00f3; */ background: #00f3;
height: 160px; height: 160px;
width: 80%; width: 80%;
align-self: self-start; align-self: self-start;

33
src/components/SettingDialog.vue
View File

@ -1,18 +1,21 @@
<script setup> <script setup>
import { useSettings } from '../store/settings' import { ref } from 'vue';
const emit = defineEmits(["close"]); const emit = defineEmits(["close"]);
const { settings, changeScale } = useSettings(); const setting = ref({
resolution: {
width: null,
height: null
},
carousel: null,
fullscreen: false,
status: false,
});
function handleCancel() { function handleCancel() {
emit('close') emit('close')
} }
function handleConfirm() { function handleConfirm() { }
// alert(JSON.stringify(settings, null, 2))
changeScale(settings.resolution.width, settings.resolution.height)
emit('close')
}
</script> </script>
<template> <template>
@ -21,25 +24,25 @@ function handleConfirm() {
<div class="main-content"> <div class="main-content">
<div class="form-item"> <div class="form-item">
<label for="carousel">轮播时间</label> <label for="carousel">轮播时间</label>
<input id="carousel" type="number" v-model="settings.carouselTime" /> <input id="carousel" type="number" v-model="setting.carousel" />
<span>秒</span> <span>秒</span>
</div> </div>
<div class="form-item"> <div class="form-item">
<label for="resolution1">分辨率</label> <label for="resolution1">分辨率</label>
<input id="resolution1" type="number" v-model="settings.resolution.width" /> <input id="resolution1" type="number" v-model="setting.resolution.width" />
<span>X</span> <span>X</span>
<input id="resolution2" type="number" v-model="settings.resolution.height" /> <input id="resolution2" type="number" v-model="setting.resolution.height" />
<span>px</span> <span>px</span>
</div> </div>
<div class="form-item selector"> <div class="form-item selector">
<div class="opt opt1"> <div class="opt opt1">
<input type="checkbox" id="fullscreen" name="fullscreen" :class="[settings.fullscreen ? 'checked' : '']" <input type="checkbox" id="fullscreen" name="fullscreen" :class="[setting.fullscreen ? 'checked' : '']"
v-model="settings.fullscreen" /> v-model="setting.fullscreen" />
<label for="fullscreen">全屏显示</label> <label for="fullscreen">全屏显示</label>
</div> </div>
<div class="opt opt2"> <div class="opt opt2">
<input type="checkbox" id="status" name="status" :class="[settings.eqStatus ? 'checked' : '']" <input type="checkbox" id="status" name="status" :class="[setting.status ? 'checked' : '']"
v-model="settings.eqStatus" /> v-model="setting.status" />
<label for="status">设备状态</label> <label for="status">设备状态</label>
</div> </div>
</div> </div>

25
src/components/TeamChartDay.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, onMounted, nextTick } from "vue"; 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";
@ -11,17 +11,18 @@ const chart = ref(null);
const dayData = ref([]); const dayData = ref([]);
store.$subscribe((mutation, state) => { store.$subscribe((mutation, state) => {
console.log("[ChartDay] ===> state: ", state.data2.classTodayProductYield);
if ( if (
state.data2.classTodayProductYield == undefined || state.data2.classTodayProductYield == undefined ||
state.data2.classTodayProductYield?.length == 0 state.data2.classTodayProductYield?.length == 0
) { ) {
console.log("[ChartDay] ===> 清除状态");
dayData.value.splice(0); dayData.value.splice(0);
if (chart.value) chart.value.dispose(); if (chart.value) chart.value.dispose();
return; return;
} }
console.log(
"classTodayProductYield ===> ",
state.data2.classTodayProductYield
);
for (let i = 0; i < state.data2.classTodayProductYield.length; ++i) { for (let i = 0; i < state.data2.classTodayProductYield.length; ++i) {
if (state.data2.classTodayProductYield[i].teamName == "A组") { if (state.data2.classTodayProductYield[i].teamName == "A组") {
dayData.value[0] = parseInt(state.data2.classTodayProductYield[i].yield); dayData.value[0] = parseInt(state.data2.classTodayProductYield[i].yield);
@ -31,16 +32,9 @@ store.$subscribe((mutation, state) => {
dayData.value[2] = parseInt(state.data2.classTodayProductYield[i].yield); dayData.value[2] = parseInt(state.data2.classTodayProductYield[i].yield);
} }
} }
console.log("[ChartDay] ===> dayData: ", dayData.value);
setupChart(); setupChart();
}); });
// onMounted(() => {
// nextTick(() => {
// setupChart();
// })
// })
function setupChart() { function setupChart() {
if (chart.value) chart.value.dispose(); if (chart.value) chart.value.dispose();
nextTick(() => { nextTick(() => {
@ -56,7 +50,11 @@ onMounted(() => {
<template> <template>
<Container class="chart" title="本日班组情况" icon="cube"> <Container class="chart" title="本日班组情况" icon="cube">
<div ref="chartChart" class="chart-chart" style="{opacity: (dayData && dayData.length > 0) ? 1 : 0}"></div> <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 v-show="!dayData || dayData.length === 0" class="empty-data-hint">
暂无数据 暂无数据
</p> </p>
@ -68,6 +66,9 @@ onMounted(() => {
height: 300px; height: 300px;
} }
.chart-inner {
}
.chart-chart { .chart-chart {
height: 100%; height: 100%;
} }

36
src/components/TeamChartDayOptions.js
View File

@ -1,22 +1,16 @@
export const options = { export const options = {
color: ['#ffd601', '#72340b'],
grid: { grid: {
top: 10, top: "10",
bottom: 0, bottom: "10",
left: 0, left: "10",
right: 28, right: "10",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
max: 100, max: 100,
splitLine: {
lineStyle: {
color: "#fff2",
},
},
axisLabel: { axisLabel: {
fontSize: 16, fontSize: 22,
color: "#e5e5e5a3", color: "#e5e5e533",
}, },
}, },
yAxis: { yAxis: {
@ -27,28 +21,28 @@ export const options = {
animationDurationUpdate: 300, animationDurationUpdate: 300,
max: 2, // only the largest 3 bars will be displayed max: 2, // only the largest 3 bars will be displayed
axisLabel: { axisLabel: {
fontSize: 16, fontSize: 22,
color: "#e5e5e5a3", color: "#e5e5e533",
}, },
splitLine: { splitLine: {
lineStyle: { show: false,
color: "#e5e5e5", color: "#e5e5e533",
},
}, },
}, },
series: [ series: [
{ {
realtimeSort: true, realtimeSort: true,
name: "X",
type: "bar", type: "bar",
// data: [10, 20, 30], data: [10, 20, 30],
data: [],
label: { label: {
show: true, show: true,
position: "right", position: "right",
valueAnimation: true, valueAnimation: true,
formatter: "{c}%", formatter: "{c}%",
color: "#fff", color: "#fff8",
fontSize: 16, fontWeight: "bold",
fontSize: 22,
}, },
}, },
], ],

27
src/components/TeamChartMonth.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, onMounted, nextTick } from "vue"; 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";
@ -11,35 +11,24 @@ const chart = ref(null);
const monthData = ref(null); const monthData = ref(null);
store.$subscribe((mutation, state) => { store.$subscribe((mutation, state) => {
console.log("[ChartMonth] ===> state: ", state.data2.monthlyTarget);
if ( if (
state.data2.monthlyTarget == undefined || state.data2.monthlyTarget == undefined ||
state.data2.monthlyTarget?.length == 0 state.data2.monthlyTarget?.length == 0
) { ) {
console.log("[ChartMonth] ===> 清除状态");
monthData.value = null; monthData.value = null;
if (chart.value) chart.value.dispose(); if (chart.value) chart.value.dispose();
return; return;
} }
console.log("monthlyTarget ===> ", state.data2.monthlyTarget);
if (!state.data2.monthlyTarget[0]) return;
const { targetProduction, nowProduction, targetYield, nowYield } = const { targetProduction, nowProduction, targetYield, nowYield } =
state.data2.monthlyTarget[0]; state.data2.monthlyTarget[0];
monthData.value = { targetProduction, nowProduction, targetYield, nowYield }; monthData.value = { targetProduction, nowProduction, targetYield, nowYield };
setupChart(); setupChart();
}); });
// 绿色：24FF5E
// 黄色：FFB524
// 红色：FF3737
function setupChart() { function setupChart() {
if (chart.value) chart.value.dispose(); if (chart.value) chart.value.dispose();
nextTick(() => { nextTick(() => {
console.log("[ChartMonth] ===> 初始化表格: ", monthData.value);
chart.value = echarts.init(chartChart.value); chart.value = echarts.init(chartChart.value);
setupFn(chart.value, monthData.value); setupFn(chart.value, monthData.value);
}); });
@ -47,15 +36,16 @@ function setupChart() {
onMounted(() => { onMounted(() => {
chartChart.value.classList.add("h-full"); chartChart.value.classList.add("h-full");
// nextTick(() => {
// setupChart();
// })
}); });
</script> </script>
<template> <template>
<Container class="chart" title="本月班组情况" icon="cube"> <Container class="chart" title="本月班组情况" icon="cube">
<div ref="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div> <div
ref="chartChart"
class="chart-chart"
style="{opacity: (monthData) ? 1 : 0}"
></div>
<p v-show="!monthData" class="empty-data-hint">暂无数据</p> <p v-show="!monthData" class="empty-data-hint">暂无数据</p>
</Container> </Container>
</template> </template>
@ -65,7 +55,8 @@ onMounted(() => {
height: 300px; height: 300px;
} }
.chart-inner {} .chart-inner {
}
.chart-chart { .chart-chart {
height: 100%; height: 100%;

39
src/components/TeamChartMonthOptions.js
View File

@ -1,49 +1,43 @@
export const options = { export const options = {
grid: { grid: {
top: 0, top: "10%",
left: 0, bottom: "10%",
right: 0,
bottom: 0
}, },
title: [ title: [
{ {
text: "当前产量：" + 100 + " 片", text: "当前产量：" + 100 + " 片",
left: "27%", left: "27%",
textAlign: "center", textAlign: "center",
top: "70%", top: "67%",
textStyle: { textStyle: {
fontSize: 16, fontSize: 12,
color: '#fffa'
}, },
}, },
{ {
text: "目标产量：" + 100 + " 片", text: "目标产量：" + 100 + " 片",
left: "27%", left: "27%",
textAlign: "center", textAlign: "center",
top: "85%", top: "82%",
textStyle: { textStyle: {
fontSize: 16, fontSize: 12,
color: '#fffa'
}, },
}, },
{ {
text: "当前成品率：" + 22 + "%", text: "当前成品率：" + 22 + "%",
left: "72%", left: "73%",
textAlign: "center", textAlign: "center",
top: "70%", top: "67%",
textStyle: { textStyle: {
fontSize: 16, fontSize: 12,
color: '#fffa'
}, },
}, },
{ {
text: "目标成品率：" + 22 + "%", text: "目标成品率：" + 22 + "%",
left: "72%", left: "73%",
textAlign: "center", textAlign: "center",
top: "85%", top: "82%",
textStyle: { textStyle: {
fontSize: 16, fontSize: 12,
color: '#fffa'
}, },
}, },
], ],
@ -77,7 +71,7 @@ export const options = {
}, },
detail: { detail: {
valueAnimation: true, valueAnimation: true,
fontSize: 16, fontSize: 12,
offsetCenter: [0, "0%"], offsetCenter: [0, "0%"],
formatter: "{value}%", formatter: "{value}%",
color: "rgba(255, 255, 255, 1)", color: "rgba(255, 255, 255, 1)",
@ -119,11 +113,11 @@ export const options = {
detail: { detail: {
show: true, show: true,
valueAnimation: true, valueAnimation: true,
fontSize: 16, fontSize: 12,
offsetCenter: [0, "0%"], offsetCenter: [0, "0%"],
// formatter: 0 + "%", formatter: 0 + "%",
// formatter: (nowYield / targetYield * 100).toFixed(1) + '%', // formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
color: "#fff", color: "#fff8",
}, },
data: [ data: [
{ {
@ -171,6 +165,5 @@ export default function setup(echartInstance, data) {
new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1) 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[0].value = data.targetYield
new_options.series[1].data[1].value = data.nowYield 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); echartInstance.setOption(new_options);
} }

26
src/components/Tools.vue
View File

@ -3,36 +3,25 @@ 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";
import SettingDialogVue from "./SettingDialog.vue";
import { useSettings } from '../store/settings';
const { settings } = useSettings(); import SettingDialogVue from "./SettingDialog.vue";
const visible = ref(false); const visible = ref(false);
function toHome() { function toHome() {
document.location.href = '/1-1' document.location.href = '/1-1'
} }
function showDialog() { function showDialog(){
visible.value = true; visible.value = true;
} }
function toggleLunbo() {
settings.carousel = !settings.carousel;
}
</script> </script>
<template> <template>
<div class="tools"> <div class="tools">
<button @click="toHome"> <button @click="toHome"><IconBack /></button>
<IconBack /> <button @click="showDialog"><IconSetting /></button>
</button> <button><IconExchange /></button>
<button @click="showDialog">
<IconSetting />
</button>
<button @click="toggleLunbo">
<IconExchange />
</button>
</div> </div>
<SettingDialogVue v-if="visible" @close="visible = false;" /> <SettingDialogVue v-if="visible" @close="visible = false;"/>
</template> </template>
<style scoped> <style scoped>
@ -78,4 +67,5 @@ button:hover svg #back-btn,
button:hover svg #setting-btn, button:hover svg #setting-btn,
button:hover svg #switch-btn { button:hover svg #switch-btn {
fill: #b1daff !important; fill: #b1daff !important;
}</style> }
</style>

437
src/pages/3D.vue
View File

@ -1,277 +1,117 @@
<!-- 三维页面 --> <!-- 三维页面 -->
<script setup> <script setup>
import { useSettings } from '../store/settings'
import { computed } from 'vue';
const { settings } = useSettings();
const props = defineProps({ const props = defineProps({
line: { line: {
type: Number, type: String,
default: 1, default: "1",
}, },
}); });
const eqStatus = computed(() => settings.eqStatus);
console.log('eqStatus', eqStatus.value)
</script> </script>
<template> <template>
<div class="triple-page" :class="['line-' + line]"> <div class="triple-page" :class="['line-' + line]">
<div class="info-1" v-if="eqStatus && line == '1'"> <div class="info-1" v-if="line == '1'">
<div class="info"> <div class="info"><h1>M7上片</h1></div>
<h1>M7上片</h1> <div class="info"><h1>M6上片</h1></div>
</div> <div class="info"><h1>M7磨边机</h1></div>
<div class="info"> <div class="info"><h1>M6磨边机</h1></div>
<h1>M6上片</h1> <div class="info"><h1>M7清洗机</h1></div>
</div> <div class="info"><h1>M6清洗机</h1></div>
<div class="info"> </div>
<h1>M7磨边机</h1> <div class="info-2" v-if="line == '2'">
</div> <div class="info"><h1>Z7钻孔机</h1></div>
<div class="info"> <div class="info"><h1>Z6钻孔机</h1></div>
<h1>M6磨边机</h1> <div class="info"><h1>S7清洗机</h1></div>
</div> <div class="info"><h1>S6清洗机</h1></div>
<div class="info"> <div class="info"><h1>S7前储片台</h1></div>
<h1>M7清洗机</h1> <div class="info"><h1>S6前储片台</h1></div>
</div> <div class="info"><h1>S7丝印机</h1></div>
<div class="info"> <div class="info"><h1>S6丝印机</h1></div>
<h1>M6清洗机</h1> <div class="info"><h1>S7固化炉</h1></div>
</div> <div class="info"><h1>S6固化炉</h1></div>
</div> <div class="info"><h1>S7后储片台</h1></div>
<div class="info-2" v-if="eqStatus && line == '2'"> <div class="info"><h1>S6后储片台</h1></div>
<div class="info"> </div>
<h1>Z7钻孔机</h1> <div class="info-3" v-if="line == '3'">
</div> <div class="info"><h1>B1前储片台</h1></div>
<div class="info"> </div>
<h1>Z6钻孔机</h1> <div class="info-4" v-if="line == '4'">
</div> <div class="info"><h1>B2清洗机</h1></div>
<div class="info"> <div class="info"><h1>B2下片</h1></div>
<h1>S7清洗机</h1> <div class="info"><h1>B2后储片台</h1></div>
</div> </div>
<div class="info"> <div class="info-5" v-if="line == '5'">
<h1>S6清洗机</h1> <div class="info"><h1>M5上片</h1></div>
</div> <div class="info"><h1>M4上片</h1></div>
<div class="info"> <div class="info"><h1>M3上片</h1></div>
<h1>S7前储片台</h1> <div class="info"><h1>M5磨边机</h1></div>
</div> <div class="info"><h1>M4磨边机</h1></div>
<div class="info"> <div class="info"><h1>M3磨边机</h1></div>
<h1>S6前储片台</h1> <div class="info"><h1>M5清洗机</h1></div>
</div> <div class="info"><h1>M4清洗机</h1></div>
<div class="info"> <div class="info"><h1>M3清洗机</h1></div>
<h1>S7丝印机</h1> </div>
</div> <div class="info-6" v-if="line == '6'">
<div class="info"> <div class="info"><h1>Z5钻孔机</h1></div>
<h1>S6丝印机</h1> <div class="info"><h1>Z4钻孔机</h1></div>
</div> <div class="info"><h1>Z3钻孔机</h1></div>
<div class="info"> <div class="info"><h1>S5清洗机</h1></div>
<h1>S7固化炉</h1> <div class="info"><h1>S4清洗机</h1></div>
</div> <div class="info"><h1>S3清洗机</h1></div>
<div class="info"> <div class="info"><h1>S5前储片台</h1></div>
<h1>S6固化炉</h1> <div class="info"><h1>S4前储片台</h1></div>
</div> <div class="info"><h1>S3前储片台</h1></div>
<div class="info"> <div class="info"><h1>S5丝印机</h1></div>
<h1>S7后储片台</h1> <div class="info"><h1>S4丝印机</h1></div>
</div> <div class="info"><h1>S3丝印机</h1></div>
<div class="info"> </div>
<h1>S6后储片台</h1> <div class="info-7" v-if="line == '7'">
</div> <div class="info"><h1>S5后储片台</h1></div>
</div> <div class="info"><h1>S4后储片台</h1></div>
<div class="info-3" v-if="eqStatus && line == '3'"> <div class="info"><h1>S3后储片台</h1></div>
<div class="info"> <div class="info"><h1>S5固化炉</h1></div>
<h1>B1前储片台</h1> <div class="info"><h1>S4固化炉</h1></div>
</div> <div class="info"><h1>S3固化炉</h1></div>
</div> <div class="info"><h1>B2前储片台</h1></div>
<div class="info-4" v-if="eqStatus && line == '4'"> </div>
<div class="info"> <div class="info-8" v-if="line == '8'">
<h1>B2清洗机</h1> <div class="info"><h1>B1前储片台</h1></div>
</div> <div class="info"><h1>B1清洗机</h1></div>
<div class="info"> <div class="info"><h1>B1下片</h1></div>
<h1>B2下片</h1> <div class="info"><h1>B1后储片台</h1></div>
</div> </div>
<div class="info"> <div class="info-9" v-if="line == '9'">
<h1>B2后储片台</h1> <div class="info"><h1>M2上片</h1></div>
</div> <div class="info"><h1>M1上片</h1></div>
</div> <div class="info"><h1>M2磨边机</h1></div>
<div class="info-5" v-if="eqStatus && line == '5'"> <div class="info"><h1>M1磨边机</h1></div>
<div class="info"> <div class="info"><h1>M2清洗机</h1></div>
<h1>M5上片</h1> <div class="info"><h1>M1清洗机</h1></div>
</div> </div>
<div class="info"> <div class="info-10" v-if="line == '10'">
<h1>M4上片</h1>
</div>
<div class="info">
<h1>M3上片</h1>
</div>
<div class="info">
<h1>M5磨边机</h1>
</div>
<div class="info">
<h1>M4磨边机</h1>
</div>
<div class="info">
<h1>M3磨边机</h1>
</div>
<div class="info">
<h1>M5清洗机</h1>
</div>
<div class="info">
<h1>M4清洗机</h1>
</div>
<div class="info">
<h1>M3清洗机</h1>
</div>
</div>
<div class="info-6" v-if="eqStatus && line == '6'">
<div class="info">
<h1>Z5钻孔机</h1>
</div>
<div class="info">
<h1>Z4钻孔机</h1>
</div>
<div class="info">
<h1>Z3钻孔机</h1>
</div>
<div class="info">
<h1>S5清洗机</h1>
</div>
<div class="info">
<h1>S4清洗机</h1>
</div>
<div class="info">
<h1>S3清洗机</h1>
</div>
<div class="info">
<h1>S5前储片台</h1>
</div>
<div class="info">
<h1>S4前储片台</h1>
</div>
<div class="info">
<h1>S3前储片台</h1>
</div>
<div class="info">
<h1>S5丝印机</h1>
</div>
<div class="info">
<h1>S4丝印机</h1>
</div>
<div class="info">
<h1>S3丝印机</h1>
</div>
</div>
<div class="info-7" v-if="eqStatus && line == '7'">
<div class="info">
<h1>S5后储片台</h1>
</div>
<div class="info">
<h1>S4后储片台</h1>
</div>
<div class="info">
<h1>S3后储片台</h1>
</div>
<div class="info">
<h1>S5固化炉</h1>
</div>
<div class="info">
<h1>S4固化炉</h1>
</div>
<div class="info">
<h1>S3固化炉</h1>
</div>
<div class="info">
<h1>B2前储片台</h1>
</div>
</div>
<div class="info-8" v-if="eqStatus && line == '8'">
<div class="info">
<h1>B1前储片台</h1>
</div>
<div class="info">
<h1>B1清洗机</h1>
</div>
<div class="info">
<h1>B1下片</h1>
</div>
<div class="info">
<h1>B1后储片台</h1>
</div>
</div>
<div class="info-9" v-if="eqStatus && line == '9'">
<div class="info">
<h1>M2上片</h1>
</div>
<div class="info">
<h1>M1上片</h1>
</div>
<div class="info">
<h1>M2磨边机</h1>
</div>
<div class="info">
<h1>M1磨边机</h1>
</div>
<div class="info">
<h1>M2清洗机</h1>
</div>
<div class="info">
<h1>M1清洗机</h1>
</div>
</div>
<div class="info-10" v-if="eqStatus && line == '10'">
<!-- <div class="info"><h1>M2清洗机</h1></div> <!-- <div class="info"><h1>M2清洗机</h1></div>
<div class="info"><h1>M1清洗机</h1></div> --> <div class="info"><h1>M1清洗机</h1></div> -->
<div class="info"> <div class="info"><h1>Z2钻孔机</h1></div>
<h1>Z2钻孔机</h1> <div class="info"><h1>Z1钻孔机</h1></div>
<div class="info"><h1>S2清洗机</h1></div>
<div class="info"><h1>S1清洗机</h1></div>
<div class="info"><h1>S2前储片台</h1></div>
<div class="info"><h1>S1前储片台</h1></div>
<div class="info"><h1>S2丝印机</h1></div>
<div class="info"><h1>S1丝印机</h1></div>
</div> </div>
<div class="info"> <div class="info-11" v-if="line == '11'">
<h1>Z1钻孔机</h1> <div class="info"><h1>S7后储片台</h1></div>
</div> <div class="info"><h1>S6后储片台</h1></div>
<div class="info"> <div class="info"><h1>S7固化炉</h1></div>
<h1>S2清洗机</h1> <div class="info"><h1>S6固化炉</h1></div>
</div> <div class="info"><h1>B3前储片台</h1></div>
<div class="info">
<h1>S1清洗机</h1>
</div>
<div class="info">
<h1>S2前储片台</h1>
</div>
<div class="info">
<h1>S1前储片台</h1>
</div>
<div class="info">
<h1>S2丝印机</h1>
</div>
<div class="info">
<h1>S1丝印机</h1>
</div>
</div>
<div class="info-11" v-if="eqStatus && line == '11'">
<div class="info">
<h1>S7后储片台</h1>
</div>
<div class="info">
<h1>S6后储片台</h1>
</div>
<div class="info">
<h1>S7固化炉</h1>
</div>
<div class="info">
<h1>S6固化炉</h1>
</div>
<div class="info">
<h1>B3前储片台</h1>
</div>
</div>
<div class="info-12" v-if="eqStatus && line == '12'">
<div class="info">
<h1>B3前储片台</h1>
</div>
<div class="info">
<h1>B3清洗机</h1>
</div>
<div class="info">
<h1>B3下片</h1>
</div>
<div class="info">
<h1>B3后储片台</h1>
</div> </div>
<div class="info-12" v-if="line == '12'">
<div class="info"><h1>B3前储片台</h1></div>
<div class="info"><h1>B3清洗机</h1></div>
<div class="info"><h1>B3下片</h1></div>
<div class="info"><h1>B3后储片台</h1></div>
</div> </div>
</div> </div>
</template> </template>
@ -284,6 +124,7 @@ console.log('eqStatus', eqStatus.value)
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: -1;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #fff; color: #fff;
@ -310,27 +151,22 @@ console.log('eqStatus', eqStatus.value)
left: 490px; left: 490px;
bottom: 250px; bottom: 250px;
} }
.info-1 .info:nth-child(2) { .info-1 .info:nth-child(2) {
left: 790px; left: 790px;
bottom: 210px; bottom: 210px;
} }
.info-1 .info:nth-child(3) { .info-1 .info:nth-child(3) {
left: 660px; left: 660px;
top: 480px; top: 480px;
} }
.info-1 .info:nth-child(4) { .info-1 .info:nth-child(4) {
left: 910px; left: 910px;
top: 510px; top: 510px;
} }
.info-1 .info:nth-child(5) { .info-1 .info:nth-child(5) {
left: 880px; left: 880px;
top: 220px; top: 220px;
} }
.info-1 .info:nth-child(6) { .info-1 .info:nth-child(6) {
left: 1100px; left: 1100px;
top: 260px; top: 260px;
@ -341,57 +177,46 @@ console.log('eqStatus', eqStatus.value)
left: 580px; left: 580px;
bottom: 200px; bottom: 200px;
} }
.info-2 .info:nth-child(2) { .info-2 .info:nth-child(2) {
left: 940px; left: 940px;
bottom: 200px; bottom: 200px;
} }
.info-2 .info:nth-child(3) { .info-2 .info:nth-child(3) {
left: 640px; left: 640px;
bottom: 360px; bottom: 360px;
} }
.info-2 .info:nth-child(4) { .info-2 .info:nth-child(4) {
left: 940px; left: 940px;
bottom: 360px; bottom: 360px;
} }
.info-2 .info:nth-child(5) { .info-2 .info:nth-child(5) {
left: 660px; left: 660px;
bottom: 580px; bottom: 580px;
} }
.info-2 .info:nth-child(6) { .info-2 .info:nth-child(6) {
left: 1060px; left: 1060px;
bottom: 520px; bottom: 520px;
} }
.info-2 .info:nth-child(7) { .info-2 .info:nth-child(7) {
left: 720px; left: 720px;
top: 190px; top: 190px;
} }
.info-2 .info:nth-child(8) { .info-2 .info:nth-child(8) {
left: 1100px; left: 1100px;
top: 260px; top: 260px;
} }
.info-2 .info:nth-child(9) { .info-2 .info:nth-child(9) {
left: 800px; left: 800px;
top: 120px; top: 120px;
} }
.info-2 .info:nth-child(10) { .info-2 .info:nth-child(10) {
left: 1100px; left: 1100px;
top: 144px; top: 144px;
} }
.info-2 .info:nth-child(11) { .info-2 .info:nth-child(11) {
left: 800px; left: 800px;
top: 10px; top: 10px;
} }
.info-2 .info:nth-child(12) { .info-2 .info:nth-child(12) {
left: 1100px; left: 1100px;
top: 20px; top: 20px;
@ -408,12 +233,10 @@ console.log('eqStatus', eqStatus.value)
left: 580px; left: 580px;
bottom: 200px; bottom: 200px;
} }
.info-4 .info:nth-child(2) { .info-4 .info:nth-child(2) {
left: 800px; left: 800px;
top: 100px; top: 100px;
} }
.info-4 .info:nth-child(3) { .info-4 .info:nth-child(3) {
left: 1240px; left: 1240px;
top: 40px; top: 40px;
@ -424,42 +247,34 @@ console.log('eqStatus', eqStatus.value)
left: 490px; left: 490px;
bottom: 300px; bottom: 300px;
} }
.info-5 .info:nth-child(2) { .info-5 .info:nth-child(2) {
left: 740px; left: 740px;
bottom: 280px; bottom: 280px;
} }
.info-5 .info:nth-child(3) { .info-5 .info:nth-child(3) {
left: 960px; left: 960px;
bottom: 240px; bottom: 240px;
} }
.info-5 .info:nth-child(4) { .info-5 .info:nth-child(4) {
left: 460px; left: 460px;
bottom: 490px; bottom: 490px;
} }
.info-5 .info:nth-child(5) { .info-5 .info:nth-child(5) {
left: 760px; left: 760px;
bottom: 490px; bottom: 490px;
} }
.info-5 .info:nth-child(6) { .info-5 .info:nth-child(6) {
left: 1060px; left: 1060px;
bottom: 450px; bottom: 450px;
} }
.info-5 .info:nth-child(7) { .info-5 .info:nth-child(7) {
left: 570px; left: 570px;
top: 190px; top: 190px;
} }
.info-5 .info:nth-child(8) { .info-5 .info:nth-child(8) {
left: 890px; left: 890px;
top: 200px; top: 200px;
} }
.info-5 .info:nth-child(9) { .info-5 .info:nth-child(9) {
left: 1190px; left: 1190px;
top: 200px; top: 200px;
@ -471,57 +286,46 @@ console.log('eqStatus', eqStatus.value)
left: 480px; left: 480px;
bottom: 530px; bottom: 530px;
} }
.info-6 .info:nth-child(2) { .info-6 .info:nth-child(2) {
left: 720px; left: 720px;
bottom: 470px; bottom: 470px;
} }
.info-6 .info:nth-child(3) { .info-6 .info:nth-child(3) {
left: 990px; left: 990px;
bottom: 460px; bottom: 460px;
} }
.info-6 .info:nth-child(4) { .info-6 .info:nth-child(4) {
left: 510px; left: 510px;
top: 260px; top: 260px;
} }
.info-6 .info:nth-child(5) { .info-6 .info:nth-child(5) {
left: 810px; left: 810px;
top: 260px; top: 260px;
} }
.info-6 .info:nth-child(6) { .info-6 .info:nth-child(6) {
left: 1110px; left: 1110px;
top: 280px; top: 280px;
} }
.info-6 .info:nth-child(7) { .info-6 .info:nth-child(7) {
left: 600px; left: 600px;
top: 110px; top: 110px;
} }
.info-6 .info:nth-child(8) { .info-6 .info:nth-child(8) {
left: 900px; left: 900px;
top: 110px; top: 110px;
} }
.info-6 .info:nth-child(9) { .info-6 .info:nth-child(9) {
left: 1200px; left: 1200px;
top: 110px; top: 110px;
} }
.info-6 .info:nth-child(10) { .info-6 .info:nth-child(10) {
left: 650px; left: 650px;
top: 20px; top: 20px;
} }
.info-6 .info:nth-child(11) { .info-6 .info:nth-child(11) {
left: 950px; left: 950px;
top: 30px; top: 30px;
} }
.info-6 .info:nth-child(12) { .info-6 .info:nth-child(12) {
left: 1230px; left: 1230px;
top: 20px; top: 20px;
@ -533,32 +337,26 @@ console.log('eqStatus', eqStatus.value)
left: 400px; left: 400px;
bottom: 440px; bottom: 440px;
} }
.info-7 .info:nth-child(2) { .info-7 .info:nth-child(2) {
left: 670px; left: 670px;
bottom: 440px; bottom: 440px;
} }
.info-7 .info:nth-child(3) { .info-7 .info:nth-child(3) {
left: 960px; left: 960px;
bottom: 450px; bottom: 450px;
} }
.info-7 .info:nth-child(4) { .info-7 .info:nth-child(4) {
left: 310px; left: 310px;
bottom: 260px; bottom: 260px;
} }
.info-7 .info:nth-child(5) { .info-7 .info:nth-child(5) {
left: 620px; left: 620px;
bottom: 260px; bottom: 260px;
} }
.info-7 .info:nth-child(6) { .info-7 .info:nth-child(6) {
left: 1110px; left: 1110px;
bottom: 240px; bottom: 240px;
} }
.info-7 .info:nth-child(7) { .info-7 .info:nth-child(7) {
left: 800px; left: 800px;
top: 50px; top: 50px;
@ -569,17 +367,14 @@ console.log('eqStatus', eqStatus.value)
left: 660px; left: 660px;
bottom: 550px; bottom: 550px;
} }
.info-8 .info:nth-child(2) { .info-8 .info:nth-child(2) {
left: 990px; left: 990px;
bottom: 690px; bottom: 690px;
} }
.info-8 .info:nth-child(3) { .info-8 .info:nth-child(3) {
left: 700px; left: 700px;
top: 80px; top: 80px;
} }
.info-8 .info:nth-child(4) { .info-8 .info:nth-child(4) {
left: 1100px; left: 1100px;
top: 80px; top: 80px;
@ -590,27 +385,22 @@ console.log('eqStatus', eqStatus.value)
left: 400px; left: 400px;
bottom: 250px; bottom: 250px;
} }
.info-9 .info:nth-child(2) { .info-9 .info:nth-child(2) {
left: 1100px; left: 1100px;
bottom: 220px; bottom: 220px;
} }
.info-9 .info:nth-child(3) { .info-9 .info:nth-child(3) {
left: 496px; left: 496px;
bottom: 570px; bottom: 570px;
} }
.info-9 .info:nth-child(4) { .info-9 .info:nth-child(4) {
left: 1100px; left: 1100px;
bottom: 490px; bottom: 490px;
} }
.info-9 .info:nth-child(5) { .info-9 .info:nth-child(5) {
left: 670px; left: 670px;
top: 144px; top: 144px;
} }
.info-9 .info:nth-child(6) { .info-9 .info:nth-child(6) {
left: 1100px; left: 1100px;
top: 155px; top: 155px;
@ -621,37 +411,30 @@ console.log('eqStatus', eqStatus.value)
left: 620px; left: 620px;
bottom: 450px; bottom: 450px;
} }
.info-10 .info:nth-child(2) { .info-10 .info:nth-child(2) {
left: 1000px; left: 1000px;
bottom: 320px; bottom: 320px;
} }
.info-10 .info:nth-child(3) { .info-10 .info:nth-child(3) {
left: 736px; left: 736px;
top: 270px; top: 270px;
} }
.info-10 .info:nth-child(4) { .info-10 .info:nth-child(4) {
left: 1200px; left: 1200px;
top: 330px; top: 330px;
} }
.info-10 .info:nth-child(5) { .info-10 .info:nth-child(5) {
left: 870px; left: 870px;
top: 144px; top: 144px;
} }
.info-10 .info:nth-child(6) { .info-10 .info:nth-child(6) {
left: 1100px; left: 1100px;
top: 195px; top: 195px;
} }
.info-10 .info:nth-child(7) { .info-10 .info:nth-child(7) {
left: 900px; left: 900px;
top: 55px; top: 55px;
} }
.info-10 .info:nth-child(8) { .info-10 .info:nth-child(8) {
left: 1200px; left: 1200px;
top: 68px; top: 68px;
@ -662,22 +445,18 @@ console.log('eqStatus', eqStatus.value)
left: 570px; left: 570px;
bottom: 450px; bottom: 450px;
} }
.info-11 .info:nth-child(2) { .info-11 .info:nth-child(2) {
left: 1100px; left: 1100px;
bottom: 410px; bottom: 410px;
} }
.info-11 .info:nth-child(3) { .info-11 .info:nth-child(3) {
left: 436px; left: 436px;
bottom: 170px; bottom: 170px;
} }
.info-11 .info:nth-child(4) { .info-11 .info:nth-child(4) {
left: 1036px; left: 1036px;
bottom: 170px; bottom: 170px;
} }
.info-11 .info:nth-child(5) { .info-11 .info:nth-child(5) {
left: 890px; left: 890px;
top: 94px; top: 94px;
@ -688,17 +467,14 @@ console.log('eqStatus', eqStatus.value)
left: 570px; left: 570px;
bottom: 250px; bottom: 250px;
} }
.info-12 .info:nth-child(2) { .info-12 .info:nth-child(2) {
left: 800px; left: 800px;
bottom: 80px; bottom: 80px;
} }
.info-12 .info:nth-child(3) { .info-12 .info:nth-child(3) {
left: 1136px; left: 1136px;
bottom: 670px; bottom: 670px;
} }
.info-12 .info:nth-child(4) { .info-12 .info:nth-child(4) {
left: 836px; left: 836px;
top: 70px; top: 70px;
@ -710,67 +486,56 @@ console.log('eqStatus', eqStatus.value)
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-2 { .line-2 {
background: url(../assets/model/F2.png) no-repeat; background: url(../assets/model/F2.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-3 { .line-3 {
background: url(../assets/model/F3.png) no-repeat; background: url(../assets/model/F3.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-4 { .line-4 {
background: url(../assets/model/F4.png) no-repeat; background: url(../assets/model/F4.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-5 { .line-5 {
background: url(../assets/model/F5.png) no-repeat; background: url(../assets/model/F5.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-6 { .line-6 {
background: url(../assets/model/F6.png) no-repeat; background: url(../assets/model/F6.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-7 { .line-7 {
background: url(../assets/model/F7.png) no-repeat; background: url(../assets/model/F7.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-8 { .line-8 {
background: url(../assets/model/F8.png) no-repeat; background: url(../assets/model/F8.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-9 { .line-9 {
background: url(../assets/model/F9.png) no-repeat; background: url(../assets/model/F9.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-10 { .line-10 {
background: url(../assets/model/F10.png) no-repeat; background: url(../assets/model/F10.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-11 { .line-11 {
background: url(../assets/model/F11.png) no-repeat; background: url(../assets/model/F11.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-12 { .line-12 {
background: url(../assets/model/F12.png) no-repeat; background: url(../assets/model/F12.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;

6
src/pages/AlertListPage.vue
View File

@ -30,9 +30,9 @@ alarmList.value = (store.data1.alarmArrList ?? [
// })); // }));
// }); // });
// function handleIgnore() { function handleIgnore() {
// alarmList.value.splice(0) alarmList.value.splice(0)
// } }
</script> </script>
<template> <template>

21
src/pages/AnnouncementPage.vue
View File

@ -46,11 +46,10 @@ const handleClose = () => {
</main> </main>
<div class="announcement-footer"> <div class="announcement-footer">
<button <button
id="return-btn"
style=" style="
position: fixed; position: absolute;
right: 32px; left: 12px;
top: 56px; bottom: 28px;
appearance: none; appearance: none;
background: transparent; background: transparent;
border: none; border: none;
@ -58,25 +57,19 @@ const handleClose = () => {
" "
@click="handleClose" @click="handleClose"
> >
<IconBack color="#f00"/> <IconBack />
</button> </button>
<ScrollText> {{ horizontal_content }} </ScrollText> <ScrollText> {{ horizontal_content }} </ScrollText>
</div> </div>
</div> </div>
</template> </template>
<style>
#return-btn:hover #back-btn__inner #back-btn {
fill: #F008 !important;
}
</style>
<style scoped> <style scoped>
.announcement-page { .announcement-page {
flex: 1; flex: 1;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: url(../assets/line.png) 0 0 / 100% 100% no-repeat, #000; background: #000;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: #f00; color: #f00;
@ -85,7 +78,6 @@ const handleClose = () => {
.announcement-title { .announcement-title {
color: #fff; color: #fff;
font-size: 72px; font-size: 72px;
line-height: 144px;
font-weight: 500; font-weight: 500;
letter-spacing: 2px; letter-spacing: 2px;
text-align: center; text-align: center;
@ -99,11 +91,10 @@ const handleClose = () => {
font-family: serif; font-family: serif;
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
margin-bottom: 32px;
} }
.announcement-footer { .announcement-footer {
height: 144px; height: 128px;
/* background: #ccc1; */ /* background: #ccc1; */
font-size: 64px; font-size: 64px;
padding: 0 80px; padding: 0 80px;

6
src/store/index.js
View File

@ -9,13 +9,13 @@ export const useWsStore = defineStore("wsData", () => {
function updateData(category, data) { function updateData(category, data) {
switch (category) { switch (category) {
case "1": case "1":
data1.value = { ...data1.value, ...data }; data1.value = data;
break; break;
case "2": case "2":
data2.value = { ...data2.value, ...data }; data2.value = data;
break; break;
case "3": case "3":
data3.value = { ...data3.value, ...data }; data3.value = data;
default: default:
break; break;
} }

70
src/store/settings.js
View File

@ -1,72 +1,16 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { ref, watch } from "vue"; import { ref } from "vue";
export const useSettings = defineStore("settings", () => { export const useSettings = defineStore("settings", () => {
const settings = ref({ const settings = ref({
resolution: { resolution: {
width: 1920, width: null,
height: 1080, height: null,
}, },
carousel: false, carousel: null,
carouselTime: 10000, // s
fullscreen: false, fullscreen: false,
eqStatus: true, status: false,
}); });
function updateSettings() {}
function changeScale(width, height) { return { settings, updateSettings };
const xScale = width / 1920;
const yScale = height / 1080;
const style = {
transform: `scale(${xScale}, ${yScale})`,
transformOrigin: "top left",
};
document.documentElement.style.transform = style.transform;
document.documentElement.style.transformOrigin = style.transformOrigin;
}
function resetScale() {
document.documentElement.style.transform = "initial";
document.documentElement.style.transformOrigin = "initial";
}
watch(
() => settings.value.fullscreen,
(val) => {
if (val) {
document.documentElement.requestFullscreen().then(() => {
document.documentElement.style.width = "100vw";
document.documentElement.style.height = "100vh";
changeScale(
document.documentElement.clientWidth,
document.documentElement.clientHeight
);
});
return;
}
document.exitFullscreen().then(resetScale);
}
);
function rewriteSettings(payload) {
settings.value = payload;
}
function updateSettings({ type, value }) {
switch (type) {
case "carousel":
settings.value.carousel = !settings.value.carousel;
break;
case "fullscreen":
settings.value.fullscreen = !settings.value.fullscreen;
break;
case "eq":
settings.value.eqStatus = !settings.value.eqStatus;
break;
case "resolution":
settings.value.resolution.height = value.height;
settings.value.resolution.width = value.width;
break;
}
}
return { settings, updateSettings, rewriteSettings, changeScale };
}); });