<template> <section class="homeRTGT"> <div class="htaTitle"> <span class="TitleName"><i></i><strong>椤圭洰鎯呭喌琛�</strong></span> <!-- <span class="TitleTab"><em v-for='(item,index) in titleArr' :key='index' @click='titleClick(item,index)' :class='inx==index?"active":""'>{{item.name}}</em></span> <span class="more" @click='more'>鏌ョ湅鏇村>></span> --> </div> <div class="htaBoxProjectSheet"> <div class="tableContent"> <ul class="xmsheetList"> <li v-for="(item,index) in tableData" :key='index' @click='itemclick(item)'><i><img src="~@/assets/images/RTImgs/fileicon.png"></i><em>{{item.item_reportname}}</em><b><img src="~@/assets/images/RTImgs/fileicon.png"></b></li> <!-- <li><i><img src="~@/assets/images/RTImgs/fileicon.png"></i><em>55555</em><b><img src="~@/assets/images/RTImgs/fileicon.png"></b></li> <li><i><img src="~@/assets/images/RTImgs/fileicon.png"></i><em>55555</em><b><img src="~@/assets/images/RTImgs/fileicon.png"></b></li> <li><i><img src="~@/assets/images/RTImgs/fileicon.png"></i><em>55555</em><b><img src="~@/assets/images/RTImgs/fileicon.png"></b></li> <li><i><img src="~@/assets/images/RTImgs/fileicon.png"></i><em>55555</em><b><img src="~@/assets/images/RTImgs/fileicon.png"></b></li> <li><i><img src="~@/assets/images/RTImgs/fileicon.png"></i><em>55555</em><b><img src="~@/assets/images/RTImgs/fileicon.png"></b></li> --> </ul> </div> </div> </section> </template> <script> export default { data(){ return{ titleArr:[ {name:'闆嗗洟缃戠粶棰嗗灏忕粍浼�',type:1}, {name:'淇℃伅鍖栧伐浣滃懆渚嬩細',type:2}, ], inx:0, params:{//鎼滅储鏉′欢 pageIndex:1, pageSize:3, total:0 }, type:1, tableData:[], tableData2:[], tableData3:[], } }, mounted() { this.xmqklist() }, methods: { titleClick(item,index){ this.inx=index this.type=item.type }, xmqklist(){ this.$api.xmqklistApi(this.params,{ onSucess: response => { // console.log(response) this.tableData=response.data.data // console.log(this.tableData) } }) }, itemclick(item){ if(item.item_reportfile){ let path=JSON.parse(item.item_reportfile)[0].path if(path.indexOf('http')>-1){ window.open(path) }else{ window.open('/obpm'+path) } } }, more(){ if(this.type==1){ let appId='__Hab04s0VNDPrjFZ3Xlo' let name='鎸傚浘浣滄垬' let flag=1 this.$store.dispatch("loadMenus", {appId, name,flag}); }else if(this.type==2){ let appId='__l8yB8fdHv3OmXOrHfyF' let name='杩涘害婊炲悗棰勮' let flag=1 this.$store.dispatch("loadMenus", {appId, name,flag}); }else if(this.type==3){ let appId='__u1xGyTCVhsSaWrgdBed' let name='鑱斿悎涓撶彮鏃ユ姤' let flag=1 this.$store.dispatch("loadMenus", {appId, name,flag}); } }, }, } </script> <style lang="scss" scoped> .homeRTGT{ display: flex; flex-direction: column; background: #fff; box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12); border-radius: 8px; height: 168px; .htaTitle{ border-bottom: 1px solid rgba(0, 0, 0, 0.06); font-size: 18px; color: rgba(0, 0, 0, 0.85); padding: 16px; display: flex; align-items: center; .TitleName{ display: flex; align-items: center; margin-right: 40px; i{ width: 2px; height: 18px; background: #0E71FF; margin-right:4px; } strong{color: rgba(0, 0, 0, 0.85);font-size: 16px;} } .TitleTab{ flex:1; em{ margin-right: 15px; font-size: 16px; padding-bottom:16px; cursor: pointer; &.active{ border-bottom: 1px solid #0076f6; color: #0076f6; } } } .more{ flex-wrap: 150px; font-size: 14px; cursor: pointer; color: rgba(0, 0, 0, 0.45); } } .htaBox{ padding: 16px 0 16px 16px; ul{ display: flex; flex-wrap: wrap; align-content: flex-start; li{ background: #fff; width: 140px; height: 100px; border-radius: 4px; display: flex; flex-direction: column; padding: 16px; margin-right:16px; margin-bottom: 16px; align-items: center; text-align: center; span{ margin-bottom: 8px; img{ width: 48px; height:48px; } strong{ color: rgba(0, 0, 0, 0.85); font-size: 14px; font-weight: normal; } } } } } .scrollbarClass{ .el-scrollbar__wrap{ overflow: scroll!important; height: calc(100% + 20px)!important; //澶氬嚭鏉ョ殑20px鏄í鍚戞粴鍔ㄦ潯榛樿鐨勬牱寮� } .el-table--scrollable-x .el-table__body-wrapper{overflow-x: hidden!important;;} } .htaBoxProjectSheet{ .xmsheetList{ display: flex; flex-direction: column; height: 111px; overflow: auto; li{ display: flex; line-height: 24px; padding: 5px 0; cursor: pointer; i{margin-left:24px;margin-right:10px;} em{flex:1;max-width: 350px;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;} b{margin-right:24px; display: none;} } } } } </style>