4052 lines
142 KiB
Vue
4052 lines
142 KiB
Vue
<template>
|
||
<div class="admin-system">
|
||
<!-- 内容区域 -->
|
||
<div class="admin-container">
|
||
<!-- 左侧主导航 -->
|
||
<aside class="admin-sidebar-main">
|
||
<div class="sidebar-header">
|
||
<div class="logo" @click="backToMain">
|
||
<img src="/logo.jpg" alt="Logo" class="logo-img" />
|
||
<span class="logo-text">管理后台</span>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="main-nav">
|
||
<div class="section-title">系统管理</div>
|
||
<div
|
||
v-for="item in navItems"
|
||
:key="item.key"
|
||
class="main-nav-item"
|
||
:class="{ active: activeNav === item.key }"
|
||
@click="activeNav = item.key"
|
||
>
|
||
<el-icon>
|
||
<Setting v-if="item.key === 'platform'" />
|
||
<Document v-else-if="item.key === 'bidding'" />
|
||
<Service v-else-if="item.key === 'service'" />
|
||
</el-icon>
|
||
<span>{{ item.label }}</span>
|
||
</div>
|
||
|
||
<div class="nav-divider"></div>
|
||
|
||
<div class="section-title">个人设置</div>
|
||
<div
|
||
class="main-nav-item"
|
||
:class="{ active: activeNav === 'profile' }"
|
||
@click="activeNav = 'profile'"
|
||
>
|
||
<el-icon><User /></el-icon>
|
||
<span>个人中心</span>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 用户信息和返回按钮 -->
|
||
<div class="sidebar-footer">
|
||
<div class="user-section">
|
||
<div class="user-avatar" @click="goToProfile">
|
||
<img src="/avatar.svg" alt="User" />
|
||
</div>
|
||
<span class="user-name">李志鹏</span>
|
||
<el-tooltip content="返回主系统" placement="top">
|
||
<div class="back-icon" @click="backToMain">
|
||
<el-icon><Back /></el-icon>
|
||
</div>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 左侧子级导航（根据不同系统显示不同内容） -->
|
||
<aside class="admin-sidebar-sub">
|
||
<!-- 平台管理后台的子导航 -->
|
||
<nav v-if="activeNav === 'platform'" class="sub-nav">
|
||
<div class="sub-nav-title">平台管理</div>
|
||
<div
|
||
v-for="item in platformSubNav"
|
||
:key="item.key"
|
||
class="sub-nav-item"
|
||
:class="{ active: activeSubNav === item.key }"
|
||
@click="activeSubNav = item.key"
|
||
>
|
||
<el-icon>
|
||
<DataLine v-if="item.key === 'dashboard'" />
|
||
<User v-else-if="item.key === 'users'" />
|
||
<Document v-else-if="item.key === 'knowledge'" />
|
||
<Setting v-else-if="item.key === 'settings'" />
|
||
</el-icon>
|
||
<span>{{ item.label }}</span>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 智能标书管理后台的子导航 -->
|
||
<nav v-if="activeNav === 'bidding'" class="sub-nav">
|
||
<div class="sub-nav-title">标书管理</div>
|
||
<div
|
||
v-for="item in biddingSubNav"
|
||
:key="item.key"
|
||
class="sub-nav-item"
|
||
:class="{ active: activeSubNav === item.key }"
|
||
@click="activeSubNav = item.key"
|
||
>
|
||
<el-icon>
|
||
<DataLine v-if="item.key === 'dashboard'" />
|
||
<Document v-else-if="item.key === 'projects'" />
|
||
<Files v-else-if="item.key === 'templates'" />
|
||
<Setting v-else-if="item.key === 'settings'" />
|
||
</el-icon>
|
||
<span>{{ item.label }}</span>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 泰豪小电管理后台的子导航 -->
|
||
<nav v-if="activeNav === 'service'" class="sub-nav">
|
||
<div class="sub-nav-title">客服管理</div>
|
||
<template v-for="item in serviceSubNav" :key="item.key">
|
||
<!-- 普通导航项 -->
|
||
<div
|
||
v-if="!item.children"
|
||
class="sub-nav-item"
|
||
:class="{ active: activeSubNav === item.key }"
|
||
@click="activeSubNav = item.key"
|
||
>
|
||
<el-icon>
|
||
<DataLine v-if="item.icon === 'DataLine'" />
|
||
<Document v-else-if="item.icon === 'Document'" />
|
||
<Tickets v-else-if="item.icon === 'Tickets'" />
|
||
<ChatDotRound v-else-if="item.icon === 'ChatDotRound'" />
|
||
<Service v-else-if="item.icon === 'Service'" />
|
||
<List v-else-if="item.icon === 'List'" />
|
||
<User v-else-if="item.icon === 'User'" />
|
||
</el-icon>
|
||
<span>{{ item.label }}</span>
|
||
</div>
|
||
|
||
<!-- 带子级的导航项 -->
|
||
<div v-else class="sub-nav-group">
|
||
<div
|
||
class="sub-nav-item has-children"
|
||
:class="{ expanded: logNavExpanded }"
|
||
@click="logNavExpanded = !logNavExpanded"
|
||
>
|
||
<el-icon><List /></el-icon>
|
||
<span>{{ item.label }}</span>
|
||
<el-icon class="arrow-icon"><ArrowDown /></el-icon>
|
||
</div>
|
||
<div v-show="logNavExpanded" class="sub-nav-children">
|
||
<div
|
||
v-for="child in item.children"
|
||
:key="child.key"
|
||
class="sub-nav-child-item"
|
||
:class="{ active: activeSubNav === child.key }"
|
||
@click="activeSubNav = child.key"
|
||
>
|
||
<span>{{ child.label }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</nav>
|
||
</aside>
|
||
|
||
<!-- 主内容区 -->
|
||
<div class="admin-main">
|
||
<!-- 平台管理后台 -->
|
||
<div v-if="activeNav === 'platform'" class="admin-content">
|
||
<div class="content-header">
|
||
<h1>平台管理后台</h1>
|
||
<p class="subtitle">AI数智化平台系统管理</p>
|
||
</div>
|
||
|
||
<div class="dashboard-cards">
|
||
<div class="stat-card">
|
||
<div class="stat-icon" style="background: #409eff;">
|
||
<el-icon><User /></el-icon>
|
||
</div>
|
||
<div class="stat-info">
|
||
<div class="stat-label">用户总数</div>
|
||
<div class="stat-value">1,248</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-card">
|
||
<div class="stat-icon" style="background: #67c23a;">
|
||
<el-icon><Document /></el-icon>
|
||
</div>
|
||
<div class="stat-info">
|
||
<div class="stat-label">知识库文档</div>
|
||
<div class="stat-value">856</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-card">
|
||
<div class="stat-icon" style="background: #e6a23c;">
|
||
<el-icon><ChatDotRound /></el-icon>
|
||
</div>
|
||
<div class="stat-info">
|
||
<div class="stat-label">今日对话</div>
|
||
<div class="stat-value">342</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-card">
|
||
<div class="stat-icon" style="background: #f56c6c;">
|
||
<el-icon><Warning /></el-icon>
|
||
</div>
|
||
<div class="stat-info">
|
||
<div class="stat-label">待处理告警</div>
|
||
<div class="stat-value">12</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-card style="margin-top: 24px;">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>系统配置</span>
|
||
<el-button type="primary" size="small">保存配置</el-button>
|
||
</div>
|
||
</template>
|
||
<el-form label-width="150px">
|
||
<el-form-item label="系统名称">
|
||
<el-input v-model="platformConfig.systemName" />
|
||
</el-form-item>
|
||
<el-form-item label="AI模型">
|
||
<el-select v-model="platformConfig.aiModel" style="width: 100%;">
|
||
<el-option label="GPT-4" value="gpt-4" />
|
||
<el-option label="Claude-3" value="claude-3" />
|
||
<el-option label="文心一言" value="ernie" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="最大并发数">
|
||
<el-input-number v-model="platformConfig.maxConcurrency" :min="1" :max="1000" />
|
||
</el-form-item>
|
||
<el-form-item label="会话超时(分钟)">
|
||
<el-input-number v-model="platformConfig.sessionTimeout" :min="5" :max="120" />
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
</div>
|
||
|
||
<!-- 智能标书管理后台 -->
|
||
<div v-if="activeNav === 'bidding'" class="admin-content">
|
||
<div class="content-header">
|
||
<h1>智能标书管理后台</h1>
|
||
<p class="subtitle">招标助手系统管理</p>
|
||
</div>
|
||
|
||
<div class="dashboard-cards">
|
||
<div class="stat-card">
|
||
<div class="stat-icon" style="background: #409eff;">
|
||
<el-icon><Document /></el-icon>
|
||
</div>
|
||
<div class="stat-info">
|
||
<div class="stat-label">标书总数</div>
|
||
<div class="stat-value">486</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-card">
|
||
<div class="stat-icon" style="background: #67c23a;">
|
||
<el-icon><Select /></el-icon>
|
||
</div>
|
||
<div class="stat-info">
|
||
<div class="stat-label">中标率</div>
|
||
<div class="stat-value">78.5%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-card">
|
||
<div class="stat-icon" style="background: #e6a23c;">
|
||
<el-icon><Clock /></el-icon>
|
||
</div>
|
||
<div class="stat-info">
|
||
<div class="stat-label">进行中项目</div>
|
||
<div class="stat-value">23</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-card">
|
||
<div class="stat-icon" style="background: #909399;">
|
||
<el-icon><Files /></el-icon>
|
||
</div>
|
||
<div class="stat-info">
|
||
<div class="stat-label">模板库</div>
|
||
<div class="stat-value">156</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-card style="margin-top: 24px;">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>标书模板管理</span>
|
||
<el-button type="primary" size="small">新增模板</el-button>
|
||
</div>
|
||
</template>
|
||
<el-table :data="biddingTemplates" style="width: 100%">
|
||
<el-table-column prop="name" label="模板名称" />
|
||
<el-table-column prop="category" label="类别" width="120" />
|
||
<el-table-column prop="usage" label="使用次数" width="100" align="center" />
|
||
<el-table-column prop="updateTime" label="更新时间" width="180" />
|
||
<el-table-column label="操作" width="150">
|
||
<template>
|
||
<el-button type="primary" link size="small">编辑</el-button>
|
||
<el-button type="danger" link size="small">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</div>
|
||
|
||
<!-- 泰豪小电管理后台 -->
|
||
<div v-if="activeNav === 'service'" class="admin-content">
|
||
<!-- 运营看板 -->
|
||
<template v-if="activeSubNav === 'dashboard'">
|
||
<div class="content-header">
|
||
<h1>数据概览</h1>
|
||
<p class="subtitle">泰豪小电智能客服运营数据</p>
|
||
</div>
|
||
|
||
<!-- 核心指标卡片 -->
|
||
<div class="dashboard-stats">
|
||
<div class="stat-card clickable" @click="activeSubNav = 'conversation'">
|
||
<div class="stat-icon" style="background: linear-gradient(135deg, #409eff, #66b1ff);">
|
||
<el-icon><ChatDotRound /></el-icon>
|
||
</div>
|
||
<div class="stat-info">
|
||
<div class="stat-value">1,258</div>
|
||
<div class="stat-label">咨询次数</div>
|
||
<div class="stat-trend up">
|
||
<el-icon><Top /></el-icon>
|
||
<span>较昨日 +12.5%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-card clickable" @click="goToTickets('pending')">
|
||
<div class="stat-icon" style="background: linear-gradient(135deg, #e6a23c, #f5c06a);">
|
||
<el-icon><Clock /></el-icon>
|
||
</div>
|
||
<div class="stat-info">
|
||
<div class="stat-value">{{ dashboardData.pendingTickets }}</div>
|
||
<div class="stat-label">待处理工单</div>
|
||
<div class="stat-trend">
|
||
<span>点击查看详情</span>
|
||
<el-icon><Right /></el-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-card clickable" @click="goToTickets('completed')">
|
||
<div class="stat-icon" style="background: linear-gradient(135deg, #67c23a, #95d475);">
|
||
<el-icon><Select /></el-icon>
|
||
</div>
|
||
<div class="stat-info">
|
||
<div class="stat-value">{{ dashboardData.completedTickets }}</div>
|
||
<div class="stat-label">已处理工单</div>
|
||
<div class="stat-trend">
|
||
<span>点击查看详情</span>
|
||
<el-icon><Right /></el-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 问题分类统计和产品词云 -->
|
||
<div class="dashboard-charts">
|
||
<el-card class="chart-card">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>问题分类统计</span>
|
||
<el-radio-group v-model="questionStatPeriod" size="small">
|
||
<el-radio-button label="today">今日</el-radio-button>
|
||
<el-radio-button label="week">本周</el-radio-button>
|
||
<el-radio-button label="month">本月</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
</template>
|
||
<div class="question-stats">
|
||
<div
|
||
v-for="item in questionCategories"
|
||
:key="item.name"
|
||
class="question-stat-item clickable"
|
||
@click="goToConversationByCategory(item.name)"
|
||
>
|
||
<div class="stat-bar-header">
|
||
<span class="stat-name">{{ item.name }}</span>
|
||
<span class="stat-count">{{ item.count }} 次</span>
|
||
</div>
|
||
<div class="stat-bar">
|
||
<div
|
||
class="stat-bar-fill"
|
||
:style="{ width: item.percent + '%', background: item.color }"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card class="chart-card">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>涉及产品词云</span>
|
||
<el-button type="primary" link size="small" @click="activeSubNav = 'conversation'">
|
||
查看详情
|
||
<el-icon><Right /></el-icon>
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
<div class="product-cloud">
|
||
<span
|
||
v-for="(product, index) in productCloudData"
|
||
:key="index"
|
||
class="cloud-tag"
|
||
:style="{
|
||
fontSize: product.size + 'px',
|
||
color: product.color,
|
||
opacity: 0.7 + product.weight * 0.3
|
||
}"
|
||
@click="goToConversationByProduct(product.name)"
|
||
>
|
||
{{ product.name }}
|
||
</span>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
|
||
<!-- 快捷入口 -->
|
||
<el-card class="quick-entry-card">
|
||
<template #header>
|
||
<span>快捷入口</span>
|
||
</template>
|
||
<div class="quick-entries">
|
||
<div class="quick-entry-item" @click="activeSubNav = 'knowledge'">
|
||
<el-icon class="entry-icon" style="background: #409eff;"><Document /></el-icon>
|
||
<span>知识库管理</span>
|
||
</div>
|
||
<div class="quick-entry-item" @click="activeSubNav = 'tickets'">
|
||
<el-icon class="entry-icon" style="background: #e6a23c;"><Tickets /></el-icon>
|
||
<span>工单管理</span>
|
||
</div>
|
||
<div class="quick-entry-item" @click="activeSubNav = 'conversation'">
|
||
<el-icon class="entry-icon" style="background: #67c23a;"><ChatDotRound /></el-icon>
|
||
<span>对话数据</span>
|
||
</div>
|
||
<div class="quick-entry-item" @click="activeSubNav = 'agent'">
|
||
<el-icon class="entry-icon" style="background: #909399;"><Service /></el-icon>
|
||
<span>智能体管理</span>
|
||
</div>
|
||
<div class="quick-entry-item" @click="activeSubNav = 'crm'">
|
||
<el-icon class="entry-icon" style="background: #f56c6c;"><User /></el-icon>
|
||
<span>CRM管理</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
|
||
<!-- 知识库管理 -->
|
||
<template v-if="activeSubNav === 'knowledge'">
|
||
<div class="content-header">
|
||
<div class="header-title">
|
||
<h1>知识库管理</h1>
|
||
<p class="subtitle">管理外部和内部知识库文档</p>
|
||
</div>
|
||
<el-button type="primary" @click="showKbUploadDialog = true">
|
||
<el-icon><Upload /></el-icon>
|
||
上传文档
|
||
</el-button>
|
||
</div>
|
||
|
||
<el-card>
|
||
<el-tabs v-model="activeKbType">
|
||
<el-tab-pane label="外部知识库" name="external">
|
||
<p class="tab-desc">面向客户的知识库内容，包含设备操作指南、故障解决方案等</p>
|
||
|
||
<div class="kb-categories">
|
||
<div
|
||
v-for="cat in externalKbCategories"
|
||
:key="cat.key"
|
||
class="kb-category-card"
|
||
:class="{ active: activeExternalKbCat === cat.key }"
|
||
@click="activeExternalKbCat = cat.key"
|
||
>
|
||
<el-icon :style="{ color: cat.color }"><component :is="cat.icon" /></el-icon>
|
||
<span class="cat-name">{{ cat.name }}</span>
|
||
<span class="cat-count">{{ cat.count }} 个文件</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kb-files-section">
|
||
<div class="section-toolbar">
|
||
<h3>{{ currentExternalCatName }}</h3>
|
||
<el-input
|
||
v-model="externalKbSearch"
|
||
placeholder="搜索文件名"
|
||
style="width: 240px;"
|
||
:prefix-icon="Search"
|
||
clearable
|
||
/>
|
||
</div>
|
||
|
||
<el-table :data="filteredExternalKbFiles" style="width: 100%">
|
||
<el-table-column prop="name" label="文件名" min-width="280">
|
||
<template #default="{ row }">
|
||
<div class="file-name-cell">
|
||
<el-icon class="file-icon"><Document /></el-icon>
|
||
<span>{{ row.name }}</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="uploader" label="上传人员" width="120" />
|
||
<el-table-column prop="uploadTime" label="上传时间" width="180" />
|
||
<el-table-column label="操作" width="180" align="center">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" link size="small" @click="previewKbFile(row)">
|
||
<el-icon><View /></el-icon>预览
|
||
</el-button>
|
||
<el-button type="success" link size="small" @click="downloadKbFile(row)">
|
||
<el-icon><Download /></el-icon>下载
|
||
</el-button>
|
||
<el-button type="danger" link size="small" @click="deleteKbFile(row, 'external')">
|
||
<el-icon><Delete /></el-icon>删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="内部知识库" name="internal">
|
||
<p class="tab-desc">内部技术资料与服务规范，仅供内部员工使用</p>
|
||
|
||
<div class="kb-categories">
|
||
<div
|
||
v-for="cat in internalKbCategories"
|
||
:key="cat.key"
|
||
class="kb-category-card"
|
||
:class="{ active: activeInternalKbCat === cat.key }"
|
||
@click="activeInternalKbCat = cat.key"
|
||
>
|
||
<el-icon :style="{ color: cat.color }"><component :is="cat.icon" /></el-icon>
|
||
<span class="cat-name">{{ cat.name }}</span>
|
||
<span class="cat-count">{{ cat.count }} 个文件</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kb-files-section">
|
||
<div class="section-toolbar">
|
||
<h3>{{ currentInternalCatName }}</h3>
|
||
<el-input
|
||
v-model="internalKbSearch"
|
||
placeholder="搜索文件名"
|
||
style="width: 240px;"
|
||
:prefix-icon="Search"
|
||
clearable
|
||
/>
|
||
</div>
|
||
|
||
<el-table :data="filteredInternalKbFiles" style="width: 100%">
|
||
<el-table-column prop="name" label="文件名" min-width="280">
|
||
<template #default="{ row }">
|
||
<div class="file-name-cell">
|
||
<el-icon class="file-icon"><Document /></el-icon>
|
||
<span>{{ row.name }}</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="uploader" label="上传人员" width="120" />
|
||
<el-table-column prop="uploadTime" label="上传时间" width="180" />
|
||
<el-table-column label="操作" width="180" align="center">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" link size="small" @click="previewKbFile(row)">
|
||
<el-icon><View /></el-icon>预览
|
||
</el-button>
|
||
<el-button type="success" link size="small" @click="downloadKbFile(row)">
|
||
<el-icon><Download /></el-icon>下载
|
||
</el-button>
|
||
<el-button type="danger" link size="small" @click="deleteKbFile(row, 'internal')">
|
||
<el-icon><Delete /></el-icon>删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-card>
|
||
</template>
|
||
|
||
<!-- 工单管理 -->
|
||
<template v-if="activeSubNav === 'tickets'">
|
||
<div class="content-header">
|
||
<div class="header-title">
|
||
<h1>工单管理</h1>
|
||
<p class="subtitle">查看和处理客户服务工单</p>
|
||
</div>
|
||
<el-button type="primary" @click="showCreateTicketDialog = true">
|
||
<el-icon><Plus /></el-icon>
|
||
创建工单
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 筛选区 -->
|
||
<el-card class="filter-card">
|
||
<div class="ticket-filters">
|
||
<el-radio-group v-model="ticketStatusFilter" @change="filterTickets">
|
||
<el-radio-button label="all">全部</el-radio-button>
|
||
<el-radio-button label="pending">
|
||
待处理 <el-badge :value="ticketCounts.pending" :max="99" />
|
||
</el-radio-button>
|
||
<el-radio-button label="processing">处理中</el-radio-button>
|
||
<el-radio-button label="completed">已完成</el-radio-button>
|
||
<el-radio-button label="closed">已关闭</el-radio-button>
|
||
</el-radio-group>
|
||
|
||
<div class="filter-right">
|
||
<el-select v-model="ticketTypeFilter" placeholder="故障类型" clearable style="width: 140px;">
|
||
<el-option label="电气系统故障" value="electrical" />
|
||
<el-option label="机械故障" value="mechanical" />
|
||
<el-option label="控制系统故障" value="control" />
|
||
<el-option label="配件更换" value="parts" />
|
||
<el-option label="安装调试" value="install" />
|
||
<el-option label="其他" value="other" />
|
||
</el-select>
|
||
<el-select v-model="ticketUrgencyFilter" placeholder="紧急程度" clearable style="width: 120px;">
|
||
<el-option label="紧急" value="urgent" />
|
||
<el-option label="普通" value="normal" />
|
||
<el-option label="低" value="low" />
|
||
</el-select>
|
||
<el-input
|
||
v-model="ticketSearchKeyword"
|
||
placeholder="搜索工单号/客户/设备"
|
||
style="width: 200px;"
|
||
:prefix-icon="Search"
|
||
clearable
|
||
/>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 工单列表 -->
|
||
<el-card>
|
||
<el-table :data="filteredTicketList" style="width: 100%">
|
||
<el-table-column prop="ticketNo" label="工单号" width="140">
|
||
<template #default="{ row }">
|
||
<span class="ticket-no">{{ row.ticketNo }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="customerName" label="客户信息" width="150">
|
||
<template #default="{ row }">
|
||
<div class="customer-info">
|
||
<span class="name">{{ row.customerName }}</span>
|
||
<span class="phone">{{ row.customerPhone }}</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="faultType" label="故障类型" width="120">
|
||
<template #default="{ row }">
|
||
<el-tag size="small">{{ row.faultTypeName }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="deviceModel" label="设备型号" width="120" />
|
||
<el-table-column prop="urgency" label="紧急程度" width="100">
|
||
<template #default="{ row }">
|
||
<el-tag
|
||
:type="row.urgency === 'urgent' ? 'danger' : row.urgency === 'normal' ? 'warning' : 'info'"
|
||
size="small"
|
||
>
|
||
{{ row.urgencyName }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="status" label="状态" width="100">
|
||
<template #default="{ row }">
|
||
<el-tag
|
||
:type="getTicketStatusType(row.status)"
|
||
size="small"
|
||
>
|
||
{{ row.statusName }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="assignee" label="处理人" width="100">
|
||
<template #default="{ row }">
|
||
<span v-if="row.assignee">{{ row.assignee }}</span>
|
||
<span v-else class="unassigned">未指派</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="source" label="来源" width="100">
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.source === 'chat' ? 'success' : ''" size="small" effect="plain">
|
||
{{ row.source === 'chat' ? '小电对话' : '手动创建' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="createTime" label="创建时间" width="160" />
|
||
<el-table-column label="操作" width="200" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" link size="small" @click="viewTicketDetail(row)">
|
||
详情
|
||
</el-button>
|
||
<el-button
|
||
v-if="row.source === 'chat'"
|
||
type="success"
|
||
link
|
||
size="small"
|
||
@click="viewTicketConversation(row)"
|
||
>
|
||
对话
|
||
</el-button>
|
||
<el-button
|
||
v-if="row.status === 'pending'"
|
||
type="warning"
|
||
link
|
||
size="small"
|
||
@click="showAssignDialog(row)"
|
||
>
|
||
指派
|
||
</el-button>
|
||
<el-button
|
||
v-if="row.status === 'processing'"
|
||
type="success"
|
||
link
|
||
size="small"
|
||
@click="completeTicket(row)"
|
||
>
|
||
完成
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div class="table-pagination">
|
||
<el-pagination
|
||
v-model:current-page="ticketCurrentPage"
|
||
:page-size="10"
|
||
:total="ticketTotal"
|
||
layout="total, prev, pager, next"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
|
||
<!-- 创建工单弹窗 -->
|
||
<el-dialog v-model="showCreateTicketDialog" title="创建工单" width="650px">
|
||
<el-form :model="ticketForm" label-width="90px">
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="客户姓名" required>
|
||
<el-input v-model="ticketForm.customerName" placeholder="请输入客户姓名" :prefix-icon="User" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="联系电话" required>
|
||
<el-input v-model="ticketForm.customerPhone" placeholder="请输入联系电话" :prefix-icon="Phone" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item label="设备型号" required>
|
||
<el-select v-model="ticketForm.deviceModel" placeholder="请选择设备型号" style="width: 100%;">
|
||
<el-option label="TH-500GF" value="TH-500GF" />
|
||
<el-option label="TH-300D" value="TH-300D" />
|
||
<el-option label="TH-800GF" value="TH-800GF" />
|
||
<el-option label="S-200X" value="S-200X" />
|
||
<el-option label="S-150X" value="S-150X" />
|
||
<el-option label="G-100S" value="G-100S" />
|
||
<el-option label="G-200S" value="G-200S" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="故障类型" required>
|
||
<el-select v-model="ticketForm.faultType" placeholder="请选择故障类型" style="width: 100%;">
|
||
<el-option label="电气系统故障" value="electrical" />
|
||
<el-option label="机械故障" value="mechanical" />
|
||
<el-option label="控制系统故障" value="control" />
|
||
<el-option label="配件更换" value="parts" />
|
||
<el-option label="安装调试" value="install" />
|
||
<el-option label="其他" value="other" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="故障描述" required>
|
||
<el-input
|
||
v-model="ticketForm.faultDesc"
|
||
type="textarea"
|
||
:rows="4"
|
||
placeholder="请详细描述故障现象..."
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="紧急程度" required>
|
||
<el-select v-model="ticketForm.urgency" placeholder="请选择紧急程度" style="width: 100%;">
|
||
<el-option label="紧急" value="urgent" />
|
||
<el-option label="普通" value="normal" />
|
||
<el-option label="低" value="low" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="现场地址">
|
||
<el-input v-model="ticketForm.address" placeholder="请输入现场详细地址" />
|
||
</el-form-item>
|
||
<el-form-item label="故障照片">
|
||
<el-upload
|
||
action="#"
|
||
list-type="picture-card"
|
||
:auto-upload="false"
|
||
:limit="9"
|
||
>
|
||
<el-icon><Plus /></el-icon>
|
||
<template #tip>
|
||
<div class="el-upload__tip">支持jpg、png格式，最多上传9张</div>
|
||
</template>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item label="设备铭牌">
|
||
<el-input v-model="ticketForm.nameplate" placeholder="请输入设备铭牌信息" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="showCreateTicketDialog = false">取消</el-button>
|
||
<el-button type="primary" @click="submitCreateTicket">提交工单</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 工单详情弹窗 -->
|
||
<el-dialog v-model="showTicketDetailDialog" title="工单详情" width="750px">
|
||
<div class="ticket-detail" v-if="currentTicket">
|
||
<div class="detail-header">
|
||
<div class="ticket-info">
|
||
<span class="ticket-no">{{ currentTicket.ticketNo }}</span>
|
||
<el-tag :type="getTicketStatusType(currentTicket.status)">{{ currentTicket.statusName }}</el-tag>
|
||
<el-tag :type="currentTicket.urgency === 'urgent' ? 'danger' : currentTicket.urgency === 'normal' ? 'warning' : 'info'">
|
||
{{ currentTicket.urgencyName }}
|
||
</el-tag>
|
||
</div>
|
||
<div class="detail-actions">
|
||
<el-button
|
||
v-if="currentTicket.source === 'chat'"
|
||
type="primary"
|
||
size="small"
|
||
@click="viewTicketConversation(currentTicket)"
|
||
>
|
||
<el-icon><ChatDotRound /></el-icon>
|
||
查看对话
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<el-descriptions :column="2" border>
|
||
<el-descriptions-item label="客户姓名">{{ currentTicket.customerName }}</el-descriptions-item>
|
||
<el-descriptions-item label="联系电话">{{ currentTicket.customerPhone }}</el-descriptions-item>
|
||
<el-descriptions-item label="设备型号">{{ currentTicket.deviceModel }}</el-descriptions-item>
|
||
<el-descriptions-item label="故障类型">{{ currentTicket.faultTypeName }}</el-descriptions-item>
|
||
<el-descriptions-item label="现场地址" :span="2">{{ currentTicket.address || '-' }}</el-descriptions-item>
|
||
<el-descriptions-item label="故障描述" :span="2">{{ currentTicket.faultDesc }}</el-descriptions-item>
|
||
<el-descriptions-item label="设备铭牌" :span="2">{{ currentTicket.nameplate || '-' }}</el-descriptions-item>
|
||
<el-descriptions-item label="工单来源">
|
||
<el-tag :type="currentTicket.source === 'chat' ? 'success' : ''" size="small">
|
||
{{ currentTicket.source === 'chat' ? '小电对话' : '手动创建' }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="处理人">{{ currentTicket.assignee || '未指派' }}</el-descriptions-item>
|
||
<el-descriptions-item label="创建时间">{{ currentTicket.createTime }}</el-descriptions-item>
|
||
<el-descriptions-item label="更新时间">{{ currentTicket.updateTime }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<!-- 故障照片 -->
|
||
<div class="detail-section" v-if="currentTicket.images && currentTicket.images.length > 0">
|
||
<h4>
|
||
<el-icon><Picture /></el-icon>
|
||
故障照片
|
||
</h4>
|
||
<div class="ticket-images">
|
||
<el-image
|
||
v-for="(img, index) in currentTicket.images"
|
||
:key="index"
|
||
:src="img"
|
||
:preview-src-list="currentTicket.images"
|
||
:initial-index="index"
|
||
fit="cover"
|
||
class="ticket-image-item"
|
||
>
|
||
<template #error>
|
||
<div class="image-error">
|
||
<el-icon><Picture /></el-icon>
|
||
</div>
|
||
</template>
|
||
</el-image>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h4>处理记录</h4>
|
||
<el-timeline>
|
||
<el-timeline-item
|
||
v-for="(log, index) in currentTicket.logs"
|
||
:key="index"
|
||
:timestamp="log.time"
|
||
:type="log.type"
|
||
>
|
||
<div class="log-content">
|
||
<span class="log-operator">{{ log.operator }}</span>
|
||
<span class="log-action">{{ log.action }}</span>
|
||
</div>
|
||
<div v-if="log.remark" class="log-remark">{{ log.remark }}</div>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<el-button @click="showTicketDetailDialog = false">关闭</el-button>
|
||
<el-button v-if="currentTicket?.status === 'pending'" type="warning" @click="showAssignDialogFromDetail">
|
||
指派工程师
|
||
</el-button>
|
||
<el-button v-if="currentTicket?.status === 'processing'" type="success" @click="completeTicket(currentTicket)">
|
||
完成工单
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 指派工程师弹窗 -->
|
||
<el-dialog v-model="showAssignTicketDialog" title="指派工程师" width="600px">
|
||
<div class="assign-dialog">
|
||
<div class="ai-recommend" v-if="aiRecommendEngineer">
|
||
<div class="recommend-header">
|
||
<el-icon><MagicStick /></el-icon>
|
||
<span>智能推荐</span>
|
||
</div>
|
||
<div class="recommend-content">
|
||
<div class="engineer-card recommended" @click="selectedEngineer = aiRecommendEngineer.id">
|
||
<el-radio :model-value="selectedEngineer" :value="aiRecommendEngineer.id">
|
||
<div class="engineer-info">
|
||
<el-avatar :size="40">{{ aiRecommendEngineer.name.charAt(0) }}</el-avatar>
|
||
<div class="info-text">
|
||
<div class="name">{{ aiRecommendEngineer.name }}</div>
|
||
<div class="title">{{ aiRecommendEngineer.title }}</div>
|
||
</div>
|
||
<div class="match-score">
|
||
<span class="score">{{ aiRecommendEngineer.matchScore }}%</span>
|
||
<span class="label">匹配度</span>
|
||
</div>
|
||
</div>
|
||
</el-radio>
|
||
</div>
|
||
<div class="recommend-reason">
|
||
<el-icon><InfoFilled /></el-icon>
|
||
<span>{{ aiRecommendEngineer.reason }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="engineer-list">
|
||
<div class="list-header">
|
||
<span>全部工程师</span>
|
||
<el-input
|
||
v-model="engineerSearch"
|
||
placeholder="搜索工程师"
|
||
style="width: 180px;"
|
||
size="small"
|
||
clearable
|
||
/>
|
||
</div>
|
||
<div class="list-content">
|
||
<div
|
||
v-for="eng in filteredEngineers"
|
||
:key="eng.id"
|
||
class="engineer-card"
|
||
:class="{ selected: selectedEngineer === eng.id }"
|
||
@click="selectedEngineer = eng.id"
|
||
>
|
||
<el-radio :model-value="selectedEngineer" :value="eng.id">
|
||
<div class="engineer-info">
|
||
<el-avatar :size="36">{{ eng.name.charAt(0) }}</el-avatar>
|
||
<div class="info-text">
|
||
<div class="name">{{ eng.name }}</div>
|
||
<div class="title">{{ eng.title }} | 当前工单: {{ eng.currentTickets }}个</div>
|
||
</div>
|
||
</div>
|
||
</el-radio>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<el-button @click="showAssignTicketDialog = false">取消</el-button>
|
||
<el-button type="primary" @click="confirmAssignTicket" :disabled="!selectedEngineer">确认指派</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 对话记录弹窗 -->
|
||
<el-dialog v-model="showConversationDialog" title="对话记录" width="700px">
|
||
<el-tabs v-model="conversationTab">
|
||
<el-tab-pane label="对话记录" name="record">
|
||
<div class="conversation-record">
|
||
<div
|
||
v-for="(msg, index) in currentConversation"
|
||
:key="index"
|
||
class="message-item"
|
||
:class="msg.role"
|
||
>
|
||
<div class="message-avatar">
|
||
<el-avatar v-if="msg.role === 'user'" :size="36">客</el-avatar>
|
||
<el-avatar v-else :size="36" style="background: #7c3aed;">电</el-avatar>
|
||
</div>
|
||
<div class="message-content">
|
||
<div class="message-header">
|
||
<span class="sender">{{ msg.role === 'user' ? '客户' : '小电' }}</span>
|
||
<span class="time">{{ msg.time }}</span>
|
||
</div>
|
||
<div class="message-text">{{ msg.content }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="对话纪要" name="summary">
|
||
<div class="conversation-summary">
|
||
<div class="summary-section">
|
||
<h4><el-icon><Document /></el-icon> 问题概述</h4>
|
||
<p>{{ conversationSummary.overview }}</p>
|
||
</div>
|
||
<div class="summary-section">
|
||
<h4><el-icon><Warning /></el-icon> 客户诉求</h4>
|
||
<ul>
|
||
<li v-for="(item, index) in conversationSummary.demands" :key="index">{{ item }}</li>
|
||
</ul>
|
||
</div>
|
||
<div class="summary-section">
|
||
<h4><el-icon><InfoFilled /></el-icon> 关键信息</h4>
|
||
<el-descriptions :column="1" border size="small">
|
||
<el-descriptions-item label="设备型号">{{ conversationSummary.deviceModel }}</el-descriptions-item>
|
||
<el-descriptions-item label="故障现象">{{ conversationSummary.faultSymptom }}</el-descriptions-item>
|
||
<el-descriptions-item label="发生时间">{{ conversationSummary.occurTime }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-dialog>
|
||
|
||
<!-- 对话数据管理 -->
|
||
<template v-if="activeSubNav === 'conversation'">
|
||
<div class="content-header">
|
||
<div class="header-title">
|
||
<h1>对话数据管理</h1>
|
||
<p class="subtitle">管理和分析客服对话数据</p>
|
||
</div>
|
||
<el-button type="primary" @click="exportConversations">
|
||
<el-icon><Download /></el-icon>
|
||
导出数据
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 筛选区 -->
|
||
<el-card class="filter-card">
|
||
<div class="conversation-filters">
|
||
<el-date-picker
|
||
v-model="conversationDateRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
style="width: 260px;"
|
||
value-format="YYYY-MM-DD"
|
||
/>
|
||
<el-select v-model="conversationCategoryFilter" placeholder="问题分类" clearable style="width: 140px;">
|
||
<el-option label="设备操作咨询" value="device" />
|
||
<el-option label="故障报修" value="fault" />
|
||
<el-option label="配件购买" value="parts" />
|
||
<el-option label="保修政策" value="warranty" />
|
||
<el-option label="安装指导" value="install" />
|
||
<el-option label="其他问题" value="other" />
|
||
</el-select>
|
||
<el-select v-model="conversationStatusFilter" placeholder="对话状态" clearable style="width: 120px;">
|
||
<el-option label="已完成" value="completed" />
|
||
<el-option label="已转工单" value="ticket" />
|
||
<el-option label="未解决" value="unresolved" />
|
||
</el-select>
|
||
<el-input
|
||
v-model="conversationSearchKeyword"
|
||
placeholder="搜索客户/设备/内容"
|
||
style="width: 200px;"
|
||
:prefix-icon="Search"
|
||
clearable
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 对话列表 -->
|
||
<el-card>
|
||
<el-table :data="filteredConversationList" style="width: 100%">
|
||
<el-table-column prop="sessionId" label="会话ID" width="140">
|
||
<template #default="{ row }">
|
||
<span class="session-id">{{ row.sessionId }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="customerName" label="客户信息" width="140">
|
||
<template #default="{ row }">
|
||
<div class="customer-info">
|
||
<span class="name">{{ row.customerName }}</span>
|
||
<span class="phone">{{ row.customerPhone }}</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="category" label="问题分类" width="120">
|
||
<template #default="{ row }">
|
||
<el-tag size="small">{{ row.categoryName }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="deviceModel" label="涉及产品" width="110" />
|
||
<el-table-column prop="summary" label="对话摘要" min-width="200">
|
||
<template #default="{ row }">
|
||
<span class="conversation-summary-text">{{ row.summary }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="messageCount" label="消息数" width="80" align="center" />
|
||
<el-table-column prop="status" label="状态" width="100">
|
||
<template #default="{ row }">
|
||
<el-tag
|
||
:type="row.status === 'completed' ? 'success' : row.status === 'ticket' ? 'warning' : 'danger'"
|
||
size="small"
|
||
>
|
||
{{ row.statusName }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="satisfaction" label="满意度" width="100">
|
||
<template #default="{ row }">
|
||
<div class="satisfaction-stars" v-if="row.satisfaction">
|
||
<el-icon v-for="n in row.satisfaction" :key="n" class="star-filled"><StarFilled /></el-icon>
|
||
<el-icon v-for="n in (5 - row.satisfaction)" :key="'empty-' + n" class="star-empty"><Star /></el-icon>
|
||
</div>
|
||
<span v-else class="no-rating">未评价</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="startTime" label="对话时间" width="160" />
|
||
<el-table-column label="操作" width="120" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" link size="small" @click="viewConversationDetail(row)">
|
||
<el-icon><View /></el-icon>
|
||
查看
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div class="table-pagination">
|
||
<el-pagination
|
||
v-model:current-page="conversationCurrentPage"
|
||
:page-size="10"
|
||
:total="conversationTotal"
|
||
layout="total, prev, pager, next"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
|
||
<!-- 对话详情弹窗 -->
|
||
<el-dialog v-model="showConversationDetailDialog" title="对话详情" width="800px">
|
||
<div class="conversation-detail-header" v-if="currentConversationDetail">
|
||
<div class="detail-info">
|
||
<span class="session-id">{{ currentConversationDetail.sessionId }}</span>
|
||
<el-tag :type="currentConversationDetail.status === 'completed' ? 'success' : currentConversationDetail.status === 'ticket' ? 'warning' : 'danger'" size="small">
|
||
{{ currentConversationDetail.statusName }}
|
||
</el-tag>
|
||
<el-tag size="small">{{ currentConversationDetail.categoryName }}</el-tag>
|
||
</div>
|
||
<div class="detail-meta">
|
||
<span>客户：{{ currentConversationDetail.customerName }}</span>
|
||
<span>设备：{{ currentConversationDetail.deviceModel }}</span>
|
||
<span>时间：{{ currentConversationDetail.startTime }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<el-tabs v-model="conversationDetailTab">
|
||
<el-tab-pane label="对话记录" name="record">
|
||
<div class="conversation-record">
|
||
<div
|
||
v-for="(msg, index) in currentConversationMessages"
|
||
:key="index"
|
||
class="message-item"
|
||
:class="msg.role"
|
||
>
|
||
<div class="message-avatar">
|
||
<el-avatar v-if="msg.role === 'user'" :size="36">客</el-avatar>
|
||
<el-avatar v-else :size="36" style="background: #7c3aed;">电</el-avatar>
|
||
</div>
|
||
<div class="message-content">
|
||
<div class="message-header">
|
||
<span class="sender">{{ msg.role === 'user' ? '客户' : '小电' }}</span>
|
||
<span class="time">{{ msg.time }}</span>
|
||
</div>
|
||
<div class="message-text">{{ msg.content }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="对话概要" name="summary">
|
||
<div class="conversation-summary" v-if="currentConversationDetail">
|
||
<div class="summary-section">
|
||
<h4><el-icon><Document /></el-icon> 问题概述</h4>
|
||
<p>{{ currentConversationDetail.summaryDetail?.overview }}</p>
|
||
</div>
|
||
<div class="summary-section">
|
||
<h4><el-icon><Warning /></el-icon> 客户诉求</h4>
|
||
<ul>
|
||
<li v-for="(item, index) in currentConversationDetail.summaryDetail?.demands" :key="index">{{ item }}</li>
|
||
</ul>
|
||
</div>
|
||
<div class="summary-section">
|
||
<h4><el-icon><Select /></el-icon> 解决方案</h4>
|
||
<p>{{ currentConversationDetail.summaryDetail?.solution }}</p>
|
||
</div>
|
||
<div class="summary-section">
|
||
<h4><el-icon><InfoFilled /></el-icon> 关键信息</h4>
|
||
<el-descriptions :column="2" border size="small">
|
||
<el-descriptions-item label="涉及设备">{{ currentConversationDetail.deviceModel }}</el-descriptions-item>
|
||
<el-descriptions-item label="问题分类">{{ currentConversationDetail.categoryName }}</el-descriptions-item>
|
||
<el-descriptions-item label="对话时长">{{ currentConversationDetail.duration }}</el-descriptions-item>
|
||
<el-descriptions-item label="消息数量">{{ currentConversationDetail.messageCount }} 条</el-descriptions-item>
|
||
<el-descriptions-item label="是否转工单">
|
||
<el-tag :type="currentConversationDetail.status === 'ticket' ? 'warning' : 'info'" size="small">
|
||
{{ currentConversationDetail.status === 'ticket' ? '是' : '否' }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="客户满意度">
|
||
<div class="satisfaction-stars" v-if="currentConversationDetail.satisfaction">
|
||
<el-icon v-for="n in currentConversationDetail.satisfaction" :key="n" class="star-filled"><StarFilled /></el-icon>
|
||
</div>
|
||
<span v-else>未评价</span>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-dialog>
|
||
|
||
<!-- 智能体管理 -->
|
||
<template v-if="activeSubNav === 'agent'">
|
||
<div class="content-header">
|
||
<div class="header-title">
|
||
<h1>智能体管理</h1>
|
||
<p class="subtitle">配置和管理AI智能客服</p>
|
||
</div>
|
||
</div>
|
||
|
||
<el-card class="agent-config-card">
|
||
<!-- 智能体头部信息 -->
|
||
<div class="agent-header">
|
||
<div class="agent-avatar">
|
||
<el-avatar :size="56" style="background: linear-gradient(135deg, #7c3aed, #a855f7);">
|
||
<el-icon :size="28"><Service /></el-icon>
|
||
</el-avatar>
|
||
</div>
|
||
<div class="agent-info">
|
||
<h2>泰豪小电</h2>
|
||
<span class="agent-type">智能问答助手</span>
|
||
</div>
|
||
<el-tag type="success" class="agent-status">已发布</el-tag>
|
||
</div>
|
||
|
||
<el-divider />
|
||
|
||
<!-- 配置表单 -->
|
||
<el-form :model="agentConfig" label-position="top" class="agent-form">
|
||
<el-form-item label="助手名称">
|
||
<el-input v-model="agentConfig.name" placeholder="请输入助手名称" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="对话风格">
|
||
<el-radio-group v-model="agentConfig.style">
|
||
<el-radio value="professional">简洁专业</el-radio>
|
||
<el-radio value="friendly">友好亲切</el-radio>
|
||
<el-radio value="detailed">详细解答</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="助手描述" class="full-width">
|
||
<el-input
|
||
v-model="agentConfig.description"
|
||
type="textarea"
|
||
:rows="2"
|
||
placeholder="请输入助手描述，将作为开场白展示"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="功能开关" class="full-width">
|
||
<div class="feature-switches">
|
||
<el-checkbox v-model="agentConfig.features.autoGreeting">自动问候</el-checkbox>
|
||
<el-checkbox v-model="agentConfig.features.smartRecommend">智能推荐</el-checkbox>
|
||
<el-checkbox v-model="agentConfig.features.conversationRecord">对话记录</el-checkbox>
|
||
<el-checkbox v-model="agentConfig.features.voiceChat">语音对话</el-checkbox>
|
||
<el-checkbox v-model="agentConfig.features.ticketGuide">工单引导</el-checkbox>
|
||
<el-checkbox v-model="agentConfig.features.satisfaction">满意度评价</el-checkbox>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="响应延迟（毫秒）">
|
||
<el-input-number
|
||
v-model="agentConfig.responseDelay"
|
||
:min="0"
|
||
:max="5000"
|
||
:step="100"
|
||
style="width: 100%;"
|
||
/>
|
||
<div class="form-tip">模拟AI思考时间，建议设置为800-1500ms</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="最大回复长度（字符）">
|
||
<el-input-number
|
||
v-model="agentConfig.maxReplyLength"
|
||
:min="100"
|
||
:max="2000"
|
||
:step="100"
|
||
style="width: 100%;"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item class="form-actions">
|
||
<el-button type="primary" @click="saveAgentConfig">保存配置</el-button>
|
||
<el-button @click="resetAgentConfig">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
</template>
|
||
|
||
<!-- 知识库日志 -->
|
||
<template v-if="activeSubNav === 'log-knowledge'">
|
||
<div class="content-header">
|
||
<div class="header-title">
|
||
<h1>知识库日志</h1>
|
||
<p class="subtitle">查看知识库操作记录</p>
|
||
</div>
|
||
<el-button @click="exportKnowledgeLogs">
|
||
<el-icon><Download /></el-icon>
|
||
导出日志
|
||
</el-button>
|
||
</div>
|
||
|
||
<el-card class="filter-card">
|
||
<div class="log-filters">
|
||
<el-date-picker
|
||
v-model="knowledgeLogDateRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
style="width: 260px;"
|
||
value-format="YYYY-MM-DD"
|
||
/>
|
||
<el-select v-model="knowledgeLogTypeFilter" placeholder="操作类型" clearable style="width: 120px;">
|
||
<el-option label="上传" value="upload" />
|
||
<el-option label="更新" value="update" />
|
||
<el-option label="删除" value="delete" />
|
||
<el-option label="重新索引" value="reindex" />
|
||
</el-select>
|
||
<el-select v-model="knowledgeLogOperatorFilter" placeholder="操作人" clearable style="width: 120px;">
|
||
<el-option label="李志鹏" value="李志鹏" />
|
||
<el-option label="张伟" value="张伟" />
|
||
<el-option label="系统" value="系统" />
|
||
</el-select>
|
||
<el-input
|
||
v-model="knowledgeLogSearch"
|
||
placeholder="搜索文档名称"
|
||
style="width: 180px;"
|
||
:prefix-icon="Search"
|
||
clearable
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card>
|
||
<el-table :data="filteredKnowledgeLogs" style="width: 100%">
|
||
<el-table-column prop="time" label="操作时间" width="170" />
|
||
<el-table-column prop="type" label="操作类型" width="100">
|
||
<template #default="{ row }">
|
||
<el-tag
|
||
:type="row.type === 'upload' ? 'success' : row.type === 'delete' ? 'danger' : row.type === 'update' ? 'warning' : 'info'"
|
||
size="small"
|
||
>
|
||
{{ row.typeName }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="docName" label="文档名称" min-width="200" />
|
||
<el-table-column prop="category" label="文档分类" width="120" />
|
||
<el-table-column prop="operator" label="操作人" width="100" />
|
||
<el-table-column prop="result" label="操作结果" width="100">
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.result === 'success' ? 'success' : 'danger'" size="small">
|
||
{{ row.result === 'success' ? '成功' : '失败' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="remark" label="备注" min-width="150" />
|
||
</el-table>
|
||
|
||
<div class="table-pagination">
|
||
<el-pagination
|
||
v-model:current-page="knowledgeLogPage"
|
||
:page-size="10"
|
||
:total="knowledgeLogTotal"
|
||
layout="total, prev, pager, next"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
|
||
<!-- 工单日志 -->
|
||
<template v-if="activeSubNav === 'log-ticket'">
|
||
<div class="content-header">
|
||
<div class="header-title">
|
||
<h1>工单日志</h1>
|
||
<p class="subtitle">查看工单操作记录</p>
|
||
</div>
|
||
<el-button @click="exportTicketLogs">
|
||
<el-icon><Download /></el-icon>
|
||
导出日志
|
||
</el-button>
|
||
</div>
|
||
|
||
<el-card class="filter-card">
|
||
<div class="log-filters">
|
||
<el-date-picker
|
||
v-model="ticketLogDateRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
style="width: 260px;"
|
||
value-format="YYYY-MM-DD"
|
||
/>
|
||
<el-input
|
||
v-model="ticketLogNoFilter"
|
||
placeholder="工单号"
|
||
style="width: 160px;"
|
||
clearable
|
||
/>
|
||
<el-select v-model="ticketLogTypeFilter" placeholder="操作类型" clearable style="width: 120px;">
|
||
<el-option label="创建" value="create" />
|
||
<el-option label="指派" value="assign" />
|
||
<el-option label="转派" value="transfer" />
|
||
<el-option label="完成" value="complete" />
|
||
<el-option label="关闭" value="close" />
|
||
</el-select>
|
||
<el-select v-model="ticketLogOperatorFilter" placeholder="操作人" clearable style="width: 120px;">
|
||
<el-option label="系统" value="系统" />
|
||
<el-option label="李志鹏" value="李志鹏" />
|
||
<el-option label="小李" value="小李" />
|
||
<el-option label="小王" value="小王" />
|
||
</el-select>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card>
|
||
<el-table :data="filteredTicketLogs" style="width: 100%">
|
||
<el-table-column prop="time" label="操作时间" width="170" />
|
||
<el-table-column prop="ticketNo" label="工单号" width="160">
|
||
<template #default="{ row }">
|
||
<span class="ticket-no">{{ row.ticketNo }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="type" label="操作类型" width="100">
|
||
<template #default="{ row }">
|
||
<el-tag
|
||
:type="row.type === 'create' ? 'primary' : row.type === 'assign' ? 'warning' : row.type === 'complete' ? 'success' : row.type === 'close' ? 'info' : ''"
|
||
size="small"
|
||
>
|
||
{{ row.typeName }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="operator" label="操作人" width="100" />
|
||
<el-table-column prop="content" label="操作内容" min-width="250" />
|
||
<el-table-column prop="ip" label="IP地址" width="140" />
|
||
</el-table>
|
||
|
||
<div class="table-pagination">
|
||
<el-pagination
|
||
v-model:current-page="ticketLogPage"
|
||
:page-size="10"
|
||
:total="ticketLogTotal"
|
||
layout="total, prev, pager, next"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
|
||
<!-- 系统日志 -->
|
||
<template v-if="activeSubNav === 'log-system'">
|
||
<div class="content-header">
|
||
<div class="header-title">
|
||
<h1>系统日志</h1>
|
||
<p class="subtitle">查看系统配置变更与异常信息</p>
|
||
</div>
|
||
<el-button @click="exportSystemLogs">
|
||
<el-icon><Download /></el-icon>
|
||
导出日志
|
||
</el-button>
|
||
</div>
|
||
|
||
<el-card class="filter-card">
|
||
<div class="log-filters">
|
||
<el-date-picker
|
||
v-model="systemLogDateRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
style="width: 260px;"
|
||
value-format="YYYY-MM-DD"
|
||
/>
|
||
<el-select v-model="systemLogTypeFilter" placeholder="日志类型" clearable style="width: 120px;">
|
||
<el-option label="配置变更" value="config" />
|
||
<el-option label="系统异常" value="error" />
|
||
</el-select>
|
||
<el-select v-model="systemLogLevelFilter" placeholder="日志级别" clearable style="width: 120px;">
|
||
<el-option label="INFO" value="info" />
|
||
<el-option label="WARN" value="warn" />
|
||
<el-option label="ERROR" value="error" />
|
||
</el-select>
|
||
<el-select v-model="systemLogModuleFilter" placeholder="模块" clearable style="width: 140px;">
|
||
<el-option label="智能体配置" value="agent" />
|
||
<el-option label="知识库索引" value="knowledge" />
|
||
<el-option label="对话服务" value="chat" />
|
||
<el-option label="API调用" value="api" />
|
||
</el-select>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card>
|
||
<el-table :data="filteredSystemLogs" style="width: 100%">
|
||
<el-table-column prop="time" label="时间" width="170" />
|
||
<el-table-column prop="logType" label="类型" width="100">
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.logType === 'config' ? 'primary' : 'danger'" size="small">
|
||
{{ row.logType === 'config' ? '配置变更' : '系统异常' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="level" label="级别" width="80">
|
||
<template #default="{ row }">
|
||
<span
|
||
class="log-level"
|
||
:class="row.level"
|
||
>
|
||
{{ row.level.toUpperCase() }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="module" label="模块" width="120">
|
||
<template #default="{ row }">
|
||
<el-tag size="small" type="info">{{ row.moduleName }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="operator" label="操作人" width="100" />
|
||
<el-table-column prop="content" label="内容" min-width="300" />
|
||
</el-table>
|
||
|
||
<div class="table-pagination">
|
||
<el-pagination
|
||
v-model:current-page="systemLogPage"
|
||
:page-size="10"
|
||
:total="systemLogTotal"
|
||
layout="total, prev, pager, next"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
|
||
<!-- CRM管理 -->
|
||
<template v-if="activeSubNav === 'crm'">
|
||
<div class="content-header">
|
||
<div class="header-title">
|
||
<h1>CRM管理</h1>
|
||
<p class="subtitle">客户关系管理系统</p>
|
||
</div>
|
||
<el-button type="primary">
|
||
<el-icon><User /></el-icon>
|
||
新建客户
|
||
</el-button>
|
||
</div>
|
||
<el-card>
|
||
<div class="placeholder-content">
|
||
<el-icon class="placeholder-icon"><User /></el-icon>
|
||
<h3>CRM管理功能开发中</h3>
|
||
<p>此功能正在开发中，敬请期待...</p>
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- 知识库上传对话框 -->
|
||
<el-dialog v-model="showKbUploadDialog" title="上传知识库文件" width="600px">
|
||
<el-form :model="kbUploadForm" label-width="100px">
|
||
<el-form-item label="选择文件" required>
|
||
<el-upload
|
||
:auto-upload="false"
|
||
:on-change="handleKbFileChange"
|
||
:limit="1"
|
||
accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx"
|
||
>
|
||
<template #trigger>
|
||
<el-button type="primary">
|
||
<el-icon><Upload /></el-icon>
|
||
选择文件
|
||
</el-button>
|
||
</template>
|
||
<template #tip>
|
||
<div class="el-upload__tip">支持 PDF、Word、Excel、PPT 格式</div>
|
||
</template>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item label="文件名称" required>
|
||
<el-input v-model="kbUploadForm.name" placeholder="上传时自动识别" />
|
||
</el-form-item>
|
||
<el-form-item label="知识库类型" required>
|
||
<el-radio-group v-model="kbUploadForm.type" @change="kbUploadForm.category = ''">
|
||
<el-radio label="external">外部知识库</el-radio>
|
||
<el-radio label="internal">内部知识库</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="文件分类" required>
|
||
<el-select v-model="kbUploadForm.category" placeholder="请选择分类" style="width: 100%;">
|
||
<template v-if="kbUploadForm.type === 'external'">
|
||
<el-option label="设备操作指南" value="device-guide" />
|
||
<el-option label="常见故障解决方案" value="fault-solution" />
|
||
<el-option label="三包外服务政策" value="service-policy" />
|
||
<el-option label="配件咨询话术" value="parts-consult" />
|
||
</template>
|
||
<template v-else>
|
||
<el-option label="技术维修手册" value="tech-manual" />
|
||
<el-option label="产品参数明细" value="product-params" />
|
||
<el-option label="内部服务流程规范" value="service-process" />
|
||
<el-option label="客户服务话术模板" value="service-script" />
|
||
</template>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="上传人员" required>
|
||
<el-input v-model="kbUploadForm.uploader" placeholder="自动匹配当前用户" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="aiRecognizeKbFile" :loading="kbAiRecognizing">
|
||
<el-icon><MagicStick /></el-icon>
|
||
AI智能识别
|
||
</el-button>
|
||
<span style="margin-left: 12px; color: #909399; font-size: 13px;">自动识别并填充分类信息</span>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="showKbUploadDialog = false">取消</el-button>
|
||
<el-button type="primary" @click="confirmKbUpload">确认上传</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 个人中心 -->
|
||
<div v-if="activeNav === 'profile'" class="admin-content profile-content">
|
||
<div class="content-header">
|
||
<h1>个人中心</h1>
|
||
<p class="subtitle">管理您的个人信息和账户设置</p>
|
||
</div>
|
||
|
||
<div class="profile-main">
|
||
<el-tabs v-model="activeProfileTab">
|
||
<el-tab-pane label="基本信息" name="basic">
|
||
<el-card>
|
||
<div class="profile-section">
|
||
<div class="avatar-section">
|
||
<el-avatar :size="100" src="/avatar.svg">李志鹏</el-avatar>
|
||
<el-button type="primary" size="small" style="margin-top: 16px;">
|
||
<el-icon><Upload /></el-icon>
|
||
更换头像
|
||
</el-button>
|
||
</div>
|
||
|
||
<el-form :model="profileForm" label-width="100px" style="max-width: 600px;">
|
||
<el-form-item label="姓名">
|
||
<el-input v-model="profileForm.name" />
|
||
</el-form-item>
|
||
<el-form-item label="工号">
|
||
<el-input v-model="profileForm.employeeId" disabled />
|
||
</el-form-item>
|
||
<el-form-item label="部门">
|
||
<el-input v-model="profileForm.department" />
|
||
</el-form-item>
|
||
<el-form-item label="职位">
|
||
<el-input v-model="profileForm.position" />
|
||
</el-form-item>
|
||
<el-form-item label="手机号">
|
||
<el-input v-model="profileForm.phone" />
|
||
</el-form-item>
|
||
<el-form-item label="邮箱">
|
||
<el-input v-model="profileForm.email" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="saveProfile">保存修改</el-button>
|
||
<el-button @click="resetProfile">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</el-card>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="账户安全" name="security">
|
||
<el-card>
|
||
<div class="security-section">
|
||
<div class="security-item">
|
||
<div class="security-info">
|
||
<h3>登录密码</h3>
|
||
<p>定期更换密码可以提高账户安全性</p>
|
||
</div>
|
||
<el-button type="primary" link @click="showPasswordDialog = true">修改密码</el-button>
|
||
</div>
|
||
|
||
<el-divider />
|
||
|
||
<div class="security-item">
|
||
<div class="security-info">
|
||
<h3>双因素认证</h3>
|
||
<p>开启后登录需要验证码，更加安全</p>
|
||
</div>
|
||
<el-switch v-model="twoFactorEnabled" />
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="操作日志" name="logs">
|
||
<el-card>
|
||
<el-table :data="operationLogs" style="width: 100%">
|
||
<el-table-column prop="time" label="时间" width="180" />
|
||
<el-table-column prop="action" label="操作" width="200" />
|
||
<el-table-column prop="ip" label="IP地址" width="150" />
|
||
<el-table-column prop="device" label="设备" />
|
||
</el-table>
|
||
</el-card>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import {
|
||
Setting,
|
||
Document,
|
||
Service,
|
||
Back,
|
||
User,
|
||
Warning,
|
||
Select,
|
||
Clock,
|
||
Files,
|
||
DArrowRight,
|
||
DataLine,
|
||
Tickets,
|
||
Upload,
|
||
View,
|
||
Download,
|
||
Delete,
|
||
Search,
|
||
MagicStick,
|
||
Tools,
|
||
QuestionFilled,
|
||
ChatDotRound,
|
||
List,
|
||
ArrowDown,
|
||
Top,
|
||
Right,
|
||
Plus,
|
||
Phone,
|
||
InfoFilled,
|
||
Picture,
|
||
StarFilled,
|
||
Star
|
||
} from '@element-plus/icons-vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
|
||
const router = useRouter()
|
||
const activeNav = ref('platform')
|
||
const activeSubNav = ref('dashboard')
|
||
|
||
const navItems = [
|
||
{ key: 'platform', label: '平台管理后台', icon: 'Setting' },
|
||
{ key: 'bidding', label: '智能标书管理后台', icon: 'Document' },
|
||
{ key: 'service', label: '泰豪小电管理后台', icon: 'Service' }
|
||
]
|
||
|
||
// 平台管理后台的子导航
|
||
const platformSubNav = [
|
||
{ key: 'dashboard', label: '数据概览', icon: 'DataLine' },
|
||
{ key: 'users', label: '用户管理', icon: 'User' },
|
||
{ key: 'knowledge', label: '知识库', icon: 'Document' },
|
||
{ key: 'settings', label: '系统配置', icon: 'Setting' }
|
||
]
|
||
|
||
// 智能标书管理后台的子导航
|
||
const biddingSubNav = [
|
||
{ key: 'dashboard', label: '数据概览', icon: 'DataLine' },
|
||
{ key: 'projects', label: '项目管理', icon: 'Document' },
|
||
{ key: 'templates', label: '模板库', icon: 'Files' },
|
||
{ key: 'settings', label: '系统配置', icon: 'Setting' }
|
||
]
|
||
|
||
// 泰豪小电管理后台的子导航
|
||
const serviceSubNav = [
|
||
{ key: 'dashboard', label: '数据概览', icon: 'DataLine' },
|
||
{ key: 'knowledge', label: '知识库', icon: 'Document' },
|
||
{ key: 'tickets', label: '工单管理', icon: 'Tickets' },
|
||
{ key: 'conversation', label: '对话数据管理', icon: 'ChatDotRound' },
|
||
{ key: 'agent', label: '智能体管理', icon: 'Service' },
|
||
{
|
||
key: 'logs',
|
||
label: '日志管理',
|
||
icon: 'List',
|
||
children: [
|
||
{ key: 'log-knowledge', label: '知识库日志' },
|
||
{ key: 'log-ticket', label: '工单日志' },
|
||
{ key: 'log-system', label: '系统日志' }
|
||
]
|
||
},
|
||
{ key: 'crm', label: 'CRM管理', icon: 'User' }
|
||
]
|
||
|
||
// 日志导航展开状态
|
||
const logNavExpanded = ref(false)
|
||
|
||
// 数据概览
|
||
const dashboardData = ref({
|
||
consultations: 1258,
|
||
pendingTickets: 23,
|
||
completedTickets: 156
|
||
})
|
||
|
||
const questionStatPeriod = ref('today')
|
||
|
||
const questionCategories = ref([
|
||
{ name: '设备操作咨询', count: 386, percent: 85, color: '#409eff' },
|
||
{ name: '故障报修', count: 298, percent: 65, color: '#e6a23c' },
|
||
{ name: '配件购买', count: 215, percent: 47, color: '#67c23a' },
|
||
{ name: '保修政策', count: 189, percent: 42, color: '#909399' },
|
||
{ name: '安装指导', count: 112, percent: 25, color: '#f56c6c' },
|
||
{ name: '其他问题', count: 58, percent: 13, color: '#b3d8ff' }
|
||
])
|
||
|
||
const productCloudData = ref([
|
||
{ name: 'TH-500GF', size: 24, weight: 1, color: '#409eff' },
|
||
{ name: 'S-200X', size: 20, weight: 0.8, color: '#67c23a' },
|
||
{ name: 'TH-300D', size: 18, weight: 0.7, color: '#e6a23c' },
|
||
{ name: 'G-100S', size: 22, weight: 0.9, color: '#f56c6c' },
|
||
{ name: 'TH-800GF', size: 16, weight: 0.6, color: '#909399' },
|
||
{ name: 'S-150X', size: 19, weight: 0.75, color: '#7c3aed' },
|
||
{ name: 'TH-1000D', size: 15, weight: 0.5, color: '#00d4ff' },
|
||
{ name: 'G-200S', size: 17, weight: 0.65, color: '#ff6b6b' },
|
||
{ name: 'TH-600GF', size: 21, weight: 0.85, color: '#ffa940' },
|
||
{ name: 'S-300X', size: 14, weight: 0.45, color: '#36cfc9' },
|
||
{ name: 'TH-400D', size: 16, weight: 0.55, color: '#b37feb' },
|
||
{ name: 'G-150S', size: 18, weight: 0.7, color: '#ff85c0' }
|
||
])
|
||
|
||
// 跳转方法
|
||
const goToTickets = (status) => {
|
||
activeSubNav.value = 'tickets'
|
||
// 可以存储筛选状态供工单管理页面使用
|
||
ElMessage.info(`跳转至工单管理 - ${status === 'pending' ? '待处理' : '已处理'}工单`)
|
||
}
|
||
|
||
const goToConversationByCategory = (category) => {
|
||
activeSubNav.value = 'conversation'
|
||
ElMessage.info(`跳转至对话数据 - 分类：${category}`)
|
||
}
|
||
|
||
const goToConversationByProduct = (product) => {
|
||
activeSubNav.value = 'conversation'
|
||
ElMessage.info(`跳转至对话数据 - 产品：${product}`)
|
||
}
|
||
|
||
// 工单管理
|
||
const ticketStatusFilter = ref('all')
|
||
const ticketTypeFilter = ref('')
|
||
const ticketUrgencyFilter = ref('')
|
||
const ticketSearchKeyword = ref('')
|
||
const ticketCurrentPage = ref(1)
|
||
const ticketTotal = ref(45)
|
||
|
||
const ticketCounts = ref({
|
||
pending: 23,
|
||
processing: 8,
|
||
completed: 12,
|
||
closed: 2
|
||
})
|
||
|
||
const showCreateTicketDialog = ref(false)
|
||
const showTicketDetailDialog = ref(false)
|
||
const showAssignTicketDialog = ref(false)
|
||
const showConversationDialog = ref(false)
|
||
const currentTicket = ref(null)
|
||
const selectedEngineer = ref('')
|
||
const engineerSearch = ref('')
|
||
const conversationTab = ref('record')
|
||
|
||
const ticketForm = ref({
|
||
customerName: '',
|
||
customerPhone: '',
|
||
deviceModel: '',
|
||
faultType: '',
|
||
faultDesc: '',
|
||
urgency: 'normal',
|
||
address: '',
|
||
nameplate: ''
|
||
})
|
||
|
||
const ticketList = ref([
|
||
{
|
||
id: 1,
|
||
ticketNo: 'WO202501130001',
|
||
customerName: '张伟',
|
||
customerPhone: '138****5678',
|
||
deviceModel: 'TH-500GF',
|
||
faultType: 'electrical',
|
||
faultTypeName: '电气系统故障',
|
||
faultDesc: '发电机启动后电压不稳定，波动范围较大，影响正常使用',
|
||
urgency: 'urgent',
|
||
urgencyName: '紧急',
|
||
status: 'pending',
|
||
statusName: '待处理',
|
||
source: 'chat',
|
||
assignee: null,
|
||
address: '江西省南昌市红谷滩区xxx路xxx号',
|
||
nameplate: 'TH-500GF-2023-001',
|
||
images: [
|
||
'https://picsum.photos/400/300?random=1',
|
||
'https://picsum.photos/400/300?random=2',
|
||
'https://picsum.photos/400/300?random=3'
|
||
],
|
||
createTime: '2025-01-13 09:30:00',
|
||
updateTime: '2025-01-13 09:30:00',
|
||
logs: [
|
||
{ time: '2025-01-13 09:30:00', operator: '系统', action: '工单创建', type: 'primary', remark: '客户通过小电对话提交' }
|
||
]
|
||
},
|
||
{
|
||
id: 2,
|
||
ticketNo: 'WO202501130002',
|
||
customerName: '李明',
|
||
customerPhone: '139****1234',
|
||
deviceModel: 'S-200X',
|
||
faultType: 'mechanical',
|
||
faultTypeName: '机械故障',
|
||
faultDesc: '静音发电机运行时有异常噪音，疑似轴承磨损',
|
||
urgency: 'normal',
|
||
urgencyName: '普通',
|
||
status: 'processing',
|
||
statusName: '处理中',
|
||
source: 'chat',
|
||
assignee: '小李',
|
||
address: '江西省九江市浔阳区xxx街xxx号',
|
||
nameplate: 'S-200X-2022-156',
|
||
images: [
|
||
'https://picsum.photos/400/300?random=4',
|
||
'https://picsum.photos/400/300?random=5'
|
||
],
|
||
createTime: '2025-01-12 14:20:00',
|
||
updateTime: '2025-01-13 08:15:00',
|
||
logs: [
|
||
{ time: '2025-01-12 14:20:00', operator: '系统', action: '工单创建', type: 'primary', remark: '客户通过小电对话提交' },
|
||
{ time: '2025-01-12 15:00:00', operator: '管理员', action: '指派工程师', type: 'warning', remark: '指派给小李工程师处理' },
|
||
{ time: '2025-01-13 08:15:00', operator: '小李', action: '开始处理', type: 'success', remark: '已联系客户，计划今日上门检修' }
|
||
]
|
||
},
|
||
{
|
||
id: 3,
|
||
ticketNo: 'WO202501120003',
|
||
customerName: '王芳',
|
||
customerPhone: '137****9876',
|
||
deviceModel: 'TH-300D',
|
||
faultType: 'control',
|
||
faultTypeName: '控制系统故障',
|
||
faultDesc: '控制面板显示屏不亮，无法查看运行状态',
|
||
urgency: 'urgent',
|
||
urgencyName: '紧急',
|
||
status: 'pending',
|
||
statusName: '待处理',
|
||
source: 'manual',
|
||
assignee: null,
|
||
address: '江西省赣州市章贡区xxx路xxx号',
|
||
images: [
|
||
'https://picsum.photos/400/300?random=6'
|
||
],
|
||
nameplate: 'TH-300D-2023-089',
|
||
createTime: '2025-01-12 10:45:00',
|
||
updateTime: '2025-01-12 10:45:00',
|
||
logs: [
|
||
{ time: '2025-01-12 10:45:00', operator: '客服小张', action: '工单创建', type: 'primary', remark: '电话接报后手动创建' }
|
||
]
|
||
},
|
||
{
|
||
id: 4,
|
||
ticketNo: 'WO202501110004',
|
||
customerName: '赵强',
|
||
customerPhone: '136****5432',
|
||
deviceModel: 'G-100S',
|
||
faultType: 'parts',
|
||
faultTypeName: '配件更换',
|
||
faultDesc: '需要更换空气滤芯和机油滤芯',
|
||
urgency: 'low',
|
||
urgencyName: '低',
|
||
status: 'completed',
|
||
statusName: '已完成',
|
||
source: 'chat',
|
||
assignee: '小王',
|
||
address: '江西省上饶市信州区xxx街xxx号',
|
||
nameplate: 'G-100S-2021-234',
|
||
createTime: '2025-01-11 16:30:00',
|
||
updateTime: '2025-01-12 17:00:00',
|
||
logs: [
|
||
{ time: '2025-01-11 16:30:00', operator: '系统', action: '工单创建', type: 'primary', remark: '客户通过小电对话提交' },
|
||
{ time: '2025-01-11 17:00:00', operator: '管理员', action: '指派工程师', type: 'warning', remark: '指派给小王工程师处理' },
|
||
{ time: '2025-01-12 09:00:00', operator: '小王', action: '开始处理', type: 'success', remark: '已准备配件，前往客户现场' },
|
||
{ time: '2025-01-12 17:00:00', operator: '小王', action: '完成工单', type: 'success', remark: '已完成滤芯更换，设备运行正常' }
|
||
]
|
||
},
|
||
{
|
||
id: 5,
|
||
ticketNo: 'WO202501100005',
|
||
customerName: '孙丽',
|
||
customerPhone: '135****8765',
|
||
deviceModel: 'TH-800GF',
|
||
faultType: 'install',
|
||
faultTypeName: '安装调试',
|
||
faultDesc: '新购发电机组需要安装调试',
|
||
urgency: 'normal',
|
||
urgencyName: '普通',
|
||
status: 'processing',
|
||
statusName: '处理中',
|
||
source: 'manual',
|
||
assignee: '小张',
|
||
address: '江西省宜春市袁州区xxx路xxx号',
|
||
nameplate: 'TH-800GF-2025-003',
|
||
createTime: '2025-01-10 11:00:00',
|
||
updateTime: '2025-01-13 10:00:00',
|
||
logs: [
|
||
{ time: '2025-01-10 11:00:00', operator: '销售小刘', action: '工单创建', type: 'primary', remark: '新机销售后创建安装工单' },
|
||
{ time: '2025-01-10 14:00:00', operator: '管理员', action: '指派工程师', type: 'warning', remark: '指派给小张工程师处理' },
|
||
{ time: '2025-01-13 10:00:00', operator: '小张', action: '进行中', type: 'success', remark: '安装基本完成，正在进行调试' }
|
||
]
|
||
}
|
||
])
|
||
|
||
const engineerList = ref([
|
||
{ id: 1, name: '小李', title: '高级工程师', currentTickets: 2, skills: ['电气系统', '控制系统'] },
|
||
{ id: 2, name: '小王', title: '工程师', currentTickets: 1, skills: ['机械维修', '配件更换'] },
|
||
{ id: 3, name: '小张', title: '高级工程师', currentTickets: 1, skills: ['安装调试', '电气系统'] },
|
||
{ id: 4, name: '小陈', title: '工程师', currentTickets: 0, skills: ['机械维修', '控制系统'] },
|
||
{ id: 5, name: '小刘', title: '技术专家', currentTickets: 3, skills: ['电气系统', '机械维修', '控制系统'] }
|
||
])
|
||
|
||
const aiRecommendEngineer = ref(null)
|
||
|
||
const currentConversation = ref([])
|
||
const conversationSummary = ref({
|
||
overview: '',
|
||
demands: [],
|
||
deviceModel: '',
|
||
faultSymptom: '',
|
||
occurTime: ''
|
||
})
|
||
|
||
// 工单筛选
|
||
const filteredTicketList = computed(() => {
|
||
return ticketList.value.filter(ticket => {
|
||
if (ticketStatusFilter.value !== 'all' && ticket.status !== ticketStatusFilter.value) return false
|
||
if (ticketTypeFilter.value && ticket.faultType !== ticketTypeFilter.value) return false
|
||
if (ticketUrgencyFilter.value && ticket.urgency !== ticketUrgencyFilter.value) return false
|
||
if (ticketSearchKeyword.value) {
|
||
const keyword = ticketSearchKeyword.value.toLowerCase()
|
||
if (!ticket.ticketNo.toLowerCase().includes(keyword) &&
|
||
!ticket.customerName.toLowerCase().includes(keyword) &&
|
||
!ticket.deviceModel.toLowerCase().includes(keyword)) {
|
||
return false
|
||
}
|
||
}
|
||
return true
|
||
})
|
||
})
|
||
|
||
const filteredEngineers = computed(() => {
|
||
if (!engineerSearch.value) return engineerList.value
|
||
return engineerList.value.filter(eng =>
|
||
eng.name.includes(engineerSearch.value) || eng.title.includes(engineerSearch.value)
|
||
)
|
||
})
|
||
|
||
// 工单状态类型
|
||
const getTicketStatusType = (status) => {
|
||
const typeMap = {
|
||
pending: 'warning',
|
||
processing: 'primary',
|
||
completed: 'success',
|
||
closed: 'info'
|
||
}
|
||
return typeMap[status] || 'info'
|
||
}
|
||
|
||
const filterTickets = () => {
|
||
ticketCurrentPage.value = 1
|
||
}
|
||
|
||
// 查看工单详情
|
||
const viewTicketDetail = (ticket) => {
|
||
currentTicket.value = ticket
|
||
showTicketDetailDialog.value = true
|
||
}
|
||
|
||
// 查看对话记录
|
||
const viewTicketConversation = (ticket) => {
|
||
currentConversation.value = [
|
||
{ role: 'user', content: '你好，我的发电机出问题了', time: '09:25:30' },
|
||
{ role: 'assistant', content: '您好！我是泰豪小电，很高兴为您服务。请问您的发电机是什么型号？出现了什么问题？', time: '09:25:32' },
|
||
{ role: 'user', content: '型号是TH-500GF，启动后电压一直跳，不稳定', time: '09:26:15' },
|
||
{ role: 'assistant', content: '了解了。TH-500GF电压不稳定可能有以下几种原因：\n1. AVR（自动电压调节器）故障\n2. 发电机转速不稳\n3. 负载过大或不平衡\n请问这个问题是一直存在还是最近才出现的？', time: '09:26:18' },
|
||
{ role: 'user', content: '最近两天才开始的，之前用着挺好的', time: '09:27:05' },
|
||
{ role: 'assistant', content: '明白了。建议您先检查一下负载情况，如果负载正常，可能需要专业工程师上门检查AVR和调速系统。您需要我帮您创建一个维修工单吗？', time: '09:27:08' },
|
||
{ role: 'user', content: '好的，帮我创建工单吧，比较着急', time: '09:28:00' },
|
||
{ role: 'assistant', content: '好的，我已为您创建紧急维修工单。请问您方便提供一下现场地址和联系电话吗？我们会尽快安排工程师上门服务。', time: '09:28:03' }
|
||
]
|
||
conversationSummary.value = {
|
||
overview: '客户反映TH-500GF发电机组启动后电压不稳定，波动范围较大，问题最近两天才出现，之前运行正常。可能原因包括AVR故障、转速不稳或负载问题。客户希望尽快安排上门维修。',
|
||
demands: [
|
||
'尽快安排工程师上门检修',
|
||
'解决电压不稳定问题',
|
||
'确保设备正常运行'
|
||
],
|
||
deviceModel: 'TH-500GF',
|
||
faultSymptom: '启动后电压不稳定，波动范围较大',
|
||
occurTime: '最近两天'
|
||
}
|
||
conversationTab.value = 'record'
|
||
showConversationDialog.value = true
|
||
}
|
||
|
||
// 显示指派弹窗
|
||
const showAssignDialog = (ticket) => {
|
||
currentTicket.value = ticket
|
||
selectedEngineer.value = ''
|
||
// 生成AI推荐
|
||
generateAIRecommend(ticket)
|
||
showAssignTicketDialog.value = true
|
||
}
|
||
|
||
const showAssignDialogFromDetail = () => {
|
||
selectedEngineer.value = ''
|
||
generateAIRecommend(currentTicket.value)
|
||
showAssignTicketDialog.value = true
|
||
}
|
||
|
||
// AI智能推荐工程师
|
||
const generateAIRecommend = (ticket) => {
|
||
// 模拟AI推荐逻辑
|
||
const faultTypeMap = {
|
||
electrical: { engId: 1, skill: '电气系统' },
|
||
mechanical: { engId: 2, skill: '机械维修' },
|
||
control: { engId: 1, skill: '控制系统' },
|
||
parts: { engId: 2, skill: '配件更换' },
|
||
install: { engId: 3, skill: '安装调试' },
|
||
other: { engId: 4, skill: '综合维修' }
|
||
}
|
||
|
||
const recommend = faultTypeMap[ticket.faultType] || faultTypeMap.other
|
||
const engineer = engineerList.value.find(e => e.id === recommend.engId)
|
||
|
||
if (engineer) {
|
||
aiRecommendEngineer.value = {
|
||
...engineer,
|
||
matchScore: 85 + Math.floor(Math.random() * 10),
|
||
reason: `客户问题涉及${ticket.deviceModel}${ticket.faultTypeName}，${engineer.name}工程师在${recommend.skill}方面有丰富项目经验，历史工单解决率98%，平均响应时间2小时。`
|
||
}
|
||
}
|
||
}
|
||
|
||
// 确认指派
|
||
const confirmAssignTicket = () => {
|
||
const engineer = engineerList.value.find(e => e.id === selectedEngineer.value)
|
||
if (engineer && currentTicket.value) {
|
||
currentTicket.value.assignee = engineer.name
|
||
currentTicket.value.status = 'processing'
|
||
currentTicket.value.statusName = '处理中'
|
||
currentTicket.value.logs.push({
|
||
time: new Date().toLocaleString('zh-CN', { hour12: false }).replace(/\//g, '-'),
|
||
operator: '管理员',
|
||
action: '指派工程师',
|
||
type: 'warning',
|
||
remark: `指派给${engineer.name}工程师处理`
|
||
})
|
||
engineer.currentTickets++
|
||
ticketCounts.value.pending--
|
||
showAssignTicketDialog.value = false
|
||
ElMessage.success(`已成功指派给${engineer.name}工程师`)
|
||
}
|
||
}
|
||
|
||
// 完成工单
|
||
const completeTicket = (ticket) => {
|
||
ElMessageBox.confirm('确认完成该工单？', '完成确认', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'success'
|
||
}).then(() => {
|
||
ticket.status = 'completed'
|
||
ticket.statusName = '已完成'
|
||
ticket.logs.push({
|
||
time: new Date().toLocaleString('zh-CN', { hour12: false }).replace(/\//g, '-'),
|
||
operator: ticket.assignee,
|
||
action: '完成工单',
|
||
type: 'success',
|
||
remark: '工单已处理完成'
|
||
})
|
||
ticketCounts.value.completed++
|
||
showTicketDetailDialog.value = false
|
||
ElMessage.success('工单已完成')
|
||
}).catch(() => {})
|
||
}
|
||
|
||
// 创建工单
|
||
const submitCreateTicket = () => {
|
||
if (!ticketForm.value.customerName || !ticketForm.value.customerPhone ||
|
||
!ticketForm.value.deviceModel || !ticketForm.value.faultType || !ticketForm.value.faultDesc) {
|
||
ElMessage.warning('请填写必填信息')
|
||
return
|
||
}
|
||
|
||
const faultTypeNames = {
|
||
electrical: '电气系统故障',
|
||
mechanical: '机械故障',
|
||
control: '控制系统故障',
|
||
parts: '配件更换',
|
||
install: '安装调试',
|
||
other: '其他'
|
||
}
|
||
const urgencyNames = { urgent: '紧急', normal: '普通', low: '低' }
|
||
|
||
const newTicket = {
|
||
id: Date.now(),
|
||
ticketNo: 'WO' + new Date().toISOString().slice(0, 10).replace(/-/g, '') + String(ticketList.value.length + 1).padStart(4, '0'),
|
||
customerName: ticketForm.value.customerName,
|
||
customerPhone: ticketForm.value.customerPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'),
|
||
deviceModel: ticketForm.value.deviceModel,
|
||
faultType: ticketForm.value.faultType,
|
||
faultTypeName: faultTypeNames[ticketForm.value.faultType],
|
||
faultDesc: ticketForm.value.faultDesc,
|
||
urgency: ticketForm.value.urgency,
|
||
urgencyName: urgencyNames[ticketForm.value.urgency],
|
||
status: 'pending',
|
||
statusName: '待处理',
|
||
source: 'manual',
|
||
assignee: null,
|
||
address: ticketForm.value.address,
|
||
nameplate: ticketForm.value.nameplate,
|
||
createTime: new Date().toLocaleString('zh-CN', { hour12: false }).replace(/\//g, '-'),
|
||
updateTime: new Date().toLocaleString('zh-CN', { hour12: false }).replace(/\//g, '-'),
|
||
logs: [
|
||
{
|
||
time: new Date().toLocaleString('zh-CN', { hour12: false }).replace(/\//g, '-'),
|
||
operator: '李志鹏',
|
||
action: '工单创建',
|
||
type: 'primary',
|
||
remark: '手动创建工单'
|
||
}
|
||
]
|
||
}
|
||
|
||
ticketList.value.unshift(newTicket)
|
||
ticketCounts.value.pending++
|
||
ticketTotal.value++
|
||
showCreateTicketDialog.value = false
|
||
ticketForm.value = {
|
||
customerName: '',
|
||
customerPhone: '',
|
||
deviceModel: '',
|
||
faultType: '',
|
||
faultDesc: '',
|
||
urgency: 'normal',
|
||
address: '',
|
||
nameplate: ''
|
||
}
|
||
ElMessage.success('工单创建成功')
|
||
}
|
||
|
||
// 对话数据管理
|
||
const conversationDateRange = ref(null)
|
||
const conversationCategoryFilter = ref('')
|
||
const conversationStatusFilter = ref('')
|
||
const conversationSearchKeyword = ref('')
|
||
const conversationCurrentPage = ref(1)
|
||
const conversationTotal = ref(86)
|
||
const showConversationDetailDialog = ref(false)
|
||
const conversationDetailTab = ref('record')
|
||
const currentConversationDetail = ref(null)
|
||
const currentConversationMessages = ref([])
|
||
|
||
const conversationList = ref([
|
||
{
|
||
id: 1,
|
||
sessionId: 'CONV20250113001',
|
||
customerName: '张伟',
|
||
customerPhone: '138****5678',
|
||
category: 'fault',
|
||
categoryName: '故障报修',
|
||
deviceModel: 'TH-500GF',
|
||
summary: '发电机启动后电压不稳定，需要工程师上门检修',
|
||
messageCount: 12,
|
||
status: 'ticket',
|
||
statusName: '已转工单',
|
||
satisfaction: 5,
|
||
startTime: '2025-01-13 09:25:00',
|
||
duration: '8分32秒',
|
||
summaryDetail: {
|
||
overview: '客户反映TH-500GF发电机组启动后电压不稳定，波动范围较大，问题最近两天才出现，之前运行正常。经过诊断，可能原因包括AVR故障、转速不稳或负载问题。',
|
||
demands: ['尽快安排工程师上门检修', '解决电压不稳定问题', '确保设备正常运行'],
|
||
solution: '已为客户创建紧急维修工单，安排工程师上门检查AVR和调速系统。'
|
||
},
|
||
messages: [
|
||
{ role: 'user', content: '你好，我的发电机出问题了', time: '09:25:30' },
|
||
{ role: 'assistant', content: '您好！我是泰豪小电，很高兴为您服务。请问您的发电机是什么型号？出现了什么问题？', time: '09:25:32' },
|
||
{ role: 'user', content: '型号是TH-500GF，启动后电压一直跳，不稳定', time: '09:26:15' },
|
||
{ role: 'assistant', content: '了解了。TH-500GF电压不稳定可能有以下几种原因：\n1. AVR（自动电压调节器）故障\n2. 发电机转速不稳\n3. 负载过大或不平衡\n请问这个问题是一直存在还是最近才出现的？', time: '09:26:18' },
|
||
{ role: 'user', content: '最近两天才开始的，之前用着挺好的', time: '09:27:05' },
|
||
{ role: 'assistant', content: '明白了。建议您先检查一下负载情况，如果负载正常，可能需要专业工程师上门检查AVR和调速系统。您需要我帮您创建一个维修工单吗？', time: '09:27:08' },
|
||
{ role: 'user', content: '好的，帮我创建工单吧，比较着急', time: '09:28:00' },
|
||
{ role: 'assistant', content: '好的，我已为您创建紧急维修工单。请问您方便提供一下现场地址和联系电话吗？我们会尽快安排工程师上门服务。', time: '09:28:03' }
|
||
]
|
||
},
|
||
{
|
||
id: 2,
|
||
sessionId: 'CONV20250113002',
|
||
customerName: '李娜',
|
||
customerPhone: '139****2345',
|
||
category: 'device',
|
||
categoryName: '设备操作咨询',
|
||
deviceModel: 'S-200X',
|
||
summary: '咨询静音发电机的操作方法和保养周期',
|
||
messageCount: 8,
|
||
status: 'completed',
|
||
statusName: '已完成',
|
||
satisfaction: 5,
|
||
startTime: '2025-01-13 10:15:00',
|
||
duration: '5分18秒',
|
||
summaryDetail: {
|
||
overview: '客户咨询S-200X静音发电机的日常操作方法和保养周期，包括启动流程、停机注意事项和定期保养项目。',
|
||
demands: ['了解设备操作方法', '了解保养周期和保养项目'],
|
||
solution: '详细介绍了设备的启动/停机流程，以及建议每200小时或3个月进行一次常规保养的计划。'
|
||
},
|
||
messages: [
|
||
{ role: 'user', content: '请问S-200X发电机怎么操作？', time: '10:15:20' },
|
||
{ role: 'assistant', content: '您好！S-200X静音发电机的操作非常简单，我来为您介绍一下：\n\n【启动流程】\n1. 检查燃油和机油液位\n2. 打开燃油开关\n3. 将启动开关转到"ON"位置\n4. 按下启动按钮\n\n请问您还有其他问题吗？', time: '10:15:25' },
|
||
{ role: 'user', content: '保养周期是多久？需要保养哪些项目？', time: '10:17:00' },
|
||
{ role: 'assistant', content: 'S-200X建议每运行200小时或每3个月进行一次常规保养，保养项目包括：\n1. 更换机油和机油滤芯\n2. 检查/更换空气滤芯\n3. 检查燃油滤芯\n4. 检查火花塞（汽油机）\n5. 检查蓄电池电量\n\n如需专业保养服务，可以预约我们的工程师上门。', time: '10:17:05' }
|
||
]
|
||
},
|
||
{
|
||
id: 3,
|
||
sessionId: 'CONV20250112003',
|
||
customerName: '王强',
|
||
customerPhone: '137****8765',
|
||
category: 'parts',
|
||
categoryName: '配件购买',
|
||
deviceModel: 'G-100S',
|
||
summary: '咨询空气滤芯和机油滤芯的价格和购买方式',
|
||
messageCount: 6,
|
||
status: 'completed',
|
||
statusName: '已完成',
|
||
satisfaction: 4,
|
||
startTime: '2025-01-12 14:30:00',
|
||
duration: '3分45秒',
|
||
summaryDetail: {
|
||
overview: '客户需要购买G-100S发电机的空气滤芯和机油滤芯，咨询配件价格和购买渠道。',
|
||
demands: ['了解配件价格', '了解购买方式'],
|
||
solution: '提供了配件价格信息，并引导客户通过官方渠道或授权经销商购买。'
|
||
},
|
||
messages: [
|
||
{ role: 'user', content: 'G-100S的滤芯多少钱？', time: '14:30:15' },
|
||
{ role: 'assistant', content: '您好！G-100S发电机的滤芯价格如下：\n- 空气滤芯：￥85/个\n- 机油滤芯：￥45/个\n\n您可以通过以下方式购买：\n1. 拨打售后热线订购\n2. 联系当地授权经销商\n3. 官方商城在线购买\n\n请问您需要哪种滤芯？', time: '14:30:20' }
|
||
]
|
||
},
|
||
{
|
||
id: 4,
|
||
sessionId: 'CONV20250112004',
|
||
customerName: '赵敏',
|
||
customerPhone: '136****4321',
|
||
category: 'warranty',
|
||
categoryName: '保修政策',
|
||
deviceModel: 'TH-300D',
|
||
summary: '咨询设备保修期限和保修范围',
|
||
messageCount: 5,
|
||
status: 'completed',
|
||
statusName: '已完成',
|
||
satisfaction: null,
|
||
startTime: '2025-01-12 16:45:00',
|
||
duration: '2分58秒',
|
||
summaryDetail: {
|
||
overview: '客户咨询TH-300D柴油发电机的保修政策，包括保修期限和保修范围。',
|
||
demands: ['了解保修期限', '了解保修范围'],
|
||
solution: '告知客户整机保修2年或2000小时，核心部件保修3年，人为损坏和易损件不在保修范围内。'
|
||
},
|
||
messages: [
|
||
{ role: 'user', content: '我买的TH-300D保修多久？', time: '16:45:10' },
|
||
{ role: 'assistant', content: '您好！TH-300D柴油发电机的保修政策如下：\n\n【保修期限】\n- 整机保修：2年或累计运行2000小时（以先到者为准）\n- 核心部件（发动机、发电机）：3年\n\n【保修范围】\n- 因产品质量问题导致的故障\n- 不包含人为损坏、使用不当\n- 不包含易损件（滤芯、皮带等）\n\n请问您的设备遇到什么问题了吗？', time: '16:45:15' }
|
||
]
|
||
},
|
||
{
|
||
id: 5,
|
||
sessionId: 'CONV20250111005',
|
||
customerName: '孙丽',
|
||
customerPhone: '135****9876',
|
||
category: 'install',
|
||
categoryName: '安装指导',
|
||
deviceModel: 'TH-800GF',
|
||
summary: '咨询新购发电机的安装要求和注意事项',
|
||
messageCount: 10,
|
||
status: 'ticket',
|
||
statusName: '已转工单',
|
||
satisfaction: 5,
|
||
startTime: '2025-01-11 11:00:00',
|
||
duration: '12分15秒',
|
||
summaryDetail: {
|
||
overview: '客户新购TH-800GF大型发电机组，咨询安装场地要求、电气接入规范和通风散热要求。由于安装较为复杂，已创建安装调试工单。',
|
||
demands: ['了解安装场地要求', '了解电气接入规范', '安排专业安装服务'],
|
||
solution: '详细介绍了安装要求后，已创建安装调试工单，安排工程师上门进行专业安装。'
|
||
},
|
||
messages: [
|
||
{ role: 'user', content: '我刚买了TH-800GF，安装有什么要求？', time: '11:00:30' },
|
||
{ role: 'assistant', content: '恭喜您购买TH-800GF发电机组！这款设备功率较大，安装需要注意以下几点：\n\n【场地要求】\n1. 安装场地需平整坚固，承重不小于2吨/平米\n2. 预留设备四周各1米以上的维护空间\n3. 地面需做防震处理\n\n【通风要求】\n1. 进风口面积不小于2平方米\n2. 排风口面积不小于1.5平方米\n\n您的安装场地是否具备这些条件？', time: '11:00:35' }
|
||
]
|
||
}
|
||
])
|
||
|
||
// 对话数据筛选
|
||
const filteredConversationList = computed(() => {
|
||
return conversationList.value.filter(conv => {
|
||
if (conversationCategoryFilter.value && conv.category !== conversationCategoryFilter.value) return false
|
||
if (conversationStatusFilter.value && conv.status !== conversationStatusFilter.value) return false
|
||
if (conversationSearchKeyword.value) {
|
||
const keyword = conversationSearchKeyword.value.toLowerCase()
|
||
if (!conv.customerName.toLowerCase().includes(keyword) &&
|
||
!conv.deviceModel.toLowerCase().includes(keyword) &&
|
||
!conv.summary.toLowerCase().includes(keyword)) {
|
||
return false
|
||
}
|
||
}
|
||
return true
|
||
})
|
||
})
|
||
|
||
// 查看对话详情
|
||
const viewConversationDetail = (conv) => {
|
||
currentConversationDetail.value = conv
|
||
currentConversationMessages.value = conv.messages || []
|
||
conversationDetailTab.value = 'record'
|
||
showConversationDetailDialog.value = true
|
||
}
|
||
|
||
// 导出对话数据
|
||
const exportConversations = () => {
|
||
ElMessage.success('对话数据导出中，请稍候...')
|
||
}
|
||
|
||
// 智能体配置
|
||
const agentConfig = ref({
|
||
name: '泰豪小电',
|
||
description: '您好！我是泰豪小电，有什么可以帮助您的吗？',
|
||
style: 'friendly',
|
||
features: {
|
||
autoGreeting: true,
|
||
smartRecommend: true,
|
||
conversationRecord: true,
|
||
voiceChat: false,
|
||
ticketGuide: true,
|
||
satisfaction: true
|
||
},
|
||
responseDelay: 1000,
|
||
maxReplyLength: 500
|
||
})
|
||
|
||
const defaultAgentConfig = {
|
||
name: '泰豪小电',
|
||
description: '您好！我是泰豪小电，有什么可以帮助您的吗？',
|
||
style: 'friendly',
|
||
features: {
|
||
autoGreeting: true,
|
||
smartRecommend: true,
|
||
conversationRecord: true,
|
||
voiceChat: false,
|
||
ticketGuide: true,
|
||
satisfaction: true
|
||
},
|
||
responseDelay: 1000,
|
||
maxReplyLength: 500
|
||
}
|
||
|
||
const saveAgentConfig = () => {
|
||
ElMessage.success('智能体配置保存成功')
|
||
}
|
||
|
||
const resetAgentConfig = () => {
|
||
agentConfig.value = { ...defaultAgentConfig, features: { ...defaultAgentConfig.features } }
|
||
ElMessage.info('配置已重置')
|
||
}
|
||
|
||
// 知识库日志
|
||
const knowledgeLogDateRange = ref(null)
|
||
const knowledgeLogTypeFilter = ref('')
|
||
const knowledgeLogOperatorFilter = ref('')
|
||
const knowledgeLogSearch = ref('')
|
||
const knowledgeLogPage = ref(1)
|
||
const knowledgeLogTotal = ref(45)
|
||
|
||
const knowledgeLogs = ref([
|
||
{ id: 1, time: '2025-01-13 14:30:00', type: 'upload', typeName: '上传', docName: 'TH-800GF安装指南.pdf', category: '产品文档', operator: '李志鹏', result: 'success', remark: '文件大小3.2MB' },
|
||
{ id: 2, time: '2025-01-13 11:20:00', type: 'update', typeName: '更新', docName: 'S-200X操作手册.pdf', category: '产品文档', operator: '李志鹏', result: 'success', remark: '更新第3章内容' },
|
||
{ id: 3, time: '2025-01-13 10:15:00', type: 'reindex', typeName: '重新索引', docName: '常见故障处理指南.docx', category: '维修知识', operator: '系统', result: 'success', remark: '自动触发重新索引' },
|
||
{ id: 4, time: '2025-01-12 16:45:00', type: 'delete', typeName: '删除', docName: '旧版产品目录.pdf', category: '产品文档', operator: '张伟', result: 'success', remark: '文档已过期' },
|
||
{ id: 5, time: '2025-01-12 14:30:00', type: 'upload', typeName: '上传', docName: '2025年配件价格表.xlsx', category: '配件信息', operator: '李志鹏', result: 'success', remark: '文件大小1.5MB' },
|
||
{ id: 6, time: '2025-01-12 10:00:00', type: 'upload', typeName: '上传', docName: '发电机保养规范.pdf', category: '维修知识', operator: '李志鹏', result: 'fail', remark: '文件格式不支持' },
|
||
{ id: 7, time: '2025-01-11 15:20:00', type: 'update', typeName: '更新', docName: 'TH-500GF技术参数.pdf', category: '产品文档', operator: '张伟', result: 'success', remark: '更新技术参数表' }
|
||
])
|
||
|
||
const filteredKnowledgeLogs = computed(() => {
|
||
return knowledgeLogs.value.filter(log => {
|
||
if (knowledgeLogTypeFilter.value && log.type !== knowledgeLogTypeFilter.value) return false
|
||
if (knowledgeLogOperatorFilter.value && log.operator !== knowledgeLogOperatorFilter.value) return false
|
||
if (knowledgeLogSearch.value && !log.docName.toLowerCase().includes(knowledgeLogSearch.value.toLowerCase())) return false
|
||
return true
|
||
})
|
||
})
|
||
|
||
const exportKnowledgeLogs = () => {
|
||
ElMessage.success('知识库日志导出中...')
|
||
}
|
||
|
||
// 工单日志
|
||
const ticketLogDateRange = ref(null)
|
||
const ticketLogNoFilter = ref('')
|
||
const ticketLogTypeFilter = ref('')
|
||
const ticketLogOperatorFilter = ref('')
|
||
const ticketLogPage = ref(1)
|
||
const ticketLogTotal = ref(128)
|
||
|
||
const ticketLogs = ref([
|
||
{ id: 1, time: '2025-01-13 15:00:00', ticketNo: 'WO202501130001', type: 'assign', typeName: '指派', operator: '李志鹏', content: '将工单指派给小李工程师', ip: '192.168.1.100' },
|
||
{ id: 2, time: '2025-01-13 09:30:00', ticketNo: 'WO202501130001', type: 'create', typeName: '创建', operator: '系统', content: '客户通过小电对话创建工单', ip: '-' },
|
||
{ id: 3, time: '2025-01-13 08:15:00', ticketNo: 'WO202501130002', type: 'complete', typeName: '完成', operator: '小李', content: '工单处理完成，故障已修复', ip: '192.168.1.105' },
|
||
{ id: 4, time: '2025-01-12 15:00:00', ticketNo: 'WO202501130002', type: 'assign', typeName: '指派', operator: '李志鹏', content: '将工单指派给小李工程师', ip: '192.168.1.100' },
|
||
{ id: 5, time: '2025-01-12 14:20:00', ticketNo: 'WO202501130002', type: 'create', typeName: '创建', operator: '系统', content: '客户通过小电对话创建工单', ip: '-' },
|
||
{ id: 6, time: '2025-01-12 10:45:00', ticketNo: 'WO202501120003', type: 'create', typeName: '创建', operator: '李志鹏', content: '手动创建工单', ip: '192.168.1.100' },
|
||
{ id: 7, time: '2025-01-11 16:30:00', ticketNo: 'WO202501110004', type: 'close', typeName: '关闭', operator: '李志鹏', content: '客户确认问题已解决，关闭工单', ip: '192.168.1.100' }
|
||
])
|
||
|
||
const filteredTicketLogs = computed(() => {
|
||
return ticketLogs.value.filter(log => {
|
||
if (ticketLogNoFilter.value && !log.ticketNo.includes(ticketLogNoFilter.value)) return false
|
||
if (ticketLogTypeFilter.value && log.type !== ticketLogTypeFilter.value) return false
|
||
if (ticketLogOperatorFilter.value && log.operator !== ticketLogOperatorFilter.value) return false
|
||
return true
|
||
})
|
||
})
|
||
|
||
const exportTicketLogs = () => {
|
||
ElMessage.success('工单日志导出中...')
|
||
}
|
||
|
||
// 系统日志
|
||
const systemLogDateRange = ref(null)
|
||
const systemLogTypeFilter = ref('')
|
||
const systemLogLevelFilter = ref('')
|
||
const systemLogModuleFilter = ref('')
|
||
const systemLogPage = ref(1)
|
||
const systemLogTotal = ref(89)
|
||
|
||
const systemLogs = ref([
|
||
{ id: 1, time: '2025-01-13 14:00:00', logType: 'config', level: 'info', module: 'agent', moduleName: '智能体配置', operator: '李志鹏', content: '修改响应延迟：1000ms -> 1200ms' },
|
||
{ id: 2, time: '2025-01-13 11:30:00', logType: 'error', level: 'warn', module: 'api', moduleName: 'API调用', operator: '系统', content: 'Dify API响应超时，已自动重试（耗时3.2s）' },
|
||
{ id: 3, time: '2025-01-13 10:00:00', logType: 'config', level: 'info', module: 'agent', moduleName: '智能体配置', operator: '李志鹏', content: '开启功能：工单引导' },
|
||
{ id: 4, time: '2025-01-12 18:45:00', logType: 'error', level: 'error', module: 'knowledge', moduleName: '知识库索引', operator: '系统', content: '文档索引失败：发电机保养规范.pdf，原因：文件格式不支持' },
|
||
{ id: 5, time: '2025-01-12 15:30:00', logType: 'config', level: 'info', module: 'agent', moduleName: '智能体配置', operator: '李志鹏', content: '修改对话风格：简洁专业 -> 友好亲切' },
|
||
{ id: 6, time: '2025-01-12 09:00:00', logType: 'error', level: 'warn', module: 'chat', moduleName: '对话服务', operator: '系统', content: '对话会话超时自动关闭，会话ID：CONV20250111008' },
|
||
{ id: 7, time: '2025-01-11 16:20:00', logType: 'config', level: 'info', module: 'agent', moduleName: '智能体配置', operator: '张伟', content: '修改助手描述' },
|
||
{ id: 8, time: '2025-01-11 11:00:00', logType: 'error', level: 'error', module: 'api', moduleName: 'API调用', operator: '系统', content: 'Dify API连接失败，错误码：503，已切换备用节点' }
|
||
])
|
||
|
||
const filteredSystemLogs = computed(() => {
|
||
return systemLogs.value.filter(log => {
|
||
if (systemLogTypeFilter.value && log.logType !== systemLogTypeFilter.value) return false
|
||
if (systemLogLevelFilter.value && log.level !== systemLogLevelFilter.value) return false
|
||
if (systemLogModuleFilter.value && log.module !== systemLogModuleFilter.value) return false
|
||
return true
|
||
})
|
||
})
|
||
|
||
const exportSystemLogs = () => {
|
||
ElMessage.success('系统日志导出中...')
|
||
}
|
||
|
||
const platformConfig = ref({
|
||
systemName: 'AI数智化平台',
|
||
aiModel: 'gpt-4',
|
||
maxConcurrency: 100,
|
||
sessionTimeout: 30
|
||
})
|
||
|
||
const biddingTemplates = ref([
|
||
{ name: '工程类标书模板', category: '工程建设', usage: 45, updateTime: '2024-12-01 10:30' },
|
||
{ name: '服务类标书模板', category: '服务采购', usage: 32, updateTime: '2024-11-28 14:20' },
|
||
{ name: '货物采购模板', category: '货物采购', usage: 28, updateTime: '2024-11-25 09:15' }
|
||
])
|
||
|
||
const knowledgeBase = ref([
|
||
{ title: '设备操作手册_TH-500GF', category: '产品文档', size: '2.3MB', status: '已索引', uploadTime: '2024-11-15 10:20' },
|
||
{ title: '常见故障排查指南', category: '技术文档', size: '856KB', status: '已索引', uploadTime: '2024-11-14 14:30' },
|
||
{ title: '维修案例汇总2023Q3', category: '案例库', size: '1.2MB', status: '处理中', uploadTime: '2024-11-10 09:15' }
|
||
])
|
||
|
||
// 知识库管理
|
||
const activeKbType = ref('external')
|
||
const activeExternalKbCat = ref('device-guide')
|
||
const activeInternalKbCat = ref('tech-manual')
|
||
const externalKbSearch = ref('')
|
||
const internalKbSearch = ref('')
|
||
const showKbUploadDialog = ref(false)
|
||
const kbAiRecognizing = ref(false)
|
||
const kbUploadForm = ref({
|
||
name: '',
|
||
type: 'external',
|
||
category: '',
|
||
uploader: '李志鹏'
|
||
})
|
||
|
||
// 外部知识库分类
|
||
const externalKbCategories = ref([
|
||
{ key: 'device-guide', name: '设备操作指南', count: 24, icon: 'Tools', color: '#409eff' },
|
||
{ key: 'fault-solution', name: '常见故障解决方案', count: 36, icon: 'QuestionFilled', color: '#e6a23c' },
|
||
{ key: 'service-policy', name: '三包外服务政策', count: 12, icon: 'Tickets', color: '#67c23a' },
|
||
{ key: 'parts-consult', name: '配件咨询话术', count: 18, icon: 'ChatDotRound', color: '#909399' }
|
||
])
|
||
|
||
// 外部知识库文件
|
||
const externalKbFiles = ref([
|
||
{ id: 1, name: 'TH-500GF发电机组操作手册.pdf', category: 'device-guide', uploader: '张三', uploadTime: '2025-01-10 10:30' },
|
||
{ id: 2, name: 'S-200X静音发电机使用指南.pdf', category: 'device-guide', uploader: '李四', uploadTime: '2025-01-08 14:20' },
|
||
{ id: 3, name: '发电机无法启动故障排查指南.pdf', category: 'fault-solution', uploader: '王五', uploadTime: '2025-01-05 09:15' },
|
||
{ id: 4, name: '电压不稳定常见原因及解决方案.docx', category: 'fault-solution', uploader: '张三', uploadTime: '2025-01-03 16:45' },
|
||
{ id: 5, name: '三包服务政策说明书(2025版).pdf', category: 'service-policy', uploader: '李四', uploadTime: '2024-12-20 11:00' },
|
||
{ id: 6, name: '延保服务套餐介绍.pdf', category: 'service-policy', uploader: '张三', uploadTime: '2024-12-15 15:30' },
|
||
{ id: 7, name: '配件价格查询话术模板.docx', category: 'parts-consult', uploader: '王五', uploadTime: '2024-12-10 09:00' },
|
||
{ id: 8, name: '滤芯更换周期咨询话术.docx', category: 'parts-consult', uploader: '李四', uploadTime: '2024-12-08 14:00' }
|
||
])
|
||
|
||
// 内部知识库分类
|
||
const internalKbCategories = ref([
|
||
{ key: 'tech-manual', name: '技术维修手册', count: 45, icon: 'Tools', color: '#409eff' },
|
||
{ key: 'product-params', name: '产品参数明细', count: 28, icon: 'Document', color: '#67c23a' },
|
||
{ key: 'service-process', name: '内部服务流程规范', count: 15, icon: 'Tickets', color: '#e6a23c' },
|
||
{ key: 'service-script', name: '客户服务话术模板', count: 22, icon: 'ChatDotRound', color: '#909399' }
|
||
])
|
||
|
||
// 内部知识库文件
|
||
const internalKbFiles = ref([
|
||
{ id: 1, name: 'TH系列发电机维修手册(内部版).pdf', category: 'tech-manual', uploader: '技术部', uploadTime: '2025-01-12 09:00' },
|
||
{ id: 2, name: 'S系列静音发电机拆装指南.pdf', category: 'tech-manual', uploader: '技术部', uploadTime: '2025-01-10 11:30' },
|
||
{ id: 3, name: '控制系统故障诊断流程.pdf', category: 'tech-manual', uploader: '技术部', uploadTime: '2025-01-08 14:00' },
|
||
{ id: 4, name: 'TH-500GF产品参数表.xlsx', category: 'product-params', uploader: '产品部', uploadTime: '2025-01-05 10:00' },
|
||
{ id: 5, name: 'S-200X技术规格书.pdf', category: 'product-params', uploader: '产品部', uploadTime: '2025-01-03 15:30' },
|
||
{ id: 6, name: '售后服务标准流程(内部).pdf', category: 'service-process', uploader: '服务部', uploadTime: '2024-12-28 09:00' },
|
||
{ id: 7, name: '工单处理规范V2.0.docx', category: 'service-process', uploader: '服务部', uploadTime: '2024-12-25 11:00' },
|
||
{ id: 8, name: '电话接待话术模板(内部).docx', category: 'service-script', uploader: '培训部', uploadTime: '2024-12-20 14:00' },
|
||
{ id: 9, name: '投诉处理话术指南.docx', category: 'service-script', uploader: '培训部', uploadTime: '2024-12-18 16:30' }
|
||
])
|
||
|
||
// 当前分类名称
|
||
const currentExternalCatName = computed(() => {
|
||
const cat = externalKbCategories.value.find(c => c.key === activeExternalKbCat.value)
|
||
return cat ? cat.name : ''
|
||
})
|
||
|
||
const currentInternalCatName = computed(() => {
|
||
const cat = internalKbCategories.value.find(c => c.key === activeInternalKbCat.value)
|
||
return cat ? cat.name : ''
|
||
})
|
||
|
||
// 过滤后的文件列表
|
||
const filteredExternalKbFiles = computed(() => {
|
||
return externalKbFiles.value.filter(f => {
|
||
if (f.category !== activeExternalKbCat.value) return false
|
||
if (externalKbSearch.value && !f.name.includes(externalKbSearch.value)) return false
|
||
return true
|
||
})
|
||
})
|
||
|
||
const filteredInternalKbFiles = computed(() => {
|
||
return internalKbFiles.value.filter(f => {
|
||
if (f.category !== activeInternalKbCat.value) return false
|
||
if (internalKbSearch.value && !f.name.includes(internalKbSearch.value)) return false
|
||
return true
|
||
})
|
||
})
|
||
|
||
// 知识库操作方法
|
||
const handleKbFileChange = (file) => {
|
||
kbUploadForm.value.name = file.name.replace(/\.[^.]+$/, '')
|
||
}
|
||
|
||
const aiRecognizeKbFile = () => {
|
||
kbAiRecognizing.value = true
|
||
setTimeout(() => {
|
||
const externalMap = { '操作': 'device-guide', '指南': 'device-guide', '故障': 'fault-solution', '解决': 'fault-solution', '三包': 'service-policy', '服务': 'service-policy', '配件': 'parts-consult', '话术': 'parts-consult' }
|
||
const internalMap = { '维修': 'tech-manual', '手册': 'tech-manual', '参数': 'product-params', '规格': 'product-params', '流程': 'service-process', '规范': 'service-process', '话术': 'service-script', '模板': 'service-script' }
|
||
const categoryMap = kbUploadForm.value.type === 'external' ? externalMap : internalMap
|
||
|
||
for (const [keyword, category] of Object.entries(categoryMap)) {
|
||
if (kbUploadForm.value.name.includes(keyword)) {
|
||
kbUploadForm.value.category = category
|
||
break
|
||
}
|
||
}
|
||
if (!kbUploadForm.value.category) {
|
||
kbUploadForm.value.category = kbUploadForm.value.type === 'external' ? 'device-guide' : 'tech-manual'
|
||
}
|
||
kbAiRecognizing.value = false
|
||
ElMessage.success('AI识别完成，已自动填充分类信息')
|
||
}, 1500)
|
||
}
|
||
|
||
const confirmKbUpload = () => {
|
||
if (!kbUploadForm.value.name || !kbUploadForm.value.category) {
|
||
ElMessage.warning('请填写完整信息')
|
||
return
|
||
}
|
||
const newFile = {
|
||
id: Date.now(),
|
||
name: kbUploadForm.value.name + '.pdf',
|
||
category: kbUploadForm.value.category,
|
||
uploader: kbUploadForm.value.uploader,
|
||
uploadTime: new Date().toLocaleString('zh-CN', { hour12: false }).replace(/\//g, '-')
|
||
}
|
||
if (kbUploadForm.value.type === 'external') {
|
||
externalKbFiles.value.unshift(newFile)
|
||
const cat = externalKbCategories.value.find(c => c.key === kbUploadForm.value.category)
|
||
if (cat) cat.count++
|
||
} else {
|
||
internalKbFiles.value.unshift(newFile)
|
||
const cat = internalKbCategories.value.find(c => c.key === kbUploadForm.value.category)
|
||
if (cat) cat.count++
|
||
}
|
||
showKbUploadDialog.value = false
|
||
kbUploadForm.value = { name: '', type: 'external', category: '', uploader: '李志鹏' }
|
||
ElMessage.success('文件上传成功')
|
||
}
|
||
|
||
const previewKbFile = (file) => {
|
||
ElMessage.info(`正在预览：${file.name}`)
|
||
}
|
||
|
||
const downloadKbFile = (file) => {
|
||
ElMessage.success(`开始下载：${file.name}`)
|
||
}
|
||
|
||
const deleteKbFile = (file, type) => {
|
||
ElMessageBox.confirm(`确定要删除文件"${file.name}"吗?`, '删除确认', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
if (type === 'external') {
|
||
const idx = externalKbFiles.value.findIndex(f => f.id === file.id)
|
||
if (idx > -1) {
|
||
externalKbFiles.value.splice(idx, 1)
|
||
const cat = externalKbCategories.value.find(c => c.key === file.category)
|
||
if (cat) cat.count--
|
||
}
|
||
} else {
|
||
const idx = internalKbFiles.value.findIndex(f => f.id === file.id)
|
||
if (idx > -1) {
|
||
internalKbFiles.value.splice(idx, 1)
|
||
const cat = internalKbCategories.value.find(c => c.key === file.category)
|
||
if (cat) cat.count--
|
||
}
|
||
}
|
||
ElMessage.success('删除成功')
|
||
}).catch(() => {})
|
||
}
|
||
|
||
const backToMain = () => {
|
||
router.push('/')
|
||
}
|
||
|
||
const goToProfile = () => {
|
||
activeNav.value = 'profile'
|
||
}
|
||
|
||
// 个人中心数据
|
||
const activeProfileTab = ref('basic')
|
||
const showPasswordDialog = ref(false)
|
||
const twoFactorEnabled = ref(false)
|
||
|
||
const profileForm = ref({
|
||
name: '李志鹏',
|
||
employeeId: 'TH20230001',
|
||
department: '技术研发部',
|
||
position: '高级工程师',
|
||
phone: '13800138000',
|
||
email: 'lizhipeng@taihao.com'
|
||
})
|
||
|
||
const operationLogs = ref([
|
||
{ time: '2024-12-06 18:30:00', action: '登录系统', ip: '192.168.1.100', device: 'Windows 11 / Chrome' },
|
||
{ time: '2024-12-06 14:20:00', action: '修改个人信息', ip: '192.168.1.100', device: 'Windows 11 / Chrome' },
|
||
{ time: '2024-12-05 09:15:00', action: '登录系统', ip: '192.168.1.100', device: 'Windows 11 / Chrome' },
|
||
{ time: '2024-12-04 16:45:00', action: '创建工单', ip: '192.168.1.100', device: 'Windows 11 / Chrome' }
|
||
])
|
||
|
||
const saveProfile = () => {
|
||
ElMessage.success('个人信息保存成功！')
|
||
}
|
||
|
||
const resetProfile = () => {
|
||
ElMessage.info('已重置为原始信息')
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.admin-system {
|
||
display: flex;
|
||
height: 100vh;
|
||
background: #f5f7fa;
|
||
}
|
||
|
||
// 内容容器
|
||
.admin-container {
|
||
flex: 1;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
|
||
// 左侧主导航
|
||
.admin-sidebar-main {
|
||
width: 200px;
|
||
background: #F0EAF4;
|
||
border-right: 1px solid #e4e7ed;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.sidebar-header {
|
||
padding: 20px;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
cursor: pointer;
|
||
transition: opacity 0.2s;
|
||
|
||
&:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.logo-img {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 6px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.logo-text {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
}
|
||
}
|
||
}
|
||
|
||
.main-nav {
|
||
flex: 1;
|
||
padding: 16px 0;
|
||
overflow-y: auto;
|
||
|
||
.section-title {
|
||
padding: 8px 20px;
|
||
font-size: 12px;
|
||
color: #909399;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.main-nav-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 12px 20px;
|
||
cursor: pointer;
|
||
color: #606266;
|
||
font-size: 14px;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
background: rgba(124, 58, 237, 0.1);
|
||
color: #7c3aed;
|
||
}
|
||
|
||
&.active {
|
||
background: rgba(124, 58, 237, 0.15);
|
||
color: #7c3aed;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.el-icon {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
.nav-divider {
|
||
height: 1px;
|
||
background: rgba(0, 0, 0, 0.08);
|
||
margin: 12px 20px;
|
||
}
|
||
}
|
||
|
||
.sidebar-footer {
|
||
margin-top: auto;
|
||
padding: 16px;
|
||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||
|
||
.user-section {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
|
||
.user-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
|
||
&:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
.user-name {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
}
|
||
|
||
.back-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
color: #606266;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
color: #7c3aed;
|
||
background: rgba(124, 58, 237, 0.1);
|
||
}
|
||
|
||
.el-icon {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 左侧子导航
|
||
.admin-sidebar-sub {
|
||
width: 180px;
|
||
background: #fff;
|
||
border-right: 1px solid #e4e7ed;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
|
||
.sub-nav {
|
||
padding: 16px 0;
|
||
|
||
.sub-nav-title {
|
||
padding: 8px 20px;
|
||
font-size: 12px;
|
||
color: #909399;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.sub-nav-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 10px 20px;
|
||
cursor: pointer;
|
||
color: #606266;
|
||
font-size: 14px;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
background: rgba(124, 58, 237, 0.1);
|
||
color: #7c3aed;
|
||
}
|
||
|
||
&.active {
|
||
background: rgba(124, 58, 237, 0.15);
|
||
color: #7c3aed;
|
||
border-right: 3px solid #7c3aed;
|
||
}
|
||
|
||
.el-icon {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.admin-main {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.admin-content {
|
||
.content-header {
|
||
padding: 32px 40px;
|
||
background: #fff;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
|
||
h1 {
|
||
font-size: 28px;
|
||
margin: 0 0 8px 0;
|
||
color: #303133;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.dashboard-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20px;
|
||
padding: 24px 40px;
|
||
}
|
||
|
||
.stat-card {
|
||
background: #fff;
|
||
padding: 24px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
gap: 16px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
|
||
.stat-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
color: #fff;
|
||
}
|
||
|
||
.stat-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
}
|
||
}
|
||
|
||
:deep(.el-card) {
|
||
margin: 0 40px 24px;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
// 个人中心样式
|
||
.profile-content {
|
||
.profile-main {
|
||
padding: 24px 40px;
|
||
}
|
||
|
||
.profile-section {
|
||
.avatar-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 32px;
|
||
padding: 24px;
|
||
background: #f5f7fa;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
|
||
.security-section {
|
||
.security-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px 0;
|
||
|
||
.security-info {
|
||
h3 {
|
||
font-size: 16px;
|
||
margin: 0 0 8px 0;
|
||
color: #303133;
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 知识库管理样式
|
||
.content-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 24px;
|
||
|
||
.header-title {
|
||
h1 {
|
||
font-size: 24px;
|
||
margin: 0 0 8px 0;
|
||
color: #303133;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-desc {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
margin: 0 0 20px 0;
|
||
}
|
||
|
||
.kb-categories {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.kb-category-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 20px 16px;
|
||
background: #f5f7fa;
|
||
border: 2px solid transparent;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
border-color: #409eff;
|
||
background: #ecf5ff;
|
||
}
|
||
|
||
&.active {
|
||
border-color: #409eff;
|
||
background: #ecf5ff;
|
||
}
|
||
|
||
.el-icon {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.cat-name {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
text-align: center;
|
||
}
|
||
|
||
.cat-count {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
|
||
.kb-files-section {
|
||
background: #fafafa;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.section-toolbar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
|
||
h3 {
|
||
font-size: 16px;
|
||
margin: 0;
|
||
color: #303133;
|
||
}
|
||
}
|
||
|
||
.file-name-cell {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
|
||
.file-icon {
|
||
color: #409eff;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
// 日志导航样式
|
||
.sub-nav-group {
|
||
.sub-nav-item.has-children {
|
||
justify-content: flex-start;
|
||
|
||
.arrow-icon {
|
||
margin-left: auto;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
&.expanded .arrow-icon {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.sub-nav-children {
|
||
background: rgba(124, 58, 237, 0.05);
|
||
|
||
.sub-nav-child-item {
|
||
padding: 8px 20px 8px 44px;
|
||
cursor: pointer;
|
||
color: #606266;
|
||
font-size: 13px;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
background: rgba(124, 58, 237, 0.1);
|
||
color: #7c3aed;
|
||
}
|
||
|
||
&.active {
|
||
background: rgba(124, 58, 237, 0.15);
|
||
color: #7c3aed;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 数据概览样式
|
||
.dashboard-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
padding: 0 40px;
|
||
margin-bottom: 24px;
|
||
|
||
.stat-card {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 20px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||
transition: all 0.3s;
|
||
|
||
&.clickable {
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||
}
|
||
}
|
||
|
||
.stat-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
color: #fff;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.stat-info {
|
||
flex: 1;
|
||
|
||
.stat-value {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #303133;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.stat-trend {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 12px;
|
||
color: #909399;
|
||
margin-top: 8px;
|
||
|
||
&.up {
|
||
color: #67c23a;
|
||
}
|
||
|
||
&.down {
|
||
color: #f56c6c;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.dashboard-charts {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
padding: 0 40px;
|
||
margin-bottom: 24px;
|
||
|
||
.chart-card {
|
||
margin: 0 !important;
|
||
}
|
||
}
|
||
|
||
.question-stats {
|
||
.question-stat-item {
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
&.clickable {
|
||
cursor: pointer;
|
||
padding: 12px;
|
||
margin: 0 -12px;
|
||
border-radius: 8px;
|
||
|
||
&:hover {
|
||
background: #f5f7fa;
|
||
}
|
||
}
|
||
|
||
.stat-bar-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 8px;
|
||
|
||
.stat-name {
|
||
font-size: 14px;
|
||
color: #303133;
|
||
}
|
||
|
||
.stat-count {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.stat-bar {
|
||
height: 8px;
|
||
background: #f0f0f0;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
|
||
.stat-bar-fill {
|
||
height: 100%;
|
||
border-radius: 4px;
|
||
transition: width 0.6s ease;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-cloud {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px 24px;
|
||
padding: 20px 0;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 180px;
|
||
|
||
.cloud-tag {
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
font-weight: 500;
|
||
|
||
&:hover {
|
||
transform: scale(1.15);
|
||
opacity: 1 !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.quick-entry-card {
|
||
margin: 0 40px 24px !important;
|
||
}
|
||
|
||
.quick-entries {
|
||
display: flex;
|
||
gap: 24px;
|
||
justify-content: center;
|
||
|
||
.quick-entry-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 20px 32px;
|
||
cursor: pointer;
|
||
border-radius: 12px;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
background: #f5f7fa;
|
||
|
||
.entry-icon {
|
||
transform: scale(1.1);
|
||
}
|
||
}
|
||
|
||
.entry-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
color: #fff;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
span {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 工单管理样式
|
||
.filter-card {
|
||
margin: 0 40px 16px !important;
|
||
}
|
||
|
||
.ticket-filters {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
|
||
.el-radio-group {
|
||
.el-badge {
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
|
||
.filter-right {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
}
|
||
|
||
.ticket-no {
|
||
font-family: monospace;
|
||
color: #409eff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.customer-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
|
||
.name {
|
||
font-weight: 500;
|
||
color: #303133;
|
||
}
|
||
|
||
.phone {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
|
||
.unassigned {
|
||
color: #c0c4cc;
|
||
font-style: italic;
|
||
}
|
||
|
||
.table-pagination {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
// 工单详情样式
|
||
.ticket-detail {
|
||
.detail-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
|
||
.ticket-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
|
||
.ticket-no {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.detail-section {
|
||
margin-top: 24px;
|
||
|
||
h4 {
|
||
font-size: 15px;
|
||
margin: 0 0 16px 0;
|
||
color: #303133;
|
||
}
|
||
}
|
||
|
||
.log-content {
|
||
.log-operator {
|
||
font-weight: 500;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.log-action {
|
||
color: #606266;
|
||
}
|
||
}
|
||
|
||
.log-remark {
|
||
margin-top: 4px;
|
||
font-size: 13px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
|
||
.ticket-images {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
|
||
.ticket-image-item {
|
||
width: 120px;
|
||
height: 90px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
border: 1px solid #e4e7ed;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
border-color: #409eff;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
|
||
.image-error {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #f5f7fa;
|
||
color: #c0c4cc;
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
.detail-section h4 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
|
||
.el-icon {
|
||
color: #7c3aed;
|
||
}
|
||
}
|
||
|
||
// 对话数据管理样式
|
||
.conversation-filters {
|
||
display: flex;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.session-id {
|
||
font-family: monospace;
|
||
color: #7c3aed;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.conversation-summary-text {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
color: #606266;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.satisfaction-stars {
|
||
display: flex;
|
||
gap: 2px;
|
||
|
||
.star-filled {
|
||
color: #f7ba2a;
|
||
}
|
||
|
||
.star-empty {
|
||
color: #e4e7ed;
|
||
}
|
||
}
|
||
|
||
.no-rating {
|
||
color: #c0c4cc;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.conversation-detail-header {
|
||
margin-bottom: 20px;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
|
||
.detail-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
|
||
.session-id {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.detail-meta {
|
||
display: flex;
|
||
gap: 24px;
|
||
font-size: 13px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
|
||
// 智能体管理样式
|
||
.agent-config-card {
|
||
margin: 0 40px !important;
|
||
}
|
||
|
||
.agent-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
|
||
.agent-info {
|
||
flex: 1;
|
||
|
||
h2 {
|
||
margin: 0 0 4px 0;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
}
|
||
|
||
.agent-type {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
}
|
||
|
||
.agent-form {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0 40px;
|
||
|
||
.el-form-item {
|
||
margin-bottom: 24px;
|
||
|
||
&.full-width {
|
||
grid-column: 1 / -1;
|
||
}
|
||
}
|
||
|
||
.feature-switches {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px 24px;
|
||
|
||
.el-checkbox {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
.form-tip {
|
||
margin-top: 8px;
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
|
||
.form-actions {
|
||
grid-column: 1 / -1;
|
||
margin-top: 16px;
|
||
}
|
||
}
|
||
|
||
// 日志管理样式
|
||
.log-filters {
|
||
display: flex;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.log-level {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
|
||
&.info {
|
||
background: #e6f7ff;
|
||
color: #1890ff;
|
||
}
|
||
|
||
&.warn {
|
||
background: #fff7e6;
|
||
color: #fa8c16;
|
||
}
|
||
|
||
&.error {
|
||
background: #fff2f0;
|
||
color: #ff4d4f;
|
||
}
|
||
}
|
||
|
||
// 指派工程师弹窗样式
|
||
.assign-dialog {
|
||
.ai-recommend {
|
||
background: linear-gradient(135deg, #f0e6ff, #e6f0ff);
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
margin-bottom: 20px;
|
||
|
||
.recommend-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: #7c3aed;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
|
||
.el-icon {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
.engineer-card.recommended {
|
||
background: #fff;
|
||
border: 2px solid #7c3aed;
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
|
||
.match-score {
|
||
text-align: center;
|
||
|
||
.score {
|
||
display: block;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: #7c3aed;
|
||
}
|
||
|
||
.label {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
}
|
||
|
||
.recommend-reason {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
padding: 12px;
|
||
background: rgba(255, 255, 255, 0.6);
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
color: #606266;
|
||
line-height: 1.6;
|
||
|
||
.el-icon {
|
||
color: #7c3aed;
|
||
margin-top: 2px;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.engineer-list {
|
||
.list-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
|
||
span {
|
||
font-weight: 500;
|
||
color: #303133;
|
||
}
|
||
}
|
||
|
||
.list-content {
|
||
max-height: 240px;
|
||
overflow-y: auto;
|
||
|
||
.engineer-card {
|
||
padding: 12px;
|
||
border: 1px solid #e4e7ed;
|
||
border-radius: 8px;
|
||
margin-bottom: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
border-color: #409eff;
|
||
background: #f5f7fa;
|
||
}
|
||
|
||
&.selected {
|
||
border-color: #409eff;
|
||
background: #ecf5ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.engineer-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
|
||
.info-text {
|
||
flex: 1;
|
||
|
||
.name {
|
||
font-weight: 500;
|
||
color: #303133;
|
||
}
|
||
|
||
.title {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
margin-top: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 对话记录弹窗样式
|
||
.conversation-record {
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
padding: 16px;
|
||
background: #f5f7fa;
|
||
border-radius: 8px;
|
||
|
||
.message-item {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
|
||
&.user {
|
||
flex-direction: row-reverse;
|
||
|
||
.message-content {
|
||
align-items: flex-end;
|
||
|
||
.message-text {
|
||
background: #409eff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.assistant {
|
||
.message-content {
|
||
.message-text {
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.message-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
max-width: 70%;
|
||
|
||
.message-header {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-bottom: 4px;
|
||
font-size: 12px;
|
||
|
||
.sender {
|
||
color: #606266;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.time {
|
||
color: #909399;
|
||
}
|
||
}
|
||
|
||
.message-text {
|
||
padding: 12px 16px;
|
||
border-radius: 12px;
|
||
line-height: 1.6;
|
||
white-space: pre-wrap;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.conversation-summary {
|
||
.summary-section {
|
||
margin-bottom: 24px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
h4 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 15px;
|
||
margin: 0 0 12px 0;
|
||
color: #303133;
|
||
|
||
.el-icon {
|
||
color: #7c3aed;
|
||
}
|
||
}
|
||
|
||
p {
|
||
margin: 0;
|
||
line-height: 1.8;
|
||
color: #606266;
|
||
}
|
||
|
||
ul {
|
||
margin: 0;
|
||
padding-left: 20px;
|
||
|
||
li {
|
||
line-height: 1.8;
|
||
color: #606266;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 占位页面样式
|
||
.placeholder-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 80px 20px;
|
||
text-align: center;
|
||
|
||
.placeholder-icon {
|
||
font-size: 64px;
|
||
color: #dcdfe6;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 18px;
|
||
color: #606266;
|
||
margin: 0 0 12px 0;
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
</style>
|