Merge ca8035fa98c7c48e229ca0e5380c7aed2d297bae into 6858a9ad67483025f6a9432a926beb9327037be3

mock/article.js

@@ -1,16 +1,41 @@
 const Mock = require('mockjs')
+const Random = Mock.Random;
 
 const List = []
 const count = 100
 
 const baseContent = '<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
 const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
-
 for (let i = 0; i < count; i++) {
+  // List.push(Mock.mock({
+  //   id: '@increment',
+  //   timestamp: +Mock.Random.date('T'),
+  //   author: '@first',
+  //   reviewer: '@first',
+  //   title: '@title(5, 10)',
+  //   content_short: 'mock data',
+  //   content: baseContent,
+  //   forecast: '@float(0, 100, 2, 2)',
+  //   importance: '@integer(1, 3)',
+  //   'type|1': ['CN', 'US', 'JP', 'EU'],
+  //   'status|1': ['published', 'draft'],
+  //   display_time: '@datetime',
+  //   comment_disabled: true,
+  //   pageviews: '@integer(300, 5000)',
+  //   image_uri,
+  //   platforms: ['a-platform']
+  // }))
   List.push(Mock.mock({
     id: '@increment',
     timestamp: +Mock.Random.date('T'),
     author: '@first',
+    'location|1': ['丰县', '沛县', '睢宁县', '云龙区', '鼓楼区', '泉山区', '铜山区', '贾汪区'],
+    'name|1': ['拖拉机', '无人机', '推土机', '抽水机', '除草机器人'],
+    PurchaseDate: '@datetime',
+    'state|1': ['使用中', '维修中', '未使用', '已报废'],
+    'brand': '@id',
+    description: Random.sentence(),
+    owner: '@cname',
     reviewer: '@first',
     title: '@title(5, 10)',
     content_short: 'mock data',

package.json

@@ -15,10 +15,14 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "@babel/core": "^7.21.0",
+    "@toast-ui/editor": "^3.1.3",
     "axios": "0.18.1",
+    "body-parser": "^1.20.2",
+    "cache-loader": "^4.1.0",
     "clipboard": "2.0.4",
     "codemirror": "5.45.0",
-    "core-js": "3.6.5",
+    "core-js": "^3.29.0",
     "driver.js": "0.9.5",
     "dropzone": "5.5.1",
     "echarts": "4.2.1",
@@ -31,19 +35,22 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "regenerator-runtime": "^0.13.11",
     "screenfull": "4.2.0",
     "script-loader": "0.7.2",
     "sortablejs": "1.8.4",
-    "tui-editor": "1.3.3",
+    "svg-baker-runtime": "^1.4.7",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
+    "vue-style-loader": "^4.1.3",
     "vuedraggable": "2.20.0",
     "vuex": "3.1.0",
     "xlsx": "0.14.1"
   },
   "devDependencies": {
+    "@babel/runtime": "^7.21.0",
     "@vue/cli-plugin-babel": "4.4.4",
     "@vue/cli-plugin-eslint": "4.4.4",
     "@vue/cli-plugin-unit-jest": "4.4.4",
@@ -70,7 +77,8 @@
     "serve-static": "1.13.2",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.0",
-    "vue-template-compiler": "2.6.10"
+    "vue-template-compiler": "2.6.10",
+    "webpack": "^4.0.0"
   },
   "browserslist": [
     "> 1%",

src/components/MarkdownEditor/index.vue

@@ -4,13 +4,18 @@
 
 <script>
 // deps for editor
-import 'codemirror/lib/codemirror.css' // codemirror
+// import 'codemirror/lib/codemirror.css' // codemirror
-import 'tui-editor/dist/tui-editor.css' // editor ui
+// import 'tui-editor/dist/tui-editor.css' // editor ui
-import 'tui-editor/dist/tui-editor-contents.css' // editor content
+// import 'tui-editor/dist/tui-editor-contents.css' // editor content
 
-import Editor from 'tui-editor'
+import 'codemirror/lib/codemirror.css'
+import '@toast-ui/editor/dist/toastui-editor.css'
+import Editor from '@toast-ui/editor'
 import defaultOptions from './default-options'
 
+// import Editor from 'tui-editor'
+// import defaultOptions from './default-options'
+
 export default {
   name: 'MarkdownEditor',
   props: {
@@ -101,10 +106,10 @@ export default {
       this.editor.off('change')
       this.editor.remove()
     },
-    setValue(value) {
+    setMarkdown(value) {
       this.editor.setValue(value)
     },
-    getValue() {
+    getMarkdown() {
       return this.editor.getValue()
     },
     setHtml(value) {

src/router/index.js

@@ -7,7 +7,7 @@ Vue.use(Router)
 import Layout from '@/layout'
 
 /* Router Modules */
-import componentsRouter from './modules/components'
+// import componentsRouter from './modules/components'
 import chartsRouter from './modules/charts'
 import tableRouter from './modules/table'
 import nestedRouter from './modules/nested'
@@ -79,49 +79,49 @@ export const constantRoutes = [
         path: 'dashboard',
         component: () => import('@/views/dashboard/index'),
         name: 'Dashboard',
-        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
+        meta: { title: '实时监控', icon: 'dashboard', affix: true }
-      }
-    ]
-  },
-  {
-    path: '/documentation',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/documentation/index'),
-        name: 'Documentation',
-        meta: { title: 'Documentation', icon: 'documentation', affix: true }
-      }
-    ]
-  },
-  {
-    path: '/guide',
-    component: Layout,
-    redirect: '/guide/index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/guide/index'),
-        name: 'Guide',
-        meta: { title: 'Guide', icon: 'guide', noCache: true }
-      }
-    ]
-  },
-  {
-    path: '/profile',
-    component: Layout,
-    redirect: '/profile/index',
-    hidden: true,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/profile/index'),
-        name: 'Profile',
-        meta: { title: 'Profile', icon: 'user', noCache: true }
       }
     ]
   }
+  // {
+  //   path: '/documentation',
+  //   component: Layout,
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       component: () => import('@/views/documentation/index'),
+  //       name: 'Documentation',
+  //       meta: { title: 'Documentation', icon: 'documentation', affix: true }
+  //     }
+  //   ]
+  // },
+  // {
+  //   path: '/guide',
+  //   component: Layout,
+  //   redirect: '/guide/index',
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       component: () => import('@/views/guide/index'),
+  //       name: 'Guide',
+  //       meta: { title: 'Guide', icon: 'guide', noCache: true }
+  //     }
+  //   ]
+  // },
+  // {
+  //   path: '/profile',
+  //   component: Layout,
+  //   redirect: '/profile/index',
+  //   hidden: true,
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       component: () => import('@/views/profile/index'),
+  //       name: 'Profile',
+  //       meta: { title: 'Profile', icon: 'user', noCache: true }
+  //     }
+  //   ]
+  // }
 ]
 
 /**
@@ -129,149 +129,149 @@ export const constantRoutes = [
  * the routes that need to be dynamically loaded based on user roles
  */
 export const asyncRoutes = [
-  {
+  // {
-    path: '/permission',
+  //   path: '/permission',
-    component: Layout,
+  //   component: Layout,
-    redirect: '/permission/page',
+  //   redirect: '/permission/page',
-    alwaysShow: true, // will always show the root menu
+  //   alwaysShow: true, // will always show the root menu
-    name: 'Permission',
+  //   name: 'Permission',
-    meta: {
+  //   meta: {
-      title: 'Permission',
+  //     title: 'Permission',
-      icon: 'lock',
+  //     icon: 'lock',
-      roles: ['admin', 'editor'] // you can set roles in root nav
+  //     roles: ['admin', 'editor'] // you can set roles in root nav
-    },
+  //   },
-    children: [
+  //   children: [
-      {
+  //     {
-        path: 'page',
+  //       path: 'page',
-        component: () => import('@/views/permission/page'),
+  //       component: () => import('@/views/permission/page'),
-        name: 'PagePermission',
+  //       name: 'PagePermission',
-        meta: {
+  //       meta: {
-          title: 'Page Permission',
+  //         title: 'Page Permission',
-          roles: ['admin'] // or you can only set roles in sub nav
+  //         roles: ['admin'] // or you can only set roles in sub nav
-        }
+  //       }
-      },
+  //     },
-      {
+  //     {
-        path: 'directive',
+  //       path: 'directive',
-        component: () => import('@/views/permission/directive'),
+  //       component: () => import('@/views/permission/directive'),
-        name: 'DirectivePermission',
+  //       name: 'DirectivePermission',
-        meta: {
+  //       meta: {
-          title: 'Directive Permission'
+  //         title: 'Directive Permission'
-          // if do not set roles, means: this page does not require permission
+  //         // if do not set roles, means: this page does not require permission
-        }
+  //       }
-      },
+  //     },
-      {
+  //     {
-        path: 'role',
+  //       path: 'role',
-        component: () => import('@/views/permission/role'),
+  //       component: () => import('@/views/permission/role'),
-        name: 'RolePermission',
+  //       name: 'RolePermission',
-        meta: {
+  //       meta: {
-          title: 'Role Permission',
+  //         title: 'Role Permission',
-          roles: ['admin']
+  //         roles: ['admin']
-        }
+  //       }
-      }
+  //     }
-    ]
+  //   ]
-  },
+  // },
 
-  {
+  // {
-    path: '/icon',
+  //   path: '/icon',
-    component: Layout,
+  //   component: Layout,
-    children: [
+  //   children: [
-      {
+  //     {
-        path: 'index',
+  //       path: 'index',
-        component: () => import('@/views/icons/index'),
+  //       component: () => import('@/views/icons/index'),
-        name: 'Icons',
+  //       name: 'Icons',
-        meta: { title: 'Icons', icon: 'icon', noCache: true }
+  //       meta: { title: 'Icons', icon: 'icon', noCache: true }
-      }
+  //     }
-    ]
+  //   ]
-  },
+  // },
 
   /** when your routing map is too long, you can split it into small modules **/
-  componentsRouter,
+  // componentsRouter,
   chartsRouter,
   nestedRouter,
   tableRouter,
 
-  {
+  // {
-    path: '/example',
+  //   path: '/example',
-    component: Layout,
+  //   component: Layout,
-    redirect: '/example/list',
+  //   redirect: '/example/list',
-    name: 'Example',
+  //   name: 'Example',
-    meta: {
+  //   meta: {
-      title: 'Example',
+  //     title: 'Example',
-      icon: 'el-icon-s-help'
+  //     icon: 'el-icon-s-help'
-    },
+  //   },
-    children: [
+  //   children: [
-      {
+  //     {
-        path: 'create',
+  //       path: 'create',
-        component: () => import('@/views/example/create'),
+  //       component: () => import('@/views/example/create'),
-        name: 'CreateArticle',
+  //       name: 'CreateArticle',
-        meta: { title: 'Create Article', icon: 'edit' }
+  //       meta: { title: 'Create Article', icon: 'edit' }
-      },
+  //     },
-      {
+  //     {
-        path: 'edit/:id(\\d+)',
+  //       path: 'edit/:id(\\d+)',
-        component: () => import('@/views/example/edit'),
+  //       component: () => import('@/views/example/edit'),
-        name: 'EditArticle',
+  //       name: 'EditArticle',
-        meta: { title: 'Edit Article', noCache: true, activeMenu: '/example/list' },
+  //       meta: { title: 'Edit Article', noCache: true, activeMenu: '/example/list' },
-        hidden: true
+  //       hidden: true
-      },
+  //     },
-      {
+  //     {
-        path: 'list',
+  //       path: 'list',
-        component: () => import('@/views/example/list'),
+  //       component: () => import('@/views/example/list'),
-        name: 'ArticleList',
+  //       name: 'ArticleList',
-        meta: { title: 'Article List', icon: 'list' }
+  //       meta: { title: 'Article List', icon: 'list' }
-      }
+  //     }
-    ]
+  //   ]
-  },
+  // },
 
-  {
+  // {
-    path: '/tab',
+  //   path: '/tab',
-    component: Layout,
+  //   component: Layout,
-    children: [
+  //   children: [
-      {
+  //     {
-        path: 'index',
+  //       path: 'index',
-        component: () => import('@/views/tab/index'),
+  //       component: () => import('@/views/tab/index'),
-        name: 'Tab',
+  //       name: 'Tab',
-        meta: { title: 'Tab', icon: 'tab' }
+  //       meta: { title: 'Tab', icon: 'tab' }
-      }
+  //     }
-    ]
+  //   ]
-  },
+  // },
 
-  {
+  // {
-    path: '/error',
+  //   path: '/error',
-    component: Layout,
+  //   component: Layout,
-    redirect: 'noRedirect',
+  //   redirect: 'noRedirect',
-    name: 'ErrorPages',
+  //   name: 'ErrorPages',
-    meta: {
+  //   meta: {
-      title: 'Error Pages',
+  //     title: 'Error Pages',
-      icon: '404'
+  //     icon: '404'
-    },
+  //   },
-    children: [
+  //   children: [
-      {
+  //     {
-        path: '401',
+  //       path: '401',
-        component: () => import('@/views/error-page/401'),
+  //       component: () => import('@/views/error-page/401'),
-        name: 'Page401',
+  //       name: 'Page401',
-        meta: { title: '401', noCache: true }
+  //       meta: { title: '401', noCache: true }
-      },
+  //     },
-      {
+  //     {
-        path: '404',
+  //       path: '404',
-        component: () => import('@/views/error-page/404'),
+  //       component: () => import('@/views/error-page/404'),
-        name: 'Page404',
+  //       name: 'Page404',
-        meta: { title: '404', noCache: true }
+  //       meta: { title: '404', noCache: true }
-      }
+  //     }
-    ]
+  //   ]
-  },
+  // },
 
-  {
+  // {
-    path: '/error-log',
+  //   path: '/error-log',
-    component: Layout,
+  //   component: Layout,
-    children: [
+  //   children: [
-      {
+  //     {
-        path: 'log',
+  //       path: 'log',
-        component: () => import('@/views/error-log/index'),
+  //       component: () => import('@/views/error-log/index'),
-        name: 'ErrorLog',
+  //       name: 'ErrorLog',
-        meta: { title: 'Error Log', icon: 'bug' }
+  //       meta: { title: 'Error Log', icon: 'bug' }
-      }
+  //     }
-    ]
+  //   ]
-  },
+  // },
 
   {
     path: '/excel',
@@ -279,7 +279,7 @@ export const asyncRoutes = [
     redirect: '/excel/export-excel',
     name: 'Excel',
     meta: {
-      title: 'Excel',
+      title: '统计分析',
       icon: 'excel'
     },
     children: [
@@ -287,101 +287,134 @@ export const asyncRoutes = [
         path: 'export-excel',
         component: () => import('@/views/excel/export-excel'),
         name: 'ExportExcel',
-        meta: { title: 'Export Excel' }
+        meta: { title: '云龙区' }
       },
       {
         path: 'export-selected-excel',
         component: () => import('@/views/excel/select-excel'),
         name: 'SelectExcel',
-        meta: { title: 'Export Selected' }
+        meta: { title: '鼓楼区' }
       },
       {
         path: 'export-merge-header',
         component: () => import('@/views/excel/merge-header'),
         name: 'MergeHeader',
-        meta: { title: 'Merge Header' }
+        meta: {
+          title: '泉山区'
+        }
       },
       {
         path: 'upload-excel',
         component: () => import('@/views/excel/upload-excel'),
         name: 'UploadExcel',
-        meta: { title: 'Upload Excel' }
+        meta: {
+          title: '铜山区'
+        }
+      },
+      {
+        path: 'analysis-jiawang',
+        component: () => import('@/views/excel/analysis-jiawang'),
+        name: 'AnalyseJiaWang',
+        meta: {
+          title: '贾汪区'
+        }
+      }, {
+        path: 'analysis-jiawang',
+        component: () => import('@/views/excel/analysis-jiawang'),
+        name: 'AnalyseJiaWang',
+        meta: {
+          title: '丰县'
+        }
+      }, {
+        path: 'analysis-jiawang',
+        component: () => import('@/views/excel/analysis-jiawang'),
+        name: 'AnalyseJiaWang',
+        meta: {
+          title: '沛县'
+        }
+      }, {
+        path: 'analysis-jiawang',
+        component: () => import('@/views/excel/analysis-jiawang'),
+        name: 'AnalyseJiaWang',
+        meta: {
+          title: '睢宁县'
+        }
       }
     ]
   },
 
-  {
+  // {
-    path: '/zip',
+  //   path: '/zip',
-    component: Layout,
+  //   component: Layout,
-    redirect: '/zip/download',
+  //   redirect: '/zip/download',
-    alwaysShow: true,
+  //   alwaysShow: true,
-    name: 'Zip',
+  //   name: 'Zip',
-    meta: { title: 'Zip', icon: 'zip' },
+  //   meta: { title: 'Zip', icon: 'zip' },
-    children: [
+  //   children: [
-      {
+  //     {
-        path: 'download',
+  //       path: 'download',
-        component: () => import('@/views/zip/index'),
+  //       component: () => import('@/views/zip/index'),
-        name: 'ExportZip',
+  //       name: 'ExportZip',
-        meta: { title: 'Export Zip' }
+  //       meta: { title: 'Export Zip' }
-      }
+  //     }
-    ]
+  //   ]
-  },
+  // },
 
-  {
+  // {
-    path: '/pdf',
+  //   path: '/pdf',
-    component: Layout,
+  //   component: Layout,
-    redirect: '/pdf/index',
+  //   redirect: '/pdf/index',
-    children: [
+  //   children: [
-      {
+  //     {
-        path: 'index',
+  //       path: 'index',
-        component: () => import('@/views/pdf/index'),
+  //       component: () => import('@/views/pdf/index'),
-        name: 'PDF',
+  //       name: 'PDF',
-        meta: { title: 'PDF', icon: 'pdf' }
+  //       meta: { title: 'PDF', icon: 'pdf' }
-      }
+  //     }
-    ]
+  //   ]
-  },
+  // },
-  {
+  // {
-    path: '/pdf/download',
+  //   path: '/pdf/download',
-    component: () => import('@/views/pdf/download'),
+  //   component: () => import('@/views/pdf/download'),
-    hidden: true
+  //   hidden: true
-  },
+  // },
 
-  {
+  // {
-    path: '/theme',
+  //   path: '/theme',
-    component: Layout,
+  //   component: Layout,
-    children: [
+  //   children: [
-      {
+  //     {
-        path: 'index',
+  //       path: 'index',
-        component: () => import('@/views/theme/index'),
+  //       component: () => import('@/views/theme/index'),
-        name: 'Theme',
+  //       name: 'Theme',
-        meta: { title: 'Theme', icon: 'theme' }
+  //       meta: { title: 'Theme', icon: 'theme' }
-      }
+  //     }
-    ]
+  //   ]
-  },
+  // },
 
-  {
+  // {
-    path: '/clipboard',
+  //   path: '/clipboard',
-    component: Layout,
+  //   component: Layout,
-    children: [
+  //   children: [
-      {
+  //     {
-        path: 'index',
+  //       path: 'index',
-        component: () => import('@/views/clipboard/index'),
+  //       component: () => import('@/views/clipboard/index'),
-        name: 'ClipboardDemo',
+  //       name: 'ClipboardDemo',
-        meta: { title: 'Clipboard', icon: 'clipboard' }
+  //       meta: { title: 'Clipboard', icon: 'clipboard' }
-      }
+  //     }
-    ]
+  //   ]
-  },
+  // },
 
-  {
+  // {
-    path: 'external-link',
+  //   path: 'external-link',
-    component: Layout,
+  //   component: Layout,
-    children: [
+  //   children: [
-      {
+  //     {
-        path: 'https://github.com/PanJiaChen/vue-element-admin',
+  //       path: 'https://github.com/PanJiaChen/vue-element-admin',
-        meta: { title: 'External Link', icon: 'link' }
+  //       meta: { title: 'External Link', icon: 'link' }
-      }
+  //     }
-    ]
+  //   ]
-  },
+  // },
 
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }

src/router/modules/charts.js

@@ -8,7 +8,7 @@ const chartsRouter = {
   redirect: 'noRedirect',
   name: 'Charts',
   meta: {
-    title: 'Charts',
+    title: '历史轨迹',
     icon: 'chart'
   },
   children: [

src/router/modules/nested.js

@@ -8,7 +8,7 @@ const nestedRouter = {
   redirect: '/nested/menu1/menu1-1',
   name: 'Nested',
   meta: {
-    title: 'Nested Routes',
+    title: '维修管理',
     icon: 'nested'
   },
   children: [

src/router/modules/table.js

@@ -8,33 +8,33 @@ const tableRouter = {
   redirect: '/table/complex-table',
   name: 'Table',
   meta: {
-    title: 'Table',
+    title: '作业任务',
     icon: 'table'
   },
   children: [
-    {
+    // {
-      path: 'dynamic-table',
+    //   path: 'dynamic-table',
-      component: () => import('@/views/table/dynamic-table/index'),
+    //   component: () => import('@/views/table/dynamic-table/index'),
-      name: 'DynamicTable',
+    //   name: 'DynamicTable',
-      meta: { title: 'Dynamic Table' }
+    //   meta: { title: 'Dynamic Table' }
-    },
+    // },
-    {
+    // {
-      path: 'drag-table',
+    //   path: 'drag-table',
-      component: () => import('@/views/table/drag-table'),
+    //   component: () => import('@/views/table/drag-table'),
-      name: 'DragTable',
+    //   name: 'DragTable',
-      meta: { title: 'Drag Table' }
+    //   meta: { title: 'Drag Table' }
-    },
+    // },
-    {
+    // {
-      path: 'inline-edit-table',
+    //   path: 'inline-edit-table',
-      component: () => import('@/views/table/inline-edit-table'),
+    //   component: () => import('@/views/table/inline-edit-table'),
-      name: 'InlineEditTable',
+    //   name: 'InlineEditTable',
-      meta: { title: 'Inline Edit' }
+    //   meta: { title: 'Inline Edit' }
-    },
+    // },
     {
       path: 'complex-table',
       component: () => import('@/views/table/complex-table'),
-      name: 'ComplexTable',
+      name: '仓库管理',
-      meta: { title: 'Complex Table' }
+      meta: { title: '仓库管理' }
     }
   ]
 }

src/styles/element-ui.scss

@@ -72,7 +72,6 @@
     display: block
   }
 }
-
 // fix date-picker ui bug in filter-item
 .el-range-editor.el-input__inner {
   display: inline-flex !important;

src/views/dashboard/admin/components/BarChart.vue

@@ -61,18 +61,18 @@ export default {
           containLabel: true
         },
         xAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          }
+        }],
+        yAxis: [{
           type: 'category',
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
           axisTick: {
             alignWithLabel: true
           }
         }],
-        yAxis: [{
-          type: 'value',
-          axisTick: {
-            show: false
-          }
-        }],
         series: [{
           name: 'pageA',
           type: 'bar',

src/views/dashboard/admin/components/LineChart.vue

@@ -68,7 +68,8 @@ export default {
           boundaryGap: false,
           axisTick: {
             show: false
-          }
+          },
+          name: 'date'
         },
         grid: {
           left: 10,
@@ -87,13 +88,14 @@ export default {
         yAxis: {
           axisTick: {
             show: false
-          }
+          },
+          name: 'hours'
         },
         legend: {
-          data: ['expected', 'actual']
+          data: ['used']
         },
         series: [{
-          name: 'expected', itemStyle: {
+          name: 'used', itemStyle: {
             normal: {
               color: '#FF005A',
               lineStyle: {
@@ -107,27 +109,28 @@ export default {
           data: expectedData,
           animationDuration: 2800,
           animationEasing: 'cubicInOut'
-        },
+        }
-        {
+        // {
-          name: 'actual',
+        //   name: 'actual',
-          smooth: true,
+        //   smooth: true,
-          type: 'line',
+        //   type: 'line',
-          itemStyle: {
+        //   itemStyle: {
-            normal: {
+        //     normal: {
-              color: '#3888fa',
+        //       color: '#3888fa',
-              lineStyle: {
+        //       lineStyle: {
-                color: '#3888fa',
+        //         color: '#3888fa',
-                width: 2
+        //         width: 2
-              },
+        //       },
-              areaStyle: {
+        //       areaStyle: {
-                color: '#f3f8ff'
+        //         color: '#f3f8ff'
-              }
+        //       }
-            }
+        //     }
-          },
+        //   },
-          data: actualData,
+        //   data: actualData,
-          animationDuration: 2800,
+        //   animationDuration: 2800,
-          animationEasing: 'quadraticOut'
+        //   animationEasing: 'quadraticOut'
-        }]
+        // }
+        ]
       })
     }
   }

src/views/dashboard/admin/components/PanelGroup.vue

@@ -2,53 +2,57 @@
   <el-row :gutter="40" class="panel-group">
     <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">
+        <div class="card-panel-icon-wrapper">
-          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+          拖拉机
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            New Visits
+            使用中/总数
           </div>
-          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
+          <count-to :start-val="0" :end-val="102" :duration="2600" class="card-panel-num" />/
+          <count-to :start-val="0" :end-val="322" :duration="2600" 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">
+        <div class="card-panel-icon-wrapper">
-          <svg-icon icon-class="message" class-name="card-panel-icon" />
+          无人机
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            Messages
+            使用中/总数
           </div>
-          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
+          <count-to :start-val="0" :end-val="12" :duration="2600" class="card-panel-num" />/
+          <count-to :start-val="0" :end-val="22" :duration="2600" 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">
+        <div class="card-panel-icon-wrapper">
-          <svg-icon icon-class="money" class-name="card-panel-icon" />
+          推土机
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            Purchases
+            使用中/总数
           </div>
-          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
+          <count-to :start-val="0" :end-val="282" :duration="2600" class="card-panel-num" />/
+          <count-to :start-val="0" :end-val="299" :duration="2600" 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">
+        <div class="card-panel-icon-wrapper">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
+          抽水机
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            Shoppings
+            使用中/总数
           </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
+          <count-to :start-val="0" :end-val="32" :duration="2600" class="card-panel-num" />/
+          <count-to :start-val="0" :end-val="49" :duration="2600" class="card-panel-num" />
         </div>
       </div>
     </el-col>
@@ -90,13 +94,13 @@ export default {
     border-color: rgba(0, 0, 0, .05);
 
     &:hover {
-      .card-panel-icon-wrapper {
+      // .card-panel-icon-wrapper {
-        color: #fff;
+      //   color: #fff;
-      }
+      // }
 
-      .icon-people {
+      // .icon-people {
-        background: #40c9c6;
+      //   background: #40c9c6;
-      }
+      // }
 
       .icon-message {
         background: #36a3f7;
@@ -129,8 +133,12 @@ export default {
 
     .card-panel-icon-wrapper {
       float: left;
-      margin: 14px 0 0 14px;
+      font-weight: bold;
+      // margin: 14px 0 0 14px;
+      font-size: 20px;
       padding: 16px;
+      height:100%;
+      line-height: 70px;
       transition: all 0.38s ease-out;
       border-radius: 6px;
     }

src/views/dashboard/admin/components/RaddarChart.vue

@@ -47,6 +47,10 @@ export default {
       this.chart = echarts.init(this.$el, 'macarons')
 
       this.chart.setOption({
+        title: {
+          text: '云龙区农机使用统计',
+          left: 'center'
+        },
         tooltip: {
           trigger: 'axis',
           axisPointer: { // 坐标轴指示器，坐标轴触发有效
@@ -68,18 +72,18 @@ export default {
             }
           },
           indicator: [
-            { name: 'Sales', max: 10000 },
+            { name: '拖拉机', max: 10000 },
-            { name: 'Administration', max: 20000 },
+            { name: '推土机', max: 20000 },
-            { name: 'Information Technology', max: 20000 },
+            { name: '挖掘机', max: 20000 },
-            { name: 'Customer Support', max: 20000 },
+            { name: '无人机', max: 20000 },
-            { name: 'Development', max: 20000 },
+            { name: '收割机', max: 20000 },
-            { name: 'Marketing', max: 20000 }
+            { name: '抽水机', max: 20000 }
           ]
         },
         legend: {
           left: 'center',
           bottom: '10',
-          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+          data: ['全市使用时长', '该区使用时长']
         },
         series: [{
           type: 'radar',
@@ -94,17 +98,17 @@ export default {
             }
           },
           data: [
-            {
+            // {
-              value: [5000, 7000, 12000, 11000, 15000, 14000],
+            //   value: [5000, 7000, 12000, 11000, 15000, 14000],
-              name: 'Allocated Budget'
+            //   name: 'Allocated Budget'
-            },
+            // },
             {
               value: [4000, 9000, 15000, 15000, 13000, 11000],
-              name: 'Expected Spending'
+              name: '全市使用时长'
             },
             {
               value: [5500, 11000, 12000, 15000, 12000, 12000],
-              name: 'Actual Spending'
+              name: '该区使用时长'
             }
           ],
           animationDuration: animationDuration

src/views/dashboard/admin/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dashboard-editor-container">
-    <github-corner class="github-corner" />
+    <!--<github-corner class="github-corner" />-->
 
     <panel-group @handleSetLineChartData="handleSetLineChartData" />
 
@@ -9,17 +9,19 @@
     </el-row>
 
     <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
+      <el-col :span="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">
+      -->
+      <el-col :span="16">
         <div class="chart-wrapper">
           <bar-chart />
         </div>
@@ -41,11 +43,11 @@
 </template>
 
 <script>
-import GithubCorner from '@/components/GithubCorner'
+// import GithubCorner from '@/components/GithubCorner'
 import PanelGroup from './components/PanelGroup'
 import LineChart from './components/LineChart'
 import RaddarChart from './components/RaddarChart'
-import PieChart from './components/PieChart'
+// import PieChart from './components/PieChart'
 import BarChart from './components/BarChart'
 import TransactionTable from './components/TransactionTable'
 import TodoList from './components/TodoList'
@@ -73,11 +75,11 @@ const lineChartData = {
 export default {
   name: 'DashboardAdmin',
   components: {
-    GithubCorner,
+    // GithubCorner,
     PanelGroup,
     LineChart,
     RaddarChart,
-    PieChart,
+    // PieChart,
     BarChart,
     TransactionTable,
     TodoList,

src/views/excel/analysis-jiawang.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="dashboard-editor-container">
+    <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 :span="8">
+        <div class="chart-wrapper">
+          <raddar-chart />
+        </div>
+      </el-col>
+      <el-col :span="16">
+        <div class="chart-wrapper">
+          <bar-chart />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import GithubCorner from '@/components/GithubCorner'
+// import PanelGroup from './components/PanelGroup'
+import LineChart from './components/LineChart'
+import RaddarChart from './components/RaddarChart'
+// import PieChart from './components/PieChart'
+import BarChart from './components/BarChart'
+// import TransactionTable from './components/TransactionTable'
+// import TodoList from './components/TodoList'
+// import BoxCard from './components/BoxCard'
+
+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: 'AnalyseJiaWang',
+  components: {
+    LineChart,
+    RaddarChart,
+    // PieChart,
+    BarChart
+  },
+  data() {
+    return {
+      lineChartData: lineChartData.newVisitis
+    }
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
+    }
+  }
+}
+</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>

src/views/excel/components/BarChart.vue

@@ -0,0 +1,111 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+// import resize from './mixins/resize'
+
+const animationDuration = 6000
+
+export default {
+  // mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        title: {
+          text: '2023年3月'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        legend: {
+          // Try 'horizontal'
+          orient: 'vertical',
+          right: 10,
+          top: 'center'
+        },
+        grid: {
+          top: 30,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          }
+        }],
+        yAxis: [{
+          type: 'category',
+          data: ['拖拉机', '抽水机', '无人机', '挖掘机', '收割机'],
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        series: [{
+          name: '使用量',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [179, 92, 200, 334, 390],
+          animationDuration
+        }, {
+          name: '闲置量',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [80, 12, 200, 334, 390],
+          animationDuration
+        }, {
+          name: '故障量',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [30, 2, 10, 24, 30],
+          animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>

src/views/excel/components/LineChart.vue

@@ -0,0 +1,138 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+// import resize from './mixins/resize'
+
+export default {
+  // mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          },
+          name: 'date'
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          },
+          name: 'hours'
+        },
+        legend: {
+          data: ['used']
+        },
+        series: [{
+          name: 'used', itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: expectedData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        }
+        // {
+        //   name: 'actual',
+        //   smooth: true,
+        //   type: 'line',
+        //   itemStyle: {
+        //     normal: {
+        //       color: '#3888fa',
+        //       lineStyle: {
+        //         color: '#3888fa',
+        //         width: 2
+        //       },
+        //       areaStyle: {
+        //         color: '#f3f8ff'
+        //       }
+        //     }
+        //   },
+        //   data: actualData,
+        //   animationDuration: 2800,
+        //   animationEasing: 'quadraticOut'
+        // }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/excel/components/PieChart.vue

@@ -0,0 +1,79 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+// import resize from './mixins/resize'
+
+export default {
+  // mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+        },
+        series: [
+          {
+            name: 'WEEKLY WRITE ARTICLES',
+            type: 'pie',
+            roseType: 'radius',
+            radius: [15, 95],
+            center: ['50%', '38%'],
+            data: [
+              { value: 320, name: 'Industries' },
+              { value: 240, name: 'Technology' },
+              { value: 149, name: 'Forex' },
+              { value: 100, name: 'Gold' },
+              { value: 59, name: 'Forecasts' }
+            ],
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/excel/components/RaddarChart.vue

@@ -0,0 +1,125 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+// import resize from './mixins/resize'
+
+const animationDuration = 3000
+
+export default {
+  // mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      const option = {
+      // color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
+        title: {
+          text: '2023年3月'
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['全市使用时长', '该区使用时长']
+        },
+        radar: {
+          splitNumber: 4,
+          indicator: [
+            { name: '拖拉机', max: 500 },
+            { name: '推土机', max: 500 },
+            { name: '挖掘机', max: 500 },
+            { name: '无人机', max: 500 },
+            { name: '收割机', max: 500 },
+            { name: '抽水机', max: 500 }
+          ],
+          center: ['50%', '50%'],
+          radius: '66%',
+          axisName: {
+            color: '#fff',
+            backgroundColor: '#666',
+            borderRadius: 3,
+            padding: [3, 5]
+          }
+        },
+        series: [{
+          type: 'radar',
+          data: [
+            {
+              value: [420, 470, 490, 460, 390, 470],
+              name: '全市使用时长',
+              symbol: 'rect',
+              symbolSize: 12,
+              lineStyle: {
+                type: 'dashed'
+              },
+              label: {
+                show: true,
+                formatter: function(params) {
+                  return params.value
+                }
+              }
+            },
+            {
+              value: [40, 170, 110, 430, 210, 300],
+              name: '该区使用时长',
+              areaStyle: {
+                color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
+                  {
+                    color: 'rgba(255, 145, 124, 0.1)',
+                    offset: 0
+                  },
+                  {
+                    color: 'rgba(255, 145, 124, 0.9)',
+                    offset: 1
+                  }
+                ])
+              },
+              label: {
+                show: true,
+                formatter: function(params) {
+                  return params.value
+                }
+              }
+            }
+          ],
+          animationDuration: animationDuration
+        }]
+      }
+      this.chart.setOption(option)
+    }
+  }
+}
+</script>

src/views/excel/export-excel.vue

@@ -1,116 +1,90 @@
 <template>
-  <div class="app-container">
+  <div class="dashboard-editor-container">
-
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-    <div>
+      <line-chart :chart-data="lineChartData" />
-      <FilenameOption v-model="filename" />
+    </el-row>
-      <AutoWidthOption v-model="autoWidth" />
+    <el-row :gutter="32">
-      <BookTypeOption v-model="bookType" />
+      <el-col :span="8">
-      <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
+        <div class="chart-wrapper">
-        Export Excel
+          <raddar-chart />
-      </el-button>
+        </div>
-      <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
+      </el-col>
-        <el-tag type="info">Documentation</el-tag>
+      <el-col :span="16">
-      </a>
+        <div class="chart-wrapper">
-    </div>
+          <bar-chart />
-
+        </div>
-    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading..." border fit highlight-current-row>
+      </el-col>
-      <el-table-column align="center" label="Id" width="95">
+    </el-row>
-        <template slot-scope="scope">
-          {{ scope.$index }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Title">
-        <template slot-scope="scope">
-          {{ scope.row.title }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Author" width="110" align="center">
-        <template slot-scope="scope">
-          <el-tag>{{ scope.row.author }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="Readings" width="115" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.pageviews }}
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="Date" width="220">
-        <template slot-scope="scope">
-          <i class="el-icon-time" />
-          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
   </div>
 </template>
 
 <script>
-import { fetchList } from '@/api/article'
+// import GithubCorner from '@/components/GithubCorner'
-import { parseTime } from '@/utils'
+// import PanelGroup from './components/PanelGroup'
-// options components
+import LineChart from './components/LineChart'
-import FilenameOption from './components/FilenameOption'
+import RaddarChart from './components/RaddarChart'
-import AutoWidthOption from './components/AutoWidthOption'
+// import PieChart from './components/PieChart'
-import BookTypeOption from './components/BookTypeOption'
+import BarChart from './components/BarChart'
+// import TransactionTable from './components/TransactionTable'
+// import TodoList from './components/TodoList'
+// import BoxCard from './components/BoxCard'
+
+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: 'ExportExcel',
-  components: { FilenameOption, AutoWidthOption, BookTypeOption },
+  components: {
+    LineChart,
+    RaddarChart,
+    // PieChart,
+    BarChart
+  },
   data() {
     return {
-      list: null,
+      lineChartData: lineChartData.newVisitis
-      listLoading: true,
-      downloadLoading: false,
-      filename: '',
-      autoWidth: true,
-      bookType: 'xlsx'
     }
   },
-  created() {
-    this.fetchData()
-  },
   methods: {
-    fetchData() {
+    handleSetLineChartData(type) {
-      this.listLoading = true
+      this.lineChartData = lineChartData[type]
-      fetchList().then(response => {
-        this.list = response.data.items
-        this.listLoading = false
-      })
-    },
-    handleDownload() {
-      this.downloadLoading = true
-      import('@/vendor/Export2Excel').then(excel => {
-        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
-        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
-        const list = this.list
-        const data = this.formatJson(filterVal, list)
-        excel.export_json_to_excel({
-          header: tHeader,
-          data,
-          filename: this.filename,
-          autoWidth: this.autoWidth,
-          bookType: this.bookType
-        })
-        this.downloadLoading = false
-      })
-    },
-    formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => {
-        if (j === 'timestamp') {
-          return parseTime(v[j])
-        } else {
-          return v[j]
-        }
-      }))
     }
   }
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
-.radio-label {
+.dashboard-editor-container {
-  font-size: 14px;
+  padding: 32px;
-  color: #606266;
+  background-color: rgb(240, 242, 245);
-  line-height: 40px;
+  position: relative;
-  padding: 0 12px 0 30px;
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
+}
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
 }
 </style>

src/views/table/complex-table.vue

@@ -20,9 +20,11 @@
       <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
         Export
       </el-button>
+      <!--
       <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
         reviewer
       </el-checkbox>
+      -->
     </div>
 
     <el-table
@@ -40,42 +42,56 @@
           <span>{{ row.id }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="Date" width="150px" align="center">
+      <el-table-column label="名称" width="110px" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="购买日期" width="150px" align="center">
         <template slot-scope="{row}">
           <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="Title" min-width="150px">
+      <el-table-column label="描述" width="110px" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.description }}</span>
+        </template>
+      </el-table-column>
+      <!--
+      <el-table-column label="描述" min-width="150px">
         <template slot-scope="{row}">
           <span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
           <el-tag>{{ row.type | typeFilter }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="Author" width="110px" align="center">
+      -->
+      <el-table-column label="负责人" width="110px" align="center">
         <template slot-scope="{row}">
-          <span>{{ row.author }}</span>
+          <span>{{ row.owner }}</span>
         </template>
       </el-table-column>
-      <el-table-column v-if="showReviewer" label="Reviewer" width="110px" align="center">
+      <el-table-column label="位置" width="110px" align="center">
         <template slot-scope="{row}">
-          <span style="color:red;">{{ row.reviewer }}</span>
+          <span>{{ row.location }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="Imp" width="80px">
+      <el-table-column label="品牌" width="80px">
         <template slot-scope="{row}">
-          <svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="meta-item__icon" />
+          <span>{{ row.brand }}</span>
         </template>
       </el-table-column>
+      <!--
       <el-table-column label="Readings" align="center" width="95">
         <template slot-scope="{row}">
           <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
           <span v-else>0</span>
         </template>
       </el-table-column>
-      <el-table-column label="Status" class-name="status-col" width="100">
+      -->
+      <el-table-column label="状态" class-name="status-col" width="100">
         <template slot-scope="{row}">
-          <el-tag :type="row.status | statusFilter">
+          <el-tag :type="row.state | statusFilter">
-            {{ row.status }}
+            {{ row.state }}
           </el-tag>
         </template>
       </el-table-column>
@@ -84,12 +100,14 @@
           <el-button type="primary" size="mini" @click="handleUpdate(row)">
             Edit
           </el-button>
+          <!--
           <el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
             Publish
           </el-button>
           <el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
             Draft
           </el-button>
+          -->
           <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
             Delete
           </el-button>
@@ -170,11 +188,20 @@ export default {
   components: { Pagination },
   directives: { waves },
   filters: {
+    // statusFilter(status) {
+    //   const statusMap = {
+    //     published: 'success',
+    //     draft: 'info',
+    //     deleted: 'danger'
+    //   }
+    //   return statusMap[status]
+    // },
     statusFilter(status) {
       const statusMap = {
-        published: 'success',
+        '维修中': 'warning',
-        draft: 'info',
+        '未使用': 'info',
-        deleted: 'danger'
+        '使用中': 'success',
+        '已报废': 'danger'
       }
       return statusMap[status]
     },