operateList.vue 55 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376
  1. <style>
  2. .materialReport .chart-card-content {
  3. display: none !important;
  4. }
  5. </style>
  6. <style lang="less" scoped>
  7. ::v-deep .ant-table {
  8. //设置表格头部竖向滚动宽度
  9. ::v-deep .ant-table-header::-webkit-scrollbar {
  10. width: 4px;
  11. }
  12. //设置表格体滚动宽度
  13. ::v-deep .ant-table-body,
  14. .ant-table-body-inner {
  15. &::-webkit-scrollbar {
  16. width: 4px;
  17. height: 4px;
  18. }
  19. &::-webkit-scrollbar-thumb {
  20. border-radius: 4px;
  21. box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  22. background: #909090;
  23. }
  24. &::-webkit-scrollbar-track {
  25. box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  26. border-radius: 4px;
  27. background: #ededed;
  28. }
  29. }
  30. //解决固定列底部预留的空隙
  31. ::v-deep .ant-table-fixed-left,
  32. .ant-table-fixed-right {
  33. .ant-table-body-outer {
  34. margin-bottom: 0 !important;
  35. }
  36. }
  37. }
  38. </style>
  39. <style scoped>
  40. ::v-deep .ant-tabs .ant-tabs-large-bar .ant-tabs-tab {
  41. padding: 11px 16px;
  42. }
  43. .bg {
  44. width: 100%;
  45. height: 100%;
  46. }
  47. .bg:after {
  48. content: '';
  49. width: 110%;
  50. height: 110%;
  51. position: absolute;
  52. left: -5%;
  53. top: -5%;
  54. background: inherit;
  55. filter: blur(10px);
  56. z-index: 2;
  57. background: rgba(0, 0, 0, 0.8);
  58. }
  59. .top-ul-style {
  60. width: 100%;
  61. padding-left: 0;
  62. }
  63. .top-ul-style li {
  64. height: 100px;
  65. border: 1px solid #f2f2f2;
  66. margin-bottom: 5px;
  67. padding: 10px;
  68. display: flex;
  69. justify-content: space-between;
  70. }
  71. .li-cost {
  72. display: flex;
  73. flex-flow: column;
  74. justify-content: center;
  75. align-content: flex-end;
  76. }
  77. .li-cost span {
  78. font-size: 16px;
  79. font-weight: 500;
  80. min-width: 50px;
  81. text-align: right;
  82. }
  83. </style>
  84. <template>
  85. <div class="materialReport">
  86. <a-row :gutter="24">
  87. <a-col :xl="24">
  88. <div class="option" style="justify-content: space-between">
  89. <div class="option" style="padding: 0">
  90. <div class="item">
  91. <span>媒体</span>
  92. <a-radio-group v-model="mediaDimension" @change="getProjectList">
  93. <a-radio-button value="b">快手</a-radio-button>
  94. <a-radio-button value="a">头条</a-radio-button>
  95. </a-radio-group>
  96. </div>
  97. <div class="item">
  98. <span>人员</span>
  99. <a-select
  100. v-model="person"
  101. style="width: 150px; margin-left: 10px"
  102. :mode="'default'"
  103. :maxTagCount="2"
  104. :loading="specificLoading"
  105. :filterOption="filterOption"
  106. showSearch
  107. allowClear
  108. >
  109. <a-select-option
  110. v-for="(item, index) in dataDimensionList"
  111. :key="index + 1"
  112. :value="item.userId"
  113. >
  114. {{ item.userName }}
  115. </a-select-option>
  116. </a-select>
  117. </div>
  118. <div class="item">
  119. <span>岗位</span>
  120. <a-select
  121. v-model="post"
  122. style="width: 150px; margin-left: 10px"
  123. :mode="'default'"
  124. allowClear
  125. >
  126. <a-select-option value="operationAssistant"> 运营助理 </a-select-option>
  127. <a-select-option value="manager"> 运营经理 </a-select-option>
  128. <a-select-option value="operator"> 运营专员 </a-select-option>
  129. </a-select>
  130. </div>
  131. <div class="item">
  132. <span>季度</span>
  133. <a-select v-model="quarter" style="width: 150px; margin-left: 10px" :mode="'default'">
  134. <a-select-option :value="1"> 第一季度 </a-select-option>
  135. <a-select-option :value="2"> 第二季度 </a-select-option>
  136. <a-select-option :value="3"> 第三季度 </a-select-option>
  137. <a-select-option :value="4"> 第四季度 </a-select-option>
  138. </a-select>
  139. </div>
  140. <!-- <div class="item">
  141. <span>类型</span>
  142. <a-select
  143. v-model="dataType"
  144. style="width: 300px; margin-left: 10px"
  145. :mode="'default'"
  146. allowClear
  147. >
  148. <a-select-option :value="0"> 消耗 </a-select-option>
  149. <a-select-option :value="1"> 在投客户数-项目 </a-select-option>
  150. <a-select-option :value="2"> 在投客户数-广告主主体 </a-select-option>
  151. <a-select-option :value="3"> 基建数 </a-select-option>
  152. </a-select>
  153. </div> -->
  154. </div>
  155. <div class="item" style="float: right">
  156. <a-button :loading="resetLoading" type="primary" @click="handleSubmit"> 搜索 </a-button>
  157. <a-button
  158. :disabled="spinning"
  159. :loading="resetLoading"
  160. style="margin-left: 15px"
  161. @click="resetSubmit"
  162. >
  163. 重置
  164. </a-button>
  165. </div>
  166. </div>
  167. </a-col>
  168. </a-row>
  169. <a-row :gutter="24" style="margin-top: 20px" id="getWidth">
  170. <a-col :xl="24">
  171. <a-card style="width: 100%" title="运营数据">
  172. <a-button type="primary" @click="handleAddSale" style="margin-bottom: 15px">
  173. 新增运营对应关系
  174. </a-button>
  175. <a-button type="primary" @click="addCompensation" style="margin: 0 15px 15px"> 新增赔付 </a-button>
  176. <a-button type="primary" @click="compensationShow" style="margin-bottom: 15px"> 赔付列表 </a-button>
  177. <a-button type="primary" class="export" @click="exportExcel" :loading="exportLoading" style="margin-bottom: 15px;margin-left:15px"
  178. >导出报表</a-button
  179. >
  180. <!-- :columns="columns" -->
  181. <a-table
  182. size="middle"
  183. :dataSource="designTopList"
  184. bordered
  185. id="outTable"
  186. :pagination="false"
  187. :loading="designTopLoading"
  188. ref="accountTable"
  189. @change="sort"
  190. :scroll="{ x: scrollX }"
  191. >
  192. <a-table-column title="运营" data-index="userName" :width="120" align="center" fixed="left">
  193. </a-table-column>
  194. <a-table-column title="岗位" data-index="roleName" :width="120" align="center" fixed="left">
  195. </a-table-column>
  196. <a-table-column title="晋升时间" data-index="upTime" align="center">
  197. <template slot-scope="t, r, i">
  198. <span>{{ !!t ? t : '-' }}</span>
  199. </template>
  200. </a-table-column>
  201. <a-table-column title="离职时间" data-index="quitTime" align="center">
  202. <template slot-scope="t, r, i">
  203. <span>{{ !!t ? t : '-' }}</span>
  204. </template>
  205. </a-table-column>
  206. <a-table-column :title="onetotalCharge" data-index="totalCharge" align="center">
  207. </a-table-column>
  208. <a-table-column :title="oneKFCharge" data-index="KFCharge" align="center" v-if="showKf">
  209. </a-table-column>
  210. <a-table-column :title="oneFWCharge" data-index="FWCharge" align="center"> </a-table-column>
  211. <a-table-column
  212. title="框返消耗是否满足30W"
  213. data-index="KFChargeIsOk"
  214. align="center"
  215. v-if="showKf"
  216. >
  217. </a-table-column>
  218. <a-table-column title="管理消耗" data-index="manageCharge" align="center"> </a-table-column>
  219. <a-table-column title="助理消耗" data-index="assistantCharge" align="center"> </a-table-column>
  220. <a-table-column title="服务消耗提成" data-index="FWChargeCommission" align="center">
  221. </a-table-column>
  222. <a-table-column
  223. title="框返消耗提成"
  224. data-index="KFChargeCommission"
  225. align="center"
  226. v-if="showKf"
  227. >
  228. </a-table-column>
  229. <a-table-column title="管理消耗提成" data-index="manageChargeCommission" align="center">
  230. </a-table-column>
  231. <a-table-column title="运营赔付扣罚比例" data-index="operateCompensation" align="center">
  232. </a-table-column>
  233. <a-table-column title="经理/总监赔付扣罚比例" data-index="manageCompensation" align="center">
  234. </a-table-column>
  235. <a-table-column title="是否达标" data-index="FWChargeIsOk" align="center"> </a-table-column>
  236. <a-table-column title="扣减金额" data-index="compMoney" align="center"> </a-table-column>
  237. <a-table-column title="是否符合发放" data-index="paySalary" align="center"> </a-table-column>
  238. <a-table-column title="发放金额" data-index="putMoney" align="center"> </a-table-column>
  239. <a-table-column title="发放系数" data-index="paySalaryRatio" align="center">
  240. <template slot-scope="t, r, i">
  241. <span>{{ !!t ? t : '-' }}</span>
  242. </template>
  243. </a-table-column>
  244. <a-table-column title="最终发放金额" data-index="finalPutMoney" align="center">
  245. <template slot-scope="t, r, i">
  246. <span>{{ !!t ? t : '-' }}</span>
  247. </template>
  248. </a-table-column>
  249. <a-table-column title="操作" data-index="action" align="center">
  250. <template slot-scope="t, r, i">
  251. <a @click="editPuyData(r)">修改</a>
  252. </template>
  253. </a-table-column>
  254. </a-table>
  255. </a-card>
  256. </a-col>
  257. </a-row>
  258. <a-modal
  259. v-if="saleVisible"
  260. title="运营管理"
  261. :visible="saleVisible"
  262. @cancel="saleVisible = false"
  263. :width="1000"
  264. :footer="null"
  265. >
  266. <a-button type="primary" style="margin-bottom: 10px" id="mybtn" @click="addSaleInfo">新增</a-button>
  267. <br />
  268. 设定对应关系后,该运营助理的消耗在结算绩效时,会根据对应人员进行统计
  269. <a-table
  270. :columns="saleInfoColumns"
  271. :data-source="saleInfoList"
  272. bordered
  273. tableLayout="auto"
  274. :pagination="false"
  275. :loading="saleLoading"
  276. style="word-break: break-all"
  277. >
  278. <div slot="operateName" slot-scope="text, records">
  279. <span v-if="!records.edit">{{ text }}</span>
  280. <a-select
  281. v-else
  282. show-search
  283. v-model="records.saleIdContent"
  284. placeholder="请选择运营"
  285. option-filter-prop="children"
  286. style="width: 200px"
  287. :filter-option="filterOption"
  288. :labelInValue="true"
  289. >
  290. <a-select-option
  291. v-for="(item, index) in dataDimensionList"
  292. :key="index"
  293. :value="item.userId"
  294. :disabled="
  295. records.assistantIdContent ? records.assistantIdContent.key == item.userId : false
  296. "
  297. >
  298. {{ item.userName }}
  299. </a-select-option>
  300. </a-select>
  301. </div>
  302. <div slot="assistantName" slot-scope="text, records">
  303. <span v-if="!records.edit">{{ text }}</span>
  304. <a-select
  305. v-else
  306. show-search
  307. v-model="records.assistantIdContent"
  308. placeholder="请选择运营助理"
  309. option-filter-prop="children"
  310. style="width: 200px"
  311. :filter-option="filterOption"
  312. :labelInValue="true"
  313. >
  314. <a-select-option
  315. v-for="(item, index) in dataDimensionList"
  316. :key="index"
  317. :value="item.userId"
  318. :disabled="records.saleIdContent ? records.saleIdContent.key == item.userId : false"
  319. >
  320. {{ item.userName }}
  321. </a-select-option>
  322. </a-select>
  323. </div>
  324. <div slot="time" slot-scope="text, records">
  325. <span v-if="!records.edit">{{ text }}</span>
  326. <a-month-picker v-model="records.time" v-else />
  327. </div>
  328. <div slot="action" slot-scope="text, records">
  329. <div v-if="!records.edit">
  330. <a @click="handleEdit(records)">编辑</a>
  331. <a-divider type="vertical" />
  332. <a-popconfirm title="是否确认删除?" @confirm="() => handleDelete(records)">
  333. <a>删除</a>
  334. </a-popconfirm>
  335. </div>
  336. <div v-else>
  337. <a-button type="primary" @click="handleSale(records)">保存</a-button>
  338. <a-button style="margin-left: 8px" @click="handleSaleCancelOne(records)">取消</a-button>
  339. </div>
  340. </div>
  341. </a-table>
  342. <a-pagination
  343. style="display: flex; justify-content: flex-end; margin-top: 10px"
  344. :total="ipagination.total"
  345. :show-total="(total) => `共 ${ipagination.total} 条`"
  346. size="small"
  347. @change="handleCurrey"
  348. />
  349. </a-modal>
  350. <a-modal
  351. v-if="compensationVisible"
  352. title="赔付记录"
  353. :visible="compensationVisible"
  354. @cancel="compensationVisible = false"
  355. :width="1000"
  356. :footer="null"
  357. >
  358. <a-table
  359. :data-source="compensationList"
  360. bordered
  361. tableLayout="auto"
  362. :pagination="false"
  363. :loading="compensationLoading"
  364. style="word-break: break-all"
  365. >
  366. <a-table-column title="账户ID" data-index="accountId" :width="150" align="center"> </a-table-column>
  367. <a-table-column title="账户名称" data-index="auth_name" :width="150" align="center"> </a-table-column>
  368. <a-table-column title="运营" data-index="realname" align="center"> </a-table-column>
  369. <a-table-column title="媒体" data-index="mediaId" align="center">
  370. <template slot-scope="t, r, i">
  371. <span>{{ t == 1 ? '头条' : '快手' }}</span>
  372. </template>
  373. </a-table-column>
  374. <a-table-column title="日期" data-index="startDate" align="center">
  375. <template slot-scope="t, r, i">
  376. <span>{{ t + '~' + r.endDate }}</span>
  377. </template>
  378. </a-table-column>
  379. <a-table-column title="赔付金额" data-index="compMoney" align="center"> </a-table-column>
  380. </a-table>
  381. <a-pagination
  382. style="display: flex; justify-content: flex-end; margin-top: 10px"
  383. :total="ipaginationCompensation.total"
  384. :show-total="(total) => `共 ${ipaginationCompensation.total} 条`"
  385. size="small"
  386. @change="handleCurreyCompensation"
  387. />
  388. </a-modal>
  389. <a-modal
  390. v-if="addCompensationVisible"
  391. title="新增赔付"
  392. :visible="addCompensationVisible"
  393. @cancel="
  394. addCompensationVisible = false
  395. accountId = undefined
  396. userId = undefined
  397. "
  398. :width="1000"
  399. @ok="handleSubmitAdd"
  400. >
  401. <!-- @submit="handleQueryList" -->
  402. <a-form
  403. :form="form"
  404. :selfUpdate="true"
  405. :labelCol="{ span: 5 }"
  406. :wrapperCol="{ span: 19 }"
  407. v-if="addCompensationVisible"
  408. >
  409. <a-row :gutter="24">
  410. <a-col :md="16" :sm="16" :xxl="16">
  411. <a-form-item label="媒体">
  412. <a-radio-group
  413. v-decorator="[
  414. 'mediaId',
  415. {
  416. rules: [{ required: true, message: '请选择项目!' }],
  417. initialValue: 2,
  418. },
  419. ]"
  420. @change="getAccountList"
  421. >
  422. <a-radio-button :value="2">快手</a-radio-button>
  423. <a-radio-button :value="1">头条</a-radio-button>
  424. </a-radio-group>
  425. </a-form-item>
  426. </a-col>
  427. </a-row>
  428. <a-row :gutter="24">
  429. <a-col :md="16" :sm="16" :xxl="16">
  430. <a-form-item label="账户名称">
  431. <treeselect
  432. :multiple="false"
  433. :disable-branch-nodes="true"
  434. :disable-fuzzy-matching="true"
  435. :options="options"
  436. placeholder="请选择项目以及账户"
  437. v-model="accountId"
  438. style="width: 100%"
  439. @change="getPersonByAccountId"
  440. />
  441. </a-form-item>
  442. </a-col>
  443. </a-row>
  444. <a-row :gutter="24">
  445. <a-col :md="16" :sm="16" :xxl="16">
  446. <a-form-item label="运营">
  447. <a-select
  448. v-model="userId"
  449. style="width: 150px"
  450. :mode="'default'"
  451. :filterOption="filterOption"
  452. showSearch
  453. allowClear
  454. >
  455. <a-select-option
  456. v-for="(item, index) in personList"
  457. :key="index + 1"
  458. :value="item.userId"
  459. >
  460. {{ item.userName }}
  461. </a-select-option>
  462. </a-select>
  463. </a-form-item>
  464. </a-col>
  465. </a-row>
  466. <a-row :gutter="24">
  467. <a-col :md="16" :sm="16" :xxl="16">
  468. <a-form-item label="日期">
  469. <a-range-picker
  470. v-decorator="[
  471. 'statDate',
  472. {
  473. rules: [{ required: true, message: '请选择日期!' }],
  474. initialValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
  475. },
  476. ]"
  477. :ranges="dateRanges"
  478. :disabled-date="disabledDate"
  479. style="width: 250px"
  480. />
  481. </a-form-item>
  482. </a-col>
  483. </a-row>
  484. <a-row :gutter="24">
  485. <a-col :md="16" :sm="16" :xxl="16">
  486. <a-form-item label="赔付金额">
  487. <a-input-number
  488. v-decorator="[
  489. 'compMoney',
  490. {
  491. rules: [{ required: true, message: '赔付金额必填!' }],
  492. },
  493. ]"
  494. :min="0"
  495. :step="0.1"
  496. style="width: 250px"
  497. />
  498. </a-form-item>
  499. </a-col>
  500. </a-row>
  501. </a-form>
  502. </a-modal>
  503. <a-modal
  504. v-if="editPuy"
  505. title="修改发放系数和是否符合发放"
  506. :visible="editPuy"
  507. @cancel="editPuy = false"
  508. :width="1000"
  509. @ok="handleSubmitEdit"
  510. >
  511. <!-- @submit="handleQueryList" -->
  512. <a-form
  513. :form="formEdit"
  514. :selfUpdate="true"
  515. :labelCol="{ span: 5 }"
  516. :wrapperCol="{ span: 19 }"
  517. v-if="editPuy && !!editData"
  518. >
  519. <a-row :gutter="24">
  520. <a-col :md="16" :sm="16" :xxl="16">
  521. <a-form-item label="人员">
  522. {{ editData.userName }}
  523. </a-form-item>
  524. </a-col>
  525. </a-row>
  526. <a-row :gutter="24">
  527. <a-col :md="16" :sm="16" :xxl="16">
  528. <a-form-item label="是否发放">
  529. <a-radio-group
  530. v-decorator="[
  531. 'paySalary',
  532. {
  533. rules: [{ required: true, message: '请选择项目!' }],
  534. initialValue: editData.paySalary,
  535. },
  536. ]"
  537. @change="getAccountList"
  538. >
  539. <a-radio-button value="是">是</a-radio-button>
  540. <a-radio-button value="否">否</a-radio-button>
  541. </a-radio-group>
  542. </a-form-item>
  543. </a-col>
  544. </a-row>
  545. <a-row :gutter="24">
  546. <a-col :md="16" :sm="16" :xxl="16">
  547. <a-form-item label="发放系数">
  548. <a-input-number
  549. v-decorator="[
  550. 'paySalaryRatio',
  551. {
  552. rules: [{ required: true, message: '发放系数必填!' }],
  553. initialValue: editData.paySalaryRatio,
  554. },
  555. ]"
  556. :min="0"
  557. :max="1"
  558. :step="0.1"
  559. style="width: 250px"
  560. />
  561. </a-form-item>
  562. </a-col>
  563. </a-row>
  564. </a-form>
  565. </a-modal>
  566. </div>
  567. </template>
  568. <script>
  569. import moment from 'moment'
  570. import YoutTable from '@/components/youtTable/YoutTable'
  571. import ChartCard from '@/components/ChartCard'
  572. import Trend from '@/components/Trend'
  573. import { mapGetters } from 'vuex'
  574. import Treeselect from '@riophae/vue-treeselect' // 引用树组件
  575. import '@riophae/vue-treeselect/dist/vue-treeselect.css' //树组件样式
  576. import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' //树组件参数
  577. import { downFile } from '@/api/manage'
  578. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  579. const columnsFixd = [
  580. {
  581. title: '广告组名称',
  582. dataIndex: 'unitName',
  583. align: 'center',
  584. scopedSlots: { customRender: 'unitName' },
  585. },
  586. {
  587. title: '封面曝光数',
  588. dataIndex: 'photoShow',
  589. align: 'center',
  590. },
  591. {
  592. title: '封面点击数',
  593. dataIndex: 'photoClick',
  594. align: 'center',
  595. scopedSlots: { customRender: 'photoClick' },
  596. },
  597. {
  598. title: '消耗',
  599. dataIndex: 'cost',
  600. align: 'center',
  601. },
  602. ]
  603. const ksColumns = []
  604. export default {
  605. components: {
  606. YoutTable,
  607. ChartCard,
  608. Trend,
  609. Treeselect,
  610. },
  611. data() {
  612. return {
  613. exportLoading:false,
  614. editPuy: false,
  615. editData: null,
  616. formEdit: this.$form.createForm(this),
  617. accountId: undefined,
  618. addCompensationVisible: false,
  619. form: this.$form.createForm(this),
  620. compensationLoading: false,
  621. compensationList: [],
  622. compensationVisible: false,
  623. saleLoading: false,
  624. saleVisible: false, //运营管理
  625. saleInfoList: [], // 运营关系列表
  626. allOperatorList: [],
  627. saleInfoColumns: [
  628. {
  629. title: '运营/运营经理',
  630. dataIndex: 'operateName',
  631. align: 'center',
  632. key: 'saleName',
  633. scopedSlots: { customRender: 'operateName' },
  634. },
  635. {
  636. title: '运营助理',
  637. dataIndex: 'assistantName',
  638. align: 'center',
  639. scopedSlots: { customRender: 'assistantName' },
  640. },
  641. {
  642. title: '时间',
  643. dataIndex: 'time',
  644. align: 'center',
  645. scopedSlots: { customRender: 'time' },
  646. },
  647. {
  648. title: '操作',
  649. dataIndex: 'action',
  650. align: 'center',
  651. scopedSlots: { customRender: 'action' },
  652. },
  653. ],
  654. visible: false, //自定义页面的打开
  655. listNum: [],
  656. spinningMaterialGroupData: false,
  657. scrollX: 2500,
  658. ipagination: {
  659. current: 1,
  660. pageSize: 10,
  661. // pageSizeOptions: ['10', '20', '30'],
  662. showTotal: (total, range) => {
  663. return range[0] + '-' + range[1] + ' 共' + total + '条'
  664. },
  665. showQuickJumper: true,
  666. // showSizeChanger: true,
  667. pageSizeOptions: ['10', '30', '50'],
  668. total: 0,
  669. onChange: (current, pageSize) => {
  670. // 切换分页时的回调,
  671. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  672. this.ipagination.current = current
  673. this.ipagination.pageSize = pageSize
  674. },
  675. },
  676. ipaginationCompensation: {
  677. current: 1,
  678. pageSize: 10,
  679. // pageSizeOptions: ['10', '20', '30'],
  680. showTotal: (total, range) => {
  681. return range[0] + '-' + range[1] + ' 共' + total + '条'
  682. },
  683. showQuickJumper: true,
  684. // showSizeChanger: true,
  685. pageSizeOptions: ['10', '30', '50'],
  686. total: 0,
  687. onChange: (current, pageSize) => {
  688. // 切换分页时的回调,
  689. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  690. this.ipaginationCompensation.current = current
  691. this.ipaginationCompensation.pageSize = pageSize
  692. },
  693. },
  694. tabListNoTitle: [
  695. {
  696. key: '2',
  697. tab: '快手',
  698. },
  699. {
  700. key: '1',
  701. tab: '头条',
  702. },
  703. ],
  704. noTitleKey: '2',
  705. active: 'cost',
  706. groupDisabled: false,
  707. timeShowEchartsStatus: true,
  708. signatureStatus: false,
  709. materialGroupData: {},
  710. accountIndexList: {},
  711. popularVideoList: {},
  712. materialRankValue: 0,
  713. designRankingValue: 1,
  714. designTopLoading: false,
  715. noImg: require('@/assets/noImg.png'),
  716. visibleVideo: false,
  717. videoUrlShow: '',
  718. cost: '0',
  719. spinning: false,
  720. spinningChart: false,
  721. spinningChartPie: false,
  722. loading: false,
  723. chartList: [],
  724. videoList: [],
  725. designTopList: [],
  726. target: '',
  727. order: 'descend',
  728. columns: [...columnsFixd, ...ksColumns], // table的表头
  729. columnsFixd,
  730. dateRanges: {
  731. 今天: [moment(), moment()],
  732. 近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
  733. 近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
  734. // 近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
  735. // 近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
  736. // 近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
  737. // 近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')],
  738. },
  739. dateValue: [moment(), moment()],
  740. videoType: 0,
  741. labelType: 0,
  742. dataDimension: 'a',
  743. mediaDimension: 'b',
  744. showKf: true,
  745. projectId: null,
  746. dataDimensionValue: null,
  747. quarter: null,
  748. person: null,
  749. post: null,
  750. operationTarget: 'charge',
  751. dataDimensionList: [],
  752. specificLoading: false,
  753. dataType: 0,
  754. accountIdKuaishou: undefined,
  755. accountIdToutiao: undefined,
  756. category: 0,
  757. clientWidth: 0,
  758. resetLoading: false,
  759. searchLoading: false,
  760. spinningPopularVideoList: false,
  761. oneFWCharge: '',
  762. oneJLCharge: '',
  763. oneKFCharge: '',
  764. onetotalCharge: '',
  765. options: [],
  766. personList: [],
  767. userId: undefined,
  768. }
  769. },
  770. watch: {
  771. visibleVideo(n, o) {
  772. if (!n) {
  773. stopOtherVideo()
  774. closeAllVideoFun()
  775. }
  776. },
  777. accountId(n, o) {
  778. if (!!n) {
  779. this.getAction('kuaishou/operationReport/getAccountUser?accountId=' + n).then((res) => {
  780. if (res.success) {
  781. this.userId = res.result.user_id
  782. }
  783. })
  784. } else {
  785. }
  786. },
  787. },
  788. methods: {
  789. moment,
  790. editPuyData(item) {
  791. this.editData = item
  792. this.editPuy = true
  793. },
  794. handleSubmitEdit() {
  795. this.formEdit.validateFields((err, values) => {
  796. if (!err) {
  797. let params = {}
  798. params.userId = this.editData.userId
  799. params.paySalaryRatio = values.paySalaryRatio
  800. params.paySalary = values.paySalary
  801. this.getAction('/kuaishou/operationReport/updateUserSalary', params).then((res) => {
  802. if (res.success) {
  803. this.editPuy = false
  804. this.editData = null
  805. this.getTableMediaList()
  806. }
  807. })
  808. }
  809. })
  810. },
  811. getPersonByAccountId(value) {
  812. this.getAction('/kuaishou/operationReport/getAllOperatorList?mediaId=' + value).then((res) => {
  813. if (res.success) {
  814. this.personList = res.result
  815. }
  816. })
  817. },
  818. handleSubmitAdd() {
  819. this.form.validateFields((err, values) => {
  820. if (!err) {
  821. if (!!this.accountId) {
  822. let params = {}
  823. params.userId = this.userId
  824. params.startDate = moment(values.statDate[0]).format('YYYY-MM-DD')
  825. params.endDate = moment(values.statDate[1]).format('YYYY-MM-DD')
  826. params.accountId = this.accountId
  827. params.compMoney = values.compMoney
  828. params.mediaId = values.mediaId
  829. this.postDataAction('/kuaishou/operationReport/addAccountCompensation', params).then((res) => {
  830. console.log(res)
  831. if (res.success) {
  832. this.addCompensationVisible = false
  833. }
  834. })
  835. } else {
  836. this.$message.error('请选择项目')
  837. }
  838. }
  839. })
  840. },
  841. getAccountList(e) {
  842. console.log(e)
  843. this.options = []
  844. this.accountId = undefined
  845. this.userId = undefined
  846. this.personList = []
  847. this.getParticipateList(e.target.value)
  848. this.getPersonByAccountId(e.target.value)
  849. },
  850. addCompensation() {
  851. this.addCompensationVisible = true
  852. this.getParticipateList(2)
  853. this.getPersonByAccountId(2)
  854. },
  855. compensationShow() {
  856. this.compensationVisible = true
  857. this.getCompensationList()
  858. },
  859. handleCurreyCompensation(current, pageSize) {
  860. // 切换分页时的回调,
  861. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  862. this.ipaginationCompensation.current = current
  863. this.ipaginationCompensation.pageSize = pageSize
  864. this.getCompensationList()
  865. },
  866. getCompensationList() {
  867. let params = {}
  868. params.userId = this.userInfo().id
  869. params.pageNo = this.ipaginationCompensation.current
  870. params.pageSize = this.ipaginationCompensation.pageSize
  871. this.compensationLoading = true
  872. this.postDataAction('/kuaishou/operationReport/queryAccountCompensation', params)
  873. .then((result) => {
  874. this.compensationLoading = false
  875. if (result.success) {
  876. this.compensationList = result.result.list || []
  877. this.ipaginationCompensation.total = result.result.total || 0
  878. } else {
  879. this.$message.error(result.message)
  880. }
  881. })
  882. .catch(() => {})
  883. },
  884. getParticipateList(type) {
  885. //我参与的
  886. // toutiaoParticipateList
  887. var params = {}
  888. params.userId = this.userInfo().id
  889. if (type == 1) {
  890. params.type = 'bytedance'
  891. } else if (type == 2) {
  892. params.type = 'kuaishou'
  893. }
  894. this.options = []
  895. this.postDataAction('/ctop/projectMember/participateListByMediaId', params).then((res) => {
  896. if (res.success) {
  897. this.options = res.result.map((item) => {
  898. return {
  899. id: item.projectId + 'projectId',
  900. label:
  901. item.projectName +
  902. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  903. item.advertiserName,
  904. children: item.accountList
  905. ? item.accountList.map((i) => {
  906. return {
  907. id: i.accountId,
  908. label:
  909. (i.userName.length == 2
  910. ? i.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
  911. : i.userName.length == 3
  912. ? i.userName + '\xa0\xa0\xa0\xa0'
  913. : i.userName) +
  914. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  915. i.accountId +
  916. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  917. i.authName,
  918. }
  919. })
  920. : [],
  921. }
  922. })
  923. }
  924. })
  925. },
  926. handleCurrey(current, pageSize) {
  927. // 切换分页时的回调,
  928. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  929. this.ipagination.current = current
  930. this.ipagination.pageSize = pageSize
  931. this.getSaleList()
  932. },
  933. getAllOperatorListKuaishou() {
  934. return new Promise((resolve, reject) => {
  935. this.getAction('/kuaishou/operationReport/getAllOperatorList?mediaId=2').then((res) => {
  936. if (res.success) {
  937. resolve(res.result)
  938. } else {
  939. reject(res.message)
  940. }
  941. })
  942. })
  943. },
  944. getAllOperatorListToutiao() {
  945. return new Promise((resolve, reject) => {
  946. this.getAction('/kuaishou/operationReport/getAllOperatorList?mediaId=1').then((res) => {
  947. if (res.success) {
  948. resolve(res.result)
  949. } else {
  950. reject(res.message)
  951. }
  952. })
  953. })
  954. },
  955. handleAddSale() {
  956. this.ipagination.current = 1
  957. this.saleVisible = true
  958. this.getSaleList()
  959. Promise.all([this.getAllOperatorListKuaishou(), this.getAllOperatorListToutiao()])
  960. .then((res) => {
  961. this.allOperatorList = res[0].concat(res[1])
  962. })
  963. .catch((error) => {
  964. this.$error({
  965. title: '页面数据加载出错',
  966. content: '请刷新重试或联系管理员查询',
  967. })
  968. })
  969. },
  970. addSaleInfo() {
  971. this.saleInfoList.push({
  972. saleId: undefined,
  973. assistantId: undefined,
  974. edit: true,
  975. saleIdContent: undefined,
  976. assistantIdContent: undefined,
  977. })
  978. },
  979. //获取运营对应列表
  980. getSaleList() {
  981. let params = {}
  982. params.userId = this.userInfo().id
  983. params.pageNo = this.ipagination.current
  984. params.pageSize = this.ipagination.pageSize
  985. this.saleLoading = true
  986. this.getAction('/sys/operateRel/list', params)
  987. .then((result) => {
  988. this.saleLoading = false
  989. if (result.success) {
  990. this.saleInfoList =
  991. result.result.list.map((item) => {
  992. return {
  993. ...item,
  994. edit: false,
  995. saleIdContent: undefined,
  996. assistantIdContent: undefined,
  997. }
  998. }) || []
  999. this.ipagination.total = result.result.total || 0
  1000. } else {
  1001. this.$message.error(result.message)
  1002. }
  1003. })
  1004. .catch(() => {})
  1005. },
  1006. //编辑运营对应人员按钮
  1007. handleEdit(item) {
  1008. item.edit = true
  1009. item.saleIdContent = { key: item.operateId, label: item.operateName }
  1010. item.assistantIdContent = { key: item.assistantId, label: item.assistantName }
  1011. },
  1012. //删除运营对应人员按钮
  1013. handleDelete(item) {
  1014. let params = {}
  1015. params.assistantId = item.assistantId
  1016. params.statMonth = item.time
  1017. this.getAction('/sys/operateRel/delete', params).then((result) => {
  1018. if (result.success) {
  1019. // this.getSaleList()
  1020. if (this.saleInfoList.length < 2 && this.ipagination.current > 1) {
  1021. this.ipagination.current = this.ipagination.current - 1
  1022. this.getSaleList()
  1023. } else {
  1024. this.getSaleList()
  1025. }
  1026. }
  1027. })
  1028. },
  1029. //运营对应人员确定按钮
  1030. handleSale(item) {
  1031. if (item.saleIdContent && item.time) {
  1032. let params = {}
  1033. params.operateId = item.saleIdContent.key
  1034. params.operateName = item.saleIdContent.label.replace(/[\r\n]/g, '').trim()
  1035. params.assistantId = item.assistantIdContent.key
  1036. params.assistantName = item.assistantIdContent.label.replace(/[\r\n]/g, '').trim()
  1037. params.statMonth = moment(item.time).format('YYYY-MM')
  1038. this.postDataAction('/sys/operateRel/add', params).then((result) => {
  1039. if (result.success) {
  1040. this.getSaleList()
  1041. } else {
  1042. this.$message.error(result.message)
  1043. }
  1044. })
  1045. } else {
  1046. this.$message.error('请选择人员和时间')
  1047. }
  1048. },
  1049. //运营对应人员取消确定按钮
  1050. handleSaleCancelOne(item) {
  1051. if (item.assistantId) {
  1052. item.edit = false
  1053. item.time = moment(item.time).format('YYYY-MM')
  1054. this.getSaleList()
  1055. } else {
  1056. this.saleInfoList.pop()
  1057. }
  1058. },
  1059. ...mapGetters(['userInfo']),
  1060. filterOption(input, option) {
  1061. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  1062. },
  1063. getQuarter() {
  1064. var today = new Date()
  1065. var month = today.getMonth() + 1
  1066. if (month >= 1 && month <= 3) {
  1067. this.quarter = 1
  1068. } else if (month >= 4 && month <= 6) {
  1069. this.quarter = 2
  1070. } else if (month >= 7 && month <= 9) {
  1071. this.quarter = 3
  1072. } else {
  1073. this.quarter = 4
  1074. }
  1075. },
  1076. getData() {
  1077. this.spinning = true
  1078. this.spinningChart = true
  1079. this.active = 'cost'
  1080. this.getProjectList()
  1081. Promise.all([this.getChartMediaList()])
  1082. .then((res) => {
  1083. this.spinning = false
  1084. this.resetLoading = false
  1085. this.searchLoading = false
  1086. this.spinningChart = false
  1087. })
  1088. .catch((error) => {
  1089. this.spinning = false
  1090. this.resetLoading = false
  1091. this.searchLoading = false
  1092. // this.$error({
  1093. // title: '页面数据加载出错',
  1094. // content: '请刷新重试或联系管理员查询'
  1095. // });
  1096. })
  1097. },
  1098. //导出报表
  1099. exportExcel() {
  1100. this.exportLoading = true
  1101. var params = {}
  1102. params.time = this.quarter
  1103. params.mediaId = this.mediaDimension === 'a' ? 1 : 2
  1104. params.role = this.post
  1105. params.userId = this.person
  1106. downFile('/kuaishou/operationReport/queryQuarterlyDataExcel', params).then((res) => {
  1107. let blob = new Blob([res], {
  1108. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  1109. })
  1110. let downloadElement = document.createElement('a')
  1111. let href = window.URL.createObjectURL(blob) //创建下载的链接
  1112. downloadElement.href = href
  1113. downloadElement.download = '绩效报表.xlsx' //下载后文件名
  1114. document.body.appendChild(downloadElement)
  1115. downloadElement.click() //点击下载
  1116. document.body.removeChild(downloadElement) //下载完成移除元素
  1117. window.URL.revokeObjectURL(href) //释放掉blob对象
  1118. this.exportLoading = false
  1119. })
  1120. },
  1121. getTableMediaList(data) {
  1122. this.designTopLoading = true
  1123. var params = {}
  1124. params.time = this.quarter
  1125. params.mediaId = this.mediaDimension === 'a' ? 1 : 2
  1126. params.role = this.post
  1127. params.userId = this.person
  1128. // params.pageSize = this.ipagination.pageSize
  1129. // params.pageNo = this.ipagination.current
  1130. if (this.mediaDimension === 'a') {
  1131. this.showKf = false
  1132. } else {
  1133. this.showKf = true
  1134. }
  1135. if (this.quarter == 1) {
  1136. this.oneFWCharge = 'Q1服务消耗'
  1137. this.oneJLCharge = 'Q1激励消耗'
  1138. this.oneKFCharge = 'Q1框返消耗'
  1139. this.onetotalCharge = 'Q1总消耗'
  1140. } else if (this.quarter == 2) {
  1141. this.oneFWCharge = 'Q2服务消耗'
  1142. this.oneJLCharge = 'Q2激励消耗'
  1143. this.oneKFCharge = 'Q2框返消耗'
  1144. this.onetotalCharge = 'Q2总消耗'
  1145. } else if (this.quarter == 3) {
  1146. this.oneFWCharge = 'Q3服务消耗'
  1147. this.oneJLCharge = 'Q3激励消耗'
  1148. this.oneKFCharge = 'Q3框返消耗'
  1149. this.onetotalCharge = 'Q3总消耗'
  1150. } else {
  1151. this.oneFWCharge = 'Q4服务消耗'
  1152. this.oneJLCharge = 'Q4激励消耗'
  1153. this.oneKFCharge = 'Q4框返消耗'
  1154. this.onetotalCharge = 'Q4总消耗'
  1155. }
  1156. this.getAction('/kuaishou/operationReport/queryQuarterlyData', params).then((res) => {
  1157. this.resetLoading = false
  1158. if (res.success) {
  1159. this.designTopLoading = false
  1160. this.designTopList = res.result || []
  1161. // this.ipagination.total = res.result.total || 0
  1162. } else {
  1163. this.designTopLoading = false
  1164. this.designTopList = []
  1165. this.$message.error(res.message)
  1166. }
  1167. })
  1168. },
  1169. getProjectList() {
  1170. this.specificLoading = true
  1171. this.dataDimensionList = []
  1172. this.dataDimensionValue = null
  1173. this.person = null
  1174. this.post = null
  1175. return new Promise((resolve, reject) => {
  1176. this.getAction(
  1177. '/kuaishou/operationReport/getAllOperatorList?mediaId=' + (this.mediaDimension == 'a' ? 1 : 2)
  1178. ).then((res) => {
  1179. this.specificLoading = false
  1180. if (res.success) {
  1181. this.dataDimensionList = res.result
  1182. resolve(res.result)
  1183. } else {
  1184. reject(res.message)
  1185. }
  1186. })
  1187. })
  1188. },
  1189. sort(pagination, filters, sorter, { currentDataSource }) {
  1190. this.ipagination.current = pagination.current
  1191. this.ipagination.pageSize = pagination.pageSize
  1192. // if (sorter.order) {
  1193. // this.order = sorter.order ? sorter.order : 'descend'
  1194. // this.target = sorter.columnKey
  1195. // this.getTableMediaList({
  1196. // target: sorter.columnKey,
  1197. // order: sorter.order ? sorter.order : 'descend',
  1198. // })
  1199. // }
  1200. },
  1201. handleSubmit() {
  1202. this.cancel()
  1203. this.resetLoading = true
  1204. this.ipagination.current = 1
  1205. // this.getData()
  1206. this.getTableMediaList()
  1207. },
  1208. resetSubmit() {
  1209. this.getQuarter()
  1210. this.mediaDimension = 'b'
  1211. this.dataDimensionValue = null
  1212. this.post = null
  1213. this.person = null
  1214. this.dataType = 0
  1215. this.handleSubmit()
  1216. },
  1217. //获取echart的值
  1218. initEchart(idName, optionName) {
  1219. let that = this
  1220. const chart = this.$refs[idName]
  1221. if (chart) {
  1222. echarts.init(document.getElementById(idName)).dispose()
  1223. const myChart = echarts.init(document.getElementById(idName))
  1224. myChart.setOption(optionName)
  1225. window.addEventListener('resize', function () {
  1226. that.clientWidth = document.documentElement.clientWidth - 224
  1227. myChart.resize()
  1228. })
  1229. }
  1230. },
  1231. disabledDate(current) {
  1232. return current && current >= moment()
  1233. },
  1234. },
  1235. mounted() {
  1236. this.clientWidth = document.documentElement.clientWidth - 224
  1237. this.$nextTick(() => {
  1238. this.getProjectList()
  1239. this.getQuarter()
  1240. setTimeout(() => {
  1241. this.getTableMediaList()
  1242. })
  1243. })
  1244. },
  1245. activated() {
  1246. this.$nextTick(() => {
  1247. this.clientWidth = document.documentElement.clientWidth - 224
  1248. })
  1249. },
  1250. }
  1251. </script>
  1252. <style lang="less" scoped>
  1253. .materialReport {
  1254. .material-report-card-two {
  1255. width: 25%;
  1256. ::v-deep * {
  1257. border: 0;
  1258. }
  1259. }
  1260. .material-report-card {
  1261. // height: 220px;
  1262. ::v-deep .ant-card-head {
  1263. border: none;
  1264. }
  1265. ::v-deep .ant-card-body {
  1266. padding-top: 5px;
  1267. }
  1268. .report-card-result {
  1269. height: 88px;
  1270. }
  1271. .report-card-money {
  1272. font-size: 30px;
  1273. font-weight: bold;
  1274. }
  1275. .report-card-msg {
  1276. display: flex;
  1277. justify-content: space-between;
  1278. font-size: 14px;
  1279. margin-top: 20px;
  1280. }
  1281. .report-card-line {
  1282. width: 100%;
  1283. height: 1px;
  1284. margin-top: 20px;
  1285. background: #e8e8e8;
  1286. }
  1287. .report-card-radio {
  1288. display: flex;
  1289. justify-content: space-between;
  1290. margin-top: 12px;
  1291. font-size: 14px;
  1292. }
  1293. }
  1294. .option {
  1295. background: white;
  1296. padding: 20px;
  1297. display: flex;
  1298. justify-content: flex-start;
  1299. flex-wrap: wrap;
  1300. .item {
  1301. margin-right: 15px;
  1302. margin-bottom: 15px;
  1303. height: 32px;
  1304. line-height: 32px;
  1305. flex-shrink: 0;
  1306. span {
  1307. margin-right: 10px;
  1308. }
  1309. }
  1310. }
  1311. .echart {
  1312. margin-top: 20px;
  1313. padding: 0 20px 20px;
  1314. background: white;
  1315. .echart-header {
  1316. padding: 20px 0;
  1317. font-size: 15px;
  1318. font-weight: 600;
  1319. }
  1320. }
  1321. .tableBody {
  1322. margin-top: 20px;
  1323. }
  1324. }
  1325. </style>
  1326. <style>
  1327. .materialReport .card-containers {
  1328. overflow: hidden !important;
  1329. }
  1330. .materialReport .card-containers > .ant-tabs-card > .ant-tabs-content {
  1331. margin-top: -16px !important;
  1332. }
  1333. .materialReport .card-containers > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  1334. background: #fff !important;
  1335. }
  1336. .materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar {
  1337. border-color: #fff !important;
  1338. }
  1339. .materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  1340. border-color: transparent !important;
  1341. background: transparent !important;
  1342. }
  1343. .materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  1344. border-color: #fff !important;
  1345. background: #fff !important;
  1346. }
  1347. </style>