预测版本列表修改分页显示条数

Reviewed-on: http://101.201.121.115:3000/leo/LAPP_AdvancedPlanner_Front/pulls/202

src/router/plan.js

@@ -60,6 +60,12 @@ const plant = {
 					title: "预测版本",
 					component: () => import("@/views/plan/workbench/predictVersion"),
 				},
+				{
+					icon: "el-icon-document",
+					path: "/plan/workbench/predictionDeviation",
+					title: "预测偏差",
+					component: () => import("@/views/plan/workbench/predictionDeviation"),
+				},
 			]
 		},
 	],

src/views/factoryModel/part/material/index.vue

@@ -187,6 +187,7 @@ export default {
         "Article-ArtSpec3",
         "Article-ArtSpec4",
         "Article-ArtSpec5",
+        "Article-ArtSize2",
         // "Article-ArtTypeId",
         // "Article-CustArtId",
         // "Article-AlternativeArtId",

src/views/plan/workbench/homePage/beta/predict/index.vue

@@ -25,7 +25,7 @@
       >
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column
-        v-for="(item,index) in headers"
+          v-for="(item) in headers"
           :key="item"
           :width="getRowWidth(item)"
           :label="getColumnName(item)"
@@ -129,9 +129,9 @@ export default {
       pagination: {
         // 分页参数
         pageNumber: 1,
-        pageSize: 10,
+        pageSize: 200,
         total: 0,
-        pageSizes: [10, 50, 100, 200],
+        pageSizes: [200, 300, 500, 1000],
       },
       batchImport: [],
       // isRefreshList: false,

src/views/plan/workbench/homePage/formal/analysis/commonLineChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="height:250px;width:100%;margin-top: 30px;" />
+  <div style="height:calc(100% - 5px);width:100%;margin-top: 0px;" />
 </template>
 
 <script>
@@ -40,7 +40,7 @@ export default {
         this.xDataArray = []
         this.seriesArray = []
 				if (newValue.length > 0) {
-					this.xDataArray = newValue[0].SortKeys
+					this.xDataArray = newValue[0].SortKeys || []
 					this.maxValue = newValue[0].PeriodOnPeriodUpperLimit
 					this.minValue = newValue[0].PeriodOverPeriodLowerLimit
 				}
@@ -93,11 +93,43 @@ export default {
       this.chart = echarts.init(this.$el, 'macarons')
       this.chart.setOption({
         color: ['#126db9'],
+        dataZoom: [
+          {
+            // start: 0,//默认为0
+            // end: 100,//默认为100
+            type: 'slider',
+            show: true,
+            // xAxisIndex: [0],
+            handleSize: 0,//滑动条的 左右2个滑动条的大小
+            startValue: 0, // 初始显示值
+            endValue: 30, // 结束显示值
+            height: 10,//组件高度
+            left: '5%', //左边的距离
+            right: '5%',//右边的距离
+            bottom: 10,//底边的距离
+            borderColor: "#000",
+            fillerColor: '#269cdb',
+            borderRadius: 5,
+            backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
+            showDataShadow: false,//是否显示数据阴影 默认auto
+            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
+            realtime: false, //是否实时更新
+            filterMode: 'filter',
+          },
+          //下面这个属性是里面拖到
+          {
+            type: 'inside',
+            show: true,
+            // xAxisIndex: [0],
+            start: 1,//默认为1
+            end: 10,//默认为100
+          },
+        ],
         grid: {
           top: '10%',
           left: '5%',
-          right: '0%',
-          bottom: '0%',
+          right: '5%',
+          bottom: '15%',
           containLabel: true
         },
         legend: {

src/views/plan/workbench/homePage/formal/analysis/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="formal-analysis-container">
-		<el-row>
+		<el-row style="height: 100%;">
 			<el-col :span="4">
 				<div class="formal-search-wrap">
 					<el-form class="clearfix">
@@ -59,7 +59,15 @@
 					</el-table>
 				</div>
 			</el-col>
-			<el-col :span="allTheSingle === '2' ? 9 : 11">
+			<el-col :span="allTheSingle === '2' ? 16 : 20" style="height: 100%;">
+				<div class="analysis-chart-wrapper">
+					<CommonLineChart :dataList="dataList.PerCustomerDeviationDetailItem|| []" />
+				</div>
+				<div class="analysis-chart-wrapper" style="margin-top: 30px;">
+					<LineBarChart :dataList="dataList.CustomerDeviationDetailItem || []" />
+				</div>
+			</el-col>
+			<!-- <el-col :span="allTheSingle === '2' ? 9 : 11">
 				<div class="">
 					<CommonLineChart :dataList="dataList.PerCustomerDeviationDetailItem|| []" />
 				</div>
@@ -68,7 +76,7 @@
 				<div class="">
 					<LineBarChart :dataList="dataList.CustomerDeviationDetailItem || []" />
 				</div>
-			</el-col>
+			</el-col> -->
 		</el-row>
 	</div>
 </template>
@@ -218,5 +226,11 @@ export default {
 	.parts-table {
 		width: 100%;
 	}
+	.analysis-chart-wrapper {
+		width: 100%;
+		overflow-x: auto;
+		height: calc(50% - 15px);
+		min-height: 160px;
+	}
 }
 </style>

src/views/plan/workbench/homePage/formal/analysis/lineBarChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="height:250px;width:100%;margin-top:30px;" />
+  <div style="height:calc(100% - 5px);width:100%;" />
 </template>
 
 <script>
@@ -74,6 +74,38 @@ export default {
 						color: '#fff'
 					}
 				},
+        dataZoom: [
+          {
+            // start: 0,//默认为0
+            // end: 100,//默认为100
+            type: 'slider',
+            show: true,
+            // xAxisIndex: [0],
+            handleSize: 0,//滑动条的 左右2个滑动条的大小
+            startValue: 0, // 初始显示值
+            endValue: 30, // 结束显示值
+            height: 10,//组件高度
+            left: '5%', //左边的距离
+            right: '5%',//右边的距离
+            bottom: 10,//底边的距离
+            borderColor: "#000",
+            fillerColor: '#269cdb',
+            borderRadius: 5,
+            backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
+            showDataShadow: false,//是否显示数据阴影 默认auto
+            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
+            realtime: true, //是否实时更新
+            filterMode: 'filter',
+          },
+          //下面这个属性是里面拖到
+          {
+            type: 'inside',
+            show: true,
+            // xAxisIndex: [0],
+            start: 1,//默认为1
+            end: 100,//默认为100
+          },
+        ],
         color: ['#126db9'],
         legend: {
           data: this.seriesArray.map(e=>e.name)
@@ -81,8 +113,8 @@ export default {
         grid: {
           top: '10%',
           left: '5%',
-          right: '0%',
-          bottom: '0%',
+          right: '5%',
+          bottom: '15%',
           containLabel: true
         },
         xAxis: {

src/views/plan/workbench/lookError/index.vue

@@ -41,7 +41,7 @@
            @header-dragend="(newWidth, oldWidth, column)=>saveRowWidth(column, newWidth)"
           :height="tableHeight">
         <el-table-column  
-        v-for="(item,index) in headers"
+          v-for="(item) in headers"
           :key="item"
           :width="getRowWidth(item)"
             :label="getColumnName(item)"

src/views/plan/workbench/predictVersion/index.vue

@@ -1,113 +1,360 @@
 <template>
-  <div ref="tableRef"
-      class="table-height-wrap">
+  <div ref="tableRef" class="table-height-wrap predict-version-wrapper">
     <SearchTemplate>
-      <el-form :inline="true"
-          class="clearfix search-content">
-        <el-form-item :label="getColumnName('AP_ErrorDatalst-Id')">
-          <el-input v-model.trim="queryParams.Id"
-              placeholder="请输入查询内容"
-              clearable
-              style="width: 240px" />
+      <el-form :inline="true" class="clearfix search-content">
+        <el-form-item label="版本号" style="margin-bottom: 0">
+          <el-select
+            style="width: 250px"
+            v-model="queryParams.versionId"
+            filterable
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in getSpecifiedVersion"
+              :key="item['AP_CustDemandVerHead-VersionId']"
+              :label="item['AP_CustDemandVerHead-VersionId']"
+              :value="item['AP_CustDemandVerHead-VersionId']"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="客户">
+          <el-select
+            style="width: 250px"
+            v-model="queryParams.customerId"
+            placeholder="请选择"
+            multiple
+            filterable
+            collapse-tags
+            :loading="customerLoading"
+            @visible-change="setCustomerList"
+          >
+            <el-option
+              v-for="item in customerArray"
+              :key="item['Customer-CustomerId']"
+              :label="item['Customer-Name1']"
+              :value="item['Customer-CustomerId']"
+            />
+          </el-select>
         </el-form-item>
-        <el-form-item :label="getColumnName('AP_ErrorDatalst-ErrorStatus')">
-          <el-select v-model="queryParams.ErrorStatus"
-              placeholder="请选择">
-            <el-option v-for="item in statusOptions"
-                :key="item['Stdef-StdefTyp']"
-                :label="item['Stdef-Bez']"
-                :value="item['Stdef-StdefTyp']" />
+        <el-form-item label="物料">
+          <el-select
+            style="width: 250px"
+            v-model="queryParams.artId"
+            filterable
+            :loading="artIdLoading"
+            @visible-change="setArtList"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in artList"
+              :key="item['Article-ArtId']"
+              :label="item['Article-ArtId'] + '-' + item['Article-Descr1']"
+              :value="item['Article-ArtId']"
+            />
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button icon="el-icon-search"
-              size="mini"
-              class="search-button-style"
-              @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh"
-              size="mini"
-              class="reset-button-style"
-              @click="resetQuery">重置</el-button>
+          <el-button
+            icon="el-icon-search"
+            size="mini"
+            :disabled="!queryParams.versionId"
+            class="search-button-style"
+            @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button
+            icon="el-icon-refresh"
+            size="mini"
+            class="reset-button-style"
+            @click="resetQuery"
+            >重置</el-button
+          >
+          <el-button
+            icon="el-icon-download"
+            class="add-button-style"
+            @click="handleExport"
+            style="margin-left: 24px"
+            >导出</el-button
+          >
+          <el-button
+            icon="el-icon-download"
+            class="add-button-style"
+            @click="handleNewExport"
+            style="margin-left: 24px;width: 150px;"
+            >导出最新预测偏差</el-button
+          >
         </el-form-item>
       </el-form>
     </SearchTemplate>
     <ContentContainer>
-      <el-table :data="tableData"
-          v-loading="loading"
-          size="mini"
-          style="width: 100%"
-          border
-          v-if="tableHeight"
-           @header-dragend="(newWidth, oldWidth, column)=>saveRowWidth(column, newWidth)"
-          :height="tableHeight">
-        <el-table-column  
-        v-for="(item,index) in headers"
+      <el-table
+        v-if="tableHeight"
+        :height="tableHeight"
+        :data="tableData1"
+        v-loading="loading"
+        size="mini"
+        @header-dragend="
+          (newWidth, oldWidth, column) => saveRowWidth(column, newWidth)
+        "
+        border
+      >
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('AP_CustArtlst-ArtId')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["AP_CustArtlst-ArtId"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('AP_CustArtlst-Descr1')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["AP_CustArtlst-Descr1"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('Article-ArtSize2')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["Article-ArtSize2"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('Customer-CustomerId')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["Customer-CustomerId"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('AP_CustArtlst-CustArtId')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["AP_CustArtlst-CustArtId"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('Customer-FcustId')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["Customer-FcustId"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('Customer-Name1')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["Customer-Name1"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('AP_CustArtlst-LastUser')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["AP_CustArtlst-LastUser"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('User-Name')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["User-Name"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-for="item in headers"
           :key="item"
           :width="getRowWidth(item)"
-            :label="getColumnName(item)"
-            :show-overflow-tooltip="true">
+          :label="getColumnName(item)"
+          :show-overflow-tooltip="true"
+        >
           <template #default="scope">
-            <span>{{ scope.row[item] }}</span>
+            <span>{{ scope.row[item] || 0 }}</span>
           </template>
         </el-table-column>
       </el-table>
       <!-- 分页 -->
-      <Pagination v-show="pagination.total > 0"
-          v-model:pagination="pagination"
-          @change="getList" />
+      <Pagination
+        v-show="pagination.total > 0"
+        v-model:pagination="pagination"
+        @change="getTableList"
+      />
     </ContentContainer>
   </div>
 </template>
 <script>
-  import { ListMixin } from "@/mixins/ListMixin";
-  export default {
-    mixins: [ListMixin],
-    data() {
-      return {
-        statusOptions: [],
-        queryTableDataUrl: "/admin/ap/errordatalst/query",
-        headers: [
-          "AP_ErrorDatalst-Id",
-          "AP_ErrorDatalst-ErrorInfo",
-          "AP_ErrorDatalst-ErrorType",
-          "AP_ErrorDatalst-ErrorStatus",
-          "AP_ErrorDatalst-TargetSource",
-          "AP_ErrorDatalst-LastModify",
-          "AP_ErrorDatalst-LastUser",
-          "AP_ErrorDatalst-CreateTime",
-        ], // 遍历表头
-        tableHeight: 0,
-      };
+import { ListMixin } from "@/mixins/ListMixin";
+import { get } from "@/server/api.js";
+import { getArtIdList } from "@/server/productionPlanning/emergencyOrder";
+export default {
+  mixins: [ListMixin],
+  data() {
+    return {
+      artList: [],
+      customerArray: [],
+      queryTableDataUrl: "/admin/ap/custdemandverhead/selectdetail",
+      headers: [], // 遍历表头
+      tableHeight: 0,
+      artIdLoading: false,
+      customerLoading: false,
+      tableData1: [],
+      getSpecifiedVersion: [],
+    };
+  },
+  methods: {
+    // 查询分页列表
+    getTableList() {
+      this.loading = true;
+      for (let key in this.queryParams) {
+        if (this.queryParams[key] == '') {
+          this.queryParams[key] = undefined
+        }
+      }
+      get(this.queryTableDataUrl, {
+        ...this.pagination,
+        ...this.queryParams,
+        "customerId": this.queryParams.customerId ? this.queryParams.customerId.join(",") : undefined
+      })
+        .then(({ code, data: { count = 0, records: { Data = [], Head = [] } } }) => {
+          if (code === 200) {
+            this.headers = Head || []
+            this.tableData1 = (Data || []).map(el => {
+              return {
+                ...el.Info,
+                ...el.Item
+              }
+            })
+            this.pagination.total = count
+            this.loading = false
+          } else {
+            this.loading = false
+          }
+        })
+        .catch(() => {
+          this.loading = false
+        });
+    },
+    // 物料列表
+    setArtList() {
+      if (this.artList.length > 0) {
+        // 已经有数据了，请求过接口
+      } else {
+        this.artIdLoading = true
+        getArtIdList().then(({ data = [] }) => {
+          this.artIdLoading = false
+          this.artList = data;
+        }).catch(() => {
+          this.artIdLoading = false
+        })
+      }
+    },
+    // 客户列表
+    setCustomerList() {
+      if (this.customerArray.length > 0) {
+        // 已经有数据了，请求过接口
+      } else {
+        this.customerLoading = true
+        get('/admin/base/customer/customerlst').then(({ data = [] }) => {
+          this.customerLoading = false
+          this.customerArray = data
+        }).catch(() => {
+          this.customerLoading = false
+        })
+      }
+    },
+    // 搜索按钮操作
+    handleQuery() {
+      this.pagination.pageNumber = 1;
+      this.getTableList();
+    },
+    // 重置按钮操作
+    resetQuery() {
+      this.queryParams.customerId = [];
+      this.queryParams.versionId = '';
+      this.queryParams.artId = '';
+      this.handleQuery();
     },
-    methods: {
-      // 搜索按钮操作
-      handleQuery() {
-        this.pagination.pageNumber = 1;
-        this.getList();
-      },
-      // 重置按钮操作
-      resetQuery() {
-        this.queryParams.Id = undefined;
-        this.handleQuery();
-      },
+    // 根据客户查询版本
+    getVersionOfCustom() {
+      get(`/admin/ap/custdemandverhead/selectuinquelist`).then(({ code, data }) => {
+        if (code === 200) {
+          this.getSpecifiedVersion = data
+        }
+      })
     },
-    mounted() {
-      this.getStanderOne({ statid: 'AP_ErrorDatalst-ErrorStatus' }).then((res) => {
-        this.statusOptions = res.data
+    // 导出
+    handleExport() {
+      for (let key in this.queryParams) {
+        if (this.queryParams[key] == '') {
+          this.queryParams[key] = undefined
+        }
+      }
+      get(`/admin/ap/custdemandverhead/selectdetailExcel`, {
+        ...this.queryParams,
+        "customerId": this.queryParams.customerId ? this.queryParams.customerId.join(",") : undefined
+      }).then(res => {
+        let link = document.createElement('a');
+        link.style.display = 'none';
+        link.href = (process.env.VUE_APP_BASE_URL || "http://101.201.121.115:9003/") + res.data;
+        link.setAttribute('download', '预测版本.xlsx');
+        document.body.appendChild(link);
+        link.click();
       })
-      this.$nextTick(() => {
-        this.tableHeight = this.calculationTableHeight(
-          this.$refs.tableRef,
-          120
-        );
+    },
+    // 导出最新预测偏差
+    handleNewExport() {
+      for (let key in this.queryParams) {
+        if (this.queryParams[key] == '' || key == 'versionId') {
+          this.queryParams[key] = undefined
+        }
+      }
+      get(`/admin/ap/custdemandverhead/difference`, {
+        ...this.queryParams,
+        "customerId": this.queryParams.customerId ? this.queryParams.customerId.join(",") : undefined
+      }).then(res => {
+        let link = document.createElement('a');
+        link.style.display = 'none';
+        link.href = (process.env.VUE_APP_BASE_URL || "http://101.201.121.115:9003/") + res.data;
+        link.setAttribute('download', '最新预测偏差.xlsx');
+        document.body.appendChild(link);
+        link.click();
       })
-    }
-  };
-</script>
-<style lang="less"
-    scoped>
-  .table-height-wrap {
-    height: 100%;
-    overflow: hidden;
+    },
+  },
+  created() {
+    this.getVersionOfCustom()
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.tableHeight = this.calculationTableHeight(
+        this.$refs.tableRef,
+        120
+      );
+    })
   }
+};
+</script>
+<style lang="less" scoped>
+.predict-version-wrapper {
+  height: 100%;
+  overflow: hidden;
+}
 </style>

src/views/plan/workbench/predictionDeviation/index.vue

@@ -0,0 +1,348 @@
+<template>
+  <div ref="tableRef" class="table-height-wrap predict-deviation-wrapper">
+    <SearchTemplate>
+      <el-form :inline="true" class="clearfix search-content">
+        <el-form-item label="版本号" style="margin-bottom: 0">
+          <el-select
+            style="width: 200px"
+            v-model="queryParams.versionId"
+            filterable
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in getSpecifiedVersion"
+              :key="item['AP_CustDemandVerHead-VersionId']"
+              :label="item['AP_CustDemandVerHead-VersionId']"
+              :value="item['AP_CustDemandVerHead-VersionId']"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="版本号2" style="margin-bottom: 0">
+          <el-select
+            style="width: 200px"
+            v-model="queryParams.versionIdTwo"
+            filterable
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in getSpecifiedVersion"
+              :key="item['AP_CustDemandVerHead-VersionId']"
+              :label="item['AP_CustDemandVerHead-VersionId']"
+              :value="item['AP_CustDemandVerHead-VersionId']"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="客户">
+          <el-select
+            style="width: 200px"
+            v-model="queryParams.customerId"
+            placeholder="请选择"
+            multiple
+            filterable
+            collapse-tags
+            :loading="customerLoading"
+            @visible-change="setCustomerList"
+          >
+            <el-option
+              v-for="item in customerArray"
+              :key="item['Customer-CustomerId']"
+              :label="item['Customer-Name1']"
+              :value="item['Customer-CustomerId']"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="物料">
+          <el-select
+            style="width: 200px"
+            v-model="queryParams.artId"
+            filterable
+            :loading="artIdLoading"
+            @visible-change="setArtList"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in artList"
+              :key="item['Article-ArtId']"
+              :label="item['Article-ArtId'] + '-' + item['Article-Descr1']"
+              :value="item['Article-ArtId']"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            icon="el-icon-search"
+            size="mini"
+            :disabled="!queryParams.versionId || !queryParams.versionIdTwo"
+            class="search-button-style"
+            @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button
+            icon="el-icon-refresh"
+            size="mini"
+            class="reset-button-style"
+            @click="resetQuery"
+            >重置</el-button
+          >
+          <el-button
+            icon="el-icon-download"
+            class="add-button-style"
+            @click="handleNewExport"
+            style="margin-left: 24px;width: 150px;"
+            >导出最新预测偏差</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </SearchTemplate>
+    <ContentContainer>
+      <el-table
+        v-if="tableHeight"
+        :height="tableHeight"
+        :data="tableData1"
+        v-loading="loading"
+        size="mini"
+        @header-dragend="
+          (newWidth, oldWidth, column) => saveRowWidth(column, newWidth)
+        "
+        border
+        :span-method="objectSpanMethod"
+      >
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('AP_CustArtlst-ArtId')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["AP_CustArtlst-ArtId"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('AP_CustArtlst-Descr1')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["AP_CustArtlst-Descr1"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('Customer-CustomerId')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["Customer-CustomerId"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('Customer-Name1')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["Customer-Name1"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('AP_CustArtlst-LastUser')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["AP_CustArtlst-LastUser"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          :label="getColumnName('User-Name')"
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["User-Name"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          align="center"
+        >
+          <template #default="scope">
+            {{ scope.row["title"] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-for="item in headers"
+          :key="item"
+          :width="getRowWidth(item)"
+          :label="getColumnName(item)"
+          :show-overflow-tooltip="true"
+        >
+          <template #default="scope">
+            <span>{{ scope.row[item] || 0 }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        v-show="pagination.total > 0"
+        v-model:pagination="pagination"
+        @change="getTableList"
+      />
+    </ContentContainer>
+  </div>
+</template>
+<script>
+import { ListMixin } from "@/mixins/ListMixin";
+import { get } from "@/server/api.js";
+import { getArtIdList } from "@/server/productionPlanning/emergencyOrder";
+export default {
+  mixins: [ListMixin],
+  data() {
+    return {
+      artList: [],
+      customerArray: [],
+      queryTableDataUrl: "/admin/ap/custdemandverhead/differencepage",
+      headers: [], // 遍历表头
+      tableHeight: 0,
+      artIdLoading: false,
+      customerLoading: false,
+      tableData1: [],
+      getSpecifiedVersion: [],
+    };
+  },
+  methods: {
+    // 合并单元格
+		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex < 6) {
+        if (rowIndex % row.row === 0) {
+          return {
+            rowspan: row.row,
+            colspan: 1,
+          }
+        } else {	
+          return {
+            rowspan: 0,
+            colspan: 0,
+          }
+        }
+      }
+    },
+    // 查询分页列表
+    getTableList() {
+      this.loading = true;
+      for (let key in this.queryParams) {
+        if (this.queryParams[key] == '') {
+          this.queryParams[key] = undefined
+        }
+      }
+      get(this.queryTableDataUrl, {
+        ...this.pagination,
+        ...this.queryParams,
+        "customerId": this.queryParams.customerId ? this.queryParams.customerId.join(",") : undefined
+      })
+        .then(({ code, data: { count = 0, records: { Data = [], Head = [] } } }) => {
+          if (code === 200) {
+            this.headers = Head || []
+            this.tableData1 = (Data || []).map(el => {
+              return {
+                ...el,
+                ...el.item
+              }
+            })
+            this.pagination.total = count
+            this.loading = false
+          } else {
+            this.loading = false
+          }
+        })
+        .catch(() => {
+          this.loading = false
+        });
+    },
+    // 物料列表
+    setArtList() {
+      if (this.artList.length > 0) {
+        // 已经有数据了，请求过接口
+      } else {
+        this.artIdLoading = true
+        getArtIdList().then(({ data = [] }) => {
+          this.artIdLoading = false
+          this.artList = data;
+        }).catch(() => {
+          this.artIdLoading = false
+        })
+      }
+    },
+    // 客户列表
+    setCustomerList() {
+      if (this.customerArray.length > 0) {
+        // 已经有数据了，请求过接口
+      } else {
+        this.customerLoading = true
+        get('/admin/base/customer/customerlst').then(({ data = [] }) => {
+          this.customerLoading = false
+          this.customerArray = data
+        }).catch(() => {
+          this.customerLoading = false
+        })
+      }
+    },
+    // 搜索按钮操作
+    handleQuery() {
+      this.pagination.pageNumber = 1;
+      this.getTableList();
+    },
+    // 重置按钮操作
+    resetQuery() {
+      this.queryParams.customerId = [];
+      this.queryParams.versionId = '';
+      this.queryParams.versionIdTwo = '';
+      this.queryParams.artId = '';
+      this.handleQuery();
+    },
+    // 根据客户查询版本
+    getVersionOfCustom() {
+      get(`/admin/ap/custdemandverhead/selectuinquelist`).then(({ code, data }) => {
+        if (code === 200) {
+          this.getSpecifiedVersion = data
+        }
+      })
+    },
+    // 导出最新预测偏差
+    handleNewExport() {
+      for (let key in this.queryParams) {
+        if (this.queryParams[key] == '') {
+          this.queryParams[key] = undefined
+        }
+      }
+      get(`/admin/ap/custdemandverhead/difference`, {
+        ...this.queryParams,
+        "customerId": this.queryParams.customerId ? this.queryParams.customerId.join(",") : undefined
+      }).then(res => {
+        let link = document.createElement('a');
+        link.style.display = 'none';
+        link.href = (process.env.VUE_APP_BASE_URL || "http://101.201.121.115:9003/") + res.data;
+        link.setAttribute('download', '最新预测偏差.xlsx');
+        document.body.appendChild(link);
+        link.click();
+      })
+    },
+  },
+  created() {
+    this.getVersionOfCustom()
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.tableHeight = this.calculationTableHeight(
+        this.$refs.tableRef,
+        120
+      );
+    })
+  }
+};
+</script>
+<style lang="less" scoped>
+.predict-deviation-wrapper {
+  height: 100%;
+  overflow: hidden;
+}
+</style>