提交

src/api/goaf/sensordata.js

@@ -0,0 +1,23 @@
+import request from '@/utils/request'
+// 获取所有传感器
+export function getSensorData(params) {
+  return request({
+    url: '/goaf/sensordata/list',
+    params
+  })
+}
+// 分页获取传感器
+export function getSensorDataByPage(params) {
+  return request({
+    url: '/goaf/sensordata/page',
+    params
+  })
+}
+// 增加传感器类型
+export function createSensorData(data) {
+  return request({
+    url: '/goaf/sensordata/report',
+    method: 'POST',
+    data
+  })
+}

src/router/modules/aqpt.js

@@ -252,7 +252,7 @@ const aqptRouter = [
         }
       },
       {
-        path: 'sensor',
+        path: 'camera',
         component: () => import('@/views/goaf/sensor/camera'),
         name: 'goaf-camera',
         meta: {

src/styles/common.scss

@@ -110,7 +110,6 @@
 
 /*详情排版样式*/
 .text-block{
-  background: #7e848b;
   padding: 5px;
   border-radius: 5px;
 
@@ -139,14 +138,19 @@
       color: #d4d4d4 ;
       font-weight: normal;
       padding: 5px 0;
-      display: block;
-
+      display: flex;
+      &.lg{
+        width: 100%;
+      }
       .text-label{
         width: 140px;
         display: inline-block;
         color: #fff;
         font-weight: 800;
       }
+      .text-cont{
+        flex: 1;
+      }
     }
     &.col-4{
       .text-item{

src/views/goaf/alert/accept.vue

@@ -77,7 +77,7 @@
     </el-row>
 
     <el-row class="content-body">
-      <el-table v-loading="listLoading" class="page-table" border :data="dataList" height="calc(100vh - 230px)">
+      <el-table v-loading="listLoading" class="page-table" border :data="dataList" height="calc(100vh - 350px)">
 
         <el-table-column type="index" label="序号" header-align="center" align="center" width="60" />>
         <el-table-column prop="hdangerTitle" label="预警名称" header-align="left" align="left">

src/views/goaf/alert/activity/Accept.vue

@@ -23,7 +23,7 @@
             <DangerInfo :view-data="viewData" class="form" />
             <el-form label-width="130px">
               <el-form-item label="预警描述" prop="hdangerDesc">
-                <el-input v-model="formData.hdangerDesc" type="textarea" :rows="5" placeholder="预警描述" readonly />
+                <el-input v-model="formData.hdangerDesc" type="textarea" placeholder="预警描述" autosize readonly />
               </el-form-item>
             </el-form>
             <work-flow ref="WFlow" />
@@ -149,7 +149,7 @@ export default {
         const { code, data, msg } = resp
         if (code === 0) {
           this.viewData = info || data
-          this.formData.hdangerDesc = data.hdangerDesc
+          this.formData.hdangerDesc = data.hdangerDesc.replace(/；/g, ';\n').replace(/ /g, '')
           this.$refs.WFlow.get(hdangerId)
           this.$refs.ActivityHandleRecord.getData(hdangerId)
         } else {

src/views/goaf/alert/activity/Rectify.vue

@@ -23,8 +23,8 @@
           <Vuescroll :ops="ops" style="height: calc(100vh - 200px)">
             <DangerInfo :view-data="viewData" class="form" />
             <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="130px">
-              <el-form-item label="预警描述" prop="s">
-                <el-input v-model="formData.hdangerDesc" type="textarea" :rows="2" placeholder="预警描述" readonly />
+              <el-form-item label="预警描述" prop="hdangerDesc">
+                <el-input v-model="formData.hdangerDesc" type="textarea" placeholder="预警描述" autosize readonly />
               </el-form-item>
               <!-- <el-form-item label="整改类型" prop="rectifyCat">
                 <el-select v-model="formData.rectifyCat" style="width: 100%" filterable placeholder="选择整改类型">
@@ -169,7 +169,7 @@ export default {
         const { code, data, msg } = resp
         if (code === 0) {
           this.viewData = data
-          this.formData.hdangerDesc = data.hdangerDesc
+          this.formData.hdangerDesc = data.hdangerDesc.replace(/；/g, ';\n').replace(/ /g, '')
           this.$refs.WFlow.get(dangerId)
           this.$refs.ActivityHandleRecord.getData(dangerId)
         } else {

src/views/goaf/alert/activity/Review.vue

@@ -23,7 +23,7 @@
             <DangerInfo :view-data="viewData" class="form" />
             <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="130px">
               <el-form-item label="预警描述" prop="hdangerDesc">
-                <el-input v-model="formData.hdangerDesc" type="textarea" :rows="2" placeholder="预警描述" readonly />
+                <el-input v-model="formData.hdangerDesc" type="textarea" placeholder="预警描述" autosize readonly />
               </el-form-item>
               <el-form-item label="预警等级" prop="hdangerLevel">
                 <el-radio-group v-model="formData.hdangerLevel">
@@ -174,9 +174,12 @@ export default {
         const { code, data, msg } = resp
         if (code === 0) {
           this.viewData = info || data
-          this.formData.hdangerLevel = data.hdangerLevel
-          this.formData.dangerDeadline = data.dangerDeadline
-          this.formData.hdangerDesc = data.hdangerDesc
+          this.formData = {
+            ...this.formData,
+            hdangerLevel: data.hdangerLevel,
+            dangerDeadline: data.dangerDeadline,
+            hdangerDesc: data.hdangerDesc.replace(/；/g, ';\n').replace(/ /g, '')
+          }
           this.$refs.WFlow.get(hdangerId)
           this.$refs.ActivityHandleRecord.getData(hdangerId)
         } else {

src/views/goaf/alert/components/DangerInfo.vue

@@ -1,20 +1,14 @@
 <template>
   <div class="text-block" :style="styles">
+    <h3 class="header">{{ viewData.hdangerTitle }}</h3>
     <div class="activity-item danger">
       <div v-if="viewData" class="text-row">
-        <div v-if="viewData.dangerCode" class="text-item">
-          <span class="text-label right">预警编码：</span>
-          <span> {{ viewData.dangerCode }} </span>
-        </div>
         <div v-if="viewData.status" class="text-item">
           <span class="text-label right">预警状态：</span>
           <span> {{ viewData.status | dangerStatusFilter }} </span>
         </div>
-        <div v-if="viewData.hdangerTitle" class="text-item">
-          <span class="text-label right">预警名称：</span>
-          <span> {{ viewData.hdangerTitle }} </span>
-        </div>
-        <div v-if="viewData.hdangerType" class="text-item">Z
+        <div v-if="viewData.hdangerType" class="text-item">
+          <span class="text-label right">预警类别：</span>
           <span> {{ viewData.hdangerType===1?'传感器巡检':"人员巡检" }} </span>
         </div>
         <div v-if="viewData.hdangerLevel" class="text-item">
@@ -25,10 +19,10 @@
           <span class="text-label right">整改期限：</span>
           <span> {{ viewData.dangerDeadLine }}</span>
         </div>
-        <div v-if="viewData.hdangerDesc" class="text-item">
+        <!-- <div v-if="viewData.hdangerDesc" class="text-item">
           <span class="text-label right">预警描述：</span>
           <span> {{ viewData.hdangerDesc }} </span>
-        </div>
+        </div> -->
       </div>
     </div>
     <div class="activity-item submit">
@@ -39,12 +33,12 @@
           <span v-if="viewData.submitPositionName">( {{ viewData.submitPositionName }} ) </span>
         </div>
         <div v-if="viewData.submitGroupName" class="text-item">
-          <span class="text-label right">所在部位：</span>
+          <span class="text-label right">所在部门：</span>
           <span> {{ viewData.submitGroupName }} </span>
         </div>
       </div>
     </div>
-    <div class="activity-item rectify">
+    <div class="activity-item rectify no-border">
       <div v-if="viewData.rectifyAccountId" class="text-row">
         <div v-if="viewData.rectifyAccountId" class="text-item">
           <span class="text-label right">整改人员：</span>
@@ -132,6 +126,13 @@ export default {
 
 </script>
 <style lang="scss" scoped>
+.header{
+  background-color: #28475c;
+  color: #fff;
+  margin: 0;
+  padding: 5px 0;
+  text-align: center;
+}
   .text-block{
     margin-bottom: 20px;
     &.form{
@@ -141,8 +142,11 @@ export default {
     }
   }
 .activity-item{
-  margin-top:1px;
-  background-color: #28475c;
+  background-color: #1d5072;
+  border-bottom: 1px solid #586fa3;
+  &.no-border{
+    border: 0;
+  }
   &.attach{
     display: flex;
     justify-content: flex-start;

src/views/goaf/alert/components/DangerList.vue

@@ -17,7 +17,7 @@
     </el-row>
 
     <el-row class="content-body">
-      <el-table v-loading="listLoading" class="page-table" border :data="dataList" height="calc(100vh - 230px)">
+      <el-table v-loading="listLoading" class="page-table" border :data="dataList" height="calc(100vh - 350px)">
 
         <el-table-column type="index" label="序号" header-align="center" align="center" width="60" />>
         <el-table-column prop="hdangerTitle" label="预警名称" header-align="left" align="left">

src/views/goaf/alert/index.vue

@@ -77,7 +77,7 @@
     </el-row>
 
     <el-row class="content-body">
-      <el-table v-loading="listLoading" class="page-table" border :data="dataList" height="calc(100vh - 230px)">
+      <el-table v-loading="listLoading" class="page-table" border :data="dataList" height="calc(100vh - 350px)">
 
         <el-table-column type="index" label="序号" header-align="center" align="center" width="60" />>
         <el-table-column prop="hdangerTitle" label="预警名称" header-align="left" align="left">

src/views/goaf/alert/rectify.vue

@@ -77,7 +77,7 @@
     </el-row>
 
     <el-row class="content-body">
-      <el-table v-loading="listLoading" class="page-table" border :data="dataList" height="calc(100vh - 230px)">
+      <el-table v-loading="listLoading" class="page-table" border :data="dataList" height="calc(100vh - 350px)">
 
         <el-table-column type="index" label="序号" header-align="center" align="center" width="60" />>
         <el-table-column prop="hdangerTitle" label="预警名称" header-align="left" align="left">

src/views/goaf/danger/activity/Accept.vue

@@ -23,7 +23,7 @@
             <DangerInfo :view-data="viewData" class="form" />
             <el-form label-width="130px">
               <el-form-item label="预警描述" prop="hdangerDesc">
-                <el-input v-model="formData.hdangerDesc" type="textarea" :rows="5" placeholder="预警描述" readonly />
+                <el-input v-model="formData.hdangerDesc" type="textarea" placeholder="预警描述" autosize readonly />
               </el-form-item>
             </el-form>
             <work-flow ref="WFlow" />
@@ -149,7 +149,7 @@ export default {
         const { code, data, msg } = resp
         if (code === 0) {
           this.viewData = info || data
-          this.formData.hdangerDesc = data.hdangerDesc
+          this.formData.hdangerDesc = data.hdangerDesc.replace(/；/g, ';\n').replace(/ /g, '')
           this.$refs.WFlow.get(hdangerId)
           this.$refs.ActivityHandleRecord.getData(hdangerId)
         } else {

src/views/goaf/danger/activity/Rectify.vue

@@ -23,8 +23,8 @@
           <Vuescroll :ops="ops" style="height: calc(100vh - 200px)">
             <DangerInfo :view-data="viewData" class="form" />
             <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="130px">
-              <el-form-item label="预警描述" prop="s">
-                <el-input v-model="formData.hdangerDesc" type="textarea" :rows="2" placeholder="预警描述" readonly />
+              <el-form-item label="预警描述" prop="hdangerDesc">
+                <el-input v-model="formData.hdangerDesc" type="textarea" placeholder="预警描述" autosize readonly />
               </el-form-item>
               <!-- <el-form-item label="整改类型" prop="rectifyCat">
                 <el-select v-model="formData.rectifyCat" style="width: 100%" filterable placeholder="选择整改类型">
@@ -169,7 +169,7 @@ export default {
         const { code, data, msg } = resp
         if (code === 0) {
           this.viewData = data
-          this.formData.hdangerDesc = data.hdangerDesc
+          this.formData.hdangerDesc = data.hdangerDesc.replace(/；/g, ';\n').replace(/ /g, '')
           this.$refs.WFlow.get(dangerId)
           this.$refs.ActivityHandleRecord.getData(dangerId)
         } else {

src/views/goaf/danger/activity/Review.vue

@@ -21,10 +21,9 @@
         <div v-show="tabType==='form'">
           <Vuescroll :ops="ops" style="height: calc(100vh - 200px)">
             <DangerInfo :view-data="viewData" class="form" />
-            <work-flow ref="WFlow" handle-user="整改人" />
             <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="130px">
               <el-form-item label="预警描述" prop="hdangerDesc">
-                <el-input v-model="formData.hdangerDesc" type="textarea" :rows="2" placeholder="预警描述" readonly />
+                <el-input v-model="formData.hdangerDesc" type="textarea" placeholder="预警描述" autosize readonly />
               </el-form-item>
               <el-form-item label="预警等级" prop="hdangerLevel">
                 <el-radio-group v-model="formData.hdangerLevel">
@@ -42,10 +41,11 @@
                   format="yyyy-MM-dd HH:mm:ss"
                   value-format="yyyy-MM-dd HH:mm:ss"
                   clearable
-                  style="width: 100%"
+                  style="width: 200px"
                 />
               </el-form-item>
             </el-form>
+            <work-flow ref="WFlow" handle-user="整改人" />
             <div class="btn-group">
               <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
               <el-button @click="dialogVisible = false">取消</el-button>
@@ -174,9 +174,12 @@ export default {
         const { code, data, msg } = resp
         if (code === 0) {
           this.viewData = info || data
-          this.formData.hdangerLevel = data.hdangerLevel
-          this.formData.dangerDeadline = data.dangerDeadline
-          this.formData.hdangerDesc = data.hdangerDesc
+          this.formData = {
+            ...this.formData,
+            hdangerLevel: data.hdangerLevel,
+            dangerDeadline: data.dangerDeadline,
+            hdangerDesc: data.hdangerDesc.replace(/；/g, ';\n').replace(/ /g, '')
+          }
           this.$refs.WFlow.get(hdangerId)
           this.$refs.ActivityHandleRecord.getData(hdangerId)
         } else {

src/views/goaf/danger/components/DangerInfo.vue

@@ -1,19 +1,12 @@
 <template>
   <div class="text-block" :style="styles">
+    <h3 class="header">{{ viewData.hdangerTitle }}</h3>
     <div class="activity-item danger">
       <div v-if="viewData" class="text-row">
-        <div v-if="viewData.dangerCode" class="text-item">
-          <span class="text-label right">预警编码：</span>
-          <span> {{ viewData.dangerCode }} </span>
-        </div>
         <div v-if="viewData.status" class="text-item">
           <span class="text-label right">预警状态：</span>
           <span> {{ viewData.status | dangerStatusFilter }} </span>
         </div>
-        <div v-if="viewData.hdangerTitle" class="text-item">
-          <span class="text-label right">预警名称：</span>
-          <span> {{ viewData.hdangerTitle }} </span>
-        </div>
         <div v-if="viewData.hdangerType" class="text-item">
           <span class="text-label right">预警类别：</span>
           <span> {{ viewData.hdangerType===1?'传感器巡检':"人员巡检" }} </span>
@@ -26,10 +19,10 @@
           <span class="text-label right">整改期限：</span>
           <span> {{ viewData.dangerDeadLine }}</span>
         </div>
-        <div v-if="viewData.hdangerDesc" class="text-item">
+        <!-- <div v-if="viewData.hdangerDesc" class="text-item">
           <span class="text-label right">预警描述：</span>
           <span> {{ viewData.hdangerDesc }} </span>
-        </div>
+        </div> -->
       </div>
     </div>
     <div class="activity-item submit">
@@ -45,7 +38,7 @@
         </div>
       </div>
     </div>
-    <div class="activity-item rectify">
+    <div class="activity-item rectify no-border">
       <div v-if="viewData.rectifyAccountId" class="text-row">
         <div v-if="viewData.rectifyAccountId" class="text-item">
           <span class="text-label right">整改人员：</span>
@@ -133,6 +126,13 @@ export default {
 
 </script>
 <style lang="scss" scoped>
+.header{
+  background-color: #28475c;
+  color: #fff;
+  margin: 0;
+  padding: 5px 0;
+  text-align: center;
+}
   .text-block{
     margin-bottom: 20px;
     &.form{
@@ -142,8 +142,11 @@ export default {
     }
   }
 .activity-item{
-  margin-top:1px;
-  background-color: #28475c;
+  background-color: #1d5072;
+  border-bottom: 1px solid #586fa3;
+  &.no-border{
+    border: 0;
+  }
   &.attach{
     display: flex;
     justify-content: flex-start;

src/views/goaf/danger/components/DangerList.vue

@@ -17,7 +17,7 @@
     </el-row>
 
     <el-row class="content-body">
-      <el-table v-loading="listLoading" class="page-table" border :data="dataList" height="calc(100vh - 230px)">
+      <el-table v-loading="listLoading" class="page-table" border :data="dataList" height="calc(100vh - 280px)">
 
         <el-table-column type="index" label="序号" header-align="center" align="center" width="60" />>
         <el-table-column prop="hdangerTitle" label="预警名称" header-align="left" align="left">

src/views/goaf/liveData/Model.vue

@@ -0,0 +1,132 @@
+<template>
+  <el-drawer
+    :title="title"
+    :modal-append-to-body="false"
+    :modal="false"
+    :wrapper-closable="false"
+    size="35%"
+    :visible.sync="dialogVisible"
+  >
+    <div style="padding: 30px 20px;">
+      <el-form
+        ref="ruleForm"
+        :model="formData"
+        label-position="right"
+        label-width="160px"
+      >
+        <el-form-item label="设备名称" required>
+          <el-input
+            v-model.trim="formData.goafDevName"
+            placeholder="请输入设备名称"
+            style="width: 80%"
+          />
+        </el-form-item>
+        <el-form-item label="传感器上报数据值" required>
+          <el-input-number v-model="formData.goafSensorValue" placeholder="告警阈值" :controls="false" style="width: 80%" />
+        </el-form-item>
+        <!-- <el-form-item label="传感器上报数据时间" prop="submitTime">
+          <el-date-picker
+            v-model="formData.goafDatareportTime"
+            type="date"
+            placeholder="设置发生时间"
+            format="yyyy-MM-dd HH:mm:ss"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            clearable
+            style="width: 80%"
+          />
+        </el-form-item> -->
+      </el-form>
+    </div>
+
+    <div class="btn-group">
+      <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
+      <el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
+    </div>
+  </el-drawer>
+</template>
+<script>
+import { createSensorData } from '@/api/goaf/sensordata'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'LiveDataSensorModel',
+  data() {
+    return {
+      title: '传感器配置',
+      ops: {
+        bar: {
+          keepShow: false,
+          background: 'rgba(144, 147, 153, 0.4)',
+          onlyShowBarOnScroll: false
+        }
+      },
+      dialogVisible: false,
+      formData: {
+        'ocId': undefined,
+        'goafDevName': '',
+        'goafSensorValue': 0
+        // 'goafDatareportTime': ''
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'userData'
+    ])
+  },
+  methods: {
+    // Show Add Dialog
+    showAddModel() {
+      this.resetFormData()
+      this.actionType = 'ADD'
+      this.title = '新增传感器上报信息'
+      this.dialogVisible = true
+    },
+
+    // Show Edit Dialog
+    showEditModel(data) {
+      this.resetFormData()
+      this.actionType = 'UPDATE'
+      this.title = '修改传感器上报信息'
+      this.dialogVisible = true
+      this.formData.ocId = this.userData.ocId
+    },
+
+    // Reset Form Data
+    resetFormData() {
+      this.formData = {
+        'ocId': this.userData.ocId,
+        'goafDevName': '',
+        'goafSensorValue': 0
+        // 'goafDatareportTime': ''
+      }
+    },
+    // 提交
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          createSensorData(this.formData)
+            .then((resp) => {
+              const { code, msg } = resp
+              if (code === 0) {
+                this.dialogVisible = false
+                this.$message.success(msg)
+                this.formSuccess()
+              } else {
+                this.$message.error(msg)
+              }
+            })
+        } else {
+          this.$message.error('error submit!!')
+          return false
+        }
+      })
+    },
+    formSuccess() {
+      this.$emit('formSuccess')
+    },
+    resetFormField(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>

src/views/goaf/liveData/camera.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="content-container camera">
+    <el-row>
+      <el-col :span="12" class="left">
+        <div class="content-title">
+          摄像头配置
+        </div>
+      </el-col>
+      <el-col :span="12" class="right">
+        <el-input v-model="conditions.goafDevName" class="search-input m-right-15" placeholder="请输入设备名称">
+          <el-button slot="append" icon="el-icon-search" @click="getData()" />
+        </el-input>
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 15px;">
+      <div class="card-wrap">
+        <div v-for="(item,index) in 10" :key="index" class="item" @click="showVideo(item)">
+          <el-card :body-style="{ padding: '0px' }">
+            <img src="@/assets/images/video.png">
+          </el-card>
+        </div>
+
+      </div>
+    </el-row>
+    <div v-if="videoDialogVisible" class="video-dialog">
+      <div class="header">
+        <div class="name">{{ video.name }}</div>
+        <div class="close" @click="videoDialogVisible=false"><i class="el-icon-circle-close" /></div>
+      </div>
+      <video id="video" :src="video.src" controls />
+    </div>
+    <div class="pagination-container" style="float:right;margin-right:40px;">
+      <pagination v-show="total>0" :total="total" :page.sync="conditions.page" :limit.sync="conditions.limit" @pagination="getData" />
+    </div>
+  </div>
+</template>
+<script>
+import { getSensorByPage } from '@/api/goaf/sensor'
+import { Pagination } from '@/components'
+import { NumConvertLM } from '@/utils'
+export default {
+  components: { Pagination },
+  data() {
+    return {
+      dataList: [],
+      total: 0,
+      listLoading: false,
+      videoDialogVisible: false,
+      conditions: {
+        page: 1,
+        limit: 10,
+        goafDevName: ''
+      }
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    // fetch data
+    NumConvertLM,
+    getData() {
+      this.listLoading = true
+      getSensorByPage(this.conditions).then((resp) => {
+        this.listLoading = false
+        const { code, msg, data, total } = resp
+        if (code === 0) {
+          this.dataList = data
+          this.total = total
+        } else {
+          this.$message.error(msg)
+        }
+      }).catch((error) => {
+        console.log(error)
+      })
+    },
+    showVideo(item) {
+      this.video = {
+        src: 'https://www.runoob.com/try/demo_source/movie.mp4',
+        name: '{Ⅲ号-770-32008}：封堵口'
+      }
+      this.videoDialogVisible = true
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.card-wrap{
+    display: flex;
+    flex-wrap: wrap;
+    .item{
+        width: 25%;
+        padding: 10px;
+        box-sizing: border-box;
+        img{
+            display: block;
+            width: 100%;
+            height: 200px;
+        }
+    }
+}
+.video-dialog{
+        position: fixed;
+        z-index: 99999;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(5, 25, 51, 0.98);
+        .name{
+            color: #fff;
+            font-size: 20px;
+            line-height:1 ;
+            text-indent: 20px;
+        }
+        .header{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .close{
+                height: 50px;
+                line-height: 50px;
+                display: inline-block;
+                padding: 10px 20px;
+                cursor: pointer;
+                color: #fff;
+                font-size: 36px;
+            }
+        }
+        #video{
+            display: block;
+            width: 80%;
+            max-height: 80vh;
+            box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
+            margin: 10px auto;
+        }
+    }
+</style>

src/views/goaf/liveData/sensor.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="content-container sensor">
+    <el-row class="tool-bar">
+      <el-col :span="12" class="left">
+        <div class="content-title">
+          传感器上报信息
+        </div>
+      </el-col>
+      <el-col :span="12" class="right">
+        <el-input v-model="conditions.goafDevName" class="search-input m-right-15" placeholder="请输入设备名称">
+          <el-button slot="append" icon="el-icon-search" @click="getData()" />
+        </el-input>
+        <el-button type="primary" @click="handleAdd">新增</el-button>
+      </el-col>
+    </el-row>
+    <el-row class="m-top-15">
+      <el-table v-loading="listLoading" class="page-table" border fit :data="dataList">
+        <el-table-column type="index" label="序号" header-align="center" align="center" width="60" />
+        <el-table-column prop="goafDevName" label="设备名称" />
+        <el-table-column prop="goafSensorValue" label="传感器上报数据值" />
+        <el-table-column prop="goafDatareportTime" label="传感器上报数据时间" />
+      </el-table>
+      <div class="pagination-container" style="float:right;margin-right:40px;">
+        <pagination v-show="total>0" :total="total" :page.sync="conditions.page" :limit.sync="conditions.limit" @pagination="getData" />
+      </div>
+    </el-row>
+    <sensor-Model ref="sensor" @formSuccess="getData" />
+  </div>
+</template>
+<script>
+import { getSensorDataByPage } from '@/api/goaf/sensordata.js'
+import { Pagination } from '@/components'
+import sensorModel from './Model'
+export default {
+  components: { Pagination, sensorModel },
+  data() {
+    return {
+      dataList: [],
+      total: 0,
+      listLoading: false,
+      conditions: {
+        page: 1,
+        limit: 10,
+        goafDevName: ''
+      }
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      this.listLoading = true
+      getSensorDataByPage(this.conditions).then((resp) => {
+        this.listLoading = false
+        const { code, msg, data, total } = resp
+        if (code === 0) {
+          this.dataList = data
+          this.total = total
+        } else {
+          this.$message.error(msg)
+        }
+      }).catch((error) => {
+        console.log(error)
+      })
+    },
+    handleAdd() {
+      this.$refs['sensor'].showAddModel()
+    }
+  }
+}
+</script>
+

src/views/goaf/sensor/CameraModel.vue

@@ -0,0 +1,448 @@
+<template>
+  <el-drawer
+    :title="title"
+    :modal-append-to-body="false"
+    :modal="false"
+    :wrapper-closable="false"
+    size="36%"
+    :visible.sync="dialogVisible"
+  >
+    <el-form
+      ref="ruleForm"
+      :model="formData"
+      :rules="rules"
+      label-position="right"
+      label-width="160px"
+    >
+      <el-form-item label="设备名称" required>
+        <el-input
+          v-model="formData.goafDevName"
+          placeholder="请输入设备名称"
+          style="width: 260px"
+        />
+      </el-form-item>
+      <el-form-item label="安装区域" required>
+        <div class="safe-area">
+          <el-select
+            v-model="formData.goafOrebelt"
+            class="safe-area-item"
+            filterable
+            placeholder="矿带"
+            @change="changeArea(1)"
+          >
+            <el-option :value="0" label="请选择矿带" disabled />
+            <el-option
+              v-for="(item, index) in goafOrebelts"
+              :key="index"
+              :value="item.goafOrebelt"
+              :label="item.goafOrebelt"
+            />
+          </el-select>
+          <el-select
+            v-model="formData.goafOrebody"
+            class="safe-area-item"
+            filterable
+            placeholder="矿体"
+            @change="changeArea(2)"
+          >
+            <el-option :value="0" label="请选择矿体" disabled />
+            <el-option
+              v-for="(item, index) in goafOrebodys"
+              :key="index"
+              :value="item.goafOrebody"
+              :label="item.goafOrebody"
+            />
+          </el-select>
+          <el-select
+            v-model="formData.goafOreheight"
+            class="safe-area-item"
+            filterable
+            placeholder="中段"
+            @change="changeArea(3)"
+          >
+            <el-option :value="0" label="请选择中段" disabled />
+            <el-option
+              v-for="(item, index) in goafOreheights"
+              :key="index"
+              :value="item.goafOreheight"
+              :label="item.goafOreheight"
+            />
+          </el-select>
+          <el-select
+            v-model="formData.goafId"
+            class="safe-area-item"
+            filterable
+            placeholder="采空区名称"
+            @change="changeArea(4)"
+          >
+            <el-option :value="0" label="请选择采空区" disabled />
+            <el-option
+              v-for="item in goafNames"
+              :key="item.goafId"
+              :value="item.goafId"
+              :label="item.goafName"
+            />
+          </el-select>
+        </div>
+      </el-form-item>
+      <el-form-item label="安装地点" required>
+        <el-input v-model="formData.goafDevLocation" placeholder="请输入安装地点" style="width:260px" />
+      </el-form-item>
+      <el-form-item label="设备类型" required>
+        <el-select
+          v-model="formData.goafDevTypeId"
+          style="width: 260px"
+        >
+          <el-option
+            v-for="item in sensorCats"
+            :key="item.sensorTypeId"
+            :value="item.sensorTypeId"
+            :label="item.sensorTypeName"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="设备安装时间">
+        <el-date-picker
+          v-model="formData.goafInstallTime"
+          type="date"
+          placeholder="设备安装时间"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          style="width: 260px"
+        />
+      </el-form-item>
+      <el-form-item label="设备负责人部门">
+        <el-cascader
+          v-model="formData.goafDevGroupid"
+          :options="treeData"
+          :props="{ checkStrictly: true, emitPath: false }"
+          style="min-width: 260px"
+          filterable
+          clearable
+          @change="handleChange"
+        >
+          <template slot-scope="{ node, data }">
+            <span>{{ data.label }}</span>
+            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+          </template>
+        </el-cascader>
+      </el-form-item>
+      <el-form-item label="责任人员" prop="executeAccountId">
+        <el-select v-model="formData.goafDevAccountId" style="width:260px" filterable clearable @change="handleUserSelect">
+          <el-option v-for="item in userList" :key="item.accountId" :value="item.accountId" :label="item.accountName" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="btn-group">
+      <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
+      <el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
+    </div>
+  </el-drawer>
+</template>
+<script>
+import { toTree } from '@/utils/build-tree'
+import { getGroupByList } from '@/api/system/groupApi'
+import { getUserByPage } from '@/api/system/userApi'
+import { getSensorCat } from '@/api/goaf/sensorCatApi'
+import { getGoafBaseInfo } from '@/api/goaf/info'
+import { createSensor, updateSensor } from '@/api/goaf/sensor'
+export default {
+  name: 'CameraModel',
+  data() {
+    return {
+      title: '摄像头配置',
+      ops: {
+        bar: {
+          keepShow: false,
+          background: 'rgba(144, 147, 153, 0.4)',
+          onlyShowBarOnScroll: false
+        }
+      },
+      dialogVisible: false,
+      sensorCats: [],
+      goaf: [],
+      formData: {
+        goafOrebelt: 0,
+        goafOrebody: 0,
+        goafOreheight: 0,
+        goafId: 0,
+        goafName: '',
+        goafDevLocation: '',
+        ocId: undefined,
+        goafDevName: '',
+        goafDevTypename: '',
+        goafDevTypeId: '',
+        goafDevAccountId: undefined,
+        goafDevGroupid: '',
+        goafDevAccountName: '',
+        goafInstallTime: ''
+      },
+      rules: {},
+      ctrlLevelList: [],
+      positionList: [],
+      viewData: {},
+      actionType: '',
+      treeData: [],
+      userList: [],
+      goafOrebelts: [],
+      goafOrebodys: [],
+      goafOreheights: [],
+      goafNames: [],
+      groupList: []
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      getSensorCat().then((res) => {
+        this.sensorCats = res.data.filter(item => item.sensorTypeName.includes('摄像头'))
+      })
+      getGoafBaseInfo().then((res) => {
+        this.goaf = res.data
+        this.goafOrebelts = res.data
+        this.goafOrebodys = res.data
+        this.goafOreheights = res.data
+        this.goafNames = res.data
+      })
+      getGroupByList().then((resp) => {
+        const { code, data } = resp
+        if (code === 0) {
+          const temp = toTree(
+            data,
+            {
+              value: 'value',
+              name: 'label',
+              pValue: 'parentId'
+            },
+            {
+              value: 'groupId',
+              name: 'groupName',
+              pValue: 'parentId'
+            }
+          )
+          this.treeData = temp
+          this.groupList = data
+        }
+      })
+      getUserByPage({
+        page: 1,
+        limit: 999999
+      }).then((resp) => {
+        const { data } = resp
+        this.userList = data
+      })
+    },
+    handleChange(groupId) {
+      this.formData.goafDevAccountId = ''
+      this.formData.goafDevAccountName = ''
+      getUserByPage({
+        page: 1,
+        limit: 999999,
+        keyword: '',
+        groupId
+      }).then((resp) => {
+        const { data } = resp
+        this.userList = data
+      })
+    },
+    changeArea(type) {
+      const goafOrebelts = this.deeepClone(this.goafOrebelts)
+      let goafOrebodys = this.deeepClone(this.goafOrebodys)
+      let goafOreheights = this.deeepClone(this.goafOreheights)
+      let goafNames = this.deeepClone(this.goafNames)
+      if (type === 1) {
+        goafOrebodys = goafOrebelts.filter(
+          (item) => item.goafOrebelt === this.formData.goafOrebelt
+        )
+        // goafOrebodys = this.unique(goafOrebodys, 'goafOrebelt')
+        this.goafOrebodys = goafOrebodys
+        this.goafOreheights = []
+        this.goafNames = []
+        this.formData.goafOrebody = ''
+        this.formData.goafOreheight = ''
+        this.formData.goafId = ''
+      } else if (type === 2) {
+        goafOreheights = goafOrebodys.filter(
+          (item) => item.goafOrebody === this.formData.goafOrebody
+        )
+        // goafOreheights = this.unique(goafOreheights, 'goafOreheight')
+        this.goafOreheights = goafOreheights
+        this.goafNames = []
+        this.formData.goafOreheights = ''
+        this.formData.goafId = ''
+      } else if (type === 3) {
+        goafNames = goafOreheights.filter(
+          (item) => item.goafOreheight === this.formData.goafOreheight
+        )
+        // goafNames = this.unique(goafNames, 'goafName')
+        this.goafNames = goafNames
+        this.formData.goafId = ''
+      } else {
+        for (let i = 0; i < goafNames.length; i++) {
+          if (this.formData.goafId === goafNames[i].goafId) {
+            this.formData.goafName = goafNames[i].goafName
+          }
+        }
+      }
+      this.$forceUpdate()
+    },
+    // Show Add Dialog
+    showAddModel() {
+      this.resetFormData()
+      this.actionType = 'ADD'
+      this.title = '新增摄像头配置'
+      this.dialogVisible = true
+    },
+
+    // Show Edit Dialog
+    showEditModel(data) {
+      this.resetFormData()
+      this.actionType = 'UPDATE'
+      this.title = '修改摄像头配置'
+      this.dialogVisible = true
+      // Life minus one
+      const sensorCat = this.sensorCats.filter(
+        (item) => item.sensorTypeName === data.goafDevTypename
+      )[0]
+      this.formData = {
+        ...data,
+        goafDevTypeId: sensorCat.sensorTypeId
+      }
+    },
+
+    // Reset Form Data
+    resetFormData() {
+      this.formData = {
+        goafOrebelt: 0,
+        goafOrebody: 0,
+        goafOreheight: 0,
+        goafId: 0,
+        goafName: '',
+        goafDevLocation: '',
+        ocId: undefined,
+        goafDevName: '',
+        goafDevTypename: '',
+        goafDevAccountId: undefined,
+        goafDevAccountName: '',
+        goafInstallTime: '',
+        goafDevGroupid: ''
+      }
+    },
+    handleUserSelect(accountId) {
+      const item = this.userList.filter((item) => item.accountId === accountId)
+      const user = item[0]
+      this.formData.groupId = user.groupId
+      this.formData.goafDevGroupname = user.groupName
+      this.formData.goafDevAccountName = user.accountName
+      this.formData.positionId = user.positionId
+      this.formData.positionName = user.positionName
+    },
+    // 提交
+    submitForm(formName) {
+      this.formData.goafDevGroupname = this.groupList.filter(item => item.groupId === this.formData.goafDevGroupid)[0].groupName
+      const sensorCat = this.sensorCats.filter(
+        (item) => item.sensorTypeId === this.formData.goafDevTypeId
+      )[0]
+      this.formData.goafDevTypename = sensorCat.sensorTypeName
+      this.formData.ocId = sensorCat.ocId
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (
+            this.formData.goafId === undefined ||
+            this.formData.goafId === 'undefined' ||
+            this.formData.goafId === ''
+          ) {
+            this.$message.error('请选择采空区！')
+            return
+          }
+          switch (this.actionType) {
+            case 'ADD':
+              createSensor(this.formData)
+                .then((resp) => {
+                  const { code, msg } = resp
+                  if (code === 0) {
+                    this.dialogVisible = false
+                    this.$message.success(msg)
+                    this.formSuccess()
+                  } else {
+                    this.$message.error(msg)
+                  }
+                })
+                .catch((error) => {
+                  console.log(error)
+                })
+              break
+
+            case 'UPDATE':
+              updateSensor(this.formData)
+                .then((resp) => {
+                  const { code, msg } = resp
+                  if (code === 0) {
+                    this.dialogVisible = false
+                    this.$message.success(msg)
+                    this.formSuccess()
+                  } else {
+                    this.$message.error(msg)
+                  }
+                })
+                .catch((error) => {
+                  console.log(error)
+                })
+              break
+          }
+        } else {
+          this.$message.error('error submit!!')
+          return false
+        }
+      })
+    },
+    handleSelectUser(item) {
+      console.log({ item })
+    },
+    formSuccess() {
+      this.$emit('formSuccess')
+    },
+    resetFormField(formName) {
+      this.$refs[formName].resetFields()
+    },
+    unique(arr = [], name = 'name') {
+      const res = new Map()
+      return arr.filter((item) => !res.has(item[name]) && res.set(item[name], 1))
+    },
+    deeepClone(params) {
+      return JSON.parse(JSON.stringify(params))
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.btn-group {
+  padding-left: 160px;
+  margin-top: 50px;
+}
+.safe-area {
+  color: #fff;
+  display: flex;
+  flex-wrap: wrap;
+  .safe-area-item {
+    margin: 0 5px 10px 0;
+    width: 20%;
+    min-width: 120px;
+  }
+  .el-input__inner {
+    text-align: left !important;
+  }
+}
+::v-deep.el-select-tree {
+  .label {
+    color: #606266 !important;
+  }
+  .el-tree-node.is-current > .el-tree-node__content,
+  .el-tree-node__content:hover {
+    background-color: #fff !important;
+    color: #606266;
+  }
+}
+</style>

src/views/goaf/sensor/Model.vue

@@ -95,7 +95,6 @@
         <el-select
           v-model="formData.goafDevTypeId"
           style="width: 260px"
-          @change="changeSensorCat"
         >
           <el-option
             v-for="item in sensorCats"
@@ -202,7 +201,7 @@ export default {
   methods: {
     init() {
       getSensorCat().then((res) => {
-        this.sensorCats = res.data
+        this.sensorCats = res.data.filter(item => item.sensorTypeName.includes('传感器'))
       })
       getGoafBaseInfo().then((res) => {
         this.goaf = res.data
@@ -304,7 +303,6 @@ export default {
     // Show Edit Dialog
     showEditModel(data) {
       this.resetFormData()
-      this.formData = data
       this.actionType = 'UPDATE'
       this.title = '修改传感器配置'
       this.dialogVisible = true
@@ -312,7 +310,10 @@ export default {
       const sensorCat = this.sensorCats.filter(
         (item) => item.sensorTypeName === data.goafDevTypename
       )[0]
-      this.formData.goafDevTypeId = sensorCat.sensorTypeId
+      this.formData = {
+        ...data,
+        goafDevTypeId: sensorCat.sensorTypeId
+      }
     },
 
     // Reset Form Data
@@ -346,6 +347,11 @@ export default {
     // 提交
     submitForm(formName) {
       this.formData.goafDevGroupname = this.groupList.filter(item => item.groupId === this.formData.goafDevGroupid)[0].groupName
+      const sensorCat = this.sensorCats.filter(
+        (item) => item.sensorTypeId === this.formData.goafDevTypeId
+      )[0]
+      this.formData.goafDevTypename = sensorCat.sensorTypeName
+      this.formData.ocId = sensorCat.ocId
       this.$refs[formName].validate((valid) => {
         if (valid) {
           if (
@@ -406,13 +412,6 @@ export default {
     resetFormField(formName) {
       this.$refs[formName].resetFields()
     },
-    changeSensorCat() {
-      const sensorCat = this.sensorCats.filter(
-        (item) => item.sensorTypeId === this.formData.goafDevTypeId
-      )[0]
-      this.formData.goafDevTypename = sensorCat.sensorTypeName
-      this.formData.ocId = sensorCat.ocId
-    },
     unique(arr = [], name = 'name') {
       const res = new Map()
       return arr.filter((item) => !res.has(item[name]) && res.set(item[name], 1))

src/views/goaf/sensor/camera.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="content-container sensor">
+    <el-row class="tool-bar">
+      <el-col :span="12" class="left">
+        <div class="content-title">
+          摄像头配置
+        </div>
+      </el-col>
+      <el-col :span="12" class="right">
+        <el-input v-model="conditions.goafDevName" class="search-input m-right-15" placeholder="请输入设备名称">
+          <el-button slot="append" icon="el-icon-search" @click="getData()" />
+        </el-input>
+        <el-button type="primary" @click="handleAdd">新增</el-button>
+      </el-col>
+    </el-row>
+
+    <el-row class="m-top-15">
+      <el-table v-loading="listLoading" class="page-table" border fit :data="dataList">
+        <el-table-column type="index" label="序号" header-align="center" align="center" width="60" />
+        <el-table-column prop="goafDevName" label="设备名称" />
+        <el-table-column label="安装区域">
+          <template v-slot="{row}">
+            <span>{{ NumConvertLM(row.goafOrebelt) }}-{{ row.goafOrebody }}-{{ row.goafOreheight }}-{{ row.goafName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="goafDevLocation" label="安装地点" />
+        <el-table-column prop="goafDevTypename" label="设备类型" />
+        <el-table-column prop="goafDevGroupname" label="设备负责人部门" />
+        <el-table-column prop="goafDevAccountName" label="设备责任人" />
+        <el-table-column prop="goafInstallTime" label="安装时间" />
+        <el-table-column label="操作" header-align="center" align="center" width="170">
+          <template v-slot="{row}">
+            <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleUpdate(row)">修改</el-button>
+            <el-button size="mini" type="danger" icon="el-icon-edit" @click="handleDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination-container" style="float:right;margin-right:40px;">
+        <pagination v-show="total>0" :total="total" :page.sync="conditions.page" :limit.sync="conditions.limit" @pagination="getData" />
+      </div>
+    </el-row>
+    <camera-Model ref="sensor" @formSuccess="getData" />
+  </div>
+</template>
+<script>
+import { getSensorByPage, delSensor } from '@/api/goaf/sensor'
+import { Pagination } from '@/components'
+import { NumConvertLM } from '@/utils'
+import CameraModel from './CameraModel.vue'
+export default {
+  components: { Pagination, CameraModel },
+  data() {
+    return {
+      dataList: [],
+      total: 0,
+      listLoading: false,
+      conditions: {
+        page: 1,
+        limit: 10,
+        goafDevName: ''
+      }
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    // fetch data
+    NumConvertLM,
+    getData() {
+      this.listLoading = true
+      getSensorByPage(this.conditions).then((resp) => {
+        this.listLoading = false
+        const { code, msg, data, total } = resp
+        if (code === 0) {
+          this.dataList = data
+          this.total = total
+        } else {
+          this.$message.error(msg)
+        }
+      }).catch((error) => {
+        console.log(error)
+      })
+    },
+    // "Add Risk" Model
+    handleAdd() {
+      this.$refs['sensor'].showAddModel('摄像头')
+    },
+
+    // "Edit Risk" Model
+    handleUpdate(data) {
+      this.$refs['sensor'].showEditModel(JSON.parse(JSON.stringify(data)))
+    },
+
+    // Delete Action
+    handleDelete(data) {
+      const { typeId, riskSource } = data
+      this.$confirm(`此操作将删除该数据${riskSource}, 是否继续?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        delSensor(typeId).then((resp) => {
+          const { code, msg } = resp
+          if (code === 0) {
+            this.getData()
+            this.$message.success(msg)
+          } else {
+            this.$message.error(msg)
+          }
+        }).catch((error) => {
+          console.log(error)
+        })
+      }).catch(() => {
+        this.$message.info('已取消删除')
+      })
+    }
+  }
+}
+</script>
+

src/views/goaf/sensor/index.vue

@@ -84,9 +84,8 @@ export default {
         console.log(error)
       })
     },
-    // "Add Risk" Model
     handleAdd() {
-      this.$refs['sensor'].showAddModel()
+      this.$refs['sensor'].showAddModel('传感器')
     },
 
     // "Edit Risk" Model