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

修复多个组件中的::v-deep语法错误和el-row的gutter属性绑定
将el-button的type="text"更新为link类型
在AppMain.vue中添加div包裹keep-alive以解决过渡问题
增强DataAnalysis组件的数据处理能力，添加计算属性和默认值
添加fetchChuRuKuCountBarData调用以完善库存管理功能

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 />

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="" />

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: ['光伏组件', '逆变器', '汇流箱', '支架', '电缆'],
-            shebeiTypes: ['设备1', '设备2', '设备3', '设备4', '设备5'],
             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 });

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>

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(() => {

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 link @click="handleView(scope.row)">查看</el-button>
-                                    <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
+                                    <el-button link @click="handleUpdate(scope.row)">编辑</el-button>
                                 </template>
                             </el-table-column>
                         </el-table>

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);

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;