|
@@ -1,48 +1,156 @@
|
|
|
<template>
|
|
|
<div class="screen-container">
|
|
|
<common-header title="工位任务分布" />
|
|
|
- <TransitionGroup name="list" tag="ul" class="screen-content">
|
|
|
- <li v-for="(item, index) in showdatas" :key="item" class="grid-item">
|
|
|
- <title-header :title="item.stationName" />
|
|
|
- <div class="grid-bottom">
|
|
|
- <div class="left-info">
|
|
|
- <div
|
|
|
- class="box"
|
|
|
- style="
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- "
|
|
|
- >
|
|
|
- <div class="title">{{ item.materialName }}</div>
|
|
|
- <div class="code">{{ item.materialModel }}</div>
|
|
|
+ <!-- <div
|
|
|
+ style="
|
|
|
+ width: 100vw;
|
|
|
+ height: 92vh;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <dv-border-box1
|
|
|
+ ref="borderRef"
|
|
|
+ style="width: 66.6%; height: 66.6%; position: absolute"
|
|
|
+ :style="{ transform: 'scale(' + 1.5 + ')' }"
|
|
|
+ />
|
|
|
+ </div> -->
|
|
|
+ <div class="screen-content">
|
|
|
+ <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">
|
|
|
+ <div class="left-info">
|
|
|
+ <div
|
|
|
+ class="box"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="title">{{ item.materialName }}</div>
|
|
|
+ <div class="code">{{ item.materialModel }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <dv-digital-flop
|
|
|
+ :config="completeNumConfigs[index]"
|
|
|
+ class="flop"
|
|
|
+ />
|
|
|
+ <span class="plan-num">/</span>
|
|
|
+ <dv-digital-flop
|
|
|
+ :config="taskNumConfigs[index]"
|
|
|
+ class="flop"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="desc">完成数量 / 计划数量</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-chart">
|
|
|
+ <dv-water-level-pond
|
|
|
+ :config="{
|
|
|
+ data: [setPondNumber(item.rate)],
|
|
|
+ shape: 'round',
|
|
|
+ }"
|
|
|
+ :key="sum1"
|
|
|
+ style="width: 16vh; height: 16vh"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="box">
|
|
|
- <div style="display: flex; align-items: center">
|
|
|
- <!-- <span class="com-num">{{ item.num }}</span> -->
|
|
|
- <dv-digital-flop
|
|
|
- :config="completeNumConfigs[index]"
|
|
|
- class="flop"
|
|
|
- />
|
|
|
- <span class="plan-num">/</span>
|
|
|
- <dv-digital-flop :config="taskNumConfigs[index]" class="flop" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </TransitionGroup>
|
|
|
+ <TransitionGroup class="rowbox" name="list2" tag="ul">
|
|
|
+ <div v-for="(item, index) in showdatas2" :key="item" class="grid-item">
|
|
|
+ <title-header :title="item.stationName" />
|
|
|
+ <div class="grid-bottom">
|
|
|
+ <div class="left-info">
|
|
|
+ <div
|
|
|
+ class="box"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="title">{{ item.materialName }}</div>
|
|
|
+ <div class="code">{{ item.materialModel }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <dv-digital-flop
|
|
|
+ :config="completeNumConfigs[index]"
|
|
|
+ class="flop"
|
|
|
+ />
|
|
|
+ <span class="plan-num">/</span>
|
|
|
+ <dv-digital-flop
|
|
|
+ :config="taskNumConfigs[index]"
|
|
|
+ class="flop"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="desc">完成数量 / 计划数量</div>
|
|
|
</div>
|
|
|
- <div class="desc">完成数量 / 计划数量</div>
|
|
|
+ </div>
|
|
|
+ <div class="right-chart">
|
|
|
+ <dv-water-level-pond
|
|
|
+ :config="{
|
|
|
+ data: [setPondNumber(item.rate)],
|
|
|
+ shape: 'round',
|
|
|
+ }"
|
|
|
+ :key="sum1"
|
|
|
+ style="width: 16vh; height: 16vh"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="right-chart">
|
|
|
- <dv-water-level-pond
|
|
|
- :config="{
|
|
|
- data: [setPondNumber(item.rate)],
|
|
|
- shape: 'round',
|
|
|
- }"
|
|
|
- :key="sum1"
|
|
|
- style="width: 16vh; height: 16vh"
|
|
|
- />
|
|
|
+ </div>
|
|
|
+ </TransitionGroup>
|
|
|
+ <TransitionGroup class="rowbox" name="list3" tag="ul">
|
|
|
+ <div v-for="(item, index) in showdatas3" :key="item" class="grid-item">
|
|
|
+ <title-header :title="item.stationName" />
|
|
|
+ <div class="grid-bottom">
|
|
|
+ <div class="left-info">
|
|
|
+ <div
|
|
|
+ class="box"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="title">{{ item.materialName }}</div>
|
|
|
+ <div class="code">{{ item.materialModel }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <dv-digital-flop
|
|
|
+ :config="completeNumConfigs[index]"
|
|
|
+ class="flop"
|
|
|
+ />
|
|
|
+ <span class="plan-num">/</span>
|
|
|
+ <dv-digital-flop
|
|
|
+ :config="taskNumConfigs[index]"
|
|
|
+ class="flop"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="desc">完成数量 / 计划数量</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-chart">
|
|
|
+ <dv-water-level-pond
|
|
|
+ :config="{
|
|
|
+ data: [setPondNumber(item.rate)],
|
|
|
+ shape: 'round',
|
|
|
+ }"
|
|
|
+ :key="sum1"
|
|
|
+ style="width: 16vh; height: 16vh"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </li>
|
|
|
- </TransitionGroup>
|
|
|
+ </TransitionGroup>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -51,7 +159,6 @@ import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
|
|
|
import TitleHeader from "@/views/report/statistics/screens/titleHeader.vue";
|
|
|
import { getStationTaskInfo } from "@/api/bigScreen";
|
|
|
const fontSize = ref(0);
|
|
|
-
|
|
|
const setPondNumber = (str) => {
|
|
|
const number = Number(str).toFixed(2);
|
|
|
if (number == 1) {
|
|
@@ -69,27 +176,38 @@ const setFontSize = () => {
|
|
|
fontSize.value = (window.innerHeight / 100) * 4;
|
|
|
};
|
|
|
const datas = ref([]);
|
|
|
-const showdatas = ref([]);
|
|
|
+const showdatas1 = ref([]);
|
|
|
+const showdatas2 = ref([]);
|
|
|
+const showdatas3 = ref([]);
|
|
|
const getData = async () => {
|
|
|
const { data } = await getStationTaskInfo();
|
|
|
- datas.value = [...data, ...data];
|
|
|
+ datas.value = [...data];
|
|
|
};
|
|
|
const interval1 = ref(null);
|
|
|
const sum1 = ref(1);
|
|
|
-const setShowDatas = async (time, num) => {
|
|
|
+const setShowDatas = async (time) => {
|
|
|
if (datas.value.length > 9) {
|
|
|
- sum1.value = num;
|
|
|
const dataA = JSON.parse(JSON.stringify(datas.value));
|
|
|
- showdatas.value = dataA.splice(0, num);
|
|
|
- setNumber(2000);
|
|
|
+ showdatas1.value = dataA.splice(0, 3);
|
|
|
+ showdatas2.value = dataA.splice(3, 3);
|
|
|
+ showdatas3.value = dataA.splice(6, 3);
|
|
|
+ setNumber(1750);
|
|
|
interval1.value = setInterval(async () => {
|
|
|
- await showdatas.value.push(datas.value[sum1.value % datas.value.length]);
|
|
|
- showdatas.value.splice(0, 1);
|
|
|
+ showdatas1.value.push(datas.value[sum1.value + (2 % datas.value.length)]);
|
|
|
+ showdatas2.value.push(datas.value[sum1.value + (5 % datas.value.length)]);
|
|
|
+ showdatas3.value.push(datas.value[sum1.value + (9 % datas.value.length)]);
|
|
|
+ showdatas1.value.splice(0, 1);
|
|
|
+ showdatas2.value.splice(0, 1);
|
|
|
+ showdatas3.value.splice(0, 1);
|
|
|
setNumber(0);
|
|
|
sum1.value = sum1.value + 1;
|
|
|
}, time);
|
|
|
} else {
|
|
|
- showdatas.value = datas.value.value;
|
|
|
+ const dataA = JSON.parse(JSON.stringify(datas.value));
|
|
|
+ showdatas1.value = dataA.splice(0, 3);
|
|
|
+ showdatas2.value = dataA.splice(3, 3);
|
|
|
+ showdatas3.value = dataA.splice(6, 3);
|
|
|
+ setNumber(1750);
|
|
|
}
|
|
|
};
|
|
|
const completeNumConfigs = ref([
|
|
@@ -220,10 +338,18 @@ const setTimeOutFnc = (array, num, time) => {
|
|
|
}, time);
|
|
|
};
|
|
|
const setNumber = (time) => {
|
|
|
- showdatas.value.forEach((item, index) => {
|
|
|
+ showdatas1.value.forEach((item, index) => {
|
|
|
setTimeOutFnc(completeNumConfigs.value[index], item.completeNum, time);
|
|
|
setTimeOutFnc(taskNumConfigs.value[index], item.taskNum, time);
|
|
|
});
|
|
|
+ showdatas2.value.forEach((item, index) => {
|
|
|
+ setTimeOutFnc(completeNumConfigs.value[index + 3], item.completeNum, time);
|
|
|
+ setTimeOutFnc(taskNumConfigs.value[index + 3], item.taskNum, time);
|
|
|
+ });
|
|
|
+ showdatas3.value.forEach((item, index) => {
|
|
|
+ setTimeOutFnc(completeNumConfigs.value[index + 6], item.completeNum, time);
|
|
|
+ setTimeOutFnc(taskNumConfigs.value[index + 6], item.taskNum, time);
|
|
|
+ });
|
|
|
};
|
|
|
onUnmounted(() => {
|
|
|
if (interval1.value) {
|
|
@@ -233,29 +359,66 @@ onUnmounted(() => {
|
|
|
onMounted(async () => {
|
|
|
setFontSize();
|
|
|
await getData();
|
|
|
- setShowDatas(10000, 9);
|
|
|
+ setShowDatas(15000);
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.list-move,
|
|
|
-.list-enter-active {
|
|
|
+//动画配置
|
|
|
+.list1-move,
|
|
|
+.list1-enter-active {
|
|
|
+ transition: all 0.75s ease;
|
|
|
+}
|
|
|
+.list1-leave-active {
|
|
|
transition: all 2s ease;
|
|
|
}
|
|
|
-.list-leave-active {
|
|
|
+.list1-enter-from {
|
|
|
+ transform: translateX(80vw);
|
|
|
+}
|
|
|
+.list1-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateX(-40vw);
|
|
|
+}
|
|
|
+.list1-leave-active {
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+.list2-move,
|
|
|
+.list2-enter-active {
|
|
|
+ transition: all 1.25s ease;
|
|
|
+}
|
|
|
+.list2-leave-active {
|
|
|
transition: all 2s ease;
|
|
|
}
|
|
|
-.list-enter-from {
|
|
|
+.list2-enter-from {
|
|
|
+ transform: translateX(60vw);
|
|
|
+}
|
|
|
+.list2-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ height: 0;
|
|
|
+ transform: translateY(-40vh);
|
|
|
+}
|
|
|
+.list2-leave-active {
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+.list3-move,
|
|
|
+.list3-enter-active {
|
|
|
+ transition: all 1.75s ease;
|
|
|
+}
|
|
|
+.list3-leave-active {
|
|
|
+ transition: all 2s ease;
|
|
|
+}
|
|
|
+.list3-enter-from {
|
|
|
transform: translateX(40vw);
|
|
|
}
|
|
|
-.list-leave-to {
|
|
|
+.list3-leave-to {
|
|
|
opacity: 0;
|
|
|
height: 0;
|
|
|
- transform: translateX(-40vw);
|
|
|
+ transform: translateX(40vw);
|
|
|
}
|
|
|
-.list-leave-active {
|
|
|
+.list3-leave-active {
|
|
|
position: absolute;
|
|
|
}
|
|
|
+//动画配置--
|
|
|
:deep(.dv-water-pond-level) {
|
|
|
text {
|
|
|
font-size: 4vh;
|
|
@@ -276,19 +439,26 @@ onMounted(async () => {
|
|
|
font-size: 4vh;
|
|
|
}
|
|
|
.screen-content {
|
|
|
- height: 88vh;
|
|
|
+ height: 84vh;
|
|
|
margin-top: 2vh;
|
|
|
- padding: 0 2vh;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
flex-wrap: wrap;
|
|
|
+ padding: 0 2vh;
|
|
|
+ .rowbox {
|
|
|
+ width: 32vw;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
.grid-item {
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
border-radius: 2vh;
|
|
|
- padding: 2vh;
|
|
|
+ padding: 2vh 1vh;
|
|
|
width: 31vw;
|
|
|
height: 25vh;
|
|
|
|