| | |
| | | <template> |
| | | <div class="app-container home"> |
| | | <el-row :gutter="20"> |
| | | <el-col :sm="24" :lg="24"> |
| | | <blockquote class="text-warning" style="font-size: 14px"> |
| | | 江宸MES管理系统 |
| | | </blockquote> |
| | | <div class="dashboard-editor-container"> |
| | | |
| | | <hr /> |
| | | <panel-group @handleSetLineChartData="handleSetLineChartData" /> |
| | | |
| | | <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;"> |
| | | <el-col :xs="24" :sm="12"> |
| | | <el-card> |
| | | <pie-chart /> |
| | | </el-card> |
| | | </el-col> |
| | | |
| | | <el-col :xs="24" :sm="12"> |
| | | <el-card> |
| | | <line-chart :chart-data="lineChartData" /> |
| | | </el-card> |
| | | |
| | | </el-col> |
| | | </el-row> |
| | | |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import PanelGroup from './dashboard/PanelGroup' |
| | | import LineChart from './dashboard/LineChart' |
| | | import PieChart from './dashboard/PieChart' |
| | | import pieChart from "@/views/dashboard/PieChart.vue"; |
| | | |
| | | const lineChartData = { |
| | | newVisitis: { |
| | | expectedData: [100, 120, 161, 134, 105, 160, 165], |
| | | actualData: [120, 82, 91, 154, 162, 140, 145] |
| | | }, |
| | | messages: { |
| | | expectedData: [200, 192, 120, 144, 160, 130, 140], |
| | | actualData: [180, 160, 151, 106, 145, 150, 130] |
| | | }, |
| | | purchases: { |
| | | expectedData: [80, 100, 121, 104, 105, 90, 100], |
| | | actualData: [120, 90, 100, 138, 142, 130, 130] |
| | | }, |
| | | shoppings: { |
| | | expectedData: [130, 140, 141, 142, 145, 150, 160], |
| | | actualData: [120, 82, 91, 154, 162, 140, 130] |
| | | } |
| | | } |
| | | |
| | | export default { |
| | | name: "Index", |
| | | name: 'Index', |
| | | computed: { |
| | | pieChart() { |
| | | return pieChart |
| | | } |
| | | }, |
| | | components: { |
| | | PanelGroup, |
| | | LineChart, |
| | | PieChart |
| | | }, |
| | | data() { |
| | | return { |
| | | // 版本号 |
| | | version: "3.8.6" |
| | | }; |
| | | lineChartData: lineChartData.newVisitis |
| | | } |
| | | }, |
| | | methods: { |
| | | goTarget(href) { |
| | | window.open(href, "_blank"); |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .home { |
| | | blockquote { |
| | | padding: 10px 20px; |
| | | margin: 0 0 20px; |
| | | font-size: 17.5px; |
| | | border-left: 5px solid #eee; |
| | | } |
| | | hr { |
| | | margin-top: 20px; |
| | | margin-bottom: 20px; |
| | | border: 0; |
| | | border-top: 1px solid #eee; |
| | | } |
| | | .col-item { |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | ul { |
| | | padding: 0; |
| | | margin: 0; |
| | | } |
| | | |
| | | font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; |
| | | font-size: 13px; |
| | | color: #676a6c; |
| | | overflow-x: hidden; |
| | | |
| | | ul { |
| | | list-style-type: none; |
| | | } |
| | | |
| | | h4 { |
| | | margin-top: 0px; |
| | | } |
| | | |
| | | h2 { |
| | | margin-top: 10px; |
| | | font-size: 26px; |
| | | font-weight: 100; |
| | | } |
| | | |
| | | p { |
| | | margin-top: 10px; |
| | | |
| | | b { |
| | | font-weight: 700; |
| | | } |
| | | } |
| | | |
| | | .update-log { |
| | | ol { |
| | | display: block; |
| | | list-style-type: decimal; |
| | | margin-block-start: 1em; |
| | | margin-block-end: 1em; |
| | | margin-inline-start: 0; |
| | | margin-inline-end: 0; |
| | | padding-inline-start: 40px; |
| | | handleSetLineChartData(type) { |
| | | this.lineChartData = lineChartData[type] |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .dashboard-editor-container { |
| | | padding: 32px; |
| | | background-color: rgb(240, 242, 245); |
| | | position: relative; |
| | | |
| | | .chart-wrapper { |
| | | background: #fff; |
| | | padding: 16px 16px 0; |
| | | margin-bottom: 32px; |
| | | } |
| | | } |
| | | |
| | | @media (max-width:1024px) { |
| | | .chart-wrapper { |
| | | padding: 8px; |
| | | } |
| | | } |
| | | </style> |