Jcdm041-Mes.git

yyt

2024-01-23 e2feafbc4da530c52cf55113e0f145d6d9274ff2

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