quarterStatistics.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  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
  22. style="width:300px;margin-bottom:30px"
  23. placeholder="请选择角色类型"
  24. v-model="type"
  25. @change="clearData"
  26. >
  27. <a-select-option :value="1">设计</a-select-option>
  28. <a-select-option :value="2">优化</a-select-option>
  29. </a-select>
  30. 季度选择:
  31. <a-select style="width:100px;margin-bottom:30px" placeholder="选择年" v-model="year">
  32. <a-select-option :value="item" v-for="item of options" :key="item">{{ item }}</a-select-option>
  33. </a-select>
  34. <a-select style="width:100px;margin-bottom:30px" placeholder="选择季度" v-model="dateRange">
  35. <a-select-option :value="item" v-for="item of 4" :key="item">{{ item }}</a-select-option>
  36. </a-select>
  37. <a-button type="primary" style="margin-left:10px" @click="addUser">搜索</a-button>
  38. <a-table :columns="columns" :dataSource="dataList" bordered :loading="loading" size="middle">
  39. <span slot-scope="text" slot="videoUrl">
  40. <video class="video" :src="text" controls="controls" style="height:200px">
  41. 您的浏览器不支持 video 标签。
  42. </video>
  43. </span>
  44. <span slot="action" slot-scope="text, record">
  45. <a @click="toDetail(record)">查看详情</a>
  46. </span>
  47. </a-table>
  48. </a-card>
  49. </a-col>
  50. </a-row>
  51. </div>
  52. </template>
  53. <script>
  54. import ChartCard from '@/components/ChartCard'
  55. import ACol from 'ant-design-vue/es/grid/Col'
  56. import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
  57. import MiniArea from '@/components/chart/MiniArea'
  58. import MiniBar from '@/components/chart/MiniBar'
  59. import MiniProgress from '@/components/chart/MiniProgress'
  60. import RankList from '@/components/chart/RankList'
  61. import Bar from '@/components/chart/Bar'
  62. import LineChartMultid from '@/components/chart/LineChartMultid'
  63. import HeadInfo from '@/components/tools/HeadInfo.vue'
  64. import Trend from '@/components/Trend'
  65. import moment from 'moment'
  66. import { getAction, postAction } from '@/api/manage'
  67. import { mapGetters } from 'vuex'
  68. import qs from 'qs'
  69. const barData = []
  70. for (let i = 0; i < 12; i += 1) {
  71. barData.push({
  72. x: `${i + 1}月`,
  73. y: Math.floor(Math.random() * 1000) + 200
  74. })
  75. }
  76. const columns = [
  77. {
  78. title: '姓名',
  79. dataIndex: 'realname',
  80. key: 'realname',
  81. align: 'center',
  82. width: 200
  83. },
  84. {
  85. title: '角色',
  86. dataIndex: 'roleName',
  87. key: 'roleName',
  88. align: 'center'
  89. },
  90. {
  91. title: '有效视频数量',
  92. dataIndex: 'effiVideoCount',
  93. key: 'effiVideoCount',
  94. align: 'center'
  95. },
  96. {
  97. title: '总视频数量',
  98. dataIndex: 'videoCount',
  99. key: 'videoCount',
  100. align: 'center'
  101. },
  102. {
  103. title: '消耗',
  104. dataIndex: 'cost',
  105. key: 'cost',
  106. align: 'center'
  107. }
  108. // {
  109. // title: '操作',
  110. // dataIndex: 'action',
  111. // key: 'action',
  112. // align: 'center',
  113. // scopedSlots: {
  114. // customRender: 'action'
  115. // },
  116. // },
  117. ]
  118. const columnsYou = [
  119. {
  120. title: '姓名',
  121. dataIndex: 'realname',
  122. key: 'realname',
  123. align: 'center',
  124. width: 200
  125. },
  126. {
  127. title: '角色',
  128. dataIndex: 'roleName',
  129. key: 'roleName',
  130. align: 'center'
  131. },
  132. {
  133. title: '总消耗',
  134. dataIndex: 'cost',
  135. key: 'cost',
  136. align: 'center'
  137. },
  138. {
  139. title: '绩效',
  140. dataIndex: 'effiRate',
  141. key: 'effiRate',
  142. align: 'center'
  143. },
  144. {
  145. title: '操作',
  146. dataIndex: 'action',
  147. key: 'action',
  148. align: 'center',
  149. scopedSlots: {
  150. customRender: 'action'
  151. }
  152. }
  153. ]
  154. export default {
  155. name: 'admin-info',
  156. components: {
  157. ATooltip,
  158. ACol
  159. },
  160. data: function() {
  161. return {
  162. type: 1,
  163. title: '工作台',
  164. loginfo: {},
  165. barData,
  166. visitInfo: [],
  167. visitFields: ['ip', 'visit'],
  168. loading: false,
  169. rankList: [],
  170. options: [],
  171. dateRange: null,
  172. year: new Date().getFullYear(),
  173. tabListNoTitle: [
  174. {
  175. key: 'kuaishou',
  176. tab: '快手'
  177. },
  178. {
  179. key: 'toutiao',
  180. tab: '头条'
  181. }
  182. ],
  183. noTitleKey: 'kuaishou',
  184. a: '',
  185. columns: columns,
  186. dataList: []
  187. }
  188. },
  189. methods: {
  190. disabledDate(current) {
  191. // Can not select days before today and today
  192. return current && current > moment().endOf('day')
  193. },
  194. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  195. clearData() {
  196. this.dataList = []
  197. },
  198. addUser() {
  199. this.loading = true
  200. if (this.noTitleKey == 'kuaishou') {
  201. if (this.type == 1) {
  202. this.columns = columns
  203. this.getKuaishouList()
  204. } else if (this.type == 2) {
  205. this.columns = columnsYou
  206. this.getKuaishouYouHuaList()
  207. }
  208. } else if (this.noTitleKey == 'toutiao') {
  209. if (this.type == 1) {
  210. this.columns = columns
  211. this.getToutiaoList()
  212. } else if (this.type == 2) {
  213. this.columns = columnsYou
  214. this.getToutiaoYouHuaList()
  215. }
  216. }
  217. },
  218. onTabChange(key, type) {
  219. console.log(key, type)
  220. this.type = 1
  221. this.dateRange = null
  222. this.year = '2020'
  223. this.options = []
  224. this.dataList = []
  225. this.columns = columns
  226. this[type] = key
  227. },
  228. toDetail(item) {
  229. localStorage.setItem('quarterUserId', item.userId)
  230. localStorage.setItem('quarterAppType', this.noTitleKey)
  231. localStorage.setItem('quarterYear', this.year)
  232. localStorage.setItem('quarterNow', this.dateRange)
  233. this.$router.replace({
  234. path: '/Statistics/quarterDetail'
  235. })
  236. },
  237. getKuaishouList() {
  238. var params = {}
  239. params.year = this.year
  240. params.quarter = this.dateRange
  241. postAction('/ctop/performance2/kuaishouQuarterReport', params).then(res => {
  242. console.log(res)
  243. if (res.success) {
  244. this.loading = false
  245. this.dataList = res.result.map((item, index) => {
  246. return {
  247. ...item,
  248. key: index
  249. }
  250. })
  251. } else {
  252. this.loading = false
  253. this.$message.error(res.message)
  254. }
  255. })
  256. },
  257. getToutiaoList() {
  258. var params = {}
  259. params.year = this.year
  260. params.quarter = this.dateRange
  261. postAction('/ctop/performance2/toutiaoQuarterReport', params).then(res => {
  262. console.log(res)
  263. if (res.success) {
  264. this.loading = false
  265. this.dataList = res.result.map((item, index) => {
  266. return {
  267. ...item,
  268. key: index
  269. }
  270. })
  271. } else {
  272. this.loading = false
  273. this.$message.error(res.message)
  274. }
  275. })
  276. },
  277. getKuaishouYouHuaList() {
  278. var params = {}
  279. params.year = this.year
  280. params.quarter = this.dateRange
  281. postAction('/ctop/performance2/kuaishouYouhuaQuarterReport', params).then(res => {
  282. console.log(res)
  283. if (res.success) {
  284. this.loading = false
  285. this.dataList = res.result.map((item, index) => {
  286. return {
  287. ...item,
  288. key: index
  289. }
  290. })
  291. } else {
  292. this.loading = false
  293. this.$message.error(res.message)
  294. }
  295. })
  296. },
  297. getToutiaoYouHuaList() {
  298. var params = {}
  299. params.year = this.year
  300. params.quarter = this.dateRange
  301. postAction('/ctop/performance2/toutiaoYouhuaQuarterReport', params).then(res => {
  302. console.log(res)
  303. if (res.success) {
  304. this.loading = false
  305. this.dataList = res.result.map((item, index) => {
  306. return {
  307. ...item,
  308. key: index
  309. }
  310. })
  311. } else {
  312. this.loading = false
  313. this.$message.error(res.message)
  314. }
  315. })
  316. }
  317. },
  318. created() {
  319. // this.getKuaishouList()
  320. var myDate = new Date()
  321. var startYear = myDate.getFullYear() - 5 //起始年份
  322. var endYear = myDate.getFullYear() + 5 //结束年份
  323. for (var i = startYear; i <= endYear; i++) {
  324. this.options.push(i)
  325. }
  326. }
  327. }
  328. </script>