大屏项目初始化

2026-02-26 21:58:09 +08:00
parent 28cb663bf3
commit 36c8df2bc4
12 changed files with 410 additions and 400 deletions
--- a/screen-vue/src/views/Login.vue
+++ b/screen-vue/src/views/Login.vue
@@ -64,15 +64,15 @@ const isLoading = ref(false)

 const handleLogin = async () => {
  try {
-    await loginFormRef.value.validate()
-    isLoading.value = true
-    const res = await login(loginForm.value)
-    localStorage.setItem('token', res.token)
-    localStorage.setItem('username', res.username)
-    ElMessage.success('登录成功！')
+    await loginFormRef.value.validate();
+    isLoading.value = true;
+    const res = await login(loginForm.value);
+    localStorage.setItem('token', res.token);
+    localStorage.setItem('userName', res.userName);
+    ElMessage.success('登录成功！');
    setTimeout(() => {
      router.push('/dashboard');
-    }, 3000)
+    }, 3000);
  } catch (error) {
    ElMessage.error(res.msg);
  }finally{
--- a/screen-vue/src/views/desktop/index.vue
+++ b/screen-vue/src/views/desktop/index.vue
@@ -18,13 +18,10 @@
        </div>
        <div class="query-group">
          <el-date-picker
-            type="daterange" 
+            type="year" 
            v-model="queryDate"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
            popper-class="dark-date-popper"
-            value-format="YYYY-MM-DD"
+            value-format="YYYY"
          ></el-date-picker>
          <button class="query-btn" @click="handleQuery">查询</button>
        </div>
@@ -33,49 +30,60 @@

    <main class="screen-content">
      <div v-if="activeTab === 'home'" class="screen-page">
-        <HomeIndex />
+        <HomeIndex :formParams="FormValues" />
      </div>
      <div v-else-if="activeTab === 'work'" class="screen-page">
-        <WorkIndex />
+        <WorkIndex :formParams="FormValues" />
      </div>
+	  <div v-else-if="activeTab === 'test'" class="screen-page">
+	    <TestIndex :formParams="FormValues" />
+	  </div>
      <div v-else-if="activeTab === 'erp'" class="screen-page">
-        <ErpIndex />
+        <ErpIndex :formParams="FormValues" />
      </div>
    </main>
  </div>
 </template>

 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import HomeIndex from './screen/Home/index.vue';
 import ErpIndex from './screen/Erp/index.vue';
 import WorkIndex from './screen/Work/index.vue';
+import TestIndex from './screen/Test/index.vue';

 const screenTitle = ref('数字化可视化');
+const currentYear = new Date().getFullYear().toString();

 const FormValues = ref({
-  startDate: "",
-  endDate: ""
+  reqParam: currentYear
 });

 const allTabs = [
  { key: 'home', name: '首页' },
  { key: 'work', name: '工作' },
+  { key: 'test', name: '测试' },
  { key: 'erp', name: '财务' },
 ]

 const activeTab = ref('home')
-const queryDate = ref('')
+const queryDate = ref();

 const switchTab = (key) => {
  activeTab.value = key
 }

 const handleQuery = () => {
-  const [startDate, endDate] = queryDate.value || [];
-  FormValues.value.startDate = startDate || "";
-  FormValues.value.endDate = endDate || "";
+	FormValues.value.reqParam = queryDate.value;
 }
+
+const initApp = () =>{
+	queryDate.value = currentYear;
+}
+
+onMounted(() => {
+  initApp();
+});
 </script>

 <style>
@@ -247,7 +255,6 @@ const handleQuery = () => {
 :deep(.el-input__inner) {
  background-color: #0f3460 !important;
  color: #e0e6ff !important;
-  border: 1px solid #1a508b !important;
  box-shadow: none !important;
 }

--- a/screen-vue/src/views/desktop/screen/Erp/components/ChartLine.vue
+++ b/screen-vue/src/views/desktop/screen/Erp/components/ChartLine.vue
@@ -1,163 +0,0 @@
-<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>
--- a/screen-vue/src/views/desktop/screen/Erp/components/ChartPic.vue
+++ b/screen-vue/src/views/desktop/screen/Erp/components/ChartPic.vue
@@ -1,183 +0,0 @@
-<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>
--- a/screen-vue/src/views/desktop/screen/Erp/index.vue
+++ b/screen-vue/src/views/desktop/screen/Erp/index.vue
@@ -10,20 +10,17 @@
    <div class="erp-section erp-upper-section">
      <div class="erp-col erp-col-1-3">
        <div class="erp-card">
-          <h3>上部列1</h3>
-          <p>ERP数据面板1</p>
+          
        </div>
      </div>
      <div class="erp-col erp-col-1-3">
        <div class="erp-card">
-          <h3>上部列2</h3>
-          <p>ERP数据面板2</p>
+          
        </div>
      </div>
      <div class="erp-col erp-col-1-3">
        <div class="erp-card">
-          <h3>上部列3</h3>
-          <p>ERP数据面板3</p>
+          <ChartV03 :formParams="props.formParams" />
        </div>
      </div>
    </div>
@@ -33,22 +30,19 @@
        <div class="erp-inner-layout">
          <div class="erp-col erp-col-1-2">
            <div class="erp-card">
-              <h3>中部左1列</h3>
-              <p>ERP明细1</p>
+              <ChartV04 :formParams="props.formParams" />
            </div>
          </div>
          <div class="erp-col erp-col-1-2">
            <div class="erp-card">
-              <h3>中部左2列</h3>
-              <p>ERP明细2</p>
+              <ChartV05 :formParams="props.formParams" />
            </div>
          </div>
        </div>
      </div>
      <div class="erp-col erp-col-1-2">
        <div class="erp-card">
-          <h3>中部右侧列</h3>
-          <p>ERP核心数据展示</p>
+          <ChartV01 :formParams="props.formParams" />
        </div>
      </div>
    </div>
@@ -58,22 +52,19 @@
        <div class="erp-inner-layout">
          <div class="erp-col erp-col-1-2">
            <div class="erp-card">
-              <h3>下部左1列</h3>
-              <p>ERP统计1</p>
+              <ChartV06 :formParams="props.formParams" />
            </div>
          </div>
          <div class="erp-col erp-col-1-2">
            <div class="erp-card">
-              <h3>下部左2列</h3>
-              <p>ERP统计2</p>
+              <ChartV02 :formParams="props.formParams" />
            </div>
          </div>
        </div>
      </div>
      <div class="erp-col erp-col-1-2">
        <div class="erp-card">
-          <h3>下部右侧列</h3>
-          <p>ERP报表/图表展示</p>
+          <ChartV07 :formParams="props.formParams" />
        </div>
      </div>
    </div>
@@ -81,6 +72,29 @@
 </template>

 <script setup>
+import { ref, watch } from 'vue';
+import ChartV01 from './components/ChartV01.vue';
+import ChartV02 from './components/ChartV02.vue';
+import ChartV03 from './components/ChartV03.vue';
+import ChartV04 from './components/ChartV04.vue';
+import ChartV05 from './components/ChartV05.vue';
+import ChartV06 from './components/ChartV06.vue';
+import ChartV07 from './components/ChartV07.vue';
+
+const props = defineProps({
+  formParams: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+watch(
+  () => props.formParams,
+  { 
+    deep: true,
+    immediate: true
+  }
+);
 </script>

 <style scoped>
@@ -143,9 +157,9 @@
  background-color: rgba(15, 52, 96, 0.9);
  border: 1px solid #1a508b;
  border-radius: 8px;
-  padding: 12px;
+  padding: 2px;
  box-sizing: border-box;
-  display: flex;
+  display: block;
  flex-direction: column;
  justify-content: center;
  align-items: center;
--- a/screen-vue/src/views/desktop/screen/Home/index.vue
+++ b/screen-vue/src/views/desktop/screen/Home/index.vue
@@ -17,6 +17,35 @@
 </template>

 <script setup>
+import { ref, watch } from 'vue';
+
+const currentYear = new Date().getFullYear().toString();
+
+const FormValues = ref({
+  reqParam: currentYear
+});
+
+const initApp = (params) =>{
+	FormValues.value.reqParam = params;
+}
+
+const props = defineProps({
+  formParams: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+watch(
+  () => props.formParams,
+  (newVal) => {
+	  initApp(newVal);
+  },
+  { 
+    deep: true,
+    immediate: true
+  }
+);
 </script>

 <style scoped>
@@ -87,7 +116,7 @@
  color: #e0e6ff;
  text-align: center;
  height: 100%;
-  display: flex;
+  display: block;
  flex-direction: column;
  justify-content: center;
  align-items: center;
--- a/screen-vue/src/views/desktop/screen/Work/index.vue
+++ b/screen-vue/src/views/desktop/screen/Work/index.vue
@@ -130,9 +130,9 @@
  background-color: rgba(15, 52, 96, 0.9);
  border: 1px solid #1a508b;
  border-radius: 8px;
-  padding: 12px;
+  padding: 2px;
  box-sizing: border-box;
-  display: flex;
+  display: block;
  flex-direction: column;
  justify-content: center;
  align-items: center;