kd-aiot-frontend-ems/src/views/useEnergyWarning/index.vue

<template>
  <div class="energy-warning">
    <el-card shadow="never" class="warning-card">
      <!-- 顶部统计卡片 -->
      <!-- <div class="statistics-cards">
        <el-row :gutter="15">
          <el-col :span="4">
            <div class="stat-card" style="background: #f9f1ff">
              <div class="stat-icon blue">
                <i class="el-icon-warning-outline"></i>
              </div>
              <div class="stat-content">
                <div class="stat-label">总用能告警次数</div>
                <div class="stat-value">{{ statistics.total }}<span class="unit">次</span></div>
                <div class="stat-trend up">同比昨日 +2.3% <span class="trend-icon up-icon">↗</span></div>
              </div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="stat-card" style="background: #eafdfb">
              <div class="stat-content">
                <div class="stat-label">告警未解除数量</div>
                <div class="stat-value">{{ statistics.unresolved }}<span class="unit">次</span></div>
                <div class="stat-trend up">同比昨日 +2.3% <span class="trend-icon up-icon">↗</span></div>
              </div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="stat-card" style="background: #f0f5ff">
              <div class="stat-content">
                <div class="stat-label">告警解除率</div>
                <div class="stat-value">{{ statistics.resolutionRate }}<span class="unit">%</span></div>
                <div class="stat-trend down">同比昨日 -2.3% <span class="trend-icon down-icon">↘</span></div>
              </div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="stat-card" style="background: #f7f1ff">
              <div class="stat-content">
                <div class="stat-label">本周告警次数</div>
                <div class="stat-value">{{ statistics.week }}<span class="unit">次</span></div>
                <div class="stat-trend up">同比上周 +2.3% <span class="trend-icon up-icon">↗</span></div>
              </div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="stat-card" style="background: #fdf9ea">
              <div class="stat-content">
                <div class="stat-label">本月告警数量</div>
                <div class="stat-value">{{ statistics.month }}<span class="unit">次</span></div>
                <div class="stat-trend up">同比上月 +2.3% <span class="trend-icon up-icon">↗</span></div>
              </div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="stat-card" style="background: #fbfff0">
              <div class="stat-content">
                <div class="stat-label">本年告警数量</div>
                <div class="stat-value">{{ statistics.year }}<span class="unit">次</span></div>
                <div class="stat-trend up">同比去年 +2.3% <span class="trend-icon up-icon">↗</span></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div> -->

      <!-- 搜索区域 -->
      <div class="search-area">
        <seek-page
          :seekList="seekList"
          @search="handleSearch"
          @reset="handleReset"
          :maxLength="4"
          style="flex: 1"
        >
        </seek-page>
      </div>

      <!-- 列表视图 -->
      <div class="list-view">
        <ele-pro-table
          :page-size="defPageSize"
          ref="table"
          row-key="id"
          :columns="columns"
          :datasource="datasource"
          :cache-key="cacheKeyUrl"
          autoAmendPage
          height="calc(100vh - 350px)"
        >
          <template v-slot:code="{ row }">
            <el-link
              type="primary"
              :underline="false"
              @click="handleProcess(row, 'view')"
            >
              {{ row.code }}
            </el-link>
          </template>
          <template v-slot:warningLevel="{ row }">
            <el-tag
              :type="getWarningLevelType(row.warningLevel)"
              size="small"
              effect="dark"
            >
              {{ getWarningLevelText(row.warningLevel) }}
            </el-tag>
          </template>
          <template v-slot:action="{ row }">
            <!-- <el-link
              type="primary"
              :underline="false"
              @click="handleProcess(row)"
              >接收</el-link
            > -->
            <el-link
              type="primary"
              :underline="false"
              v-if="row.handleStatus != 2"
              @click="handleProcess(row, 'edit')"
              >处理</el-link
            >
            <!-- <el-link
              type="primary"
              :underline="false"
              @click="handleTransfer(row)"
              style="margin-left: 8px"
              >转派</el-link
            > -->
          </template>
        </ele-pro-table>
      </div>

      <!-- 处理弹窗 -->
      <process-dialog ref="processDialogRef" @reload="$refs.table.reload()" />
    </el-card>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import ProcessDialog from './processDialog.vue';
  import { alarmlogsheetPage, remove } from '@/api/alarmConfiguration/index.js';

  export default {
    components: {
      ProcessDialog
    },
    mixins: [dictMixins, tableColumnsMixin],
    data() {
      return {
        // 统计数据
        statistics: {
          total: 2342,
          unresolved: 21,
          resolutionRate: 97.5,
          week: 32,
          month: 127,
          year: 1343
        },
        // 搜索表单
        searchForm: {
          energyType: '',
          keyword: '',
          warningLevel: '',
          reportTime: ''
        },
        // 更多查询条件
        moreForm: {
          user: '',
          dept: '',
          useDept: '',
          manager: '',
          device: ''
        },
        // 是否显示更多选项
        showMoreOptions: false,
        // 表格列配置
        columns: [
          {
            prop: 'code',
            label: '告警编码',
            align: 'center',
            slot: 'code',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'name',
            label: '告警名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'alarmLevel',
            label: '告警级别',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
              return { 1: '提示', 2: '一般', 3: '严重', 4: '紧急', 5: '致命' }[
                cellValue
              ];
            }
          },

          {
            prop: 'areaName',
            label: '用能分区',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'energyClassificationName',
            label: '用能分类',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'energyTypeName',
            label: '能源名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'description',
            label: '告警描述',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'createTime',
            label: '告警时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'handleTime',
            label: '处理时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'handleUserName',
            label: '处理人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'handleStatus',
            label: '状态',
            align: 'center',
            formatter: (_row, _column, cellValue) => {
              return { 0: '未处理', 1: '处理中', 2: '已处理' }[cellValue];
            },
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 150,
            align: 'center',
            fixed: 'right',
            slot: 'action'
          }
        ],
        cacheKeyUrl: 'ems-energy-warning-list'
      };
    },
    computed: {
      seekList() {
        return [
          // {
          //   label: '用能类型',
          //   value: 'energyType',
          //   type: 'select',
          //   placeholder: '全部',
          //   planList: [
          //     { value: '', label: '全部' },
          //     { value: 'water', label: '水' },
          //     { value: 'electric', label: '电' },
          //     { value: 'gas', label: '气' }
          //   ]
          // },
          {
            label: '关键词',
            value: 'keyword',
            type: 'input',
            width: '280px',
            placeholder: '编码、名称'
          },
          // {
          //   label: '告警等级',
          //   value: 'level',
          //   type: 'select',
          //   placeholder: '请选择',
          //   planList: [
          //     { value: 1, label: '提示' },
          //     { value: 2, label: '一般' },
          //     { value: 3, label: '严重' },
          //     { value: 4, label: '紧急' },
          //     { value: 5, label: '致命' }
          //   ]
          // }
        ];
      }
    },
    methods: {
      // 获取告警等级类型
      getWarningLevelType(level) {
        const typeMap = {
          serious: 'danger',
          urgent: 'warning',
          normal: 'success'
        };
        return typeMap[level] || 'info';
      },
      // 获取告警等级文本
      getWarningLevelText(level) {
        const textMap = {
          serious: '严重',
          urgent: '紧急',
          normal: '一般'
        };
        return textMap[level] || level;
      },
      // 更多选项
      handleMoreOptions() {
        this.showMoreOptions = !this.showMoreOptions;
      },
      // 搜索
      handleSearch(where) {
        this.searchForm = { ...where };
        this.$refs.table.reload({ page: 1 });
      },
      // 重置
      handleReset() {
        this.searchForm = {
          energyType: '',
          keyword: '',
          warningLevel: '',
          reportTime: ''
        };
        this.moreForm = {
          user: '',
          dept: '',
          useDept: '',
          manager: '',
          device: ''
        };
        this.$refs.table.reload({ page: 1 });
      },
      // 表格数据源
      datasource({ page, limit, where, order }) {
        return alarmlogsheetPage({
          pageNum: page,
          size: limit,
          ...where
        });
      },
      // 处理
      handleProcess(row,type) {
        this.$refs.processDialogRef.open(row,type);
      },
      // 转派
      handleTransfer(row) {
        console.log('转派：', row);
        this.$message.info(`转派告警：${row.name}`);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .energy-warning {
    .warning-card {
      height: calc(100vh - 100px);

      ::v-deep .el-card__body {
        height: 100%;
        padding: 15px;
      }
    }

    // 统计卡片
    .statistics-cards {
      margin-bottom: 20px;

      .stat-card {
        background: #f8f9fa;
        border: 1px solid #ebeef5;
        border-radius: 8px;
        padding: 15px;
        display: flex;
        align-items: center;
        transition: all 0.3s;

        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .stat-icon {
          width: 48px;
          height: 48px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 12px;

          i {
            font-size: 24px;
            color: #fff;
          }

          &.blue {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }

          &.red {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }

          &.green {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }

          &.purple {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          }

          &.orange {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
          }

          &.cyan {
            background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
          }
        }

        .stat-content {
          flex: 1;
          width: 100%;

          .stat-label {
            font-size: 12px;
            color: #909399;
            margin-bottom: 4px;
          }

          .stat-value {
            font-size: 24px;
            font-weight: 600;
            color: #303133;
            margin-bottom: 4px;

            .unit {
              font-size: 12px;
              font-weight: normal;
              color: #909399;
              margin-left: 4px;
            }
          }

          .stat-trend {
            font-size: 11px;

            &.up {
              color: #f56c6c;
            }

            &.down {
              color: #67c23a;
            }

            .trend-icon {
              display: inline-block;
              font-weight: bold;

              &.up-icon {
                color: #f56c6c;
              }

              &.down-icon {
                color: #67c23a;
              }
            }
          }
        }
      }
    }

    // 搜索区域
    .search-area {
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #ebeef5;
    }

    // 工具栏
    .toolbar {
      margin-bottom: 15px;
    }

    // 列表视图
    .list-view {
      margin-bottom: 15px;

      ::v-deep .ele-pro-table {
        .el-table {
          border: 1px solid #ebeef5;
          border-radius: 4px;
        }
      }
    }

    // 更多查询条件
    .more-options-area {
      background: #f5f7fa;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      padding: 15px;

      .more-options-title {
        font-size: 13px;
        color: #606266;
        margin-bottom: 10px;
      }

      .more-form {
        ::v-deep .el-form-item {
          margin-bottom: 10px;
          margin-right: 20px;
        }

        ::v-deep .el-form-item__label {
          font-size: 13px;
          color: #606266;
        }
      }
    }
  }
</style>