美的大屏
查看 | 历史 | 提交 | 提交对比
懒羊羊
2024-01-23 4f91e27a1a497b5ed9de6be2267a8a57085e7c82
提交 | 用户 | 时间
9715e8 1 <template>
懒 2   <div class="main">
3     <div style="width: 640px;height: 440px;float: left;">
4       <dv-border-box-2>
5         <div>
6           <div class="d-flex pt-2 pl-2">
7         <span>
8           <icon name="chart-line" style="background-color: #c3cbde" class="text-icon"></icon>
9         </span>
10             <div class="d-flex">
11               <span class="fs-xl text mx-2">不良分布</span>
12             </div>
13           </div>
14           <BottomLeftChart />
15         </div>
16       </dv-border-box-2>
17     </div>
18     <div style="width: 872px;height: 440px;float: right">
19       <dv-border-box-2>
20       <div id="centerRight1">
21         <div class="bg-color-black">
22           <div class="d-flex jc-center body-box">
23             <dv-scroll-board class="dv-scr-board" :config="config" />
24           </div>
25         </div>
26       </div>
27       </dv-border-box-2>
28
29     </div>
30   </div>
31 </template>
32
33 <script>
34 import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart'
35
36
37 export default {
38   name: "center",
39   components: {
40     BottomLeftChart,
41   },
42   data() {
43     return {
44       value:'',
45       config: {
46         header: ['时间', '目标', '实际产量', '差异', '良率'],
47         data: [
48           ['<span style=\'font-size: 20px\' class=\'colorRed\'>8:00</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>0</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>100%</span>'],
49           ['<span style=\'font-size: 20px\' class=\'colorRed\'>9:00</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>30</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>40</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>100%</span>'],
50           ['<span style=\'font-size: 20px\' class=\'colorRed\'>10:00</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>0</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>100%</span>'],
51           ['<span style=\'font-size: 20px\' class=\'colorRed\'>11:00</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>0</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>100%</span>'],
52           ['<span style=\'font-size: 20px\' class=\'colorRed\'>12:00</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>0</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>100%</span>'],
53           ['<span style=\'font-size: 20px\' class=\'colorRed\'>13:00</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>0</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>100%</span>'],
54           ['<span style=\'font-size: 20px\' class=\'colorRed\'>14:00</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>0</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>100%</span>'],
55           ['<span style=\'font-size: 20px\' class=\'colorRed\'>15:00</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>0</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>100%</span>'],
56           ['<span style=\'font-size: 20px\' class=\'colorRed\'>16:00</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>0</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>100%</span>'],
57           ['<span style=\'font-size: 20px\' class=\'colorRed\'>17:00</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>', '<span style=\'font-size: 20px\' class=\'colorRed\'>0</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>70</span>','<span style=\'font-size: 20px\' class=\'colorRed\'>100%</span>'],
58           //
59           // ['9:00', '70', "10","60","90%"],
60           // ['10:00', '70', "3","67","100%"],
61           // ['11:00', '70', "2","68","50%"],
62           // ['12:00', '70', "1","69","100%"],
63           // ['13:00', '70', "4","66","100%"],
64           // ['14:00', '70', "5","65","100%"],
65           // ['15:00', '70', "0","70","100%"],
66           // ['16:00', '70', "0","70","100%"],
67           // ['17:00', '70', "0","70","100%"],
68         ],
69         rowNum: 7, //表格行数
70         headerHeight: 35,
71         headerBGC: '#0f1325', //表头
72         oddRowBGC: '#0f1325', //奇数行
73         evenRowBGC: '#171c33', //偶数行
74         index: true,
75         columnWidth: [50],
76         align: ['center'],
77       }
78     }
79   },
80   mounted() {
4f91e2 81     this.tops();
9715e8 82     this.changeTiming();
懒 83     this.$bus.$on('refresh-components', (value) => {
84       // 刷新初始化方法
85       this.value = value;
86       this.tops();
87     })
88   },
89   methods: {
90     tops(){
91       // this.$http.get('http://127.0.0.1:8080/productionOrdeInfo/centerRightData?workOrderNo='+this.value)
92       this.$http.get('http://172.20.1.10:8080/productionOrdeInfo/centerRightData?workOrderNo='+this.value)
93           .then((response)=>{
94             this.config = {
95               header: ['时间', '目标', '实际产量', '差异', '良率'],
96               data:  response.data.data,
97               rowNum: 7, //表格行数
98               headerHeight: 35,
99               headerBGC: '#0f1325', //表头
100               oddRowBGC: '#0f1325', //奇数行
101               evenRowBGC: '#171c33', //偶数行
102               index: true,
103               columnWidth: [50],
104               align: ['center'],
105             }
106             console.log(response.data.data)
107           })
108     },
109     changeTiming() {
110       setInterval(() => {
111         this.tops();
112       }, 300000)
113     },
114   }
115 }
116 </script>
117
118 <style lang="scss" scoped>
119 $box-height: 440px;
120 $box-width: 867px;
121 .body-box {
122   border-radius: 10px;
123   overflow: hidden;
124   .dv-scr-board {
125     width: 100%;
126     height: 360px;
127   }
128 }
129 #centerRight1 {
130   padding: 5px;
131   padding-top: 20px;
132   height: $box-height;
133   width: $box-width;
134   border-radius: 5px;
135   .bg-color-black {
136     height: $box-height - 30px;
137     border-radius: 10px;
138   }
139   .text {
140     color: #c3cbde;
141     font-size: 20px;
142     margin-top: -1px;
143   }
144   .body-box {
145     border-radius: 10px;
146     overflow: hidden;
147     .dv-scr-board {
148       width: $box-width;
149       height: $box-height - 60px;
150     }
151   }
152 }
153 .text {
154   color: #c3cbde;
155   font-size: 20px;
156   margin-top: -1px;
157 }
158 </style>