From cceaea375c227671ea702488bf8de0d9bfd91348 Mon Sep 17 00:00:00 2001
From: gaoxq <376340421@qq.com>
Date: Mon, 2 Mar 2026 18:06:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E9=A1=B5=E9=9D=A2=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/screen/Erp/components/ChartTop.vue  | 243 ++++++++++++++++++
 screen-vue/src/views/screen/Erp/index.vue     |   4 +-
 .../views/screen/Work/components/ChartTop.vue | 243 ++++++++++++++++++
 screen-vue/src/views/screen/Work/index.vue    | 162 +++++-------
 4 files changed, 553 insertions(+), 99 deletions(-)
 create mode 100644 screen-vue/src/views/screen/Erp/components/ChartTop.vue
 create mode 100644 screen-vue/src/views/screen/Work/components/ChartTop.vue

diff --git a/screen-vue/src/views/screen/Erp/components/ChartTop.vue b/screen-vue/src/views/screen/Erp/components/ChartTop.vue
new file mode 100644
index 0000000..c437fdc
--- /dev/null
+++ b/screen-vue/src/views/screen/Erp/components/ChartTop.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="chart-top-container">
+    <div class="card-item" v-for="(item, index) in cardList" :key="index">
+      <div class="card-left">
+        <div class="icon-box">
+          <img 
+            :src="item.iconImg" 
+            alt="icon" 
+            class="icon-img"
+            :style="{ filter: item.iconFilter }"
+          >
+        </div>
+        <div class="card-text">
+          <div class="module-name">{{ item.module }}</div>
+          <div class="desc-text">{{ item.desc }}</div>
+        </div>
+      </div>
+      <div class="card-right">
+        <div class="num-value">{{ item.value }}</div>
+        <div class="num-label">{{ item.label }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+
+const cardList = ref([
+  {
+    module: '生产管理',
+    desc: '业务运行指标',
+    value: 12,
+    label: '指标项',
+    iconImg: '/assets/logo/production.png',
+    iconFilter: 'brightness(0.95) contrast(1.1)'
+  },
+  {
+    module: '基建管理',
+    desc: '工程建设指标',
+    value: 7,
+    label: '指标项',
+    iconImg: '/assets/icons/construction.png',
+    iconFilter: 'brightness(0.95) contrast(1.1)'
+  },
+  {
+    module: '项目管理',
+    desc: '项目管控指标',
+    value: 8,
+    label: '指标项',
+    iconImg: '/assets/icons/project.png',
+    iconFilter: 'brightness(0.95) contrast(1.1)'
+  },
+  {
+    module: '物资管理',
+    desc: '物资调配指标',
+    value: 8,
+    label: '指标项',
+    iconImg: '/assets/icons/material.png',
+    iconFilter: 'brightness(0.95) contrast(1.1)'
+  },
+  {
+    module: '综合管理',
+    desc: '综合管控指标',
+    value: 15,
+    label: '指标项',
+    iconImg: '/assets/icons/comprehensive.png',
+    iconFilter: 'brightness(0.95) contrast(1.1)'
+  }
+])
+
+const resizeHandler = () => {
+  const container = document.querySelector('.chart-top-container')
+  if (container) {
+    const height = container.parentElement.clientHeight
+    container.style.height = `${height}px`
+  }
+}
+
+onMounted(() => {
+  resizeHandler()
+  window.addEventListener('resize', resizeHandler)
+})
+
+watch(
+  () => {},
+  () => {
+    window.removeEventListener('resize', resizeHandler)
+  },
+  { once: true }
+)
+</script>
+
+<style scoped>
+.chart-top-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  background: transparent;
+}
+
+.card-item {
+  flex: 1;
+  min-width: 160px;
+  height: 85%;
+  background: rgba(15, 52, 96, 0.95);
+  border: 1px solid #1a508b;
+  border-radius: 8px;
+  padding: 0 8px; /* 从0 12px缩减为0 8px */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.card-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(60, 156, 255, 0.3);
+  border-color: #3c9cff;
+}
+
+.card-left {
+  display: flex;
+  align-items: center;
+  gap: 6px; /* 从10px缩减为6px */
+}
+
+.icon-box {
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid rgba(224, 230, 255, 0.2);
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.icon-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  opacity: 0.9;
+  transition: all 0.2s ease;
+}
+
+.icon-box:hover .icon-img {
+  opacity: 1;
+  transform: scale(1.05);
+  filter: brightness(1.1) contrast(1.2);
+}
+
+.card-text {
+  color: #e0e6ff;
+}
+
+.module-name {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.desc-text {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-top: 2px;
+}
+
+.card-right {
+  text-align: right;
+  color: #e0e6ff;
+}
+
+.num-value {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1;
+  background: linear-gradient(to right, #3c9cff, #7472fe);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.num-label {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-top: 4px;
+}
+
+@media (max-width: 1600px) {
+  .card-item {
+    min-width: 140px;
+    padding: 0 6px;
+  }
+  .icon-box {
+    width: 36px;
+    height: 36px;
+  }
+  .module-name {
+    font-size: 14px;
+  }
+  .num-value {
+    font-size: 22px;
+  }
+}
+
+@media (max-width: 768px) {
+  .chart-top-container {
+    flex-direction: column;
+    height: auto !important;
+    gap: 4px;
+    padding: 2px;
+  }
+  .card-item {
+    width: 100%;
+    height: 80px;
+    min-width: unset;
+    padding: 0 8px;
+  }
+}
+
+@media (max-height: 900px) {
+  .card-item {
+    height: 80%;
+  }
+  .icon-box {
+    width: 32px;
+    height: 32px;
+  }
+  .num-value {
+    font-size: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Erp/index.vue b/screen-vue/src/views/screen/Erp/index.vue
index fdfb7d5..b5ba652 100644
--- a/screen-vue/src/views/screen/Erp/index.vue
+++ b/screen-vue/src/views/screen/Erp/index.vue
@@ -2,8 +2,7 @@
   <div class="erp-layout-container">
     <div class="erp-section erp-top-header">
       <div class="erp-card full-card">
-        <h3>ERP页面顶部区域 (10%)</h3>
-        <p>可放置筛选、标题、概览数据等</p>
+        <ChartTop />
       </div>
     </div>
 
@@ -73,6 +72,7 @@
 
 <script setup>
 import { ref, watch } from 'vue';
+import ChartTop from './components/ChartTop.vue'
 import ChartV01 from './components/ChartV01.vue';
 import ChartV02 from './components/ChartV02.vue';
 import ChartV03 from './components/ChartV03.vue';
diff --git a/screen-vue/src/views/screen/Work/components/ChartTop.vue b/screen-vue/src/views/screen/Work/components/ChartTop.vue
new file mode 100644
index 0000000..c437fdc
--- /dev/null
+++ b/screen-vue/src/views/screen/Work/components/ChartTop.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="chart-top-container">
+    <div class="card-item" v-for="(item, index) in cardList" :key="index">
+      <div class="card-left">
+        <div class="icon-box">
+          <img 
+            :src="item.iconImg" 
+            alt="icon" 
+            class="icon-img"
+            :style="{ filter: item.iconFilter }"
+          >
+        </div>
+        <div class="card-text">
+          <div class="module-name">{{ item.module }}</div>
+          <div class="desc-text">{{ item.desc }}</div>
+        </div>
+      </div>
+      <div class="card-right">
+        <div class="num-value">{{ item.value }}</div>
+        <div class="num-label">{{ item.label }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+
+const cardList = ref([
+  {
+    module: '生产管理',
+    desc: '业务运行指标',
+    value: 12,
+    label: '指标项',
+    iconImg: '/assets/logo/production.png',
+    iconFilter: 'brightness(0.95) contrast(1.1)'
+  },
+  {
+    module: '基建管理',
+    desc: '工程建设指标',
+    value: 7,
+    label: '指标项',
+    iconImg: '/assets/icons/construction.png',
+    iconFilter: 'brightness(0.95) contrast(1.1)'
+  },
+  {
+    module: '项目管理',
+    desc: '项目管控指标',
+    value: 8,
+    label: '指标项',
+    iconImg: '/assets/icons/project.png',
+    iconFilter: 'brightness(0.95) contrast(1.1)'
+  },
+  {
+    module: '物资管理',
+    desc: '物资调配指标',
+    value: 8,
+    label: '指标项',
+    iconImg: '/assets/icons/material.png',
+    iconFilter: 'brightness(0.95) contrast(1.1)'
+  },
+  {
+    module: '综合管理',
+    desc: '综合管控指标',
+    value: 15,
+    label: '指标项',
+    iconImg: '/assets/icons/comprehensive.png',
+    iconFilter: 'brightness(0.95) contrast(1.1)'
+  }
+])
+
+const resizeHandler = () => {
+  const container = document.querySelector('.chart-top-container')
+  if (container) {
+    const height = container.parentElement.clientHeight
+    container.style.height = `${height}px`
+  }
+}
+
+onMounted(() => {
+  resizeHandler()
+  window.addEventListener('resize', resizeHandler)
+})
+
+watch(
+  () => {},
+  () => {
+    window.removeEventListener('resize', resizeHandler)
+  },
+  { once: true }
+)
+</script>
+
+<style scoped>
+.chart-top-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  background: transparent;
+}
+
+.card-item {
+  flex: 1;
+  min-width: 160px;
+  height: 85%;
+  background: rgba(15, 52, 96, 0.95);
+  border: 1px solid #1a508b;
+  border-radius: 8px;
+  padding: 0 8px; /* 从0 12px缩减为0 8px */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.card-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(60, 156, 255, 0.3);
+  border-color: #3c9cff;
+}
+
+.card-left {
+  display: flex;
+  align-items: center;
+  gap: 6px; /* 从10px缩减为6px */
+}
+
+.icon-box {
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid rgba(224, 230, 255, 0.2);
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.icon-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  opacity: 0.9;
+  transition: all 0.2s ease;
+}
+
+.icon-box:hover .icon-img {
+  opacity: 1;
+  transform: scale(1.05);
+  filter: brightness(1.1) contrast(1.2);
+}
+
+.card-text {
+  color: #e0e6ff;
+}
+
+.module-name {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.desc-text {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-top: 2px;
+}
+
+.card-right {
+  text-align: right;
+  color: #e0e6ff;
+}
+
+.num-value {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1;
+  background: linear-gradient(to right, #3c9cff, #7472fe);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.num-label {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-top: 4px;
+}
+
+@media (max-width: 1600px) {
+  .card-item {
+    min-width: 140px;
+    padding: 0 6px;
+  }
+  .icon-box {
+    width: 36px;
+    height: 36px;
+  }
+  .module-name {
+    font-size: 14px;
+  }
+  .num-value {
+    font-size: 22px;
+  }
+}
+
+@media (max-width: 768px) {
+  .chart-top-container {
+    flex-direction: column;
+    height: auto !important;
+    gap: 4px;
+    padding: 2px;
+  }
+  .card-item {
+    width: 100%;
+    height: 80px;
+    min-width: unset;
+    padding: 0 8px;
+  }
+}
+
+@media (max-height: 900px) {
+  .card-item {
+    height: 80%;
+  }
+  .icon-box {
+    width: 32px;
+    height: 32px;
+  }
+  .num-value {
+    font-size: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Work/index.vue b/screen-vue/src/views/screen/Work/index.vue
index 8b3dd2b..80f9cb5 100644
--- a/screen-vue/src/views/screen/Work/index.vue
+++ b/screen-vue/src/views/screen/Work/index.vue
@@ -2,67 +2,26 @@
   <div class="work-layout-container">
     <div class="work-section work-top-header">
       <div class="work-card full-card">
-        <h3>Work页面顶部区域 (10%)</h3>
-        <p>可放置工作概览、筛选条件、操作按钮等</p>
+        <ChartTop />
       </div>
     </div>
 
-    <div class="work-main-container">
-      <div class="work-col">
-        <div class="work-inner-section work-inner-one-third">
-          <div class="work-card">
-            <h3>左侧上部</h3>
-            <p>工作列表1</p>
-          </div>
-        </div>
-        <div class="work-inner-section work-inner-one-third">
-          <div class="work-card">
-            <h3>左侧中部</h3>
-            <p>工作列表2</p>
-          </div>
-        </div>
-        <div class="work-inner-section work-inner-one-third">
-          <div class="work-card">
-            <h3>左侧下部</h3>
-            <p>工作列表3</p>
-          </div>
-        </div>
+    <div class="work-section work-main-section">
+      <div class="work-col work-col-1-3 work-left-col">
+        <div class="work-card work-card-1-3">左侧上</div>
+        <div class="work-card work-card-1-3">左侧中</div>
+        <div class="work-card work-card-1-3">左侧下</div>
       </div>
 
-      <div class="work-col">
-        <div class="work-inner-section work-inner-two-third">
-          <div class="work-card">
-            <h3>中间上部 (60%)</h3>
-            <p>核心工作内容/进度展示</p>
-          </div>
-        </div>
-        <div class="work-inner-section work-inner-one-third">
-          <div class="work-card">
-            <h3>中间下部 (30%)</h3>
-            <p>工作统计/快捷操作</p>
-          </div>
-        </div>
+      <div class="work-col work-col-1-3 work-middle-col">
+        <div class="work-card work-card-2-3">中侧上</div>
+        <div class="work-card work-card-1-3">中侧下</div>
       </div>
 
-      <div class="work-col">
-        <div class="work-inner-section work-inner-one-third">
-          <div class="work-card">
-            <h3>右侧上部</h3>
-            <p>工作图表/数据可视化1</p>
-          </div>
-        </div>
-        <div class="work-inner-section work-inner-one-third">
-          <div class="work-card">
-            <h3>右侧中部</h3>
-            <p>工作图表/数据可视化2</p>
-          </div>
-        </div>
-        <div class="work-inner-section work-inner-one-third">
-          <div class="work-card">
-            <h3>右侧下部</h3>
-            <p>待办/提醒/通知</p>
-          </div>
-        </div>
+      <div class="work-col work-col-1-3 work-right-col">
+        <div class="work-card work-card-1-3">右侧上</div>
+        <div class="work-card work-card-1-3">右侧中</div>
+        <div class="work-card work-card-1-3">右侧下</div>
       </div>
     </div>
   </div>
@@ -70,19 +29,21 @@
 
 <script setup>
 import { ref, watch } from 'vue';
+import ChartTop from './components/ChartTop.vue'
 
 const props = defineProps({
   formParams: {
-	type: Object,
-	default: () => ({})
+    type: Object,
+    default: () => ({})
   }
 });
 
 watch(
   () => props.formParams,
+  (newVal) => {},
   { 
-	deep: true,
-	immediate: true
+    deep: true,
+    immediate: true
   }
 );
 </script>
@@ -101,48 +62,48 @@ watch(
   overflow: hidden;
 }
 
-.work-top-header {
+.work-section {
   width: 100%;
-  height: 10%;
-  display: flex;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.work-main-container {
-  width: 100%;
-  height: 90%;
   display: flex;
   gap: 6px;
   box-sizing: border-box;
   overflow: hidden;
 }
 
+.work-top-header {
+  height: 10%;
+}
+
+.work-main-section {
+  height: 90%;
+}
+
 .work-col {
-  flex: 1;
   height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.work-col-1-3 {
+  width: calc((100% - 12px) / 3);
+}
+
+.work-left-col, .work-middle-col, .work-right-col {
   display: flex;
   flex-direction: column;
   gap: 6px;
-  box-sizing: border-box;
-  overflow: hidden;
 }
 
-.work-inner-one-third {
-  flex: 1;
-  box-sizing: border-box;
-  overflow: hidden;
+.work-card-1-3 {
+  height: calc((100% - 12px) / 3);
 }
 
-.work-inner-two-third {
-  flex: 2;
-  box-sizing: border-box;
-  overflow: hidden;
+.work-card-2-3 {
+  height: calc(2 * ((100% - 12px) / 3) + 6px);
 }
 
 .work-card {
   width: 100%;
-  height: 100%;
   background-color: rgba(15, 52, 96, 0.9);
   border: 1px solid #1a508b;
   border-radius: 8px;
@@ -160,6 +121,7 @@ watch(
 
 .full-card {
   width: 100%;
+  height: 100%;
 }
 
 .work-card:hover {
@@ -191,11 +153,17 @@ watch(
     padding: 6px;
     gap: 4px;
   }
-  .work-main-container {
+  .work-section {
     gap: 4px;
   }
-  .work-col {
-    gap: 4px;
+  .work-col-1-3 {
+    width: calc((100% - 8px) / 3);
+  }
+  .work-card-1-3 {
+    height: calc((100% - 8px) / 3);
+  }
+  .work-card-2-3 {
+    height: calc(2 * ((100% - 8px) / 3) + 4px);
   }
   .work-card {
     padding: 10px;
@@ -217,20 +185,23 @@ watch(
     gap: 6px;
     overflow-y: auto;
   }
-  .work-top-header {
-    height: auto;
-    min-height: 80px;
+  .work-section {
+    flex-direction: column;
+    height: auto !important;
+    min-height: 120px;
+    gap: 6px;
   }
-  .work-main-container {
+  .work-col-1-3 {
+    width: 100%;
+    height: auto;
+  }
+  .work-left-col, .work-middle-col, .work-right-col {
     flex-direction: column;
     height: auto;
-    min-height: calc(100% - 80px);
-    gap: 6px;
   }
-  .work-col {
-    width: 100%;
-    height: 33%;
-    gap: 6px;
+  .work-card-1-3, .work-card-2-3 {
+    height: 120px;
+    margin-bottom: 6px;
   }
   .work-card {
     padding: 8px;
@@ -242,10 +213,7 @@ watch(
     padding: 6px;
     gap: 4px;
   }
-  .work-main-container {
-    gap: 4px;
-  }
-  .work-col {
+  .work-section {
     gap: 4px;
   }
   .work-card {