首页流程图

src/views/EquipmentEntryApproval/EquipmentMainList.vue

@@ -3,8 +3,8 @@
     <el-form
       :model="queryParams"
       ref="queryFormRef"
-      inline
+      :inline="false"
-      label-width="auto"
+      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-col :span="12" style="text-align:right;">
-          <el-form-item>
+          <el-form-item style="white-space: nowrap;">
-            <el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">
+            <el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">查询</el-button>
-              查询
+            <el-button class="primary-lease" type="primary" @click="resetForm">重置</el-button>
-            </el-button>
+            <el-button class="primary-lease" type="primary" @click="showDetails('1')">展开明细</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>

src/views/contract-manage/index.vue

@@ -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

src/views/index.vue

@@ -3,100 +3,15 @@
     <h2 class="flowchart-title">装备管理系统流程图</h2>
 
     <!-- 流程图主体 -->
-    <div class="flowchart-wrapper">
+    <div class="flowchart-wrapper" ref="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="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;
 }

src/views/material/ma/supplier/index.vue

@@ -64,7 +64,7 @@
                               v-hasPermi="['machinery:type:add']"
                               >新增</el-button
                           >
-                      </el-col> 
+                      </el-col>
                        <el-col :span="1.5">
                           <el-button
                           type="warning"
@@ -74,14 +74,14 @@
                           @click="handleExport"
                           >导出
                           </el-button>
-                      </el-col> 
+                      </el-col>
                       <right-toolbar
                           :showSearch.sync="showSearch"
                           @queryTable="getList"
                       ></right-toolbar>
       </el-row>
 
-  
+
       <el-table v-loading="loading" :data="houseList" ref="multipleTable" row-key="supplierId">
         <!-- <el-table-column type="selection" width="55" align="center" :reserve-selection="true" /> -->
         <el-table-column label="序号" align="center" width="80" type="index">
@@ -128,7 +128,7 @@
                         </template>
                     </el-table-column>
       </el-table>
-  
+
       <pagination
         v-show="total>0"
         :total="total"
@@ -136,7 +136,7 @@
         :limit.sync="queryParams.pageSize"
         @pagination="getList"
       />
-  
+
      <!-- 新增或修改弹窗 -->
      <el-dialog :title="title" :visible.sync="showHouse" width="1000px"   append-to-body>
         <el-form ref="form" :model="form" :rules="rules" label-width="120px" >
@@ -160,7 +160,7 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
-     
+
                 <el-row>
                     <el-col :span="12">
                         <el-form-item label="联系人" prop="contactPerson" >
@@ -180,7 +180,7 @@
                             />
                         </el-form-item>
                     </el-col>
-                </el-row>   
+                </el-row>
 
                 <el-row>
                     <el-col :span="12">
@@ -201,8 +201,8 @@
                             />
                         </el-form-item>
                     </el-col>
-                </el-row> 
+                </el-row>
-           <el-row >  
+           <el-row >
              <el-col :span="12">
                <el-form-item label="状态" prop="status">
                  <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
@@ -210,7 +210,7 @@
                    <el-option label="停用" :value="0" />
                  </el-select>
                </el-form-item>
-             </el-col> 
+             </el-col>
 
             <el-col :span="12">
                <el-form-item label="备注" prop="remark">
@@ -223,10 +223,10 @@
                   show-word-limit
                   >
                 </el-input>
-                </el-form-item> 
+                </el-form-item>
             </el-col>
-           </el-row> 
+           </el-row>
-        <el-form-item label="营业执照">
+        <el-form-item label="营业执照" style="display: none">
           <el-upload
               class = "upload-demo"
                action="#"
@@ -265,21 +265,21 @@
               <i class="el-icon-plus avatar-uploader-icon" ></i>
           </el-upload>
         </el-form-item>
-          
+
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </el-dialog>
-  
+
       <!-- 图片查看弹窗 -->
     <el-dialog :visible.sync="dialogVisible" width="600px" height="600px" >
       <img width="100%" height="500px" :src="dialogImageUrl"  />
     </el-dialog>
     </div>
-  </template> 
+  </template>
-  
+
   <script>
   import { getListFacturer,getFacturerDetail,editFacturer,addFacturer,delFacturer,deleteFile } from "@/api/ma/supplier";
   import { imgUpLoadThree, fileUpLoad } from '@/api/system/upload'
@@ -294,27 +294,27 @@
         uploadKey: Date.now(),
         // 遮罩层
         loading: false,
-  
+
         loadingTwo: false,
-  
+
-  
+
         // 是否显示项目部Id
         showName: false,
-  
+
         // 是否显示施工预警信息
         showWarn: false,
-  
+
 
         // 非单个禁用
         single: true,
         // 非多个禁用
         multiple: true,
-  
+
-  
+
         // 显示搜索条件
         showSearch: true,
         showHouse: false,
-       
+
         // 总条数
         total: 0,
         totalTwo : 0,
@@ -394,7 +394,7 @@
       };
     },
     computed: {
-   
+
       //图片上传1张后，隐藏上传框
       uploadDisabled() {
           return this.businessLicenseListTemp.length > 2
@@ -434,7 +434,7 @@
                     this.$modal.msgError(error)
                 })
         },
-      
+
       //上传组件-图片查看
       picturePreview(file) {
 
@@ -497,7 +497,7 @@
       if(file.status === 'ready'){
               downloadFile({ fileName: file.name, fileData: file.raw, fileType: 'application/vnd.ms-excel;charset=utf-8' })
       }else if(file.status === 'success'){
-              
+
               downloadFileData(  { fileName: file.name, fileUrl: file.url } )
               // downloadFileData({ fileName: file.name,fileUrl:file.url })
       }
@@ -538,7 +538,7 @@
         fileList.forEach(file=>{
                   if(extension === 'pdf'){
                       this.urlTemp = require('../../../../assets/file.png');
-                  
+
                   }
         });
         this.businessLicenseListTemp = fileList;
@@ -579,7 +579,7 @@
                 this.businessLicenseListTemp.forEach(item=>{
                   if(item.name.includes('/')){
                   const fileNameWithTimestamp = item.name.split('/').pop();
-                  const parts = fileNameWithTimestamp.split('_'); 
+                  const parts = fileNameWithTimestamp.split('_');
                    const fileType = item.name.split('.').pop();
                   const mainFileName = parts.slice(0, parts.length - 1).join('_');
                   item.name = mainFileName + '.' +fileType;
@@ -592,7 +592,7 @@
                 this.title = '修改'
             })
         },
-        // 表单重置 
+        // 表单重置
         reset() {
             this.form = {};
             this.resetForm("form");
@@ -610,9 +610,9 @@
         },
 
         //** 提交按钮 */
-        submitForm() { 
+        submitForm() {
           this.$refs["form"].validate(async valid => {
-          if (valid) {           
+          if (valid) {
               if (this.form.supplierId != undefined) {
                  const reqData = new FormData();
                 if(this.businessLicenseListTemp.length!=0){
@@ -652,8 +652,8 @@
             } else {
                 this.$modal.msgError(res.msg);
             }
-            },   
+            },
- 
+
         async getImaUploadEdit(){
          this.businessLicenseFileList = []
             const {fileTwo} = await this.getFileData()
@@ -675,8 +675,8 @@
                 this.$modal.msgError(res.msg);
             }
             }
-            }, 
+            },
-        
+
         async addFacturerTemp(form){
                 this.form.bmFileInfos=this.businessLicenseFileList
                 addFacturer(form).then(response => {
@@ -704,7 +704,7 @@
 
         async deleteFile(){
             if(this.delBusinessFileIdList.length>0){
-            this.delBusinessFileIdList.forEach(async item=>{            
+            this.delBusinessFileIdList.forEach(async item=>{
              const urlcode = Base64.encode(item)
              const urlen = encodeURIComponent(urlcode)
              await deleteFile(urlen);
@@ -723,7 +723,7 @@
             }
             const blob = await response.blob();
             const reader = new FileReader();
-            
+
             reader.onloadend = () => {
               this.base64Data = reader.result; // 获取 Base64 数据并存储
             };
@@ -758,13 +758,13 @@
                 })
                 .catch(() => {})
         },
-       
+
         handleExport() {
             this.download('/material/wh_house_info/export', {
               ...this.queryParams
             }, `仓库管理_${new Date().getTime()}.xlsx`)
         },
-  
+
       /** 搜索按钮操作 */
       handleQuery() {
         this.queryParams.pageNum = 1;
@@ -804,7 +804,7 @@
   overflow: revert;
 }
 ::v-deep .el-upload-list__item-actions{
-  overflow:hidden; 
+  overflow:hidden;
 }
 .upload-demo{
   display: flex;
@@ -854,4 +854,4 @@
   color: #fff;
   font-size: 20px;
 }
-  </style>
+  </style>