<template>
|
<div>
|
<el-form
|
:model="form"
|
:rules="rules"
|
ref="pedigreeForm"
|
label-position="top"
|
class="strain-form"
|
>
|
<div class="card">
|
<div class="form-items-row">
|
<el-form-item label="菌种源" required>
|
<div class="flex-row">
|
<div class="input-wrapper">
|
<el-form-item prop="strainSourceStart" style="margin-bottom: 0">
|
<el-input
|
v-model="form.strainSourceStart"
|
placeholder="请输入"
|
class="fixed-width-input"
|
></el-input>
|
</el-form-item>
|
</div>
|
<span class="form-text">代—</span>
|
<div class="input-wrapper">
|
<el-form-item prop="strainSourceEnd" style="margin-bottom: 0">
|
<el-input
|
v-model="form.strainSourceEnd"
|
placeholder="请输入"
|
class="fixed-width-input"
|
></el-input>
|
</el-form-item>
|
</div>
|
<span class="form-text">细胞库</span>
|
</div>
|
</el-form-item>
|
<el-form-item label="传代菌种编号" prop="strainCode" required>
|
<el-input
|
v-model="form.strainCode"
|
placeholder="请输入"
|
class="fixed-width-input"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="传代菌种名称" prop="strainName" required>
|
<el-input
|
v-model="form.strainName"
|
placeholder="请输入"
|
class="fixed-width-input"
|
></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
<div class="card" style="margin-top: 30px">
|
<Table :height="null" :total="0" :tableData="tableData">
|
<el-table-column label="接种操作人" prop="strainSource" />
|
<el-table-column label="接种操作时间" prop="strainCode" />
|
<el-table-column label="传代菌种编号" prop="strainName" />
|
<el-table-column label="传代菌种名称" prop="strainName" />
|
<el-table-column label="接种菌种编号" prop="strainName" />
|
<el-table-column label="接种菌种名称" prop="strainName" />
|
<el-table-column label="入库总数" prop="strainName" />
|
<el-table-column label="保存/废弃" prop="strainName" />
|
<el-table-column label="入库时间" prop="strainName" />
|
<el-table-column label="操作">
|
<template #default="{ row }">
|
<el-button type="text">确认入库</el-button>
|
</template>
|
</el-table-column>
|
</Table>
|
</div>
|
<div class="chart">
|
<div class="header">
|
<div class="title">菌种传代生产谱系图</div>
|
<div class="option-btn">
|
<el-button type="primary" class="el-icon-plus" @click="addNode">
|
新增</el-button
|
>
|
<el-button type="primary" @click="setGenerationPlan"
|
>设置传代计划数</el-button
|
>
|
<el-button type="primary" @click="showDetail">详情</el-button>
|
</div>
|
</div>
|
|
<div class="strain-flow-chart">
|
<div id="mountNode"></div>
|
</div>
|
<el-button type="primary" @click="handleSubmit" style="width: 150px"
|
>保存</el-button
|
>
|
</div>
|
<div class="end-btn">
|
<!-- <el-button @click="handleDraft">存草稿</el-button>
|
<el-button @click="handleCancel">取消</el-button> -->
|
</div>
|
</el-form>
|
|
<ParentForm ref="parentForm" @addNodeSign="addNodeSign" />
|
<PlanForm ref="planForm" @addNodeSign="addNodeSign" />
|
<AddSublevelForm ref="addSublevelForm" @addNodeSign="addNodeSign" />
|
<AddSublevelPlan ref="addSublevelPlan" @addNodeSign="addNodeSign" />
|
<ConfirmStorageDialog
|
name="接种操作人签字"
|
:visible.sync="confirmStorageDialogVisible"
|
@confirm="handleSignatureConfirm"
|
/>
|
<!-- 菌种工程师 -->
|
<ConfirmStorageDialog
|
name="菌种保藏人签字"
|
text="是否确认该项菌种信息入库"
|
:visible.sync="storageVisible"
|
@confirm="handleSignatureConfirm"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import G6 from "@antv/g6";
|
import ParentForm from "./components/ParentForm.vue";
|
import PlanForm from "./components/PlanForm.vue";
|
import AddSublevelForm from "./components/AddSublevelForm.vue";
|
import AddSublevelPlan from "./components/AddSublevelPlan.vue";
|
import ConfirmStorageDialog from "@/components/confirm-storage-dialog";
|
import { add } from "./service";
|
export default {
|
name: "AddPedigree",
|
components: {
|
ParentForm,
|
PlanForm,
|
AddSublevelForm,
|
AddSublevelPlan,
|
ConfirmStorageDialog,
|
},
|
data() {
|
return {
|
signatureVisible: false,
|
form: {
|
strainSourceStart: "",
|
strainSourceEnd: "",
|
cellBank: "",
|
strainCode: "",
|
strainName: "",
|
remarks: "",
|
},
|
rules: {
|
strainSourceStart: [
|
{ required: true, message: "请输入菌种源", trigger: "blur" },
|
],
|
strainSourceEnd: [
|
{ required: true, message: "请输入菌种源", trigger: "blur" },
|
],
|
strainCode: [
|
{ required: true, message: "请输入传代菌种编号", trigger: "blur" },
|
],
|
strainName: [
|
{ required: true, message: "请输入传代菌种名称", trigger: "blur" },
|
],
|
},
|
graph: null,
|
nodeCount: 0,
|
selectedNode: null,
|
graphData: {
|
nodes: [],
|
edges: [],
|
},
|
// 弹窗相关数据
|
dialogVisible: false,
|
dialogTitle: "",
|
formLabel: "",
|
inputType: "text",
|
showDiscarded: false,
|
isAddingNode: false,
|
nodeData: {},
|
nodeType: "", //1母代 2计划数 3子孙代
|
tableData: [],
|
confirmStorageDialogVisible: false,
|
storageVisible: false,
|
treeData: [],
|
};
|
},
|
computed: {
|
canAddNode() {
|
// 如果没有节点，可以新增母代
|
if (this.graphData.nodes.length === 0) {
|
return true;
|
}
|
// 如果选中了传代计划数节点，可以新增下一代
|
if (this.selectedNode && this.selectedNode.label === "传代计划数") {
|
return true;
|
}
|
return false;
|
},
|
},
|
mounted() {
|
this.initGraph();
|
this.initEvents();
|
},
|
beforeDestroy() {
|
this.graph?.destroy();
|
window.removeEventListener("resize", this.handleResize);
|
},
|
methods: {
|
addNodeSign(value, type) {
|
this.nodeData = value;
|
this.nodeType = type;
|
this.confirmStorageDialogVisible = true;
|
},
|
handleSubmit() {
|
this.$refs.pedigreeForm.validate((valid) => {
|
if (valid) {
|
if (this.treeData.length === 0) {
|
this.$message.warning("请新增节点");
|
return;
|
}
|
|
// 处理节点数据，将data字段中的数据提升到根级别
|
const processNodeData = (node, level = 0) => {
|
const processedNode = {
|
...node,
|
...node.data,
|
children: [],
|
level,
|
type: [1, 3, 5].includes(level + 1) ? 1 : 2,
|
};
|
delete processedNode.data;
|
return processedNode;
|
};
|
|
// 构建 children 树结构
|
const buildTree = (nodes, edges) => {
|
// 创建节点映射，提升性能
|
const nodeMap = new Map(
|
nodes.map((node) => [node.nodeId, processNodeData(node)])
|
);
|
|
// 创建子节点ID集合，用于快速查找根节点
|
const childNodeIds = new Set(edges.map((edge) => edge.target));
|
|
// 构建父子关系
|
edges.forEach((edge) => {
|
const parent = nodeMap.get(edge.source);
|
const child = nodeMap.get(edge.target);
|
if (parent && child) {
|
child.level = parent.level + 1;
|
child.type = [1, 3, 5].includes(child.level + 1) ? 1 : 2;
|
parent.children.push(child);
|
}
|
});
|
|
// 返回根节点数组
|
return nodes
|
.filter((node) => !childNodeIds.has(node.nodeId))
|
.map((node) => nodeMap.get(node.nodeId));
|
};
|
|
// 获取基础表单数据
|
const baseData = {
|
parent: {
|
generationType: 1,
|
strainSourceStart: this.form.strainSourceStart,
|
strainSourceEnd: this.form.strainSourceEnd,
|
strainCode: this.form.strainCode,
|
strainName: this.form.strainName,
|
},
|
one: buildTree(this.graphData.nodes, this.graphData.edges),
|
};
|
|
console.log("提交的数据:", baseData, this.graphData);
|
add(baseData).then((res) => {
|
if (res.code == 200) {
|
this.$message.success("保存成功");
|
this.$router.back();
|
}
|
});
|
}
|
});
|
},
|
handleDraft() {
|
// 实现存草稿逻辑
|
console.log("save draft", this.form);
|
},
|
handleCancel() {
|
this.$router.back();
|
},
|
handleSignatureConfirm(signatureImage) {
|
this.confirmStorageDialogVisible = false;
|
console.log(this.nodeType);
|
|
if (this.nodeType === 1) {
|
this.handleAddParent({
|
...this.nodeData,
|
preserveSignature: signatureImage.signature,
|
});
|
} else if (this.nodeType === 2) {
|
this.handleAddPlan({
|
...this.nodeData,
|
preserveSignature: signatureImage.signature,
|
});
|
} else if (this.nodeType === 3) {
|
this.handleAddSublevel({
|
...this.nodeData,
|
preserveSignature: signatureImage.signature,
|
});
|
this.$refs.addSublevelPlan.closeDialog();
|
}
|
// 处理提交逻辑
|
},
|
initGraph() {
|
const container = document.getElementById("mountNode");
|
const width = container.scrollWidth;
|
const height = container.scrollHeight || 600;
|
|
// 自定义节点
|
G6.registerNode("custom-node", {
|
draw(cfg, group) {
|
const width = 120;
|
const titleHeight = 30;
|
const contentHeight = 40;
|
const gap = 4;
|
const totalHeight = titleHeight + gap + contentHeight;
|
|
// 根据节点状态设置颜色
|
const isDiscarded = cfg.status === 2;
|
const titleFill = isDiscarded
|
? "rgba(245, 248, 250, 1)"
|
: cfg.selected
|
? "l(0) 0:#0ACBCA 1:#049C9A"
|
: "l(0) 0:#0ACBCA 1:#049C9A";
|
const contentFill = isDiscarded
|
? "rgba(245, 248, 250, 1)"
|
: cfg.selected
|
? "rgba(4,156,154,0.2)"
|
: "rgba(4,156,154,0.1)";
|
const textFill = isDiscarded ? "rgba(144, 147, 153, 1)" : "#049C9A";
|
const stroke = isDiscarded
|
? "#DCDFE6"
|
: cfg.selected
|
? "#049C9A"
|
: "transparent";
|
|
// 创建渐变
|
const gradient = group.addShape("rect", {
|
attrs: {
|
x: -width / 2,
|
y: -totalHeight / 2,
|
width: width,
|
height: titleHeight,
|
radius: 20,
|
fill: titleFill,
|
cursor: "move",
|
stroke: stroke,
|
lineWidth: isDiscarded ? 1 : cfg.selected ? 2 : 0,
|
},
|
name: "title-box",
|
});
|
|
// 下部分 - 内容背景
|
const contentBox = group.addShape("rect", {
|
attrs: {
|
x: -width / 2,
|
y: -totalHeight / 2 + titleHeight + gap,
|
width: width,
|
height: contentHeight,
|
fill: contentFill,
|
radius: 15,
|
cursor: "move",
|
stroke: stroke,
|
lineWidth: isDiscarded ? 1 : cfg.selected ? 2 : 0,
|
},
|
name: "content-box",
|
});
|
|
// 标题文本
|
if (cfg.label) {
|
group.addShape("text", {
|
attrs: {
|
text: cfg.label,
|
x: 0,
|
y: -totalHeight / 2 + titleHeight / 2,
|
fill: isDiscarded ? "rgba(144, 147, 153, 1)" : "#fff",
|
fontSize: 12,
|
textAlign: "center",
|
textBaseline: "middle",
|
fontWeight: "bold",
|
cursor: "move",
|
},
|
name: "title-text",
|
});
|
}
|
|
// 内容文本
|
let content = "";
|
if (cfg.label === "传代计划数") {
|
content = `${cfg.planCount || 0}`;
|
} else if (cfg.number) {
|
content =
|
cfg.label === "母代"
|
? `代传菌种编号：${cfg.number}`
|
: `接种菌种编号：${cfg.number}`;
|
}
|
|
if (content) {
|
group.addShape("text", {
|
attrs: {
|
text: content,
|
x: 0,
|
y: -totalHeight / 2 + titleHeight + gap + contentHeight / 2,
|
fill: textFill,
|
fontSize: 10,
|
textAlign: "center",
|
textBaseline: "middle",
|
cursor: "move",
|
},
|
name: "content-text",
|
});
|
}
|
|
return gradient;
|
},
|
getAnchorPoints() {
|
return [
|
[0.5, 0], // 上
|
[1, 0.5], // 右
|
[0.5, 1], // 下
|
[0, 0.5], // 左
|
];
|
},
|
setState(name, value, item) {
|
// 移除悬浮效果，保持节点样式始终一致
|
},
|
});
|
|
this.graph = new G6.Graph({
|
container: "mountNode",
|
width,
|
height,
|
fitView: true,
|
fitViewPadding: 30,
|
animate: false,
|
enabledStack: false,
|
renderer: "canvas",
|
minZoom: 0.3,
|
maxZoom: 2,
|
defaultZoom: 1,
|
layout: {
|
type: "dagre",
|
rankdir: "LR",
|
align: "UL",
|
nodesep: 30, // 减小节点间距
|
ranksep: 50, // 减小层级间距
|
controlPoints: true,
|
},
|
modes: {
|
default: [
|
{
|
type: "drag-canvas",
|
enableOptimize: true,
|
direction: "both",
|
scalableRange: 0.1,
|
dragTimesOfScale: 0.1,
|
onlyChangeComputeZoom: true,
|
},
|
{
|
type: "zoom-canvas",
|
sensitivity: 1.5,
|
enableOptimize: true,
|
},
|
{
|
type: "drag-node",
|
enableDelegate: true,
|
delegateStyle: {
|
fill: "#f3f3f3",
|
stroke: "#ccc",
|
opacity: 0.5,
|
},
|
updateEdge: false,
|
enableOptimize: true,
|
optimizeZoom: 0.7,
|
damping: 0.1,
|
},
|
],
|
},
|
defaultNode: {
|
type: "custom-node",
|
style: {
|
fill: "l(0) 0:#0ACBCA 1:#049C9A",
|
},
|
},
|
defaultEdge: {
|
type: "cubic-horizontal",
|
style: {
|
stroke: "rgba(4, 156, 154, 1)",
|
lineWidth: 1,
|
opacity: 0.5,
|
endArrow: {
|
path: G6.Arrow.triangle(6, 6),
|
fill: "rgba(4, 156, 154, 1)",
|
stroke: "rgba(4, 156, 154, 1)",
|
},
|
},
|
},
|
optimizeEdge: true,
|
optimizeLayoutAnimation: true,
|
});
|
|
const canvas = this.graph.get("canvas");
|
canvas.set("localRefresh", false);
|
canvas.set("autoDraw", true);
|
canvas.set("animating", false);
|
|
let throttleTimer = null;
|
const throttleInterval = 16;
|
|
this.graph.on("node:dragstart", () => {
|
canvas.set("localRefresh", false);
|
this.graph.get("canvas").draw();
|
});
|
|
this.graph.on("node:drag", (e) => {
|
if (throttleTimer) return;
|
throttleTimer = setTimeout(() => {
|
const model = e.item.get("model");
|
const edges = this.graph.getEdges().filter((edge) => {
|
const source = edge.getSource();
|
const target = edge.getTarget();
|
return (
|
source.get("model").nodeId === model.nodeId ||
|
target.get("model").nodeId === model.nodeId
|
);
|
});
|
edges.forEach((edge) => {
|
this.graph.refreshItem(edge);
|
});
|
throttleTimer = null;
|
}, throttleInterval);
|
});
|
|
this.graph.on("node:dragend", (e) => {
|
if (throttleTimer) {
|
clearTimeout(throttleTimer);
|
throttleTimer = null;
|
}
|
const model = e.item.get("model");
|
const edges = this.graph.getEdges().filter((edge) => {
|
const source = edge.getSource();
|
const target = edge.getTarget();
|
return (
|
source.get("model").nodeId === model.nodeId ||
|
target.get("model").nodeId === model.nodeId
|
);
|
});
|
edges.forEach((edge) => {
|
this.graph.refreshItem(edge);
|
});
|
canvas.set("localRefresh", true);
|
this.graph.get("canvas").draw();
|
});
|
|
// 在设置数据之前，确保每个节点都有 id 字段
|
const processedData = {
|
nodes: this.graphData.nodes.map((node) => ({
|
...node,
|
id: node.nodeId, // 添加 id 字段，值与 nodeId 相同
|
})),
|
edges: this.graphData.edges.map((edge) => ({
|
...edge,
|
id: `${edge.source}-${edge.target}`, // 为边添加唯一 id
|
})),
|
};
|
|
this.graph.data(processedData);
|
this.graph.render();
|
|
let debounceTimer = null;
|
this.graph.on("afterchange", () => {
|
if (debounceTimer) clearTimeout(debounceTimer);
|
debounceTimer = setTimeout(() => {
|
if (!canvas.get("destroyed")) {
|
canvas.draw();
|
}
|
}, 16);
|
});
|
},
|
// 添加更新图表数据的方法
|
updateGraphData() {
|
if (!this.graph) return;
|
|
// 将扁平结构转换为树形结构
|
const buildTree = (nodes, edges) => {
|
const nodeMap = new Map();
|
const rootNodes = [];
|
|
// 首先创建所有节点的映射
|
nodes.forEach((node) => {
|
nodeMap.set(node.nodeId, {
|
...node,
|
id: node.nodeId,
|
level: 0, // 添加层级标记
|
});
|
});
|
|
// 处理边，构建父子关系
|
edges.forEach((edge) => {
|
const parent = nodeMap.get(edge.source);
|
const child = nodeMap.get(edge.target);
|
if (parent && child) {
|
// 设置子节点的层级
|
child.level = parent.level + 1;
|
}
|
});
|
|
// 找出根节点（没有父节点的节点）
|
nodes.forEach((node) => {
|
const hasParent = edges.some((edge) => edge.target === node.nodeId);
|
if (!hasParent) {
|
rootNodes.push(nodeMap.get(node.nodeId));
|
}
|
});
|
|
// 将所有节点按层级排序并设置type字段
|
const allNodes = Array.from(nodeMap.values());
|
allNodes.sort((a, b) => a.level - b.level);
|
|
// 设置type字段：第1,3,5层为1，其他层级为2
|
allNodes.forEach((node) => {
|
node.type = [1, 3, 5].includes(node.level + 1) ? 1 : 2;
|
});
|
|
return allNodes; // 返回所有节点，包含type字段
|
};
|
|
const treeData = buildTree(this.graphData.nodes, this.graphData.edges);
|
|
// 更新图表数据
|
this.graph.changeData({
|
nodes: this.graphData.nodes.map((node) => ({
|
...node,
|
id: node.nodeId,
|
})),
|
edges: this.graphData.edges.map((edge) => ({
|
...edge,
|
id: `${edge.source}-${edge.target}`,
|
})),
|
});
|
|
// 保存树形结构数据
|
this.treeData = treeData;
|
},
|
initEvents() {
|
// 监听窗口大小变化
|
window.addEventListener("resize", this.handleResize); // 添加触摸事件处理
|
const handleNodeClick = (evt) => {
|
evt.preventDefault(); // 阻止默认触摸行为
|
const node = evt.item;
|
const nodeModel = node.get("model");
|
// 如果节点已废弃，不允许任何操作
|
if (nodeModel.status === 2) {
|
this.$message.warning("该节点已废弃，不能进行操作");
|
return;
|
}
|
// 更新选中节点
|
this.selectedNode = nodeModel;
|
// 更新节点选中状态
|
this.graphData.nodes.forEach((n) => {
|
n.selected = n.nodeId === nodeModel.nodeId;
|
});
|
this.updateGraphData();
|
};
|
this.graph.on("node:click", handleNodeClick);
|
this.graph.on("node:touchstart", handleNodeClick);
|
|
// 画布点击事件，取消选中节点（添加触摸支持）
|
const handleCanvasClick = (evt) => {
|
evt.preventDefault();
|
this.selectedNode = null;
|
this.graphData.nodes.forEach((n) => {
|
n.selected = false;
|
});
|
this.updateGraphData();
|
};
|
|
this.graph.on("canvas:click", handleCanvasClick);
|
this.graph.on("canvas:touchstart", handleCanvasClick);
|
},
|
handleResize() {
|
if (this.graph) {
|
const container = document.getElementById("mountNode");
|
const width = container.scrollWidth;
|
const height = container.scrollHeight || 600;
|
this.graph.changeSize(width, height);
|
}
|
},
|
addNode() {
|
// 如果没有节点，新增母代
|
if (this.graphData.nodes.length === 0) {
|
this.$refs.pedigreeForm.validate((valid) => {
|
if (valid) {
|
this.$refs.parentForm.openInitData({
|
strainName: this.form.strainName,
|
strainCode: this.form.strainCode,
|
strainSourceStart: this.form.strainSourceStart,
|
strainSourceEnd: this.form.strainSourceEnd,
|
});
|
}
|
});
|
return;
|
}
|
|
// 如果选中了传代计划数节点，新增下一代
|
if (this.selectedNode && this.selectedNode.label === "传代计划数") {
|
const nodeModel = this.selectedNode;
|
|
// 检查是否已达到计划数
|
if (nodeModel.currentCount >= nodeModel.planCount) {
|
this.$message.warning("已达到计划数，不能再添加");
|
return;
|
}
|
|
// 获取父节点
|
const parentEdge = this.graphData.edges.find(
|
(e) => e.target === nodeModel.nodeId
|
);
|
const parentNode = this.graphData.nodes.find(
|
(n) => n.nodeId === parentEdge.source
|
);
|
|
// 如果父节点是孙代，不允许添加
|
if (parentNode.label === "孙代") {
|
this.$message.warning("孙代节点不能再生成下一代");
|
return;
|
}
|
|
const isParent = parentNode.label === "母代";
|
const nextLevel = isParent ? "子代" : "孙代";
|
|
this.showDiscarded = true;
|
this.isAddingNode = true;
|
this.$refs.addSublevelForm.openInitData({
|
title: `新增${nextLevel}`,
|
form: {
|
strainName: this.form.strainName,
|
strainCode: this.form.strainCode,
|
isDiscarded: true,
|
},
|
});
|
} else {
|
this.$message.warning("请选择传代计划数节点");
|
}
|
},
|
handleAddParent(value) {
|
const parentId = `parent-${++this.nodeCount}`;
|
this.graphData.nodes.push({
|
nodeId: parentId,
|
label: "母代",
|
number: value.strainCode.trim(),
|
data: value,
|
status: 1,
|
x: 200,
|
y: 200,
|
style: {
|
fill: "#00B5AA",
|
},
|
});
|
this.updateGraphData();
|
this.$message.success("母代节点添加成功");
|
this.$refs.parentForm.closeDialog();
|
},
|
handleDialogClose() {
|
this.$refs.form.resetFields();
|
},
|
handleAddSublevel(value) {
|
if (this.isAddingNode) {
|
// 新增节点的处理逻辑
|
const nodeModel = this.selectedNode;
|
const parentEdge = this.graphData.edges.find(
|
(e) => e.target === nodeModel.nodeId
|
);
|
const parentNode = this.graphData.nodes.find(
|
(n) => n.nodeId === parentEdge.source
|
);
|
const isParent = parentNode.label === "母代";
|
const nextLevel = isParent ? "子代" : "孙代";
|
|
const childId = `child-${++this.nodeCount}`;
|
this.graphData.nodes.push({
|
nodeId: childId,
|
label: nextLevel,
|
number: value.inoculateNo.trim(),
|
status: value.status,
|
data: value,
|
style: {
|
fill: value.status === 1 ? "#00B5AA" : "#999",
|
opacity: value.status === 1 ? (isParent ? 0.6 : 0.4) : 0.3,
|
},
|
});
|
|
this.graphData.edges.push({
|
source: nodeModel.nodeId,
|
target: childId,
|
style: {
|
stroke: "rgba(4, 156, 154, 1)",
|
lineWidth: 1,
|
},
|
});
|
|
const nodeIndex = this.graphData.nodes.findIndex(
|
(n) => n.nodeId === nodeModel.nodeId
|
);
|
this.graphData.nodes[nodeIndex].currentCount++;
|
|
this.updateGraphData();
|
this.$message.success(`${nextLevel}添加成功`);
|
this.$refs.addSublevelForm.closeDialog();
|
|
this.isAddingNode = false;
|
} else {
|
// 编辑节点的处理逻辑
|
const nodeModel = this.selectedNode;
|
const nodeIndex = this.graphData.nodes.findIndex(
|
(n) => n.nodeId === nodeModel.nodeId
|
);
|
|
if (nodeIndex > -1) {
|
if (nodeModel.label === "传代计划数") {
|
this.graphData.nodes[nodeIndex].planCount = parseInt(value.value);
|
} else {
|
this.graphData.nodes[nodeIndex].number = value.value.trim();
|
if (this.showDiscarded) {
|
this.graphData.nodes[nodeIndex].status = value.status;
|
// 如果设置为废弃状态，同时废弃所有子节点
|
if (value.status === 2) {
|
const discardChildren = (parentId) => {
|
const childEdges = this.graphData.edges.filter(
|
(e) => e.source === parentId
|
);
|
childEdges.forEach((edge) => {
|
const childNode = this.graphData.nodes.find(
|
(n) => n.nodeId === edge.target
|
);
|
if (childNode) {
|
const childIndex = this.graphData.nodes.findIndex(
|
(n) => n.nodeId === childNode.nodeId
|
);
|
if (childIndex > -1) {
|
this.graphData.nodes[childIndex].status = 2;
|
this.graphData.nodes[childIndex].style.fill = "#999";
|
this.graphData.nodes[childIndex].style.opacity = 0.3;
|
// 递归处理子节点的子节点
|
discardChildren(childNode.nodeId);
|
}
|
}
|
});
|
};
|
discardChildren(nodeModel.nodeId);
|
}
|
}
|
}
|
this.updateGraphData();
|
this.$message.success("修改成功");
|
this.dialogVisible = false;
|
}
|
}
|
},
|
setGenerationPlan() {
|
if (!this.selectedNode) {
|
this.$message.warning("请先选择节点");
|
return;
|
}
|
|
const nodeModel = this.selectedNode;
|
|
if (nodeModel.label === "孙代") {
|
this.$message.warning("孙代节点不能再生成传代计划数");
|
return;
|
}
|
|
if (nodeModel.label === "传代计划数") {
|
this.$message.warning("传代计划数节点不能再设置计划数");
|
return;
|
}
|
|
const hasGenerationNode = this.graphData.edges.some(
|
(e) =>
|
e.source === nodeModel.nodeId &&
|
this.graphData.nodes.some(
|
(n) => n.nodeId === e.target && n.label === "传代计划数"
|
)
|
);
|
|
if (hasGenerationNode) {
|
this.$message.warning("该节点已经存在传代计划数节点");
|
return;
|
}
|
if (nodeModel.label === "子代") {
|
this.$refs.addSublevelPlan.openInitData({
|
...nodeModel.data,
|
label: nodeModel.label,
|
strainName: this.form.strainName,
|
strainCode: this.form.strainCode,
|
strainSourceStart: this.form.strainSourceStart,
|
strainSourceEnd: this.form.strainSourceEnd,
|
});
|
} else {
|
this.$refs.planForm.openInitData({
|
...nodeModel.data,
|
label: nodeModel.label,
|
strainName: this.form.strainName,
|
strainCode: this.form.strainCode,
|
strainSourceStart: this.form.strainSourceStart,
|
strainSourceEnd: this.form.strainSourceEnd,
|
});
|
}
|
},
|
handleAddPlan(value) {
|
const nodeModel = this.selectedNode;
|
const generationId = `generation-${++this.nodeCount}`;
|
|
this.graphData.nodes.push({
|
nodeId: generationId,
|
label: "传代计划数",
|
planCount: value.generationCount,
|
data: value,
|
status: 1,
|
currentCount: 0,
|
style: {
|
fill: "#00B5AA",
|
},
|
});
|
|
this.graphData.edges.push({
|
source: nodeModel.nodeId,
|
target: generationId,
|
style: {
|
stroke: "rgba(4, 156, 154, 1)",
|
lineWidth: 1,
|
},
|
});
|
|
this.updateGraphData();
|
this.$message.success("传代计划数设置成功");
|
this.$refs.planForm.closeDialog();
|
this.$refs.addSublevelPlan.closeDialog();
|
},
|
showDetail() {
|
if (!this.selectedNode) {
|
this.$message.warning("请先选择节点");
|
return;
|
}
|
|
const nodeModel = this.selectedNode;
|
|
if (nodeModel.label === "母代") {
|
this.$refs.parentForm.openInitData({
|
...nodeModel.data,
|
status: "detail",
|
});
|
} else if (nodeModel.label === "子代" || nodeModel.label === "孙代") {
|
this.dialogTitle = `${nodeModel.label}详情`;
|
this.$refs.addSublevelForm.openInitData({
|
title: `${nodeModel.label}详情`,
|
form: { ...nodeModel.data },
|
});
|
} else if (nodeModel.label === "传代计划数") {
|
const nodeIndex = this.graphData.nodes.findIndex(
|
(n) => n.nodeId === nodeModel.nodeId
|
);
|
if (this.graphData.nodes[nodeIndex - 1].label === "子代") {
|
this.$refs.addSublevelPlan.openInitData({
|
...nodeModel.data,
|
status: "detail",
|
});
|
} else {
|
this.$refs.planForm.openInitData({
|
...nodeModel.data,
|
status: "detail",
|
});
|
}
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.card {
|
min-height: 145px;
|
background: rgba(255, 255, 255, 0.8);
|
box-shadow: 0px 10px 19px 0px rgba(0, 0, 0, 0.06);
|
border-radius: 16px;
|
border: 4px solid #ffffff;
|
padding: 0 20px;
|
display: flex;
|
align-items: center;
|
}
|
|
.chart {
|
padding: 20px 38px;
|
background: rgba(255, 255, 255, 0.8);
|
box-shadow: 0px 10px 19px 0px rgba(0, 0, 0, 0.06);
|
border-radius: 16px;
|
border: 4px solid #ffffff;
|
margin-top: 30px;
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.title {
|
font-size: 18px;
|
}
|
|
.option-btn {
|
display: flex;
|
gap: 10px;
|
|
.el-button {
|
margin-left: 0;
|
}
|
}
|
}
|
}
|
|
.form-items-row {
|
display: flex;
|
flex-wrap: wrap;
|
width: 100%;
|
align-items: center;
|
|
@media (min-width: 1200px) {
|
flex-direction: row;
|
justify-content: space-between;
|
}
|
|
@media (max-width: 1199px) {
|
flex-direction: column;
|
align-items: flex-start;
|
}
|
}
|
|
.flex-row {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
|
@media (max-width: 768px) {
|
flex-direction: column;
|
align-items: flex-start;
|
width: 100%;
|
}
|
}
|
|
.strain-form {
|
width: 100%;
|
|
:deep(.el-form-item) {
|
margin-bottom: 15px;
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
|
@media (min-width: 1200px) {
|
margin-right: 10px;
|
}
|
|
@media (max-width: 1199px) {
|
width: 100%;
|
margin-right: 0;
|
}
|
|
.el-form-item__label {
|
padding: 0 0 8px;
|
line-height: 1.2;
|
text-align: left;
|
}
|
|
.el-form-item__content {
|
width: 100%;
|
}
|
}
|
}
|
|
.input-wrapper {
|
@media (min-width: 769px) {
|
width: 290px;
|
min-width: 290px;
|
}
|
|
@media (max-width: 768px) {
|
width: 100%;
|
}
|
}
|
|
.fixed-width-input {
|
width: 100%;
|
|
@media (min-width: 769px) {
|
width: 290px !important;
|
min-width: 290px !important;
|
}
|
}
|
|
.form-text {
|
margin: 0 8px;
|
white-space: nowrap;
|
|
@media (max-width: 768px) {
|
margin: 8px 0;
|
}
|
}
|
|
.end-btn {
|
margin-top: 20px;
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
}
|
|
.strain-flow-chart {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.toolbar {
|
margin-bottom: 16px;
|
display: flex;
|
gap: 12px;
|
|
.el-button {
|
margin-right: 0;
|
}
|
}
|
|
#mountNode {
|
flex: 1;
|
width: 100%;
|
min-height: 500px;
|
border-radius: 4px;
|
}
|
}
|
</style>
|
