Jcdm041-Mes.git

wujian

2024-01-31 c74dcb8dca7b9e3eded0d20299f19a26a6b70974

提交 \| 用户 \| 时间
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	});
717bf8	199
f5af64	200	});
717bf8	201
f5af64	202	},
aead81	203	closeMethod(){
W	204	this.mainProcessSrc = ''
	205	},
b6884f	206	//获取当前时间
W	207	getNowTime () {
	208	let speed = 1000
	209	let that = this
	210	let theNowTime = function () {
	211	that.currentTime = that.timeNumber()
	212	}
	213	setInterval(theNowTime, speed)
	214	},
	215	timeNumber () {
	216	let today = new Date()
	217	let date = today.getFullYear() + '-' + this.twoDigits(today.getMonth() + 1) + '-' + this.twoDigits(today.getDate())
	218	let time = this.twoDigits(today.getHours()) + ':' + this.twoDigits(today.getMinutes()) + ':' + this.twoDigits(today.getSeconds())
	219	return date + ' ' + time
	220	},
	221	twoDigits (val) {
	222	if (val < 10) return '0' + val
	223	return val
	224	},
fd2207	225	// 定时触发
懒	226	autoShow() {
	227	const _this = this
	228	this.intervalId = setInterval(() => {
	229	_this.setBg()
b6884f	230	}, 10000)
fd2207	231	},
懒	232	setImg(index) {
	233	this.address = this.tableData[index].address
	234	this.src = this.tableData[index].img
717bf8	235	},
W	236	cleanImg(){
	237	this.address = ''
	238	this.src = ''
fd2207	239	},
懒	240	setBg() {
	241	if (document.getElementById('outerDiv' + (this.tableData.length - 1)).style.background === 'yellow') {
	242	this.setImg(0)
	243	document.getElementById('outerDiv0').style.background = 'yellow'
	244	for (let j = 1; j < this.tableData.length; j++) {
	245	document.getElementById('outerDiv' + j).style.background = 'white'
	246	}
	247	return;
	248	}
	249	for (let i = 0; i < this.tableData.length - 1; i++) {
	250	if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
	251	this.setImg(i+1)
b6884f	252	document.getElementById('outerDiv' + i).style.background = 'lightgreen'
fd2207	253	document.getElementById('outerDiv' + (i+1)).style.background = 'yellow'
懒	254	return;
	255	}
	256	}
	257	},
	258	getUpOrDown(index) {
	259	for (let i = 0; i < this.tableData.length; i++) {
	260	if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
	261	this.setImg(i + index)
b6884f	262	document.getElementById('outerDiv' + i).style.background = index < 0 ? 'white' : 'lightgreen'
fd2207	263	document.getElementById('outerDiv' + (i + index)).style.background = 'yellow'
懒	264	return;
	265	}
	266	}
	267	},
	268	backClick(){
	269	this.getUpOrDown(-1)
	270	},
	271	nextStep(){
	272	this.getUpOrDown(1)
	273	},
	274	processDocuments(){
aead81	275	getMainProductProcess(this.queryParams).then(res => {
W	276	this.mainProcess = res.rows
	277	if (res.rows!=null && res.rows.length>0){
	278	this.mainProcessSrc = res.rows[0].img
	279	}
	280	})
	281	this.dialogVisible = true
fd2207	282	},
懒	283	changeProducts(val){
	284
4e40a8	285
b6884f	286	console.log("------更换图片",val)
02bd0f	287	console.log("------目录==============",this.tableData)
717bf8	288	console.log("locationCode",this.locationCode)
fd2207	289	this.productCode = val
懒	290	const _this = this
	291
02bd0f	292	this.isClickd = val; // 切换isClicked的值
fd2207	293	/** 查询配方配置子信息列表 */
懒	294	this.queryParams.productCode = val;
02bd0f	295	this.queryParams.processesCode = this.locationCode
aead81	296	getProductProcess(this.queryParams).then(response => {
02bd0f	297	this.tableData = [];
717bf8	298	this.cleanImg()
fd2207	299	this.tableData = response.rows;
懒	300	this.$nextTick(() => {
	301	clearInterval(this.intervalId);
	302	document.getElementById('outerDiv0').style.background = 'yellow'
b6884f	303	for (let i = 1; i < this.tableData.length; i++){
W	304	document.getElementById('outerDiv' + i).style.background = 'white'
	305	}
fd2207	306	this.setImg(0)
懒	307	this.autoShow()
	308	})
	309
	310
	311	});
	312	},
	313	},
	314	}
	315	</script>
	316
	317	<style scoped>
	318	.outerDiv {
	319	width: fit-content;
b6884f	320	min-width: 102%;
fd2207	321	/width: 300px;/
f30d78	322	height: 30px;
W	323	margin-bottom: 5px;
fd2207	324	}
懒	325
	326	.innerDiv1 {
	327	/width: 79%;/
	328	height: 100%;
	329	display: flex;
	330	align-items: center;
	331	border: 1px solid black;
	332	}
	333
	334	.innerDiv2 {
	335	/width: 20%;/
	336	width: 50px;
	337	height: 100%;
	338	display: flex;
	339	justify-content: center;
	340	align-items: center;
	341	border: 1px solid black;
	342	}
	343
	344	.content_left {
	345	font-weight: bold;
	346	}
	347	.content_right {
	348	white-space: nowrap;
	349	padding-left: 5px;
	350	padding-right: 5px;
f30d78	351	font-size: 20px;
fd2207	352	}
懒	353	.container {
	354	display: flex;
	355	justify-content: center;
	356	align-items: center;
	357	height: 100px; /* 设置div的高度，可根据实际情况调整 */
	358	}
	359
	360	.centered {
	361	text-align: center;
b6884f	362	color: white;
W	363	font-weight: bold;
	364	font-size: 20px;
fd2207	365	}
b6884f	366	.centerText{
W	367	color: black;
	368	font-weight: bold;
f30d78	369	font-size: 20px;
b6884f	370	display: flex;
W	371	justify-content: center;
f30d78	372	margin-top: 5px
b6884f	373	}
02bd0f	374	.active {
W	375	background-color: #31b431; /* 点击后的背景色 */
	376	}
aead81	377	::v-deep .el-dialog {
W	378	height: 90%;
	379	overflow-y: auto;
	380	}
	381	::v-deep .el-dialog__footer{
	382	margin-top: 10px;
	383	}
f30d78	384	::v-deep .el-card .is-always-shadow{
W	385	height: 60px;
	386	}
	387	.boxSize{
	388	height: 60px;
	389	}
	390	.nextLine{
	391	display: block;
	392	}
	393	.centerImg{
	394	display: flex;
	395	justify-content: center;
	396	align-items: center;
	397	}
fd2207	398
懒	399	</style>