performanceRelated.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980
  1. <template>
  2. <div class="jixiao">
  3. <div class="top">
  4. <div class="topSel">
  5. <div class="company">
  6. <span>公司:</span>
  7. <a-select v-model="company" style="width: 120px" @change="companyChange">
  8. <a-select-option value="" v-if="selectOption.company.length>1">
  9. 全部
  10. </a-select-option>
  11. <a-select-option v-for="(item) in selectOption.company" :value='item.companyId' :key="item.companyId">
  12. {{item.area}}
  13. </a-select-option>
  14. </a-select>
  15. </div>
  16. <div>
  17. <span>媒体类型:</span>
  18. <a-select v-model="mediaType" style="width: 120px" @change="mediaTypeChange">
  19. <a-select-option :value="0">
  20. 全部
  21. </a-select-option>
  22. <a-select-option v-for="(item) in selectOption.mediaType" :value='item.num' :key='item.code'>
  23. {{item.name}}
  24. </a-select-option>
  25. </a-select>
  26. </div>
  27. <div>
  28. <span>年份:</span>
  29. <a-select v-model="years" style="width: 120px" @change="yearsChange">
  30. <a-select-option :value='0'>
  31. 全部
  32. </a-select-option>
  33. <a-select-option v-for="(item,index) in yearsArr" :value="item" :key='index'>
  34. {{item}}
  35. </a-select-option>
  36. </a-select>
  37. </div>
  38. <div>
  39. <span>季度:</span>
  40. <a-select v-model="quarter" style="width: 120px" @change="quarterChange">
  41. <a-select-option value="">
  42. 全部
  43. </a-select-option>
  44. <a-select-option v-for="(item,index) in quarterArr" :value='item' :key='index'>
  45. {{item}}
  46. </a-select-option>
  47. </a-select>
  48. </div>
  49. </div>
  50. <div class="optionBTN">
  51. <div>
  52. <span>部门:</span>
  53. <a-select v-model="department" style="width: 120px" @change="departmentChange">
  54. <a-select-option value=''>
  55. 全部
  56. </a-select-option>
  57. <a-select-option v-for="(item,index) in selectOption.depart" :value="item" :key="index">
  58. {{item}}
  59. </a-select-option>
  60. </a-select>
  61. </div>
  62. <div>
  63. <span>职位:</span>
  64. <a-select v-model="position" style="width: 120px" @change="positionChange">
  65. <a-select-option value=''>
  66. 全部
  67. </a-select-option>
  68. <a-select-option v-for="item in selectOption.post" :value="item.roleCode" :key="item.id">
  69. {{item.roleName}}
  70. </a-select-option>
  71. </a-select>
  72. </div>
  73. <div>
  74. <span>姓名:</span>
  75. <a-input placeholder="请输入姓名" v-model="nameValue" style="width:200px" />
  76. </div>
  77. <span class="btn">
  78. <a-button class="search" type='primary' @click="search">查询</a-button>
  79. <a-button type="primary" @click="exportExcel" id="mybtn">导出报表</a-button>
  80. </span>
  81. </div>
  82. </div>
  83. <div class="tableBox">
  84. <a-table
  85. size="middle"
  86. :columns="columns"
  87. :dataSource="tableData"
  88. bordered
  89. id="outTable"
  90. :pagination="ipagination"
  91. :scroll="{ x: scrollX }"
  92. :loading="loading"
  93. ref="accountTable"
  94. :width="tableWidth"
  95. @change="sort"
  96. style="word-break: break-all;font-size:16px;font-weight:600"
  97. >
  98. <span slot="operation" slot-scope="text, record">
  99. <a href="javascript:;" @click="opendetail(text, record)">查看明细</a>
  100. </span>
  101. <span slot="cost" slot-scope="cost">{{cost | decimalsHandle}}</span>
  102. <span slot="performance" slot-scope="performance">{{performance | decimalsHandle}}</span>
  103. <span slot="point" slot-scope="point">{{ point | pointHandle }}</span>
  104. <span slot="mediaType" slot-scope="text">
  105. <span v-if="text==1">头条</span>
  106. <span v-if="text==2">快手</span>
  107. <span v-if="text==3">头条内广</span>
  108. <span v-if="text==4">快手内广</span>
  109. </span>
  110. </a-table>
  111. </div>
  112. <!-- 明细表 -->
  113. <div class="detailBoxPerform">
  114. <a-modal v-model="visibleDetail" title="详细信息" width="70%" :footer="null" id="detailBoxPerform">
  115. <!-- <a-button type="default" @click="exportExcel" id="mybtn">导出报表</a-button> -->
  116. <div class="myTable">
  117. <a-table
  118. :columns="detailColumns"
  119. :data-source="detailData"
  120. bordered
  121. tableLayout="auto"
  122. :pagination="false"
  123. :loading='loadingDetail'
  124. style="word-break: break-all;"
  125. id="myTablePerform"
  126. :scroll="{ y: 500 }"
  127. >
  128. <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
  129. <span slot="totalCost" slot-scope="totalCost">{{ totalCost | decimalsHandle }}</span>
  130. <span slot="materialCost" slot-scope="materialCost">{{ materialCost | decimalsHandle }}</span>
  131. <span slot="oldCost" slot-scope="oldCost">{{ oldCost | decimalsHandle }}</span>
  132. <span slot="newCost" slot-scope="newCost">{{ newCost | decimalsHandle }}</span>
  133. <span slot="personCost" slot-scope="personCost">{{ personCost | decimalsHandle }}</span>
  134. <span slot="percent" slot-scope="percent">{{ percent | toPercentage }}</span>
  135. <span slot="oldPercent" slot-scope="oldPercent">{{ oldPercent | toPercentage }}</span>
  136. <span slot="newPercent" slot-scope="newPercent">{{ newPercent | toPercentage }}</span>
  137. <div slot="urls" slot-scope="test,records">
  138. <img
  139. :src="records.coverUrl"
  140. alt
  141. style="width:100px"
  142. @click="openVideo(records.url)"
  143. />
  144. </div>
  145. <span slot="mediaType" slot-scope="text">
  146. <span v-if="text==1">头条</span>
  147. <span v-if="text==2">快手</span>
  148. <span v-if="text==3">头条内广</span>
  149. <span v-if="text==4">快手内广</span>
  150. </span>
  151. </a-table>
  152. <div class="fenye">
  153. <a-pagination v-if="totalItem>0" v-model="currentPage" :total="totalItem" id="fenye" show-less-items style="margin: 20px 5px 5px;" size="small" @change="pageChange"/>
  154. </div>
  155. </div>
  156. </a-modal>
  157. </div>
  158. <a-modal v-model="Videovisible" title="视频详情" @ok="videoOk" :footer="null" width="50%">
  159. <video
  160. @click.stop
  161. class="video"
  162. :src="videoUrl"
  163. controls="controls"
  164. style="height:600px;width:100%"
  165. >您的浏览器不支持 video 标签。</video>
  166. </a-modal>
  167. </div>
  168. </template>
  169. <script>
  170. import moment from 'moment';
  171. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  172. import { JeecgListMixin } from '@/mixins/ipagination'
  173. const columnsFixd = [
  174. {
  175. title: '姓名',
  176. dataIndex: 'userName',
  177. align: 'center',
  178. key:'userName',
  179. scopedSlots: { customRender: 'userName' }
  180. },
  181. {
  182. title: '部门',
  183. dataIndex: 'department',
  184. align: 'center',
  185. key: 'department',
  186. scopedSlots: { customRender: 'department' }
  187. },
  188. {
  189. title: '职位',
  190. dataIndex: 'roleName',
  191. align: 'center',
  192. key: 'roleName',
  193. scopedSlots: { customRender: 'roleName' }
  194. },
  195. {
  196. title: '媒体类型',
  197. dataIndex: 'mediaType',
  198. align: 'center',
  199. scopedSlots: { customRender: 'mediaType' }
  200. },
  201. {
  202. title: '季度',
  203. dataIndex: 'quarters',
  204. align: 'center',
  205. scopedSlots: { customRender: 'quarters' }
  206. },
  207. {
  208. title: '消耗(元)',
  209. dataIndex: 'cost',
  210. align: 'center',
  211. scopedSlots: { customRender: 'cost' },
  212. },
  213. {
  214. title: '提成比例',
  215. dataIndex: 'point',
  216. align: 'center',
  217. scopedSlots: { customRender: 'point' },
  218. },
  219. // {
  220. // title: '应得绩效',
  221. // dataIndex: 'performance',
  222. // align: 'center',
  223. // scopedSlots: { customRender: 'performance' },
  224. // sorter:()=>{}
  225. // },
  226. // {
  227. // title: '管理岗绩效',
  228. // dataIndex: 'additionalFees',
  229. // align: 'center',
  230. // scopedSlots: { customRender: 'additionalFees' },
  231. // sorter:()=>{}
  232. // },
  233. {
  234. title: '操作',
  235. dataIndex: 'operation',
  236. align: 'center',
  237. scopedSlots: { customRender: 'operation' },
  238. }
  239. ]
  240. const elseColumns = [
  241. {
  242. title: '姓名',
  243. dataIndex: 'userName',
  244. align: 'center',
  245. key:'userName',
  246. scopedSlots: { customRender: 'userName' }
  247. },
  248. {
  249. title: '部门',
  250. dataIndex: 'department',
  251. align: 'center',
  252. key: 'department',
  253. scopedSlots: { customRender: 'department' }
  254. },
  255. {
  256. title: '职位',
  257. dataIndex: 'roleName',
  258. align: 'center',
  259. key: 'roleName',
  260. scopedSlots: { customRender: 'roleName' }
  261. },
  262. {
  263. title: '媒体类型',
  264. dataIndex: 'mediaType',
  265. align: 'center',
  266. scopedSlots: { customRender: 'mediaType' }
  267. },
  268. {
  269. title: '季度',
  270. dataIndex: 'quarters',
  271. align: 'center',
  272. scopedSlots: { customRender: 'quarters' }
  273. },
  274. {
  275. title: '消耗(元)',
  276. dataIndex: 'cost',
  277. align: 'center',
  278. scopedSlots: { customRender: 'cost' },
  279. },
  280. {
  281. title: '操作',
  282. dataIndex: 'operation',
  283. align: 'center',
  284. scopedSlots: { customRender: 'operation' },
  285. }
  286. ]
  287. const operateDetailColumns=[
  288. {
  289. title: '季度',
  290. dataIndex: 'quarters',
  291. align: 'center',
  292. scopedSlots: { customRender: 'quarters' },
  293. width:200
  294. },
  295. {
  296. title: '项目',
  297. dataIndex: 'projectName',
  298. align: 'center',
  299. scopedSlots: { customRender: 'projectName' },
  300. width:200
  301. },
  302. {
  303. title: '账户名称',
  304. dataIndex: 'authName',
  305. align: 'center',
  306. scopedSlots: { customRender: 'authName' },
  307. },
  308. {
  309. title: '消耗(元)',
  310. dataIndex: 'cost',
  311. align: 'center',
  312. scopedSlots: { customRender: 'cost' },
  313. width:150,
  314. },
  315. ]
  316. const saleDetailColumns = [
  317. {
  318. title: '季度',
  319. dataIndex: 'quarters',
  320. align: 'center',
  321. scopedSlots: { customRender: 'quarters' },
  322. width:110
  323. },
  324. {
  325. title: '老客消耗(元)',
  326. dataIndex: 'oldCost',
  327. align: 'center',
  328. scopedSlots: { customRender: 'oldCost' },
  329. width:115
  330. },
  331. {
  332. title: '新客消耗(元)',
  333. dataIndex: 'newCost',
  334. align: 'center',
  335. scopedSlots: { customRender: 'newCost' },
  336. width:115,
  337. },
  338. {
  339. title: '老客提成比例',
  340. dataIndex: 'oldPercent',
  341. align: 'center',
  342. scopedSlots: { customRender: 'oldPercent' },
  343. width:120
  344. },
  345. {
  346. title: '新客提成比例',
  347. dataIndex: 'newPercent',
  348. align: 'center',
  349. scopedSlots: { customRender: 'newPercent' },
  350. width:120,
  351. },
  352. {
  353. title: '广告主名称',
  354. dataIndex: 'name',
  355. align: 'center',
  356. scopedSlots: { customRender: 'name' },
  357. },
  358. {
  359. title: '总消耗(元)',
  360. dataIndex: 'totalCost',
  361. align: 'center',
  362. scopedSlots: { customRender: 'totalCost' },
  363. width:100,
  364. },
  365. ]
  366. const designDetailColumns = [
  367. {
  368. title: '媒体类型',
  369. dataIndex: 'mediaType',
  370. align: 'center',
  371. scopedSlots: { customRender: 'mediaType' },
  372. width:100,
  373. },
  374. {
  375. title: '项目',
  376. dataIndex: 'projectName',
  377. align: 'center',
  378. scopedSlots: { customRender: 'projectName' },
  379. width:100,
  380. },
  381. {
  382. title: '视频',
  383. dataIndex: 'urls',
  384. align: 'center',
  385. scopedSlots: { customRender: 'urls' },
  386. width:140,
  387. },
  388. {
  389. title: '素材消耗(元)',
  390. dataIndex: 'materialCost',
  391. align: 'center',
  392. scopedSlots: { customRender: 'materialCost' },
  393. width:120,
  394. },
  395. {
  396. title: '个人消耗(素材消耗*绩效占比)',
  397. dataIndex: 'personCost',
  398. align: 'center',
  399. scopedSlots: { customRender: 'personCost' },
  400. },
  401. {
  402. title: '设计负责人',
  403. dataIndex: 'leaderName',
  404. align: 'center',
  405. scopedSlots: { customRender: 'leaderName' },
  406. width:110,
  407. },
  408. {
  409. title: '职位',
  410. dataIndex: 'roleName',
  411. align: 'center',
  412. scopedSlots: { customRender: 'roleName' },
  413. width:100,
  414. },
  415. {
  416. title: '绩效占比',
  417. dataIndex: 'percent',
  418. align: 'center',
  419. scopedSlots: { customRender: 'percent' },
  420. width:100,
  421. },
  422. ]
  423. export default {
  424. mixins:[JeecgListMixin],
  425. data() {
  426. return {
  427. selectOption:{
  428. company:{}
  429. },
  430. yearsArr:[],
  431. quarterArr:[],
  432. company:'',
  433. mediaType:0,
  434. position:'',
  435. department:'',
  436. quarter:'',//季度数据
  437. years:0,
  438. nameValue:'',
  439. //table数据
  440. columns:JSON.parse(JSON.stringify(columnsFixd)) ,//table的表头
  441. columnsFixd,
  442. elseColumns,
  443. tableData:[],
  444. scrollX:0,
  445. tableWidth: '',//设置表格的列宽
  446. loading:false,
  447. //是否打开视频
  448. Videovisible: false,
  449. videoUrl: '',
  450. visibleDetail:false, //明细表的开关
  451. detailData:[],
  452. loadingDetail:false,
  453. detailColumns:JSON.parse(JSON.stringify(operateDetailColumns)),
  454. operateDetailColumns,//运行
  455. saleDetailColumns,//销售的详细表头
  456. designDetailColumns,//设计的详细表头
  457. //fenye
  458. currentPage:1,
  459. totalItem:0,
  460. currentRecord:null
  461. }
  462. },
  463. methods: {
  464. moment,
  465. //chaxun anniu
  466. search(){
  467. if(this.department=='运营部'){
  468. this.columns=this.columnsFixd;
  469. this.detailColumns=this.operateDetailColumns
  470. }else if(this.department=='设计部'){
  471. this.columns=this.elseColumns;
  472. this.detailColumns=this.designDetailColumns
  473. }else if(this.department=='销售部'){
  474. this.columns=this.elseColumns;
  475. this.detailColumns=this.saleDetailColumns
  476. }else{
  477. this.columns=this.columnsFixd;
  478. }
  479. this.tableHttp();
  480. },
  481. //导出报表
  482. exportExcel() {
  483. // var name = this.data.filter(item => {
  484. // return item.signature == this.signature
  485. // })[0].projectName
  486. let companyName=''
  487. if(this.company){
  488. this.selectOption.company.forEach((item)=>{
  489. if(item.companyId==this.company){
  490. companyName=item.area
  491. }
  492. })
  493. }
  494. var name =`${companyName || '全公司'}_${this.year || '全年份'}_${this.quarter || '全季度'}_${this.mediaType|| '全部类型'}`;
  495. downFilePost('/ctop/performance/show/excel', {
  496. year:this.years,
  497. quarter:this.quarter,
  498. company:this.company,
  499. userName:this.nameValue,
  500. roleCode:this.position,
  501. mediaType:this.mediaType,
  502. department:this.department
  503. }).then(res => {
  504. let blob = new Blob([res], {
  505. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  506. })
  507. let downloadElement = document.createElement('a')
  508. let href = window.URL.createObjectURL(blob) //创建下载的链接
  509. downloadElement.href = href
  510. downloadElement.download = name+'.xlsx' //下载后文件名
  511. document.body.appendChild(downloadElement)
  512. downloadElement.click() //点击下载
  513. document.body.removeChild(downloadElement) //下载完成移除元素
  514. window.URL.revokeObjectURL(href) //释放掉blob对象
  515. })
  516. },
  517. //点击查看明细按钮的事件
  518. opendetail(text, record) {
  519. console.log(text, record);
  520. this.visibleDetail = true
  521. this.detailData = []
  522. this.loadingDetail=true
  523. this.currentRecord=record
  524. this.currentPage=1;
  525. this.totalItem=0
  526. if(record.department=='运营部'){
  527. // this.columns=this.columnsFixd;
  528. this.detailColumns=this.operateDetailColumns;
  529. postAction('/ctop/performance/show/operateDetail', {
  530. year:record.year,
  531. quarter:record.quarter,
  532. userId:record.userId,
  533. mediaType:record.mediaType
  534. }).then(res => {
  535. // let resArr = []
  536. this.loadingDetail=false
  537. console.log(res)
  538. if (res.success) {
  539. let result = res.result
  540. // this.detailData.push({ ...result, key: 1 })
  541. result.map((item, index) => {
  542. item.key = index;
  543. item.quarters=record.quarters
  544. })
  545. this.detailData = result
  546. }
  547. })
  548. }else if(record.department=='设计部'){
  549. // this.columns=this.elseColumns;
  550. this.detailColumns=this.designDetailColumns;
  551. postAction('/ctop/performance/show/designDetail/1/10', {
  552. year:record.year,
  553. quarter:record.quarter,
  554. userId:record.userId,
  555. mediaType:record.mediaType
  556. }).then(res => {
  557. // let resArr = []
  558. this.loadingDetail=false
  559. console.log(res)
  560. if (res.success) {
  561. let result = res.result.list
  562. // this.detailData.push({ ...result, key: 1 })
  563. result.map((item, index) => {
  564. item.key = index;
  565. item.roleName=this.currentRecord.roleName
  566. item.quarters=record.quarters
  567. })
  568. this.detailData = result;
  569. this.totalItem=res.result.total
  570. }
  571. })
  572. }else if(record.department=='销售部'){
  573. // this.columns=this.elseColumns;
  574. this.detailColumns=this.saleDetailColumns;
  575. postAction('/ctop/performance/show/saleDetail', {
  576. year:record.year,
  577. quarter:record.quarter,
  578. userId:record.userId,
  579. mediaType:record.mediaType
  580. }).then(res => {
  581. // let resArr = []
  582. this.loadingDetail=false
  583. console.log(res)
  584. if (res.success) {
  585. let result = res.result
  586. // this.detailData.push({ ...result, key: 1 })
  587. result.map((item, index) => {
  588. item.key = index;
  589. item.quarters=record.quarters
  590. })
  591. this.detailData = result
  592. }
  593. })
  594. }
  595. },
  596. //获取选择框的信息
  597. getInfoHttp(){
  598. getAction('/ctop/performance/show/getPerformanceInfo',{}).then((res)=>{
  599. // console.log(res);
  600. this.selectOption=res.result;
  601. this.yearsArr=Reflect.ownKeys(res.result.data).splice(0,Reflect.ownKeys(res.result.data).length-1)
  602. // console.log(this.yearsArr)
  603. console.log(this.selectOption.company.length)
  604. if(this.selectOption.company.length==1){
  605. this.company=this.selectOption.company[0].companyId
  606. }
  607. });
  608. },
  609. //职位改变
  610. positionChange(val){
  611. console.log(val)
  612. this.position=val;
  613. },
  614. //部门改变
  615. departmentChange(val){
  616. console.log(val)
  617. this.department=val
  618. },
  619. //公司改变
  620. companyChange(val){
  621. // console.log(val)
  622. this.company=val
  623. },
  624. //媒体类型
  625. mediaTypeChange(val){
  626. // console.log(val)
  627. this.mediaType=val
  628. },
  629. //年份改变
  630. yearsChange(val){
  631. // console.log(val)
  632. this.years=val;
  633. if(val==''){
  634. this.quarterArr=[];
  635. this.quarter=''
  636. }else{
  637. this.quarterArr=this.selectOption.data[this.years]
  638. }
  639. },
  640. //季度改变
  641. quarterChange(val){
  642. // console.log(val)
  643. this.quarter=val;
  644. },
  645. //table 排序
  646. sort(pagination, filters, sorter, { currentDataSource }){
  647. console.log(pagination, filters, sorter)
  648. if(sorter.order == 'ascend'){
  649. this.order='asc'
  650. this.target=sorter.columnKey;
  651. }else if(sorter.order == 'descend'){
  652. this.order='desc'
  653. this.target=sorter.columnKey;
  654. }else{
  655. this.order='desc'
  656. this.target='cost';
  657. }
  658. this.tableHttp();
  659. },
  660. //请求table的数据
  661. tableHttp(){
  662. this.loading=true
  663. this.tableData=[]
  664. postAction(`ctop/performance/show/${this.ipagination.current}/${this.ipagination.pageSize}/desc`,{
  665. year:this.years,
  666. quarter:this.quarter,
  667. company:this.company,
  668. userName:this.nameValue,
  669. roleCode:this.position,
  670. mediaType:this.mediaType,
  671. department:this.department
  672. }).then(res=>{
  673. console.log(res)
  674. this.loading=false;
  675. if(res.success&&res.result.list.length>0){
  676. res.result.list.forEach((item,index)=>{
  677. item.key=index;
  678. item.quarters=item.year+'_'+item.quarter;
  679. })
  680. this.tableData=[...res.result.list]
  681. }
  682. this.ipagination.total = res.result.total
  683. })
  684. },
  685. //打开视频
  686. openVideo(val) {
  687. this.Videovisible = true
  688. this.videoUrl = val
  689. },
  690. videoOk() {
  691. this.Videovisible = false
  692. },
  693. //f分页页码改变
  694. pageChange(page, pageSize){
  695. console.log(page, pageSize);
  696. this.currentPage=page;
  697. this.detailData=[];
  698. this.loadingDetail=true;
  699. postAction(`/ctop/performance/show/designDetail/${this.currentPage}/10`, {
  700. year:this.currentRecord.year,
  701. quarter:this.currentRecord.quarter,
  702. userId:this.currentRecord.userId,
  703. mediaType:this.currentRecord.mediaType
  704. }).then(res => {
  705. // let resArr = []
  706. this.loadingDetail=false
  707. console.log(res)
  708. if (res.success) {
  709. let result = res.result.list
  710. // this.detailData.push({ ...result, key: 1 })
  711. result.map((item, index) => {
  712. item.key = index;
  713. item.roleName=this.currentRecord.roleName
  714. item.quarters=this.currentRecord.quarters
  715. })
  716. this.detailData = result;
  717. this.totalItem=res.result.total
  718. }
  719. })
  720. },
  721. onVisibleChange (key) { //Tooltip 显示隐藏的回调,类似onmouseenter 进入离开事件,用来显示我们不同的信息提醒
  722. console.log(key)
  723. let str = '';
  724. switch (key) {
  725. case 1:
  726. str = '你的姓名';
  727. default:
  728. break;
  729. }
  730. // this.filterTitleKey=str
  731. }
  732. },
  733. mounted() {
  734. new Promise((resolve,reject)=>{
  735. getAction('/ctop/performance/show/getPerformanceInfo',{}).then((res)=>{
  736. // console.log(res);
  737. this.selectOption=res.result;
  738. this.yearsArr=Reflect.ownKeys(res.result.data).splice(0,Reflect.ownKeys(res.result.data).length-1)
  739. // console.log(this.yearsArr)
  740. console.log(this.selectOption.company.length)
  741. if(this.selectOption.company.length==1){
  742. this.company=this.selectOption.company[0].companyId
  743. }
  744. resolve('true')
  745. });
  746. }).then((res)=>{
  747. this.tableHttp();
  748. })
  749. },
  750. filters: {
  751. pointHandle(val){
  752. if(val){
  753. if(typeof val != 'string'){
  754. return (val * 100).toFixed(2) + '%'
  755. }else{
  756. return val
  757. }
  758. }
  759. else{
  760. return '-'
  761. }
  762. },
  763. toPercentage(val) {
  764. if(val){
  765. if(typeof val != 'string'){
  766. return (val * 100).toFixed(2) + '%'
  767. }else{
  768. return val
  769. }
  770. }else if(typeof val =='string'){
  771. return val
  772. }
  773. else{
  774. return 0
  775. }
  776. },
  777. //保留两位小数并且变成货币格式
  778. decimalsHandle(val){
  779. if(val && typeof val !='string'){
  780. if(val>=0){
  781. val=parseFloat(val).toFixed(2);
  782. let numberStr = val.toString()
  783. let str = numberStr.split('.')
  784. let str0=str[0].split('').reverse();
  785. for (let i = 0; i < str0.length; i++) {
  786. if ((i + 1) % 4 === 0) {
  787. str0.splice(i, 0, ',')
  788. }
  789. }
  790. str0.reverse()
  791. let handleResult = ''
  792. for (let j = 0; j < str0.length; j++) {
  793. handleResult += str0[j]
  794. }
  795. return handleResult+'.'+str[1]
  796. }else{
  797. val=parseFloat(val).toFixed(2);
  798. let numberStr = val.toString()
  799. let str = numberStr.split('.')
  800. let str0=str[0].substr(1).split('').reverse();
  801. for (let i = 0; i < str0.length; i++) {
  802. if ((i + 1) % 4 === 0) {
  803. str0.splice(i, 0, ',')
  804. }
  805. }
  806. str0.reverse()
  807. let handleResult = ''
  808. for (let j = 0; j < str0.length; j++) {
  809. handleResult += str0[j]
  810. }
  811. return '-'+handleResult+'.'+str[1]
  812. }
  813. }else if(typeof val =='string'){
  814. return val
  815. }
  816. else{
  817. return 0
  818. }
  819. },
  820. //变成货币格式
  821. formatCurrency(val){
  822. if((val||val==0)&& typeof val !='string'){
  823. let numberStr = val.toString()
  824. let str = numberStr.split('').reverse()
  825. for (let i = 0; i < str.length; i++) {
  826. if ((i + 1) % 4 === 0) {
  827. str.splice(i, 0, ',')
  828. }
  829. }
  830. str.reverse()
  831. let handleResult = ''
  832. for (let j = 0; j < str.length; j++) {
  833. handleResult += str[j]
  834. }
  835. return handleResult
  836. }else if(typeof val =='string'){
  837. return val
  838. }
  839. else{
  840. return '-'
  841. }
  842. }
  843. }
  844. }
  845. </script>
  846. <style lang="scss" scoped>
  847. .jixiao{
  848. .top{
  849. background: #fff;
  850. margin-bottom: 20px;
  851. padding: 20px 15px 20px;
  852. }
  853. .topSel{
  854. display: flex;
  855. padding: 10px 0;
  856. // justify-content: space-between;
  857. div{
  858. display: inline-block;
  859. margin-right: 0.6rem;
  860. }
  861. }
  862. .optionBTN{
  863. // float: right;
  864. padding: 10px 0px;
  865. div{
  866. display: inline-block;
  867. margin-right: 0.6rem;
  868. }
  869. .btn{
  870. float: right;
  871. }
  872. .search{
  873. margin-right: 20px;
  874. width: 88px;
  875. }
  876. }
  877. .optionBTN::before{
  878. content: '';
  879. display: block;
  880. clear: both;
  881. }
  882. .top:hover{
  883. box-shadow: 0 0 15px rgba(0,0,0,.2);
  884. border-radius: 10px;
  885. }
  886. .tableBox{
  887. background: #fff;
  888. padding: 15px 15px;
  889. }
  890. }
  891. </style>
  892. <style lang="scss">
  893. #detailBoxPerform{
  894. padding: 20px 0 20px;
  895. #myTablePerform{
  896. margin-bottom: 20px;
  897. }
  898. .fenye{
  899. text-align: right;
  900. }
  901. }
  902. </style>