platForm.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695
  1. <template>
  2. <div class="workBench">
  3. <div class="topBody">
  4. <p class="breadcrumb">工作台</p>
  5. <div class="bottom">
  6. <div class="touxiang">
  7. <img src="@/assets/touxiang.png" alt="">
  8. </div>
  9. <div class='tip'>
  10. <p class="greet">{{getTimeState()}},{{roleInfo.realname}},祝你开心每一天!</p>
  11. <p class="descPosition">
  12. <span>{{roleInfo.roleName}}</span>
  13. <a-divider type="vertical" />
  14. <span>{{roleInfo.area}}地区-{{roleInfo.departName}}</span>
  15. </p>
  16. </div>
  17. </div>
  18. </div>
  19. <div class="section">
  20. <div class="sectionBody">
  21. <div class="sectionLeftBox">
  22. <div class="leftTop">
  23. <div class="sectionHead">
  24. 我的工作内容
  25. </div>
  26. <div class="zhanshiBox">
  27. <div class="item" @click="goOrderList(1)">
  28. <div class="title">
  29. <img src="@/assets/work.png" alt="" class="iconImg">
  30. <span>待确定的订单</span>
  31. </div>
  32. <div class="itemBody">
  33. <p class="count">{{countInfo.toDecided||0}} <span>个</span></p>
  34. </div>
  35. </div>
  36. <div class="item" @click="goMaterialList(4)">
  37. <div class="title">
  38. <img src="@/assets/work.png" alt="" class="iconImg">
  39. <span>待指派的物料</span>
  40. </div>
  41. <div class="itemBody">
  42. <p class="count">{{countInfo.toPayOut||0}} <span>个</span></p>
  43. </div>
  44. </div>
  45. <div class="item" @click="goMaterialList(1)">
  46. <div class="title">
  47. <img src="@/assets/work.png" alt="" class="iconImg">
  48. <span>我参与的物料</span>
  49. </div>
  50. <div class="itemBody">
  51. <p class="count">{{countInfo.myMaterial||0}} <span>个</span></p>
  52. </div>
  53. </div>
  54. <div class="item" @click="goMaterialList(2)">
  55. <div class="title">
  56. <img src="@/assets/work.png" alt="" class="iconImg">
  57. <span>被驳回的物料</span>
  58. </div>
  59. <div class="itemBody">
  60. <p class="count">{{countInfo.rejectMaterial||0}} <span>个</span></p>
  61. </div>
  62. </div>
  63. <div class="item" @click="goOrderList(3)">
  64. <div class="title">
  65. <img src="@/assets/work.png" alt="" class="iconImg">
  66. <span>已完成的订单</span>
  67. </div>
  68. <div class="itemBody">
  69. <p class="count">{{countInfo.finishOrder||0}} <span>个</span></p>
  70. </div>
  71. </div>
  72. <div class="item" @click="goOrderList(4)">
  73. <div class="title">
  74. <img src="@/assets/work.png" alt="" class="iconImg">
  75. <span>全部订单</span>
  76. </div>
  77. <div class="itemBody">
  78. <p class="count">{{countInfo.allOrder||0}} <span>个</span></p>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. <div class="leftBottom">
  84. <div class="sectionHead">
  85. 订单进度
  86. <!-- <a-button type="link" class="allOrder" @click="goOrderList(4)">全部订单</a-button> -->
  87. </div>
  88. <a-spin :spinning="orderProgressSpinning">
  89. <div class="orderProgress">
  90. <ul class="orderProgress-list" v-if="orderProgressList.length>0">
  91. <li v-for="(item,index) in orderProgressList" :key="index" >
  92. <div style="display:flex;align-items: center;" class="orderProgress-list-item" @click="orderDetail(item)">
  93. <div style="display:flex;width:80%; align-items: center;" >
  94. <span class="item-icon"></span>
  95. <div class="content">
  96. <p class="name">{{item.orderTitle}}</p>
  97. <p class="desc">{{item.orderRemark}}</p>
  98. </div>
  99. </div>
  100. <div class="progress" v-if="item.orderStatus==1||item.orderStatus==3">
  101. <a-progress type="circle" :percent="(item.materialFinishAmount/item.materialAmount)*100" :width='30' :showInfo='false' :strokeWidth='10' />
  102. <span style="margin-left:15px">{{(item.materialFinishAmount/item.materialAmount)*100}}%</span>
  103. </div>
  104. <div class="progress" v-else>
  105. {{item.orderStatus|handleOrderStatus}}
  106. </div>
  107. </div>
  108. </li>
  109. </ul>
  110. <div v-else style="width:100%;height:585px;line-height:585px;text-align:center">
  111. <img src="@/assets/nodata.png" alt="" style="width:300px;text-align:center">
  112. </div>
  113. <!-- hideOnSinglePage -->
  114. <a-pagination size="small" :total="totalPage" :current='currentPage' class="fenye" :pageSize='8' @change='pageChange' show-quick-jumper hideOnSinglePage />
  115. </div>
  116. </a-spin>
  117. </div>
  118. </div>
  119. <div class="sectionRightBox">
  120. <div class="rightTop">
  121. <div class="sectionHead">
  122. 操作记录
  123. </div>
  124. <a-spin :spinning="spinning">
  125. <div class="optionRecordList">
  126. <a-timeline >
  127. <a-timeline-item color='#F0F2F5' style="height:46px" v-for="(item,index) in operateRecordList" :key="index">
  128. <p style="margin-bottom:0px">
  129. <span class="content-item">{{item.userName}}{{item.operate}}{{item.materialName||item.orderTitle}}</span>
  130. <span class="time">{{item.time}}</span>
  131. </p>
  132. </a-timeline-item>
  133. </a-timeline>
  134. </div>
  135. </a-spin>
  136. </div>
  137. <!-- <div class="rightBottom">
  138. <div class="sectionHead">
  139. 本周项目燃尽图
  140. </div>
  141. <div class="burnDown">
  142. <a-progress type="circle" :percent="75" :width='150' :strokeWidth='6' />
  143. <div class="tip">
  144. <p class="done">
  145. <span class="item-icon"></span>
  146. <span>已完成订单:{{}}个</span>
  147. </p>
  148. <p class="all">
  149. <span class="item-icon"></span>
  150. <span>未完成订单:{{}}个</span>
  151. </p>
  152. </div>
  153. </div>
  154. </div> -->
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. </template>
  160. <script>
  161. import moment from 'moment';
  162. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  163. export default {
  164. name:'designlearder-platform',
  165. data() {
  166. return {
  167. spinning:false,
  168. moment,
  169. roleInfo:{},
  170. orderProgressSpinning:false,
  171. countInfo:{},
  172. touxiang:'@/assets/touxiang.png',
  173. // 订单进度
  174. orderProgressList:[
  175. ],
  176. // 操作记录
  177. optionRecord:[],
  178. // 本周项目燃尽图
  179. burnDownChart:[],
  180. // 分页参数
  181. totalPage:0,
  182. currentPage:1,
  183. userInfo:{},
  184. roleCode:'',
  185. operateRecordList:[],
  186. TimerObj:null
  187. }
  188. },
  189. methods: {
  190. orderDetail(item){
  191. console.log(item)
  192. this.$parent.currentTabComponent='orderDetail';
  193. this.$parent.orderId=item.id
  194. },
  195. goOrderList(val){
  196. console.log(val);
  197. // console.log(this.$parent)
  198. this.$parent.currentTabComponent='orderList';
  199. this.$parent.orderStatus=val
  200. },
  201. goMaterialList(val){
  202. this.$parent.currentTabComponent='materialList';
  203. this.$parent.materialStatus=val
  204. },
  205. // 分页页码改变
  206. pageChange(page, pageSize){
  207. // console.log(page,pageSize)
  208. this.currentPage=page;
  209. this.getOrderList()
  210. },
  211. // 全部订单
  212. allOrder() {
  213. this.$router.push('/workBench/orderList')
  214. },
  215. // 获取订单列表
  216. getOrderList(){
  217. this.orderProgressSpinning=true;
  218. let params={
  219. design:this.userInfo.id,
  220. pageNo:this.currentPage,
  221. pageSize:10,
  222. }
  223. getAction('/platform/order/listByCreatorOrDesignLeader',params).then(res=>{
  224. console.log(res);
  225. this.loading=false;
  226. this.orderProgressSpinning=false;
  227. if(res.success){
  228. this.orderProgressList=res.result.list;
  229. this.totalPage=res.result.total;
  230. }
  231. })
  232. },
  233. // 操作记录
  234. getOperationRecord(){
  235. this.spinning=true;
  236. getAction('/platform/operateRecord/createDesc').then(res=>{
  237. console.log(res)
  238. this.spinning=false;
  239. if(res.success){
  240. this.operateRecordList=res.result.list.map((item,index)=>{
  241. let time='';
  242. let startTime=moment(item.createTime)
  243. console.log()
  244. if(moment().diff(startTime,'minutes')>60){
  245. time=item.createTime.split(/[ ]+/)[1]
  246. return {
  247. ...item,
  248. time,
  249. }
  250. }else if(moment().diff(startTime,'minutes')>=1){
  251. time=moment().diff(startTime,'minutes')+'分钟前'
  252. return {
  253. ...item,
  254. time,
  255. }
  256. }else if(moment().diff(startTime,'minutes')==0){
  257. time=moment().diff(startTime,'seconds')+'秒前'
  258. return {
  259. ...item,
  260. time,
  261. }
  262. }
  263. });
  264. }
  265. })
  266. },
  267. scrollRecord(){
  268. console.log(this.$refs.scrollRecord);
  269. this.TimerObj=setInterval(()=>{
  270. this.getOperationRecord()
  271. },60000)
  272. },
  273. // 获取工作台内容
  274. getPlantformInfo(){
  275. getAction('/platform/query/jobContent').then(res=>{
  276. console.log(res)
  277. if(res.success){
  278. if(this.$parent.role=='operator'){
  279. this.countInfo=res.result.operatorJobContent
  280. }else if(this.$parent.role=='design'){
  281. this.countInfo=res.result.designJobContent
  282. }else if(this.$parent.role=='designLeader'){
  283. this.countInfo=res.result.designLeaderJobContent
  284. }
  285. }
  286. })
  287. },
  288. getTimeState () {
  289. // 获取当前时间
  290. let timeNow = new Date();
  291. // 获取当前小时
  292. let hours = timeNow.getHours();
  293. // 设置默认文字
  294. let text = ``;
  295. // 判断当前时间段
  296. if (hours >= 0 && hours <= 5) {
  297. text = `凌晨好`;
  298. }else if(hours >= 6 && hours <= 9){
  299. text = `早上好`;
  300. } else if(hours > 9 && hours <= 12){
  301. text = `上午好`;
  302. }else if (hours > 12 && hours <= 14) {
  303. text = `中午好`;
  304. } else if (hours > 14 && hours <= 18) {
  305. text = `下午好`;
  306. } else if (hours > 18 && hours <= 24) {
  307. text = `晚上好`;
  308. }
  309. // 返回当前时间段对应的状态
  310. return text
  311. },
  312. getidentity(){
  313. getAction('/platform/query/identity',{}).then(res=>{
  314. console.log(res);
  315. if(res.success){
  316. this.roleInfo=res.result
  317. }
  318. })
  319. }
  320. },
  321. mounted(){
  322. let userInfo=localStorage.getItem('pro__Login_Userinfo');
  323. if(userInfo){
  324. this.userInfo=JSON.parse(userInfo).value
  325. }
  326. this.roleCode=localStorage.getItem('roleCode')
  327. this.getOrderList()
  328. this.getOperationRecord()
  329. this.scrollRecord()
  330. this.getPlantformInfo()
  331. this.getidentity();
  332. },
  333. beforeDestroy(){
  334. clearInterval(this.TimerObj)
  335. },
  336. activated(){
  337. let userInfo=localStorage.getItem('pro__Login_Userinfo');
  338. if(userInfo){
  339. this.userInfo=JSON.parse(userInfo).value
  340. }
  341. this.roleCode=localStorage.getItem('roleCode')
  342. this.getOrderList()
  343. this.getOperationRecord()
  344. this.getPlantformInfo()
  345. this.getidentity();
  346. },
  347. filters:{
  348. handleOrderStatus(val){
  349. let text
  350. switch (val) {
  351. case 0:
  352. text='待接单'
  353. break;
  354. case 1:
  355. text='制作中'
  356. break;
  357. case 2:
  358. text='已驳回'
  359. break;
  360. case 3:
  361. text='已完成'
  362. break;
  363. case -1:
  364. text='已撤回'
  365. break;
  366. default:
  367. text='出错'
  368. break;
  369. }
  370. return text
  371. }
  372. },
  373. }
  374. </script>
  375. <style lang="scss" scoped>
  376. .workBench{
  377. ul,li{
  378. margin: 0;
  379. padding: 0;
  380. }
  381. width: 100%;
  382. .topBody{
  383. width: 100%;
  384. height: 146px;
  385. background: #FFFFFF;
  386. margin-bottom: 12px;
  387. padding: 20px;
  388. box-sizing: border-box;
  389. .breadcrumb{
  390. width: 42px;
  391. height: 22px;
  392. font-size: 12px;
  393. font-family: PingFangSC-Regular, PingFang SC;
  394. font-weight: 400;
  395. color: #000000;
  396. line-height: 22px;
  397. }
  398. .bottom{
  399. display: flex;
  400. position: relative;
  401. // padding: 20px;
  402. .touxiang{
  403. width: 72px;
  404. height: 72px;
  405. margin-right: 20px;
  406. border-radius: 50%;
  407. overflow: hidden;
  408. img{
  409. width: 100%;
  410. height: 100%;
  411. border-radius: 50%;
  412. }
  413. }
  414. .tip{
  415. .greet{
  416. height: 28px;
  417. font-size: 20px;
  418. font-family: PingFangSC-Medium, PingFang SC;
  419. font-weight: 500;
  420. color: rgba(0, 0, 0, 0.85);
  421. line-height: 28px;
  422. }
  423. .descPosition{
  424. height: 22px;
  425. font-size: 14px;
  426. font-family: PingFangSC-Regular, PingFang SC;
  427. font-weight: 400;
  428. color: rgba(0, 0, 0, 0.45);
  429. line-height: 22px;
  430. }
  431. }
  432. .mybtn{
  433. position: absolute;
  434. // top: 50%;
  435. // margin-left: -18px;
  436. right: 0;
  437. }
  438. }
  439. }
  440. .section{
  441. .sectionBody{
  442. display: flex;
  443. .sectionHead{
  444. padding: 15px 20px;
  445. // height: 24px;
  446. font-size: 16px;
  447. font-family: PingFangSC-Medium, PingFang SC;
  448. font-weight: 500;
  449. color: rgba(0, 0, 0, 0.85);
  450. line-height: 24px;
  451. border-bottom: 1px solid #E9E9E9;;
  452. position: relative;
  453. .allOrder{
  454. position: absolute;
  455. right: 5px;
  456. }
  457. }
  458. .sectionLeftBox{
  459. width: 70%;
  460. .leftTop{
  461. overflow: hidden;
  462. background: white;
  463. }
  464. .zhanshiBox{
  465. display: flex;
  466. flex-wrap: wrap;
  467. .item{
  468. width: 33.33%;
  469. // background: brown;
  470. padding: 20px ;
  471. border-right: 1px solid #E9E9E9;
  472. border-bottom: 1px solid #E9E9E9;
  473. .title{
  474. padding-bottom: 34px;
  475. color: #000000;
  476. .iconImg{
  477. width: 24px;
  478. margin-right: 8px;
  479. }
  480. }
  481. .itemBody{
  482. text-align: center;
  483. .count{
  484. font-size: 24px;
  485. font-family: PingFangSC-Medium, PingFang SC;
  486. font-weight: 500;
  487. color: #000000;
  488. line-height: 32px;
  489. cursor: pointer;
  490. span{
  491. font-size: 16px;
  492. cursor: pointer;
  493. }
  494. }
  495. .count:hover{
  496. color: #1890FF;
  497. }
  498. }
  499. }
  500. .item:nth-child(3n){
  501. border-right: 0;
  502. }
  503. }
  504. .leftBottom{
  505. margin-top: 12px;
  506. background: white;
  507. .orderProgress{
  508. padding: 0 20px;
  509. height: 585px;
  510. position: relative;
  511. .orderProgress-list-item{
  512. padding: 10px 0;
  513. display: flex;
  514. align-items: center;
  515. border-bottom: 1px solid #E9E9E9;;
  516. justify-content:space-between;
  517. cursor: pointer;
  518. .item-icon{
  519. width: 8px;
  520. height: 8px;
  521. background: #3BA0FF;
  522. margin-right: 15px;
  523. display: inline-block;
  524. border-radius: 50%;
  525. }
  526. .content{
  527. width: 70%;
  528. overflow: hidden;
  529. font-size: 14px;
  530. font-family: PingFangSC-Regular, PingFang SC;
  531. font-weight: 400;
  532. .name{
  533. height: 22px;
  534. color: rgba(0, 0, 0, 0.65);
  535. line-height: 22px;
  536. text-overflow: ellipsis;
  537. white-space: nowrap;
  538. overflow: hidden;
  539. margin-bottom: 0px;
  540. }
  541. .desc{
  542. height: 22px;
  543. color: rgba(0, 0, 0, 0.25);
  544. line-height: 22px;
  545. text-overflow: ellipsis;
  546. white-space: nowrap;
  547. overflow: hidden;
  548. margin-bottom: 0px;
  549. }
  550. }
  551. .progress{
  552. float: right;
  553. }
  554. }
  555. .fenye{
  556. padding: 20px 0;
  557. text-align: right;
  558. position: absolute;
  559. right: 20px;
  560. bottom: 0;
  561. }
  562. }
  563. }
  564. }
  565. .sectionRightBox{
  566. width: 29.5%;
  567. background: white;
  568. margin-left: 12px;
  569. height: 1023px;
  570. .rightTop{
  571. .optionRecordList{
  572. margin: 20px;
  573. padding: 10px 0;
  574. box-sizing: border-box;
  575. height: 928px;
  576. // overflow: auto;
  577. overflow: hidden;
  578. p{
  579. width: 100%;
  580. }
  581. .content-item{
  582. width: 70%;
  583. display: inline-block;
  584. overflow: hidden;
  585. text-overflow: ellipsis;
  586. white-space: nowrap;
  587. }
  588. .time{
  589. width: 30%;
  590. display: inline-block;
  591. overflow: hidden;
  592. text-overflow: ellipsis;
  593. white-space: nowrap;
  594. text-align: right;
  595. }
  596. }
  597. }
  598. .rightBottom{
  599. margin-top: 12px;
  600. background: white;
  601. .burnDown{
  602. padding: 30px 20px;
  603. text-align: center;
  604. .tip{
  605. margin-top: 40px;
  606. display: flex;
  607. justify-content: space-around;
  608. height: 22px;
  609. font-size: 14px;
  610. font-family: PingFangSC-Regular, PingFang SC;
  611. font-weight: 400;
  612. color: rgba(0, 0, 0, 0.65);
  613. line-height: 22px;
  614. .done{
  615. .item-icon{
  616. width: 8px;
  617. height: 8px;
  618. background: #3BA0FF;
  619. margin-right: 15px;
  620. display: inline-block;
  621. border-radius: 50%;
  622. }
  623. }
  624. .all{
  625. .item-icon{
  626. width: 8px;
  627. height: 8px;
  628. background: #F0F2F5;
  629. margin-right: 15px;
  630. display: inline-block;
  631. border-radius: 50%;
  632. }
  633. }
  634. }
  635. }
  636. }
  637. }
  638. }
  639. }
  640. }
  641. </style>
  642. <style lang="less">
  643. .workBench{
  644. .ant-timeline-item-head{
  645. background: rgb(240,242,245);
  646. }
  647. }
  648. </style>