newPlanStatic.vue 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431
  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>项目选择:</span>
  179. <a-tree-select
  180. v-model="treeValue"
  181. show-search
  182. style="width: 580px;height:30px"
  183. :dropdownMatchSelectWidth='true'
  184. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  185. tree-checkable
  186. searchPlaceholder='请输入账户关键字搜索'
  187. :show-checked-strategy="SHOW_PARENT"
  188. placeholder="请选择项目和账户或搜索账户关键字"
  189. treeNodeFilterProp="title"
  190. :allowClear="true"
  191. @change="treeChange"
  192. @search="treeSearch"
  193. @select="treeSelect"
  194. :maxTagCount='1'
  195. :tree-data="treeData"
  196. :filterOption='filterOption'
  197. :disabled='accountDisabled'
  198. >
  199. </a-tree-select>
  200. <span style="margin-left:20px">运营:</span>
  201. <a-select
  202. v-model="operate"
  203. show-search
  204. placeholder="请输入名字"
  205. option-filter-prop="children"
  206. style="width: 200px"
  207. :filter-option="filterOption"
  208. @change="operateChange"
  209. :disabled='operateDisabled'
  210. allowClear
  211. >
  212. <a-select-option v-for="item in operateList" :key="item.user_id" :value="item.user_id">
  213. {{item.user_name}}
  214. </a-select-option>
  215. </a-select>
  216. <a-button type='primary' style="position:absolute;right:20px" @click="search">查询</a-button>
  217. </div>
  218. <div style="margin-bottom:20px">
  219. <span>数据维度:</span>
  220. <a-radio-group v-model="value" @change="dataTypeChange">
  221. <a-radio :value="1">
  222. 广告计划
  223. </a-radio>
  224. <a-radio :value="2" v-show="tabKey==2">
  225. 广告组
  226. </a-radio>
  227. </a-radio-group>
  228. </div>
  229. <div class="time" @click="opendate" >
  230. <datePick :dateValue.sync='dateValue' :type.sync='type' />
  231. </div>
  232. <!-- <p>对比</p> -->
  233. </a-card>
  234. </a-col>
  235. </a-row>
  236. <a-row >
  237. <div class="showNumBox">
  238. <a-col :sm="24" :md="10" :xl="10" :xxl="10">
  239. <span class="title">
  240. <template v-if="tabKey==1 || tabKey==2&&value==1 ">新上计划数</template>
  241. <template v-else-if="tabKey==2&&value==2">新上推广组</template>
  242. </span>
  243. <div>
  244. <countTo
  245. :startVal="0"
  246. :endVal="newPlan"
  247. :duration="duration"
  248. :decimals="0"
  249. style="overflow:auto"
  250. ></countTo>
  251. </div>
  252. </a-col>
  253. <a-col :sm="24" :md="2" :xl="2" :xxl="2">
  254. <a-divider type="vertical" class="divider" />
  255. </a-col>
  256. <a-col :sm="24" :md="10" :xl="10" :xxl="10">
  257. <span class="title">
  258. <template v-if="tabKey==1 || tabKey==2&&value==1 ">有效计划数</template>
  259. <template v-else-if="tabKey==2&&value==2">有效推广组</template>
  260. </span>
  261. <div>
  262. <countTo
  263. :startVal="0"
  264. :endVal="effectPlan"
  265. :duration="duration"
  266. :decimals="0"
  267. style="overflow:auto"
  268. ></countTo>
  269. </div>
  270. </a-col>
  271. </div>
  272. </a-row>
  273. <a-row :gutter="10">
  274. <a-col :span="24">
  275. <div class="chartBox">
  276. <a-spin :spinning="echartSpinning">
  277. <div id="chart" style="width:100%;height:320px" ref="sectionChart"></div>
  278. </a-spin>
  279. </div>
  280. </a-col>
  281. </a-row>
  282. <a-row style="margin-bottom:15px;margin-top:12px">
  283. <a-col :span="24">
  284. <div class="tableBody">
  285. <a-tabs v-model="tableTab" @change="tableTabChange">
  286. <a-tab-pane :key="1" :tab="(tabKey==1||tabKey==2&&value==1)?'新上计划数':'新上推广组'">
  287. </a-tab-pane>
  288. <a-tab-pane :key="2" :tab="(tabKey==1||tabKey==2&&value==1)?'有效计划数':'有效推广组'">
  289. </a-tab-pane>
  290. <a-button slot="tabBarExtraContent" @click="exportExcel" :loading="exportloading" v-show="tabKey==2">
  291. 导出报表
  292. </a-button>
  293. </a-tabs>
  294. <a-table :columns="columns" :dataSource="dataTable" :pagination="false" :loading="loading" bordered>
  295. </a-table>
  296. </div>
  297. </a-col>
  298. </a-row>
  299. </div>
  300. </template>
  301. <script>
  302. import datePick from '../components/datePick'
  303. import { TreeSelect } from 'ant-design-vue';
  304. const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  305. import ARow from 'ant-design-vue/es/grid/Row'
  306. import ACol from 'ant-design-vue/es/grid/Col'
  307. import moment from 'moment'
  308. import countTo from 'vue-count-to'
  309. import lifting from '../components/lifting'
  310. import { getKsAccountReport, getKsDetail, getReportList } from '@api/video.js'
  311. import { getAction, postAction ,downFile, downFilePost } from '@/api/manage'
  312. import timeCheck from '../components/timeCheck'
  313. var upDate
  314. // 引入基本模板
  315. let echarts = require('echarts/lib/echarts')
  316. // 引入柱状图组件
  317. require('echarts/lib/chart/bar')
  318. require('echarts/lib/chart/pie')
  319. require('echarts/lib/chart/line')
  320. // 引入提示框和title组件
  321. require('echarts/lib/component/tooltip')
  322. require('echarts/lib/component/title')
  323. require('echarts/lib/component/graphic')
  324. require('echarts/lib/component/toolbox')
  325. require('echarts/lib/component/legend')
  326. let TTcolumns=[
  327. {
  328. title: '账户名称',
  329. dataIndex: 'authName',
  330. scopedSlots: { customRender: 'authName' },
  331. align: 'center',
  332. key:'authName'
  333. },
  334. {
  335. title: '账户ID',
  336. dataIndex: 'accountId',
  337. scopedSlots: { customRender: 'accountId' },
  338. align: 'center',
  339. key:'accountId'
  340. },
  341. {
  342. title: '账户所属人',
  343. dataIndex: 'userName',
  344. scopedSlots: { customRender: 'userName' },
  345. align: 'center',
  346. key:'userName'
  347. },
  348. {
  349. title: '新上计划数',
  350. dataIndex: 'new',
  351. scopedSlots: { customRender: 'new' },
  352. align: 'center',
  353. key:'new'
  354. },
  355. {
  356. title: '最近上新',
  357. dataIndex: 'maxCreateTime',
  358. scopedSlots: { customRender: 'maxCreateTime' },
  359. align: 'center',
  360. key:'maxCreateTime'
  361. },
  362. ]
  363. let TTcolumnsVaild=[
  364. {
  365. title: '账户名称',
  366. dataIndex: 'authName',
  367. scopedSlots: { customRender: 'authName' },
  368. align: 'center',
  369. key:'authName'
  370. },
  371. {
  372. title: '账户ID',
  373. dataIndex: 'accountId',
  374. scopedSlots: { customRender: 'accountId' },
  375. align: 'center',
  376. key:'accountId'
  377. },
  378. {
  379. title: '账户所属人',
  380. dataIndex: 'userName',
  381. scopedSlots: { customRender: 'userName' },
  382. align: 'center',
  383. key:'userName'
  384. },
  385. {
  386. title: '有效计划数',
  387. dataIndex: 'valid',
  388. scopedSlots: { customRender: 'valid' },
  389. align: 'center',
  390. key:'valid'
  391. },
  392. {
  393. title: '最近上新',
  394. dataIndex: 'maxCreateTime',
  395. scopedSlots: { customRender: 'maxCreateTime' },
  396. align: 'center',
  397. key:'maxCreateTime'
  398. },
  399. ]
  400. let KScolumns=[
  401. // {
  402. // title: '项目名称',
  403. // dataIndex: 'projectName',
  404. // scopedSlots: { customRender: 'projectName' },
  405. // align: 'center',
  406. // key:'projectName'
  407. // },
  408. {
  409. title: '账户名称',
  410. dataIndex: 'authName',
  411. scopedSlots: { customRender: 'authName' },
  412. align: 'center',
  413. key:'authName'
  414. },
  415. {
  416. title: '账户ID',
  417. dataIndex: 'accountId',
  418. scopedSlots: { customRender: 'accountId' },
  419. align: 'center',
  420. key:'accountId'
  421. },
  422. {
  423. title: '账户所属人',
  424. dataIndex: 'userName',
  425. scopedSlots: { customRender: 'userName' },
  426. align: 'center',
  427. key:'userName'
  428. },
  429. {
  430. title: '新上推广组',
  431. dataIndex: 'new',
  432. scopedSlots: { customRender: 'new' },
  433. align: 'center',
  434. key:'new'
  435. },
  436. {
  437. title: '最近上新',
  438. dataIndex: 'maxCreateTime',
  439. scopedSlots: { customRender: 'maxCreateTime' },
  440. align: 'center',
  441. key:'maxCreateTime'
  442. },
  443. ]
  444. let KScolumnsVaild=[
  445. // {
  446. // title: '项目名称',
  447. // dataIndex: 'projectName',
  448. // scopedSlots: { customRender: 'projectName' },
  449. // align: 'center',
  450. // key:'projectName'
  451. // },
  452. {
  453. title: '账户名称',
  454. dataIndex: 'authName',
  455. scopedSlots: { customRender: 'authName' },
  456. align: 'center',
  457. key:'authName'
  458. },
  459. {
  460. title: '账户ID',
  461. dataIndex: 'accountId',
  462. scopedSlots: { customRender: 'accountId' },
  463. align: 'center',
  464. key:'accountId'
  465. },
  466. {
  467. title: '账户所属人',
  468. dataIndex: 'userName',
  469. scopedSlots: { customRender: 'userName' },
  470. align: 'center',
  471. key:'userName'
  472. },
  473. {
  474. title: '有效推广组',
  475. dataIndex: 'valid',
  476. scopedSlots: { customRender: 'valid' },
  477. align: 'center',
  478. key:'valid'
  479. },
  480. {
  481. title: '最近上新',
  482. dataIndex: 'maxCreateTime',
  483. scopedSlots: { customRender: 'maxCreateTime' },
  484. align: 'center',
  485. key:'maxCreateTime'
  486. },
  487. ]
  488. let KScolumnsPlan=[
  489. // {
  490. // title: '项目名称',
  491. // dataIndex: 'projectName',
  492. // scopedSlots: { customRender: 'projectName' },
  493. // align: 'center',
  494. // key:'projectName'
  495. // },
  496. {
  497. title: '账户名称',
  498. dataIndex: 'authName',
  499. scopedSlots: { customRender: 'authName' },
  500. align: 'center',
  501. key:'authName'
  502. },
  503. {
  504. title: '账户ID',
  505. dataIndex: 'accountId',
  506. scopedSlots: { customRender: 'accountId' },
  507. align: 'center',
  508. key:'accountId'
  509. },
  510. {
  511. title: '账户所属人',
  512. dataIndex: 'userName',
  513. scopedSlots: { customRender: 'userName' },
  514. align: 'center',
  515. key:'userName'
  516. },
  517. {
  518. title: '新上计划数',
  519. dataIndex: 'new',
  520. scopedSlots: { customRender: 'new' },
  521. align: 'center',
  522. key:'new'
  523. },
  524. {
  525. title: '最近上新',
  526. dataIndex: 'maxCreateTime',
  527. scopedSlots: { customRender: 'maxCreateTime' },
  528. align: 'center',
  529. key:'maxCreateTime'
  530. },
  531. ]
  532. let KScolumnsPlanVaild=[
  533. // {
  534. // title: '项目名称',
  535. // dataIndex: 'projectName',
  536. // scopedSlots: { customRender: 'projectName' },
  537. // align: 'center',
  538. // key:'projectName'
  539. // },
  540. {
  541. title: '账户名称',
  542. dataIndex: 'authName',
  543. scopedSlots: { customRender: 'authName' },
  544. align: 'center',
  545. key:'authName'
  546. },
  547. {
  548. title: '账户ID',
  549. dataIndex: 'accountId',
  550. scopedSlots: { customRender: 'accountId' },
  551. align: 'center',
  552. key:'accountId'
  553. },
  554. {
  555. title: '账户所属人',
  556. dataIndex: 'userName',
  557. scopedSlots: { customRender: 'userName' },
  558. align: 'center',
  559. key:'userName'
  560. },
  561. {
  562. title: '有效计划数',
  563. dataIndex: 'valid',
  564. scopedSlots: { customRender: 'valid' },
  565. align: 'center',
  566. key:'valid'
  567. },
  568. {
  569. title: '最近上新',
  570. dataIndex: 'maxCreateTime',
  571. scopedSlots: { customRender: 'maxCreateTime' },
  572. align: 'center',
  573. key:'maxCreateTime'
  574. },
  575. ]
  576. let sectionOption={
  577. backgroundColor: '#fff',
  578. tooltip: {
  579. trigger: 'axis',
  580. axisPointer: {
  581. // 坐标轴指示器,坐标轴触发有效
  582. type: 'line', // 默认为直线,可选为:'line' | 'shadow',
  583. }, 
  584. },
  585. legend: {
  586. data: ['新上推广组','有效推广组']
  587. },
  588. grid: {
  589. left: '2%',
  590. right: '2%',
  591. bottom: '0%',
  592. top: '12%',
  593. containLabel: true
  594. },
  595. xAxis:
  596. {
  597. type: 'category',
  598. data: [],
  599. boundaryGap: false,
  600. // 坐标轴线
  601. axisLine: {
  602. show: false,
  603. lineStyle: {
  604. color: '#999'
  605. }
  606. },
  607. // 分割线
  608. splitLine: {
  609. show: true,
  610. lineStyle: {
  611. type: 'dashed',
  612. color: '#e5e5e5'
  613. }
  614. }
  615. }
  616. ,
  617. yAxis: [
  618. {
  619. type: 'value',
  620. axisLine: {
  621. show: false,
  622. lineStyle: {
  623. color: '#999'
  624. }
  625. },
  626. splitLine: {
  627. lineStyle: {
  628. type: 'dashed',
  629. color: '#e5e5e5'
  630. }
  631. }
  632. },
  633. ],
  634. series: [
  635. {
  636. name: '新上推广组',
  637. type: 'line',
  638. smooth: true,
  639. data: [],
  640. symbol: 'circle',
  641. symbolSize :8,
  642. color: '#0bcd74',
  643. lineStyle: {
  644. normal: {
  645. width: 2,
  646. color: '#0bcd74'
  647. }
  648. },
  649. itemStyle: {
  650. borderColor: '#fff',
  651. borderWidth: 3
  652. },
  653. },
  654. {
  655. name: '有效推广组',
  656. type: 'line',
  657. smooth: true,
  658. data: [],
  659. symbol: 'circle',
  660. color: '#9933ff',
  661. symbolSize: 8,
  662. lineStyle: {
  663. normal: {
  664. width: 2,
  665. color: '#9933ff'
  666. }
  667. },
  668. itemStyle: {
  669. borderColor: '#ffffff',
  670. borderWidth: 3
  671. },
  672. },
  673. ]
  674. }
  675. export default {
  676. components: {
  677. ACol,
  678. ARow,
  679. countTo,
  680. lifting,
  681. timeCheck,
  682. datePick
  683. },
  684. data() {
  685. return {
  686. exportloading:false,
  687. value:2,
  688. KSaccountList:[],
  689. TTaccountList:[],
  690. KSoperateList:[],
  691. TToperateList:[],
  692. accountDisabled:false,
  693. operateDisabled:false,
  694. userId:JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id,
  695. duration: 1000,
  696. //treeselect的参数
  697. treeValue: [],
  698. treeData: [],
  699. SHOW_PARENT,
  700. type:3,
  701. dateValue:[moment().subtract(7, 'days'), moment().subtract(1, 'days')],
  702. operate:'',
  703. operateList:[],
  704. tabKey:2,
  705. sectionOption:JSON.parse(JSON.stringify(sectionOption)),
  706. loading: false,
  707. TTcolumns,
  708. KScolumns,
  709. columns:[...KScolumns],
  710. dataTable: [],
  711. tableTab:1,
  712. newPlan:0,
  713. effectPlan:0,
  714. echartSpinning:false,
  715. openOptions:false,
  716. target:'',
  717. order:'desc',
  718. }
  719. },
  720. methods: {
  721. //导出报表
  722. exportExcel() {
  723. this.exportloading=true;
  724. let url='';
  725. let nameType=''
  726. if(this.value==2){
  727. url='/ctop/kuaishou/newGroup/report/excel'
  728. }else{
  729. url='/ctop/kuaishou/newPlan/report/excel'
  730. }
  731. if(this.value==2){
  732. nameType='广告组'
  733. }else if(this.value==1){
  734. nameType='广告计划'
  735. }
  736. downFilePost(url,{
  737. accountIds:this.accountId,
  738. userId:this.operate || '',
  739. startDate:this.dateValue[0].format('YYYY-MM-DD'),
  740. endDate:this.dateValue[1].format('YYYY-MM-DD'),
  741. target:this.tableTab=='1'?'new':'valid',
  742. order:this.order
  743. }).then(res => {
  744. this.exportloading=false;
  745. let blob = new Blob([res], {
  746. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  747. })
  748. let downloadElement = document.createElement('a')
  749. let href = window.URL.createObjectURL(blob) //创建下载的链接
  750. downloadElement.href = href
  751. downloadElement.download = moment().format('YYYY-MM-DD') + nameType+'.xlsx' //下载后文件名
  752. document.body.appendChild(downloadElement)
  753. downloadElement.click() //点击下载
  754. document.body.removeChild(downloadElement) //下载完成移除元素
  755. window.URL.revokeObjectURL(href) //释放掉blob对象
  756. })
  757. },
  758. dataTypeChange(e){
  759. console.log(e.target.value)
  760. if(this.value==2){
  761. this.operateList=this.KSoperateList
  762. this.treeData=this.KSaccountList;
  763. this.columns=this.tableTab==1?[...KScolumns]:[...KScolumnsVaild];
  764. this.sectionOption.legend.data=['新上推广组','有效推广组']
  765. }else{
  766. this.operateList=this.KSoperateList
  767. this.treeData=this.KSaccountList;
  768. this.columns=this.tableTab==1?[...KScolumnsPlan]:[...KScolumnsPlanVaild];
  769. this.sectionOption.legend.data=['新上计划数','有效计划数']
  770. }
  771. this.getNewPlan()
  772. },
  773. //项目改变后的事件
  774. treeChange(val) {
  775. // console.log(this.treeData)
  776. console.log(val)
  777. this.accountId = [];
  778. //选择一个后禁用其他
  779. if(val.length==1){
  780. this.operateDisabled=true;
  781. this.opendate=''
  782. if(val[0]*1){
  783. let selectindex=0
  784. this.treeData.forEach((ele,index)=>{
  785. if(ele.children){
  786. ele.children.map((item,ind)=>{
  787. if(item.value==val[0]){
  788. selectindex=index;
  789. this.mediaId=ele.mediaId
  790. }
  791. })
  792. }
  793. });
  794. // console.log(selectindex)
  795. if(selectindex ||selectindex==0){
  796. this.treeData.forEach((ele,index)=>{
  797. if(index!=selectindex){
  798. ele.disableCheckbox = true;
  799. if(ele.children){
  800. ele.children.map((item,ind)=>{
  801. item.disableCheckbox = true;
  802. })
  803. }
  804. }
  805. })
  806. }
  807. }else{
  808. // console.log(1)
  809. this.treeData.forEach((ele,index)=>{
  810. if(ele.value!=val[0]){
  811. ele.disableCheckbox = true;
  812. if(ele.children){
  813. ele.children.forEach((item,ind)=>{
  814. item.disableCheckbox = true;
  815. })
  816. }
  817. }
  818. if(ele.value==val[0]){
  819. this.mediaId=ele.mediaId
  820. }
  821. })
  822. }
  823. // console.log(this.mediaId)
  824. }
  825. if(val.length==0){
  826. this.treeData.forEach((ele,index)=>{
  827. ele.disableCheckbox = false;
  828. this.mediaId=ele.mediaId;
  829. if(ele.children){
  830. ele.children.forEach((item,ind)=>{
  831. item.disableCheckbox = false;
  832. })
  833. }
  834. });
  835. this.operateDisabled=false;
  836. this.operate=this.userId
  837. // this.accountDisabled=true
  838. }
  839. if(val){
  840. val.forEach((ele,index)=>{
  841. if(ele*1){
  842. this.accountId.push(ele)
  843. }else{
  844. let projectArr=this.treeData.filter((item)=>{
  845. return item.value==ele
  846. });
  847. // console.log(projectArr)
  848. projectArr[0].children.forEach((element)=>{
  849. this.accountId.push(element.value)
  850. })
  851. }
  852. })
  853. }
  854. console.log(this.accountId)
  855. },
  856. treeSearch(){
  857. console.log(arguments);
  858. },
  859. treeSelect(){
  860. // console.log(arguments);
  861. // this.treeValue=arguments[0].value
  862. },
  863. disabledDate(current) {
  864. // console.log(current)
  865. // return current && current > moment().add(1, 'day')
  866. return moment().endOf('day');
  867. },
  868. filterOption(input, option){
  869. return (
  870. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  871. );
  872. },
  873. //打开日期框
  874. opendate(){
  875. this.openOptions=!this.openOptions;
  876. // console.log(this.openOptions)
  877. },
  878. // 快手头条的切换
  879. tabChange(key){
  880. console.log(key);
  881. this.treeValue=[];
  882. this.operate=undefined;
  883. this.accountDisabled=false
  884. if(key==1){
  885. // toutiao
  886. this.treeData=this.TTaccountList;
  887. this.operateList=this.TToperateList
  888. this.columns=this.tableTab==1?[...TTcolumns]:[...TTcolumnsVaild]
  889. this.sectionOption.legend.data=['新上计划数','有效计划数']
  890. }else{
  891. // kuaishou
  892. if(this.value==2){
  893. this.operateList=this.KSoperateList
  894. this.treeData=this.KSaccountList;
  895. this.columns=this.tableTab==1?[...KScolumns]:[...KScolumnsVaild]
  896. this.sectionOption.legend.data=['新上推广组','有效推广组']
  897. }else{
  898. this.operateList=this.KSoperateList
  899. this.treeData=this.KSaccountList;
  900. this.columns=this.tableTab==1?[...KScolumnsPlan]:[...KScolumnsPlanVaild]
  901. this.sectionOption.legend.data=['新上计划数','有效计划数']
  902. }
  903. }
  904. this.getNewPlan()
  905. },
  906. operateChange(value){
  907. console.log(value);
  908. if(value){
  909. this.accountDisabled=true;
  910. this.accountId=''
  911. }else{
  912. this.accountDisabled=false
  913. }
  914. },
  915. //初始化chart
  916. getEchartData(idName, optionName) {
  917. const chart = this.$refs[idName]
  918. // console.log(chart)
  919. if (chart) {
  920. // const myChart = echarts.init(document.getElementById(idName))
  921. const myChart = echarts.init(chart)
  922. myChart.setOption(optionName)
  923. window.addEventListener('resize', function() {
  924. myChart.resize()
  925. })
  926. }
  927. },
  928. moment,
  929. // table区域的tab切换
  930. tableTabChange(key){
  931. if(key==1){
  932. this.columns=this.tabKey==1?[...TTcolumns]:[...KScolumns]
  933. this.target='new'
  934. }else{
  935. this.columns=this.tabKey==1?[...TTcolumnsVaild]:[...KScolumnsVaild]
  936. this.target='valid'
  937. }
  938. this.getNewPlan()
  939. },
  940. //处理echart
  941. sectionHttp(params) {
  942. this.loading = true;
  943. this.spinning=true;
  944. this.sectionOption=JSON.parse(JSON.stringify(sectionOption));
  945. return new Promise((resolve, reject) => {
  946. postAction('/ctop/byteDance/homePage/report/chart', params).then(res => {
  947. // console.log(res)
  948. if (res.success) {
  949. this.loading = false
  950. this.spinning=false;
  951. //处理今天
  952. if(res.result){
  953. this.getEchartData('sectionChart', this.sectionOption);
  954. //处理表格数据
  955. let total={
  956. statDate:'总计',
  957. cost:0,
  958. click:0,
  959. clickRate:0,
  960. costProportion:'-',
  961. cp:0,
  962. cpm:0,
  963. showNum:0
  964. }
  965. var afterData=[];
  966. res.result.list.forEach((ele,index)=>{
  967. if(ele.afterData){
  968. if(!ele.afterData.costProportion){
  969. ele.afterData.costProportion='-'
  970. }
  971. if(ele.afterData.statHour||ele.afterData.statHour==0){
  972. ele.afterData.statHour=ele.afterData.statHour > 9 ? `${ele.afterData.statHour}:00` : ` 0${ele.afterData.statHour}:00`
  973. ele.afterData.statDate=ele.afterData.statDate+' '+ele.afterData.statHour
  974. }
  975. ele.afterData.key=index+1
  976. total.click+=ele.afterData.click
  977. total.cost+=ele.afterData.cost
  978. total.showNum+=ele.afterData.showNum;
  979. afterData.push(ele.afterData)
  980. }else{
  981. if(!ele.costProportion){
  982. ele.costProportion='-'
  983. }
  984. if(ele.statHour||ele.statHour==0){
  985. ele.statHour=ele.statHour > 9 ? `${ele.statHour}:00` : ` 0${ele.statHour}:00`
  986. ele.statDate=ele.statDate+' '+ele.statHour
  987. }
  988. ele.key=index+1
  989. total.click+=ele.click
  990. total.cost+=ele.cost
  991. total.showNum+=ele.showNum
  992. }
  993. })
  994. total.cost=(total.cost).toFixed(2)
  995. total.clickRate=(total.click/total.showNum*100).toFixed(2)+'%'
  996. total.cp=(total.cost/total.click).toFixed(2)
  997. total.cpm=(total.cost/total.showNum*1000).toFixed(2)
  998. if(afterData.length>0){
  999. this.tableData=[total,...afterData]
  1000. }else{
  1001. this.tableData=[total,...res.result.list]
  1002. }
  1003. }
  1004. }
  1005. })
  1006. })
  1007. },
  1008. //请求项目和账户内容
  1009. accountHttp(key){
  1010. this.treeData=[]
  1011. this.treeValue=[];
  1012. getAction(`/ctop/projectMember/getProjectAccountByUserId?mediaType=${key}`, {}).then(res => {
  1013. if(res.success){
  1014. // console.log(res);
  1015. if(res.result){
  1016. res.result.forEach((element,index) => {
  1017. if(element){
  1018. if(key==1){
  1019. this.TTaccountList.push({});
  1020. this.TTaccountList[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
  1021. this.TTaccountList[index].value='project'+element.project.projectId;
  1022. this.TTaccountList[index].key=element.project.projectId;
  1023. this.TTaccountList[index].mediaId=element.project.mediaId;
  1024. this.TTaccountList[index].children=[];
  1025. if(element.account.length){
  1026. element.account.forEach((ele,i)=>{
  1027. this.TTaccountList[index].children.push({});
  1028. this.TTaccountList[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
  1029. this.TTaccountList[index].children[i].value=ele.accountId;
  1030. this.TTaccountList[index].children[i].key=ele.accountId;
  1031. })
  1032. }
  1033. }else if(key==2){
  1034. this.KSaccountList.push({});
  1035. this.KSaccountList[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
  1036. this.KSaccountList[index].value='project'+element.project.projectId;
  1037. this.KSaccountList[index].key=element.project.projectId;
  1038. this.KSaccountList[index].mediaId=element.project.mediaId;
  1039. this.KSaccountList[index].children=[];
  1040. if(element.account.length){
  1041. element.account.forEach((ele,i)=>{
  1042. this.KSaccountList[index].children.push({});
  1043. this.KSaccountList[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
  1044. this.KSaccountList[index].children[i].value=ele.accountId;
  1045. this.KSaccountList[index].children[i].key=ele.accountId;
  1046. })
  1047. }
  1048. }
  1049. if(this.tabKey==1){
  1050. this.treeData=this.TTaccountList
  1051. }else{
  1052. this.treeData=this.KSaccountList
  1053. }
  1054. }
  1055. });
  1056. // console.log(this.treeData)
  1057. }
  1058. }
  1059. })
  1060. },
  1061. // 运营数据获取
  1062. operateHttp(){
  1063. postAction('',{}).then(res=>{
  1064. console.log(res)
  1065. })
  1066. },
  1067. // 获取所有运营
  1068. getAllOperator(key){
  1069. let url=''
  1070. this.operateList=[]
  1071. if(key==1){
  1072. // 头条
  1073. url='/ctop/bytedance/newPlan/report/AllOperator'
  1074. }else{
  1075. // 快手
  1076. url='/ctop/kuaishou/newGroup/report/AllOperator'
  1077. }
  1078. postAction(url,{}).then(res=>{
  1079. console.log(res);
  1080. if(res.success){
  1081. if(key==1){
  1082. this.TToperateList=res.result;
  1083. }else{
  1084. this.KSoperateList=res.result;
  1085. }
  1086. if(this.tabKey==1){
  1087. this.operateList=this.TToperateList
  1088. }else{
  1089. this.operateList=this.KSoperateList
  1090. }
  1091. }
  1092. })
  1093. },
  1094. // 获取展示数据
  1095. getNewPlan(){
  1096. let url=''
  1097. if(this.tabKey==1){
  1098. // 头条
  1099. url='/ctop/bytedance/newPlan/report/data'
  1100. }else{
  1101. // 快手
  1102. if(this.value==2){
  1103. url='/ctop/kuaishou/newGroup/report/data'
  1104. }else{
  1105. url='/ctop/kuaishou/newPlan/report/data'
  1106. }
  1107. }
  1108. // if(this.accountId){
  1109. // this.operate='';
  1110. // }else if(this.operate){
  1111. // this.accountId=''
  1112. // }
  1113. this.loading=true;
  1114. this.echartSpinning=true;
  1115. this.sectionOption=JSON.parse(JSON.stringify(sectionOption));
  1116. if(this.tabKey==1){
  1117. this.sectionOption.legend.data=['新上计划数','有效计划数']
  1118. this.sectionOption.series[0].name='新上计划数'
  1119. this.sectionOption.series[1].name='有效计划数'
  1120. }else{
  1121. if(this.value==2){
  1122. this.sectionOption.legend.data=['新上推广组','有效推广组']
  1123. this.sectionOption.series[0].name='新上推广组'
  1124. this.sectionOption.series[1].name='有效推广组'
  1125. }else{
  1126. this.sectionOption.legend.data=['新上计划数','有效计划数']
  1127. this.sectionOption.series[0].name='新上计划数'
  1128. this.sectionOption.series[1].name='有效计划数'
  1129. }
  1130. }
  1131. postAction(url,{
  1132. accountIds:this.accountId,
  1133. userId:this.operate || '',
  1134. startDate:this.dateValue[0].format('YYYY-MM-DD'),
  1135. endDate:this.dateValue[1].format('YYYY-MM-DD'),
  1136. target:this.tableTab=='1'?'new':'valid',
  1137. order:this.order
  1138. }).then(res=>{
  1139. console.log(res);
  1140. this.loading=false;
  1141. this.echartSpinning=false;
  1142. if(res.success){
  1143. if(res.result){
  1144. this.effectPlan=res.result.sumData.valid;
  1145. this.newPlan=res.result.sumData.new;
  1146. this.dataTable=res.result.listData;
  1147. // 处理echar数据
  1148. res.result.chartData.map(item=>{
  1149. this.sectionOption.xAxis.data.push(item.statDate)
  1150. this.sectionOption.series[0].data.push(item.new)
  1151. this.sectionOption.series[1].data.push(item.valid)
  1152. })
  1153. }else{
  1154. this.effectPlan=0;
  1155. this.newPlan=0;
  1156. this.dataTable=[];
  1157. }
  1158. this.getEchartData('sectionChart', this.sectionOption);
  1159. }
  1160. })
  1161. this.getEchartData('sectionChart', this.sectionOption);
  1162. },
  1163. // 查询按钮
  1164. search(){
  1165. if(this.accountId || this.operate){
  1166. this.echartSpinning=true;
  1167. this.getNewPlan()
  1168. }else{
  1169. this.$message.error('请选择具体账户或者运营')
  1170. }
  1171. },
  1172. },
  1173. watch: {
  1174. dateValue(newName,oldName){
  1175. this.search()
  1176. },
  1177. },
  1178. computed: {
  1179. newDate() {
  1180. var myDate = new Date()
  1181. myDate.getYear() //获取当前年份(2位)
  1182. var n = myDate.getFullYear() //获取完整的年份(4位,1970-????)
  1183. var m = myDate.getMonth() //获取当前月份(0-11,0代表1月)
  1184. var d = myDate.getDate() //获取当前日(1-31)
  1185. var day = myDate.getHours()
  1186. return day
  1187. }
  1188. },
  1189. mounted() {
  1190. this.accountHttp(1);
  1191. this.accountHttp(2);
  1192. this.getAllOperator(1)
  1193. this.getAllOperator(2)
  1194. this.accountDisabled=true
  1195. },
  1196. activated: function() {
  1197. this.$nextTick(()=>{
  1198. this.getEchartData('sectionChart', this.sectionOption);
  1199. // this.tabChange(2)
  1200. let userInfo=localStorage.getItem('pro__Login_Userinfo')
  1201. if(userInfo){
  1202. this.userId=JSON.parse(userInfo).value.id;
  1203. this.operate=this.userId;
  1204. this.getNewPlan()
  1205. }
  1206. // console.log(this.userId)
  1207. })
  1208. },
  1209. filters: {
  1210. toPercentage(val) {
  1211. if(typeof val != 'string'){
  1212. return (val * 100).toFixed(2) + '%'
  1213. }else{
  1214. return val
  1215. }
  1216. },
  1217. //保留两位小数并且变成货币格式
  1218. decimalsHandle(val){
  1219. if(val && typeof val !='string'){
  1220. if(val>=0){
  1221. val=parseFloat(val).toFixed(2);
  1222. let numberStr = val.toString()
  1223. let str = numberStr.split('.')
  1224. let str0=str[0].split('').reverse();
  1225. for (let i = 0; i < str0.length; i++) {
  1226. if ((i + 1) % 4 === 0) {
  1227. str0.splice(i, 0, ',')
  1228. }
  1229. }
  1230. str0.reverse()
  1231. let handleResult = ''
  1232. for (let j = 0; j < str0.length; j++) {
  1233. handleResult += str0[j]
  1234. }
  1235. return handleResult+'.'+str[1]
  1236. }else{
  1237. val=parseFloat(val).toFixed(2);
  1238. let numberStr = val.toString()
  1239. let str = numberStr.split('.')
  1240. let str0=str[0].substr(1).split('').reverse();
  1241. for (let i = 0; i < str0.length; i++) {
  1242. if ((i + 1) % 4 === 0) {
  1243. str0.splice(i, 0, ',')
  1244. }
  1245. }
  1246. str0.reverse()
  1247. let handleResult = ''
  1248. for (let j = 0; j < str0.length; j++) {
  1249. handleResult += str0[j]
  1250. }
  1251. return '-'+handleResult+'.'+str[1]
  1252. }
  1253. }else if(typeof val =='string'){
  1254. return val
  1255. }
  1256. else{
  1257. return 0
  1258. }
  1259. },
  1260. //变成货币格式
  1261. formatCurrency(val){
  1262. if(val){
  1263. let numberStr = val.toString()
  1264. let str = numberStr.split('').reverse()
  1265. for (let i = 0; i < str.length; i++) {
  1266. if ((i + 1) % 4 === 0) {
  1267. str.splice(i, 0, ',')
  1268. }
  1269. }
  1270. str.reverse()
  1271. let handleResult = ''
  1272. for (let j = 0; j < str.length; j++) {
  1273. handleResult += str[j]
  1274. }
  1275. return handleResult
  1276. }
  1277. }
  1278. }
  1279. }
  1280. </script>