春风项目四线(合箱线、总装线)
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>