chongqing-web/src/views/warningManage/redLineWarning/index.vue

<template>
    <div class="dashboard">
        <div class="header">
            <div class="title-section">
                <h1><i class="fas fa-shield-alt" style="color:#2c5282; margin-right: 8px;"></i>综合预警工作台</h1>
                <p>员工综合评估（＜75分红色预警 | ≥90分优秀）</p>
            </div>
            <div class="badge-group">
                <div class="alert-badge"><i class="fas fa-exclamation-triangle"></i> 实时预警</div>
                <div class="alert-badge" style="border-left-color:#f97316;"><i class="fas fa-chart-line"></i> 动态月度数据
                </div>
            </div>
        </div>

        <div class="filter-bar">
            <div class="time-range">
                <button class="time-btn" :class="{ active: activeRange === 'week' }"
                    @click="setActiveRange('week')">近一周</button>
                <button class="time-btn" :class="{ active: activeRange === 'month' }"
                    @click="setActiveRange('month')">近一月</button>
                <button class="time-btn" :class="{ active: activeRange === 'quarter' }"
                    @click="setActiveRange('quarter')">近三月</button>
                <button class="time-btn" :class="{ active: activeRange === 'year' }"
                    @click="setActiveRange('year')">近一年</button>
                <div class="custom-date">
                    <el-date-picker v-model="startDate" type="date" placeholder="开始日期" style="width: 150px;" />
                    <span style="margin: 0 8px;">至</span>
                    <el-date-picker v-model="endDate" type="date" placeholder="结束日期" style="width: 150px;" />

                </div>
                <el-tree-select v-model="selectedOrg" :data="cascadeOptions"
                    :props="{ label: 'label', value: 'value', children: 'children' }" node-key="value"
                    placeholder="组织架构/员工" clearable filterable check-strictly style="width: 480px;"
                     />
            </div>
            <div class="filter-group">
                <el-select v-model="selectedAlertLevel" placeholder="预警等级" clearable style="width: 250px;">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="item in alert_level" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button @click="handleReset">重置</el-button>
            </div>
        </div>

        <div class="employee-section">
            <div class="section-title">
                <i class="fas fa-users" style="color:#dc2626;"></i> 员工综合预警
                <span
                    style="font-size:0.7rem; background:#eef2ff; padding:4px 12px; border-radius:30px; margin-left:12px;">
                    评分依据：员工配分表
                </span>
            </div>
            <div class="employee-card">
                <div style="overflow-x: auto;">
                    <el-table :data="filteredEmployees" :row-class-name="getRowClass" style="width:100%;" border stripe>
                        <el-table-column prop="userId" label="员工ID" />
                        <el-table-column prop="nickName" label="姓名">
                            <template #default="{ row }">
                                <strong>{{ row.nickName }}</strong>
                            </template>
                        </el-table-column>
                        <el-table-column prop="deptName" label="所属部门" />
                        <el-table-column prop="eventTime" label="事件时间" sortable width="180" />
                        <el-table-column prop="dimensionName" label="维度名称" />
                        <el-table-column prop="level2Name" label="二级指标名称" />
                        <el-table-column prop="totalScore" label="扣分分值合计" sortable />
                        <el-table-column prop="occurrenceCount" label="发生次数" sortable />
                        <el-table-column prop="overallScore" label="预警等级">
                            <template #default="{ row }">
                                <span v-if="row.overallScore < 75" class="status-badge"
                                    style="animation: subtlePulse 1s infinite;"><i
                                        class="fas fa-exclamation-triangle"></i> 红色预警</span>
                                <span v-else-if="row.overallScore >= 90" class="status-excellent"
                                    style="background:#d1fae5; color:#065f46;"><i class="fas fa-star"></i>
                                    优秀标杆</span>
                                <span v-else class="status-warning">正常范围</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="coreRisks" label="核心风险" />
                        <el-table-column prop="statusLabel" label="状态标签">
                            <template #default="{ row }">
                                <span v-if="row.overallScore < 75" style="color:#b91c1c;"><i class="fas fa-bell"></i>
                                    {{ getAlertLabel(row.statusLabel) }}</span>
                                <span v-else-if="row.overallScore >= 90" style="color:#15803d;"><i
                                        class="fas fa-crown"></i> {{ getAlertLabel(row.statusLabel) }}</span>
                                <span v-else>{{ getAlertLabel(row.statusLabel) }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination v-show="total > 0" :total="total" v-model:current-page="queryParams.pageNum"
                        v-model:page-size="queryParams.pageSize" :page-sizes="[10, 20, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                        @current-change="handlePageChange" style="margin-top: 16px; justify-content: flex-end;" />
                </div>
                <div class="warning-summary">
                    <div><i class="fas fa-circle" style="color:#ef4444;"></i> <strong>红色预警</strong> (综合评估 &lt; 75分) 共计
                        {{ redAlertCount }} 人 → 立即约谈/培训</div>
                    <div><i class="fas fa-circle" style="color:#22c55e;"></i> <strong>优秀标杆</strong> (综合评估 ≥ 90分) 共计 {{
                        excellentCount }} 人 → 表彰激励</div>
                    <div><i class="fas fa-chart-simple"></i> 全员平均综合得分: <strong>{{ avgScore }}</strong> 分</div>
                </div>
            </div>
        </div>

        <footer>
            <i class="far fa-bell"></i> 员工部门：旅检一/二/三部 | 阈值：＜75红色预警 | ≥90优秀
        </footer>
    </div>
</template>

<script setup>
import { ref, computed, reactive, onMounted, watch } from 'vue'
import { getDeptUserTree } from '@/api/item/items'
import { getRedLineWarningPageData } from '@/api/warningManage/redLineWarning'
import { useDict } from '@/utils/dict'
import { useRoute } from 'vue-router'

const route = useRoute()

const { alert_level } = useDict('alert_level')

const dateRangeInput = ref(null)
const activeRange = ref('month')

const startDate = ref(null)
const endDate = ref(null)
const selectedAlertLevel = ref('')
const selectedOrg = ref('')
const cascadeOptions = ref([])



const newNames = [
    "刘孟", "王苡衡", "周海涵", "何欣怡", "王崎",
    "黄政", "刘韵儿", "汪安霖", "张诗敏", "张维", "陈凯琳"
]
const deptList = ["旅检一部", "旅检二部", "旅检三部"]
const scores = [68, 92, 55, 96, 72, 88, 48, 94, 81, 63, 91]
const coreRisksOrOutstandingAchievementsList = [
    "违规操作2次+投诉1起，考试成绩62分",
    "优秀服务案例，安保测试满分，无违规",
    "安保测试未通过，不安全事件责任人",
    "典型服务案例主导者，考试成绩98",
    "质控拦截违规2次，考试成绩74分",
    "考试成绩89分，服务巡查良好",
    "严重不规范操作，安保测试未过",
    "质控拦截贡献突出，考试成绩96",
    "表现良好，无安全事故，考试86分",
    "服务巡查扣分，投诉关联2件",
    "临近预警线，服务巡查扣分1次"
]


const indicatorNames = ["安全违规次数", "旅客投诉率", "安检差错率", "培训合格率", "操作规范度"]
const deductionScores = [2, 5, 3, 1, 4]
const occurrenceCounts = [1, 2, 3, 1, 2]

const employeesData = ref([])
const queryParams = reactive({
    pageNum: 1,
    pageSize: 10
})


// 将组织架构数据转换为树形数据
const transformCascadeData = (nodes) => {
    if (!nodes) return []
    return nodes.map(node => {
        const deptType = node.deptType || node.nodeType
        const label = deptType === 'user'
            ? (node.nickName || node.label)
            : (node.deptName || node.name || node.label)

        let value;
        if (deptType === 'STATION') value = `station_${node.id}`;
        else if (deptType === 'BRIGADE') value = `dept_${node.id}`
        else if (deptType === 'MANAGER') value = `team_${node.id}`
        else if (deptType === 'TEAMS') value = `group_${node.id}`
        else value = `user_${node.id}`

        const children = node.children && node.children.length > 0 ? transformCascadeData(node.children) : undefined

        return {
            label,
            value,
            deptType,
            children
        }
    })
}

// 获取选中的部门或用户信息
const getSelectedInfo = (selectedValue) => {
    if (!selectedValue) return null

    const findNodeByValue = (nodes, value) => {
        for (const node of nodes) {
            if (node.value === value) {
                return node
            }
            if (node.children) {
                const found = findNodeByValue(node.children, value)
                if (found) return found
            }
        }
        return null
    }

    return findNodeByValue(cascadeOptions.value, selectedValue)
}

const allFilteredEmployees = computed(() => {
    let result = employeesData.value || []

    // 预警等级筛选
    if (selectedAlertLevel.value) {
        // 根据字典值判断筛选条件（红色预警 <75，优秀标杆 >=90，正常范围 75-89）
        // 可以根据字典的 value 或 label 来判断
        const alertItem = alert_level.value.find(item => item.value === selectedAlertLevel.value)
        if (alertItem) {
            const label = alertItem.label
            if (label.includes('红色') || label.includes('预警')) {
                result = result.filter(emp => emp.overallScore < 75)
            } else if (label.includes('优秀') || label.includes('标杆')) {
                result = result.filter(emp => emp.overallScore >= 90)
            } else if (label.includes('正常')) {
                result = result.filter(emp => emp.overallScore >= 75 && emp.overallScore < 90)
            }
        }
    }

    return result
})

const filteredEmployees = computed(() => {
    const start = (queryParams.pageNum - 1) * queryParams.pageSize
    const end = start + queryParams.pageSize
    return allFilteredEmployees.value.slice(start, end)
})

const total = computed(() => allFilteredEmployees.value.length)

function handlePageChange(newPage) {
    queryParams.pageNum = newPage
}

function handleSizeChange(newSize) {
    queryParams.pageSize = newSize
    queryParams.pageNum = 1
}

const redAlertCount = computed(() => {
    return employeesData.value?.redAlertNum || 0
})

const excellentCount = computed(() => {
    return employeesData.value?.excellentBenchmarkNum || 0
})

const avgScore = computed(() => {
    return employeesData.value?.averageComprehensiveScore || 0
})

const getRowClass = ({ row }) => {
    if (row.overallScore < 75) return "employee-warning-row"
    if (row.overallScore >= 90) return "employee-excellent-row"
    return ""
}

const getAlertLabel = (value) => {
    if (!value) return ''
    const item = alert_level.value.find(d => d.value === value)
    return item ? item.label : value
}

const setActiveRange = (range) => {
    activeRange.value = range
    // 清除自定义日期
    if (range !== 'custom') {
        startDate.value = null
        endDate.value = null
    }
}

const handleSearch = () => {
    fetchWarningData()
}

const handleReset = () => {
    startDate.value = null
    endDate.value = null
    activeRange.value = 'month'
    selectedAlertLevel.value = ''
    selectedOrg.value = ''
    queryParams.pageNum = 1
    fetchWarningData()
}


const formatDate = (d) => {
    if (!d) return ''
    const date = new Date(d)
    const y = date.getFullYear()
    const m = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${y}-${m}-${day}`
}

const getDateRangeFromActive = () => {
    const now = new Date()
    let start = new Date(now)
    if (activeRange.value === 'week') {
        start.setDate(now.getDate() - 7)
    } else if (activeRange.value === 'month') {
        start.setMonth(now.getMonth() - 1)
    } else if (activeRange.value === 'quarter') {
        start.setMonth(now.getMonth() - 3)
    } else {
        start.setFullYear(now.getFullYear() - 1)
    }
    return { startDate: formatDate(start), endDate: formatDate(now) }
}



const fetchWarningData = async () => {
    queryParams.pageNum = 1
    let params = {}
    if (startDate.value && endDate.value) {
        params.startDate = formatDate(startDate.value)
        params.endDate = formatDate(endDate.value)
    } else {
        const range = getDateRangeFromActive()
        params.startDate = range.startDate
        params.endDate = range.endDate
    }

    const selectedInfo = getSelectedInfo(selectedOrg.value)
    if (selectedInfo) {
        const rawId = Number(selectedInfo.value.split('_')[1])

        if (selectedInfo.deptType === 'BRIGADE') params.deptId = rawId
        else if (selectedInfo.deptType === 'MANAGER') params.teamId = rawId
        else if (selectedInfo.deptType === 'TEAMS') params.groupId = rawId
        else if (selectedInfo.deptType === 'user') params.userId = rawId
    }

    try {
        const r1 = await getRedLineWarningPageData(params)
        if (r1.data) {
            employeesData.value = r1.data
        }
    } catch (error) {
        console.error('获取预警数据失败:', error)
    }
}

onMounted(async () => {
    try {
        const res = await getDeptUserTree()
        if (res.data) {
            cascadeOptions.value = transformCascadeData(res.data)
            console.log(cascadeOptions.value, "cascadeOptions")
        }
    } catch (error) {
        console.error('获取组织架构数据失败:', error)
    }
    // fetchWarningData()
})

// 监听路由参数变化，回显查询条件并查询
watch(() => route.query, (query) => {
    const { id, startDate: sd, endDate: ed, activeRange: ar, alertLevel, org } = query

    // 回显员工选择
    if (id) {
        selectedOrg.value = `user_${id}`
    } else if (org) {
        selectedOrg.value = org
    } else {
        selectedOrg.value = ''
    }

    // 回显日期范围
    if (sd && ed) {
        startDate.value = sd
        endDate.value = ed
        activeRange.value = 'custom'
    } else {
        startDate.value = null
        endDate.value = null
        activeRange.value = ar || 'month'
    }

    // 回显预警等级
    selectedAlertLevel.value = alertLevel || ''

    queryParams.pageNum = 1
    fetchWarningData()
}, { immediate: true })
</script>

<style scoped>
@keyframes subtlePulse {
    0% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
        background: #ffb3b3;
    }

    100% {
        opacity: 0.7;
    }
}



.dashboard {
    max-width: 100%;
    padding: 10px;
}

.header {
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
}

.title-section h1 {
    font-size: 1.7rem;
    font-weight: 700;
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.3px;
}

.title-section p {
    color: #475569;
    margin-top: 6px;
    font-size: 0.85rem;
}

.badge-group {
    display: flex;
    gap: 12px;
}

.alert-badge {
    background: #fff1f0;
    border-left: 5px solid #ef4444;
    padding: 6px 16px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 0.85rem;
}

.alert-badge i {
    color: #ef4444;
    margin-right: 6px;
}

.filter-bar {
    background: white;
    border-radius: 60px;
    padding: 8px 20px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03);
    border: 1px solid #eef2f6;
}

.time-range {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.time-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 6px 18px;
    border-radius: 40px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: #1e293b;
}

.time-btn.active {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
}

.time-btn:hover {
    background: #e2e8f0;
}

.custom-date {
    display: flex;
    align-items: center;
    gap: 8px;
}

.clear-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    padding: 4px 8px;
    border-radius: 40px;
    cursor: pointer;
    color: #64748b;
}

.clear-btn:hover {
    background: #f1f5f9;
}

.custom-date :deep(.el-date-picker) {
    background: transparent;
}

.custom-date :deep(.el-input__wrapper) {
    background: transparent;


}

.filter-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

.search-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    padding: 4px 12px;
    border-radius: 40px;
    border: 1px solid #e2e8f0;
}

.search-btn {
    background: #2563eb;
    border: none;
    color: white;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
}

.search-btn:hover {
    background: #1d4ed8;
}



.employee-section {
    margin-top: 20px;
    width: 100%;
}

.section-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 5px solid #ef4444;
    padding-left: 14px;
}

.employee-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2f6;
    padding: 1rem 1.5rem;
    width: 100%;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.data-table th {
    text-align: left;
    padding: 10px 6px 8px 0;
    font-weight: 600;
    color: #334155;
    border-bottom: 2px solid #e2e8f0;
}

.data-table td {
    padding: 8px 6px 8px 0;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.employee-warning-row {
    background-color: #fff5f5;
    border-left: 4px solid #ef4444;
}

.employee-excellent-row {
    background-color: #f0fdf4;
    border-left: 4px solid #22c55e;
}

.score-danger {
    font-weight: 800;
    color: #dc2626;
    background: #fee2e2;
    padding: 2px 8px;
    border-radius: 30px;
    display: inline-block;
    font-size: 0.8rem;
}

.score-excellent {
    font-weight: 800;
    color: #15803d;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 30px;
    display: inline-block;
    font-size: 0.8rem;
}

.warning-summary {
    background: #fff9f0;
    border-radius: 18px;
    padding: 12px 20px;
    margin-top: 18px;
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    font-weight: 500;
    font-size: 0.85rem;
}

footer {
    text-align: center;
    margin-top: 32px;
    font-size: 0.7rem;
    color: #7e8b9c;
    border-top: 1px solid #e2edf7;
    padding-top: 18px;
}

@media (max-width: 1200px) {
    .cards-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }
}

@media (max-width: 800px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body {
        padding: 20px;
    }

    .filter-bar {
        border-radius: 24px;
        flex-direction: column;
        align-items: stretch;
    }

    .org-search {
        justify-content: space-between;
    }
}

@media (max-width: 550px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
}
</style>