lilei 1 ヶ月 前
コミット
f49f0b67b7

+ 16 - 217
src/views/reportData/dailyReport/index.vue

@@ -1,242 +1,38 @@
 <template>
-  <div>
-    <a-spin :spinning="spinning" tip="Loading...">
-      <!-- 选项卡切换 -->
-      <a-tabs v-model="activeKey" @change="callback" :tabBarStyle="{'background':'#fff'}">
-        <a-tab-pane :key="item.id" :tab="item.name" v-for="item in tabsList">
-        </a-tab-pane>
-      </a-tabs>
-      <a-card size="small">
-        <!-- 搜索条件 -->
-        <div class="table-page-search-wrapper newTableSearchName" ref="tableSearch">
-          <a-form-model
-            id="dayReportList-form"
-            ref="ruleForm"
-            class="form-model-con"
-            layout="inline"
-            :rules="rules"
-            :model="queryParam"
-            @keyup.enter.native="handleSearch">
-            <a-row :gutter="15">
-              <a-col :md="6" :sm="24">
-                <a-form-model-item label="月份" prop="month">
-                  <a-month-picker
-                    placeholder="请选择月份"
-                    locale="zh-cn"
-                    id="dayReportList-month"
-                    v-model="queryParam.month"
-                    @change="onChange"
-                    :disabled-date="disabledDate"
-                    style="width: 100%;"/>
-                </a-form-model-item>
-              </a-col>
-              <a-col :md="6" :sm="24" style="margin-bottom: 10px;">
-                <a-button type="primary" @click="handleSearch" :disabled="disabled" id="dayReportList-refresh">查询</a-button>
-                <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="dayReportList-reset">重置</a-button>
-                <a-button
-                  style="margin-left: 5px"
-                  type="primary"
-                  class="button-warning"
-                  @click="handleExport"
-                  :disabled="disabled"
-                  :loading="exportLoading"
-                  id="dayReportList-export">导出</a-button>
-              </a-col>
-            </a-row>
-          </a-form-model>
-        </div>
-      </a-card>
-      <!-- 列表 -->
-      <a-card size="small" style="margin-top:4px!important">
-        <table0
-          v-if="activeKey == 0"
-          ref="table0"
-          :month="queryParam.month"
-          :columns="columns"
-          :tableData="tableData"
-          :nowDate="nowDate"
-        ></table0>
-        <table1
-          v-if="activeKey == 1"
-          ref="table1"
-          :month="queryParam.month"
-          :columns="columns"
-          :tableData="tableData"
-          :nowDate="nowDate"
-        ></table1>
-        <table2
-          v-if="activeKey == 2"
-          ref="table2"
-          :month="queryParam.month"
-          :columns="columns"
-          :tableData="tableData"
-          :nowDate="nowDate"
-        ></table2>
-        <table3
-          v-if="activeKey == 3"
-          ref="table3"
-          :month="queryParam.month"
-          :columns="columns"
-          :tableData="tableData"
-          :nowDate="nowDate"
-        ></table3>
-      </a-card>
-    </a-spin>
+  <div class="dayReport-box">
+    <!-- 选项卡切换 -->
+    <a-tabs v-model="activeKey" @change="callback" :tabBarStyle="{'background':'#fff',height:'41px',overflow:'hidden',marginBottom:'5px'}">
+      <a-tab-pane :key="item.id" :tab="item.name" v-for="item in tabsList" forceRender>
+        <dTable :ref="'table'+item.id"></dTable>
+      </a-tab-pane>
+    </a-tabs>
   </div>
 </template>
 
 <script>
 import { commonMixin } from '@/utils/mixin'
-import XLSX from 'xlsx-js-style'
-// 组件
-import moment from 'moment'
-import table0 from './table0'
-import table1 from './table1'
-import table2 from './table2'
-import table3 from './table3'
-// 接口
-import { salesReportDailyList } from '@/api/reportData.js'
+import dTable from './table.vue'
 export default {
   name: 'RegionTypeSalesReportList',
   mixins: [commonMixin],
-  components: { table0, table1, table2, table3 },
+  components: { dTable },
   data () {
     return {
       spinning: false,
       activeKey: 0, // 切换显示页面值 0 各分区品类实售明细 1各区域品类实售明细
-      advanced: true, // 高级搜索 展开/关闭
-      disabled: false, //  查询、重置按钮是否可操作
-      exportLoading: false, // 导出按钮加载状态
-      tableHeight: 0, // 表格高度
-      tabsList: [{ id: 0, name: '全国销售日报' }, { id: 1, name: '项目销售日报1' }, { id: 2, name: '项目销售日报2' }, { id: 3, name: '分区销售日报' }], // tab切换data
-      columns: [], // 表头数据
-      tableData: [], // 表格数据
-      totalNums: 0, // 总条数
-      // 查询参数
-      queryParam: {
-        month: moment().format('YYYY-MM') // 月份默认值
-      },
-      rules: {
-        'month': [{ required: true, message: '请选择月份', trigger: 'change' }]
-      },
-      nowDate: ''
+      tabsList: [{ id: 0, name: '全国销售日报' }, { id: 1, name: '项目销售日报1' }, { id: 2, name: '项目销售日报2' }, { id: 3, name: '分区销售日报' }] // tab切换data
     }
   },
   methods: {
-    // 月份 change
-    onChange (date, dateString) {
-      this.queryParam.month = dateString
-    },
-    // 月份选择范围
-    disabledDate (current) {
-      return current && current > moment().endOf('day')
-    },
     // tabs切换  change时间
     callback (key) {
       this.activeKey = key
-      const _this = this
-      _this.$nextTick(() => {
-        this.resetSearchForm()
-      })
-    },
-    // 查询
-    handleSearch () {
-      const _this = this
-      this.$refs.ruleForm.validate(valid => {
-        if (valid) {
-          _this.getTableData()
-        } else {
-          _this.$message.error('请选择月份')
-          return false
-        }
-      })
-    },
-    //  重置
-    resetSearchForm () {
-      this.$refs.ruleForm.resetFields()
-      this.tableData = []
-    },
-    exportTable (dom, title) {
-      const zim = 'A、B、C、D、E、F、G、H、I、J、K、L、M、N、O、P、Q、R、S、T、U、V、W、X、Y、Z‌'.split('、')
-      var ws = XLSX.utils.table_to_sheet(dom)
-      var wb = XLSX.utils.book_new()
-      console.log(ws)
-      // 设置样式
-      Object.keys(ws).forEach(cell => {
-        if (cell[0] !== '!') {
-          ws[cell].s = {
-            alignment: {
-              horizontal: 'center',
-              vertical: 'center'
-            }
-          }
-        }
-      })
-      // 表格1
-      if (this.activeKey == 1 || this.activeKey == 2) {
-        const cols = zim[this.columns.length - 1]
-        Array(this.totalNums).fill().forEach((item, i) => {
-          const a = ws[cols + (i + 2)]
-          if (a) {
-            a.z = (a.v * 100) + '%' // 设置单元格格式为百分比
-          }
-        })
-      }
-      // 4. 设置列宽
-      ws['!cols'] = Array(this.columns.length).fill().map(() => ({ wch: 35 }))
-
-      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
-      XLSX.writeFile(wb, this.queryParam.month + title + '.xlsx')
-    },
-    //  导出
-    handleExport () {
-      const excelTitle = this.tabsList.find(item => item.id == this.activeKey)
-      if (this.$refs.table0 && this.activeKey == 0) {
-        this.exportTable(this.$refs.table0.getTable(), excelTitle.name)
-      } else if (this.$refs.table1 && this.activeKey == 1) {
-        this.totalNums = this.$refs.table1.list.length
-        this.exportTable(this.$refs.table1.getTable(), excelTitle.name)
-      } else if (this.$refs.table2 && this.activeKey == 2) {
-        this.exportTable(this.$refs.table2.getTable(), excelTitle.name)
-      } else if (this.$refs.table3 && this.activeKey == 3) {
-        this.exportTable(this.$refs.table3.getTable(), excelTitle.name)
-      }
-    },
-    // 获取表格数据
-    async getTableData () {
-      const url = [salesReportDailyList, salesReportDailyList, salesReportDailyList, salesReportDailyList]
-      const reportType = ['DailyPL', 'DailyPL', 'DailyPLJL', 'DailyPL'][this.activeKey]
-      const reportDate = this.queryParam.month + '-01 00:00:00'
-      this.nowDate = moment().format('DD日HH点mm分')
-      this.spinning = true
-      const data = await url[this.activeKey]({ reportType, reportDate }).then(res => res.data)
-      if (data) {
-        this.tableData = data
-        if (this.activeKey == 1) {
-          this.columns = this.getColumns()
-        }
-        if (this.activeKey == 2) {
-          this.columns = [1, 2, 3, 4, 5]
-        }
-        this.spinning = false
-      }
-    },
-    getColumns () {
-      const row = this.tableData[0]
-      const ret = []
-      if (row) {
-        row.detailList[0].forEach(item => {
-          ret.push(item)
-        })
-        ret.push(row.bymb)
-        ret.push(row.wcl)
-      }
-      return ret
+      this.$refs['table' + this.activeKey][0].pageInit(this.activeKey)
     },
     // 初始化
     pageInit () {
       this.activeKey = 0
-      this.tableData = []
+      this.$refs['table' + this.activeKey][0].pageInit(this.activeKey)
     }
   },
   mounted () {
@@ -256,5 +52,8 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-
+.dayReport-box{
+  min-height: calc(100vh - 90px);
+  background: #fff;
+}
 </style>

+ 289 - 0
src/views/reportData/dailyReport/table.vue

@@ -0,0 +1,289 @@
+<template>
+  <div>
+    <a-spin :spinning="spinning" tip="Loading...">
+      <a-card size="small" class="card-table">
+        <!-- 搜索条件 -->
+        <div class="table-page-search-wrapper newTableSearchName" ref="tableSearch">
+          <a-form-model
+            id="dayReportList-form"
+            ref="ruleForm"
+            class="form-model-con"
+            layout="inline"
+            :rules="rules"
+            :model="queryParam"
+            @keyup.enter.native="handleSearch">
+            <a-row :gutter="15">
+              <a-col :md="6" :sm="24">
+                <a-form-model-item label="月份" prop="month">
+                  <a-month-picker
+                    placeholder="请选择月份"
+                    locale="zh-cn"
+                    id="dayReportList-month"
+                    v-model="queryParam.month"
+                    @change="onChange"
+                    :disabled-date="disabledDate"
+                    style="width: 100%;"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :md="6" :sm="24" style="margin-bottom: 10px;">
+                <a-button type="primary" @click="handleSearch" :disabled="disabled" id="dayReportList-refresh">查询</a-button>
+                <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="dayReportList-reset">重置</a-button>
+                <a-button
+                  style="margin-left: 5px"
+                  type="primary"
+                  class="button-warning"
+                  @click="handleExport"
+                  :disabled="disabled"
+                  :loading="exportLoading"
+                  id="dayReportList-export">导出</a-button>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+        <!-- 列表 -->
+        <table0
+          v-if="activeKey == 0"
+          ref="table0"
+          :month="queryParam.month"
+          :columns="columns"
+          :tableData="tableData"
+          :nowDate="nowDate"
+        ></table0>
+        <table1
+          v-if="activeKey == 1"
+          ref="table1"
+          :month="queryParam.month"
+          :columns="columns"
+          :tableData="tableData"
+          :nowDate="nowDate"
+        ></table1>
+        <table2
+          v-if="activeKey == 2"
+          ref="table2"
+          :month="queryParam.month"
+          :columns="columns"
+          :tableData="tableData"
+          :nowDate="nowDate"
+        ></table2>
+        <table3
+          v-if="activeKey == 3"
+          ref="table3"
+          :month="queryParam.month"
+          :columns="columns"
+          :tableData="tableData"
+          :nowDate="nowDate"
+        ></table3>
+      </a-card>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { commonMixin } from '@/utils/mixin'
+import XLSX from 'xlsx-js-style'
+// 组件
+import moment from 'moment'
+import table0 from './table0'
+import table1 from './table1'
+import table2 from './table2'
+import table3 from './table3'
+// 接口
+import { salesReportDailyList } from '@/api/reportData.js'
+export default {
+  name: 'RegionTypeSalesReportList',
+  mixins: [commonMixin],
+  components: { table0, table1, table2, table3 },
+  data () {
+    return {
+      spinning: false,
+      activeKey: 0, // 切换显示页面值 0 各分区品类实售明细 1各区域品类实售明细
+      advanced: true, // 高级搜索 展开/关闭
+      disabled: false, //  查询、重置按钮是否可操作
+      exportLoading: false, // 导出按钮加载状态
+      tableHeight: 0, // 表格高度
+      tabsList: [{ id: 0, name: '全国销售日报' }, { id: 1, name: '项目销售日报1' }, { id: 2, name: '项目销售日报2' }, { id: 3, name: '分区销售日报' }], // tab切换data
+      columns: [], // 表头数据
+      tableData: [], // 表格数据
+      totalNums: 0, // 总条数
+      // 查询参数
+      queryParam: {
+        month: moment().format('YYYY-MM') // 月份默认值
+      },
+      rules: {
+        'month': [{ required: true, message: '请选择月份', trigger: 'change' }]
+      },
+      nowDate: ''
+    }
+  },
+  methods: {
+    // 月份 change
+    onChange (date, dateString) {
+      this.queryParam.month = dateString
+    },
+    // 月份选择范围
+    disabledDate (current) {
+      return current && current > moment().endOf('day')
+    },
+    // tabs切换  change时间
+    callback (key) {
+      this.activeKey = key
+      const _this = this
+      _this.$nextTick(() => {
+        this.resetSearchForm()
+      })
+    },
+    // 查询
+    handleSearch () {
+      const _this = this
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          _this.getTableData()
+        } else {
+          _this.$message.error('请选择月份')
+          return false
+        }
+      })
+    },
+    //  重置
+    resetSearchForm () {
+      this.$refs.ruleForm.resetFields()
+      this.tableData = []
+    },
+    exportTable (dom, title) {
+      const zim = 'A、B、C、D、E、F、G、H、I、J、K、L、M、N、O、P、Q、R、S、T、U、V、W、X、Y、Z‌'.split('、')
+      var ws = XLSX.utils.table_to_sheet(dom)
+      var wb = XLSX.utils.book_new()
+      // console.log(ws)
+      // 设置样式
+      Object.keys(ws).forEach(cell => {
+        if (cell[0] !== '!') {
+          ws[cell].s = {
+            alignment: {
+              horizontal: 'center',
+              vertical: 'center'
+            }
+          }
+        }
+      })
+      // 表格0
+      if (this.activeKey == 0) {
+        const ri = [5, 10, 19, 22]
+        this.columns.forEach((item, i) => {
+          if (i > 1) {
+            const cols = zim[i]
+            ri.forEach((row, j) => {
+              const a = ws[cols + row]
+              if (a) {
+                a.z = (a.v * 100) + '%' // 设置单元格格式为百分比
+              }
+            })
+          }
+        })
+      }
+      // 表格1表格2
+      if (this.activeKey == 1 || this.activeKey == 2) {
+        const cols = zim[this.columns.length - 1]
+        Array(this.totalNums).fill().forEach((item, i) => {
+          const a = ws[cols + (i + 2)]
+          if (a) {
+            a.z = (a.v * 100) + '%' // 设置单元格格式为百分比
+          }
+        })
+      }
+      // 表格3
+      if (this.activeKey == 3) {
+        const ci = [6, 8]
+        ci.forEach((row) => {
+          const cols = zim[row]
+          Array(this.totalNums).fill().forEach((item, i) => {
+            const a = ws[cols + (i + 3)]
+            if (a) {
+              a.z = (a.v * 100) + '%' // 设置单元格格式为百分比
+            }
+          })
+        })
+      }
+      // 4. 设置列宽
+      ws['!cols'] = Array(this.columns.length).fill().map(() => ({ wch: this.activeKey == 3 ? 15 : 35 }))
+
+      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
+      XLSX.writeFile(wb, this.queryParam.month + title + '.xlsx')
+    },
+    //  导出
+    handleExport () {
+      const excelTitle = this.tabsList.find(item => item.id == this.activeKey)
+      if (this.$refs.table0 && this.activeKey == 0) {
+        this.totalNums = this.$refs.table0.list.length
+        this.exportTable(this.$refs.table0.getTable(), excelTitle.name)
+      } else if (this.$refs.table1 && this.activeKey == 1) {
+        this.totalNums = this.$refs.table1.list.length
+        this.exportTable(this.$refs.table1.getTable(), excelTitle.name)
+      } else if (this.$refs.table2 && this.activeKey == 2) {
+        this.totalNums = this.$refs.table2.list.length
+        this.exportTable(this.$refs.table2.getTable(), excelTitle.name)
+      } else if (this.$refs.table3 && this.activeKey == 3) {
+        this.totalNums = this.$refs.table3.list.length
+        this.exportTable(this.$refs.table3.getTable(), excelTitle.name)
+      }
+    },
+    // 获取表格数据
+    async getTableData () {
+      const reportType = ['COUNTRY_SALES_DAY', 'DailyPL', 'DailyPLJL', 'AREA_SALES_DAY'][this.activeKey]
+      const reportDate = this.queryParam.month + '-01 00:00:00'
+      this.nowDate = moment().format('DD日HH点mm分')
+      this.spinning = true
+      const data = await salesReportDailyList({ reportType, reportDate }).then(res => res.data)
+      if (data) {
+        this.tableData = data
+        // 全国销售日报
+        if (this.activeKey == 0) {
+          this.columns = ['', '']
+          data.forEach(item => {
+            this.columns.push(item.subareaName)
+          })
+        }
+        // 项目销售日报1
+        if (this.activeKey == 1) {
+          this.columns = this.getColumns()
+        }
+        // 项目销售日报2
+        if (this.activeKey == 2) {
+          this.columns = [1, 2, 3, 4, 5]
+        }
+        // 分区销售报表
+        if (this.activeKey == 3 && this.$refs.table3) {
+          this.columns = this.$refs.table3.columns
+        }
+        this.spinning = false
+      }
+    },
+    getColumns () {
+      const row = this.tableData[0]
+      const ret = []
+      if (row) {
+        row.detailList[0].forEach(item => {
+          ret.push(item)
+        })
+        ret.push(row.bymb)
+        ret.push(row.wcl)
+      }
+      return ret
+    },
+    // 初始化
+    pageInit (activeKey) {
+      this.activeKey = activeKey
+    }
+  },
+  mounted () {
+    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
+      this.pageInit()
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.card-table{
+  height: calc(100vh - 140px);
+  overflow: auto;
+}
+</style>

+ 118 - 168
src/views/reportData/dailyReport/table0.vue

@@ -1,179 +1,32 @@
 <template>
   <div>
     <!-- 全国销售日报 -->
-    <h2 class="table-title">2025年3月 全国销售日报(截止22日17点30分)</h2>
-    <table class="table-box" id="day-table-0">
-      <thead>
+    <h2 class="table-title" v-if="tableData.length">{{ month.replace('-','年')+'月' }} 全国销售日报(截止{{ nowDate }})</h2>
+    <table class="table-box" id="day-table-0" v-if="tableData.length">
+      <thead class="ant-table-thead">
         <tr>
-          <th></th>
-          <th></th>
-          <th align="center">销售额</th>
-          <th align="center">东莞服务中心</th>
-          <th align="center">合计</th>
+          <th v-for="(item,index) in columns" :key="index">{{ item }}</th>
         </tr>
       </thead>
       <tbody>
-        <tr>
-          <td rowspan="12" width="150" align="center" valign="center">品牌</td>
-          <td width="250">年度目标</td>
-          <td align="right">141,150,000.00</td>
-          <td align="right">10,850,000.00</td>
-          <td align="right">152,000,000.00</td>
-        </tr>
-        <tr>
-          <td>截止1-2月销售实际完成</td>
-          <td align="right">11,553,506.00</td>
-          <td align="right">3,199,085.00</td>
-          <td align="right">14,752,590.00</td>
-        </tr>
-        <tr>
-          <td>累计3月销售实际截止完成</td>
-          <td align="right">14,863,711.00</td>
-          <td align="right">3,942,037.00</td>
-          <td align="right">18,805,748.00</td>
-        </tr>
-        <tr>
-          <td>年度完成率</td>
-          <td>12%</td>
-          <td>13%</td>
-          <td>12%</td>
-        </tr>
-        <tr>
-          <td>本月目标</td>
-          <td align="right">9,858,800.00</td>
-          <td align="right">2,481,200.00</td>
-          <td align="right">12,340,000.00</td>
-        </tr>
-        <tr>
-          <td>本月实际销售</td>
-          <td align="right">3,314,024.00</td>
-          <td align="right">743,977.00</td>
-          <td align="right">4,058,001.00</td>
-        </tr>
-        <tr>
-          <td>本月销售实际退货</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>本月销售实际完成</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>本月达成率</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>预估订单</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>预估完成</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>离目标差额</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td rowspan="12" width="100" align="center" valign="center">轮胎</td>
-          <td>年度目标</td>
-          <td align="right">141,150,000.00</td>
-          <td align="right">10,850,000.00</td>
-          <td align="right">152,000,000.00</td>
-        </tr>
-        <tr>
-          <td>截止1-2月销售实际完成</td>
-          <td align="right">11,553,506.00</td>
-          <td align="right">3,199,085.00</td>
-          <td align="right">14,752,590.00</td>
-        </tr>
-        <tr>
-          <td>累计3月销售实际截止完成</td>
-          <td align="right">14,863,711.00</td>
-          <td align="right">3,942,037.00</td>
-          <td align="right">18,805,748.00</td>
-        </tr>
-        <tr>
-          <td>年度完成率</td>
-          <td>12%</td>
-          <td>13%</td>
-          <td>12%</td>
-        </tr>
-        <tr>
-          <td>本月目标</td>
-          <td align="right">9,858,800.00</td>
-          <td align="right">2,481,200.00</td>
-          <td align="right">12,340,000.00</td>
-        </tr>
-        <tr>
-          <td>本月实际销售</td>
-          <td align="right">3,314,024.00</td>
-          <td align="right">743,977.00</td>
-          <td align="right">4,058,001.00</td>
-        </tr>
-        <tr>
-          <td>本月销售实际退货</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>本月销售实际完成</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>本月达成率</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>预估订单</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>预估完成</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>离目标差额</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td rowspan="2" width="100" align="center" valign="center">品牌+轮胎</td>
-          <td>本月实际销售额</td>
-          <td align="right">141,150,000.00</td>
-          <td align="right">10,850,000.00</td>
-          <td align="right">152,000,000.00</td>
-        </tr>
-        <tr>
-          <td>本月预估完成</td>
-          <td align="right">11,553,506.00</td>
-          <td align="right">3,199,085.00</td>
-          <td align="right">14,752,590.00</td>
+        <tr v-for="item in list" :key="item.key">
+          <td
+            v-for="cols in columns.length"
+            :key="cols+'td'"
+            :width="cols==2?350:150"
+            v-if="item['col'+cols]!==''"
+            :rowspan="hasRowspan(item['col'+cols])[1]"
+            :align="typeof item['col'+cols] == 'number' ? (hasRate(item)&&cols>2?'center':'right'):'center'"
+            :class="item.key=='currRealFinish'||item.key=='currRealTireFinish'?'red':''"
+          >
+            {{ hasRowspan(item['col'+cols])[1] ? hasRowspan(item['col'+cols])[0] : item['col'+cols] }}{{ hasRate(item)&&cols>2?'%':'' }}
+          </td>
         </tr>
       </tbody>
     </table>
+    <div v-else class="noData">
+      暂无数据,请点击查询
+    </div>
   </div>
 </template>
 
@@ -184,9 +37,95 @@ export default {
     tableData: {
       type: Array,
       default: () => []
+    },
+    month: {
+      type: String,
+      default: () => ''
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    nowDate: {
+      type: String,
+      default: () => ''
+    }
+  },
+  computed: {
+    months () {
+      return this.month.split('-')[1]
+    },
+    list () {
+      const rets = []
+      const row1 = [
+        '年度目标|yearTarget',
+        '截止1-' + (this.months - 1) + '月销售实际完成|histSalesReal',
+        '累计' + this.months + '月销售实际截止完成|accuSalesReal',
+        '年度完成率|yearTargetRate',
+        '本月目标|currTarget',
+        '本月实际销售|currSalesReal',
+        '本月销售实际退货|currReturnReal',
+        '本月销售实际完成|currRealFinish',
+        '本月达成率|currTargetRate',
+        '预估订单|currExpect',
+        '预估完成|currExpectFinish',
+        '离目标差额|currTargetDiff'
+      ]
+      const row2 = [
+        '年度目标|yearTargetTire',
+        '截止1-' + (this.months - 1) + '月销售实际完成条数|histSalesRealTireNum',
+        '截止1-' + (this.months - 1) + '月销售实际完成销售额|histSalesRealTireAmount',
+        '截止' + this.months + '月销售实际完成条数|accuSalesRealTireNum',
+        '累计' + this.months + '月销售实际截止完成|accuSalesRealTireAmount',
+        '年度完成率|yearTargetTireRate',
+        '本月目标条数|currTargetTireNum',
+        '本月销售条数|currSalesTireNum',
+        '本月达成率|currTargetTireRate',
+        '本月实际销售|currSalesTireReal',
+        '本月销售实际退货|currReturnTireReal',
+        '本月销售实际完成|currRealTireFinish',
+        '预估订单|currExpectTire',
+        '预估完成|currExpectTireFinish',
+        '离目标差额|currTargetTireDiff'
+      ]
+      const row3 = ['本月实际销售额|totalCurrRealFinish', '本月预估完成|totalCurrExpectFinish']
+      const getRows = function (row, arr, name) {
+        row.forEach((item, i) => {
+          const nameArr = item.split('|')
+          if (i == 0) {
+            arr.push({ col1: name + 'rowspan' + row.length, col2: nameArr[0], key: nameArr[1] })
+          } else {
+            arr.push({ col1: '', col2: nameArr[0], key: nameArr[1] })
+          }
+        })
+      }
+      // 品牌
+      getRows(row1, rets, '品牌')
+      // 轮胎
+      getRows(row2, rets, '轮胎')
+      // 品牌+轮胎
+      getRows(row3, rets, '品牌+轮胎')
+      // 循环列
+      rets.forEach(item => {
+        this.tableData.forEach((cols, i) => {
+          for (const key in cols) {
+            if (key === item.key) {
+              item['col' + (i + 3)] = cols[key]
+            }
+          }
+        })
+      })
+      return rets
     }
   },
   methods: {
+    hasRowspan (row) {
+      console.log(row && row.toString().split('rowspan')[1])
+      return row && row.toString().split('rowspan')
+    },
+    hasRate (row) {
+      return ['yearTargetRate', 'currTargetRate', 'yearTargetTireRate', 'currTargetTireRate'].includes(row.key)
+    },
     getTable () {
       return document.getElementById('day-table-0')
     }
@@ -203,18 +142,29 @@ export default {
     max-width: 1024px;
     text-align: center;
   }
+  .noData{
+    width: 100%;
+    text-align: center;
+    font-size: 16px;
+    color: #999;
+    min-height: 300px;
+    line-height: 300px;
+  }
   .table-box{
     width: 100%;
     max-width: 1024px;
     font-size: 14px;
+    .red{
+      color: red;
+    }
     tr > th{
       padding: 6px 8px;
-      border: 1px solid #eee;
+      border: 1px solid #dedede;
       text-align: center;
     }
     tr > td{
       padding: 5px;
-      border: 1px solid #eee;
+      border: 1px solid #dedede;
     }
     tr{
       &:hover{

+ 6 - 6
src/views/reportData/dailyReport/table1.vue

@@ -3,7 +3,7 @@
     <!-- 项目销售日报 -->
     <h2 class="table-title" v-if="tableData.length">{{ month.replace('-','年')+'月' }} 项目销售日报(截止{{ nowDate }})</h2>
     <table class="table-box" id="day-table-1" v-if="tableData.length">
-      <thead>
+      <thead class="ant-table-thead">
         <tr>
           <th v-for="item in columns" :key="item">{{ item }}</th>
         </tr>
@@ -31,7 +31,7 @@
 
 <script>
 export default {
-  name: 'Table0',
+  name: 'Table1',
   props: {
     tableData: {
       type: Array,
@@ -91,8 +91,8 @@ export default {
     text-align: center;
     font-size: 16px;
     color: #999;
-    min-height: 100px;
-    line-height: 100px;
+    min-height: 300px;
+    line-height: 300px;
   }
   .table-box{
     width: 100%;
@@ -103,12 +103,12 @@ export default {
     }
     tr > th{
       padding: 6px 8px;
-      border: 1px solid #eee;
+      border: 1px solid #dedede;
       text-align: center;
     }
     tr > td{
       padding: 5px;
-      border: 1px solid #eee;
+      border: 1px solid #dedede;
     }
     tr{
       &:hover{

+ 7 - 7
src/views/reportData/dailyReport/table2.vue

@@ -4,14 +4,14 @@
       <!-- 全国销售日报 -->
       <h2 class="table-title">{{ month.replace('-','年')+'月' }}全国销售日报2(截止{{ nowDate }})</h2>
       <table class="table-box" id="day-table-2" >
-        <thead>
+        <thead class="ant-table-thead">
           <tr>
             <th v-for="item in cloumns" :key="item">{{ item }}</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="(item,index) in list" :key="index">
-            <td width="150" align="center">{{ item.proName }}</td>
+            <td align="center">{{ item.proName }}</td>
             <td align="center">{{ item.userName }}</td>
             <td align="center">{{ item.bymb }}</td>
             <td align="center">{{ item.amount }}</td>
@@ -28,7 +28,7 @@
 
 <script>
 export default {
-  name: 'Table0',
+  name: 'Table2',
   props: {
     tableData: {
       type: Array,
@@ -74,8 +74,8 @@ export default {
     text-align: center;
     font-size: 16px;
     color: #999;
-    min-height: 100px;
-    line-height: 100px;
+    min-height: 300px;
+    line-height: 300px;
   }
   .table-box{
     width: 100%;
@@ -86,12 +86,12 @@ export default {
     }
     tr > th{
       padding: 6px 8px;
-      border: 1px solid #eee;
+      border: 1px solid #dedede;
       text-align: center;
     }
     tr > td{
       padding: 5px;
-      border: 1px solid #eee;
+      border: 1px solid #dedede;
     }
     tr{
       &:hover{

+ 196 - 173
src/views/reportData/dailyReport/table3.vue

@@ -1,192 +1,202 @@
 <template>
   <div>
-    <!-- 全国销售日报 -->
-    <h2 class="table-title">2025年3月 全国销售日报(截止22日17点30分)</h2>
-    <table class="table-box">
-      <thead>
-        <tr>
-          <th></th>
-          <th></th>
-          <th>销售额</th>
-          <th>东莞服务中心</th>
-          <th>合计</th>
+    <!-- 分区销售日报 -->
+    <h2 class="table-title" v-if="tableData.length">{{ month.replace('-','年')+'月' }} 分区销售日报(截止{{ nowDate }})</h2>
+    <table class="table-box" id="day-table-3" v-if="tableData.length">
+      <colgroup><col><col><col><col><col><col><col><col><col><col><col><col><col><col><col></colgroup>
+      <thead class="ant-table-thead">
+        <tr>
+          <th key="managerNameList" rowspan="2" style="text-align: center;">
+            <span class="ant-table-header-column"><div><span class="ant-table-column-title">区域负责人</span><span class="ant-table-column-sorter"></span></div></span>
+          </th>
+          <th key="subareaName" rowspan="2" style="text-align: center;">
+            <span class="ant-table-header-column"><div><span class="ant-table-column-title">分区</span><span class="ant-table-column-sorter"></span></div></span>
+          </th>
+          <th key="2" colspan="8" class="ant-table-align-center" style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">品牌</span><span class="ant-table-column-sorter"></span></div></span></th>
+          <th key="3" colspan="4" class="ant-table-align-center" style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">轮胎</span><span class="ant-table-column-sorter"></span></div></span></th>
+          <th key="4" colspan="1" class="ant-table-align-center ant-table-row-cell-last" style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">品牌+轮胎</span><span class="ant-table-column-sorter"></span></div></span></th>
+        </tr>
+        <tr>
+          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">年度目标</span><span class="ant-table-column-sorter"></span></div></span></th>
+          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">截止1-4月完成</span><span class="ant-table-column-sorter"></span></div></span></th>
+          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">5月销售额截止达成</span><span class="ant-table-column-sorter"></span></div></span></th>
+          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">累计5月截止完成</span><span class="ant-table-column-sorter"></span></div></span></th>
+          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title red">年度完成率</span><span class="ant-table-column-sorter"></span></div></span></th>
+          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">5月业绩目标</span><span class="ant-table-column-sorter"></span></div></span></th>
+          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title red">达成率</span><span class="ant-table-column-sorter"></span></div></span></th>
+          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">今日销售额</span><span class="ant-table-column-sorter"></span></div></span></th>
+          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">截止1-4月销售额</span><span class="ant-table-column-sorter"></span></div></span></th>
+          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">5月销售额截止达成</span><span class="ant-table-column-sorter"></span></div></span></th>
+          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">累计5月截止完成</span><span class="ant-table-column-sorter"></span></div></span></th>
+          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">今日销售额</span><span class="ant-table-column-sorter"></span></div></span></th>
+          <th class="ant-table-align-center ant-table-row-cell-break-word ant-table-row-cell-last" style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">5月销售额截止达成</span><span class="ant-table-column-sorter"></span></div></span></th>
         </tr>
       </thead>
       <tbody>
-        <tr>
-          <td rowspan="12" width="150" align="center">品牌</td>
-          <td width="250">年度目标</td>
-          <td align="right">141,150,000.00</td>
-          <td align="right">10,850,000.00</td>
-          <td align="right">152,000,000.00</td>
-        </tr>
-        <tr>
-          <td>截止1-2月销售实际完成</td>
-          <td align="right">11,553,506.00</td>
-          <td align="right">3,199,085.00</td>
-          <td align="right">14,752,590.00</td>
-        </tr>
-        <tr>
-          <td>累计3月销售实际截止完成</td>
-          <td align="right">14,863,711.00</td>
-          <td align="right">3,942,037.00</td>
-          <td align="right">18,805,748.00</td>
-        </tr>
-        <tr>
-          <td>年度完成率</td>
-          <td>12%</td>
-          <td>13%</td>
-          <td>12%</td>
-        </tr>
-        <tr>
-          <td>本月目标</td>
-          <td align="right">9,858,800.00</td>
-          <td align="right">2,481,200.00</td>
-          <td align="right">12,340,000.00</td>
-        </tr>
-        <tr>
-          <td>本月实际销售</td>
-          <td align="right">3,314,024.00</td>
-          <td align="right">743,977.00</td>
-          <td align="right">4,058,001.00</td>
-        </tr>
-        <tr>
-          <td>本月销售实际退货</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>本月销售实际完成</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>本月达成率</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>预估订单</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>预估完成</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>离目标差额</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td rowspan="12" width="100" align="center">轮胎</td>
-          <td>年度目标</td>
-          <td align="right">141,150,000.00</td>
-          <td align="right">10,850,000.00</td>
-          <td align="right">152,000,000.00</td>
-        </tr>
-        <tr>
-          <td>截止1-2月销售实际完成</td>
-          <td align="right">11,553,506.00</td>
-          <td align="right">3,199,085.00</td>
-          <td align="right">14,752,590.00</td>
-        </tr>
-        <tr>
-          <td>累计3月销售实际截止完成</td>
-          <td align="right">14,863,711.00</td>
-          <td align="right">3,942,037.00</td>
-          <td align="right">18,805,748.00</td>
-        </tr>
-        <tr>
-          <td>年度完成率</td>
-          <td>12%</td>
-          <td>13%</td>
-          <td>12%</td>
-        </tr>
-        <tr>
-          <td>本月目标</td>
-          <td align="right">9,858,800.00</td>
-          <td align="right">2,481,200.00</td>
-          <td align="right">12,340,000.00</td>
-        </tr>
-        <tr>
-          <td>本月实际销售</td>
-          <td align="right">3,314,024.00</td>
-          <td align="right">743,977.00</td>
-          <td align="right">4,058,001.00</td>
-        </tr>
-        <tr>
-          <td>本月销售实际退货</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>本月销售实际完成</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>本月达成率</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>预估订单</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>预估完成</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td>离目标差额</td>
-          <td align="right">3,818.00</td>
-          <td align="right">1,025.00</td>
-          <td align="right">4,843.00</td>
-        </tr>
-        <tr>
-          <td rowspan="2" width="100" align="center">品牌+轮胎</td>
-          <td>本月实际销售额</td>
-          <td align="right">141,150,000.00</td>
-          <td align="right">10,850,000.00</td>
-          <td align="right">152,000,000.00</td>
-        </tr>
-        <tr>
-          <td>本月预估完成</td>
-          <td align="right">11,553,506.00</td>
-          <td align="right">3,199,085.00</td>
-          <td align="right">14,752,590.00</td>
+        <tr v-for="(item, index) in list" :key="index">
+          <td
+            v-for="(sitem,si) in columns"
+            :key="sitem.dataIndex+index"
+            :class="sitem.title.indexOf('率')>=0?'red '+(hjRow.indexOf(index)>=0?'hj':''):(hjRow.indexOf(index)>=0?'hj':'')"
+            style="text-align: center;"
+            v-if="!(index==list.length-1&&si==0)"
+            :colspan="index==list.length-1&&si==1?2:1"
+            :style="index==list.length-1?'color: red;font-weight:bold;background:#dfdeff;border-color:#c7c7ff;':''"
+          >
+            {{ item[sitem.dataIndex].toString() }}{{ sitem.title.indexOf('率')>=0?'%':'' }}
+          </td>
         </tr>
       </tbody>
     </table>
+    <div v-else class="noData">
+      暂无数据,请点击查询
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'Table0',
+  name: 'Table3',
   props: {
     tableData: {
       type: Array,
       default: () => []
+    },
+    month: {
+      type: String,
+      default: () => ''
+    },
+    nowDate: {
+      type: String,
+      default: () => ''
+    }
+  },
+  watch: {
+    tableData: {
+      handler (val) {
+        this.$nextTick(() => {
+          this.tableHeight = window.innerHeight - 360
+        })
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.tableHeight = window.innerHeight - 360
+    })
+  },
+  data () {
+    return {
+      tableHeight: 300
+    }
+  },
+  computed: {
+    list () {
+      return this.tableData
+    },
+    hjRow () {
+      const ret = []
+      this.list.forEach((item, index) => {
+        if (item.subareaName.indexOf('合计') >= 0 || item.subareaName.indexOf('云南省') >= 0) {
+          ret.push(index)
+        }
+      })
+      return ret
+    },
+    months () {
+      return this.month.split('-')[1]
+    },
+    columns () {
+      return [
+        {
+          title: '区域负责人',
+          dataIndex: 'managerNameList',
+          align: 'center',
+          width: '250'
+        },
+        {
+          title: '分区',
+          dataIndex: 'subareaName',
+          align: 'center',
+          width: '250'
+        },
+        {
+          title: '年度目标',
+          dataIndex: 'yearTarget',
+          align: 'center',
+          width: '100'
+        },
+        {
+          title: '截止1-' + (this.months[1] - 1) + '月完成',
+          dataIndex: 'histSalesReal',
+          align: 'center',
+          width: '100'
+        }, {
+          title: this.months[1] + '月销售额截止达成',
+          dataIndex: 'currSalesReal',
+          align: 'center',
+          width: '130'
+        }, {
+          title: '累计' + this.months[1] + '月截止完成',
+          dataIndex: 'accuSalesReal',
+          align: 'center',
+          width: '100'
+        }, {
+          title: '年度完成率',
+          dataIndex: 'yearTargetRate',
+          align: 'center',
+          width: '100'
+        }, {
+          title: this.months[1] + '月业绩目标',
+          dataIndex: 'currTarget',
+          align: 'center',
+          width: '100'
+        }, {
+          title: '达成率',
+          dataIndex: 'currTargetRate',
+          align: 'center',
+          width: '100'
+        }, {
+          title: '今日销售额',
+          dataIndex: 'todaySalesReal',
+          align: 'center',
+          width: '100'
+        },
+        {
+          title: '截止1-' + (this.months[1] - 1) + '月销售额',
+          dataIndex: 'histSalesRealTireAmount',
+          align: 'center',
+          width: '100'
+        }, {
+          title: this.months[1] + '月销售额截止达成',
+          dataIndex: 'currSalesTireReal',
+          align: 'center',
+          width: '130'
+        }, {
+          title: '累计' + this.months[1] + '月截止完成',
+          dataIndex: 'accuSalesRealTireAmount',
+          align: 'center',
+          width: '100'
+        }, {
+          title: '今日销售额',
+          dataIndex: 'todaySalesTireReal',
+          align: 'center',
+          width: '100'
+        },
+        {
+          title: this.months[1] + '月销售额截止达成',
+          dataIndex: 'totalCurrSalesTireReal',
+          align: 'center',
+          width: '130'
+        }
+      ]
     }
   },
   methods: {
+    getTable () {
+      return document.getElementById('day-table-3')
+    }
   }
 }
 </script>
@@ -197,21 +207,34 @@ export default {
     font-size: 16px;
     font-weight: bold;
     width: 100%;
-    max-width: 1024px;
     text-align: center;
   }
+  .noData{
+    width: 100%;
+    text-align: center;
+    font-size: 16px;
+    color: #999;
+    min-height: 300px;
+    line-height: 300px;
+  }
   .table-box{
     width: 100%;
-    max-width: 1024px;
     font-size: 14px;
     tr > th{
       padding: 6px 8px;
-      border: 1px solid #eee;
+      border: 1px solid #dedede;
       text-align: center;
     }
+    .red{
+      color: red;
+    }
+    .hj{
+      font-weight: bold;
+      background-color: #f4f5ff;
+    }
     tr > td{
       padding: 5px;
-      border: 1px solid #eee;
+      border: 1px solid #dedede;
     }
     tr{
       &:hover{