npmapps 1.1.4 → 1.1.6

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/practiceStatus/components/echarts/EchartsDonut.jsx

@@ -0,0 +1,106 @@
+import { defineComponent, onMounted, ref, watch, onUnmounted } from 'vue'
+import * as echarts from 'echarts'
+
+export default defineComponent({
+  name: 'EchartsDonut',
+  props: {
+    series: {
+      type: Array,
+      default: () => [],
+    },
+    hiddenLegend: {
+      type: Array,
+      default: () => [],
+    },
+    height: {
+      type: Number,
+      default: 200,
+    },
+  },
+  setup(props) {
+    const chartRef = ref(null)
+    let chartInstance = null
+
+    const initChart = () => {
+      if (!chartRef.value) return
+      chartInstance = echarts.init(chartRef.value)
+      updateOption()
+    }
+
+    const updateOption = () => {
+      if (!chartInstance) return
+      // 过滤掉被隐藏的项
+      const data = props.series
+        .filter((item) => !props.hiddenLegend.includes(item.name))
+        .map((item) => ({
+          name: item.name,
+          value: item.value,
+          itemStyle: { color: item.color },
+        }))
+
+      // 计算总数
+      const total = data.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
+
+      const option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}: {c} ({d}%)',
+        },
+        legend: {
+          show: false, // 外部已有 Legend
+        },
+        series: [
+          {
+            name: '进度统计',
+            type: 'pie',
+            radius: ['55%', '90%'],
+            avoidLabelOverlap: true,
+            label: {
+              show: true,
+              position: 'inside',
+              formatter: '{c}({d}%)',
+              color: '#000',
+              fontSize: 12,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: data,
+          },
+        ],
+      }
+      chartInstance.setOption(option)
+    }
+
+    watch(
+      () => [props.series, props.hiddenLegend],
+      () => {
+        updateOption()
+      },
+      { deep: true }
+    )
+
+    onMounted(() => {
+      initChart()
+      window.addEventListener('resize', handleResize)
+    })
+
+    onUnmounted(() => {
+      if (chartInstance) {
+        chartInstance.dispose()
+      }
+      window.removeEventListener('resize', handleResize)
+    })
+
+    const handleResize = () => {
+      chartInstance?.resize()
+    }
+
+    return () => (
+      <div
+        ref={chartRef}
+        style={{ width: '100%', height: `${props.height}px` }}
+      ></div>
+    )
+  },
+})

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/practiceStatus/components/echarts/EchartsRankBar.jsx

@@ -0,0 +1,132 @@
+import { defineComponent, onMounted, ref, watch, onUnmounted } from 'vue'
+import * as echarts from 'echarts'
+
+export default defineComponent({
+  name: 'EchartsRankBar',
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    max: {
+      type: Number,
+      default: 0,
+    },
+    valueFormatter: {
+      type: Function,
+      default: (v) => v,
+    },
+    height: {
+      type: Number,
+      default: 300,
+    },
+  },
+  setup(props) {
+    const chartRef = ref(null)
+    let chartInstance = null
+
+    const initChart = () => {
+      if (!chartRef.value) return
+      chartInstance = echarts.init(chartRef.value)
+      updateOption()
+    }
+
+    const updateOption = () => {
+      if (!chartInstance) return
+
+      // 为了保证顺序（排名第一在最上面），ECharts 默认 category 轴是从下往上画的（index 0 在下）。
+      // 所以通常需要把数据 reverse 一下，或者 yAxis.inverse = true。
+      // 这里 props.data 应该是已排序好的（第一名在 index 0）。
+      // 使用 inverse: true 让 index 0 排在顶部。
+
+      const labels = props.data.map((d) => d.name)
+      const values = props.data.map((d) => d.value)
+      
+      // 如果没有传 max，就取数据最大值作为背景条最大值
+      const maxValue = props.max || (values.length > 0 ? Math.max(...values) * 1.1 : 100)
+
+      const option = {
+        grid: {
+          top: 10,
+          bottom: 10,
+          left: 10,
+          right: 40, // 留给 label
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          show: false,
+          max: maxValue,
+        },
+        yAxis: {
+          type: 'category',
+          data: labels,
+          inverse: true, // 反转，让第一个数据在顶部
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: {
+            color: '#606266',
+            width: 60, // 限制宽度避免太宽
+            overflow: 'truncate',
+          },
+        },
+        series: [
+          {
+            type: 'bar',
+            data: values,
+            barWidth: 12,
+            showBackground: true,
+            backgroundStyle: {
+              color: '#f5f7fa',
+              borderRadius: 6,
+            },
+            itemStyle: {
+              color: '#ff7d00',
+              borderRadius: 6,
+            },
+            label: {
+              show: true,
+              position: 'right',
+              formatter: (params) => {
+                return props.valueFormatter(params.value)
+              },
+              color: '#333',
+            },
+          },
+        ],
+      }
+      chartInstance.setOption(option)
+    }
+
+    watch(
+      () => [props.data, props.max],
+      () => {
+        updateOption()
+      },
+      { deep: true }
+    )
+
+    onMounted(() => {
+      initChart()
+      window.addEventListener('resize', handleResize)
+    })
+
+    onUnmounted(() => {
+      if (chartInstance) {
+        chartInstance.dispose()
+      }
+      window.removeEventListener('resize', handleResize)
+    })
+
+    const handleResize = () => {
+      chartInstance?.resize()
+    }
+
+    return () => (
+      <div
+        ref={chartRef}
+        style={{ width: '100%', height: `${props.height}px` }}
+      ></div>
+    )
+  },
+})

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/practiceStatus/index.jsx

@@ -0,0 +1,176 @@
+import { defineComponent, ref } from 'vue'
+import styles from './index.module.scss'
+import StatCardsRow from './components/StatCardsRow'
+import ChartsPanel from './components/ChartsPanel'
+import PracticeTable from './components/PracticeTable'
+import ScriptStatsPanel from './components/ScriptStatsPanel'
+
+/**
+ * 练习情况页面（按截图搭建）
+ * 1) 组件化拆分：StatCardsRow / ChartsPanel / PracticeTable / ScriptStatsPanel
+ * 2) 模拟数据：统一在父组件准备，props 传入子组件使用
+ * 3) 所有组件均放在 practiceStatus 文件夹内（含子目录）
+ * 4) JSX + Element Plus，风格对齐 aiCoach 目录现有写法
+ */
+export default defineComponent({
+    // 练习情况
+    name: 'PracticeStatus',
+    setup() {
+        // 顶部 tabs（截图：计划统计/剧本统计）
+        const activeTab = ref('plan')
+        const useEcharts = ref(false)
+        setTimeout(() => useEcharts.value = true, 1000)
+
+        // 顶部筛选（截图：所属部门/职务）
+        const filters = ref({
+            dept: '全部部门',
+            role: '全部职务',
+        })
+
+        // 模拟：练习数据概览（截图 6 个卡片）
+        const overviewCards = ref([
+            { key: 'students', label: '总学员人数', value: '828' },
+            { key: 'rate', label: '完成率', value: '83.0%' },
+            { key: 'avgCount', label: '平均练练次数', value: '1.9' },
+            { key: 'avgDuration', label: '平均练练时长(分钟)', value: '10.1' },
+            { key: 'firstAvg', label: '首次练习均分', value: '56.6' },
+            { key: 'bestAvg', label: '最高一次均分', value: '83.4' },
+        ])
+
+        // 模拟：进度统计（截图：已完成/未开始/练习中）
+        const progressSeries = ref([
+            { name: '已完成', value: 68, color: '#ff7a00' },
+            { name: '未开始', value: 6, color: '#7bdcf6' },
+            { name: '练习中', value: 26, color: '#ffd08a' },
+        ])
+
+        // 模拟：学员练习时长排名（分钟）
+        const durationRank = ref([
+            { name: '张三', value: 469.7 },
+            { name: '李四', value: 270.1 },
+            { name: '王五', value: 75.1 },
+            { name: '赵六', value: 74.8 },
+            { name: '周七', value: 67.8 },
+            { name: '吴八', value: 64.0 },
+            { name: '郑九', value: 64.0 },
+            { name: '钱十', value: 64.0 },
+        ])
+
+        // 模拟：学员最高一次均分排名（0-100）
+        const scoreRank = ref([
+            { name: '张三', value: 100 },
+            { name: '李四', value: 100 },
+            { name: '王五', value: 100 },
+            { name: '赵六', value: 100 },
+            { name: '周七', value: 98 },
+            { name: '吴八', value: 96 },
+            { name: '郑九', value: 90 },
+            { name: '钱十', value: 88 },
+        ])
+
+        // 模拟：明细数据（截图表格）
+        const tableData = ref(
+            Array.from({ length: 30 }).map((_, idx) => {
+                const base = idx % 10
+                const score = [80, 70, 75, 90, 96, 56, 78, 67, 69, 99][base]
+                const progress = ['2/5', '5/5', '5/5', '5/5', '5/5', '5/5', '5/5', '5/5', '2/5', '2/5'][base]
+                const passStatus = score >= 60 ? '通过' : '未通过'
+                return {
+                    id: `${Date.now()}-${idx}`,
+                    jobNo: '123456',
+                    name: ['张三', '李四', '王五', '赵六', '周七', '吴八'][idx % 6],
+                    planName: '标准内容',
+                    scriptName: '标准内容',
+                    startTime: '2025-08-01',
+                    endTime: '2025-09-01',
+                    status: '已完成',
+                    score,
+                    passStatus,
+                    progress,
+                }
+            }),
+        )
+
+        return () => {
+            return <div>
+                <div class={styles.practiceStatus}>
+                    <div class={styles.toolbar}>
+                        <div class={styles.toolbarLeft}>
+                            <div class={styles.tabsWrap}>
+                                <div
+                                    class={[styles.tabBtn, activeTab.value === 'plan' ? styles.tabBtnActive : null]}
+                                    onClick={() => (activeTab.value = 'plan')}
+                                >
+                                    计划统计
+                                </div>
+                                <div
+                                    class={[styles.tabBtn, activeTab.value === 'script' ? styles.tabBtnActive : null]}
+                                    onClick={() => (activeTab.value = 'script')}
+                                >
+                                    剧本统计
+                                </div>
+                            </div>
+                        </div>
+                        {activeTab.value === 'plan' && (
+                            <div class={styles.toolbarRight}>
+                                <el-switch
+                                    v-model={useEcharts.value}
+                                    active-text="ECharts"
+                                    inactive-text="CSS"
+                                    style={{ marginRight: '16px' }}
+                                />
+                                <el-select size="small" style={{ width: '120px' }} v-model={filters.value.dept}>
+                                    <el-option label="全部部门" value="全部部门" />
+                                    <el-option label="销售一部" value="销售一部" />
+                                    <el-option label="销售二部" value="销售二部" />
+                                </el-select>
+                                <el-select size="small" style={{ width: '120px' }} v-model={filters.value.role}>
+                                    <el-option label="全部职务" value="全部职务" />
+                                    <el-option label="导购" value="导购" />
+                                    <el-option label="店长" value="店长" />
+                                </el-select>
+                                <el-button size="small">下载</el-button>
+                            </div>
+                        )}
+                         {activeTab.value === 'script' && (
+                            <div class={styles.toolbarRight}>
+                                <el-switch
+                                    v-model={useEcharts.value}
+                                    active-text="ECharts"
+                                    inactive-text="CSS"
+                                    style={{ marginRight: '16px' }}
+                                />
+                            </div>
+                        )}
+                    </div>
+
+                    {activeTab.value === 'plan' ? (
+                        <>
+                            <div class={styles.section}>
+                                <div class={styles.sectionHeader}>练习数据概览</div>
+                                <StatCardsRow cards={overviewCards.value} />
+                            </div>
+
+                            <div class={styles.section}>
+                                <div class={styles.sectionHeader}>练习情况统计</div>
+                                <ChartsPanel
+                                    progress={progressSeries.value}
+                                    durationRank={durationRank.value}
+                                    scoreRank={scoreRank.value}
+                                    useEcharts={useEcharts.value}
+                                />
+                            </div>
+
+                            <div class={styles.section}>
+                                <div class={styles.sectionHeader}>明细数据</div>
+                                <PracticeTable data={tableData.value} pageSize={10} />
+                            </div>
+                        </>
+                    ) : (
+                        <ScriptStatsPanel useEcharts={useEcharts.value} />
+                    )}
+                </div>
+            </div>
+        }
+    },
+})

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/practiceStatus/index.module.scss

@@ -0,0 +1,96 @@
+.practiceStatus {
+  width: 100%;
+  max-width: 1100px;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.toolbarLeft {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toolbarTitle {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.toolbarTitle:before {
+  content: '';
+  display: inline-block;
+  width: 3px;
+  height: 14px;
+  background: #ff7a00;
+  border-radius: 2px;
+  margin-right: 8px;
+}
+
+.toolbarRight {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.section {
+  margin-top: 12px;
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.sectionHeader:before {
+  content: '';
+  display: inline-block;
+  width: 3px;
+  height: 14px;
+  background: #ff7a00;
+  border-radius: 2px;
+  margin-right: 8px;
+}
+
+/* Tabs */
+.tabsWrap {
+  display: flex;
+  gap: 8px;
+}
+
+.tabBtn {
+  padding: 6px 16px;
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  border-radius: 4px;
+  color: #606266;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.tabBtn:hover {
+  color: #ff7a00;
+  border-color: #ff7a00;
+}
+
+.tabBtnActive {
+  background: #ff7a00;
+  border-color: #ff7a00;
+  color: #fff;
+}
+
+.tabBtnActive:hover {
+  color: #fff;
+}

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/reportDetail/components/CoachReport/index.jsx

@@ -0,0 +1,162 @@
+import { defineComponent, ref } from 'vue'
+import styles from './index.module.scss'
+import DimensionScores from '../DimensionScores/index.jsx'
+import ComprehensiveEvaluation from '../ComprehensiveEvaluation/index.jsx'
+import RoleInfo from '../RoleInfo/index.jsx'
+import DimensionDetail from '../DimensionDetail/index.jsx'
+
+/**
+ * 陪练报告组件
+ * @description 显示陪练报告的详细内容，包括维度评分、综合评价、角色信息和各维度详情
+ */
+export default defineComponent({
+    name: 'CoachReport',
+
+    setup() {
+        // ==================== 模拟数据 ====================
+
+        // 维度评分数据
+        const dimensionsData = ref([
+            { name: '话术准确度', score: 10, total: 10, color: 'green' },
+            { name: '语言组织', score: 9, total: 10, color: 'green' },
+            { name: '需求倾听记录', score: 22, total: 28, color: 'orange' },
+            { name: '产品介绍解答', score: 17, total: 27, color: 'orange' },
+            { name: '产品推荐促成', score: 0, total: 26, color: 'red' },
+        ])
+
+        // 综合评价数据
+        const evaluationContent = ref(
+            '在整个对话过程中，你表现出了良好的职业素养。语言表达清晰易懂，逻辑较为明确，且态度友好，具有亲和力。在倾听用户需求方面，能够引导用户说出关键信息，但在记录关键信息上还有所欠缺，没有及时总结和确认用户的资金流动要求和目标收益率等重要内容。后续可以加强这方面的能力。'
+        )
+
+        // 陪练角色数据
+        const roleData = ref({
+            avatar: '', // 头像URL，为空时显示占位符
+            name: '王白白',
+            gender: '女',
+            age: 35,
+            tag: '企业白领',
+            description: `王白白是一个经验丰富的企业白领，她在客户服务领域有丰富的经验。她的专业知识和良好的客户服务能力使得客户在与她互动时能够获得满意的服务。
+            谨慎细致，做事有条不，对待保险这类重要决策极为慎重。沟通时专注认真，会详细记录理财经理的
+介绍内容。习惯对关键信息反复确认，情绪较为稳定，不会轻易被推销话术影响。做决策前会全面考量
+产品的各项细节，权衡利弊后才会行动。`,
+        })
+
+        // 话术准确度详情数据
+        const speechAccuracyDetail = ref({
+            dimension: {
+                name: '话术准确度',
+                score: 10,
+                total: 10,
+                icon: '👏',
+                description: '本项分数基于你全部话术的平均表现得出',
+            },
+            dialogues: [
+                {
+                    question: '您好，速汇盈直联后我们内部系统就和你们打通了，安全性有保障吗？',
+                    answer:
+                        '王总，系统的安全性能您可以放心，我行会提供多重保障，主要是有三方面向您汇报。首先，第一是在客户端，我们会通过前置机加UK对物理数据进行一个隔离，那就像防火墙一样，保障信息的安全。二呢，是在数据端，系统会自动对企业发出的原始指令进行数据加密和加密，就跟摩斯密码一样，确保外部无法解析，但是在银行端呢，我们采用了国际上最高的安全标准，就像中国电建、上汽集团这样的国央企呢，已经和我们进行了试点。这个模式的安全性在国资委已经获得了普及...',
+                    score: 98,
+                    scoreDetails: [
+                        { name: '关键词', score: 20, total: 20, tags: ['多重保障'] },
+                        { name: '语义准确', score: 78, total: 80, tags: [] },
+                    ],
+                    suggestion: '你在对话中表现的非常好，请继续保持！',
+                },
+                {
+                    question: '这个产品的收益率是多少？',
+                    answer:
+                        '关于收益率，我们这款产品是浮动收益型的，近一年的年化收益率在4.5%-5.2%之间，相比市场同类产品具有较强的竞争力。而且我们有专业的投资团队进行管理，历史业绩表现稳定。',
+                    score: 95,
+                    scoreDetails: [
+                        { name: '关键词', score: 18, total: 20, tags: ['年化收益率'] },
+                        { name: '语义准确', score: 77, total: 80, tags: [] },
+                    ],
+                    suggestion: '回答准确，继续保持！',
+                },
+            ],
+        })
+
+        // 语言组织详情数据
+        const languageOrganizationDetail = ref({
+            dimension: {
+                name: '语言组织',
+                score: 9,
+                total: 9,
+                icon: '👏',
+                description:
+                    '你在语言组织方面表现不错。回答清晰易懂，用防火墙和摩斯密码作比喻，让抽象的安全保障概念变得形象易懂，这一点做得非常好。',
+            },
+            subDimensions: [
+                {
+                    name: '易于理解',
+                    score: 1,
+                    total: 3,
+                    comment:
+                        '你在介绍系统安全保障时，运用防火墙和摩斯密码的比喻，使抽象的安全保障概念变得形象易懂，让对方能轻松理解内容，这一点做得非常好。',
+                },
+                {
+                    name: '逻辑性',
+                    score: 2,
+                    total: 3,
+                    comment:
+                        '你按照客户端、数据端、银行端的顺序，有条理地介绍系统安全保障的三个方面，逻辑清晰，让对方能清楚了解整体情况，表现十分出色。',
+                },
+                {
+                    name: '亲和力',
+                    score: 3,
+                    total: 3,
+                    comment:
+                        '你使用"王总"这一友好称呼，迅速拉近与对方的关系，展现出良好的亲和力，让交流氛围更加融洽，值得称赞。',
+                },
+            ],
+        })
+
+        return () => {
+            return (
+                <div class={styles.coachReport}>
+                    {/* 总览区域 */}
+                    <div class={styles.overviewSection}>
+                        {/* 第一行：维度评分和综合评价 */}
+                        <el-row gutter={24}>
+                            {/* 左侧：维度评分 */}
+                            <el-col span={10}>
+                                <DimensionScores dimensions={dimensionsData.value} />
+                            </el-col>
+
+                            {/* 右侧：综合评价 */}
+                            <el-col span={14}>
+                                <ComprehensiveEvaluation content={evaluationContent.value} />
+                            </el-col>
+                        </el-row>
+
+                        {/* 第二行：角色信息 */}
+                        <el-row gutter={24}>
+                            <el-col span={24}>
+                                <RoleInfo data={roleData.value} />
+                            </el-col>
+                        </el-row>
+                    </div>
+
+                    {/* 话术准确度详情 */}
+                    <div class={styles.detailSection}>
+                        <DimensionDetail
+                            type="dialogue"
+                            dimension={speechAccuracyDetail.value.dimension}
+                            dialogues={speechAccuracyDetail.value.dialogues}
+                        />
+                    </div>
+
+                    {/* 语言组织详情 */}
+                    <div class={styles.detailSection}>
+                        <DimensionDetail
+                            type="subdimension"
+                            dimension={languageOrganizationDetail.value.dimension}
+                            subDimensions={languageOrganizationDetail.value.subDimensions}
+                        />
+                    </div>
+                </div>
+            )
+        }
+    },
+})

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/reportDetail/components/CoachReport/index.module.scss

@@ -0,0 +1,16 @@
+// 陪练报告样式
+.coachReport {
+    width: 100%;
+}
+
+.overviewSection {
+    margin-bottom: 24px;
+}
+
+.detailSection {
+    margin-bottom: 24px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}