fix:导出修改

quanyawei

2023-11-23 4bced4c45dac14f20953b6f3b0326e535a99729b

fix:导出修改

 .eslintrc.js

@@ -4,13 +4,20 @@
    node: true
  },
  extends: [
    'plugin:vue/recommended', // 此项是用来配置vue.js风格
    'eslint:recommended' //继承Eslint中推荐的（打钩的）规则项
    // 参考vuejs官方的eslint配置： https://eslint.vuejs.org/user-guide/#usage
    'plugin:vue/recommended',
    // 覆盖 ESLint 配置，确保 prettier 放在最后
    'eslint:recommended'
  ],
  parserOptions: {
    ecmaVersion: 13,
    ecmaVersion: 10,
    sourceType: 'module'
  },
  plugins: ['vue'],
  rules: {}
  rules: {
    'space-before-function-paren': 0,
    'no-console': 'off',
    'no-unused-vars': 'off',
    'vue/attribute-hyphenation': 0 // 忽略属性连字
  }
}

 src/App.vue

@@ -6,8 +6,10 @@

<script>
// import { getMenus } from '@/router/dynamicRouter.js'
import { mixins } from './mixins/downLoadNotice'
export default {
  name: 'App'
  name: 'App',
  mixins: [mixins]
  // mounted() {
  //   console.log('-------------')
  //   setTimeout(() => {
@@ -17,7 +19,7 @@
}
</script>
<style >
#app{
#app {
  height: 100%;
}
</style>

 src/mixins/downLoadNotice.js

New file
@@ -0,0 +1,60 @@
import { mapState } from 'vuex'
export const mixins = {
  data: function () {
    return {
      notify: {} // 用来维护下载文件进度弹框对象
    }
  },
  computed: {
    ...mapState({
      progressList: state => state.downLoadProgress.progressList
    })
  },
  watch: {
    // 监听进度列表
    progressList: {
      handler(n) {
        const data = JSON.parse(JSON.stringify(n))
        console.log('Mixin', data)
        data.forEach(item => {
          const domList = [...document.getElementsByClassName(item.path)]
          if (domList.find(i => i.className === item.path)) {
            // 如果页面已经有该进度对象的弹框，则更新它的进度progress
            if (item.progress) {
              domList.find(i => i.className === item.path).innerHTML =
                item.progress + '%'
            }
            if (item.progress === null) {
              // 此处容错处理，如果后端传输文件流报错，删除当前进度对象
              this.$store.commit('downLoadProgress/DEL_PROGRESS', item.path)
              this.$notify.error({
                title: '错误',
                message: '文件下载失败！'
              })
            }
          } else {
            // 如果页面中没有该进度对象所对应的弹框，页面新建弹框，并在notify中加入该弹框对象，属性名为该进度对象的path(上文可知path是唯一的)，属性值为$notify(element ui中的通知组件)弹框对象
            this.notify[item.path] = this.$notify.success({
              // title: 'info',
              dangerouslyUseHTMLString: true,
              customClass: 'progress-notify',
              message: `<p style="width: 100px;">正在下载<span class="${item.path}" style="float: right">${item.progress}%</span></p>`, // 显示下载百分比，类名为进度对象的path(便于后面更新进度百分比)
              duration: 0
            })
          }

          if (item.progress == 100) {
            // 如果下载进度到了100%，关闭该弹框，并删除notify中维护的弹框对象
            this.notify[item.path].close()
            // delete this.notify[item.path] 上面的close()事件是异步的，这里直接删除会报错，利用setTimeout，将该操作加入异步队列
            setTimeout(() => {
              delete this.notify[item.path]
            }, 1000)
            this.$store.commit('downLoadProgress/DEL_PROGRESS', item.path) // 删除caseInformation中state的progressList中的进度对象
          }
        })
      },
      deep: true
    }
  }
}

 src/store/getters.js

@@ -6,7 +6,8 @@
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  regionCode: state => state.regionCode
  regionCode: state => state.regionCode,
  progressList: state => state.downLoadProgress.progressList,
  progressError: state => state.downLoadProgress.progressError
}
export default getters


 src/store/index.js

@@ -4,6 +4,7 @@
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import downLoadProgress from './modules/downLoadProgress'

Vue.use(Vuex)

@@ -12,6 +13,7 @@
    app,
    settings,
    user,
    downLoadProgress,
    orgId: 0,
    accountId: 0,
    regionCode: 0,
@@ -27,7 +29,6 @@
    // alarmTableVisible: false
  },
  getters

})

export default store

 src/store/modules/downLoadProgress.js

New file
@@ -0,0 +1,49 @@
const state = {
  // 文件下载进度
  progressList: [],
  progressError: ''
}
const mutations = {
  SET_PROGRESS: (state, progressObj) => {
    // 修改进度列表
    console.log('Vuex', progressObj)
    if (state.progressList.length) {
      // 如果进度列表存在
      if (state.progressList.find(item => item.path == progressObj.path)) {
        // 前面说的path时间戳是唯一存在的，所以如果在进度列表中找到当前的进度对象
        state.progressList.find(
          item => item.path == progressObj.path
        ).progress = progressObj.progress
        // 改变当前进度对象的progress
      }
    } else {
      // 当前进度列表为空，没有下载任务，直接将该进度对象添加到进度数组内
      state.progressList.push(progressObj)
    }
  },
  DEL_PROGRESS: (state, props) => {
    state.progressList.splice(
      state.progressList.findIndex(item => item.path == props),
      1
    ) // 删除进度列表中的进度对象
  },
  CHANGE_SETTING: (state, { key, value }) => {
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  }
}

const actions = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

 src/store/modules/user.js

@@ -26,79 +26,86 @@
  login({ commit }, userInfo) {
    const { account, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ account: account.trim(), password: password }).then(response => {
        // 为所有请求在请求头带上token
        axios.defaults.headers['token'] = response.data.token
        // const { data } = response
        console.log('这是登录方法的返回')
        window.loginInfo = response.message
        if (response.code === 0) {
          commit('SET_TOKEN', response.data.token)
          setToken(response.data.token)
          // axios.interceptors.request.use(config => {
          //   config.headers.token = response.data.token
          // })
          // console.log('设置axios的token')
        } else {
          this.$store.state.loginInfo = response.message
          // console.log(this.$store.state.loginInfo)
          reject()
        }
        resolve(response)
      }).catch(error => {
        console.log('这里是登录错误信息')
        reject(error)
      })
      login({ account: account.trim(), password: password })
        .then(response => {
          // 为所有请求在请求头带上token
          axios.defaults.headers['token'] = response.data.token
          // const { data } = response
          console.log('这是登录方法的返回')
          window.loginInfo = response.message
          if (response.code === 0) {
            commit('SET_TOKEN', response.data.token)
            setToken(response.data.token)
            // axios.interceptors.request.use(config => {
            //   config.headers.token = response.data.token
            // })
            // console.log('设置axios的token')
          } else {
            this.$store.state.loginInfo = response.message
            // console.log(this.$store.state.loginInfo)
            reject()
          }
          resolve(response)
        })
        .catch(error => {
          console.log('这里是登录错误信息')
          reject(error)
        })
    })
  },

  // get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        console.log(response, 'res')
        // 把accountId存入sotre
        // console.log(66777)
        // console.log(response)
        this.state.accountId = response.data.userId
        // 把orgId存入sotre
        this.state.orgId = response.data.organization.id
        // 把regionCode存入sotre
        this.state.regionCode = response.data.organization.locationLevelCode
        // monitorPointId集合存入sotre
        this.state.monitorPointId = response.data.monitorPointIds
        this.state.user.name = response.data.userName
        this.state.user.menus = JSON.stringify(response.data.menus)
        // 将menu信息存入store
        // sessionStorage.setItem('menus', )
        // this.state.menus = response.data.menus
        if (!response) {
          reject('Verification failed, please Login again.')
        }
        resolve(response)
      }).catch(error => {
        console.log('这里是token错误信息')
        // this.$router.push({ path: '/login' })
        reject(error)
      })
      getInfo(state.token)
        .then(response => {
          console.log(response, 'res')
          // 把accountId存入sotre
          // console.log(66777)
          // console.log(response)
          this.state.accountId = response.data.userId
          // 把orgId存入sotre
          this.state.orgId = response.data.organization.id
          // 把regionCode存入sotre
          this.state.regionCode = response.data.organization.locationLevelCode
          // monitorPointId集合存入sotre
          this.state.monitorPointId = response.data.monitorPointIds
          this.state.user.name = response.data.userName
          this.state.user.menus = []
          this.state.user.menus = JSON.stringify(response.data.menus)
          // 将menu信息存入store
          // sessionStorage.setItem('menus', )
          // this.state.menus = response.data.menus
          if (!response) {
            reject('Verification failed, please Login again.')
          }
          resolve(response)
        })
        .catch(error => {
          console.log('这里是token错误信息')
          // this.$router.push({ path: '/login' })
          reject(error)
        })
    })
  },

  // user logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
    //   console.log('以下是退出登录之前的token')
    //   console.log(state.token)
      logout(state.token).then((res) => {
        commit('SET_TOKEN', '')
        removeToken()
        resetRouter()
        sessionStorage.clear()
        resolve()
      }).catch(error => {
        console.log('退出错误信息')
        reject(error)
      })
      //   console.log('以下是退出登录之前的token')
      //   console.log(state.token)
      logout(state.token)
        .then(res => {
          commit('SET_TOKEN', '')
          removeToken()
          resetRouter()
          sessionStorage.clear()
          resolve()
        })
        .catch(error => {
          console.log('退出错误信息')
          reject(error)
        })
    })
  },

@@ -118,4 +125,3 @@
  mutations,
  actions
}


 src/views/toCarryOutLegislativeReforms/reform/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="main" v-loading="loading">
  <div v-loading="loading" class="main">
    <div>
      <searchBar v-if="searchType" :search-type="'reform'" @handleSearch="handleSearchBut" @handleAdd="handleOpenDialog(null, 'add')" />
      <newWorkOrder v-if="centerDialogVisible" ref="newWorkOrder" :parent-form-data="parentFormData" :title="title" :page-state="pageState" :visible.sync="centerDialogVisible" @handleSubmit="newHandleSubmit" />
@@ -8,8 +8,12 @@
        <div class="exportBox">
          <div>查询列表</div>
          <div>
            <el-button type="primary" size="mini" @click="handleOpenDialog(null, 'add')">新建</el-button>
            <el-button :disabled="!(selectionRows.length>0)" type="info" size="mini" @click="exportData">导出</el-button>
            <el-button type="primary" size="mini" @click="handleOpenDialog(null, 'add')">
              新建
            </el-button>
            <el-button :disabled="!(selectionRows.length>0)" type="info" size="mini" @click="isNowDonw">
              导出
            </el-button>
          </div>
        </div>

@@ -17,19 +21,20 @@
          <div>
            <div v-if="sealList.length>0">
              <div v-for="(item,index) in sealList" :key="index" :style="{'height':item.styleHeight}">
                <div class="yingzhang" v-if="item.isInvalid===1">
                  <div class="seal-red"> 已作废 </div>
                <div v-if="item.isInvalid===1" class="yingzhang">
                  <div class="seal-red">
                    已作废
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="position: absolute;top:0;width: 100%;">
            <el-table size="mini" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" :header-cell-style="{
            color: '#101111',
            fontSize: '16px'
          }">
              <el-table-column type="selection" width="40" align="center">
              </el-table-column>
            <el-table size="mini" :data="tableData" border style="width: 100%" :header-cell-style="{
                color: '#101111',
                fontSize: '16px'
              }" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="40" align="center" />
              <el-table-column type="index" label="序号" width="60px" align="center" />
              <el-table-column align="center">
                <template slot="header">
@@ -104,11 +109,10 @@
              </el-table-column>
              <el-table-column align="center" prop="createTime" min-width="100px" label="操作">
                <template slot-scope="scope">

                  <el-button type="text" size="medium" @click="openWorkOrdinDialog(scope.row, 'detail')">
                    详情
                  </el-button>
                  <el-button type="text" v-if="scope.row.isCode==='1'" size="medium" @click="openEditDialog(scope.row)">
                  <el-button v-if="scope.row.isCode==='1'" type="text" size="medium" @click="openEditDialog(scope.row)">
                    修改单位
                  </el-button>
                  <el-button v-if="scope.row.state === 9" type="text" size="medium" @click="handleOpenDialog(scope.row, 'edit')">
@@ -123,11 +127,7 @@
                  <el-button v-if="scope.row.state === 30 && scope.row.isApprove === 1" type="text" size="medium" @click="openWorkOrdinDialog(scope.row, 'approve')">
                    审批
                  </el-button>
                  <el-button v-if="
                  scope.row.state === 20 &&
                  scope.row.changeType === 2 &&
                  scope.row.applyState === 0
                " type="text" size="medium" @click="openWorkOrdinDialog(scope.row, 'delay')">
                  <el-button v-if="scope.row.state === 20 && scope.row.changeType === 2 &&scope.row.applyState === 0" type="text" size="medium" @click="openWorkOrdinDialog(scope.row, 'delay')">
                    延期申请
                  </el-button>
                </template>
@@ -154,25 +154,43 @@
        <el-button type="primary" @click="handleInvalid">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改" v-if="dialogEditVisible" :visible.sync="dialogEditVisible" width="800px" top='5vh' :before-close="handleClose" center>
    <el-dialog v-if="dialogEditVisible" title="修改" :visible.sync="dialogEditVisible" width="800px" top="5vh" :before-close="handleClose" center>
      <el-descriptions title="基本信息">
        <template slot="extra">
          <div>
            {{ editEscalationUnitData.allocationNum}}
            {{ editEscalationUnitData.allocationNum }}
          </div>
        </template>
        <el-descriptions-item label="上报时间" label-class-name="itemSpan">{{ editEscalationUnitData.escalationTime }}</el-descriptions-item>
        <el-descriptions-item label="责任单位" label-class-name="itemSpan">{{ updataUnitIdFormatter }}</el-descriptions-item>
        <el-descriptions-item label="污染分类" label-class-name="itemSpan">{{ polluteTypeeDITFormatter }}</el-descriptions-item>
        <el-descriptions-item label="整改类型" label-class-name="itemSpan">{{ dictObj.changeEnum[editEscalationUnitData.changeType] }}</el-descriptions-item>
        <el-descriptions-item label="期限天数" label-class-name="itemSpan">{{ editEscalationUnitData.changeDay || 0}} 天</el-descriptions-item>
        <el-descriptions-item label="上报单位" label-class-name="itemSpan">{{ updataEscalationUnitIdFormatter }}</el-descriptions-item>
        <el-descriptions-item label="上报人" label-class-name="itemSpan">{{ editEscalationUnitData.escalationName }}</el-descriptions-item>
        <el-descriptions-item label="污染位置" label-class-name="itemSpan">{{ editEscalationUnitData.pollutePosition }}</el-descriptions-item>
        <el-descriptions-item label="上报时间" label-class-name="itemSpan">
          {{ editEscalationUnitData.escalationTime }}
        </el-descriptions-item>
        <el-descriptions-item label="责任单位" label-class-name="itemSpan">
          {{ updataUnitIdFormatter }}
        </el-descriptions-item>
        <el-descriptions-item label="污染分类" label-class-name="itemSpan">
          {{ polluteTypeeDITFormatter }}
        </el-descriptions-item>
        <el-descriptions-item label="整改类型" label-class-name="itemSpan">
          {{ dictObj.changeEnum[editEscalationUnitData.changeType] }}
        </el-descriptions-item>
        <el-descriptions-item label="期限天数" label-class-name="itemSpan">
          {{ editEscalationUnitData.changeDay || 0 }} 天
        </el-descriptions-item>
        <el-descriptions-item label="上报单位" label-class-name="itemSpan">
          {{ updataEscalationUnitIdFormatter }}
        </el-descriptions-item>
        <el-descriptions-item label="上报人" label-class-name="itemSpan">
          {{ editEscalationUnitData.escalationName }}
        </el-descriptions-item>
        <el-descriptions-item label="污染位置" label-class-name="itemSpan">
          {{ editEscalationUnitData.pollutePosition }}
        </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-divider />
      <div>
        <p class="editTile">修改操作</p>
        <p class="editTile">
          修改操作
        </p>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="责任单位:">
            <el-select v-model="formInEdit.unitId" size="small" clearable placeholder="请选择">
@@ -191,9 +209,15 @@
          <div class="block">
            <el-timeline>
              <el-timeline-item v-for="(activity, index) in operatingLog" :key="index" :color="'#0bbd87'" :timestamp="activity.createTime">
                <div v-if="activity.content"> 操作人: {{activity.userName}}</div>
                <div v-if="activity.content"> 责任单位: {{activity.content}}</div>
                <div v-if="activity.polluteType"> 污染分类: {{activity.polluteType}}</div>
                <div v-if="activity.content">
                  操作人: {{ activity.userName }}
                </div>
                <div v-if="activity.content">
                  责任单位: {{ activity.content }}
                </div>
                <div v-if="activity.polluteType">
                  污染分类: {{ activity.polluteType }}
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
@@ -209,6 +233,7 @@
</template>

<script>
// import { mixins } from './downLoadNotice'
import axios from 'axios'
import _ from 'lodash'
import qs from 'qs'
@@ -221,6 +246,7 @@
    newWorkOrder,
    workOrderInformation
  },
  // mixins: [mixins],
  data() {
    return {
      loading: false,
@@ -302,15 +328,38 @@
      console.log(rows)
      this.selectionRows = rows
    },
    isNowDonw() {
      this.$confirm('立即下载或者后台下载?', '提示', {
        confirmButtonText: '立即下载',
        cancelButtonText: '后台下载',
        type: 'warning'
      })
        .then(() => {
          this.loading = true
          this.exportData()
        })
        .catch(() => {
          this.loading = false
          this.exportData()
        })
    },
    exportData() {
      // this.dowOrgFile('交办单导出.xlsx')
      let that = this
      const CancelToken = axios.CancelToken
      let cancel
      let timer = setTimeout(() => {
        cancel()
        this.loading = false
        this.$message.error('当前下载数据过多，请分批下载！')
      }, 300000)
      this.loading = true
      let timer
      const totalSize = this.selectionRows.length * 1024 * 1024
      const uniSign = new Date().getTime() + '' // 可能会连续点击下载多个文件，这里用时间戳来区分每一次下载的文件
      if (this.loading) {
        timer = setTimeout(() => {
          cancel()
          this.loading = false
          this.$message.error('当前下载数据过多，请分批下载！')
        }, 300000)
      }

      // this.loading = true
      this.$request({
        url: '/allocation/listExcel',
        method: 'get',
@@ -321,6 +370,19 @@
        cancelToken: new CancelToken(function executor(c) {
          cancel = c
        }),
        onDownloadProgress(progress) {
          const loaded = progress.loaded
          // progress对象中的loaded表示已经下载的数量，total表示总数量，这里计算出百分比
          let downProgress = Math.round((loaded / totalSize) * 100)
          console.log('downProgress', downProgress)
          // 将此次下载的文件名和下载进度组成对象再用vuex状态管理
          if (!that.loading) {
            that.$store.commit('downLoadProgress/SET_PROGRESS', {
              path: uniSign,
              progress: downProgress
            })
          }
        },
        paramsSerializer: params => {
          return qs.stringify(params, {
            indices: false
@@ -333,6 +395,12 @@
          if (res.code === -1) {
            this.$message.error(res.message)
          } else {
            if (!that.loading) {
              that.$store.commit('downLoadProgress/SET_PROGRESS', {
                path: uniSign,
                progress: 100
              })
            }
            this.getOutExcel('交办单导出.xlsx', res)
          }
        })
@@ -342,23 +410,24 @@
        })
    },
    getOutExcel(fileName, res) {
      let blob = new Blob([res], { type: 'application/x-xls' })
      const blob = new Blob([res], { type: 'application/x-xls' })
      if (window.navigator.msSaveOrOpenBlob) {
        //兼容 IE & EDGE
        // 兼容 IE & EDGE
        this.loading = false
        navigator.msSaveBlob(blob, fileName)
      } else {
        var link = document.createElement('a')
        const link = document.createElement('a')
        // 兼容不同浏览器的URL对象
        const url = window.URL || window.webkitURL || window.moxURL
        // 创建下载链接
        link.href = url.createObjectURL(blob)
        //命名下载名称
        // 命名下载名称
        link.download = fileName
        //点击触发下载
        // 点击触发下载
        link.click()
        //下载完成进行释放
        // 下载完成进行释放
        url.revokeObjectURL(link.href)
        this.$message.success('下载完成！')
        this.loading = false
      }
    },
@@ -376,7 +445,7 @@
          this.operatingLog = res.data
        })
        .catch(err => {
          this.$message.error(res.message)
          this.$message.error(err.message)
          console.log('请求Region失败')
          console.log(err)
        })
@@ -420,7 +489,7 @@
          }
        })
        .catch(err => {
          this.$message.error(res.message)
          this.$message.error(err.message)
          console.log('请求Region失败')
          console.log(err)
        })
@@ -548,7 +617,7 @@
      })
    },
    handleSearchBut(obj) {
      let pageSize = this.pagination.pageSize
      const pageSize = this.pagination.pageSize
      this.pagination = {
        currentPage: 1,
        // 总条数，根据接口获取数据长度(注意：这里不能为空)
@@ -582,10 +651,10 @@
          })
          this.pagination.totalCount = res.data.page.totalNum
          this.$nextTick(() => {
            var rows = this.$el.querySelectorAll('table tr')
            for (var i = 0; i < rows.length; i++) {
              var row = rows[i]
              var height = row.getBoundingClientRect().height
            const rows = this.$el.querySelectorAll('table tr')
            for (let i = 0; i < rows.length; i++) {
              const row = rows[i]
              const height = row.getBoundingClientRect().height
              this.sealList[i]['styleHeight'] = height + 'px'
            }
            this.$forceUpdate()

 src/views/toCarryOutLegislativeReforms/summaryPage/index.vue

@@ -2,11 +2,21 @@
  <div class="main">
    <div class="timeSelect">
      <el-radio-group v-model="searchForm.number" style="margin-left:20px" @input="changeNumber('timeMouted')">
        <el-radio-button label="1">近1个月</el-radio-button>
        <el-radio-button label="2">近2个月</el-radio-button>
        <el-radio-button label="3">近3个月</el-radio-button>
        <el-radio-button label="6">近6个月</el-radio-button>
        <el-radio-button label="12">近12个月</el-radio-button>
        <el-radio-button label="1">
          近1个月
        </el-radio-button>
        <el-radio-button label="2">
          近2个月
        </el-radio-button>
        <el-radio-button label="3">
          近3个月
        </el-radio-button>
        <el-radio-button label="6">
          近6个月
        </el-radio-button>
        <el-radio-button label="12">
          近12个月
        </el-radio-button>
      </el-radio-group>
      <el-date-picker v-model="timeInterval" el-time-picker type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="changeNumber('timeValue')" />
    </div>
@@ -31,20 +41,20 @@
    <div class="overviewAndDetails">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="总览" name="first">
          <div class="tit">
            <span>
              责任单位交办单总览
            </span>
            <el-button type="primary" plain size="small" style="float: right;" @click="ecxport">
              导出
            </el-button>
          </div>
          <div>
            <div class="tit">
              <span>
                责任单位交办单总览
              </span>
              <el-button type="primary" plain size="small" style="float: right;" @click="ecxport">
                导出
              </el-button>
            </div>
            <div class="min">
              <div class="tab" style="display: inline-block; width: 100%">
                <el-table :data="tableData" class="top" border style="width: 100%" :header-cell-style="{
                  background: '#99D4FF', color: '#101111', fontSize: '16px'
                }">
                <el-table :data="tableData" class="topTable" border style="width: 100%" :header-cell-style="{
                    background: '#99D4FF', color: '#101111', fontSize: '16px'
                  }">
                  <el-table-column align="center" type="index" width="60" label="序号" />
                  <el-table-column align="center" prop="unitName" label="责任单位" />
                  <el-table-column align="center" prop="total" label="总工单" />
@@ -55,8 +65,8 @@
                  <el-table-column align="center" prop="marks" label="加分" />
                  <el-table-column align="center" prop="totalPoints" label="总得分" />
                </el-table>
                <vueSeamless :data="tableData" v-if="tableData.length>5" ref="scroll3" :pause="true" class="seamless-warp" style="width: 100%;" :class-option="classOption">
                  <el-table :data="tableData" v-if="tableData.length>0" class="bottom" border style="width: 100%;margin-bottom:50px">
                <vueSeamless v-if="tableData.length>5" ref="scroll3" :data="tableData" :pause="true" class="seamless-warp" style="width: 100%;" :class-option="classOption">
                  <el-table v-if="tableData.length>0" :data="tableData" class="bottom" border style="width: 100%;margin-bottom:50px">
                    <el-table-column align="center" type="index" width="60" />
                    <el-table-column align="center" prop="unitName" label="责任单位" />
                    <el-table-column align="center" prop="total" label="总工单" />
@@ -68,7 +78,7 @@
                    <el-table-column align="center" prop="totalPoints" label="总得分" />
                  </el-table>
                </vueSeamless>
                <el-table :data="tableData" v-else class="bottom" border style="width: 100%;margin-bottom:50px">
                <el-table v-else :data="tableData" class="bottomTable" border style="width: 100%;margin-bottom:50px">
                  <el-table-column align="center" type="index" width="60" />
                  <el-table-column align="center" prop="unitName" label="责任单位" />
                  <el-table-column align="center" prop="total" label="总工单" />
@@ -81,7 +91,6 @@
                </el-table>
              </div>
            </div>

          </div>
        </el-tab-pane>
        <el-tab-pane label="明细" name="second">
@@ -414,10 +423,10 @@
    display: flex;
    width: 100%;
  }
  .top /deep/.el-table__body-wrapper {
  .topTable /deep/.el-table__body-wrapper {
    display: none;
  }
  .bottom /deep/.el-table__header-wrapper {
  .bottomTable /deep/.el-table__header-wrapper {
    display: none;
    width: 100%;
  }