xiugai

马宇豪

2024-07-08 20b0ce2db27b64a60de60aee05dedd448099e330

 src/views/specialWorkSystem/specialIndex/components/videoDetail.vue

@@ -1,41 +1,46 @@
<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>
  <el-dialog v-model="videoDetailDialog" :title="title" 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>
        <template v-for="item in videoData.approvalDeviceList">
          <iframe class="video-cont" :src="'http://36.108.169.10:8088/808gps/open/player/video.html?lang=zh&devIdno=' + item.deviceNo + '&&account=gtxh&password=000000'"></iframe>
        </template>
        <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 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">
            <el-table :data="videoData.analysisDataList" style="width: 100%" border :header-cell-style="{ background: '#fafafa' }">
              <el-table-column property="type" label="类别" align="center">
                <template #default="scope">
                  <span>{{scope.row.isGood == 0?'合格':'不合格'}}</span>
                  {{ gasData.find(i=>i.value == scope.row.type)?.name }}
                </template>
              </el-table-column>
              <el-table-column property="analysisTime" label="分析时间" align="center"/>
              <el-table-column property="analysisUname" label="分析人" align="center"/>
              <el-table-column property="data" label="值" align="center"/>
              <el-table-column property="resultDesc" 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"/>
            <div class="top-tit"><div class="tit">现场检查数据：</div></div>
            <el-table :data="videoData.checkList" style="width: 100%" border :header-cell-style="{ background: '#fafafa' }">
              <el-table-column property="operatorUname" label="检查人" align="center"/>
              <el-table-column property="operationTime" label="检查填报时间" align="center"/>
              <el-table-column property="checkContent" 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 property="checkContent" label="是否合格" align="center">
<!--                <template #default="scope">-->
<!--                  <span>{{scope.row.isGood == 0?'合格':'不合格'}}</span>-->
<!--                </template>-->
              </el-table-column>
            </el-table>
          </div>
@@ -47,33 +52,39 @@
            基础信息
          </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>作业编号: <span>{{videoData.workPermitNo}}</span></div>
            <div>作业部门: <span>{{videoData.workDepName}}</span></div>
            <div>作业人员: <span>{{videoData.operatorList.map(i=>i.userName).join(',')}}</span></div>
            <div>开始时间: <span>{{videoData.workStartTime}}</span></div>
            <div>结束时间: <span>{{videoData.workFinishTime}}</span></div>
            <div class="checkBtn" @click="viewTicket(videoData)">查看作业票</div>
<!--            <div class="checkBtn" @click="viewRecord(videoData.workApplyId)">查看记录</div>-->
          </div>
        </div>
        <div class="info-item">
          <div class="info-tit">
            警报信息
          </div>
          <div class="content">
            <div>设备IA自动识别警报:
              <div>无</div>
          <template v-for="item in videoData.warningList" v-if="videoData.warningList && videoData.warningList.length>0">
            <div class="content" style="padding-bottom: 15px;margin-bottom:10px;border-bottom: 1px solid #ccc">
              <div>执行人:
                <span>{{item.operatorUname}}</span>
              </div>
              <div>警报时间:
                <span>{{item.operationTime}}</span>
              </div>
              <div>警报内容:
                <div>{{item.warningContent}}</div>
              </div>
            </div>
            <div>人工录入警报信息:
              <div>无</div>
            </div>
            <div>现场检查不合格项:
              <div>1、除动火人和监护人有无其他人员在场：有信息化人员在场</div>
            </div>
          </template>
          <div v-else>
            暂无警报信息
          </div>
        </div>
      </div>
    </div>
    <Work-record ref="recordRef"></Work-record>
    <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">
@@ -129,76 +140,91 @@
   import { Session } from '/@/utils/storage';
   import { ElMessage } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
  import WorkRecord from "/@/views/specialWorkSystem/specialIndex/components/workRecord.vue";
   import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
  import axios from "axios";
  import Cookies from "js-cookie";


   interface stateType {
    videoDetailDialog:boolean
    basicData: Array<any>
    checkData: Array<any>
    fillDialog: boolean
    reviewForm: object
    reportForm: object
    reportDialog: boolean
    videoData:{}
    title: string
    gasData: Array<any>
   }
   export default defineComponent({
      name: 'videoDetail',
      components: {},
      components: {WorkRecord},
      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
          }
        ],
        title: '',
        videoData:{},
        fillDialog: false,
        reportDialog: false,
        reviewForm: {},
        reportForm: {}
        reportForm: {},
        gasData: [
          {
            name: '有毒有害气体',
            value: 1
          },
          {
            name: '可燃气体',
            value: 2
          },
          {
            name: '氧气',
            value: 3
          }
        ]
      })
      const openDialog = ()=>{
      const recordRef = ref()
      const openDialog = (row)=>{
        state.videoData = row
        console.log(state.videoData.approvalDeviceList,'data')
        state.title = row.workTypeDesc + '编号' + row.workPermitNo + '实时监测详情'
        state.videoDetailDialog = true
      }

      const viewTicket = async(row)=>{
        let res = await workApplyApi().viewTicket({id:row.workApplyId})
        if(res.data.code == 200){
          console.log(res.data,666)
        }
        axios.post(import.meta.env.VITE_API_URL + `/specialwork9step/work/down/load/pdf`,{id: row.workApplyId},{headers:{'Content-Type': 'application/json','Authorization': `${Cookies.get('token')}`,'uid':`${Cookies.get('uid')}`},responseType: 'blob'}).then(res=>{
          if (res) {
            const link = document.createElement('a')
            let blob = new Blob([res.data],{type: 'application/pdf'})
            link.style.display = "none";
            link.href = URL.createObjectURL(blob); // 创建URL
            link.setAttribute("download", row.workPermitNo + "(" + row.workTypeDesc +")作业证.pdf");
            window.open(link)
          } else {
            ElMessage({
              type: 'warning',
              message: '预览失败'
            });
          }
        })
      }

      const viewRecord = (id: string | null)=>{
        recordRef.value.openDialog(id)
      }

         return {
        recordRef,
        openDialog,
        viewTicket,
        viewRecord,
        ...toRefs(state)
         };
      },