Jcdm041-Mes.git

yyt

2024-05-28 1c703617885275090d69c697e82e61f4940c0bdc

提交 \| 用户 \| 时间
fd2207	1	<template>
懒	2	<div class="app-container">
	3	<el-row :gutter="3">
	4	<el-col :span="6">
f30d78	5	<el-card shadow="always" class="boxSize">
W	6	<div class="centerImg">
	7	<img style="width: 140px;height: 30px;" src="@/assets/logo/jcdm2.png" alt="dark">
	8	<!-- <span class="nextLine" style="font-weight: bold">{{currentTime}}</span>-->
	9	</div>
	10
fd2207	11	</el-card>
懒	12	</el-col>
	13	<el-col :span="3">
f30d78	14	<el-card shadow="always" class="boxSize">
W	15	<span class="centerText" style="height: 60px">{{locationCode}}</span>
fd2207	16	</el-card>
懒	17	</el-col>
	18	<el-col :span="15">
f30d78	19	<el-card shadow="always" class="boxSize">
W	20	<span class="centerText" >{{locationName}}</span>
fd2207	21	</el-card>
懒	22	</el-col>
	23	</el-row>
	24	<el-row :gutter="3" style="margin-top: 5px">
	25	<el-col :span="6">
f30d78	26	<div style="height: 550px;overflow: auto;">
W	27	<div class="container" style="height: 50px;background-color: #00afff;margin-bottom: 5px">
b6884f	28	<span class="centered">作业流程</span>
fd2207	29	</div>
02bd0f	30	<div v-for="(item,index) in tableData" :key="item.index" class="outerDiv" :id="'outerDiv'+index">
fd2207	31	<div class="innerDiv1">
懒	32	<div class="innerDiv2">
	33	<span class="content_left">{{ index+1 }}</span>
	34	</div>
	35	<div class="content_right">{{ item.address }}</div>
	36	</div>
	37	</div>
	38	</div>
	39	</el-col>
	40	<el-col :span="18">
f30d78	41	<el-col :span="18">
W	42	<el-card style="height: 550px" shadow="always">
	43	<el-row style="height: 60px">
	44	<span style="color: #31b431;font-size: 20px;font-weight: bold">{{address}}</span>
fd2207	45	</el-row>
f30d78	46	<el-row style="height: 420px">
W	47	<div class="centerImg">
	48	<el-image style="height: 400px;width: 400px;" :src="src"></el-image>
	49	</div>
	50
fd2207	51	<!-- {{src}}-->
懒	52	</el-row>
f30d78	53	<el-row style="height: 100%;width: 100%">
W	54	<el-button type="primary" @click="backClick()" style="height: 50%; width: 20%; font-size: 20%; float: left" icon="el-icon-d-arrow-left">上一步</el-button>
	55	<el-button type="primary" @click="nextStep()" style="height: 50%; width: 20%; font-size: 20%; float: right">下一步<i class="el-icon-d-arrow-right"></i></el-button>
fd2207	56	</el-row>
懒	57	</el-card>
	58	</el-col>
f30d78	59	<el-col :span="6">
W	60	<el-card style="height: 550px;width: 100%" shadow="always">
	61	<el-row >
	62	<div class="centerImg" style="height: 30%; margin-top: 60%">
	63	<el-button type="primary" @click="processDocuments()" style="height: 40%; width: 90%; font-size: 70%; float: left" icon="el-icon-folder-opened">工艺文件</el-button>
	64	</div>
	65
fd2207	66	</el-row>
f30d78	67	<el-row style="height: 30%;margin-top: 40%" class="centerImg">
W	68	<el-button type="info" @click="changeProducts('2V91')" :class="{ 'active': isClickd === '2V91' }" style="height: 40%; width: 80%; font-size: 70%; float: left" icon="el-icon-s-unfold">2V91</el-button>
fd2207	69	</el-row>
f30d78	70	<el-row style="height: 30%;margin-top: 5%" class="centerImg">
W	71	<el-button type="info" @click="changeProducts('191')" :class="{ 'active': isClickd === '191' }" style="height: 40%; width: 80%; font-size: 70%; float: left" icon="el-icon-s-unfold">191</el-button>
fd2207	72	</el-row>
f30d78	73	<el-row style="height: 30%;margin-top: 5%" class="centerImg">
W	74	<el-button type="info" @click="changeProducts('0JWF')" :class="{ 'active': isClickd === '0JWF' }" style="height: 40%; width: 80%; font-size: 70%; float: left" icon="el-icon-s-unfold">0JWF</el-button>
fd2207	75	</el-row>
懒	76	</el-card>
	77	</el-col>
	78
	79	</el-col>
	80	</el-row>
aead81	81	<div>
W	82	<el-dialog
	83	title="工艺文件"
	84	:visible.sync="dialogVisible"
	85	width="70%"
	86	@close="closeMethod"
	87
	88	>
	89	<div><el-image style="height: 1090px;width: 960px;margin-left: 33px" :src="mainProcessSrc"></el-image></div>
	90	<span slot="footer" class="dialog-footer">
aa9d61	91	<el-button type="primary" @click="dialogVisible = false" style="margin-right: 80px">确定</el-button>
aead81	92	</span>
W	93	</el-dialog>
	94	</div>
fd2207	95	</div>
aead81	96
fd2207	97	</template>
懒	98
	99	<script>
aead81	100	import {getMainProductProcess, getProductProcess} from "@/api/main/bs/formulaChild/formulaChild";
f5af64	101	import {listStationConf,getIp} from "@/api/main/sc/stationConf";
fd2207	102
懒	103	export default {
	104	name: "index",
	105	data() {
	106	return {
aead81	107	dialogVisible: false,
W	108	mainProcessSrc: '',
	109	mainProcess: [],
02bd0f	110	isClickd: '', // 初始化为未点击状态
65dd24	111	locationCode: "未配置",
f5af64	112	locationName: "未配置工位",
fd2207	113	queryParams: {
懒	114	pageNum: 1,
	115	pageSize: 10,
	116	productCode: null,
	117	},
b6884f	118	currentTime:'',
fd2207	119	productCode: '2V91',
懒	120	tableData: [{
	121	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	122	sort: '2',
	123	address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
	124	}, {
	125	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	126	sort: '2',
	127	address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
	128	}, {
	129	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	130	sort: '2',
	131	address: '上海市普陀区金沙江路 1519 弄'
	132	}, {
	133	img: 'htts://fuss10.elemecdn.com/e/5d/4a731a90594',
	134	sort: '2',
	135	address: '上海市普陀区金沙江路 1516 弄'
	136	}, {
	137	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	138	sort: '2',
	139	address: '上海市普陀区金沙江路 1516 弄'
	140	}, {
	141	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	142	sort: '2',
	143	address: '上海市普陀区金沙江路 1516 弄'
	144	}, {
	145	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	146	sort: '2',
	147	address: '上海市普陀区金沙江路 1516 弄'
	148	}, {
	149	img: '222222222222',
	150	sort: '2',
	151	address: '上海市普陀区金沙江路 1516 弄'
	152	}, {
	153	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	154	sort: '2',
	155	address: '上海市普陀区金沙江路 1516 弄'
	156	}, {
	157	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	158	sort: '2',
	159	address: '上海市普陀区金沙江路 1516 弄'
	160	}, {
	161	img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
	162	sort: '2',
	163	address: '上海市普陀区金沙江路 1516 弄'
	164	}],
	165	address: '',
1558d8	166	// src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
fd2207	167	// src: 'file:///D:/img/qt.jpg'
懒	168
	169	intervalId: null,
	170
	171	};
	172	},
	173	created() {
	174	this.tableData = []
	175	},
	176	mounted() {
f5af64	177	this.getStationConf()
65dd24	178	// this.changeProducts(this.productCode)
717bf8	179	// this.changeProducts("2V91")
b6884f	180	this.getNowTime()
fd2207	181	// this.autoShow()
懒	182	},
b6884f	183	// computed: {
W	184	// currentTime:
	185	// },
fd2207	186	methods: {
f5af64	187	/** 查询工位终端配置列表 */
懒	188	getStationConf() {
	189	getIp().then(response => {
	190	let queryParams = {
	191	ipAddress: response.msg,
	192	}
	193	listStationConf(queryParams).then(response => {
	194	this.locationName = response.rows[0].processesName
65dd24	195	this.locationCode = response.rows[0].processesCode
717bf8	196	console.log('llllll',this.locationCode)
W	197	this.changeProducts("2V91")
f5af64	198	});
懒	199	});
	200	},
aead81	201	closeMethod(){
W	202	this.mainProcessSrc = ''
	203	},
b6884f	204	//获取当前时间
W	205	getNowTime () {
	206	let speed = 1000
	207	let that = this
	208	let theNowTime = function () {
	209	that.currentTime = that.timeNumber()
	210	}
	211	setInterval(theNowTime, speed)
	212	},
	213	timeNumber () {
	214	let today = new Date()
	215	let date = today.getFullYear() + '-' + this.twoDigits(today.getMonth() + 1) + '-' + this.twoDigits(today.getDate())
	216	let time = this.twoDigits(today.getHours()) + ':' + this.twoDigits(today.getMinutes()) + ':' + this.twoDigits(today.getSeconds())
	217	return date + ' ' + time
	218	},
	219	twoDigits (val) {
	220	if (val < 10) return '0' + val
	221	return val
	222	},
fd2207	223	// 定时触发
懒	224	autoShow() {
	225	const _this = this
	226	this.intervalId = setInterval(() => {
	227	_this.setBg()
b6884f	228	}, 10000)
fd2207	229	},
懒	230	setImg(index) {
	231	this.address = this.tableData[index].address
	232	this.src = this.tableData[index].img
717bf8	233	},
W	234	cleanImg(){
	235	this.address = ''
	236	this.src = ''
fd2207	237	},
懒	238	setBg() {
	239	if (document.getElementById('outerDiv' + (this.tableData.length - 1)).style.background === 'yellow') {
	240	this.setImg(0)
	241	document.getElementById('outerDiv0').style.background = 'yellow'
	242	for (let j = 1; j < this.tableData.length; j++) {
	243	document.getElementById('outerDiv' + j).style.background = 'white'
	244	}
	245	return;
	246	}
	247	for (let i = 0; i < this.tableData.length - 1; i++) {
	248	if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
	249	this.setImg(i+1)
b6884f	250	document.getElementById('outerDiv' + i).style.background = 'lightgreen'
fd2207	251	document.getElementById('outerDiv' + (i+1)).style.background = 'yellow'
懒	252	return;
	253	}
	254	}
	255	},
	256	getUpOrDown(index) {
	257	for (let i = 0; i < this.tableData.length; i++) {
	258	if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
	259	this.setImg(i + index)
b6884f	260	document.getElementById('outerDiv' + i).style.background = index < 0 ? 'white' : 'lightgreen'
fd2207	261	document.getElementById('outerDiv' + (i + index)).style.background = 'yellow'
懒	262	return;
	263	}
	264	}
	265	},
	266	backClick(){
	267	this.getUpOrDown(-1)
	268	},
	269	nextStep(){
	270	this.getUpOrDown(1)
	271	},
	272	processDocuments(){
aead81	273	getMainProductProcess(this.queryParams).then(res => {
W	274	this.mainProcess = res.rows
	275	if (res.rows!=null && res.rows.length>0){
	276	this.mainProcessSrc = res.rows[0].img
	277	}
	278	})
	279	this.dialogVisible = true
fd2207	280	},
懒	281	changeProducts(val){
	282
4e40a8	283
b6884f	284	console.log("------更换图片",val)
02bd0f	285	console.log("------目录==============",this.tableData)
717bf8	286	console.log("locationCode",this.locationCode)
fd2207	287	this.productCode = val
懒	288	const _this = this
	289
02bd0f	290	this.isClickd = val; // 切换isClicked的值
fd2207	291	/** 查询配方配置子信息列表 */
懒	292	this.queryParams.productCode = val;
02bd0f	293	this.queryParams.processesCode = this.locationCode
aead81	294	getProductProcess(this.queryParams).then(response => {
02bd0f	295	this.tableData = [];
717bf8	296	this.cleanImg()
fd2207	297	this.tableData = response.rows;
懒	298	this.$nextTick(() => {
	299	clearInterval(this.intervalId);
	300	document.getElementById('outerDiv0').style.background = 'yellow'
b6884f	301	for (let i = 1; i < this.tableData.length; i++){
W	302	document.getElementById('outerDiv' + i).style.background = 'white'
	303	}
fd2207	304	this.setImg(0)
懒	305	this.autoShow()
	306	})
	307
	308
	309	});
	310	},
	311	},
	312	}
	313	</script>
	314
	315	<style scoped>
	316	.outerDiv {
	317	width: fit-content;
b6884f	318	min-width: 102%;
fd2207	319	/width: 300px;/
f30d78	320	height: 30px;
W	321	margin-bottom: 5px;
fd2207	322	}
懒	323
	324	.innerDiv1 {
	325	/width: 79%;/
	326	height: 100%;
	327	display: flex;
	328	align-items: center;
	329	border: 1px solid black;
	330	}
	331
	332	.innerDiv2 {
	333	/width: 20%;/
	334	width: 50px;
	335	height: 100%;
	336	display: flex;
	337	justify-content: center;
	338	align-items: center;
	339	border: 1px solid black;
	340	}
	341
	342	.content_left {
	343	font-weight: bold;
	344	}
	345	.content_right {
	346	white-space: nowrap;
	347	padding-left: 5px;
	348	padding-right: 5px;
f30d78	349	font-size: 20px;
fd2207	350	}
懒	351	.container {
	352	display: flex;
	353	justify-content: center;
	354	align-items: center;
	355	height: 100px; /* 设置div的高度，可根据实际情况调整 */
	356	}
	357
	358	.centered {
	359	text-align: center;
b6884f	360	color: white;
W	361	font-weight: bold;
	362	font-size: 20px;
fd2207	363	}
b6884f	364	.centerText{
W	365	color: black;
	366	font-weight: bold;
f30d78	367	font-size: 20px;
b6884f	368	display: flex;
W	369	justify-content: center;
f30d78	370	margin-top: 5px
b6884f	371	}
02bd0f	372	.active {
W	373	background-color: #31b431; /* 点击后的背景色 */
	374	}
aead81	375	::v-deep .el-dialog {
W	376	height: 90%;
	377	overflow-y: auto;
	378	}
	379	::v-deep .el-dialog__footer{
	380	margin-top: 10px;
	381	}
f30d78	382	::v-deep .el-card .is-always-shadow{
W	383	height: 60px;
	384	}
	385	.boxSize{
	386	height: 60px;
	387	}
	388	.nextLine{
	389	display: block;
	390	}
	391	.centerImg{
	392	display: flex;
	393	justify-content: center;
	394	align-items: center;
	395	}
fd2207	396
懒	397	</style>