Переглянути джерело

增加快手广告分析页面

xuzuoyun 5 роки тому
батько
коміт
8e361afce2
2 змінених файлів з 162 додано та 134 видалено
  1. 140 115
      src/views/modules/appad/AdAnalysis.vue
  2. 22 19
      src/views/template/budget/create.vue

+ 140 - 115
src/views/modules/appad/AdAnalysis.vue

@@ -1,65 +1,105 @@
 <template>
   <div class="page-header-index-wide">
-    <a-row :gutter="24">
-      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="总销售额" total="¥126,560">
-          <a-tooltip title="指标说明" slot="action">
-            <a-icon type="info-circle-o"/>
-          </a-tooltip>
-          <div>
-            <trend flag="up" style="margin-right: 16px;">
-              <span slot="term">周同比</span>
-              12%
-            </trend>
-            <trend flag="down">
-              <span slot="term">日同比</span>
-              11%
-            </trend>
-          </div>
-          <template slot="footer">日均销售额<span>¥ 234.56</span></template>
-        </chart-card>
-      </a-col>
-      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">
-          <a-tooltip title="指标说明" slot="action">
-            <a-icon type="info-circle-o"/>
-          </a-tooltip>
-          <div>
-            <mini-area/>
-          </div>
-          <template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>
-        </chart-card>
-      </a-col>
-      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">
-          <a-tooltip title="指标说明" slot="action">
-            <a-icon type="info-circle-o"/>
-          </a-tooltip>
-          <div>
-            <mini-bar :height="40"/>
-          </div>
-          <template slot="footer">转化率 <span>60%</span></template>
-        </chart-card>
+<!--    <a-row :gutter="24">-->
+<!--      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
+<!--        <chart-card :loading="loading" title="总销售额" total="¥126,560">-->
+<!--          <a-tooltip title="指标说明" slot="action">-->
+<!--            <a-icon type="info-circle-o"/>-->
+<!--          </a-tooltip>-->
+<!--          <div>-->
+<!--            <trend flag="up" style="margin-right: 16px;">-->
+<!--              <span slot="term">周同比</span>-->
+<!--              12%-->
+<!--            </trend>-->
+<!--            <trend flag="down">-->
+<!--              <span slot="term">日同比</span>-->
+<!--              11%-->
+<!--            </trend>-->
+<!--          </div>-->
+<!--          <template slot="footer">日均销售额<span>¥ 234.56</span></template>-->
+<!--        </chart-card>-->
+<!--      </a-col>-->
+<!--      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
+<!--        <chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">-->
+<!--          <a-tooltip title="指标说明" slot="action">-->
+<!--            <a-icon type="info-circle-o"/>-->
+<!--          </a-tooltip>-->
+<!--          <div>-->
+<!--            <mini-area/>-->
+<!--          </div>-->
+<!--          <template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>-->
+<!--        </chart-card>-->
+<!--      </a-col>-->
+<!--      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
+<!--        <chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">-->
+<!--          <a-tooltip title="指标说明" slot="action">-->
+<!--            <a-icon type="info-circle-o"/>-->
+<!--          </a-tooltip>-->
+<!--          <div>-->
+<!--            <mini-bar :height="40"/>-->
+<!--          </div>-->
+<!--          <template slot="footer">转化率 <span>60%</span></template>-->
+<!--        </chart-card>-->
+<!--      </a-col>-->
+<!--      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
+<!--        <chart-card :loading="loading" title="运营活动效果" total="78%">-->
+<!--          <a-tooltip title="指标说明" slot="action">-->
+<!--            <a-icon type="info-circle-o"/>-->
+<!--          </a-tooltip>-->
+<!--          <div>-->
+<!--            <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8"/>-->
+<!--          </div>-->
+<!--          <template slot="footer">-->
+<!--            <trend flag="down" style="margin-right: 16px;">-->
+<!--              <span slot="term">同周比</span>-->
+<!--              12%-->
+<!--            </trend>-->
+<!--            <trend flag="up">-->
+<!--              <span slot="term">日环比</span>-->
+<!--              80%-->
+<!--            </trend>-->
+<!--          </template>-->
+<!--        </chart-card>-->
+<!--      </a-col>-->
+<!--    </a-row>-->
+    <a-row>
+      <a-col :span="24">
+        <a-card :loading="loading" :bordered="false" title="今日新增" :style="{ marginTop: '24px' }">
+          <a-row>
+            <a-col :span="6">
+              <head-info title="广告主" :content="advertiserTodayCount"></head-info>
+            </a-col>
+            <a-col :span="6">
+              <head-info title="广告封面" :content="adTodayCount"></head-info>
+            </a-col>
+            <a-col :span="6">
+              <head-info title="广告视频" :content="videoTodayCount"></head-info>
+            </a-col>
+            <a-col :span="6">
+              <head-info title="推广品" :content="productTodayCount"></head-info>
+            </a-col>
+          </a-row>
+        </a-card>
       </a-col>
-      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="运营活动效果" total="78%">
-          <a-tooltip title="指标说明" slot="action">
-            <a-icon type="info-circle-o"/>
-          </a-tooltip>
-          <div>
-            <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8"/>
-          </div>
-          <template slot="footer">
-            <trend flag="down" style="margin-right: 16px;">
-              <span slot="term">同周比</span>
-              12%
-            </trend>
-            <trend flag="up">
-              <span slot="term">日环比</span>
-              80%
-            </trend>
-          </template>
-        </chart-card>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-card :loading="loading" :bordered="false" title="数据总量" :style="{ marginTop: '24px' }">
+          <a-row>
+            <a-col :span="6">
+              <head-info title="广告主" :content="advertiserAllCount"></head-info>
+            </a-col>
+            <a-col :span="6">
+              <head-info title="广告封面" :content="adAllCount"></head-info>
+            </a-col>
+            <a-col :span="6">
+              <head-info title="广告视频" :content="videoAllCount"></head-info>
+            </a-col>
+            <a-col :span="6">
+              <head-info title="推广品" :content="productAllCount"></head-info>
+            </a-col>
+          </a-row>
+        </a-card>
       </a-col>
     </a-row>
 
@@ -75,23 +115,33 @@
             </div>
             <a-range-picker :style="{width: '256px'}"/>
           </div>
-          <a-tab-pane loading="true" tab="销售额" key="1">
+          <a-tab-pane loading="true" tab="行业" key="1">
             <a-row>
               <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
-                <bar title="销售额排行" :dataSource="barData"/>
+                <bar title="展示排行" :dataSource="barData"/>
               </a-col>
               <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
-                <rank-list title="门店销售排行榜" :list="rankList"/>
+                <rank-list title="热门素材排行榜" :list="rankList"/>
               </a-col>
             </a-row>
           </a-tab-pane>
-          <a-tab-pane tab="访问量" key="2">
+          <a-tab-pane tab="推广品" key="2">
             <a-row>
               <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
-                <bar title="销售额趋势" :dataSource="barData"/>
+                <bar title="展示排行" :dataSource="barData"/>
               </a-col>
               <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
-                <rank-list title="门店销售排行榜" :list="rankList"/>
+                <rank-list title="热门素材排行榜" :list="rankList"/>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+          <a-tab-pane tab="广告主" key="3">
+            <a-row>
+              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+                <bar title="展示排行" :dataSource="barData"/>
+              </a-col>
+              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+                <rank-list title="热门素材排行榜" :list="rankList"/>
               </a-col>
             </a-row>
           </a-tab-pane>
@@ -99,39 +149,7 @@
       </div>
     </a-card>
 
-    <a-row>
-      <a-col :span="24">
-        <a-card :loading="loading" :bordered="false" title="最近一周访问次数统计" :style="{ marginTop: '24px' }">
-          <a-row>
-            <a-col :span="6">
-              <head-info title="今日访问IP数" :content="loginfo.todayIp"></head-info>
-            </a-col>
-            <a-col :span="2">
-              <a-spin class='circle-cust'>
-                <a-icon slot="indicator" type="environment" style="font-size: 24px"/>
-              </a-spin>
-            </a-col>
-            <a-col :span="6">
-              <head-info title="今日访问次数" :content="loginfo.todayVisitCount"></head-info>
-            </a-col>
-            <a-col :span="2">
-              <a-spin class='circle-cust'>
-                <a-icon slot="indicator" type="team" style="font-size: 24px"/>
-              </a-spin>
-            </a-col>
-            <a-col :span="6">
-              <head-info title="访问总次数" :content="loginfo.totalVisitCount"></head-info>
-            </a-col>
-            <a-col :span="2">
-              <a-spin class='circle-cust'>
-                <a-icon slot="indicator" type="rise" style="font-size: 24px"/>
-              </a-spin>
-            </a-col>
-          </a-row>
-          <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
-        </a-card>
-      </a-col>
-    </a-row>
+
   </div>
 </template>
 
@@ -146,7 +164,7 @@
   import Bar from '@/components/chart/Bar'
   import LineChartMultid from '@/components/chart/LineChartMultid'
   import HeadInfo from '@/components/tools/HeadInfo.vue'
-
+  import {httpAction,getAction} from '@/api/manage'
   import Trend from '@/components/Trend'
   import {getLoginfo, getVisitInfo} from '@/api/api'
 
@@ -183,34 +201,41 @@
       return {
         loading: true,
         center: null,
-        rankList,
-        barData,
-        loginfo: {},
-        visitFields: ['ip', 'visit'],
-        visitInfo: [],
-        indicator: <a-icon type="loading" style = "font-size: 24px" spin />
+        advertiserTodayCount:0,
+        productTodayCount:0,
+        adTodayCount:0,
+        videoTodayCount:0,
+        advertiserAllCount:0,
+        productAllCount:0,
+        adAllCount:0,
+        videoAllCount:0,
+        rankList:[],
+        barData:[],
+        url:{
+          summaryToday:"/ctop/adcover/summary/today",
+          summaryAll:"/ctop/adcover/summary/all"
+        }
     }
     },
     created() {
       setTimeout(() => {
         this.loading = !this.loading
       }, 1000)
-      this.initLogInfo();
+      this.initDataInfo();
     },
     methods: {
-      initLogInfo() {
-        getLoginfo(null).then((res) => {
+      initDataInfo() {
+        this.barData=barData
+        this.rankList=rankList
+
+        getAction(this.url.summaryToday).then((res) => {
           if (res.success) {
-            Object.keys(res.result).forEach(key => {
-              res.result[key] = res.result[key] + ""
-            })
-            this.loginfo = res.result;
+            console.log(res.result)
           }
         })
-        getVisitInfo().then(res => {
+        getAction(this.url.summaryAll).then(res => {
           if (res.success) {
-            console.log("aaaaaa", res.result)
-            this.visitInfo = res.result;
+            console.log(res.result)
           }
         })
       },

+ 22 - 19
src/views/template/budget/create.vue

@@ -599,8 +599,8 @@
   }
 
 
-  //实例化程序
-  function load_time_table(id){
+  // //实例化程序
+  function load_time_table(id) {
     //包住table的元素id
     box_id = id;
     var html;
@@ -618,29 +618,29 @@
     html += '<tbody></tbody>';
     html += '</table>';
     html += '<input class="focus" style="opacity: 0;">';
-    html += '<div id="'+box_id+'_time_seled"></div>';
-    html += '<input v-model="dateQuantumRange" type="hidden" id="'+box_id+'_time_num" name="time" caption="每日投放时段" switchname="selectTime"  value="">';
-    $('#'+box_id).append(html);
+    html += '<div id="' + box_id + '_time_seled"></div>';
+    html += '<input v-model="dateQuantumRange" type="hidden" id="' + box_id + '_time_num" name="time" caption="每日投放时段" switchname="selectTime"  value="">';
+    $('#' + box_id).append(html);
     var html_tbody_td = '';
     var html_thead_td = '';
 
     //创建表格
     for (var i = 0; i < 7; i++) {
-      var week = i+1;
+      var week = i + 1;
       html_tbody_td += '<tr>';
-      for (var j = 0; j < 49; j++){
-        if (j==0) {
-          html_tbody_td += '<th week="'+week+'">周' + num[i] +  '</th>';
-        }else{
-          html_tbody_td += '<td>'  +  '</td>';
+      for (var j = 0; j < 49; j++) {
+        if (j == 0) {
+          html_tbody_td += '<th week="' + week + '">周' + num[i] + '</th>';
+        } else {
+          html_tbody_td += '<td>' + '</td>';
         }
       }
       html_tbody_td += '</tr>';
     }
 
     //创建表格小时栏目
-    for(var i =0; i<= 23; i++){
-      html_thead_td += '<td colSpan="2" hour="'+i+'">'+ i + '</td>';
+    for (var i = 0; i <= 23; i++) {
+      html_thead_td += '<td colSpan="2" hour="' + i + '">' + i + '</td>';
     }
     $('#' + box_id + ' table thead .hour').append(html_thead_td);
     $('#' + box_id + ' table tbody').html(html_tbody_td);
@@ -650,23 +650,26 @@
 
     //控制器,控制当前在哪个表格进行操作
     $('.plug-timer-grid').hover(function (e) {
-      if(1 != e.which){    //判断是否为左击
+      if (1 != e.which) {    //判断是否为左击
         var id = $(this).parent().attr('id');
         box_id = id;
       }
     });
 
     //清除所有选中项
-    $('.clear').click(function(){
+    $('.clear').click(function () {
       $(this).parent().find('td').removeClass(Selected);
-      var id =$(this).parent().attr('id');
+      var id = $(this).parent().attr('id');
       renewal(id);
     });
 
     //点击小时选中或去掉整列处理块
-    $('#' + box_id + ' table thead tr td').click(function(){
+    $('#' + box_id + ' table thead tr td').click(function () {
       hour = $(this).attr('hour');
-      if (hour>=0) {
+      if (hour >= 0) {
         var rows = $('#' + box_id + ' table tbody tr').length;
-        Start_x = ($(this).index())*2-1;
+        Start_x = ($(this).index()) * 2 - 1;
         Start_y = 0;
+      }
+    });
+  }