xiugai

马宇豪

2024-07-08 20b0ce2db27b64a60de60aee05dedd448099e330

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

@@ -1,45 +1,134 @@
<template>
  <el-dialog v-model="videoDetailDialog" title="动火作业编号00001 实时监测详情" width="80%" center>
    <div style="margin-bottom: 20px">
      <el-button type="warning">人工录入警报信息</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>-->
      <iframe class="video-cont" src="https://www.bilibili.com/video/BV1UM411s7Ey/?vd_source=7700e61a97bad6ca1f7c0ecb9768d682"></iframe>
      <div class="left-info">
        <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>
            <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">
                  {{ 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="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="checkContent" 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>作业编号: <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">
          <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>

@@ -51,27 +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
    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
        videoDetailDialog: false,
        title: '',
        videoData:{},
        fillDialog: false,
        reportDialog: false,
        reviewForm: {},
        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)
         };
      },
@@ -85,10 +238,28 @@
    align-items: flex-start;
    justify-content: space-between;

    .video-cont{
    .left-info{
      width: calc(70% - 20px);
      height: 60vh;
      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%;
@@ -124,4 +295,7 @@
      }
    }
  }
  .tip{
    margin-bottom: 20px;
  }
</style>