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

Compare commits

base: mt-fe-group:112730b52a2996e0ae3387c96d5b894f795ec415
Branches Tags
mt-fe-group:master
...
compare: mt-fe-group:0d96fec181d029dbfe16def1fbb8f25faae0cb0e
Branches Tags
mt-fe-group:master

3 Commits
112730b52a ... 0d96fec181

Author SHA1 Message Date
DESKTOP-FUDKNA8\znjsz
0d96fec181 update status 2024-01-23 11:23:36 +08:00
DESKTOP-FUDKNA8\znjsz
7bf5a24cda update names 2024-01-23 10:58:36 +08:00
DESKTOP-FUDKNA8\znjsz
bc96f76d7f update 2024-01-23 10:12:39 +08:00
7 changed files with 280 additions and 105 deletions
Show Stats Expand all files Collapse all files

19
src/components/NavMenu.vue
View File

@ -17,26 +17,26 @@ 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="{ color: value == '3d' ? '#b1daff' : '#339dff' }">三维界面</span>
<Icon3D class="nav-icon" :color="value == '3d' ? '#b1daff': '#339dff'" /> <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="{ color: value == 'data' ? '#b1daff' : '#339dff' }">数据界面</span>
<IconChart class="nav-icon" :color="value == 'data' ? '#b1daff': '#339dff'" /> <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="{ color: value == 'realtime' ? '#b1daff' : '#339dff' }">实时数据</span>
<IconRealtime class="nav-icon" :color="value == 'realtime' ? '#b1daff': '#339dff'" /> <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="{ color: value == 'alert' ? '#b1daff' : '#339dff' }">报警列表</span>
<IconAlert class="nav-icon" :color="value == 'alert' ? '#b1daff': '#339dff'" /> <IconAlert class="nav-icon" :color="value == 'alert' ? '#b1daff' : '#339dff'" />
</button> </button>
</li> </li>
<li> <li>
@ -112,4 +112,5 @@ li {
.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>

31
src/components/RealtimeTable.vue
View File

@ -3,8 +3,26 @@
import { ref } from "vue"; import { ref } from "vue";
import { useWsStore } from "../store"; import { useWsStore } from "../store";
const listData = ref([]);
const store = useWsStore(); const store = useWsStore();
const listData = ref((store.data2.lineDetailData || Array(3).fill({})).map(
(item, index) => ({
productLine: item.productLine || "---",
mbt: item.edgingInput || "---",
mbb: item.edgingOutput || "---",
dkt: item.drillingInput || "---",
dkb: item.drillingOutput || "---",
dmt: item.coatingInput || "---",
dmb: item.coatingOutput || "---",
syt: item.silkInput || "---",
syb: item.silkOutput || "---",
ght: item.solidificationInput || "---",
ghb: item.solidificationOutput || "---",
gh1: item.temperingInput || "---",
gh2: item.temperingOutput || "---",
bzt: item.finalInput || "---",
bzb: item.finalOutput || "---",
})
));
store.$subscribe((mutation, state) => { store.$subscribe((mutation, state) => {
listData.value = (state.data2.lineDetailData || Array(3).fill({})).map( listData.value = (state.data2.lineDetailData || Array(3).fill({})).map(
(item, index) => ({ (item, index) => ({
@ -30,13 +48,8 @@ store.$subscribe((mutation, state) => {
<template> <template>
<div class="realtime-table"> <div class="realtime-table">
<el-table <el-table class="dark-table" :data="listData" :show-overflow-tooltip="true" row-class-name="dark-row"
class="dark-table" header-row-class-name="dark-header">
:data="listData"
:show-overflow-tooltip="true"
row-class-name="dark-row"
header-row-class-name="dark-header"
>
<el-table-column prop="productLine" label="产线"></el-table-column> <el-table-column prop="productLine" label="产线"></el-table-column>
<el-table-column prop="mbt" label="磨边上"></el-table-column> <el-table-column prop="mbt" label="磨边上"></el-table-column>
<el-table-column prop="mbb" label="磨边下"></el-table-column> <el-table-column prop="mbb" label="磨边下"></el-table-column>
@ -68,7 +81,7 @@ store.$subscribe((mutation, state) => {
height: 100%; height: 100%;
} }
.dark-table >>> .el-table__inner-wrapper::before { .dark-table>>>.el-table__inner-wrapper::before {
background-color: transparent !important; background-color: transparent !important;
} }
</style> </style>

2
src/components/SettingDialog.vue
View File

@ -58,7 +58,7 @@ function handleConfirm() {
} }
.setting-dialog { .setting-dialog {
position: fixed; position: absolute;
margin: auto; margin: auto;
top: 0; top: 0;
left: 0; left: 0;

131
src/pages/3D.vue
View File

@ -4,25 +4,7 @@ import { useSettings } from '../store/settings';
import { useWsStore } from "../store"; import { useWsStore } from "../store";
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import Icon from '../assets/svg/IconStatus.vue'; import Icon from '../assets/svg/IconStatus.vue';
import { eqMap, statusMap, initState } from './eqMaps'
const { settings } = useSettings();
const store = useWsStore();
const lines = ref({
g1: null,
g2: null,
g3: null, // 钢3线
});
store.$subscribe((mutation, state) => {
if (state.data2.lineDetailData && state.data2.lineDetailData.length == 3) {
lines.value.g1 = state.data2.lineDetailData[0]
lines.value.g2 = state.data2.lineDetailData[1]
lines.value.g3 = state.data2.lineDetailData[2]
console.log('g1: ', lines.value.g1)
console.log('g2: ', lines.value.g2)
console.log('g3: ', lines.value.g3)
}
})
const props = defineProps({ const props = defineProps({
line: { line: {
@ -30,14 +12,31 @@ const props = defineProps({
default: 1, default: 1,
}, },
}); });
const eqStatus = computed(() => settings.eqStatus); const eqStatus = computed(() => settings.eqStatus);
const status = ref({
'B2清洗机': '', const status = ref(initState)
'M1清洗机': 'error', const { settings } = useSettings();
'M1磨边机': 'warn' const store = useWsStore();
// ... const lines = ref({
}) g1: store.data2.lineDetailData?.[0] || null,
g2: store.data2.lineDetailData?.[1] || null,
g3: store.data2.lineDetailData?.[2] || null, // 钢3线
});
store.$subscribe((mutation, state) => {
// 进储片信息
if (state.data2.lineDetailData && state.data2.lineDetailData.length == 3) {
lines.value.g1 = state.data2.lineDetailData[0]
lines.value.g2 = state.data2.lineDetailData[1]
lines.value.g3 = state.data2.lineDetailData[2]
}
// 故障信息
if (state.data1.EquipmentsArrayList && Array.isArray(state.data1.EquipmentsArrayList)) {
state.data1.EquipmentsArrayList.map(item => {
const { equipmentName, status: itemStatus } = item;
status.value[eqMap[equipmentName]] = statusMap[itemStatus];
})
}
});
</script> </script>
<template> <template>
@ -83,13 +82,13 @@ const status = ref({
<div class="info-2" v-if="eqStatus && line == '2'"> <div class="info-2" v-if="eqStatus && line == '2'">
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['Z7钻孔机'] == 'error' ? '#ff3737' : status['Z7钻孔机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
Z7钻孔机 Z7钻孔机
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['Z6钻孔机'] == 'error' ? '#ff3737' : status['Z6钻孔机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
Z6钻孔机 Z6钻孔机
</h1> </h1>
<span v-if="lines.g3?.drillingInput">上片: {{ lines.g3.drillingInput }}</span> <span v-if="lines.g3?.drillingInput">上片: {{ lines.g3.drillingInput }}</span>
@ -97,37 +96,37 @@ const status = ref({
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S7清洗机'] == 'error' ? '#ff3737' : status['S7清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S7清洗机 S7清洗机
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S6清洗机'] == 'error' ? '#ff3737' : status['S6清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S6清洗机 S6清洗机
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S7前储片台'] == 'error' ? '#ff3737' : status['S7前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S7前储片台 S7前储片台
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S6前储片台'] == 'error' ? '#ff3737' : status['S6前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S6前储片台 S6前储片台
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S7丝印机'] == 'error' ? '#ff3737' : status['S7丝印机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S7丝印机 S7丝印机
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S6丝印机'] == 'error' ? '#ff3737' : status['S6丝印机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S6丝印机 S6丝印机
</h1> </h1>
<span v-if="lines.g3?.silkInput">上片: {{ lines.g3.silkInput }}</span> <span v-if="lines.g3?.silkInput">上片: {{ lines.g3.silkInput }}</span>
@ -135,13 +134,13 @@ const status = ref({
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S7固化炉'] == 'error' ? '#ff3737' : status['S7固化炉'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S7固化炉 S7固化炉
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S6固化炉'] == 'error' ? '#ff3737' : status['S6固化炉'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S6固化炉 S6固化炉
</h1> </h1>
<span v-if="lines.g3?.solidificationInput">上片: {{ lines.g3.solidificationInput }}</span> <span v-if="lines.g3?.solidificationInput">上片: {{ lines.g3.solidificationInput }}</span>
@ -149,13 +148,13 @@ const status = ref({
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S7后储片台'] == 'error' ? '#ff3737' : status['S7后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S7后储片台 S7后储片台
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S6后储片台 S6后储片台
</h1> </h1>
</div> </div>
@ -248,7 +247,7 @@ const status = ref({
<div class="info-6" v-if="eqStatus && line == '6'"> <div class="info-6" v-if="eqStatus && line == '6'">
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['Z5钻孔机'] == 'error' ? '#ff3737' : status['Z5钻孔机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
Z5钻孔机 Z5钻孔机
</h1> </h1>
</div> </div>
@ -262,49 +261,49 @@ const status = ref({
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['Z3钻孔机'] == 'error' ? '#ff3737' : status['Z3钻孔机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
Z3钻孔机 Z3钻孔机
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S5清洗机'] == 'error' ? '#ff3737' : status['S5清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S5清洗机 S5清洗机
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S4清洗机'] == 'error' ? '#ff3737' : status['S4清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S4清洗机 S4清洗机
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S3清洗机'] == 'error' ? '#ff3737' : status['S3清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S3清洗机 S3清洗机
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S5前储片台'] == 'error' ? '#ff3737' : status['S5前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S5前储片台 S5前储片台
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S4前储片台'] == 'error' ? '#ff3737' : status['S4前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S4前储片台 S4前储片台
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S3前储片台'] == 'error' ? '#ff3737' : status['S3前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S3前储片台 S3前储片台
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S5丝印机'] == 'error' ? '#ff3737' : status['S5丝印机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S5丝印机 S5丝印机
</h1> </h1>
</div> </div>
@ -318,7 +317,7 @@ const status = ref({
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S3丝印机'] == 'error' ? '#ff3737' : status['S3丝印机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S3丝印机 S3丝印机
</h1> </h1>
</div> </div>
@ -326,25 +325,25 @@ const status = ref({
<div class="info-7" v-if="eqStatus && line == '7'"> <div class="info-7" v-if="eqStatus && line == '7'">
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S5后储片台'] == 'error' ? '#ff3737' : status['S5后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S5后储片台 S5后储片台
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S4后储片台'] == 'error' ? '#ff3737' : status['S4后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S4后储片台 S4后储片台
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S3后储片台'] == 'error' ? '#ff3737' : status['S3后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S3后储片台 S3后储片台
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S5固化炉'] == 'error' ? '#ff3737' : status['S5固化炉'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S5固化炉 S5固化炉
</h1> </h1>
</div> </div>
@ -358,13 +357,13 @@ const status = ref({
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S3固化炉'] == 'error' ? '#ff3737' : status['S3固化炉'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S3固化炉 S3固化炉
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['B2前储片台'] == 'error' ? '#ff3737' : status['B2前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
B2前储片台 B2前储片台
</h1> </h1>
</div> </div>
@ -469,19 +468,19 @@ const status = ref({
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M1清洗机'] == 'error' ? '#ff3737' : status['M1清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S1前储片台'] == 'error' ? '#ff3737' : status['S1前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S1前储片台 S1前储片台
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M1清洗机'] == 'error' ? '#ff3737' : status['M1清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S2丝印机'] == 'error' ? '#ff3737' : status['S2丝印机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S2丝印机 S2丝印机
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['M1清洗机'] == 'error' ? '#ff3737' : status['M1清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S1丝印机'] == 'error' ? '#ff3737' : status['S1丝印机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S1丝印机 S1丝印机
</h1> </h1>
<span v-if="lines.g1?.silkInput">上片: {{ lines.g1.silkInput }}</span> <span v-if="lines.g1?.silkInput">上片: {{ lines.g1.silkInput }}</span>
@ -503,13 +502,13 @@ const status = ref({
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S7固化炉'] == 'error' ? '#ff3737' : status['S7固化炉'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S7固化炉 S7固化炉
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['S6固化炉'] == 'error' ? '#ff3737' : status['S6固化炉'] == 'warn' ? '#ffb524' : '#24ff5e'" />
S6固化炉 S6固化炉
</h1> </h1>
<span v-if="lines.g3?.solidificationInput">上片: {{ lines.g3.solidificationInput }}</span> <span v-if="lines.g3?.solidificationInput">上片: {{ lines.g3.solidificationInput }}</span>
@ -517,7 +516,7 @@ const status = ref({
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['B3前储片台'] == 'error' ? '#ff3737' : status['B3前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
B3前储片台 B3前储片台
</h1> </h1>
</div> </div>
@ -525,24 +524,25 @@ const status = ref({
<div class="info-12" v-if="eqStatus && line == '12'"> <div class="info-12" v-if="eqStatus && line == '12'">
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['B3前储片台'] == 'error' ? '#ff3737' : status['B3前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
B3前储片台 B3前储片台
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['B3清洗机'] == 'error' ? '#ff3737' : status['B3清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
B3清洗机 B3清洗机
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />B3下片 <Icon :color="status['B3下片'] == 'error' ? '#ff3737' : status['B3下片'] == 'warn' ? '#ffb524' : '#24ff5e'" />
B3下片
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<h1> <h1>
<Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" /> <Icon :color="status['B3后储片台'] == 'error' ? '#ff3737' : status['B3后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
B3后储片台 B3后储片台
</h1> </h1>
</div> </div>
@ -1056,4 +1056,5 @@ const status = ref({
background: url(../assets/model/F12.png) no-repeat; background: url(../assets/model/F12.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
}</style> }
</style>

32
src/pages/AlertListPage.vue
View File

@ -3,32 +3,26 @@
import { ref } from "vue"; import { ref } from "vue";
import { useWsStore } from "../store"; import { useWsStore } from "../store";
import Container from "../components/Base/Container.vue"; import Container from "../components/Base/Container.vue";
const alarmList = ref([]);
const store = useWsStore();
alarmList.value = (store.data1.alarmArrList ?? [ const store = useWsStore();
{ id: 1, equipmentName: 'hallo', alarmLevel: 1, alarmDetails: 'asdf', productLine: 'A001', segment: '2' }, const alarmList = ref((store.data1.alarmArrList || []).map((item, index) => ({
{ id: 1, equipmentName: 'fffff', alarmLevel: 1, alarmDetails: 'sda', productLine: 'A002', segment: '3' },
{ id: 1, equipmentName: 'aaaa', alarmLevel: 1, alarmDetails: 'dfd', productLine: 'A001', segment: '1' },
]).map((item, index) => ({
id: item.id, id: item.id,
eqName: item.equipmentName, eqName: item.equipmentName,
eqIndex: index + 1, eqIndex: index + 1,
alarmGrade: item.alarmLevel, alarmGrade: item.alarmLevel,
alarmDetail: item.alarmDetails, alarmDetail: item.alarmDetails,
position: `${item.productLine} - ${item.segment}`, position: `${item.productLine} - ${item.segment}`,
})); })));
store.$subscribe((mutation, state) => {
// store.$subscribe((mutation, state) => { alarmList.value = state.data1.alarmArrList.map((item, index) => ({
// alarmList.value = state.data1.alarmArrList.map((item, index) => ({ id: item.id,
// id: item.id, eqName: item.equipmentName,
// eqName: item.equipmentName, eqIndex: index + 1,
// eqIndex: index + 1, alarmGrade: item.alarmLevel,
// alarmGrade: item.alarmLevel, alarmDetail: item.alarmDetails,
// alarmDetail: item.alarmDetails, position: `${item.productLine} - ${item.segment}`,
// position: `${item.productLine} - ${item.segment}`, }));
// })); });
// });
// function handleIgnore() { // function handleIgnore() {
// alarmList.value.splice(0) // alarmList.value.splice(0)

4
src/pages/AnnouncementPage.vue
View File

@ -48,7 +48,7 @@ const handleClose = () => {
<button <button
id="return-btn" id="return-btn"
style=" style="
position: fixed; position: absolute;
right: 32px; right: 32px;
top: 56px; top: 56px;
appearance: none; appearance: none;
@ -80,6 +80,7 @@ const handleClose = () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: #f00; color: #f00;
position: relative;
} }
.announcement-title { .announcement-title {
@ -109,7 +110,6 @@ const handleClose = () => {
padding: 0 80px; padding: 0 80px;
line-height: 128px; line-height: 128px;
font-family: sans-serif; font-family: sans-serif;
position: relative;
user-select: none; user-select: none;
} }
</style> </style>

166
src/pages/eqMaps.js Normal file
View File

@ -0,0 +1,166 @@
export const initState = {
// 钢一线
M1上片: "",
M2上片: "",
M1磨边机: "",
M2磨边机: "",
M1清洗机: "",
M1清洗机: "",
S1丝印机: "",
S2丝印机: "",
S1前储片台: "",
S2前储片台: "",
S1清洗机: "",
S2清洗机: "",
Z1钻孔机: "",
Z2钻孔机: "",
B1前储片台: "",
B1后储片台: "",
B1下片: "",
B1清洗机: "",
//
M3清洗机: "",
M4清洗机: "",
M5清洗机: "",
M3磨边机: "",
M4磨边机: "",
M5磨边机: "",
M3上片: "",
M4上片: "",
M5上片: "",
Z3钻孔机: "",
Z4钻孔机: "",
Z5钻孔机: "",
S3清洗机: "",
S4清洗机: "",
S5清洗机: "",
S3前储片台: "",
S4前储片台: "",
S5前储片台: "",
S3丝印机: "",
S4丝印机: "",
S5丝印机: "",
S3固化机: "",
S4固化机: "",
S5固化机: "",
S3后储片台: "",
S4后储片台: "",
S5后储片台: "",
B2前储片台: "",
B2后储片台: "",
B2下片: "",
B2清洗机: "",
//
M6上片: "",
M7上片: "",
M6磨边机: "",
M7磨边机: "",
M6清洗机: "",
M7清洗机: "",
Z6钻孔机: "",
Z7钻孔机: "",
S6清洗机: "",
S7清洗机: "",
S6前储片台: "",
S7前储片台: "",
S6丝印机: "",
S7丝印机: "",
S6固化炉: "",
S7固化炉: "",
S6后储片台: "",
S7后储片台: "",
B3前储片台: "",
B3后储片台: "",
B3清洗机: "",
B3下片: "",
};
export const statusMap = [
"error", // 关机
"work", // 工作
"warn", // 未工作
"error", // 错误
];
export const eqMap = {
// 钢一线
C1LR1: "M1上片",
C1LR2: "M2上片",
C1MM1: "M1磨边机",
C1MM2: "M2磨边机",
C1ECM1: "M1清洗机",
C1ECM2: "M2清洗机",
"s1--": "S1丝印机",
"s2--": "S2丝印机",
C1ST1: "S1前储片台",
C1ST2: "S2前储片台",
C1SCM1: "S1清洗机",
C1SCM2: "S2清洗机",
C1HP1: "Z1钻孔机",
C1HP2: "Z2钻孔机",
C3ST1: "B1前储片台",
C3ST2: "B1后储片台",
C3UL1: "B1下片",
C3UL1: "B1下片1",
C3UL2: "B1下片2",
C3UCM1: "B1清洗机",
//
B1ECM1: "M3清洗机",
B1ECM2: "M4清洗机",
B1ECM3: "M5清洗机",
B1MM1: "M3磨边机",
B1MM2: "M4磨边机",
B1MM3: "M5磨边机",
B1LR1: "M3上片",
B1LR2: "M4上片",
B1LR3: "M5上片",
B1HP1: "Z3钻孔机",
B1HP2: "Z4钻孔机",
B1HP3: "Z5钻孔机",
B1SCM1: "S3清洗机",
B1SCM2: "S4清洗机",
B1SCM3: "S5清洗机",
B1ST1: "S3前储片台",
B1ST2: "S4前储片台",
B1ST3: "S5前储片台",
B1SP1: "S3丝印机",
B1SP2: "S4丝印机",
B1SP3: "S5丝印机",
B2CO1: "S3固化炉",
B2CO2: "S4固化炉",
B2CO3: "S5固化炉",
B2ST1: "S3后储片台",
B2ST2: "S4后储片台",
B2ST3: "S5后储片台",
B3ST1: "B2前储片台",
B3ST2: "B2后储片台",
B3UL1: "B2下片",
B3UL1: "B2下片1",
B3UL2: "B2下片2",
B3UCM1: "B2清洗机",
//
A1LR1: "M6上片",
A1LR2: "M7上片",
A1MM1: "M6磨边机",
A1MM2: "M7磨边机",
A1ECM1: "M6清洗机",
A1ECM2: "M7清洗机",
A1HP1: "Z6钻孔机",
A1HP2: "Z7钻孔机",
A1SCM1: "S6清洗机",
A1SCM2: "S7清洗机",
A1ST1: "S6前储片台",
A1ST2: "S7前储片台",
A1SP1: "S6丝印机",
A1SP2: "S7丝印机",
A2CO1: "S6固化炉",
A2CO2: "S7固化炉",
A2ST1: "S6后储片台",
A2ST2: "S7后储片台",
A3ST1: "B3前储片台",
A3ST2: "B3后储片台",
A3UCM1: "B3清洗机",
A3UL1: "B3下片",
A3UL1: "B3下片1",
A3UL2: "B3下片2",
};