美的大屏
查看 | 历史 | 提交 | 提交对比
懒羊羊
2024-01-23 4f91e27a1a497b5ed9de6be2267a8a57085e7c82
提交 | 用户 | 时间
9715e8 1 <template>
懒 2   <div id="main">
3     <div class="bg-color-black">
4       <div class="d-flex pt-2 pl-2">
5         <span>
6           <icon name="chart-line" style="background-color: #c3cbde" class="text-icon"></icon>
7         </span>
8         <div class="d-flex">
9           <span class="fs-xl text mx-2">物料剩余</span>
10         </div>
11       </div>
12       <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
44a5b1 13       <dv-scroll-board class="dv-scr-board" :config="config" ifBorderBottom />
9715e8 14
懒 15     </div>
16   </div>
17 </template>
18
19 <script>
20
21 export default {
22   name: "left",
23   data() {
24     return {
25       value:'',
26       config: {
44a5b1 27         header: ['工位', '油脂到期', '剩余天数'],
9715e8 28         data: [
44a5b1 29           ['<span style=\'font-size: 20px\'>DOP020</span>', '<span style=\'font-size: 20px\'>20241211</span>', '<span style=\'font-size: 20px\'>365</span>'],
懒 30           ['<span style=\'font-size: 20px\'>OP050</span>', '<span style=\'font-size: 20px\'>20241211</span>', '<span style=\'font-size: 20px\'>365</span>',],
31           ['<span style=\'font-size: 20px\'>BOP30/40</span>', '<span style=\'font-size: 20px\'>20241211</span>', '<span style=\'font-size: 20px\'>365</span>'],
9715e8 32         ],
懒 33         rowNum: 7, //表格行数
34         headerHeight: 35,
35         headerBGC: '#0f1325', //表头
36         oddRowBGC: '#0f1325', //奇数行
37         evenRowBGC: '#171c33', //偶数行
38         index: true,
39         columnWidth: [20],
40         align: ['center'],
41       },
42       ranking: {
43         data: [
44           {
45             name: '扭力传感器',
46             value: 0
47           },
48           {
49             name: 'PCB板',
50             value: 0
51           },
52           {
53             name: '齿轮盖组件',
54             value: 0
55           },
56           {
57             name: '左壳体',
58             value: 0
59           },
60           {
61             name: '齿轮盖',
62             value: 0
63           },
64           {
65             name: '右壳体',
66             value: 0
67           },
68           {
69             name: '牙盘承座组件',
70             value: 0
71           },
72           {
73             name: '牙盘承座',
74             value: 0
75           },
76           {
77             name: 'NK172312滚针轴承',
78             value: 0
79           },
80           {
81             name: '自润滑轴承',
82             value: 0
83           },
84           {
85             name: '双唇油封',
86             value: 0
87           },
88           {
89             name: '超越离合器',
90             value: 0
91           },
92           {
93             name: '输出齿轮',
94             value: 0
95           },
96           {
97             name: 'C29挡圈',
98             value: 0
99           },
100           {
101             name: '右导热硅胶片',
102             value: 0
103           },
104           {
105             name: '左壳体总成',
106             value: 0
107           }
108         ],
109         carousel: 'single',
110         unit: '个'
111       },
112     }
113   },
114   mounted() {
115     this.tops();
116     this.changeTiming();
117     // this.$bus.$on('refresh-components', (value) => {
118     //   // 刷新初始化方法
119     //   this.value = value;
120     //   this.tops();
121     // })
122   },
123   methods: {
124     tops(){
4f91e2 125       this.$http.get('http://127.0.0.1:8080/greaseBoard/bigListGreaseBoard')
懒 126       // this.$http.get('http://172.20.1.10:8080/greaseBoard/bigListGreaseBoard')
9715e8 127           .then((response)=>{
懒 128             this.config = {
129               header: ['工位', '到期时间', '剩余天数'],
130               data:  response.data.data,
131               rowNum: 7, //表格行数
132               headerHeight: 35,
133               headerBGC: '#0f1325', //表头
134               oddRowBGC: '#0f1325', //奇数行
135               evenRowBGC: '#171c33', //偶数行
136               index: true,
137               columnWidth: [20],
138               align: ['center'],
139             }
140             console.log(response.data.data)
141           })
142     },
143     changeTiming() {
144       setInterval(() => {
145         this.tops();
4f91e2 146       }, 6000)
9715e8 147     },
懒 148   }
149 }
150 </script>
151
152 <style lang="scss" scoped>
153 $box-width: 450px;
154 $box-height: 710px;
155 #main {
156   padding: 5px;
157   height: $box-height;
158   width: $box-width;
159   border-radius: 10px;
160 }
161 .bg-color-black{
162   //margin-left: 12px;
163   //height: 710px;
164   height: 470px;
165   width: 365px;
166 }
167 .text {
168   color: #c3cbde;
169   font-size: 20px;
170   margin-top: -1px;
171 }
44a5b1 172 //.dv-scr-board{
懒 173   .row-item{
174     border-bottom: 3px solid #00BAFF;
175   }
176 //}
177
9715e8 178
懒 179 </style>