updata

.config.dev.js

 module.exports = {
   domain: 'dev.ezijing.com',
-  url: 'https://ehall2.ezijing.com/api',
+  url: 'http://data-view.ezijing.com',
   isEnableToIphoneDebugger: false,
   // apiBaseURL: '//demo-login.ezijing.com/',
   webpack: {

.gitignore

+.DS_store
+node_modules
+client-dist

package-lock.json

@@ -3679,6 +3679,14 @@
         "entities": "^2.0.0"
       }
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "requires": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz",
@@ -3743,6 +3751,14 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
+      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
+      "requires": {
+        "zrender": "4.3.2"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -8588,6 +8604,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-detector": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.1.10.tgz",
+      "integrity": "sha512-iLcXC8A6Fb0DfA+TRiywrK/0A22bFqkhntjMJMEzXDA4XkcEkfwpNbv7W8iewUiD0xYIaeiXOfiEehTqGKsUFw=="
+    },
     "resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
@@ -9553,6 +9574,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+    },
     "ssri": {
       "version": "6.0.1",
       "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-6.0.1.tgz",
@@ -9774,6 +9800,15 @@
         "has-flag": "^3.0.0"
       }
     },
+    "swiper": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
+      "requires": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      }
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npm.taobao.org/table/download/table-5.4.6.tgz?cache=0&sync_timestamp=1609732765587&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftable%2Fdownload%2Ftable-5.4.6.tgz",
@@ -10598,6 +10633,21 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1614614651009&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz",
       "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
     },
+    "vue-awesome-swiper": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
+      "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ=="
+    },
+    "vue-echarts": {
+      "version": "5.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-5.0.0-beta.0.tgz",
+      "integrity": "sha512-QZFKGXDAYFQo+F20REpzcdLx79nsl4kOorJRpN+08aYq4YiIlmtWss1Lxadm7Fo+NYyWm8nnT+h4xHv3uqWIDQ==",
+      "requires": {
+        "core-js": "^3.4.4",
+        "lodash": "^4.17.15",
+        "resize-detector": "^0.1.10"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.6.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.6.0.tgz?cache=0&sync_timestamp=1614679624052&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.6.0.tgz",
@@ -11529,6 +11579,11 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
+      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
     }
   }
 }

package.json

@@ -83,6 +83,10 @@
     "vue-loader": "^15.9.3",
     "vue-meta-info": "^0.1.7",
     "vue-router": "^3.4.6",
-    "vue-template-compiler": "^2.6.12"
+    "vue-template-compiler": "^2.6.12",
+    "echarts": "^4.7.0",
+    "vue-echarts": "^5.0.0-beta.0",
+    "swiper": "^5.4.5",
+    "vue-awesome-swiper": "^4.1.1"
   }
 }

src/action/Chart210323Action.js

+import BaseACTION from './base_action'
+import { Chart210323 } from '@api'
+
+export default class Chart210323Action extends BaseACTION {
+  /* get传输方式 */
+  getMonthProjectIncome (id) {
+    return Chart210323.getMonthProjectIncome(id).then(res => {
+      return res || { test: 'OK' }
+    }).catch(res => {
+      return res || { test: 'OK' }
+    })
+  }
+
+  /* get传输方式 */
+  getYearPlanCompletion (id) {
+    return Chart210323.getYearPlanCompletion(id).then(res => {
+      return res || { test: 'OK' }
+    }).catch(res => {
+      return res || { test: 'OK' }
+    })
+  }
+
+  /* get传输方式 */
+  getMonthRevenueTrend (id) {
+    return Chart210323.getMonthRevenueTrend(id).then(res => {
+      return res || { test: 'OK' }
+    }).catch(res => {
+      return res || { test: 'OK' }
+    })
+  }
+
+  /* get传输方式 */
+  getRealTimePay (id) {
+    return Chart210323.getRealTimePay(id).then(res => {
+      return res || { test: 'OK' }
+    }).catch(res => {
+      return res || { test: 'OK' }
+    })
+  }
+
+  /* get传输方式 */
+  getProjectAppCost (id) {
+    return Chart210323.getProjectAppCost(id).then(res => {
+      return res || { test: 'OK' }
+    }).catch(res => {
+      return res || { test: 'OK' }
+    })
+  }
+
+  /* get传输方式 */
+  getYearRankingApply (id) {
+    return Chart210323.getYearRankingApply(id).then(res => {
+      return res || { test: 'OK' }
+    }).catch(res => {
+      return res || { test: 'OK' }
+    })
+  }
+
+  /* get传输方式 */
+  getChannelPayMoney (id) {
+    return Chart210323.getChannelPayMoney(id).then(res => {
+      return res || { test: 'OK' }
+    }).catch(res => {
+      return res || { test: 'OK' }
+    })
+  }
+
+  /* get传输方式 */
+  getProjectPayWeek (id) {
+    return Chart210323.getProjectPayWeek(id).then(res => {
+      return res || { test: 'OK' }
+    }).catch(res => {
+      return res || { test: 'OK' }
+    })
+  }
+}

src/action/TestAction.js

 import BaseACTION from './base_action'
-import { Test } from '@api'
+import { Chart210323 } from '@api'
 
-export default class TestAction extends BaseACTION {
+export default class Chart210323Action extends BaseACTION {
   /* get传输方式 */
   getTest (id) {
-    return Test.getTest(id).then(res => {
+    return Chart210323.getTest(id).then(res => {
       return res || { test: this.getVueInstance().$t('action.interface') }
     }).catch(res => {
       return res || { test: this.getVueInstance().$t('action.interface') }
@@ -13,7 +13,7 @@ export default class TestAction extends BaseACTION {
 
   /* post传输方式 */
   postTest (obj = {}) {
-    return Test.postTest(obj).then(res => {
+    return Chart210323.postTest(obj).then(res => {
       return res || { test: 'OK' }
     }).catch(res => {
       return res || { test: 'OK' }
@@ -22,7 +22,7 @@ export default class TestAction extends BaseACTION {
 
   /* 当前登录用户，检测是否该系统有权限 */
   getInfo () {
-    return Test.getInfo().then(res => {
+    return Chart210323.getInfo().then(res => {
       return res || { test: 'OK' }
     }).catch(res => {
       return res || { test: 'OK' }

src/action/index.js

 import TestAction from './TestAction'
+import Chart210323Action from './Chart210323Action'
 
 const Test = new TestAction()
+const Chart210323 = new Chart210323Action()
 
 const cAction = {
-  Test
+  Test,
+  Chart210323
 }
 
 export default cAction

src/api/chart210323.js

+import BaseAPI from './base_api'
+
+export default class Chart210323API extends BaseAPI {
+  /**
+   * get传输方式
+   * @param {[string]} id resource_id
+   */
+  getMonthProjectIncome = () => this.get('/v1/big_screen_marketing/now_month_project_income', {})
+  /**
+   * get传输方式
+   * @param {[string]} id resource_id
+   */
+  getYearPlanCompletion = () => this.get('/v1/big_screen_marketing/year_plan_completion', {})
+  /**
+   * get传输方式
+   * @param {[string]} id resource_id
+   */
+  getMonthRevenueTrend = () => this.get('/v1/big_screen_marketing/every_month_project_income', {})
+  /**
+   * get传输方式
+   * @param {[string]} id resource_id
+   */
+  getRealTimePay = () => this.get('/v1/big_screen_marketing/real_time_pay', {})
+  /**
+   * get传输方式
+   * @param {[string]} id resource_id
+   */
+  getProjectAppCost = () => this.get('/v1/big_screen_marketing/project_app_cost', {})
+  /**
+   * get传输方式
+   * @param {[string]} id resource_id
+   */
+  getYearRankingApply = () => this.get('/v1/big_screen_marketing/year_project_apply', {})
+  /**
+   * get传输方式
+   * @param {[string]} id resource_id
+   */
+  getChannelPayMoney = () => this.get('/v1/big_screen_marketing/channel_pay_money', {})
+  /**
+   * get传输方式
+   * @param {[string]} id resource_id
+   */
+  getProjectPayWeek = () => this.get('/v1/big_screen_marketing/project_pay_week ', {})
+}

src/api/index.js

 import TestAPI from './test_api'
+import Chart210323API from './chart210323'
 
 const Test = new TestAPI(webConf)
+const Chart210323 = new Chart210323API(webConf)
 
 export {
-  Test
+  Test,
+  Chart210323
 }

src/components/beforeEnter/Before.js

-import cAction from '@action'
+// import cAction from '@action'
 
-import { Message } from 'element-ui'
+// import { Message } from 'element-ui'
 
 export default class Before {
   constructor (opt) {
@@ -23,12 +23,13 @@ export default class Before {
   /* 获取用户信息 */
   isLogin () {
     if (window.G.UserInfo) return true
-    return cAction.Test.getInfo().then(res => {
-      window.G.UserInfo = res
-      return true
-    }).catch(res => {
-      Message({ type: 'error', message: res.message })
-      return false
-    })
+    return true
+    // return cAction.Test.getInfo().then(res => {
+    //   window.G.UserInfo = res
+    //   return true
+    // }).catch(res => {
+    //   Message({ type: 'error', message: res.message })
+    //   return false
+    // })
   }
 }

src/components/chart/card.vue

+<template>
+  <div class="border-box">
+    <div class="content-box">
+      <div class="tit" v-if="title">{{ title }}</div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String,
+    devClass: String
+  }
+}
+</script>
+
+<style lang="scss">
+.border-box{
+  width: 100%;
+  height: 100%;
+  // padding: 3px;
+  box-sizing: border-box;
+  background-image: linear-gradient(56deg, #162B85, #20B4E2, #000F4A, #172987);
+  border-radius: 20px;
+  position: relative;
+  &.after-w{
+    &::after{
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      background: #000;
+      width: 100%;
+      height: 98%;
+      z-index: 9999;
+      transform: translate(-50%, -50%);
+      border-radius: 20px;
+    }
+  }
+  &::after{
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background: #000;
+    width: 100%;
+    height: 100%;
+    transform: translate(-50%, -50%) scale(.99, .98);
+    border-radius: 20px;
+  }
+  .content-box{
+    position: relative;
+    z-index: 9;
+    width: 100%;
+    height: 100%;
+    border-radius: 20px;
+    background: linear-gradient(0deg, rgba(29,53,122,0.5) 0%, rgba(23, 41, 136, 0) 100%);
+    overflow-y: scroll;
+    &::-webkit-scrollbar{
+      // width: 4px;
+      // height: 4px;
+      display: none;
+    }
+    // &::-webkit-scrollbar-button{
+    //   width: 0;
+    //   height: 0;
+    // }
+    // &::-webkit-scrollbar-track{
+    // }
+    // &::-webkit-scrollbar-thumb{
+    //   border-radius: 8px;
+    //   background-color: rgba(0, 203, 255, .5);
+    // }
+    // &::-webkit-scrollbar-thumb:hover {
+    //   background-color: rgba(0, 203, 255, 1);
+    // }
+    // &::-webkit-scrollbar-thumb:active {
+    //   background-color: rgba(0, 203, 255, 1);
+    // }
+    .tit{
+      padding: 2% 0 0 4.1%;
+      box-sizing: border-box;
+      font-size: 18px;
+      color: #F3F3F3;
+    }
+  }
+}
+</style>

src/components/chart/chart210323/monthCompleteRate.vue

+<template>
+  <div class="echarts-box">
+    <v-chart :options="option"/>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array
+    }
+  },
+  data () {
+    return {
+      option: {
+      }
+    }
+  },
+  beforeMount () {
+    const chartData = {
+      project: [],
+      payMoney: [],
+      cost: []
+    }
+    this.data.map(item => {
+      chartData.project.unshift(item.project_name)
+      chartData.payMoney.unshift(item.pay_money.toFixed(2))
+      chartData.cost.unshift(item.cost.toFixed(2))
+    })
+    this.initChart(chartData)
+  },
+  methods: {
+    initChart(data) {
+      this.option = {
+        legend: {
+          data: ['收入', '投入']
+        },
+        grid: {
+          top: '15%',
+          left: '4%',
+          right: '2%',
+          bottom: '2%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: data.project,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            color: '#0A7199',
+            padding: [0, 15, 0, 0]
+          }
+        },
+        series: [
+          {
+            label: {
+              show: true,
+              color: '#E59700',
+              position: 'right',
+              fontSize: 11
+            },
+            name: '收入',
+            type: 'bar',
+            data: data.payMoney,
+            barMaxWidth: '8',
+            itemStyle: {
+              barBorderRadius: [20],
+              color: {
+                type: 'linear',
+                colorStops: [
+                  { offset: 0, color: '#073547' },
+                  { offset: 1, color: '#1B98BD' }
+                ]
+              }
+            }
+          },
+          {
+            label: {
+              color: '#E59700',
+              show: true,
+              position: 'right',
+              fontSize: 11
+            },
+            name: '投入',
+            type: 'bar',
+            data: data.cost,
+            barMaxWidth: '8',
+            itemStyle: {
+              barBorderRadius: [20],
+              color: {
+                type: 'linear',
+                colorStops: [
+                  { offset: 0, color: '#3DAC34' },
+                  { offset: 1, color: '#0D4708' }
+                ]
+              }
+            }
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.echarts-box{
+  width: 100%;
+  height: 80%;
+}
+.echarts {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/chart/chart210323/monthIncome.vue

+<template>
+  <div>
+    <v-chart :options="option"/>
+  </div>
+</template>
+
+<script>
+// import action from '@action'
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => { return {} }
+    }
+  },
+  data () {
+    return {
+      option: {
+      }
+    }
+  },
+  mounted () {
+    // console.log(this.data)
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.option = {
+        angleAxis: {
+          show: false
+        },
+        grid: {
+          top: '0%',
+          left: '0%',
+          right: '0%',
+          bottom: '0%'
+        },
+        radiusAxis: {
+          // show: false,
+          type: 'category',
+          data: this.data.projectName,
+          z: 10,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        textStyle: {
+          color: '#fff'
+        },
+        polar: {
+        },
+        series: [{
+          type: 'bar',
+          barWidth: 10,
+          data: this.data.data,
+          coordinateSystem: 'polar',
+          emphasis: {
+            focus: 'series'
+          }
+        }],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        }
+      }
+    }
+  }
+  // this.data.projectName
+}
+</script>
+<style lang="scss" scoped>
+.echarts {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 115%;
+  height: 115%;
+}
+</style>

src/components/chart/chart210323/monthRevenueTrend.vue

+<template>
+  <div class="echarts-box">
+    <v-chart :options="option"/>
+  </div>
+</template>
+
+<script>
+import action from '@action'
+export default {
+  data () {
+    return {
+      getColor: {
+        sofia: 'rgba(252, 101, 75, 1)',
+        kelley: 'rgba(52, 166, 210, 1)',
+        cu: 'rgba(152, 146, 240, 1)',
+        ciis: 'rgba(239, 177, 174, 1)',
+        shms: 'rgba(249, 189, 115, 1)'
+      },
+      option: {
+      }
+    }
+  },
+  beforeMount () {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      action.Chart210323.getMonthRevenueTrend().then(res => {
+        const projectName = []
+        res.data.forEach(item => {
+          if (!projectName.includes(item.project_name)) {
+            projectName.push(item.project_name)
+          }
+        })
+        projectName.sort()
+        const data = []
+        projectName.map((item, index) => {
+          data.push([])
+          res.data.find(cItem => {
+            cItem.project_name === item && data[index].push(cItem)
+          })
+        })
+        this.setChartData(data)
+      }).finally(res => {
+        // console.log('finally 可用。')
+      })
+    },
+    setChartData(data) {
+      // 定义x y数据
+      const cData = {
+        xData: [],
+        yData: []
+      }
+      // 图表柱子上面的总数
+      const totalNum = {}
+      // x轴数据
+      data[0].map(item => {
+        cData.xData.push(item.pay_month)
+        totalNum[item.pay_month] = 0
+      })
+      // y 轴数据
+      data.map((item, index) => {
+        // 柱子的默认参数
+        const bar = {
+          name: item[0].project_name,
+          type: 'bar',
+          stack: 'total',
+          emphasis: {
+            focus: 'series'
+          },
+          data: [],
+          itemStyle: {
+            color: this.getColor[item[0].project_name]
+          },
+          barMaxWidth: '20'
+        }
+        item.map(cItem => {
+          bar.data.push(cItem.pay_money)
+          totalNum[cItem.pay_month] += cItem.pay_money
+        })
+        // 总数显示设置
+        bar.label = {
+          show: !!(index === data.length - 1),
+          position: 'top',
+          color: '#fff',
+          formatter: function(c) {
+            return totalNum[c.name]
+          }
+        }
+        cData.yData.push(bar)
+      })
+      this.initChart(cData)
+    },
+    initChart(data) {
+      this.option = {
+        legend: {
+          top: 'bottom',
+          itemWidth: 13,
+          itemHeight: 13,
+          icon: 'rect',
+          textStyle: { color: '#fff', fontSize: 16 }
+        },
+        // tooltip: { trigger: 'axis', axisPointer: {} },
+        grid: {
+          top: '8%',
+          left: '3%',
+          right: '5%',
+          bottom: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: data.xData,
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            color: '#0A7199'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            color: '#0A7199'
+          }
+        },
+        series: data.yData
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.echarts-box{
+  width: 100%;
+  height: 80%;
+}
+.echarts {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/chart/chart210323/nowApply.vue

+<template>
+  <div class="apply-inner">
+    <div class="nav-title-apply">
+      <div>项目</div>
+      <div>留资总数</div>
+      <div>单条留资成本</div>
+      <div>已缴报名费</div>
+      <div>报名后均转换率</div>
+    </div>
+    <ul class="apply-content">
+      <template v-for="(item, index) in dataList">
+        <li :key="index">
+          <div>{{ item.project_name }}</div>
+          <div>{{ item.app_count }}</div>
+          <div>{{ item.app_cost }}</div>
+          <div>{{ item.apply_count }}</div>
+          <div>{{ item.conversion_rate }}</div>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script>
+import action from '@action'
+export default {
+  name: 'MonthlyIncome',
+  data() {
+    return {
+      dataList: []
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData(n) {
+      action.Chart210323.getProjectAppCost().then(res => {
+        this.dataList = res.data
+      }).finally(res => {
+        // console.log('finally 可用。')
+      })
+    }
+  }
+  // beforeMount() {
+  //   this.getData()
+  // }
+}
+</script>
+
+<style scoped lang="scss">
+.apply-inner{
+  padding: 0 5%;
+  height: 100%;
+  overflow-y: scroll;
+  box-sizing: border-box;
+  &::-webkit-scrollbar{
+    // width: 4px;
+    // height: 4px;
+    display: none;
+  }
+  // &::-webkit-scrollbar-button{
+  //   width: 0;
+  //   height: 0;
+  // }
+  // &::-webkit-scrollbar-track{
+  // }
+  // &::-webkit-scrollbar-thumb{
+  //   border-radius: 8px;
+  //   background-color: rgba(0, 203, 255, .5);
+  // }
+  // &::-webkit-scrollbar-thumb:hover {
+  //   background-color: rgba(0, 203, 255, 1);
+  // }
+  // &::-webkit-scrollbar-thumb:active {
+  //   background-color: rgba(0, 203, 255, 1);
+  // }
+}
+.nav-title-apply{
+  display: flex;
+  div{
+    line-height: 39px;
+    color: #34A6D2;
+    text-align: center;
+    width: 20%;
+    height: 39px;
+    font-size: 16px;
+  }
+  border-bottom: 1px solid rgba(52, 166, 210, .4);
+}
+.apply-content{
+  li{
+    display: flex;
+    height: 39px;
+    border-bottom: 1px solid rgba(52, 166, 210, .4);
+    div{
+      width: 20%;
+      line-height: 39px;
+      color: #fff;
+      text-align: center;
+      font-size: 16px;
+    }
+  }
+}
+</style>

src/components/chart/chart210323/nowIncome.vue

+<template>
+  <div class="inner">
+    <ul class="nav-title">
+      <li>时间</li>
+      <li>姓名</li>
+      <li>类型</li>
+      <li>项目</li>
+      <li>金额（元）</li>
+    </ul>
+    <div class="list-content" id="scroll-set-h">
+      <swiper ref="mySwiper" :options="swiperOption" v-if="isSwiperShow">
+        <template v-for="(item, index) in dataList">
+          <swiper-slide :key="index">
+            <ul class="slide">
+              <template v-for="(cItem, cIndex) in item">
+                <li :key="'c' + cIndex" :class="cItem.pay_type == '报名费' && 'active'">
+                  <div>{{ cItem.pay_time }}</div>
+                  <div>{{ cItem.user_name }}</div>
+                  <div>{{ cItem.pay_type }}</div>
+                  <div>{{ cItem.project_name }}</div>
+                  <div>{{ cItem.pay_money }}</div>
+                </li>
+              </template>
+            </ul>
+          </swiper-slide>
+        </template>
+      </swiper>
+    </div>
+  </div>
+</template>
+
+<script>
+// import * as api from '@/api/index'
+import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+import action from '@action'
+export default {
+  components: {
+    Swiper,
+    SwiperSlide
+  },
+  directives: {
+    swiper: directive
+  },
+  name: 'MonthlyIncome',
+  data() {
+    return {
+      isSwiperShow: false,
+      swiperOption: {
+        // slidesPerView: 'auto',
+        // spaceBetween: 79,
+        notNextTick: true,
+        freeMode: true,
+        setWrapperSize: true,
+        speed: 2000,
+        observer: true,
+        observeParents: true,
+        loop: true,
+        autoplay: {
+          delay: 1,
+          autoplayDisableOnInteraction: false
+        },
+        direction: 'vertical'
+      },
+      dataList: []
+    }
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.$swiper
+    }
+  },
+  mounted() {
+    const countH = $('.chart-l-b').outerHeight() - $('.chart-l-b .tit').outerHeight() - $('.chart-l-b .nav-title').outerHeight() - 20
+    $('#scroll-set-h').height(countH)
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.getData(Math.round(countH / 35))
+      }, 1000)
+    })
+  },
+  methods: {
+    getData(n) {
+      action.Chart210323.getRealTimePay().then(res => {
+        this.dataList = []
+        // 填充数据
+        for (let i = 0; i < res.data.length / n; i++) {
+          this.dataList.push([])
+        }
+        // push到二维数组里
+        res.data.map((item, index) => {
+          this.dataList[parseInt(index / n)].push(item)
+        })
+        // 检查最后一个数组是不是少item
+        const lengthNum = this.dataList[this.dataList.length - 1].length
+        if (lengthNum !== n) {
+          for (let i = 0; i < n - lengthNum; i++) {
+            this.dataList[this.dataList.length - 1].push(res.data[i])
+          }
+        }
+        this.isSwiperShow = true
+      }).finally(res => {
+        // console.log('finally 可用。')
+      })
+    }
+  },
+  beforeMount() {
+    // this.getData()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.inner{
+  padding: 0 4.1%;
+  box-sizing: border-box;
+}
+.nav-title{
+  display: flex;
+  font-size: 16px;
+  color: #34A6D2;
+  padding-top: 2%;
+  justify-content: space-between;
+  li{
+    text-align: center;
+    &:nth-child(1){
+      width: 20%;
+    }
+    &:nth-child(2){
+      width: 20%;
+    }
+    &:nth-child(3){
+      width: 20%;
+    }
+    &:nth-child(4){
+      width: 20%;
+    }
+    &:nth-child(5){
+      white-space:nowrap;
+      width: 20%;
+    }
+  }
+}
+.list-content{
+  width: 100%;
+  height: 100px;
+  .slide{
+    // padding-top: 10px;
+    width: 100%;
+    li{
+      width: 100%;
+      padding-top: 15px;
+      display: flex;
+      justify-content: space-between;
+      &:nth-child(1){
+        // padding-top: 0;
+      }
+      &.active{
+        div{
+          color: #fff;
+        }
+      }
+      div{
+        color: #E59700;
+        text-align: center;
+        &:nth-child(1){
+          width: 20%;
+          text-overflow:ellipsis;
+          overflow:hidden;
+          white-space:nowrap;
+        }
+        &:nth-child(2){
+          width: 20%;
+          text-overflow:ellipsis;
+          overflow:hidden;
+          white-space:nowrap;
+        }
+        &:nth-child(3){
+          width: 20%;
+          text-overflow:ellipsis;
+          overflow:hidden;
+          white-space:nowrap;
+        }
+        &:nth-child(4){
+          width: 20%;
+          text-overflow:ellipsis;
+          overflow:hidden;
+          white-space:nowrap;
+        }
+        &:nth-child(5){
+          width: 20%;
+          text-overflow:ellipsis;
+          overflow:hidden;
+          white-space:nowrap;
+        }
+      }
+    }
+  }
+  ::v-deep .swiper-container{
+    height: 100%;
+    // margin: 0 auto;
+    .swiper-wrapper{
+      .swiper-slide{
+        // padding-bottom: 15px;
+        width: auto !important;
+      }
+    }
+  }
+}
+</style>

src/components/chart/chart210323/weekRevenueForecast.vue

+<template>
+  <div class="echarts-box">
+    <v-chart :options="option"/>
+  </div>
+</template>
+
+<script>
+import action from '@action'
+export default {
+  data () {
+    return {
+      getColor: {
+        sofia: 'rgba(252, 101, 75, 1)',
+        kelley: 'rgba(52, 166, 210, 1)',
+        cu: 'rgba(152, 146, 240, 1)',
+        ciis: 'rgba(239, 177, 174, 1)',
+        shms: 'rgba(249, 189, 115, 1)'
+      },
+      option: {
+      }
+    }
+  },
+  beforeMount () {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      action.Chart210323.getProjectPayWeek().then(res => {
+        const projectName = []
+        res.data.forEach(item => {
+          if (!projectName.includes(item.project_name)) {
+            projectName.push(item.project_name)
+          }
+        })
+        projectName.sort()
+        const data = []
+        projectName.map((item, index) => {
+          data.push([])
+          res.data.find(cItem => {
+            cItem.project_name === item && data[index].push(cItem)
+          })
+        })
+        this.setChartData(data)
+      }).finally(res => {
+        // console.log('finally 可用。')
+      })
+    },
+    setChartData(data) {
+      // 定义x y数据
+      const cData = {
+        xData: [],
+        yData: []
+      }
+      // 图表柱子上面的总数
+      const totalNum = {}
+      // x轴数据
+      data[0].map(item => {
+        cData.xData.push(item.week)
+        totalNum[item.week] = 0
+      })
+      // y 轴数据
+      data.map((item, index) => {
+        // 柱子的默认参数
+        const bar = {
+          name: item[0].project_name,
+          type: 'bar',
+          stack: 'total',
+          emphasis: {
+            focus: 'series'
+          },
+          data: [],
+          barMaxWidth: '20',
+          itemStyle: {
+            color: this.getColor[item[0].project_name]
+          }
+        }
+        item.map(cItem => {
+          // console.log(cItem)
+          totalNum[cItem.week] += cItem.pay_money
+          if (cItem.week === '当前周预测' || cItem.week === '当前周实际') {
+            bar.data.push({
+              value: cItem.pay_money,
+              itemStyle: {
+                normal: {
+                  barBorderColor: this.getColor[item[0].project_name],
+                  barBorderWidth: 1,
+                  barBorderRadius: 0,
+                  borderType: 'dotted',
+                  color: 'rgba(0, 0, 0, 0.1)'
+                }
+              }
+            })
+          } else {
+            bar.data.push({
+              value: cItem.pay_money,
+              itemStyle: {
+                normal: {
+                  color: this.getColor[item[0].project_name]
+                }
+              }
+            })
+          }
+        })
+        // 总数显示设置
+        bar.label = {
+          show: !!(index === data.length - 1),
+          position: 'top',
+          color: '#fff',
+          formatter: function(c) {
+            return totalNum[c.name]
+          }
+        }
+        // console.log(cData.yData, '-123')
+        cData.yData.push(bar)
+      })
+      this.initChart(cData)
+    },
+    initChart(data) {
+      this.option = {
+        legend: {
+          top: 'bottom',
+          itemWidth: 13,
+          itemHeight: 13,
+          icon: 'rect',
+          textStyle: { color: '#fff', fontSize: 16 }
+        },
+        // tooltip: { trigger: 'axis', axisPointer: {} },
+        grid: {
+          top: '15%',
+          left: '3%',
+          right: '5%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: data.xData,
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            color: '#0A7199',
+            interval: 0,
+            rotate: 40
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            color: '#0A7199'
+          }
+        },
+        series: data.yData
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.echarts-box{
+  width: 100%;
+  height: 80%;
+}
+.echarts {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/chart/chart210323/yearApply.vue

+<template>
+  <div class="echarts">
+    <v-chart :options="option"/>
+  </div>
+</template>
+
+<script>
+import action from '@action'
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => { return {} }
+    }
+  },
+  data () {
+    return {
+      option: {},
+      getColor: {
+        0: 'rgba(252, 101, 75, 1)',
+        1: 'rgba(52, 166, 210, 1)',
+        2: 'rgba(152, 146, 240, 1)',
+        3: 'rgba(239, 177, 174, 1)',
+        4: 'rgba(249, 189, 115, 1)'
+      }
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      action.Chart210323.getChannelPayMoney().then(res => {
+        const data = []
+        res.data.map((item, index) => {
+          data.push({
+            value: item.pay_money,
+            name: item.channel_name,
+            itemStyle: {
+              color: this.getColor[index]
+            }
+          })
+        })
+        this.initChart(data)
+      }).finally(res => {
+        // console.log('finally 可用。')
+      })
+    },
+    initChart(data) {
+      this.option = {
+        series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            data: data,
+            radius: '70%',
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.echarts {
+  width: 100%;
+  height: 85%;
+}
+</style>

src/components/chart/chart210323/yearIncome.vue

+<template>
+  <div class="income-box">
+    <div class="echarts-box">
+      <v-chart :options="option"/>
+      <div class="allMoney">{{ (allMoney / 10000).toFixed(2) }}万</div>
+    </div>
+    <ul class="tips-box">
+      <template v-for="(item, index) in tipsData">
+        <li :key="index">
+          <div :class="`block col-${item.projectName}`"></div>
+          <div class="project-name">{{ item.projectName }}</div>
+          <div class="num">{{ item.num }}%</div>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script>
+import action from '@action'
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => { return {} }
+    }
+  },
+  data () {
+    return {
+      getColor: {
+        sofia: 'rgba(252, 101, 75, 1)',
+        kelley: 'rgba(52, 166, 210, 1)',
+        cu: 'rgba(152, 146, 240, 1)',
+        ciis: 'rgba(239, 177, 174, 1)',
+        shms: 'rgba(249, 189, 115, 1)'
+      },
+      option: {
+      },
+      tipsData: [],
+      allMoney: 0
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      const data = []
+      action.Chart210323.getYearPlanCompletion().then(res => {
+        let allMoney = 0
+        res.data.map(item => {
+          allMoney += item.all_pay_money
+          this.allMoney += item.all_pay_money
+        })
+        // console.log(allMoney)
+        res.data.map(item => {
+          data.push({
+            value: item.all_pay_money,
+            name: item.project_name,
+            itemStyle: {
+              color: this.getColor[item.project_name]
+            }
+          })
+          this.tipsData.push({
+            projectName: item.project_name,
+            num: Math.round(item.all_pay_money / allMoney * 100)
+          })
+        })
+        this.initChart(data)
+        // console.log(this.tipsData)
+      }).finally(res => {
+        // console.log('finally 可用。')
+      })
+    },
+    initChart(data) {
+      this.option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 0,
+              borderColor: 'rgb(0, 0, 0)',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            labelLine: {
+              show: false
+            },
+            data: data
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.echarts-box{
+  width: 50%;
+  height: 90%;
+  position: relative;
+}
+.echarts{
+  width: 100%;
+  height: 100%;
+}
+.income-box{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  // align-items: center;
+  .tips-box{
+    padding-top: 5%;
+    transform: translateX(-20px);
+    li{
+      width: 142px;
+      display: flex;
+      margin-bottom: 10px;
+      .block{
+        width: 13px;
+        height: 13px;
+        &.col-sofia{
+          background: rgba(252, 101, 75, 1);
+        }
+        &.col-kelley{
+          background: rgba(52, 166, 210, 1);
+        }
+        &.col-cu{
+          background: rgba(152, 146, 240, 1);
+        }
+        &.col-ciis{
+          background: rgba(239, 177, 174, 1);
+        }
+        &.col-shms{
+          background: rgba(249, 189, 115, 1);
+        }
+      }
+      .project-name{
+        font-size: 17px;
+        color: #F3F3F3;
+        line-height: 13px;
+        margin-left: 12px;
+      }
+      .num{
+        font-size: 16px;
+        color: #F3F3F3;
+        line-height: 13px;
+        margin-left: auto;
+      }
+    }
+  }
+}
+.allMoney{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #fff;
+}
+</style>

src/components/chart/chart210323/yearRankingApply.vue

+<template>
+  <ul class="rate-box">
+    <template v-for="(item, index) in data">
+      <li :key="index">
+        <div class="name">{{ item.project_name }}</div>
+        <div class="progress-box">
+          <div class="block" :style="setStyle(item.rateNum)"></div>
+        </div>
+        <div class="num">{{ item.apply_count }}</div>
+      </li>
+    </template>
+  </ul>
+</template>
+
+<script>
+import action from '@action'
+export default {
+  data () {
+    return {
+      data: []
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      action.Chart210323.getYearRankingApply().then(res => {
+        const sortData = res.data.sort((a, b) => parseFloat(b.apply_count) - parseFloat(a.apply_count))
+        sortData.map(item => {
+          item.rateNum = parseInt(item.apply_count / sortData[0].apply_count * 100)
+          this.data.push(item)
+        })
+      }).finally(res => {
+        // console.log('finally 可用。')
+      })
+    }
+  },
+  computed: {
+    setStyle() {
+      return (n) => {
+        return `width: ${n}%`
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.rate-box{
+  width: 90%;
+  margin: 0 auto;
+  // padding-top: 30px;
+  li{
+    margin-top: 3%;
+    display: flex;
+    justify-content: center;
+    .name{
+      width: 18%;
+      font-size: 14px;
+      color: #0A7199;
+      line-height: 12px;
+    }
+    .progress-box{
+      width: 95%;
+      height: 12px;
+      // border: 1px solid #0A7199;
+      border-radius: 5px;
+      box-sizing: border-box;
+      .block{
+        width: 50%;
+        height: 8px;
+        background: rgba(52, 166, 210, 1);
+        border-radius: 3px;
+        margin: 1px 0;
+      }
+    }
+    .num{
+      width: 18%;
+      text-align: right;
+      font-size: 14px;
+      color: #E59700;
+      line-height: 12px;
+    }
+  }
+}
+</style>

src/main.js

@@ -8,7 +8,20 @@ import App from './app.vue' // 初始化 vue页面
 import './style.scss' // 公共样式
 import MetaInfo from 'vue-meta-info'
 import Element from 'element-ui'
-import modules from './modules'
+import ECharts from 'vue-echarts'
+import 'echarts'
+// import modules from './modules'
+// import Echarts from 'vue-echarts'
+// import 'echarts/lib/chart/bar'
+// import 'echarts/lib/chart/line'
+// import 'echarts/lib/chart/pie'
+// import 'echarts/lib/component/tooltip'
+// import 'echarts/lib/component/legend'
+// import 'echarts/lib/component/markPoint'
+// import 'echarts/lib/component/markLine'
+// import 'echarts/lib/component/graphic'
+// import 'echarts/lib/component/polar'
+// import 'echarts/lib/component/radar'
 
 import createBefore from './components/beforeEnter'
 
@@ -20,7 +33,8 @@ const i18n = createI18n()
 Vue.use(MetaInfo)
 
 Vue.use(Element, { i18n: (key, value) => i18n.t(key, value) })
-Vue.use(modules, { i18n })
+Vue.component('v-chart', ECharts)
+// Vue.use(modules, { i18n })
 
 /* 设置全局变量 */
 window.G = Vue.prototype.$GLOBAL = {

src/modules/test-module/src/TestModule.vue

@@ -13,7 +13,7 @@ export default {
   componentName: 'TestModule',
   mounted () {
     TestModule.getTestInfo().then(res => {
-      console.log('模块接口调用成功', res)
+      // console.log('模块接口调用成功', res)
     })
   }
 }

src/pages/chart/chart-210323.vue

+<template>
+  <div class="chart-box">
+    <div class="title">紫荆教育决策数据看板</div>
+    <div class="chart-content">
+      <div class="chart-left-box">
+        <div class="chart-l-t">
+          <card title="各项目月度营收">
+            <div class="chart-show">
+              <div class="circle-bg">
+                <div class="circle-bg2">
+                  <month-income v-if="domFlag" :data="monthlyIncomeData" class="bar-polar"/>
+                </div>
+              </div>
+            </div>
+          </card>
+        </div>
+        <div class="chart-l-c">
+          <card title="各项目月度投入产出比">
+            <month-complete-rate v-if="domFlag" :data="monthCompleteRateData"></month-complete-rate>
+          </card>
+        </div>
+        <div class="chart-l-b">
+          <card title="营收实时滚动信息">
+            <now-income></now-income>
+          </card>
+        </div>
+      </div>
+      <div class="chart-center-box">
+        <div class="title-info">
+          <div class="tit-l">
+            <div class="name">总销售额</div>
+            <div class="num">
+              {{ totalData.money }}<span></span>
+            </div>
+          </div>
+          <div class="tit-l">
+            <div class="name">总成单量</div>
+            <div class="num">
+              {{ totalData.count }}<span></span>
+            </div>
+          </div>
+        </div>
+        <div class="chart-c-t">
+          <card title="周营收走势及预测" devClass='after-w'>
+            <week-revenue-forecast></week-revenue-forecast>
+          </card>
+        </div>
+        <div class="chart-c-b">
+          <card devClass='after-w'>
+            <now-apply></now-apply>
+          </card>
+        </div>
+      </div>
+      <div class="chart-right-box">
+        <div class="chart-r-t">
+          <card title="年度总营收及各项目占比">
+            <year-income></year-income>
+          </card>
+        </div>
+        <div class="chart-r-c">
+          <card title="项目报名数据排名">
+            <year-ranking-apply></year-ranking-apply>
+          </card>
+        </div>
+        <div class="chart-r-c2">
+          <card title="各月营收走势">
+            <month-revenue-trend></month-revenue-trend>
+          </card>
+        </div>
+        <div class="chart-r-b">
+          <card title="缴费结构">
+            <year-apply></year-apply>
+          </card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import card from '../../components/chart/card'
+import monthIncome from '../../components/chart/chart210323/monthIncome'
+import monthCompleteRate from '../../components/chart/chart210323/monthCompleteRate'
+import nowIncome from '../../components/chart/chart210323/nowIncome'
+import nowApply from '../../components/chart/chart210323/nowApply'
+import yearIncome from '../../components/chart/chart210323/yearIncome'
+import monthRevenueTrend from '../../components/chart/chart210323/monthRevenueTrend'
+import yearApply from '../../components/chart/chart210323/yearApply'
+import yearRankingApply from '../../components/chart/chart210323/yearRankingApply'
+import weekRevenueForecast from '../../components/chart/chart210323/weekRevenueForecast'
+import action from '@action'
+import Card from '../../components/chart/card.vue'
+export default {
+  components: {
+    monthIncome,
+    card,
+    monthCompleteRate,
+    nowIncome,
+    nowApply,
+    yearIncome,
+    monthRevenueTrend,
+    yearApply,
+    yearRankingApply,
+    weekRevenueForecast,
+    Card
+  },
+  data() {
+    return {
+      domFlag: false,
+      monthlyIncomeData: {
+        data: [
+          {
+            value: 0,
+            itemStyle: {
+              color: '#34A6D2'
+            }
+          }
+        ],
+        projectName: ['']
+      },
+      monthCompleteRateData: [],
+      totalData: {
+        money: '',
+        count: ''
+      }
+    }
+  },
+  mounted() {
+    $('.circle-bg').css({
+      width: $('.chart-show').outerWidth(),
+      height: $('.chart-show').outerHeight()
+    })
+    this.getData()
+  },
+  methods: {
+    getData() {
+      action.Chart210323.getMonthProjectIncome().then(res => {
+        res.data.sell_data.map(item => {
+          // 营收数据遍历
+          this.monthlyIncomeData.data.push(
+            {
+              value: item.pay_money,
+              itemStyle: {
+                color: '#34A6D2'
+              }
+            }
+          )
+          this.monthlyIncomeData.projectName.push(item.project_name)
+          // 达成率数据遍历
+          this.monthCompleteRateData = res.data.sell_data
+          // 总销售额  总成单量
+          this.totalData.money = res.data.all_pay_money
+          this.totalData.count = res.data.all_pay_count
+        })
+        this.domFlag = true
+      }).finally(res => {
+        // console.log('finally 可用。')
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.chart-box{
+  width: 100%;
+  height: 100%;
+  .title{
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9;
+    max-width: 1920px;
+    width: 100%;
+    height: 96px;
+    background: url(https://zws-imgs-pub.ezijing.com/static/public/4d17cfb3f6d4afec61a026d18b190ccf.png) center;
+    background-size: 100% 100%;
+    text-align: center;
+    font-size: 36px;
+    font-weight: bold;
+    color: #F3F3F3;
+    line-height: 70px;
+  }
+  .chart-content{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    .chart-left-box{
+      flex: 1;
+      height: 100%;
+      margin-left: 11px;
+      padding-top: 3%;
+      box-sizing: border-box;
+      .chart-l-t{
+        height: 38%;
+        position: relative;
+        .tit{
+          padding: 5% 0 0 8.5%;
+          font-size: 18px;
+          color: #F3F3F3;
+        }
+        .chart-show{
+          position: absolute;
+          // bottom: 4.5%;
+          top: 50%;
+          left: 50%;
+          width: 50%;
+          height: 0;
+          padding-bottom: 50%;
+          transform: translate(-50%, -50%);
+          .circle-bg{
+            background: url(https://zws-imgs-pub.ezijing.com/static/public/052fbafd85745805c6e0de2f7b0fca17.png);
+            background-size: 100% 100%;
+          }
+          .circle-bg2{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 90%;
+            height: 90%;
+            background: url(https://zws-imgs-pub.ezijing.com/static/public/9433a4b9f08be20e530f43dda3ad5998.png);
+            background-size: 100% 100%;
+          }
+          .bar-polar{
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+      .chart-l-c{
+        height: 28%;
+        margin: 5% 0;
+      }
+      .chart-l-b{
+        height: 24%;
+      }
+    }
+    .chart-center-box{
+      width: 41%;
+      height: 100%;
+      margin: 0 18px 0 18px;
+      padding-top: 3%;
+      box-sizing: border-box;
+      .title-info{
+        position: relative;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        height: 17%;
+        &::after{
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          background: linear-gradient(0deg, #142E53 0%, #16466A 10%, #5081A9 21%, #5C96BB 32%, #C0ECF9 42%, #D0E8F2 49%, #C0ECF9 56.00000000000001%, #5C96BB 65%, #5081A9 75%, #16466A 88%, #142E53 100%);
+          opacity: 0.23;
+          border-radius: 10px;
+          width: 100%;
+          height: 100%;
+        }
+        .name{
+          width: 100%;
+          text-align: center;
+          font-size: 18px;
+          font-weight: bold;
+          color: #F3F3F3;
+          margin-top: 30px;
+        }
+        .num{
+          width: 100%;
+          text-align: center;
+          font-size: 36px;
+          // font-weight: bold;
+          color: #03FDF0;
+          padding-top: 5px;
+          span{
+            font-size: 18px;
+          }
+        }
+      }
+      .chart-c-t{
+        height: 45%;
+        margin: 2.5% 0 2.5%;
+      }
+      .chart-c-b{
+        height: 30%;
+      }
+    }
+    .chart-right-box{
+      flex: 1;
+      height: 100%;
+      margin-right: 12px;
+      padding-top: 3%;
+      box-sizing: border-box;
+      .chart-r-t{
+        height: 22.2%;
+      }
+      .chart-r-c{
+        height: 20.3%;
+        margin-top: 4%;
+        // margin: 1.3% 0 2.3%;
+      }
+      .chart-r-c2{
+        height: 23.1%;
+        margin-top: 4%;
+      }
+      .chart-r-b{
+        height: 23.4%;
+        margin-top: 4%;
+      }
+    }
+  }
+}
+// .border-box{
+//   width: 100%;
+//   height: 100%;
+//   padding: 3px;
+//   box-sizing: border-box;
+//   background-image: linear-gradient(56deg, #162B85, #20B4E2, #000F4A, #172987);
+//   border-radius: 20px;
+//   position: relative;
+//   &.after-w{
+//     &::after{
+//       content: '';
+//       position: absolute;
+//       top: 50%;
+//       left: 50%;
+//       background: #000;
+//       width: 99%;
+//       height: 98%;
+//       transform: translate(-50%, -50%);
+//       border-radius: 20px;
+//     }
+//   }
+//   &::after{
+//     content: '';
+//     position: absolute;
+//     top: 50%;
+//     left: 50%;
+//     background: #000;
+//     width: 98%;
+//     height: 98%;
+//     transform: translate(-50%, -50%);
+//     border-radius: 20px;
+//   }
+//   .content-box{
+//     position: relative;
+//     z-index: 9;
+//     width: 100%;
+//     height: 100%;
+//     border-radius: 20px;
+//     background: linear-gradient(0deg, rgba(29,53,122,0.5) 0%, rgba(23, 41, 136, 0) 100%);
+//   }
+// }
+</style>

src/router/routes.js

 
 export default [
-  { path: '/', redirect: '/test' },
+  { path: '/', redirect: '/charts-210323' },
   /* 测试页面 */
-  { path: '/test', name: 'test', component: () => import('../pages/test.vue') },
+  { path: '/charts-210323', component: () => import('../pages/chart/chart-210323.vue') },
   /* 如果所有页面都没找到 - 指向 */
   { path: '*', component: () => import('@/components/errorPages/404.vue') }
 ]

src/style.scss

@@ -4,7 +4,13 @@ html, body {
   margin: 0;
   height: 100%;
   width: 100%;
-  background: #eee;
+  // background: linear-gradient(180deg, #1E0C0D, #1A0200);
+  background: #000;
+}
+ul, li{
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 /* 统一字体样式 */
 * {