12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376 |
- <style>
- .materialReport .chart-card-content {
- display: none !important;
- }
- </style>
- <style lang="less" scoped>
- ::v-deep .ant-table {
- //设置表格头部竖向滚动宽度
- ::v-deep .ant-table-header::-webkit-scrollbar {
- width: 4px;
- }
- //设置表格体滚动宽度
- ::v-deep .ant-table-body,
- .ant-table-body-inner {
- &::-webkit-scrollbar {
- width: 4px;
- height: 4px;
- }
- &::-webkit-scrollbar-thumb {
- border-radius: 4px;
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
- background: #909090;
- }
- &::-webkit-scrollbar-track {
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
- border-radius: 4px;
- background: #ededed;
- }
- }
- //解决固定列底部预留的空隙
- ::v-deep .ant-table-fixed-left,
- .ant-table-fixed-right {
- .ant-table-body-outer {
- margin-bottom: 0 !important;
- }
- }
- }
- </style>
- <style scoped>
- ::v-deep .ant-tabs .ant-tabs-large-bar .ant-tabs-tab {
- padding: 11px 16px;
- }
- .bg {
- width: 100%;
- height: 100%;
- }
- .bg:after {
- content: '';
- width: 110%;
- height: 110%;
- position: absolute;
- left: -5%;
- top: -5%;
- background: inherit;
- filter: blur(10px);
- z-index: 2;
- background: rgba(0, 0, 0, 0.8);
- }
- .top-ul-style {
- width: 100%;
- padding-left: 0;
- }
- .top-ul-style li {
- height: 100px;
- border: 1px solid #f2f2f2;
- margin-bottom: 5px;
- padding: 10px;
- display: flex;
- justify-content: space-between;
- }
- .li-cost {
- display: flex;
- flex-flow: column;
- justify-content: center;
- align-content: flex-end;
- }
- .li-cost span {
- font-size: 16px;
- font-weight: 500;
- min-width: 50px;
- text-align: right;
- }
- </style>
- <template>
- <div class="materialReport">
- <a-row :gutter="24">
- <a-col :xl="24">
- <div class="option" style="justify-content: space-between">
- <div class="option" style="padding: 0">
- <div class="item">
- <span>媒体</span>
- <a-radio-group v-model="mediaDimension" @change="getProjectList">
- <a-radio-button value="b">快手</a-radio-button>
- <a-radio-button value="a">头条</a-radio-button>
- </a-radio-group>
- </div>
- <div class="item">
- <span>人员</span>
- <a-select
- v-model="person"
- style="width: 150px; margin-left: 10px"
- :mode="'default'"
- :maxTagCount="2"
- :loading="specificLoading"
- :filterOption="filterOption"
- showSearch
- allowClear
- >
- <a-select-option
- v-for="(item, index) in dataDimensionList"
- :key="index + 1"
- :value="item.userId"
- >
- {{ item.userName }}
- </a-select-option>
- </a-select>
- </div>
- <div class="item">
- <span>岗位</span>
- <a-select
- v-model="post"
- style="width: 150px; margin-left: 10px"
- :mode="'default'"
- allowClear
- >
- <a-select-option value="operationAssistant"> 运营助理 </a-select-option>
- <a-select-option value="manager"> 运营经理 </a-select-option>
- <a-select-option value="operator"> 运营专员 </a-select-option>
- </a-select>
- </div>
- <div class="item">
- <span>季度</span>
- <a-select v-model="quarter" style="width: 150px; margin-left: 10px" :mode="'default'">
- <a-select-option :value="1"> 第一季度 </a-select-option>
- <a-select-option :value="2"> 第二季度 </a-select-option>
- <a-select-option :value="3"> 第三季度 </a-select-option>
- <a-select-option :value="4"> 第四季度 </a-select-option>
- </a-select>
- </div>
- <!-- <div class="item">
- <span>类型</span>
- <a-select
- v-model="dataType"
- style="width: 300px; margin-left: 10px"
- :mode="'default'"
- allowClear
- >
- <a-select-option :value="0"> 消耗 </a-select-option>
- <a-select-option :value="1"> 在投客户数-项目 </a-select-option>
- <a-select-option :value="2"> 在投客户数-广告主主体 </a-select-option>
- <a-select-option :value="3"> 基建数 </a-select-option>
- </a-select>
- </div> -->
- </div>
- <div class="item" style="float: right">
- <a-button :loading="resetLoading" type="primary" @click="handleSubmit"> 搜索 </a-button>
- <a-button
- :disabled="spinning"
- :loading="resetLoading"
- style="margin-left: 15px"
- @click="resetSubmit"
- >
- 重置
- </a-button>
- </div>
- </div>
- </a-col>
- </a-row>
- <a-row :gutter="24" style="margin-top: 20px" id="getWidth">
- <a-col :xl="24">
- <a-card style="width: 100%" title="运营数据">
- <a-button type="primary" @click="handleAddSale" style="margin-bottom: 15px">
- 新增运营对应关系
- </a-button>
- <a-button type="primary" @click="addCompensation" style="margin: 0 15px 15px"> 新增赔付 </a-button>
- <a-button type="primary" @click="compensationShow" style="margin-bottom: 15px"> 赔付列表 </a-button>
- <a-button type="primary" class="export" @click="exportExcel" :loading="exportLoading" style="margin-bottom: 15px;margin-left:15px"
- >导出报表</a-button
- >
- <!-- :columns="columns" -->
- <a-table
- size="middle"
- :dataSource="designTopList"
- bordered
- id="outTable"
- :pagination="false"
- :loading="designTopLoading"
- ref="accountTable"
- @change="sort"
- :scroll="{ x: scrollX }"
- >
- <a-table-column title="运营" data-index="userName" :width="120" align="center" fixed="left">
- </a-table-column>
- <a-table-column title="岗位" data-index="roleName" :width="120" align="center" fixed="left">
- </a-table-column>
- <a-table-column title="晋升时间" data-index="upTime" align="center">
- <template slot-scope="t, r, i">
- <span>{{ !!t ? t : '-' }}</span>
- </template>
- </a-table-column>
- <a-table-column title="离职时间" data-index="quitTime" align="center">
- <template slot-scope="t, r, i">
- <span>{{ !!t ? t : '-' }}</span>
- </template>
- </a-table-column>
- <a-table-column :title="onetotalCharge" data-index="totalCharge" align="center">
- </a-table-column>
- <a-table-column :title="oneKFCharge" data-index="KFCharge" align="center" v-if="showKf">
- </a-table-column>
- <a-table-column :title="oneFWCharge" data-index="FWCharge" align="center"> </a-table-column>
- <a-table-column
- title="框返消耗是否满足30W"
- data-index="KFChargeIsOk"
- align="center"
- v-if="showKf"
- >
- </a-table-column>
- <a-table-column title="管理消耗" data-index="manageCharge" align="center"> </a-table-column>
- <a-table-column title="助理消耗" data-index="assistantCharge" align="center"> </a-table-column>
- <a-table-column title="服务消耗提成" data-index="FWChargeCommission" align="center">
- </a-table-column>
- <a-table-column
- title="框返消耗提成"
- data-index="KFChargeCommission"
- align="center"
- v-if="showKf"
- >
- </a-table-column>
- <a-table-column title="管理消耗提成" data-index="manageChargeCommission" align="center">
- </a-table-column>
- <a-table-column title="运营赔付扣罚比例" data-index="operateCompensation" align="center">
- </a-table-column>
- <a-table-column title="经理/总监赔付扣罚比例" data-index="manageCompensation" align="center">
- </a-table-column>
- <a-table-column title="是否达标" data-index="FWChargeIsOk" align="center"> </a-table-column>
- <a-table-column title="扣减金额" data-index="compMoney" align="center"> </a-table-column>
- <a-table-column title="是否符合发放" data-index="paySalary" align="center"> </a-table-column>
- <a-table-column title="发放金额" data-index="putMoney" align="center"> </a-table-column>
- <a-table-column title="发放系数" data-index="paySalaryRatio" align="center">
- <template slot-scope="t, r, i">
- <span>{{ !!t ? t : '-' }}</span>
- </template>
- </a-table-column>
- <a-table-column title="最终发放金额" data-index="finalPutMoney" align="center">
- <template slot-scope="t, r, i">
- <span>{{ !!t ? t : '-' }}</span>
- </template>
- </a-table-column>
- <a-table-column title="操作" data-index="action" align="center">
- <template slot-scope="t, r, i">
- <a @click="editPuyData(r)">修改</a>
- </template>
- </a-table-column>
- </a-table>
- </a-card>
- </a-col>
- </a-row>
- <a-modal
- v-if="saleVisible"
- title="运营管理"
- :visible="saleVisible"
- @cancel="saleVisible = false"
- :width="1000"
- :footer="null"
- >
- <a-button type="primary" style="margin-bottom: 10px" id="mybtn" @click="addSaleInfo">新增</a-button>
- <br />
- 设定对应关系后,该运营助理的消耗在结算绩效时,会根据对应人员进行统计
- <a-table
- :columns="saleInfoColumns"
- :data-source="saleInfoList"
- bordered
- tableLayout="auto"
- :pagination="false"
- :loading="saleLoading"
- style="word-break: break-all"
- >
- <div slot="operateName" slot-scope="text, records">
- <span v-if="!records.edit">{{ text }}</span>
- <a-select
- v-else
- show-search
- v-model="records.saleIdContent"
- placeholder="请选择运营"
- option-filter-prop="children"
- style="width: 200px"
- :filter-option="filterOption"
- :labelInValue="true"
- >
- <a-select-option
- v-for="(item, index) in dataDimensionList"
- :key="index"
- :value="item.userId"
- :disabled="
- records.assistantIdContent ? records.assistantIdContent.key == item.userId : false
- "
- >
- {{ item.userName }}
- </a-select-option>
- </a-select>
- </div>
- <div slot="assistantName" slot-scope="text, records">
- <span v-if="!records.edit">{{ text }}</span>
- <a-select
- v-else
- show-search
- v-model="records.assistantIdContent"
- placeholder="请选择运营助理"
- option-filter-prop="children"
- style="width: 200px"
- :filter-option="filterOption"
- :labelInValue="true"
- >
- <a-select-option
- v-for="(item, index) in dataDimensionList"
- :key="index"
- :value="item.userId"
- :disabled="records.saleIdContent ? records.saleIdContent.key == item.userId : false"
- >
- {{ item.userName }}
- </a-select-option>
- </a-select>
- </div>
- <div slot="time" slot-scope="text, records">
- <span v-if="!records.edit">{{ text }}</span>
- <a-month-picker v-model="records.time" v-else />
- </div>
- <div slot="action" slot-scope="text, records">
- <div v-if="!records.edit">
- <a @click="handleEdit(records)">编辑</a>
- <a-divider type="vertical" />
- <a-popconfirm title="是否确认删除?" @confirm="() => handleDelete(records)">
- <a>删除</a>
- </a-popconfirm>
- </div>
- <div v-else>
- <a-button type="primary" @click="handleSale(records)">保存</a-button>
- <a-button style="margin-left: 8px" @click="handleSaleCancelOne(records)">取消</a-button>
- </div>
- </div>
- </a-table>
- <a-pagination
- style="display: flex; justify-content: flex-end; margin-top: 10px"
- :total="ipagination.total"
- :show-total="(total) => `共 ${ipagination.total} 条`"
- size="small"
- @change="handleCurrey"
- />
- </a-modal>
- <a-modal
- v-if="compensationVisible"
- title="赔付记录"
- :visible="compensationVisible"
- @cancel="compensationVisible = false"
- :width="1000"
- :footer="null"
- >
- <a-table
- :data-source="compensationList"
- bordered
- tableLayout="auto"
- :pagination="false"
- :loading="compensationLoading"
- style="word-break: break-all"
- >
- <a-table-column title="账户ID" data-index="accountId" :width="150" align="center"> </a-table-column>
- <a-table-column title="账户名称" data-index="auth_name" :width="150" align="center"> </a-table-column>
- <a-table-column title="运营" data-index="realname" align="center"> </a-table-column>
- <a-table-column title="媒体" data-index="mediaId" align="center">
- <template slot-scope="t, r, i">
- <span>{{ t == 1 ? '头条' : '快手' }}</span>
- </template>
- </a-table-column>
- <a-table-column title="日期" data-index="startDate" align="center">
- <template slot-scope="t, r, i">
- <span>{{ t + '~' + r.endDate }}</span>
- </template>
- </a-table-column>
- <a-table-column title="赔付金额" data-index="compMoney" align="center"> </a-table-column>
- </a-table>
- <a-pagination
- style="display: flex; justify-content: flex-end; margin-top: 10px"
- :total="ipaginationCompensation.total"
- :show-total="(total) => `共 ${ipaginationCompensation.total} 条`"
- size="small"
- @change="handleCurreyCompensation"
- />
- </a-modal>
- <a-modal
- v-if="addCompensationVisible"
- title="新增赔付"
- :visible="addCompensationVisible"
- @cancel="
- addCompensationVisible = false
- accountId = undefined
- userId = undefined
- "
- :width="1000"
- @ok="handleSubmitAdd"
- >
- <!-- @submit="handleQueryList" -->
- <a-form
- :form="form"
- :selfUpdate="true"
- :labelCol="{ span: 5 }"
- :wrapperCol="{ span: 19 }"
- v-if="addCompensationVisible"
- >
- <a-row :gutter="24">
- <a-col :md="16" :sm="16" :xxl="16">
- <a-form-item label="媒体">
- <a-radio-group
- v-decorator="[
- 'mediaId',
- {
- rules: [{ required: true, message: '请选择项目!' }],
- initialValue: 2,
- },
- ]"
- @change="getAccountList"
- >
- <a-radio-button :value="2">快手</a-radio-button>
- <a-radio-button :value="1">头条</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="24">
- <a-col :md="16" :sm="16" :xxl="16">
- <a-form-item label="账户名称">
- <treeselect
- :multiple="false"
- :disable-branch-nodes="true"
- :disable-fuzzy-matching="true"
- :options="options"
- placeholder="请选择项目以及账户"
- v-model="accountId"
- style="width: 100%"
- @change="getPersonByAccountId"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="24">
- <a-col :md="16" :sm="16" :xxl="16">
- <a-form-item label="运营">
- <a-select
- v-model="userId"
- style="width: 150px"
- :mode="'default'"
- :filterOption="filterOption"
- showSearch
- allowClear
- >
- <a-select-option
- v-for="(item, index) in personList"
- :key="index + 1"
- :value="item.userId"
- >
- {{ item.userName }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="24">
- <a-col :md="16" :sm="16" :xxl="16">
- <a-form-item label="日期">
- <a-range-picker
- v-decorator="[
- 'statDate',
- {
- rules: [{ required: true, message: '请选择日期!' }],
- initialValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
- },
- ]"
- :ranges="dateRanges"
- :disabled-date="disabledDate"
- style="width: 250px"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="24">
- <a-col :md="16" :sm="16" :xxl="16">
- <a-form-item label="赔付金额">
- <a-input-number
- v-decorator="[
- 'compMoney',
- {
- rules: [{ required: true, message: '赔付金额必填!' }],
- },
- ]"
- :min="0"
- :step="0.1"
- style="width: 250px"
- />
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-modal>
- <a-modal
- v-if="editPuy"
- title="修改发放系数和是否符合发放"
- :visible="editPuy"
- @cancel="editPuy = false"
- :width="1000"
- @ok="handleSubmitEdit"
- >
- <!-- @submit="handleQueryList" -->
- <a-form
- :form="formEdit"
- :selfUpdate="true"
- :labelCol="{ span: 5 }"
- :wrapperCol="{ span: 19 }"
- v-if="editPuy && !!editData"
- >
- <a-row :gutter="24">
- <a-col :md="16" :sm="16" :xxl="16">
- <a-form-item label="人员">
- {{ editData.userName }}
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="24">
- <a-col :md="16" :sm="16" :xxl="16">
- <a-form-item label="是否发放">
- <a-radio-group
- v-decorator="[
- 'paySalary',
- {
- rules: [{ required: true, message: '请选择项目!' }],
- initialValue: editData.paySalary,
- },
- ]"
- @change="getAccountList"
- >
- <a-radio-button value="是">是</a-radio-button>
- <a-radio-button value="否">否</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="24">
- <a-col :md="16" :sm="16" :xxl="16">
- <a-form-item label="发放系数">
- <a-input-number
- v-decorator="[
- 'paySalaryRatio',
- {
- rules: [{ required: true, message: '发放系数必填!' }],
- initialValue: editData.paySalaryRatio,
- },
- ]"
- :min="0"
- :max="1"
- :step="0.1"
- style="width: 250px"
- />
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-modal>
- </div>
- </template>
- <script>
- import moment from 'moment'
- import YoutTable from '@/components/youtTable/YoutTable'
- import ChartCard from '@/components/ChartCard'
- import Trend from '@/components/Trend'
- import { mapGetters } from 'vuex'
- import Treeselect from '@riophae/vue-treeselect' // 引用树组件
- import '@riophae/vue-treeselect/dist/vue-treeselect.css' //树组件样式
- import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' //树组件参数
- import { downFile } from '@/api/manage'
- import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
- const columnsFixd = [
- {
- title: '广告组名称',
- dataIndex: 'unitName',
- align: 'center',
- scopedSlots: { customRender: 'unitName' },
- },
- {
- title: '封面曝光数',
- dataIndex: 'photoShow',
- align: 'center',
- },
- {
- title: '封面点击数',
- dataIndex: 'photoClick',
- align: 'center',
- scopedSlots: { customRender: 'photoClick' },
- },
- {
- title: '消耗',
- dataIndex: 'cost',
- align: 'center',
- },
- ]
- const ksColumns = []
- export default {
- components: {
- YoutTable,
- ChartCard,
- Trend,
- Treeselect,
- },
- data() {
- return {
- exportLoading:false,
- editPuy: false,
- editData: null,
- formEdit: this.$form.createForm(this),
- accountId: undefined,
- addCompensationVisible: false,
- form: this.$form.createForm(this),
- compensationLoading: false,
- compensationList: [],
- compensationVisible: false,
- saleLoading: false,
- saleVisible: false, //运营管理
- saleInfoList: [], // 运营关系列表
- allOperatorList: [],
- saleInfoColumns: [
- {
- title: '运营/运营经理',
- dataIndex: 'operateName',
- align: 'center',
- key: 'saleName',
- scopedSlots: { customRender: 'operateName' },
- },
- {
- title: '运营助理',
- dataIndex: 'assistantName',
- align: 'center',
- scopedSlots: { customRender: 'assistantName' },
- },
- {
- title: '时间',
- dataIndex: 'time',
- align: 'center',
- scopedSlots: { customRender: 'time' },
- },
- {
- title: '操作',
- dataIndex: 'action',
- align: 'center',
- scopedSlots: { customRender: 'action' },
- },
- ],
- visible: false, //自定义页面的打开
- listNum: [],
- spinningMaterialGroupData: false,
- scrollX: 2500,
- ipagination: {
- current: 1,
- pageSize: 10,
- // pageSizeOptions: ['10', '20', '30'],
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- // showSizeChanger: true,
- pageSizeOptions: ['10', '30', '50'],
- total: 0,
- onChange: (current, pageSize) => {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipagination.current = current
- this.ipagination.pageSize = pageSize
- },
- },
- ipaginationCompensation: {
- current: 1,
- pageSize: 10,
- // pageSizeOptions: ['10', '20', '30'],
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- // showSizeChanger: true,
- pageSizeOptions: ['10', '30', '50'],
- total: 0,
- onChange: (current, pageSize) => {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipaginationCompensation.current = current
- this.ipaginationCompensation.pageSize = pageSize
- },
- },
- tabListNoTitle: [
- {
- key: '2',
- tab: '快手',
- },
- {
- key: '1',
- tab: '头条',
- },
- ],
- noTitleKey: '2',
- active: 'cost',
- groupDisabled: false,
- timeShowEchartsStatus: true,
- signatureStatus: false,
- materialGroupData: {},
- accountIndexList: {},
- popularVideoList: {},
- materialRankValue: 0,
- designRankingValue: 1,
- designTopLoading: false,
- noImg: require('@/assets/noImg.png'),
- visibleVideo: false,
- videoUrlShow: '',
- cost: '0',
- spinning: false,
- spinningChart: false,
- spinningChartPie: false,
- loading: false,
- chartList: [],
- videoList: [],
- designTopList: [],
- target: '',
- order: 'descend',
- columns: [...columnsFixd, ...ksColumns], // table的表头
- columnsFixd,
- dateRanges: {
- 今天: [moment(), moment()],
- 近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
- 近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
- // 近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
- // 近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
- // 近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
- // 近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')],
- },
- dateValue: [moment(), moment()],
- videoType: 0,
- labelType: 0,
- dataDimension: 'a',
- mediaDimension: 'b',
- showKf: true,
- projectId: null,
- dataDimensionValue: null,
- quarter: null,
- person: null,
- post: null,
- operationTarget: 'charge',
- dataDimensionList: [],
- specificLoading: false,
- dataType: 0,
- accountIdKuaishou: undefined,
- accountIdToutiao: undefined,
- category: 0,
- clientWidth: 0,
- resetLoading: false,
- searchLoading: false,
- spinningPopularVideoList: false,
- oneFWCharge: '',
- oneJLCharge: '',
- oneKFCharge: '',
- onetotalCharge: '',
- options: [],
- personList: [],
- userId: undefined,
- }
- },
- watch: {
- visibleVideo(n, o) {
- if (!n) {
- stopOtherVideo()
- closeAllVideoFun()
- }
- },
- accountId(n, o) {
- if (!!n) {
- this.getAction('kuaishou/operationReport/getAccountUser?accountId=' + n).then((res) => {
- if (res.success) {
- this.userId = res.result.user_id
- }
- })
- } else {
- }
- },
- },
- methods: {
- moment,
- editPuyData(item) {
- this.editData = item
- this.editPuy = true
- },
- handleSubmitEdit() {
- this.formEdit.validateFields((err, values) => {
- if (!err) {
- let params = {}
- params.userId = this.editData.userId
- params.paySalaryRatio = values.paySalaryRatio
- params.paySalary = values.paySalary
- this.getAction('/kuaishou/operationReport/updateUserSalary', params).then((res) => {
- if (res.success) {
- this.editPuy = false
- this.editData = null
- this.getTableMediaList()
- }
- })
- }
- })
- },
- getPersonByAccountId(value) {
- this.getAction('/kuaishou/operationReport/getAllOperatorList?mediaId=' + value).then((res) => {
- if (res.success) {
- this.personList = res.result
- }
- })
- },
- handleSubmitAdd() {
- this.form.validateFields((err, values) => {
- if (!err) {
- if (!!this.accountId) {
- let params = {}
- params.userId = this.userId
- params.startDate = moment(values.statDate[0]).format('YYYY-MM-DD')
- params.endDate = moment(values.statDate[1]).format('YYYY-MM-DD')
- params.accountId = this.accountId
- params.compMoney = values.compMoney
- params.mediaId = values.mediaId
- this.postDataAction('/kuaishou/operationReport/addAccountCompensation', params).then((res) => {
- console.log(res)
- if (res.success) {
- this.addCompensationVisible = false
- }
- })
- } else {
- this.$message.error('请选择项目')
- }
- }
- })
- },
- getAccountList(e) {
- console.log(e)
- this.options = []
- this.accountId = undefined
- this.userId = undefined
- this.personList = []
- this.getParticipateList(e.target.value)
- this.getPersonByAccountId(e.target.value)
- },
- addCompensation() {
- this.addCompensationVisible = true
- this.getParticipateList(2)
- this.getPersonByAccountId(2)
- },
- compensationShow() {
- this.compensationVisible = true
- this.getCompensationList()
- },
- handleCurreyCompensation(current, pageSize) {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipaginationCompensation.current = current
- this.ipaginationCompensation.pageSize = pageSize
- this.getCompensationList()
- },
- getCompensationList() {
- let params = {}
- params.userId = this.userInfo().id
- params.pageNo = this.ipaginationCompensation.current
- params.pageSize = this.ipaginationCompensation.pageSize
- this.compensationLoading = true
- this.postDataAction('/kuaishou/operationReport/queryAccountCompensation', params)
- .then((result) => {
- this.compensationLoading = false
- if (result.success) {
- this.compensationList = result.result.list || []
- this.ipaginationCompensation.total = result.result.total || 0
- } else {
- this.$message.error(result.message)
- }
- })
- .catch(() => {})
- },
- getParticipateList(type) {
- //我参与的
- // toutiaoParticipateList
- var params = {}
- params.userId = this.userInfo().id
- if (type == 1) {
- params.type = 'bytedance'
- } else if (type == 2) {
- params.type = 'kuaishou'
- }
- this.options = []
- this.postDataAction('/ctop/projectMember/participateListByMediaId', params).then((res) => {
- if (res.success) {
- this.options = res.result.map((item) => {
- return {
- id: item.projectId + 'projectId',
- label:
- item.projectName +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- item.advertiserName,
- children: item.accountList
- ? item.accountList.map((i) => {
- return {
- id: i.accountId,
- label:
- (i.userName.length == 2
- ? i.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
- : i.userName.length == 3
- ? i.userName + '\xa0\xa0\xa0\xa0'
- : i.userName) +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- i.accountId +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- i.authName,
- }
- })
- : [],
- }
- })
- }
- })
- },
- handleCurrey(current, pageSize) {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipagination.current = current
- this.ipagination.pageSize = pageSize
- this.getSaleList()
- },
- getAllOperatorListKuaishou() {
- return new Promise((resolve, reject) => {
- this.getAction('/kuaishou/operationReport/getAllOperatorList?mediaId=2').then((res) => {
- if (res.success) {
- resolve(res.result)
- } else {
- reject(res.message)
- }
- })
- })
- },
- getAllOperatorListToutiao() {
- return new Promise((resolve, reject) => {
- this.getAction('/kuaishou/operationReport/getAllOperatorList?mediaId=1').then((res) => {
- if (res.success) {
- resolve(res.result)
- } else {
- reject(res.message)
- }
- })
- })
- },
- handleAddSale() {
- this.ipagination.current = 1
- this.saleVisible = true
- this.getSaleList()
- Promise.all([this.getAllOperatorListKuaishou(), this.getAllOperatorListToutiao()])
- .then((res) => {
- this.allOperatorList = res[0].concat(res[1])
- })
- .catch((error) => {
- this.$error({
- title: '页面数据加载出错',
- content: '请刷新重试或联系管理员查询',
- })
- })
- },
- addSaleInfo() {
- this.saleInfoList.push({
- saleId: undefined,
- assistantId: undefined,
- edit: true,
- saleIdContent: undefined,
- assistantIdContent: undefined,
- })
- },
- //获取运营对应列表
- getSaleList() {
- let params = {}
- params.userId = this.userInfo().id
- params.pageNo = this.ipagination.current
- params.pageSize = this.ipagination.pageSize
- this.saleLoading = true
- this.getAction('/sys/operateRel/list', params)
- .then((result) => {
- this.saleLoading = false
- if (result.success) {
- this.saleInfoList =
- result.result.list.map((item) => {
- return {
- ...item,
- edit: false,
- saleIdContent: undefined,
- assistantIdContent: undefined,
- }
- }) || []
- this.ipagination.total = result.result.total || 0
- } else {
- this.$message.error(result.message)
- }
- })
- .catch(() => {})
- },
- //编辑运营对应人员按钮
- handleEdit(item) {
- item.edit = true
- item.saleIdContent = { key: item.operateId, label: item.operateName }
- item.assistantIdContent = { key: item.assistantId, label: item.assistantName }
- },
- //删除运营对应人员按钮
- handleDelete(item) {
- let params = {}
- params.assistantId = item.assistantId
- params.statMonth = item.time
- this.getAction('/sys/operateRel/delete', params).then((result) => {
- if (result.success) {
- // this.getSaleList()
- if (this.saleInfoList.length < 2 && this.ipagination.current > 1) {
- this.ipagination.current = this.ipagination.current - 1
- this.getSaleList()
- } else {
- this.getSaleList()
- }
- }
- })
- },
- //运营对应人员确定按钮
- handleSale(item) {
- if (item.saleIdContent && item.time) {
- let params = {}
- params.operateId = item.saleIdContent.key
- params.operateName = item.saleIdContent.label.replace(/[\r\n]/g, '').trim()
- params.assistantId = item.assistantIdContent.key
- params.assistantName = item.assistantIdContent.label.replace(/[\r\n]/g, '').trim()
- params.statMonth = moment(item.time).format('YYYY-MM')
- this.postDataAction('/sys/operateRel/add', params).then((result) => {
- if (result.success) {
- this.getSaleList()
- } else {
- this.$message.error(result.message)
- }
- })
- } else {
- this.$message.error('请选择人员和时间')
- }
- },
- //运营对应人员取消确定按钮
- handleSaleCancelOne(item) {
- if (item.assistantId) {
- item.edit = false
- item.time = moment(item.time).format('YYYY-MM')
- this.getSaleList()
- } else {
- this.saleInfoList.pop()
- }
- },
- ...mapGetters(['userInfo']),
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- getQuarter() {
- var today = new Date()
- var month = today.getMonth() + 1
- if (month >= 1 && month <= 3) {
- this.quarter = 1
- } else if (month >= 4 && month <= 6) {
- this.quarter = 2
- } else if (month >= 7 && month <= 9) {
- this.quarter = 3
- } else {
- this.quarter = 4
- }
- },
- getData() {
- this.spinning = true
- this.spinningChart = true
- this.active = 'cost'
- this.getProjectList()
- Promise.all([this.getChartMediaList()])
- .then((res) => {
- this.spinning = false
- this.resetLoading = false
- this.searchLoading = false
- this.spinningChart = false
- })
- .catch((error) => {
- this.spinning = false
- this.resetLoading = false
- this.searchLoading = false
- // this.$error({
- // title: '页面数据加载出错',
- // content: '请刷新重试或联系管理员查询'
- // });
- })
- },
- //导出报表
- exportExcel() {
- this.exportLoading = true
- var params = {}
- params.time = this.quarter
- params.mediaId = this.mediaDimension === 'a' ? 1 : 2
- params.role = this.post
- params.userId = this.person
- downFile('/kuaishou/operationReport/queryQuarterlyDataExcel', params).then((res) => {
- let blob = new Blob([res], {
- type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
- })
- let downloadElement = document.createElement('a')
- let href = window.URL.createObjectURL(blob) //创建下载的链接
- downloadElement.href = href
- downloadElement.download = '绩效报表.xlsx' //下载后文件名
- document.body.appendChild(downloadElement)
- downloadElement.click() //点击下载
- document.body.removeChild(downloadElement) //下载完成移除元素
- window.URL.revokeObjectURL(href) //释放掉blob对象
- this.exportLoading = false
- })
- },
- getTableMediaList(data) {
- this.designTopLoading = true
- var params = {}
- params.time = this.quarter
- params.mediaId = this.mediaDimension === 'a' ? 1 : 2
- params.role = this.post
- params.userId = this.person
- // params.pageSize = this.ipagination.pageSize
- // params.pageNo = this.ipagination.current
- if (this.mediaDimension === 'a') {
- this.showKf = false
- } else {
- this.showKf = true
- }
- if (this.quarter == 1) {
- this.oneFWCharge = 'Q1服务消耗'
- this.oneJLCharge = 'Q1激励消耗'
- this.oneKFCharge = 'Q1框返消耗'
- this.onetotalCharge = 'Q1总消耗'
- } else if (this.quarter == 2) {
- this.oneFWCharge = 'Q2服务消耗'
- this.oneJLCharge = 'Q2激励消耗'
- this.oneKFCharge = 'Q2框返消耗'
- this.onetotalCharge = 'Q2总消耗'
- } else if (this.quarter == 3) {
- this.oneFWCharge = 'Q3服务消耗'
- this.oneJLCharge = 'Q3激励消耗'
- this.oneKFCharge = 'Q3框返消耗'
- this.onetotalCharge = 'Q3总消耗'
- } else {
- this.oneFWCharge = 'Q4服务消耗'
- this.oneJLCharge = 'Q4激励消耗'
- this.oneKFCharge = 'Q4框返消耗'
- this.onetotalCharge = 'Q4总消耗'
- }
- this.getAction('/kuaishou/operationReport/queryQuarterlyData', params).then((res) => {
- this.resetLoading = false
- if (res.success) {
- this.designTopLoading = false
- this.designTopList = res.result || []
- // this.ipagination.total = res.result.total || 0
- } else {
- this.designTopLoading = false
- this.designTopList = []
- this.$message.error(res.message)
- }
- })
- },
- getProjectList() {
- this.specificLoading = true
- this.dataDimensionList = []
- this.dataDimensionValue = null
- this.person = null
- this.post = null
- return new Promise((resolve, reject) => {
- this.getAction(
- '/kuaishou/operationReport/getAllOperatorList?mediaId=' + (this.mediaDimension == 'a' ? 1 : 2)
- ).then((res) => {
- this.specificLoading = false
- if (res.success) {
- this.dataDimensionList = res.result
- resolve(res.result)
- } else {
- reject(res.message)
- }
- })
- })
- },
- sort(pagination, filters, sorter, { currentDataSource }) {
- this.ipagination.current = pagination.current
- this.ipagination.pageSize = pagination.pageSize
- // if (sorter.order) {
- // this.order = sorter.order ? sorter.order : 'descend'
- // this.target = sorter.columnKey
- // this.getTableMediaList({
- // target: sorter.columnKey,
- // order: sorter.order ? sorter.order : 'descend',
- // })
- // }
- },
- handleSubmit() {
- this.cancel()
- this.resetLoading = true
- this.ipagination.current = 1
- // this.getData()
- this.getTableMediaList()
- },
- resetSubmit() {
- this.getQuarter()
- this.mediaDimension = 'b'
- this.dataDimensionValue = null
- this.post = null
- this.person = null
- this.dataType = 0
- this.handleSubmit()
- },
- //获取echart的值
- initEchart(idName, optionName) {
- let that = this
- const chart = this.$refs[idName]
- if (chart) {
- echarts.init(document.getElementById(idName)).dispose()
- const myChart = echarts.init(document.getElementById(idName))
- myChart.setOption(optionName)
- window.addEventListener('resize', function () {
- that.clientWidth = document.documentElement.clientWidth - 224
- myChart.resize()
- })
- }
- },
- disabledDate(current) {
- return current && current >= moment()
- },
- },
- mounted() {
- this.clientWidth = document.documentElement.clientWidth - 224
- this.$nextTick(() => {
- this.getProjectList()
- this.getQuarter()
- setTimeout(() => {
- this.getTableMediaList()
- })
- })
- },
- activated() {
- this.$nextTick(() => {
- this.clientWidth = document.documentElement.clientWidth - 224
- })
- },
- }
- </script>
- <style lang="less" scoped>
- .materialReport {
- .material-report-card-two {
- width: 25%;
- ::v-deep * {
- border: 0;
- }
- }
- .material-report-card {
- // height: 220px;
- ::v-deep .ant-card-head {
- border: none;
- }
- ::v-deep .ant-card-body {
- padding-top: 5px;
- }
- .report-card-result {
- height: 88px;
- }
- .report-card-money {
- font-size: 30px;
- font-weight: bold;
- }
- .report-card-msg {
- display: flex;
- justify-content: space-between;
- font-size: 14px;
- margin-top: 20px;
- }
- .report-card-line {
- width: 100%;
- height: 1px;
- margin-top: 20px;
- background: #e8e8e8;
- }
- .report-card-radio {
- display: flex;
- justify-content: space-between;
- margin-top: 12px;
- font-size: 14px;
- }
- }
- .option {
- background: white;
- padding: 20px;
- display: flex;
- justify-content: flex-start;
- flex-wrap: wrap;
- .item {
- margin-right: 15px;
- margin-bottom: 15px;
- height: 32px;
- line-height: 32px;
- flex-shrink: 0;
- span {
- margin-right: 10px;
- }
- }
- }
- .echart {
- margin-top: 20px;
- padding: 0 20px 20px;
- background: white;
- .echart-header {
- padding: 20px 0;
- font-size: 15px;
- font-weight: 600;
- }
- }
- .tableBody {
- margin-top: 20px;
- }
- }
- </style>
- <style>
- .materialReport .card-containers {
- overflow: hidden !important;
- }
- .materialReport .card-containers > .ant-tabs-card > .ant-tabs-content {
- margin-top: -16px !important;
- }
- .materialReport .card-containers > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
- background: #fff !important;
- }
- .materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar {
- border-color: #fff !important;
- }
- .materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
- border-color: transparent !important;
- background: transparent !important;
- }
- .materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
- border-color: #fff !important;
- background: #fff !important;
- }
- </style>
|