change - 首页图表

src/views/dashboard/PanelGroup.vue

@@ -3,52 +3,52 @@
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
         <div class="card-panel-icon-wrapper icon-people">
-          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+          <svg-icon icon-class="list" class-name="card-panel-icon"/>
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            访客
+            计划订单数量
           </div>
-          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
+          <count-to :start-val="0" :end-val="topData.value1" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('messages')">
         <div class="card-panel-icon-wrapper icon-message">
-          <svg-icon icon-class="message" class-name="card-panel-icon" />
+          <svg-icon icon-class="time" class-name="card-panel-icon"/>
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            消息
+            在制订单数量
           </div>
-          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
+          <count-to :start-val="0" :end-val="topData.value2" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('purchases')">
         <div class="card-panel-icon-wrapper icon-money">
-          <svg-icon icon-class="money" class-name="card-panel-icon" />
+          <svg-icon icon-class="chart" class-name="card-panel-icon"/>
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            金额
+            今日计划米数
           </div>
-          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
+          <count-to :start-val="0" :end-val="topData.value3" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('shoppings')">
         <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
+          <svg-icon icon-class="checkbox" class-name="card-panel-icon"/>
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            订单
+            今日完成米数
           </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
+          <count-to :start-val="0" :end-val="topData.value4" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -62,6 +62,23 @@ export default {
   components: {
     CountTo
   },
+  props: {
+    topData: {
+      type: Object,
+      default:
+        {
+          value1: 10,
+          value2: 2,
+          value3: 710,
+          value4: 230
+        }
+    }
+  },
+  data() {
+    return {
+      topData: this.topData
+    }
+  },
   methods: {
     handleSetLineChartData(type) {
       this.$emit('handleSetLineChartData', type)

src/views/index.vue

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