From ab264123941cd3d345687af92aab2a9e04968960 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 27 五月 2026 14:21:35 +0800
Subject: [PATCH] Merge branch 'dev_NEW_pro' into dev_宁夏_英泽防锈
---
src/views/systemArchitecture/index.vue | 225 +++++++++++++++++++-------------------------------------
1 files changed, 76 insertions(+), 149 deletions(-)
diff --git a/src/views/systemArchitecture/index.vue b/src/views/systemArchitecture/index.vue
index c4cb56b..a070122 100644
--- a/src/views/systemArchitecture/index.vue
+++ b/src/views/systemArchitecture/index.vue
@@ -9,9 +9,7 @@
<section class="section-card section-card--top">
<article class="module-title module-title--basic">
<div class="module-title__icon">
- <span class="module-title__icon-shape">
- <svg-icon icon-class="system" />
- </span>
+ <img :src="jichupeizhi" alt="鍩虹閰嶇疆" />
</div>
<div class="module-title__text">
<h2>鍩虹閰嶇疆</h2>
@@ -24,7 +22,7 @@
<div class="flow-item">
<article class="flow-node">
<div class="flow-node__icon">
- <svg-icon :icon-class="item.icon" />
+ <img :src="item.icon" :alt="item.name" />
</div>
<span>{{ item.name }}</span>
</article>
@@ -37,9 +35,7 @@
<div class="panel-card panel-card--sale">
<article class="module-title module-title--sale">
<div class="module-title__icon">
- <span class="module-title__icon-shape">
- <svg-icon icon-class="chart" />
- </span>
+ <img :src="xiaoshoupeizhi" alt="閿�鍞厤缃�" />
</div>
<div class="module-title__text">
<h2>閿�鍞厤缃�</h2>
@@ -52,7 +48,7 @@
<div class="grid-cell">
<article class="flow-node">
<div class="flow-node__icon" :class="{ 'flow-node__icon--accent': item.accent }">
- <svg-icon :icon-class="item.icon" />
+ <img :src="item.icon" :alt="item.name" />
</div>
<span>{{ item.name }}</span>
</article>
@@ -70,11 +66,6 @@
</div>
<div class="ai-stage">
- <div class="ai-stage__connector ai-stage__connector--top"></div>
- <div class="ai-stage__connector ai-stage__connector--left"></div>
- <div class="ai-stage__connector ai-stage__connector--right"></div>
- <div class="ai-stage__connector ai-stage__connector--bottom"></div>
-
<div class="ai-stage__ring">
<div class="ai-stage__core">
<img :src="aiHead" alt="AI 鏍稿績寮曟搸" />
@@ -85,9 +76,7 @@
<div class="panel-card panel-card--purchase">
<article class="module-title module-title--purchase">
<div class="module-title__icon">
- <span class="module-title__icon-shape">
- <svg-icon icon-class="shopping" />
- </span>
+ <img :src="caigoupeizhi" alt="閲囪喘閰嶇疆" />
</div>
<div class="module-title__text">
<h2>閲囪喘閰嶇疆</h2>
@@ -100,7 +89,7 @@
<div class="grid-cell">
<article class="flow-node">
<div class="flow-node__icon" :class="{ 'flow-node__icon--accent': item.accent }">
- <svg-icon :icon-class="item.icon" />
+ <img :src="item.icon" :alt="item.name" />
</div>
<span>{{ item.name }}</span>
</article>
@@ -121,9 +110,7 @@
<section class="section-card section-card--bottom">
<article class="module-title module-title--produce">
<div class="module-title__icon">
- <span class="module-title__icon-shape">
- <svg-icon icon-class="build" />
- </span>
+ <img :src="shengchanpeizhi" alt="鐢熶骇閰嶇疆" />
</div>
<div class="module-title__text">
<h2>鐢熶骇閰嶇疆</h2>
@@ -136,7 +123,7 @@
<div class="flow-item">
<article class="flow-node">
<div class="flow-node__icon" :class="{ 'flow-node__icon--green': item.green, 'flow-node__icon--accent': item.accent }">
- <svg-icon :icon-class="item.icon" />
+ <img :src="item.icon" :alt="item.name" />
</div>
<span>{{ item.name }}</span>
</article>
@@ -149,9 +136,7 @@
<section class="section-card section-card--bottom">
<article class="module-title module-title--store">
<div class="module-title__icon">
- <span class="module-title__icon-shape">
- <svg-icon icon-class="redis" />
- </span>
+ <img :src="cangchuwuliu" alt="浠撳偍鐗╂祦" />
</div>
<div class="module-title__text">
<h2>浠撳偍鐗╂祦</h2>
@@ -164,7 +149,7 @@
<div class="flow-item">
<article class="flow-node">
<div class="flow-node__icon">
- <svg-icon :icon-class="item.icon" />
+ <img :src="item.icon" :alt="item.name" />
</div>
<span>{{ item.name }}</span>
</article>
@@ -178,48 +163,77 @@
</template>
<script setup>
-import aiHead from '@/assets/images/head.svg'
+import aiHead from '@/assets/system/ai.svg'
+import jichupeizhi from '@/assets/system/jichupeizhi.svg'
+import xiaoshoupeizhi from '@/assets/system/xiaoshoupeizhi.svg'
+import caigoupeizhi from '@/assets/system/caigoupeizhi.svg'
+import shengchanpeizhi from '@/assets/system/shengchanpeizhi.svg'
+import cangchuwuliu from '@/assets/system/cangchuwuliu.svg'
+
+import yonghuguanli from '@/assets/system/yonghuguanli.svg'
+import shenpiguanli from '@/assets/system/shenpiguanli.svg'
+import chanpinweihu from '@/assets/system/chanpinweihu.svg'
+
+import kehudangan from '@/assets/system/kehudangan.svg'
+import xiaoshoubaojia from '@/assets/system/xiaoshoubaojia.svg'
+import xiaoshoutaizhang from '@/assets/system/xiaoshoutaizhang.svg'
+import fahuotaizhang from '@/assets/system/fahuotaizhang.svg'
+import xiaoshoutuihuo from '@/assets/system/xiaoshoutuihuo.svg'
+
+import gongyingshangdangan from '@/assets/system/gongyingshangdangan.svg'
+import caigoutaizhang from '@/assets/system/caigoutaizhang.svg'
+import caigoutuihuo from '@/assets/system/caigoutuihuo.svg'
+import gongyingshangwanglai from '@/assets/system/gongyingshangwanglai.svg'
+import caigoubaobiao from '@/assets/system/caigoubaobiao.svg'
+
+import gongxu from '@/assets/system/gongxu.svg'
+import BOM from '@/assets/system/BOM.svg'
+import shengchandingdan from '@/assets/system/shengchandingdan.svg'
+import shengchanpaichan from '@/assets/system/shengchanpaichan.svg'
+import baogong from '@/assets/system/baogong.svg'
+import baogongtaizhang from '@/assets/system/baogongtaizhang.svg'
+import shengchanheduan from '@/assets/system/shengchanheduan.svg'
+
+import rukuguanli from '@/assets/system/rukuguanli.svg'
+import chukuguanli from '@/assets/system/chukuguanli.svg'
+import kucunguanli from '@/assets/system/kucunguanli.svg'
const basicFlow = [
- { key: 'basic-role', name: '瑙掕壊绠＄悊', icon: 'user' },
- { key: 'basic-user', name: '鐢ㄦ埛绠＄悊', icon: 'peoples' },
- { key: 'basic-post', name: '宀椾綅绠＄悊', icon: 'tree' },
- { key: 'basic-dept', name: '閮ㄩ棬绠＄悊', icon: 'tree' },
- { key: 'basic-product', name: '浜у搧缁存姢', icon: 'table' },
- { key: 'basic-approval', name: '瀹℃壒绠＄悊', icon: 'form' }
+ { key: 'basic-user', name: '鐢ㄦ埛绠＄悊', icon: yonghuguanli },
+ { key: 'basic-approval', name: '瀹℃壒绠＄悊', icon: shenpiguanli },
+ { key: 'basic-product', name: '浜у搧缁存姢', icon: chanpinweihu }
]
const saleFlow = [
- { key: 'sale-customer', name: '瀹㈡埛妗ｆ', icon: 'peoples', arrow: 'right' },
- { key: 'sale-quote', name: '閿�鍞姤浠�', icon: 'form', arrow: 'right' },
- { key: 'sale-ledger', name: '閿�鍞彴璐�', icon: 'monitor', arrow: 'right' },
- { key: 'sale-delivery', name: '鍙戣揣鍙拌处', icon: 'clipboard', arrow: 'right' },
- { key: 'sale-return', name: '閿�鍞��璐�', icon: 'nested', accent: true }
+ { key: 'sale-customer', name: '瀹㈡埛妗ｆ', icon: kehudangan, arrow: 'right' },
+ { key: 'sale-quote', name: '閿�鍞姤浠�', icon: xiaoshoubaojia, arrow: 'right' },
+ { key: 'sale-ledger', name: '閿�鍞彴璐�', icon: xiaoshoutaizhang, arrow: 'right' },
+ { key: 'sale-delivery', name: '鍙戣揣鍙拌处', icon: fahuotaizhang, arrow: 'right' },
+ { key: 'sale-return', name: '閿�鍞��璐�', icon: xiaoshoutuihuo, accent: true }
]
const purchaseFlow = [
- { key: 'purchase-supplier', name: '渚涘簲鍟嗘。妗�', icon: 'people', arrow: 'right' },
- { key: 'purchase-ledger', name: '閲囪喘鍙拌处', icon: 'monitor', arrow: 'right' },
- { key: 'purchase-return', name: '閲囪喘閫�璐�', icon: 'nested', accent: true },
- { key: 'purchase-contact', name: '渚涘簲鍟嗗線鏉�', icon: 'peoples', arrow: 'right' },
- { key: 'purchase-report', name: '閲囪喘鎶ヨ〃', icon: 'chart' }
+ { key: 'purchase-supplier', name: '渚涘簲鍟嗘。妗�', icon: gongyingshangdangan, arrow: 'right' },
+ { key: 'purchase-ledger', name: '閲囪喘鍙拌处', icon: caigoutaizhang, arrow: 'right' },
+ { key: 'purchase-return', name: '閲囪喘閫�璐�', icon: caigoutuihuo, accent: true },
+ { key: 'purchase-contact', name: '渚涘簲鍟嗗線鏉�', icon: gongyingshangwanglai, arrow: 'right' },
+ { key: 'purchase-report', name: '閲囪喘鎶ヨ〃', icon: caigoubaobiao }
]
const produceFlow = [
- { key: 'produce-process', name: '宸ュ簭', icon: 'list' },
- { key: 'produce-bom', name: 'BOM', icon: 'monitor' },
- { key: 'produce-route', name: '宸ヨ壓璺嚎', icon: 'tree', green: true },
- { key: 'produce-order', name: '鐢熶骇璁㈠崟', icon: 'peoples', green: true },
- { key: 'produce-schedule', name: '鐢熶骇鎺掍骇', icon: 'time' },
- { key: 'produce-work', name: '鐢熶骇鎶ュ伐', icon: 'edit' },
- { key: 'produce-ledger', name: '鎶ュ伐鍙拌处', icon: 'form' },
- { key: 'produce-cost', name: '鐢熶骇鏍哥畻', icon: 'money', accent: true }
+ { key: 'produce-process', name: '宸ュ簭', icon: gongxu },
+ { key: 'produce-bom', name: 'BOM', icon: BOM },
+ { key: 'produce-order', name: '鐢熶骇璁㈠崟', icon: shengchandingdan, green: true },
+ { key: 'produce-schedule', name: '鐢熶骇鎺掍骇', icon: shengchanpaichan },
+ { key: 'produce-work', name: '鐢熶骇鎶ュ伐', icon: baogong },
+ { key: 'produce-ledger', name: '鎶ュ伐鍙拌处', icon: baogongtaizhang },
+ { key: 'produce-cost', name: '鐢熶骇鏍哥畻', icon: shengchanheduan, accent: true }
]
const storeFlow = [
- { key: 'store-in', name: '鍏ュ簱绠＄悊', icon: 'download' },
- { key: 'store-out', name: '鍑哄簱绠＄悊', icon: 'guide' },
- { key: 'store-stock', name: '搴撳瓨绠＄悊', icon: 'redis-list' }
+ { key: 'store-in', name: '鍏ュ簱绠＄悊', icon: rukuguanli },
+ { key: 'store-out', name: '鍑哄簱绠＄悊', icon: chukuguanli },
+ { key: 'store-stock', name: '搴撳瓨绠＄悊', icon: kucunguanli }
]
</script>
@@ -300,24 +314,15 @@
}
.module-title__icon {
- width: 44px;
- height: 50px;
- position: relative;
+ width: 72px;
+ height: 72px;
display: grid;
place-items: center;
- transform: translateY(-1px);
- filter: drop-shadow(0 10px 14px rgba(82, 125, 211, 0.28))
- drop-shadow(0 4px 8px rgba(82, 125, 211, 0.18));
}
-.module-title__icon-shape {
+.module-title__icon img {
width: 100%;
height: 100%;
- clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
- display: grid;
- place-items: center;
- color: #fff;
- font-size: 18px;
}
.module-title__text h2 {
@@ -333,50 +338,7 @@
color: #7f8ba3;
}
-.module-title--basic .module-title__icon {
- filter: drop-shadow(0 10px 14px rgba(47, 110, 236, 0.28))
- drop-shadow(0 4px 8px rgba(47, 110, 236, 0.18));
-}
-.module-title--basic .module-title__icon-shape {
- background: linear-gradient(135deg, #2069ff 0%, #5bb0ff 100%);
-}
-
-.module-title--sale .module-title__icon {
- filter: drop-shadow(0 10px 14px rgba(123, 66, 255, 0.24))
- drop-shadow(0 4px 8px rgba(123, 66, 255, 0.16));
-}
-
-.module-title--sale .module-title__icon-shape {
- background: linear-gradient(135deg, #7b42ff 0%, #a172ff 100%);
-}
-
-.module-title--purchase .module-title__icon {
- filter: drop-shadow(0 10px 14px rgba(52, 161, 255, 0.24))
- drop-shadow(0 4px 8px rgba(52, 161, 255, 0.16));
-}
-
-.module-title--purchase .module-title__icon-shape {
- background: linear-gradient(135deg, #34a1ff 0%, #66c6ff 100%);
-}
-
-.module-title--produce .module-title__icon {
- filter: drop-shadow(0 10px 14px rgba(36, 183, 118, 0.24))
- drop-shadow(0 4px 8px rgba(36, 183, 118, 0.16));
-}
-
-.module-title--produce .module-title__icon-shape {
- background: linear-gradient(135deg, #24b776 0%, #62d49d 100%);
-}
-
-.module-title--store .module-title__icon {
- filter: drop-shadow(0 10px 14px rgba(119, 81, 255, 0.24))
- drop-shadow(0 4px 8px rgba(119, 81, 255, 0.16));
-}
-
-.module-title--store .module-title__icon-shape {
- background: linear-gradient(135deg, #7751ff 0%, #9b76ff 100%);
-}
.flow-row {
display: flex;
@@ -421,6 +383,12 @@
place-items: center;
color: #3f76f3;
font-size: 24px;
+}
+
+.flow-node__icon img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
}
.flow-node__icon--accent {
@@ -573,47 +541,6 @@
font-size: 14px;
font-weight: 700;
box-shadow: 0 10px 20px rgba(118, 147, 204, 0.08);
-}
-
-.ai-stage__connector {
- position: absolute;
- border-color: rgba(145, 181, 247, 0.5);
- border-style: dashed;
- border-width: 1px;
- pointer-events: none;
-}
-
-.ai-stage__connector--top {
- top: 24px;
- left: 50%;
- width: 0;
- height: 64px;
- border-left-width: 1px;
- transform: translateX(-50%);
-}
-
-.ai-stage__connector--left,
-.ai-stage__connector--right {
- top: 148px;
- width: 74px;
- border-top-width: 1px;
-}
-
-.ai-stage__connector--left {
- left: 18px;
-}
-
-.ai-stage__connector--right {
- right: 18px;
-}
-
-.ai-stage__connector--bottom {
- bottom: 32px;
- left: 50%;
- width: 0;
- height: 64px;
- border-left-width: 1px;
- transform: translateX(-50%);
}
@media (max-width: 1440px) {
--
Gitblit v1.9.3