cfc/cfc-web/src/views/admin/EmotionAlertManage.vue

<template>
  <div class="emotion-alert-manage admin-page">
    <div class="header">
      <h2>情绪告警管理</h2>
      <el-input v-model="keyword" placeholder="搜索..." prefix-icon="el-icon-search" style="width:200px" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
      <el-radio-group v-model="resolvedFilter" @change="onFilterChange">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button label="false">未处理</el-radio-button>
        <el-radio-button label="true">已处理</el-radio-button>
      </el-radio-group>
      </div>
    <div class="table-scroll-wrap">

    <el-table :max-height="tableHeight" :data="list" v-loading="loading" border stripe>
      <el-table-column prop="id" label="ID" width="70" />
      <el-table-column prop="childId" label="孩子ID" width="90" />
      <el-table-column label="告警类型" width="140">
        <template slot-scope="{ row }">
          {{ alertTypeLabel(row.alertType) }}
        </template>
      </el-table-column>
      <el-table-column label="严重程度" width="100">
        <template slot-scope="{ row }">
          <el-tag :type="severityType(row.severity)">{{ severityLabel(row.severity) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="180" show-overflow-tooltip />
      <el-table-column prop="message" label="详情" min-width="220" show-overflow-tooltip />
      <el-table-column label="状态" width="80">
        <template slot-scope="{ row }">
          <el-tag :type="row.resolved ? 'success' : 'danger'" size="small">
            {{ row.resolved ? '已处理' : '未处理' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="160" sortable="custom" :sort-orders="['ascending','descending']"
        <template slot-scope="{ row }" sortable="custom" :sort-orders="['ascending','descending']"
          {{ formatTime(row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column label="处理时间" width="160">
        <template slot-scope="{ row }">
          {{ row.resolvedAt ? formatTime(row.resolvedAt) : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" fixed="right">
        <template slot-scope="{ row }">
          <el-button
            v-if="!row.resolved"
            type="primary"
            size="mini"
            @click="handleResolve(row)"
          >标记已处理</el-button>
          <span v-else class="resolved-text">-</span>
        </template>
      </el-table-column>
    </el-table>

    </el-table>

    </div><el-pagination
      @size-change="onSizeChange"
      @current-change="onPageChange"
      :current-page="page"
      :page-size="size"
      :total="total"
      layout="total, prev, pager, next"
      style="margin-top: 20px; text-align: right;"
    />
  </div>
</template>

<script>
import { getEmotionAlertList, resolveEmotionAlert } from '@/api/admin'

export default {
  name: 'EmotionAlertManage',
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      page: 1,
      size: 20,
      total: 0,
      keyword: '',
      resolvedFilter: ''
      sortProp: '' ,
      sortOrder: '' ,
    }
  },
  mounted() {
    this.loadList()
  },
  methods: {
    async loadList() {
      this.loading = true
      try {
        var params = { page: this.page, size: this.size }
        if (this.resolvedFilter !== '') {
          params.resolved = this.resolvedFilter
    handleSortChange({ prop, order }) {
      this.sortProp = prop
      this.sortOrder = order
      this.page = 1
      this.fetchList && this.fetchList()
    },
        }
        if (this.keyword) {
          params.keyword = this.keyword
        }
        var res = await getEmotionAlertList(params)
        this.list = res.data && res.data.list ? res.data.list : []
        this.total = res.data && res.data.total ? res.data.total : 0
      } catch (e) {
        this.$message.error('加载失败')
      } finally {
        this.loading = false
      }
    },
    onFilterChange() {
      this.page = 1
      this.loadList()
    },
    handleSearch() {
      this.page = 1
      this.loadList()
    },
    onSizeChange(val) {
      this.size = val
      this.page = 1
      this.loadList()
    },
    onPageChange(val) {
      this.page = val
      this.loadList()
    },
    async handleResolve(row) {
      try {
        await this.$confirm('确认将该告警标记为已处理？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await resolveEmotionAlert(row.id)
        this.$message.success('操作成功')
        this.loadList()
      } catch (e) {
        if (e !== 'cancel') {
          this.$message.error('操作失败')
        }
      }
    },
    alertTypeLabel(type) {
      var map = {
        consecutive_low_mood: '连续低情绪',
        crisis_keyword: '危机关键词',
        sharp_decline: '情绪锐降'
      }
      return map[type] || type
    },
    severityType(severity) {
      var map = { high: 'danger', medium: 'warning', low: 'info' }
      return map[severity] || 'info'
    },
    severityLabel(severity) {
      var map = { high: '高', medium: '中', low: '低' }
      return map[severity] || severity
    },
    formatTime(t) {
      if (!t) return '-'
      return t.replace ? t.replace('T', ' ').substring(0, 19) : t
    }
  }
}
</script>

<style scoped>
.emotion-alert-manage {
  padding: 20px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.header h2 {
  margin: 0;
}
.resolved-text {
  color: #909399;
}
</style>