|
@@ -4,7 +4,7 @@
|
|
<div :class="versionField() == 'xiBeiNongLinDaXue'?'top-max-box-flex':''" class="top-max-box" style="position: relative">
|
|
<div :class="versionField() == 'xiBeiNongLinDaXue'?'top-max-box-flex':''" class="top-max-box" style="position: relative">
|
|
<div class="all-title-box">
|
|
<div class="all-title-box">
|
|
<p></p>
|
|
<p></p>
|
|
- <p style="flex:1;">实验室信息</p>
|
|
|
|
|
|
+ <p style="flex:1;">实验室安全信息牌</p>
|
|
<div v-if="versionField() == 'xiBeiNongLinDaXue'" class="reset-button-one" style="margin-top:-5px;width:80px!important;height:30px!important;line-height:30px!important;" @click="backPage">返回</div>
|
|
<div v-if="versionField() == 'xiBeiNongLinDaXue'" class="reset-button-one" style="margin-top:-5px;width:80px!important;height:30px!important;line-height:30px!important;" @click="backPage">返回</div>
|
|
</div>
|
|
</div>
|
|
<div class="left-top-title-box">
|
|
<div class="left-top-title-box">
|
|
@@ -24,17 +24,14 @@
|
|
</div>
|
|
</div>
|
|
<div class="user-max-box">
|
|
<div class="user-max-box">
|
|
<div class="left-box">
|
|
<div class="left-box">
|
|
- <p>实验室责任人:<span>{{newData.adminName}}</span></p>
|
|
|
|
- <p>联系方式:<span>{{newData.adminPhone}}</span></p>
|
|
|
|
|
|
+ <p>责任人:<span>{{newData.adminName}}-{{newData.adminPhone}}</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="right-box">
|
|
<div class="right-box">
|
|
- <div v-for="(item,index) in newData.safeUserName" :key="index">
|
|
|
|
- <p>安全责任人:<span>{{newData.safeUserName[index]}}</span></p>
|
|
|
|
- <p>联系方式:<span>{{newData.safeUserPhone[index]?newData.safeUserPhone[index]:'未填写'}}</span></p>
|
|
|
|
|
|
+ <div>
|
|
|
|
+ <p>安全责任人:<span v-for="(item,index) in newData.safeUserName" :key="index">{{newData.safeUserName[index]}}-{{newData.safeUserPhone[index]?newData.safeUserPhone[index]:'未填写'}}</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <p class="info-max-title-p">管控一体机信息</p>
|
|
|
|
<div class="info-max-box">
|
|
<div class="info-max-box">
|
|
<div class="left-box">
|
|
<div class="left-box">
|
|
<div class="for-text-box">
|
|
<div class="for-text-box">
|
|
@@ -68,20 +65,22 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <p class="info-max-title-p">电子信息牌信息</p>
|
|
|
|
- <div class="info-max-box">
|
|
|
|
- <div class="for-text-box" v-if="item.privateList.length>0 && item.classifyType==1" v-for="(item,index) in newData.classifyList">
|
|
|
|
- <p class="info-title">{{item.classifyName}}:</p>
|
|
|
|
- <div class="for-box" v-for="(item2,index2) in item.privateList" :key="index2">
|
|
|
|
- <p class="for-info-p">● {{item2.infoName}}</p>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="for-img-box" v-if="item.privateList.length>0 && item.classifyType==2" v-for="(item,index) in newData.classifyList">
|
|
|
|
- <p class="info-title" style="margin-bottom:7px;">{{item.classifyName}}:</p>
|
|
|
|
- <img :src="item2.infoContent" v-for="(item2,index2) in item.privateList" :key="index2">
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <div class="top-max-box">
|
|
|
|
+ <div class="all-title-box" style="margin-top:20px;">
|
|
|
|
+ <p></p>
|
|
|
|
+ <p style="flex:1;">关联预案</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="demo-max-box">
|
|
|
|
+ <div class="demo-title-box">
|
|
|
|
+ <p>预案名称</p>
|
|
|
|
+ <p>启动次数</p>
|
|
|
|
+ <p>最近启动时间</p>
|
|
</div>
|
|
</div>
|
|
- <div class="for-img-box" v-if="!newData.classifyList[0]">
|
|
|
|
- <p class="info-title">未配置</p>
|
|
|
|
|
|
+ <div class="demo-text-box" v-for="(item,index) in demoList" :key='index'>
|
|
|
|
+ <p>{{item.name}}</p>
|
|
|
|
+ <p>{{item.num}}</p>
|
|
|
|
+ <p>{{item.time}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -157,8 +156,12 @@
|
|
</div>
|
|
</div>
|
|
<div class="video-max-box">
|
|
<div class="video-max-box">
|
|
<div class="video-min-box" v-for="(item,index) in newData.videoData" :key="item.id">
|
|
<div class="video-min-box" v-for="(item,index) in newData.videoData" :key="item.id">
|
|
- <video :id="item.divId" ref="videoRef" autoplay controls muted width="240" height="130px"></video>
|
|
|
|
|
|
+ <video :id="item.divId" ref="videoRef" autoplay controls muted width="380"></video>
|
|
<p class="el-icon-full-screen position-p" @click="videoFullScreen(index)"></p>
|
|
<p class="el-icon-full-screen position-p" @click="videoFullScreen(index)"></p>
|
|
|
|
+ <!--画中画-->
|
|
|
|
+ <p class="video-all-button-2 el-icon-data-board" @click="requestPictureInPicture(index)"></p>
|
|
|
|
+ <!--历史记录-->
|
|
|
|
+ <p class="video-all-button-3 el-icon-date" @click="lookDialog"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img class="null-data-img" src="@/assets/ZDimages/null-data.png" v-if="!newData.videoData[0]">
|
|
<img class="null-data-img" src="@/assets/ZDimages/null-data.png" v-if="!newData.videoData[0]">
|
|
@@ -168,27 +171,37 @@
|
|
<p>检查项信息</p>
|
|
<p>检查项信息</p>
|
|
</div>
|
|
</div>
|
|
<div class="inspection-box">
|
|
<div class="inspection-box">
|
|
- <div>
|
|
|
|
- <p>穿戴检查项:</p>
|
|
|
|
- <p>
|
|
|
|
- <span v-for="(item,index) in newData.safeInfo.checkInData">{{index==0?item:'、'+item}}</span>
|
|
|
|
- <span v-if="!newData.safeInfo.checkInData">未设置</span>
|
|
|
|
- </p>
|
|
|
|
- </div>
|
|
|
|
- <div>
|
|
|
|
- <p>穿戴检查可跳过:</p>
|
|
|
|
- <p>{{newData.skipped == '1'?'是':(newData.skipped == '0'?'否':'')}}</p>
|
|
|
|
- </div>
|
|
|
|
- <div v-if="newData.skipped == 1">
|
|
|
|
- <p>穿戴检查识别上限:</p>
|
|
|
|
- <p>{{newData.checkCount?newData.checkCount:'未设置'}}</p>
|
|
|
|
|
|
+ <div style="display: flex">
|
|
|
|
+ <div>
|
|
|
|
+ <p>穿戴检查项:</p>
|
|
|
|
+ <p>
|
|
|
|
+ <span v-for="(item,index) in newData.safeInfo.checkInData">{{index==0?item:'、'+item}}</span>
|
|
|
|
+ <span v-if="!newData.safeInfo.checkInData">未设置</span>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="margin-left:30px;">
|
|
|
|
+ <p>穿戴检查可跳过:</p>
|
|
|
|
+ <p>{{newData.skipped == '1'?'是':(newData.skipped == '0'?'否':'')}}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="margin-left:30px;" v-if="newData.skipped == 1">
|
|
|
|
+ <p>穿戴检查识别上限:</p>
|
|
|
|
+ <p>{{newData.checkCount?newData.checkCount:'未设置'}}</p>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- <div>
|
|
|
|
- <p>离开检查项:</p>
|
|
|
|
- <p>
|
|
|
|
- <span v-for="(item,index) in newData.safeInfo.checkOutData">{{index==0?item:'、'+item}}</span>
|
|
|
|
- <span v-if="!newData.safeInfo.checkOutData">未设置</span>
|
|
|
|
- </p>
|
|
|
|
|
|
+ <div style="display: flex">
|
|
|
|
+ <div>
|
|
|
|
+ <p>重复签到限制时间:</p>
|
|
|
|
+ <p>
|
|
|
|
+ <span>二十四小时</span>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="margin-left:30px;">
|
|
|
|
+ <p>离开检查项:</p>
|
|
|
|
+ <p>
|
|
|
|
+ <span v-for="(item,index) in newData.safeInfo.checkOutData">{{index==0?item:'、'+item}}</span>
|
|
|
|
+ <span v-if="!newData.safeInfo.checkOutData">未设置</span>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -214,6 +227,69 @@
|
|
<el-button type="primary" @click="submitFormOne">确 定</el-button>
|
|
<el-button type="primary" @click="submitFormOne">确 定</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
|
+
|
|
|
|
+ <el-dialog title="历史视频" v-if="dialogType"
|
|
|
|
+ @close="close"
|
|
|
|
+ :visible.sync="dialogType" width="1000px"
|
|
|
|
+ append-to-body class="look-video-dialog-box">
|
|
|
|
+ <div>
|
|
|
|
+ <el-date-picker
|
|
|
|
+ style="margin-right:20px;"
|
|
|
|
+ v-model="datePicker"
|
|
|
|
+ type="date"
|
|
|
|
+ placeholder="选择日期"
|
|
|
|
+ format="yyyy 年 MM 月 dd 日">
|
|
|
|
+ </el-date-picker>
|
|
|
|
+ <el-time-select
|
|
|
|
+ style="margin-right:20px;"
|
|
|
|
+ placeholder="起始时间"
|
|
|
|
+ v-model="startTime"
|
|
|
|
+ :picker-options="{
|
|
|
|
+ start: '00:00',
|
|
|
|
+ step: '01:00',
|
|
|
|
+ end: '23:00',
|
|
|
|
+ }">
|
|
|
|
+ </el-time-select>
|
|
|
|
+ <el-time-select
|
|
|
|
+ style="margin-right:20px;"
|
|
|
|
+ placeholder="结束时间"
|
|
|
|
+ v-model="endTime"
|
|
|
|
+ :picker-options="{
|
|
|
|
+ start: '00:00',
|
|
|
|
+ step: '01:00',
|
|
|
|
+ end: '23:00',
|
|
|
|
+ minTime: startTime
|
|
|
|
+ }">
|
|
|
|
+ </el-time-select>
|
|
|
|
+ <el-button type="primary" style="height:40px;" @click="videoButtonLock(1)">确定</el-button>
|
|
|
|
+ <el-button style="height:40px;" @click="videoButtonLock(2)">重置</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="dialog-video-max-box">
|
|
|
|
+ <p class="dialog-position-p"></p>
|
|
|
|
+ <div class="dialog-video-max-left-box">
|
|
|
|
+ <video controls width="730"
|
|
|
|
+ autoplay muted
|
|
|
|
+ :poster="videoCover" v-if="dialogVideoType">
|
|
|
|
+ <source :src="videoUrl"
|
|
|
|
+ type="video/webm">
|
|
|
|
+ <source :src="videoUrl"
|
|
|
|
+ type="video/mp4">
|
|
|
|
+ </video>
|
|
|
|
+ <i v-if="!videoUrl" style="display: inline-block;width:730px;line-height:200px;text-align: center;font-size:16px;color:#999">请选择视频</i>
|
|
|
|
+ <!--<video class="video-box" ref="dialogVideoRef" :poster="videoCover"-->
|
|
|
|
+ <!--v-if="dialogVideoType"-->
|
|
|
|
+ <!--:url="videoUrl"-->
|
|
|
|
+ <!--autoplay controls muted width="366px" height="210px"></video>-->
|
|
|
|
+ </div>
|
|
|
|
+ <div class="dialog-video-max-right-box scrollbar-box">
|
|
|
|
+ <p :class="videoUrl == item.url?'check-p':''"
|
|
|
|
+ v-if="item.type"
|
|
|
|
+ @click="videoClick(item)"
|
|
|
|
+ v-for="(item,index) in videoDataList" :key="index">{{item.name}}</p>
|
|
|
|
+ <i v-if="nullType">暂无数据</i>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -255,6 +331,137 @@
|
|
},
|
|
},
|
|
videoList:[],
|
|
videoList:[],
|
|
safetyInfoList:[],
|
|
safetyInfoList:[],
|
|
|
|
+ demoList:[
|
|
|
|
+ {
|
|
|
|
+ name:"大气压预案",
|
|
|
|
+ num:"三次",
|
|
|
|
+ time:"2021年6月1日 12:00",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"VOC预案",
|
|
|
|
+ num:"三次",
|
|
|
|
+ time:"2021年6月5日 10:00",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"烟感预案",
|
|
|
|
+ num:"三次",
|
|
|
|
+ time:"2021年6月7日 15:00",
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ dialogType:false,
|
|
|
|
+ datePicker:null,
|
|
|
|
+ startTime:null,
|
|
|
|
+ endTime:null,
|
|
|
|
+ videoDataList:[
|
|
|
|
+ {
|
|
|
|
+ name:"2023-06-21/18:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-21/18-38-49.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-06-22/18:00",
|
|
|
|
+ url: "http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-21/18-43-08.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-06-25/10:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-25/10-36-09.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-06-26/10:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-25/10-42-26.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-06-25/10:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-25/10-47-58.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-06-25/11:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-25/10-49-50.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-06-25/12:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-25/10-50-29.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-06-25/13:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-25/10-50-58.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-06-25/14:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-25/10-51-09.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-06-25/15:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-25/10-51-26.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-06-26/16:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-26/10-19-55.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-06-26/17:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-26/10-20-34.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-06-26/10:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-26/10-21-19.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-06-26/10:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-26/10-22-04.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-06-26/14:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-26/14-59-04.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-06-26/15:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-26/15-33-20.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-07-12/10:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-07-12/10-26-33.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-07-12/10:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-07-12/10-32-55.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-07-12/10:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-07-12/10-36-12.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-07-12/08:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-07-12/10-41-21.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name:"2023-07-12/14:00",
|
|
|
|
+ url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-07-12/14-19-44.mp4",
|
|
|
|
+ type:true,
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ videoUrl:null,
|
|
|
|
+ dialogVideoType:false,
|
|
|
|
+ nullType:false,
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
@@ -279,6 +486,120 @@
|
|
|
|
|
|
},
|
|
},
|
|
methods:{
|
|
methods:{
|
|
|
|
+ close(){
|
|
|
|
+ this.$set(this,'dialogType',false);
|
|
|
|
+ this.$set(this,'datePicker',null);
|
|
|
|
+ this.$set(this,'startTime',null);
|
|
|
|
+ this.$set(this,'endTime',null);
|
|
|
|
+ this.$set(this,'videoUrl',null);
|
|
|
|
+ this.$set(this,'dialogVideoType',false);
|
|
|
|
+ this.$set(this,'nullType',false);
|
|
|
|
+ },
|
|
|
|
+ videoButtonLock(type){
|
|
|
|
+ let self = this;
|
|
|
|
+ if(type == 2){
|
|
|
|
+ this.$set(this,'datePicker',null);
|
|
|
|
+ this.$set(this,'startTime',null);
|
|
|
|
+ this.$set(this,'endTime',null);
|
|
|
|
+ for(let i=0;i<self.videoDataList.length;i++){
|
|
|
|
+ self.$set(self.videoDataList[i],'type',true);
|
|
|
|
+ }
|
|
|
|
+ }else{
|
|
|
|
+ let time = this.datePicker?this.parseTime(this.datePicker, '{y}-{m}-{d}'):'';
|
|
|
|
+ let time1 = this.startTime;
|
|
|
|
+ let time2 = this.endTime;
|
|
|
|
+ if(time||time1||time2){
|
|
|
|
+ let num = 0;
|
|
|
|
+ for(let i=0;i<self.videoDataList.length;i++){
|
|
|
|
+ if(time&&time1&&time2){
|
|
|
|
+ let x = parseInt(self.videoDataList[i].name.split('/')[1].split(':')[0])
|
|
|
|
+ let a = parseInt(time1.split(':')[0])
|
|
|
|
+ let b = parseInt(time2.split(':')[0])
|
|
|
|
+ if(self.videoDataList[i].name.indexOf(time) != -1 && x >= a && x <= b){
|
|
|
|
+ self.videoDataList[i].type = true;
|
|
|
|
+ }else{
|
|
|
|
+ num++
|
|
|
|
+ self.videoDataList[i].type = false;
|
|
|
|
+ }
|
|
|
|
+ }else if(time&&time1){
|
|
|
|
+ let x = parseInt(self.videoDataList[i].name.split('/')[1].split(':')[0])
|
|
|
|
+ let a = parseInt(time1.split(':')[0])
|
|
|
|
+ if(self.videoDataList[i].name.indexOf(time) != -1 && x >= a){
|
|
|
|
+ self.videoDataList[i].type = true;
|
|
|
|
+ }else{
|
|
|
|
+ num++
|
|
|
|
+ self.videoDataList[i].type = false;
|
|
|
|
+ }
|
|
|
|
+ }else if(time&&time2){
|
|
|
|
+ let x = parseInt(self.videoDataList[i].name.split('/')[1].split(':')[0])
|
|
|
|
+ let b = parseInt(time2.split(':')[0])
|
|
|
|
+ if(self.videoDataList[i].name.indexOf(time1) != -1 && x <= b){
|
|
|
|
+ self.videoDataList[i].type = true;
|
|
|
|
+ }else{
|
|
|
|
+ num++
|
|
|
|
+ self.videoDataList[i].type = false;
|
|
|
|
+ }
|
|
|
|
+ }else if(time1&&time2){
|
|
|
|
+ let x = parseInt(self.videoDataList[i].name.split('/')[1].split(':')[0])
|
|
|
|
+ let a = parseInt(time1.split(':')[0])
|
|
|
|
+ let b = parseInt(time2.split(':')[0])
|
|
|
|
+ if(x >= a && x <= b){
|
|
|
|
+ self.videoDataList[i].type = true;
|
|
|
|
+ }else{
|
|
|
|
+ num++
|
|
|
|
+ self.videoDataList[i].type = false;
|
|
|
|
+ }
|
|
|
|
+ }else if(time1){
|
|
|
|
+ let x = parseInt(self.videoDataList[i].name.split('/')[1].split(':')[0])
|
|
|
|
+ let a = parseInt(time1.split(':')[0])
|
|
|
|
+ if(x >= a){
|
|
|
|
+ self.videoDataList[i].type = true;
|
|
|
|
+ }else{
|
|
|
|
+ num++
|
|
|
|
+ self.videoDataList[i].type = false;
|
|
|
|
+ }
|
|
|
|
+ }else if(time2){
|
|
|
|
+ let x = parseInt(self.videoDataList[i].name.split('/')[1].split(':')[0])
|
|
|
|
+ let b = parseInt(time2.split(':')[0])
|
|
|
|
+ if(x <= b){
|
|
|
|
+ self.videoDataList[i].type = true;
|
|
|
|
+ }else{
|
|
|
|
+ num++
|
|
|
|
+ self.videoDataList[i].type = false;
|
|
|
|
+ }
|
|
|
|
+ }else if(time){
|
|
|
|
+ if(self.videoDataList[i].name.indexOf(time) != -1){
|
|
|
|
+ self.videoDataList[i].type = true;
|
|
|
|
+ }else{
|
|
|
|
+ num++
|
|
|
|
+ self.videoDataList[i].type = false;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ if(num == self.videoDataList.length){
|
|
|
|
+ this.$set(this,'nullType',true);
|
|
|
|
+ }else{
|
|
|
|
+ this.$set(this,'nullType',false);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ videoClick(item){
|
|
|
|
+ let self = this;
|
|
|
|
+ this.$set(this,'dialogVideoType',false);
|
|
|
|
+ this.$set(this,'videoUrl',item.url);
|
|
|
|
+ setTimeout(function(){
|
|
|
|
+ self.$set(self,'dialogVideoType',true);
|
|
|
|
+ },300);
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ requestPictureInPicture(index){
|
|
|
|
+ this.$refs.videoRef[index].requestPictureInPicture();
|
|
|
|
+ },
|
|
|
|
+ lookDialog(){
|
|
|
|
+ this.$set(this,'dialogType',!this.dialogType);
|
|
|
|
+ this.$set(this,'videoUrl',null);
|
|
|
|
+ },
|
|
//视频方法
|
|
//视频方法
|
|
videoFunction(){
|
|
videoFunction(){
|
|
let self = this;
|
|
let self = this;
|
|
@@ -458,7 +779,7 @@
|
|
}
|
|
}
|
|
.left-max-box{
|
|
.left-max-box{
|
|
font-weight:500;
|
|
font-weight:500;
|
|
- width:1035px;
|
|
|
|
|
|
+ width:735px;
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
.top-max-box-flex{
|
|
.top-max-box-flex{
|
|
@@ -517,9 +838,8 @@
|
|
}
|
|
}
|
|
.user-max-box{
|
|
.user-max-box{
|
|
margin-top:10px;
|
|
margin-top:10px;
|
|
- display: flex;
|
|
|
|
.left-box{
|
|
.left-box{
|
|
- width:420px;
|
|
|
|
|
|
+ flex:1;
|
|
display: flex;
|
|
display: flex;
|
|
p{
|
|
p{
|
|
line-height: 32px;
|
|
line-height: 32px;
|
|
@@ -533,16 +853,17 @@
|
|
}
|
|
}
|
|
.right-box{
|
|
.right-box{
|
|
flex:1;
|
|
flex:1;
|
|
|
|
+ display: inline-block;
|
|
div{
|
|
div{
|
|
- flex:1;
|
|
|
|
display: flex;
|
|
display: flex;
|
|
p{
|
|
p{
|
|
|
|
+ margin-right:20px;
|
|
line-height: 32px;
|
|
line-height: 32px;
|
|
font-size:14px;
|
|
font-size:14px;
|
|
- flex:1;
|
|
|
|
color:#333;
|
|
color:#333;
|
|
span{
|
|
span{
|
|
color:#999;
|
|
color:#999;
|
|
|
|
+ margin-right:20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -562,7 +883,7 @@
|
|
display: flex;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
.for-text-box{
|
|
.for-text-box{
|
|
- width:420px;
|
|
|
|
|
|
+ width:320px;
|
|
.info-title{
|
|
.info-title{
|
|
font-size:14px;
|
|
font-size:14px;
|
|
color:#333;
|
|
color:#333;
|
|
@@ -581,7 +902,7 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.for-img-box{
|
|
.for-img-box{
|
|
- width:420px;
|
|
|
|
|
|
+ width:320px;
|
|
.info-title{
|
|
.info-title{
|
|
font-size:14px;
|
|
font-size:14px;
|
|
color:#333;
|
|
color:#333;
|
|
@@ -640,7 +961,7 @@
|
|
}
|
|
}
|
|
.right-max-box{
|
|
.right-max-box{
|
|
font-weight:500;
|
|
font-weight:500;
|
|
- width:545px;
|
|
|
|
|
|
+ width:845px;
|
|
border-radius:10px!important;
|
|
border-radius:10px!important;
|
|
box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
|
|
box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
|
|
margin:5px 20px 20px 10px;
|
|
margin:5px 20px 20px 10px;
|
|
@@ -704,9 +1025,9 @@
|
|
.video-min-box{
|
|
.video-min-box{
|
|
display: inline-block;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
- width:240px;
|
|
|
|
|
|
+ width:380px;
|
|
margin-bottom:20px;
|
|
margin-bottom:20px;
|
|
- height:130px;
|
|
|
|
|
|
+ margin-right:20px;
|
|
position: relative;
|
|
position: relative;
|
|
.position-p{
|
|
.position-p{
|
|
width:30px;
|
|
width:30px;
|
|
@@ -720,10 +1041,32 @@
|
|
color:#fff;
|
|
color:#fff;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
+ .video-all-button-2{
|
|
|
|
+ width:30px;
|
|
|
|
+ height:30px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height:30px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top:0;
|
|
|
|
+ right:30px;
|
|
|
|
+ color:#fff;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ .video-all-button-3{
|
|
|
|
+ width:30px;
|
|
|
|
+ height:30px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height:30px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top:0;
|
|
|
|
+ right:60px;
|
|
|
|
+ color:#fff;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- .video-min-box:nth-child(2n+0){
|
|
|
|
- margin-left:20px;
|
|
|
|
- }
|
|
|
|
|
|
+ /*.video-min-box:nth-child(2n+0){*/
|
|
|
|
+ /*margin-left:20px;*/
|
|
|
|
+ /*}*/
|
|
}
|
|
}
|
|
.inspection-box{
|
|
.inspection-box{
|
|
div{
|
|
div{
|
|
@@ -732,20 +1075,118 @@
|
|
line-height:16px;
|
|
line-height:16px;
|
|
font-size:14px;
|
|
font-size:14px;
|
|
margin:11px 0;
|
|
margin:11px 0;
|
|
- color:#333;
|
|
|
|
|
|
+ color:#999;
|
|
}
|
|
}
|
|
p:nth-child(2){
|
|
p:nth-child(2){
|
|
flex:1;
|
|
flex:1;
|
|
line-height:16px;
|
|
line-height:16px;
|
|
font-size:14px;
|
|
font-size:14px;
|
|
margin:11px 0;
|
|
margin:11px 0;
|
|
- color:#999;
|
|
|
|
|
|
+ color:#333;
|
|
span{
|
|
span{
|
|
- color:#999;
|
|
|
|
|
|
+ color:#333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .demo-max-box{
|
|
|
|
+ padding:20px;
|
|
|
|
+ .demo-title-box{
|
|
|
|
+ display: flex;
|
|
|
|
+ p{
|
|
|
|
+ flex:1;
|
|
|
|
+ color:#666;
|
|
|
|
+ font-size:16px;
|
|
|
|
+ line-height:30px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .demo-text-box{
|
|
|
|
+ display: flex;
|
|
|
|
+ p{
|
|
|
|
+ flex:1;
|
|
|
|
+ color:#333;
|
|
|
|
+ font-size:14px;
|
|
|
|
+ line-height:30px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|
|
|
|
+
|
|
|
|
+<style lang="scss">
|
|
|
|
+ .look-video-dialog-box{
|
|
|
|
+ // 画中画
|
|
|
|
+ video::-webkit-media-controls-enclosure {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ // 音频开关
|
|
|
|
+ video::-webkit-media-controls-mute-button {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ // 音频大小
|
|
|
|
+ video::-webkit-media-controls-volume-slider {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ //全屏按钮
|
|
|
|
+ video::-webkit-media-controls-fullscreen-button {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ //开始暂停按钮
|
|
|
|
+ video::-webkit-media-controls-play-button {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ // 时间显示
|
|
|
|
+ video::-webkit-media-controls-current-time-display {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ // 未知时间
|
|
|
|
+ video::-webkit-media-controls-toggle-closed-captions-button {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ //进度条
|
|
|
|
+ video::-webkit-media-controls-timeline {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ //未知进度条
|
|
|
|
+ video::-webkit-media-controls-time-remaining-display {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ video {
|
|
|
|
+ object-fit: fill; //视频全铺
|
|
|
|
+ pointer-events: none; //点击禁用
|
|
|
|
+ }
|
|
|
|
+ .dialog-video-max-box{
|
|
|
|
+ display: flex;
|
|
|
|
+ height:410px;
|
|
|
|
+ margin-top:20px;
|
|
|
|
+ position: relative;
|
|
|
|
+ .dialog-position-p{
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ left:0;
|
|
|
|
+ width: 730px;
|
|
|
|
+ height:30px;
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ z-index:999;
|
|
|
|
+ }
|
|
|
|
+ .dialog-video-max-left-box{
|
|
|
|
+ flex:1;
|
|
|
|
+ }
|
|
|
|
+ .dialog-video-max-right-box{
|
|
|
|
+ width:200px;
|
|
|
|
+ p{
|
|
|
|
+ line-height:30px;
|
|
|
|
+ }
|
|
|
|
+ p:hover{
|
|
|
|
+ background-color: #0183fa;
|
|
|
|
+ color:#fff;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ .check-p{
|
|
|
|
+ color:#0183fa;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|