库存总览初版大屏

src/components/DataVLayout.vue

@@ -0,0 +1,117 @@
+<template>
+  <dv-full-screen-container class="datav-container" auto-fit>
+    <div class="datav-wrapper">
+      <!-- 顶部标题栏 -->
+      <div class="datav-header">
+        <dv-decoration-10 style="width: 400px; height: 40px" />
+        <div class="header-title">
+          <dv-decoration-9 :reverse="true" />
+          <span class="title-text">{{ title || '数据可视化大屏' }}</span>
+          <dv-decoration-9 />
+        </div>
+        <dv-decoration-10 style="width: 400px; height: 40px" :reverse="true" />
+      </div>
+
+      <!-- 左侧装饰 -->
+      <div class="decoration decoration-left">
+        <dv-decoration-3 style="width: 200px; height: 100%" />
+      </div>
+
+      <!-- 右侧装饰 -->
+      <div class="decoration decoration-right">
+        <dv-decoration-3 style="width: 200px; height: 100%" :reverse="true" />
+      </div>
+
+      <!-- 主体内容区域 -->
+      <div class="datav-main">
+        <slot></slot>
+      </div>
+
+      <!-- 底部装饰 -->
+      <div class="datav-footer">
+        <dv-decoration-2 style="width: 100%; height: 30px" />
+      </div>
+    </div>
+  </dv-full-screen-container>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.datav-container {
+  width: 100%;
+  height: 100%;
+  background: #0a1428;
+  overflow: hidden;
+}
+
+.datav-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.datav-header {
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+
+  .header-title {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+
+    .title-text {
+      font-size: 32px;
+      font-weight: bold;
+      color: #00d4ff;
+      text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+      letter-spacing: 8px;
+      white-space: nowrap;
+    }
+  }
+}
+
+.decoration {
+  position: absolute;
+  top: 80px;
+  bottom: 30px;
+  width: 15px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.decoration-left {
+  left: 0;
+}
+
+.decoration-right {
+  right: 0;
+}
+
+.datav-main {
+  flex: 1;
+  padding: 10px 30px;
+  overflow: hidden;
+  position: relative;
+  z-index: 2;
+}
+
+.datav-footer {
+  height: 30px;
+  flex-shrink: 0;
+}
+</style>

src/layout/components/AppMain.vue

@@ -14,9 +14,9 @@
 <style lang="scss" scoped>
 .app-main {
   flex: 1;
-  overflow-y: auto;
+  overflow: hidden;
-  background: #050a15;
+  background: transparent;
-  padding: 16px;
+  padding: 0;
   box-sizing: border-box;
   min-height: 0;
   width: 100%;

src/layout/components/Navbar/index.vue

@@ -2,7 +2,6 @@
   <nav class="navbar">
     <div class="navbar-left">
       <hamburger @toggle-click="toggleSideBar" />
-      <span class="navbar-title">{{ title }}</span>
     </div>
     <div class="navbar-right">
       <button class="action-btn refresh-btn" @click="handleRefresh" title="刷新数据">
@@ -54,23 +53,23 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .navbar {
-  height: 60px;
+  height: 50px;
-  background: linear-gradient(90deg, rgba(0, 168, 204, 0.95) 0%, rgba(0, 212, 255, 0.9) 50%, rgba(0, 168, 204, 0.95) 100%);
+  background: linear-gradient(90deg, #00a8cc 0%, #00d4ff 50%, #00a8cc 100%);
   width: 100%;
   flex-shrink: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 24px;
+  padding: 0 16px;
   box-sizing: border-box;
-  border-bottom: 2px solid rgba(0, 212, 255, 0.4);
+  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
-  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.2);
 }
 
 .navbar-left {
   display: flex;
   align-items: center;
   gap: 20px;
+  width: 200px;
 }
 
 .navbar-title {

src/layout/components/Sidebar/index.vue

@@ -39,7 +39,6 @@ const activeMenu = computed(() => route.path)
 
 const iconMap = {
   'monitor': Monitor,
-  'example': PieChart,
   'order': Document,
   'cost': PieChart,
   'energy': Monitor,
@@ -53,7 +52,6 @@ const getIcon = (iconName) => {
 }
 
 const menuItems = [
-  { path: '/dashboard/demo', meta: { title: '示例大屏', icon: 'example' } },
   { path: '/dashboard/order', meta: { title: '订单大屏', icon: 'order' } },
   { path: '/dashboard/cost', meta: { title: '成本大屏', icon: 'cost' } },
   { path: '/dashboard/energy', meta: { title: '能源大屏', icon: 'energy' } },

src/modules/dashboardBig/views/index.vue

@@ -1,540 +0,0 @@
-<template>
-  <div class="screen-wrapper">
-    <div class="screen-content">
-      <header class="screen-header">
-        <h1 class="title">大数据可视化平台</h1>
-        <div class="header-right">
-          <span class="time">{{ currentTime }}</span>
-          <button v-if="isFullscreen" class="exit-fullscreen-btn" @click="exitFullscreen" title="退出全屏">
-            <span>⛶ 退出全屏</span>
-          </button>
-        </div>
-      </header>
-
-      <main class="screen-body">
-        <div class="kpi-grid">
-          <div class="kpi-card" v-for="card in cards" :key="card.title">
-            <div class="card-header">{{ card.title }}</div>
-            <div class="kpi-value" :style="{ color: card.color }">{{ card.value }}</div>
-            <div class="kpi-unit">{{ card.unit }}</div>
-          </div>
-        </div>
-
-        <div class="chart-row">
-          <div class="chart-box flex-1">
-            <div class="box-header">产量趋势</div>
-            <div ref="lineChartRef" class="chart"></div>
-          </div>
-          <div class="chart-box flex-1">
-            <div class="box-header">运行状态</div>
-            <div ref="pieChartRef" class="chart"></div>
-          </div>
-          <div class="chart-box flex-1">
-            <div class="box-header">班组排名</div>
-            <div class="ranking-list">
-              <div class="ranking-item" v-for="(item, index) in rankingList" :key="item.name">
-                <span class="rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</span>
-                <span class="name">{{ item.name }}</span>
-                <span class="value">{{ item.value }}</span>
-                <span class="unit">吨</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="chart-row">
-          <div class="chart-box flex-2">
-            <div class="box-header">实时告警</div>
-            <div class="alarm-list">
-              <div class="alarm-item" v-for="alarm in alarmList" :key="alarm.time">
-                <span class="alarm-icon">{{ alarm.icon }}</span>
-                <div class="alarm-content">
-                  <div class="alarm-title">{{ alarm.title }}</div>
-                  <div class="alarm-time">{{ alarm.time }}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onBeforeUnmount, onUnmounted, nextTick } from 'vue'
-import * as echarts from 'echarts'
-
-const currentTime = ref('')
-const isFullscreen = ref(false)
-const lineChartRef = ref(null)
-const pieChartRef = ref(null)
-let lineChart = null
-let pieChart = null
-let timeInterval = null
-let resizeObserver = null
-let fullscreenChangeHandler = null
-
-const cards = ref([
-  { title: '总产量', value: '12,580', unit: '吨', color: '#00d4ff' },
-  { title: '日产量', value: '1,258', unit: '吨', color: '#00ff88' },
-  { title: '运行效率', value: '96.8', unit: '%', color: '#7c63ff' },
-  { title: '良品率', value: '99.2', unit: '%', color: '#ff9f43' }
-])
-
-const rankingList = ref([
-  { name: '甲班', value: '3,200' },
-  { name: '乙班', value: '2,980' },
-  { name: '丙班', value: '2,850' },
-  { name: '丁班', value: '2,720' }
-])
-
-const alarmList = ref([
-  { icon: '✅', title: '系统运行正常', time: '15:30:00', level: 'success' },
-  { icon: '⚠️', title: '速度损失告警', time: '14:25:00', level: 'warning' },
-  { icon: '🔴', title: '设备故障停机', time: '13:15:00', level: 'danger' }
-])
-
-const updateTime = () => {
-  currentTime.value = new Date().toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit'
-  })
-}
-
-const initCharts = () => {
-  if (lineChartRef.value) {
-    lineChart = echarts.init(lineChartRef.value)
-    lineChart.setOption({
-      backgroundColor: 'transparent',
-      tooltip: { 
-        trigger: 'axis',
-        backgroundColor: 'rgba(10, 20, 40, 0.9)',
-        borderColor: '#1e3a5f',
-        textStyle: { color: '#fff' }
-      },
-      grid: { top: 20, right: 20, bottom: 30, left: 50 },
-      xAxis: {
-        type: 'category',
-        data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
-        axisLine: { lineStyle: { color: '#3a5a8a' } },
-        axisTick: { show: false },
-        axisLabel: { color: '#a0c4e8' }
-      },
-      yAxis: {
-        type: 'value',
-        axisLine: { show: false },
-        splitLine: { lineStyle: { color: '#1e3a5f', type: 'dashed' } },
-        axisLabel: { color: '#a0c4e8' }
-      },
-      series: [{
-        name: '产量',
-        type: 'line',
-        smooth: true,
-        data: [820, 932, 901, 1234, 1290, 1330],
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
-            { offset: 1, color: 'rgba(0, 212, 255, 0.05)' }
-          ])
-        },
-        lineStyle: { color: '#00d4ff', width: 2 },
-        itemStyle: { color: '#00d4ff' }
-      }]
-    })
-  }
-
-  if (pieChartRef.value) {
-    pieChart = echarts.init(pieChartRef.value)
-    pieChart.setOption({
-      backgroundColor: 'transparent',
-      tooltip: { 
-        trigger: 'item', 
-        formatter: '{b}: {c}% ({d}%)',
-        backgroundColor: 'rgba(10, 20, 40, 0.9)',
-        borderColor: '#1e3a5f',
-        textStyle: { color: '#fff' }
-      },
-      legend: { bottom: 0, textStyle: { color: '#a0c4e8' } },
-      series: [{
-        type: 'pie',
-        radius: ['45%', '75%'],
-        center: ['50%', '45%'],
-        data: [
-          { value: 65, name: '运行中', itemStyle: { color: '#00ff88' } },
-          { value: 20, name: '待机', itemStyle: { color: '#ffd43b' } },
-          { value: 10, name: '故障', itemStyle: { color: '#ff6b6b' } },
-          { value: 5, name: '维护', itemStyle: { color: '#00d4ff' } }
-        ],
-        label: { show: false }
-      }]
-    })
-  }
-}
-
-const handleResize = () => {
-  nextTick(() => {
-    lineChart?.resize()
-    pieChart?.resize()
-  })
-}
-
-onMounted(() => {
-  updateTime()
-  timeInterval = setInterval(updateTime, 1000)
-
-  nextTick(() => {
-    initCharts()
-    handleResize()
-
-    window.addEventListener('resize', handleResize)
-
-    if (window.ResizeObserver) {
-      resizeObserver = new ResizeObserver(() => {
-        handleResize()
-      })
-      const container = document.querySelector('.screen-wrapper')
-      if (container) {
-        resizeObserver.observe(container)
-      }
-    }
-  })
-  
-  window.addEventListener('refresh-data', handleRefresh)
-  
-  fullscreenChangeHandler = () => {
-    isFullscreen.value = !!document.fullscreenElement
-  }
-  document.addEventListener('fullscreenchange', fullscreenChangeHandler)
-})
-
-const handleRefresh = () => {
-  initCharts()
-}
-
-const exitFullscreen = () => {
-  if (document.fullscreenElement) {
-    document.exitFullscreen().catch(err => {
-      console.error('退出全屏失败:', err)
-    })
-  }
-}
-
-onBeforeUnmount(() => {
-  if (timeInterval) {
-    clearInterval(timeInterval)
-    timeInterval = null
-  }
-  window.removeEventListener('resize', handleResize)
-  window.removeEventListener('refresh-data', handleRefresh)
-  if (resizeObserver) {
-    resizeObserver.disconnect()
-    resizeObserver = null
-  }
-  if (fullscreenChangeHandler) {
-    document.removeEventListener('fullscreenchange', fullscreenChangeHandler)
-    fullscreenChangeHandler = null
-  }
-  if (lineChart) {
-    lineChart.dispose()
-    lineChart = null
-  }
-  if (pieChart) {
-    pieChart.dispose()
-    pieChart = null
-  }
-})
-
-onUnmounted(() => {
-  // 确保清理完成
-})
-</script>
-
-<style lang="scss" scoped>
-.screen-wrapper {
-  width: 100%;
-  min-height: 100vh;
-  height: 100%;
-  background: linear-gradient(180deg, #0a1428 0%, #0d1b34 50%, #0a1428 100%);
-  overflow-y: auto;
-  overflow-x: hidden;
-  margin: 0;
-  padding: 0;
-}
-
-.screen-content {
-  background: transparent;
-  color: #ffffff;
-  width: 100%;
-  min-height: 100vh;
-  margin: 0;
-  padding: 20px;
-  box-sizing: border-box;
-}
-
-.screen-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 24px;
-  background: linear-gradient(90deg, rgba(0, 168, 204, 0.9) 0%, rgba(0, 212, 255, 0.8) 50%, rgba(0, 168, 204, 0.9) 100%);
-  margin-bottom: 20px;
-  border-bottom: 2px solid rgba(0, 212, 255, 0.4);
-
-  .title {
-    font-size: 26px;
-    font-weight: bold;
-    color: #00d4ff;
-    letter-spacing: 3px;
-    margin: 0;
-    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
-  }
-
-  .header-right {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-  }
-
-  .time {
-    font-size: 18px;
-    color: #00d4ff;
-    font-family: 'Courier New', monospace;
-    font-weight: bold;
-  }
-
-  .exit-fullscreen-btn {
-    padding: 8px 16px;
-    border: 1px solid rgba(255, 107, 107, 0.5);
-    border-radius: 6px;
-    background: rgba(255, 107, 107, 0.2);
-    color: #ff6b6b;
-    font-size: 14px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    &:hover {
-      background: rgba(255, 107, 107, 0.3);
-      border-color: #ff6b6b;
-      box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
-    }
-  }
-}
-
-.screen-body {
-  padding: 0;
-}
-
-.kpi-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
-  margin-bottom: 20px;
-
-  .kpi-card {
-    background: linear-gradient(180deg, rgba(14, 40, 80, 0.9) 0%, rgba(10, 20, 40, 0.95) 100%);
-    border: 1px solid rgba(0, 212, 255, 0.2);
-    border-radius: 8px;
-    padding: 0;
-    text-align: center;
-    overflow: hidden;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-
-    .card-header {
-      background: linear-gradient(90deg, #00a8cc 0%, #00d4ff 50%, #00a8cc 100%);
-      padding: 10px 15px;
-      font-size: 14px;
-      font-weight: bold;
-      color: #0a1428;
-      letter-spacing: 2px;
-    }
-
-    .kpi-value {
-      font-size: 36px;
-      font-weight: bold;
-      margin: 15px 0 5px;
-      text-shadow: 0 0 15px currentColor;
-    }
-
-    .kpi-unit {
-      font-size: 14px;
-      color: #a0c4e8;
-      margin-bottom: 15px;
-    }
-  }
-}
-
-.chart-row {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 16px;
-
-  .chart-box {
-    background: linear-gradient(180deg, rgba(14, 40, 80, 0.85) 0%, rgba(10, 20, 40, 0.9) 100%);
-    border: 1px solid rgba(0, 212, 255, 0.15);
-    border-radius: 8px;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-
-    &.flex-1 {
-      flex: 1;
-    }
-
-    &.flex-2 {
-      flex: 2;
-    }
-
-    .box-header {
-      background: linear-gradient(90deg, rgba(0, 168, 204, 0.8) 0%, rgba(0, 212, 255, 0.6) 100%);
-      padding: 12px 18px;
-      font-size: 14px;
-      font-weight: bold;
-      color: #0a1428;
-      letter-spacing: 2px;
-      border-bottom: 1px solid rgba(0, 212, 255, 0.3);
-    }
-
-    .chart {
-      height: 300px;
-      width: 100%;
-      padding: 15px;
-    }
-
-    .ranking-list {
-      flex: 1;
-      padding: 15px;
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-
-      .ranking-item {
-        display: flex;
-        align-items: center;
-        padding: 12px;
-        background: rgba(10, 20, 40, 0.8);
-        border: 1px solid rgba(0, 212, 255, 0.15);
-        border-radius: 6px;
-
-        .rank {
-          width: 24px;
-          height: 24px;
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 12px;
-          font-weight: bold;
-          margin-right: 12px;
-          background: #3a5a8a;
-          color: #a0c4e8;
-
-          &.rank-1 { 
-            background: linear-gradient(135deg, #ffd43b, #ff9f43); 
-            color: #0a1428; 
-          }
-          &.rank-2 { 
-            background: linear-gradient(135deg, #a0c4e8, #74c0fc); 
-            color: #0a1428; 
-          }
-          &.rank-3 { 
-            background: linear-gradient(135deg, #ffa94d, #ff6b6b); 
-            color: #fff; 
-          }
-        }
-
-        .name {
-          flex: 1;
-          font-size: 14px;
-          color: #a0c4e8;
-        }
-
-        .value {
-          font-size: 16px;
-          font-weight: bold;
-          color: #00d4ff;
-        }
-
-        .unit {
-          font-size: 13px;
-          color: #a0c4e8;
-          margin-left: 5px;
-        }
-      }
-    }
-
-    .alarm-list {
-      flex: 1;
-      padding: 15px;
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-
-      .alarm-item {
-        display: flex;
-        align-items: center;
-        padding: 15px;
-        border-radius: 6px;
-        border-left: 4px solid;
-        background: rgba(10, 20, 40, 0.8);
-        border: 1px solid rgba(0, 212, 255, 0.15);
-        border-left-width: 4px;
-
-        &.success {
-          border-color: #00ff88;
-        }
-
-        &.warning {
-          border-color: #ffd43b;
-        }
-
-        &.danger {
-          border-color: #ff6b6b;
-        }
-
-        .alarm-icon {
-          font-size: 20px;
-          margin-right: 14px;
-        }
-
-        .alarm-content {
-          flex: 1;
-
-          .alarm-title {
-            font-size: 14px;
-            color: #ffffff;
-            margin-bottom: 5px;
-          }
-
-          .alarm-time {
-            font-size: 12px;
-            color: #a0c4e8;
-          }
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 1200px) {
-  .kpi-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .chart-row {
-    flex-direction: column;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .kpi-grid {
-    grid-template-columns: 1fr;
-  }
-}
-</style>

src/router/index.js

@@ -4,7 +4,7 @@ export const constantRoutes = [
   {
     path: '/',
     component: () => import('@/layout/index.vue'),
-    redirect: '/dashboard/demo',
+    redirect: '/dashboard/acid-rolling',
     children: []
   },
   {
@@ -12,12 +12,6 @@ export const constantRoutes = [
     component: () => import('@/layout/index.vue'),
     meta: { title: '数据大屏', icon: 'monitor' },
     children: [
-      {
-        path: 'demo',
-        name: 'Demo',
-        component: () => import('@/modules/dashboardBig/views/index.vue'),
-        meta: { title: '示例大屏', icon: 'example' }
-      },
       {
         path: 'order',
         name: 'Order',

src/store/modules/permission.js

@@ -36,7 +36,7 @@ const actions = {
 function filterAsyncRoutes(routes) {
   return routes.filter(route => {
     if (!route.component || route.component === '') {
-      route.component = () => import('@/modules/dashboardBig/views/index.vue')
+      route.component = () => import('@/views/screens/acid-rolling/index.vue')
     } else if (route.component !== 'Layout') {
       route.component = loadComponent(route.component)
     }
@@ -51,7 +51,6 @@ function loadComponent(componentPath) {
   const path = componentPath.replace(/^\//, '').replace(/\.vue$/, '')
   const componentMap = {
     'Layout': () => import('@/layout/index.vue'),
-    'modules/dashboardBig/views/index': () => import('@/modules/dashboardBig/views/index.vue'),
     'modules/dashboardBig/views/order': () => import('@/modules/dashboardBig/views/order.vue'),
     'modules/dashboardBig/views/cost': () => import('@/modules/dashboardBig/views/cost.vue'),
     'modules/dashboardBig/views/energy': () => import('@/modules/dashboardBig/views/energy.vue'),
@@ -60,7 +59,7 @@ function loadComponent(componentPath) {
     'modules/dashboardBig/views/stopAnalysis': () => import('@/modules/dashboardBig/views/stopAnalysis.vue'),
     'screens/acid-rolling/index': () => import('@/views/screens/acid-rolling/index.vue')
   }
-  return componentMap[path] || (() => import('@/modules/dashboardBig/views/index.vue'))
+  return componentMap[path] || (() => import('@/views/screens/acid-rolling/index.vue'))
 }
 
 export default {

src/views/screens/warehouse-overview/index.vue

@@ -209,7 +209,7 @@
         </div>
     </div>
 </dv-border-box8>
-    </div>
+</div>
 </template>
 
 <script setup>

tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}