春风项目四线(合箱线、总装线)
懒羊羊
2024-01-15 7f1dbf4296013a4b15fbc2748de072f7c7ad4388
提交 | 用户 | 时间
fd2207 1 <template>
0899ce 2   <div class="dashboard-editor-container">
fd2207 3
0899ce 4     <panel-group @handleSetLineChartData="handleSetLineChartData" />
J 5
6     <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
7       <el-col :xs="24" :sm="12">
8         <pie-chart />
9       </el-col>
10       <el-col :xs="24" :sm="12">
11         <line-chart :chart-data="lineChartData" />
fd2207 12       </el-col>
13     </el-row>
14
15   </div>
16 </template>
17
18 <script>
0899ce 19 import PanelGroup from './dashboard/PanelGroup'
J 20 import LineChart from './dashboard/LineChart'
21 import PieChart from './dashboard/PieChart'
22
23 const lineChartData = {
24   newVisitis: {
25     expectedData: [100, 120, 161, 134, 105, 160, 165],
26     actualData: [120, 82, 91, 154, 162, 140, 145]
27   },
28   messages: {
29     expectedData: [200, 192, 120, 144, 160, 130, 140],
30     actualData: [180, 160, 151, 106, 145, 150, 130]
31   },
32   purchases: {
33     expectedData: [80, 100, 121, 104, 105, 90, 100],
34     actualData: [120, 90, 100, 138, 142, 130, 130]
35   },
36   shoppings: {
37     expectedData: [130, 140, 141, 142, 145, 150, 160],
38     actualData: [120, 82, 91, 154, 162, 140, 130]
39   }
40 }
41
fd2207 42 export default {
0899ce 43   name: 'Index',
J 44   components: {
45     PanelGroup,
46     LineChart,
47     PieChart
48   },
fd2207 49   data() {
50     return {
0899ce 51       lineChartData: lineChartData.newVisitis
J 52     }
fd2207 53   },
54   methods: {
0899ce 55     handleSetLineChartData(type) {
J 56       this.lineChartData = lineChartData[type]
fd2207 57     }
58   }
59 }
0899ce 60 </script>
fd2207 61
0899ce 62 <style lang="scss" scoped>
J 63 .dashboard-editor-container {
64   padding: 32px;
65   background-color: rgb(240, 242, 245);
66   position: relative;
67
68   .chart-wrapper {
69     background: #fff;
70     padding: 16px 16px 0;
71     margin-bottom: 32px;
72   }
73 }
74
75 @media (max-width:1024px) {
76   .chart-wrapper {
77     padding: 8px;
78   }
79 }
80 </style>