videoReport.vue 50 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330
  1. <style lang="less" scoped>
  2. @import 'kuaishouReport';
  3. ::v-deep.vue-treeselect__control {
  4. line-height: 20px !important;
  5. }
  6. </style>
  7. <template>
  8. <div class="video-report">
  9. <div class="directional-content">
  10. <div class="table-page-search-wrapper">
  11. <a-form layout="inline" :form="form" hide-required-mark :selfUpdate="true" @submit="handleQueryList">
  12. <a-row :gutter="24">
  13. <a-col :md="16" :sm="16" :xxl="16">
  14. <a-form-item label="账户名称">
  15. <selectTreeAccount
  16. v-decorator="['accountIds', { initialValue: [] }]"
  17. multiple
  18. style="display: inline-block;position: relative;margin-left: 0px;width:100%;margin-bottom:15px"
  19. :limit="1"
  20. />
  21. </a-form-item>
  22. </a-col>
  23. </a-row>
  24. <a-row :gutter="24">
  25. <!-- v-decorator="[
  26. 'dateValue',
  27. { initialValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')] }
  28. ]" -->
  29. <a-col :md="6" :sm="6" :xxl="6">
  30. <a-form-item label="时间选择">
  31. <a-range-picker
  32. v-model="dateValue"
  33. :ranges="dateRanges"
  34. :disabled-date="disabledDate"
  35. />
  36. </a-form-item>
  37. </a-col>
  38. <a-col :md="6" :sm="6" :xxl="6">
  39. <a-form-item label="设计负责人">
  40. <a-select
  41. v-decorator="['leaderId']"
  42. allowClear
  43. show-search
  44. :filter-option="filterOption"
  45. >
  46. <a-select-option v-for="item in designList" :key="item.userId" :value="item.userId">
  47. {{ item.companyName + '_' + item.userName }}
  48. </a-select-option>
  49. </a-select>
  50. </a-form-item>
  51. </a-col>
  52. <a-col :md="6" :sm="6" :xxl="6">
  53. <a-form-item label="剪辑">
  54. <a-select v-decorator="['clipId']" allowClear show-search :filter-option="filterOption">
  55. <a-select-option v-for="item in designList" :key="item.userId" :value="item.userId">
  56. {{ item.companyName + '_' + item.userName }}
  57. </a-select-option>
  58. </a-select>
  59. </a-form-item>
  60. </a-col>
  61. <a-col :md="6" :sm="6" :xxl="6">
  62. <a-form-item label="拍摄">
  63. <a-select v-decorator="['shotId']" allowClear show-search :filter-option="filterOption">
  64. <a-select-option v-for="item in designList" :key="item.userId" :value="item.userId">
  65. {{ item.companyName + '_' + item.userName }}
  66. </a-select-option>
  67. </a-select>
  68. </a-form-item>
  69. </a-col>
  70. <a-col :md="6" :sm="6" :xxl="6">
  71. <a-form-item label="编导">
  72. <a-select v-decorator="['planId']" allowClear show-search :filter-option="filterOption">
  73. <a-select-option v-for="item in designList" :key="item.userId" :value="item.userId">
  74. {{ item.companyName + '_' + item.userName }}
  75. </a-select-option>
  76. </a-select>
  77. </a-form-item>
  78. </a-col>
  79. <a-col :md="6" :sm="6" :xxl="6">
  80. <a-form-item label="素材渠道">
  81. <a-select v-decorator="['channelType']" allowClear>
  82. <a-select-option :value="0">内部</a-select-option>
  83. <a-select-option :value="1">素造</a-select-option>
  84. </a-select>
  85. </a-form-item>
  86. </a-col>
  87. <a-col :md="12" :sm="12" :xxl="12" style="display: flex;justify-content: flex-end;">
  88. <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
  89. <a-button type="primary" icon="search" @click="handleQueryList">查询</a-button>
  90. <!-- <a-button type="primary" @click="handleResetForm" icon="reload" class="middle-button"
  91. >重置</a-button
  92. > -->
  93. </span>
  94. </a-col>
  95. </a-row>
  96. </a-form>
  97. </div>
  98. </div>
  99. <a-modal v-model="relevantPeopleVisible" title="相关人员" :footer="null" :centered="true">
  100. <p>编导:{{ relevantPeopleData.planName || '暂无数据' }}</p>
  101. <p>剪辑:{{ relevantPeopleData.clipName || '暂无数据' }}</p>
  102. <p>拍摄:{{ relevantPeopleData.shotName || '暂无数据' }}</p>
  103. </a-modal>
  104. <a-modal v-model="Videovisible" title="视频详情" @ok="videoOk" :footer="null" width="50%">
  105. <video @click.stop class="video" :src="videoUrl" controls="controls" style="height:600px;width:100%">
  106. 您的浏览器不支持 video 标签。
  107. </video>
  108. </a-modal>
  109. <!-- 报表区域 -->
  110. <div class="tableBox">
  111. <div class="tableTop">
  112. <a-button type="primary" @click="customColumns">自定义列</a-button>
  113. <a-button
  114. type="default"
  115. style="float:right"
  116. @click="exportExcel('exportTable')"
  117. id="mybtn"
  118. :disabled="!!!getFormData('accountIds') || getFormData('accountIds').length == 0"
  119. :loading="exportLoading"
  120. >导出报表</a-button
  121. >
  122. </div>
  123. <a-table
  124. size="middle"
  125. :columns="columns"
  126. :dataSource="data"
  127. bordered
  128. id="outTable"
  129. :pagination="ipagination"
  130. :scroll="{ x: scrollX }"
  131. :loading="loading"
  132. ref="accountTable"
  133. :width="tableWidth"
  134. @change="sort"
  135. style="word-break: break-all;font-size:16px;font-weight:600"
  136. @customHeaderCell="customHeaderCell(columns)"
  137. >
  138. <span slot="statDate" slot-scope="text, records">
  139. {{
  140. text
  141. ? ('' + text).substr(0, 4) + '-' + ('' + text).substr(4, 2) + '-' + ('' + text).substr(6, 2)
  142. : '-'
  143. }}
  144. </span>
  145. <span slot="createTime" slot-scope="text, records">
  146. {{
  147. text
  148. ? ('' + text).substr(0, 4) + '-' + ('' + text).substr(4, 2) + '-' + ('' + text).substr(6, 2)
  149. : '-'
  150. }}
  151. </span>
  152. <div slot="coverUrl" slot-scope="test, records">
  153. <!-- {{test}} -->
  154. <img :src="test" alt style="width:80px" @click="openVideo(records.url)" />
  155. </div>
  156. <span slot="operation" slot-scope="text, record">
  157. <a href="javascript:;" @click="opendetail(text, record)" style="margin-right:5px">查看明细</a>
  158. </span>
  159. <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
  160. <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
  161. <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
  162. <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
  163. <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
  164. <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
  165. <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
  166. <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
  167. <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{
  168. play100FeedBreak | formatCurrency
  169. }}</span>
  170. <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
  171. <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
  172. <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
  173. <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
  174. <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
  175. <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
  176. <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
  177. <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
  178. <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
  179. <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
  180. <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
  181. <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
  182. <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
  183. <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
  184. <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
  185. <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{
  186. eventCreditGrantLandingPage | formatCurrency
  187. }}</span>
  188. <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
  189. <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{
  190. eventCreditGrantLandingPageCost | decimalsHandle
  191. }}</span>
  192. <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
  193. <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{
  194. eventCreditGrantLandingPageRate | toPercentage
  195. }}</span>
  196. <span slot="play25FeedBreakRate" slot-scope="play25FeedBreakRate">{{
  197. play25FeedBreakRate | toPercentage
  198. }}</span>
  199. <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
  200. <!-- 新加数据 -->
  201. <span slot="clickRate" slot-scope="clickRate">{{ clickRate | toPercentage }}</span>
  202. <span slot="bClickRate" slot-scope="bClickRate">{{ bClickRate | toPercentage }}</span>
  203. <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
  204. <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
  205. <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
  206. <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
  207. <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
  208. <span slot="installFinishRate" slot-scope="installFinishRate">{{
  209. installFinishRate | toPercentage
  210. }}</span>
  211. <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
  212. <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
  213. <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
  214. <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
  215. <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
  216. <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
  217. <span slot="gameAddictionCost" slot-scope="gameAddictionCost">{{
  218. gameAddictionCost | decimalsHandle
  219. }}</span>
  220. <span slot="downloadFinishCost" slot-scope="downloadFinishCost">{{
  221. downloadFinishCost | decimalsHandle
  222. }}</span>
  223. <span slot="downloadStartCost" slot-scope="downloadStartCost">{{
  224. downloadStartCost | decimalsHandle
  225. }}</span>
  226. <span slot="installFinishCost" slot-scope="installFinishCost">{{
  227. installFinishCost | decimalsHandle
  228. }}</span>
  229. <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>
  230. <!-- -->
  231. <span slot="downloadStartRate" slot-scope="downloadStartRate">{{
  232. downloadStartRate | toPercentage
  233. }}</span>
  234. <span slot="downloadFinishRate" slot-scope="downloadFinishRate">{{
  235. downloadFinishRate | toPercentage
  236. }}</span>
  237. <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
  238. <span slot="activeRegisterRate" slot-scope="activeRegisterRate">{{
  239. activeRegisterRate | toPercentage
  240. }}</span>
  241. <span slot="gameAddictionRate" slot-scope="gameAddictionRate">{{
  242. gameAddictionRate | toPercentage
  243. }}</span>
  244. <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
  245. <span slot="eventCreditGrantAppRate" slot-scope="eventCreditGrantAppRate">{{
  246. eventCreditGrantAppRate | toPercentage
  247. }}</span>
  248. <span slot="play3sRate" slot-scope="play3sRate">{{ play3sRate | toPercentage }}</span>
  249. <span slot="formCountRate" slot-scope="formCountRate">{{ formCountRate | toPercentage }}</span>
  250. <!-- <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span> -->
  251. <!-- <span
  252. slot="downloadFinishRate"
  253. slot-scope="downloadFinishRate"
  254. >{{ downloadFinishRate | toPercentage }}</span>
  255. <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
  256. <span
  257. slot="activeRegisterRate"
  258. slot-scope="activeRegisterRate"
  259. >{{ activeRegisterRate | toPercentage }}</span> -->
  260. <span slot="gameAddictionRate" slot-scope="gameAddictionRate">{{
  261. gameAddictionRate | toPercentage
  262. }}</span>
  263. <!-- <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span> -->
  264. <span slot="relativePeople" slot-scope="text, record">
  265. <!-- <a href="javascript:;" @click.stop="showRelevantPeople(record)">查看相关人员</a> -->
  266. <p>负责人:{{ record.designLeader || '无' }}</p>
  267. <p>剪辑:{{ record.clip || '无' }}</p>
  268. <p>拍摄:{{ record.shot || '无' }}</p>
  269. <p>编导:{{ record.plan || '无' }}</p>
  270. </span>
  271. </a-table>
  272. </div>
  273. <customColumn
  274. :visible="visible"
  275. :listNum="listNum"
  276. :fiexColumn="columnsFixd"
  277. :mediaType="2"
  278. @closeCustomColumn="closeCustomColumn"
  279. @changeColumn="changeColumn"
  280. />
  281. <!-- 明细表 -->
  282. <a-modal v-model="visibleDetail" title="详细信息" width="50%" :footer="null">
  283. <a-button type="default" @click="exportExcel('exportDetail')" id="mybtn">导出报表</a-button>
  284. <a-table
  285. :columns="detailColumn"
  286. :data-source="detailData"
  287. bordered
  288. tableLayout="auto"
  289. :pagination="false"
  290. :loading="detailLoading"
  291. style="word-break: break-all;"
  292. >
  293. <!-- <span slot="huanbi" slot-scope="huanbi">{{ huanbi | toPercentage }}</span> -->
  294. <span slot="advertiserName" slot-scope="text">{{ text || '暂未填写该数据' }}</span>
  295. <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
  296. </a-table>
  297. </a-modal>
  298. </div>
  299. </template>
  300. <script>
  301. import moment from 'moment'
  302. import { JeecgListMixin } from '@/mixins/ipagination'
  303. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  304. import selectComponent from './components/selectComponent'
  305. import selectTreeAccount from '@/components/formComponents/selectAccount.vue'
  306. import DatePicker from '@/components/DatePicker'
  307. import customColumn from '../components/customColumn.vue'
  308. import { mapGetters } from 'vuex'
  309. const columnsFixd = [
  310. {
  311. title: '视频',
  312. dataIndex: 'coverUrl',
  313. align: 'center',
  314. width: 100,
  315. fixed: 'left',
  316. key: 'coverUrl',
  317. scopedSlots: { customRender: 'coverUrl' }
  318. },
  319. {
  320. title: '视频名称',
  321. dataIndex: 'materialName',
  322. align: 'center',
  323. width: 130,
  324. fixed: 'left'
  325. },
  326. {
  327. title: '视频ID',
  328. dataIndex: 'signature',
  329. align: 'center',
  330. width: 150,
  331. fixed: 'left'
  332. },
  333. {
  334. title: '项目名称',
  335. dataIndex: 'projectName',
  336. align: 'center',
  337. width: 150,
  338. fixed: 'left'
  339. },
  340. {
  341. title: '渠道',
  342. dataIndex: 'channel',
  343. scopedSlots: { customRender: 'channel' },
  344. align: 'center',
  345. width: 150,
  346. fixed: 'left'
  347. },
  348. {
  349. title: '相关人员',
  350. dataIndex: 'relativePeople',
  351. key: 'relativePeople',
  352. scopedSlots: { customRender: 'relativePeople' },
  353. align: 'center',
  354. width: 150,
  355. fixed: 'left'
  356. },
  357. {
  358. title: '创建时间',
  359. dataIndex: 'createTime',
  360. scopedSlots: { customRender: 'createTime' },
  361. align: 'center',
  362. sorter: () => {}
  363. }
  364. ]
  365. let show = 0
  366. const initVariableColimns = [
  367. {
  368. title: '消耗(元)',
  369. dataIndex: 'cost',
  370. tip: '广告在投放期间的花费总额',
  371. align: 'center',
  372. scopedSlots: { customRender: 'cost' },
  373. sorter: () => {}
  374. },
  375. // {
  376. // title: '折后消耗(元)',
  377. // dataIndex: 'discountCost',
  378. // width:150,
  379. // tip: '广告在投放期间的花费总额',
  380. // align: 'center',
  381. // scopedSlots: { customRender: 'discountCost' },
  382. // sorter: () => {}
  383. // },
  384. {
  385. title: '封面曝光数',
  386. dataIndex: 'photoShow',
  387. tip: '广告在瀑布流被观看次数',
  388. align: 'center',
  389. scopedSlots: { customRender: 'photoShow' },
  390. sorter: () => {}
  391. },
  392. {
  393. title: '封面点击数',
  394. dataIndex: 'photoClick',
  395. tip: '用户点击封面进入视频播放页的次数(数据会进行反作弊去重)',
  396. align: 'center',
  397. scopedSlots: { customRender: 'photoClick' },
  398. sorter: () => {}
  399. },
  400. {
  401. title: '封面点击率',
  402. dataIndex: 'clickRate',
  403. tip: '封面点击数占封面展示数百分比',
  404. align: 'center',
  405. scopedSlots: { customRender: 'clickRate' },
  406. sorter: () => {}
  407. },
  408. {
  409. title: '素材曝光数',
  410. dataIndex: 'aClick',
  411. tip: '用户进入视频播放页观看的次数(数据会进行反作弊去重)',
  412. align: 'center',
  413. scopedSlots: { customRender: 'aClick' },
  414. sorter: () => {}
  415. },
  416. {
  417. title: '行为数',
  418. dataIndex: 'bClick',
  419. tip: '用户在视频播放页单击转化按钮的次数/展示数*100%',
  420. align: 'center',
  421. scopedSlots: { customRender: 'bClick' },
  422. sorter: () => {}
  423. },
  424. {
  425. title: '行为率',
  426. dataIndex: 'bClickRate',
  427. tip: '行为数占素材曝光数百分比',
  428. align: 'center',
  429. scopedSlots: { customRender: 'bClickRate' },
  430. sorter: () => {}
  431. },
  432. {
  433. title: '平均千次封面曝光花费(元)',
  434. dataIndex: 'cpm',
  435. tip: '花费/封面曝光数*1000',
  436. align: 'center',
  437. scopedSlots: { customRender: 'cpm' },
  438. sorter: () => {}
  439. },
  440. {
  441. title: '平均封面点击单价(元)',
  442. dataIndex: 'cpc',
  443. tip: '花费/封面点击数',
  444. align: 'center',
  445. scopedSlots: { customRender: 'cpc' },
  446. sorter: () => {}
  447. },
  448. {
  449. title: '平均行为单价(元)',
  450. dataIndex: 'cpb',
  451. tip: '总花费/行为数',
  452. align: 'center',
  453. scopedSlots: { customRender: 'cpb' },
  454. sorter: () => {}
  455. },
  456. {
  457. title: '3s播放数',
  458. dataIndex: 'play3sCount',
  459. tip: '总花费/行为数',
  460. align: 'center',
  461. scopedSlots: { customRender: 'play3sCount' },
  462. sorter: () => {}
  463. },
  464. {
  465. title: '3s播放率',
  466. dataIndex: 'play3sRate',
  467. tip: '总花费/行为数',
  468. align: 'center',
  469. scopedSlots: { customRender: 'play3sRate' },
  470. sorter: () => {}
  471. }
  472. ]
  473. let detailColumn = [
  474. {
  475. title: '客户',
  476. dataIndex: 'advertiserName',
  477. align: 'center',
  478. scopedSlots: { customRender: 'advertiserName' }
  479. },
  480. {
  481. title: '项目名称',
  482. dataIndex: 'projectName',
  483. align: 'center',
  484. width: 150
  485. },
  486. {
  487. title: '时间',
  488. dataIndex: 'statDate',
  489. align: 'center',
  490. width: 120
  491. },
  492. {
  493. title: '消耗',
  494. dataIndex: 'cost',
  495. scopedSlots: { customRender: 'cost' },
  496. align: 'center'
  497. }
  498. ]
  499. export default {
  500. data() {
  501. return {
  502. material: '',
  503. searchLoading: false,
  504. designList: [],
  505. detailLoading: false,
  506. clip: undefined,
  507. shot: undefined,
  508. plan: undefined,
  509. leaderId: undefined,
  510. //明细数据
  511. visibleDetail: false,
  512. detailColumn,
  513. detailData: [],
  514. exportLoading: false,
  515. target: 'cost',
  516. order: 'desc',
  517. type: 0,
  518. dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
  519. openOptions: false,
  520. relevantPeopleVisible: false,
  521. relevantPeopleData: {},
  522. roleCode: localStorage.getItem('roleCode'),
  523. //下拉选择框的数据
  524. projectArr: [],
  525. selectValue: '',
  526. appId: [],
  527. //设置表格的列宽
  528. tableWidth: '',
  529. //gudinglie
  530. columnsFixd: columnsFixd,
  531. //是否打开视频
  532. Videovisible: false,
  533. videoUrl: '',
  534. //是否显示导出按钮
  535. exportExcelIsOk: true,
  536. consumeValue: 0,
  537. columns: [...columnsFixd, ...initVariableColimns], //table的表头
  538. addColumns: [],
  539. data: [],
  540. totalSelect: 0,
  541. daysFlag: false,
  542. dateRange: [],
  543. dataElse: [],
  544. loading: false,
  545. visible: false,
  546. //自定义列的搜索框
  547. searchInput: '',
  548. //弹出框中现实的选中列数
  549. scrollX: 0,
  550. listNum: [],
  551. //
  552. form: this.$form.createForm(this),
  553. videoID: '',
  554. timedata: [],
  555. ipagination: {
  556. current: 1,
  557. pageSize: 10,
  558. showTotal: (total, range) => {
  559. return range[0] + '-' + range[1] + ' 共' + total + '条'
  560. },
  561. showQuickJumper: true,
  562. showSizeChanger: true,
  563. pageSizeOptions: ['10', '30', '50'],
  564. total: 0,
  565. onChange: (current, pageSize) => {
  566. // 切换分页时的回调,
  567. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  568. this.ipagination.current = current
  569. this.ipagination.pageSize = pageSize
  570. }
  571. },
  572. videoUrl: process.env.VUE_APP_BASE_REPORT_URL + '/material/report/kuaishou/list',
  573. dateRanges: {
  574. 昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
  575. 近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
  576. 近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
  577. 近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
  578. 近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
  579. 近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
  580. 近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')]
  581. }
  582. }
  583. },
  584. mixins: [JeecgListMixin],
  585. components: {
  586. selectComponent,
  587. selectTreeAccount,
  588. DatePicker,
  589. customColumn
  590. },
  591. watch: {},
  592. methods: {
  593. ...mapGetters(['userInfo']),
  594. handleQueryList() {
  595. // this.ipagination.current = 1
  596. // event.preventDefault()
  597. const paramsData = this.form.getFieldsValue()
  598. this.handleGetTableList(paramsData)
  599. },
  600. handleResetForm() {
  601. // this.ipagination.current = 1
  602. this.form.resetFields()
  603. this.handleGetTableList({})
  604. },
  605. handleGetTableList(data) {
  606. if (data.accountIds && data.accountIds.length > 0) {
  607. this.loading = true
  608. const params = {
  609. ...data,
  610. startDate: this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
  611. endDate: this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
  612. userId: this.userInfo().id,
  613. target: this.target, //默认消耗排序
  614. order: this.order, //默认降序
  615. pageNo: this.ipagination.current,
  616. pageSize: this.ipagination.pageSize
  617. }
  618. postAction(this.videoUrl, params).then(res => {
  619. if (res.success) {
  620. // let result = res.result
  621. // this.data.push({ ...result, key: 1 })
  622. // result.map((item, index) => {
  623. // item.key = index
  624. // })
  625. this.data = res.result.list.map((item, index) => {
  626. return {
  627. ...item,
  628. key: index
  629. }
  630. })
  631. this.ipagination.total = res.result.total
  632. this.loading = false
  633. } else {
  634. this.loading = false
  635. }
  636. })
  637. } else {
  638. this.$message.error('请选择账户')
  639. }
  640. },
  641. filterOption(input, option) {
  642. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  643. },
  644. //点击查看明细按钮的事件
  645. opendetail(text, record) {
  646. // console.log(text, record)
  647. this.visibleDetail = true
  648. this.detailData = []
  649. this.detailLoading = true
  650. this.signature = record.signature
  651. // console.log(this.signature)
  652. postAction('/ctop/kuaishou/videoReport/detail', {
  653. startDate: this.dateValue[0].format('YYYY-MM-DD'),
  654. endDate: this.dateValue[1].format('YYYY-MM-DD'),
  655. signature: record.signature,
  656. accountIds: this.appId
  657. }).then(res => {
  658. // console.log(res)
  659. this.detailLoading = false
  660. if (res.success) {
  661. let result = res.result
  662. // this.detailData.push({ ...result, key: 1 })
  663. result.map((item, index) => {
  664. item.key = index
  665. })
  666. this.detailData = result
  667. console.log(this.detailData, 'detail----detail')
  668. }
  669. })
  670. },
  671. closeCustomColumn() {
  672. this.visible = false
  673. },
  674. //自定义之后修改父元素表头
  675. changeColumn(val) {
  676. console.log(val)
  677. this.columns = [...val]
  678. if (this.columns.length > this.columnsFixd.length && this.columns.length < 9) {
  679. this.scrollX = 0
  680. this.columns.forEach((element, index) => {
  681. if (index < this.columnsFixd.length) {
  682. element.width = 'auto'
  683. element.fixed = false
  684. }
  685. })
  686. // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
  687. } else if (this.columns.length >= 9) {
  688. this.columns.forEach((element, index) => {
  689. if (index < this.columnsFixd.length - 1) {
  690. element.width = 120
  691. element.fixed = 'left'
  692. }
  693. })
  694. this.scrollX = 1000 + 200 * (this.columns.length - this.columnsFixd.length)
  695. } else {
  696. this.scrollX = 0
  697. this.columns.forEach(element => {
  698. element.width = 'auto'
  699. element.fixed = false
  700. })
  701. }
  702. },
  703. // 日期的开关
  704. //打开日期框
  705. opendate() {
  706. this.openOptions = !this.openOptions
  707. // console.log(this.openOptions)
  708. },
  709. opendateClose() {
  710. this.openOptions = false
  711. // console.log(this.openOptions)
  712. },
  713. // 查看相关人员
  714. showRelevantPeople(record) {
  715. this.relevantPeopleVisible = true
  716. getAction('/ctop/materialAscription/getDetail', {
  717. code: record.signature
  718. }).then(res => {
  719. console.log(res)
  720. this.relevantPeopleData = []
  721. if (res.result && res.success) {
  722. this.relevantPeopleData = res.result
  723. }
  724. })
  725. },
  726. getFormData(className) {
  727. return this.form.getFieldValue(className)
  728. },
  729. sort(pagination, filters, sorter, { currentDataSource }) {
  730. if (this.getFormData('accountIds') && this.getFormData('accountIds').length > 0) {
  731. this.ipagination.current = pagination.current
  732. this.ipagination.pageSize = pagination.pageSize
  733. if (sorter.order == 'ascend') {
  734. this.order = 'asc'
  735. this.target = sorter.columnKey
  736. } else if (sorter.order == 'descend') {
  737. this.order = 'desc'
  738. this.target = sorter.columnKey
  739. } else {
  740. ;(this.target = 'cost'), (this.order = 'desc')
  741. }
  742. this.handleQueryList()
  743. }
  744. },
  745. moment,
  746. //select切换---项目
  747. selectChange(key) {
  748. this.selectValue = key
  749. },
  750. //打开视频
  751. openVideo(val) {
  752. this.Videovisible = true
  753. this.videoUrl = val
  754. },
  755. videoOk() {
  756. this.Videovisible = false
  757. },
  758. disabledDate(current) {
  759. // console.log(current)
  760. return current && current > moment().subtract(1, 'day')
  761. },
  762. consumeOnChange() {},
  763. //查询按钮
  764. searchRes() {
  765. this.date = []
  766. this.ipagination.current = 1
  767. this.HttpPost()
  768. },
  769. //网络请求table数据函数
  770. HttpPost() {
  771. this.loading = true
  772. this.searchLoading = true
  773. show = 0
  774. postAction('/ctop/kuaishou/videoReport/list', {
  775. userId: this.userInfo().id,
  776. startDate: this.dateValue[0].format('YYYY-MM-DD'),
  777. endDate: this.dateValue[1].format('YYYY-MM-DD'),
  778. pageNo: this.ipagination.current,
  779. pageSize: this.ipagination.pageSize,
  780. accountIds: this.appId,
  781. target: this.target,
  782. order: this.order,
  783. clipId: this.clip ? this.clip : '',
  784. shotId: this.shot ? this.shot : '',
  785. planId: this.plan ? this.plan : '',
  786. leaderId: this.leaderId ? this.leaderId : '',
  787. channelType: this.material ? Number(this.material) : ''
  788. }).then(res => {
  789. let resArr = []
  790. this.data = []
  791. this.loading = false
  792. this.searchLoading = false
  793. if (res.success) {
  794. // let result = res.result
  795. // this.data.push({ ...result, key: 1 })
  796. // result.map((item, index) => {
  797. // item.key = index
  798. // })
  799. this.data = res.result.list.map((item, index) => {
  800. return {
  801. ...item,
  802. key: index
  803. }
  804. })
  805. this.ipagination.total = res.result.total
  806. this.loading = false
  807. } else {
  808. this.loading = false
  809. }
  810. })
  811. },
  812. //导出报表
  813. exportExcel(exportType) {
  814. this.exportLoading = true
  815. let columns = []
  816. if (exportType == 'exportTable') {
  817. let column = this.columns.map((item, index) => {
  818. return item.dataIndex
  819. })
  820. columns = column.splice(this.columnsFixd.length)
  821. }
  822. downFilePost('/ctop/kuaishou/videoReport/excelV2', {
  823. columns,
  824. userId: this.userInfo().id,
  825. target: this.target,
  826. order: this.order,
  827. startDate: this.dateValue[0].format('YYYY-MM-DD'),
  828. endDate: this.dateValue[1].format('YYYY-MM-DD'),
  829. accountIds: this.appId,
  830. exportType,
  831. signature: this.signature,
  832. clipId: this.clip ? this.clip : '',
  833. shotId: this.shot ? this.shot : '',
  834. planId: this.plan ? this.plan : '',
  835. leaderId: this.leaderId ? this.leaderId : '',
  836. channelType: this.material ? Number(this.material) : ''
  837. }).then(res => {
  838. this.exportLoading = false
  839. let blob = new Blob([res], {
  840. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  841. })
  842. let downloadElement = document.createElement('a')
  843. let href = window.URL.createObjectURL(blob) //创建下载的链接
  844. downloadElement.href = href
  845. downloadElement.download = `${this.dateValue[0].format('YYYY-MM-DD')}~${this.dateValue[1].format(
  846. 'YYYY-MM-DD'
  847. )}视频汇总.xlsx` //下载后文件名
  848. document.body.appendChild(downloadElement)
  849. downloadElement.click() //点击下载
  850. document.body.removeChild(downloadElement) //下载完成移除元素
  851. window.URL.revokeObjectURL(href) //释放掉blob对象
  852. })
  853. },
  854. //日期选择回调
  855. dateChange(data, dataString) {
  856. if (data.length) {
  857. this.timedata = dataString
  858. this.dateRange[0] = data[0]
  859. this.totalSelect = (data[1]._d - data[0]._d) / (24 * 60 * 60 * 1000) + 1
  860. this.daysFlag = true
  861. if (this.totalSelect > 92) {
  862. this.$message.error('时间跨度太长啦,选小一点好嘛?')
  863. this.daysFlag = false
  864. this.dateRange = []
  865. }
  866. } else {
  867. this.daysFlag = false
  868. this.dateRange = []
  869. }
  870. },
  871. //弹出框打开,自定义列
  872. customColumns() {
  873. this.visible = true
  874. this.listNum = [...this.columns]
  875. console.log(this.listNum, 'this.listNum-this.listNum')
  876. },
  877. tableHandle() {
  878. // this.listNum = [...this.columns]
  879. // console.log(this.listNum.length, this.columns)
  880. // if (this.listNum.length >= 9 || this.columns.length >= 9) {
  881. // this.tableWidth = 160
  882. // this.scrollX = this.columns.length * 160
  883. // // console.log(this.scrollX)
  884. // } else {
  885. // this.scrollX = 2000
  886. // }
  887. },
  888. //弹出框确定
  889. handleOk(e) {
  890. this.loading = false
  891. this.visible = false
  892. if (this.listNum.length >= 10) {
  893. let newlist = this.listNum.slice(columnsFixd.length)
  894. console.log(newlist)
  895. this.columns = [...columnsFixd, ...newlist]
  896. } else {
  897. this.columns = [...this.listNum]
  898. }
  899. if (this.listNum.length == 4) {
  900. // console.log(this.listNum.length)
  901. this.scrollX = 0
  902. this.columns.map((item, index) => {
  903. item.width = 500
  904. })
  905. // console.log(1)
  906. } else {
  907. this.columns.map((item, index) => {
  908. if (index == 2 || index == 0) {
  909. item.width = 150
  910. } else if (index == 1 || index == 2) {
  911. item.width = 100
  912. }
  913. })
  914. // console.log(2)
  915. }
  916. this.tableHandle()
  917. },
  918. //弹出框取消按钮
  919. handleCancel(e) {
  920. this.visible = false
  921. },
  922. loadShow() {
  923. show++
  924. if (this.data.length > 0) {
  925. if (show == this.data.length * 2) {
  926. this.data = [...this.data]
  927. }
  928. }
  929. },
  930. // 获取设计人员
  931. getDesignList() {
  932. postAction('/ctop/kuaishou/videoReport/getDesignList').then(res => {
  933. console.log(res, '设计人员')
  934. if (res.success) {
  935. this.designList = res.result
  936. }
  937. })
  938. }
  939. },
  940. activated() {
  941. console.log('activated')
  942. // this.getParticipateList()
  943. this.statDate = moment().subtract(1, 'day')
  944. moment().format('YYYY-MM-DD_HH:mm')
  945. postAction('/toutiao/videoReportDaily/getColumnJson', {
  946. columnType: 4
  947. }).then(res => {
  948. if (res.success) {
  949. if (res.result) {
  950. let columns = JSON.parse(res.result)
  951. if (columns.length) {
  952. if (columns.length >= columnsFixd.length) {
  953. columns.map((item, index) => {
  954. if (index > columnsFixd.length - 1) {
  955. item.sorter = function(a, b) {}
  956. }
  957. })
  958. columns = columns.slice(columnsFixd.length)
  959. this.columns = [...columnsFixd, ...columns]
  960. // this.tableHandle()
  961. }
  962. // console.log(this.columns)
  963. }
  964. }
  965. this.changeColumn(this.columns)
  966. }
  967. })
  968. },
  969. // deactivated() {
  970. // let arr = JSON.stringify(this.columns)
  971. // console.log(arr)
  972. // postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
  973. // json: arr,
  974. // columnType: 4
  975. // }).then(res => {
  976. // // console.log(res)
  977. // })
  978. // },
  979. beforeDestroy() {
  980. let arr = JSON.stringify(this.columns)
  981. postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
  982. json: arr,
  983. columnType: 4
  984. }).then(res => {
  985. // console.log(res)
  986. })
  987. },
  988. filters: {
  989. toshowTime(val) {
  990. // console.log(val, this.timedata)
  991. // return this.timedata[0] + '~' + this.timedata[1]
  992. return val
  993. },
  994. toPercentage(val) {
  995. if (val) {
  996. if (typeof val != 'string') {
  997. return (val * 100).toFixed(2) + '%'
  998. } else {
  999. return val
  1000. }
  1001. } else if (typeof val == 'string') {
  1002. return val
  1003. } else {
  1004. return 0
  1005. }
  1006. },
  1007. //保留两位小数并且变成货币格式
  1008. decimalsHandle(val) {
  1009. // console.log(val)
  1010. if (val && typeof val != 'string') {
  1011. if (val >= 0) {
  1012. val = parseFloat(val).toFixed(2)
  1013. let numberStr = val.toString()
  1014. let str = numberStr.split('.')
  1015. let str0 = str[0].split('').reverse()
  1016. for (let i = 0; i < str0.length; i++) {
  1017. if ((i + 1) % 4 === 0) {
  1018. str0.splice(i, 0, ',')
  1019. }
  1020. }
  1021. str0.reverse()
  1022. let handleResult = ''
  1023. for (let j = 0; j < str0.length; j++) {
  1024. handleResult += str0[j]
  1025. }
  1026. return handleResult + '.' + str[1]
  1027. } else {
  1028. val = parseFloat(val).toFixed(2)
  1029. let numberStr = val.toString()
  1030. let str = numberStr.split('.')
  1031. let str0 = str[0]
  1032. .substr(1)
  1033. .split('')
  1034. .reverse()
  1035. for (let i = 0; i < str0.length; i++) {
  1036. if ((i + 1) % 4 === 0) {
  1037. str0.splice(i, 0, ',')
  1038. }
  1039. }
  1040. str0.reverse()
  1041. let handleResult = ''
  1042. for (let j = 0; j < str0.length; j++) {
  1043. handleResult += str0[j]
  1044. }
  1045. return '-' + handleResult + '.' + str[1]
  1046. }
  1047. } else if (typeof val == 'string') {
  1048. return val
  1049. } else {
  1050. return 0
  1051. }
  1052. },
  1053. //变成货币格式
  1054. formatCurrency(val) {
  1055. if ((val || val == 0) && typeof val != 'string') {
  1056. let numberStr = val.toString()
  1057. let str = numberStr.split('').reverse()
  1058. for (let i = 0; i < str.length; i++) {
  1059. if ((i + 1) % 4 === 0) {
  1060. str.splice(i, 0, ',')
  1061. }
  1062. }
  1063. str.reverse()
  1064. let handleResult = ''
  1065. for (let j = 0; j < str.length; j++) {
  1066. handleResult += str[j]
  1067. }
  1068. return handleResult
  1069. } else if (typeof val == 'string') {
  1070. return val
  1071. } else {
  1072. return '-'
  1073. }
  1074. }
  1075. },
  1076. mounted() {
  1077. this.getDesignList()
  1078. //请求自定义列的数据
  1079. postAction('/toutiao/videoReportDaily/videoInfoListTotalExportExcelPermission').then(res => {
  1080. if (res.success) {
  1081. if (res.result) {
  1082. this.exportExcelIsOk = true
  1083. } else {
  1084. this.exportExcelIsOk = false
  1085. }
  1086. }
  1087. })
  1088. //进入页面默认展示昨天到今天的数据
  1089. this.dateRange = [moment().subtract(7, 'days'), moment()]
  1090. this.timedata = [
  1091. moment()
  1092. .subtract(7, 'days')
  1093. .format('YYYY-MM-DD'),
  1094. moment().format('YYYY-MM-DD')
  1095. ]
  1096. // this.loading=true;
  1097. postAction('/toutiao/videoReportDaily/getColumnJson', {
  1098. columnType: 4
  1099. }).then(res => {
  1100. // console.log(res)
  1101. if (res.success) {
  1102. // console.log(JSON.parse(res.result))
  1103. if (res.result) {
  1104. let columns = JSON.parse(res.result)
  1105. if (columns.length) {
  1106. if (columns.length >= columnsFixd.length) {
  1107. columns.map((item, index) => {
  1108. if (index > columnsFixd.length - 1) {
  1109. item.sorter = function(a, b) {}
  1110. }
  1111. })
  1112. columns = columns.slice(columnsFixd.length)
  1113. this.columns = [...columnsFixd, ...columns]
  1114. // this.tableHandle()
  1115. }
  1116. // console.log(this.columns)
  1117. }
  1118. }
  1119. this.changeColumn(this.columns)
  1120. }
  1121. })
  1122. }
  1123. }
  1124. </script>
  1125. <style lang="less">
  1126. // .ant-table .ant-table-fixed-left .ant-table-thead {
  1127. // height: 108px !important ;
  1128. // }
  1129. .vsummary {
  1130. .ant-table .ant-table-thead .ant-table-header-column .ant-table-column-title {
  1131. // display:block;
  1132. white-space: normal;
  1133. word-break: break-all;
  1134. }
  1135. }
  1136. </style>
  1137. <style lang="scss" scoped>
  1138. .vsummary {
  1139. width: 100%;
  1140. height: 100%;
  1141. background: white;
  1142. padding: 15px 30px;
  1143. .tableBox {
  1144. background-color: #fff;
  1145. margin: 15px 0px;
  1146. padding: 15px 0px;
  1147. .tableTop {
  1148. position: relative;
  1149. padding-bottom: 15px;
  1150. border-bottom: 1px solid #e0e0e0;
  1151. .selectTime {
  1152. margin-right: 20px;
  1153. }
  1154. .add {
  1155. position: absolute;
  1156. top: 0;
  1157. right: 0;
  1158. }
  1159. }
  1160. }
  1161. }
  1162. .xiangmuxuanze {
  1163. margin-bottom: 20px;
  1164. display: flex;
  1165. align-items: center;
  1166. }
  1167. .timeDiv {
  1168. display: flex;
  1169. justify-content: space-between;
  1170. }
  1171. span {
  1172. margin-left: 5px;
  1173. }
  1174. .myinput {
  1175. width: 40%;
  1176. }
  1177. .addlist {
  1178. float: left;
  1179. width: 70%;
  1180. border: 1px solid #eee;
  1181. .selectionList {
  1182. padding: 10px 15px;
  1183. height: 450px;
  1184. overflow: auto;
  1185. .leibie {
  1186. .leiName {
  1187. font-size: 26px;
  1188. text-align: left;
  1189. }
  1190. }
  1191. .jutixiang {
  1192. display: inline-block;
  1193. width: 32%;
  1194. box-sizing: border-box;
  1195. padding: 10px 3px;
  1196. }
  1197. }
  1198. }
  1199. .listNum {
  1200. float: right;
  1201. width: 28%;
  1202. border: 1px solid #eee;
  1203. position: relative;
  1204. }
  1205. .zhuti {
  1206. margin-top: 15px;
  1207. overflow: hidden;
  1208. p {
  1209. height: 40px;
  1210. line-height: 20px;
  1211. padding: 10px 15px;
  1212. background: rgb(249, 250, 253);
  1213. border-bottom: 1px solid #eee;
  1214. }
  1215. #btn {
  1216. position: absolute;
  1217. right: 0;
  1218. top: 5px;
  1219. }
  1220. .selectlist {
  1221. width: 100%;
  1222. list-style: none;
  1223. margin: 0;
  1224. height: 450px;
  1225. padding: 0 15px 10px;
  1226. overflow: auto;
  1227. li {
  1228. width: 100%;
  1229. padding: 5px 8px;
  1230. margin: 6px 0;
  1231. border-radius: 10px;
  1232. background: rgb(248, 248, 248);
  1233. height: 32px;
  1234. position: relative;
  1235. span {
  1236. width: 80%;
  1237. height: 100%;
  1238. display: inline-block;
  1239. margin: 0 10px;
  1240. // overflow:hidden;
  1241. // text-overflow:ellipsis;
  1242. // white-space: nowrap;
  1243. }
  1244. .listText {
  1245. position: absolute;
  1246. top: 2;
  1247. left: 10;
  1248. width: 40%;
  1249. overflow: hidden;
  1250. white-space: nowrap;
  1251. text-overflow: ellipsis;
  1252. }
  1253. #closeStyle {
  1254. position: absolute;
  1255. top: 9px;
  1256. right: 7px;
  1257. }
  1258. }
  1259. }
  1260. }
  1261. #mybtn {
  1262. margin: 0 10px 15px 0;
  1263. }
  1264. </style>