| | |
| | | border |
| | | style="width: 100%" :cell-style="updataCellStyle" :span-method="mergeColumnTableCell"> |
| | | <el-table-column |
| | | prop="nianfen" |
| | | prop="jyear" |
| | | label="年份"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="A卡"> |
| | | <el-table-column |
| | | prop="chikazongrenshu" |
| | | prop="acardNums" |
| | | label="持卡总人数 (人)"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="butiezongfafang" |
| | | prop="asubsidy" |
| | | label="补贴总发放 (万元)"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="购房"> |
| | | <el-table-column |
| | | prop="chikarenshu" |
| | | prop="apurchaseNums" |
| | | label="持卡人数 (人)"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="gourfangbutie" |
| | | prop="apurSubsidy" |
| | | label="购房补贴 (万元)"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="租房"> |
| | | <el-table-column |
| | | prop="chikfarenshu" |
| | | prop="arentNums" |
| | | label="持卡人数 (人)"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="zufangbutie" |
| | | prop="arentSubsidy" |
| | | label="租房补贴 (万元)"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | |
| | | <el-table-column |
| | | label="B卡"> |
| | | <el-table-column |
| | | prop="chikazongrenshu1" |
| | | prop="bcardNums" |
| | | label="持卡总人数 (人)"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="butiezongfafang1" |
| | | prop="bsubsidy" |
| | | label="补贴总发放 (万元)"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="购房"> |
| | | <el-table-column |
| | | prop="chikarenshu1" |
| | | prop="bpurchaseNums" |
| | | label="持卡人数 (人)"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="gourfangbutie1" |
| | | prop="bpurSubsidy" |
| | | label="购房补贴 (万元)"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="租房"> |
| | | <el-table-column |
| | | prop="chikfarenshu1" |
| | | prop="brentNums" |
| | | label="持卡人数 (人)"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="zufangbutie1" |
| | | prop="brentSubsidy" |
| | | label="租房补贴 (万元)"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div class="PT--Echarts"></div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import {getPersonCardTable} from '@/api/personnelTalents' |
| | | export default { |
| | | name: "PersonnelTalents_GreenCard", |
| | | data() { |
| | | return { |
| | | tableData: [ |
| | | { |
| | | nianfen:'2021年 1——3月', |
| | | chikazongrenshu:'——', |
| | | butiezongfafang:'——', |
| | | chikarenshu:'——', |
| | | gourfangbutie:'——', |
| | | chikfarenshu:'——', |
| | | zufangbutie:'——', |
| | | chikazongrenshu1:'9938', |
| | | butiezongfafang1:'2914.8', |
| | | chikarenshu1:'——', |
| | | gourfangbutie1:'——', |
| | | chikfarenshu1:'6321', |
| | | zufangbutie1:'2914.8' |
| | | }, |
| | | { |
| | | nianfen:'2021年 4——6月', |
| | | chikazongrenshu:'——', |
| | | butiezongfafang:'——', |
| | | chikarenshu:'——', |
| | | gourfangbutie:'——', |
| | | chikfarenshu:'——', |
| | | zufangbutie:'——', |
| | | chikazongrenshu1:'9938', |
| | | butiezongfafang1:'9456.7', |
| | | chikarenshu1:'754', |
| | | gourfangbutie1:'6654.5', |
| | | chikfarenshu1:'6072', |
| | | zufangbutie1:'2802.2' |
| | | }, |
| | | { |
| | | nianfen:'2021年 7——9月', |
| | | chikazongrenshu:'——', |
| | | butiezongfafang:'——', |
| | | chikarenshu:'——', |
| | | gourfangbutie:'——', |
| | | chikfarenshu:'——', |
| | | zufangbutie:'——', |
| | | chikazongrenshu1:'9938', |
| | | butiezongfafang1:'9456.7', |
| | | chikarenshu1:'754', |
| | | gourfangbutie1:'6654.5', |
| | | chikfarenshu1:'6072', |
| | | zufangbutie1:'2802.2' |
| | | }, |
| | | { |
| | | nianfen:'2021年 10——12月', |
| | | chikazongrenshu:'915', |
| | | butiezongfafang:'72.56', |
| | | chikarenshu:'5', |
| | | gourfangbutie:'68', |
| | | chikfarenshu:'3', |
| | | zufangbutie:'4.56', |
| | | chikazongrenshu1:'10600', |
| | | butiezongfafang1:'9456.7', |
| | | chikarenshu1:'754', |
| | | gourfangbutie1:'6654.5', |
| | | chikfarenshu1:'6072', |
| | | zufangbutie1:'2802.2' |
| | | } |
| | | ] |
| | | tableData: [], |
| | | spanArr: [], //spanArr用于存放每一行记录的合并数 |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.getPersonCardTable() |
| | | }, |
| | | methods:{ |
| | | getPersonCardTable() { |
| | | getPersonCardTable().then(res => { |
| | | if(res.code == 1000) { |
| | | this.tableData = res.list |
| | | this.rowspan() |
| | | } |
| | | }) |
| | | }, |
| | | // 修改单个表格样式 |
| | | updataCellStyle({ rowIndex, columnIndex}){ |
| | | if(rowIndex===0&&columnIndex===0){ |
| | | if(columnIndex===0){ |
| | | return {background:'#51D2FF'} |
| | | }else if(rowIndex===1&&columnIndex===0){ |
| | | return{background:'#51D2FF'} |
| | | }else if(rowIndex===2&&columnIndex===0){ |
| | | return{background:'#51D2FF'} |
| | | }else if(rowIndex===3&&columnIndex===0){ |
| | | return{background:'#51D2FF'} |
| | | } |
| | | }, |
| | | rowspan() { |
| | | let position = 0 //用于存储相同项的开始index |
| | | this.tableData.forEach((item,index) => { |
| | | console.log('item--',item) |
| | | if(index === 0) { |
| | | this.spanArr.push(1) |
| | | }else { |
| | | if(item.acardNums == this.tableData[index - 1].acardNums) { |
| | | this.spanArr[position] += 1 |
| | | this.spanArr.push(0) |
| | | }else { |
| | | position = index |
| | | this.spanArr.push(1) |
| | | } |
| | | } |
| | | }) |
| | | }, |
| | | // 合并单元格 |
| | | mergeColumnTableCell({rowIndex,columnIndex}){ |
| | | if(columnIndex === 7){ |
| | | if(rowIndex === 0){ |
| | | if(columnIndex == 1 || columnIndex == 7) { |
| | | const _row = this.spanArr[rowIndex] |
| | | const _col = _row>0 ? 1 : 0 |
| | | return { |
| | | rowspan:3, |
| | | colspan:1 |
| | | rowspan: _row, |
| | | colspan: _col |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | .PersonnelTalents_greenCard--warp { |
| | | width: 100%; |
| | | height: 100%; |
| | | height: 90%; |
| | | h1 { |
| | | font-size: $fontSize-30; |
| | | font-weight: 400; |