newBlankRule.vue 59 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429
  1. <template>
  2. <div class='newBlankRule'>
  3. <div class="toolbox-automate-rules-create-body">
  4. <div class="toolbox-automate-rules-create-content_title"><h3> 新建自动规则</h3></div>
  5. <div class="toolbox-automate-rules-create-content">
  6. <a-form-model
  7. ref="ruleForm"
  8. :model="form"
  9. :rules="rules"
  10. >
  11. <div class="moduler">
  12. <!-- 应用对象 -->
  13. <div class="row-item" >
  14. <div class="hint-item"></div>
  15. <div class="label-item">
  16. <div class="text-item">应用对象</div>
  17. <div class="required-item"></div>
  18. </div>
  19. <div class="input-item">
  20. <a-form-model-item ref="eventRuleLevel" prop="eventRuleLevel">
  21. <a-radio-group v-model="form.eventRuleLevel" @change="applyObjChange">
  22. <a-radio-button value="ACCOUNT">账户</a-radio-button>
  23. <a-radio-button value="CAMPAIGN">计划</a-radio-button>
  24. <a-radio-button value="UNIT">组</a-radio-button>
  25. <!-- <a-radio-button value="CREATE">创意</a-radio-button> -->
  26. </a-radio-group>
  27. </a-form-model-item>
  28. </div>
  29. </div>
  30. <div class="row-item" >
  31. <div class="hint-item"></div>
  32. <div class="label-item">
  33. <div class="text-item">应用账户</div>
  34. <div class="required-item"></div>
  35. </div>
  36. <div class="input-item" >
  37. <a-form-model-item ref="applyAccount" prop="applyAccount" >
  38. <Treeselect :appId.sync="form.applyAccount" :multiple="false" request="2,4" ref="treeSelect" />
  39. </a-form-model-item>
  40. </div>
  41. </div>
  42. <div class="row-item" v-if="form.eventRuleLevel=='UNIT'">
  43. <div class="hint-item"></div>
  44. <div class="label-item">
  45. <div class="text-item">应用计划</div>
  46. <div class="required-item"></div>
  47. </div>
  48. <div class="input-item" >
  49. <a-form-model-item ref="campaignId" prop="campaignId" >
  50. <a-select style="width: 500px" v-model="form.campaignId" allowClear placeholder="选择具体的计划">
  51. <a-select-option v-for="item in campaignList" :key='item.id' :value='item.campaignId'>
  52. {{item.campaignName}}
  53. </a-select-option>
  54. </a-select>
  55. </a-form-model-item>
  56. </div>
  57. </div>
  58. <div class="row-item" v-if="form.eventRuleLevel!='ACCOUNT'">
  59. <div class="hint-item"></div>
  60. <div class="label-item">
  61. <div class="text-item">应用方式</div>
  62. <div class="required-item"></div>
  63. </div>
  64. <div class="input-item" >
  65. <a-form-model-item ref="applyRange" prop="applyRange" >
  66. <a-radio-group v-model="form.applyRange" @change="applyRangeChange">
  67. <a-radio-button value="ACCORDINGTO_STATUS">按状态筛选</a-radio-button>
  68. <a-radio-button value="APPOINT">指定</a-radio-button>
  69. </a-radio-group>
  70. </a-form-model-item>
  71. </div>
  72. </div>
  73. <div class="row-item" v-if="form.applyRange=='ACCORDINGTO_STATUS'&&form.eventRuleLevel!='ACCOUNT'">
  74. <div class="hint-item"></div>
  75. <div class="label-item">
  76. <div class="text-item">选择状态</div>
  77. <div class="required-item"></div>
  78. </div>
  79. <div class="input-item" >
  80. <a-form-model-item ref=" appStatus" prop=" appStatus">
  81. <a-select style="width: 300px" v-model="form. appStatus" >
  82. <a-select-option v-for="item in statusList" :key="item.id" :value='item.value'>
  83. {{item.title}}
  84. </a-select-option>
  85. </a-select>
  86. </a-form-model-item>
  87. </div>
  88. </div>
  89. <div class="row-item" v-if="form.applyRange=='APPOINT'&&form.eventRuleLevel!='ACCOUNT'">
  90. <div class="hint-item"></div>
  91. <div class="label-item">
  92. <div class="text-item">具体{{form.eventRuleLevel | handlerApplyObj}}</div>
  93. <div class="required-item"></div>
  94. </div>
  95. <div class="input-item" >
  96. <a-form-model-item ref="status" prop="status">
  97. <div class="selectedExist">
  98. <!-- <a-input v-model="selectedCampaignValue" class="input" placeholder='请输入名称' @change="selectedCampaign">
  99. <a-icon slot="addonAfter" type="search" />
  100. </a-input> -->
  101. <div style="width: 500px; margin-top: 4px;" >
  102. <div class="inventory-tags-lists-header">
  103. <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
  104. </a-checkbox>
  105. <div class="inventory-tags-lists-name"><strong>列表</strong></div>
  106. </div>
  107. <div class="inventory-tags-lists-container" v-if="form.applyAccount">
  108. <a-spin :spinning="spinning">
  109. <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" v-show='plainOptions.length'></a-checkbox-group>
  110. <div style="text-align: center;padding-top:30px" v-show="!plainOptions.length">
  111. 暂无数据
  112. </div>
  113. </a-spin>
  114. </div>
  115. <div class="inventory-tags-lists-container" style="text-align: center;padding-top:30px" v-else>
  116. 选择具体账户后,可查看
  117. </div>
  118. </div>
  119. <div class="fenye" v-if="totalPage">
  120. <a-pagination :current='currentPage' size='small' :total='totalPage' :pageSize='10' @change="pageNoChange" />
  121. </div>
  122. </div>
  123. </a-form-model-item>
  124. </div>
  125. </div>
  126. <div class="row-item">
  127. <div class="hint-item"></div>
  128. <div class="label-item">
  129. <div class="text-item">规则字段</div>
  130. <div class="required-item"></div>
  131. </div>
  132. <div class="input-item" >
  133. <a-form-model-item ref="metricValueCode" prop="metricValueCode">
  134. <a-select
  135. v-model="form.metricValueCode"
  136. show-search
  137. placeholder="选择规则字段"
  138. option-filter-prop="children"
  139. style="width: 200px"
  140. :filter-option="filterOption"
  141. @change="handleChange"
  142. >
  143. <a-select-option v-for="item in rulesFieldList" :key="item.id" :value='item.metricValueCode'>
  144. {{item.metricValueName}}
  145. </a-select-option>
  146. </a-select>
  147. </a-form-model-item>
  148. </div>
  149. </div>
  150. <div class="row-item" >
  151. <div class="hint-item">
  152. <a-tooltip>
  153. <template slot="title">
  154. 针对计划或者账户粒度的消耗、成本、转化数等数据设置阈值作为监控条件,方便系统判断当前的计划状态;条件之间为「且」的关系
  155. </template>
  156. <a-icon type="question-circle" />
  157. </a-tooltip>
  158. </div>
  159. <div class="label-item">
  160. <div class="text-item">规则条件</div>
  161. <div class="required-item"></div>
  162. </div>
  163. <div class="input-item" >
  164. <div class="toolbox-automate-rules-create-content_rules-and-condition_rules">
  165. <div class="title">
  166. <span class="condition-title">如果</span>
  167. <a-form-model-item ref="causalCondition" prop="causalCondition">
  168. <a-select style="width: 300px" v-model="form.causalCondition">
  169. <a-select-option value='MEET_ALL'>满足以下所有条件</a-select-option>
  170. <!-- <a-select-option value='MEET_ANY'>满足以下任意条件</a-select-option> -->
  171. </a-select>
  172. </a-form-model-item>
  173. </div>
  174. <div class="content">
  175. <div class="rules-list" v-for="(item,index) in rulesList" :key='index'>
  176. <div class="rules-list-item">
  177. <div class="rules-list-item-subject" >
  178. <!-- <a-cascader
  179. v-model="item.metricValueName"
  180. :options="condition"
  181. :display-render="displayRender"
  182. expand-trigger="hover"
  183. placeholder=""
  184. @change="conditionChange(item)"
  185. /> -->
  186. <span class="ruleName">
  187. {{item.metricValueName || '消耗'}}
  188. </span>
  189. </div>
  190. <template v-if="form.metricValueCode!='campaignStatus'&&form.metricValueCode!='unitStatus'">
  191. <div class="rules-list-item-subject" >
  192. <a-select v-model="item.dataRange">
  193. <a-select-option value='CURRENT_DAY_DATA'>当天数据</a-select-option>
  194. </a-select>
  195. </div>
  196. <div class="rules-list-item-subject" >
  197. <a-select v-model="item.judgeMethod">
  198. <a-select-option value='GT_EQ'>大于等于</a-select-option>
  199. <a-select-option value='LT_EQ'>小于等于</a-select-option>
  200. <a-select-option value='BETWEEN'>介于</a-select-option>
  201. </a-select>
  202. </div>
  203. <!-- -->
  204. <div class="rules-list-item-subject" v-if="isCost(item.metricValueCode)">
  205. <a-select v-model="item.judgeType">
  206. <a-select-option value='MONEY'>金额</a-select-option>
  207. <!-- <a-select-option value='DAY_BUDGET'>日预算</a-select-option> -->
  208. </a-select>
  209. </div>
  210. <!-- <div class="rules-list-item-subject" v-if="item.judgeType=='MONEY'&&item.judgeMethod!='BETWEEN'">
  211. <a-input-number :min="0" style="width:100%" :max="9999999.99" :step="1" v-model="item.specificMoney" placeholder="请输入" />
  212. <span style="margin-left:8px;line-height:32px">元</span>
  213. </div> -->
  214. <div class="rules-list-item-subject" v-if="item.judgeMethod=='BETWEEN'" style="margin-right:5px">
  215. <a-input-number :min="0" style="width:100%" :max="9999999.99" :step="1" v-model="item.minThreshold" placeholder="请输入" @blur="inputCheck" />
  216. <!-- <span style="margin-left:8px;line-height:32px">{{item.metricValueCode | handlerDANWEI }}</span> -->
  217. </div>
  218. <span style="margin-right:5px" v-if="item.judgeMethod=='BETWEEN'">~</span>
  219. <div class="rules-list-item-subject" >
  220. <a-input-number :min="0" style="width:100%" :max="9999999.99" :step="1" v-model="item.threshold" placeholder="请输入" />
  221. <span style="margin-left:8px;line-height:32px">{{item.metricValueCode | handlerDANWEI }}</span>
  222. </div>
  223. </template>
  224. <!-- <div class="rules-list-item-subject" v-if="item.judgeType=='DAY_BUDGET'&&item.judgeMethod!='BETWEEN'">
  225. <a-select v-model="item.budgetMultiple">
  226. <a-select-option v-for="item in budgetMultipleArr" :key="item.value" :value='item.value' >{{item.label}}</a-select-option>
  227. </a-select>
  228. </div> -->
  229. <!-- <div class="rules-list-item-subject" v-if="item.judgeType=='DAY_BUDGET'&&item.judgeMethod!='LT_EQ'">
  230. <a-select v-model="item.budgetMultipleMin">
  231. <a-select-option v-for="item in budgetMultipleArr" :key="item.value" :value='item.value' >{{item.label}}</a-select-option>
  232. </a-select>
  233. </div>
  234. <span style="margin-right:20px" v-if="item.judgeType=='DAY_BUDGET'&&item.judgeMethod=='BETWEEN'">-</span>
  235. <div class="rules-list-item-subject" v-if="item.judgeType=='DAY_BUDGET'&&item.judgeMethod!='GT_EQ'">
  236. <a-select v-model="item.budgetMultipleMax">
  237. <a-select-option v-for="item in budgetMultipleArr" :key="item.value" :value='item.value' >{{item.label}}</a-select-option>
  238. </a-select>
  239. </div> -->
  240. <!-- 处理不是消耗的情况 -->
  241. <!-- <div class="rules-list-item-subject" v-if="item.metricValueName[1]!='COST'&&item.judgeMethod!='LT_EQ'">
  242. <a-input-number :min="0" style="width:100%" :max="9999999.99" :step="1" v-model="item.threshold" placeholder="请输入" />
  243. <span style="margin-left:8px;line-height:32px">{{item.metricValueCode | handlerDANWEI}}</span>
  244. </div>
  245. <span style="margin-right:20px" v-if="item.metricValueName[1]!='COST'&&item.judgeMethod=='BETWEEN'">-</span>
  246. <div class="rules-list-item-subject" v-if="item.metricValueName[1]!='COST'&&item.judgeMethod!='GT_EQ'">
  247. <a-input-number :min="0" style="width:100%" :max="9999999.99" :step="1" v-model="item.maxNumber" placeholder="请输入" />
  248. <span style="margin-left:8px;line-height:32px">{{item.metricValueCode | handlerDANWEI }}</span>
  249. </div> -->
  250. <!-- <div class="rules-list-item-delete" @click="deleteRulesListItem(item,index)">
  251. <a-icon type="delete" style="font-size:16px;position: relative;top: 4px;" />
  252. </div> -->
  253. <div class="rules-list-item-subject" v-if="form.metricValueCode=='campaignStatus'">
  254. <a-select v-model="item.campaignStatus" placeholder="请输入具体状态">
  255. <a-select-option value='-1'>不限</a-select-option>
  256. <a-select-option value='1'>已暂停</a-select-option>
  257. <a-select-option value='3'>计划超预算</a-select-option>
  258. <a-select-option value='4'>有效</a-select-option>
  259. <a-select-option value='5'>已删除</a-select-option>
  260. <a-select-option value='6'>余额不足</a-select-option>
  261. </a-select>
  262. </div>
  263. <div class="rules-list-item-subject" v-if="form.metricValueCode=='unitStatus'">
  264. <a-select v-model="item.unitStatus" placeholder="请输入具体状态">
  265. <a-select-option value='-1'>不限</a-select-option>
  266. <a-select-option value='1'>计划已暂停</a-select-option>
  267. <a-select-option value='3'>计划超预算</a-select-option>
  268. <a-select-option value='6'>余额不足</a-select-option>
  269. <a-select-option value='11'>审核中</a-select-option>
  270. <a-select-option value='12'>审核未通过</a-select-option>
  271. <a-select-option value='14'>已结束</a-select-option>
  272. <a-select-option value='15'>已暂停</a-select-option>
  273. <a-select-option value='17'>组超预算</a-select-option>
  274. <a-select-option value='19'>未达投放时间</a-select-option>
  275. <a-select-option value='20'>有效</a-select-option>
  276. </a-select>
  277. </div>
  278. </div>
  279. </div>
  280. <!-- <div class="add-rule" @click="addRule"> 添加条件</div> -->
  281. </div>
  282. </div>
  283. <div class="toolbox-automate-rules-create-content_rules-and-condition_rules">
  284. <div class="title">
  285. <span class="condition-title">则依次执行以下操作</span>
  286. </div>
  287. <div class="content">
  288. <div class="rules-list">
  289. <div class="rules-list-item">
  290. <div class="rules-list-item-subject" >
  291. <a-form-model-item ref="processMethod" prop="processMethod">
  292. <a-select v-model="form.processMethod">
  293. <a-select-option value='PAUSE' >关停组</a-select-option>
  294. <a-select-option value='SEND'>仅发送通知</a-select-option>
  295. </a-select>
  296. </a-form-model-item>
  297. </div>
  298. </div>
  299. </div>
  300. </div>
  301. </div>
  302. </div>
  303. </div>
  304. <div class="row-item" >
  305. <div class="hint-item"></div>
  306. <div class="label-item">
  307. <div class="text-item">检查时间</div>
  308. <div class="required-item"></div>
  309. </div>
  310. <div class="input-item">
  311. <a-form-model-item ref="checkFrequency" prop="checkFrequency">
  312. <a-radio-group v-model="form.checkFrequency">
  313. <!-- <a-radio-button value="DAY">每天</a-radio-button> -->
  314. <a-radio-button value="HOUR">每小时</a-radio-button>
  315. <a-radio-button value="HALF_AN_HOUR">每半小时</a-radio-button>
  316. <!-- <a-radio-button value="CUSTOM_TIME">自定义</a-radio-button> -->
  317. </a-radio-group>
  318. </a-form-model-item>
  319. </div>
  320. </div>
  321. <div class="row-item" v-if="form.checkFrequency=='DAY'">
  322. <div class="hint-item"></div>
  323. <div class="label-item">
  324. <div class="text-item">选择时刻</div>
  325. <div class="required-item"></div>
  326. </div>
  327. <div class="input-item">
  328. <a-form-model-item ref="specificMoment" prop="specificMoment">
  329. <a-select style="width: 300px" placeholder="请选择具体时刻" v-model="form.specificMoment">
  330. <a-select-option v-for="(item,index) in 24" :key="item" :value='index'>
  331. {{index>10?`${index}:00`:`0${index}:00`}}
  332. </a-select-option>
  333. </a-select>
  334. </a-form-model-item>
  335. </div>
  336. </div>
  337. <!-- <div class="row-item" >
  338. <div class="hint-item"></div>
  339. <div class="label-item">
  340. <div class="text-item">发送通知</div>
  341. <div class="required-item"></div>
  342. </div>
  343. <div class="input-item">
  344. <a-form-model-item ref="sendMessage" prop="sendMessage">
  345. <a-radio-group v-model="form.sendMessage">
  346. <a-radio-button :value="1">发送</a-radio-button>
  347. <a-radio-button :value="0">不发送</a-radio-button>
  348. </a-radio-group>
  349. </a-form-model-item>
  350. </div>
  351. </div> -->
  352. <div class="row-item" >
  353. <div class="hint-item"></div>
  354. <div class="label-item">
  355. <div class="text-item">规则名称</div>
  356. <div class="required-item"></div>
  357. </div>
  358. <div class="input-item">
  359. <a-form-model-item ref="eventRuleName" prop="eventRuleName">
  360. <a-input
  361. v-model="form.eventRuleName"
  362. allowClear
  363. />
  364. </a-form-model-item>
  365. </div>
  366. </div>
  367. </div>
  368. <div class="moduler">
  369. <!-- <div class="moduler-title">计划名称</div> -->
  370. <div class="opt">
  371. <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
  372. <a-button type="primary" style="margin-right:15px" @click="saveHandler" :loading="saveLoading">保存</a-button>
  373. </div>
  374. </div>
  375. </a-form-model>
  376. </div>
  377. </div>
  378. </div>
  379. </template>
  380. <script>
  381. import moment from 'moment';
  382. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  383. import { Switch } from 'ant-design-vue';
  384. import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  385. let statusList=[
  386. // {
  387. // id:1,
  388. // value:'STATUS_ALL',
  389. // title:'所有',
  390. // },
  391. // STATUS_DELIVERY_OK
  392. {
  393. id:2,
  394. value:"1",
  395. title:'所有投放中',
  396. },
  397. // {
  398. // id:3,
  399. // value:'STATUS_CREATE',
  400. // title:'所有新建',
  401. // },
  402. // {
  403. // id:4,
  404. // value:'STATUS_DISABLE',
  405. // title:'所有已暂停',
  406. // },
  407. // {
  408. // id:5,
  409. // value:'STATUS_AUDIT',
  410. // title:'所有新建审核',
  411. // },
  412. // {
  413. // id:6,
  414. // value:'STATUS_DONE',
  415. // title:'所有已完成',
  416. // },
  417. ]
  418. let condition=[
  419. {
  420. value:'0',
  421. label:'展示数据',
  422. children:[
  423. {
  424. value:'SHOW',
  425. label:'展示数',
  426. },
  427. {
  428. value:'CLICK',
  429. label:'点击数',
  430. },
  431. {
  432. value:'CLICK_RATE',
  433. label:'点击率',
  434. },
  435. {
  436. value:'COST',
  437. label:'消耗',
  438. },
  439. {
  440. value:'AD_CLICK_PRICE',
  441. label:'平均点击单价',
  442. },
  443. ]
  444. },
  445. {
  446. value:'1',
  447. label:'转化数据',
  448. children:[
  449. {
  450. value:'CONVERT',
  451. label:'转化数',
  452. },
  453. {
  454. value:'CONVERT_COST',
  455. label:'转化成本',
  456. },
  457. {
  458. value:'CONVERT_RATE',
  459. label:'转化率',
  460. },
  461. {
  462. value:'DEEP_CONVERT',
  463. label:'深度转化数',
  464. },
  465. {
  466. value:'DEEP_CONVERT_COST',
  467. label:'深度转化成本',
  468. },
  469. {
  470. value:'DEEP_CONVERT_RATE',
  471. label:'深度转化率',
  472. },
  473. ]
  474. }
  475. ]
  476. let budgetMultipleArr=[
  477. {
  478. value:0.5,
  479. label:'0.5倍预算',
  480. },
  481. {
  482. value:0.8,
  483. label:'0.8倍预算',
  484. },
  485. {
  486. value:1,
  487. label:'1倍预算',
  488. },
  489. {
  490. value:1.5,
  491. label:'1.5倍预算',
  492. },
  493. ]
  494. export default {
  495. components:{
  496. Treeselect,
  497. },
  498. data() {
  499. return {
  500. campaignList:[],
  501. currentRuleId:'',
  502. rulesFieldList:[],
  503. accountID:undefined,
  504. selectedCampaignValue:undefined,
  505. spinning:false,
  506. campaignHaveList:[],
  507. currentPage:1,
  508. totalPage:0,
  509. checkedList: [],
  510. indeterminate: false,
  511. checkAll: false,
  512. plainOptions:[],
  513. saveLoading:false,
  514. // 用到的参数数组
  515. condition,
  516. statusList,
  517. budgetMultipleArr,
  518. accountList:[],
  519. form: {
  520. eventRuleName: `空白规则_${moment().format('YYYY_MM_DD_hh:mm:ss')}`,
  521. eventRuleLevel:'ACCOUNT',
  522. applyAccount:'',
  523. campaignId:undefined,
  524. applyRange:'ACCORDINGTO_STATUS',
  525. appStatus:'1',
  526. sendMessage:1,
  527. checkFrequency:'HOUR',
  528. causalCondition:'MEET_ALL', //因果条件 满足所有/满足任意
  529. processMethod:'SEND',
  530. metricValueCode:undefined,
  531. },
  532. rules: {
  533. eventRuleName: [
  534. { required: true, message: '请填写规则的具体名称', trigger: 'blur' },
  535. { min: 2, message: '长度不得小于2', trigger: 'blur' },
  536. ],
  537. metricValueCode: [{ required: true, message: '请选择规则字段', trigger: 'change' }],
  538. applyRange: [{ required: true, message: '请选择具体应用范围', trigger: 'change' }],
  539. applyAccount: [{required: true, message: '请选择具体应用范围', trigger: 'change' }],
  540. specificMoment: [{required: true, message: '请选择具体时刻', trigger: 'change' }],
  541. money: [
  542. { required: true, message: '请填写具体金额', trigger: 'blur' },
  543. // { min: 2, message: '长度不得小于2', trigger: 'blur' },
  544. ],
  545. },
  546. rulesList:[
  547. {
  548. metricValueName:'',
  549. metricValueCode:'',
  550. dataRange:'CURRENT_DAY_DATA',
  551. judgeMethod:'GT_EQ',
  552. judgeType:'MONEY',
  553. threshold:0,
  554. minThreshold:0,
  555. campaignStatus:undefined,
  556. unitStatus:undefined,
  557. // budgetMultiple:0.5,
  558. // budgetMultipleMin:0.5,
  559. // budgetMultipleMax:0.8,
  560. // specificMoney:undefined,
  561. // specificMoneyMin:undefined,
  562. // specificMoneyMax:undefined,
  563. }
  564. ],
  565. accountFieldList:[],
  566. campaignFieldList:[],
  567. unitFieldList:[],
  568. }
  569. },
  570. watch:{
  571. 'form.applyAccount'(n,o){
  572. this.campaignList=[];
  573. this.form.campaignId=''
  574. if(n){
  575. this.spinning=true;
  576. if(this.form.eventRuleLevel=='CAMPAIGN'){
  577. this.getCampaignList()
  578. }else if(this.form.eventRuleLevel=='UNIT'){
  579. this.getCampaignList()
  580. this.getUnitList()
  581. }
  582. }else if(!n){
  583. this.plainOptions=[];
  584. }
  585. },
  586. 'form.campaignId'(n,o){
  587. this.spinning=true;
  588. this.getUnitList()
  589. }
  590. },
  591. methods: {
  592. // 应用方式改变
  593. applyRangeChange(e){
  594. console.log(e.target.value)
  595. this.checkedList=[];
  596. this.checkAll=false;
  597. this.indeterminate=false;
  598. if(e.target.value=='ACCORDINGTO_STATUS'){
  599. this.form.appStatus='1';
  600. }else{
  601. this.form.appStatus=null;
  602. }
  603. },
  604. // 获取计划列表
  605. getCampaignList(){
  606. getAction('/kuaishou/batch/getCampaignList',{
  607. accountId:this.form.applyAccount,
  608. putStatus:1,
  609. pageNo:1,
  610. pageSize:100000,
  611. }).then(res=>{
  612. console.log(res);
  613. this.plainOptions=[];
  614. this.spinning=false;
  615. if(res.success){
  616. if(this.form.eventRuleLevel=='CAMPAIGN'){
  617. this.plainOptions=res.result.records.map(item=>{
  618. return {
  619. ...item,
  620. label:item.campaignName,
  621. value:item.campaignId
  622. }
  623. })
  624. }
  625. this.campaignList=res.result.records
  626. }
  627. })
  628. },
  629. // 获取计划列表
  630. getUnitList(){
  631. getAction('/kuaishou/batch/getUnitList',{
  632. accountId:this.form.applyAccount,
  633. campaignId:this.form.campaignId,
  634. pageNo:1,
  635. pageSize:100000,
  636. }).then(res=>{
  637. console.log(res);
  638. this.plainOptions=[];
  639. this.spinning=false;
  640. if(res.success){
  641. this.plainOptions=res.result.records.map(item=>{
  642. return {
  643. ...item,
  644. label:item.unitName+'_('+item.reviewDetail+')',
  645. value:item.unitId
  646. }
  647. })
  648. }
  649. })
  650. },
  651. inputCheck(val){
  652. console.log(val)
  653. },
  654. isCost(val){
  655. if(val.indexOf('Cost') != -1){
  656. return true
  657. } else if(val.indexOf('depletion') != -1){
  658. return true
  659. }else{
  660. return false
  661. }
  662. },
  663. handleChange(value) {
  664. console.log(value,this.metricValueCode);
  665. let rulesList={};
  666. rulesList=this.rulesFieldList.filter(item=>{
  667. return item.metricValueCode==value
  668. })[0]
  669. console.log(rulesList);
  670. this.rulesList=[]
  671. rulesList.childs.forEach((ele,index)=>{
  672. this.rulesList.push({
  673. metricValueName:ele.metricValueName,
  674. metricValueCode:ele.metricValueCode,
  675. dataRange:'CURRENT_DAY_DATA',
  676. judgeMethod:'GT_EQ',
  677. judgeType:'MONEY',
  678. threshold:undefined,
  679. minThreshold:undefined,
  680. campaignStatus:undefined,
  681. unitStatus:undefined,
  682. })
  683. })
  684. },
  685. filterOption(input, option) {
  686. return (
  687. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  688. );
  689. },
  690. // form-modal 自带方法
  691. onSubmit() {
  692. this.$refs.ruleForm.validate(valid => {
  693. if (valid) {
  694. console.log('submit!',valid);
  695. } else {
  696. console.log('error submit!!');
  697. return false;
  698. }
  699. });
  700. },
  701. resetForm() {
  702. this.$refs.ruleForm.resetFields();
  703. },
  704. addRule(){
  705. this.rulesList.push({
  706. metricValueName:['0','COST'],
  707. dataRange:'CURRENT_DAY_DATA',
  708. judgeMethod:'GT_EQ',
  709. judgeType:'MONEY',
  710. budgetMultiple:0.5,
  711. budgetMultipleMin:0.5,
  712. budgetMultipleMax:0.8,
  713. campaignStatus:undefined,
  714. unitStatus:undefined,
  715. threshold:0,
  716. maxNumber:0,
  717. })
  718. },
  719. deleteRulesListItem(item,index){
  720. console.log(item,index)
  721. this.rulesList=this.rulesList.filter((ele,ind)=>{
  722. return ind!=index
  723. })
  724. },
  725. displayRender({ labels }) {
  726. return labels[labels.length - 1];
  727. },
  728. conditionChange(item){
  729. console.log(item)
  730. if(item.metricValueName[1]=='COST'){
  731. item.judgeType='MONEY';
  732. }else{
  733. item.judgeType=undefined;
  734. }
  735. item.specificMoney=undefined;
  736. item.specificMoneyMin=undefined;
  737. item.specificMoneyMax=undefined;
  738. item.threshold=undefined;
  739. item.maxNumber=undefined;
  740. item.campaignStatus=undefined;
  741. item.unitStatus=undefined;
  742. },
  743. applyObjChange(e){
  744. // console.log(e.target.value)
  745. this.plainOptions=[]
  746. this.checkedList=[];
  747. this.checkAll=false;
  748. this.indeterminate=false;
  749. if(e.target.value=='ACCOUNT'){
  750. this.form.processMethod='SEND'
  751. this.rulesFieldList=this.accountFieldList
  752. }else if(e.target.value=='CAMPAIGN'){
  753. this.rulesFieldList=this.campaignFieldList
  754. }else if(e.target.value=='UNIT'){
  755. this.rulesFieldList=this.unitFieldList
  756. }
  757. if(this.form.applyAccount){
  758. if(e.target.value=='CAMPAIGN'){
  759. this.spinning=true;
  760. this.getCampaignList()
  761. }else if(e.target.value=='UNIT'){
  762. this.spinning=true;
  763. this.getCampaignList()
  764. this.getUnitList()
  765. }
  766. }
  767. },
  768. saveHandler(){
  769. this.$refs.ruleForm.validate(valid=> {
  770. if (valid) {
  771. // this.form.rulesList=this.rulesList;
  772. console.log(valid,this.form);
  773. this.saveLoading=true;
  774. let rel=[]
  775. if(this.form.eventRuleLevel=='CAMPAIGN'){
  776. rel=this.checkedList.map(item=>{
  777. return {
  778. campaignId:item,
  779. unitId:'',
  780. }
  781. })
  782. }else if(this.form.eventRuleLevel=='UNIT'){
  783. let checkedList=[];
  784. this.checkedList.forEach(item=>{
  785. this.plainOptions.forEach(ele=>{
  786. if(ele.unitId==item){
  787. checkedList.push({
  788. campaignId:ele.campaignId|| '',
  789. unitId:item
  790. })
  791. }
  792. })
  793. })
  794. // console.log(checkedList)
  795. rel=this.checkedList.map(item=>{
  796. return {
  797. campaignId:this.form.campaignId|| '',
  798. unitId:item
  799. }
  800. })
  801. }
  802. // console.log(rel)
  803. if(this.form.metricValueCode=='unitStatus'){
  804. // console.log(1)
  805. this.rulesList[0].threshold=this.rulesList[0].unitStatus;
  806. this.rulesList[0].judgeMethod='EQ'
  807. }else if(this.form.metricValueCode=='campaignStatus'){
  808. this.rulesList[0].threshold=this.rulesList[0].campaignStatus
  809. this.rulesList[0].judgeMethod='EQ'
  810. }
  811. let params ={
  812. accountId:this.form.applyAccount,
  813. alarmEventMetric:this.rulesList,
  814. rel,
  815. ...this.form
  816. }
  817. console.log(params)
  818. if(params.appStatus||params.rel.length>0){
  819. if(this.currentRuleId){
  820. postAction('/alarm/alarmEventRule/edit',params).then(res=>{
  821. console.log(res);
  822. this.saveLoading=false;
  823. if(res.success){
  824. this.$router.push('/autoRules')
  825. this.$bus.$emit('remove', '/newBlankRule')
  826. }else{
  827. this.$message.error(res.message)
  828. }
  829. })
  830. }else{
  831. postAction('/alarm/alarmEventRule/add',params).then(res=>{
  832. console.log(res);
  833. this.saveLoading=false;
  834. if(res.success){
  835. this.$router.push('/autoRules')
  836. this.$bus.$emit('remove', '/newBlankRule')
  837. }else{
  838. this.$message.error(res.message)
  839. }
  840. })
  841. }
  842. }else{
  843. this.saveLoading=false;
  844. this.$message.error('指定情况下必须选择具体计划或者组')
  845. }
  846. } else {
  847. console.log('error submit!!');
  848. this.$message.error('请按提示填写必填项目!')
  849. return false;
  850. }
  851. });
  852. },
  853. goBack() {
  854. this.$router.push('/autoRules')
  855. this.$bus.$emit('remove', '/newBlankRule')
  856. },
  857. //分页页码改变
  858. pageNoChange(val){
  859. console.log(val);
  860. this.currentPage=val;
  861. this.selectedCampaign()
  862. },
  863. onChange(checkedList) {
  864. this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length;
  865. this.checkAll = checkedList.length === this.plainOptions.length;
  866. },
  867. onCheckAllChange(e) {
  868. let valueOption = [];
  869. this.plainOptions.forEach((item) => {
  870. valueOption.push(item.value)
  871. })
  872. Object.assign(this, {
  873. checkedList: e.target.checked ? valueOption : [],
  874. indeterminate: false,
  875. checkAll: e.target.checked,
  876. });
  877. },
  878. selectedCampaign(e){
  879. // console.log(e.target.value,this.selectedCampaignValue);
  880. if(this.accountID){
  881. this.getExsitGroupList();
  882. }else{
  883. this.$message.warning('请选择账户后重试!')
  884. this.selectedCampaignValue=undefined;
  885. }
  886. },
  887. },
  888. filters:{
  889. handlerApplyObj(val){
  890. let showVal=''
  891. switch (val) {
  892. case 'CAMPAIGN':
  893. showVal='计划'
  894. break;
  895. case 'UNIT':
  896. showVal='组'
  897. break;
  898. case 'CREATE':
  899. showVal='创意'
  900. break;
  901. default:
  902. break;
  903. }
  904. return showVal
  905. },
  906. handlerDANWEI(val){
  907. // console.log(val.indexOf("RATE") != -1)
  908. let returnVal='';
  909. if(val.indexOf("Roi") != -1){
  910. returnVal='';
  911. }else if(val.indexOf("Cost") != -1|| val.indexOf("depletion") != -1){
  912. returnVal='元'
  913. }else{
  914. returnVal=''
  915. }
  916. return returnVal
  917. },
  918. },
  919. mounted(){
  920. // getAction('/alarm/alarmMetricValue/queryParentChildList',{
  921. // }).then(res=>{
  922. // console.log(res);
  923. // if(res.success){
  924. // this.rulesFieldList=res.result
  925. // }
  926. // })
  927. getAction(`/alarm/alarmMetricValue/queryParentChildList?metricValueLevel=${1}`,{
  928. }).then(res=>{
  929. console.log(res);
  930. if(res.success){
  931. this.accountFieldList=res.result;
  932. if(this.form.eventRuleLevel=='ACCOUNT'){
  933. this.rulesFieldList=this.accountFieldList
  934. }
  935. }
  936. })
  937. getAction(`/alarm/alarmMetricValue/queryParentChildList?metricValueLevel=${2}`,{
  938. }).then(res=>{
  939. console.log(res);
  940. if(res.success){
  941. this.campaignFieldList=res.result;
  942. if(this.form.eventRuleLevel=='CAMPAIGN'){
  943. this.rulesFieldList=this.campaignFieldList
  944. }
  945. }
  946. })
  947. getAction(`/alarm/alarmMetricValue/queryParentChildList?metricValueLevel=${3}`,{
  948. }).then(res=>{
  949. console.log(res);
  950. if(res.success){
  951. this.unitFieldList=res.result;
  952. if(this.form.eventRuleLevel=='UNIT'){
  953. this.rulesFieldList=this.unitFieldList
  954. }
  955. }
  956. })
  957. // console.log(this.$route.query);
  958. this.currentRuleId=this.$route.query.id
  959. if(this.$route.query.id){
  960. getAction('/alarm/alarmEventRule/queryById',{
  961. id:this.$route.query.id
  962. }).then(res=>{
  963. console.log(res);
  964. if(res.success){
  965. this.form={
  966. causalCondition:'MEET_ALL', //因果条件 满足所有/满足任意
  967. applyAccount:res.result.accountId,
  968. ...res.result
  969. }
  970. this.rulesList=res.result.alarmEventMetrics.map(item=>{
  971. if(item.metricValueCode=='unitStatus_value'){
  972. return {
  973. ...item,
  974. unitStatus:item.threshold
  975. }
  976. }else if(item.metricValueCode=='campaignStatus_value'){
  977. return {
  978. ...item,
  979. campaignStatus:item.threshold
  980. }
  981. }else {
  982. return {
  983. ...item,
  984. }
  985. }
  986. });
  987. if(res.result.rel){
  988. this.form.applyRange='APPOINT'
  989. this.checkedList=res.result.rel.map(item=>{
  990. if(item.eventRuleLevel=='CAMPAIGN'){
  991. return item.campaignId
  992. }else if (item.eventRuleLevel=='UNIT'){
  993. return item.unitId
  994. }
  995. })
  996. this.onChange(this.checkedList)
  997. }else{
  998. this.form.applyRange='ACCORDINGTO_STATUS'
  999. }
  1000. console.log(this.form)
  1001. if(this.form.eventRuleLevel=='ACCOUNT'){
  1002. this.rulesFieldList=this.accountFieldList
  1003. }else if(this.form.eventRuleLevel=='CAMPAIGN'){
  1004. this.rulesFieldList=this.campaignFieldList
  1005. }else if(this.form.eventRuleLevel=='UNIT'){
  1006. this.rulesFieldList=this.unitFieldList
  1007. }
  1008. }
  1009. })
  1010. }
  1011. },
  1012. }
  1013. </script>
  1014. <style lang="scss" scoped>
  1015. .newBlankRule{
  1016. .toolbox-automate-rules-create-body {
  1017. margin: 16px 12px 12px;
  1018. padding: 32px 32px 16px;
  1019. background-color: #fff;
  1020. border-radius: 4px;
  1021. }
  1022. .toolbox-automate-rules-create-content_title {
  1023. background-color: #fff;
  1024. display: flex;
  1025. flex-flow: row nowrap;
  1026. justify-content: flex-start;
  1027. align-items: center;
  1028. margin-bottom: 28px;
  1029. h3 {
  1030. font-size: 22px;
  1031. margin: 0;
  1032. font-weight: 400;
  1033. height: 30px;
  1034. line-height: 30px;
  1035. }
  1036. }
  1037. .toolbox-automate-rules-create-content {
  1038. padding-left: 28px;
  1039. }
  1040. .moduler {
  1041. .opt {
  1042. text-align: right;
  1043. }
  1044. width: 100%;
  1045. background: #fff;
  1046. margin-bottom: 16px;
  1047. position: relative;
  1048. padding: 32px 24px 48px 32px;
  1049. // border-radius: 4px;
  1050. // box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  1051. .moduler-title {
  1052. display: flex;
  1053. align-items: center;
  1054. font-size: 22px;
  1055. margin-bottom: 20px;
  1056. }
  1057. .row-item {
  1058. display: flex;
  1059. justify-content: flex-start;
  1060. align-items: center;
  1061. margin-bottom: 32px;
  1062. }
  1063. .row-item:last-of-type {
  1064. margin-bottom: 0;
  1065. }
  1066. .row-item .hint-item {
  1067. width: 24px;
  1068. min-width: 24px;
  1069. align-self: flex-start;
  1070. line-height: 20px;
  1071. height: 20px;
  1072. margin-top: 9px;
  1073. }
  1074. .row-item .label-item {
  1075. position: relative;
  1076. align-items: flex-start;
  1077. align-self: flex-start;
  1078. line-height: 20px;
  1079. height: 20px;
  1080. margin-top: 10px;
  1081. width: 80px;
  1082. min-width: 80px;
  1083. .text-item {
  1084. font-size: 14px;
  1085. width: 60px;
  1086. }
  1087. }
  1088. .row-item .required-item {
  1089. width: 4px;
  1090. height: 4px;
  1091. border-radius: 2px;
  1092. background: #f45858;
  1093. position: absolute;
  1094. right: 10px;
  1095. top: 50%;
  1096. transform: translateY(-50%);
  1097. }
  1098. .row-item .input-item {
  1099. min-width: 480px;
  1100. position: relative;
  1101. // height: 35px;
  1102. .tip {
  1103. font-size: 12px;
  1104. color: tomato;
  1105. }
  1106. }
  1107. .adName{
  1108. display: flex;
  1109. .nameList{
  1110. width: 90%;
  1111. }
  1112. .item{
  1113. display: inline-block;
  1114. width: 30%;
  1115. margin-left: 15px;
  1116. margin-bottom: 10px;
  1117. }
  1118. }
  1119. }
  1120. .toolbox-automate-rules-create-content_rules-and-condition_rules {
  1121. margin-bottom: 24px;
  1122. }
  1123. .toolbox-automate-rules-create-content_rules-and-condition_rules, .toolbox-automate-rules-create-content_rules-and-condition_condition {
  1124. width: 1138px;
  1125. background: #fff;
  1126. border-radius: 4px;
  1127. border: 1px solid #dadfe3;
  1128. }
  1129. .toolbox-automate-rules-create-content_rules-and-condition_rules, .toolbox-automate-rules-create-content_rules-and-condition_condition{
  1130. .title{
  1131. height: 20px;
  1132. font-size: 14px;
  1133. font-weight: 600;
  1134. color: #333;
  1135. height: 56px;
  1136. border-bottom: 1px solid #E4E9ED;
  1137. padding-left: 24px;
  1138. display: flex;
  1139. justify-content: flex-start;
  1140. align-items: center;
  1141. .condition-title{
  1142. padding-right: 17px;
  1143. }
  1144. }
  1145. .content{
  1146. padding: 24px;
  1147. .add-rule {
  1148. cursor: pointer;
  1149. height: 40px;
  1150. border-radius: 2px;
  1151. border: 1px dashed #dadfe3;
  1152. font-size: 12px;
  1153. display: flex;
  1154. flex-flow: row column;
  1155. justify-content: center;
  1156. align-items: center;
  1157. color: #666;
  1158. margin-top: 16px;
  1159. -moz-user-select: none;
  1160. -webkit-user-select: none;
  1161. -ms-user-select: none;
  1162. -khtml-user-select: none;
  1163. user-select: none;
  1164. }
  1165. .rules-list-item {
  1166. box-sizing: border-box;
  1167. width: 100%;
  1168. padding: 24px;
  1169. background: #f8f9fa;
  1170. border-radius: 4px;
  1171. margin-bottom: 16px;
  1172. display: flex;
  1173. align-items: center;
  1174. position: relative;
  1175. .rules-list-item-delete {
  1176. position: absolute;
  1177. right: 24px;
  1178. height: 30px;
  1179. padding-left: 24px;
  1180. border-left: 1px solid #DADFE3;
  1181. cursor: pointer;
  1182. }
  1183. .rules-list-item-subject {
  1184. width: 120px;
  1185. margin-right: 16px;
  1186. display: flex;
  1187. .ruleName{
  1188. display: block;
  1189. width: 100%;
  1190. height: 32px;
  1191. line-height: 32px;
  1192. text-align: center;
  1193. background-color: #fff;
  1194. border: 1px solid #d9d9d9;
  1195. border-radius: 4px;
  1196. }
  1197. }
  1198. }
  1199. .rules—list_item:last-of-type {
  1200. margin-bottom: 0;
  1201. }
  1202. }
  1203. }
  1204. .selectedExist{
  1205. width: 500px;
  1206. padding-top: 5px;
  1207. .inventory-tags-lists-header {
  1208. background-color: #F8F9FA;
  1209. border: 1px solid #E4E9ED;
  1210. height: 36px;
  1211. line-height: 33px;
  1212. border-radius: 4px 4px 0 0;
  1213. font-weight: bold;
  1214. display: flex;
  1215. }
  1216. .inventory-tags-lists-container {
  1217. border: 1px solid #E4E9ED;
  1218. margin-top: -1px;
  1219. height: 100%;
  1220. padding: 4px 0px;
  1221. border-radius: 0 0 4px 4px;
  1222. height: 300px;
  1223. overflow: auto;
  1224. }
  1225. .inventory-tags-lists-item {
  1226. width: 100%;
  1227. height: 37px;
  1228. line-height: 37px;
  1229. padding-left: 12px;
  1230. padding-right: 12px;
  1231. display: flex;
  1232. font-size: 14px;
  1233. color: #333;
  1234. }
  1235. .input{
  1236. margin-bottom:16px ;
  1237. }
  1238. .campaign-have-list{
  1239. font-family: PingFangSC-Regular;
  1240. font-size: 14px;
  1241. color: #333;
  1242. border: 1px solid #DADFE3;
  1243. border-radius: 4px;
  1244. margin-bottom: 16px;
  1245. height: 388px;
  1246. .campaign-have-header {
  1247. height: 38px;
  1248. width: 100%;
  1249. padding-left: 13px;
  1250. line-height: 38px;
  1251. background: #f8f9fa;
  1252. border-radius: 4px 4px 0px 0px;
  1253. border-bottom: 1px solid #DADFE3;
  1254. }
  1255. .campaign-have-list ul {
  1256. width: 100%;
  1257. height: 350px;
  1258. padding-top: 6px;
  1259. }
  1260. li{
  1261. padding: 6px 10px;
  1262. cursor: pointer;
  1263. }
  1264. li:hover{
  1265. background: #EDF1F5;
  1266. }
  1267. .ad-d-flex-between {
  1268. justify-content: space-between !important;
  1269. }
  1270. .ad-d-flex, .ad-btn {
  1271. display: flex;
  1272. align-items: center;
  1273. }
  1274. .byted-loading-v {
  1275. position: absolute;
  1276. top: 0;
  1277. right: 0;
  1278. bottom: 0;
  1279. left: 0;
  1280. z-index: 996;
  1281. background-color: hsla(0,0%,96%,.9);
  1282. }
  1283. .info{
  1284. width: 60%;
  1285. overflow: hidden;
  1286. text-overflow: ellipsis;
  1287. white-space: nowrap;
  1288. }
  1289. .landing-type {
  1290. color: #999;
  1291. font-size: 12px;
  1292. white-space: nowrap;
  1293. }
  1294. }
  1295. .noAccountID{
  1296. font-size: 14px;
  1297. text-align: center;
  1298. color: #999;
  1299. line-height: 388px;
  1300. }
  1301. .fenye{
  1302. height: 60px;
  1303. padding-top: 12px;
  1304. text-align: right;
  1305. }
  1306. }
  1307. }
  1308. </style>
  1309. <style lang="scss">
  1310. .newBlankRule{
  1311. .ant-form-item {
  1312. margin-bottom: 0;
  1313. }
  1314. .content{
  1315. .ant-form-item {
  1316. margin-bottom: 0;
  1317. width: 100%;
  1318. }
  1319. }
  1320. .ant-radio-button-wrapper {
  1321. min-width: 70px;
  1322. text-align: center;
  1323. }
  1324. .ant-checkbox-wrapper,
  1325. .ant-checkbox-group-item {
  1326. display: block;
  1327. padding: 5px 15px;
  1328. }
  1329. .ant-checkbox-wrapper:first-child {
  1330. padding: 0 15px 5px;
  1331. }
  1332. }
  1333. </style>