|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div :key="viewKey" class="screen-container">
|
|
|
- <common-header title="工位任务分布" />
|
|
|
+ <common-header title="工位任务分布/防静电监控" />
|
|
|
<!-- <div
|
|
|
style="
|
|
|
width: 100vw;
|
|
@@ -18,7 +18,7 @@
|
|
|
/>
|
|
|
</div> -->
|
|
|
<div class="screen-content">
|
|
|
- <TransitionGroup class="rowbox" name="list1" tag="ul">
|
|
|
+ <!-- <TransitionGroup class="rowbox" name="list1" tag="ul">
|
|
|
<div v-for="(item, index) in showdatas1" :key="item" class="grid-item">
|
|
|
<title-header :title="item.stationName" />
|
|
|
<div class="grid-bottom">
|
|
@@ -61,6 +61,38 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </TransitionGroup> -->
|
|
|
+ <TransitionGroup class="rowbox itemBackgroud" name="list1" tag="ul">
|
|
|
+ <title-header :title="'防静电监控'" />
|
|
|
+ <div class="chartsCarouselBox">
|
|
|
+ <div class="carouselHeader tableStyle">
|
|
|
+ <div class="left center1Text">工位名称</div>
|
|
|
+ <div class="right center1Text">状态</div>
|
|
|
+ </div>
|
|
|
+ <div class="carouselBody">
|
|
|
+ <TransitionGroup name="list" tag="ul">
|
|
|
+ <li
|
|
|
+ class="carouselItem tableStyle"
|
|
|
+ :key="item"
|
|
|
+ v-for="item in showData1"
|
|
|
+ >
|
|
|
+ <div class="left infoBackgroud centerText textComent">
|
|
|
+ {{ item.stationName }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="{
|
|
|
+ outline: item.state === '离线',
|
|
|
+ error: item.state === '故障',
|
|
|
+ }"
|
|
|
+ class="right infoBackgroud centerText textComent"
|
|
|
+ style="font-weight: bolder"
|
|
|
+ >
|
|
|
+ {{ item.state }}
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </TransitionGroup>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</TransitionGroup>
|
|
|
<TransitionGroup class="rowbox" name="list2" tag="ul">
|
|
|
<div v-for="(item, index) in showdatas2" :key="item" class="grid-item">
|
|
@@ -157,7 +189,8 @@
|
|
|
<script setup>
|
|
|
import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
|
|
|
import TitleHeader from "@/views/report/statistics/screens/titleHeader.vue";
|
|
|
-import { getStationTaskInfo } from "@/api/bigScreen";
|
|
|
+import { getStationTaskInfo, getStationState } from "@/api/bigScreen";
|
|
|
+const showData1 = ref([]);
|
|
|
const fontSize = ref(0);
|
|
|
const setPondNumber = (str) => {
|
|
|
const number = Number(str).toFixed(2);
|
|
@@ -176,7 +209,7 @@ const setFontSize = () => {
|
|
|
fontSize.value = (window.innerHeight / 100) * 4;
|
|
|
};
|
|
|
const datas = ref([]);
|
|
|
-const showdatas1 = ref([]);
|
|
|
+// const showdatas1 = ref([]);
|
|
|
const showdatas2 = ref([]);
|
|
|
const showdatas3 = ref([]);
|
|
|
const getData = async () => {
|
|
@@ -189,38 +222,58 @@ const getData = async () => {
|
|
|
};
|
|
|
const interval1 = ref(null);
|
|
|
const sum1 = ref(1);
|
|
|
+const sum2 = ref(1);
|
|
|
+const data1 = ref([]);
|
|
|
+const getData1 = async () => {
|
|
|
+ const { data } = await getStationState();
|
|
|
+ data1.value = data.stationState;
|
|
|
+};
|
|
|
+const setShowData1 = (num, time) => {
|
|
|
+ sum2.value = num;
|
|
|
+ if (data1.value.length > num) {
|
|
|
+ const dataA = JSON.parse(JSON.stringify(data1.value));
|
|
|
+ showData1.value = dataA.splice(0, num);
|
|
|
+ interval1.value = setInterval(async () => {
|
|
|
+ await showData1.value.push(data1.value[sum2.value % data1.value.length]);
|
|
|
+ showData1.value.splice(0, 1);
|
|
|
+ sum2.value = sum2.value + 1;
|
|
|
+ }, time);
|
|
|
+ } else {
|
|
|
+ showData1.value = data1.value;
|
|
|
+ }
|
|
|
+};
|
|
|
const setShowDatas = async (time) => {
|
|
|
- if (datas.value.length > 9) {
|
|
|
- const dataA = JSON.parse(JSON.stringify(datas.value));
|
|
|
+ if (datas.value.length > 6) {
|
|
|
+ // const dataA = JSON.parse(JSON.stringify(datas.value));
|
|
|
const dataB = JSON.parse(JSON.stringify(datas.value));
|
|
|
const dataC = JSON.parse(JSON.stringify(datas.value));
|
|
|
- showdatas1.value = dataA.splice(0, 3);
|
|
|
- showdatas2.value = dataB.splice(3, 3);
|
|
|
- showdatas3.value = dataC.splice(6, 3);
|
|
|
+ // showdatas1.value = dataA.splice(0, 3);
|
|
|
+ showdatas2.value = dataB.splice(0, 3);
|
|
|
+ showdatas3.value = dataC.splice(3, 3);
|
|
|
setNumber(1750);
|
|
|
interval1.value = setInterval(async () => {
|
|
|
- showdatas1.value.push(
|
|
|
- datas.value[(sum1.value + 2) % (datas.value.length - 1)]
|
|
|
- );
|
|
|
+ // showdatas1.value.push(
|
|
|
+ // datas.value[(sum1.value + 2) % (datas.value.length - 1)]
|
|
|
+ // );
|
|
|
showdatas2.value.push(
|
|
|
- datas.value[(sum1.value + 5) % (datas.value.length - 1)]
|
|
|
+ datas.value[(sum1.value + 2) % (datas.value.length - 1)]
|
|
|
);
|
|
|
showdatas3.value.push(
|
|
|
- datas.value[(sum1.value + 8) % (datas.value.length - 1)]
|
|
|
+ datas.value[(sum1.value + 5) % (datas.value.length - 1)]
|
|
|
);
|
|
|
- showdatas1.value.splice(0, 1);
|
|
|
+ // showdatas1.value.splice(0, 1);
|
|
|
showdatas2.value.splice(0, 1);
|
|
|
showdatas3.value.splice(0, 1);
|
|
|
setNumber(0);
|
|
|
sum1.value = sum1.value + 1;
|
|
|
}, time);
|
|
|
} else {
|
|
|
- const dataA = JSON.parse(JSON.stringify(datas.value));
|
|
|
+ // const dataA = JSON.parse(JSON.stringify(datas.value));
|
|
|
const dataB = JSON.parse(JSON.stringify(datas.value));
|
|
|
const dataC = JSON.parse(JSON.stringify(datas.value));
|
|
|
- showdatas1.value = dataA.splice(0, 3);
|
|
|
- showdatas2.value = dataB.splice(3, 3);
|
|
|
- showdatas3.value = dataC.splice(6, 3);
|
|
|
+ // showdatas1.value = dataA.splice(0, 3);
|
|
|
+ showdatas2.value = dataB.splice(0, 3);
|
|
|
+ showdatas3.value = dataC.splice(3, 3);
|
|
|
setNumber(2000);
|
|
|
}
|
|
|
};
|
|
@@ -352,12 +405,12 @@ const setTimeOutFnc = (array, num, time) => {
|
|
|
}, time);
|
|
|
};
|
|
|
const setNumber = (time) => {
|
|
|
- if (showdatas1.value.length > 0) {
|
|
|
- showdatas1.value.forEach((item, index) => {
|
|
|
- setTimeOutFnc(completeNumConfigs.value[index], item.completeNum, time);
|
|
|
- setTimeOutFnc(taskNumConfigs.value[index], item.taskNum, time);
|
|
|
- });
|
|
|
- }
|
|
|
+ // if (showdatas1.value.length > 0) {
|
|
|
+ // showdatas1.value.forEach((item, index) => {
|
|
|
+ // setTimeOutFnc(completeNumConfigs.value[index], item.completeNum, time);
|
|
|
+ // setTimeOutFnc(taskNumConfigs.value[index], item.taskNum, time);
|
|
|
+ // });
|
|
|
+ // }
|
|
|
if (showdatas2.value.length > 0) {
|
|
|
showdatas2.value.forEach((item, index) => {
|
|
|
setTimeOutFnc(
|
|
@@ -391,6 +444,8 @@ onMounted(async () => {
|
|
|
window.addEventListener("resize", checkFullscreen);
|
|
|
setFontSize();
|
|
|
await getData();
|
|
|
+ await getData1();
|
|
|
+ setShowData1(17, 2000);
|
|
|
setShowDatas(5000);
|
|
|
});
|
|
|
onUnmounted(() => {
|
|
@@ -399,7 +454,102 @@ onUnmounted(() => {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.outline {
|
|
|
+ background-color: rgb(80, 83, 90) !important;
|
|
|
+}
|
|
|
+.error {
|
|
|
+ background-color: rgb(219, 72, 72) !important;
|
|
|
+}
|
|
|
+.centerText {
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ font-size: 1.7vh;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 0.3vh;
|
|
|
+ font-weight: 100 !important;
|
|
|
+}
|
|
|
+.textComent {
|
|
|
+ white-space: nowrap; /* 不允许换行 */
|
|
|
+ overflow: hidden; /* 超出长度时隐藏 */
|
|
|
+ text-overflow: ellipsis; /* 超出部分显示省略号 */
|
|
|
+}
|
|
|
+.itemBackgroud {
|
|
|
+ background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ padding: 2vh;
|
|
|
+ border-radius: 2vh;
|
|
|
+}
|
|
|
+.infoBackgroud {
|
|
|
+ background-color: rgba(255, 255, 255, 0.05);
|
|
|
+}
|
|
|
+.tableStyle {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 30vw;
|
|
|
+ .left {
|
|
|
+ width: 83%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ width: 16%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.center1Text {
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ font-size: 1.7vh;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 0.3vh;
|
|
|
+}
|
|
|
+.chartsCarouselBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+ .carouselHeader {
|
|
|
+ height: calc(2vh);
|
|
|
+ line-height: 2vh;
|
|
|
+ margin-bottom: 0.5vh;
|
|
|
+ }
|
|
|
+ .carouselBody {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ overflow: hidden;
|
|
|
+ .carouselItem {
|
|
|
+ margin-bottom: 0.5vh;
|
|
|
+ height: 3.9vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.infoItemBody {
|
|
|
+ width: 100%;
|
|
|
+ height: 60%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 0.8vw;
|
|
|
+ .chartsBox {
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+}
|
|
|
//动画配置
|
|
|
+.list-move,
|
|
|
+.list-enter-active,
|
|
|
+.list-leave-active {
|
|
|
+ transition: all 1s ease;
|
|
|
+}
|
|
|
+.list-enter-from,
|
|
|
+.list-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ transform: scaleY(0) translateY(-4.6vh);
|
|
|
+}
|
|
|
+.list-leave-active {
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
.list1-move,
|
|
|
.list1-enter-active {
|
|
|
transition: all 0.75s ease;
|
|
@@ -485,6 +635,7 @@ onUnmounted(() => {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
.grid-item {
|
|
|
height: 100%;
|
|
@@ -495,7 +646,6 @@ onUnmounted(() => {
|
|
|
padding: 2vh 1vh;
|
|
|
width: 31vw;
|
|
|
height: 25vh;
|
|
|
- margin-bottom: 3vh;
|
|
|
|
|
|
.grid-bottom {
|
|
|
display: flex;
|