popularVideo.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884
  1. <style lang="scss" scoped>
  2. .search-bar {
  3. display: flex;
  4. align-items: center;
  5. }
  6. .search-box p {
  7. display: inline-block;
  8. border: 1px solid #f2f2f2;
  9. border-radius: 5px;
  10. margin-right: 10px;
  11. padding: 5px 10px;
  12. cursor: pointer;
  13. }
  14. </style>
  15. <style>
  16. .showNumBox{
  17. margin: 10px 0;
  18. }
  19. .showNumBox .ant-card-body {
  20. display: flex;
  21. justify-content: center;
  22. }
  23. .showNumBox p,
  24. .showNumBox span {
  25. text-align: center;
  26. line-height: 40px;
  27. font-size: 30px;
  28. font-weight: 600;
  29. color: red;
  30. margin: 0;
  31. }
  32. .search-box .ant-card-body {
  33. padding: 5px 15px;
  34. }
  35. .showNumBox .ant-card-body .styleElse {
  36. line-height: 60px;
  37. height: 40px;
  38. font-size: 16px;
  39. font-weight: 400;
  40. margin-left: 10px;
  41. }
  42. .ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
  43. display: none !important;
  44. }
  45. .yincang .ant-col-6 p {
  46. text-align: left;
  47. color: red;
  48. font-size: 16px;
  49. font-weight: 500;
  50. }
  51. .ant-table-thead div {
  52. font-weight: 700;
  53. }
  54. .tool-tip {
  55. position: absolute;
  56. top: 65px;
  57. right: 10px;
  58. }
  59. </style>
  60. <style lang='less'>
  61. .ant-card-head .ant-tabs-bar{
  62. padding: 0;
  63. }
  64. .search-box .ant-card-body {
  65. padding: 5px 15px;
  66. }
  67. .search-box{
  68. padding: 15px 10px;
  69. }
  70. .search-box p {
  71. display: inline-block;
  72. border: 1px solid #f2f2f2;
  73. border-radius: 5px;
  74. margin-right: 10px;
  75. padding: 5px 10px;
  76. cursor: pointer;
  77. }
  78. .statistics .ant-col-6 .ant-card-body .styleElse {
  79. line-height: 60px;
  80. height: 40px;
  81. font-size: 16px;
  82. font-weight: 400;
  83. margin-left: 10px;
  84. }
  85. .ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
  86. display: none !important;
  87. }
  88. .yincang .ant-col-6 p {
  89. text-align: left;
  90. color: red;
  91. font-size: 16px;
  92. font-weight: 500;
  93. }
  94. .ant-table-thead div {
  95. font-weight: 700;
  96. }
  97. .tool-tip {
  98. position: absolute;
  99. top: 65px;
  100. right: 10px;
  101. }
  102. .statistics{
  103. .ant-card-bordered {
  104. border: none;
  105. }
  106. .ant-card-head .ant-tabs {
  107. clear: both;
  108. margin-bottom: -13px;
  109. color: rgba(0, 0, 0, 0.65);
  110. font-weight: normal;
  111. font-size: 14px;
  112. }
  113. .duibi{
  114. position: absolute;
  115. right: 24px;
  116. top: 15px;
  117. }
  118. p {
  119. margin-bottom: 0;
  120. }
  121. }
  122. </style>
  123. <style lang="less">
  124. .newPlanStatic {
  125. .divider {
  126. height: 62px;
  127. }
  128. .showNumBox {
  129. background: white;
  130. overflow: hidden;
  131. margin: 15px 0;
  132. padding: 30px 0;
  133. text-align: center;
  134. .ant-card-body {
  135. padding-top: 0;
  136. }
  137. .title {
  138. font-size: 14px;
  139. font-family: PingFangSC-Regular, PingFang SC;
  140. font-weight: 400;
  141. color: #999999;
  142. line-height: 22px;
  143. display: inline-block;
  144. }
  145. }
  146. .tabbody {
  147. background: white;
  148. padding: 0 24px;
  149. margin-bottom: 15px;
  150. .ant-tabs-bar {
  151. margin: 0;
  152. }
  153. }
  154. .chartBox {
  155. background: white;
  156. padding: 20px 0;
  157. }
  158. .tableBody{
  159. background: white;
  160. padding: 20px ;
  161. }
  162. }
  163. </style>
  164. <template>
  165. <div class="newPlanStatic">
  166. <div class="tabbody">
  167. <a-tabs v-model="tabKey" @change="tabChange">
  168. <a-tab-pane :key="1" tab="头条">
  169. </a-tab-pane>
  170. <a-tab-pane :key="2" tab="快手">
  171. </a-tab-pane>
  172. </a-tabs>
  173. </div>
  174. <a-row>
  175. <a-col :span="24">
  176. <a-card :bordered="false" class="search-box">
  177. <div style="margin-bottom:20px">
  178. <span style="margin-left:20px">编导:</span>
  179. <a-select
  180. v-model="planId"
  181. show-search
  182. placeholder="请输入名字"
  183. option-filter-prop="children"
  184. style="width: 200px"
  185. :filter-option="filterOption"
  186. @change="operateChange"
  187. :disabled='operateDisabled'
  188. allowClear
  189. >
  190. <a-select-option v-for="item in designList" :key="item.user_id" :value="item.id">
  191. {{item.realname+'_('+item.roleName+')'}}
  192. </a-select-option>
  193. </a-select>
  194. <span style="margin-left:20px">剪辑:</span>
  195. <a-select
  196. v-model="clipId"
  197. show-search
  198. placeholder="请输入名字"
  199. option-filter-prop="children"
  200. style="width: 200px"
  201. :filter-option="filterOption"
  202. @change="operateChange"
  203. :disabled='operateDisabled'
  204. allowClear
  205. >
  206. <a-select-option v-for="item in designList" :key="item.user_id" :value="item.id">
  207. {{item.realname+'_('+item.roleName+')'}}
  208. </a-select-option>
  209. </a-select>
  210. <span style="margin-left:20px">拍摄:</span>
  211. <a-select
  212. v-model="shotId"
  213. show-search
  214. placeholder="请输入名字"
  215. option-filter-prop="children"
  216. style="width: 200px"
  217. :filter-option="filterOption"
  218. @change="operateChange"
  219. :disabled='operateDisabled'
  220. allowClear
  221. >
  222. <a-select-option v-for="item in designList" :key="item.user_id" :value="item.id">
  223. {{item.realname+'_('+item.roleName+')'}}
  224. </a-select-option>
  225. </a-select>
  226. <a-button type='primary' style="position:absolute;right:20px" @click="search">查询</a-button>
  227. </div>
  228. <div style="margin-bottom:20px">
  229. <span>日期选择:</span>
  230. <a-range-picker
  231. @change="dateChange"
  232. v-model="dateRange"
  233. :disabled-date="disabledDate"
  234. style="width:200px"
  235. />
  236. <span style="margin-left:20px">数据维度:</span>
  237. <a-radio-group v-model="value" @change="dataTypeChange">
  238. <a-radio value="valid">
  239. 有效视频
  240. </a-radio>
  241. <a-radio value="hot">
  242. 爆款视频
  243. </a-radio>
  244. <a-radio value="onlie">
  245. 上线时间
  246. </a-radio>
  247. </a-radio-group>
  248. </div>
  249. <div class="time" >
  250. </div>
  251. </a-card>
  252. </a-col>
  253. </a-row>
  254. <a-row style="margin-bottom:15px;margin-top:12px">
  255. <a-col :span="24">
  256. <div class="tableBody">
  257. <a-table
  258. :columns="columns"
  259. :dataSource="dataTable"
  260. :pagination="ipagination"
  261. :loading="loading"
  262. bordered
  263. :scroll="{x: 2400}"
  264. @change="tableChange"
  265. >
  266. <span slot="createImg" slot-scope="text, record">
  267. <a-popover placement="right">
  268. <template slot="content">
  269. <video :src="record.url" style="width:250px" controls></video>
  270. </template>
  271. <template slot="title">
  272. </template>
  273. <img :src="record.coverUrl || noImg" alt="" style="width: 80px;height: 142px;">
  274. </a-popover>
  275. </span>
  276. <span slot='companyName' slot-scope="text">{{ text || '未知' }}</span>
  277. <span slot='planName' slot-scope="text">{{ text || '-' }}</span>
  278. <span slot='clipName' slot-scope="text">{{ text || '-' }}</span>
  279. <span slot='shotName' slot-scope="text">{{ text || '-' }}</span>
  280. <span slot='totalCost' slot-scope="text">{{ text |decimalsHandle }}</span>
  281. <span slot='activeNum' slot-scope="text">{{ text |formatCurrency }}</span>
  282. <span slot='clickNum' slot-scope="text">{{ text |formatCurrency }}</span>
  283. <span slot='convertNum' slot-scope="text">{{ text |formatCurrency }}</span>
  284. <span slot='showNum' slot-scope="text">{{ text |formatCurrency }}</span>
  285. <span slot='aclick' slot-scope="text">{{ text |formatCurrency }}</span>
  286. <span slot='bclick' slot-scope="text">{{ text |formatCurrency }}</span>
  287. <span slot='photoClick' slot-scope="text">{{ text |formatCurrency }}</span>
  288. <span slot='photoShow' slot-scope="text">{{ text |formatCurrency }}</span>
  289. <span slot="faddishDate" slot-scope="text, record">{{ record.faddishDayNum < 15 ? text : '' }}</span>
  290. <span slot="effectDate" slot-scope="text, record">{{ record.effectDayNum < 8 ? text : '' }}</span>
  291. <span slot="action" slot-scope="text, record">
  292. <a @click="handleUpdateFace(record)">换脸</a>
  293. </span>
  294. </a-table>
  295. </div>
  296. </a-col>
  297. </a-row>
  298. <!-- 换脸模块 -->
  299. <change-face
  300. :status="faceTypeStatus"
  301. :defaultList="faceChangeList"
  302. @closeface="handleFaceCloseModal"
  303. @sureface="handleFaceSureModal"
  304. >
  305. </change-face>
  306. </div>
  307. </template>
  308. <script>
  309. import changeFace from '@/views/modules/Statistics/change-face/change-face';
  310. import {TreeSelect} from 'ant-design-vue';
  311. const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  312. import ARow from 'ant-design-vue/es/grid/Row';
  313. import ACol from 'ant-design-vue/es/grid/Col';
  314. import moment from 'moment';
  315. import {getKsAccountReport, getKsDetail, getReportList} from '@api/video.js';
  316. import {
  317. getAction,
  318. postAction,
  319. downFile,
  320. downFilePost
  321. } from '@/api/manage';
  322. import qs from 'qs';
  323. let TTcolumns = [
  324. {
  325. title: '视频',
  326. dataIndex: 'createImg',
  327. scopedSlots: {customRender: 'createImg'},
  328. align: 'center',
  329. key:'userNcreateImgame'
  330. },
  331. {
  332. title: '视频ID',
  333. dataIndex: 'videoCode',
  334. scopedSlots: {customRender: 'videoCode'},
  335. align: 'center',
  336. key: 'videoCode'
  337. },
  338. {
  339. title: '视频上线时间',
  340. dataIndex: 'stateDate',
  341. scopedSlots: {customRender: 'stateDate'},
  342. align: 'center',
  343. key: 'stateDate',
  344. width: 200
  345. },
  346. {
  347. title: '爆款达成日期',
  348. dataIndex: 'faddishDate',
  349. scopedSlots: {customRender: 'faddishDate'},
  350. align: 'center',
  351. key: 'faddishDate',
  352. width: 200
  353. },
  354. {
  355. title: '有效达成日期',
  356. dataIndex: 'effectDate',
  357. scopedSlots: {customRender: 'effectDate'},
  358. align: 'center',
  359. key: 'effectDate',
  360. width: 200
  361. },
  362. {
  363. title: '所属公司',
  364. dataIndex: 'companyName',
  365. scopedSlots: {customRender: 'companyName'},
  366. align: 'center',
  367. key: 'companyName',
  368. width: 200
  369. },
  370. {
  371. title: '策划名称',
  372. dataIndex: 'planName',
  373. scopedSlots: {customRender: 'planName'},
  374. align: 'center',
  375. key: 'planName',
  376. width: 200
  377. },
  378. {
  379. title: '剪辑名称',
  380. dataIndex: 'clipName',
  381. scopedSlots: {customRender: 'clipName'},
  382. align: 'center',
  383. key: 'clipName',
  384. width: 200
  385. },
  386. {
  387. title: '拍摄名称',
  388. dataIndex: 'shotName',
  389. scopedSlots: {customRender: 'shotName'},
  390. align: 'center',
  391. key: 'shotName',
  392. width: 200
  393. },
  394. {
  395. title: '总消耗',
  396. dataIndex: 'totalCost',
  397. scopedSlots: { customRender: 'totalCost' },
  398. align: 'center',
  399. key: 'totalCost'
  400. },
  401. {
  402. title: '点击数',
  403. dataIndex: 'clickNum',
  404. scopedSlots: {customRender: 'clickNum'},
  405. align: 'center',
  406. key: 'clickNum'
  407. },
  408. {
  409. title: '曝光数',
  410. dataIndex: 'showNum',
  411. scopedSlots: {customRender: 'showNum'},
  412. align: 'center',
  413. key: 'showNum'
  414. },
  415. {
  416. title: '激活数',
  417. dataIndex: 'activeNum',
  418. scopedSlots: {customRender: 'activeNum'},
  419. align: 'center',
  420. key: 'activeNum'
  421. },
  422. {
  423. title: '转化数',
  424. dataIndex: 'convertNum',
  425. scopedSlots: {customRender: 'convertNum'},
  426. align: 'center',
  427. key: 'convertNum'
  428. },
  429. {
  430. title: '操作',
  431. dataIndex: 'action',
  432. align: 'center',
  433. width: 120,
  434. fixed: 'right',
  435. scopedSlots: {customRender: 'action'}
  436. }
  437. ];
  438. let KScolumns = [
  439. {
  440. title: '视频',
  441. dataIndex: 'createImg',
  442. scopedSlots: {customRender: 'createImg'},
  443. align: 'center',
  444. key: 'userNcreateImgame'
  445. },
  446. {
  447. title: '视频ID',
  448. dataIndex: 'videoCode',
  449. scopedSlots: {customRender: 'videoCode'},
  450. align: 'center',
  451. key: 'videoCode'
  452. },
  453. {
  454. title: '视频上线时间',
  455. dataIndex: 'stateDate',
  456. scopedSlots: {customRender: 'stateDate'},
  457. align: 'center',
  458. key: 'stateDate'
  459. },
  460. {
  461. title: '爆款达成日期',
  462. dataIndex: 'faddishDate',
  463. scopedSlots: {customRender: 'faddishDate'},
  464. align: 'center',
  465. key: 'faddishDate'
  466. },
  467. {
  468. title: '有效达成日期',
  469. dataIndex: 'effectDate',
  470. scopedSlots: {customRender: 'effectDate'},
  471. align: 'center',
  472. key: 'effectDate'
  473. },
  474. {
  475. title: '所属公司',
  476. dataIndex: 'companyName',
  477. scopedSlots: {customRender: 'companyName'},
  478. align: 'center',
  479. key: 'companyName'
  480. },
  481. {
  482. title: '策划名称',
  483. dataIndex: 'planName',
  484. scopedSlots: {customRender: 'planName'},
  485. align: 'center',
  486. key: 'planName'
  487. },
  488. {
  489. title: '剪辑名称',
  490. dataIndex: 'clipName',
  491. scopedSlots: {customRender: 'clipName'},
  492. align: 'center',
  493. key: 'clipName'
  494. },
  495. {
  496. title: '拍摄名称',
  497. dataIndex: 'shotName',
  498. scopedSlots: {customRender: 'shotName'},
  499. align: 'center',
  500. key: 'shotName'
  501. },
  502. {
  503. title: '总消耗',
  504. dataIndex: 'totalCost',
  505. scopedSlots: {customRender: 'totalCost'},
  506. align: 'center',
  507. key: 'totalCost'
  508. },
  509. {
  510. title: '封面曝光',
  511. dataIndex: 'photoShow',
  512. scopedSlots: {customRender: 'photoShow'},
  513. align: 'center',
  514. key: 'photoShow'
  515. },
  516. {
  517. title: '封面点击',
  518. dataIndex: 'photoClick',
  519. scopedSlots: {customRender: 'photoClick'},
  520. align: 'center',
  521. key: 'photoClick'
  522. },
  523. {
  524. title: '素材曝光',
  525. dataIndex: 'aclick',
  526. scopedSlots: {customRender: 'aclick'},
  527. align: 'center',
  528. key: 'aclick'
  529. },
  530. {
  531. title: '行为数',
  532. dataIndex: 'bclick',
  533. scopedSlots: {customRender: 'bclick'},
  534. align: 'center',
  535. key: 'bclick'
  536. },
  537. {
  538. title: '操作',
  539. dataIndex: 'action',
  540. align: 'center',
  541. width: 120,
  542. fixed: 'right',
  543. scopedSlots: {customRender: 'action'}
  544. }
  545. ];
  546. export default {
  547. components: {
  548. changeFace,
  549. ACol,
  550. ARow
  551. },
  552. data() {
  553. return {
  554. faceChangeList: {},
  555. faceTypeStatus: false,
  556. exportloading: false,
  557. planId: undefined,
  558. shotId: undefined,
  559. clipId: undefined,
  560. dateRange: [moment().subtract(1,'weeks'),moment()],
  561. noImg: require('@/assets/noImg.png'),
  562. ipagination: {
  563. current: 1,
  564. pageSize: 10,
  565. // pageSizeOptions: ['10', '20', '30'],
  566. showTotal: (total, range) => {
  567. return range[0] + "-" + range[1] + " 共" + total + "条"
  568. },
  569. showQuickJumper: true,
  570. showSizeChanger:true,
  571. pageSizeOptions: ['10', '30', '50'],
  572. total: 0,
  573. onChange: (current, pageSize) => {
  574. // 切换分页时的回调,
  575. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  576. this.ipagination.current = current;
  577. this.ipagination.pageSize= pageSize;
  578. this.getNewPlan();
  579. }
  580. },
  581. value: 'valid',
  582. KSaccountList: [],
  583. TTaccountList: [],
  584. KSdesignList: [],
  585. TTdesignList: [],
  586. operateDisabled: false,
  587. userId: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id,
  588. duration: 1000,
  589. // treeselect的参数
  590. treeValue: [],
  591. treeData: [],
  592. SHOW_PARENT,
  593. type: 3,
  594. dateValue:[moment().subtract(7,'days'), moment()],
  595. operate: '',
  596. designList: [],
  597. tabKey: 1,
  598. loading: false,
  599. TTcolumns,
  600. KScolumns,
  601. columns: [...TTcolumns],
  602. dataTable: [],
  603. tableTab: 1,
  604. newPlan: 0,
  605. effectPlan: 0,
  606. openOptions: false,
  607. target: '',
  608. order: 'desc'
  609. }
  610. },
  611. methods: {
  612. moment,
  613. handleUpdateFace(data) {
  614. this.faceTypeStatus = true;
  615. this.faceChangeList = data;
  616. },
  617. handleFaceCloseModal() {
  618. this.faceTypeStatus = false;
  619. },
  620. handleFaceSureModal() {
  621. this.search();
  622. },
  623. disabledDate(current) {
  624. return current && current > moment();
  625. },
  626. dateChange(date, dateString) {
  627. // console.log(date,dateString)
  628. },
  629. //导出报表
  630. exportExcel() {
  631. this.exportloading=true;
  632. let url='';
  633. if(this.tabKey==1){
  634. url='/ctop/bytedanceVideoEtlInfo/exportXls';
  635. }else {
  636. url='/ctop/kuaishouVideoEtlInfo/exportXls'
  637. }
  638. let nameType=''
  639. if(this.value=='valid'){
  640. nameType='有效视频'
  641. }else if(this.value=='hot'){
  642. nameType='爆款视频'
  643. }else if(this.value=='online'){
  644. nameType='视频上线时间'
  645. }
  646. downFilePost(url,qs.stringify({
  647. type:this.value,
  648. clipId:this.clipId,
  649. shotId:this.shotId,
  650. planId:this.planId,
  651. startData:this.dateRange[0].format('YYYY-MM-DD'),
  652. endData:this.dateRange[1].format('YYYY-MM-DD'),
  653. })).then(res => {
  654. this.exportloading=false;
  655. let blob = new Blob([res], {
  656. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  657. })
  658. let downloadElement = document.createElement('a')
  659. let href = window.URL.createObjectURL(blob) //创建下载的链接
  660. downloadElement.href = href
  661. downloadElement.download = moment().format('YYYY-MM-DD') + nameType+'.xlsx' //下载后文件名
  662. document.body.appendChild(downloadElement)
  663. downloadElement.click() //点击下载
  664. document.body.removeChild(downloadElement) //下载完成移除元素
  665. window.URL.revokeObjectURL(href) //释放掉blob对象
  666. })
  667. },
  668. dataTypeChange(e){
  669. this.getNewPlan()
  670. },
  671. filterOption(input, option){
  672. // console.log(input, option)
  673. return (
  674. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  675. );
  676. },
  677. // 快手头条的切换
  678. tabChange(key){
  679. this.treeValue=[];
  680. this.ipagination.current=1
  681. this.columns=this.tabKey==1?[...TTcolumns]:[...KScolumns]
  682. this.$nextTick(() => {
  683. this.getNewPlan();
  684. });
  685. },
  686. operateChange(value){
  687. console.log(value);
  688. if(value){
  689. this.accountDisabled=true;
  690. this.accountId=''
  691. }else{
  692. this.accountDisabled=false
  693. }
  694. },
  695. tableChange(pagination, filters, sorter, { currentDataSource }){
  696. console.log(pagination)
  697. this.ipagination.current=pagination.current;
  698. this.ipagination.pageSize=pagination.pageSize;
  699. this.getNewPlan()
  700. },
  701. // table区域的tab切换
  702. tableTabChange(key){
  703. if(key==1){
  704. this.columns=this.tabKey==1?[...TTcolumns]:[...KScolumns]
  705. this.target='new'
  706. }else{
  707. this.columns=this.tabKey==1?[...TTcolumnsVaild]:[...KScolumnsVaild]
  708. this.target='valid'
  709. }
  710. this.getNewPlan()
  711. },
  712. // 获取所有运营
  713. getAllOperator(key){
  714. let url='/sys/user/getAllDesigner'
  715. this.designList=[]
  716. getAction(url,{}).then(res=>{
  717. console.log(res);
  718. if(res.success){
  719. this.designList=res.data
  720. }
  721. })
  722. },
  723. // 获取展示数据
  724. getNewPlan() {
  725. this.dataTable = [];
  726. let url = '';
  727. if(this.tabKey == 1) {
  728. // 头条
  729. url = '/ctop/bytedanceVideoEtlInfo/list';
  730. }
  731. else {
  732. // 快手
  733. url = '/ctop/kuaishouVideoEtlInfo/list';
  734. }
  735. this.ipagination.total = 0;
  736. this.loading = true;
  737. getAction(url, {
  738. type: this.value,
  739. clipId: this.clipId==''?null:this.clipId,
  740. shotId: this.shotId==''?null:this.shotId,
  741. planId: this.planId==''?null:this.planId,
  742. startDate: this.dateRange[0].format('YYYY-MM-DD'),
  743. endDate: this.dateRange[1].format('YYYY-MM-DD'),
  744. pageSize: this.ipagination.pageSize,
  745. pageNo: this.ipagination.current
  746. }).then(res => {
  747. this.loading = false;
  748. if(res.success) {
  749. if(res.result) {
  750. this.dataTable = [...res.result.records];
  751. this.ipagination.total = res.result.total;
  752. }
  753. }
  754. })
  755. },
  756. // 查询按钮
  757. search(){
  758. // if(this.accountId || this.operate){
  759. // this.echartSpinning=true;
  760. // this.getNewPlan()
  761. // }else{
  762. // this.$message.error('请选择具体账户或者运营')
  763. // }
  764. this.ipagination.current = 1;
  765. this.getNewPlan();
  766. },
  767. },
  768. watch: {
  769. dateValue(newName,oldName){
  770. this.search()
  771. },
  772. },
  773. computed: {
  774. newDate() {
  775. var myDate = new Date()
  776. myDate.getYear() //获取当前年份(2位)
  777. var n = myDate.getFullYear() //获取完整的年份(4位,1970-????)
  778. var m = myDate.getMonth() //获取当前月份(0-11,0代表1月)
  779. var d = myDate.getDate() //获取当前日(1-31)
  780. var day = myDate.getHours()
  781. return day
  782. }
  783. },
  784. mounted() {
  785. this.getNewPlan();
  786. this.getAllOperator()
  787. },
  788. filters: {
  789. toPercentage(val) {
  790. if (typeof val !== 'string') {
  791. return (val * 100).toFixed(2) + '%';
  792. }
  793. else {
  794. return val;
  795. }
  796. },
  797. //保留两位小数并且变成货币格式
  798. decimalsHandle(val) {
  799. if(val && typeof val != 'string') {
  800. if(val >= 0) {
  801. val=parseFloat(val).toFixed(2);
  802. let numberStr = val.toString();
  803. let str = numberStr.split('.');
  804. let str0=str[0].split('').reverse();
  805. for (let i = 0; i < str0.length; i++) {
  806. if ((i + 1) % 4 === 0) {
  807. str0.splice(i, 0, ',');
  808. }
  809. }
  810. str0.reverse();
  811. let handleResult = '';
  812. for (let j = 0; j < str0.length; j++) {
  813. handleResult += str0[j];
  814. }
  815. return handleResult + '.' + str[1];
  816. }
  817. else {
  818. val = parseFloat(val).toFixed(2);
  819. let numberStr = val.toString();
  820. let str = numberStr.split('.');
  821. let str0=str[0].substr(1).split('').reverse();
  822. for (let i = 0; i < str0.length; i++) {
  823. if ((i + 1) % 4 === 0) {
  824. str0.splice(i, 0, ',')
  825. }
  826. }
  827. str0.reverse();
  828. let handleResult = '';
  829. for (let j = 0; j < str0.length; j++) {
  830. handleResult += str0[j];
  831. }
  832. return '-' + handleResult + '.' + str[1];
  833. }
  834. }
  835. else if(typeof val == 'string') {
  836. return val;
  837. }
  838. else {
  839. return 0;
  840. }
  841. },
  842. //变成货币格式
  843. formatCurrency(val){
  844. if (val) {
  845. let numberStr = val.toString()
  846. let str = numberStr.split('').reverse()
  847. for (let i = 0; i < str.length; i++) {
  848. if ((i + 1) % 4 === 0) {
  849. str.splice(i, 0, ',')
  850. }
  851. }
  852. str.reverse()
  853. let handleResult = ''
  854. for (let j = 0; j < str.length; j++) {
  855. handleResult += str[j]
  856. }
  857. return handleResult
  858. }else{
  859. return '-'
  860. }
  861. }
  862. }
  863. }
  864. </script>