修改样式

.config.dev.js

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

src/api/chart210323.js

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

src/components/chart/chart210323/monthCompleteRate.vue

@@ -25,7 +25,7 @@ export default {
     }
     this.data.map(item => {
       chartData.project.unshift(item.project_name)
-      chartData.payMoney.unshift(item.pay_money.toFixed(0))
+      chartData.payMoney.unshift(item.one_line_pay_money.toFixed(0))
       chartData.cost.unshift(item.cost.toFixed(0))
     })
     this.initChart(chartData)

src/components/chart/chart210323/nowApply.vue

@@ -2,10 +2,10 @@
   <div class="apply-inner">
     <div class="nav-title-apply">
       <div>项目</div>
-      <div>留资总数</div>
-      <div>单条留资成本</div>
-      <div>已缴报名费</div>
-      <div>报名后均转换率</div>
+      <div>留资总数<span>(本月)</span></div>
+      <div>单条留资成本<span>(本月)</span></div>
+      <div>已缴报名费<span>(本月)</span></div>
+      <div>报名后均转换率<span>(所有)</span></div>
     </div>
     <ul class="apply-content">
       <template v-for="(item, index) in dataList">
@@ -84,7 +84,13 @@ export default {
     text-align: center;
     width: 20%;
     height: 39px;
-    font-size: 16px;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    span{
+      font-size: 12px;
+    }
   }
   border-bottom: 1px solid rgba(52, 166, 210, .4);
 }

src/components/chart/chart210323/nowIncome.vue

@@ -59,8 +59,11 @@ export default {
         animationType: 'linear',
         autoplay: {
           delay: 1,
+          stopOnLastSlide: false,
+          disableOnInteraction: true,
           autoplayDisableOnInteraction: false
         },
+        slidesPerView: 'auto',
         direction: 'vertical'
       },
       dataList: []
@@ -152,7 +155,8 @@ export default {
 }
 .list-content{
   width: 100%;
-  height: 100px;
+  // height: 140px;
+  // max-height: 140px;
   .slide{
     // padding-top: 10px;
     width: 100%;

src/components/chart/chart210323/nowIncome2.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 :class="item.pay_type == '报名费' && 'active'">
+                <div>{{ item.pay_time }}</div>
+                <div>{{ item.user_name }}</div>
+                <div>{{ item.pay_type }}</div>
+                <div>{{ item.project_name }}</div>
+                <div>{{ item.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,
+        // animationType: 'linear',
+        autoplay: {
+          delay: 1,
+          stopOnLastSlide: false,
+          disableOnInteraction: true,
+          autoplayDisableOnInteraction: false
+        },
+        autoHeight: true,
+        // slidesPerView: 'auto',
+        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(() => {
+      this.getData(Math.round(countH / 35))
+      setInterval(() => {
+        this.getData(Math.round(countH / 35))
+      }, 60 * 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.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">
+#scroll-set-h{
+  overflow: hidden;
+}
+::v-deep{
+  .swiper-wrapper{
+    transition-timing-function: linear;
+  }
+}
+.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: 40%;
+    }
+    &:nth-child(2){
+      width: 15%;
+    }
+    &:nth-child(3){
+      width: 15%;
+    }
+    &:nth-child(4){
+      width: 15%;
+    }
+    &:nth-child(5){
+      white-space:nowrap;
+      width: 15%;
+    }
+  }
+}
+.list-content{
+  width: 100%;
+  // height: 140px;
+  // max-height: 140px;
+  .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: 40%;
+          text-overflow:ellipsis;
+          overflow:hidden;
+          white-space:nowrap;
+        }
+        &:nth-child(2){
+          width: 15%;
+          text-overflow:ellipsis;
+          overflow:hidden;
+          white-space:nowrap;
+        }
+        &:nth-child(3){
+          width: 15%;
+          text-overflow:ellipsis;
+          overflow:hidden;
+          white-space:nowrap;
+        }
+        &:nth-child(4){
+          width: 15%;
+          text-overflow:ellipsis;
+          overflow:hidden;
+          white-space:nowrap;
+        }
+        &:nth-child(5){
+          width: 15%;
+          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;
+        // height: auto;
+      }
+    }
+  }
+}
+</style>

src/pages/chart/chart-210323.vue

@@ -15,7 +15,7 @@
           </card>
         </div>
         <div class="chart-l-c">
-          <card title="项目投入产出比（本月）">
+          <card title="项目线上投入产出比（本月）">
             <month-complete-rate v-if="domFlag" :data="monthCompleteRateData"></month-complete-rate>
           </card>
         </div>
@@ -58,17 +58,17 @@
           </card>
         </div>
         <div class="chart-r-c">
-          <card title="项目报名数据排名">
+          <card title="项目报名数据排名（本年度）">
             <year-ranking-apply></year-ranking-apply>
           </card>
         </div>
         <div class="chart-r-c2">
-          <card title="营收走势">
+          <card title="营收走势（本年度）">
             <month-revenue-trend></month-revenue-trend>
           </card>
         </div>
         <div class="chart-r-b">
-          <card title="缴费结构">
+          <card title="缴费结构（本年度）">
             <year-apply></year-apply>
           </card>
         </div>
@@ -80,7 +80,7 @@
 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 nowIncome from '../../components/chart/chart210323/nowIncome2'
 import nowApply from '../../components/chart/chart210323/nowApply'
 import yearIncome from '../../components/chart/chart210323/yearIncome'
 import monthRevenueTrend from '../../components/chart/chart210323/monthRevenueTrend'