Merge branch 'master' of github.com:szuprefix/vue-django

szuprefix · Oct 15, 2019 · 5c79f33 · 5c79f33
2 parents b84b9d8 + e5b346f
commit 5c79f33
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 10 deletions.
diff --git a/src/components/model/Table.vue b/src/components/model/Table.vue
@@ -340,7 +340,8 @@
                         dblClickAction: 'edit',
                         elTable: {
                             onSelectionChange: this.onSelectionChange
-                        }
+                        },
+                        title: this.model.config.verbose_name
                     }
                 }, this.options.remoteTable)
             },

diff --git a/src/components/stats/ChartGrid.vue b/src/components/stats/ChartGrid.vue
@@ -2,10 +2,11 @@
     <el-row>
         <el-col :sm="c.sm || 24" :md="c.md || 12" :xl="c.xl || 8" v-for="c in items" :key="c.name" v-loading="loading"
                 :element-loading-text="loading">
-           <template  v-if="chartData[c.name]">
-               <data-table v-if="c.type === 'table'" :group="true" :value="genTableData(c)" :fields="c.fields" :options="Object.assign({maxHeight:500},c.options)"></data-table>
-               <chart v-else :options="chartOptions[c.name]" :auto-resize="true"></chart>
-           </template>
+            <template v-if="chartData[c.name]">
+                <data-table v-if="c.type === 'table'" :group="true" :value="genTableData(c)" :fields="c.fields"
+                            :options="Object.assign({maxHeight:500},c.options)"></data-table>
+                <chart v-else :options="chartOptions[c.name]" :auto-resize="true"></chart>
+            </template>
         </el-col>
     </el-row>
 </template>
@@ -51,7 +52,7 @@
         methods: {
             genTableData(c){
                 let fns = c.fields.map(f => f.name)
-                let data=this.chartData[c.name].map((d) => zipObject(fns, d))
+                let data = this.chartData[c.name].map((d) => zipObject(fns, d))
 //                console.log(data)
                 return data
             },
@@ -79,7 +80,61 @@
             genTreeMapOption(item, data){
 
             },
-            genBarOption(item, data){
+            genFunnelOption (item, data) {
+                return Object.assign({}, COMMON_OPTIONS, {
+                    title: {
+                        text: item.title
+                    },
+                    tooltip: {
+                        trigger: 'item',
+                        formatter: "{a} <br/>{b} : {c}%"
+                    },
+                    legend: {
+                        data: data.map(a => a[0])
+                    },
+                    calculable: true,
+                    series: [
+                        {
+                            name: '漏斗图',
+                            type: 'funnel',
+                            left: '10%',
+                            top: 60,
+                            bottom: 60,
+                            width: '80%',
+                            min: 0,
+                            max: 100,
+                            minSize: '0%',
+                            maxSize: '100%',
+                            sort: 'descending',
+                            gap: 2,
+                            label: {
+                                show: true,
+                                position: 'inside'
+                            },
+                            labelLine: {
+                                length: 10,
+                                lineStyle: {
+                                    width: 1,
+                                    type: 'solid'
+                                }
+                            },
+                            itemStyle: {
+                                borderColor: '#fff',
+                                borderWidth: 1
+                            },
+                            emphasis: {
+                                label: {
+                                    fontSize: 20
+                                }
+                            },
+                            data: data.map(a => {
+                                return {value: (a[1]/data[0][1]*100).toFixed(0), name: a[0]}
+                            })
+                        }
+                    ]
+                })
+            },
+            genBarOption (item, data){
                 let dataZoom = []
                 if (data.length >= 16) {
                     dataZoom.push(
@@ -135,7 +190,7 @@
             chartOptions(){
                 let res = {}
                 this.items.forEach((a) => {
-                    let optionFunc = a.type == 'daily' ? this.genDailyOption : this.genBarOption
+                    let optionFunc = a.type == 'daily' ? this.genDailyOption : (a.type === 'funnel' ? this.genFunnelOption : this.genBarOption)
                     res[a.name] = optionFunc(a, this.chartData[a.name])
                 })
                 return res

diff --git a/src/router/permission.js b/src/router/permission.js
@@ -28,7 +28,7 @@ router.beforeEach((to, from, next) => {
                     // router.addRoutes(asyncRouterMap) //todo: make dynamics routers
                     next({...to, replace: true}) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
                 }).catch((error) => {
-                    Vue.$message({message:'身份认证失败, 请重新登录', type:'error'})
+                    Vue.prototype.$message({message:'身份认证失败, 请重新登录', type:'error'})
                     next({path: loginUrl, query: {redirect: to.fullPath}})
                 })
             } else {
@@ -53,5 +53,5 @@ router.afterEach(() => {
 router.onError((err) => {
     NProgress.done()
     console.error(err)
-    Vue.$message({message:`发生异常:${err}`, type:'error'})
+    Vue.prototype.$message({message:`发生异常:${err}`, type:'error'})
 })