strategyList.vue 39 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089
  1. <template>
  2. <div class="toutiaoBatch">
  3. <div>
  4. <p class="breadcrumb">
  5. <a-breadcrumb style="display:block;width:100%">
  6. <a-breadcrumb-item ><span class="muen" @click="goPlantForm()">策略</span></a-breadcrumb-item>
  7. <!-- <a-breadcrumb-item>订单列表</a-breadcrumb-item> -->
  8. </a-breadcrumb>
  9. </p>
  10. </div>
  11. <div class="toolbox-automate-rules-create-content_title">
  12. <h3>广告策略</h3>
  13. <a-button type='primary' @click="goCreateStrategy" class="goCreateStrategy">新建策略</a-button>
  14. </div>
  15. <div class="topOptions">
  16. <div>
  17. <!-- <Treeselect :appId.sync="accountId" :multiple="false" request="2" reqUrl='/ctop/projectMember/getProjectAccountByUserId' ref="treeSelect" style="margin-bottom:8px;width:600px " /> -->
  18. <a-select mode="multiple"
  19. v-model="accountIds"
  20. style="width: 600px"
  21. placeholder="请选择账户"
  22. :maxTagCount='1'
  23. allowClear
  24. show-search
  25. option-filter-prop="children"
  26. :filter-option="filterOption"
  27. >
  28. <a-select-option v-for="item in accountList" :key="item.account_id" :value='item.account_id'>
  29. {{ item.auth_name+'_('+(item.project_name||"无所属项目")+')' }}
  30. </a-select-option>
  31. </a-select>
  32. </div>
  33. <!-- <span class="OptinItem ">
  34. reqUrl='/ctop/userAllocation/getAccountIdListByUserId'
  35. <Treeselect :appId.sync="accountIds" :multiple="true" request="2,4" reqUrl='/ctop/userAllocation/getAccountIdsByUserId' ref="treeSelect" style="margin-bottom:8px " />
  36. </span> -->
  37. <span class="OptinItem">
  38. <a-select style="width: 180px" v-model="strategyState" @change="statusChange" placeholder="请选择策略状态">
  39. <a-select-option :value='3' >
  40. 不限
  41. </a-select-option>
  42. <a-select-option :value="1" >
  43. 投放中
  44. </a-select-option>
  45. <a-select-option :value="2">
  46. 已关停
  47. </a-select-option>
  48. </a-select>
  49. </span>
  50. <span class="OptinItem">
  51. <a-input-search placeholder="策略名称" v-model="strategyName" style="width: 280px" />
  52. </span>
  53. <span class="OptinItem">
  54. <a-input-search placeholder="策略ID" v-model="strategyId" style="width: 280px" />
  55. </span>
  56. <!-- <span class="OptinItem">
  57. <a-input-search placeholder="所属账户" v-model="accountId" style="width: 300px" />
  58. </span> -->
  59. <span class="optionBtn">
  60. <a-button type='primary' @click="search" class="searchBtn">查询</a-button>
  61. <!-- <a-button type='default' @click="reset">重置</a-button> -->
  62. </span>
  63. </div>
  64. <div class="tableArea">
  65. <div class="tableOption">
  66. <span class="OptinItem">
  67. <a-tooltip>
  68. <template slot="title" >
  69. 这里可以批量启动、暂停、删除你的选择哦~
  70. </template>
  71. <!-- <a-button type="link" @click="changeSelectStatus">批量操作</a-button> -->
  72. <span >批量操作:</span>
  73. </a-tooltip>
  74. </span>
  75. <span class="OptinItem">
  76. <a-select style="width: 120px" @change="optChange" v-model="optValue" placeholder="请选择批量操作" :disabled='selectedRowKeys.length<=0'>
  77. <a-select-option value="open" >
  78. 启动
  79. </a-select-option>
  80. <a-select-option value="pause">
  81. 暂停
  82. </a-select-option>
  83. <!-- <a-select-option value="delete">
  84. 删除
  85. </a-select-option> -->
  86. </a-select>
  87. </span>
  88. <span class="OptinItem">
  89. <a-popconfirm
  90. title="确定要删除选择的内容吗?"
  91. ok-text="删除"
  92. cancel-text="取消"
  93. @confirm="confirm"
  94. @cancel="cancel"
  95. v-if="optValue=='delete'"
  96. >
  97. <a-button type='primary' @click="isOkHandle" class="ok">确定</a-button>
  98. </a-popconfirm>
  99. <a-button type='primary' @click="isOkHandle" class="ok" v-else>确定</a-button>
  100. </span>
  101. </div>
  102. <div class="table">
  103. <a-table
  104. :columns="columns"
  105. :data-source="data"
  106. :rowSelection="{selectedRowKeys: selectedRowKeys,...rowSelection}"
  107. bordered
  108. :pagination="ipagination"
  109. :loading="loading"
  110. @change="sort"
  111. :scroll="{'x':scrollX}"
  112. >
  113. <span slot="switchStatus" slot-scope="text,record">
  114. <a-spin :spinning="record.spin" size="small" >
  115. <div class="spin-content">
  116. <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
  117. </div>
  118. </a-spin>
  119. </span>
  120. <span slot="createImg" slot-scope="text,record">
  121. <a-popover placement="right">
  122. <template slot="content">
  123. <video :src="record.videoId_dictText" style="width:250px" controls ></video>
  124. </template>
  125. <template slot="title">
  126. </template>
  127. <img :src="record.imageId_dictText" alt="" style="width:100px">
  128. </a-popover>
  129. </span>
  130. <span slot="status" slot-scope="text">
  131. {{text |handlerStatus}}
  132. </span>
  133. <span slot="parentGroup" slot-scope="text">
  134. <a href="javascript:;" >{{text}}</a>
  135. </span>
  136. <span slot="budget" slot-scope="text">
  137. {{text || '不限'}}
  138. </span>
  139. <span slot="parentPlan" slot-scope="text">
  140. <a href="javascript:;" >{{text}}</a>
  141. </span>
  142. <span slot="time" slot-scope="text,record">
  143. {{record.startTime}}至{{record.endTime}}
  144. </span>
  145. <span slot="operator" slot-scope="text,record">
  146. <a href="javascript:;" @click="goPlanList(record)">详情</a>
  147. <a-divider type="vertical" />
  148. <a href="javascript:;" @click="goAnalysis(record)">数据分析</a>
  149. </span>
  150. <span slot="scenes" slot-scope="text">
  151. <span>{{text|scensFilter}}</span>
  152. </span>
  153. <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
  154. <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
  155. <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
  156. <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
  157. <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
  158. <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
  159. <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
  160. <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
  161. <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{ play100FeedBreak | formatCurrency }}</span>
  162. <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
  163. <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
  164. <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
  165. <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
  166. <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
  167. <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
  168. <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
  169. <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
  170. <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
  171. <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
  172. <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
  173. <span slot="photoClick" slot-scope="photoClick">{{ photoClick | formatCurrency }}</span>
  174. <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
  175. <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
  176. <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
  177. <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
  178. <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{ eventCreditGrantLandingPage | formatCurrency }}</span>
  179. <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
  180. <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{ eventCreditGrantLandingPageCost | decimalsHandle }}</span>
  181. <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
  182. <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{ eventCreditGrantLandingPageRate | toPercentage }}</span>
  183. <span
  184. slot="play25FeedBreakRate"
  185. slot-scope="play25FeedBreakRate"
  186. >{{ play25FeedBreakRate | toPercentage }}</span>
  187. <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
  188. <!-- 新加数据 -->
  189. <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
  190. <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
  191. <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
  192. <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
  193. <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
  194. <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
  195. <span
  196. slot="installFinishRate"
  197. slot-scope="installFinishRate"
  198. >{{ installFinishRate | toPercentage }}</span>
  199. <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
  200. <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
  201. <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
  202. <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
  203. <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
  204. <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
  205. <span
  206. slot="gameAddictionCost"
  207. slot-scope="gameAddictionCost"
  208. >{{ gameAddictionCost | decimalsHandle }}</span>
  209. <span
  210. slot="downloadFinishCost"
  211. slot-scope="downloadFinishCost"
  212. >{{ downloadFinishCost | decimalsHandle }}</span>
  213. <span
  214. slot="downloadStartCost"
  215. slot-scope="downloadStartCost"
  216. >{{ downloadStartCost | decimalsHandle }}</span>
  217. <span
  218. slot="installFinishCost"
  219. slot-scope="installFinishCost"
  220. >{{ installFinishCost | decimalsHandle }}</span>
  221. <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>
  222. <!-- -->
  223. <span
  224. slot="downloadStartRate"
  225. slot-scope="downloadStartRate"
  226. >{{ downloadStartRate | toPercentage }}</span>
  227. <span
  228. slot="downloadFinishRate"
  229. slot-scope="downloadFinishRate"
  230. >{{ downloadFinishRate | toPercentage }}</span>
  231. <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
  232. <span
  233. slot="activeRegisterRate"
  234. slot-scope="activeRegisterRate"
  235. >{{ activeRegisterRate | toPercentage }}</span>
  236. <span
  237. slot="gameAddictionRate"
  238. slot-scope="gameAddictionRate"
  239. >{{ gameAddictionRate | toPercentage }}</span>
  240. <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
  241. <!-- <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span> -->
  242. </a-table>
  243. </div>
  244. </div>
  245. <!-- </a-spin> -->
  246. </div>
  247. </template>
  248. <script>
  249. import moment from 'moment';
  250. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  251. // import { JeecgListMixin } from '@/mixins/ipagination'
  252. // import editableCell from './editableCell'
  253. import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  254. import qs from 'qs'
  255. let typeValue='预算'
  256. const strategyColumns = [
  257. {
  258. title: '开关',
  259. dataIndex: 'switchStatus',
  260. key: 'switchStatus',
  261. align: 'center',
  262. scopedSlots: { customRender: 'switchStatus' },
  263. width:80,
  264. fixed: 'left' ,
  265. },
  266. {
  267. title: '广告策略名称',
  268. dataIndex: 'strategyName',
  269. key: 'strategyName',
  270. align: 'center',
  271. scopedSlots: { customRender: 'strategyName' },
  272. width:150,
  273. fixed: 'left' ,
  274. },
  275. {
  276. title: '广告策略ID',
  277. dataIndex: 'id',
  278. key: 'id',
  279. align: 'center',
  280. scopedSlots: { customRender: 'id' },
  281. width:110,
  282. fixed: 'left' ,
  283. },
  284. {
  285. title: '操作',
  286. dataIndex: 'operator',
  287. key: 'operator',
  288. align: 'center',
  289. scopedSlots: { customRender: 'operator' },
  290. width:150,
  291. fixed: 'left' ,
  292. },
  293. {
  294. title: '创建时间',
  295. dataIndex: 'createTime',
  296. key: 'createTime',
  297. align: 'center',
  298. scopedSlots: { customRender: 'createTime' },
  299. },
  300. {
  301. title: '所属账户名称',
  302. dataIndex: 'authName',
  303. key: 'authName',
  304. align: 'center',
  305. scopedSlots: { customRender: 'authName' },
  306. width:200
  307. },
  308. {
  309. title: '所属账户ID',
  310. dataIndex: 'accountId',
  311. key: 'accountId',
  312. align: 'center',
  313. scopedSlots: { customRender: 'accountId' },
  314. },
  315. {
  316. title: '状态',
  317. dataIndex: 'status',
  318. key: 'status',
  319. align: 'center',
  320. scopedSlots: { customRender: 'status' },
  321. },
  322. {
  323. title: '创建场景',
  324. dataIndex: 'scenes',
  325. key: 'scenes',
  326. align: 'center',
  327. scopedSlots: { customRender: 'scenes' },
  328. },
  329. {
  330. title: '策略预算',
  331. dataIndex: 'budget',
  332. key: 'budget',
  333. align: 'center',
  334. scopedSlots: { customRender: 'budget' },
  335. },
  336. ];
  337. const publicColumns = [
  338. {
  339. title: '消耗(元)',
  340. dataIndex: 'cost',
  341. width:150,
  342. tip: '广告在投放期间的花费总额',
  343. align: 'center',
  344. scopedSlots: { customRender: 'cost' },
  345. // sorter: () => {}
  346. },
  347. {
  348. title: '封面曝光数',
  349. dataIndex: 'photoShow',
  350. tip: '广告在瀑布流被观看次数',
  351. align: 'center',
  352. scopedSlots: { customRender: 'photoShow' },
  353. // sorter:() => {}
  354. },
  355. {
  356. title: '封面点击数',
  357. dataIndex: 'photoClick',
  358. tip: '用户点击封面进入视频播放页的次数(数据会进行反作弊去重)',
  359. align: 'center',
  360. scopedSlots: { customRender: 'photoClick' },
  361. // sorter: () => {}
  362. },
  363. {
  364. title: '素材曝光数',
  365. dataIndex: 'aclick',
  366. tip: '用户进入视频播放页观看的次数(数据会进行反作弊去重)',
  367. align: 'center',
  368. scopedSlots: { customRender: 'aClick' },
  369. // sorter:() => {}
  370. },
  371. {
  372. title: '行为数',
  373. dataIndex: 'bclick',
  374. tip: '用户在视频播放页单击转化按钮的次数/展示数*100%',
  375. align: 'center',
  376. scopedSlots: { customRender: 'bClick' },
  377. // sorter:() => {}
  378. },
  379. {
  380. title: '封面点击率',
  381. dataIndex: 'clickRate',
  382. tip: '封面点击数占封面展示数百分比',
  383. align: 'center',
  384. scopedSlots: { customRender: 'clickRate' },
  385. // sorter:() => {}
  386. },
  387. {
  388. title: '行为率',
  389. dataIndex: 'bClickRate',
  390. tip: '行为数占素材曝光数百分比',
  391. align: 'center',
  392. scopedSlots: { customRender: 'bClickRate' },
  393. // sorter:() => {}
  394. },
  395. {
  396. title: '平均千次封面曝光花费(元)',
  397. dataIndex: 'cpm',
  398. tip: '花费/封面曝光数*1000',
  399. align: 'center',
  400. scopedSlots: { customRender: 'cpm' },
  401. // sorter:() => {}
  402. },
  403. {
  404. title: '平均封面点击单价(元)',
  405. dataIndex: 'cpc',
  406. tip: '花费/封面点击数',
  407. align: 'center',
  408. scopedSlots: { customRender: 'cpc' },
  409. // sorter:() => {}
  410. },
  411. {
  412. title: '激活数',
  413. dataIndex: 'active',
  414. tip: '广告主回传的应用激活次数',
  415. align: 'center',
  416. scopedSlots: { customRender: 'active' },
  417. // sorter:() => {}
  418. },
  419. {
  420. title: '激活单价',
  421. dataIndex: 'activeCost',
  422. tip: '花费/激活数',
  423. align: 'center',
  424. scopedSlots: { customRender: 'activeCost' },
  425. // sorter:() => {}
  426. },
  427. {
  428. title: '下载完成激活率',
  429. dataIndex: 'activeRate',
  430. tip: '激活数/安卓下载完成数',
  431. align: 'center',
  432. scopedSlots: { customRender: 'activeRate' },
  433. // sorter:() => {}
  434. },
  435. {
  436. title: '注册数',
  437. dataIndex: 'register',
  438. tip: '付费金额/当日消耗',
  439. align: 'center',
  440. scopedSlots: { customRender: 'register' },
  441. // sorter:() => {}
  442. },
  443. {
  444. title: '注册成本',
  445. dataIndex: 'activeRegisterCost',
  446. tip: '当日消耗/当日回传注册数',
  447. align: 'center',
  448. scopedSlots: { customRender: 'activeRegisterCost' },
  449. // sorter:() => {}
  450. },
  451. {
  452. title: '注册率',
  453. dataIndex: 'activeRegisterRate',
  454. tip: '当日回传注册数/当日激活数',
  455. align: 'center',
  456. scopedSlots: { customRender: 'activeRegisterRate' },
  457. // sorter:() => {}
  458. },
  459. {
  460. title: '次留数',
  461. dataIndex: 'nextDayOpen',
  462. tip: '前一日激活用户在次日继续访问的PV',
  463. align: 'center',
  464. scopedSlots: { customRender: 'nextDayOpen' },
  465. // sorter:() => {}
  466. },
  467. {
  468. title: '次留率',
  469. dataIndex: 'nextDayOpenRate',
  470. tip: '前一日激活用户在次日继续访问的PV/前一日激活数',
  471. align: 'center',
  472. scopedSlots: { customRender: 'nextDayOpenRate' },
  473. // sorter:() => {}
  474. },
  475. ]
  476. export default {
  477. name:'strategy-list',
  478. components: {
  479. // editableCell,
  480. Treeselect,
  481. },
  482. // mixins: [JeecgListMixin],
  483. data() {
  484. return {
  485. accountId:[],
  486. accountList:[],
  487. strategyState:undefined,
  488. strategyName:'',
  489. strategyId:undefined,
  490. accountIds:[],
  491. scrollX:3500,
  492. ipagination: {
  493. current: 1,
  494. pageSize: 10,
  495. // pageSizeOptions: ['10', '20', '30'],
  496. showTotal: (total, range) => {
  497. return range[0] + "-" + range[1] + " 共" + total + "条"
  498. },
  499. showQuickJumper: true,
  500. showSizeChanger:true,
  501. pageSizeOptions: ['10', '30', '50'],
  502. total: 0,
  503. onChange: (current, pageSize) => {
  504. // 切换分页时的回调,
  505. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  506. this.ipagination.current = current;
  507. this.ipagination.pageSize= pageSize;
  508. }
  509. },
  510. spinning:false,
  511. moment,
  512. optionId:'',//input输入的id或关键词
  513. selectDisable:true,
  514. optValue:undefined,//操作设置的值 删除 暂停 开启
  515. visible: false,//出价里的弹出框
  516. //主页的表格
  517. data:[],
  518. columns:[...strategyColumns,...publicColumns],
  519. selectedRowKeys:[],
  520. selectedRows:[],
  521. loading:false,
  522. editID:0,
  523. url: {
  524. planList: "/ai/list/pageCampaign",
  525. groupList:'/ai/list/pageUnit',
  526. strategyList:'/ai/list/pageStrategy'
  527. },
  528. xiugaiData:[],//存分别修改时候的数组
  529. }
  530. },
  531. computed: {
  532. rowSelection(){
  533. return {
  534. onChange: (selectedRowKeys, selectedRows) => {
  535. // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  536. this.selectedRowKeys=selectedRowKeys;
  537. this.selectedRows=selectedRows;
  538. },
  539. onSelect: (record, selected, selectedRows) => {
  540. // console.log(record, selected, selectedRows);
  541. this.modifyTableData=selectedRows;
  542. this.selectedRows=selectedRows;
  543. },
  544. onSelectAll: (selected, selectedRows, changeRows) => {
  545. // console.log(selected, selectedRows, changeRows);
  546. this.modifyTableData=selectedRows
  547. this.selectedRows=selectedRows;
  548. },
  549. }
  550. },
  551. },
  552. methods: {
  553. goCreateStrategy(){
  554. this.$router.push('/autoLaunch/newStrategy')
  555. },
  556. goPlanList(record){
  557. console.log(record)
  558. this.$parent.currentStrategyId=record.id;
  559. this.$parent.currentTabComponent='planList'
  560. },
  561. goAnalysis(record){
  562. console.log(record)
  563. localStorage.setItem('currentStrategy',JSON.stringify(record))
  564. this.$router.push('/autoLaunch/autoLaunchReport')
  565. },
  566. filterOption(input, option) {
  567. return (
  568. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  569. );
  570. },
  571. //状态改变
  572. statusChange(value){
  573. console.log(value);
  574. },
  575. //查询按钮事件
  576. search(){
  577. this.ipagination.current=1;
  578. this.getStrategyList()
  579. },
  580. //点击分页
  581. sort(pagination, filters, sorter, { currentDataSource }){
  582. console.log(pagination)
  583. this.ipagination.current=pagination.current;
  584. this.ipagination.pageSize=pagination.pageSize;
  585. this.getStrategyList()
  586. },
  587. //状态改变
  588. switchChange(text,record){
  589. // this.spinning=true;
  590. console.log(text,record)
  591. record.spin=true;
  592. let ids=record.id;
  593. let state=text?'2':'1';
  594. postAction('/kuaishouStrategy/edit',{
  595. ids:[record.id],
  596. state
  597. }).then((res)=>{
  598. record.spin=false;
  599. if(res.success){
  600. this.getStrategyList()
  601. this.$message.success(res.message)
  602. }else{
  603. this.$message.error(res.message)
  604. }
  605. })
  606. },
  607. //改变批量操作的按钮
  608. changeSelectStatus(){
  609. this.selectDisable=false;
  610. },
  611. //批量操作下的启动 删除 暂停
  612. optChange(value){
  613. // console.log(value)
  614. this.optValue=value;
  615. },
  616. //批量操作的确定按钮
  617. isOkHandle(){
  618. console.log(this.optValue,this.selectedRowKeys)
  619. if(this.optValue&&this.selectedRowKeys.length>0){
  620. // this.selectedRows.forEach(item=>{
  621. // item.spin=true;
  622. // })
  623. let params ={}
  624. if(this.optValue=='pause'){
  625. this.loading=true;
  626. // if(this.selectedRowKeys.length>0){
  627. // this.selectedRows.forEach((item)=>{
  628. // item.optStatus='AD_STATUS_DISABLE'
  629. // })
  630. // }
  631. params['ids']= this.selectedRowKeys
  632. params.state='2'
  633. this.batchEditHttp(params)
  634. }else if(this.optValue=='open'){
  635. this.loading=true;
  636. // if(this.selectedRowKeys.length>0){
  637. // this.selectedRows.forEach((item)=>{
  638. // item.optStatus='AD_STATUS_ENABLE'
  639. // })
  640. // }
  641. params['ids']= this.selectedRowKeys
  642. params.state='1'
  643. this.batchEditHttp(params)
  644. }
  645. }
  646. },
  647. //确定删除
  648. confirm(e) {
  649. // console.log(e);
  650. this.loading=true;
  651. if(this.optValue=='delete'){
  652. // if(this.selectedRowKeys.length>0){
  653. // this.selectedRows.forEach((item)=>{
  654. // item.optStatus='AD_STATUS_DELETE'
  655. // })
  656. // }
  657. this.batchEditHttp(this.selectedRows)
  658. this.$message.success('删除成功');
  659. }
  660. },
  661. batchEditHttp(params){
  662. postAction(`/kuaishouStrategy/edit`,params).then((res)=>{
  663. // console.log(res);
  664. this.optValue=undefined;
  665. if(res.success){
  666. this.getStrategyList()
  667. // params.spin=false;
  668. // params.forEach(item=>{
  669. // item.spin=false;
  670. // })
  671. this.optValue=undefined;
  672. this.selectedRowKeys=[];
  673. this.$message.success(res.message)
  674. }else{
  675. // params.spin=false;
  676. // params.forEach(item=>{
  677. // item.spin=false;
  678. // })
  679. this.loading=false;
  680. this.getStrategyList()
  681. this.$message.error(res.message)
  682. }
  683. })
  684. },
  685. getStrategyList(){
  686. this.loading = true
  687. console.log(this.accountId)
  688. postAction(this.url.strategyList,{
  689. strategyId:this.strategyId==undefined?null:this.strategyId,
  690. strategyName:this.strategyName,
  691. strategyState:this.strategyState==3?null:this.strategyState,
  692. accountIds:this.accountIds,
  693. pageNo:this.ipagination.current,
  694. pageSize:this.ipagination.pageSize
  695. }).then((res)=>{
  696. this.data=[]
  697. console.log(res)
  698. this.loading = false
  699. if(res.success){
  700. this.ipagination.total = res.result.total
  701. res.result.list.forEach((item)=>{
  702. item.key=item.id
  703. })
  704. this.data = res.result.list.map(item=>{
  705. return {
  706. ...item,
  707. spin:false,
  708. switchStatus:item.strategyState=='1'?true:false,
  709. }
  710. });
  711. // console.log(this.data)
  712. this.selectedRowKeys=[];
  713. }
  714. })
  715. },
  716. getAccountList(){
  717. let userInfo=localStorage.getItem('pro__Login_Userinfo');
  718. let userId=''
  719. if(userInfo){
  720. userId=JSON.parse(userInfo).value.id
  721. }
  722. getAction('/ctop/userAllocation/getAccountIdsByUserId',{
  723. userId,
  724. }).then(res=>{
  725. console.log(res)
  726. if(res.success){
  727. this.accountList=res.result
  728. }
  729. })
  730. }
  731. },
  732. mounted() {
  733. this.getAccountList()
  734. this.getStrategyList()
  735. },
  736. activated() {
  737. this.getStrategyList()
  738. },
  739. beforeDestroy() {
  740. },
  741. filters: {
  742. toPercentage(val) {
  743. if(val){
  744. if(typeof val != 'string'){
  745. return (val * 100).toFixed(2) + '%'
  746. }else{
  747. return val
  748. }
  749. }else if(typeof val =='string'){
  750. return val
  751. }
  752. else{
  753. return 0
  754. }
  755. },
  756. //保留两位小数并且变成货币格式
  757. decimalsHandle(val){
  758. if(val && typeof val !='string'){
  759. if(val>=0){
  760. val=parseFloat(val).toFixed(2);
  761. let numberStr = val.toString()
  762. let str = numberStr.split('.')
  763. let str0=str[0].split('').reverse();
  764. for (let i = 0; i < str0.length; i++) {
  765. if ((i + 1) % 4 === 0) {
  766. str0.splice(i, 0, ',')
  767. }
  768. }
  769. str0.reverse()
  770. let handleResult = ''
  771. for (let j = 0; j < str0.length; j++) {
  772. handleResult += str0[j]
  773. }
  774. return handleResult+'.'+str[1]
  775. }else{
  776. val=parseFloat(val).toFixed(2);
  777. let numberStr = val.toString()
  778. let str = numberStr.split('.')
  779. let str0=str[0].substr(1).split('').reverse();
  780. for (let i = 0; i < str0.length; i++) {
  781. if ((i + 1) % 4 === 0) {
  782. str0.splice(i, 0, ',')
  783. }
  784. }
  785. str0.reverse()
  786. let handleResult = ''
  787. for (let j = 0; j < str0.length; j++) {
  788. handleResult += str0[j]
  789. }
  790. return '-'+handleResult+'.'+str[1]
  791. }
  792. }else if(typeof val =='string'){
  793. return val
  794. }
  795. else{
  796. return 0
  797. }
  798. },
  799. //变成货币格式
  800. formatCurrency(val){
  801. if((val||val==0)&& typeof val !='string'){
  802. let numberStr = val.toString()
  803. let str = numberStr.split('').reverse()
  804. for (let i = 0; i < str.length; i++) {
  805. if ((i + 1) % 4 === 0) {
  806. str.splice(i, 0, ',')
  807. }
  808. }
  809. str.reverse()
  810. let handleResult = ''
  811. for (let j = 0; j < str.length; j++) {
  812. handleResult += str[j]
  813. }
  814. return handleResult
  815. }else if(typeof val =='string'){
  816. return val
  817. }
  818. else{
  819. return '-'
  820. }
  821. },
  822. scensFilter(val){
  823. let str='';
  824. switch (val) {
  825. case '1':
  826. str='素材+出价'
  827. break;
  828. case '2':
  829. str='素材+定向'
  830. break;
  831. case '3':
  832. str='时间+出价'
  833. break;
  834. default:
  835. break;
  836. }
  837. return str
  838. },
  839. handlerStatus(val){
  840. let str=''
  841. if(val){
  842. switch (val) {
  843. case 1:
  844. str='投放中'
  845. break;
  846. case 2:
  847. str='已暂停'
  848. break;
  849. // case 3:
  850. // str='已删除'
  851. // break;
  852. // case 3:
  853. // str='已删除'
  854. // break;
  855. // case 3:
  856. // str='已删除'
  857. // break;
  858. default:
  859. break;
  860. }
  861. return str
  862. }else{
  863. return '-'
  864. }
  865. }
  866. }
  867. }
  868. </script>
  869. <style lang="scss">
  870. #closeIcon{
  871. color: #0E74D2;
  872. }
  873. .toutiaoBatch{
  874. .ant-tag .anticon-close {
  875. color: #1890ff;
  876. }
  877. .ant-tag .anticon-close:hover{
  878. color: rgba(0, 0, 0, 0.85);
  879. }
  880. }
  881. .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
  882. background-color: #fff;
  883. color: #333;
  884. }
  885. #batchModal{
  886. .rules,.totalPrice{
  887. font-weight: 600;
  888. }
  889. .selectePlan{
  890. font-size: 14px;
  891. font-weight: 700;
  892. color: #333;
  893. padding: 20px 0;
  894. }
  895. .totalPrice{
  896. margin-left: 20px;
  897. }
  898. .modifyTable{
  899. margin-top: 20px;
  900. width: 100%;
  901. height: 400px;
  902. overflow: auto;
  903. font-weight: 600;
  904. }
  905. }
  906. #copyModal{
  907. .ant-modal-header{
  908. text-align: center;
  909. }
  910. .copyTip{
  911. font-size: 12px;
  912. color: #999;
  913. }
  914. .copyName{
  915. width: 118px;
  916. display: inline-block;
  917. text-align: right;
  918. .copyKeyStart{
  919. color: red;
  920. }
  921. }
  922. // font-weight: 600;
  923. }
  924. </style>
  925. <style lang="scss" scoped>
  926. .toutiaoBatch{
  927. .breadcrumb{
  928. height: 22px;
  929. font-size: 12px;
  930. font-family: PingFangSC-Regular, PingFang SC;
  931. font-weight: 400;
  932. color: #000000;
  933. line-height: 22px;
  934. }
  935. background-color: #fff;
  936. padding: 10px 20px;
  937. position: relative;
  938. width: 100%;
  939. .OptinItem{
  940. display: inline-block;
  941. margin-right: 15px;
  942. margin-top: 15px;
  943. .ok{
  944. margin-right: 15px;
  945. }
  946. }
  947. .OptinItem:first-child{
  948. margin-right: 10px;
  949. }
  950. .topOptions{
  951. padding: 15px 0;
  952. .topOpt{
  953. width: 100%;
  954. margin-bottom: 10px;
  955. }
  956. }
  957. .optionBtn{
  958. // display: inline-block;
  959. float: right;
  960. .searchBtn{
  961. // margin-right: 10px;
  962. }
  963. }
  964. .tableArea{
  965. .tableOption{
  966. padding: 20px 0;
  967. }
  968. }
  969. .toolbox-automate-rules-create-content_title {
  970. background-color: #fff;
  971. display: flex;
  972. flex-flow: row nowrap;
  973. justify-content: flex-start;
  974. align-items: center;
  975. margin-bottom: 28px;
  976. position: relative;
  977. h3 {
  978. font-size: 22px;
  979. margin: 0;
  980. font-weight: 400;
  981. height: 30px;
  982. line-height: 30px;
  983. }
  984. .goCreateStrategy{
  985. position: absolute;
  986. right: 0;
  987. top: 4px;
  988. }
  989. }
  990. }
  991. </style>