<template>
|
<el-dialog v-model="videoDetailDialog" title="动火作业编号00001 实时监测详情" width="80%" center>
|
<div style="margin-bottom: 20px">
|
<el-button type="warning" @click="fillDialog = true">人工录入警报信息</el-button>
|
</div>
|
<div class="info">
|
<!-- <video class="video-cont" autoplay src="https://www.bilibili.com/video/BV1UM411s7Ey/?vd_source=7700e61a97bad6ca1f7c0ecb9768d682" controls></video>-->
|
<div class="left-info">
|
<iframe class="video-cont" src="http://36.108.169.10:8088/808gps/open/player/video.html?lang=zh&devIdno=21125705363&&account=gtxh&password=000000"></iframe>
|
<div class="chart-area">
|
<div class="chart-item">
|
<div class="top-tit">
|
<div class="tit">基础指标数据（可燃气体浓度、氧气、一氧化碳、硫化氢按需展示）：</div>
|
<el-button type="warning" @click="reportDialog = true">监管异常填报</el-button>
|
</div>
|
<el-table :data="basicData" style="width: 100%" border :header-cell-style="{ background: '#fafafa' }">
|
<el-table-column property="type" label="类别" align="center"/>
|
<el-table-column property="time" label="填报时间" align="center"/>
|
<el-table-column property="name" label="填报人" align="center"/>
|
<el-table-column property="number" label="值" align="center"/>
|
<el-table-column property="isGood" label="是否合格" align="center">
|
<template #default="scope">
|
<span>{{scope.row.isGood == 0?'合格':'不合格'}}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="chart-item">
|
<div class="top-tit"><div class="tit">现场检查代码：</div></div>
|
<el-table :data="checkData" style="width: 100%" border :header-cell-style="{ background: '#fafafa' }">
|
<el-table-column property="name" label="现在检查人" align="center"/>
|
<el-table-column property="time" label="检查填报时间" align="center"/>
|
<el-table-column property="content" label="检查内容" align="center"/>
|
<el-table-column property="info" label="描述" align="center"/>
|
<el-table-column property="isGood" label="是否合格" align="center">
|
<template #default="scope">
|
<span>{{scope.row.isGood == 0?'合格':'不合格'}}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div class="right-info">
|
<div class="info-item">
|
<div class="info-tit">
|
基础信息
|
</div>
|
<div class="content">
|
<div>作业编号: <span>0000001</span></div>
|
<div>作业部门: <span>有机化工</span></div>
|
<div>作业人员: <span>王大壮（持证）</span></div>
|
<div>开始时间: <span>2023-03-09 14:00:45</span></div>
|
<div>结束时间: <span>2023-03-09 17:05:45</span></div>
|
<div class="checkBtn">查看作业票</div>
|
<div class="checkBtn">查看审批流</div>
|
</div>
|
</div>
|
<div class="info-item">
|
<div class="info-tit">
|
警报信息
|
</div>
|
<div class="content">
|
<div>设备IA自动识别警报:
|
<div>无</div>
|
</div>
|
<div>人工录入警报信息:
|
<div>无</div>
|
</div>
|
<div>现场检查不合格项:
|
<div>1、除动火人和监护人有无其他人员在场：有信息化人员在场</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-dialog v-model="fillDialog" title="作业全过程监测风险警报信息发现录入" width="50%" center>
|
<el-form ref="reviewFormRef" :model="reviewForm" :rules="reviewRules" label-width="170px">
|
<el-form-item label="风险描述：" prop="describe">
|
<el-input
|
v-model="reviewForm.describe"
|
:autosize="{ minRows: 4, maxRows: 10 }"
|
type="textarea"
|
prop="desc"
|
placeholder="请输入风险描述信息"
|
/>
|
</el-form-item>
|
<el-form-item label="是否已通知现场负责人：" prop="isInform">
|
<el-radio-group v-model="reviewForm.isInform">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="0">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="fillDialog = false">取消</el-button>
|
<el-button type="primary">确认</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
<el-dialog v-model="reportDialog" title="基础指标数据作业过程中监管异常填报" width="50%" center>
|
<div class="tip">
|
提示：动火作业被测可燃气体或蒸气浓度不应大于10%LEL。您在现场人员未发现或未如实填报时，才需要填写此项。
|
</div>
|
<el-form ref="reportFormRef" :model="reportForm" :rules="reportRules" label-width="120px">
|
<el-form-item label="可燃气体浓度：" prop="problem">
|
<el-input
|
v-model="reportForm.problem"
|
prop="problem"
|
/>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="reportDialog = false">取消</el-button>
|
<el-button type="primary">确认</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</el-dialog>
|
</template>
|
|
<script lang="ts">
|
import { toRefs, reactive, defineComponent, ref, defineAsyncComponent } from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
import {useUserInfo} from "/@/stores/userInfo";
|
import { Session } from '/@/utils/storage';
|
import { ElMessage } from 'element-plus'
|
import type { FormInstance, FormRules } from 'element-plus'
|
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
|
|
|
interface stateType {
|
videoDetailDialog:boolean
|
basicData: Array<any>
|
checkData: Array<any>
|
fillDialog: boolean
|
reviewForm: object
|
reportForm: object
|
reportDialog: boolean
|
}
|
export default defineComponent({
|
name: 'videoDetail',
|
components: {},
|
props:[],
|
setup() {
|
const userInfo = useUserInfo()
|
const { userInfos } = storeToRefs(userInfo);
|
const state = reactive<stateType>({
|
videoDetailDialog: false,
|
basicData:[
|
{
|
type: '可燃气体浓度',
|
time: '2023-03-20 09:09',
|
name: '李羽飞（动火分析人）',
|
number: '3%LEL',
|
isGood: 0
|
},
|
{
|
type: '可燃气体浓度',
|
time: '2023-03-20 09:09',
|
name: '李羽飞（动火分析人）',
|
number: '2.9%LEL',
|
isGood: 0
|
}
|
],
|
checkData:[
|
{
|
name: '杨冬冬',
|
time: '2023-03-20 09:09',
|
content: '防火面罩不少于2个',
|
info: '2个',
|
isGood: 0
|
},
|
{
|
name: '杨冬冬',
|
time: '2023-03-20 09:09',
|
content: '电源插座是否防爆',
|
info: '是',
|
isGood: 0
|
},
|
{
|
name: '杨冬冬',
|
time: '2023-03-20 09:09',
|
content: '除动火人和监护人有无其他人员在场',
|
info: '有信息化人员',
|
isGood: 1
|
}
|
],
|
fillDialog: false,
|
reportDialog: false,
|
reviewForm: {},
|
reportForm: {}
|
})
|
const openDialog = ()=>{
|
state.videoDetailDialog = true
|
}
|
return {
|
openDialog,
|
...toRefs(state)
|
};
|
},
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.info{
|
width: 100%;
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
|
.left-info{
|
width: calc(70% - 20px);
|
margin-right: 20px;
|
.video-cont{
|
width: 100%;
|
min-height: 500px;
|
}
|
.chart-area{
|
width: 100%;
|
background: #fafafa;
|
padding: 20px;
|
margin-top: 20px;
|
.chart-item{
|
margin-bottom: 20px;
|
.top-tit{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
}
|
}
|
}
|
}
|
.right-info{
|
width: 30%;
|
|
.info-item{
|
width: 100%;
|
margin-bottom: 10px;
|
|
&:last-of-type{
|
margin-bottom: 0;
|
}
|
|
.info-tit{
|
width: 100%;
|
padding: 6px 0;
|
text-align: center;
|
background: #59ddf7;
|
border-radius: 4px;
|
margin-bottom: 10px;
|
}
|
.content{
|
width: 100%;
|
div{
|
width: 100%;
|
font-size: 14px;
|
margin-bottom: 4px;
|
}
|
.checkBtn{
|
color: #409eff;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
}
|
.tip{
|
margin-bottom: 20px;
|
}
|
</style>
|
