报警提醒

dcit-hcsystem-hcsystem-master/src/views/Layout/Content.vue

@@ -24,16 +24,94 @@
         </el-main>
       </el-container>
     </el-container>
+    <!--<alarminfo :dialogVisible="dialogVisible"  :title="dialogTit" @dialogFun="closeDialog" :key="zjKey"></alarminfo>-->
+  <!-- :editForm="formData" @refreshTableData="getTableData" -->
+    <el-dialog
+            :visible.sync="dialogVisible"
+            :title="title"
+            :show-close="false"
+            :close-on-click-modal="false"
+    >
+      <el-table :data="tableData.pageData" stripe style="width:100%;min-height: 400px" :loading="loading">
+        <el-table-column width="50" type="index" label="序号"></el-table-column>
+        <el-table-column prop="unitName" label="企业名称"></el-table-column>
+        <el-table-column prop="deviceName" label="设备名称"></el-table-column>
+
+        <el-table-column prop="alarmInfo" label="预警信息">
+          <template slot-scope="scope">
+            <font class="dg">{{scope.row.alarmInfo}}</font>
+          </template>
+        </el-table-column>
+        <el-table-column prop="alarmTime" label="预警时间"></el-table-column>
+        <el-table-column prop="dangerGrade" label="预警等级" width="80px"></el-table-column>
+
+        <!--<el-table-column prop="handleType" label="消除类型">-->
+        <!--<template slot-scope="scope">-->
+        <!--<font v-if="scope.row.handleType == 0">-->
+        <!--<span class="mark none">未处理</span>-->
+        <!--</font>-->
+        <!--<font v-if="scope.row.handleType == 1">-->
+        <!--<span class="mark auto">自动消警</span>-->
+        <!--</font>-->
+        <!--<font v-if="scope.row.handleType == 2">-->
+        <!--<span class="mark handle">手动消警</span>-->
+        <!--</font>-->
+        <!--</template>-->
+        <!--</el-table-column>-->
+        <el-table-column prop="contacts" label="联系人" width="80px"></el-table-column>
+        <el-table-column prop="phone" label="联系电话" width="120px"></el-table-column>
+        <!--<el-table-column label="操作" width="170">-->
+        <!--<template slot-scope="scope">-->
+        <!--<el-button-->
+        <!--type="warning"-->
+        <!--size="small"-->
+        <!--@click="handle(scope.row)"-->
+        <!--v-if="scope.row.handleType == 0"-->
+        <!--&gt;-->
+        <!--<i class="el-icon-bell"></i>手动消警-->
+        <!--</el-button>-->
+        <!--</template>-->
+        <!--</el-table-column>-->
+      </el-table>
+      <el-pagination
+              background
+              layout="total,sizes, prev, pager, next, jumper"
+              :total="tableData.total"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="PAGE.page"
+              :page-size="PAGE.size"
+      ></el-pagination>
+
+      <div class="division">
+        <div style="width: 85%"></div>
+        <el-button  @click="stop()" size="small">关闭警报</el-button>
+        <el-button  @click="closeDialog()" size="small">关闭</el-button>
+      </div>
+      <video  hidden="hidden" id="music" loop   autoplay controls="controls" src="@/assets/4031.wav"></video>
+    </el-dialog>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Provide, Watch } from "vue-property-decorator";
+import METHOD from "@/utils/methods";
 @Component({
-  components: {},
+  components: {
+
+  },
 })
 export default class Content extends Vue {
   @Provide() breadcrumnItems: any = [];
+    //编辑组件
+    @Provide() dialogVisible: Boolean = false;
+    @Provide() zjKey: any = 0;
+    @Provide() title: String = "报警";
     @Provide() iszk: boolean = true;
+    @Provide() PAGE: any = { page: 1, size: 10 };
+    @Provide() enterpriseId:string = '';
+    @Provide() searchData: any = { alarmStatus: 0 };
+    @Provide() tableData: Object = { pageData: [], total: 0 };
+    @Provide() loading: Boolean = false;
   @Watch("$route") handleRouteChange(router: any): any {
     this.inintBreadcrum(router);
   } //监听当前路由变化的时候返回数据
@@ -59,8 +137,59 @@ export default class Content extends Vue {
   toggleNavWi() {
     this.iszk = !this.iszk;
   }
+    closeDialog() {
+        //关闭窗口
+        document.getElementById("music").pause();
+        this.dialogVisible = false;
+        //this.formData = {};
+    }
+    handleSizeChange(val: any) {
+        this.PAGE.size = val;
+        this.getTableData();
+    }
+    handleCurrentChange(val: any) {
+        this.PAGE.page = val;
+        this.getTableData();
+    }
+    baoFun() {
+        let that = this,
+            param = Object.assign({enterpriseId: that.enterpriseId}, that.PAGE, that.searchData);
+        METHOD.axiosPost(that, `/alarmInfo/getAlarmInfoList`, param, function(
+            res: any
+        ) {
+            if (res.code == 0) {
+
+                if(res.data.total!=0&&res.data.total > that.tableData.total){
+                    that.tableData = res.data;
+                    that.dialogTit = "报警";
+                    that.zjKey++;
+                    that.dialogVisible = true;
+                    that.$nextTick(() => {
+                        document.getElementById("begin").click()
+                        // /that.start();
+                    })
+                }else if(that.tableData.total>res.data.total){
+                    that.tableData = res.data;
+                }
+            }
+        });
+
+    }
+    start(){
+        document.getElementById("music").play();
+    }
+    stop(){
+        document.getElementById("music").pause();
+    }
   created() {
     this.inintBreadcrum(this.$route);
+     var that = this;
+    //   setTimeout(function(){
+    //       that.baoFun();
+    //   },1000);
+      setInterval(function(){
+          that.baoFun();
+      },3000);
   }
 }
 </script>
@@ -113,3 +242,13 @@ span.flex {
   }
 }
 </style>
+<style lang="scss" scoped>
+  ::v-deep .el-dialog{
+    width: 60%;
+  }
+  .division{
+    display:flex;
+    flex-direction:row;
+    justify-content:flex-start;
+  }
+</style>
\ No newline at end of file