companyDetail.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  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: 2500 }"
  32. :pagination="ipagination"
  33. @change="pageChange"
  34. >
  35. <!-- <span slot="isHasData" slot-scope="text">{{ text == 0 ? '否' : '是' }}</span> -->
  36. <!-- <span slot="fengmianClickRate" slot-scope="text">{{ text | getBo }}</span>
  37. <span slot="convertClickRate" slot-scope="text">{{ text | getBo }}</span> -->
  38. <span slot="industry" slot-scope="text">{{ text ?text:'暂无数据' }}</span>
  39. <span slot="secondIndustry" slot-scope="text">{{ text ?text:'暂无数据' }}</span>
  40. </a-table>
  41. </a-card>
  42. </a-col>
  43. </a-row>
  44. </div>
  45. </template>
  46. <script>
  47. import ChartCard from '@/components/ChartCard'
  48. import ACol from 'ant-design-vue/es/grid/Col'
  49. import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
  50. import MiniArea from '@/components/chart/MiniArea'
  51. import MiniBar from '@/components/chart/MiniBar'
  52. import MiniProgress from '@/components/chart/MiniProgress'
  53. import RankList from '@/components/chart/RankList'
  54. import Bar from '@/components/chart/Bar'
  55. import LineChartMultid from '@/components/chart/LineChartMultid'
  56. import HeadInfo from '@/components/tools/HeadInfo.vue'
  57. import Trend from '@/components/Trend'
  58. import { getAction, postAction, downFilePost } from '@/api/manage'
  59. import { mapGetters } from 'vuex'
  60. import qs from 'qs'
  61. import { JeecgListMixin } from '@/mixins/ipagination'
  62. const barData = []
  63. for (let i = 0; i < 12; i += 1) {
  64. barData.push({
  65. x: `${i + 1}月`,
  66. y: Math.floor(Math.random() * 1000) + 200
  67. })
  68. }
  69. const columns = [
  70. {
  71. title: '日期',
  72. dataIndex: 'date',
  73. key: 'date',
  74. align: 'center',
  75. fixed: 'left',
  76. width: 150
  77. },
  78. // {
  79. // title: '是否有数据',
  80. // dataIndex: 'isHasData',
  81. // key: 'isHasData',
  82. // filters: [
  83. // { text: '是', value: '1' },
  84. // { text: '否', value: '0' }
  85. // ],
  86. // onFilter: (value, record) =>
  87. // record.isHasData
  88. // .toString()
  89. // .toLowerCase()
  90. // .includes(value.toLowerCase()),
  91. // scopedSlots: { customRender: 'isHasData' },
  92. // align: 'center'
  93. // },
  94. {
  95. title: '快手id',
  96. dataIndex: 'kid',
  97. key: 'kid',
  98. align: 'center'
  99. },
  100. {
  101. title: '广告主名称',
  102. dataIndex: 'advertiserName',
  103. key: 'advertiserName',
  104. align: 'center'
  105. },
  106. {
  107. title: '广告主id',
  108. dataIndex: 'accountId',
  109. key: 'accountId',
  110. align: 'center'
  111. },
  112. {
  113. title: '账户名称',
  114. dataIndex: 'accountName',
  115. key: 'accountName',
  116. align: 'center'
  117. },
  118. {
  119. title: '有消费计划数',
  120. dataIndex: 'costCampaignCount',
  121. key: 'costCampaignCount',
  122. align: 'center',
  123. // sorter: (a, b) => a.costCampaignCount - b.costCampaignCount
  124. },
  125. {
  126. title: '总余额',
  127. dataIndex: 'balance',
  128. key: 'balance',
  129. align: 'center',
  130. // sorter: (a, b) => a.balance - b.balance
  131. },
  132. {
  133. title: '总消耗',
  134. dataIndex: 'cost',
  135. key: 'cost',
  136. align: 'center',
  137. // sorter: (a, b) => a.cost - b.cost
  138. },
  139. {
  140. title: '消耗环比',
  141. dataIndex: 'chargeDayOnDayPercent',
  142. key: 'chargeDayOnDayPercent',
  143. align: 'center',
  144. // sorter: (a, b) => a.cost - b.cost
  145. },
  146. {
  147. title: '现金消耗',
  148. dataIndex: 'xianjinCost',
  149. key: 'xianjinCost',
  150. align: 'center',
  151. // sorter: (a, b) => a.xianjinCost - b.xianjinCost
  152. },
  153. {
  154. title: '返点消耗',
  155. dataIndex: 'fandianCost',
  156. key: 'fandianCost',
  157. align: 'center',
  158. // sorter: (a, b) => a.fandianCost - b.fandianCost
  159. },
  160. {
  161. title: '框返消耗',
  162. dataIndex: 'kuangfanCost',
  163. key: 'kuangfanCost',
  164. align: 'center',
  165. // sorter: (a, b) => a.kuangfanCost - b.kuangfanCost
  166. },
  167. {
  168. title: '激励消耗',
  169. dataIndex: 'jiliCost',
  170. key: 'jiliCost',
  171. align: 'center',
  172. // sorter: (a, b) => a.jiliCost - b.jiliCost
  173. },
  174. {
  175. title: '信⽤消耗',
  176. dataIndex: 'xinyongCost',
  177. key: 'xinyongCost',
  178. align: 'center',
  179. // sorter: (a, b) => a.xinyongCost - b.xinyongCostxinyongCost
  180. },
  181. {
  182. title: '封⾯曝光数',
  183. dataIndex: 'fengmianShowCount',
  184. key: 'fengmianShowCount',
  185. align: 'center',
  186. // sorter: (a, b) => a.fengmianShowCount - b.fengmianShowCount
  187. },
  188. {
  189. title: '封⾯点击数',
  190. dataIndex: 'fengmianClickCount',
  191. key: 'fengmianClickCount',
  192. align: 'center',
  193. // sorter: (a, b) => a.fengmianClickCount - b.fengmianClickCount
  194. },
  195. {
  196. title: '素材曝光数',
  197. dataIndex: 'sucaiShowCount',
  198. key: 'sucaiShowCount',
  199. align: 'center',
  200. // sorter: (a, b) => a.sucaiShowCount - b.sucaiShowCount
  201. },
  202. {
  203. title: '行为数',
  204. dataIndex: 'convertCount',
  205. key: 'convertCount',
  206. align: 'center',
  207. // sorter: (a, b) => a.convertCount - b.convertCount
  208. },
  209. {
  210. title: '封⾯点击率',
  211. dataIndex: 'fengmianClickRate',
  212. key: 'fengmianClickRate',
  213. scopedSlots: { customRender: 'fengmianClickRate' },
  214. align: 'center',
  215. // sorter: (a, b) => a.fengmianClickRate - b.fengmianClickRate
  216. },
  217. {
  218. title: '转化点击率',
  219. dataIndex: 'convertClickRate',
  220. key: 'convertClickRate',
  221. scopedSlots: { customRender: 'convertClickRate' },
  222. align: 'center',
  223. // sorter: (a, b) => a.convertClickRate - b.convertClickRate
  224. },
  225. {
  226. title: '一级行业',
  227. dataIndex: 'industry',
  228. key: 'industry',
  229. scopedSlots: { customRender: 'industry' },
  230. align: 'center',
  231. },
  232. {
  233. title: '二级行业',
  234. dataIndex: 'secondIndustry',
  235. key: 'secondIndustry',
  236. scopedSlots: { customRender: 'secondIndustry' },
  237. align: 'center',
  238. }
  239. ]
  240. export default {
  241. name: 'company-detail',
  242. components: {
  243. ATooltip,
  244. ACol
  245. },
  246. mixins: [JeecgListMixin],
  247. data: function() {
  248. return {
  249. isHasData: '1',
  250. loginfo: {},
  251. barData,
  252. loading: false,
  253. a: '',
  254. columns: columns,
  255. dataList: [],
  256. dataListAll: [],
  257. advertiserName: ''
  258. }
  259. },
  260. filters: {
  261. getBo: function(value) {
  262. if (value) {
  263. return (value * 100).toFixed(2) + '%'
  264. } else {
  265. return '0.00%'
  266. }
  267. }
  268. },
  269. methods: {
  270. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  271. onChageLogin(e) {
  272. // if (e.target.value == 1) {
  273. // this.dataList = this.dataListAll
  274. // } else {
  275. // this.dataList = this.dataListAll.filter(item => {
  276. // return item.isHasData == 1
  277. // })
  278. // }
  279. this.searchQuery();
  280. },
  281. backStatistics() {
  282. this.$router.replace({
  283. path: '/Statistics/companyStatistics'
  284. })
  285. },
  286. exportExcel() {
  287. var weekDate = localStorage.getItem('companyDate')
  288. var params = {}
  289. params.date = weekDate
  290. params.isExportNullData = this.isHasData
  291. downFilePost('/agent/kuaiShouDailyAgent/companyReportAccountDetailListExportExcel', params).then(
  292. res => {
  293. let blob = new Blob([res], {
  294. type: 'application/vnd.ms-excel'
  295. })
  296. let downloadElement = document.createElement('a')
  297. let href = window.URL.createObjectURL(blob) //创建下载的链接
  298. downloadElement.href = href
  299. downloadElement.download = weekDate + '详情报表' //下载后文件名
  300. document.body.appendChild(downloadElement)
  301. downloadElement.click() //点击下载
  302. document.body.removeChild(downloadElement) //下载完成移除元素
  303. window.URL.revokeObjectURL(href) //释放掉blob对象
  304. }
  305. )
  306. },
  307. searchReset() {
  308. this.advertiserName = ''
  309. this.isHasData = '1'
  310. this.searchQuery()
  311. },
  312. searchQuery() {
  313. var weekDate = localStorage.getItem('companyDate')
  314. this.columns = columns
  315. this.loading = true
  316. postAction('/agent/kuaiShouDailyAgent/companyReportAccountDetailList', {
  317. date: weekDate,
  318. advertiserName: this.advertiserName,
  319. page:this.ipagination.current,
  320. pageSize:10,
  321. isExportNullData:this.isHasData
  322. }).then(res => {
  323. this.loading = false
  324. if (res.success) {
  325. this.dataListAll = this.dataList = res.result.list.map((item, index) => {
  326. return {
  327. ...item,
  328. key: index
  329. }
  330. });
  331. this.ipagination.total=res.result.total
  332. } else {
  333. this.$message.error(res.message)
  334. }
  335. })
  336. },
  337. pageChange(pagination, filters, sorter, { currentDataSource }){
  338. this.ipagination.current=pagination.current;
  339. this.searchQuery()
  340. },
  341. },
  342. mounted() {
  343. var weekDate = localStorage.getItem('companyDate')
  344. this.columns = columns
  345. this.loading = true
  346. postAction('/agent/kuaiShouDailyAgent/companyReportAccountDetailList', {
  347. date: weekDate,
  348. page:this.ipagination.current,
  349. pageSize:10,
  350. isExportNullData:this.isHasData
  351. }).then(res => {
  352. this.loading = false
  353. if (res.success) {
  354. this.dataListAll = this.dataList = res.result.list.map((item, index) => {
  355. return {
  356. ...item,
  357. key: index
  358. }
  359. })
  360. this.ipagination.total=res.result.total
  361. } else {
  362. this.$message.error(res.message)
  363. }
  364. })
  365. }
  366. }
  367. </script>