From 8adcecc06caa279e6dba258406cd48109b47884e Mon Sep 17 00:00:00 2001
From: jiang <1354748262@qq.com>
Date: 星期二, 23 一月 2024 10:56:58 +0800
Subject: [PATCH] 首页提交代码
---
jcdm-ui/src/views/index.vue | 152 ++++++++++++++++++++++++--------------------------
1 files changed, 74 insertions(+), 78 deletions(-)
diff --git a/jcdm-ui/src/views/index.vue b/jcdm-ui/src/views/index.vue
index d382cd8..37ff1f2 100644
--- a/jcdm-ui/src/views/index.vue
+++ b/jcdm-ui/src/views/index.vue
@@ -1,12 +1,20 @@
<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>
@@ -14,83 +22,71 @@
</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>
--
Gitblit v1.9.3