|
|
|
|
@ -20,11 +20,11 @@
|
|
|
|
|
</template>
|
|
|
|
|
</q-table> -->
|
|
|
|
|
|
|
|
|
|
<div class="col-xs-2 col-xl-2 col-lg-2 col-sm-2">
|
|
|
|
|
<div class="col-xs-6 col-xl-6 col-lg-6 col-sm-6">
|
|
|
|
|
<q-card class="my-card">
|
|
|
|
|
<q-card-section class="row q-pa-xs">
|
|
|
|
|
<template v-for="(item, index) in list1" v-bind:key="item">
|
|
|
|
|
<div class="q-pa-xs col-xs-12 col-xl-12 col-lg-12 col-sm-12">
|
|
|
|
|
<template v-for="(item, index) in BalzersList" v-bind:key="item">
|
|
|
|
|
<div class="q-pa-xs col-xs-4 col-xl-4 col-lg-4 col-sm-4">
|
|
|
|
|
<q-card :class="'my-card no-shadow ' + helper.getEquipmentStateColor(item.state)"
|
|
|
|
|
:bordered="item.id != ''" :flat="item.id == ''" style="height:70px;">
|
|
|
|
|
<q-card-section>
|
|
|
|
|
@ -47,16 +47,16 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</q-card-section>
|
|
|
|
|
<q-card-section>
|
|
|
|
|
<!-- <q-card-section>
|
|
|
|
|
<div class="text-h6 text-weight-bold text-center ">第四涂层室</div>
|
|
|
|
|
</q-card-section>
|
|
|
|
|
</q-card-section> -->
|
|
|
|
|
</q-card>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xs-3 col-xl-3 col-lg-3 col-sm-3">
|
|
|
|
|
<div class="col-xs-2 col-xl-2 col-lg-2 col-sm-2">
|
|
|
|
|
<q-card class="my-card">
|
|
|
|
|
<q-card-section class="row q-pa-xs">
|
|
|
|
|
<template v-for="(item, index) in list2" v-bind:key="item">
|
|
|
|
|
<div class="q-pa-xs col-xs-6 col-xl-6 col-lg-6 col-sm-6">
|
|
|
|
|
<div class="q-pa-xs col-xs-12 col-xl-12 col-lg-12 col-sm-12">
|
|
|
|
|
<q-card :class="'my-card no-shadow ' + helper.getEquipmentStateColor(item.state)"
|
|
|
|
|
:bordered="item.id != ''" :flat="item.id == ''" style="height:70px;">
|
|
|
|
|
<q-card-section class="col-xs-3 col-xl-3 col-lg-4 col-sm-12 ">
|
|
|
|
|
@ -79,12 +79,12 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</q-card-section>
|
|
|
|
|
<q-card-section>
|
|
|
|
|
<!-- <q-card-section>
|
|
|
|
|
<div class=" text-h6 text-weight-bold text-center ">第三涂层室</div>
|
|
|
|
|
</q-card-section>
|
|
|
|
|
</q-card-section> -->
|
|
|
|
|
</q-card>
|
|
|
|
|
</div>
|
|
|
|
|
<div class=" col-xs-3 col-xl-3 col-lg-3 col-sm-3">
|
|
|
|
|
<div class=" col-xs-4 col-xl-4 col-lg-4 col-sm-4">
|
|
|
|
|
<q-card class="my-card">
|
|
|
|
|
<q-card-section class="row q-pa-xs">
|
|
|
|
|
<template v-for="(item, index) in list3" v-bind:key="item">
|
|
|
|
|
@ -112,13 +112,13 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</q-card-section>
|
|
|
|
|
<q-card-section>
|
|
|
|
|
<!-- <q-card-section>
|
|
|
|
|
<div class="text-h6 text-weight-bold text-center ">
|
|
|
|
|
第二涂层室</div>
|
|
|
|
|
</q-card-section>
|
|
|
|
|
</q-card-section> -->
|
|
|
|
|
</q-card>
|
|
|
|
|
</div>
|
|
|
|
|
<div class=" col-xs-4 col-xl-4 col-lg-4 col-sm-4">
|
|
|
|
|
<!-- <div class=" col-xs-4 col-xl-4 col-lg-4 col-sm-4">
|
|
|
|
|
<q-card class="my-card">
|
|
|
|
|
<q-card-section class="row q-pa-xs">
|
|
|
|
|
<template v-for="(item, index) in list4" v-bind:key="item">
|
|
|
|
|
@ -151,7 +151,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
</q-card-section>
|
|
|
|
|
</q-card>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</q-card-section>
|
|
|
|
|
@ -163,53 +163,68 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
|
|
|
|
import { Screen } from 'quasar';
|
|
|
|
|
import viewDialog from './components/viewDialog.vue';
|
|
|
|
|
import { equipmentApi } from 'src/api/equipment/equipmentApi'
|
|
|
|
|
import { EquipmentSearchEntity } from 'src/api/equipment/model/equipment'
|
|
|
|
|
import helper from 'src/Utils/helper'
|
|
|
|
|
import screen3_1 from 'src/json/screen3_1.json'
|
|
|
|
|
import screen3_2 from 'src/json/screen3_2.json'
|
|
|
|
|
import screen3_3 from 'src/json/screen3_3.json'
|
|
|
|
|
import screen3_4 from 'src/json/screen3_4.json'
|
|
|
|
|
// import screen3_1 from 'src/json/screen3_1.json'
|
|
|
|
|
// import screen3_2 from 'src/json/screen3_2.json'
|
|
|
|
|
// import screen3_3 from 'src/json/screen3_3.json'
|
|
|
|
|
// import screen3_4 from 'src/json/screen3_4.json'
|
|
|
|
|
|
|
|
|
|
//公共
|
|
|
|
|
const loading = ref(false);
|
|
|
|
|
const columns = ref([
|
|
|
|
|
{
|
|
|
|
|
name: 'index',
|
|
|
|
|
label: '#',
|
|
|
|
|
field: 'index',
|
|
|
|
|
align: 'center',
|
|
|
|
|
headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'name',
|
|
|
|
|
align: 'center',
|
|
|
|
|
label: '设备名称',
|
|
|
|
|
field: 'name',
|
|
|
|
|
headerClasses: 'text-h4 text-weight-bold',
|
|
|
|
|
headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
|
|
|
|
|
},
|
|
|
|
|
{ name: 'calories', align: 'center', label: '设备类型', field: 'calories', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
|
|
|
|
|
{ name: 'state', align: 'center', label: '运行状态', field: 'state', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
|
|
|
|
|
{ name: 'start', align: 'center', label: '启动时间', field: 'start', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
|
|
|
|
|
{ name: 'end', align: 'center', label: '停止时间', field: 'end', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
|
|
|
|
|
{ name: 'total', align: 'center', label: '累计运行时间', field: 'total', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
|
|
|
|
|
])
|
|
|
|
|
// const loading = ref(false);
|
|
|
|
|
// const columns = ref([
|
|
|
|
|
// {
|
|
|
|
|
// name: 'index',
|
|
|
|
|
// label: '序号',
|
|
|
|
|
// field: 'index',
|
|
|
|
|
// align: 'center',
|
|
|
|
|
// headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// name: 'name',
|
|
|
|
|
// align: 'center',
|
|
|
|
|
// label: '设备名称',
|
|
|
|
|
// field: 'name',
|
|
|
|
|
// headerClasses: 'text-h4 text-weight-bold',
|
|
|
|
|
// headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
|
|
|
|
|
// },
|
|
|
|
|
// { name: 'calories', align: 'center', label: '设备类型', field: 'calories', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
|
|
|
|
|
// { name: 'state', align: 'center', label: '运行状态', field: 'state', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
|
|
|
|
|
// { name: 'start', align: 'center', label: '启动时间', field: 'start', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
|
|
|
|
|
// { name: 'end', align: 'center', label: '停止时间', field: 'end', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
|
|
|
|
|
// { name: 'total', align: 'center', label: '累计运行时间', field: 'total', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
|
|
|
|
|
// ])
|
|
|
|
|
|
|
|
|
|
const list1 = ref();
|
|
|
|
|
const BalzersList = ref();
|
|
|
|
|
const list2 = ref();
|
|
|
|
|
const list3 = ref();
|
|
|
|
|
const list4 = ref();
|
|
|
|
|
const equipmentSearchEntity = ref(new EquipmentSearchEntity());
|
|
|
|
|
let equipmentListTimer: NodeJS.Timer | null = null; // 设备列表
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
EquipmentList();
|
|
|
|
|
// 设置10秒刷新一次
|
|
|
|
|
equipmentListTimer = setInterval(() => {
|
|
|
|
|
EquipmentList();
|
|
|
|
|
}, 10000);
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
|
// 清理定时器要处理 timer 的类型
|
|
|
|
|
clearInterval(Number(equipmentListTimer))
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const EquipmentList = () => {
|
|
|
|
|
let Coating1 = [] as any
|
|
|
|
|
let Coating2 = [] as any
|
|
|
|
|
let Coating3 = [] as any
|
|
|
|
|
let Coating4 = [] as any
|
|
|
|
|
let BalzersCoating = [] as any
|
|
|
|
|
let templateJSON = {
|
|
|
|
|
id: '',
|
|
|
|
|
equipmentCode: null,
|
|
|
|
|
@ -226,17 +241,17 @@ onMounted(() => {
|
|
|
|
|
res.forEach((item: any) => {
|
|
|
|
|
if (item.remark == '第一涂层室') {
|
|
|
|
|
Coating1.push(item);
|
|
|
|
|
} else if (item.remark == '第二涂层室') {
|
|
|
|
|
} else if (item.remark == 'CemeCon') {
|
|
|
|
|
Coating2.push(item);
|
|
|
|
|
} else if (item.remark == '第三涂层室') {
|
|
|
|
|
} else if (item.remark == 'Ionbond') {
|
|
|
|
|
Coating3.push(item);
|
|
|
|
|
} else if (item.remark == '第四涂层室') {
|
|
|
|
|
Coating4.push(item);
|
|
|
|
|
} else if (item.remark == 'Balzers') {
|
|
|
|
|
BalzersCoating.push(item);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 第一涂层室
|
|
|
|
|
Coating1.sort((a, b) => a.ordrNo - b.ordrNo);
|
|
|
|
|
Coating1.sort((a: any, b: any) => a.ordrNo - b.ordrNo);
|
|
|
|
|
let Coating1Val = [] as any
|
|
|
|
|
for (let i = 1; i <= 14; i++) {
|
|
|
|
|
for (let j = 0; j < Coating1.length; j++) {
|
|
|
|
|
@ -257,9 +272,9 @@ onMounted(() => {
|
|
|
|
|
list4.value = Coating1Val //obj4
|
|
|
|
|
|
|
|
|
|
// 第二涂层室
|
|
|
|
|
Coating2.sort((a, b) => a.ordrNo - b.ordrNo);
|
|
|
|
|
Coating2.sort((a: any, b: any) => a.ordrNo - b.ordrNo);
|
|
|
|
|
let Coating2Val = [] as any
|
|
|
|
|
for (let i = 1; i <= 14; i++) {
|
|
|
|
|
for (let i = 1; i <= 18; i++) {
|
|
|
|
|
for (let j = 0; j < Coating2.length; j++) {
|
|
|
|
|
if (Coating2[j].ordrNo == i) {
|
|
|
|
|
Coating2Val.push(Coating2[j])
|
|
|
|
|
@ -283,9 +298,9 @@ onMounted(() => {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 第三涂层室
|
|
|
|
|
Coating3.sort((a, b) => a.ordrNo - b.ordrNo);
|
|
|
|
|
Coating3.sort((a: any, b: any) => a.ordrNo - b.ordrNo);
|
|
|
|
|
let Coating3Val = [] as any
|
|
|
|
|
for (let i = 1; i <= 14; i++) {
|
|
|
|
|
for (let i = 1; i <= 9; i++) {
|
|
|
|
|
for (let j = 0; j < Coating3.length; j++) {
|
|
|
|
|
if (Coating3[j].ordrNo == i) {
|
|
|
|
|
Coating3Val.push(Coating3[j])
|
|
|
|
|
@ -306,17 +321,17 @@ onMounted(() => {
|
|
|
|
|
// obj2.splice(11, 0, templateJSON);
|
|
|
|
|
list2.value = Coating3Val //obj2
|
|
|
|
|
|
|
|
|
|
// 第四涂层室
|
|
|
|
|
Coating4.sort((a, b) => a.ordrNo - b.ordrNo);
|
|
|
|
|
let Coating4Val = [] as any
|
|
|
|
|
for (let i = 1; i <= 14; i++) {
|
|
|
|
|
for (let j = 0; j < Coating4.length; j++) {
|
|
|
|
|
if (Coating4[j].ordrNo == i) {
|
|
|
|
|
Coating4Val.push(Coating4[j])
|
|
|
|
|
Coating4.splice(j, 1);
|
|
|
|
|
// 第四涂层室 Balzers
|
|
|
|
|
BalzersCoating.sort((a: any, b: any) => a.ordrNo - b.ordrNo);
|
|
|
|
|
let BalzersCoatingVal = [] as any
|
|
|
|
|
for (let i = 1; i <= 27; i++) {
|
|
|
|
|
for (let j = 0; j < BalzersCoating.length; j++) {
|
|
|
|
|
if (BalzersCoating[j].ordrNo == i) {
|
|
|
|
|
BalzersCoatingVal.push(BalzersCoating[j])
|
|
|
|
|
BalzersCoating.splice(j, 1);
|
|
|
|
|
break
|
|
|
|
|
} else {
|
|
|
|
|
Coating4Val.push(templateJSON)
|
|
|
|
|
BalzersCoatingVal.push(templateJSON)
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -326,12 +341,10 @@ onMounted(() => {
|
|
|
|
|
// obj1.splice(0, 0, templateJSON, templateJSON);
|
|
|
|
|
// obj1.splice(3, 0, templateJSON);
|
|
|
|
|
// obj1.splice(5, 0, templateJSON);
|
|
|
|
|
list1.value = Coating4Val // obj1
|
|
|
|
|
BalzersList.value = BalzersCoatingVal // obj1
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const viewRef = ref();
|
|
|
|
|
const openView = (e: any) => {
|
|
|
|
|
|
liuhr
2 years ago