123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230 |
- <style></style>
- <template>
- <div class="admin-detail">
- <a-row :gutter="10" style="margin-top:10px">
- <a-col :span="24">
- <a-card style="width:100%;">
- <h3 style="margin:20px 0">当前账户总消耗为:{{ sumAll }}</h3>
- <a-table
- :columns="columns"
- :dataSource="dataList"
- bordered
- :loading="loading"
- size="middle"
- :pagination="true"
- >
- <span slot-scope="text" slot="creativeUrl">
- <video class="video" :src="text" controls="controls" style="height:200px" v-if="text">
- 您的浏览器不支持 video 标签。
- </video>
- <div v-else>
- 暂无视频
- </div>
- </span>
- <span slot="shot" slot-scope="text">{{ text ? text : '-' }}</span>
- <span slot="plan" slot-scope="text">{{ text ? text : '-' }}</span>
- <span slot="plane" slot-scope="text">{{ text ? text : '-' }}</span>
- <span slot="clip" slot-scope="text">{{ text ? text : '-' }}</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 } 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: 'creativeUrl',
- key: 'creativeUrl',
- align: 'center',
- scopedSlots: {
- customRender: 'creativeUrl'
- },
- width: 200
- },
- {
- title: '账户消耗',
- dataIndex: 'charge',
- key: 'charge',
- align: 'center',
- scopedSlots: {
- customRender: 'charge'
- }
- },
- {
- title: '拍摄',
- dataIndex: 'shot',
- key: 'shot',
- align: 'center',
- scopedSlots: {
- customRender: 'shot'
- }
- },
- {
- title: '编导',
- dataIndex: 'plan',
- key: 'plan',
- align: 'center',
- scopedSlots: {
- customRender: 'plan'
- }
- },
- {
- title: '平面',
- dataIndex: 'plane',
- key: 'plane',
- align: 'center',
- scopedSlots: {
- customRender: 'plane'
- }
- },
- {
- title: '剪辑',
- dataIndex: 'clip',
- key: 'clip',
- align: 'center',
- scopedSlots: {
- customRender: 'clip'
- }
- }
- ]
- function sum(arr) {
- var len = arr.length
- if (len == 0) {
- return 0
- } else if (len == 1) {
- return arr[0]
- } else {
- return arr[0] + sum(arr.slice(1))
- }
- }
- export default {
- name: 'admin-info',
- components: {
- ATooltip,
- ACol
- },
- data: function() {
- return {
- title: '工作台',
- loginfo: {},
- barData,
- visitInfo: [],
- visitFields: ['ip', 'visit'],
- loading: false,
- rankList: [],
- tabListNoTitle: [
- {
- key: 'kuaishou',
- tab: '快手'
- },
- {
- key: 'toutiao',
- tab: '头条'
- }
- ],
- noTitleKey: 'kuaishou',
- a: '',
- columns: columns,
- dataList: [],
- sumAll: null
- }
- },
- methods: {
- ...mapGetters(['nickname', 'avatar', 'userInfo'])
- },
- filters: {
- roleName: function(value) {
- var status = {
- clip: '剪辑',
- shot: '拍摄',
- plan: '策划',
- plane: '平面'
- }
- return status[value]
- }
- },
- created() {
- var userId = localStorage.getItem('videoAccountId')
- var appType = localStorage.getItem('videoAppType')
- // == 'kuaishou' ? 2 : 1
- var type = localStorage.getItem('videoYear')
- var weekDate = localStorage.getItem('videoQuarter')
- if (appType == '2') {
- // /ctop/performance2/getKuaishouQuarterVideoInfoByAccountId
- postAction('/ctop/performance2/getKuaishouQuarterVideoInfoByAccountId', {
- year: type,
- quarter: weekDate,
- accountId: userId
- }).then(res => {
- if (res.success) {
- this.dataList = res.result.map((item, index) => {
- return {
- ...item,
- key: index
- }
- })
- var sumAll = this.dataList.map(item => {
- return item.charge
- })
- this.sumAll = sum(sumAll)
- } else {
- this.$message.error(res.message)
- }
- })
- } else {
- postAction('/ctop/performance2/getToutiaoQuarterVideoInfoByAccountId', {
- year: type,
- quarter: weekDate,
- accountId: userId
- }).then(res => {
- if (res.success) {
- this.dataList = res.result.map((item, index) => {
- return {
- ...item,
- key: index
- }
- })
- var sumAll = this.dataList.map(item => {
- return item.charge
- })
- this.sumAll = sum(sumAll)
- } else {
- this.$message.error(res.message)
- }
- })
- }
- }
- }
- </script>
|