样式调整

src/components/chart/chart210323/monthCompleteRate.vue

@@ -25,17 +25,22 @@ export default {
     }
     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))
+      chartData.payMoney.unshift(item.pay_money.toFixed(0))
+      chartData.cost.unshift(item.cost.toFixed(0))
     })
     this.initChart(chartData)
   },
   methods: {
+    formatter(num) {
+      return String(num).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
+    },
     initChart(data) {
       this.option = {
         legend: {
           data: ['收入', '投入'],
-          color: '#fff'
+          textStyle: {
+            color: '#0A7199'
+          }
         },
         grid: {
           top: '15%',
@@ -113,8 +118,8 @@ export default {
               color: {
                 type: 'linear',
                 colorStops: [
-                  { offset: 0, color: '#3DAC34' },
-                  { offset: 1, color: '#0D4708' }
+                  { offset: 0, color: '#0D4708' },
+                  { offset: 1, color: '#3DAC34' }
                 ]
               }
             }

src/components/chart/chart210323/monthIncome.vue

@@ -20,7 +20,7 @@ export default {
     }
   },
   mounted () {
-    // console.log(this.data)
+    console.log(this.data.data, '=321')
     this.initChart()
   },
   methods: {
@@ -36,7 +36,7 @@ export default {
           bottom: '0%'
         },
         radiusAxis: {
-          // show: false,
+          show: false,
           type: 'category',
           data: this.data.projectName,
           z: 10,

src/components/chart/chart210323/monthRevenueTrend.vue

@@ -10,11 +10,11 @@ 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)'
+        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: {
       }

src/components/chart/chart210323/nowIncome.vue

@@ -52,10 +52,11 @@ export default {
         notNextTick: true,
         freeMode: true,
         setWrapperSize: true,
-        speed: 2000,
+        speed: 4000,
         observer: true,
         observeParents: true,
         loop: true,
+        animationType: 'linear',
         autoplay: {
           delay: 1,
           autoplayDisableOnInteraction: false
@@ -111,6 +112,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
+::v-deep{
+  .swiper-wrapper{
+    transition-timing-function: linear;
+  }
+}
 .inner{
   padding: 0 4.1%;
   box-sizing: border-box;
@@ -124,20 +130,20 @@ export default {
   li{
     text-align: center;
     &:nth-child(1){
-      width: 20%;
+      width: 40%;
     }
     &:nth-child(2){
-      width: 20%;
+      width: 15%;
     }
     &:nth-child(3){
-      width: 20%;
+      width: 15%;
     }
     &:nth-child(4){
-      width: 20%;
+      width: 15%;
     }
     &:nth-child(5){
       white-space:nowrap;
-      width: 20%;
+      width: 15%;
     }
   }
 }
@@ -164,31 +170,31 @@ export default {
         color: #E59700;
         text-align: center;
         &:nth-child(1){
-          width: 20%;
+          width: 40%;
           text-overflow:ellipsis;
           overflow:hidden;
           white-space:nowrap;
         }
         &:nth-child(2){
-          width: 20%;
+          width: 15%;
           text-overflow:ellipsis;
           overflow:hidden;
           white-space:nowrap;
         }
         &:nth-child(3){
-          width: 20%;
+          width: 15%;
           text-overflow:ellipsis;
           overflow:hidden;
           white-space:nowrap;
         }
         &:nth-child(4){
-          width: 20%;
+          width: 15%;
           text-overflow:ellipsis;
           overflow:hidden;
           white-space:nowrap;
         }
         &:nth-child(5){
-          width: 20%;
+          width: 15%;
           text-overflow:ellipsis;
           overflow:hidden;
           white-space:nowrap;

src/components/chart/chart210323/weekRevenueForecast.vue

@@ -10,11 +10,11 @@ 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)'
+        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: {
       }
@@ -77,7 +77,7 @@ export default {
         item.map(cItem => {
           // console.log(cItem)
           totalNum[cItem.week] += cItem.pay_money
-          if (cItem.week === '当前周预测' || cItem.week === '当前周实际') {
+          if (cItem.week === '当前周预测' || cItem.week === 'T+1' || cItem.week === 'T+2') {
             bar.data.push({
               value: cItem.pay_money,
               itemStyle: {

src/components/chart/chart210323/yearApply.vue

@@ -54,6 +54,9 @@ export default {
             type: 'pie',
             data: data,
             radius: '70%',
+            label: {
+              formatter: '{b} {d}%'
+            },
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,

src/components/chart/chart210323/yearIncome.vue

@@ -129,19 +129,19 @@ export default {
       .block{
         width: 13px;
         height: 13px;
-        &.col-sofia{
+        &.col-Sofia{
           background: rgba(252, 101, 75, 1);
         }
-        &.col-kelley{
+        &.col-Kelley{
           background: rgba(52, 166, 210, 1);
         }
-        &.col-cu{
+        &.col-CU{
           background: rgba(152, 146, 240, 1);
         }
-        &.col-ciis{
+        &.col-CIIS{
           background: rgba(239, 177, 174, 1);
         }
-        &.col-shms{
+        &.col-SHMS{
           background: rgba(249, 189, 115, 1);
         }
       }

src/pages/chart/chart-210323.vue

@@ -12,6 +12,16 @@
                 </div>
               </div>
             </div>
+            <div class="tagging-box">
+              <ul class="tips-box">
+                <template v-for="(item, index) in monthlyIncomeData.projectName">
+                  <li :key="index">
+                    <div :class="`block col-${item}`"></div>
+                    <div class="project-name">{{ item }}</div>
+                  </li>
+                </template>
+              </ul>
+            </div>
           </card>
         </div>
         <div class="chart-l-c">
@@ -28,13 +38,13 @@
       <div class="chart-center-box">
         <div class="title-info">
           <div class="tit-l">
-            <div class="name">总销售额</div>
+            <div class="name">总销售额（月）</div>
             <div class="num">
-              {{ totalData.money }}<span></span>
+              {{ formatter(totalData.money) }}<span></span>
             </div>
           </div>
           <div class="tit-l">
-            <div class="name">总成单量</div>
+            <div class="name">总成单量（月）</div>
             <div class="num">
               {{ totalData.count }}<span></span>
             </div>
@@ -101,7 +111,8 @@ export default {
     yearApply,
     yearRankingApply,
     weekRevenueForecast,
-    Card
+    Card,
+    tipsData: []
   },
   data() {
     return {
@@ -121,6 +132,13 @@ export default {
       totalData: {
         money: '',
         count: ''
+      },
+      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)'
       }
     }
   },
@@ -132,6 +150,9 @@ export default {
     this.getData()
   },
   methods: {
+    formatter(num) {
+      return String(num).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
+    },
     getData() {
       action.Chart210323.getMonthProjectIncome().then(res => {
         res.data.sell_data.map(item => {
@@ -140,7 +161,7 @@ export default {
             {
               value: item.pay_money,
               itemStyle: {
-                color: '#34A6D2'
+                color: this.getColor[item.project_name]
               }
             }
           )
@@ -198,6 +219,52 @@ export default {
           font-size: 18px;
           color: #F3F3F3;
         }
+        .tagging-box{
+          position: absolute;
+          top: 50%;
+          left: 5%;
+          transform: translateY(-50%);
+          .tips-box{
+            // padding-top: 5%;
+            // transform: translateX(-20px);
+            li{
+              width: 142px;
+              display: flex;
+              margin-bottom: 20px;
+              .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;
+              }
+            }
+          }
+        }
         .chart-show{
           position: absolute;
           // bottom: 4.5%;