Feat: 增加 dashboard 图表组件

package.json

@@ -23,10 +23,13 @@
     "serve": "npm run gr && vue-cli-service serve"
   },
   "dependencies": {
+    "@antv/g2plot": "^2.4.31",
     "@cell-x/el-table-sticky": "^1.0.2",
+    "@opd/g2plot-vue": "^3.6.7",
     "core-js": "^3.8.3",
     "driver.js": "^1.2.1",
     "element-ui": "^2.15.13",
+    "moment": "^2.29.4",
     "vue": "^2.6.14",
     "vue-fullscreen": "^2.6.1",
     "vue-grid-layout": "^2.4.0",

src/App.vue

@@ -103,7 +103,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/css/variables.scss';
+@import '@/assets/styles/variables.scss';
 
 .header-container {
   background-color: #fff;

src/api/dashboard.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 export default {
   /**
-   * 通过 route 获取 dashboard 数组（后端自动获取组织ID）
+   * 通过 route 获取 dashboard 数组（后端自动获取组织 ID）
    * @param {Object} data
    * @param {String} data.route 仪表盘路由
    * @returns

src/assets/css/layout.scss → src/assets/styles/layout.scss

@@ -1,7 +1,11 @@
+* {
+  box-sizing: border-box;
+}
+
 html {
   height: 100%;
-  box-sizing: border-box;
 }
+
 body {
   height: 100%;
   margin: 0;

src/components/Dashboard/index.vue

@@ -148,7 +148,7 @@
           <button class="dashboard-close-btn el-icon-close" aria-label="Close" title="关闭" @click="isCollapse = true" />
         </header>
         <main class="dashboard-aside-main">
-          <!-- 组件分类菜单（每个模板自带“通用”分类，分类超过2个才显示菜单） -->
+          <!-- 组件分类菜单（每个模板自带“通用”分类，分类超过 2 个才显示菜单） -->
           <el-menu
             v-if="componentsList.length > 2"
             v-show="!menuCollapse"
@@ -360,7 +360,7 @@ export default {
      * @var {Boolean} isCollapse 是否折叠侧边栏
      * @var {Number} colNum 栅格列数
      * @var {Number} rowHeight 栅格行高
-     * @var {Array} gaps 栅格间隙 [水平间隙, 垂直间隙] e.g. [8, 8]
+     * @var {Array} gaps 栅格间隙 [水平间隙，垂直间隙] e.g. [8, 8]
      * @var {Element} dashboardGrid 可接收拖放的栅格容器
      * @var {Object} dashboard 仪表盘数据
      * @var {Number} dashboard.id 仪表盘 ID
@@ -932,6 +932,7 @@ export default {
   }
   .dashboard-container {
     flex: auto;
+    overflow: hidden;
   }
 }
 </style>

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import '@/assets/css/index.scss'
+import '@/assets/styles/index.scss'
 import App from './App.vue'
 import router from '@/router'
 import SvgIcon from '@/components/SvgIcon'

src/views/dashboard/index.vue

@@ -4,8 +4,10 @@
 import Dashboard, { registerComponents } from '@/components/Dashboard'
 
 // 加载 widgets 目录下所有组件
-// const requireComponents = require.context('./widgets', true, /\.vue$/)
-// const components = registerComponents(requireComponents)
+const requireComponentsCharts = require.context('./widgets/charts', true, /\.vue$/)
+const componentsCharts = registerComponents(requireComponentsCharts)
+const requireComponentsDaily = require.context('./widgets/daily', true, /\.vue$/)
+const componentsDaily = registerComponents(requireComponentsDaily)
 
 export default {
   name: 'TrackingDashboard',
@@ -17,7 +19,8 @@ export default {
     }
   },
   created() {
-    // this.addComponents('分类1', components, true)
+    this.addComponents('图表元件', componentsCharts)
+    this.addComponents('日常元件', componentsDaily)
   },
 }
 </script>