Jcdm042-Mes.git

懒羊羊

2024-01-31 e57a8990ae56f657a59c435a0613c5f7a8728003

提交 \| 用户 \| 时间
e57a89	1	<template>
懒	2	<div class="app-container">
	3	<el-row :gutter="3">
	4	<el-col :span="6">
	5	<el-card shadow="always">
	6	CFMOTO
	7	</el-card>
	8	</el-col>
	9	<el-col :span="3">
	10	<el-card shadow="always">
	11	{{productCode}}
	12	</el-card>
	13	</el-col>
	14	<el-col :span="15">
	15	<el-card shadow="always">
	16	装副轴,拨叉
	17	</el-card>
	18	</el-col>
	19	</el-row>
	20	<el-row :gutter="3" style="margin-top: 5px">
	21	<el-col :span="6">
	22	<div style="height: 600px;overflow: auto;">
	23	<div class="container" style="height: 50px;background-color: #00afff;margin-bottom: 10px">
	24	<span class="centered">居中文本</span>
	25	</div>
	26	<div v-for="(item,index) in tableData" :key="item.sort" class="outerDiv" :id="'outerDiv'+index">
	27	<div class="innerDiv1">
	28	<div class="innerDiv2">
	29	<span class="content_left">{{ index+1 }}</span>
	30	</div>
	31	<div class="content_right">{{ item.address }}</div>
	32	</div>
	33	</div>
	34	</div>
	35	</el-col>
	36	<el-col :span="18">
	37	<el-col :span="20">
	38	<el-card style="height: 600px" shadow="always">
	39	<el-row style="height: 100px">
	40	{{address}}
	41	</el-row>
	42	<el-row style="height: 400px">
	43	<el-image style="height: 390px;width: 960px" :src="src"></el-image>
	44	<!-- {{src}}-->
	45	</el-row>
	46	<el-row style="height: 100px">
	47	<el-button type="primary" @click="backClick()" style="float: left" icon="el-icon-arrow-left">上一步</el-button>
	48	<el-button type="primary" @click="nextStep()" style="float: right">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
	49	</el-row>
	50	</el-card>
	51	</el-col>
	52	<el-col :span="4">
	53	<el-card style="height: 600px" shadow="always">
	54	<el-row style="height: 100px;margin-top: 100px">
	55	<el-button type="primary" @click="processDocuments()" style="float: left" icon="el-icon-folder-opened">工艺文件</el-button>
	56	</el-row>
	57	<el-row style="height: 50px;margin-top: 5px">
	58	<el-button type="primary" @click="changeProducts('2V91')" style="width: 100px" icon="el-icon-s-unfold">2V91</el-button>
	59	</el-row>
	60	<el-row style="height: 50px;">
	61	<el-button type="primary" @click="changeProducts('191')" style="width: 100px" icon="el-icon-s-unfold">191</el-button>
	62	</el-row>
	63	<el-row style="height: 50px;">
	64	<el-button type="primary" @click="changeProducts('0JWF')" style="width: 100px" icon="el-icon-s-unfold">0JWF</el-button>
	65	</el-row>
	66	</el-card>
	67	</el-col>
	68
	69	</el-col>
	70	</el-row>
	71	</div>
	72	</template>
	73
	74	<script>
	75	import {listFormulaChild} from "@/api/main/bs/formulaChild/formulaChild";
	76
	77	export default {
	78	name: "Instructions",
	79	data() {
	80	return {
	81	queryParams: {
	82	pageNum: 1,
	83	pageSize: 10,
	84	productCode: null,
	85	},
	86	productCode: '2V91',
	87	tableData: [{
	88	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	89	sort: '2',
	90	address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
	91	}, {
	92	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	93	sort: '2',
	94	address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
	95	}, {
	96	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	97	sort: '2',
	98	address: '上海市普陀区金沙江路 1519 弄'
	99	}, {
	100	img: 'htts://fuss10.elemecdn.com/e/5d/4a731a90594',
	101	sort: '2',
	102	address: '上海市普陀区金沙江路 1516 弄'
	103	}, {
	104	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	105	sort: '2',
	106	address: '上海市普陀区金沙江路 1516 弄'
	107	}, {
	108	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	109	sort: '2',
	110	address: '上海市普陀区金沙江路 1516 弄'
	111	}, {
	112	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	113	sort: '2',
	114	address: '上海市普陀区金沙江路 1516 弄'
	115	}, {
	116	img: '222222222222',
	117	sort: '2',
	118	address: '上海市普陀区金沙江路 1516 弄'
	119	}, {
	120	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	121	sort: '2',
	122	address: '上海市普陀区金沙江路 1516 弄'
	123	}, {
	124	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	125	sort: '2',
	126	address: '上海市普陀区金沙江路 1516 弄'
	127	}, {
	128	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	129	sort: '2',
	130	address: '上海市普陀区金沙江路 1516 弄'
	131	}],
	132	address: '',
	133	src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
	134	// src: 'file:///D:/img/qt.jpg'
	135
	136	intervalId: null,
	137
	138	};
	139	},
	140	created() {
	141	this.tableData = []
	142	},
	143	mounted() {
	144	this.changeProducts(this.productCode)
	145	// this.autoShow()
	146	},
	147	beforeDestroy() {
	148	clearInterval(this.intervalId)
	149	this.intervalId = null
	150	},
	151	methods: {
	152	// 定时触发
	153	autoShow() {
	154	const _this = this
	155	this.intervalId = setInterval(() => {
	156	_this.setBg()
	157	}, 2000)
	158	},
	159	setImg(index) {
	160	this.address = this.tableData[index].address
	161	this.src = this.tableData[index].img
	162	},
	163	setBg() {
	164	if (document.getElementById('outerDiv' + (this.tableData.length - 1)).style.background === 'yellow') {
	165	this.setImg(0)
	166	document.getElementById('outerDiv0').style.background = 'yellow'
	167	for (let j = 1; j < this.tableData.length; j++) {
	168	document.getElementById('outerDiv' + j).style.background = 'white'
	169	}
	170	return;
	171	}
	172	for (let i = 0; i < this.tableData.length - 1; i++) {
	173	if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
	174	this.setImg(i+1)
	175	document.getElementById('outerDiv' + i).style.background = 'green'
	176	document.getElementById('outerDiv' + (i+1)).style.background = 'yellow'
	177	return;
	178	}
	179	}
	180	},
	181	getUpOrDown(index) {
	182	for (let i = 0; i < this.tableData.length; i++) {
	183	if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
	184	this.setImg(i + index)
	185	document.getElementById('outerDiv' + i).style.background = index < 0 ? 'white' : 'green'
	186	document.getElementById('outerDiv' + (i + index)).style.background = 'yellow'
	187	return;
	188	}
	189	}
	190	},
	191	backClick(){
	192	this.getUpOrDown(-1)
	193	},
	194	nextStep(){
	195	this.getUpOrDown(1)
	196	},
	197	processDocuments(){
	198
	199	},
	200	changeProducts(val){
	201
	202	this.productCode = val
	203	const _this = this
	204
	205	/** 查询配方配置子信息列表 */
	206	this.queryParams.productCode = val;
	207	listFormulaChild(this.queryParams).then(response => {
	208	// this.tableData = [];
	209	this.tableData = response.rows;
	210	this.$nextTick(() => {
	211	clearInterval(this.intervalId);
	212	document.getElementById('outerDiv0').style.background = 'yellow'
	213	this.setImg(0)
	214	this.autoShow()
	215	})
	216
	217
	218	});
	219	},
	220	},
	221	}
	222	</script>
	223
	224	<style scoped>
	225	.outerDiv {
	226	width: fit-content;
	227	min-width: 100%;
	228	/width: 300px;/
	229	height: 50px;
	230	margin-bottom: 10px;
	231	}
	232
	233	.innerDiv1 {
	234	/width: 79%;/
	235	height: 100%;
	236	display: flex;
	237	align-items: center;
	238	border: 1px solid black;
	239	}
	240
	241	.innerDiv2 {
	242	/width: 20%;/
	243	width: 50px;
	244	height: 100%;
	245	display: flex;
	246	justify-content: center;
	247	align-items: center;
	248	border: 1px solid black;
	249	}
	250
	251	.content_left {
	252	font-weight: bold;
	253	}
	254	.content_right {
	255	white-space: nowrap;
	256	padding-left: 5px;
	257	padding-right: 5px;
	258	}
	259	.container {
	260	display: flex;
	261	justify-content: center;
	262	align-items: center;
	263	height: 100px; /* 设置div的高度，可根据实际情况调整 */
	264	}
	265
	266	.centered {
	267	text-align: center;
	268	}
	269
	270	</style>