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