春风项目四线(合箱线、总装线)
查看 | 历史 | 提交 | 提交对比
cl
2024-01-15 9c21d0b197cee42ab475570f82eba18cd9307e70
提交 | 用户 | 时间
fd2207 1 <template>
懒 2   <div class="app-container">
3     <el-row :gutter="3">
4       <el-col :span="6">
5         <el-card shadow="always">
6           CFMOTO
7         </el-card>
8       </el-col>
9       <el-col :span="3">
10         <el-card shadow="always">
11           {{productCode}}
12         </el-card>
13       </el-col>
14       <el-col :span="15">
15         <el-card shadow="always">
16           装副轴,拨叉
17         </el-card>
18       </el-col>
19     </el-row>
20     <el-row :gutter="3" style="margin-top: 5px">
21       <el-col :span="6">
22         <div style="height: 600px;overflow: auto;">
23           <div  class="container" style="height: 50px;background-color: #00afff;margin-bottom: 10px">
24             <span class="centered">居中文本</span>
25           </div>
26           <div v-for="(item,index) in tableData" :key="item.sort" class="outerDiv" :id="'outerDiv'+index">
27             <div class="innerDiv1">
28               <div class="innerDiv2">
29                 <span class="content_left">{{ index+1 }}</span>
30               </div>
31               <div class="content_right">{{ item.address }}</div>
32             </div>
33           </div>
34         </div>
35       </el-col>
36       <el-col :span="18">
37         <el-col :span="20">
38           <el-card style="height: 600px" shadow="always">
39             <el-row style="height: 100px">
40               {{address}}
41             </el-row>
42             <el-row style="height: 400px">
43               <el-image style="height: 390px;width: 960px" :src="src"></el-image>
44 <!--              {{src}}-->
45             </el-row>
46             <el-row style="height: 100px">
47               <el-button type="primary" @click="backClick()" style="float: left" icon="el-icon-arrow-left">上一步</el-button>
48               <el-button type="primary" @click="nextStep()" style="float: right">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
49             </el-row>
50           </el-card>
51         </el-col>
52         <el-col :span="4">
53           <el-card style="height: 600px" shadow="always">
54             <el-row style="height: 100px;margin-top: 100px">
55               <el-button type="primary" @click="processDocuments()" style="float: left" icon="el-icon-folder-opened">工艺文件</el-button>
56             </el-row>
57             <el-row style="height: 50px;margin-top: 5px">
58               <el-button type="primary" @click="changeProducts('2V91')" style="width: 100px" icon="el-icon-s-unfold">2V91</el-button>
59             </el-row>
60             <el-row style="height: 50px;">
61               <el-button type="primary" @click="changeProducts('191')" style="width: 100px" icon="el-icon-s-unfold">191</el-button>
62             </el-row>
63             <el-row style="height: 50px;">
64               <el-button type="primary" @click="changeProducts('0JWF')" style="width: 100px" icon="el-icon-s-unfold">0JWF</el-button>
65             </el-row>
66           </el-card>
67         </el-col>
68
69       </el-col>
70     </el-row>
71   </div>
72 </template>
73
74 <script>
75 import {listFormulaChild} from "@/api/main/bs/formulaChild/formulaChild";
76
77 export default {
78   name: "index",
79   data() {
80     return {
81       queryParams: {
82         pageNum: 1,
83         pageSize: 10,
84         productCode: null,
85       },
86       productCode: '2V91',
87       tableData: [{
88         img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
89         sort: '2',
90         address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
91       }, {
92         img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
93         sort: '2',
94         address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
95       }, {
96         img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
97         sort: '2',
98         address: '上海市普陀区金沙江路 1519 弄'
99       }, {
100         img: 'htts://fuss10.elemecdn.com/e/5d/4a731a90594',
101         sort: '2',
102         address: '上海市普陀区金沙江路 1516 弄'
103       }, {
104         img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
105         sort: '2',
106         address: '上海市普陀区金沙江路 1516 弄'
107       }, {
108         img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
109         sort: '2',
110         address: '上海市普陀区金沙江路 1516 弄'
111       }, {
112         img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
113         sort: '2',
114         address: '上海市普陀区金沙江路 1516 弄'
115       }, {
116         img: '222222222222',
117         sort: '2',
118         address: '上海市普陀区金沙江路 1516 弄'
119       }, {
120         img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
121         sort: '2',
122         address: '上海市普陀区金沙江路 1516 弄'
123       }, {
124         img: 'https://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       address: '',
1558d8 133       // src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
fd2207 134       // src: 'file:///D:/img/qt.jpg'
懒 135
136       intervalId: null,
137
138     };
139   },
140   created() {
141     this.tableData = []
142   },
143   mounted() {
144     this.changeProducts(this.productCode)
145     // this.autoShow()
146   },
147   methods: {
148     // 定时触发
149     autoShow() {
150       const _this = this
151       this.intervalId = setInterval(() => {
152         _this.setBg()
153       }, 2000)
154     },
155     setImg(index) {
156       this.address = this.tableData[index].address
157       this.src = this.tableData[index].img
158     },
159     setBg() {
160       if (document.getElementById('outerDiv' + (this.tableData.length - 1)).style.background === 'yellow') {
161         this.setImg(0)
162         document.getElementById('outerDiv0').style.background = 'yellow'
163         for (let j = 1; j < this.tableData.length; j++) {
164           document.getElementById('outerDiv' + j).style.background = 'white'
165         }
166         return;
167       }
168       for (let i = 0; i < this.tableData.length - 1; i++) {
169         if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
170           this.setImg(i+1)
171           document.getElementById('outerDiv' + i).style.background = 'green'
172           document.getElementById('outerDiv' + (i+1)).style.background = 'yellow'
173           return;
174         }
175       }
176     },
177     getUpOrDown(index) {
178       for (let i = 0; i < this.tableData.length; i++) {
179         if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
180           this.setImg(i + index)
181           document.getElementById('outerDiv' + i).style.background = index < 0 ? 'white' : 'green'
182           document.getElementById('outerDiv' + (i + index)).style.background = 'yellow'
183           return;
184         }
185       }
186     },
187     backClick(){
188       this.getUpOrDown(-1)
189     },
190     nextStep(){
191       this.getUpOrDown(1)
192     },
193     processDocuments(){
194
195     },
196     changeProducts(val){
197
198       this.productCode = val
199       const _this = this
200
201       /** 查询配方配置子信息列表 */
202       this.queryParams.productCode = val;
203       listFormulaChild(this.queryParams).then(response => {
204         // this.tableData = [];
205         this.tableData = response.rows;
1558d8 206         console.log(response.rows)
fd2207 207         this.$nextTick(() => {
懒 208           clearInterval(this.intervalId);
209           document.getElementById('outerDiv0').style.background = 'yellow'
210           this.setImg(0)
211           this.autoShow()
212         })
213
214
215       });
216     },
217   },
218 }
219 </script>
220
221 <style scoped>
222 .outerDiv {
223   width: fit-content;
224   min-width: 100%;
225   /*width: 300px;*/
226   height: 50px;
227   margin-bottom: 10px;
228 }
229
230 .innerDiv1 {
231   /*width: 79%;*/
232   height: 100%;
233   display: flex;
234   align-items: center;
235   border: 1px solid black;
236 }
237
238 .innerDiv2 {
239   /*width: 20%;*/
240   width: 50px;
241   height: 100%;
242   display: flex;
243   justify-content: center;
244   align-items: center;
245   border: 1px solid black;
246 }
247
248 .content_left {
249   font-weight: bold;
250 }
251 .content_right {
252   white-space: nowrap;
253   padding-left: 5px;
254   padding-right: 5px;
255 }
256 .container {
257   display: flex;
258   justify-content: center;
259   align-items: center;
260   height: 100px; /* 设置div的高度，可根据实际情况调整 */
261 }
262
263 .centered {
264   text-align: center;
265 }
266
267 </style>