| | |
| | | <div v-for="(item,index) in tableData" :key="item.sort" class="outerDiv" :id="'outerDiv'+index"> |
| | | <div class="innerDiv1"> |
| | | <div class="innerDiv2"> |
| | | <span class="content_left">{{ item.sort }}</span> |
| | | <span class="content_left">{{ index+1 }}</span> |
| | | </div> |
| | | <div class="content_right">{{ item.address }}</div> |
| | | </div> |
| | |
| | | pageSize: 10, |
| | | productCode: null, |
| | | }, |
| | | productCode: 'OP1010', |
| | | productCode: '2V91', |
| | | tableData: [{ |
| | | img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594', |
| | | sort: '2', |
| | |
| | | }; |
| | | }, |
| | | created() { |
| | | this.tableData = [] |
| | | }, |
| | | mounted() { |
| | | document.getElementById('outerDiv0').style.background = 'yellow' |
| | | this.setImg(0) |
| | | this.autoShow() |
| | | this.changeProducts(this.productCode) |
| | | // this.autoShow() |
| | | }, |
| | | methods: { |
| | | // 定时触发 |
| | | autoShow() { |
| | | const _this = this |
| | | this.intervalId = setInterval(() => { |
| | |
| | | |
| | | }, |
| | | changeProducts(val){ |
| | | |
| | | this.productCode = val |
| | | const _this = this |
| | | |
| | | /** 查询配方配置子信息列表 */ |
| | | this.queryParams.productCode = val; |
| | | listFormulaChild(this.queryParams).then(response => { |
| | | this.tableData = []; |
| | | // this.tableData = []; |
| | | this.tableData = response.rows; |
| | | this.$nextTick(() => { |
| | | clearInterval(this.intervalId); |
| | | |
| | | for (let i = 0; i < this.tableData.length; i++) { |
| | | document.getElementById('outerDiv'+i).style.background = 'white' |
| | | } |
| | | setTimeout(() => { |
| | | document.getElementById('outerDiv0').style.background = 'yellow' |
| | | this.intervalId = setInterval(() => { |
| | | if (document.getElementById('outerDiv' + (this.tableData.length - 1)).style.background === 'yellow') { |
| | | this.setImg(0) |
| | | document.getElementById('outerDiv0').style.background = 'yellow' |
| | | for (let j = 1; j < this.tableData.length; j++) { |
| | | document.getElementById('outerDiv' + j).style.background = 'white' |
| | | } |
| | | return; |
| | | } |
| | | for (let i = 0; i < this.tableData.length; i++) { |
| | | if (document.getElementById('outerDiv' + i).style.background === 'yellow') { |
| | | this.setImg(i+1) |
| | | document.getElementById('outerDiv' + i).style.background = 'green' |
| | | document.getElementById('outerDiv' + (i+1)).style.background = 'yellow' |
| | | return; |
| | | } |
| | | } |
| | | this.autoShow() |
| | | }) |
| | | |
| | | }, 2000) |
| | | }, 7000); |
| | | |
| | | }); |
| | | }, |