companyDetail.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. <style></style>
  2. <template>
  3. <div class="admin-detail">
  4. <a-row :gutter="10" style="margin-top:10px">
  5. <a-col :span="24">
  6. <a-card style="width:100%;">
  7. <!-- advertiserName -->
  8. <a-input
  9. placeholder="请输入广告主名称"
  10. v-model="advertiserName"
  11. style="width:300px;margin:10px 10px 10px 0"
  12. ></a-input>
  13. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  14. <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
  15. <a-button type="primary" @click="exportExcel" style="margin-left: 8px">导出</a-button>
  16. <a-button type="primary" @click="backStatistics" style="float:right;margin:10px 10px 10px 0"
  17. >返回公司报表</a-button
  18. >
  19. <br />
  20. 是否展示消耗为0的数据:
  21. <a-radio-group buttonStyle="solid" v-model="isHasData" @change="onChageLogin" style="margin:10px">
  22. <a-radio-button value="1">是</a-radio-button>
  23. <a-radio-button value="0">否</a-radio-button>
  24. </a-radio-group>
  25. <a-table
  26. :columns="columns"
  27. :dataSource="dataList"
  28. bordered
  29. :loading="loading"
  30. size="middle"
  31. :scroll="{ x: 2300 }"
  32. >
  33. <!-- <span slot="isHasData" slot-scope="text">{{ text == 0 ? '否' : '是' }}</span> -->
  34. <span slot="fengmianClickRate" slot-scope="text">{{ text | getBo }}</span>
  35. <span slot="convertClickRate" slot-scope="text">{{ text | getBo }}</span>
  36. </a-table>
  37. </a-card>
  38. </a-col>
  39. </a-row>
  40. </div>
  41. </template>
  42. <script>
  43. import ChartCard from '@/components/ChartCard'
  44. import ACol from 'ant-design-vue/es/grid/Col'
  45. import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
  46. import MiniArea from '@/components/chart/MiniArea'
  47. import MiniBar from '@/components/chart/MiniBar'
  48. import MiniProgress from '@/components/chart/MiniProgress'
  49. import RankList from '@/components/chart/RankList'
  50. import Bar from '@/components/chart/Bar'
  51. import LineChartMultid from '@/components/chart/LineChartMultid'
  52. import HeadInfo from '@/components/tools/HeadInfo.vue'
  53. import Trend from '@/components/Trend'
  54. import { getAction, postAction, downFilePost } from '@/api/manage'
  55. import { mapGetters } from 'vuex'
  56. import qs from 'qs'
  57. const barData = []
  58. for (let i = 0; i < 12; i += 1) {
  59. barData.push({
  60. x: `${i + 1}月`,
  61. y: Math.floor(Math.random() * 1000) + 200
  62. })
  63. }
  64. const columns = [
  65. {
  66. title: '日期',
  67. dataIndex: 'date',
  68. key: 'date',
  69. align: 'center',
  70. fixed: 'left',
  71. width: 150
  72. },
  73. // {
  74. // title: '是否有数据',
  75. // dataIndex: 'isHasData',
  76. // key: 'isHasData',
  77. // filters: [
  78. // { text: '是', value: '1' },
  79. // { text: '否', value: '0' }
  80. // ],
  81. // onFilter: (value, record) =>
  82. // record.isHasData
  83. // .toString()
  84. // .toLowerCase()
  85. // .includes(value.toLowerCase()),
  86. // scopedSlots: { customRender: 'isHasData' },
  87. // align: 'center'
  88. // },
  89. {
  90. title: '快手id',
  91. dataIndex: 'kid',
  92. key: 'kid',
  93. align: 'center'
  94. },
  95. {
  96. title: '广告主名称',
  97. dataIndex: 'advertiserName',
  98. key: 'advertiserName',
  99. align: 'center'
  100. },
  101. {
  102. title: '广告主创建时间',
  103. dataIndex: 'advertiserCreateTime',
  104. key: 'advertiserCreateTime',
  105. align: 'center'
  106. },
  107. {
  108. title: '有消费计划数',
  109. dataIndex: 'costCampaignCount',
  110. key: 'costCampaignCount',
  111. align: 'center',
  112. sorter: (a, b) => a.costCampaignCount - b.costCampaignCount
  113. },
  114. {
  115. title: '总余额',
  116. dataIndex: 'balance',
  117. key: 'balance',
  118. align: 'center',
  119. sorter: (a, b) => a.balance - b.balance
  120. },
  121. {
  122. title: '总消耗',
  123. dataIndex: 'cost',
  124. key: 'cost',
  125. align: 'center',
  126. sorter: (a, b) => a.cost - b.cost
  127. },
  128. {
  129. title: '现金消耗',
  130. dataIndex: 'xianjinCost',
  131. key: 'xianjinCost',
  132. align: 'center',
  133. sorter: (a, b) => a.xianjinCost - b.xianjinCost
  134. },
  135. {
  136. title: '后返消耗',
  137. dataIndex: 'fandianCost',
  138. key: 'fandianCost',
  139. align: 'center',
  140. sorter: (a, b) => a.fandianCost - b.fandianCost
  141. },
  142. {
  143. title: '框返消耗',
  144. dataIndex: 'kuangfanCost',
  145. key: 'kuangfanCost',
  146. align: 'center',
  147. sorter: (a, b) => a.kuangfanCost - b.kuangfanCost
  148. },
  149. {
  150. title: '激励账户消耗',
  151. dataIndex: 'jiliCost',
  152. key: 'jiliCost',
  153. align: 'center',
  154. sorter: (a, b) => a.jiliCost - b.jiliCost
  155. },
  156. {
  157. title: '信⽤账户消耗',
  158. dataIndex: 'xinyongCost',
  159. key: 'xinyongCost',
  160. align: 'center',
  161. sorter: (a, b) => a.xinyongCost - b.xinyongCostxinyongCost
  162. },
  163. {
  164. title: '封⾯曝光数',
  165. dataIndex: 'fengmianShowCount',
  166. key: 'fengmianShowCount',
  167. align: 'center',
  168. sorter: (a, b) => a.fengmianShowCount - b.fengmianShowCount
  169. },
  170. {
  171. title: '封⾯点击数',
  172. dataIndex: 'fengmianClickCount',
  173. key: 'fengmianClickCount',
  174. align: 'center',
  175. sorter: (a, b) => a.fengmianClickCount - b.fengmianClickCount
  176. },
  177. {
  178. title: '素材曝光数',
  179. dataIndex: 'sucaiShowCount',
  180. key: 'sucaiShowCount',
  181. align: 'center',
  182. sorter: (a, b) => a.sucaiShowCount - b.sucaiShowCount
  183. },
  184. {
  185. title: '行为数',
  186. dataIndex: 'convertCount',
  187. key: 'convertCount',
  188. align: 'center',
  189. sorter: (a, b) => a.convertCount - b.convertCount
  190. },
  191. {
  192. title: '封⾯点击率',
  193. dataIndex: 'fengmianClickRate',
  194. key: 'fengmianClickRate',
  195. scopedSlots: { customRender: 'fengmianClickRate' },
  196. align: 'center',
  197. sorter: (a, b) => a.fengmianClickRate - b.fengmianClickRate
  198. },
  199. {
  200. title: '转化点击率',
  201. dataIndex: 'convertClickRate',
  202. key: 'convertClickRate',
  203. scopedSlots: { customRender: 'convertClickRate' },
  204. align: 'center',
  205. sorter: (a, b) => a.convertClickRate - b.convertClickRate
  206. }
  207. ]
  208. export default {
  209. name: 'company-detail',
  210. components: {
  211. ATooltip,
  212. ACol
  213. },
  214. data: function() {
  215. return {
  216. isHasData: '1',
  217. loginfo: {},
  218. barData,
  219. loading: false,
  220. a: '',
  221. columns: columns,
  222. dataList: [],
  223. dataListAll: [],
  224. advertiserName: ''
  225. }
  226. },
  227. filters: {
  228. getBo: function(value) {
  229. if (value) {
  230. return (value * 100).toFixed(2) + '%'
  231. } else {
  232. return '0.00%'
  233. }
  234. }
  235. },
  236. methods: {
  237. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  238. onChageLogin(e) {
  239. if (e.target.value == 1) {
  240. this.dataList = this.dataListAll
  241. } else {
  242. this.dataList = this.dataListAll.filter(item => {
  243. return item.isHasData == 1
  244. })
  245. }
  246. },
  247. backStatistics() {
  248. this.$router.replace({
  249. path: '/Statistics/companyStatistics'
  250. })
  251. },
  252. exportExcel() {
  253. var weekDate = localStorage.getItem('companyDate')
  254. var params = {}
  255. params.date = weekDate
  256. params.isExportNullData = this.isHasData
  257. downFilePost('/report/kuaishouReportDailyAgentSum/companyReportAccountDetailListExportExcel', params).then(
  258. res => {
  259. let blob = new Blob([res], {
  260. type: 'application/vnd.ms-excel'
  261. })
  262. let downloadElement = document.createElement('a')
  263. let href = window.URL.createObjectURL(blob) //创建下载的链接
  264. downloadElement.href = href
  265. downloadElement.download = weekDate + '详情报表' //下载后文件名
  266. document.body.appendChild(downloadElement)
  267. downloadElement.click() //点击下载
  268. document.body.removeChild(downloadElement) //下载完成移除元素
  269. window.URL.revokeObjectURL(href) //释放掉blob对象
  270. }
  271. )
  272. },
  273. searchReset() {
  274. this.advertiserName = ''
  275. this.isHasData = '1'
  276. this.searchQuery()
  277. },
  278. searchQuery() {
  279. var weekDate = localStorage.getItem('companyDate')
  280. this.columns = columns
  281. this.loading = true
  282. postAction('/report/kuaishouReportDailyAgentSum/companyReportAccountDetailList', {
  283. date: weekDate,
  284. advertiserName: this.advertiserName
  285. }).then(res => {
  286. this.loading = false
  287. if (res.success) {
  288. this.dataListAll = this.dataList = res.result.map((item, index) => {
  289. return {
  290. ...item,
  291. key: index
  292. }
  293. })
  294. } else {
  295. this.$message.error(res.message)
  296. }
  297. })
  298. }
  299. },
  300. created() {
  301. var weekDate = localStorage.getItem('companyDate')
  302. this.columns = columns
  303. this.loading = true
  304. postAction('/report/kuaishouReportDailyAgentSum/companyReportAccountDetailList', { date: weekDate }).then(res => {
  305. this.loading = false
  306. if (res.success) {
  307. this.dataListAll = this.dataList = res.result.map((item, index) => {
  308. return {
  309. ...item,
  310. key: index
  311. }
  312. })
  313. } else {
  314. this.$message.error(res.message)
  315. }
  316. })
  317. }
  318. }
  319. </script>