|
@@ -5,99 +5,79 @@
|
|
|
@click.stop="animationState = !animationState"
|
|
|
>
|
|
|
<common-header title="工位任务分布/防静电监控" />
|
|
|
- <!-- <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 v-if="animationState" 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 style="height: 100%">
|
|
|
+ <TransitionGroup class="rowboxYb 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="right-chart">
|
|
|
- <dv-water-level-pond
|
|
|
- :config="{
|
|
|
- data: [setPondNumber(item.rate)],
|
|
|
- shape: 'round',
|
|
|
- }"
|
|
|
- :key="sum1"
|
|
|
- style="width: 16vh; height: 16vh"
|
|
|
- />
|
|
|
+ <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>
|
|
|
- </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"
|
|
|
+ </TransitionGroup>
|
|
|
+ <TransitionGroup
|
|
|
+ class="rowboxYb itemBackgroud"
|
|
|
+ style="margin-top: 2vh"
|
|
|
+ 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 showData2"
|
|
|
>
|
|
|
- {{ item.state }}
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </TransitionGroup>
|
|
|
+ <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>
|
|
|
- </div>
|
|
|
- </TransitionGroup>
|
|
|
+ </TransitionGroup>
|
|
|
+ </div>
|
|
|
+
|
|
|
<TransitionGroup class="rowbox" name="list2" tag="ul">
|
|
|
<div v-for="(item, index) in showdatas2" :key="item" class="grid-item">
|
|
|
<title-header :title="item.stationName" />
|
|
@@ -188,78 +168,73 @@
|
|
|
</TransitionGroup>
|
|
|
</div>
|
|
|
<div v-else 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 style="height: 100%">
|
|
|
+ <div class="rowboxYb 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="right-chart">
|
|
|
- <dv-water-level-pond
|
|
|
- :config="{
|
|
|
- data: [setPondNumber(item.rate)],
|
|
|
- shape: 'round',
|
|
|
- }"
|
|
|
- :key="sum1"
|
|
|
- style="width: 16vh; height: 16vh"
|
|
|
- />
|
|
|
+ <div class="carouselBody">
|
|
|
+ <div 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>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </TransitionGroup> -->
|
|
|
- <div 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">
|
|
|
- <div 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"
|
|
|
+ <div
|
|
|
+ class="rowboxYb itemBackgroud"
|
|
|
+ style="margin-top: 2vh"
|
|
|
+ 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">
|
|
|
+ <div name="list" tag="ul">
|
|
|
+ <li
|
|
|
+ class="carouselItem tableStyle"
|
|
|
+ :key="item"
|
|
|
+ v-for="item in showData2"
|
|
|
>
|
|
|
- {{ item.state }}
|
|
|
- </div>
|
|
|
- </li>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -381,9 +356,14 @@
|
|
|
<script setup>
|
|
|
import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
|
|
|
import TitleHeader from "@/views/report/statistics/screens/titleHeader.vue";
|
|
|
-import { getStationTaskInfo, getStationState } from "@/api/bigScreen";
|
|
|
+import {
|
|
|
+ getStationTaskInfo,
|
|
|
+ getStationState,
|
|
|
+ getWsdState,
|
|
|
+} from "@/api/bigScreen";
|
|
|
const animationState = ref(true);
|
|
|
const showData1 = ref([]);
|
|
|
+const showData2 = ref([]);
|
|
|
const fontSize = ref(0);
|
|
|
const setPondNumber = (str) => {
|
|
|
const number = Number(str).toFixed(2);
|
|
@@ -414,13 +394,20 @@ const getData = async () => {
|
|
|
// }
|
|
|
};
|
|
|
const interval1 = ref(null);
|
|
|
+const interval0 = ref(null);
|
|
|
const sum1 = ref(1);
|
|
|
+const sum0 = ref(1);
|
|
|
const sum2 = ref(1);
|
|
|
const data1 = ref([]);
|
|
|
+const data2 = ref([]);
|
|
|
const getData1 = async () => {
|
|
|
const { data } = await getStationState();
|
|
|
data1.value = data.stationState;
|
|
|
};
|
|
|
+const getData2 = async () => {
|
|
|
+ const { data } = await getWsdState();
|
|
|
+ data2.value = data;
|
|
|
+};
|
|
|
const setShowData1 = (num, time) => {
|
|
|
sum2.value = num;
|
|
|
if (data1.value.length > num) {
|
|
@@ -435,6 +422,20 @@ const setShowData1 = (num, time) => {
|
|
|
showData1.value = data1.value;
|
|
|
}
|
|
|
};
|
|
|
+const setShowData2 = (num, time) => {
|
|
|
+ sum0.value = num;
|
|
|
+ if (data2.value.length > num) {
|
|
|
+ const dataA = JSON.parse(JSON.stringify(data2.value));
|
|
|
+ showData2.value = dataA.splice(0, num);
|
|
|
+ interval0.value = setInterval(async () => {
|
|
|
+ await showData2.value.push(data2.value[sum0.value % data2.value.length]);
|
|
|
+ showData2.value.splice(0, 1);
|
|
|
+ sum0.value = sum0.value + 1;
|
|
|
+ }, time);
|
|
|
+ } else {
|
|
|
+ showData2.value = data2.value;
|
|
|
+ }
|
|
|
+};
|
|
|
const setShowDatas = async (time) => {
|
|
|
if (datas.value.length > 6) {
|
|
|
// const dataA = JSON.parse(JSON.stringify(datas.value));
|
|
@@ -607,6 +608,9 @@ onUnmounted(() => {
|
|
|
if (interval1.value) {
|
|
|
clearInterval(interval1.value);
|
|
|
}
|
|
|
+ if (interval0.value) {
|
|
|
+ clearInterval(interval0.value);
|
|
|
+ }
|
|
|
});
|
|
|
const checkFullscreen = () => {
|
|
|
viewKey.value = !viewKey.value;
|
|
@@ -616,7 +620,9 @@ onMounted(async () => {
|
|
|
setFontSize();
|
|
|
await getData();
|
|
|
await getData1();
|
|
|
+ await getData2();
|
|
|
setShowData1(17, 2000);
|
|
|
+ setShowData2(17, 2000);
|
|
|
setShowDatas(5000);
|
|
|
});
|
|
|
onUnmounted(() => {
|
|
@@ -685,14 +691,14 @@ onUnmounted(() => {
|
|
|
margin-bottom: 0.5vh;
|
|
|
}
|
|
|
.carouselBody {
|
|
|
- flex: 1;
|
|
|
+ height: calc(100% - 4.5vh);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
overflow: hidden;
|
|
|
.carouselItem {
|
|
|
margin-bottom: 0.5vh;
|
|
|
- height: 3.9vh;
|
|
|
+ height: 3.15vh;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -812,6 +818,14 @@ onUnmounted(() => {
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
+ .rowboxYb {
|
|
|
+ width: 32vw;
|
|
|
+ height: calc(50% - 1vh);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
.grid-item {
|
|
|
height: 100%;
|
|
|
display: flex;
|