Forráskód Böngészése

优化快手大盘数据展示

zhuxinbo 5 éve
szülő
commit
c7b6da9030
3 módosított fájl, 235 hozzáadás és 194 törlés
  1. 65 65
      src/theme/index.less
  2. 168 128
      src/views/modules/Statistics/Statistics.vue
  3. 2 1
      vue.config.js

+ 65 - 65
src/theme/index.less

@@ -1,65 +1,65 @@
-//@import '~iview/src/styles/index.less';
-@import './demo.less';
-@import './components.less';
-
-// Color
-@primary-color          : #41b883;
-@info-color             : #1d8ce0;
-@success-color          : #41b883;
-@warning-color          : #ffa000;
-@error-color            : #F60000;
-@link-color             : #35495e;
-@subsidiary-color       : #9ea3b1;
-
-// Border color
-@border-color-base      : #dddee1;  // outside
-@border-color-split     : #eeeff1;  // inside
-@table-td-hover-bg      : #fafafa;
-
-// Background color
-@background-color-base  : #f1f2f7;  // base
-@menu-dark-active-bg    : #171e2e;
-@menu-dark-title        : #1c2438;
-
-//components
-.ivu-select-dropdown{
-  margin: 10px 0;
-  padding: 0;
-  .ivu-dropdown-item{
-    padding: 10px;
-  }
-  .ivu-dropdown-item-divided{
-    margin: 0;
-    &:before{
-      height: 0;
-    }
-  }
-}
-
-.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover {
-  color: #2d8cf0;
-  background: transparent !important;
-}
-
-table{
-  width: 100%;
-  border-spacing: 0;
-  tr{
-    td{
-      height: 44px;
-      margin: 0;
-      border-bottom: 1px solid #e9eaec;
-      margin: 0;
-    }
-  }
-  tr:last-child{
-    td{
-      border-bottom: none;
-    }
-  }
-}
-
-
-
-
-
+//@import '~iview/src/styles/index.less';
+@import './demo.less';
+@import './components.less';
+
+// Color
+@primary-color          : #41b883;
+@info-color             : #1d8ce0;
+@success-color          : #41b883;
+@warning-color          : #ffa000;
+@error-color            : #F60000;
+@link-color             : #35495e;
+@subsidiary-color       : #9ea3b1;
+
+// Border color
+@border-color-base      : #dddee1;  // outside
+@border-color-split     : #eeeff1;  // inside
+@table-td-hover-bg      : #fafafa;
+
+// Background color
+@background-color-base  : #f1f2f7;  // base
+@menu-dark-active-bg    : #171e2e;
+@menu-dark-title        : #1c2438;
+
+//components
+.ivu-select-dropdown{
+  margin: 10px 0;
+  padding: 0;
+  .ivu-dropdown-item{
+    padding: 10px;
+  }
+  .ivu-dropdown-item-divided{
+    margin: 0;
+    &:before{
+      height: 0;
+    }
+  }
+}
+
+.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover {
+  color: #2d8cf0;
+  background: transparent !important;
+}
+
+table{
+  width: 100%;
+  border-spacing: 0;
+  tr{
+    td{
+      height: 44px;
+      margin: 0;
+      border-bottom: 1px solid #e9eaec;
+      margin: 0;
+    }
+  }
+//   tr:last-child{
+//     td{
+//       border-bottom: none;
+//     }
+//   }
+}
+
+
+
+
+

+ 168 - 128
src/views/modules/Statistics/Statistics.vue

@@ -46,6 +46,9 @@
 .ant-table-pagination {
   display: none;
 }
+.ant-table-thead div{
+    font-weight: 700
+}
 </style>
 <template>
   <div class="statistics">
@@ -369,7 +372,7 @@
             :activeTabKey="noTitleKeyTableTwo"
             @tabChange="key => onTabChange(key, 'noTitleKeyTableTwo')"
           >
-            <a-table :columns="columnsDb" :dataSource="dataTableTwo" :pagination="false"></a-table>
+            <a-table :columns="columnsDb" :dataSource="dataTableTwo" :pagination="false" bordered></a-table>
           </a-card>
         </a-col>
       </a-row>
@@ -381,7 +384,16 @@
           :activeTabKey="noTitleKeyTable"
           @tabChange="key => onTabChange(key, 'noTitleKeyTable')"
         >
-          <a-table :columns="columns" :dataSource="dataTable" :pagination="false"></a-table>
+          <a-table
+            :columns="columns"
+            :dataSource="dataTable"
+            :pagination="false"
+            :rowKey="record => record.statHour"
+            :loading="loading"
+            bordered
+          >
+            <template slot="yesCost" slot-scope="row">{{row}}</template>
+          </a-table>
         </a-card>
       </a-col>
     </a-row>
@@ -417,20 +429,44 @@ export default {
 
   data: function() {
     return {
+      loading: true,
       columns: [
-        { title: '时间', dataIndex: 'statDate' },
-        { title: '升降值', dataIndex: 'proportion' },
-        { title: '总消耗', dataIndex: 'cost' },
-        { title: '封面点击数', dataIndex: 'photoClick' },
-        { title: '封面曝光数', dataIndex: 'photoShow' },
-        { title: '素材曝光数', dataIndex: 'aclick' }
+        { title: '时间', dataIndex: 'statDate', align: 'center' },
+        {
+          title: '总消耗升降值',
+          dataIndex: 'yesCost',
+          scopedSlots: { customRender: 'yesCost' },
+          align: 'center'
+        },
+        { title: '总消耗', dataIndex: 'cost', align: 'center' },
+        {
+          title: '封面点击数升降值',
+          dataIndex: 'yesPhotoClick',
+          scopedSlots: { customRender: 'photoClickProportion' },
+          align: 'center'
+        },
+        { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
+        {
+          title: '封面曝光数升降值',
+          dataIndex: 'yesPhotoShow',
+          scopedSlots: { customRender: 'photoShowProportion' },
+          align: 'center'
+        },
+        { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
+        {
+          title: '素材曝光数升降值',
+          dataIndex: 'yesAclick',
+          scopedSlots: { customRender: 'aclickProportion' },
+          align: 'center'
+        },
+        { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
       ],
       columnsDb: [
-        { title: '时间', dataIndex: 'statDate' },
-        { title: '总消耗', dataIndex: 'cost' },
-        { title: '封面点击数', dataIndex: 'photoClick' },
-        { title: '封面曝光数', dataIndex: 'photoShow' },
-        { title: '素材曝光数', dataIndex: 'aclick' }
+        { title: '时间', dataIndex: 'statDate', align: 'center' },
+        { title: '总消耗', dataIndex: 'cost', align: 'center' },
+        { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
+        { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
+        { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
       ],
       dataTable: [],
       dataTableTwo: [],
@@ -542,7 +578,6 @@ export default {
       }
 
       getKsAccountReport(params).then(res => {
-        console.log(res)
         if (res.compared) {
           this.contrastDataAll = res
           //   this.drawPieAll(res)
@@ -589,44 +624,57 @@ export default {
         params.endDate = dateValue[1]
       }
       //   proportion
+      this.loading = true
       if (this.active == 1) {
-        getKsDetail(params).then(res => {
-          var nDate = res.filter(item => {
-            if (item.now) {
-              return item.now.statDate
+        getReportList(params).then(res => {
+          if (res[0].now.length > 0) {
+            for (let i = 0; i < res[0].now.length; i++) {
+              for (let j = 0; j < res[0].yesterday.length; j++) {
+                if (res[0].now[i].statHour == res[0].yesterday[j].statHour) {
+                  res[0].now[i].yesCost =
+                    (((res[0].now[i].cost - res[0].yesterday[j].cost) / res[0].yesterday[j].cost) * 100).toFixed(2) +
+                    '%'
+                  res[0].now[i].yesPhotoClick =
+                    (
+                      ((res[0].now[i].photoClick - res[0].yesterday[j].photoClick) / res[0].yesterday[j].photoClick) *
+                      100
+                    ).toFixed(2) + '%'
+                  res[0].now[i].yesPhotoShow =
+                    (
+                      ((res[0].now[i].photoShow - res[0].yesterday[j].photoShow) / res[0].yesterday[j].photoShow) *
+                      100
+                    ).toFixed(2) + '%'
+                  res[0].now[i].yesAclick =
+                    (((res[0].now[i].aclick - res[0].yesterday[j].aclick) / res[0].yesterday[j].aclick) * 100).toFixed(
+                      2
+                    ) + '%'
+                }
+              }
             }
-          })
-          console.log(nDate)
-          this.dataTable = res.map((item, index) => {
-            if (item.now) {
-              console.log(item.now)
+            this.dataTable = res[0].now.map((item, index) => {
               return {
                 key: index,
-                ...item.now,
+                ...item,
                 statDate:
-                  this.active == 1 || this.active == 2
-                    ? item.now.statDate + ' ' + item.now.statHour + '时'
-                    : item.now.statDate,
-                proportion: (item.now.proportion * 100).toFixed(2) + '%'
+                  this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
               }
-            } else {
+            })
+            this.dataAllTableYester = res[0].yesterday.map((item, index) => {
               return {
                 key: index,
-                cost: 0,
-                photoClick: 0,
-                photoShow: 0,
-                aclick: 0,
+                ...item,
                 statDate:
-                  this.active == 1 || this.active == 2
-                    ? nDate[0].now.statDate + ' ' + item.statHour + '时'
-                    : nDate[0].now.statDate,
-                proportion: 0
+                  this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
               }
-            }
-          })
-          this.dataAllTable = this.dataTable
-          this.dataAllTableYester = res
-          console.log(this.dataTable)
+            })
+            this.dataAllTable = this.dataTable
+            this.loading = false
+          } else {
+            this.dataAllTable = null
+            this.dataTable = []
+            this.dataAllTableYester = res[0].yesterday
+            this.loading = false
+          }
         })
       } else {
         getReportList(params).then(res => {
@@ -638,7 +686,7 @@ export default {
                 this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
             }
           })
-          //   }
+          this.loading = false
         })
       }
     },
@@ -901,27 +949,50 @@ export default {
         this.dataTable = []
         if (key == 'now') {
           this.columns = [
-            { title: '时间', dataIndex: 'statDate' },
-            { title: '升降值', dataIndex: 'proportion' },
-            { title: '总消耗', dataIndex: 'cost' },
-            { title: '封面点击数', dataIndex: 'photoClick' },
-            { title: '封面曝光数', dataIndex: 'photoShow' },
-            { title: '素材曝光数', dataIndex: 'aclick' }
+            { title: '时间', dataIndex: 'statDate', align: 'center' },
+            {
+              title: '总消耗升降值',
+              dataIndex: 'yesCost',
+              scopedSlots: { customRender: 'yesCost' },
+              align: 'center'
+            },
+            { title: '总消耗', dataIndex: 'cost', align: 'center' },
+            {
+              title: '封面点击数升降值',
+              dataIndex: 'yesPhotoClick',
+              scopedSlots: { customRender: 'photoClickProportion' },
+              align: 'center'
+            },
+            { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
+            {
+              title: '封面曝光数升降值',
+              dataIndex: 'yesPhotoShow',
+              scopedSlots: { customRender: 'photoShowProportion' },
+              align: 'center'
+            },
+            { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
+            {
+              title: '素材曝光数升降值',
+              dataIndex: 'yesAclick',
+              scopedSlots: { customRender: 'aclickProportion' },
+              align: 'center'
+            },
+            { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
           ]
           this.dataTable = this.dataAllTable
         } else {
           this.columns = [
-            { title: '时间', dataIndex: 'statDate' },
-            { title: '总消耗', dataIndex: 'cost' },
-            { title: '封面点击数', dataIndex: 'photoClick' },
-            { title: '封面曝光数', dataIndex: 'photoShow' },
-            { title: '素材曝光数', dataIndex: 'aclick' }
+            { title: '时间', dataIndex: 'statDate', align: 'center' },
+            { title: '总消耗', dataIndex: 'cost', align: 'center' },
+            { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
+            { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
+            { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
           ]
           this.dataTable = this.dataAllTableYester.map((item, index) => {
             return {
               key: index,
               ...item,
-              statDate: item.statDate + ' ' + item.statHour + '时'
+              statDate: item.statDate
             }
           })
         }
@@ -955,7 +1026,6 @@ export default {
       }
     },
     getAdd(checked) {
-      //   console.log(this.startValue[0].moment('YYYY-MM-DD'))
       if (checked == 9) {
         if (this.startValue.length > 0 && this.startValue[0]) {
           this.allValue[1] = moment(this.startValue[0]._d).format('YYYY-MM-DD')
@@ -965,7 +1035,6 @@ export default {
         this.startValue = []
         this.allValue = []
       }
-      console.log(checked)
       this.active = checked
       var arr = [
         {
@@ -977,6 +1046,47 @@ export default {
           tab: '昨天'
         }
       ]
+      if (checked == 1) {
+        this.columns = [
+          { title: '时间', dataIndex: 'statDate', align: 'center' },
+          {
+            title: '总消耗升降值',
+            dataIndex: 'yesCost',
+            scopedSlots: { customRender: 'yesCost' },
+            align: 'center'
+          },
+          { title: '总消耗', dataIndex: 'cost', align: 'center' },
+          {
+            title: '封面点击数升降值',
+            dataIndex: 'yesPhotoClick',
+            scopedSlots: { customRender: 'photoClickProportion' },
+            align: 'center'
+          },
+          { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
+          {
+            title: '封面曝光数升降值',
+            dataIndex: 'yesPhotoShow',
+            scopedSlots: { customRender: 'photoShowProportion' },
+            align: 'center'
+          },
+          { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
+          {
+            title: '素材曝光数升降值',
+            dataIndex: 'yesAclick',
+            scopedSlots: { customRender: 'aclickProportion' },
+            align: 'center'
+          },
+          { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
+        ]
+      } else {
+        this.columns = [
+          { title: '时间', dataIndex: 'statDate', align: 'center' },
+          { title: '总消耗', dataIndex: 'cost', align: 'center' },
+          { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
+          { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
+          { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
+        ]
+      }
       var columns = []
       switch (checked) {
         case 1:
@@ -990,14 +1100,6 @@ export default {
               tab: '昨天'
             }
           ]
-          columns = [
-            { title: '时间', dataIndex: 'statDate' },
-            { title: '升降值', dataIndex: 'proportion' },
-            { title: '总消耗', dataIndex: 'cost' },
-            { title: '封面点击数', dataIndex: 'photoClick' },
-            { title: '封面曝光数', dataIndex: 'photoShow' },
-            { title: '素材曝光数', dataIndex: 'aclick' }
-          ]
           break
         case 2:
           arr = [
@@ -1006,13 +1108,6 @@ export default {
               tab: '昨天'
             }
           ]
-          columns = [
-            { title: '时间', dataIndex: 'statDate' },
-            { title: '总消耗', dataIndex: 'cost' },
-            { title: '封面点击数', dataIndex: 'photoClick' },
-            { title: '封面曝光数', dataIndex: 'photoShow' },
-            { title: '素材曝光数', dataIndex: 'aclick' }
-          ]
           break
         case 3:
           arr = [
@@ -1021,13 +1116,6 @@ export default {
               tab: '近一周'
             }
           ]
-          columns = [
-            { title: '时间', dataIndex: 'statDate' },
-            { title: '总消耗', dataIndex: 'cost' },
-            { title: '封面点击数', dataIndex: 'photoClick' },
-            { title: '封面曝光数', dataIndex: 'photoShow' },
-            { title: '素材曝光数', dataIndex: 'aclick' }
-          ]
           break
         case 4:
           arr = [
@@ -1036,13 +1124,6 @@ export default {
               tab: '近十五天'
             }
           ]
-          columns = [
-            { title: '时间', dataIndex: 'statDate' },
-            { title: '总消耗', dataIndex: 'cost' },
-            { title: '封面点击数', dataIndex: 'photoClick' },
-            { title: '封面曝光数', dataIndex: 'photoShow' },
-            { title: '素材曝光数', dataIndex: 'aclick' }
-          ]
           break
         case 5:
           arr = [
@@ -1051,13 +1132,6 @@ export default {
               tab: '近一月'
             }
           ]
-          columns = [
-            { title: '时间', dataIndex: 'statDate' },
-            { title: '总消耗', dataIndex: 'cost' },
-            { title: '封面点击数', dataIndex: 'photoClick' },
-            { title: '封面曝光数', dataIndex: 'photoShow' },
-            { title: '素材曝光数', dataIndex: 'aclick' }
-          ]
           break
         case 6:
           arr = [
@@ -1066,13 +1140,6 @@ export default {
               tab: '近三月'
             }
           ]
-          columns = [
-            { title: '时间', dataIndex: 'statDate' },
-            { title: '总消耗', dataIndex: 'cost' },
-            { title: '封面点击数', dataIndex: 'photoClick' },
-            { title: '封面曝光数', dataIndex: 'photoShow' },
-            { title: '素材曝光数', dataIndex: 'aclick' }
-          ]
           break
         case 7:
           arr = [
@@ -1081,13 +1148,6 @@ export default {
               tab: '近半年'
             }
           ]
-          columns = [
-            { title: '时间', dataIndex: 'statDate' },
-            { title: '总消耗', dataIndex: 'cost' },
-            { title: '封面点击数', dataIndex: 'photoClick' },
-            { title: '封面曝光数', dataIndex: 'photoShow' },
-            { title: '素材曝光数', dataIndex: 'aclick' }
-          ]
           break
         case 8:
           arr = [
@@ -1096,13 +1156,6 @@ export default {
               tab: '所有'
             }
           ]
-          columns = [
-            { title: '时间', dataIndex: 'statDate' },
-            { title: '总消耗', dataIndex: 'cost' },
-            { title: '封面点击数', dataIndex: 'photoClick' },
-            { title: '封面曝光数', dataIndex: 'photoShow' },
-            { title: '素材曝光数', dataIndex: 'aclick' }
-          ]
           break
         case 9:
           arr = [
@@ -1111,17 +1164,9 @@ export default {
               tab: this.allValue[1] + ' ~ ' + this.allValue[0]
             }
           ]
-          columns = [
-            { title: '时间', dataIndex: 'statDate' },
-            { title: '总消耗', dataIndex: 'cost' },
-            { title: '封面点击数', dataIndex: 'photoClick' },
-            { title: '封面曝光数', dataIndex: 'photoShow' },
-            { title: '素材曝光数', dataIndex: 'aclick' }
-          ]
           break
       }
       this.tableNowCard = arr
-      this.columns = columns
       this.getReportList(checked, this.allValue)
       this.drawLine(checked, this.allValue)
       this.getKsDetail(checked, this.allValue).then(res => {
@@ -1155,7 +1200,6 @@ export default {
         getKsAccountReport(params).then(res => {
           var dataNew = []
           var dataX = []
-          console.log(res == '')
           if (res == '') {
             that.kuaishou.aclick = 0
             that.kuaishou.cost = 0
@@ -1288,7 +1332,7 @@ export default {
           formatter: function(params) {
             var index = dataElse.findIndex(v => v.statHour == params[0].name)
             var da = null
-            if (index > 0) {
+            if (index >= 0) {
               da = dataElse[index].proportion
             }
             if (that.active == 1) {
@@ -1389,10 +1433,6 @@ export default {
         this.drawPie('cost', res)
       })
       this.getReportList(1, that.allValue)
-      //   window.onresize = function() {
-      //     that.chart1.resize()
-      //     that.chart.resize()
-      //   }
     })
   }
 }

+ 2 - 1
vue.config.js

@@ -64,7 +64,8 @@ module.exports = {
          }
        },*/
       '/jeecg-boot': {
-        target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
+        target: 'http://39.97.120.42:8080', //请求本地 需要jeecg-boot后台项目  生产环境
+        // target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
         // target: 'http://192.168.2.130:8080', //请求本地 需要jeecg-boot后台项目
         // target: 'http://192.168.2.132:8080', //请求本地 需要jeecg-boot后台项目
         ws: false,