admin-fiveFollowing/src/views/alarmManage/alarmTotal.vue

<template>
  <div class="app-container">
    <!-- 返回start -->
    <div class="siteTitle">
      <el-button class="goBack" @click="goBack">返回</el-button>
      站点【{{alarmGradeList.siteName}}】{{
        alarmGradeList.type == 0
          ? '总数'
          : alarmGradeList.type == 1
          ? '一级告警'
          : alarmGradeList.type == 2
          ? '二级告警'
          : alarmGradeList.type == 3
          ? '其它'
          : ''
      }}
    </div>
    <!-- 返回end -->

    <!-- 表格start -->
    <el-table
      :data="tableData"
      border
      stripe
      :header-cell-style="headClass"
      :cell-style="cellStyle"
    >
      <el-table-column
        fixed
        prop="soeTime"
        label="发生时间"
        width=""
      ></el-table-column>
      <el-table-column
        prop="measDesc"
        label="测点描述"
        width=""
      ></el-table-column>
      <el-table-column
        prop="alarmName"
        label="告警名称"
        width=""
      ></el-table-column>
      <el-table-column
        prop="alarmType"
        label="告警类型"
        width=""
      ></el-table-column>
      <el-table-column prop="check" label="详情" width="">
        <template #default="scope">
          <span @click="checkItem_addItem(scope.row)">查看</span>
        </template>
      </el-table-column>
      <el-table-column prop="eddl" label="状态" width="">
        <template #default="scope">
          <span
            :style="{
              color:
                scope.row.handlingStatus == 1
                  ? '#8DCF6E'
                  : scope.row.handlingStatus == 2
                  ? '#FF747B'
                  : '#5c88fa',
            }"
          >
            {{
              scope.row.handlingStatus == 0
                ? '未处理'
                : scope.row.handlingStatus == 1
                ? '已处理'
                : scope.row.handlingStatus == 2
                ? '待确认'
                : scope.row.handlingStatus == 3
                ? '自动恢复'
                : '过期失效'
            }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->

    <!-- 分页start -->
    <div class="paginationBlock">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 20, 25, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 分页end -->

    <!--弹框组件开始-----------------------start-->
    <dialog-component
      :show_Dialog="showDialog"
      :dialog-title="dialogTitle"
      :item-info="tableItem"
      @closeDialog="closeDialog"
      @listSelect="listSelect"
    ></dialog-component>
    <!--弹框组件开始-----------------------end-->
  </div>
</template>

<script>
import dialogComponent from './dialogComponent'
// import { useStore } from 'vuex'
import { defineComponent, onMounted, ref } from 'vue'
import * as api from '@/api/alarmManage/index'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'AlarmTotal',
  props: {
    pageShow: Boolean,
    alarmGradeList: Object,
  },
  components: { dialogComponent },
  setup(props, { emit }) {
    // const store = useStore()

    const total = ref(0)
    const pageSize = ref(15)
    const currentPage = ref(1)
    const tableData = ref([])
    const showDialog = ref(false)

    const dialogTitle = ref('')
    const tableItem = ref([])

    //查询
    function listSelect() {
      api
        .alarmGradeList({
          // siteId: store.state.siteId,
          siteId:props.alarmGradeList.siteId,
          startTime: props.alarmGradeList.startTime,
          endTime: props.alarmGradeList.endTime,
          size: pageSize.value,
          current: currentPage.value,
          type: props.alarmGradeList.type,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            total.value = requset.data.total
            tableData.value = requset.data.records
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    // 查看操作
    const checkItem_addItem = (row) => {
      tableItem.value = row
      dialogTitle.value = '告警详情'
      showDialog.value = true
    }

    //查看///添加操作
    const handleClick = (row) => {
      alert('查看对应站点（页面跳转）')
      console.log(row)
    }

    onMounted(() => {
      listSelect()
    })

    //关闭弹窗
    const closeDialog = (flag) => {
      showDialog.value = flag
    }
    
    //返回
    const goBack = () => {
      emit('func')
    }
    //条数
    const handleSizeChange = (val) => {
      pageSize.value = val
      listSelect()
    }
    //页数
    const handleCurrentChange = (val) => {
      currentPage.value = val
      listSelect()
    }
    //自定义列样式
    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
      row, column, rowIndex
      // console.log(row, column, rowIndex)
      if (columnIndex === 4) {
        return `color:#1187FF;cursor:pointer`
      } else {
        return ''
      }
    }
    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA;'
    }
    return {
      handleSizeChange,
      handleCurrentChange,
      goBack,
      checkItem_addItem,
      headClass,
      cellStyle,
      handleClick,
      listSelect,
      closeDialog,

      showDialog,
      input: '请输入发生时间',

      total,
      pageSize,
      currentPage,
      tableData,

      dialogTitle,
      tableItem,
    }
  },
})
</script>

<style lang='scss' scoped>
</style>