datav輪播圖的的花樣用法
阿新 • • 發佈：2022-05-12
<!-- 插針線看板 --> <template> <div class="home_body"> <div class="home_container"> <div class="home_content"> <div class="home_title" style="margin-left: 1rem;"> <div>空閒中<span>{{freeDeviceQty}}臺</span></div> <div>已備料<span>{{predDeviceQty}}臺</span></div> <div>待備料物料<span>{{waitQty}}pcs</span></div> <div>已備料物料<span>{{predQty}}pcs</span></div> </div> <el-row :gutter="20" v-resize='monResize'> <el-col :span="12"> <div class="contentLeft"> <div class="title">真空爐生產情況</div> <dv-scroll-board :config="config" class='scrollHeight' /> </div> </el-col> <el-col :span="12"> <div class="contentRt"> <div class="title">待真空物料情況</div> <dv-scroll-board :config="config2" class='scrollHeight' /> </div> </el-col> </el-row> </div> </div> </div> </template> <script> import { GetVacuumPreList, GetOverview, GetWaitSilkList } from '@/api/board.js' export default { beforeCreate() { this.$store.commit('onBorad', true); }, data() { return { formSearch: { pageIndex: 1, pageSize: 1000 }, lineList: [], lineInfo: [], aaa: true, tableData: [], freeDeviceQty: 0, predDeviceQty: 0, waitQty: 0, predQty: 0, timeValue: 0, loading: false, timer: null, timer2: null, orgListRowNum: 5, config: { //訊息中心資料所有 header: ['真空爐', '所在車間', '狀態', '備料時間', '數量', '備料人'], indexHeader: '序號', rowNum: 14, // 錶行數 headerBGC: 'rgb(25, 129, 246);', // 表頭背景色 oddRowBGC: 'rgb(9 48 79);', // 奇數行背景色 evenRowBGC: 'rgba(1, 84, 120, 0.266666666666667)', // 偶數行背景色 waitTime: 30000, // 輪播時間間隔(ms) align: 'center', index: false, carousel: 'page', // columnWidth: [60], // 剩下兩列寬度將自動計算 headerHeight: 50, data: [ ['無', '無', '無', '無', '無', '無'], // ['行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3'], // ['行2列1', '行2列2', '行2列3', '行1列1', '行1列2', '行1列3'], // ['行3列1', '行3列2', '行3列3', '行1列1', '行1列2', '行1列3'], // ['行4列1', '行4列2', '行4列3', '行1列1', '行1列2', '行1列3'], // ['行5列1', '行5列2', '行5列3', '行1列1', '行1列2', '行1列3'], // ['行6列1', '行6列2', '行6列3', '行1列1', '行1列2', '行1列3'], // ['行7列1', '行7列2', '行7列3', '行1列1', '行1列2', '行1列3'], // ['行8列1', '行8列2', '行8列3', '行1列1', '行1列2', '行1列3'], // ['行9列1', '行9列2', '行9列3', '行1列1', '行1列2', '行1列3'], // ['行10列1', '行10列2', '行10列3', '行1列1', '行1列2', '行1列3'], ] }, config2: { //訊息中心資料所有 header: ['工單號', '絲印批次', '生產線體', '所在車間', '狀態', '數量', '完成時間'], indexHeader: '序號', rowNum: 14, // 錶行數 headerBGC: 'rgb(25, 129, 246);', // 表頭背景色 oddRowBGC: 'rgb(9 48 79)', // 奇數行背景色 evenRowBGC: 'rgba(1, 84, 120, 0.266666666666667)', // 偶數行背景色 waitTime: 30000000, // 輪播時間間隔(ms) align: 'center', index: false, carousel: 'page', // columnWidth: [60,60], // 剩下兩列寬度將自動計算 headerHeight: 50, data: [ ['無', '無', '無', '無', '無', '無'], ] }, } }, mounted() { this.GetOverview() this.GetVacuumPreList() this.GetWaitSilkList() this.timer = setInterval(() => { this.GetOverview() }, 30000) //30s重新整理一次 this.timer2 = setInterval(() => { this.GetVacuumPreList() this.GetWaitSilkList() }, 300000) //5min重新整理一次 }, methods: { monResize() { const offsetHeight = window.innerHeight; const ratio = parseInt(offsetHeight / 60); let nowData = this.config nowData.rowNum = ratio //動態改變行數 // 這個地方必須這樣寫 this.config = { ...nowData } console.log(offsetHeight, this.config.rowNum, 4444) }, //查詢頂部資料 GetOverview() { this.$data.loading = true; GetOverview().then(res => { if (res.data.state == 0) { // this.aaa = true this.$data.freeDeviceQty = res.data.data.freeDeviceQty; this.$data.predDeviceQty = res.data.data.predDeviceQty; this.$data.waitQty = res.data.data.waitQty; this.$data.predQty = res.data.data.predQty; } this.$data.loading = false; }); }, //查詢列表資料 GetVacuumPreList() { this.$data.loading = true; GetVacuumPreList({ pageIndex: this.formSearch.pageIndex, pageSize: this.formSearch.pageSize, }).then(res => { if (res.data.state == 0) { let val = res.data.data.listData; let arr = [] for (let i in val) { let deviceSN = val[i].deviceSN let idWorkshopArea = val[i].idWorkshopArea == '' ? '無' : val[i].idWorkshopArea let productStatusStr = val[i].productStatusStr == '' ? '無' : val[i].productStatusStr let createDate = val[i].createDate == null ? '無' : val[i].createDate let qty = val[i].qty == null ? '無' : val[i].qty let employeeName = val[i].employeeName == '' ? '無' : val[i].employeeName arr.push([deviceSN, idWorkshopArea, productStatusStr, createDate, qty, employeeName]) } let nowData = this.config nowData.data = arr // 這個地方必須這樣寫 this.config = { ...nowData } } this.$data.loading = false; }); }, GetWaitSilkList() { //右側資料 this.$data.loading = true; GetWaitSilkList().then(res => { if (res.data.state == 0) { let val = res.data.data; let arr = [] for (let i in val) { let workOrderNum = val[i].workOrderNum let batchNumber = val[i].batchNumber == '' ? '無' : val[i].batchNumber let deviceSN = val[i].deviceSN == '' ? '無' : val[i].deviceSN let workshop = val[i].workshop == null ? '無' : val[i].workshop let productionStautsStr = val[i].productionStautsStr == null ? '無' : val[i] .productionStautsStr let qty = val[i].qty == null ? '無' : val[i].qty let finishTime = val[i].finishTime == null ? '無' : val[i].finishTime if (val[i].isWarning) { workOrderNum = '<span style="color:#ff0000">' + workOrderNum + '</span>' batchNumber = '<span style="color:#ff0000">' + batchNumber + '</span>' deviceSN = '<span style="color:#ff0000">' + deviceSN + '</span>' workshop = '<span style="color:#ff0000">' + workshop + '</span>' productionStautsStr = '<span style="color:#ff0000">' + productionStautsStr + '</span>' qty = '<span style="color:#ff0000">' + qty + '</span>' finishTime = '<span style="color:#ff0000">' + finishTime + '</span>' } arr.push([workOrderNum, batchNumber, deviceSN, workshop, productionStautsStr, qty, finishTime ]) } let nowData = this.config2 nowData.data = arr // 這個地方必須這樣寫 this.config2 = { ...nowData } } this.$data.loading = false; }); }, }, beforeDestroy() { clearInterval(this.timer); clearInterval(this.timer2); } } </script> <style lang="less" scoped> .title { font-size: 1.2rem; text-align: left; margin: 5px; } .contentLeft, .contentRt { height: calc(100% - 3.5rem); // border: 1px solid black; // height: 100%; } .el-row { box-sizing: border-box; height: calc(100% - 3.5rem); } .el-col-12 { width: 49%; height: 100%; // border: 1px solid red; } .scrollHeight { width: 100%; height: 100%; // height: 800px; // height: calc(100% - 20px) } .home_body { width: calc(100% - 200px); height: 100%; // background: url(http://10.115.120.20:8081/img/bcg5.af0eb97f.png); background: url(../../assets/img/home_bg3.png); background-size: 100% 100%; background-position: center center; height: 100%; background-size: 100% 100%; position: fixed; } .home_container { width: 100%; background: url(../../assets/img/bcg3.png); height: 100%; background-size: 100% 100%; background-position: center center; display: flex; color: #fff; } .home_content { width: 100%; } .home_title { width: 100%; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; text-align: left; font-size: 1.5rem; overflow: hidden; } .home_title div { display: inline; font-size: 1em; font-family: '華文新魏'; color: #81D3F8; margin-left: 8px; } .home_title div>span { color: #03D58B; } </style>