add

README.md

 ## 两星(张謇) - 前端大屏
+
+#### 添加依赖runner(git子包仓库)
+```js
+初始化子包仓库
+    `npm run init`
+
+
+后续更新子包仓库 - 初始化已包含, 无需再次执行
+    `npm run update`
+
+开发环境
+`npm run dev`
+
+打包部署
+`npm run build`
+
+```
+### 页面名称
+```
+
+```
\ No newline at end of file

package.json

@@ -10,7 +10,7 @@
     "lint": "eslint --ext .js --ext .jsx --ext .vue client/",
     "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/ widgets/",
     "precommit": "npm run lint-fix",
-    "init": "git submodule update --init --recursive",
+    "init": "git submodule update --init --recursive && npm run update && npm install",
     "update": "git submodule update --recursive --remote --merge --force"
   },
   "author": "",

src/components/echarts/LineBar.vue

+<template>
+    <div class="bar-chart">
+        <chart-el :chartOpt="barChartConf" />
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import mixinChart from '@/public/mixins/mixinChart'
+
+export default {
+    name: 'lineBar',
+
+    mixins: [mixinChart],
+
+    data () {
+        return {
+            barChartConf: {}
+        }
+    },
+
+    props: {
+        // 图表布局配置, width, height
+        layout: {
+            type: Object,
+            default () {
+                return {}
+            }
+        },
+
+        // 图表配置
+        option: {
+            type: Object,
+            default () {
+                return {
+                    base: {},
+                    seriesData: []
+                }
+            }
+        }
+    },
+
+    mounted () {
+        this.initComponents()
+    },
+
+    methods: {
+        initComponents () {
+            const { width = '', height = '', id = '', className = 'line-bar-chart-class' } = this.mergeChartConf() || {}
+            // 基础配置, 不含series
+            const option = this.getChartOption(this.option.base) || {}
+            const seriesData = this.getSeriesData(this.option.seriesData || []) || []
+            // if (!seriesData.length) {
+            //     throw Error('该组件图表数据只能接受length为2的数组')
+            // }
+            option.series = seriesData
+            this.barChartConf = {
+                className,
+                id,
+                width,
+                height,
+                option
+            }
+        },
+
+        /**
+         * @method mergeChartConf 合并图表配置项
+         */
+        mergeChartConf () {
+            const defaultChartConf = {
+                width: '100%',
+                height: '100%',
+                // 不同的id（防止id重复，同一个页面，无法展示多个同组件图表）
+                id: 'line-bar-chart-id' + this.utils.randomStr()
+            }
+            return this.deepMerge({}, defaultChartConf, this.layout)
+        },
+
+        /**
+         * @method getChartOption 图表配置
+         */
+        getChartOption (customOption = {}) {
+            const defaultOption = {
+                title: {
+                    show: false
+                },
+                grid: {
+                    left: 0,
+                    right: 10,
+                    bottom: 0,
+                    top: 0,
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'value',
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: false
+                    },
+                    splitLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        show: false
+                    }
+                },
+                yAxis: [
+                    {
+                        type: 'category',
+                        axisTick: {
+                            show: false
+                        },
+                        axisLine: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: true,
+                            inside: false,
+                            formatter: function (val) {
+                                return `{color1|${val}}`
+                            },
+                            rich: {
+                                color1: {
+                                    fontSize: 14,
+                                    color: '#FFFFFF'
+                                }
+                            }
+                        },
+                        data: []
+                    }, {
+                        type: 'category',
+                        axisLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: true,
+                            inside: false,
+                            formatter: function (val) {
+                                return `{color|${val}}`
+                            },
+                            rich: {
+                                color: {
+                                    fontFamily: 'CenturyGothic',
+                                    fontSize: 15,
+                                    color: '#FFFFFF'
+                                }
+                            }
+                        },
+                        splitArea: {
+                            show: false
+                        },
+                        splitLine: {
+                            show: false
+                        },
+                        data: []
+                    }
+                ]
+            }
+            return this.deepMerge({}, defaultOption, customOption)
+        },
+
+        /**
+         * @method getSeriesData 图表数据
+         */
+        getSeriesData () {
+            if (this.option.seriesData.length !== 2) return []
+            const defSeriesData = [
+                {
+                    name: 'back',
+                    type: 'bar',
+                    barWidth: '4px',
+                    itemStyle: {
+                        borderRadius: [0, 0, 0, 0],
+                        normal: {
+                            color: '#233549'
+                        }
+                    },
+                    barGap: '-100%',
+                    data: [1, 2, 3]
+                },
+                {
+                    name: 'show',
+                    type: 'bar',
+                    barWidth: '4px',
+                    itemStyle: {
+                        borderRadius: [0, 0, 0, 0],
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                                offset: 0,
+                                color: 'rgba(59, 150, 235, 0.1)'
+                            }, {
+                                offset: 1,
+                                color: '#3b96eb'
+                            }], false)
+                        }
+                    },
+                    markPoint: {
+                        symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdEN0ZCRTVBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdEN0ZCRTZBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0Q3RkJFM0ExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0Q3RkJFNEExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvpJkncAAAI7SURBVHjafFNLaxNRFD73zjOZpE2ampa2agwtiCAuBBdxJQpq0bUrl+JjIYqb4i9w4aa7gksRXboTBC2KQl24kEILvghinybmMU1m7mTu3J6TTmAo1tnMvfd83znf+e657MILBQd8LLH+J0jfT7hV2iwZWjTHgF1G9hiythSoVz3JHy1Ux6vJRDxJvFPemLU09UmC/veXSF971zp0nP60p3OKJxWxWDa7UdosO7r6WAtTt790cmumBgXOwI4U+IGE+imnOTmqewudkFWeVMd/koKBbGZzeBiA8XzVz7XzNlTSOsxoHLIyArcbwjc8Xz6TCZ/ZPJxD/M0kmXMNLlYD565jwMkRG85hghNYfUhIcJs+TKFW9rvnfCibrfm43YjIbCIDGkos1nuWHLJghojFNEzjGtoCitQkJlmr+faPaas1Rvj1HZD9ylKRCaw2YoaTiptZqkjEYWtPVlNAVmOQLWAccX/28LHbGFChYm8P2/5Z6hENamNFaIl+ZcC9iwR3yvYqiFsk/OCeFUnY8M3Hpax4kzOCpw3fXIkr9nvGJCvDehBmuJitdszzhE8aFi3Wcl+vGo37R9LufIellrYDa0lIziwtUhOWGHWUd32rq98jHOGTE6bqHgSvt/MvT+d3vh91vAfHTHEJryqHbTS7vej9ase68rmRWSbcYMpYYrbJBK2QAjNtQArDFpI1JEuMiG4PvJgoB2R93/BLBPgEousIQmBkzrrbJ0QxRh30MAbBKDblv69qV4ABAOvFCo1MtxZ0AAAAAElFTkSuQmCC',
+                        symbolSize: [10, 10],
+                        data: []
+                    },
+                    data: [],
+                    z: 3
+                }
+            ]
+            const seriesData = [{}, {}]
+            seriesData[0] = this.deepMerge({}, defSeriesData[0], this.option.seriesData[0])
+            seriesData[1] = this.deepMerge({}, defSeriesData[1], this.option.seriesData[1])
+            return seriesData
+        }
+    }
+}
+</script>

src/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Vuex from 'vuex'
 import App from './App.vue'
+import './public/apis'
 import createStore from './store' // Vuex
 import createRouter from './router/router'
 import UsePlugin from 'runner/common/plugins'

src/pages/index/Left.vue

@@ -131,6 +131,15 @@ export default {
         }
     },
 
+    props: {
+        leftData: {
+            type: Object,
+            default () {
+                return {}
+            }
+        }
+    },
+
     data () {
         return {
             // 男女学员数量
@@ -405,15 +414,15 @@ export default {
 
     mounted () {
         this.init()
-        this.getAge()
-        this.getEdu()
-        this.getIndustry()
-        this.changeDegree('participate')
     },
 
     methods: {
         init () {
             this.dealGender()
+            this.getAge()
+            this.getEdu()
+            this.getIndustry()
+            this.changeDegree('participate')
         },
         // 求性别百分比
         dealGender () {

src/pages/index/active.vue

+<template>
+   <!-- 活动开展 -->
+         <div class="activity">
+            <div class="activity-one">
+                <div class="act">活动开展</div>
+                <div class="mor"><span>查看更多</span><span></span></div>
+            </div>
+            <div class="activity-two">
+                <div class="left">
+                    <count-roll :count="4166" />
+                    <p class="act-num">活动开展次数</p>
+                </div>
+                <div class="line"></div>
+                <div class="right">
+                    <line-bar
+                        :layout="activeConfig.layout"
+                        :option="activeConfig.option"
+                    />
+                </div>
+            </div>
+         </div>
+</template>
+
+<script>
+import LineBar from '@/components/echarts/LineBar'
+export default {
+    components: {
+        LineBar
+    },
+    data () {
+        return {
+            // 活动开展
+            activeConfig: {},
+            activeList: [
+                {name: '*****活动', value: 381},
+                {name: '组织活动', value: 1103},
+                {name: '*****活动', value: 192}
+            ]
+
+        }
+    },
+    mounted () {
+        this.getActive(this.activeList)
+    },
+    methods: {
+        getActive (data) {
+            let yData = data.map(v => v.name).reverse()
+            let y2Data = data.map(v => v.value).reverse()
+            let max = 4166
+            let maxData = new Array(data.length).fill(max)
+            console.log(maxData)
+            let pointData = data.reverse().map((v, i) => {
+                return {
+                    xAxis: v.value,
+                    yAxis: i
+                }
+            })
+            this.activeConfig = {
+                layout: {
+                    width: '100%',
+                    height: '100%'
+                },
+                option: {
+                    base: {
+                        xAxis: {
+                            max: max
+                        },
+                        yAxis: [
+                            {
+                                axisLabel: {
+                                    color: '#fff',
+                                    align: 'left',
+                                    padding: [0, 0, 0, -60]
+                                },
+                                data: yData
+                            }, {
+                                data: y2Data.map(v => v)
+                            }
+                        ]
+                    },
+                    seriesData: [
+                        {
+                            name: 'back',
+                            barWidth: '5px',
+                            data: maxData
+                        },
+                        {
+                            name: 'show',
+                            barWidth: '5px',
+                            itemStyle: {
+                                borderRadius: [0, 0, 0, 0],
+                                color: 'rgba(64, 169, 248, .05)'
+                            },
+                            markPoint: {
+                                symbolOffset: [0, 0.5],
+                                data: pointData
+                            },
+                            data: y2Data
+                        }
+                    ]
+                }
+            }
+        }
+    }
+
+}
+</script>
+
+<style lang="less" scoped>
+   /* 活动开展 */
+        .activity{
+            width: 100%;
+            height: 140px;
+            .activity-one{
+                display: flex;
+                justify-content: space-between;
+                .act{
+                    width: 72px;
+                    height: 19px;
+                    font-size: 18px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #FFFFFF;
+                    line-height: 28px;
+                }
+                .mor{
+                    width: 100px;
+                    height: 17px;
+                    display: flex;
+                    span:nth-child(1){
+                        width: 65px;
+                        height: 17px;
+                        margin-top: 2px;
+                        font-size: 16px;
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        color: #18D1C6;
+                        line-height: 24px;
+                    }
+                    span:nth-child(2){
+                        display: inline-block;
+                        width: 28px;
+                        height: 24px;
+                        // margin-top: 5px!important;
+                        background:url('../../../static/images/index/more.png') no-repeat;
+                    }
+                   
+                }
+            }
+            .activity-two{
+                margin-top: 12px;
+                display: flex;
+                .left{
+                    margin-top:10px;
+                    .act-num{
+                        width: 108px;
+                        height: 18px;
+                        margin-top: 20px;
+                        font-size: 18px;
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        color: #6DCDFF;
+                        line-height: 17px;
+                    }
+                }
+                .line{
+                    width: 3px;
+                    height: 76px;
+                    margin: 10px 10px 0 10px;
+                    background:url('../../../static/images/index/3.png');
+                }
+                .right{
+                    width: 300px;
+                    height: 100%;
+                }
+            }
+        }
+</style>
\ No newline at end of file

src/pages/index/index.vue

@@ -2,12 +2,14 @@
     <div class="index-page">
         <layout :layoutConf="layoutSize">
             <page-head title="张謇教育基地管理平台" slot="header" />
-            <!-- left -->
-            <left slot="left" />
-            <!-- center -->
-            <center slot="center" />
-            <!-- right -->
-            <right slot="right" />
+            <template v-if="fetchSuccess">
+                <!-- left -->
+                <left :leftData="leftData" slot="left" />
+                <!-- center -->
+                <center :centerData="centerData" slot="center" />
+                <!-- right -->
+                <right :rightData="rightData" slot="right" />
+            </template>
         </layout>
     </div>
 </template>
@@ -27,7 +29,15 @@ export default {
                 center: {
                     width: '100%'
                 }
-            }
+            },
+            // 接口获取是否成功标识
+            fetchSuccess: false,
+            // 左侧数据
+            leftData: {},
+            // 中间数据
+            centerData: {},
+            // 右侧数据
+            rightData: {}
         }
     },
 
@@ -35,6 +45,40 @@ export default {
         Left,
         Center,
         Right
+    },
+
+    mounted () {
+        this.init()
+    },
+
+    methods: {
+        async init () {
+            try {
+                const data = await this.fetch('managePlatform')
+                this.fetchSuccess = true
+                // 左侧数据
+                this.leftData = {
+                    gender: data.p1 || {}, // 男女比例
+                    age: data.p2 || {}, // 年龄结构
+                    edu: data.p3 || {}, // 学历情况
+                    party: data.p4 || {}, // 党派分布
+                    ethnic: data.p5 || {}, // 民族分布
+                    industry: data.p6 || {}, // 行业分布
+                    participate: data.p7 || {}, // 参与度
+                    active: data.p8 || {}, // 活跃度
+                    studentDemeanor: data.p9 || {}, // 学员风采
+                    starClass: data.p10 || {} // 明星班级
+                }
+                // 中间数据
+                this.centerData = {
+                }
+                // 右侧数据
+                this.rightData = {
+                }
+            } catch (err) {
+                console.log('managePlatform >', err)
+            }
+        }
     }
 }
 </script>

src/public/apis/index.js

@@ -4,12 +4,12 @@
 ;(function () {
     // 接口请求域名
     window.domain = {
-        stg: '', // 测试环境域名
-        prd: '' // 生产环境域名
+        stg: 'http://192.168.0.121:9000/', // 测试环境域名
+        prd: 'http://192.168.0.121:9000/' // 生产环境域名
     }
 
     // 接口请求路径
     window.apis = {
-
+        managePlatform: 'api/page1info'
     }
 })()