fix: 修复样式和组件问题并增强数据图表功能

修复多个组件中的::v-deep语法错误和el-row的gutter属性绑定将el-button的type="text"更新为link类型在AppMain.vue中添加div包裹keep-alive以解决过渡问题增强DataAnalysis组件的数据处理能力，添加计算属性和默认值添加fetchChuRuKuCountBarData调用以完善库存管理功能
2025-10-09 20:22:04 +08:00
parent 94cd3f867d
commit febbcb3241
8 changed files with 71 additions and 23 deletions
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@ -2,9 +2,11 @@
  <section class="app-main">
    <router-view v-slot="{ Component, route }">
      <transition :enter-active-class="animate" mode="out-in">
-        <keep-alive :include="tagsViewStore.cachedViews">
+        <div>
+          <keep-alive :include="tagsViewStore.cachedViews">
          <component :is="Component" v-if="!route.meta.link" :key="route.path" />
        </keep-alive>
+        </div>
      </transition>
    </router-view>
    <iframe-toggle />
--- a/src/views/integratedManage/stateManage/components/manageForm.vue
+++ b/src/views/integratedManage/stateManage/components/manageForm.vue
@ -2,7 +2,7 @@
    <div class="manage-form-container">
        <!-- 搜索和筛选区域 -->
        <div class="search-filter-section">
-            <el-row gutter="12" align="middle">
+            <el-row :gutter="12" align="middle">
                <el-col :span="2">
                    <el-select v-model="searchForm.deviceType" placeholder="设备类型" clearable>
                        <el-option label="全部类型" value="" />
--- a/src/views/materialManagement/components/DataAnalysis.vue
+++ b/src/views/materialManagement/components/DataAnalysis.vue
@ -19,7 +19,7 @@
 </template>

 <script setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
 import * as echarts from 'echarts';

 // 定义props
@ -27,7 +27,6 @@ const props = defineProps({
    lineData: {
        type: Object,
        default: () => ({
-            // 默认值，防止传入数据为空时图表显示异常
            days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            rukuCounnts: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
            chukuCounnts: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90]
@ -36,8 +35,7 @@ const props = defineProps({
    barData: {
        type: Object,
        default: () => ({
-            // 默认值，防止传入数据为空时图表显示异常
-            shebeiTypes: ['设备1', '设备2', '设备3', '设备4', '设备5'],
+            shebeiTypes: ['光伏组件', '逆变器', '汇流箱', '支架', '电缆'],
            rukuCount: [5, 40, 20, 75, 60],
            chukuCount: [30, 40, 30, 30, 30]
        })
@ -52,6 +50,53 @@ const barChartRef = ref(null);
 let lineChart = null;
 let barChart = null;

+// 计算属性：处理传入的lineData，确保数据有效
+const processedLineData = computed(() => {
+    // 检查传入的数据是否有效
+    if (!props.lineData || 
+        !props.lineData.days || 
+        props.lineData.days.length === 0 ||
+        !Array.isArray(props.lineData.rukuCounnts) ||
+        !Array.isArray(props.lineData.chukuCounnts)) {
+        return {
+            days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+            rukuCounnts: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
+            chukuCounnts: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90]
+        };
+    }
+    
+    // 检查rukuCounnts和chukuCounnts是否全为0
+    const isRukuAllZero = props.lineData.rukuCounnts.every(item => item === 0);
+    const isChukuAllZero = props.lineData.chukuCounnts.every(item => item === 0);
+    
+    if (isRukuAllZero && isChukuAllZero) {
+        return {
+            days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+            rukuCounnts: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
+            chukuCounnts: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90]
+        };
+    }
+    
+    return props.lineData;
+});
+
+// 计算属性：处理传入的barData，确保数据有效
+const processedBarData = computed(() => {
+    // 检查传入的数据是否有效
+    if (!props.barData || 
+        !props.barData.shebeiTypes || 
+        props.barData.shebeiTypes.length === 0 ||
+        !Array.isArray(props.barData.rukuCount) ||
+        !Array.isArray(props.barData.chukuCount)) {
+        return {
+            shebeiTypes: ['光伏组件', '逆变器', '汇流箱', '支架', '电缆'],
+            rukuCount: [5, 40, 20, 75, 60],
+            chukuCount: [30, 40, 30, 30, 30]
+        };
+    }
+    return props.barData;
+});
+
 onMounted(() => {
    // 初始化折线图
    initLineChart();
@ -99,7 +144,7 @@ const initLineChart = () => {
            },
            xAxis: {
                type: 'category',
-                data: props.lineData.days
+                data: processedLineData.value.days
            },
            yAxis: {
                type: 'value'
@ -108,7 +153,7 @@ const initLineChart = () => {
                {
                    name: '入库数量',
                    type: 'line',
-                    data: props.lineData.rukuCounnts,
+                    data: processedLineData.value.rukuCounnts,
                    symbol: 'none',
                    smooth: true,
                    lineStyle: {
@ -127,7 +172,7 @@ const initLineChart = () => {
                {
                    name: '出库数量',
                    type: 'line',
-                    data: props.lineData.chukuCounnts,
+                    data: processedLineData.value.chukuCounnts,
                    symbol: 'none',
                    smooth: true,
                    lineStyle: {
@ -177,7 +222,7 @@ const initBarChart = () => {
            },
            xAxis: {
                type: 'category',
-                data: props.barData.shebeiTypes,
+                data: processedBarData.value.shebeiTypes,
                axisLabel: {
                    interval: 0, // 强制显示所有标签
                    rotate: 30, // 标签旋转30度
@ -193,7 +238,7 @@ const initBarChart = () => {
                {
                    name: '入库数量',
                    type: 'bar',
-                    data: props.barData.rukuCount,
+                    data: processedBarData.value.rukuCount,
                    itemStyle: {
                        color: 'rgba(22, 93, 255, 1)' // 入库数量颜色
                    },
@ -204,7 +249,7 @@ const initBarChart = () => {
                {
                    name: '出库数量',
                    type: 'bar',
-                    data: props.barData.chukuCount,
+                    data: processedBarData.value.chukuCount,
                    itemStyle: {
                        color: 'rgba(15, 198, 194, 1)' // 出库数量颜色
                    },
@ -228,8 +273,8 @@ const handleResize = () => {
    }
 };

-// 监听lineData变化，更新折线图
-watch(() => props.lineData, () => {
+// 监听数据变化，更新图表
+watch([() => props.lineData, () => props.barData], () => {
    initLineChart();
    initBarChart();
 }, { deep: true });
--- a/src/views/materialManagement/components/detailInfo.vue
+++ b/src/views/materialManagement/components/detailInfo.vue
@ -137,7 +137,7 @@ const handlePreview = (file) => {
    margin-top: 5px;
 }

-::v-deep(.el-input__inner) {
+:v-deep(.el-input__inner) {
    color: red;
 }
 </style>
--- a/src/views/materialManagement/inventoryManagement.vue
+++ b/src/views/materialManagement/inventoryManagement.vue
@ -315,7 +315,7 @@
    padding: 12px 0;
 }

-::v-deep(.el-card__body) {
+:v-deep(.el-card__body) {
    height: 100%;
 }
 </style>
@ -691,6 +691,7 @@ watch(() => userStore.selectedProject, (newProject) => {
        // 调用getList刷新数据
        getList();
        fetchChuRuKuCountLineData();
+        fetchChuRuKuCountBarData();
    }
 }, { immediate: true, deep: true });
 onMounted(() => {
--- a/src/views/materialManagement/procurementPlan.vue
+++ b/src/views/materialManagement/procurementPlan.vue
@ -121,8 +121,8 @@
                            </el-table-column>
                            <el-table-column label="操作" fixed="right" align="center">
                                <template #default="scope">
-                                    <el-button type="text" @click="handleView(scope.row)">查看</el-button>
-                                    <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
+                                    <el-button link @click="handleView(scope.row)">查看</el-button>
+                                    <el-button link @click="handleUpdate(scope.row)">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
--- a/src/views/securitySurveillance/components/sbzt.vue
+++ b/src/views/securitySurveillance/components/sbzt.vue
@ -1,10 +1,10 @@
 <template>
    <el-card style="border-radius: 15px;">
-        <el-row gutter="35">
+        <el-row :gutter="35">
            <el-col :span="8" class="status-card">
                <div class="title">设备状态</div>
                <!-- gutter设置为20，创建左右间隙 -->
-                <el-row gutter="20" style="width: 100%;">
+                <el-row :gutter="20" style="width: 100%;">
                    <!-- 一行2个，每个占12格（24/2=12） -->
                    <el-col :span="12">
                        <div class="item">
@ -120,7 +120,7 @@
    }

    .red {
-        ::v-deep::before {
+        :v-deep::before {
            position: absolute;
            content: '';
            background-color: rgba(227, 39, 39, 1);
@ -133,7 +133,7 @@
    }

    .yellow {
-        ::v-deep::before {
+        :v-deep::before {
            position: absolute;
            content: '';
            background-color: rgba(255, 208, 35, 1);
--- a/src/views/securitySurveillance/components/spgl.vue
+++ b/src/views/securitySurveillance/components/spgl.vue
@ -132,7 +132,7 @@
    position: relative;
    margin: 10px 0;

-    ::v-deep::before {
+    :v-deep::before {
        position: absolute;
        width: 5px;
        height: 5px;