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