|
|
@@ -0,0 +1,378 @@
|
|
|
+<template>
|
|
|
+ <div class="infoPage">
|
|
|
+ <div class="title-box">
|
|
|
+ <p>详情</p>
|
|
|
+ <p class="inquire-button-one">处理</p>
|
|
|
+ <p class="reset-button-one" @click="backPage">返回</p>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-max-bug-box scrollbar-box">
|
|
|
+ <div class="left-max-big-box scrollbar-box">
|
|
|
+ <div class="text-box">
|
|
|
+ <p>报警时间：</p>
|
|
|
+ <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
|
|
|
+ </div>
|
|
|
+ <div class="text-box">
|
|
|
+ <p>报警内容：</p>
|
|
|
+ <p></p>
|
|
|
+ </div>
|
|
|
+ <div class="text-box">
|
|
|
+ <p>学院：</p>
|
|
|
+ <p></p>
|
|
|
+ </div>
|
|
|
+ <div class="text-box">
|
|
|
+ <p>位置：</p>
|
|
|
+ <p></p>
|
|
|
+ </div>
|
|
|
+ <div class="text-box">
|
|
|
+ <p>气瓶规格：</p>
|
|
|
+ <p></p>
|
|
|
+ </div>
|
|
|
+ <div class="text-box">
|
|
|
+ <p>气体余量：</p>
|
|
|
+ <p></p>
|
|
|
+ </div>
|
|
|
+ <div class="text-box">
|
|
|
+ <p>当前使用人：</p>
|
|
|
+ <p></p>
|
|
|
+ </div>
|
|
|
+ <div class="text-box">
|
|
|
+ <p>气瓶所有人：</p>
|
|
|
+ <p></p>
|
|
|
+ </div>
|
|
|
+ <div class="img-max-box">
|
|
|
+ <img v-for="(url,index) in imgList" :key="index"
|
|
|
+ :src="url" @click="lockImg(url)">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-max-big-box">
|
|
|
+ <div class="right-top-max-big-box">
|
|
|
+ <p class="right-title-p">查看监控</p>
|
|
|
+ <div class="right-top-button-box scrollbar-x-box">
|
|
|
+ <p :class="topButtonIndex == index?'buttonColorA':'buttonColorB'"
|
|
|
+ @click="topButtonClick(index)"
|
|
|
+ v-for="(item,index) in topButton" :key="index">{{item.name}}</p>
|
|
|
+ </div>
|
|
|
+ <video class="video-box" id="alarmRecordDetailsPageVideo" ref="videoRef" autoplay controls muted width="454px" height="252px" :poster="videoCover"></video>
|
|
|
+ </div>
|
|
|
+ <div class="right-bottom-max-big-box">
|
|
|
+ <p class="right-title-p">语音广播</p>
|
|
|
+ <div class="right-bottom-button-max-box">
|
|
|
+ <p class="right-bottom-button-title-p">选择播放喇叭</p>
|
|
|
+ <div class="right-bottom-button-box scrollbar-x-box">
|
|
|
+ <p :class="item.type?'buttonColorA':'buttonColorB'"
|
|
|
+ @click="bottomButtonClick(item)"
|
|
|
+ v-for="(item,index) in bottomButton" :key="index">{{item.name}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-bottom-input-box">
|
|
|
+ <p>播报内容</p>
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ resize="none"
|
|
|
+ :rows="4"
|
|
|
+ style="width:668px;height:100px;"
|
|
|
+ v-model="text"
|
|
|
+ placeholder="请输入播报内容"
|
|
|
+ maxLength="50"
|
|
|
+ clearable/>
|
|
|
+ </div>
|
|
|
+ <p class="inquire-button-one right-bottom-button" @click="releaseButton">发布</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--查看图片-->
|
|
|
+ <el-dialog title="抓拍照片" :visible.sync="imgOpen" width="1200px" append-to-body>
|
|
|
+ <div class="scrollbar-box" style="width:1160px;margin:0 auto;max-height:700px;overflow-y: scroll">
|
|
|
+ <img :src="imgUrl" style="display:block;max-width:1156px;margin:0 auto;">
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { handle } from "@/api/medicUniversity-3_1/index";
|
|
|
+ export default {
|
|
|
+ name: "infoPage",
|
|
|
+ props:{
|
|
|
+ propsInfoData:{},
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ imgList:[
|
|
|
+ 'https://img2.baidu.com/it/u=3596352791,3086982929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
|
|
|
+ 'https://img2.baidu.com/it/u=3596352791,3086982929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
|
|
|
+ 'https://img2.baidu.com/it/u=3596352791,3086982929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
|
|
|
+ 'https://img2.baidu.com/it/u=3596352791,3086982929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
|
|
|
+ ],
|
|
|
+ videoCover:window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + localStorage.getItem('videoCover'),
|
|
|
+ topButtonIndex:0,
|
|
|
+ topButton:[
|
|
|
+ {id:'1',name:'走廊摄像头1'},{id:'2',name:'走廊摄像头2'},{id:'3',name:'走廊摄像头3'},
|
|
|
+ {id:'1',name:'走廊摄像头1'},{id:'2',name:'走廊摄像头2'},{id:'3',name:'走廊摄像头3'},
|
|
|
+ {id:'1',name:'走廊摄像头1'},{id:'2',name:'走廊摄像头2'},{id:'3',name:'走廊摄像头3'},
|
|
|
+ ],
|
|
|
+ bottomButtonIndex:0,
|
|
|
+ bottomButton:[
|
|
|
+ {id:'1',name:'喇叭1',type:false},{id:'2',name:'喇叭1',type:false},
|
|
|
+ {id:'3',name:'喇叭1',type:false},{id:'4',name:'喇叭1',type:false},
|
|
|
+ {id:'5',name:'喇叭1',type:false},{id:'6',name:'喇叭1',type:false},
|
|
|
+ {id:'7',name:'喇叭1',type:false},{id:'8',name:'喇叭1',type:false},
|
|
|
+ {id:'9',name:'喇叭1',type:false},{id:'10',name:'喇叭1',type:false},
|
|
|
+ ],
|
|
|
+ text:"",
|
|
|
+ //查看图片
|
|
|
+ imgOpen:false,
|
|
|
+ imgUrl:"",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ //发布按钮
|
|
|
+ releaseButton(){
|
|
|
+ let self = this;
|
|
|
+ let num = 0;
|
|
|
+ for(let i=0;i<self.bottomButton.length;i++){
|
|
|
+ if(self.bottomButton[i].type){
|
|
|
+ num++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(num == 0){
|
|
|
+ this.msgError('请选择喇叭')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!this.text){
|
|
|
+ this.msgError('请输入播报内容')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //查看图片
|
|
|
+ lockImg(url){
|
|
|
+ console.log("url",url);
|
|
|
+ this.imgUrl = url;
|
|
|
+ this.imgOpen = true;
|
|
|
+ },
|
|
|
+ // 监控选择
|
|
|
+ topButtonClick(type){
|
|
|
+ if(this.topButtonIndex != type){
|
|
|
+ this.topButtonIndex = type;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //喇叭选择
|
|
|
+ bottomButtonClick(item){
|
|
|
+ item.type = !item.type
|
|
|
+ },
|
|
|
+ //处理报警记录
|
|
|
+ handle(){
|
|
|
+ let self = this;
|
|
|
+ if(self.propsInfoData.buttonType != 1){
|
|
|
+ self.msgError('只有该实验室负责人可以处理')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$confirm('确定要处理吗?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function() {
|
|
|
+ handle({id:self.propsInfoData.id}).then(response => {
|
|
|
+ self.msgSuccess(response.msg);
|
|
|
+ self.$set(self.propsInfoData,'handlingStatus',2);
|
|
|
+ self.$set(self.propsInfoData,'operate','已处理');
|
|
|
+ })
|
|
|
+ }).then(() => {
|
|
|
+ }).catch(() => {});
|
|
|
+ },
|
|
|
+ backPage(){
|
|
|
+ this.$parent.pageToggle(1);
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .infoPage{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ border:1px solid #dedede;
|
|
|
+ p{
|
|
|
+ margin:0;
|
|
|
+ padding:0;
|
|
|
+ }
|
|
|
+ .title-box{
|
|
|
+ display: flex;
|
|
|
+ height:90px;
|
|
|
+ border-bottom: 1px solid #D8D8D8;
|
|
|
+ p:nth-child(1){
|
|
|
+ flex:1;
|
|
|
+ font-size:16px;
|
|
|
+ line-height:90px;
|
|
|
+ margin-left:18px;
|
|
|
+ color:#0045AF;
|
|
|
+ }
|
|
|
+ p:nth-child(2),p:nth-child(3){
|
|
|
+ margin:25px 25px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom-max-bug-box{
|
|
|
+ font-weight: 500;
|
|
|
+ flex:1;
|
|
|
+ padding:20px 79px;
|
|
|
+ .left-max-big-box{
|
|
|
+ width:559px;
|
|
|
+ height:750px;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right:22px;
|
|
|
+ border-radius:10px;
|
|
|
+ box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
|
|
|
+ padding:28px 28px 0 28px;
|
|
|
+ .text-box{
|
|
|
+ display: flex;
|
|
|
+ font-size:14px;
|
|
|
+ line-height:20px;
|
|
|
+ margin-bottom:28px;
|
|
|
+ p:nth-child(1){
|
|
|
+ width:100px;
|
|
|
+ text-align: right;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ flex: 1;
|
|
|
+ color:#666;
|
|
|
+ margin-left:6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img-max-box{
|
|
|
+ img{
|
|
|
+ cursor: pointer;
|
|
|
+ display: inline-block;
|
|
|
+ width:240px;
|
|
|
+ height:160px;
|
|
|
+ margin-bottom:14px;
|
|
|
+ }
|
|
|
+ img:nth-child(odd){
|
|
|
+ margin-right:18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-max-big-box{
|
|
|
+ width:839px;
|
|
|
+ display: inline-block;
|
|
|
+ .right-top-max-big-box{
|
|
|
+ height:414px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius:10px;
|
|
|
+ box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
|
|
|
+ .right-title-p{
|
|
|
+ font-size:16px;
|
|
|
+ color:#333;
|
|
|
+ line-height:24px;
|
|
|
+ margin:18px 0 12px 24px;
|
|
|
+ }
|
|
|
+ .right-top-button-box{
|
|
|
+ margin:0 25px;
|
|
|
+ width:788px;
|
|
|
+ height: 42px;
|
|
|
+ p:nth-child(1){
|
|
|
+ margin:0;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ display: inline-block;
|
|
|
+ margin:0 0 0 18px;
|
|
|
+ padding:0 18px;
|
|
|
+ line-height:30px;
|
|
|
+ border-radius:6px;
|
|
|
+ font-size:14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .buttonColorA{
|
|
|
+ border:1px solid #0183FA;
|
|
|
+ background:#0183FA;
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .buttonColorB{
|
|
|
+ border:1px solid #E0E0E0;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .video-box{
|
|
|
+ height:252px;
|
|
|
+ width:454px;
|
|
|
+ margin:34px 192px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-bottom-max-big-box{
|
|
|
+ margin-top:20px;
|
|
|
+ height:316px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius:10px;
|
|
|
+ box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
|
|
|
+ .right-title-p{
|
|
|
+ font-size:16px;
|
|
|
+ color:#333;
|
|
|
+ line-height:24px;
|
|
|
+ margin:18px 0 12px 24px;
|
|
|
+ }
|
|
|
+ .right-bottom-button-max-box{
|
|
|
+ margin-top:25px;
|
|
|
+ display: flex;
|
|
|
+ .right-bottom-button-title-p{
|
|
|
+ line-height:32px;
|
|
|
+ margin-left:25px;
|
|
|
+ font-size:16px;
|
|
|
+ margin-right:25px;
|
|
|
+ }
|
|
|
+ .right-bottom-button-box{
|
|
|
+ width:668px;
|
|
|
+ height: 42px;
|
|
|
+ p:nth-child(1){
|
|
|
+ margin:0;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ display: inline-block;
|
|
|
+ margin-left:18px;
|
|
|
+ padding:0 30px;
|
|
|
+ line-height:30px;
|
|
|
+ border-radius:6px;
|
|
|
+ font-size:14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .buttonColorA{
|
|
|
+ border:1px solid #0183FA;
|
|
|
+ background:#0183FA;
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .buttonColorB{
|
|
|
+ border:1px solid #E0E0E0;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-bottom-input-box{
|
|
|
+ margin-top:30px;
|
|
|
+ display: flex;
|
|
|
+ p{
|
|
|
+ line-height:32px;
|
|
|
+ margin-left:25px;
|
|
|
+ font-size:16px;
|
|
|
+ text-align: right;
|
|
|
+ width:98px;
|
|
|
+ margin-right:24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-bottom-button{
|
|
|
+ width:100px;
|
|
|
+ line-height:40px;
|
|
|
+ text-align: center;
|
|
|
+ margin:15px 370px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
dedsudiyu