zhuxinbo преди 5 години
родител
ревизия
c08dd5a404
променени са 2 файла, в които са добавени 707 реда и са изтрити 0 реда
  1. 218 0
      src/views/modules/Statistics/companyDetail.vue
  2. 489 0
      src/views/modules/Statistics/companyStatistics.vue

+ 218 - 0
src/views/modules/Statistics/companyDetail.vue

@@ -0,0 +1,218 @@
+<style></style>
+<template>
+  <div class="admin-detail">
+    <a-row :gutter="10" style="margin-top:10px">
+      <a-col :span="24">
+        <a-card style="width:100%;">
+          <a-table
+            :columns="columns"
+            :dataSource="dataList"
+            bordered
+            :loading="loading"
+            size="middle"
+            :scroll="{ x: 1900 }"
+          >
+            <span slot="fengmianClickRate" slot-scope="text">{{ text | getBo }}</span>
+            <span slot="convertClickRate" slot-scope="text">{{ text | getBo }}</span>
+          </a-table>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import ChartCard from '@/components/ChartCard'
+import ACol from 'ant-design-vue/es/grid/Col'
+import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
+import MiniArea from '@/components/chart/MiniArea'
+import MiniBar from '@/components/chart/MiniBar'
+import MiniProgress from '@/components/chart/MiniProgress'
+import RankList from '@/components/chart/RankList'
+import Bar from '@/components/chart/Bar'
+import LineChartMultid from '@/components/chart/LineChartMultid'
+import HeadInfo from '@/components/tools/HeadInfo.vue'
+
+import Trend from '@/components/Trend'
+
+import { getAction, postAction } from '@/api/manage'
+import { mapGetters } from 'vuex'
+
+import qs from 'qs'
+
+const barData = []
+for (let i = 0; i < 12; i += 1) {
+  barData.push({
+    x: `${i + 1}月`,
+    y: Math.floor(Math.random() * 1000) + 200
+  })
+}
+
+const columns = [
+  {
+    title: '日期',
+    dataIndex: 'date',
+    key: 'date',
+    align: 'center',
+    width: 200
+  },
+  //   {
+  //     title: '账户id',
+  //     dataIndex: 'accountId',
+  //     key: 'accountId',
+  //     align: 'center'
+  //   },
+  {
+    title: '快手id',
+    dataIndex: 'kid',
+    key: 'kid',
+    align: 'center'
+  },
+  {
+    title: '广告主名称',
+    dataIndex: 'advertiserName',
+    key: 'advertiserName',
+    align: 'center'
+  },
+  {
+    title: '广告主创建时间',
+    dataIndex: 'advertiserCreateTime',
+    key: 'advertiserCreateTime',
+    align: 'center'
+  },
+  {
+    title: '有消费计划数',
+    dataIndex: 'costCampaignCount',
+    key: 'costCampaignCount',
+    align: 'center'
+  },
+  {
+    title: '总余额',
+    dataIndex: 'balance',
+    key: 'balance',
+    align: 'center'
+  },
+  {
+    title: '总消耗',
+    dataIndex: 'cost',
+    key: 'cost',
+    align: 'center'
+  },
+  {
+    title: '现金消耗',
+    dataIndex: 'xianjinCost',
+    key: 'xianjinCost',
+    align: 'center'
+  },
+  {
+    title: '后返消耗',
+    dataIndex: 'fandianCost',
+    key: 'fandianCost',
+    align: 'center'
+  },
+  {
+    title: '框返消耗',
+    dataIndex: 'kuangfanCost',
+    key: 'kuangfanCost',
+    align: 'center'
+  },
+  {
+    title: '激励账户消耗',
+    dataIndex: 'jiliCost',
+    key: 'jiliCost',
+    align: 'center'
+  },
+  {
+    title: '信⽤账户消耗',
+    dataIndex: 'xinyongCost',
+    key: 'xinyongCost',
+    align: 'center'
+  },
+  {
+    title: '封⾯曝光数',
+    dataIndex: 'fengmianShowCount',
+    key: 'fengmianShowCount',
+    align: 'center'
+  },
+  {
+    title: '封⾯点击数',
+    dataIndex: 'fengmianClickCount',
+    key: 'fengmianClickCount',
+    align: 'center'
+  },
+  {
+    title: '素材曝光数',
+    dataIndex: 'sucaiShowCount',
+    key: 'sucaiShowCount',
+    align: 'center'
+  },
+  {
+    title: '行为数',
+    dataIndex: 'convertCount',
+    key: 'convertCount',
+    align: 'center'
+  },
+  {
+    title: '封⾯点击率',
+    dataIndex: 'fengmianClickRate',
+    key: 'fengmianClickRate',
+    scopedSlots: { customRender: 'fengmianClickRate' },
+    align: 'center'
+  },
+  {
+    title: '转化点击率',
+    dataIndex: 'convertClickRate',
+    key: 'convertClickRate',
+    scopedSlots: { customRender: 'convertClickRate' },
+    align: 'center'
+  }
+]
+export default {
+  name: 'company-detail',
+  components: {
+    ATooltip,
+    ACol
+  },
+
+  data: function() {
+    return {
+      loginfo: {},
+      barData,
+      loading: false,
+      a: '',
+      columns: columns,
+      dataList: []
+    }
+  },
+  filters: {
+    getBo: function(value) {
+      if (value) {
+        return (value * 100).toFixed(2) + '%'
+      } else {
+        return '0.00%'
+      }
+    }
+  },
+  methods: {
+    ...mapGetters(['nickname', 'avatar', 'userInfo'])
+  },
+  created() {
+    var weekDate = localStorage.getItem('companyDate')
+    this.columns = columns
+    this.loading = true
+    postAction('/report/kuaishouReportDailyAgentSum/companyReportAccountDetailList', { date: weekDate }).then(res => {
+      this.loading = false
+      if (res.success) {
+        this.dataList = res.result.map((item, index) => {
+          return {
+            ...item,
+            key: index
+          }
+        })
+      } else {
+        this.$message.error(res.message)
+      }
+    })
+  }
+}
+</script>

+ 489 - 0
src/views/modules/Statistics/companyStatistics.vue

@@ -0,0 +1,489 @@
+<style lang="scss" scoped>
+.search-bar {
+  display: flex;
+  align-items: center;
+}
+.search-box p {
+  display: inline-block;
+  border: 1px solid #f2f2f2;
+  border-radius: 5px;
+  margin-right: 10px;
+  margin-bottom: 0;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+</style>
+<style>
+/* .data-display-statistics .ant-card-body {
+  padding: 0 15px;
+} */
+.data-display-statistics .ant-col-6 {
+  margin: 10px 0;
+}
+.data-display-statistics .ant-col-6 .ant-card-body {
+  display: flex;
+  justify-content: center;
+}
+.data-display-statistics .ant-col-6 p,
+.data-display-statistics .ant-col-6 span {
+  text-align: center;
+  line-height: 40px;
+  font-size: 30px;
+  font-weight: 600;
+  color: red;
+  margin: 0;
+}
+.search-box .ant-card-body {
+  padding: 15px 15px;
+}
+.data-display-statistics .ant-col-6 .ant-card-body .styleElse {
+  line-height: 60px;
+  height: 40px;
+  font-size: 16px;
+  font-weight: 400;
+  margin-left: 10px;
+}
+.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
+  display: none !important;
+}
+.yincang .ant-col-6 p {
+  text-align: left;
+  color: red;
+  font-size: 16px;
+  font-weight: 500;
+}
+.ant-table-thead div {
+  font-weight: 700;
+}
+.tool-tip {
+  position: absolute;
+  top: 65px;
+  right: 10px;
+}
+th div {
+  white-space: nowrap;
+}
+</style>
+<template>
+  <div class="data-statistics">
+    <a-row class="image-list-heading vm-panel">
+      <a-row>
+        <a-col :span="24">
+          <a-card :bordered="false" class="search-box">
+            <p
+              :style="active == item.value ? 'color:cornflowerblue;background:#f2f2f2' : ''"
+              v-for="(item, index) of timeList"
+              :key="index"
+              @click="getAdd(item.value)"
+            >
+              {{ item.label }}
+            </p>
+            <a-range-picker
+              style="width:400px"
+              :disabledDate="disabledDate"
+              :showTime="{
+                hideDisabledOptions: true
+              }"
+              format="YYYY-MM-DD"
+              v-model="startValue"
+              @ok="getAdd(9)"
+            />
+          </a-card>
+        </a-col>
+      </a-row>
+    </a-row>
+    <a-row :gutter="16">
+      <a-col :span="24">
+        <a-card :bordered="false" style="margin:10px 0">
+          <div>
+            <h3>数据汇总</h3>
+            <div
+              v-for="(item, index) of allData"
+              :key="index"
+              style="margin-right:20px;font-size:16px;word-wrap: break-word;word-break: normal;display:inline-block;width:20%"
+            >
+              <span style="display:inline-block;width:100px;text-align-last: justify;">{{ item.label }}</span> :
+              <span>{{ item.value }}</span>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-row :gutter="10">
+      <a-col :span="24">
+        <a-card style="width:100%">
+          <a-table
+            :columns="columns"
+            :dataSource="dataTable"
+            bordered
+            size="middle"
+            :scroll="{ x: 1900 }"
+            :loading="loading"
+          >
+            <span slot="fengmianClickRate" slot-scope="text">{{ text | getBo }}</span>
+            <span slot="convertClickRate" slot-scope="text">{{ text | getBo }}</span>
+            <span slot="action" slot-scope="text, record">
+              <a :disabled="record.effiVideoCount == 0" @click="toDetail(record)">查看详情</a>
+            </span>
+          </a-table>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import ARow from 'ant-design-vue/es/grid/Row'
+import ACol from 'ant-design-vue/es/grid/Col'
+import countTo from 'vue-count-to'
+import moment from 'moment'
+import axios from 'axios'
+import lifting from './components/lifting'
+import timeCheck from './components/timeCheck'
+import Treeselect from './components/Treeselect.vue'
+
+import { getAction, postAction, postFile } from '@/api/manage'
+import { mapGetters } from 'vuex'
+
+var length = 0
+var active = 1
+
+const columns = [
+  {
+    title: '日期',
+    dataIndex: 'date',
+    key: 'date',
+    align: 'center'
+  },
+  {
+    title: '有消费计划数',
+    dataIndex: 'costCampaignCount',
+    key: 'costCampaignCount',
+    align: 'center'
+  },
+  {
+    title: '总余额',
+    dataIndex: 'balance',
+    key: 'balance',
+    align: 'center'
+  },
+  {
+    title: '总消耗',
+    dataIndex: 'cost',
+    key: 'cost',
+    align: 'center'
+  },
+  {
+    title: '现金消耗',
+    dataIndex: 'xianjinCost',
+    key: 'xianjinCost',
+    align: 'center'
+  },
+  {
+    title: '后返消耗',
+    dataIndex: 'fandianCost',
+    key: 'fandianCost',
+    align: 'center'
+  },
+  {
+    title: '框返消耗',
+    dataIndex: 'kuangfanCost',
+    key: 'kuangfanCost',
+    align: 'center'
+  },
+  {
+    title: '激励账户消耗',
+    dataIndex: 'jiliCost',
+    key: 'jiliCost',
+    align: 'center'
+  },
+  {
+    title: '信⽤账户消耗',
+    dataIndex: 'xinyongCost',
+    key: 'xinyongCost',
+    align: 'center'
+  },
+  {
+    title: '封⾯曝光数',
+    dataIndex: 'fengmianShowCount',
+    key: 'fengmianShowCount',
+    align: 'center'
+  },
+  {
+    title: '封⾯点击数',
+    dataIndex: 'fengmianClickCount',
+    key: 'fengmianClickCount',
+    align: 'center'
+  },
+  {
+    title: '素材曝光数',
+    dataIndex: 'sucaiShowCount',
+    key: 'sucaiShowCount',
+    align: 'center'
+  },
+  {
+    title: '行为数',
+    dataIndex: 'convertCount',
+    key: 'convertCount',
+    align: 'center'
+  },
+  {
+    title: '封⾯点击率',
+    dataIndex: 'fengmianClickRate',
+    key: 'fengmianClickRate',
+    scopedSlots: { customRender: 'fengmianClickRate' },
+    align: 'center'
+  },
+  {
+    title: '转化点击率',
+    dataIndex: 'convertClickRate',
+    key: 'convertClickRate',
+    scopedSlots: { customRender: 'convertClickRate' },
+    align: 'center'
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action',
+    align: 'center',
+    scopedSlots: {
+      customRender: 'action'
+    }
+  }
+]
+function getDay(day) {
+  var today = new Date()
+
+  var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
+
+  today.setTime(targetday_milliseconds) //注意,这行是关键代码
+
+  var tYear = today.getFullYear()
+
+  var tMonth = today.getMonth()
+
+  var tDate = today.getDate()
+
+  tMonth = doHandleMonth(tMonth + 1)
+
+  tDate = doHandleMonth(tDate)
+
+  return tYear + '-' + tMonth + '-' + tDate
+}
+
+function doHandleMonth(month) {
+  var m = month
+
+  if (month.toString().length == 1) {
+    m = '0' + month
+  }
+
+  return m
+}
+export default {
+  name: 'company-statistics',
+  components: {
+    ACol,
+    ARow,
+    countTo,
+    lifting,
+    timeCheck,
+    Treeselect
+  },
+  data: function() {
+    return {
+      loading: false,
+      dataTable: [],
+      columns: columns,
+      options: [],
+      list: [],
+      active: 1,
+      startValue: [],
+      allData: [
+        { value: 0, label: '有消费计划数' },
+        { value: 0, label: '总余额' },
+        { value: 0, label: '总消耗' },
+        { value: 0, label: '现⾦消耗' },
+        { value: 0, label: '后返消耗' },
+        { value: 0, label: '框返消耗' },
+        { value: 0, label: '激励账户消耗' },
+        { value: 0, label: '封⾯曝光数' },
+        { value: 0, label: '封⾯点击数' },
+        { value: 0, label: '素材曝光数' },
+        { value: 0, label: '⾏为数' },
+        { value: 0, label: '封⾯点击率' },
+        { value: 0, label: '转化点击率' }
+      ],
+      timeList: [
+        { label: '今天', value: 1, show: true },
+        { label: '昨天', value: 2, show: true },
+        { label: '近一周', value: 3, show: true },
+        { label: '近十五天', value: 4, show: true },
+        { label: '近一月', value: 5, show: true },
+        { label: '近三月', value: 6, show: true },
+        { label: '近半年', value: 7, show: true },
+        { label: '近一年', value: 8, show: true }
+      ]
+    }
+  },
+  filters: {
+    formatDate: function(value) {
+      let date = new Date(value)
+      let y = date.getFullYear()
+      let MM = date.getMonth() + 1
+      MM = MM < 10 ? '0' + MM : MM
+      let d = date.getDate()
+      d = d < 10 ? '0' + d : d
+      let h = date.getHours()
+      h = h < 10 ? '0' + h : h
+      let m = date.getMinutes()
+      m = m < 10 ? '0' + m : m
+      let s = date.getSeconds()
+      s = s < 10 ? '0' + s : s
+      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
+    },
+    getBo: function(value) {
+      if (value) {
+        return (value * 100).toFixed(2) + '%'
+      } else {
+        return '0.00%'
+      }
+    }
+  },
+  methods: {
+    moment,
+    disabledDate(current) {
+      // Can not select days before today and today
+      return current && current > moment().endOf('day')
+    },
+    ...mapGetters(['nickname', 'avatar', 'userInfo']),
+    getCompanyReport(type) {
+      this.loading = true
+      var date = new Date()
+      var params = {}
+      console.log(moment(date).format('YYYY-MM-DD'))
+      switch (type) {
+        case 1:
+          params.startDate = moment(new Date()).format('YYYY-MM-DD')
+          params.endDate = moment(new Date()).format('YYYY-MM-DD')
+          break
+        case 2:
+          params.startDate = getDay(-1)
+          params.endDate = getDay(-1)
+          break
+        case 3:
+          params.startDate = getDay(-7)
+          params.endDate = getDay(-1)
+          break
+        case 4:
+          params.startDate = getDay(-15)
+          params.endDate = getDay(-1)
+          break
+        case 5:
+          params.startDate = getDay(-30)
+          params.endDate = getDay(-1)
+          break
+        case 6:
+          params.startDate = getDay(-90)
+          params.endDate = getDay(-1)
+          break
+        case 7:
+          params.startDate = getDay(-180)
+          params.endDate = getDay(-1)
+          break
+        case 8:
+          params.startDate = getDay(-365)
+          params.endDate = getDay(-1)
+          break
+        case 9:
+          params.startDate = moment(this.startValue[0]._d).format('YYYY-MM-DD')
+          params.endDate = moment(this.startValue[1]._d).format('YYYY-MM-DD')
+          break
+      }
+      postAction('/report/kuaishouReportDailyAgentSum/companyReport', params).then(res => {
+        this.loading = false
+        if (res.success) {
+          this.dataTable = res.result.map((item, index) => {
+            return {
+              ...item,
+              key: index
+            }
+          })
+        } else {
+          this.$message.error(res.message)
+        }
+      })
+      postAction('/report/kuaishouReportDailyAgentSum/companyReportSum', params).then(res => {
+        console.log(res)
+        if (res.result) {
+          this.allData = [
+            { value: res.result.costCampaignCount, label: '有消费计划数' },
+            { value: res.result.balance, label: '总余额' },
+            { value: res.result.cost, label: '总消耗' },
+            { value: res.result.xianjinCost, label: '现⾦消耗' },
+            { value: res.result.fandianCost, label: '后返消耗' },
+            { value: res.result.kuangfanCost, label: '框返消耗' },
+            { value: res.result.jiliCost, label: '激励账户消耗' },
+            { value: res.result.fengmianShowCount, label: '封⾯曝光数' },
+            { value: res.result.fengmianClickCount, label: '封⾯点击数' },
+            { value: res.result.sucaiShowCount, label: '素材曝光数' },
+            { value: res.result.convertCount, label: '⾏为数' },
+            { value: res.result.fengmianClickRate.toFixed(2) + '%', label: '封⾯点击率' },
+            { value: res.result.convertClickRate.toFixed(2) + '%', label: '转化点击率' }
+          ]
+          //   {
+          //     costCampaignCount: 0, // 有消费计划数
+          //     balance: 0, //总余额
+          //     cost: 0, //总消耗
+          //     xianjinCost: 0, //现⾦消耗
+          //     fandianCost: 0, //后返消耗
+          //     kuangfanCost: 0, //框返消耗
+          //     jiliCost: 0, //激励账户消耗
+          //     fengmianShowCount: 0, //封⾯曝光数
+          //     fengmianClickCount: 0, //封⾯点击数
+          //     sucaiShowCount: 0, //素材曝光数
+          //     convertCount: 0, //⾏为数
+          //     fengmianClickRate: 0, //封⾯点击率
+          //     convertClickRate: 0 //转化点击率
+          //   }
+        } else {
+          this.allData = [
+            { value: 0, label: '有消费计划数' },
+            { value: 0, label: '总余额' },
+            { value: 0, label: '总消耗' },
+            { value: 0, label: '现⾦消耗' },
+            { value: 0, label: '后返消耗' },
+            { value: 0, label: '框返消耗' },
+            { value: 0, label: '激励账户消耗' },
+            { value: 0, label: '封⾯曝光数' },
+            { value: 0, label: '封⾯点击数' },
+            { value: 0, label: '素材曝光数' },
+            { value: 0, label: '⾏为数' },
+            { value: 0, label: '封⾯点击率' },
+            { value: 0, label: '转化点击率' }
+          ]
+        }
+      })
+    },
+    getAdd(checked) {
+      // /report/kuaishouReportDailyAgentSum/companyReport
+      if (checked != 9) {
+        this.startValue = []
+      }
+      this.active = checked
+      this.getCompanyReport(checked)
+    },
+    toDetail(item) {
+      localStorage.setItem('companyDate', item.date)
+      this.$router.replace({
+        path: '/Statistics/companyDetail'
+      })
+    }
+  },
+  watch: {},
+  distoryed() {},
+  mounted: function() {
+    this.getCompanyReport(1)
+  }
+}
+</script>