<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="css/vuetify.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">

    <!-- <link rel="stylesheet" type="text/css" href="css/font.css"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

</head>

<body style="background-color:transparent;">
    <div id="app">
      <v-app style="background-color:transparent;">
        <v-main>
          <v-container>
            <v-dialog
              v-model="dialog"
              width="96%"
              scrollable
              persistent
              light
              overlay-opacity="0.1"
              scrollable
              transition="dialog-bottom-transition"
            >
              <v-card style="background-color:#fff">
                <v-card-title class="text-h7">详情</v-card-title>
                <div style="overflow-y:auto;max-height:520px;">
                  <v-expansion-panels
                    v-model="panel"
                    multiple
                    style="padding:6px 12px 12px 12px;"
                  >

                    <v-expansion-panel v-if="showBox.includes('card1')">
                      <v-expansion-panel-header>
                        <span style="flex:inherit"><v-icon dense color="yellow darken-3">mdi-lightning-bolt-outline</v-icon></span>
                        <span style="position:relative;top:1px;padding-left:6px">电泳追溯信息</span>
                      </v-expansion-panel-header>
                      <v-expansion-panel-content>
                        <v-row dense style="margin-bottom:12px;">
                          <v-col cols="3">
                            <v-card elevation="1">
                              <v-simple-table dense>
                                <template v-slot:default>
                                  <thead>
                                    <tr>
                                      <th class="text-left">
                                        <v-icon small color="green darken-2" style="position:relative;top:-1px;">mdi-alpha-i-circle-outline</v-icon>
                                        <strong style="color: #424242;">热水洗工位</strong>
                                      </th>
                                    </tr>
                                    <tr>
                                      <th class="text-left">洪流槽温度</th>
                                      <th class="text-left">热水洗槽液位</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr v-for="(item,i) in electrophoresisCard1" :key="i">
                                      <td>{{ item.value1 }}</td>
                                      <td>{{ item.value2 }}</td>
                                    </tr>
                                  </tbody>
                                </template>
                              </v-simple-table>
                            </v-card>
                          </v-col>
                          <v-col cols="3">
                            <v-card elevation="1">
                              <v-simple-table dense>
                                <template v-slot:default>
                                  <thead>
                                    <tr>
                                      <th class="text-left">
                                        <v-icon small color="green darken-2" style="position:relative;top:-1px;">mdi-alpha-i-circle-outline</v-icon>
                                        <strong style="color: #424242;">预脱脂工位</strong>
                                      </th>
                                    </tr>
                                    <tr>
                                      <th class="text-left">预脱脂槽液位</th>
                                      <th class="text-left">预脱脂槽温度</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr v-for="(item,i) in electrophoresisCard2" :key="i">
                                      <td>{{ item.value1 }}</td>
                                      <td>{{ item.value2 }}</td>
                                    </tr>
                                  </tbody>
                                </template>
                              </v-simple-table>
                            </v-card>
                          </v-col>
                          <v-col cols="3">
                            <v-card elevation="1">
                              <v-simple-table dense>
                                <template v-slot:default>
                                  <thead>
                                    <tr>
                                      <th class="text-left">
                                        <v-icon small color="green darken-2" style="position:relative;top:-1px;">mdi-alpha-i-circle-outline</v-icon>
                                        <strong style="color: #424242;">脱脂工位</strong>
                                      </th>
                                    </tr>
                                    <tr>
                                      <th class="text-left">脱脂槽液位</th>
                                      <th class="text-left">脱脂槽温度</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr v-for="(item,i) in electrophoresisCard3" :key="i">
                                      <td>{{ item.value1 }}</td>
                                      <td>{{ item.value2 }}</td>
                                    </tr>
                                  </tbody>
                                </template>
                              </v-simple-table>
                            </v-card>
                          </v-col>
                          <v-col cols="3">
                            <v-card elevation="1">
                              <v-simple-table dense>
                                <template v-slot:default>
                                  <thead>
                                    <tr>
                                      <th class="text-left">
                                        <v-icon small color="green darken-2" style="position:relative;top:-1px;">mdi-alpha-i-circle-outline</v-icon>
                                        <strong style="color: #424242;">磷化工位</strong>
                                      </th>
                                    </tr>
                                    <tr>
                                      <th class="text-left">磷化槽液位</th>
                                      <th class="text-left">磷化槽温度</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr v-for="(item,i) in electrophoresisCard4" :key="i">
                                      <td>{{ item.value1 }}</td>
                                      <td>{{ item.value2 }}</td>
                                    </tr>
                                  </tbody>
                                </template>
                              </v-simple-table>
                            </v-card>
                          </v-col>
                        </v-row>  
                        <v-row dense>
                          <v-col cols="3">
                            <v-card elevation="1">
                              <v-simple-table dense>
                                <template v-slot:default>
                                  <thead>
                                    <tr>
                                      <th class="text-left">
                                        <v-icon small color="green darken-2" style="position:relative;top:-1px;">mdi-alpha-i-circle-outline</v-icon>
                                        <strong style="color: #424242;">酸洗1工位</strong>
                                      </th>
                                    </tr>
                                    <tr>
                                      <th class="text-left">酸洗1槽液位</th>
                                      <th class="text-left">酸洗1槽温度</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr v-for="(item,i) in electrophoresisCard5" :key="i">
                                      <td>{{ item.value1 }}</td>
                                      <td>{{ item.value2 }}</td>
                                    </tr>
                                  </tbody>
                                </template>
                              </v-simple-table>
                            </v-card>
                          </v-col>   
                          <v-col cols="3">
                            <v-card elevation="1">
                              <v-simple-table dense>
                                <template v-slot:default>
                                  <thead>
                                    <tr>
                                      <th class="text-left">
                                        <v-icon small color="green darken-2" style="position:relative;top:-1px;">mdi-alpha-i-circle-outline</v-icon>
                                        <strong style="color: #424242;">酸洗2工位</strong>
                                      </th>
                                    </tr>
                                    <tr>
                                      <th class="text-left">酸洗2槽液位</th>
                                      <th class="text-left">酸洗2槽温度</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr v-for="(item,i) in electrophoresisCard6" :key="i">
                                      <td>{{ item.value1 }}</td>
                                      <td>{{ item.value2 }}</td>
                                    </tr>
                                  </tbody>
                                </template>
                              </v-simple-table>
                            </v-card>
                          </v-col> 
                          <v-col cols="4">
                            <v-card elevation="1">
                              <v-simple-table dense>
                                <template v-slot:default>
                                  <thead>
                                    <tr>
                                      <th class="text-left">
                                        <v-icon small color="green darken-2" style="position:relative;top:-1px;">mdi-alpha-i-circle-outline</v-icon>
                                        <strong style="color: #424242;">电泳工位</strong>
                                      </th>
                                    </tr>
                                    <tr>
                                      <th class="text-left">电泳RT1温度</th>
                                      <th class="text-left">电泳槽液位1</th>
                                      <th class="text-left">电泳电压值</th>
                                      <th class="text-left">电泳电流值</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr v-for="(item,i) in electrophoresisCard6" :key="i">
                                      <td>{{ item.value1 }}</td>
                                      <td>{{ item.value2 }}</td>
                                    </tr>
                                  </tbody>
                                </template>
                              </v-simple-table>
                            </v-card>
                          </v-col> 
                          <v-col cols="2">
                            <v-card elevation="1">
                              <v-simple-table dense>
                                <template v-slot:default>
                                  <thead>
                                    <tr>
                                      <th class="text-left">
                                        <v-icon small color="green darken-2" style="position:relative;top:-1px;">mdi-alpha-i-circle-outline</v-icon>
                                        <strong style="color: #424242;">烘干室</strong>
                                      </th>
                                    </tr>
                                    <tr>
                                      <th class="text-left">升温段室体温度</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr v-for="(item,i) in electrophoresisCard8" :key="i">
                                      <td>{{ item.value1 }}</td>
                                      <td>{{ item.value2 }}</td>
                                    </tr>
                                  </tbody>
                                </template>
                              </v-simple-table>
                            </v-card>
                          </v-col> 
                        </v-row>
                      </v-expansion-panel-content>
                    </v-expansion-panel>
              
                    <v-expansion-panel v-if="showBox.includes('card2')">
                      <v-expansion-panel-header>
                        <span style="flex:inherit"><v-icon dense color="indigo darken-3">mdi-tools</v-icon></span>
                        <span style="position:relative;top:1px;padding-left:6px">机加追溯信息</span>
                      </v-expansion-panel-header>
                      <v-expansion-panel-content> 
                        <v-row dense>
                          <v-col cols="12">
                            <v-card elevation="1">
                              <v-simple-table dense>
                                <template v-slot:default>
                                  <thead>
                                    <tr>
                                      <th class="text-left">单据号码</th>
                                      <th class="text-left">主轴转速</th>
                                      <th class="text-left">当前程序号</th>
                                      <th class="text-left">刀具号</th>
                                      <th class="text-left">进给倍率</th>
                                      <th class="text-left">主轴倍率</th>
                                      <th class="text-left">切削速度</th>
                                      <th class="text-left">主轴速度</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr v-for="(item,i) in mechanicalCard" :key="i">
                                      <td>{{ item.value1 }}</td>
                                      <td>{{ item.value2 }}</td>
                                      <td>{{ item.value3 }}</td>
                                      <td>{{ item.value4 }}</td>
                                      <td>{{ item.value5 }}</td>
                                      <td>{{ item.value6 }}</td>
                                      <td>{{ item.value7 }}</td>
                                      <td>{{ item.value8 }}</td>
                                    </tr>
                                  </tbody>
                                </template>
                              </v-simple-table>
                            </v-card>
                          </v-col>   
                        </v-row>
                      </v-expansion-panel-content>
                    </v-expansion-panel>

                    <v-expansion-panel v-if="showBox.includes('card3')">
                      <v-expansion-panel-header>
                        <span style="flex:inherit"><v-icon dense color="red darken-1">mdi-sprinkler</v-icon></span>
                        <span style="position:relative;top:1px;padding-left:6px">喷蜡追溯信息</span>
                      </v-expansion-panel-header>
                      <v-expansion-panel-content> 
                        <v-row dense>
                          <v-col cols="12">
                            <v-card elevation="1">
                              <v-simple-table dense>
                                <template v-slot:default>
                                  <thead>
                                    <tr>
                                      <th class="text-left">单据号码</th>
                                      <th class="text-left">工件喷蜡时间</th>
                                      <th class="text-left">每工件喷蜡量</th>
                                      <th class="text-left">蜡液温度</th>
                                      <th class="text-left">孔位</th>
                                      <th class="text-left">程序号</th>
                                      <th class="text-left">返工</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr v-for="(item,i) in sprinkleCard" :key="i">
                                      <td>{{ item.value1 }}</td>
                                      <td>{{ item.value2 }}</td>
                                      <td>{{ item.value3 }}</td>
                                      <td>{{ item.value4 }}</td>
                                      <td>{{ item.value5 }}</td>
                                      <td>{{ item.value6 }}</td>
                                      <td>{{ item.value7 }}</td>
                                    </tr>
                                  </tbody>
                                </template>
                              </v-simple-table>
                            </v-card>
                          </v-col>   
                        </v-row>
                      </v-expansion-panel-content>
                    </v-expansion-panel>

                    <v-expansion-panel v-if="showBox.includes('card4')">
                      <v-expansion-panel-header>
                        <span style="flex:inherit"><v-icon dense color="cyan darken-1">mdi-account-convert</v-icon></span>
                        <span style="position:relative;top:1px;padding-left:6px">返工追溯信息</span>
                      </v-expansion-panel-header>
                      <v-expansion-panel-content> 
                        <v-row dense>
                          <v-col cols="12">
                            <v-card elevation="1">
                              <v-simple-table dense>
                                <template v-slot:default>
                                  <thead>
                                    <tr>
                                      <th class="text-left">单据号码</th>
                                      <th class="text-left">缺陷信息</th>
                                      <th class="text-left">检验人</th>
                                      <th class="text-left">返回结果</th>
                                      <th class="text-left">返修人</th>
                                      <th class="text-left">缺陷时间</th>
                                      <th class="text-left">缺陷峰值</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr v-for="(item,i) in reworkCard" :key="i">
                                      <td>{{ item.value1 }}</td>
                                      <td>{{ item.value2 }}</td>
                                      <td>{{ item.value3 }}</td>
                                      <td>{{ item.value4 }}</td>
                                      <td>{{ item.value5 }}</td>
                                      <td>{{ item.value6 }}</td>
                                      <td>{{ item.value7 }}</td>
                                    </tr>
                                  </tbody>
                                </template>
                              </v-simple-table>
                            </v-card>
                          </v-col>   
                        </v-row>
                      </v-expansion-panel-content>
                    </v-expansion-panel>

                    <v-expansion-panel v-if="showBox.includes('card5')">
                      <v-expansion-panel-header>
                        <span style="flex:inherit"><v-icon dense color="teal accent-3">mdi-account-wrench</v-icon></span>
                        <span style="position:relative;top:1px;padding-left:6px">装配追溯信息</span>
                      </v-expansion-panel-header>
                      <v-expansion-panel-content> 
                        <v-row dense>
                          <v-col cols="6">
                            <v-card elevation="1">
                              <v-simple-table dense>
                                <template v-slot:default>
                                  <thead>
                                    <tr>
                                      <th class="text-left">单据号码</th>
                                      <th class="text-left">端跳检测值</th>
                                      <th class="text-left">压力值</th>
                                      <th class="text-left">扭矩</th>
                                      <th class="text-left">角度值</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr v-for="(item,i) in assembleCard" :key="i">
                                      <td>{{ item.value1 }}</td>
                                      <td>{{ item.value2 }}</td>
                                      <td>{{ item.value3 }}</td>
                                      <td>{{ item.value4 }}</td>
                                      <td>{{ item.value5 }}</td>
                                    </tr>
                                  </tbody>
                                </template>
                              </v-simple-table>
                            </v-card>
                          </v-col>   
                        </v-row>
                      </v-expansion-panel-content>
                    </v-expansion-panel>

                    <v-expansion-panel v-if="showBox.includes('card6')">
                      <v-expansion-panel-header>
                        <span style="flex:inherit"><v-icon dense color="lime lighten-1">mdi-palette-swatch-variant</v-icon></span>
                        <span style="position:relative;top:1px;padding-left:6px">物料追溯信息</span>
                      </v-expansion-panel-header>
                      <v-expansion-panel-content> 
                        <v-row dense>
                          <v-col cols="12">
                            <v-card elevation="1">
                              <v-simple-table dense>
                                <template v-slot:default>
                                  <thead>
                                    <tr>
                                      <th class="text-left">单据号码</th>
                                      <th class="text-left">入库批次</th>
                                      <th class="text-left">物料编码</th>
                                      <th class="text-left">物料条码</th>
                                      <th class="text-left">操作人</th>
                                      <th class="text-left">操作时间</th>
                                      <th class="text-left">供应商</th>
                                      <th class="text-left">质量状态</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr v-for="(item,i) in materialCard" :key="i">
                                      <td>{{ item.value1 }}</td>
                                      <td>{{ item.value2 }}</td>
                                      <td>{{ item.value3 }}</td>
                                      <td>{{ item.value4 }}</td>
                                      <td>{{ item.value5 }}</td>
                                      <td>{{ item.value6 }}</td>
                                      <td>{{ item.value7 }}</td>
                                      <td>{{ item.value8 }}</td>
                                    </tr>
                                  </tbody>
                                </template>
                              </v-simple-table>
                            </v-card>
                          </v-col>   
                        </v-row>
                      </v-expansion-panel-content>
                    </v-expansion-panel>

                  </v-expansion-panels>
                </div>
                <v-divider></v-divider>
        
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="primary" text @click="close">关闭</v-btn>
                </v-card-actions>
              </v-card>            
            </v-dialog>
          </v-container>
        </v-main>
      </v-app>
    </div>
    
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/vuetify.min.js"></script>
    <script>
      new Vue({
        el: '#app',
        vuetify: new Vuetify({
          icons: {
            iconfont: 'mdi', 
          },
        }),
        data: () => ({
          dialog:false,
          panel:[],
          // panel: [0,1,2],


           // 控制哪些 模块显示  默认值 ['card1','card2','card3','card4','card5','card6'], 
          showBox:['card1','card2','card3','card4','card5','card6'], 


          // 电泳追溯信息 热水洗工位 数据
          electrophoresisCard1: [{value1: '79 °C',value2: '159 mm'}],
          // 电泳追溯信息 预脱脂工位 数据
          electrophoresisCard2: [{value1: '87 mm',value2: '39 °C'}],
          // 电泳追溯信息 脱脂工位 数据
          electrophoresisCard3: [{value1: '17 mm',value2: '52 °C'}],
          // 电泳追溯信息 磷化工位 数据
          electrophoresisCard4: [{value1: '317 mm',value2: '152 °C'}],
          // 电泳追溯信息 酸洗1工位 数据
          electrophoresisCard5: [{value1: '517 mm',value2: '352 °C'}],
          // 电泳追溯信息 酸洗2工位 数据
          electrophoresisCard6: [{value1: '256 mm',value2: '78 °C'}],
          // 电泳追溯信息 电泳工位 数据
          electrophoresisCard7: [{value1:'208 °C',value2:'35 mm',value3:'256 v',value4:'39 mn'}],
          // 电泳追溯信息 烘干室 数据
          electrophoresisCard8: [{value1: '788 °C'}],




          // 机加追溯信息 数据
          mechanicalCard: [{
            value1:'98989',
            value2:'78 KM',
            value3:'22',
            value4:'KUI87',
            value5:'60 %',
            value6:'72 %',
            value7:'763 KM',
            value8:'210 KM'
          }],


          // 喷蜡追溯信息 数据
          sprinkleCard: [{
            value1:'198989',
            value2:'2022/11/12 12:12',
            value3:'22 T',
            value4:'208 °C',
            value5:'KI-001',
            value6:'QW-09',
            value7:'4EE44RR'
          }],


          // 返工追溯信息 数据
          reworkCard: [
              {
                value1:'YU-221',
                value2:'基本缺陷',
                value3:'李某某',
                value4:'检修完成',
                value5:'张某某',
                value6:'2022/11/01 12:12',
                value7:'6712'
              },
              {
                value1:'YU-221',
                value2:'基本缺陷',
                value3:'李某某',
                value4:'检修完成',
                value5:'张某某',
                value6:'2022/11/01 12:12',
                value7:'6712'
              }
          ],



          // 装配追溯信息 数据
          assembleCard:[
            {
              value1:'OR220930000300',
              value2:'23',
              value3:'666',
              value4:'1223',
              value5:'22 °C',
            },
            {
              value1:'YTT220930000300',
              value2:'55',
              value3:'11',
              value4:'89',
              value5:'82 °C',
            },
          ],    

          
          // 物料追溯信息 数据
          materialCard:[
            {
              value1:'AS2212150017',
              value2:'2012132',
              value3:'3565103XGW01A',
              value4:'3565103XGW01A',
              value5:'张某某',
              value6:'2022/11/01 12:12',
              value7:'博世汽车部件（苏州）有限公司',
              value8:'合格'
            }
          ],


        }),
        created(){
          const that=this;
          
          window.addEventListener('message', function (event) {
            const _data=JSON.parse(event.data);
            if(_data.event=="open"){
              that.panel=[]
              that.dialog=true
            }
          },false)

        },
        methods:{
          close(){
            this.dialog = false


            setTimeout(()=>{
              window.parent.postMessage(JSON.stringify({
                event: 'closeIframe',
              }),'*')    
            },700)
          }
        }
      })
    </script>
</body>

</html>