index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="68px">
      
      <el-form-item label="日期查询">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
   
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        
      </el-form-item>
    </el-form> 
    <el-table v-loading="loading" :data="ALARMDATAList" >
      <el-table-column v-if="labelName.perName" :label="labelName.perName" align="center" prop="perName" />
      <el-table-column v-if="labelName.cardNumber" :label="labelName.cardNumber" align="center" prop="cardNumber" />
      <el-table-column v-if="labelName.departName" :label="labelName.departName" align="center" prop="departName" />
      <el-table-column v-if="labelName.stationId" :label="labelName.stationId" align="center" prop="stationId" />
      <el-table-column v-if="labelName.stationName" :label="labelName.stationName" align="center" prop="stationName" />
      <el-table-column v-if="labelName.actionID" :label="labelName.actionID" align="center" prop="actionID" />
      <el-table-column v-if="labelName.location" :label="labelName.location" align="center" prop="location" />
      <el-table-column v-if="labelName.areaName" :label="labelName.areaName" align="center" prop="areaName" />
      <el-table-column v-if="labelName.entryTime" :label="labelName.entryTime" align="center" prop="entryTime" />
      <el-table-column v-if="labelName.reason" :label="labelName.reason" align="center" prop="reason" />
      <el-table-column v-if="labelName.alarmTime" :label="labelName.alarmTime" align="center" prop="alarmTime" />
      <el-table-column v-if="labelName.overCapacityCount" :label="labelName.overCapacityCount" align="center" prop="overCapacityCount" />
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { perAlarmHistory } from "@/api/tyler/perHis";
import { listData } from "@/api/system/dict/data";
// import { personAlarmDataEdit } from "@/api/underPosition/personAlarm";
// import {  getALARMDATA,updateALARMDATA } from "@/api/underPosition/areaAlarm";
// import { listDept } from "@/api/system/dept";

export default {
  name: "myname",
  dicts: ['per_alarm_type'],
  components: {},
  props: [],
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        alarmType:'6',
        cardNumber: null,
        departId: null,
        positionId: null,
        jobTypeId: null,
      },
      //查看人员
      openPerson:false,
      loading:false,
      activeName: '1',
      navName:[],
      ONLINEDATAList:[],
      // 矿山区域监测报警数据表格数据
      ALARMDATAList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [
          { required: true, message: "唯一标识符不能为空", trigger: "blur" }
        ],
      },
      personData:[],
      labelName:{
        perName:'姓名',
        cardNumber:'卡号',
        departName:'部门',
        location:'所在位置',
        entryTime:'入井时间',
        alarmTime:'报警时间',
      },
      // 日期范围
      dateRange: [],
      total:0,
    };
  },
  watch: {},
  created() {
    this.$nextTick(function () {
      this.getTagname()
    });
  },
  mounted() {
    this.$nextTick(function () {

      this.getList()
      // this.listRList('1')
    });
  },
  methods: {
    getList(){
      perAlarmHistory(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
        this.ALARMDATAList = res.rows
        this.total = res.total||0;
      })
    },
    getTagname(){
      listData({dictType:'per_alarm_type'}).then(res => {
        this.navName = res.rows;
      })
    },
    handleClick(tab, event) {
      console.log(tab,'handleClick')
      // this.ONLINEDATAList = [];
      this.activeName = tab.paneName;
      this.getList(tab.paneName)
      if(tab.paneName == 1){
        this.labelName = {
          perName:'姓名',
          cardNumber:'卡号',
          departName:'部门',
          location:'所在位置',
          entryTime:'入井时间',
          reason:null,
          alarmTime:'报警时间',
          actionID:null,
          overCapacityCount:null,
          areaName:null,
          stationId:null,
          stationName:null,
        }
      }else if(tab.paneName == 2){
        this.labelName = {
          perName:'姓名',
          cardNumber:'卡号',
          departName:'部门',
          location:null,
          entryTime:null,
          reason:null,
          alarmTime:'报警时间',
          actionID:'动作',
          overCapacityCount:'超员人数',
          areaName:'区域名称',
          stationId:null,
          stationName:null,

        }
      }else if(tab.paneName == 3){
        this.labelName = {
          perName:null,
          cardNumber:null,
          departName:null,
          location:'安装位置',
          entryTime:null,
          reason:'原因',
          alarmTime:'报警时间',
          overCapacityCount:null,
          actionID:null,
          areaName:null,
          stationId:'分站编号',
          stationName:'分站名称',

        }
      }else if(tab.paneName == 4){
        this.labelName = {
          perName:'姓名',
          cardNumber:'卡号',
          departName:'部门',
          location:'分站位置',
          entryTime:null,
          reason:null,
          alarmTime:'报警时间',
          overCapacityCount:null,
          actionID:null,
          stationId:'分站编号',
          stationName:null,
          areaName:'限制区名称',

        }
      }else if(tab.paneName == 5){
        this.labelName = {
          perName:'姓名',
          cardNumber:'卡号',
          departName:'部门',
          location:null,
          entryTime:null,
          reason:null,
          alarmTime:'报警时间',
          overCapacityCount:null,
          actionID:null,
          stationId:null,
          stationName:null,
          areaName:'未到达区域名称',

        }
      }else if(tab.paneName == 6){
        this.labelName = {
          perName:'姓名',
          cardNumber:'卡号',
          departName:'部门',
          location:'报警位置',
          entryTime:null,
          reason:null,
          alarmTime:'报警时间',
          overCapacityCount:null,
          actionID:null,
          stationId:null,
          stationName:null,
          areaName:null,

        }
      }
    },
    /**查看人员*/
    handleViewPerson(row){
      getALARMDATA(row.regionId).then(res => {
        this.openPerson = true;
        this.personData = res.data
      })
      
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        alarmClearTime: null,
        relieveDuration: null,
      };
      this.resetForm("form");
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.form.id = row.id
      this.open = true;
      this.title = "处理报警数据";
    },
    /** 提交按钮 */
    submitForm() {
      let that = this;
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null && Number(this.activeName)<5) {
            personAlarmDataEdit(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.listRList(that.activeName);
            });
          }else if (this.form.id != null && Number(this.activeName)>4) {
            updateALARMDATA(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.listRList(that.activeName);
            });
          } else {
            this.open = false;
            // addONLINEDATA(this.form).then(response => {
            //   this.$modal.msgSuccess("新增成功");
            //   this.open = false;
            //   this.getList();
            // });
          }
        }
      });
    },
  },
};
</script>