diff --git a/src/assets/styles/archives-manage.scss b/src/assets/styles/archives-manage.scss
index 7e1468a..9e72788 100644
--- a/src/assets/styles/archives-manage.scss
+++ b/src/assets/styles/archives-manage.scss
@@ -1,580 +1,580 @@
-@import "~@/assets/styles/variables.scss";
-// archives color
-$arcPurple:#563BE1;
-$arcYellow:#FD8042;
-$arcRed:#F65163;
-$arcGreen: #1AAE93;
-$arcCyan: #0FBED9;
-
-.head-archives{
-  padding: 0 0 20px 0;
-  .archives-crud{
-    float: left;
-  }
-  .archives-recycle{
-    float: left;
-  }
-  .head-search{
-    float: left;
-    margin-left: 10px;
-    margin-bottom: 0 !important;
-    .filter-item{
-      margin-right: 5px !important;
-    }
-  }
-  .archives-handler-btn{
-    float: right;
-  }
-}
-::v-deep .input-prepend{
-  position: relative;
-  z-index: 99;
-  .el-input__inner {
-    padding-left: 80px;
-  }
-  .el-input-group__prepend {
-    position: absolute;
-    left: 0;
-    top: 0;
-    color: #fff;
-    background-color: transparent;
-    border: none;
-    height: 30px;
-    line-height: 30px;
-    .el-input__inner {
-      padding-left: 15px;
-      color: #339CFF;
-    }
-    .el-input__inner:hover,
-    .el-input__inner:focus{
-      color: #339CFF;
-    }
-    .el-select__caret{
-      color: #339CFF;
-    }
-  }
-}
-.packing-head{
-  display: flex;
-  justify-content: space-between;
-  ::v-deep .el-input__inner {
-    padding-left: 90px;
-  }
-}
-.container-main{
-  .left-tree-item{
-    margin-bottom: 20px;
-    min-height: calc(100vh/2 - 105px);
-    &:last-child{
-      margin-bottom: 0;
-    }
-  }
-
-  .tree-title{
-    height: 40px;
-    line-height: 40px;
-    text-align: center;
-    color: $subMenuActiveText;
-    background-color: #02255F;
-  }
-}
-.archives-warp{
-  margin-bottom: 20px;
-}
-.archives-top{
-  display: flex;
-  justify-content: right;
-  margin-bottom: 10px;
-  ::v-deep .el-checkbox .el-checkbox__label{
-    color: #fff;
-  }
-}
-.archives-right-list{
-  position: relative;
-}
-.archives-fixed-top{
-  position: absolute;
-  right: 0;
-  top: 6px;
-  margin-bottom: 0;
-}
-.crud-opts{
-  justify-content: space-between;
-}
-
-.archives-handler-btn{
-  .el-button{
-    padding: 0 13px 0 3px;
-    ::v-deep span{
-      margin-left: 5px;
-    }
-    &.packing-btn{
-      border-color: $arcPurple;
-      background-color: $arcPurple;
-      &.is-disabled{
-        border-color:#2B1D70;
-        background-color: #2B1D70;
-      }
-    }
-    &.part-btn{
-      border-color: $arcCyan;
-      background-color: $arcCyan;
-      &.is-disabled{
-        border-color:#075E6C;
-        background-color: #075E6C;
-      }
-    }
-    &.warehousing-btn{
-      border-color: $arcYellow;
-      background-color: $arcYellow;
-      &.is-disabled{
-        border-color:#7E4021;
-        background-color: #7E4021;
-      }
-    }
-    &.lending-btn{
-      border-color: $arcRed;
-      background-color: $arcRed;
-      &.is-disabled{
-        border-color:#7A2831;
-        background-color: #7A2831;
-      }
-    }
-    &.binding-btn{
-      border-color: $arcGreen;
-      background-color: $arcGreen;
-      &.is-disabled{
-        border-color:#0D5649;
-        background-color: #0D5649;
-      }
-    }
-    &.is-disabled{
-      color: #666;
-    }
-  }
-  .iconfont{
-    line-height: 30px;
-  }
-}
-
-.archives-table,
-.base-info{
-  ::v-deep td.el-table__cell .row-state{
-    display: block;
-    height: 26px;
-    line-height: 24px;
-    padding: 0 14px;
-    margin: 0 6px;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 26px;
-  }
-  .row-packing{
-    color: $arcPurple;
-    border-color: $arcPurple;
-    &.state-active{
-      color: #fff;
-      background-color: $arcPurple;
-    }
-  }
-  .row-warehousing{
-    color: $arcYellow;
-    border-color: $arcYellow;
-    &.state-active{
-      color: #fff;
-      background-color: $arcYellow;
-    }
-  }
-  .row-lending{
-    color: $arcRed;
-    border-color: $arcRed;
-    &.state-active{
-      color: #fff;
-      background-color: $arcRed;
-    }
-  }
-  .row-binding{
-    color: $arcGreen;
-    border-color: $arcGreen;
-    &.state-active{
-      color: #fff;
-      background-color: $arcGreen;
-    }
-  }
-  ::v-deep .is-scrolling-left,
-  ::v-deep .is-scrolling-middle,
-  ::v-deep .is-scrolling-right{
-    max-height: calc(100vh - 434px) !important;
-  }
-}
-.base-info .row-state{
-  width: 68px;
-  height: 26px;
-  line-height: 24px;
-  text-align: center;
-  margin-top: -6px;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 26px;
-}
-
-::v-deep .archives-table.el-table .el-table__fixed-right{
-  background-color: #031435 !important;
-  box-shadow: -5px 5px 10px 1px rgba(15,164,222,0.16);
-}
-
-// archives - tab
-.archives-tab{
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  padding: 0 35px;
-  font-size: 16px;
-  border-bottom: 1px solid #339CFF;
-  z-index: 1001;
-  li{
-    padding: 22px 14px 14px 14px;
-    color: #339CFF;
-    cursor: pointer;
-    &.active{
-      position: relative;
-      color: #fff;
-      &::after{
-        content: "";
-        position: absolute;
-        left: 0;
-        bottom: -1px;
-        width: 100%;
-        height: 3px;
-        border-radius: 3px;
-        background-color: #fff;
-      }
-    }
-  }
-}
-
-// 上传附件
-.upload-dialog{
-  ::v-deep .el-dialog{
-    width: 940px;
-    .el-dialog__body{
-      padding: 20px 0 30px 0;
-    }
-  }
-}
-.upload-file{
-  position: relative;
-  z-index: 1001;
-  .upload-curd{
-    display: flex;
-    flex-direction: row;
-    margin: 0 32px 20px 32px;
-  }
-  .upload-demo{
-    position: relative;
-    margin-right: 10px;
-    ::v-deep .el-upload-list{
-      display: none;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-    }
-  }
-}
-.screenshot{
-  display: block;
-  margin: 0 auto;
-  object-fit: cover;
-}
-.file-down,
-.packing-handle-btn,
-.packing-recall-btn{
-  display: block;
-  width: 66px;
-  height: 28px;
-  line-height: 28px;
-  padding: 0;
-  color: #fff;
-  border-radius: 2px;
-  margin: 0 auto;
-  &::before{
-    margin-right: 5px;
-  }
-}
-.file-down{
-  background-color: #339CFF;
-  border-color: #339CFF;
-}
-.packing-handle-btn{
-  background-color: $arcPurple;
-  border-color:  $arcPurple;
-}
-.packing-recall-btn{
-  background-color: $arcRed;
-  border-color:  $arcRed;
-}
-
-.drag-tip {
-  display: block;
-  padding-left: 20px;
-  padding-bottom: 10px;
-  font-style: normal;
-  font-weight: bold;
-  color: #fff;
-}
-
-// 档案详情
-.base-info{
-  padding: 20px 20px 0 60px;
-  color: #fff;
-  .base-info-item{
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 20px;
-    span{
-      display: block;
-      width: 160px;
-      margin-right: 5px;
-      text-align: right;
-      color: #3A99FD;
-    }
-  }
-}
-::v-deep .hljs{
-  padding: 0 30px;
-  color: #fff;
-  background-color: transparent;
-}
-
-.selct-data-head{
-  color: #fff;
-  line-height: 30px;
-}
-
-// 绑定标签
-.bindingDialog{
-  ::v-deep .el-dialog{
-    width: 720px;
-  }
-  ::v-deep .el-dialog__body{
-    padding: 35px 35px 58px 35px;
-  }
-}
-.rebinding {
-  display: flex;
-  justify-content: space-between;
-  padding: 50px 65px 35px 65px;
-  span{
-    display: block;
-    width: 60px;
-    line-height: 36px;
-    color: #3A99FD;
-  }
-  ::v-deep .el-input {
-    .el-input__inner{
-      font-size: 14px;
-      height: 36px;
-      line-height: 36px;
-      color: #fff;
-      border: 1px solid #3A99FD;
-      background-color: transparent;
-    }
-  }
-}
-
-.binding-flow{
-  .step-item{
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 10px;
-    z-index: 1;
-    &::before{
-      content: "";
-      position: absolute;
-      left: 15px;
-      top: 10px;
-      width: 1px;
-      height: 100%;
-      background-color: #3A99FD;
-      z-index: 1;
-    }
-    &:last-child::before{
-      display: none;
-    }
-  }
-  .step-left-num{
-    position: relative;
-    display: block;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    border-radius: 50%;
-    font-size: 16px;
-    text-align: center;
-    color: #fff;
-    border: 1px solid #339CFF;
-    background-color:#031435;
-    z-index: 4;
-    &.step-active{
-      background-color: #339CFF;
-    }
-    &.step-loading{
-      &::before,
-      &::after{
-        content: "";
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        border: 1px solid #13439E;
-        box-shadow: inset 0px 0px 8px 1px #13439E;
-        margin: -20px 0 0 -20px;
-        z-index: 1;
-      }
-      &::before{
-        animation: halo 2s linear 0.5s infinite;
-      }
-      &::after{
-        animation: halo 2s linear 1.5s infinite;
-      }
-    }
-  }
-  // 晕开效果
-  @keyframes halo {
-    0% {
-      transform: scale(1);
-      -webkit-transform: scale(1);
-      opacity: 0.0;
-    }
-    25% {
-      transform: scale(1);
-      -webkit-transform: scale(1);
-      opacity: 0.1;
-    }
-    50% {
-      transform: scale(1);
-      -webkit-transform: scale(1);
-      opacity: 0.3;
-    }
-    75% {
-      transform: scale(1.2);
-      -webkit-transform: scale(1.2);
-      opacity: 0.5;
-    }
-    100% {
-      transform: scale(1.5);
-      -webkit-transform: scale(1.5);
-      opacity: 0.0;
-    }
-  }
-  .step-right-cont{
-    flex: 1;
-    margin-left: 12px;
-    .step-title{
-      line-height: 30px;
-      color: #339CFF;
-      span{
-        padding-left: 10px;
-        font-weight: bold;
-        color: #fff;
-      }
-    }
-    .step-tip{
-      padding: 0 10px;
-      height: 40px;
-      line-height: 40px;
-      color: #13439E;
-      background-color: #02255F;
-      border-radius: 4px;
-      &.tip-active{
-        color: #339CFF;
-      }
-      &.tip-error{
-        color: #EF3147;
-      }
-    }
-  }
-}
-
-// 分卷装盒
-.partPackingDialog{
-  ::v-deep .el-dialog{
-    width: 950px !important;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    margin-top: 2vh !important;
-  }
-  ::v-deep .el-dialog__body{
-    padding: 0;
-  }
-  ::v-deep .dialog-footer{
-    margin: 20px auto 0 auto;
-    padding-bottom: 20px;
-  }
-  .packing-head{
-    border-bottom: 1px solid #339CFF;
-    .head-search{
-      margin-bottom: 0;
-    }
-  }
-}
-.part-packing-cont{
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-.part-packing-item{
-  width: calc(100%/2 - 10px);
-  .part-packing-title{
-    padding: 0 30px;
-    height: 40px;
-    line-height: 40px;
-    font-size: 16px;
-    font-weight: normal;
-    color: #fff;
-  }
-  ::v-deep .el-table{
-    overflow-x: hidden;
-    overflow-y: auto;
-    border: 2px solid #02255f;
-    border-top: none;
-    .el-table__body-wrapper{
-      background-color: #031435;
-    }
-  }
-}
-
-.item-content{
-  max-height: calc(100vh - 410px);
-  overflow: hidden;
-  overflow-y: scroll;
-}
-
-.upload-btn{
-  position: relative;
-  margin-right: 10px;
-  overflow: hidden;
-  #upFile{
-    position: absolute;
-    left: 0;
-    top: 0;
-    opacity: 0;
-    height: 34px;
-  }
-}
-
-// 元数据
-::v-deep .hljs{
-  font-family: "Sans Mono", "Consolas", "Courier", monospace;
-  font-size: 12px;
-  .hljs-attribute{
-    display: inline-block;
-    margin: 2px 0 !important;
-  }
-}
\ No newline at end of file
+@import "~@/assets/styles/variables.scss";
+// archives color
+$arcPurple:#563BE1;
+$arcYellow:#FD8042;
+$arcRed:#F65163;
+$arcGreen: #1AAE93;
+$arcCyan: #0FBED9;
+
+.head-archives{
+  padding: 0 0 20px 0;
+  .archives-crud{
+    float: left;
+  }
+  .archives-recycle{
+    float: left;
+  }
+  .head-search{
+    float: left;
+    margin-left: 10px;
+    margin-bottom: 0 !important;
+    .filter-item{
+      margin-right: 5px !important;
+    }
+  }
+  .archives-handler-btn{
+    float: right;
+  }
+}
+::v-deep .input-prepend{
+  position: relative;
+  z-index: 99;
+  .el-input__inner {
+    padding-left: 80px;
+  }
+  .el-input-group__prepend {
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: #fff;
+    background-color: transparent;
+    border: none;
+    height: 30px;
+    line-height: 30px;
+    .el-input__inner {
+      padding-left: 15px;
+      color: #339CFF;
+    }
+    .el-input__inner:hover,
+    .el-input__inner:focus{
+      color: #339CFF;
+    }
+    .el-select__caret{
+      color: #339CFF;
+    }
+  }
+}
+.packing-head{
+  display: flex;
+  justify-content: space-between;
+  ::v-deep .el-input__inner {
+    padding-left: 90px;
+  }
+}
+.container-main{
+  .left-tree-item{
+    margin-bottom: 20px;
+    min-height: calc(100vh/2 - 105px);
+    &:last-child{
+      margin-bottom: 0;
+    }
+  }
+
+  .tree-title{
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    color: $subMenuActiveText;
+    background-color: #02255F;
+  }
+}
+.archives-warp{
+  margin-bottom: 20px;
+}
+.archives-top{
+  display: flex;
+  justify-content: right;
+  margin-bottom: 10px;
+  ::v-deep .el-checkbox .el-checkbox__label{
+    color: #fff;
+  }
+}
+.archives-right-list{
+  position: relative;
+}
+.archives-fixed-top{
+  position: absolute;
+  right: 0;
+  top: 6px;
+  margin-bottom: 0;
+}
+.crud-opts{
+  justify-content: space-between;
+}
+
+.archives-handler-btn{
+  .el-button{
+    padding: 0 13px 0 3px;
+    ::v-deep span{
+      margin-left: 5px;
+    }
+    &.packing-btn{
+      border-color: $arcPurple;
+      background-color: $arcPurple;
+      &.is-disabled{
+        border-color:#2B1D70;
+        background-color: #2B1D70;
+      }
+    }
+    &.part-btn{
+      border-color: $arcCyan;
+      background-color: $arcCyan;
+      &.is-disabled{
+        border-color:#075E6C;
+        background-color: #075E6C;
+      }
+    }
+    &.warehousing-btn{
+      border-color: $arcYellow;
+      background-color: $arcYellow;
+      &.is-disabled{
+        border-color:#7E4021;
+        background-color: #7E4021;
+      }
+    }
+    &.lending-btn{
+      border-color: $arcRed;
+      background-color: $arcRed;
+      &.is-disabled{
+        border-color:#7A2831;
+        background-color: #7A2831;
+      }
+    }
+    &.binding-btn{
+      border-color: $arcGreen;
+      background-color: $arcGreen;
+      &.is-disabled{
+        border-color:#0D5649;
+        background-color: #0D5649;
+      }
+    }
+    &.is-disabled{
+      color: #666;
+    }
+  }
+  .iconfont{
+    line-height: 30px;
+  }
+}
+
+.archives-table,
+.base-info{
+  ::v-deep td.el-table__cell .row-state{
+    display: block;
+    height: 26px;
+    line-height: 24px;
+    padding: 0 14px;
+    margin: 0 6px;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 26px;
+  }
+  .row-packing{
+    color: $arcPurple;
+    border-color: $arcPurple;
+    &.state-active{
+      color: #fff;
+      background-color: $arcPurple;
+    }
+  }
+  .row-warehousing{
+    color: $arcYellow;
+    border-color: $arcYellow;
+    &.state-active{
+      color: #fff;
+      background-color: $arcYellow;
+    }
+  }
+  .row-lending{
+    color: $arcRed;
+    border-color: $arcRed;
+    &.state-active{
+      color: #fff;
+      background-color: $arcRed;
+    }
+  }
+  .row-binding{
+    color: $arcGreen;
+    border-color: $arcGreen;
+    &.state-active{
+      color: #fff;
+      background-color: $arcGreen;
+    }
+  }
+  ::v-deep .is-scrolling-left,
+  ::v-deep .is-scrolling-middle,
+  ::v-deep .is-scrolling-right{
+    max-height: calc(100vh - 434px) !important;
+  }
+}
+.base-info .row-state{
+  width: 68px;
+  height: 26px;
+  line-height: 24px;
+  text-align: center;
+  margin-top: -6px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 26px;
+}
+
+::v-deep .archives-table.el-table .el-table__fixed-right{
+  background-color: #031435 !important;
+  box-shadow: -5px 5px 10px 1px rgba(15,164,222,0.16);
+}
+
+// archives - tab
+.archives-tab{
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  padding: 0 35px;
+  font-size: 16px;
+  border-bottom: 1px solid #339CFF;
+  z-index: 1001;
+  li{
+    padding: 22px 14px 14px 14px;
+    color: #339CFF;
+    cursor: pointer;
+    &.active{
+      position: relative;
+      color: #fff;
+      &::after{
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: -1px;
+        width: 100%;
+        height: 3px;
+        border-radius: 3px;
+        background-color: #fff;
+      }
+    }
+  }
+}
+
+// 上传附件
+.upload-dialog{
+  ::v-deep .el-dialog{
+    width: 940px;
+    .el-dialog__body{
+      padding: 20px 0 30px 0;
+    }
+  }
+}
+.upload-file{
+  position: relative;
+  z-index: 1001;
+  .upload-curd{
+    display: flex;
+    flex-direction: row;
+    margin: 0 32px 20px 32px;
+  }
+  .upload-demo{
+    position: relative;
+    margin-right: 10px;
+    ::v-deep .el-upload-list{
+      display: none;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+  }
+}
+.screenshot{
+  display: block;
+  margin: 0 auto;
+  object-fit: cover;
+}
+.file-down,
+.packing-handle-btn,
+.packing-recall-btn{
+  display: block;
+  width: 66px;
+  height: 28px;
+  line-height: 28px;
+  padding: 0;
+  color: #fff;
+  border-radius: 2px;
+  margin: 0 auto;
+  &::before{
+    margin-right: 5px;
+  }
+}
+.file-down{
+  background-color: #339CFF;
+  border-color: #339CFF;
+}
+.packing-handle-btn{
+  background-color: $arcPurple;
+  border-color:  $arcPurple;
+}
+.packing-recall-btn{
+  background-color: $arcRed;
+  border-color:  $arcRed;
+}
+
+.drag-tip {
+  display: block;
+  padding-left: 20px;
+  padding-bottom: 10px;
+  font-style: normal;
+  font-weight: bold;
+  color: #fff;
+}
+
+// 档案详情
+.base-info{
+  padding: 20px 20px 0 60px;
+  color: #fff;
+  .base-info-item{
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 20px;
+    span{
+      display: block;
+      width: 160px;
+      margin-right: 5px;
+      text-align: right;
+      color: #3A99FD;
+    }
+  }
+}
+::v-deep .hljs{
+  padding: 0 30px;
+  color: #fff;
+  background-color: transparent;
+}
+
+.selct-data-head{
+  color: #fff;
+  line-height: 30px;
+}
+
+// 绑定标签
+.bindingDialog{
+  ::v-deep .el-dialog{
+    width: 720px;
+  }
+  ::v-deep .el-dialog__body{
+    padding: 35px 35px 58px 35px;
+  }
+}
+.rebinding {
+  display: flex;
+  justify-content: space-between;
+  padding: 50px 65px 35px 65px;
+  span{
+    display: block;
+    width: 60px;
+    line-height: 36px;
+    color: #3A99FD;
+  }
+  ::v-deep .el-input {
+    .el-input__inner{
+      font-size: 14px;
+      height: 36px;
+      line-height: 36px;
+      color: #fff;
+      border: 1px solid #3A99FD;
+      background-color: transparent;
+    }
+  }
+}
+
+.binding-flow{
+  .step-item{
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    z-index: 1;
+    &::before{
+      content: "";
+      position: absolute;
+      left: 15px;
+      top: 10px;
+      width: 1px;
+      height: 100%;
+      background-color: #3A99FD;
+      z-index: 1;
+    }
+    &:last-child::before{
+      display: none;
+    }
+  }
+  .step-left-num{
+    position: relative;
+    display: block;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 50%;
+    font-size: 16px;
+    text-align: center;
+    color: #fff;
+    border: 1px solid #339CFF;
+    background-color:#031435;
+    z-index: 4;
+    &.step-active{
+      background-color: #339CFF;
+    }
+    &.step-loading{
+      &::before,
+      &::after{
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border: 1px solid #13439E;
+        box-shadow: inset 0px 0px 8px 1px #13439E;
+        margin: -20px 0 0 -20px;
+        z-index: 1;
+      }
+      &::before{
+        animation: halo 2s linear 0.5s infinite;
+      }
+      &::after{
+        animation: halo 2s linear 1.5s infinite;
+      }
+    }
+  }
+  // 晕开效果
+  @keyframes halo {
+    0% {
+      transform: scale(1);
+      -webkit-transform: scale(1);
+      opacity: 0.0;
+    }
+    25% {
+      transform: scale(1);
+      -webkit-transform: scale(1);
+      opacity: 0.1;
+    }
+    50% {
+      transform: scale(1);
+      -webkit-transform: scale(1);
+      opacity: 0.3;
+    }
+    75% {
+      transform: scale(1.2);
+      -webkit-transform: scale(1.2);
+      opacity: 0.5;
+    }
+    100% {
+      transform: scale(1.5);
+      -webkit-transform: scale(1.5);
+      opacity: 0.0;
+    }
+  }
+  .step-right-cont{
+    flex: 1;
+    margin-left: 12px;
+    .step-title{
+      line-height: 30px;
+      color: #339CFF;
+      span{
+        padding-left: 10px;
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+    .step-tip{
+      padding: 0 10px;
+      height: 40px;
+      line-height: 40px;
+      color: #13439E;
+      background-color: #02255F;
+      border-radius: 4px;
+      &.tip-active{
+        color: #339CFF;
+      }
+      &.tip-error{
+        color: #EF3147;
+      }
+    }
+  }
+}
+
+// 分卷装盒
+.partPackingDialog{
+  ::v-deep .el-dialog{
+    width: 950px !important;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    margin-top: 2vh !important;
+  }
+  ::v-deep .el-dialog__body{
+    padding: 0;
+  }
+  ::v-deep .dialog-footer{
+    margin: 20px auto 0 auto;
+    padding-bottom: 20px;
+  }
+  .packing-head{
+    border-bottom: 1px solid #339CFF;
+    .head-search{
+      margin-bottom: 0;
+    }
+  }
+}
+.part-packing-cont{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.part-packing-item{
+  width: calc(100%/2 - 10px);
+  .part-packing-title{
+    padding: 0 30px;
+    height: 40px;
+    line-height: 40px;
+    font-size: 16px;
+    font-weight: normal;
+    color: #fff;
+  }
+  ::v-deep .el-table{
+    overflow-x: hidden;
+    overflow-y: auto;
+    border: 2px solid #02255f;
+    border-top: none;
+    .el-table__body-wrapper{
+      background-color: #031435;
+    }
+  }
+}
+
+.item-content{
+  max-height: calc(100vh - 410px);
+  overflow: hidden;
+  overflow-y: scroll;
+}
+
+.upload-btn{
+  position: relative;
+  margin-right: 10px;
+  overflow: hidden;
+  #upFile{
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    height: 34px;
+  }
+}
+
+// 元数据
+::v-deep .hljs{
+  font-family: "Sans Mono", "Consolas", "Courier", monospace;
+  font-size: 12px;
+  .hljs-attribute{
+    display: inline-block;
+    margin: 2px 0 !important;
+  }
+}
diff --git a/src/views/archivesManage/fileImport/dataImport/index.vue b/src/views/archivesManage/fileImport/dataImport/index.vue
index 3a1e364..9cec56e 100644
--- a/src/views/archivesManage/fileImport/dataImport/index.vue
+++ b/src/views/archivesManage/fileImport/dataImport/index.vue
@@ -32,45 +32,7 @@
     <!-- <div class="import-title step02">读取数据</div> -->
     <div v-if="isShow02" class="step-content">
       <div class="import-data-number">案卷：<span>5000</span> 条 / 卷内：<span>10000</span> 条 / 资料：<span>8000</span> 条</div>
-      <ul class="import-tab">
-        <li :class="{'active': archivesTabIndex == 0}" @click="changeActiveTab(0)">案卷</li>
-        <li :class="{'active': archivesTabIndex == 1}" @click="changeActiveTab(1)">文件</li>
-        <li :class="{'active': archivesTabIndex == 2}" @click="changeActiveTab(2)">资料</li>
-      </ul>
-      <el-table
-        ref="table"
-        :data="tableData"
-        style="width: 100%"
-        height="calc(100vh - 504px)"
-        @row-click="clickRowHandler"
-        @selection-change="selectionChangeHandler"
-      >
-        <el-table-column prop="security_class" label="密级" align="center" width="80px" />
-        <el-table-column prop="medium_type" label="载体类型" align="center" width="100px" />
-        <el-table-column prop="micro_number" label="缩微号" align="center" width="80px" />
-        <el-table-column prop="archive_no" label="档号" align="center" width="200px" />
-        <el-table-column prop="page_qty" label="文件件数" align="center" width="100px" />
-        <el-table-column prop="maintitle" label="案卷题名" align="center" show-overflow-tooltip width="240px" />
-        <el-table-column prop="begin_date" label="起始时间" align="center" width="140px" />
-        <el-table-column prop="end_date" label="终止时间" align="center" width="140px" />
-        <el-table-column prop="archive_ctg_no" label="分类号" align="center" width="140px" />
-        <el-table-column prop="subject_term" label="主题词" align="center" width="140px" />
-        <el-table-column prop="remarks" label="附注" align="center" width="120px" />
-        <el-table-column prop="retention" label="保管期限" align="center" width="120px" />
-        <el-table-column prop="archive_year" label="年度" align="center" width="100px" />
-        <el-table-column prop="fonds_no" label="全宗" align="center" width="100px" />
-        <el-table-column prop="piece_no" label="卷号" align="center" width="100px" />
-      </el-table>
-      <!--分页组件-->
-      <el-pagination
-        :current-page="page.page"
-        :total="page.total"
-        :page-size="page.size"
-        :pager-count="5"
-        layout="total, prev, pager, next, sizes"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentPage"
-      />
+      <detail />
     </div>
     <div v-if="isShow02" class="step-bottom-btn">
       <el-button @click="handleReturn02">上一步</el-button>
@@ -122,21 +84,15 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import tableJson from './table.json'
+import detail from '../module/detail.vue'
 export default {
   name: 'DataImport',
-  components: { },
+  components: { detail },
   data() {
     return {
       name: '',
-      archivesTabIndex: 0,
+
       deleteVisible: false,
-      tableData: [],
-      page: {
-        page: 1,
-        size: 10,
-        total: 0
-      },
       form: {
         file: true,
         data: true,
@@ -155,7 +111,6 @@ export default {
     ])
   },
   created() {
-    this.tableData = tableJson
   },
   methods: {
     handleStep01() {
@@ -177,16 +132,6 @@ export default {
       this.isShow02 = true
       this.isShow03 = false
     },
-    changeActiveTab(index) {
-      this.archivesTabIndex = index
-    },
-    handleSizeChange(size) {
-      this.page.size = size
-      this.page.page = 1
-    },
-    handleCurrentPage(val) {
-      this.page.page = val
-    },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
@@ -227,14 +172,6 @@ export default {
         duration: 2500
       })
       this.loading = false
-    },
-    // table
-    clickRowHandler(row) {
-      this.$refs.table.toggleRowSelection(row)
-    },
-    // table
-    selectionChangeHandler(val) {
-      this.selections = val
     }
   }
 }
@@ -397,30 +334,7 @@ export default {
     color: rgb(246,81,99);
   }
 }
-.import-tab{
-  display: flex;
-  justify-content: flex-start;
-  margin-bottom: 10px;
-  li{
-    padding: 10px 20px 14px 20px;
-    color: #339CFF;
-    cursor: pointer;
-    &.active{
-      position: relative;
-      color: #fff;
-      &::after{
-        content: "";
-        position: absolute;
-        left: 0;
-        bottom: -1px;
-        width: 100%;
-        height: 3px;
-        border-radius: 3px;
-        background-color: #fff;
-      }
-    }
-  }
-}
+
 ::v-deep .el-form{
   .el-row{
     display: flex;
diff --git a/src/views/archivesManage/fileImport/importLog/index.vue b/src/views/archivesManage/fileImport/importLog/index.vue
index b1a31cc..da19b9f 100644
--- a/src/views/archivesManage/fileImport/importLog/index.vue
+++ b/src/views/archivesManage/fileImport/importLog/index.vue
@@ -1,23 +1,115 @@
 <template>
   <div>
-    导入日志
+    <div class="head-container" style="display: flex; justify-content: flex-start;">
+      <div class="head-search" style="margin-bottom: 0;">
+        <date-range-picker v-model="query.createTime" class="date-item" />
+        <rrOperation />
+      </div>
+      <crudOperation />
+    </div>
+    <!--表格渲染-->
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @row-click="clickRowHandler" @selection-change="selectionChangeHandler" @row-dblclick="handleDbClick">
+      <el-table-column type="selection" align="center" width="55" />
+      <el-table-column prop="username" label="导入数据包" />
+      <el-table-column prop="nickName" label="导入状态" />
+      <el-table-column prop="gender" label="操作人" />
+      <el-table-column prop="createTime" label="操作日期">
+        <template slot-scope="scope">
+          <div>{{ scope.row.createTime | parseTime }}</div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <pagination />
+
+    <el-dialog class="import-dialog" :close-on-click-modal="false" :visible.sync="detailVisible" title="导入详情" @closed="handleClose">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <div class="import-data-number">
+          <p>导入方式：<span style="color: #339cff;">跳过</span></p>
+          <p>成功读取数据：<span style="color:rgb(246,81,99)">10000</span> 条</p>
+          <p>成功导入数据：<span style="color: #1AAE93;">500</span> 条</p>
+        </div>
+        <detail />
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
+import crudUser from '@/api/system/user'
+import CRUD, { presenter, header, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+import DateRangePicker from '@/components/DateRangePicker'
+import detail from '../module/detail.vue'
 export default {
   name: 'ImportLog',
-  components: { },
+  components: { detail, rrOperation, DateRangePicker, crudOperation, pagination },
+  cruds() {
+    return CRUD({ title: '导入日志', url: 'api/users', crudMethod: { ...crudUser }, optShow: {
+      add: false,
+      edit: false,
+      del: false,
+      reset: true,
+      download: true,
+      group: false
+    }})
+  },
+  mixins: [presenter(), header(), crud()],
   data() {
     return {
+      detailVisible: false
     }
   },
   created() {
   },
   methods: {
+    clickRowHandler(row) {
+      // this.$refs.table.toggleRowSelection(row)
+    },
+    selectionChangeHandler(val) {
+      this.selections = val
+    },
+    // 双击详情
+    handleDbClick(row) {
+      this.detailVisible = true
+    },
+    handleClose() {
+      this.detailVisible = false
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.import-dialog{
+  ::v-deep .el-dialog{
+    width: 940px;
+    .el-dialog__body{
+      padding: 20px 0 30px 0;
+    }
+    .setting-dialog{
+      position: relative;
+    }
+  }
+}
+.import-data-number{
+  position: absolute;
+  right: 10px;
+  top: 20px;
+  font-size: 12px;
+  color: #fff;
+  display: flex;
+  justify-content: flex-start;
+  & p{
+    margin-right: 10px;
+  }
+  & span{
+    font-weight: bold;
+  }
+}
 </style>
diff --git a/src/views/archivesManage/fileImport/module/detail.vue b/src/views/archivesManage/fileImport/module/detail.vue
new file mode 100644
index 0000000..7c9cd15
--- /dev/null
+++ b/src/views/archivesManage/fileImport/module/detail.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="import-detail-container">
+    <ul class="import-tab">
+      <li :class="{'active': archivesTabIndex == 0}" @click="changeActiveTab(0)">案卷</li>
+      <li :class="{'active': archivesTabIndex == 1}" @click="changeActiveTab(1)">文件</li>
+      <li :class="{'active': archivesTabIndex == 2}" @click="changeActiveTab(2)">资料</li>
+    </ul>
+    <el-table
+      ref="table"
+      :data="tableData"
+      style="width: 100%"
+      height="calc(100vh - 504px)"
+      @row-click="clickRowHandler"
+      @selection-change="selectionChangeHandler"
+    >
+      <el-table-column prop="security_class" label="密级" align="center" width="80px" />
+      <el-table-column prop="medium_type" label="载体类型" align="center" width="100px" />
+      <el-table-column prop="micro_number" label="缩微号" align="center" width="80px" />
+      <el-table-column prop="archive_no" label="档号" align="center" width="200px" />
+      <el-table-column prop="page_qty" label="文件件数" align="center" width="100px" />
+      <el-table-column prop="maintitle" label="案卷题名" align="center" show-overflow-tooltip width="240px" />
+      <el-table-column prop="begin_date" label="起始时间" align="center" width="140px" />
+      <el-table-column prop="end_date" label="终止时间" align="center" width="140px" />
+      <el-table-column prop="archive_ctg_no" label="分类号" align="center" width="140px" />
+      <el-table-column prop="subject_term" label="主题词" align="center" width="140px" />
+      <el-table-column prop="remarks" label="附注" align="center" width="120px" />
+      <el-table-column prop="retention" label="保管期限" align="center" width="120px" />
+      <el-table-column prop="archive_year" label="年度" align="center" width="100px" />
+      <el-table-column prop="fonds_no" label="全宗" align="center" width="100px" />
+      <el-table-column prop="piece_no" label="卷号" align="center" width="100px" />
+    </el-table>
+    <!--分页组件-->
+    <el-pagination
+      :current-page="page.page"
+      :total="page.total"
+      :page-size="page.size"
+      :pager-count="5"
+      layout="total, prev, pager, next, sizes"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentPage"
+    />
+  </div>
+</template>
+
+<script>
+import tableJson from './table.json'
+export default {
+  name: 'DataImport',
+  components: { },
+  data() {
+    return {
+      archivesTabIndex: 0,
+      tableData: [],
+      page: {
+        page: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.tableData = tableJson
+  },
+  methods: {
+    changeActiveTab(index) {
+      this.archivesTabIndex = index
+    },
+    // table
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    // table
+    selectionChangeHandler(val) {
+      this.selections = val
+    },
+    handleSizeChange(size) {
+      this.page.size = size
+      this.page.page = 1
+    },
+    handleCurrentPage(val) {
+      this.page.page = val
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.import-tab{
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 10px;
+  li{
+    padding: 10px 20px 14px 20px;
+    font-size: 16px;
+    color: #339CFF;
+    cursor: pointer;
+    &.active{
+      position: relative;
+      color: #fff;
+      &::after{
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: -1px;
+        width: 100%;
+        height: 3px;
+        border-radius: 3px;
+        background-color: #fff;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/archivesManage/fileImport/dataImport/table.json b/src/views/archivesManage/fileImport/module/table.json
similarity index 100%
rename from src/views/archivesManage/fileImport/dataImport/table.json
rename to src/views/archivesManage/fileImport/module/table.json
diff --git a/src/views/storeManage/deviceManage/module/deviceDetail.vue b/src/views/storeManage/deviceManage/module/deviceDetail.vue
index bcd3e22..3c48979 100644
--- a/src/views/storeManage/deviceManage/module/deviceDetail.vue
+++ b/src/views/storeManage/deviceManage/module/deviceDetail.vue
@@ -416,6 +416,7 @@ export default {
       this.selectedDeviceType = form.deviceTypeId.name
       crud.status.edit = CRUD.STATUS.PREPARED
       crud.getDataStatus(this.crud.selections[0].id).edit = CRUD.STATUS.PREPARED
+
       return false
     },
     [CRUD.HOOK.beforeSubmit]() {
@@ -440,12 +441,23 @@ export default {
     },
     // 提交前的验证
     [CRUD.HOOK.afterValidateCU](crud) {
-      this.crud.form.storeroomId = {
-        'id': this.storeroomId.id,
-        'pid': this.storeroomId.pid,
-        'name': this.storeroomId.name,
-        'remark': this.storeroomId.remark,
-        'sort': this.storeroomId.sort
+      if (crud.status.edit === 1) {
+        const storeroomId = this.crud.selections[0].storeroomId
+        this.crud.form.storeroomId = {
+          'id': storeroomId.id,
+          'pid': storeroomId.pid,
+          'name': storeroomId.name,
+          'remark': storeroomId.remark,
+          'sort': storeroomId.sort
+        }
+      } else {
+        this.crud.form.storeroomId = {
+          'id': this.storeroomId.id,
+          'pid': this.storeroomId.pid,
+          'name': this.storeroomId.name,
+          'remark': this.storeroomId.remark,
+          'sort': this.storeroomId.sort
+        }
       }
     },
     clickRowHandler(row) {
diff --git a/src/views/storeManage/warehouse3D/destroyedFileRoom/index.vue b/src/views/storeManage/warehouse3D/destroyedFileRoom/index.vue
new file mode 100644
index 0000000..2a0645b
--- /dev/null
+++ b/src/views/storeManage/warehouse3D/destroyedFileRoom/index.vue
@@ -0,0 +1,274 @@
+<template>
+  <div class="warehouse">
+    <div class="warehouse-left">
+      <div class="left-3d">
+        <iframe id="myIframe" ref="myIframe" name="iframeMap" class="iframe_box" src="/webA/index.html" frameborder="0" scrolling="no" />
+        <ul class="msg-list">
+          <li v-show="topDisplayData.DXW_DIV_TOP_001.show" :class="{ 'li-warn': topDisplayData.DXW_DIV_TOP_001.curstatus > 0 }">
+            <svg-icon icon-class="temperature" class-name="msg-list-svg" />
+            <div class="msg-txt">
+              <span class="msg-list-num">{{ topDisplayData.DXW_DIV_TOP_001.curValue }}</span>
+              <p class="msg-list-unit">温度 {{ topDisplayData.DXW_DIV_TOP_001.unit }}</p>
+            </div>
+          </li>
+          <li v-show="topDisplayData.DXW_DIV_TOP_002.show" :class="{ 'li-warn': topDisplayData.DXW_DIV_TOP_002.curstatus > 0 }">
+            <svg-icon icon-class="shidu" class-name="msg-list-svg" />
+            <div class="msg-txt">
+              <span class="msg-list-num">{{ topDisplayData.DXW_DIV_TOP_002.curValue }}</span>
+              <p class="msg-list-unit">湿度 {{ topDisplayData.DXW_DIV_TOP_002.unit }}</p>
+            </div>
+          </li>
+          <li v-show="topDisplayData.DXW_DIV_TOP_003.show" :class="{ 'li-warn': topDisplayData.DXW_DIV_TOP_003.curstatus > 0 }">
+            <svg-icon icon-class="co2" class-name="msg-list-svg" />
+            <div class="msg-txt">
+              <span class="msg-list-num">{{ topDisplayData.DXW_DIV_TOP_003.curValue }}</span>
+              <p class="msg-list-unit">CO2 {{ topDisplayData.DXW_DIV_TOP_003.unit }}</p>
+            </div>
+          </li>
+          <li v-show="topDisplayData.DXW_DIV_TOP_004.show" :class="{ 'li-warn': topDisplayData.DXW_DIV_TOP_004.curstatus > 0 }">
+            <svg-icon icon-class="voc" class-name="msg-list-svg" />
+            <div class="msg-txt">
+              <span class="msg-list-num">{{ topDisplayData.DXW_DIV_TOP_004.curValue }}</span>
+              <p class="msg-list-unit">VOC {{ topDisplayData.DXW_DIV_TOP_004.unit }}</p>
+            </div>
+          </li>
+          <li v-show="topDisplayData.DXW_DIV_TOP_005.show" :class="{ 'li-warn': topDisplayData.DXW_DIV_TOP_005.curstatus > 0 }" class="msg-pm">
+            <svg-icon icon-class="pm25" class-name="msg-list-svg" />
+            <div class="msg-txt">
+              <span class="msg-list-num">{{ topDisplayData.DXW_DIV_TOP_005.curValue }}</span>
+              <p class="msg-list-unit">PM2.5 {{ topDisplayData.DXW_DIV_TOP_005.unit }}</p>
+            </div>
+          </li>
+          <li v-show="topDisplayData.DXW_DIV_TOP_006.show" :class="{ 'li-warn': topDisplayData.DXW_DIV_TOP_006.curstatus > 0 }" class="msg-pm">
+            <svg-icon icon-class="pm10" class-name="msg-list-svg" />
+            <div class="msg-txt">
+              <span class="msg-list-num">{{ topDisplayData.DXW_DIV_TOP_006.curValue }}</span>
+              <p class="msg-list-unit">PM10 {{ topDisplayData.DXW_DIV_TOP_006.unit }}</p>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="warehouse-right">
+      <!-- 报警记录 -->
+      <warehouse-warning :height="'calc(100% - 40px)'" :storeroom-id="roomId" />
+      <!-- 门禁记录 -->
+      <security-door :height="'calc(100% - 40px)'" />
+    </div>
+  </div>
+</template>
+
+<script>
+import WarehouseWarning from '@/views/components/WarehouseWarning'
+import SecurityDoor from '@/views/components/SecurityDoor'
+import displayConfigApi from '@/api/storeManage/displayConfig'
+import thirdApi from '@/api/thirdApi'
+export default {
+  name: 'DestroyedFileRoom',
+  components: { WarehouseWarning, SecurityDoor },
+  data() {
+    return {
+      roomId: 'D4C395BFB0A2E7C96C65A0',
+      allDisplayConfigData: [],
+      displayConfigData: [],
+      url: '',
+      allDeviceIds: [],
+      oaoMessage: [],
+      timer: '',
+      topDisplayData: {
+        DXW_DIV_TOP_001: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        },
+        DXW_DIV_TOP_002: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        },
+        DXW_DIV_TOP_003: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        },
+        DXW_DIV_TOP_004: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        },
+        DXW_DIV_TOP_005: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        },
+        DXW_DIV_TOP_006: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        }
+      }
+      // ,
+      // iframeWin: null,
+      // timer: null, // 定时器id 滚动表格
+      // isScroll: false // 是否滚动
+    }
+  },
+  async created() {
+    window.getIframeLoading = this.getIframeLoading // 把vue实例中的方法引用给window对象
+    this.allDisplayConfigData = await displayConfigApi.list({ storeroomId: this.roomId })
+    this.allDisplayConfigData.forEach(element => {
+      if (element.isDisplay && element.bindState && element.deviceInfo && (element.divPosition.includes('OAO') || element.divPosition.includes('TOP'))) {
+        this.allDeviceIds.push(element.deviceInfo.deviceId)
+        if (!this.url) {
+          this.url = 'http://' + element.deviceInfo.deviceIp + ':' + element.deviceInfo.devicePort
+        }
+      }
+    })
+    this.displayConfigData = this.allDisplayConfigData.filter((item) => { return item.isDisplay && item.bindState && item.deviceInfo && (item.divPosition.includes('OAO') || item.divPosition.includes('TOP')) })
+    await this.getRealTimeData()
+  },
+  mounted() {
+    const _this = this
+    _this.iframeWin = this.$refs.myIframe.contentWindow
+    // inframe 加载完成之后
+    document.getElementById('myIframe').onload = function() {
+      _this.deviceState()
+    }
+    window.addEventListener('message', this.handleMessageDevice)
+    // 定时请求第三方数据，更新页面数据
+    this.timer = setInterval(async() => {
+      await _this.getRealTimeData()
+      _this.handleAQI()
+    }, 10000)
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
+  },
+  methods: {
+    // 加载完成状态传值
+    getIframeLoading(value) {
+      // console.log(`我是iframe传过来的参数：${value}`)
+      if (value === 'false') {
+        this.allDisplayConfigData.forEach(element => {
+          if ((!element.isDisplay || !element.bindState) && element.divPosition.includes('OAO')) {
+            this.handleHide(element.divPosition)
+          }
+        })
+        // this.handleAlarm('DAK_MO_OAO_003')
+        this.deviceState()
+        this.handleAQI()
+      }
+    },
+    // 传入设备状态data  / 给iframe传初始值
+    deviceState(e) {
+      this.iframeWin.postMessage({
+        data: this.oaoMessage
+      }, '*')
+    },
+    // 点击查看设备状况 / 密集架列号
+    handleMessageDevice(event) {
+      const _this = this
+      if (event.data && event.data.data) {
+        const data = event.data.data
+        if (data.includes('cabinet')) {
+          _this.deviceId = data.slice(data.length - 2)
+          _this.$router.push('/storeManage/deseCabinet')
+          localStorage.setItem('cabinetNum', _this.deviceId)
+        }
+      }
+    },
+    // 设置温湿度
+    handleAQI() {
+      this.oaoMessage.forEach(element => {
+        window.frames['iframeMap'].setAlertValue(element.id, element.wendu, element.sidu)
+      })
+    },
+    // 设置温湿度报警状况
+    handleAlarm(deviceId) {
+      // true 报警 false 不报警
+      window.frames['iframeMap'].Myalert(deviceId, true)
+    },
+    // 设置是否显示
+    handleHide(deviceId) {
+      // true 显示 false 隐藏
+      window.frames['iframeMap'].setYangGanCanshow(deviceId, false)
+    },
+    // 表格隔行变色
+    rowBgColor({ row, rowIndex }) {
+      if (rowIndex % 2 === 1) {
+        return 'light-blue'
+      } else {
+        return ''
+      }
+    },
+    getRealTimeData() {
+      if (this.allDeviceIds.length > 0) {
+        thirdApi.getRealTimeData({ ids: this.allDeviceIds, url: this.url }).then((data) => {
+          this.oaoMessage.splice(0, this.oaoMessage.length)
+          this.displayConfigData.forEach(element => {
+            if (element.divPosition.includes('TOP') && element.deviceSpecParams[0]) {
+              // 获取页面div显示的数据
+              const result = data.find((item) => {
+                return item.property_id === element.deviceSpecParams[0].paramId && item.device_id === element.deviceInfo.deviceId
+              })
+              console.log(result)
+              this.$set(this.topDisplayData, element.divPosition, {
+                show: true,
+                curValue: result.curvalue,
+                unit: result.unit,
+                curstatus: result.curstatus
+              })
+            } else {
+              // 获取3D弹窗显示的数据
+              const wenduParamId = element.deviceSpecParams.find((item) => { return item.paramName === '温度' })?.paramId
+              const siduParamId = element.deviceSpecParams.find((item) => { return item.paramName === '湿度' })?.paramId
+              let wendu = {}
+              let sidu = {}
+              if (wenduParamId) {
+                wendu = data.find((item) => {
+                  return item.property_id === wenduParamId && item.device_id === element.deviceInfo.deviceId
+                })
+              }
+              if (siduParamId) {
+                sidu = data.find((item) => {
+                  return item.property_id === siduParamId && item.device_id === element.deviceInfo.deviceId
+                })
+              }
+              console.log(wendu?.curstatus, sidu?.curstatus)
+              this.oaoMessage.push({
+                id: element.divPosition,
+                wendu: (wendu?.curvalue) ? (Math.round(wendu?.curvalue)) : '-',
+                sidu: (sidu?.curvalue) ? (Math.round(sidu?.curvalue)) : '-',
+                alarmState: (wendu && wendu.curstatus > 0) || (sidu && sidu.curstatus > 0)
+              })
+            }
+          })
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/lend-manage.scss";
+.warehouse-left {
+  position: relative;
+}
+.container-wrap {
+  min-height: auto;
+  height: calc(100% / 2 - 10px);
+  overflow: hidden;
+}
+.container-wrap {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/views/storeManage/warehouse3D/fullViewSeven/index.vue b/src/views/storeManage/warehouse3D/fullViewSeven/index.vue
new file mode 100644
index 0000000..bcfad73
--- /dev/null
+++ b/src/views/storeManage/warehouse3D/fullViewSeven/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="warehouse">
+    <div class="warehouse-left">
+      <div class="left-3d">
+        <h2 class="title-arrow">
+          7楼-3D库房
+        </h2>
+        <iframe
+          ref="iframe"
+          class="iframe_box"
+          src="/webTotal/index.html"
+          frameborder="0"
+          scrolling="no"
+        />
+      </div>
+    </div>
+    <warehouse-warning :width="'458px'" :height="'calc(100% - 40px)'" />
+  </div>
+</template>
+
+<script>
+import WarehouseWarning from '@/views/components/WarehouseWarning'
+export default {
+  name: 'FullViewSeven',
+  components: { WarehouseWarning },
+  data() {
+    return {
+      cameraNameId: null
+    }
+  },
+  mounted() {
+    // 监听'全景图' iframe 获取摄像头name得id
+    // window.addEventListener('message', this.handleMessageCamera)
+  },
+  methods: {
+    // handleMessageCamera(event) {
+    //   const _this = this
+    //   if (event.data && event.data.data) {
+    //     const data = event.data.data
+    //     _this.cameraNameId = data
+    //   }
+    // },
+    destroyed() {
+      window.removeEventListener('message', this.handleMessageCamera)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
+  .warehouse-left{
+    position: relative;
+    h2{
+      display: block;
+      width: 460px !important;
+      color: #fff;
+      font-size: 16px;
+      text-align: center;
+      margin: 0 auto;
+    }
+  }
+</style>
diff --git a/src/views/storeManage/warehouse3D/index.vue b/src/views/storeManage/warehouse3D/index.vue
index aaf7941..7e7bd22 100644
--- a/src/views/storeManage/warehouse3D/index.vue
+++ b/src/views/storeManage/warehouse3D/index.vue
@@ -2,27 +2,45 @@
   <div class="warehouse-main">
     <div class="warehouse-tab">
       <div class="floor-switch">
-        <span>7楼</span>
-        <span class="active-floor">5楼</span>
+        <span :class="{ 'active-floor': floorIndex == 0 }" @click="changeFloorTab(0)">7楼</span>
+        <span :class="{ 'active-floor': floorIndex == 1 }" @click="changeFloorTab(1)">5楼</span>
+      </div>
+      <div v-if="floorIndex === 0">
+        <ul class="warehouse-nav">
+          <li :class="{ 'active-nav': activeIndex == 4 }" @click="changeActiveTab(4)">
+            <span />
+            <p>全景图</p>
+          </li>
+          <li :class="{ 'active-nav': activeIndex == 5 }" @click="changeActiveTab(5)">
+            <span />
+            <p style="margin-left:10px; line-height: 24px;">现行文件室 <br>信息技术室</p>
+          </li>
+          <li :class="{ 'active-nav': activeIndex == 6 }" @click="changeActiveTab(6)">
+            <span />
+            <p>待销文件室</p>
+          </li>
+        </ul>
+      </div>
+      <div v-if="floorIndex === 1">
+        <ul class="warehouse-nav">
+          <li :class="{ 'active-nav': activeIndex == 0 }" @click="changeActiveTab(0)">
+            <span />
+            <p>全景图</p>
+          </li>
+          <li :class="{ 'active-nav': activeIndex == 1 }" @click="changeActiveTab(1)">
+            <span />
+            <p>档案库</p>
+          </li>
+          <li :class="{ 'active-nav': activeIndex == 2 }" @click="changeActiveTab(2)">
+            <span />
+            <p>整理室</p>
+          </li>
+          <li :class="{ 'active-nav': activeIndex == 3 }" @click="changeActiveTab(3)">
+            <span />
+            <p>阅览室</p>
+          </li>
+        </ul>
       </div>
-      <ul class="warehouse-nav">
-        <li :class="{ 'active-nav': activeIndex == 0 }" @click="changeActiveTab(0)">
-          <span />
-          <p>全景图</p>
-        </li>
-        <li :class="{ 'active-nav': activeIndex == 1 }" @click="changeActiveTab(1)">
-          <span />
-          <p>档案库</p>
-        </li>
-        <li :class="{ 'active-nav': activeIndex == 2 }" @click="changeActiveTab(2)">
-          <span />
-          <p>整理室</p>
-        </li>
-        <li :class="{ 'active-nav': activeIndex == 3 }" @click="changeActiveTab(3)">
-          <span />
-          <p>阅览室</p>
-        </li>
-      </ul>
       <component :is="comName" />
     </div>
     <!-- 摄像头视频 -->
@@ -35,15 +53,19 @@ import fullView from './fullView/index.vue'
 import archivesStorage from './archivesStorage/index.vue'
 import collateRoom from './collateRoom/index.vue'
 import readRoom from './readRoom/index.vue'
+import fullViewSeven from './fullViewSeven/index.vue'
+import infoRoom from './infoRoom/index.vue'
+import destroyedFileRoom from './destroyedFileRoom/index.vue'
 import Video from './module/video'
 import displayConfigApi from '@/api/storeManage/displayConfig'
 
 export default {
   name: 'Warehouse3D',
-  components: { fullView, archivesStorage, readRoom, collateRoom, Video },
+  components: { fullView, archivesStorage, readRoom, collateRoom, fullViewSeven, infoRoom, destroyedFileRoom, Video },
   data() {
     return {
       activeIndex: 0,
+      floorIndex: 1,
       camConfigData: [],
       open: false
     }
@@ -58,6 +80,12 @@ export default {
         return 'collateRoom'
       } else if (this.activeIndex === 3) {
         return 'readRoom'
+      } else if (this.activeIndex === 4) {
+        return 'fullViewSeven'
+      } else if (this.activeIndex === 5) {
+        return 'infoRoom'
+      } else if (this.activeIndex === 6) {
+        return 'destroyedFileRoom'
       }
       return 'fullView'
     }
@@ -71,7 +99,6 @@ export default {
     }
   },
   created() {
-    // console.log(1111)
     // this.initWebSocket()
     if (this.$route.params.roomId) {
       this.activeIndex = this.$route.params.roomId
@@ -111,6 +138,14 @@ export default {
         }
       }
     },
+    changeFloorTab(data) {
+      if (data === 0) {
+        this.activeIndex = 4
+      } else {
+        this.activeIndex = 0
+      }
+      this.floorIndex = data
+    },
     changeActiveTab(data) {
       this.activeIndex = data
     },
diff --git a/src/views/storeManage/warehouse3D/infoRoom/index.vue b/src/views/storeManage/warehouse3D/infoRoom/index.vue
new file mode 100644
index 0000000..f668575
--- /dev/null
+++ b/src/views/storeManage/warehouse3D/infoRoom/index.vue
@@ -0,0 +1,274 @@
+<template>
+  <div class="warehouse">
+    <div class="warehouse-left">
+      <div class="left-3d">
+        <iframe id="myIframe" ref="myIframe" name="iframeMap" class="iframe_box" src="/webA/index.html" frameborder="0" scrolling="no" />
+        <ul class="msg-list">
+          <li v-show="topDisplayData.XXW_DIV_TOP_001.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_001.curstatus > 0 }">
+            <svg-icon icon-class="temperature" class-name="msg-list-svg" />
+            <div class="msg-txt">
+              <span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_001.curValue }}</span>
+              <p class="msg-list-unit">温度 {{ topDisplayData.XXW_DIV_TOP_001.unit }}</p>
+            </div>
+          </li>
+          <li v-show="topDisplayData.XXW_DIV_TOP_002.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_002.curstatus > 0 }">
+            <svg-icon icon-class="shidu" class-name="msg-list-svg" />
+            <div class="msg-txt">
+              <span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_002.curValue }}</span>
+              <p class="msg-list-unit">湿度 {{ topDisplayData.XXW_DIV_TOP_002.unit }}</p>
+            </div>
+          </li>
+          <li v-show="topDisplayData.XXW_DIV_TOP_003.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_003.curstatus > 0 }">
+            <svg-icon icon-class="co2" class-name="msg-list-svg" />
+            <div class="msg-txt">
+              <span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_003.curValue }}</span>
+              <p class="msg-list-unit">CO2 {{ topDisplayData.XXW_DIV_TOP_003.unit }}</p>
+            </div>
+          </li>
+          <li v-show="topDisplayData.XXW_DIV_TOP_004.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_004.curstatus > 0 }">
+            <svg-icon icon-class="voc" class-name="msg-list-svg" />
+            <div class="msg-txt">
+              <span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_004.curValue }}</span>
+              <p class="msg-list-unit">VOC {{ topDisplayData.XXW_DIV_TOP_004.unit }}</p>
+            </div>
+          </li>
+          <li v-show="topDisplayData.XXW_DIV_TOP_005.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_005.curstatus > 0 }" class="msg-pm">
+            <svg-icon icon-class="pm25" class-name="msg-list-svg" />
+            <div class="msg-txt">
+              <span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_005.curValue }}</span>
+              <p class="msg-list-unit">PM2.5 {{ topDisplayData.XXW_DIV_TOP_005.unit }}</p>
+            </div>
+          </li>
+          <li v-show="topDisplayData.XXW_DIV_TOP_006.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_006.curstatus > 0 }" class="msg-pm">
+            <svg-icon icon-class="pm10" class-name="msg-list-svg" />
+            <div class="msg-txt">
+              <span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_006.curValue }}</span>
+              <p class="msg-list-unit">PM10 {{ topDisplayData.XXW_DIV_TOP_006.unit }}</p>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="warehouse-right">
+      <!-- 报警记录 -->
+      <warehouse-warning :height="'calc(100% - 40px)'" :storeroom-id="roomId" />
+      <!-- 门禁记录 -->
+      <security-door :height="'calc(100% - 40px)'" />
+    </div>
+  </div>
+</template>
+
+<script>
+import WarehouseWarning from '@/views/components/WarehouseWarning'
+import SecurityDoor from '@/views/components/SecurityDoor'
+import displayConfigApi from '@/api/storeManage/displayConfig'
+import thirdApi from '@/api/thirdApi'
+export default {
+  name: 'InfoRoom',
+  components: { WarehouseWarning, SecurityDoor },
+  data() {
+    return {
+      roomId: '1B2DADD8499058954C0CAC ',
+      allDisplayConfigData: [],
+      displayConfigData: [],
+      url: '',
+      allDeviceIds: [],
+      oaoMessage: [],
+      timer: '',
+      topDisplayData: {
+        XXW_DIV_TOP_001: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        },
+        XXW_DIV_TOP_002: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        },
+        XXW_DIV_TOP_003: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        },
+        XXW_DIV_TOP_004: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        },
+        XXW_DIV_TOP_005: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        },
+        XXW_DIV_TOP_006: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        }
+      }
+      // ,
+      // iframeWin: null,
+      // timer: null, // 定时器id 滚动表格
+      // isScroll: false // 是否滚动
+    }
+  },
+  async created() {
+    window.getIframeLoading = this.getIframeLoading // 把vue实例中的方法引用给window对象
+    this.allDisplayConfigData = await displayConfigApi.list({ storeroomId: this.roomId })
+    this.allDisplayConfigData.forEach(element => {
+      if (element.isDisplay && element.bindState && element.deviceInfo && (element.divPosition.includes('OAO') || element.divPosition.includes('TOP'))) {
+        this.allDeviceIds.push(element.deviceInfo.deviceId)
+        if (!this.url) {
+          this.url = 'http://' + element.deviceInfo.deviceIp + ':' + element.deviceInfo.devicePort
+        }
+      }
+    })
+    this.displayConfigData = this.allDisplayConfigData.filter((item) => { return item.isDisplay && item.bindState && item.deviceInfo && (item.divPosition.includes('OAO') || item.divPosition.includes('TOP')) })
+    await this.getRealTimeData()
+  },
+  mounted() {
+    const _this = this
+    _this.iframeWin = this.$refs.myIframe.contentWindow
+    // inframe 加载完成之后
+    document.getElementById('myIframe').onload = function() {
+      _this.deviceState()
+    }
+    window.addEventListener('message', this.handleMessageDevice)
+    // 定时请求第三方数据，更新页面数据
+    this.timer = setInterval(async() => {
+      await _this.getRealTimeData()
+      _this.handleAQI()
+    }, 10000)
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
+  },
+  methods: {
+    // 加载完成状态传值
+    getIframeLoading(value) {
+      // console.log(`我是iframe传过来的参数：${value}`)
+      if (value === 'false') {
+        this.allDisplayConfigData.forEach(element => {
+          if ((!element.isDisplay || !element.bindState) && element.divPosition.includes('OAO')) {
+            this.handleHide(element.divPosition)
+          }
+        })
+        // this.handleAlarm('DAK_MO_OAO_003')
+        this.deviceState()
+        this.handleAQI()
+      }
+    },
+    // 传入设备状态data  / 给iframe传初始值
+    deviceState(e) {
+      this.iframeWin.postMessage({
+        data: this.oaoMessage
+      }, '*')
+    },
+    // 点击查看设备状况 / 密集架列号
+    handleMessageDevice(event) {
+      const _this = this
+      if (event.data && event.data.data) {
+        const data = event.data.data
+        if (data.includes('cabinet')) {
+          _this.deviceId = data.slice(data.length - 2)
+          _this.$router.push('/storeManage/deseCabinet')
+          localStorage.setItem('cabinetNum', _this.deviceId)
+        }
+      }
+    },
+    // 设置温湿度
+    handleAQI() {
+      this.oaoMessage.forEach(element => {
+        window.frames['iframeMap'].setAlertValue(element.id, element.wendu, element.sidu)
+      })
+    },
+    // 设置温湿度报警状况
+    handleAlarm(deviceId) {
+      // true 报警 false 不报警
+      window.frames['iframeMap'].Myalert(deviceId, true)
+    },
+    // 设置是否显示
+    handleHide(deviceId) {
+      // true 显示 false 隐藏
+      window.frames['iframeMap'].setYangGanCanshow(deviceId, false)
+    },
+    // 表格隔行变色
+    rowBgColor({ row, rowIndex }) {
+      if (rowIndex % 2 === 1) {
+        return 'light-blue'
+      } else {
+        return ''
+      }
+    },
+    getRealTimeData() {
+      if (this.allDeviceIds.length > 0) {
+        thirdApi.getRealTimeData({ ids: this.allDeviceIds, url: this.url }).then((data) => {
+          this.oaoMessage.splice(0, this.oaoMessage.length)
+          this.displayConfigData.forEach(element => {
+            if (element.divPosition.includes('TOP') && element.deviceSpecParams[0]) {
+              // 获取页面div显示的数据
+              const result = data.find((item) => {
+                return item.property_id === element.deviceSpecParams[0].paramId && item.device_id === element.deviceInfo.deviceId
+              })
+              console.log(result)
+              this.$set(this.topDisplayData, element.divPosition, {
+                show: true,
+                curValue: result.curvalue,
+                unit: result.unit,
+                curstatus: result.curstatus
+              })
+            } else {
+              // 获取3D弹窗显示的数据
+              const wenduParamId = element.deviceSpecParams.find((item) => { return item.paramName === '温度' })?.paramId
+              const siduParamId = element.deviceSpecParams.find((item) => { return item.paramName === '湿度' })?.paramId
+              let wendu = {}
+              let sidu = {}
+              if (wenduParamId) {
+                wendu = data.find((item) => {
+                  return item.property_id === wenduParamId && item.device_id === element.deviceInfo.deviceId
+                })
+              }
+              if (siduParamId) {
+                sidu = data.find((item) => {
+                  return item.property_id === siduParamId && item.device_id === element.deviceInfo.deviceId
+                })
+              }
+              console.log(wendu?.curstatus, sidu?.curstatus)
+              this.oaoMessage.push({
+                id: element.divPosition,
+                wendu: (wendu?.curvalue) ? (Math.round(wendu?.curvalue)) : '-',
+                sidu: (sidu?.curvalue) ? (Math.round(sidu?.curvalue)) : '-',
+                alarmState: (wendu && wendu.curstatus > 0) || (sidu && sidu.curstatus > 0)
+              })
+            }
+          })
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/lend-manage.scss";
+.warehouse-left {
+  position: relative;
+}
+.container-wrap {
+  min-height: auto;
+  height: calc(100% / 2 - 10px);
+  overflow: hidden;
+}
+.container-wrap {
+  margin-bottom: 20px;
+}
+</style>