feat: 触控
This commit is contained in:
parent
7afbe084aa
commit
fca64b5d32
@ -201,12 +201,16 @@ const getIndicatorByParentIdData = async (parentId) => {
|
||||
};
|
||||
|
||||
const test = (title) => {
|
||||
if (title.includes("时间")) {
|
||||
if (title.includes("时间") || title.includes("时长")) {
|
||||
return "ms";
|
||||
} else if (title.includes("成功率") || title.includes("交互")) {
|
||||
} else if (title.includes("率")) {
|
||||
return "%";
|
||||
} else if (title.includes("频度")) {
|
||||
return "次/h";
|
||||
} else if (title.includes("距离")) {
|
||||
return "mm";
|
||||
} else if (title.includes("数量")) {
|
||||
return "个";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
|
||||
@ -68,8 +68,10 @@ const rules = reactive({
|
||||
})
|
||||
|
||||
const handleActiveMetricCategory = (data) => {
|
||||
activeIndicatorId.value = data;
|
||||
getIndicatorByParentIdData(data);
|
||||
if (data) {
|
||||
activeIndicatorId.value = data;
|
||||
getIndicatorByParentIdData(data);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<!-- MetricCategory.vue - 一级指标组件 -->
|
||||
<template>
|
||||
<div class="metric-category">
|
||||
<div class="metric-category" @click="activeCategory(category.id)" :class="{ activeCategory: activeId === category.id }">
|
||||
<el-card class="category-card">
|
||||
<div class="card-container">
|
||||
<div class="category-info">
|
||||
@ -19,12 +19,13 @@
|
||||
<MetricForm
|
||||
ref="metricFormRef"
|
||||
:metric="editingCategory"
|
||||
@submit="handleUpdateCategory"
|
||||
:isNew="false"
|
||||
@refresh="handleRefresh"
|
||||
/>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="showEditDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitMetricForm">确认</el-button>
|
||||
<el-button type="primary" @click="submitMetricForm">确认111</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@ -40,10 +41,15 @@ const props = defineProps({
|
||||
category: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
// 新增props：接收父组件的全局激活ID（支持字符串/数字/空值）
|
||||
activeId: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update-category', 'add-submetric', 'remove-category'])
|
||||
const emit = defineEmits(['update-category', 'remove-category', 'active'])
|
||||
|
||||
const showEditDialog = ref(false)
|
||||
const metricFormRef = ref(null)
|
||||
@ -65,17 +71,22 @@ const submitMetricForm = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdateCategory = (metricData) => {
|
||||
emit('update-category', {
|
||||
...props.category,
|
||||
...metricData
|
||||
})
|
||||
const handleRefresh = () => {
|
||||
emit('refresh')
|
||||
showEditDialog.value = false
|
||||
}
|
||||
|
||||
const activeCategory = (categoryId) => {
|
||||
// 可以在这里处理点击一级指标卡片时的逻辑
|
||||
console.log("点击了一级指标:", categoryId);
|
||||
emit('active', categoryId) // 通知父组件更新全局激活ID
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.metric-category {
|
||||
cursor: pointer;
|
||||
|
||||
.category-card {
|
||||
border-radius: 8px;
|
||||
|
||||
@ -96,6 +107,15 @@ const handleUpdateCategory = (metricData) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 26px 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.activeCategory {
|
||||
border: 2px solid #409EFF;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -8,22 +8,28 @@
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item label="指标名称" prop="name">
|
||||
<el-input v-model="metric.name" placeholder="请输入一级指标名称" />
|
||||
<el-input v-model="metric.name" placeholder="请输入指标名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { addIndicator, updateIndicator } from '@/api/evaluate/indicator'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const props = defineProps({
|
||||
metric: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
isNew: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['submit'])
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
const formRef = ref(null)
|
||||
|
||||
@ -35,10 +41,25 @@ const rules = reactive({
|
||||
|
||||
const submitForm = () => {
|
||||
if (!formRef.value) return
|
||||
|
||||
formRef.value.validate((valid) => {
|
||||
formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
emit('submit', { ...props.metric })
|
||||
if (props.isNew) {
|
||||
const res = await addIndicator({ name: props.metric.name, parentId: 0, level: 1, type: 1 })
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('指标添加成功')
|
||||
emit('refresh')
|
||||
} else {
|
||||
ElMessage.error(res.message || '指标添加失败')
|
||||
}
|
||||
} else {
|
||||
const res = await updateIndicator({ id: props.metric.id, name: props.metric.name })
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('指标修改成功')
|
||||
emit('refresh')
|
||||
} else {
|
||||
ElMessage.error(res.message || '指标修改失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -2,13 +2,11 @@
|
||||
<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">比较数值1</div>
|
||||
<div class="table-header-item">符号</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 class="table-header-item">操作</div>
|
||||
</div>
|
||||
|
||||
@ -16,41 +14,27 @@
|
||||
<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 :disabled="row.isDisabled" v-model="row.compareNum1" placeholder="请输入..." class="table-cell-input">
|
||||
<template #append>{{ test(props.title) }}</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 :disabled="row.isDisabled" v-model="row.symbol" class="table-cell-select">
|
||||
<el-option label="=" value="="></el-option>
|
||||
<el-option label="≤" value="≤"></el-option>
|
||||
<el-option label="<" value="<"></el-option>
|
||||
<el-option label="≥" value="≥"></el-option>
|
||||
<el-option label=">" value=">"></el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 数值2 -->
|
||||
<el-input v-model="row.value2" class="table-cell-input">
|
||||
<template #append>ms</template>
|
||||
<el-input :disabled="row.isDisabled" v-model="row.compareNum2" class="table-cell-input">
|
||||
<template #append>{{ test(props.title) }}</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>
|
||||
<el-input :disabled="row.isDisabled" v-model="row.score" class="table-cell-input" />
|
||||
<el-input :disabled="row.isDisabled" v-model="row.remark" class="table-cell-input" />
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="table-cell-action">
|
||||
@ -58,7 +42,18 @@
|
||||
icon="Edit"
|
||||
size="small"
|
||||
circle
|
||||
@click="handleEdit(index)"
|
||||
v-if="row.isDisabled"
|
||||
@click="handleEdit(row)"
|
||||
class="action-btn edit-btn"
|
||||
/>
|
||||
|
||||
<el-button
|
||||
icon="CircleCheck"
|
||||
size="small"
|
||||
title="保存"
|
||||
circle
|
||||
v-if="!row.isDisabled"
|
||||
@click="handleSave(row)"
|
||||
class="action-btn edit-btn"
|
||||
/>
|
||||
|
||||
@ -76,7 +71,7 @@
|
||||
icon="Delete"
|
||||
size="small"
|
||||
circle
|
||||
@click="handleDelete(index)"
|
||||
@click="handleDelete(row, index)"
|
||||
class="action-btn del-btn"
|
||||
/>
|
||||
</div>
|
||||
@ -88,80 +83,142 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { getIndicatorByParentId, deleteIndicator, addIndicator, updateIndicator } from "@/api/evaluate/indicator";
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: "唤醒时间"
|
||||
},
|
||||
indicatorId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化表格数据
|
||||
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 tableData = ref([]);
|
||||
|
||||
// 编辑行
|
||||
const handleEdit = (index) => {
|
||||
console.log("编辑行:", index, tableData.value[index]);
|
||||
const handleEdit = (row) => {
|
||||
row.isDisabled = false
|
||||
};
|
||||
|
||||
const handleSave = (row) => {
|
||||
if (row.id) {
|
||||
updateIndicator({
|
||||
id: row.id,
|
||||
compareNum1: row.compareNum1,
|
||||
name: props.title,
|
||||
symbol: row.symbol,
|
||||
compareNum2: row.compareNum2,
|
||||
score: row.score,
|
||||
remark: row.remark,
|
||||
parentId: props.indicatorId
|
||||
}).then(res => {
|
||||
if (res.code === 200) {
|
||||
ElMessage.success("保存成功");
|
||||
row.isDisabled = true
|
||||
} else {
|
||||
ElMessage.error(res.message || "保存失败");
|
||||
}
|
||||
})
|
||||
} else {
|
||||
addIndicator({
|
||||
compareNum1: row.compareNum1,
|
||||
symbol: row.symbol,
|
||||
name: props.title,
|
||||
level: 4,
|
||||
compareNum2: row.compareNum2,
|
||||
score: row.score,
|
||||
remark: row.remark,
|
||||
parentId: props.indicatorId,
|
||||
type: 1
|
||||
}).then(res => {
|
||||
if (res.code === 200) {
|
||||
ElMessage.success("保存成功");
|
||||
row.id = res.data.id; // 假设返回的新ID在res.data.id中
|
||||
row.isDisabled = true
|
||||
} else {
|
||||
ElMessage.error(res.message || "保存失败");
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
// 添加新行
|
||||
const handleAdd = () => {
|
||||
tableData.value.push({
|
||||
value1: "",
|
||||
symbol1: "",
|
||||
indicator: props.title,
|
||||
symbol2: "le",
|
||||
value2: "",
|
||||
id: null,
|
||||
compareNum1: "",
|
||||
symbol: "≤",
|
||||
compareNum2: "",
|
||||
score: "",
|
||||
weight: "50",
|
||||
remark: "",
|
||||
isDisabled: false
|
||||
});
|
||||
};
|
||||
|
||||
// 删除行
|
||||
const handleDelete = (index) => {
|
||||
const handleDelete = (row, index) => {
|
||||
if (tableData.value.length <= 1) {
|
||||
ElMessage.warning("至少保留一行数据");
|
||||
return;
|
||||
}
|
||||
tableData.value.splice(index, 1);
|
||||
if (row.id) {
|
||||
deleteIndicator(row.id).then(res => {
|
||||
if (res.code === 200) {
|
||||
ElMessage.success("删除成功");
|
||||
tableData.value.splice(index, 1);
|
||||
} else {
|
||||
ElMessage.error(res.message || "删除失败");
|
||||
}
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
tableData.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
const getIndicatorByParentIdData = async (parentId) => {
|
||||
try {
|
||||
const res = await getIndicatorByParentId(parentId, 1);
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data;
|
||||
|
||||
tableData.value.forEach(row => {
|
||||
row.isDisabled = true; // 默认不可编辑
|
||||
});
|
||||
|
||||
if (tableData.value.length === 0) {
|
||||
// 如果没有数据，初始化一行空数据
|
||||
handleAdd();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取指标数据失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const test = (title) => {
|
||||
if (title.includes("时间") || title.includes("时长")) {
|
||||
return "ms";
|
||||
} else if (title.includes("率")) {
|
||||
return "%";
|
||||
} else if (title.includes("频度")) {
|
||||
return "次/h";
|
||||
} else if (title.includes("距离")) {
|
||||
return "mm";
|
||||
} else if (title.includes("数量")) {
|
||||
return "个";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getIndicatorByParentIdData(props.indicatorId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -183,7 +240,7 @@ $font-medium: 500;
|
||||
// 表头样式
|
||||
.table-header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: $gap-base;
|
||||
padding: $gap-base $padding-base;
|
||||
background-color: $table-header-bg;
|
||||
@ -204,7 +261,7 @@ $font-medium: 500;
|
||||
.table-body {
|
||||
.table-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: $gap-base;
|
||||
padding: $gap-base * 1.5 $padding-base;
|
||||
border-bottom: 1px solid $table-border-color;
|
||||
@ -233,9 +290,6 @@ $font-medium: 500;
|
||||
// 下拉框样式
|
||||
.table-cell-select {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -259,6 +313,7 @@ $font-medium: 500;
|
||||
|
||||
.edit-btn {
|
||||
color: #409eff;
|
||||
|
||||
&:hover {
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
@ -266,6 +321,7 @@ $font-medium: 500;
|
||||
|
||||
.add-btn {
|
||||
color: #67c23a;
|
||||
|
||||
&:hover {
|
||||
background-color: #f0f9eb;
|
||||
}
|
||||
@ -273,6 +329,7 @@ $font-medium: 500;
|
||||
|
||||
.del-btn {
|
||||
color: #f56c6c;
|
||||
|
||||
&:hover {
|
||||
background-color: #fef0f0;
|
||||
}
|
||||
|
||||
@ -1,34 +1,130 @@
|
||||
<template>
|
||||
<div class="evaluation-metrics">
|
||||
<div class="left">
|
||||
<Indicator />
|
||||
<Indicator @activeMetricCategory="handleActiveMetricCategory" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title">
|
||||
<h2>指标配置</h2>
|
||||
<el-button type="primary">
|
||||
<el-button type="primary" @click="handleAddSecondaryIndicator">
|
||||
<el-icon><Plus /></el-icon>
|
||||
添加二级指标
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="secondaryIndicator-container">
|
||||
<SecondaryIndicator v-for="value in listData" :key="value.id" :title="value.title" :weight="value.weight" />
|
||||
<div class="secondaryIndicator-container" v-if="listData.length > 0">
|
||||
<SecondaryIndicator v-for="value in listData" :key="value.id" :indicatorId="value.id" :name="value.name" :weight="value.weight" @refresh="refreshSecondaryIndicator" />
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="showAddDialog" title="添加二级指标" width="500px">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="metric"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="指标名称" prop="name">
|
||||
<el-input v-model="metric.name" placeholder="请输入指标名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="指标权重" prop="weight">
|
||||
<el-input-number v-model="metric.weight" placeholder="请输入指标权重" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="resetForm">取消</el-button>
|
||||
<el-button type="primary" @click="submitMetricForm">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Indicator from './indicator.vue';
|
||||
import SecondaryIndicator from './secondaryIndicator.vue';
|
||||
import { getIndicatorByParentId, addIndicator } from "@/api/evaluate/indicator";
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const listData = ref([
|
||||
{ id: 1, title: '无噪声唤醒', weight: 30 },
|
||||
{ id: 2, title: '有噪声唤醒', weight: 40 },
|
||||
{ id: 3, title: '免唤醒', weight: 50 },
|
||||
{ id: 4, title: '误唤醒', weight: 30 }
|
||||
])
|
||||
const activeIndicatorId = ref(null);
|
||||
|
||||
const listData = ref([])
|
||||
|
||||
const metric = ref({
|
||||
name: '',
|
||||
weight: ''
|
||||
})
|
||||
|
||||
const formRef = ref(null);
|
||||
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{ required: true, message: '请输入指标名称', trigger: 'blur' }
|
||||
],
|
||||
weight: [
|
||||
{ required: true, message: '请输入指标权重', trigger: 'blur' }
|
||||
]
|
||||
})
|
||||
|
||||
const handleActiveMetricCategory = (data) => {
|
||||
if (data) {
|
||||
activeIndicatorId.value = data;
|
||||
getIndicatorByParentIdData(data);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const showAddDialog = ref(false);
|
||||
|
||||
const handleAddSecondaryIndicator = () => {
|
||||
showAddDialog.value = true;
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
showAddDialog.value = false;
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
}
|
||||
|
||||
const submitMetricForm = () => {
|
||||
if (formRef.value) {
|
||||
formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
const res = await addIndicator({
|
||||
name: metric.value.name,
|
||||
parentId: activeIndicatorId.value,
|
||||
level: 2,
|
||||
weight: metric.value.weight,
|
||||
type: 1
|
||||
});
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('指标添加成功')
|
||||
resetForm()
|
||||
getIndicatorByParentIdData(activeIndicatorId.value)
|
||||
} else {
|
||||
ElMessage.error(res.message || '指标添加失败')
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const getIndicatorByParentIdData = async (parentId) => {
|
||||
try {
|
||||
const res = await getIndicatorByParentId(parentId, 1);
|
||||
if (res.code === 200) {
|
||||
listData.value = res.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取指标数据失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const refreshSecondaryIndicator = () => {
|
||||
getIndicatorByParentIdData(activeIndicatorId.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -15,17 +15,18 @@
|
||||
v-for="category in metricCategories"
|
||||
:key="category.id"
|
||||
:category="category"
|
||||
@update-category="updateCategory"
|
||||
@add-submetric="addSubmetric"
|
||||
:active-id="activeCategoryId"
|
||||
@active="activeCategory"
|
||||
@refresh="handleRefresh"
|
||||
@remove-category="removeCategory"
|
||||
/>
|
||||
</div>
|
||||
<!-- 添加一级指标对话框 -->
|
||||
<el-dialog v-model="showAddDialog" title="添加一级指标" width="500px">
|
||||
<MetricForm ref="metricFormRef" :metric="newMetric" @submit="handleAddCategory" />
|
||||
<MetricForm ref="metricFormRef" :isNew="true" :metric="newMetric" @refresh="handleRefresh" />
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="showAddDialog = false">取消</el-button>
|
||||
<el-button @click="resetForm">取消</el-button>
|
||||
<el-button type="primary" @click="submitMetricForm">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
@ -36,47 +37,53 @@
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
import MetricCategory from "./components/MetricCategory.vue";
|
||||
import MetricForm from "./components/MetricForm.vue";
|
||||
import { getIndicatorByParentId, deleteIndicator } from "@/api/evaluate/indicator";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
|
||||
const emit = defineEmits(['activeMetricCategory'])
|
||||
|
||||
// 模拟数据
|
||||
const metricCategories = ref([]);
|
||||
|
||||
const activeCategoryId = ref('')
|
||||
|
||||
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);
|
||||
}
|
||||
ElMessageBox.confirm(
|
||||
"确定要删除该指标及其所有子指标吗？",
|
||||
"删除确认",
|
||||
{
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}
|
||||
).then(async () => {
|
||||
try {
|
||||
const res = await deleteIndicator(categoryId);
|
||||
if (res.code === 200) {
|
||||
ElMessage.success("指标删除成功");
|
||||
getIndicatorByParentIdData(0);
|
||||
} else {
|
||||
ElMessage.error(res.message || "指标删除失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("删除指标失败:", error);
|
||||
ElMessage.error("删除指标失败");
|
||||
}
|
||||
}).catch(() => {
|
||||
// 取消删除
|
||||
});
|
||||
};
|
||||
|
||||
const showAddDialog = ref(false);
|
||||
const metricFormRef = ref(null);
|
||||
const newMetric = reactive({
|
||||
name: "",
|
||||
weight: 0,
|
||||
subMetrics: [],
|
||||
name: ""
|
||||
});
|
||||
|
||||
const submitMetricForm = () => {
|
||||
@ -85,14 +92,39 @@ const submitMetricForm = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddCategory = (metricData) => {
|
||||
const newCategory = {
|
||||
id: Date.now(),
|
||||
...metricData,
|
||||
};
|
||||
metricCategories.value.push(newCategory);
|
||||
const resetForm = () => {
|
||||
showAddDialog.value = false;
|
||||
if (metricFormRef.value) {
|
||||
metricFormRef.value.resetFields();
|
||||
}
|
||||
}
|
||||
|
||||
const handleRefresh = () => {
|
||||
getIndicatorByParentIdData(0);
|
||||
showAddDialog.value = false;
|
||||
};
|
||||
|
||||
const getIndicatorByParentIdData = async (parentId) => {
|
||||
try {
|
||||
const res = await getIndicatorByParentId(parentId, 1);
|
||||
if (res.code === 200) {
|
||||
metricCategories.value = res.data;
|
||||
emit('activeMetricCategory', res.data[0]?.id || null)
|
||||
activeCategoryId.value = res.data[0]?.id || null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取指标数据失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const activeCategory = (data) => {
|
||||
activeCategoryId.value = data;
|
||||
emit('activeMetricCategory', data); // 通知父组件
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getIndicatorByParentIdData(0); // 获取一级指标数据
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
|
||||
@ -4,36 +4,77 @@
|
||||
<div class="title-container">
|
||||
<div class="title-left">
|
||||
<el-tag>二级指标</el-tag>
|
||||
<div class="title">指标名称:<span class="text">{{ props.title }}</span></div>
|
||||
<div class="title">指标名称:<span class="text">{{ props.name }}</span></div>
|
||||
</div>
|
||||
<div>指标权重:{{ props.weight }}%</div>
|
||||
<div>
|
||||
<el-button size="small" :icon="Edit" />
|
||||
<el-button size="small" type="danger" :icon="Delete" />
|
||||
<el-button size="small" :icon="Edit" @click="handleEdit" />
|
||||
<el-button size="small" type="danger" :icon="Delete" @click="handleDelete" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-tabs v-model="activeTab">
|
||||
<div style="text-align: right; margin: 10px 0px; ">
|
||||
<el-button size="small" type="primary" @click="handleAddTab">
|
||||
<el-icon><Plus /></el-icon>
|
||||
添加三级指标
|
||||
</el-button>
|
||||
</div>
|
||||
<el-tabs v-model="activeTab" closable @tab-remove="removeTab">
|
||||
<el-tab-pane
|
||||
v-for="item in tabList"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:name="item.id"
|
||||
>
|
||||
<ScoreTable :title="item.title" />
|
||||
<template #label>
|
||||
<span>
|
||||
<span>{{ item.name }}</span>
|
||||
<el-icon :size="12" style="margin-left: 5px; cursor: pointer;" @click="($event) => handleEditTab($event, item)"><Edit /></el-icon>
|
||||
</span>
|
||||
</template>
|
||||
<ScoreTable :title="item.name" :indicatorId="item.id" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="showUpdateDialog" :title="dialogTitle" width="500px">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="metric"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="指标名称" prop="name">
|
||||
<el-input v-model="metric.name" placeholder="请输入指标名称" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="level === 2" label="指标权重" prop="weight">
|
||||
<el-input-number v-model="metric.weight" placeholder="请输入指标权重" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="resetForm">取消</el-button>
|
||||
<el-button type="primary" @click="submitMetricForm">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Delete, Edit } from "@element-plus/icons-vue";
|
||||
import ScoreTable from "./components/ScoreTable.vue";
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import { deleteIndicator, updateIndicator, getIndicatorByParentId, addIndicator } from "@/api/evaluate/indicator";
|
||||
import { onMounted } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
indicatorId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: "无噪声唤醒",
|
||||
},
|
||||
@ -43,18 +84,181 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
const activeTab = ref('1');
|
||||
|
||||
const tabList = ref([
|
||||
{
|
||||
title: "唤醒时间",
|
||||
name: "1",
|
||||
},
|
||||
{
|
||||
title: "唤醒成功率",
|
||||
name: "2",
|
||||
},
|
||||
]);
|
||||
const tabList = ref([]);
|
||||
|
||||
const level = ref(2);
|
||||
const isNew = ref(false)
|
||||
|
||||
const formRef = ref(null);
|
||||
const showUpdateDialog = ref(false);
|
||||
|
||||
const metric = ref({
|
||||
name: props.name,
|
||||
weight: props.weight,
|
||||
id: props.indicatorId
|
||||
})
|
||||
|
||||
const handleEdit = () => {
|
||||
level.value = 2;
|
||||
isNew.value = false;
|
||||
showUpdateDialog.value = true;
|
||||
metric.value = {
|
||||
name: props.name,
|
||||
weight: props.weight,
|
||||
id: props.indicatorId
|
||||
}
|
||||
};
|
||||
|
||||
const dialogTitle = computed(() => {
|
||||
return `${isNew.value ? '添加' : '编辑'}${level.value === 2 ? '二级' : '三级'}指标`;
|
||||
});
|
||||
|
||||
const resetForm = () => {
|
||||
showUpdateDialog.value = false;
|
||||
};
|
||||
|
||||
const submitMetricForm = () => {
|
||||
formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
if (!isNew.value) { // 编辑
|
||||
const res = await updateIndicator({ id: metric.value.id, name: metric.value.name, weight: metric.value.weight })
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('指标修改成功')
|
||||
resetForm()
|
||||
if (level.value === 2) {
|
||||
emit('refresh')
|
||||
} else {
|
||||
getIndicatorByParentIdData(props.indicatorId);
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(res.message || '指标修改失败')
|
||||
}
|
||||
} else {
|
||||
addIndicator({
|
||||
name: metric.value.name,
|
||||
parentId: props.indicatorId,
|
||||
level: level.value,
|
||||
weight: metric.value.weight,
|
||||
type: 1
|
||||
}).then(res => {
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('指标添加成功')
|
||||
getIndicatorByParentIdData(props.indicatorId);
|
||||
resetForm()
|
||||
} else {
|
||||
ElMessage.error(res.message || '指标添加失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
console.log("表单验证失败");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
ElMessageBox.confirm(
|
||||
"确定要删除该指标及其所有子指标吗？",
|
||||
"删除确认",
|
||||
{
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}
|
||||
).then(async () => {
|
||||
try {
|
||||
const res = await deleteIndicator(props.indicatorId);
|
||||
if (res.code === 200) {
|
||||
ElMessage.success("指标删除成功");
|
||||
if (level.value === 2) {
|
||||
emit('refresh')
|
||||
} else {
|
||||
getIndicatorByParentIdData(props.indicatorId);
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(res.message || "指标删除失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("删除指标失败:", error);
|
||||
ElMessage.error("删除指标失败");
|
||||
}
|
||||
}).catch(() => {
|
||||
// 取消删除
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddTab = () => {
|
||||
level.value = 3;
|
||||
isNew.value = true;
|
||||
metric.value = {
|
||||
name: '',
|
||||
weight: 0,
|
||||
id: null
|
||||
}
|
||||
showUpdateDialog.value = true;
|
||||
};
|
||||
|
||||
const removeTab = (targetName) => {
|
||||
console.log("删除了标签:", targetName);
|
||||
ElMessageBox.confirm(
|
||||
"确定要删除该指标及其所有子指标吗？",
|
||||
"删除确认",
|
||||
{
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}
|
||||
).then(async () => {
|
||||
try {
|
||||
const res = await deleteIndicator(targetName);
|
||||
if (res.code === 200) {
|
||||
ElMessage.success("指标删除成功");
|
||||
getIndicatorByParentIdData(props.indicatorId);
|
||||
} else {
|
||||
ElMessage.error(res.message || "指标删除失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("删除指标失败:", error);
|
||||
ElMessage.error("删除指标失败");
|
||||
}
|
||||
}).catch(() => {
|
||||
// 取消删除
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditTab = (event, item) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
level.value = 3;
|
||||
isNew.value = false;
|
||||
metric.value = {
|
||||
name: item.name,
|
||||
weight: item.weight,
|
||||
id: item.id
|
||||
}
|
||||
showUpdateDialog.value = true;
|
||||
};
|
||||
|
||||
const getIndicatorByParentIdData = async (parentId) => {
|
||||
try {
|
||||
const res = await getIndicatorByParentId(parentId, 1);
|
||||
if (res.code === 200) {
|
||||
tabList.value = res.data;
|
||||
activeTab.value = tabList.value[0]?.id || '1';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取指标数据失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getIndicatorByParentIdData(props.indicatorId);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
|
||||
@ -294,7 +294,7 @@ export const collapseList = [
|
||||
name: "停止麦克风",
|
||||
type: "serviceNode",
|
||||
desc: "用于停止麦克风的节点",
|
||||
action: 'MICROPHONE_START',
|
||||
action: 'MICROPHONE_END',
|
||||
nodeType: 'EDGE',
|
||||
nodeParams: [
|
||||
{ name: "deviceId", type: "input", input: "", componentType: 'select', selectOptions: audioOptions(), disabled: true }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user