feat: 指标
This commit is contained in:
parent
1347438e76
commit
0dbf3795d2
101
src/views/evaluate/il/speech/components/MetricCategory.vue
Normal file
101
src/views/evaluate/il/speech/components/MetricCategory.vue
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
<!-- MetricCategory.vue - 一级指标组件 -->
|
||||||
|
<template>
|
||||||
|
<div class="metric-category">
|
||||||
|
<el-card class="category-card">
|
||||||
|
<div class="card-container">
|
||||||
|
<div class="category-info">
|
||||||
|
<div><el-tag type="primary">一级指标</el-tag></div>
|
||||||
|
<span class="category-name">{{ category.name }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="category-actions">
|
||||||
|
<el-button size="small" @click="handleEdit" :icon="Edit" />
|
||||||
|
<el-button size="small" type="danger" @click="handleRemove" :icon="Delete" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 编辑一级指标对话框 -->
|
||||||
|
<el-dialog v-model="showEditDialog" title="编辑一级指标" width="500px">
|
||||||
|
<MetricForm
|
||||||
|
ref="metricFormRef"
|
||||||
|
:metric="editingCategory"
|
||||||
|
@submit="handleUpdateCategory"
|
||||||
|
/>
|
||||||
|
<template #footer>
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="showEditDialog = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submitMetricForm">确认</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
import MetricForm from './MetricForm.vue'
|
||||||
|
import { Delete, Edit } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
category: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['update-category', 'add-submetric', 'remove-category'])
|
||||||
|
|
||||||
|
const showEditDialog = ref(false)
|
||||||
|
const metricFormRef = ref(null)
|
||||||
|
const editingCategory = reactive({ ...props.category })
|
||||||
|
|
||||||
|
|
||||||
|
const handleEdit = () => {
|
||||||
|
Object.assign(editingCategory, props.category)
|
||||||
|
showEditDialog.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRemove = () => {
|
||||||
|
emit('remove-category', props.category.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
const submitMetricForm = () => {
|
||||||
|
if (metricFormRef.value) {
|
||||||
|
metricFormRef.value.submitForm()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleUpdateCategory = (metricData) => {
|
||||||
|
emit('update-category', {
|
||||||
|
...props.category,
|
||||||
|
...metricData
|
||||||
|
})
|
||||||
|
showEditDialog.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.metric-category {
|
||||||
|
.category-card {
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
.card-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.category-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
.category-name {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
49
src/views/evaluate/il/speech/components/MetricForm.vue
Normal file
49
src/views/evaluate/il/speech/components/MetricForm.vue
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<!-- MetricForm.vue - 指标配置表单组件 -->
|
||||||
|
<template>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="metric"
|
||||||
|
:rules="rules"
|
||||||
|
label-width="100px"
|
||||||
|
@submit.prevent
|
||||||
|
>
|
||||||
|
<el-form-item label="指标名称" prop="name">
|
||||||
|
<el-input v-model="metric.name" placeholder="请输入一级指标名称" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
metric: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['submit'])
|
||||||
|
|
||||||
|
const formRef = ref(null)
|
||||||
|
|
||||||
|
const rules = reactive({
|
||||||
|
name: [
|
||||||
|
{ required: true, message: '请输入指标名称', trigger: 'blur' }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
const submitForm = () => {
|
||||||
|
if (!formRef.value) return
|
||||||
|
|
||||||
|
formRef.value.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
emit('submit', { ...props.metric })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
submitForm
|
||||||
|
})
|
||||||
|
</script>
|
||||||
287
src/views/evaluate/il/speech/components/ScoreTable.vue
Normal file
287
src/views/evaluate/il/speech/components/ScoreTable.vue
Normal file
@ -0,0 +1,287 @@
|
|||||||
|
<template>
|
||||||
|
<div class="score-table-container">
|
||||||
|
<!-- 表头 -->
|
||||||
|
<div class="table-header">
|
||||||
|
<div class="table-header-item">数值1</div>
|
||||||
|
<div class="table-header-item">符号1</div>
|
||||||
|
<div class="table-header-item">得分指标</div>
|
||||||
|
<div class="table-header-item">符号2</div>
|
||||||
|
<div class="table-header-item">数值2</div>
|
||||||
|
<div class="table-header-item">分数</div>
|
||||||
|
<div class="table-header-item">权重</div>
|
||||||
|
<div class="table-header-item">操作</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格内容 -->
|
||||||
|
<div class="table-body">
|
||||||
|
<div v-for="(row, index) in tableData" :key="index" class="table-row">
|
||||||
|
<!-- 数值1 -->
|
||||||
|
<el-input v-model="row.value1" placeholder="请输入..." class="table-cell-input">
|
||||||
|
<template #append>ms</template>
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
<!-- 符号1 -->
|
||||||
|
<el-select v-model="row.symbol1" class="table-cell-select">
|
||||||
|
<el-option label="≤" value="le"></el-option>
|
||||||
|
<el-option label="<" value="lt"></el-option>
|
||||||
|
<el-option label="≥" value="ge"></el-option>
|
||||||
|
<el-option label=">" value="gt"></el-option>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<!-- 得分指标 -->
|
||||||
|
<el-input v-model="row.indicator" class="table-cell-input" :readonly="true" />
|
||||||
|
|
||||||
|
<!-- 符号2 -->
|
||||||
|
<el-select v-model="row.symbol2" class="table-cell-select">
|
||||||
|
<el-option label="≤" value="le"></el-option>
|
||||||
|
<el-option label="<" value="lt"></el-option>
|
||||||
|
<el-option label="≥" value="ge"></el-option>
|
||||||
|
<el-option label=">" value="gt"></el-option>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<!-- 数值2 -->
|
||||||
|
<el-input v-model="row.value2" class="table-cell-input">
|
||||||
|
<template #append>ms</template>
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
<!-- 分数 -->
|
||||||
|
<el-input v-model="row.score" class="table-cell-input" />
|
||||||
|
|
||||||
|
<!-- 权重 -->
|
||||||
|
<el-input v-model="row.weight" class="table-cell-input">
|
||||||
|
<template #append>%</template>
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<div class="table-cell-action">
|
||||||
|
<el-button
|
||||||
|
icon="Edit"
|
||||||
|
size="small"
|
||||||
|
circle
|
||||||
|
@click="handleEdit(index)"
|
||||||
|
class="action-btn edit-btn"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 最后一行显示添加按钮 -->
|
||||||
|
<el-button
|
||||||
|
v-if="index === tableData.length - 1"
|
||||||
|
icon="Plus"
|
||||||
|
size="small"
|
||||||
|
circle
|
||||||
|
@click="handleAdd"
|
||||||
|
class="action-btn add-btn"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<el-button
|
||||||
|
icon="Delete"
|
||||||
|
size="small"
|
||||||
|
circle
|
||||||
|
@click="handleDelete(index)"
|
||||||
|
class="action-btn del-btn"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始化表格数据
|
||||||
|
const tableData = ref([
|
||||||
|
{
|
||||||
|
value1: "",
|
||||||
|
symbol1: "",
|
||||||
|
indicator: props.title,
|
||||||
|
symbol2: "le",
|
||||||
|
value2: "700",
|
||||||
|
score: "100",
|
||||||
|
weight: "50",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value1: "700",
|
||||||
|
symbol1: "lt",
|
||||||
|
indicator: props.title,
|
||||||
|
symbol2: "le",
|
||||||
|
value2: "1000",
|
||||||
|
score: "80",
|
||||||
|
weight: "50",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value1: "1000",
|
||||||
|
symbol1: "lt",
|
||||||
|
indicator: props.title,
|
||||||
|
symbol2: "le",
|
||||||
|
value2: "1300",
|
||||||
|
score: "60",
|
||||||
|
weight: "50",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value1: "",
|
||||||
|
symbol1: "",
|
||||||
|
indicator: props.title,
|
||||||
|
symbol2: "gt",
|
||||||
|
value2: "1300",
|
||||||
|
score: "0",
|
||||||
|
weight: "50",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 编辑行
|
||||||
|
const handleEdit = (index) => {
|
||||||
|
console.log("编辑行:", index, tableData.value[index]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 添加新行
|
||||||
|
const handleAdd = () => {
|
||||||
|
tableData.value.push({
|
||||||
|
value1: "",
|
||||||
|
symbol1: "",
|
||||||
|
indicator: props.title,
|
||||||
|
symbol2: "le",
|
||||||
|
value2: "",
|
||||||
|
score: "",
|
||||||
|
weight: "50",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除行
|
||||||
|
const handleDelete = (index) => {
|
||||||
|
if (tableData.value.length <= 1) {
|
||||||
|
ElMessage.warning("至少保留一行数据");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
tableData.value.splice(index, 1);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 全局变量（可抽离到单独的scss文件引入）
|
||||||
|
$table-border-color: #e5e7eb;
|
||||||
|
$table-header-bg: #f9fafb;
|
||||||
|
$table-row-hover-bg: #f5f7fa;
|
||||||
|
$gap-base: 0.5rem;
|
||||||
|
$padding-base: 1rem;
|
||||||
|
$text-sm: 0.875rem;
|
||||||
|
$font-medium: 500;
|
||||||
|
|
||||||
|
// 主容器
|
||||||
|
.score-table-container {
|
||||||
|
border: 1px solid $table-border-color;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden; // 防止圆角溢出
|
||||||
|
|
||||||
|
// 表头样式
|
||||||
|
.table-header {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||||
|
gap: $gap-base;
|
||||||
|
padding: $gap-base $padding-base;
|
||||||
|
background-color: $table-header-bg;
|
||||||
|
border-bottom: 1px solid $table-border-color;
|
||||||
|
|
||||||
|
.table-header-item {
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: $text-sm;
|
||||||
|
font-weight: $font-medium;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表体样式
|
||||||
|
.table-body {
|
||||||
|
.table-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||||
|
gap: $gap-base;
|
||||||
|
padding: $gap-base * 1.5 $padding-base;
|
||||||
|
border-bottom: 1px solid $table-border-color;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
// 行hover效果
|
||||||
|
&:hover {
|
||||||
|
background-color: $table-row-hover-bg;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 最后一行去掉底边框
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 输入框样式
|
||||||
|
.table-cell-input {
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下拉框样式
|
||||||
|
.table-cell-select {
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 操作列样式
|
||||||
|
.table-cell-action {
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: $gap-base;
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-btn {
|
||||||
|
color: #409eff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #ecf5ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-btn {
|
||||||
|
color: #67c23a;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f0f9eb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.del-btn {
|
||||||
|
color: #f56c6c;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #fef0f0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
65
src/views/evaluate/il/speech/index.vue
Normal file
65
src/views/evaluate/il/speech/index.vue
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<div class="evaluation-metrics">
|
||||||
|
<div class="left">
|
||||||
|
<Indicator />
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="title">
|
||||||
|
<h2>指标配置</h2>
|
||||||
|
<el-button type="primary">
|
||||||
|
<el-icon><Plus /></el-icon>
|
||||||
|
添加二级指标
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="secondaryIndicator-container">
|
||||||
|
<SecondaryIndicator v-for="value in 3" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Indicator from './indicator.vue';
|
||||||
|
import SecondaryIndicator from './secondaryIndicator.vue';
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.evaluation-metrics {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
width: 320px;
|
||||||
|
border: 1px solid #dbdbdb;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #dbdbdb;
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
padding: 0 20px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondaryIndicator-container {
|
||||||
|
height: calc(100% - 72px);
|
||||||
|
overflow: auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
162
src/views/evaluate/il/speech/indicator.vue
Normal file
162
src/views/evaluate/il/speech/indicator.vue
Normal file
@ -0,0 +1,162 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="page-header">
|
||||||
|
<h2>评价指标</h2>
|
||||||
|
<div class="header-actions">
|
||||||
|
<el-button type="primary" @click="handleAddMetric">
|
||||||
|
<el-icon><Plus /></el-icon>
|
||||||
|
添加
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="metrics-container">
|
||||||
|
<MetricCategory
|
||||||
|
v-for="category in metricCategories"
|
||||||
|
:key="category.id"
|
||||||
|
:category="category"
|
||||||
|
@update-category="updateCategory"
|
||||||
|
@add-submetric="addSubmetric"
|
||||||
|
@remove-category="removeCategory"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- 添加一级指标对话框 -->
|
||||||
|
<el-dialog v-model="showAddDialog" title="添加一级指标" width="500px">
|
||||||
|
<MetricForm ref="metricFormRef" :metric="newMetric" @submit="handleAddCategory" />
|
||||||
|
<template #footer>
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="showAddDialog = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submitMetricForm">确认</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Plus } from "@element-plus/icons-vue";
|
||||||
|
import MetricCategory from "./components/MetricCategory.vue";
|
||||||
|
import MetricForm from "./components/MetricForm.vue";
|
||||||
|
|
||||||
|
// 模拟数据
|
||||||
|
const metricCategories = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "语音唤醒",
|
||||||
|
weight: 30,
|
||||||
|
subMetrics: [
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
name: "指挥名称：无噪声唤醒",
|
||||||
|
weight: 30,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "语音识别",
|
||||||
|
weight: 20,
|
||||||
|
subMetrics: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "智能交互",
|
||||||
|
weight: 20,
|
||||||
|
subMetrics: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "数据分析",
|
||||||
|
weight: 10,
|
||||||
|
subMetrics: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: "能智能力",
|
||||||
|
weight: 50,
|
||||||
|
subMetrics: [
|
||||||
|
{
|
||||||
|
id: 51,
|
||||||
|
name: "情绪分析：免唤醒",
|
||||||
|
weight: 50,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const handleAddMetric = () => {
|
||||||
|
newMetric.name = "";
|
||||||
|
newMetric.weight = 0;
|
||||||
|
newMetric.subMetrics = [];
|
||||||
|
showAddDialog.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateCategory = (updatedCategory) => {
|
||||||
|
const index = metricCategories.value.findIndex((cat) => cat.id === updatedCategory.id);
|
||||||
|
if (index !== -1) {
|
||||||
|
metricCategories.value[index] = updatedCategory;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const addSubmetric = (categoryId, submetric) => {
|
||||||
|
const category = metricCategories.value.find((cat) => cat.id === categoryId);
|
||||||
|
if (category) {
|
||||||
|
category.subMetrics.push({
|
||||||
|
id: Date.now(),
|
||||||
|
...submetric,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeCategory = (categoryId) => {
|
||||||
|
const index = metricCategories.value.findIndex((cat) => cat.id === categoryId);
|
||||||
|
if (index !== -1) {
|
||||||
|
metricCategories.value.splice(index, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const showAddDialog = ref(false);
|
||||||
|
const metricFormRef = ref(null);
|
||||||
|
const newMetric = reactive({
|
||||||
|
name: "",
|
||||||
|
weight: 0,
|
||||||
|
subMetrics: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const submitMetricForm = () => {
|
||||||
|
if (metricFormRef.value) {
|
||||||
|
metricFormRef.value.submitForm();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddCategory = (metricData) => {
|
||||||
|
const newCategory = {
|
||||||
|
id: Date.now(),
|
||||||
|
...metricData,
|
||||||
|
};
|
||||||
|
metricCategories.value.push(newCategory);
|
||||||
|
showAddDialog.value = false;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
border-bottom: 1px solid #e4e7ed;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.metrics-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
77
src/views/evaluate/il/speech/secondaryIndicator.vue
Normal file
77
src/views/evaluate/il/speech/secondaryIndicator.vue
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="indicator-container">
|
||||||
|
<div class="title-container">
|
||||||
|
<div class="title-left">
|
||||||
|
<el-tag>二级指标</el-tag>
|
||||||
|
<div class="title">指标名称:<span class="text">无噪声唤醒</span></div>
|
||||||
|
</div>
|
||||||
|
<div>指标权重:30.00%</div>
|
||||||
|
<div>
|
||||||
|
<el-button size="small" :icon="Edit" />
|
||||||
|
<el-button size="small" type="danger" :icon="Delete" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-tabs v-model="activeTab">
|
||||||
|
<el-tab-pane
|
||||||
|
v-for="item in tabList"
|
||||||
|
:key="item.name"
|
||||||
|
:label="item.title"
|
||||||
|
:name="item.name"
|
||||||
|
>
|
||||||
|
<ScoreTable :title="item.title" />
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Delete, Edit } from "@element-plus/icons-vue";
|
||||||
|
import ScoreTable from "./components/ScoreTable.vue";
|
||||||
|
const activeTab = ref('1');
|
||||||
|
|
||||||
|
const tabList = ref([
|
||||||
|
{
|
||||||
|
title: "唤醒时间",
|
||||||
|
name: "1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "唤醒成功率",
|
||||||
|
name: "2",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
margin: 20px 0;
|
||||||
|
|
||||||
|
.indicator-container {
|
||||||
|
border: 1px solid #dbdbdb;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.title-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.title-left {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-left: 8px;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
101
src/views/evaluate/il/touch/components/MetricCategory.vue
Normal file
101
src/views/evaluate/il/touch/components/MetricCategory.vue
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
<!-- MetricCategory.vue - 一级指标组件 -->
|
||||||
|
<template>
|
||||||
|
<div class="metric-category">
|
||||||
|
<el-card class="category-card">
|
||||||
|
<div class="card-container">
|
||||||
|
<div class="category-info">
|
||||||
|
<div><el-tag type="primary">一级指标</el-tag></div>
|
||||||
|
<span class="category-name">{{ category.name }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="category-actions">
|
||||||
|
<el-button size="small" @click="handleEdit" :icon="Edit" />
|
||||||
|
<el-button size="small" type="danger" @click="handleRemove" :icon="Delete" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 编辑一级指标对话框 -->
|
||||||
|
<el-dialog v-model="showEditDialog" title="编辑一级指标" width="500px">
|
||||||
|
<MetricForm
|
||||||
|
ref="metricFormRef"
|
||||||
|
:metric="editingCategory"
|
||||||
|
@submit="handleUpdateCategory"
|
||||||
|
/>
|
||||||
|
<template #footer>
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="showEditDialog = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submitMetricForm">确认</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
import MetricForm from './MetricForm.vue'
|
||||||
|
import { Delete, Edit } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
category: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['update-category', 'add-submetric', 'remove-category'])
|
||||||
|
|
||||||
|
const showEditDialog = ref(false)
|
||||||
|
const metricFormRef = ref(null)
|
||||||
|
const editingCategory = reactive({ ...props.category })
|
||||||
|
|
||||||
|
|
||||||
|
const handleEdit = () => {
|
||||||
|
Object.assign(editingCategory, props.category)
|
||||||
|
showEditDialog.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRemove = () => {
|
||||||
|
emit('remove-category', props.category.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
const submitMetricForm = () => {
|
||||||
|
if (metricFormRef.value) {
|
||||||
|
metricFormRef.value.submitForm()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleUpdateCategory = (metricData) => {
|
||||||
|
emit('update-category', {
|
||||||
|
...props.category,
|
||||||
|
...metricData
|
||||||
|
})
|
||||||
|
showEditDialog.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.metric-category {
|
||||||
|
.category-card {
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
.card-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.category-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
.category-name {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
49
src/views/evaluate/il/touch/components/MetricForm.vue
Normal file
49
src/views/evaluate/il/touch/components/MetricForm.vue
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<!-- MetricForm.vue - 指标配置表单组件 -->
|
||||||
|
<template>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="metric"
|
||||||
|
:rules="rules"
|
||||||
|
label-width="100px"
|
||||||
|
@submit.prevent
|
||||||
|
>
|
||||||
|
<el-form-item label="指标名称" prop="name">
|
||||||
|
<el-input v-model="metric.name" placeholder="请输入一级指标名称" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
metric: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['submit'])
|
||||||
|
|
||||||
|
const formRef = ref(null)
|
||||||
|
|
||||||
|
const rules = reactive({
|
||||||
|
name: [
|
||||||
|
{ required: true, message: '请输入指标名称', trigger: 'blur' }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
const submitForm = () => {
|
||||||
|
if (!formRef.value) return
|
||||||
|
|
||||||
|
formRef.value.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
emit('submit', { ...props.metric })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
submitForm
|
||||||
|
})
|
||||||
|
</script>
|
||||||
284
src/views/evaluate/il/touch/components/ScoreTable.vue
Normal file
284
src/views/evaluate/il/touch/components/ScoreTable.vue
Normal file
@ -0,0 +1,284 @@
|
|||||||
|
<template>
|
||||||
|
<div class="score-table-container">
|
||||||
|
<!-- 表头 -->
|
||||||
|
<div class="table-header">
|
||||||
|
<div class="table-header-item">数值1</div>
|
||||||
|
<div class="table-header-item">符号1</div>
|
||||||
|
<div class="table-header-item">得分指标</div>
|
||||||
|
<div class="table-header-item">符号2</div>
|
||||||
|
<div class="table-header-item">数值2</div>
|
||||||
|
<div class="table-header-item">分数</div>
|
||||||
|
<div class="table-header-item">权重</div>
|
||||||
|
<div class="table-header-item">操作</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格内容 -->
|
||||||
|
<div class="table-body">
|
||||||
|
<div v-for="(row, index) in tableData" :key="index" class="table-row">
|
||||||
|
<!-- 数值1 -->
|
||||||
|
<el-input v-model="row.value1" placeholder="请输入..." class="table-cell-input">
|
||||||
|
<template #append>ms</template>
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
<!-- 符号1 -->
|
||||||
|
<el-select v-model="row.symbol1" class="table-cell-select">
|
||||||
|
<el-option label="≤" value="le"></el-option>
|
||||||
|
<el-option label="<" value="lt"></el-option>
|
||||||
|
<el-option label="≥" value="ge"></el-option>
|
||||||
|
<el-option label=">" value="gt"></el-option>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<!-- 得分指标 -->
|
||||||
|
<el-input v-model="row.indicator" class="table-cell-input" :readonly="true" />
|
||||||
|
|
||||||
|
<!-- 符号2 -->
|
||||||
|
<el-select v-model="row.symbol2" class="table-cell-select">
|
||||||
|
<el-option label="≤" value="le"></el-option>
|
||||||
|
<el-option label="<" value="lt"></el-option>
|
||||||
|
<el-option label="≥" value="ge"></el-option>
|
||||||
|
<el-option label=">" value="gt"></el-option>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<!-- 数值2 -->
|
||||||
|
<el-input v-model="row.value2" class="table-cell-input">
|
||||||
|
<template #append>ms</template>
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
<!-- 分数 -->
|
||||||
|
<el-input v-model="row.score" class="table-cell-input" />
|
||||||
|
|
||||||
|
<!-- 权重 -->
|
||||||
|
<el-input v-model="row.weight" class="table-cell-input">
|
||||||
|
<template #append>%</template>
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<div class="table-cell-action">
|
||||||
|
<el-button
|
||||||
|
icon="Edit"
|
||||||
|
size="small"
|
||||||
|
circle
|
||||||
|
@click="handleEdit(index)"
|
||||||
|
class="action-btn edit-btn"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 最后一行显示添加按钮 -->
|
||||||
|
<el-button
|
||||||
|
v-if="index === tableData.length - 1"
|
||||||
|
icon="Plus"
|
||||||
|
size="small"
|
||||||
|
circle
|
||||||
|
@click="handleAdd"
|
||||||
|
class="action-btn add-btn"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<el-button
|
||||||
|
icon="Delete"
|
||||||
|
size="small"
|
||||||
|
circle
|
||||||
|
@click="handleDelete(index)"
|
||||||
|
class="action-btn del-btn"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始化表格数据
|
||||||
|
const tableData = ref([
|
||||||
|
{
|
||||||
|
value1: "",
|
||||||
|
symbol1: "",
|
||||||
|
indicator: props.title,
|
||||||
|
symbol2: "le",
|
||||||
|
value2: "700",
|
||||||
|
score: "100",
|
||||||
|
weight: "50",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value1: "700",
|
||||||
|
symbol1: "lt",
|
||||||
|
indicator: props.title,
|
||||||
|
symbol2: "le",
|
||||||
|
value2: "1000",
|
||||||
|
score: "80",
|
||||||
|
weight: "50",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value1: "1000",
|
||||||
|
symbol1: "lt",
|
||||||
|
indicator: props.title,
|
||||||
|
symbol2: "le",
|
||||||
|
value2: "1300",
|
||||||
|
score: "60",
|
||||||
|
weight: "50",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value1: "",
|
||||||
|
symbol1: "",
|
||||||
|
indicator: props.title,
|
||||||
|
symbol2: "gt",
|
||||||
|
value2: "1300",
|
||||||
|
score: "0",
|
||||||
|
weight: "50",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 编辑行
|
||||||
|
const handleEdit = (index) => {
|
||||||
|
console.log("编辑行:", index, tableData.value[index]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 添加新行
|
||||||
|
const handleAdd = () => {
|
||||||
|
tableData.value.push({
|
||||||
|
value1: "",
|
||||||
|
symbol1: "",
|
||||||
|
indicator: props.title,
|
||||||
|
symbol2: "le",
|
||||||
|
value2: "",
|
||||||
|
score: "",
|
||||||
|
weight: "50",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除行
|
||||||
|
const handleDelete = (index) => {
|
||||||
|
if (tableData.value.length <= 1) {
|
||||||
|
ElMessage.warning("至少保留一行数据");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
tableData.value.splice(index, 1);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 全局变量（可抽离到单独的scss文件引入）
|
||||||
|
$table-border-color: #e5e7eb;
|
||||||
|
$table-header-bg: #f9fafb;
|
||||||
|
$table-row-hover-bg: #f5f7fa;
|
||||||
|
$gap-base: 0.5rem;
|
||||||
|
$padding-base: 1rem;
|
||||||
|
$text-sm: 0.875rem;
|
||||||
|
$font-medium: 500;
|
||||||
|
|
||||||
|
// 主容器
|
||||||
|
.score-table-container {
|
||||||
|
border: 1px solid $table-border-color;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden; // 防止圆角溢出
|
||||||
|
|
||||||
|
// 表头样式
|
||||||
|
.table-header {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||||
|
gap: $gap-base;
|
||||||
|
padding: $gap-base $padding-base;
|
||||||
|
background-color: $table-header-bg;
|
||||||
|
border-bottom: 1px solid $table-border-color;
|
||||||
|
|
||||||
|
.table-header-item {
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: $text-sm;
|
||||||
|
font-weight: $font-medium;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表体样式
|
||||||
|
.table-body {
|
||||||
|
.table-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||||
|
gap: $gap-base;
|
||||||
|
padding: $gap-base * 1.5 $padding-base;
|
||||||
|
border-bottom: 1px solid $table-border-color;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
// 行hover效果
|
||||||
|
&:hover {
|
||||||
|
background-color: $table-row-hover-bg;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 最后一行去掉底边框
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 输入框样式
|
||||||
|
.table-cell-input {
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下拉框样式
|
||||||
|
.table-cell-select {
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 操作列样式
|
||||||
|
.table-cell-action {
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: $gap-base;
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-btn {
|
||||||
|
color: #409eff;
|
||||||
|
&:hover {
|
||||||
|
background-color: #ecf5ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-btn {
|
||||||
|
color: #67c23a;
|
||||||
|
&:hover {
|
||||||
|
background-color: #f0f9eb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.del-btn {
|
||||||
|
color: #f56c6c;
|
||||||
|
&:hover {
|
||||||
|
background-color: #fef0f0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
65
src/views/evaluate/il/touch/index.vue
Normal file
65
src/views/evaluate/il/touch/index.vue
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<div class="evaluation-metrics">
|
||||||
|
<div class="left">
|
||||||
|
<Indicator />
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="title">
|
||||||
|
<h2>指标配置</h2>
|
||||||
|
<el-button type="primary">
|
||||||
|
<el-icon><Plus /></el-icon>
|
||||||
|
添加二级指标
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="secondaryIndicator-container">
|
||||||
|
<SecondaryIndicator v-for="value in 3" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Indicator from './indicator.vue';
|
||||||
|
import SecondaryIndicator from './secondaryIndicator.vue';
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.evaluation-metrics {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
width: 320px;
|
||||||
|
border: 1px solid #dbdbdb;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #dbdbdb;
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
padding: 0 20px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondaryIndicator-container {
|
||||||
|
height: calc(100% - 72px);
|
||||||
|
overflow: auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
162
src/views/evaluate/il/touch/indicator.vue
Normal file
162
src/views/evaluate/il/touch/indicator.vue
Normal file
@ -0,0 +1,162 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="page-header">
|
||||||
|
<h2>评价指标</h2>
|
||||||
|
<div class="header-actions">
|
||||||
|
<el-button type="primary" @click="handleAddMetric">
|
||||||
|
<el-icon><Plus /></el-icon>
|
||||||
|
添加
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="metrics-container">
|
||||||
|
<MetricCategory
|
||||||
|
v-for="category in metricCategories"
|
||||||
|
:key="category.id"
|
||||||
|
:category="category"
|
||||||
|
@update-category="updateCategory"
|
||||||
|
@add-submetric="addSubmetric"
|
||||||
|
@remove-category="removeCategory"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- 添加一级指标对话框 -->
|
||||||
|
<el-dialog v-model="showAddDialog" title="添加一级指标" width="500px">
|
||||||
|
<MetricForm ref="metricFormRef" :metric="newMetric" @submit="handleAddCategory" />
|
||||||
|
<template #footer>
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="showAddDialog = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submitMetricForm">确认</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Plus } from "@element-plus/icons-vue";
|
||||||
|
import MetricCategory from "./components/MetricCategory.vue";
|
||||||
|
import MetricForm from "./components/MetricForm.vue";
|
||||||
|
|
||||||
|
// 模拟数据
|
||||||
|
const metricCategories = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "语音唤醒",
|
||||||
|
weight: 30,
|
||||||
|
subMetrics: [
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
name: "指挥名称：无噪声唤醒",
|
||||||
|
weight: 30,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "语音识别",
|
||||||
|
weight: 20,
|
||||||
|
subMetrics: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "智能交互",
|
||||||
|
weight: 20,
|
||||||
|
subMetrics: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "数据分析",
|
||||||
|
weight: 10,
|
||||||
|
subMetrics: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: "能智能力",
|
||||||
|
weight: 50,
|
||||||
|
subMetrics: [
|
||||||
|
{
|
||||||
|
id: 51,
|
||||||
|
name: "情绪分析：免唤醒",
|
||||||
|
weight: 50,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const handleAddMetric = () => {
|
||||||
|
newMetric.name = "";
|
||||||
|
newMetric.weight = 0;
|
||||||
|
newMetric.subMetrics = [];
|
||||||
|
showAddDialog.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateCategory = (updatedCategory) => {
|
||||||
|
const index = metricCategories.value.findIndex((cat) => cat.id === updatedCategory.id);
|
||||||
|
if (index !== -1) {
|
||||||
|
metricCategories.value[index] = updatedCategory;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const addSubmetric = (categoryId, submetric) => {
|
||||||
|
const category = metricCategories.value.find((cat) => cat.id === categoryId);
|
||||||
|
if (category) {
|
||||||
|
category.subMetrics.push({
|
||||||
|
id: Date.now(),
|
||||||
|
...submetric,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeCategory = (categoryId) => {
|
||||||
|
const index = metricCategories.value.findIndex((cat) => cat.id === categoryId);
|
||||||
|
if (index !== -1) {
|
||||||
|
metricCategories.value.splice(index, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const showAddDialog = ref(false);
|
||||||
|
const metricFormRef = ref(null);
|
||||||
|
const newMetric = reactive({
|
||||||
|
name: "",
|
||||||
|
weight: 0,
|
||||||
|
subMetrics: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const submitMetricForm = () => {
|
||||||
|
if (metricFormRef.value) {
|
||||||
|
metricFormRef.value.submitForm();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddCategory = (metricData) => {
|
||||||
|
const newCategory = {
|
||||||
|
id: Date.now(),
|
||||||
|
...metricData,
|
||||||
|
};
|
||||||
|
metricCategories.value.push(newCategory);
|
||||||
|
showAddDialog.value = false;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
border-bottom: 1px solid #e4e7ed;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.metrics-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
77
src/views/evaluate/il/touch/secondaryIndicator.vue
Normal file
77
src/views/evaluate/il/touch/secondaryIndicator.vue
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="indicator-container">
|
||||||
|
<div class="title-container">
|
||||||
|
<div class="title-left">
|
||||||
|
<el-tag>二级指标</el-tag>
|
||||||
|
<div class="title">指标名称:<span class="text">无噪声唤醒</span></div>
|
||||||
|
</div>
|
||||||
|
<div>指标权重:30.00%</div>
|
||||||
|
<div>
|
||||||
|
<el-button size="small" :icon="Edit" />
|
||||||
|
<el-button size="small" type="danger" :icon="Delete" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-tabs v-model="activeTab">
|
||||||
|
<el-tab-pane
|
||||||
|
v-for="item in tabList"
|
||||||
|
:key="item.name"
|
||||||
|
:label="item.title"
|
||||||
|
:name="item.name"
|
||||||
|
>
|
||||||
|
<ScoreTable :title="item.title" />
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Delete, Edit } from "@element-plus/icons-vue";
|
||||||
|
import ScoreTable from "./components/ScoreTable.vue";
|
||||||
|
const activeTab = ref('1');
|
||||||
|
|
||||||
|
const tabList = ref([
|
||||||
|
{
|
||||||
|
title: "唤醒时间",
|
||||||
|
name: "1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "唤醒成功率",
|
||||||
|
name: "2",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
margin: 20px 0;
|
||||||
|
|
||||||
|
.indicator-container {
|
||||||
|
border: 1px solid #dbdbdb;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.title-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.title-left {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-left: 8px;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user