zc

src/assets/styles/commonality.scss

@@ -248,8 +248,8 @@
 }
 //表格滚动条样式
 .el-table__body-wrapper::-webkit-scrollbar{
-  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
-  height: 6px;
+  width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
 }
 .el-table__body-wrapper::-webkit-scrollbar-thumb{
   border-radius: 5px;
@@ -513,8 +513,8 @@
       }
       //滚动条样式
       .el-scrollbar__view::-webkit-scrollbar{
-        width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
-        height: 6px;
+        width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
+        height: 8px;
       }
       .el-scrollbar__view::-webkit-scrollbar-thumb{
         border-radius: 5px;

src/assets/styles/index.scss

@@ -259,8 +259,8 @@ aside {
 }
 //抽屉滚动条
 .el-drawer__body::-webkit-scrollbar{
-  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-  height: 4px;
+  width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
 }
 .el-drawer__body::-webkit-scrollbar-thumb{
   border-radius: 5px;
@@ -391,8 +391,8 @@ aside {
 }
 //富文本滚动条样式
 .w-e-text::-webkit-scrollbar{
-  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-  height: 4px;
+  width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
 }
 .w-e-text::-webkit-scrollbar-thumb{
   border-radius: 5px;
@@ -417,8 +417,8 @@ aside {
   overflow-y: scroll;
 }
 .scrollbar-box::-webkit-scrollbar{
-  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-  height: 4px;
+  width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
 }
 .scrollbar-box::-webkit-scrollbar-thumb{
   border-radius: 5px;
@@ -437,8 +437,8 @@ aside {
   white-space: nowrap;
 }
 .scrollbar-x-box::-webkit-scrollbar{
-  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-  height: 4px;
+  width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
 }
 .scrollbar-x-box::-webkit-scrollbar-thumb{
   border-radius: 5px;
@@ -455,8 +455,8 @@ aside {
   overflow-y: scroll;
 }
 .el-textarea__inner::-webkit-scrollbar{
-  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
-  height: 4px;
+  width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
 }
 .el-textarea__inner::-webkit-scrollbar-thumb{
   border-radius: 5px;

src/components/fullScreenMpegtsVideo/fullScreenMpegtsVideo.vue

@@ -0,0 +1,267 @@
+<!--
+@name: fullScreenMpegtsVideo
+@description: 通用视频组件
+@author: zc
+@time: 2023/11/30
+@引入:
+
+  <full-screen-mpegts-video ref="fullScreenMpegtsVideo" :videoProps="videoProps"></full-screen-mpegts-video>
+
+  import fullScreenMpegtsVideo from '@/components/fullScreenMpegtsVideo/fullScreenMpegtsVideo.vue'
+
+  components: {
+    fullScreenMpegtsVideo,
+  },
+
+  videoProps:{
+    id:50,        //(ID:非必传-默认随机生成)
+    width:600,    //(宽度:非必传-默认600)
+    height:338,   //(高度:非必传-默认338)
+    type:'flv',   //(视频类型:非必传-默认'flv')
+    isLive:true,  //(是否直播流:非必传-默认true)
+    url:""        //(视频地址:必传)
+  }
+
+  this.$refs.fullScreenMpegtsVideo.openVideo()
+
+-->
+
+<template>
+  <div class="fullScreenMpegtsVideo-max-box" v-if="fullScreenMpegtsVideoType">
+    <div class="fullScreenMpegtsVideo">
+      <div class="fullScreenMpegtsVideo-min">
+        <p class="reconnectText"
+           :style="'height:'+videoData.height+'px;width:'+videoData.width+'px;line-height:'+videoData.height+'px;'"
+           v-if="reconnectType">连接已断开,请联系管理员或等待重连</p>
+        <video
+          :id="videoData.id" :ref="videoData.id"
+          :width="videoData.width" :height="videoData.height"
+          autoplay controls  muted >
+        </video>
+      </div>
+      <p class="el-icon-full-screen full-screen-button" @click="fullScreen"></p>
+    </div>
+    <p class="out-position-p el-icon-circle-close" @click="offVideo"></p>
+  </div>
+
+</template>
+<script>
+  import mpegts from 'mpegts.js'
+  export default {
+    name: 'fullScreenMpegtsVideo',
+    props: {
+      videoProps:{},
+    },
+    data () {
+      return {
+        fullScreenMpegtsVideoType:false,
+        videoData:{},
+        flvPlayer:null,//连接数据
+        decodedFrames:null,//断流帧
+        decodedFramesNum:null,//断流计数器
+        reconnectType:false,//重连状态
+        videoImg:null,
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+      //开启视频窗口
+      openVideo(){
+        let self = this;
+        console.log('videoProps======>',this.videoProps);
+        this.$set(this,'videoData',{
+          id:this.videoProps.id?this.videoProps.id:this.generateRandomString(),
+          width:1065,
+          height:603,
+          type:this.videoProps.type?this.videoProps.type:'flv',
+          isLive:this.videoProps.isLive?this.videoProps.isLive:true,
+          url:this.videoProps.url,
+        });
+        this.$set(this,'fullScreenMpegtsVideoType',true);
+        setTimeout(function(){
+          self.initMpegts();
+        },200);
+      },
+      offVideo(){
+        this.videoOff();
+        this.$set(this,'fullScreenMpegtsVideoType',false);
+      },
+      //窗口全屏
+      fullScreen(){
+        this.$refs[this.videoData.id].webkitRequestFullScreen();
+      },
+      //截取封面
+      videoCover(){
+        let video = document.getElementById(this.videoData.id);
+        let canvas = document.createElement("canvas");
+        let width = video.width; //canvas的尺寸和图片一样
+        let height = video.height;
+        canvas.width = width;
+        canvas.height = height;
+        canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
+        let videoImg = canvas.toDataURL('image/jpeg'); //转换为base64
+      },
+      //连接视频
+      initMpegts() {
+        // console.log("连接");
+        if (mpegts.getFeatureList().mseLivePlayback) {
+          //视频DOM
+          let videoElement = document.getElementById(this.videoData.id);
+          //设置
+          let config = {
+            liveBufferLatencyChasing: true,//自动追针
+            autoCleanupMaxBackwardDuration:3*60,//清除缓存  默认保留3*60
+          };
+          this.flvPlayer = mpegts.createPlayer({
+            type: this.videoData.type,
+            isLive: this.videoData.isLive,
+            url: this.videoData.url,
+          },config);
+          this.flvPlayer.attachMediaElement(videoElement);
+          this.flvPlayer.load();
+          this.flvPlayer.play();
+          let playPromise = this.flvPlayer.play();
+          if (playPromise !== undefined) {
+            playPromise.then((_) => {
+              this.$set(this,'reconnectType',false);
+              // console.log("播放", _);
+            }).
+            catch ((error) => {
+              // console.log("暂停", error);
+              this.$set(this,'reconnectType',true);
+              this.reconnectVideo();
+            });
+          }
+          //断流检测
+          this.flvPlayer.on(mpegts.Events.STATISTICS_INFO, (e) => {
+            // console.log("解码帧：",e.decodedFrames); // 已经解码的帧数
+            if(this.decodedFrames !== e.decodedFrames){
+              // console.log("连接正常"); // 已经解码的帧数
+              this.$set(this,'decodedFrames',e.decodedFrames);
+              this.$set(this,'decodedFramesNum',0);
+            }else{
+              // console.log("连接异常"); // 已经解码的帧数
+              this.decodedFramesNum++
+              if(this.decodedFramesNum>30){
+                this.$set(this,'reconnectType',true);
+                this.reconnectVideo();
+              }
+            }
+          });
+          this.flvPlayer.on(mpegts.Events.ERROR, e=> {
+            // console.log('发生异常')
+            this.$set(this,'reconnectType',true);
+            this.reconnectVideo();
+          });
+          this.flvPlayer.on(mpegts.Events.LOADING_COMPLETE, (e) => {
+            // console.log("视频流已结束");
+            this.$set(this,'reconnectType',true);
+            this.reconnectVideo();
+          });
+          // console.log('flvPlayer',this.flvPlayer)
+        }
+      },
+      //重新连接
+      reconnectVideo(){
+        let self = this;
+        this.flvPlayer.pause();
+        this.flvPlayer.unload();
+        this.flvPlayer.detachMediaElement();
+        this.flvPlayer.destroy();
+        this.flvPlayer = null;
+        setTimeout(function(){
+          self.initMpegts();
+        },2000);
+      },
+      //断开视频流
+      videoOff(){
+        // console.log("断开连接");
+        this.flvPlayer.pause();
+        this.flvPlayer.unload();
+        this.flvPlayer.detachMediaElement();
+        this.flvPlayer.destroy();
+        this.flvPlayer = null;
+      },
+      //生成随机ID
+      generateRandomString() {
+        let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+        let randomString = "";
+        for (let i = 0; i < 8; i++) {
+          let randomIndex = Math.floor(Math.random() * chars.length);
+          randomString += chars.charAt(randomIndex);
+        }
+        return randomString;
+      }
+    },
+    beforeDestroy() {
+      let self = this;
+      // console.log("beforeDestroy");
+      self.videoOff();
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .fullScreenMpegtsVideo-max-box{
+    position: fixed;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    background-color: rgba(0,0,0,0.8);
+    z-index:10000;
+  }
+  .out-position-p{
+    position: absolute;
+    top:50px;
+    right:50px;
+    font-size:40px;
+    color:#fff;
+    width:40px;
+    height:40px;
+    line-height:40px;
+    cursor: pointer;
+  }
+  .fullScreenMpegtsVideo{
+    position: absolute;
+    top:50%;
+    left:50%;
+    margin-top:-301px;
+    margin-left:-532px;
+    *{
+      margin:0;
+      padding:0;
+    }
+    .fullScreenMpegtsVideo-min{
+      position: relative;
+      .reconnectText{
+        position: absolute;
+        color:#fff;
+        z-index:2;
+        text-align: center;
+        top:0;
+        left:0;
+      }
+      .full-screen-button{
+        color:#fff;
+        position:absolute;
+        font-size:20px;
+        height:30px;
+        width:30px;
+        line-height:30px;
+        text-align: center;
+        top:0;
+        right:0;
+        z-index: 1;
+        cursor: pointer;
+      }
+      .full-screen-button:hover{
+        color:#00b7ee;
+      }
+    }
+  }
+</style>

src/views/chemicalManage/basicManagement/chemicalsCabinetManage/addPage.vue

@@ -1,7 +1,8 @@
+<!--新增/编辑化学品柜-->
 <template>
   <div class="page-container chemicalsCabinetManage-addPage">
     <div class="page-top-title-box">
-      <p class="page-top-title-name-p">{{newData.id?'编辑':'新增'}}</p>
+      <p class="page-top-title-name-p">{{newData.id?'编辑化学品柜':'编辑化学品柜'}}</p>
       <p class="page-top-title-out-p" @click="backPage">返回</p>
     </div>
     <div class="content-box scrollbar-box">
@@ -73,19 +74,11 @@
                           clearable maxLength="20" style="width:280px;"></el-input>
               </el-form-item>
             </div>
-            <!--<div class="item-name-box">-->
-              <!--<el-form-item label="柜门名称：" label-width="120px"-->
-                            <!--:prop="'data6.'+ index +'.itemData1'" :rules="rules.itemData1">-->
-                <!--<el-input v-model="item.itemData1" placeholder="请输入柜门名称"-->
-                          <!--clearable maxLength="20" style="width:200px;"></el-input>-->
-              <!--</el-form-item>-->
-              <!--<p class="del-item-p">删除柜门</p>-->
-            <!--</div>-->
-            <div class="item-name-box">
+            <div class="item-text-box">
               <el-form-item label="层数：" label-width="120px"
                             :prop="'data6.'+ index +'.itemData2'" :rules="rules.itemData2">
                 <el-input-number v-model="item.itemData2" style="width:200px;"
-                                 :controls="false" :min="1" :max="168">
+                                 :controls="false" :min="1" :max="20">
                 </el-input-number>
               </el-form-item>
               <p class="tips-p">层</p>
@@ -93,13 +86,24 @@
             <div class="item-box">
               <el-form-item label="管理员：" label-width="120px"
                             :prop="'data6.'+ index +'.itemData3'" :rules="rules.itemData3">
-                <el-select v-model="item.itemData3" placeholder="请选择实验室" style="width: 460px">
+                <el-select
+                  multiple
+                  multiple-limit="10"
+                  style="width:460px;"
+                  v-model="item.itemData3"
+                  filterable
+                  remote
+                  clearable
+                  reserve-keyword
+                  @change="userChange"
+                  placeholder="请输入姓名/工号/手机号"
+                  :remote-method="userSelectList">
                   <el-option
-                    v-for="item in subOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
+                    v-for="item in userOptions"
+                    :key="item.userId"
+                    :label="item.userName"
+                    :value="item.userId">
+                  </el-option>
                 </el-select>
               </el-form-item>
             </div>
@@ -108,7 +112,7 @@
                             :prop="'data6.'+ index +'.itemData4'" :rules="rules.itemData4">
                 <el-select v-model="item.itemData4" placeholder="请选择实验室" style="width: 460px">
                   <el-option
-                    v-for="item in subOptions"
+                    v-for="item in openOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
@@ -116,8 +120,8 @@
                 </el-select>
               </el-form-item>
             </div>
-            <div class="item-box">
-              <el-form-item label="开门方式：" label-width="120px"
+            <div class="item-box" v-if="item.itemData4 == 2">
+              <el-form-item label="智能锁：" label-width="120px"
                             :prop="'data6.'+ index +'.itemData5'" :rules="rules.itemData5">
                 <el-select v-model="item.itemData5" multiple placeholder="请选择" multiple-limit='2' style="width: 460px">
                   <el-option
@@ -146,6 +150,7 @@
   //import { getDicts } from "@/api/commonality/noPermission";
   //import { systemUserSelect } from "@/api/commonality/permission";
   //import { getInfo } from "@/api/basicsModules/index";
+  import { systemUserSelectUser } from "@/api/commonality/permission";
   export default {
     name: 'addPage',
     props:{
@@ -158,6 +163,7 @@
         subOptions:[],
         cameraOptions:[],
         harvesterOptions:[],
+        userOptions:[],
         openOptions:[
           {label:'无锁',value:'1'},
           {label:'智能锁',value:'2'},
@@ -179,6 +185,7 @@
               itemData2:'',
               itemData3:'',
               itemData4:'',
+              itemData5:'',
             }
           ],
         },
@@ -223,6 +230,10 @@
             { required: true, message: "请选择开门方式", trigger: "blur" },
             { required: true, message: "请选择开门方式", validator: this.spaceJudgment, trigger: "blur" }
           ],
+          itemData5: [
+            { required: true, message: "请选择智能锁", trigger: "blur" },
+            { required: true, message: "请选择智能锁", validator: this.spaceJudgment, trigger: "blur" }
+          ],
         }
       }
     },
@@ -257,9 +268,32 @@
           this.newData.data6.push({
             itemData1:'',
             itemData2:'',
+            itemData3:'',
+            itemData4:'',
+            itemData5:'',
           })
         }
       },
+      //人员查询
+      userChange(val){
+        let self = this;
+        console.log(val)
+        for(let i=0;i<self.optionsUser.length;i++){
+          if(self.optionsUser[i].userId == val){
+            this.$set(this,'shadeName',self.optionsUser[i].userName);
+            this.$set(this,'shadeMobile',self.optionsUser[i].mobile);
+          }
+        }
+      },
+      userSelectList(query) {
+        if (query !== '' && query.length>1) {
+          systemUserSelectUser({"userName":query,'userType':'1'}).then(response => {
+            this.$set(this,'userOptions',response.data);
+          });
+        } else {
+          this.$set(this,'userOptions',[]);
+        }
+      },
     },
   }
 </script>
@@ -299,7 +333,8 @@
           border-radius:4px;
           padding-top:20px;
           position: relative;
-          .item-name-box{
+          margin-bottom:20px;
+          .item-text-box{
             display: flex;
             ::v-deep input{
               border-top-right-radius: 0;

src/views/chemicalManage/basicManagement/chemicalsCabinetManage/index.vue

@@ -113,7 +113,7 @@
       return {
         tableButtonType:this.hasPermiDom(['demo:demo:detail','demo:demo:edit','demo:demo:del',]),
         //页面状态
-        pageType:2,
+        pageType:3,
         //页面遮罩
         loading:false,
         //学院
@@ -131,6 +131,22 @@
         //列表数据
         dataList:[
           {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
         ],
         //数据数量
         total:0,

src/views/chemicalManage/basicManagement/chemicalsCabinetManage/infoPage.vue

@@ -0,0 +1,318 @@
+<template>
+  <div class="page-container chemicalsCabinetManage-infoPage">
+    <div class="page-top-title-box">
+      <p class="page-top-title-name-p">
+        <span>{{newData.name}}</span>
+        <span>{{newData.address}}</span>
+      </p>
+      <p class="page-top-title-out-p" @click="backPage">返回</p>
+    </div>
+    <div class="content-box">
+      <div class="left-max-box">
+        <div class="title-box">
+          <p>{{newData.maxName}} - {{newData.minName}}</p>
+          <p :class="newData.lockType == 1 ? 'lockType':''">{{newData.lockType == 1?'已开启':'已关闭'}}</p>
+        </div>
+        <div class="img-max-box">
+          <img class="back-img" src="@/assets/ZDimages/chemicalManage/img_hxpg.png">
+          <div class="text-position-box">
+            <p class="max-name-p">{{newData.minName}}</p>
+            <p class="text-p">层数：{{newData.num}}</p>
+            <p class="text-p">管理员：</p>
+            <div class="min-for-name-box">
+              <p v-for="(item,index) in newData.nameList" :key="index">{{item.name}}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-max-box">
+        <div class="page-form-title-box">
+          <el-form :model="queryParams" class="form-box" ref="queryForm"
+                   :inline="true" style="width:100%;">
+            <el-form-item label="开门时间" prop="state">
+              <el-date-picker
+                :clearable="false"
+                v-model="dateRangeA"
+                size="small"
+                style="width: 215px"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              ></el-date-picker>
+            </el-form-item>
+            <el-form-item label="关门时间" prop="state">
+              <el-date-picker
+                :clearable="false"
+                v-model="dateRangeB"
+                size="small"
+                style="width: 215px"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              ></el-date-picker>
+            </el-form-item>
+            <el-form-item label="业务类型" prop="queryParamsData2">
+              <el-select v-model="queryParams.queryParamsData2" placeholder="请选择" style="width: 120px">
+                <el-option
+                  v-for="item in optionsA"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="认证方式" prop="queryParamsData2">
+              <el-select v-model="queryParams.queryParamsData2" placeholder="请选择" style="width: 120px">
+                <el-option
+                  v-for="item in optionsB"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
+            <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
+          </el-form>
+        </div>
+        <div class="page-content-box">
+          <el-table class="table-box" border :data="dataList">
+            <el-table-column label="开门时间" prop="name" show-overflow-tooltip/>
+            <el-table-column label="关门时间" prop="content" width="180" show-overflow-tooltip/>
+            <el-table-column label="开门时长" prop="content" width="120" show-overflow-tooltip/>
+            <el-table-column label="业务类型" prop="content" width="120" show-overflow-tooltip/>
+            <el-table-column label="操作人" prop="content" width="100" show-overflow-tooltip/>
+            <el-table-column label="双人认证" prop="content" width="180" show-overflow-tooltip/>
+            <el-table-column label="返回结果" prop="content" width="150" show-overflow-tooltip/>
+          </el-table>
+          <pagination :page-sizes="[20, 30, 40, 50]"
+                      v-show="total>0"
+                      :total="total"
+                      :page.sync="queryParams.page"
+                      :limit.sync="queryParams.pageSize"
+                      @pagination="getList"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  //import { getDicts } from "@/api/commonality/noPermission";
+  //import { systemUserSelect } from "@/api/commonality/permission";
+  //import { getInfo } from "@/api/basicsModules/index";
+  export default {
+    name: 'infoPage',
+    props:{
+      propsInfoData:{},
+    },
+    data(){
+      return{
+        optionsA:[],
+        optionsB:[],
+        newData:{
+          name:'我是柜锁名称',
+          address:'我是柜锁位置',
+          maxName:"我是化学品柜名称",
+          minName:'我是柜门名称',
+          lockType:1,
+          num:9999,
+          nameList:[
+            {name:'老师名称1'},
+            {name:'老师名称1'},
+            {name:'老师名称1'},
+            {name:'老师名称1'},
+            {name:'老师名称1'},
+          ]
+        },
+        //查询条件
+        queryParams:{
+          page:1,
+          pageSize:20,
+          queryParamsData1 :null,
+          queryParamsData2 :null,
+        },
+        //时间数据
+        dateRangeA:[],
+        //时间数据
+        dateRangeB:[],
+        //列表数据
+        dataList:[
+          {name:"1"},
+        ],
+        //数据数量
+        total:0,
+      }
+    },
+    created(){
+    },
+    mounted(){
+
+    },
+    methods:{
+      //查询按钮
+      handleQuery(){
+        this.$set(this.queryParams,'page',1);
+        this.getList();
+      },
+      //重置按钮
+      resetQuery(){
+        this.$set(this,'dateRangeA',[]);
+        this.$set(this,'dateRangeB',[]);
+        this.$set(this,'queryParams',{
+          page:1,
+          pageSize:20,
+          queryParamsData1 :null,
+          queryParamsData2 :null,
+        });
+        this.getList();
+      },
+      //获取数据列表
+      getList(){
+        let obj = JSON.parse(JSON.stringify(this.queryParams))
+        if(this.dateRangeA[0]){
+          obj.startTimeA = this.dateRangeA[0]+'T00:00:00'
+          obj.endTimeA = this.dateRangeA[1]+'T23:59:59'
+        }else{
+          obj.startTimeA = "";
+          obj.endTimeA = "";
+        }
+        if(this.dateRangeB[0]){
+          obj.startTimeB = this.dateRangeB[0]+'T00:00:00'
+          obj.endTimeB = this.dateRangeB[1]+'T23:59:59'
+        }else{
+          obj.startTimeB = "";
+          obj.endTimeB = "";
+        }
+        getListFunction(obj).then(response => {
+          this.$set(this,'dataList',response.data.records);
+          this.$set(this,'total',response.data.total);
+        });
+      },
+      // 返回按钮
+      backPage(){
+        this.$parent.tableButton(2);
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+
+          }
+        })
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .chemicalsCabinetManage-infoPage{
+    .page-top-title-name-p{
+      span:nth-child(1){
+        font-weight:700;
+        margin-right:20px;
+      }
+    }
+    .content-box{
+      flex:1;
+      display: flex;
+      .left-max-box{
+        width:370px;
+        margin:25px;
+        border-right:1px dashed #dedede;
+        .title-box{
+          display: flex;
+          p{
+            font-size:16px;
+            line-height:30px;
+          }
+          p:nth-child(1){
+            font-weight:700;
+            flex:1;
+            /*单行省略号*/
+            display:block;
+            overflow:hidden;
+            text-overflow:ellipsis;
+            white-space:nowrap;
+          }
+          p:nth-child(2){
+            margin-right:25px;
+            width:80px;
+            border-radius:6px;
+            text-align: center;
+            color:#fff;
+            background-color: #0183FA;
+          }
+          .lockType{
+            background-color: #14AE10!important;
+          }
+        }
+        .img-max-box{
+          margin:35px 25px 0 0;
+          position: relative;
+          img{
+            display: block;
+            width:345px;
+            height:480px;
+          }
+          .text-position-box{
+            position: absolute;
+            top:68px;
+            left:16px;
+            background-color: rgba(255,255,255,0.2);
+            border-radius:10px;
+            width:142px;
+            min-height:122px;
+            padding-bottom:10px;
+            p{
+              color:#fff;
+              /*单行省略号*/
+              display:block;
+              overflow:hidden;
+              text-overflow:ellipsis;
+              white-space:nowrap;
+            }
+            .max-name-p{
+              text-align: center;
+              font-size:16px;
+              line-height:36px;
+              border-bottom:1px solid #fff;
+              margin-bottom:10px;
+            }
+            .text-p{
+              padding:0 20px;
+              font-size:14px;
+              line-height:24px;
+            }
+            .min-for-name-box{
+              p{
+                text-align: center;
+                font-size:14px;
+                line-height:24px;
+              }
+            }
+          }
+        }
+      }
+      .right-max-box{
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        .page-form-title-box{
+          border:none;
+          padding:20px 0 0 10px;
+        }
+        .page-content-box{
+          padding-top:0;
+          padding-left:0;
+        }
+      }
+    }
+  }
+</style>

src/views/chemicalManage/basicManagement/chemicalsCabinetManage/listPage.vue

@@ -1,20 +1,105 @@
+<!--开门记录柜锁列表-->
 <template>
   <div class="page-container chemicalsCabinetManage-listPage">
     <div class="page-top-title-box">
-      <p class="page-top-title-name-p">{{showType?'详情':(newData.id?'编辑':'新增')}}</p>
+      <p class="page-top-title-name-p">{{newData.name}} 丨 {{newData.address}}</p>
+      <p class="page-top-title-num-p">化学品总数：{{newData.maxNum}}</p>
       <p class="page-top-title-out-p" @click="backPage">返回</p>
     </div>
-    <div class="content-box scrollbar-box">
-      <el-form class="add-form-box" :model="newData" ref="form" :rules="showType?noRules:rules" label-width="120px">
-        <el-form-item label="名称：" prop="name">
-          <el-input :disabled="showType" v-model="newData.name" placeholder="请输入名称" maxLength="20" style="width:500px;"></el-input>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="page-bottom-button-box" v-if="!showType">
-      <p class="page-bottom-button-null-p"></p>
-      <p class="page-bottom-button-submit-p" @click="submitForm">提交</p>
-      <p class="page-bottom-button-null-p"></p>
+    <div class="content-box">
+      <div class="table-max-box">
+        <p @click="tableButton(item.value)"
+          :class="item.value == tableCheck?'tableCheck':''"
+           v-for="(item,index) in tableList" :key="index">
+          {{item.name}}
+        </p>
+      </div>
+      <div class="page-form-title-box">
+        <el-form :model="queryParams" class="form-box" ref="queryForm"
+                 :inline="true" style="width:100%;">
+          <el-form-item label="关键字" prop="queryParamsData1">
+            <el-input
+              maxLength="30"
+              v-model="queryParams.queryParamsData1"
+              placeholder="化学品名/CAS/编码/归属人"
+              clearable
+              style="width: 220px"
+            />
+          </el-form-item>
+
+          <el-form-item label="状态" prop="queryParamsData2">
+            <el-select v-model="queryParams.queryParamsData2"
+                       placeholder="请选择" style="width: 140px">
+              <el-option
+                v-for="item in statusOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="类别" prop="queryParamsData3">
+            <el-select v-model="queryParams.queryParamsData2"
+                       placeholder="请选择" style="width: 140px">
+              <el-option
+                v-for="item in categoryOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="级别" prop="queryParamsData3">
+            <el-select v-model="queryParams.queryParamsData2"
+                       placeholder="请选择" style="width: 140px">
+              <el-option
+                v-for="item in levelOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="过期时间" prop="state">
+            <el-date-picker
+              :clearable="false"
+              v-model="dateRange"
+              size="small"
+              style="width: 215px"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
+          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
+        </el-form>
+      </div>
+      <p class="num-min-box"></p>
+      <div class="page-content-box">
+        <el-table class="table-box" border :data="dataList">
+          <el-table-column label="名称" prop="name" show-overflow-tooltip/>
+          <el-table-column label="编码" prop="content" width="150" show-overflow-tooltip/>
+          <el-table-column label="类别" prop="content" width="130" show-overflow-tooltip/>
+          <el-table-column label="级别" prop="content" width="130" show-overflow-tooltip/>
+          <el-table-column label="纯度" prop="content" width="130" show-overflow-tooltip/>
+          <el-table-column label="规格" prop="content" width="130" show-overflow-tooltip/>
+          <el-table-column label="余量" prop="content" width="100" show-overflow-tooltip/>
+          <el-table-column label="过期时间" prop="content" width="180" show-overflow-tooltip/>
+          <el-table-column label="柜层" prop="content" width="80" show-overflow-tooltip/>
+          <el-table-column label="归属人" prop="content" width="150" show-overflow-tooltip/>
+          <el-table-column label="状态" prop="content" width="120" show-overflow-tooltip/>
+        </el-table>
+        <pagination :page-sizes="[20, 30, 40, 50]"
+                    v-show="total>0"
+                    :total="total"
+                    :page.sync="queryParams.page"
+                    :limit.sync="queryParams.pageSize"
+                    @pagination="getList"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -31,35 +116,106 @@
     data(){
       return{
         showType:false,
-        newData:{},
+        //状态
+        statusOptions:[],
+        //类别
+        categoryOptions:[],
+        //级别
+        levelOptions:[],
+        dateRange:[],
+        //查询条件
+        queryParams:{
+          page:1,
+          pageSize:20,
+          queryParamsData1:"",
+          queryParamsData2 :null,
+          queryParamsData3 :null,
+        },
+        //列表数据
+        dataList:[
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+          {name:"1"},
+        ],
+        //数据数量
+        total:10,
+        tableCheck:'1',
+        tableList:[
+          {name:'右边1号门',value:'1'},
+          {name:'右边2号门',value:'2'},
+          {name:'右边3号门',value:'3'},
+        ],
+        newData:{
+          name:"化学品柜名称",
+          address:"所在位置地点",
+          maxNum:9999,
+        },
       }
     },
     created(){
-      this.initialize();
+
     },
     mounted(){
 
     },
     methods:{
-      //初始化
-      initialize(){
-        this.$set(this,'showType',this.propsData.showType);
-        if(this.propsData.id){
-          let obj = {
-            id:this.propsData.id,
-            name:this.propsData.name,
-          };
-          this.$set(this,'newData',obj);
-        }else{
-          this.$set(this,'newData',{
-            name:"",
-          });
-        }
-      },
+
       // 返回按钮
       backPage(){
         this.$parent.tableButton(5);
       },
+      //选项切换
+      tableButton(type){
+        if(type != this.tableCheck){
+          this.$set(this,'tableCheck',type);
+          this.getList();
+        }
+      },
+      //查询按钮
+      handleQuery(){
+        this.$set(this.queryParams,'page',1);
+        this.getList();
+      },
+      //重置按钮
+      resetQuery(){
+        this.$set(this,'dateRange',[]);
+        this.$set(this,'queryParams',{
+          page:1,
+          pageSize:20,
+          queryParamsData1:"",
+          queryParamsData2 :null,
+          queryParamsData3 :null,
+        });
+        this.getList();
+      },
+      getList(){
+        let obj = JSON.parse(JSON.stringify(this.queryParams))
+        if(this.dateRange[0]){
+          obj.startTime = this.dateRange[0]+'T00:00:00'
+          obj.endTime = this.dateRange[1]+'T23:59:59'
+        }else{
+          obj.startTime = "";
+          obj.endTime = "";
+        }
+        getListFunction(obj).then(response => {
+          this.$set(this,'dataList',response.data.records);
+          this.$set(this,'total',response.data.total);
+        });
+      },
       /** 提交按钮 */
       submitForm() {
         this.$refs["form"].validate(valid => {
@@ -74,10 +230,51 @@
 
 <style scoped lang="scss">
   .chemicalsCabinetManage-listPage{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .page-top-title-num-p{
+      line-height:40px;
+      margin-right:40px;
+    }
     .content-box{
       flex:1;
       display: flex;
+      flex-direction: column;
       padding:20px;
+      overflow: hidden;
+      .table-max-box{
+        p{
+          cursor: pointer;
+          display: inline-block;
+          text-align: center;
+          padding:0 20px;
+          color:#333;
+          border:1px solid #E0E0E0;
+          border-radius:4px;
+          line-height:40px;
+          margin-right:10px;
+        }
+        .tableCheck{
+          color:#fff;
+          background-color: #0183FA;
+          border:1px solid #0183FA;
+        }
+      }
+      .page-form-title-box{
+        border:none;
+      }
+      .num-min-box{
+        background-color:rgba(1,131,250,0.2);
+        color:#0183FA;
+        font-size:14px;
+        line-height:40px;
+        padding:0 20px;
+      }
+      .page-content-box{
+        padding:0;
+      }
     }
   }
 </style>

src/views/chemicalManage/basicManagement/chemicalsCabinetManage/recordsPage.vue

@@ -1,21 +1,32 @@
 <template>
   <div class="page-container chemicalsCabinetManage-recordsPage">
-    <div class="page-top-title-box">
-      <p class="page-top-title-name-p">{{showType?'详情':(newData.id?'编辑':'新增')}}</p>
-      <p class="page-top-title-out-p" @click="backPage">返回</p>
-    </div>
-    <div class="content-box scrollbar-box">
-      <el-form class="add-form-box" :model="newData" ref="form" :rules="showType?noRules:rules" label-width="120px">
-        <el-form-item label="名称：" prop="name">
-          <el-input :disabled="showType" v-model="newData.name" placeholder="请输入名称" maxLength="20" style="width:500px;"></el-input>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="page-bottom-button-box" v-if="!showType">
-      <p class="page-bottom-button-null-p"></p>
-      <p class="page-bottom-button-submit-p" @click="submitForm">提交</p>
-      <p class="page-bottom-button-null-p"></p>
+    <div class="chemicalsCabinetManage-recordsPage-min" v-if="pageType == 1">
+      <div class="page-top-title-box">
+        <p class="page-top-title-name-p">{{newData.name}}</p>
+        <p class="page-top-title-out-p" @click="backPage">返回</p>
+      </div>
+      <div class="page-content-box">
+        <el-table class="table-box" border :data="dataList">
+          <el-table-column label="柜锁名称" prop="name" fixed show-overflow-tooltip/>
+          <el-table-column label="柜锁ID" prop="content" width="200" show-overflow-tooltip/>
+          <el-table-column label="摄像头IP" prop="content" width="200" show-overflow-tooltip/>
+          <el-table-column label="设备状态" prop="content" width="200" show-overflow-tooltip/>
+          <el-table-column label="操作" width="200" show-overflow-tooltip v-if="tableButtonType">
+            <template slot-scope="scope">
+              <div class="table-button-box">
+                <p class="table-button-null"></p>
+                <p class="table-button-p"
+                   @click="tableButton(1,scope.row)"
+                   v-hasPermiRouter="['demo:demo:detail']"
+                >操作记录</p>
+                <p class="table-button-null"></p>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
+    <info-page :propsInfoData="propsInfoData" v-if="pageType == 2"></info-page>
   </div>
 </template>
 
@@ -23,50 +34,60 @@
   //import { getDicts } from "@/api/commonality/noPermission";
   //import { systemUserSelect } from "@/api/commonality/permission";
   //import { getInfo } from "@/api/basicsModules/index";
+  import infoPage from "./infoPage.vue";
   export default {
     name: 'recordsPage',
+    components: {
+      infoPage,
+    },
     props:{
       propsData:{},
     },
     data(){
       return{
-        showType:false,
-        newData:{},
+        pageType:1,
+        tableButtonType:this.hasPermiDom(['demo:demo:detail','demo:demo:edit','demo:demo:del',]),
+        newData:{
+          name:"我是化学品柜名称",
+        },
+        queryParams:{
+          page:1,
+          pageSize:20,
+        },
+        dataList:[{}],
+        //子组件数据
+        propsInfoData:{},
       }
     },
     created(){
-      this.initialize();
+
     },
     mounted(){
 
     },
     methods:{
-      //初始化
-      initialize(){
-        this.$set(this,'showType',this.propsData.showType);
-        if(this.propsData.id){
-          let obj = {
-            id:this.propsData.id,
-            name:this.propsData.name,
-          };
-          this.$set(this,'newData',obj);
-        }else{
-          this.$set(this,'newData',{
-            name:"",
-          });
-        }
-      },
       // 返回按钮
       backPage(){
         this.$parent.tableButton(5);
       },
-      /** 提交按钮 */
-      submitForm() {
-        this.$refs["form"].validate(valid => {
-          if (valid) {
-
-          }
-        })
+      //获取列表记录
+      getList(){
+        // this.$set(this,'loading',true);
+        // getListFunction(this.queryParams).then(response => {
+        //   this.$set(this,'loading',false);
+        //   this.$set(this,'dataList',response.data.records);
+        //   this.$set(this,'total',response.data.total);
+        // });
+      },
+      /* 切换按钮 */
+      tableButton(type,row) {
+        if(type == 1){
+          this.$set(this,'pageType',2);
+          this.$set(this,'propsInfoData',row);
+        }else if(type == 2){
+          this.$set(this,'pageType',1);
+          this.getList();
+        }
       }
     },
   }
@@ -74,10 +95,10 @@
 
 <style scoped lang="scss">
   .chemicalsCabinetManage-recordsPage{
-    .content-box{
+    .chemicalsCabinetManage-recordsPage-min{
       flex:1;
       display: flex;
-      padding:20px;
+      flex-direction: column;
     }
   }
 </style>

src/views/chemicalManage/components/addChemicals.vue

@@ -43,7 +43,7 @@
           <el-form-item label="级别：" prop="data3" label-width="90px">
             <el-select v-model="dialogForm.data3" placeholder="请选择级别" style="width: 245px">
               <el-option
-                v-for="dict in rankOptions"
+                v-for="dict in levelOptions"
                 :key="dict.itemId"
                 :label="dict.label"
                 :value="dict.itemId"
@@ -104,7 +104,7 @@
         //化学品类别
         categoryOptions:[],
         //级别
-        rankOptions:[{itemId:'1',label:'管控'},{itemId:'2',label:'非管控'}],
+        levelOptions:[{itemId:'1',label:'管控'},{itemId:'2',label:'非管控'}],
         //物质状态
         stateOfMatter:[{itemId:'1',label:'kg'},{itemId:'2',label:'L'}],
         dialogForm:{

src/views/chemicalManage/useLedger/index.vue

@@ -2,113 +2,133 @@
 <template>
   <div class="app-container useLedger">
     <div class="page-container useLedger-page" v-if="pageType == 1">
-      <div class="page-form-title-box">
+      <div class="page-form-title-box" :class="searchType ? 'searchType':''">
         <el-form :model="queryParams" class="form-box" ref="queryForm"
-                 :inline="true" style="width:100%;" label-width="90px">
-          <el-form-item label="">
-            <el-select style="width:140px;" v-model="queryParams.deptId" placeholder="请选择学院" clearable label-width="80px">
-              <el-option
-                v-for="dict in deptList"
-                :key="dict.deptId"
-                :label="dict.deptName"
-                :value="dict.deptId"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="">
-            <el-select style="width:140px;" v-model="queryParams.deptId" placeholder="请选择楼栋楼层" clearable label-width="80px">
-              <el-option
-                v-for="dict in deptList"
-                :key="dict.deptId"
-                :label="dict.deptName"
-                :value="dict.deptId"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="">
-            <el-select v-model="queryParams.state " clearable placeholder="级别" style="width: 140px">
-              <el-option
-                v-for="dict in options"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
+                 :inline="true" style="width:100%;">
+          <div>
+            <el-form-item label="关键字">
+              <el-input
+                maxLength="30"
+                v-model="queryParams.searchValue"
+                placeholder="化学品名/CAS/编码/实验室/房间号/姓名/联系方式"
+                style="width: 350px"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="">
-            <el-select v-model="queryParams.state " clearable placeholder="选择类别" style="width: 140px">
-              <el-option
-                v-for="dict in options"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="">
-            <el-select v-model="queryParams.state " clearable placeholder="选择化学品柜" style="width: 140px">
-              <el-option
-                v-for="dict in options"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="">
-            <el-date-picker
-              v-model="queryParams.time"
-              size="small"
-              style="width: 140px"
-              value-format="yyyy-MM-dd"
-              type="date"
-              placeholder="选择领用时间"
-            ></el-date-picker>
-          </el-form-item>
-          <el-form-item label="">
-            <el-date-picker
-              v-model="queryParams.time"
-              size="small"
-              style="width: 140px"
-              value-format="yyyy-MM-dd"
-              type="date"
-              placeholder="选择归还时间"
-            ></el-date-picker>
-          </el-form-item>
-
-          <el-form-item label="">
-            <el-input
-              maxLength="30"
-              v-model="queryParams.searchValue"
-              placeholder="化学品名/CAS/编码/实验室/房间号/姓名/联系方式"
-              clearable
-              style="width: 200px"
-            />
-          </el-form-item>
-          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
-          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
-          <el-form-item style="float: right;">
-            <export-component :exportConfig="exportConfig" v-hasPermiRouter="['demo:demo:demo']"></export-component>
-          </el-form-item>
+            </el-form-item>
+            <el-form-item label="学院">
+              <el-select style="width:180px;" v-model="queryParams.deptId" placeholder="请选择学院">
+                <el-option
+                  v-for="dict in deptList"
+                  :key="dict.deptId"
+                  :label="dict.deptName"
+                  :value="dict.deptId"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="楼栋楼层">
+              <el-cascader
+                style="width: 180px"
+                :props="{value: 'id', label: 'name',children:'buildFloorVoList'}"
+                v-model="queryParams.queryParamsData3"
+                :options="buildFloorOptions">
+              </el-cascader>
+            </el-form-item>
+            <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
+            <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
+            <p class="page-add-common-style-button"
+               style="float: right;"
+               @click="searchToggle"
+               v-hasPermiRouter="['demo:demo:add']"
+            >{{searchType?'简单搜索':'高级搜索'}}</p>
+            <el-form-item style="float: right;">
+              <export-component :exportConfig="exportConfig" v-hasPermiRouter="['demo:demo:demo']"></export-component>
+            </el-form-item>
+          </div>
+          <div v-if="searchType">
+            <el-form-item label="级别">
+              <el-select v-model="queryParams.state "  placeholder="级别" style="width: 180px">
+                <el-option
+                  v-for="dict in levelOptions"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="类别">
+              <el-select v-model="queryParams.state "  placeholder="选择类别" style="width: 180px">
+                <el-option
+                  v-for="dict in categoryOptions"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="化学品柜">
+              <el-select v-model="queryParams.state "  placeholder="选择化学品柜" style="width: 180px">
+                <el-option
+                  v-for="dict in options"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="领用时间">
+              <el-date-picker
+                :clearable="false"
+                v-model="dateRangeA"
+                size="small"
+                style="width: 220px"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              ></el-date-picker>
+            </el-form-item>
+            <el-form-item label="归还时间">
+              <el-date-picker
+                :clearable="false"
+                v-model="dateRangeB"
+                size="small"
+                style="width: 220px"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              ></el-date-picker>
+            </el-form-item>
+          </div>
         </el-form>
       </div>
       <div class="page-content-box">
-        <el-table class="table-box" v-loading="loading" border :data="dataList" @selection-change="handleSelectionChange" ref="multipleTable">
-          <el-table-column type="selection" width="50" align="center"/>
-          <el-table-column label="化学品名称" align="left" prop="name" />
-          <el-table-column label="编码" align="left" prop="name" />
-          <el-table-column label="CAS" align="left" prop="name" />
-          <el-table-column label="类别" align="left" prop="name" />
-          <el-table-column label="级别" align="left" prop="name" />
-          <el-table-column label="实验室" align="left" prop="name" />
-          <el-table-column label="安全员" align="left" prop="name" />
-          <el-table-column label="位置" align="left" prop="name" />
-          <el-table-column label="领用人" align="left" prop="name" />
-          <el-table-column label="领用时间" align="left" prop="name" />
-          <el-table-column label="领用量" align="left" prop="name" />
-          <el-table-column label="归还时间" align="left" prop="name" />
-          <el-table-column label="操作人" align="left" prop="name" />
-          <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
+        <el-table class="table-box" v-loading="loading" border :data="dataList"
+                  @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
+          <el-table-column type="selection" width="50" fixed :reserve-selection="true" align="center"/>
+          <el-table-column label="化学品名称" align="left" fixed width="250" prop="name" />
+          <el-table-column label="编码" align="left" width="150" prop="name" />
+          <el-table-column label="CAS" align="left" width="150" prop="name" />
+          <el-table-column label="类别" align="left" width="160" prop="name" />
+          <el-table-column label="级别" align="left" width="100" prop="name" />
+          <el-table-column label="实验室" align="left" width="200" prop="name" />
+          <el-table-column label="安全员" align="left" width="150" prop="name" />
+          <el-table-column label="位置" align="left" width="230" prop="name" />
+          <el-table-column label="领用人" align="left" width="100" prop="name" />
+          <el-table-column label="领用时间" align="left" width="200" prop="createTime">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="领用量" align="left" width="100" prop="name" />
+          <el-table-column label="归还时间" align="left" width="200" prop="name">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作人" align="left" width="100" prop="name" />
+          <el-table-column label="操作" align="left" width="100" class-name="small-padding fixed-width">
             <template slot-scope="scope">
               <div class="table-button-box">
                 <p class="table-button-null"></p>
@@ -137,7 +157,7 @@
   import exportComponent from "@/components/exportComponent/exportComponent.vue";
   import { iotTypeList,iotTypeDetail,iotTypeAdd,iotTypeUpdate,iotTypeDelete } from "@/api/iotDevice/index";
   import infoPage from "./infoPage.vue"
-  import {listDepartments} from "@/api/commonality/noPermission";
+  import { getDeptDropList,systemBuildingGetTreeList,} from "@/api/commonality/permission";
   export default {
     name: 'index',
     components: {
@@ -148,8 +168,19 @@
     data(){
       return{
         loading:false,
-        pageType:1,
-        options:[{label:'启用',value:true},{label:'停用',value:false}],
+        pageType:2,
+        //学院
+        deptList:[],
+        //楼栋楼层
+        buildFloorOptions:[],
+        //级别
+        levelOptions:[],
+        //类别
+        categoryOptions:[],
+        options:[],
+        dateRangeA:[],
+        dateRangeB:[],
+        //查询条件
         queryParams:{
           page:1,
           pageSize:20,
@@ -159,24 +190,31 @@
         },
         dataList:[{}],
         total:0,
-        deptList:[],
         //组件传参
         propsData:{},
+        //导出配置
         exportConfig:{
           api:'system/user/student/export',             //导出接口地址
           ids:'',                                       //勾选导出,勾选的IDS
           fileName:'导出文件名',                         //导出文件的命名
         },
+        //搜索状态开关
+        searchType:false,
       }
     },
     created(){
 
     },
     mounted(){
+      this.getDeptDropList();
+      this.systemBuildingGetTreeList();
       //this.getList();
-      //this.listDepartments();
     },
     methods:{
+      //搜索切换状态
+      searchToggle(){
+        this.$set(this,'searchType',!this.searchType);
+      },
       /** 搜索按钮操作 */
       handleQuery() {
         this.queryParams.pageNum = 1;
@@ -225,12 +263,6 @@
         this.single = selection.length != 1;
         this.multiple = !selection.length;
       },
-      //获取学院
-      listDepartments(){
-        listDepartments().then(response => {
-          this.deptList = response.data;
-        });
-      },
       //获取数据列表
       getList(){
         this.$set(this,'loading',true);
@@ -250,6 +282,55 @@
           this.$set(this,'pageType',1);
         }
       },
+      //查询学院列表
+      getDeptDropList(){
+        getDeptDropList({deptName:"",level:2,deptType:1}).then(response => {
+          this.$set(this, 'deptOptions', response.data)
+        });
+      },
+      //查询楼栋楼层
+      systemBuildingGetTreeList(){
+        systemBuildingGetTreeList({}).then(response => {
+          if (response.data[0]) {
+            let list = this.forBuildFloor(response.data);
+            let newList = [];
+            for(let i=0;i<list.length;i++){
+              if(list[i].buildFloorVoList){
+                for(let o=0;o<list[i].buildFloorVoList.length;o++){
+                  if(list[i].buildFloorVoList[o].buildFloorVoList){
+                    newList.push(list[i].buildFloorVoList[o])
+                  }
+                }
+              }
+            }
+            console.log('newList========>',newList);
+            this.$set(this, 'buildFloorOptions', newList)
+          }
+        })
+      },
+      //处理楼栋楼层数据
+      forBuildFloor(list){
+        let self = this;
+        for(let i=0;i<list.length;i++){
+          if(list[i].buildFloorVoList){
+            if(list[i].buildFloorVoList[0]){
+              list[i].buildFloorVoList = self.forBuildFloor(list[i].buildFloorVoList);
+            }else{
+              delete list[i].buildFloorVoList;
+            }
+          }else{
+            delete list[i].buildFloorVoList;
+          }
+        }
+        return list
+      },
+      /*===记录勾选数据===
+        需要再el-table 添加  :row-key="getRowKeys"
+        需要在selection 添加 :reserve-selection="true"
+      */
+      getRowKeys(row) {
+        return row.id
+      },
     },
   }
 </script>
@@ -258,7 +339,9 @@
 
 .useLedger{
   .useLedger-page{
-
+    .searchType{
+      height:140px;
+    }
   }
 }
 </style>

src/views/chemicalManage/useLedger/infoPage.vue

@@ -4,31 +4,31 @@
       <p class="page-top-title-name-p">详情</p>
       <p class="page-top-title-out-p" @click="backPage">返回</p>
     </div>
-    <div class="content-box scrollbar-box">
-        <div class="content-box-left">
-            <li class="chemical-name">化学品名称<p class="chemical-state">已出库</p></li>
-            <li>形态/纯度/CAS12-34-56</li>
-            <li>类别：易制毒<p class="control-state">管控</p></li>
-            <li>编码：123456789</li>
-            <li>RFID标签：123456789</li>
-            <li>规格：500ml/瓶</li>
-            <li>实时库存：500ml</li>
-            <li>过期时间：2023-10-29 | 30天前提醒</li>
-            <li>领用时效：1小时</li>
-            <li>实验室：实验室名称（房间号）</li>
-            <li>安全员：曹秀康-13227872222</li>
-            <li>位置：化学品柜-柜门-层</li>
-            <li>归属人：李砖头</li>
+    <div class="content-box">
+        <div class="content-box-left scrollbar-box">
+            <li class="chemical-name">{{newData.data1}}<p class="chemical-state">{{newData.data2}}</p></li>
+            <li>{{newData.data3}}</li>
+            <li>类别：{{newData.data4}}<p class="control-state">{{newData.data5}}</p></li>
+            <li>编码：{{newData.data6}}</li>
+            <li>RFID标签：{{newData.data7}}</li>
+            <li>规格：{{newData.data8}}</li>
+            <li>实时库存：{{newData.data9}}</li>
+            <li>过期时间：{{newData.data10}} | {{newData.data11}}天前提醒</li>
+            <li>领用时效：{{newData.data12}}小时</li>
+            <li>实验室：{{newData.data13}}</li>
+            <li>安全员：{{newData.data14}}</li>
+            <li>位置：{{newData.data15}}</li>
+            <li>归属人：{{newData.data16}}</li>
         </div>
         <div class="lines"></div>
-        <div class="content-box-right">
-            <div class="record">
+        <div class="content-box-right scrollbar-box">
+            <div class="record" v-for="(item,index) in newData.dataList">
               <div class="record-li">
                   <div class="record-li-t">
-                      <div class="record-li-t-l">空瓶出库</div>
+                      <div class="record-li-t-l">{{item.itemData1}}</div>
                       <div class="record-li-t-r">
-                        <p>操作视频</p>
-                        <p>开门视频</p>
+                        <p v-if="item.itemData2" @click="lookVideo(item.videoA)">操作视频</p>
+                        <p v-if="item.itemData3" @click="lookVideo(item.videoB)">开门视频</p>
                       </div>
                   </div>
                   <div class="record-li-m">
@@ -41,21 +41,21 @@
                     <p>操作人</p>
                   </div>
                   <div class="record-li-b">
-                      <p>2023/09/15  16:39</p>
-                      <p>400ml</p>
-                      <p>400ml</p>
-                      <p>是</p>
-                      <p>手工录入</p>
-                      <p>张漂亮、李砖头</p>
-                      <p>李砖头</p>
+                      <p>{{item.itemData4}}</p>
+                      <p>{{item.itemData5}}</p>
+                      <p>{{item.itemData6}}</p>
+                      <p>{{item.itemData7}}</p>
+                      <p>{{item.itemData8}}</p>
+                      <p>{{item.itemData9}}</p>
+                      <p>{{item.itemData10}}</p>
                     </div>
               </div>
               <div class="record-li">
                 <div class="record-li-t">
-                  <div class="record-li-t-l">空瓶出库</div>
+                  <div class="record-li-t-l">{{item.itemData11}}</div>
                   <div class="record-li-t-r">
-                    <p>操作视频</p>
-                    <p>开门视频</p>
+                    <p v-if="item.itemData12" @click="lookVideo(item.videoC)">操作视频</p>
+                    <p v-if="item.itemData12" @click="lookVideo(item.videoD)">开门视频</p>
                   </div>
                 </div>
                 <div class="record-li-m">
@@ -68,31 +68,142 @@
                   <p>操作人</p>
                 </div>
                 <div class="record-li-b">
-                  <p>2023/09/15  16:39</p>
-                  <p>400ml</p>
-                  <p>400ml</p>
-                  <p>是</p>
-                  <p>手工录入</p>
-                  <p>张漂亮、李砖头</p>
-                  <p>李砖头</p>
+                  <p>{{item.itemData14}}</p>
+                  <p>{{item.itemData15}}</p>
+                  <p>{{item.itemData16}}</p>
+                  <p>{{item.itemData17}}</p>
+                  <p>{{item.itemData18}}</p>
+                  <p>{{item.itemData19}}</p>
+                  <p>{{item.itemData20}}</p>
                 </div>
               </div>
             </div>
         </div>
     </div>
+
+    <full-screen-mpegts-video ref="fullScreenMpegtsVideo" :videoProps="videoProps"></full-screen-mpegts-video>
   </div>
 </template>
 
 <script>
-  import {} from "@/api/chemicalManage/index";
+  import fullScreenMpegtsVideo from '@/components/fullScreenMpegtsVideo/fullScreenMpegtsVideo.vue'
   export default {
     name: 'infoPage',
+    components: {
+      fullScreenMpegtsVideo,
+    },
     props:{
       propsData:{},
     },
     data(){
       return{
-        showType:false,
+        //视频配置
+        videoProps:{
+          id:50,        //(ID:非必传-默认随机生成)
+          type:'mp4',   //(视频类型:非必传-默认'flv')
+          isLive:true,  //(是否直播流:非必传-默认true)
+          url:""        //(视频地址:必传)
+        },
+        videoType:false,
+        //数据
+        newData:{
+          data1:'化学品名称',
+          data2:'已出库',
+          data3:'形态/纯度/CAS12-34-56',
+          data4:'易制毒',
+          data5:'管控',
+          data6:'123456789',
+          data7:'123456789',
+          data8:'500ml/瓶',
+          data9:'500ml',
+          data10:'2023-10-29',
+          data11:'30',
+          data12:'1',
+          data13:'实验室名称（房间号）',
+          data14:'曹秀康-13227872222',
+          data15:'化学品柜-柜门-层',
+          data16:'李砖头',
+          dataList:[
+            {
+              itemData1:'空瓶出库',
+              itemData2:false,
+              itemData3:false,
+              itemData4:'2023/09/15 16:39',
+              itemData5:'400ml',
+              itemData6:'400ml',
+              itemData7:'是',
+              itemData8:'手工录入',
+              itemData9:'张漂亮、李砖头',
+              itemData10:'李砖头',
+              itemData11:'空瓶出库',
+              itemData12:true,
+              itemData13:true,
+              itemData14:'2023/09/15 16:39',
+              itemData15:'400ml',
+              itemData16:'400ml',
+              itemData17:'是',
+              itemData18:'手工录入',
+              itemData19:'张漂亮、李砖头',
+              itemData20:'李砖头',
+              videoA:'http://192.168.1.43/labSystem/admin/statics/bigFile/2023051914/2dc29572-bac3-444c-bde9-b5b75988cc6b.mp4',
+              videoB:'http://192.168.1.43/labSystem/admin/statics/bigFile/2023051914/2dc29572-bac3-444c-bde9-b5b75988cc6b.mp4',
+              videoC:'http://192.168.1.43/labSystem/admin/statics/bigFile/2023051914/2dc29572-bac3-444c-bde9-b5b75988cc6b.mp4',
+              videoD:'http://192.168.1.43/labSystem/admin/statics/bigFile/2023051914/2dc29572-bac3-444c-bde9-b5b75988cc6b.mp4',
+            },
+            {
+              itemData1:'空瓶出库',
+              itemData2:false,
+              itemData3:false,
+              itemData4:'2023/09/15 16:39',
+              itemData5:'400ml',
+              itemData6:'400ml',
+              itemData7:'是',
+              itemData8:'手工录入',
+              itemData9:'张漂亮、李砖头',
+              itemData10:'李砖头',
+              itemData11:'空瓶出库',
+              itemData12:true,
+              itemData13:true,
+              itemData14:'2023/09/15 16:39',
+              itemData15:'400ml',
+              itemData16:'400ml',
+              itemData17:'是',
+              itemData18:'手工录入',
+              itemData19:'张漂亮、李砖头',
+              itemData20:'李砖头',
+              videoA:'http://192.168.1.43/labSystem/admin/statics/bigFile/2023051914/2dc29572-bac3-444c-bde9-b5b75988cc6b.mp4',
+              videoB:'http://192.168.1.43/labSystem/admin/statics/bigFile/2023051914/2dc29572-bac3-444c-bde9-b5b75988cc6b.mp4',
+              videoC:'http://192.168.1.43/labSystem/admin/statics/bigFile/2023051914/2dc29572-bac3-444c-bde9-b5b75988cc6b.mp4',
+              videoD:'http://192.168.1.43/labSystem/admin/statics/bigFile/2023051914/2dc29572-bac3-444c-bde9-b5b75988cc6b.mp4',
+            },
+            {
+              itemData1:'空瓶出库',
+              itemData2:false,
+              itemData3:false,
+              itemData4:'2023/09/15 16:39',
+              itemData5:'400ml',
+              itemData6:'400ml',
+              itemData7:'是',
+              itemData8:'手工录入',
+              itemData9:'张漂亮、李砖头',
+              itemData10:'李砖头',
+              itemData11:'空瓶出库',
+              itemData12:true,
+              itemData13:true,
+              itemData14:'2023/09/15 16:39',
+              itemData15:'400ml',
+              itemData16:'400ml',
+              itemData17:'是',
+              itemData18:'手工录入',
+              itemData19:'张漂亮、李砖头',
+              itemData20:'李砖头',
+              videoA:'http://192.168.1.43/labSystem/admin/statics/bigFile/2023051914/2dc29572-bac3-444c-bde9-b5b75988cc6b.mp4',
+              videoB:'http://192.168.1.43/labSystem/admin/statics/bigFile/2023051914/2dc29572-bac3-444c-bde9-b5b75988cc6b.mp4',
+              videoC:'http://192.168.1.43/labSystem/admin/statics/bigFile/2023051914/2dc29572-bac3-444c-bde9-b5b75988cc6b.mp4',
+              videoD:'http://192.168.1.43/labSystem/admin/statics/bigFile/2023051914/2dc29572-bac3-444c-bde9-b5b75988cc6b.mp4',
+            },
+          ],
+        },
       }
     },
     created(){
@@ -106,6 +217,12 @@
       backPage(){
         this.$parent.tableButton('out','');
       },
+      //浏览视频
+      lookVideo(url){
+        console.log('url======>',url);
+        this.$set(this.videoProps,'url',url);
+        this.$refs.fullScreenMpegtsVideo.openVideo()
+      },
     }
   }
 </script>
@@ -116,9 +233,10 @@
       flex:1;
       display: flex;
       padding:20px;
+      overflow: hidden;
       .content-box-left{
         width: 412px;
-        padding: 0 28px 0 60px;
+        padding: 10px 28px 0 60px;
         box-sizing: border-box;
         >li{
           list-style-type: none;
@@ -126,7 +244,7 @@
           font-family: Microsoft YaHei, Microsoft YaHei;
           font-weight: 400;
           color: #333333;
-          margin-bottom: 30px;
+          margin-bottom: 20px;
           display: flex;
         }
         .chemical-name{
@@ -157,7 +275,7 @@
           font-family: Microsoft YaHei, Microsoft YaHei;
           font-weight: 400;
           color: #FC7F1A;
-          line-height: 24px;
+          line-height: 22px;
           text-align: center;
           margin-left:10px;
           float: right;
@@ -170,13 +288,21 @@
         border: 1px dashed #D8D8D8;
       }
       .content-box-right{
+        flex:1;
         margin-left:56px ;
+        padding-top:10px;
+        .record:nth-child(1){
+          padding-top:0;
+          border-top:none;
+        }
         .record{
           width: 1028px;
           height:auto;
           opacity: 1;
-          border-bottom: 1px dashed #D8D8D8;
-          padding-bottom: 20px;
+          border-top: 1px dashed #D8D8D8;
+          margin:0 0 10px;
+          overflow: hidden;
+          padding-top:30px;
           .record-li{
             margin-bottom: 20px;
             .record-li-t{
@@ -206,7 +332,7 @@
                   font-family: Microsoft YaHei, Microsoft YaHei;
                   font-weight: 400;
                   color: #0183FA;
-                  line-height: 30px;
+                  line-height: 28px;
                   text-align: center;
                   margin-left:10px;
                   cursor: pointer;
@@ -218,12 +344,12 @@
               justify-content: flex-start;
               border: 1px solid #E0E0E0;
               >p{
+                font-weight:700;
                 flex: 1;
                 height: 40px;
                 background: #F5F5F5;
                 font-size: 16px;
                 font-family: Microsoft YaHei, Microsoft YaHei;
-                font-weight: 400;
                 color: #333333;
                 line-height: 40px;
                 text-align: center;