首页流程图
This commit is contained in:
parent
874f797815
commit
3643e02c6f
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 51 KiB |
|
|
@ -3,8 +3,8 @@
|
|||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
inline
|
||||
label-width="auto"
|
||||
:inline="false"
|
||||
label-width="100px"
|
||||
size="small"
|
||||
>
|
||||
<!-- 表单搜索 -->
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="7">
|
||||
<el-form-item label="申请时间" prop="createTime">
|
||||
<el-date-picker
|
||||
type="daterange"
|
||||
|
|
@ -35,23 +35,11 @@
|
|||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4" style="float:right;">
|
||||
<el-form-item>
|
||||
<el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button class="primary-lease" type="primary" @click="resetForm">
|
||||
重置
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
class="primary-lease"
|
||||
type="primary"
|
||||
@click="showDetails('1')"
|
||||
>
|
||||
展开明细
|
||||
</el-button>
|
||||
|
||||
<el-col :span="12" style="text-align:right;">
|
||||
<el-form-item style="white-space: nowrap;">
|
||||
<el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">查询</el-button>
|
||||
<el-button class="primary-lease" type="primary" @click="resetForm">重置</el-button>
|
||||
<el-button class="primary-lease" type="primary" @click="showDetails('1')">展开明细</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@
|
|||
<el-form-item label="合同模板名称：" prop="contractName">
|
||||
<el-input
|
||||
autocomplete="off"
|
||||
style="width: 850px"
|
||||
style="width: 350px"
|
||||
maxlength="30"
|
||||
v-model="addAndEditForm.contractName"
|
||||
clearable
|
||||
|
|
|
|||
|
|
@ -3,100 +3,15 @@
|
|||
<h2 class="flowchart-title">装备管理系统流程图</h2>
|
||||
|
||||
<!-- 流程图主体 -->
|
||||
<div class="flowchart-wrapper">
|
||||
<!-- 所有连接线 (放在节点下层) -->
|
||||
<div class="connections">
|
||||
<!-- 装备录入 → 录入审核 -->
|
||||
<line
|
||||
:x1="140" :y1="140" :x2="140" :y2="200"
|
||||
:class="{ active: activeNode === 'equipmentEntry' }"
|
||||
/>
|
||||
|
||||
<!-- 录入审核 → 装备台账 -->
|
||||
<line
|
||||
:x1="200" :y1="230" :x2="230" :y2="230"
|
||||
:class="{ active: activeNode === 'entryAudit' }"
|
||||
/>
|
||||
|
||||
<!-- 装备台账 → 装备上架 -->
|
||||
<line
|
||||
:x1="300" :y1="260" :x2="300" :y2="320"
|
||||
:class="{ active: activeNode === 'equipmentLedger' && activeLine === 'ledgerToShelf' }"
|
||||
/>
|
||||
|
||||
<!-- 装备台账 → 自用出库 -->
|
||||
<line
|
||||
:x1="370" :y1="230" :x2="380" :y2="230"
|
||||
:class="{ active: activeNode === 'equipmentLedger' && activeLine === 'ledgerToSelfOut' }"
|
||||
/>
|
||||
|
||||
<!-- 自用出库 → 装备退库 -->
|
||||
<line
|
||||
:x1="440" :y1="380" :x2="440" :y2="440"
|
||||
:class="{ active: activeNode === 'selfUseOut' }"
|
||||
/>
|
||||
|
||||
<!-- 装备退库 → 装备维修 -->
|
||||
<line
|
||||
:x1="440" :y1="500" :x2="440" :y2="540"
|
||||
:class="{ active: activeNode === 'equipmentReturn' }"
|
||||
/>
|
||||
|
||||
<!-- 装备维修 → 装备退役 -->
|
||||
<path
|
||||
d="M440 600 H440 Q440 400 440 140"
|
||||
:class="{ active: activeNode === 'equipmentRepair' && activeLine === 'repairToRetire' }"
|
||||
/>
|
||||
|
||||
<!-- 装备上架 → 共享大厅 -->
|
||||
<line
|
||||
:x1="290" :y1="350" :x2="530" :y2="350"
|
||||
:class="{ active: activeNode === 'equipmentShelf' && activeLine === 'shelfToRental' }"
|
||||
/>
|
||||
|
||||
<!-- 装备上架 → 装备下架 -->
|
||||
<path
|
||||
d="M230 350 H200 V440 H140"
|
||||
:class="{ active: activeNode === 'equipmentShelf' && activeLine === 'shelfToOffShelf' }"
|
||||
/>
|
||||
|
||||
<!-- 共享大厅 → 共享出库 -->
|
||||
<line
|
||||
:x1="600" :y1="380" :x2="600" :y2="440"
|
||||
:class="{ active: activeNode === 'rentalHall' }"
|
||||
/>
|
||||
|
||||
<!-- 共享出库 → 共享退库 -->
|
||||
<line
|
||||
:x1="590" :y1="470" :x2="590" :y2="540"
|
||||
:class="{ active: activeNode === 'shareOut' }"
|
||||
/>
|
||||
|
||||
<!-- 共享退库 → 装备维修 -->
|
||||
<line
|
||||
:x1="590" :y1="570" :x2="440" :y2="570"
|
||||
:class="{ active: activeNode === 'shareReturn' }"
|
||||
/>
|
||||
|
||||
<!-- 装备维修 → 装备台账 -->
|
||||
<path
|
||||
d="M410 570 H370 V260 H300"
|
||||
:class="{ active: activeNode === 'equipmentRepair' && activeLine === 'repairToLedger' }"
|
||||
/>
|
||||
|
||||
<!-- 装备下架 → 装备退役 -->
|
||||
<path
|
||||
d="M140 470 V380 H180 Q250 200 380 110"
|
||||
:class="{ active: activeNode === 'equipmentOffShelf' }"
|
||||
/>
|
||||
</div>
|
||||
<div class="flowchart-wrapper" ref="wrapper">
|
||||
|
||||
<!-- 所有节点 -->
|
||||
<div class="nodes">
|
||||
<!-- 装备录入 -->
|
||||
<div
|
||||
class="node entry-node"
|
||||
:style="{ left: '80px', top: '80px' }"
|
||||
:style="{ left: '40px', top: '60px' }"
|
||||
ref="equipmentEntry"
|
||||
@click="handleNodeClick('equipmentEntry')"
|
||||
>
|
||||
装备录入
|
||||
|
|
@ -105,7 +20,8 @@
|
|||
<!-- 装备退役 -->
|
||||
<div
|
||||
class="node retire-node"
|
||||
:style="{ left: '380px', top: '80px' }"
|
||||
:style="{ left: '620px', top: '60px' }"
|
||||
ref="equipmentRetire"
|
||||
@click="handleNodeClick('equipmentRetire')"
|
||||
>
|
||||
装备退役
|
||||
|
|
@ -114,7 +30,8 @@
|
|||
<!-- 录入审核 -->
|
||||
<div
|
||||
class="node audit-node"
|
||||
:style="{ left: '80px', top: '200px' }"
|
||||
:style="{ left: '40px', top: '200px' }"
|
||||
ref="entryAudit"
|
||||
@click="handleNodeClick('entryAudit')"
|
||||
>
|
||||
录入审核
|
||||
|
|
@ -123,7 +40,8 @@
|
|||
<!-- 装备台账 -->
|
||||
<div
|
||||
class="node ledger-node"
|
||||
:style="{ left: '230px', top: '200px' }"
|
||||
:style="{ left: '260px', top: '200px' }"
|
||||
ref="equipmentLedger"
|
||||
@click="handleNodeClick('equipmentLedger')"
|
||||
>
|
||||
装备台账
|
||||
|
|
@ -132,7 +50,8 @@
|
|||
<!-- 装备上架 -->
|
||||
<div
|
||||
class="node shelf-node"
|
||||
:style="{ left: '230px', top: '320px' }"
|
||||
:style="{ left: '260px', top: '340px' }"
|
||||
ref="equipmentShelf"
|
||||
@click="handleNodeClick('equipmentShelf')"
|
||||
>
|
||||
装备上架
|
||||
|
|
@ -141,7 +60,8 @@
|
|||
<!-- 自用出库 -->
|
||||
<div
|
||||
class="node self-out-node"
|
||||
:style="{ left: '380px', top: '320px' }"
|
||||
:style="{ left: '500px', top: '200px' }"
|
||||
ref="selfUseOut"
|
||||
@click="handleNodeClick('selfUseOut')"
|
||||
>
|
||||
自用出库
|
||||
|
|
@ -150,7 +70,8 @@
|
|||
<!-- 装备退库 -->
|
||||
<div
|
||||
class="node return-node"
|
||||
:style="{ left: '380px', top: '440px' }"
|
||||
:style="{ left: '740px', top: '200px' }"
|
||||
ref="equipmentReturn"
|
||||
@click="handleNodeClick('equipmentReturn')"
|
||||
>
|
||||
装备退库
|
||||
|
|
@ -159,7 +80,8 @@
|
|||
<!-- 装备维修 -->
|
||||
<div
|
||||
class="node repair-node"
|
||||
:style="{ left: '380px', top: '540px' }"
|
||||
:style="{ left: '980px', top: '200px' }"
|
||||
ref="equipmentRepair"
|
||||
@click="handleNodeClick('equipmentRepair')"
|
||||
>
|
||||
装备维修
|
||||
|
|
@ -168,7 +90,8 @@
|
|||
<!-- 共享大厅 -->
|
||||
<div
|
||||
class="node rental-node"
|
||||
:style="{ left: '530px', top: '320px' }"
|
||||
:style="{ left: '500px', top: '340px' }"
|
||||
ref="rentalHall"
|
||||
@click="handleNodeClick('rentalHall')"
|
||||
>
|
||||
共享大厅
|
||||
|
|
@ -177,7 +100,8 @@
|
|||
<!-- 共享出库 -->
|
||||
<div
|
||||
class="node share-out-node"
|
||||
:style="{ left: '530px', top: '440px' }"
|
||||
:style="{ left: '740px', top: '340px' }"
|
||||
ref="shareOut"
|
||||
@click="handleNodeClick('shareOut')"
|
||||
>
|
||||
共享出库
|
||||
|
|
@ -186,7 +110,8 @@
|
|||
<!-- 共享退库 -->
|
||||
<div
|
||||
class="node share-return-node"
|
||||
:style="{ left: '530px', top: '540px' }"
|
||||
:style="{ left: '980px', top: '340px' }"
|
||||
ref="shareReturn"
|
||||
@click="handleNodeClick('shareReturn')"
|
||||
>
|
||||
共享退库
|
||||
|
|
@ -195,12 +120,30 @@
|
|||
<!-- 装备下架 -->
|
||||
<div
|
||||
class="node off-shelf-node"
|
||||
:style="{ left: '80px', top: '440px' }"
|
||||
:style="{ left: '260px', top: '500px' }"
|
||||
ref="equipmentOffShelf"
|
||||
@click="handleNodeClick('equipmentOffShelf')"
|
||||
>
|
||||
装备下架
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 连接线（SVG 覆盖层） -->
|
||||
<svg class="connections" xmlns="http://www.w3.org/2000/svg">
|
||||
<polyline
|
||||
v-for="conn in connections"
|
||||
:key="conn.id"
|
||||
:points="conn.points"
|
||||
:class="{ active: activeLine === conn.id }"
|
||||
marker-end="url(#arrow)"
|
||||
/>
|
||||
<!-- 箭头定义，用于直线末端 -->
|
||||
<defs>
|
||||
<marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="#999" />
|
||||
</marker>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 节点信息面板 -->
|
||||
|
|
@ -220,6 +163,24 @@ export default {
|
|||
return {
|
||||
activeNode: null,
|
||||
activeLine: null,
|
||||
connections: [],
|
||||
// 参考示意图连线定义（按布局方向设置 from/to）
|
||||
lineDefs: [
|
||||
{ id: 'entryToAudit', from: 'equipmentEntry', to: 'entryAudit' },
|
||||
{ id: 'auditToLedger', from: 'entryAudit', to: 'equipmentLedger' },
|
||||
{ id: 'ledgerToSelf', from: 'equipmentLedger', to: 'selfUseOut' },
|
||||
{ id: 'selfToReturn', from: 'selfUseOut', to: 'equipmentReturn' },
|
||||
{ id: 'returnToRepair', from: 'equipmentReturn', to: 'equipmentRepair' },
|
||||
{ id: 'ledgerToShelf', from: 'equipmentLedger', to: 'equipmentShelf' },
|
||||
{ id: 'shelfToRental', from: 'equipmentShelf', to: 'rentalHall' },
|
||||
{ id: 'rentalToShareOut', from: 'rentalHall', to: 'shareOut' },
|
||||
{ id: 'shareOutToShareReturn', from: 'shareOut', to: 'shareReturn' },
|
||||
{ id: 'shareReturnToRepair', from: 'shareReturn', to: 'equipmentRepair' },
|
||||
{ id: 'shelfToOff', from: 'equipmentShelf', to: 'equipmentOffShelf' },
|
||||
// 顶部/右侧回流到退役
|
||||
{ id: 'repairToRetire', from: 'equipmentRepair', to: 'equipmentRetire' },
|
||||
{ id: 'ledgerToRetire', from: 'equipmentLedger', to: 'equipmentRetire' }
|
||||
],
|
||||
nodeData: {
|
||||
equipmentEntry: {
|
||||
name: '装备录入',
|
||||
|
|
@ -296,6 +257,13 @@ export default {
|
|||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(this.updateConnections);
|
||||
window.addEventListener('resize', this.updateConnections, { passive: true });
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.updateConnections);
|
||||
},
|
||||
computed: {
|
||||
nodeInfo() {
|
||||
return this.nodeData[this.activeNode] || {};
|
||||
|
|
@ -315,6 +283,55 @@ export default {
|
|||
} else if (nodeId === 'equipmentRepair') {
|
||||
this.activeLine = 'repairToRetire';
|
||||
}
|
||||
},
|
||||
updateConnections() {
|
||||
const buildMetrics = (el) => {
|
||||
if (!el) return null;
|
||||
return {
|
||||
left: el.offsetLeft,
|
||||
top: el.offsetTop,
|
||||
width: el.offsetWidth,
|
||||
height: el.offsetHeight
|
||||
};
|
||||
};
|
||||
const getEdgeAnchors = (rect) => {
|
||||
const cx = rect.left + rect.width / 2;
|
||||
const cy = rect.top + rect.height / 2;
|
||||
return {
|
||||
left: { x: rect.left, y: cy },
|
||||
right: { x: rect.left + rect.width, y: cy },
|
||||
top: { x: cx, y: rect.top },
|
||||
bottom: { x: cx, y: rect.top + rect.height }
|
||||
};
|
||||
};
|
||||
const conns = [];
|
||||
this.lineDefs.forEach((ld) => {
|
||||
const fromEl = this.$refs[ld.from];
|
||||
const toEl = this.$refs[ld.to];
|
||||
const f = buildMetrics(fromEl);
|
||||
const t = buildMetrics(toEl);
|
||||
if (!f || !t) return;
|
||||
const fa = getEdgeAnchors(f);
|
||||
const ta = getEdgeAnchors(t);
|
||||
const dx = (t.left + t.width / 2) - (f.left + f.width / 2);
|
||||
const dy = (t.top + t.height / 2) - (f.top + f.height / 2);
|
||||
// 水平优先：从左右边到对侧左右边
|
||||
const hStart = dx >= 0 ? fa.right : fa.left;
|
||||
const hEnd = dx >= 0 ? ta.left : ta.right;
|
||||
const hLen = Math.abs(hEnd.x - hStart.x) + Math.abs(hEnd.y - hStart.y);
|
||||
const hMidX = (hStart.x + hEnd.x) / 2;
|
||||
const hPoints = `${hStart.x},${hStart.y} ${hMidX},${hStart.y} ${hMidX},${hEnd.y} ${hEnd.x},${hEnd.y}`;
|
||||
// 垂直优先：从上下边到对侧上下边
|
||||
const vStart = dy >= 0 ? fa.bottom : fa.top;
|
||||
const vEnd = dy >= 0 ? ta.top : ta.bottom;
|
||||
const vLen = Math.abs(vEnd.x - vStart.x) + Math.abs(vEnd.y - vStart.y);
|
||||
const vMidY = (vStart.y + vEnd.y) / 2;
|
||||
const vPoints = `${vStart.x},${vStart.y} ${vStart.x},${vMidY} ${vEnd.x},${vMidY} ${vEnd.x},${vEnd.y}`;
|
||||
// 取更短的 L 型路径
|
||||
const useH = hLen <= vLen;
|
||||
conns.push({ id: ld.id, points: useH ? hPoints : vPoints });
|
||||
});
|
||||
this.connections = conns;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -338,7 +355,7 @@ export default {
|
|||
|
||||
.flowchart-wrapper {
|
||||
position: relative;
|
||||
width: 900px;
|
||||
width: 1200px;
|
||||
height: 700px;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
|
|
@ -357,14 +374,14 @@ export default {
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
line, path {
|
||||
line, path, polyline {
|
||||
stroke: #999;
|
||||
stroke-width: 2px;
|
||||
fill: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
line.active, path.active {
|
||||
line.active, path.active, polyline.active {
|
||||
stroke: #ff4500;
|
||||
stroke-width: 2.5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -226,7 +226,7 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="营业执照">
|
||||
<el-form-item label="营业执照" style="display: none">
|
||||
<el-upload
|
||||
class = "upload-demo"
|
||||
action="#"
|
||||
|
|
|
|||
Loading…
Reference in New Issue