| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327 |
- <style></style>
- <template>
- <div class="admin-detail">
- <a-row :gutter="10" style="margin-top:10px">
- <a-col :span="24">
- <a-card style="width:100%;">
- <!-- advertiserName -->
- <a-input
- placeholder="请输入广告主名称"
- v-model="advertiserName"
- style="width:300px;margin:10px 10px 10px 0"
- ></a-input>
- <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
- <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
- <a-button type="primary" @click="exportExcel" style="margin-left: 8px">导出</a-button>
- <a-button type="primary" @click="backStatistics" style="float:right;margin:10px 10px 10px 0"
- >返回公司报表</a-button
- >
- <br />
- 是否展示消耗为0的数据:
- <a-radio-group buttonStyle="solid" v-model="isHasData" @change="onChageLogin" style="margin:10px">
- <a-radio-button value="1">是</a-radio-button>
- <a-radio-button value="0">否</a-radio-button>
- </a-radio-group>
- <a-table
- :columns="columns"
- :dataSource="dataList"
- bordered
- :loading="loading"
- size="middle"
- :scroll="{ x: 2300 }"
- >
- <!-- <span slot="isHasData" slot-scope="text">{{ text == 0 ? '否' : '是' }}</span> -->
- <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, downFilePost } 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',
- fixed: 'left',
- width: 150
- },
- // {
- // title: '是否有数据',
- // dataIndex: 'isHasData',
- // key: 'isHasData',
- // filters: [
- // { text: '是', value: '1' },
- // { text: '否', value: '0' }
- // ],
- // onFilter: (value, record) =>
- // record.isHasData
- // .toString()
- // .toLowerCase()
- // .includes(value.toLowerCase()),
- // scopedSlots: { customRender: 'isHasData' },
- // 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',
- sorter: (a, b) => a.costCampaignCount - b.costCampaignCount
- },
- {
- title: '总余额',
- dataIndex: 'balance',
- key: 'balance',
- align: 'center',
- sorter: (a, b) => a.balance - b.balance
- },
- {
- title: '总消耗',
- dataIndex: 'cost',
- key: 'cost',
- align: 'center',
- sorter: (a, b) => a.cost - b.cost
- },
- {
- title: '现金消耗',
- dataIndex: 'xianjinCost',
- key: 'xianjinCost',
- align: 'center',
- sorter: (a, b) => a.xianjinCost - b.xianjinCost
- },
- {
- title: '后返消耗',
- dataIndex: 'fandianCost',
- key: 'fandianCost',
- align: 'center',
- sorter: (a, b) => a.fandianCost - b.fandianCost
- },
- {
- title: '框返消耗',
- dataIndex: 'kuangfanCost',
- key: 'kuangfanCost',
- align: 'center',
- sorter: (a, b) => a.kuangfanCost - b.kuangfanCost
- },
- {
- title: '激励账户消耗',
- dataIndex: 'jiliCost',
- key: 'jiliCost',
- align: 'center',
- sorter: (a, b) => a.jiliCost - b.jiliCost
- },
- {
- title: '信⽤账户消耗',
- dataIndex: 'xinyongCost',
- key: 'xinyongCost',
- align: 'center',
- sorter: (a, b) => a.xinyongCost - b.xinyongCostxinyongCost
- },
- {
- title: '封⾯曝光数',
- dataIndex: 'fengmianShowCount',
- key: 'fengmianShowCount',
- align: 'center',
- sorter: (a, b) => a.fengmianShowCount - b.fengmianShowCount
- },
- {
- title: '封⾯点击数',
- dataIndex: 'fengmianClickCount',
- key: 'fengmianClickCount',
- align: 'center',
- sorter: (a, b) => a.fengmianClickCount - b.fengmianClickCount
- },
- {
- title: '素材曝光数',
- dataIndex: 'sucaiShowCount',
- key: 'sucaiShowCount',
- align: 'center',
- sorter: (a, b) => a.sucaiShowCount - b.sucaiShowCount
- },
- {
- title: '行为数',
- dataIndex: 'convertCount',
- key: 'convertCount',
- align: 'center',
- sorter: (a, b) => a.convertCount - b.convertCount
- },
- {
- title: '封⾯点击率',
- dataIndex: 'fengmianClickRate',
- key: 'fengmianClickRate',
- scopedSlots: { customRender: 'fengmianClickRate' },
- align: 'center',
- sorter: (a, b) => a.fengmianClickRate - b.fengmianClickRate
- },
- {
- title: '转化点击率',
- dataIndex: 'convertClickRate',
- key: 'convertClickRate',
- scopedSlots: { customRender: 'convertClickRate' },
- align: 'center',
- sorter: (a, b) => a.convertClickRate - b.convertClickRate
- }
- ]
- export default {
- name: 'company-detail',
- components: {
- ATooltip,
- ACol
- },
- data: function() {
- return {
- isHasData: '1',
- loginfo: {},
- barData,
- loading: false,
- a: '',
- columns: columns,
- dataList: [],
- dataListAll: [],
- advertiserName: ''
- }
- },
- filters: {
- getBo: function(value) {
- if (value) {
- return (value * 100).toFixed(2) + '%'
- } else {
- return '0.00%'
- }
- }
- },
- methods: {
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- onChageLogin(e) {
- if (e.target.value == 1) {
- this.dataList = this.dataListAll
- } else {
- this.dataList = this.dataListAll.filter(item => {
- return item.isHasData == 1
- })
- }
- },
- backStatistics() {
- this.$router.replace({
- path: '/Statistics/companyStatistics'
- })
- },
- exportExcel() {
- var weekDate = localStorage.getItem('companyDate')
- var params = {}
- params.date = weekDate
- params.isExportNullData = this.isHasData
- downFilePost('/report/kuaishouReportDailyAgentSum/companyReportAccountDetailListExportExcel', params).then(
- res => {
- let blob = new Blob([res], {
- type: 'application/vnd.ms-excel'
- })
- let downloadElement = document.createElement('a')
- let href = window.URL.createObjectURL(blob) //创建下载的链接
- downloadElement.href = href
- downloadElement.download = weekDate + '详情报表' //下载后文件名
- document.body.appendChild(downloadElement)
- downloadElement.click() //点击下载
- document.body.removeChild(downloadElement) //下载完成移除元素
- window.URL.revokeObjectURL(href) //释放掉blob对象
- }
- )
- },
- searchReset() {
- this.advertiserName = ''
- this.isHasData = '1'
- this.searchQuery()
- },
- searchQuery() {
- var weekDate = localStorage.getItem('companyDate')
- this.columns = columns
- this.loading = true
- postAction('/report/kuaishouReportDailyAgentSum/companyReportAccountDetailList', {
- date: weekDate,
- advertiserName: this.advertiserName
- }).then(res => {
- this.loading = false
- if (res.success) {
- this.dataListAll = this.dataList = res.result.map((item, index) => {
- return {
- ...item,
- key: index
- }
- })
- } else {
- this.$message.error(res.message)
- }
- })
- }
- },
- 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.dataListAll = this.dataList = res.result.map((item, index) => {
- return {
- ...item,
- key: index
- }
- })
- } else {
- this.$message.error(res.message)
- }
- })
- }
- }
- </script>
|