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