生产计划查询优化

src/api/productionPlan/index.js

@@ -181,3 +181,11 @@ export async function pbomHomogeneityInspect(data) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+export async function getPlanStatistics(params){
+  const res = await request.get('/aps/productionplan/getPlanStatistics', {params});
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/views/productionPlan/components/productionPlan-search.vue

@@ -1,54 +1,53 @@
 <!-- 搜索表单 -->
 <template>
   <el-form
-    label-width="80px"
     class="ele-form-search"
     @keyup.enter.native="search"
     @submit.native.prevent
   >
     <el-row :gutter="15">
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <el-form-item label="计划编号:">
-          <el-input
-            size="mini"
-            clearable
-            v-model="where.code"
-            placeholder="请输入"
-          />
-        </el-form-item>
-      </el-col>
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <el-form-item label="产品编码:">
-          <el-input
-            size="mini"
-            clearable
-            v-model="where.productCode"
-            placeholder="请输入"
-          />
-        </el-form-item>
-      </el-col>
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <el-form-item label="牌号:" label-width="80px">
-          <el-input
-            size="mini"
-            clearable
-            v-model="where.brandNo"
-            placeholder="请输入"
-          />
-        </el-form-item>
-      </el-col>
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <el-form-item label="型号:" label-width="80px">
-          <el-input
-            size="mini"
-            clearable
-            v-model="where.model"
-            placeholder="请输入"
-          />
-        </el-form-item>
-      </el-col>
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <el-form-item size="mini" label="计划类型:" label-width="80px">
+<!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">-->
+<!--        <el-form-item label="计划编号:">-->
+<!--          <el-input-->
+<!--            size="mini"-->
+<!--            clearable-->
+<!--            v-model="where.code"-->
+<!--            placeholder="请输入"-->
+<!--          />-->
+<!--        </el-form-item>-->
+<!--      </el-col>-->
+<!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">-->
+<!--        <el-form-item label="产品编码:">-->
+<!--          <el-input-->
+<!--            size="mini"-->
+<!--            clearable-->
+<!--            v-model="where.productCode"-->
+<!--            placeholder="请输入"-->
+<!--          />-->
+<!--        </el-form-item>-->
+<!--      </el-col>-->
+<!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">-->
+<!--        <el-form-item label="牌号:" label-width="80px">-->
+<!--          <el-input-->
+<!--            size="mini"-->
+<!--            clearable-->
+<!--            v-model="where.brandNo"-->
+<!--            placeholder="请输入"-->
+<!--          />-->
+<!--        </el-form-item>-->
+<!--      </el-col>-->
+<!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">-->
+<!--        <el-form-item label="型号:" label-width="80px">-->
+<!--          <el-input-->
+<!--            size="mini"-->
+<!--            clearable-->
+<!--            v-model="where.model"-->
+<!--            placeholder="请输入"-->
+<!--          />-->
+<!--        </el-form-item>-->
+<!--      </el-col>-->
+      <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
+        <el-form-item label="计划类型:" label-width="80px">
           <el-select
             size="mini"
             clearable
@@ -65,7 +64,7 @@
           </el-select>
         </el-form-item>
       </el-col>
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+      <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
         <el-form-item label="计划状态:" label-width="80px">
           <el-select
             size="mini"
@@ -82,40 +81,41 @@
           </el-select>
         </el-form-item>
       </el-col>
-      <el-col
-        v-bind="styleResponsive ? { lg: 9, md: 12 } : { span: 9 }"
-        v-if="activeName == 'second'"
-      >
-        <el-form-item label-width="150px">
-          <template slot="label">
-            <el-select
-              size="mini"
-              v-model="deliveryVal"
-              @change="
-                () => {
-                  where.deliveryTime = [];
-                  where.formingTime = [];
-                }
-              "
-            >
-              <el-option label="预测交货日期" value="deliveryTime"></el-option>
-              <el-option label="实际交货日期" value="formingTime"></el-option>
-            </el-select>
-          </template>
-          <el-date-picker
-            class="w100"
-            v-model="where[deliveryVal]"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            :default-time="['00:00:00', '23:59:59']"
-          >
-          </el-date-picker>
-        </el-form-item>
-      </el-col>
-      <el-col v-bind="styleResponsive ? { lg: 9, md: 12 } : { span: 9 }">
+<!--      <el-col-->
+<!--        v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }"-->
+<!--        v-if="activeName == 'second'"-->
+<!--      >-->
+<!--        <el-form-item label-width="150px">-->
+<!--          <template slot="label">-->
+<!--            <el-select-->
+<!--              size="mini"-->
+<!--              v-model="deliveryVal"-->
+<!--              @change="-->
+<!--                () => {-->
+<!--                  where.deliveryTime = [];-->
+<!--                  where.formingTime = [];-->
+<!--                }-->
+<!--              "-->
+<!--            >-->
+<!--              <el-option label="预测交货日期" value="deliveryTime"></el-option>-->
+<!--              <el-option label="实际交货日期" value="formingTime"></el-option>-->
+<!--            </el-select>-->
+<!--          </template>-->
+<!--          <el-date-picker-->
+<!--            size="mini"-->
+<!--            class="w100"-->
+<!--            v-model="where[deliveryVal]"-->
+<!--            type="daterange"-->
+<!--            range-separator="至"-->
+<!--            start-placeholder="开始日期"-->
+<!--            end-placeholder="结束日期"-->
+<!--            value-format="yyyy-MM-dd HH:mm:ss"-->
+<!--            :default-time="['00:00:00', '23:59:59']"-->
+<!--          >-->
+<!--          </el-date-picker>-->
+<!--        </el-form-item>-->
+<!--      </el-col>-->
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
         <el-form-item label="" label-width="150px">
           <template slot="label">
             <el-select
@@ -151,38 +151,38 @@
           </el-date-picker>
         </el-form-item>
       </el-col>
-      <el-col
-        v-bind="styleResponsive ? { lg: 9, md: 12 } : { span: 9 }"
-        v-if="activeName == 'second'"
-      >
-        <el-form-item label="工单发布时间:" label-width="150px">
-          <el-date-picker
-            class="w100"
-            size="mini"
-            v-model="where.releaseTime"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            :default-time="['00:00:00', '23:59:59']"
-          >
-          </el-date-picker>
-        </el-form-item>
-      </el-col>
+<!--      <el-col-->
+<!--        v-bind="styleResponsive ? { lg: 9, md: 12 } : { span: 9 }"-->
+<!--        v-if="activeName == 'second'"-->
+<!--      >-->
+<!--        <el-form-item label="工单发布时间:" label-width="150px">-->
+<!--          <el-date-picker-->
+<!--            class="w100"-->
+<!--            size="mini"-->
+<!--            v-model="where.releaseTime"-->
+<!--            type="daterange"-->
+<!--            range-separator="至"-->
+<!--            start-placeholder="开始日期"-->
+<!--            end-placeholder="结束日期"-->
+<!--            value-format="yyyy-MM-dd HH:mm:ss"-->
+<!--            :default-time="['00:00:00', '23:59:59']"-->
+<!--          >-->
+<!--          </el-date-picker>-->
+<!--        </el-form-item>-->
+<!--      </el-col>-->
 
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 6 } : { span: 6 }">
-        <el-form-item label="组织机构:">
-          <auth-selection
-            size="mini"
-            data-type="Array"
-            v-model="where.deptIds"
-          ></auth-selection>
-        </el-form-item>
-      </el-col>
+<!--      <el-col v-bind="styleResponsive ? { lg: 6, md: 6 } : { span: 6 }">-->
+<!--        <el-form-item label="组织机构:">-->
+<!--          <auth-selection-->
+<!--            size="mini"-->
+<!--            data-type="Array"-->
+<!--            v-model="where.deptIds"-->
+<!--          ></auth-selection>-->
+<!--        </el-form-item>-->
+<!--      </el-col>-->
 
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 6 } : { span: 6 }">
-        <el-form-item label="加工方式:">
+      <el-col v-bind="styleResponsive ? { lg: 3, md: 6 } : { span: 3 }">
+        <el-form-item label-width="80px" label="加工方式:">
           <el-select
                   size="mini"
                   clearable
@@ -199,7 +199,16 @@
           </el-select>
         </el-form-item>
       </el-col>
-
+      <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
+        <el-form-item>
+          <el-input
+            size="mini"
+            clearable
+            v-model="where.searchInfo"
+            placeholder="请输入查询信息"
+          />
+        </el-form-item>
+      </el-col>
       <el-col v-bind="styleResponsive ? { lg: 6, md: 6 } : { span: 6 }">
         <div class="ele-form-actions">
           <el-button
@@ -217,6 +226,102 @@
             type="primary"
             >重置</el-button
           >
+          <el-dropdown trigger="click">
+            <span class="el-dropdown-link">
+              展开<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu>
+              <div class="searchExpend">
+                <el-row>
+                  <el-form-item label="计划编号:" label-width="80px">
+                    <el-input
+                      size="mini"
+                      clearable
+                      v-model="where.code"
+                      placeholder="请输入"
+                    />
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="产品编码:" label-width="80px">
+                    <el-input
+                      size="mini"
+                      clearable
+                      v-model="where.productCode"
+                      placeholder="请输入"
+                    />
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="牌号:" label-width="80px">
+                    <el-input
+                      size="mini"
+                      clearable
+                      v-model="where.brandNo"
+                      placeholder="请输入"
+                    />
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="型号:" label-width="80px">
+                    <el-input
+                      size="mini"
+                      clearable
+                      v-model="where.model"
+                      placeholder="请输入"
+                    />
+                  </el-form-item>
+                </el-row>
+                <el-row v-if="activeName == 'second'">
+                  <el-form-item label-width="150px">
+                    <template slot="label">
+                      <el-select
+                        size="mini"
+                        v-model="deliveryVal"
+                        @change="
+              () => {
+                where.deliveryTime = [];
+                where.formingTime = [];
+              }
+            "
+                      >
+                        <el-option label="预测交货日期" value="deliveryTime"></el-option>
+                        <el-option label="实际交货日期" value="formingTime"></el-option>
+                      </el-select>
+                    </template>
+                    <el-date-picker
+                      size="mini"
+                      class="w100"
+                      v-model="where[deliveryVal]"
+                      type="daterange"
+                      range-separator="至"
+                      start-placeholder="开始日期"
+                      end-placeholder="结束日期"
+                      value-format="yyyy-MM-dd HH:mm:ss"
+                      :default-time="['00:00:00', '23:59:59']"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-row>
+                <el-row v-if="activeName == 'second'">
+                  <el-form-item label="工单发布时间:" label-width="150px">
+                    <el-date-picker
+                      class="w100"
+                      size="mini"
+                      v-model="where.releaseTime"
+                      type="daterange"
+                      range-separator="至"
+                      start-placeholder="开始日期"
+                      end-placeholder="结束日期"
+                      value-format="yyyy-MM-dd HH:mm:ss"
+                      :default-time="['00:00:00', '23:59:59']"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-row>
+              </div>
+            </el-dropdown-menu>
+          </el-dropdown>
         </div>
       </el-col>
     </el-row>
@@ -241,7 +346,8 @@
         formingTime: [],
         reqMoldTime: [],
         planFormingTime: [],
-        executeUserName: ''
+        executeUserName: '',
+        searchInfo: '',
       };
       return {
         // 表单数据
@@ -301,6 +407,10 @@
   .ele-form-actions {
     display: flex;
     align-items: center;
-    justify-content: flex-end;
+    justify-content: flex-start;
+    padding-top: 5px;
+  }
+  .searchExpend{
+    padding: 20px 10px 0;
   }
 </style>

src/views/productionPlan/index.vue

@@ -9,6 +9,58 @@
         :activeName="activeName"
       >
       </productionPlan-search>
+      <div class="statistics">
+        <el-row :gutter="15">
+          <el-col :span="cardSpan">
+            <el-card shadow="hover" class="cardItem">
+              <div>
+                <div class="cardText">待排产计划数量</div>
+                <div class="cardNum">{{planStatistics.waitPlanNum}}</div>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="cardSpan">
+            <el-card shadow="hover" class="cardItem">
+              <div>
+                <div class="cardText">计划生产数量</div>
+                <div class="cardNum">{{planStatistics.planNum}}</div>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="cardSpan">
+            <el-card shadow="hover" class="cardItem">
+              <div>
+                <div class="cardText">已下发生产数量</div>
+                <div class="cardNum">{{planStatistics.issueNum}}</div>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="cardSpan">
+            <el-card shadow="hover" class="cardItem">
+              <div>
+                <div class="cardText">待完工生产数量</div>
+                <div class="cardNum">{{planStatistics.waitFinishNum}}</div>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="cardSpan">
+            <el-card shadow="hover" class="cardItem">
+              <div>
+                <div class="cardText">已完工数量</div>
+                <div class="cardNum">{{planStatistics.finishNum}}</div>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="cardSpan">
+            <el-card shadow="hover" class="cardItem">
+              <div>
+                <div class="cardText">已入库数量</div>
+                <div class="cardNum">{{planStatistics.stockNum}}</div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
       <div class="btn_box">
         <el-button type="success" size="mini" @click="homogeneityInspect">齐套性检查</el-button>
         <el-button type="primary" size="mini" @click="disassemblePlan"
@@ -221,7 +273,7 @@
 </template>
 
 <script>
-  import { getList, del, updatePriority } from '@/api/productionPlan/index.js';
+  import { getList, del, updatePriority, getPlanStatistics } from '@/api/productionPlan/index.js';
   import productionPlanSearch from './components/productionPlan-search.vue';
   import unpackDialog from './components/unpackDialog.vue';
   import mergeDialog from './components/mergeDialog.vue';
@@ -250,6 +302,14 @@
     },
     data() {
       return {
+        planStatistics: {
+          waitPlanNum: 0,
+          planNum: 0,
+          issueNum: 0,
+          waitFinishNum: 0,
+          finishNum: 0,
+          stockNum: 0,
+        },
         activeName: 'first',
 
         // 加载状态
@@ -286,6 +346,7 @@
         factoryShow: false,
         factoryType: 1,
         factoryObj: {},
+        cardSpan: 4,
       };
     },
     computed: {
@@ -606,7 +667,15 @@
     created() {
       this.getFieldModel();
     },
+    mounted() {
+      this.getPlanStatistics();
+    },
     methods: {
+      async getPlanStatistics(){
+        let res = await getPlanStatistics();
+        console.log(res);
+        this.planStatistics = res;
+      },
       homogeneityInspect(){
         if(this.selection.length == 0){
           this.$message.warning('请至少选择一条计划！');
@@ -945,4 +1014,20 @@
       font-size: 10px;
     }
   }
+  .statistics {
+    padding: 10px 10px 20px;
+  }
+  .cardItem {
+    border: 1px solid rgb(225, 225, 225);
+    text-align: center;
+    color: white;
+    background-color: rgba(24, 144, 255, 0.8);
+  }
+  .cardText {
+    font-size: 16px;
+  }
+  .cardNum {
+    font-size: 32px;
+    font-style: italic;
+  }
 </style>