guoxiaohuan 4 years ago
parent
commit
db0d5ad4fb
2 changed files with 121 additions and 6 deletions
  1. 1 1
      src/views/equipment/table/wxTable.vue
  2. 120 5
      src/views/overview/index.vue

+ 1 - 1
src/views/equipment/table/wxTable.vue

@@ -100,7 +100,7 @@
                         style='cursor:pointer;color: #0091ff;'
                         style='cursor:pointer;color: #0091ff;'
                         @click.stop='clickPic(row.glsmsImage)'
                         @click.stop='clickPic(row.glsmsImage)'
                     >{{row.glsmsImage.length+'张'}}</div>
                     >{{row.glsmsImage.length+'张'}}</div>
-                    <div v-else>{{'---'}}</div>
+                    <div v-else>{{'--'}}</div>
                 </template>
                 </template>
             </el-table-column>
             </el-table-column>
             <el-table-column prop='reportdate' label='填报时间' width='140'>
             <el-table-column prop='reportdate' label='填报时间' width='140'>

+ 120 - 5
src/views/overview/index.vue

@@ -95,18 +95,24 @@
                             <el-table
                             <el-table
                                 :data='constructions'
                                 :data='constructions'
                                 :height='350'
                                 :height='350'
+                                :cell-class-name='addClass'
+                                :span-method='objectSpanMethod'
+                                border
                                 style='font-size:12px'
                                 style='font-size:12px'
                                 :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
                                 :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
                                 v-loading='loading'
                                 v-loading='loading'
                             >
                             >
-                                <el-table-column label='序号' width='50' type='index' align='left'></el-table-column>
-                                <el-table-column label='专业' width='70' prop='professional'>
+                                <el-table-column label='序号' width='45' type='index' align='left'></el-table-column>
+                                <el-table-column label='总包/分包' prop='type' width='80' align='center'>
+                                    <template slot-scope='{row}'>{{row.type||'--'}}</template>
+                                </el-table-column>
+                                <el-table-column label='专业' width='60' prop='professional'>
                                     <template slot-scope='{row}'>{{row.professional||'--'}}</template>
                                     <template slot-scope='{row}'>{{row.professional||'--'}}</template>
                                 </el-table-column>
                                 </el-table-column>
                                 <el-table-column prop='unit ' label='施工单位'>
                                 <el-table-column prop='unit ' label='施工单位'>
                                     <template slot-scope='{row}'>{{row.unit ||'--'}}</template>
                                     <template slot-scope='{row}'>{{row.unit ||'--'}}</template>
                                 </el-table-column>
                                 </el-table-column>
-                                <el-table-column label='联系人' prop width='65' :show-overflow-tooltip='true'>
+                                <el-table-column label='联系人' prop width='60' :show-overflow-tooltip='true'>
                                     <template slot-scope='{row}'>{{row.lxr||'--'}}</template>
                                     <template slot-scope='{row}'>{{row.lxr||'--'}}</template>
                                 </el-table-column>
                                 </el-table-column>
                                 <el-table-column prop='phone' label='联系电话' width='110'>
                                 <el-table-column prop='phone' label='联系电话' width='110'>
@@ -202,10 +208,101 @@ export default {
             build: {}, //左下信息
             build: {}, //左下信息
             constructions: [], //右下数组
             constructions: [], //右下数组
             shuzihuayijiao: '',
             shuzihuayijiao: '',
-            va: ''
+            va: '',
+            spanArr: [], //二维数组,用于存放单元格合并规则
+            position: 0 //用于存储相同项的开始index
         }
         }
     },
     },
     methods: {
     methods: {
+        addClass({ columnIndex }) {
+            if (columnIndex === 4) {
+                return 'contact'
+            }
+        },
+        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+            for (let i = 1; i <= 5; i++) {
+                if (columnIndex === i) {
+                    const _row = this.spanArr[i][rowIndex]
+                    const _col = _row > 0 ? 1 : 0
+                    // console.log('第'+rowIndex+'行','第'+i+'列','rowspan:'+_row,'colspan:'+_col)
+                    return {
+                        rowspan: _row,
+                        colspan: _col
+                    }
+                }
+            }
+        },
+        /**
+         * 返回的数据处理
+         */
+        handelTableData(data) {
+            let dict = {
+                总包: 0,
+                分包: 1
+            }
+            data = data.sort((a, b) => {
+                // 按总分包排序
+                if (a.type !== b.type) {
+                    return dict[a.type] - dict[b.type]
+                }
+                // 按专业排序
+                if (a.professional !== b.professional) {
+                    return b.professional.localeCompare(a.professional)
+                }
+                // 按施工单位排序
+                if (a.unit !== b.unit) {
+                    return b.unit.localeCompare(a.unit)
+                }
+                // 按联系人排序
+                if (a.lxr !== b.lxr) {
+                    return b.lxr.localeCompare(a.lxr)
+                }
+            })
+            data.map(item => {
+                console.log(item)
+                // return
+                if (item.lxr) {
+                    let lxr = item.lxr.split(',').join('\n\r')
+                    item.lxr = lxr
+                }
+
+                return item
+            })
+            return data
+        },
+        rowspan(idx, prop) {
+            // 第一列 总包合并一格,分包按照 第二列专业的单元格规则进行合并
+            if (idx === 1) {
+                // 初始化数组
+                this.spanArr[1] = new Array(this.constructions.length).fill(0)
+                let totalTypeLen = this.constructions.filter(a => a.type === '总包').length
+                this.spanArr[1][0] = totalTypeLen
+                this.spanArr[1] = this.spanArr[1].map((item, index) => {
+                    if (index > totalTypeLen - 1) {
+                        item = this.spanArr[2][index]
+                    }
+                    return item
+                })
+                return true
+            }
+            // 其他列单元格合并规则
+            this.spanArr[idx] = []
+            this.position = 0
+            this.constructions.forEach((item, index) => {
+                if (index === 0) {
+                    this.spanArr[idx].push(1)
+                    this.position = 0
+                } else {
+                    if (this.constructions[index][prop] === this.constructions[index - 1][prop]) {
+                        this.spanArr[idx][this.position] += 1 //有相同项
+                        this.spanArr[idx].push(0) // 名称相同后往数组里面加一项0
+                    } else {
+                        this.spanArr[idx].push(1) //同列的前后两行单元格不相同
+                        this.position = index
+                    }
+                }
+            })
+        },
         scan(val) {
         scan(val) {
             this.va = val
             this.va = val
         },
         },
@@ -247,7 +344,19 @@ export default {
                     this.pic1 = res.pic1 ? res.pic1 : []
                     this.pic1 = res.pic1 ? res.pic1 : []
                     this.pic2 = res.pic2 ? res.pic2 : []
                     this.pic2 = res.pic2 ? res.pic2 : []
                     this.build = res.build ? res.build : {}
                     this.build = res.build ? res.build : {}
-                    this.constructions = res.constructions ? res.constructions : []
+                    let constructions = []
+                    constructions = res.constructions ? res.constructions : []
+                    if (constructions.length > 0) {
+                        // this.parseTableData(constructions)
+                        let handleData = this.handelTableData(constructions)
+                        this.constructions = handleData
+                        this.rowspan(2, 'professional')
+                        this.rowspan(3, 'unit')
+                        this.rowspan(4, 'lxr')
+                        this.rowspan(5, 'lxdh')
+                        this.rowspan(1, 'type')
+                    }
+                    console.log(this.constructions)
                     this.shuzihuayijiao = res.shuzihuayijiao ? res.shuzihuayijiao : ''
                     this.shuzihuayijiao = res.shuzihuayijiao ? res.shuzihuayijiao : ''
                     if (res.plazaName) {
                     if (res.plazaName) {
                         this.$store.commit('SETPLAZENAME', res.plazaName)
                         this.$store.commit('SETPLAZENAME', res.plazaName)
@@ -305,6 +414,12 @@ export default {
 }
 }
 </script>
 </script>
 <style lang="less" scoped>
 <style lang="less" scoped>
+.contact {
+    div {
+        word-break: break-all !important;
+        white-space: pre !important;
+    }
+}
 @import '../../assets/css/rotation.less';
 @import '../../assets/css/rotation.less';
 .overview {
 .overview {
     .view-box .view-left {
     .view-box .view-left {