|
|
@@ -1,56 +1,83 @@
|
|
|
<template>
|
|
|
<div id="bottom">
|
|
|
- <div class="listdata">
|
|
|
- <div class="item " v-for="item in devicedata" :key="item"> <!--:key="item.dl_id"-->
|
|
|
+ <swiper class="listdata swiper" :options="swiperOption" ref="mySwiper">
|
|
|
+ <swiper-slide class="listdata" v-for="i in sreencount" :key="i"> <!--:key="item.dl_id"-->
|
|
|
+ <div class="item " v-for="item in devicedata.slice(32*(i-1), 32*i)" :key="item.dl_id"> <!--:key="item.dl_id"-->
|
|
|
<div class="bg-color-black" >
|
|
|
- <div v-if="item?.dl_id">
|
|
|
- <div style=" color: #29dd70; font-size: 22px;">机台 {{ item.de_location }}
|
|
|
- <span class="fs-sm"> {{item.status}} </span>
|
|
|
- </div>
|
|
|
- <div class="fs-xs inlineshow" >模具：{{ item.dl_mouldcode }}</div>
|
|
|
- <div class="fs-xs">作业员：{{ item.dl_inman }}</div>
|
|
|
- <div class="fs-xs"> 开始时间：{{ item.dl_indate }}</div>
|
|
|
- <div class="fs-xs">工单：{{ item.dl_macode }} </div>
|
|
|
- <div class="fs-xs">产品：{{ item.ma_prodcode }} </div>
|
|
|
- <div class ="circled">
|
|
|
- <div class ="circleitem" style="padding-top: 10px;">
|
|
|
- <div class="fs-xs">工单数：{{ item.ma_qty }} </div>
|
|
|
- <div class="fs-xs">完成数：{{ item.outqty }}</div>
|
|
|
- </div>
|
|
|
- <div class ="circleitem" >
|
|
|
- <CircleChart :tips="item.rate" :id="item.id"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div v-if="item.dl_id>0">
|
|
|
+ <div style=" color: #29dd70; font-size: 22px;">机台 {{ item.de_location }}
|
|
|
+ <span class="fs-sm"> {{item.status}} </span>
|
|
|
</div>
|
|
|
- <div v-else="" class="nodataitem">
|
|
|
- <span class=" display: block;"> 无数据</span>
|
|
|
+ <div class="fs-xs inlineshow" >模具：{{ item.dl_mouldcode }}</div>
|
|
|
+ <div class="fs-xs">作业员：{{ item.dl_inman }}</div>
|
|
|
+ <div class="fs-xs"> 开始时间：{{ item.dl_indate }}</div>
|
|
|
+ <div class="fs-xs">工单：{{ item.dl_macode }} </div>
|
|
|
+ <div class="fs-xs">产品：{{ item.ma_prodcode }} </div>
|
|
|
+ <div class ="circled">
|
|
|
+ <div class ="circleitem" style="padding-top: 10px;">
|
|
|
+ <div class="fs-xs">工单数：{{ item.ma_qty }} </div>
|
|
|
+ <div class="fs-xs">完成数：{{ item.outqty }}</div>
|
|
|
+ </div>
|
|
|
+ <div class ="circleitem" >
|
|
|
+ <CircleChart :tips="item.rate" :id="item.id"/>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div v-else="" class="nodataitem">
|
|
|
+<!-- <span class=" display: block;"> 无数据</span>-->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ <div class="swiper-pagination" slot="pagination"></div>
|
|
|
+ </swiper>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import CircleChart from '@/components/cxchart/bottom'
|
|
|
+ import CircleChart from '@/components/cxchart/bottom';
|
|
|
+ import { swiper, swiperSlide } from 'vue-awesome-swiper';
|
|
|
+ import 'swiper/dist/css/swiper.css';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
devicedata:[],
|
|
|
+ swiperOption: {
|
|
|
+ direction: 'vertical',
|
|
|
+ slidesPerView: 1,
|
|
|
+ spaceBetween: 0,
|
|
|
+ autoplay:7000,
|
|
|
+ autoplayDisableOnInteraction:false,
|
|
|
+ pagination: '.swiper-pagination',
|
|
|
+ paginationClickable: true,
|
|
|
+ //loop: true,
|
|
|
+ },
|
|
|
+ sreencount :1,
|
|
|
+ timing :null
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
- CircleChart
|
|
|
+ CircleChart,
|
|
|
+ swiper,
|
|
|
+ swiperSlide
|
|
|
},
|
|
|
mounted () {
|
|
|
this.drawTimingFn();
|
|
|
},
|
|
|
-
|
|
|
+ computed: {
|
|
|
+ mySwiper () {
|
|
|
+ return this.$ref.mySwiper.swiper
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeDestroy () {
|
|
|
+ clearInterval(this.timing)
|
|
|
+ },
|
|
|
methods: {
|
|
|
drawTimingFn () {
|
|
|
this.setData();
|
|
|
- setInterval(() => {
|
|
|
- this.setData(); //获取-数据
|
|
|
+ this.timing = setInterval(() => {
|
|
|
+ this.setData(); //获取--数据
|
|
|
}, 30000);
|
|
|
},
|
|
|
async setData () {
|
|
|
@@ -62,8 +89,22 @@
|
|
|
}).then((result)=>{
|
|
|
let dataList = JSON.parse(result.data.data);
|
|
|
this.devicedata=dataList;
|
|
|
- if(dataList.length<32){
|
|
|
+ if(null != this.devicedata) {
|
|
|
+ let len = this.devicedata.length;
|
|
|
+ let cn = Math.ceil(len / 32);
|
|
|
+ this.sreencount =cn;
|
|
|
+ let minuscn = cn*32-len;
|
|
|
+ if(minuscn>0){
|
|
|
+ let arr = new Array();
|
|
|
+ for(let i = 1; i<= minuscn; i++) {
|
|
|
+ let ar1 = [{"dl_id":-1*i}];
|
|
|
+ arr.push(ar1);
|
|
|
+ }
|
|
|
+ this.devicedata = this.devicedata.concat(arr);
|
|
|
+ }
|
|
|
+ /* if(dataList.length<32){
|
|
|
this.devicedata = this.devicedata.concat(new Array(32-dataList.length));
|
|
|
+ }*/
|
|
|
}
|
|
|
|
|
|
},(result)=>{
|
|
|
@@ -85,10 +126,12 @@
|
|
|
// font-family: Arial;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
+
|
|
|
.listdata{
|
|
|
+ width: 1888px;
|
|
|
+ height: $box-height;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- // padding-top:10px;
|
|
|
justify-content: space-around;
|
|
|
.item {
|
|
|
border-radius: 6px;
|
|
|
@@ -118,6 +161,20 @@
|
|
|
width: 50%;
|
|
|
}
|
|
|
}
|
|
|
+ .swiper-pagination {
|
|
|
+ //height: 10px;
|
|
|
+ ::v-deep .swiper-pagination-bullet{
|
|
|
+ width: 15px; /* 设置宽度 */
|
|
|
+ height: 15px
|
|
|
+ }
|
|
|
+ ::v-deep .swiper-pagination-bullet{
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+ ::v-deep .swiper-pagination-bullet-active{
|
|
|
+ background-color: #007aff;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
