春风项目四线(合箱线、总装线)
wujian
2024-01-18 b395c6c17048f4862dd07e54fdb2122905402794
提交 | 用户 | 时间
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>
27           <div v-for="(item,index) in tableData" :key="item.sort" class="outerDiv" :id="'outerDiv'+index">
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">
W 59               <el-button type="success" @click="changeProducts('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;">
W 62               <el-button type="info" @click="changeProducts('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;">
W 65               <el-button type="info" @click="changeProducts('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>
72   </div>
73 </template>
74
75 <script>
76 import {listFormulaChild} from "@/api/main/bs/formulaChild/formulaChild";
f5af64 77 import {listStationConf,getIp} from "@/api/main/sc/stationConf";
fd2207 78
79 export default {
80   name: "index",
81   data() {
82     return {
65dd24 83       locationCode: "未配置",
f5af64 84       locationName: "未配置工位",
fd2207 85       queryParams: {
86         pageNum: 1,
87         pageSize: 10,
88         productCode: null,
89       },
b6884f 90       currentTime:'',
fd2207 91       productCode: '2V91',
92       tableData: [{
93         img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
94         sort: '2',
95         address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
96       }, {
97         img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
98         sort: '2',
99         address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
100       }, {
101         img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
102         sort: '2',
103         address: '上海市普陀区金沙江路 1519 弄'
104       }, {
105         img: 'htts://fuss10.elemecdn.com/e/5d/4a731a90594',
106         sort: '2',
107         address: '上海市普陀区金沙江路 1516 弄'
108       }, {
109         img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
110         sort: '2',
111         address: '上海市普陀区金沙江路 1516 弄'
112       }, {
113         img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
114         sort: '2',
115         address: '上海市普陀区金沙江路 1516 弄'
116       }, {
117         img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
118         sort: '2',
119         address: '上海市普陀区金沙江路 1516 弄'
120       }, {
121         img: '222222222222',
122         sort: '2',
123         address: '上海市普陀区金沙江路 1516 弄'
124       }, {
125         img: 'https://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       address: '',
1558d8 138       // src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
fd2207 139       // src: 'file:///D:/img/qt.jpg'
140
141       intervalId: null,
142
143     };
144   },
145   created() {
146     this.tableData = []
147   },
148   mounted() {
f5af64 149     this.getStationConf()
65dd24 150     // this.changeProducts(this.productCode)
151     this.changeProducts("2V91")
b6884f 152     this.getNowTime()
fd2207 153     // this.autoShow()
154   },
b6884f 155   // computed: {
W 156   //   currentTime:
157   // },
fd2207 158   methods: {
f5af64 159     /** 查询工位终端配置列表 */
160     getStationConf() {
161       getIp().then(response => {
162         let queryParams = {
163           ipAddress: response.msg,
164         }
165         listStationConf(queryParams).then(response => {
166           this.locationName = response.rows[0].processesName
65dd24 167           this.locationCode = response.rows[0].processesCode
f5af64 168         });
169       });
170     },
b6884f 171     //获取当前时间
W 172     getNowTime () {
173       let speed = 1000
174       let that = this
175       let theNowTime = function () {
176         that.currentTime = that.timeNumber()
177       }
178       setInterval(theNowTime, speed)
179     },
180     timeNumber () {
181       let today = new Date()
182       let date = today.getFullYear() + '-' + this.twoDigits(today.getMonth() + 1) + '-' + this.twoDigits(today.getDate())
183       let time = this.twoDigits(today.getHours()) + ':' + this.twoDigits(today.getMinutes()) + ':' + this.twoDigits(today.getSeconds())
184       return date + '  ' + time
185     },
186     twoDigits (val) {
187       if (val < 10) return '0' + val
188       return val
189     },
fd2207 190     // 定时触发
191     autoShow() {
192       const _this = this
193       this.intervalId = setInterval(() => {
194         _this.setBg()
b6884f 195       }, 10000)
fd2207 196     },
197     setImg(index) {
198       this.address = this.tableData[index].address
199       this.src = this.tableData[index].img
200     },
201     setBg() {
202       if (document.getElementById('outerDiv' + (this.tableData.length - 1)).style.background === 'yellow') {
203         this.setImg(0)
204         document.getElementById('outerDiv0').style.background = 'yellow'
205         for (let j = 1; j < this.tableData.length; j++) {
206           document.getElementById('outerDiv' + j).style.background = 'white'
207         }
208         return;
209       }
210       for (let i = 0; i < this.tableData.length - 1; i++) {
211         if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
212           this.setImg(i+1)
b6884f 213           document.getElementById('outerDiv' + i).style.background = 'lightgreen'
fd2207 214           document.getElementById('outerDiv' + (i+1)).style.background = 'yellow'
215           return;
216         }
217       }
218     },
219     getUpOrDown(index) {
220       for (let i = 0; i < this.tableData.length; i++) {
221         if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
222           this.setImg(i + index)
b6884f 223           document.getElementById('outerDiv' + i).style.background = index < 0 ? 'white' : 'lightgreen'
fd2207 224           document.getElementById('outerDiv' + (i + index)).style.background = 'yellow'
225           return;
226         }
227       }
228     },
229     backClick(){
230       this.getUpOrDown(-1)
231     },
232     nextStep(){
233       this.getUpOrDown(1)
234     },
235     processDocuments(){
236
237     },
238     changeProducts(val){
239
b6884f 240       console.log("------更换图片",val)
fd2207 241       this.productCode = val
242       const _this = this
243
244       /** 查询配方配置子信息列表 */
245       this.queryParams.productCode = val;
246       listFormulaChild(this.queryParams).then(response => {
247         // this.tableData = [];
248         this.tableData = response.rows;
1558d8 249         console.log(response.rows)
fd2207 250         this.$nextTick(() => {
251           clearInterval(this.intervalId);
252           document.getElementById('outerDiv0').style.background = 'yellow'
b6884f 253           for (let i = 1; i < this.tableData.length; i++){
W 254             document.getElementById('outerDiv' + i).style.background =  'white'
255           }
fd2207 256           this.setImg(0)
257           this.autoShow()
258         })
259
260
261       });
262     },
263   },
264 }
265 </script>
266
267 <style scoped>
268 .outerDiv {
269   width: fit-content;
b6884f 270   min-width: 102%;
fd2207 271   /*width: 300px;*/
272   height: 50px;
273   margin-bottom: 10px;
274 }
275
276 .innerDiv1 {
277   /*width: 79%;*/
278   height: 100%;
279   display: flex;
280   align-items: center;
281   border: 1px solid black;
282 }
283
284 .innerDiv2 {
285   /*width: 20%;*/
286   width: 50px;
287   height: 100%;
288   display: flex;
289   justify-content: center;
290   align-items: center;
291   border: 1px solid black;
292 }
293
294 .content_left {
295   font-weight: bold;
296 }
297 .content_right {
298   white-space: nowrap;
299   padding-left: 5px;
300   padding-right: 5px;
301 }
302 .container {
303   display: flex;
304   justify-content: center;
305   align-items: center;
306   height: 100px; /* 设置div的高度,可根据实际情况调整 */
307 }
308
309 .centered {
310   text-align: center;
b6884f 311   color: white;
W 312   font-weight: bold;
313   font-size: 20px;
fd2207 314 }
b6884f 315 .centerText{
W 316   color: black;
317   font-weight: bold;
318   font-size: 40px;
319   display: flex;
320   justify-content: center;
321   margin-top: 20px
322 }
323 ::v-deep .el-card__body{
324   height: 100px;
325 }
326
fd2207 327
328 </style>