大屏项目初始化

screen-vue/src/views/desktop/screen/Erp/components/ChartLine.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">月度销售额与增长率分析</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+
+const chartRef = ref(null)
+let chartInstance = null
+
+const initBarLineChart = () => {
+  const el = chartRef.value
+  if (!el) return
+
+  chartInstance = echarts.init(el)
+
+  const option = {
+    tooltip: { 
+      trigger: 'axis', 
+      axisPointer: { type: 'cross' },
+      backgroundColor: 'rgba(145, 200, 255, 0.9)',
+      borderColor: '#409EFF',
+      borderWidth: 1,
+      textStyle: { color: '#0a3b70' },
+      padding: [8, 12],
+      borderRadius: 6,
+      formatter: function(params) {
+        let res = `<b>${params[0].axisValue}</b>`
+        params.forEach(item => {
+          res += `<br/>${item.seriesName}：${item.value}${item.seriesName === '增长率' ? '%' : '万元'}`
+        })
+        return res
+      }
+    },
+    legend: { 
+      top: '10',
+      left: 'center',  
+      textStyle: { fontSize: 12, color: '#e0e6ff' }
+    },
+    grid: {
+      left: '4%',       
+      right: '4%',      
+      bottom: '10%',     
+      top: '12%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        axisLabel: { 
+          fontSize: 11,  
+          interval: 0,
+          color: '#b4c7e7'
+        },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        boundaryGap: true
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '销售额 (万元)',
+        nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
+        axisLabel: { formatter: '{value}', color: '#b4c7e7' },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } },
+        nameLocation: 'center',
+        nameGap: 30
+      },
+      {
+        type: 'value',
+        name: '增长率 (%)',
+        nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
+        axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } },
+        nameLocation: 'center',
+        nameGap: 30
+      }
+    ],
+    series: [
+      {
+        name: '销售额',
+        type: 'bar',
+        yAxisIndex: 0,
+        data: [120, 200, 150, 80, 70, 110, 130, 180, 160, 90, 100, 140],
+        itemStyle: { color: '#409EFF' },
+        barWidth: '15%'
+      },
+      {
+        name: '增长率',
+        type: 'line',
+        yAxisIndex: 1,
+        data: [12, 20, 15, 8, 7, 11, 13, 18, 16, 9, 10, 14],
+        itemStyle: { color: '#E6A23C' },
+        symbol: 'circle',
+        symbolSize: 5,
+        emphasis: { symbolSize: 7 },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(230, 162, 60, 0.3)' },
+            { offset: 1, color: 'rgba(230, 162, 60, 0.0)' }
+          ])
+        }
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+  window.addEventListener('resize', () => chartInstance.resize())
+}
+
+onMounted(() => initBarLineChart())
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+  margin: 0;
+  padding: 0;
+}
+
+:deep(.echarts-tooltip) {
+  background-color: rgba(145, 200, 255, 0.9) !important;
+  border-color: #409EFF !important;
+  color: #0a3b70 !important;
+  border-radius: 6px !important;
+}
+</style>

screen-vue/src/views/desktop/screen/Erp/components/ChartPic.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">年度销售额占比分析</span>
+    </div>
+    <div class="pie-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+
+const chartRef = ref(null)
+let chartInstance = null
+
+const initPieChart = () => {
+  const el = chartRef.value
+  if (!el) return
+
+  chartInstance = echarts.init(el)
+
+  const pieData = [
+    { value: 85, name: 'A-华东' },
+    { value: 78, name: 'A-华南' },
+    { value: 92, name: 'A-华北' },
+    { value: 65, name: 'B-华东' },
+    { value: 72, name: 'B-华南' },
+    { value: 88, name: 'B-华北' },
+    { value: 58, name: 'C-华东' },
+    { value: 66, name: 'C-华南' },
+    { value: 75, name: 'C-华北' },
+    { value: 48, name: 'D-华东' },
+    { value: 55, name: 'D-华南' },
+    { value: 62, name: 'D-华北' },
+    { value: 42, name: 'E-华东' },
+    { value: 49, name: 'E-华南' },
+    { value: 58, name: 'E-华北' }
+  ]
+
+  const colorList = [
+    '#409EFF', '#36CFc9', '#67C23A', '#E6A23C', '#F56C6C',
+    '#909399', '#722ED1', '#EB2F96', '#1890FF', '#52C41A',
+    '#FAAD14', '#F5222D', '#8C8C8C', '#A062D4', '#F7BA1E'
+  ]
+
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(145, 200, 255, 0.9)',
+      borderColor: '#409EFF',
+      borderWidth: 1,
+      textStyle: { color: '#0a3b70', fontSize: 12 },
+      padding: [10, 15],
+      borderRadius: 6,
+      formatter: function(params) {
+        return `分类：${params.name}<br/>销售额：${params.value}万元<br/>占比：${params.percent.toFixed(1)}%`
+      }
+    },
+    legend: {
+      orient: 'horizontal',
+      top: '10%',
+      left: 'center',
+      textStyle: { fontSize: 11, color: '#e0e6ff' },
+      itemWidth: 12,
+      itemHeight: 12,
+      itemGap: 10,
+      pageIconColor: '#409EFF',
+      pageTextStyle: { color: '#e0e6ff', fontSize: 10 },
+      pageButtonItemGap: 6,
+      pageButtonGap: 10,
+      type: 'scroll'
+    },
+    series: [
+      {
+        name: '销售额',
+        type: 'pie',
+        radius: ['30%', '55%'],
+        center: ['50%', '65%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 4,
+          borderColor: 'rgba(15, 52, 96, 0.9)',
+          borderWidth: 1
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          fontSize: 10,
+          color: '#e0e6ff',
+          formatter: '{b} {d}%',
+          overflow: 'truncate',
+          ellipsis: '...',
+          distance: 8
+        },
+        labelLine: {
+          show: true,
+          length: 12,
+          length2: 8,
+          lineStyle: { color: '#e0e6ff', width: 1 },
+          smooth: 0.2,
+          minTurnAngle: 45
+        },
+        data: pieData,
+        color: colorList
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+  window.addEventListener('resize', () => chartInstance.resize())
+}
+
+onMounted(() => initPieChart())
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+
+.pie-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+  margin: 0;
+  padding: 0;
+}
+
+:deep(.echarts-tooltip) {
+  background-color: rgba(145, 200, 255, 0.9) !important;
+  border-color: #409EFF !important;
+  color: #0a3b70 !important;
+  border-radius: 6px !important;
+}
+
+:deep(.echarts-legend-scroll) {
+  background-color: transparent !important;
+}
+:deep(.echarts-legend-scroll-text) {
+  color: #e0e6ff !important;
+  font-size: 11px !important;
+}
+:deep(.echarts-legend-scroll-button) {
+  border-color: #1a508b !important;
+}
+:deep(.echarts-legend-scroll-button-icon) {
+  color: #409EFF !important;
+}
+
+:deep(.ec-label) {
+  z-index: 9999 !important;
+  white-space: nowrap !important;
+  font-size: 10px !important;
+  color: #e0e6ff !important;
+}
+
+:deep(.ec-label-line) {
+  stroke: #e0e6ff !important;
+  stroke-width: 1px !important;
+}
+</style>

screen-vue/src/views/desktop/screen/Test/components/ChartBar.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">产品销售额排名分析</span>
+    </div>
+    <div class="rank-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+
+const chartRef = ref(null)
+let chartInstance = null
+
+const initRankChart = () => {
+  const el = chartRef.value
+  if (!el) return
+
+  chartInstance = echarts.init(el)
+
+  const salesData = [980, 1250, 1420, 1580, 1650, 1820, 2150, 2580]
+  const totalSales = salesData.reduce((sum, val) => sum + val, 0)
+  const percentData = salesData.map(val => ((val / totalSales) * 100).toFixed(1))
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      backgroundColor: 'rgba(145, 200, 255, 0.9)',
+      borderColor: '#409EFF',
+      borderWidth: 1,
+      textStyle: { color: '#0a3b70' },
+      padding: [8, 12],
+      borderRadius: 6,
+      formatter: function(params) {
+        const index = params[0].dataIndex
+        return `产品：${params[0].name}<br/>销售额：${params[0].value}万元<br/>占比：${percentData[index]}%`
+      }
+    },
+    legend: {
+      show: false
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '10%',
+      top: '15%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'value',
+        axisLabel: {
+          fontSize: 11,
+          color: '#b4c7e7'
+        },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        data: ['产品H', '产品G', '产品F', '产品E', '产品D', '产品C', '产品B', '产品A'],
+        axisLabel: {
+          fontSize: 11,
+          color: '#b4c7e7'
+        },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        inverse: false // 核心修改：关闭反转，第一名显示在底部
+      }
+    ],
+    series: [
+      {
+        name: '销售额',
+        type: 'bar',
+        barWidth: '15%',
+        data: salesData,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            { offset: 0, color: '#409EFF' },
+            { offset: 1, color: '#1890FF' }
+          ])
+        },
+        label: {
+          show: true,
+          position: 'right',
+          fontSize: 10,
+          color: '#e0e6ff',
+          formatter: function(params) {
+            const index = params.dataIndex
+            return `${params.value}万元 (${percentData[index]}%)`
+          }
+        }
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+  window.addEventListener('resize', () => chartInstance.resize())
+}
+
+onMounted(() => initRankChart())
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+
+.rank-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+  margin: 0;
+  padding: 0;
+}
+
+:deep(.echarts-tooltip) {
+  background-color: rgba(145, 200, 255, 0.9) !important;
+  border-color: #409EFF !important;
+  color: #0a3b70 !important;
+  border-radius: 6px !important;
+}
+</style>

screen-vue/src/views/desktop/screen/Test/components/ChartDjt.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">各产品线月度销售额构成</span>
+    </div>
+    <div class="stack-bar-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+
+const chartRef = ref(null)
+let chartInstance = null
+
+const initStackBarChart = () => {
+  const el = chartRef.value
+  if (!el) return
+
+  chartInstance = echarts.init(el)
+
+  const productAData = [320, 302, 301, 334, 390, 330, 310, 350, 340, 320, 380, 360]
+  const productBData = [120, 132, 101, 134, 90, 230, 180, 150, 170, 190, 210, 200]
+  const productCData = [220, 182, 191, 234, 290, 330, 280, 260, 290, 270, 250, 280]
+  
+  const totalData = productAData.map((val, index) => {
+    return val + productBData[index] + productCData[index]
+  })
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      backgroundColor: 'rgba(145, 200, 255, 0.9)',
+      borderColor: '#409EFF',
+      borderWidth: 1,
+      textStyle: { color: '#0a3b70', fontSize: 11 },
+      padding: [8, 12],
+      borderRadius: 6
+    },
+    legend: {
+      top: '10',
+      left: 'center',
+      textStyle: { fontSize: 12, color: '#e0e6ff' }
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '10%',
+      top: '15%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        axisLabel: { fontSize: 11, color: '#b4c7e7' },
+        axisLine: { lineStyle: { color: '#1a508b' } }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '销售额 (万元)',
+        nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
+        axisLabel: { color: '#b4c7e7' },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
+      }
+    ],
+    series: [
+      {
+        name: '产品A',
+        type: 'bar',
+        stack: 'total',
+        barWidth: '12%',
+        data: productAData,
+        itemStyle: { color: '#409EFF' }
+      },
+      {
+        name: '产品B',
+        type: 'bar',
+        stack: 'total',
+        barWidth: '12%',
+        data: productBData,
+        itemStyle: { color: '#36CFc9' }
+      },
+      {
+        name: '产品C',
+        type: 'bar',
+        stack: 'total',
+        barWidth: '12%',
+        data: productCData,
+        itemStyle: { color: '#67C23A' },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 10,
+          color: '#e0e6ff',
+          formatter: function(params) {
+            return totalData[params.dataIndex] + '万元'
+          }
+        }
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+  window.addEventListener('resize', () => chartInstance.resize())
+}
+
+onMounted(() => initStackBarChart())
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+
+.stack-bar-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+  margin: 0;
+  padding: 0;
+}
+
+:deep(.echarts-tooltip) {
+  background-color: rgba(145, 200, 255, 0.9) !important;
+  border-color: #409EFF !important;
+  color: #0a3b70 !important;
+  border-radius: 6px !important;
+}
+</style>

screen-vue/src/views/desktop/screen/Test/components/ChartDuo.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">多产品线月度趋势分析</span>
+    </div>
+    <div class="multi-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+
+const chartRef = ref(null)
+let chartInstance = null
+
+const initMultiLineChart = () => {
+  const el = chartRef.value
+  if (!el) return
+
+  chartInstance = echarts.init(el)
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(145, 200, 255, 0.9)',
+      borderColor: '#409EFF',
+      borderWidth: 1,
+      textStyle: { color: '#0a3b70' },
+      padding: [8, 12],
+      borderRadius: 6
+    },
+    legend: {
+      top: '10',
+      left: 'center',
+      textStyle: { fontSize: 12, color: '#e0e6ff' }
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '10%',
+      top: '15%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        axisLabel: { fontSize: 11, color: '#b4c7e7' },
+        axisLine: { lineStyle: { color: '#1a508b' } }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '销售额 (万元)',
+        nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
+        axisLabel: { color: '#b4c7e7' },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
+      }
+    ],
+    series: [
+      {
+        name: '产品线A',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 4,
+        data: [320, 450, 380, 520, 480, 610, 550, 720, 680, 850, 790, 920],
+        lineStyle: { width: 2, color: '#409EFF' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
+            { offset: 1, color: 'rgba(64, 158, 255, 0)' }
+          ])
+        },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 9,
+          color: '#409EFF',
+          formatter: '{c}'
+        }
+      },
+      {
+        name: '产品线B',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 4,
+        data: [210, 280, 240, 350, 310, 420, 380, 490, 450, 580, 520, 650],
+        lineStyle: { width: 2, color: '#36CFC9' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(54, 207, 201, 0.3)' },
+            { offset: 1, color: 'rgba(54, 207, 201, 0)' }
+          ])
+        },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 9,
+          color: '#36CFC9',
+          formatter: '{c}'
+        }
+      },
+      {
+        name: '产品线C',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 4,
+        data: [150, 220, 180, 290, 250, 360, 320, 430, 390, 500, 460, 570],
+        lineStyle: { width: 2, color: '#67C23A' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
+            { offset: 1, color: 'rgba(103, 194, 58, 0)' }
+          ])
+        },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 9,
+          color: '#67C23A',
+          formatter: '{c}'
+        }
+      },
+      {
+        name: '产品线D',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 4,
+        data: [90, 160, 120, 210, 180, 270, 230, 320, 290, 380, 340, 430],
+        lineStyle: { width: 2, color: '#E6A23C' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(230, 162, 60, 0.3)' },
+            { offset: 1, color: 'rgba(230, 162, 60, 0)' }
+          ])
+        },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 9,
+          color: '#E6A23C',
+          formatter: '{c}'
+        }
+      },
+      {
+        name: '产品线E',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 4,
+        data: [50, 110, 80, 150, 120, 190, 160, 230, 200, 270, 240, 310],
+        lineStyle: { width: 2, color: '#F56C6C' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(245, 108, 108, 0.3)' },
+            { offset: 1, color: 'rgba(245, 108, 108, 0)' }
+          ])
+        },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 9,
+          color: '#F56C6C',
+          formatter: '{c}'
+        }
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+  window.addEventListener('resize', () => chartInstance.resize())
+}
+
+onMounted(() => initMultiLineChart())
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+
+.multi-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+  margin: 0;
+  padding: 0;
+}
+
+:deep(.echarts-tooltip) {
+  background-color: rgba(145, 200, 255, 0.9) !important;
+  border-color: #409EFF !important;
+  color: #0a3b70 !important;
+  border-radius: 6px !important;
+}
+</style>

screen-vue/src/views/desktop/screen/Test/components/ChartLine.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">月度销售额与增长率分析</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+
+const chartRef = ref(null)
+let chartInstance = null
+
+const initBarLineChart = () => {
+  const el = chartRef.value
+  if (!el) return
+
+  chartInstance = echarts.init(el)
+
+  const option = {
+    tooltip: { 
+      trigger: 'axis', 
+      axisPointer: { type: 'cross' },
+      backgroundColor: 'rgba(145, 200, 255, 0.9)',
+      borderColor: '#409EFF',
+      borderWidth: 1,
+      textStyle: { color: '#0a3b70' },
+      padding: [8, 12],
+      borderRadius: 6,
+      formatter: function(params) {
+        let res = `<b>${params[0].axisValue}</b>`
+        params.forEach(item => {
+          res += `<br/>${item.seriesName}：${item.value}${item.seriesName === '增长率' ? '%' : '万元'}`
+        })
+        return res
+      }
+    },
+    legend: { 
+      top: '10',
+      left: 'center',  
+      textStyle: { fontSize: 12, color: '#e0e6ff' }
+    },
+    grid: {
+      left: '5%',       
+      right: '5%',      
+      bottom: '10%',     
+      top: '15%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        axisLabel: { 
+          fontSize: 11,  
+          interval: 0,
+          color: '#b4c7e7'
+        },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        boundaryGap: true
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '销售额 (万元)',
+        nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
+        axisLabel: { formatter: '{value}', color: '#b4c7e7' },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } },
+        nameLocation: 'end',
+        nameGap: 10,
+        nameRotate: 0
+      },
+      {
+        type: 'value',
+        name: '增长率 (%)',
+        nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
+        axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } },
+        nameLocation: 'end',
+        nameGap: 10,
+        nameRotate: 0
+      }
+    ],
+    series: [
+      {
+        name: '销售额',
+        type: 'bar',
+        yAxisIndex: 0,
+        data: [120, 200, 150, 80, 70, 110, 130, 180, 160, 90, 100, 140],
+        itemStyle: { color: '#409EFF' },
+        barWidth: '15%',
+        // 柱子顶部标签
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 10,
+          color: '#fff'
+        }
+      },
+      {
+        name: '增长率',
+        type: 'line',
+        yAxisIndex: 1,
+        data: [12, 20, 15, 8, 7, 11, 13, 18, 16, 9, 10, 14],
+        smooth: true,
+        lineStyle: { width: 1.5 },
+        symbol: 'circle',
+        symbolSize: 5,
+        emphasis: { symbolSize: 7 },
+        // 折线标签
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 10,
+          color: '#E6A23C',
+          formatter: '{c}%'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(230, 162, 60, 0.3)' },
+            { offset: 1, color: 'rgba(230, 162, 60, 0.0)' }
+          ])
+        }
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+  window.addEventListener('resize', () => chartInstance.resize())
+}
+
+onMounted(() => initBarLineChart())
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+  margin: 0;
+  padding: 0;
+}
+
+:deep(.echarts-tooltip) {
+  background-color: rgba(145, 200, 255, 0.9) !important;
+  border-color: #409EFF !important;
+  color: #0a3b70 !important;
+  border-radius: 6px !important;
+}
+</style>

screen-vue/src/views/desktop/screen/Test/components/ChartPic.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">年度销售额占比分析</span>
+    </div>
+    <div class="pie-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+
+const chartRef = ref(null)
+let chartInstance = null
+
+const initPieChart = () => {
+  const el = chartRef.value
+  if (!el) return
+
+  chartInstance = echarts.init(el)
+
+  const pieData = [
+    { value: 85, name: 'A-华东' },
+    { value: 78, name: 'A-华南' },
+    { value: 92, name: 'A-华北' },
+    { value: 65, name: 'B-华东' },
+    { value: 72, name: 'B-华南' },
+    { value: 88, name: 'B-华北' },
+    { value: 58, name: 'C-华东' }
+  ]
+
+  const colorList = [
+    '#409EFF', '#36CFc9', '#67C23A', '#E6A23C', '#F56C6C',
+    '#909399', '#722ED1', '#EB2F96', '#1890FF', '#52C41A',
+    '#FAAD14', '#F5222D', '#8C8C8C', '#A062D4', '#F7BA1E'
+  ]
+
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(145, 200, 255, 0.9)',
+      borderColor: '#409EFF',
+      borderWidth: 1,
+      textStyle: { color: '#0a3b70', fontSize: 12 },
+      padding: [10, 15],
+      borderRadius: 6,
+      formatter: function(params) {
+        return `分类：${params.name}<br/>销售额：${params.value}万元<br/>占比：${params.percent.toFixed(1)}%`
+      }
+    },
+    legend: {
+      orient: 'horizontal',
+      top: '10%',
+      left: 'center',
+      textStyle: { fontSize: 11, color: '#e0e6ff' },
+      itemWidth: 12,
+      itemHeight: 12,
+      itemGap: 10,
+      pageIconColor: '#409EFF',
+      pageTextStyle: { color: '#e0e6ff', fontSize: 10 },
+      pageButtonItemGap: 6,
+      pageButtonGap: 10,
+      type: 'scroll'
+    },
+    series: [
+      {
+        name: '销售额',
+        type: 'pie',
+        radius: ['30%', '55%'],
+        center: ['50%', '65%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 4,
+          borderColor: 'rgba(15, 52, 96, 0.9)',
+          borderWidth: 1
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          fontSize: 10,
+          color: '#e0e6ff',
+          formatter: '{b} {d}%',
+          overflow: 'truncate',
+          ellipsis: '...',
+          distance: 8
+        },
+        labelLine: {
+          show: true,
+          length: 12,
+          length2: 8,
+          lineStyle: { color: '#e0e6ff', width: 1 },
+          smooth: 0.2,
+          minTurnAngle: 45
+        },
+        data: pieData,
+        color: colorList
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+  window.addEventListener('resize', () => chartInstance.resize())
+}
+
+onMounted(() => initPieChart())
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+
+.pie-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+  margin: 0;
+  padding: 0;
+}
+
+:deep(.echarts-tooltip) {
+  background-color: rgba(145, 200, 255, 0.9) !important;
+  border-color: #409EFF !important;
+  color: #0a3b70 !important;
+  border-radius: 6px !important;
+}
+
+:deep(.echarts-legend-scroll) {
+  background-color: transparent !important;
+}
+:deep(.echarts-legend-scroll-text) {
+  color: #e0e6ff !important;
+  font-size: 11px !important;
+}
+:deep(.echarts-legend-scroll-button) {
+  border-color: #1a508b !important;
+}
+:deep(.echarts-legend-scroll-button-icon) {
+  color: #409EFF !important;
+}
+
+:deep(.ec-label) {
+  z-index: 9999 !important;
+  white-space: nowrap !important;
+  font-size: 10px !important;
+  color: #e0e6ff !important;
+}
+
+:deep(.ec-label-line) {
+  stroke: #e0e6ff !important;
+  stroke-width: 1px !important;
+}
+</style>

screen-vue/src/views/desktop/screen/Test/components/ChartTwo.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">月度收支与占比分析</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+
+const chartRef = ref(null)
+let chartInstance = null
+
+const initBarLineChart = () => {
+  const el = chartRef.value
+  if (!el) return
+
+  chartInstance = echarts.init(el)
+
+  // 收支数据
+  const incomeData = [1200, 2000, 1500, 800, 700, 1100, 1300, 1800, 1600, 900, 1000, 1400]
+  const expenseData = [800, 1500, 1000, 600, 500, 800, 900, 1200, 1100, 700, 800, 950]
+  // 计算支出占收入的比例（保留1位小数）
+  const ratioData = incomeData.map((income, index) => {
+    const expense = expenseData[index]
+    return income === 0 ? 0 : ((expense / income) * 100).toFixed(1)
+  })
+
+  const option = {
+    tooltip: { 
+      trigger: 'axis', 
+      axisPointer: { type: 'cross' },
+      backgroundColor: 'rgba(145, 200, 255, 0.9)',
+      borderColor: '#409EFF',
+      borderWidth: 1,
+      textStyle: { color: '#0a3b70' },
+      padding: [8, 12],
+      borderRadius: 6,
+      formatter: function(params) {
+        let res = `<b>${params[0].axisValue}</b>`
+        params.forEach(item => {
+          const unit = item.seriesName === '支出占收入比' ? '%' : '万元'
+          res += `<br/>${item.seriesName}：${item.value}${unit}`
+        })
+        return res
+      }
+    },
+    legend: { 
+      top: '10',
+      left: 'center',  
+      textStyle: { fontSize: 12, color: '#e0e6ff' }
+    },
+    grid: {
+      left: '5%',       
+      right: '5%',      
+      bottom: '10%',     
+      top: '15%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        axisLabel: { 
+          fontSize: 11,  
+          interval: 0,
+          color: '#b4c7e7'
+        },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        boundaryGap: true
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '金额 (万元)',
+        nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
+        axisLabel: { formatter: '{value}', color: '#b4c7e7' },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } },
+        nameLocation: 'end',
+        nameGap: 10,
+        nameRotate: 0
+      },
+      {
+        type: 'value',
+        name: '占比 (%)',
+        nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
+        axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } },
+        nameLocation: 'end',
+        nameGap: 10,
+        nameRotate: 0,
+        min: 0,
+        max: 100
+      }
+    ],
+    series: [
+      {
+        name: '收入',
+        type: 'bar',
+        yAxisIndex: 0,
+        data: incomeData,
+        itemStyle: { color: '#67C23A' }, // 绿色代表收入
+        barWidth: '12%', // 适配双柱宽度
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 10,
+          color: '#fff'
+        }
+      },
+      {
+        name: '支出',
+        type: 'bar',
+        yAxisIndex: 0,
+        data: expenseData,
+        itemStyle: { color: '#F56C6C' }, // 红色代表支出
+        barWidth: '12%',
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 10,
+          color: '#fff'
+        }
+      },
+      {
+        name: '支出占收入比',
+        type: 'line',
+        yAxisIndex: 1,
+        data: ratioData,
+        smooth: true,
+        lineStyle: { width: 1.5, color: '#409EFF' }, // 蓝色代表占比曲线
+        symbol: 'circle',
+        symbolSize: 5,
+        emphasis: { symbolSize: 7 },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 10,
+          color: '#409EFF',
+          formatter: '{c}%'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
+            { offset: 1, color: 'rgba(64, 158, 255, 0.0)' }
+          ])
+        }
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+  window.addEventListener('resize', () => chartInstance.resize())
+}
+
+onMounted(() => initBarLineChart())
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: '#409EFF';
+  letter-spacing: 0.5px;
+}
+
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+  margin: 0;
+  padding: 0;
+}
+
+:deep(.echarts-tooltip) {
+  background-color: rgba(145, 200, 255, 0.9) !important;
+  border-color: #409EFF !important;
+  color: #0a3b70 !important;
+  border-radius: 6px !important;
+}
+</style>

screen-vue/src/views/desktop/screen/Test/components/ChartYbp.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">年度销售额完成率</span>
+    </div>
+    <div class="gauge-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+
+const chartRef = ref(null)
+let chartInstance = null
+
+const initGaugeChart = () => {
+  const el = chartRef.value
+  if (!el) return
+
+  chartInstance = echarts.init(el)
+
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(145, 200, 255, 0.9)',
+      borderColor: '#409EFF',
+      borderWidth: 1,
+      textStyle: { color: '#0a3b70', fontSize: 11 },
+      padding: [8, 12],
+      borderRadius: 6,
+      formatter: '完成率：{c}%<br/>目标：1500万元<br/>已完成：1275万元'
+    },
+    series: [
+      {
+        name: '完成率',
+        type: 'gauge',
+        startAngle: 180,
+        endAngle: 0,
+        min: 0,
+        max: 100,
+        splitNumber: 10,
+        radius: '80%',
+        center: ['50%', '70%'],
+        axisLine: {
+          lineStyle: {
+            width: 15,
+            color: [
+              [0.3, '#F56C6C'],
+              [0.7, '#E6A23C'],
+              [1, '#409EFF']
+            ]
+          }
+        },
+        splitLine: {
+          length: 15,
+          lineStyle: {
+            color: '#b4c7e7',
+            width: 2
+          }
+        },
+        axisTick: {
+          length: 8,
+          lineStyle: {
+            color: '#b4c7e7',
+            width: 1
+          }
+        },
+        axisLabel: {
+          color: '#e0e6ff',
+          fontSize: 10,
+          distance: 20
+        },
+        pointer: {
+          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
+          length: '85%',
+          width: 8,
+          color: '#fff',
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowBlur: 5
+        },
+        title: {
+          fontSize: 14,
+          color: '#e0e6ff',
+          offsetCenter: [0, '50%']
+        },
+        detail: {
+          fontSize: 16,
+          color: '#409EFF',
+          fontWeight: 600,
+          offsetCenter: [0, '20%'],
+          formatter: '{value}%'
+        },
+        data: [{ value: 85, name: '销售额完成率' }]
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+  window.addEventListener('resize', () => chartInstance.resize())
+}
+
+onMounted(() => initGaugeChart())
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+
+.gauge-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+  margin: 0;
+  padding: 0;
+}
+
+:deep(.echarts-tooltip) {
+  background-color: rgba(145, 200, 255, 0.9) !important;
+  border-color: #409EFF !important;
+  color: #0a3b70 !important;
+  border-radius: 6px !important;
+}
+</style>

screen-vue/src/views/desktop/screen/Test/index.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="work-layout-container">
+    <div class="work-section work-top-header">
+      <div class="work-card full-card">
+        <h3>Work页面顶部区域 (10%)</h3>
+        <p>可放置工作概览、筛选条件、操作按钮等</p>
+      </div>
+    </div>
+
+    <div class="work-main-container">
+      <div class="work-col">
+        <div class="work-inner-section work-inner-one-third">
+          <div class="work-card">
+            <CahrtLine />
+          </div>
+        </div>
+        <div class="work-inner-section work-inner-one-third">
+          <div class="work-card">
+            <ChartPic />
+          </div>
+        </div>
+        <div class="work-inner-section work-inner-one-third">
+          <div class="work-card">
+            <ChartBar />
+          </div>
+        </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">
+            <ChartYbp />
+          </div>
+        </div>
+      </div>
+
+      <div class="work-col">
+        <div class="work-inner-section work-inner-one-third">
+          <div class="work-card">
+            <ChartDjt />
+          </div>
+        </div>
+        <div class="work-inner-section work-inner-one-third">
+          <div class="work-card">
+            <ChartTwo />
+          </div>
+        </div>
+        <div class="work-inner-section work-inner-one-third">
+          <div class="work-card">
+            <ChartDuo />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+	import CahrtLine from './components/ChartLine.vue';
+	import ChartPic from './components/ChartPic.vue';
+	import ChartBar from './components/ChartBar.vue';
+	import ChartYbp from './components/ChartYbp.vue';
+	import ChartDjt from './components/ChartDjt.vue';
+	import ChartTwo from './components/ChartTwo.vue';
+	import ChartDuo from './components/ChartDuo.vue';
+</script>
+
+<style scoped>
+.work-layout-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px;
+  margin: 0 !important;
+  box-sizing: border-box;
+  background-color: transparent;
+  overflow: hidden;
+}
+
+.work-top-header {
+  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-col {
+  flex: 1;
+  height: 100%;
+  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-inner-two-third {
+  flex: 2;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.work-card {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(15, 52, 96, 0.9);
+  border: 1px solid #1a508b;
+  border-radius: 8px;
+  padding: 2px;
+  box-sizing: border-box;
+  display: block;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #e0e6ff;
+  backdrop-filter: blur(4px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  min-height: 0;
+}
+
+.full-card {
+  width: 100%;
+}
+
+.work-card:hover {
+  box-shadow: 0 4px 12px rgba(60, 156, 255, 0.3);
+  border-color: #3c9cff;
+  transition: all 0.3s ease;
+}
+
+.work-card h3 {
+  font-size: 16px;
+  margin-bottom: 8px;
+  letter-spacing: 1px;
+  background: #3c9cff;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 600;
+}
+
+.work-card p {
+  font-size: 13px;
+  opacity: 0.75;
+  color: #b4c7e7;
+  text-align: center;
+  line-height: 1.5;
+}
+
+@media (max-width: 1600px) {
+  .work-layout-container {
+    padding: 6px;
+    gap: 4px;
+  }
+  .work-main-container {
+    gap: 4px;
+  }
+  .work-col {
+    gap: 4px;
+  }
+  .work-card {
+    padding: 10px;
+  }
+  .work-card h3 {
+    font-size: 14px;
+  }
+  .work-card p {
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 768px) {
+  .work-layout-container {
+    flex-direction: column;
+    height: auto;
+    min-height: 100%;
+    padding: 6px;
+    gap: 6px;
+    overflow-y: auto;
+  }
+  .work-top-header {
+    height: auto;
+    min-height: 80px;
+  }
+  .work-main-container {
+    flex-direction: column;
+    height: auto;
+    min-height: calc(100% - 80px);
+    gap: 6px;
+  }
+  .work-col {
+    width: 100%;
+    height: 33%;
+    gap: 6px;
+  }
+  .work-card {
+    padding: 8px;
+  }
+}
+
+@media (max-height: 900px) {
+  .work-layout-container {
+    padding: 6px;
+    gap: 4px;
+  }
+  .work-main-container {
+    gap: 4px;
+  }
+  .work-col {
+    gap: 4px;
+  }
+  .work-card {
+    padding: 8px;
+  }
+  .work-card h3 {
+    font-size: 14px;
+    margin-bottom: 6px;
+  }
+  .work-card p {
+    font-size: 12px;
+  }
+}
+</style>

src/main/java/com/mini/mybigscreen/biz/controller/HomeUserController.java

@@ -0,0 +1,18 @@
+package com.mini.mybigscreen.biz.controller;
+
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+/**
+ * <p>
+ *  前端控制器
+ * </p>
+ *
+ * @author gaoxq
+ * @since 2026-02-25
+ */
+@RestController
+@RequestMapping("/biz/homeUser")
+public class HomeUserController {
+
+}

src/main/java/com/mini/mybigscreen/biz/domain/HomeUser.java

@@ -0,0 +1,65 @@
+package com.mini.mybigscreen.biz.domain;
+
+import com.baomidou.mybatisplus.annotation.IdType;
+import com.baomidou.mybatisplus.annotation.TableField;
+import com.baomidou.mybatisplus.annotation.TableId;
+import com.baomidou.mybatisplus.annotation.TableName;
+import java.io.Serializable;
+import java.time.LocalDateTime;
+import lombok.Getter;
+import lombok.Setter;
+
+/**
+ * <p>
+ * 
+ * </p>
+ *
+ * @author gaoxq
+ * @since 2026-02-25
+ */
+@Getter
+@Setter
+@TableName("biz_home_user")
+public class HomeUser implements Serializable {
+
+    private static final long serialVersionUID = 1L;
+
+    @TableField("create_time")
+    private LocalDateTime createTime;
+
+    @TableId(value = "user_id", type = IdType.AUTO)
+    private String userId;
+
+    @TableField("user_name")
+    private String userName;
+
+    @TableField("password")
+    private String password;
+
+    @TableField("uname")
+    private String uname;
+
+    /**
+     * 租户id
+     */
+    @TableField("f_tenant_id")
+    private String fTenantId;
+
+    /**
+     * 流程id
+     */
+    @TableField("f_flow_id")
+    private String fFlowId;
+
+    /**
+     * 流程任务主键
+     */
+    @TableField("f_flow_task_id")
+    private String fFlowTaskId;
+
+    /**
+     * 流程任务状态
+     */
+    @TableField("f_flow_state")
+    private Integer fFlowState;
+}

src/main/java/com/mini/mybigscreen/biz/mapper/HomeUserMapper.java

@@ -0,0 +1,16 @@
+package com.mini.mybigscreen.biz.mapper;
+
+import com.mini.mybigscreen.biz.domain.HomeUser;
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+
+/**
+ * <p>
+ *  Mapper 接口
+ * </p>
+ *
+ * @author gaoxq
+ * @since 2026-02-25
+ */
+public interface HomeUserMapper extends BaseMapper<HomeUser> {
+
+}

src/main/java/com/mini/mybigscreen/biz/service/HomeUserService.java

@@ -0,0 +1,16 @@
+package com.mini.mybigscreen.biz.service;
+
+import com.mini.mybigscreen.biz.domain.HomeUser;
+import com.baomidou.mybatisplus.extension.service.IService;
+
+/**
+ * <p>
+ *  服务类
+ * </p>
+ *
+ * @author gaoxq
+ * @since 2026-02-25
+ */
+public interface HomeUserService extends IService<HomeUser> {
+
+}

src/main/java/com/mini/mybigscreen/biz/service/impl/HomeUserServiceImpl.java

@@ -0,0 +1,20 @@
+package com.mini.mybigscreen.biz.service.impl;
+
+import com.mini.mybigscreen.biz.domain.HomeUser;
+import com.mini.mybigscreen.biz.mapper.HomeUserMapper;
+import com.mini.mybigscreen.biz.service.HomeUserService;
+import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import org.springframework.stereotype.Service;
+
+/**
+ * <p>
+ *  服务实现类
+ * </p>
+ *
+ * @author gaoxq
+ * @since 2026-02-25
+ */
+@Service
+public class HomeUserServiceImpl extends ServiceImpl<HomeUserMapper, HomeUser> implements HomeUserService {
+
+}

src/main/resources/mapper/HomeUserMapper.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.mini.mybigscreen.biz.mapper.HomeUserMapper">
+
+    <!-- 通用查询映射结果 -->
+    <resultMap id="BaseResultMap" type="com.mini.mybigscreen.biz.domain.HomeUser">
+        <id column="user_id" property="userId" />
+        <result column="create_time" property="createTime" />
+        <result column="user_name" property="userName" />
+        <result column="password" property="password" />
+        <result column="uname" property="uname" />
+        <result column="f_tenant_id" property="fTenantId" />
+        <result column="f_flow_id" property="fFlowId" />
+        <result column="f_flow_task_id" property="fFlowTaskId" />
+        <result column="f_flow_state" property="fFlowState" />
+    </resultMap>
+
+    <!-- 通用查询结果列 -->
+    <sql id="Base_Column_List">
+        create_time, user_id, user_name, password, uname, f_tenant_id, f_flow_id, f_flow_task_id, f_flow_state
+    </sql>
+
+</mapper>