projectStatistics.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <style>
  2. .admin-info .ant-list-item-content {
  3. display: flex;
  4. justify-content: space-around;
  5. }
  6. .admin-info .ant-table-middle tr.ant-table-expanded-row td > .ant-table-wrapper {
  7. margin: -12px -9px -13px;
  8. }
  9. </style>
  10. <template>
  11. <div class="admin-info">
  12. <a-row :gutter="10" style="margin-top:10px">
  13. <a-col :span="24">
  14. <a-card
  15. style="width:100%;"
  16. :tabList="tabListNoTitle"
  17. :activeTabKey="noTitleKey"
  18. @tabChange="key => onTabChange(key, 'noTitleKey')"
  19. >
  20. 季度选择:
  21. <a-select style="width:100px;margin-bottom:30px" placeholder="选择年" v-model="year">
  22. <a-select-option :value="item" v-for="item of options" :key="item">{{ item }}</a-select-option>
  23. </a-select>
  24. <a-select style="width:100px;margin-bottom:30px" placeholder="选择季度" v-model="dateRange">
  25. <a-select-option :value="item" v-for="item of 4" :key="item">{{ item }}</a-select-option>
  26. </a-select>
  27. <a-button type="primary" style="margin-left:10px" @click="addUser">搜索</a-button>
  28. <a-table :columns="columns" :dataSource="dataList" bordered :loading="loading" size="middle">
  29. <span slot-scope="text" slot="videoUrl">
  30. <video class="video" :src="text" controls="controls" style="height:200px">
  31. 您的浏览器不支持 video 标签。
  32. </video>
  33. </span>
  34. <span slot="action" slot-scope="text, record">
  35. <a :disabled="record.totalCost == 0 || record.totalCost == null" @click="toDetail(record)">查看详情</a>
  36. </span>
  37. </a-table>
  38. </a-card>
  39. </a-col>
  40. </a-row>
  41. </div>
  42. </template>
  43. <script>
  44. import ChartCard from '@/components/ChartCard'
  45. import ACol from 'ant-design-vue/es/grid/Col'
  46. import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
  47. import MiniArea from '@/components/chart/MiniArea'
  48. import MiniBar from '@/components/chart/MiniBar'
  49. import MiniProgress from '@/components/chart/MiniProgress'
  50. import RankList from '@/components/chart/RankList'
  51. import Bar from '@/components/chart/Bar'
  52. import LineChartMultid from '@/components/chart/LineChartMultid'
  53. import HeadInfo from '@/components/tools/HeadInfo.vue'
  54. import Trend from '@/components/Trend'
  55. import moment from 'moment'
  56. import { getAction, postAction } from '@/api/manage'
  57. import { mapGetters } from 'vuex'
  58. import qs from 'qs'
  59. const barData = []
  60. for (let i = 0; i < 12; i += 1) {
  61. barData.push({
  62. x: `${i + 1}月`,
  63. y: Math.floor(Math.random() * 1000) + 200
  64. })
  65. }
  66. const columns = [
  67. {
  68. title: '项目名称',
  69. dataIndex: 'projectName',
  70. key: 'projectName',
  71. align: 'center'
  72. },
  73. {
  74. title: '广告主名称',
  75. dataIndex: 'advertiserName',
  76. key: 'advertiserName',
  77. align: 'center'
  78. },
  79. {
  80. title: '运营负责人',
  81. dataIndex: 'responsibleName',
  82. key: 'responsibleName',
  83. align: 'center'
  84. },
  85. {
  86. title: '设计负责人',
  87. dataIndex: 'designResponsibleName',
  88. key: 'designResponsibleName',
  89. align: 'center'
  90. },
  91. {
  92. title: '总消耗',
  93. dataIndex: 'totalCost',
  94. key: 'totalCost',
  95. align: 'center'
  96. },
  97. {
  98. title: '操作',
  99. dataIndex: 'action',
  100. key: 'action',
  101. align: 'center',
  102. scopedSlots: { customRender: 'action' }
  103. }
  104. ]
  105. export default {
  106. name: 'admin-info',
  107. components: {
  108. ATooltip,
  109. ACol
  110. },
  111. data: function() {
  112. return {
  113. type: 1,
  114. title: '工作台',
  115. loginfo: {},
  116. barData,
  117. visitInfo: [],
  118. visitFields: ['ip', 'visit'],
  119. loading: false,
  120. rankList: [],
  121. options: [],
  122. dateRange: null,
  123. year: new Date().getFullYear(),
  124. tabListNoTitle: [
  125. {
  126. key: 'kuaishou',
  127. tab: '快手'
  128. },
  129. {
  130. key: 'toutiao',
  131. tab: '头条'
  132. }
  133. ],
  134. noTitleKey: 'kuaishou',
  135. a: '',
  136. columns: columns,
  137. dataList: []
  138. }
  139. },
  140. methods: {
  141. disabledDate(current) {
  142. // Can not select days before today and today
  143. return current && current > moment().endOf('day')
  144. },
  145. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  146. clearData() {
  147. this.dataList = []
  148. },
  149. addUser() {
  150. this.loading = true
  151. this.getKuaishouList()
  152. },
  153. onTabChange(key, type) {
  154. console.log(key, type)
  155. this.type = 1
  156. this.dateRange = null
  157. this.year = '2020'
  158. this.options = []
  159. this.dataList = []
  160. this.columns = columns
  161. this[type] = key
  162. },
  163. toDetail(item) {
  164. // {"year":2020,"quarter":1,"appType":2,"projectId":47}
  165. localStorage.setItem('projectStatisticsId', item.projectId)
  166. localStorage.setItem('projectAppType', this.noTitleKey)
  167. localStorage.setItem('projectYear', this.year)
  168. localStorage.setItem('projectQuarter', this.dateRange)
  169. this.$router.replace({
  170. path: '/Statistics/projectDetail'
  171. })
  172. },
  173. getKuaishouList() {
  174. var params = {}
  175. params.year = this.year
  176. params.quarter = this.dateRange
  177. params.appType = this.noTitleKey == 'kuaishou' ? 2 : 1
  178. postAction('/ctop/performance2/getProjcetListByMediaType', params).then(res => {
  179. console.log(res)
  180. if (res.success) {
  181. this.loading = false
  182. this.dataList = res.result.map((item, index) => {
  183. return {
  184. ...item,
  185. key: index
  186. }
  187. })
  188. } else {
  189. this.loading = false
  190. this.$message.error(res.message)
  191. }
  192. })
  193. }
  194. },
  195. created() {
  196. // this.getKuaishouList()
  197. var myDate = new Date()
  198. var startYear = myDate.getFullYear() - 5 //起始年份
  199. var endYear = myDate.getFullYear() + 5 //结束年份
  200. for (var i = startYear; i <= endYear; i++) {
  201. this.options.push(i)
  202. }
  203. }
  204. }
  205. </script>