index.vue 66 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673
  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. .card-person-drawer {
  15. width: 100%;
  16. height: 90%;
  17. overflow: hidden;
  18. padding: 10px 0px;
  19. display: flex;
  20. flex-wrap: wrap;
  21. margin-right: -10px;
  22. justify-content: space-between;
  23. ::v-deep .ant-card-body {
  24. padding: 0;
  25. }
  26. ::v-deep .ant-card-head {
  27. padding: 0 5px;
  28. }
  29. .card-item {
  30. width: calc(25% - 10px);
  31. margin-bottom: 10px;
  32. float: left;
  33. }
  34. .card-item-else {
  35. width: calc(20% - 10px);
  36. margin-bottom: 10px;
  37. float: left;
  38. }
  39. }
  40. </style>
  41. <style scoped>
  42. .showNumBox {
  43. margin: 10px 0;
  44. }
  45. .showNumBox .ant-card-body {
  46. display: flex;
  47. justify-content: center;
  48. }
  49. .showNumBox p,
  50. .showNumBox span {
  51. text-align: center;
  52. line-height: 40px;
  53. font-size: 30px;
  54. font-weight: 600;
  55. color: red;
  56. margin: 0;
  57. }
  58. .search-box .ant-card-body {
  59. padding: 5px 15px;
  60. }
  61. .showNumBox .ant-card-body .styleElse {
  62. line-height: 60px;
  63. height: 40px;
  64. font-size: 16px;
  65. font-weight: 400;
  66. margin-left: 10px;
  67. }
  68. .ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
  69. display: none !important;
  70. }
  71. .yincang .ant-col-6 p {
  72. text-align: left;
  73. color: red;
  74. font-size: 16px;
  75. font-weight: 500;
  76. }
  77. .ant-table-thead div {
  78. font-weight: 700;
  79. }
  80. .tool-tip {
  81. position: absolute;
  82. top: 65px;
  83. right: 10px;
  84. }
  85. </style>
  86. <style lang="less" scoped>
  87. .ant-card-head .ant-tabs-bar {
  88. padding: 0;
  89. }
  90. .search-box .ant-card-body {
  91. padding: 5px 15px;
  92. }
  93. .search-box {
  94. padding: 15px 10px;
  95. }
  96. .search-box p {
  97. display: inline-block;
  98. border: 1px solid #f2f2f2;
  99. border-radius: 5px;
  100. margin-right: 10px;
  101. padding: 5px 10px;
  102. cursor: pointer;
  103. }
  104. .statistics .ant-col-6 .ant-card-body .styleElse {
  105. line-height: 60px;
  106. height: 40px;
  107. font-size: 16px;
  108. font-weight: 400;
  109. margin-left: 10px;
  110. }
  111. .ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
  112. display: none !important;
  113. }
  114. .yincang .ant-col-6 p {
  115. text-align: left;
  116. color: red;
  117. font-size: 16px;
  118. font-weight: 500;
  119. }
  120. .ant-table-thead div {
  121. font-weight: 700;
  122. }
  123. .tool-tip {
  124. position: absolute;
  125. top: 65px;
  126. right: 10px;
  127. }
  128. .statistics {
  129. .ant-card-bordered {
  130. border: none;
  131. }
  132. .ant-card-head .ant-tabs {
  133. clear: both;
  134. margin-bottom: -13px;
  135. color: rgba(0, 0, 0, 0.65);
  136. font-weight: normal;
  137. font-size: 14px;
  138. }
  139. .duibi {
  140. position: absolute;
  141. right: 24px;
  142. top: 15px;
  143. }
  144. p {
  145. margin-bottom: 0;
  146. }
  147. }
  148. </style>
  149. <style lang="less" scoped>
  150. .middle-button {
  151. margin: 0 8px;
  152. }
  153. .newPlanStatic {
  154. .divider {
  155. height: 62px;
  156. }
  157. .showNumBox {
  158. background: white;
  159. overflow: hidden;
  160. margin: 15px 0;
  161. padding: 30px 0;
  162. text-align: center;
  163. .ant-card-body {
  164. padding-top: 0;
  165. }
  166. .title {
  167. font-size: 14px;
  168. font-family: PingFangSC-Regular, PingFang SC;
  169. font-weight: 400;
  170. color: #999999;
  171. line-height: 22px;
  172. display: inline-block;
  173. }
  174. }
  175. .tabbody {
  176. background: white;
  177. padding: 0 24px;
  178. margin-bottom: 15px;
  179. .ant-tabs-bar {
  180. margin: 0;
  181. }
  182. }
  183. .chartBox {
  184. background: white;
  185. padding: 20px 0;
  186. }
  187. .tableBody {
  188. background: white;
  189. padding: 20px;
  190. }
  191. }
  192. </style>
  193. <template>
  194. <div class="newPlanStatic config-project">
  195. <div class="tabbody">
  196. <a-tabs v-model="tabKey" @change="tabChange">
  197. <a-tab-pane :key="1" tab="素材测试配置信息"> </a-tab-pane>
  198. <!-- <a-tab-pane :key="2" tab="账户"> </a-tab-pane> -->
  199. <a-button slot="tabBarExtraContent" type="primary" @click="newCreat(null)">
  200. 创建投放策略
  201. </a-button>
  202. </a-tabs>
  203. </div>
  204. <a-card>
  205. <div class="table-page-search-wrapper">
  206. <a-form layout="inline" :form="form" hide-required-mark :selfUpdate="true" @submit="handleQueryList">
  207. <a-row :gutter="24" v-if="tabKey === 1">
  208. <a-col :md="8" :sm="8" :xxl="6">
  209. <a-form-item label="策略名称">
  210. <a-input
  211. v-decorator="['strategyName']"
  212. type="text"
  213. placeholder="请输入需要搜索的策略名称"
  214. />
  215. </a-form-item>
  216. </a-col>
  217. <!-- -->
  218. <a-col :md="8" :sm="8" :xxl="6">
  219. <a-form-item label="数据周期">
  220. <a-range-picker
  221. :disabled-date="disabledDate"
  222. format="YYYY-MM-DD"
  223. v-decorator="['timeRange', { initialValue: [moment(), moment()] }]"
  224. />
  225. </a-form-item>
  226. </a-col>
  227. <a-col :md="8" :sm="8" :xxl="6">
  228. <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
  229. <a-button type="primary" icon="search" @click="handleQueryList">查询</a-button>
  230. <a-button type="primary" @click="handleResetForm" icon="reload" class="middle-button"
  231. >重置</a-button
  232. >
  233. </span>
  234. </a-col>
  235. </a-row>
  236. </a-form>
  237. </div>
  238. </a-card>
  239. <a-row style="margin-bottom:15px;margin-top:12px">
  240. <a-col :span="24">
  241. <div class="tableBody" style="min-height:200px;padding-bottom: 50px">
  242. <a-table
  243. :columns="columns"
  244. :dataSource="dataSource"
  245. :pagination="false"
  246. :loading="dataLoading"
  247. bordered
  248. @change="tableChange"
  249. :scroll="{ x: 2500 }"
  250. size="middle"
  251. style="word-break: break-all;font-size:16px;font-weight:600"
  252. id="outTable"
  253. ref="accountTable"
  254. >
  255. <span slot="strategyStatus" slot-scope="text, record">
  256. <a-switch :checked="text == 0" @change="onChangeStatus(text, record, 'strategyStatus')" />
  257. </span>
  258. <span slot="statDate" slot-scope="text, record">
  259. {{ record.projectName !== '-' ? text : '-' }}
  260. </span>
  261. <span slot="projectName" slot-scope="text, record">
  262. <a @click="toAccountDetail(record)" v-if="tabKey === 1 && text !== '-'">{{ text }}</a>
  263. <span v-else> {{ text }} </span>
  264. </span>
  265. <span slot="allAccountCount" slot-scope="text, record">
  266. {{ record.successCount + '/' + text }}
  267. </span>
  268. <span slot="action" slot-scope="text, record">
  269. <div v-if="record.projectName !== '-'">
  270. <a @click="editPrice(record)">出价</a>
  271. <a-divider type="vertical" />
  272. <a @click="newCreat(record.id)">编辑</a>
  273. <a-divider type="vertical" />
  274. <a @click="matchingAccount(record)">变量条件</a>
  275. <a-divider type="vertical" />
  276. <a @click="selectMaterial(record)">选择素材</a>
  277. <a-divider type="vertical" />
  278. <a @click="lookPreview(record)">预览</a>
  279. </div>
  280. <div v-else>
  281. -
  282. </div>
  283. </span>
  284. <span slot="charge" slot-scope="text, record">{{
  285. record.reportData.charge | decimalsHandle
  286. }}</span>
  287. <span slot="play3sRate" slot-scope="text, record">{{ record.reportData.play3sRate }}</span>
  288. <span slot="impression1kCost" slot-scope="text, record">{{
  289. record.reportData.impression1kCost
  290. }}</span>
  291. <span slot="photoClick" slot-scope="text, record">{{
  292. record.reportData.photoClick | formatCurrency
  293. }}</span>
  294. <span slot="bclick" slot-scope="text, record">{{
  295. record.reportData.bclick | formatCurrency
  296. }}</span>
  297. <span slot="eventRegister" slot-scope="text, record">{{
  298. record.reportData.eventRegister | decimalsHandle
  299. }}</span>
  300. <span slot="bclickPrice" slot-scope="text, record">{{
  301. record.reportData.bclickPrice | decimalsHandle
  302. }}</span>
  303. <span slot="photoShow" slot-scope="text, record">{{
  304. record.reportData.photoShow | formatCurrency
  305. }}</span>
  306. <span slot="aclick" slot-scope="text, record">{{
  307. record.reportData.aclick | formatCurrency
  308. }}</span>
  309. <span slot="activation" slot-scope="text, record">{{ record.reportData.activation }}</span>
  310. <span slot="eventRegisterPrice" slot-scope="text, record">{{
  311. record.reportData.eventRegisterPrice | decimalsHandle
  312. }}</span>
  313. <span slot="bclickRate" slot-scope="text, record">{{ record.reportData.bclickRate }}</span>
  314. </a-table>
  315. <a-pagination
  316. size="small"
  317. :showTotal="ipagination.showTotal"
  318. style="float: right;margin-top:10px"
  319. v-if="dataSource.length > 0"
  320. showQuickJumper
  321. :pageSize.sync="ipagination.pageSize"
  322. :total="ipagination.total"
  323. v-model="ipagination.current"
  324. @change="getDataSource"
  325. />
  326. </div>
  327. </a-col>
  328. </a-row>
  329. <!-- 修改出价 -->
  330. <a-modal
  331. title="修改出价"
  332. v-if="modifyPriceVisible"
  333. :visible="modifyPriceVisible"
  334. :confirm-loading="modifyPriceLoading"
  335. dialog-class="push-modal"
  336. @ok="handleOkPrice"
  337. @cancel="handleCancelPrice"
  338. >
  339. <a-form
  340. :form="priceForm"
  341. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  342. :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
  343. v-if="modifyPriceDetail"
  344. >
  345. <a-form-item label="策略名称"> {{ modifyPriceDetail.strategyName }} </a-form-item>
  346. <a-form-item label="优化目标">
  347. <a-button type="primary">{{ modifyPriceDetail.bidType | bidType }}</a-button></a-form-item
  348. >
  349. <a-form-item label="转化目标"> {{ modifyPriceDetail.ocpxActionType | ocpxActionType }}</a-form-item>
  350. <a-form-item label="计费方式">
  351. <a-button type="primary">{{
  352. modifyPriceDetail.bidType === 2 ? '点击计费(CPC)' : '按展示付费(oCPM)'
  353. }}</a-button>
  354. </a-form-item>
  355. <a-form-item label="转化目标出价">
  356. <a-input
  357. style="width:200px;ime-mode:disabled"
  358. v-decorator="['cpaBid', { rules: [{ required: true, validator: cpaBidValid }] }]"
  359. >
  360. </a-input>
  361. <br />
  362. <span style="color:red"
  363. >单出价请输入单数字,阶梯出价请用/隔开 例如10/12,区间出价请用-链接 例如20-25</span
  364. >
  365. </a-form-item>
  366. <a-form-item
  367. label="深度转化出价"
  368. v-if="modifyPriceDetail.deepConversionBid && modifyPriceDetail.deepConversionBid != ''"
  369. ><a-input
  370. style="width:200px;ime-mode:disabled"
  371. v-decorator="['deepConversionBid', { rules: [{ required: true, validator: cpaBidValid }] }]"
  372. >
  373. </a-input>
  374. <br />
  375. <span style="color:red"
  376. >单出价请输入单数字,阶梯出价请用/隔开 例如10/12,区间出价请用-链接 例如20-25</span
  377. >
  378. </a-form-item>
  379. </a-form>
  380. </a-modal>
  381. <a-modal
  382. title="变量条件"
  383. :width="800"
  384. v-if="accountVisible"
  385. :visible="accountVisible"
  386. @ok="handleOkVariable"
  387. @cancel="accountVisible = false"
  388. dialog-class="push-modal"
  389. :confirm-loading="variableLoading"
  390. >
  391. <div style="height:600px;overflow:auto">
  392. <a-form
  393. :form="variableForm"
  394. :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
  395. :wrapperCol="{ lg: { span: 19 }, sm: { span: 19 } }"
  396. v-if="accountProjectDetail"
  397. >
  398. <a-form-item label="策略名称">{{ accountProjectDetail.strategyName }} </a-form-item>
  399. <a-form-item label="地区">
  400. <checkBoxGroup
  401. :options="regionData"
  402. v-decorator="[
  403. 'region',
  404. {
  405. rules: [{ required: true, message: '地区必选' }],
  406. initialValue: ['unlimited']
  407. }
  408. ]"
  409. @change="setData($event, 'region')"
  410. />
  411. </a-form-item>
  412. <a-form-item label="年龄">
  413. <checkBoxGroup
  414. :options="ageData"
  415. v-decorator="[
  416. 'agesRange',
  417. { rules: [{ required: true, message: '年龄必选' }], initialValue: ['unlimited'] }
  418. ]"
  419. @change="setData($event, 'agesRange')"
  420. />
  421. </a-form-item>
  422. <a-form-item label="性别">
  423. <checkBoxGroup
  424. :options="[
  425. { label: '不限', value: 'unlimited' },
  426. { label: '女', value: '1' },
  427. { label: '男', value: '2' }
  428. ]"
  429. v-decorator="[
  430. 'gender',
  431. { rules: [{ required: true, message: '性别必选' }], initialValue: ['unlimited'] }
  432. ]"
  433. @change="setData($event, 'gender')"
  434. />
  435. </a-form-item>
  436. <a-form-item label="行为意向">
  437. <checkBoxGroup
  438. :options="[
  439. { label: '不限', value: 'unlimited' },
  440. { label: '系统优选', value: '1' }
  441. ]"
  442. v-decorator="[
  443. 'intentionTarget',
  444. { rules: [{ required: true, message: '行为意向必选' }], initialValue: ['unlimited'] }
  445. ]"
  446. />
  447. </a-form-item>
  448. <a-form-item label="APP行为">
  449. <checkBoxGroup
  450. :options="[
  451. { label: '不限', value: 'unlimited' },
  452. { label: '按App名称', value: '1' }
  453. ]"
  454. v-decorator="[
  455. 'appIds',
  456. { rules: [{ required: true, message: 'APP行为必选' }], initialValue: ['unlimited'] }
  457. ]"
  458. @change="setData($event, 'appIds')"
  459. />
  460. <el-select
  461. v-if="getElseData('appIds') ? getElseData('appIds').includes('1') : false"
  462. v-model="appIds"
  463. multiple
  464. filterable
  465. remote
  466. reserve-keyword
  467. placeholder="请输入关键词"
  468. :remote-method="remoteMethod"
  469. style="margin-top:10px"
  470. >
  471. <el-option
  472. v-for="item in appOptions"
  473. :key="item.value"
  474. :label="item.label"
  475. :value="item.value"
  476. >
  477. </el-option>
  478. </el-select>
  479. </a-form-item>
  480. <a-form-item label="智能扩量">
  481. <!-- {
  482. label: '不可突破年龄',
  483. value: '2',
  484. disabled: getElseData('agesRange')
  485. ? getElseData('agesRange').includes('18') ||
  486. getElseData('agesRange').includes('24') ||
  487. getElseData('agesRange').includes('31') ||
  488. getElseData('agesRange').includes('41') ||
  489. getElseData('agesRange').includes('50')
  490. ? false
  491. : true
  492. : true
  493. },
  494. {
  495. label: '不可突破性别',
  496. value: '3',
  497. disabled: getElseData('gender')
  498. ? getElseData('gender').includes('0') || getElseData('gender').includes('1')
  499. ? false
  500. : true
  501. : true
  502. },
  503. {
  504. label: '不可突破地域',
  505. value: '4',
  506. disabled: getElseData('region')
  507. ? getElseData('region').includes('1') || getElseData('region').includes('2')
  508. ? false
  509. : true
  510. : true
  511. } -->
  512. <checkBoxGroup
  513. :options="[
  514. { label: '关闭', value: '0' },
  515. { label: '开启', value: '1' }
  516. ]"
  517. v-decorator="[
  518. 'intelliExtend',
  519. { rules: [{ required: true, message: '智能扩量必选' }], initialValue: ['0'] }
  520. ]"
  521. />
  522. </a-form-item>
  523. <a-form-item label="投放时段">
  524. <a-button type="primary" @click="addSchedule">新增变量</a-button>
  525. </a-form-item>
  526. <div style="width:100%">
  527. <div v-for="(item, index) in scheduleTimeData" style="margin-bottom:15px;display:flex">
  528. <selectCheckAll
  529. style="width:100%;margin-right:5px"
  530. :scheduleTime.sync="item.scheduleTime"
  531. ref="selectCheck"
  532. />
  533. <a-icon type="delete" v-if="scheduleTimeData.length > 1" @click="deleteSchedule(index)" />
  534. </div>
  535. </div>
  536. </a-form>
  537. </div>
  538. </a-modal>
  539. <!-- 选择素材 -->
  540. <a-modal
  541. title="选择素材"
  542. :width="1000"
  543. v-if="materialVisible"
  544. :visible="materialVisible"
  545. :confirm-loading="materialLoading"
  546. dialog-class="push-modal"
  547. @ok="handleOkMaterial"
  548. @cancel="
  549. materialVisible = false
  550. checkPersonElse = []
  551. checkVideo = []
  552. checkPersonOne = ''
  553. sumContent = 0
  554. "
  555. >
  556. <div style="width:100%;display:flex; justify-content: space-between;">
  557. <span>已选择:{{ sumContent }}</span>
  558. <a-button slot="tabBarExtraContent" type="primary" @click="tongbu()" :loading="tongbuLoading">
  559. 刷新素材</a-button
  560. >
  561. </div>
  562. <a-spin :spinning="spinning">
  563. <a-checkbox-group v-model="checkVideo" style="width: 100%;" @change="setVideoDataAll">
  564. <div class="card-person-drawer info-detail">
  565. <a-card class="card-person card-item" v-for="(item, index) in dataVideoList" :key="index">
  566. <div
  567. slot="title"
  568. style=" overflow: hidden;
  569. text-overflow: ellipsis;
  570. white-space: nowrap;"
  571. >
  572. {{ item.photoName }}
  573. </div>
  574. <div slot="extra">
  575. <a-checkbox :value="item.photoId" @change="setVideoData(item.photoId)"></a-checkbox>
  576. </div>
  577. <div style="width:100%;border: 1px solid #f2f2f2;position:relative">
  578. <img :src="item.coverUrl" style="width:100%" alt="" />
  579. <a-tag
  580. color="blue"
  581. v-if="item.useStatus == 0"
  582. style="position:absolute;top:5px;right:0px"
  583. >
  584. 已测试
  585. </a-tag>
  586. </div>
  587. </a-card>
  588. </div>
  589. </a-checkbox-group>
  590. <div style="text-align:right">
  591. <a-pagination
  592. size="small"
  593. :showTotal="ipaginationVideo.showTotal"
  594. style="float:right"
  595. v-if="dataVideoList.length > 0"
  596. showQuickJumper
  597. :pageSize.sync="ipaginationVideo.pageSize"
  598. :total="ipaginationVideo.total"
  599. v-model="ipaginationVideo.current"
  600. @change="getDataVideo"
  601. />
  602. </div>
  603. </a-spin>
  604. </a-modal>
  605. </div>
  606. </template>
  607. <script>
  608. import { TreeSelect } from 'ant-design-vue'
  609. const SHOW_PARENT = TreeSelect.SHOW_PARENT
  610. import ARow from 'ant-design-vue/es/grid/Row'
  611. import ACol from 'ant-design-vue/es/grid/Col'
  612. import moment from 'moment'
  613. import pick from 'lodash.pick'
  614. import { getKsAccountReport, getKsDetail, getReportList } from '@api/video.js'
  615. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  616. import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
  617. import selectCheckAll from '@/views/modules/kuaishouapp/account/stepForm/stepModule/test'
  618. import qs from 'qs'
  619. function tqFun(qcArr1) {
  620. var tempArr = []
  621. function bbFun(qcArr) {
  622. for (var i = 0; i < qcArr.length; i++) {
  623. if (qcArr[i] instanceof Array) {
  624. bbFun(qcArr[i])
  625. } else {
  626. tempArr.push(qcArr[i])
  627. }
  628. }
  629. return tempArr
  630. }
  631. return bbFun(qcArr1)
  632. }
  633. let TTcolumns = [
  634. {
  635. title: '开关',
  636. dataIndex: 'strategyStatus',
  637. scopedSlots: { customRender: 'strategyStatus' },
  638. align: 'center',
  639. key: 'strategyStatus'
  640. },
  641. {
  642. title: '策略名称',
  643. dataIndex: 'strategyName',
  644. scopedSlots: { customRender: 'strategyName' },
  645. align: 'center',
  646. key: 'strategyName'
  647. },
  648. {
  649. title: '策略日期',
  650. dataIndex: 'createTime',
  651. scopedSlots: { customRender: 'createTime' },
  652. align: 'center',
  653. key: 'createTime'
  654. },
  655. {
  656. title: '操作',
  657. dataIndex: 'action',
  658. scopedSlots: { customRender: 'action' },
  659. align: 'center',
  660. key: 'action',
  661. width: '300px'
  662. },
  663. {
  664. title: '消耗',
  665. dataIndex: 'charge',
  666. scopedSlots: { customRender: 'charge' },
  667. align: 'center',
  668. key: 'charge',
  669. sorter: () => {}
  670. },
  671. {
  672. title: '封面曝光数',
  673. dataIndex: 'photoShow',
  674. scopedSlots: { customRender: 'photoShow' },
  675. align: 'center',
  676. key: 'photoShow',
  677. sorter: () => {}
  678. },
  679. {
  680. title: '封面点击数',
  681. dataIndex: 'photoClick',
  682. scopedSlots: { customRender: 'photoClick' },
  683. align: 'center',
  684. key: 'photoClick',
  685. sorter: () => {}
  686. },
  687. {
  688. title: '素材曝光数',
  689. dataIndex: 'aclick',
  690. scopedSlots: { customRender: 'aclick' },
  691. align: 'center',
  692. key: 'aclick',
  693. sorter: () => {}
  694. },
  695. {
  696. title: '行为数',
  697. dataIndex: 'bclick',
  698. scopedSlots: { customRender: 'bclick' },
  699. align: 'center',
  700. key: 'bclick',
  701. sorter: () => {}
  702. },
  703. {
  704. title: '行为率',
  705. dataIndex: 'bclickRate',
  706. scopedSlots: { customRender: 'bclickRate' },
  707. align: 'center',
  708. key: 'bclickRate',
  709. sorter: () => {}
  710. },
  711. {
  712. title: '平均千次封面曝光花费(元)',
  713. dataIndex: 'impression1kCost',
  714. scopedSlots: { customRender: 'impression1kCost' },
  715. align: 'center',
  716. key: 'impression1kCost',
  717. sorter: () => {}
  718. },
  719. {
  720. title: '平均行为单价(元)',
  721. dataIndex: 'bclickPrice',
  722. scopedSlots: { customRender: 'bclickPrice' },
  723. align: 'center',
  724. key: 'bclickPrice',
  725. sorter: () => {}
  726. },
  727. {
  728. title: '注册数',
  729. dataIndex: 'eventRegister',
  730. scopedSlots: { customRender: 'eventRegister' },
  731. align: 'center',
  732. key: 'eventRegister',
  733. sorter: () => {}
  734. },
  735. {
  736. title: '注册单价',
  737. dataIndex: 'eventRegisterPrice',
  738. scopedSlots: { customRender: 'eventRegisterPrice' },
  739. align: 'center',
  740. key: 'eventRegisterPrice',
  741. sorter: () => {}
  742. }
  743. ]
  744. let KScolumns = []
  745. export default {
  746. components: {
  747. ACol,
  748. ARow,
  749. checkBoxGroup,
  750. selectCheckAll
  751. },
  752. data() {
  753. return {
  754. tongbuLoading: false,
  755. appIds: [],
  756. appOptions: [],
  757. materialVisible: false,
  758. materialLoading: false,
  759. scheduleTimeData: [{ scheduleTime: '' }],
  760. indexAll: 0,
  761. spinning: false,
  762. form: this.$form.createForm(this),
  763. priceForm: this.$form.createForm(this),
  764. variableForm: this.$form.createForm(this),
  765. variableLoading: false,
  766. exportloading: false,
  767. dateRange: [moment().subtract(1, 'weeks'), moment()],
  768. noImg: require('@/assets/noImg.png'),
  769. validationRules: {
  770. bid: [
  771. {
  772. required: true,
  773. message: '出价信息必须填写'
  774. // validator: this.validateBid,
  775. }
  776. ]
  777. },
  778. ipagination: {
  779. current: 1,
  780. pageSize: 10,
  781. // pageSizeOptions: ['10', '20', '30'],
  782. showTotal: (total, range) => {
  783. return range[0] + '-' + range[1] + ' 共' + total + '条'
  784. },
  785. showQuickJumper: true,
  786. showSizeChanger: true,
  787. pageSizeOptions: ['10', '30', '50'],
  788. total: 0,
  789. onChange: (current, pageSize) => {
  790. // 切换分页时的回调,
  791. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  792. this.ipagination.current = current
  793. this.ipagination.pageSize = pageSize
  794. }
  795. },
  796. ipaginationVideo: {
  797. current: 1,
  798. pageSize: 8,
  799. id: '',
  800. accountId: '',
  801. // pageSizeOptions: ['10', '20', '30'],
  802. showTotal: (total, range) => {
  803. return range[0] + '-' + range[1] + ' 共' + total + '条'
  804. },
  805. showQuickJumper: true,
  806. // showSizeChanger: true,
  807. total: 0,
  808. onChange: current => {
  809. // 切换分页时的回调,
  810. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  811. this.ipaginationVideo.current = current
  812. }
  813. },
  814. value: 'valid',
  815. KSaccountList: [],
  816. TTaccountList: [],
  817. KSdesignList: [],
  818. TTdesignList: [],
  819. operateDisabled: false,
  820. duration: 1000,
  821. //treeselect的参数
  822. treeValue: [],
  823. treeData: [],
  824. SHOW_PARENT,
  825. type: 3,
  826. dateValue: [moment().subtract(7, 'days'), moment()],
  827. operate: '',
  828. designList: [],
  829. tabKey: 1,
  830. loading: false,
  831. TTcolumns,
  832. KScolumns,
  833. columns: [...TTcolumns],
  834. dataSource: [],
  835. dataVideoList: [],
  836. checkVideo: [],
  837. checkPersonOne: '',
  838. checkPersonElse: [],
  839. sumContent: 0,
  840. tableTab: 1,
  841. newPlan: 0,
  842. effectPlan: 0,
  843. openOptions: false,
  844. target: 'createTime',
  845. order: 'descend',
  846. projectId: undefined,
  847. projectIdAll: undefined,
  848. dataLoading: false,
  849. url: '/kuaishouProjectStrategy/queryProjectList',
  850. modifyPriceVisible: false,
  851. modifyPriceLoading: false,
  852. modifyPriceDetail: null,
  853. accountVisible: false,
  854. againLoading: false,
  855. accountProjectDetail: null,
  856. regionData: [{ label: '不限', value: 'unlimited' }],
  857. ageData: [{ label: '不限', value: 'unlimited' }]
  858. }
  859. },
  860. methods: {
  861. moment,
  862. tongbu() {
  863. this.tongbuLoading = true
  864. this.getAction('/kuaishou/batch/syncVideo', {
  865. accountId: this.ipaginationVideo.accountId
  866. }).then(res => {
  867. if (res.success) {
  868. this.$message.success(res.message)
  869. this.tongbuLoading = false
  870. postAction('/dimension/kuaiShouDimensionMaterial/getVideoList', {
  871. id: this.ipaginationVideo.id,
  872. accountId: this.ipaginationVideo.accountId,
  873. pageSize: this.ipaginationVideo.pageSize,
  874. pageNo: this.ipaginationVideo.current
  875. }).then(resNei => {
  876. if (resNei.success) {
  877. this.materialVisible = true
  878. this.dataVideoList = resNei.result.list
  879. this.ipaginationVideo.total = resNei.result.total
  880. }
  881. })
  882. } else {
  883. this.$message.error(res.message)
  884. this.tongbuLoading = false
  885. }
  886. })
  887. },
  888. setData(e, type) {
  889. if (type == 'region') {
  890. if (e.includes('1') || e.includes('2')) {
  891. } else {
  892. let region = this.getElseData('intelliExtend')
  893. let regionIndex = region.findIndex(item => item === '4')
  894. if (regionIndex > -1) {
  895. region.splice(regionIndex, 1)
  896. this.variableForm.setFieldsValue({ intelliExtend: region })
  897. }
  898. }
  899. } else if (type == 'agesRange') {
  900. if (e.includes('18') || e.includes('24') || e.includes('31') || e.includes('41') || e.includes('50')) {
  901. } else {
  902. let agesRange = this.getElseData('intelliExtend')
  903. let agesRangeIndex = agesRange.findIndex(item => item === '2')
  904. if (agesRangeIndex > -1) {
  905. agesRange.splice(agesRangeIndex, 1)
  906. this.variableForm.setFieldsValue({ intelliExtend: agesRange })
  907. }
  908. }
  909. } else if (type == 'gender') {
  910. if (e.includes('1') || e.includes('0')) {
  911. } else {
  912. let gender = this.getElseData('intelliExtend')
  913. let genderIndex = gender.findIndex(item => item === '3')
  914. if (genderIndex > -1) {
  915. gender.splice(genderIndex, 1)
  916. this.variableForm.setFieldsValue({ intelliExtend: gender })
  917. }
  918. }
  919. } else if (type == 'appIds') {
  920. if (e.includes('1')) {
  921. } else {
  922. this.appIds = []
  923. }
  924. }
  925. },
  926. newCreat(id) {
  927. if (id) {
  928. this.$router.push({
  929. path: '/autoLaunch/creatMaterialTest?id=' + id
  930. })
  931. } else {
  932. // window.open('/creat-material-test', '_blank')
  933. this.$router.push({
  934. path: '/autoLaunch/creatMaterialTest'
  935. })
  936. }
  937. },
  938. remoteMethod(query) {
  939. if (query !== '') {
  940. getAction('/kuaishou/batch/getAppSearch', {
  941. accountId: this.accountProjectDetail.accountId,
  942. appName: query
  943. }).then(res => {
  944. if (res.result) {
  945. this.appOptions = res.result.map(item => {
  946. return {
  947. value: item.appId,
  948. label: item.appName
  949. }
  950. })
  951. } else {
  952. }
  953. })
  954. } else {
  955. this.appOptions = []
  956. }
  957. },
  958. addSchedule() {
  959. this.scheduleTimeData.push({ scheduleTime: '' })
  960. },
  961. deleteSchedule(index) {
  962. this.scheduleTimeData.splice(index, 1)
  963. },
  964. handleOkVariable() {
  965. this.variableForm.validateFields((err, values) => {
  966. if (!err) {
  967. this.variableLoading = true
  968. let params = { ...values }
  969. params.agesRange = JSON.stringify(values.agesRange)
  970. values.appIds = values.appIds.includes('unlimited') ? ['unlimited'] : []
  971. params.appIds =
  972. this.appIds.length > 0
  973. ? JSON.stringify([values.appIds, this.appIds])
  974. : JSON.stringify([values.appIds])
  975. params.gender = JSON.stringify(values.gender)
  976. params.intelliExtend = JSON.stringify(values.intelliExtend)
  977. params.intentionTarget = JSON.stringify(values.intentionTarget)
  978. params.region = JSON.stringify(values.region)
  979. params.scheduleTime = JSON.stringify(
  980. this.scheduleTimeData.map(item => {
  981. return item.scheduleTime
  982. })
  983. )
  984. if (this.accountProjectDetail.editId) {
  985. params.id = this.accountProjectDetail.editId
  986. this.postDataAction('/dimension/kuaiShouDimensionVariable/edit', params).then(res => {
  987. console.log(res)
  988. if (res.success) {
  989. this.accountVisible = false
  990. this.variableLoading = false
  991. this.variableForm.resetFields()
  992. this.scheduleTimeData = [{ scheduleTime: '' }]
  993. } else {
  994. this.variableLoading = false
  995. this.$message.error('修改失败')
  996. }
  997. })
  998. } else {
  999. params.strategyId = this.accountProjectDetail.id
  1000. this.postDataAction('/dimension/kuaiShouDimensionVariable/add', params).then(res => {
  1001. console.log(res)
  1002. if (res.success) {
  1003. this.accountVisible = false
  1004. this.variableLoading = false
  1005. this.variableForm.resetFields()
  1006. this.scheduleTimeData = [{ scheduleTime: '' }]
  1007. } else {
  1008. this.variableLoading = false
  1009. this.$message.error('添加失败')
  1010. }
  1011. })
  1012. }
  1013. }
  1014. })
  1015. },
  1016. editPrice(item) {
  1017. this.modifyPriceVisible = true
  1018. this.modifyPriceDetail = { ...item }
  1019. this.$nextTick(() => {
  1020. let cpaBid = ''
  1021. let changeBid =
  1022. this.modifyPriceDetail.bidType === 2 ? this.modifyPriceDetail.bid : this.modifyPriceDetail.cpaBid
  1023. if ((changeBid + '').includes('/')) {
  1024. let bidArr = changeBid.split('/')
  1025. for (let index = 0; index < bidArr.length; index++) {
  1026. bidArr[index] = bidArr[index] / 1000
  1027. }
  1028. cpaBid = bidArr.join('/')
  1029. } else if ((changeBid + '').includes('-')) {
  1030. let bidArr = changeBid.split('-')
  1031. for (let index = 0; index < bidArr.length; index++) {
  1032. bidArr[index] = bidArr[index] / 1000
  1033. }
  1034. cpaBid = bidArr.join('-')
  1035. } else {
  1036. cpaBid = changeBid / 1000
  1037. }
  1038. let deepConversionBid = undefined
  1039. if (this.modifyPriceDetail.deepConversionBid && this.modifyPriceDetail.deepConversionBid != '') {
  1040. if ((this.modifyPriceDetail.deepConversionBid + '').includes('/')) {
  1041. let bidArr = this.modifyPriceDetail.deepConversionBid.split('/')
  1042. for (let index = 0; index < bidArr.length; index++) {
  1043. bidArr[index] = bidArr[index] / 1000
  1044. }
  1045. deepConversionBid = bidArr.join('/')
  1046. } else if ((this.modifyPriceDetail.deepConversionBid + '').includes('-')) {
  1047. let bidArr = this.modifyPriceDetail.deepConversionBid.split('-')
  1048. for (let index = 0; index < bidArr.length; index++) {
  1049. bidArr[index] = bidArr[index] / 1000
  1050. }
  1051. deepConversionBid = bidArr.join('-')
  1052. } else {
  1053. deepConversionBid = this.modifyPriceDetail.deepConversionBid / 1000
  1054. }
  1055. }
  1056. this.priceForm.setFieldsValue({
  1057. cpaBid: cpaBid,
  1058. deepConversionBid: deepConversionBid
  1059. })
  1060. })
  1061. },
  1062. handleOkPrice() {
  1063. this.priceForm.validateFields((err, values) => {
  1064. //console.log(values)
  1065. if (!err) {
  1066. this.modifyPriceLoading = true
  1067. if (values.cpaBid) {
  1068. if ((values.cpaBid + '').includes('/')) {
  1069. let bidArr = values.cpaBid.split('/')
  1070. for (let index = 0; index < bidArr.length; index++) {
  1071. bidArr[index] = bidArr[index] * 1000
  1072. }
  1073. values.cpaBid = bidArr.join('/')
  1074. } else if ((values.cpaBid + '').includes('-')) {
  1075. let bidArr = values.cpaBid.split('-')
  1076. for (let index = 0; index < bidArr.length; index++) {
  1077. bidArr[index] = bidArr[index] * 1000
  1078. }
  1079. values.cpaBid = bidArr.join('-')
  1080. } else {
  1081. values.cpaBid = values.cpaBid * 1000
  1082. }
  1083. } else {
  1084. values.cpaBid = 0
  1085. }
  1086. if (values.deepConversionBid) {
  1087. if ((values.deepConversionBid + '').includes('/')) {
  1088. let bidArr = values.deepConversionBid.split('/')
  1089. for (let index = 0; index < bidArr.length; index++) {
  1090. bidArr[index] = bidArr[index] * 1000
  1091. }
  1092. values.deepConversionBid = bidArr.join('/')
  1093. } else if ((values.deepConversionBid + '').includes('-')) {
  1094. let bidArr = values.deepConversionBid.split('-')
  1095. for (let index = 0; index < bidArr.length; index++) {
  1096. bidArr[index] = bidArr[index] * 1000
  1097. }
  1098. values.deepConversionBid = bidArr.join('-')
  1099. } else {
  1100. values.deepConversionBid = values.deepConversionBid * 1000
  1101. }
  1102. } else {
  1103. values.deepConversionBid = 0
  1104. }
  1105. // this.modifyPriceDetail
  1106. let params = {}
  1107. if (this.modifyPriceDetail.bidType === 2) {
  1108. params.bid = values.cpaBid
  1109. if (values.deepConversionBid) {
  1110. params.deepConversionBid = values.deepConversionBid
  1111. }
  1112. } else {
  1113. params = { ...values }
  1114. }
  1115. postAction('/dimension/kuaiShouDimensionStrategy/edit', {
  1116. ...params,
  1117. id: this.modifyPriceDetail.id
  1118. }).then(res => {
  1119. this.modifyPriceLoading = false
  1120. if (res.success) {
  1121. this.handleCancelPrice()
  1122. const paramsData = this.form.getFieldsValue()
  1123. this.handleGetTableList(paramsData)
  1124. } else {
  1125. this.$message.error(res.message)
  1126. }
  1127. })
  1128. } else {
  1129. this.$message.error('请正确填写必填项目')
  1130. }
  1131. })
  1132. },
  1133. handleCancelPrice() {
  1134. this.priceForm.resetFields()
  1135. this.modifyPriceVisible = false
  1136. },
  1137. cpaBidValid(rule, value, callback) {
  1138. let z = /-/g
  1139. let a = /\//g
  1140. let d = /\./g
  1141. if (value === '' || value === undefined) {
  1142. callback('出价必须填写')
  1143. } else if (value.startsWith('.') || value.endsWith('.')) {
  1144. callback('请填写正确出价')
  1145. } else if (value.startsWith('-') || value.endsWith('-')) {
  1146. callback('请填写正确出价')
  1147. } else if (value.match(a) && value.match(z)) {
  1148. callback('不允许出现除"-"和"/"之外的所有字符,并且二者不可同时出现')
  1149. } else if (value.match(/[^0-9+-\/]/g)) {
  1150. callback('请填写正确出价')
  1151. } else {
  1152. callback()
  1153. }
  1154. },
  1155. btKeyUp(e) {
  1156. //没有显示‘破折号’和 '.' 需要的可以手动加上
  1157. // this.priceForm.setFieldsValue({
  1158. // cpaBid: e.target.value.replace(/[^0-9+-\/]/g, '')
  1159. // })
  1160. // (
  1161. // /[\u4e00-\u9fa5/\s+/]|[`~!@#$%^&*() \+ =<>?"{}|, \/ ;' \\ [ \] ·~!@#¥%……&*()—— \+ ={}|《》?:“”【】、;‘’,。、]/g,
  1162. // ''
  1163. // )
  1164. },
  1165. getData(className) {
  1166. return this.priceForm.getFieldValue(className)
  1167. },
  1168. getElseData(className) {
  1169. return this.variableForm.getFieldValue(className)
  1170. },
  1171. againAccount() {
  1172. this.againLoading = true
  1173. this.getAction('/ai/projectCreate/projectAutomaticCreates', {
  1174. id: this.accountProjectDetail.id,
  1175. operationType: 1
  1176. }).then(res => {
  1177. this.againLoading = false
  1178. if (res.success) {
  1179. this.$message.success('重新匹配成功')
  1180. } else {
  1181. this.$message.error(res.message)
  1182. }
  1183. })
  1184. },
  1185. matchingAccount(item) {
  1186. this.accountVisible = true
  1187. this.accountProjectDetail = { ...item }
  1188. getAction('/dimension/kuaiShouDimensionAccount/getStrategyBindAccount', {
  1189. strategyId: item.id
  1190. }).then(res => {
  1191. console.log(res)
  1192. if (res.success) {
  1193. this.accountProjectDetail.accountId = res.result
  1194. } else {
  1195. this.accountProjectDetail.accountId = null
  1196. }
  1197. })
  1198. getAction('/dimension/kuaiShouDimensionVariable/selectVariableByStrategyId', { strategyId: item.id }).then(
  1199. res => {
  1200. if (res.success) {
  1201. getAction('/dimension/kuaiShouDimensionVariable/queryByStrategyId', {
  1202. strategyId: item.id
  1203. }).then(res => {
  1204. if (res.success) {
  1205. if (res.result) {
  1206. this.accountProjectDetail.editId = res.result.id
  1207. let data = {}
  1208. data.region = JSON.parse(res.result.region)
  1209. data.agesRange = JSON.parse(res.result.agesRange)
  1210. data.gender = JSON.parse(res.result.gender)
  1211. data.intentionTarget = JSON.parse(res.result.intentionTarget)
  1212. data.appIds = tqFun(JSON.parse(res.result.appIds))
  1213. if (data.appIds.length >= 1) {
  1214. this.appIds = tqFun(JSON.parse(res.result.appIds))
  1215. let index = this.appIds.findIndex(item => item == 'unlimited')
  1216. if (index > -1) {
  1217. this.appIds.splice(index, 1)
  1218. if (this.appIds.length > 0) {
  1219. data.appIds = ['unlimited', '1']
  1220. } else {
  1221. data.appIds = ['unlimited']
  1222. }
  1223. } else {
  1224. data.appIds = ['1']
  1225. }
  1226. } else if (data.appIds.length == 0) {
  1227. data.appIds = ['unlimited']
  1228. }
  1229. data.intelliExtend = JSON.parse(res.result.intelliExtend)
  1230. this.$nextTick(() => {
  1231. this.scheduleTimeData = JSON.parse(res.result.scheduleTime).map(item => {
  1232. return { scheduleTime: item }
  1233. })
  1234. this.variableForm.setFieldsValue(
  1235. pick(
  1236. data,
  1237. 'region',
  1238. 'agesRange',
  1239. 'gender',
  1240. 'intentionTarget',
  1241. 'appIds',
  1242. 'intelliExtend'
  1243. )
  1244. )
  1245. })
  1246. }
  1247. } else {
  1248. this.accountProjectDetail.editId = null
  1249. }
  1250. })
  1251. }
  1252. }
  1253. )
  1254. },
  1255. selectMaterial(item) {
  1256. getAction('/dimension/kuaiShouDimensionAccount/getStrategyBindAccount', {
  1257. strategyId: item.id
  1258. }).then(res => {
  1259. if (res.success) {
  1260. this.ipaginationVideo.id = item.id
  1261. this.ipaginationVideo.accountId = res.result
  1262. this.ipaginationVideo.current = 1
  1263. postAction('/dimension/kuaiShouDimensionMaterial/getVideoList', {
  1264. id: this.ipaginationVideo.id,
  1265. accountId: this.ipaginationVideo.accountId,
  1266. pageSize: this.ipaginationVideo.pageSize,
  1267. pageNo: this.ipaginationVideo.current
  1268. }).then(resNei => {
  1269. if (resNei.success) {
  1270. this.materialVisible = true
  1271. this.dataVideoList = resNei.result.list
  1272. this.ipaginationVideo.total = resNei.result.total
  1273. }
  1274. })
  1275. } else {
  1276. }
  1277. })
  1278. },
  1279. lookPreview(item) {
  1280. this.$router.push({
  1281. path: '/autoLaunch/lookPreview?id=' + item.id
  1282. })
  1283. // getAction('/dimension/kuaiShouDimensionUnit/previewByStrategyId', { strategyId: item.id }).then(res => {})
  1284. },
  1285. getDataVideo(current, pageSize) {
  1286. // 切换分页时的回调,
  1287. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  1288. this.spinning = true
  1289. this.ipaginationVideo.current = current
  1290. this.ipaginationVideo.pageSize = pageSize
  1291. this.checkVideo = this.checkPersonElse
  1292. this.dataVideoList = []
  1293. postAction('/dimension/kuaiShouDimensionMaterial/getVideoList', {
  1294. id: this.ipaginationVideo.id,
  1295. accountId: this.ipaginationVideo.accountId,
  1296. pageSize: this.ipaginationVideo.pageSize,
  1297. pageNo: this.ipaginationVideo.current
  1298. }).then(resNei => {
  1299. this.spinning = false
  1300. if (resNei.success) {
  1301. this.dataVideoList = resNei.result.list
  1302. this.ipaginationVideo.total = resNei.result.total
  1303. }
  1304. })
  1305. },
  1306. getDataSource(current, pageSize) {
  1307. // 切换分页时的回调,
  1308. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  1309. this.ipagination.current = current
  1310. this.ipagination.pageSize = pageSize
  1311. const paramsData = this.form.getFieldsValue()
  1312. this.handleGetTableList(paramsData)
  1313. },
  1314. handleOkMaterial() {
  1315. let dataAll = this.checkPersonElse
  1316. this.checkVideo = dataAll
  1317. this.materialLoading = true
  1318. this.postDataAction('/dimension/kuaiShouDimensionStrategy/create', {
  1319. id: this.ipaginationVideo.id,
  1320. materialArray: this.checkVideo
  1321. }).then(res => {
  1322. this.materialLoading = false
  1323. if (res.success) {
  1324. this.materialVisible = false
  1325. this.checkPersonElse = []
  1326. this.checkVideo = []
  1327. this.checkPersonOne = ''
  1328. this.sumContent = 0
  1329. }
  1330. })
  1331. },
  1332. setVideoData(data) {
  1333. this.checkPersonOne = data
  1334. },
  1335. setVideoDataAll(data) {
  1336. // checkPerson: [],
  1337. // checkPersonAll: [],
  1338. if (data.findIndex(item => item === this.checkPersonOne) > -1) {
  1339. this.checkPersonElse.push(...data)
  1340. this.checkPersonElse = [...new Set(this.checkPersonElse)]
  1341. } else {
  1342. data.findIndex(item => item === this.checkPersonOne) > -1
  1343. this.checkPersonElse.splice(
  1344. this.checkPersonElse.findIndex(item => item === this.checkPersonOne),
  1345. 1
  1346. )
  1347. }
  1348. this.sumContent = this.checkPersonElse.length
  1349. // var dataCount = 20
  1350. // if (this.sumContent > dataCount) {
  1351. // this.$message.error('最多选择' + dataCount + '个定向')
  1352. // this.checkPerson.pop()
  1353. // this.checkPersonElse.splice(
  1354. // this.checkPersonElse.findIndex(item => item === this.checkPersonOne),
  1355. // 1
  1356. // )
  1357. // this.sumContent--
  1358. // // this.checkPersonAll[this.ipagination.current - 1] = this.checkPerson
  1359. // }
  1360. },
  1361. onChangeStatus(text, rescord, type) {
  1362. let status = text === 0 ? 1 : 0
  1363. let url = ''
  1364. let params = {}
  1365. params.id = rescord.id
  1366. params.strategyStatus = status
  1367. url = '/dimension/kuaiShouDimensionStrategy/edit'
  1368. this.postDataAction(url, params).then(res => {
  1369. if (res.success) {
  1370. const paramsData = this.form.getFieldsValue()
  1371. this.handleGetTableList(paramsData)
  1372. } else {
  1373. this.$message.error(res.message)
  1374. }
  1375. })
  1376. },
  1377. handleQueryList(event) {
  1378. this.ipagination.current = 1
  1379. event.preventDefault()
  1380. const paramsData = this.form.getFieldsValue()
  1381. this.handleGetTableList(paramsData)
  1382. },
  1383. handleResetForm() {
  1384. this.ipagination.current = 1
  1385. this.form.resetFields()
  1386. if (this.tabKey == 1) {
  1387. this.projectId = undefined
  1388. this.projectIdAll = undefined
  1389. }
  1390. const paramsData = this.form.getFieldsValue()
  1391. this.handleGetTableList(paramsData)
  1392. },
  1393. handleGetTableList(data) {
  1394. let paramsData = {
  1395. strategyName: data.strategyName,
  1396. startDate:
  1397. data.timeRange && data.timeRange.length === 2
  1398. ? moment(data.timeRange[0]).format('YYYY-MM-DD')
  1399. : null,
  1400. endDate:
  1401. data.timeRange && data.timeRange.length === 2
  1402. ? moment(data.timeRange[1]).format('YYYY-MM-DD')
  1403. : null,
  1404. pageNo: this.ipagination.current,
  1405. pageSize: this.ipagination.pageSize
  1406. }
  1407. this.dataSource = []
  1408. this.dataLoading = true
  1409. this.getAction('/dimension/kuaiShouDimensionStrategy/list', paramsData)
  1410. .then(result => {
  1411. this.dataLoading = false
  1412. if (result.success) {
  1413. this.dataSource = result.result.records || []
  1414. // if (result.result.total) {
  1415. // this.dataSource.unshift(result.result.total)
  1416. // }
  1417. this.ipagination.total = result.result.total || 0
  1418. // result.result.total
  1419. } else {
  1420. this.$message.error(result.message)
  1421. }
  1422. })
  1423. .catch(error => {
  1424. this.dataLoading = false
  1425. console.log(error, 'eeee')
  1426. })
  1427. },
  1428. getAccountNoProject() {
  1429. this.projectId = undefined
  1430. const paramsData = this.form.getFieldsValue()
  1431. this.handleGetTableList(paramsData)
  1432. },
  1433. toAccountDetail(item) {
  1434. this.tabKey = 2
  1435. this.projectId = { id: item.projectId, name: item.projectName }
  1436. this.url =
  1437. this.tabKey == 1
  1438. ? '/kuaishouProjectStrategy/queryProjectList'
  1439. : '/kuaishouProjectStrategy/queryAccountList'
  1440. this.$nextTick(() => {
  1441. this.columns = this.tabKey == 1 ? [...TTcolumns] : [...KScolumns]
  1442. this.target = this.tabKey == 1 ? 'createTime' : 'statDate'
  1443. const paramsData = this.form.getFieldsValue()
  1444. this.handleGetTableList(paramsData)
  1445. })
  1446. },
  1447. disabledDate(current) {
  1448. // Can not select days before today and today
  1449. return current && current > moment().endOf('day')
  1450. },
  1451. dateChange(date, dateString) {
  1452. // console.log(date,dateString)
  1453. },
  1454. filterOption(input, option) {
  1455. // console.log(input, option)
  1456. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  1457. },
  1458. // 快手头条的切换
  1459. tabChange(key) {
  1460. this.ipagination.current = 1
  1461. this.columns = this.tabKey == 1 ? [...TTcolumns] : [...KScolumns]
  1462. this.url =
  1463. this.tabKey == 1
  1464. ? '/kuaishouProjectStrategy/queryProjectList'
  1465. : '/kuaishouProjectStrategy/queryAccountList'
  1466. this.target = this.tabKey == 1 ? 'createTime' : 'statDate'
  1467. this.projectId = undefined
  1468. const paramsData = this.form.getFieldsValue()
  1469. this.handleGetTableList(paramsData)
  1470. },
  1471. operateChange(value) {
  1472. console.log(value)
  1473. if (value) {
  1474. this.accountDisabled = true
  1475. this.accountId = ''
  1476. } else {
  1477. this.accountDisabled = false
  1478. }
  1479. },
  1480. tableChange(pagination, filters, sorter, { currentDataSource }) {
  1481. this.ipagination.current = pagination.current
  1482. this.ipagination.pageSize = pagination.pageSize
  1483. if (sorter.order) {
  1484. this.order = sorter.order ? sorter.order : 'descend'
  1485. this.target = sorter.columnKey
  1486. const paramsData = this.form.getFieldsValue()
  1487. this.handleGetTableList({
  1488. ...paramsData,
  1489. target: sorter.columnKey,
  1490. order: sorter.order ? sorter.order : 'descend'
  1491. })
  1492. }
  1493. },
  1494. // table区域的tab切换
  1495. tableTabChange(key) {
  1496. if (key == 1) {
  1497. this.columns = this.tabKey == 1 ? [...TTcolumns] : [...KScolumns]
  1498. this.target = 'new'
  1499. } else {
  1500. this.columns = this.tabKey == 1 ? [...TTcolumns] : [...KScolumns]
  1501. this.target = 'valid'
  1502. }
  1503. },
  1504. // 获取所有运营
  1505. getAllOperator(key) {
  1506. let url = '/sys/user/getAllUserListV1'
  1507. this.designList = []
  1508. getAction(url, {}).then(res => {
  1509. if (res.success) {
  1510. this.designList = res.result
  1511. }
  1512. })
  1513. }
  1514. },
  1515. watch: {
  1516. dateValue(newName, oldName) {
  1517. this.search()
  1518. }
  1519. },
  1520. computed: {
  1521. newDate() {
  1522. var myDate = new Date()
  1523. myDate.getYear() //获取当前年份(2位)
  1524. var n = myDate.getFullYear() //获取完整的年份(4位,1970-????)
  1525. var m = myDate.getMonth() //获取当前月份(0-11,0代表1月)
  1526. var d = myDate.getDate() //获取当前日(1-31)
  1527. var day = myDate.getHours()
  1528. return day
  1529. }
  1530. },
  1531. mounted() {
  1532. const paramsData = this.form.getFieldsValue()
  1533. this.handleGetTableList(paramsData)
  1534. this.getAllOperator()
  1535. this.getAction('/dimension/kuaiShouDimensionRegionConfig/list').then(res => {
  1536. if (res.success) {
  1537. let data = res.result.map(item => {
  1538. return {
  1539. label: item.regionGroupName,
  1540. value: item.regionGroupId
  1541. }
  1542. })
  1543. this.regionData.push(...data)
  1544. }
  1545. })
  1546. this.getAction('/dimension/kuaiShouDimensionAgeConfig/list').then(res => {
  1547. if (res.success) {
  1548. let data = res.result.map(item => {
  1549. return {
  1550. label: item.ageGroupName,
  1551. value: item.ageGroupId
  1552. }
  1553. })
  1554. this.ageData.push(...data)
  1555. }
  1556. })
  1557. },
  1558. activated: function() {},
  1559. filters: {
  1560. toPercentage(val) {
  1561. if (typeof val != 'string') {
  1562. return (val * 100).toFixed(2) + '%'
  1563. } else {
  1564. return val
  1565. }
  1566. },
  1567. //保留两位小数并且变成货币格式
  1568. decimalsHandle(val) {
  1569. if (val && typeof val != 'string') {
  1570. if (val >= 0) {
  1571. val = parseFloat(val).toFixed(2)
  1572. let numberStr = val.toString()
  1573. let str = numberStr.split('.')
  1574. let str0 = str[0].split('').reverse()
  1575. for (let i = 0; i < str0.length; i++) {
  1576. if ((i + 1) % 4 === 0) {
  1577. str0.splice(i, 0, ',')
  1578. }
  1579. }
  1580. str0.reverse()
  1581. let handleResult = ''
  1582. for (let j = 0; j < str0.length; j++) {
  1583. handleResult += str0[j]
  1584. }
  1585. return handleResult + '.' + str[1]
  1586. } else {
  1587. val = parseFloat(val).toFixed(2)
  1588. let numberStr = val.toString()
  1589. let str = numberStr.split('.')
  1590. let str0 = str[0]
  1591. .substr(1)
  1592. .split('')
  1593. .reverse()
  1594. for (let i = 0; i < str0.length; i++) {
  1595. if ((i + 1) % 4 === 0) {
  1596. str0.splice(i, 0, ',')
  1597. }
  1598. }
  1599. str0.reverse()
  1600. let handleResult = ''
  1601. for (let j = 0; j < str0.length; j++) {
  1602. handleResult += str0[j]
  1603. }
  1604. return '-' + handleResult + '.' + str[1]
  1605. }
  1606. } else if (typeof val == 'string') {
  1607. return val
  1608. } else {
  1609. return 0
  1610. }
  1611. },
  1612. //变成货币格式
  1613. formatCurrency(val) {
  1614. if (val) {
  1615. let numberStr = val.toString()
  1616. let str = numberStr.split('').reverse()
  1617. for (let i = 0; i < str.length; i++) {
  1618. if ((i + 1) % 4 === 0) {
  1619. str.splice(i, 0, ',')
  1620. }
  1621. }
  1622. str.reverse()
  1623. let handleResult = ''
  1624. for (let j = 0; j < str.length; j++) {
  1625. handleResult += str[j]
  1626. }
  1627. return handleResult
  1628. } else {
  1629. return '-'
  1630. }
  1631. }
  1632. }
  1633. }
  1634. </script>