oe

src/page/index.vue

@@ -6,11 +6,11 @@
        <div class="barndBox">
           当前品牌：
           <div class="barnd">
-            <img src="http://img.db.66km.cn/carbrandlogo/B - 比亚迪.png" alt="" class="barndLogo">
-            <div class="barndTxt">比亚迪比亚迪比亚迪</div>
+           <!-- <img src="http://img.db.66km.cn/carbrandlogo/B - 比亚迪.png" alt="" class="barndLogo"> -->
+            <div class="barndTxt">{{brand_name}}</div>
            </div>
            <div class="topkk">选择品牌</div>
-           <div class="topkk">OEM查询</div>
+           <div class="topkk" @click="oemClick">OEM查询</div>
        </div>
      </div>
      <div class="toConfigure">
@@ -199,14 +199,18 @@
          </div>
       </div>
      </div>
-
+     <oem :show.sync="oemFlag" @done="getOemDetail" :id.sync="epc_id"></oem>
   </div>
 </template>
 
 <script>
-  import { fetchPost, fetchGet, fetchPut, fetchDelete, baseURL } from '@/utils/request'
+import { fetchPost, fetchGet, fetchPut, fetchDelete, baseURL } from '@/utils/request'
+import oem from './oem'
 export default {
-  name: 'HelloWorld',
+  name: 'index',
+  components: {
+    oem
+  },
   data () {
     return {
        groupShow:false,  //总组的显示
@@ -256,9 +260,28 @@ export default {
        childrenparam:'',
        childrentoken:'',
        childrenTime:'',
+       oemFlag:false,
+       epc_id:'',
+       oemData:'',
     }
   },
   methods:{
+    getOemDetail(e){
+      console.log(e);
+      this.oemData=e
+      this.getPartsPc2()
+    },
+    oemClick(){
+      if(this.brand_name){
+         this.oemFlag=true;
+      }else{
+        this.$message({
+               message: '请先输入VIN获取品牌',
+               type: 'warning'
+         });
+      }
+
+    },
     carConfigClick(index,item){
       this.carConfigIndex=index;
       this.param=item.param;
@@ -288,6 +311,7 @@ export default {
          if(res.data.number==200||res.data.number==5212){
               this.brand_name=res.data.result.brand_name;
               this.access_time=res.data.result.access_time;
+              this.epc_id=res.data.result.epc_id
               if(res.data.result.restrains.length>0){
                 this.restrains=res.data.result.restrains;
                 this.groupShow=false;
@@ -337,15 +361,18 @@ export default {
                  this.carConfig=true;
                  this.childrenShow=false;
                }else{
-                 this.zlist=res.data.result.list;
-                 this.navfName=res.data.result.caption
-                 this.groupShow=true;
-                 this.carConfig=false;
-                 this.zzName=this.zlist[0].caption;
-                 this.param=this.zlist[0].param;
-                 this.token=this.zlist[0].token;
-                  this.navchildrenName=this.zlist[0].caption
-                 this.getSubgroupPc()
+
+                   this.zlist=res.data.result.list;
+                   this.navfName=res.data.result.caption
+                   this.groupShow=true;
+                   this.carConfig=false;
+                   this.zzName=this.zlist[0].caption;
+                   this.param=this.zlist[0].param;
+                   this.token=this.zlist[0].token;
+                    this.navchildrenName=this.zlist[0].caption
+                   this.getSubgroupPc()
+
+
                }
          }else{
            this.$message({
@@ -385,7 +412,7 @@ export default {
          if(res.data.number==200||res.data.number==5212){
              this.access_time=res.data.result.access_time;
              this.ckTimeOne=res.data.result.access_time;
-             if(res.data.result.level_identify=='group_restrain'||res.data.result.level_identify=='subgroup'){  //约束
+             if(res.data.result.level_identify=='group_restrain'){  //约束
                console.log("约束1")
                this.restrainShow1=true;
                this.restrainList1=res.data.result.list;
@@ -393,11 +420,19 @@ export default {
                this.navchildrenNameTitle=res.data.result.caption
                //console.log(this.zkName1)
              }else{
-                this.lastShow=true;
-                this.zkName1=res.data.result.caption;
-                 this.navchildrenNameTitle=res.data.result.caption
-                this.childrenList=res.data.result.list;
-                this.oldList= this.childrenList
+                if(res.data.result.list[0].next_restrain==1){
+                   this.restrainShow1=true;
+                   this.restrainList1=res.data.result.list;
+                   this.zkName1=res.data.result.caption;
+                   this.navchildrenNameTitle=res.data.result.caption
+                 }else{
+                   this.lastShow=true;
+                  this.zkName1=res.data.result.caption;
+                   this.navchildrenNameTitle=res.data.result.caption
+                  this.childrenList=res.data.result.list;
+                  this.oldList= this.childrenList
+                }
+
              }
 
 
@@ -620,6 +655,42 @@ export default {
 
          })
     },
+    getPartsPc2(){
+      this.restrainShow1=false
+      this.restrainShow2=false
+      this.restrainShow3=false
+      this.childrenCk1=false;
+      this.carConfigName=''
+      this.childrenShow2=false;
+      this.restrainShow4=false;
+      this.lastShow=false;
+       this.childrenShow=true;
+      fetchGet('/advancedEpc/getPartsPc', {
+        vin:this.vin,
+        access_time:this.oemData.threeTime,
+        param:this.oemData.param,
+        token:this.oemData.token
+       }).then(res => {
+
+         if(res.data.number==200||res.data.number==5212){
+             //this.childrenList=res.data.result.list;
+             //this.access_time=res.data.result.access_time;
+            //  console.log(res.data.result.list.image_info)
+             this.image_info=res.data.result.list.image_info[0];
+
+             this.rows=res.data.result.list.rows
+         }else{
+           this.$message({
+                  message: res.data.message,
+                  type: 'warning'
+            });
+         }
+         }).catch(err => {
+
+
+         })
+    },
+
     childrenkeyup(){
        console.log("子组件搜索")
        console.log(this.childrenss)
@@ -735,6 +806,7 @@ export default {
    margin-left: 20px;
    color: #FF4F00;
    font-size: 14px;
+   cursor: pointer;
  }
  .toConfigure{
    color: #333333;

src/page/oem.vue

@@ -0,0 +1,412 @@
+<template>
+  <el-dialog
+    title="OEM查询"
+    :visible="show"
+    width="80vw"
+    class="create-dialog"
+    @close="close"
+  >
+  <div class="oemTop">
+      <el-radio-group v-model="radioType" @change="changeradio" class="radioBox">
+        <el-radio label="0">品牌下搜索</el-radio>
+        <el-radio label="1">车型下搜索</el-radio>
+      </el-radio-group>
+      <div class="oemTopdiv">
+        <input type="text" v-model="oem" placeholder="配件名称/原厂OEM" class="vinsearch" @keyup.enter="keyup">
+        <div class="oemssBtn" @click="keyup">查询</div>
+      </div>
+  </div>
+
+  <div class="oemBox" ref="oemBox">
+     <div class="tableBoxOne" ref="tableBoxOne" v-if="tableOneShow">
+       <div class="tableTile">
+         <div class="sx"></div>
+         <div class="leftTitle">搜索结果</div>
+       </div>
+       <div class="tableBoxOnediv">
+          <el-table
+              class="el-table"
+              :data="rows"
+              :max-height="childrenHeight"
+              stripe   border
+              style="width: 100%">
+              <el-table-column
+                prop="extened"
+                label="零件号"
+                >
+                <template slot-scope="scope">
+                      <span style="color: #3F90F7;cursor: pointer;" @click="oneSpan(scope.row)">{{ scope.row.extened }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="caption"
+                label="名称">
+              </el-table-column>
+              <el-table-column
+                prop="description"
+                show-overflow-tooltip
+                label="适用车型">
+              </el-table-column>
+
+            </el-table>
+       </div>
+     </div>
+     <div class="tableBoxOne tableBoxTwo" v-if="tableTwoShow">
+       <div class="tableBoxLeft">
+         <div class="tableTile">
+           <div class="sx"></div><div class="leftTitle">搜索结果</div>
+         </div>
+         <div class="tableBoxOnediv">
+            <el-table
+                class="el-table" :data="rows"
+                :max-height="childrenHeight"
+                stripe   border style="width: 100%">
+                <el-table-column prop="extened" label="零件号">
+                  <template slot-scope="scope">
+                        <span style="color: #3F90F7;cursor: pointer;" @click="oneSpan(scope.row)">{{ scope.row.extened }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="caption" label="名称"></el-table-column>
+                <el-table-column prop="description" show-overflow-tooltip label="适用车型"></el-table-column>
+
+              </el-table>
+         </div>
+       </div>
+       <div class="tableBoxRigt">
+         <div class="tableTile">
+           <div class="sx"></div><div class="leftTitle">适用车型</div>
+         </div>
+         <div class="tableBoxOnediv" style="padding-left: 15px;">
+            <el-table
+                class="el-table" :data="carList"
+                :max-height="childrenHeight"
+                stripe   border style="width: 100%">
+                <el-table-column prop="extened" label="名称">
+                  <template slot-scope="scope">
+                        <span style="color: #3F90F7;cursor: pointer;" @click="twoSpan(scope.row)">{{ scope.row.caption }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="vin_11" show-overflow-tooltip label="车型"></el-table-column>
+                <el-table-column prop="engine_prefix" show-overflow-tooltip label="发动机"></el-table-column>
+                <el-table-column prop="trans" show-overflow-tooltip label="变速箱"></el-table-column>
+                <el-table-column prop="area" show-overflow-tooltip label="地区"></el-table-column>
+                <el-table-column prop="equips" show-overflow-tooltip label="配置"></el-table-column>
+                <el-table-column prop="grade" show-overflow-tooltip label="级别"></el-table-column>
+                <el-table-column prop="model_code" show-overflow-tooltip label="模型代码"></el-table-column>
+              </el-table>
+         </div>
+       </div>
+     </div>
+     <!-- 第三级别-->
+     <div class="tableBoxOne tableBoxTwo" v-if="tabthreeSHow">
+       <div class="tableBoxLeftThree">
+         <div class="tableTile">
+           <div class="sx"></div><div class="leftTitle">搜索结果</div>
+         </div>
+         <div class="tableBoxOnediv">
+            <el-table
+                class="el-table" :data="rows"
+                :max-height="childrenHeight"
+                stripe   border style="width: 100%">
+                <el-table-column prop="extened" label="零件号">
+                  <template slot-scope="scope">
+                        <span style="color: #3F90F7;cursor: pointer;" @click="oneSpan(scope.row)">{{ scope.row.extened }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="caption" label="名称"></el-table-column>
+                <el-table-column prop="description" show-overflow-tooltip label="适用车型"></el-table-column>
+
+              </el-table>
+         </div>
+       </div>
+       <div class="tableBoxM">
+         <div class="tableTile">
+           <div class="sx"></div><div class="leftTitle">适用车型</div>
+         </div>
+         <div class="tableBoxOnediv" style="padding-left: 15px;">
+            <el-table
+                class="el-table" :data="carList"
+                :max-height="childrenHeight"
+                stripe   border style="width: 100%">
+                <el-table-column prop="extened" label="名称">
+                  <template slot-scope="scope">
+                        <span style="color: #3F90F7;cursor: pointer;" @click="twoSpan(scope.row)">{{ scope.row.caption }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="vin_11" show-overflow-tooltip label="车型"></el-table-column>
+                <el-table-column prop="engine_prefix" show-overflow-tooltip label="发动机"></el-table-column>
+                <el-table-column prop="trans" show-overflow-tooltip label="变速箱"></el-table-column>
+                <el-table-column prop="area" show-overflow-tooltip label="地区"></el-table-column>
+                <el-table-column prop="equips" show-overflow-tooltip label="配置"></el-table-column>
+                <el-table-column prop="grade" show-overflow-tooltip label="级别"></el-table-column>
+                <el-table-column prop="model_code" show-overflow-tooltip label="模型代码"></el-table-column>
+              </el-table>
+         </div>
+       </div>
+       <div class="tableBoxRigtThree">
+         <div class="tableTile">
+           <div class="sx"></div><div class="leftTitle">搜索结果</div>
+         </div>
+         <div class="tableBoxOnediv" style="padding-left: 15px;">
+            <el-table
+                class="el-table" :data="itemList"
+                :max-height="childrenHeight"
+                stripe   border style="width: 100%">
+                 <el-table-column prop="caption" show-overflow-tooltip label="子组"></el-table-column>
+                <el-table-column prop="extened" label="零件号">
+                  <template slot-scope="scope">
+                        <span style="color: #3F90F7;cursor: pointer;" @click="threeSpan(scope.row)">{{ scope.row.partnum }}</span>
+                  </template>
+                </el-table-column>
+
+                <el-table-column prop="caption" show-overflow-tooltip label="名称"></el-table-column>
+                <el-table-column prop="group" show-overflow-tooltip label="总组"></el-table-column>
+              </el-table>
+         </div>
+       </div>
+     </div>
+  </div>
+
+
+
+  </el-dialog>
+</template>
+<script>
+import { fetchPost, fetchGet, fetchPut, fetchDelete, baseURL } from '@/utils/request'
+export default {
+
+  props: ['show', 'id',],
+  data() {
+    return {
+         radioType:'0',
+         oem:'',
+         childrenHeight:'',
+         // rows:[{
+         //   caption: "进气压力传感器",
+         //   description: "C14 CP1 CP2 CP3 CR1 CR2 CR4 CR6 CU1 CU2 CU5 CU6",
+         //   extened: "37830-RNA-A01",
+         //   param: "JBL24RL8XZ0iYM0_U3Cgbjy9zvi2jFiynuAh_Fuxz2H",
+         //   partnum: "37830RNAA01",
+         //   token: "e806381430f79274a3418f55ad496dbe",
+         //   type: "item",
+         // }],
+         rows:'',
+         tableOneShow:false,
+         tableTwoShow:false,
+         tabthreeSHow:false,
+         partnum:'',
+         carList:'',
+         itemList:'',
+         access_time:'',
+         token:'',
+         param:'',
+         threeTime:'',
+    }
+  },
+  watch: {
+    id(val) {
+      setTimeout(() => {
+          this.childrenHeight = this.$refs.oemBox.offsetHeight -100
+         console.log(this.childrenHeight)
+      }, 500)
+
+    }
+  },
+  created() {
+    setTimeout(() => {
+        this.childrenHeight = this.$refs.oemBox.offsetHeight -100
+       console.log(this.childrenHeight)
+    }, 500)
+
+  },
+  methods: {
+    threeSpan(item){
+      var token=item.token;
+      var param=item.param;
+      var data={
+        token:token,param:param,threeTime:this.threeTime
+      }
+      this.$emit('update:show', false)
+      this.$emit('done',data)
+    },
+    twoSpan(item){
+      this.token=item.token;
+      this.param=item.param;
+      this.getfindInModel()
+    },
+
+    oneSpan(item){
+      console.log(item);
+      this.partnum=item.partnum
+      this.getfindApplicableModels();
+    },
+    getfindInModel(){ //3级
+      fetchGet('/advancedEpc/findInModelPc', {
+        partnum:this.partnum,
+        epc_id: this.id,
+        token: this.token,
+        param: this.param,
+        access_time: this.access_time,
+       }).then(res => {
+         if(res.data.number==200||res.data.number==5212){
+           this.threeTime=res.data.result.access_time;
+           this.tableOneShow=false;
+           this.tableTwoShow=false;
+           this.tabthreeSHow=true;
+           this.itemList=res.data.result.list
+         }else{
+           this.$message({
+                  message: res.data.message,
+                  type: 'warning'
+            });
+         }
+       }).catch(err => {})
+    },
+    getfindApplicableModels(){  //2级
+      fetchGet('/advancedEpc/findApplicableModelsPc', {
+        partnum:this.partnum,
+         epc_id: this.id,
+       }).then(res => {
+         if(res.data.number==200||res.data.number==5212){
+           this.tableOneShow=false;
+           this.tableTwoShow=true;
+           this.access_time=res.data.result.access_time;
+           this.carList=res.data.result.list
+         }else{
+           this.$message({
+                  message: res.data.message,
+                  type: 'warning'
+            });
+         }
+
+       }).catch(err => {
+          console.log('？？？？111')
+
+       })
+    },
+    keyup(){
+      setTimeout(() => {
+          this.childrenHeight = this.$refs.oemBox.offsetHeight -100
+         console.log(this.childrenHeight)
+      }, 500)
+      this.tableOneShow=true;
+        console.log(this.oem);
+        fetchGet('/advancedEpc/findPartsPc', {
+          keyword:this.oem,
+           epc_id: this.id,
+         }).then(res => {
+           if(res.data.number==200||res.data.number==5212){
+               this.rows=res.data.result.list
+           }else{
+             this.$message({
+                    message: res.data.message,
+                    type: 'warning'
+              });
+           }
+
+         }).catch(err => {
+            console.log('？？？？111')
+
+         })
+    },
+   changeradio(){
+
+   },
+    close() {
+
+      this.$emit('update:show', false)
+      this.$emit('update:id', '')
+
+    },
+    getDetail() {
+
+    },
+
+
+  }
+
+}
+</script>
+<style >
+  .oemTop{
+    display: flex;
+    width: 100%;
+  }
+.vinsearch{
+  width: 400px;
+  height: 34px;
+  background: #FFFFFF;
+  border-radius: 4px;
+  border: 1px solid #DDDDDD;
+  line-height:34px;
+  padding-left: 10px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #666666;
+   outline: none;
+}
+.oemssBtn{
+   width: 72px;
+   height: 38px;
+   background: #FF4F00;
+  border-radius: 0px 4px 4px 0px;
+   font-weight: 400;
+   color: #FFFFFF;
+   font-size: 14px;
+   line-height: 34px;
+   text-align: center;
+   margin-left: -2px;
+   position: relative;
+ }
+ .oemTopdiv{
+   display: flex;
+ }
+ .radioBox{
+   padding-top: 10px;
+   padding-right: 40px;
+ }
+ .oemBox{
+   width: 100%;
+   height: 60vh;
+   border-radius: 4px;
+   border: 1px solid #EEEEEE;
+   margin-top: 20px;
+ }
+ .tableTile{
+   display: flex;
+ }
+ .sx{
+   width: 3px;
+   height: 12px;
+   background: #FF4F00;
+   margin-top: 18px;margin-left: 14px;
+ }
+ .leftTitle{
+   line-height: 48px;
+   font-weight: 500;
+   color: #333333;
+   font-size: 14px;
+   padding-left: 8px;
+ }
+ .tableBoxTwo{
+   display: flex;
+   justify-content: space-between;
+ }
+ .tableBoxLeft{
+   width: 50%;
+ }
+ .tableBoxRigt{
+    width: 50%;
+
+ }
+ .tableBoxRigtThree{
+   width: 33.3%;
+ }
+ .tableBoxM{
+    width: 33.3%;
+ }
+ .tableBoxLeftThree{
+   width: 33.3%;
+ }
+</style>