zc

src/views/integratedManagement/laboratoryManagement/subject/index.vue

@@ -56,7 +56,7 @@
           </el-form>
           <div class="table_border">
             <el-table class="table-box" ref="multipleTable" border :data="dataList" highlight-current-row
-                      @current-change="handleCurrentChange" style="cursor: pointer;">
+                      @current-change="handleCurrentChange">
               <el-table-column label="排序" align="left" prop="orderNum" width="80">
                 <template slot-scope="scope">
                   <el-input maxlength="4" type="text" oninput="value=value.replace(/[^0-9.]/g,'')"
@@ -387,6 +387,16 @@
         padding: 0;
       }
     }
+    ::v-deep .el-input--medium .el-input__inner {
+      height: 26px;
+      line-height: 26px;
+      width: 55px;
+      text-align: center;
+      padding: 0 10px;
+    }
+    ::v-deep .el-table__row{
+      cursor: pointer;
+    }
     .subject-page {
       flex: 1;
       display: flex;
@@ -401,30 +411,6 @@
         overflow: hidden;
         padding: 2px 0 10px 10px;
         box-sizing: border-box;
-        .form-dropdown-box {
-          display: flex;
-          margin: 0;
-          padding: 0 10px;
-          cursor: pointer;
-          height: 40px;
-          img:nth-child(1) {
-            width: 16px;
-            height: 16px;
-            margin-top: 12px;
-          }
-          p {
-            width: 47px;
-            text-align: center;
-            font-size: 14px;
-            margin: 0;
-            line-height: 40px;
-          }
-          img:nth-child(3) {
-            width: 10px;
-            height: 6px;
-            margin-top: 17px;
-          }
-        }
       }
       .left-subject-list-flex {
         flex: 1;
@@ -436,7 +422,7 @@
         flex-direction: column;
         margin-right: 6px;
         overflow: hidden;
-        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
         border-radius: 10px 10px 10px 10px;
         padding-top: 24px;
         margin-bottom: 10px;
@@ -449,688 +435,6 @@
           overflow: hidden;
         }
       }
-      .overflow-box {
-        overflow: hidden;
-      }
-      .right-subject-box {
-        /*width:440px;*/
-        display: flex;
-        flex-direction: column;
-        .top-button-box {
-          display: flex;
-          margin-left: 6px;
-          div {
-            padding: 0 10px;
-            height: 40px;
-            line-height: 40px;
-            font-size: 14px;
-            text-align: center;
-            border-top-right-radius: 10px;
-            border-top-left-radius: 10px;
-            margin-right: 1px;
-            cursor: pointer;
-            font-weight: 500;
-          }
-          .buttonColorA {
-            color: #0045AF;
-            background: #fff;
-            border: 1px solid #E0E0E0;
-            border-bottom: 1px solid rgba(224, 224, 224, 0.3);
-          }
-          .buttonColorB {
-            color: #333;
-            background: #E0E0E0;
-            border: 1px solid #E0E0E0;
-            border-bottom: none;
-          }
-        }
-        .bottom-max-box {
-          width: 428px;
-          box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
-          border-radius: 0px 0px 20px 20px;
-          font-weight: 500;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          margin-left: 6px;
-          overflow: hidden;
-          margin-bottom: 10px;
-          .bottom-sensor-box {
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            background: #fff;
-            width: 424px;
-            flex: 1;
-            position: relative;
-            // border: 1px solid #E0E0E0;
-            //border-radius: 0 10px 10px 10px;
-            .top-title {
-              margin: 16px 26px;
-              display: flex;
-              justify-content: space-between;
-              > i {
-                font-style: normal;
-                line-height: 18px;
-                font-size: 16px;
-                color: #333;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              }
-            }
-            .null-text-p {
-              text-align: center;
-              font-size: 16px;
-              color: #999;
-              line-height: 50px;
-              margin: 0 30px;
-            }
-            .sensor-for-max-box {
-              .sensor-for-big-box {
-                display: inline-block;
-                width: 180px;
-                height: 60px;
-                margin: 0 0 11px 22px;
-                border-radius: 10px;
-                .sensor-for-min-box {
-                  display: flex;
-                  img {
-                    width: 26px;
-                    height: 26px;
-                    margin: 17px 11px;
-                  }
-                  div {
-                    margin: 9px 0;
-                    p {
-                      color: #fff;
-                    }
-                    p:nth-child(1) {
-                      font-size: 14px;
-                      line-height: 20px;
-                    }
-                    p:nth-child(2) {
-                      font-size: 16px;
-                      line-height: 22px;
-                    }
-                  }
-                }
-              }
-              .sensor-color-a {
-                background: #FF7272;
-                color: #fff;
-              }
-              .sensor-color-b {
-                background: #E0E0E0;
-                color: #999999;
-              }
-              .sensor-color-c {
-                background: #80D164;
-                color: #fff;
-
-              }
-            }
-            .bottom-text {
-              line-height: 18px;
-              font-size: 14px;
-              color: #999999;
-              margin: 0 0px 0px 26px;
-              position: absolute;
-              bottom: 22px;
-            }
-          }
-          .bottom-switch-box {
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            background: #fff;
-            width: 424px;
-            flex: 1;
-            .top-title {
-              margin: 16px 26px;
-              display: flex;
-              justify-content: space-between;
-              > i {
-                font-style: normal;
-                line-height: 18px;
-                font-size: 16px;
-                color: #333;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              }
-            }
-            .null-text-p {
-              text-align: center;
-              font-size: 16px;
-              color: #999;
-              line-height: 50px;
-              margin: 0 30px;
-            }
-            .switch-for-max-box {
-              width: 424px;
-              display: flex;
-              justify-content: flex-start;
-              flex-wrap: wrap;
-              .switch-for-big-box {
-                .switch-for-min-box {
-                  width: 180px;
-                  height: 70px;
-                  margin: 0 0 14px 20px;
-                  background: rgba(1, 131, 250, 0.1);
-                  border-radius: 10px 10px 10px 10px;
-                  padding: 10px;
-                  box-sizing: border-box;
-                  .switch-for-min-box_t {
-                    width: 100%;
-                    display: flex;
-                    justify-content: space-between;
-                    .switch-for-min-title {
-                      font-size: 14px;
-                      line-height: 24px;
-                      width: 84px;
-                      color: #333333;
-                      display: block;
-                      overflow: hidden;
-                      text-overflow: ellipsis;
-                      white-space: nowrap;
-                    }
-                    .switch-null-p {
-                      font-size: 14px;
-                      line-height: 24px;
-                      color: #999;
-                    }
-                    .switch-pc-type-p {
-                      font-size: 14px;
-                      line-height: 24px;
-                      color: #0183fa;
-                      cursor: pointer;
-                    }
-                  }
-                  .switch-for-min-box_b {
-                    margin-top: 10px;
-                    .switch-null-ventilate {
-                      width: 62px;
-                      height: 18px;
-                      border-radius: 10px 10px 10px 10px;
-                      opacity: 1;
-                      border: 1px solid #0183FA;
-                      font-size: 12px;
-                      font-weight: 400;
-                      color: #0183FA;
-                      line-height: 15px;
-                      text-align: center;
-                      float: left;
-                    }
-                    .switch {
-                      float: right;
-                    }
-                  }
-
-                  .switch-for-min-button {
-                    width: 70px;
-                    height: 30px;
-                    line-height: 30px;
-                    font-size: 14px;
-                    color: #0045AF;
-                    border-radius: 6px;
-                    border: 1px solid #0045AF;
-                    margin-top: 14px;
-                    text-align: center;
-                    cursor: pointer;
-                  }
-                }
-              }
-            }
-          }
-          .bottom-video-box {
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            background: #fff;
-            width: 424px;
-            border-radius: 0 10px 10px 10px;
-            flex: 1;
-            .top-title {
-              margin: 16px 26px;
-              display: flex;
-              justify-content: space-between;
-              > i {
-                font-style: normal;
-                line-height: 18px;
-                font-size: 16px;
-                color: #333;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              }
-            }
-            .null-text-p {
-              text-align: center;
-              font-size: 16px;
-              color: #999;
-              line-height: 50px;
-              margin: 0 30px;
-            }
-            .video-for-max-box {
-              .switch-for-big-box {
-                width: 374px;
-                height: 262px;
-                margin: 0 auto 14px;
-                position: relative;
-                .position-p {
-                  width: 42px;
-                  height: 42px;
-                  text-align: center;
-                  line-height: 42px;
-                  font-size: 18px;
-                  position: absolute;
-                  top: 0;
-                  right: 0;
-                  color: #fff;
-                  cursor: pointer;
-                }
-              }
-            }
-          }
-          .bottom-alarm-box {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            background: #fff;
-            width: 424px;
-            overflow-x: hidden;
-            padding: 0 27px 0 23px;
-            box-sizing: border-box;
-            .top-title {
-              margin: 16px 0px;
-              display: flex;
-              justify-content: space-between;
-              > i {
-                font-style: normal;
-                line-height: 18px;
-                font-size: 16px;
-                color: #333;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              }
-            }
-            .alarm-max-box {
-              width: 374px;
-              height: 60px;
-              display: flex;
-              position: relative;
-              background: #f5f5f5;
-              border-radius: 10px 10px 10px 10px;
-              margin: 10px 0 0 0;
-              .alarm-img {
-                width: 30px;
-                height: 30px;
-                margin: 14px;
-              }
-              .alarm-big-box {
-                p:nth-of-type(1) {
-                  position: absolute;
-                  top: 18px;
-                  left: 64px;
-                  font-size: 14px;
-                  font-weight: 400;
-                  color: #333333;
-                }
-                .alarm-position-box {
-                  position: absolute;
-                  top: 8px;
-                  left: 260px;
-                }
-                p:nth-of-type(2) {
-                  position: absolute;
-                  top: 0px;
-                  right: 0px;
-                  width: 50px;
-                  height: 20px;
-                  font-size: 12px;
-                  font-weight: 700;
-                  line-height: 20px;
-                  border-radius: 0px 10px 0px 10px;
-                  text-align: center;
-                }
-                .colorTypeA {
-                  background: rgba(1, 131, 250, 0.2);
-                  color: #0183FA;
-                }
-                .colorTypeB {
-                  background: #ECECEC;
-                  color: #A2A2A2;
-                }
-              }
-
-            }
-            .BGcolorTypeA {
-              width: 374px;
-              height: 60px;
-              display: flex;
-              position: relative;
-              background: rgba(1, 131, 250, 0.1);
-              border-radius: 10px 10px 10px 10px;
-              margin: 10px 0 0 0;
-            }
-            .BGcolorTypeB {
-              width: 374px;
-              height: 60px;
-              display: flex;
-              position: relative;
-              background: #F5F5F5;
-              border-radius: 10px 10px 10px 10px;
-              margin: 10px 0 0 0;
-
-            }
-            .alarm-title-box {
-              display: flex;
-              p {
-                line-height: 60px;
-                font-size: 14px;
-              }
-              p:nth-child(1) {
-                flex: 1;
-              }
-              p:nth-child(2) {
-                cursor: pointer;
-              }
-            }
-          }
-          /*智能门禁*/
-          .bottom-entrance-box {
-            flex: 1;
-            background: #fff;
-            width: 424px;
-            border-radius: 0 10px 10px 10px;
-            .top-title {
-              margin: 16px 26px;
-              display: flex;
-              justify-content: space-between;
-              > i {
-                font-style: normal;
-                line-height: 18px;
-                font-size: 16px;
-                color: #333;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              }
-            }
-            .entrance {
-              width: 374px;
-              height: 60px;
-              display: flex;
-              justify-content: flex-start;
-              border-radius: 10px 10px 10px 10px;
-              margin: 10px 0 0 26px;
-              position: relative;
-              .entrance_c {
-                width: 30px;
-                height: 30px;
-                margin: 14px 20px 0px 14px;
-              }
-              .entrance_r {
-                font-size: 14px;
-                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
-                font-weight: 400;
-                color: #333333;
-                line-height: 60px;
-              }
-              .entrance_l_yes {
-                width: 60px;
-                height: 30px;
-                background: #0183FA;
-                border-radius: 0px 10px 0px 10px;
-                font-size: 14px;
-                font-weight: 400;
-                color: #fff;
-                line-height: 30px;
-                text-align: center;
-                position: absolute;
-                top: 0;
-                right: 0;
-              }
-              .entrance_l_no {
-                width: 60px;
-                height: 30px;
-                background: #A2A2A2;
-                border-radius: 0px 10px 0px 10px;
-                font-size: 14px;
-                font-weight: 400;
-                color: #fff;
-                line-height: 30px;
-                text-align: center;
-                position: absolute;
-                top: 0;
-                right: 0;
-              }
-            }
-            .BGentrance_l_yes {
-              background: rgba(1, 131, 250, 0.1);
-            }
-            .BGentrance_l_no {
-              background: #F5F5F5;
-            }
-
-          }
-          .null-data-img {
-            width: 137px;
-            height: 137px;
-            display: block;
-            margin: 10px auto;
-          }
-          .null-text-p {
-            text-align: center;
-            font-size: 16px;
-            color: #999;
-            line-height: 50px;
-            margin: 0 30px;
-          }
-        }
-      }
-    }
-  }
-</style>
-<style lang="scss">
-  .alarm-position-box {
-    .switch .el-switch__label {
-      position: absolute;
-      display: none;
-      color: #fff !important;
-    }
-    .switch .el-switch__label--right {
-      z-index: 1;
-    }
-    .switch .el-switch__label--right span {
-      margin-right: 9px;
-    }
-    .switch .el-switch__label--left {
-      z-index: 1;
-    }
-    .switch .el-switch__label--left span {
-      margin-left: 9px;
-    }
-    .switch .el-switch__label.is-active {
-      display: block;
-    }
-    .switch.el-switch .el-switch__core {
-      background-color: rgba(255, 196, 124) !important;
-      border-color: rgba(255, 196, 124) !important;
-    }
-    .switch.el-switch .el-switch__core,
-    .el-switch .el-switch__label {
-      width: 68px !important;
-      height: 20px !important;
-      line-height: 30px !important;
-      -webkit-border-radius: 20px !important;
-      -moz-border-radius: 20px !important;
-      border-radius: 20px !important;
-      margin: 0;
-      position: absolute;
-      top: 0;
-
-    }
-    .switch .el-switch__label--left span {
-      margin-left: 22px !important;
-      font-size: 12px;
-      color: #fff;
-      line-height: 20px;
-      position: relative;
-      top: -5px;
-    }
-    .switch .el-switch__label--right span {
-      margin-left: 5px !important;
-      font-size: 12px;
-      position: relative;
-      top: -5px;
-    }
-    .el-switch__core:after {
-      background: #FA8A01 !important;
-      height: 16px !important;
-      width: 16px !important;
-      top: 1px !important;
-    }
-    .el-switch.is-checked .el-switch__core::after {
-      margin-left: -20px !important;
-    }
-    .el-switch {
-      margin: 10px auto 0;
-      display: block;
-      width: 80px !important;
-      height: 4px !important;
-    }
-  }
-
-  .subject-alarm-time {
-    .el-table__empty-text {
-      background-size: 45%;
-    }
-  }
-
-  .checkItemLibrary-dialog-box {
-    .teacher-import-dialog-upLoad-box {
-      .el-upload {
-        width: 450px;
-        margin: 0 55px;
-        .el-upload-dragger {
-          width: 450px;
-          .el-icon-upload {
-            font-size: 100px;
-            color: #CBE6FE;
-          }
-          .el-upload__text {
-            margin-top: 20px;
-          }
-        }
-      }
-      .el-upload__tip {
-        margin-left: 60px;
-        font-size: 14px;
-        margin-top: 10px;
-      }
-      .el-upload-text-box {
-        background: #F5F5F5;
-        border-radius: 10px;
-        margin: 15px 30px 0;
-        padding: 0 20px 15px;
-        overflow: hidden;
-        * {
-          margin: 0;
-        }
-        .img-text-box {
-          display: flex;
-          margin-top: 15px;
-          img {
-            width: 16px;
-            height: 16px;
-            margin-right: 13px;
-          }
-          p {
-            height: 16px;
-            line-height: 16px;
-            font-size: 12px;
-          }
-        }
-        .text-p {
-          margin-top: 15px;
-          margin-left: 29px;
-          height: 16px;
-          line-height: 16px;
-          font-size: 12px;
-        }
-      }
-    }
-    .teacher-import-dialog-button-box {
-      display: flex;
-      width: 190px;
-      margin: 0 auto;
-      p {
-        width: 70px;
-        height: 30px;
-        line-height: 30px;
-        font-size: 14px;
-        margin: 0 auto;
-      }
-    }
-    .teacher-import-dialog-position-box {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 999;
-      background: rgba(255, 255, 255, 0.4);
-      border-radius: 20px;
-    }
-    .code-max-box {
-      display: flex;
-      .code-button-box {
-        display: flex;
-        flex-direction: column;
-        margin-left: 8px;
-        p {
-          width: 40px;
-          text-align: center;
-          line-height: 19px;
-          font-size: 14px;
-          cursor: pointer;
-          color: #d8d8d8;
-        }
-        p:nth-child(1) {
-          border: 1px solid #d8d8d8;
-          border-top-left-radius: 4px;
-          border-top-right-radius: 4px;
-        }
-        p:nth-child(2) {
-          border-bottom: 1px solid #d8d8d8;
-          border-left: 1px solid #d8d8d8;
-          border-right: 1px solid #d8d8d8;
-          border-bottom-left-radius: 4px;
-          border-bottom-right-radius: 4px;
-        }
-        p:hover {
-          color: #fff;
-          background-color: #d8d8d8;
-        }
-      }
-    }
-  }
-
-  .subject-page {
-    .el-table {
-      .el-input--medium .el-input__inner {
-        height: 26px;
-        line-height: 26px;
-        width: 55px;
-        text-align: center;
-        padding: 0 10px;
-      }
-    }
-    .pagination-container {
-      height: 45px;
     }
   }
 </style>

src/views/integratedManagement/laboratoryManagement/subject/indexRightPage/videoPage.vue

@@ -1,17 +1,37 @@
 <!--视频模块-->
 <template>
-  <div class="indexRightPage-videoPage">
+  <div class="indexRightPage-videoPage scrollbar-box">
+    <mpegts-video style="display: inline-block" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
 
   </div>
 </template>
 
 <script>
+  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
   //import { getInfo } from "@/api/integratedManagement/index";
   export default {
     name: 'videoPage',
+    components: {
+      mpegtsVideo,
+    },
     data(){
       return{
-        videoList:[],
+        videoList:[
+          {
+            id:2,        //(ID:非必传-默认随机生成)
+            width:378,    //(宽度:非必传-默认600)
+            height:213,   //(高度:非必传-默认338)
+            type:'flv',
+            url:"ws://192.168.1.43:8230/rtp/440102004920000000010064_34020000001320000064.flv"        //(视频地址:必传)
+          },
+          {
+            id:3,        //(ID:非必传-默认随机生成)
+            width:378,    //(宽度:非必传-默认600)
+            height:213,   //(高度:非必传-默认338)
+            type:'flv',
+            url:"ws://192.168.1.43:8230/rtp/440102004920000000010064_34020000001320000064.flv"        //(视频地址:必传)
+          },
+        ],
       }
     },
     created(){
@@ -31,8 +51,6 @@
 <style scoped lang="scss">
   .indexRightPage-videoPage{
     flex:1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
+    padding:0 15px 20px 15px;
   }
 </style>