diff --git a/src/api/ManufacturingCenter/TraceabilityOfParts.js b/src/api/ManufacturingCenter/TraceabilityOfParts.js
new file mode 100644
index 00000000..1d6fcea6
--- /dev/null
+++ b/src/api/ManufacturingCenter/TraceabilityOfParts.js
@@ -0,0 +1,57 @@
+import request from '@/utils/request'
+
+export function SelectPart() {
+  return request({
+    url: '',
+    method: 'post',
+    data: {
+      type: '1',
+      name: '车间生产管理工艺_零件工艺计划_查询数据_状态_新_MESWORK',
+      param: '项目流水号_check=' + arguments[0] + '&项目流水号=' + arguments[1] + '&机床流水号_check=' + arguments[2] + '&机床流水号=' + arguments[3] + '&组件流水号_check=' + arguments[4] + '&组件流水号=' + arguments[5] + '&零件图号_check=' + arguments[6] + '&零件图号=' + arguments[7] + '&考核状态_check=' + arguments[8] + '&考核状态=' + arguments[9] + '&单件是否外协_check=' + arguments[10] + '&单件是否外协=' + arguments[11] + '&时间=' + arguments[12] + '&机加工开始时间=' + arguments[13] + '&机加工结束时间=' + arguments[14] + '&零件类型=' + arguments[15] + '&工艺计划流水号=' + arguments[16]
+    }
+  })
+}
+export function getTable(stepNumber, a, b, c, d, e, f, g, i, j, k, l, m) {
+  return request({
+    url: '',
+    method: 'post',
+    data: {
+      type: '1',
+      name: '车间生产管理工艺_零件工序_查询数据_已编制工序的全部零件及工序_横向赋值新建存储过程',
+      param: '项目流水号_check=' + stepNumber + '=string&项目流水号=' + a + '=string&机床流水号_check=' + b + '=string&机床流水号=' + c + '=string&组件流水号_check=' + d + '=string&组件流水号=' + e + '=string&零件图号_check=' + f + '=string&零件图号=' + g + '=string&是否查询全部数据=1=string&单件是否外协=' + i + '=string&考核状态=6=int&开始时间_check=' + j + '&开始时间=' + k + '&结束时间_check=' + l + '&结束时间=' + m
+    }
+  })
+}
+export function SelectProcessingProgress() {
+  return request({
+    url: '',
+    method: 'post',
+    data: {
+      type: '1',
+      name: '车间生产管理工艺_加工进度查询_查询',
+      param: '工艺计划流水号=' + arguments[0]
+    }
+  })
+}
+export function SelectPreparation() {
+  return request({
+    url: '',
+    method: 'post',
+    data: {
+      type: '1',
+      name: '零件追溯_备料信息_查询数据',
+      param: '工艺计划流水号=' + arguments[0]
+    }
+  })
+}
+export function SelectOut() {
+  return request({
+    url: '',
+    method: 'post',
+    data: {
+      type: '1',
+      name: '零件追溯_外协信息_查询数据',
+      param: '工艺计划流水号=' + arguments[0]
+    }
+  })
+}
diff --git a/src/api/Outsourcing/OutsourcingQCSearch.js b/src/api/Outsourcing/OutsourcingQCSearch.js
index b4dace89..53d65092 100644
--- a/src/api/Outsourcing/OutsourcingQCSearch.js
+++ b/src/api/Outsourcing/OutsourcingQCSearch.js
@@ -8,7 +8,7 @@ export function searchTable1(...params) {
     data: {
       type: '1',
       name: '车间生产管理_外协到货单_查询数据',
-      param: ``,
+      param: `外协到货单号_check=${params[2]}&外协到货单号=${params[3]}&外协厂家_check=${params[4]}&外协厂家=${params[5]}`,
       Pagination: params[0] + '&' + params[1]
     }
   })
diff --git a/src/api/PurchasingCenter/PurchaseSituationSearch.js b/src/api/PurchasingCenter/PurchaseSituationSearch.js
index b2fcf305..0445867b 100644
--- a/src/api/PurchasingCenter/PurchaseSituationSearch.js
+++ b/src/api/PurchasingCenter/PurchaseSituationSearch.js
@@ -31,7 +31,7 @@ export function searchTable1(...params) {
     data: {
       type: '1',
       name: '采购管理_采购部采购_查询物料_分配后_加供应商',
-      param: `机床流水号_check=${params[0]}&机床流水号=${params[1]}&组件流水号_check=${params[2]}&组件流水号=${params[3]}&零件类型=${params[6]}`,
+      param: `机床流水号_check=${params[0]}&机床流水号=${params[1]}&组件流水号_check=${params[2]}&组件流水号=${params[3]}&零件类型=${params[6]}&物料名称_check=${params[7]}&物料名称=${params[8]}&物料规格_check=${params[9]}&物料规格=${params[10]}&物料型号_check=${params[11]}&物料型号=${params[12]}`,
       Pagination: params[4] + '&' + params[5]
     }
   })
@@ -44,7 +44,7 @@ export function searchTable2(...params) {
     data: {
       type: '1',
       name: '采购管理_采购部采购_查询物料_基本件_分配后_加供应商',
-      param: `机床流水号_check=${params[0]}&机床流水号=${params[1]}&组件流水号_check=${params[2]}&组件流水号=${params[3]}`,
+      param: `机床流水号_check=${params[0]}&机床流水号=${params[1]}&组件流水号_check=${params[2]}&组件流水号=${params[3]}&零件名称_check=${params[6]}&零件名称=${params[7]}&零件规格_check=${params[8]}&零件规格=${params[9]}&零件图号_check=${params[10]}&零件图号=${params[11]}`,
       Pagination: params[4] + '&' + params[5]
     }
   })
diff --git a/src/icons/svg/TraceabilityOfParts.svg b/src/icons/svg/TraceabilityOfParts.svg
new file mode 100644
index 00000000..6e5db806
--- /dev/null
+++ b/src/icons/svg/TraceabilityOfParts.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1561193509975" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2017" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M321.536 505.856c0-86.016 43.008-163.84 108.544-209.92v-81.92c0-19.456-15.36-34.816-34.816-34.816H274.432c-19.456 0-34.816 15.36-34.816 34.816v629.76h186.368V719.872c-58.368-50.176-104.448-123.904-104.448-214.016zM165.888 358.4H45.056C25.6 358.4 10.24 373.76 10.24 393.216v451.584h186.368V393.216c4.096-19.456-11.264-34.816-30.72-34.816zM706.56 280.576V117.76C706.56 98.304 691.2 81.92 671.744 81.92H503.808c-19.456 0-34.816 15.36-34.816 34.816v151.552c30.72-15.36 66.56-23.552 105.472-23.552 54.272 5.12 97.28 16.384 132.096 35.84zM477.184 743.424v101.376h233.472v-112.64c-38.912 23.552-81.92 34.816-128 34.816-38.912 0-74.752-8.192-105.472-23.552z m517.12 101.376L780.288 630.784c23.552-34.816 34.816-77.824 34.816-124.928 0-132.096-105.472-237.568-237.568-237.568-132.096 0-237.568 109.568-237.568 237.568s105.472 237.568 237.568 237.568c46.08 0 90.112-11.264 124.928-34.816l214.016 214.016c11.264 11.264 23.552 15.36 38.912 15.36s26.624-4.096 38.912-15.36c23.552-19.456 23.552-54.272 0-77.824zM581.632 681.984c-93.184 0-171.008-77.824-171.008-171.008s77.824-171.008 171.008-171.008 171.008 77.824 171.008 171.008c1.024 93.184-76.8 171.008-171.008 171.008z m0 0" p-id="2018" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
index 39e0294c..05ba122c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -26,65 +26,4 @@ const service = axios.create({
   timeout: 1500000 // 请求超时时间
 })
 
-// request拦截器
-// service.interceptors.request.use(
-//   config => {
-//     if (store.getters.token) {
-//       config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-//     }
-//     return config
-//   },
-//   error => {
-//     // Do something with request error
-//     console.log(error) // for debug
-//     Promise.reject(error)
-//   }
-// )
-
-// response 拦截器
-// service.interceptors.response.use(
-//   response => {
-//     /**
-//      * code为非20000是抛错 可结合自己业务进行修改
-//      */
-//     const res = response.data
-//     if (res.code !== 20000) {
-//       Message({
-//         message: res.message,
-//         type: 'error',
-//         duration: 5 * 1000
-//       })
-//
-//       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
-//       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-//         MessageBox.confirm(
-//           '你已被登出，可以取消继续留在该页面，或者重新登录',
-//           '确定登出',
-//           {
-//             confirmButtonText: '重新登录',
-//             cancelButtonText: '取消',
-//             type: 'warning'
-//           }
-//         ).then(() => {
-//           store.dispatch('FedLogOut').then(() => {
-//             location.reload() // 为了重新实例化vue-router对象 避免bug
-//           })
-//         })
-//       }
-//       return Promise.reject('error')
-//     } else {
-//       return response.data
-//     }
-//   },
-//   error => {
-//     console.log('err' + error) // for debug
-//     Message({
-//       message: error.message,
-//       type: 'error',
-//       duration: 5 * 1000
-//     })
-//     return Promise.reject(error)
-//   }
-// )
-
 export default service
diff --git a/src/utils/tool.js b/src/utils/tool.js
index 005cfadf..ba0f89ff 100644
--- a/src/utils/tool.js
+++ b/src/utils/tool.js
@@ -128,7 +128,7 @@ export function groupBy(datas, keys) {
     group.data1 = group.data1 || 0
     group.key.数量 = group.data1 += v.数量
     group.data2 = group.data2 || ''
-    group.key.机床图号_组号 = group.data2 += (v.机床图号 || '') + '-' + (v.组号 ? v.组号.split('组')[0] : '') + ' '
+    group.key.机床图号_组号 = group.data2 += (v.机床图号 || '') + '-' + (v.组号 ? v.组号.split('组')[0] : '') + '<br/>'
     group.data3 = group.data3 || 0
     group.key.合计 = group.data3 += v.合计
   })
diff --git a/src/views/ManufacturingCenter/TraceabilityOfParts/index.vue b/src/views/ManufacturingCenter/TraceabilityOfParts/index.vue
new file mode 100644
index 00000000..00abcfba
--- /dev/null
+++ b/src/views/ManufacturingCenter/TraceabilityOfParts/index.vue
@@ -0,0 +1,531 @@
+<template>
+  <div>
+    <el-card>
+      <!--<el-radio-group v-model="radio" @change="changeType">-->
+      <!--<el-radio :label="1">自制件</el-radio>-->
+      <!--<el-radio :label="2">采购部采购</el-radio>-->
+      <!--<el-radio :label="3">制造部采购</el-radio>-->
+      <!--</el-radio-group>-->
+      <span style="display:inline-block;margin-left: 10px">零件图号：</span>
+      <el-autocomplete
+        v-model="searchPick"
+        :fetch-suggestions="querySearch"
+        clearable
+        style="width: 200px;margin-left: 10px;"
+        size="small"
+        class="inline-input"
+        placeholder="请输入零件图号"
+        @select="handleSelect"
+        @clear="clearSelect"
+      />
+      <!--<el-button type="text" @click="show1 = !show1" style="margin-left: 10px">高级查询</el-button>-->
+      <!--<div v-show="show1" style="margin-top: 20px" class="transition-box">-->
+      <!--<span style="display:inline-block;margin-left: 10px">项目名称：</span>-->
+      <!--<el-autocomplete-->
+      <!--v-model="searchCriteria"-->
+      <!--:fetch-suggestions="querySearch"-->
+      <!--clearable-->
+      <!--style="width: 200px;margin-left: 10px;"-->
+      <!--size="small"-->
+      <!--class="inline-input"-->
+      <!--placeholder="请输入零件或物料"-->
+      <!--@clear="clearSelect"-->
+      <!--@select="handleSelect"-->
+      <!--/>-->
+      <!--<span style="display:inline-block;margin-left: 10px">机床图号：</span>-->
+      <!--<el-input-->
+      <!--v-model="input_Mobile"-->
+      <!--:trigger-on-focus="false"-->
+      <!--clearable-->
+      <!--size="small"-->
+      <!--style="width: 200px;margin-right: 10px"-->
+      <!--placeholder="请输入内容"/>-->
+      <!--<span style="display:inline-block;margin-left: 10px">组号：</span>-->
+      <!--<el-input-->
+      <!--v-model="input_Mobile"-->
+      <!--:trigger-on-focus="false"-->
+      <!--clearable-->
+      <!--size="small"-->
+      <!--style="width: 200px;margin-right: 10px"-->
+      <!--placeholder="请输入内容"/>-->
+      <!--<span style="display:inline-block;margin-left: 10px">零件图号：</span>-->
+      <!--<el-input-->
+      <!--v-model="input_Mobile"-->
+      <!--:trigger-on-focus="false"-->
+      <!--clearable-->
+      <!--size="small"-->
+      <!--style="width: 200px;margin-right: 10px"-->
+      <!--placeholder="请输入内容"/>-->
+      <!--</div>-->
+      <div>
+        <el-divider content-position="right">零件档案</el-divider>
+        <div class="text">
+          <span style="display:inline-block;margin-left: 10px">零件图号：<el-tag size="small">{{ form.零件图号 }}</el-tag></span>
+          <el-divider direction="vertical"/>
+          <span style="display:inline-block;margin-left: 10px">零件名称：<el-tag size="small">{{ form.零件名称 }}</el-tag></span>
+          <el-divider direction="vertical"/>
+          <span style="display:inline-block;margin-left: 10px">投产数量：<el-tag size="small">{{ form.投产数量 }}</el-tag></span>
+          <el-divider direction="vertical"/>
+          <span style="display:inline-block;margin-left: 10px">所属机床：<el-tag size="small">{{ form.所属机床 }}</el-tag></span>
+          <el-divider direction="vertical"/>
+          <span style="display:inline-block;margin-left: 10px">所属组件：<el-tag size="small">{{ form.所属组件 }}</el-tag></span>
+        </div>
+        <el-divider content-position="right">生命周期</el-divider>
+        <div class="text item">
+          <el-row>
+            <el-col :span="3">
+              <el-timeline style="margin-top: 40px">
+                <el-timeline-item
+                  v-for="(activity, index) in activities"
+                  :key="index"
+                  :icon="activity.icon"
+                  :type="activity.type"
+                  :color="activity.color"
+                  :size="activity.size"
+                  :timestamp="activity.timestamp">
+                  {{ activity.content }}
+                </el-timeline-item>
+              </el-timeline>
+            </el-col>
+            <el-col :span="1">
+              <div style="width:1px;border:0.1px solid #DCDFE6;float:left;height:450px;"/>
+            </el-col>
+            <el-col :span="20" style="margin-top: 30px">
+              <div class="main">
+                <div v-show="show" style="line-height: 130px;text-align: center">
+                  <div>
+                    —请查询—
+                  </div>
+                </div>
+                <div class="sudoku_row" >
+                  <div v-for="(sudoku,index) in sudokus" :class="curSelect==sudoku.id?'opacity':''" :key="index" class="sudoku_item " @touchstart="touchstart(index)" @touchend="touchend">
+                    <div class="text">
+                      第{{ sudoku.id }}序
+                    </div>
+                    <div :style="{width: '100px',height: '100px',border: '1px solid grey','text-align': 'center', 'background-color': sudoku.color}" class="text">
+                      <el-row style="margin-top: 10px">
+                        <div style="height: 20px">
+                          {{ sudoku.procedure }}
+                        </div>
+                      </el-row>
+                      <el-row style="margin-top: 2px">
+                        <div style="height: 20px">
+                          {{ sudoku.planningTime }}
+                        </div>
+                      </el-row>
+                      <el-row style="margin-top: 2px">
+                        <div style="height: 20px">
+                          {{ sudoku.actualTime }}
+                        </div>
+                      </el-row>
+                      <el-row style="margin-top: 2px">
+                        <div style="height: 20px">
+                          {{ sudoku.name }}
+                        </div>
+                      </el-row>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <el-row :gutter="20" style="margin-top: 50px">
+                <el-col :span="11">
+                  <div style="width: 100%;height: 200px;border: 1px solid #DCDFE6">
+                    <el-row style="margin-top: 15px;margin-right: 15px">
+                      <span style="float: right">—备料信息—</span>
+                    </el-row>
+                    <el-row style="margin-top: 30px;margin-left: 10px">
+                      <span style="width:80px;margin-left: 10px">备料单：<el-tag size="small" type="success">{{ isMaterials }}</el-tag></span>
+                      <span style="width:80px;margin-left: 20px">备料类型：<el-tag size="small" type="success">{{ materialsType }}</el-tag></span>
+                      <span style="width:80px;margin-left: 20px">下料员：<el-tag size="small" type="success">{{ Cutter }}</el-tag></span>
+                      <span style="width:80px;margin-left: 20px">确认日期：<el-tag size="small" type="success">{{ confirmationTime }}</el-tag></span>
+                    </el-row>
+                    <el-row style="margin-top: 30px;margin-left: 30px">
+                      <el-steps :space="200" :active="active" finish-status="success">
+                        <el-step title="创建备料"/>
+                        <el-step title="备料确认"/>
+                      </el-steps>
+                    </el-row>
+                  </div>
+                </el-col>
+                <el-col :span="11">
+                  <div style="width: 100%;height: 200px;border: 1px solid #DCDFE6">
+                    <el-row style="margin-top: 15px;margin-right: 15px">
+                      <span style="float: right">—外协信息—</span>
+                    </el-row>
+                    <el-row style="margin-top: 30px;margin-left: 10px">
+                      <span style="width:80px;margin-left: 10px">是否序间外协：<el-tag size="small" type="success">{{ isOut }}</el-tag></span>
+                      <span style="width:80px;margin-left: 20px">外协工序：<el-tag size="small" type="success">{{ outName }}</el-tag></span>
+                      <span style="width:80px;margin-left: 20px">检验日期：<el-tag size="small" type="success">{{ outTime }}</el-tag></span>
+                    </el-row>
+                    <el-row style="margin-top: 30px;margin-left: 30px;margin-right: 30px">
+                      <el-steps :active="active1" finish-status="success">
+                        <el-step title="序间外协"/>
+                        <el-step title="价格预算"/>
+                        <el-step title="任务执行"/>
+                        <el-step title="到货质检"/>
+                      </el-steps>
+                    </el-row>
+                  </div>
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+          <el-divider content-position="right">跳转链接</el-divider>
+          <el-row style="margin-left: 20px">
+            <router-link to="/StatusQuery/index" style="color:dodgerblue">零件状态查询</router-link>
+            <el-divider direction="vertical"/>
+            <router-link to="/StatusQuery/index" style="color:dodgerblue">加工进度查询</router-link>
+          </el-row>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { SelectPart, SelectProcessingProgress, SelectPreparation, SelectOut } from '@/api/ManufacturingCenter/TraceabilityOfParts'
+export default {
+  data() {
+    return {
+      isOut: '请查询',
+      outName: '请查询',
+      outTime: '请查询',
+      active: '',
+      active1: '',
+      confirmationTime: '请查询',
+      Cutter: '请查询',
+      isMaterials: '请查询',
+      searchPick: '',
+      materialsType: '请查询',
+      restaurantsPick: [],
+      show: true,
+      show1: false,
+      // typeA: true,
+      // typeB: false,
+      // typeC: false,
+      radio: 1,
+      form: {
+        零件图号: '请查询',
+        投产数量: '请查询',
+        所属机床: '请查询',
+        所属组件: '请查询',
+        零件名称: '请查询'
+      },
+      activities: [{
+        id: 3,
+        content: '生产计划下达',
+        timestamp: '制造部：计划员',
+        type: '',
+        size: 'large'
+      }, {
+        id: 4,
+        content: '工艺制定',
+        timestamp: '工艺部：工艺员',
+        type: '',
+        size: 'large'
+      }, {
+        id: 5,
+        content: '定额制定',
+        timestamp: '工艺部：工艺员',
+        type: '',
+        size: 'large'
+      }, {
+        id: 6,
+        content: '生产能力平衡',
+        timestamp: '制造部：计划员',
+        type: '',
+        size: 'large'
+      }, {
+        id: 7,
+        content: '加工',
+        timestamp: '金工车间：操作工',
+        type: '',
+        size: 'large'
+      }, {
+        id: 8,
+        content: '入库',
+        timestamp: '金工车间：库管员',
+        type: '',
+        size: 'large'
+      }, {
+        id: 9,
+        content: '出库',
+        timestamp: '金工车间：库管员',
+        type: '',
+        size: 'large'
+      }],
+      sudokus: [],
+      curSelect: null
+    }
+  },
+  methods: {
+    // changeType() {
+    //   if(this.radio === 1) {
+    //     this.typeA = true
+    //     this.typeB = false
+    //     this.typeC = false
+    //   } else if(this.radio === 2) {
+    //     this.typeA = false
+    //     this.typeB = true
+    //     this.typeC = false
+    //   } else if(this.radio === 3) {
+    //     this.typeA = false
+    //     this.typeB = false
+    //     this.typeC = true
+    //   }
+    // },
+    touchstart: function(e) {
+      var that = this
+      var list = that.sudokus
+      for (var i = 0, len = list.length; i < len; ++i) {
+        if (list[i].id === e) {
+          that.curSelect = i
+        }
+      }
+    }, touchend: function() {
+      var that = this
+      that.curSelect = null
+    },
+    querySearch(queryString, cb) {
+      this.restaurantsPick = []
+      if (this.searchPick !== '' && this.searchPick !== null) {
+        SelectPart(0, '', 0, '', 0, '', 1, this.searchPick, 0, '', 0, '', 0, '', '', '', '').then(response => {
+          const res = response.data
+          res.forEach(item => {
+            this.restaurantsPick.push({
+              value: item.零件图号,
+              name: item.工艺计划流水号
+            })
+          })
+          return this.restaurantsPick
+        }).then(data => {
+          var restaurants = data
+          var results = queryString ? restaurants.filter(this.createFilterPick(queryString)) : restaurants
+          return results
+        }).then(data => {
+          cb(data)
+        })
+      }
+    },
+    createFilterPick(queryString) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
+      }
+    },
+    clearSelect() {
+      this.sudokus = []
+      this.isOut = '请查询'
+      this.outName = '请查询'
+      this.outTime = '请查询'
+      this.confirmationTime = '请查询'
+      this.Cutter = '请查询'
+      this.isMaterials = '请查询'
+      this.materialsType = '请查询'
+      this.form.零件图号 = '请查询'
+      this.form.投产数量 = '请查询'
+      this.form.所属机床 = '请查询'
+      this.form.所属组件 = '请查询'
+      this.form.零件名称 = '请查询'
+      for (let i = 0; i < this.activities.length; i++) {
+        this.activities[i].type = ''
+      }
+      this.show = true
+    },
+    handleSelect(item) {
+      this.sudokus = []
+      this.show = false
+      this.active = ''
+      this.active1 = ''
+      this.confirmationTime = '请查询'
+      this.Cutter = '请查询'
+      this.isMaterials = '请查询'
+      this.materialsType = '请查询'
+      this.isOut = '请查询'
+      this.outName = '请查询'
+      this.outTime = '请查询'
+      for (let i = 0; i < this.activities.length; i++) {
+        this.activities[i].type = ''
+      }
+      SelectPart(0, '', 0, '', 0, '', 0, '', 0, '', 0, '', 0, '', '', '', item.name).then(response => {
+        this.form.零件图号 = response.data[0].零件图号
+        this.form.投产数量 = response.data[0].批次数量
+        this.form.所属机床 = response.data[0].机床图号
+        this.form.所属组件 = response.data[0].组号
+        this.form.零件名称 = response.data[0].零件名称
+      })
+      SelectProcessingProgress(item.name).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.sudokus.push({
+            id: response.data[i].工序顺序,
+            procedure: response.data[i].工艺名称,
+            planningTime: response.data[i].计划日期_短,
+            actualTime: response.data[i].完成日期_短 === null || response.data[i].完成日期_短 === '' ? '未完成' : response.data[i].完成日期_短,
+            name: response.data[i].完成日期_短 === null || response.data[i].完成日期_短 === '' ? '未完成' : response.data[i].员工姓名,
+            color: response.data[i].进度颜色
+          })
+        }
+      })
+      SelectPreparation(item.name).then(response => {
+        if (response.data.length !== 0) {
+          if (response.data[0].类型.toString() === '0') {
+            this.isMaterials = '未创建'
+            this.materialsType = '未创建'
+            this.Cutter = '未创建'
+            this.confirmationTime = '未创建'
+            this.active = '0'
+          } else if (response.data[0].类型.toString() === '1') {
+            this.isMaterials = '已创建'
+            this.materialsType = '自家备料'
+            this.Cutter = '未确认'
+            this.confirmationTime = '未确认'
+            this.active = '1'
+          } else if (response.data[0].类型.toString() === '2') {
+            this.isMaterials = '已创建'
+            this.materialsType = '外购备料'
+            this.Cutter = '未确认'
+            this.confirmationTime = '未确认'
+            this.active = '1'
+          } else if (response.data[0].类型.toString() === '3') {
+            this.isMaterials = '已创建'
+            this.materialsType = '自家备料'
+            this.active = '2'
+            response.data[0].下料员 !== null && response.data[0].下料员 !== '' ? this.Cutter = response.data[0].下料员 : this.Cutter = '未确认'
+            response.data[0].确认时间 !== null && response.data[0].确认时间 !== '' ? this.confirmationTime = response.data[0].确认时间.substring(0, 10) : this.confirmationTime = '未确认'
+          } else if (response.data[0].类型.toString() === '4') {
+            this.isMaterials = '已创建'
+            this.materialsType = '外购备料'
+            this.active = '2'
+            response.data[0].下料员 !== null && response.data[0].下料员 !== '' ? this.Cutter = response.data[0].下料员 : this.Cutter = '未确认'
+            response.data[0].确认时间 !== null && response.data[0].确认时间 !== '' ? this.confirmationTime = response.data[0].确认时间.substring(0, 10) : this.confirmationTime = '未确认'
+          }
+        }
+      })
+      SelectPart(0, '', 0, '', 0, '', 1, this.searchPick, 0, '', 0, '', 0, '', '', '', '').then(response => {
+        console.log(response, 8)
+        for (let i = 0; i < this.activities.length; i++) {
+          if (response.data[0].考核状态.toString() === this.activities[i].id.toString()) {
+            for (let j = 0; j <= i; j++) {
+              this.activities[j].type = 'success'
+            }
+            this.activities[i + 1].type = 'warning'
+          }
+        }
+      })
+      SelectOut(item.name).then(response => {
+        console.log(response, 87633)
+        if (response.data[0].状态编号.toString() === '1') {
+          this.isOut = '是'
+          this.active1 = '1'
+          this.outName = ''
+          this.outTime = '未到货检验'
+          for (let i = 0; i < response.data.length; i++) {
+            if (i === 0) {
+              this.outName = response.data[i].外协工序
+            } else {
+              this.outName = this.outName + '、' + response.data[i].外协工序
+            }
+          }
+        } else if (response.data[0].状态编号.toString() === '2') {
+          this.isOut = '是'
+          this.active1 = '2'
+          this.outName = ''
+          this.outTime = '未到货检验'
+          for (let i = 0; i < response.data.length; i++) {
+            if (i === 0) {
+              this.outName = response.data[i].外协工序
+            } else {
+              this.outName = this.outName + '、' + response.data[i].外协工序
+            }
+          }
+        } else if (response.data[0].状态编号.toString() === '3') {
+          this.isOut = '是'
+          this.active1 = '3'
+          this.outName = ''
+          this.outTime = '未到货检验'
+          for (let i = 0; i < response.data.length; i++) {
+            if (i === 0) {
+              this.outName = response.data[i].外协工序
+            } else {
+              this.outName = this.outName + '、' + response.data[i].外协工序
+            }
+          }
+        } else if (response.data[0].状态编号.toString() === '4') {
+          this.isOut = '是'
+          this.active1 = '4'
+          this.outName = ''
+          this.outTime = response.data[0].检验日期
+          for (let i = 0; i < response.data.length; i++) {
+            if (i === 0) {
+              this.outName = response.data[i].外协工序
+            } else {
+              this.outName = this.outName + '、' + response.data[i].外协工序
+            }
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-textarea__inner, .el-radio__inner, .el-input__inner{
+    border: 1px solid #C0C4CC !important
+  }
+  .text{
+    font-size: 14px;
+  }
+  .sudoku_row{
+    height: 120px;
+    padding: 5px;
+    /*overflow-x: scroll;*/
+    display: flex;
+    align-items: center;
+    /*flex-wrap: wrap;*/
+  }
+  .sudoku_item{
+    margin-right: 10px;
+    display: flex;
+    height: 110px;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    /*padding-top: 10px;*/
+    /*padding-bottom: 10px;*/
+  }
+  .opacity{
+    opacity: 0.4;
+    background: #e5e5e5;
+  }
+  .sudoku_item img{
+    margin-bottom: 3px;
+    display: block;
+  }
+  .main{
+     border: 1px solid  #DCDFE6;
+     width:91.5%;
+     overflow-y: hidden;
+     overflow-x: auto;
+     color: #000;
+     font-size: 16px;
+     height: 130px;
+   }
+  .main p{height:300px;}
+  /*-------滚动条整体样式----*/
+  .main::-webkit-scrollbar {
+    width:8px;
+    height:8px;
+  }
+  /*滚动条里面小方块样式*/
+  .main::-webkit-scrollbar-thumb {
+    border-radius:100px;
+    -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
+    background:#DCDFE6;
+  }
+  /*滚动条里面轨道样式*/
+  .main::-webkit-scrollbar-track {
+    -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
+    border-radius:0;
+    background:white;
+  }
+</style>
diff --git a/src/views/Outsourcing/OutsourcingQCSearch/index.vue b/src/views/Outsourcing/OutsourcingQCSearch/index.vue
index a0da4aa5..c4a471a8 100644
--- a/src/views/Outsourcing/OutsourcingQCSearch/index.vue
+++ b/src/views/Outsourcing/OutsourcingQCSearch/index.vue
@@ -1,10 +1,14 @@
 <template>
   <div class="app-container">
     <el-card>
-      <div slot="header">
+      <div slot="header" class="header">
+        <span>外协到货单号:</span>
+        <el-input v-model="orderNumber" clearable style="width: 200px" size="small"/>
+        <span>外协厂家:</span>
+        <el-input v-model="outsourcingSupplier" clearable style="width: 200px" size="small"/>
         <el-button type="success" size="small" icon="el-icon-search" style="margin-left: 10px;" @click="pageCurrent1=1;pageSize1=10;searchTable1()">查询</el-button>
       </div>
-      <el-table v-loading="" :data="tableData1" border style="width: 100%;max-height: 600px;" height="440px" size="mini" @row-click="searchTable2">
+      <el-table v-loading="" :data="tableData1" border style="width: 100%;max-height: 600px;" height="400px" size="mini" @row-click="searchTable2">
         <el-table-column label="序号" align="center" width="80" type="index"/>
         <el-table-column label="外协到货单号" align="center" min-width="100">
           <template slot-scope="scope">
@@ -16,7 +20,7 @@
             {{ scope.row.外协厂家名称 }}
           </template>
         </el-table-column>
-        <el-table-column label="操作日期" align="center" min-width="100">
+        <el-table-column label="创建日期" align="center" min-width="100">
           <template slot-scope="scope">
             {{ scope.row.操作日期 }}
           </template>
@@ -33,7 +37,7 @@
           @size-change="handleSizeChange1"
           @current-change="handleCurrentChange1"/>
       </div>
-      <el-table v-loading="" :data="tableData2" :summary-method="getSummaries" show-summary border style="width: 100%" size="mini">
+      <el-table v-loading="" :data="tableData2" :summary-method="getSummaries" show-summary border style="width: 100%;min-height: 400px" height="400px" size="mini">
         <el-table-column label="序号" align="center" width="80" type="index"/>
         <el-table-column label="零件名称" align="center" min-width="120">
           <template slot-scope="scope">
@@ -151,6 +155,8 @@ export default {
   name: 'OutsourcingQCSearch',
   data() {
     return {
+      orderNumber: '',
+      outsourcingSupplier: '',
       tableData1: [],
       pageCurrent1: 1,
       pageSize1: 10,
@@ -226,8 +232,10 @@ export default {
     },
     // 查询到货单列表
     searchTable1() {
-      searchTable1(this.pageCurrent1, this.pageSize1).then(response => {
-        console.log(response.data, 1)
+      let check1, check2
+      this.orderNumber ? check1 = 1 : check1 = 0
+      this.outsourcingSupplier ? check2 = 1 : check2 = 0
+      searchTable1(this.pageCurrent1, this.pageSize1, check1, this.orderNumber, check2, this.outsourcingSupplier).then(response => {
         this.tableData1 = response.data.rows
         this.total1 = response.data.total
       })
@@ -242,7 +250,6 @@ export default {
       this.searchTable1()
     },
     searchTable2(row) {
-      console.log(row, 2)
       searchTable2(row.外协到货单流水号).then(response => {
         this.tableData2 = response.data
       })
@@ -251,12 +258,13 @@ export default {
       searchTableDetail(type, num).then(response => {
         this.gridData = response.data
       })
-      console.log(type)
     }
   }
 }
 </script>
 
 <style scoped>
-
+  .header span{
+    margin: 0 0 0 20px;
+  }
 </style>
diff --git a/src/views/PurchasingCenter/PurchaseSituationSearch/index.vue b/src/views/PurchasingCenter/PurchaseSituationSearch/index.vue
index cc37de06..17ddc5c9 100644
--- a/src/views/PurchasingCenter/PurchaseSituationSearch/index.vue
+++ b/src/views/PurchasingCenter/PurchaseSituationSearch/index.vue
@@ -1,27 +1,37 @@
 <template>
   <div class="app-container">
     <el-card>
-      <span>机床编号:</span>
-      <el-select v-model="machineNumberValue" filterable placeholder="机床编号" size="small" clearable @change="machineChange">
-        <el-option
-          v-for="item in machineNumber"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-          <div style="float: left">{{ item.label }}</div>
-          <div style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</div>
-        </el-option>
-      </el-select>
-      <span>组号:</span>
-      <el-select v-model="groupNumberValue" placeholder="组号" size="small" clearable>
-        <el-option
-          v-for="item in groupNumber"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"/>
-      </el-select>
-      <el-button type="success" size="small" icon="el-icon-search" style="margin-left: 15px" @click="searchTable()">查询</el-button>
-      <el-button type="warning" size="small" icon="el-icon-download" style="margin-left: 15px" @click="exportDetail()">导出</el-button>
+      <el-row>
+        <span>机床编号:</span>
+        <el-select v-model="machineNumberValue" filterable placeholder="机床编号" size="small" clearable @change="machineChange">
+          <el-option
+            v-for="item in machineNumber"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+            <div style="float: left">{{ item.label }}</div>
+            <div style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</div>
+          </el-option>
+        </el-select>
+        <span>组&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</span>
+        <el-select v-model="groupNumberValue" placeholder="组号" size="small" clearable>
+          <el-option
+            v-for="item in groupNumber"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"/>
+        </el-select>
+        <span>名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</span>
+        <el-input v-model="name" placeholder="名称" size="small" clearable style="width:200px"/>
+      </el-row>
+      <el-row style="margin-top:10px">
+        <span>规&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:</span>
+        <el-input v-model="spec" placeholder="规格" size="small" clearable style="width:200px"/>
+        <span>型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</span>
+        <el-input v-model="model" placeholder="型号" size="small" clearable style="width:200px"/>
+        <el-button type="success" size="small" icon="el-icon-search" style="margin-left: 15px" @click="searchTable()">查询</el-button>
+        <el-button type="warning" size="small" icon="el-icon-download" style="margin-left: 15px" @click="exportDetail()">导出</el-button>
+      </el-row>
     </el-card>
 
     <el-tabs v-model="PartType" type="border-card" @tab-click="searchTable()">
@@ -305,6 +315,9 @@ export default {
   name: '', // 采购件采购查询
   data() {
     return {
+      name: '',
+      spec: '',
+      model: '',
       machineNumberValue: '',
       machineNumber: [],
       groupNumberValue: '',
@@ -486,28 +499,37 @@ export default {
       this.searchTable2()
     },
     searchTable0() { // 查询标准件
-      let check1, check2
+      let check1, check2, check3, check4, check5
       this.machineNumberValue ? check1 = 1 : check1 = 0
       this.groupNumberValue ? check2 = 1 : check2 = 0
-      searchTable1(check1, this.machineNumberValue, check2, this.groupNumberValue, this.pageCurrent0, this.pageSize0, 1).then(response => {
+      this.name ? check3 = 1 : check3 = 0
+      this.spec ? check4 = 1 : check4 = 0
+      this.model ? check5 = 1 : check5 = 0
+      searchTable1(check1, this.machineNumberValue, check2, this.groupNumberValue, this.pageCurrent0, this.pageSize0, 1, check3, this.name, check4, this.spec, check5, this.model).then(response => {
         this.tableData0 = response.data.rows
         this.total0 = response.data.total
       })
     },
     searchTable1() { // 查询外购件
-      let check1, check2
+      let check1, check2, check3, check4, check5
       this.machineNumberValue ? check1 = 1 : check1 = 0
       this.groupNumberValue ? check2 = 1 : check2 = 0
-      searchTable1(check1, this.machineNumberValue, check2, this.groupNumberValue, this.pageCurrent1, this.pageSize1, 2).then(response => {
+      this.name ? check3 = 1 : check3 = 0
+      this.spec ? check4 = 1 : check4 = 0
+      this.model ? check5 = 1 : check5 = 0
+      searchTable1(check1, this.machineNumberValue, check2, this.groupNumberValue, this.pageCurrent1, this.pageSize1, 2, check3, this.name, check4, this.spec, check5, this.model).then(response => {
         this.tableData1 = response.data.rows
         this.total1 = response.data.total
       })
     },
     searchTable2() { // 查询基本件
-      let check1, check2
+      let check1, check2, check3, check4, check5
       this.machineNumberValue ? check1 = 1 : check1 = 0
       this.groupNumberValue ? check2 = 1 : check2 = 0
-      searchTable2(check1, this.machineNumberValue, check2, this.groupNumberValue, this.pageCurrent2, this.pageSize2).then(response => {
+      this.name ? check3 = 1 : check3 = 0
+      this.spec ? check4 = 1 : check4 = 0
+      this.model ? check5 = 1 : check5 = 0
+      searchTable2(check1, this.machineNumberValue, check2, this.groupNumberValue, this.pageCurrent2, this.pageSize2, check3, this.name, check4, this.spec, check5, this.model).then(response => {
         this.tableData2 = response.data.rows
         this.total2 = response.data.total
       })
diff --git a/src/views/PurchasingCenter/PurchaseTaskAllocate/index.vue b/src/views/PurchasingCenter/PurchaseTaskAllocate/index.vue
index 67f090c0..4f1d21dc 100644
--- a/src/views/PurchasingCenter/PurchaseTaskAllocate/index.vue
+++ b/src/views/PurchasingCenter/PurchaseTaskAllocate/index.vue
@@ -611,6 +611,25 @@
         </div>
       </el-tab-pane>
     </el-tabs>
+    <el-card>
+      <div v-if="Number(token)===2" style="width:100%">
+        <el-divider content-position="right">
+          <el-button type="text" @click="searchUnallocatePartNumber">刷新</el-button> | 待分配零件数
+        </el-divider>
+        <el-row>
+          <el-col v-for="(machine,index) in machines" :key="index" style="width: 200px">
+            <el-card shadow="hover" class="sudoku_item" style="height:80px;width: 90%" @click.native="clickCard(machine.项目流水号, machine.机床流水号)">
+              <el-badge :value="machine.未分配零件数">
+                <div style="width: 100px;height:50px;margin:0" class="sudoku_item">
+                  {{ machine.机床图号 }}
+                </div>
+              </el-badge>
+            </el-card>
+          </el-col>
+        </el-row>
+        <el-divider content-position="right"/>
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -618,11 +637,14 @@
 import { initMaterialCategory, initMaterialVariety, initProject, initBuyer, searchMachine, searchGroup, searchTable1, searchTable2, allocateTask1,
   allocateTask2, executeReturn1, executeReturn2, retract1, retract2 } from '@/api/PurchasingCenter/PurchaseTaskAllocate'
 import { mapGetters } from 'vuex'
+import request from '@/utils/request'
 
 export default {
   name: '', // 采购任务分配
   data() {
     return {
+      timer2: '',
+      machines: [],
       source: [
         {
           text: 'BZ',
@@ -707,14 +729,42 @@ export default {
   computed: {
     ...mapGetters([
       'name',
+      'token',
       'id'
     ])
   },
   created() {
     this.searchTable0() // 查表1
     this.fetchData() // 初始化数据
+    this.searchUnallocatePartNumber()
+    this.timer2 = setInterval(this.searchUnallocatePartNumber, 20 * 60 * 1000) // 20 分钟一刷新
+  },
+  beforeDestroy() {
+    clearInterval(this.timer2)
   },
   methods: {
+    // 选择机床
+    clickCard(project, machine) {
+      this.projectValue = project
+      this.machine = []
+      this.machineValue = ''
+      this.group = []
+      this.groupValue = ''
+      searchMachine(this.projectValue).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.machine.push({
+            value: response.data[i].机床流水号,
+            label: response.data[i].机床图号,
+            name: response.data[i].机床名称
+          })
+        }
+        this.machineValue = machine
+        this.materialStatusValue = [1]
+        this.searchTable0()
+        this.searchTable1()
+        this.searchTable2()
+      })
+    },
     filterSource(value, row) {
       return Number(row['零件类型']) === Number(value)
     },
@@ -994,6 +1044,28 @@ export default {
           })
         })
       }
+    },
+    async searchUnallocatePartNumber() {
+      this.machines = []
+      await request({
+        url: '',
+        method: 'post',
+        data: {
+          type: '3',
+          name: ` select 项目流水号,机床流水号,机床图号,sum(未分配零件数) as 未分配零件数 from (
+                  select 项目流水号,机床流水号,机床图号,COUNT(*) as 未分配零件数 from MRP_计划订单_组件零件清单_标准件和外购件_视图
+                  where 人员编号 is null
+                  group by 项目流水号,机床流水号,机床图号
+                  union all
+                  select 项目流水号,机床流水号,机床图号,COUNT(*) as 未分配零件数 from MRP_计划订单_组件零件清单_基本件_视图
+                  where 人员编号 is null
+                  group by 项目流水号,机床流水号,机床图号
+                  ) as tb1
+                  group by 项目流水号,机床流水号,机床图号`
+        }
+      }).then(res => {
+        this.machines = res.data
+      })
     }
   }
 }
@@ -1016,3 +1088,45 @@ export default {
     margin: 10px 0 10px 10px;
   }
 </style>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .item {
+    margin-top: 10px;
+    margin-right: 40px;
+  }
+  .sudoku_row{
+    display: flex;
+    align-items: center;
+    width:100%;
+    flex-wrap: wrap;
+  }
+  .sudoku_item{
+    margin-bottom: 20px;
+    margin-left: 20px;
+    /*border: 1px solid red;*/
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width:15%;
+    height: 200px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+  .opacity{
+    opacity: 0.4;
+    background: #e5e5e5;
+  }
+  .sudoku_item img{
+    margin-bottom: 3px;
+    display: block;
+  }
+  .dashboard {
+    &-container {
+      margin: 30px;
+    }
+    &-text {
+      font-size: 30px;
+      line-height: 46px;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 707ff73a..4207fe8a 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -13,22 +13,6 @@
           </div>
         </el-card>
         <el-divider content-position="right"/>
-        <div v-if="Number(token)===2" style="width:100%">
-          <el-divider content-position="right">待分配零件数</el-divider>
-          <el-row>
-            <el-col v-for="(machine,index) in machines" :key="index" style="width: 200px">
-              <el-card shadow="hover" class="sudoku_item" style="height:80px;width: 90%" @click.native="clickCard()">
-                <el-badge :value="machine.未分配零件数">
-                  <div style="width: 100px;height:50px;margin:0" class="sudoku_item">
-                    {{ machine.机床图号 }}
-                  </div>
-                </el-badge>
-              </el-card>
-            </el-col>
-          </el-row>
-
-          <el-divider content-position="right"/>
-        </div>
       </div>
     </div>
   </el-card>
@@ -45,9 +29,7 @@ export default {
       sudokus: [],
       curSelect: null,
       number: '',
-      timer: '',
-      timer2: '',
-      machines: []
+      timer: ''
     }
   },
   computed: {
@@ -59,18 +41,12 @@ export default {
   mounted() {
     this.getFileList()
     this.timer = setInterval(this.getFileList, 60 * 60 * 1000) // 60 分钟一刷新
-    this.searchUnallocatePartNumber()
-    this.timer2 = setInterval(this.searchUnallocatePartNumber, 20 * 60 * 1000) // 20 分钟一刷新
+    this.drawLine()
   },
   beforeDestroy() {
     clearInterval(this.timer)
-    clearInterval(this.timer2)
   },
   methods: {
-    // 选择机床
-    clickCard() {
-      this.$router.push({ path: '/PurchaseTaskAllocate/index' })
-    },
     async getFileList() {
       await request({
         url: '',
@@ -104,34 +80,32 @@ export default {
           value: res.data[0].Column1
         })
       })
-    },
-    async searchUnallocatePartNumber() {
-      this.machines = []
-      await request({
-        url: '',
-        method: 'post',
-        data: {
-          type: '3',
-          name: ` select 项目流水号,机床流水号,机床图号,sum(未分配零件数) as 未分配零件数 from (
-                  select 项目流水号,机床流水号,机床图号,COUNT(*) as 未分配零件数 from MRP_计划订单_组件零件清单_标准件和外购件_视图
-                  where 人员编号 is null
-                  group by 项目流水号,机床流水号,机床图号
-                  union all
-                  select 项目流水号,机床流水号,机床图号,COUNT(*) as 未分配零件数 from MRP_计划订单_组件零件清单_基本件_视图
-                  where 人员编号 is null
-                  group by 项目流水号,机床流水号,机床图号
-                  ) as tb1
-                  group by 项目流水号,机床流水号,机床图号`
-        }
-      }).then(res => {
-        this.machines = res.data
-      })
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+  /*.text {*/
+    /*font-size: 14px;*/
+  /*}*/
+
+  /*.item {*/
+    /*margin-bottom: 18px;*/
+  /*}*/
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    width: 100%
+  }
   .item {
     margin-top: 10px;
     margin-right: 40px;
@@ -151,7 +125,7 @@ export default {
     align-items: center;
     flex-direction: column;
     width:15%;
-    height: 200px;
+    height: 80px;
     padding-top: 10px;
     padding-bottom: 10px;
   }