<template>
|
<div class="app-container">
|
<el-row :gutter="3">
|
<el-col :span="6">
|
<el-card shadow="always" class="boxSize">
|
<div class="centerImg">
|
<img style="width: 140px;height: 30px;" src="@/assets/logo/jcdm2.png" alt="dark">
|
<!-- <span class="nextLine" style="font-weight: bold">{{currentTime}}</span>-->
|
</div>
|
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="always" class="boxSize">
|
<span class="centerText" style="height: 60px">{{locationCode}}</span>
|
</el-card>
|
</el-col>
|
<el-col :span="15">
|
<el-card shadow="always" class="boxSize">
|
<span class="centerText" >{{locationName}}</span>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3" style="margin-top: 5px">
|
<el-col :span="6">
|
<div style="height: 550px;overflow: auto;">
|
<div class="container" style="height: 50px;background-color: #00afff;margin-bottom: 5px">
|
<span class="centered">作业流程</span>
|
</div>
|
<div v-for="(item,index) in tableData" :key="item.index" class="outerDiv" :id="'outerDiv'+index">
|
<div class="innerDiv1">
|
<div class="innerDiv2">
|
<span class="content_left">{{ index+1 }}</span>
|
</div>
|
<div class="content_right">{{ item.address }}</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="18">
|
<el-col :span="18">
|
<el-card style="height: 550px" shadow="always">
|
<el-row style="height: 60px">
|
<span style="color: #31b431;font-size: 20px;font-weight: bold">{{address}}</span>
|
</el-row>
|
<el-row style="height: 420px">
|
<div class="centerImg">
|
<el-image style="height: 400px;width: 400px;" :src="src"></el-image>
|
</div>
|
|
<!-- {{src}}-->
|
</el-row>
|
<el-row style="height: 100%;width: 100%">
|
<el-button type="primary" @click="backClick()" style="height: 50%; width: 20%; font-size: 20%; float: left" icon="el-icon-d-arrow-left">上一步</el-button>
|
<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>
|
</el-row>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card style="height: 550px;width: 100%" shadow="always">
|
<el-row >
|
<div class="centerImg" style="height: 30%; margin-top: 60%">
|
<el-button type="primary" @click="processDocuments()" style="height: 40%; width: 90%; font-size: 70%; float: left" icon="el-icon-folder-opened">工艺文件</el-button>
|
</div>
|
|
</el-row>
|
<el-row style="height: 30%;margin-top: 40%" class="centerImg">
|
<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>
|
</el-row>
|
<el-row style="height: 30%;margin-top: 5%" class="centerImg">
|
<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>
|
</el-row>
|
<el-row style="height: 30%;margin-top: 5%" class="centerImg">
|
<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>
|
</el-row>
|
</el-card>
|
</el-col>
|
|
</el-col>
|
</el-row>
|
<div>
|
<el-dialog
|
title="工艺文件"
|
:visible.sync="dialogVisible"
|
width="70%"
|
@close="closeMethod"
|
|
>
|
<div><el-image style="height: 1090px;width: 960px;margin-left: 33px" :src="mainProcessSrc"></el-image></div>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="dialogVisible = false" style="margin-right: 80px">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
import {getMainProductProcess, getProductProcess} from "@/api/main/bs/formulaChild/formulaChild";
|
import {listStationConf,getIp} from "@/api/main/sc/stationConf";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
dialogVisible: false,
|
mainProcessSrc: '',
|
mainProcess: [],
|
isClickd: '', // 初始化为未点击状态
|
locationCode: "未配置",
|
locationName: "未配置工位",
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
productCode: null,
|
},
|
currentTime:'',
|
productCode: '2V91',
|
tableData: [{
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1519 弄'
|
}, {
|
img: 'htts://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: '222222222222',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
sort: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}],
|
address: '',
|
// src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
|
// src: 'file:///D:/img/qt.jpg'
|
|
intervalId: null,
|
|
};
|
},
|
created() {
|
this.tableData = []
|
},
|
mounted() {
|
this.getStationConf()
|
// this.changeProducts(this.productCode)
|
// this.changeProducts("2V91")
|
this.getNowTime()
|
// this.autoShow()
|
},
|
// computed: {
|
// currentTime:
|
// },
|
methods: {
|
/** 查询工位终端配置列表 */
|
getStationConf() {
|
getIp().then(response => {
|
let queryParams = {
|
ipAddress: response.msg,
|
}
|
listStationConf(queryParams).then(response => {
|
this.locationName = response.rows[0].processesName
|
this.locationCode = response.rows[0].processesCode
|
console.log('llllll',this.locationCode)
|
this.changeProducts("2V91")
|
});
|
|
});
|
|
},
|
closeMethod(){
|
this.mainProcessSrc = ''
|
},
|
//获取当前时间
|
getNowTime () {
|
let speed = 1000
|
let that = this
|
let theNowTime = function () {
|
that.currentTime = that.timeNumber()
|
}
|
setInterval(theNowTime, speed)
|
},
|
timeNumber () {
|
let today = new Date()
|
let date = today.getFullYear() + '-' + this.twoDigits(today.getMonth() + 1) + '-' + this.twoDigits(today.getDate())
|
let time = this.twoDigits(today.getHours()) + ':' + this.twoDigits(today.getMinutes()) + ':' + this.twoDigits(today.getSeconds())
|
return date + ' ' + time
|
},
|
twoDigits (val) {
|
if (val < 10) return '0' + val
|
return val
|
},
|
// 定时触发
|
autoShow() {
|
const _this = this
|
this.intervalId = setInterval(() => {
|
_this.setBg()
|
}, 10000)
|
},
|
setImg(index) {
|
this.address = this.tableData[index].address
|
this.src = this.tableData[index].img
|
},
|
cleanImg(){
|
this.address = ''
|
this.src = ''
|
},
|
setBg() {
|
if (document.getElementById('outerDiv' + (this.tableData.length - 1)).style.background === 'yellow') {
|
this.setImg(0)
|
document.getElementById('outerDiv0').style.background = 'yellow'
|
for (let j = 1; j < this.tableData.length; j++) {
|
document.getElementById('outerDiv' + j).style.background = 'white'
|
}
|
return;
|
}
|
for (let i = 0; i < this.tableData.length - 1; i++) {
|
if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
|
this.setImg(i+1)
|
document.getElementById('outerDiv' + i).style.background = 'lightgreen'
|
document.getElementById('outerDiv' + (i+1)).style.background = 'yellow'
|
return;
|
}
|
}
|
},
|
getUpOrDown(index) {
|
for (let i = 0; i < this.tableData.length; i++) {
|
if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
|
this.setImg(i + index)
|
document.getElementById('outerDiv' + i).style.background = index < 0 ? 'white' : 'lightgreen'
|
document.getElementById('outerDiv' + (i + index)).style.background = 'yellow'
|
return;
|
}
|
}
|
},
|
backClick(){
|
this.getUpOrDown(-1)
|
},
|
nextStep(){
|
this.getUpOrDown(1)
|
},
|
processDocuments(){
|
getMainProductProcess(this.queryParams).then(res => {
|
this.mainProcess = res.rows
|
if (res.rows!=null && res.rows.length>0){
|
this.mainProcessSrc = res.rows[0].img
|
}
|
})
|
this.dialogVisible = true
|
},
|
changeProducts(val){
|
|
|
console.log("------更换图片",val)
|
console.log("------目录==============",this.tableData)
|
console.log("locationCode",this.locationCode)
|
this.productCode = val
|
const _this = this
|
|
this.isClickd = val; // 切换isClicked的值
|
/** 查询配方配置子信息列表 */
|
this.queryParams.productCode = val;
|
this.queryParams.processesCode = this.locationCode
|
getProductProcess(this.queryParams).then(response => {
|
this.tableData = [];
|
this.cleanImg()
|
this.tableData = response.rows;
|
this.$nextTick(() => {
|
clearInterval(this.intervalId);
|
document.getElementById('outerDiv0').style.background = 'yellow'
|
for (let i = 1; i < this.tableData.length; i++){
|
document.getElementById('outerDiv' + i).style.background = 'white'
|
}
|
this.setImg(0)
|
this.autoShow()
|
})
|
|
|
});
|
},
|
},
|
}
|
</script>
|
|
<style scoped>
|
.outerDiv {
|
width: fit-content;
|
min-width: 102%;
|
/*width: 300px;*/
|
height: 30px;
|
margin-bottom: 5px;
|
}
|
|
.innerDiv1 {
|
/*width: 79%;*/
|
height: 100%;
|
display: flex;
|
align-items: center;
|
border: 1px solid black;
|
}
|
|
.innerDiv2 {
|
/*width: 20%;*/
|
width: 50px;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border: 1px solid black;
|
}
|
|
.content_left {
|
font-weight: bold;
|
}
|
.content_right {
|
white-space: nowrap;
|
padding-left: 5px;
|
padding-right: 5px;
|
font-size: 20px;
|
}
|
.container {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100px; /* 设置div的高度，可根据实际情况调整 */
|
}
|
|
.centered {
|
text-align: center;
|
color: white;
|
font-weight: bold;
|
font-size: 20px;
|
}
|
.centerText{
|
color: black;
|
font-weight: bold;
|
font-size: 20px;
|
display: flex;
|
justify-content: center;
|
margin-top: 5px
|
}
|
.active {
|
background-color: #31b431; /* 点击后的背景色 */
|
}
|
::v-deep .el-dialog {
|
height: 90%;
|
overflow-y: auto;
|
}
|
::v-deep .el-dialog__footer{
|
margin-top: 10px;
|
}
|
::v-deep .el-card .is-always-shadow{
|
height: 60px;
|
}
|
.boxSize{
|
height: 60px;
|
}
|
.nextLine{
|
display: block;
|
}
|
.centerImg{
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
</style>
|
