<template>
|
<div class="app-container">
|
<el-row :gutter="3">
|
<el-col :span="6">
|
<el-card shadow="always">
|
CFMOTO
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="always">
|
{{productCode}}
|
</el-card>
|
</el-col>
|
<el-col :span="15">
|
<el-card shadow="always">
|
装副轴,拨叉
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3" style="margin-top: 5px">
|
<el-col :span="6">
|
<div style="height: 600px;overflow: auto;">
|
<div class="container" style="height: 50px;background-color: #00afff;margin-bottom: 10px">
|
<span class="centered">居中文本</span>
|
</div>
|
<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">{{ index+1 }}</span>
|
</div>
|
<div class="content_right">{{ item.address }}</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="18">
|
<el-col :span="20">
|
<el-card style="height: 600px" shadow="always">
|
<el-row style="height: 100px">
|
{{address}}
|
</el-row>
|
<el-row style="height: 400px">
|
<el-image style="height: 390px;width: 960px" :src="src"></el-image>
|
<!-- {{src}}-->
|
</el-row>
|
<el-row style="height: 100px">
|
<el-button type="primary" @click="backClick()" style="float: left" icon="el-icon-arrow-left">上一步</el-button>
|
<el-button type="primary" @click="nextStep()" style="float: right">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
</el-row>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card style="height: 600px" shadow="always">
|
<el-row style="height: 100px;margin-top: 100px">
|
<el-button type="primary" @click="processDocuments()" style="float: left" icon="el-icon-folder-opened">工艺文件</el-button>
|
</el-row>
|
<el-row style="height: 50px;margin-top: 5px">
|
<el-button type="primary" @click="changeProducts('2V91')" style="width: 100px" icon="el-icon-s-unfold">2V91</el-button>
|
</el-row>
|
<el-row style="height: 50px;">
|
<el-button type="primary" @click="changeProducts('191')" style="width: 100px" icon="el-icon-s-unfold">191</el-button>
|
</el-row>
|
<el-row style="height: 50px;">
|
<el-button type="primary" @click="changeProducts('0JWF')" style="width: 100px" icon="el-icon-s-unfold">0JWF</el-button>
|
</el-row>
|
</el-card>
|
</el-col>
|
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import {listFormulaChild} from "@/api/main/bs/formulaChild/formulaChild";
|
|
export default {
|
name: "Instructions",
|
data() {
|
return {
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
productCode: null,
|
},
|
productCode: '2V91',
|
tableData: [{
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1519 弄'
|
}, {
|
img: 'htts://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: '222222222222',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}],
|
address: '',
|
src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
|
// src: 'file:///D:/img/qt.jpg'
|
|
intervalId: null,
|
|
};
|
},
|
created() {
|
this.tableData = []
|
},
|
mounted() {
|
this.changeProducts(this.productCode)
|
// this.autoShow()
|
},
|
beforeDestroy() {
|
clearInterval(this.intervalId)
|
this.intervalId = null
|
},
|
methods: {
|
// 定时触发
|
autoShow() {
|
const _this = this
|
this.intervalId = setInterval(() => {
|
_this.setBg()
|
}, 2000)
|
},
|
setImg(index) {
|
this.address = this.tableData[index].address
|
this.src = this.tableData[index].img
|
},
|
setBg() {
|
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 - 1; 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;
|
}
|
}
|
},
|
getUpOrDown(index) {
|
for (let i = 0; i < this.tableData.length; i++) {
|
if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
|
this.setImg(i + index)
|
document.getElementById('outerDiv' + i).style.background = index < 0 ? 'white' : 'green'
|
document.getElementById('outerDiv' + (i + index)).style.background = 'yellow'
|
return;
|
}
|
}
|
},
|
backClick(){
|
this.getUpOrDown(-1)
|
},
|
nextStep(){
|
this.getUpOrDown(1)
|
},
|
processDocuments(){
|
|
},
|
changeProducts(val){
|
|
this.productCode = val
|
const _this = this
|
|
/** 查询配方配置子信息列表 */
|
this.queryParams.productCode = val;
|
listFormulaChild(this.queryParams).then(response => {
|
// this.tableData = [];
|
this.tableData = response.rows;
|
this.$nextTick(() => {
|
clearInterval(this.intervalId);
|
document.getElementById('outerDiv0').style.background = 'yellow'
|
this.setImg(0)
|
this.autoShow()
|
})
|
|
|
});
|
},
|
},
|
}
|
</script>
|
|
<style scoped>
|
.outerDiv {
|
width: fit-content;
|
min-width: 100%;
|
/*width: 300px;*/
|
height: 50px;
|
margin-bottom: 10px;
|
}
|
|
.innerDiv1 {
|
/*width: 79%;*/
|
height: 100%;
|
display: flex;
|
align-items: center;
|
border: 1px solid black;
|
}
|
|
.innerDiv2 {
|
/*width: 20%;*/
|
width: 50px;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border: 1px solid black;
|
}
|
|
.content_left {
|
font-weight: bold;
|
}
|
.content_right {
|
white-space: nowrap;
|
padding-left: 5px;
|
padding-right: 5px;
|
}
|
.container {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100px; /* 设置div的高度，可根据实际情况调整 */
|
}
|
|
.centered {
|
text-align: center;
|
}
|
|
</style>
|
