From 945b98f3359ecbfd4712b92e7fae67b29a8df5a9 Mon Sep 17 00:00:00 2001
From: chenghx <chenghx@nfex.com>
Date: Wed, 1 Aug 2018 18:05:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=8F=9C=E5=8D=95=E6=8A=98?=
 =?UTF-8?q?=E5=8F=A0=E6=97=B6=EF=BC=8C=E6=89=93=E5=BC=80=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=AD=90=E9=A1=B9=E5=BC=B9=E5=87=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chart/Radar.vue         | 83 ++++++++++++++++++++++++++
 src/components/dashboard/WorkPlace.vue |  6 +-
 src/components/layout/GloablLayout.vue |  2 +-
 src/components/menu/menu.js            | 12 ++++
 src/main.js                            |  2 +-
 src/router/index.js                    |  3 +-
 6 files changed, 104 insertions(+), 4 deletions(-)
 create mode 100644 src/components/chart/Radar.vue

diff --git a/src/components/chart/Radar.vue b/src/components/chart/Radar.vue
new file mode 100644
index 0000000..52fa8f3
--- /dev/null
+++ b/src/components/chart/Radar.vue
@@ -0,0 +1,83 @@
+<template>
+    <v-chart>
+      <v-tooltip :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale" />
+      <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
+      <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
+      <v-legend dataKey="user" marker="circle" :offset="30" />
+      <v-coord type="polar" radius="0.8" />
+      <v-line position="item*score" color="user" :size="2" />
+      <v-point position="item*score" color="user" :size="4" shape="circle" />
+    </v-chart>
+</template>
+
+<script>
+const DataSet = require('@antv/data-set')
+
+const sourceData = [
+  { item: 'Design', a: 70, b: 30 },
+  { item: 'Development', a: 60, b: 70 },
+  { item: 'Marketing', a: 50, b: 60 },
+  { item: 'Users', a: 40, b: 50 },
+  { item: 'Test', a: 60, b: 70 },
+  { item: 'Language', a: 70, b: 50 },
+  { item: 'Technology', a: 50, b: 40 },
+  { item: 'Support', a: 30, b: 40 },
+  { item: 'Sales', a: 60, b: 40 },
+  { item: 'UX', a: 50, b: 60 }
+]
+
+const dv = new DataSet.View().source(sourceData)
+dv.transform({
+  type: 'fold',
+  fields: ['a', 'b'],
+  key: 'user',
+  value: 'score'
+})
+
+const scale = [{
+  dataKey: 'score',
+  min: 0,
+  max: 80
+}]
+
+const data = dv.rows
+
+const axis1Opts = {
+  dataKey: 'item',
+  line: null,
+  tickLine: null,
+  grid: {
+    lineStyle: {
+      lineDash: null
+    },
+    hideFirstLine: false
+  }
+}
+const axis2Opts = {
+  dataKey: 'score',
+  line: null,
+  tickLine: null,
+  grid: {
+    type: 'polygon',
+    lineStyle: {
+      lineDash: null
+    }
+  }
+}
+
+export default {
+  name: 'Radar',
+  data () {
+    return {
+      data,
+      axis1Opts,
+      axis2Opts,
+      scale
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/dashboard/WorkPlace.vue b/src/components/dashboard/WorkPlace.vue
index 2ec6565..07d73a4 100644
--- a/src/components/dashboard/WorkPlace.vue
+++ b/src/components/dashboard/WorkPlace.vue
@@ -70,7 +70,9 @@
             </div>
           </a-card>
           <a-card title="XX指数" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
-            <div style="min-height: 400px;"></div>
+            <div style="min-height: 400px;">
+              <radar />
+            </div>
           </a-card>
           <a-card title="团队" :bordered="false">
             <a-row>
@@ -102,12 +104,14 @@ import AList from 'vue-antd-ui/es/list/index'
 import AListItem from 'vue-antd-ui/es/list/Item'
 import AButton from 'vue-antd-ui/es/button/button'
 import AIcon from 'vue-antd-ui/es/icon/icon'
+import Radar from '../chart/Radar'
 
 const AListItemMeta = AListItem.Meta
 
 export default {
   name: 'WorkPlace',
   components: {
+    Radar,
     AIcon,
     AButton,
     AListItemMeta,
diff --git a/src/components/layout/GloablLayout.vue b/src/components/layout/GloablLayout.vue
index 2c80266..fa2af77 100644
--- a/src/components/layout/GloablLayout.vue
+++ b/src/components/layout/GloablLayout.vue
@@ -7,7 +7,7 @@
           <h1>Vue Ant Pro</h1>
         </a>
       </div>
-      <i-menu :menuData="menuData" />
+      <i-menu :collapsed="collapsed" :menuData="menuData" />
     </a-layout-sider>
     <a-layout>
       <gloabl-header :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
diff --git a/src/components/menu/menu.js b/src/components/menu/menu.js
index 2e4d8aa..ebe7ed2 100644
--- a/src/components/menu/menu.js
+++ b/src/components/menu/menu.js
@@ -42,6 +42,11 @@ export default {
       type: String,
       required: false,
       default: 'inline'
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data () {
@@ -50,6 +55,13 @@ export default {
       openKeys: []
     }
   },
+  watch: {
+    collapsed (val) {
+      if (val) {
+        this.openKeys = []
+      }
+    }
+  },
   methods: {
     renderIcon: function (h, icon) {
       return icon === 'none' ? null
diff --git a/src/main.js b/src/main.js
index 4fd274b..15296f7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,7 @@ import router from './router'
 import 'vue-antd-ui/dist/antd.css'
 import Viser from 'viser-vue'
 import axios from 'axios'
-import '@/mock/index'
+import '@/mock'
 
 Vue.prototype.$axios = axios
 Vue.config.productionTip = false
diff --git a/src/router/index.js b/src/router/index.js
index 8c69e62..0b66a72 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -18,6 +18,7 @@ import CardList from '@/components/list/CardList'
 import SearchLayout from '@/components/list/SearchLayout'
 import ArticleList from '@/components/list/ArticleList'
 import WorkPlace from '@/components/dashboard/WorkPlace'
+import Radar from '@/components/chart/Radar'
 
 Vue.use(Router)
 
@@ -120,7 +121,7 @@ export default new Router({
           path: '/detail/basic',
           name: '基础详情页',
           icon: 'none',
-          component: NotFound
+          component: Radar
         },
         {
           path: '/detail/advanced',