首页对接

src/api/main/index.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+export default {
+  //列表
+  indexQuery: async function () {
+    const res = await request.get('/wms/index/query');
+    if (res.data.code == 0) {
+      return res.data.data;
+    }
+    return Promise.reject(new Error(res.data.message));
+  },
+  //柱状
+  queryList: async function () {
+    const res = await request.get('/wms/index/queryList');
+    if (res.data.code == 0) {
+      return res.data.data;
+    }
+    return Promise.reject(new Error(res.data.message));
+  }
+};

src/components/RouterLayout/index.vue

@@ -8,11 +8,13 @@
 </template>
 
 <script>
+  import { KEEP_ALIVE_INCLUDE } from '@/config/setting';
   export default {
     name: 'RouterLayout',
     computed: {
       include() {
-        return this.$store.getters['theme/keepAliveInclude'] ?? [];
+        // return this.$store.getters['theme/keepAliveInclude'] ?? [];
+        return KEEP_ALIVE_INCLUDE;
       },
       transitionName() {
         return this.$store.state.theme.transitionName;

src/config/setting.js

@@ -97,7 +97,11 @@ export const REDIRECT_PATH = '/redirect';
 // 开启页签栏是否缓存组件
 //export const TAB_KEEP_ALIVE = process.env.NODE_ENV !== 'development';
 export const TAB_KEEP_ALIVE = true;
-
+// 开启 KeepAlive 后需要缓存的路由地址
+export const KEEP_ALIVE_INCLUDE= [
+  'stockManagementAdd',
+  'outgoingManagementAdd',
+];
 // token 传递的 header 名称
 export const TOKEN_HEADER_NAME = 'Authorization';
 

src/views/warehouseManagement/index/index.vue

@@ -44,461 +44,90 @@
 
 <script>
   import * as echarts from 'echarts';
+  import indexApi from '@/api/main/index.js';
+  import { dateReg } from 'ele-admin/lib/utils/validate';
+  import { factorial } from 'mathjs';
+
   export default {
     data() {
       return {
+        timeR:null,
         list: [
           {
             title: '库存总量',
-            unit: '(单位)',
-            count: 1557,
+            key: 'totalInventory',
+            count: '',
             icon: require('../../../assets/index/Vector@2x.png')
           },
           {
             title: '库存周转天数',
-            unit: '(单位)',
-            count: 789,
+            unit: '(本月)',
+            key: 'materialTurnoverDays',
+            count: '',
             icon: require('../../../assets/index/Vector@2x.png')
           },
           {
             title: '物料库存周转率',
-            unit: '(单位)',
-            count: 346,
+            unit: '(本月)',
+            count: '',
+            key: 'materialTurnoverRate',
             icon: require('../../../assets/index/Vector@2x.png')
           },
           {
             title: '呆滞品总量',
-            unit: '(单位)',
-            count: 678,
+            // unit: '(单位)',
+            count: '',
+            key: 'totalSlowMovingItems',
             icon: require('../../../assets/index/Vector@2x.png')
           },
           {
             title: '产成品总量',
-            unit: '(单位)',
-            count: 2451,
+            // unit: '(单位)',
+            count: '',
+            key: 'totalFinishedProducts',
             icon: require('../../../assets/index/Vector@2x.png')
           },
           {
             title: '原材料总量',
-            unit: '(单位)',
-            count: 1689,
+            // unit: '(单位)',
+            count: '',
+            key: 'totalRawMaterials',
             icon: require('../../../assets/index/Vector@2x.png')
           }
-        ],
-        //呆滞品总量分析
-        slowMovingOption: {
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow'
-            }
-          },
-          grid: {
-            top: '10%',
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-          },
-          xAxis: [
-            {
-              type: 'category',
-              data: [
-                '轴承',
-                '升降机',
-                '冲压杆',
-                '冷却水管',
-                '液压机',
-                '电机',
-                '水泵机'
-              ],
-              axisTick: {
-                alignWithLabel: true
-              }
-            }
-          ],
-          yAxis: [
-            {
-              type: 'value'
-            }
-          ],
-          series: [
-            {
-              name: '个',
-              type: 'bar',
-              barWidth: '30%',
-              itemStyle: {
-                color: '#20BE4B'
-              },
-              data: [200, 152, 200, 334, 390, 330, 220]
-            }
-          ]
-        },
-        //在库总量分析
-        totalInventoryInStockOption: {
-          tooltip: {
-            trigger: 'item'
-          },
-          graphic: {
-            //图形中间图片
-            elements: [
-              {
-                type: 'text', //通过不同top值可以设置上下显示
-                left: '14.5%',
-                top: '44%',
-                style: {
-                  text: '在库总量(台)',
-                  fill: '#000', //文字的颜色
-                  width: 30,
-                  height: 30,
-                  fontSize: 12,
-                  color: '#000',
-                  fontFamily: 'Microsoft YaHei'
-                }
-              },
-              {
-                type: 'text', //通过不同top值可以设置上下显示
-                left: '17.5%',
-                top: '53%',
-                style: {
-                  text: '240',
-                  fill: '#000', //文字的颜色
-                  width: 30,
-                  height: 30,
-                  fontSize: 18,
-                  color: '#000',
-                  fontFamily: 'Microsoft YaHei'
-                }
-              }
-            ]
-          },
-          legend: {
-            top: 'center',
-            right: '15%',
-            type: 'scroll',
-            orient: 'vertical',
-            itemGap: 15,
-            textStyle: {
-              rich: {
-                // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
-                oneone: {
-                  // 设置文字、数学、英语这一列的样式
-                  width: 100,
-                  color: '#000',
-                  fontSize: 12,
-                  fontWeight: 'bolder'
-                },
-                twotwo: {
-                  // 设置10分、20分、30分这一列的样式
-                  width: 35,
-                  color: '#000',
-                  fontSize: 12
-                },
-                threethree: {
-                  // 设置百分比这一列的样式
-                  width: 20,
-                  color: '#000',
-                  fontSize: 12
-                }
-              }
-            },
-            formatter: (name) => {
-              return `{oneone|${name}}  {twotwo|40}   {threethree|(40%)}`;
-            }
-          },
-          series: [
-            {
-              name: '工单',
-              type: 'pie',
-              radius: ['60%', '80%'],
-              center: ['20%', '50%'], //图的位置，距离左跟上的位置
-              avoidLabelOverlap: false,
-              padAngle: 5,
-              label: {
-                show: false,
-                position: 'center'
-              },
-              emphasis: {
-                label: {
-                  show: false,
-                  fontSize: 40,
-                  fontWeight: 'bold'
-                }
-              },
-              labelLine: {
-                show: false
-              },  
-              data: [
-                { value: 12, name: '进行中(正常)' },
-                { value: 33, name: '进行中(延期)' },
-                { value: 44, name: '未开始' },
-                { value: 22, name: '已验收' },
-                { value: 10, name: '已结束' },
-                { value: 30, name: '已暂停' }
-              ]
-            }
-          ]
-        },
-        //物料库存周转趋势分析
-        materialInventoryTurnoverTrendOption:{
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'cross'
-            }
-          },
-          grid: {
-            left: '5%',
-            right: '5%',
-            bottom: '8%'
-          },
-          legend: {
-            data: ['当年存货周转率', '去年存货周转率', '当年趋势', '去年趋势']
-          },
-          xAxis: [
-            {
-              type: 'category',
-              axisTick: {
-                alignWithLabel: true
-              },
-              data: [
-                '1月',
-                '2月',
-                '3月',
-                '4月',
-                '5月',
-                '6月',
-                '7月',
-                '8月',
-                '9月',
-                '10月',
-                '11月',
-                '12月'
-              ]
-            }
-          ],
-          yAxis: [
-            {
-              type: 'value',
-              name: '',
-              position: 'right',
-              alignTicks: true,
-              axisLine: {
-                show: false
-              },
-              axisLabel: {
-                formatter: '{value}%'
-              }
-            },
-            {
-              type: 'value',
-              name: '2024',
-              show: false,
-              position: 'right',
-              alignTicks: true,
-              offset: 80,
-              axisLine: {
-                show: false
-              },
-              axisLabel: {
-                formatter: '{value} ml'
-              }
-            },
-            {
-              type: 'value',
-              name: '(单位:pcs)',
-              position: 'left',
-              alignTicks: true,
-              axisLine: {
-                show: false
-              },
-              axisLabel: {
-                formatter: '{value}'
-              }
-            }
-          ],
-          series: [
-            {
-              name: '当年存货周转率',
-              type: 'bar',
-              barWidth: '20%',
-              itemStyle: {
-                color: '#FF9669'
-              },
-              data: [
-                200.0, 112.9, 177.0, 223.2, 125.6, 176.7, 135.6, 162.2, 132.6,
-                120.0, 186.4, 193.3
-              ]
-            },
-            {
-              name: '去年存货周转率',
-              type: 'bar',
-              yAxisIndex: 1,
-              barWidth: '20%',
-              itemStyle: {
-                color: '#26ADAD'
-              },
-              data: [
-                222.6, 115.9, 219.0, 226.4, 128.7, 270.7, 175.6, 182.2, 248.7,
-                188.8, 216.0, 192.3
-              ]
-            },
-            {
-              name: '当年趋势',
-              type: 'line',
-              yAxisIndex: 2,
-              itemStyle: {
-                color: '#FF8855'
-              },
-              data: [
-                22.0, 12.2, 23.3, 14.5, 26.3, 10.2, 20.3, 23.4, 23.0, 16.5,
-                12.0, 16.2
-              ]
-            },
-            {
-              name: '去年趋势',
-              type: 'line',
-              yAxisIndex: 2,
-              itemStyle: {
-                color: '#095BFF'
-              },
-              data: [
-                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
-                2.3
-              ]
-            }
-          ]
-        },
-        //库存总量同比及趋势分析
-        comparisonOfTotalInventoryOption:{
-          color: ['#5470C6', '#91CC75', '#EE6666'],
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'cross'
-            }
-          },
-          grid: {
-            left: '5%',
-            right: '5%',
-            bottom: '8%'
-          },
-          legend: {
-            data: ['2023', '2024', '趋势']
-          },
-          xAxis: [
-            {
-              type: 'category',
-              axisTick: {
-                alignWithLabel: true
-              },
-              data: [
-                '1月',
-                '2月',
-                '3月',
-                '4月',
-                '5月',
-                '6月',
-                '7月',
-                '8月',
-                '9月',
-                '10月',
-                '11月',
-                '12月'
-              ]
-            }
-          ],
-          yAxis: [
-            {
-              type: 'value',
-              name: '',
-              position: 'right',
-              alignTicks: true,
-              axisLine: {
-                show: false
-              },
-              axisLabel: {
-                formatter: '{value}%'
-              }
-            },
-            {
-              type: 'value',
-              name: '2024',
-              show: false,
-              position: 'right',
-              alignTicks: true,
-              offset: 80,
-              axisLine: {
-                show: false
-              },
-              axisLabel: {
-                formatter: '{value} ml'
-              }
-            },
-            {
-              type: 'value',
-              name: '(单位:pcs)',
-              position: 'left',
-              alignTicks: true,
-              axisLine: {
-                show: false
-              },
-              axisLabel: {
-                formatter: '{value}'
-              }
-            }
-          ],
-          series: [
-            {
-              name: '2023',
-              type: 'bar',
-              barWidth: '20%',
-              itemStyle: {
-                color: '#3976F1'
-              },
-              data: [
-                212.0, 144.9, 127.0, 223.2, 225.6, 176.7, 135.6, 162.2, 232.6,
-                220.0, 186.4, 213.3
-              ]
-            },
-            {
-              name: '2024',
-              type: 'bar',
-              yAxisIndex: 1,
-              barWidth: '20%',
-              itemStyle: {
-                color: '#5DD07C'
-              },
-              data: [
-                212.6, 215.9, 189.0, 126.4, 228.7, 170.7, 175.6, 182.2, 248.7,
-                118.8, 226.0, 222.3
-              ]
-            },
-            {
-              name: '趋势',
-              type: 'line',
-              yAxisIndex: 2,
-              itemStyle: {
-                color: '#FF9669'
-              },
-              data: [
-                2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
-              ]
-            }
-          ]
-        }
-      }
+        ]
+      };
     },
     mounted() {
-      this.initCharts1();
-      this.initCharts2();
-      this.initCharts3();
-      this.initCircle1();
-      this.initCircle2();
+      // this.initCharts1();
+      // this.initCharts2();
+
+      this.init();
+      this.timeR = setInterval(() => {
+        this.init();
+      },86400000);
+    },
+    beforeDestroy(){
+      clearInterval(this.timeR)
     },
     methods: {
-      initCharts3() {
+      async init() {
+        let data = await indexApi.indexQuery();
+        let barData = await indexApi.queryList();
+
+        this.list.forEach((item) => {
+          item.count = data[item.key];
+        });
+
+        this.initCharts3(data.slowMovingItemsAnalysis);
+        this.initCircle1(data);
+        this.initCharts1(barData);
+        this.initCharts2(barData);
+      },
+
+      initCharts3(data) {
         var myChart = echarts.init(document.querySelector('.erchats4'));
+        let x = data.map((item) => item.name);
+        let y = data.map((item) => item.num);
         let option = {
           tooltip: {
             trigger: 'axis',
@@ -516,15 +145,7 @@
           xAxis: [
             {
               type: 'category',
-              data: [
-                '轴承',
-                '升降机',
-                '冲压杆',
-                '冷却水管',
-                '液压机',
-                '电机',
-                '水泵机'
-              ],
+              data: x,
               axisTick: {
                 alignWithLabel: true
               }
@@ -543,122 +164,31 @@
               itemStyle: {
                 color: '#20BE4B'
               },
-              data: [200, 152, 200, 334, 390, 330, 220]
+              data: y
             }
           ]
         };
         myChart.setOption(option);
       },
-      initCircle1() {
+      initCircle1(data) {
         var myChart = echarts.init(document.querySelector('.erchats3'));
-        let option = {
-          tooltip: {
-            trigger: 'item'
-          },
-          graphic: {
-            //图形中间图片
-            elements: [
-              {
-                type: 'text', //通过不同top值可以设置上下显示
-                left: '14.5%',
-                top: '44%',
-                style: {
-                  text: '在库总量(台)',
-                  fill: '#000', //文字的颜色
-                  width: 30,
-                  height: 30,
-                  fontSize: 12,
-                  color: '#000',
-                  fontFamily: 'Microsoft YaHei'
-                }
-              },
-              {
-                type: 'text', //通过不同top值可以设置上下显示
-                left: '17.5%',
-                top: '53%',
-                style: {
-                  text: '240',
-                  fill: '#000', //文字的颜色
-                  width: 30,
-                  height: 30,
-                  fontSize: 18,
-                  color: '#000',
-                  fontFamily: 'Microsoft YaHei'
-                }
-              }
-            ]
+        let arr = [
+          {
+            value: data.inspectedQuantity,
+            name: '已质检',
+            rate: data.inspectedPercentage
           },
-          legend: {
-            top: 'center',
-            right: '15%',
-            type: 'scroll',
-            orient: 'vertical',
-            itemGap: 15,
-            textStyle: {
-              rich: {
-                // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
-                oneone: {
-                  // 设置文字、数学、英语这一列的样式
-                  width: 100,
-                  color: '#000',
-                  fontSize: 12,
-                  fontWeight: 'bolder'
-                },
-                twotwo: {
-                  // 设置10分、20分、30分这一列的样式
-                  width: 35,
-                  color: '#000',
-                  fontSize: 12
-                },
-                threethree: {
-                  // 设置百分比这一列的样式
-                  width: 20,
-                  color: '#000',
-                  fontSize: 12
-                }
-              }
-            },
-            formatter: (name) => {
-              return `{oneone|${name}}  {twotwo|40}   {threethree|(40%)}`;
-            }
+          {
+            value: data.pendingInspectionQuantity,
+            name: '未质检',
+            rate: data.pendingInspectionPercentage
           },
-          series: [
-            {
-              name: '工单',
-              type: 'pie',
-              radius: ['60%', '80%'],
-              center: ['20%', '50%'], //图的位置，距离左跟上的位置
-              avoidLabelOverlap: false,
-              padAngle: 5,
-              label: {
-                show: false,
-                position: 'center'
-              },
-              emphasis: {
-                label: {
-                  show: false,
-                  fontSize: 40,
-                  fontWeight: 'bold'
-                }
-              },
-              labelLine: {
-                show: false
-              },  
-              data: [
-                { value: 12, name: '进行中(正常)' },
-                { value: 33, name: '进行中(延期)' },
-                { value: 44, name: '未开始' },
-                { value: 22, name: '已验收' },
-                { value: 10, name: '已结束' },
-                { value: 30, name: '已暂停' }
-              ]
-            }
-          ]
-        };
-        myChart.setOption(option);
-      },
-      initCircle2() {
-        var myChart = echarts.init(document.querySelector('.erchats5'));
+          {
+            value: data.noInspectionRequiredQuantity,
+            name: '无需质检',
+            rate: data.noInspectionRequiredPercentage
+          }
+        ];
         let option = {
           tooltip: {
             trigger: 'item'
@@ -668,7 +198,7 @@
             elements: [
               {
                 type: 'text', //通过不同top值可以设置上下显示
-                left: '14.5%',
+                left: '25%',
                 top: '44%',
                 style: {
                   text: '在库总量(台)',
@@ -682,10 +212,10 @@
               },
               {
                 type: 'text', //通过不同top值可以设置上下显示
-                left: '17.5%',
+                left: '25%',
                 top: '53%',
                 style: {
-                  text: '240',
+                  text: data.totalInventory,
                   fill: '#000', //文字的颜色
                   width: 30,
                   height: 30,
@@ -727,15 +257,15 @@
               }
             },
             formatter: (name) => {
-              return `{oneone|${name}}  {twotwo|40}   {threethree|(40%)}`;
+              let data = arr.find((item) => item.name == name);
+              return `{oneone|${name}}{twotwo|${data?.value}}          {threethree|(${data?.rate}%)}`;
             }
           },
           series: [
             {
-              name: '工单',
               type: 'pie',
-              radius: ['70%', '90%'],
-              center: ['20%', '50%'], //图的位置，距离左跟上的位置
+              radius: ['60%', '75%'],
+              center: ['30%', '50%'], //图的位置，距离左跟上的位置
               avoidLabelOverlap: false,
               padAngle: 5,
               label: {
@@ -752,21 +282,16 @@
               labelLine: {
                 show: false
               },
-              data: [
-                { value: 12, name: '进行中(正常)' },
-                { value: 33, name: '进行中(延期)' },
-                { value: 44, name: '未开始' },
-                { value: 22, name: '已验收' },
-                { value: 10, name: '已结束' },
-                { value: 30, name: '已暂停' }
-              ]
+              data: arr
             }
           ]
         };
         myChart.setOption(option);
       },
-      initCharts1() {
+
+      initCharts1(barData) {
         const colors = ['#5470C6', '#91CC75', '#EE6666'];
+        console.log(barData, 'barData');
         var myChart = echarts.init(document.querySelector('.erchats1'));
         myChart.setOption({
           color: colors,
@@ -781,29 +306,14 @@
             right: '5%',
             bottom: '8%'
           },
-          legend: {
-            data: ['2023', '2024', '趋势']
-          },
+          legend: {},
           xAxis: [
             {
               type: 'category',
               axisTick: {
                 alignWithLabel: true
               },
-              data: [
-                '1月',
-                '2月',
-                '3月',
-                '4月',
-                '5月',
-                '6月',
-                '7月',
-                '8月',
-                '9月',
-                '10月',
-                '11月',
-                '12月'
-              ]
+              data: barData.map((item) => item.month)
             }
           ],
           yAxis: [
@@ -819,20 +329,20 @@
                 formatter: '{value}%'
               }
             },
-            {
-              type: 'value',
-              name: '2024',
-              show: false,
-              position: 'right',
-              alignTicks: true,
-              offset: 80,
-              axisLine: {
-                show: false
-              },
-              axisLabel: {
-                formatter: '{value} ml'
-              }
-            },
+            // {
+            //   type: 'value',
+            //   name: '2024',
+            //   show: false,
+            //   position: 'right',
+            //   alignTicks: true,
+            //   offset: 80,
+            //   axisLine: {
+            //     show: false
+            //   },
+            //   axisLabel: {
+            //     formatter: '{value} ml'
+            //   }
+            // },
             {
               type: 'value',
               name: '(单位:pcs)',
@@ -848,45 +358,37 @@
           ],
           series: [
             {
-              name: '2023',
+              name: '去年同期库存总量',
               type: 'bar',
               barWidth: '20%',
               itemStyle: {
                 color: '#3976F1'
               },
-              data: [
-                212.0, 144.9, 127.0, 223.2, 225.6, 176.7, 135.6, 162.2, 232.6,
-                220.0, 186.4, 213.3
-              ]
+              yAxisIndex: 1,
+              data: barData.map((item) => item.lastYearTotalInventory)
             },
             {
-              name: '2024',
+              name: '本年库存总量',
               type: 'bar',
               yAxisIndex: 1,
               barWidth: '20%',
               itemStyle: {
                 color: '#5DD07C'
               },
-              data: [
-                212.6, 215.9, 189.0, 126.4, 228.7, 170.7, 175.6, 182.2, 248.7,
-                118.8, 226.0, 222.3
-              ]
+              data: barData.map((item) => item.totalInventory)
             },
             {
               name: '趋势',
               type: 'line',
-              yAxisIndex: 2,
               itemStyle: {
                 color: '#FF9669'
               },
-              data: [
-                2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
-              ]
+              data: barData.map((item) => item.inventoryTrendRate)
             }
           ]
         });
       },
-      initCharts2() {
+      initCharts2(barData) {
         var myChart = echarts.init(document.querySelector('.erchats2'));
         myChart.setOption({
           tooltip: {
@@ -901,7 +403,7 @@
             bottom: '8%'
           },
           legend: {
-            data: ['当年存货周转率', '去年存货周转率', '当年趋势', '去年趋势']
+            // data: ['当年存货周转率', '去年存货周转率', '当年趋势']
           },
           xAxis: [
             {
@@ -909,20 +411,7 @@
               axisTick: {
                 alignWithLabel: true
               },
-              data: [
-                '1月',
-                '2月',
-                '3月',
-                '4月',
-                '5月',
-                '6月',
-                '7月',
-                '8月',
-                '9月',
-                '10月',
-                '11月',
-                '12月'
-              ]
+              data: barData.map((item) => item.month)
             }
           ],
           yAxis: [
@@ -938,20 +427,20 @@
                 formatter: '{value}%'
               }
             },
-            {
-              type: 'value',
-              name: '2024',
-              show: false,
-              position: 'right',
-              alignTicks: true,
-              offset: 80,
-              axisLine: {
-                show: false
-              },
-              axisLabel: {
-                formatter: '{value} ml'
-              }
-            },
+            // {
+            //   type: 'value',
+            //   name: '2024',
+            //   show: false,
+            //   position: 'right',
+            //   alignTicks: true,
+            //   offset: 80,
+            //   axisLine: {
+            //     show: false
+            //   },
+            //   axisLabel: {
+            //     formatter: '{value} ml'
+            //   }
+            // },
             {
               type: 'value',
               name: '(单位:pcs)',
@@ -967,53 +456,33 @@
           ],
           series: [
             {
-              name: '当年存货周转率',
+              name: '本年存货周转率',
               type: 'bar',
               barWidth: '20%',
               itemStyle: {
                 color: '#FF9669'
               },
-              data: [
-                200.0, 112.9, 177.0, 223.2, 125.6, 176.7, 135.6, 162.2, 132.6,
-                120.0, 186.4, 193.3
-              ]
+              yAxisIndex: 1,
+              data: barData.map((item) => item.materialTurnoverRate)
             },
             {
               name: '去年存货周转率',
               type: 'bar',
               yAxisIndex: 1,
               barWidth: '20%',
+              yAxisIndex: 1,
               itemStyle: {
                 color: '#26ADAD'
               },
-              data: [
-                222.6, 115.9, 219.0, 226.4, 128.7, 270.7, 175.6, 182.2, 248.7,
-                188.8, 216.0, 192.3
-              ]
+              data: barData.map((item) => item.lastYearMaterialTurnoverRate)
             },
             {
-              name: '当年趋势',
-              type: 'line',
-              yAxisIndex: 2,
-              itemStyle: {
-                color: '#FF8855'
-              },
-              data: [
-                22.0, 12.2, 23.3, 14.5, 26.3, 10.2, 20.3, 23.4, 23.0, 16.5,
-                12.0, 16.2
-              ]
-            },
-            {
-              name: '去年趋势',
+              name: '趋势',
               type: 'line',
-              yAxisIndex: 2,
               itemStyle: {
                 color: '#095BFF'
               },
-              data: [
-                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
-                2.3
-              ]
+              data: barData.map((item) => item.materialTurnoverTrend)
             }
           ]
         });

src/views/warehouseManagement/warehouseDefinition/index.vue

@@ -5,50 +5,93 @@
         <el-row>
           <el-col :span="4">
             <el-form-item label="仓库编码" prop="code">
-              <el-input placeholder="请输入" v-model="formData.code" clearable class="w100"></el-input>
-            </el-form-item></el-col>
+              <el-input
+                placeholder="请输入"
+                v-model="formData.code"
+                clearable
+                class="w100"
+              ></el-input> </el-form-item
+          ></el-col>
           <el-col :span="4">
-            <el-form-item label="仓库类型" prop="inventoryType">
-              <!-- <DictSelection
-                dictName="仓库类型"
+            <el-form-item label="仓库名称" prop="name">
+              <el-input
+                placeholder="请输入"
+                v-model="formData.name"
                 clearable
+                class="w100"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :span="4">
+            <el-form-item label="仓库类型" prop="inventoryType">
+              <el-select
+                filterable
+                size="small"
+                class="w100"
                 v-model="formData.inventoryType"
-              /> -->
-              <el-select filterable size="small" class="w100" v-model="formData.inventoryType" placeholder="请选择"
-                :clearable="true">
-                <el-option v-for="item in inventoryTypeList" :key="item.id" :label="item.name" :value="item.id">
+                placeholder="请选择"
+                :clearable="true"
+              >
+                <el-option
+                  v-for="item in inventoryTypeList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
                 </el-option>
-              </el-select> </el-form-item></el-col>
+              </el-select> </el-form-item
+          ></el-col>
           <el-col :span="4">
             <el-form-item label="所属工厂" prop="factoryId">
-              <el-select filterable placeholder="请选择" v-model="formData.factoryId" clearable class="w100">
-                <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-              </el-select> </el-form-item></el-col>
+              <el-select
+                filterable
+                placeholder="请选择"
+                v-model="formData.factoryId"
+                clearable
+                class="w100"
+              >
+                <el-option
+                  v-for="item in factoryList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                ></el-option>
+              </el-select> </el-form-item
+          ></el-col>
           <el-col :span="4">
             <el-form-item label="空货位数">
               <div class="divider11">
                 <el-col :span="9">
                   <el-form-item label="" prop="emptyAllocationStart">
-                    <el-input type="text" @input="
-                      (value) =>
-                      (formData.emptyAllocationStart = value.replace(
-                        /[^\d]+/g,
-                        ''
-                      ))
-                    " v-model="formData.emptyAllocationStart"></el-input></el-form-item>
+                    <el-input
+                      type="text"
+                      @input="
+                        (value) =>
+                          (formData.emptyAllocationStart = value.replace(
+                            /[^\d]+/g,
+                            ''
+                          ))
+                      "
+                      v-model="formData.emptyAllocationStart"
+                    ></el-input
+                  ></el-form-item>
                 </el-col>
 
                 <div class="divider111"> <el-divider></el-divider></div>
 
                 <el-col :span="9">
                   <el-form-item label="" prop="emptyAllocationEnd">
-                    <el-input type="text" @input="
-                      (value) =>
-                      (formData.emptyAllocationEnd = value.replace(
-                        /[^\d]+/g,
-                        ''
-                      ))
-                    " v-model="formData.emptyAllocationEnd"></el-input> </el-form-item></el-col>
+                    <el-input
+                      type="text"
+                      @input="
+                        (value) =>
+                          (formData.emptyAllocationEnd = value.replace(
+                            /[^\d]+/g,
+                            ''
+                          ))
+                      "
+                      v-model="formData.emptyAllocationEnd"
+                    ></el-input> </el-form-item
+                ></el-col>
               </div>
             </el-form-item>
           </el-col>
@@ -61,28 +104,44 @@
               ></auth-selection>
             </el-form-item>
           </el-col> -->
-          <el-col :span="8" style="display: flex; justify-content: flex-end">
+          <el-col :span="3" style="display: flex; justify-content: flex-end">
             <div>
-              <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
-              <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+              <el-button icon="el-icon-refresh-left" @click="reset"
+                >重置</el-button
+              >
+              <el-button type="primary" icon="el-icon-search" @click="search"
+                >搜索</el-button
+              >
             </div>
           </el-col>
         </el-row>
       </el-form>
 
       <div>
-        <el-button type="primary" icon="el-icon-plus" @click="add">新建仓库</el-button>
-        <el-button plain type="primary" icon="el-icon-sort" @click="handoff">仓库列表</el-button>
+        <el-button type="primary" icon="el-icon-plus" @click="add"
+          >新建仓库</el-button
+        >
+        <el-button plain type="primary" icon="el-icon-sort" @click="handoff"
+          >仓库列表</el-button
+        >
       </div>
       <div v-if="isTable" class="warehouse-container" v-loading="loading">
-        <div class="warehouse-card_item" v-for="(item, index) in warehouse" :key="index">
+        <div
+          class="warehouse-card_item"
+          v-for="(item, index) in warehouse"
+          :key="index"
+        >
           <div class="warehouse-card">
             <h3 :class="item.enabled === 0 ? 'grey' : 'ele-bg-primary'">
               {{ item.code }} <span>{{ item.name }}</span>
             </h3>
             <el-row class="warehouse-card-main">
-              <el-col :span="idx === warehouseLabel.length - 1 ? 24 : 12" class="ele-elip"
-                v-for="(itm, idx) in warehouseLabel" :key="idx">
+              <el-col
+                :span="idx === warehouseLabel.length - 1 ? 24 : 12"
+                class="ele-elip"
+                v-for="(itm, idx) in warehouseLabel"
+                :key="idx"
+              >
                 <span class="label">{{ itm.label }}</span>
                 <template v-if="itm.key === 'enabled'">
                   <span :class="item[itm.key] === 0 ? 'danger-text' : ''">{{
@@ -99,57 +158,118 @@
               </el-col>
             </el-row>
             <div class="warehouse-card-footer">
-              <el-link type="primary" :underline="false" @click="add(item)">修改仓库</el-link>
-              <el-link type="primary" :underline="false" @click="locationManage(item)">货位管理</el-link>
-              <el-link type="primary" :underline="false" @click="details(item)">查看详情</el-link>
-              <el-link type="danger" :underline="false" @click="remove(item)">删除</el-link>
+              <el-link type="primary" :underline="false" @click="add(item)"
+                >修改仓库</el-link
+              >
+              <el-link
+                type="primary"
+                :underline="false"
+                @click="locationManage(item)"
+                >货位管理</el-link
+              >
+              <el-link type="primary" :underline="false" @click="details(item)"
+                >查看详情</el-link
+              >
+              <el-link type="danger" :underline="false" @click="remove(item)"
+                >删除</el-link
+              >
             </div>
           </div>
         </div>
       </div>
       <div v-else class="warehouse-container">
-        <el-table ref="table" :data="warehouse" tooltip-effect="dark" style="width: 100%" stripe>
+        <el-table
+          ref="table"
+          :data="warehouse"
+          tooltip-effect="dark"
+          style="width: 100%"
+          stripe
+        >
           <el-table-column label="序号" type="index" width="50" align="center">
           </el-table-column>
-          <el-table-column label="仓库名称" prop="name" :show-overflow-tooltip="true" width="120"
-            align="center"></el-table-column>
-          <el-table-column label="仓库编码" prop="code" :show-overflow-tooltip="true" align="center"></el-table-column>
+          <el-table-column
+            label="仓库名称"
+            prop="name"
+            :show-overflow-tooltip="true"
+            width="120"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            label="仓库编码"
+            prop="code"
+            :show-overflow-tooltip="true"
+            align="center"
+          ></el-table-column>
           <el-table-column label="状态" prop="status" align="center">
             <template slot-scope="{ row, $index }">
               {{
                 row.status !== null
                   ? warehouseDefinition_statusList.filter(
-                    (item) => item.code == row.status
-                  )[0].label
+                      (item) => item.code == row.status
+                    )[0].label
                   : ''
               }}
             </template>
           </el-table-column>
-          <el-table-column label="所属工厂" prop="factoryName" align="center" :show-overflow-tooltip="true" width="120">
+          <el-table-column
+            label="所属工厂"
+            prop="factoryName"
+            align="center"
+            :show-overflow-tooltip="true"
+            width="120"
+          >
             <template slot-scope="{ row, $index }">
               <!-- {{ filterFactoryId(row.factoryName) }} -->
               {{ row.factoryName }}
             </template>
           </el-table-column>
-          <el-table-column label="仓库类型" prop="inventoryName" :show-overflow-tooltip="true" align="center">
+          <el-table-column
+            label="仓库类型"
+            prop="inventoryName"
+            :show-overflow-tooltip="true"
+            align="center"
+          >
             <!-- <template slot-scope="{ row, $index }">
               {{ getDictValue('仓库类型', row.inventoryType) }}
             </template> -->
           </el-table-column>
-          <el-table-column label="库区数" prop="areaNumber" :show-overflow-tooltip="true" align="center"></el-table-column>
-          <el-table-column label="货架数" prop="goodNumber" align="center"></el-table-column>
-          <el-table-column label="货位数" prop="allocationNumber" align="center"></el-table-column>
-          <el-table-column label="空货位数" prop="emptyAllocationNumber" align="center">
+          <el-table-column
+            label="库区数"
+            prop="areaNumber"
+            :show-overflow-tooltip="true"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            label="货架数"
+            prop="goodNumber"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            label="货位数"
+            prop="allocationNumber"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            label="空货位数"
+            prop="emptyAllocationNumber"
+            align="center"
+          >
           </el-table-column>
-          <el-table-column label="操作" width="300" align="center" fixed="right">
+          <el-table-column
+            label="操作"
+            width="300"
+            align="center"
+            fixed="right"
+          >
             <template v-slot="{ row, $index }">
               <el-button type="text" @click="add(row)">修改</el-button>
-              <el-button type="text" @click="locationManage(row)">货位</el-button>
+              <el-button type="text" @click="locationManage(row)"
+                >货位</el-button
+              >
               <el-button type="text" @click="details(row)">详情</el-button>
               <el-button type="text" @click="remove(row)">删除</el-button>
             </template>
           </el-table-column>
-
         </el-table>
       </div>
     </el-card>
@@ -158,339 +278,339 @@
 </template>
 
 <script>
-// import tablePagination from '../components/tablePagination.vue';
-// import {
-//   warehouseListValuable,
-//   warehouseRemove
-// } from '@/api/stockManagement/warehouseDefinition';
-import {
-  warehouseDefinition_inventoryList,
-  warehouseDefinition_statusList,
-  useDictLabel
-} from '@/utils/dict/index';
-import { mapGetters, mapActions } from 'vuex';
-import dictEnum from '@/enum/dict';
-// import selectTree from '@/components/selectTree';
-import WarehouseEdit from './components/WarehouseEdit';
-import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
-// import dictMixins from '@/mixins/dictMixins';
-export default {
-  // components: { selectTree, tablePagination, WarehouseEdit },
-  components: { WarehouseEdit },
-  computed: {
-    ...mapGetters(['dict', 'getDict', 'getDictValue'])
-  },
-  // mixins: [dictMixins],
-  data() {
-    return {
-      isTable: false,
-      loading: false,
-      formData: {
-        deptIds: [],
-        code: '',
-        name: '',
-        inventoryType: '',
-        emptyAllocationEnd: '',
-        emptyAllocationStart: ''
-      },
-      warehouseDefinition_statusList,
-      warehouseDefinition_inventoryList: [
-        { code: 1, label: '物料仓' },
-        { code: 2, label: '产品仓' },
-        { code: 3, label: '设备仓' },
-        { code: 4, label: '模具仓' },
-        { code: 5, label: '舟皿仓' },
-        { code: 6, label: '备品备件仓' }
-      ],
-      factoryList: [],
-      treeList: [],
-      warehouse: [],
-      typeList: [],
-      warehouseLabel: [
-        {
-          label: '状态',
-          key: 'status',
-          filter: useDictLabel(warehouseDefinition_statusList)
-        },
-        {
-          label: '仓库类型',
-          key: 'inventoryName'
-          // filter: (value) => {
-          //   return this.getDictValue('仓库类型', value);
-          // }
-        },
-        { label: '库区数', key: 'areaNumber' },
-        { label: '货架数', key: 'goodNumber' },
-        { label: '货位数', key: 'allocationNumber' },
-        { label: '空货位数', key: 'emptyAllocationNumber' },
-        { label: '所属工厂', key: 'factoryId' }
-      ],
-      inventoryTypeList: []
-    };
-  },
-  async created() {
-    this.requestDict('仓库类型');
-    this.initData();
-  },
-  methods: {
-    ...mapActions('dict', ['requestDict']),
-    filterFactoryId(factoryId) {
-      console.log(this.factoryList);
-      let obj = this.factoryList.find((f) => f.id === factoryId);
-      return obj ? obj.name : '';
+  // import tablePagination from '../components/tablePagination.vue';
+  // import {
+  //   warehouseListValuable,
+  //   warehouseRemove
+  // } from '@/api/stockManagement/warehouseDefinition';
+  import {
+    warehouseDefinition_inventoryList,
+    warehouseDefinition_statusList,
+    useDictLabel
+  } from '@/utils/dict/index';
+  import { mapGetters, mapActions } from 'vuex';
+  import dictEnum from '@/enum/dict';
+  // import selectTree from '@/components/selectTree';
+  import WarehouseEdit from './components/WarehouseEdit';
+  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
+  // import dictMixins from '@/mixins/dictMixins';
+  export default {
+    // components: { selectTree, tablePagination, WarehouseEdit },
+    components: { WarehouseEdit },
+    computed: {
+      ...mapGetters(['dict', 'getDict', 'getDictValue'])
     },
-    handoff() {
-      this.isTable = !this.isTable;
-    },
-    async initData() {
-      const res2 = await warehouseDefinition.getTreeByGroup({ type: 1 });
-      this.inventoryTypeList = res2;
-
-      //获取工厂车间列表
-      const res = await warehouseDefinition.getFactoryarea({
-        pageNum: 1,
-        size: 9999,
-        type: 1
-      });
-      this.factoryList = res.list;
-      this.handleList();
-    },
-    async handleList() {
-      try {
-        this.loading = true;
-        const res = await warehouseDefinition.list(this.formData);
-        console.log('res--------------------');
-        console.log(res);
-        this.warehouse = res;
-      } finally {
-        this.loading = false;
-      }
-    },
-    search() {
-      this.handleList();
-    },
-    add(item) {
-      let type = '新建';
-      if (item.id) {
-        type = '修改';
-      }
-      this.$refs.warehouseEditRef.open(type, item);
-    },
-    locationManage({ id, code, name }) {
-      this.$router.push({
-        path: '/warehouseManagement/warehouseDefinition/add',
-        query: {
-          id,
-          code,
-          name
-        }
-      });
+    // mixins: [dictMixins],
+    data() {
+      return {
+        isTable: false,
+        loading: false,
+        formData: {
+          deptIds: [],
+          code: '',
+          name: '',
+          inventoryType: '',
+          emptyAllocationEnd: '',
+          emptyAllocationStart: ''
+        },
+        warehouseDefinition_statusList,
+        warehouseDefinition_inventoryList: [
+          { code: 1, label: '物料仓' },
+          { code: 2, label: '产品仓' },
+          { code: 3, label: '设备仓' },
+          { code: 4, label: '模具仓' },
+          { code: 5, label: '舟皿仓' },
+          { code: 6, label: '备品备件仓' }
+        ],
+        factoryList: [],
+        treeList: [],
+        warehouse: [],
+        typeList: [],
+        warehouseLabel: [
+          {
+            label: '状态',
+            key: 'status',
+            filter: useDictLabel(warehouseDefinition_statusList)
+          },
+          {
+            label: '仓库类型',
+            key: 'inventoryName'
+            // filter: (value) => {
+            //   return this.getDictValue('仓库类型', value);
+            // }
+          },
+          { label: '库区数', key: 'areaNumber' },
+          { label: '货架数', key: 'goodNumber' },
+          { label: '货位数', key: 'allocationNumber' },
+          { label: '空货位数', key: 'emptyAllocationNumber' },
+          { label: '所属工厂', key: 'factoryId' }
+        ],
+        inventoryTypeList: []
+      };
     },
-    details(data) {
-      this.$router.push({
-        path: '/warehouseManagement/warehouseDefinition/details',
-        query: {
-          id: data.id
-        }
-      });
+    async created() {
+      this.requestDict('仓库类型');
+      this.initData();
     },
-    edit(data) {
-      this.$router.push({
-        path: '/warehouseManagement/warehouseDefinition/edit',
-        query: {
-          id: data.id
+    methods: {
+      ...mapActions('dict', ['requestDict']),
+      filterFactoryId(factoryId) {
+        console.log(this.factoryList);
+        let obj = this.factoryList.find((f) => f.id === factoryId);
+        return obj ? obj.name : '';
+      },
+      handoff() {
+        this.isTable = !this.isTable;
+      },
+      async initData() {
+        const res2 = await warehouseDefinition.getTreeByGroup({ type: 1 });
+        this.inventoryTypeList = res2;
+
+        //获取工厂车间列表
+        const res = await warehouseDefinition.getFactoryarea({
+          pageNum: 1,
+          size: 9999,
+          type: 1
+        });
+        this.factoryList = res.list;
+        this.handleList();
+      },
+      async handleList() {
+        try {
+          this.loading = true;
+          const res = await warehouseDefinition.list(this.formData);
+          console.log('res--------------------');
+          console.log(res);
+          this.warehouse = res;
+        } finally {
+          this.loading = false;
         }
-      });
-    },
-    reset() {
-      this.$refs.formName.resetFields();
-      this.search();
-    },
-    remove({ id, name }) {
-      this.$confirm(`确认删除仓库${name}?`).then(async () => {
-        // const isDeleted = await warehouseDefinition.isDelete(id);
-        // if (isDeleted == 1) {
-        //   const res = await warehouseDefinition.delete(id);
-        //   this.$message.success('删除' + res + '！');
-        //   this.handleList();
-        // } else {
-        //   this.$message.warning('此数据可能有关联数据，暂时无法删除！');
-        // }
-        const res = await warehouseDefinition.delete(id);
-        this.$message.success('删除' + res + '！');
+      },
+      search() {
         this.handleList();
-      });
+      },
+      add(item) {
+        let type = '新建';
+        if (item.id) {
+          type = '修改';
+        }
+        this.$refs.warehouseEditRef.open(type, item);
+      },
+      locationManage({ id, code, name }) {
+        this.$router.push({
+          path: '/warehouseManagement/warehouseDefinition/add',
+          query: {
+            id,
+            code,
+            name
+          }
+        });
+      },
+      details(data) {
+        this.$router.push({
+          path: '/warehouseManagement/warehouseDefinition/details',
+          query: {
+            id: data.id
+          }
+        });
+      },
+      edit(data) {
+        this.$router.push({
+          path: '/warehouseManagement/warehouseDefinition/edit',
+          query: {
+            id: data.id
+          }
+        });
+      },
+      reset() {
+        this.$refs.formName.resetFields();
+        this.search();
+      },
+      remove({ id, name }) {
+        this.$confirm(`确认删除仓库${name}?`).then(async () => {
+          // const isDeleted = await warehouseDefinition.isDelete(id);
+          // if (isDeleted == 1) {
+          //   const res = await warehouseDefinition.delete(id);
+          //   this.$message.success('删除' + res + '！');
+          //   this.handleList();
+          // } else {
+          //   this.$message.warning('此数据可能有关联数据，暂时无法删除！');
+          // }
+          const res = await warehouseDefinition.delete(id);
+          this.$message.success('删除' + res + '！');
+          this.handleList();
+        });
+      }
     }
-  }
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-#warehouseDefinition_index {
-  height: calc(100vh - 96px);
-  width: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-
-  // element-ui样式穿透
-  :deep(.el-card) {
-    height: 100%;
+  #warehouseDefinition_index {
+    height: calc(100vh - 96px);
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
 
-    .el-card__body {
+    // element-ui样式穿透
+    :deep(.el-card) {
       height: 100%;
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
 
-      .ele-pro-table {
-        flex: 1;
+      .el-card__body {
+        height: 100%;
+        box-sizing: border-box;
         display: flex;
         flex-direction: column;
 
-        .el-table {
+        .ele-pro-table {
           flex: 1;
-          // display: flex;
-          // flex-direction: column;
-          // .el-table__body-wrapper {
-          //   flex: 1;
-          // }
+          display: flex;
+          flex-direction: column;
+
+          .el-table {
+            flex: 1;
+            // display: flex;
+            // flex-direction: column;
+            // .el-table__body-wrapper {
+            //   flex: 1;
+            // }
+          }
         }
       }
-    }
 
-    .el-form-item {
-      margin-bottom: 5px !important;
+      .el-form-item {
+        margin-bottom: 5px !important;
+      }
     }
   }
-}
-
-.divider11 {
-  display: flex;
-  align-items: center;
-}
-
-.divider111 {
-  padding: 0 10px;
-  flex: 1;
-}
-
-.devider {
-  position: relative;
-  padding-top: 20px;
-
-  &::before {
-    content: '';
-    border-top: 10px solid #f2f2f2;
-    z-index: 1;
-    position: absolute;
-    top: 0;
-    left: -25px;
-    right: -30px;
-  }
-}
-
-.warehouse-container {
-  flex: 1 0 auto;
-  height: 0;
-  display: flex;
-  flex-wrap: wrap;
-  padding-top: 20px;
-  overflow-y: auto;
-
-  .warehouse-card-placeholder {
-    width: 25%;
+
+  .divider11 {
+    display: flex;
+    align-items: center;
   }
 
-  .warehouse-card_item {
-    width: 25%;
+  .divider111 {
     padding: 0 10px;
-    box-sizing: border-box;
+    flex: 1;
   }
 
-  .warehouse-card {
-    // margin-right: auto;
-    width: 100%;
-
-    font-size: 14px;
-    border: 1px solid rgb(121, 121, 121);
-    margin-bottom: 20px;
-    padding-bottom: 30px;
+  .devider {
     position: relative;
+    padding-top: 20px;
 
-    h3 {
-      height: 35px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      // background-color: $mainColor;
-      color: #fff;
-      padding: 8px;
-
-      span {
-        font-size: 18px;
-        font-weight: bold;
-      }
+    &::before {
+      content: '';
+      border-top: 10px solid #f2f2f2;
+      z-index: 1;
+      position: absolute;
+      top: 0;
+      left: -25px;
+      right: -30px;
+    }
+  }
 
-      &.grey {
-        background-color: rgb(170, 170, 170);
-        color: rgba(0, 0, 0, 0.85);
-      }
+  .warehouse-container {
+    flex: 1 0 auto;
+    height: 0;
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 20px;
+    overflow-y: auto;
+
+    .warehouse-card-placeholder {
+      width: 25%;
+    }
+
+    .warehouse-card_item {
+      width: 25%;
+      padding: 0 10px;
+      box-sizing: border-box;
     }
 
-    .warehouse-card-main {
+    .warehouse-card {
+      // margin-right: auto;
       width: 100%;
-      padding: 8px 12px;
-      color: rgba($color: #000000, $alpha: 0.89);
 
-      .el-col {
-        padding: 8px 0;
+      font-size: 14px;
+      border: 1px solid rgb(121, 121, 121);
+      margin-bottom: 20px;
+      padding-bottom: 30px;
+      position: relative;
+
+      h3 {
+        height: 35px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        // background-color: $mainColor;
+        color: #fff;
+        padding: 8px;
+
+        span {
+          font-size: 18px;
+          font-weight: bold;
+        }
+
+        &.grey {
+          background-color: rgb(170, 170, 170);
+          color: rgba(0, 0, 0, 0.85);
+        }
       }
 
-      .label {
-        font-weight: bold;
-        display: inline-block;
-        width: 4.5em;
+      .warehouse-card-main {
+        width: 100%;
+        padding: 8px 12px;
+        color: rgba($color: #000000, $alpha: 0.89);
+
+        .el-col {
+          padding: 8px 0;
+        }
+
+        .label {
+          font-weight: bold;
+          display: inline-block;
+          width: 4.5em;
+        }
       }
-    }
 
-    .warehouse-card-footer {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0 12px;
-      height: 30px;
-      background-color: rgb(242, 242, 242);
+      .warehouse-card-footer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 12px;
+        height: 30px;
+        background-color: rgb(242, 242, 242);
+      }
     }
   }
-}
 
-.p20 {
-  padding: 20px;
-}
+  .p20 {
+    padding: 20px;
+  }
 
-.mt20 {
-  margin-top: 20px;
-}
+  .mt20 {
+    margin-top: 20px;
+  }
 
-.mt10 {
-  margin-top: 10px;
-}
+  .mt10 {
+    margin-top: 10px;
+  }
 
-.el-form {
-  overflow: hidden;
-}
+  .el-form {
+    overflow: hidden;
+  }
 
-.float-right {
-  float: right;
-  text-align: right;
-  margin-right: 20px;
-}
+  .float-right {
+    float: right;
+    text-align: right;
+    margin-right: 20px;
+  }
 
-.right {
-  text-align: right;
-}
+  .right {
+    text-align: right;
+  }
 </style>