From 7f1dbf4296013a4b15fbc2748de072f7c7ad4388 Mon Sep 17 00:00:00 2001 From: 懒羊羊 <15939171744@163.com> Date: 星期一, 15 一月 2024 16:42:54 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- jcdm-ui/src/views/index.vue | 140 ++++++++++++++++++++-------------------------- 1 files changed, 62 insertions(+), 78 deletions(-) diff --git a/jcdm-ui/src/views/index.vue b/jcdm-ui/src/views/index.vue index d382cd8..fc6881d 100644 --- a/jcdm-ui/src/views/index.vue +++ b/jcdm-ui/src/views/index.vue @@ -1,12 +1,14 @@ <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"> + <pie-chart /> + </el-col> + <el-col :xs="24" :sm="12"> + <line-chart :chart-data="lineChartData" /> </el-col> </el-row> @@ -14,83 +16,65 @@ </template> <script> +import PanelGroup from './dashboard/PanelGroup' +import LineChart from './dashboard/LineChart' +import PieChart from './dashboard/PieChart' + +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', + 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> -- Gitblit v1.9.3