vue-mes
查看 | 历史 | 提交 | 提交对比
懒羊羊
2023-12-27 ac6dd934b8ea9473d85d95d60153e7c317778d33
提交 | 用户 | 时间
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 {
懒 78   name: "index",
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   },
懒 147   methods: {
ac6dd9 148     // 定时触发
1f26a7 149     autoShow() {
懒 150       const _this = this
c95cd5 151       this.intervalId = setInterval(() => {
1f26a7 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     },
c95cd5 196     changeProducts(val){
ac6dd9 197
c95cd5 198       this.productCode = val
懒 199       const _this = this
1f26a7 200
c95cd5 201       /** 查询配方配置子信息列表 */
懒 202       this.queryParams.productCode = val;
203       listFormulaChild(this.queryParams).then(response => {
ac6dd9 204         // this.tableData = [];
c95cd5 205         this.tableData = response.rows;
ac6dd9 206         this.$nextTick(() => {
懒 207           clearInterval(this.intervalId);
208           document.getElementById('outerDiv0').style.background = 'yellow'
209           this.setImg(0)
210           this.autoShow()
211         })
c95cd5 212
懒 213
214       });
1f26a7 215     },
懒 216   },
217 }
218 </script>
219
220 <style scoped>
221 .outerDiv {
222   width: fit-content;
223   min-width: 100%;
224   /*width: 300px;*/
225   height: 50px;
226   margin-bottom: 10px;
227 }
228
229 .innerDiv1 {
230   /*width: 79%;*/
231   height: 100%;
232   display: flex;
233   align-items: center;
234   border: 1px solid black;
235 }
236
237 .innerDiv2 {
238   /*width: 20%;*/
239   width: 50px;
240   height: 100%;
241   display: flex;
242   justify-content: center;
243   align-items: center;
244   border: 1px solid black;
245 }
246
247 .content_left {
248   font-weight: bold;
249 }
250 .content_right {
251   white-space: nowrap;
252   padding-left: 5px;
253   padding-right: 5px;
254 }
255 .container {
256   display: flex;
257   justify-content: center;
258   align-items: center;
259   height: 100px; /* 设置div的高度，可根据实际情况调整 */
260 }
261
262 .centered {
263   text-align: center;
264 }
265
266 </style>