Jcdm041-Mes.git

wujian

2024-01-19 4e40a865af2a16b292c5a6b46e25b0457446f724

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