epx-frame 3.5.0-shpgy.1

package/src/frame/components/report/ReportTable.vue

@@ -0,0 +1,1051 @@
+<template>
+  <div class="container" v-loading="loading" :style="{height:itemHeight,width:itemWidth}" @click="containerClick($event)" v-if="hasData">
+    <p class="header" v-if="showTitle && title">
+      <span class="title">{{title}}</span>
+    </p>
+    <div class="table-container">
+    <div class="table" v-if="haveTable" @contextmenu="rightClick($event)" @click="handlerClick($event)">
+      <div class="report-header-body" ref="headerWrapper">
+      <table class="report-biao-tou report_table" :style="autoWidth?'minWidth:auto':''">
+        <!-- <colgroup><col style="width: 300px;" /><col/></colgroup> -->
+        <thead>
+          <template v-if="colLeval">
+            <tr v-for="(level,index) in colLeval" :key="index">
+            <th  ref="headerWrapperTh" v-if="level===1" :colspan="computeLeftUpCol" :rowspan="computeLeftUpRow"></th>
+            <th v-for="colnode in getNodesByLeavel(level,colTree,colAllNodes)" :colspan="getColspan(colnode,colAllNodes)" :rowspan="getRowspan(level,colnode,colAllNodes)" :key="colnode.id" :itemid="colnode.id">{{colnode.title}}</th>
+          </tr>
+          </template>
+          <template v-else>
+            <tr>
+              <th ref="headerWrapperThLevel0" :colspan="computeLeftUpCol" :rowspan="computeLeftUpRow"></th>
+              <th>记录数</th>
+            </tr>
+          </template>
+        </thead>
+      </table>
+      </div>
+      <div class="report-body" ref="bodyWrapper">
+        <table class="report_table" :style="autoWidth?'minWidth:auto':''">
+          <!-- <colgroup><col style="width: 300px;" /><col /></colgroup> -->
+          <tbody>
+            <tr v-for="(item,index) in leftTreeArr" :key="index">
+              <!-- 侧边栏树 -->
+              <td class="left-td" v-for="colitem in item" :key="colitem.id" :colspan="gettouColspan(colitem,rowAllNodes)" :rowspan="gettouRowspan(colitem,rowAllNodes)" :itemid="colitem.id">{{colitem.title}}</td>
+              <!-- data -->
+              <template v-for="(table,tindex) in tableData[index]">
+                <td :key="tindex"><div :rowId="getRowId(index)" :colid="getColId(tindex)">{{table}}</div></td>
+              </template>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <!-- 表头和body不分开 -->
+      <!-- <table class="report_table">
+        <thead>
+          <template v-if="colLeval">
+            <tr v-for="(level,index) in colLeval" :key="index">
+              <th v-if="level===1" :colspan="computeLeftUpCol" :rowspan="computeLeftUpRow"></th>
+              <th v-for="colnode in getNodesByLeavel(level,colTree,colAllNodes)" :colspan="getColspan(colnode,colAllNodes)" :rowspan="getRowspan(level,colnode,colAllNodes)" :key="colnode.id" :itemid="colnode.id">{{colnode.title}}</th>
+            </tr>
+          </template>
+          <template v-else>
+            <tr>
+              <th :colspan="computeLeftUpCol" :rowspan="computeLeftUpRow"></th>
+              <th>记录数</th>
+            </tr>
+          </template>
+        </thead>
+        <tbody class="table-body">
+          <tr v-for="(item,index) in leftTreeArr" :key="index">
+            <td v-for="colitem in item" :key="colitem.id" :colspan="gettouColspan(colitem,rowAllNodes)" :rowspan="gettouRowspan(colitem,rowAllNodes)" :itemid="colitem.id">{{colitem.title}}</td>
+            <template v-for="(table,tindex) in tableData[index]">
+              <td :key="tindex"><div :rowId="getRowId(index)" :colid="getColId(tindex)">{{table}}</div></td>
+            </template>
+          </tr>
+        </tbody>
+      </table> -->
+    </div>
+    <!-- <div class="table tabletwo" ref="fixedWrapper" v-if="haveTable" :style="{width:fixedWidth+'px'}" @contextmenu="rightClick($event)" @click="handlerClick($event)"> -->
+    <div class="table tabletwo" ref="fixedWrapper" v-if="haveTable" :style="{width:fixedWidth+'px'}" @contextmenu="rightClick($event)">
+      <div class="report-header-body-two" ref="fixedHeaderWrapper" >
+      <table class="report-biao-tou report_table" :style="autoWidth?'minWidth:auto':''">
+        <thead>
+          <template v-if="colLeval">
+            <tr v-for="(level,index) in colLeval" :key="index">
+            <th v-if="level===1" :colspan="computeLeftUpCol" :rowspan="computeLeftUpRow"></th>
+            <th class="is-hidden" v-for="colnode in getNodesByLeavel(level,colTree,colAllNodes)" :colspan="getColspan(colnode,colAllNodes)" :rowspan="getRowspan(level,colnode,colAllNodes)" :key="colnode.id" :itemid="colnode.id">{{colnode.title}}</th>
+          </tr>
+          </template>
+          <template v-else>
+            <tr>
+              <th :colspan="computeLeftUpCol" :rowspan="computeLeftUpRow"></th>
+              <th>记录数</th>
+            </tr>
+          </template>
+        </thead>
+      </table>
+      </div>
+      <div class="report-body" ref="fixedBodyWrapper" >
+        <table class="report_table" :style="autoWidth?'minWidth:auto':''">
+          <tbody>
+            <tr v-for="(item,index) in leftTreeArr" :key="index">
+              <td class="left-td" v-for="colitem in item" :key="colitem.id" :colspan="gettouColspan(colitem,rowAllNodes)" :rowspan="gettouRowspan(colitem,rowAllNodes)" :itemid="colitem.id">{{colitem.title}}</td>
+              <template v-for="(table,tindex) in tableData[index]">
+                <td class="is-hidden" :key="tindex"><div :rowId="getRowId(index)" :colid="getColId(tindex)">{{table}}</div></td>
+              </template>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    </div>
+    <div class="sub-menu" ref="subMenu">
+      <div v-for="menu in submenu" :key="menu.text">
+        <template v-if="menu.children&&menu.children.length>0">
+          <div class="menu-container" @mouseenter="mouseEnter($event)" @mouseleave="mouseLeave">
+            <span>{{menu.text}}</span>
+            <i class="el-icon-caret-right" v-if="menu.children&&menu.children.length>0"></i>
+            <div class="sub-menu-inner" ref="menuInner" v-if="menu.children&&menu.children.length>0">
+              <template v-for="itemC in menu.children">
+                <div class="menu-children" :key="itemC.text" @click="handler(itemC)">{{itemC.text}}</div>
+              </template>
+            </div>
+          </div>
+        </template>
+        <template v-else-if="designMode&&!menu.children">
+          <div class="menu-container" @click="handler(menu)">{{menu.text}}</div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import component from '@/utils/mixins/component'
+
+export default {
+  name: 'epx-design-report-table',
+  mixins: [component],
+  props: {
+    config: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    initConfig: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    designMode: {
+      type: Boolean,
+      default: true
+    },
+    scopeParams: Array
+  },
+  // props: ['config', 'initConfig'],
+  computed: {
+    detailPage () {
+      const { detailPage = 'v_report_list' } = this.data
+      return detailPage
+    },
+    detailPageMeta () {
+      const { detailPageMeta = '' } = this.data
+      return detailPageMeta
+    },
+    iconCls () {
+      const { iconCls = 'el-icon-data-line' } = this.data
+      return iconCls
+    },
+    showTitle () {
+      const { showTitle = true } = this.data
+      return showTitle
+    },
+    title () {
+      const { title = '' } = this.data
+      return title
+    },
+    itemHeight () {
+      const { height = '90%' } = this.data
+      return height
+    },
+    itemWidth () {
+      const { width = '' } = this.data
+      return width
+    },
+    autoWidth () {
+      const { autoWidth = false } = this.data
+      return autoWidth
+    },
+    reportScope () {
+      const { reportScope = {} } = this.data
+      return this.$formatParams(reportScope)
+    },
+    computeLeftUpCol () {
+      if (this.rowLeval > 1) {
+        return this.rowLeval
+      }
+      return null
+    },
+    computeLeftUpRow () {
+      if (this.colLeval > 1) {
+        return this.colLeval
+      }
+      return null
+    },
+    getNodesByLeavel () {
+      return (level, tree, colAllNodes) => {
+        let arr = []
+        const list = tree.children
+        if (level === 1) {
+          arr = list
+        } else {
+          for (let i = 0; i < list.length; i++) {
+            const node = list[i]
+            this.getNodes(node, arr, level, colAllNodes)
+          }
+        }
+        return arr
+      }
+    },
+    // getNodes () {
+    //   return (node, list, level, colAllNodes) => {
+    //     // const arr = []
+    //     const l = this.componentNodeLeavel(node, colAllNodes)
+    //     if (l === level) {
+    //       list.push(node)
+    //     } else if (l < level) {
+    //       const nchildren = node.children
+    //       for (let i = 0; i < nchildren.length; i++) {
+    //         this.getNodes(nchildren[i], list, level)
+    //       }
+    //     }
+    //     // return arr
+    //   }
+    // }
+    judgeTou () {
+      return (node) => {
+        const tdArr = []
+        const rowNode = node
+        // const rowNode = this.rowLeafs[leafIndex - 1]
+        const index = this.getIndexOfSibling(rowNode)
+        const parents = []
+        this.getAllParent(rowNode, parents)
+        if (parents.length > 0 && index === 0) {
+          for (let a = 0; a < parents.length; a++) {
+            const p = parents[a]
+            let child = null
+            if (a === (parents.length - 1)) {
+              child = rowNode
+            } else {
+              child = parents[a + 1]
+            }
+            const cIndex = this.getIndexOfSibling(child)
+            if (cIndex === 0) {
+              // if (this.itemList.indexOf(p.id) > -1) continue
+              // this.itemList.push(p.id)
+              tdArr.push(p)
+            }
+          }
+        }
+        tdArr.push(rowNode)
+        return tdArr
+      }
+    }
+  },
+  data () {
+    return {
+      chartParams: {},
+      reportId: '',
+      reportHtml: '',
+      data: {},
+      itemid: '',
+      upid: '',
+      position: '',
+      submenu: [
+        {
+          text: '编辑统计项',
+          handler: 'editStatistics'
+        },
+        {
+          text: '添加同级统计项',
+          handler: 'addSameLeval'
+        },
+        {
+          text: '添加子统计项',
+          handler: 'addChildren'
+        },
+        {
+          text: '批量添加子统计项',
+          handler: 'volumeAddChildren'
+        },
+        {
+          text: '删除统计项',
+          handler: 'deteleStatistics'
+        },
+        {
+          text: '数据排序',
+          // handler: 'globalSetting',
+          children: [
+            {
+              text: '升序',
+              handler: 'dataSort',
+              type: 'ASC'
+            },
+            {
+              text: '降序',
+              handler: 'dataSort',
+              type: 'DESC'
+            },
+            {
+              text: '取消排序',
+              handler: 'dataSort',
+              type: ''
+            }
+          ]
+        },
+        {
+          text: '统计项排列顺序',
+          // handler: 'globalSetting',
+          children: [
+            {
+              text: '向前',
+              handler: 'statistics',
+              type: 'previous'
+            },
+            {
+              text: '向后',
+              handler: 'statistics',
+              type: 'next'
+            },
+            {
+              text: '最前',
+              handler: 'statistics',
+              type: 'first'
+            },
+            {
+              text: '最后',
+              handler: 'statistics',
+              type: 'last'
+            }
+          ]
+        }
+      ],
+      rowTree: [],
+      rowLeafs: [],
+      colLeafs: [],
+      colNodes: {},
+      colTree: [],
+      tableData: [],
+      haveTable: false,
+      colTreeDeep: [],
+      rowTreeDeep: [],
+      colLeval: 0, // colTree的深度，表头深度
+      rowLeval: 0, // 左边树深度
+      colAllNodes: [],
+      rowAllNodes: [],
+      itemList: [],
+      leftTreeArr: [],
+      hasData: true,
+      fixedWidth: 137,
+      bodyWrapper: null,
+      loading: true
+    }
+  },
+  watch: {
+    scopeParams () {
+      this.getReportHtml()
+    }
+  },
+  methods: {
+    getRowId (rowindex) {
+      if (this.rowLeafs.length > 0) {
+        const row = this.rowLeafs[rowindex]
+        return row.id
+      }
+    },
+    getColId (colindex) {
+      if (this.colLeafs.length > 0) {
+        const col = this.colLeafs[colindex]
+        return col.id
+      }
+    },
+    judgeTouPre (node) {
+      const tdArr = []
+      const rowNode = node
+      const index = this.getIndexOfSibling(rowNode)
+      // const rowItemLevel = this.componentNodeLeavel(rowNode, this.rowAllNodes)
+      const parents = []
+      this.getAllParent(rowNode, parents)
+      if (parents.length > 0 && index === 0) {
+        for (let a = 0; a < parents.length; a++) {
+          const p = parents[a]
+          let child = null
+          if (a === (parents.length - 1)) {
+            child = rowNode
+          } else {
+            // if (a + 1 < parents.length) child = parents[a + 1]
+            child = parents[a + 1]
+          }
+          // if (child) {
+          const cIndex = this.getIndexOfSibling(child)
+          if (cIndex === 0) {
+            if (this.itemList.indexOf(p.id) > -1) continue
+            this.itemList.push(p.id)
+            tdArr.push(p)
+          }
+          // }
+        }
+      }
+      tdArr.push(rowNode)
+      return tdArr
+    },
+    getAllParent (node, parents) {
+      if (!node.parent) return
+      // if (node.parent) {
+      const pnode = this.getNodeById(node.parent, this.rowAllNodes)
+      parents.unshift(pnode)
+      this.getAllParent(pnode, parents)
+      // }
+    },
+    getIndexOfSibling (node) {
+      if (node && node.parent) {
+        // const parent = node.parent
+        const nodeId = node.id
+        const pnode = this.getNodeById(node.parent, this.rowAllNodes)
+        const arr = pnode.children
+        const index = arr.findIndex(item => {
+          return item.id === nodeId
+        })
+        return index
+      } else {
+        return null
+      }
+    },
+    // getIndexOfSibling (node) {
+    //   if (node && node.parent) {
+    //     const parent = node.parent
+    //     const nodeId = node.id
+    //     const arr = []
+    //     for (let i = 0; i < this.rowAllNodes.length; i++) {
+    //       if (this.rowAllNodes[i].parent === parent) {
+    //         arr.push(this.rowAllNodes[i])
+    //       }
+    //     }
+    //     // for (let i = 0; i < this.rowLeafs.length; i++) {
+    //     //   if (this.rowLeafs[i].parent === parent) {
+    //     //     arr.push(this.rowLeafs[i])
+    //     //   }
+    //     // }
+    //     const index = arr.findIndex(item => {
+    //       return item.id === nodeId
+    //     })
+    //     return index
+    //   } else {
+    //     return null
+    //   }
+    // },
+    gettouColspan (node, rowAllNodes) {
+      const le = this.componentNodeLeavel(node, rowAllNodes)
+      if (node.children.length === 0 && le === 1) {
+        return this.rowLeval
+      } else if (le > 1 && node.children.length === 0) {
+        return this.rowLeval - le + 1
+      }
+    },
+    gettouRowspan (node, rowAllNodes) {
+      if (node.children.length > 0) {
+        const arr = []
+        this.getNodeLeafs(arr, node)
+        return arr.length
+      }
+    },
+    getColspan (node, colAllNodes) {
+      if (node.children.length > 0) {
+        // return node.children.length
+        const arr = []
+        this.getNodeLeafs(arr, node)
+        return arr.length
+      }
+    },
+    getNodeLeafs (arr, node) {
+      for (let i = 0; i < node.children.length; i++) {
+        const cnode = node.children
+        // arr.push(cnode[i])
+        if (cnode[i].children.length > 0) {
+          this.getNodeLeafs(arr, cnode[i])
+        } else {
+          arr.push(cnode[i])
+        }
+      }
+    },
+    getRowspan (level, node, colAllNodes) {
+      if (node.children.length === 0 && level === 1) {
+        return this.colLeval
+      } else if (level > 1 && node.children.length === 0) {
+        return this.colLeval - level + 1
+      }
+      // else if ((this.colLeval - level + 1) > 1) {
+      //   return this.colLeval - level + 1
+      // }
+    },
+    getNodes (node, list, level, colAllNodes) {
+      const le = this.componentNodeLeavel(node, colAllNodes)
+      if (le === level) {
+        list.push(node)
+      } else if (le < level) {
+        const nchildren = node.children
+        if (nchildren.length === 0) return []
+        for (let i = 0; i < nchildren.length; i++) {
+          this.getNodes(nchildren[i], list, level, colAllNodes)
+        }
+      }
+    },
+    componentNodeLeavel (node, colAllNodes, level = 1) {
+      if (node.parent) {
+        level += 1
+        return this.componentNodeLeavel(this.getNodeById(node.parent, colAllNodes), colAllNodes, level)
+      } else {
+        return level
+      }
+    },
+    getNodeById (nodeId, colAllNodes) {
+      const node = colAllNodes.find(item => {
+        return item.id === nodeId
+      })
+      return node
+    },
+    editStatistics (menu) {
+      this.$emit('update', { key: 'editStatistics', value: { id: this.itemid, up: this.upid, position: this.position } })
+    },
+    addSameLeval (menu) {
+      this.$emit('update', { key: 'addSameLeval', value: { id: this.itemid, up: this.upid, position: this.position } })
+    },
+    addChildren (menu) {
+      this.$emit('update', { key: 'addChildren', value: { id: this.itemid, up: this.upid, position: this.position } })
+    },
+    volumeAddChildren (menu) {
+      this.$emit('update', { key: 'volumeAddChildren', value: { id: this.itemid, up: this.upid, position: this.position } })
+    },
+    deteleStatistics (menu) {
+      this.$emit('update', { key: 'deteleStatistics', value: { id: this.itemid, up: this.upid, position: this.position } })
+    },
+    dataSort (button) {
+      const params = {
+        action: 'itemDataSort',
+        entityId: 'FM_REPORT_ITEM',
+        id: this.itemid,
+        type: button.type
+      }
+      this.$http.$request(params)
+        .then(() => {
+          if (this.designMode) {
+            this.$emit('refreshData')
+          } else {
+            this.getReportHtml()
+          }
+        })
+    },
+    statistics (button) {
+      const params = {
+        action: 'itemSort',
+        entityId: 'FM_REPORT_ITEM',
+        ids: this.itemid,
+        type: button.type
+      }
+      this.$http.$request(params)
+        .then(() => {
+          if (this.designMode) {
+            this.$emit('refreshData')
+          } else {
+            this.getReportHtml()
+          }
+        })
+    },
+    mouseEnter (e) {
+      e.target.children[2].style.display = 'block'
+    },
+    mouseLeave (e) {
+      e.target.children[2].style.display = 'none'
+    },
+    rightClick (event) {
+      const subMenu = this.$refs.subMenu
+      const menuInner = this.$refs.menuInner
+      if (event.button === 2 && event.target.nodeName === 'TD' && event.target.attributes.itemid) {
+        const arr = event.target.attributes.itemid.value.split('_')
+        this.position = '1'
+        if (arr.length === 1) {
+          this.itemid = arr[0]
+          this.upid = ''
+        } else if (arr.length > 1) {
+          this.itemid = arr[arr.length - 1]
+          this.upid = arr[arr.length - 2]
+        }
+        event.preventDefault()
+        // const _x = event.layerX
+        // const _y = event.layerY
+        const _x = event.clientX - 240
+        const _y = event.clientY - 60
+        subMenu.style.display = 'block'
+        subMenu.style.left = _x + 'px'
+        subMenu.style.top = _y + 'px'
+        const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+        if (height - event.clientY < 300) {
+          subMenu.style.top = _y - 200 + 'px'
+          menuInner[0].style.top = -66 + 'px'
+          menuInner[1].style.top = -100 + 'px'
+        }
+        // document.querySelector('.sub-menu-inner').style.left = '154px'
+      }
+      if (event.button === 2 && event.target.nodeName === 'TH' && event.target.attributes.itemid) {
+        this.position = '2'
+        const arr = event.target.attributes.itemid.value.split('_')
+        if (arr.length === 1) {
+          this.itemid = arr[0]
+          this.upid = ''
+        } else if (arr.length > 1) {
+          this.itemid = arr[arr.length - 1]
+          this.upid = arr[arr.length - 2]
+        }
+        event.preventDefault()
+        // const _x = event.layerX
+        // const _y = event.layerY
+        const _x = event.clientX - 240
+        const _y = event.clientY - 60
+        subMenu.style.display = 'block'
+        subMenu.style.left = _x + 'px'
+        subMenu.style.top = _y + 'px'
+        menuInner[0].style.left = 154 + 'px'
+        menuInner[1].style.left = 154 + 'px'
+        const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+        if (width - event.clientX < 130) {
+          subMenu.style.left = _x - 154 + 'px'
+        }
+        if (width - event.clientX < 250) {
+          menuInner[0].style.left = -100 + 'px'
+          menuInner[1].style.left = -100 + 'px'
+        }
+      }
+    },
+    handler (buttonConfigs) {
+      const { handler } = buttonConfigs
+      this[handler](buttonConfigs)
+    },
+    onLoad () {
+      this.$http.find({
+        ...this.chartParams
+      })
+        .then(data => {
+          this.reportId = data.data.ID
+          this.getReportHtml()
+        })
+    },
+    getReportHtml () {
+      this.loading = true
+      const params = {
+        action: 'getReportData',
+        reportType: 'table',
+        entityId: this.data.staObject,
+        // entityId: 'FM_REPORT_BASE',
+        reportId: this.reportId,
+        ...this.reportScope
+      }
+      if (this.scopeParams) {
+        params.scopeParams = JSON.stringify(this.scopeParams)
+      }
+      this.$http.save(params)
+        .then(data => {
+          this.tableData = data.data
+          if (this.tableData.length === 0) {
+            this.hasData = false
+          }
+          this.rowTree = data.rowTree.root
+          this.rowLeafs = data.rowTree.leafs
+          this.colLeafs = data.colTree.leafs
+          this.colTree = data.colTree.root
+          this.colNodes = data.colTree.nodes
+          this.colAllNodes = data.colTree.allNodes
+          this.rowAllNodes = data.rowTree.allNodes
+          this.getColTreeDeep(this.colTree, 0)
+          this.getRowTreeDeep(this.rowTree, 0)
+          this.colLeval = Math.max.apply(null, this.colTreeDeep)
+          this.rowLeval = Math.max.apply(null, this.rowTreeDeep)
+          for (let i = 0; i < this.rowLeafs.length; i++) {
+            const arr = this.judgeTouPre(this.rowLeafs[i])
+            this.leftTreeArr.push(arr)
+          }
+          if (this.colLeafs.length > 0 && this.leftTreeArr.length === 0) {
+            this.leftTreeArr.push([{ title: '记录数', children: [] }])
+          }
+          if (this.colLeafs.length === 0 && this.leftTreeArr.length === 0) {
+            this.leftTreeArr.push([{ title: '记录数', children: [] }])
+          }
+          this.haveTable = true
+          //
+          this.$nextTick(() => {
+            this.bodyWrapper = this.$refs.bodyWrapper
+            let thHeight = 0
+            if (this.colLeval > 0) {
+              thHeight = this.$refs.headerWrapperTh[0].clientHeight
+              this.$refs.fixedWrapper.style.width = this.$refs.headerWrapperTh[0].clientWidth + 'px'
+              this.fixedWidth = this.$refs.headerWrapperTh[0].clientWidth
+            } else {
+              // thHeight = 34
+              thHeight = this.$refs.headerWrapperThLevel0.clientHeight
+              this.$refs.fixedWrapper.style.width = this.$refs.headerWrapperThLevel0.clientWidth + 'px'
+              this.fixedWidth = this.$refs.headerWrapperThLevel0.clientWidth
+            }
+            this.$refs.fixedBodyWrapper.style.top = thHeight + 1 + 'px'
+            this.$refs.fixedHeaderWrapper.style.width = this.$refs.bodyWrapper.clientWidth + 'px'
+            this.$refs.fixedBodyWrapper.style.width = this.$refs.bodyWrapper.clientWidth + 'px'
+            // this.$refs.fixedWrapper.style.width = this.$refs.headerWrapperTh[0].clientWidth + 'px'
+            this.$refs.fixedWrapper.style.height = 'calc(65vh + ' + thHeight + 'px)'
+            // const thHeight2 = this.$refs.headerWrapperTh[0].clientHeight - 5
+            // if (this.$isMobile) {
+            //   this.$refs.fixedWrapper.style.height = 'calc(65vh + ' + thHeight + 'px)'
+            // } else {
+            //   this.$refs.fixedWrapper.style.height = 'calc(65vh + ' + thHeight2 + 'px)'
+            // }
+            // this.fixedWidth = this.$refs.headerWrapperTh[0].clientWidth
+            this.$refs.bodyWrapper.addEventListener('scroll', this.syncPostion, true)
+          })
+          this.loading = false
+        })
+    },
+    getColTreeDeep (data, i) {
+      var treeRoot = data.children
+      if (treeRoot.length === 0) {
+        this.colTreeDeep.push(i)
+        return
+      }
+      i++
+      for (let j = 0; j < treeRoot.length; j++) {
+        this.getColTreeDeep(treeRoot[j], i)
+      }
+    },
+    getRowTreeDeep (data, i) {
+      var treeRoot = data.children
+      if (treeRoot.length === 0) {
+        this.rowTreeDeep.push(i)
+        return
+      }
+      i++
+      for (let j = 0; j < treeRoot.length; j++) {
+        this.getRowTreeDeep(treeRoot[j], i)
+      }
+    },
+    containerClick (e) {
+      if (e.button !== 2) {
+        this.$refs.subMenu.style.display = 'none'
+      }
+    },
+    handlerClick (e) {
+      // this.$refs.subMenu.style.display = 'none'
+      // const row = e.target.attributes.rowid.value
+      // const col = e.target.attributes.colid.value
+      // if (e.target.nodeName === 'DIV' && row && col) {
+      if (e.target.nodeName === 'DIV') {
+        let row = ''
+        let col = ''
+        if (e.target.attributes.rowid) {
+          row = e.target.attributes.rowid.value
+        }
+        if (e.target.attributes.colid) {
+          col = e.target.attributes.colid.value
+        }
+        // const row = e.target.attributes.rowid.value
+        // const col = e.target.attributes.colid.value
+        // v_fm_report_form_list
+        const query = {
+          flag: this.detailPage,
+          metaId: this.detailPageMeta || this.data.staObject || 'FM_REPORT_BASE',
+          // metaId: this.detailPageMeta || this.data.metaId,
+          pageType: 'DETAIL',
+          reportId: this.reportId,
+          staObject: this.data.staObject,
+          component: 'report-design-detail-list',
+          row: row,
+          col: col,
+          queryParams: this.reportScope,
+          scopeParams: this.scopeParams
+        }
+        this.$createPage({
+          ...query
+        })
+      }
+    },
+    // renderSubMenu () {
+    //   return (
+    //     <div class="sub-menu" ref="subMenu">
+    //       {
+    //         this.submenu.map((menu) => (
+    //           <div key={menu.text}>
+    //             {
+    //               menu.children && menu.children.length > 0 && (
+    //                 <div class="menu-container" onMouseenter={this.mouseEnter.bind(this)} onMouseleave={this.mouseLeave}>
+    //                   <span>{menu.text}</span>
+    //                 </div>
+    //               )
+    //             }
+    //           </div>
+    //         ))
+    //       }
+    //     </div>
+    //   )
+    // },
+    syncPostion () {
+      const { scrollLeft, scrollTop } = this.bodyWrapper
+      if (scrollLeft === 0) {
+        this.$refs.fixedWrapper.style.boxShadow = 'none'
+      } else {
+        this.$refs.fixedWrapper.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.12)'
+      }
+      setTimeout(() => {
+        this.$refs.headerWrapper.style.overflow = 'auto'
+        this.$refs.headerWrapper.scrollLeft = scrollLeft
+        this.$refs.headerWrapper.style.overflow = 'hidden'
+        this.$refs.fixedBodyWrapper.style.overflow = 'auto'
+        this.$refs.fixedBodyWrapper.scrollTop = scrollTop
+        this.$refs.fixedBodyWrapper.style.overflow = 'hidden'
+      }, 20)
+    }
+  },
+  created () {
+    this.data = { ...this.initConfig, ...this.config }
+    if (this.initConfig.reportId) {
+      this.reportId = this.initConfig.reportId
+      this.getReportHtml()
+    } else {
+      this.chartParams = this.config.queryParams
+      this.onLoad()
+    }
+  },
+  beforeDestroy () {
+    if (this.$refs.bodyWrapper) return
+    this.$refs.bodyWrapper.removeEventListener('scroll', this.syncPostion, true)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  height: auto;
+  width: au;
+  // width: 100%;
+  box-sizing: border-box;
+  padding:  16px 0;
+  background-color: #fff;
+  overflow: auto;
+}
+.header{
+  color: #666;
+  font-size: 16px;
+  font-weight: 600;
+  font-family: 'MicrosoftYaHei-Bold';
+  line-height: 1;
+  margin-bottom: 20px;
+}
+.title{
+  margin-left: 10px;
+}
+
+.table{
+  width: 100%;
+  // overflow-x: auto;
+  overflow: hidden;
+}
+// .table .table-body{
+//   display: block;
+//   height: 65vh;
+//   overflow-y: scroll;
+// }
+// table thead, .table-body tr{
+//   display: table;
+//   width: 100%;
+//   table-layout: fixed;
+// }
+// /*滚动条默认宽度是16px 将thead的宽度减16px*/
+// table thead {
+//     width: calc( 100% - 1em);
+// }
+
+.table .report_title_table{
+  text-align: center;
+}
+.table .report_title_table {
+    border: none;
+    margin-top: 5px;
+    width: 100%;
+    text-align: center;
+    font-family: tahoma, arial, verdana, sans-serif;
+}
+.table .report_title_table tr td {
+    border: none;
+    height: 40px;
+    font-size: 25px;
+    font-weight: bold;
+}
+.table .report_table {
+    color: black;
+    width: 100%;
+    font-size: 14px;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-bottom: 1px solid #D0D0D0;
+    border-right: 1px solid #D0D0D0;
+    font-family: tahoma, arial, verdana, sans-serif;
+}
+.table .report-biao-tou{
+  border-bottom: none;
+  width: calc(100% - 2px);
+}
+.table .report_table tr th {
+    height: 35px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+    border-collapse: collapse;
+    background-color: #F6F6F6;
+    border-top: 1px solid #D0D0D0;
+    border-left: 1px solid #D0D0D0;
+}
+.table .report_title_table {
+  display: none;
+}
+.table .report_table tr td {
+    height: 35px;
+    background: #ffffff;
+    text-align: center;
+    word-break: break-all;
+    word-wrap: break-word;
+    border-collapse: collapse;
+    border-top: 1px solid #D0D0D0;
+    border-left: 1px solid #D0D0D0;
+}
+
+.report-body{
+  max-height: 65vh;
+  overflow-y: auto;
+  overflow-x:auto;
+  // position: relative;
+}
+.table .report_table tr .left-td{
+  text-align: left;
+  box-sizing: border-box;
+  padding-left: 5px;
+}
+.report-body::-webkit-scrollbar {
+      width: 2px;
+      height: 8px;
+  }
+.table .report_tooltiptext{
+  display: none;
+}
+.table .report_table td {
+  padding: 0 10px;
+}
+
+.table .report_table td div {
+    box-sizing: border-box;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+
+    cursor: pointer;
+}
+.table .report_table td div:hover {
+    color: #5DC8F8;
+    font-weight: bold;
+    font-size: 16px;
+    /* text-decoration: underline; */
+    user-select: none;
+    border: 1px solid #5DC8F8;
+}
+
+.table-container{
+  position: relative;
+  overflow: hidden;
+}
+.tabletwo{
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  width: 137px;
+  height: calc(65vh + 66px);
+  box-shadow: 0 0 10px rgba(0,0,0,.12);
+}
+.tabletwo .report-header-body-two{
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+}
+.tabletwo .report-body{
+  position: absolute;
+  top: 72px;
+  left: 0;
+  overflow: hidden;
+  z-index: 3;
+  max-height: 65vh;
+}
+.is-hidden{
+  visibility: hidden;
+}
+.table-container .table table{
+  // width: 900px;
+  min-width: 100%;
+  table-layout: fixed;
+}
+// .tabletwo .report_table tr .left-td{
+//   position: fixed;
+// }
+
+.sub-menu {
+  display: none;
+  position: absolute;
+  border-radius: 4px;
+  background-color: #fff;
+  min-width: 130px;
+  border: 1px solid #e3e3e3;
+  z-index: 4;
+  // min-height: 200px;
+}
+.menu-container{
+  position: relative;
+  padding: 6px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  span{
+    margin-right: 10px;
+  }
+}
+.menu-container:hover{
+  @include bg_color_primary(.5);
+}
+.sub-menu-inner {
+  display: none;
+  position: absolute;
+  left: 154px;
+  top: 0;
+  background: #fff;
+  white-space: nowrap;
+  min-width: 100px;
+  border: 1px solid #e3e3e3;
+  text-align: center;
+}
+.menu-children{
+  padding: 6px;
+}
+.menu-children:hover{
+  @include bg_color_primary(.5);
+}
+@media only screen and (max-width: 992px){
+  .table .report_table tr th {
+    white-space: normal;
+  }
+}
+</style>