From ea4e773e1344f936030ca13ad4b3a6ac7f8a3138 Mon Sep 17 00:00:00 2001
From: zouzhiwen <409053122@qq.com>
Date: Thu, 5 Mar 2026 09:34:51 +0800
Subject: [PATCH] =?UTF-8?q?opt:=20=E5=AD=90=E4=BB=BB=E5=8A=A1=E9=87=8A?=
 =?UTF-8?q?=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/vendorLoad.ts               |  40 +++++
 src/views/vendor/VendorLoadView.vue | 255 ++++++++++++++++++++++++++++
 2 files changed, 295 insertions(+)
 create mode 100644 src/api/vendorLoad.ts
 create mode 100644 src/views/vendor/VendorLoadView.vue

diff --git a/src/api/vendorLoad.ts b/src/api/vendorLoad.ts
new file mode 100644
index 0000000..cf87731
--- /dev/null
+++ b/src/api/vendorLoad.ts
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+export interface MachineTaskChainVO {
+  id?: number
+  code: string
+  warehouse?: string
+  firstTaskVendor?: string
+  status?: string
+  type?: string
+  businessNo?: string
+  description?: string
+  sourceLocation?: string
+  sourcePoint?: string
+  sourceContainer?: string
+  targetType?: string
+  targetCode?: string
+  targetLocation?: string
+  targetPoint?: string
+  elevatorId?: number
+  priority?: number
+  executionTime?: number
+  completeTime?: string
+  cancelReason?: string
+  cancelTime?: string
+  createTime?: string
+}
+
+export interface VendorLoadVO {
+  vendor: string
+  vendorName: string
+  maxConcurrent: number
+  currentLoad: number
+  chains: MachineTaskChainVO[]
+}
+
+export function getVendorLoad() {
+  return request.get<never, { code: number; data: VendorLoadVO[] }>(
+    '/api/robot/external/admin/machine-task/vendor/load',
+  )
+}
diff --git a/src/views/vendor/VendorLoadView.vue b/src/views/vendor/VendorLoadView.vue
new file mode 100644
index 0000000..8b478d2
--- /dev/null
+++ b/src/views/vendor/VendorLoadView.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="page-container">
+    <!-- ========== PC 端 ========== -->
+    <template v-if="!isMobile">
+      <el-card shadow="hover">
+        <template #header>
+          <div class="card-header">
+            <span>厂商负载</span>
+            <el-button type="primary" size="small" :loading="refreshing" @click="loadData">
+              刷新
+            </el-button>
+          </div>
+        </template>
+
+        <el-row :gutter="20">
+          <el-col v-for="vendor in vendorLoads" :key="vendor.vendor" :span="12">
+            <el-card shadow="hover" class="vendor-card">
+              <template #header>
+                <div class="vendor-card-header">
+                  <div class="vendor-title">
+                    <span>{{ vendor.vendorName }}</span>
+                    <el-tag :type="vendor.currentLoad < vendor.maxConcurrent ? 'success' : 'danger'" size="small">
+                      负载 {{ vendor.currentLoad }} / {{ vendor.maxConcurrent }}
+                    </el-tag>
+                  </div>
+                </div>
+              </template>
+
+              <div class="chain-list">
+                <div v-if="vendor.chains && vendor.chains.length > 0" class="chain-items">
+                  <div
+                    v-for="chain in vendor.chains"
+                    :key="chain.code"
+                    class="chain-item"
+                    @click="chain.code && goChainDetail(chain.code)"
+                  >
+                    <span class="chain-code">{{ chain.code }}</span>
+                    <el-tag v-bind="getChainStatusTag(chain.status || '')" size="small">
+                      {{ chainStatusMap[chain.status || ''] || chain.status }}
+                    </el-tag>
+                  </div>
+                </div>
+                <el-empty v-else description="暂无执行中任务链" :image-size="60" />
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+
+        <el-empty v-if="vendorLoads.length === 0 && !refreshing" description="暂无厂商数据" />
+      </el-card>
+    </template>
+
+    <!-- ========== 移动端 ========== -->
+    <template v-else>
+      <div class="m-vendor-header">
+        <span class="m-vendor-title">厂商负载</span>
+        <el-button type="primary" size="small" round :loading="refreshing" @click="loadData">刷新</el-button>
+      </div>
+
+      <div
+        v-for="vendor in vendorLoads"
+        :key="vendor.vendor"
+        class="m-vendor-card"
+      >
+        <div class="m-vendor-card-top">
+          <div class="m-vendor-name-row">
+            <span class="m-vendor-name">{{ vendor.vendorName }}</span>
+            <el-tag :type="vendor.currentLoad < vendor.maxConcurrent ? 'success' : 'danger'" size="small">
+              {{ vendor.currentLoad }} / {{ vendor.maxConcurrent }}
+            </el-tag>
+          </div>
+        </div>
+
+        <div class="m-chain-list">
+          <div
+            v-for="chain in (vendor.chains || [])"
+            :key="chain.code"
+            class="m-chain-item"
+            @click="chain.code && goChainDetail(chain.code)"
+          >
+            <span class="m-chain-code">{{ chain.code }}</span>
+            <el-tag v-bind="getChainStatusTag(chain.status || '')" size="small">
+              {{ chainStatusMap[chain.status || ''] || chain.status }}
+            </el-tag>
+          </div>
+          <el-empty v-if="!vendor.chains?.length" description="暂无执行中任务链" :image-size="48" />
+        </div>
+      </div>
+
+      <el-empty v-if="vendorLoads.length === 0 && !refreshing" description="暂无厂商数据" :image-size="48" />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'VendorLoadView' })
+import { getVendorLoad, type VendorLoadVO } from '@/api/vendorLoad'
+import { chainStatusMap, getChainStatusTag } from '@/constants/chainStatus'
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useDevice } from '@/composables/useDevice'
+
+const { isMobile } = useDevice()
+const router = useRouter()
+const vendorLoads = ref<VendorLoadVO[]>([])
+const refreshing = ref(false)
+
+async function loadData() {
+  refreshing.value = true
+  try {
+    const res = await getVendorLoad()
+    vendorLoads.value = res.data || []
+  } catch { /* handled by interceptor */ } finally {
+    refreshing.value = false
+  }
+}
+
+function goChainDetail(code: string) {
+  router.push(`/task/chain/${code}`)
+}
+
+onMounted(loadData)
+</script>
+
+<style scoped>
+/* ===== 公共 ===== */
+.page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* ===== PC ===== */
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 600;
+}
+
+.vendor-card {
+  margin-bottom: 20px;
+}
+
+.vendor-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.vendor-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.chain-list {
+  min-height: 120px;
+}
+
+.chain-items {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.chain-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: #f8f9fb;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.chain-item:hover {
+  background: #eef1f6;
+}
+
+.chain-code {
+  font-family: monospace;
+  font-size: 13px;
+  color: #409eff;
+  word-break: break-all;
+  cursor: pointer;
+}
+
+.chain-code:hover {
+  text-decoration: underline;
+}
+
+/* ===== 移动端 ===== */
+.m-vendor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.m-vendor-title {
+  font-size: 17px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.m-vendor-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 14px;
+  margin-bottom: 12px;
+}
+
+.m-vendor-card-top {
+  margin-bottom: 10px;
+}
+
+.m-vendor-name-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.m-vendor-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.m-chain-list {
+  min-height: 80px;
+}
+
+.m-chain-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  background: #f8f9fb;
+  border-radius: 8px;
+  margin-bottom: 6px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.m-chain-code {
+  font-family: monospace;
+  font-size: 12px;
+  color: #409eff;
+  word-break: break-all;
+  -webkit-tap-highlight-color: transparent;
+}
+</style>