Jcdm041-MesCVT.git

yyt

8 天以前 0cceb649e1dc443c2a91d26d81eacb0867c96db3

提交 \| 用户 \| 时间
0cceb6	1	<template>
Y	2	<div class="app-container">
	3	<el-row :gutter="3">
	4	<el-col :span="6">
	5	<el-card shadow="always" class="boxSize">
	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
	11	</el-card>
	12	</el-col>
	13	<el-col :span="3">
	14	<el-card shadow="always" class="boxSize">
	15	<span class="centerText" style="height: 60px">{{locationCode}}</span>
	16	</el-card>
	17	</el-col>
	18	<el-col :span="15">
	19	<el-card shadow="always" class="boxSize">
	20	<span class="centerText" >{{locationName}}</span>
	21	</el-card>
	22	</el-col>
	23	</el-row>
	24	<el-row :gutter="3" style="margin-top: 5px">
	25	<el-col :span="6">
	26	<div style="height: 550px;overflow: auto;">
	27	<div class="container" style="height: 50px;background-color: #00afff;margin-bottom: 5px">
	28	<span class="centered">作业流程</span>
	29	</div>
	30	<div v-for="(item,index) in tableData" :key="item.index" class="outerDiv" :id="'outerDiv'+index">
	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">
	41	<el-col :span="18">
	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>
	45	</el-row>
	46	<el-row style="height: 420px">
	47	<div class="centerImg">
	48	<el-image style="height: 400px;width: 400px;" :src="src"></el-image>
	49	</div>
	50
	51	<!-- {{src}}-->
	52	</el-row>
	53	<el-row style="height: 100%;width: 100%">
	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>
	56	</el-row>
	57	</el-card>
	58	</el-col>
	59	<el-col :span="6">
	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
	66	</el-row>
	67	<el-row style="height: 30%;margin-top: 40%" class="centerImg">
	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>
	69	</el-row>
	70	<el-row style="height: 30%;margin-top: 5%" class="centerImg">
	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>
	72	</el-row>
	73	<el-row style="height: 30%;margin-top: 5%" class="centerImg">
	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>
	75	</el-row>
	76	</el-card>
	77	</el-col>
	78
	79	</el-col>
	80	</el-row>
	81	<div>
	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">
	91	<el-button type="primary" @click="dialogVisible = false" style="margin-right: 80px">确定</el-button>
	92	</span>
	93	</el-dialog>
	94	</div>
	95	</div>
	96
	97	</template>
	98
	99	<script>
	100	import {getMainProductProcess, getProductProcess} from "@/api/main/bs/formulaChild/formulaChild";
	101	import {listStationConf,getIp} from "@/api/main/sc/stationConf";
	102
	103	export default {
	104	name: "index",
	105	data() {
	106	return {
	107	dialogVisible: false,
	108	mainProcessSrc: '',
	109	mainProcess: [],
	110	isClickd: '', // 初始化为未点击状态
	111	locationCode: "未配置",
	112	locationName: "未配置工位",
	113	queryParams: {
	114	pageNum: 1,
	115	pageSize: 10,
	116	productCode: null,
	117	},
	118	currentTime:'',
	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: '',
	166	// src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
	167	// src: 'file:///D:/img/qt.jpg'
	168
	169	intervalId: null,
	170
	171	};
	172	},
	173	created() {
	174	this.tableData = []
	175	},
	176	mounted() {
	177	this.getStationConf()
	178	// this.changeProducts(this.productCode)
	179	// this.changeProducts("2V91")
	180	this.getNowTime()
	181	// this.autoShow()
	182	},
	183	// computed: {
	184	// currentTime:
	185	// },
	186	methods: {
	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
	195	this.locationCode = response.rows[0].processesCode
	196	console.log('llllll',this.locationCode)
	197	this.changeProducts("2V91")
	198	});
	199
	200	});
	201
	202	},
	203	closeMethod(){
	204	this.mainProcessSrc = ''
	205	},
	206	//获取当前时间
	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	},
	225	// 定时触发
	226	autoShow() {
	227	const _this = this
	228	this.intervalId = setInterval(() => {
	229	_this.setBg()
	230	}, 10000)
	231	},
	232	setImg(index) {
	233	this.address = this.tableData[index].address
	234	this.src = this.tableData[index].img
	235	},
	236	cleanImg(){
	237	this.address = ''
	238	this.src = ''
	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)
	252	document.getElementById('outerDiv' + i).style.background = 'lightgreen'
	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)
	262	document.getElementById('outerDiv' + i).style.background = index < 0 ? 'white' : 'lightgreen'
	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(){
	275	getMainProductProcess(this.queryParams).then(res => {
	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
	282	},
	283	changeProducts(val){
	284
	285
	286	console.log("------更换图片",val)
	287	console.log("------目录==============",this.tableData)
	288	console.log("locationCode",this.locationCode)
	289	this.productCode = val
	290	const _this = this
	291
	292	this.isClickd = val; // 切换isClicked的值
	293	/** 查询配方配置子信息列表 */
	294	this.queryParams.productCode = val;
	295	this.queryParams.processesCode = this.locationCode
	296	getProductProcess(this.queryParams).then(response => {
	297	this.tableData = [];
	298	this.cleanImg()
	299	this.tableData = response.rows;
	300	this.$nextTick(() => {
	301	clearInterval(this.intervalId);
	302	document.getElementById('outerDiv0').style.background = 'yellow'
	303	for (let i = 1; i < this.tableData.length; i++){
	304	document.getElementById('outerDiv' + i).style.background = 'white'
	305	}
	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;
	320	min-width: 102%;
	321	/width: 300px;/
	322	height: 30px;
	323	margin-bottom: 5px;
	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;
	351	font-size: 20px;
	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;
	362	color: white;
	363	font-weight: bold;
	364	font-size: 20px;
	365	}
	366	.centerText{
	367	color: black;
	368	font-weight: bold;
	369	font-size: 20px;
	370	display: flex;
	371	justify-content: center;
	372	margin-top: 5px
	373	}
	374	.active {
	375	background-color: #31b431; /* 点击后的背景色 */
	376	}
	377	::v-deep .el-dialog {
	378	height: 90%;
	379	overflow-y: auto;
	380	}
	381	::v-deep .el-dialog__footer{
	382	margin-top: 10px;
	383	}
	384	::v-deep .el-card .is-always-shadow{
	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	}
	398
	399	</style>