修改巡检首页，添加视频详情内容

马宇豪

2023-03-20 5f114549b05ad3334ca911e84e9698cade0995ca

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

@@ -1,11 +1,46 @@
<template>
  <el-dialog v-model="videoDetailDialog" title="动火作业编号00001 实时监测详情" width="80%" center>
    <div style="margin-bottom: 20px">
      <el-button type="warning">人工录入警报信息</el-button>
      <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="http://36.108.169.10:8088/808gps/open/player/video.html?lang=zh&devIdno=21125705363&&account=gtxh&password=000000"></iframe>
      <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">
@@ -39,7 +74,50 @@
        </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>

@@ -56,6 +134,12 @@

   interface stateType {
    videoDetailDialog:boolean
    basicData: Array<any>
    checkData: Array<any>
    fillDialog: boolean
    reviewForm: object
    reportForm: object
    reportDialog: boolean
   }
   export default defineComponent({
      name: 'videoDetail',
@@ -65,7 +149,50 @@
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
      const state = reactive<stateType>({
        videoDetailDialog: false
        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
@@ -85,10 +212,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 +269,7 @@
      }
    }
  }
  .tip{
    margin-bottom: 20px;
  }
</style>